From 1bdda95456c1af5be8284c493d0c9f89f8e2dd4a Mon Sep 17 00:00:00 2001 From: ivakoleva Date: Wed, 1 Mar 2023 09:51:32 +0200 Subject: [PATCH] versatile-data-kit: pre-commit hook for (S)CSS/JS/TS/HTML formatting (#1684) We need a formatting pre-commit hook, to cover the new tech stack added with the Frontend component. Adding and configured a pre-commit hook. Testing done: tested locally; ci/cd --------- Signed-off-by: ivakoleva Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> --- .pre-commit-config.yaml | 17 +- .../gui/e2e/integration/app/app.spec.js | 21 +- .../getting-started/getting-started.spec.js | 139 +- .../lib/explore/data-job-details.spec.js | 327 +- .../lib/explore/data-job-executions.spec.js | 164 +- .../integration/lib/explore/data-jobs.spec.js | 546 +- .../lib/manage/data-job-details.int.spec.js | 423 +- .../manage/data-job-executions.int.spec.js | 1120 +- .../lib/manage/data-jobs.int.spec.js | 967 +- .../data-pipelines/gui/e2e/plugins/index.js | 24 +- .../support/application/data-job-base.po.js | 57 +- .../application/data-job-details-base.po.js | 32 +- .../support/application/data-jobs-base.po.js | 92 +- .../application/data-pipelines-base.po.js | 31 +- .../gui/e2e/support/commands.js | 425 +- .../e2e/support/helpers/commands.helpers.js | 763 +- .../data-pipelines/gui/e2e/support/index.js | 12 +- .../gui/e2e/support/pages/app/app.po.js | 6 +- .../data-jobs-health-panel-component.po.js | 56 +- .../app/getting-started/getting-started.po.js | 8 +- .../app/lib/explore/data-job-details.po.js | 4 +- .../pages/app/lib/explore/data-jobs.po.js | 58 +- .../app/lib/manage/data-job-details.po.js | 115 +- .../app/lib/manage/data-job-executions.po.js | 211 +- .../pages/app/lib/manage/data-jobs.po.js | 144 +- .../gui/projects/data-pipelines/karma.conf.js | 62 +- .../_data-jobs-base-grid.component.scss | 196 +- .../data-jobs-base-grid.component.ts | 316 +- .../data-job/data-job-page.component.html | 302 +- .../data-job/data-job-page.component.scss | 144 +- .../data-job/data-job-page.component.spec.ts | 141 +- .../data-job/data-job-page.component.ts | 389 +- .../data-job-details-page.component.html | 782 +- .../data-job-details-page.component.scss | 159 +- .../data-job-details-page.component.spec.ts | 185 +- .../data-job-details-page.component.ts | 180 +- ...ob-deployment-details-modal.component.html | 43 +- ...ob-deployment-details-modal.component.scss | 11 +- ...-job-deployment-details-modal.component.ts | 29 +- ...job-execution-status-filter.component.html | 14 +- ...a-job-execution-status-filter.component.ts | 13 +- .../data-job-execution-status.component.html | 30 +- .../data-job-execution-status.component.scss | 10 +- .../data-job-execution-status.component.ts | 84 +- ...a-job-execution-type-filter.component.html | 16 +- ...ata-job-execution-type-filter.component.ts | 10 +- .../data-job-execution-type.component.html | 17 +- .../data-job-execution-type.component.ts | 10 +- .../execution-duration-comparator.spec.ts | 16 +- .../execution-duration-comparator.ts | 4 +- .../data-job-executions-grid.component.html | 163 +- .../data-job-executions-grid.component.scss | 6 +- .../data-job-executions-grid.component.ts | 15 +- .../data-job-executions-page.component.html | 44 +- .../data-job-executions-page.component.scss | 42 +- .../data-job-executions-page.component.ts | 150 +- .../execution-duration-chart.component.html | 20 +- .../execution-duration-chart.component.scss | 26 +- .../execution-duration-chart.component.ts | 306 +- .../execution-status-chart.component.html | 12 +- .../execution-status-chart.component.scss | 22 +- .../execution-status-chart.component.ts | 119 +- .../model/data-job-execution.spec.ts | 29 +- .../executions/model/data-job-execution.ts | 34 +- .../time-period-filter.component.html | 197 +- .../time-period-filter.component.scss | 649 +- .../time-period-filter.component.ts | 109 +- .../data-jobs-explore-grid.component.html | 532 +- .../data-jobs-explore-grid.component.scss | 6 +- .../data-jobs-explore-grid.component.spec.ts | 186 +- .../grid/data-jobs-explore-grid.component.ts | 36 +- .../data-jobs-explore-page.component.html | 7 +- .../data-jobs-explore-page.component.spec.ts | 2 +- .../data-jobs-explore-page.component.ts | 5 +- .../grid/data-jobs-manage-grid.component.html | 607 +- .../grid/data-jobs-manage-grid.component.scss | 10 +- .../data-jobs-manage-grid.component.spec.ts | 176 +- .../grid/data-jobs-manage-grid.component.ts | 153 +- .../data-jobs-manage-page.component.html | 7 +- .../data-jobs-manage-page.component.spec.ts | 2 +- .../data-jobs-manage-page.component.ts | 5 +- ...data-jobs-executions-widget.component.html | 72 +- ...data-jobs-executions-widget.component.scss | 84 +- .../data-jobs-executions-widget.component.ts | 24 +- .../data-jobs-failed-widget.component.html | 41 +- .../data-jobs-failed-widget.component.scss | 74 +- .../data-jobs-failed-widget.component.ts | 31 +- .../data-jobs-health-panel.component.html | 106 +- .../data-jobs-health-panel.component.scss | 469 +- .../data-jobs-health-panel.component.ts | 90 +- .../data-jobs-widget-one.component.html | 177 +- .../data-jobs-widget-one.component.scss | 450 +- .../data-jobs-widget-one.component.spec.ts | 69 +- .../widgets/data-jobs-widget-one.component.ts | 81 +- .../src/lib/components/widgets/variables.scss | 6 +- ...dget-execution-status-gauge.component.html | 35 +- ...dget-execution-status-gauge.component.scss | 776 +- ...widget-execution-status-gauge.component.ts | 12 +- .../src/lib/components/widgets/widget.scss | 23 +- .../src/lib/data-pipelines.module.ts | 38 +- .../src/lib/model/constants.model.ts | 4 +- .../src/lib/model/data-job-base.model.ts | 10 +- .../lib/model/data-job-deployments.model.ts | 5 +- .../lib/model/data-job-executions.model.ts | 8 +- .../src/lib/model/data-job.model.ts | 8 +- .../src/lib/model/grid-config.model.ts | 2 +- .../src/lib/model/route.model.ts | 10 +- .../src/lib/model/toast-definitions.model.ts | 2 +- .../data-jobs-base.api.service.spec.ts | 181 +- .../services/data-jobs-base.api.service.ts | 87 +- .../data-jobs-public.api.service.spec.ts | 94 +- .../services/data-jobs-public.api.service.ts | 97 +- .../services/data-jobs.api.service.spec.ts | 200 +- .../src/lib/services/data-jobs.api.service.ts | 184 +- .../lib/services/data-jobs.service.spec.ts | 143 +- .../src/lib/services/data-jobs.service.ts | 29 +- .../confirmation-dialog-modal.component.html | 39 +- .../confirmation-dialog-modal.component.scss | 21 +- ...onfirmation-dialog-modal.component.spec.ts | 7 +- .../confirmation-dialog-modal.component.ts | 3 +- .../column-filter.component.html | 33 +- .../column-filter.component.scss | 11 +- .../column-filter.component.spec.ts | 21 +- .../column-filter/column-filter.component.ts | 18 +- .../grid-action/grid-action.component.html | 114 +- .../grid-action/grid-action.component.scss | 114 +- .../grid-action/grid-action.component.spec.ts | 2 +- .../grid-action/grid-action.component.ts | 32 +- .../delete-modal/delete-modal.component.html | 37 +- .../delete-modal.component.spec.ts | 2 +- .../delete-modal/delete-modal.component.ts | 3 +- .../empty-state/empty-state.component.html | 8 +- .../empty-state/empty-state.component.scss | 27 +- .../empty-state/empty-state.component.spec.ts | 12 +- .../empty-state/empty-state.component.ts | 25 +- .../executions-timeline.component.html | 176 +- .../executions-timeline.component.scss | 56 +- .../executions-timeline.component.spec.ts | 37 +- .../executions-timeline.component.ts | 30 +- .../components/modal/modal.component.ts | 6 +- .../quick-filters.component.html | 43 +- .../quick-filters.component.scss | 44 +- .../quick-filters.component.spec.ts | 5 +- .../quick-filters/quick-filters.component.ts | 39 +- .../status-cell/status-cell.component.html | 60 +- .../status-cell/status-cell.component.spec.ts | 12 +- .../status-cell/status-cell.component.ts | 2 +- .../status-panel/status-panel.component.html | 36 +- .../status-panel.component.spec.ts | 8 +- .../status-panel/status-panel.component.ts | 2 +- .../widget-value/widget-value.component.html | 15 +- .../widget-value.component.spec.ts | 5 +- .../widget-value/widget-value.component.ts | 2 +- .../directives/attribute.directive.spec.ts | 17 +- .../shared/directives/attribute.directive.ts | 69 +- .../lib/shared/model/modal-options.spec.ts | 8 +- .../pipes/contacts-present.pipe.spec.ts | 39 +- .../lib/shared/pipes/contacts-present.pipe.ts | 24 +- .../pipes/execution-success-rate.pipe.spec.ts | 4 +- .../pipes/execution-success-rate.pipe.ts | 13 +- .../lib/shared/pipes/extract-contacts.pipe.ts | 4 +- .../pipes/extract-job-status.pipe.spec.ts | 4 +- .../shared/pipes/extract-job-status.pipe.ts | 2 +- .../shared/pipes/format-delta.pipe.spec.ts | 10 +- .../src/lib/shared/pipes/format-delta.pipe.ts | 25 +- .../lib/shared/pipes/format-duration.pipe.ts | 6 +- .../shared/pipes/format-schedule.pipe.spec.ts | 112 +- .../lib/shared/pipes/format-schedule.pipe.ts | 33 +- .../lib/shared/pipes/parse-epoch.pipe.spec.ts | 4 +- .../src/lib/shared/pipes/parse-epoch.pipe.ts | 2 +- .../shared/pipes/parse-next-run.pipe.spec.ts | 46 +- .../lib/shared/pipes/parse-next-run.pipe.ts | 2 +- .../src/lib/shared/utils/cron.util.spec.ts | 4 +- .../src/lib/shared/utils/cron.util.ts | 2 +- .../lib/shared/utils/data-job.util.spec.ts | 81 +- .../src/lib/shared/utils/data-job.util.ts | 80 +- .../src/lib/shared/utils/date.util.spec.ts | 36 +- .../src/lib/shared/utils/date.util.ts | 10 +- .../src/lib/shared/utils/error.util.ts | 5 +- .../src/lib/shared/utils/string.util.spec.ts | 16 +- .../lib/state/actions/data-jobs.actions.ts | 3 +- .../state/effects/data-jobs.effects.spec.ts | 915 +- .../lib/state/effects/data-jobs.effects.ts | 331 +- .../src/lib/state/tasks/data-job.tasks.ts | 6 +- .../gui/projects/data-pipelines/src/test.ts | 13 +- .../gui/projects/ui/karma.conf.js | 60 +- .../projects/ui/src/app/app.component.html | 53 +- .../projects/ui/src/app/app.component.scss | 26 +- .../projects/ui/src/app/app.component.spec.ts | 24 +- .../gui/projects/ui/src/app/app.component.ts | 60 +- .../gui/projects/ui/src/app/app.module.ts | 33 +- .../gui/projects/ui/src/app/app.routing.ts | 57 +- .../gui/projects/ui/src/app/auth.ts | 7 +- .../getting-started.component.html | 51 +- .../getting-started.component.spec.ts | 5 +- .../getting-started.component.ts | 2 +- .../projects/ui/src/app/http.interceptor.ts | 45 +- .../projects/ui/src/assets/css/clr-ui.min.css | 17599 +++++++++++++++- .../ui/src/environments/environment.prod.ts | 2 +- .../ui/src/environments/environment.ts | 4 +- .../gui/projects/ui/src/index.html | 28 +- .../gui/projects/ui/src/main.ts | 2 +- .../gui/projects/ui/src/styles.scss | 142 +- .../gui/projects/ui/src/test.ts | 13 +- .../projects/documentation-ui/karma.conf.js | 124 +- .../src/app/app-routing.module.ts | 29 +- .../src/app/app.component.html | 103 +- .../src/app/app.component.scss | 48 +- .../src/app/app.component.spec.ts | 34 +- .../documentation-ui/src/app/app.component.ts | 42 +- .../documentation-ui/src/app/app.module.ts | 80 +- .../projects/documentation-ui/src/app/auth.ts | 34 +- .../src/app/core/core.component.html | 7 +- .../src/app/core/core.component.scss | 23 +- .../src/app/core/core.component.spec.ts | 30 +- .../src/app/core/core.component.ts | 9 +- .../src/app/core/core.module.ts | 15 +- .../src/app/http.interceptor.ts | 108 +- .../src/environments/environment.prod.ts | 2 +- .../src/environments/environment.ts | 4 +- .../projects/documentation-ui/src/index.html | 24 +- .../gui/projects/documentation-ui/src/main.ts | 6 +- .../projects/documentation-ui/src/styles.scss | 210 +- .../gui/projects/documentation-ui/src/test.ts | 27 +- .../gui/projects/shared/karma.conf.js | 121 +- .../shared/src/lib/common/http/index.ts | 2 - .../shared/src/lib/common/http/public-api.ts | 2 - .../src/lib/common/http/request/index.ts | 2 - .../common/http/request/request.model.spec.ts | 801 +- .../lib/common/http/request/request.model.ts | 275 +- .../projects/shared/src/lib/common/index.ts | 2 - .../common/interfaces/comparable.interface.ts | 98 +- .../lib/common/interfaces/copy.interface.ts | 12 +- .../common/interfaces/expression.interface.ts | 18 +- .../shared/src/lib/common/interfaces/index.ts | 2 - .../common/interfaces/literal.interface.ts | 36 +- .../common/interfaces/predicate.interface.ts | 23 +- .../src/lib/common/interfaces/public-api.ts | 2 - .../common/interfaces/replacer.interface.ts | 6 +- .../interfaces/serializable.interface.ts | 22 +- .../shared/src/lib/common/object/index.ts | 2 - .../src/lib/common/object/model/index.ts | 2 - .../object/model/taurus-object.model.spec.ts | 317 +- .../object/model/taurus-object.model.ts | 141 +- .../src/lib/common/object/public-api.ts | 2 - .../comparable/comparable.impl.spec.ts | 558 +- .../predicate/comparable/comparable.impl.ts | 196 +- .../lib/common/predicate/comparable/index.ts | 2 - .../predicates-comparable.impl.spec.ts | 659 +- .../comparable/predicates-comparable.impl.ts | 204 +- .../predicate/compound/and.predicate.spec.ts | 245 +- .../predicate/compound/and.predicate.ts | 41 +- .../compound/base-compound.predicate.spec.ts | 33 +- .../compound/base-compound.predicate.ts | 72 +- .../lib/common/predicate/compound/index.ts | 2 - .../predicate/compound/or.predicate.spec.ts | 245 +- .../common/predicate/compound/or.predicate.ts | 41 +- .../shared/src/lib/common/predicate/index.ts | 2 - .../src/lib/common/predicate/public-api.ts | 2 - .../simple/base-simple.predicate.spec.ts | 33 +- .../predicate/simple/base-simple.predicate.ts | 46 +- .../predicate/simple/equal.predicate.spec.ts | 136 +- .../predicate/simple/equal.predicate.ts | 42 +- .../src/lib/common/predicate/simple/index.ts | 2 - .../shared/src/lib/common/public-api.ts | 2 - .../shared/src/lib/common/route/index.ts | 2 - .../shared/src/lib/common/route/public-api.ts | 2 - .../src/lib/common/route/route.model.ts | 143 +- .../shared/src/lib/common/tasks/index.ts | 2 - .../shared/src/lib/common/tasks/public-api.ts | 2 - .../src/lib/common/tasks/task.model.spec.ts | 97 +- .../shared/src/lib/common/tasks/task.model.ts | 36 +- .../shared/src/lib/commons/css/colors.scss | 14 +- .../src/lib/commons/css/screen-sizes.scss | 24 +- .../shared/src/lib/commons/css/utils.scss | 15 +- .../projects/shared/src/lib/commons/index.ts | 2 - .../ngx-components/animation-constants.ts | 6 +- .../copy-to-clipboard-button.component.html | 84 +- .../copy-to-clipboard-button.component.scss | 130 +- ...copy-to-clipboard-button.component.spec.ts | 163 +- .../copy-to-clipboard-button.component.ts | 228 +- .../copy-to-clipboard-button.l10n.ts | 72 +- .../copy-to-clipboard-button/index.ts | 8 +- .../copy-to-clipboard-button/public-api.ts | 2 - .../empty-state-placeholder.component.html | 15 +- .../empty-state-placeholder.component.scss | 62 +- .../empty-state-placeholder.component.ts | 16 +- .../empty-state-placeholder.module.ts | 27 +- .../empty-state-placeholder/index.ts | 6 +- .../empty-state-placeholder/public-api.ts | 2 - .../form-section-container.component.html | 92 +- .../form-section-container.component.scss | 12 +- .../form-section-container.component.spec.ts | 378 +- .../form-section-container.component.ts | 328 +- .../form-section-container/index.ts | 8 +- .../form-section-container/public-api.ts | 2 - .../form-section/form-section.component.html | 25 +- .../form-section/form-section.component.scss | 53 +- .../form-section.component.spec.ts | 118 +- .../form-section/form-section.component.ts | 99 +- .../ngx-components/form-section/index.ts | 10 +- .../ngx-components/form-section/public-api.ts | 3 - .../src/lib/commons/ngx-components/index.ts | 17 +- .../lib/commons/ngx-components/public-api.ts | 2 - .../commons/ngx-components/search/index.ts | 2 +- .../ngx-components/search/public-api.ts | 2 - .../search/search.component.html | 96 +- .../search/search.component.scss | 140 +- .../search/search.component.spec.ts | 421 +- .../ngx-components/search/search.component.ts | 261 +- .../ngx-components/search/search.module.ts | 25 +- .../lib/commons/ngx-components/toast/index.ts | 17 +- .../ngx-components/toast/public-api.ts | 2 - .../toast/toast-container.component.html | 2 +- .../toast/toast-container.component.scss | 40 +- .../toast/toast-container.component.ts | 59 +- .../ngx-components/toast/toast.component.html | 190 +- .../ngx-components/toast/toast.component.scss | 469 +- .../ngx-components/toast/toast.component.ts | 632 +- .../ngx-components/toast/toast.l10n.ts | 144 +- .../ngx-components/toast/toast.model.ts | 8 +- .../vdk-ngx-components.module.ts | 160 +- .../shared/src/lib/commons/ngx-utils/index.ts | 2 +- .../src/lib/commons/ngx-utils/public-api.ts | 2 - .../simple-translate-service/index.ts | 6 +- .../simple-translate-service/public-api.ts | 2 - .../simple-translate.module.ts | 30 +- .../simple-translate.pipe.ts | 12 +- .../simple-translate.service.spec.ts | 96 +- .../simple-translate.service.ts | 167 +- .../src/lib/core/component/base/index.ts | 2 - .../core/component/base/interfaces/index.ts | 2 - ...rus-component-lifecycle-hooks.interface.ts | 141 +- .../base/taurus-base.component.spec.ts | 1192 +- .../component/base/taurus-base.component.ts | 637 +- .../shared/src/lib/core/component/index.ts | 2 - .../model/component-model.comparable.spec.ts | 465 +- .../model/component-model.comparable.ts | 133 +- .../model/component.model.interface.ts | 329 +- .../component/model/component.model.spec.ts | 923 +- .../core/component/model/component.model.ts | 464 +- .../src/lib/core/component/model/index.ts | 2 - .../model/state/component-state.model.spec.ts | 598 +- .../model/state/component-state.model.ts | 824 +- .../model/state/component-status.model.ts | 9 +- .../state/components-state.model.spec.ts | 648 +- .../model/state/components-state.model.ts | 560 +- .../lib/core/component/model/state/index.ts | 2 - .../src/lib/core/component/public-api.ts | 2 - .../services/component.service.spec.ts | 1652 +- .../component/services/component.service.ts | 770 +- .../src/lib/core/component/services/index.ts | 2 - .../state/actions/component.actions.spec.ts | 570 +- .../state/actions/component.actions.ts | 152 +- .../lib/core/component/state/actions/index.ts | 2 - .../src/lib/core/component/state/index.ts | 2 - .../operators/component-rx.operators.spec.ts | 436 +- .../state/operators/component-rx.operators.ts | 110 +- .../core/component/state/operators/index.ts | 2 - .../state/reducers/component.reducer.spec.ts | 842 +- .../state/reducers/component.reducer.ts | 277 +- .../core/component/state/reducers/index.ts | 2 - .../gui/projects/shared/src/lib/core/index.ts | 2 - .../shared/src/lib/core/navigation/index.ts | 2 - .../src/lib/core/navigation/public-api.ts | 2 - .../src/lib/core/navigation/services/index.ts | 2 - .../services/navigation.service.spec.ts | 870 +- .../navigation/services/navigation.service.ts | 699 +- .../core/ngrx/actions/base.actions.spec.ts | 134 +- .../src/lib/core/ngrx/actions/base.actions.ts | 99 +- .../shared/src/lib/core/ngrx/actions/index.ts | 2 - .../shared/src/lib/core/ngrx/config/index.ts | 2 - .../ngrx/config/ngrx-config.model.spec.ts | 43 +- .../lib/core/ngrx/config/ngrx-config.model.ts | 29 +- .../shared/src/lib/core/ngrx/effects/index.ts | 2 - .../effects/root-effects.registry.spec.ts | 10 +- .../ngrx/effects/root-effects.registry.ts | 6 +- .../src/lib/core/ngrx/helper-modules/index.ts | 2 - .../taurus-shared-ngrx-dev.module.ts | 67 +- .../taurus-shared-ngrx-prod.module.ts | 42 +- .../shared/src/lib/core/ngrx/index.ts | 2 - .../shared/src/lib/core/ngrx/public-api.ts | 2 - .../src/lib/core/ngrx/reducers/index.ts | 2 - .../shared-root-reducers.registry.spec.ts | 16 +- .../reducers/shared-root-reducers.registry.ts | 6 +- .../shared/src/lib/core/ngrx/state/index.ts | 2 - .../lib/core/ngrx/state/store-state.model.ts | 6 +- .../core/ngrx/taurus-shared-ngrx.module.ts | 135 +- .../shared/src/lib/core/public-api.ts | 2 - .../src/lib/core/router/factory/index.ts | 2 - .../factory/route-state.factory.spec.ts | 85 +- .../router/factory/route-state.factory.ts | 76 +- .../shared/src/lib/core/router/index.ts | 2 - .../lib/core/router/integration/ngrx/index.ts | 2 - .../ngrx/router-serializer.service.spec.ts | 193 +- .../ngrx/router-serializer.service.ts | 48 +- .../shared/src/lib/core/router/model/index.ts | 2 - .../lib/core/router/model/route.model.spec.ts | 1555 +- .../src/lib/core/router/model/route.model.ts | 807 +- .../shared/src/lib/core/router/public-api.ts | 2 - .../src/lib/core/router/services/index.ts | 2 - .../router/services/router.service.spec.ts | 353 +- .../core/router/services/router.service.ts | 125 +- .../lib/core/router/state/actions/index.ts | 2 - .../state/actions/router.actions.spec.ts | 337 +- .../router/state/actions/router.actions.ts | 102 +- .../lib/core/router/state/effects/index.ts | 2 - .../state/effects/router.effects.spec.ts | 251 +- .../router/state/effects/router.effects.ts | 147 +- .../lib/core/router/state/reducers/index.ts | 2 - .../state/reducers/router.reducer.spec.ts | 62 +- .../router/state/reducers/router.reducer.ts | 56 +- .../event-handler-class.decorator.ts | 154 +- .../decorator/event-handler.decorator.spec.ts | 111 +- .../decorator/event-handler.decorator.ts | 71 +- .../lib/core/system-events/decorator/index.ts | 2 - .../models/event-decorator-helper.ts | 5 +- .../system-events/decorator/models/index.ts | 2 - .../dispatcher/event.dispatcher.spec.ts | 320 +- .../dispatcher/event.dispatcher.ts | 266 +- .../core/system-events/dispatcher/index.ts | 2 - .../models/event-dispatcher.model.ts | 47 +- .../system-events/dispatcher/models/index.ts | 2 - .../registry/event-handler.registry.spec.ts | 522 +- .../registry/event-handler.registry.ts | 521 +- .../dispatcher/registry/index.ts | 2 - .../src/lib/core/system-events/event/index.ts | 2 - .../models/event-filter.expression.spec.ts | 277 +- .../event/models/event-filter.expression.ts | 81 +- .../event/models/event-helper.ts | 2 - .../system-events/event/models/event.codes.ts | 2 - .../event/models/event.comparable.spec.ts | 280 +- .../event/models/event.comparable.ts | 72 +- .../core/system-events/event/models/index.ts | 2 - .../src/lib/core/system-events/index.ts | 2 - .../src/lib/core/system-events/public-api.ts | 10 +- .../src/lib/core/taurus-shared-core.module.ts | 56 +- .../src/lib/core/url-state-manager/index.ts | 2 - .../lib/core/url-state-manager/public-api.ts | 2 - .../url-state-manager/url-state.manager.ts | 456 +- .../lib/features/error-handler/public-api.ts | 2 - .../service/error-handler.service.spec.ts | 953 +- .../service/error-handler.service.ts | 337 +- .../features/error-handler/service/index.ts | 2 - .../shared/src/lib/features/public-api.ts | 2 - .../features/taurus-shared-features.module.ts | 71 +- .../src/lib/features/toasts/model/index.ts | 2 - .../features/toasts/model/toast.interface.ts | 28 +- .../src/lib/features/toasts/public-api.ts | 2 - .../src/lib/features/toasts/service/index.ts | 2 - .../toasts/service/toast.service.spec.ts | 48 +- .../features/toasts/service/toast.service.ts | 28 +- .../src/lib/features/toasts/toasts.module.ts | 18 +- .../src/lib/features/toasts/widget/index.ts | 2 - .../toasts/widget/toasts.component.html | 47 +- .../toasts/widget/toasts.component.scss | 16 +- .../toasts/widget/toasts.component.spec.ts | 82 +- .../toasts/widget/toasts.component.ts | 282 +- .../shared/src/lib/unit-testing/index.ts | 2 - .../shared/src/lib/unit-testing/public-api.ts | 2 - .../src/lib/unit-testing/utils/index.ts | 2 - .../lib/unit-testing/utils/router-utils.ts | 220 +- .../lib/unit-testing/utils/unit-test-utils.ts | 22 +- .../collections/collections-util.spec.ts | 2009 +- .../lib/utils/collections/collections-util.ts | 911 +- .../shared/src/lib/utils/collections/index.ts | 2 - .../projects/shared/src/lib/utils/index.ts | 2 - .../shared/src/lib/utils/model/data-source.ts | 30 +- .../shared/src/lib/utils/model/index.ts | 2 - .../src/lib/utils/model/shorthand-types.ts | 32 +- .../shared/src/lib/utils/public-api.ts | 40 +- .../shared/src/lib/utils/url/index.ts | 2 - .../shared/src/lib/utils/url/url.util.spec.ts | 52 +- .../shared/src/lib/utils/url/url.util.ts | 26 +- .../gui/projects/shared/src/test.ts | 27 +- .../vdk-jupyterlab-extension/src/index.ts | 5 +- .../vdk-jupyterlab-extension/src/jobData.ts | 1 - .../src/serverRequests.ts | 2 +- .../vdk-jupyterlab-extension/src/utils.ts | 1 - .../src/vdkOptions/vdk_options.ts | 14 +- .../tests/vdk-jupyterlab-extension.spec.ts | 96 +- 481 files changed, 49124 insertions(+), 26006 deletions(-) diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index 716c0a44d9..f8caca2cef 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -139,15 +139,8 @@ repos: - --use-current-year - --license-filepath - NOTICE.txt -# License header create issues in helm chart yaml files -# https://github.com/helm/helm/issues/4409 -# - id: insert-license -# files: \.yml$ -# args: -# - --license-filepath -# - NOTICE.txt -# - id: insert-license -# files: \.yaml$ -# args: -# - --license-filepath -# - NOTICE.txt + - repo: https://github.com/pre-commit/mirrors-prettier + rev: v2.7.1 + hooks: + - id: prettier + types_or: [scss, css, javascript, ts, html] diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/app/app.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/app/app.spec.js index fa088eef37..00ea1a928a 100644 --- a/projects/frontend/data-pipelines/gui/e2e/integration/app/app.spec.js +++ b/projects/frontend/data-pipelines/gui/e2e/integration/app/app.spec.js @@ -5,14 +5,14 @@ /// -import { AppPage } from '../../support/pages/app/app.po'; +import { AppPage } from "../../support/pages/app/app.po"; -describe('App Page', { tags: ['@dataPipelines'] }, () => { +describe("App Page", { tags: ["@dataPipelines"] }, () => { before(() => { return AppPage.recordHarIfSupported() - .then(() => cy.clearLocalStorageSnapshot('app')) - .then(() => AppPage.login()) - .then(() => cy.saveLocalStorage('app')); + .then(() => cy.clearLocalStorageSnapshot("app")) + .then(() => AppPage.login()) + .then(() => cy.saveLocalStorage("app")); }); after(() => { @@ -20,19 +20,16 @@ describe('App Page', { tags: ['@dataPipelines'] }, () => { }); beforeEach(() => { - cy.restoreLocalStorage('app'); + cy.restoreLocalStorage("app"); }); - it('App Page - Main Title Component have text: Data Pipelines', () => { + it("App Page - Main Title Component have text: Data Pipelines", () => { AppPage.navigateTo(); const page = AppPage.getPage(); - page - .waitForInitialPageLoad(); + page.waitForInitialPageLoad(); - page - .getMainTitle() - .should('have.text', 'Data Pipelines'); + page.getMainTitle().should("have.text", "Data Pipelines"); }); }); diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/app/getting-started/getting-started.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/app/getting-started/getting-started.spec.js index 6a3d354a5f..9b40e1e712 100644 --- a/projects/frontend/data-pipelines/gui/e2e/integration/app/getting-started/getting-started.spec.js +++ b/projects/frontend/data-pipelines/gui/e2e/integration/app/getting-started/getting-started.spec.js @@ -4,29 +4,32 @@ */ /// -import { DataPipelinesBasePO } from '../../../support/application/data-pipelines-base.po'; -import { GettingStartedPage } from '../../../support/pages/app/getting-started/getting-started.po'; -import { DataJobsHealthPanelComponentPO } from '../../../support/pages/app/getting-started/data-jobs-health-panel-component.po'; -import { DataJobManageDetailsPage } from '../../../support/pages/app/lib/manage/data-job-details.po'; -import { DataJobManageExecutionsPage } from '../../../support/pages/app/lib/manage/data-job-executions.po'; -import { applyGlobalEnvSettings } from '../../../support/helpers/commands.helpers'; - -describe('Getting Started Page', { tags: ['@dataPipelines'] }, () => { +import { DataPipelinesBasePO } from "../../../support/application/data-pipelines-base.po"; +import { GettingStartedPage } from "../../../support/pages/app/getting-started/getting-started.po"; +import { DataJobsHealthPanelComponentPO } from "../../../support/pages/app/getting-started/data-jobs-health-panel-component.po"; +import { DataJobManageDetailsPage } from "../../../support/pages/app/lib/manage/data-job-details.po"; +import { DataJobManageExecutionsPage } from "../../../support/pages/app/lib/manage/data-job-executions.po"; +import { applyGlobalEnvSettings } from "../../../support/helpers/commands.helpers"; + +describe("Getting Started Page", { tags: ["@dataPipelines"] }, () => { let testJob; before(() => { return DataPipelinesBasePO.recordHarIfSupported() - .then(() => cy.clearLocalStorageSnapshot('getting-started')) - .then(() => DataPipelinesBasePO.login()) - .then(() => cy.saveLocalStorage('getting-started')) - .then(() => cy.prepareLongLivedFailingTestJob()) - .then(() => cy.createExecutionsLongLivedFailingTestJob()) - .then(() => cy.fixture('e2e-cy-dp-failing.job.json')) - .then((failingTestJob) => { - testJob = applyGlobalEnvSettings(failingTestJob); - - return cy.wrap({ context: 'getting-started.spec::before()', action: 'continue' }); - }); + .then(() => cy.clearLocalStorageSnapshot("getting-started")) + .then(() => DataPipelinesBasePO.login()) + .then(() => cy.saveLocalStorage("getting-started")) + .then(() => cy.prepareLongLivedFailingTestJob()) + .then(() => cy.createExecutionsLongLivedFailingTestJob()) + .then(() => cy.fixture("e2e-cy-dp-failing.job.json")) + .then((failingTestJob) => { + testJob = applyGlobalEnvSettings(failingTestJob); + + return cy.wrap({ + context: "getting-started.spec::before()", + action: "continue", + }); + }); }); after(() => { @@ -34,109 +37,97 @@ describe('Getting Started Page', { tags: ['@dataPipelines'] }, () => { }); beforeEach(() => { - cy.restoreLocalStorage('getting-started'); + cy.restoreLocalStorage("getting-started"); DataPipelinesBasePO.initBackendRequestInterceptor(); }); - it('Main Title Component have text: Get Started with Data Pipelines', () => { - GettingStartedPage - .navigateTo() + it("Main Title Component have text: Get Started with Data Pipelines", () => { + GettingStartedPage.navigateTo() .getMainTitle() - .should('have.text', 'Get Started with Data Pipelines'); + .should("have.text", "Get Started with Data Pipelines"); }); - describe('Data Jobs Health Overview Panel', () => { - it('Verify Widgets rendered correct data and failing jobs navigates correctly', () => { - GettingStartedPage - .navigateTo(); + describe("Data Jobs Health Overview Panel", () => { + it("Verify Widgets rendered correct data and failing jobs navigates correctly", () => { + GettingStartedPage.navigateTo(); - let dataJobsHealthPanel = DataJobsHealthPanelComponentPO - .getComponent(); - dataJobsHealthPanel - .waitForViewToRender(); - dataJobsHealthPanel - .getDataJobsHealthPanel() - .scrollIntoView(); + let dataJobsHealthPanel = + DataJobsHealthPanelComponentPO.getComponent(); + dataJobsHealthPanel.waitForViewToRender(); + dataJobsHealthPanel.getDataJobsHealthPanel().scrollIntoView(); dataJobsHealthPanel .getExecutionsSuccessPercentage() - .should('be.gte', 0) - .should('be.lte', 100); + .should("be.gte", 0) + .should("be.lte", 100); dataJobsHealthPanel .getNumberOfFailedExecutions() - .should('be.gte', 2); - dataJobsHealthPanel - .getExecutionsTotal() - .should('be.gte', 2); + .should("be.gte", 2); + dataJobsHealthPanel.getExecutionsTotal().should("be.gte", 2); dataJobsHealthPanel .getAllFailingJobs() - .should('have.length.gte', 1); + .should("have.length.gte", 1); dataJobsHealthPanel .getAllMostRecentFailingJobsExecutions() - .should('have.length.gte', 1); + .should("have.length.gte", 1); // navigate to failing job details - dataJobsHealthPanel - .navigateToFailingJobDetails(testJob.job_name); + dataJobsHealthPanel.navigateToFailingJobDetails(testJob.job_name); - const dataJobManageDetailsPage = DataJobManageDetailsPage - .getPage(); + const dataJobManageDetailsPage = DataJobManageDetailsPage.getPage(); dataJobManageDetailsPage .getMainTitle() - .should('contain.text', testJob.job_name); + .should("contain.text", testJob.job_name); dataJobManageDetailsPage .getDetailsTab() - .should('be.visible') - .should('have.class', 'active'); + .should("be.visible") + .should("have.class", "active"); dataJobManageDetailsPage .getExecutionsTab() - .should('exist') - .should('not.have.class', 'active'); + .should("exist") + .should("not.have.class", "active"); dataJobManageDetailsPage .showMoreDescription() .getDescriptionFull() - .should('contain.text', testJob.description); + .should("contain.text", testJob.description); }); - it('Verify most recent failing executions Widget navigates correctly', () => { - GettingStartedPage - .navigateTo(); + it("Verify most recent failing executions Widget navigates correctly", () => { + GettingStartedPage.navigateTo(); - let dataJobsHealthPanel = DataJobsHealthPanelComponentPO - .getComponent(); - dataJobsHealthPanel - .waitForViewToRender(); - dataJobsHealthPanel - .getDataJobsHealthPanel() - .scrollIntoView(); + let dataJobsHealthPanel = + DataJobsHealthPanelComponentPO.getComponent(); + dataJobsHealthPanel.waitForViewToRender(); + dataJobsHealthPanel.getDataJobsHealthPanel().scrollIntoView(); dataJobsHealthPanel .getAllMostRecentFailingJobsExecutions() - .should('have.length.gte', 1); + .should("have.length.gte", 1); // navigate to most recent failing job executions - dataJobsHealthPanel - .navigateToMostRecentFailingJobExecutions(testJob.job_name); + dataJobsHealthPanel.navigateToMostRecentFailingJobExecutions( + testJob.job_name + ); - const dataJobManageExecutionsPage = DataJobManageExecutionsPage - .getPage(); + const dataJobManageExecutionsPage = + DataJobManageExecutionsPage.getPage(); dataJobManageExecutionsPage .getMainTitle() - .should('contain.text', testJob.job_name); + .should("contain.text", testJob.job_name); dataJobManageExecutionsPage .getDetailsTab() - .should('be.visible') - .should('not.have.class', 'active'); + .should("be.visible") + .should("not.have.class", "active"); dataJobManageExecutionsPage .getExecutionsTab() - .should('be.visible') - .should('have.class', 'active'); + .should("be.visible") + .should("have.class", "active"); dataJobManageExecutionsPage .getDataGridRows() - .should('have.length.gte', 1); + .should("have.length.gte", 1); }); }); }); diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/lib/explore/data-job-details.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/lib/explore/data-job-details.spec.js index e876c43134..d801af54e1 100644 --- a/projects/frontend/data-pipelines/gui/e2e/integration/lib/explore/data-job-details.spec.js +++ b/projects/frontend/data-pipelines/gui/e2e/integration/lib/explore/data-job-details.spec.js @@ -4,153 +4,180 @@ */ /// -import { DataJobsExplorePage } from '../../../support/pages/app/lib/explore/data-jobs.po'; -import { DataJobExploreDetailsPage } from '../../../support/pages/app/lib/explore/data-job-details.po'; -import { applyGlobalEnvSettings } from '../../../support/helpers/commands.helpers'; - -describe('Data Job Explore Details Page', { tags: ['@dataPipelines', '@exploreDataJobDetails'] }, () => { - let dataJobExploreDetailsPage; - let testJobs; - - before(() => { - return DataJobExploreDetailsPage.recordHarIfSupported() - .then(() => cy.clearLocalStorageSnapshot('data-job-explore-details')) - .then(() => DataJobExploreDetailsPage.login()) - .then(() => cy.saveLocalStorage('data-job-explore-details')) - .then(() => cy.cleanTestJobs()) - .then(() => cy.prepareBaseTestJobs()) - .then(() => cy.fixture('lib/explore/test-jobs.json')) - .then((loadedTestJobs) => { - testJobs = applyGlobalEnvSettings(loadedTestJobs); - - return cy.wrap({ context: 'explore::data-job-details.spec::before()', action: 'continue' }); - }); - }); - - after(() => { - cy.cleanTestJobs(); - - DataJobExploreDetailsPage.saveHarIfSupported(); - }); - - beforeEach(() => { - cy.restoreLocalStorage('data-job-explore-details'); - - DataJobExploreDetailsPage.initBackendRequestInterceptor(); - }); - - it('Data Job Explore Details Page - should load and show job details', () => { - cy.log('Fixture for name: ' + testJobs[0].job_name); - - const dataJobsExplorePage = DataJobsExplorePage.navigateTo(); - - dataJobsExplorePage - .openJobDetails(testJobs[0].team, testJobs[0].job_name); - - dataJobExploreDetailsPage = DataJobExploreDetailsPage - .getPage(); - - dataJobExploreDetailsPage - .getDetailsTab() - .should('be.visible'); - - dataJobExploreDetailsPage - .getMainTitle() - .should('be.visible') - .should('contains.text', testJobs[0].job_name); - - dataJobExploreDetailsPage - .getStatusField() - .should('be.visible') - .should('have.text', 'Not Deployed'); - - dataJobExploreDetailsPage - .getDescriptionField() - .should('be.visible') - .should('contain.text', testJobs[0].description); - - dataJobExploreDetailsPage - .getTeamField() - .should('be.visible') - .should('have.text', testJobs[0].team); - - dataJobExploreDetailsPage - .getScheduleField() - .should('be.visible') - .should('contains.text', 'At 12:00 AM, on day 01 of the month, and on Friday'); - - // DISABLED Because there is no Source at the moment. - // dataJobExploreDetailsPage - // .getSourceField() - // .should('be.visible') - // .should('contains.text', 'http://host/data-jobs/' + testJobs[0].job_name) - // .should("have.attr", "href", 'http://host/data-jobs/' + testJobs[0].job_name); - - dataJobExploreDetailsPage - .getOnDeployedField() - .should('be.visible') - .should('contains.text', testJobs[0].config.contacts.notified_on_job_deploy); - - dataJobExploreDetailsPage - .getOnPlatformErrorField() - .should('be.visible') - .should('contains.text', testJobs[0].config.contacts.notified_on_job_failure_platform_error); - - dataJobExploreDetailsPage - .getOnUserErrorField() - .should('be.visible') - .should('contains.text', testJobs[0].config.contacts.notified_on_job_failure_user_error); - - dataJobExploreDetailsPage - .getOnSuccessField() - .should('be.visible') - .should('contains.text', testJobs[0].config.contacts.notified_on_job_success); - }); - - it('Data Job Explore Details Page - should verify Details tab is visible and active', () => { - cy.log('Fixture for name: ' + testJobs[0].job_name); - - const dataJobsExplorePage = DataJobsExplorePage.navigateTo(); - - dataJobsExplorePage - .openJobDetails(testJobs[0].team, testJobs[0].job_name); - - const dataJobExploreDetailsPage = DataJobExploreDetailsPage - .getPage(); - - dataJobExploreDetailsPage - .getMainTitle() - .should('be.visible') - .should('contains.text', testJobs[0].job_name); - - dataJobExploreDetailsPage - .getDetailsTab() - .should('be.visible') - .should('have.class', 'active'); - }); - - it('Data Job Explore Details Page - should verify Action buttons are not displayed', () => { - cy.log('Fixture for name: ' + testJobs[0].job_name); - - const dataJobsExplorePage = DataJobsExplorePage.navigateTo(); - - dataJobsExplorePage - .openJobDetails(testJobs[0].team, testJobs[0].job_name); - - const dataJobExploreDetailsPage = DataJobExploreDetailsPage - .getPage(); - - dataJobExploreDetailsPage - .getMainTitle() - .should('be.visible') - .should('contains.text', testJobs[0].job_name); - - dataJobExploreDetailsPage - .getExecuteNowButton() - .should('not.exist'); - - dataJobExploreDetailsPage - .getActionDropdownBtn() - .should('not.exist'); - }); -}); +import { DataJobsExplorePage } from "../../../support/pages/app/lib/explore/data-jobs.po"; +import { DataJobExploreDetailsPage } from "../../../support/pages/app/lib/explore/data-job-details.po"; +import { applyGlobalEnvSettings } from "../../../support/helpers/commands.helpers"; + +describe( + "Data Job Explore Details Page", + { tags: ["@dataPipelines", "@exploreDataJobDetails"] }, + () => { + let dataJobExploreDetailsPage; + let testJobs; + + before(() => { + return DataJobExploreDetailsPage.recordHarIfSupported() + .then(() => + cy.clearLocalStorageSnapshot("data-job-explore-details") + ) + .then(() => DataJobExploreDetailsPage.login()) + .then(() => cy.saveLocalStorage("data-job-explore-details")) + .then(() => cy.cleanTestJobs()) + .then(() => cy.prepareBaseTestJobs()) + .then(() => cy.fixture("lib/explore/test-jobs.json")) + .then((loadedTestJobs) => { + testJobs = applyGlobalEnvSettings(loadedTestJobs); + + return cy.wrap({ + context: "explore::data-job-details.spec::before()", + action: "continue", + }); + }); + }); + + after(() => { + cy.cleanTestJobs(); + + DataJobExploreDetailsPage.saveHarIfSupported(); + }); + + beforeEach(() => { + cy.restoreLocalStorage("data-job-explore-details"); + + DataJobExploreDetailsPage.initBackendRequestInterceptor(); + }); + + it("Data Job Explore Details Page - should load and show job details", () => { + cy.log("Fixture for name: " + testJobs[0].job_name); + + const dataJobsExplorePage = DataJobsExplorePage.navigateTo(); + + dataJobsExplorePage.openJobDetails( + testJobs[0].team, + testJobs[0].job_name + ); + + dataJobExploreDetailsPage = DataJobExploreDetailsPage.getPage(); + + dataJobExploreDetailsPage.getDetailsTab().should("be.visible"); + + dataJobExploreDetailsPage + .getMainTitle() + .should("be.visible") + .should("contains.text", testJobs[0].job_name); + + dataJobExploreDetailsPage + .getStatusField() + .should("be.visible") + .should("have.text", "Not Deployed"); + + dataJobExploreDetailsPage + .getDescriptionField() + .should("be.visible") + .should("contain.text", testJobs[0].description); + + dataJobExploreDetailsPage + .getTeamField() + .should("be.visible") + .should("have.text", testJobs[0].team); + + dataJobExploreDetailsPage + .getScheduleField() + .should("be.visible") + .should( + "contains.text", + "At 12:00 AM, on day 01 of the month, and on Friday" + ); + + // DISABLED Because there is no Source at the moment. + // dataJobExploreDetailsPage + // .getSourceField() + // .should('be.visible') + // .should('contains.text', 'http://host/data-jobs/' + testJobs[0].job_name) + // .should("have.attr", "href", 'http://host/data-jobs/' + testJobs[0].job_name); + + dataJobExploreDetailsPage + .getOnDeployedField() + .should("be.visible") + .should( + "contains.text", + testJobs[0].config.contacts.notified_on_job_deploy + ); + + dataJobExploreDetailsPage + .getOnPlatformErrorField() + .should("be.visible") + .should( + "contains.text", + testJobs[0].config.contacts + .notified_on_job_failure_platform_error + ); + + dataJobExploreDetailsPage + .getOnUserErrorField() + .should("be.visible") + .should( + "contains.text", + testJobs[0].config.contacts + .notified_on_job_failure_user_error + ); + + dataJobExploreDetailsPage + .getOnSuccessField() + .should("be.visible") + .should( + "contains.text", + testJobs[0].config.contacts.notified_on_job_success + ); + }); + + it("Data Job Explore Details Page - should verify Details tab is visible and active", () => { + cy.log("Fixture for name: " + testJobs[0].job_name); + + const dataJobsExplorePage = DataJobsExplorePage.navigateTo(); + + dataJobsExplorePage.openJobDetails( + testJobs[0].team, + testJobs[0].job_name + ); + + const dataJobExploreDetailsPage = + DataJobExploreDetailsPage.getPage(); + + dataJobExploreDetailsPage + .getMainTitle() + .should("be.visible") + .should("contains.text", testJobs[0].job_name); + + dataJobExploreDetailsPage + .getDetailsTab() + .should("be.visible") + .should("have.class", "active"); + }); + + it("Data Job Explore Details Page - should verify Action buttons are not displayed", () => { + cy.log("Fixture for name: " + testJobs[0].job_name); + + const dataJobsExplorePage = DataJobsExplorePage.navigateTo(); + + dataJobsExplorePage.openJobDetails( + testJobs[0].team, + testJobs[0].job_name + ); + + const dataJobExploreDetailsPage = + DataJobExploreDetailsPage.getPage(); + + dataJobExploreDetailsPage + .getMainTitle() + .should("be.visible") + .should("contains.text", testJobs[0].job_name); + + dataJobExploreDetailsPage.getExecuteNowButton().should("not.exist"); + + dataJobExploreDetailsPage + .getActionDropdownBtn() + .should("not.exist"); + }); + } +); diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/lib/explore/data-job-executions.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/lib/explore/data-job-executions.spec.js index b346dfb456..1d5077d5b5 100644 --- a/projects/frontend/data-pipelines/gui/e2e/integration/lib/explore/data-job-executions.spec.js +++ b/projects/frontend/data-pipelines/gui/e2e/integration/lib/explore/data-job-executions.spec.js @@ -5,80 +5,90 @@ /// -import { DataJobsExplorePage } from '../../../support/pages/app/lib/explore/data-jobs.po'; -import { DataJobBasePO } from '../../../support/application/data-job-base.po'; -import { applyGlobalEnvSettings } from '../../../support/helpers/commands.helpers'; - -describe('Data Job Explore Executions Page', { tags: ['@dataPipelines', '@exploreDataJobExecutions'] }, () => { - let testJobs; - - before(() => { - return DataJobBasePO.recordHarIfSupported() - .then(() => cy.clearLocalStorageSnapshot('data-job-explore-executions')) - .then(() => DataJobBasePO.login()) - .then(() => cy.saveLocalStorage('data-job-explore-executions')) - .then(() => cy.cleanTestJobs()) - .then(() => cy.prepareBaseTestJobs()) - .then(() => cy.fixture('lib/explore/test-jobs.json')) - .then((loadedTestJobs) => { - testJobs = applyGlobalEnvSettings(loadedTestJobs); - - return cy.wrap({ context: 'explore::data-job-executions.spec::before()', action: 'continue' }); - }); - }); - - after(() => { - cy.cleanTestJobs(); - - DataJobBasePO.saveHarIfSupported(); - }); - - beforeEach(() => { - cy.restoreLocalStorage('data-job-explore-executions'); - - DataJobBasePO.initBackendRequestInterceptor(); - }); - - it(`Data Job Explore Executions Page - should open Details and verify Executions tab is not displayed`, () => { - cy.log('Fixture for name: ' + testJobs[0].job_name); - - const dataJobsExplorePage = DataJobsExplorePage.navigateTo(); - - dataJobsExplorePage - .openJobDetails(testJobs[0].team, testJobs[0].job_name); - - const dataJobBasePage = DataJobBasePO - .getPage(); - - dataJobBasePage - .getMainTitle() - .should('be.visible') - .should('contains.text', testJobs[0].job_name); - - dataJobBasePage - .getDetailsTab() - .should('have.class', 'active'); - - dataJobBasePage - .getExecutionsTab() - .should('not.exist'); - }); - - it('Data Job Explore Executions Page - should verify on URL navigate to Executions will redirect to Details', () => { - const dataJobBasePage = DataJobBasePO - .navigateToUrl(`/explore/data-jobs/${ testJobs[0].team }/${ testJobs[0].job_name }/executions`); - - dataJobBasePage - .getMainTitle() - .should('be.visible') - .should('contains.text', testJobs[0].job_name); - - dataJobBasePage - .getCurrentUrl() - .should('match', new RegExp(`\\/explore\\/data-jobs\\/${testJobs[0].team}\\/${testJobs[0].job_name}\\/details$`)); - - dataJobBasePage - .getDetailsTab() - .should('have.class', 'active'); - }); -}); +import { DataJobsExplorePage } from "../../../support/pages/app/lib/explore/data-jobs.po"; +import { DataJobBasePO } from "../../../support/application/data-job-base.po"; +import { applyGlobalEnvSettings } from "../../../support/helpers/commands.helpers"; + +describe( + "Data Job Explore Executions Page", + { tags: ["@dataPipelines", "@exploreDataJobExecutions"] }, + () => { + let testJobs; + + before(() => { + return DataJobBasePO.recordHarIfSupported() + .then(() => + cy.clearLocalStorageSnapshot("data-job-explore-executions") + ) + .then(() => DataJobBasePO.login()) + .then(() => cy.saveLocalStorage("data-job-explore-executions")) + .then(() => cy.cleanTestJobs()) + .then(() => cy.prepareBaseTestJobs()) + .then(() => cy.fixture("lib/explore/test-jobs.json")) + .then((loadedTestJobs) => { + testJobs = applyGlobalEnvSettings(loadedTestJobs); + + return cy.wrap({ + context: "explore::data-job-executions.spec::before()", + action: "continue", + }); + }); + }); + + after(() => { + cy.cleanTestJobs(); + + DataJobBasePO.saveHarIfSupported(); + }); + + beforeEach(() => { + cy.restoreLocalStorage("data-job-explore-executions"); + + DataJobBasePO.initBackendRequestInterceptor(); + }); + + it(`Data Job Explore Executions Page - should open Details and verify Executions tab is not displayed`, () => { + cy.log("Fixture for name: " + testJobs[0].job_name); + + const dataJobsExplorePage = DataJobsExplorePage.navigateTo(); + + dataJobsExplorePage.openJobDetails( + testJobs[0].team, + testJobs[0].job_name + ); + + const dataJobBasePage = DataJobBasePO.getPage(); + + dataJobBasePage + .getMainTitle() + .should("be.visible") + .should("contains.text", testJobs[0].job_name); + + dataJobBasePage.getDetailsTab().should("have.class", "active"); + + dataJobBasePage.getExecutionsTab().should("not.exist"); + }); + + it("Data Job Explore Executions Page - should verify on URL navigate to Executions will redirect to Details", () => { + const dataJobBasePage = DataJobBasePO.navigateToUrl( + `/explore/data-jobs/${testJobs[0].team}/${testJobs[0].job_name}/executions` + ); + + dataJobBasePage + .getMainTitle() + .should("be.visible") + .should("contains.text", testJobs[0].job_name); + + dataJobBasePage + .getCurrentUrl() + .should( + "match", + new RegExp( + `\\/explore\\/data-jobs\\/${testJobs[0].team}\\/${testJobs[0].job_name}\\/details$` + ) + ); + + dataJobBasePage.getDetailsTab().should("have.class", "active"); + }); + } +); diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/lib/explore/data-jobs.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/lib/explore/data-jobs.spec.js index 9877cef132..715cfe826b 100644 --- a/projects/frontend/data-pipelines/gui/e2e/integration/lib/explore/data-jobs.spec.js +++ b/projects/frontend/data-pipelines/gui/e2e/integration/lib/explore/data-jobs.spec.js @@ -4,303 +4,323 @@ */ /// -import { DataJobsExplorePage } from '../../../support/pages/app/lib/explore/data-jobs.po'; -import { DataJobExploreDetailsPage } from '../../../support/pages/app/lib/explore/data-job-details.po'; -import { applyGlobalEnvSettings } from '../../../support/helpers/commands.helpers'; +import { DataJobsExplorePage } from "../../../support/pages/app/lib/explore/data-jobs.po"; +import { DataJobExploreDetailsPage } from "../../../support/pages/app/lib/explore/data-job-details.po"; +import { applyGlobalEnvSettings } from "../../../support/helpers/commands.helpers"; + +describe( + "Data Jobs Explore Page", + { tags: ["@dataPipelines", "@exploreDataJobs"] }, + () => { + let dataJobsExplorePage; + let testJobs; + + before(() => { + return DataJobsExplorePage.recordHarIfSupported() + .then(() => cy.clearLocalStorageSnapshot("data-jobs-explore")) + .then(() => DataJobsExplorePage.login()) + .then(() => cy.saveLocalStorage("data-jobs-explore")) + .then(() => cy.cleanTestJobs()) + .then(() => cy.prepareBaseTestJobs()) + .then(() => cy.fixture("lib/explore/test-jobs.json")) + .then((loadedTestJobs) => { + testJobs = applyGlobalEnvSettings(loadedTestJobs); + + return cy.wrap({ + context: "explore::data-jobs.spec::before()", + action: "continue", + }); + }); + }); -describe('Data Jobs Explore Page', { tags: ['@dataPipelines', '@exploreDataJobs'] }, () => { - let dataJobsExplorePage; - let testJobs; + after(() => { + cy.cleanTestJobs(); - before(() => { - return DataJobsExplorePage.recordHarIfSupported() - .then(() => cy.clearLocalStorageSnapshot('data-jobs-explore')) - .then(() => DataJobsExplorePage.login()) - .then(() => cy.saveLocalStorage('data-jobs-explore')) - .then(() => cy.cleanTestJobs()) - .then(() => cy.prepareBaseTestJobs()) - .then(() => cy.fixture('lib/explore/test-jobs.json')) - .then((loadedTestJobs) => { - testJobs = applyGlobalEnvSettings(loadedTestJobs); + DataJobsExplorePage.saveHarIfSupported(); + }); - return cy.wrap({ context: 'explore::data-jobs.spec::before()', action: 'continue' }); - }); - }); + beforeEach(() => { + cy.restoreLocalStorage("data-jobs-explore"); - after(() => { - cy.cleanTestJobs(); + DataJobsExplorePage.initBackendRequestInterceptor(); + }); - DataJobsExplorePage.saveHarIfSupported(); - }); + it("Main Title Component have text: Explore Data Jobs", () => { + dataJobsExplorePage = DataJobsExplorePage.navigateTo(); - beforeEach(() => { - cy.restoreLocalStorage('data-jobs-explore'); + dataJobsExplorePage + .getMainTitle() + .should("be.visible") + .should("have.text", "Explore Data Jobs"); + }); - DataJobsExplorePage.initBackendRequestInterceptor(); - }); + it("Data Jobs Explore Page - loaded and shows data jobs", () => { + dataJobsExplorePage = DataJobsExplorePage.navigateTo(); - it('Main Title Component have text: Explore Data Jobs', () => { - dataJobsExplorePage = DataJobsExplorePage.navigateTo(); + dataJobsExplorePage.getDataGrid().should("be.visible"); + + testJobs.forEach((testJob) => { + cy.log("Fixture for name: " + testJob.job_name); + + dataJobsExplorePage + .getDataGridCell(testJob.job_name) + .scrollIntoView() + .should("be.visible"); + + dataJobsExplorePage + .getDataGridCell(testJob.team) + .should("be.visible"); + }); + }); - dataJobsExplorePage - .getMainTitle() - .should('be.visible') - .should('have.text', 'Explore Data Jobs'); - }); + it("Data Jobs Explore Page - filters data jobs", () => { + cy.log("Fixture for name: " + testJobs[0].job_name); - it('Data Jobs Explore Page - loaded and shows data jobs', () => { - dataJobsExplorePage = DataJobsExplorePage.navigateTo(); + dataJobsExplorePage = DataJobsExplorePage.navigateTo(); - dataJobsExplorePage - .getDataGrid() - .should('be.visible'); + dataJobsExplorePage.filterByJobName(testJobs[0].job_name); - testJobs.forEach((testJob) => { - cy.log('Fixture for name: ' + testJob.job_name); + dataJobsExplorePage + .getDataGridCell(testJobs[0].job_name) + .should("be.visible"); dataJobsExplorePage - .getDataGridCell(testJob.job_name) - .scrollIntoView() - .should('be.visible'); + .getDataGridCell(testJobs[1].job_name) + .should("not.exist"); + }); + + it("Data Jobs Explore Page - refreshes data jobs", () => { + dataJobsExplorePage = DataJobsExplorePage.navigateTo(); + + cy.fixture("lib/explore/additional-test-job.json").then( + (additionalTestJob) => { + const normalizedTestJob = + applyGlobalEnvSettings(additionalTestJob); + + cy.log("Fixture for name: " + normalizedTestJob.job_name); + + dataJobsExplorePage + .getDataGridCell(testJobs[0].job_name) + .should("have.text", testJobs[0].job_name); + + dataJobsExplorePage + .getDataGridCell(normalizedTestJob.job_name) + .should("not.exist"); + + cy.prepareAdditionalTestJobs(); + + dataJobsExplorePage.refreshDataGrid(); + + dataJobsExplorePage.filterByJobName( + normalizedTestJob.job_name + ); + + dataJobsExplorePage + .getDataGridCell(normalizedTestJob.job_name) + .should("have.text", normalizedTestJob.job_name); + } + ); + }); + + it("Data Jobs Explore Page - searches data jobs", () => { + cy.log("Fixture for name: " + testJobs[0].job_name); + + dataJobsExplorePage = DataJobsExplorePage.navigateTo(); + + dataJobsExplorePage + .getDataGridCell(testJobs[1].job_name) + .should("be.visible"); + + dataJobsExplorePage.searchByJobName(testJobs[0].job_name); + + dataJobsExplorePage + .getDataGridCell(testJobs[0].job_name) + .should("be.visible"); + + dataJobsExplorePage + .getDataGridCell(testJobs[1].job_name) + .should("not.exist"); + }); + + it("Data Jobs Explore Page - searches data jobs, search parameter goes into URL", () => { + cy.log("Fixture for name: " + testJobs[0].job_name); + + dataJobsExplorePage = DataJobsExplorePage.navigateTo(); + // verify 2 test rows visible dataJobsExplorePage - .getDataGridCell(testJob.team) - .should('be.visible'); - }) - }); + .getDataGridCell(testJobs[0].job_name) + .should("be.visible"); + dataJobsExplorePage + .getDataGridCell(testJobs[1].job_name) + .should("be.visible"); - it('Data Jobs Explore Page - filters data jobs', () => { - cy.log('Fixture for name: ' + testJobs[0].job_name); + // do search + dataJobsExplorePage.searchByJobName(testJobs[0].job_name); - dataJobsExplorePage = DataJobsExplorePage.navigateTo(); + // verify 1 test row visible + dataJobsExplorePage + .getDataGridCell(testJobs[0].job_name) + .should("be.visible"); + dataJobsExplorePage + .getDataGridCell(testJobs[1].job_name) + .should("not.exist"); - dataJobsExplorePage - .filterByJobName(testJobs[0].job_name); + // verify url contains search value + dataJobsExplorePage + .getCurrentUrl() + .should( + "match", + new RegExp( + `\\/explore\\/data-jobs\\?search=${testJobs[0].job_name}$` + ) + ); + + // clear search with clear() method + dataJobsExplorePage.clearSearchField(); + + // verify 2 test rows visible + dataJobsExplorePage + .getDataGridCell(testJobs[0].job_name) + .should("be.visible"); + dataJobsExplorePage + .getDataGridCell(testJobs[1].job_name) + .should("be.visible"); - dataJobsExplorePage - .getDataGridCell(testJobs[0].job_name) - .should('be.visible'); + // verify url does not contain search value + dataJobsExplorePage + .getCurrentUrl() + .should("match", new RegExp(`\\/explore\\/data-jobs$`)); + }); - dataJobsExplorePage - .getDataGridCell(testJobs[1].job_name) - .should('not.exist'); - }); + it("Data Jobs Explore Page - searches data jobs, perform search when URL contains search parameter", () => { + cy.log("Fixture for name: " + testJobs[1].job_name); - it('Data Jobs Explore Page - refreshes data jobs', () => { - dataJobsExplorePage = DataJobsExplorePage.navigateTo(); + // navigate with search value in URL + dataJobsExplorePage = DataJobsExplorePage.navigateToUrl( + `/explore/data-jobs?search=${testJobs[1].job_name}` + ); - cy.fixture('lib/explore/additional-test-job.json').then((additionalTestJob) => { - const normalizedTestJob = applyGlobalEnvSettings(additionalTestJob); + // verify url contains search value + dataJobsExplorePage + .getCurrentUrl() + .should( + "match", + new RegExp( + `\\/explore\\/data-jobs\\?search=${testJobs[1].job_name}$` + ) + ); + + // verify 1 test row visible + dataJobsExplorePage + .getDataGridCell(testJobs[0].job_name) + .should("not.exist"); + dataJobsExplorePage + .getDataGridCell(testJobs[1].job_name) + .should("be.visible"); - cy.log('Fixture for name: ' + normalizedTestJob.job_name); + // clear search with button + dataJobsExplorePage.clearSearchFieldWithButton(); + // verify 2 test rows visible dataJobsExplorePage .getDataGridCell(testJobs[0].job_name) - .should('have.text', testJobs[0].job_name); + .should("be.visible"); + dataJobsExplorePage + .getDataGridCell(testJobs[1].job_name) + .should("be.visible"); + // verify url does not contain search value dataJobsExplorePage - .getDataGridCell(normalizedTestJob.job_name) - .should('not.exist'); + .getCurrentUrl() + .should("match", new RegExp(`\\/explore\\/data-jobs$`)); + }); + + it("Data Jobs Explore Page - show/hide column when toggling from menu", () => { + dataJobsExplorePage = DataJobsExplorePage.navigateTo(); - cy.prepareAdditionalTestJobs(); + // show panel for show/hide columns + dataJobsExplorePage.toggleColumnShowHidePanel(); + // verify correct options are rendered dataJobsExplorePage - .refreshDataGrid(); + .getDataGridColumnShowHideOptionsValues() + .should("have.length", 9) + .invoke("join", ",") + .should( + "eq", + "Description,Deployment Status,Last Execution Duration,Success rate,Next run (UTC),Last Deployed (UTC),Last Deployed By,Source,Logs" + ); + + // verify column is not checked in toggling menu + dataJobsExplorePage + .getDataGridColumnShowHideOption("Last Execution Duration") + .should("exist") + .should("not.be.checked"); + + // verify header cell for column is not rendered + dataJobsExplorePage + .getDataGridHeaderCell("Last Execution Duration") + .should("have.length", 0); + + // toggle column to render + dataJobsExplorePage.checkColumnShowHideOption( + "Last Execution Duration" + ); + + // verify column is checked in toggling menu + dataJobsExplorePage + .getDataGridColumnShowHideOption("Last Execution Duration") + .should("exist") + .should("be.checked"); + + // verify header cell for column is rendered + dataJobsExplorePage + .getDataGridHeaderCell("Last Execution Duration") + .should("have.length", 1); + + // toggle column to hide + dataJobsExplorePage.uncheckColumnShowHideOption( + "Last Execution Duration" + ); + // verify column is not checked in toggling menu dataJobsExplorePage - .filterByJobName(normalizedTestJob.job_name); + .getDataGridColumnShowHideOption("Last Execution Duration") + .should("exist") + .should("not.be.checked"); + // verify header cell for column is not rendered dataJobsExplorePage - .getDataGridCell(normalizedTestJob.job_name) - .should('have.text', normalizedTestJob.job_name); + .getDataGridHeaderCell("Last Execution Duration") + .should("have.length", 0); + + // hide panel for show/hide columns + dataJobsExplorePage.toggleColumnShowHidePanel(); + }); + + it("Data Jobs Explore Page - navigates to data job", () => { + cy.log("Fixture for name: " + testJobs[0].job_name); + + dataJobsExplorePage = DataJobsExplorePage.navigateTo(); + + dataJobsExplorePage.openJobDetails( + testJobs[0].team, + testJobs[0].job_name + ); + + const dataJobExploreDetailsPage = + DataJobExploreDetailsPage.getPage(); + + dataJobExploreDetailsPage + .getMainTitle() + .should("be.visible") + .should("contains.text", testJobs[0].job_name); + + dataJobExploreDetailsPage + .getDescriptionField() + .should("be.visible") + .should("contain.text", testJobs[0].description); }); - }); - - it('Data Jobs Explore Page - searches data jobs', () => { - cy.log('Fixture for name: ' + testJobs[0].job_name); - - dataJobsExplorePage = DataJobsExplorePage.navigateTo(); - - dataJobsExplorePage - .getDataGridCell(testJobs[1].job_name) - .should('be.visible'); - - dataJobsExplorePage - .searchByJobName(testJobs[0].job_name); - - dataJobsExplorePage - .getDataGridCell(testJobs[0].job_name) - .should('be.visible'); - - dataJobsExplorePage - .getDataGridCell(testJobs[1].job_name) - .should('not.exist'); - }); - - it('Data Jobs Explore Page - searches data jobs, search parameter goes into URL', () => { - cy.log('Fixture for name: ' + testJobs[0].job_name); - - dataJobsExplorePage = DataJobsExplorePage.navigateTo(); - - // verify 2 test rows visible - dataJobsExplorePage - .getDataGridCell(testJobs[0].job_name) - .should('be.visible'); - dataJobsExplorePage - .getDataGridCell(testJobs[1].job_name) - .should('be.visible'); - - // do search - dataJobsExplorePage - .searchByJobName(testJobs[0].job_name); - - // verify 1 test row visible - dataJobsExplorePage - .getDataGridCell(testJobs[0].job_name) - .should('be.visible'); - dataJobsExplorePage - .getDataGridCell(testJobs[1].job_name) - .should('not.exist'); - - // verify url contains search value - dataJobsExplorePage - .getCurrentUrl() - .should('match', new RegExp(`\\/explore\\/data-jobs\\?search=${ testJobs[0].job_name }$`)); - - // clear search with clear() method - dataJobsExplorePage - .clearSearchField(); - - // verify 2 test rows visible - dataJobsExplorePage - .getDataGridCell(testJobs[0].job_name) - .should('be.visible'); - dataJobsExplorePage - .getDataGridCell(testJobs[1].job_name) - .should('be.visible'); - - // verify url does not contain search value - dataJobsExplorePage - .getCurrentUrl() - .should('match', new RegExp(`\\/explore\\/data-jobs$`)); - }); - - it('Data Jobs Explore Page - searches data jobs, perform search when URL contains search parameter', () => { - cy.log('Fixture for name: ' + testJobs[1].job_name); - - // navigate with search value in URL - dataJobsExplorePage = DataJobsExplorePage.navigateToUrl(`/explore/data-jobs?search=${ testJobs[1].job_name }`); - - // verify url contains search value - dataJobsExplorePage - .getCurrentUrl() - .should('match', new RegExp(`\\/explore\\/data-jobs\\?search=${ testJobs[1].job_name }$`)); - - // verify 1 test row visible - dataJobsExplorePage - .getDataGridCell(testJobs[0].job_name) - .should('not.exist'); - dataJobsExplorePage - .getDataGridCell(testJobs[1].job_name) - .should('be.visible'); - - // clear search with button - dataJobsExplorePage - .clearSearchFieldWithButton(); - - // verify 2 test rows visible - dataJobsExplorePage - .getDataGridCell(testJobs[0].job_name) - .should('be.visible'); - dataJobsExplorePage - .getDataGridCell(testJobs[1].job_name) - .should('be.visible'); - - // verify url does not contain search value - dataJobsExplorePage - .getCurrentUrl() - .should('match', new RegExp(`\\/explore\\/data-jobs$`)); - }); - - it('Data Jobs Explore Page - show/hide column when toggling from menu', () => { - dataJobsExplorePage = DataJobsExplorePage.navigateTo(); - - // show panel for show/hide columns - dataJobsExplorePage - .toggleColumnShowHidePanel(); - - // verify correct options are rendered - dataJobsExplorePage - .getDataGridColumnShowHideOptionsValues() - .should('have.length', 9) - .invoke('join', ',') - .should('eq', 'Description,Deployment Status,Last Execution Duration,Success rate,Next run (UTC),Last Deployed (UTC),Last Deployed By,Source,Logs'); - - // verify column is not checked in toggling menu - dataJobsExplorePage - .getDataGridColumnShowHideOption('Last Execution Duration') - .should('exist') - .should('not.be.checked'); - - // verify header cell for column is not rendered - dataJobsExplorePage - .getDataGridHeaderCell('Last Execution Duration') - .should('have.length', 0); - - // toggle column to render - dataJobsExplorePage - .checkColumnShowHideOption('Last Execution Duration'); - - // verify column is checked in toggling menu - dataJobsExplorePage - .getDataGridColumnShowHideOption('Last Execution Duration') - .should('exist') - .should('be.checked'); - - // verify header cell for column is rendered - dataJobsExplorePage - .getDataGridHeaderCell('Last Execution Duration') - .should('have.length', 1); - - // toggle column to hide - dataJobsExplorePage - .uncheckColumnShowHideOption('Last Execution Duration'); - - // verify column is not checked in toggling menu - dataJobsExplorePage - .getDataGridColumnShowHideOption('Last Execution Duration') - .should('exist') - .should('not.be.checked'); - - // verify header cell for column is not rendered - dataJobsExplorePage - .getDataGridHeaderCell('Last Execution Duration') - .should('have.length', 0); - - // hide panel for show/hide columns - dataJobsExplorePage - .toggleColumnShowHidePanel(); - }); - - it('Data Jobs Explore Page - navigates to data job', () => { - cy.log('Fixture for name: ' + testJobs[0].job_name); - - dataJobsExplorePage = DataJobsExplorePage.navigateTo(); - - dataJobsExplorePage - .openJobDetails(testJobs[0].team, testJobs[0].job_name); - - const dataJobExploreDetailsPage = DataJobExploreDetailsPage - .getPage(); - - dataJobExploreDetailsPage - .getMainTitle() - .should('be.visible') - .should('contains.text', testJobs[0].job_name); - - dataJobExploreDetailsPage - .getDescriptionField() - .should('be.visible') - .should('contain.text', testJobs[0].description); - }); -}); + } +); diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/lib/manage/data-job-details.int.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/lib/manage/data-job-details.int.spec.js index 8af498d8b1..f25c81ac09 100644 --- a/projects/frontend/data-pipelines/gui/e2e/integration/lib/manage/data-job-details.int.spec.js +++ b/projects/frontend/data-pipelines/gui/e2e/integration/lib/manage/data-job-details.int.spec.js @@ -5,216 +5,265 @@ /// -import { DataJobManageDetailsPage } from '../../../support/pages/app/lib/manage/data-job-details.po'; -import { DataJobsManagePage } from '../../../support/pages/app/lib/manage/data-jobs.po'; -import { applyGlobalEnvSettings } from '../../../support/helpers/commands.helpers'; - -describe('Data Job Manage Details Page', { tags: ['@dataPipelines', '@manageDataJobDetails'] }, () => { - const descriptionWordsBeforeTruncate = 12; - - let dataJobManageDetailsPage; - let testJobs; - let longLivedTestJob; - - before(() => { - return DataJobManageDetailsPage.recordHarIfSupported() - .then(() => cy.clearLocalStorageSnapshot('data-job-manage-details')) - .then(() => DataJobManageDetailsPage.login()) - .then(() => cy.saveLocalStorage('data-job-manage-details')) - .then(() => cy.cleanTestJobs()) - .then(() => cy.prepareLongLivedTestJob()) - .then(() => cy.createTwoExecutionsLongLivedTestJob()) - .then(() => cy.prepareBaseTestJobs()) - .then(() => cy.fixture('lib/explore/test-jobs.json')) - .then((loadedTestJobs) => { - testJobs = applyGlobalEnvSettings(loadedTestJobs); - - return cy.wrap({ context: 'manage::data-job-details.spec::1::before()', action: 'continue' }); - }) - .then(() => cy.fixture('lib/manage/e2e-cypress-dp-test.json')) - .then((loadedTestJob) => { - longLivedTestJob = applyGlobalEnvSettings(loadedTestJob); - - return cy.wrap({ context: 'manage::data-job-details.spec::2::before()', action: 'continue' }); - }); - }); - - after(() => { - cy.cleanTestJobs(); - - DataJobManageDetailsPage.saveHarIfSupported(); - }); - - beforeEach(() => { - cy.restoreLocalStorage('data-job-manage-details'); - - DataJobManageDetailsPage.initBackendRequestInterceptor(); - }); - - it('Data Job Manage Details Page - disable/enable job', { tags: '@integration' }, () => { - dataJobManageDetailsPage = DataJobManageDetailsPage - .navigateTo(longLivedTestJob.team, longLivedTestJob.job_name); - - dataJobManageDetailsPage.clickOnContentContainer(); - - //Toggle job status twice, enable to disable and vice versa. - dataJobManageDetailsPage.toggleJobStatus(longLivedTestJob.job_name); - dataJobManageDetailsPage.toggleJobStatus(longLivedTestJob.job_name); - }); - - it('Data Job Manage Details Page - edit job description', { tags: '@integration' }, () => { - let newDescription = 'Test if changing the description is working'; - - dataJobManageDetailsPage = DataJobManageDetailsPage - .navigateTo(testJobs[0].team, testJobs[0].job_name); - - dataJobManageDetailsPage.clickOnContentContainer(); - - dataJobManageDetailsPage - .openDescription(); +import { DataJobManageDetailsPage } from "../../../support/pages/app/lib/manage/data-job-details.po"; +import { DataJobsManagePage } from "../../../support/pages/app/lib/manage/data-jobs.po"; +import { applyGlobalEnvSettings } from "../../../support/helpers/commands.helpers"; + +describe( + "Data Job Manage Details Page", + { tags: ["@dataPipelines", "@manageDataJobDetails"] }, + () => { + const descriptionWordsBeforeTruncate = 12; + + let dataJobManageDetailsPage; + let testJobs; + let longLivedTestJob; + + before(() => { + return DataJobManageDetailsPage.recordHarIfSupported() + .then(() => + cy.clearLocalStorageSnapshot("data-job-manage-details") + ) + .then(() => DataJobManageDetailsPage.login()) + .then(() => cy.saveLocalStorage("data-job-manage-details")) + .then(() => cy.cleanTestJobs()) + .then(() => cy.prepareLongLivedTestJob()) + .then(() => cy.createTwoExecutionsLongLivedTestJob()) + .then(() => cy.prepareBaseTestJobs()) + .then(() => cy.fixture("lib/explore/test-jobs.json")) + .then((loadedTestJobs) => { + testJobs = applyGlobalEnvSettings(loadedTestJobs); + + return cy.wrap({ + context: "manage::data-job-details.spec::1::before()", + action: "continue", + }); + }) + .then(() => cy.fixture("lib/manage/e2e-cypress-dp-test.json")) + .then((loadedTestJob) => { + longLivedTestJob = applyGlobalEnvSettings(loadedTestJob); + + return cy.wrap({ + context: "manage::data-job-details.spec::2::before()", + action: "continue", + }); + }); + }); - dataJobManageDetailsPage - .enterDescriptionDetails(newDescription); + after(() => { + cy.cleanTestJobs(); - dataJobManageDetailsPage - .saveDescription(); + DataJobManageDetailsPage.saveHarIfSupported(); + }); - dataJobManageDetailsPage - .getDescription() - .should('be.visible') - .should('contain.text', newDescription.split(' ').slice(0, descriptionWordsBeforeTruncate).join(' ')); - }); + beforeEach(() => { + cy.restoreLocalStorage("data-job-manage-details"); - it('Data Job Manage Details Page - execute now', () => { - dataJobManageDetailsPage = DataJobManageDetailsPage - .navigateTo(longLivedTestJob.team, longLivedTestJob.job_name); + DataJobManageDetailsPage.initBackendRequestInterceptor(); + }); - dataJobManageDetailsPage - .waitForTestJobExecutionCompletion(); + it( + "Data Job Manage Details Page - disable/enable job", + { tags: "@integration" }, + () => { + dataJobManageDetailsPage = DataJobManageDetailsPage.navigateTo( + longLivedTestJob.team, + longLivedTestJob.job_name + ); + + dataJobManageDetailsPage.clickOnContentContainer(); + + //Toggle job status twice, enable to disable and vice versa. + dataJobManageDetailsPage.toggleJobStatus( + longLivedTestJob.job_name + ); + dataJobManageDetailsPage.toggleJobStatus( + longLivedTestJob.job_name + ); + } + ); + + it( + "Data Job Manage Details Page - edit job description", + { tags: "@integration" }, + () => { + let newDescription = + "Test if changing the description is working"; + + dataJobManageDetailsPage = DataJobManageDetailsPage.navigateTo( + testJobs[0].team, + testJobs[0].job_name + ); + + dataJobManageDetailsPage.clickOnContentContainer(); + + dataJobManageDetailsPage.openDescription(); + + dataJobManageDetailsPage.enterDescriptionDetails( + newDescription + ); + + dataJobManageDetailsPage.saveDescription(); + + dataJobManageDetailsPage + .getDescription() + .should("be.visible") + .should( + "contain.text", + newDescription + .split(" ") + .slice(0, descriptionWordsBeforeTruncate) + .join(" ") + ); + } + ); - dataJobManageDetailsPage - .executeNow(); + it("Data Job Manage Details Page - execute now", () => { + dataJobManageDetailsPage = DataJobManageDetailsPage.navigateTo( + longLivedTestJob.team, + longLivedTestJob.job_name + ); - dataJobManageDetailsPage - .confirmInConfirmDialog(); + dataJobManageDetailsPage.waitForTestJobExecutionCompletion(); - dataJobManageDetailsPage - .getToastTitle(10000) - .should('exist') - .contains(/Data job Queued for execution|Failed, Data job is already executing/); - }); + dataJobManageDetailsPage.executeNow(); - it('Data Job Manage Details Page - download job key', () => { - dataJobManageDetailsPage = DataJobManageDetailsPage - .navigateTo(longLivedTestJob.team, longLivedTestJob.job_name); + dataJobManageDetailsPage.confirmInConfirmDialog(); - dataJobManageDetailsPage - .openActionDropdown(); + dataJobManageDetailsPage + .getToastTitle(10000) + .should("exist") + .contains( + /Data job Queued for execution|Failed, Data job is already executing/ + ); + }); - dataJobManageDetailsPage - .downloadJobKey(); + it("Data Job Manage Details Page - download job key", () => { + dataJobManageDetailsPage = DataJobManageDetailsPage.navigateTo( + longLivedTestJob.team, + longLivedTestJob.job_name + ); - dataJobManageDetailsPage - .readFile('downloadsFolder', `${ longLivedTestJob.job_name }.keytab`) - .should('exist'); - }); + dataJobManageDetailsPage.openActionDropdown(); - it('Data Job Manage Details Page - delete job', { tags: '@integration' }, () => { - cy.fixture('lib/explore/additional-test-job.json').then((additionalTestJob) => { - const normalizedTestJob = applyGlobalEnvSettings(additionalTestJob); + dataJobManageDetailsPage.downloadJobKey(); - cy.prepareAdditionalTestJobs(); + dataJobManageDetailsPage + .readFile( + "downloadsFolder", + `${longLivedTestJob.job_name}.keytab` + ) + .should("exist"); + }); - dataJobManageDetailsPage = DataJobManageDetailsPage - .navigateTo(normalizedTestJob.team, normalizedTestJob.job_name); + it( + "Data Job Manage Details Page - delete job", + { tags: "@integration" }, + () => { + cy.fixture("lib/explore/additional-test-job.json").then( + (additionalTestJob) => { + const normalizedTestJob = + applyGlobalEnvSettings(additionalTestJob); - dataJobManageDetailsPage.clickOnContentContainer(); + cy.prepareAdditionalTestJobs(); - dataJobManageDetailsPage - .openActionDropdown(); + dataJobManageDetailsPage = + DataJobManageDetailsPage.navigateTo( + normalizedTestJob.team, + normalizedTestJob.job_name + ); - dataJobManageDetailsPage - .deleteJob(); + dataJobManageDetailsPage.clickOnContentContainer(); - dataJobManageDetailsPage - .confirmDeleteJob(); + dataJobManageDetailsPage.openActionDropdown(); - dataJobManageDetailsPage - .getToastTitle(20000) // Wait up to 20 seconds for the job to be deleted. - .should('contain.text', 'Data job delete completed') + dataJobManageDetailsPage.deleteJob(); - dataJobManageDetailsPage - .waitForBackendRequestCompletion(); + dataJobManageDetailsPage.confirmDeleteJob(); - const dataJobsManagePage = DataJobsManagePage - .getPage(); + dataJobManageDetailsPage + .getToastTitle(20000) // Wait up to 20 seconds for the job to be deleted. + .should( + "contain.text", + "Data job delete completed" + ); - dataJobsManagePage - .getDataGridCell(normalizedTestJob.job_name, 10000) // Wait up to 10 seconds for the jobs list to show. - .should('not.exist'); - }); - }); - - //TODO: Double-check and enable this test - it.skip('Data Job Manage Details Page - executions timeline', () => { - const jobName = longLivedTestJob.job_name; - const team = longLivedTestJob.team; - - cy.intercept({ - method: 'GET', - url: `/data-jobs/for-team/${ team }/jobs/${ jobName }/executions` - }).as('executionApiCall') - - dataJobManageDetailsPage = DataJobManageDetailsPage - .navigateTo(team, jobName); - - cy.wait('@executionApiCall').then((interception) => { - const response = interception.response.body; - const lastExecutions = response - .sort((left, right) => compareDatesAsc(left, right)) - .slice(response.length > 5 ? response.length - 5 : 0); - - const lastExecutionsSize = lastExecutions.length; - const lastExecution = lastExecutions.at(-1); - - cy.get('.clr-timeline-step') - .should('have.length', lastExecutionsSize + 1) // +1 next execution - - cy.get(`[data-cy=${ lastExecution.id }]`) - .as('lastExecution') - - let statusIconMap = []; - statusIconMap['cancelled'] = 'times-circle'; - statusIconMap['skipped'] = 'circle-arrow'; - statusIconMap['submitted'] = 'circle'; - statusIconMap['finished'] = 'success-standard'; - statusIconMap['failed'] = 'error-standard'; - - if (lastExecution.type !== 'manual') { - cy.get('@lastExecution') - .find('.manual-execution-label') - .scrollIntoView() - .should('be.visible'); - } + dataJobManageDetailsPage.waitForBackendRequestCompletion(); - if (lastExecution.status !== 'running') { - cy.get('@lastExecution') - .find(`[shape=${ statusIconMap[lastExecution.status] }]`) - .should('exist') - } + const dataJobsManagePage = DataJobsManagePage.getPage(); - cy.get('@lastExecution') - .find('.clr-timeline-step-header') - .invoke('attr', 'title') - .should('contain', 'Started ') - - if (lastExecution.status !== 'running') { - cy.get('@lastExecution') - .find('u') - .last() - .invoke('attr', 'title') - .should('contain', 'Ended ') + dataJobsManagePage + .getDataGridCell(normalizedTestJob.job_name, 10000) // Wait up to 10 seconds for the jobs list to show. + .should("not.exist"); + } + ); } - }) - }) -}); + ); + + //TODO: Double-check and enable this test + it.skip("Data Job Manage Details Page - executions timeline", () => { + const jobName = longLivedTestJob.job_name; + const team = longLivedTestJob.team; + + cy.intercept({ + method: "GET", + url: `/data-jobs/for-team/${team}/jobs/${jobName}/executions`, + }).as("executionApiCall"); + + dataJobManageDetailsPage = DataJobManageDetailsPage.navigateTo( + team, + jobName + ); + + cy.wait("@executionApiCall").then((interception) => { + const response = interception.response.body; + const lastExecutions = response + .sort((left, right) => compareDatesAsc(left, right)) + .slice(response.length > 5 ? response.length - 5 : 0); + + const lastExecutionsSize = lastExecutions.length; + const lastExecution = lastExecutions.at(-1); + + cy.get(".clr-timeline-step").should( + "have.length", + lastExecutionsSize + 1 + ); // +1 next execution + + cy.get(`[data-cy=${lastExecution.id}]`).as("lastExecution"); + + let statusIconMap = []; + statusIconMap["cancelled"] = "times-circle"; + statusIconMap["skipped"] = "circle-arrow"; + statusIconMap["submitted"] = "circle"; + statusIconMap["finished"] = "success-standard"; + statusIconMap["failed"] = "error-standard"; + + if (lastExecution.type !== "manual") { + cy.get("@lastExecution") + .find(".manual-execution-label") + .scrollIntoView() + .should("be.visible"); + } + + if (lastExecution.status !== "running") { + cy.get("@lastExecution") + .find(`[shape=${statusIconMap[lastExecution.status]}]`) + .should("exist"); + } + + cy.get("@lastExecution") + .find(".clr-timeline-step-header") + .invoke("attr", "title") + .should("contain", "Started "); + + if (lastExecution.status !== "running") { + cy.get("@lastExecution") + .find("u") + .last() + .invoke("attr", "title") + .should("contain", "Ended "); + } + }); + }); + } +); diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/lib/manage/data-job-executions.int.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/lib/manage/data-job-executions.int.spec.js index 20563bbca5..d8a83d3317 100644 --- a/projects/frontend/data-pipelines/gui/e2e/integration/lib/manage/data-job-executions.int.spec.js +++ b/projects/frontend/data-pipelines/gui/e2e/integration/lib/manage/data-job-executions.int.spec.js @@ -5,640 +5,636 @@ /// -import { DataJobBasePO } from '../../../support/application/data-job-base.po'; -import { DataJobsManagePage } from '../../../support/pages/app/lib/manage/data-jobs.po'; -import { DataJobManageExecutionsPage } from '../../../support/pages/app/lib/manage/data-job-executions.po'; -import { applyGlobalEnvSettings } from '../../../support/helpers/commands.helpers'; - -describe('Data Job Manage Executions Page', { tags: ['@dataPipelines', '@manageDataJobExecutions'] }, () => { - let longLivedTestJob; - - before(() => { - return DataJobManageExecutionsPage.recordHarIfSupported() - .then(() => cy.clearLocalStorageSnapshot('data-job-manage-executions')) - .then(() => DataJobManageExecutionsPage.login()) - .then(() => cy.saveLocalStorage('data-job-manage-executions')) - .then(() => cy.prepareLongLivedTestJob()) - .then(() => cy.createTwoExecutionsLongLivedTestJob()) - .then(() => cy.fixture('lib/manage/e2e-cypress-dp-test.json')) - .then((loadedTestJob) => { - longLivedTestJob = applyGlobalEnvSettings(loadedTestJob); - - return cy.wrap({ context: 'manage::data-job-executions.spec::before()', action: 'continue' }); - }); - }); - - after(() => { - DataJobManageExecutionsPage.saveHarIfSupported(); - }); - - beforeEach(() => { - cy.restoreLocalStorage('data-job-manage-executions'); - - DataJobManageExecutionsPage.initBackendRequestInterceptor(); - }); - - describe('Sanity', { tags: '@integration' }, () => { - it(`Data Job Manage Executions Page - should open Details and verify Executions tab is displayed and navigates`, () => { - cy.log('Fixture for name: ' + longLivedTestJob.job_name); - - const dataJobsManagePage = DataJobsManagePage.navigateTo(); - - dataJobsManagePage - .clickOnContentContainer(); - - dataJobsManagePage - .chooseQuickFilter(0); - - dataJobsManagePage - .openJobDetails(longLivedTestJob.team, longLivedTestJob.job_name); - - const dataJobBasePage = DataJobBasePO - .getPage(); - - dataJobBasePage - .getDetailsTab() - .should('exist') - .should('have.class', 'active'); - - dataJobBasePage - .getExecutionsTab() - .should('exist') - .should('not.have.class', 'active'); - - dataJobBasePage - .openExecutionsTab(); - - const dataJobExecutionsPage = DataJobManageExecutionsPage - .getPage(); - - dataJobExecutionsPage - .getDetailsTab() - .should('exist') - .should('not.have.class', 'active'); - - dataJobExecutionsPage - .getExecutionsTab() - .should('exist') - .should('have.class', 'active'); - - dataJobExecutionsPage - .getDataGrid() - .should('exist'); - }); - - it('Data Job Manage Executions Page - should verify on URL navigate to Executions will open the page', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage - .navigateTo(longLivedTestJob.team, longLivedTestJob.job_name); - - dataJobExecutionsPage - .getCurrentUrl() - .should('match', new RegExp(`\\/manage\\/data-jobs\\/${longLivedTestJob.team}\\/${longLivedTestJob.job_name}\\/executions$`)); - - dataJobExecutionsPage - .getDetailsTab() - .should('exist') - .should('not.have.class', 'active'); - - dataJobExecutionsPage - .getExecutionsTab() - .should('exist') - .should('have.class', 'active'); - - dataJobExecutionsPage - .getDataGrid() - .should('exist'); +import { DataJobBasePO } from "../../../support/application/data-job-base.po"; +import { DataJobsManagePage } from "../../../support/pages/app/lib/manage/data-jobs.po"; +import { DataJobManageExecutionsPage } from "../../../support/pages/app/lib/manage/data-job-executions.po"; +import { applyGlobalEnvSettings } from "../../../support/helpers/commands.helpers"; + +describe( + "Data Job Manage Executions Page", + { tags: ["@dataPipelines", "@manageDataJobExecutions"] }, + () => { + let longLivedTestJob; + + before(() => { + return DataJobManageExecutionsPage.recordHarIfSupported() + .then(() => + cy.clearLocalStorageSnapshot("data-job-manage-executions") + ) + .then(() => DataJobManageExecutionsPage.login()) + .then(() => cy.saveLocalStorage("data-job-manage-executions")) + .then(() => cy.prepareLongLivedTestJob()) + .then(() => cy.createTwoExecutionsLongLivedTestJob()) + .then(() => cy.fixture("lib/manage/e2e-cypress-dp-test.json")) + .then((loadedTestJob) => { + longLivedTestJob = applyGlobalEnvSettings(loadedTestJob); + + return cy.wrap({ + context: "manage::data-job-executions.spec::before()", + action: "continue", + }); + }); }); - it('Data Job Manage Executions Page - should verify elements are rendered in DOM', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage - .navigateTo(longLivedTestJob.team, longLivedTestJob.job_name); - - dataJobExecutionsPage - .getMainTitle() - .should('be.visible') - .should('contains.text', longLivedTestJob.job_name); - - dataJobExecutionsPage - .getDetailsTab() - .should('exist') - .should('not.have.class', 'active'); - - dataJobExecutionsPage - .getExecutionsTab() - .should('exist') - .should('have.class', 'active'); - - dataJobExecutionsPage - .getExecuteNowButton() - .should('exist'); - - dataJobExecutionsPage - .getActionDropdownBtn() - .should('exist'); - - dataJobExecutionsPage - .openActionDropdown(); - - dataJobExecutionsPage - .getDeleteJobBtn() - .should('exist'); - - dataJobExecutionsPage - .clickOnContentContainer(); - - dataJobExecutionsPage - .waitForSmartDelay(); - - dataJobExecutionsPage - .getTimePeriod() - .should('exist'); - - dataJobExecutionsPage - .getStatusChart() - .should('exist'); - - dataJobExecutionsPage - .getDurationChart() - .should('exist'); - - dataJobExecutionsPage - .getDataGrid() - .should('exist'); - - dataJobExecutionsPage - .getDataGridRows() - .should('have.length.gt', 0); + after(() => { + DataJobManageExecutionsPage.saveHarIfSupported(); }); - it('Data Job Manage Executions Page - should verify cancel execution button works properly', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage - .navigateTo(longLivedTestJob.team, longLivedTestJob.job_name); - - dataJobExecutionsPage - .initPostExecutionInterceptor(); - dataJobExecutionsPage - .initDeleteExecutionInterceptor(); - dataJobExecutionsPage - .initGetExecutionInterceptor(); - dataJobExecutionsPage - .initGetExecutionsInterceptor(); - - dataJobExecutionsPage - .getExecutionsTab() - .should('exist') - .should('have.class', 'active'); - - // Execute data job and check if the execution status after that is Running or Submitted - dataJobExecutionsPage - .getExecuteNowButton() - .should('exist'); - dataJobExecutionsPage - .executeNow(); - dataJobExecutionsPage - .getConfirmDialogButton() - .should('exist') - .click({ force: true }); - dataJobExecutionsPage - .waitForPostExecutionCompletion(); - dataJobExecutionsPage - .waitForDataJobStartExecute(); - - dataJobExecutionsPage - .waitForViewToRenderShort(); - - dataJobExecutionsPage - .getExecutionStatus() - .first() - .contains(/Running|Submitted/); - - // Cancel data job execution and check if the status after that is Cancelled - dataJobExecutionsPage - .getCancelExecutionButton() - .should('exist') - .click({ force: true }) - dataJobExecutionsPage - .getConfirmDialogButton() - .should('exist') - .click({ force: true }); - dataJobExecutionsPage - .waitForDeleteExecutionCompletion(); - dataJobExecutionsPage - .waitForDataJobStopExecute(); - - dataJobExecutionsPage - .waitForViewToRenderShort(); + beforeEach(() => { + cy.restoreLocalStorage("data-job-manage-executions"); - dataJobExecutionsPage - .getExecutionStatus() - .first() - .should('contains.text', 'Canceled'); + DataJobManageExecutionsPage.initBackendRequestInterceptor(); }); - }); - - it('Data Job Manage Executions Page - should verify time period is in correct format', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage - .navigateTo(longLivedTestJob.team, longLivedTestJob.job_name); - - dataJobExecutionsPage - .getTimePeriod() - .invoke('text') - .invoke('trim') - .should('match', new RegExp(`^\\w+\\s\\d+,\\s\\d+,\\s\\d+:\\d+:\\d+\\s(AM|PM)\\sto\\s\\w+\\s\\d+,\\s\\d+,\\s\\d+:\\d+:\\d+\\s(AM|PM)$`)); - }); - - it('Data Job Manage Executions Page - should verify refresh button will show spinner and then load data', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage - .navigateTo(longLivedTestJob.team, longLivedTestJob.job_name); - - dataJobExecutionsPage - .getDataGrid() - .should('exist'); - dataJobExecutionsPage - .getExecLoadingSpinner() - .should('not.exist'); + describe("Sanity", { tags: "@integration" }, () => { + it(`Data Job Manage Executions Page - should open Details and verify Executions tab is displayed and navigates`, () => { + cy.log("Fixture for name: " + longLivedTestJob.job_name); - dataJobExecutionsPage - .getDataGridSpinner() - .should('not.exist'); + const dataJobsManagePage = DataJobsManagePage.navigateTo(); - dataJobExecutionsPage - .waitForActionThinkingTime(); + dataJobsManagePage.clickOnContentContainer(); - dataJobExecutionsPage - .refreshExecData(); + dataJobsManagePage.chooseQuickFilter(0); - dataJobExecutionsPage - .getDataGrid() - .should('exist'); + dataJobsManagePage.openJobDetails( + longLivedTestJob.team, + longLivedTestJob.job_name + ); - dataJobExecutionsPage - .getExecLoadingSpinner() - .should('exist'); + const dataJobBasePage = DataJobBasePO.getPage(); - dataJobExecutionsPage - .getDataGridSpinner() - .should('exist'); + dataJobBasePage + .getDetailsTab() + .should("exist") + .should("have.class", "active"); - dataJobExecutionsPage - .waitForBackendRequestCompletion(); + dataJobBasePage + .getExecutionsTab() + .should("exist") + .should("not.have.class", "active"); - dataJobExecutionsPage - .waitForViewToRender(); + dataJobBasePage.openExecutionsTab(); - dataJobExecutionsPage - .getDataGrid() - .should('exist'); + const dataJobExecutionsPage = + DataJobManageExecutionsPage.getPage(); - dataJobExecutionsPage - .getExecLoadingSpinner() - .should('not.exist'); + dataJobExecutionsPage + .getDetailsTab() + .should("exist") + .should("not.have.class", "active"); - dataJobExecutionsPage - .getDataGridSpinner() - .should('not.exist'); - }); + dataJobExecutionsPage + .getExecutionsTab() + .should("exist") + .should("have.class", "active"); - describe('DataGrid Filters', () => { - it('Data Job Manage Executions Page - should verify status filter options are rendered', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage - .navigateTo(longLivedTestJob.team, longLivedTestJob.job_name); + dataJobExecutionsPage.getDataGrid().should("exist"); + }); - dataJobExecutionsPage - .openStatusFilter(); - - dataJobExecutionsPage - .getDataGridPopupFilter() - .should('exist'); - - dataJobExecutionsPage - .getDataGridExecStatusFilters() - .then((elements) => Array.from(elements).map((el) => el.innerText)) - .should('deep.equal', ['Success', 'Platform Error', 'User Error', 'Running', 'Submitted', 'Skipped', 'Canceled']); + it("Data Job Manage Executions Page - should verify on URL navigate to Executions will open the page", () => { + const dataJobExecutionsPage = + DataJobManageExecutionsPage.navigateTo( + longLivedTestJob.team, + longLivedTestJob.job_name + ); - dataJobExecutionsPage - .closeFilter(); + dataJobExecutionsPage + .getCurrentUrl() + .should( + "match", + new RegExp( + `\\/manage\\/data-jobs\\/${longLivedTestJob.team}\\/${longLivedTestJob.job_name}\\/executions$` + ) + ); - dataJobExecutionsPage - .getDataGridPopupFilter() - .should('not.exist'); + dataJobExecutionsPage + .getDetailsTab() + .should("exist") + .should("not.have.class", "active"); + + dataJobExecutionsPage + .getExecutionsTab() + .should("exist") + .should("have.class", "active"); + + dataJobExecutionsPage.getDataGrid().should("exist"); + }); + + it("Data Job Manage Executions Page - should verify elements are rendered in DOM", () => { + const dataJobExecutionsPage = + DataJobManageExecutionsPage.navigateTo( + longLivedTestJob.team, + longLivedTestJob.job_name + ); + + dataJobExecutionsPage + .getMainTitle() + .should("be.visible") + .should("contains.text", longLivedTestJob.job_name); + + dataJobExecutionsPage + .getDetailsTab() + .should("exist") + .should("not.have.class", "active"); + + dataJobExecutionsPage + .getExecutionsTab() + .should("exist") + .should("have.class", "active"); + + dataJobExecutionsPage.getExecuteNowButton().should("exist"); + + dataJobExecutionsPage.getActionDropdownBtn().should("exist"); + + dataJobExecutionsPage.openActionDropdown(); + + dataJobExecutionsPage.getDeleteJobBtn().should("exist"); + + dataJobExecutionsPage.clickOnContentContainer(); + + dataJobExecutionsPage.waitForSmartDelay(); + + dataJobExecutionsPage.getTimePeriod().should("exist"); + + dataJobExecutionsPage.getStatusChart().should("exist"); + + dataJobExecutionsPage.getDurationChart().should("exist"); + + dataJobExecutionsPage.getDataGrid().should("exist"); + + dataJobExecutionsPage + .getDataGridRows() + .should("have.length.gt", 0); + }); + + it("Data Job Manage Executions Page - should verify cancel execution button works properly", () => { + const dataJobExecutionsPage = + DataJobManageExecutionsPage.navigateTo( + longLivedTestJob.team, + longLivedTestJob.job_name + ); + + dataJobExecutionsPage.initPostExecutionInterceptor(); + dataJobExecutionsPage.initDeleteExecutionInterceptor(); + dataJobExecutionsPage.initGetExecutionInterceptor(); + dataJobExecutionsPage.initGetExecutionsInterceptor(); + + dataJobExecutionsPage + .getExecutionsTab() + .should("exist") + .should("have.class", "active"); + + // Execute data job and check if the execution status after that is Running or Submitted + dataJobExecutionsPage.getExecuteNowButton().should("exist"); + dataJobExecutionsPage.executeNow(); + dataJobExecutionsPage + .getConfirmDialogButton() + .should("exist") + .click({ force: true }); + dataJobExecutionsPage.waitForPostExecutionCompletion(); + dataJobExecutionsPage.waitForDataJobStartExecute(); + + dataJobExecutionsPage.waitForViewToRenderShort(); + + dataJobExecutionsPage + .getExecutionStatus() + .first() + .contains(/Running|Submitted/); + + // Cancel data job execution and check if the status after that is Cancelled + dataJobExecutionsPage + .getCancelExecutionButton() + .should("exist") + .click({ force: true }); + dataJobExecutionsPage + .getConfirmDialogButton() + .should("exist") + .click({ force: true }); + dataJobExecutionsPage.waitForDeleteExecutionCompletion(); + dataJobExecutionsPage.waitForDataJobStopExecute(); + + dataJobExecutionsPage.waitForViewToRenderShort(); + + dataJobExecutionsPage + .getExecutionStatus() + .first() + .should("contains.text", "Canceled"); + }); }); - it('Data Job Manage Executions Page - should verify type filter options are rendered', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage - .navigateTo(longLivedTestJob.team, longLivedTestJob.job_name); - - dataJobExecutionsPage - .openTypeFilter(); - - dataJobExecutionsPage - .getDataGridPopupFilter() - .should('exist'); - - dataJobExecutionsPage - .getDataGridExecTypeFilters() - .then((elements) => Array.from(elements).map((el) => el.innerText)) - .should('deep.equal', ['Manual', 'Scheduled']); - - dataJobExecutionsPage - .closeFilter(); + it("Data Job Manage Executions Page - should verify time period is in correct format", () => { + const dataJobExecutionsPage = + DataJobManageExecutionsPage.navigateTo( + longLivedTestJob.team, + longLivedTestJob.job_name + ); dataJobExecutionsPage - .getDataGridPopupFilter() - .should('not.exist'); + .getTimePeriod() + .invoke("text") + .invoke("trim") + .should( + "match", + new RegExp( + `^\\w+\\s\\d+,\\s\\d+,\\s\\d+:\\d+:\\d+\\s(AM|PM)\\sto\\s\\w+\\s\\d+,\\s\\d+,\\s\\d+:\\d+:\\d+\\s(AM|PM)$` + ) + ); }); - it('Data Job Manage Executions Page - should verify id filter render input and filters correctly', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage - .navigateTo(longLivedTestJob.team, longLivedTestJob.job_name); - - dataJobExecutionsPage - .getDataGridRows() - .should('have.length.gt', 0); - - dataJobExecutionsPage - .openIDFilter(); - - dataJobExecutionsPage - .getDataGridPopupFilter() - .should('exist'); + it("Data Job Manage Executions Page - should verify refresh button will show spinner and then load data", () => { + const dataJobExecutionsPage = + DataJobManageExecutionsPage.navigateTo( + longLivedTestJob.team, + longLivedTestJob.job_name + ); - dataJobExecutionsPage - .typeToFilterInput('xyxyxy'); + dataJobExecutionsPage.getDataGrid().should("exist"); - dataJobExecutionsPage - .getDataGridRows() - .should('have.length', 0); + dataJobExecutionsPage.getExecLoadingSpinner().should("not.exist"); - dataJobExecutionsPage - .clearFilterInput(); + dataJobExecutionsPage.getDataGridSpinner().should("not.exist"); - dataJobExecutionsPage - .getDataGridRows() - .should('have.length.gt', 0); + dataJobExecutionsPage.waitForActionThinkingTime(); - dataJobExecutionsPage - .closeFilter(); + dataJobExecutionsPage.refreshExecData(); - dataJobExecutionsPage - .getDataGridPopupFilter() - .should('not.exist'); - }); + dataJobExecutionsPage.getDataGrid().should("exist"); - it('Data Job Manage Executions Page - should verify version filter render input and filters correctly', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage - .navigateTo(longLivedTestJob.team, longLivedTestJob.job_name); + dataJobExecutionsPage.getExecLoadingSpinner().should("exist"); - dataJobExecutionsPage - .getDataGridRows() - .should('have.length.gt', 0); + dataJobExecutionsPage.getDataGridSpinner().should("exist"); - dataJobExecutionsPage - .openVersionFilter(); + dataJobExecutionsPage.waitForBackendRequestCompletion(); - dataJobExecutionsPage - .getDataGridPopupFilter() - .should('exist'); + dataJobExecutionsPage.waitForViewToRender(); - dataJobExecutionsPage - .typeToFilterInput('xyxyxy'); + dataJobExecutionsPage.getDataGrid().should("exist"); - dataJobExecutionsPage - .getDataGridRows() - .should('have.length', 0); + dataJobExecutionsPage.getExecLoadingSpinner().should("not.exist"); - dataJobExecutionsPage - .clearFilterInput(); + dataJobExecutionsPage.getDataGridSpinner().should("not.exist"); + }); - dataJobExecutionsPage - .getDataGridRows() - .should('have.length.gt', 0); + describe("DataGrid Filters", () => { + it("Data Job Manage Executions Page - should verify status filter options are rendered", () => { + const dataJobExecutionsPage = + DataJobManageExecutionsPage.navigateTo( + longLivedTestJob.team, + longLivedTestJob.job_name + ); - dataJobExecutionsPage - .closeFilter(); + dataJobExecutionsPage.openStatusFilter(); - dataJobExecutionsPage - .getDataGridPopupFilter() - .should('not.exist'); - }); - }); + dataJobExecutionsPage.getDataGridPopupFilter().should("exist"); - describe('DataGrid Sort', () => { - it('Data Job Manage Executions Page - should verify duration sort works', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage - .navigateTo(longLivedTestJob.team, longLivedTestJob.job_name); + dataJobExecutionsPage + .getDataGridExecStatusFilters() + .then((elements) => + Array.from(elements).map((el) => el.innerText) + ) + .should("deep.equal", [ + "Success", + "Platform Error", + "User Error", + "Running", + "Submitted", + "Skipped", + "Canceled", + ]); - dataJobExecutionsPage - .getDataGridRows() - .should('have.length.gt', 0); + dataJobExecutionsPage.closeFilter(); - dataJobExecutionsPage - .getDataGridExecDurationHeader() - .should('exist') - .invoke('attr', 'aria-sort') - .should('eq', 'none'); + dataJobExecutionsPage + .getDataGridPopupFilter() + .should("not.exist"); + }); - dataJobExecutionsPage - .sortByExecDuration(); + it("Data Job Manage Executions Page - should verify type filter options are rendered", () => { + const dataJobExecutionsPage = + DataJobManageExecutionsPage.navigateTo( + longLivedTestJob.team, + longLivedTestJob.job_name + ); - dataJobExecutionsPage - .getDataGridExecDurationHeader() - .should('exist') - .invoke('attr', 'aria-sort') - .should('eq', 'ascending'); + dataJobExecutionsPage.openTypeFilter(); - dataJobExecutionsPage - .getDataGridRows() - .should('have.length.gt', 0); + dataJobExecutionsPage.getDataGridPopupFilter().should("exist"); - dataJobExecutionsPage - .getDataGridExecDurationCell(1) - .invoke('text') - .invoke('trim') - .then((elText1) => { - return dataJobExecutionsPage - .getDataGridExecDurationCell(2) - .invoke('text') - .invoke('trim') - .then((elText2) => { - return dataJobExecutionsPage.convertStringContentToSeconds(elText1) - - dataJobExecutionsPage.convertStringContentToSeconds(elText2); - }); - }) - .should('be.lte', 0); + dataJobExecutionsPage + .getDataGridExecTypeFilters() + .then((elements) => + Array.from(elements).map((el) => el.innerText) + ) + .should("deep.equal", ["Manual", "Scheduled"]); - dataJobExecutionsPage - .sortByExecDuration(); + dataJobExecutionsPage.closeFilter(); - dataJobExecutionsPage - .getDataGridExecDurationHeader() - .should('exist') - .invoke('attr', 'aria-sort') - .should('eq', 'descending'); + dataJobExecutionsPage + .getDataGridPopupFilter() + .should("not.exist"); + }); - dataJobExecutionsPage - .getDataGridRows() - .should('have.length.gt', 0); + it("Data Job Manage Executions Page - should verify id filter render input and filters correctly", () => { + const dataJobExecutionsPage = + DataJobManageExecutionsPage.navigateTo( + longLivedTestJob.team, + longLivedTestJob.job_name + ); - dataJobExecutionsPage - .getDataGridExecDurationCell(1) - .invoke('text') - .invoke('trim') - .then((elText1) => { - return dataJobExecutionsPage - .getDataGridExecDurationCell(2) - .invoke('text') - .invoke('trim') - .then((elText2) => { - return dataJobExecutionsPage.convertStringContentToSeconds(elText1) - - dataJobExecutionsPage.convertStringContentToSeconds(elText2); - }); - }) - .should('be.gte', 0); - }); + dataJobExecutionsPage + .getDataGridRows() + .should("have.length.gt", 0); - it('Data Job Manage Executions Page - should verify execution start sort works', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage - .navigateTo(longLivedTestJob.team, longLivedTestJob.job_name); + dataJobExecutionsPage.openIDFilter(); - dataJobExecutionsPage - .getDataGridRows() - .should('have.length.gt', 0); + dataJobExecutionsPage.getDataGridPopupFilter().should("exist"); - dataJobExecutionsPage - .getDataGridExecStartHeader() - .should('exist') - .invoke('attr', 'aria-sort') - .should('eq', 'descending'); + dataJobExecutionsPage.typeToFilterInput("xyxyxy"); - dataJobExecutionsPage - .getDataGridExecStartCell(1) - .invoke('text') - .invoke('trim') - .then((elText1) => { - return dataJobExecutionsPage - .getDataGridExecStartCell(2) - .invoke('text') - .invoke('trim') - .then((elText2) => { - return new Date(elText1) - new Date(elText2) - }); - }) - .should('be.gte', 0); + dataJobExecutionsPage + .getDataGridRows() + .should("have.length", 0); - dataJobExecutionsPage - .sortByExecStart(); + dataJobExecutionsPage.clearFilterInput(); - dataJobExecutionsPage - .getDataGridExecStartHeader() - .should('exist') - .invoke('attr', 'aria-sort') - .should('eq', 'ascending'); + dataJobExecutionsPage + .getDataGridRows() + .should("have.length.gt", 0); - dataJobExecutionsPage - .getDataGridRows() - .should('have.length.gt', 0); + dataJobExecutionsPage.closeFilter(); - dataJobExecutionsPage - .getDataGridExecStartCell(1) - .invoke('text') - .invoke('trim') - .then((elText1) => { - return dataJobExecutionsPage - .getDataGridExecStartCell(2) - .invoke('text') - .invoke('trim') - .then((elText2) => { - return new Date(elText1) - new Date(elText2) - }); - }) - .should('be.lte', 0); - }); + dataJobExecutionsPage + .getDataGridPopupFilter() + .should("not.exist"); + }); - it('Data Job Manage Executions Page - should verify execution end sort works', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage - .navigateTo(longLivedTestJob.team, longLivedTestJob.job_name); + it("Data Job Manage Executions Page - should verify version filter render input and filters correctly", () => { + const dataJobExecutionsPage = + DataJobManageExecutionsPage.navigateTo( + longLivedTestJob.team, + longLivedTestJob.job_name + ); - dataJobExecutionsPage - .getDataGridRows() - .should('have.length.gt', 0); + dataJobExecutionsPage + .getDataGridRows() + .should("have.length.gt", 0); - dataJobExecutionsPage - .getDataGridExecEndHeader() - .should('exist') - .invoke('attr', 'aria-sort') - .should('eq', 'none'); + dataJobExecutionsPage.openVersionFilter(); - dataJobExecutionsPage - .sortByExecEnd(); + dataJobExecutionsPage.getDataGridPopupFilter().should("exist"); - dataJobExecutionsPage - .getDataGridExecEndHeader() - .should('exist') - .invoke('attr', 'aria-sort') - .should('eq', 'ascending'); + dataJobExecutionsPage.typeToFilterInput("xyxyxy"); - dataJobExecutionsPage - .getDataGridRows() - .should('have.length.gt', 0); + dataJobExecutionsPage + .getDataGridRows() + .should("have.length", 0); - dataJobExecutionsPage - .getDataGridExecEndCell(1) - .invoke('text') - .invoke('trim') - .then((elText1) => { - return dataJobExecutionsPage - .getDataGridExecEndCell(2) - .invoke('text') - .invoke('trim') - .then((elText2) => { - const d1 = elText1 - ? new Date(elText1) - : new Date(); - const d2 = elText2 - ? new Date(elText2) - : new Date(); - - return d1 - d2 - }); - }) - .should('be.lte', 0); + dataJobExecutionsPage.clearFilterInput(); - dataJobExecutionsPage - .sortByExecEnd(); + dataJobExecutionsPage + .getDataGridRows() + .should("have.length.gt", 0); - dataJobExecutionsPage - .getDataGridExecEndHeader() - .should('exist') - .invoke('attr', 'aria-sort') - .should('eq', 'descending'); + dataJobExecutionsPage.closeFilter(); - dataJobExecutionsPage - .getDataGridRows() - .should('have.length.gt', 0); + dataJobExecutionsPage + .getDataGridPopupFilter() + .should("not.exist"); + }); + }); - dataJobExecutionsPage - .getDataGridExecEndCell(1) - .invoke('text') - .invoke('trim') - .then((elText1) => { - return dataJobExecutionsPage - .getDataGridExecEndCell(2) - .invoke('text') - .invoke('trim') - .then((elText2) => { - const d1 = elText1 - ? new Date(elText1) - : new Date(); - const d2 = elText2 - ? new Date(elText2) - : new Date(); - - return d1 - d2 - }); - }) - .should('be.gte', 0); + describe("DataGrid Sort", () => { + it("Data Job Manage Executions Page - should verify duration sort works", () => { + const dataJobExecutionsPage = + DataJobManageExecutionsPage.navigateTo( + longLivedTestJob.team, + longLivedTestJob.job_name + ); + + dataJobExecutionsPage + .getDataGridRows() + .should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecDurationHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "none"); + + dataJobExecutionsPage.sortByExecDuration(); + + dataJobExecutionsPage + .getDataGridExecDurationHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "ascending"); + + dataJobExecutionsPage + .getDataGridRows() + .should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecDurationCell(1) + .invoke("text") + .invoke("trim") + .then((elText1) => { + return dataJobExecutionsPage + .getDataGridExecDurationCell(2) + .invoke("text") + .invoke("trim") + .then((elText2) => { + return ( + dataJobExecutionsPage.convertStringContentToSeconds( + elText1 + ) - + dataJobExecutionsPage.convertStringContentToSeconds( + elText2 + ) + ); + }); + }) + .should("be.lte", 0); + + dataJobExecutionsPage.sortByExecDuration(); + + dataJobExecutionsPage + .getDataGridExecDurationHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "descending"); + + dataJobExecutionsPage + .getDataGridRows() + .should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecDurationCell(1) + .invoke("text") + .invoke("trim") + .then((elText1) => { + return dataJobExecutionsPage + .getDataGridExecDurationCell(2) + .invoke("text") + .invoke("trim") + .then((elText2) => { + return ( + dataJobExecutionsPage.convertStringContentToSeconds( + elText1 + ) - + dataJobExecutionsPage.convertStringContentToSeconds( + elText2 + ) + ); + }); + }) + .should("be.gte", 0); + }); + + it("Data Job Manage Executions Page - should verify execution start sort works", () => { + const dataJobExecutionsPage = + DataJobManageExecutionsPage.navigateTo( + longLivedTestJob.team, + longLivedTestJob.job_name + ); + + dataJobExecutionsPage + .getDataGridRows() + .should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecStartHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "descending"); + + dataJobExecutionsPage + .getDataGridExecStartCell(1) + .invoke("text") + .invoke("trim") + .then((elText1) => { + return dataJobExecutionsPage + .getDataGridExecStartCell(2) + .invoke("text") + .invoke("trim") + .then((elText2) => { + return new Date(elText1) - new Date(elText2); + }); + }) + .should("be.gte", 0); + + dataJobExecutionsPage.sortByExecStart(); + + dataJobExecutionsPage + .getDataGridExecStartHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "ascending"); + + dataJobExecutionsPage + .getDataGridRows() + .should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecStartCell(1) + .invoke("text") + .invoke("trim") + .then((elText1) => { + return dataJobExecutionsPage + .getDataGridExecStartCell(2) + .invoke("text") + .invoke("trim") + .then((elText2) => { + return new Date(elText1) - new Date(elText2); + }); + }) + .should("be.lte", 0); + }); + + it("Data Job Manage Executions Page - should verify execution end sort works", () => { + const dataJobExecutionsPage = + DataJobManageExecutionsPage.navigateTo( + longLivedTestJob.team, + longLivedTestJob.job_name + ); + + dataJobExecutionsPage + .getDataGridRows() + .should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecEndHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "none"); + + dataJobExecutionsPage.sortByExecEnd(); + + dataJobExecutionsPage + .getDataGridExecEndHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "ascending"); + + dataJobExecutionsPage + .getDataGridRows() + .should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecEndCell(1) + .invoke("text") + .invoke("trim") + .then((elText1) => { + return dataJobExecutionsPage + .getDataGridExecEndCell(2) + .invoke("text") + .invoke("trim") + .then((elText2) => { + const d1 = elText1 + ? new Date(elText1) + : new Date(); + const d2 = elText2 + ? new Date(elText2) + : new Date(); + + return d1 - d2; + }); + }) + .should("be.lte", 0); + + dataJobExecutionsPage.sortByExecEnd(); + + dataJobExecutionsPage + .getDataGridExecEndHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "descending"); + + dataJobExecutionsPage + .getDataGridRows() + .should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecEndCell(1) + .invoke("text") + .invoke("trim") + .then((elText1) => { + return dataJobExecutionsPage + .getDataGridExecEndCell(2) + .invoke("text") + .invoke("trim") + .then((elText2) => { + const d1 = elText1 + ? new Date(elText1) + : new Date(); + const d2 = elText2 + ? new Date(elText2) + : new Date(); + + return d1 - d2; + }); + }) + .should("be.gte", 0); + }); }); - }); -}); + } +); diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/lib/manage/data-jobs.int.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/lib/manage/data-jobs.int.spec.js index 9fd6c538a6..9e9c5639dd 100644 --- a/projects/frontend/data-pipelines/gui/e2e/integration/lib/manage/data-jobs.int.spec.js +++ b/projects/frontend/data-pipelines/gui/e2e/integration/lib/manage/data-jobs.int.spec.js @@ -8,487 +8,546 @@ // 1. Is search working // When you click on details does a modal pop-up? -import { DataJobsManagePage } from '../../../support/pages/app/lib/manage/data-jobs.po'; -import { DataJobManageDetailsPage } from '../../../support/pages/app/lib/manage/data-job-details.po'; -import { applyGlobalEnvSettings } from '../../../support/helpers/commands.helpers'; - -describe('Data Jobs Manage Page', { tags: ['@dataPipelines', '@manageDataJobs'] }, () => { - const descriptionWordsBeforeTruncate = 12; - - /** - * @type {DataJobsManagePage} - */ - let dataJobsManagePage; - let testJobs; - let longLivedTestJob; - let longLivedFailingTestJob; - - before(() => { - return DataJobsManagePage.recordHarIfSupported() - .then(() => cy.clearLocalStorageSnapshot('data-jobs-manage')) - .then(() => DataJobsManagePage.login()) - .then(() => cy.saveLocalStorage('data-jobs-manage')) - .then(() => cy.cleanTestJobs()) - .then(() => cy.prepareBaseTestJobs()) - .then(() => cy.prepareLongLivedTestJob()) - .then(() => cy.createTwoExecutionsLongLivedTestJob()) - .then(() => cy.prepareLongLivedFailingTestJob()) - .then(() => - cy.fixture('lib/explore/test-jobs.json') - .then((loadedTestJobs) => { - testJobs = applyGlobalEnvSettings(loadedTestJobs); - - return cy.wrap({ context: 'manage::1::data-jobs.int.spec::before()', action: 'continue' }); - }) - ) - .then(() => - cy.fixture('lib/manage/e2e-cypress-dp-test.json') - .then((loadedTestJob) => { - longLivedTestJob = applyGlobalEnvSettings(loadedTestJob); - - return cy.wrap({ context: 'manage::2::data-jobs.int.spec::before()', action: 'continue' }); - }) - ) - .then(() => - cy.fixture('e2e-cy-dp-failing.job.json') - .then((failingTestJob) => { - longLivedFailingTestJob = applyGlobalEnvSettings(failingTestJob); - - return cy.wrap({ context: 'manage::3::data-jobs.int.spec::before()', action: 'continue' }); - }) - ) - .then(() => - // Enable data job after job end - DataJobsManagePage.changeJobStatus(longLivedTestJob.team, longLivedTestJob.job_name, true) - ); - }); - - beforeEach(() => { - cy.restoreLocalStorage('data-jobs-manage'); - - DataJobsManagePage.initBackendRequestInterceptor(); - - dataJobsManagePage = DataJobsManagePage.navigateTo(); - }); - - after(() => { - cy.cleanTestJobs(); - - // Enable data job after job end - DataJobsManagePage.changeJobStatus(longLivedTestJob.team, longLivedTestJob.job_name, true) - - DataJobsManagePage.saveHarIfSupported(); - }); - - it('Data Jobs Manage Page - loads title', () => { - dataJobsManagePage - .getPageTitle() - .should('be.visible'); - }); - - it('Data Jobs Manage Page - grid contains test jobs', () => { - dataJobsManagePage - .chooseQuickFilter(0); - - dataJobsManagePage - .sortByJobName(); - - dataJobsManagePage - .getDataGrid() - .should('be.visible'); - - testJobs.forEach((testJob) => { - cy.log('Fixture for name: ' + testJob.job_name); +import { DataJobsManagePage } from "../../../support/pages/app/lib/manage/data-jobs.po"; +import { DataJobManageDetailsPage } from "../../../support/pages/app/lib/manage/data-job-details.po"; +import { applyGlobalEnvSettings } from "../../../support/helpers/commands.helpers"; + +describe( + "Data Jobs Manage Page", + { tags: ["@dataPipelines", "@manageDataJobs"] }, + () => { + const descriptionWordsBeforeTruncate = 12; + + /** + * @type {DataJobsManagePage} + */ + let dataJobsManagePage; + let testJobs; + let longLivedTestJob; + let longLivedFailingTestJob; + + before(() => { + return DataJobsManagePage.recordHarIfSupported() + .then(() => cy.clearLocalStorageSnapshot("data-jobs-manage")) + .then(() => DataJobsManagePage.login()) + .then(() => cy.saveLocalStorage("data-jobs-manage")) + .then(() => cy.cleanTestJobs()) + .then(() => cy.prepareBaseTestJobs()) + .then(() => cy.prepareLongLivedTestJob()) + .then(() => cy.createTwoExecutionsLongLivedTestJob()) + .then(() => cy.prepareLongLivedFailingTestJob()) + .then(() => + cy + .fixture("lib/explore/test-jobs.json") + .then((loadedTestJobs) => { + testJobs = applyGlobalEnvSettings(loadedTestJobs); + + return cy.wrap({ + context: + "manage::1::data-jobs.int.spec::before()", + action: "continue", + }); + }) + ) + .then(() => + cy + .fixture("lib/manage/e2e-cypress-dp-test.json") + .then((loadedTestJob) => { + longLivedTestJob = + applyGlobalEnvSettings(loadedTestJob); + + return cy.wrap({ + context: + "manage::2::data-jobs.int.spec::before()", + action: "continue", + }); + }) + ) + .then(() => + cy + .fixture("e2e-cy-dp-failing.job.json") + .then((failingTestJob) => { + longLivedFailingTestJob = + applyGlobalEnvSettings(failingTestJob); + + return cy.wrap({ + context: + "manage::3::data-jobs.int.spec::before()", + action: "continue", + }); + }) + ) + .then(() => + // Enable data job after job end + DataJobsManagePage.changeJobStatus( + longLivedTestJob.team, + longLivedTestJob.job_name, + true + ) + ); + }); + + beforeEach(() => { + cy.restoreLocalStorage("data-jobs-manage"); + + DataJobsManagePage.initBackendRequestInterceptor(); + + dataJobsManagePage = DataJobsManagePage.navigateTo(); + }); + + after(() => { + cy.cleanTestJobs(); + + // Enable data job after job end + DataJobsManagePage.changeJobStatus( + longLivedTestJob.team, + longLivedTestJob.job_name, + true + ); + + DataJobsManagePage.saveHarIfSupported(); + }); + + it("Data Jobs Manage Page - loads title", () => { + dataJobsManagePage.getPageTitle().should("be.visible"); + }); + + it("Data Jobs Manage Page - grid contains test jobs", () => { + dataJobsManagePage.chooseQuickFilter(0); + + dataJobsManagePage.sortByJobName(); + + dataJobsManagePage.getDataGrid().should("be.visible"); + + testJobs.forEach((testJob) => { + cy.log("Fixture for name: " + testJob.job_name); + + dataJobsManagePage + .getDataGridCell(testJob.job_name) + .scrollIntoView() + .should("be.visible"); + }); + }); + + it( + "Data Jobs Manage Page - grid filter by job name", + { tags: "@integration" }, + () => { + dataJobsManagePage.chooseQuickFilter(0); + + dataJobsManagePage.filterByJobName(testJobs[0].job_name); + + dataJobsManagePage + .getDataGridCell(testJobs[0].job_name) + .should("be.visible"); + + dataJobsManagePage + .getDataGridCell(testJobs[1].job_name) + .should("not.exist"); + } + ); + + it( + "Data Jobs Manage Page - grid search by job name", + { tags: "@integration" }, + () => { + dataJobsManagePage.clickOnContentContainer(); + + dataJobsManagePage.chooseQuickFilter(0); + dataJobsManagePage.searchByJobName(testJobs[1].job_name); + + dataJobsManagePage + .getDataGridCell(testJobs[0].job_name) + .should("not.exist"); + + dataJobsManagePage + .getDataGridCell(testJobs[1].job_name) + .should("be.visible"); + } + ); + + it("Data Jobs Manage Page - grid search parameter goes into URL", () => { + dataJobsManagePage.chooseQuickFilter(0); + + dataJobsManagePage.sortByJobName(); + + // verify 2 test rows visible dataJobsManagePage - .getDataGridCell(testJob.job_name) + .getDataGridCell(testJobs[0].job_name) + .scrollIntoView() + .should("be.visible"); + dataJobsManagePage + .getDataGridCell(testJobs[1].job_name) .scrollIntoView() - .should('be.visible'); - }) - }); - - it('Data Jobs Manage Page - grid filter by job name', { tags: '@integration' }, () => { - dataJobsManagePage - .chooseQuickFilter(0); - - dataJobsManagePage - .filterByJobName(testJobs[0].job_name); - - dataJobsManagePage - .getDataGridCell(testJobs[0].job_name) - .should('be.visible'); - - dataJobsManagePage - .getDataGridCell(testJobs[1].job_name) - .should('not.exist'); - }); - - it('Data Jobs Manage Page - grid search by job name', { tags: '@integration' }, () => { - dataJobsManagePage - .clickOnContentContainer(); - - dataJobsManagePage - .chooseQuickFilter(0); - - dataJobsManagePage - .searchByJobName(testJobs[1].job_name); - - dataJobsManagePage - .getDataGridCell(testJobs[0].job_name) - .should('not.exist'); - - dataJobsManagePage - .getDataGridCell(testJobs[1].job_name) - .should('be.visible'); - }); - - it('Data Jobs Manage Page - grid search parameter goes into URL', () => { - dataJobsManagePage - .chooseQuickFilter(0); - - dataJobsManagePage - .sortByJobName(); - - // verify 2 test rows visible - dataJobsManagePage - .getDataGridCell(testJobs[0].job_name) - .scrollIntoView() - .should('be.visible'); - dataJobsManagePage - .getDataGridCell(testJobs[1].job_name) - .scrollIntoView() - .should('be.visible'); - - // do search - dataJobsManagePage - .searchByJobName(testJobs[0].job_name); - - dataJobsManagePage - .waitForViewToRender(); - - // verify 1 test row visible - dataJobsManagePage - .getDataGridCell(testJobs[0].job_name) - .scrollIntoView() - .should('be.visible'); - dataJobsManagePage - .getDataGridCell(testJobs[1].job_name) - .should('not.exist'); - - // verify url contains search value - dataJobsManagePage - .getCurrentUrl() - .should('match', new RegExp(`\\/manage\\/data-jobs\\?search=${ testJobs[0].job_name }$`)); - - // clear search with clear() method - dataJobsManagePage - .clearSearchField(); - - dataJobsManagePage - .waitForViewToRender(); - - // verify 2 test rows visible - dataJobsManagePage - .getDataGridCell(testJobs[0].job_name) - .scrollIntoView() - .should('be.visible'); - dataJobsManagePage - .getDataGridCell(testJobs[1].job_name) - .scrollIntoView() - .should('be.visible'); - - // verify url does not contain search value - dataJobsManagePage - .getCurrentUrl() - .should('match', new RegExp(`\\/manage\\/data-jobs$`)); - }); - - it('Data Jobs Manage Page - grid search perform search when URL contains search parameter', () => { - // navigate with search value in URL - dataJobsManagePage = DataJobsManagePage.navigateToUrl(`/manage/data-jobs?search=${ testJobs[1].job_name }`); - - dataJobsManagePage - .chooseQuickFilter(0); - - dataJobsManagePage - .sortByJobName(); - - // verify url contains search value - dataJobsManagePage - .getCurrentUrl() - .should('match', new RegExp(`\\/manage\\/data-jobs\\?search=${ testJobs[1].job_name }$`)); - - // verify 1 test row visible - dataJobsManagePage - .getDataGridCell(testJobs[0].job_name) - .should('not.exist'); - dataJobsManagePage - .getDataGridCell(testJobs[1].job_name) - .scrollIntoView() - .should('be.visible'); - - // clear search with button - dataJobsManagePage - .clearSearchFieldWithButton(); - - // verify 2 test rows visible - dataJobsManagePage - .getDataGridCell(testJobs[0].job_name) - .scrollIntoView() - .should('be.visible'); - dataJobsManagePage - .getDataGridCell(testJobs[1].job_name) - .scrollIntoView() - .should('be.visible'); - - // verify url does not contain search value - dataJobsManagePage - .getCurrentUrl() - .should('match', new RegExp(`\\/manage\\/data-jobs$`)); - }); - - it('Data Jobs Manage Page - refresh shows newly created job', () => { - cy.fixture('lib/explore/additional-test-job.json').then((additionalTestJob) => { - const normalizedTestJob = applyGlobalEnvSettings(additionalTestJob); - - cy.log('Fixture for name: ' + normalizedTestJob.job_name); + .should("be.visible"); + + // do search + dataJobsManagePage.searchByJobName(testJobs[0].job_name); + dataJobsManagePage.waitForViewToRender(); + + // verify 1 test row visible dataJobsManagePage - .chooseQuickFilter(0); + .getDataGridCell(testJobs[0].job_name) + .scrollIntoView() + .should("be.visible"); + dataJobsManagePage + .getDataGridCell(testJobs[1].job_name) + .should("not.exist"); + // verify url contains search value dataJobsManagePage - .sortByJobName(); + .getCurrentUrl() + .should( + "match", + new RegExp( + `\\/manage\\/data-jobs\\?search=${testJobs[0].job_name}$` + ) + ); + + // clear search with clear() method + dataJobsManagePage.clearSearchField(); + dataJobsManagePage.waitForViewToRender(); + + // verify 2 test rows visible dataJobsManagePage .getDataGridCell(testJobs[0].job_name) - .should('have.text', testJobs[0].job_name); - + .scrollIntoView() + .should("be.visible"); dataJobsManagePage - .getDataGridCell(normalizedTestJob.job_name) - .should('not.exist'); + .getDataGridCell(testJobs[1].job_name) + .scrollIntoView() + .should("be.visible"); + // verify url does not contain search value dataJobsManagePage - .prepareAdditionalTestJob(); + .getCurrentUrl() + .should("match", new RegExp(`\\/manage\\/data-jobs$`)); + }); + it("Data Jobs Manage Page - grid search perform search when URL contains search parameter", () => { + // navigate with search value in URL + dataJobsManagePage = DataJobsManagePage.navigateToUrl( + `/manage/data-jobs?search=${testJobs[1].job_name}` + ); + + dataJobsManagePage.chooseQuickFilter(0); + + dataJobsManagePage.sortByJobName(); + + // verify url contains search value + dataJobsManagePage + .getCurrentUrl() + .should( + "match", + new RegExp( + `\\/manage\\/data-jobs\\?search=${testJobs[1].job_name}$` + ) + ); + + // verify 1 test row visible + dataJobsManagePage + .getDataGridCell(testJobs[0].job_name) + .should("not.exist"); dataJobsManagePage - .refreshDataGrid(); + .getDataGridCell(testJobs[1].job_name) + .scrollIntoView() + .should("be.visible"); + + // clear search with button + dataJobsManagePage.clearSearchFieldWithButton(); + // verify 2 test rows visible dataJobsManagePage - .filterByJobName(normalizedTestJob.job_name); + .getDataGridCell(testJobs[0].job_name) + .scrollIntoView() + .should("be.visible"); + dataJobsManagePage + .getDataGridCell(testJobs[1].job_name) + .scrollIntoView() + .should("be.visible"); + // verify url does not contain search value dataJobsManagePage - .getDataGridCell(normalizedTestJob.job_name) - .should('have.text', normalizedTestJob.job_name); + .getCurrentUrl() + .should("match", new RegExp(`\\/manage\\/data-jobs$`)); }); - }); - - it('Data Jobs Manage Page - click on edit button opens new page with Job details', { tags: '@integration' }, () => { - dataJobsManagePage - .clickOnContentContainer(); - - dataJobsManagePage - .chooseQuickFilter(0); - - dataJobsManagePage - .sortByJobName(); - - dataJobsManagePage - .openJobDetails(testJobs[0].team, testJobs[0].job_name); - - const dataJobManageDetailsPage = DataJobManageDetailsPage - .getPage(); - - dataJobManageDetailsPage - .getMainTitle() - .should('be.visible') - .should('contains.text', testJobs[0].job_name); - - dataJobManageDetailsPage - .getDescription() - .should('be.visible') - .should('contain.text', testJobs[0].description.split(' ').slice(0, descriptionWordsBeforeTruncate).join(' ')) - - dataJobManageDetailsPage - .getSchedule() - .should('be.visible'); - - dataJobManageDetailsPage - .getDeploymentStatus('not-deployed') - .should('be.visible') - .should('have.text', 'Not Deployed'); - }); - - it('Data Jobs Manage Page - disable/enable job', { tags: '@integration' }, () => { - dataJobsManagePage - .clickOnContentContainer(); - - dataJobsManagePage - .chooseQuickFilter(0); - - const jobName = longLivedTestJob.job_name; - const team = longLivedTestJob.team; - - dataJobsManagePage - .searchByJobName(jobName); - - //Toggle job status twice, enable to disable and vice versa. - dataJobsManagePage.toggleJobStatus(longLivedTestJob.job_name); - dataJobsManagePage.toggleJobStatus(longLivedTestJob.job_name); - }); - - it('Data Jobs Manage Page - quick filters', { tags: '@integration' }, () => { - // Disable data job before test start - DataJobsManagePage - .changeJobStatus(longLivedFailingTestJob.team, longLivedFailingTestJob.job_name, true) - .then(() => - DataJobsManagePage.changeJobStatus(longLivedTestJob.team, longLivedTestJob.job_name, false) - ) - .then(() => { - dataJobsManagePage - .clickOnContentContainer(); - dataJobsManagePage - .waitForClickThinkingTime(); - dataJobsManagePage - .chooseQuickFilter(0); - dataJobsManagePage - .waitForViewToRender(); + it("Data Jobs Manage Page - refresh shows newly created job", () => { + cy.fixture("lib/explore/additional-test-job.json").then( + (additionalTestJob) => { + const normalizedTestJob = + applyGlobalEnvSettings(additionalTestJob); - dataJobsManagePage - .getDataGridStatusIcons() - .then(($icons) => { - for (const icon of Array.from($icons)) { - cy.wrap(icon).invoke('attr', 'data-cy') - .should('match', new RegExp('data-pipelines-job-(enabled|disabled|not-deployed)')); - } - }); + cy.log("Fixture for name: " + normalizedTestJob.job_name); - dataJobsManagePage - .waitForClickThinkingTime(); - dataJobsManagePage - .chooseQuickFilter(1); - dataJobsManagePage - .waitForViewToRender(); + dataJobsManagePage.chooseQuickFilter(0); - dataJobsManagePage - .getDataGridStatusIcons() - .then(($icons) => { - for (const icon of Array.from($icons)) { - cy.wrap(icon).should('have.attr', 'data-cy', 'data-pipelines-job-enabled'); - } - }); + dataJobsManagePage.sortByJobName(); - dataJobsManagePage - .waitForClickThinkingTime(); - dataJobsManagePage - .chooseQuickFilter(2); - dataJobsManagePage - .waitForViewToRender(); + dataJobsManagePage + .getDataGridCell(testJobs[0].job_name) + .should("have.text", testJobs[0].job_name); - dataJobsManagePage - .getDataGridStatusIcons() - .then(($icons) => { - for (const icon of Array.from($icons)) { - cy.wrap(icon).should('have.attr', 'data-cy', 'data-pipelines-job-disabled'); - } - }); + dataJobsManagePage + .getDataGridCell(normalizedTestJob.job_name) + .should("not.exist"); - dataJobsManagePage - .waitForClickThinkingTime(); - dataJobsManagePage - .chooseQuickFilter(3); - dataJobsManagePage - .waitForViewToRender(); + dataJobsManagePage.prepareAdditionalTestJob(); - dataJobsManagePage - .getDataGridStatusIcons() - .then(($icons) => { - for (const icon of Array.from($icons)) { - cy.wrap(icon).should('have.attr', 'data-cy', 'data-pipelines-job-not-deployed'); - } + dataJobsManagePage.refreshDataGrid(); + + dataJobsManagePage.filterByJobName( + normalizedTestJob.job_name + ); + + dataJobsManagePage + .getDataGridCell(normalizedTestJob.job_name) + .should("have.text", normalizedTestJob.job_name); + } + ); + }); + + it( + "Data Jobs Manage Page - click on edit button opens new page with Job details", + { tags: "@integration" }, + () => { + dataJobsManagePage.clickOnContentContainer(); + + dataJobsManagePage.chooseQuickFilter(0); + + dataJobsManagePage.sortByJobName(); + + dataJobsManagePage.openJobDetails( + testJobs[0].team, + testJobs[0].job_name + ); + + const dataJobManageDetailsPage = + DataJobManageDetailsPage.getPage(); + + dataJobManageDetailsPage + .getMainTitle() + .should("be.visible") + .should("contains.text", testJobs[0].job_name); + + dataJobManageDetailsPage + .getDescription() + .should("be.visible") + .should( + "contain.text", + testJobs[0].description + .split(" ") + .slice(0, descriptionWordsBeforeTruncate) + .join(" ") + ); + + dataJobManageDetailsPage.getSchedule().should("be.visible"); + + dataJobManageDetailsPage + .getDeploymentStatus("not-deployed") + .should("be.visible") + .should("have.text", "Not Deployed"); + } + ); + + it( + "Data Jobs Manage Page - disable/enable job", + { tags: "@integration" }, + () => { + dataJobsManagePage.clickOnContentContainer(); + + dataJobsManagePage.chooseQuickFilter(0); + + const jobName = longLivedTestJob.job_name; + const team = longLivedTestJob.team; + + dataJobsManagePage.searchByJobName(jobName); + + //Toggle job status twice, enable to disable and vice versa. + dataJobsManagePage.toggleJobStatus(longLivedTestJob.job_name); + dataJobsManagePage.toggleJobStatus(longLivedTestJob.job_name); + } + ); + + it( + "Data Jobs Manage Page - quick filters", + { tags: "@integration" }, + () => { + // Disable data job before test start + DataJobsManagePage.changeJobStatus( + longLivedFailingTestJob.team, + longLivedFailingTestJob.job_name, + true + ) + .then(() => + DataJobsManagePage.changeJobStatus( + longLivedTestJob.team, + longLivedTestJob.job_name, + false + ) + ) + .then(() => { + dataJobsManagePage.clickOnContentContainer(); + + dataJobsManagePage.waitForClickThinkingTime(); + dataJobsManagePage.chooseQuickFilter(0); + dataJobsManagePage.waitForViewToRender(); + + dataJobsManagePage + .getDataGridStatusIcons() + .then(($icons) => { + for (const icon of Array.from($icons)) { + cy.wrap(icon) + .invoke("attr", "data-cy") + .should( + "match", + new RegExp( + "data-pipelines-job-(enabled|disabled|not-deployed)" + ) + ); + } + }); + + dataJobsManagePage.waitForClickThinkingTime(); + dataJobsManagePage.chooseQuickFilter(1); + dataJobsManagePage.waitForViewToRender(); + + dataJobsManagePage + .getDataGridStatusIcons() + .then(($icons) => { + for (const icon of Array.from($icons)) { + cy.wrap(icon).should( + "have.attr", + "data-cy", + "data-pipelines-job-enabled" + ); + } + }); + + dataJobsManagePage.waitForClickThinkingTime(); + dataJobsManagePage.chooseQuickFilter(2); + dataJobsManagePage.waitForViewToRender(); + + dataJobsManagePage + .getDataGridStatusIcons() + .then(($icons) => { + for (const icon of Array.from($icons)) { + cy.wrap(icon).should( + "have.attr", + "data-cy", + "data-pipelines-job-disabled" + ); + } + }); + + dataJobsManagePage.waitForClickThinkingTime(); + dataJobsManagePage.chooseQuickFilter(3); + dataJobsManagePage.waitForViewToRender(); + + dataJobsManagePage + .getDataGridStatusIcons() + .then(($icons) => { + for (const icon of Array.from($icons)) { + cy.wrap(icon).should( + "have.attr", + "data-cy", + "data-pipelines-job-not-deployed" + ); + } + }); + + // Enable data job after job end + DataJobsManagePage.changeJobStatus( + longLivedTestJob.team, + longLivedTestJob.job_name, + true + ); }); + } + ); - // Enable data job after job end - DataJobsManagePage.changeJobStatus(longLivedTestJob.team, longLivedTestJob.job_name, true); - }); - }); - - it('Data Jobs Manage Page - show/hide column when toggling from menu', () => { - // show panel for show/hide columns - dataJobsManagePage - .toggleColumnShowHidePanel(); - - // verify correct options are rendered - dataJobsManagePage - .getDataGridColumnShowHideOptionsValues() - .should('have.length', 10) - .invoke('join', ',') - .should('eq', 'Description,Deployment Status,Last Execution Duration,Success rate,Next run (UTC),Last Deployed (UTC),Last Deployed By,Notifications,Source,Logs'); - - // verify column is not checked in toggling menu - dataJobsManagePage - .getDataGridColumnShowHideOption('Notifications') - .should('exist') - .should('not.be.checked'); - - // verify header cell for column is not rendered - dataJobsManagePage - .getDataGridHeaderCell('Notifications') - .should('have.length', 0); - - // toggle column to render - dataJobsManagePage - .checkColumnShowHideOption('Notifications'); - - // verify column is checked in toggling menu - dataJobsManagePage - .getDataGridColumnShowHideOption('Notifications') - .should('exist') - .should('be.checked'); - - // verify header cell for column is rendered - dataJobsManagePage - .getDataGridHeaderCell('Notifications') - .should('have.length', 1); - - // toggle column to hide - dataJobsManagePage - .uncheckColumnShowHideOption('Notifications'); - - // verify column is not checked in toggling menu - dataJobsManagePage - .getDataGridColumnShowHideOption('Notifications') - .should('exist') - .should('not.be.checked'); - - // verify header cell for column is not rendered - dataJobsManagePage - .getDataGridHeaderCell('Notifications') - .should('have.length', 0); - - // hide panel for show/hide columns - dataJobsManagePage - .toggleColumnShowHidePanel(); - }); - - it('Data Jobs Manage Page - execute now', { tags: '@integration' }, () => { - const jobName = longLivedTestJob.job_name; - const team = longLivedTestJob.team; - - dataJobsManagePage - .chooseQuickFilter(0); - - dataJobsManagePage - .sortByJobName(); - - dataJobsManagePage - .executeDataJob(jobName); - - // TODO better handling toast message. If tests are executed immediately it will return - // error 409 conflict and it will say that the job is already executing - dataJobsManagePage - .getToastTitle(10000) // Wait up to 10 seconds for Toast to show. - .should('exist') - .contains(/Data job Queued for execution|Failed, Data job is already executing/); - }); -}); + it("Data Jobs Manage Page - show/hide column when toggling from menu", () => { + // show panel for show/hide columns + dataJobsManagePage.toggleColumnShowHidePanel(); + + // verify correct options are rendered + dataJobsManagePage + .getDataGridColumnShowHideOptionsValues() + .should("have.length", 10) + .invoke("join", ",") + .should( + "eq", + "Description,Deployment Status,Last Execution Duration,Success rate,Next run (UTC),Last Deployed (UTC),Last Deployed By,Notifications,Source,Logs" + ); + + // verify column is not checked in toggling menu + dataJobsManagePage + .getDataGridColumnShowHideOption("Notifications") + .should("exist") + .should("not.be.checked"); + + // verify header cell for column is not rendered + dataJobsManagePage + .getDataGridHeaderCell("Notifications") + .should("have.length", 0); + + // toggle column to render + dataJobsManagePage.checkColumnShowHideOption("Notifications"); + + // verify column is checked in toggling menu + dataJobsManagePage + .getDataGridColumnShowHideOption("Notifications") + .should("exist") + .should("be.checked"); + + // verify header cell for column is rendered + dataJobsManagePage + .getDataGridHeaderCell("Notifications") + .should("have.length", 1); + + // toggle column to hide + dataJobsManagePage.uncheckColumnShowHideOption("Notifications"); + + // verify column is not checked in toggling menu + dataJobsManagePage + .getDataGridColumnShowHideOption("Notifications") + .should("exist") + .should("not.be.checked"); + + // verify header cell for column is not rendered + dataJobsManagePage + .getDataGridHeaderCell("Notifications") + .should("have.length", 0); + + // hide panel for show/hide columns + dataJobsManagePage.toggleColumnShowHidePanel(); + }); + + it( + "Data Jobs Manage Page - execute now", + { tags: "@integration" }, + () => { + const jobName = longLivedTestJob.job_name; + const team = longLivedTestJob.team; + + dataJobsManagePage.chooseQuickFilter(0); + + dataJobsManagePage.sortByJobName(); + + dataJobsManagePage.executeDataJob(jobName); + + // TODO better handling toast message. If tests are executed immediately it will return + // error 409 conflict and it will say that the job is already executing + dataJobsManagePage + .getToastTitle(10000) // Wait up to 10 seconds for Toast to show. + .should("exist") + .contains( + /Data job Queued for execution|Failed, Data job is already executing/ + ); + } + ); + } +); diff --git a/projects/frontend/data-pipelines/gui/e2e/plugins/index.js b/projects/frontend/data-pipelines/gui/e2e/plugins/index.js index 1fd0b4f108..df19eea987 100644 --- a/projects/frontend/data-pipelines/gui/e2e/plugins/index.js +++ b/projects/frontend/data-pipelines/gui/e2e/plugins/index.js @@ -17,8 +17,11 @@ // This function is called when a project is opened or re-opened (e.g. due to // the project's config changing) -const { install, ensureBrowserFlags } = require('@neuralegion/cypress-har-generator'); -const path = require('path'); +const { + install, + ensureBrowserFlags, +} = require("@neuralegion/cypress-har-generator"); +const path = require("path"); /** * @type {Cypress.PluginConfig} @@ -28,20 +31,23 @@ module.exports = (on, config) => { outputRoot: config.env.CYPRESS_TERMINAL_LOGS, // Used to trim the base path of specs and reduce nesting in the // generated output directory. - specRoot: path.relative(config.fileServerFolder, config.integrationFolder), + specRoot: path.relative( + config.fileServerFolder, + config.integrationFolder + ), outputTarget: { - 'cypress-logs|json': 'json', + "cypress-logs|json": "json", }, - printLogsToConsole: 'always', - printLogsToFile: 'always', + printLogsToConsole: "always", + printLogsToFile: "always", includeSuccessfulHookLogs: true, - logToFilesOnAfterRun: true + logToFilesOnAfterRun: true, }; - require('cypress-terminal-report/src/installLogsPrinter')(on, options); + require("cypress-terminal-report/src/installLogsPrinter")(on, options); install(on, config); - on('before:browser:launch', (browser = {}, launchOptions) => { + on("before:browser:launch", (browser = {}, launchOptions) => { ensureBrowserFlags(browser, launchOptions); return launchOptions; }); diff --git a/projects/frontend/data-pipelines/gui/e2e/support/application/data-job-base.po.js b/projects/frontend/data-pipelines/gui/e2e/support/application/data-job-base.po.js index 54a0782984..d5f2722563 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/application/data-job-base.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/application/data-job-base.po.js @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DataPipelinesBasePO } from './data-pipelines-base.po'; +import { DataPipelinesBasePO } from "./data-pipelines-base.po"; export class DataJobBasePO extends DataPipelinesBasePO { static getPage() { @@ -35,35 +35,38 @@ export class DataJobBasePO extends DataPipelinesBasePO { } waitForDataJobStartExecute() { - cy.waitForInterceptor('@getExecutionsRequest', 20, (response) => { + cy.waitForInterceptor("@getExecutionsRequest", 20, (response) => { return response?.data?.content?.findIndex((e) => { - return e.status?.toLowerCase() === 'running' || e.status?.toLowerCase() === 'submitted' + return ( + e.status?.toLowerCase() === "running" || + e.status?.toLowerCase() === "submitted" + ); }); }); } waitForDataJobStopExecute() { - cy.waitForInterceptor('@getExecutionRequest', 20, (response) => { - return response?.status === 'cancelled'; + cy.waitForInterceptor("@getExecutionRequest", 20, (response) => { + return response?.status === "cancelled"; }); } /* Selectors */ getNavigateBackBtn() { - return cy.get('[data-cy=data-pipelines-job-navigate-back]'); + return cy.get("[data-cy=data-pipelines-job-navigate-back]"); } getMainTitle() { - return cy.get('[data-cy=data-pipelines-job-main-title]'); + return cy.get("[data-cy=data-pipelines-job-main-title]"); } getExecuteNowButton() { - return cy.get('[data-cy=data-pipelines-job-execute-btn]'); + return cy.get("[data-cy=data-pipelines-job-execute-btn]"); } getCancelExecutionButton() { - return cy.get('[data-cy=data-pipelines-job-cancel-execution-btn]'); + return cy.get("[data-cy=data-pipelines-job-cancel-execution-btn]"); } getConfirmDialogButton() { @@ -71,27 +74,27 @@ export class DataJobBasePO extends DataPipelinesBasePO { } getActionDropdownBtn() { - return cy.get('[data-cy=data-pipelines-job-action-dropdown-btn]'); + return cy.get("[data-cy=data-pipelines-job-action-dropdown-btn]"); } getDownloadKeyBtn() { - return cy.get('[data-cy=data-pipelines-job-download-btn]'); + return cy.get("[data-cy=data-pipelines-job-download-btn]"); } getDeleteJobBtn() { - return cy.get('[data-cy=data-pipelines-job-delete-btn]'); + return cy.get("[data-cy=data-pipelines-job-delete-btn]"); } getConfirmDeleteBtn() { - return cy.get('#removeBtn'); + return cy.get("#removeBtn"); } getDetailsTab() { - return cy.get('[data-cy=data-pipelines-job-details-tab]'); + return cy.get("[data-cy=data-pipelines-job-details-tab]"); } getExecutionsTab() { - return cy.get('[data-cy=data-pipelines-job-executions-tab]'); + return cy.get("[data-cy=data-pipelines-job-executions-tab]"); } getExecutionStatus() { @@ -101,15 +104,13 @@ export class DataJobBasePO extends DataPipelinesBasePO { /* Actions */ executeNow() { - this.getExecuteNowButton() - .scrollIntoView() - .click({ force: true }); + this.getExecuteNowButton().scrollIntoView().click({ force: true }); } openActionDropdown() { this.getActionDropdownBtn() .scrollIntoView() - .should('be.visible') + .should("be.visible") .click({ force: true }); this.waitForClickThinkingTime(); @@ -118,7 +119,7 @@ export class DataJobBasePO extends DataPipelinesBasePO { downloadJobKey() { this.getDownloadKeyBtn() .scrollIntoView() - .should('be.visible') + .should("be.visible") .click({ force: true }); this.waitForBackendRequestCompletion(); @@ -127,37 +128,31 @@ export class DataJobBasePO extends DataPipelinesBasePO { deleteJob() { this.getDeleteJobBtn() .scrollIntoView() - .should('be.visible') + .should("be.visible") .click({ force: true }); } confirmDeleteJob() { this.getConfirmDeleteBtn() .scrollIntoView() - .should('be.visible') + .should("be.visible") .click({ force: true }); } navigateBackToDataJobs() { - this.getNavigateBackBtn() - .should('be.visible') - .click({ force: true }); + this.getNavigateBackBtn().should("be.visible").click({ force: true }); this.waitForBackendRequestCompletion(); } openDetailsTab() { - this.getDetailsTab() - .should('exist') - .click({ force: true }); + this.getDetailsTab().should("exist").click({ force: true }); this.waitForBackendRequestCompletion(); } openExecutionsTab() { - this.getExecutionsTab() - .should('exist') - .click({ force: true }); + this.getExecutionsTab().should("exist").click({ force: true }); this.waitForBackendRequestCompletion(); } diff --git a/projects/frontend/data-pipelines/gui/e2e/support/application/data-job-details-base.po.js b/projects/frontend/data-pipelines/gui/e2e/support/application/data-job-details-base.po.js index 609099be4a..c33ab9895f 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/application/data-job-details-base.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/application/data-job-details-base.po.js @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DataJobBasePO } from './data-job-base.po'; +import { DataJobBasePO } from "./data-job-base.po"; export class DataJobDetailsBasePO extends DataJobBasePO { static getPage() { @@ -11,61 +11,61 @@ export class DataJobDetailsBasePO extends DataJobBasePO { } static navigateTo(context, teamName, jobName) { - return this.navigateToUrl(`/${ context }/data-jobs/${ teamName }/${ jobName }`); + return this.navigateToUrl( + `/${context}/data-jobs/${teamName}/${jobName}` + ); } // Selectors getStatusField() { - return cy.get('[data-cy=data-pipelines-job-details-status]'); + return cy.get("[data-cy=data-pipelines-job-details-status]"); } getDescriptionField() { - return cy.get('[data-cy=data-pipelines-job-details-description]'); + return cy.get("[data-cy=data-pipelines-job-details-description]"); } getDescriptionFull() { - return cy.get('[data-cy=description-show-less]'); + return cy.get("[data-cy=description-show-less]"); } getShowDescriptionMoreBtn() { - return cy.get('[data-cy=description-show-more]'); + return cy.get("[data-cy=description-show-more]"); } getTeamField() { - return cy.get('[data-cy=data-pipelines-job-details-team]'); + return cy.get("[data-cy=data-pipelines-job-details-team]"); } getScheduleField() { - return cy.get('[data-cy=data-pipelines-job-details-schedule]'); + return cy.get("[data-cy=data-pipelines-job-details-schedule]"); } getSourceField() { - return cy.get('[data-cy=data-pipelines-job-details-source]'); + return cy.get("[data-cy=data-pipelines-job-details-source]"); } getOnDeployedField() { - return cy.get('[data-cy=data-pipelines-job-details-on-deployed]'); + return cy.get("[data-cy=data-pipelines-job-details-on-deployed]"); } getOnPlatformErrorField() { - return cy.get('[data-cy=data-pipelines-job-details-on-platform-error]'); + return cy.get("[data-cy=data-pipelines-job-details-on-platform-error]"); } getOnUserErrorField() { - return cy.get('[data-cy=data-pipelines-job-details-on-user-error]'); + return cy.get("[data-cy=data-pipelines-job-details-on-user-error]"); } getOnSuccessField() { - return cy.get('[data-cy=data-pipelines-job-details-on-success]'); + return cy.get("[data-cy=data-pipelines-job-details-on-success]"); } // Actions showMoreDescription() { - this.getShowDescriptionMoreBtn() - .should('exist') - .click({ force: true }); + this.getShowDescriptionMoreBtn().should("exist").click({ force: true }); this.waitForViewToRenderShort(); diff --git a/projects/frontend/data-pipelines/gui/e2e/support/application/data-jobs-base.po.js b/projects/frontend/data-pipelines/gui/e2e/support/application/data-jobs-base.po.js index d4b5dd9a4a..1676bc2c0d 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/application/data-jobs-base.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/application/data-jobs-base.po.js @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DataPipelinesBasePO } from './data-pipelines-base.po'; +import { DataPipelinesBasePO } from "./data-pipelines-base.po"; export class DataJobsBasePO extends DataPipelinesBasePO { static getPage() { @@ -11,12 +11,11 @@ export class DataJobsBasePO extends DataPipelinesBasePO { } static navigateTo(linkSelector) { - cy.visit('/') + cy.visit("/"); cy.wait(DataJobsBasePO.INITIAL_PAGE_LOAD_WAIT_TIME); - cy.get(linkSelector) - .click({ force: true }); + cy.get(linkSelector).click({ force: true }); this.waitForBackendRequestCompletion(); @@ -28,105 +27,104 @@ export class DataJobsBasePO extends DataPipelinesBasePO { /* Selectors */ getDataGrid() { - return cy.get('clr-datagrid'); + return cy.get("clr-datagrid"); } getQuickFilters() { - return cy.get('[data-cy=data-pipelines-quick-filters] > span'); + return cy.get("[data-cy=data-pipelines-quick-filters] > span"); } getHeaderColumnJobName() { - return cy.get('[data-cy=data-pipelines-jobs-name-column]'); + return cy.get("[data-cy=data-pipelines-jobs-name-column]"); } getHeaderColumnJobNameSortBtn() { return this.getHeaderColumnJobName() - .should('exist') - .find('.datagrid-column-title'); + .should("exist") + .find(".datagrid-column-title"); } getDataGridHeaderCell(content) { return this.getDataGrid() - .should('exist') - .find('clr-dg-column:not(.datagrid-hidden-column)') - .contains(new RegExp(`${ content }`)); + .should("exist") + .find("clr-dg-column:not(.datagrid-hidden-column)") + .contains(new RegExp(`${content}`)); } // Rows and Cells getDataGridRows() { return this.getDataGrid() - .should('exist') - .find('clr-dg-row.datagrid-row'); + .should("exist") + .find("clr-dg-row.datagrid-row"); } getDataGridRow(rowIndex) { return this.getDataGridRows() - .should('have.length.gte', rowIndex - 1) - .then((rows) => Array.from(rows)[rowIndex - 1]); + .should("have.length.gte", rowIndex - 1) + .then((rows) => Array.from(rows)[rowIndex - 1]); } getDataGridCells(rowIndex) { return this.getDataGridRow(rowIndex) - .should('exist') - .find('clr-dg-cell.datagrid-cell'); + .should("exist") + .find("clr-dg-cell.datagrid-cell"); } getDataGridCellByIndex(rowIndex, cellIndex) { return this.getDataGridCells(rowIndex) - .should('have.length.gte', cellIndex - 1) - .then((cells) => Array.from(cells)[cellIndex - 1]); + .should("have.length.gte", cellIndex - 1) + .then((cells) => Array.from(cells)[cellIndex - 1]); } getDataGridCellByIdentifier(rowIndex, identifier) { - return this.getDataGridRow(rowIndex) - .should('exist') - .find(identifier) + return this.getDataGridRow(rowIndex).should("exist").find(identifier); } getDataGridStatusCells() { return this.getDataGrid() - .should('exist') - .find('[data-cy=data-pipelines-manage-grid-status-cell]'); + .should("exist") + .find("[data-cy=data-pipelines-manage-grid-status-cell]"); } getDataGridStatusIcons() { return this.getDataGrid() - .should('exist') - .find('[data-cy=data-pipelines-manage-grid-status-cell] clr-icon[data-cy*=data-pipelines-job]'); + .should("exist") + .find( + "[data-cy=data-pipelines-manage-grid-status-cell] clr-icon[data-cy*=data-pipelines-job]" + ); } getDataGridColumnToggle() { return this.getDataGrid() - .should('exist') - .find('clr-dg-column-toggle button'); + .should("exist") + .find("clr-dg-column-toggle button"); } getDataGridColumnShowHidePanel() { - return cy.get('.column-switch'); + return cy.get(".column-switch"); } getDataGridColumnShowHideOptions() { return this.getDataGridColumnShowHidePanel() - .should('exist') - .find('clr-checkbox-wrapper'); + .should("exist") + .find("clr-checkbox-wrapper"); } getDataGridColumnShowHideOptionsValues() { return this.getDataGridColumnShowHidePanel() - .should('exist') - .find('clr-checkbox-wrapper') - .then((elements) => Array.from(elements).map((el) => el.innerText)); + .should("exist") + .find("clr-checkbox-wrapper") + .then((elements) => Array.from(elements).map((el) => el.innerText)); } getDataGridColumnShowHideOption(option) { return this.getDataGridColumnShowHideOptions() - .should('have.length.gt', 0) - .then((elements) => - Array.from(elements) - .find((el) => el.innerText === option) - ) - .find('input'); + .should("have.length.gt", 0) + .then((elements) => + Array.from(elements).find((el) => el.innerText === option) + ) + .find("input"); } /* Actions */ @@ -136,7 +134,7 @@ export class DataJobsBasePO extends DataPipelinesBasePO { .then((filters) => { return filters && filters[filterPosition]; }) - .should('exist') + .should("exist") .click({ force: true }); this.waitForBackendRequestCompletion(); @@ -146,7 +144,7 @@ export class DataJobsBasePO extends DataPipelinesBasePO { sortByJobName() { this.getHeaderColumnJobNameSortBtn() - .should('exist') + .should("exist") .click({ force: true }); this.waitForBackendRequestCompletion(); @@ -155,16 +153,14 @@ export class DataJobsBasePO extends DataPipelinesBasePO { } toggleColumnShowHidePanel() { - this.getDataGridColumnToggle() - .should('exist') - .click({ force: true }); + this.getDataGridColumnToggle().should("exist").click({ force: true }); this.waitForClickThinkingTime(); } checkColumnShowHideOption(option) { this.getDataGridColumnShowHideOption(option) - .should('exist') + .should("exist") .check({ force: true }); this.waitForViewToRenderShort(); @@ -172,7 +168,7 @@ export class DataJobsBasePO extends DataPipelinesBasePO { uncheckColumnShowHideOption(option) { this.getDataGridColumnShowHideOption(option) - .should('exist') + .should("exist") .uncheck({ force: true }); this.waitForViewToRenderShort(); diff --git a/projects/frontend/data-pipelines/gui/e2e/support/application/data-pipelines-base.po.js b/projects/frontend/data-pipelines/gui/e2e/support/application/data-pipelines-base.po.js index 3cd77e6c1c..00463584a8 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/application/data-pipelines-base.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/application/data-pipelines-base.po.js @@ -80,7 +80,6 @@ export class DataPipelinesBasePO { return cy.changeDataJobEnabledStatus(teamName, jobName, status); } - // Interceptors and waiting waitForBackendRequestCompletion(numberOfReqToWait = 1) { @@ -122,7 +121,7 @@ export class DataPipelinesBasePO { /* Selectors */ getMainTitle() { - return cy.get('[data-cy=dp-main-title]'); + return cy.get("[data-cy=dp-main-title]"); } getCurrentUrl() { @@ -130,31 +129,29 @@ export class DataPipelinesBasePO { } getToast(timeout) { - return cy.get('vdk-toast-container vdk-toast', { timeout: this.resolveTimeout(timeout) }); + return cy.get("vdk-toast-container vdk-toast", { + timeout: this.resolveTimeout(timeout), + }); } getToastTitle(timeout) { - return this - .getToast(timeout) - .get('.toast-title'); + return this.getToast(timeout).get(".toast-title"); } getToastDismiss(timeout) { - return this - .getToast(timeout) - .get('.dismiss-bg'); + return this.getToast(timeout).get(".dismiss-bg"); } getContentContainer() { - return cy.get('div.content-container'); + return cy.get("div.content-container"); } /* Actions */ confirmInConfirmDialog() { - cy.get('[data-cy=confirmation-dialog-ok-btn]') - .should('exist') - .click({ force: true }); + cy.get("[data-cy=confirmation-dialog-ok-btn]") + .should("exist") + .click({ force: true }); this.waitForBackendRequestCompletion(); @@ -162,21 +159,19 @@ export class DataPipelinesBasePO { } clickOnContentContainer() { - this.getContentContainer() - .should('exist') - .click({ force: true }); + this.getContentContainer().should("exist").click({ force: true }); this.waitForSmartDelay(); } resolveTimeout(timeout) { return timeout === undefined - ? Cypress.config('defaultCommandTimeout') + ? Cypress.config("defaultCommandTimeout") : timeout; } readFile(folderName, fileName) { - const path = require('path'); + const path = require("path"); const downloadsFolder = Cypress.config(folderName); return cy.readFile(path.join(downloadsFolder, fileName)); diff --git a/projects/frontend/data-pipelines/gui/e2e/support/commands.js b/projects/frontend/data-pipelines/gui/e2e/support/commands.js index e1e3ebd8d9..47d685a4e3 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/commands.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/commands.js @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import 'cypress-localstorage-commands'; +import "cypress-localstorage-commands"; import { applyGlobalEnvSettings, @@ -11,242 +11,311 @@ import { createTestJob, deleteTestJobIfExists, deployTestJobIfNotExists, - waitForJobExecutionCompletion -} from './helpers/commands.helpers'; - -Cypress.Commands.add('login', () => { - return cy.request({ - method: 'POST', - // See project README.md how to set this login url - url: Cypress.env('login_url'), - form: true, - body: { - // See project README.md how to set this token - api_token: Cypress.env('OAUTH2_API_TOKEN') - }, - followRedirect: false, - failOnStatusCode: false - }) - .its('body') - .then((body) => { - const token = body.access_token; - const expiresIn = body.expires_in; - const idToken = body.id_token; - const expiresAt = JSON.stringify(Date.now() + (expiresIn * 1000)); - - window.localStorage.setItem('expires_at', expiresAt); - window.localStorage.setItem('access_token', token); - window.localStorage.setItem('id_token', idToken); - - // Set the CSP token in the session storage to enable the Integration testing against Management UI - sessionStorage.setItem('expires_at', expiresAt); - sessionStorage.setItem('access_token', token); - sessionStorage.setItem('id_token', idToken); - - return cy.wrap({ context: 'commands::login()', action: 'continue' }); - }); -}); - -Cypress.Commands.add('initBackendRequestInterceptor', () => { + waitForJobExecutionCompletion, +} from "./helpers/commands.helpers"; + +Cypress.Commands.add("login", () => { + return cy + .request({ + method: "POST", + // See project README.md how to set this login url + url: Cypress.env("login_url"), + form: true, + body: { + // See project README.md how to set this token + api_token: Cypress.env("OAUTH2_API_TOKEN"), + }, + followRedirect: false, + failOnStatusCode: false, + }) + .its("body") + .then((body) => { + const token = body.access_token; + const expiresIn = body.expires_in; + const idToken = body.id_token; + const expiresAt = JSON.stringify(Date.now() + expiresIn * 1000); + + window.localStorage.setItem("expires_at", expiresAt); + window.localStorage.setItem("access_token", token); + window.localStorage.setItem("id_token", idToken); + + // Set the CSP token in the session storage to enable the Integration testing against Management UI + sessionStorage.setItem("expires_at", expiresAt); + sessionStorage.setItem("access_token", token); + sessionStorage.setItem("id_token", idToken); + + return cy.wrap({ + context: "commands::login()", + action: "continue", + }); + }); +}); + +Cypress.Commands.add("initBackendRequestInterceptor", () => { cy.intercept({ - method:'GET', - url:'**/data-jobs/for-team/**'}) - .as('getJobsRequest'); + method: "GET", + url: "**/data-jobs/for-team/**", + }).as("getJobsRequest"); }); -Cypress.Commands.add('waitForBackendRequestCompletion', () => { - cy.wait('@getJobsRequest'); +Cypress.Commands.add("waitForBackendRequestCompletion", () => { + cy.wait("@getJobsRequest"); }); -Cypress.Commands.add('initGetExecutionsInterceptor', () => { - cy.intercept('GET', '**/data-jobs/for-team/**', (req) => { - if (req?.query?.operationName === 'jobsQuery' && req?.query?.query?.includes('executions')) { - req.alias = 'getExecutionsRequest'; +Cypress.Commands.add("initGetExecutionsInterceptor", () => { + cy.intercept("GET", "**/data-jobs/for-team/**", (req) => { + if ( + req?.query?.operationName === "jobsQuery" && + req?.query?.query?.includes("executions") + ) { + req.alias = "getExecutionsRequest"; } - }) + }); }); -Cypress.Commands.add('initGetExecutionInterceptor', () => { +Cypress.Commands.add("initGetExecutionInterceptor", () => { cy.intercept({ - method: 'GET', - url: '**/data-jobs/for-team/**/executions/**' - }) - .as('getExecutionRequest'); + method: "GET", + url: "**/data-jobs/for-team/**/executions/**", + }).as("getExecutionRequest"); }); -Cypress.Commands.add('waitForInterceptor', (aliasName, retries, predicate) => { - cy.wait(aliasName).its('response.body').then((json) => { - - if (predicate(json)) { - return; - } - - if (retries > 0) { - cy.waitForInterceptor(aliasName, retries - 1, predicate); - } - }); +Cypress.Commands.add("waitForInterceptor", (aliasName, retries, predicate) => { + cy.wait(aliasName) + .its("response.body") + .then((json) => { + if (predicate(json)) { + return; + } + + if (retries > 0) { + cy.waitForInterceptor(aliasName, retries - 1, predicate); + } + }); }); -Cypress.Commands.add('initPostExecutionInterceptor', () => { +Cypress.Commands.add("initPostExecutionInterceptor", () => { cy.intercept({ - method: 'POST', - url: '**/data-jobs/for-team/**/executions' - }).as('postExecuteNow'); + method: "POST", + url: "**/data-jobs/for-team/**/executions", + }).as("postExecuteNow"); }); -Cypress.Commands.add('waitForPostExecutionCompletion', () => { - cy.wait('@postExecuteNow'); +Cypress.Commands.add("waitForPostExecutionCompletion", () => { + cy.wait("@postExecuteNow"); }); -Cypress.Commands.add('initDeleteExecutionInterceptor', () => { +Cypress.Commands.add("initDeleteExecutionInterceptor", () => { cy.intercept({ - method: 'DELETE', - url: '**/data-jobs/for-team/**/executions/**' - }).as('deleteExecution'); + method: "DELETE", + url: "**/data-jobs/for-team/**/executions/**", + }).as("deleteExecution"); }); -Cypress.Commands.add('waitForDeleteExecutionCompletion', () => { - cy.wait('@deleteExecution'); +Cypress.Commands.add("waitForDeleteExecutionCompletion", () => { + cy.wait("@deleteExecution"); }); -Cypress.Commands.add('recordHarIfSupported', () => { - if (Cypress.browser.name === 'chrome') { - return cy.recordHar({ excludePaths: ['vendor.js$', 'clr-ui.min.css$', 'scripts.js$', 'polyfills.js$'] }); +Cypress.Commands.add("recordHarIfSupported", () => { + if (Cypress.browser.name === "chrome") { + return cy.recordHar({ + excludePaths: [ + "vendor.js$", + "clr-ui.min.css$", + "scripts.js$", + "polyfills.js$", + ], + }); } - return cy.wrap({ context: 'commands::recordHarIfSupported()', action: 'continue' }); + return cy.wrap({ + context: "commands::recordHarIfSupported()", + action: "continue", + }); }); -Cypress.Commands.add('saveHarIfSupported', () => { - if (Cypress.browser.name === 'chrome') { +Cypress.Commands.add("saveHarIfSupported", () => { + if (Cypress.browser.name === "chrome") { return cy.saveHar(); } - return cy.wrap({ context: 'commands::saveHarIfSupported()', action: 'continue' }); + return cy.wrap({ + context: "commands::saveHarIfSupported()", + action: "continue", + }); }); -Cypress.Commands.add('prepareBaseTestJobs', () => { - return cy.fixture('lib/explore/test-jobs.json') - .then((testJobs) => { - return Promise.all( - testJobs.map((testJob) => { - const normalizedTestJob = applyGlobalEnvSettings(testJob); +Cypress.Commands.add("prepareBaseTestJobs", () => { + return cy.fixture("lib/explore/test-jobs.json").then((testJobs) => { + return Promise.all( + testJobs.map((testJob) => { + const normalizedTestJob = applyGlobalEnvSettings(testJob); - return createTestJob(normalizedTestJob); - }) - ); - }); + return createTestJob(normalizedTestJob); + }) + ); + }); }); -Cypress.Commands.add('prepareAdditionalTestJobs', () => { - return cy.fixture('lib/explore/additional-test-job.json') - .then((testJob) => { - const normalizedTestJob = applyGlobalEnvSettings(testJob); +Cypress.Commands.add("prepareAdditionalTestJobs", () => { + return cy + .fixture("lib/explore/additional-test-job.json") + .then((testJob) => { + const normalizedTestJob = applyGlobalEnvSettings(testJob); - return createTestJob(normalizedTestJob); - }) + return createTestJob(normalizedTestJob); + }); }); -Cypress.Commands.add('prepareLongLivedTestJob', () => { - return deployTestJobIfNotExists('lib/manage/e2e-cypress-dp-test.json', 'lib/manage/e2e-cypress-dp-test.zip'); +Cypress.Commands.add("prepareLongLivedTestJob", () => { + return deployTestJobIfNotExists( + "lib/manage/e2e-cypress-dp-test.json", + "lib/manage/e2e-cypress-dp-test.zip" + ); }); -Cypress.Commands.add('prepareLongLivedFailingTestJob', () => { - return deployTestJobIfNotExists('e2e-cy-dp-failing.job.json', 'e2e-cy-dp-failing.job.zip'); +Cypress.Commands.add("prepareLongLivedFailingTestJob", () => { + return deployTestJobIfNotExists( + "e2e-cy-dp-failing.job.json", + "e2e-cy-dp-failing.job.zip" + ); }); -Cypress.Commands.add('cleanTestJobs', () => { - return cy.fixture('lib/explore/test-jobs.json') - .then((testJobs) => { - return Promise.all( - testJobs.map((testJob) => { - const normalizedTestJob = applyGlobalEnvSettings(testJob); - - return deleteTestJobIfExists(normalizedTestJob); - }) - ); - }) - .then(() => { - return cy.fixture('lib/explore/additional-test-job.json') - .then((testJob) => { - const normalizedTestJob = applyGlobalEnvSettings(testJob); - - return deleteTestJobIfExists(normalizedTestJob); - }); - }); +Cypress.Commands.add("cleanTestJobs", () => { + return cy + .fixture("lib/explore/test-jobs.json") + .then((testJobs) => { + return Promise.all( + testJobs.map((testJob) => { + const normalizedTestJob = applyGlobalEnvSettings(testJob); + + return deleteTestJobIfExists(normalizedTestJob); + }) + ); + }) + .then(() => { + return cy + .fixture("lib/explore/additional-test-job.json") + .then((testJob) => { + const normalizedTestJob = applyGlobalEnvSettings(testJob); + + return deleteTestJobIfExists(normalizedTestJob); + }); + }); }); -Cypress.Commands.add('waitForTestJobExecutionCompletion', () => { +Cypress.Commands.add("waitForTestJobExecutionCompletion", () => { const waitForJobExecutionTimeout = 180000; // Wait up to 3 min for job execution to complete - return cy.fixture('lib/manage/e2e-cypress-dp-test.json') - .then((testJob) => { - const normalizedTestJob = applyGlobalEnvSettings(testJob); + return cy.fixture("lib/manage/e2e-cypress-dp-test.json").then((testJob) => { + const normalizedTestJob = applyGlobalEnvSettings(testJob); - return waitForJobExecutionCompletion(normalizedTestJob.team, normalizedTestJob.job_name, waitForJobExecutionTimeout); - }); + return waitForJobExecutionCompletion( + normalizedTestJob.team, + normalizedTestJob.job_name, + waitForJobExecutionTimeout + ); + }); }); -Cypress.Commands.add('createTwoExecutionsLongLivedTestJob', () => { +Cypress.Commands.add("createTwoExecutionsLongLivedTestJob", () => { const waitForJobExecutionTimeout = 180000; // Wait up to 3 min for job execution to complete - return cy.fixture('lib/manage/e2e-cypress-dp-test.json') - .then((testJob) => { - const normalizedTestJob = applyGlobalEnvSettings(testJob); + return cy.fixture("lib/manage/e2e-cypress-dp-test.json").then((testJob) => { + const normalizedTestJob = applyGlobalEnvSettings(testJob); - return createExecutionsForJob(normalizedTestJob.team, normalizedTestJob.job_name, waitForJobExecutionTimeout, 2); - }); + return createExecutionsForJob( + normalizedTestJob.team, + normalizedTestJob.job_name, + waitForJobExecutionTimeout, + 2 + ); + }); }); -Cypress.Commands.add('createExecutionsLongLivedFailingTestJob', () => { +Cypress.Commands.add("createExecutionsLongLivedFailingTestJob", () => { const waitForJobExecutionTimeout = 180000; // Wait up to 3 min for job execution to complete - return cy.fixture('e2e-cy-dp-failing.job.json') - .then((failingTestJob) => { - const normalizedTestJob = applyGlobalEnvSettings(failingTestJob); - - return createExecutionsForJob(normalizedTestJob.team, normalizedTestJob.job_name, waitForJobExecutionTimeout, 2); - }); -}); - -Cypress.Commands.add('changeDataJobEnabledStatus', (teamName, jobName, status) => { - return cy.request({ - url: Cypress.env('data_jobs_url') + `/data-jobs/for-team/${ teamName }/jobs/${ jobName }/deployments`, - method: 'get', - auth: { - 'bearer': window.localStorage.getItem('access_token') - }, - failOnStatusCode: false - }).then((outerResponse) => { - if (outerResponse.status === 200) { - const lastDeployment = outerResponse.body[outerResponse.body.length - 1]; - const lastDeploymentHash = lastDeployment.job_version; - - return cy.request({ - url: Cypress.env('data_jobs_url') + `/data-jobs/for-team/${ teamName }/jobs/${ jobName }/deployments/${ lastDeploymentHash }`, - method: 'patch', - body: { enabled: status }, + return cy.fixture("e2e-cy-dp-failing.job.json").then((failingTestJob) => { + const normalizedTestJob = applyGlobalEnvSettings(failingTestJob); + + return createExecutionsForJob( + normalizedTestJob.team, + normalizedTestJob.job_name, + waitForJobExecutionTimeout, + 2 + ); + }); +}); + +Cypress.Commands.add( + "changeDataJobEnabledStatus", + (teamName, jobName, status) => { + return cy + .request({ + url: + Cypress.env("data_jobs_url") + + `/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments`, + method: "get", auth: { - 'bearer': window.localStorage.getItem('access_token') + bearer: window.localStorage.getItem("access_token"), }, - failOnStatusCode: false - }).then((innerResponse) => { - if (innerResponse.status >= 200 && innerResponse.status < 300) { - cy.log(`Change enable status to [${ status }] for data job [${ jobName }]`); + failOnStatusCode: false, + }) + .then((outerResponse) => { + if (outerResponse.status === 200) { + const lastDeployment = + outerResponse.body[outerResponse.body.length - 1]; + const lastDeploymentHash = lastDeployment.job_version; + + return cy + .request({ + url: + Cypress.env("data_jobs_url") + + `/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments/${lastDeploymentHash}`, + method: "patch", + body: { enabled: status }, + auth: { + bearer: window.localStorage.getItem( + "access_token" + ), + }, + failOnStatusCode: false, + }) + .then((innerResponse) => { + if ( + innerResponse.status >= 200 && + innerResponse.status < 300 + ) { + cy.log( + `Change enable status to [${status}] for data job [${jobName}]` + ); + } else { + cy.log( + `Cannot change enabled status to [${status}] for data job [${jobName}]` + ); + + console.log(`Http request:`, innerResponse); + } + + return cy.wrap({ + context: + "commands::1::changeDataJobEnabledStatus()", + action: "continue", + }); + }); } else { - cy.log(`Cannot change enabled status to [${ status }] for data job [${ jobName }]`); + cy.log( + `Cannot change enabled status to [${status}] for data job [${jobName}]` + ); - console.log(`Http request:`, innerResponse); - } + console.log(`Http request:`, outerResponse); - return cy.wrap({ context: 'commands::1::changeDataJobEnabledStatus()', action: 'continue' }); + return cy.wrap({ + context: "commands::2::changeDataJobEnabledStatus()", + action: "continue", + }); + } }); - } else { - cy.log(`Cannot change enabled status to [${ status }] for data job [${ jobName }]`); - - console.log(`Http request:`, outerResponse); - - return cy.wrap({ context: 'commands::2::changeDataJobEnabledStatus()', action: 'continue' }); - } - }); -}); + } +); diff --git a/projects/frontend/data-pipelines/gui/e2e/support/helpers/commands.helpers.js b/projects/frontend/data-pipelines/gui/e2e/support/helpers/commands.helpers.js index 7c5a904835..62096475a5 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/helpers/commands.helpers.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/helpers/commands.helpers.js @@ -3,258 +3,412 @@ * SPDX-License-Identifier: Apache-2.0 */ -const DEFAULT_TEST_ENV_VAR = 'lib'; +const DEFAULT_TEST_ENV_VAR = "lib"; const applyGlobalEnvSettings = (loadedElement, injectedTestEnvVar = null) => { const TEST_ENV_VAR = injectedTestEnvVar ?? _loadTestEnvironmentVar(); - if (typeof loadedElement === 'string') { - return loadedElement.replace('$env-placeholder$', TEST_ENV_VAR); + if (typeof loadedElement === "string") { + return loadedElement.replace("$env-placeholder$", TEST_ENV_VAR); } - if (typeof loadedElement === 'object') { - Object.entries(loadedElement) - .forEach(([key, value]) => { - if (typeof value === 'string') { - if (value.includes('$env-placeholder$')) { - value = value.replace('$env-placeholder$', TEST_ENV_VAR); - } - - loadedElement[key] = value; - } - - if (typeof value === 'object') { - loadedElement[key] = applyGlobalEnvSettings(value); - } - }); + if (typeof loadedElement === "object") { + Object.entries(loadedElement).forEach(([key, value]) => { + if (typeof value === "string") { + if (value.includes("$env-placeholder$")) { + value = value.replace("$env-placeholder$", TEST_ENV_VAR); + } + + loadedElement[key] = value; + } + + if (typeof value === "object") { + loadedElement[key] = applyGlobalEnvSettings(value); + } + }); } return loadedElement; }; -const createExecutionsForJob = (teamName, jobName, waitForJobExecutionTimeout, numberOfExecutions = 2) => { - cy.log(`Trying to provide at least ${ numberOfExecutions } executions for Job "${ jobName }"`); - - return _getJobExecutions(teamName, jobName) - .then((executions) => { - cy.log(`Found ${ executions.length } executions for Job "${ jobName }" and target is ${ numberOfExecutions } executions`); - - if (executions.length >= numberOfExecutions) { - cy.log(`Skipping manual execution, expected number of executions found`); - - return cy.wrap({ context: 'commands.helpers::1::createExecutionsForJob()', action: 'continue' }); - } +const createExecutionsForJob = ( + teamName, + jobName, + waitForJobExecutionTimeout, + numberOfExecutions = 2 +) => { + cy.log( + `Trying to provide at least ${numberOfExecutions} executions for Job "${jobName}"` + ); + + return _getJobExecutions(teamName, jobName).then((executions) => { + cy.log( + `Found ${executions.length} executions for Job "${jobName}" and target is ${numberOfExecutions} executions` + ); + + if (executions.length >= numberOfExecutions) { + cy.log( + `Skipping manual execution, expected number of executions found` + ); - return waitForJobExecutionCompletion(teamName, jobName, waitForJobExecutionTimeout) - .then(() => { - return _getJobLastDeployment(teamName, jobName) - .then((lastDeployment) => { - if (lastDeployment) { - return _executeCreateExecutionsForJob( - teamName, - jobName, - waitForJobExecutionTimeout, - lastDeployment, - executions, - numberOfExecutions - ); - } + return cy.wrap({ + context: "commands.helpers::1::createExecutionsForJob()", + action: "continue", + }); + } - return cy.wrap({ context: 'commands.helpers::2::createExecutionsForJob()', action: 'continue' }); - }); - }); + return waitForJobExecutionCompletion( + teamName, + jobName, + waitForJobExecutionTimeout + ).then(() => { + return _getJobLastDeployment(teamName, jobName).then( + (lastDeployment) => { + if (lastDeployment) { + return _executeCreateExecutionsForJob( + teamName, + jobName, + waitForJobExecutionTimeout, + lastDeployment, + executions, + numberOfExecutions + ); + } + + return cy.wrap({ + context: + "commands.helpers::2::createExecutionsForJob()", + action: "continue", + }); + } + ); }); + }); }; -const waitForJobExecutionCompletion = (teamName, jobName, jobExecutionTimeout, loopStep = 0) => { +const waitForJobExecutionCompletion = ( + teamName, + jobName, + jobExecutionTimeout, + loopStep = 0 +) => { const pollInterval = 5000; - return cy.request({ - url: Cypress.env('data_jobs_url') + `/data-jobs/for-team/${ teamName }/jobs/${ jobName }/executions`, - method: 'get', - auth: { - 'bearer': window.localStorage.getItem('access_token') - } - }).then((response) => { - if (response.status !== 200) { - cy.log(`Job execution poll failed. Status: ${ response.status }; Message: ${ response.body }`); - - return cy.wrap({ context: 'commands.helpers::1::waitForJobExecutionCompletion()', action: 'continue' }); - } - - const lastExecutions = response.body - .sort((left, right) => _compareDatesAsc(left, right)) - .slice(response.body.length > 5 ? response.body.length - 5 : 0); - - if (!lastExecutions.length || lastExecutions.length === 0) { - cy.log(`No valid Job executions available.`); + return cy + .request({ + url: + Cypress.env("data_jobs_url") + + `/data-jobs/for-team/${teamName}/jobs/${jobName}/executions`, + method: "get", + auth: { + bearer: window.localStorage.getItem("access_token"), + }, + }) + .then((response) => { + if (response.status !== 200) { + cy.log( + `Job execution poll failed. Status: ${response.status}; Message: ${response.body}` + ); + + return cy.wrap({ + context: + "commands.helpers::1::waitForJobExecutionCompletion()", + action: "continue", + }); + } - return cy.wrap({ context: 'commands.helpers::2::waitForJobExecutionCompletion()', action: 'continue' }); - } + const lastExecutions = response.body + .sort((left, right) => _compareDatesAsc(left, right)) + .slice(response.body.length > 5 ? response.body.length - 5 : 0); - const lastExecution = lastExecutions[lastExecutions.length - 1]; - const lastExecutionStatus = lastExecution.status.toLowerCase(); + if (!lastExecutions.length || lastExecutions.length === 0) { + cy.log(`No valid Job executions available.`); - if (lastExecutionStatus !== 'running' && lastExecutionStatus !== 'submitted') { - return ( - loopStep > 0 - ? cy.wait(pollInterval) - : cy.wrap({ context: 'commands.helpers::3::waitForJobExecutionCompletion()', action: 'continue' }) - ).then(() => { - cy.log(`Job "${ jobName }" executed successfully, polling completed!`); + return cy.wrap({ + context: + "commands.helpers::2::waitForJobExecutionCompletion()", + action: "continue", + }); + } - return cy.wrap({ context: 'commands.helpers::4::waitForJobExecutionCompletion()', action: 'continue' }); - }); - } + const lastExecution = lastExecutions[lastExecutions.length - 1]; + const lastExecutionStatus = lastExecution.status.toLowerCase(); + + if ( + lastExecutionStatus !== "running" && + lastExecutionStatus !== "submitted" + ) { + return ( + loopStep > 0 + ? cy.wait(pollInterval) + : cy.wrap({ + context: + "commands.helpers::3::waitForJobExecutionCompletion()", + action: "continue", + }) + ).then(() => { + cy.log( + `Job "${jobName}" executed successfully, polling completed!` + ); + + return cy.wrap({ + context: + "commands.helpers::4::waitForJobExecutionCompletion()", + action: "continue", + }); + }); + } - if (jobExecutionTimeout <= 0) { - cy.log('Time to wait exceeded! Will not wait for job execution to finish any longer.'); + if (jobExecutionTimeout <= 0) { + cy.log( + "Time to wait exceeded! Will not wait for job execution to finish any longer." + ); - return cy.wrap({ context: 'commands.helpers::5::waitForJobExecutionCompletion()', action: 'continue' }); - } + return cy.wrap({ + context: + "commands.helpers::5::waitForJobExecutionCompletion()", + action: "continue", + }); + } - cy.log(`Job ${ jobName }, still executing... Retrying after: ${ pollInterval / 1000 } seconds`); + cy.log( + `Job ${jobName}, still executing... Retrying after: ${ + pollInterval / 1000 + } seconds` + ); - return cy.wait(pollInterval) - .then(() => waitForJobExecutionCompletion(teamName, jobName, jobExecutionTimeout - pollInterval, jobExecutionTimeout++)) - }); + return cy + .wait(pollInterval) + .then(() => + waitForJobExecutionCompletion( + teamName, + jobName, + jobExecutionTimeout - pollInterval, + jobExecutionTimeout++ + ) + ); + }); }; const createTestJob = (testJob) => { let teamName = testJob.team; - return cy.request({ - // TODO: use jobsQuery - deprecated jobsList in favour of jobsQuery - url: Cypress.env('data_jobs_url') + `/data-jobs/for-team/${ teamName }/jobs`, - method: 'post', - body: testJob, - auth: { - 'bearer': window.localStorage.getItem('access_token') - }, - failOnStatusCode: false - }).then((response) => { - if (response.status >= 400) { - cy.log(`Http request fail for url:`, `/data-jobs/for-team/${ teamName }/jobs`); - - console.log(`Http request error:`, response); - } + return cy + .request({ + // TODO: use jobsQuery - deprecated jobsList in favour of jobsQuery + url: + Cypress.env("data_jobs_url") + + `/data-jobs/for-team/${teamName}/jobs`, + method: "post", + body: testJob, + auth: { + bearer: window.localStorage.getItem("access_token"), + }, + failOnStatusCode: false, + }) + .then((response) => { + if (response.status >= 400) { + cy.log( + `Http request fail for url:`, + `/data-jobs/for-team/${teamName}/jobs` + ); - return cy.wrap(response); - }); + console.log(`Http request error:`, response); + } + + return cy.wrap(response); + }); }; const deleteTestJobIfExists = (testJob) => { let teamName = testJob.team; let jobName = testJob.job_name; - return cy.request({ - url: Cypress.env('data_jobs_url') + `/data-jobs/for-team/${ teamName }/jobs/${ jobName }`, - method: 'get', - auth: { - 'bearer': window.localStorage.getItem('access_token') - }, - failOnStatusCode: false - }).then((outerResponse) => { - if (outerResponse.status === 200) { - return cy.request({ - url: Cypress.env('data_jobs_url') + `/data-jobs/for-team/${ teamName }/jobs/${ jobName }`, - method: 'delete', + return cy + .request({ + url: + Cypress.env("data_jobs_url") + + `/data-jobs/for-team/${teamName}/jobs/${jobName}`, + method: "get", + auth: { + bearer: window.localStorage.getItem("access_token"), + }, + failOnStatusCode: false, + }) + .then((outerResponse) => { + if (outerResponse.status === 200) { + return cy + .request({ + url: + Cypress.env("data_jobs_url") + + `/data-jobs/for-team/${teamName}/jobs/${jobName}`, + method: "delete", + auth: { + bearer: window.localStorage.getItem("access_token"), + }, + failOnStatusCode: false, + }) + .then((innerResponse) => { + if (innerResponse.status >= 400) { + cy.log( + `Http request fail for url:`, + `/data-jobs/for-team/${teamName}/jobs/${jobName}` + ); + + console.log(`Http request error:`, innerResponse); + } + + return cy.wrap({ + context: + "commands.helpers::1::deleteTestJobIfExists()", + action: "continue", + }); + }); + } else if (outerResponse.status >= 400) { + cy.log( + `Http request fail for url:`, + `/data-jobs/for-team/${teamName}/jobs/${jobName}` + ); + + console.log(`Http request error:`, outerResponse); + } + + return cy.wrap({ + context: "commands.helpers::2::deleteTestJobIfExists()", + action: "continue", + }); + }); +}; + +const deployTestJobIfNotExists = (pathToJobData, pathToJobBinary) => { + return cy.fixture(pathToJobData).then((testJob) => { + const normalizedTestJob = applyGlobalEnvSettings(testJob); + const teamName = normalizedTestJob.team; + const jobName = normalizedTestJob.job_name; + + // Check if data job exists and wether it has deployment or not. + return cy + .request({ + url: + Cypress.env("data_jobs_url") + + `/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments`, + method: "get", auth: { - 'bearer': window.localStorage.getItem('access_token') + bearer: window.localStorage.getItem("access_token"), }, - failOnStatusCode: false - }).then((innerResponse) => { - if (innerResponse.status >= 400) { - cy.log(`Http request fail for url:`, `/data-jobs/for-team/${ teamName }/jobs/${ jobName }`); - - console.log(`Http request error:`, innerResponse); + failOnStatusCode: false, + }) + .then((outerResponse) => { + if ( + outerResponse.status === 200 && + outerResponse.body.length > 0 + ) { + cy.log( + jobName + + " is already existing, therefore skipping creation and deployment." + ); + } else if ( + outerResponse.status === 200 && + outerResponse.body.length === 0 + ) { + cy.log( + jobName + + " exists, but it is not deployed. Deploying..." + ); + + return _deployTestDataJob( + normalizedTestJob, + pathToJobBinary + ); + } else if (outerResponse.status === 404) { + return createTestJob(normalizedTestJob).then( + (innerResponse) => { + if (innerResponse.status === 201) { + return _deployTestDataJob( + normalizedTestJob, + pathToJobBinary + ); + } else { + throw new Error( + "Failed to create job: " + jobName + ); + } + } + ); + } else if (outerResponse.status >= 400) { + cy.log( + `Http request fail for url:`, + `/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments` + ); + + console.log(`Http request error:`, outerResponse); } - return cy.wrap({ context: 'commands.helpers::1::deleteTestJobIfExists()', action: 'continue' }); + return cy.wrap({ + context: "commands.helpers::deployTestJobIfNotExists()", + action: "continue", + }); }); - } else if (outerResponse.status >= 400) { - cy.log(`Http request fail for url:`, `/data-jobs/for-team/${ teamName }/jobs/${ jobName }`); - - console.log(`Http request error:`, outerResponse); - } - - return cy.wrap({ context: 'commands.helpers::2::deleteTestJobIfExists()', action: 'continue' }); }); }; -const deployTestJobIfNotExists = (pathToJobData, pathToJobBinary) => { - return cy.fixture(pathToJobData) - .then((testJob) => { - const normalizedTestJob = applyGlobalEnvSettings(testJob); - const teamName = normalizedTestJob.team; - const jobName = normalizedTestJob.job_name; - - // Check if data job exists and wether it has deployment or not. - return cy.request({ - url: Cypress.env('data_jobs_url') + `/data-jobs/for-team/${ teamName }/jobs/${ jobName }/deployments`, - method: 'get', - auth: { - 'bearer': window.localStorage.getItem('access_token') - }, - failOnStatusCode: false - }).then((outerResponse) => { - if (outerResponse.status === 200 && outerResponse.body.length > 0) { - cy.log(jobName + ' is already existing, therefore skipping creation and deployment.'); - } else if (outerResponse.status === 200 && outerResponse.body.length === 0) { - cy.log(jobName + ' exists, but it is not deployed. Deploying...'); - - return _deployTestDataJob(normalizedTestJob, pathToJobBinary); - } else if (outerResponse.status === 404) { - return createTestJob(normalizedTestJob) - .then((innerResponse) => { - if (innerResponse.status === 201) { - return _deployTestDataJob(normalizedTestJob, pathToJobBinary); - } else { - throw new Error('Failed to create job: ' + jobName); - } - }); - } else if (outerResponse.status >= 400) { - cy.log(`Http request fail for url:`, `/data-jobs/for-team/${ teamName }/jobs/${ jobName }/deployments`); - - console.log(`Http request error:`, outerResponse); - } - - return cy.wrap({ context: 'commands.helpers::deployTestJobIfNotExists()', action: 'continue' }); - }); - }); -}; - function _loadTestEnvironmentVar() { - let testEnv = Cypress?.env('test_environment'); + let testEnv = Cypress?.env("test_environment"); if (!testEnv) { - console.log(`DataPipelines test_environment is not set. Using default: ${ DEFAULT_TEST_ENV_VAR }`); + console.log( + `DataPipelines test_environment is not set. Using default: ${DEFAULT_TEST_ENV_VAR}` + ); testEnv = DEFAULT_TEST_ENV_VAR; } return testEnv; } -function _executeCreateExecutionsForJob(teamName, jobName, waitForJobExecutionTimeout, lastDeployment, executions, numberOfExecutions, counterOfExecutions = 0) { +function _executeCreateExecutionsForJob( + teamName, + jobName, + waitForJobExecutionTimeout, + lastDeployment, + executions, + numberOfExecutions, + counterOfExecutions = 0 +) { const neededExecutions = numberOfExecutions - executions.length; if (counterOfExecutions === 0) { - cy.log(`Submitting ${ neededExecutions } serial executions`); + cy.log(`Submitting ${neededExecutions} serial executions`); } else { - cy.log(`${ neededExecutions - counterOfExecutions } more executions left for executing`) + cy.log( + `${ + neededExecutions - counterOfExecutions + } more executions left for executing` + ); } if (neededExecutions === counterOfExecutions) { - return cy.wrap({ context: 'commands.helpers::1::_executeCreateExecutionsForJob()', action: 'continue' }); + return cy.wrap({ + context: "commands.helpers::1::_executeCreateExecutionsForJob()", + action: "continue", + }); } return _executeJob(teamName, jobName, lastDeployment.id) .then(() => { - return cy.wait(5000) - .then(() => cy.wrap({ context: 'commands.helpers::2::_executeCreateExecutionsForJob()', action: 'continue' })); + return cy.wait(5000).then(() => + cy.wrap({ + context: + "commands.helpers::2::_executeCreateExecutionsForJob()", + action: "continue", + }) + ); }) .then(() => { - return waitForJobExecutionCompletion(teamName, jobName, waitForJobExecutionTimeout); + return waitForJobExecutionCompletion( + teamName, + jobName, + waitForJobExecutionTimeout + ); }) .then(() => { return _executeCreateExecutionsForJob( @@ -270,45 +424,49 @@ function _executeCreateExecutionsForJob(teamName, jobName, waitForJobExecutionTi } function _getJobExecutions(teamName, jobName) { - cy.log(`Fetching Job executions for Job "${ jobName }"`); + cy.log(`Fetching Job executions for Job "${jobName}"`); return cy .request({ - url: `/data-jobs/for-team/${ teamName }/jobs/${ jobName }/executions`, - method: 'get', + url: `/data-jobs/for-team/${teamName}/jobs/${jobName}/executions`, + method: "get", auth: { - 'bearer': window.localStorage.getItem('access_token') - } + bearer: window.localStorage.getItem("access_token"), + }, }) .then((response) => { if (response.status !== 200) { - cy.log(`Getting Job executions failed. Status: ${ response.status }; Message: ${ response.body }`); + cy.log( + `Getting Job executions failed. Status: ${response.status}; Message: ${response.body}` + ); return cy.wrap([]); } return cy.wrap( - response.body && response.body.length - ? response.body - : [] + response.body && response.body.length ? response.body : [] ); }); } function _getJobLastDeployment(teamName, jobName) { - cy.log(`Fetching Job deployments for Job "${ jobName }"`); + cy.log(`Fetching Job deployments for Job "${jobName}"`); return cy .request({ - url: Cypress.env('data_jobs_url') + `/data-jobs/for-team/${ teamName }/jobs/${ jobName }/deployments`, - method: 'get', + url: + Cypress.env("data_jobs_url") + + `/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments`, + method: "get", auth: { - 'bearer': window.localStorage.getItem('access_token') - } + bearer: window.localStorage.getItem("access_token"), + }, }) .then((response) => { if (response.status !== 200) { - cy.log(`Getting Job deployments failed. Status: ${ response.status }; Message: ${ response.body }`); + cy.log( + `Getting Job deployments failed. Status: ${response.status}; Message: ${response.body}` + ); return cy.wrap(null); } @@ -322,29 +480,40 @@ function _getJobLastDeployment(teamName, jobName) { } function _executeJob(teamName, jobName, deploymentId) { - cy.log(`Submitting execution for Job "${ jobName }"`); - - return cy.request({ - url: Cypress.env('data_jobs_url') + `/data-jobs/for-team/${ teamName }/jobs/${ jobName }/deployments/${ deploymentId }/executions`, - method: 'post', - auth: { - 'bearer': window.localStorage.getItem('access_token') - }, - body: {} - }).then((response) => { - if (response.status >= 400) { - cy.log(`Executing Job failed. Status: ${ response.status }; Message: ${ response.body }`); - } + cy.log(`Submitting execution for Job "${jobName}"`); - return cy.wrap({ context: 'commands.helpers::_executeJob()', action: 'continue' }); - }); + return cy + .request({ + url: + Cypress.env("data_jobs_url") + + `/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments/${deploymentId}/executions`, + method: "post", + auth: { + bearer: window.localStorage.getItem("access_token"), + }, + body: {}, + }) + .then((response) => { + if (response.status >= 400) { + cy.log( + `Executing Job failed. Status: ${response.status}; Message: ${response.body}` + ); + } + + return cy.wrap({ + context: "commands.helpers::_executeJob()", + action: "continue", + }); + }); } function _compareDatesAsc(left, right) { const leftStartTime = left.start_time ? left.start_time : 0; const rightStartTime = right.start_time ? right.start_time : 0; - return new Date(leftStartTime).getTime() - new Date(rightStartTime).getTime(); + return ( + new Date(leftStartTime).getTime() - new Date(rightStartTime).getTime() + ); } function _deployTestDataJob(testJob, pathToJobBinary) { @@ -352,44 +521,69 @@ function _deployTestDataJob(testJob, pathToJobBinary) { const jobName = testJob.job_name; const waitForJobDeploymentTimeout = 300000; // Wait up to 5 min for deployment to complete. - cy.log(`Deploying Job ${ jobName }`); + cy.log(`Deploying Job ${jobName}`); // Upload Data Job code - return cy.fixture(pathToJobBinary, 'binary') - .then((zippedDataJob) => { - return cy.request({ - url: Cypress.env('data_jobs_url') + '/data-jobs/for-team/' + teamName + '/jobs/' + jobName + '/sources', - method: 'post', - auth: { - 'bearer': window.localStorage.getItem('access_token') - }, - body: Cypress.Blob.binaryStringToBlob(zippedDataJob) - }).then((response1) => { - let jsonResponse = JSON.parse(Cypress.Blob.arrayBufferToBinaryString(response1.body)); - - // Deploy data job - return cy.request({ - url: Cypress.env('data_jobs_url') + '/data-jobs/for-team/' + teamName + '/jobs/' + jobName + '/deployments', - method: 'post', - auth: { - 'bearer': window.localStorage.getItem('access_token') - }, - body: { - job_version: jsonResponse.version_sha, - mode: 'release', - enabled: true - } - }).then((response2) => { - if (response2.status === 202) { - cy.log(`Job: ${ jobName } deployment in progress. Waiting for deployment to complete`); - - return _waitForDeploymentToFinish(testJob, waitForJobDeploymentTimeout); - } - - return cy.wrap({ context: 'commands.helpers::_deployTestDataJob()', action: 'continue' }); - }); - }); - }); + return cy.fixture(pathToJobBinary, "binary").then((zippedDataJob) => { + return cy + .request({ + url: + Cypress.env("data_jobs_url") + + "/data-jobs/for-team/" + + teamName + + "/jobs/" + + jobName + + "/sources", + method: "post", + auth: { + bearer: window.localStorage.getItem("access_token"), + }, + body: Cypress.Blob.binaryStringToBlob(zippedDataJob), + }) + .then((response1) => { + let jsonResponse = JSON.parse( + Cypress.Blob.arrayBufferToBinaryString(response1.body) + ); + + // Deploy data job + return cy + .request({ + url: + Cypress.env("data_jobs_url") + + "/data-jobs/for-team/" + + teamName + + "/jobs/" + + jobName + + "/deployments", + method: "post", + auth: { + bearer: window.localStorage.getItem("access_token"), + }, + body: { + job_version: jsonResponse.version_sha, + mode: "release", + enabled: true, + }, + }) + .then((response2) => { + if (response2.status === 202) { + cy.log( + `Job: ${jobName} deployment in progress. Waiting for deployment to complete` + ); + + return _waitForDeploymentToFinish( + testJob, + waitForJobDeploymentTimeout + ); + } + + return cy.wrap({ + context: "commands.helpers::_deployTestDataJob()", + action: "continue", + }); + }); + }); + }); } function _waitForDeploymentToFinish(testJob, timeout) { @@ -397,30 +591,55 @@ function _waitForDeploymentToFinish(testJob, timeout) { const jobName = testJob.job_name; const waitInterval = 5000; - return cy.request({ - url: Cypress.env('data_jobs_url') + '/data-jobs/for-team/' + teamName + '/jobs/' + jobName + '/deployments', - method: 'get', - auth: { - 'bearer': window.localStorage.getItem('access_token') - } - }).then((resp) => { - if (resp.status === 200 && resp.body.length > 0) { - cy.log('Job deployment finished!'); - - return cy.wrap({ context: 'commands.helpers::1::_waitForDeploymentToFinish()', action: 'continue' }); - } + return cy + .request({ + url: + Cypress.env("data_jobs_url") + + "/data-jobs/for-team/" + + teamName + + "/jobs/" + + jobName + + "/deployments", + method: "get", + auth: { + bearer: window.localStorage.getItem("access_token"), + }, + }) + .then((resp) => { + if (resp.status === 200 && resp.body.length > 0) { + cy.log("Job deployment finished!"); + + return cy.wrap({ + context: + "commands.helpers::1::_waitForDeploymentToFinish()", + action: "continue", + }); + } - if (timeout <= 0) { - cy.log('Time to wait exceeded! Will not wait for job deployment to finish any longer.'); + if (timeout <= 0) { + cy.log( + "Time to wait exceeded! Will not wait for job deployment to finish any longer." + ); - return cy.wrap({ context: 'commands.helpers::2::_waitForDeploymentToFinish()', action: 'continue' }); - } + return cy.wrap({ + context: + "commands.helpers::2::_waitForDeploymentToFinish()", + action: "continue", + }); + } - cy.log(`Job ${ jobName }, still not deployed.. retrying after: ${ waitInterval / 1000 } seconds`); + cy.log( + `Job ${jobName}, still not deployed.. retrying after: ${ + waitInterval / 1000 + } seconds` + ); - return cy.wait(waitInterval) - .then(() => _waitForDeploymentToFinish(testJob, timeout - waitInterval)); - }) + return cy + .wait(waitInterval) + .then(() => + _waitForDeploymentToFinish(testJob, timeout - waitInterval) + ); + }); } module.exports = { @@ -429,5 +648,5 @@ module.exports = { waitForJobExecutionCompletion, createTestJob, deleteTestJobIfExists, - deployTestJobIfNotExists + deployTestJobIfNotExists, }; diff --git a/projects/frontend/data-pipelines/gui/e2e/support/index.js b/projects/frontend/data-pipelines/gui/e2e/support/index.js index dfe8fbb0bc..ff4fb03a64 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/index.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/index.js @@ -3,16 +3,16 @@ * SPDX-License-Identifier: Apache-2.0 */ -import './commands' +import "./commands"; -require('@neuralegion/cypress-har-generator/commands'); -require('cypress-grep')(); -require('cypress-terminal-report/src/installLogsCollector')(); +require("@neuralegion/cypress-har-generator/commands"); +require("cypress-grep")(); +require("cypress-terminal-report/src/installLogsCollector")(); Cypress.Server.defaults({ delay: 500, force404: false, ignore: (xhr) => { return true; - } -}) + }, +}); diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/app/app.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/app/app.po.js index 6a0e3e6cbb..d584a5afc9 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/pages/app/app.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/pages/app/app.po.js @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DataPipelinesBasePO } from '../../application/data-pipelines-base.po'; +import { DataPipelinesBasePO } from "../../application/data-pipelines-base.po"; export class AppPage extends DataPipelinesBasePO { static getPage() { @@ -11,10 +11,10 @@ export class AppPage extends DataPipelinesBasePO { } static navigateTo() { - cy.visit('/'); + cy.visit("/"); } getMainTitle() { - return cy.get('[data-cy=app-main-title]'); + return cy.get("[data-cy=app-main-title]"); } } diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/app/getting-started/data-jobs-health-panel-component.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/app/getting-started/data-jobs-health-panel-component.po.js index 13fcc897f5..29382d60fd 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/pages/app/getting-started/data-jobs-health-panel-component.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/pages/app/getting-started/data-jobs-health-panel-component.po.js @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { GettingStartedPage } from './getting-started.po'; +import { GettingStartedPage } from "./getting-started.po"; export class DataJobsHealthPanelComponentPO extends GettingStartedPage { /** @@ -21,7 +21,7 @@ export class DataJobsHealthPanelComponentPO extends GettingStartedPage { * @returns {Cypress.Chainable>} */ getExecutionStatusGaugeWidget() { - return cy.get('[data-cy=dp-data-jobs-status-gauge-widget]'); + return cy.get("[data-cy=dp-data-jobs-status-gauge-widget]"); } /** @@ -31,11 +31,11 @@ export class DataJobsHealthPanelComponentPO extends GettingStartedPage { */ getExecutionsSuccessPercentage() { return this.getExecutionStatusGaugeWidget() - .should('exist') - .find('[data-cy=dp-jobs-executions-status-gauge-widget-percentage]') - .invoke('text') - .invoke('replace', /%/, '') - .then((value) => +value); + .should("exist") + .find("[data-cy=dp-jobs-executions-status-gauge-widget-percentage]") + .invoke("text") + .invoke("replace", /%/, "") + .then((value) => +value); } /** @@ -45,11 +45,11 @@ export class DataJobsHealthPanelComponentPO extends GettingStartedPage { */ getNumberOfFailedExecutions() { return this.getExecutionStatusGaugeWidget() - .should('exist') - .find('[data-cy=dp-jobs-executions-status-gauge-widget-failed]') - .invoke('text') - .invoke('replace', /\s\w+/, '') - .then((value) => +value); + .should("exist") + .find("[data-cy=dp-jobs-executions-status-gauge-widget-failed]") + .invoke("text") + .invoke("replace", /\s\w+/, "") + .then((value) => +value); } /** @@ -59,11 +59,11 @@ export class DataJobsHealthPanelComponentPO extends GettingStartedPage { */ getExecutionsTotal() { return this.getExecutionStatusGaugeWidget() - .should('exist') - .find('[data-cy=dp-jobs-executions-status-gauge-widget-total]') - .invoke('text') - .invoke('replace', /\s\w+/, '') - .then((value) => +value); + .should("exist") + .find("[data-cy=dp-jobs-executions-status-gauge-widget-total]") + .invoke("text") + .invoke("replace", /\s\w+/, "") + .then((value) => +value); } /** @@ -72,7 +72,7 @@ export class DataJobsHealthPanelComponentPO extends GettingStartedPage { * @returns {Cypress.Chainable>} */ getFailingJobsWidget() { - return cy.get('[data-cy=dp-failed-data-jobs-widget]'); + return cy.get("[data-cy=dp-failed-data-jobs-widget]"); } /** @@ -82,8 +82,8 @@ export class DataJobsHealthPanelComponentPO extends GettingStartedPage { */ getAllFailingJobs() { return this.getFailingJobsWidget() - .should('exist') - .find('[data-cy=dp-failed-data-jobs-widget-job-name-link]'); + .should("exist") + .find("[data-cy=dp-failed-data-jobs-widget-job-name-link]"); } /** @@ -92,7 +92,7 @@ export class DataJobsHealthPanelComponentPO extends GettingStartedPage { * @returns {Cypress.Chainable>} */ getMostRecentFailingJobsExecutionsWidget() { - return cy.get('[data-cy=dp-failed-data-jobs-executions-widget]'); + return cy.get("[data-cy=dp-failed-data-jobs-executions-widget]"); } /** @@ -102,18 +102,16 @@ export class DataJobsHealthPanelComponentPO extends GettingStartedPage { */ getAllMostRecentFailingJobsExecutions() { return this.getMostRecentFailingJobsExecutionsWidget() - .should('exist') - .find('[data-cy=dp-failed-data-jobs-executions-widget-job-name-link]'); + .should("exist") + .find( + "[data-cy=dp-failed-data-jobs-executions-widget-job-name-link]" + ); } // Actions navigateToFailingJobDetails(jobName) { - this._navigateToDataJob( - this.getAllFailingJobs(), - jobName, - 3 - ); + this._navigateToDataJob(this.getAllFailingJobs(), jobName, 3); } navigateToMostRecentFailingJobExecutions(jobName) { @@ -149,7 +147,7 @@ export class DataJobsHealthPanelComponentPO extends GettingStartedPage { return foundElement; }) - .should('exist') + .should("exist") .click({ force: true }); this.waitForBackendRequestCompletion(numberOfReqToWait); diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/app/getting-started/getting-started.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/app/getting-started/getting-started.po.js index 0f23a016bb..69c02c5bb9 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/pages/app/getting-started/getting-started.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/pages/app/getting-started/getting-started.po.js @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DataPipelinesBasePO } from '../../../application/data-pipelines-base.po'; +import { DataPipelinesBasePO } from "../../../application/data-pipelines-base.po"; export class GettingStartedPage extends DataPipelinesBasePO { /** @@ -12,7 +12,7 @@ export class GettingStartedPage extends DataPipelinesBasePO { * @returns {GettingStartedPage} */ static navigateTo() { - cy.visit('/get-started'); + cy.visit("/get-started"); this.waitForBackendRequestCompletion(3); @@ -36,7 +36,7 @@ export class GettingStartedPage extends DataPipelinesBasePO { * @returns {Cypress.Chainable>} */ getMainTitle() { - return cy.get('[data-cy=getting-started-main-title]'); + return cy.get("[data-cy=getting-started-main-title]"); } /** @@ -45,6 +45,6 @@ export class GettingStartedPage extends DataPipelinesBasePO { * @returns {Cypress.Chainable>} */ getDataJobsHealthPanel() { - return cy.get('[data-cy=dp-data-jobs-health-panel]'); + return cy.get("[data-cy=dp-data-jobs-health-panel]"); } } diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/app/lib/explore/data-job-details.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/app/lib/explore/data-job-details.po.js index 222bdee83a..9b0a6ab317 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/pages/app/lib/explore/data-job-details.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/pages/app/lib/explore/data-job-details.po.js @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DataJobDetailsBasePO } from '../../../../application/data-job-details-base.po'; +import { DataJobDetailsBasePO } from "../../../../application/data-job-details-base.po"; export class DataJobExploreDetailsPage extends DataJobDetailsBasePO { static getPage() { @@ -11,6 +11,6 @@ export class DataJobExploreDetailsPage extends DataJobDetailsBasePO { } static navigateTo(teamName, jobName) { - return super.navigateTo('explore', teamName, jobName); + return super.navigateTo("explore", teamName, jobName); } } diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/app/lib/explore/data-jobs.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/app/lib/explore/data-jobs.po.js index 373f0c96e4..48db089e76 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/pages/app/lib/explore/data-jobs.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/pages/app/lib/explore/data-jobs.po.js @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DataJobsBasePO } from '../../../../application/data-jobs-base.po'; +import { DataJobsBasePO } from "../../../../application/data-jobs-base.po"; export class DataJobsExplorePage extends DataJobsBasePO { static getPage() { @@ -11,44 +11,53 @@ export class DataJobsExplorePage extends DataJobsBasePO { } static navigateTo() { - return super.navigateTo('[data-cy=navigation-link-explore-datajobs]'); + return super.navigateTo("[data-cy=navigation-link-explore-datajobs]"); } // Selectors getMainTitle() { - return cy.get('[data-cy=data-pipelines-explore-page-main-title]'); + return cy.get("[data-cy=data-pipelines-explore-page-main-title]"); } getDataGrid() { - return cy.get('[data-cy=data-pipelines-explore-grid]'); + return cy.get("[data-cy=data-pipelines-explore-grid]"); } getDataGridCell(content) { - return cy.get('[id^="clr-dg-row"] > .datagrid-row-scrollable > .datagrid-scrolling-cells > .ng-star-inserted') - .contains(new RegExp(`^${ content }$`)); + return cy + .get( + '[id^="clr-dg-row"] > .datagrid-row-scrollable > .datagrid-scrolling-cells > .ng-star-inserted' + ) + .contains(new RegExp(`^${content}$`)); } getDataGridNavigateBtn(team, job) { - return cy.get('[data-cy=data-pipelines-explore-grid-details-link][data-job-params="' + team + ';' + job + '"]'); + return cy.get( + '[data-cy=data-pipelines-explore-grid-details-link][data-job-params="' + + team + + ";" + + job + + '"]' + ); } getDataGridNameFilter() { return this.getHeaderColumnJobName() - .should('exist') - .find('clr-dg-filter button'); + .should("exist") + .find("clr-dg-filter button"); } getDataGridNameFilterInput() { - return cy.get('div.datagrid-filter input'); + return cy.get("div.datagrid-filter input"); } getDataGridRefreshButton() { - return cy.get('[data-cy=data-pipelines-explore-refresh-btn]'); + return cy.get("[data-cy=data-pipelines-explore-refresh-btn]"); } getDataGridSearchInput() { - return cy.get('[data-test-id=search-input]'); + return cy.get("[data-test-id=search-input]"); } getDataGridClearSearchButton() { @@ -59,7 +68,7 @@ export class DataJobsExplorePage extends DataJobsBasePO { refreshDataGrid() { this.getDataGridRefreshButton() - .should('be.visible') + .should("be.visible") .click({ force: true }); this.waitForBackendRequestCompletion(); @@ -68,9 +77,7 @@ export class DataJobsExplorePage extends DataJobsBasePO { } searchByJobName(jobName) { - this.getDataGridSearchInput() - .should('be.visible') - .type(jobName); + this.getDataGridSearchInput().should("be.visible").type(jobName); this.waitForBackendRequestCompletion(); @@ -78,9 +85,7 @@ export class DataJobsExplorePage extends DataJobsBasePO { } clearSearchField() { - this.getDataGridSearchInput() - .should('be.visible') - .clear(); + this.getDataGridSearchInput().should("be.visible").clear(); this.waitForBackendRequestCompletion(); @@ -89,7 +94,7 @@ export class DataJobsExplorePage extends DataJobsBasePO { clearSearchFieldWithButton() { this.getDataGridClearSearchButton() - .should('be.visible') + .should("be.visible") .click({ force: true }); this.waitForBackendRequestCompletion(); @@ -98,16 +103,11 @@ export class DataJobsExplorePage extends DataJobsBasePO { } filterByJobName(jobName) { - this.getDataGridNameFilter() - .click({ force: true }); + this.getDataGridNameFilter().click({ force: true }); - this.getDataGridNameFilterInput() - .should('be.visible') - .type(jobName); + this.getDataGridNameFilterInput().should("be.visible").type(jobName); - this.getMainTitle() - .should('be.visible') - .click({ force: true }); + this.getMainTitle().should("be.visible").click({ force: true }); this.waitForBackendRequestCompletion(); @@ -117,7 +117,7 @@ export class DataJobsExplorePage extends DataJobsBasePO { openJobDetails(team, jobName) { this.getDataGridNavigateBtn(team, jobName) .scrollIntoView() - .should('exist') + .should("exist") .click({ force: true }); this.waitForBackendRequestCompletion(); diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/app/lib/manage/data-job-details.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/app/lib/manage/data-job-details.po.js index f0ac3c8b2b..f5be50cc34 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/pages/app/lib/manage/data-job-details.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/pages/app/lib/manage/data-job-details.po.js @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DataJobDetailsBasePO } from '../../../../application/data-job-details-base.po'; +import { DataJobDetailsBasePO } from "../../../../application/data-job-details-base.po"; export class DataJobManageDetailsPage extends DataJobDetailsBasePO { static getPage() { @@ -11,113 +11,126 @@ export class DataJobManageDetailsPage extends DataJobDetailsBasePO { } static navigateTo(teamName, jobName) { - return super.navigateTo('manage', teamName, jobName); + return super.navigateTo("manage", teamName, jobName); } // Deployment methods // Acceptable values are "not-deployed", "enabled", "disabled" getDeploymentStatus(status) { - return cy.get('[data-cy=data-pipelines-job-details-status-' + status + ']'); + return cy.get( + "[data-cy=data-pipelines-job-details-status-" + status + "]" + ); } // Description methods getDescription() { - return cy.get('[data-cy=data-pipelines-data-job-details-description] .form-section-readonly'); + return cy.get( + "[data-cy=data-pipelines-data-job-details-description] .form-section-readonly" + ); } getDescriptionEditButton() { - return cy.get('[data-cy=data-pipelines-data-job-details-description] .form-section-header > .btn'); + return cy.get( + "[data-cy=data-pipelines-data-job-details-description] .form-section-header > .btn" + ); } getDescriptionEditTextarea() { - return cy.get('[data-cy=data-pipelines-data-job-details-description] textarea'); + return cy.get( + "[data-cy=data-pipelines-data-job-details-description] textarea" + ); } getDescriptionSaveButton() { - return cy.get('[data-cy=data-pipelines-data-job-details-description] button:contains(Save)') + return cy.get( + "[data-cy=data-pipelines-data-job-details-description] button:contains(Save)" + ); } openDescription() { - this.getDescriptionEditButton() - .click({ force: true }); + this.getDescriptionEditButton().click({ force: true }); } enterDescriptionDetails(description) { - this.getDescriptionEditTextarea() - .clear() - .type(description) + this.getDescriptionEditTextarea().clear().type(description); } saveDescription() { - this.getDescriptionSaveButton() - .click({ force: true }); + this.getDescriptionSaveButton().click({ force: true }); - this.waitForBackendRequestCompletion() + this.waitForBackendRequestCompletion(); } // Schedule methods getSchedule() { - return cy.get('[data-cy=data-pipelines-data-job-details-schedule] .form-section-readonly'); + return cy.get( + "[data-cy=data-pipelines-data-job-details-schedule] .form-section-readonly" + ); } // Disable/Enable methods getStatusEditButton() { - return cy.get('[data-cy=data-pipelines-data-job-details-status] .form-section-header > .btn') + return cy.get( + "[data-cy=data-pipelines-data-job-details-status] .form-section-header > .btn" + ); } getStatusSaveButton() { - return cy.get('[data-cy=data-pipelines-data-job-details-status] button:contains(Save)'); + return cy.get( + "[data-cy=data-pipelines-data-job-details-status] button:contains(Save)" + ); } changeStatus(currentStatus) { - const newStatus = currentStatus.trim().toLowerCase() === 'enabled' - ? 'disable' - : 'enable'; - - return cy.get(`[data-cy=data-pipelines-data-job-details-status-${ newStatus }]`) - .should('exist') - .check({ force: true }); + const newStatus = + currentStatus.trim().toLowerCase() === "enabled" + ? "disable" + : "enable"; + + return cy + .get( + `[data-cy=data-pipelines-data-job-details-status-${newStatus}]` + ) + .should("exist") + .check({ force: true }); } toggleJobStatus() { - cy.get('[data-cy=data-pipelines-job-details-status]') - .invoke('text') - .then((jobStatus) => { - this.getStatusEditButton() - .scrollIntoView() - .click({ force: true }); + cy.get("[data-cy=data-pipelines-job-details-status]") + .invoke("text") + .then((jobStatus) => { + this.getStatusEditButton() + .scrollIntoView() + .click({ force: true }); - this.changeStatus(jobStatus); + this.changeStatus(jobStatus); - this.waitForClickThinkingTime(); + this.waitForClickThinkingTime(); - this.getStatusSaveButton() - .scrollIntoView() - .click({ force: true }); + this.getStatusSaveButton() + .scrollIntoView() + .click({ force: true }); - let newStatus = jobStatus === 'Enabled' - ? 'Disabled' - : 'Enabled'; + let newStatus = + jobStatus === "Enabled" ? "Disabled" : "Enabled"; - this.waitForBackendRequestCompletion(); + this.waitForBackendRequestCompletion(); - this.getToastTitle() - .should('exist') - .should('contain.text', 'Status update completed'); + this.getToastTitle() + .should("exist") + .should("contain.text", "Status update completed"); - this.waitForActionThinkingTime(); // Natural wait for User action + this.waitForActionThinkingTime(); // Natural wait for User action - this.getToastDismiss() - .should('exist') - .click({ force: true }); + this.getToastDismiss().should("exist").click({ force: true }); - cy.get('[data-cy=data-pipelines-job-details-status]') - .scrollIntoView() - .should('have.text', newStatus); - }) + cy.get("[data-cy=data-pipelines-job-details-status]") + .scrollIntoView() + .should("have.text", newStatus); + }); } } diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/app/lib/manage/data-job-executions.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/app/lib/manage/data-job-executions.po.js index af3c744c6a..9a4b7d80c9 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/pages/app/lib/manage/data-job-executions.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/pages/app/lib/manage/data-job-executions.po.js @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DataJobBasePO } from '../../../../application/data-job-base.po'; +import { DataJobBasePO } from "../../../../application/data-job-base.po"; export class DataJobManageExecutionsPage extends DataJobBasePO { static getPage() { @@ -11,7 +11,9 @@ export class DataJobManageExecutionsPage extends DataJobBasePO { } static navigateTo(teamName, jobName) { - return super.navigateToUrl(`/manage/data-jobs/${ teamName }/${ jobName }/executions`); + return super.navigateToUrl( + `/manage/data-jobs/${teamName}/${jobName}/executions` + ); } /* Utils */ @@ -23,12 +25,15 @@ export class DataJobManageExecutionsPage extends DataJobBasePO { * - val=45s */ convertStringContentToSeconds(val) { - const params = val.split(' '); + const params = val.split(" "); if (params.length === 2) { - return parseInt(params[0].trim().replace(/m$/, ''), 10) * 60 + parseInt(params[1].trim().replace(/s$/, ''), 10); + return ( + parseInt(params[0].trim().replace(/m$/, ""), 10) * 60 + + parseInt(params[1].trim().replace(/s$/, ""), 10) + ); } else { - return parseInt(params[0].trim().replace(/s$/, ''), 10); + return parseInt(params[0].trim().replace(/s$/, ""), 10); } } @@ -37,231 +42,241 @@ export class DataJobManageExecutionsPage extends DataJobBasePO { // General getExecRefreshBtn() { - return cy.get('[data-cy=data-pipelines-job-executions-refresh-btn'); + return cy.get("[data-cy=data-pipelines-job-executions-refresh-btn"); } getExecLoadingSpinner() { - return cy.get('[data-cy=data-pipelines-job-executions-loading-spinner]'); + return cy.get( + "[data-cy=data-pipelines-job-executions-loading-spinner]" + ); } // Charts getStatusChart() { - return cy.get('[data-cy=data-pipelines-job-executions-status-chart]'); + return cy.get("[data-cy=data-pipelines-job-executions-status-chart]"); } getDurationChart() { - return cy.get('[data-cy=data-pipelines-job-executions-duration-chart]'); + return cy.get("[data-cy=data-pipelines-job-executions-duration-chart]"); } getTimePeriod() { - return cy.get('[data-cy=data-pipelines-job-executions-time-period]'); + return cy.get("[data-cy=data-pipelines-job-executions-time-period]"); } // DataGrid getDataGrid() { - return cy.get('[data-cy=data-pipelines-job-executions-datagrid]'); + return cy.get("[data-cy=data-pipelines-job-executions-datagrid]"); } getDataGridPopupFilter() { - return cy.get('.datagrid-filter.clr-popover-content'); + return cy.get(".datagrid-filter.clr-popover-content"); } getDataGridInputFilter() { - return this.getDataGridPopupFilter() - .should('exist') - .find('input'); + return this.getDataGridPopupFilter().should("exist").find("input"); } getDataGridPopupFilterCloseBtn() { - return this.getDataGridPopupFilter() - .should('exist') - .find('.close'); + return this.getDataGridPopupFilter().should("exist").find(".close"); } getDataGridSpinner() { - return this.getDataGrid() - .should('exist') - .find('.datagrid-spinner'); + return this.getDataGrid().should("exist").find(".datagrid-spinner"); } // Header getDataGridExecStatusHeader() { return this.getDataGrid() - .should('exist') - .find('[data-cy=data-pipelines-job-executions-status-header]'); + .should("exist") + .find("[data-cy=data-pipelines-job-executions-status-header]"); } getDataGridExecStatusFilterOpenerBtn() { return this.getDataGridExecStatusHeader() - .should('exist') - .find('.datagrid-filter-toggle'); + .should("exist") + .find(".datagrid-filter-toggle"); } getDataGridExecStatusFilters() { return this.getDataGridPopupFilter() - .should('exist') - .find('[data-cy=data-pipelines-job-executions-status-filters]'); + .should("exist") + .find("[data-cy=data-pipelines-job-executions-status-filters]"); } getDataGridExecTypeHeader() { return this.getDataGrid() - .should('exist') - .find('[data-cy=data-pipelines-job-executions-type-header]'); + .should("exist") + .find("[data-cy=data-pipelines-job-executions-type-header]"); } getDataGridExecTypeFilterOpenerBtn() { return this.getDataGridExecTypeHeader() - .should('exist') - .find('.datagrid-filter-toggle'); + .should("exist") + .find(".datagrid-filter-toggle"); } getDataGridExecTypeFilters() { return this.getDataGridPopupFilter() - .should('exist') - .find('[data-cy=data-pipelines-job-executions-type-filters]'); + .should("exist") + .find("[data-cy=data-pipelines-job-executions-type-filters]"); } getDataGridExecDurationHeader() { return this.getDataGrid() - .should('exist') - .find('[data-cy=data-pipelines-job-executions-duration-header]'); + .should("exist") + .find("[data-cy=data-pipelines-job-executions-duration-header]"); } getDataGridExecDurationSortBtn() { return this.getDataGridExecDurationHeader() - .should('exist') - .find('.datagrid-column-title'); + .should("exist") + .find(".datagrid-column-title"); } getDataGridExecStartHeader() { return this.getDataGrid() - .should('exist') - .find('[data-cy=data-pipelines-job-executions-start-header]'); + .should("exist") + .find("[data-cy=data-pipelines-job-executions-start-header]"); } getDataGridExecStartSortBtn() { return this.getDataGridExecStartHeader() - .should('exist') - .find('.datagrid-column-title'); + .should("exist") + .find(".datagrid-column-title"); } getDataGridExecEndHeader() { return this.getDataGrid() - .should('exist') - .find('[data-cy=data-pipelines-job-executions-end-header]'); + .should("exist") + .find("[data-cy=data-pipelines-job-executions-end-header]"); } getDataGridExecEndSortBtn() { return this.getDataGridExecEndHeader() - .should('exist') - .find('.datagrid-column-title'); + .should("exist") + .find(".datagrid-column-title"); } getDataGridExecIDHeader() { return this.getDataGrid() - .should('exist') - .find('[data-cy=data-pipelines-job-executions-id-header]'); + .should("exist") + .find("[data-cy=data-pipelines-job-executions-id-header]"); } getDataGridExecIDFilterOpenerBtn() { return this.getDataGridExecIDHeader() - .should('exist') - .find('.datagrid-filter-toggle'); + .should("exist") + .find(".datagrid-filter-toggle"); } getDataGridExecVersionHeader() { return this.getDataGrid() - .should('exist') - .find('[data-cy=data-pipelines-job-executions-version-header]'); + .should("exist") + .find("[data-cy=data-pipelines-job-executions-version-header]"); } getDataGridExecVersionFilterOpenerBtn() { return this.getDataGridExecVersionHeader() - .should('exist') - .find('.datagrid-filter-toggle'); + .should("exist") + .find(".datagrid-filter-toggle"); } // Rows and Cells getDataGridRows() { return this.getDataGrid() - .should('exist') - .find('clr-dg-row.datagrid-row'); + .should("exist") + .find("clr-dg-row.datagrid-row"); } getDataGridRow(rowIndex) { return this.getDataGridRows() - .should('have.length.gte', rowIndex - 1) - .then((rows) => Array.from(rows)[rowIndex - 1]); + .should("have.length.gte", rowIndex - 1) + .then((rows) => Array.from(rows)[rowIndex - 1]); } getDataGridCells(rowIndex) { return this.getDataGridRow(rowIndex) - .should('exist') - .find('clr-dg-cell.datagrid-cell'); + .should("exist") + .find("clr-dg-cell.datagrid-cell"); } getDataGridCellByIndex(rowIndex, cellIndex) { if (rowIndex) { return this.getDataGridCells(rowIndex) - .should('have.length.gte', cellIndex - 1) - .then((cells) => Array.from(cells)[cellIndex - 1]); + .should("have.length.gte", cellIndex - 1) + .then((cells) => Array.from(cells)[cellIndex - 1]); } return this.getDataGridRows() - .should('have.length.gte', 0) - .then(($rows) => { - const _rows = $rows.reduce((accumulator, row) => { - const _cells = Array.from(row.querySelectorAll('clr-dg-cell.datagrid-cell')); + .should("have.length.gte", 0) + .then(($rows) => { + const _rows = $rows.reduce((accumulator, row) => { + const _cells = Array.from( + row.querySelectorAll("clr-dg-cell.datagrid-cell") + ); - if (_cells[cellIndex - 1]) { - accumulator.push(_cells[cellIndex - 1]); - } + if (_cells[cellIndex - 1]) { + accumulator.push(_cells[cellIndex - 1]); + } - return accumulator; - }, []); + return accumulator; + }, []); - return _rows; - }) + return _rows; + }); } getDataGridCellByIdentifier(rowIndex, identifier) { - return this.getDataGridRow(rowIndex) - .should('exist') - .find(identifier) + return this.getDataGridRow(rowIndex).should("exist").find(identifier); } getDataGridExecTypeCell(rowIndex) { - return this.getDataGridCellByIdentifier(rowIndex, '[data-cy=data-pipelines-job-executions-type-cell]'); + return this.getDataGridCellByIdentifier( + rowIndex, + "[data-cy=data-pipelines-job-executions-type-cell]" + ); } getDataGridExecTypeContainer(rowIndex) { return this.getDataGridExecTypeCell(rowIndex) - .should('exist') - .find('[data-cy=data-pipelines-job-executions-type-container]'); + .should("exist") + .find("[data-cy=data-pipelines-job-executions-type-container]"); } getDataGridExecDurationCell(rowIndex) { - return this.getDataGridCellByIdentifier(rowIndex, '[data-cy=data-pipelines-job-executions-duration-cell]'); + return this.getDataGridCellByIdentifier( + rowIndex, + "[data-cy=data-pipelines-job-executions-duration-cell]" + ); } getDataGridExecStartCell(rowIndex) { - return this.getDataGridCellByIdentifier(rowIndex, '[data-cy=data-pipelines-job-executions-start-cell]'); + return this.getDataGridCellByIdentifier( + rowIndex, + "[data-cy=data-pipelines-job-executions-start-cell]" + ); } getDataGridExecEndCell(rowIndex) { - return this.getDataGridCellByIdentifier(rowIndex, '[data-cy=data-pipelines-job-executions-end-cell]'); + return this.getDataGridCellByIdentifier( + rowIndex, + "[data-cy=data-pipelines-job-executions-end-cell]" + ); } // Pagination getDataGridPagination() { return this.getDataGrid() - .should('exist') - .find('[data-cy=data-pipelines-job-executions-datagrid-pagination]'); + .should("exist") + .find( + "[data-cy=data-pipelines-job-executions-datagrid-pagination]" + ); } /* Actions */ @@ -269,32 +284,26 @@ export class DataJobManageExecutionsPage extends DataJobBasePO { // General refreshExecData() { - this.getExecRefreshBtn() - .should('exist') - .click({ force: true }) + this.getExecRefreshBtn().should("exist").click({ force: true }); } // DataGrid typeToFilterInput(value) { - this.getDataGridInputFilter() - .should('exist') - .type(value); + this.getDataGridInputFilter().should("exist").type(value); this.waitForViewToRenderShort(); } clearFilterInput() { - this.getDataGridInputFilter() - .should('exist') - .clear({ force: true }); + this.getDataGridInputFilter().should("exist").clear({ force: true }); this.waitForViewToRenderShort(); } closeFilter() { this.getDataGridPopupFilterCloseBtn() - .should('exist') + .should("exist") .click({ force: true }); this.waitForViewToRenderShort(); @@ -304,7 +313,7 @@ export class DataJobManageExecutionsPage extends DataJobBasePO { openStatusFilter() { this.getDataGridExecStatusFilterOpenerBtn() - .should('exist') + .should("exist") .click({ force: true }); this.waitForViewToRenderShort(); @@ -312,7 +321,7 @@ export class DataJobManageExecutionsPage extends DataJobBasePO { openTypeFilter() { this.getDataGridExecTypeFilterOpenerBtn() - .should('exist') + .should("exist") .click({ force: true }); this.waitForViewToRenderShort(); @@ -320,7 +329,7 @@ export class DataJobManageExecutionsPage extends DataJobBasePO { openIDFilter() { this.getDataGridExecIDFilterOpenerBtn() - .should('exist') + .should("exist") .click({ force: true }); this.waitForViewToRenderShort(); @@ -328,7 +337,7 @@ export class DataJobManageExecutionsPage extends DataJobBasePO { openVersionFilter() { this.getDataGridExecVersionFilterOpenerBtn() - .should('exist') + .should("exist") .click({ force: true }); this.waitForViewToRenderShort(); @@ -336,7 +345,7 @@ export class DataJobManageExecutionsPage extends DataJobBasePO { sortByExecDuration() { this.getDataGridExecDurationSortBtn() - .should('exist') + .should("exist") .click({ force: true }); this.waitForViewToRenderShort(); @@ -344,16 +353,14 @@ export class DataJobManageExecutionsPage extends DataJobBasePO { sortByExecStart() { this.getDataGridExecStartSortBtn() - .should('exist') + .should("exist") .click({ force: true }); this.waitForViewToRenderShort(); } sortByExecEnd() { - this.getDataGridExecEndSortBtn() - .should('exist') - .click({ force: true }); + this.getDataGridExecEndSortBtn().should("exist").click({ force: true }); this.waitForViewToRenderShort(); } diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/app/lib/manage/data-jobs.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/app/lib/manage/data-jobs.po.js index 1de29752f5..7e4b099223 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/pages/app/lib/manage/data-jobs.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/pages/app/lib/manage/data-jobs.po.js @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DataJobsBasePO } from '../../../../application/data-jobs-base.po'; +import { DataJobsBasePO } from "../../../../application/data-jobs-base.po"; export class DataJobsManagePage extends DataJobsBasePO { static getPage() { @@ -11,36 +11,45 @@ export class DataJobsManagePage extends DataJobsBasePO { } static navigateTo() { - return super.navigateTo('[data-cy=navigation-link-manage-datajobs]'); + return super.navigateTo("[data-cy=navigation-link-manage-datajobs]"); } getPageTitle() { - return cy.get('[data-cy=data-pipelines-manage-page-main-title]'); + return cy.get("[data-cy=data-pipelines-manage-page-main-title]"); } getDataGrid() { - return cy.get('[data-cy=data-pipelines-manage-grid]'); + return cy.get("[data-cy=data-pipelines-manage-grid]"); } getDataGridCell(content, timeout) { - return cy.get('[id^="clr-dg-row"] > .datagrid-row-scrollable > .datagrid-scrolling-cells > .ng-star-inserted') - .contains(new RegExp(`^\\s*${ content }\\s*$`), { timeout: this.resolveTimeout(timeout) }); + return cy + .get( + '[id^="clr-dg-row"] > .datagrid-row-scrollable > .datagrid-scrolling-cells > .ng-star-inserted' + ) + .contains(new RegExp(`^\\s*${content}\\s*$`), { + timeout: this.resolveTimeout(timeout), + }); } getDataGridRow(jobName) { - cy.log(`Looking for Job row: ${ jobName }`); + cy.log(`Looking for Job row: ${jobName}`); - return this.getDataGridCell(jobName) - .parents('clr-dg-row'); + return this.getDataGridCell(jobName).parents("clr-dg-row"); } getDataGridNavigateBtn(team, job) { - return cy.get('[data-cy=data-pipelines-manage-grid-details-link][data-job-params="' + team + ';' + job + '"]'); + return cy.get( + '[data-cy=data-pipelines-manage-grid-details-link][data-job-params="' + + team + + ";" + + job + + '"]' + ); } getDataGridSearchInput() { - return cy.get('[data-test-id=search-input]') - .first(); + return cy.get("[data-test-id=search-input]").first(); } getDataGridClearSearchButton() { @@ -48,8 +57,7 @@ export class DataJobsManagePage extends DataJobsBasePO { } searchByJobName(jobName) { - this.getDataGridSearchInput() - .type(jobName); + this.getDataGridSearchInput().type(jobName); this.waitForBackendRequestCompletion(); @@ -57,9 +65,7 @@ export class DataJobsManagePage extends DataJobsBasePO { } clearSearchField() { - this.getDataGridSearchInput() - .should('be.visible') - .clear(); + this.getDataGridSearchInput().should("be.visible").clear(); this.waitForBackendRequestCompletion(); @@ -68,7 +74,7 @@ export class DataJobsManagePage extends DataJobsBasePO { clearSearchFieldWithButton() { this.getDataGridClearSearchButton() - .should('be.visible') + .should("be.visible") .click({ force: true }); this.waitForBackendRequestCompletion(); @@ -77,8 +83,9 @@ export class DataJobsManagePage extends DataJobsBasePO { } refreshDataGrid() { - cy.get('[data-cy=data-pipelines-manage-refresh-btn]') - .click({ force: true }); + cy.get("[data-cy=data-pipelines-manage-refresh-btn]").click({ + force: true, + }); this.waitForBackendRequestCompletion(); @@ -88,98 +95,91 @@ export class DataJobsManagePage extends DataJobsBasePO { openJobDetails(teamName, jobName) { this.getDataGridNavigateBtn(teamName, jobName) .scrollIntoView() - .should('exist') + .should("exist") .click({ force: true }); this.waitForBackendRequestCompletion(); this.waitForViewToRenderShort(); - cy.get('[data-cy=data-pipelines-job-page]') - .should('be.visible'); + cy.get("[data-cy=data-pipelines-job-page]").should("be.visible"); } selectRow(jobName) { this.getDataGridRow(jobName) - .find('.datagrid-select input') + .find(".datagrid-select input") .check({ force: true }); } getExecuteNowGridButton() { - return cy.get('[data-cy=data-pipelines-manage-grid-execute-btn]'); + return cy.get("[data-cy=data-pipelines-manage-grid-execute-btn]"); } changeStatus(newStatus) { - cy.get(`[data-cy=data-pipelines-job-${ newStatus }-btn]`) - .should('exist') - .should('be.enabled') - .click({ force: true }); + cy.get(`[data-cy=data-pipelines-job-${newStatus}-btn]`) + .should("exist") + .should("be.enabled") + .click({ force: true }); } getJobStatus(jobName) { - return this.getDataGridRow(jobName) - .then(($row) => { - if ($row.find('[data-cy=data-pipelines-job-disabled]').length) { - return 'disable'; - } + return this.getDataGridRow(jobName).then(($row) => { + if ($row.find("[data-cy=data-pipelines-job-disabled]").length) { + return "disable"; + } - if ($row.find('[data-cy=data-pipelines-job-enabled]').length) { - return 'enable'; - } + if ($row.find("[data-cy=data-pipelines-job-enabled]").length) { + return "enable"; + } - return 'not_deployed'; - }); + return "not_deployed"; + }); } toggleJobStatus(jobName) { this.selectRow(jobName); - this.getJobStatus(jobName) - .then((currentStatus) => { - if (currentStatus === 'not_deployed') { - throw new Error('Data job is not Deployed.'); - } + this.getJobStatus(jobName).then((currentStatus) => { + if (currentStatus === "not_deployed") { + throw new Error("Data job is not Deployed."); + } - const newStatus = currentStatus === 'enable' - ? 'disable' - : 'enable'; + const newStatus = currentStatus === "enable" ? "disable" : "enable"; - cy.log(`Current status: ${ currentStatus }, new status: ${ newStatus }`); + cy.log( + `Current status: ${currentStatus}, new status: ${newStatus}` + ); - this.changeStatus(newStatus) + this.changeStatus(newStatus); - this.confirmInConfirmDialog(); + this.confirmInConfirmDialog(); - this.getToastTitle() - .should('exist') - .should('contain.text', 'Status update completed'); + this.getToastTitle() + .should("exist") + .should("contain.text", "Status update completed"); - this.getToastDismiss() - .should('exist') - .click({ force: true }); + this.getToastDismiss().should("exist").click({ force: true }); - this.waitForClickThinkingTime(); // Natural wait for User action + this.waitForClickThinkingTime(); // Natural wait for User action - this.refreshDataGrid(); + this.refreshDataGrid(); - this.getJobStatus(jobName) - .then((changedStatus) => { - expect(changedStatus).to.equal(newStatus); - }); + this.getJobStatus(jobName).then((changedStatus) => { + expect(changedStatus).to.equal(newStatus); }); + }); } filterByJobName(jobName) { - cy.get('[data-cy=data-pipelines-jobs-name-column] > .datagrid-column-flex > clr-dg-string-filter.ng-star-inserted > clr-dg-filter > .datagrid-filter-toggle > cds-icon') - .click({ force: true }); + cy.get( + "[data-cy=data-pipelines-jobs-name-column] > .datagrid-column-flex > clr-dg-string-filter.ng-star-inserted > clr-dg-filter > .datagrid-filter-toggle > cds-icon" + ).click({ force: true }); - cy.get('div.datagrid-filter > input') - .should('be.visible') - .type(jobName); + cy.get("div.datagrid-filter > input") + .should("be.visible") + .type(jobName); - this.getPageTitle() - .should('be.visible') - .click({ force: true }); + this.getPageTitle().should("be.visible").click({ force: true }); this.waitForBackendRequestCompletion(); @@ -191,9 +191,7 @@ export class DataJobsManagePage extends DataJobsBasePO { this.waitForClickThinkingTime(); - this.getExecuteNowGridButton() - .should('exist') - .click({ force: true }); + this.getExecuteNowGridButton().should("exist").click({ force: true }); this.waitForViewToRenderShort(); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/karma.conf.js b/projects/frontend/data-pipelines/gui/projects/data-pipelines/karma.conf.js index 37b77549e7..38c6958af6 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/karma.conf.js +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/karma.conf.js @@ -6,17 +6,17 @@ // Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html -module.exports = function(config) { +module.exports = function (config) { config.set({ - basePath: '', - frameworks: ['jasmine', '@angular-devkit/build-angular'], + basePath: "", + frameworks: ["jasmine", "@angular-devkit/build-angular"], plugins: [ - require('karma-jasmine'), - require('karma-chrome-launcher'), - require('karma-jasmine-html-reporter'), - require('karma-junit-reporter'), - require('karma-coverage'), - require('@angular-devkit/build-angular/plugins/karma') + require("karma-jasmine"), + require("karma-chrome-launcher"), + require("karma-jasmine-html-reporter"), + require("karma-junit-reporter"), + require("karma-coverage"), + require("@angular-devkit/build-angular/plugins/karma"), ], client: { jasmine: { @@ -25,44 +25,50 @@ module.exports = function(config) { // for example, you can disable the random execution with `random: false` // or set a specific seed with `seed: 4321` }, - clearContext: false // leave Jasmine Spec Runner output visible in browser + clearContext: false, // leave Jasmine Spec Runner output visible in browser }, jasmineHtmlReporter: { - suppressAll: true // removes the duplicated traces + suppressAll: true, // removes the duplicated traces }, coverageReporter: { - dir: require('path').join(__dirname, '../../reports/coverage/data-pipelines-lib'), - subdir: '.', + dir: require("path").join( + __dirname, + "../../reports/coverage/data-pipelines-lib" + ), + subdir: ".", reporters: [ //Code coverage - output in HTML file and Console(to be parsed in the CI/CD badge) - { type: 'html' }, - { type: 'text-summary' }, - { type: 'lcovonly' } + { type: "html" }, + { type: "text-summary" }, + { type: "lcovonly" }, ], check: { global: { - lines: 80 - } - } + lines: 80, + }, + }, }, - reporters: ['progress', 'junit', 'coverage'], + reporters: ["progress", "junit", "coverage"], junitReporter: { - outputDir: require('path').join(__dirname, '../../reports/test-results/data-pipelines-lib'), - outputFile: 'unit-tests.xml', - useBrowserName: false + outputDir: require("path").join( + __dirname, + "../../reports/test-results/data-pipelines-lib" + ), + outputFile: "unit-tests.xml", + useBrowserName: false, }, port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, - browsers: ['ChromeHeadless'], + browsers: ["ChromeHeadless"], customLaunchers: { ChromeHeadless_No_Sandbox: { - base: 'ChromeHeadless', - flags: ['--no-sandbox'] - } + base: "ChromeHeadless", + flags: ["--no-sandbox"], + }, }, singleRun: false, - restartOnFileChange: true + restartOnFileChange: true, }); }; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/base-grid/_data-jobs-base-grid.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/base-grid/_data-jobs-base-grid.component.scss index 996efccbfe..be143f485a 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/base-grid/_data-jobs-base-grid.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/base-grid/_data-jobs-base-grid.component.scss @@ -4,116 +4,116 @@ */ :host { - .label-link { - cursor: pointer; - } - - ::ng-deep { - lib-grid-action { - display: flex; - flex-direction: column; - - lib-quick-filters { - clr-icon { - margin-left: -5px; - margin-right: 3px; - margin-top: 1px; - - &.status-icon-enabled { - color: #5aa220; - } - - &.status-icon-disabled { - color: var(--clr-color-neutral-600); - } - } - } + .label-link { + cursor: pointer; } - clr-datagrid { - height: 100%; - - .datagrid-column, - .datagrid-cell { - &.column__min-width--xs { - min-width: 3.25rem; - } - - &.column__min-width--s { - min-width: 4.25rem; + ::ng-deep { + lib-grid-action { + display: flex; + flex-direction: column; + + lib-quick-filters { + clr-icon { + margin-left: -5px; + margin-right: 3px; + margin-top: 1px; + + &.status-icon-enabled { + color: #5aa220; + } + + &.status-icon-disabled { + color: var(--clr-color-neutral-600); + } + } + } } - &.column__min-width--m { - min-width: 4.8rem; - } - - &.column__min-width--l { - min-width: 5.5rem; - } - - &.column__min-width--xl { - min-width: 6.5rem; - } - - &.column__max-width--xs { - max-width: 5rem; - } - - &.column__max-width--s { - max-width: 6rem; - } - - &.column__max-width--m { - max-width: 7rem; - } - - &.column__max-width--l { - max-width: 8.5rem; - } - - &.column__max-width--xl { - max-width: 10rem; - } + clr-datagrid { + height: 100%; - &.jobs-list__column-opener { - min-width: 75px; - width: 75px; + .datagrid-column, + .datagrid-cell { + &.column__min-width--xs { + min-width: 3.25rem; + } + + &.column__min-width--s { + min-width: 4.25rem; + } + + &.column__min-width--m { + min-width: 4.8rem; + } + + &.column__min-width--l { + min-width: 5.5rem; + } + + &.column__min-width--xl { + min-width: 6.5rem; + } + + &.column__max-width--xs { + max-width: 5rem; + } + + &.column__max-width--s { + max-width: 6rem; + } + + &.column__max-width--m { + max-width: 7rem; + } + + &.column__max-width--l { + max-width: 8.5rem; + } + + &.column__max-width--xl { + max-width: 10rem; + } + + &.jobs-list__column-opener { + min-width: 75px; + width: 75px; + } + } + + .datagrid-outer-wrapper { + .datagrid-inner-wrapper { + .datagrid { + flex-basis: 0; + margin-top: 0; + } + + .datagrid-spinner { + top: 0; + height: 100%; + } + } + } } - } + } - .datagrid-outer-wrapper { - .datagrid-inner-wrapper { - .datagrid { - flex-basis: 0; - margin-top: 0; - } + .grid-container { + height: 100%; + display: flex; + flex-direction: column; - .datagrid-spinner { - top: 0; + .container { height: 100%; - } } - } - } - } - - .grid-container { - height: 100%; - display: flex; - flex-direction: column; - - .container { - height: 100%; } - } - .grid-container-compact { - height: auto; - display: flex; - flex-direction: column; + .grid-container-compact { + height: auto; + display: flex; + flex-direction: column; - .container-compact { - height: 50vh; + .container-compact { + height: 50vh; + } } - } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/base-grid/data-jobs-base-grid.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/base-grid/data-jobs-base-grid.component.ts index e6142b05ee..1f0f223ebd 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/base-grid/data-jobs-base-grid.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/base-grid/data-jobs-base-grid.component.ts @@ -32,7 +32,7 @@ import { RouterState, RouteState, TaurusBaseComponent, - URLStateManager + URLStateManager, } from '@vdk/shared'; import { ErrorUtil } from '../../shared/utils'; @@ -46,7 +46,7 @@ import { DataPipelinesConfig, DataPipelinesRestoreUI, DisplayMode, - JOBS_DATA_KEY + JOBS_DATA_KEY, } from '../../model'; import { DataJobsApiService, DataJobsService } from '../../services'; @@ -69,8 +69,14 @@ export type DataJobsLocalStorageUserConfig = { @Directive() export abstract class DataJobsBaseGridComponent extends TaurusBaseComponent - implements OnInit, OnTaurusModelInit, OnTaurusModelInitialLoad, OnTaurusModelLoad, OnTaurusModelChange, OnTaurusModelError { - + implements + OnInit, + OnTaurusModelInit, + OnTaurusModelInitialLoad, + OnTaurusModelLoad, + OnTaurusModelChange, + OnTaurusModelError +{ static readonly UI_KEY_PAGE_OFFSET = 'pageOffset'; static readonly UI_KEY_GRID_OFFSET = 'gridOffset'; static readonly UI_KEY_GRID_UI_STATE = 'gridUIState'; @@ -78,7 +84,8 @@ export abstract class DataJobsBaseGridComponent static readonly CONTENT_AREA_SELECTOR = '.content-area'; static readonly DATA_GRID_SELECTOR = '.datagrid'; - @Input() urlUpdateStrategy: 'updateLocation' | 'updateRouter' = 'updateRouter'; + @Input() urlUpdateStrategy: 'updateLocation' | 'updateRouter' = + 'updateRouter'; @Input() searchParam: string = QUERY_PARAM_SEARCH; @Input() set urlStateManager(value: URLStateManager) { @@ -111,14 +118,14 @@ export abstract class DataJobsBaseGridComponent deploymentStatuses = [ DataJobStatus.ENABLED, DataJobStatus.DISABLED, - DataJobStatus.NOT_DEPLOYED + DataJobStatus.NOT_DEPLOYED, ]; executionStatuses = [ DataJobExecutionStatus.SUCCEEDED, DataJobExecutionStatus.PLATFORM_ERROR, DataJobExecutionStatus.USER_ERROR, DataJobExecutionStatus.SKIPPED, - DataJobExecutionStatus.CANCELLED + DataJobExecutionStatus.CANCELLED, ]; clrGridCurrentPage = 1; @@ -136,7 +143,8 @@ export abstract class DataJobsBaseGridComponent protected _urlStateManager: URLStateManager; private _isUrlStateManagerExternalDependency = false; - protected constructor( // NOSONAR + protected constructor( + // NOSONAR componentService: ComponentService, navigationService: NavigationService, activatedRoute: ActivatedRoute, @@ -164,11 +172,14 @@ export abstract class DataJobsBaseGridComponent * ** NgFor elements tracking function. */ trackByFn(index: number, dataJob: DataJob): string { - return `${ index }|${ dataJob?.config?.team }|${ dataJob?.jobName }`; + return `${index}|${dataJob?.config?.team}|${dataJob?.jobName}`; } resolveLogsUrl(job: DataJob): string { - if (CollectionsUtil.isNil(job) || CollectionsUtil.isArrayEmpty(job.deployments)) { + if ( + CollectionsUtil.isNil(job) || + CollectionsUtil.isArrayEmpty(job.deployments) + ) { return null; } @@ -181,7 +192,10 @@ export abstract class DataJobsBaseGridComponent showOrHideColumnChange(columnName: string, hidden: boolean): void { this.localStorageUserConfig.hiddenColumns[columnName] = hidden; - localStorage.setItem(this.localStorageConfigKey, JSON.stringify(this.localStorageUserConfig)); + localStorage.setItem( + this.localStorageConfigKey, + JSON.stringify(this.localStorageUserConfig) + ); } getJobStatus(job: DataJob): DataJobExecutionStatus { @@ -194,8 +208,10 @@ export abstract class DataJobsBaseGridComponent getJobSuccessRateTitle(job: DataJob): string { if (job.deployments) { - return `${ job.deployments[0]?.successfulExecutions } successful / ${ job.deployments[0]?.failedExecutions - + job.deployments[0]?.successfulExecutions } total`; + return `${job.deployments[0]?.successfulExecutions} successful / ${ + job.deployments[0]?.failedExecutions + + job.deployments[0]?.successfulExecutions + } total`; } return null; @@ -230,7 +246,9 @@ export abstract class DataJobsBaseGridComponent if (this.filterByTeamName && !this.teamNameFilter) { //While the teamNameFilter is empty, no refresh requests will be executed. - console.log('Refresh operation will be skipped. teamNameFilter is empty.'); + console.log( + 'Refresh operation will be skipped. teamNameFilter is empty.' + ); return; } @@ -254,18 +272,16 @@ export abstract class DataJobsBaseGridComponent this.saveUIState(); this.selectionChanged(job); - this.dataJobsService - .notifyForTeamImplicitly(job.config?.team); + this.dataJobsService.notifyForTeamImplicitly(job.config?.team); this.navigationInProgress = true; this.navigateTo({ '$.team': job.config?.team, - '$.job': job.jobName - }) - .finally(() => { - this.navigationInProgress = false; - }); + '$.job': job.jobName, + }).finally(() => { + this.navigationInProgress = false; + }); } } @@ -279,9 +295,12 @@ export abstract class DataJobsBaseGridComponent this.routerService .get() .pipe( - distinctUntilChanged((a, b) => - a.state.absoluteConfigPath !== b.state.absoluteConfigPath || - a.state.absoluteRoutePath === b.state.absoluteRoutePath + distinctUntilChanged( + (a, b) => + a.state.absoluteConfigPath !== + b.state.absoluteConfigPath || + a.state.absoluteRoutePath === + b.state.absoluteRoutePath ) ) .subscribe((routerState) => { @@ -300,9 +319,10 @@ export abstract class DataJobsBaseGridComponent if (this._shouldRestoreUIState(routerState)) { this.restoreUIStateInProgress = true; - const clrGridUIState = this.model.getUiState( - DataJobsBaseGridComponent.UI_KEY_GRID_UI_STATE - ); + const clrGridUIState = + this.model.getUiState( + DataJobsBaseGridComponent.UI_KEY_GRID_UI_STATE + ); if (clrGridUIState) { this.clrGridUIState = clrGridUIState; } @@ -328,9 +348,7 @@ export abstract class DataJobsBaseGridComponent onModelInitialLoad() { this.routerService .get() - .pipe( - take(1) - ) + .pipe(take(1)) .subscribe((routerState) => { if (this._shouldRestoreUIState(routerState)) { this.restoreUIState(); @@ -352,7 +370,8 @@ export abstract class DataJobsBaseGridComponent */ onModelChange(model: ComponentModel) { const componentState = model.getComponentState(); - const dataJobsData: { content: DataJob[], totalItems: number } = componentState.data.get(JOBS_DATA_KEY); + const dataJobsData: { content: DataJob[]; totalItems: number } = + componentState.data.get(JOBS_DATA_KEY); this.dataJobs = CollectionsUtil.isArray(dataJobsData?.content) ? [...dataJobsData?.content] @@ -365,9 +384,7 @@ export abstract class DataJobsBaseGridComponent * @inheritDoc */ onModelError(model?: ComponentModel) { - const error = ErrorUtil.extractError( - model.getComponentState().error - ); + const error = ErrorUtil.extractError(model.getComponentState().error); this.errorHandlerService.processError(error); } @@ -380,17 +397,17 @@ export abstract class DataJobsBaseGridComponent this._initializeClrGridUIState(); this.subscriptions.push( - this.loadDataDebouncer.pipe( - debounceTime(300) - ).subscribe((handling) => { - if (this.isLoadDataAllowed() || handling === 'forced') { - this._doLoadData(); - } + this.loadDataDebouncer + .pipe(debounceTime(300)) + .subscribe((handling) => { + if (this.isLoadDataAllowed() || handling === 'forced') { + this._doLoadData(); + } - if (this.isUrlUpdateAllowed() || handling === 'forced') { - this._doUrlUpdate(); - } - }) + if (this.isUrlUpdateAllowed() || handling === 'forced') { + this._doUrlUpdate(); + } + }) ); super.ngOnInit(); @@ -400,12 +417,19 @@ export abstract class DataJobsBaseGridComponent try { this._loadLocalStorageUserConfig(); } catch (e1) { - console.error('Failed to read config from localStorage', e1, 'Will attempt to re-create it.'); + console.error( + 'Failed to read config from localStorage', + e1, + 'Will attempt to re-create it.' + ); try { localStorage.removeItem(this.localStorageConfigKey); this._loadLocalStorageUserConfig(); } catch (e2) { - console.error('Was unable to re-initialize localStorage user config', e2); + console.error( + 'Was unable to re-initialize localStorage user config', + e2 + ); } } } @@ -413,7 +437,9 @@ export abstract class DataJobsBaseGridComponent protected isLoadDataAllowed(): boolean { if (!this.gridState) { //While the gridState is empty, no refresh requests will be executed. - console.log('Load data will be skipped. gridState is empty. operation not allowed.'); + console.log( + 'Load data will be skipped. gridState is empty. operation not allowed.' + ); return false; } @@ -422,34 +448,50 @@ export abstract class DataJobsBaseGridComponent } protected isUrlUpdateAllowed(): boolean { - return !this.navigationInProgress && this.urlStateManager.isQueryParamsStateMutated; + return ( + !this.navigationInProgress && + this.urlStateManager.isQueryParamsStateMutated + ); } protected saveUIState() { - const dataGrid = this.elementRef.nativeElement.querySelector(DataJobsBaseGridComponent.DATA_GRID_SELECTOR); + const dataGrid = this.elementRef.nativeElement.querySelector( + DataJobsBaseGridComponent.DATA_GRID_SELECTOR + ); if (dataGrid) { - this.model.withUiState(DataJobsBaseGridComponent.UI_KEY_GRID_OFFSET, { - x: dataGrid.scrollLeft, - y: dataGrid.scrollTop - }); + this.model.withUiState( + DataJobsBaseGridComponent.UI_KEY_GRID_OFFSET, + { + x: dataGrid.scrollLeft, + y: dataGrid.scrollTop, + } + ); } - const contentArea = this.document.querySelector(DataJobsBaseGridComponent.CONTENT_AREA_SELECTOR); + const contentArea = this.document.querySelector( + DataJobsBaseGridComponent.CONTENT_AREA_SELECTOR + ); if (contentArea) { - this.model.withUiState(DataJobsBaseGridComponent.UI_KEY_PAGE_OFFSET, { - x: contentArea.scrollLeft, - y: contentArea.scrollTop - }); + this.model.withUiState( + DataJobsBaseGridComponent.UI_KEY_PAGE_OFFSET, + { + x: contentArea.scrollLeft, + y: contentArea.scrollTop, + } + ); } - const clrGridUIStateDeepCloned = CollectionsUtil.cloneDeep(this.clrGridUIState); - clrGridUIStateDeepCloned.pageSize = this.model - .getComponentState() - ?.page - ?.size; + const clrGridUIStateDeepCloned = CollectionsUtil.cloneDeep( + this.clrGridUIState + ); + clrGridUIStateDeepCloned.pageSize = + this.model.getComponentState()?.page?.size; clrGridUIStateDeepCloned.lastPage = this.clrGridCurrentPage; - this.model.withUiState(DataJobsBaseGridComponent.UI_KEY_GRID_UI_STATE, clrGridUIStateDeepCloned); + this.model.withUiState( + DataJobsBaseGridComponent.UI_KEY_GRID_UI_STATE, + clrGridUIStateDeepCloned + ); this.componentService.update(this.model.getComponentState()); } @@ -460,14 +502,22 @@ export abstract class DataJobsBaseGridComponent } setTimeout(() => { - const gridOffset = this.model.getUiState(DataJobsBaseGridComponent.UI_KEY_GRID_OFFSET); - const dataGrid = this.elementRef.nativeElement.querySelector(DataJobsBaseGridComponent.DATA_GRID_SELECTOR); + const gridOffset = this.model.getUiState( + DataJobsBaseGridComponent.UI_KEY_GRID_OFFSET + ); + const dataGrid = this.elementRef.nativeElement.querySelector( + DataJobsBaseGridComponent.DATA_GRID_SELECTOR + ); if (dataGrid) { dataGrid.scrollTo(gridOffset.x, gridOffset.y); } - const pageOffset = this.model.getUiState(DataJobsBaseGridComponent.UI_KEY_PAGE_OFFSET); - const contentArea = this.document.querySelector(DataJobsBaseGridComponent.CONTENT_AREA_SELECTOR); + const pageOffset = this.model.getUiState( + DataJobsBaseGridComponent.UI_KEY_PAGE_OFFSET + ); + const contentArea = this.document.querySelector( + DataJobsBaseGridComponent.CONTENT_AREA_SELECTOR + ); if (contentArea) { contentArea.scrollTo(pageOffset.x, pageOffset.y); } @@ -477,7 +527,8 @@ export abstract class DataJobsBaseGridComponent } private _shouldRestoreUIState(routerState: RouterState): boolean { - const restoreUiWhen = routerState.state.getData('restoreUiWhen'); + const restoreUiWhen = + routerState.state.getData('restoreUiWhen'); if (CollectionsUtil.isNil(restoreUiWhen)) { return true; } @@ -488,34 +539,34 @@ export abstract class DataJobsBaseGridComponent return routerState .getPrevious() - .state - .absoluteConfigPath - .includes(restoreUiWhen.previousConfigPathLike); + .state.absoluteConfigPath.includes( + restoreUiWhen.previousConfigPathLike + ); } private _doesRestoreUIStateExist(): boolean { - return CollectionsUtil.isDefined(this.model) - && CollectionsUtil.isDefined( - this.model.getUiState(DataJobsBaseGridComponent.UI_KEY_GRID_UI_STATE) - ); + return ( + CollectionsUtil.isDefined(this.model) && + CollectionsUtil.isDefined( + this.model.getUiState( + DataJobsBaseGridComponent.UI_KEY_GRID_UI_STATE + ) + ) + ); } private _clearUiPageState() { this.model .getComponentState() - .uiState - .delete(DataJobsBaseGridComponent.UI_KEY_GRID_OFFSET); + .uiState.delete(DataJobsBaseGridComponent.UI_KEY_GRID_OFFSET); this.model .getComponentState() - .uiState - .delete(DataJobsBaseGridComponent.UI_KEY_PAGE_OFFSET); + .uiState.delete(DataJobsBaseGridComponent.UI_KEY_PAGE_OFFSET); this.model .getComponentState() - .uiState - .delete(DataJobsBaseGridComponent.UI_KEY_GRID_UI_STATE); + .uiState.delete(DataJobsBaseGridComponent.UI_KEY_GRID_UI_STATE); - this.componentService - .update(this.model.getComponentState()); + this.componentService.update(this.model.getComponentState()); } private _doLoadData(): void { @@ -528,7 +579,10 @@ export abstract class DataJobsBaseGridComponent this.model .withFilter(this._buildRefreshFilters()) .withSearch(this.searchQueryValue) - .withPage(this.gridState?.page?.current, this.gridState?.page?.size); + .withPage( + this.gridState?.page?.current, + this.gridState?.page?.size + ); } this.dataJobsService.loadJobs(this.model); @@ -560,8 +614,10 @@ export abstract class DataJobsBaseGridComponent this.urlStateManager.baseURL = routeState.absoluteRoutePath; } - this.urlStateManager - .setQueryParam(this.searchParam, this.searchQueryValue); + this.urlStateManager.setQueryParam( + this.searchParam, + this.searchQueryValue + ); } private _doUrlUpdate(): void { @@ -569,9 +625,7 @@ export abstract class DataJobsBaseGridComponent this.urlStateManager.locationToURL(); } else { // eslint-disable-next-line @typescript-eslint/no-floating-promises - this.urlStateManager - .navigateToUrl() - .then(); + this.urlStateManager.navigateToUrl().then(); } } @@ -579,22 +633,32 @@ export abstract class DataJobsBaseGridComponent const userConfig = localStorage.getItem(this.localStorageConfigKey); if (userConfig) { let newColumnProvided = false; - const parsedUserConfig: DataJobsLocalStorageUserConfig = JSON.parse(userConfig); - - CollectionsUtil.iterateObject(this.localStorageUserConfig.hiddenColumns, (value, key) => { - if (!parsedUserConfig.hiddenColumns.hasOwnProperty(key)) { - newColumnProvided = true; - parsedUserConfig.hiddenColumns[key] = value; + const parsedUserConfig: DataJobsLocalStorageUserConfig = + JSON.parse(userConfig); + + CollectionsUtil.iterateObject( + this.localStorageUserConfig.hiddenColumns, + (value, key) => { + if (!parsedUserConfig.hiddenColumns.hasOwnProperty(key)) { + newColumnProvided = true; + parsedUserConfig.hiddenColumns[key] = value; + } } - }); + ); if (newColumnProvided) { - localStorage.setItem(this.localStorageConfigKey, JSON.stringify(parsedUserConfig)); + localStorage.setItem( + this.localStorageConfigKey, + JSON.stringify(parsedUserConfig) + ); } this.localStorageUserConfig = parsedUserConfig; } else { - localStorage.setItem(this.localStorageConfigKey, JSON.stringify(this.localStorageUserConfig)); + localStorage.setItem( + this.localStorageConfigKey, + JSON.stringify(this.localStorageUserConfig) + ); } } @@ -610,31 +674,32 @@ export abstract class DataJobsBaseGridComponent filters.push({ property: 'config.team', pattern: this.teamNameFilter, - sort: null + sort: null, }); } if (this.gridState?.filters) { for (const _filter of this.gridState.filters) { - const { property, value } = _filter as { property: string; value: string }; + const { property, value } = _filter as { + property: string; + value: string; + }; filters.push({ property, pattern: this._getFilterPattern(property, value), - sort: null + sort: null, }); } } if (this.gridState?.sort) { - const direction = this.gridState.sort.reverse - ? DESC - : ASC; + const direction = this.gridState.sort.reverse ? DESC : ASC; filters.push({ property: this.gridState.sort.by as string, pattern: null, - sort: direction + sort: direction, }); } @@ -646,13 +711,13 @@ export abstract class DataJobsBaseGridComponent // TODO: Once jobName get the same handling as config.team, add case proper case switch (propertyName) { case 'config.team': - return `%${ value }%`; + return `%${value}%`; case 'deployments.enabled': - return `${ value }`.toLowerCase().replace(' ', '_'); + return `${value}`.toLowerCase().replace(' ', '_'); case 'deployments.lastExecutionStatus': - return `${ value }`.toLowerCase(); + return `${value}`.toLowerCase(); default: - return `${ value }`; + return `${value}`; } } @@ -671,7 +736,7 @@ export abstract class DataJobsBaseGridComponent suppressCancel: true, onActivate: () => { this.clrGridUIState.filter = {}; - } + }, }, { label: 'Enabled', @@ -681,8 +746,8 @@ export abstract class DataJobsBaseGridComponent title: 'Enabled - This job is deployed and executed by schedule', class: 'is-solid status-icon-enabled', shape: 'check-circle', - size: 20 - } + size: 20, + }, }, { label: 'Disabled', @@ -692,8 +757,8 @@ export abstract class DataJobsBaseGridComponent title: 'Disabled - This job is deployed but not executing by schedule', class: 'is-solid status-icon-disabled', shape: 'times-circle', - size: 15 - } + size: 15, + }, }, { label: 'Not Deployed', @@ -702,14 +767,17 @@ export abstract class DataJobsBaseGridComponent icon: { title: 'Not Deployed - This job is created but still not deployed', shape: 'circle', - size: 15 - } - } + size: 15, + }, + }, ]; - if (CollectionsUtil.isNumber(this.quickFiltersDefaultActiveIndex) && - CollectionsUtil.isDefined(filters[this.quickFiltersDefaultActiveIndex])) { - + if ( + CollectionsUtil.isNumber(this.quickFiltersDefaultActiveIndex) && + CollectionsUtil.isDefined( + filters[this.quickFiltersDefaultActiveIndex] + ) + ) { filters[this.quickFiltersDefaultActiveIndex].active = true; } @@ -722,11 +790,11 @@ export abstract class DataJobsBaseGridComponent lastPage: 1, pageSize: 25, filter: { - ...(this.clrGridDefaultFilter ?? {}) + ...(this.clrGridDefaultFilter ?? {}), }, sort: { - ...(this.clrGridDefaultSort ?? {}) - } + ...(this.clrGridDefaultSort ?? {}), + }, }; } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.html index 4a998972e0..41269c4327 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.html @@ -5,161 +5,227 @@ -
-
- +
+
-
-

- - +
+

+ + - Data Job: {{jobName}} + Data Job: {{ jobName }}

-

- - +

+ + - Data Job: {{jobName}} + Data Job: {{ jobName }}

-
- - - - - - - -
- + - + - +
-
    + aria-owns="dataPipelinesJobDetails dataPipelinesJobExecutions dataPipelinesJobLineage" + > - - diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.scss index c343137cb0..2c6e95e3b9 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.scss @@ -4,118 +4,118 @@ */ @mixin fill-parent-content() { - display: flex; - flex-direction: column; - flex: 1 1 auto; + display: flex; + flex-direction: column; + flex: 1 1 auto; } hr { - border: 0; - height: 1px; - background: #8f9ba3; + border: 0; + height: 1px; + background: #8f9ba3; } .label-link { - cursor: pointer; + cursor: pointer; } .label-link-suppress-decoration { - &:hover { - text-decoration: none; - } + &:hover { + text-decoration: none; + } } .status-icon-enabled { - color: hsl(93, 67%, 38%); + color: hsl(93, 67%, 38%); } .clr-col-6 { - border-right: 1px solid #999999; + border-right: 1px solid #999999; } .loading-spinner { - margin-left: 45%; - margin-top: 100px; + margin-left: 45%; + margin-top: 100px; } :host { - @include fill-parent-content(); - height: 100%; + @include fill-parent-content(); + height: 100%; } .data-pipelines-job__page { - @include fill-parent-content(); + @include fill-parent-content(); - .data-pipelines-job__actions { - display: inline-flex; - margin-top: 0.8rem; + .data-pipelines-job__actions { + display: inline-flex; + margin-top: 0.8rem; - .data-pipelines-job__actions-right { - margin-left: auto; + .data-pipelines-job__actions-right { + margin-left: auto; - clr-dropdown { - margin-top: var(--clr-btn-vertical-margin, 0.3rem); - margin-bottom: var(--clr-btn-vertical-margin, 0.3rem); - margin-left: 0; - } + clr-dropdown { + margin-top: var(--clr-btn-vertical-margin, 0.3rem); + margin-bottom: var(--clr-btn-vertical-margin, 0.3rem); + margin-left: 0; + } - .data-pipelines-job__action-dropdown-trigger { - padding-right: 1.5rem; + .data-pipelines-job__action-dropdown-trigger { + padding-right: 1.5rem; - clr-icon { - transform: translateY(-50%) rotate(180deg); - top: 0.85rem; + clr-icon { + transform: translateY(-50%) rotate(180deg); + top: 0.85rem; + } + } } - } - } - &.data-pipelines-job__actions--margin-0 { - margin: 0; - } + &.data-pipelines-job__actions--margin-0 { + margin: 0; + } - .data-pipelines-job__navigate-back { - margin-right: 10px; - margin-top: -1px; + .data-pipelines-job__navigate-back { + margin-right: 10px; + margin-top: -1px; - .redo-icon { - color: var(--clr-link-color, #0072a3); - height: 25px; - width: 25px; - } - } + .redo-icon { + color: var(--clr-link-color, #0072a3); + height: 25px; + width: 25px; + } + } - .data-pipelines-job__info { - display: inline-flex; + .data-pipelines-job__info { + display: inline-flex; - span { - margin-right: 0.5rem; - } - } + span { + margin-right: 0.5rem; + } + } - .page-title { - span { - font-size: x-large; - } + .page-title { + span { + font-size: x-large; + } + } } - } - .data-pipelines-job__tabs-navigation { - margin-top: 7px; + .data-pipelines-job__tabs-navigation { + margin-top: 7px; - .job-details__promotion-icon { - margin-top: -0.75rem; - margin-left: 0.25rem; - } + .job-details__promotion-icon { + margin-top: -0.75rem; + margin-left: 0.25rem; + } - .alpha-icon { - height: 15px; - width: 30px; - margin-top: -0.75rem; - font-size: 9px; + .alpha-icon { + height: 15px; + width: 30px; + margin-top: -0.75rem; + font-size: 9px; + } } - } - .data-pipelines-job__router-outlet-container { - @include fill-parent-content(); - } + .data-pipelines-job__router-outlet-container { + @include fill-parent-content(); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.spec.ts index 7458635d2a..2b51295e28 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.spec.ts @@ -20,7 +20,7 @@ import { RouterService, RouterState, RouteState, - ToastService + ToastService, } from '@vdk/shared'; import { @@ -30,7 +30,7 @@ import { DataJobDetails, DataJobExecution, DataJobExecutionStatus, - DataJobExecutionType + DataJobExecutionType, } from '../../model'; import { DataJobsApiService, DataJobsService } from '../../services'; @@ -70,13 +70,13 @@ describe('DataJobsDetailsComponent', () => { memoryLimit: 1000, memoryRequest: 1000, cpuLimit: 0.5, - cpuRequest: 0.5 + cpuRequest: 0.5, }, executions: [], deployedDate: '2020-11-11T10:10:10Z', deployedBy: 'pmitev', - status: DataJobDeploymentStatus.SUCCESS - } + status: DataJobDeploymentStatus.SUCCESS, + }, } as DataJobExecution; const TEST_JOB_DEPLOYMENT = { @@ -97,64 +97,88 @@ describe('DataJobsDetailsComponent', () => { memory_limit: 1000, memory_request: 1000, cpu_limit: 0.5, - cpu_request: 0.5 - } + cpu_request: 0.5, + }, /* eslint-enable @typescript-eslint/naming-convention */ - } as DataJobDeploymentDetails; beforeEach(() => { - componentServiceStub = jasmine.createSpyObj('componentService', ['init', 'getModel', 'idle']); - navigationServiceStub = jasmine.createSpyObj('navigationService', ['navigate', 'navigateTo', 'navigateBack']); - routerServiceStub = jasmine.createSpyObj('routerService', ['getState']); - toastServiceStub = jasmine.createSpyObj('toastService', ['show']); - dataJobsApiServiceStub = jasmine.createSpyObj('dataJobsApiService', [ - 'getJobDetails', - 'getJobExecutions', - 'getJobDeployments', - 'removeJob', - 'downloadFile', - 'executeDataJob', - 'getJob' - ]); - dataJobsServiceStub = jasmine.createSpyObj('dataJobsService', [ - 'loadJobs', - 'notifyForRunningJobExecutionId', - 'notifyForJobExecutions', - 'notifyForTeamImplicitly', - 'getNotifiedForRunningJobExecutionId', - 'getNotifiedForJobExecutions', - 'getNotifiedForTeamImplicitly' - ]); - errorHandlerServiceStub = jasmine.createSpyObj('errorHandlerService', [ - 'processError', - 'handleError' + componentServiceStub = jasmine.createSpyObj( + 'componentService', + ['init', 'getModel', 'idle'] + ); + navigationServiceStub = jasmine.createSpyObj( + 'navigationService', + ['navigate', 'navigateTo', 'navigateBack'] + ); + routerServiceStub = jasmine.createSpyObj( + 'routerService', + ['getState'] + ); + toastServiceStub = jasmine.createSpyObj('toastService', [ + 'show', ]); + dataJobsApiServiceStub = jasmine.createSpyObj( + 'dataJobsApiService', + [ + 'getJobDetails', + 'getJobExecutions', + 'getJobDeployments', + 'removeJob', + 'downloadFile', + 'executeDataJob', + 'getJob', + ] + ); + dataJobsServiceStub = jasmine.createSpyObj( + 'dataJobsService', + [ + 'loadJobs', + 'notifyForRunningJobExecutionId', + 'notifyForJobExecutions', + 'notifyForTeamImplicitly', + 'getNotifiedForRunningJobExecutionId', + 'getNotifiedForJobExecutions', + 'getNotifiedForTeamImplicitly', + ] + ); + errorHandlerServiceStub = jasmine.createSpyObj( + 'errorHandlerService', + ['processError', 'handleError'] + ); const activatedRouteStub = () => ({ snapshot: createRouteSnapshot({ data: { - activateSubpageNavigation: true - } - }) + activateSubpageNavigation: true, + }, + }), }); dataJobsApiServiceStub.executeDataJob.and.returnValue(new Subject()); dataJobsApiServiceStub.getJob.and.returnValue(new Subject()); dataJobsApiServiceStub.getJobDetails.and.returnValue(new Subject()); - dataJobsApiServiceStub.getJobExecutions.and.returnValue(of({ content: [TEST_JOB_EXECUTION], totalItems: 1, totalPages: 1 })); - dataJobsApiServiceStub.getJobDeployments.and.returnValue(of([TEST_JOB_DEPLOYMENT])); + dataJobsApiServiceStub.getJobExecutions.and.returnValue( + of({ content: [TEST_JOB_EXECUTION], totalItems: 1, totalPages: 1 }) + ); + dataJobsApiServiceStub.getJobDeployments.and.returnValue( + of([TEST_JOB_DEPLOYMENT]) + ); dataJobsApiServiceStub.removeJob.and.returnValue(new Subject()); dataJobsApiServiceStub.downloadFile.and.returnValue(new Subject()); - dataJobsServiceStub.getNotifiedForRunningJobExecutionId.and.returnValue(new Subject()); - dataJobsServiceStub.getNotifiedForJobExecutions.and.returnValue(new Subject()); - dataJobsServiceStub.getNotifiedForTeamImplicitly.and.returnValue(new BehaviorSubject('taurus')); + dataJobsServiceStub.getNotifiedForRunningJobExecutionId.and.returnValue( + new Subject() + ); + dataJobsServiceStub.getNotifiedForJobExecutions.and.returnValue( + new Subject() + ); + dataJobsServiceStub.getNotifiedForTeamImplicitly.and.returnValue( + new BehaviorSubject('taurus') + ); TestBed.configureTestingModule({ - imports: [ - RouterTestingModule.withRoutes([]) - ], + imports: [RouterTestingModule.withRoutes([])], schemas: [NO_ERRORS_SCHEMA], declarations: [DataJobPageComponent], providers: [ @@ -163,28 +187,31 @@ describe('DataJobsDetailsComponent', () => { { provide: RouterService, useValue: routerServiceStub }, { provide: ActivatedRoute, useFactory: activatedRouteStub }, { provide: ToastService, useValue: toastServiceStub }, - { provide: DataJobsApiService, useValue: dataJobsApiServiceStub }, + { + provide: DataJobsApiService, + useValue: dataJobsApiServiceStub, + }, { provide: DataJobsService, useValue: dataJobsServiceStub }, - { provide: ErrorHandlerService, useValue: errorHandlerServiceStub }, + { + provide: ErrorHandlerService, + useValue: errorHandlerServiceStub, + }, { provide: DATA_PIPELINES_CONFIGS, useFactory: () => ({ defaultOwnerTeamName: 'all', manageConfig: { allowKeyTabDownloads: true, - allowExecuteNow: true - } - }) - } - ] + allowExecuteNow: true, + }, + }), + }, + ], }); componentModelStub = ComponentModel.of( ComponentStateImpl.of({}), - RouterState.of( - RouteState.empty(), - 1 - ) + RouterState.of(RouteState.empty(), 1) ); componentServiceStub.init.and.returnValue(of(componentModelStub)); componentServiceStub.getModel.and.returnValue(of(componentModelStub)); @@ -223,7 +250,9 @@ describe('DataJobsDetailsComponent', () => { // @ts-ignore spyOn(component, '_submitOperationStarted').and.callThrough(); // @ts-ignore - spyOn(component, '_extractJobDeployment').and.returnValue({ id: '10' } as DataJobDetails); + spyOn(component, '_extractJobDeployment').and.returnValue({ + id: '10', + } as DataJobDetails); // When component.confirmExecuteJob(); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.ts index c8559c0ac5..1a37c42d24 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.ts @@ -10,7 +10,17 @@ import { ActivatedRoute, Params } from '@angular/router'; import { HttpErrorResponse } from '@angular/common/http'; import { interval, of, Subject, timer } from 'rxjs'; -import { catchError, filter, finalize, map, switchMap, take, takeUntil, takeWhile, tap } from 'rxjs/operators'; +import { + catchError, + filter, + finalize, + map, + switchMap, + take, + takeUntil, + takeWhile, + tap, +} from 'rxjs/operators'; import { ClrLoadingState } from '@clr/angular'; @@ -30,12 +40,16 @@ import { RouterService, RouteState, TaurusBaseComponent, - ToastService + ToastService, } from '@vdk/shared'; import { DataJobUtil, ErrorUtil } from '../../shared/utils'; import { ExtractJobStatusPipe } from '../../shared/pipes'; -import { ConfirmationModalOptions, DeleteModalOptions, ModalOptions } from '../../shared/model'; +import { + ConfirmationModalOptions, + DeleteModalOptions, + ModalOptions, +} from '../../shared/model'; import { DATA_PIPELINES_CONFIGS, @@ -46,7 +60,7 @@ import { DataJobExecutionsPage, DataJobStatus, DataPipelinesConfig, - ToastDefinitions + ToastDefinitions, } from '../../model'; import { DataJobsApiService, DataJobsService } from '../../services'; @@ -59,15 +73,18 @@ enum TypeButtonState { /* eslint-disable-next-line @typescript-eslint/naming-convention */ DELETE, /* eslint-disabe-next-line @typescript-eslint/naming-convention */ - STOP + STOP, } @Component({ selector: 'lib-data-job-page', templateUrl: './data-job-page.component.html', - styleUrls: ['./data-job-page.component.scss'] + styleUrls: ['./data-job-page.component.scss'], }) -export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, OnTaurusModelInit, OnTaurusModelError { +export class DataJobPageComponent + extends TaurusBaseComponent + implements OnInit, OnTaurusModelInit, OnTaurusModelError +{ readonly uuid = 'DataJobPageComponent'; teamName = ''; @@ -103,18 +120,22 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, private _nonExistingJobMsgShowed = false; - constructor(componentService: ComponentService, // NOSONAR - navigationService: NavigationService, - activatedRoute: ActivatedRoute, - private readonly routerService: RouterService, - private readonly dataJobsService: DataJobsService, - private readonly dataJobsApiService: DataJobsApiService, - private readonly toastService: ToastService, - private readonly errorHandlerService: ErrorHandlerService, - @Inject(DATA_PIPELINES_CONFIGS) public readonly dataPipelinesModuleConfig: DataPipelinesConfig) { + constructor( + componentService: ComponentService, // NOSONAR + navigationService: NavigationService, + activatedRoute: ActivatedRoute, + private readonly routerService: RouterService, + private readonly dataJobsService: DataJobsService, + private readonly dataJobsApiService: DataJobsApiService, + private readonly toastService: ToastService, + private readonly errorHandlerService: ErrorHandlerService, + @Inject(DATA_PIPELINES_CONFIGS) + public readonly dataPipelinesModuleConfig: DataPipelinesConfig + ) { super(componentService, navigationService, activatedRoute); - this.isSubpageNavigation = !!activatedRoute.snapshot.data['activateSubpageNavigation']; + this.isSubpageNavigation = + !!activatedRoute.snapshot.data['activateSubpageNavigation']; this.deleteOptions = new DeleteModalOptions(); this.executeNowOptions = new ConfirmationModalOptions(); @@ -128,8 +149,7 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, $event?.preventDefault(); // eslint-disable-next-line @typescript-eslint/no-floating-promises - this.navigateBack({ '$.team': this.teamName }) - .then(); + this.navigateBack({ '$.team': this.teamName }).then(); } /** @@ -143,8 +163,8 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, * ** Show confirmation dialog for Job execution. */ executeJob() { - this.executeNowOptions.title = `Execute ${ this.jobName } now?`; - this.executeNowOptions.message = `Job ${ this.jobName } will be queued for execution.`; + this.executeNowOptions.title = `Execute ${this.jobName} now?`; + this.executeNowOptions.message = `Job ${this.jobName} will be queued for execution.`; this.executeNowOptions.infoText = `Confirming will result in immediate data job execution.`; this.executeNowOptions.opened = true; } @@ -169,7 +189,9 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, ) .subscribe({ next: () => { - this.toastService.show(ToastDefinitions.successfullyRanJob(this.jobName)); + this.toastService.show( + ToastDefinitions.successfullyRanJob(this.jobName) + ); let previousReqFinished = true; @@ -181,26 +203,33 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, // eslint-disable-next-line rxjs/no-unsafe-takeuntil takeUntil(timer(30000)), // Timer limit when polling to stop = 30s filter(() => previousReqFinished), - tap(() => previousReqFinished = false), + tap(() => (previousReqFinished = false)), switchMap(() => - this.dataJobsApiService.getJobExecutions( - this.teamName, - this.jobName, - true, - null, - { property: 'startTime', direction: ASC } - ).pipe( - catchError((error: unknown) => { - this.errorHandlerService.processError( - ErrorUtil.extractError(error as Error) - ); - - return of([]); - }), - finalize(() => { - previousReqFinished = true; - }) - ) + this.dataJobsApiService + .getJobExecutions( + this.teamName, + this.jobName, + true, + null, + { + property: 'startTime', + direction: ASC, + } + ) + .pipe( + catchError((error: unknown) => { + this.errorHandlerService.processError( + ErrorUtil.extractError( + error as Error + ) + ); + + return of([]); + }), + finalize(() => { + previousReqFinished = true; + }) + ) ), map((executions: DataJobExecutionsPage) => executions.content @@ -208,7 +237,13 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, : [] ), takeWhile((executions) => { - if (CollectionsUtil.isArrayEmpty(executions) || executions.length <= this.jobExecutions.length) { + if ( + CollectionsUtil.isArrayEmpty( + executions + ) || + executions.length <= + this.jobExecutions.length + ) { return true; } @@ -216,13 +251,22 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, this.areJobExecutionsLoaded = true; - const lastExecution = executions[executions.length - 1]; - if (!DataJobUtil.isJobRunningPredicate(lastExecution)) { + const lastExecution = + executions[executions.length - 1]; + if ( + !DataJobUtil.isJobRunningPredicate( + lastExecution + ) + ) { return true; } - this.dataJobsService.notifyForJobExecutions(executions); - this.dataJobsService.notifyForRunningJobExecutionId(lastExecution.id); + this.dataJobsService.notifyForJobExecutions( + executions + ); + this.dataJobsService.notifyForRunningJobExecutionId( + lastExecution.id + ); return false; // Stop polling if above condition is met. }) @@ -234,12 +278,13 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, this.errorHandlerService.processError( ErrorUtil.extractError(error as Error), { - title: (error as HttpErrorResponse)?.status === 409 - ? 'Failed, Data job is already executing' - : 'Failed to queue Data job for execution' + title: + (error as HttpErrorResponse)?.status === 409 + ? 'Failed, Data job is already executing' + : 'Failed to queue Data job for execution', } ); - } + }, }) ); } @@ -251,10 +296,7 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, this._submitOperationStarted(TypeButtonState.DOWNLOAD); this.dataJobsApiService - .downloadFile( - this.teamName, - this.jobName - ) + .downloadFile(this.teamName, this.jobName) .pipe( finalize(() => { this._submitOperationEnded(); @@ -262,28 +304,31 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, ) .subscribe({ next: (response: Blob) => { - const blob: Blob = new Blob([response], { type: 'application/octet-stream' }); + const blob: Blob = new Blob([response], { + type: 'application/octet-stream', + }); // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access - fileSaver.saveAs(blob, `${ this.jobName }.keytab`); + fileSaver.saveAs(blob, `${this.jobName}.keytab`); this.toastService.show({ type: VmwToastType.INFO, title: `Download completed`, - description: `Data job keytab "${ this.jobName }.keytab" successfully downloaded` + description: `Data job keytab "${this.jobName}.keytab" successfully downloaded`, }); }, error: (error: unknown) => { - const errorDescription = (error as HttpErrorResponse)?.status === 404 - ? `Download failed. Keytab file doesn't exist for this job.` - : `Download failed. Keytab file failed to download.`; + const errorDescription = + (error as HttpErrorResponse)?.status === 404 + ? `Download failed. Keytab file doesn't exist for this job.` + : `Download failed. Keytab file failed to download.`; this.errorHandlerService.processError( ErrorUtil.extractError(error as Error), { - description: errorDescription + description: errorDescription, } ); - } + }, }); } @@ -291,7 +336,7 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, * ** Show confirmation dialog for Job Remove (Delete). */ removeJob() { - this.deleteOptions.message = `Job ${ this.jobName } will be deleted. + this.deleteOptions.message = `Job ${this.jobName} will be deleted. Currently executing Data Jobs will be left to finish but the credentials will be revoked.`; this.deleteOptions.infoText = `Deleting this job means that it will be permanently removed from the system including all its state (properties), source code and any deployments.`; @@ -318,7 +363,7 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, this.toastService.show({ type: VmwToastType.INFO, title: `Data job delete completed`, - description: `Data job "${ this.jobName }" successfully deleted` + description: `Data job "${this.jobName}" successfully deleted`, }); this.doNavigateBack(); @@ -327,16 +372,21 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, this.errorHandlerService.processError( ErrorUtil.extractError(error as Error), { - title: `Data job delete failed` + title: `Data job delete failed`, } ); - } + }, }); } confirmCancelDataJob() { this._submitOperationStarted(TypeButtonState.STOP); - this.dataJobsApiService.cancelDataJobExecution(this.teamName, this.jobName, this.lastExecution()?.id) + this.dataJobsApiService + .cancelDataJobExecution( + this.teamName, + this.jobName, + this.lastExecution()?.id + ) .pipe( finalize(() => { this._submitOperationEnded(); @@ -348,17 +398,17 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, this.toastService.show({ type: VmwToastType.INFO, title: `Data job execution cancellation completed`, - description: `Data job "${ this.jobName }" successfully canceled` + description: `Data job "${this.jobName}" successfully canceled`, }); }, error: (error: unknown) => { this.errorHandlerService.processError( ErrorUtil.extractError(error as Error), { - title: `Data job cancellation failed` + title: `Data job cancellation failed`, } ); - } + }, }); } @@ -366,8 +416,10 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, * ** Show confirmation dialog for Job execution cancellation. */ cancelExecution() { - this.cancelNowOptions.title = `Cancel ${ this.lastExecution()?.id } now?`; - this.cancelNowOptions.message = `Execution ${ this.lastExecution()?.id } will be canceled.`; + this.cancelNowOptions.title = `Cancel ${this.lastExecution()?.id} now?`; + this.cancelNowOptions.message = `Execution ${ + this.lastExecution()?.id + } will be canceled.`; this.cancelNowOptions.infoText = `Confirming will result in immediate data job execution cancellation.`; this.cancelNowOptions.opened = true; } @@ -386,9 +438,7 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, onModelInit(): void { this.routerService .getState() - .pipe( - take(1) - ) + .pipe(take(1)) .subscribe((state) => this._initialize(state)); } @@ -396,9 +446,7 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, * @inheritDoc */ onModelError(model?: ComponentModel) { - const error = ErrorUtil.extractError( - model.getComponentState().error - ); + const error = ErrorUtil.extractError(model.getComponentState().error); this.errorHandlerService.processError(error); } @@ -407,7 +455,10 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, const teamParamKey = state.getData('teamParamKey'); this.teamName = state.getParam(teamParamKey); - if (CollectionsUtil.isNil(teamParamKey) || CollectionsUtil.isNil(this.teamName)) { + if ( + CollectionsUtil.isNil(teamParamKey) || + CollectionsUtil.isNil(this.teamName) + ) { this._subscribeForImplicitTeam(); } @@ -418,8 +469,9 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, this.queryParams = state.queryParams; - this.isDownloadJobKeyAllowed = this.dataPipelinesModuleConfig.manageConfig?.allowKeyTabDownloads - && this.isJobEditable; + this.isDownloadJobKeyAllowed = + this.dataPipelinesModuleConfig.manageConfig?.allowKeyTabDownloads && + this.isJobEditable; this._subscribeForTeamChange(state); this._subscribeForExecutionsChange(); @@ -431,27 +483,30 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, private _subscribeForImplicitTeam(): void { this.dataJobsService .getNotifiedForTeamImplicitly() - .pipe( - take(1) - ) - .subscribe((teamName) => this.teamName = teamName); + .pipe(take(1)) + .subscribe((teamName) => (this.teamName = teamName)); } private _subscribeForTeamChange(state: RouteState): void { - const shouldActivateListener = !!state.getData('activateListenerForTeamChange'); + const shouldActivateListener = !!state.getData( + 'activateListenerForTeamChange' + ); - if (shouldActivateListener && this.dataPipelinesModuleConfig?.manageConfig?.selectedTeamNameObservable) { + if ( + shouldActivateListener && + this.dataPipelinesModuleConfig?.manageConfig + ?.selectedTeamNameObservable + ) { this.subscriptions.push( - this.dataPipelinesModuleConfig - .manageConfig - .selectedTeamNameObservable - .subscribe((newTeam) => { + this.dataPipelinesModuleConfig.manageConfig.selectedTeamNameObservable.subscribe( + (newTeam) => { if (this.teamName !== newTeam) { this.teamName = newTeam; this.doNavigateBack(); } - }) + } + ) ); } } @@ -475,28 +530,39 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, switchMap((id) => interval(5000).pipe( switchMap(() => - this.dataJobsApiService.getJobExecution( - this.teamName, - this.jobName, - id - ).pipe( - catchError((error: unknown) => { - this.errorHandlerService.processError( - ErrorUtil.extractError(error as Error) - ); - - return of(null); - }) + this.dataJobsApiService + .getJobExecution( + this.teamName, + this.jobName, + id + ) + .pipe( + catchError((error: unknown) => { + this.errorHandlerService.processError( + ErrorUtil.extractError( + error as Error + ) + ); + + return of(null); + }) + ) + ), + tap((executionDetails) => + this._replaceRunningExecutionAndNotify( + executionDetails ) ), - tap((executionDetails) => this._replaceRunningExecutionAndNotify(executionDetails)), takeWhile((executionDetails) => { - const isRunning = CollectionsUtil.isNil(executionDetails) || - DataJobUtil.isJobRunningPredicate(executionDetails); + const isRunning = + CollectionsUtil.isNil(executionDetails) || + DataJobUtil.isJobRunningPredicate( + executionDetails + ); if (!isRunning) { this.isDataJobRunning = false; } - return isRunning + return isRunning; }) ) ) @@ -509,29 +575,40 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, .getNotifiedForRunningJobExecutionId() .pipe( switchMap((executionId: string) => - this.dataJobsApiService.getJobExecution( - this.teamName, - this.jobName, - executionId - ).pipe( - map((executionDetails) => [executionId, executionDetails]), - catchError((error: unknown) => { - this.errorHandlerService.processError( - ErrorUtil.extractError(error as Error) - ); - - return of([executionId]); - }) - ) + this.dataJobsApiService + .getJobExecution( + this.teamName, + this.jobName, + executionId + ) + .pipe( + map((executionDetails) => [ + executionId, + executionDetails, + ]), + catchError((error: unknown) => { + this.errorHandlerService.processError( + ErrorUtil.extractError(error as Error) + ); + + return of([executionId]); + }) + ) ) ) - .subscribe(([executionId, executionDetails]: [string, DataJobExecutionDetails]) => { - - this.isDataJobRunning = true; - this.cancelDataJobDisabled = false; - this._replaceRunningExecutionAndNotify(executionDetails); - scheduleLastExecutionPolling.next(executionId); - }) + .subscribe( + ([executionId, executionDetails]: [ + string, + DataJobExecutionDetails + ]) => { + this.isDataJobRunning = true; + this.cancelDataJobDisabled = false; + this._replaceRunningExecutionAndNotify( + executionDetails + ); + scheduleLastExecutionPolling.next(executionId); + } + ) ); } @@ -549,7 +626,7 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, console.error('Error loading jobDetails', error); } - } + }, }) ); this.subscriptions.push( @@ -561,8 +638,10 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, this.isJobAvailable = true; this.jobDeployments = job.deployments; - this.isExecuteJobAllowed = ExtractJobStatusPipe - .transform(this.jobDeployments) !== DataJobStatus.NOT_DEPLOYED; + this.isExecuteJobAllowed = + ExtractJobStatusPipe.transform( + this.jobDeployments + ) !== DataJobStatus.NOT_DEPLOYED; return; } @@ -574,10 +653,10 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, this.errorHandlerService.processError( ErrorUtil.extractError(error as Error), { - title: `Loading Data job "${ this.jobName }" failed` + title: `Loading Data job "${this.jobName}" failed`, } ); - } + }, }) ); } @@ -585,16 +664,25 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, private _loadJobExecutions(): void { this.subscriptions.push( this.dataJobsApiService - .getJobExecutions(this.teamName, this.jobName, true, null, { property: 'startTime', direction: ASC }) + .getJobExecutions(this.teamName, this.jobName, true, null, { + property: 'startTime', + direction: ASC, + }) .subscribe({ next: (value) => { if (value?.content) { - this.dataJobsService.notifyForJobExecutions([...value.content]); + this.dataJobsService.notifyForJobExecutions([ + ...value.content, + ]); // eslint-disable-next-line @typescript-eslint/unbound-method - const runningExecution = value.content.find(DataJobUtil.isJobRunningPredicate); + const runningExecution = value.content.find( + DataJobUtil.isJobRunningPredicate + ); if (runningExecution) { - this.dataJobsService.notifyForRunningJobExecutionId(runningExecution.id); + this.dataJobsService.notifyForRunningJobExecutionId( + runningExecution.id + ); } } @@ -604,25 +692,28 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, this.errorHandlerService.processError( ErrorUtil.extractError(error as Error) ); - } + }, }) ); } - private _replaceRunningExecutionAndNotify(executionDetails: DataJobExecutionDetails): void { + private _replaceRunningExecutionAndNotify( + executionDetails: DataJobExecutionDetails + ): void { if (CollectionsUtil.isNil(executionDetails)) { return; } - const convertedExecution = DataJobUtil.convertFromExecutionDetailsToExecutionState(executionDetails); - const foundIndex = this.jobExecutions.findIndex((ex) => ex.id === convertedExecution.id); + const convertedExecution = + DataJobUtil.convertFromExecutionDetailsToExecutionState( + executionDetails + ); + const foundIndex = this.jobExecutions.findIndex( + (ex) => ex.id === convertedExecution.id + ); if (foundIndex !== -1) { - this.jobExecutions.splice( - foundIndex, - 1, - convertedExecution - ); + this.jobExecutions.splice(foundIndex, 1, convertedExecution); } else { this.jobExecutions.push(convertedExecution); } @@ -672,8 +763,8 @@ export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, this.toastService.show({ type: VmwToastType.FAILURE, - title: `Job "${ this.jobName }" doesn't exist`, - description: `Data Job "${ this.jobName }" for Team "${ this.teamName }" doesn't exist, will load Data Jobs list` + title: `Job "${this.jobName}" doesn't exist`, + description: `Data Job "${this.jobName}" for Team "${this.teamName}" doesn't exist, will load Data Jobs list`, }); } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.html index fa643101c9..35be42dc01 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.html @@ -5,137 +5,266 @@ -
    +
    -
    - - - -
    Status
    + + +
    + Status +
    - +
    - + - + - +
    - - -
    Description
    + +
    + Description +
    - {{ - description.value }}
    - + {{ description.value }}
    +     - {{ description.value | words: - descriptionWordsBeforeTruncate }} - + {{ + description.value + | words: descriptionWordsBeforeTruncate + }} +
    - - + +
    - -
    Owner team + +
    + Owner team
    - - {{team.value}} + + {{ team.value }}
    - -
    Schedule (in UTC)
    -
    - {{ jobDetails?.config?.schedule?.schedule_cron | formatSchedule:'Not scheduled' }} + +
    + Schedule (in UTC) +
    +
    + {{ + jobDetails?.config?.schedule?.schedule_cron + | formatSchedule: "Not scheduled" + }} - - - Cron expression
    - {{jobDetails?.config?.schedule?.schedule_cron}} -
    -
    + + + Cron expression
    + {{ + jobDetails?.config?.schedule + ?.schedule_cron + }} +
    +
    Next 5 executions
      -
    1. +
    2. {{ - jobDetails?.config?.schedule?.schedule_cron | parseNextRun:times | date: - 'MMM d, y, hh:mm a':'UTC' - }} UTC + jobDetails?.config?.schedule + ?.schedule_cron + | parseNextRun: times + | date + : "MMM d, y, hh:mm a" + : "UTC" + }} + UTC
    -
    {{cronError}}     +
    {{ cronError }}
    - - + +
    - -
    Source location
    + +
    + Source location +
    -
    -
    +
    +
    The data job is not deployed
    @@ -145,159 +274,418 @@
    -
    - - -
    Notifications + + +
    + Notifications - - Notifications are used to inform the users about a specific activity. - To configure notifications, edit data job's config.ini file and redeploy the data - job. + + Notifications are used to inform the users + about a specific activity. To configure + notifications, edit data job's config.ini + file and redeploy the data job.
    - On Job Deployed + On Job Deployed
    -
    +
    -
    -
    - {{contacts}} + *ngIf=" + ( + jobDetails?.config?.contacts + ?.notified_on_job_deploy + | extractContacts + ).length > 0 + " + > +
    +
    + {{ contacts }}
    -
    +
    - - +
      -
    • - {{contacts}} +
    • + {{ + contacts + }}
    - + Not configured
    - +
    -
    +
    -
    -
    - {{contacts}} + *ngIf=" + ( + jobDetails?.config?.contacts + ?.notified_on_job_failure_platform_error + | extractContacts + ).length > 0 + " + > +
    +
    + {{ contacts }}
    -
    +
    - - +
      -
    • - {{contacts}} +
    • + {{ + contacts + }}
    - + Not configured
    - +
    -
    +
    -
    -
    - {{contacts}} + *ngIf=" + ( + jobDetails?.config?.contacts + ?.notified_on_job_failure_user_error + | extractContacts + ).length > 0 + " + > +
    +
    + {{ contacts }}
    -
    +
    - - +
      -
    • - {{contacts}} +
    • + {{ + contacts + }}
    - + Not configured
    - +
    -
    +
    -
    -
    - {{contacts}} + *ngIf=" + ( + jobDetails?.config?.contacts + ?.notified_on_job_success + | extractContacts + ).length > 0 + " + > +
    +
    + {{ contacts }}
    -
    +
    - - +
      -
    • - {{contacts}} +
    • + {{ + contacts + }}
    - + Not configured
    @@ -307,26 +695,66 @@
    - - + + - - + + - - + + - - + + - +
    @@ -337,20 +765,34 @@
    Last 5 Executions -
    -
    -
    +
    +
    - We couldn't find any executions, but you can always schedule one! + We couldn't find any executions, but you can always + schedule one!
    - +
    Loading executions...
    diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.scss index 770161f719..dbb147521f 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.scss @@ -4,143 +4,140 @@ */ @mixin fill-parent-content() { - display: flex; - flex-direction: column; - flex: 1 1 auto; + display: flex; + flex-direction: column; + flex: 1 1 auto; } hr { - border: 0; - height: 1px; - background: #8f9ba3; + border: 0; + height: 1px; + background: #8f9ba3; } .label-link { - cursor: pointer; + cursor: pointer; } .label-link-suppress-decoration { - &:hover { - text-decoration: none; - } + &:hover { + text-decoration: none; + } } -::ng-deep -.edit-column-modal { - .modal-header { - padding: 0 0 0 0 !important; - } +::ng-deep .edit-column-modal { + .modal-header { + padding: 0 0 0 0 !important; + } } -::ng-deep -.clr-timeline-horizontal { - padding-top: 0 !important; +::ng-deep .clr-timeline-horizontal { + padding-top: 0 !important; } - .status-icon-enabled { - color: hsl(93, 67%, 38%); + color: hsl(93, 67%, 38%); } .clr-col-6 { - border-right: 1px solid #999999; + border-right: 1px solid #999999; } .placeholder-error-label { - color: gray; + color: gray; } .grid-column-details { - display: grid; - height: 100%; - grid-template: "a a a b b b" auto "c c c c c c" auto "d d d d d d" auto "f f f f f f" auto/ 1fr 1fr 1fr 1fr 1fr 1fr; + display: grid; + height: 100%; + grid-template: "a a a b b b" auto "c c c c c c" auto "d d d d d d" auto "f f f f f f" auto/ 1fr 1fr 1fr 1fr 1fr 1fr; - .grid-area-a { - grid-area: a; - } + .grid-area-a { + grid-area: a; + } - .grid-area-b { - grid-area: b; - } + .grid-area-b { + grid-area: b; + } - .grid-area-c { - grid-area: c; - } + .grid-area-c { + grid-area: c; + } - .grid-area-d { - grid-area: d; - } + .grid-area-d { + grid-area: d; + } - .grid-area-e { - grid-area: e; - } + .grid-area-e { + grid-area: e; + } - .grid-area-f { - grid-area: f; - } + .grid-area-f { + grid-area: f; + } } -.clr-timeline-step clr-icon[shape=success-standard] { - color: var(--clr-timeline-success-step-color, #5eb715); +.clr-timeline-step clr-icon[shape="success-standard"] { + color: var(--clr-timeline-success-step-color, #5eb715); } -.clr-timeline-step clr-icon[shape=error-standard] { - color: var(--clr-timeline-error-step-color, #c21d00); +.clr-timeline-step clr-icon[shape="error-standard"] { + color: var(--clr-timeline-error-step-color, #c21d00); } .clr-timeline-step clr-icon { - height: 1.8rem; - width: 1.8rem; - min-height: 1.8rem; - min-width: 1.8rem; + height: 1.8rem; + width: 1.8rem; + min-height: 1.8rem; + min-width: 1.8rem; } .btn-show-more { - padding: 0 !important; + padding: 0 !important; } :host { - @include fill-parent-content(); + @include fill-parent-content(); } .data-pipelines-job__details-page { - @include fill-parent-content(); - - .data-pipelines-job__details-body { @include fill-parent-content(); - margin-bottom: 1rem; + .data-pipelines-job__details-body { + @include fill-parent-content(); - .data-pipelines-job__section--border-none { - border: none; - } + margin-bottom: 1rem; - .data-pipelines-job__contacts-container { - display: flex; - align-items: center; + .data-pipelines-job__section--border-none { + border: none; + } - .data-pipelines-job__contacts-list-container { - display: inline-flex; - align-items: center; + .data-pipelines-job__contacts-container { + display: flex; + align-items: center; - > div { - display: inline-flex; - margin-right: 0.3rem; + .data-pipelines-job__contacts-list-container { + display: inline-flex; + align-items: center; - &:last-child { - margin-right: 0; - } - } - } + > div { + display: inline-flex; + margin-right: 0.3rem; + + &:last-child { + margin-right: 0; + } + } + } - .data-pipelines-job__contacts-list-signpost-container { - display: inline-flex; - align-items: center; + .data-pipelines-job__contacts-list-signpost-container { + display: inline-flex; + align-items: center; - ul { - list-style-type: none; + ul { + list-style-type: none; + } + } } - } } - } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.spec.ts index 94136a24b8..1257647d98 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.spec.ts @@ -22,7 +22,7 @@ import { RouterService, RouterState, RouteState, - ToastService + ToastService, } from '@vdk/shared'; import { DataJobsApiService, DataJobsService } from '../../../../services'; @@ -36,9 +36,13 @@ import { DataJobExecution, DataJobExecutionsPage, DataJobExecutionStatus, - DataJobExecutionType + DataJobExecutionType, } from '../../../../model'; -import { ExtractContactsPipe, ExtractJobStatusPipe, FormatSchedulePipe } from '../../../../shared/pipes'; +import { + ExtractContactsPipe, + ExtractJobStatusPipe, + FormatSchedulePipe, +} from '../../../../shared/pipes'; import { DataJobDetailsPageComponent } from './data-job-details-page.component'; @@ -62,13 +66,13 @@ const TEST_JOB_EXECUTION = { memoryLimit: 1000, memoryRequest: 1000, cpuLimit: 0.5, - cpuRequest: 0.5 + cpuRequest: 0.5, }, executions: [], deployedDate: '2020-11-11T10:10:10Z', deployedBy: 'pmitev', - status: DataJobDeploymentStatus.SUCCESS - } + status: DataJobDeploymentStatus.SUCCESS, + }, } as DataJobExecution; const TEST_JOB_DEPLOYMENT = { @@ -78,14 +82,14 @@ const TEST_JOB_DEPLOYMENT = { job_version: '001', mode: 'test_mode', /* eslint-disable-next-line @typescript-eslint/naming-convention */ - vdk_version: '001' + vdk_version: '001', } as DataJobDeploymentDetails; const TEST_JOB_DETAILS = { /* eslint-disable-next-line @typescript-eslint/naming-convention */ job_name: 'job001', team: 'taurus', - description: 'description' + description: 'description', }; describe('DataJobsDetailsModalComponent', () => { @@ -103,68 +107,108 @@ describe('DataJobsDetailsModalComponent', () => { let fixture: ComponentFixture; beforeEach(() => { - componentServiceStub = jasmine.createSpyObj('componentService', ['init', 'getModel', 'idle', 'update']); - navigationServiceStub = jasmine.createSpyObj('navigationService', ['navigateTo', 'navigateBack']); + componentServiceStub = jasmine.createSpyObj( + 'componentService', + ['init', 'getModel', 'idle', 'update'] + ); + navigationServiceStub = jasmine.createSpyObj( + 'navigationService', + ['navigateTo', 'navigateBack'] + ); activatedRouteStub = { snapshot: null } as any; - routerServiceStub = jasmine.createSpyObj('routerService', ['getState']); - toastServiceStub = jasmine.createSpyObj('toastService', ['show']); - dataJobsApiServiceStub = jasmine.createSpyObj('dataJobsApiService', [ - 'getJobDetails', - 'getJobExecutions', - 'getJobDeployments', - 'downloadFile', - 'updateDataJobStatus', - 'updateDataJob', - 'executeDataJob', - 'removeJob', - 'getJob' - ]); - dataJobsServiceStub = jasmine.createSpyObj('dataJobsService', [ - 'loadJobs', - 'loadJob', - 'notifyForRunningJobExecutionId', - 'notifyForJobExecutions', - 'notifyForTeamImplicitly', - 'getNotifiedForRunningJobExecutionId', - 'getNotifiedForJobExecutions', - 'getNotifiedForTeamImplicitly' - ]); - errorHandlerServiceStub = jasmine.createSpyObj('errorHandlerService', [ - 'processError', - 'handleError' + routerServiceStub = jasmine.createSpyObj( + 'routerService', + ['getState'] + ); + toastServiceStub = jasmine.createSpyObj('toastService', [ + 'show', ]); + dataJobsApiServiceStub = jasmine.createSpyObj( + 'dataJobsApiService', + [ + 'getJobDetails', + 'getJobExecutions', + 'getJobDeployments', + 'downloadFile', + 'updateDataJobStatus', + 'updateDataJob', + 'executeDataJob', + 'removeJob', + 'getJob', + ] + ); + dataJobsServiceStub = jasmine.createSpyObj( + 'dataJobsService', + [ + 'loadJobs', + 'loadJob', + 'notifyForRunningJobExecutionId', + 'notifyForJobExecutions', + 'notifyForTeamImplicitly', + 'getNotifiedForRunningJobExecutionId', + 'getNotifiedForJobExecutions', + 'getNotifiedForTeamImplicitly', + ] + ); + errorHandlerServiceStub = jasmine.createSpyObj( + 'errorHandlerService', + ['processError', 'handleError'] + ); - dataJobsApiServiceStub.getJobDetails.and.returnValue(new BehaviorSubject(TEST_JOB_DETAILS).asObservable()); - dataJobsApiServiceStub.getJobExecutions.and - .returnValue(new BehaviorSubject({ - content: [TEST_JOB_EXECUTION], - totalItems: 1, - totalPages: 1 - }).asObservable()); - dataJobsApiServiceStub.getJobDeployments.and - .returnValue(new BehaviorSubject([TEST_JOB_DEPLOYMENT]).asObservable()); - dataJobsApiServiceStub.downloadFile.and.returnValue(new BehaviorSubject({} as never).asObservable()); - dataJobsApiServiceStub.updateDataJobStatus.and.returnValue(new BehaviorSubject<{ enabled: boolean }>({ enabled: true }).asObservable()); - dataJobsApiServiceStub.updateDataJob.and.returnValue(new BehaviorSubject({}).asObservable()); - dataJobsApiServiceStub.executeDataJob.and.returnValue(new BehaviorSubject(undefined).asObservable()); - dataJobsApiServiceStub.removeJob.and.returnValue(new BehaviorSubject(TEST_JOB_DETAILS).asObservable()); - dataJobsApiServiceStub.getJob.and.returnValue(of({ data: { content: [TEST_JOB_DETAILS] } } as DataJob)); - - dataJobsServiceStub.getNotifiedForJobExecutions.and.returnValue(new Subject()); - dataJobsServiceStub.getNotifiedForTeamImplicitly.and.returnValue(new BehaviorSubject(TEST_JOB_DETAILS.team)); + dataJobsApiServiceStub.getJobDetails.and.returnValue( + new BehaviorSubject(TEST_JOB_DETAILS).asObservable() + ); + dataJobsApiServiceStub.getJobExecutions.and.returnValue( + new BehaviorSubject({ + content: [TEST_JOB_EXECUTION], + totalItems: 1, + totalPages: 1, + }).asObservable() + ); + dataJobsApiServiceStub.getJobDeployments.and.returnValue( + new BehaviorSubject([ + TEST_JOB_DEPLOYMENT, + ]).asObservable() + ); + dataJobsApiServiceStub.downloadFile.and.returnValue( + new BehaviorSubject({} as never).asObservable() + ); + dataJobsApiServiceStub.updateDataJobStatus.and.returnValue( + new BehaviorSubject<{ enabled: boolean }>({ + enabled: true, + }).asObservable() + ); + dataJobsApiServiceStub.updateDataJob.and.returnValue( + new BehaviorSubject({}).asObservable() + ); + dataJobsApiServiceStub.executeDataJob.and.returnValue( + new BehaviorSubject(undefined).asObservable() + ); + dataJobsApiServiceStub.removeJob.and.returnValue( + new BehaviorSubject(TEST_JOB_DETAILS).asObservable() + ); + dataJobsApiServiceStub.getJob.and.returnValue( + of({ data: { content: [TEST_JOB_DETAILS] } } as DataJob) + ); + + dataJobsServiceStub.getNotifiedForJobExecutions.and.returnValue( + new Subject() + ); + dataJobsServiceStub.getNotifiedForTeamImplicitly.and.returnValue( + new BehaviorSubject(TEST_JOB_DETAILS.team) + ); componentModelStub = ComponentModel.of( ComponentStateImpl.of({}), - RouterState.of( - RouteState.empty(), - 1 - ) + RouterState.of(RouteState.empty(), 1) ); routerServiceStub.getState.and.returnValue(new Subject()); componentServiceStub.init.and.returnValue(of(componentModelStub)); componentServiceStub.getModel.and.returnValue(of(componentModelStub)); - navigationServiceStub.navigateBack.and.returnValue(Promise.resolve(true)); + navigationServiceStub.navigateBack.and.returnValue( + Promise.resolve(true) + ); TestBed.configureTestingModule({ schemas: [NO_ERRORS_SCHEMA], @@ -172,7 +216,8 @@ describe('DataJobsDetailsModalComponent', () => { DataJobDetailsPageComponent, FormatSchedulePipe, ExtractJobStatusPipe, - ExtractContactsPipe], + ExtractContactsPipe, + ], imports: [RouterTestingModule], providers: [ FormBuilder, @@ -180,21 +225,27 @@ describe('DataJobsDetailsModalComponent', () => { { provide: ComponentService, useValue: componentServiceStub }, { provide: NavigationService, useValue: navigationServiceStub }, { provide: ActivatedRoute, useValue: activatedRouteStub }, - { provide: DataJobsApiService, useValue: dataJobsApiServiceStub }, + { + provide: DataJobsApiService, + useValue: dataJobsApiServiceStub, + }, { provide: ToastService, useValue: toastServiceStub }, { provide: DataJobsService, useValue: dataJobsServiceStub }, - { provide: ErrorHandlerService, useValue: errorHandlerServiceStub }, + { + provide: ErrorHandlerService, + useValue: errorHandlerServiceStub, + }, { provide: DATA_PIPELINES_CONFIGS, useFactory: () => ({ defaultOwnerTeamName: 'all', manageConfig: { allowKeyTabDownloads: true, - allowExecuteNow: true - } - }) - } - ] + allowExecuteNow: true, + }, + }), + }, + ], }); fixture = TestBed.createComponent(DataJobDetailsPageComponent); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.ts index f842c64cae..81ff8591de 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.ts @@ -26,11 +26,20 @@ import { RouterService, RouteState, TaurusBaseComponent, - ToastService + ToastService, } from '@vdk/shared'; -import { ConfirmationModalOptions, DeleteModalOptions, ModalOptions } from '../../../../shared/model'; -import { CronUtil, DataJobUtil, ErrorUtil, StringUtil } from '../../../../shared/utils'; +import { + ConfirmationModalOptions, + DeleteModalOptions, + ModalOptions, +} from '../../../../shared/model'; +import { + CronUtil, + DataJobUtil, + ErrorUtil, + StringUtil, +} from '../../../../shared/utils'; import { ExtractJobStatusPipe, ParseEpochPipe } from '../../../../shared/pipes'; import { @@ -51,7 +60,7 @@ import { JOB_STATE_REQ_PARAM, JOB_STATUS_REQ_PARAM, ORDER_REQ_PARAM, - TEAM_NAME_REQ_PARAM + TEAM_NAME_REQ_PARAM, } from '../../../../model'; import { DataJobsApiService, DataJobsService } from '../../../../services'; @@ -60,18 +69,23 @@ import { TASK_LOAD_JOB_EXECUTIONS, TASK_LOAD_JOB_STATE, TASK_UPDATE_JOB_DESCRIPTION, - TASK_UPDATE_JOB_STATUS + TASK_UPDATE_JOB_STATUS, } from '../../../../state/tasks'; @Component({ selector: 'lib-data-job-details-page', templateUrl: './data-job-details-page.component.html', - styleUrls: ['./data-job-details-page.component.scss'] + styleUrls: ['./data-job-details-page.component.scss'], }) export class DataJobDetailsPageComponent extends TaurusBaseComponent - implements OnInit, OnTaurusModelInit, OnTaurusModelLoad, OnTaurusModelChange, OnTaurusModelError { - + implements + OnInit, + OnTaurusModelInit, + OnTaurusModelLoad, + OnTaurusModelChange, + OnTaurusModelError +{ readonly uuid = 'DataJobDetailsPageComponent'; dataJobStatusEnum = DataJobStatus; @@ -126,7 +140,8 @@ export class DataJobDetailsPageComponent return this.tmForm.get('description'); } - constructor( // NOSONAR + constructor( + // NOSONAR componentService: ComponentService, navigationService: NavigationService, activatedRoute: ActivatedRoute, @@ -137,7 +152,8 @@ export class DataJobDetailsPageComponent private readonly formBuilder: FormBuilder, private readonly toastService: ToastService, private readonly errorHandlerService: ErrorHandlerService, - @Inject(DATA_PIPELINES_CONFIGS) public readonly dataPipelinesModuleConfig: DataPipelinesConfig + @Inject(DATA_PIPELINES_CONFIGS) + public readonly dataPipelinesModuleConfig: DataPipelinesConfig ) { super(componentService, navigationService, activatedRoute); @@ -153,11 +169,18 @@ export class DataJobDetailsPageComponent } isDescriptionSubmitEnabled(): boolean { - return this._isFormSubmitEnabled() && this.description.value !== this.jobDetails.description; + return ( + this._isFormSubmitEnabled() && + this.description.value !== this.jobDetails.description + ); } isStatusSubmitEnabled(): boolean { - return this._isFormSubmitEnabled() && this.status.value !== ExtractJobStatusPipe.transform(this.jobState?.deployments); + return ( + this._isFormSubmitEnabled() && + this.status.value !== + ExtractJobStatusPipe.transform(this.jobState?.deployments) + ); } isJobRunning(): boolean { @@ -172,7 +195,11 @@ export class DataJobDetailsPageComponent if (sectionState.state === FORM_STATE.CAN_EDIT) { switch (sectionState.emittingSection) { case 'status': - this.status.setValue(ExtractJobStatusPipe.transform(this.jobState?.deployments)); + this.status.setValue( + ExtractJobStatusPipe.transform( + this.jobState?.deployments + ) + ); break; case 'description': this.description.setValue(this.jobDetails.description); @@ -189,11 +216,17 @@ export class DataJobDetailsPageComponent } submitForm(event: VMWFormState) { - if (event.emittingSection === 'description' && this.isDescriptionSubmitEnabled()) { + if ( + event.emittingSection === 'description' && + this.isDescriptionSubmitEnabled() + ) { this._doSubmitDescriptionUpdate(); } - if (event.emittingSection === 'status' && this.isStatusSubmitEnabled()) { + if ( + event.emittingSection === 'status' && + this.isStatusSubmitEnabled() + ) { this._doSubmitStatusUpdate(); } } @@ -225,9 +258,7 @@ export class DataJobDetailsPageComponent onModelInit(): void { this.routerService .getState() - .pipe( - take(1) - ) + .pipe(take(1)) .subscribe((routeState) => this._initialize(routeState)); } @@ -245,34 +276,45 @@ export class DataJobDetailsPageComponent */ onModelChange(model: ComponentModel, task: string): void { if (task === TASK_LOAD_JOB_STATE) { - this.jobState = model.getComponentState().data.get(JOB_STATE_DATA_KEY); + this.jobState = model + .getComponentState() + .data.get(JOB_STATE_DATA_KEY); this._initializeNextRunDate(); - this.allowExecutionsByDeployment = ExtractJobStatusPipe - .transform(this.jobState?.deployments) !== DataJobStatus.NOT_DEPLOYED; - this.cronError = CronUtil.getNextExecutionErrors(this.jobState?.config?.schedule?.scheduleCron); + this.allowExecutionsByDeployment = + ExtractJobStatusPipe.transform(this.jobState?.deployments) !== + DataJobStatus.NOT_DEPLOYED; + this.cronError = CronUtil.getNextExecutionErrors( + this.jobState?.config?.schedule?.scheduleCron + ); return; } if (task === TASK_LOAD_JOB_DETAILS) { - this.jobDetails = model.getComponentState().data.get(JOB_DETAILS_DATA_KEY); + this.jobDetails = model + .getComponentState() + .data.get(JOB_DETAILS_DATA_KEY); this._updateForm(); return; } if (task === TASK_LOAD_JOB_EXECUTIONS) { - const executions: DataJobExecutions = model.getComponentState() - .data - .get(JOB_EXECUTIONS_DATA_KEY); + const executions: DataJobExecutions = model + .getComponentState() + .data.get(JOB_EXECUTIONS_DATA_KEY); if (executions) { this.dataJobsService.notifyForJobExecutions([...executions]); // eslint-disable-next-line @typescript-eslint/unbound-method - const runningExecution = executions.find(DataJobUtil.isJobRunningPredicate); + const runningExecution = executions.find( + DataJobUtil.isJobRunningPredicate + ); if (runningExecution) { - this.dataJobsService.notifyForRunningJobExecutionId(runningExecution.id); + this.dataJobsService.notifyForRunningJobExecutionId( + runningExecution.id + ); } } @@ -283,10 +325,12 @@ export class DataJobDetailsPageComponent this.toastService.show({ type: VmwToastType.INFO, title: `Description update completed`, - description: `Data job "${ this.jobName }" description successfully updated` + description: `Data job "${this.jobName}" description successfully updated`, }); - this.jobDetails = model.getComponentState().data.get(JOB_DETAILS_DATA_KEY); + this.jobDetails = model + .getComponentState() + .data.get(JOB_DETAILS_DATA_KEY); this.editOperationEnded(); @@ -297,11 +341,18 @@ export class DataJobDetailsPageComponent this.toastService.show({ type: VmwToastType.INFO, title: `Status update completed`, - description: `Data job "${ this.jobName }" successfully ` + - `${ !this._extractJobDeployment()?.enabled ? 'enabled' : 'disabled' }` + description: + `Data job "${this.jobName}" successfully ` + + `${ + !this._extractJobDeployment()?.enabled + ? 'enabled' + : 'disabled' + }`, }); - this.jobState = model.getComponentState().data.get(JOB_STATE_DATA_KEY); + this.jobState = model + .getComponentState() + .data.get(JOB_STATE_DATA_KEY); this.editOperationEnded(); } @@ -311,9 +362,7 @@ export class DataJobDetailsPageComponent * @inheritDoc */ onModelError(model: ComponentModel, task: string): void { - const error = ErrorUtil.extractError( - model.getComponentState().error - ); + const error = ErrorUtil.extractError(model.getComponentState().error); let errorHandlerConfig: ErrorHandlerConfig; @@ -329,13 +378,13 @@ export class DataJobDetailsPageComponent break; case TASK_UPDATE_JOB_DESCRIPTION: errorHandlerConfig = { - title: 'Description update failed' + title: 'Description update failed', }; this.editOperationEnded(); break; case TASK_UPDATE_JOB_STATUS: errorHandlerConfig = { - title: 'Status update failed' + title: 'Status update failed', }; this.editOperationEnded(); break; @@ -354,16 +403,18 @@ export class DataJobDetailsPageComponent this._initializeNextRunDate(); - this.shouldShowTeamsSection = this.dataPipelinesModuleConfig - ?.exploreConfig - ?.showTeamsColumn; + this.shouldShowTeamsSection = + this.dataPipelinesModuleConfig?.exploreConfig?.showTeamsColumn; } private _initialize(state: RouteState): void { const teamParamKey = state.getData('teamParamKey'); this.teamName = state.getParam(teamParamKey); - if (CollectionsUtil.isNil(teamParamKey) || CollectionsUtil.isNil(this.teamName)) { + if ( + CollectionsUtil.isNil(teamParamKey) || + CollectionsUtil.isNil(this.teamName) + ) { this._subscribeForImplicitTeam(); } @@ -382,24 +433,27 @@ export class DataJobDetailsPageComponent this.model .withRequestParam(TEAM_NAME_REQ_PARAM, this.teamName) .withRequestParam(JOB_NAME_REQ_PARAM, this.jobName) - .withRequestParam(ORDER_REQ_PARAM, { property: 'startTime', direction: ASC } as DataJobExecutionOrder) + .withRequestParam(ORDER_REQ_PARAM, { + property: 'startTime', + direction: ASC, + } as DataJobExecutionOrder) ); } private _subscribeForImplicitTeam(): void { this.dataJobsService .getNotifiedForTeamImplicitly() - .pipe( - take(1) - ) - .subscribe((teamName) => this.teamName = teamName); + .pipe(take(1)) + .subscribe((teamName) => (this.teamName = teamName)); } private _extractJobDeployment(): DataJobDeployment { if (!this.jobState?.deployments) { return null; } - return this.jobState?.deployments[this.jobState?.deployments.length - 1]; + return this.jobState?.deployments[ + this.jobState?.deployments.length - 1 + ]; } private _isFormSubmitEnabled(): boolean { @@ -411,7 +465,7 @@ export class DataJobDetailsPageComponent name: '', team: '', status: '', - description: '' + description: '', }); } @@ -420,20 +474,23 @@ export class DataJobDetailsPageComponent name: this.jobDetails.job_name, team: this.jobDetails.team, status: ExtractJobStatusPipe.transform(this.jobState?.deployments), - description: this.jobDetails.description + description: this.jobDetails.description, }); } private _doSubmitDescriptionUpdate(): void { const jobDetailsUpdated: DataJobDetails = { ...this.jobDetails, - description: this.description.value as string + description: this.description.value as string, }; this.dataJobsService.updateJob( this.model .withRequestParam(TEAM_NAME_REQ_PARAM, jobDetailsUpdated.team) - .withRequestParam(JOB_NAME_REQ_PARAM, jobDetailsUpdated.job_name) + .withRequestParam( + JOB_NAME_REQ_PARAM, + jobDetailsUpdated.job_name + ) .withRequestParam(JOB_DETAILS_REQ_PARAM, jobDetailsUpdated), TASK_UPDATE_JOB_DESCRIPTION ); @@ -443,7 +500,9 @@ export class DataJobDetailsPageComponent const jobDeployment = this._extractJobDeployment(); if (!jobDeployment) { - console.log('Status update will not be performed for job with no deployments.'); + console.log( + 'Status update will not be performed for job with no deployments.' + ); return; } @@ -453,10 +512,10 @@ export class DataJobDetailsPageComponent deployments: [ { ...this.jobState.deployments[0], - enabled: this.status.value === DataJobStatus.ENABLED + enabled: this.status.value === DataJobStatus.ENABLED, }, - ...this.jobState.deployments.slice(1) - ] + ...this.jobState.deployments.slice(1), + ], }; this.dataJobsService.updateJob( @@ -464,14 +523,19 @@ export class DataJobDetailsPageComponent .withRequestParam(TEAM_NAME_REQ_PARAM, this.jobDetails.team) .withRequestParam(JOB_NAME_REQ_PARAM, this.jobDetails.job_name) .withRequestParam(JOB_DEPLOYMENT_ID_REQ_PARAM, jobDeployment.id) - .withRequestParam(JOB_STATUS_REQ_PARAM, this.status.value === DataJobStatus.ENABLED) + .withRequestParam( + JOB_STATUS_REQ_PARAM, + this.status.value === DataJobStatus.ENABLED + ) .withRequestParam(JOB_STATE_REQ_PARAM, jobState), TASK_UPDATE_JOB_STATUS ); } private _initializeNextRunDate(): void { - this.next = ParseEpochPipe.transform(this.jobState?.config?.schedule?.nextRunEpochSeconds); + this.next = ParseEpochPipe.transform( + this.jobState?.config?.schedule?.nextRunEpochSeconds + ); } private _subscribeForExecutions(): void { diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.html index 9b1cfad3cd..8ea610f376 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.html @@ -3,33 +3,37 @@ ~ SPDX-License-Identifier: Apache-2.0 --> - +

    Deployment Details

    -
    Version
    -

    {{dataJobDeployment.jobVersion}}

    +

    {{ dataJobDeployment.jobVersion }}

    Deployed by
    -

    {{dataJobDeployment.deployedBy}}

    +

    {{ dataJobDeployment.deployedBy }}

    Deployed at (UTC)
    -

    {{dataJobDeployment.deployedDate | date:'MMM d, y, hh:mm a':'UTC'}}

    +

    + {{ + dataJobDeployment.deployedDate + | date: "MMM d, y, hh:mm a":"UTC" + }} +

    Schedule cron (UTC)
    -

    {{dataJobDeployment.schedule.scheduleCron}}

    +

    {{ dataJobDeployment.schedule.scheduleCron }}

    VDK version
    -

    {{dataJobDeployment.vdkVersion}}

    +

    {{ dataJobDeployment.vdkVersion }}

    @@ -39,17 +43,21 @@

    Learn more about resources requests and limits - +

    Learn more about each resource - +

    @@ -60,23 +68,22 @@

    CPU Limit
    -

    {{dataJobDeployment.resources.cpuLimit}}

    +

    {{ dataJobDeployment.resources.cpuLimit }}

    CPU Request
    -

    {{dataJobDeployment.resources.cpuRequest}}

    +

    {{ dataJobDeployment.resources.cpuRequest }}

    Memory Limit
    -

    {{dataJobDeployment.resources.memoryLimit}}

    +

    {{ dataJobDeployment.resources.memoryLimit }}

    Memory Request
    -

    {{dataJobDeployment.resources.memoryRequest}}

    +

    {{ dataJobDeployment.resources.memoryRequest }}

    -

    diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.scss index ed36651fc8..7812fae9ee 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.scss @@ -4,10 +4,11 @@ */ div.clr-row div { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; - p, h6 { - margin-top: 12px; - } + p, + h6 { + margin-top: 12px; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.ts index f141aa9c79..e110e40324 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.ts @@ -7,24 +7,23 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; import { DataJobDeployment } from '../../../../../model'; @Component({ - selector: 'lib-data-job-deployment-details-modal', - templateUrl: './data-job-deployment-details-modal.component.html', - styleUrls: ['./data-job-deployment-details-modal.component.scss'] + selector: 'lib-data-job-deployment-details-modal', + templateUrl: './data-job-deployment-details-modal.component.html', + styleUrls: ['./data-job-deployment-details-modal.component.scss'], }) export class DataJobDeploymentDetailsModalComponent { + @Output() openModalChange = new EventEmitter(); + @Input() dataJobDeployment: DataJobDeployment; - @Output() openModalChange = new EventEmitter(); - @Input() dataJobDeployment: DataJobDeployment; + private openModalValue: boolean; - private openModalValue: boolean; + @Input() + set openModal(value) { + this.openModalValue = value; + this.openModalChange.emit(this.openModalValue); + } - @Input() - set openModal(value) { - this.openModalValue = value; - this.openModalChange.emit(this.openModalValue); - } - - get openModal() { - return this.openModalValue; - } + get openModal() { + return this.openModalValue; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status-filter/data-job-execution-status-filter.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status-filter/data-job-execution-status-filter.component.html index 8fd5617e4c..7b57e5890e 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status-filter/data-job-execution-status-filter.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status-filter/data-job-execution-status-filter.component.html @@ -4,11 +4,15 @@ --> - + diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status-filter/data-job-execution-status-filter.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status-filter/data-job-execution-status-filter.component.ts index 76e7ac6b7c..9df9942429 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status-filter/data-job-execution-status-filter.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status-filter/data-job-execution-status-filter.component.ts @@ -15,10 +15,11 @@ import { GridDataJobExecution } from '../model'; @Component({ selector: 'lib-data-job-execution-status-filter', - templateUrl: './data-job-execution-status-filter.component.html' + templateUrl: './data-job-execution-status-filter.component.html', }) -export class DataJobExecutionStatusFilterComponent implements ClrDatagridFilterInterface { - +export class DataJobExecutionStatusFilterComponent + implements ClrDatagridFilterInterface +{ allStatuses = [ DataJobExecutionStatus.SUCCEEDED, DataJobExecutionStatus.PLATFORM_ERROR, @@ -26,7 +27,7 @@ export class DataJobExecutionStatusFilterComponent implements ClrDatagridFilterI DataJobExecutionStatus.RUNNING, DataJobExecutionStatus.SUBMITTED, DataJobExecutionStatus.SKIPPED, - DataJobExecutionStatus.CANCELLED + DataJobExecutionStatus.CANCELLED, ]; selectedStatuses: string[] = []; @@ -47,7 +48,9 @@ export class DataJobExecutionStatusFilterComponent implements ClrDatagridFilterI if (checkbox.checked) { this.selectedStatuses.push(checkbox.value); } else { - const statusToRemoveIndex = this.selectedStatuses.indexOf(checkbox.value); + const statusToRemoveIndex = this.selectedStatuses.indexOf( + checkbox.value + ); if (statusToRemoveIndex > -1) { this.selectedStatuses.splice(statusToRemoveIndex, 1); } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.html index 877ceab7c1..b5598c4b7d 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.html @@ -3,22 +3,36 @@ ~ SPDX-License-Identifier: Apache-2.0 --> - -
    - +
    + {{ jobMessage }} + [value]="jobMessage" + >
    - {{executionStatusProperties.text}} + {{ executionStatusProperties.text }} diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.scss index 0bb2097f19..db405e84c2 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.scss @@ -4,15 +4,15 @@ */ .job-execution-status__text { - margin-left: 0.25rem; + margin-left: 0.25rem; } :host { - display: block; - width: 100%; - height: 100%; + display: block; + width: 100%; + height: 100%; } .job-execution-signpost { - cursor: auto; + cursor: auto; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.ts index 82060bb5e2..237ef75419 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.ts @@ -7,15 +7,19 @@ import { Component, HostListener, Input } from '@angular/core'; import { DataJobExecutionStatus } from '../../../../../model'; -type StatusPropertiesMapping = { shape: string; status: string; direction: string; text: string }; +type StatusPropertiesMapping = { + shape: string; + status: string; + direction: string; + text: string; +}; @Component({ selector: 'lib-data-job-execution-status', templateUrl: './data-job-execution-status.component.html', - styleUrls: ['./data-job-execution-status.component.scss'] + styleUrls: ['./data-job-execution-status.component.scss'], }) export class DataJobExecutionStatusComponent { - @HostListener('mouseenter') onMouseEnter(): void { this.clrOpen = true; } @@ -30,26 +34,78 @@ export class DataJobExecutionStatusComponent { clrOpen = false; statusPropertiesMapping: { [key: string]: StatusPropertiesMapping } = { - [DataJobExecutionStatus.SUBMITTED]: { shape: 'hourglass', status: '', direction: '', text: 'Submitted' }, - [DataJobExecutionStatus.RUNNING]: { shape: 'play', status: '', direction: '', text: 'Running' }, - [DataJobExecutionStatus.SUCCEEDED]: { shape: 'success-standard', status: 'is-success', direction: '', text: 'Success' }, - [DataJobExecutionStatus.CANCELLED]: { shape: 'ban', status: '', direction: '', text: 'Canceled' }, - [DataJobExecutionStatus.SKIPPED]: { shape: 'angle-double', status: '', direction: 'right', text: 'Skipped' }, - [DataJobExecutionStatus.USER_ERROR]: { shape: 'error-standard', status: 'is-danger', direction: '', text: 'User Error' }, - [DataJobExecutionStatus.PLATFORM_ERROR]: { shape: 'error-standard', status: 'is-warning', direction: '', text: 'Platform Error' }, - [DataJobExecutionStatus.FAILED]: { shape: 'error-standard', status: 'is-danger', direction: '', text: 'Error' } + [DataJobExecutionStatus.SUBMITTED]: { + shape: 'hourglass', + status: '', + direction: '', + text: 'Submitted', + }, + [DataJobExecutionStatus.RUNNING]: { + shape: 'play', + status: '', + direction: '', + text: 'Running', + }, + [DataJobExecutionStatus.SUCCEEDED]: { + shape: 'success-standard', + status: 'is-success', + direction: '', + text: 'Success', + }, + [DataJobExecutionStatus.CANCELLED]: { + shape: 'ban', + status: '', + direction: '', + text: 'Canceled', + }, + [DataJobExecutionStatus.SKIPPED]: { + shape: 'angle-double', + status: '', + direction: 'right', + text: 'Skipped', + }, + [DataJobExecutionStatus.USER_ERROR]: { + shape: 'error-standard', + status: 'is-danger', + direction: '', + text: 'User Error', + }, + [DataJobExecutionStatus.PLATFORM_ERROR]: { + shape: 'error-standard', + status: 'is-warning', + direction: '', + text: 'Platform Error', + }, + [DataJobExecutionStatus.FAILED]: { + shape: 'error-standard', + status: 'is-danger', + direction: '', + text: 'Error', + }, }; get executionStatusProperties(): StatusPropertiesMapping { - return this.statusPropertiesMapping[this.jobStatus] ?? {} as StatusPropertiesMapping; + return ( + this.statusPropertiesMapping[this.jobStatus] ?? + ({} as StatusPropertiesMapping) + ); } isJobStatusSuitableForMessageTooltip(): boolean { - return this.jobStatus === DataJobExecutionStatus.PLATFORM_ERROR || this.jobStatus === DataJobExecutionStatus.USER_ERROR || this.jobStatus === DataJobExecutionStatus.SKIPPED; + return ( + this.jobStatus === DataJobExecutionStatus.PLATFORM_ERROR || + this.jobStatus === DataJobExecutionStatus.USER_ERROR || + this.jobStatus === DataJobExecutionStatus.SKIPPED + ); } isJobMessageDifferentFromStatus(): boolean { const message = this.jobMessage?.toLowerCase(); - return message !== 'user error' && message !== 'platform error' && message !== 'skipped' && message !== ''; + return ( + message !== 'user error' && + message !== 'platform error' && + message !== 'skipped' && + message !== '' + ); } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type-filter/data-job-execution-type-filter.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type-filter/data-job-execution-type-filter.component.html index a7ed4c9178..b14a172d38 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type-filter/data-job-execution-type-filter.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type-filter/data-job-execution-type-filter.component.html @@ -4,12 +4,14 @@ --> + - - - - + diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type-filter/data-job-execution-type-filter.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type-filter/data-job-execution-type-filter.component.ts index 228a1e00c7..f3eb248f7c 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type-filter/data-job-execution-type-filter.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type-filter/data-job-execution-type-filter.component.ts @@ -15,9 +15,11 @@ import { GridDataJobExecution } from '../model/data-job-execution'; @Component({ selector: 'lib-data-job-execution-type-filter', - templateUrl: './data-job-execution-type-filter.component.html' + templateUrl: './data-job-execution-type-filter.component.html', }) -export class DataJobExecutionTypeFilterComponent implements ClrDatagridFilterInterface { +export class DataJobExecutionTypeFilterComponent + implements ClrDatagridFilterInterface +{ allTypes = [DataJobExecutionType.MANUAL, DataJobExecutionType.SCHEDULED]; selectedTypes: string[] = []; changes: Subject = new Subject(); @@ -36,7 +38,9 @@ export class DataJobExecutionTypeFilterComponent implements ClrDatagridFilterInt if (checkbox.checked) { this.selectedTypes.push(checkbox.value); } else { - const statusToRemoveIndex = this.selectedTypes.indexOf(checkbox.value); + const statusToRemoveIndex = this.selectedTypes.indexOf( + checkbox.value + ); if (statusToRemoveIndex > -1) { this.selectedTypes.splice(statusToRemoveIndex, 1); } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type/data-job-execution-type.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type/data-job-execution-type.component.html index 9ffd1d4844..f46b102616 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type/data-job-execution-type.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type/data-job-execution-type.component.html @@ -3,9 +3,16 @@ ~ SPDX-License-Identifier: Apache-2.0 --> - - - + + diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type/data-job-execution-type.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type/data-job-execution-type.component.ts index c7a57ca678..497159f59e 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type/data-job-execution-type.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type/data-job-execution-type.component.ts @@ -11,15 +11,17 @@ import { GridDataJobExecution } from '../model/data-job-execution'; @Component({ selector: 'lib-data-job-execution-type', - templateUrl: './data-job-execution-type.component.html' + templateUrl: './data-job-execution-type.component.html', }) export class DataJobExecutionTypeComponent { - @Input() jobExecution: GridDataJobExecution; executionTypePropertiesMapping = { - [DataJobExecutionType.MANUAL]: { shape: 'cursor-hand-open', status: 'is-info' }, - [DataJobExecutionType.SCHEDULED]: { shape: 'clock', status: '' } + [DataJobExecutionType.MANUAL]: { + shape: 'cursor-hand-open', + status: 'is-info', + }, + [DataJobExecutionType.SCHEDULED]: { shape: 'clock', status: '' }, }; get executionTypeProperties() { diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/execution-duration-comparator.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/execution-duration-comparator.spec.ts index 5b6eaf8759..7a6cb86de8 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/execution-duration-comparator.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/execution-duration-comparator.spec.ts @@ -18,8 +18,20 @@ describe('DataJobExecutionDurationComparator', () => { // When const res = instance.compare( - { id: 'aJob', startTime: aStartTime.toISOString(), endTime: aEndTime.toISOString(), duration: '100', jobVersion: '' }, - { id: 'bJob', startTime: bStartTime.toISOString(), endTime: bEndTime.toISOString(), duration: '110', jobVersion: '' } + { + id: 'aJob', + startTime: aStartTime.toISOString(), + endTime: aEndTime.toISOString(), + duration: '100', + jobVersion: '', + }, + { + id: 'bJob', + startTime: bStartTime.toISOString(), + endTime: bEndTime.toISOString(), + duration: '110', + jobVersion: '', + } ); // Then diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/execution-duration-comparator.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/execution-duration-comparator.ts index f32f79d8b1..0f3c100534 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/execution-duration-comparator.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/execution-duration-comparator.ts @@ -7,7 +7,9 @@ import { ClrDatagridComparatorInterface } from '@clr/angular'; import { GridDataJobExecution } from '../../model/data-job-execution'; -export class DataJobExecutionDurationComparator implements ClrDatagridComparatorInterface { +export class DataJobExecutionDurationComparator + implements ClrDatagridComparatorInterface +{ /** * @inheritDoc */ diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.html index f857e9a2d7..8a86a75fc4 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.html @@ -3,93 +3,138 @@ ~ SPDX-License-Identifier: Apache-2.0 --> - - + We couldn't find any executions! - Status + Status - + - Type + Type - + - Duration + Duration - Start (UTC) + Start (UTC) - End (UTC) + End (UTC) - ID + ID - Version + Version - Logs - - + Logs + - - - - - {{ jobExecution.duration }} - {{ jobExecution.startTime | date:'MMM d, y, hh:mm:ss a':'UTC' }} {{ jobExecution.endTime | date:'MMM d, y, hh:mm:ss a':'UTC' }} + class="execution-type-cell grid-column__min-width--s grid-column__max-width--s" + data-cy="data-pipelines-job-executions-type-cell" + > + + + {{ + jobExecution.duration + }} + {{ + jobExecution.startTime | date: "MMM d, y, hh:mm:ss a":"UTC" + }} + {{ + jobExecution.endTime | date: "MMM d, y, hh:mm:ss a":"UTC" + }} {{ jobExecution.id }} - {{ jobExecution.jobVersion | slice:0:8 }} - - - + {{ jobExecution.jobVersion | slice: 0:8 }} + + + - - - - Executions per page - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} executions + + Executions per page + {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of + {{ pagination.totalItems }} executions - - - + diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.scss index 69e935d830..690eac0823 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.scss @@ -4,13 +4,13 @@ */ .execution-type-cell { - text-align: center; + text-align: center; } .grid-column__min-width--s { - min-width: 3.5rem; + min-width: 3.5rem; } .grid-column__max-width--s { - max-width: 4rem; + max-width: 4rem; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.ts index 9ddacb03b1..ba079dff45 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.ts @@ -3,7 +3,12 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + Input, +} from '@angular/core'; import { ClrDatagridSortOrder } from '@clr/angular'; @@ -17,10 +22,9 @@ import { DataJobExecutionDurationComparator } from './comparators/execution-dura selector: 'lib-data-job-executions-grid', templateUrl: './data-job-executions-grid.component.html', styleUrls: ['./data-job-executions-grid.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DataJobExecutionsGridComponent { - @Input() jobExecutions: GridDataJobExecution[]; @Input() loading = false; @@ -34,14 +38,13 @@ export class DataJobExecutionsGridComponent { /** * ** Constructor. */ - constructor(private readonly changeDetectorRef: ChangeDetectorRef) { - } + constructor(private readonly changeDetectorRef: ChangeDetectorRef) {} /** * ** NgFor elements tracking function. */ trackByFn(index: number, execution: GridDataJobExecution): string { - return `${ index }|${ execution?.id }`; + return `${index}|${execution?.id}`; } showDeploymentDetails(jobExecution: GridDataJobExecution) { diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.html index 40314bf2ac..9942d7fcf8 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.html @@ -4,21 +4,22 @@ --> - -
    - +
    - +
    -
    @@ -27,21 +28,26 @@
    - +
    - +
    -
    - +
    diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.scss index b689e45972..59fc634afc 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.scss @@ -4,28 +4,28 @@ */ :host { - position: relative; - display: block; - width: 100%; - height: 100%; + position: relative; + display: block; + width: 100%; + height: 100%; - .time-filter__container { - display: flex; - align-items: center; - flex: 1; - justify-content: flex-end; - height: 2.5rem; - } + .time-filter__container { + display: flex; + align-items: center; + flex: 1; + justify-content: flex-end; + height: 2.5rem; + } - .execution-statuses-chart { - padding-right: 0 !important; - } + .execution-statuses-chart { + padding-right: 0 !important; + } - .job-executions__spinner { - left: 50%; - position: absolute; - top: 50%; - z-index: 1000; - transform: translate(-50%, -50%); - } + .job-executions__spinner { + left: 50%; + position: absolute; + top: 50%; + z-index: 1000; + transform: translate(-50%, -50%); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.ts index dab4ace8a3..26ba4588e5 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.ts @@ -21,7 +21,7 @@ import { OnTaurusModelLoad, RouterService, RouteState, - TaurusBaseComponent + TaurusBaseComponent, } from '@vdk/shared'; import { DataJobUtil, ErrorUtil } from '../../../../../shared/utils'; @@ -35,22 +35,29 @@ import { JOB_EXECUTIONS_DATA_KEY, JOB_NAME_REQ_PARAM, ORDER_REQ_PARAM, - TEAM_NAME_REQ_PARAM + TEAM_NAME_REQ_PARAM, } from '../../../../../model'; import { DataJobsService } from '../../../../../services'; import { TASK_LOAD_JOB_EXECUTIONS } from '../../../../../state/tasks'; -import { DataJobExecutionToGridDataJobExecution, GridDataJobExecution } from '../model/data-job-execution'; +import { + DataJobExecutionToGridDataJobExecution, + GridDataJobExecution, +} from '../model/data-job-execution'; @Component({ selector: 'lib-data-job-executions-page', templateUrl: './data-job-executions-page.component.html', - styleUrls: ['./data-job-executions-page.component.scss'] + styleUrls: ['./data-job-executions-page.component.scss'], }) export class DataJobExecutionsPageComponent extends TaurusBaseComponent - implements OnTaurusModelInit, OnTaurusModelLoad, OnTaurusModelChange, OnTaurusModelError { - + implements + OnTaurusModelInit, + OnTaurusModelLoad, + OnTaurusModelChange, + OnTaurusModelError +{ readonly uuid = 'DataJobExecutionsPageComponent'; teamName: string; @@ -62,7 +69,10 @@ export class DataJobExecutionsPageComponent loading = true; initialLoading = true; - dateTimeFilter: { fromTime: Date; toTime: Date } = { fromTime: null, toTime: null }; + dateTimeFilter: { fromTime: Date; toTime: Date } = { + fromTime: null, + toTime: null, + }; constructor( componentService: ComponentService, @@ -70,47 +80,40 @@ export class DataJobExecutionsPageComponent activatedRoute: ActivatedRoute, private readonly routerService: RouterService, private readonly dataJobsService: DataJobsService, - private readonly errorHandlerService: ErrorHandlerService) { - + private readonly errorHandlerService: ErrorHandlerService + ) { super(componentService, navigationService, activatedRoute); } doNavigateBack(): void { // eslint-disable-next-line @typescript-eslint/no-floating-promises - this.navigateBack({ '$.team': this.teamName }) - .then(); + this.navigateBack({ '$.team': this.teamName }).then(); } onTimeFilterChange(dateTimeFilter: { fromTime: Date; toTime: Date }): void { this.dateTimeFilter = dateTimeFilter; - const modelFilter: DataJobExecutionFilter = this - .model - .getComponentState() - .requestParams - .get(FILTER_REQ_PARAM) ?? {}; + const modelFilter: DataJobExecutionFilter = + this.model + .getComponentState() + .requestParams.get(FILTER_REQ_PARAM) ?? {}; - if (CollectionsUtil.isNil(dateTimeFilter.fromTime) || CollectionsUtil.isNil(dateTimeFilter.toTime)) { + if ( + CollectionsUtil.isNil(dateTimeFilter.fromTime) || + CollectionsUtil.isNil(dateTimeFilter.toTime) + ) { delete modelFilter.startTimeGte; delete modelFilter.startTimeLte; - this.model - .withRequestParam( - FILTER_REQ_PARAM, - { - ...modelFilter - } as DataJobExecutionFilter - ); + this.model.withRequestParam(FILTER_REQ_PARAM, { + ...modelFilter, + } as DataJobExecutionFilter); } else { - this.model - .withRequestParam( - FILTER_REQ_PARAM, - { - ...modelFilter, - startTimeGte: dateTimeFilter.fromTime, - startTimeLte: dateTimeFilter.toTime - } as DataJobExecutionFilter - ); + this.model.withRequestParam(FILTER_REQ_PARAM, { + ...modelFilter, + startTimeGte: dateTimeFilter.fromTime, + startTimeLte: dateTimeFilter.toTime, + } as DataJobExecutionFilter); } this.fetchDataJobExecutions(); @@ -123,7 +126,10 @@ export class DataJobExecutionsPageComponent this.model .withRequestParam(TEAM_NAME_REQ_PARAM, this.teamName) .withRequestParam(JOB_NAME_REQ_PARAM, this.jobName) - .withRequestParam(ORDER_REQ_PARAM, { property: 'startTime', direction: ASC } as DataJobExecutionOrder) + .withRequestParam(ORDER_REQ_PARAM, { + property: 'startTime', + direction: ASC, + } as DataJobExecutionOrder) ); } @@ -133,9 +139,7 @@ export class DataJobExecutionsPageComponent onModelInit(): void { this.routerService .getState() - .pipe( - take(1) - ) + .pipe(take(1)) .subscribe((routeState) => this._initialize(routeState)); } @@ -152,14 +156,20 @@ export class DataJobExecutionsPageComponent */ onModelChange(model: ComponentModel, task: string): void { if (task === TASK_LOAD_JOB_EXECUTIONS) { - const executions: DataJobExecutions = model.getComponentState().data.get(JOB_EXECUTIONS_DATA_KEY); + const executions: DataJobExecutions = model + .getComponentState() + .data.get(JOB_EXECUTIONS_DATA_KEY); if (executions) { this.dataJobsService.notifyForJobExecutions([...executions]); // eslint-disable-next-line @typescript-eslint/unbound-method - const runningExecution = executions.find(DataJobUtil.isJobRunningPredicate); + const runningExecution = executions.find( + DataJobUtil.isJobRunningPredicate + ); if (runningExecution) { - this.dataJobsService.notifyForRunningJobExecutionId(runningExecution.id); + this.dataJobsService.notifyForRunningJobExecutionId( + runningExecution.id + ); } } } @@ -169,21 +179,24 @@ export class DataJobExecutionsPageComponent * @inheritDoc */ onModelError(model: ComponentModel): void { - const error = ErrorUtil.extractError( - model.getComponentState().error - ); + const error = ErrorUtil.extractError(model.getComponentState().error); this.errorHandlerService.processError(error); } private _initialize(state: RouteState): void { - const teamParamKey = state.getData('teamParamKey'); + const teamParamKey = + state.getData( + 'teamParamKey' + ); this.teamName = state.getParam(teamParamKey); - const jobParamKey = state.getData('jobParamKey'); + const jobParamKey = + state.getData('jobParamKey'); this.jobName = state.getParam(jobParamKey); - this.isJobEditable = !!state.getData('editable'); + this.isJobEditable = + !!state.getData('editable'); this._subscribeForExecutions(); @@ -192,17 +205,25 @@ export class DataJobExecutionsPageComponent private _subscribeForExecutions(): void { this.subscriptions.push( - this.dataJobsService.getNotifiedForJobExecutions() + this.dataJobsService + .getNotifiedForJobExecutions() .pipe( // eslint-disable-next-line @typescript-eslint/unbound-method - map(DataJobExecutionToGridDataJobExecution.convertToDataJobExecution) + map( + DataJobExecutionToGridDataJobExecution.convertToDataJobExecution + ) ) .subscribe({ next: (values) => { this.jobExecutions = values.filter((ex) => { - if (CollectionsUtil.isNil(this.dateTimeFilter.fromTime) || - CollectionsUtil.isNil(this.dateTimeFilter.toTime)) { - + if ( + CollectionsUtil.isNil( + this.dateTimeFilter.fromTime + ) || + CollectionsUtil.isNil( + this.dateTimeFilter.toTime + ) + ) { return true; } @@ -212,24 +233,37 @@ export class DataJobExecutionsPageComponent const startTime = new Date(ex.startTime); - return startTime > this.dateTimeFilter.fromTime && startTime < this.dateTimeFilter.toTime; + return ( + startTime > this.dateTimeFilter.fromTime && + startTime < this.dateTimeFilter.toTime + ); }); if (this.jobExecutions.length > 0) { const newMinJobExecutionsTime = new Date( - this.jobExecutions.reduce((prev, curr) => prev.startTime < curr.startTime ? prev : curr).startTime + this.jobExecutions.reduce((prev, curr) => + prev.startTime < curr.startTime + ? prev + : curr + ).startTime ); - if (CollectionsUtil.isNil(this.minJobExecutionTime) || - (newMinJobExecutionsTime.getTime() - this.minJobExecutionTime.getTime()) !== 0) { - - this.minJobExecutionTime = newMinJobExecutionsTime; + if ( + CollectionsUtil.isNil( + this.minJobExecutionTime + ) || + newMinJobExecutionsTime.getTime() - + this.minJobExecutionTime.getTime() !== + 0 + ) { + this.minJobExecutionTime = + newMinJobExecutionsTime; } } }, error: (error: unknown) => { console.error(error); - } + }, }) ); } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.html index 54224f52c9..5d6718bb07 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.html @@ -3,11 +3,21 @@ ~ SPDX-License-Identifier: Apache-2.0 --> -
    +
    - - - Click and drag to zoom + + + Click and drag to zoom
    diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.scss index ba73b05d86..10c59ac3a2 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.scss @@ -4,19 +4,19 @@ */ div.duration-chart { - height: 200px; - position: relative; + height: 200px; + position: relative; - button.reset-zoom { - position: absolute; - top: -1rem; - left: 3rem; - } + button.reset-zoom { + position: absolute; + top: -1rem; + left: 3rem; + } - span.zoom-tooltip { - position: absolute; - top: -0.8rem; - opacity: 0.5; - left: 2.5rem; - } + span.zoom-tooltip { + position: absolute; + top: -0.8rem; + opacity: 0.5; + left: 2.5rem; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.ts index ca9555ecc5..2b419f5995 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.ts @@ -4,9 +4,21 @@ */ import { DatePipe, formatDate } from '@angular/common'; -import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; - -import { Chart, ChartData, registerables, ScatterDataPoint, TimeUnit } from 'chart.js'; +import { + Component, + Input, + OnChanges, + OnInit, + SimpleChanges, +} from '@angular/core'; + +import { + Chart, + ChartData, + registerables, + ScatterDataPoint, + TimeUnit, +} from 'chart.js'; import ChartDataLabels from 'chartjs-plugin-datalabels'; import zoomPlugin from 'chartjs-plugin-zoom'; import 'chartjs-adapter-date-fns'; @@ -17,20 +29,26 @@ import { DateUtil } from '../../../../../shared/utils'; import { DataJobExecutionStatus } from '../../../../../model'; -import { DataJobExecutionToGridDataJobExecution, GridDataJobExecution } from '../model'; +import { + DataJobExecutionToGridDataJobExecution, + GridDataJobExecution, +} from '../model'; -type CustomChartData = - ScatterDataPoint - & { startTime: number; duration: number; endTime: number; status: DataJobExecutionStatus; opId: string }; +type CustomChartData = ScatterDataPoint & { + startTime: number; + duration: number; + endTime: number; + status: DataJobExecutionStatus; + opId: string; +}; @Component({ selector: 'lib-execution-duration-chart', templateUrl: './execution-duration-chart.component.html', styleUrls: ['./execution-duration-chart.component.scss'], - providers: [DatePipe] + providers: [DatePipe], }) export class ExecutionDurationChartComponent implements OnInit, OnChanges { - @Input() jobExecutions: GridDataJobExecution[] = []; chartZoomed = false; @@ -43,48 +61,55 @@ export class ExecutionDurationChartComponent implements OnInit, OnChanges { } getChartLabels(): number[] { - return this.jobExecutions - .map((execution) => DateUtil.normalizeToUTC(execution.startTime).getTime()); + return this.jobExecutions.map((execution) => + DateUtil.normalizeToUTC(execution.startTime).getTime() + ); } getData(min?: number, max?: number): CustomChartData[] { const divider = this.getDurationUnit().divider; const executions = CollectionsUtil.isDefined(min) ? this.jobExecutions.filter((ex) => { - const startTime = DateUtil.normalizeToUTC(ex.startTime).getTime(); - - return startTime >= min && startTime <= max; - }) - : this.jobExecutions - - return executions - .map((execution) => { - return { - startTime: DateUtil.normalizeToUTC(execution.startTime).getTime(), - duration: Math.round((this.getJobDurationSeconds(execution) / divider) * 100) / 100, - endTime: execution.endTime - ? new Date(execution.endTime) - : undefined, - status: execution.status, - opId: execution.opId - } as unknown as CustomChartData; - }); + const startTime = DateUtil.normalizeToUTC( + ex.startTime + ).getTime(); + + return startTime >= min && startTime <= max; + }) + : this.jobExecutions; + + return executions.map((execution) => { + return { + startTime: DateUtil.normalizeToUTC( + execution.startTime + ).getTime(), + duration: + Math.round( + (this.getJobDurationSeconds(execution) / divider) * 100 + ) / 100, + endTime: execution.endTime + ? new Date(execution.endTime) + : undefined, + status: execution.status, + opId: execution.opId, + } as unknown as CustomChartData; + }); } getMaxDurationSeconds(): number { return this.jobExecutions - .map((execution) => this.getJobDurationSeconds(execution)) - .reduce((prev, current) => prev > current ? prev : current); + .map((execution) => this.getJobDurationSeconds(execution)) + .reduce((prev, current) => (prev > current ? prev : current)); } getJobDurationSeconds(execution: GridDataJobExecution) { return ( - ( - execution.endTime - ? new Date(execution.endTime).getTime() - : new Date(Date.now()).getTime() - ) - new Date(execution.startTime).getTime() - ) / 1000; + ((execution.endTime + ? new Date(execution.endTime).getTime() + : new Date(Date.now()).getTime()) - + new Date(execution.startTime).getTime()) / + 1000 + ); } getDurationUnit(): { name: string; divider: number } { @@ -131,79 +156,90 @@ export class ExecutionDurationChartComponent implements OnInit, OnChanges { data: this.getData(), fill: false, pointRadius: 3, - pointBorderColor: (context) => DataJobExecutionToGridDataJobExecution - .resolveColor((context.raw as { status: string }).status), - pointBackgroundColor: (context) => DataJobExecutionToGridDataJobExecution - .resolveColor((context.raw as { status: string }).status), + pointBorderColor: (context) => + DataJobExecutionToGridDataJobExecution.resolveColor( + (context.raw as { status: string }).status + ), + pointBackgroundColor: (context) => + DataJobExecutionToGridDataJobExecution.resolveColor( + (context.raw as { status: string }).status + ), pointBorderWidth: 3, parsing: { xAxisKey: 'startTime', - yAxisKey: 'duration' - } - } - ] + yAxisKey: 'duration', + }, + }, + ], }; - this.chart = new Chart<'line'>( - 'durationChart', - { - type: 'line', - data, - options: { - showLine: false, - scales: { - x: { - type: 'time', - time: { - unit: this._getTimeScaleUnit(...this._getMinMaxExecutionTuple()) - } + this.chart = new Chart<'line'>('durationChart', { + type: 'line', + data, + options: { + showLine: false, + scales: { + x: { + type: 'time', + time: { + unit: this._getTimeScaleUnit( + ...this._getMinMaxExecutionTuple() + ), + }, + }, + y: { + title: { + display: true, + text: `Duration ${this.getDurationUnit().name}`, }, - y: { - title: { - display: true, - text: `Duration ${ this.getDurationUnit().name }` - } - } }, - maintainAspectRatio: false, - plugins: { + }, + maintainAspectRatio: false, + plugins: { + zoom: { zoom: { - zoom: { - drag: { - enabled: true - }, - mode: 'x', - onZoomComplete: (context) => { - this._adjustTimeScaleUnit(context.chart); - this.chartZoomed = true; - } - } - } - , - datalabels: { - display: false + drag: { + enabled: true, + }, + mode: 'x', + onZoomComplete: (context) => { + this._adjustTimeScaleUnit(context.chart); + this.chartZoomed = true; + }, }, - legend: { - display: false + }, + datalabels: { + display: false, + }, + legend: { + display: false, + }, + tooltip: { + callbacks: { + label: (context) => { + const rawValues = context.raw as { + status: string; + endTime: Date; + }; + + // eslint-disable-next-line @typescript-eslint/restrict-plus-operands + return ( + `Duration: ${context.parsed.y}|${rawValues.status}` + + (rawValues.endTime + ? `|End: ${formatDate( + rawValues.endTime, + 'MMM d, y, hh:mm:ss a', + 'en-US', + 'UTC' + )}` + : '') + ); + }, }, - tooltip: { - callbacks: { - label: (context) => { - const rawValues = context.raw as { status: string; endTime: Date }; - - // eslint-disable-next-line @typescript-eslint/restrict-plus-operands - return `Duration: ${ context.parsed.y }|${ rawValues.status }` + - ( - rawValues.endTime - ? `|End: ${ formatDate(rawValues.endTime, 'MMM d, y, hh:mm:ss a', 'en-US', 'UTC') }` - : '' - ); - } - } - } - } - } - }); + }, + }, + }, + }); } private _adjustTimeScaleUnit(chart: Chart): void { @@ -217,16 +253,16 @@ export class ExecutionDurationChartComponent implements OnInit, OnChanges { unit = this._getTimeScaleUnit(min, max); } else { - unit = this._getTimeScaleUnit(...this._getMinMaxExecutionTuple()) + unit = this._getTimeScaleUnit(...this._getMinMaxExecutionTuple()); } this.chart.options.scales['x'] = { type: 'time', time: { - unit + unit, }, min, - max + max, }; this.chart.data.datasets[0].data = this.getData(min, max); @@ -241,10 +277,16 @@ export class ExecutionDurationChartComponent implements OnInit, OnChanges { return [null, null]; } - return [executions[0].startTime, executions[executions.length - 1].startTime] + return [ + executions[0].startTime, + executions[executions.length - 1].startTime, + ]; } - private _getTimeScaleUnit(min: number | string, max: number | string): TimeUnit { + private _getTimeScaleUnit( + min: number | string, + max: number | string + ): TimeUnit { if (CollectionsUtil.isNil(min) || CollectionsUtil.isNil(max)) { return 'day'; } @@ -257,38 +299,72 @@ export class ExecutionDurationChartComponent implements OnInit, OnChanges { : new Date(max).getTime(); const diff = _max - _min; - if (diff > (this._getTimeUnitMilliseconds('year') + this._getTimeUnitMilliseconds('second'))) { + if ( + diff > + this._getTimeUnitMilliseconds('year') + + this._getTimeUnitMilliseconds('second') + ) { return 'year'; } - if (diff > (this._getTimeUnitMilliseconds('month') + this._getTimeUnitMilliseconds('second'))) { + if ( + diff > + this._getTimeUnitMilliseconds('month') + + this._getTimeUnitMilliseconds('second') + ) { return 'month'; } - if (diff > (2 * this._getTimeUnitMilliseconds('week'))) { + if (diff > 2 * this._getTimeUnitMilliseconds('week')) { return 'week'; } - if (diff > (this._getTimeUnitMilliseconds('day') + this._getTimeUnitMilliseconds('second'))) { + if ( + diff > + this._getTimeUnitMilliseconds('day') + + this._getTimeUnitMilliseconds('second') + ) { return 'day'; } - if (diff > (this._getTimeUnitMilliseconds('hour') + this._getTimeUnitMilliseconds('second'))) { + if ( + diff > + this._getTimeUnitMilliseconds('hour') + + this._getTimeUnitMilliseconds('second') + ) { return 'hour'; } - if (diff > (this._getTimeUnitMilliseconds('minute') + this._getTimeUnitMilliseconds('millisecond'))) { + if ( + diff > + this._getTimeUnitMilliseconds('minute') + + this._getTimeUnitMilliseconds('millisecond') + ) { return 'minute'; } - if (diff > (this._getTimeUnitMilliseconds('second') + this._getTimeUnitMilliseconds('millisecond'))) { + if ( + diff > + this._getTimeUnitMilliseconds('second') + + this._getTimeUnitMilliseconds('millisecond') + ) { return 'second'; } return 'millisecond'; } - private _getTimeUnitMilliseconds(unit: 'millisecond' | 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year'): number { + private _getTimeUnitMilliseconds( + unit: + | 'millisecond' + | 'second' + | 'minute' + | 'hour' + | 'day' + | 'week' + | 'month' + | 'year' + ): number { switch (unit) { case 'millisecond': return 1; @@ -308,7 +384,9 @@ export class ExecutionDurationChartComponent implements OnInit, OnChanges { return 1000 * 60 * 60 * 24 * 365; default: // eslint-disable-next-line @typescript-eslint/restrict-template-expressions - console.error(`Taurus DataPipelines ExecutionDurationChartComponent unsupported time format unit ${ unit }`); + console.error( + `Taurus DataPipelines ExecutionDurationChartComponent unsupported time format unit ${unit}` + ); return 0; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.html index 7a3cd51faf..4b9776afb6 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.html @@ -3,13 +3,15 @@ ~ SPDX-License-Identifier: Apache-2.0 --> -
    - +
    - +
    - {{totalExecutions}}
    Executions + {{ totalExecutions }}
    + Executions
    diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.scss index 4923c28d5f..07d8d60950 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.scss @@ -4,16 +4,16 @@ */ div.status-chart { - height: 200px; - position: relative; - margin-top: 15px; + height: 200px; + position: relative; + margin-top: 15px; - div.inner-text { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - text-align: center; - font-size: 18px; - } + div.inner-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + font-size: 18px; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.ts index aa96522f42..3b4f8478d0 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.ts @@ -3,20 +3,28 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; +import { + Component, + Input, + OnChanges, + OnInit, + SimpleChanges, +} from '@angular/core'; import { Chart, registerables } from 'chart.js'; import ChartDataLabels from 'chartjs-plugin-datalabels'; -import { DataJobExecutionToGridDataJobExecution, GridDataJobExecution } from '../model/data-job-execution'; +import { + DataJobExecutionToGridDataJobExecution, + GridDataJobExecution, +} from '../model/data-job-execution'; @Component({ selector: 'lib-execution-status-chart', templateUrl: './execution-status-chart.component.html', - styleUrls: ['./execution-status-chart.component.scss'] + styleUrls: ['./execution-status-chart.component.scss'], }) export class ExecutionStatusChartComponent implements OnInit, OnChanges { - @Input() jobExecutions: GridDataJobExecution[]; totalExecutions: number; @@ -28,33 +36,32 @@ export class ExecutionStatusChartComponent implements OnInit, OnChanges { getDoughnutLabels(): string[] { return this.jobExecutions - .map((execution) => execution.status as string) - .filter((item, i, ar) => ar.indexOf(item) === i); + .map((execution) => execution.status as string) + .filter((item, i, ar) => ar.indexOf(item) === i); } getDoughnutData(): number[] { const data: number[] = []; - this.getDoughnutLabels() - .forEach((label) => - data.push( - this.jobExecutions - .filter((execution) => execution.status as string === label) - .length - ) - ); + this.getDoughnutLabels().forEach((label) => + data.push( + this.jobExecutions.filter( + (execution) => (execution.status as string) === label + ).length + ) + ); return data; } getDoughnutLabelColors(): string[] { const colors: string[] = []; - const statusColorMap = DataJobExecutionToGridDataJobExecution.getStatusColorsMap(); + const statusColorMap = + DataJobExecutionToGridDataJobExecution.getStatusColorsMap(); - this.getDoughnutLabels() - .forEach((label) => { - colors.push(statusColorMap[label] as string); - }); + this.getDoughnutLabels().forEach((label) => { + colors.push(statusColorMap[label] as string); + }); return colors; } @@ -63,7 +70,8 @@ export class ExecutionStatusChartComponent implements OnInit, OnChanges { if (!changes['jobExecutions'].isFirstChange()) { this.totalExecutions = this.jobExecutions.length; this.chart.data.labels = this.getDoughnutLabels(); - this.chart.data.datasets[0].backgroundColor = this.getDoughnutLabelColors(); + this.chart.data.datasets[0].backgroundColor = + this.getDoughnutLabelColors(); this.chart.data.datasets[0].data = this.getDoughnutData(); this.chart.update(); } @@ -74,45 +82,44 @@ export class ExecutionStatusChartComponent implements OnInit, OnChanges { const data = { labels: this.getDoughnutLabels(), - datasets: [{ - data: this.getDoughnutData(), - backgroundColor: this.getDoughnutLabelColors(), - hoverOffset: 4 - }] + datasets: [ + { + data: this.getDoughnutData(), + backgroundColor: this.getDoughnutLabelColors(), + hoverOffset: 4, + }, + ], }; - this.chart = new Chart( - 'statusChart', - { - type: 'doughnut', - data, - options: { - spacing: 1, - elements: { - arc: { - borderWidth: 0 - } + this.chart = new Chart('statusChart', { + type: 'doughnut', + data, + options: { + spacing: 1, + elements: { + arc: { + borderWidth: 0, }, - cutout: 70, - maintainAspectRatio: false, - plugins: { - legend: { - display: false, - position: 'left' - }, - datalabels: { - color: 'black', - font: { - size: 16 - } + }, + cutout: 70, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + position: 'left', + }, + datalabels: { + color: 'black', + font: { + size: 16, }, - tooltip: { - xAlign: 'center', - yAlign: 'center' - } - } - } - } - ); + }, + tooltip: { + xAlign: 'center', + yAlign: 'center', + }, + }, + }, + }); } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/data-job-execution.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/data-job-execution.spec.ts index 173e4fc0ef..98f0e351c7 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/data-job-execution.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/data-job-execution.spec.ts @@ -3,8 +3,15 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DataJobExecution, DataJobExecutionStatus, DataJobExecutionType } from '../../../../../model'; -import { DataJobExecutionToGridDataJobExecution, GridDataJobExecution } from './data-job-execution'; +import { + DataJobExecution, + DataJobExecutionStatus, + DataJobExecutionType, +} from '../../../../../model'; +import { + DataJobExecutionToGridDataJobExecution, + GridDataJobExecution, +} from './data-job-execution'; describe('Test DataJobExecutionToGridDataJobExecution', () => { it('Convert object', () => { @@ -33,12 +40,11 @@ describe('Test DataJobExecutionToGridDataJobExecution', () => { memoryLimit: 1000, memoryRequest: 1000, cpuLimit: 0.5, - cpuRequest: 0.5 + cpuRequest: 0.5, }, enabled: true, - schedule: { scheduleCron: '12 * * * *' } - - } + schedule: { scheduleCron: '12 * * * *' }, + }, }; const dataJobExecution: DataJobExecution = { @@ -63,15 +69,18 @@ describe('Test DataJobExecutionToGridDataJobExecution', () => { memoryLimit: 1000, memoryRequest: 1000, cpuLimit: 0.5, - cpuRequest: 0.5 + cpuRequest: 0.5, }, enabled: true, - schedule: { scheduleCron: '12 * * * *' } - } + schedule: { scheduleCron: '12 * * * *' }, + }, }; /* eslint-enable @typescript-eslint/naming-convention */ - const convertedJobExecution = DataJobExecutionToGridDataJobExecution.convertToDataJobExecution([dataJobExecution]); + const convertedJobExecution = + DataJobExecutionToGridDataJobExecution.convertToDataJobExecution([ + dataJobExecution, + ]); expect(convertedJobExecution.length).toEqual(1); expect(convertedJobExecution[0]).toEqual(expectedObject); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/data-job-execution.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/data-job-execution.ts index ad3eaf0829..53b027416d 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/data-job-execution.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/data-job-execution.ts @@ -5,7 +5,11 @@ import { FormatDeltaPipe } from '../../../../../shared/pipes'; -import { DataJobExecution, DataJobExecutions, DataJobExecutionStatus } from '../../../../../model'; +import { + DataJobExecution, + DataJobExecutions, + DataJobExecutionStatus, +} from '../../../../../model'; export interface GridDataJobExecution extends DataJobExecution { duration: string; @@ -13,8 +17,11 @@ export interface GridDataJobExecution extends DataJobExecution { } export class DataJobExecutionToGridDataJobExecution { - static convertStatus(jobStatus: DataJobExecutionStatus, message: string): DataJobExecutionStatus { - switch (`${ jobStatus }`.toUpperCase()) { + static convertStatus( + jobStatus: DataJobExecutionStatus, + message: string + ): DataJobExecutionStatus { + switch (`${jobStatus}`.toUpperCase()) { case DataJobExecutionStatus.SUCCEEDED: case DataJobExecutionStatus.FINISHED: return DataJobExecutionStatus.SUCCEEDED; @@ -31,18 +38,21 @@ export class DataJobExecutionToGridDataJobExecution { } } - static convertToDataJobExecution(dataJobExecution: DataJobExecutions): GridDataJobExecution[] { + static convertToDataJobExecution( + dataJobExecution: DataJobExecutions + ): GridDataJobExecution[] { const formatDeltaPipe = new FormatDeltaPipe(); return dataJobExecution.reduce((accumulator, execution) => { accumulator.push({ - status: DataJobExecutionToGridDataJobExecution.convertStatus(execution.status, execution.message), + status: DataJobExecutionToGridDataJobExecution.convertStatus( + execution.status, + execution.message + ), type: execution.type, duration: formatDeltaPipe.transform(execution), startTime: execution.startTime, - endTime: execution.endTime - ? execution.endTime - : null, + endTime: execution.endTime ? execution.endTime : null, logsUrl: execution.logsUrl, startedBy: execution.startedBy, id: execution.id, @@ -50,7 +60,7 @@ export class DataJobExecutionToGridDataJobExecution { opId: execution.opId, jobVersion: execution.deployment.jobVersion, deployment: execution.deployment, - message: execution.message + message: execution.message, }); return accumulator; @@ -65,11 +75,13 @@ export class DataJobExecutionToGridDataJobExecution { [DataJobExecutionStatus.CANCELLED]: '#CCCCCC', [DataJobExecutionStatus.SKIPPED]: '#CCCCCC', [DataJobExecutionStatus.USER_ERROR]: '#F27963', - [DataJobExecutionStatus.PLATFORM_ERROR]: '#F8CF2A' + [DataJobExecutionStatus.PLATFORM_ERROR]: '#F8CF2A', }; } static resolveColor(key: string): string { - return DataJobExecutionToGridDataJobExecution.getStatusColorsMap()[key] as string; + return DataJobExecutionToGridDataJobExecution.getStatusColorsMap()[ + key + ] as string; } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.html index 2093f9810e..eb4d88f49e 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.html @@ -5,99 +5,162 @@
    Time period (UTC): - +
    -

    {{ fromTime | date:'MMM d, y, hh:mm:ss a':'UTC'}} to {{ toTime | date:'MMM d, y, hh:mm:ss a':'UTC' }}

    +

    + {{ fromTime | date: "MMM d, y, hh:mm:ss a":"UTC" }} to + {{ toTime | date: "MMM d, y, hh:mm:ss a":"UTC" }} +

    -
    +
    - +
    -
    - -
    - +
    - -
    -
    - - +
    + +
    - diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.scss index 0c0b03aee4..6e98698f24 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.scss @@ -4,303 +4,344 @@ */ :host { - .time-filter__action-btn { - display: flex; - justify-content: flex-end; - - button { - height: 1.6rem; - line-height: 1.6rem; - margin: 0; - - &:first-child { - margin-right: 0.6rem; - } - } - } - - .time-filter__heading { - font-weight: bold; - margin-right: 10px; - } - - .time-filter__container { - display: flex; - align-items: center; - } - - .time-filter__label { - line-height: 1rem; - } - - ::ng-deep { - clr-signpost { - p { - color: #0a7bd8; - margin: 0; - } - - form { - width: 13rem; - - .clr-date-container { - &.clr-form-control { - &:first-child { - margin-top: 0; - } - } - } - } - - .signpost-content-body { - overflow-y: visible; - } - } + .time-filter__action-btn { + display: flex; + justify-content: flex-end; - dp-date-picker { - --date-picker-border-color: rgba(0, 0, 0, .1); - --date-picker-box-shadow: 1px 1px 5px #0000001a; - - --date-picker-background-color: #fff; - --date-picker-selected-background-color: var(--clr-calendar-active-cell-background-color, #d8e3e9); - --date-picker-hover-background-color: var(--clr-calendar-btn-hover-focus-color, #e8e8e8); - --date-picker-text-color: var(--clr-p1-color, #666666); - --date-picker-selected-text-color: var(--clr-calendar-active-cell-color, black); - --date-picker-current-text-color: var(--clr-calendar-today-date-cell-color, black); - - .dp-popup { - background: var(--date-picker-background-color); - border-color: var(--date-picker-border-color); - box-shadow: var(--date-picker-box-shadow); - } - - dp-calendar-nav { - &.dp-material { - .dp-calendar-nav-container { - border: 0; - height: 36px; - } - - .dp-nav-btns-container { - right: 0; - } - - .dp-nav-header { - left: 10px; - } - - .dp-nav-header-btn { - height: 1.8rem; - padding: 0; + button { + height: 1.6rem; + line-height: 1.6rem; margin: 0; - border: 0; - width: auto; - font-size: var(--clr-calendar-picker-btn-font-size, 0.9rem); - font-weight: var(--clr-calendar-picker-btn-font-weight, 200); - line-height: 1.8rem; - border-radius: var(--clr-global-borderradius, 0.15rem); - color: var(--clr-calendar-btn-color, #0072a3); - background: var(--date-picker-background-color); - - &:hover { - background: var(--date-picker-hover-background-color); - } - } - .dp-calendar-nav-left { - &:before { - left: 2px; - } - } - - .dp-calendar-nav-right { - &:before { - left: -2px; - } - } - - .dp-calendar-nav-left, - .dp-calendar-nav-right { - width: 36px; - height: 36px; - color: var(--clr-calendar-btn-color, #0072a3); - background: var(--date-picker-background-color); - - &:before { - width: 10px; - height: 10px; - } - - &:hover { - background: var(--date-picker-hover-background-color); - } - } - - .dp-current-location-btn { - background: var(--clr-calendar-btn-color, #0072a3); - width: 18px; - height: 18px; - } - } - } - - dp-day-calendar { - &.dp-material { - .dp-calendar-wrapper { - border: 0; - } - - .dp-weekdays { - margin-bottom: 0; - height: 36px; - display: flex; - align-items: center; - } - - .dp-calendar-weekday { - width: 36px; - height: 25px; - text-align: center; - font-size: var(--clr-day-font-size, 0.6rem); - font-weight: 600; - color: var(--clr-p1-color, #666666); - } - - .dp-calendar-day { - height: 1.8rem; - min-width: 1.8rem; - line-height: 1.8rem; - padding: 0; - margin: 0; - border: 0; - border-radius: var(--clr-global-borderradius, 0.15rem); - color: var(--date-picker-text-color); - background: var(--date-picker-background-color); - - &.dp-current-day { - color: var(--date-picker-current-text-color); - font-weight: var(--clr-calendar-today-date-cell-font-weight, 600); - } - - &.dp-selected { - color: var(--date-picker-selected-text-color); - background: var(--date-picker-selected-background-color); - } - - &:hover { - background: var(--date-picker-hover-background-color); - } - - &:disabled { - opacity: .4; - pointer-events: none; + &:first-child { + margin-right: 0.6rem; } - } } + } - .dp-day-calendar-container { - background: var(--date-picker-background-color); - } - } + .time-filter__heading { + font-weight: bold; + margin-right: 10px; + } - dp-day-time-calendar { - padding: 0.6rem; + .time-filter__container { + display: flex; + align-items: center; + } - &.dp-material { - dp-time-select { - border: 0; + .time-filter__label { + line-height: 1rem; + } - .dp-time-select-controls { - background: var(--date-picker-background-color); + ::ng-deep { + clr-signpost { + p { + color: #0a7bd8; + margin: 0; } - .dp-time-select-control { - width: 36px; + form { + width: 13rem; - &.dp-time-select-separator { - width: 5px; - } + .clr-date-container { + &.clr-form-control { + &:first-child { + margin-top: 0; + } + } + } } - .dp-time-select-control-up { - &:before { - top: 2px; - } + .signpost-content-body { + overflow-y: visible; } + } - .dp-time-select-control-down { - &:before { - top: -2px; - } + dp-date-picker { + --date-picker-border-color: rgba(0, 0, 0, 0.1); + --date-picker-box-shadow: 1px 1px 5px #0000001a; + + --date-picker-background-color: #fff; + --date-picker-selected-background-color: var( + --clr-calendar-active-cell-background-color, + #d8e3e9 + ); + --date-picker-hover-background-color: var( + --clr-calendar-btn-hover-focus-color, + #e8e8e8 + ); + --date-picker-text-color: var(--clr-p1-color, #666666); + --date-picker-selected-text-color: var( + --clr-calendar-active-cell-color, + black + ); + --date-picker-current-text-color: var( + --clr-calendar-today-date-cell-color, + black + ); + + .dp-popup { + background: var(--date-picker-background-color); + border-color: var(--date-picker-border-color); + box-shadow: var(--date-picker-box-shadow); } - .dp-time-select-control-up, - .dp-time-select-control-down { - padding: 0; - margin: 0; - border: 0; - width: 36px; - height: 36px; - border-radius: var(--clr-global-borderradius, 0.15rem); - color: var(--clr-calendar-btn-color, #0072a3); - - &:before { - width: 9px; - height: 9px; - } - - &:hover { - background: var(--date-picker-hover-background-color); - } - } - } - } - } - - dp-month-calendar { - &.dp-material { - .dp-month-calendar-container { - background: var(--date-picker-background-color); - } - - .dp-calendar-month { - height: 2.4rem; - min-width: 2.4rem; - width: 6.3rem; - padding: 0 0.6rem; - margin: 0; - border: 0; - border-radius: var(--clr-global-borderradius, 0.15rem); - cursor: pointer; - font-size: .9rem; - font-weight: 200; - line-height: 1.8rem; - color: var(--date-picker-text-color); - background: var(--date-picker-background-color); - - &.dp-current-month { - color: var(--date-picker-current-text-color); - font-weight: var(--clr-calendar-today-date-cell-font-weight, 600); + dp-calendar-nav { + &.dp-material { + .dp-calendar-nav-container { + border: 0; + height: 36px; + } + + .dp-nav-btns-container { + right: 0; + } + + .dp-nav-header { + left: 10px; + } + + .dp-nav-header-btn { + height: 1.8rem; + padding: 0; + margin: 0; + border: 0; + width: auto; + font-size: var( + --clr-calendar-picker-btn-font-size, + 0.9rem + ); + font-weight: var( + --clr-calendar-picker-btn-font-weight, + 200 + ); + line-height: 1.8rem; + border-radius: var(--clr-global-borderradius, 0.15rem); + color: var(--clr-calendar-btn-color, #0072a3); + background: var(--date-picker-background-color); + + &:hover { + background: var( + --date-picker-hover-background-color + ); + } + } + + .dp-calendar-nav-left { + &:before { + left: 2px; + } + } + + .dp-calendar-nav-right { + &:before { + left: -2px; + } + } + + .dp-calendar-nav-left, + .dp-calendar-nav-right { + width: 36px; + height: 36px; + color: var(--clr-calendar-btn-color, #0072a3); + background: var(--date-picker-background-color); + + &:before { + width: 10px; + height: 10px; + } + + &:hover { + background: var( + --date-picker-hover-background-color + ); + } + } + + .dp-current-location-btn { + background: var(--clr-calendar-btn-color, #0072a3); + width: 18px; + height: 18px; + } + } } - &.dp-selected { - color: var(--date-picker-selected-text-color); - background: var(--date-picker-selected-background-color); + dp-day-calendar { + &.dp-material { + .dp-calendar-wrapper { + border: 0; + } + + .dp-weekdays { + margin-bottom: 0; + height: 36px; + display: flex; + align-items: center; + } + + .dp-calendar-weekday { + width: 36px; + height: 25px; + text-align: center; + font-size: var(--clr-day-font-size, 0.6rem); + font-weight: 600; + color: var(--clr-p1-color, #666666); + } + + .dp-calendar-day { + height: 1.8rem; + min-width: 1.8rem; + line-height: 1.8rem; + padding: 0; + margin: 0; + border: 0; + border-radius: var(--clr-global-borderradius, 0.15rem); + color: var(--date-picker-text-color); + background: var(--date-picker-background-color); + + &.dp-current-day { + color: var(--date-picker-current-text-color); + font-weight: var( + --clr-calendar-today-date-cell-font-weight, + 600 + ); + } + + &.dp-selected { + color: var(--date-picker-selected-text-color); + background: var( + --date-picker-selected-background-color + ); + } + + &:hover { + background: var( + --date-picker-hover-background-color + ); + } + + &:disabled { + opacity: 0.4; + pointer-events: none; + } + } + } + + .dp-day-calendar-container { + background: var(--date-picker-background-color); + } } - &:hover { - background: var(--date-picker-hover-background-color); + dp-day-time-calendar { + padding: 0.6rem; + + &.dp-material { + dp-time-select { + border: 0; + + .dp-time-select-controls { + background: var(--date-picker-background-color); + } + + .dp-time-select-control { + width: 36px; + + &.dp-time-select-separator { + width: 5px; + } + } + + .dp-time-select-control-up { + &:before { + top: 2px; + } + } + + .dp-time-select-control-down { + &:before { + top: -2px; + } + } + + .dp-time-select-control-up, + .dp-time-select-control-down { + padding: 0; + margin: 0; + border: 0; + width: 36px; + height: 36px; + border-radius: var( + --clr-global-borderradius, + 0.15rem + ); + color: var(--clr-calendar-btn-color, #0072a3); + + &:before { + width: 9px; + height: 9px; + } + + &:hover { + background: var( + --date-picker-hover-background-color + ); + } + } + } + } } - &:disabled { - opacity: .4; - pointer-events: none; + dp-month-calendar { + &.dp-material { + .dp-month-calendar-container { + background: var(--date-picker-background-color); + } + + .dp-calendar-month { + height: 2.4rem; + min-width: 2.4rem; + width: 6.3rem; + padding: 0 0.6rem; + margin: 0; + border: 0; + border-radius: var(--clr-global-borderradius, 0.15rem); + cursor: pointer; + font-size: 0.9rem; + font-weight: 200; + line-height: 1.8rem; + color: var(--date-picker-text-color); + background: var(--date-picker-background-color); + + &.dp-current-month { + color: var(--date-picker-current-text-color); + font-weight: var( + --clr-calendar-today-date-cell-font-weight, + 600 + ); + } + + &.dp-selected { + color: var(--date-picker-selected-text-color); + background: var( + --date-picker-selected-background-color + ); + } + + &:hover { + background: var( + --date-picker-hover-background-color + ); + } + + &:disabled { + opacity: 0.4; + pointer-events: none; + } + } + } } - } } - } } - } } // TODO uncomment for v13+ @@ -553,40 +594,40 @@ //} .fade-to-dark { - &.dark { - :host { - ::ng-deep { - dp-date-picker { - --date-picker-border-color: #000; - --date-picker-box-shadow: 0 0.05rem 0.15rem rgb(0 0 0 / 50%); - - --date-picker-background-color: #21333b; - --date-picker-selected-background-color: #324f62; - --date-picker-hover-background-color: #28404d; - --date-picker-text-color: #acbac3; - --date-picker-selected-text-color: #fff; - --date-picker-current-text-color: #fff; + &.dark { + :host { + ::ng-deep { + dp-date-picker { + --date-picker-border-color: #000; + --date-picker-box-shadow: 0 0.05rem 0.15rem rgb(0 0 0 / 50%); + + --date-picker-background-color: #21333b; + --date-picker-selected-background-color: #324f62; + --date-picker-hover-background-color: #28404d; + --date-picker-text-color: #acbac3; + --date-picker-selected-text-color: #fff; + --date-picker-current-text-color: #fff; + } + } } - } - } - // TODO uncomment for v13+ - //::ng-deep .cdk-overlay-container { - // .dp-material { - // &.data-pipelines__executions-filter-picker { - // &.dp-popup { - // --date-picker-border-color: #000; - // --date-picker-box-shadow: 0 0.05rem 0.15rem rgb(0 0 0 / 50%); - // - // --date-picker-background-color: #21333b; - // --date-picker-selected-background-color: #324f62; - // --date-picker-hover-background-color: #28404d; - // --date-picker-text-color: #acbac3; - // --date-picker-selected-text-color: #fff; - // --date-picker-current-text-color: #fff; - // } - // } - // } - //} - } + // TODO uncomment for v13+ + //::ng-deep .cdk-overlay-container { + // .dp-material { + // &.data-pipelines__executions-filter-picker { + // &.dp-popup { + // --date-picker-border-color: #000; + // --date-picker-box-shadow: 0 0.05rem 0.15rem rgb(0 0 0 / 50%); + // + // --date-picker-background-color: #21333b; + // --date-picker-selected-background-color: #324f62; + // --date-picker-hover-background-color: #28404d; + // --date-picker-text-color: #acbac3; + // --date-picker-selected-text-color: #fff; + // --date-picker-current-text-color: #fff; + // } + // } + // } + //} + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.ts index 39cab55dfb..99ef42a031 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.ts @@ -3,10 +3,22 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'; +import { + Component, + EventEmitter, + Input, + OnDestroy, + OnInit, + Output, + ViewChild, +} from '@angular/core'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; -import { CalendarValue, DatePickerDirective, IDatePickerDirectiveConfig } from 'ng2-date-picker'; +import { + CalendarValue, + DatePickerDirective, + IDatePickerDirectiveConfig, +} from 'ng2-date-picker'; // TODO [import dayjs from 'dayjs'] used in ng2-date-picker v13+ instead of moment import moment from 'moment'; @@ -18,7 +30,7 @@ type CustomFormGroup = FormGroup & { controls: { [key: string]: FormControl } }; @Component({ selector: 'lib-time-period-filter', templateUrl: './time-period-filter.component.html', - styleUrls: ['./time-period-filter.component.scss'] + styleUrls: ['./time-period-filter.component.scss'], }) export class TimePeriodFilterComponent implements OnInit, OnDestroy { @ViewChild('fromPicker') fromPicker: DatePickerDirective; @@ -32,7 +44,8 @@ export class TimePeriodFilterComponent implements OnInit, OnDestroy { return this._loading; } - @Output() filterChanged: EventEmitter<{ fromTime: Date; toTime: Date }> = new EventEmitter<{ fromTime: Date; toTime: Date }>(); + @Output() filterChanged: EventEmitter<{ fromTime: Date; toTime: Date }> = + new EventEmitter<{ fromTime: Date; toTime: Date }>(); pickerConfig: IDatePickerDirectiveConfig = { // TODO [format: 'MMM DD, YYYY, hh:mm:ss A',] dayjs @@ -42,13 +55,13 @@ export class TimePeriodFilterComponent implements OnInit, OnDestroy { showSeconds: true, weekDayFormat: 'dd', numOfMonthRows: 6, - monthBtnFormat: 'MMMM' + monthBtnFormat: 'MMMM', }; fromPickerConfig: IDatePickerDirectiveConfig = { - ...this.pickerConfig + ...this.pickerConfig, }; toPickerConfig: IDatePickerDirectiveConfig = { - ...this.pickerConfig + ...this.pickerConfig, }; fromTime: Date; @@ -78,21 +91,22 @@ export class TimePeriodFilterComponent implements OnInit, OnDestroy { this.fromTimeMin = minDateTime; this.fromPickerConfig = { ...this.fromPickerConfig, - min: this.fromTimeMin + min: this.fromTimeMin, }; this.toTimeMin = minDateTime; this.toPickerConfig = { ...this.toPickerConfig, - min: this.toTimeMin + min: this.toTimeMin, }; if (!this._isFromPickerOpened) { this.tmForm .get('fromDate') .patchValue( - this._normalizeDateTime(date, 'from', 'utc') - .format(this.fromPickerConfig.format) + this._normalizeDateTime(date, 'from', 'utc').format( + this.fromPickerConfig.format + ) ); } } @@ -116,7 +130,7 @@ export class TimePeriodFilterComponent implements OnInit, OnDestroy { constructor(private readonly formBuilder: FormBuilder) { this.tmForm = this.formBuilder.group({ fromDate: '', - toDate: '' + toDate: '', }) as CustomFormGroup; } @@ -128,29 +142,47 @@ export class TimePeriodFilterComponent implements OnInit, OnDestroy { const emittedDate = $event as moment.Moment; if (type === 'from') { - const origMinTimeUtc = this._normalizeDateTime(this._minTimeOrig, 'from', 'utc'); - if (emittedDate.isBefore(origMinTimeUtc) || emittedDate.isAfter(this.fromTimeMax)) { + const origMinTimeUtc = this._normalizeDateTime( + this._minTimeOrig, + 'from', + 'utc' + ); + if ( + emittedDate.isBefore(origMinTimeUtc) || + emittedDate.isAfter(this.fromTimeMax) + ) { return; } - this.fromTime = new Date(this._normalizeDateTime(emittedDate, 'from', 'timezone').valueOf()); + this.fromTime = new Date( + this._normalizeDateTime( + emittedDate, + 'from', + 'timezone' + ).valueOf() + ); this.toTimeMin = this._normalizeDateTime(emittedDate, 'min'); this.toPickerConfig = { ...this.toPickerConfig, - min: this.toTimeMin + min: this.toTimeMin, }; } else { - if (emittedDate.isBefore(this.toTimeMin) || emittedDate.isAfter(this.toTimeMax)) { + if ( + emittedDate.isBefore(this.toTimeMin) || + emittedDate.isAfter(this.toTimeMax) + ) { return; } - this.toTime = new Date(this._normalizeDateTime(emittedDate, 'to', 'timezone').valueOf()); + this.toTime = new Date( + this._normalizeDateTime(emittedDate, 'to', 'timezone').valueOf() + ); this.fromTimeMax = this._normalizeDateTime(emittedDate, 'max'); this.fromPickerConfig = { ...this.fromPickerConfig, - max: this.fromTimeMax + max: this.fromTimeMax, }; } } @@ -206,7 +238,10 @@ export class TimePeriodFilterComponent implements OnInit, OnDestroy { */ ngOnInit(): void { // eslint-disable-next-line @typescript-eslint/no-unsafe-argument - this._refreshIntervalRef = setInterval(this._refreshMaxTime.bind(this), 15 * 1000); // Update max time every 15s + this._refreshIntervalRef = setInterval( + this._refreshMaxTime.bind(this), + 15 * 1000 + ); // Update max time every 15s } /** @@ -224,7 +259,7 @@ export class TimePeriodFilterComponent implements OnInit, OnDestroy { this.toTimeMax = this._normalizeDateTime(date, 'max', 'utc'); this.toPickerConfig = { ...this.toPickerConfig, - max: this.toTimeMax + max: this.toTimeMax, }; if (!this._initiallySetMax) { @@ -235,37 +270,41 @@ export class TimePeriodFilterComponent implements OnInit, OnDestroy { this.fromTimeMax = this._normalizeDateTime(date, 'max', 'utc'); this.fromPickerConfig = { ...this.fromPickerConfig, - max: this.fromTimeMax + max: this.fromTimeMax, }; if (!this._isToPickerOpened) { this.tmForm .get('toDate') .patchValue( - this._normalizeDateTime(date, 'to', 'utc') - .format(this.toPickerConfig.format) + this._normalizeDateTime(date, 'to', 'utc').format( + this.toPickerConfig.format + ) ); } } } - private _normalizeDateTime(date: Date | moment.Moment, - type: 'min' | 'max' | 'from' | 'to', - travel: 'utc' | 'timezone' = null): moment.Moment { - + private _normalizeDateTime( + date: Date | moment.Moment, + type: 'min' | 'max' | 'from' | 'to', + travel: 'utc' | 'timezone' = null + ): moment.Moment { const offset = moment().utcOffset(); let dtInstance = moment(date).millisecond(0); if (travel) { if (offset > 0) { - dtInstance = travel === 'utc' - ? dtInstance.subtract(offset, 'm') - : dtInstance.add(offset, 'm'); + dtInstance = + travel === 'utc' + ? dtInstance.subtract(offset, 'm') + : dtInstance.add(offset, 'm'); } else if (offset < 0) { - dtInstance = travel === 'utc' - ? dtInstance.add(-offset, 'm') - : dtInstance.subtract(-offset, 'm'); + dtInstance = + travel === 'utc' + ? dtInstance.add(-offset, 'm') + : dtInstance.subtract(-offset, 'm'); } } @@ -283,7 +322,7 @@ export class TimePeriodFilterComponent implements OnInit, OnDestroy { private _emitChanges(): void { this.filterChanged.emit({ fromTime: this.fromTime, - toTime: this.toTime + toTime: this.toTime, }); } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.html index 8eba538ca0..88c20213a8 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.html @@ -5,293 +5,493 @@ -
    - - -
    - -
    -     -
    - - - Job name +
    + + Job name - Team name + Team name - - + + Description - - + + Deployment Status - + - + Last Execution End (UTC) - + Last Execution - Duration + [clrDgHideableColumn]="{ + hidden: localStorageUserConfig.hiddenColumns[ + 'lastExecutionDuration' + ] + }" + (clrDgHiddenChange)=" + showOrHideColumnChange('lastExecutionDuration', $event) + " + >Last Execution Duration - + Last Execution Status - - + - + - - + Success rate - - + Calculating up to 336 executions from last 14 days - Schedule (UTC) + Schedule (UTC) - Next run (UTC) + Next run (UTC) - Last Deployed - (UTC) + Last Deployed (UTC) - Last Deployed By + Last Deployed By - - Source + + Source - Logs + Logs - View + View - - {{job.jobName}} - - - {{job.jobName}} + + {{ job.jobName }} + + {{ + job.jobName + }} - - - {{job.config.team}} + + + {{ + job.config.team + }} - {{job.config?.description | words: 8}} + {{ job.config?.description | words: 8 }} - + - {{ job.deployments ? (job.deployments[0]?.lastExecutionTime | date:'MMM d, y, hh:mm a':'utc') : null }} + {{ + job.deployments + ? (job.deployments[0]?.lastExecutionTime + | date: "MMM d, y, hh:mm a":"utc") + : null + }} - {{ job.deployments ? ((job.deployments[0]?.lastExecutionDuration) | formatDuration) : null }} + {{ + job.deployments + ? (job.deployments[0]?.lastExecutionDuration + | formatDuration) + : null + }} - + - {{job.deployments | executionSuccessRate}} + {{ job.deployments | executionSuccessRate }} + + {{ + job.config?.schedule?.scheduleCron | formatSchedule: "" + }} {{ job.config?.schedule?.scheduleCron | formatSchedule:'' }} - - - - {{ job.config?.schedule?.nextRunEpochSeconds | parseEpoch | date: 'MMM d, y, hh:mm a':'UTC' }} - + class="column__min-width--xl" + title="{{ + (job.deployments | extractJobStatus) === + dataJobStatus.ENABLED + ? 'Next job run:' + + (job.config?.schedule?.nextRunEpochSeconds + | parseEpoch + | date: 'MMM d, y, hh:mm a':'UTC') + : '' + }}" + > + + {{ + job.config?.schedule?.nextRunEpochSeconds + | parseEpoch + | date: "MMM d, y, hh:mm a":"UTC" + }} + - - {{ job.deployments && job.deployments[0]?.lastDeployedDate ? (job.deployments[0]?.lastDeployedDate | date: 'MMM d, y, hh:mm a':'UTC') : null }} + + {{ + job.deployments && job.deployments[0]?.lastDeployedDate + ? (job.deployments[0]?.lastDeployedDate + | date: "MMM d, y, hh:mm a":"UTC") + : null + }} - {{ job.deployments ? (job.deployments[0]?.lastDeployedBy) : null }} + {{ + job.deployments + ? job.deployments[0]?.lastDeployedBy + : null + }} - + - - + + - - - - - + + + - -
    - No data jobs created! -
    +
    No data jobs created!
    No data jobs that match with - {{searchQueryValue}} criteria + >No data jobs that match with + {{ searchQueryValue }} criteria
    - - - Data Jobs per page - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} Data Jobs + + Data Jobs per page + {{ pagination.firstItem + 1 }} - + {{ pagination.lastItem + 1 }} of + {{ pagination.totalItems }} Data Jobs -
    diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.scss index 7c43e1b820..6b003590d5 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.scss @@ -6,7 +6,7 @@ @import "../../../base-grid/data-jobs-base-grid.component"; .label-link-suppress-decoration { - &:hover { - text-decoration: none; - } + &:hover { + text-decoration: none; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.spec.ts index 19ea29290b..9336e6a58c 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.spec.ts @@ -25,10 +25,15 @@ import { RouterService, RouterState, SystemEventDispatcher, - URLStateManager + URLStateManager, } from '@vdk/shared'; -import { DATA_PIPELINES_CONFIGS, DataJobDetails, DataJobPage, DisplayMode } from '../../../../model'; +import { + DATA_PIPELINES_CONFIGS, + DataJobDetails, + DataJobPage, + DisplayMode, +} from '../../../../model'; import { DataJobsApiService, DataJobsService } from '../../../../services'; @@ -49,7 +54,7 @@ describe('DataJobsExploreGridComponent', () => { let fixture: ComponentFixture; const TEST_JOB = { - jobName: 'job001' + jobName: 'job001', }; beforeAll(() => { @@ -61,38 +66,57 @@ describe('DataJobsExploreGridComponent', () => { beforeEach(() => { const activatedRouteStub = () => ({ queryParams: { - subscribe: CallFake + subscribe: CallFake, }, - snapshot: null + snapshot: null, }); const routerStub = () => ({ - url: '/explore/data-jobs' + url: '/explore/data-jobs', }); - componentServiceStub = jasmine.createSpyObj('componentService', ['init', 'getModel', 'idle', 'update']); - navigationServiceStub = jasmine.createSpyObj('navigationService', ['navigate', 'navigateTo', 'navigateBack']); + componentServiceStub = jasmine.createSpyObj( + 'componentService', + ['init', 'getModel', 'idle', 'update'] + ); + navigationServiceStub = jasmine.createSpyObj( + 'navigationService', + ['navigate', 'navigateTo', 'navigateBack'] + ); dataJobsApiServiceStub = jasmine.createSpyObj( 'dataJobsService', ['getJobs', 'getJobDetails', 'getJobExecutions'] ); - dataJobsServiceStub = jasmine.createSpyObj('dataJobsService', [ - 'loadJobs', - 'notifyForRunningJobExecutionId', - 'notifyForJobExecutions', - 'notifyForTeamImplicitly', - 'getNotifiedForRunningJobExecutionId', - 'getNotifiedForJobExecutions', - 'getNotifiedForTeamImplicitly' - ]); - locationStub = jasmine.createSpyObj('location', ['path', 'go']); - routerServiceStub = jasmine.createSpyObj('routerService', ['getState', 'get']); - errorHandlerServiceStub = jasmine.createSpyObj('errorHandlerService', [ - 'processError', - 'handleError' + dataJobsServiceStub = jasmine.createSpyObj( + 'dataJobsService', + [ + 'loadJobs', + 'notifyForRunningJobExecutionId', + 'notifyForJobExecutions', + 'notifyForTeamImplicitly', + 'getNotifiedForRunningJobExecutionId', + 'getNotifiedForJobExecutions', + 'getNotifiedForTeamImplicitly', + ] + ); + locationStub = jasmine.createSpyObj('location', [ + 'path', + 'go', ]); + routerServiceStub = jasmine.createSpyObj( + 'routerService', + ['getState', 'get'] + ); + errorHandlerServiceStub = jasmine.createSpyObj( + 'errorHandlerService', + ['processError', 'handleError'] + ); - dataJobsServiceStub.getNotifiedForJobExecutions.and.returnValue(new Subject()); - dataJobsServiceStub.getNotifiedForTeamImplicitly.and.returnValue(new BehaviorSubject('taurus')); + dataJobsServiceStub.getNotifiedForJobExecutions.and.returnValue( + new Subject() + ); + dataJobsServiceStub.getNotifiedForTeamImplicitly.and.returnValue( + new BehaviorSubject('taurus') + ); componentModelStub = ComponentModel.of( ComponentStateImpl.of({}), @@ -110,19 +134,25 @@ describe('DataJobsExploreGridComponent', () => { { provide: DATA_PIPELINES_CONFIGS, useFactory: () => ({ - defaultOwnerTeamName: 'all' - }) + defaultOwnerTeamName: 'all', + }), }, { provide: RouterService, useValue: routerServiceStub }, { provide: ComponentService, useValue: componentServiceStub }, { provide: NavigationService, useValue: navigationServiceStub }, { provide: ActivatedRoute, useFactory: activatedRouteStub }, - { provide: DataJobsApiService, useValue: dataJobsApiServiceStub }, + { + provide: DataJobsApiService, + useValue: dataJobsApiServiceStub, + }, { provide: DataJobsService, useValue: dataJobsServiceStub }, { provide: Location, useValue: locationStub }, { provide: Router, useFactory: routerStub }, - { provide: ErrorHandlerService, useValue: errorHandlerServiceStub } - ] + { + provide: ErrorHandlerService, + useValue: errorHandlerServiceStub, + }, + ], }); fixture = TestBed.createComponent(DataJobsExploreGridComponent); @@ -130,18 +160,26 @@ describe('DataJobsExploreGridComponent', () => { component.teamNameFilter = 'testFilterTeam'; component.model = componentModelStub; - dataJobsApiServiceStub.getJobs.and.returnValue(of({ - data: { - content: [], - totalItems: 0 - } - } as ApolloQueryResult)); - dataJobsApiServiceStub.getJobDetails.and.returnValue(of(null) as Observable); - dataJobsApiServiceStub.getJobExecutions.and.returnValue(of({ content: [], totalItems: 0, totalPages: 0 })); + dataJobsApiServiceStub.getJobs.and.returnValue( + of({ + data: { + content: [], + totalItems: 0, + }, + } as ApolloQueryResult) + ); + dataJobsApiServiceStub.getJobDetails.and.returnValue( + of(null) as Observable + ); + dataJobsApiServiceStub.getJobExecutions.and.returnValue( + of({ content: [], totalItems: 0, totalPages: 0 }) + ); locationStub.path.and.returnValue('/explore/data-jobs'); - spyOn(SystemEventDispatcher, 'send').and.returnValue(Promise.resolve(true)); + spyOn(SystemEventDispatcher, 'send').and.returnValue( + Promise.resolve(true) + ); }); it('can load instance', () => { @@ -166,7 +204,10 @@ describe('DataJobsExploreGridComponent', () => { describe('urlUpdateStrategy', () => { it('should verify the behaviour of _doUrlUpdate when urlUpdateStrategy is default (updateRouter)', () => { - const navigateToUrlSpy = spyOn(component.urlStateManager, 'navigateToUrl').and.returnValue(Promise.resolve(true)); + const navigateToUrlSpy = spyOn( + component.urlStateManager, + 'navigateToUrl' + ).and.returnValue(Promise.resolve(true)); // @ts-ignore component._doUrlUpdate(); @@ -175,7 +216,10 @@ describe('DataJobsExploreGridComponent', () => { }); it('should verify the behaviour of _doUrlUpdate when urlUpdateStrategy is changed (updateLocation)', () => { - const locationToURLSpy = spyOn(component.urlStateManager, 'locationToURL').and.callFake(CallFake); + const locationToURLSpy = spyOn( + component.urlStateManager, + 'locationToURL' + ).and.callFake(CallFake); component.urlUpdateStrategy = 'updateLocation'; // @ts-ignore @@ -188,31 +232,49 @@ describe('DataJobsExploreGridComponent', () => { describe('urlStateManager', () => { it('should verify will invoke default urlStateManager (locally created)', () => { // Given - const setQueryParamSpy = spyOn(component.urlStateManager, 'setQueryParam').and.callFake(CallFake); + const setQueryParamSpy = spyOn( + component.urlStateManager, + 'setQueryParam' + ).and.callFake(CallFake); // When component.search('search'); // Then - expect(setQueryParamSpy).toHaveBeenCalledWith(QUERY_PARAM_SEARCH, 'search'); + expect(setQueryParamSpy).toHaveBeenCalledWith( + QUERY_PARAM_SEARCH, + 'search' + ); }); it('should verify will invoke external urlStateManager (dependency injected)', () => { // Given - const urlStateManagerStub = new URLStateManager('baseUrl', locationStub); - const setQueryParamSpy = spyOn(urlStateManagerStub, 'setQueryParam').and.callFake(CallFake); + const urlStateManagerStub = new URLStateManager( + 'baseUrl', + locationStub + ); + const setQueryParamSpy = spyOn( + urlStateManagerStub, + 'setQueryParam' + ).and.callFake(CallFake); // When component.urlStateManager = urlStateManagerStub; component.search('search'); // Then - expect(setQueryParamSpy).toHaveBeenCalledWith(QUERY_PARAM_SEARCH, 'search'); + expect(setQueryParamSpy).toHaveBeenCalledWith( + QUERY_PARAM_SEARCH, + 'search' + ); }); it('should verify will invoke default urlStateManager (dependency injection is null or undefined)', () => { // Given - const setQueryParamSpy = spyOn(component.urlStateManager, 'setQueryParam').and.callFake(CallFake); + const setQueryParamSpy = spyOn( + component.urlStateManager, + 'setQueryParam' + ).and.callFake(CallFake); // When component.urlStateManager = null; @@ -221,18 +283,26 @@ describe('DataJobsExploreGridComponent', () => { component.search('search test value 2'); // Then - expect(setQueryParamSpy.calls.argsFor(0)).toEqual([QUERY_PARAM_SEARCH, 'search test value 1']); - expect(setQueryParamSpy.calls.argsFor(1)).toEqual([QUERY_PARAM_SEARCH, 'search test value 2']); + expect(setQueryParamSpy.calls.argsFor(0)).toEqual([ + QUERY_PARAM_SEARCH, + 'search test value 1', + ]); + expect(setQueryParamSpy.calls.argsFor(1)).toEqual([ + QUERY_PARAM_SEARCH, + 'search test value 2', + ]); }); }); describe('handleStateChange', () => { it('makes expected calls', () => { - const clrDatagridStateInterfaceStub = { filters: [] } as ClrDatagridStateInterface; + const clrDatagridStateInterfaceStub = { + filters: [], + } as ClrDatagridStateInterface; clrDatagridStateInterfaceStub.filters.push({ property: 'search_prop', pattern: '%search%', - sort: ASC + sort: ASC, }); component.gridState = clrDatagridStateInterfaceStub; @@ -249,7 +319,9 @@ describe('DataJobsExploreGridComponent', () => { describe('viewJobDetails', () => { it('skips viewJobDetails for undefined job', () => { // Given - const navigateToSpy = spyOn(component, 'navigateTo').and.callFake(CallFake); + const navigateToSpy = spyOn(component, 'navigateTo').and.callFake( + CallFake + ); // When component.navigateToJobDetails(); @@ -261,17 +333,23 @@ describe('DataJobsExploreGridComponent', () => { it('opens viewJobDetails for valid job', () => { // Given - const navigateToSpy = spyOn(component, 'navigateTo').and.returnValue(Promise.resolve(true)); + const navigateToSpy = spyOn( + component, + 'navigateTo' + ).and.returnValue(Promise.resolve(true)); component.ngOnInit(); // When - component.navigateToJobDetails({ jobName: 'job001', config: { team: 'team007' } }); + component.navigateToJobDetails({ + jobName: 'job001', + config: { team: 'team007' }, + }); // Then expect(component.selectedJob).toBeDefined(); expect(navigateToSpy).toHaveBeenCalledWith({ '$.team': 'team007', - '$.job': 'job001' + '$.job': 'job001', }); }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.ts index 0144aba333..e2e3396536 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.ts @@ -7,9 +7,18 @@ import { Component, ElementRef, Inject, Input, OnInit } from '@angular/core'; import { DOCUMENT, Location } from '@angular/common'; import { ActivatedRoute, Router } from '@angular/router'; -import { ComponentService, ErrorHandlerService, NavigationService, RouterService } from '@vdk/shared'; +import { + ComponentService, + ErrorHandlerService, + NavigationService, + RouterService, +} from '@vdk/shared'; -import { DATA_PIPELINES_CONFIGS, DataPipelinesConfig, DisplayMode } from '../../../../model'; +import { + DATA_PIPELINES_CONFIGS, + DataPipelinesConfig, + DisplayMode, +} from '../../../../model'; import { DataJobsApiService, DataJobsService } from '../../../../services'; import { DataJobsBaseGridComponent } from '../../../base-grid/data-jobs-base-grid.component'; @@ -17,16 +26,20 @@ import { DataJobsBaseGridComponent } from '../../../base-grid/data-jobs-base-gri @Component({ selector: 'lib-data-jobs-explore-grid', templateUrl: './data-jobs-explore-grid.component.html', - styleUrls: ['./data-jobs-explore-grid.component.scss'] + styleUrls: ['./data-jobs-explore-grid.component.scss'], }) -export class DataJobsExploreGridComponent extends DataJobsBaseGridComponent implements OnInit { +export class DataJobsExploreGridComponent + extends DataJobsBaseGridComponent + implements OnInit +{ //Decorators are not inherited in Angular. If we need @Input() we need to declare it here @Input() override teamNameFilter: string; @Input() override displayMode: DisplayMode; readonly uuid = 'DataJobsExploreGridComponent'; - constructor( // NOSONAR + constructor( + // NOSONAR componentService: ComponentService, navigationService: NavigationService, activatedRoute: ActivatedRoute, @@ -38,9 +51,9 @@ export class DataJobsExploreGridComponent extends DataJobsBaseGridComponent impl router: Router, elementRef: ElementRef, @Inject(DOCUMENT) document: Document, - @Inject(DATA_PIPELINES_CONFIGS) dataPipelinesModuleConfig: DataPipelinesConfig + @Inject(DATA_PIPELINES_CONFIGS) + dataPipelinesModuleConfig: DataPipelinesConfig ) { - super( componentService, navigationService, @@ -64,12 +77,13 @@ export class DataJobsExploreGridComponent extends DataJobsBaseGridComponent impl lastDeployedDate: true, lastDeployedBy: true, source: true, - logsUrl: true - } - }); + logsUrl: true, + }, + } + ); } showTeamsColumn() { - return (this.dataPipelinesModuleConfig?.exploreConfig?.showTeamsColumn); + return this.dataPipelinesModuleConfig?.exploreConfig?.showTeamsColumn; } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.html index 926051c5ab..d7f77c3dca 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.html @@ -5,7 +5,12 @@
    -

    Explore Data Jobs

    +

    + Explore Data Jobs +

    diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.spec.ts index 00746c00db..524b817fdc 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.spec.ts @@ -14,7 +14,7 @@ describe('DataJobsExploreComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ schemas: [NO_ERRORS_SCHEMA], - declarations: [DataJobsExplorePageComponent] + declarations: [DataJobsExplorePageComponent], }); fixture = TestBed.createComponent(DataJobsExplorePageComponent); component = fixture.componentInstance; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.ts index 43e48ac322..60b76de68f 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.ts @@ -8,7 +8,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'lib-data-jobs-explore', templateUrl: './data-jobs-explore-page.component.html', - styleUrls: ['./data-jobs-explore-page.component.css'] + styleUrls: ['./data-jobs-explore-page.component.css'], }) -export class DataJobsExplorePageComponent { -} +export class DataJobsExplorePageComponent {} diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.html index 0f3dff257f..16d4de9783 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.html @@ -5,346 +5,577 @@ -
    - - +
    +
    -
    -
    -
    -
    -
    -     -
    - - - Job name +
    + + Job name - Team name + Team name - - + + Description - - + + Deployment Status - + - + Last Execution End (UTC) - + Last Execution - Duration + [clrDgHideableColumn]="{ + hidden: localStorageUserConfig.hiddenColumns[ + 'lastExecutionDuration' + ] + }" + (clrDgHiddenChange)=" + showOrHideColumnChange('lastExecutionDuration', $event) + " + >Last Execution Duration - + Last Execution Status - - + - + - - + Success rate - - + Calculating up to 336 executions from last 14 days - Schedule (in UTC) + Schedule (in UTC) - Next run (UTC) + Next run (UTC) - Last Deployed - (UTC) + Last Deployed (UTC) - Last Deployed By + Last Deployed By - Notifications + Notifications - Source + Source - Logs + Logs - Details + Details - + - {{job.jobName}} + {{ job.jobName }} - {{job.config?.team}} - - - {{job.config?.description | words: 8}} + {{ job.config?.team }} + + + {{ job.config?.description | words: 8 }} - + - {{ job.deployments ? (job.deployments[0]?.lastExecutionTime | date:'MMM d, y, hh:mm a':'utc') : null }} + {{ + job.deployments + ? (job.deployments[0]?.lastExecutionTime + | date: "MMM d, y, hh:mm a":"utc") + : null + }} - {{ job.deployments ? ((job.deployments[0]?.lastExecutionDuration) | formatDuration) : null }} + {{ + job.deployments + ? (job.deployments[0]?.lastExecutionDuration + | formatDuration) + : null + }} - + - {{job.deployments | executionSuccessRate}} + {{ job.deployments | executionSuccessRate }} - {{ job.config?.schedule?.scheduleCron | formatSchedule:'' }} + {{ + job.config?.schedule?.scheduleCron | formatSchedule: "" + }} - - - {{ job.config?.schedule?.nextRunEpochSeconds | parseEpoch | date: 'MMM d, y, hh:mm a':'UTC' }} - + + + {{ + job.config?.schedule?.nextRunEpochSeconds + | parseEpoch + | date: "MMM d, y, hh:mm a":"UTC" + }} + - - {{ job.deployments && job.deployments[0]?.lastDeployedDate ? (job.deployments[0]?.lastDeployedDate | date: 'MMM d, y, hh:mm a':'UTC') : null }} + + {{ + job.deployments && job.deployments[0]?.lastDeployedDate + ? (job.deployments[0]?.lastDeployedDate + | date: "MMM d, y, hh:mm a":"UTC") + : null + }} - {{ job.deployments ? (job.deployments[0]?.lastDeployedBy) : null }} + {{ + job.deployments + ? job.deployments[0]?.lastDeployedBy + : null + }} - - - + + + - - + + - - + +
    -
    - No data jobs created! -
    +
    No data jobs created!
    Learn about Data Jobs + > Learn about Data + Jobs
    -
    +
    No data jobs that match with - {{searchQueryValue}} criteria + >No data jobs that match with + {{ searchQueryValue }} criteria
    - - - Data Jobs per page - {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} Data Jobs + + Data Jobs per page + {{ pagination.firstItem + 1 }} - + {{ pagination.lastItem + 1 }} of + {{ pagination.totalItems }} Data Jobs -
    - + - + diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.scss index fdc1f842e1..aa430439ca 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.scss @@ -6,9 +6,9 @@ @import "../../../base-grid/data-jobs-base-grid.component"; clr-datagrid clr-dg-placeholder { - .msg-btn-placeholder { - display: flex; - flex-direction: column; - align-items: center; - } + .msg-btn-placeholder { + display: flex; + flex-direction: column; + align-items: center; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.spec.ts index 91b7417a34..9638d5bc1a 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.spec.ts @@ -6,7 +6,12 @@ import { NO_ERRORS_SCHEMA } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { Location } from '@angular/common'; -import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; +import { + ComponentFixture, + fakeAsync, + TestBed, + tick, +} from '@angular/core/testing'; import { of, Subject } from 'rxjs'; @@ -24,7 +29,7 @@ import { RouterService, RouterState, RouteState, - ToastService + ToastService, } from '@vdk/shared'; import { ExtractJobStatusPipe } from '../../../../shared/pipes'; @@ -49,18 +54,16 @@ describe('DataJobsManageGridComponent', () => { const TEST_DEPLOYMENT = { id: 'id001', - enabled: true + enabled: true, }; const TEST_JOB = { jobName: 'job001', config: { description: 'description001', - team: 'testTeam' + team: 'testTeam', }, - deployments: [ - TEST_DEPLOYMENT - ] + deployments: [TEST_DEPLOYMENT], }; let teamSubject: Subject; @@ -75,68 +78,82 @@ describe('DataJobsManageGridComponent', () => { }); beforeEach(() => { - componentServiceStub = jasmine.createSpyObj('componentService', ['init', 'getModel', 'idle', 'update']); - navigationServiceStub = jasmine.createSpyObj('navigationService', ['navigateTo', 'navigateBack']); - routerServiceStub = jasmine.createSpyObj('routerService', ['getState', 'get']); - dataJobsServiceStub = jasmine.createSpyObj('dataJobsService', [ - 'loadJobs', - 'notifyForRunningJobExecutionId', - 'notifyForJobExecutions', - 'notifyForTeamImplicitly', - 'getNotifiedForRunningJobExecutionId', - 'getNotifiedForJobExecutions', - 'getNotifiedForTeamImplicitly' - ]); - toastServiceStub = jasmine.createSpyObj('toastService', ['show']); - errorHandlerServiceStub = jasmine.createSpyObj('errorHandlerService', [ - 'processError', - 'handleError' + componentServiceStub = jasmine.createSpyObj( + 'componentService', + ['init', 'getModel', 'idle', 'update'] + ); + navigationServiceStub = jasmine.createSpyObj( + 'navigationService', + ['navigateTo', 'navigateBack'] + ); + routerServiceStub = jasmine.createSpyObj( + 'routerService', + ['getState', 'get'] + ); + dataJobsServiceStub = jasmine.createSpyObj( + 'dataJobsService', + [ + 'loadJobs', + 'notifyForRunningJobExecutionId', + 'notifyForJobExecutions', + 'notifyForTeamImplicitly', + 'getNotifiedForRunningJobExecutionId', + 'getNotifiedForJobExecutions', + 'getNotifiedForTeamImplicitly', + ] + ); + toastServiceStub = jasmine.createSpyObj('toastService', [ + 'show', ]); + errorHandlerServiceStub = jasmine.createSpyObj( + 'errorHandlerService', + ['processError', 'handleError'] + ); teamSubject = new Subject(); - teamSubjectSubscribeSpy = spyOn(teamSubject, 'subscribe').and.callThrough(); + teamSubjectSubscribeSpy = spyOn( + teamSubject, + 'subscribe' + ).and.callThrough(); const activatedRouteStub = () => ({ queryParams: { - subscribe: CallFake + subscribe: CallFake, }, - snapshot: null + snapshot: null, }); const dataJobsApiServiceStub = () => ({ getAllJobs: () => ({ - subscribe: CallFake + subscribe: CallFake, }), getJobDetails: () => ({ - subscribe: () => CallFake + subscribe: () => CallFake, }), getJobExecutions: () => ({ - subscribe: () => CallFake + subscribe: () => CallFake, }), updateDataJobStatus: () => ({ subscribe: () => { return new Subject(); - } + }, }), executeDataJob: () => ({ subscribe: () => { return new Subject(); - } - }) + }, + }), }); const locationStub = () => ({ path: () => 'Test', - go: () => CallFake + go: () => CallFake, }); const routerStub = () => ({ - url: '/explore/data-jobs' + url: '/explore/data-jobs', }); TestBed.configureTestingModule({ schemas: [NO_ERRORS_SCHEMA], - declarations: [ - DataJobsManageGridComponent, - ExtractJobStatusPipe - ], + declarations: [DataJobsManageGridComponent, ExtractJobStatusPipe], providers: [ { provide: DATA_PIPELINES_CONFIGS, @@ -147,9 +164,9 @@ describe('DataJobsManageGridComponent', () => { showTeamsColumn: true, allowExecuteNow: true, displayMode: DisplayMode.COMPACT, - selectedTeamNameObservable: teamSubject - } - }) + selectedTeamNameObservable: teamSubject, + }, + }), }, { provide: RouterService, useValue: routerServiceStub }, { provide: ComponentService, useValue: componentServiceStub }, @@ -157,20 +174,22 @@ describe('DataJobsManageGridComponent', () => { { provide: ActivatedRoute, useFactory: activatedRouteStub }, { provide: DataJobsService, useValue: dataJobsServiceStub }, { provide: ToastService, useValue: toastServiceStub }, - { provide: DataJobsApiService, useFactory: dataJobsApiServiceStub }, + { + provide: DataJobsApiService, + useFactory: dataJobsApiServiceStub, + }, { provide: Location, useFactory: locationStub }, { provide: Router, useFactory: routerStub }, - { provide: ErrorHandlerService, useValue: errorHandlerServiceStub } - - ] + { + provide: ErrorHandlerService, + useValue: errorHandlerServiceStub, + }, + ], }); componentModelStub = ComponentModel.of( ComponentStateImpl.of({}), - RouterState.of( - RouteState.empty(), - 1 - ) + RouterState.of(RouteState.empty(), 1) ); componentServiceStub.init.and.returnValue(of(componentModelStub)); componentServiceStub.getModel.and.returnValue(of(componentModelStub)); @@ -190,7 +209,9 @@ describe('DataJobsManageGridComponent', () => { describe('editJob', () => { it('skips editJob for undefined job', () => { // Given - const navigateToSpy = spyOn(component, 'navigateTo').and.callFake(CallFake); + const navigateToSpy = spyOn(component, 'navigateTo').and.callFake( + CallFake + ); component.selectedJob = null; // When @@ -203,7 +224,10 @@ describe('DataJobsManageGridComponent', () => { it('opens editJob for valid job', () => { // Given - const navigateToSpy = spyOn(component, 'navigateTo').and.returnValue(Promise.resolve(true)); + const navigateToSpy = spyOn( + component, + 'navigateTo' + ).and.returnValue(Promise.resolve(true)); component.selectedJob = null; component.ngOnInit(); @@ -214,7 +238,7 @@ describe('DataJobsManageGridComponent', () => { expect(component.selectedJob).toBeDefined(); expect(navigateToSpy).toHaveBeenCalledWith({ '$.team': 'testTeam', - '$.job': 'job001' + '$.job': 'job001', }); }); }); @@ -245,9 +269,8 @@ describe('DataJobsManageGridComponent', () => { it('makes expected calls for valid SelectedJobDeployment', () => { component.selectedJob.deployments = [TEST_DEPLOYMENT]; - const dataJobSServiceStub: DataJobsApiService = fixture.debugElement.injector.get( - DataJobsApiService - ); + const dataJobSServiceStub: DataJobsApiService = + fixture.debugElement.injector.get(DataJobsApiService); spyOn(component, 'extractSelectedJobDeployment').and.callThrough(); spyOn(dataJobSServiceStub, 'updateDataJobStatus').and.callThrough(); component.onJobStatusChange(); @@ -260,9 +283,8 @@ describe('DataJobsManageGridComponent', () => { it('makes expected calls', () => { component.selectedJob = TEST_JOB; component.selectedJob.deployments = [TEST_DEPLOYMENT]; - const dataJobSServiceStub: DataJobsApiService = fixture.debugElement.injector.get( - DataJobsApiService - ); + const dataJobSServiceStub: DataJobsApiService = + fixture.debugElement.injector.get(DataJobsApiService); spyOn(component, 'extractSelectedJobDeployment').and.callThrough(); spyOn(dataJobSServiceStub, 'executeDataJob').and.callThrough(); component.onExecuteDataJob(); @@ -328,8 +350,8 @@ describe('DataJobsManageGridComponent', () => { sort: null, page: { size: 10, - current: 2 - } + current: 2, + }, }; component.ngOnInit(); teamSubject.next('teamA'); @@ -347,7 +369,7 @@ describe('DataJobsManageGridComponent', () => { expect(filter.criteria[0]).toEqual({ property: 'config.team', pattern: 'teamA', - sort: null + sort: null, }); })); @@ -355,13 +377,13 @@ describe('DataJobsManageGridComponent', () => { // Given const state: ClrDatagridStateInterface = { filters: [ - { property: 'deployments.enabled', value: 'true' } + { property: 'deployments.enabled', value: 'true' }, ], sort: { by: 'jobName', reverse: false }, page: { size: 10, - current: 2 - } + current: 2, + }, }; component.ngOnInit(); teamSubject.next('teamB'); @@ -377,8 +399,12 @@ describe('DataJobsManageGridComponent', () => { const filter = componentModelStub.getComponentState().filter; expect(filter.criteria).toEqual([ { property: 'config.team', pattern: 'teamB', sort: null }, - { property: 'deployments.enabled', pattern: 'true', sort: null }, - { property: 'jobName', pattern: null, sort: ASC } + { + property: 'deployments.enabled', + pattern: 'true', + sort: null, + }, + { property: 'jobName', pattern: null, sort: ASC }, ]); })); @@ -386,13 +412,13 @@ describe('DataJobsManageGridComponent', () => { // Given const state: ClrDatagridStateInterface = { filters: [ - { property: 'deployments.enabled', value: 'false' } + { property: 'deployments.enabled', value: 'false' }, ], sort: { by: 'config.description', reverse: true }, page: { size: 10, - current: 2 - } + current: 2, + }, }; component.filterByTeamName = false; component.ngOnInit(); @@ -408,8 +434,16 @@ describe('DataJobsManageGridComponent', () => { const filter = componentModelStub.getComponentState().filter; console.log(filter.criteria); expect(filter.criteria).toEqual([ - { property: 'deployments.enabled', pattern: 'false', sort: null }, - { property: 'config.description', pattern: null, sort: DESC } + { + property: 'deployments.enabled', + pattern: 'false', + sort: null, + }, + { + property: 'config.description', + pattern: null, + sort: DESC, + }, ]); })); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.ts index 8b72b21230..1e02e59573 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.ts @@ -10,23 +10,43 @@ import { HttpErrorResponse } from '@angular/common/http'; import { VmwToastType } from '@vdk/shared'; -import { ComponentService, ErrorHandlerService, NavigationService, RouterService, ToastService } from '@vdk/shared'; +import { + ComponentService, + ErrorHandlerService, + NavigationService, + RouterService, + ToastService, +} from '@vdk/shared'; import { ErrorUtil } from '../../../../shared/utils'; -import { ConfirmationModalOptions, ModalOptions } from '../../../../shared/model'; - -import { DATA_PIPELINES_CONFIGS, DataJobStatus, DataPipelinesConfig, ToastDefinitions } from '../../../../model'; +import { + ConfirmationModalOptions, + ModalOptions, +} from '../../../../shared/model'; + +import { + DATA_PIPELINES_CONFIGS, + DataJobStatus, + DataPipelinesConfig, + ToastDefinitions, +} from '../../../../model'; import { DataJobsApiService, DataJobsService } from '../../../../services'; -import { ClrGridUIState, DataJobsBaseGridComponent } from '../../../base-grid/data-jobs-base-grid.component'; +import { + ClrGridUIState, + DataJobsBaseGridComponent, +} from '../../../base-grid/data-jobs-base-grid.component'; @Component({ selector: 'lib-data-jobs-manage-grid', templateUrl: './data-jobs-manage-grid.component.html', - styleUrls: ['./data-jobs-manage-grid.component.scss'] + styleUrls: ['./data-jobs-manage-grid.component.scss'], }) -export class DataJobsManageGridComponent extends DataJobsBaseGridComponent implements OnInit { +export class DataJobsManageGridComponent + extends DataJobsBaseGridComponent + implements OnInit +{ readonly uuid = 'DataJobsManageGridComponent'; confirmStatusOptions: ModalOptions; @@ -34,16 +54,17 @@ export class DataJobsManageGridComponent extends DataJobsBaseGridComponent imple override clrGridDefaultFilter: ClrGridUIState['filter'] = { // eslint-disable-next-line @typescript-eslint/naming-convention - 'deployments.enabled': DataJobStatus.ENABLED + 'deployments.enabled': DataJobStatus.ENABLED, }; override clrGridDefaultSort: ClrGridUIState['sort'] = { // eslint-disable-next-line @typescript-eslint/naming-convention - 'deployments.lastExecutionTime': -1 + 'deployments.lastExecutionTime': -1, }; override quickFiltersDefaultActiveIndex = 1; - constructor( // NOSONAR + constructor( + // NOSONAR componentService: ComponentService, navigationService: NavigationService, activatedRoute: ActivatedRoute, @@ -55,7 +76,8 @@ export class DataJobsManageGridComponent extends DataJobsBaseGridComponent imple router: Router, elementRef: ElementRef, @Inject(DOCUMENT) document: Document, - @Inject(DATA_PIPELINES_CONFIGS) dataPipelinesModuleConfig: DataPipelinesConfig, + @Inject(DATA_PIPELINES_CONFIGS) + dataPipelinesModuleConfig: DataPipelinesConfig, private readonly toastService: ToastService ) { super( @@ -79,9 +101,10 @@ export class DataJobsManageGridComponent extends DataJobsBaseGridComponent imple lastDeployedDate: true, lastDeployedBy: true, notifications: true, - source: true - } - }); + source: true, + }, + } + ); this.confirmStatusOptions = new ConfirmationModalOptions(); this.confirmExecuteNowOptions = new ConfirmationModalOptions(); @@ -90,13 +113,13 @@ export class DataJobsManageGridComponent extends DataJobsBaseGridComponent imple } enable() { - this.confirmStatusOptions.message = `Job ${ this.selectedJob.jobName } will be enabled`; + this.confirmStatusOptions.message = `Job ${this.selectedJob.jobName} will be enabled`; this.confirmStatusOptions.infoText = `Enabling this job means that it will be scheduled for execution`; this.confirmStatusOptions.opened = true; } disable() { - this.confirmStatusOptions.message = `Job ${ this.selectedJob.jobName } will be disabled`; + this.confirmStatusOptions.message = `Job ${this.selectedJob.jobName} will be disabled`; this.confirmStatusOptions.infoText = `Disabling this job means that it will NOT be scheduled for execution anymore`; this.confirmStatusOptions.opened = true; @@ -105,20 +128,24 @@ export class DataJobsManageGridComponent extends DataJobsBaseGridComponent imple onJobStatusChange() { const selectedJobDeployment = this.extractSelectedJobDeployment(); if (!selectedJobDeployment) { - console.log('Status update action will not be performed for job with no deployments.'); + console.log( + 'Status update action will not be performed for job with no deployments.' + ); return; } this.subscriptions.push( - this.dataJobsApiService.updateDataJobStatus( - this.selectedJob.config?.team, - this.selectedJob.jobName, - selectedJobDeployment.id, - !selectedJobDeployment.enabled - ) + this.dataJobsApiService + .updateDataJobStatus( + this.selectedJob.config?.team, + this.selectedJob.jobName, + selectedJobDeployment.id, + !selectedJobDeployment.enabled + ) .subscribe({ next: () => { - selectedJobDeployment.enabled = !selectedJobDeployment.enabled; + selectedJobDeployment.enabled = + !selectedJobDeployment.enabled; const state = selectedJobDeployment.enabled ? 'enabled' @@ -127,48 +154,54 @@ export class DataJobsManageGridComponent extends DataJobsBaseGridComponent imple this.toastService.show({ type: VmwToastType.INFO, title: `Status update completed`, - description: `Data job "${ this.selectedJob.jobName }" successfully ${ state }` + description: `Data job "${this.selectedJob.jobName}" successfully ${state}`, }); }, error: (error: unknown) => { this.errorHandlerService.processError( ErrorUtil.extractError(error as Error), { - title: `Updating status for Data job "${ this.selectedJob?.jobName }" failed` + title: `Updating status for Data job "${this.selectedJob?.jobName}" failed`, } ); - } + }, }) ); } executeDataJob() { - this.confirmExecuteNowOptions.message = `Job ${ this.selectedJob.jobName } will be queued for execution.`; + this.confirmExecuteNowOptions.message = `Job ${this.selectedJob.jobName} will be queued for execution.`; this.confirmExecuteNowOptions.infoText = `Confirming will result in immediate data job execution.`; this.confirmExecuteNowOptions.opened = true; } onExecuteDataJob() { this.subscriptions.push( - this.dataJobsApiService.executeDataJob( - this.selectedJob.config?.team, - this.selectedJob.jobName, - this.extractSelectedJobDeployment().id - ) + this.dataJobsApiService + .executeDataJob( + this.selectedJob.config?.team, + this.selectedJob.jobName, + this.extractSelectedJobDeployment().id + ) .subscribe({ next: () => { - this.toastService.show(ToastDefinitions.successfullyRanJob(this.selectedJob.jobName)); + this.toastService.show( + ToastDefinitions.successfullyRanJob( + this.selectedJob.jobName + ) + ); }, error: (error: unknown) => { this.errorHandlerService.processError( ErrorUtil.extractError(error as Error), { - title: (error as HttpErrorResponse)?.status === 409 - ? 'Failed, Data job is already executing' - : 'Failed to queue Data job for execution' + title: + (error as HttpErrorResponse)?.status === 409 + ? 'Failed, Data job is already executing' + : 'Failed to queue Data job for execution', } ); - } + }, }) ); } @@ -178,38 +211,44 @@ export class DataJobsManageGridComponent extends DataJobsBaseGridComponent imple } showTeamsColumn() { - return (this.dataPipelinesModuleConfig?.manageConfig?.showTeamsColumn); + return this.dataPipelinesModuleConfig?.manageConfig?.showTeamsColumn; } extractSelectedJobDeployment() { - return this.selectedJob?.deployments[this.selectedJob?.deployments?.length - 1]; + return this.selectedJob?.deployments[ + this.selectedJob?.deployments?.length - 1 + ]; } private _inputConfig(dataPipelinesModuleConfig: DataPipelinesConfig) { if (dataPipelinesModuleConfig.manageConfig?.filterByTeamName) { - this.filterByTeamName = dataPipelinesModuleConfig.manageConfig?.filterByTeamName; + this.filterByTeamName = + dataPipelinesModuleConfig.manageConfig?.filterByTeamName; } if (dataPipelinesModuleConfig.manageConfig?.displayMode) { - this.displayMode = dataPipelinesModuleConfig.manageConfig?.displayMode; + this.displayMode = + dataPipelinesModuleConfig.manageConfig?.displayMode; } - if (dataPipelinesModuleConfig.manageConfig?.selectedTeamNameObservable) { + if ( + dataPipelinesModuleConfig.manageConfig?.selectedTeamNameObservable + ) { this.subscriptions.push( - dataPipelinesModuleConfig.manageConfig - ?.selectedTeamNameObservable - .subscribe({ - next: (newTeam) => { - if (newTeam !== this.teamNameFilter) { - this.teamNameFilter = newTeam; - this.refresh(); - } - }, - error: (error: unknown) => { - this.resetTeamNameFilter(); - console.error('Error loading selected team', error); - } - }) + dataPipelinesModuleConfig.manageConfig?.selectedTeamNameObservable.subscribe( + { + next: (newTeam) => { + if (newTeam !== this.teamNameFilter) { + this.teamNameFilter = newTeam; + this.refresh(); + } + }, + error: (error: unknown) => { + this.resetTeamNameFilter(); + console.error('Error loading selected team', error); + }, + } + ) ); } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.html index 4767da5969..269cf055f4 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.html @@ -5,7 +5,12 @@
    -

    Manage Data Jobs

    +

    + Manage Data Jobs +

    diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.spec.ts index cf085d51b6..4974b54609 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.spec.ts @@ -14,7 +14,7 @@ describe('DataJobsManageComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ schemas: [NO_ERRORS_SCHEMA], - declarations: [DataJobsManagePageComponent] + declarations: [DataJobsManagePageComponent], }); fixture = TestBed.createComponent(DataJobsManagePageComponent); component = fixture.componentInstance; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.ts index d575eec96c..bf80526841 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.ts @@ -8,7 +8,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'lib-data-jobs-manage', templateUrl: './data-jobs-manage-page.component.html', - styleUrls: ['./data-jobs-manage-page.component.css'] + styleUrls: ['./data-jobs-manage-page.component.css'], }) -export class DataJobsManagePageComponent { -} +export class DataJobsManagePageComponent {} diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.html index 7c9e14460d..9f9c2f8bcc 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.html @@ -3,44 +3,66 @@ ~ SPDX-License-Identifier: Apache-2.0 --> - + + We couldn't find any failed executions! - We couldn't find any failed executions! - - Most recent failed executions - Last 24h (UTC time) + [clrDgSortBy]="'endTime'" + >Most recent failed executions - Last 24h (UTC time) - Status + Status - + - End (UTC) + End (UTC) - - - - - {{ jobExecution.id}} + + + + {{ jobExecution.id }} - + - {{ jobExecution.endTime | date:'MMM d, y, hh:mm:ss a':'UTC' }} + {{ + jobExecution.endTime | date: "MMM d, y, hh:mm:ss a":"UTC" + }} - diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.scss index ad0933f325..cb8ffddcb2 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.scss @@ -4,56 +4,56 @@ */ .datagrid-executions-widget-table { - height: 300px; - - ::ng-deep .datagrid-table { - width: 100%; - - .header-title { - .datagrid-column-separator { - display: none; - } - } - - .datagrid-row-scrollable { - width: 100%; - } - - .job-name-column { - width: 60% !important; - } - - .status-column { - width: 20% !important; - padding-left: 0px !important; - white-space: nowrap; - } - - .time-column { - width: 20% !important; - min-width: 120px; - } - - clr-dg-cell { - .btn { - width: 100% !important; - text-align: left; - } + height: 300px; + + ::ng-deep .datagrid-table { + width: 100%; + + .header-title { + .datagrid-column-separator { + display: none; + } + } + + .datagrid-row-scrollable { + width: 100%; + } + + .job-name-column { + width: 60% !important; + } + + .status-column { + width: 20% !important; + padding-left: 0px !important; + white-space: nowrap; + } + + .time-column { + width: 20% !important; + min-width: 120px; + } + + clr-dg-cell { + .btn { + width: 100% !important; + text-align: left; + } + } } - } } clr-dg-cell .btn { - margin: 0 !important; - text-transform: none !important; - padding: 0.3rem 0.3rem 0.3rem; + margin: 0 !important; + text-transform: none !important; + padding: 0.3rem 0.3rem 0.3rem; } .no-padding { - padding-bottom: 0px; - padding-top: 0px; + padding-bottom: 0px; + padding-top: 0px; } .hide { - display: none; + display: none; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.ts index 60af6c388a..1ded6be99c 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.ts @@ -3,7 +3,13 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + Input, + OnChanges, + SimpleChanges, +} from '@angular/core'; import { NavigationService } from '@vdk/shared'; @@ -13,10 +19,9 @@ import { DataJob, DataJobExecution, DataJobExecutions } from '../../../model'; selector: 'lib-data-jobs-executions-widget', templateUrl: './data-jobs-executions-widget.component.html', styleUrls: ['./data-jobs-executions-widget.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DataJobsExecutionsWidgetComponent implements OnChanges { - @Input() manageLink: string; @Input() allJobs: DataJob[]; @Input() jobExecutions: DataJobExecutions; @@ -25,28 +30,29 @@ export class DataJobsExecutionsWidgetComponent implements OnChanges { loading = true; - constructor(private readonly navigationService: NavigationService) { - } + constructor(private readonly navigationService: NavigationService) {} /** * ** NgFor elements tracking function. */ trackByFn(index: number, execution: DataJobExecution): string { - return `${ index }|${ execution?.id }`; + return `${index}|${execution?.id}`; } /** * @inheritDoc */ ngOnChanges(changes: SimpleChanges) { - if (changes['jobExecutions'] !== undefined && - changes['jobExecutions'].currentValue !== undefined) { + if ( + changes['jobExecutions'] !== undefined && + changes['jobExecutions'].currentValue !== undefined + ) { this.loading = false; } } navigateToJobExecutions(job?: DataJobExecution): void { - const dataJob = this.allJobs.find(el => el.jobName === job.jobName); + const dataJob = this.allJobs.find((el) => el.jobName === job.jobName); let link = this.manageLink; link = link.replace('{team}', dataJob.config?.team); link = link.replace('{data-job}', dataJob.jobName); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.html index fc5adbafbc..d57f901c26 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.html @@ -3,37 +3,46 @@ ~ SPDX-License-Identifier: Apache-2.0 --> - - + We couldn't find any failed jobs! - Jobs with Failing executions - Last 24h + [clrDgSortBy]="'jobName'" + >Jobs with Failing executions - Last 24h - Failed executions + Failed executions - - + - - {{ dataJob.jobName}} + > + {{ dataJob.jobName }} - {{ dataJob.failedTotal}} + {{ + dataJob.failedTotal + }} - - diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.scss index a59c70cf61..ef6f48eb35 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.scss @@ -4,54 +4,54 @@ */ .datagrid-failed-executions-widget { - height: 300px; - - ::ng-deep .datagrid-table { - width: 100%; - - .header-title { - .datagrid-column-separator { - display: none; - } - } - - .datagrid-row-scrollable { - width: 100%; - } - - .job-name-column { - width: 70% !important; - } - - .center { - width: 30% !important; - text-align: center - } - - clr-dg-cell { - .btn { - width: 100% !important; - text-align: left; - } + height: 300px; + + ::ng-deep .datagrid-table { + width: 100%; + + .header-title { + .datagrid-column-separator { + display: none; + } + } + + .datagrid-row-scrollable { + width: 100%; + } + + .job-name-column { + width: 70% !important; + } + + .center { + width: 30% !important; + text-align: center; + } + + clr-dg-cell { + .btn { + width: 100% !important; + text-align: left; + } + } } - } } clr-dg-cell .btn { - margin: 0 !important; - text-transform: none !important; - padding: 0.3rem 0.3rem 0.3rem; + margin: 0 !important; + text-transform: none !important; + padding: 0.3rem 0.3rem 0.3rem; } .no-padding { - padding-bottom: 0px; - padding-top: 0px; + padding-bottom: 0px; + padding-top: 0px; } .custom-label { - width: 50px; + width: 50px; } .label-column { - display: none; + display: none; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.ts index 9fecc76f88..43e96d0cc4 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.ts @@ -3,7 +3,13 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + Input, + OnChanges, + SimpleChanges, +} from '@angular/core'; import { NavigationService } from '@vdk/shared'; @@ -17,10 +23,9 @@ interface DataJobGrid extends DataJob { selector: 'lib-data-jobs-failed-widget', templateUrl: './data-jobs-failed-widget.component.html', styleUrls: ['./data-jobs-failed-widget.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DataJobsFailedWidgetComponent implements OnChanges { - @Input() manageLink: string; @Input() allJobs: DataJob[]; @Input() jobExecutions: DataJobExecutions = []; @@ -30,14 +35,13 @@ export class DataJobsFailedWidgetComponent implements OnChanges { loading = true; dataJobs: DataJobGrid[] = []; - constructor(private readonly navigationService: NavigationService) { - } + constructor(private readonly navigationService: NavigationService) {} /** * ** NgFor elements tracking function. */ trackByFn(index: number, dataJob: DataJob): string { - return `${ index }|${ dataJob?.jobName }`; + return `${index}|${dataJob?.jobName}`; } /** @@ -46,10 +50,17 @@ export class DataJobsFailedWidgetComponent implements OnChanges { ngOnChanges(changes: SimpleChanges) { if (changes['jobExecutions'] !== undefined) { this.dataJobs = []; - (changes['jobExecutions'].currentValue as DataJobExecutions).forEach((element) => { - const temp = this.dataJobs.find(i => i.jobName === element.jobName); + ( + changes['jobExecutions'].currentValue as DataJobExecutions + ).forEach((element) => { + const temp = this.dataJobs.find( + (i) => i.jobName === element.jobName + ); if (!temp) { - this.dataJobs.push({ jobName: element.jobName, failedTotal: 1 } as DataJobGrid); + this.dataJobs.push({ + jobName: element.jobName, + failedTotal: 1, + } as DataJobGrid); } else { temp.failedTotal++; } @@ -59,7 +70,7 @@ export class DataJobsFailedWidgetComponent implements OnChanges { } navigateToJobDetails(job?: DataJob): void { - const dataJob = this.allJobs.find(el => el.jobName === job.jobName); + const dataJob = this.allJobs.find((el) => el.jobName === job.jobName); let link = this.manageLink; link = link.replace('{team}', dataJob.config?.team); link = link.replace('{data-job}', job.jobName); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.html index ea013b7969..0d5bbd9c6e 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.html @@ -4,50 +4,74 @@ -->
    -
    - -
    -
    -

    Data Jobs

    - + +
    +

    + Data Jobs help Data Engineers develop, deploy, run, and manage + data processing workloads +

    -

    Data Jobs help Data Engineers develop, deploy, run, and manage data processing workloads

    -
    -
    -
    -
    - -
    -
    - -
    -
    - +
    +
    +
    + +
    +
    + +
    +
    + +
    + +
    + + +
    +
    - -
    - - -
    -     -
    - +
    diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.scss index c081472067..4f21368ac0 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.scss @@ -3,276 +3,273 @@ * SPDX-License-Identifier: Apache-2.0 */ -@import '../variables.scss'; +@import "../variables.scss"; .widget { - position: relative; - height: 100%; - - .widget-section-container { - padding: 1.2rem; - height: 100%; - border-radius: .2rem; - border: none; - box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1), 0 3px 5px 0 rgba(0, 0, 0, 0.09); position: relative; - overflow: hidden; - ::ng-deep - .datagrid-table-wrapper { - max-width: 98.6% !important; + height: 100%; + + .widget-section-container { + padding: 1.2rem; + height: 100%; + border-radius: 0.2rem; + border: none; + box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1), + 0 3px 5px 0 rgba(0, 0, 0, 0.09); + position: relative; + overflow: hidden; + ::ng-deep .datagrid-table-wrapper { + max-width: 98.6% !important; + } } - } } -::ng-deep -.fade-to-dark.dark { - .widget-card { - --label-color-error: #F27963; - --label-color-success: #5EB715; - --header-background: #28404D; - --widget-border: 1px solid #28404D; - --widget-clickable-background: #324F62; - --widget-details-background: #21333B; - --widget-details-hover-background: #1B2A32; - --widget-details-color: #B3B3B3; - --widget-details-border: 2px solid #28404D; - --widget-icon-backgound-color: #194B70; - } +::ng-deep .fade-to-dark.dark { + .widget-card { + --label-color-error: #f27963; + --label-color-success: #5eb715; + --header-background: #28404d; + --widget-border: 1px solid #28404d; + --widget-clickable-background: #324f62; + --widget-details-background: #21333b; + --widget-details-hover-background: #1b2a32; + --widget-details-color: #b3b3b3; + --widget-details-border: 2px solid #28404d; + --widget-icon-backgound-color: #194b70; + } } .widget-card { - --label-color-error: #F35E44; - --label-color-success: #5AA220; - --header-background: #{$color-white}; - --widget-border: 1px solid #E3F5FC; - --widget-clickable-background: #E8E8E8; - --widget-details-background: #{$color-white}; - --widget-details-hover-background: #D8E3E9; - --widget-details-color: #8C8C8C; - --widget-details-border: 2px solid #E3F5FC; - --widget-icon-backgound-color: #0072A3; - - .label-error { - color: var(--label-color-error); - } - - .label-success { - color: var(--label-color-success); - } - - .widget-footer { - position: relative; - min-height: 25px; - margin: 1.3rem -1.2rem -1.2rem; - border-top: var(--widget-border); - - a { - margin: 0 0 0 0.5rem; - padding: 0px; + --label-color-error: #f35e44; + --label-color-success: #5aa220; + --header-background: #{$color-white}; + --widget-border: 1px solid #e3f5fc; + --widget-clickable-background: #e8e8e8; + --widget-details-background: #{$color-white}; + --widget-details-hover-background: #d8e3e9; + --widget-details-color: #8c8c8c; + --widget-details-border: 2px solid #e3f5fc; + --widget-icon-backgound-color: #0072a3; + + .label-error { + color: var(--label-color-error); } - } - - .widget-header { - background: var(--header-background); - margin: -1.2rem -1.2rem 0 -1.2rem; - padding: .8rem; - border-radius: .1rem .1rem 0 0; - position: relative; - - .widget-header-title-refresh-button { - display: flex; - align-items: center; - .header-title { - margin-top: 0; - font-weight: 200; - - clr-icon { - margin-top: -2px; - } - } - } - p { - margin-top: .4rem; - line-height: .8rem; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; + .label-success { + color: var(--label-color-success); } - } - - .widget-container { - z-index: 100; - - .widget-values { - line-height: 0.8rem; - display: grid; - grid-template: ". . ." 1fr / 1fr 1fr 1fr; - margin-left: -1.2rem; - margin-right: -1.2rem; - margin-bottom: -1.2rem; - row-gap: 1.2rem; - border-top: var(--widget-border); - - .widget-value { - display: block; - text-align: center; - background: var(--widget-details-background); - &:not(:first-child) { - border-left: var(--widget-border); - } + .widget-footer { + position: relative; + min-height: 25px; + margin: 1.3rem -1.2rem -1.2rem; + border-top: var(--widget-border); - &:not(:last-child) { - border-right: var(--widget-border); + a { + margin: 0 0 0 0.5rem; + padding: 0px; } + } - padding: .6rem; - - .widget-title { - margin-bottom: .2rem; - margin-top: .2rem; - font-size: 1.2rem; - font-weight: 500; - display: block; - } + .widget-header { + background: var(--header-background); + margin: -1.2rem -1.2rem 0 -1.2rem; + padding: 0.8rem; + border-radius: 0.1rem 0.1rem 0 0; + position: relative; - .widget-text { - font-size: .55rem; - display: block; - line-height: .6rem; - } + .widget-header-title-refresh-button { + display: flex; + align-items: center; - &.widget-clickable { - cursor: pointer; + .header-title { + margin-top: 0; + font-weight: 200; - &:hover { - background: var(--widget-clickable-background); - } + clr-icon { + margin-top: -2px; + } + } } - - &.show-details { - background: var(--widget-clickable-background); - - .widget-text { - font-weight: bold; - } - - position: relative; + p { + margin-top: 0.4rem; + line-height: 0.8rem; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; } - } - } - } - - .widget-details { - z-index: 1; - height: 0; - margin: 1.2rem -1.2rem -1.2rem -1.2rem; - transition: height .3s; - overflow: hidden; - background: var(--widget-details-background); - - &.show-details { - height: 240px; - border-top: var(--widget-details-border); } - .no-issues { - height: 100%; - width: 100%; - text-align: center; - margin-top: 1.2rem; - - .no-issues-img { - display: block; - height: 120px; - margin: 0 auto; - } - - .no-issues-text { - color: var(--widget-details-color); - } - } - - .data-details { - height: 240px; - position: relative; - - :host - ::ng-deep - clr-datagrid { - height: 100%; - - .datagrid { - margin-top: 0; - flex-basis: 0; - border: 0; - - .datagrid-row { - border-top: none; - border-bottom: none; - } - - .datagrid-placeholder-container { - border-top: none; - } - } - - .datagrid-footer { - padding: 0.1rem 0.5rem; - border-right: none; - border-left: none; - border-bottom: none; + .widget-container { + z-index: 100; + + .widget-values { + line-height: 0.8rem; + display: grid; + grid-template: ". . ." 1fr / 1fr 1fr 1fr; + margin-left: -1.2rem; + margin-right: -1.2rem; + margin-bottom: -1.2rem; + row-gap: 1.2rem; + border-top: var(--widget-border); + + .widget-value { + display: block; + text-align: center; + background: var(--widget-details-background); + + &:not(:first-child) { + border-left: var(--widget-border); + } + + &:not(:last-child) { + border-right: var(--widget-border); + } + + padding: 0.6rem; + + .widget-title { + margin-bottom: 0.2rem; + margin-top: 0.2rem; + font-size: 1.2rem; + font-weight: 500; + display: block; + } + + .widget-text { + font-size: 0.55rem; + display: block; + line-height: 0.6rem; + } + + &.widget-clickable { + cursor: pointer; + + &:hover { + background: var(--widget-clickable-background); + } + } + + &.show-details { + background: var(--widget-clickable-background); + + .widget-text { + font-weight: bold; + } + + position: relative; + } + } } - } + } - .data-row { - display: block; - margin-top: 0; - position: relative; - padding-left: .2rem; + .widget-details { + z-index: 1; + height: 0; + margin: 1.2rem -1.2rem -1.2rem -1.2rem; + transition: height 0.3s; + overflow: hidden; + background: var(--widget-details-background); - &.clickable { - cursor: pointer; + &.show-details { + height: 240px; + border-top: var(--widget-details-border); } - .data-title { - line-height: .6rem; - font-weight: 500; - display: block; - margin-top: 0; - position: relative; - - .btn { - margin: 0; - } + .no-issues { + height: 100%; + width: 100%; + text-align: center; + margin-top: 1.2rem; - .title-icon { - float: left; - width: 32px; - display: flex; - justify-content: center; + .no-issues-img { + display: block; + height: 120px; + margin: 0 auto; + } - lib-status-cell { - width: 15px; - display: flex; - justify-content: center; + .no-issues-text { + color: var(--widget-details-color); } - } } - .data-description { - display: block; - margin-top: 0; - color: var(--widget-details-color); - line-height: 1rem; + .data-details { + height: 240px; + position: relative; + + :host ::ng-deep clr-datagrid { + height: 100%; + + .datagrid { + margin-top: 0; + flex-basis: 0; + border: 0; + + .datagrid-row { + border-top: none; + border-bottom: none; + } + + .datagrid-placeholder-container { + border-top: none; + } + } + + .datagrid-footer { + padding: 0.1rem 0.5rem; + border-right: none; + border-left: none; + border-bottom: none; + } + } - clr-icon { - margin-top: -2px; - } + .data-row { + display: block; + margin-top: 0; + position: relative; + padding-left: 0.2rem; + + &.clickable { + cursor: pointer; + } + + .data-title { + line-height: 0.6rem; + font-weight: 500; + display: block; + margin-top: 0; + position: relative; + + .btn { + margin: 0; + } + + .title-icon { + float: left; + width: 32px; + display: flex; + justify-content: center; + + lib-status-cell { + width: 15px; + display: flex; + justify-content: center; + } + } + } + + .data-description { + display: block; + margin-top: 0; + color: var(--widget-details-color); + line-height: 1rem; + + clr-icon { + margin-top: -2px; + } + } + } } - } } - } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.ts index 527f7f8a2a..0727d81b75 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.ts @@ -19,7 +19,7 @@ import { OnTaurusModelInit, OnTaurusModelLoad, RouterService, - TaurusBaseComponent + TaurusBaseComponent, } from '@vdk/shared'; import { ErrorUtil } from '../../../shared/utils'; @@ -39,7 +39,7 @@ import { JOB_NAME_REQ_PARAM, JOBS_DATA_KEY, ORDER_REQ_PARAM, - TEAM_NAME_REQ_PARAM + TEAM_NAME_REQ_PARAM, } from '../../../model'; import { TASK_LOAD_JOB_EXECUTIONS } from '../../../state/tasks'; @@ -48,17 +48,22 @@ import { DataJobExecutionToGridDataJobExecution } from '../../data-job/pages/exe enum State { loading = 'loading', ready = 'ready', - empty = 'empty' + empty = 'empty', } @Component({ selector: 'lib-data-jobs-health-panel', templateUrl: './data-jobs-health-panel.component.html', - styleUrls: ['./data-jobs-health-panel.component.scss'] + styleUrls: ['./data-jobs-health-panel.component.scss'], }) -export class DataJobsHealthPanelComponent extends TaurusBaseComponent - implements OnTaurusModelInit, OnTaurusModelLoad, OnTaurusModelChange, OnTaurusModelError { - +export class DataJobsHealthPanelComponent + extends TaurusBaseComponent + implements + OnTaurusModelInit, + OnTaurusModelLoad, + OnTaurusModelChange, + OnTaurusModelError +{ @Input() manageLink: string; @Output() componentStateEvent = new EventEmitter(); @@ -79,7 +84,9 @@ export class DataJobsHealthPanelComponent extends TaurusBaseComponent private readonly routerService: RouterService, private readonly dataJobsService: DataJobsService, private readonly errorHandlerService: ErrorHandlerService, - @Inject(DATA_PIPELINES_CONFIGS) public readonly dataPipelinesModuleConfig: DataPipelinesConfig) { + @Inject(DATA_PIPELINES_CONFIGS) + public readonly dataPipelinesModuleConfig: DataPipelinesConfig + ) { super(componentService, navigationService, activatedRoute); } @@ -91,7 +98,7 @@ export class DataJobsHealthPanelComponent extends TaurusBaseComponent filters.push({ property: 'config.team', pattern: this.teamName, - sort: null + sort: null, }); } @@ -100,7 +107,10 @@ export class DataJobsHealthPanelComponent extends TaurusBaseComponent .withRequestParam(TEAM_NAME_REQ_PARAM, 'no-team-specified') .withRequestParam(JOB_NAME_REQ_PARAM, '') .withFilter(filters) - .withRequestParam(ORDER_REQ_PARAM, { property: 'startTime', direction: DESC }) + .withRequestParam(ORDER_REQ_PARAM, { + property: 'startTime', + direction: DESC, + }) .withPage(1, 1000) ); } @@ -113,15 +123,18 @@ export class DataJobsHealthPanelComponent extends TaurusBaseComponent this.model .withRequestParam(TEAM_NAME_REQ_PARAM, 'no-team-specified') .withRequestParam(JOB_NAME_REQ_PARAM, '') - .withRequestParam( - FILTER_REQ_PARAM, - { - statusIn: [DataJobExecutionStatus.USER_ERROR, DataJobExecutionStatus.PLATFORM_ERROR], - startTimeGte: d, - teamNameIn: this.teamName ? [this.teamName] : [] - } as DataJobExecutionFilter - ) - .withRequestParam(ORDER_REQ_PARAM, { property: 'startTime', direction: DESC } as DataJobExecutionOrder) + .withRequestParam(FILTER_REQ_PARAM, { + statusIn: [ + DataJobExecutionStatus.USER_ERROR, + DataJobExecutionStatus.PLATFORM_ERROR, + ], + startTimeGte: d, + teamNameIn: this.teamName ? [this.teamName] : [], + } as DataJobExecutionFilter) + .withRequestParam(ORDER_REQ_PARAM, { + property: 'startTime', + direction: DESC, + } as DataJobExecutionOrder) ); } @@ -145,15 +158,23 @@ export class DataJobsHealthPanelComponent extends TaurusBaseComponent */ onModelChange(model: ComponentModel, task: string): void { if (task === TASK_LOAD_JOB_EXECUTIONS) { - const executions: DataJobExecutions = model.getComponentState().data.get(JOB_EXECUTIONS_DATA_KEY); + const executions: DataJobExecutions = model + .getComponentState() + .data.get(JOB_EXECUTIONS_DATA_KEY); if (executions) { - const remappedExecutions = DataJobExecutionToGridDataJobExecution.convertToDataJobExecution([...executions]); - this.jobExecutions = remappedExecutions.filter((ex) => ex.status !== DataJobExecutionStatus.SUCCEEDED); + const remappedExecutions = + DataJobExecutionToGridDataJobExecution.convertToDataJobExecution( + [...executions] + ); + this.jobExecutions = remappedExecutions.filter( + (ex) => ex.status !== DataJobExecutionStatus.SUCCEEDED + ); this.loadingExecutions = false; } } else { const componentState = model.getComponentState(); - const dataJobsData: DataJobPage = componentState.data.get(JOBS_DATA_KEY); + const dataJobsData: DataJobPage = + componentState.data.get(JOBS_DATA_KEY); this.dataJobs = CollectionsUtil.isArray(dataJobsData?.content) ? [...dataJobsData?.content] @@ -174,9 +195,7 @@ export class DataJobsHealthPanelComponent extends TaurusBaseComponent this.loadingJobs = false; } - const error = ErrorUtil.extractError( - model.getComponentState().error - ); + const error = ErrorUtil.extractError(model.getComponentState().error); this.errorHandlerService.processError(error); } @@ -184,7 +203,10 @@ export class DataJobsHealthPanelComponent extends TaurusBaseComponent private emitNewState() { if (this.loadingJobs || this.loadingExecutions) { this.componentStateEvent.emit(State.loading); - } else if (this.jobExecutions.length === 0 && this.dataJobs.length === 0) { + } else if ( + this.jobExecutions.length === 0 && + this.dataJobs.length === 0 + ) { this.componentStateEvent.emit(State.empty); } else { this.componentStateEvent.emit(State.ready); @@ -192,10 +214,13 @@ export class DataJobsHealthPanelComponent extends TaurusBaseComponent } private _subscribeForTeamChange(): void { - if (this.dataPipelinesModuleConfig.manageConfig?.selectedTeamNameObservable) { + if ( + this.dataPipelinesModuleConfig.manageConfig + ?.selectedTeamNameObservable + ) { this.subscriptions.push( - this.dataPipelinesModuleConfig.manageConfig?.selectedTeamNameObservable - .subscribe({ + this.dataPipelinesModuleConfig.manageConfig?.selectedTeamNameObservable.subscribe( + { next: (newTeamName: string) => { if (newTeamName !== this.teamName) { if (newTeamName && newTeamName !== '') { @@ -209,8 +234,9 @@ export class DataJobsHealthPanelComponent extends TaurusBaseComponent this.jobExecutions = []; this.dataJobs = []; console.error('Error loading selected team', error); - } - }) + }, + } + ) ); } else { this.fetchDataJobExecutions(); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.html index ee62e1fa99..865a8a668f 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.html @@ -5,65 +5,104 @@
    -

    Data Jobs

    -

    Data Jobs help Data Engineers develop, deploy, run, and manage data processing workloads

    +

    + Data Jobs help Data Engineers develop, deploy, run, and manage + data processing workloads +

    -
    +
    - - - + + + Data Jobs
    -
    - - - +
    + + + Job Executions last 24 hours
    -
    - - - +
    + + + Failures last 24 hours
    -
    +
    - +
    - +
    - -
    -
    +
    +
    - + Manage
    @@ -71,21 +110,31 @@

    Data Jobs

    -
    +
    - {{item.jobName}} - {{ item.startTime | date: 'MMM d, y, hh:mm a' }} - , took 12min, {{item.status}} + {{ item.jobName }} + {{ item.startTime | date: "MMM d, y, hh:mm a" }} , + took 12min, {{ item.status }}
    Coming Soon! - +     @@ -93,22 +142,32 @@

    Data Jobs

    -
    +
    - {{item.jobName}} - {{ item.startTime | date: 'MMM d, y, hh:mm a' }} - , took 12min, {{item.status}} + {{ item.jobName }} + {{ item.startTime | date: "MMM d, y, hh:mm a" }} , + took 12min, {{ item.status }}
    Coming Soon! - +     @@ -116,25 +175,45 @@

    Data Jobs

    -
    +
    - Job + Job Schedule (in UTC) -
    - {{item.jobName}} +
    + {{ item.jobName }}
    - {{item.config?.schedule?.scheduleCron | formatSchedule: 'Not scheduled'}} + + {{ + item.config?.schedule?.scheduleCron + | formatSchedule: "Not scheduled" + }} - We couldn't find any data jobs, but you can always create one! + We couldn't find any data jobs, but you can always create + one! - + diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.scss index 89aa8fbb4b..9ffddaf8e7 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.scss @@ -3,263 +3,261 @@ * SPDX-License-Identifier: Apache-2.0 */ -@import 'variables.scss'; - -::ng-deep -.fade-to-dark.dark { - .widget-card { - --label-color-error: #F27963; - --label-color-success: #5EB715; - --header-background: #28404D; - --widget-border: 1px solid #28404D; - --widget-clickable-background: #324F62; - --widget-details-background: #21333B; - --widget-details-hover-background: #1B2A32; - --widget-details-color: #B3B3B3; - --widget-details-border: 2px solid #28404D; - --widget-icon-backgound-color: #194B70; - } +@import "variables.scss"; + +::ng-deep .fade-to-dark.dark { + .widget-card { + --label-color-error: #f27963; + --label-color-success: #5eb715; + --header-background: #28404d; + --widget-border: 1px solid #28404d; + --widget-clickable-background: #324f62; + --widget-details-background: #21333b; + --widget-details-hover-background: #1b2a32; + --widget-details-color: #b3b3b3; + --widget-details-border: 2px solid #28404d; + --widget-icon-backgound-color: #194b70; + } } .widget-card { - --label-color-error: #F35E44; - --label-color-success: #5AA220; - --header-background: #{$color-white}; - --widget-border: 1px solid #E3F5FC; - --widget-clickable-background: #E8E8E8; - --widget-details-background: #{$color-white}; - --widget-details-hover-background: #D8E3E9; - --widget-details-color: #8C8C8C; - --widget-details-border: 2px solid #E3F5FC; - --widget-icon-backgound-color: #0072A3; - - .label-error { - color: var(--label-color-error); - } - - .label-success { - color: var(--label-color-success); - } - - .widget-footer { - position: relative; - min-height: 25px; - margin: 1.3rem -1.2rem -1.2rem; - border-top: var(--widget-border); - - a { - margin: 0 0 0 0.5rem; - padding: 0px; - } - } - - .widget-header { - background: var(--header-background); - margin: -1.2rem -1.2rem 0 -1.2rem; - padding: .8rem; - border-radius: .1rem .1rem 0 0; - position: relative; - min-height: 96px; - - .header-title { - margin-top: 0; - font-weight: 200; - - clr-icon { - margin-top: -2px; - } - } - - p { - margin-top: .3rem; - line-height: .8rem; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; + --label-color-error: #f35e44; + --label-color-success: #5aa220; + --header-background: #{$color-white}; + --widget-border: 1px solid #e3f5fc; + --widget-clickable-background: #e8e8e8; + --widget-details-background: #{$color-white}; + --widget-details-hover-background: #d8e3e9; + --widget-details-color: #8c8c8c; + --widget-details-border: 2px solid #e3f5fc; + --widget-icon-backgound-color: #0072a3; + + .label-error { + color: var(--label-color-error); } - .header-link { - position: absolute; - top: .4rem; - right: .3rem; - - clr-icon { - margin-top: -.1rem; - } + .label-success { + color: var(--label-color-success); } - } - - .widget-container { - z-index: 100; - - .widget-values { - line-height: 0.8rem; - display: grid; - grid-template: ". . ." 1fr / 1fr 1fr 1fr; - margin-left: -1.2rem; - margin-right: -1.2rem; - margin-bottom: -1.2rem; - row-gap: 1.2rem; - border-top: var(--widget-border); - - .widget-value { - display: block; - text-align: center; - background: var(--widget-details-background); - &:not(:first-child) { - border-left: var(--widget-border); - } + .widget-footer { + position: relative; + min-height: 25px; + margin: 1.3rem -1.2rem -1.2rem; + border-top: var(--widget-border); - &:not(:last-child) { - border-right: var(--widget-border); + a { + margin: 0 0 0 0.5rem; + padding: 0px; } + } - padding: .6rem; + .widget-header { + background: var(--header-background); + margin: -1.2rem -1.2rem 0 -1.2rem; + padding: 0.8rem; + border-radius: 0.1rem 0.1rem 0 0; + position: relative; + min-height: 96px; - .widget-title { - margin-bottom: .2rem; - margin-top: .2rem; - font-size: 1.2rem; - font-weight: 500; - display: block; - } + .header-title { + margin-top: 0; + font-weight: 200; - .widget-text { - font-size: .55rem; - display: block; - line-height: .6rem; + clr-icon { + margin-top: -2px; + } } - &.widget-clickable { - cursor: pointer; - - &:hover { - background: var(--widget-clickable-background); - } + p { + margin-top: 0.3rem; + line-height: 0.8rem; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; } - &.show-details { - background: var(--widget-clickable-background); - - .widget-text { - font-weight: bold; - } + .header-link { + position: absolute; + top: 0.4rem; + right: 0.3rem; - position: relative; + clr-icon { + margin-top: -0.1rem; + } } - } - } - } - - .widget-details { - z-index: 1; - height: 0; - margin: 1.2rem -1.2rem -1.2rem -1.2rem; - transition: height .3s; - overflow: hidden; - background: var(--widget-details-background); - - &.show-details { - height: 240px; - border-top: var(--widget-details-border); } - .no-issues { - height: 100%; - width: 100%; - text-align: center; - margin-top: 1.2rem; - - .no-issues-img { - display: block; - height: 120px; - margin: 0 auto; - } - - .no-issues-text { - color: var(--widget-details-color); - } + .widget-container { + z-index: 100; + + .widget-values { + line-height: 0.8rem; + display: grid; + grid-template: ". . ." 1fr / 1fr 1fr 1fr; + margin-left: -1.2rem; + margin-right: -1.2rem; + margin-bottom: -1.2rem; + row-gap: 1.2rem; + border-top: var(--widget-border); + + .widget-value { + display: block; + text-align: center; + background: var(--widget-details-background); + + &:not(:first-child) { + border-left: var(--widget-border); + } + + &:not(:last-child) { + border-right: var(--widget-border); + } + + padding: 0.6rem; + + .widget-title { + margin-bottom: 0.2rem; + margin-top: 0.2rem; + font-size: 1.2rem; + font-weight: 500; + display: block; + } + + .widget-text { + font-size: 0.55rem; + display: block; + line-height: 0.6rem; + } + + &.widget-clickable { + cursor: pointer; + + &:hover { + background: var(--widget-clickable-background); + } + } + + &.show-details { + background: var(--widget-clickable-background); + + .widget-text { + font-weight: bold; + } + + position: relative; + } + } + } } - .data-details { - height: 240px; - position: relative; - - ::ng-deep - clr-datagrid { - height: 100%; - - .datagrid { - margin-top: 0; - flex-basis: 0; - border: 0; - - .datagrid-row { - border-top: none; - border-bottom: none; - } - - .datagrid-placeholder-container { - border-top: none; - } - } + .widget-details { + z-index: 1; + height: 0; + margin: 1.2rem -1.2rem -1.2rem -1.2rem; + transition: height 0.3s; + overflow: hidden; + background: var(--widget-details-background); - .datagrid-footer { - padding: 0.1rem 0.5rem; - border-right: none; - border-left: none; - border-bottom: none; + &.show-details { + height: 240px; + border-top: var(--widget-details-border); } - } - .data-row { - display: block; - margin-top: 0; - position: relative; - padding-left: .2rem; + .no-issues { + height: 100%; + width: 100%; + text-align: center; + margin-top: 1.2rem; - &.clickable { - cursor: pointer; - } + .no-issues-img { + display: block; + height: 120px; + margin: 0 auto; + } - .data-title { - line-height: .6rem; - font-weight: 500; - display: block; - margin-top: 0; - position: relative; - - .btn { - margin: 0; - } - - .title-icon { - float: left; - width: 32px; - display: flex; - justify-content: center; - - lib-status-cell { - width: 15px; - display: flex; - justify-content: center; + .no-issues-text { + color: var(--widget-details-color); } - } } - .data-description { - display: block; - margin-top: 0; - color: var(--widget-details-color); - line-height: 1rem; + .data-details { + height: 240px; + position: relative; + + ::ng-deep clr-datagrid { + height: 100%; + + .datagrid { + margin-top: 0; + flex-basis: 0; + border: 0; + + .datagrid-row { + border-top: none; + border-bottom: none; + } + + .datagrid-placeholder-container { + border-top: none; + } + } + + .datagrid-footer { + padding: 0.1rem 0.5rem; + border-right: none; + border-left: none; + border-bottom: none; + } + } - clr-icon { - margin-top: -2px; - } + .data-row { + display: block; + margin-top: 0; + position: relative; + padding-left: 0.2rem; + + &.clickable { + cursor: pointer; + } + + .data-title { + line-height: 0.6rem; + font-weight: 500; + display: block; + margin-top: 0; + position: relative; + + .btn { + margin: 0; + } + + .title-icon { + float: left; + width: 32px; + display: flex; + justify-content: center; + + lib-status-cell { + width: 15px; + display: flex; + justify-content: center; + } + } + } + + .data-description { + display: block; + margin-top: 0; + color: var(--widget-details-color); + line-height: 1rem; + + clr-icon { + margin-top: -2px; + } + } + } } - } } - } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.spec.ts index 84d854e2db..da518ed9c9 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.spec.ts @@ -12,7 +12,10 @@ import { FormatSchedulePipe } from '../../shared/pipes'; import { DataJobsApiService } from '../../services'; -import { DataJobsWidgetOneComponent, WidgetTab } from './data-jobs-widget-one.component'; +import { + DataJobsWidgetOneComponent, + WidgetTab, +} from './data-jobs-widget-one.component'; describe('DataJobsWidgetOneComponent', () => { let errorHandlerServiceStub: jasmine.SpyObj; @@ -23,30 +26,44 @@ describe('DataJobsWidgetOneComponent', () => { beforeEach(async () => { // mock service const dataJobsServiceStub = () => ({ - getJobs: () => of({ - data: { - totalItems: 1, totalPages: 11, content: [ - { - jobName: 'test-job', - item: { config: { schedule: { scheduleCron: '*/5 * * * *' } } } - } - ] - } - }) + getJobs: () => + of({ + data: { + totalItems: 1, + totalPages: 11, + content: [ + { + jobName: 'test-job', + item: { + config: { + schedule: { + scheduleCron: '*/5 * * * *', + }, + }, + }, + }, + ], + }, + }), }); - errorHandlerServiceStub = jasmine.createSpyObj('errorHandlerService', [ - 'processError', - 'handleError' - ]); + errorHandlerServiceStub = jasmine.createSpyObj( + 'errorHandlerService', + ['processError', 'handleError'] + ); await TestBed.configureTestingModule({ declarations: [DataJobsWidgetOneComponent, FormatSchedulePipe], providers: [ - { provide: DataJobsApiService, useFactory: dataJobsServiceStub }, - { provide: ErrorHandlerService, useValue: errorHandlerServiceStub } - ] - }) - .compileComponents(); + { + provide: DataJobsApiService, + useFactory: dataJobsServiceStub, + }, + { + provide: ErrorHandlerService, + useValue: errorHandlerServiceStub, + }, + ], + }).compileComponents(); }); beforeEach(() => { @@ -61,9 +78,8 @@ describe('DataJobsWidgetOneComponent', () => { describe('ngOnInit', () => { it('make expected calls', () => { - const dataJobsServiceStub: DataJobsApiService = fixture.debugElement.injector.get( - DataJobsApiService - ); + const dataJobsServiceStub: DataJobsApiService = + fixture.debugElement.injector.get(DataJobsApiService); spyOn(dataJobsServiceStub, 'getJobs').and.callThrough(); component.ngOnInit(); expect(dataJobsServiceStub.getJobs).toHaveBeenCalled(); @@ -89,10 +105,11 @@ describe('DataJobsWidgetOneComponent', () => { describe('handle errors', () => { it('should catch error when API fails', () => { expect(component.errorJobs).toEqual(false); - const dataJobsServiceStub: DataJobsApiService = fixture.debugElement.injector.get( - DataJobsApiService + const dataJobsServiceStub: DataJobsApiService = + fixture.debugElement.injector.get(DataJobsApiService); + spyOn(dataJobsServiceStub, 'getJobs').and.returnValue( + throwError(() => true) ); - spyOn(dataJobsServiceStub, 'getJobs').and.returnValue(throwError(() => true)); component.refresh(1, WidgetTab.DATAJOBS); component.jobs$.subscribe(); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.ts index dc5dbd4d75..44f6aacb46 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.ts @@ -24,7 +24,7 @@ export enum WidgetTab { /* eslint-disable-next-line @typescript-eslint/naming-convention */ FAILURES, /* eslint-disable-next-line @typescript-eslint/naming-convention */ - NONE + NONE, } // TODO: Remove when consume data from API @@ -34,70 +34,70 @@ const executionsMock = [ status: DataJobExecutionStatus.FINISHED, startTime: Date.now(), endTime: Date.now(), - startedBy: 'auserov' + startedBy: 'auserov', }, { jobName: 'data-job-2', status: DataJobExecutionStatus.FAILED, startTime: Date.now(), endTime: Date.now(), - startedBy: 'buserov' + startedBy: 'buserov', }, { jobName: 'data-job-3', status: DataJobExecutionStatus.FINISHED, startTime: Date.now(), endTime: Date.now(), - startedBy: 'cuserov' + startedBy: 'cuserov', }, { jobName: 'data-job-long-name-test-1', status: DataJobExecutionStatus.FINISHED, startTime: Date.now(), endTime: Date.now(), - startedBy: 'duserov' + startedBy: 'duserov', }, { jobName: 'data-job-long-name-test-2', status: DataJobExecutionStatus.FAILED, startTime: Date.now(), endTime: Date.now(), - startedBy: 'euserov' + startedBy: 'euserov', }, { jobName: 'data-job-long-name-test-3', status: DataJobExecutionStatus.SUBMITTED, startTime: Date.now(), endTime: Date.now(), - startedBy: 'fuserov' + startedBy: 'fuserov', }, { jobName: 'data-job-long-name-test-4', status: DataJobExecutionStatus.PLATFORM_ERROR, startTime: Date.now(), endTime: Date.now(), - startedBy: 'guserov' + startedBy: 'guserov', }, { jobName: 'data-job-long-name-test-5', status: DataJobExecutionStatus.USER_ERROR, startTime: Date.now(), endTime: Date.now(), - startedBy: 'huserov' + startedBy: 'huserov', }, { jobName: 'data-job-a-very-long-name-listed-here-test-1', status: DataJobExecutionStatus.FINISHED, startTime: Date.now(), endTime: Date.now(), - startedBy: 'fuserov' - } + startedBy: 'fuserov', + }, ]; @Component({ selector: 'lib-data-jobs-widget-one', templateUrl: './data-jobs-widget-one.component.html', - styleUrls: ['./data-jobs-widget-one.component.scss', './widget.scss'] + styleUrls: ['./data-jobs-widget-one.component.scss', './widget.scss'], }) export class DataJobsWidgetOneComponent implements OnInit { @Input() manageLink: string; @@ -114,9 +114,10 @@ export class DataJobsWidgetOneComponent implements OnInit { errorJobs: boolean; - constructor(private readonly dataJobsService: DataJobsApiService, - private readonly errorHandlerService: ErrorHandlerService) { - } + constructor( + private readonly dataJobsService: DataJobsApiService, + private readonly errorHandlerService: ErrorHandlerService + ) {} @HostListener('window:resize') onWindowResize() { @@ -147,31 +148,47 @@ export class DataJobsWidgetOneComponent implements OnInit { switch (tab) { case WidgetTab.DATAJOBS: this.errorJobs = false; - this.jobs$ = this.dataJobsService.getJobs([], '', this.currentPage, this.pageSize).pipe( - map(result => result?.data), - catchError((error: unknown) => { - this.errorJobs = !!error; - - this.errorHandlerService.processError( - ErrorUtil.extractError(error as Error) - ); - - return throwError(() => error); - }) - ); + this.jobs$ = this.dataJobsService + .getJobs([], '', this.currentPage, this.pageSize) + .pipe( + map((result) => result?.data), + catchError((error: unknown) => { + this.errorJobs = !!error; + + this.errorHandlerService.processError( + ErrorUtil.extractError(error as Error) + ); + + return throwError(() => error); + }) + ); break; case WidgetTab.EXECUTIONS: // TODO: Consume data from API - this.executions$ = of({ data: { totalItems: 0, totalPages: executionsMock.length / this.pageSize, content: [] } }).pipe( - map(result => result?.data), + this.executions$ = of({ + data: { + totalItems: 0, + totalPages: executionsMock.length / this.pageSize, + content: [], + }, + }).pipe( + map((result) => result?.data), delay(1200) // TODO: Remove delay when consume data from API ); break; case WidgetTab.FAILURES: // TODO: Consume data from API - const failuresMock = executionsMock.filter(e => e.status === DataJobExecutionStatus.FAILED); - this.failures$ = of({ data: { totalItems: 0, totalPages: failuresMock.length / this.pageSize, content: [] } }).pipe( - map(result => result?.data), + const failuresMock = executionsMock.filter( + (e) => e.status === DataJobExecutionStatus.FAILED + ); + this.failures$ = of({ + data: { + totalItems: 0, + totalPages: failuresMock.length / this.pageSize, + content: [], + }, + }).pipe( + map((result) => result?.data), delay(1800) // TODO: Remove delay when consume data from API ); break; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/variables.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/variables.scss index 200f08593f..89ce854a8f 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/variables.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/variables.scss @@ -4,9 +4,9 @@ */ // light -$color-white: #FFFFFF; -$background-primary-color: #0072A3; +$color-white: #ffffff; +$background-primary-color: #0072a3; $widget-color: #666666; // dark -$background-primary-color-dark: #004B6B; +$background-primary-color-dark: #004b6b; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.html index e57ce9314c..bcc4d60388 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.html @@ -14,20 +14,32 @@

    - Success rate is calculated from all executions from the last 14 days (up to 336 for each job) + Success rate is calculated from all executions + from the last 14 days (up to 336 for each job)

    -
    {{successRate | percent}}
    -
    {{failedExecutions}} failed +
    + {{ successRate | percent }}
    -
    {{totalExecutions}} total + +
    + {{ failedExecutions }} failed +
    +
    + {{ totalExecutions }} total
    @@ -35,12 +47,15 @@ + [startAngle]="-135" + >
    diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.scss index ba74d848f7..36b1953ce9 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.scss @@ -25,34 +25,34 @@ $xxl-min-width: 1919px; $min-el-size: 310px; .medium-and-up { - @media screen and (max-width: $medium-width2) { - display: none !important; - } + @media screen and (max-width: $medium-width2) { + display: none !important; + } } .small-and-up { - @media screen and (max-width: $xs-max) { - display: none !important; - } + @media screen and (max-width: $xs-max) { + display: none !important; + } } .medium-and-down { - @media screen and (min-width: $medium-width) { - display: none !important; - } + @media screen and (min-width: $medium-width) { + display: none !important; + } } .small-and-down { - @media screen and (min-width: $small-width) { - display: none !important; - } + @media screen and (min-width: $small-width) { + display: none !important; + } } $gray1: #747474; $gray2: #eee; $gray3: #ddd; $gray4: #ccc; -$gray5: #8C8C8C; +$gray5: #8c8c8c; $black: #000; $black1: #313131; $error-red: #e62700; @@ -61,17 +61,17 @@ $dark-text: #adbbc4; $red2: #c92100; $ready-green: #318700; $darkblue: rgb(0, 106, 144); -$lighterBlue: #89CBDF; -$lightblue: #49AFD9; -$darkButtonHoverBlue: #0095D3; +$lighterBlue: #89cbdf; +$lightblue: #49afd9; +$darkButtonHoverBlue: #0095d3; $blue3: #49afd9; $blue4: #57c7ea; $blue5: #0079b8; -$inactiveGray: #95A4B2; -$bgcolor: #25333D; +$inactiveGray: #95a4b2; +$bgcolor: #25333d; $bgcolorDark: #0f171c; $bgcolorTextareaDark: #17242b; -$white: #FFF; +$white: #fff; $focused-control-border: #6bc1e3; $dark-theme-text: #acbac3; $label-danger-color: #a32100; @@ -81,7 +81,6 @@ $clr-primary-color: #0072a3; $clr-primary-color-dark: #4aaed9; $clr-input-border-grey: #b3b3b3; - $chart-margin: 20px; $xl-width: 256px; $lg-width: 230px; @@ -92,504 +91,515 @@ $xs-width: 130px; $red: rgb(194, 84, 0); ::ng-deep .dark lib-widget-execution-status-gauge { - .gauge-container { - margin-top: 50px; - .gauge-meta .value-percent { - //color: $lightblue !important; - } + .gauge-container { + margin-top: 50px; + .gauge-meta .value-percent { + //color: $lightblue !important; + } - svg.ngx-charts g[ngx-charts-pie-arc]:not(.background-arc) > g.arc-group > path.arc { - //fill: $lightblue !important; - } + svg.ngx-charts + g[ngx-charts-pie-arc]:not(.background-arc) + > g.arc-group + > path.arc { + //fill: $lightblue !important; + } - svg.ngx-charts g[ngx-charts-pie-arc].background-arc > g.arc-group > path.arc { - fill: rgba(0, 0, 0, 0.25); + svg.ngx-charts + g[ngx-charts-pie-arc].background-arc + > g.arc-group + > path.arc { + fill: rgba(0, 0, 0, 0.25); + } } - } } ::ng-deep .dark vmw-gauge { - .gauge-container.above-threshold { - .gauge-meta .value-percent { - color: $red !important; - } + .gauge-container.above-threshold { + .gauge-meta .value-percent { + color: $red !important; + } - svg.ngx-charts g[ngx-charts-pie-arc]:not(.background-arc) > g.arc-group > path.arc { - fill: $red !important; - } + svg.ngx-charts + g[ngx-charts-pie-arc]:not(.background-arc) + > g.arc-group + > path.arc { + fill: $red !important; + } - svg.ngx-charts g[ngx-charts-pie-arc].background-arc > g.arc-group > path.arc { - fill: rgba(0, 0, 0, 0.25); + svg.ngx-charts + g[ngx-charts-pie-arc].background-arc + > g.arc-group + > path.arc { + fill: rgba(0, 0, 0, 0.25); + } } - } - } ::ng-deep lib-widget-execution-status-gauge { - svg.ngx-charts { - margin: -$chart-margin; + svg.ngx-charts { + margin: -$chart-margin; - g text { - display: none; - } + g text { + display: none; + } - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.10); - opacity: 0.3; + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.1); + opacity: 0.3; - g.background-arc { - display:none; + g.background-arc { + display: none; + } + } } - } } - } - .above-threshold svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.05); - } + .above-threshold svg.ngx-charts { + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.05); + } + } } - } } .gauge-container { - padding: 0; - height: $xl-width - 2 * $chart-margin; - width: $xl-width - 2 * $chart-margin; - position: relative; - margin-top: 50px; - margin-left: auto; - margin-right: auto; - .gauge-chart-container { - width: inherit; - height: inherit; - overflow: hidden; - } - - .gauge-chart { - height: $xl-width; - width: $xl-width; - margin: 0 auto; - } - - &.above-threshold { - .gauge-meta .value-percent { - color: $red; - } - } - - .gauge-meta { - text-align: center; - position: absolute; - width: inherit; - z-index: 1; - - // integrators can use whatever tag they like for the title, e.g. - // h4 if they want screen readers to notice the gauge as a title, - // or span if they do not. - ::ng-deep .gauge-title { - display: block; - font-size: 19px; - margin-top: 40px; - } - - .value-percent { - color: $darkblue; - margin-top: 15px; - margin-bottom: 23px; - font-size: 42.5px; + padding: 0; + height: $xl-width - 2 * $chart-margin; + width: $xl-width - 2 * $chart-margin; + position: relative; + margin-top: 50px; + margin-left: auto; + margin-right: auto; + .gauge-chart-container { + width: inherit; + height: inherit; + overflow: hidden; } - .value-current { - font-size: 16px; + .gauge-chart { + height: $xl-width; + width: $xl-width; + margin: 0 auto; } - .value-limit { - font-size: 14px; - color: #9a9a9a; - margin-top: 0px; + &.above-threshold { + .gauge-meta .value-percent { + color: $red; + } } - } -} - -.large { - &.gauge-container { - height: $lg-width - 2 * $chart-margin + 10px; - width: $lg-width - 2 * $chart-margin; - } - .gauge-chart { - height: $lg-width; - width: $lg-width; - } + .gauge-meta { + text-align: center; + position: absolute; + width: inherit; + z-index: 1; + + // integrators can use whatever tag they like for the title, e.g. + // h4 if they want screen readers to notice the gauge as a title, + // or span if they do not. + ::ng-deep .gauge-title { + display: block; + font-size: 19px; + margin-top: 40px; + } - .gauge-meta { - .value-limit { - margin-top: 0; - } - } + .value-percent { + color: $darkblue; + margin-top: 15px; + margin-bottom: 23px; + font-size: 42.5px; + } - ::ng-deep &.above-threshold svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.07) !important; - } - } - } + .value-current { + font-size: 16px; + } - ::ng-deep svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.12); - } + .value-limit { + font-size: 14px; + color: #9a9a9a; + margin-top: 0px; + } } - } } -@media (min-width: $large-min) and (max-width: $large-width) { - .auto { +.large { &.gauge-container { - height: $lg-width - 2 * $chart-margin + 10px; - width: $lg-width - 2 * $chart-margin; + height: $lg-width - 2 * $chart-margin + 10px; + width: $lg-width - 2 * $chart-margin; } .gauge-chart { - height: $lg-width; - width: $lg-width; + height: $lg-width; + width: $lg-width; } .gauge-meta { - .value-limit { - margin-top: 0; - } + .value-limit { + margin-top: 0; + } } ::ng-deep &.above-threshold svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.07) !important; + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.07) !important; + } } - } } ::ng-deep svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.12); + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.12); + } } - } } - } } -.medium { - &.gauge-container { - height: $med-width - 2 * $chart-margin + 10px; - width: $med-width - 2 * $chart-margin; - } - - .gauge-chart { - height: $med-width; - width: $med-width; - } - - .gauge-meta { - ::ng-deep .gauge-title { - font-size: 20px; - margin-top: 28px; - } - - .value-percent { - margin: 10px 0; - font-size: 26px; - } +@media (min-width: $large-min) and (max-width: $large-width) { + .auto { + &.gauge-container { + height: $lg-width - 2 * $chart-margin + 10px; + width: $lg-width - 2 * $chart-margin; + } - .value-current { - font-size: 16px; - } + .gauge-chart { + height: $lg-width; + width: $lg-width; + } - .value-limit { - font-size: 13px; - margin-top: 0; - } - } + .gauge-meta { + .value-limit { + margin-top: 0; + } + } - ::ng-deep &.above-threshold svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.09) !important; - } - } - } + ::ng-deep &.above-threshold svg.ngx-charts { + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.07) !important; + } + } + } - ::ng-deep svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.16); - } + ::ng-deep svg.ngx-charts { + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.12); + } + } + } } - } } -@media (min-width: $medium-min) and (max-width: $medium-width) { - .auto { +.medium { &.gauge-container { - height: $med-width - 2 * $chart-margin + 10px; - width: $med-width - 2 * $chart-margin; + height: $med-width - 2 * $chart-margin + 10px; + width: $med-width - 2 * $chart-margin; } .gauge-chart { - height: $med-width; - width: $med-width; + height: $med-width; + width: $med-width; } .gauge-meta { - ::ng-deep .gauge-title { - font-size: 20px; - margin-top: 28px; - } + ::ng-deep .gauge-title { + font-size: 20px; + margin-top: 28px; + } - .value-percent { - margin: 10px 0; - font-size: 26px; - } + .value-percent { + margin: 10px 0; + font-size: 26px; + } - .value-current { - font-size: 16px; - } + .value-current { + font-size: 16px; + } - .value-limit { - font-size: 13px; - margin-top: 0; - } + .value-limit { + font-size: 13px; + margin-top: 0; + } } ::ng-deep &.above-threshold svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.09) !important; + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.09) !important; + } } - } } ::ng-deep svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.16); + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.16); + } } - } } - } } -.small { - &.gauge-container { - height: $sm-width - 2 * $chart-margin + 10px; - width: $sm-width - 2 * $chart-margin; - } - - .gauge-chart { - height: $sm-width; - width: $sm-width; - } - - .gauge-meta { - ::ng-deep .gauge-title { - font-size: 17px; - margin-top: 26px; - } - - .value-percent { - margin: 0; - font-size: 18.5px; - } +@media (min-width: $medium-min) and (max-width: $medium-width) { + .auto { + &.gauge-container { + height: $med-width - 2 * $chart-margin + 10px; + width: $med-width - 2 * $chart-margin; + } - .value-current { - font-size: 14px; - } + .gauge-chart { + height: $med-width; + width: $med-width; + } - .value-limit { - font-size: 10px; - margin-top: 0; - } - } + .gauge-meta { + ::ng-deep .gauge-title { + font-size: 20px; + margin-top: 28px; + } + + .value-percent { + margin: 10px 0; + font-size: 26px; + } + + .value-current { + font-size: 16px; + } + + .value-limit { + font-size: 13px; + margin-top: 0; + } + } - ::ng-deep &.above-threshold svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.10) !important; - } - } - } + ::ng-deep &.above-threshold svg.ngx-charts { + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.09) !important; + } + } + } - ::ng-deep svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.20); - } + ::ng-deep svg.ngx-charts { + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.16); + } + } + } } - } } -@media (min-width: $small-min) and (max-width: $small-max) { - .auto { +.small { &.gauge-container { - height: $sm-width - 2 * $chart-margin + 10px; - width: $sm-width - 2 * $chart-margin; + height: $sm-width - 2 * $chart-margin + 10px; + width: $sm-width - 2 * $chart-margin; } .gauge-chart { - height: $sm-width; - width: $sm-width; + height: $sm-width; + width: $sm-width; } .gauge-meta { - ::ng-deep .gauge-title { - font-size: 17px; - margin-top: 26px; - } + ::ng-deep .gauge-title { + font-size: 17px; + margin-top: 26px; + } - .value-percent { - margin: 0; - font-size: 18.5px; - } + .value-percent { + margin: 0; + font-size: 18.5px; + } - .value-current { - font-size: 14px; - } + .value-current { + font-size: 14px; + } - .value-limit { - font-size: 10px; - margin-top: 0; - } + .value-limit { + font-size: 10px; + margin-top: 0; + } } ::ng-deep &.above-threshold svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.10) !important; + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.1) !important; + } } - } } ::ng-deep svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.20); + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.2); + } } - } } - } } -.xs { - &.gauge-container { - height: $xs-width - 2 * $chart-margin + 10px; - width: $xs-width - 2 * $chart-margin; - } - - .gauge-chart { - height: $xs-width; - width: $xs-width; - } - - .gauge-meta { - .value-current, - .value-limit { - display: none; - } +@media (min-width: $small-min) and (max-width: $small-max) { + .auto { + &.gauge-container { + height: $sm-width - 2 * $chart-margin + 10px; + width: $sm-width - 2 * $chart-margin; + } - ::ng-deep .gauge-title { - width: inherit; - font-size: 14px; - margin-top: 14px; - } + .gauge-chart { + height: $sm-width; + width: $sm-width; + } - .value-percent { - margin-top: 0px; - font-size: 18.5px; - } - } + .gauge-meta { + ::ng-deep .gauge-title { + font-size: 17px; + margin-top: 26px; + } + + .value-percent { + margin: 0; + font-size: 18.5px; + } + + .value-current { + font-size: 14px; + } + + .value-limit { + font-size: 10px; + margin-top: 0; + } + } - ::ng-deep &.above-threshold svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.15) !important; - } - } - } + ::ng-deep &.above-threshold svg.ngx-charts { + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.1) !important; + } + } + } - ::ng-deep svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.31); - } + ::ng-deep svg.ngx-charts { + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.2); + } + } + } } - } } -@media (max-width: $xs-max) { - .auto { +.xs { &.gauge-container { - height: $xs-width - 2 * $chart-margin + 10px; - width: $xs-width - 2 * $chart-margin; + height: $xs-width - 2 * $chart-margin + 10px; + width: $xs-width - 2 * $chart-margin; } .gauge-chart { - height: $xs-width; - width: $xs-width; + height: $xs-width; + width: $xs-width; } .gauge-meta { - .value-current, - .value-limit { - display: none; - } - - ::ng-deep .gauge-title { - width: 100%; - font-size: 14px; - margin-top: 14px; - } - - .value-percent { - margin-top: 0px; - font-size: 18.5px; - } + .value-current, + .value-limit { + display: none; + } + + ::ng-deep .gauge-title { + width: inherit; + font-size: 14px; + margin-top: 14px; + } + + .value-percent { + margin-top: 0px; + font-size: 18.5px; + } } ::ng-deep &.above-threshold svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.15) !important; + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.15) !important; + } } - } } ::ng-deep svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.31); + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.31); + } + } + } +} + +@media (max-width: $xs-max) { + .auto { + &.gauge-container { + height: $xs-width - 2 * $chart-margin + 10px; + width: $xs-width - 2 * $chart-margin; + } + + .gauge-chart { + height: $xs-width; + width: $xs-width; + } + + .gauge-meta { + .value-current, + .value-limit { + display: none; + } + + ::ng-deep .gauge-title { + width: 100%; + font-size: 14px; + margin-top: 14px; + } + + .value-percent { + margin-top: 0px; + font-size: 18.5px; + } + } + + ::ng-deep &.above-threshold svg.ngx-charts { + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.15) !important; + } + } + } + + ::ng-deep svg.ngx-charts { + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.31); + } + } } - } } - } } .centered { - text-align: center; - margin-top: 100px + text-align: center; + margin-top: 100px; } .success-rate-container { - display: flex; - justify-content: center; - align-items: center; - - .success-rate-info-panel { - font-size: small; - margin-top: 0px; - } + display: flex; + justify-content: center; + align-items: center; + + .success-rate-info-panel { + font-size: small; + margin-top: 0px; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.ts index 38d7ccb69c..aa3c67e668 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.ts @@ -10,10 +10,9 @@ import { DataJob } from '../../../model'; @Component({ selector: 'lib-widget-execution-status-gauge', templateUrl: './widget-execution-status-gauge.component.html', - styleUrls: ['./widget-execution-status-gauge.component.scss'] + styleUrls: ['./widget-execution-status-gauge.component.scss'], }) export class WidgetExecutionStatusGaugeComponent implements OnChanges { - @Input() allJobs: DataJob[]; failedExecutions: number; successfulExecutions: number; @@ -28,12 +27,15 @@ export class WidgetExecutionStatusGaugeComponent implements OnChanges { (changes['allJobs'].currentValue as DataJob[]).forEach( (dataJob) => { if (dataJob.deployments) { - this.failedExecutions += dataJob.deployments[0].failedExecutions; - this.successfulExecutions += dataJob.deployments[0].successfulExecutions; + this.failedExecutions += + dataJob.deployments[0].failedExecutions; + this.successfulExecutions += + dataJob.deployments[0].successfulExecutions; } } ); - this.totalExecutions = this.failedExecutions + this.successfulExecutions; + this.totalExecutions = + this.failedExecutions + this.successfulExecutions; this.successRate = this.successfulExecutions / this.totalExecutions; this.loading = false; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget.scss index eaaaef19be..d47e6c490c 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget.scss @@ -6,16 +6,17 @@ @import "variables.scss"; .widget { - position: relative; - height: 100%; - - .widget-section-container { - padding: 1.2rem; - height: 100%; - border-radius: .2rem; - border: none; - box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1), 0 3px 5px 0 rgba(0, 0, 0, 0.09); position: relative; - overflow: hidden; - } + height: 100%; + + .widget-section-container { + padding: 1.2rem; + height: 100%; + border-radius: 0.2rem; + border: none; + box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1), + 0 3px 5px 0 rgba(0, 0, 0, 0.09); + position: relative; + overflow: hidden; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/data-pipelines.module.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/data-pipelines.module.ts index 14b34de9a5..35200d3d2f 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/data-pipelines.module.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/data-pipelines.module.ts @@ -17,7 +17,11 @@ import { LottieModule } from 'ngx-lottie'; import { DpDatePickerModule } from 'ng2-date-picker'; -import { ClarityModule, ClrDatagridModule, ClrSpinnerModule } from '@clr/angular'; +import { + ClarityModule, + ClrDatagridModule, + ClrSpinnerModule, +} from '@clr/angular'; import { VmwComponentsModule } from '@vdk/shared'; @@ -33,7 +37,7 @@ import { FormatDeltaPipe, FormatSchedulePipe, ParseEpochPipe, - ParseNextRunPipe + ParseNextRunPipe, } from './shared/pipes'; import { @@ -46,10 +50,16 @@ import { QuickFiltersComponent, StatusCellComponent, StatusPanelComponent, - WidgetValueComponent + WidgetValueComponent, } from './shared/components'; -import { DataJobsApiService, DataJobsBaseApiService, DataJobsPublicApiService, DataJobsService, DataJobsServiceImpl } from './services'; +import { + DataJobsApiService, + DataJobsBaseApiService, + DataJobsPublicApiService, + DataJobsService, + DataJobsServiceImpl, +} from './services'; import { DATA_PIPELINES_CONFIGS, DataPipelinesConfig } from './model'; @@ -75,7 +85,7 @@ import { DataJobExecutionTypeFilterComponent, ExecutionDurationChartComponent, ExecutionStatusChartComponent, - TimePeriodFilterComponent + TimePeriodFilterComponent, } from './components/data-job/pages/executions'; import { @@ -83,7 +93,7 @@ import { DataJobsFailedWidgetComponent, DataJobsHealthPanelComponent, DataJobsWidgetOneComponent, - WidgetExecutionStatusGaugeComponent + WidgetExecutionStatusGaugeComponent, } from './components/widgets'; const routes: Routes = []; @@ -103,7 +113,7 @@ const routes: Routes = []; TimeagoModule.forRoot(), TaurusSharedNgRxModule.forFeatureEffects([DataJobsEffects]), DpDatePickerModule, - NgxChartsModule + NgxChartsModule, ], declarations: [ AttributesDirective, @@ -147,7 +157,7 @@ const routes: Routes = []; DataJobsFailedWidgetComponent, WidgetExecutionStatusGaugeComponent, DataJobsHealthPanelComponent, - EmptyStateComponent + EmptyStateComponent, ], exports: [ DataJobsExplorePageComponent, @@ -161,12 +171,14 @@ const routes: Routes = []; DataJobsExecutionsWidgetComponent, DataJobsFailedWidgetComponent, WidgetExecutionStatusGaugeComponent, - DataJobsHealthPanelComponent - ] + DataJobsHealthPanelComponent, + ], }) export class DataPipelinesModule { // eslint-disable-next-line @typescript-eslint/no-explicit-any - static forRoot(config: DataPipelinesConfig = {} as any): ModuleWithProviders { + static forRoot( + config: DataPipelinesConfig = {} as any + ): ModuleWithProviders { return { ngModule: DataPipelinesModule, providers: [ @@ -174,8 +186,8 @@ export class DataPipelinesModule { DataJobsPublicApiService, DataJobsApiService, { provide: DataJobsService, useClass: DataJobsServiceImpl }, - { provide: DATA_PIPELINES_CONFIGS, useValue: config } - ] + { provide: DATA_PIPELINES_CONFIGS, useValue: config }, + ], }; } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/constants.model.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/constants.model.ts index a6245062b2..a65be14481 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/constants.model.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/constants.model.ts @@ -10,7 +10,9 @@ import { DataPipelinesConfig } from './config.model'; /** * ** Injection Token for Data pipelines config. */ -export const DATA_PIPELINES_CONFIGS = new InjectionToken('DataPipelinesConfig'); +export const DATA_PIPELINES_CONFIGS = new InjectionToken( + 'DataPipelinesConfig' +); /** * ** Team name constant used as key identifier in {@link ComponentState.requestParams}. diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-base.model.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-base.model.ts index 44b9ab1c2f..ed5e271c4f 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-base.model.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-base.model.ts @@ -17,7 +17,9 @@ export interface GraphQLResponsePage { // Deployment -export interface BaseDataJobDeployment extends StatusDetails { +export interface BaseDataJobDeployment< + E extends DataJobExecution = DataJobExecution +> extends StatusDetails { id: string; contacts?: DataJobContacts; jobVersion?: string; @@ -35,7 +37,7 @@ export enum DataJobDeploymentStatus { NONE = 'NONE', SUCCESS = 'SUCCESS', PLATFORM_ERROR = 'PLATFORM_ERROR', - USER_ERROR = 'USER_ERROR' + USER_ERROR = 'USER_ERROR', } export interface DataJobContacts { @@ -78,7 +80,7 @@ export interface DataJobExecution { export enum DataJobExecutionType { MANUAL = 'MANUAL', - SCHEDULED = 'SCHEDULED' + SCHEDULED = 'SCHEDULED', } /** @@ -93,5 +95,5 @@ export enum DataJobExecutionStatus { SKIPPED = 'SKIPPED', FAILED = 'FAILED', // Keep for backward compatibility USER_ERROR = 'USER_ERROR', - PLATFORM_ERROR = 'PLATFORM_ERROR' + PLATFORM_ERROR = 'PLATFORM_ERROR', } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-deployments.model.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-deployments.model.ts index 56c31ee157..d496c841ba 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-deployments.model.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-deployments.model.ts @@ -3,7 +3,10 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { BaseDataJobDeployment, DataJobExecutionStatus } from './data-job-base.model'; +import { + BaseDataJobDeployment, + DataJobExecutionStatus, +} from './data-job-base.model'; export interface DataJobDeployment extends BaseDataJobDeployment { lastDeployedDate?: string; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-executions.model.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-executions.model.ts index 98ca57c7e7..85757bd028 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-executions.model.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-executions.model.ts @@ -7,7 +7,11 @@ import { DirectionType } from '@vdk/shared'; -import { DataJobExecution, DataJobExecutionStatus, GraphQLResponsePage } from './data-job-base.model'; +import { + DataJobExecution, + DataJobExecutionStatus, + GraphQLResponsePage, +} from './data-job-base.model'; export type DataJobExecutions = DataJobExecution[]; @@ -26,7 +30,7 @@ export enum DataJobExecutionStatusDeprecated { SKIPPED = 'skipped', FAILED = 'failed', // Keep for backward compatibility USER_ERROR = 'user_error', - PLATFORM_ERROR = 'platform_error' + PLATFORM_ERROR = 'platform_error', } /** diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job.model.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job.model.ts index fde9e0a264..d3c275eeee 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job.model.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job.model.ts @@ -7,7 +7,11 @@ import { ApiPredicate } from '@vdk/shared'; -import { DataJobContacts, DataJobSchedule, GraphQLResponsePage } from './data-job-base.model'; +import { + DataJobContacts, + DataJobSchedule, + GraphQLResponsePage, +} from './data-job-base.model'; import { DataJobDeployment } from './data-job-deployments.model'; @@ -42,5 +46,5 @@ export interface DataJobReqVariables { export enum DataJobStatus { ENABLED = 'Enabled', DISABLED = 'Disabled', - NOT_DEPLOYED = 'Not Deployed' + NOT_DEPLOYED = 'Not Deployed', } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/grid-config.model.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/grid-config.model.ts index dfd0b2e82f..a95809482f 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/grid-config.model.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/grid-config.model.ts @@ -7,5 +7,5 @@ export enum DisplayMode { /* eslint-disable-next-line @typescript-eslint/naming-convention */ COMPACT = 'compact', /* eslint-disable-next-line @typescript-eslint/naming-convention */ - STANDARD = 'standard' + STANDARD = 'standard', } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/route.model.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/route.model.ts index 8acffa5dc1..ec91e25a64 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/route.model.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/route.model.ts @@ -9,7 +9,7 @@ import { TaurusRouteData, TaurusRouteNavigateBackData, TaurusRouteNavigateToData, - TaurusRoutes + TaurusRoutes, } from '@vdk/shared'; export interface DataPipelinesRestoreUI { @@ -22,7 +22,9 @@ export interface DataPipelinesRestoreUI { /** * ** Data pipelines Route data. */ -export interface DataPipelinesRouteData extends TaurusRouteNavigateToData, TaurusRouteNavigateBackData { +export interface DataPipelinesRouteData + extends TaurusRouteNavigateToData, + TaurusRouteNavigateBackData { /** * ** Field that has pointer to paramKey for Team in Route config. */ @@ -78,4 +80,6 @@ export type DataPipelinesRoute = ArrayElement; /** * ** Data pipelines Routes configs. */ -export type DataPipelinesRoutes = TaurusRoutes>; +export type DataPipelinesRoutes = TaurusRoutes< + TaurusRouteData +>; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/toast-definitions.model.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/toast-definitions.model.ts index 21f6f14680..b5f0ed1e55 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/toast-definitions.model.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/toast-definitions.model.ts @@ -12,7 +12,7 @@ export class ToastDefinitions { return { type: VmwToastType.INFO, title: `Data job Queued for execution`, - description: `Data job "${ jobName }" successfully queued for execution.` + description: `Data job "${jobName}" successfully queued for execution.`, }; } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-base.api.service.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-base.api.service.spec.ts index 6ed1809a2b..9effd146a8 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-base.api.service.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-base.api.service.spec.ts @@ -16,7 +16,12 @@ import { HttpLink, HttpLinkHandler } from 'apollo-angular/http'; import { ErrorHandlerService } from '@vdk/shared'; -import { DataJobExecutionsPage, DataJobExecutionsReqVariables, DataJobPage, DataJobReqVariables } from '../model'; +import { + DataJobExecutionsPage, + DataJobExecutionsReqVariables, + DataJobPage, + DataJobReqVariables, +} from '../model'; import { DataJobsBaseApiService } from './data-jobs-base.api.service'; @@ -30,15 +35,25 @@ describe('DataJobsBaseApiService', () => { let apolloBaseStub: jasmine.SpyObj; beforeEach(() => { - apolloStub = jasmine.createSpyObj('apolloService', ['use', 'createNamed']); - httpLinkStub = jasmine.createSpyObj('httpLinkService', ['create']); - httpClientStub = jasmine.createSpyObj('httpClientService', ['request']); - errorHandlerServiceStub = jasmine.createSpyObj('errorHandlerService', [ - 'processError', - 'handleError' + apolloStub = jasmine.createSpyObj('apolloService', [ + 'use', + 'createNamed', ]); + httpLinkStub = jasmine.createSpyObj('httpLinkService', [ + 'create', + ]); + httpClientStub = jasmine.createSpyObj('httpClientService', [ + 'request', + ]); + errorHandlerServiceStub = jasmine.createSpyObj( + 'errorHandlerService', + ['processError', 'handleError'] + ); - apolloBaseStub = jasmine.createSpyObj('apolloBase', ['query', 'watchQuery']); + apolloBaseStub = jasmine.createSpyObj('apolloBase', [ + 'query', + 'watchQuery', + ]); TestBed.configureTestingModule({ providers: [ @@ -46,8 +61,11 @@ describe('DataJobsBaseApiService', () => { { provide: Apollo, useValue: apolloStub }, { provide: HttpLink, useValue: httpLinkStub }, { provide: HttpClient, useValue: httpClientStub }, - { provide: ErrorHandlerService, useValue: errorHandlerServiceStub } - ] + { + provide: ErrorHandlerService, + useValue: errorHandlerServiceStub, + }, + ], }); service = TestBed.inject(DataJobsBaseApiService); @@ -82,17 +100,17 @@ describe('DataJobsBaseApiService', () => { pageNumber: 2, pageSize: 25, filter: [], - search: 'sup' + search: 'sup', }; const apolloLinkHandlerStub: HttpLinkHandler = {} as any; const apolloMockResponse: ApolloQueryResult = { data: { content: [], totalItems: 25, - totalPages: 1 + totalPages: 1, }, networkStatus: 7, - loading: false + loading: false, }; apolloBaseStub.query.and.returnValue(of(apolloMockResponse)); @@ -103,31 +121,41 @@ describe('DataJobsBaseApiService', () => { let dataJobPage: DataJobPage; service .getJobs(ownerTeam, gqlQuery, dataJobReqVariables) - .subscribe((r) => dataJobPage = r.data); + .subscribe((r) => (dataJobPage = r.data)); // Then expect(apolloStub.use.calls.argsFor(0)).toEqual([ownerTeam]); expect(httpLinkStub.create).toHaveBeenCalledWith({ - uri: `/data-jobs/for-team/${ ownerTeam }/jobs`, - method: 'GET' + uri: `/data-jobs/for-team/${ownerTeam}/jobs`, + method: 'GET', }); - expect(apolloStub.createNamed.calls.argsFor(0)[0]).toEqual(ownerTeam); - expect(apolloStub.createNamed.calls.argsFor(0)[1].cache).toEqual(jasmine.any(InMemoryCache)); - expect(apolloStub.createNamed.calls.argsFor(0)[1].link).toBe(apolloLinkHandlerStub); - expect(apolloStub.createNamed.calls.argsFor(0)[1].defaultOptions).toEqual({ + expect(apolloStub.createNamed.calls.argsFor(0)[0]).toEqual( + ownerTeam + ); + expect( + apolloStub.createNamed.calls.argsFor(0)[1].cache + ).toEqual(jasmine.any(InMemoryCache)); + expect(apolloStub.createNamed.calls.argsFor(0)[1].link).toBe( + apolloLinkHandlerStub + ); + expect( + apolloStub.createNamed.calls.argsFor(0)[1].defaultOptions + ).toEqual({ watchQuery: { fetchPolicy: 'no-cache', - errorPolicy: 'all' + errorPolicy: 'all', }, query: { fetchPolicy: 'no-cache', - errorPolicy: 'all' - } + errorPolicy: 'all', + }, }); expect(apolloStub.use.calls.argsFor(1)).toEqual([ownerTeam]); expect(apolloBaseStub.query).toHaveBeenCalledWith({ - query: gql`${ gqlQuery }`, - variables: dataJobReqVariables + query: gql` + ${gqlQuery} + `, + variables: dataJobReqVariables, }); expect(dataJobPage).toBe(apolloMockResponse.data); }); @@ -156,20 +184,23 @@ describe('DataJobsBaseApiService', () => { pageNumber: 2, pageSize: 25, filter: [], - search: 'sup' + search: 'sup', }; const apolloLinkHandlerStub = {} as HttpLinkHandler; const apolloQueryResult: ApolloQueryResult = { data: { content: [], totalItems: 25, - totalPages: 1 + totalPages: 1, }, networkStatus: 7, - loading: false + loading: false, }; - const apolloMockResponse: QueryRef = { - valueChanges: of(apolloQueryResult) + const apolloMockResponse: QueryRef< + DataJobPage, + DataJobReqVariables + > = { + valueChanges: of(apolloQueryResult), } as QueryRef; apolloBaseStub.watchQuery.and.returnValue(apolloMockResponse); @@ -180,32 +211,41 @@ describe('DataJobsBaseApiService', () => { let dataJobPage: DataJobPage; service .watchForJobs(ownerTeam, gqlQuery, dataJobReqVariables) - .valueChanges - .subscribe((r) => dataJobPage = r.data); + .valueChanges.subscribe((r) => (dataJobPage = r.data)); // Then expect(apolloStub.use.calls.argsFor(0)).toEqual([ownerTeam]); expect(httpLinkStub.create).toHaveBeenCalledWith({ - uri: `/data-jobs/for-team/${ ownerTeam }/jobs`, - method: 'GET' + uri: `/data-jobs/for-team/${ownerTeam}/jobs`, + method: 'GET', }); - expect(apolloStub.createNamed.calls.argsFor(0)[0]).toEqual(ownerTeam); - expect(apolloStub.createNamed.calls.argsFor(0)[1].cache).toEqual(jasmine.any(InMemoryCache)); - expect(apolloStub.createNamed.calls.argsFor(0)[1].link).toBe(apolloLinkHandlerStub); - expect(apolloStub.createNamed.calls.argsFor(0)[1].defaultOptions).toEqual({ + expect(apolloStub.createNamed.calls.argsFor(0)[0]).toEqual( + ownerTeam + ); + expect( + apolloStub.createNamed.calls.argsFor(0)[1].cache + ).toEqual(jasmine.any(InMemoryCache)); + expect(apolloStub.createNamed.calls.argsFor(0)[1].link).toBe( + apolloLinkHandlerStub + ); + expect( + apolloStub.createNamed.calls.argsFor(0)[1].defaultOptions + ).toEqual({ watchQuery: { fetchPolicy: 'no-cache', - errorPolicy: 'all' + errorPolicy: 'all', }, query: { fetchPolicy: 'no-cache', - errorPolicy: 'all' - } + errorPolicy: 'all', + }, }); expect(apolloStub.use.calls.argsFor(1)).toEqual([ownerTeam]); expect(apolloBaseStub.watchQuery).toHaveBeenCalledWith({ - query: gql`${ gqlQuery }`, - variables: dataJobReqVariables + query: gql` + ${gqlQuery} + `, + variables: dataJobReqVariables, }); expect(dataJobPage).toBe(apolloQueryResult.data); }); @@ -240,18 +280,19 @@ describe('DataJobsBaseApiService', () => { const ownerTeam = 'supercollider_test'; const dataJobReqVariables: DataJobExecutionsReqVariables = { pageNumber: 2, - pageSize: 25 + pageSize: 25, }; const apolloLinkHandlerStub = {} as HttpLinkHandler; - const apolloMockResponse: ApolloQueryResult = { - data: { - content: [], - totalItems: 25, - totalPages: 1 - }, - networkStatus: 7, - loading: false - }; + const apolloMockResponse: ApolloQueryResult = + { + data: { + content: [], + totalItems: 25, + totalPages: 1, + }, + networkStatus: 7, + loading: false, + }; apolloBaseStub.query.and.returnValue(of(apolloMockResponse)); apolloStub.use.and.returnValues(null, apolloBaseStub); @@ -261,31 +302,41 @@ describe('DataJobsBaseApiService', () => { let dataJobExecutionsPage: DataJobExecutionsPage; service .getExecutions(ownerTeam, gqlQuery, dataJobReqVariables) - .subscribe((r) => dataJobExecutionsPage = r.data); + .subscribe((r) => (dataJobExecutionsPage = r.data)); // Then expect(apolloStub.use.calls.argsFor(0)).toEqual([ownerTeam]); expect(httpLinkStub.create).toHaveBeenCalledWith({ - uri: `/data-jobs/for-team/${ ownerTeam }/jobs`, - method: 'GET' + uri: `/data-jobs/for-team/${ownerTeam}/jobs`, + method: 'GET', }); - expect(apolloStub.createNamed.calls.argsFor(0)[0]).toEqual(ownerTeam); - expect(apolloStub.createNamed.calls.argsFor(0)[1].cache).toEqual(jasmine.any(InMemoryCache)); - expect(apolloStub.createNamed.calls.argsFor(0)[1].link).toBe(apolloLinkHandlerStub); - expect(apolloStub.createNamed.calls.argsFor(0)[1].defaultOptions).toEqual({ + expect(apolloStub.createNamed.calls.argsFor(0)[0]).toEqual( + ownerTeam + ); + expect( + apolloStub.createNamed.calls.argsFor(0)[1].cache + ).toEqual(jasmine.any(InMemoryCache)); + expect(apolloStub.createNamed.calls.argsFor(0)[1].link).toBe( + apolloLinkHandlerStub + ); + expect( + apolloStub.createNamed.calls.argsFor(0)[1].defaultOptions + ).toEqual({ watchQuery: { fetchPolicy: 'no-cache', - errorPolicy: 'all' + errorPolicy: 'all', }, query: { fetchPolicy: 'no-cache', - errorPolicy: 'all' - } + errorPolicy: 'all', + }, }); expect(apolloStub.use.calls.argsFor(1)).toEqual([ownerTeam]); expect(apolloBaseStub.query).toHaveBeenCalledWith({ - query: gql`${ gqlQuery }`, - variables: dataJobReqVariables + query: gql` + ${gqlQuery} + `, + variables: dataJobReqVariables, }); expect(dataJobExecutionsPage).toBe(apolloMockResponse.data); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-base.api.service.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-base.api.service.ts index cc4ef6607a..3a7c66e95c 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-base.api.service.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-base.api.service.ts @@ -9,12 +9,23 @@ import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; -import { ApolloQueryResult, DefaultOptions, gql, InMemoryCache } from '@apollo/client/core'; +import { + ApolloQueryResult, + DefaultOptions, + gql, + InMemoryCache, +} from '@apollo/client/core'; import { Apollo, ApolloBase, QueryRef } from 'apollo-angular'; import { HttpLink } from 'apollo-angular/http'; -import { DataJob, DataJobExecutionsPage, DataJobExecutionsReqVariables, DataJobPage, DataJobReqVariables } from '../model'; +import { + DataJob, + DataJobExecutionsPage, + DataJobExecutionsReqVariables, + DataJobPage, + DataJobReqVariables, +} from '../model'; /** * ** Data Jobs Service build on top of Apollo gql client. @@ -25,20 +36,21 @@ export class DataJobsBaseApiService { private static readonly APOLLO_DEFAULT_OPTIONS: DefaultOptions = { watchQuery: { fetchPolicy: 'no-cache', - errorPolicy: 'all' + errorPolicy: 'all', }, query: { fetchPolicy: 'no-cache', - errorPolicy: 'all' - } + errorPolicy: 'all', + }, }; /** * ** Constructor. */ - constructor(private readonly apollo: Apollo, - private readonly httpLink: HttpLink) { - } + constructor( + private readonly apollo: Apollo, + private readonly httpLink: HttpLink + ) {} /** * ** Get all DataJobs for provided OwnerTeam and load data based on provided gqlQuery. @@ -46,13 +58,14 @@ export class DataJobsBaseApiService { getJobs( ownerTeam: string, gqlQuery: string, - variables: DataJobReqVariables): Observable> { - - return this.getApolloClientFor(ownerTeam) - .query({ - query: gql`${ gqlQuery }`, - variables - }); + variables: DataJobReqVariables + ): Observable> { + return this.getApolloClientFor(ownerTeam).query({ + query: gql` + ${gqlQuery} + `, + variables, + }); } /** @@ -61,29 +74,31 @@ export class DataJobsBaseApiService { watchForJobs( ownerTeam: string, gqlQuery: string, - variables: DataJobReqVariables): QueryRef { - - return this.getApolloClientFor(ownerTeam) - .watchQuery({ - query: gql`${ gqlQuery }`, - variables - }); + variables: DataJobReqVariables + ): QueryRef { + return this.getApolloClientFor(ownerTeam).watchQuery({ + query: gql` + ${gqlQuery} + `, + variables, + }); } /** * ** Get all DataJob Executions for provided OwnerTeam and load data based on provided gqlQuery. */ - getExecutions( // NOSONAR + getExecutions( + // NOSONAR ownerTeam: string, gqlQuery: string, variables: DataJobExecutionsReqVariables ): Observable> { - - return this.getApolloClientFor(ownerTeam) - .query({ - query: gql`${ gqlQuery }`, - variables - }); + return this.getApolloClientFor(ownerTeam).query({ + query: gql` + ${gqlQuery} + `, + variables, + }); } private getApolloClientFor(ownerTeam: string): ApolloBase { @@ -98,16 +113,16 @@ export class DataJobsBaseApiService { }, executions: (_existing, _options) => { return {}; - } - } - } - } + }, + }, + }, + }, }), link: this.httpLink.create({ - uri: `/data-jobs/for-team/${ ownerTeam }/jobs`, - method: DataJobsBaseApiService.APOLLO_METHOD + uri: `/data-jobs/for-team/${ownerTeam}/jobs`, + method: DataJobsBaseApiService.APOLLO_METHOD, }), - defaultOptions: DataJobsBaseApiService.APOLLO_DEFAULT_OPTIONS + defaultOptions: DataJobsBaseApiService.APOLLO_DEFAULT_OPTIONS, }); } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-public.api.service.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-public.api.service.spec.ts index 2f40653383..d449a96614 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-public.api.service.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-public.api.service.spec.ts @@ -22,14 +22,22 @@ describe('DataJobsPublicApiService', () => { let service: DataJobsPublicApiService; beforeEach(() => { - dataJobsBaseServiceStub = jasmine.createSpyObj('dataJobsBaseServiceStub', ['getJobs']); - dataJobsBaseServiceStub.getJobs.and.returnValue(new Subject>()); + dataJobsBaseServiceStub = jasmine.createSpyObj( + 'dataJobsBaseServiceStub', + ['getJobs'] + ); + dataJobsBaseServiceStub.getJobs.and.returnValue( + new Subject>() + ); TestBed.configureTestingModule({ providers: [ DataJobsPublicApiService, - { provide: DataJobsBaseApiService, useValue: dataJobsBaseServiceStub } - ] + { + provide: DataJobsBaseApiService, + useValue: dataJobsBaseServiceStub, + }, + ], }); service = TestBed.inject(DataJobsPublicApiService); }); @@ -46,18 +54,17 @@ describe('DataJobsPublicApiService', () => { data: { content: [{}], totalItems: 1, - totalPages: 1 + totalPages: 1, }, loading: false, - networkStatus: 7 + networkStatus: 7, }; const apolloQueryRef = of(apolloQueryResult); dataJobsBaseServiceStub.getJobs.and.returnValue(apolloQueryRef); // When - service.getAllDataJobs('teamA') - .subscribe(); + service.getAllDataJobs('teamA').subscribe(); // Then expect(dataJobsBaseServiceStub.getJobs).toHaveBeenCalledWith( @@ -81,7 +88,7 @@ describe('DataJobsPublicApiService', () => { filter: [], search: null, pageNumber: 1, - pageSize: 1000 + pageSize: 1000, } ); }); @@ -92,10 +99,10 @@ describe('DataJobsPublicApiService', () => { data: { content: [{}], totalItems: 2500, - totalPages: 3 + totalPages: 3, }, loading: false, - networkStatus: 7 + networkStatus: 7, }; const apolloQueryRef = of(apolloQueryResult); let counter = 0; @@ -103,11 +110,12 @@ describe('DataJobsPublicApiService', () => { dataJobsBaseServiceStub.getJobs.and.returnValue(apolloQueryRef); // When/Then - service.getAllDataJobs('teamA') - .subscribe((value) => { - expect(dataJobsBaseServiceStub.getJobs.calls.argsFor(counter)).toEqual([ - 'teamA', - `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) + service.getAllDataJobs('teamA').subscribe((value) => { + expect( + dataJobsBaseServiceStub.getJobs.calls.argsFor(counter) + ).toEqual([ + 'teamA', + `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) { jobs(filter: $filter, search: $search, pageNumber: $pageNumber, pageSize: $pageSize) { content { @@ -122,22 +130,22 @@ describe('DataJobsPublicApiService', () => { totalItems } }`, - { - filter: [], - search: null, - pageNumber: counter + 1, - pageSize: 1000 - } - ]); - - counter++; - - expect(value?.length).toEqual(counter); - - if (counter === 3) { - done(); - } - }); + { + filter: [], + search: null, + pageNumber: counter + 1, + pageSize: 1000, + }, + ]); + + counter++; + + expect(value?.length).toEqual(counter); + + if (counter === 3) { + done(); + } + }); }); }); @@ -148,17 +156,17 @@ describe('DataJobsPublicApiService', () => { data: { content: [{}, {}, {}, {}, {}], totalItems: 5, - totalPages: 1 + totalPages: 1, }, loading: false, - networkStatus: 7 + networkStatus: 7, }; const assertionFilters: ApiPredicate[] = [ { property: 'config.team', pattern: 'teamA', - sort: null - } + sort: null, + }, ]; dataJobsBaseServiceStub.getJobs.and.returnValues( @@ -167,14 +175,14 @@ describe('DataJobsPublicApiService', () => { of(undefined), of({ ...apolloQueryResult, - data: undefined + data: undefined, }), of({ ...apolloQueryResult, data: { ...apolloQueryResult.data, - totalItems: undefined - } + totalItems: undefined, + }, }) ); @@ -183,13 +191,15 @@ describe('DataJobsPublicApiService', () => { service.getDataJobsTotal('teamA'), service.getDataJobsTotal('teamA'), service.getDataJobsTotal('teamA'), - service.getDataJobsTotal('teamA') + service.getDataJobsTotal('teamA'), ]).subscribe(([value1, value2, value3, value4]) => { expect(value1).toEqual(5); expect(value2).toEqual(0); expect(value3).toEqual(0); expect(value4).toEqual(0); - expect(dataJobsBaseServiceStub.getJobs).toHaveBeenCalledWith( + expect( + dataJobsBaseServiceStub.getJobs + ).toHaveBeenCalledWith( 'teamA', `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) { @@ -208,7 +218,7 @@ describe('DataJobsPublicApiService', () => { filter: assertionFilters, search: null, pageNumber: 1, - pageSize: 1 + pageSize: 1, } ); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-public.api.service.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-public.api.service.ts index 804414775c..2bbbd01213 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-public.api.service.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-public.api.service.ts @@ -19,34 +19,41 @@ export class DataJobsPublicApiService { /** * ** Constructor. */ - constructor(private readonly dataJobsBaseService: DataJobsBaseApiService) { - } + constructor(private readonly dataJobsBaseService: DataJobsBaseApiService) {} /** * ** Retrieve all DataJobs for Team. */ - getAllDataJobs(team: string): Observable> { + getAllDataJobs(team: string): Observable< + Array<{ + jobName?: string; + config?: { + team?: string; + description?: string; + sourceUrl?: string; + }; + }> + > { const pageSize = 1000; let pageNumber = 1; let dataJobs: DataJob[] = []; - return this._getDataJobsPage(team, pageNumber, pageSize) - .pipe( - expand((dataJobPage) => { - if (dataJobPage.totalPages <= pageNumber) { - return EMPTY; - } else { - return this._getDataJobsPage(team, ++pageNumber, pageSize); - } - }), - map((dataJobPage) => { - dataJobs = dataJobs.concat( - (dataJobPage.content as unknown) as DataJob[] - ); + return this._getDataJobsPage(team, pageNumber, pageSize).pipe( + expand((dataJobPage) => { + if (dataJobPage.totalPages <= pageNumber) { + return EMPTY; + } else { + return this._getDataJobsPage(team, ++pageNumber, pageSize); + } + }), + map((dataJobPage) => { + dataJobs = dataJobs.concat( + dataJobPage.content as unknown as DataJob[] + ); - return dataJobs; - }) - ); + return dataJobs; + }) + ); } /** @@ -57,14 +64,14 @@ export class DataJobsPublicApiService { { property: 'config.team', pattern: team, - sort: null - } + sort: null, + }, ]; return this.dataJobsBaseService - .getJobs( - team, - `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) + .getJobs( + team, + `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) { jobs(filter: $filter, search: $search, pageNumber: $pageNumber, pageSize: $pageSize) { content { @@ -77,16 +84,14 @@ export class DataJobsPublicApiService { totalItems } }`, - { - filter: filters, - search: null, - pageNumber: 1, - pageSize: 1 - } - ) - .pipe( - map((response) => response?.data?.totalItems ?? 0) - ); + { + filter: filters, + search: null, + pageNumber: 1, + pageSize: 1, + } + ) + .pipe(map((response) => response?.data?.totalItems ?? 0)); } /** @@ -100,9 +105,9 @@ export class DataJobsPublicApiService { searchQueryValue: string = null ): Observable { return this.dataJobsBaseService - .getJobs( - team, - `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) + .getJobs( + team, + `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) { jobs(filter: $filter, search: $search, pageNumber: $pageNumber, pageSize: $pageSize) { content { @@ -117,15 +122,13 @@ export class DataJobsPublicApiService { totalItems } }`, - { - filter: filters, - search: searchQueryValue, - pageNumber, - pageSize - } - ) - .pipe( - map((response) => response.data) - ); + { + filter: filters, + search: searchQueryValue, + pageNumber, + pageSize, + } + ) + .pipe(map((response) => response.data)); } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.api.service.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.api.service.spec.ts index 6e16471a36..b8edfdc163 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.api.service.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.api.service.spec.ts @@ -14,7 +14,11 @@ import { DATA_PIPELINES_CONFIGS, DataJob, DataJobPage } from '../model'; import { DataJobsBaseApiService } from './data-jobs-base.api.service'; -import { DataJobsApiService, MISSING_DEFAULT_TEAM_MESSAGE, RESERVED_DEFAULT_TEAM_NAME_MESSAGE } from './data-jobs.api.service'; +import { + DataJobsApiService, + MISSING_DEFAULT_TEAM_MESSAGE, + RESERVED_DEFAULT_TEAM_NAME_MESSAGE, +} from './data-jobs.api.service'; describe('DataJobsApiService', () => { let service: DataJobsApiService; @@ -25,12 +29,21 @@ describe('DataJobsApiService', () => { /* eslint-disable-next-line @typescript-eslint/naming-convention */ job_name: 'job001', team: 'taurus', - description: 'descpription001' + description: 'descpription001', }; beforeEach(() => { - dataJobsBaseServiceStub = jasmine.createSpyObj('dataJobsBaseService', ['getJobs']); - httpClientStub = jasmine.createSpyObj('httpClient', ['get', 'post', 'patch', 'put', 'delete']); + dataJobsBaseServiceStub = jasmine.createSpyObj( + 'dataJobsBaseService', + ['getJobs'] + ); + httpClientStub = jasmine.createSpyObj('httpClient', [ + 'get', + 'post', + 'patch', + 'put', + 'delete', + ]); httpClientStub.get.and.returnValue(of({})); httpClientStub.post.and.returnValue(of({})); @@ -42,14 +55,17 @@ describe('DataJobsApiService', () => { providers: [ DataJobsApiService, { provide: HttpClient, useValue: httpClientStub }, - { provide: DataJobsBaseApiService, useValue: dataJobsBaseServiceStub }, + { + provide: DataJobsBaseApiService, + useValue: dataJobsBaseServiceStub, + }, { provide: DATA_PIPELINES_CONFIGS, useFactory: () => ({ - defaultOwnerTeamName: 'all' - }) - } - ] + defaultOwnerTeamName: 'all', + }), + }, + ], }); service = TestBed.inject(DataJobsApiService); @@ -67,10 +83,10 @@ describe('DataJobsApiService', () => { data: { content: [{}], totalItems: 1, - totalPages: 1 + totalPages: 1, }, loading: false, - networkStatus: 7 + networkStatus: 7, }; const apolloQueryRef = of(apolloQueryResult); @@ -127,7 +143,7 @@ describe('DataJobsApiService', () => { pageNumber: 1, pageSize: 1, filter: [], - search: 'searchQueryValue' + search: 'searchQueryValue', } ); }); @@ -140,12 +156,14 @@ describe('DataJobsApiService', () => { data: { content: [{}], totalItems: 1, - totalPages: 1 + totalPages: 1, }, loading: false, - networkStatus: 7 + networkStatus: 7, }; - dataJobsBaseServiceStub.getJobs.and.returnValue(of(apolloQueryResult)); + dataJobsBaseServiceStub.getJobs.and.returnValue( + of(apolloQueryResult) + ); // When service.getJob('supercollider_demo', 'test-job-taur'); @@ -192,9 +210,17 @@ describe('DataJobsApiService', () => { }`, { filter: [ - { property: 'config.team', pattern: 'supercollider_demo', sort: null }, - { property: 'jobName', pattern: 'test-job-taur', sort: null } - ] + { + property: 'config.team', + pattern: 'supercollider_demo', + sort: null, + }, + { + property: 'jobName', + pattern: 'test-job-taur', + sort: null, + }, + ], } ); }); @@ -202,34 +228,35 @@ describe('DataJobsApiService', () => { it('should verify will return expected data for given response', (done) => { // Given const dataJob: DataJob = {}; - const apolloQueryResult1: ApolloQueryResult = undefined; + const apolloQueryResult1: ApolloQueryResult = + undefined; const apolloQueryResult2: ApolloQueryResult = { data: undefined, loading: false, - networkStatus: 7 + networkStatus: 7, }; const apolloQueryResult3: ApolloQueryResult = { data: { - content: undefined + content: undefined, }, loading: false, - networkStatus: 7 + networkStatus: 7, }; const apolloQueryResult4: ApolloQueryResult = { data: { - content: [] + content: [], }, loading: false, - networkStatus: 7 + networkStatus: 7, }; const apolloQueryResult5: ApolloQueryResult = { data: { content: [dataJob], totalItems: 1, - totalPages: 1 + totalPages: 1, }, loading: false, - networkStatus: 7 + networkStatus: 7, }; dataJobsBaseServiceStub.getJobs.and.returnValues( of(apolloQueryResult1), @@ -241,17 +268,19 @@ describe('DataJobsApiService', () => { const executeNextCall = (executionId) => { if (executionId === 4) { - service.getJob('supercollider_demo', 'test-job-taur') - .subscribe((value) => { - expect(value).toBe(dataJob); - done(); - }); + service + .getJob('supercollider_demo', 'test-job-taur') + .subscribe((value) => { + expect(value).toBe(dataJob); + done(); + }); } else { - service.getJob('supercollider_demo', 'test-job-taur') - .subscribe((value) => { - expect(value).toBeNull(); - executeNextCall(++executionId); - }); + service + .getJob('supercollider_demo', 'test-job-taur') + .subscribe((value) => { + expect(value).toBeNull(); + executeNextCall(++executionId); + }); } }; @@ -268,12 +297,16 @@ describe('DataJobsApiService', () => { const executionId = 'executionA'; // When - const response = service.getJobExecution(teamName, jobName, executionId); + const response = service.getJobExecution( + teamName, + jobName, + executionId + ); // Then expect(response).toBeDefined(); expect(httpClientStub.get).toHaveBeenCalledWith( - `/data-jobs/for-team/${ teamName }/jobs/${ jobName }/executions/${ executionId }` + `/data-jobs/for-team/${teamName}/jobs/${jobName}/executions/${executionId}` ); }); }); @@ -282,22 +315,29 @@ describe('DataJobsApiService', () => { describe('validateModuleConfig', () => { it('validates dataPipelinesModuleConfig with empty defaultOwnerTeamName', () => { // @ts-ignore - expect(() => service._validateModuleConfig({ - defaultOwnerTeamName: '' - })).toThrow(new Error(MISSING_DEFAULT_TEAM_MESSAGE)); + expect(() => + service._validateModuleConfig({ + defaultOwnerTeamName: '', + }) + ).toThrow(new Error(MISSING_DEFAULT_TEAM_MESSAGE)); }); it('validates dataPipelinesModuleConfig with reserved defaultOwnerTeamName', () => { // @ts-ignore - expect(() => service._validateModuleConfig({ - defaultOwnerTeamName: 'default' - })).toThrow(new Error(RESERVED_DEFAULT_TEAM_NAME_MESSAGE)); + expect(() => + service._validateModuleConfig({ + defaultOwnerTeamName: 'default', + }) + ).toThrow(new Error(RESERVED_DEFAULT_TEAM_NAME_MESSAGE)); }); }); describe('getJobDetails', () => { it('returs observable', () => { - const jobDetailsObservable = service.getJobDetails('team001', 'job001'); + const jobDetailsObservable = service.getJobDetails( + 'team001', + 'job001' + ); expect(jobDetailsObservable).toBeDefined(); }); }); @@ -311,42 +351,65 @@ describe('DataJobsApiService', () => { describe('downloadFile', () => { it('returs observable', () => { - const downloadFileObservable = service.downloadFile('team001', 'job001'); + const downloadFileObservable = service.downloadFile( + 'team001', + 'job001' + ); expect(downloadFileObservable).toBeDefined(); }); }); describe('getJobDeployments', () => { it('returs observable', () => { - const getJobDeploymentsObservable = service.getJobDeployments('team001', 'job001'); + const getJobDeploymentsObservable = service.getJobDeployments( + 'team001', + 'job001' + ); expect(getJobDeploymentsObservable).toBeDefined(); }); }); describe('updateDataJobStatus', () => { it('returs observable', () => { - const updateDataJobStatusObservable = service.updateDataJobStatus('team001', 'job001', 'deploy001', false); + const updateDataJobStatusObservable = service.updateDataJobStatus( + 'team001', + 'job001', + 'deploy001', + false + ); expect(updateDataJobStatusObservable).toBeDefined(); }); }); describe('updateDataJobStatus', () => { it('returs observable', () => { - const updateDataJobStatusObservable = service.updateDataJobStatus('team001', 'job001', null, false); + const updateDataJobStatusObservable = service.updateDataJobStatus( + 'team001', + 'job001', + null, + false + ); expect(updateDataJobStatusObservable).toBeDefined(); }); }); describe('updateDataJob', () => { it('returs observable', () => { - const updateDataJobStatusObservable = service.updateDataJob('team001', 'job001', TEST_JOB_DETAILS); + const updateDataJobStatusObservable = service.updateDataJob( + 'team001', + 'job001', + TEST_JOB_DETAILS + ); expect(updateDataJobStatusObservable).toBeDefined(); }); }); describe('getJobExecutions', () => { it('returs observable', () => { - const jobExecutionsObservable = service.getJobExecutions('team001', 'job001'); + const jobExecutionsObservable = service.getJobExecutions( + 'team001', + 'job001' + ); expect(jobExecutionsObservable).toBeDefined(); }); }); @@ -357,32 +420,43 @@ describe('DataJobsApiService', () => { const jobName = 'job001'; const deploymentId = 'hhw-dff-fgg-100'; - const executeDataJobObservable = service.executeDataJob(teamName, jobName, deploymentId); + const executeDataJobObservable = service.executeDataJob( + teamName, + jobName, + deploymentId + ); expect(executeDataJobObservable).toBeDefined(); - expect(httpClientStub.post) - .toHaveBeenCalledWith(`/data-jobs/for-team/${ teamName }/jobs/${ jobName }/deployments/${ deploymentId }/executions`, {}) - + expect(httpClientStub.post).toHaveBeenCalledWith( + `/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments/${deploymentId}/executions`, + {} + ); }); }); describe('cancelDataJob', () => { it('returns observable', () => { - const teamName = 'team001'; const jobName = 'job001'; const deploymentId = 'hhw-dff-fgg-100'; const executionId = 'hhw-dff-fgg-100'; - const executeDataJobObservable = service.executeDataJob(teamName, jobName, deploymentId); + const executeDataJobObservable = service.executeDataJob( + teamName, + jobName, + deploymentId + ); expect(executeDataJobObservable).toBeDefined(); - expect(httpClientStub.post) - .toHaveBeenCalledWith(`/data-jobs/for-team/${ teamName }/jobs/${ jobName }/deployments/${ deploymentId }/executions`, {}) + expect(httpClientStub.post).toHaveBeenCalledWith( + `/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments/${deploymentId}/executions`, + {} + ); - const cancelExecutionDataJobObservable = service.cancelDataJobExecution(teamName, jobName, executionId); + const cancelExecutionDataJobObservable = + service.cancelDataJobExecution(teamName, jobName, executionId); expect(cancelExecutionDataJobObservable).toBeDefined(); - expect(httpClientStub.delete) - .toHaveBeenCalledWith(`/data-jobs/for-team/${ teamName }/jobs/${ jobName }/executions/${ executionId }`) - + expect(httpClientStub.delete).toHaveBeenCalledWith( + `/data-jobs/for-team/${teamName}/jobs/${jobName}/executions/${executionId}` + ); }); }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.api.service.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.api.service.ts index 143edb9a63..8cdeac2f7f 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.api.service.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.api.service.ts @@ -23,12 +23,13 @@ import { DataJobExecutionOrder, DataJobExecutionsPage, DataJobPage, - DataPipelinesConfig + DataPipelinesConfig, } from '../model'; import { DataJobsBaseApiService } from './data-jobs-base.api.service'; -export const MISSING_DEFAULT_TEAM_MESSAGE = 'The defaultOwnerTeamName property need to be set for the DATA_PIPELINES_CONFIGS'; +export const MISSING_DEFAULT_TEAM_MESSAGE = + 'The defaultOwnerTeamName property need to be set for the DATA_PIPELINES_CONFIGS'; export const RESERVED_DEFAULT_TEAM_NAME_MESSAGE = `The 'default' value is reserved, and can not be used for defaultOwnerTeamName property`; @@ -37,7 +38,8 @@ export class DataJobsApiService { ownerTeamName: string; constructor( - @Inject(DATA_PIPELINES_CONFIGS) dataPipelinesModuleConfig: DataPipelinesConfig, + @Inject(DATA_PIPELINES_CONFIGS) + dataPipelinesModuleConfig: DataPipelinesConfig, private readonly http: HttpClient, private readonly dataJobsBaseService: DataJobsBaseApiService ) { @@ -45,12 +47,14 @@ export class DataJobsApiService { this.ownerTeamName = dataPipelinesModuleConfig?.defaultOwnerTeamName; if (dataPipelinesModuleConfig?.ownerTeamNamesObservable) { - dataPipelinesModuleConfig.ownerTeamNamesObservable.subscribe((result: string[]) => { - if (result?.length) { - //Take the first element from the teams array - this.ownerTeamName = result[0]; + dataPipelinesModuleConfig.ownerTeamNamesObservable.subscribe( + (result: string[]) => { + if (result?.length) { + //Take the first element from the teams array + this.ownerTeamName = result[0]; + } } - }); + ); } } @@ -58,8 +62,8 @@ export class DataJobsApiService { filters: ApiPredicate[], searchQueryValue: string, pageNumber: number, - pageSize: number): Observable> { - + pageSize: number + ): Observable> { return this.dataJobsBaseService.getJobs( this.ownerTeamName, `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) @@ -107,15 +111,16 @@ export class DataJobsApiService { pageNumber, pageSize, filter: filters, - search: searchQueryValue + search: searchQueryValue, } ); } getJob(teamName: string, jobName: string): Observable { - return this.dataJobsBaseService.getJobs( - teamName, - `query jobsQuery($filter: [Predicate]) + return this.dataJobsBaseService + .getJobs( + teamName, + `query jobsQuery($filter: [Predicate]) { jobs(pageNumber: 1, pageSize: 1, filter: $filter) { content { @@ -152,43 +157,56 @@ export class DataJobsApiService { totalItems } }`, - { - filter: this._createTeamJobNameFilter(teamName, jobName) - } - ).pipe( - map((response: ApolloQueryResult) => { - if (!CollectionsUtil.isArray(response?.data?.content) - || response.data.content.length === 0) { - - return null; + { + filter: this._createTeamJobNameFilter(teamName, jobName), } + ) + .pipe( + map((response: ApolloQueryResult) => { + if ( + !CollectionsUtil.isArray(response?.data?.content) || + response.data.content.length === 0 + ) { + return null; + } - return response.data.content[0]; - }) - ); + return response.data.content[0]; + }) + ); } - getJobDetails(teamName: string, jobName: string): Observable { - return this.http.get(`/data-jobs/for-team/${ teamName }/jobs/${ jobName }`); + getJobDetails( + teamName: string, + jobName: string + ): Observable { + return this.http.get( + `/data-jobs/for-team/${teamName}/jobs/${jobName}` + ); } removeJob(teamName: string, jobName: string): Observable { - return this.http.delete(`/data-jobs/for-team/${ teamName }/jobs/${ jobName }`); + return this.http.delete( + `/data-jobs/for-team/${teamName}/jobs/${jobName}` + ); } downloadFile(teamName: string, jobName: string): Observable { const httpHeaders = new HttpHeaders(); httpHeaders.append('Accept', 'application/octet-stream'); - return this.http.get(`/data-jobs/for-team/${ teamName }/jobs/${ jobName }/keytab`, { - headers: httpHeaders, - responseType: 'blob' - }); + return this.http.get( + `/data-jobs/for-team/${teamName}/jobs/${jobName}/keytab`, + { + headers: httpHeaders, + responseType: 'blob', + } + ); } getJobExecutions( teamName: string, - jobName: string): Observable; + jobName: string + ): Observable; getJobExecutions( teamName: string, jobName: string, @@ -196,7 +214,8 @@ export class DataJobsApiService { filter?: DataJobExecutionFilter, order?: DataJobExecutionOrder, pageNumber?: number, - pageSize?: number): Observable; + pageSize?: number + ): Observable; getJobExecutions( teamName: string, jobName: string, @@ -204,10 +223,14 @@ export class DataJobsApiService { filter: DataJobExecutionFilter = null, order: DataJobExecutionOrder = null, pageNumber: number = null, - pageSize: number = null): Observable | Observable { - + pageSize: number = null + ): + | Observable + | Observable { if (!forceGraphQL) { - return this.http.get(`/data-jobs/for-team/${ teamName }/jobs/${ jobName }/executions`); + return this.http.get( + `/data-jobs/for-team/${teamName}/jobs/${jobName}/executions` + ); } const preparedFilter = { ...(filter ?? {}) }; @@ -220,9 +243,10 @@ export class DataJobsApiService { } } - return this.dataJobsBaseService.getExecutions( - teamName, - `query jobsQuery($pageNumber: Int, $pageSize: Int, $filter: DataJobExecutionFilter, $order: DataJobExecutionOrder) + return this.dataJobsBaseService + .getExecutions( + teamName, + `query jobsQuery($pageNumber: Int, $pageSize: Int, $filter: DataJobExecutionFilter, $order: DataJobExecutionOrder) { executions(pageNumber: $pageNumber, pageSize: $pageSize, filter: $filter, order: $order) { content { @@ -258,40 +282,52 @@ export class DataJobsApiService { totalItems } }`, - { - pageNumber: pageNumber ?? 1, - pageSize: pageSize ?? 500, - filter: preparedFilter, - order: order ?? null - } - ).pipe( - map((response) => response.data) - ); + { + pageNumber: pageNumber ?? 1, + pageSize: pageSize ?? 500, + filter: preparedFilter, + order: order ?? null, + } + ) + .pipe(map((response) => response.data)); } - getJobExecution(teamName: string, jobName: string, executionId: string): Observable { - return this.http.get(`/data-jobs/for-team/${ teamName }/jobs/${ jobName }/executions/${ executionId }`); + getJobExecution( + teamName: string, + jobName: string, + executionId: string + ): Observable { + return this.http.get( + `/data-jobs/for-team/${teamName}/jobs/${jobName}/executions/${executionId}` + ); } - getJobDeployments(teamName: string, jobName: string): Observable { - return this.http.get(`/data-jobs/for-team/${ teamName }/jobs/${ jobName }/deployments`); + getJobDeployments( + teamName: string, + jobName: string + ): Observable { + return this.http.get( + `/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments` + ); } updateDataJobStatus( teamName: string, jobName: string, deploymentId: string, - dataJobEnabled: boolean): Observable<{ enabled: boolean }> { - + dataJobEnabled: boolean + ): Observable<{ enabled: boolean }> { const deploymentStatus = { enabled: dataJobEnabled }; if (!deploymentId) { - console.log(`Status update will be processed with default deploymentId`); + console.log( + `Status update will be processed with default deploymentId` + ); deploymentId = 'default'; } return this.http.patch<{ enabled: boolean }>( - `/data-jobs/for-team/${ teamName }/jobs/${ jobName }/deployments/${ deploymentId }`, + `/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments/${deploymentId}`, deploymentStatus ); } @@ -301,25 +337,43 @@ export class DataJobsApiService { jobName: string, dataJob: DataJobDetails ): Observable { - return this.http.put(`/data-jobs/for-team/${ teamName }/jobs/${ jobName }`, dataJob); + return this.http.put( + `/data-jobs/for-team/${teamName}/jobs/${jobName}`, + dataJob + ); } - executeDataJob(teamName: string, jobName: string, deploymentId: string): Observable { - return this.http.post(`/data-jobs/for-team/${ teamName }/jobs/${ jobName }/deployments/${ deploymentId }/executions`, {}); + executeDataJob( + teamName: string, + jobName: string, + deploymentId: string + ): Observable { + return this.http.post( + `/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments/${deploymentId}/executions`, + {} + ); } - cancelDataJobExecution(teamName: string, jobName: string, executionId: string): Observable { - return this.http.delete(`/data-jobs/for-team/${ teamName }/jobs/${ jobName }/executions/${ executionId }`); + cancelDataJobExecution( + teamName: string, + jobName: string, + executionId: string + ): Observable { + return this.http.delete( + `/data-jobs/for-team/${teamName}/jobs/${jobName}/executions/${executionId}` + ); } private _createTeamJobNameFilter(teamName: string, jobName: string) { return [ { property: 'config.team', pattern: teamName, sort: null }, - { property: 'jobName', pattern: jobName, sort: null } + { property: 'jobName', pattern: jobName, sort: null }, ]; } - private _validateModuleConfig(dataPipelinesModuleConfig: DataPipelinesConfig) { + private _validateModuleConfig( + dataPipelinesModuleConfig: DataPipelinesConfig + ) { if (!dataPipelinesModuleConfig?.defaultOwnerTeamName) { throw new Error(MISSING_DEFAULT_TEAM_MESSAGE); } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.service.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.service.spec.ts index e2d67c33f7..ec4e5255d7 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.service.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.service.spec.ts @@ -7,10 +7,24 @@ import { TestBed } from '@angular/core/testing'; import { Observable } from 'rxjs'; -import { ComponentModel, ComponentService, ComponentStateImpl, RouterState, RouteState } from '@vdk/shared'; - -import { FETCH_DATA_JOB, FETCH_DATA_JOB_EXECUTIONS, FETCH_DATA_JOBS, UPDATE_DATA_JOB } from '../state/actions'; -import { TASK_LOAD_JOB_EXECUTIONS, TASK_UPDATE_JOB_DESCRIPTION } from '../state/tasks'; +import { + ComponentModel, + ComponentService, + ComponentStateImpl, + RouterState, + RouteState, +} from '@vdk/shared'; + +import { + FETCH_DATA_JOB, + FETCH_DATA_JOB_EXECUTIONS, + FETCH_DATA_JOBS, + UPDATE_DATA_JOB, +} from '../state/actions'; +import { + TASK_LOAD_JOB_EXECUTIONS, + TASK_UPDATE_JOB_DESCRIPTION, +} from '../state/tasks'; import { DataJobsService, DataJobsServiceImpl } from './data-jobs.service'; @@ -20,16 +34,16 @@ describe('DataJobsService -> DataJobsServiceImpl', () => { let service: DataJobsService; beforeEach(() => { - componentServiceStub = jasmine.createSpyObj('componentService', [ - 'load', - 'dispatchAction' - ]); + componentServiceStub = jasmine.createSpyObj( + 'componentService', + ['load', 'dispatchAction'] + ); TestBed.configureTestingModule({ providers: [ { provide: ComponentService, useValue: componentServiceStub }, - { provide: DataJobsService, useClass: DataJobsServiceImpl } - ] + { provide: DataJobsService, useClass: DataJobsServiceImpl }, + ], }); service = TestBed.inject(DataJobsService); @@ -46,20 +60,24 @@ describe('DataJobsService -> DataJobsServiceImpl', () => { // Given const model = ComponentModel.of( ComponentStateImpl.of({ - id: 'test-component' + id: 'test-component', }), - RouterState.of( - RouteState.empty(), - 1 - ) + RouterState.of(RouteState.empty(), 1) ); // When service.loadJob(model); // Then - expect(componentServiceStub.load).toHaveBeenCalledWith(model.getComponentState()); - expect(componentServiceStub.dispatchAction).toHaveBeenCalledWith(FETCH_DATA_JOB, model.getComponentState()); + expect(componentServiceStub.load).toHaveBeenCalledWith( + model.getComponentState() + ); + expect( + componentServiceStub.dispatchAction + ).toHaveBeenCalledWith( + FETCH_DATA_JOB, + model.getComponentState() + ); }); }); @@ -68,20 +86,24 @@ describe('DataJobsService -> DataJobsServiceImpl', () => { // Given const model = ComponentModel.of( ComponentStateImpl.of({ - id: 'test-component' + id: 'test-component', }), - RouterState.of( - RouteState.empty(), - 1 - ) + RouterState.of(RouteState.empty(), 1) ); // When service.loadJobs(model); // Then - expect(componentServiceStub.load).toHaveBeenCalledWith(model.getComponentState()); - expect(componentServiceStub.dispatchAction).toHaveBeenCalledWith(FETCH_DATA_JOBS, model.getComponentState()); + expect(componentServiceStub.load).toHaveBeenCalledWith( + model.getComponentState() + ); + expect( + componentServiceStub.dispatchAction + ).toHaveBeenCalledWith( + FETCH_DATA_JOBS, + model.getComponentState() + ); }); }); @@ -90,21 +112,25 @@ describe('DataJobsService -> DataJobsServiceImpl', () => { // Given const model = ComponentModel.of( ComponentStateImpl.of({ - id: 'test-component' + id: 'test-component', }), - RouterState.of( - RouteState.empty(), - 1 - ) + RouterState.of(RouteState.empty(), 1) ); // When service.loadJobExecutions(model); // Then - expect(componentServiceStub.load).toHaveBeenCalledWith(model.getComponentState()); - expect(componentServiceStub.dispatchAction) - .toHaveBeenCalledWith(FETCH_DATA_JOB_EXECUTIONS, model.getComponentState(), TASK_LOAD_JOB_EXECUTIONS); + expect(componentServiceStub.load).toHaveBeenCalledWith( + model.getComponentState() + ); + expect( + componentServiceStub.dispatchAction + ).toHaveBeenCalledWith( + FETCH_DATA_JOB_EXECUTIONS, + model.getComponentState(), + TASK_LOAD_JOB_EXECUTIONS + ); }); }); @@ -113,21 +139,25 @@ describe('DataJobsService -> DataJobsServiceImpl', () => { // Given const model = ComponentModel.of( ComponentStateImpl.of({ - id: 'test-component' + id: 'test-component', }), - RouterState.of( - RouteState.empty(), - 1 - ) + RouterState.of(RouteState.empty(), 1) ); // When service.updateJob(model, TASK_UPDATE_JOB_DESCRIPTION); // Then - expect(componentServiceStub.load).toHaveBeenCalledWith(model.getComponentState()); - expect(componentServiceStub.dispatchAction) - .toHaveBeenCalledWith(UPDATE_DATA_JOB, model.getComponentState(), TASK_UPDATE_JOB_DESCRIPTION); + expect(componentServiceStub.load).toHaveBeenCalledWith( + model.getComponentState() + ); + expect( + componentServiceStub.dispatchAction + ).toHaveBeenCalledWith( + UPDATE_DATA_JOB, + model.getComponentState(), + TASK_UPDATE_JOB_DESCRIPTION + ); }); }); @@ -135,10 +165,14 @@ describe('DataJobsService -> DataJobsServiceImpl', () => { it('should verify will return Observable', () => { // Given // eslint-disable-next-line @typescript-eslint/dot-notation - const asObservableSpy = spyOn((service as DataJobsServiceImpl)['_runningJobExecutionId'], 'asObservable').and.callThrough(); + const asObservableSpy = spyOn( + (service as DataJobsServiceImpl)['_runningJobExecutionId'], + 'asObservable' + ).and.callThrough(); // When - const observable = service.getNotifiedForRunningJobExecutionId(); + const observable = + service.getNotifiedForRunningJobExecutionId(); // Then expect(observable).toBeInstanceOf(Observable); @@ -150,7 +184,10 @@ describe('DataJobsService -> DataJobsServiceImpl', () => { it('should verify will notify correct Subject', () => { // Given // eslint-disable-next-line @typescript-eslint/dot-notation - const nextSpy = spyOn((service as DataJobsServiceImpl)['_runningJobExecutionId'], 'next').and.callThrough(); + const nextSpy = spyOn( + (service as DataJobsServiceImpl)['_runningJobExecutionId'], + 'next' + ).and.callThrough(); // When service.notifyForRunningJobExecutionId('xy'); @@ -164,7 +201,10 @@ describe('DataJobsService -> DataJobsServiceImpl', () => { it('should verify will return Observable', () => { // Given // eslint-disable-next-line @typescript-eslint/dot-notation - const asObservableSpy = spyOn((service as DataJobsServiceImpl)['_jobExecutions'], 'asObservable').and.callThrough(); + const asObservableSpy = spyOn( + (service as DataJobsServiceImpl)['_jobExecutions'], + 'asObservable' + ).and.callThrough(); // When const observable = service.getNotifiedForJobExecutions(); @@ -179,7 +219,10 @@ describe('DataJobsService -> DataJobsServiceImpl', () => { it('should verify will notify correct Subject', () => { // Given // eslint-disable-next-line @typescript-eslint/dot-notation - const nextSpy = spyOn((service as DataJobsServiceImpl)['_jobExecutions'], 'next').and.callThrough(); + const nextSpy = spyOn( + (service as DataJobsServiceImpl)['_jobExecutions'], + 'next' + ).and.callThrough(); // When service.notifyForJobExecutions([null]); @@ -193,7 +236,10 @@ describe('DataJobsService -> DataJobsServiceImpl', () => { it('should verify will return Observable', () => { // Given // eslint-disable-next-line @typescript-eslint/dot-notation - const asObservableSpy = spyOn((service as DataJobsServiceImpl)['_implicitTeam'], 'asObservable').and.callThrough(); + const asObservableSpy = spyOn( + (service as DataJobsServiceImpl)['_implicitTeam'], + 'asObservable' + ).and.callThrough(); // When const observable = service.getNotifiedForTeamImplicitly(); @@ -208,7 +254,10 @@ describe('DataJobsService -> DataJobsServiceImpl', () => { it('should verify will notify correct BehaviorSubject', () => { // Given // eslint-disable-next-line @typescript-eslint/dot-notation - const nextSpy = spyOn((service as DataJobsServiceImpl)['_implicitTeam'], 'next').and.callThrough(); + const nextSpy = spyOn( + (service as DataJobsServiceImpl)['_implicitTeam'], + 'next' + ).and.callThrough(); // When service.notifyForTeamImplicitly('teamZero'); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.service.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.service.ts index 2b54581bd0..aabb8d6bba 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.service.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.service.ts @@ -11,7 +11,12 @@ import { BehaviorSubject, Observable, Subject } from 'rxjs'; import { ComponentModel, ComponentService } from '@vdk/shared'; -import { FETCH_DATA_JOB, FETCH_DATA_JOB_EXECUTIONS, FETCH_DATA_JOBS, UPDATE_DATA_JOB } from '../state/actions'; +import { + FETCH_DATA_JOB, + FETCH_DATA_JOB_EXECUTIONS, + FETCH_DATA_JOBS, + UPDATE_DATA_JOB, +} from '../state/actions'; import { DataJobUpdateTasks, TASK_LOAD_JOB_EXECUTIONS } from '../state/tasks'; import { DataJobExecutions } from '../model'; @@ -90,12 +95,18 @@ export class DataJobsServiceImpl extends DataJobsService { */ loadJobs(model: ComponentModel): void { this.componentService.load(model.getComponentState()); - this.componentService.dispatchAction(FETCH_DATA_JOBS, model.getComponentState()); + this.componentService.dispatchAction( + FETCH_DATA_JOBS, + model.getComponentState() + ); } loadJob(model: ComponentModel): void { this.componentService.load(model.getComponentState()); - this.componentService.dispatchAction(FETCH_DATA_JOB, model.getComponentState()); + this.componentService.dispatchAction( + FETCH_DATA_JOB, + model.getComponentState() + ); } /** @@ -103,7 +114,11 @@ export class DataJobsServiceImpl extends DataJobsService { */ loadJobExecutions(model: ComponentModel): void { this.componentService.load(model.getComponentState()); - this.componentService.dispatchAction(FETCH_DATA_JOB_EXECUTIONS, model.getComponentState(), TASK_LOAD_JOB_EXECUTIONS); + this.componentService.dispatchAction( + FETCH_DATA_JOB_EXECUTIONS, + model.getComponentState(), + TASK_LOAD_JOB_EXECUTIONS + ); } /** @@ -111,7 +126,11 @@ export class DataJobsServiceImpl extends DataJobsService { */ updateJob(model: ComponentModel, task: DataJobUpdateTasks): void { this.componentService.load(model.getComponentState()); - this.componentService.dispatchAction(UPDATE_DATA_JOB, model.getComponentState(), task); + this.componentService.dispatchAction( + UPDATE_DATA_JOB, + model.getComponentState(), + task + ); } /** diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.html index cd5aa5605f..a8ef049ced 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.html @@ -3,22 +3,43 @@ ~ SPDX-License-Identifier: Apache-2.0 --> - +

    {{ options.title }}

    - + - - +
    - - + +
    diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.scss index 66cac016db..78b1c10d22 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.scss @@ -4,18 +4,17 @@ */ .schema-confirm-to-prod { - .modal-title { - margin-bottom: .5rem; - } + .modal-title { + margin-bottom: 0.5rem; + } - .signpostBtn { - height: 0rem; + .signpostBtn { + height: 0rem; - .btn-info { - margin-top: -.65rem; - border: 0; - height: 1.2rem; + .btn-info { + margin-top: -0.65rem; + border: 0; + height: 1.2rem; + } } - } - } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.spec.ts index 74a4b86d39..3aa297f21e 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.spec.ts @@ -12,11 +12,8 @@ describe('ConfirmationDialogModalComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ - ConfirmationDialogModalComponent - ] - }) - .compileComponents(); + declarations: [ConfirmationDialogModalComponent], + }).compileComponents(); }); beforeEach(() => { diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.ts index 14878bdcdc..641ecca6cc 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.ts @@ -10,10 +10,9 @@ import { ModalComponentDirective } from '../modal/modal.component'; @Component({ selector: 'lib-confirmation-dialog-modal', templateUrl: './confirmation-dialog-modal.component.html', - styleUrls: ['./confirmation-dialog-modal.component.scss'] + styleUrls: ['./confirmation-dialog-modal.component.scss'], }) export class ConfirmationDialogModalComponent extends ModalComponentDirective { - @Input() confirmationInput: string; @Output() changeStatus: EventEmitter = new EventEmitter(); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.html index f0830bc11b..18ea69f52c 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.html @@ -6,22 +6,33 @@ - + - + diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.scss index 9a1a8a5ae5..5e3c3f41eb 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.scss @@ -1,14 +1,13 @@ - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 */ .datagrid-filter { - outline: none; - - .close { outline: none; - box-shadow: none; - } + + .close { + outline: none; + box-shadow: none; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.spec.ts index 2ed9fc194b..7046b2ff6d 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.spec.ts @@ -17,14 +17,15 @@ describe('ColumnFilterComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [ColumnFilterComponent], - providers: [{ - provide: ClrDatagridFilter, - useFactory: () => ({ - setFilter: () => ({}) - }) - }] - }) - .compileComponents(); + providers: [ + { + provide: ClrDatagridFilter, + useFactory: () => ({ + setFilter: () => ({}), + }), + }, + ], + }).compileComponents(); }); beforeEach(() => { @@ -39,7 +40,9 @@ describe('ColumnFilterComponent', () => { describe('toggle selection', () => { it('change value', () => { - component.toggleSelection({ target: ({ value: TEST_VALUE } as unknown) as EventTarget } as Event); + component.toggleSelection({ + target: { value: TEST_VALUE } as unknown as EventTarget, + } as Event); expect(component.value).toBe(TEST_VALUE); }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.ts index c44b459396..fe4ec578f1 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.ts @@ -3,7 +3,16 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { + Component, + EventEmitter, + Input, + OnChanges, + Output, + SimpleChanges, + TemplateRef, + ViewEncapsulation, +} from '@angular/core'; import { Observable, Subject } from 'rxjs'; @@ -15,10 +24,11 @@ import { DataJob } from '../../../../model'; selector: 'lib-column-filter', templateUrl: './column-filter.component.html', styleUrls: ['./column-filter.component.scss'], - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, }) -export class ColumnFilterComponent implements ClrDatagridFilterInterface, OnChanges { - +export class ColumnFilterComponent + implements ClrDatagridFilterInterface, OnChanges +{ @Input() property: string; @Input() listOfOptions: string[]; @Input() isExecutionStatus = false; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.html index 389fbea63e..c36998d92b 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.html @@ -5,79 +5,93 @@
    - - - - -
    - +
    - +
    diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.scss index bbecc07688..2f30b2b596 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.scss @@ -4,85 +4,85 @@ */ .grid-actions-container { - display: flex; - justify-content: space-between; - align-content: center; - flex-direction: row; - margin-top: 20px; - min-height: 1.5rem; + display: flex; + justify-content: space-between; + align-content: center; + flex-direction: row; + margin-top: 20px; + min-height: 1.5rem; - .btn-actions-container { - .btn { - margin: .25rem 0; - padding: 0 .5rem; + .btn-actions-container { + .btn { + margin: 0.25rem 0; + padding: 0 0.5rem; + } } - } - > .btn-actions-container { - button { - &:first-child { - padding-left: 0; - } + > .btn-actions-container { + button { + &:first-child { + padding-left: 0; + } + } } - } - .btn-filters-container { - display: flex; - flex-grow: 1; - justify-content: flex-end; - } + .btn-filters-container { + display: flex; + flex-grow: 1; + justify-content: flex-end; + } - .btn-search-container { - display: inline-flex; + .btn-search-container { + display: inline-flex; - .search-container { - display: inline-flex; - margin: 0 !important; - transform: translateY(0.15rem); + .search-container { + display: inline-flex; + margin: 0 !important; + transform: translateY(0.15rem); - input { - &.clr-input { - padding-top: 2px; + input { + &.clr-input { + padding-top: 2px; + } + } } - } } - } - .tooltip-content { - text-transform: initial; - font-size: 11px !important; - } + .tooltip-content { + text-transform: initial; + font-size: 11px !important; + } - > * { - margin-right: 1rem; + > * { + margin-right: 1rem; - &:last-child { - margin-right: 0; + &:last-child { + margin-right: 0; + } } - } } .custom-buttons { - .btn { - &:not(.custom-btn) { - margin: initial !important; - padding: initial !important; + .btn { + &:not(.custom-btn) { + margin: initial !important; + padding: initial !important; + } } - } } .btn { - &.btn-link { - &.btn-link-red { - color: #e62700; + &.btn-link { + &.btn-link-red { + color: #e62700; - &:hover { - color: #a32100; - } + &:hover { + color: #a32100; + } - &:disabled { - color: #565656; - } + &:disabled { + color: #565656; + } + } } - } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.spec.ts index 01367abc2e..3b78af3b0f 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.spec.ts @@ -14,7 +14,7 @@ describe('GridActionComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ schemas: [NO_ERRORS_SCHEMA], - declarations: [GridActionComponent] + declarations: [GridActionComponent], }); fixture = TestBed.createComponent(GridActionComponent); component = fixture.componentInstance; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.ts index 84d7f63cb5..af20ee3d53 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.ts @@ -3,7 +3,16 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { AfterViewInit, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core'; +import { + AfterViewInit, + Component, + EventEmitter, + Input, + OnChanges, + Output, + SimpleChanges, + ViewEncapsulation, +} from '@angular/core'; import { CollectionsUtil } from '@vdk/shared'; @@ -13,10 +22,9 @@ import { QuickFilterChangeEvent, QuickFilters } from '../../quick-filters'; selector: 'lib-grid-action', templateUrl: './grid-action.component.html', styleUrls: ['./grid-action.component.scss'], - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, }) export class GridActionComponent implements AfterViewInit, OnChanges { - @Input() id = 'lib-ga-search-id'; @Input() addId = 'lib-ga-add-id'; @Input() editId = 'lib-ga-edit-id'; @@ -69,9 +77,12 @@ export class GridActionComponent implements AfterViewInit, OnChanges { } get editDisabled(): boolean { - return CollectionsUtil.isNil(this.selectedValue) || - (CollectionsUtil.isString(this.selectedValue) && this.selectedValue.length === 0) || - this.disableEdit; + return ( + CollectionsUtil.isNil(this.selectedValue) || + (CollectionsUtil.isString(this.selectedValue) && + this.selectedValue.length === 0) || + this.disableEdit + ); } get addDisabled(): boolean { @@ -79,9 +90,12 @@ export class GridActionComponent implements AfterViewInit, OnChanges { } get removeDisabled(): boolean { - return CollectionsUtil.isNil(this.selectedValue) || - (CollectionsUtil.isString(this.selectedValue) && this.selectedValue.length === 0) || - this.disableRemove; + return ( + CollectionsUtil.isNil(this.selectedValue) || + (CollectionsUtil.isString(this.selectedValue) && + this.selectedValue.length === 0) || + this.disableRemove + ); } /** diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.html index 00e2a1c087..33a394c09a 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.html @@ -3,24 +3,45 @@ ~ SPDX-License-Identifier: Apache-2.0 --> - +

    - + - - +
    - - + +
    diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.spec.ts index be6b5a4e90..3dcf98ee84 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.spec.ts @@ -14,7 +14,7 @@ describe('DeleteModalComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ schemas: [NO_ERRORS_SCHEMA], - declarations: [DeleteModalComponent] + declarations: [DeleteModalComponent], }); fixture = TestBed.createComponent(DeleteModalComponent); component = fixture.componentInstance; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.ts index 0eb741b6f3..086f5856ba 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.ts @@ -12,10 +12,9 @@ import { ModalComponentDirective } from '../modal'; @Component({ selector: 'lib-delete-modal', templateUrl: './delete-modal.component.html', - styleUrls: ['./delete-modal.component.css'] + styleUrls: ['./delete-modal.component.css'], }) export class DeleteModalComponent extends ModalComponentDirective { - @Output() delete: EventEmitter = new EventEmitter(); constructor() { diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.html index a89d7574a7..fbeea4e348 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.html @@ -20,10 +20,10 @@ /> - diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.scss index 0129a49763..6cef8856b2 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.scss @@ -4,20 +4,19 @@ */ .empty-state-container { + vdk-empty-state-placeholder { + text-align: center; + ::ng-deep h2 { + font-size: 18px !important; + font-weight: 500; + margin-top: 0.1rem !important; + line-height: 1rem; + } - vdk-empty-state-placeholder { - text-align: center; - ::ng-deep h2 { - font-size: 18px !important; - font-weight: 500; - margin-top: .1rem !important; - line-height: 1rem; + ::ng-deep h3 { + font-size: 13px !important; + line-height: 1rem; + margin-top: 0.3rem; + } } - - ::ng-deep h3 { - font-size: 13px !important; - line-height: 1rem; - margin-top: .3rem; - } - } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.spec.ts index e5d1a45e05..265f95e8ec 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.spec.ts @@ -17,13 +17,11 @@ describe('EmptyStateComponent', () => { let component: EmptyStateComponent; let fixture: ComponentFixture; - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [EmptyStateComponent] - }).compileComponents(); - }) - ); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [EmptyStateComponent], + }).compileComponents(); + })); beforeEach(() => { fixture = TestBed.createComponent(EmptyStateComponent); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.ts index 0582212286..6b96ee8a46 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.ts @@ -8,18 +8,19 @@ import { Component, Input } from '@angular/core'; @Component({ - selector: 'lib-empty-state', - templateUrl: './empty-state.component.html', - styleUrls: ['./empty-state.component.scss'] + selector: 'lib-empty-state', + templateUrl: './empty-state.component.html', + styleUrls: ['./empty-state.component.scss'], }) export class EmptyStateComponent { - @Input() title = 'Empty State'; - @Input() description = 'Description'; - @Input() width = 256; - @Input() imgSrc: string; - @Input() hideImage = false; - @Input() opacity = 1; - @Input() animSrc = 'assets/animations/no-events-in-timeframe-animation.json'; - @Input() marginTop = '3rem'; - @Input() marginBottom = '20px'; + @Input() title = 'Empty State'; + @Input() description = 'Description'; + @Input() width = 256; + @Input() imgSrc: string; + @Input() hideImage = false; + @Input() opacity = 1; + @Input() animSrc = + 'assets/animations/no-events-in-timeframe-animation.json'; + @Input() marginTop = '3rem'; + @Input() marginBottom = '20px'; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.html index dce978e2a3..b5699a680d 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.html @@ -6,95 +6,151 @@
      -
    • + [attr.data-cy]="execution.id" + > +
      -
      - - - Executing... + + Executing... - - - - - + aria-label="Failed execution" + > + + + + +
      - - {{(execution.status ? execution.status.replace('_', ' ') : execution.status) | titlecase}} + {{ + (execution.status + ? execution.status.replace("_", " ") + : execution.status + ) | titlecase + }}
      Duration: - {{execution | formatDelta}} + {{ execution | formatDelta }}
      -
      - - - +
      + + Logs
      - Manual + Manual
    • -
      +
      Scheduled - {{ next | date: 'MMM d, y, hh:mm a':'UTC' }} UTC + {{ next | date: "MMM d, y, hh:mm a":"UTC" }} UTC
    diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.scss index d32c614eff..07cb143748 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.scss @@ -3,46 +3,46 @@ * SPDX-License-Identifier: Apache-2.0 */ -.clr-timeline-step clr-icon[shape=success-standard] { - color: var(--clr-timeline-success-step-color, #5eb715); +.clr-timeline-step clr-icon[shape="success-standard"] { + color: var(--clr-timeline-success-step-color, #5eb715); } -.clr-timeline-step clr-icon[shape=error-standard] { - color: var(--clr-timeline-error-step-color, #c21d00); +.clr-timeline-step clr-icon[shape="error-standard"] { + color: var(--clr-timeline-error-step-color, #c21d00); } .clr-timeline-step clr-icon { - height: 1.8rem; - width: 1.8rem; - min-height: 1.8rem; - min-width: 1.8rem; + height: 1.8rem; + width: 1.8rem; + min-height: 1.8rem; + min-width: 1.8rem; } .clr-timeline-horizontal { - padding-top: 35px; + padding-top: 35px; } .manual-execution-label { - margin-top: 5px; + margin-top: 5px; } .clr-timeline { - .clr-timeline__step-header--underline-dotted { - text-decoration: underline; - text-decoration-style: dotted; - } - - .clr-timeline__log-link { - min-height: 0 !important; - min-width: 0 !important; - } - - .clr-timeline__element--display-block { - display: block; - } - - .clr-timeline__duration-tag { - font-weight: bold; - text-decoration: underline; - } + .clr-timeline__step-header--underline-dotted { + text-decoration: underline; + text-decoration-style: dotted; + } + + .clr-timeline__log-link { + min-height: 0 !important; + min-width: 0 !important; + } + + .clr-timeline__element--display-block { + display: block; + } + + .clr-timeline__duration-tag { + font-weight: bold; + text-decoration: underline; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.spec.ts index ca2105a681..e2485031c4 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.spec.ts @@ -7,7 +7,11 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ExecutionsTimelineComponent } from './executions-timeline.component'; -import { DATA_PIPELINES_CONFIGS, DataJobExecution, DataJobExecutionType } from '../../../model'; +import { + DATA_PIPELINES_CONFIGS, + DataJobExecution, + DataJobExecutionType, +} from '../../../model'; describe('ExecutionsTimelineComponent', () => { let component: ExecutionsTimelineComponent; @@ -23,14 +27,13 @@ describe('ExecutionsTimelineComponent', () => { defaultOwnerTeamName: 'all', manageConfig: { allowKeyTabDownloads: true, - allowExecuteNow: true + allowExecuteNow: true, }, - healthStatusUrl: 'baseUrl' - }) - } - ] - }) - .compileComponents(); + healthStatusUrl: 'baseUrl', + }), + }, + ], + }).compileComponents(); }); beforeEach(() => { @@ -46,21 +49,29 @@ describe('ExecutionsTimelineComponent', () => { it('should create', () => { const mockExec = { /* eslint-disable-next-line @typescript-eslint/naming-convention */ - startedBy: 'manual/auser' + startedBy: 'manual/auser', } as DataJobExecution; - expect(component.getManualExecutedByTitle(mockExec)).toBe(ExecutionsTimelineComponent.manualRunKnownUser + ' auser'); + expect(component.getManualExecutedByTitle(mockExec)).toBe( + ExecutionsTimelineComponent.manualRunKnownUser + ' auser' + ); mockExec.startedBy = 'manual/manual'; mockExec.type = DataJobExecutionType.MANUAL; - expect(component.getManualExecutedByTitle(mockExec)).toBe(ExecutionsTimelineComponent.manualRunKnownUser + ' manual'); + expect(component.getManualExecutedByTitle(mockExec)).toBe( + ExecutionsTimelineComponent.manualRunKnownUser + ' manual' + ); mockExec.startedBy = 'scheduled/runtime'; mockExec.type = DataJobExecutionType.SCHEDULED; - expect(component.getManualExecutedByTitle(mockExec)).toContain(ExecutionsTimelineComponent.manualRunNoUser); + expect(component.getManualExecutedByTitle(mockExec)).toContain( + ExecutionsTimelineComponent.manualRunNoUser + ); mockExec.startedBy = 'scheduled/runtime'; mockExec.type = null; - expect(component.getManualExecutedByTitle(mockExec)).toContain(ExecutionsTimelineComponent.manualRunNoUser); + expect(component.getManualExecutedByTitle(mockExec)).toContain( + ExecutionsTimelineComponent.manualRunNoUser + ); }); describe('Methods::', () => { diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.ts index 779a69b378..0c7f229a26 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.ts @@ -3,7 +3,12 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ChangeDetectionStrategy, Component, Inject, Input } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + Inject, + Input, +} from '@angular/core'; import { DATA_PIPELINES_CONFIGS, @@ -11,32 +16,35 @@ import { DataJobExecutions, DataJobExecutionStatus, DataJobExecutionType, - DataPipelinesConfig + DataPipelinesConfig, } from '../../../model'; @Component({ selector: 'lib-executions-timeline', templateUrl: './executions-timeline.component.html', styleUrls: ['./executions-timeline.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, }) export class ExecutionsTimelineComponent { static manualRunKnownUser = 'This job is triggered manually by user'; - static manualRunNoUser = 'This job is triggered manually, but there is no info about the user'; + static manualRunNoUser = + 'This job is triggered manually, but there is no info about the user'; @Input() jobExecutions: DataJobExecutions = []; @Input() next: Date = null; dataJobExecutionStatus = DataJobExecutionStatus; - constructor(@Inject(DATA_PIPELINES_CONFIGS) public dataPipelinesModuleConfig: DataPipelinesConfig) { - } + constructor( + @Inject(DATA_PIPELINES_CONFIGS) + public dataPipelinesModuleConfig: DataPipelinesConfig + ) {} /** * ** NgFor elements tracking function. */ trackByFn(index: number, execution: DataJobExecution): string { - return `${ index }|${ execution.id }`; + return `${index}|${execution.id}`; } isExecutionManual(execution: DataJobExecution): boolean { @@ -44,13 +52,17 @@ export class ExecutionsTimelineComponent { } getManualExecutedByTitle(execution: DataJobExecution): string { - if (!execution || !execution.startedBy || !execution.startedBy.startsWith('manual/')) { + if ( + !execution || + !execution.startedBy || + !execution.startedBy.startsWith('manual/') + ) { // execution has no info abot user provided return ExecutionsTimelineComponent.manualRunNoUser; } const user = execution.startedBy.replace('manual/', ''); - return `${ ExecutionsTimelineComponent.manualRunKnownUser } ${ user }`; + return `${ExecutionsTimelineComponent.manualRunKnownUser} ${user}`; } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/modal/modal.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/modal/modal.component.ts index 7b0b9dd746..9410e4e51e 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/modal/modal.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/modal/modal.component.ts @@ -13,9 +13,11 @@ import { ModalOptions } from '../../model'; export abstract class ModalComponentDirective extends TaurusObject { @Input() options: ModalOptions; - @Output() optionsChange: EventEmitter = new EventEmitter(); + @Output() optionsChange: EventEmitter = + new EventEmitter(); - @Output() cancelAction: EventEmitter = new EventEmitter(); + @Output() cancelAction: EventEmitter = + new EventEmitter(); constructor() { super(); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.html index 13ef2940d8..cf8ff2a740 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.html @@ -3,32 +3,31 @@ ~ SPDX-License-Identifier: Apache-2.0 --> -
    - -
    +
    +
    QUICK FILTERS:
    -
    - - +
    + + - - - {{filter.label}} + {{ filter.label }} -
    diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.scss index 33c00741ac..f51aac55d3 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.scss @@ -4,34 +4,34 @@ */ :host { - display: flex; - align-items: center; + display: flex; + align-items: center; } .quick-filters { - display: flex; + display: flex; - .quick-filters__title { - display: inline-flex; - font-size: var(--clr-btn-appearance-standard-font-size, 0.55rem); - text-transform: uppercase; - align-items: center; - margin-right: 0.25rem; - white-space: nowrap; - } + .quick-filters__title { + display: inline-flex; + font-size: var(--clr-btn-appearance-standard-font-size, 0.55rem); + text-transform: uppercase; + align-items: center; + margin-right: 0.25rem; + white-space: nowrap; + } - .quick-filters__list { - display: inline-flex; - align-items: center; + .quick-filters__list { + display: inline-flex; + align-items: center; - .quick-filters__list-item { - margin: 0 0 0 0.3rem; - cursor: pointer; - } + .quick-filters__list-item { + margin: 0 0 0 0.3rem; + cursor: pointer; + } - .label-light-blue { - border: 1px solid #4474b9; - background-color: rgb(177, 208, 255); + .label-light-blue { + border: 1px solid #4474b9; + background-color: rgb(177, 208, 255); + } } - } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.spec.ts index 1ffed7d1e0..b56beb418f 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.spec.ts @@ -13,9 +13,8 @@ describe('QuickFiltersComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [QuickFiltersComponent] - }) - .compileComponents(); + declarations: [QuickFiltersComponent], + }).compileComponents(); }); beforeEach(() => { diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.ts index 55fc3cc197..84bd05fc26 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.ts @@ -3,7 +3,14 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; +import { + Component, + EventEmitter, + Input, + OnChanges, + Output, + SimpleChanges, +} from '@angular/core'; import { CollectionsUtil } from '@vdk/shared'; @@ -12,16 +19,14 @@ import { QuickFilter, QuickFilterChangeEvent, QuickFilters } from './model'; @Component({ selector: 'lib-quick-filters', templateUrl: './quick-filters.component.html', - styleUrls: ['./quick-filters.component.scss'] + styleUrls: ['./quick-filters.component.scss'], }) export class QuickFiltersComponent implements OnChanges { /** * ** Quick Filters array config. */ @Input() set quickFilters(filters: QuickFilters) { - this._quickFilters = CollectionsUtil.isArray(filters) - ? filters - : []; + this._quickFilters = CollectionsUtil.isArray(filters) ? filters : []; } get quickFilters(): QuickFilters { @@ -58,7 +63,7 @@ export class QuickFiltersComponent implements OnChanges { * ** NgFor elements tracking function. */ trackByFn(index: number, filter: QuickFilter): string { - return `${ index }|${ filter.id }`; + return `${index}|${filter.id}`; } /** @@ -69,10 +74,11 @@ export class QuickFiltersComponent implements OnChanges { */ changeFilter(filter: QuickFilter): void { const executeOnDeactivate = (dFilter: QuickFilter) => { - if (this.suppressQuickFilterChangeEvent - && CollectionsUtil.isDefined(dFilter) - && CollectionsUtil.isFunction(dFilter.onDeactivate)) { - + if ( + this.suppressQuickFilterChangeEvent && + CollectionsUtil.isDefined(dFilter) && + CollectionsUtil.isFunction(dFilter.onDeactivate) + ) { dFilter.onDeactivate(); } }; @@ -90,17 +96,20 @@ export class QuickFiltersComponent implements OnChanges { } if (this.suppressQuickFilterChangeEvent) { - if (CollectionsUtil.isDefined(this.activatedFilter) - && CollectionsUtil.isFunction(this.activatedFilter.onActivate)) { - + if ( + CollectionsUtil.isDefined(this.activatedFilter) && + CollectionsUtil.isFunction(this.activatedFilter.onActivate) + ) { this.activatedFilter.onActivate(); } else { - console.warn('QuickFiltersComponent: No listener for onActivate callback while Event Emitter is suppressed.'); + console.warn( + 'QuickFiltersComponent: No listener for onActivate callback while Event Emitter is suppressed.' + ); } } else { this.quickFilterChange.emit({ activatedFilter: this.activatedFilter, - deactivatedFilter: this._deactivatedFilter + deactivatedFilter: this._deactivatedFilter, }); } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-cell/status-cell.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-cell/status-cell.component.html index 258cc99ef4..5b175501e1 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-cell/status-cell.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-cell/status-cell.component.html @@ -3,27 +3,45 @@ ~ SPDX-License-Identifier: Apache-2.0 --> -
    -
    - +
    -
    +

    Widgets

    -
    +
    - +
    diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/app/getting-started/getting-started.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/ui/src/app/getting-started/getting-started.component.spec.ts index 5619096035..1de8b20972 100644 --- a/projects/frontend/data-pipelines/gui/projects/ui/src/app/getting-started/getting-started.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/ui/src/app/getting-started/getting-started.component.spec.ts @@ -15,9 +15,8 @@ describe('GettingStartedComponent', () => { TestBed.configureTestingModule({ declarations: [GettingStartedComponent], providers: [OAuthService], - imports: [] - }) - .compileComponents(); + imports: [], + }).compileComponents(); })); beforeEach(() => { diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/app/getting-started/getting-started.component.ts b/projects/frontend/data-pipelines/gui/projects/ui/src/app/getting-started/getting-started.component.ts index 72f431654d..fbf90f95d3 100644 --- a/projects/frontend/data-pipelines/gui/projects/ui/src/app/getting-started/getting-started.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/ui/src/app/getting-started/getting-started.component.ts @@ -8,7 +8,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-getting-started', templateUrl: './getting-started.component.html', - styleUrls: ['./getting-started.component.scss'] + styleUrls: ['./getting-started.component.scss'], }) export class GettingStartedComponent { constructor() { diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/app/http.interceptor.ts b/projects/frontend/data-pipelines/gui/projects/ui/src/app/http.interceptor.ts index 2c09e92ae4..6301be4042 100644 --- a/projects/frontend/data-pipelines/gui/projects/ui/src/app/http.interceptor.ts +++ b/projects/frontend/data-pipelines/gui/projects/ui/src/app/http.interceptor.ts @@ -4,26 +4,37 @@ */ import { Injectable, Optional } from '@angular/core'; -import { OAuthModuleConfig, OAuthResourceServerErrorHandler, OAuthStorage } from 'angular-oauth2-oidc'; -import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http'; +import { + OAuthModuleConfig, + OAuthResourceServerErrorHandler, + OAuthStorage, +} from 'angular-oauth2-oidc'; +import { + HttpEvent, + HttpHandler, + HttpInterceptor, + HttpRequest, +} from '@angular/common/http'; import { Observable } from 'rxjs'; import { authCodeFlowConfig } from './auth'; @Injectable() export class AuthorizationInterceptor implements HttpInterceptor { - constructor( private authStorage: OAuthStorage, private errorHandler: OAuthResourceServerErrorHandler, - @Optional() private moduleConfig: OAuthModuleConfig) { - } + @Optional() private moduleConfig: OAuthModuleConfig + ) {} /** * @inheritDoc */ // eslint-disable-next-line @typescript-eslint/no-explicit-any - intercept(req: HttpRequest, next: HttpHandler): Observable> { + intercept( + req: HttpRequest, + next: HttpHandler + ): Observable> { const url = req.url.toLowerCase(); if (!this.moduleConfig) { return next.handle(req); @@ -41,18 +52,24 @@ export class AuthorizationInterceptor implements HttpInterceptor { return next.handle(req); } - const sendAccessToken = this.moduleConfig.resourceServer.sendAccessToken; + const sendAccessToken = + this.moduleConfig.resourceServer.sendAccessToken; - if (sendAccessToken && url.startsWith(authCodeFlowConfig.issuer) && url.endsWith('api/auth/token')) { - const headers = req.headers - .set('Authorization', 'Basic ' + btoa(authCodeFlowConfig.clientId + ':')); + if ( + sendAccessToken && + url.startsWith(authCodeFlowConfig.issuer) && + url.endsWith('api/auth/token') + ) { + const headers = req.headers.set( + 'Authorization', + 'Basic ' + btoa(authCodeFlowConfig.clientId + ':') + ); return next.handle(req.clone({ headers })); } else if (sendAccessToken) { const token = this.authStorage.getItem('access_token'); const header = `Bearer ${token}`; - const headers = req.headers - .set('Authorization', header); + const headers = req.headers.set('Authorization', header); return next.handle(req.clone({ headers })); } @@ -61,7 +78,9 @@ export class AuthorizationInterceptor implements HttpInterceptor { } private checkUrl(url: string): boolean { - const found = this.moduleConfig.resourceServer.allowedUrls.find(u => url.startsWith(u)); + const found = this.moduleConfig.resourceServer.allowedUrls.find((u) => + url.startsWith(u) + ); return !!found; } } diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/assets/css/clr-ui.min.css b/projects/frontend/data-pipelines/gui/projects/ui/src/assets/css/clr-ui.min.css index e5920bfbe3..a58b7318c2 100644 --- a/projects/frontend/data-pipelines/gui/projects/ui/src/assets/css/clr-ui.min.css +++ b/projects/frontend/data-pipelines/gui/projects/ui/src/assets/css/clr-ui.min.css @@ -10,14 +10,17591 @@ * * Clarity v@VERSION | MIT license | https://github.com/vmware/clarity * - *//*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:root{--clr-color-neutral-0:white;--clr-color-neutral-50:#fafafa;--clr-color-neutral-100:#f2f2f2;--clr-color-neutral-200:#e8e8e8;--clr-color-neutral-300:#dedede;--clr-color-neutral-400:#cccccc;--clr-color-neutral-500:#b3b3b3;--clr-color-neutral-600:#8c8c8c;--clr-color-neutral-700:#666666;--clr-color-neutral-800:#454545;--clr-color-neutral-900:#333333;--clr-color-neutral-1000:black;--clr-color-on-neutral-0:black;--clr-color-on-neutral-50:black;--clr-color-on-neutral-100:black;--clr-color-on-neutral-200:black;--clr-color-on-neutral-300:black;--clr-color-on-neutral-400:black;--clr-color-on-neutral-500:black;--clr-color-on-neutral-600:white;--clr-color-on-neutral-700:white;--clr-color-on-neutral-800:white;--clr-color-on-neutral-900:white;--clr-color-on-neutral-1000:white;--clr-color-action-50:#e3f5fc;--clr-color-action-100:#c8eaf9;--clr-color-action-200:#9bd8f3;--clr-color-action-300:#79c6e6;--clr-color-action-400:#49aeda;--clr-color-action-500:#179bd3;--clr-color-action-600:#0072a3;--clr-color-action-700:#00648f;--clr-color-action-800:#00567a;--clr-color-action-900:#004b6b;--clr-color-action-1000:#00364d;--clr-color-on-action-50:black;--clr-color-on-action-100:black;--clr-color-on-action-200:black;--clr-color-on-action-300:black;--clr-color-on-action-400:black;--clr-color-on-action-500:black;--clr-color-on-action-600:white;--clr-color-on-action-700:white;--clr-color-on-action-800:white;--clr-color-on-action-900:white;--clr-color-on-action-1000:white;--clr-color-secondary-action-50:#f7e6ff;--clr-color-secondary-action-100:#e6caf1;--clr-color-secondary-action-200:#d2aae4;--clr-color-secondary-action-300:#c090d5;--clr-color-secondary-action-400:#af73c9;--clr-color-secondary-action-500:#9e57bc;--clr-color-secondary-action-600:#8a39ac;--clr-color-secondary-action-700:#781d9f;--clr-color-secondary-action-800:#680094;--clr-color-secondary-action-900:#4f0070;--clr-color-secondary-action-1000:#320047;--clr-color-on-secondary-action-50:black;--clr-color-on-secondary-action-100:black;--clr-color-on-secondary-action-200:black;--clr-color-on-secondary-action-300:black;--clr-color-on-secondary-action-400:black;--clr-color-on-secondary-action-500:white;--clr-color-on-secondary-action-600:white;--clr-color-on-secondary-action-700:white;--clr-color-on-secondary-action-800:white;--clr-color-on-secondary-action-900:white;--clr-color-on-secondary-action-1000:white;--clr-color-danger-50:#fff2f0;--clr-color-danger-100:#feddd7;--clr-color-danger-200:#fcc5bb;--clr-color-danger-300:#f59e8f;--clr-color-danger-400:#f27963;--clr-color-danger-500:#f35e44;--clr-color-danger-600:#f52d0a;--clr-color-danger-700:#db2100;--clr-color-danger-800:#c21d00;--clr-color-danger-900:#991700;--clr-color-danger-1000:#660f00;--clr-color-on-danger-50:black;--clr-color-on-danger-100:black;--clr-color-on-danger-200:black;--clr-color-on-danger-300:black;--clr-color-on-danger-400:black;--clr-color-on-danger-500:black;--clr-color-on-danger-600:black;--clr-color-on-danger-700:white;--clr-color-on-danger-800:white;--clr-color-on-danger-900:white;--clr-color-on-danger-1000:white;--clr-color-warning-50:#fffae6;--clr-color-warning-100:#fff4c7;--clr-color-warning-200:#ffeea8;--clr-color-warning-300:#fee272;--clr-color-warning-400:#f8cf2a;--clr-color-warning-500:#efc006;--clr-color-warning-600:#e6b000;--clr-color-warning-700:#d69a00;--clr-color-warning-800:#ad7600;--clr-color-warning-900:#8f5a00;--clr-color-warning-1000:#613200;--clr-color-on-warning-50:black;--clr-color-on-warning-100:black;--clr-color-on-warning-200:black;--clr-color-on-warning-300:black;--clr-color-on-warning-400:black;--clr-color-on-warning-500:black;--clr-color-on-warning-600:black;--clr-color-on-warning-700:black;--clr-color-on-warning-800:black;--clr-color-on-warning-900:black;--clr-color-on-warning-1000:white;--clr-color-success-50:#dff0d0;--clr-color-success-100:#bce49a;--clr-color-success-200:#73dc1e;--clr-color-success-300:#68c71a;--clr-color-success-400:#5eb715;--clr-color-success-500:#5aa220;--clr-color-success-600:#4b970c;--clr-color-success-700:#3c8500;--clr-color-success-800:#306b00;--clr-color-success-900:#255200;--clr-color-success-1000:#1e4200;--clr-color-on-success-50:black;--clr-color-on-success-100:black;--clr-color-on-success-200:black;--clr-color-on-success-300:black;--clr-color-on-success-400:black;--clr-color-on-success-500:black;--clr-color-on-success-600:black;--clr-color-on-success-700:white;--clr-color-on-success-800:white;--clr-color-on-success-900:white;--clr-color-on-success-1000:white}:root{--clr-global-borderradius:0.15rem;--clr-global-borderwidth:0.05rem;--clr-global-app-background:#fafafa;--clr-global-selection-color:#d8e3e9;--clr-global-on-selection-color:black;--clr-global-hover-color:#e8e8e8;--clr-global-content-header-font-color:black;--clr-global-font-color:#666666;--clr-global-success-color:#5aa220;--clr-global-error-color:#c21d00;--clr-close-color--normal:#8c8c8c;--clr-close-color--normal-opacity:0.2;--clr-close-color--hover:black;--clr-close-color--hover-opacity:0.5;--clr-popover-box-shadow-color:rgba(140, 140, 140, 0.25)}:root{--clr-font:Metropolis,Avenir Next,Helvetica Neue,Arial,sans-serif;--clr-display-font:var(--clr-font);--clr-font-weight-light:200;--clr-font-weight-regular:400;--clr-font-weight-semibold:500;--clr-font-weight-bold:600;--clr-font-weight-extrabold:600;--clr-h1-color:var(--clr-global-content-header-font-color);--clr-h1-font-weight:var(--clr-font-weight-light);--clr-h1-font-family:var(--clr-display-font);--clr-h2-color:var(--clr-global-content-header-font-color);--clr-h2-font-weight:var(--clr-font-weight-light);--clr-h2-font-family:var(--clr-display-font);--clr-h3-color:var(--clr-global-content-header-font-color);--clr-h3-font-weight:var(--clr-font-weight-light);--clr-h3-font-family:var(--clr-display-font);--clr-h4-color:var(--clr-global-content-header-font-color);--clr-h4-font-weight:var(--clr-font-weight-light);--clr-h4-font-family:var(--clr-display-font);--clr-h5-color:var(--clr-global-font-color);--clr-h5-font-weight:var(--clr-font-weight-regular);--clr-h5-font-family:var(--clr-display-font);--clr-h6-color:var(--clr-color-neutral-900);--clr-h6-font-weight:var(--clr-font-weight-semibold);--clr-h6-font-family:var(--clr-display-font);--clr-p0-color:var(--clr-global-font-color);--clr-p0-font-weight:var(--clr-font-weight-light);--clr-p1-color:var(--clr-global-font-color);--clr-p1-font-weight:var(--clr-font-weight-regular);--clr-p2-color:var(--clr-global-font-color);--clr-p2-font-weight:var(--clr-font-weight-semibold);--clr-p3-color:var(--clr-global-font-color);--clr-p3-font-weight:var(--clr-font-weight-regular);--clr-p4-color:var(--clr-global-font-color);--clr-p4-font-weight:var(--clr-font-weight-bold);--clr-p5-color:var(--clr-global-font-color);--clr-p5-font-weight:var(--clr-font-weight-regular);--clr-p6-color:var(--clr-global-font-color);--clr-p6-font-weight:var(--clr-font-weight-bold);--clr-p7-color:var(--clr-global-font-color);--clr-p7-font-weight:var(--clr-font-weight-regular);--clr-p8-color:var(--clr-global-font-color);--clr-p8-font-weight:var(--clr-font-weight-regular)}.clr-align-baseline{vertical-align:baseline!important}.clr-align-top{vertical-align:top!important}.clr-align-middle{vertical-align:middle!important}.clr-align-bottom{vertical-align:bottom!important}.clr-align-text-bottom{vertical-align:text-bottom!important}.clr-align-text-top{vertical-align:text-top!important}.clr-clearfix::after{content:"";display:table;clear:both}.clr-display-block{display:block!important}.clr-display-inline-block{display:inline-block!important}.clr-display-inline{display:inline!important}.clr-flex-row{-webkit-box-orient:horizontal!important;-webkit-box-direction:normal!important;-ms-flex-direction:row!important;flex-direction:row!important}.clr-flex-column{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}.clr-flex-row-reverse{-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.clr-flex-column-reverse{-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.clr-flex-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.clr-flex-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.clr-flex-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.clr-flex-fill{-webkit-box-flex:1!important;-ms-flex:1 1 auto!important;flex:1 1 auto!important}.clr-flex-grow-0{-webkit-box-flex:0!important;-ms-flex-positive:0!important;flex-grow:0!important}.clr-flex-grow-1{-webkit-box-flex:1!important;-ms-flex-positive:1!important;flex-grow:1!important}.clr-flex-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.clr-flex-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}.clr-justify-content-start{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.clr-justify-content-end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.clr-justify-content-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.clr-justify-content-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.clr-justify-content-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.clr-align-items-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}.clr-align-items-end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}.clr-align-items-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.clr-align-items-baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}.clr-align-items-stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}.clr-align-content-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.clr-align-content-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.clr-align-content-center{-ms-flex-line-pack:center!important;align-content:center!important}.clr-align-content-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.clr-align-content-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.clr-align-content-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.clr-align-self-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.clr-align-self-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.clr-align-self-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.clr-align-self-center{-ms-flex-item-align:center!important;align-self:center!important}.clr-align-self-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.clr-align-self-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}@media (min-width:576px){.clr-flex-sm-row{-webkit-box-orient:horizontal!important;-webkit-box-direction:normal!important;-ms-flex-direction:row!important;flex-direction:row!important}.clr-flex-sm-column{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}.clr-flex-sm-row-reverse{-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.clr-flex-sm-column-reverse{-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.clr-flex-sm-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.clr-flex-sm-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.clr-flex-sm-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.clr-flex-sm-fill{-webkit-box-flex:1!important;-ms-flex:1 1 auto!important;flex:1 1 auto!important}.clr-flex-sm-grow-0{-webkit-box-flex:0!important;-ms-flex-positive:0!important;flex-grow:0!important}.clr-flex-sm-grow-1{-webkit-box-flex:1!important;-ms-flex-positive:1!important;flex-grow:1!important}.clr-flex-sm-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.clr-flex-sm-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}.clr-justify-content-sm-start{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.clr-justify-content-sm-end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.clr-justify-content-sm-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.clr-justify-content-sm-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.clr-justify-content-sm-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.clr-align-items-sm-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}.clr-align-items-sm-end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}.clr-align-items-sm-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.clr-align-items-sm-baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}.clr-align-items-sm-stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}.clr-align-content-sm-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.clr-align-content-sm-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.clr-align-content-sm-center{-ms-flex-line-pack:center!important;align-content:center!important}.clr-align-content-sm-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.clr-align-content-sm-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.clr-align-content-sm-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.clr-align-self-sm-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.clr-align-self-sm-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.clr-align-self-sm-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.clr-align-self-sm-center{-ms-flex-item-align:center!important;align-self:center!important}.clr-align-self-sm-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.clr-align-self-sm-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:768px){.clr-flex-md-row{-webkit-box-orient:horizontal!important;-webkit-box-direction:normal!important;-ms-flex-direction:row!important;flex-direction:row!important}.clr-flex-md-column{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}.clr-flex-md-row-reverse{-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.clr-flex-md-column-reverse{-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.clr-flex-md-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.clr-flex-md-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.clr-flex-md-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.clr-flex-md-fill{-webkit-box-flex:1!important;-ms-flex:1 1 auto!important;flex:1 1 auto!important}.clr-flex-md-grow-0{-webkit-box-flex:0!important;-ms-flex-positive:0!important;flex-grow:0!important}.clr-flex-md-grow-1{-webkit-box-flex:1!important;-ms-flex-positive:1!important;flex-grow:1!important}.clr-flex-md-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.clr-flex-md-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}.clr-justify-content-md-start{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.clr-justify-content-md-end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.clr-justify-content-md-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.clr-justify-content-md-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.clr-justify-content-md-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.clr-align-items-md-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}.clr-align-items-md-end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}.clr-align-items-md-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.clr-align-items-md-baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}.clr-align-items-md-stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}.clr-align-content-md-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.clr-align-content-md-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.clr-align-content-md-center{-ms-flex-line-pack:center!important;align-content:center!important}.clr-align-content-md-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.clr-align-content-md-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.clr-align-content-md-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.clr-align-self-md-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.clr-align-self-md-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.clr-align-self-md-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.clr-align-self-md-center{-ms-flex-item-align:center!important;align-self:center!important}.clr-align-self-md-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.clr-align-self-md-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:992px){.clr-flex-lg-row{-webkit-box-orient:horizontal!important;-webkit-box-direction:normal!important;-ms-flex-direction:row!important;flex-direction:row!important}.clr-flex-lg-column{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}.clr-flex-lg-row-reverse{-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.clr-flex-lg-column-reverse{-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.clr-flex-lg-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.clr-flex-lg-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.clr-flex-lg-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.clr-flex-lg-fill{-webkit-box-flex:1!important;-ms-flex:1 1 auto!important;flex:1 1 auto!important}.clr-flex-lg-grow-0{-webkit-box-flex:0!important;-ms-flex-positive:0!important;flex-grow:0!important}.clr-flex-lg-grow-1{-webkit-box-flex:1!important;-ms-flex-positive:1!important;flex-grow:1!important}.clr-flex-lg-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.clr-flex-lg-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}.clr-justify-content-lg-start{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.clr-justify-content-lg-end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.clr-justify-content-lg-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.clr-justify-content-lg-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.clr-justify-content-lg-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.clr-align-items-lg-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}.clr-align-items-lg-end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}.clr-align-items-lg-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.clr-align-items-lg-baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}.clr-align-items-lg-stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}.clr-align-content-lg-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.clr-align-content-lg-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.clr-align-content-lg-center{-ms-flex-line-pack:center!important;align-content:center!important}.clr-align-content-lg-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.clr-align-content-lg-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.clr-align-content-lg-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.clr-align-self-lg-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.clr-align-self-lg-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.clr-align-self-lg-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.clr-align-self-lg-center{-ms-flex-item-align:center!important;align-self:center!important}.clr-align-self-lg-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.clr-align-self-lg-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:1200px){.clr-flex-xl-row{-webkit-box-orient:horizontal!important;-webkit-box-direction:normal!important;-ms-flex-direction:row!important;flex-direction:row!important}.clr-flex-xl-column{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}.clr-flex-xl-row-reverse{-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.clr-flex-xl-column-reverse{-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.clr-flex-xl-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.clr-flex-xl-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.clr-flex-xl-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.clr-flex-xl-fill{-webkit-box-flex:1!important;-ms-flex:1 1 auto!important;flex:1 1 auto!important}.clr-flex-xl-grow-0{-webkit-box-flex:0!important;-ms-flex-positive:0!important;flex-grow:0!important}.clr-flex-xl-grow-1{-webkit-box-flex:1!important;-ms-flex-positive:1!important;flex-grow:1!important}.clr-flex-xl-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.clr-flex-xl-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}.clr-justify-content-xl-start{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.clr-justify-content-xl-end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.clr-justify-content-xl-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.clr-justify-content-xl-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.clr-justify-content-xl-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.clr-align-items-xl-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}.clr-align-items-xl-end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}.clr-align-items-xl-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.clr-align-items-xl-baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}.clr-align-items-xl-stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}.clr-align-content-xl-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.clr-align-content-xl-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.clr-align-content-xl-center{-ms-flex-line-pack:center!important;align-content:center!important}.clr-align-content-xl-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.clr-align-content-xl-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.clr-align-content-xl-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.clr-align-self-xl-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.clr-align-self-xl-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.clr-align-self-xl-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.clr-align-self-xl-center{-ms-flex-item-align:center!important;align-self:center!important}.clr-align-self-xl-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.clr-align-self-xl-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}.clr-flex-xs-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.clr-flex-xs-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.clr-flex-xs-unordered{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.clr-flex-items-xs-top{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.clr-flex-items-xs-middle{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.clr-flex-items-xs-bottom{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.clr-flex-xs-top{-ms-flex-item-align:start;align-self:flex-start}.clr-flex-xs-middle{-ms-flex-item-align:center;align-self:center}.clr-flex-xs-bottom{-ms-flex-item-align:end;align-self:flex-end}.clr-flex-items-xs-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.clr-flex-items-xs-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.clr-flex-items-xs-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.clr-flex-items-xs-around{-ms-flex-pack:distribute;justify-content:space-around}.clr-flex-items-xs-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media (min-width:576px){.clr-flex-sm-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.clr-flex-sm-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.clr-flex-sm-unordered{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}}@media (min-width:576px){.clr-flex-items-sm-top{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.clr-flex-items-sm-middle{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.clr-flex-items-sm-bottom{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}}@media (min-width:576px){.clr-flex-sm-top{-ms-flex-item-align:start;align-self:flex-start}.clr-flex-sm-middle{-ms-flex-item-align:center;align-self:center}.clr-flex-sm-bottom{-ms-flex-item-align:end;align-self:flex-end}}@media (min-width:576px){.clr-flex-items-sm-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.clr-flex-items-sm-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.clr-flex-items-sm-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.clr-flex-items-sm-around{-ms-flex-pack:distribute;justify-content:space-around}.clr-flex-items-sm-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}}@media (min-width:768px){.clr-flex-md-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.clr-flex-md-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.clr-flex-md-unordered{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}}@media (min-width:768px){.clr-flex-items-md-top{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.clr-flex-items-md-middle{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.clr-flex-items-md-bottom{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}}@media (min-width:768px){.clr-flex-md-top{-ms-flex-item-align:start;align-self:flex-start}.clr-flex-md-middle{-ms-flex-item-align:center;align-self:center}.clr-flex-md-bottom{-ms-flex-item-align:end;align-self:flex-end}}@media (min-width:768px){.clr-flex-items-md-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.clr-flex-items-md-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.clr-flex-items-md-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.clr-flex-items-md-around{-ms-flex-pack:distribute;justify-content:space-around}.clr-flex-items-md-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}}@media (min-width:992px){.clr-flex-lg-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.clr-flex-lg-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.clr-flex-lg-unordered{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}}@media (min-width:992px){.clr-flex-items-lg-top{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.clr-flex-items-lg-middle{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.clr-flex-items-lg-bottom{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}}@media (min-width:992px){.clr-flex-lg-top{-ms-flex-item-align:start;align-self:flex-start}.clr-flex-lg-middle{-ms-flex-item-align:center;align-self:center}.clr-flex-lg-bottom{-ms-flex-item-align:end;align-self:flex-end}}@media (min-width:992px){.clr-flex-items-lg-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.clr-flex-items-lg-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.clr-flex-items-lg-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.clr-flex-items-lg-around{-ms-flex-pack:distribute;justify-content:space-around}.clr-flex-items-lg-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}}@media (min-width:1200px){.clr-flex-xl-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.clr-flex-xl-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.clr-flex-xl-unordered{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}}@media (min-width:1200px){.clr-flex-items-xl-top{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.clr-flex-items-xl-middle{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.clr-flex-items-xl-bottom{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}}@media (min-width:1200px){.clr-flex-xl-top{-ms-flex-item-align:start;align-self:flex-start}.clr-flex-xl-middle{-ms-flex-item-align:center;align-self:center}.clr-flex-xl-bottom{-ms-flex-item-align:end;align-self:flex-end}}@media (min-width:1200px){.clr-flex-items-xl-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.clr-flex-items-xl-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.clr-flex-items-xl-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.clr-flex-items-xl-around{-ms-flex-pack:distribute;justify-content:space-around}.clr-flex-items-xl-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}}.clr-float-xs-left{float:left!important}.clr-float-xs-right{float:right!important}.clr-float-xs-none{float:none!important}@media (min-width:576px){.clr-float-sm-left{float:left!important}.clr-float-sm-right{float:right!important}.clr-float-sm-none{float:none!important}}@media (min-width:768px){.clr-float-md-left{float:left!important}.clr-float-md-right{float:right!important}.clr-float-md-none{float:none!important}}@media (min-width:992px){.clr-float-lg-left{float:left!important}.clr-float-lg-right{float:right!important}.clr-float-lg-none{float:none!important}}@media (min-width:1200px){.clr-float-xl-left{float:left!important}.clr-float-xl-right{float:right!important}.clr-float-xl-none{float:none!important}}.clr-invisible{visibility:hidden!important}.clr-hidden-xs-up{display:none!important}@media (max-width:575.98px){.clr-hidden-xs-down{display:none!important}}@media (min-width:576px){.clr-hidden-sm-up{display:none!important}}@media (max-width:767.98px){.clr-hidden-sm-down{display:none!important}}@media (min-width:768px){.clr-hidden-md-up{display:none!important}}@media (max-width:991.98px){.clr-hidden-md-down{display:none!important}}@media (min-width:992px){.clr-hidden-lg-up{display:none!important}}@media (max-width:1199.98px){.clr-hidden-lg-down{display:none!important}}@media (min-width:1200px){.clr-hidden-xl-up{display:none!important}}.clr-hidden-xl-down{display:none!important}.clr-visible-print-block{display:none!important}@media print{.clr-visible-print-block{display:block!important}}.clr-visible-print-inline{display:none!important}@media print{.clr-visible-print-inline{display:inline!important}}.clr-visible-print-inline-block{display:none!important}@media print{.clr-visible-print-inline-block{display:inline-block!important}}@media print{.clr-hidden-print{display:none!important}}.clr-row{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-.6rem;margin-left:-.6rem}.clr-no-gutters{margin-right:0;margin-left:0}.clr-no-gutters>.clr-col,.clr-no-gutters>[class*=clr-col-]{padding-right:0;padding-left:0}.clr-col,.clr-col-1,.clr-col-10,.clr-col-11,.clr-col-12,.clr-col-2,.clr-col-3,.clr-col-4,.clr-col-5,.clr-col-6,.clr-col-7,.clr-col-8,.clr-col-9,.clr-col-auto,.clr-col-lg,.clr-col-lg-1,.clr-col-lg-10,.clr-col-lg-11,.clr-col-lg-12,.clr-col-lg-2,.clr-col-lg-3,.clr-col-lg-4,.clr-col-lg-5,.clr-col-lg-6,.clr-col-lg-7,.clr-col-lg-8,.clr-col-lg-9,.clr-col-lg-auto,.clr-col-md,.clr-col-md-1,.clr-col-md-10,.clr-col-md-11,.clr-col-md-12,.clr-col-md-2,.clr-col-md-3,.clr-col-md-4,.clr-col-md-5,.clr-col-md-6,.clr-col-md-7,.clr-col-md-8,.clr-col-md-9,.clr-col-md-auto,.clr-col-sm,.clr-col-sm-1,.clr-col-sm-10,.clr-col-sm-11,.clr-col-sm-12,.clr-col-sm-2,.clr-col-sm-3,.clr-col-sm-4,.clr-col-sm-5,.clr-col-sm-6,.clr-col-sm-7,.clr-col-sm-8,.clr-col-sm-9,.clr-col-sm-auto,.clr-col-xl,.clr-col-xl-1,.clr-col-xl-10,.clr-col-xl-11,.clr-col-xl-12,.clr-col-xl-2,.clr-col-xl-3,.clr-col-xl-4,.clr-col-xl-5,.clr-col-xl-6,.clr-col-xl-7,.clr-col-xl-8,.clr-col-xl-9,.clr-col-xl-auto{width:100%;min-height:.05rem;padding-right:.6rem;padding-left:.6rem}.clr-col{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.clr-col-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.clr-col-1{-webkit-box-flex:0;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}.clr-col-2{-webkit-box-flex:0;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}.clr-col-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.clr-col-4{-webkit-box-flex:0;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}.clr-col-5{-webkit-box-flex:0;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}.clr-col-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.clr-col-7{-webkit-box-flex:0;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}.clr-col-8{-webkit-box-flex:0;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}.clr-col-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.clr-col-10{-webkit-box-flex:0;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}.clr-col-11{-webkit-box-flex:0;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}.clr-col-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.clr-order-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.clr-order-last{-webkit-box-ordinal-group:14;-ms-flex-order:13;order:13}.clr-order-0{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.clr-order-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.clr-order-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.clr-order-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.clr-order-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.clr-order-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.clr-order-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.clr-order-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.clr-order-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.clr-order-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.clr-order-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.clr-order-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}.clr-order-12{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.clr-offset-1{margin-left:8.3333333333%}.clr-offset-2{margin-left:16.6666666667%}.clr-offset-3{margin-left:25%}.clr-offset-4{margin-left:33.3333333333%}.clr-offset-5{margin-left:41.6666666667%}.clr-offset-6{margin-left:50%}.clr-offset-7{margin-left:58.3333333333%}.clr-offset-8{margin-left:66.6666666667%}.clr-offset-9{margin-left:75%}.clr-offset-10{margin-left:83.3333333333%}.clr-offset-11{margin-left:91.6666666667%}@media (min-width:576px){.clr-col-sm{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.clr-col-sm-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.clr-col-sm-1{-webkit-box-flex:0;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}.clr-col-sm-2{-webkit-box-flex:0;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}.clr-col-sm-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.clr-col-sm-4{-webkit-box-flex:0;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}.clr-col-sm-5{-webkit-box-flex:0;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}.clr-col-sm-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.clr-col-sm-7{-webkit-box-flex:0;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}.clr-col-sm-8{-webkit-box-flex:0;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}.clr-col-sm-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.clr-col-sm-10{-webkit-box-flex:0;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}.clr-col-sm-11{-webkit-box-flex:0;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}.clr-col-sm-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.clr-order-sm-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.clr-order-sm-last{-webkit-box-ordinal-group:14;-ms-flex-order:13;order:13}.clr-order-sm-0{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.clr-order-sm-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.clr-order-sm-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.clr-order-sm-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.clr-order-sm-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.clr-order-sm-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.clr-order-sm-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.clr-order-sm-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.clr-order-sm-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.clr-order-sm-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.clr-order-sm-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.clr-order-sm-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}.clr-order-sm-12{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.clr-offset-sm-0{margin-left:0}.clr-offset-sm-1{margin-left:8.3333333333%}.clr-offset-sm-2{margin-left:16.6666666667%}.clr-offset-sm-3{margin-left:25%}.clr-offset-sm-4{margin-left:33.3333333333%}.clr-offset-sm-5{margin-left:41.6666666667%}.clr-offset-sm-6{margin-left:50%}.clr-offset-sm-7{margin-left:58.3333333333%}.clr-offset-sm-8{margin-left:66.6666666667%}.clr-offset-sm-9{margin-left:75%}.clr-offset-sm-10{margin-left:83.3333333333%}.clr-offset-sm-11{margin-left:91.6666666667%}}@media (min-width:768px){.clr-col-md{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.clr-col-md-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.clr-col-md-1{-webkit-box-flex:0;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}.clr-col-md-2{-webkit-box-flex:0;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}.clr-col-md-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.clr-col-md-4{-webkit-box-flex:0;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}.clr-col-md-5{-webkit-box-flex:0;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}.clr-col-md-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.clr-col-md-7{-webkit-box-flex:0;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}.clr-col-md-8{-webkit-box-flex:0;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}.clr-col-md-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.clr-col-md-10{-webkit-box-flex:0;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}.clr-col-md-11{-webkit-box-flex:0;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}.clr-col-md-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.clr-order-md-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.clr-order-md-last{-webkit-box-ordinal-group:14;-ms-flex-order:13;order:13}.clr-order-md-0{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.clr-order-md-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.clr-order-md-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.clr-order-md-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.clr-order-md-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.clr-order-md-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.clr-order-md-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.clr-order-md-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.clr-order-md-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.clr-order-md-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.clr-order-md-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.clr-order-md-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}.clr-order-md-12{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.clr-offset-md-0{margin-left:0}.clr-offset-md-1{margin-left:8.3333333333%}.clr-offset-md-2{margin-left:16.6666666667%}.clr-offset-md-3{margin-left:25%}.clr-offset-md-4{margin-left:33.3333333333%}.clr-offset-md-5{margin-left:41.6666666667%}.clr-offset-md-6{margin-left:50%}.clr-offset-md-7{margin-left:58.3333333333%}.clr-offset-md-8{margin-left:66.6666666667%}.clr-offset-md-9{margin-left:75%}.clr-offset-md-10{margin-left:83.3333333333%}.clr-offset-md-11{margin-left:91.6666666667%}}@media (min-width:992px){.clr-col-lg{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.clr-col-lg-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.clr-col-lg-1{-webkit-box-flex:0;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}.clr-col-lg-2{-webkit-box-flex:0;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}.clr-col-lg-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.clr-col-lg-4{-webkit-box-flex:0;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}.clr-col-lg-5{-webkit-box-flex:0;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}.clr-col-lg-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.clr-col-lg-7{-webkit-box-flex:0;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}.clr-col-lg-8{-webkit-box-flex:0;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}.clr-col-lg-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.clr-col-lg-10{-webkit-box-flex:0;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}.clr-col-lg-11{-webkit-box-flex:0;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}.clr-col-lg-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.clr-order-lg-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.clr-order-lg-last{-webkit-box-ordinal-group:14;-ms-flex-order:13;order:13}.clr-order-lg-0{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.clr-order-lg-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.clr-order-lg-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.clr-order-lg-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.clr-order-lg-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.clr-order-lg-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.clr-order-lg-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.clr-order-lg-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.clr-order-lg-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.clr-order-lg-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.clr-order-lg-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.clr-order-lg-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}.clr-order-lg-12{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.clr-offset-lg-0{margin-left:0}.clr-offset-lg-1{margin-left:8.3333333333%}.clr-offset-lg-2{margin-left:16.6666666667%}.clr-offset-lg-3{margin-left:25%}.clr-offset-lg-4{margin-left:33.3333333333%}.clr-offset-lg-5{margin-left:41.6666666667%}.clr-offset-lg-6{margin-left:50%}.clr-offset-lg-7{margin-left:58.3333333333%}.clr-offset-lg-8{margin-left:66.6666666667%}.clr-offset-lg-9{margin-left:75%}.clr-offset-lg-10{margin-left:83.3333333333%}.clr-offset-lg-11{margin-left:91.6666666667%}}@media (min-width:1200px){.clr-col-xl{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.clr-col-xl-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.clr-col-xl-1{-webkit-box-flex:0;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}.clr-col-xl-2{-webkit-box-flex:0;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}.clr-col-xl-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.clr-col-xl-4{-webkit-box-flex:0;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}.clr-col-xl-5{-webkit-box-flex:0;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}.clr-col-xl-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.clr-col-xl-7{-webkit-box-flex:0;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}.clr-col-xl-8{-webkit-box-flex:0;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}.clr-col-xl-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.clr-col-xl-10{-webkit-box-flex:0;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}.clr-col-xl-11{-webkit-box-flex:0;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}.clr-col-xl-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.clr-order-xl-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.clr-order-xl-last{-webkit-box-ordinal-group:14;-ms-flex-order:13;order:13}.clr-order-xl-0{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.clr-order-xl-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.clr-order-xl-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.clr-order-xl-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.clr-order-xl-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.clr-order-xl-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.clr-order-xl-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.clr-order-xl-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.clr-order-xl-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.clr-order-xl-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.clr-order-xl-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.clr-order-xl-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}.clr-order-xl-12{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.clr-offset-xl-0{margin-left:0}.clr-offset-xl-1{margin-left:8.3333333333%}.clr-offset-xl-2{margin-left:16.6666666667%}.clr-offset-xl-3{margin-left:25%}.clr-offset-xl-4{margin-left:33.3333333333%}.clr-offset-xl-5{margin-left:41.6666666667%}.clr-offset-xl-6{margin-left:50%}.clr-offset-xl-7{margin-left:58.3333333333%}.clr-offset-xl-8{margin-left:66.6666666667%}.clr-offset-xl-9{margin-left:75%}.clr-offset-xl-10{margin-left:83.3333333333%}.clr-offset-xl-11{margin-left:91.6666666667%}}.clr-break-row{width:100%}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}pre{margin:.6rem 0}pre{border-color:#ccc;border-color:var(--clr-color-neutral-400,#ccc);border-width:.05rem;border-width:var(--clr-global-borderwidth,.05rem);border-style:solid;border-radius:.15rem;border-radius:var(--clr-global-borderradius,.15rem)}pre code{white-space:pre}code.clr-code{color:#c21d00;color:var(--clr-color-danger-800,#c21d00);padding:0;background:0 0}ul.list-unstyled:not([cds-list]){padding-left:0;margin-left:0;list-style:none}ol:not([cds-list]),ul:not([cds-list]){list-style-position:inside;margin-left:0;margin-top:0;margin-bottom:0;padding-left:0}ol.list:not([cds-list]),ul.list:not([cds-list]){list-style-position:outside;margin-left:1.1em}ol.list:not([cds-list]).compact,ul.list:not([cds-list]).compact{line-height:.9rem}ol.list:not([cds-list]).compact>li,ul.list:not([cds-list]).compact>li{margin-bottom:.3rem}ol.list:not([cds-list]).compact>li:last-child,ul.list:not([cds-list]).compact>li:last-child{margin-bottom:0}ol:not([cds-list])>li>ul.list-unstyled,ul:not(.list-unstyled):not([cds-list])>li>ul.list-unstyled{margin-left:1.1em}li>ul:not([cds-list]){margin-top:0;margin-left:1.1em}ul.list-group:not([cds-list]){margin-top:0}ol:not([cds-list]).list-spacer,ul:not([cds-list]).list-spacer{margin-top:1.2rem}h1:not([cds-text]){color:#000;color:var(--clr-h1-color,#000);font-weight:200;font-weight:var(--clr-h1-font-weight,200);font-family:Metropolis,"Avenir Next","Helvetica Neue",Arial,sans-serif;font-family:var(--clr-h1-font-family, Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif);font-size:1.6rem;letter-spacing:normal;line-height:2.4rem;margin-top:1.2rem;margin-bottom:0}h2:not([cds-text]){color:#000;color:var(--clr-h2-color,#000);font-weight:200;font-weight:var(--clr-h2-font-weight,200);font-family:Metropolis,"Avenir Next","Helvetica Neue",Arial,sans-serif;font-family:var(--clr-h2-font-family, Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif);font-size:1.4rem;letter-spacing:normal;line-height:2.4rem;margin-top:1.2rem;margin-bottom:0}h3:not([cds-text]){color:#000;color:var(--clr-h3-color,#000);font-weight:200;font-weight:var(--clr-h3-font-weight,200);font-family:Metropolis,"Avenir Next","Helvetica Neue",Arial,sans-serif;font-family:var(--clr-h3-font-family, Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif);font-size:1.1rem;letter-spacing:normal;line-height:1.2rem;margin-top:1.2rem;margin-bottom:0}h4:not([cds-text]){color:#000;color:var(--clr-h4-color,#000);font-weight:200;font-weight:var(--clr-h4-font-weight,200);font-family:Metropolis,"Avenir Next","Helvetica Neue",Arial,sans-serif;font-family:var(--clr-h4-font-family, Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif);font-size:.9rem;letter-spacing:normal;line-height:1.2rem;margin-top:1.2rem;margin-bottom:0}h5:not([cds-text]){color:#666;color:var(--clr-h5-color,#666);font-weight:400;font-weight:var(--clr-h5-font-weight,400);font-family:Metropolis,"Avenir Next","Helvetica Neue",Arial,sans-serif;font-family:var(--clr-h5-font-family, Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif);font-size:.8rem;letter-spacing:.01em;line-height:1.2rem;margin-top:1.2rem;margin-bottom:0}h6:not([cds-text]){color:#333;color:var(--clr-h6-color,#333);font-weight:500;font-weight:var(--clr-h6-font-weight,500);font-family:Metropolis,"Avenir Next","Helvetica Neue",Arial,sans-serif;font-family:var(--clr-h6-font-family, Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif);font-size:.7rem;letter-spacing:normal;line-height:1.2rem;margin-top:1.2rem;margin-bottom:0}body:not([cds-text]){color:#666;color:var(--clr-p1-color,#666);font-weight:400;font-weight:var(--clr-p1-font-weight,400);font-size:.7rem;letter-spacing:normal;line-height:1.2rem;margin-bottom:0;font-family:Metropolis,"Avenir Next","Helvetica Neue",Arial,sans-serif;font-family:var(--clr-font, Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif);margin-top:0!important}body p:not([cds-text]){color:#666;color:var(--clr-p1-color,#666);font-weight:400;font-weight:var(--clr-p1-font-weight,400);font-size:.7rem;letter-spacing:normal;line-height:1.2rem;margin-top:1.2rem;margin-bottom:0}body .p0:not([cds-text]),body p.p0:not([cds-text]){color:#666;color:var(--clr-p0-color,#666);font-weight:200;font-weight:var(--clr-p0-font-weight,200);font-size:1rem;letter-spacing:normal;line-height:1.2rem;margin-top:1.2rem;margin-bottom:0}body .p2:not([cds-text]),body p.p2:not([cds-text]){color:#666;color:var(--clr-p2-color,#666);font-weight:500;font-weight:var(--clr-p2-font-weight,500);font-size:.65rem;letter-spacing:normal;line-height:1.2rem;margin-top:1.2rem;margin-bottom:0}body .p3:not([cds-text]),body p.p3:not([cds-text]){color:#666;color:var(--clr-p3-color,#666);font-weight:400;font-weight:var(--clr-p3-font-weight,400);font-size:.65rem;letter-spacing:normal;line-height:1.2rem;margin-top:1.2rem;margin-bottom:0}body .p4:not([cds-text]),body p.p4:not([cds-text]){color:#666;color:var(--clr-p4-color,#666);font-weight:600;font-weight:var(--clr-p4-font-weight,600);font-size:.6rem;letter-spacing:normal;line-height:1.2rem;margin-top:1.2rem;margin-bottom:0}body .p5:not([cds-text]),body p.p5:not([cds-text]){color:#666;color:var(--clr-p5-color,#666);font-weight:400;font-weight:var(--clr-p5-font-weight,400);font-size:.6rem;letter-spacing:normal;line-height:1.2rem;margin-top:1.2rem;margin-bottom:0}body .p6:not([cds-text]),body p.p6:not([cds-text]){color:#666;color:var(--clr-p6-color,#666);font-weight:600;font-weight:var(--clr-p6-font-weight,600);font-size:.55rem;letter-spacing:.03em;line-height:.6rem;margin-top:1.2rem;margin-bottom:0}body .p7:not([cds-text]),body p.p7:not([cds-text]){color:#666;color:var(--clr-p7-color,#666);font-weight:400;font-weight:var(--clr-p7-font-weight,400);font-size:.55rem;letter-spacing:.03em;line-height:.6rem;margin-top:1.2rem;margin-bottom:0}body .p8:not([cds-text]),body p.p8:not([cds-text]){color:#666;color:var(--clr-p8-color,#666);font-weight:400;font-weight:var(--clr-p8-font-weight,400);font-size:.5rem;letter-spacing:.03em;line-height:.6rem;margin-top:1.2rem;margin-bottom:0}.text-light{font-weight:200;font-weight:var(--clr-font-weight-light,200)}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-left{text-align:left!important}.text-justify{text-align:justify!important}html:not([cds-text]){color:#666;color:var(--clr-global-font-color,#666);font-family:Metropolis,"Avenir Next","Helvetica Neue",Arial,sans-serif;font-family:var(--clr-font, Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif);font-size:125%}@font-face{font-family:Metropolis;src:url(data:application/font-woff;charset=utf-8;base64,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) format("woff");font-weight:200;font-style:normal}@font-face{font-family:Metropolis;src:url(data:application/font-woff;charset=utf-8;base64,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) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Metropolis;src:url(data:application/font-woff;charset=utf-8;base64,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) format("woff");font-weight:500;font-style:normal}@font-face{font-family:Metropolis;src:url(data:application/font-woff;charset=utf-8;base64,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) format("woff");font-weight:600;font-style:normal}:root{--clr-link-active-color:var(--clr-color-secondary-action-500);--clr-link-color:var(--clr-color-action-600);--clr-link-hover-color:var(--clr-color-action-600);--clr-link-visited-color:hsl(238, 41%, 53%);--clr-custom-links-hover-color:var(--clr-color-neutral-200)}html{-webkit-box-sizing:border-box;box-sizing:border-box}*,::after,::before{-webkit-box-sizing:inherit;box-sizing:inherit}@-ms-viewport{width:device-width}html{-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}img{vertical-align:middle}[role=button]{cursor:pointer}[role=button],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,select,textarea{border-radius:0}input[type=checkbox]:disabled,input[type=radio]:disabled{cursor:not-allowed}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;padding:0;line-height:inherit}input[type=search]{-webkit-appearance:none}[hidden]{display:none!important}dl{margin-bottom:0;margin-top:1rem}table{border-spacing:0}a:link{color:#0072a3;color:var(--clr-link-color,#0072a3);text-decoration:none}a:hover{color:#0072a3;color:var(--clr-link-hover-color,#0072a3);text-decoration:underline}a:active{color:#9e57bc;color:var(--clr-link-active-color,#9e57bc);text-decoration:underline}a:visited{color:#5659b8;color:var(--clr-link-visited-color,#5659b8);text-decoration:none}.clr-sr-only{position:absolute;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap;top:0;left:0}.alert-icon,.clr-icon{display:inline-block;height:.8rem;width:.8rem;padding:0;background-repeat:no-repeat;background-size:contain;vertical-align:middle}.alert-icon.clr-icon-warning,.alert-icon.icon-warning,.clr-icon.clr-icon-warning,.clr-icon.icon-warning{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%225%205%2026%2026%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.clr-i-outline%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23747474%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctitle%3Eexclamation-triangle-line%3C%2Ftitle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-1%22%20d%3D%22M18%2C21.32a1.3%2C1.3%2C0%2C0%2C0%2C1.3-1.3V14a1.3%2C1.3%2C0%2C1%2C0-2.6%2C0v6A1.3%2C1.3%2C0%2C0%2C0%2C18%2C21.32Z%22%3E%3C%2Fpath%3E%3Ccircle%20class%3D%22clr-i-outline%20clr-i-outline-path-2%22%20cx%3D%2217.95%22%20cy%3D%2224.27%22%20r%3D%221.5%22%3E%3C%2Fcircle%3E%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-3%22%20d%3D%22M30.33%2C25.54%2C20.59%2C7.6a3%2C3%2C0%2C0%2C0-5.27%2C0L5.57%2C25.54A3%2C3%2C0%2C0%2C0%2C8.21%2C30H27.69a3%2C3%2C0%2C0%2C0%2C2.64-4.43Zm-1.78%2C1.94a1%2C1%2C0%2C0%2C1-.86.49H8.21a1%2C1%2C0%2C0%2C1-.88-1.48L17.07%2C8.55a1%2C1%2C0%2C0%2C1%2C1.76%2C0l9.74%2C17.94A1%2C1%2C0%2C0%2C1%2C28.55%2C27.48Z%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E")}.alert-icon.clr-icon-warning-white,.clr-icon.clr-icon-warning-white{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%225%205%2026%2026%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.clr-i-outline%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23ffffff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctitle%3Eexclamation-triangle-line%3C%2Ftitle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-1%22%20d%3D%22M18%2C21.32a1.3%2C1.3%2C0%2C0%2C0%2C1.3-1.3V14a1.3%2C1.3%2C0%2C1%2C0-2.6%2C0v6A1.3%2C1.3%2C0%2C0%2C0%2C18%2C21.32Z%22%3E%3C%2Fpath%3E%3Ccircle%20class%3D%22clr-i-outline%20clr-i-outline-path-2%22%20cx%3D%2217.95%22%20cy%3D%2224.27%22%20r%3D%221.5%22%3E%3C%2Fcircle%3E%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-3%22%20d%3D%22M30.33%2C25.54%2C20.59%2C7.6a3%2C3%2C0%2C0%2C0-5.27%2C0L5.57%2C25.54A3%2C3%2C0%2C0%2C0%2C8.21%2C30H27.69a3%2C3%2C0%2C0%2C0%2C2.64-4.43Zm-1.78%2C1.94a1%2C1%2C0%2C0%2C1-.86.49H8.21a1%2C1%2C0%2C0%2C1-.88-1.48L17.07%2C8.55a1%2C1%2C0%2C0%2C1%2C1.76%2C0l9.74%2C17.94A1%2C1%2C0%2C0%2C1%2C28.55%2C27.48Z%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E")}.alert-icon.clr-vmw-logo,.clr-icon.clr-vmw-logo{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2036%2036%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Ctitle%3Evm%20bug%3C%2Ftitle%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Headers%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22CL-Headers-Specs%22%20transform%3D%22translate(-262.000000%2C%20-175.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%2201%22%20transform%3D%22translate(238.000000%2C%20163.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22vm-bug%22%20transform%3D%22translate(24.703125%2C%2012.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-42%22%20fill-opacity%3D%220.25%22%20fill%3D%22%23DDDDDD%22%20opacity%3D%220.6%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2236%22%20height%3D%2236%22%20rx%3D%223%22%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M7.63948376%2C13.8762402%20C7.32265324%2C13.2097082%206.53978152%2C12.9085139%205.80923042%2C13.219934%20C5.07771043%2C13.5322837%204.80932495%2C14.3103691%205.13972007%2C14.9769011%20L8.20725954%2C21.3744923%20C8.68977207%2C22.3784735%209.19844491%2C22.9037044%2010.1528121%2C22.9037044%20C11.1720955%2C22.9037044%2011.6168209%2C22.3310633%2012.0983646%2C21.3744923%20C12.0983646%2C21.3744923%2014.7744682%2C15.7847341%2014.8015974%2C15.7261685%20C14.8287266%2C15.6666733%2014.9149588%2C15.4863286%2015.1872199%2C15.4872582%20C15.4178182%2C15.490047%2015.6106294%2C15.6657437%2015.6106294%2C15.9018652%20L15.6106294%2C21.3698443%20C15.6106294%2C22.212073%2016.0979865%2C22.9037044%2017.0349134%2C22.9037044%20C17.9718403%2C22.9037044%2018.4785754%2C22.212073%2018.4785754%2C21.3698443%20L18.4785754%2C16.8965503%20C18.4785754%2C16.0338702%2019.1219254%2C15.4742436%2020.0007183%2C15.4742436%20C20.8785423%2C15.4742436%2021.4637583%2C16.0524624%2021.4637583%2C16.8965503%20L21.4637583%2C21.3698443%20C21.4637583%2C22.212073%2021.9520842%2C22.9037044%2022.8880423%2C22.9037044%20C23.8240003%2C22.9037044%2024.3326731%2C22.212073%2024.3326731%2C21.3698443%20L24.3326731%2C16.8965503%20C24.3326731%2C16.0338702%2024.9750543%2C15.4742436%2025.8538472%2C15.4742436%20C26.7307023%2C15.4742436%2027.3168871%2C16.0524624%2027.3168871%2C16.8965503%20L27.3168871%2C21.3698443%20C27.3168871%2C22.212073%2027.8052131%2C22.9037044%2028.74214%2C22.9037044%20C29.6771291%2C22.9037044%2030.1848331%2C22.212073%2030.1848331%2C21.3698443%20L30.1848331%2C16.2783582%20C30.1848331%2C14.4070488%2028.6181207%2C13.0962956%2026.7307023%2C13.0962956%20C24.8452216%2C13.0962956%2023.6651006%2C14.3475536%2023.6651006%2C14.3475536%20C23.037253%2C13.5666793%2022.1720247%2C13.0972252%2020.7089847%2C13.0972252%20C19.164557%2C13.0972252%2017.8129406%2C14.3475536%2017.8129406%2C14.3475536%20C17.1841241%2C13.5666793%2016.1154267%2C13.0972252%2015.2308204%2C13.0972252%20C13.8617638%2C13.0972252%2012.7746572%2C13.675444%2012.1119292%2C15.1302871%20L10.1528121%2C19.5608189%20L7.63948376%2C13.8762402%22%20id%3D%22Fill-4%22%20fill%3D%22%23FFFFFF%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E")}.is-off-screen{position:fixed!important;border:none!important;height:1px!important;width:1px!important;left:0!important;top:-convertBaselineToBase20(1)!important;overflow:hidden!important;visibility:hidden!important;padding:0!important;margin:0 0 -convertBaselineToBase20(1) 0!important}.clr-popover-content{position:fixed;z-index:5000}:root{--clr-btn-vertical-margin:0.3rem;--clr-btn-horizontal-margin:0.6rem;--clr-btn-horizontal-padding:0.6rem;--clr-btn-vertical-padding:0;--clr-btn-padding:var(--clr-btn-vertical-padding) var(--clr-btn-horizontal-padding);--clr-btn-height:1.8rem;--clr-btn-height-sm:1.2rem;--clr-btn-font-weight:500;--clr-btn-border-radius:0.15rem;--clr-btn-border-width:0.05rem;--clr-btn-outline-bg-color:transparent;--clr-btn-appearance-standard-line-height:1.15rem;--clr-btn-appearance-standard-font-size:0.55rem;--clr-btn-appearance-standard-font-weight:500;--clr-btn-appearance-standard-height:1.2rem;--clr-btn-appearance-standard-padding:0 0.6rem;--clr-btn-appearance-standard-icon-size:0.6rem;--clr-btn-appearance-form-line-height:1.8rem;--clr-btn-appearance-form-letter-spacing:0.12em;--clr-btn-appearance-form-font-size:0.6rem;--clr-btn-appearance-form-font-weight:500;--clr-btn-appearance-form-height:1.8rem;--clr-btn-appearance-form-padding:0 0.6rem;--clr-btn-default-color:var(--clr-color-action-600);--clr-btn-default-border-color:var(--clr-btn-default-color);--clr-btn-default-bg-color:transparent;--clr-btn-default-hover-bg-color:var(--clr-color-action-50);--clr-btn-default-hover-color:var(--clr-color-action-800);--clr-btn-default-box-shadow-color:var(--clr-color-action-500);--clr-btn-default-disabled-color:var(--clr-color-neutral-700);--clr-btn-default-disabled-bg-color:var(--clr-btn-default-bg-color);--clr-btn-default-disabled-border-color:var(--clr-color-neutral-600);--clr-btn-default-checked-bg-color:var(--clr-color-action-600);--clr-btn-default-checked-color:var(--clr-color-neutral-0);--clr-btn-default-outline-color:var(--clr-color-action-600);--clr-btn-default-outline-border-color:var(--clr-btn-default-outline-color);--clr-btn-default-outline-bg-color:var(--clr-btn-outline-bg-color);--clr-btn-default-outline-hover-bg-color:var(--clr-color-action-50);--clr-btn-default-outline-hover-color:var(--clr-color-action-800);--clr-btn-default-outline-box-shadow-color:var(--clr-color-action-500);--clr-btn-default-outline-disabled-color:var(--clr-color-neutral-700);--clr-btn-default-outline-disabled-bg-color:var(--clr-btn-default-outline-bg-color);--clr-btn-default-outline-disabled-border-color:var(--clr-color-neutral-600);--clr-btn-default-outline-checked-color:var(--clr-color-neutral-0);--clr-btn-default-outline-checked-bg-color:var(--clr-btn-default-outline-color);--clr-btn-primary-color:var(--clr-color-neutral-0);--clr-btn-primary-bg-color:var(--clr-color-action-600);--clr-btn-primary-border-color:var(--clr-color-action-600);--clr-btn-primary-hover-bg-color:var(--clr-color-action-800);--clr-btn-primary-hover-color:var(--clr-color-action-50);--clr-btn-primary-box-shadow-color:var(--clr-color-action-500);--clr-btn-primary-disabled-color:var(--clr-color-neutral-700);--clr-btn-primary-disabled-bg-color:var(--clr-color-neutral-400);--clr-btn-primary-disabled-border-color:var(--clr-color-neutral-400);--clr-btn-primary-checked-bg-color:var(--clr-color-action-600);--clr-btn-primary-checked-color:var(--clr-color-neutral-0);--clr-btn-success-color:var(--clr-color-neutral-0);--clr-btn-success-bg-color:var(--clr-color-success-700);--clr-btn-success-border-color:var(--clr-btn-success-bg-color);--clr-btn-success-hover-bg-color:var(--clr-color-success-800);--clr-btn-success-hover-color:var(--clr-btn-success-color);--clr-btn-success-box-shadow-color:var(--clr-color-success-900);--clr-btn-success-disabled-color:var(--clr-color-neutral-700);--clr-btn-success-disabled-bg-color:var(--clr-color-neutral-400);--clr-btn-success-disabled-border-color:var(--clr-color-neutral-400);--clr-btn-success-checked-bg-color:var(--clr-btn-success-hover-bg-color);--clr-btn-success-checked-color:var(--clr-btn-success-color);--clr-btn-success-outline-color:var(--clr-color-success-700);--clr-btn-success-outline-bg-color:var(--clr-btn-outline-bg-color);--clr-btn-success-outline-border-color:var(--clr-color-success-700);--clr-btn-success-outline-hover-bg-color:var(--clr-color-success-50);--clr-btn-success-outline-hover-color:var(--clr-color-success-900);--clr-btn-success-outline-box-shadow-color:var(--clr-color-success-400);--clr-btn-success-outline-disabled-color:var(--clr-color-neutral-700);--clr-btn-success-outline-disabled-bg-color:var(--clr-btn-success-outline-bg-color);--clr-btn-success-outline-disabled-border-color:var(--clr-color-neutral-600);--clr-btn-success-outline-checked-bg-color:var(--clr-btn-success-outline-border-color);--clr-btn-success-outline-checked-color:var(--clr-color-neutral-0);--clr-btn-danger-color:var(--clr-color-neutral-0);--clr-btn-danger-bg-color:var(--clr-color-danger-700);--clr-btn-danger-border-color:var(--clr-btn-danger-bg-color);--clr-btn-danger-hover-bg-color:var(--clr-color-danger-800);--clr-btn-danger-hover-color:var(--clr-btn-danger-color);--clr-btn-danger-box-shadow-color:var(--clr-color-danger-900);--clr-btn-danger-disabled-color:var(--clr-color-neutral-700);--clr-btn-danger-disabled-bg-color:var(--clr-color-neutral-400);--clr-btn-danger-disabled-border-color:var(--clr-btn-danger-disabled-color);--clr-btn-danger-checked-bg-color:var(--clr-color-danger-800);--clr-btn-danger-checked-color:var(--clr-btn-danger-color);--clr-btn-danger-outline-color:var(--clr-color-danger-700);--clr-btn-danger-outline-bg-color:var(--clr-btn-outline-bg-color);--clr-btn-danger-outline-border-color:var(--clr-color-danger-800);--clr-btn-danger-outline-hover-bg-color:var(--clr-color-danger-100);--clr-btn-danger-outline-hover-color:var(--clr-color-danger-900);--clr-btn-danger-outline-box-shadow-color:var(--clr-color-danger-200);--clr-btn-danger-outline-disabled-color:var(--clr-color-neutral-700);--clr-btn-danger-outline-disabled-bg-color:var(--clr-btn-danger-outline-bg-color);--clr-btn-danger-outline-disabled-border-color:var(--clr-btn-danger-outline-disabled-color);--clr-btn-danger-outline-checked-bg-color:var(--clr-color-danger-800);--clr-btn-danger-outline-checked-color:var(--clr-color-neutral-0);--clr-btn-link-color:var(--clr-color-action-600);--clr-btn-link-bg-color:transparent;--clr-btn-link-border-color:transparent;--clr-btn-link-hover-bg-color:transparent;--clr-btn-link-hover-color:var(--clr-color-action-800);--clr-btn-link-disabled-color:var(--clr-color-neutral-700);--clr-btn-link-disabled-bg-color:transparent;--clr-btn-link-disabled-border-color:transparent;--clr-btn-link-checked-bg-color:transparent;--clr-btn-link-checked-color:var(--clr-color-action-800);--clr-btn-inverse-color:var(--clr-color-neutral-0);--clr-btn-inverse-border-color:var(--clr-color-neutral-0);--clr-btn-inverse-bg-color:transparent;--clr-btn-inverse-hover-bg-color:rgba(255, 255, 255, 0.15);--clr-btn-inverse-hover-color:var(--clr-color-neutral-0);--clr-btn-inverse-box-shadow-color:rgba(0, 0, 0, 0.25);--clr-btn-inverse-disabled-color:var(--clr-color-neutral-0);--clr-btn-inverse-disabled-bg-color:var(--clr-btn-inverse-bg-color);--clr-btn-inverse-disabled-border-color:var(--clr-color-neutral-0);--clr-btn-inverse-checked-bg-color:rgba(255, 255, 255, 0.15);--clr-btn-inverse-checked-color:var(--clr-color-neutral-0);--clr-btn-icon-disabled-color:var(--clr-btn-default-disabled-color, #666666);--clr-btn-group-focus-outline:#51cbee}.btn{cursor:pointer;display:inline-block;-webkit-appearance:none!important;border-radius:.15rem;border-radius:var(--clr-btn-border-radius,.15rem);border-width:.05rem;border-width:var(--clr-btn-border-width,.05rem);border-style:solid;min-width:3.6rem;max-width:18rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:center;text-decoration:none;text-transform:uppercase;vertical-align:middle;border-color:#0072a3;border-color:var(--clr-btn-default-border-color,#0072a3);background-color:transparent;background-color:var(--clr-btn-default-bg-color,transparent);color:#0072a3;color:var(--clr-btn-default-color,#0072a3);line-height:1.8rem;line-height:var(--clr-btn-appearance-form-line-height,1.8rem);letter-spacing:.12em;font-size:.6rem;font-size:var(--clr-btn-appearance-form-font-size,.6rem);font-weight:500;font-weight:var(--clr-btn-appearance-form-font-weight,500);height:1.8rem;height:var(--clr-btn-appearance-form-height,1.8rem);padding:0 .6rem;padding:var(--clr-btn-appearance-form-padding,0 .6rem)}.btn:hover{text-decoration:none}.btn cds-icon{color:#0072a3;color:var(--clr-btn-default-color,#0072a3)}.btn:visited{color:#0072a3;color:var(--clr-btn-default-color,#0072a3)}.btn:hover{background-color:#e3f5fc;background-color:var(--clr-btn-default-hover-bg-color,#e3f5fc);color:#00567a;color:var(--clr-btn-default-hover-color,#00567a)}.btn:active{-webkit-box-shadow:0 .1rem 0 0 #179bd3 inset;box-shadow:0 .1rem 0 0 #179bd3 inset;-webkit-box-shadow:0 .1rem 0 0 var(--clr-btn-default-box-shadow-color,#179bd3) inset;box-shadow:0 .1rem 0 0 var(--clr-btn-default-box-shadow-color,#179bd3) inset}.btn.disabled,.btn:disabled{color:#666;color:var(--clr-btn-default-disabled-color,#666);cursor:not-allowed;opacity:.4;background-color:transparent;background-color:var(--clr-btn-default-disabled-bg-color,transparent);border-color:#8c8c8c;border-color:var(--clr-btn-default-disabled-border-color,#8c8c8c);-webkit-box-shadow:none;box-shadow:none}.btn cds-icon,.btn-group>.btn cds-icon{-webkit-transform:translate3d(0,-.1rem,0);transform:translate3d(0,-.1rem,0)}.btn-info .btn,.btn-info-outline .btn,.btn-outline .btn,.btn-outline-info .btn,.btn-outline-primary .btn,.btn-outline-secondary .btn,.btn-primary-outline .btn,.btn-secondary .btn,.btn-secondary-outline .btn,.btn.btn-info,.btn.btn-info-outline,.btn.btn-outline,.btn.btn-outline-primary,.btn.btn-outline-secondary,.btn.btn-primary-outline,.btn.btn-secondary,.btn.btn-secondary-outline{border-color:#0072a3;border-color:var(--clr-btn-default-border-color,#0072a3);background-color:transparent;background-color:var(--clr-btn-default-bg-color,transparent);color:#0072a3;color:var(--clr-btn-default-color,#0072a3)}.btn-info .btn cds-icon,.btn-info-outline .btn cds-icon,.btn-outline .btn cds-icon,.btn-outline-info .btn cds-icon,.btn-outline-primary .btn cds-icon,.btn-outline-secondary .btn cds-icon,.btn-primary-outline .btn cds-icon,.btn-secondary .btn cds-icon,.btn-secondary-outline .btn cds-icon,.btn.btn-info cds-icon,.btn.btn-info-outline cds-icon,.btn.btn-outline cds-icon,.btn.btn-outline-primary cds-icon,.btn.btn-outline-secondary cds-icon,.btn.btn-primary-outline cds-icon,.btn.btn-secondary cds-icon,.btn.btn-secondary-outline cds-icon{color:#0072a3;color:var(--clr-btn-default-color,#0072a3)}.btn-info .btn:visited,.btn-info-outline .btn:visited,.btn-outline .btn:visited,.btn-outline-info .btn:visited,.btn-outline-primary .btn:visited,.btn-outline-secondary .btn:visited,.btn-primary-outline .btn:visited,.btn-secondary .btn:visited,.btn-secondary-outline .btn:visited,.btn.btn-info-outline:visited,.btn.btn-info:visited,.btn.btn-outline-primary:visited,.btn.btn-outline-secondary:visited,.btn.btn-outline:visited,.btn.btn-primary-outline:visited,.btn.btn-secondary-outline:visited,.btn.btn-secondary:visited{color:#0072a3;color:var(--clr-btn-default-color,#0072a3)}.btn-info .btn:hover,.btn-info-outline .btn:hover,.btn-outline .btn:hover,.btn-outline-info .btn:hover,.btn-outline-primary .btn:hover,.btn-outline-secondary .btn:hover,.btn-primary-outline .btn:hover,.btn-secondary .btn:hover,.btn-secondary-outline .btn:hover,.btn.btn-info-outline:hover,.btn.btn-info:hover,.btn.btn-outline-primary:hover,.btn.btn-outline-secondary:hover,.btn.btn-outline:hover,.btn.btn-primary-outline:hover,.btn.btn-secondary-outline:hover,.btn.btn-secondary:hover{background-color:#e3f5fc;background-color:var(--clr-btn-default-hover-bg-color,#e3f5fc);color:#00567a;color:var(--clr-btn-default-hover-color,#00567a)}.btn-info .btn:active,.btn-info-outline .btn:active,.btn-outline .btn:active,.btn-outline-info .btn:active,.btn-outline-primary .btn:active,.btn-outline-secondary .btn:active,.btn-primary-outline .btn:active,.btn-secondary .btn:active,.btn-secondary-outline .btn:active,.btn.btn-info-outline:active,.btn.btn-info:active,.btn.btn-outline-primary:active,.btn.btn-outline-secondary:active,.btn.btn-outline:active,.btn.btn-primary-outline:active,.btn.btn-secondary-outline:active,.btn.btn-secondary:active{-webkit-box-shadow:0 .1rem 0 0 #179bd3 inset;box-shadow:0 .1rem 0 0 #179bd3 inset;-webkit-box-shadow:0 .1rem 0 0 var(--clr-btn-default-box-shadow-color,#179bd3) inset;box-shadow:0 .1rem 0 0 var(--clr-btn-default-box-shadow-color,#179bd3) inset}.btn-info .btn.disabled,.btn-info .btn:disabled,.btn-info-outline .btn.disabled,.btn-info-outline .btn:disabled,.btn-outline .btn.disabled,.btn-outline .btn:disabled,.btn-outline-info .btn.disabled,.btn-outline-info .btn:disabled,.btn-outline-primary .btn.disabled,.btn-outline-primary .btn:disabled,.btn-outline-secondary .btn.disabled,.btn-outline-secondary .btn:disabled,.btn-primary-outline .btn.disabled,.btn-primary-outline .btn:disabled,.btn-secondary .btn.disabled,.btn-secondary .btn:disabled,.btn-secondary-outline .btn.disabled,.btn-secondary-outline .btn:disabled,.btn.btn-info-outline.disabled,.btn.btn-info-outline:disabled,.btn.btn-info.disabled,.btn.btn-info:disabled,.btn.btn-outline-primary.disabled,.btn.btn-outline-primary:disabled,.btn.btn-outline-secondary.disabled,.btn.btn-outline-secondary:disabled,.btn.btn-outline.disabled,.btn.btn-outline:disabled,.btn.btn-primary-outline.disabled,.btn.btn-primary-outline:disabled,.btn.btn-secondary-outline.disabled,.btn.btn-secondary-outline:disabled,.btn.btn-secondary.disabled,.btn.btn-secondary:disabled{color:#666;color:var(--clr-btn-default-disabled-color,#666);cursor:not-allowed;opacity:.4;background-color:transparent;background-color:var(--clr-btn-default-disabled-bg-color,transparent);border-color:#8c8c8c;border-color:var(--clr-btn-default-disabled-border-color,#8c8c8c);-webkit-box-shadow:none;box-shadow:none}.btn-primary .btn,.btn.btn-primary{border-color:#0072a3;border-color:var(--clr-btn-primary-border-color,#0072a3);background-color:#0072a3;background-color:var(--clr-btn-primary-bg-color,#0072a3);color:#fff;color:var(--clr-btn-primary-color,#fff)}.btn-primary .btn cds-icon,.btn.btn-primary cds-icon{color:#fff;color:var(--clr-btn-primary-color,#fff)}.btn-primary .btn:visited,.btn.btn-primary:visited{color:#fff;color:var(--clr-btn-primary-color,#fff)}.btn-primary .btn:hover,.btn.btn-primary:hover{background-color:#00567a;background-color:var(--clr-btn-primary-hover-bg-color,#00567a);color:#e3f5fc;color:var(--clr-btn-primary-hover-color,#e3f5fc)}.btn-primary .btn:active,.btn.btn-primary:active{-webkit-box-shadow:0 .1rem 0 0 #179bd3 inset;box-shadow:0 .1rem 0 0 #179bd3 inset;-webkit-box-shadow:0 .1rem 0 0 var(--clr-btn-primary-box-shadow-color,#179bd3) inset;box-shadow:0 .1rem 0 0 var(--clr-btn-primary-box-shadow-color,#179bd3) inset}.btn-primary .btn.disabled,.btn-primary .btn:disabled,.btn.btn-primary.disabled,.btn.btn-primary:disabled{color:#666;color:var(--clr-btn-primary-disabled-color,#666);cursor:not-allowed;opacity:.4;background-color:#ccc;background-color:var(--clr-btn-primary-disabled-bg-color,#ccc);border-color:#ccc;border-color:var(--clr-btn-primary-disabled-border-color,#ccc);-webkit-box-shadow:none;box-shadow:none}.btn-success .btn,.btn.btn-success{border-color:#3c8500;border-color:var(--clr-btn-success-border-color,#3c8500);background-color:#3c8500;background-color:var(--clr-btn-success-bg-color,#3c8500);color:#fff;color:var(--clr-btn-success-color,#fff)}.btn-success .btn cds-icon,.btn.btn-success cds-icon{color:#fff;color:var(--clr-btn-success-color,#fff)}.btn-success .btn:visited,.btn.btn-success:visited{color:#fff;color:var(--clr-btn-success-color,#fff)}.btn-success .btn:hover,.btn.btn-success:hover{background-color:#306b00;background-color:var(--clr-btn-success-hover-bg-color,#306b00);color:#fff;color:var(--clr-btn-success-hover-color,#fff)}.btn-success .btn:active,.btn.btn-success:active{-webkit-box-shadow:0 .1rem 0 0 #255200 inset;box-shadow:0 .1rem 0 0 #255200 inset;-webkit-box-shadow:0 .1rem 0 0 var(--clr-btn-success-box-shadow-color,#255200) inset;box-shadow:0 .1rem 0 0 var(--clr-btn-success-box-shadow-color,#255200) inset}.btn-success .btn.disabled,.btn-success .btn:disabled,.btn.btn-success.disabled,.btn.btn-success:disabled{color:#666;color:var(--clr-btn-success-disabled-color,#666);cursor:not-allowed;opacity:.4;background-color:#ccc;background-color:var(--clr-btn-success-disabled-bg-color,#ccc);border-color:#ccc;border-color:var(--clr-btn-success-disabled-border-color,#ccc);-webkit-box-shadow:none;box-shadow:none}.btn-danger .btn,.btn-warning .btn,.btn.btn-danger,.btn.btn-warning{border-color:#db2100;border-color:var(--clr-btn-danger-border-color,#db2100);background-color:#db2100;background-color:var(--clr-btn-danger-bg-color,#db2100);color:#fff;color:var(--clr-btn-danger-color,#fff)}.btn-danger .btn cds-icon,.btn-warning .btn cds-icon,.btn.btn-danger cds-icon,.btn.btn-warning cds-icon{color:#fff;color:var(--clr-btn-danger-color,#fff)}.btn-danger .btn:visited,.btn-warning .btn:visited,.btn.btn-danger:visited,.btn.btn-warning:visited{color:#fff;color:var(--clr-btn-danger-color,#fff)}.btn-danger .btn:hover,.btn-warning .btn:hover,.btn.btn-danger:hover,.btn.btn-warning:hover{background-color:#c21d00;background-color:var(--clr-btn-danger-hover-bg-color,#c21d00);color:#fff;color:var(--clr-btn-danger-hover-color,#fff)}.btn-danger .btn:active,.btn-warning .btn:active,.btn.btn-danger:active,.btn.btn-warning:active{-webkit-box-shadow:0 .1rem 0 0 #991700 inset;box-shadow:0 .1rem 0 0 #991700 inset;-webkit-box-shadow:0 .1rem 0 0 var(--clr-btn-danger-box-shadow-color,#991700) inset;box-shadow:0 .1rem 0 0 var(--clr-btn-danger-box-shadow-color,#991700) inset}.btn-danger .btn.disabled,.btn-danger .btn:disabled,.btn-warning .btn.disabled,.btn-warning .btn:disabled,.btn.btn-danger.disabled,.btn.btn-danger:disabled,.btn.btn-warning.disabled,.btn.btn-warning:disabled{color:#666;color:var(--clr-btn-danger-disabled-color,#666);cursor:not-allowed;opacity:.4;background-color:#ccc;background-color:var(--clr-btn-danger-disabled-bg-color,#ccc);border-color:#666;border-color:var(--clr-btn-danger-disabled-border-color,#666);-webkit-box-shadow:none;box-shadow:none}.btn-info-outline .btn,.btn-outline .btn,.btn.btn-info-outline,.btn.btn-outline,.btn.btn-outline .btn,.btn.btn-outline-info{border-color:#0072a3;border-color:var(--clr-btn-default-outline-border-color,#0072a3);background-color:transparent;background-color:var(--clr-btn-default-outline-bg-color,transparent);color:#0072a3;color:var(--clr-btn-default-outline-color,#0072a3)}.btn-info-outline .btn cds-icon,.btn-outline .btn cds-icon,.btn.btn-info-outline cds-icon,.btn.btn-outline .btn cds-icon,.btn.btn-outline cds-icon,.btn.btn-outline-info cds-icon{color:#0072a3;color:var(--clr-btn-default-outline-color,#0072a3)}.btn-info-outline .btn:visited,.btn-outline .btn:visited,.btn.btn-info-outline:visited,.btn.btn-outline .btn:visited,.btn.btn-outline-info:visited,.btn.btn-outline:visited{color:#0072a3;color:var(--clr-btn-default-outline-color,#0072a3)}.btn-info-outline .btn:hover,.btn-outline .btn:hover,.btn.btn-info-outline:hover,.btn.btn-outline .btn:hover,.btn.btn-outline-info:hover,.btn.btn-outline:hover{background-color:#e3f5fc;background-color:var(--clr-btn-default-outline-hover-bg-color,#e3f5fc);color:#00567a;color:var(--clr-btn-default-outline-hover-color,#00567a)}.btn-info-outline .btn:active,.btn-outline .btn:active,.btn.btn-info-outline:active,.btn.btn-outline .btn:active,.btn.btn-outline-info:active,.btn.btn-outline:active{-webkit-box-shadow:0 .1rem 0 0 #179bd3 inset;box-shadow:0 .1rem 0 0 #179bd3 inset;-webkit-box-shadow:0 .1rem 0 0 var(--clr-btn-default-outline-box-shadow-color,#179bd3) inset;box-shadow:0 .1rem 0 0 var(--clr-btn-default-outline-box-shadow-color,#179bd3) inset}.btn-info-outline .btn.disabled,.btn-info-outline .btn:disabled,.btn-outline .btn.disabled,.btn-outline .btn:disabled,.btn.btn-info-outline.disabled,.btn.btn-info-outline:disabled,.btn.btn-outline .btn.disabled,.btn.btn-outline .btn:disabled,.btn.btn-outline-info.disabled,.btn.btn-outline-info:disabled,.btn.btn-outline.disabled,.btn.btn-outline:disabled{color:#666;color:var(--clr-btn-default-outline-disabled-color,#666);cursor:not-allowed;opacity:.4;background-color:transparent;background-color:var(--clr-btn-default-outline-disabled-bg-color,transparent);border-color:#8c8c8c;border-color:var(--clr-btn-default-outline-disabled-border-color,#8c8c8c);-webkit-box-shadow:none;box-shadow:none}.btn-outline-success .btn,.btn-success-outline .btn,.btn.btn-outline-success,.btn.btn-success-outline{border-color:#3c8500;border-color:var(--clr-btn-success-outline-border-color,#3c8500);background-color:transparent;background-color:var(--clr-btn-success-outline-bg-color,transparent);color:#3c8500;color:var(--clr-btn-success-outline-color,#3c8500)}.btn-outline-success .btn cds-icon,.btn-success-outline .btn cds-icon,.btn.btn-outline-success cds-icon,.btn.btn-success-outline cds-icon{color:#3c8500;color:var(--clr-btn-success-outline-color,#3c8500)}.btn-outline-success .btn:visited,.btn-success-outline .btn:visited,.btn.btn-outline-success:visited,.btn.btn-success-outline:visited{color:#3c8500;color:var(--clr-btn-success-outline-color,#3c8500)}.btn-outline-success .btn:hover,.btn-success-outline .btn:hover,.btn.btn-outline-success:hover,.btn.btn-success-outline:hover{background-color:#dff0d0;background-color:var(--clr-btn-success-outline-hover-bg-color,#dff0d0);color:#255200;color:var(--clr-btn-success-outline-hover-color,#255200)}.btn-outline-success .btn:active,.btn-success-outline .btn:active,.btn.btn-outline-success:active,.btn.btn-success-outline:active{-webkit-box-shadow:0 .1rem 0 0 #5eb715 inset;box-shadow:0 .1rem 0 0 #5eb715 inset;-webkit-box-shadow:0 .1rem 0 0 var(--clr-btn-success-outline-box-shadow-color,#5eb715) inset;box-shadow:0 .1rem 0 0 var(--clr-btn-success-outline-box-shadow-color,#5eb715) inset}.btn-outline-success .btn.disabled,.btn-outline-success .btn:disabled,.btn-success-outline .btn.disabled,.btn-success-outline .btn:disabled,.btn.btn-outline-success.disabled,.btn.btn-outline-success:disabled,.btn.btn-success-outline.disabled,.btn.btn-success-outline:disabled{color:#666;color:var(--clr-btn-success-outline-disabled-color,#666);cursor:not-allowed;opacity:.4;background-color:transparent;background-color:var(--clr-btn-success-outline-disabled-bg-color,transparent);border-color:#8c8c8c;border-color:var(--clr-btn-success-outline-disabled-border-color,#8c8c8c);-webkit-box-shadow:none;box-shadow:none}.btn-danger-outline .btn,.btn-outline-danger .btn,.btn-outline-warning .btn,.btn-warning-outline .btn,.btn.btn-danger-outline,.btn.btn-outline-danger,.btn.btn-outline-warning,.btn.btn-warning-outline{border-color:#c21d00;border-color:var(--clr-btn-danger-outline-border-color,#c21d00);background-color:transparent;background-color:var(--clr-btn-danger-outline-bg-color,transparent);color:#db2100;color:var(--clr-btn-danger-outline-color,#db2100)}.btn-danger-outline .btn cds-icon,.btn-outline-danger .btn cds-icon,.btn-outline-warning .btn cds-icon,.btn-warning-outline .btn cds-icon,.btn.btn-danger-outline cds-icon,.btn.btn-outline-danger cds-icon,.btn.btn-outline-warning cds-icon,.btn.btn-warning-outline cds-icon{color:#db2100;color:var(--clr-btn-danger-outline-color,#db2100)}.btn-danger-outline .btn:visited,.btn-outline-danger .btn:visited,.btn-outline-warning .btn:visited,.btn-warning-outline .btn:visited,.btn.btn-danger-outline:visited,.btn.btn-outline-danger:visited,.btn.btn-outline-warning:visited,.btn.btn-warning-outline:visited{color:#db2100;color:var(--clr-btn-danger-outline-color,#db2100)}.btn-danger-outline .btn:hover,.btn-outline-danger .btn:hover,.btn-outline-warning .btn:hover,.btn-warning-outline .btn:hover,.btn.btn-danger-outline:hover,.btn.btn-outline-danger:hover,.btn.btn-outline-warning:hover,.btn.btn-warning-outline:hover{background-color:#feddd7;background-color:var(--clr-btn-danger-outline-hover-bg-color,#feddd7);color:#991700;color:var(--clr-btn-danger-outline-hover-color,#991700)}.btn-danger-outline .btn:active,.btn-outline-danger .btn:active,.btn-outline-warning .btn:active,.btn-warning-outline .btn:active,.btn.btn-danger-outline:active,.btn.btn-outline-danger:active,.btn.btn-outline-warning:active,.btn.btn-warning-outline:active{-webkit-box-shadow:0 .1rem 0 0 #fcc5bb inset;box-shadow:0 .1rem 0 0 #fcc5bb inset;-webkit-box-shadow:0 .1rem 0 0 var(--clr-btn-danger-outline-box-shadow-color,#fcc5bb) inset;box-shadow:0 .1rem 0 0 var(--clr-btn-danger-outline-box-shadow-color,#fcc5bb) inset}.btn-danger-outline .btn.disabled,.btn-danger-outline .btn:disabled,.btn-outline-danger .btn.disabled,.btn-outline-danger .btn:disabled,.btn-outline-warning .btn.disabled,.btn-outline-warning .btn:disabled,.btn-warning-outline .btn.disabled,.btn-warning-outline .btn:disabled,.btn.btn-danger-outline.disabled,.btn.btn-danger-outline:disabled,.btn.btn-outline-danger.disabled,.btn.btn-outline-danger:disabled,.btn.btn-outline-warning.disabled,.btn.btn-outline-warning:disabled,.btn.btn-warning-outline.disabled,.btn.btn-warning-outline:disabled{color:#666;color:var(--clr-btn-danger-outline-disabled-color,#666);cursor:not-allowed;opacity:.4;background-color:transparent;background-color:var(--clr-btn-danger-outline-disabled-bg-color,transparent);border-color:#666;border-color:var(--clr-btn-danger-outline-disabled-border-color,#666);-webkit-box-shadow:none;box-shadow:none}.btn-link .btn,.btn.btn-link{border-color:transparent;border-color:var(--clr-btn-link-border-color,transparent);background-color:transparent;background-color:var(--clr-btn-link-bg-color,transparent);color:#0072a3;color:var(--clr-btn-link-color,#0072a3)}.btn-link .btn cds-icon,.btn.btn-link cds-icon{color:#0072a3;color:var(--clr-btn-link-color,#0072a3)}.btn-link .btn:visited,.btn.btn-link:visited{color:#0072a3;color:var(--clr-btn-link-color,#0072a3)}.btn-link .btn:hover,.btn.btn-link:hover{background-color:transparent;background-color:var(--clr-btn-link-hover-bg-color,transparent);color:#00567a;color:var(--clr-btn-link-hover-color,#00567a)}.btn-link .btn:active,.btn.btn-link:active{-webkit-box-shadow:none;box-shadow:none}.btn-link .btn.disabled,.btn-link .btn:disabled,.btn.btn-link.disabled,.btn.btn-link:disabled{color:#666;color:var(--clr-btn-link-disabled-color,#666);cursor:not-allowed;opacity:.4;background-color:transparent;background-color:var(--clr-btn-link-disabled-bg-color,transparent);border-color:transparent;border-color:var(--clr-btn-link-disabled-border-color,transparent);-webkit-box-shadow:none;box-shadow:none}.alert-app-level .alert-item .btn,.btn-inverse .btn,.btn.btn-inverse{border-color:#fff;border-color:var(--clr-btn-inverse-border-color,#fff);background-color:transparent;background-color:var(--clr-btn-inverse-bg-color,transparent);color:#fff;color:var(--clr-btn-inverse-color,#fff)}.alert-app-level .alert-item .btn cds-icon,.btn-inverse .btn cds-icon,.btn.btn-inverse cds-icon{color:#fff;color:var(--clr-btn-inverse-color,#fff)}.alert-app-level .alert-item .btn:visited,.btn-inverse .btn:visited,.btn.btn-inverse:visited{color:#fff;color:var(--clr-btn-inverse-color,#fff)}.alert-app-level .alert-item .btn:hover,.btn-inverse .btn:hover,.btn.btn-inverse:hover{background-color:rgba(255,255,255,.15);background-color:var(--clr-btn-inverse-hover-bg-color,rgba(255,255,255,.15));color:#fff;color:var(--clr-btn-inverse-hover-color,#fff)}.alert-app-level .alert-item .btn:active,.btn-inverse .btn:active,.btn.btn-inverse:active{-webkit-box-shadow:0 .1rem 0 0 rgba(0,0,0,.25) inset;box-shadow:0 .1rem 0 0 rgba(0,0,0,.25) inset;-webkit-box-shadow:0 .1rem 0 0 var(--clr-btn-inverse-box-shadow-color,rgba(0,0,0,.25)) inset;box-shadow:0 .1rem 0 0 var(--clr-btn-inverse-box-shadow-color,rgba(0,0,0,.25)) inset}.alert-app-level .alert-item .btn.disabled,.alert-app-level .alert-item .btn:disabled,.btn-inverse .btn.disabled,.btn-inverse .btn:disabled,.btn.btn-inverse.disabled,.btn.btn-inverse:disabled{color:#fff;color:var(--clr-btn-inverse-disabled-color,#fff);cursor:not-allowed;opacity:.4;background-color:transparent;background-color:var(--clr-btn-inverse-disabled-bg-color,transparent);border-color:#fff;border-color:var(--clr-btn-inverse-disabled-border-color,#fff);-webkit-box-shadow:none;box-shadow:none}.alert-app-level .alert-item .btn,.btn-sm .btn,.btn.btn-sm{line-height:1.15rem;line-height:var(--clr-btn-appearance-standard-line-height,1.15rem);letter-spacing:.073em;font-size:.55rem;font-size:var(--clr-btn-appearance-standard-font-size,.55rem);font-weight:500;font-weight:var(--clr-btn-appearance-standard-font-weight,500);height:1.2rem;height:var(--clr-btn-appearance-standard-height,1.2rem);padding:0 .6rem;padding:var(--clr-btn-appearance-standard-padding,0 .6rem)}.btn-block{display:block;width:100%;max-width:100%}.btn{margin-top:.3rem;margin-top:var(--clr-btn-vertical-margin,.3rem);margin-bottom:.3rem;margin-bottom:var(--clr-btn-vertical-margin,.3rem);margin-right:.6rem;margin-right:var(--clr-btn-horizontal-margin,.6rem);margin-left:0}.btn.btn-link{margin-right:0}.alert-app-level .alert-item .btn.btn-link,.btn.btn-link.btn-inverse{border-color:transparent}.alert-app-level .alert-item .btn:not(.btn-link) cds-icon,.btn-sm:not(.btn-link) cds-icon{width:.6rem;width:var(--clr-btn-appearance-standard-icon-size,.6rem);height:.6rem;height:var(--clr-btn-appearance-standard-icon-size,.6rem);-webkit-transform:translate3d(0,-.05rem,0);transform:translate3d(0,-.05rem,0)}.btn-icon{min-width:0}.btn-icon.disabled,.btn-icon:disabled{color:#666;color:var(--clr-btn-icon-disabled-color,#666)}.btn-group.btn-danger .dropdown-toggle,.btn-group.btn-primary .dropdown-toggle,.btn-group.btn-success .dropdown-toggle,.btn-group.btn-warning .dropdown-toggle{border-color:#0072a3;border-color:var(--clr-btn-primary-border-color,#0072a3);background-color:#0072a3;background-color:var(--clr-btn-primary-bg-color,#0072a3);color:#fff;color:var(--clr-btn-primary-color,#fff)}.btn-group.btn-danger .dropdown-toggle cds-icon,.btn-group.btn-primary .dropdown-toggle cds-icon,.btn-group.btn-success .dropdown-toggle cds-icon,.btn-group.btn-warning .dropdown-toggle cds-icon{color:#fff;color:var(--clr-btn-primary-color,#fff)}.btn-group.btn-danger .dropdown-toggle:visited,.btn-group.btn-primary .dropdown-toggle:visited,.btn-group.btn-success .dropdown-toggle:visited,.btn-group.btn-warning .dropdown-toggle:visited{color:#fff;color:var(--clr-btn-primary-color,#fff)}.btn-group.btn-danger .dropdown-toggle:hover,.btn-group.btn-primary .dropdown-toggle:hover,.btn-group.btn-success .dropdown-toggle:hover,.btn-group.btn-warning .dropdown-toggle:hover{background-color:#00567a;background-color:var(--clr-btn-primary-hover-bg-color,#00567a);color:#e3f5fc;color:var(--clr-btn-primary-hover-color,#e3f5fc)}.btn-group.btn-danger .dropdown-toggle:active,.btn-group.btn-primary .dropdown-toggle:active,.btn-group.btn-success .dropdown-toggle:active,.btn-group.btn-warning .dropdown-toggle:active{-webkit-box-shadow:0 .1rem 0 0 #179bd3 inset;box-shadow:0 .1rem 0 0 #179bd3 inset;-webkit-box-shadow:0 .1rem 0 0 var(--clr-btn-primary-box-shadow-color,#179bd3) inset;box-shadow:0 .1rem 0 0 var(--clr-btn-primary-box-shadow-color,#179bd3) inset}.btn-group.btn-danger .dropdown-toggle.disabled,.btn-group.btn-danger .dropdown-toggle:disabled,.btn-group.btn-primary .dropdown-toggle.disabled,.btn-group.btn-primary .dropdown-toggle:disabled,.btn-group.btn-success .dropdown-toggle.disabled,.btn-group.btn-success .dropdown-toggle:disabled,.btn-group.btn-warning .dropdown-toggle.disabled,.btn-group.btn-warning .dropdown-toggle:disabled{color:#666;color:var(--clr-btn-primary-disabled-color,#666);cursor:not-allowed;opacity:.4;background-color:#ccc;background-color:var(--clr-btn-primary-disabled-bg-color,#ccc);border-color:#ccc;border-color:var(--clr-btn-primary-disabled-border-color,#ccc);-webkit-box-shadow:none;box-shadow:none}.btn-group.btn-link .dropdown-toggle{border-color:transparent;border-color:var(--clr-btn-link-border-color,transparent);background-color:transparent;background-color:var(--clr-btn-link-bg-color,transparent);color:#0072a3;color:var(--clr-btn-link-color,#0072a3)}.btn-group.btn-link .dropdown-toggle cds-icon{color:#0072a3;color:var(--clr-btn-link-color,#0072a3)}.btn-group.btn-link .dropdown-toggle:visited{color:#0072a3;color:var(--clr-btn-link-color,#0072a3)}.btn-group.btn-link .dropdown-toggle:hover{background-color:transparent;background-color:var(--clr-btn-link-hover-bg-color,transparent);color:#00567a;color:var(--clr-btn-link-hover-color,#00567a)}.btn-group.btn-link .dropdown-toggle:active{-webkit-box-shadow:none;box-shadow:none}.btn-group.btn-link .dropdown-toggle.disabled,.btn-group.btn-link .dropdown-toggle:disabled{color:#666;color:var(--clr-btn-link-disabled-color,#666);cursor:not-allowed;opacity:.4;background-color:transparent;background-color:var(--clr-btn-link-disabled-bg-color,transparent);border-color:transparent;border-color:var(--clr-btn-link-disabled-border-color,transparent);-webkit-box-shadow:none;box-shadow:none}.alert-app-level .alert-item .btn-group.btn .btn-group-overflow>.dropdown-toggle,.btn-group.btn-sm .btn-group-overflow>.dropdown-toggle{line-height:1.15rem;line-height:var(--clr-btn-appearance-standard-line-height,1.15rem);letter-spacing:.073em;font-size:.55rem;font-size:var(--clr-btn-appearance-standard-font-size,.55rem);font-weight:500;font-weight:var(--clr-btn-appearance-standard-font-weight,500);height:1.2rem;height:var(--clr-btn-appearance-standard-height,1.2rem);padding:0 .6rem;padding:var(--clr-btn-appearance-standard-padding,0 .6rem)}.checkbox-inline.btn,.checkbox.btn,.radio-inline.btn,.radio.btn{padding:0}.checkbox-inline.btn label,.checkbox.btn label,.radio-inline.btn label,.radio.btn label{display:block;line-height:inherit;padding:0 .6rem;cursor:pointer}.checkbox-inline.btn input[type=checkbox]+label::after,.checkbox-inline.btn input[type=checkbox]+label::before,.checkbox.btn input[type=checkbox]+label::after,.checkbox.btn input[type=checkbox]+label::before{content:none}.radio-inline.btn input[type=radio]+label::after,.radio-inline.btn input[type=radio]+label::before,.radio.btn input[type=radio]+label::after,.radio.btn input[type=radio]+label::before{content:none}.checkbox-inline.btn input[type=checkbox]:checked+label,.checkbox.btn input[type=checkbox]:checked+label{background-color:#0072a3;color:#fff}.checkbox-inline.btn label,.checkbox.btn label{width:100%}.checkbox-inline.btn.btn-info input[type=checkbox]:checked+label,.checkbox-inline.btn.btn-info-outline input[type=checkbox]:checked+label,.checkbox-inline.btn.btn-outline input[type=checkbox]:checked+label,.checkbox-inline.btn.btn-outline-info input[type=checkbox]:checked+label,.checkbox-inline.btn.btn-outline-primary input[type=checkbox]:checked+label,.checkbox-inline.btn.btn-outline-secondary input[type=checkbox]:checked+label,.checkbox-inline.btn.btn-primary-outline input[type=checkbox]:checked+label,.checkbox-inline.btn.btn-secondary input[type=checkbox]:checked+label,.checkbox-inline.btn.btn-secondary-outline input[type=checkbox]:checked+label,.checkbox.btn.btn-info input[type=checkbox]:checked+label,.checkbox.btn.btn-info-outline input[type=checkbox]:checked+label,.checkbox.btn.btn-outline input[type=checkbox]:checked+label,.checkbox.btn.btn-outline-info input[type=checkbox]:checked+label,.checkbox.btn.btn-outline-primary input[type=checkbox]:checked+label,.checkbox.btn.btn-outline-secondary input[type=checkbox]:checked+label,.checkbox.btn.btn-primary-outline input[type=checkbox]:checked+label,.checkbox.btn.btn-secondary input[type=checkbox]:checked+label,.checkbox.btn.btn-secondary-outline input[type=checkbox]:checked+label{background-color:#0072a3;color:#fff}.checkbox-inline.btn.btn-primary input[type=checkbox]:checked+label,.checkbox.btn.btn-primary input[type=checkbox]:checked+label{background-color:#0072a3;color:#fff}.checkbox-inline.btn.btn-success input[type=checkbox]:checked+label,.checkbox.btn.btn-success input[type=checkbox]:checked+label{background-color:#306b00;color:#fff}.checkbox-inline.btn.btn-danger input[type=checkbox]:checked+label,.checkbox-inline.btn.btn-warning input[type=checkbox]:checked+label,.checkbox.btn.btn-danger input[type=checkbox]:checked+label,.checkbox.btn.btn-warning input[type=checkbox]:checked+label{background-color:#c21d00;color:#fff}.checkbox-inline.btn.btn-link input[type=checkbox]:checked+label,.checkbox.btn.btn-link input[type=checkbox]:checked+label{background-color:transparent;color:#00567a}.alert-app-level .alert-item .checkbox-inline.btn input[type=checkbox]:checked+label,.alert-app-level .alert-item .checkbox.btn input[type=checkbox]:checked+label,.checkbox-inline.btn.btn-inverse input[type=checkbox]:checked+label,.checkbox.btn.btn-inverse input[type=checkbox]:checked+label{background-color:rgba(255,255,255,.15);color:#fff}.radio.btn input[type=radio]:checked+label{background-color:#0072a3;color:#fff}.radio.btn label{width:100%}.radio.btn.btn-info input[type=radio]:checked+label,.radio.btn.btn-info-outline input[type=radio]:checked+label,.radio.btn.btn-outline input[type=radio]:checked+label,.radio.btn.btn-outline-info input[type=radio]:checked+label,.radio.btn.btn-outline-primary input[type=radio]:checked+label,.radio.btn.btn-outline-secondary input[type=radio]:checked+label,.radio.btn.btn-primary-outline input[type=radio]:checked+label,.radio.btn.btn-secondary input[type=radio]:checked+label,.radio.btn.btn-secondary-outline input[type=radio]:checked+label{background-color:#0072a3;color:#fff}.radio.btn.btn-primary input[type=radio]:checked+label{background-color:#0072a3;color:#fff}.radio.btn.btn-success input[type=radio]:checked+label{background-color:#306b00;color:#fff}.radio.btn.btn-danger input[type=radio]:checked+label,.radio.btn.btn-warning input[type=radio]:checked+label{background-color:#c21d00;color:#fff}.radio.btn.btn-outline-success input[type=radio]:checked+label,.radio.btn.btn-success-outline input[type=radio]:checked+label{background-color:#3c8500;color:#fff}.radio.btn.btn-danger-outline input[type=radio]:checked+label,.radio.btn.btn-outline-danger input[type=radio]:checked+label,.radio.btn.btn-outline-warning input[type=radio]:checked+label,.radio.btn.btn-warning-outline input[type=radio]:checked+label{background-color:#c21d00;color:#fff}.radio.btn.btn-link input[type=radio]:checked+label{background-color:transparent;color:#00567a}.alert-app-level .alert-item .radio.btn input[type=radio]:checked+label,.radio.btn.btn-inverse input[type=radio]:checked+label{background-color:rgba(255,255,255,.15);color:#fff}.btn-group{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-right:.6rem}.btn-group .btn{margin:0;vertical-align:top;overflow:visible}.btn-group .btn label{height:100%}.btn-group .btn input[type=checkbox]:focus,.btn-group .btn input[type=radio]:focus{-webkit-appearance:none;-moz-appearance:none;appearance:none;opacity:1;top:0;height:100%;width:100%;-webkit-box-shadow:0 0 .25rem #51cbee;box-shadow:0 0 .25rem #51cbee;-webkit-box-shadow:0 0 .25rem var(--clr-btn-group-focus-outline,#51cbee);box-shadow:0 0 .25rem var(--clr-btn-group-focus-outline,#51cbee);padding:.15rem 0 .15rem .15rem;border-width:.05rem;border-style:solid;border-color:#51cbee;border-color:var(--clr-btn-group-focus-outline,#51cbee)}.btn-group .btn input[type=checkbox]:focus::-ms-check,.btn-group .btn input[type=radio]:focus::-ms-check{display:none}.btn-group .btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.btn-group .btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group .tooltip:not(:first-child) .btn{border-top-left-radius:0;border-bottom-left-radius:0}.btn-group .tooltip:not(:last-child) .btn{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group.btn-danger .btn:not(:last-child),.btn-group.btn-danger .tooltip:not(:last-child) .btn,.btn-group.btn-primary .btn:not(:last-child),.btn-group.btn-primary .tooltip:not(:last-child) .btn,.btn-group.btn-success .btn:not(:last-child),.btn-group.btn-success .tooltip:not(:last-child) .btn,.btn-group.btn-warning .btn:not(:last-child),.btn-group.btn-warning .tooltip:not(:last-child) .btn{margin:0;margin-right:.05rem;margin-right:var(--clr-btn-border-width,.05rem)}.btn-group.btn-danger .dropdown-menu .btn,.btn-group.btn-primary .dropdown-menu .btn,.btn-group.btn-success .dropdown-menu .btn,.btn-group.btn-warning .dropdown-menu .btn{margin:0}.btn-group>.btn-group-overflow{position:relative}.btn-group>.btn-group-overflow:last-child:not(:first-child)>.btn:first-child{border-radius:.15rem;border-radius:var(--clr-btn-border-radius,.15rem);border-top-left-radius:0;border-bottom-left-radius:0}.btn-group>.btn-group-overflow:last-child:first-child>.btn:first-child{border-radius:.15rem;border-radius:var(--clr-btn-border-radius,.15rem)}.btn-group .btn+.btn{border-left:none}.btn-group .tooltip:not(:first-child) .btn{border-left:none}.btn-group .btn+.btn-group-overflow .btn{border-left:none}.btn-group.btn-link .dropdown-toggle{min-width:0}.btn-group.btn-icon-link.btn-link .btn{min-width:0}.btn-group.btn-icon .btn{min-width:0}.btn-group .clr-icon-title{display:none;text-transform:none}.btn-group .dropdown-toggle{display:block}.btn-group .dropdown-menu cds-icon{display:none}.btn-group .dropdown-menu .clr-icon-title{display:inline}.checkbox,.radio{position:relative}.checkbox input[type=checkbox],.checkbox input[type=radio],.radio input[type=checkbox],.radio input[type=radio]{position:absolute;top:0;left:0;height:0;width:0;opacity:0}.card-footer .checkbox.btn label,.card-footer .radio.btn label{line-height:1.15rem}.dropdown-menu.clr-button-group-menu{visibility:visible}button.close{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none}.close{float:right;font-size:1.8rem;-webkit-transition:color linear .2s;transition:color linear .2s;font-weight:200;text-shadow:none;line-height:inherit;color:#8c8c8c;color:var(--clr-close-color--normal,#8c8c8c)}.close cds-icon{fill:#8c8c8c;fill:var(--clr-close-color--normal,#8c8c8c)}.close:active,.close:focus,.close:hover{opacity:1;color:#000;color:var(--clr-close-color--hover,#000)}.close:active cds-icon,.close:focus cds-icon,.close:hover cds-icon{fill:#000;fill:var(--clr-close-color--hover,#000)}.close:focus{outline:0;-webkit-box-shadow:0 0 .1rem .1rem #69c0e2;box-shadow:0 0 .1rem .1rem #69c0e2}:root{--clr-alert-action-color:var(--clr-color-neutral-700);--clr-alert-action-active-color:var(--clr-color-secondary-action-900);--clr-alert-close-icon-color:var(--clr-alert-action-color);--clr-alert-close-icon-hover-color:var(--clr-alert-action-active-color);--clr-alert-close-icon-opacity:1;--clr-alert-close-icon-hover-opacity:1;--clr-app-level-alert-color:var(--clr-color-neutral-0);--clr-app-alert-close-icon-color:var(--clr-app-level-alert-color);--clr-app-alert-close-icon-opacity:0.8;--clr-app-alert-close-icon-hover-opacity:1;--clr-alert-borderradius:var(--clr-global-borderradius);--clr-alert-info-bg-color:var(--clr-color-action-50);--clr-alert-info-font-color:var(--clr-color-neutral-700);--clr-alert-info-border-color:var(--clr-color-action-800);--clr-alert-info-icon-color:var(--clr-color-action-800);--clr-alert-info-action-color:var(--clr-alert-action-color);--clr-alert-info-action-active-color:var(--clr-alert-action-active-color);--clr-alert-info-close-icon-color:var(--clr-alert-close-icon-color);--clr-alert-info-close-icon-opacity:var(--clr-alert-close-icon-opacity);--clr-alert-info-close-icon-hover-color:var(--clr-alert-close-icon-hover-color);--clr-alert-info-close-icon-hover-opacity:var(--clr-alert-close-icon-hover-opacity);--clr-alert-success-bg-color:var(--clr-color-success-50);--clr-alert-success-font-color:var(--clr-color-neutral-700);--clr-alert-success-border-color:var(--clr-color-success-800);--clr-alert-success-icon-color:var(--clr-color-success-800);--clr-alert-success-action-color:var(--clr-alert-action-color);--clr-alert-success-action-active-color:var(--clr-alert-action-active-color);--clr-alert-success-close-icon-color:var(--clr-alert-close-icon-color);--clr-alert-success-close-icon-opacity:var(--clr-alert-close-icon-opacity);--clr-alert-success-close-icon-hover-color:var(--clr-alert-close-icon-hover-color);--clr-alert-success-close-icon-hover-opacity:var(--clr-alert-close-icon-hover-opacity);--clr-alert-warning-bg-color:var(--clr-color-warning-100);--clr-alert-warning-font-color:var(--clr-color-neutral-900);--clr-alert-warning-border-color:var(--clr-color-warning-800);--clr-alert-warning-icon-color:var(--clr-color-warning-800);--clr-alert-warning-action-color:var(--clr-alert-action-color);--clr-alert-warning-action-active-color:var(--clr-alert-action-active-color);--clr-alert-warning-close-icon-color:var(--clr-alert-close-icon-color);--clr-alert-warning-close-icon-opacity:var(--clr-alert-close-icon-opacity);--clr-alert-warning-close-icon-hover-color:var(--clr-alert-close-icon-hover-color);--clr-alert-warning-close-icon-hover-opacity:var(--clr-alert-close-icon-hover-opacity);--clr-alert-danger-bg-color:var(--clr-color-danger-100);--clr-alert-danger-font-color:var(--clr-color-neutral-700);--clr-alert-danger-border-color:var(--clr-color-danger-900);--clr-alert-danger-icon-color:var(--clr-color-danger-900);--clr-alert-danger-action-color:var(--clr-alert-action-color);--clr-alert-danger-action-active-color:var(--clr-alert-action-active-color);--clr-alert-danger-close-icon-color:var(--clr-alert-close-icon-color);--clr-alert-danger-close-icon-opacity:var(--clr-alert-close-icon-opacity);--clr-alert-danger-close-icon-hover-color:var(--clr-alert-close-icon-hover-color);--clr-alert-danger-close-icon-hover-opacity:var(--clr-alert-close-icon-hover-opacity);--clr-app-alert-info-bg-color:var(--clr-color-action-600);--clr-app-alert-info-font-color:var(--clr-app-level-alert-color);--clr-app-alert-info-border-color:none;--clr-app-alert-info-icon-color:var(--clr-app-alert-close-icon-color);--clr-app-alert-info-action-color:var(--clr-app-alert-info-font-color);--clr-app-alert-info-action-active-color:var(--clr-app-alert-info-font-color);--clr-app-alert-info-close-icon-color:var(--clr-app-alert-close-icon-color);--clr-app-alert-info-close-icon-opacity:var(--clr-app-alert-close-icon-opacity);--clr-app-alert-info-close-icon-hover-color:var(--clr-app-alert-close-icon-color);--clr-app-alert-info-close-icon-hover-opacity:var(--clr-app-alert-close-icon-hover-opacity);--clr-app-alert-warning-bg-color:hsl(26, 100%, 38%);--clr-app-alert-warning-border-color:none;--clr-app-alert-warning-icon-color:var(--clr-app-alert-close-icon-color);--clr-app-alert-warning-font-color:var(--clr-app-level-alert-color);--clr-app-alert-warning-close-icon-color:var(--clr-app-alert-close-icon-color);--clr-app-alert-warning-action-color:var(--clr-app-alert-warning-font-color);--clr-app-alert-warning-action-active-color:var(--clr-app-alert-warning-font-color);--clr-app-alert-warning-close-icon-opacity:var(--clr-app-alert-close-icon-opacity);--clr-app-alert-warning-close-icon-hover-color:var(--clr-app-alert-close-icon-color);--clr-app-alert-warning-close-icon-hover-opacity:var(--clr-app-alert-close-icon-hover-opacity);--clr-app-alert-danger-bg-color:var(--clr-color-danger-800);--clr-app-alert-danger-border-color:none;--clr-app-alert-danger-icon-color:var(--clr-app-alert-close-icon-color);--clr-app-alert-danger-font-color:var(--clr-app-level-alert-color);--clr-app-alert-danger-close-icon-color:var(--clr-app-alert-close-icon-color);--clr-app-alert-danger-action-color:var(--clr-app-alert-danger-font-color);--clr-app-alert-danger-action-active-color:var(--clr-app-alert-danger-font-color);--clr-app-alert-danger-close-icon-opacity:var(--clr-app-alert-close-icon-opacity);--clr-app-alert-danger-close-icon-hover-color:var(--clr-app-alert-close-icon-color);--clr-app-alert-danger-close-icon-hover-opacity:var(--clr-app-alert-close-icon-hover-opacity);--clr-app-alert-success-border-color:none;--clr-app-alert-success-bg-color:var(--clr-color-success-700);--clr-app-alert-success-icon-color:var(--clr-app-alert-close-icon-color);--clr-app-alert-success-font-color:var(--clr-app-level-alert-color);--clr-app-alert-success-close-icon-color:var(--clr-app-alert-close-icon-color);--clr-app-alert-success-action-color:var(--clr-app-alert-success-font-color);--clr-app-alert-success-action-active-color:var(--clr-app-alert-success-font-color);--clr-app-alert-success-close-icon-opacity:var(--clr-app-alert-close-icon-opacity);--clr-app-alert-success-close-icon-hover-color:var(--clr-app-alert-close-icon-color);--clr-app-alert-success-close-icon-hover-opacity:var(--clr-app-alert-close-icon-hover-opacity);--clr-app-alert-pager-text-color:var(--clr-color-neutral-0, white);--clr-app-alert-info-pager-bg-color:var(--clr-color-action-800, #00567a);--clr-app-alert-warning-pager-bg-color:var(--clr-color-warning-900, #8f5a00);--clr-app-alert-danger-pager-bg-color:var(--clr-color-danger-900, #991700)}.alert-icon{height:1.2rem;width:1.2rem;margin-left:-.15rem;margin-top:-.2rem}.alert-icon-wrapper{-webkit-box-flex:0;-ms-flex:0 0 1.25rem;flex:0 0 1.25rem;-ms-flex-item-align:start;align-self:start;padding-top:.05rem;height:.9rem}.alert-item{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;min-height:.9rem;margin-bottom:.3rem}.alert-item:last-child{margin-bottom:0}.alert-items{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column nowrap;flex-flow:column nowrap;padding:.4rem .55rem;display:-webkit-box;display:-ms-flexbox;display:flex}.alert-item>span,.alert-text{display:inline-block;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-preferred-size:98%;flex-basis:98%;max-width:98%;margin-right:.6rem;text-align:left}.alert{font-size:.65rem;letter-spacing:normal;line-height:.9rem;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;width:auto;border-radius:.15rem;border-radius:var(--clr-alert-borderradius,.15rem);margin-top:.3rem;background:#e3f5fc;background:var(--clr-alert-info-bg-color,#e3f5fc);color:#666;color:var(--clr-alert-info-font-color,#666);border:.05rem solid;border-color:#00567a;border-color:var(--clr-alert-info-border-color,#00567a)}.alert .alert-icon{color:#00567a;color:var(--clr-alert-info-icon-color,#00567a)}.alert .alert-actions .dropdown .dropdown-toggle{color:#666;color:var(--clr-alert-info-action-color,#666);border-color:#666;border-color:var(--clr-alert-info-action-color,#666)}.alert .alert-action,.alert .dropdown-toggle{color:#666;color:var(--clr-alert-info-action-color,#666)}.alert .alert-action.btn,.alert .dropdown-toggle.btn{border-color:#666;border-color:var(--clr-alert-info-action-color,#666)}.alert .alert-action.btn:active,.alert .alert-action.btn:focus,.alert .alert-action.btn:hover,.alert .dropdown-toggle.btn:active,.alert .dropdown-toggle.btn:focus,.alert .dropdown-toggle.btn:hover{border-color:#4f0070;border-color:var(--clr-alert-info-action-active-color,#4f0070)}.alert .alert-action.btn:active,.alert .dropdown-toggle.btn:active{-webkit-box-shadow:0 .05rem 0 0 #4f0070 inset;box-shadow:0 .05rem 0 0 #4f0070 inset;-webkit-box-shadow:0 .05rem 0 0 var(--clr-alert-info-action-active-color,#4f0070) inset;box-shadow:0 .05rem 0 0 var(--clr-alert-info-action-active-color,#4f0070) inset}.alert .alert-action:active,.alert .alert-action:focus,.alert .alert-action:hover,.alert .dropdown-toggle:active,.alert .dropdown-toggle:focus,.alert .dropdown-toggle:hover{color:#4f0070;color:var(--clr-alert-info-action-active-color,#4f0070);color:#4f0070}.alert .close{color:#666;color:var(--clr-alert-info-close-icon-color,#666);opacity:1;opacity:var(--clr-alert-info-close-icon-opacity,1)}.alert .close cds-icon{fill:#666;fill:var(--clr-alert-info-close-icon-color,#666)}.alert .close:active,.alert .close:focus,.alert .close:hover{color:#4f0070;color:var(--clr-alert-info-close-icon-hover-color,#4f0070);opacity:1;opacity:var(--clr-alert-info-close-icon-hover-opacity,1)}.alert.alert-info{background:#e3f5fc;background:var(--clr-alert-info-bg-color,#e3f5fc);color:#666;color:var(--clr-alert-info-font-color,#666);border:.05rem solid;border-color:#00567a;border-color:var(--clr-alert-info-border-color,#00567a)}.alert.alert-info .alert-icon{color:#00567a;color:var(--clr-alert-info-icon-color,#00567a)}.alert.alert-info .alert-actions .dropdown .dropdown-toggle{color:#666;color:var(--clr-alert-info-action-color,#666);border-color:#666;border-color:var(--clr-alert-info-action-color,#666)}.alert.alert-info .alert-action,.alert.alert-info .dropdown-toggle{color:#666;color:var(--clr-alert-info-action-color,#666)}.alert.alert-info .alert-action.btn,.alert.alert-info .dropdown-toggle.btn{border-color:#666;border-color:var(--clr-alert-info-action-color,#666)}.alert.alert-info .alert-action.btn:active,.alert.alert-info .alert-action.btn:focus,.alert.alert-info .alert-action.btn:hover,.alert.alert-info .dropdown-toggle.btn:active,.alert.alert-info .dropdown-toggle.btn:focus,.alert.alert-info .dropdown-toggle.btn:hover{border-color:#4f0070;border-color:var(--clr-alert-info-action-active-color,#4f0070)}.alert.alert-info .alert-action.btn:active,.alert.alert-info .dropdown-toggle.btn:active{-webkit-box-shadow:0 .05rem 0 0 #4f0070 inset;box-shadow:0 .05rem 0 0 #4f0070 inset;-webkit-box-shadow:0 .05rem 0 0 var(--clr-alert-info-action-active-color,#4f0070) inset;box-shadow:0 .05rem 0 0 var(--clr-alert-info-action-active-color,#4f0070) inset}.alert.alert-info .alert-action:active,.alert.alert-info .alert-action:focus,.alert.alert-info .alert-action:hover,.alert.alert-info .dropdown-toggle:active,.alert.alert-info .dropdown-toggle:focus,.alert.alert-info .dropdown-toggle:hover{color:#4f0070;color:var(--clr-alert-info-action-active-color,#4f0070);color:#4f0070}.alert.alert-info .close{color:#666;color:var(--clr-alert-info-close-icon-color,#666);opacity:1;opacity:var(--clr-alert-info-close-icon-opacity,1)}.alert.alert-info .close cds-icon{fill:#666;fill:var(--clr-alert-info-close-icon-color,#666)}.alert.alert-info .close:active,.alert.alert-info .close:focus,.alert.alert-info .close:hover{color:#4f0070;color:var(--clr-alert-info-close-icon-hover-color,#4f0070);opacity:1;opacity:var(--clr-alert-info-close-icon-hover-opacity,1)}.alert.alert-success{background:#dff0d0;background:var(--clr-alert-success-bg-color,#dff0d0);color:#666;color:var(--clr-alert-success-font-color,#666);border:.05rem solid;border-color:#306b00;border-color:var(--clr-alert-success-border-color,#306b00)}.alert.alert-success .alert-icon{color:#306b00;color:var(--clr-alert-success-icon-color,#306b00)}.alert.alert-success .alert-actions .dropdown .dropdown-toggle{color:#666;color:var(--clr-alert-success-action-color,#666);border-color:#666;border-color:var(--clr-alert-success-action-color,#666)}.alert.alert-success .alert-action,.alert.alert-success .dropdown-toggle{color:#666;color:var(--clr-alert-success-action-color,#666)}.alert.alert-success .alert-action.btn,.alert.alert-success .dropdown-toggle.btn{border-color:#666;border-color:var(--clr-alert-success-action-color,#666)}.alert.alert-success .alert-action.btn:active,.alert.alert-success .alert-action.btn:focus,.alert.alert-success .alert-action.btn:hover,.alert.alert-success .dropdown-toggle.btn:active,.alert.alert-success .dropdown-toggle.btn:focus,.alert.alert-success .dropdown-toggle.btn:hover{border-color:#4f0070;border-color:var(--clr-alert-success-action-active-color,#4f0070)}.alert.alert-success .alert-action.btn:active,.alert.alert-success .dropdown-toggle.btn:active{-webkit-box-shadow:0 .05rem 0 0 #4f0070 inset;box-shadow:0 .05rem 0 0 #4f0070 inset;-webkit-box-shadow:0 .05rem 0 0 var(--clr-alert-success-action-active-color,#4f0070) inset;box-shadow:0 .05rem 0 0 var(--clr-alert-success-action-active-color,#4f0070) inset}.alert.alert-success .alert-action:active,.alert.alert-success .alert-action:focus,.alert.alert-success .alert-action:hover,.alert.alert-success .dropdown-toggle:active,.alert.alert-success .dropdown-toggle:focus,.alert.alert-success .dropdown-toggle:hover{color:#4f0070;color:var(--clr-alert-success-action-active-color,#4f0070);color:#4f0070}.alert.alert-success .close{color:#666;color:var(--clr-alert-success-close-icon-color,#666);opacity:1;opacity:var(--clr-alert-success-close-icon-opacity,1)}.alert.alert-success .close cds-icon{fill:#666;fill:var(--clr-alert-success-close-icon-color,#666)}.alert.alert-success .close:active,.alert.alert-success .close:focus,.alert.alert-success .close:hover{color:#4f0070;color:var(--clr-alert-success-close-icon-hover-color,#4f0070);opacity:1;opacity:var(--clr-alert-success-close-icon-hover-opacity,1)}.alert.alert-warning{background:#fff4c7;background:var(--clr-alert-warning-bg-color,#fff4c7);color:#333;color:var(--clr-alert-warning-font-color,#333);border:.05rem solid;border-color:#ad7600;border-color:var(--clr-alert-warning-border-color,#ad7600)}.alert.alert-warning .alert-icon{color:#454545;color:var(--clr-alert-warning-icon-color,#454545)}.alert.alert-warning .alert-actions .dropdown .dropdown-toggle{color:#666;color:var(--clr-alert-warning-action-color,#666);border-color:#666;border-color:var(--clr-alert-warning-action-color,#666)}.alert.alert-warning .alert-action,.alert.alert-warning .dropdown-toggle{color:#666;color:var(--clr-alert-warning-action-color,#666)}.alert.alert-warning .alert-action.btn,.alert.alert-warning .dropdown-toggle.btn{border-color:#666;border-color:var(--clr-alert-warning-action-color,#666)}.alert.alert-warning .alert-action.btn:active,.alert.alert-warning .alert-action.btn:focus,.alert.alert-warning .alert-action.btn:hover,.alert.alert-warning .dropdown-toggle.btn:active,.alert.alert-warning .dropdown-toggle.btn:focus,.alert.alert-warning .dropdown-toggle.btn:hover{border-color:#4f0070;border-color:var(--clr-alert-warning-action-active-color,#4f0070)}.alert.alert-warning .alert-action.btn:active,.alert.alert-warning .dropdown-toggle.btn:active{-webkit-box-shadow:0 .05rem 0 0 #4f0070 inset;box-shadow:0 .05rem 0 0 #4f0070 inset;-webkit-box-shadow:0 .05rem 0 0 var(--clr-alert-warning-action-active-color,#4f0070) inset;box-shadow:0 .05rem 0 0 var(--clr-alert-warning-action-active-color,#4f0070) inset}.alert.alert-warning .alert-action:active,.alert.alert-warning .alert-action:focus,.alert.alert-warning .alert-action:hover,.alert.alert-warning .dropdown-toggle:active,.alert.alert-warning .dropdown-toggle:focus,.alert.alert-warning .dropdown-toggle:hover{color:#4f0070;color:var(--clr-alert-warning-action-active-color,#4f0070);color:#4f0070}.alert.alert-warning .close{color:#666;color:var(--clr-alert-warning-close-icon-color,#666);opacity:1;opacity:var(--clr-alert-warning-close-icon-opacity,1)}.alert.alert-warning .close cds-icon{fill:#666;fill:var(--clr-alert-warning-close-icon-color,#666)}.alert.alert-warning .close:active,.alert.alert-warning .close:focus,.alert.alert-warning .close:hover{color:#4f0070;color:var(--clr-alert-warning-close-icon-hover-color,#4f0070);opacity:1;opacity:var(--clr-alert-warning-close-icon-hover-opacity,1)}.alert.alert-danger{background:#feddd7;background:var(--clr-alert-danger-bg-color,#feddd7);color:#666;color:var(--clr-alert-danger-font-color,#666);border:.05rem solid;border-color:#991700;border-color:var(--clr-alert-danger-border-color,#991700)}.alert.alert-danger .alert-icon{color:#991700;color:var(--clr-alert-danger-icon-color,#991700)}.alert.alert-danger .alert-actions .dropdown .dropdown-toggle{color:#666;color:var(--clr-alert-danger-action-color,#666);border-color:#666;border-color:var(--clr-alert-danger-action-color,#666)}.alert.alert-danger .alert-action,.alert.alert-danger .dropdown-toggle{color:#666;color:var(--clr-alert-danger-action-color,#666)}.alert.alert-danger .alert-action.btn,.alert.alert-danger .dropdown-toggle.btn{border-color:#666;border-color:var(--clr-alert-danger-action-color,#666)}.alert.alert-danger .alert-action.btn:active,.alert.alert-danger .alert-action.btn:focus,.alert.alert-danger .alert-action.btn:hover,.alert.alert-danger .dropdown-toggle.btn:active,.alert.alert-danger .dropdown-toggle.btn:focus,.alert.alert-danger .dropdown-toggle.btn:hover{border-color:#4f0070;border-color:var(--clr-alert-danger-action-active-color,#4f0070)}.alert.alert-danger .alert-action.btn:active,.alert.alert-danger .dropdown-toggle.btn:active{-webkit-box-shadow:0 .05rem 0 0 #4f0070 inset;box-shadow:0 .05rem 0 0 #4f0070 inset;-webkit-box-shadow:0 .05rem 0 0 var(--clr-alert-danger-action-active-color,#4f0070) inset;box-shadow:0 .05rem 0 0 var(--clr-alert-danger-action-active-color,#4f0070) inset}.alert.alert-danger .alert-action:active,.alert.alert-danger .alert-action:focus,.alert.alert-danger .alert-action:hover,.alert.alert-danger .dropdown-toggle:active,.alert.alert-danger .dropdown-toggle:focus,.alert.alert-danger .dropdown-toggle:hover{color:#4f0070;color:var(--clr-alert-danger-action-active-color,#4f0070);color:#4f0070}.alert.alert-danger .close{color:#666;color:var(--clr-alert-danger-close-icon-color,#666);opacity:1;opacity:var(--clr-alert-danger-close-icon-opacity,1)}.alert.alert-danger .close cds-icon{fill:#666;fill:var(--clr-alert-danger-close-icon-color,#666)}.alert.alert-danger .close:active,.alert.alert-danger .close:focus,.alert.alert-danger .close:hover{color:#4f0070;color:var(--clr-alert-danger-close-icon-hover-color,#4f0070);opacity:1;opacity:var(--clr-alert-danger-close-icon-hover-opacity,1)}.alert .alert-item .clr-icon{height:.9rem;width:.9rem;margin-right:.3rem}.alert .alert-item .clr-icon+.alert-text{padding-left:0}.alert .alert-item .clr-icon+.alert-text::before{content:none}.alert .alert-actions{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;white-space:nowrap}.alert .alert-actions .dropdown:last-child{margin-right:-.1rem}.alert .alert-actions .dropdown-item{color:#666;color:var(--clr-dropdown-text-color,#666);font-size:.7rem;line-height:1.2rem;letter-spacing:normal}.alert .alert-action:not(:last-child){margin-right:.6rem}.alert .alert-action,.alert .dropdown-toggle{text-decoration:underline}.alert .alert-action button.dropdown-toggle:not(.btn){background:0 0;cursor:pointer;color:#666;color:var(--clr-dropdown-text-color,#666)}.alert .dropdown-toggle:not(.btn){display:inline-block;background:0 0;border:none}.alert .close{width:1.2rem;display:block;height:1.8rem;-webkit-box-flex:0;-ms-flex:0 0 1.4rem;flex:0 0 1.4rem;-webkit-box-ordinal-group:101;-ms-flex-order:100;order:100;padding-right:.2rem}.alert .close cds-icon{margin-top:-.15rem;height:1.15rem;width:1.15rem}.alert .close~.alert-item>.alert-actions{padding-right:.6rem}.alert .close~.alert-item>.alert-actions>.alert-action:last-child{margin-right:.6rem}.alert-app-level{margin:0;border:none;border-radius:0;overflow-y:auto;background:#0072a3;background:var(--clr-app-alert-info-bg-color,#0072a3);color:#fff;color:var(--clr-app-alert-info-font-color,#fff);border:none}.alert-app-level .alert-icon{color:#fff;color:var(--clr-app-alert-info-icon-color,#fff)}.alert-app-level .alert-actions .dropdown .dropdown-toggle{color:#fff;color:var(--clr-app-alert-info-action-color,#fff);border-color:#fff;border-color:var(--clr-app-alert-info-action-color,#fff)}.alert-app-level .alert-action,.alert-app-level .dropdown-toggle{color:#fff;color:var(--clr-app-alert-info-action-color,#fff)}.alert-app-level .alert-action.btn,.alert-app-level .dropdown-toggle.btn{border-color:#fff;border-color:var(--clr-app-alert-info-action-color,#fff)}.alert-app-level .alert-action.btn:active,.alert-app-level .alert-action.btn:focus,.alert-app-level .alert-action.btn:hover,.alert-app-level .dropdown-toggle.btn:active,.alert-app-level .dropdown-toggle.btn:focus,.alert-app-level .dropdown-toggle.btn:hover{border-color:#fff;border-color:var(--clr-app-alert-info-action-active-color,#fff)}.alert-app-level .alert-action.btn:active,.alert-app-level .dropdown-toggle.btn:active{-webkit-box-shadow:0 .05rem 0 0 #fff inset;box-shadow:0 .05rem 0 0 #fff inset;-webkit-box-shadow:0 .05rem 0 0 var(--clr-app-alert-info-action-active-color,#fff) inset;box-shadow:0 .05rem 0 0 var(--clr-app-alert-info-action-active-color,#fff) inset}.alert-app-level .alert-action:active,.alert-app-level .alert-action:focus,.alert-app-level .alert-action:hover,.alert-app-level .dropdown-toggle:active,.alert-app-level .dropdown-toggle:focus,.alert-app-level .dropdown-toggle:hover{color:#fff;color:var(--clr-app-alert-info-action-active-color,#fff);color:#fff}.alert-app-level .close{color:#fff;color:var(--clr-app-alert-info-close-icon-color,#fff);opacity:.8;opacity:var(--clr-app-alert-info-close-icon-opacity,.8)}.alert-app-level .close cds-icon{fill:#fff;fill:var(--clr-app-alert-info-close-icon-color,#fff)}.alert-app-level .close:active,.alert-app-level .close:focus,.alert-app-level .close:hover{color:#fff;color:var(--clr-app-alert-info-close-icon-hover-color,#fff);opacity:1;opacity:var(--clr-app-alert-info-close-icon-hover-opacity,1)}.alert-app-level.alert-info{background:#0072a3;background:var(--clr-app-alert-info-bg-color,#0072a3);color:#fff;color:var(--clr-app-alert-info-font-color,#fff);border:none}.alert-app-level.alert-info .alert-icon{color:#fff;color:var(--clr-app-alert-info-icon-color,#fff)}.alert-app-level.alert-info .alert-actions .dropdown .dropdown-toggle{color:#fff;color:var(--clr-app-alert-info-action-color,#fff);border-color:#fff;border-color:var(--clr-app-alert-info-action-color,#fff)}.alert-app-level.alert-info .alert-action,.alert-app-level.alert-info .dropdown-toggle{color:#fff;color:var(--clr-app-alert-info-action-color,#fff)}.alert-app-level.alert-info .alert-action.btn,.alert-app-level.alert-info .dropdown-toggle.btn{border-color:#fff;border-color:var(--clr-app-alert-info-action-color,#fff)}.alert-app-level.alert-info .alert-action.btn:active,.alert-app-level.alert-info .alert-action.btn:focus,.alert-app-level.alert-info .alert-action.btn:hover,.alert-app-level.alert-info .dropdown-toggle.btn:active,.alert-app-level.alert-info .dropdown-toggle.btn:focus,.alert-app-level.alert-info .dropdown-toggle.btn:hover{border-color:#fff;border-color:var(--clr-app-alert-info-action-active-color,#fff)}.alert-app-level.alert-info .alert-action.btn:active,.alert-app-level.alert-info .dropdown-toggle.btn:active{-webkit-box-shadow:0 .05rem 0 0 #fff inset;box-shadow:0 .05rem 0 0 #fff inset;-webkit-box-shadow:0 .05rem 0 0 var(--clr-app-alert-info-action-active-color,#fff) inset;box-shadow:0 .05rem 0 0 var(--clr-app-alert-info-action-active-color,#fff) inset}.alert-app-level.alert-info .alert-action:active,.alert-app-level.alert-info .alert-action:focus,.alert-app-level.alert-info .alert-action:hover,.alert-app-level.alert-info .dropdown-toggle:active,.alert-app-level.alert-info .dropdown-toggle:focus,.alert-app-level.alert-info .dropdown-toggle:hover{color:#fff;color:var(--clr-app-alert-info-action-active-color,#fff);color:#fff}.alert-app-level.alert-info .close{color:#fff;color:var(--clr-app-alert-info-close-icon-color,#fff);opacity:.8;opacity:var(--clr-app-alert-info-close-icon-opacity,.8)}.alert-app-level.alert-info .close cds-icon{fill:#fff;fill:var(--clr-app-alert-info-close-icon-color,#fff)}.alert-app-level.alert-info .close:active,.alert-app-level.alert-info .close:focus,.alert-app-level.alert-info .close:hover{color:#fff;color:var(--clr-app-alert-info-close-icon-hover-color,#fff);opacity:1;opacity:var(--clr-app-alert-info-close-icon-hover-opacity,1)}.alert-app-level.alert-danger{background:#c21d00;background:var(--clr-app-alert-danger-bg-color,#c21d00);color:#fff;color:var(--clr-app-alert-danger-font-color,#fff);border:none}.alert-app-level.alert-danger .alert-icon{color:#fff;color:var(--clr-app-alert-danger-icon-color,#fff)}.alert-app-level.alert-danger .alert-actions .dropdown .dropdown-toggle{color:#fff;color:var(--clr-app-alert-danger-action-color,#fff);border-color:#fff;border-color:var(--clr-app-alert-danger-action-color,#fff)}.alert-app-level.alert-danger .alert-action,.alert-app-level.alert-danger .dropdown-toggle{color:#fff;color:var(--clr-app-alert-danger-action-color,#fff)}.alert-app-level.alert-danger .alert-action.btn,.alert-app-level.alert-danger .dropdown-toggle.btn{border-color:#fff;border-color:var(--clr-app-alert-danger-action-color,#fff)}.alert-app-level.alert-danger .alert-action.btn:active,.alert-app-level.alert-danger .alert-action.btn:focus,.alert-app-level.alert-danger .alert-action.btn:hover,.alert-app-level.alert-danger .dropdown-toggle.btn:active,.alert-app-level.alert-danger .dropdown-toggle.btn:focus,.alert-app-level.alert-danger .dropdown-toggle.btn:hover{border-color:#fff;border-color:var(--clr-app-alert-danger-action-active-color,#fff)}.alert-app-level.alert-danger .alert-action.btn:active,.alert-app-level.alert-danger .dropdown-toggle.btn:active{-webkit-box-shadow:0 .05rem 0 0 #fff inset;box-shadow:0 .05rem 0 0 #fff inset;-webkit-box-shadow:0 .05rem 0 0 var(--clr-app-alert-danger-action-active-color,#fff) inset;box-shadow:0 .05rem 0 0 var(--clr-app-alert-danger-action-active-color,#fff) inset}.alert-app-level.alert-danger .alert-action:active,.alert-app-level.alert-danger .alert-action:focus,.alert-app-level.alert-danger .alert-action:hover,.alert-app-level.alert-danger .dropdown-toggle:active,.alert-app-level.alert-danger .dropdown-toggle:focus,.alert-app-level.alert-danger .dropdown-toggle:hover{color:#fff;color:var(--clr-app-alert-danger-action-active-color,#fff);color:#fff}.alert-app-level.alert-danger .close{color:#fff;color:var(--clr-app-alert-danger-close-icon-color,#fff);opacity:.8;opacity:var(--clr-app-alert-danger-close-icon-opacity,.8)}.alert-app-level.alert-danger .close cds-icon{fill:#fff;fill:var(--clr-app-alert-danger-close-icon-color,#fff)}.alert-app-level.alert-danger .close:active,.alert-app-level.alert-danger .close:focus,.alert-app-level.alert-danger .close:hover{color:#fff;color:var(--clr-app-alert-danger-close-icon-hover-color,#fff);opacity:1;opacity:var(--clr-app-alert-danger-close-icon-hover-opacity,1)}.alert-app-level.alert-warning{background:#c25400;background:var(--clr-app-alert-warning-bg-color,#c25400);color:#fff;color:var(--clr-app-alert-warning-font-color,#fff);border:none}.alert-app-level.alert-warning .alert-icon{color:#fff;color:var(--clr-app-alert-warning-icon-color,#fff)}.alert-app-level.alert-warning .alert-actions .dropdown .dropdown-toggle{color:#fff;color:var(--clr-app-alert-warning-action-color,#fff);border-color:#fff;border-color:var(--clr-app-alert-warning-action-color,#fff)}.alert-app-level.alert-warning .alert-action,.alert-app-level.alert-warning .dropdown-toggle{color:#fff;color:var(--clr-app-alert-warning-action-color,#fff)}.alert-app-level.alert-warning .alert-action.btn,.alert-app-level.alert-warning .dropdown-toggle.btn{border-color:#fff;border-color:var(--clr-app-alert-warning-action-color,#fff)}.alert-app-level.alert-warning .alert-action.btn:active,.alert-app-level.alert-warning .alert-action.btn:focus,.alert-app-level.alert-warning .alert-action.btn:hover,.alert-app-level.alert-warning .dropdown-toggle.btn:active,.alert-app-level.alert-warning .dropdown-toggle.btn:focus,.alert-app-level.alert-warning .dropdown-toggle.btn:hover{border-color:#fff;border-color:var(--clr-app-alert-warning-action-active-color,#fff)}.alert-app-level.alert-warning .alert-action.btn:active,.alert-app-level.alert-warning .dropdown-toggle.btn:active{-webkit-box-shadow:0 .05rem 0 0 #fff inset;box-shadow:0 .05rem 0 0 #fff inset;-webkit-box-shadow:0 .05rem 0 0 var(--clr-app-alert-warning-action-active-color,#fff) inset;box-shadow:0 .05rem 0 0 var(--clr-app-alert-warning-action-active-color,#fff) inset}.alert-app-level.alert-warning .alert-action:active,.alert-app-level.alert-warning .alert-action:focus,.alert-app-level.alert-warning .alert-action:hover,.alert-app-level.alert-warning .dropdown-toggle:active,.alert-app-level.alert-warning .dropdown-toggle:focus,.alert-app-level.alert-warning .dropdown-toggle:hover{color:#fff;color:var(--clr-app-alert-warning-action-active-color,#fff);color:#fff}.alert-app-level.alert-warning .close{color:#fff;color:var(--clr-app-alert-warning-close-icon-color,#fff);opacity:.8;opacity:var(--clr-app-alert-warning-close-icon-opacity,.8)}.alert-app-level.alert-warning .close cds-icon{fill:#fff;fill:var(--clr-app-alert-warning-close-icon-color,#fff)}.alert-app-level.alert-warning .close:active,.alert-app-level.alert-warning .close:focus,.alert-app-level.alert-warning .close:hover{color:#fff;color:var(--clr-app-alert-warning-close-icon-hover-color,#fff);opacity:1;opacity:var(--clr-app-alert-warning-close-icon-hover-opacity,1)}.alert-app-level.alert-success{background:#3c8500;background:var(--clr-app-alert-success-bg-color,#3c8500);color:#fff;color:var(--clr-app-alert-success-font-color,#fff);border:none}.alert-app-level.alert-success .alert-icon{color:#fff;color:var(--clr-app-alert-success-icon-color,#fff)}.alert-app-level.alert-success .alert-actions .dropdown .dropdown-toggle{color:#fff;color:var(--clr-app-alert-success-action-color,#fff);border-color:#fff;border-color:var(--clr-app-alert-success-action-color,#fff)}.alert-app-level.alert-success .alert-action,.alert-app-level.alert-success .dropdown-toggle{color:#fff;color:var(--clr-app-alert-success-action-color,#fff)}.alert-app-level.alert-success .alert-action.btn,.alert-app-level.alert-success .dropdown-toggle.btn{border-color:#fff;border-color:var(--clr-app-alert-success-action-color,#fff)}.alert-app-level.alert-success .alert-action.btn:active,.alert-app-level.alert-success .alert-action.btn:focus,.alert-app-level.alert-success .alert-action.btn:hover,.alert-app-level.alert-success .dropdown-toggle.btn:active,.alert-app-level.alert-success .dropdown-toggle.btn:focus,.alert-app-level.alert-success .dropdown-toggle.btn:hover{border-color:#fff;border-color:var(--clr-app-alert-success-action-active-color,#fff)}.alert-app-level.alert-success .alert-action.btn:active,.alert-app-level.alert-success .dropdown-toggle.btn:active{-webkit-box-shadow:0 .05rem 0 0 #fff inset;box-shadow:0 .05rem 0 0 #fff inset;-webkit-box-shadow:0 .05rem 0 0 var(--clr-app-alert-success-action-active-color,#fff) inset;box-shadow:0 .05rem 0 0 var(--clr-app-alert-success-action-active-color,#fff) inset}.alert-app-level.alert-success .alert-action:active,.alert-app-level.alert-success .alert-action:focus,.alert-app-level.alert-success .alert-action:hover,.alert-app-level.alert-success .dropdown-toggle:active,.alert-app-level.alert-success .dropdown-toggle:focus,.alert-app-level.alert-success .dropdown-toggle:hover{color:#fff;color:var(--clr-app-alert-success-action-active-color,#fff);color:#fff}.alert-app-level.alert-success .close{color:#fff;color:var(--clr-app-alert-success-close-icon-color,#fff);opacity:.8;opacity:var(--clr-app-alert-success-close-icon-opacity,.8)}.alert-app-level.alert-success .close cds-icon{fill:#fff;fill:var(--clr-app-alert-success-close-icon-color,#fff)}.alert-app-level.alert-success .close:active,.alert-app-level.alert-success .close:focus,.alert-app-level.alert-success .close:hover{color:#fff;color:var(--clr-app-alert-success-close-icon-hover-color,#fff);opacity:1;opacity:var(--clr-app-alert-success-close-icon-hover-opacity,1)}.alert-app-level .alert-items{padding-top:.3rem;padding-bottom:.3rem}.alert-app-level .alert-item{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:1.2rem}.alert-app-level .alert-item .btn{margin:0}.alert-app-level .alert-item>span,.alert-app-level .alert-text{-webkit-box-flex:0;-ms-flex:0 1 100%;flex:0 1 100%}.alert-app-level .alert-icon-wrapper{margin-top:.15rem}.alert-app-level .close{height:1.8rem;overflow:hidden}.alert-app-level .close cds-icon{margin-top:-.25rem}.alert-app-level .alert-action,.alert-app-level .dropdown-toggle{text-decoration:none}.alert-sm{font-size:.55rem;letter-spacing:normal;line-height:.8rem}.alert-sm .alert-items{padding:.15rem .25rem}.alert-sm .alert-item{padding-top:.05rem;margin-bottom:.2rem}.alert-sm .alert-item:last-child{margin-bottom:0}.alert-sm .alert-icon-wrapper{padding-top:0;height:.8rem}.alert-sm .alert-icon{margin-left:-.2rem;margin-top:-.2rem}.alert-sm .alert-item>span,.alert-sm .alert-text{margin-right:.3rem}.alert-sm .close{padding-right:0;-webkit-box-flex:0;-ms-flex:0 0 1.2rem;flex:0 0 1.2rem;height:1.2rem;line-height:1.2rem}.alert-sm .close cds-icon{margin-top:-.25rem;margin-right:-.05rem;height:1rem;width:1rem;line-height:1.05rem}@media screen and (max-width:768px){.alert .alert-item{-ms-flex-wrap:wrap;flex-wrap:wrap}.alert .alert-text{margin-right:0;max-width:90%;width:90%;-ms-flex-preferred-size:90%;flex-basis:90%}.alert .alert-actions{-webkit-box-flex:1;-ms-flex:1 0 100%;flex:1 0 100%;padding-top:.15rem;padding-left:1.2rem}.alerts-pager{margin-top:.15rem}.alert-app-level .alert-actions{margin-left:2.25rem}}.alert-hidden{display:none}.card .alert{margin:.3rem 0}.modal .alert+.modal-header,.modal .alert+.modal-header--accessible{margin-top:.6rem}.alerts.alert-info{background:#00567a;background:var(--clr-app-alert-info-pager-bg-color,#00567a)}.alerts.alert-danger{background:#991700;background:var(--clr-app-alert-danger-pager-bg-color,#991700)}.alerts.alert-warning{background:#8f5a00;background:var(--clr-app-alert-warning-pager-bg-color,#8f5a00)}.alerts.alert-success{background:#255200;background:var(--clr-color-success-900,#255200)}.alerts-pager{color:#fff;color:var(--clr-app-alert-pager-text-color,#fff);font-size:.65rem;letter-spacing:normal;float:left;min-height:1.8rem;text-align:center;width:7.2rem}.alerts-pager-button{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;margin:0;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;background:0 0;color:#fff;color:var(--clr-app-alert-pager-text-color,#fff);cursor:pointer}button.alerts-pager-button{cursor:pointer}.alerts-pager-button cds-icon{color:#fff;color:var(--clr-app-alert-pager-text-color,#fff)}.alerts-pager-control{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:.3rem;white-space:nowrap}.alerts-page-down{margin-left:1.2rem;width:33.33%}.alerts-page-up{margin-right:1.2rem;width:33.33%}.alerts-pager-text{width:33.33%}:root{--clr-card-bg-color:var(--clr-color-neutral-0);--clr-card-divider-color:var(--clr-color-neutral-300);--clr-card-title-color:var(--clr-h4-color);--clr-card-title-font-weight:var(--clr-h4-font-weight);--clr-card-border-width:var(--clr-global-borderwidth);--clr-card-border-radius:var(--clr-global-borderradius);--clr-card-border-color:var(--clr-color-neutral-300);--clr-card-box-shadow-color:var(--clr-card-border-color);--clr-card-clickable-border-color:var(--clr-color-action-500);--clr-card-clickable-box-shadow-color:var(--clr-card-clickable-border-color)}.card{-webkit-box-shadow:0 .15rem 0 0 #dedede;box-shadow:0 .15rem 0 0 #dedede;-webkit-box-shadow:0 .15rem 0 0 var(--clr-card-box-shadow-color);box-shadow:0 .15rem 0 0 var(--clr-card-box-shadow-color);border-radius:.15rem;border-radius:var(--clr-card-border-radius,.15rem);border-width:.05rem;border-width:var(--clr-card-border-width,.05rem);border-style:solid;border-color:#dedede;border-color:var(--clr-card-border-color,#dedede)}.card.clickable:hover{-webkit-box-shadow:0 .15rem 0 0 #179bd3;box-shadow:0 .15rem 0 0 #179bd3;-webkit-box-shadow:0 .15rem 0 0 var(--clr-card-clickable-box-shadow-color);box-shadow:0 .15rem 0 0 var(--clr-card-clickable-box-shadow-color);border-width:.05rem;border-width:var(--clr-card-border-width,.05rem);border-style:solid;border-color:#179bd3;border-color:var(--clr-card-clickable-border-color,#179bd3);cursor:pointer;text-decoration:none;-webkit-transform:translateY(-.1rem);transform:translateY(-.1rem);-webkit-transition:border .2s ease,-webkit-transform .2s ease;transition:border .2s ease,-webkit-transform .2s ease;transition:border .2s ease,transform .2s ease;transition:border .2s ease,transform .2s ease,-webkit-transform .2s ease}.card .card-media-block,.card .card-text,.card .card-title,.card .list,.card .list-unstyled,.card-block .card-divider{margin-top:0;margin-bottom:.6rem}.card .card-media-block:last-child,.card .card-text:last-child,.card .card-title:last-child,.card .list-unstyled:last-child,.card .list:last-child,.card-block .card-divider:last-child{margin-bottom:0}.card-img>img,.card.card-img>img,.card>.card-img:first-child:last-child>img{display:block;height:auto;width:100%;max-width:100%}.card{position:relative;display:block;background-color:#fff;background-color:var(--clr-card-bg-color,#fff);width:100%;margin-top:1.2rem}.card .btn-link{min-width:0;padding:0}.card.clickable{color:inherit}.card>.list,.card>.list-unstyled{padding:.6rem .9rem}.card .list-group{padding-left:0;margin-bottom:0;list-style:none}.card .list-group-item{padding:.6rem .9rem;font-size:.7rem;background-color:#fff;background-color:var(--clr-card-bg-color,#fff);border-bottom-width:.05rem;border-bottom-width:var(--clr-card-border-width,.05rem);border-bottom-style:solid;border-bottom-color:#dedede;border-bottom-color:var(--clr-card-border-color,#dedede)}@supports (-ms-ime-align:auto){.card .dropdown>.dropdown-toggle::after{display:inline-block;margin-top:-.6rem}}.card-block,.card-footer,.card-header{padding:.6rem .9rem}.card-header,.card-title{color:#000;color:var(--clr-card-title-color,#000);font-weight:200;font-weight:var(--clr-card-title-font-weight,200);font-size:.9rem;letter-spacing:normal}.card-text{font-size:.7rem}.card-img:first-child>img{border-radius:0;border-top-left-radius:.15rem;border-top-left-radius:var(--clr-card-border-radius,.15rem);border-top-right-radius:.15rem;border-top-right-radius:var(--clr-card-border-radius,.15rem)}.card-img:last-child>img{border-radius:0;border-bottom-left-radius:.15rem;border-bottom-left-radius:var(--clr-card-border-radius,.15rem);border-bottom-right-radius:.15rem;border-bottom-right-radius:var(--clr-card-border-radius,.15rem)}.card.card-img>img,.card>.card-img:first-child:last-child>img{border-radius:.15rem;border-radius:var(--clr-card-border-radius,.15rem)}.card-block .btn,.card-block .btn.btn-link,.card-block .card-link,.card-footer .btn,.card-footer .btn.btn-link,.card-footer .card-link{margin:0 .6rem 0 0}.card-block .btn-group .btn,.card-footer .btn-group .btn{margin:0}.card-block,.card-header{border-bottom-width:.05rem;border-bottom-width:var(--clr-card-border-width,.05rem);border-bottom-style:solid;border-bottom-color:#dedede;border-bottom-color:var(--clr-card-border-color,#dedede)}.card-block:last-child,.card-header:last-child{border-bottom:none}.card-divider{display:block;border-bottom-width:.05rem;border-bottom-width:var(--clr-card-border-width,.05rem);border-bottom-style:solid;border-bottom-color:#dedede;border-bottom-color:var(--clr-card-divider-color,#dedede)}.card-block .card-divider{margin-left:-.9rem;margin-right:-.9rem;width:auto}.card-block+.card-divider,.card-header+.card-divider{display:none}.card-media-block{display:-webkit-box;display:-ms-flexbox;display:flex}.card-media-block .card-media-image{display:inline-block;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;height:3rem;width:3rem;max-height:3rem;max-width:3rem}.card-media-block .card-media-description{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:0 0 0 .6rem}.card-media-block .card-media-title{display:inline-block}.card-media-block .card-media-text,.card-media-block span{display:inline-block}.card-media-block.wrap{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.card-media-block.wrap .card-media-description{margin:.3rem 0 0 0}.card-block>.list,.card-block>.list-unstyled{padding:0}@media screen and (min-width:576px){.card-columns{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:.6rem;-moz-column-gap:.6rem;column-gap:.6rem;-webkit-column-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid;-webkit-column-fill:balance;-moz-column-fill:balance;column-fill:balance;-webkit-perspective:1}.card-columns.card-columns-2{-webkit-column-count:2;-moz-column-count:2;column-count:2}.card-columns.card-columns-4{-webkit-column-count:4;-moz-column-count:4;column-count:4}.card-columns .card{display:inline-block;margin:.3rem}.card-columns .clickable{-webkit-backface-visibility:hidden;backface-visibility:hidden}}@supports (-ms-ime-align:auto){.card .checkbox-inline.btn label,.card .checkbox.btn label,.card .radio-inline.btn label,.card .radio.btn label{display:inline-block}}:root{--clr-dropdown-active-text-color:var(--clr-color-neutral-1000);--clr-dropdown-bg-color:var(--clr-color-neutral-0);--clr-dropdown-border-color:var(--clr-color-neutral-400);--clr-dropdown-divider-color:var(--clr-color-neutral-200);--clr-dropdown-divider-border-width:var(--clr-global-borderwidth);--clr-dropdown-child-border-color:var(--clr-color-neutral-500);--clr-dropdown-bg-hover-color:var(--clr-global-hover-color);--clr-dropdown-selection-color:var(--clr-global-selection-color);--clr-dropdown-box-shadow:var(--clr-popover-box-shadow-color);--clr-dropdown-text-color:var(--clr-p1-color);--clr-dropdown-header-color:var(--clr-color-neutral-900);--clr-dropdown-header-font-weight:600;--clr-dropdown-item-color:var(--clr-color-neutral-700);--clr-dropdown-item-font-weight:var(--clr-p1-font-weight)}.dropdown-menu .btn,.dropdown-menu .btn-danger,.dropdown-menu .btn-info,.dropdown-menu .btn-link,.dropdown-menu .btn-outline,.dropdown-menu .btn-outline-danger,.dropdown-menu .btn-outline-primary,.dropdown-menu .btn-outline-secondary,.dropdown-menu .btn-outline-success,.dropdown-menu .btn-outline-warning,.dropdown-menu .btn-primary,.dropdown-menu .btn-secondary,.dropdown-menu .btn-success,.dropdown-menu .btn-warning,.dropdown-menu .dropdown-header,.dropdown-menu .dropdown-item{overflow:hidden;text-overflow:ellipsis;text-align:left}.dropdown{position:relative;display:inline-block}.dropdown .dropdown-toggle{display:inline-block;position:relative;margin:0;white-space:nowrap;cursor:pointer}.dropdown .dropdown-toggle>*{margin:0}.dropdown .dropdown-toggle cds-icon[shape^=angle]{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:inherit;height:.5rem;width:.5rem}.dropdown .dropdown-toggle.btn{padding-right:1.2rem}.dropdown .dropdown-toggle.btn cds-icon[shape^=angle]{right:.6rem}.dropdown .dropdown-toggle:not(.btn){padding:0 .6rem 0 0;color:#000;color:var(--clr-dropdown-active-text-color,#000)}.dropdown .dropdown-toggle:not(.btn) cds-icon[shape^=angle]{right:0}.dropdown button.dropdown-toggle:not(.btn){background:0 0;border:none;cursor:pointer;color:#000;color:var(--clr-dropdown-active-text-color,#000)}.dropdown-menu>*{display:block;white-space:nowrap}.dropdown-menu{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;top:100%;left:0;min-width:6rem;max-width:18rem;background:#fff;background:var(--clr-dropdown-bg-color,#fff);border-width:.05rem;border-width:var(--clr-global-borderwidth,.05rem);border-style:solid;border-color:#ccc;border-color:var(--clr-dropdown-border-color,#ccc);border-radius:.15rem;border-radius:var(--clr-global-borderradius,.15rem);-webkit-box-shadow:0 .05rem .15rem rgba(140,140,140,.25);box-shadow:0 .05rem .15rem rgba(140,140,140,.25);-webkit-box-shadow:0 .05rem .15rem var(--clr-dropdown-box-shadow,rgba(140,140,140,.25));box-shadow:0 .05rem .15rem var(--clr-dropdown-box-shadow,rgba(140,140,140,.25));margin-top:.1rem;padding:.6rem 0;visibility:hidden;z-index:1060}.dropdown-menu .dropdown-header{color:#333;color:var(--clr-dropdown-header-color,#333);font-size:.6rem;font-weight:600;font-weight:var(--clr-dropdown-header-font-weight,600);letter-spacing:normal;padding:0 .6rem;line-height:.9rem;margin:0}.dropdown-menu .btn,.dropdown-menu .btn-danger,.dropdown-menu .btn-info,.dropdown-menu .btn-link,.dropdown-menu .btn-outline,.dropdown-menu .btn-outline-danger,.dropdown-menu .btn-outline-primary,.dropdown-menu .btn-outline-secondary,.dropdown-menu .btn-outline-success,.dropdown-menu .btn-outline-warning,.dropdown-menu .btn-primary,.dropdown-menu .btn-secondary,.dropdown-menu .btn-success,.dropdown-menu .btn-warning,.dropdown-menu .dropdown-item{color:#666;color:var(--clr-dropdown-item-color,#666);font-size:.7rem;font-weight:400;font-weight:var(--clr-dropdown-item-font-weight,400);letter-spacing:normal;background:0 0;border:0;cursor:pointer;display:block;height:auto;line-height:inherit;margin:0;width:100%;text-transform:none}.dropdown-menu .btn-danger:hover,.dropdown-menu .btn-info:hover,.dropdown-menu .btn-link:hover,.dropdown-menu .btn-outline-danger:hover,.dropdown-menu .btn-outline-primary:hover,.dropdown-menu .btn-outline-secondary:hover,.dropdown-menu .btn-outline-success:hover,.dropdown-menu .btn-outline-warning:hover,.dropdown-menu .btn-outline:hover,.dropdown-menu .btn-primary:hover,.dropdown-menu .btn-secondary:hover,.dropdown-menu .btn-success:hover,.dropdown-menu .btn-warning:hover,.dropdown-menu .btn:hover,.dropdown-menu .dropdown-item:hover{background-color:#e8e8e8;background-color:var(--clr-dropdown-bg-hover-color,#e8e8e8);color:#666;color:var(--clr-dropdown-item-color,#666);text-decoration:none}.dropdown-menu .btn-danger.active,.dropdown-menu .btn-info.active,.dropdown-menu .btn-link.active,.dropdown-menu .btn-outline-danger.active,.dropdown-menu .btn-outline-primary.active,.dropdown-menu .btn-outline-secondary.active,.dropdown-menu .btn-outline-success.active,.dropdown-menu .btn-outline-warning.active,.dropdown-menu .btn-outline.active,.dropdown-menu .btn-primary.active,.dropdown-menu .btn-secondary.active,.dropdown-menu .btn-success.active,.dropdown-menu .btn-warning.active,.dropdown-menu .btn.active,.dropdown-menu .dropdown-item.active{background:#d8e3e9;background:var(--clr-dropdown-selection-color,#d8e3e9);color:#000;color:var(--clr-dropdown-active-text-color,#000)}.dropdown-menu .btn-danger:active,.dropdown-menu .btn-info:active,.dropdown-menu .btn-link:active,.dropdown-menu .btn-outline-danger:active,.dropdown-menu .btn-outline-primary:active,.dropdown-menu .btn-outline-secondary:active,.dropdown-menu .btn-outline-success:active,.dropdown-menu .btn-outline-warning:active,.dropdown-menu .btn-outline:active,.dropdown-menu .btn-primary:active,.dropdown-menu .btn-secondary:active,.dropdown-menu .btn-success:active,.dropdown-menu .btn-warning:active,.dropdown-menu .btn:active,.dropdown-menu .dropdown-item:active{-webkit-box-shadow:none;box-shadow:none}.dropdown-menu .btn-danger:focus,.dropdown-menu .btn-info:focus,.dropdown-menu .btn-link:focus,.dropdown-menu .btn-outline-danger:focus,.dropdown-menu .btn-outline-primary:focus,.dropdown-menu .btn-outline-secondary:focus,.dropdown-menu .btn-outline-success:focus,.dropdown-menu .btn-outline-warning:focus,.dropdown-menu .btn-outline:focus,.dropdown-menu .btn-primary:focus,.dropdown-menu .btn-secondary:focus,.dropdown-menu .btn-success:focus,.dropdown-menu .btn-warning:focus,.dropdown-menu .btn:focus,.dropdown-menu .dropdown-item:focus{z-index:inherit}.dropdown-menu .btn-danger.disabled,.dropdown-menu .btn-danger:disabled,.dropdown-menu .btn-info.disabled,.dropdown-menu .btn-info:disabled,.dropdown-menu .btn-link.disabled,.dropdown-menu .btn-link:disabled,.dropdown-menu .btn-outline-danger.disabled,.dropdown-menu .btn-outline-danger:disabled,.dropdown-menu .btn-outline-primary.disabled,.dropdown-menu .btn-outline-primary:disabled,.dropdown-menu .btn-outline-secondary.disabled,.dropdown-menu .btn-outline-secondary:disabled,.dropdown-menu .btn-outline-success.disabled,.dropdown-menu .btn-outline-success:disabled,.dropdown-menu .btn-outline-warning.disabled,.dropdown-menu .btn-outline-warning:disabled,.dropdown-menu .btn-outline.disabled,.dropdown-menu .btn-outline:disabled,.dropdown-menu .btn-primary.disabled,.dropdown-menu .btn-primary:disabled,.dropdown-menu .btn-secondary.disabled,.dropdown-menu .btn-secondary:disabled,.dropdown-menu .btn-success.disabled,.dropdown-menu .btn-success:disabled,.dropdown-menu .btn-warning.disabled,.dropdown-menu .btn-warning:disabled,.dropdown-menu .btn.disabled,.dropdown-menu .btn:disabled,.dropdown-menu .dropdown-item.disabled,.dropdown-menu .dropdown-item:disabled{cursor:not-allowed;opacity:.4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dropdown-menu .btn-danger.disabled:hover,.dropdown-menu .btn-danger:disabled:hover,.dropdown-menu .btn-info.disabled:hover,.dropdown-menu .btn-info:disabled:hover,.dropdown-menu .btn-link.disabled:hover,.dropdown-menu .btn-link:disabled:hover,.dropdown-menu .btn-outline-danger.disabled:hover,.dropdown-menu .btn-outline-danger:disabled:hover,.dropdown-menu .btn-outline-primary.disabled:hover,.dropdown-menu .btn-outline-primary:disabled:hover,.dropdown-menu .btn-outline-secondary.disabled:hover,.dropdown-menu .btn-outline-secondary:disabled:hover,.dropdown-menu .btn-outline-success.disabled:hover,.dropdown-menu .btn-outline-success:disabled:hover,.dropdown-menu .btn-outline-warning.disabled:hover,.dropdown-menu .btn-outline-warning:disabled:hover,.dropdown-menu .btn-outline.disabled:hover,.dropdown-menu .btn-outline:disabled:hover,.dropdown-menu .btn-primary.disabled:hover,.dropdown-menu .btn-primary:disabled:hover,.dropdown-menu .btn-secondary.disabled:hover,.dropdown-menu .btn-secondary:disabled:hover,.dropdown-menu .btn-success.disabled:hover,.dropdown-menu .btn-success:disabled:hover,.dropdown-menu .btn-warning.disabled:hover,.dropdown-menu .btn-warning:disabled:hover,.dropdown-menu .btn.disabled:hover,.dropdown-menu .btn:disabled:hover,.dropdown-menu .dropdown-item.disabled:hover,.dropdown-menu .dropdown-item:disabled:hover{background:0 0}.dropdown-menu .btn-danger.disabled:active,.dropdown-menu .btn-danger:disabled:active,.dropdown-menu .btn-info.disabled:active,.dropdown-menu .btn-info:disabled:active,.dropdown-menu .btn-link.disabled:active,.dropdown-menu .btn-link:disabled:active,.dropdown-menu .btn-outline-danger.disabled:active,.dropdown-menu .btn-outline-danger:disabled:active,.dropdown-menu .btn-outline-primary.disabled:active,.dropdown-menu .btn-outline-primary:disabled:active,.dropdown-menu .btn-outline-secondary.disabled:active,.dropdown-menu .btn-outline-secondary:disabled:active,.dropdown-menu .btn-outline-success.disabled:active,.dropdown-menu .btn-outline-success:disabled:active,.dropdown-menu .btn-outline-warning.disabled:active,.dropdown-menu .btn-outline-warning:disabled:active,.dropdown-menu .btn-outline.disabled:active,.dropdown-menu .btn-outline:disabled:active,.dropdown-menu .btn-primary.disabled:active,.dropdown-menu .btn-primary:disabled:active,.dropdown-menu .btn-secondary.disabled:active,.dropdown-menu .btn-secondary:disabled:active,.dropdown-menu .btn-success.disabled:active,.dropdown-menu .btn-success:disabled:active,.dropdown-menu .btn-warning.disabled:active,.dropdown-menu .btn-warning:disabled:active,.dropdown-menu .btn.disabled:active,.dropdown-menu .btn:disabled:active,.dropdown-menu .dropdown-item.disabled:active,.dropdown-menu .dropdown-item:disabled:active{background:0 0;-webkit-box-shadow:none;box-shadow:none}.dropdown-menu .btn-danger.expandable,.dropdown-menu .btn-info.expandable,.dropdown-menu .btn-link.expandable,.dropdown-menu .btn-outline-danger.expandable,.dropdown-menu .btn-outline-primary.expandable,.dropdown-menu .btn-outline-secondary.expandable,.dropdown-menu .btn-outline-success.expandable,.dropdown-menu .btn-outline-warning.expandable,.dropdown-menu .btn-outline.expandable,.dropdown-menu .btn-primary.expandable,.dropdown-menu .btn-secondary.expandable,.dropdown-menu .btn-success.expandable,.dropdown-menu .btn-warning.expandable,.dropdown-menu .btn.expandable,.dropdown-menu .dropdown-item.expandable{margin-right:1.2rem;padding-right:.6rem}.dropdown-menu .btn-danger.expandable:before,.dropdown-menu .btn-info.expandable:before,.dropdown-menu .btn-link.expandable:before,.dropdown-menu .btn-outline-danger.expandable:before,.dropdown-menu .btn-outline-primary.expandable:before,.dropdown-menu .btn-outline-secondary.expandable:before,.dropdown-menu .btn-outline-success.expandable:before,.dropdown-menu .btn-outline-warning.expandable:before,.dropdown-menu .btn-outline.expandable:before,.dropdown-menu .btn-primary.expandable:before,.dropdown-menu .btn-secondary.expandable:before,.dropdown-menu .btn-success.expandable:before,.dropdown-menu .btn-warning.expandable:before,.dropdown-menu .btn.expandable:before,.dropdown-menu .dropdown-item.expandable:before{content:"";float:right;height:.6rem;width:.6rem;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%3E.cls-1%7Bfill%3A%239a9a9a%3B%7D%3C%2Fstyle%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M6%2C9L1.2%2C4.2a0.68%2C0.68%2C0%2C0%2C1%2C1-1L6%2C7.08%2C9.84%2C3.24a0.68%2C0.68%2C0%2C1%2C1%2C1%2C1Z%22%2F%3E%0A%3C%2Fsvg%3E%0A");background-repeat:no-repeat;background-size:contain;vertical-align:middle;margin-top:.3rem}.dropdown-menu .btn,.dropdown-menu .dropdown-item{padding:.15rem 1.2rem}@media screen and (max-width:576px){.dropdown-menu .btn,.dropdown-menu .dropdown-item{padding:.3rem 1.2rem}}.dropdown-menu .dropdown-divider{font-size:.6rem;border-bottom-width:.05rem;border-bottom-width:var(--clr-dropdown-divider-border-width,.05rem);border-bottom-style:solid;border-bottom-color:#e8e8e8;border-bottom-color:var(--clr-dropdown-divider-color,#e8e8e8);margin:.3rem 0}.btn-group-overflow.open>.dropdown-menu,.btn-group-overflow.open>.dropdown-menu-wrapper>.dropdown-menu,.dropdown.open>.dropdown-menu,.dropdown.open>.dropdown-menu-wrapper>.dropdown-menu,.tabs-overflow.open>.dropdown-menu,.tabs-overflow.open>.dropdown-menu-wrapper>.dropdown-menu{visibility:visible}.btn-group-overflow.bottom-left>.dropdown-menu,.btn-group-overflow.bottom-right>.dropdown-menu,.dropdown.bottom-left>.dropdown-menu,.dropdown.bottom-right>.dropdown-menu,.tabs-overflow.bottom-left>.dropdown-menu,.tabs-overflow.bottom-right>.dropdown-menu{top:100%;bottom:auto;margin:.1rem 0 0 0}.btn-group-overflow.bottom-left>.dropdown-menu,.dropdown.bottom-left>.dropdown-menu,.tabs-overflow.bottom-left>.dropdown-menu{left:0;right:auto}.btn-group-overflow.bottom-right>.dropdown-menu,.dropdown.bottom-right>.dropdown-menu,.tabs-overflow.bottom-right>.dropdown-menu{right:0;left:auto}.btn-group-overflow.top-left>.dropdown-menu,.btn-group-overflow.top-right>.dropdown-menu,.dropdown.top-left>.dropdown-menu,.dropdown.top-right>.dropdown-menu,.tabs-overflow.top-left>.dropdown-menu,.tabs-overflow.top-right>.dropdown-menu{top:auto;bottom:100%;margin:0 0 .1rem 0}.btn-group-overflow.top-left>.dropdown-menu,.dropdown.top-left>.dropdown-menu,.tabs-overflow.top-left>.dropdown-menu{left:0;right:auto}.btn-group-overflow.top-right>.dropdown-menu,.dropdown.top-right>.dropdown-menu,.tabs-overflow.top-right>.dropdown-menu{right:0;left:auto}.btn-group-overflow.left-bottom>.dropdown-menu,.btn-group-overflow.left-top>.dropdown-menu,.dropdown.left-bottom>.dropdown-menu,.dropdown.left-top>.dropdown-menu,.tabs-overflow.left-bottom>.dropdown-menu,.tabs-overflow.left-top>.dropdown-menu{right:100%;left:auto;margin:0 .1rem 0 0}.btn-group-overflow.left-bottom>.dropdown-menu,.dropdown.left-bottom>.dropdown-menu,.tabs-overflow.left-bottom>.dropdown-menu{top:0;bottom:auto}.btn-group-overflow.left-top>.dropdown-menu,.dropdown.left-top>.dropdown-menu,.tabs-overflow.left-top>.dropdown-menu{bottom:0;top:auto}.btn-group-overflow.right-bottom>.dropdown-menu,.btn-group-overflow.right-top>.dropdown-menu,.dropdown.right-bottom>.dropdown-menu,.dropdown.right-top>.dropdown-menu,.tabs-overflow.right-bottom>.dropdown-menu,.tabs-overflow.right-top>.dropdown-menu{left:100%;right:auto;margin:0 0 0 .1rem}.btn-group-overflow.right-bottom>.dropdown-menu,.dropdown.right-bottom>.dropdown-menu,.tabs-overflow.right-bottom>.dropdown-menu{top:0;bottom:auto}.btn-group-overflow.right-top>.dropdown-menu,.dropdown.right-top>.dropdown-menu,.tabs-overflow.right-top>.dropdown-menu{bottom:0;top:auto}.btn-group-overflow .dropdown .dropdown-menu,.dropdown .dropdown .dropdown-menu,.tabs-overflow .dropdown .dropdown-menu{border-color:#b3b3b3;border-color:var(--clr-dropdown-child-border-color,#b3b3b3);position:absolute}.btn-group-overflow .dropdown.left-top>.dropdown-menu,.btn-group-overflow .dropdown.left-top>.dropdown-menu-wrapper>.dropdown-menu,.dropdown .dropdown.left-top>.dropdown-menu,.dropdown .dropdown.left-top>.dropdown-menu-wrapper>.dropdown-menu,.tabs-overflow .dropdown.left-top>.dropdown-menu,.tabs-overflow .dropdown.left-top>.dropdown-menu-wrapper>.dropdown-menu{top:0;bottom:auto;left:auto;right:100%;margin-top:-.95rem;margin-right:-.2rem}.btn-group-overflow .dropdown.right-top>.dropdown-menu,.btn-group-overflow .dropdown.right-top>.dropdown-menu-wrapper>.dropdown-menu,.dropdown .dropdown.right-top>.dropdown-menu,.dropdown .dropdown.right-top>.dropdown-menu-wrapper>.dropdown-menu,.tabs-overflow .dropdown.right-top>.dropdown-menu,.tabs-overflow .dropdown.right-top>.dropdown-menu-wrapper>.dropdown-menu{top:0;bottom:auto;left:100%;right:auto;margin-top:-.95rem;margin-left:-.2rem}.btn-group-overflow .dropdown.left-bottom>.dropdown-menu,.btn-group-overflow .dropdown.left-bottom>.dropdown-menu-wrapper>.dropdown-menu,.dropdown .dropdown.left-bottom>.dropdown-menu,.dropdown .dropdown.left-bottom>.dropdown-menu-wrapper>.dropdown-menu,.tabs-overflow .dropdown.left-bottom>.dropdown-menu,.tabs-overflow .dropdown.left-bottom>.dropdown-menu-wrapper>.dropdown-menu{top:auto;bottom:0;left:auto;right:100%;margin-bottom:-.95rem;margin-right:-.2rem}.btn-group-overflow .dropdown.right-bottom>.dropdown-menu,.btn-group-overflow .dropdown.right-bottom>.dropdown-menu-wrapper>.dropdown-menu,.dropdown .dropdown.right-bottom>.dropdown-menu,.dropdown .dropdown.right-bottom>.dropdown-menu-wrapper>.dropdown-menu,.tabs-overflow .dropdown.right-bottom>.dropdown-menu,.tabs-overflow .dropdown.right-bottom>.dropdown-menu-wrapper>.dropdown-menu{top:auto;bottom:0;left:100%;right:auto;margin-bottom:-.95rem;margin-left:-.2rem}:root{--clr-badge-background-color:var(--clr-color-neutral-600);--clr-badge-color:var(--clr-color-on-neutral-600);--clr-badge-info-bg-color:var(--clr-color-action-800);--clr-badge-info-color:var(--clr-color-neutral-0);--clr-badge-success-bg-color:var(--clr-color-success-800);--clr-badge-success-color:var(--clr-color-neutral-0);--clr-badge-warning-bg-color:var(--clr-color-warning-1000);--clr-badge-warning-color:var(--clr-color-neutral-0);--clr-badge-danger-bg-color:var(--clr-color-danger-900);--clr-badge-danger-color:var(--clr-color-neutral-0);--clr-badge-gray-bg-color:var(--clr-color-neutral-600);--clr-badge-gray-color:var(--clr-badge-font-color-light);--clr-badge-purple-bg-color:var(--clr-color-secondary-action-500);--clr-badge-purple-color:var(--clr-badge-font-color-light);--clr-badge-blue-bg-color:var(--clr-color-action-800);--clr-badge-blue-color:var(--clr-badge-font-color-light);--clr-badge-orange-bg-color:var(--clr-color-warning-1000);--clr-badge-orange-color:var(--clr-color-neutral-0);--clr-badge-light-blue-bg-color:var(--clr-color-action-500);--clr-badge-light-blue-color:var(--clr-color-neutral-0)}.badge{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-width:.75rem;background:#8c8c8c;height:.75rem;line-height:normal;border-radius:.5rem;font-size:.5rem;padding:0 .2rem;margin-right:.3rem;white-space:nowrap;text-align:center;color:#fff;color:var(--clr-badge-font-color-light,#fff)}.badge:visited{color:#fff;color:var(--clr-badge-font-color-light,#fff)}.badge.badge-1,.badge.badge-gray{background:#8c8c8c;background:var(--clr-badge-gray-bg-color,#8c8c8c);color:#fff;color:var(--clr-badge-gray-color,#fff)}.badge.badge-2,.badge.badge-purple{background:#9e57bc;background:var(--clr-badge-purple-bg-color,#9e57bc);color:#fff;color:var(--clr-badge-purple-color,#fff)}.badge.badge-3,.badge.badge-blue{background:#00567a;background:var(--clr-badge-blue-bg-color,#00567a);color:#fff;color:var(--clr-badge-blue-color,#fff)}.badge.badge-4,.badge.badge-orange{background:#613200;background:var(--clr-badge-orange-bg-color,#613200);color:#fff;color:var(--clr-badge-orange-color,#fff)}.badge.badge-5,.badge.badge-light-blue{background:#179bd3;background:var(--clr-badge-light-blue-bg-color,#179bd3);color:#fff;color:var(--clr-badge-light-blue-color,#fff)}.badge.badge-info{background:#00567a;background:var(--clr-badge-info-bg-color,#00567a);color:#fff;color:var(--clr-badge-info-color,#fff)}.badge.badge-success{background:#306b00;background:var(--clr-badge-success-bg-color,#306b00);color:#fff;color:var(--clr-badge-success-color,#fff)}.badge.badge-danger{background:#991700;background:var(--clr-badge-danger-bg-color,#991700);color:#fff;color:var(--clr-badge-danger-color,#fff)}.badge.badge-warning{background:#613200;background:var(--clr-badge-warning-bg-color,#613200);color:#fff;color:var(--clr-badge-warning-color,#fff)}_:-ms-input-placeholder .badge,:root .badge{padding:.1rem .15rem 0}@supports (-ms-ime-align:auto){.badge{padding:.1rem .15rem 0}}:root{--clr-label-font-color-light:var(--clr-color-neutral-1000);--clr-label-font-color-dark:var(--clr-color-neutral-1000);--clr-label-default-border-color:var(--clr-color-neutral-600);--clr-label-font-size:0.55rem;--clr-label-font-weight:400;--clr-label-letter-spacing:0.03em;--clr-label-border-radius:0.6rem;--clr-label-bg-hover-color:var(--clr-color-neutral-200);--clr-label-gray-bg-color:var(--clr-color-neutral-600);--clr-label-gray-color:var(--clr-label-font-color-light);--clr-label-purple-bg-color:var(--clr-color-secondary-action-500);--clr-label-purple-color:var(--clr-label-font-color-light);--clr-label-blue-bg-color:var(--clr-color-action-800);--clr-label-blue-color:var(--clr-label-font-color-light);--clr-label-orange-bg-color:var(--clr-color-warning-1000);--clr-label-orange-color:var(--clr-label-font-color-dark);--clr-label-light-blue-bg-color:var(--clr-color-action-500);--clr-label-light-blue-color:var(--clr-label-font-color-dark);--clr-label-info-bg-color:var(--clr-color-action-50);--clr-label-info-font-color:var(--clr-color-action-800);--clr-label-info-border-color:var(--clr-color-action-800);--clr-label-success-bg-color:var(--clr-color-success-50);--clr-label-success-font-color:var(--clr-color-success-800);--clr-label-success-border-color:var(--clr-color-success-800);--clr-label-warning-bg-color:var(--clr-color-warning-100);--clr-label-warning-font-color:var(--clr-color-neutral-900);--clr-label-warning-border-color:var(--clr-color-warning-800);--clr-label-danger-bg-color:var(--clr-color-danger-100);--clr-label-danger-font-color:var(--clr-color-danger-900);--clr-label-danger-border-color:var(--clr-color-danger-900)}.label,a.label{font-size:.55rem;font-size:var(--clr-label-font-size,.55rem);font-weight:400;font-weight:var(--clr-label-font-weight,400);letter-spacing:.03em;letter-spacing:var(--clr-label-letter-spacing,.03em);line-height:.6rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 .6rem .05rem;border-radius:.6rem;border-radius:var(--clr-label-border-radius,.6rem);border:.05rem solid;border-color:#8c8c8c;border-color:var(--clr-label-default-border-color,#8c8c8c);height:1.05rem;margin:0 .3rem 0 0;white-space:nowrap;color:#000;color:var(--clr-label-font-color-light,#000)}.label:visited,a.label:visited{color:#000;color:var(--clr-label-font-color-light,#000)}.label:active,.label:focus,.label:hover,a.label:active,a.label:focus,a.label:hover{text-decoration:none}.label.clickable:active,.label.clickable:hover,a.label.clickable:active,a.label.clickable:hover{background:#e8e8e8;background:var(--clr-label-bg-hover-color,#e8e8e8)}.label.clickable:active,a.label.clickable:active{-webkit-box-shadow:0 .05rem 0 0 #8c8c8c inset;box-shadow:0 .05rem 0 0 #8c8c8c inset;-webkit-box-shadow:0 .05rem 0 0 var(--clr-label-gray-bg-color,#8c8c8c) inset;box-shadow:0 .05rem 0 0 var(--clr-label-gray-bg-color,#8c8c8c) inset;-webkit-transform:translateY(.5px);transform:translateY(.5px)}.label.label-1,.label.label-gray,a.label.label-1,a.label.label-gray{border:.05rem solid;border-color:#8c8c8c;border-color:var(--clr-label-gray-bg-color,#8c8c8c)}.label.clickable.label-gray:active,.label.clickable.label-gray:hover,a.label.clickable.label-gray:active,a.label.clickable.label-gray:hover{text-decoration:none;background:#e8e8e8;background:var(--clr-label-bg-hover-color,#e8e8e8)}.label.clickable.label-gray:active,a.label.clickable.label-gray:active{-webkit-box-shadow:0 .05rem 0 0 #8c8c8c inset;box-shadow:0 .05rem 0 0 #8c8c8c inset;-webkit-box-shadow:0 .05rem 0 0 var(--clr-label-gray-bg-color,#8c8c8c) inset;box-shadow:0 .05rem 0 0 var(--clr-label-gray-bg-color,#8c8c8c) inset;-webkit-transform:translateY(.5px);transform:translateY(.5px)}.label.label-gray>.badge,a.label.label-gray>.badge{background:#8c8c8c;background:var(--clr-badge-gray-bg-color,#8c8c8c);color:#fff;color:var(--clr-badge-gray-color,#fff)}.label.label-2,.label.label-purple,a.label.label-2,a.label.label-purple{border:.05rem solid;border-color:#9e57bc;border-color:var(--clr-label-purple-bg-color,#9e57bc)}.label.clickable.label-purple:active,.label.clickable.label-purple:hover,a.label.clickable.label-purple:active,a.label.clickable.label-purple:hover{text-decoration:none;background:#e8e8e8;background:var(--clr-label-bg-hover-color,#e8e8e8)}.label.clickable.label-purple:active,a.label.clickable.label-purple:active{-webkit-box-shadow:0 .05rem 0 0 #9e57bc inset;box-shadow:0 .05rem 0 0 #9e57bc inset;-webkit-box-shadow:0 .05rem 0 0 var(--clr-label-purple-bg-color,#9e57bc) inset;box-shadow:0 .05rem 0 0 var(--clr-label-purple-bg-color,#9e57bc) inset;-webkit-transform:translateY(.5px);transform:translateY(.5px)}.label.label-purple>.badge,a.label.label-purple>.badge{background:#9e57bc;background:var(--clr-badge-purple-bg-color,#9e57bc);color:#fff;color:var(--clr-badge-purple-color,#fff)}.label.label-3,.label.label-blue,a.label.label-3,a.label.label-blue{border:.05rem solid;border-color:#00567a;border-color:var(--clr-label-blue-bg-color,#00567a)}.label.clickable.label-blue:active,.label.clickable.label-blue:hover,a.label.clickable.label-blue:active,a.label.clickable.label-blue:hover{text-decoration:none;background:#e8e8e8;background:var(--clr-label-bg-hover-color,#e8e8e8)}.label.clickable.label-blue:active,a.label.clickable.label-blue:active{-webkit-box-shadow:0 .05rem 0 0 #00567a inset;box-shadow:0 .05rem 0 0 #00567a inset;-webkit-box-shadow:0 .05rem 0 0 var(--clr-label-blue-bg-color,#00567a) inset;box-shadow:0 .05rem 0 0 var(--clr-label-blue-bg-color,#00567a) inset;-webkit-transform:translateY(.5px);transform:translateY(.5px)}.label.label-blue>.badge,a.label.label-blue>.badge{background:#00567a;background:var(--clr-badge-blue-bg-color,#00567a);color:#fff;color:var(--clr-badge-blue-color,#fff)}.label.label-4,.label.label-orange,a.label.label-4,a.label.label-orange{border:.05rem solid;border-color:#613200;border-color:var(--clr-label-orange-bg-color,#613200)}.label.clickable.label-orange:active,.label.clickable.label-orange:hover,a.label.clickable.label-orange:active,a.label.clickable.label-orange:hover{text-decoration:none;background:#e8e8e8;background:var(--clr-label-bg-hover-color,#e8e8e8)}.label.clickable.label-orange:active,a.label.clickable.label-orange:active{-webkit-box-shadow:0 .05rem 0 0 #613200 inset;box-shadow:0 .05rem 0 0 #613200 inset;-webkit-box-shadow:0 .05rem 0 0 var(--clr-label-orange-bg-color,#613200) inset;box-shadow:0 .05rem 0 0 var(--clr-label-orange-bg-color,#613200) inset;-webkit-transform:translateY(.5px);transform:translateY(.5px)}.label.label-orange>.badge,a.label.label-orange>.badge{background:#613200;background:var(--clr-badge-orange-bg-color,#613200);color:#fff;color:var(--clr-badge-orange-color,#fff)}.label.label-5,.label.label-light-blue,a.label.label-5,a.label.label-light-blue{border:.05rem solid;border-color:#179bd3;border-color:var(--clr-label-light-blue-bg-color,#179bd3)}.label.clickable.label-light-blue:active,.label.clickable.label-light-blue:hover,a.label.clickable.label-light-blue:active,a.label.clickable.label-light-blue:hover{text-decoration:none;background:#e8e8e8;background:var(--clr-label-bg-hover-color,#e8e8e8)}.label.clickable.label-light-blue:active,a.label.clickable.label-light-blue:active{-webkit-box-shadow:0 .05rem 0 0 #179bd3 inset;box-shadow:0 .05rem 0 0 #179bd3 inset;-webkit-box-shadow:0 .05rem 0 0 var(--clr-label-light-blue-bg-color,#179bd3) inset;box-shadow:0 .05rem 0 0 var(--clr-label-light-blue-bg-color,#179bd3) inset;-webkit-transform:translateY(.5px);transform:translateY(.5px)}.label.label-light-blue>.badge,a.label.label-light-blue>.badge{background:#179bd3;background:var(--clr-badge-light-blue-bg-color,#179bd3);color:#fff;color:var(--clr-badge-light-blue-color,#fff)}.label.label-info,a.label.label-info{background:#e3f5fc;background:var(--clr-label-info-bg-color,#e3f5fc);color:#00567a;color:var(--clr-label-info-font-color,#00567a);border:.05rem solid;border-color:#00567a;border-color:var(--clr-label-info-border-color,#00567a)}.label.label-success,a.label.label-success{background:#dff0d0;background:var(--clr-label-success-bg-color,#dff0d0);color:#306b00;color:var(--clr-label-success-font-color,#306b00);border:.05rem solid;border-color:#306b00;border-color:var(--clr-label-success-border-color,#306b00)}.label.label-warning,a.label.label-warning{background:#fff4c7;background:var(--clr-label-warning-bg-color,#fff4c7);color:#333;color:var(--clr-label-warning-font-color,#333);border:.05rem solid;border-color:#ad7600;border-color:var(--clr-label-warning-border-color,#ad7600)}.label.label-danger,a.label.label-danger{background:#feddd7;background:var(--clr-label-danger-bg-color,#feddd7);color:#991700;color:var(--clr-label-danger-font-color,#991700);border:.05rem solid;border-color:#991700;border-color:var(--clr-label-danger-border-color,#991700)}.label>.badge,a.label>.badge{margin:0 -.45rem 0 .3rem}@-moz-document url-prefix(){.label,a.label{vertical-align:bottom}}:root{--clr-login-title-color:var(--clr-h1-color);--clr-login-title-font-weight:var(--clr-h1-font-weight);--clr-login-title-font-family:var(--clr-h1-font-family);--clr-login-trademark-color:var(--clr-h2-color);--clr-login-trademark-font-weight:var(--clr-h2-font-weight);--clr-login-trademark-font-family:var(--clr-h2-font-family);--clr-login-subtitle-color:var(--clr-h3-color);--clr-login-subtitle-font-weight:var(--clr-h3-font-weight);--clr-login-subtitle-font-family:var(--clr-h3-font-family);--clr-login-background-color:var(--clr-global-app-background);--clr-login-background:url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%0D%0A%20%20%20%20%20version%3D%221.1%22%0D%0A%20%20%20%20%20id%3D%22no-aspect-ratio%22%0D%0A%20%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0D%0A%20%20%20%20%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%0D%0A%20%20%20%20%20x%3D%220px%22%0D%0A%20%20%20%20%20y%3D%220px%22%0D%0A%20%20%20%20%20height%3D%222055.55px%22%0D%0A%20%20%20%20%20width%3D%221440px%22%0D%0A%20%20%20%20%20viewBox%3D%220%200%202055.55%201440%22%0D%0A%20%20%20%20%20preserveAspectRatio%3D%22xMinYMin%20slice%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%3Cdesc%3ELogin%20Image%3C%2Fdesc%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate%280.000000%2C%20-4.000000%29%22%3E%0D%0A%20%20%20%20%20%20%20%20%3Cg%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%23FAFAFA%22%20x%3D%220%22%20y%3D%224%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23007CBB%22%20opacity%3D%220.4%22%20style%3D%22mix-blend-mode%3A%20multiply%3B%22%20points%3D%221108.43%201443.63%201109.08%201443.63%20443.44%20777.74%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2393D8CA%22%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3A%20overlay%3B%22%20points%3D%220.79%20334.92%20443.44%20777.74%200.79%20334.49%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%220.79%20211.88%200.79%20329.6%2059.62%20270.77%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%22160.65%20169.74%200.79%209.73%200.79%20211.88%2090.27%20301.46%2059.62%20270.77%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23CDE3EE%22%20points%3D%22503.77%201443.63%20697.47%201443.63%20803.74%201337.36%20706.93%201240.43%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23CDE3EE%22%20points%3D%22158.33%20691.15%200.79%20848.72%200.79%201427.43%20447.52%20980.7%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23CEDDE0%22%20points%3D%22257.71%20591.75%200.79%20334.49%200.79%20533.42%20158.33%20691.15%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A9C9D5%22%20points%3D%220.79%20533.42%200.79%20848.72%20158.33%20691.15%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23AFD4E7%22%20points%3D%22806.46%201140.89%20546.94%20881.28%20447.52%20980.7%20706.93%201240.43%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%238FC4DF%22%20points%3D%22447.52%20980.7%200.79%201427.43%200.79%201443.63%20503.77%201443.63%20706.93%201240.43%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2370C0DC%22%20points%3D%22608.23%20819.99%20546.94%20881.28%20806.46%201140.89%20867.64%201079.7%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%22420.05%20429.39%20319.01%20530.45%20608.23%20819.99%20709.3%20718.91%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2369AFD4%22%20points%3D%22709.3%20718.91%20608.23%20819.99%20867.64%201079.7%20968.74%20978.6%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%238EB5BC%22%20points%3D%22619.59%20229.82%20393.42%203.12%20327.27%203.12%20160.65%20169.74%20420.05%20429.39%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%238EB5BC%22%20points%3D%22319.01%20530.45%20319.01%20530.45%2090.27%20301.46%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%237CB0C7%22%20points%3D%22160.65%20169.74%2059.62%20270.77%2090.27%20301.46%20319.01%20530.45%20420.05%20429.39%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2384C4D2%22%20points%3D%2259.62%20270.77%200.79%20329.6%200.79%20334.49%20257.71%20591.75%20319.01%20530.45%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%237CB0C7%22%20points%3D%22537.55%203.12%20393.42%203.12%20619.59%20229.82%20691.74%20157.66%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2387D1DB%22%20points%3D%22846.25%203.12%20537.55%203.12%20691.74%20157.66%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23CDE3EE%22%20points%3D%22909.87%201443.63%20850.19%201383.87%20790.43%201443.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%22319.01%20530.45%20257.71%20591.75%20443.44%20777.74%20546.94%20881.28%20608.23%20819.99%20867.64%201079.7%20867.64%201079.7%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%22867.64%201079.7%20806.46%201140.89%20903.31%201237.78%20964.46%201176.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%221065.57%201075.52%20968.74%20978.6%20867.64%201079.7%20964.46%201176.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%22964.46%201176.63%20867.64%201079.7%20867.64%201079.7%20964.46%201176.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%221010.92%201223.13%201231.16%201443.63%201010.92%201223.13%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%221240.08%20707.22%201167.9%20779.4%201264.68%20876.4%201336.87%20804.22%201240.08%20707.21%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%22980.83%20447.39%20691.74%20157.66%20619.59%20229.82%20908.66%20519.56%20980.83%20447.39%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23AFD4E7%22%20points%3D%22709.3%20718.91%20968.74%20978.6%201167.91%20779.4%20908.66%20519.55%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2369AFD4%22%20points%3D%22980.83%20447.39%20908.66%20519.55%201167.91%20779.4%201240.08%20707.21%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%221034.59%203.12%20846.25%203.12%20691.74%20157.66%20980.83%20447.39%201229.75%20198.47%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%221240.08%20707.21%201336.87%20804.22%201586.01%20555.08%201489.14%20458.12%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2370C0DC%22%20points%3D%221229.75%20198.47%20980.83%20447.39%201240.08%20707.21%201489.14%20458.12%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23B7CED2%22%20points%3D%221292.22%201302.38%201433.32%201443.63%201830.61%201443.63%201491.18%201103.42%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%221010.92%201223.13%20949.78%201284.27%201109.08%201443.63%201150.98%201443.63%201191.09%201403.51%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2375B8C5%22%20points%3D%221150.98%201443.63%201231.16%201443.63%201191.09%201403.51%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%221292.22%201302.38%201112.03%201122.02%201010.92%201223.13%201191.09%201403.51%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%236EA4BC%22%20points%3D%221191.09%201403.51%201231.16%201443.63%201433.32%201443.63%201292.22%201302.38%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23007CBB%22%20opacity%3D%220.4%22%20style%3D%22mix-blend-mode%3A%20multiply%3B%22%20points%3D%221383.3%20850.75%201311.12%20922.94%201491.18%201103.42%201563.37%201031.23%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23B7CED2%22%20points%3D%221491.18%201103.42%201830.61%201443.63%201974.86%201443.63%201563.37%201031.23%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%236EA4BC%22%20points%3D%221491.18%201103.42%201830.61%201443.63%201974.86%201443.63%201563.37%201031.23%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%221812.65%20781.95%201632.46%20601.59%201383.3%20850.75%201563.37%201031.23%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23B7CED2%22%20points%3D%221563.37%201031.23%201974.86%201443.63%202054.45%201443.63%202054.45%201023.99%201812.65%20781.95%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2378CAD4%22%20points%3D%221563.37%201031.23%201974.86%201443.63%202054.45%201443.63%202054.45%201023.99%201812.65%20781.95%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2391C5E0%22%20points%3D%22803.74%201337.36%20850.19%201383.87%20949.78%201284.27%20903.31%201237.78%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2391C5E0%22%20points%3D%221065.57%201075.52%201112.03%201122.02%201311.12%20922.94%201264.69%20876.4%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2377B8D9%22%20points%3D%22697.47%201443.63%20790.43%201443.63%20850.19%201383.87%20803.74%201337.36%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%22964.46%201176.63%20903.31%201237.78%20949.78%201284.27%201010.92%201223.13%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%235DB5D6%22%20points%3D%22964.46%201176.63%20903.31%201237.78%20949.78%201284.27%201010.92%201223.13%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%2396C7DF%22%20transform%3D%22translate%281038.247297%2C%201149.275429%29%20rotate%28-44.970000%29%20translate%28-1038.247297%2C%20-1149.275429%29%20%22%20x%3D%22966.752297%22%20y%3D%221116.41043%22%20width%3D%22142.99%22%20height%3D%2265.73%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%2357A8D0%22%20transform%3D%22translate%281038.247297%2C%201149.275429%29%20rotate%28-44.970000%29%20translate%28-1038.247297%2C%20-1149.275429%29%20%22%20x%3D%22966.752297%22%20y%3D%221116.41043%22%20width%3D%22142.99%22%20height%3D%2265.73%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%221010.92%201223.13%201010.92%201223.13%20964.46%201176.63%20964.46%201176.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23000000%22%20opacity%3D%220.42%22%20points%3D%221010.92%201223.13%201010.92%201223.13%20964.46%201176.63%20964.46%201176.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23007CBB%22%20opacity%3D%220.4%22%20style%3D%22mix-blend-mode%3A%20multiply%3B%22%20points%3D%221336.87%20804.22%201264.69%20876.4%201311.12%20922.94%201383.3%20850.75%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2357A8D0%22%20points%3D%221336.87%20804.22%201264.69%20876.4%201311.12%20922.94%201383.3%20850.75%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2393D8CA%22%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3A%20overlay%3B%22%20points%3D%221336.87%20804.22%201383.3%20850.75%201632.46%20601.59%201586.01%20555.08%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%235DB5D6%22%20points%3D%221336.87%20804.22%201383.3%20850.75%201632.46%20601.59%201586.01%20555.08%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23AFD3E6%22%20points%3D%222056%200.12%201645.49%200.12%201648.49%203.12%201944.07%203.12%201796.22%20150.99%201893.12%20247.97%202054.45%2086.64%202054.45%20179.6%201939.58%20294.47%202056%20411%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%237AB9D9%22%20points%3D%221648.49%203.12%201796.22%20150.99%201944.07%203.12%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2366AED4%22%20points%3D%222054.45%2086.64%201893.12%20247.97%201939.58%20294.47%202054.45%20179.6%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23B7CED2%22%20points%3D%221884.82%20709.78%202054.45%20879.57%202054.45%20540.15%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23AFD4E7%22%20points%3D%221489.14%20458.12%201489.14%20458.12%201371.13%20339.99%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23AFD4E7%22%20points%3D%221796.22%20150.99%201648.49%203.12%201425.1%203.12%201301.91%20126.31%201561.3%20385.95%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%2391C5E0%22%20transform%3D%22translate%281798.954066%2C%20388.798781%29%20rotate%28-44.970000%29%20translate%28-1798.954066%2C%20-388.798781%29%20%22%20x%3D%221632.82407%22%20y%3D%22355.933781%22%20width%3D%22332.26%22%20height%3D%2265.73%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2391C5E0%22%20points%3D%221586.01%20555.08%201632.46%20601.59%201632.46%20601.59%201586.01%20555.08%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%23B3EAEE%22%20transform%3D%22translate%281573.711577%2C%20470.620263%29%20rotate%28-45.000000%29%20translate%28-1573.711577%2C%20-470.620263%29%20%22%20x%3D%221522.68158%22%20y%3D%22402.085263%22%20width%3D%22102.06%22%20height%3D%22137.07%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%23B3EAEE%22%20transform%3D%22translate%281758.676758%2C%20655.767120%29%20rotate%28-44.970000%29%20translate%28-1758.676758%2C%20-655.767120%29%20%22%20x%3D%221707.64676%22%20y%3D%22528.29212%22%20width%3D%22102.06%22%20height%3D%22254.95%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23B3EAEE%22%20points%3D%221301.91%20126.31%201178.84%203.12%201034.59%203.12%201229.75%20198.47%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2383C0C8%22%20points%3D%221812.65%20781.95%202054.45%201023.99%202054.45%20879.57%201884.82%20709.78%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%237DC6DC%22%20transform%3D%22translate%281395.516901%2C%20292.206519%29%20rotate%28-45.000000%29%20translate%28-1395.516901%2C%20-292.206519%29%20%22%20x%3D%221344.4919%22%20y%3D%22108.701519%22%20width%3D%22102.05%22%20height%3D%22367.01%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%2368B8D5%22%20transform%3D%22translate%281645.313619%2C%20542.249760%29%20rotate%28-45.000000%29%20translate%28-1645.313619%2C%20-542.249760%29%20%22%20x%3D%221594.28362%22%20y%3D%22509.38476%22%20width%3D%22102.06%22%20height%3D%2265.73%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%280.000000%2C%203.000000%29%22%20stroke%3D%22%23000000%22%20opacity%3D%220.15%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0.95%2C0.12%20L0.95%2C840.12%22%20id%3D%22Shape%22%3E%3C%2Fpath%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0D%0A%20%20%20%20%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E");--clr-login-error-background-color:var(--clr-color-danger-800);--clr-login-error-border-radius:var(--clr-global-borderradius);--clr-login-panel-line-color:var(--clr-color-neutral-1000);--clr-login-panel-line-opacity:0.1}.login-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;background:url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%0D%0A%20%20%20%20%20version%3D%221.1%22%0D%0A%20%20%20%20%20id%3D%22no-aspect-ratio%22%0D%0A%20%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0D%0A%20%20%20%20%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%0D%0A%20%20%20%20%20x%3D%220px%22%0D%0A%20%20%20%20%20y%3D%220px%22%0D%0A%20%20%20%20%20height%3D%222055.55px%22%0D%0A%20%20%20%20%20width%3D%221440px%22%0D%0A%20%20%20%20%20viewBox%3D%220%200%202055.55%201440%22%0D%0A%20%20%20%20%20preserveAspectRatio%3D%22xMinYMin%20slice%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%3Cdesc%3ELogin%20Image%3C%2Fdesc%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate%280.000000%2C%20-4.000000%29%22%3E%0D%0A%20%20%20%20%20%20%20%20%3Cg%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%23FAFAFA%22%20x%3D%220%22%20y%3D%224%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23007CBB%22%20opacity%3D%220.4%22%20style%3D%22mix-blend-mode%3A%20multiply%3B%22%20points%3D%221108.43%201443.63%201109.08%201443.63%20443.44%20777.74%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2393D8CA%22%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3A%20overlay%3B%22%20points%3D%220.79%20334.92%20443.44%20777.74%200.79%20334.49%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%220.79%20211.88%200.79%20329.6%2059.62%20270.77%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%22160.65%20169.74%200.79%209.73%200.79%20211.88%2090.27%20301.46%2059.62%20270.77%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23CDE3EE%22%20points%3D%22503.77%201443.63%20697.47%201443.63%20803.74%201337.36%20706.93%201240.43%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23CDE3EE%22%20points%3D%22158.33%20691.15%200.79%20848.72%200.79%201427.43%20447.52%20980.7%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23CEDDE0%22%20points%3D%22257.71%20591.75%200.79%20334.49%200.79%20533.42%20158.33%20691.15%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A9C9D5%22%20points%3D%220.79%20533.42%200.79%20848.72%20158.33%20691.15%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23AFD4E7%22%20points%3D%22806.46%201140.89%20546.94%20881.28%20447.52%20980.7%20706.93%201240.43%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%238FC4DF%22%20points%3D%22447.52%20980.7%200.79%201427.43%200.79%201443.63%20503.77%201443.63%20706.93%201240.43%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2370C0DC%22%20points%3D%22608.23%20819.99%20546.94%20881.28%20806.46%201140.89%20867.64%201079.7%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%22420.05%20429.39%20319.01%20530.45%20608.23%20819.99%20709.3%20718.91%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2369AFD4%22%20points%3D%22709.3%20718.91%20608.23%20819.99%20867.64%201079.7%20968.74%20978.6%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%238EB5BC%22%20points%3D%22619.59%20229.82%20393.42%203.12%20327.27%203.12%20160.65%20169.74%20420.05%20429.39%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%238EB5BC%22%20points%3D%22319.01%20530.45%20319.01%20530.45%2090.27%20301.46%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%237CB0C7%22%20points%3D%22160.65%20169.74%2059.62%20270.77%2090.27%20301.46%20319.01%20530.45%20420.05%20429.39%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2384C4D2%22%20points%3D%2259.62%20270.77%200.79%20329.6%200.79%20334.49%20257.71%20591.75%20319.01%20530.45%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%237CB0C7%22%20points%3D%22537.55%203.12%20393.42%203.12%20619.59%20229.82%20691.74%20157.66%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2387D1DB%22%20points%3D%22846.25%203.12%20537.55%203.12%20691.74%20157.66%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23CDE3EE%22%20points%3D%22909.87%201443.63%20850.19%201383.87%20790.43%201443.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%22319.01%20530.45%20257.71%20591.75%20443.44%20777.74%20546.94%20881.28%20608.23%20819.99%20867.64%201079.7%20867.64%201079.7%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%22867.64%201079.7%20806.46%201140.89%20903.31%201237.78%20964.46%201176.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%221065.57%201075.52%20968.74%20978.6%20867.64%201079.7%20964.46%201176.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%22964.46%201176.63%20867.64%201079.7%20867.64%201079.7%20964.46%201176.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%221010.92%201223.13%201231.16%201443.63%201010.92%201223.13%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%221240.08%20707.22%201167.9%20779.4%201264.68%20876.4%201336.87%20804.22%201240.08%20707.21%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%22980.83%20447.39%20691.74%20157.66%20619.59%20229.82%20908.66%20519.56%20980.83%20447.39%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23AFD4E7%22%20points%3D%22709.3%20718.91%20968.74%20978.6%201167.91%20779.4%20908.66%20519.55%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2369AFD4%22%20points%3D%22980.83%20447.39%20908.66%20519.55%201167.91%20779.4%201240.08%20707.21%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%221034.59%203.12%20846.25%203.12%20691.74%20157.66%20980.83%20447.39%201229.75%20198.47%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%221240.08%20707.21%201336.87%20804.22%201586.01%20555.08%201489.14%20458.12%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2370C0DC%22%20points%3D%221229.75%20198.47%20980.83%20447.39%201240.08%20707.21%201489.14%20458.12%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23B7CED2%22%20points%3D%221292.22%201302.38%201433.32%201443.63%201830.61%201443.63%201491.18%201103.42%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%221010.92%201223.13%20949.78%201284.27%201109.08%201443.63%201150.98%201443.63%201191.09%201403.51%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2375B8C5%22%20points%3D%221150.98%201443.63%201231.16%201443.63%201191.09%201403.51%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%221292.22%201302.38%201112.03%201122.02%201010.92%201223.13%201191.09%201403.51%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%236EA4BC%22%20points%3D%221191.09%201403.51%201231.16%201443.63%201433.32%201443.63%201292.22%201302.38%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23007CBB%22%20opacity%3D%220.4%22%20style%3D%22mix-blend-mode%3A%20multiply%3B%22%20points%3D%221383.3%20850.75%201311.12%20922.94%201491.18%201103.42%201563.37%201031.23%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23B7CED2%22%20points%3D%221491.18%201103.42%201830.61%201443.63%201974.86%201443.63%201563.37%201031.23%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%236EA4BC%22%20points%3D%221491.18%201103.42%201830.61%201443.63%201974.86%201443.63%201563.37%201031.23%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%221812.65%20781.95%201632.46%20601.59%201383.3%20850.75%201563.37%201031.23%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23B7CED2%22%20points%3D%221563.37%201031.23%201974.86%201443.63%202054.45%201443.63%202054.45%201023.99%201812.65%20781.95%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2378CAD4%22%20points%3D%221563.37%201031.23%201974.86%201443.63%202054.45%201443.63%202054.45%201023.99%201812.65%20781.95%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2391C5E0%22%20points%3D%22803.74%201337.36%20850.19%201383.87%20949.78%201284.27%20903.31%201237.78%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2391C5E0%22%20points%3D%221065.57%201075.52%201112.03%201122.02%201311.12%20922.94%201264.69%20876.4%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2377B8D9%22%20points%3D%22697.47%201443.63%20790.43%201443.63%20850.19%201383.87%20803.74%201337.36%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%22964.46%201176.63%20903.31%201237.78%20949.78%201284.27%201010.92%201223.13%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%235DB5D6%22%20points%3D%22964.46%201176.63%20903.31%201237.78%20949.78%201284.27%201010.92%201223.13%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%2396C7DF%22%20transform%3D%22translate%281038.247297%2C%201149.275429%29%20rotate%28-44.970000%29%20translate%28-1038.247297%2C%20-1149.275429%29%20%22%20x%3D%22966.752297%22%20y%3D%221116.41043%22%20width%3D%22142.99%22%20height%3D%2265.73%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%2357A8D0%22%20transform%3D%22translate%281038.247297%2C%201149.275429%29%20rotate%28-44.970000%29%20translate%28-1038.247297%2C%20-1149.275429%29%20%22%20x%3D%22966.752297%22%20y%3D%221116.41043%22%20width%3D%22142.99%22%20height%3D%2265.73%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%221010.92%201223.13%201010.92%201223.13%20964.46%201176.63%20964.46%201176.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23000000%22%20opacity%3D%220.42%22%20points%3D%221010.92%201223.13%201010.92%201223.13%20964.46%201176.63%20964.46%201176.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23007CBB%22%20opacity%3D%220.4%22%20style%3D%22mix-blend-mode%3A%20multiply%3B%22%20points%3D%221336.87%20804.22%201264.69%20876.4%201311.12%20922.94%201383.3%20850.75%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2357A8D0%22%20points%3D%221336.87%20804.22%201264.69%20876.4%201311.12%20922.94%201383.3%20850.75%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2393D8CA%22%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3A%20overlay%3B%22%20points%3D%221336.87%20804.22%201383.3%20850.75%201632.46%20601.59%201586.01%20555.08%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%235DB5D6%22%20points%3D%221336.87%20804.22%201383.3%20850.75%201632.46%20601.59%201586.01%20555.08%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23AFD3E6%22%20points%3D%222056%200.12%201645.49%200.12%201648.49%203.12%201944.07%203.12%201796.22%20150.99%201893.12%20247.97%202054.45%2086.64%202054.45%20179.6%201939.58%20294.47%202056%20411%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%237AB9D9%22%20points%3D%221648.49%203.12%201796.22%20150.99%201944.07%203.12%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2366AED4%22%20points%3D%222054.45%2086.64%201893.12%20247.97%201939.58%20294.47%202054.45%20179.6%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23B7CED2%22%20points%3D%221884.82%20709.78%202054.45%20879.57%202054.45%20540.15%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23AFD4E7%22%20points%3D%221489.14%20458.12%201489.14%20458.12%201371.13%20339.99%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23AFD4E7%22%20points%3D%221796.22%20150.99%201648.49%203.12%201425.1%203.12%201301.91%20126.31%201561.3%20385.95%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%2391C5E0%22%20transform%3D%22translate%281798.954066%2C%20388.798781%29%20rotate%28-44.970000%29%20translate%28-1798.954066%2C%20-388.798781%29%20%22%20x%3D%221632.82407%22%20y%3D%22355.933781%22%20width%3D%22332.26%22%20height%3D%2265.73%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2391C5E0%22%20points%3D%221586.01%20555.08%201632.46%20601.59%201632.46%20601.59%201586.01%20555.08%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%23B3EAEE%22%20transform%3D%22translate%281573.711577%2C%20470.620263%29%20rotate%28-45.000000%29%20translate%28-1573.711577%2C%20-470.620263%29%20%22%20x%3D%221522.68158%22%20y%3D%22402.085263%22%20width%3D%22102.06%22%20height%3D%22137.07%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%23B3EAEE%22%20transform%3D%22translate%281758.676758%2C%20655.767120%29%20rotate%28-44.970000%29%20translate%28-1758.676758%2C%20-655.767120%29%20%22%20x%3D%221707.64676%22%20y%3D%22528.29212%22%20width%3D%22102.06%22%20height%3D%22254.95%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23B3EAEE%22%20points%3D%221301.91%20126.31%201178.84%203.12%201034.59%203.12%201229.75%20198.47%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2383C0C8%22%20points%3D%221812.65%20781.95%202054.45%201023.99%202054.45%20879.57%201884.82%20709.78%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%237DC6DC%22%20transform%3D%22translate%281395.516901%2C%20292.206519%29%20rotate%28-45.000000%29%20translate%28-1395.516901%2C%20-292.206519%29%20%22%20x%3D%221344.4919%22%20y%3D%22108.701519%22%20width%3D%22102.05%22%20height%3D%22367.01%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%2368B8D5%22%20transform%3D%22translate%281645.313619%2C%20542.249760%29%20rotate%28-45.000000%29%20translate%28-1645.313619%2C%20-542.249760%29%20%22%20x%3D%221594.28362%22%20y%3D%22509.38476%22%20width%3D%22102.06%22%20height%3D%2265.73%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%280.000000%2C%203.000000%29%22%20stroke%3D%22%23000000%22%20opacity%3D%220.15%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0.95%2C0.12%20L0.95%2C840.12%22%20id%3D%22Shape%22%3E%3C%2Fpath%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0D%0A%20%20%20%20%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E");background-size:100%;background-position:25.2rem 0;background-repeat:no-repeat}.login-wrapper .login{background:#fafafa;background:var(--clr-login-background-color,#fafafa);position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:1.2rem 3rem;height:auto;min-height:100vh;width:25.2rem}.login-wrapper .login .title{color:#000;color:var(--clr-login-title-color,#000);font-weight:200;font-weight:var(--clr-login-title-font-weight,200);font-family:Metropolis,"Avenir Next","Helvetica Neue",Arial,sans-serif;font-family:var(--clr-login-title-font-family, Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif);font-size:1.6rem;letter-spacing:normal;line-height:1.8rem}.login-wrapper .login .title .welcome{line-height:1.8rem}.login-wrapper .login .title .hint{color:#000;color:var(--clr-login-title-color,#000);margin-top:1.5rem;font-size:.7rem}.login-wrapper .login .trademark{color:#000;color:var(--clr-login-trademark-color,#000);font-weight:200;font-weight:var(--clr-login-trademark-font-weight,200);font-family:Metropolis,"Avenir Next","Helvetica Neue",Arial,sans-serif;font-family:var(--clr-login-trademark-font-family, Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif);font-size:1.4rem;letter-spacing:normal}.login-wrapper .login .subtitle{font-weight:200;font-weight:var(--clr-login-subtitle-font-weight,200);color:#000;color:var(--clr-login-subtitle-color,#000);font-family:Metropolis,"Avenir Next","Helvetica Neue",Arial,sans-serif;font-family:var(--clr-login-subtitle-font-family, Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif);font-size:1.1rem;letter-spacing:normal;line-height:1.8rem}.login-wrapper .login .login-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:2.4rem 0 0 0}.login-wrapper .login .login-group .auth-source,.login-wrapper .login .login-group .checkbox,.login-wrapper .login .login-group .clr-checkbox-wrapper,.login-wrapper .login .login-group .clr-form-control,.login-wrapper .login .login-group .password,.login-wrapper .login .login-group .username{margin:.3rem 0 .9rem 0}.login-wrapper .login .login-group .clr-control-container{display:block;width:100%}.login-wrapper .login .login-group .clr-control-container .clr-select,.login-wrapper .login .login-group .clr-control-container .clr-select-wrapper{width:100%}.login-wrapper .login .login-group .clr-control-container .clr-input-wrapper>.clr-input{width:100%}.login-wrapper .login .login-group .clr-control-container .clr-input-wrapper{width:100%}.login-wrapper .login .login-group .clr-control-container .clr-input-wrapper>.clr-input-group{max-width:100%;width:100%;padding-right:.48rem}.login-wrapper .login .login-group .clr-control-container .clr-input-wrapper>.clr-input-group>.clr-input{width:calc(100% - 1.2rem)}.login-wrapper .login .login-group .tooltip-validation{margin-top:.3rem}.login-wrapper .login .login-group .tooltip-validation .password,.login-wrapper .login .login-group .tooltip-validation .username{width:100%;margin-top:0}.login-wrapper .login .login-group .error{display:none;margin:.3rem 0 0 0;padding:.45rem .6rem;background:#c21d00;background:var(--clr-login-error-background-color,#c21d00);color:#fafafa;color:var(--clr-login-background-color,#fafafa);border-radius:.15rem;border-radius:var(--clr-login-error-border-radius,.15rem);line-height:.9rem}.login-wrapper .login .login-group .error:before{display:inline-block;content:"";background:url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%225%205%2026%2026%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Cstyle%3E.clr-i-outline%7Bfill%3A%23fafafa%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctitle%3Eexclamation-circle-line%3C%2Ftitle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-1%22%20d%3D%22M18%2C6A12%2C12%2C0%2C1%2C0%2C30%2C18%2C12%2C12%2C0%2C0%2C0%2C18%2C6Zm0%2C22A10%2C10%2C0%2C1%2C1%2C28%2C18%2C10%2C10%2C0%2C0%2C1%2C18%2C28Z%22%3E%3C%2Fpath%3E%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-2%22%20d%3D%22M18%2C20.07a1.3%2C1.3%2C0%2C0%2C1-1.3-1.3v-6a1.3%2C1.3%2C0%2C1%2C1%2C2.6%2C0v6A1.3%2C1.3%2C0%2C0%2C1%2C18%2C20.07Z%22%3E%3C%2Fpath%3E%3Ccircle%20class%3D%22clr-i-outline%20clr-i-outline-path-3%22%20cx%3D%2217.95%22%20cy%3D%2223.02%22%20r%3D%221.5%22%3E%3C%2Fcircle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E");margin:.05rem .3rem 0 0;height:.8rem;width:.8rem}.login-wrapper .login .login-group .error.active{display:-webkit-box;display:-ms-flexbox;display:flex}.login-wrapper .login .login-group .error.active:before{-webkit-box-flex:0;-ms-flex:0 0 .8rem;flex:0 0 .8rem}.login-wrapper .login .login-group .btn{margin:3.6rem 0 0 0;max-width:none}.login-wrapper .login .login-group .error+.btn{margin:1.2rem 0 0 0}.login-wrapper .login .login-group .signup{margin-top:.6rem;font-size:.7rem;text-align:center}.login-wrapper .login:after{position:absolute;content:"";display:block;width:.05rem;height:100%;background:#000;background:var(--clr-login-panel-line-color,#000);opacity:.1;opacity:var(--clr-login-panel-line-opacity,.1);top:0;right:-.1rem}@media screen and (max-width:768px){.login-wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background:#fafafa;background:var(--clr-login-background-color,#fafafa)}.login-wrapper .login{width:100%;margin-left:0;padding:1.2rem 20%}.login-wrapper .login:after{content:none}}@media screen and (max-width:576px){.login-wrapper .login{padding:1.2rem 15%}}.main-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100vh;background:#fafafa;background:var(--clr-global-app-background,#fafafa)}.main-container .alert.alert-app-level{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;overflow-x:hidden}.main-container .header,.main-container header{-webkit-box-flex:0;-ms-flex:0 0 3rem;flex:0 0 3rem}.main-container .sub-nav,.main-container .subnav{-webkit-box-flex:0;-ms-flex:0 0 1.8rem;flex:0 0 1.8rem}.main-container .u-main-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden}.main-container .content-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;min-height:.05rem}.main-container .content-container .content-area{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1.2rem 1.2rem 1.2rem 1.2rem}.main-container .content-container .content-area>:first-child{margin-top:0}.main-container .content-container .sidenav{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;overflow:hidden}.main-container .content-container .clr-vertical-nav{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}@media print{.main-container{height:auto}}body.no-scrolling,body[cds-layout=no-scrolling]{overflow:hidden}body.no-scrolling .main-container .content-container .content-area,body[cds-layout=no-scrolling] .main-container .content-container .content-area{overflow:hidden}:root{--clr-modal-close-color:var(--clr-color-neutral-600);--clr-modal-bg-color:var(--clr-color-neutral-0);--clr-modal-content-box-shadow-color:rgba( - 0, - 0, - 0, - 0.2 -);--clr-modal-backdrop-color:var(--clr-color-neutral-900);--clr-modal-backdrop-opacity:0.85;--clr-modal-border-radius:var(--clr-global-borderradius);--clr-modal-title-color:var(--clr-h3-color);--clr-modal-title-font-family:var(--clr-h3-font-family);--clr-modal-title-font-weight:var(--clr-h3-font-weight)}.modal{position:fixed;top:0;bottom:0;right:0;left:0;z-index:1050;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:2.4rem}@media screen and (max-width:576px){.modal{padding:.6rem}}.modal-dialog{position:relative;z-index:1050;width:28.8rem;max-width:100%}.modal-dialog.modal-sm{width:14.4rem}.modal-dialog.modal-lg{width:43.2rem}.modal-dialog.modal-xl{width:57.6rem}.modal-dialog .modal-content{padding:1.2rem 1.2rem 1.2rem 1.2rem;background-color:#fff;background-color:var(--clr-modal-bg-color,#fff);border-radius:.15rem;border-radius:var(--clr-modal-border-radius,.15rem);-webkit-box-shadow:0 .05rem .1rem .1rem rgba(0,0,0,.2);box-shadow:0 .05rem .1rem .1rem rgba(0,0,0,.2);-webkit-box-shadow:0 .05rem .1rem .1rem var(--clr-modal-content-box-shadow-color);box-shadow:0 .05rem .1rem .1rem var(--clr-modal-content-box-shadow-color)}.modal-header,.modal-header--accessible{border-bottom:none;padding:0 0 1.2rem 0}.modal-header--accessible{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.modal-header .modal-title,.modal-header--accessible .modal-title{color:#000;color:var(--clr-modal-title-color,#000);font-size:1.1rem;font-family:Metropolis,"Avenir Next","Helvetica Neue",Arial,sans-serif;font-family:var(--clr-modal-title-font-family, Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif);font-weight:200;font-weight:var(--clr-modal-title-font-weight,200);line-height:1.2rem;letter-spacing:normal;margin:0;padding:0 .15rem}.modal-header .close,.modal-header--accessible .close{margin-top:-.05rem;margin-right:-.25rem;font-size:1.3rem;line-height:1.2rem}.modal-header .close cds-icon,.modal-header--accessible .close cds-icon{fill:#8c8c8c;fill:var(--clr-modal-close-color,#8c8c8c);height:1.2rem;width:1.2rem}.modal-body{max-height:70vh;overflow-y:auto;overflow-x:hidden;padding:0 .15rem}.modal-body>:first-child{margin-top:0}.modal-body>:last-child{margin-bottom:0}.modal-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding:1.2rem 0 0 0}.modal-footer .btn{margin:0 0 0 .6rem}@media screen and (max-width:768px) and (orientation:landscape){.modal-body{max-height:55vh}}@media screen and (max-width:576px){.modal-content{padding:.6rem 0 .6rem 1.2rem}.modal-header,.modal-header--accessible{padding:0 1.2rem .6rem 0}.modal-body{max-height:55vh}.modal-footer{padding:.6rem 1.2rem 0 0}}.modal-backdrop{position:fixed;top:0;bottom:0;right:0;left:0;background-color:#333;background-color:var(--clr-modal-backdrop-color,#333);opacity:.85;opacity:var(--clr-modal-backdrop-opacity,.85);z-index:1040}.modal .modal-nav{display:none}:root{--clr-header-bg-color:var(--clr-color-neutral-900);--clr-header-divider-opacity:0.15;--clr-header-nav-opacity:0.65;--clr-header-nav-hover-opacity:1;--clr-header-2-bg-color:#485a6a;--clr-header-3-bg-color:var(--clr-color-secondary-action-1000);--clr-header-4-bg-color:#247bae;--clr-header-5-bg-color:var(--clr-color-action-800);--clr-header-6-bg-color:var(--clr-color-action-1000);--clr-header-7-bg-color:#304250;--clr-header-font-color:var(--clr-color-neutral-50);--clr-header-title-color:var(--clr-header-font-color);--clr-header-title-font-weight:var(--clr-h5-font-weight);--clr-header-title-font-family:var(--clr-h5-font-family)}.header,header{display:-webkit-box;display:-ms-flexbox;display:flex;color:#fafafa;color:var(--clr-header-font-color,#fafafa);background-color:#333;background-color:var(--clr-header-bg-color,#333);height:3rem;white-space:nowrap}.header.header-1,header.header-1{background-color:#333;background-color:var(--clr-header-bg-color,#333)}.header.header-2,header.header-2{background-color:#485a6a;background-color:var(--clr-header-2-bg-color,#485a6a)}.header.header-3,header.header-3{background-color:#320047;background-color:var(--clr-header-3-bg-color,#320047)}.header.header-4,header.header-4{background-color:#247bae;background-color:var(--clr-header-4-bg-color,#247bae)}.header.header-5,header.header-5{background-color:#00567a;background-color:var(--clr-header-5-bg-color,#00567a)}.header.header-6,header.header-6{background-color:#00364d;background-color:var(--clr-header-6-bg-color,#00364d)}.header.header-7,header.header-7{background-color:#304250;background-color:var(--clr-header-7-bg-color,#304250)}.header .branding,header .branding{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;min-width:10.2rem;padding:0 1.2rem;height:3rem}.header .branding>.nav-link,.header .branding>a,header .branding>.nav-link,header .branding>a{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:3rem}.header .branding>.nav-link:active,.header .branding>.nav-link:hover,.header .branding>a:active,.header .branding>a:hover,header .branding>.nav-link:active,header .branding>.nav-link:hover,header .branding>a:active,header .branding>a:hover{text-decoration:none}.header .branding>.nav-link:focus,.header .branding>a:focus,header .branding>.nav-link:focus,header .branding>a:focus{outline-offset:-.25rem}.header .branding .clr-icon,.header .branding cds-icon,header .branding .clr-icon,header .branding cds-icon{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;height:1.8rem;width:1.8rem;margin-right:.45rem}.header .branding .title,header .branding .title{color:#fafafa;color:var(--clr-header-title-color,#fafafa);font-weight:400;font-weight:var(--clr-header-title-font-weight,400);font-family:Metropolis,"Avenir Next","Helvetica Neue",Arial,sans-serif;font-family:var(--clr-header-title-font-family, Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif);font-size:.8rem;letter-spacing:.01em;line-height:3rem;text-decoration:none}.header .header-actions,.header .header-nav,.header .settings,header .header-actions,header .header-nav,header .settings{height:3rem}.header .header-actions .nav-text,.header .header-nav .nav-text,.header .settings .nav-text,header .header-actions .nav-text,header .header-nav .nav-text,header .settings .nav-text{font-weight:500}.header .header-actions cds-icon,.header .header-nav cds-icon,.header .settings cds-icon,header .header-actions cds-icon,header .header-nav cds-icon,header .settings cds-icon{color:#fafafa;color:var(--clr-header-font-color,#fafafa)}.header .header-actions .nav-icon,.header .header-nav .nav-icon,.header .settings .nav-icon,header .header-actions .nav-icon,header .header-nav .nav-icon,header .settings .nav-icon{height:3rem;width:3rem}.header .header-actions .nav-link,.header .header-nav .nav-link,.header .settings .nav-link,header .header-actions .nav-link,header .header-nav .nav-link,header .settings .nav-link{position:relative;display:inline-block;text-align:center;padding:.9rem 1.2rem;color:#fafafa;color:var(--clr-header-font-color,#fafafa);opacity:.65;opacity:var(--clr-header-nav-opacity,.65)}.header .header-actions .nav-link:active,.header .header-actions .nav-link:hover,.header .header-nav .nav-link:active,.header .header-nav .nav-link:hover,.header .settings .nav-link:active,.header .settings .nav-link:hover,header .header-actions .nav-link:active,header .header-actions .nav-link:hover,header .header-nav .nav-link:active,header .header-nav .nav-link:hover,header .settings .nav-link:active,header .settings .nav-link:hover{text-decoration:none}.header .header-actions .nav-link:enabled:hover,.header .header-nav .nav-link:enabled:hover,.header .settings .nav-link:enabled:hover,header .header-actions .nav-link:enabled:hover,header .header-nav .nav-link:enabled:hover,header .settings .nav-link:enabled:hover{opacity:1;opacity:var(--clr-header-nav-hover-opacity,1)}.header .header-actions .nav-link:disabled,.header .header-nav .nav-link:disabled,.header .settings .nav-link:disabled,header .header-actions .nav-link:disabled,header .header-nav .nav-link:disabled,header .settings .nav-link:disabled{cursor:not-allowed}.header .header-actions .nav-link .fa,.header .header-actions .nav-link .nav-icon,.header .header-nav .nav-link .fa,.header .header-nav .nav-link .nav-icon,.header .settings .nav-link .fa,.header .settings .nav-link .nav-icon,header .header-actions .nav-link .fa,header .header-actions .nav-link .nav-icon,header .header-nav .nav-link .fa,header .header-nav .nav-link .nav-icon,header .settings .nav-link .fa,header .settings .nav-link .nav-icon{font-size:1.1rem}.header .header-actions .nav-link cds-icon,.header .header-nav .nav-link cds-icon,.header .settings .nav-link cds-icon,header .header-actions .nav-link cds-icon,header .header-nav .nav-link cds-icon,header .settings .nav-link cds-icon{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);height:1.2rem;width:1.2rem}.header .header-actions .nav-link.nav-icon-text cds-icon,.header .header-nav .nav-link.nav-icon-text cds-icon,.header .settings .nav-link.nav-icon-text cds-icon,header .header-actions .nav-link.nav-icon-text cds-icon,header .header-nav .nav-link.nav-icon-text cds-icon,header .settings .nav-link.nav-icon-text cds-icon{position:relative;top:auto;left:auto;-webkit-transform:none;transform:none;margin-left:1.2rem}.header .header-actions .nav-link.nav-icon-text .nav-text,.header .header-nav .nav-link.nav-icon-text .nav-text,.header .settings .nav-link.nav-icon-text .nav-text,header .header-actions .nav-link.nav-icon-text .nav-text,header .header-nav .nav-link.nav-icon-text .nav-text,header .settings .nav-link.nav-icon-text .nav-text{margin-left:0;padding-left:.3rem}.header .header-actions .nav-link .nav-icon+.nav-text,.header .header-nav .nav-link .nav-icon+.nav-text,.header .settings .nav-link .nav-icon+.nav-text,header .header-actions .nav-link .nav-icon+.nav-text,header .header-nav .nav-link .nav-icon+.nav-text,header .settings .nav-link .nav-icon+.nav-text{display:none}.header .header-actions .nav-link.active,.header .header-nav .nav-link.active,.header .settings .nav-link.active,header .header-actions .nav-link.active,header .header-nav .nav-link.active,header .settings .nav-link.active{background:rgba(255,255,255,.15);opacity:1}.header .header-actions .nav-link:focus,.header .header-nav .nav-link:focus,.header .settings .nav-link:focus,header .header-actions .nav-link:focus,header .header-nav .nav-link:focus,header .settings .nav-link:focus{outline-offset:-.25rem}.header .header-nav,header .header-nav{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.header .header-nav:last-child>.nav-link:last-child::after,header .header-nav:last-child>.nav-link:last-child::after{content:none}.header .header-nav .nav-link:first-of-type,.header .header-nav .nav-link:last-of-type,header .header-nav .nav-link:first-of-type,header .header-nav .nav-link:last-of-type{position:relative}.header .header-nav .nav-link:first-of-type::before,.header .header-nav .nav-link:last-of-type::after,header .header-nav .nav-link:first-of-type::before,header .header-nav .nav-link:last-of-type::after{display:inline-block;position:absolute;content:"";background:#fafafa;background:var(--clr-header-font-color,#fafafa);opacity:.15;opacity:var(--clr-header-divider-opacity,.15);opacity:.15;height:2rem;width:.05rem;width:var(--clr-global-borderwidth,.05rem);top:.5rem;left:0;left:auto}.header .header-nav .nav-link:first-of-type::before,header .header-nav .nav-link:first-of-type::before{left:0}.header .header-nav .nav-link:last-of-type::after,header .header-nav .nav-link:last-of-type::after{right:0}.header .header-nav .nav-link.active:first-of-type::before,.header .header-nav .nav-link.active:last-of-type::after,header .header-nav .nav-link.active:first-of-type::before,header .header-nav .nav-link.active:last-of-type::after{content:none}.header .header-actions,.header .settings,header .header-actions,header .settings{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.header .header-actions>.dropdown>.dropdown-toggle,.header .settings>.dropdown>.dropdown-toggle,header .header-actions>.dropdown>.dropdown-toggle,header .settings>.dropdown>.dropdown-toggle{position:relative;line-height:3rem;height:3rem;outline-offset:-.25rem;color:#fafafa;color:var(--clr-header-font-color,#fafafa);opacity:.65;opacity:var(--clr-header-nav-opacity,.65)}.header .header-actions>.dropdown>.dropdown-toggle:enabled:hover,.header .settings>.dropdown>.dropdown-toggle:enabled:hover,header .header-actions>.dropdown>.dropdown-toggle:enabled:hover,header .settings>.dropdown>.dropdown-toggle:enabled:hover{opacity:1;opacity:var(--clr-header-nav-hover-opacity,1)}.header .header-actions>.dropdown>.dropdown-toggle:disabled,.header .settings>.dropdown>.dropdown-toggle:disabled,header .header-actions>.dropdown>.dropdown-toggle:disabled,header .settings>.dropdown>.dropdown-toggle:disabled{cursor:not-allowed}.header .header-actions>.dropdown .dropdown-toggle.nav-icon cds-icon:not([shape^=angle]),.header .settings>.dropdown .dropdown-toggle.nav-icon cds-icon:not([shape^=angle]),header .header-actions>.dropdown .dropdown-toggle.nav-icon cds-icon:not([shape^=angle]),header .settings>.dropdown .dropdown-toggle.nav-icon cds-icon:not([shape^=angle]){position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:1.1rem;width:1.1rem;right:1.2rem}.header .header-actions>.dropdown .dropdown-toggle.nav-icon cds-icon[shape^=angle],.header .settings>.dropdown .dropdown-toggle.nav-icon cds-icon[shape^=angle],header .header-actions>.dropdown .dropdown-toggle.nav-icon cds-icon[shape^=angle],header .settings>.dropdown .dropdown-toggle.nav-icon cds-icon[shape^=angle]{right:.6rem}.header .header-actions>.dropdown .dropdown-toggle.nav-text,.header .settings>.dropdown .dropdown-toggle.nav-text,header .header-actions>.dropdown .dropdown-toggle.nav-text,header .settings>.dropdown .dropdown-toggle.nav-text{padding:0 1.8rem 0 1.2rem}.header .header-actions>.dropdown .dropdown-toggle.nav-text cds-icon[shape^=angle],.header .settings>.dropdown .dropdown-toggle.nav-text cds-icon[shape^=angle],header .header-actions>.dropdown .dropdown-toggle.nav-text cds-icon[shape^=angle],header .settings>.dropdown .dropdown-toggle.nav-text cds-icon[shape^=angle]{right:1.2rem}.header .header-actions>.dropdown .dropdown-toggle.nav-icon,.header .settings>.dropdown .dropdown-toggle.nav-icon,header .header-actions>.dropdown .dropdown-toggle.nav-icon,header .settings>.dropdown .dropdown-toggle.nav-icon{width:3rem;padding-right:0}.header .header-actions>.dropdown.bottom-left>.dropdown-menu,.header .header-actions>.dropdown.bottom-right>.dropdown-menu,.header .settings>.dropdown.bottom-left>.dropdown-menu,.header .settings>.dropdown.bottom-right>.dropdown-menu,header .header-actions>.dropdown.bottom-left>.dropdown-menu,header .header-actions>.dropdown.bottom-right>.dropdown-menu,header .settings>.dropdown.bottom-left>.dropdown-menu,header .settings>.dropdown.bottom-right>.dropdown-menu{top:85%}.header .header-actions>.dropdown:last-child.bottom-right>.dropdown-menu,.header .settings>.dropdown:last-child.bottom-right>.dropdown-menu,header .header-actions>.dropdown:last-child.bottom-right>.dropdown-menu,header .settings>.dropdown:last-child.bottom-right>.dropdown-menu{right:.15rem}.header .header-actions>.dropdown .dropdown-menu,.header .settings>.dropdown .dropdown-menu,header .header-actions>.dropdown .dropdown-menu,header .settings>.dropdown .dropdown-menu{margin-top:-.2rem;left:auto;right:0}.header .header-actions>.dropdown :last-child.dropdown-menu,.header .settings>.dropdown :last-child.dropdown-menu,header .header-actions>.dropdown :last-child.dropdown-menu,header .settings>.dropdown :last-child.dropdown-menu{margin-right:.4rem}.header .search,.header .search-box,header .search,header .search-box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;max-width:14.4rem;padding:0;height:3rem;color:#fafafa;color:var(--clr-header-font-color,#fafafa);opacity:.65;opacity:var(--clr-header-nav-opacity,.65)}.header .search-box:enabled:hover,.header .search:enabled:hover,header .search-box:enabled:hover,header .search:enabled:hover{opacity:1;opacity:var(--clr-header-nav-hover-opacity,1)}.header .search-box:disabled,.header .search:disabled,header .search-box:disabled,header .search:disabled{cursor:not-allowed}.header .search-box>.nav-icon,.header .search>.nav-icon,header .search-box>.nav-icon,header .search>.nav-icon{margin:0 .3rem .15rem 1.2rem}.header .search label,.header .search-box label,header .search label,header .search-box label{display:inline-block;height:3rem;line-height:3rem;padding-left:1.2rem;text-align:center}.header .search label::before,.header .search-box label::before,header .search label::before,header .search-box label::before{display:inline-block;content:"";background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036%2036%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23ffffff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ESearch%3C%2Ftitle%3E%3Cg%20id%3D%22icons%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M15%2C4.05A10.95%2C10.95%2C0%2C1%2C1%2C4.05%2C15%2C11%2C11%2C0%2C0%2C1%2C15%2C4.05M15%2C2A13%2C13%2C0%2C1%2C0%2C28%2C15%2C13%2C13%2C0%2C0%2C0%2C15%2C2Z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20%20d%3D%22M33.71%2C32.29l-7.37-7.42-1.42%2C1.41%2C7.37%2C7.42a1%2C1%2C0%2C1%2C0%2C1.42-1.41Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-size:contain;cursor:pointer;height:1rem;width:1rem;margin:1rem 0 0;vertical-align:top}.header .search label input,.header .search-box label input,header .search label input,header .search-box label input{line-height:1.2rem;margin:.9rem 0}.header .search input[type=text],.header .search-box input[type=text],header .search input[type=text],header .search-box input[type=text]{border:none;background:0 0;color:#fafafa;color:var(--clr-header-font-color,#fafafa);padding:0;vertical-align:middle}.header .search input[type=text]:active,.header .search input[type=text]:focus,.header .search-box input[type=text]:active,.header .search-box input[type=text]:focus,header .search input[type=text]:active,header .search input[type=text]:focus,header .search-box input[type=text]:active,header .search-box input[type=text]:focus{background:0 0}.header .branding+.search,.header .branding+.search-box,header .branding+.search,header .branding+.search-box{position:relative}.header .branding+.search-box::after,.header .branding+.search::after,header .branding+.search-box::after,header .branding+.search::after{display:inline-block;position:absolute;content:"";background:#fafafa;background:var(--clr-header-font-color,#fafafa);opacity:.15;opacity:var(--clr-header-divider-opacity,.15);opacity:.15;height:2rem;width:.05rem;width:var(--clr-global-borderwidth,.05rem);top:.5rem;left:0}@media screen and (max-width:768px){.header .search,.header .search-box,header .search,header .search-box{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;max-width:none}.header .search label,.header .search-box label,header .search label,header .search-box label{padding:0;width:3rem}.header .search label::before,.header .search-box label::before,header .search label::before,header .search-box label::before{left:1rem}.header .search label input,.header .search-box label input,header .search label input,header .search-box label input{display:none}.header .branding+.search-box::after,.header .branding+.search::after,header .branding+.search-box::after,header .branding+.search::after{content:none}.header .search+.header-actions,.header .search+.settings,.header .search-box+.header-actions,.header .search-box+.settings,header .search+.header-actions,header .search+.settings,header .search-box+.header-actions,header .search-box+.settings{position:relative;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.header .search+.header-actions::after,.header .search+.settings::after,.header .search-box+.header-actions::after,.header .search-box+.settings::after,header .search+.header-actions::after,header .search+.settings::after,header .search-box+.header-actions::after,header .search-box+.settings::after{display:inline-block;position:absolute;content:"";background:#fafafa;background:var(--clr-header-font-color,#fafafa);opacity:.15;opacity:var(--clr-header-divider-opacity,.15);opacity:.15;height:2rem;width:.05rem;width:var(--clr-global-borderwidth,.05rem);top:.5rem;left:0}}a.link-normal:link{color:#0072a3;color:var(--clr-link-color,#0072a3);text-decoration:none}a.link-hovered:link{color:#0072a3;color:var(--clr-link-hover-color,#0072a3);text-decoration:underline}a.link-clicked:link{color:#9e57bc;color:var(--clr-link-active-color,#9e57bc);text-decoration:underline}a.link-visited:link{color:#5659b8;color:var(--clr-link-visited-color,#5659b8);text-decoration:none}.nav{display:-webkit-box;display:-ms-flexbox;display:flex;height:1.8rem;list-style-type:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-shadow:0 -.05rem 0 #ccc inset;box-shadow:0 -.05rem 0 #ccc inset;margin:0;width:100%;white-space:nowrap}.nav .nav-item{display:inline-block;margin-right:1.2rem}.nav .nav-item.active>.nav-link{color:#000;color:var(--clr-nav-link-active-color,#000);-webkit-box-shadow:0 -.05rem 0 #ccc inset;box-shadow:0 -.05rem 0 #ccc inset;-webkit-box-shadow:0 -.05rem 0 var(--clr-nav-box-shadow-color,#ccc) inset;box-shadow:0 -.05rem 0 var(--clr-nav-box-shadow-color,#ccc) inset}.nav .nav-link{color:#8c8c8c;color:var(--clr-nav-link-color,#8c8c8c);font-size:.7rem;font-weight:400;font-weight:var(--clr-nav-link-font-weight,400);letter-spacing:normal;line-height:1.8rem;display:inline-block;padding:0 .15rem;-webkit-box-shadow:none;box-shadow:none}.nav .nav-link.btn{text-transform:none;margin:0;margin-bottom:-.05rem;border-radius:0}.nav .nav-link:active,.nav .nav-link:focus,.nav .nav-link:hover{color:inherit}.nav .nav-link.active,.nav .nav-link:hover{-webkit-box-shadow:0 -.15rem 0 #0072a3 inset;box-shadow:0 -.15rem 0 #0072a3 inset;-webkit-box-shadow:0 -.15rem 0 var(--clr-nav-active-box-shadow-color,#0072a3) inset;box-shadow:0 -.15rem 0 var(--clr-nav-active-box-shadow-color,#0072a3) inset;-webkit-transition:-webkit-box-shadow .2s ease-in;transition:-webkit-box-shadow .2s ease-in;transition:box-shadow .2s ease-in;transition:box-shadow .2s ease-in,-webkit-box-shadow .2s ease-in}.nav .nav-link.active,.nav .nav-link:active,.nav .nav-link:focus,.nav .nav-link:hover{text-decoration:none}.nav .nav-link.active{color:#000;color:var(--clr-nav-link-active-color,#000);font-weight:400;font-weight:var(--clr-nav-link-active-font-weight,400)}.nav .nav-link.nav-item{margin-right:1.2rem}:root{--clr-subnav-bg-color:var(--clr-color-neutral-0);--clr-nav-box-shadow-color:var(--clr-color-neutral-400)}.sub-nav,.subnav{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-shadow:0 -.05rem 0 #ccc inset;box-shadow:0 -.05rem 0 #ccc inset;-webkit-box-shadow:0 -.05rem 0 var(--clr-nav-box-shadow-color,#ccc) inset;box-shadow:0 -.05rem 0 var(--clr-nav-box-shadow-color,#ccc) inset;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff;background-color:var(--clr-subnav-bg-color,#fff);height:1.8rem}.sub-nav .nav,.subnav .nav{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding-left:1.2rem}.sub-nav aside,.subnav aside{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:1.8rem;padding:0 1.2rem}.sub-nav aside>:last-child,.subnav aside>:last-child{margin-right:0;padding-right:0}:root{--clr-sidenav-border-color:var(--clr-color-neutral-400);--clr-sidenav-border-width:var(--clr-global-borderwidth);--clr-sidenav-link-hover-color:var(--clr-color-neutral-200);--clr-sidenav-link-active-color:var(--clr-color-neutral-1000);--clr-sidenav-link-active-bg-color:var(--clr-global-selection-color);--clr-sidenav-link-active-border-radius:var(--clr-global-borderradius);--clr-sidenav-header-color:var(--clr-h6-color);--clr-sidenav-header-font-weight:var(--clr-h6-font-weight);--clr-sidenav-header-font-family:var(--clr-h6-font-family);--clr-sidenav-color:var(--clr-p1-color);--clr-sidenav-font-weight:var(--clr-p1-font-weight)}.sidenav{line-height:1.2rem;max-width:15.6rem;min-width:10.8rem;width:18%;border-right:.05rem solid #ccc;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.sidenav .sidenav-content{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;overflow-x:hidden;padding-bottom:1.2rem}.sidenav .sidenav-content .nav-link{border-radius:0;border-top-left-radius:.15rem;border-top-left-radius:var(--clr-sidenav-link-active-border-radius,.15rem);border-bottom-left-radius:.15rem;border-bottom-left-radius:var(--clr-sidenav-link-active-border-radius,.15rem);display:inline-block;color:inherit;cursor:pointer;text-decoration:none;width:100%}.sidenav .sidenav-content>.nav-link{margin:1.2rem 0 0 1.5rem;padding-left:.6rem;color:#333;color:var(--clr-sidenav-header-color,#333);font-weight:500;font-weight:var(--clr-sidenav-header-font-weight,500);font-family:Metropolis,"Avenir Next","Helvetica Neue",Arial,sans-serif;font-family:var(--clr-sidenav-header-font-family, Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif);font-size:.7rem;line-height:1.2rem;letter-spacing:normal}.sidenav .sidenav-content>.nav-link:hover{background:#e8e8e8;background:var(--clr-sidenav-link-hover-color,#e8e8e8)}.sidenav .sidenav-content>.nav-link.active{background:#d8e3e9;background:var(--clr-sidenav-link-active-bg-color,#d8e3e9);color:#000;color:var(--clr-sidenav-link-active-color,#000)}.sidenav .nav-group{color:#666;color:var(--clr-sidenav-color,#666);font-weight:400;font-weight:var(--clr-sidenav-font-weight,400);font-size:.7rem;letter-spacing:normal;margin-top:1.2rem;width:100%}.sidenav .nav-group .nav-list,.sidenav .nav-group label{padding:0 0 0 1.8rem;cursor:pointer;display:inline-block;width:100%;margin:0 .3rem}.sidenav .nav-group .nav-list{list-style:none;margin-top:0}.sidenav .nav-group .nav-list .nav-link{line-height:.8rem;padding:.2rem 0 .2rem .6rem}.sidenav .nav-group .nav-list .nav-link:hover{background:#e8e8e8;background:var(--clr-sidenav-link-hover-color,#e8e8e8)}.sidenav .nav-group .nav-list .nav-link.active{background:#d8e3e9;background:var(--clr-sidenav-link-active-bg-color,#d8e3e9);color:#000;color:var(--clr-sidenav-link-active-color,#000)}.sidenav .nav-group label{color:#333;color:var(--clr-sidenav-header-color,#333);font-weight:500;font-weight:var(--clr-sidenav-header-font-weight,500);font-family:Metropolis,"Avenir Next","Helvetica Neue",Arial,sans-serif;font-family:var(--clr-sidenav-header-font-family, Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif);font-size:.7rem;line-height:1.2rem;letter-spacing:normal}.sidenav .nav-group input[type=checkbox]{position:absolute;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap;top:0;left:0}.sidenav .nav-group input[type=checkbox]:focus+label{outline:#3b99fc auto .25rem}.sidenav .collapsible label{padding:0 0 0 1.3rem}.sidenav .collapsible label:after{content:"";float:left;height:.5rem;width:.5rem;-webkit-transform:translateX(-.4rem) translateY(.35rem);transform:translateX(-.4rem) translateY(.35rem);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%3E.cls-1%7Bfill%3A%239a9a9a%3B%7D%3C%2Fstyle%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M6%2C9L1.2%2C4.2a0.68%2C0.68%2C0%2C0%2C1%2C1-1L6%2C7.08%2C9.84%2C3.24a0.68%2C0.68%2C0%2C1%2C1%2C1%2C1Z%22%2F%3E%0A%3C%2Fsvg%3E%0A");background-repeat:no-repeat;background-size:contain;vertical-align:middle;margin:0}.sidenav .collapsible input[type=checkbox]:checked~.nav-list,.sidenav .collapsible input[type=checkbox]:checked~ul{height:0;display:none}.sidenav .collapsible input[type=checkbox]~.nav-list,.sidenav .collapsible input[type=checkbox]~ul{height:auto}.sidenav .collapsible input[type=checkbox]:checked~label:after{-webkit-transform:rotate(-90deg) translateX(-.35rem) translateY(-.4rem);transform:rotate(-90deg) translateX(-.35rem) translateY(-.4rem)}:root{--clr-vertical-nav-divider-color:var(--clr-color-neutral-700);--clr-vertical-nav-icon-active-color:var(--clr-color-action-600);--clr-vertical-nav-item-color:var(--clr-color-neutral-700);--clr-vertical-nav-item-active-color:var(--clr-color-neutral-700);--clr-vertical-nav-bg-color:var(--clr-color-neutral-200);--clr-vertical-nav-active-bg-color:var(--clr-color-neutral-0);--clr-vertical-nav-hover-bg-color:var(--clr-color-neutral-400);--clr-vertical-nav-toggle-icon-color:var(--clr-color-neutral-1000);--clr-vertical-nav-trigger-divider-border-width:var(--clr-global-borderwidth);--clr-vertical-nav-trigger-divider-border-color:var(--clr-color-neutral-400);--clr-vertical-nav-header-font-weight:var(--clr-p4-font-weight)}.clr-vertical-nav{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding-top:.9rem;width:12rem;min-width:2.4rem;background-color:#e8e8e8;background-color:var(--clr-vertical-nav-bg-color,#e8e8e8);will-change:width;-webkit-transition:width .2s ease-in-out;transition:width .2s ease-in-out}.clr-vertical-nav .nav-divider{border-color:#ccc;border-color:var(--clr-vertical-nav-trigger-divider-border-color,#ccc);border-style:solid;border-width:.05rem;border-width:var(--clr-vertical-nav-trigger-divider-border-width,.05rem);margin:.6rem 0}.clr-vertical-nav .nav-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;overflow-x:hidden}.clr-vertical-nav .nav-group{display:block;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;height:auto;min-height:1.8rem}.clr-vertical-nav .nav-group-content{display:-webkit-box;display:-ms-flexbox;display:flex;color:#666;color:var(--clr-vertical-nav-item-color,#666)}.clr-vertical-nav .nav-group-content.active{color:#666;color:var(--clr-vertical-nav-item-active-color,#666);background-color:#fff;background-color:var(--clr-vertical-nav-active-bg-color,#fff)}.clr-vertical-nav .nav-group-content.active .nav-icon{fill:#0072a3;fill:var(--clr-vertical-nav-icon-active-color,#0072a3)}.clr-vertical-nav .nav-group-content:hover{color:#666;color:var(--clr-vertical-nav-item-active-color,#666);background-color:#ccc;background-color:var(--clr-vertical-nav-hover-bg-color,#ccc);text-decoration:none}.clr-vertical-nav .nav-group-content .nav-link{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding-left:0;min-width:0}.clr-vertical-nav .nav-group-content .nav-icon{margin-left:1.2rem}.clr-vertical-nav .nav-group-content .nav-text{padding-left:1.2rem}.clr-vertical-nav .nav-group-content .nav-icon+.nav-text{padding-left:0}.clr-vertical-nav .nav-group-content .nav-link+.nav-group-text{display:none}.clr-vertical-nav .nav-group-trigger,.clr-vertical-nav .nav-trigger{-webkit-box-flex:0;-ms-flex:0 0 1.8rem;flex:0 0 1.8rem;border:none;height:1.8rem;padding:0;background-color:transparent;cursor:pointer;outline-offset:-.25rem}.clr-vertical-nav .nav-group-trigger cds-icon[shape=angle-double],.clr-vertical-nav .nav-trigger cds-icon[shape=angle-double]{color:#000;color:var(--clr-vertical-nav-toggle-icon-color,#000)}.clr-vertical-nav .nav-trigger{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;height:1.8rem;margin-top:-.9rem}.clr-vertical-nav .nav-group-trigger{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;color:inherit;overflow:hidden;text-align:left}.clr-vertical-nav .nav-group-trigger .nav-group-trigger-icon{-ms-flex-negative:0;flex-shrink:0;width:.8rem;height:1.8rem;-ms-flex-item-align:center;align-self:center;margin-left:.5rem;margin-right:.5rem;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.clr-vertical-nav .nav-trigger-icon{margin-left:auto;margin-right:.5rem;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.clr-vertical-nav .nav-trigger+.nav-content{border-top-color:#ccc;border-top-color:var(--clr-vertical-nav-trigger-divider-border-color,#ccc);border-top-style:solid;border-top-width:.05rem;border-top-width:var(--clr-vertical-nav-trigger-divider-border-width,.05rem);padding-top:.6rem}.clr-vertical-nav .nav-group-text,.clr-vertical-nav .nav-link{height:1.8rem;padding:0 .6rem 0 1.2rem;line-height:1.8rem;outline-offset:-.25rem}.clr-vertical-nav .nav-group-text,.clr-vertical-nav .nav-text{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clr-vertical-nav .nav-link{display:-webkit-box;display:-ms-flexbox;display:flex;color:#666;color:var(--clr-vertical-nav-item-color,#666)}.clr-vertical-nav .nav-link.active{color:#666;color:var(--clr-vertical-nav-item-active-color,#666);background-color:#fff;background-color:var(--clr-vertical-nav-active-bg-color,#fff)}.clr-vertical-nav .nav-link.active .nav-icon{fill:#0072a3;fill:var(--clr-vertical-nav-icon-active-color,#0072a3)}.clr-vertical-nav .nav-link:hover{color:#666;color:var(--clr-vertical-nav-item-active-color,#666);background-color:#ccc;background-color:var(--clr-vertical-nav-hover-bg-color,#ccc);text-decoration:none}.clr-vertical-nav .nav-header{padding:0 .6rem 0 1.2rem;font-size:.6rem;font-weight:600;font-weight:var(--clr-vertical-nav-header-font-weight,600);letter-spacing:normal;line-height:1.8rem}.clr-vertical-nav .nav-icon{-webkit-box-flex:0;-ms-flex:0 0 .8rem;flex:0 0 .8rem;-ms-flex-item-align:center;align-self:center;height:.8rem;width:.8rem;margin-right:.3rem;vertical-align:middle}.clr-vertical-nav clr-vertical-nav-group-children{display:block}.clr-vertical-nav .nav-btn{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:0;margin:0;background:0 0;border:none;cursor:pointer;outline-offset:-.25rem}.clr-vertical-nav .nav-content>.nav-link,.clr-vertical-nav>.nav-link{-webkit-box-flex:0;-ms-flex:0 0 1.8rem;flex:0 0 1.8rem}.clr-vertical-nav .nav-link+.nav-group-trigger{-webkit-box-flex:0;-ms-flex:0 0 1.8rem;flex:0 0 1.8rem}.clr-vertical-nav .nav-link+.nav-group-trigger .nav-group-text{display:none}.clr-vertical-nav .nav-icon+.nav-group-text{padding-left:0}.clr-vertical-nav.has-nav-groups .nav-group .nav-group-text,.clr-vertical-nav.has-nav-groups .nav-group .nav-group-trigger,.clr-vertical-nav.has-nav-groups .nav-link{font-weight:600}.clr-vertical-nav.has-nav-groups .nav-group-children .nav-link{font-weight:400}.clr-vertical-nav.has-icons .nav-group-children .nav-link{padding-left:2.3rem}.clr-vertical-nav .nav-group.active:not(.is-expanded) .nav-group-content{background-color:#fff;background-color:var(--clr-vertical-nav-active-bg-color,#fff)}.clr-vertical-nav .nav-group.active:not(.is-expanded) .nav-group-content .nav-icon{fill:#0072a3;fill:var(--clr-vertical-nav-icon-active-color,#0072a3)}.clr-vertical-nav .nav-group-content .nav-link.active~.nav-group-trigger{background-color:#fff;background-color:var(--clr-vertical-nav-active-bg-color,#fff)}.clr-vertical-nav .nav-group-content .nav-link:hover~.nav-group-trigger{background-color:#ccc;background-color:var(--clr-vertical-nav-hover-bg-color,#ccc)}.clr-vertical-nav:not(.is-collapsed) .nav-link+.nav-group-trigger{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.main-container:not([class*=open-overflow-menu]):not([class*=open-hamburger-menu]) .clr-vertical-nav.is-collapsed{width:2.4rem;min-width:2.4rem;cursor:pointer}.main-container:not([class*=open-overflow-menu]):not([class*=open-hamburger-menu]) .clr-vertical-nav.is-collapsed .nav-trigger{margin-right:.15rem}.main-container:not([class*=open-overflow-menu]):not([class*=open-hamburger-menu]) .clr-vertical-nav.is-collapsed .nav-icon{margin:0;margin-left:.8rem}.main-container:not([class*=open-overflow-menu]):not([class*=open-hamburger-menu]) .clr-vertical-nav.is-collapsed .nav-group-content .nav-link{-webkit-box-flex:0;-ms-flex:0 0 2.4rem;flex:0 0 2.4rem}.main-container:not([class*=open-overflow-menu]):not([class*=open-hamburger-menu]) .clr-vertical-nav.is-collapsed .nav-group-content .nav-link~.nav-group-trigger{-webkit-box-flex:0;-ms-flex:0 0 .8rem;flex:0 0 .8rem;-webkit-transform:translateX(-.8rem);transform:translateX(-.8rem);pointer-events:none}.main-container:not([class*=open-overflow-menu]):not([class*=open-hamburger-menu]) .clr-vertical-nav.is-collapsed .nav-group-trigger,.main-container:not([class*=open-overflow-menu]):not([class*=open-hamburger-menu]) .clr-vertical-nav.is-collapsed .nav-link{padding:0}.main-container:not([class*=open-overflow-menu]):not([class*=open-hamburger-menu]) .clr-vertical-nav.is-collapsed .nav-group-trigger{padding-left:0}.main-container:not([class*=open-overflow-menu]):not([class*=open-hamburger-menu]) .clr-vertical-nav.is-collapsed .nav-group-trigger .nav-group-trigger-icon{height:1.8rem;width:.5rem;margin-left:.15rem;margin-right:0}.main-container:not([class*=open-overflow-menu]):not([class*=open-hamburger-menu]) .clr-vertical-nav.is-collapsed .nav-group,.main-container:not([class*=open-overflow-menu]):not([class*=open-hamburger-menu]) .clr-vertical-nav.is-collapsed .nav-link{display:none}.main-container:not([class*=open-overflow-menu]):not([class*=open-hamburger-menu]) .clr-vertical-nav.is-collapsed.has-icons .nav-group{display:block}.main-container:not([class*=open-overflow-menu]):not([class*=open-hamburger-menu]) .clr-vertical-nav.is-collapsed.has-icons .nav-link{display:-webkit-box;display:-ms-flexbox;display:flex}.main-container:not([class*=open-overflow-menu]):not([class*=open-hamburger-menu]) .clr-vertical-nav.is-collapsed.has-icons .nav-group-text,.main-container:not([class*=open-overflow-menu]):not([class*=open-hamburger-menu]) .clr-vertical-nav.is-collapsed.has-icons .nav-text{display:none}.clr-vertical-nav.nav-trigger--bottom .nav-trigger{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;margin-top:0}.clr-vertical-nav.nav-trigger--bottom .nav-trigger+.nav-content{border-bottom-color:#ccc;border-bottom-color:var(--clr-vertical-nav-trigger-divider-border-color,#ccc);border-bottom-style:solid;border-bottom-width:.05rem;border-bottom-width:var(--clr-vertical-nav-trigger-divider-border-width,.05rem);border-top:none;padding-top:0}:root{--clr-sliding-panel-text-color:var(--clr-color-neutral-700);--clr-nav-background-color:var(--clr-color-neutral-200);--clr-responsive-nav-hover-bg:var(--clr-color-neutral-0);--clr-responsive-nav-trigger-bg-color:var(--clr-color-neutral-0);--clr-responsive-nav-trigger-border-radius:var(--clr-global-borderradius);--clr-responsive-nav-hamburger-border-radius:var(--clr-responsive-nav-trigger-border-radius);--clr-responsive-nav-overflow-border-radius:0.2rem;--clr-responsive-nav-header-backdrop-bg-color:var(--clr-color-neutral-1000);--clr-responsive-nav-header-backdrop-opacity:0.85}.header-hamburger-trigger,.header-overflow-trigger{display:none}.header-hamburger-trigger>span,.header-hamburger-trigger>span::after,.header-hamburger-trigger>span::before{display:inline-block;height:.1rem;width:1.2rem;background:#fff;background:var(--clr-responsive-nav-trigger-bg-color,#fff);border-radius:.15rem;border-radius:var(--clr-responsive-nav-hamburger-border-radius,.15rem)}.header-hamburger-trigger>span{position:relative;vertical-align:middle}.header-hamburger-trigger>span::after,.header-hamburger-trigger>span::before{content:"";position:absolute;left:0}.header-hamburger-trigger>span::before{top:-.35rem}.header-hamburger-trigger>span::after{bottom:-.35rem}.header-hamburger-trigger.active>span{background:0 0}.header-hamburger-trigger.active>span::after,.header-hamburger-trigger.active>span::before{left:.15rem;-webkit-transform-origin:9%;transform-origin:9%;-webkit-transition:-webkit-transform .6s ease;transition:-webkit-transform .6s ease;transition:transform .6s ease;transition:transform .6s ease,-webkit-transform .6s ease}.header-hamburger-trigger.active>span::before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.header-hamburger-trigger.active>span::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.header-overflow-trigger>span,.header-overflow-trigger>span::after,.header-overflow-trigger>span::before{display:inline-block;height:.2rem;width:.2rem;background:#fff;background:var(--clr-responsive-nav-trigger-bg-color,#fff);border-radius:.2rem;border-radius:var(--clr-responsive-nav-overflow-border-radius,.2rem)}.header-overflow-trigger>span{position:relative;vertical-align:middle}.header-overflow-trigger>span::after,.header-overflow-trigger>span::before{content:"";position:absolute;left:0}.header-overflow-trigger>span::before{top:-.4rem}.header-overflow-trigger>span::after{bottom:-.4rem}.header-overflow-trigger.active>span{background:0 0}.header-overflow-trigger.active>span::after,.header-overflow-trigger.active>span::before{height:.1rem;width:1.2rem;left:-.3rem;-webkit-transform-origin:-3%;transform-origin:-3%;-webkit-transition:-webkit-transform .6s ease;transition:-webkit-transform .6s ease;transition:transform .6s ease;transition:transform .6s ease,-webkit-transform .6s ease}.header-overflow-trigger.active>span::before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.header-overflow-trigger.active>span::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}@media screen and (max-width:768px){.main-container .header-hamburger-trigger,.main-container .header-overflow-trigger{display:inline-block;border:none;background:0 0;cursor:pointer;font-size:1.2rem;height:3rem;width:3rem;padding:0 0 .2rem 0;text-align:center;white-space:nowrap;color:#fafafa;color:var(--clr-header-font-color,#fafafa);opacity:.65;opacity:var(--clr-header-nav-opacity,.65)}.main-container .header-hamburger-trigger:focus,.main-container .header-overflow-trigger:focus{outline-offset:-.25rem}.main-container .header-hamburger-trigger:enabled:hover,.main-container .header-overflow-trigger:enabled:hover{opacity:1;opacity:var(--clr-header-nav-hover-opacity,1)}.main-container .header-hamburger-trigger:disabled,.main-container .header-overflow-trigger:disabled{cursor:not-allowed}.main-container .clr-vertical-nav.clr-nav-level-1,.main-container .header-nav.clr-nav-level-1,.main-container .sidenav.clr-nav-level-1,.main-container .sub-nav.clr-nav-level-1,.main-container .subnav.clr-nav-level-1{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:fixed;top:0;right:auto;bottom:0;left:0;background:#e8e8e8;background:var(--clr-nav-background-color,#e8e8e8);z-index:1039;height:100vh;-webkit-transform:translateX(-18rem);transform:translateX(-18rem);-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.main-container .clr-vertical-nav.clr-nav-level-2,.main-container .header-nav.clr-nav-level-2,.main-container .sidenav.clr-nav-level-2,.main-container .sub-nav.clr-nav-level-2,.main-container .subnav.clr-nav-level-2{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:fixed;top:0;right:0;bottom:0;left:auto;background:#e8e8e8;background:var(--clr-nav-background-color,#e8e8e8);z-index:1039;height:100vh;-webkit-transform:translateX(18rem);transform:translateX(18rem);-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.main-container .sub-nav.clr-nav-level-1 .nav,.main-container .sub-nav.clr-nav-level-1 aside,.main-container .sub-nav.clr-nav-level-2 .nav,.main-container .sub-nav.clr-nav-level-2 aside,.main-container .subnav.clr-nav-level-1 .nav,.main-container .subnav.clr-nav-level-1 aside,.main-container .subnav.clr-nav-level-2 .nav,.main-container .subnav.clr-nav-level-2 aside{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.main-container .sub-nav.clr-nav-level-1 aside,.main-container .sub-nav.clr-nav-level-2 aside,.main-container .subnav.clr-nav-level-1 aside,.main-container .subnav.clr-nav-level-2 aside{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%}.main-container .sub-nav.clr-nav-level-1 .nav,.main-container .sub-nav.clr-nav-level-2 .nav,.main-container .subnav.clr-nav-level-1 .nav,.main-container .subnav.clr-nav-level-2 .nav{padding-left:0}.main-container .sub-nav.clr-nav-level-1 .nav .nav-item,.main-container .sub-nav.clr-nav-level-2 .nav .nav-item,.main-container .subnav.clr-nav-level-1 .nav .nav-item,.main-container .subnav.clr-nav-level-2 .nav .nav-item{height:1.8rem;margin-right:0}.main-container .sub-nav.clr-nav-level-1 .nav .nav-link,.main-container .sub-nav.clr-nav-level-2 .nav .nav-link,.main-container .subnav.clr-nav-level-1 .nav .nav-link,.main-container .subnav.clr-nav-level-2 .nav .nav-link{padding:0 .6rem 0 1.2rem;width:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis;border-radius:0;border-top-left-radius:.15rem;border-top-left-radius:var(--clr-global-borderradius,.15rem);border-bottom-left-radius:.15rem;border-bottom-left-radius:var(--clr-global-borderradius,.15rem);color:#666;color:var(--clr-vertical-nav-item-color,#666)}.main-container .sub-nav.clr-nav-level-1 .nav .nav-link.active,.main-container .sub-nav.clr-nav-level-2 .nav .nav-link.active,.main-container .subnav.clr-nav-level-1 .nav .nav-link.active,.main-container .subnav.clr-nav-level-2 .nav .nav-link.active{color:#666;color:var(--clr-vertical-nav-item-active-color,#666);background-color:#fff;background-color:var(--clr-vertical-nav-active-bg-color,#fff)}.main-container .sub-nav.clr-nav-level-1 .nav .nav-link.active .nav-icon,.main-container .sub-nav.clr-nav-level-2 .nav .nav-link.active .nav-icon,.main-container .subnav.clr-nav-level-1 .nav .nav-link.active .nav-icon,.main-container .subnav.clr-nav-level-2 .nav .nav-link.active .nav-icon{fill:#0072a3;fill:var(--clr-vertical-nav-icon-active-color,#0072a3)}.main-container .sub-nav.clr-nav-level-1 .nav .nav-link:hover,.main-container .sub-nav.clr-nav-level-2 .nav .nav-link:hover,.main-container .subnav.clr-nav-level-1 .nav .nav-link:hover,.main-container .subnav.clr-nav-level-2 .nav .nav-link:hover{color:#666;color:var(--clr-vertical-nav-item-active-color,#666);background-color:#ccc;background-color:var(--clr-vertical-nav-hover-bg-color,#ccc);text-decoration:none}.main-container .sub-nav.clr-nav-level-1 .nav .nav-link.active,.main-container .sub-nav.clr-nav-level-1 .nav .nav-link:hover,.main-container .sub-nav.clr-nav-level-2 .nav .nav-link.active,.main-container .sub-nav.clr-nav-level-2 .nav .nav-link:hover,.main-container .subnav.clr-nav-level-1 .nav .nav-link.active,.main-container .subnav.clr-nav-level-1 .nav .nav-link:hover,.main-container .subnav.clr-nav-level-2 .nav .nav-link.active,.main-container .subnav.clr-nav-level-2 .nav .nav-link:hover{-webkit-box-shadow:none;box-shadow:none}.main-container .sidenav.clr-nav-level-1 .nav-link.active,.main-container .sidenav.clr-nav-level-1 .nav-link:hover,.main-container .sidenav.clr-nav-level-2 .nav-link.active,.main-container .sidenav.clr-nav-level-2 .nav-link:hover{color:inherit;background:#fff;background:var(--clr-responsive-nav-hover-bg,#fff)}.main-container .clr-vertical-nav.clr-nav-level-1,.main-container .clr-vertical-nav.clr-nav-level-2,.main-container .sidenav.clr-nav-level-1,.main-container .sidenav.clr-nav-level-2{border-right:none}.main-container .header-overflow-trigger{position:relative}.main-container .header-overflow-trigger::after{position:absolute;content:"";display:inline-block;position:absolute;content:"";background:#fafafa;background:var(--clr-header-font-color,#fafafa);opacity:.15;opacity:var(--clr-header-divider-opacity,.15);opacity:.15;height:2rem;width:.05rem;width:var(--clr-global-borderwidth,.05rem);top:.5rem;left:0;left:0}.main-container .header .branding{max-width:12rem;min-width:0;overflow:hidden}.main-container .header .header-hamburger-trigger+.branding{padding-left:0}.main-container .header .header-hamburger-trigger+.branding .clr-icon,.main-container .header .header-hamburger-trigger+.branding .logo,.main-container .header .header-hamburger-trigger+.branding cds-icon{display:none}.main-container .header .branding+.header-overflow-trigger,.main-container .header .header-nav+.header-overflow-trigger{margin-left:auto}.main-container.open-hamburger-menu .header .header-backdrop,.main-container.open-overflow-menu .header .header-backdrop{position:fixed;top:0;bottom:0;left:0;right:0;background:#000;background:var(--clr-responsive-nav-header-backdrop-bg-color,#000);opacity:.85;opacity:var(--clr-responsive-nav-header-backdrop-opacity,.85);cursor:pointer;z-index:1038}.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 .nav-link,.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-2 .nav-link,.main-container.open-overflow-menu .header .header-nav.clr-nav-level-1 .nav-link,.main-container.open-overflow-menu .header .header-nav.clr-nav-level-2 .nav-link{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;opacity:1;color:#666;color:var(--clr-vertical-nav-item-color,#666)}.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 .nav-link .fa,.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 .nav-link .nav-icon,.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-2 .nav-link .fa,.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-2 .nav-link .nav-icon,.main-container.open-overflow-menu .header .header-nav.clr-nav-level-1 .nav-link .fa,.main-container.open-overflow-menu .header .header-nav.clr-nav-level-1 .nav-link .nav-icon,.main-container.open-overflow-menu .header .header-nav.clr-nav-level-2 .nav-link .fa,.main-container.open-overflow-menu .header .header-nav.clr-nav-level-2 .nav-link .nav-icon{display:none}.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 .nav-link .nav-text,.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-2 .nav-link .nav-text,.main-container.open-overflow-menu .header .header-nav.clr-nav-level-1 .nav-link .nav-text,.main-container.open-overflow-menu .header .header-nav.clr-nav-level-2 .nav-link .nav-text{display:inline-block;color:#666;color:var(--clr-sliding-panel-text-color,#666);line-height:1.2rem;padding:.3rem 0 .3rem 1.2rem;white-space:normal;font-weight:400}.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 .nav-link .nav-icon+.nav-text,.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-2 .nav-link .nav-icon+.nav-text,.main-container.open-overflow-menu .header .header-nav.clr-nav-level-1 .nav-link .nav-icon+.nav-text,.main-container.open-overflow-menu .header .header-nav.clr-nav-level-2 .nav-link .nav-icon+.nav-text{display:inline-block}.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 .nav-link.active,.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-2 .nav-link.active,.main-container.open-overflow-menu .header .header-nav.clr-nav-level-1 .nav-link.active,.main-container.open-overflow-menu .header .header-nav.clr-nav-level-2 .nav-link.active{color:#666;color:var(--clr-vertical-nav-item-active-color,#666);background-color:#fff;background-color:var(--clr-vertical-nav-active-bg-color,#fff)}.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 .nav-link.active .nav-icon,.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-2 .nav-link.active .nav-icon,.main-container.open-overflow-menu .header .header-nav.clr-nav-level-1 .nav-link.active .nav-icon,.main-container.open-overflow-menu .header .header-nav.clr-nav-level-2 .nav-link.active .nav-icon{fill:#0072a3;fill:var(--clr-vertical-nav-icon-active-color,#0072a3)}.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 .nav-link:hover,.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-2 .nav-link:hover,.main-container.open-overflow-menu .header .header-nav.clr-nav-level-1 .nav-link:hover,.main-container.open-overflow-menu .header .header-nav.clr-nav-level-2 .nav-link:hover{color:#666;color:var(--clr-vertical-nav-item-active-color,#666);background-color:#ccc;background-color:var(--clr-vertical-nav-hover-bg-color,#ccc);text-decoration:none}.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-1 .nav-link.active>.nav-text,.main-container.open-hamburger-menu .header .header-nav.clr-nav-level-2 .nav-link.active>.nav-text,.main-container.open-overflow-menu .header .header-nav.clr-nav-level-1 .nav-link.active>.nav-text,.main-container.open-overflow-menu .header .header-nav.clr-nav-level-2 .nav-link.active>.nav-text{color:inherit}.main-container.open-hamburger-menu .clr-vertical-nav .nav-trigger,.main-container.open-overflow-menu .clr-vertical-nav .nav-trigger{display:none}.main-container.open-hamburger-menu .header .branding{position:fixed;top:0;left:0;overflow:hidden;width:18rem;max-width:18rem;z-index:1040;padding-left:1.2rem}.main-container.open-hamburger-menu .header .branding>.nav-link{overflow:hidden}.main-container.open-hamburger-menu .header .branding .clr-icon,.main-container.open-hamburger-menu .header .branding .logo,.main-container.open-hamburger-menu .header .branding cds-icon{display:inline-block}.main-container.open-hamburger-menu .header .branding .clr-vmw-logo,.main-container.open-hamburger-menu .header .branding cds-icon[shape=vm-bug]{background-color:#8c8c8c;border-radius:.15rem}.main-container.open-hamburger-menu .header .branding .title{color:#666;color:var(--clr-sliding-panel-text-color,#666);text-overflow:ellipsis;overflow:hidden}.main-container.open-hamburger-menu .header-hamburger-trigger{position:fixed;top:0;right:auto;left:0;z-index:1039;-webkit-transform:translateX(18.6rem);transform:translateX(18.6rem);-webkit-transition:-webkit-transform .6s ease;transition:-webkit-transform .6s ease;transition:transform .6s ease;transition:transform .6s ease,-webkit-transform .6s ease}.main-container.open-hamburger-menu .header-hamburger-trigger::after{content:none}.main-container.open-hamburger-menu .header-hamburger-trigger>span{background:0 0}.main-container.open-hamburger-menu .header-hamburger-trigger>span::after,.main-container.open-hamburger-menu .header-hamburger-trigger>span::before{left:.15rem;-webkit-transform-origin:9%;transform-origin:9%;-webkit-transition:-webkit-transform .6s ease;transition:-webkit-transform .6s ease;transition:transform .6s ease;transition:transform .6s ease,-webkit-transform .6s ease}.main-container.open-hamburger-menu .header-hamburger-trigger>span::before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.main-container.open-hamburger-menu .header-hamburger-trigger>span::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.main-container.open-hamburger-menu .clr-vertical-nav.clr-nav-level-1,.main-container.open-hamburger-menu .header-nav.clr-nav-level-1,.main-container.open-hamburger-menu .sidenav.clr-nav-level-1,.main-container.open-hamburger-menu .sub-nav.clr-nav-level-1,.main-container.open-hamburger-menu .subnav.clr-nav-level-1{padding-top:4.2rem;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.main-container.open-hamburger-menu .clr-vertical-nav.clr-nav-level-1 .sidenav-content,.main-container.open-hamburger-menu .header-nav.clr-nav-level-1 .sidenav-content,.main-container.open-hamburger-menu .sidenav.clr-nav-level-1 .sidenav-content,.main-container.open-hamburger-menu .sub-nav.clr-nav-level-1 .sidenav-content,.main-container.open-hamburger-menu .subnav.clr-nav-level-1 .sidenav-content{padding-bottom:1.2rem}.main-container.open-overflow-menu .clr-vertical-nav.clr-nav-level-2,.main-container.open-overflow-menu .header-nav.clr-nav-level-2,.main-container.open-overflow-menu .sidenav.clr-nav-level-2,.main-container.open-overflow-menu .sub-nav.clr-nav-level-2,.main-container.open-overflow-menu .subnav.clr-nav-level-2{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.main-container.open-overflow-menu .header-nav.clr-nav-level-2,.main-container.open-overflow-menu .sub-nav.clr-nav-level-2,.main-container.open-overflow-menu .subnav.clr-nav-level-2{padding-top:1.2rem}.main-container.open-overflow-menu .header-overflow-trigger{position:fixed;top:0;right:0;left:auto;z-index:1039;-webkit-transform:translateX(-18.6rem);transform:translateX(-18.6rem);-webkit-transition:-webkit-transform .6s ease;transition:-webkit-transform .6s ease;transition:transform .6s ease;transition:transform .6s ease,-webkit-transform .6s ease}.main-container.open-overflow-menu .header-overflow-trigger::after{content:none}.main-container.open-overflow-menu .header-overflow-trigger>span{background:0 0}.main-container.open-overflow-menu .header-overflow-trigger>span::after,.main-container.open-overflow-menu .header-overflow-trigger>span::before{height:.1rem;width:1.2rem;left:-.3rem;-webkit-transform-origin:-3%;transform-origin:-3%;-webkit-transition:-webkit-transform .6s ease;transition:-webkit-transform .6s ease;transition:transform .6s ease;transition:transform .6s ease,-webkit-transform .6s ease}.main-container.open-overflow-menu .header-overflow-trigger>span::before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.main-container.open-overflow-menu .header-overflow-trigger>span::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.main-container.open-hamburger-menu .clr-vertical-nav.clr-nav-level-1,.main-container.open-hamburger-menu .header-nav.clr-nav-level-1,.main-container.open-hamburger-menu .sidenav.clr-nav-level-1,.main-container.open-hamburger-menu .sub-nav.clr-nav-level-1,.main-container.open-hamburger-menu .subnav.clr-nav-level-1{width:18rem;max-width:18rem}.main-container.open-overflow-menu .clr-vertical-nav.clr-nav-level-2,.main-container.open-overflow-menu .header-nav.clr-nav-level-2,.main-container.open-overflow-menu .sidenav.clr-nav-level-2,.main-container.open-overflow-menu .sub-nav.clr-nav-level-2,.main-container.open-overflow-menu .subnav.clr-nav-level-2{width:18rem;max-width:18rem}}@media screen and (max-width:576px){.main-container .header .branding{max-width:7.2rem;min-width:0;overflow:hidden}.main-container .clr-vertical-nav.clr-nav-level-1,.main-container .header-nav.clr-nav-level-1,.main-container .sidenav.clr-nav-level-1,.main-container .sub-nav.clr-nav-level-1,.main-container .subnav.clr-nav-level-1{-webkit-transform:translateX(-14.4rem);transform:translateX(-14.4rem)}.main-container .clr-vertical-nav.clr-nav-level-2,.main-container .header-nav.clr-nav-level-2,.main-container .sidenav.clr-nav-level-2,.main-container .sub-nav.clr-nav-level-2,.main-container .subnav.clr-nav-level-2{-webkit-transform:translateX(14.4rem);transform:translateX(14.4rem)}.main-container.open-hamburger-menu .header .branding{width:14.4rem;max-width:14.4rem}.main-container.open-hamburger-menu .clr-vertical-nav.clr-nav-level-1,.main-container.open-hamburger-menu .header-nav.clr-nav-level-1,.main-container.open-hamburger-menu .sidenav.clr-nav-level-1,.main-container.open-hamburger-menu .sub-nav.clr-nav-level-1,.main-container.open-hamburger-menu .subnav.clr-nav-level-1{width:14.4rem;max-width:14.4rem}.main-container.open-hamburger-menu .header-hamburger-trigger{position:fixed;top:0;right:auto;left:0;z-index:1039;-webkit-transform:translateX(15rem);transform:translateX(15rem);-webkit-transition:-webkit-transform .6s ease;transition:-webkit-transform .6s ease;transition:transform .6s ease;transition:transform .6s ease,-webkit-transform .6s ease}.main-container.open-hamburger-menu .header-hamburger-trigger::after{content:none}.main-container.open-overflow-menu .clr-vertical-nav.clr-nav-level-2,.main-container.open-overflow-menu .header-nav.clr-nav-level-2,.main-container.open-overflow-menu .sidenav.clr-nav-level-2,.main-container.open-overflow-menu .sub-nav.clr-nav-level-2,.main-container.open-overflow-menu .subnav.clr-nav-level-2{width:14.4rem;max-width:14.4rem}.main-container.open-overflow-menu .header-overflow-trigger{position:fixed;top:0;right:0;left:auto;z-index:1039;-webkit-transform:translateX(-15rem);transform:translateX(-15rem);-webkit-transition:-webkit-transform .6s ease;transition:-webkit-transform .6s ease;transition:transform .6s ease;transition:transform .6s ease,-webkit-transform .6s ease}.main-container.open-overflow-menu .header-overflow-trigger::after{content:none}}:root{--clr-progress-default-color:var(--clr-color-action-600);--clr-progress-alt-color-1:var(--clr-color-success-400);--clr-progress-alt-color-2:var(--clr-color-danger-800);--clr-progress-alt-color-3:var(--clr-progress-alt-color-2);--clr-progress-bg-color:var(--clr-color-neutral-200)}.progress,.progress-static{background-color:transparent;border-radius:0;font-size:inherit;height:2em;margin:0;max-height:.7rem;min-height:.2rem;overflow:hidden;display:block;width:100%}.progress>progress{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;color:#0072a3;color:var(--clr-progress-default-color,#0072a3);display:block;background-color:#e8e8e8;background-color:var(--clr-progress-bg-color,#e8e8e8);border:none;height:100%;width:100%}.progress>progress::-webkit-progress-value{background-color:#0072a3;background-color:var(--clr-progress-default-color,#0072a3)}.progress>progress::-moz-progress-bar{background-color:#0072a3;background-color:var(--clr-progress-default-color,#0072a3)}.progress>progress[value="0"]::-moz-progress-bar{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;color:#e8e8e8;color:var(--clr-progress-bg-color,#e8e8e8);min-width:2.4rem;background-color:transparent;background-image:none}.progress>progress[value="0"]::-webkit-progress-value{-webkit-transition:none;transition:none}.progress>progress::-webkit-progress-bar{border-radius:0;background-color:#e8e8e8;background-color:var(--clr-progress-bg-color,#e8e8e8)}.progress>progress::-webkit-progress-inner-element{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none}.progress>progress::-webkit-progress-value{-webkit-transition:width .23s ease-in;transition:width .23s ease-in;border-radius:0}.progress.success>progress{color:#5eb715;color:var(--clr-progress-alt-color-1,#5eb715)}.progress.success>progress::-webkit-progress-value{background-color:#5eb715;background-color:var(--clr-progress-alt-color-1,#5eb715)}.progress.success>progress::-moz-progress-bar{background-color:#5eb715;background-color:var(--clr-progress-alt-color-1,#5eb715)}.progress.warning>progress{color:#c21d00;color:var(--clr-progress-alt-color-3,#c21d00)}.progress.warning>progress::-webkit-progress-value{background-color:#c21d00;background-color:var(--clr-progress-alt-color-3,#c21d00)}.progress.warning>progress::-moz-progress-bar{background-color:#c21d00;background-color:var(--clr-progress-alt-color-3,#c21d00)}.progress.danger>progress{color:#c21d00;color:var(--clr-progress-alt-color-2,#c21d00)}.progress.danger>progress::-webkit-progress-value{background-color:#c21d00;background-color:var(--clr-progress-alt-color-2,#c21d00)}.progress.danger>progress::-moz-progress-bar{background-color:#c21d00;background-color:var(--clr-progress-alt-color-2,#c21d00)}.progress-static.labeled,.progress.labeled{position:relative;padding-right:3em}.progress-static.labeled>span,.progress.labeled>span{display:block;font-size:1em;position:absolute;top:50%;right:0;line-height:1em;margin-top:-.375em}@-webkit-keyframes clr-progress-fade{from{opacity:1}to{opacity:0}}@keyframes clr-progress-fade{from{opacity:1}to{opacity:0}}.progress.progress-fade>progress[value="100"],.progress.progress-fade>progress[value="100"]+span{-webkit-animation:clr-progress-fade .3s linear .5s forwards;animation:clr-progress-fade .3s linear .5s forwards}.progress.flash-danger>progress,.progress.flash>progress{-webkit-transition:color .1s ease-out 1s;transition:color .1s ease-out 1s}.progress.flash-danger>progress::-webkit-progress-value,.progress.flash>progress::-webkit-progress-value{-webkit-transition:width .23s ease-in,background-color .1s ease-out .3s;transition:width .23s ease-in,background-color .1s ease-out .3s}.progress.flash-danger>progress[value="0"]::-webkit-progress-value,.progress.flash>progress[value="0"]::-webkit-progress-value{-webkit-transition:none;transition:none}.progress.flash-danger>progress::-moz-progress-bar,.progress.flash>progress::-moz-progress-bar{-moz-transition:width .23s ease-in,background-color .1s ease-out .3s;transition:width .23s ease-in,background-color .1s ease-out .3s}.progress.flash>progress[value="100"]{color:#5eb715;color:var(--clr-progress-alt-color-1,#5eb715)}.progress.flash>progress[value="100"]::-webkit-progress-value{background-color:#5eb715;background-color:var(--clr-progress-alt-color-1,#5eb715)}.progress.flash>progress[value="100"]::-moz-progress-bar{background-color:#5eb715;background-color:var(--clr-progress-alt-color-1,#5eb715)}.progress.progress-fade.flash>progress[value="100"],.progress.progress-fade.flash>progress[value="100"]+span{-webkit-animation:clr-progress-fade .6s linear 1s forwards;animation:clr-progress-fade .6s linear 1s forwards}.progress.flash-danger>progress[value="100"]{color:#c21d00;color:var(--clr-progress-alt-color-2,#c21d00)}.progress.flash-danger>progress[value="100"]::-webkit-progress-value{background-color:#c21d00;background-color:var(--clr-progress-alt-color-2,#c21d00)}.progress.flash-danger>progress[value="100"]::-moz-progress-bar{background-color:#c21d00;background-color:var(--clr-progress-alt-color-2,#c21d00)}@-webkit-keyframes clr-progress-looper{from{left:-100%}to{left:100%}}@keyframes clr-progress-looper{from{left:-100%}to{left:100%}}.progress.loop{position:relative}.progress.loop>progress{overflow:hidden;color:transparent;color:var(--clr-color-action-600,transparent)}.progress.loop>progress::-webkit-progress-value{background-color:transparent;background-color:var(--clr-color-action-600,transparent)}.progress.loop>progress::-moz-progress-bar{background-color:transparent;background-color:var(--clr-color-action-600,transparent)}.progress.loop>progress::-moz-progress-bar{background-color:transparent}.progress.loop::after{-webkit-animation:clr-progress-looper 2s ease-in-out infinite;animation:clr-progress-looper 2s ease-in-out infinite;content:" ";top:0;bottom:0;left:0;position:absolute;display:block;background-color:#0072a3;background-color:var(--clr-progress-default-color,#0072a3);width:75%}.progress.loop.danger::after,.progress.loop.warning::after{background-color:#c21d00;background-color:var(--clr-progress-alt-color-2,#c21d00)}.progress.loop.success::after{background-color:#5eb715;background-color:var(--clr-progress-alt-color-1,#5eb715)}.nav-item .progress::after{top:0}.progress-static{position:relative;border:none;width:100%}.progress-static>.progress-meter{background-color:#e8e8e8;background-color:var(--clr-progress-bg-color,#e8e8e8);display:block;position:absolute;top:0;left:0;bottom:0;right:0}.progress-static>.progress-meter::before{background-color:#0072a3;background-color:var(--clr-progress-default-color,#0072a3);top:0;bottom:0;left:0;position:absolute;display:block;width:0%;content:" "}.progress-static>.progress-meter[data-value="1"]::before,.progress-static>.progress-meter[data-value="2"]::before,.progress-static>.progress-meter[data-value="3"]::before{width:2%}.progress-static>.progress-meter[data-value="4"]::before,.progress-static>.progress-meter[data-value="5"]::before,.progress-static>.progress-meter[data-value="6"]::before,.progress-static>.progress-meter[data-value="7"]::before{width:5%}.progress-static>.progress-meter[data-value="10"]::before,.progress-static>.progress-meter[data-value="11"]::before,.progress-static>.progress-meter[data-value="12"]::before,.progress-static>.progress-meter[data-value="8"]::before,.progress-static>.progress-meter[data-value="9"]::before{width:10%}.progress-static>.progress-meter[data-value="13"]::before,.progress-static>.progress-meter[data-value="14"]::before,.progress-static>.progress-meter[data-value="15"]::before,.progress-static>.progress-meter[data-value="16"]::before,.progress-static>.progress-meter[data-value="17"]::before{width:15%}.progress-static>.progress-meter[data-value="18"]::before,.progress-static>.progress-meter[data-value="19"]::before,.progress-static>.progress-meter[data-value="20"]::before,.progress-static>.progress-meter[data-value="21"]::before,.progress-static>.progress-meter[data-value="22"]::before{width:20%}.progress-static>.progress-meter[data-value="23"]::before,.progress-static>.progress-meter[data-value="24"]::before,.progress-static>.progress-meter[data-value="25"]::before,.progress-static>.progress-meter[data-value="26"]::before,.progress-static>.progress-meter[data-value="27"]::before{width:25%}.progress-static>.progress-meter[data-value="28"]::before,.progress-static>.progress-meter[data-value="29"]::before,.progress-static>.progress-meter[data-value="30"]::before,.progress-static>.progress-meter[data-value="31"]::before,.progress-static>.progress-meter[data-value="32"]::before{width:30%}.progress-static>.progress-meter[data-value="33"]::before,.progress-static>.progress-meter[data-value="34"]::before,.progress-static>.progress-meter[data-value="35"]::before,.progress-static>.progress-meter[data-value="36"]::before,.progress-static>.progress-meter[data-value="37"]::before{width:35%}.progress-static>.progress-meter[data-value="38"]::before,.progress-static>.progress-meter[data-value="39"]::before,.progress-static>.progress-meter[data-value="40"]::before,.progress-static>.progress-meter[data-value="41"]::before,.progress-static>.progress-meter[data-value="42"]::before{width:40%}.progress-static>.progress-meter[data-value="43"]::before,.progress-static>.progress-meter[data-value="44"]::before,.progress-static>.progress-meter[data-value="45"]::before,.progress-static>.progress-meter[data-value="46"]::before,.progress-static>.progress-meter[data-value="47"]::before{width:45%}.progress-static>.progress-meter[data-value="48"]::before,.progress-static>.progress-meter[data-value="49"]::before,.progress-static>.progress-meter[data-value="50"]::before,.progress-static>.progress-meter[data-value="51"]::before,.progress-static>.progress-meter[data-value="52"]::before{width:50%}.progress-static>.progress-meter[data-value="53"]::before,.progress-static>.progress-meter[data-value="54"]::before,.progress-static>.progress-meter[data-value="55"]::before,.progress-static>.progress-meter[data-value="56"]::before,.progress-static>.progress-meter[data-value="57"]::before{width:55%}.progress-static>.progress-meter[data-value="58"]::before,.progress-static>.progress-meter[data-value="59"]::before,.progress-static>.progress-meter[data-value="60"]::before,.progress-static>.progress-meter[data-value="61"]::before,.progress-static>.progress-meter[data-value="62"]::before{width:60%}.progress-static>.progress-meter[data-value="63"]::before,.progress-static>.progress-meter[data-value="64"]::before,.progress-static>.progress-meter[data-value="65"]::before,.progress-static>.progress-meter[data-value="66"]::before,.progress-static>.progress-meter[data-value="67"]::before{width:65%}.progress-static>.progress-meter[data-value="68"]::before,.progress-static>.progress-meter[data-value="69"]::before,.progress-static>.progress-meter[data-value="70"]::before,.progress-static>.progress-meter[data-value="71"]::before,.progress-static>.progress-meter[data-value="72"]::before{width:70%}.progress-static>.progress-meter[data-value="73"]::before,.progress-static>.progress-meter[data-value="74"]::before,.progress-static>.progress-meter[data-value="75"]::before,.progress-static>.progress-meter[data-value="76"]::before,.progress-static>.progress-meter[data-value="77"]::before{width:75%}.progress-static>.progress-meter[data-value="78"]::before,.progress-static>.progress-meter[data-value="79"]::before,.progress-static>.progress-meter[data-value="80"]::before,.progress-static>.progress-meter[data-value="81"]::before,.progress-static>.progress-meter[data-value="82"]::before{width:80%}.progress-static>.progress-meter[data-value="83"]::before,.progress-static>.progress-meter[data-value="84"]::before,.progress-static>.progress-meter[data-value="85"]::before,.progress-static>.progress-meter[data-value="86"]::before,.progress-static>.progress-meter[data-value="87"]::before{width:85%}.progress-static>.progress-meter[data-value="88"]::before,.progress-static>.progress-meter[data-value="89"]::before,.progress-static>.progress-meter[data-value="90"]::before,.progress-static>.progress-meter[data-value="91"]::before,.progress-static>.progress-meter[data-value="92"]::before{width:90%}.progress-static>.progress-meter[data-value="93"]::before,.progress-static>.progress-meter[data-value="94"]::before,.progress-static>.progress-meter[data-value="95"]::before,.progress-static>.progress-meter[data-value="96"]::before{width:95%}.progress-static>.progress-meter[data-value="97"]::before,.progress-static>.progress-meter[data-value="98"]::before,.progress-static>.progress-meter[data-value="99"]::before{width:98%}.progress-static>.progress-meter[data-value="100"]::before{width:100%}.progress-static.labeled>.progress-meter{right:3em}.progress-static.success>.progress-meter::before{background-color:#5eb715;background-color:var(--clr-progress-alt-color-1,#5eb715)}.progress-static.warning>.progress-meter::before{background-color:#c21d00;background-color:var(--clr-progress-alt-color-3,#c21d00)}.progress-static.danger>.progress-meter::before{background-color:#c21d00;background-color:var(--clr-progress-alt-color-2,#c21d00)}.card-block .progress,.card-block .progress-static,.card-footer .progress,.card-footer .progress-static{margin:0;margin-top:-.6rem;height:.1875rem;position:absolute;left:0}.card-block .progress-static>.progress-meter,.card-block .progress>progress,.card-footer .progress-static>.progress-meter,.card-footer .progress>progress{height:.1875rem;position:absolute}.card-block .progress-static.top,.card-block .progress.top,.card-footer .progress-static.top,.card-footer .progress.top{margin-top:0;top:0}.nav-item .progress,.nav-item .progress-static{margin:0;height:.24rem;min-height:.24rem;max-height:.24rem;left:0}.nav-item .progress-static>.progress-meter,.nav-item .progress>progress{height:.24rem;min-height:.24rem;max-height:.24rem;position:absolute}.progress-block{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.progress-block>*{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.6rem}.progress-block>:first-child{padding-right:.9rem}.progress-block>:last-child{padding-right:0}.progress-block>label{font-weight:600}.progress-block>.progress,.progress-block>.progress-static{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto}.progress-block>.progress-group{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:auto;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.progress-block>.progress-group .clr-row{margin-left:0;margin-right:0}.progress-block>.progress-group .clr-row>[class*=clr-col-]{padding-left:0;padding-right:0}.card-block .progress-block{margin-bottom:.6rem;padding:0}.card-block .progress-block:last-child{margin-bottom:0}.card-block .progress-block>label{max-width:33%;line-height:.9rem}.card-block .progress-block .progress,.card-block .progress-block .progress-static{position:relative;height:.6395rem;margin-top:0}.card-block .progress-block .progress-static>.progress-meter,.card-block .progress-block .progress-static>progress,.card-block .progress-block .progress>.progress-meter,.card-block .progress-block .progress>progress{height:.6395rem}_:-ms-input-placeholder .progress-block > label,:root .progress-block > label{display:inline-block}.spinner{position:relative;display:inline-block;height:3.6rem;width:3.6rem;min-height:3.6rem;min-width:3.6rem;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;margin:0;padding:0;background:url("data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22Layer_2%22%20data-name%3D%22Layer%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-1%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-2%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-miterlimit%3A%2010%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3A%205px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-1%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20%23000000%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-opacity%3A%200.15%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-2%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20%230072a3%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Ctitle%3EPreloader_72x2%3C%2Ftitle%3E%0A%20%20%20%20%3Ccircle%20class%3D%22cls-1%22%20cx%3D%2236%22%20cy%3D%2236%22%20r%3D%2233%22%2F%3E%0A%20%20%20%20%3Cpath%20class%3D%22cls-2%22%20d%3D%22M14.3%2C60.9A33%2C33%2C0%2C0%2C1%2C36%2C3%22%3E%0A%20%20%20%20%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A");text-indent:100%;overflow:hidden;white-space:nowrap}.spinner.spinner-md{height:1.8rem;width:1.8rem;min-height:1.8rem;min-width:1.8rem}.spinner.spinner-inline,.spinner.spinner-sm{height:.9rem;width:.9rem;min-height:.9rem;min-width:.9rem}.spinner.spinner-inline{vertical-align:text-bottom}.spinner.spinner-inverse{background:url("data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22Layer_2%22%20data-name%3D%22Layer%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-1%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-2%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-miterlimit%3A%2010%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3A%205px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-1%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20%23ffffff%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-opacity%3A%200.15%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-2%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20%2374c1e2%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Ctitle%3EPreloader_72x2%3C%2Ftitle%3E%0A%20%20%20%20%3Ccircle%20class%3D%22cls-1%22%20cx%3D%2236%22%20cy%3D%2236%22%20r%3D%2233%22%2F%3E%0A%20%20%20%20%3Cpath%20class%3D%22cls-2%22%20d%3D%22M14.3%2C60.9A33%2C33%2C0%2C0%2C1%2C36%2C3%22%3E%0A%20%20%20%20%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A")}.spinner.spinner-neutral-0{background:url("data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22Layer_2%22%20data-name%3D%22Layer%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-1%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-2%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-miterlimit%3A%2010%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3A%205px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-1%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20%23transparent%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-opacity%3A%201%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-2%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20%23ffffff%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Ctitle%3EPreloader_72x2%3C%2Ftitle%3E%0A%20%20%20%20%3Ccircle%20class%3D%22cls-1%22%20cx%3D%2236%22%20cy%3D%2236%22%20r%3D%2233%22%2F%3E%0A%20%20%20%20%3Cpath%20class%3D%22cls-2%22%20d%3D%22M14.3%2C60.9A33%2C33%2C0%2C0%2C1%2C36%2C3%22%3E%0A%20%20%20%20%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A")}.spinner.spinner-check{-webkit-animation:none;animation:none;background:url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%2036%2036%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20focusable%3D%22false%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%3E%3Cpath%20fill%3D%22%230072a3%22%20class%3D%22clr-i-outline%20clr-i-outline-path-1%22%20d%3D%22M13.72%2C27.69%2C3.29%2C17.27a1%2C1%2C0%2C0%2C1%2C1.41-1.41l9%2C9L31.29%2C7.29a1%2C1%2C0%2C0%2C1%2C1.41%2C1.41Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}.alert-app-level .alert-item .btn .spinner,.btn-sm .spinner{height:.65rem;width:.65rem;min-height:.65rem;min-width:.65rem}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}:root{--clr-table-bgcolor:var(--clr-color-neutral-0);--clr-thead-bgcolor:var(--clr-color-neutral-50);--clr-table-header-border-bottom-color:var(--clr-color-neutral-400);--clr-table-footer-border-top-color:var(--clr-color-neutral-400);--clr-table-border-color:var(--clr-color-neutral-400);--clr-tablerow-bordercolor:var(--clr-color-neutral-200);--clr-table-border-radius:var(--clr-global-borderradius);--clr-table-borderwidth:var(--clr-global-borderwidth);--clr-table-cornercellradius:0.1rem;--clr-table-font-color:var(--clr-color-neutral-700);--clr-thead-color:#666666}.table{border-collapse:separate;border-style:solid;border-width:.05rem;border-width:var(--clr-table-borderwidth,.05rem);border-color:#ccc;border-color:var(--clr-table-border-color,#ccc);border-radius:.15rem;border-radius:var(--clr-table-border-radius,.15rem);background-color:#fff;background-color:var(--clr-table-bgcolor,#fff);color:#666;color:var(--clr-table-font-color,#666);margin:0;margin-top:1.2rem;max-width:100%;width:100%}.table td,.table th{font-size:.65rem;line-height:.7rem;border-top-style:solid;border-top-width:.05rem;border-top-width:var(--clr-table-borderwidth,.05rem);border-top-color:#e8e8e8;border-top-color:var(--clr-tablerow-bordercolor,#e8e8e8);padding:.55rem .6rem .55rem;text-align:center;vertical-align:top}.table td.left,.table th.left{text-align:left}.table td.left:first-child,.table th.left:first-child{padding-left:.3rem}.table th{color:#666;color:var(--clr-thead-color,#666);font-size:.55rem;font-weight:600;letter-spacing:.03em;background-color:#fafafa;background-color:var(--clr-thead-bgcolor,#fafafa);vertical-align:bottom;border-bottom-style:solid;border-bottom-width:.05rem;border-bottom-width:var(--clr-table-borderwidth,.05rem);border-bottom-color:#ccc;border-bottom-color:var(--clr-table-border-color,#ccc);border-top:0 none}.table tbody tr:first-child td{border-top:0 none}.table tbody+tbody{border-top-style:solid;border-top-width:.05rem;border-top-width:var(--clr-table-borderwidth,.05rem);border-top-color:#ccc;border-top-color:var(--clr-table-border-color,#ccc)}.table thead th:first-child{border-radius:0;border-top-left-radius:.1rem;border-top-left-radius:var(--clr-table-cornercellradius,.1rem)}.table thead th:last-child{border-radius:0;border-top-right-radius:.1rem;border-top-right-radius:var(--clr-table-cornercellradius,.1rem)}.table tbody:last-child tr:last-child td:first-child{border-radius:0;border-bottom-left-radius:.1rem;border-bottom-left-radius:var(--clr-table-cornercellradius,.1rem)}.table tbody:last-child tr:last-child td:last-child{border-radius:0;border-bottom-right-radius:.1rem;border-bottom-right-radius:var(--clr-table-cornercellradius,.1rem)}.table-compact td,.table-compact th{padding-top:.3rem;padding-bottom:.25rem}.table.table-vertical thead th{border:0 none;border-radius:0;display:none}.table.table-vertical th{border-bottom:0;border-top-style:solid;border-top-width:.05rem;border-top-width:var(--clr-table-borderwidth,.05rem);border-top-color:#ccc;border-top-color:var(--clr-table-border-color,#ccc);vertical-align:top}.table.table-vertical td,.table.table-vertical th{text-align:left;border-color:#ccc;border-color:var(--clr-table-border-color,#ccc)}.table.table-vertical td:first-child,.table.table-vertical th:first-child{border-right-style:solid;border-right-width:.05rem;border-right-width:var(--clr-table-borderwidth,.05rem);border-right-color:#ccc;border-right-color:var(--clr-table-border-color,#ccc);background-color:#fafafa;background-color:var(--clr-thead-bgcolor,#fafafa);font-weight:600}.table.table-vertical tbody:first-of-type tr:first-child td,.table.table-vertical tbody:first-of-type tr:first-child th{border-top:0 none}.table.table-vertical tbody:first-of-type tr:first-child td:first-child,.table.table-vertical tbody:first-of-type tr:first-child th:first-child{border-radius:0;border-top-left-radius:.1rem;border-top-left-radius:var(--clr-table-cornercellradius,.1rem)}.table.table-vertical tbody:first-of-type tr:first-child td:last-child,.table.table-vertical tbody:first-of-type tr:first-child th:last-child{border-radius:0;border-top-right-radius:.1rem;border-top-right-radius:var(--clr-table-cornercellradius,.1rem)}.table.table-vertical tbody:last-child tr:last-child td:first-child,.table.table-vertical tbody:last-child tr:last-child th:first-child{border-radius:0;border-bottom-left-radius:.1rem;border-bottom-left-radius:var(--clr-table-cornercellradius,.1rem)}.table.table-vertical tbody:last-child tr:last-child td:last-child,.table.table-vertical tbody:last-child tr:last-child th:last-child{border-radius:0;border-bottom-right-radius:.1rem;border-bottom-right-radius:var(--clr-table-cornercellradius,.1rem)}.table.table-noborder{border-radius:0;-webkit-box-shadow:none;box-shadow:none;background-color:transparent;border:0}.table.table-noborder th{background-color:transparent;border-bottom-color:#ccc;border-bottom-color:var(--clr-table-border-color,#ccc);border-top:0 none}.table.table-noborder th:first-child{border-right:0 none}.table.table-noborder td{border-top:0 none;padding-top:.6rem}.table.table-noborder td:first-child{border-right:0 none}.table.table-noborder thead th:first-child,.table.table-noborder thead th:last-child{border-radius:0}.table.table-noborder td,.table.table-noborder th{border-radius:0!important}.table.table-noborder td:first-child,.table.table-noborder th:first-child{padding-left:0}.table.table-compact td,.table.table-compact th{padding-top:.3rem;padding-bottom:.25rem}.table.table-compact.table-noborder td,.table.table-compact.table-noborder th{padding-top:.35rem;padding-bottom:.3rem}:root{--clr-tooltip-background-color:var(--clr-color-neutral-1000);--clr-tooltip-border-radius:var(--clr-global-borderradius);--clr-tooltip-color:var(--clr-color-neutral-0);--clr-tooltip-font-weight:var(--clr-p3-font-weight)}.tooltip{display:inline-block;position:relative;text-align:left;overflow:visible}.tooltip>.tooltip-content{visibility:hidden;opacity:0;-webkit-transition:opacity .3s linear;transition:opacity .3s linear;white-space:normal;z-index:1070}.tooltip:focus>.tooltip-content,.tooltip:hover>.tooltip-content{visibility:visible;opacity:1}.tooltip:focus>.tooltip-content:empty,.tooltip:hover>.tooltip-content:empty{visibility:hidden;opacity:0}.tooltip:focus{outline:0}.tooltip:focus>:first-child{outline-offset:.05rem;outline-width:.05rem;outline-color:#3b99fc;outline-style:solid}.tooltip .tooltip-content.tooltip-top-right,.tooltip.tooltip-top-right>.tooltip-content,.tooltip>.tooltip-content{color:#fff;color:var(--clr-tooltip-color,#fff);font-size:.65rem;font-weight:400;font-weight:var(--clr-tooltip-font-weight,400);letter-spacing:normal;background-color:#000;background-color:var(--clr-tooltip-background-color,#000);border-radius:.15rem;border-radius:var(--clr-tooltip-border-radius,.15rem);line-height:.9rem;margin:0;padding:.45rem .6rem;width:12rem;position:absolute;top:auto;bottom:100%;left:50%;right:auto;border-bottom-left-radius:0;margin-bottom:.8rem}.tooltip .tooltip-content.tooltip-top-right::before,.tooltip.tooltip-top-right>.tooltip-content::before,.tooltip>.tooltip-content::before{position:absolute;bottom:-.42rem;left:0;top:auto;right:auto;content:"";border-left:.3rem solid #000;border-left-color:var(--clr-tooltip-background-color);border-top:.25rem solid #000;border-top-color:var(--clr-tooltip-background-color);border-right:.3rem solid transparent;border-bottom:.25rem solid transparent}.tooltip .tooltip-content.tooltip-top-left,.tooltip.tooltip-top-left>.tooltip-content{color:#fff;color:var(--clr-tooltip-color,#fff);font-size:.65rem;font-weight:400;font-weight:var(--clr-tooltip-font-weight,400);letter-spacing:normal;background-color:#000;background-color:var(--clr-tooltip-background-color,#000);border-radius:.15rem;border-radius:var(--clr-tooltip-border-radius,.15rem);line-height:.9rem;margin:0;padding:.45rem .6rem;width:12rem;position:absolute;top:auto;bottom:100%;right:50%;left:auto;border-bottom-right-radius:0;margin-bottom:.8rem}.tooltip .tooltip-content.tooltip-top-left::before,.tooltip.tooltip-top-left>.tooltip-content::before{position:absolute;bottom:-.42rem;right:0;top:auto;left:auto;content:"";border-right:.3rem solid #000;border-right-color:var(--clr-tooltip-background-color);border-top:.25rem solid #000;border-top-color:var(--clr-tooltip-background-color);border-left:.3rem solid transparent;border-bottom:.25rem solid transparent}.tooltip .tooltip-content.tooltip-bottom-right,.tooltip.tooltip-bottom-right>.tooltip-content{color:#fff;color:var(--clr-tooltip-color,#fff);font-size:.65rem;font-weight:400;font-weight:var(--clr-tooltip-font-weight,400);letter-spacing:normal;background-color:#000;background-color:var(--clr-tooltip-background-color,#000);border-radius:.15rem;border-radius:var(--clr-tooltip-border-radius,.15rem);line-height:.9rem;margin:0;padding:.45rem .6rem;width:12rem;position:absolute;bottom:auto;top:100%;left:50%;right:auto;border-top-left-radius:0;margin-top:.8rem}.tooltip .tooltip-content.tooltip-bottom-right::before,.tooltip.tooltip-bottom-right>.tooltip-content::before{position:absolute;top:-.42rem;left:0;bottom:auto;right:auto;content:"";border-left:.3rem solid #000;border-left-color:var(--clr-tooltip-background-color);border-bottom:.25rem solid #000;border-bottom-color:var(--clr-tooltip-background-color);border-right:.3rem solid transparent;border-top:.25rem solid transparent}.tooltip .tooltip-content.tooltip-bottom-left,.tooltip.tooltip-bottom-left>.tooltip-content{color:#fff;color:var(--clr-tooltip-color,#fff);font-size:.65rem;font-weight:400;font-weight:var(--clr-tooltip-font-weight,400);letter-spacing:normal;background-color:#000;background-color:var(--clr-tooltip-background-color,#000);border-radius:.15rem;border-radius:var(--clr-tooltip-border-radius,.15rem);line-height:.9rem;margin:0;padding:.45rem .6rem;width:12rem;position:absolute;bottom:auto;top:100%;right:50%;left:auto;border-top-right-radius:0;margin-top:.8rem}.tooltip .tooltip-content.tooltip-bottom-left::before,.tooltip.tooltip-bottom-left>.tooltip-content::before{position:absolute;top:-.42rem;right:0;bottom:auto;left:auto;content:"";border-right:.3rem solid #000;border-right-color:var(--clr-tooltip-background-color);border-bottom:.25rem solid #000;border-bottom-color:var(--clr-tooltip-background-color);border-left:.3rem solid transparent;border-top:.25rem solid transparent}.tooltip .tooltip-content.tooltip-right,.tooltip.tooltip-right>.tooltip-content{position:absolute;right:auto;left:100%;top:50%;bottom:auto;color:#fff;color:var(--clr-tooltip-color,#fff);font-size:.65rem;font-weight:400;font-weight:var(--clr-tooltip-font-weight,400);letter-spacing:normal;background-color:#000;background-color:var(--clr-tooltip-background-color,#000);border-radius:.15rem;border-radius:var(--clr-tooltip-border-radius,.15rem);line-height:.9rem;margin:0;padding:.45rem .6rem;width:12rem;border-top-left-radius:0;margin-left:.8rem}.tooltip .tooltip-content.tooltip-right::before,.tooltip.tooltip-right>.tooltip-content::before{position:absolute;top:0;left:-.45rem;bottom:auto;right:auto;content:"";border-top:.3rem solid #000;border-top-color:var(--clr-tooltip-background-color);border-right:.25rem solid #000;border-right-color:var(--clr-tooltip-background-color);border-bottom:.3rem solid transparent;border-left:.25rem solid transparent}.tooltip .tooltip-content.tooltip-left,.tooltip.tooltip-left>.tooltip-content{position:absolute;left:auto;right:100%;top:50%;bottom:auto;color:#fff;color:var(--clr-tooltip-color,#fff);font-size:.65rem;font-weight:400;font-weight:var(--clr-tooltip-font-weight,400);letter-spacing:normal;background-color:#000;background-color:var(--clr-tooltip-background-color,#000);border-radius:.15rem;border-radius:var(--clr-tooltip-border-radius,.15rem);line-height:.9rem;margin:0;padding:.45rem .6rem;width:12rem;border-top-right-radius:0;margin-right:.8rem}.tooltip .tooltip-content.tooltip-left::before,.tooltip.tooltip-left>.tooltip-content::before{position:absolute;top:0;right:-.45rem;bottom:auto;left:auto;content:"";border-top:.3rem solid #000;border-top-color:var(--clr-tooltip-background-color);border-left:.25rem solid #000;border-left-color:var(--clr-tooltip-background-color);border-bottom:.3rem solid transparent;border-right:.25rem solid transparent}.tooltip .tooltip-content.tooltip-xs,.tooltip.tooltip-xs>.tooltip-content{width:3.6rem}.tooltip .tooltip-content.tooltip-sm,.tooltip.tooltip-sm>.tooltip-content{width:6rem}.tooltip .tooltip-content.tooltip-md,.tooltip.tooltip-md>.tooltip-content{width:12rem}.tooltip .tooltip-content.tooltip-lg,.tooltip.tooltip-lg>.tooltip-content{width:18rem}.tooltip.tooltip-top-left>.btn+.tooltip-content,.tooltip.tooltip-top-right>.btn+.tooltip-content,.tooltip>.btn+.tooltip-content{margin-bottom:.5rem}.tooltip.tooltip-bottom-left>.btn+.tooltip-content,.tooltip.tooltip-bottom-right>.btn+.tooltip-content{margin-top:.5rem}.tooltip.tooltip-right>.btn+.tooltip-content{margin-left:.2rem}.tooltip>.clr-icon{margin-right:0}.tooltip cds-icon>svg{pointer-events:none}.tooltip-trigger:focus+.tooltip-content{visibility:visible}:root{--clr-form-disabled-background-color:var(--clr-color-neutral-400);--clr-forms-label-color:var(--clr-color-neutral-800);--clr-forms-text-color:var(--clr-color-neutral-1000);--clr-forms-invalid-color:var(--clr-color-danger-800);--clr-forms-valid-color:var(--clr-color-success-700);--clr-forms-valid-text-color:var(--clr-color-success-900);--clr-forms-subtext-color:var(--clr-color-neutral-600);--clr-forms-placeholder-color:var(--clr-color-neutral-600);--clr-forms-border-color:var(--clr-color-neutral-500);--clr-forms-focused-color:var(--clr-color-action-600);--clr-forms-subtext-disabled-color:#8c8c8c;--clr-forms-border-disabled-color:#b3b3b3;--clr-forms-text-disabled-color:#b3b3b3;--clr-forms-label-disabled-color:#8c8c8c;--clr-forms-label-font-weight:var(--clr-font-weight-bold);--clr-forms-block-label-font-weight:400;--clr-forms-text-font-weight:400;--clr-forms-textarea-background-color:var(--clr-color-neutral-0);--clr-forms-textarea-focused-outline:0 0 0.1rem 0.1rem #69c0e2;--clr-forms-textarea-invalid-focused-outline:0 0 0.1rem 0.1rem #ff745c;--clr-forms-select-hover-background:rgba( - 222, - 222, - 222, - 0.5 -);--clr-forms-select-caret-hover-color:var(--clr-color-neutral-600);--clr-forms-select-caret-color:var(--clr-color-neutral-500);--clr-forms-select-option-color:var(--clr-forms-text-color);--clr-forms-select-multiple-background-color:var(--clr-forms-textarea-background-color);--clr-forms-select-multiple-border-color:var(--clr-color-neutral-400);--clr-forms-select-multiple-option-color:var(--clr-forms-text-color);--clr-forms-select-multiple-error-focus-color:#ff745c;--clr-forms-checkbox-label-color:var(--clr-forms-label-color);--clr-forms-checkbox-background-color:var(--clr-color-action-600);--clr-forms-checkbox-indeterminate-border-color:var(--clr-color-action-600);--clr-forms-checkbox-mark-color:var(--clr-color-neutral-0);--clr-forms-checkbox-disabled-background-color:var(--clr-form-disabled-background-color);--clr-forms-checkbox-disabled-mark-color:var(--clr-color-neutral-1000);--clr-forms-checkbox-border-radius:var(--clr-global-borderradius);--clr-forms-checkbox-checked-shadow:inset 0 0 0 0.3rem var(--clr-forms-checkbox-background-color);--clr-forms-radio-label-color:var(--clr-forms-checkbox-label-color);--clr-forms-radio-disabled-background-color:var(--clr-form-disabled-background-color);--clr-forms-radio-disabled-mark-color:var(--clr-forms-checkbox-disabled-mark-color);--clr-forms-radio-selected-shadow:var(--clr-forms-checkbox-checked-shadow);--clr-forms-radio-disabled-shadow:var(--clr-forms-checkbox-checked-shadow);--clr-forms-radio-focused-shadow:0 0 0.1rem 0.1rem #69c0e2;--clr-forms-range-progress-fill-color:var(--clr-color-action-600);--clr-forms-range-track-color:var(--clr-color-neutral-200)}.clr-date-container .clr-input-wrapper{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content}.clr-form-control{margin-top:1.2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.clr-form-control-disabled{color:#b3b3b3;color:var(--clr-forms-text-disabled-color,#b3b3b3)}.clr-form-control-disabled .clr-control-label,.clr-form-control-disabled label{color:#8c8c8c;color:var(--clr-forms-label-disabled-color,#8c8c8c)}.clr-form-control-disabled .clr-input,.clr-form-control-disabled .clr-select,.clr-form-control-disabled .clr-textarea{color:#b3b3b3;color:var(--clr-forms-text-disabled-color,#b3b3b3);border-bottom-color:#b3b3b3;border-bottom-color:var(--clr-forms-border-disabled-color,#b3b3b3)}.clr-form-control-disabled input[type=range]::-webkit-slider-thumb{background-color:#b3b3b3;background-color:var(--clr-forms-border-disabled-color,#b3b3b3)}.clr-form-control-disabled .clr-subtext{color:#8c8c8c;color:var(--cclr-forms-subtext-disabled-color,#8c8c8c)}.clr-form-control-multi{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.clr-form-control-multi .clr-control-label{width:100%}.clr-control-label{display:block;color:#454545;color:var(--clr-forms-label-color,#454545);font-size:.65rem;font-weight:600;font-weight:var(--clr-forms-label-font-weight,600);line-height:.9rem}.clr-control-container{display:inline-block}.clr-control-inline{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-line-pack:start;align-content:flex-start}.clr-control-inline .clr-control-label{display:inline-block;margin-right:.6rem;width:auto}.clr-subtext{display:block;font-size:.55rem;line-height:.6rem;color:#8c8c8c;color:var(--clr-forms-subtext-color,#8c8c8c);margin-top:.3rem}.clr-subtext-wrapper{-ms-flex-preferred-size:100%;flex-basis:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.clr-validate-icon{height:1.2rem;width:1.2rem;min-height:1.2rem;min-width:1.2rem;color:#c21d00;color:var(--clr-forms-invalid-color,#c21d00);display:none;margin-left:-1.2rem}.clr-success .clr-input{border-bottom-color:#3c8500;border-bottom-color:var(--clr-forms-valid-color,#3c8500)}.clr-success .clr-validate-icon{display:inline-block;color:#3c8500;color:var(--clr-forms-valid-color,#3c8500);margin-left:-.2rem}.clr-success .clr-subtext{color:#255200;color:var(--clr-forms-valid-text-color,#255200)}.clr-error .clr-validate-icon{margin-left:-.2rem;display:inline-block}.clr-error .clr-subtext{color:#c21d00;color:var(--clr-forms-invalid-color,#c21d00)}.clr-form-horizontal .clr-form-control>.clr-control-label,.clr-form-horizontal .clr-form-control>.clr-form-control.clr-form-control-multi .clr-control-label{width:9.6rem;-ms-flex-negative:0;flex-shrink:0;margin-top:.15rem}.clr-form-horizontal.clr-row .clr-control-label{width:auto}.clr-form-horizontal .clr-form-control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.clr-form-compact .clr-form-control>.clr-control-label{width:9.6rem;min-width:9.6rem}.clr-form-compact .clr-form-control.clr-row>.clr-control-label{width:auto;min-width:auto}.clr-form-compact .clr-control-label{margin-top:.15rem}.clr-form-compact .clr-form-control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-top:.6rem}.clr-form-compact .clr-control-container{display:-webkit-box;display:-ms-flexbox;display:flex}.clr-form-compact .clr-subtext{display:inline-block;margin-top:.3rem;margin-left:1.2rem}.clr-form-compact .clr-error .clr-subtext,.clr-form-compact .clr-success .clr-subtext{margin-left:0}.clr-form-compact .clr-error .clr-validate-icon,.clr-form-compact .clr-success .clr-validate-icon{margin-left:0}.clr-form-compact .clr-subtext-wrapper{-ms-flex-preferred-size:auto;flex-basis:auto;display:inline-block}.clr-form{padding:.3rem}.clr-form-group{padding:.3rem}.clr-checkbox-wrapper{position:relative}.clr-checkbox-wrapper .clr-control-label{font-weight:400;display:block}.clr-checkbox-wrapper~.clr-validate-icon{margin-left:0}.clr-checkbox-wrapper~.clr-subtext{display:inline-block}.clr-checkbox-wrapper input[type=checkbox]{position:absolute;opacity:0;top:.25rem;left:0;height:.8rem;width:.8rem}.clr-checkbox-wrapper label{position:relative;display:inline-block;min-height:1.2rem;padding-left:1.1rem;margin-top:0;cursor:pointer;line-height:1.2rem;color:#454545;color:var(--clr-forms-checkbox-label-color,#454545)}.clr-checkbox-wrapper input[type=checkbox]+label::before{position:absolute;top:.2rem;left:0;content:"";display:inline-block;height:.8rem;width:.8rem;border:.05rem solid;border-color:#b3b3b3;border-color:var(--clr-forms-border-color,#b3b3b3);border-radius:.15rem;border-radius:var(--clr-forms-checkbox-border-radius,.15rem)}.clr-checkbox-wrapper input[type=checkbox]:focus+label::before{outline:0;-webkit-box-shadow:0 0 .1rem .1rem #69c0e2;box-shadow:0 0 .1rem .1rem #69c0e2}.clr-checkbox-wrapper input[type=checkbox]+label::after{position:absolute;content:"";display:none;height:.25rem;width:.4rem;border-left:.1rem solid;border-bottom:.1rem solid;border-color:#fff;border-color:var(--clr-forms-checkbox-mark-color,#fff);top:.2rem;left:.2rem;-webkit-transform:translate(0,.2rem) rotate(-45deg);transform:translate(0,.2rem) rotate(-45deg)}.clr-checkbox-wrapper input[type=checkbox]:checked+label::before{background:#0072a3;background:var(--clr-forms-checkbox-background-color,#0072a3);border:none}.clr-checkbox-wrapper input[type=checkbox]:checked+label::after{display:inline-block}.clr-checkbox-wrapper input[type=checkbox].clr-indeterminate+label::before,.clr-checkbox-wrapper input[type=checkbox]:indeterminate+label::before{border:.05rem solid;border-color:#0072a3;border-color:var(--clr-forms-checkbox-indeterminate-border-color,#0072a3)}.clr-checkbox-wrapper input[type=checkbox].clr-indeterminate+label::after,.clr-checkbox-wrapper input[type=checkbox]:indeterminate+label::after{border-left:none;border-bottom-color:#0072a3;border-bottom-color:var(--clr-forms-checkbox-indeterminate-border-color,#0072a3);display:inline-block;-webkit-transform:translate(0,.2rem);transform:translate(0,.2rem)}.clr-checkbox-wrapper.clr-checkbox-inline{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-line-pack:start;align-content:flex-start}.clr-checkbox-wrapper.clr-checkbox-inline .clr-control-label{display:inline-block;margin-right:.6rem;width:auto}.clr-error .clr-checkbox-wrapper input[type=checkbox]+label::before{border-color:#c21d00;border-color:var(--clr-forms-invalid-color,#c21d00)}.clr-form-control-disabled .clr-checkbox-wrapper label{cursor:not-allowed}.clr-form-control-disabled .clr-checkbox-wrapper input[type=checkbox]+label::before,.clr-form-control-disabled .clr-checkbox-wrapper input[type=checkbox]:checked+label::before{background-color:#ccc;background-color:var(--clr-forms-checkbox-disabled-background-color,#ccc);border:none}.clr-form-control-disabled .clr-checkbox-wrapper input[type=checkbox]:checked+label::after{border-left:.1rem solid;border-bottom:.1rem solid;border-left-color:#000;border-left-color:var(--clr-forms-checkbox-disabled-mark-color,#000);border-bottom-color:#000;border-bottom-color:var(--clr-forms-checkbox-disabled-mark-color,#000)}.clr-form-control-disabled .clr-checkbox-wrapper input[type=checkbox]:checked.clr-indeterminate+label::after,.clr-form-control-disabled .clr-checkbox-wrapper input[type=checkbox]:checked:indeterminate+label::after{border-left:none}.clr-form-compact .clr-checkbox-wrapper{max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-line-pack:start;align-content:flex-start;height:1.2rem}.clr-form-compact .clr-checkbox-wrapper~.clr-subtext{margin-left:.3rem}.clr-form-compact .clr-checkbox-wrapper .clr-control-label{display:inline-block;margin-right:.6rem;width:auto}.clr-form-compact .clr-checkbox-wrapper .clr-control-label{margin-top:0}.clr-file-wrapper{position:relative;margin-top:.3rem}.clr-file-wrapper .clr-control-label{font-weight:400;display:block}.clr-file-wrapper~.clr-validate-icon{margin-left:0}.clr-file-wrapper~.clr-subtext{display:inline-block}.clr-file-wrapper .btn{margin:0}.clr-file{height:0;width:0;opacity:0;overflow:hidden;position:absolute;z-index:-1}.clr-form-compact .clr-file-wrapper{max-width:100%;margin-top:0}.clr-form-compact .clr-file-wrapper~.clr-subtext{margin-left:.3rem}.clr-form-compact .clr-file-wrapper~.clr-validate-icon{line-height:1.2rem}.clr-form-compact .clr-file-wrapper~.clr-subtext{line-height:1.2rem;margin-top:0}.clr-form-compact .clr-file-wrapper .clr-control-label{margin-top:0;line-height:1.08rem}.clr-form-compact .clr-file-wrapper .btn{height:1.2rem}.clr-input-wrapper{white-space:nowrap;max-height:1.2rem}.clr-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;margin:0;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;background:0 0;height:1.2rem;color:#000;color:var(--clr-forms-text-color,#000);border-bottom:.05rem solid;border-bottom-color:#b3b3b3;border-bottom-color:var(--clr-forms-border-color,#b3b3b3);display:inline-block;padding:0 .3rem;max-height:1.2rem;font-size:.65rem}.clr-input:focus{outline:0}.clr-input[readonly]{border:none}.clr-input:not([readonly]){background:-webkit-gradient(linear,left top,left bottom,color-stop(95%,transparent),color-stop(95%,var(--clr-forms-focused-color,#0072a3))) no-repeat;background:linear-gradient(to bottom,transparent 95%,var(--clr-forms-focused-color,#0072a3) 95%) no-repeat;background-size:0 100%;-webkit-transition:background-size .2s ease;transition:background-size .2s ease}.clr-input:not([readonly]).clr-focus,.clr-input:not([readonly]):focus{border-bottom-color:#0072a3;border-bottom-color:var(--clr-forms-focused-color,#0072a3);background-size:100% 100%}.clr-input:disabled{color:#b3b3b3;color:var(--clr-forms-text-disabled-color,#b3b3b3);cursor:not-allowed}.clr-error .clr-input:not([readonly]){border-bottom-color:#c21d00;border-bottom-color:var(--clr-forms-invalid-color,#c21d00);background:-webkit-gradient(linear,left top,left bottom,color-stop(95%,transparent),color-stop(95%,var(--clr-forms-invalid-color,#c21d00))) no-repeat;background:linear-gradient(to bottom,transparent 95%,var(--clr-forms-invalid-color,#c21d00) 95%) no-repeat;background-size:0 100%;-webkit-transition:background-size .2s ease;transition:background-size .2s ease}.clr-error .clr-input:not([readonly]).clr-focus,.clr-error .clr-input:not([readonly]):focus{border-bottom-color:#c21d00;border-bottom-color:var(--clr-forms-invalid-color,#c21d00);background-size:100% 100%}.clr-form-control.row .clr-input-wrapper{max-width:calc(100% - 1.2rem)}.clr-form-compact .clr-input{max-width:100%}.clr-form-compact .clr-input~.clr-subtext{margin-left:.3rem}.clr-form-control-readonly .clr-input{border:none}.clr-form-control-multi .clr-input{max-width:calc(100% + 1.2rem)}::-webkit-input-placeholder{color:#8c8c8c;color:var(--clr-forms-placeholder-color,#8c8c8c)}:-ms-input-placeholder{color:#8c8c8c;color:var(--clr-forms-placeholder-color,#8c8c8c)}::-ms-input-placeholder{color:#8c8c8c;color:var(--clr-forms-placeholder-color,#8c8c8c)}::-webkit-input-placeholder{color:#8c8c8c;color:var(--clr-forms-placeholder-color,#8c8c8c)}::-moz-placeholder{color:#8c8c8c;color:var(--clr-forms-placeholder-color,#8c8c8c)}:-ms-input-placeholder{color:#8c8c8c;color:var(--clr-forms-placeholder-color,#8c8c8c)}::-ms-input-placeholder{color:#8c8c8c;color:var(--clr-forms-placeholder-color,#8c8c8c)}::placeholder{color:#8c8c8c;color:var(--clr-forms-placeholder-color,#8c8c8c)}.clr-input-group{color:#000;color:var(--clr-forms-text-color,#000);border-bottom:.05rem solid;border-bottom-color:#b3b3b3;border-bottom-color:var(--clr-forms-border-color,#b3b3b3);display:inline-block;background:-webkit-gradient(linear,left top,left bottom,color-stop(95%,transparent),color-stop(95%,var(--clr-forms-focused-color,#0072a3))) no-repeat;background:linear-gradient(to bottom,transparent 95%,var(--clr-forms-focused-color,#0072a3) 95%) no-repeat;background-size:0 100%;-webkit-transition:background-size .2s ease;transition:background-size .2s ease;max-width:100%;height:1.2rem}.clr-input-group.clr-focus,.clr-input-group:focus{border-bottom-color:#0072a3;border-bottom-color:var(--clr-forms-focused-color,#0072a3);background-size:100% 100%}.clr-input-group .clr-input{background:0 0;border:none;margin-right:0;max-width:100%}.clr-input-group .clr-input:not([readonly]):focus{background-size:0;border:0}.clr-input-group select{border:none}.clr-input-group .clr-multiselect-wrapper select,.clr-input-group .clr-select-wrapper select{border:none}.clr-input-group .clr-input-group-addon{color:#8c8c8c;color:var(--clr-forms-subtext-color,#8c8c8c)}.clr-input-group .clr-input-group-addon:first-child{padding:0 0 0 .45rem}.clr-input-group .clr-input-group-addon:last-child{padding:0 .45rem 0 0}.clr-input-group .clr-input-group-icon-action{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;margin:0;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;background:0 0;color:#0072a3;color:var(--clr-forms-focused-color,#0072a3);padding:0 .45rem}button.clr-input-group .clr-input-group-icon-action{cursor:pointer}.clr-input-group .clr-input-group-icon-action cds-icon{height:.9rem;width:.9rem;-webkit-transform:translate(-.05rem,-.05rem);transform:translate(-.05rem,-.05rem)}.clr-form-control-disabled .clr-input-group-icon-action{color:#b3b3b3;color:var(--clr-forms-text-disabled-color,#b3b3b3);cursor:not-allowed}.clr-error .clr-input-group{border-bottom-color:#c21d00;border-bottom-color:var(--clr-forms-invalid-color,#c21d00);background:-webkit-gradient(linear,left top,left bottom,color-stop(95%,transparent),color-stop(95%,var(--clr-forms-invalid-color,#c21d00))) no-repeat;background:linear-gradient(to bottom,transparent 95%,var(--clr-forms-invalid-color,#c21d00) 95%) no-repeat;background-size:0 100%;-webkit-transition:background-size .2s ease;transition:background-size .2s ease}.clr-error .clr-input-group.clr-focus,.clr-error .clr-input-group:focus{border-bottom-color:#c21d00;border-bottom-color:var(--clr-forms-invalid-color,#c21d00);background-size:100% 100%}.clr-form-horizontal .clr-input-group{max-width:100%;padding-right:0}.clr-radio-wrapper{position:relative;line-height:1.2rem}.clr-radio-wrapper .clr-control-label{font-weight:400;display:block}.clr-radio-wrapper~.clr-validate-icon{margin-left:0}.clr-radio-wrapper~.clr-subtext{display:inline-block}.clr-radio-wrapper input[type=radio]{position:absolute;opacity:0;top:.25rem;left:0;height:.8rem;width:.8rem}.clr-radio-wrapper label{position:relative;display:inline-block;min-height:1.2rem;padding-left:1.1rem;margin-top:0;cursor:pointer;line-height:1.2rem;color:#454545;color:var(--clr-forms-radio-label-color,#454545)}.clr-radio-wrapper label:empty{padding-left:0}.clr-radio-wrapper input[type=radio]+label::before{position:absolute;top:.2rem;left:0;content:"";display:inline-block;height:.8rem;width:.8rem;border:.05rem solid;border-color:#b3b3b3;border-color:var(--clr-forms-border-color,#b3b3b3);border-radius:50%}.clr-radio-wrapper input[type=radio]:checked+label::before{-webkit-box-shadow:inset 0 0 0 .3rem #0072a3;box-shadow:inset 0 0 0 .3rem #0072a3;-webkit-box-shadow:var(--clr-forms-radio-selected-shadow,inset 0 0 0 .3rem #0072a3);box-shadow:var(--clr-forms-radio-selected-shadow,inset 0 0 0 .3rem #0072a3);border:none}.clr-radio-wrapper input[type=radio]:focus+label::before{outline:0;-webkit-box-shadow:0 0 .1rem .1rem #69c0e2;box-shadow:0 0 .1rem .1rem #69c0e2;-webkit-box-shadow:var(--clr-forms-radio-focused-shadow,0 0 .1rem .1rem #69c0e2);box-shadow:var(--clr-forms-radio-focused-shadow,0 0 .1rem .1rem #69c0e2)}.clr-radio-wrapper input[type=radio]:focus:checked+label::before{outline:0;-webkit-box-shadow:inset 0 0 0 .3rem #0072a3,0 0 .1rem .1rem #69c0e2;box-shadow:inset 0 0 0 .3rem #0072a3,0 0 .1rem .1rem #69c0e2;-webkit-box-shadow:var(--clr-forms-radio-selected-shadow,inset 0 0 0 .3rem #0072a3),var(--clr-forms-radio-focused-shadow,0 0 .1rem .1rem #69c0e2);box-shadow:var(--clr-forms-radio-selected-shadow,inset 0 0 0 .3rem #0072a3),var(--clr-forms-radio-focused-shadow,0 0 .1rem .1rem #69c0e2)}.clr-radio-wrapper.disabled input[type=radio]:checked+label::before{background-color:#ccc;background-color:var(--clr-forms-radio-disabled-background-color,#ccc);-webkit-box-shadow:inset 0 0 0 .3rem #0072a3;box-shadow:inset 0 0 0 .3rem #0072a3;-webkit-box-shadow:var(--clr-forms-radio-disabled-shadow,inset 0 0 0 .3rem #0072a3);box-shadow:var(--clr-forms-radio-disabled-shadow,inset 0 0 0 .3rem #0072a3)}.clr-form-control-disabled .clr-radio-wrapper label{cursor:not-allowed}.clr-error .clr-radio-wrapper input[type=radio]+label::before{border-color:#c21d00;border-color:var(--clr-forms-invalid-color,#c21d00)}.clr-form-compact .clr-error .clr-subtext{margin-left:0}.clr-form-compact .clr-radio-wrapper{max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-line-pack:start;align-content:flex-start;height:1.2rem}.clr-form-compact .clr-radio-wrapper~.clr-subtext{margin-left:.3rem}.clr-form-compact .clr-radio-wrapper .clr-control-label{display:inline-block;margin-right:.6rem;width:auto}.clr-form-compact .clr-radio-wrapper .clr-control-label{margin-top:0}.clr-multiselect-wrapper,.clr-select-wrapper{position:relative;white-space:nowrap}.clr-multiselect-wrapper select,.clr-select-wrapper select{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;margin:0;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;background:0 0;height:1.2rem;color:#000;color:var(--clr-forms-text-color,#000);border-bottom:.05rem solid;border-bottom-color:#b3b3b3;border-bottom-color:var(--clr-forms-border-color,#b3b3b3);display:inline-block;background:-webkit-gradient(linear,left top,left bottom,color-stop(95%,transparent),color-stop(95%,var(--clr-forms-focused-color,#0072a3))) no-repeat;background:linear-gradient(to bottom,transparent 95%,var(--clr-forms-focused-color,#0072a3) 95%) no-repeat;background-size:0 100%;-webkit-transition:background-size .2s ease;transition:background-size .2s ease;position:relative;padding:0 1.1rem 0 .3rem;cursor:pointer;font-size:.65rem;z-index:2}.clr-multiselect-wrapper select:focus,.clr-select-wrapper select:focus{outline:0}.clr-multiselect-wrapper select.clr-focus,.clr-multiselect-wrapper select:focus,.clr-select-wrapper select.clr-focus,.clr-select-wrapper select:focus{border-bottom-color:#0072a3;border-bottom-color:var(--clr-forms-focused-color,#0072a3);background-size:100% 100%}.clr-multiselect-wrapper select:active,.clr-multiselect-wrapper select:hover,.clr-select-wrapper select:active,.clr-select-wrapper select:hover{border-color:rgba(222,222,222,.5);border-color:var(--clr-forms-select-hover-background,rgba(222,222,222,.5));background:rgba(222,222,222,.5);background:var(--clr-forms-select-hover-background,rgba(222,222,222,.5))}.clr-multiselect-wrapper select:disabled,.clr-select-wrapper select:disabled{color:#b3b3b3;color:var(--clr-forms-text-disabled-color,#b3b3b3);cursor:not-allowed}.clr-multiselect-wrapper select option,.clr-select-wrapper select option{color:#000;color:var(--clr-forms-select-option-color,#000)}.clr-multiselect-wrapper select::-ms-expand,.clr-select-wrapper select::-ms-expand{display:none}.clr-select-wrapper{max-height:1.2rem;display:inline-block}.clr-select-wrapper::after{position:absolute;content:"";height:.5rem;width:.5rem;top:.35rem;right:.3rem;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%3E.cls-1%7Bfill%3A%23b3b3b3%3B%7D%3C%2Fstyle%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M6%2C9L1.2%2C4.2a0.68%2C0.68%2C0%2C0%2C1%2C1-1L6%2C7.08%2C9.84%2C3.24a0.68%2C0.68%2C0%2C1%2C1%2C1%2C1Z%22%2F%3E%0A%3C%2Fsvg%3E%0A");background-repeat:no-repeat;background-size:contain;vertical-align:middle;margin:0}.clr-select-wrapper:hover::after{color:#8c8c8c;color:var(--clr-forms-select-caret-hover-color,#8c8c8c)}.clr-error .clr-select-wrapper::after{right:1.5rem}.clr-multiselect-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.clr-multiselect-wrapper .clr-validate-icon{margin-left:0}select[multiple],select[size]{padding:0;background:#fff;background:var(--clr-forms-select-multiple-background-color,#fff);border:.05rem solid;border-color:#ccc;border-color:var(--clr-forms-select-multiple-border-color,#ccc);border-radius:.15rem;border-radius:var(--clr-global-borderradius,.15rem);height:auto;min-width:6rem}select[multiple]:active,select[multiple]:hover,select[size]:active,select[size]:hover{background:#fff;background:var(--clr-forms-select-multiple-background-color,#fff);border-color:#ccc;border-color:var(--clr-forms-select-multiple-border-color,#ccc)}select[multiple] option,select[size] option{padding:.15rem .3rem;color:#000;color:var(--clr-forms-select-multiple-option-color,#000)}.clr-error select:not([multiple]){border-bottom-color:#c21d00;border-bottom-color:var(--clr-forms-invalid-color,#c21d00)}.clr-error select[multiple]{border-color:#c21d00;border-color:var(--clr-forms-invalid-color,#c21d00)}.clr-error select[multiple]:focus{outline:0;-webkit-box-shadow:0 .05rem .15rem #ff745c;box-shadow:0 .05rem .15rem #ff745c;-webkit-box-shadow:0 .05rem .15rem var(--clr-forms-select-multiple-error-focus-color,#ff745c);box-shadow:0 .05rem .15rem var(--clr-forms-select-multiple-error-focus-color,#ff745c)}.clr-form-control-disabled .clr-select.disabled{color:#b3b3b3;color:var(--clr-forms-text-disabled-color,#b3b3b3);cursor:not-allowed}.clr-form-control-disabled .clr-select.disabled:hover::after{color:#b3b3b3;color:var(--clr-forms-select-caret-color,#b3b3b3)}.clr-form-control-disabled .clr-select select:disabled,.clr-form-control-disabled .clr-select.disabled>select{color:#b3b3b3;color:var(--clr-forms-text-disabled-color,#b3b3b3);cursor:not-allowed}.clr-form-control-disabled .clr-select select:disabled:hover,.clr-form-control-disabled .clr-select.disabled>select:hover{background:0 0;border-color:#b3b3b3;border-color:var(--clr-forms-border-color,#b3b3b3)}.clr-form-compact .clr-multiselect-wrapper{margin-top:0}.clr-textarea-wrapper{white-space:nowrap;display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:.3rem}.clr-textarea-wrapper .clr-validate-icon{margin-left:0}.clr-textarea{max-width:calc(100% - .3rem);height:auto;resize:vertical;background:#fff;background:var(--clr-forms-textarea-background-color,#fff);border:.05rem solid;border-color:#b3b3b3;border-color:var(--clr-forms-border-color,#b3b3b3);color:#000;color:var(--clr-forms-text-color,#000);border-radius:.15rem;padding:.4rem .6rem;font-size:.65rem}.clr-textarea:focus{outline:0;-webkit-box-shadow:0 0 .1rem .1rem #69c0e2;box-shadow:0 0 .1rem .1rem #69c0e2;-webkit-box-shadow:var(--clr-forms-textarea-focused-outline,0 0 .1rem .1rem #69c0e2);box-shadow:var(--clr-forms-textarea-focused-outline,0 0 .1rem .1rem #69c0e2)}.clr-textarea:disabled{color:#b3b3b3;color:var(--clr-forms-text-disabled-color,#b3b3b3);cursor:not-allowed}.clr-error .clr-textarea{border-color:#c21d00;border-color:var(--clr-forms-invalid-color,#c21d00)}.clr-error .clr-textarea:focus{outline:0;-webkit-box-shadow:0 0 .1rem .1rem #ff745c;box-shadow:0 0 .1rem .1rem #ff745c;-webkit-box-shadow:var(--clr-forms-textarea-invalid-focused-outline,0 0 .1rem .1rem #ff745c);box-shadow:var(--clr-forms-textarea-invalid-focused-outline,0 0 .1rem .1rem #ff745c)}.clr-control-container textarea{width:auto}.clr-form-control.row .clr-textarea-wrapper{max-width:calc(100% - .3rem)}.clr-form-compact .clr-textarea-wrapper{margin-top:0}.clr-form-compact .clr-textarea-wrapper .clr-textarea{max-width:100%}.clr-form-compact .clr-textarea-wrapper .clr-textarea~.clr-subtext{margin-left:.3rem}:root{--clr-toggle-bg-color-off:var(--clr-color-neutral-600);--clr-toggle-bg-color-on:var(--clr-color-success-500);--clr-toggle-handle-bg-color:var(--clr-color-neutral-50);--clr-toggle-disabled-default-border-color:var(--clr-color-neutral-400);--clr-toggle-disabled-default-handle-color:var(--clr-color-neutral-0);--clr-toggle-disabled-off-border-color:var(--clr-toggle-disabled-default-border-color);--clr-toggle-disabled-off-bg-color:var(--clr-toggle-disabled-default-handle-color);--clr-toggle-disabled-off-handle-border-color:var(--clr-toggle-disabled-default-border-color);--clr-toggle-disabled-on-border-color:var(--clr-toggle-disabled-default-border-color);--clr-toggle-disabled-on-bg-color:var(--clr-toggle-disabled-default-border-color);--clr-toggle-disabled-on-handle-border-color:var(--clr-toggle-disabled-default-handle-color)}.clr-toggle-wrapper input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none}.clr-toggle-wrapper{height:1.2rem;vertical-align:middle;position:relative;display:block;margin-right:.6rem}.clr-toggle-wrapper label{display:inline-block;position:relative;cursor:pointer;height:1.2rem;margin-left:2.1rem;margin-right:0}.clr-toggle-wrapper input[type=checkbox]{position:absolute;top:.3rem;right:.3rem;height:.8rem;width:.8rem;opacity:0}.clr-toggle-wrapper input[type=checkbox]+label::before{position:absolute;display:inline-block;content:"";height:.9rem;width:1.65rem;border:.1rem solid;border-radius:.45rem;border-color:#8c8c8c;border-color:var(--clr-toggle-bg-color-off,#8c8c8c);background-color:#8c8c8c;background-color:var(--clr-toggle-bg-color-off,#8c8c8c);top:.15rem;right:0;left:-2.1rem;-webkit-transition-duration:.15s;transition-duration:.15s;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;-webkit-transition-property:border-color,background-color;transition-property:border-color,background-color}.clr-toggle-wrapper input[type=checkbox]:focus+label::before{outline:0;-webkit-box-shadow:0 0 .1rem .1rem #69c0e2;box-shadow:0 0 .1rem .1rem #69c0e2}.clr-toggle-wrapper input[type=checkbox]:checked+label::before{border-color:#5aa220;border-color:var(--clr-toggle-bg-color-on,#5aa220);background-color:#5aa220;background-color:var(--clr-toggle-bg-color-on,#5aa220);-webkit-transition-duration:.15s;transition-duration:.15s;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;-webkit-transition-property:border-color,background-color;transition-property:border-color,background-color}.clr-toggle-wrapper input[type=checkbox]+label::after{position:absolute;display:inline-block;content:"";height:.7rem;width:.7rem;border-width:.05rem;border-color:#fafafa;border-color:var(--clr-toggle-handle-bg-color,#fafafa);border-style:solid;border-radius:50%;background-color:#fafafa;background-color:var(--clr-toggle-handle-bg-color,#fafafa);top:.25rem;right:0;left:-2rem;-webkit-transition-duration:.15s;transition-duration:.15s;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;-webkit-transition-property:right,left;transition-property:right,left}.clr-toggle-wrapper input[type=checkbox]:checked+label::after{right:-2rem;left:-1.25rem;-webkit-transition-duration:.15s;transition-duration:.15s;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;-webkit-transition-property:right,left;transition-property:right,left}.clr-toggle-wrapper.disabled label{opacity:.4;cursor:not-allowed}.clr-toggle-wrapper.disabled input[type=checkbox]:checked+label::before{border-color:#ccc;border-color:var(--clr-toggle-disabled-on-border-color,#ccc);background-color:#ccc;background-color:var(--clr-toggle-disabled-on-border-color,#ccc)}.clr-toggle-wrapper input[type=checkbox]:disabled+label{cursor:not-allowed}.clr-toggle-wrapper input[type=checkbox]:disabled+label::before{background-color:#fff;background-color:var(--clr-toggle-disabled-off-bg-color,#fff);border-color:#ccc;border-color:var(--clr-toggle-disabled-off-border-color,#ccc)}.clr-toggle-wrapper input[type=checkbox]:disabled+label::after{background-color:#fff;background-color:var(--clr-toggle-disabled-off-bg-color,#fff);border-width:.1rem;border-style:solid;border-color:#ccc;border-color:var(--clr-toggle-disabled-off-handle-border-color,#ccc);height:.9rem;width:.9rem;top:.15rem}.clr-toggle-wrapper input[type=checkbox]:checked:disabled+label::before{border-color:#ccc;border-color:var(--clr-toggle-disabled-on-border-color,#ccc);background-color:#ccc;background-color:var(--clr-toggle-disabled-on-bg-color,#ccc)}.clr-toggle-wrapper input[type=checkbox]:checked:disabled+label::after{border-color:#fff;border-color:var(--clr-toggle-disabled-on-handle-border-color,#fff);height:.7rem;width:.7rem;top:.25rem;left:-1.25rem}.clr-toggle-wrapper input[type=checkbox]:disabled+label::after{left:-2.1rem}.clr-toggle-wrapper.right-label label{margin-left:2.1rem;margin-right:0}.clr-toggle-wrapper.right-label input[type=checkbox]+label::before{right:0;left:-2.1rem}.clr-toggle-wrapper.right-label input[type=checkbox]+label::after{right:0;left:-2rem;-webkit-transition-property:left;transition-property:left}.clr-toggle-wrapper.right-label input[type=checkbox]:checked+label::after{left:-1.25rem;-webkit-transition-property:left;transition-property:left}.clr-toggle-wrapper .clr-control-label{display:block;font-weight:400;line-height:1.2rem}.clr-control-inline .clr-toggle-wrapper .clr-control-label{display:inline-block;margin-right:.6rem}.clr-toggle-right label{display:inline-block;margin-right:2.1rem;margin-left:0}.clr-toggle-right input[type=checkbox]+label::before{left:unset;right:-2.1rem}.clr-toggle-right input[type=checkbox]+label::after{left:unset;right:-1.25rem;-webkit-transition-property:right;transition-property:right}.clr-toggle-right input[type=checkbox]:checked+label::after{left:unset;right:-2rem;-webkit-transition-property:right;transition-property:right}.clr-toggle-right input[type=checkbox]:disabled+label::after{left:unset;right:-1.3rem}.clr-toggle-right input[type=checkbox]:checked:disabled+label::after{left:unset;right:-2rem}.clr-toggle-right .clr-control-inline .clr-toggle-wrapper .clr-control-label{margin-right:2.7rem}.clr-range-wrapper{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;height:.7rem;white-space:nowrap}.clr-range-wrapper .fill-input{position:absolute;left:0;display:inline-block;height:.2rem;pointer-events:none;cursor:pointer;z-index:10;background-color:#0072a3;background-color:var(--clr-forms-range-progress-fill-color,#0072a3)}.clr-range{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;height:.7rem}.clr-range:disabled,.clr-range:disabled+.fill-input{pointer-events:auto;cursor:not-allowed}input[type=range]{padding:0;-webkit-appearance:none;left:0;height:.2rem;background-color:#e8e8e8;background-color:var(--clr-forms-range-track-color,#e8e8e8)}input[type=range]::-webkit-slider-runnable-track{height:.2rem;cursor:pointer;background-color:#e8e8e8;background-color:var(--clr-forms-range-track-color,#e8e8e8)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-.25rem;border-radius:50%;height:.7rem;width:.7rem;background-color:#0072a3;background-color:var(--clr-forms-range-progress-fill-color,#0072a3)}input[type=range]::-moz-range-track{height:.2rem;cursor:pointer;background-color:#e8e8e8;background-color:var(--clr-forms-range-track-color,#e8e8e8)}input[type=range]::-moz-range-thumb{border:0;margin-top:-.25rem;border-radius:50%;height:.7rem;width:.7rem;background-color:#0072a3;background-color:var(--clr-forms-range-progress-fill-color,#0072a3)}@supports (-ms-ime-align:auto){.clr-range-wrapper .fill-input{display:none}.clr-range-wrapper.progress-fill input[type=range]::-ms-fill-lower{height:.2rem;background-color:#0072a3;background-color:var(--clr-forms-range-progress-fill-color,#0072a3)}input[type=range]{border:0;margin:0;-webkit-appearance:none;left:0;height:.7rem}input[type=range]::-ms-track{margin:0;border:0;height:.2rem;cursor:pointer;background-color:#e8e8e8;background-color:var(--clr-forms-range-track-color,#e8e8e8)}input[type=range]::-ms-thumb{border:0;margin-top:0;border-radius:50%;height:.7rem;width:.7rem;background-color:#0072a3;background-color:var(--clr-forms-range-progress-fill-color,#0072a3)}}_:-ms-fullscreen .clr-range-wrapper .fill-input,:root .clr-range-wrapper .fill-input{display:none}_:-ms-fullscreen .clr-range-wrapper.progress-fill input[type=range]::-ms-fill-lower,:root .clr-range-wrapper.progress-fill input[type=range]::-ms-fill-lower{height:.2rem;background-color:#0072a3;background-color:var(--clr-forms-range-progress-fill-color,#0072a3)}_:-ms-fullscreen input[type=range]::-ms-tooltip,:root input[type=range]::-ms-tooltip{visibility:hidden}_:-ms-fullscreen input[type=range],:root input[type=range]{border:0;margin:0;-webkit-appearance:none;left:0;height:.7rem}_:-ms-fullscreen input[type=range]::-ms-track,:root input[type=range]::-ms-track{border:0;margin:0;height:.2rem;cursor:pointer;background-color:#e8e8e8;background-color:var(--clr-forms-range-track-color,#e8e8e8)}_:-ms-fullscreen input[type=range]::-ms-thumb,:root input[type=range]::-ms-thumb{border:0;margin-top:0;border-radius:50%;height:.7rem;width:.7rem;background-color:#0072a3;background-color:var(--clr-forms-range-progress-fill-color,#0072a3)}input[clrDatalist]::-webkit-calendar-picker-indicator{display:none}clr-datalist-container .clr-input-group{padding-right:0}:root{--clr-calendar-background-color:var(--clr-color-neutral-0);--clr-calendar-border-color:var(--clr-color-neutral-400);--clr-datepicker-trigger-color:var(--clr-color-action-600);--clr-datepicker-trigger-hover-color:var(--clr-color-action-800);--clr-calendar-btn-color:var(--clr-color-action-600);--clr-calendar-btn-hover-focus-color:var(--clr-global-hover-color);--clr-calendar-picker-btn-font-size:0.9rem;--clr-calendar-picker-btn-font-weight:200;--clr-calendar-today-date-cell-color:var(--clr-color-neutral-1000);--clr-calendar-today-date-cell-font-weight:600;--clr-calendar-active-cell-background-color:var(--clr-global-selection-color);--clr-calendar-active-focus-cell-background-color:var(--clr-global-selection-color);--clr-calendar-active-cell-color:var(--clr-color-neutral-1000);--clr-day-font-size:0.6rem}.date-container{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;white-space:nowrap}.datepicker-trigger{height:1.8rem;min-width:1.8rem;padding:0 0;margin:0!important;color:inherit;border:none;border-radius:.15rem;border-radius:var(--clr-global-borderradius,.15rem);background:0 0;cursor:pointer;line-height:1.8rem}.datepicker-trigger .datepicker-trigger-icon{fill:#0072a3;fill:var(--clr-datepicker-trigger-color,#0072a3)}.datepicker-trigger .datepicker-trigger-icon:hover{fill:#00567a;fill:var(--clr-datepicker-trigger-hover-color,#00567a)}.datepicker-trigger:disabled{cursor:not-allowed}.clr-form-control .datepicker-trigger{line-height:1.1rem;height:1.1rem}.date-input{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.datepicker{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:.6rem;margin-top:.3rem;width:13.9rem;height:15.7rem;background:#fff;background:var(--clr-calendar-background-color,#fff);border:.05rem solid;border-color:#ccc;border-color:var(--clr-calendar-border-color,#ccc);border-radius:.15rem;border-radius:var(--clr-global-borderradius,.15rem);-webkit-box-shadow:0 .05rem .15rem rgba(140,140,140,.25);box-shadow:0 .05rem .15rem rgba(140,140,140,.25);-webkit-box-shadow:0 .05rem .15rem var(--clr-popover-box-shadow-color,rgba(140,140,140,.25));box-shadow:0 .05rem .15rem var(--clr-popover-box-shadow-color,rgba(140,140,140,.25));overflow:hidden;z-index:1060}.calendar-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.calendar-switchers,.year-switchers{-webkit-transform:translateY(-.1rem);transform:translateY(-.1rem);display:-webkit-box;display:-ms-flexbox;display:flex}.year-switchers{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:5.4rem;-ms-flex-item-align:center;align-self:center}.calendar-table{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;width:100%}.calendar-cell,.calendar-table .calendar-cell{height:1.8rem;width:1.8rem;min-height:1.8rem;min-width:1.8rem;padding:0;text-align:center}.day{display:inline-block}.weekdays{-webkit-box-flex:0;-ms-flex:0 0 1.8rem;flex:0 0 1.8rem}.weekday{font-size:.6rem;font-size:var(--clr-day-font-size,.6rem);font-weight:600}.calendar-btn{height:1.8rem;min-width:1.8rem;padding:0 0;margin:0!important;color:inherit;border:none;border-radius:.15rem;border-radius:var(--clr-global-borderradius,.15rem);background:0 0;cursor:pointer;line-height:1.8rem;font-size:.9rem;font-size:var(--clr-calendar-picker-btn-font-size,.9rem);font-weight:200;font-weight:var(--clr-calendar-picker-btn-font-weight,200)}.calendar-btn:focus,.calendar-btn:hover{background:#e8e8e8;background:var(--clr-calendar-btn-hover-focus-color,#e8e8e8)}.calendar-btn:focus{outline:0}.day-btn{height:1.8rem;min-width:1.8rem;padding:0 0;margin:0!important;color:inherit;border:none;border-radius:.15rem;border-radius:var(--clr-global-borderradius,.15rem);background:0 0;cursor:pointer;line-height:1.8rem;width:100%;color:inherit}.day-btn:focus,.day-btn:hover{background:#e8e8e8;background:var(--clr-calendar-btn-hover-focus-color,#e8e8e8)}.day-btn:focus{outline:0}.day-btn.is-today{color:#000;color:var(--clr-calendar-today-date-cell-color,#000);font-weight:600;font-weight:var(--clr-calendar-today-date-cell-font-weight,600)}.day-btn.is-excluded{opacity:.4}.day-btn.is-excluded:hover{background:0 0}.day-btn.is-selected{background:#d8e3e9;background:var(--clr-calendar-active-cell-background-color,#d8e3e9);color:#000;color:var(--clr-calendar-active-cell-color,#000)}.day-btn.is-selected:focus{background:#d8e3e9;background:var(--clr-calendar-active-focus-cell-background-color,#d8e3e9)}.day-btn.is-disabled{opacity:.4;pointer-events:none}.day-btn.is-disabled:hover{background:0 0}.calendar-pickers{display:-webkit-box;display:-ms-flexbox;display:flex}.switcher{color:#0072a3;color:var(--clr-calendar-btn-color,#0072a3)}.switcher cds-icon{height:.9rem;width:.9rem}.monthpicker-trigger,.yearpicker-trigger{min-width:2.4rem;max-width:3rem;color:#0072a3;color:var(--clr-calendar-btn-color,#0072a3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.monthpicker,.yearpicker{min-height:14.4rem}.monthpicker,.yearpicker,.years{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.monthpicker,.years{-ms-flex-wrap:wrap;flex-wrap:wrap}.month,.year{height:2.4rem;min-width:2.4rem;padding:0 .6rem;margin:0!important;color:inherit;border:none;border-radius:.15rem;border-radius:var(--clr-global-borderradius,.15rem);background:0 0;cursor:pointer;line-height:1.8rem;width:6.3rem;font-size:.9rem;font-weight:200;outline-offset:-.25rem}.month:focus,.month:hover,.year:focus,.year:hover{background:#e8e8e8;background:var(--clr-calendar-btn-hover-focus-color,#e8e8e8)}.month:focus,.year:focus{outline:0}.month.is-disabled,.year.is-disabled{opacity:.4;pointer-events:none}.month.is-disabled:hover,.year.is-disabled:hover{background:0 0}.month.is-selected,.year.is-selected{background:#d8e3e9;background:var(--clr-calendar-active-cell-background-color,#d8e3e9);color:#000;color:var(--clr-calendar-active-cell-color,#000)}.month.is-selected:focus,.year.is-selected:focus{background:#d8e3e9;background:var(--clr-calendar-active-focus-cell-background-color,#d8e3e9)}.month{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.year{text-align:center}:root{--clr-combobox-trigger-color:var(--clr-color-neutral-500);--clr-combobox-font-size:0.65rem;--clr-combobox-border-color:#e8e8e8;--clr-combobox-border-radius:0.15rem;--clr-combobox-input-background:#f2f2f2;--clr-combobox-pill-background-color:white;--clr-combobox-pill-border-color:#e8e8e8;--clr-combobox-pill-border-radius:0.15rem;--clr-combobox-pill-font-color:#454545;--clr-combobox-filter-highlight:#454545}.clr-combobox-form-control{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.clr-combobox-form-control .clr-error .clr-validate-icon{margin-left:0}.clr-focus-indicator{background-color:#0072a3;background-color:var(--clr-forms-focused-color,#0072a3);height:.1rem;width:0;-webkit-transition:width .2s ease;transition:width .2s ease;position:absolute;bottom:-.05rem;left:0;border-bottom-left-radius:.15rem;border-bottom-left-radius:var(--clr-combobox-border-radius,.15rem);border-bottom-right-radius:.15rem;border-bottom-right-radius:var(--clr-combobox-border-radius,.15rem)}.clr-focus{width:100%}.clr-error .clr-focus-indicator{background-color:#c21d00;background-color:var(--clr-forms-invalid-color,#c21d00)}.clr-combobox-wrapper{position:relative;padding:0 1.2rem 0 .3rem;min-height:1.2rem;min-width:8.4rem;font-size:.65rem;font-size:var(--clr-combobox-font-size,.65rem);color:#000;color:var(--clr-forms-text-color,#000);border-bottom:.05rem solid;border-bottom-color:#b3b3b3;border-bottom-color:var(--clr-forms-border-color,#b3b3b3);display:inline-block;background-color:#f2f2f2;background-color:var(--clr-combobox-input-background-color,#f2f2f2);border:.05rem solid #e8e8e8;border-bottom:.05rem solid #b3b3b3;border-radius:.15rem;border-radius:var(--clr-combobox-border-radius,.15rem)}.clr-combobox-wrapper.multi{min-width:18rem;padding-bottom:.15rem}.clr-combobox-wrapper .clr-input.clr-combobox-input:focus{background:0 0}.clr-combobox-wrapper.invalid{border-bottom-color:#c21d00}.clr-combobox-wrapper .clr-combobox-input{background:0 0;border-bottom:none}.clr-combobox-wrapper .clr-combobox-remove-btn{background:0 0;border:none;cursor:pointer;padding:.15rem .15rem;color:#454545}.clr-combobox-wrapper .label-combobox-pill{margin:.15rem .3rem 0 0;background-color:#fff;background-color:var(--clr-combobox-pill-background-color,#fff);border-width:.05rem;border-style:solid;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;border-radius:.15rem;border-radius:var(--clr-combobox-pill-border-radius,.15rem);border-color:#e8e8e8;border-color:var(--clr-combobox-pill-border-color,#e8e8e8);padding:0 .1rem 0 .2rem}.clr-combobox-wrapper .label-combobox-pill .clr-combobox-pill-content{color:#454545;color:var(--clr-combobox-pill-font-color,#454545);font-size:.55rem;font-weight:400;padding:0 .4rem 0 .2rem}.clr-combobox-wrapper .label-combobox-pill cds-icon[shape=window-close]{color:#454545;color:var(--clr-combobox-pill-font-color,#454545)}.clr-combobox-wrapper .clr-combobox-input-wrapper{border:none;background:0 0}.clr-combobox-trigger{width:1.2rem;margin:auto;position:absolute;top:0;bottom:0;right:0;background:0 0;border:none;color:currentColor;cursor:pointer;outline:0}.clr-combobox-trigger:disabled{color:var(--clr-btn-link-disabled-color,#666);opacity:.4}.clr-combobox-trigger cds-icon[shape=angle]{color:#454545;color:var(--clr-combobox-pill-font-color,#454545)}.clr-combobox-options{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;top:100%;left:0;min-width:6rem;max-width:18rem;background:#fff;background:var(--clr-dropdown-bg-color,#fff);border-width:.05rem;border-width:var(--clr-global-borderwidth,.05rem);border-style:solid;border-color:#ccc;border-color:var(--clr-dropdown-border-color,#ccc);border-radius:.15rem;border-radius:var(--clr-global-borderradius,.15rem);-webkit-box-shadow:0 .05rem .15rem rgba(140,140,140,.25);box-shadow:0 .05rem .15rem rgba(140,140,140,.25);-webkit-box-shadow:0 .05rem .15rem var(--clr-dropdown-box-shadow,rgba(140,140,140,.25));box-shadow:0 .05rem .15rem var(--clr-dropdown-box-shadow,rgba(140,140,140,.25));margin-top:.1rem;padding:.6rem 0;visibility:hidden;z-index:1060;position:static;max-height:12rem;overflow-y:scroll;visibility:visible}.clr-combobox-options .clr-combobox-options-loading{padding:.15rem 1.2rem}.clr-combobox-options .clr-combobox-options-loading .clr-combobox-options-loading-text{padding-left:.3rem}.clr-combobox-options .clr-combobox-options-empty-text{padding-left:.6rem}.clr-combobox-option{color:#666;color:var(--clr-dropdown-item-color,#666);font-size:.7rem;font-weight:400;font-weight:var(--clr-dropdown-item-font-weight,400);letter-spacing:normal;background:0 0;border:0;cursor:pointer;display:block;height:auto;line-height:inherit;margin:0;width:100%;text-transform:none}.clr-combobox-option:hover{background-color:#e8e8e8;background-color:var(--clr-dropdown-bg-hover-color,#e8e8e8);color:#666;color:var(--clr-dropdown-item-color,#666);text-decoration:none}.clr-combobox-option.active{background:#d8e3e9;background:var(--clr-dropdown-selection-color,#d8e3e9);color:#000;color:var(--clr-dropdown-active-text-color,#000)}.clr-combobox-option:active{-webkit-box-shadow:none;box-shadow:none}.clr-combobox-option:focus{z-index:inherit}.clr-combobox-option.disabled,.clr-combobox-option:disabled{cursor:not-allowed;opacity:.4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.clr-combobox-option.disabled:hover,.clr-combobox-option:disabled:hover{background:0 0}.clr-combobox-option.disabled:active,.clr-combobox-option:disabled:active{background:0 0;-webkit-box-shadow:none;box-shadow:none}.clr-combobox-option.clr-focus{background-color:#e8e8e8;background-color:var(--clr-dropdown-bg-hover-color,#e8e8e8)}.clr-combobox-options .clr-combobox-option{padding:.15rem 1.2rem}@media screen and (max-width:576px){.clr-combobox-options .clr-combobox-option{padding:.3rem 1.2rem}}.clr-combobox-options .clr-combobox-option.active,.clr-combobox-options .clr-combobox-option:hover{color:#666;color:var(--clr-dropdown-item-color,#666)}.clr-combobox-disabled{color:#b3b3b3;color:var(--clr-forms-text-disabled-color,#b3b3b3);cursor:not-allowed}.clr-combobox-disabled .clr-combobox-input,.clr-combobox-disabled .clr-combobox-remove-btn,.clr-combobox-disabled .clr-combobox-trigger{cursor:not-allowed}.clr-filter-highlight b{font-weight:500;color:#454545;color:var(--clr-combobox-filter-highlight,#454545)}:root{--clr-stack-view-border-radius:0.15rem;--clr-stack-view-border-color:var(--clr-color-neutral-400);--clr-stack-view-bg-color:var(--clr-color-neutral-50);--clr-stack-view-stack-block-border-bottom:var(--clr-color-neutral-300);--clr-stack-view-color:#666666;--clr-stack-view-stack-block-label-text-color:var(--clr-global-font-color);--clr-stack-view-border-box-color:var(--clr-color-neutral-300);--clr-stack-block-changed-border-top-color:var(--clr-color-action-600);--clr-stack-view-stack-block-label-and-content-bg-color:var(--clr-color-neutral-50);--clr-stack-view-stack-children-stack-block-border-bottom-color:var(--clr-color-neutral-200);--clr-stack-view-stack-children-stack-block-label-and-content-bg-color:var(--clr-color-neutral-0);--clr-stack-view-stack-block-expanded-bg-color:var(--clr-global-selection-color);--clr-stack-view-stack-block-expandable-hover:var(--clr-color-neutral-200);--clr-stack-view-stack-block-content-text-color:inherit;--clr-stack-view-stack-block-expanded-text-color:var(--clr-color-neutral-1000);--clr-stack-view-stack-block-caret-color:var(--clr-global-font-color)}.stack-header{font-weight:400;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.stack-header .stack-title{display:block;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:.3rem 0}.stack-header .stack-actions{display:block;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.stack-header .stack-actions .stack-action{margin:0 0 .3rem .6rem}.stack-header .stack-actions .stack-action.btn{min-width:0;padding:0 .6rem}.stack-header .stack-actions .stack-action.btn-link{margin-right:-.6rem}.stack-view{color:#666;color:var(--clr-stack-view-color,#666);font-size:.65rem;font-weight:400;line-height:1.2rem;letter-spacing:normal;margin-top:0;border-width:.05rem;border-style:solid;border-color:#ccc;border-color:var(--clr-stack-view-border-color,#ccc);border-radius:.15rem;border-radius:var(--clr-stack-view-border-radius,.15rem);overflow-y:auto;background-color:#fafafa;background-color:var(--clr-stack-view-bg-color,#fafafa);word-wrap:break-word;-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.stack-view dd,.stack-view dt{-webkit-margin-start:0;-moz-margin-start:0;margin-inline-start:0;margin-left:0}.stack-view .stack-block{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;border-bottom-width:.05rem;border-bottom-width:var(--clr-global-borderwidth,.05rem);border-bottom-style:solid;border-bottom-color:#dedede;border-bottom-color:var(--clr-stack-view-stack-block-border-bottom,#dedede);overflow-y:hidden}.stack-view>.stack-block:last-child,.stack-view>:last-child .stack-block:last-of-type{border-bottom:none;-webkit-box-shadow:0 .05rem 0 #dedede;box-shadow:0 .05rem 0 #dedede;-webkit-box-shadow:0 .05rem 0 var(--clr-stack-view-border-box-color);box-shadow:0 .05rem 0 var(--clr-stack-view-border-box-color)}.stack-view .stack-block-changed>.stack-block-label{margin-left:-.45rem}.stack-view .stack-block-changed::before{content:" ";position:relative;height:0;width:0;border-top:.45rem solid;border-top-color:#0072a3;border-top-color:var(--clr-stack-block-changed-border-top-color,#0072a3);border-right:.45rem solid transparent}.stack-view .stack-block-label{padding:.3rem .6rem;background-color:#fafafa;background-color:var(--clr-stack-view-stack-block-label-and-content-bg-color,#fafafa)}.stack-view .stack-block-content{background-color:inherit}.stack-view .stack-block-caret{-ms-flex-item-align:center;align-self:center}.stack-view .stack-block-label{color:#666;color:var(--clr-stack-view-stack-block-label-text-color,#666);font-size:.65rem;font-weight:500;line-height:1.2rem;letter-spacing:normal;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex}.stack-view .stack-block-label::before{display:inline-block;content:"";float:left;height:.7rem;width:.7rem;margin:.35rem .24rem 0 0;text-align:center}.stack-view .stack-block-label:focus{outline:.25rem auto -webkit-focus-ring-color}.stack-view .stack-view-key{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;max-width:40%}.stack-view .stack-block-caret{height:.7rem;width:.7rem;margin-right:.24rem;fill:#666;fill:var(--clr-stack-view-stack-block-caret-color,#666)}.stack-view .stack-block-content{color:inherit;color:var(--clr-stack-view-stack-block-content-text-color,inherit);-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;width:60%;margin-bottom:0;font-weight:400}.stack-view .stack-block-content>:first-child{margin-top:0}.stack-view .stack-block-content>:last-child{margin-bottom:0}.stack-view .stack-children{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:100%}.stack-view .stack-children .stack-block{border-bottom-color:#e8e8e8;border-bottom-color:var(--clr-stack-view-stack-children-stack-block-border-bottom-color,#e8e8e8)}.stack-view .stack-children>.stack-block:last-child,.stack-view .stack-children>:last-child .stack-block:last-of-type{border-bottom:none;-webkit-box-shadow:0 .05rem 0 #dedede;box-shadow:0 .05rem 0 #dedede;-webkit-box-shadow:0 .05rem 0 var(--clr-stack-view-border-box-color);box-shadow:0 .05rem 0 var(--clr-stack-view-border-box-color)}.stack-view .stack-children .stack-block-content,.stack-view .stack-children .stack-block-label{background-color:#fff;background-color:var(--clr-stack-view-stack-children-stack-block-label-and-content-bg-color,#fff)}.stack-view .stack-children .stack-block-label{padding-left:1.2rem}.stack-view .stack-block-expandable>.stack-block-label{cursor:pointer}.stack-view .stack-block-expandable>.stack-block-label::before{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%3E.cls-1%7Bfill%3A%23666666%3B%7D%3C%2Fstyle%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M6%2C9L1.2%2C4.2a0.68%2C0.68%2C0%2C0%2C1%2C1-1L6%2C7.08%2C9.84%2C3.24a0.68%2C0.68%2C0%2C1%2C1%2C1%2C1Z%22%2F%3E%0A%3C%2Fsvg%3E%0A");background-repeat:no-repeat;background-size:contain;vertical-align:middle;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);height:.6rem;width:.6rem}.stack-view .stack-block-expandable>.stack-block-content,.stack-view .stack-block-expandable>.stack-block-label{-webkit-transition:background-color .2s ease-in-out,color .2s ease-in-out;transition:background-color .2s ease-in-out,color .2s ease-in-out}.stack-view .stack-block-expandable:hover:not(.stack-block-expanded)>.stack-block-label{background-color:#e8e8e8;background-color:var(--clr-stack-view-stack-block-expandable-hover,#e8e8e8)}.stack-view .stack-block-expanded>.stack-block-label::before{-webkit-transform:rotate(0);transform:rotate(0)}.stack-view .stack-block-expanded>.stack-block-label{background-color:#d8e3e9;background-color:var(--clr-stack-view-stack-block-expanded-bg-color,#d8e3e9);color:#000;color:var(--clr-stack-view-stack-block-expanded-text-color,#000)}.stack-view .select,.stack-view input[type=date],.stack-view input[type=datetime-local],.stack-view input[type=email],.stack-view input[type=number],.stack-view input[type=password],.stack-view input[type=tel],.stack-view input[type=text],.stack-view input[type=time],.stack-view input[type=url]{display:inline-block;vertical-align:top;margin-right:.6rem;margin-bottom:-.95rem}.stack-view .select select,.stack-view input[type=date],.stack-view input[type=datetime-local],.stack-view input[type=email],.stack-view input[type=number],.stack-view input[type=password],.stack-view input[type=tel],.stack-view input[type=text],.stack-view input[type=time],.stack-view input[type=url]{height:1.2rem}.stack-view .stack-block-expandable>.stack-block-content input[type=date],.stack-view .stack-block-expandable>.stack-block-content input[type=datetime-local],.stack-view .stack-block-expandable>.stack-block-content input[type=email],.stack-view .stack-block-expandable>.stack-block-content input[type=number],.stack-view .stack-block-expandable>.stack-block-content input[type=password],.stack-view .stack-block-expandable>.stack-block-content input[type=tel],.stack-view .stack-block-expandable>.stack-block-content input[type=text],.stack-view .stack-block-expandable>.stack-block-content input[type=time],.stack-view .stack-block-expandable>.stack-block-content input[type=url]{-webkit-transition:background-size .2s ease,border-bottom-color .2s ease-in-out;transition:background-size .2s ease,border-bottom-color .2s ease-in-out}.stack-view .stack-block-expandable>.stack-block-content .select select{-webkit-transition:border-bottom-color .2s ease-in-out;transition:border-bottom-color .2s ease-in-out}.stack-view .stack-block-expandable>.stack-block-content .select::after{-webkit-transition:color .2s ease-in-out;transition:color .2s ease-in-out}.stack-view .stack-block-expanded>.stack-block-content input[type=date],.stack-view .stack-block-expanded>.stack-block-content input[type=datetime-local],.stack-view .stack-block-expanded>.stack-block-content input[type=email],.stack-view .stack-block-expanded>.stack-block-content input[type=number],.stack-view .stack-block-expanded>.stack-block-content input[type=password],.stack-view .stack-block-expanded>.stack-block-content input[type=tel],.stack-view .stack-block-expanded>.stack-block-content input[type=text],.stack-view .stack-block-expanded>.stack-block-content input[type=time],.stack-view .stack-block-expanded>.stack-block-content input[type=url]{border-bottom-color:#8c8c8c;border-bottom-color:var(--clr-color-neutral-600,#8c8c8c);background:-webkit-gradient(linear,left top,left bottom,color-stop(95%,transparent),color-stop(95%,var(--clr-color-action-600,#0072a3))) no-repeat;background:linear-gradient(to bottom,transparent 95%,var(--clr-color-action-600,#0072a3) 95%) no-repeat;background-size:0 100%;-webkit-transition:background-size .2s ease;transition:background-size .2s ease}.stack-view .stack-block-expanded>.stack-block-content input[type=date].clr-focus,.stack-view .stack-block-expanded>.stack-block-content input[type=date]:focus,.stack-view .stack-block-expanded>.stack-block-content input[type=datetime-local].clr-focus,.stack-view .stack-block-expanded>.stack-block-content input[type=datetime-local]:focus,.stack-view .stack-block-expanded>.stack-block-content input[type=email].clr-focus,.stack-view .stack-block-expanded>.stack-block-content input[type=email]:focus,.stack-view .stack-block-expanded>.stack-block-content input[type=number].clr-focus,.stack-view .stack-block-expanded>.stack-block-content input[type=number]:focus,.stack-view .stack-block-expanded>.stack-block-content input[type=password].clr-focus,.stack-view .stack-block-expanded>.stack-block-content input[type=password]:focus,.stack-view .stack-block-expanded>.stack-block-content input[type=tel].clr-focus,.stack-view .stack-block-expanded>.stack-block-content input[type=tel]:focus,.stack-view .stack-block-expanded>.stack-block-content input[type=text].clr-focus,.stack-view .stack-block-expanded>.stack-block-content input[type=text]:focus,.stack-view .stack-block-expanded>.stack-block-content input[type=time].clr-focus,.stack-view .stack-block-expanded>.stack-block-content input[type=time]:focus,.stack-view .stack-block-expanded>.stack-block-content input[type=url].clr-focus,.stack-view .stack-block-expanded>.stack-block-content input[type=url]:focus{border-bottom-color:#0072a3;border-bottom-color:var(--clr-color-action-600,#0072a3);background-size:100% 100%}.stack-view .stack-block-expanded>.stack-block-content .select select{border-bottom-color:#8c8c8c;border-bottom-color:var(--clr-color-neutral-600,#8c8c8c)}.stack-view .stack-block-expanded>.stack-block-content .select::after{color:#8c8c8c;color:var(--clr-color-neutral-600,#8c8c8c)}.modal .stack-view{height:55vh;margin-bottom:0}.stack-view clr-stack-block.stack-block-expandable .stack-block-label::before{content:none}.stack-view .stack-children .stack-block-label,.stack-view .stack-children clr-stack-block .stack-block-label{padding-left:1.8rem}.stack-view .stack-children .stack-block-label::before,.stack-view .stack-children clr-stack-block .stack-block-label::before{display:none}.stack-view .stack-children .stack-block-content,.stack-view .stack-children clr-stack-block .stack-block-content{padding-left:.36rem}:root{--clr-tree-border-radius:var(--clr-global-borderradius);--clr-tree-node-caret-link-hover-color:var(--clr-color-neutral-1000);--clr-tree-link-hover-color:var(--clr-custom-links-hover-color);--clr-tree-link-selection-color:var(--clr-global-selection-color);--clr-tree-link-text-color:var(--clr-color-neutral-700);--clr-tree-node-caret-color:var(--clr-color-neutral-500)}.clr-tree-node{display:block}.clr-tree-node-content-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.clr-treenode-content{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0;border-top-left-radius:.15rem;border-top-left-radius:var(--clr-tree-border-radius,.15rem);border-bottom-left-radius:.15rem;border-bottom-left-radius:var(--clr-tree-border-radius,.15rem);line-height:1.62rem}.clr-treenode-content:first-child{padding-left:1.62rem}.clr-treenode-content cds-icon{height:.8rem;width:.8rem;margin-right:.3rem;vertical-align:middle}.clr-treenode-caret{-webkit-box-flex:0;-ms-flex:0 0 1.62rem;flex:0 0 1.62rem;padding:0;margin:0;height:1.62rem;width:1.62rem;background:0 0;border:none;color:#b3b3b3;color:var(--clr-tree-node-caret-color,#b3b3b3);cursor:pointer;outline-offset:-.25rem}.clr-treenode-caret:hover{color:#000;color:var(--clr-tree-node-caret-link-hover-color,#000)}.clr-tree-node-caret-icon{height:.8rem;width:.8rem;vertical-align:middle}.clr-treenode-spinner-container{height:1.62rem;width:1.62rem;padding:.41rem}.clr-treenode-spinner{height:.8rem;width:.8rem;min-height:.8rem;min-width:.8rem}.clr-treenode-children{margin-left:1.17rem;will-change:height;overflow-y:hidden}.clr-treenode-link{display:inline-block;height:100%;width:100%;margin:0;padding:0 0 0 .3rem;background:0 0;border:0;color:#666;color:var(--clr-tree-link-text-color,#666);cursor:pointer;line-height:inherit;text-align:left}.clr-treenode-link:active,.clr-treenode-link:hover,.clr-treenode-link:link,.clr-treenode-link:visited{color:inherit}.clr-treenode-link:focus,.clr-treenode-link:hover{background:#e8e8e8;background:var(--clr-tree-link-hover-color,#e8e8e8);text-decoration:none}.clr-treenode-link:focus{outline:0}.clr-treenode-link.active{background:#d8e3e9;background:var(--clr-tree-link-selection-color,#d8e3e9);color:#000;color:var(--clr-tree-node-caret-link-hover-color,#000)}.clr-tree-node-content-container>.clr-checkbox-wrapper{height:1.62rem;width:1.62rem;padding-top:.21rem;padding-left:.41rem}.clr-tree-node-content-container>.clr-checkbox-wrapper:first-child{margin-left:1.62rem}.clr-treenode-content .label{margin-left:.3rem}@supports (-ms-ime-align:auto){.clr-treenode-content .label{margin-left:.15rem}}_:-ms-input-placeholder .clr-treenode-content .label,:root .clr-treenode-content .label{margin-left:.15rem}:root{--clr-datagrid-font-color:#acbac3;--clr-datagrid-default-border-color:var(--clr-color-neutral-400);--clr-datagrid-icon-color:var(--clr-color-neutral-600);--clr-datagrid-row-hover:var(--clr-color-neutral-200);--clr-datagrid-row-hover-font-color:var(--clr-color-neutral-1000);--clr-datagrid-action-toggle:var(--clr-color-neutral-700);--clr-datagrid-pagination-btn-color:var(--clr-color-neutral-700);--clr-datagrid-pagination-btn-disabled-color:var(--clr-color-neutral-600);--clr-datagrid-pagination-input-border-color:var(--clr-datagrid-default-border-color);--clr-datagrid-pagination-input-border-focus-color:var(--clr-color-action-400);--clr-datagrid-popover-bg-color:var(--clr-color-neutral-0);--clr-datagrid-popover-border-color:var(--clr-datagrid-default-border-color);--clr-datagrid-action-popover-hover-color:var(--clr-color-neutral-200);--clr-datagrid-row-selected:var(--clr-color-neutral-1000);--clr-datagrid-loading-background:rgba(255, 255, 255, 0.6);--clr-datagrid-popovers-box-shadow-color:rgba(140, 140, 140, 0.25);--clr-datagrid-column-switch-header-font-color:var(--clr-color-neutral-500);--clr-datagrid-column-switch-header-font-hover-color:var(--clr-color-action-600);--clr-datagrid-detail-caret-icon-open-bg-color:var(--clr-color-action-600);--clr-datagrid-detail-caret-icon-open-icon-color:var(--clr-color-neutral-0);--clr-datagrid-placeholder-color:var(--clr-color-neutral-500);--clr-datagrid-placeholder-font-size:0.8rem;--clr-datagrid-pagination-btn-disabled-opacity:0.56}.datagrid{border-collapse:separate;border-style:solid;border-width:.05rem;border-width:var(--clr-table-borderwidth,.05rem);border-color:#ccc;border-color:var(--clr-table-border-color,#ccc);border-radius:.15rem;border-radius:var(--clr-table-border-radius,.15rem);background-color:#fff;background-color:var(--clr-table-bgcolor,#fff);color:#666;color:var(--clr-table-font-color,#666);margin:0;margin-top:1.2rem;max-width:100%;width:100%}.datagrid .datagrid-cell,.datagrid .datagrid-column{font-size:.65rem;line-height:.7rem;border-top-style:solid;border-top-width:.05rem;border-top-width:var(--clr-table-borderwidth,.05rem);border-top-color:#e8e8e8;border-top-color:var(--clr-tablerow-bordercolor,#e8e8e8);padding:.55rem .6rem .55rem;text-align:center;vertical-align:top}.datagrid .datagrid-cell.left,.datagrid .datagrid-column.left{text-align:left}.datagrid .datagrid-cell.left:first-child,.datagrid .datagrid-column.left:first-child{padding-left:.3rem}.datagrid .datagrid-column{color:#666;color:var(--clr-thead-color,#666);font-size:.55rem;font-weight:600;letter-spacing:.03em;background-color:#fafafa;background-color:var(--clr-thead-bgcolor,#fafafa);vertical-align:bottom;border-bottom-style:solid;border-bottom-width:.05rem;border-bottom-width:var(--clr-table-borderwidth,.05rem);border-bottom-color:#ccc;border-bottom-color:var(--clr-table-border-color,#ccc);border-top:0 none}.datagrid .datagrid-body .datagrid-row:first-child .datagrid-cell{border-top:0 none}.datagrid .datagrid-body+.datagrid-body{border-top-style:solid;border-top-width:.05rem;border-top-width:var(--clr-table-borderwidth,.05rem);border-top-color:#ccc;border-top-color:var(--clr-table-border-color,#ccc)}.datagrid .datagrid-header .datagrid-column:first-child{border-radius:0;border-top-left-radius:.1rem;border-top-left-radius:var(--clr-table-cornercellradius,.1rem)}.datagrid .datagrid-header .datagrid-column:last-child{border-radius:0;border-top-right-radius:.1rem;border-top-right-radius:var(--clr-table-cornercellradius,.1rem)}.datagrid .datagrid-body:last-child .datagrid-row:last-child .datagrid-cell:first-child{border-radius:0;border-bottom-left-radius:.1rem;border-bottom-left-radius:var(--clr-table-cornercellradius,.1rem)}.datagrid .datagrid-body:last-child .datagrid-row:last-child .datagrid-cell:last-child{border-radius:0;border-bottom-right-radius:.1rem;border-bottom-right-radius:var(--clr-table-cornercellradius,.1rem)}.datagrid-compact .datagrid-cell,.datagrid-compact .datagrid-column{padding-top:.3rem;padding-bottom:.25rem}.datagrid-host{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column nowrap;flex-flow:column nowrap;position:relative}.datagrid{border-bottom-left-radius:0;border-bottom-right-radius:0;-ms-overflow-style:-ms-autohiding-scrollbar;overflow:auto;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;margin-top:.6rem}.datagrid-container{width:auto;font-size:.65rem;padding:.55rem .6rem .55rem}.datagrid-expandable-caret{padding:.1rem .2rem .15rem;text-align:center}.datagrid-expandable-caret .datagrid-expandable-caret-button{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;margin:0;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;background:0 0;cursor:pointer;height:1.5rem;width:1.5rem}button.datagrid-expandable-caret .datagrid-expandable-caret-button{cursor:pointer}.datagrid-expandable-caret .datagrid-expandable-caret-icon{color:#8c8c8c;color:var(--clr-datagrid-icon-color,#8c8c8c);margin-top:.15rem}.datagrid-expandable-caret .datagrid-expandable-caret-icon svg{-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out}.datagrid-expandable-caret .spinner{margin-top:.3rem}.datagrid-expandable-caret.datagrid-column{padding:.55rem .6rem .55rem}.datagrid-body,.datagrid-cell,.datagrid-column,.datagrid-fixed-column,.datagrid-header,.datagrid-row{display:block}.datagrid-row{border-top-style:solid;border-top-width:.05rem;border-top-width:var(--clr-table-borderwidth,.05rem);border-top-color:#ccc;border-top-color:var(--clr-table-border-color,#ccc)}.datagrid-row:first-of-type{border-top:none}.datagrid-row:hover{background-color:#e8e8e8;background-color:var(--clr-datagrid-row-hover,#e8e8e8)}.datagrid-row:hover .datagrid-row-sticky{background-color:#e8e8e8;background-color:var(--clr-datagrid-row-hover,#e8e8e8)}.datagrid-row.datagrid-selected{color:#000;color:var(--clr-datagrid-row-selected,#000);background-color:#d8e3e9;background-color:var(--clr-global-selection-color,#d8e3e9)}.datagrid-row.datagrid-selected .datagrid-row-sticky{color:#000;color:var(--clr-datagrid-row-selected,#000);background-color:#d8e3e9;background-color:var(--clr-global-selection-color,#d8e3e9)}.datagrid-row .datagrid-action-overflow{position:absolute;background:#fff;background:var(--clr-datagrid-popover-bg-color,#fff);padding:.3rem;margin-left:.3rem;border-style:solid;border-width:.05rem;border-width:var(--clr-global-borderwidth,.05rem);border-color:#ccc;border-color:var(--clr-datagrid-popover-border-color,#ccc);-webkit-box-shadow:0 .05rem .15rem rgba(140,140,140,.25);box-shadow:0 .05rem .15rem rgba(140,140,140,.25);-webkit-box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));border-radius:.15rem;border-radius:var(--clr-global-borderradius,.15rem);font-weight:400;white-space:nowrap}.datagrid-row .datagrid-action-overflow::before{content:"";position:absolute;top:50%;right:100%;height:0;width:0;margin-top:-.3rem;border-top:.3rem solid transparent;border-bottom:.3rem solid transparent;border-right-width:.3rem;border-right-style:solid;border-right-color:#ccc;border-right-color:var(--clr-datagrid-popover-border-color,#ccc)}.datagrid-row .datagrid-action-overflow::after{content:"";position:absolute;top:50%;right:100%;height:0;width:0;margin-top:-.25rem;border-top:.25rem solid transparent;border-bottom:.25rem solid transparent;border-right-width:.25rem;border-right-style:solid;border-right-color:#fff;border-right-color:var(--clr-datagrid-popover-bg-color,#fff)}.datagrid-row .datagrid-action-overflow .action-item{color:#666;color:var(--clr-dropdown-text-color,#666);font-size:.7rem;letter-spacing:normal;background:0 0;border:0;cursor:pointer;display:block;line-height:1.15rem;margin:0;padding:.05rem 1.2rem 0;text-align:left;width:100%}.datagrid-row .datagrid-action-overflow .action-item:focus,.datagrid-row .datagrid-action-overflow .action-item:hover{background-color:#e8e8e8;background-color:var(--clr-datagrid-action-popover-hover-color,#e8e8e8);text-decoration:none}.datagrid-row .datagrid-action-overflow .action-item.active{background:#e8e8e8;background:var(--clr-datagrid-row-hover,#e8e8e8);color:#000;color:var(--clr-color-neutral-1000,#000)}.datagrid-row .datagrid-action-overflow .action-item:focus{outline:0}.datagrid-row .datagrid-action-overflow .action-item.disabled,.datagrid-row .datagrid-action-overflow .action-item:disabled{cursor:not-allowed;opacity:.4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datagrid-row .datagrid-action-overflow .action-item.disabled:hover,.datagrid-row .datagrid-action-overflow .action-item:disabled:hover{background:0 0}.datagrid-row .datagrid-action-overflow .action-item.disabled:active,.datagrid-row .datagrid-action-overflow .action-item.disabled:focus,.datagrid-row .datagrid-action-overflow .action-item:disabled:active,.datagrid-row .datagrid-action-overflow .action-item:disabled:focus{background:0 0;-webkit-box-shadow:none;box-shadow:none}.datagrid-row .datagrid-action-overflow .action-item cds-icon{vertical-align:middle;-webkit-transform:translate3d(0,-.05rem,0);transform:translate3d(0,-.05rem,0)}.datagrid-row .datagrid-action-overflow{position:absolute;background:#fff;background:var(--clr-datagrid-popover-bg-color,#fff);padding:.3rem;margin-left:.3rem;border-style:solid;border-width:.05rem;border-width:var(--clr-global-borderwidth,.05rem);border-color:#ccc;border-color:var(--clr-datagrid-popover-border-color,#ccc);-webkit-box-shadow:0 .05rem .15rem rgba(140,140,140,.25);box-shadow:0 .05rem .15rem rgba(140,140,140,.25);-webkit-box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));border-radius:.15rem;border-radius:var(--clr-global-borderradius,.15rem);font-weight:400;white-space:nowrap}.datagrid-row .datagrid-action-overflow::before{content:"";position:absolute;top:50%;right:100%;width:0;height:0;margin-top:-.3rem;border-top:.3rem solid transparent;border-bottom:.3rem solid transparent;border-right-width:.3rem;border-right-style:solid;border-right-color:#ccc;border-right-color:var(--clr-datagrid-popover-border-color,#ccc)}.datagrid-row .datagrid-action-overflow::after{content:"";position:absolute;top:50%;right:100%;width:0;height:0;margin-top:-.25rem;border-top:.25rem solid transparent;border-bottom:.25rem solid transparent;border-right-width:.25rem;border-right-style:solid;border-right-color:#fff;border-right-color:var(--clr-datagrid-popover-bg-color,#fff)}.datagrid-row .datagrid-action-overflow .action-item{color:#666;color:var(--clr-dropdown-text-color,#666);font-size:.7rem;letter-spacing:normal;background:0 0;border:0;cursor:pointer;display:block;line-height:1.15rem;margin:0;padding:.05rem 1.2rem 0;text-align:left;width:100%}.datagrid-row .datagrid-action-overflow .action-item:focus,.datagrid-row .datagrid-action-overflow .action-item:hover{background-color:#e8e8e8;background-color:var(--clr-datagrid-action-popover-hover-color,#e8e8e8);text-decoration:none}.datagrid-row .datagrid-action-overflow .action-item.active{background:#e8e8e8;background:var(--clr-datagrid-row-hover,#e8e8e8);color:#000;color:var(--clr-color-neutral-1000,#000)}.datagrid-row .datagrid-action-overflow .action-item:focus{outline:0}.datagrid-row .datagrid-action-overflow .action-item.disabled,.datagrid-row .datagrid-action-overflow .action-item:disabled{cursor:not-allowed;opacity:.4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datagrid-row .datagrid-action-overflow .action-item.disabled:hover,.datagrid-row .datagrid-action-overflow .action-item:disabled:hover{background:0 0}.datagrid-row .datagrid-action-overflow .action-item.disabled:active,.datagrid-row .datagrid-action-overflow .action-item.disabled:focus,.datagrid-row .datagrid-action-overflow .action-item:disabled:active,.datagrid-row .datagrid-action-overflow .action-item:disabled:focus{background:0 0;-webkit-box-shadow:none;box-shadow:none}.datagrid-row .datagrid-action-overflow .action-item cds-icon{vertical-align:middle;-webkit-transform:translate3d(0,-.05rem,0);transform:translate3d(0,-.05rem,0)}.datagrid-row .datagrid-action-overflow{position:absolute;background:#fff;background:var(--clr-datagrid-popover-bg-color,#fff);padding:.3rem;margin-left:.3rem;border-width:.05rem;border-width:var(--clr-global-borderwidth,.05rem);border-style:solid;border-color:#ccc;border-color:var(--clr-datagrid-popover-border-color,#ccc);-webkit-box-shadow:0 .05rem .15rem rgba(140,140,140,.25);box-shadow:0 .05rem .15rem rgba(140,140,140,.25);-webkit-box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));border-color:.15rem;border-color:var(--clr-global-borderradius,.15rem);font-weight:400;white-space:nowrap}.datagrid-row .datagrid-action-overflow::before{content:"";position:absolute;top:50%;right:100%;width:0;height:0;margin-top:-.3rem;border-right:.3rem solid;border-right-color:#ccc;border-right-color:var(--clr-datagrid-popover-border-color,#ccc);border-top:.3rem solid transparent;border-bottom:.3rem solid transparent}.datagrid-row .datagrid-action-overflow::after{content:"";position:absolute;top:50%;right:100%;width:0;height:0;margin-top:-.25rem;border-right:.25rem solid #fff;border-top:.25rem solid transparent;border-bottom:.25rem solid transparent}.datagrid-row .datagrid-action-overflow .action-item{color:#666;color:var(--clr-dropdown-text-color,#666);font-size:.7rem;letter-spacing:normal;background:0 0;border:0;cursor:pointer;display:block;line-height:1.15rem;margin:0;padding:.05rem 1.2rem 0;text-align:left;width:100%}.datagrid-row .datagrid-action-overflow .action-item:focus,.datagrid-row .datagrid-action-overflow .action-item:hover{text-decoration:none;background-color:#e8e8e8;background-color:var(--clr-datagrid-action-popover-hover-color,#e8e8e8)}.datagrid-row .datagrid-action-overflow .action-item.active{background:#e8e8e8;background:var(--clr-datagrid-row-hover,#e8e8e8);color:#000;color:var(--clr-datagrid-row-hover-font-color,#000)}.datagrid-row .datagrid-action-overflow .action-item:focus{outline:0}.datagrid-row .datagrid-action-overflow .action-item.disabled,.datagrid-row .datagrid-action-overflow .action-item:disabled{cursor:not-allowed;opacity:.4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datagrid-row .datagrid-action-overflow .action-item.disabled:hover,.datagrid-row .datagrid-action-overflow .action-item:disabled:hover{background:0 0}.datagrid-row .datagrid-action-overflow .action-item.disabled:active,.datagrid-row .datagrid-action-overflow .action-item.disabled:focus,.datagrid-row .datagrid-action-overflow .action-item:disabled:active,.datagrid-row .datagrid-action-overflow .action-item:disabled:focus{background:0 0;-webkit-box-shadow:none;box-shadow:none}.datagrid-row .datagrid-action-overflow .action-item cds-icon{vertical-align:middle;-webkit-transform:translate3d(0,-.05rem,0);transform:translate3d(0,-.05rem,0)}.datagrid-row .datagrid-row-detail-wrapper{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex}.datagrid-row .datagrid-row-detail{width:auto}.datagrid-row .datagrid-row-detail .datagrid-cell{padding-top:0;border:none}.datagrid-row .datagrid-select{min-width:.4rem}.datagrid-row .datagrid-signpost-trigger .signpost{margin:-.36rem 0;height:1.236rem}.datagrid-row .datagrid-signpost-trigger .signpost .signpost-trigger{height:inherit;line-height:1.2rem}.datagrid-row .datagrid-row-sticky{z-index:500}.datagrid-row-sticky{background-color:#fff;background-color:var(--clr-table-bgcolor,#fff);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;position:sticky;left:0;z-index:502}.datagrid-row-sticky .datagrid-cell:last-child:after{content:"";width:.05rem;height:calc(100% - .5rem);position:absolute;right:0;top:.25rem;background-color:#ccc;background-color:var(--clr-table-border-color,#ccc)}.datagrid-row-scrollable{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column nowrap;flex-flow:column nowrap}.datagrid-row-scrollable.is-replaced{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.datagrid-row-scrollable.is-replaced .datagrid-scrolling-cells{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.datagrid-row-scrollable .datagrid-column:last-child .datagrid-column-separator{display:none}.datagrid-row-flex{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap}.datagrid-row-flex .datagrid-row-detail{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap}.datagrid-row-flex .datagrid-row-detail .datagrid-cell{padding-top:0}.datagrid-scrolling-cells,.datagrid-scrolling-details{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap}.datagrid-action-bar{margin-top:1.2rem}.datagrid-action-bar~.datagrid-spinner{height:calc(100% - 1.2rem);top:1.2rem}.datagrid-header{position:sticky;top:0;z-index:501;width:auto}.datagrid-header .datagrid-column{border-bottom:none}.datagrid-header .datagrid-row{background-color:#fafafa;background-color:var(--clr-thead-bgcolor,#fafafa);border-top:none;border-bottom-style:solid;border-bottom-width:.05rem;border-bottom-width:var(--clr-global-borderwidth,.05rem);border-bottom-color:#ccc;border-bottom-color:var(--clr-table-border-color,#ccc)}.datagrid-header .datagrid-row .datagrid-row-sticky{background-color:#fafafa;background-color:var(--clr-thead-bgcolor,#fafafa)}.datagrid-header .datagrid-row:hover{background-color:#fafafa;background-color:var(--clr-thead-bgcolor,#fafafa)}.datagrid-header .datagrid-row:hover .datagrid-row-sticky{background-color:#fafafa;background-color:var(--clr-thead-bgcolor,#fafafa)}.datagrid-header .datagrid-row-scrollable{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.datagrid-table-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;min-height:100%}.datagrid-table{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-line-pack:start;align-content:flex-start;position:relative}.datagrid-table .datagrid-body{width:auto}.datagrid-table .datagrid-column{text-align:left;min-width:4.8rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;vertical-align:top;border:none}.datagrid-table .datagrid-column clr-dg-filter,.datagrid-table .datagrid-column clr-dg-numeric-filter,.datagrid-table .datagrid-column clr-dg-string-filter{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:100;-ms-flex-order:99;order:99;margin-left:auto}.datagrid-table .datagrid-column .datagrid-filter-input-spacer{width:.6rem;display:inline-block}.datagrid-table .datagrid-column .datagrid-numeric-filter-input{width:3.9rem}.datagrid-table .datagrid-column .datagrid-filter-toggle{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;margin:0;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;background:0 0;cursor:pointer;float:right;vertical-align:middle;height:.7rem;width:.7rem;margin-left:.3rem;background-repeat:no-repeat;background-size:contain}button.datagrid-table .datagrid-column .datagrid-filter-toggle{cursor:pointer}.datagrid-table .datagrid-column .datagrid-filter-toggle cds-icon{color:#b3b3b3;color:var(--clr-color-neutral-500,#b3b3b3)}.datagrid-table .datagrid-column .datagrid-filter-toggle:hover cds-icon{color:#0072a3;color:var(--clr-color-action-600,#0072a3)}.datagrid-table .datagrid-column .datagrid-filter-toggle.datagrid-filter-open cds-icon{color:#0072a3;color:var(--clr-color-action-600,#0072a3)}.datagrid-table .datagrid-column .datagrid-filter-toggle.datagrid-filtered cds-icon{color:#0072a3;color:var(--clr-color-action-600,#0072a3)}.datagrid-table .datagrid-column .datagrid-filter{top:100%;right:0;margin-top:.24rem;background:#fff;background:var(--clr-datagrid-popover-bg-color,#fff);padding:.9rem;border-style:solid;border-width:.05rem;border-width:var(--clr-global-borderwidth,.05rem);border-color:#ccc;border-color:var(--clr-datagrid-popover-border-color,#ccc);-webkit-box-shadow:0 .05rem .15rem rgba(140,140,140,.25);box-shadow:0 .05rem .15rem rgba(140,140,140,.25);-webkit-box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));border-radius:.15rem;border-radius:var(--clr-global-borderradius,.15rem);font-weight:400}.datagrid-table .datagrid-column .datagrid-filter .datagrid-filter-close-wrapper{text-align:right}.datagrid-table .datagrid-column .datagrid-filter .datagrid-filter-close-wrapper .close{float:none}.datagrid-table .datagrid-column .datagrid-filter .datagrid-filter-apply{margin-bottom:0}.datagrid-table .datagrid-column .datagrid-filter{top:100%;right:0;margin-top:.24rem;background:#fff;background:var(--clr-datagrid-popover-bg-color,#fff);padding:.9rem;border-style:solid;border-width:.05rem;border-width:var(--clr-global-borderwidth,.05rem);border-color:#ccc;border-color:var(--clr-datagrid-popover-border-color,#ccc);-webkit-box-shadow:0 .05rem .15rem rgba(140,140,140,.25);box-shadow:0 .05rem .15rem rgba(140,140,140,.25);-webkit-box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));border-radius:.15rem;border-radius:var(--clr-global-borderradius,.15rem);font-weight:400}.datagrid-table .datagrid-column .datagrid-filter .datagrid-filter-close-wrapper{text-align:right}.datagrid-table .datagrid-column .datagrid-filter .datagrid-filter-close-wrapper .close{float:none}.datagrid-table .datagrid-column .datagrid-filter .datagrid-filter-apply{margin-bottom:0}.datagrid-table .datagrid-column .datagrid-filter{top:100%;right:0;margin-top:.24rem;background:#fff;background:var(--clr-datagrid-popover-bg-color,#fff);padding:.9rem;border-width:.05rem;border-width:var(--clr-global-borderwidth,.05rem);border-color:#ccc;border-color:var(--clr-datagrid-popover-border-color,#ccc);border-style:solid;-webkit-box-shadow:0 .05rem .15rem rgba(140,140,140,.25);box-shadow:0 .05rem .15rem rgba(140,140,140,.25);-webkit-box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));border-radius:.15rem;border-radius:var(--clr-global-borderradius,.15rem);font-weight:400}.datagrid-table .datagrid-column .datagrid-filter .datagrid-filter-close-wrapper{text-align:right}.datagrid-table .datagrid-column .datagrid-filter .datagrid-filter-close-wrapper .close{float:none}.datagrid-table .datagrid-column .datagrid-filter .datagrid-filter-apply{margin-bottom:0}.datagrid-table .datagrid-column.datagrid-fixed-width{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.datagrid-table .datagrid-column .datagrid-column-flex{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.datagrid-table .datagrid-column .datagrid-column-title{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;margin:0;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;background:0 0;color:#666;color:var(--clr-table-font-color,#666);text-align:left;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:center;align-self:center;display:-webkit-box;display:-ms-flexbox;display:flex}button.datagrid-table .datagrid-column .datagrid-column-title{cursor:pointer}.datagrid-table .datagrid-column .datagrid-column-title .signpost .signpost-action.btn{height:inherit;line-height:inherit}.datagrid-table .datagrid-column .datagrid-column-title .clr-checkbox-wrapper .clr-control-label{margin-top:-.48rem}.datagrid-table .datagrid-column button.datagrid-column-title:hover{text-decoration:underline;cursor:pointer}.datagrid-table .datagrid-column button.datagrid-column-title .sort-icon{color:#0072a3;color:var(--clr-color-action-600,#0072a3);margin-left:auto;height:.7rem;width:.7rem;vertical-align:middle}.datagrid-table .datagrid-column .datagrid-column-separator{position:relative;left:.6rem;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:.05rem;width:var(--clr-global-borderwidth,.05rem);-webkit-box-ordinal-group:101;-ms-flex-order:100;order:100;margin-left:auto;height:100%}.datagrid-table .datagrid-column .datagrid-column-separator::after{content:"";position:absolute;height:calc(100% + .6rem - .05rem);width:.05rem;top:calc(-.5 * .6rem + .05rem);left:0;background-color:#ccc;background-color:var(--clr-table-border-color,#ccc)}.datagrid-table .datagrid-column .datagrid-column-separator .datagrid-column-handle{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;margin:0;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;background:0 0;position:absolute;width:.65rem;right:-.3rem;top:-.3rem;cursor:col-resize;height:calc(100% + .6rem - .05rem);z-index:501}button.datagrid-table .datagrid-column .datagrid-column-separator .datagrid-column-handle{cursor:pointer}.datagrid-table .datagrid-column .datagrid-column-separator .datagrid-column-resize-tracker{position:absolute;top:-.6rem;display:none;width:.05rem;height:0;border-right-style:dotted;border-right-color:#79c6e6;border-right-color:var(--clr-color-action-300,#79c6e6);border-right-width:.05rem;border-right-width:var(--clr-global-borderwidth,.05rem);-webkit-transform:translateX(0);transform:translateX(0);cursor:col-resize}.datagrid-table .datagrid-column .datagrid-column-separator .datagrid-column-resize-tracker.on-arrow-key-resize{-webkit-transition:-webkit-transform .2s ease-out;transition:-webkit-transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out}.datagrid-table .datagrid-column .datagrid-column-separator .exceeded-max{border-right:.05rem dotted rgba(219,33,0,.3)}.datagrid-table .datagrid-column .datagrid-signpost-trigger .signpost{margin:-.36rem 0;height:1.236rem}.datagrid-table .datagrid-column .datagrid-signpost-trigger .signpost .signpost-trigger{height:inherit;line-height:1.2rem}.datagrid-table .datagrid-column.datagrid-expandable-caret,.datagrid-table .datagrid-column.datagrid-row-actions,.datagrid-table .datagrid-column.datagrid-select{max-width:1.9rem;min-width:1.9rem}.datagrid-table .datagrid-cell{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;text-align:left;min-width:4.8rem;border:none}.datagrid-table .datagrid-cell.datagrid-fixed-width{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.datagrid-table .datagrid-cell.datagrid-fixed-column{-webkit-box-flex:0;-ms-flex:0 0 1.9rem;flex:0 0 1.9rem;max-width:1.9rem;min-width:1.9rem}.datagrid-table .datagrid-cell.datagrid-row-actions{background:0 0}.datagrid-table .datagrid-cell.datagrid-expandable-caret{padding:.1rem .2rem .15rem;text-align:center}.datagrid-table .datagrid-cell .datagrid-action-toggle{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;margin:0;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;background:0 0}button.datagrid-table .datagrid-cell .datagrid-action-toggle{cursor:pointer}.datagrid-table .datagrid-cell .datagrid-action-toggle cds-icon{color:#8c8c8c;color:var(--clr-datagrid-icon-color,#8c8c8c)}.datagrid-table .datagrid-cell .datagrid-action-toggle:active cds-icon{color:#666;color:var(--clr-datagrid-action-toggle,#666)}.datagrid-table .datagrid-cell .clr-toggle-wrapper{margin-top:-.66rem;padding-top:.42rem}.datagrid-table .datagrid-placeholder-container{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-top-style:solid;border-top-color:#ccc;border-top-color:var(--clr-table-border-color,#ccc);border-top-width:.05rem;border-top-width:var(--clr-global-borderwidth,.05rem)}.datagrid-table .datagrid-placeholder{background:#fff;background:var(--clr-table-bgcolor,#fff);width:100%}.datagrid-table .datagrid-placeholder.datagrid-empty{border-top:0;padding:.6rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;font-size:.8rem;font-size:var(--clr-datagrid-placeholder-font-size,.8rem);color:#b3b3b3;color:var(--clr-datagrid-placeholder-color,#b3b3b3)}.datagrid-table .datagrid-placeholder .datagrid-placeholder-image{height:3rem;width:3rem;margin-bottom:.6rem;background-repeat:no-repeat;background-size:contain;background-position:center;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2060%2072%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cellipse%20id%3D%22path-1%22%20cx%3D%2230%22%20cy%3D%2261.7666667%22%20rx%3D%2215.4512904%22%20ry%3D%224.73333333%22%3E%3C%2Fellipse%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20maskContentUnits%3D%22userSpaceOnUse%22%20maskUnits%3D%22objectBoundingBox%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2230.9025808%22%20height%3D%229.46666667%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Artboard%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Oval-10%22%20stroke%3D%22%23C1DFEF%22%20mask%3D%22url(%23mask-2)%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22square%22%20stroke-dasharray%3D%223%2C6%2C3%2C5%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M38.4613647%2C18.1642456%20L30.9890137%2C34.9141846%20L31%2C47%20L32.5977783%2C46.5167236%20L32.5977783%2C34.9141846%20L51.0673218%2C15.7560425%20C51.0673218%2C15.7560425%2048.6295166%2C16.6542969%2044.9628906%2C17.3392334%20C41.2962646%2C18.0241699%2038.4613647%2C18.1642456%2038.4613647%2C18.1642456%20Z%22%20id%3D%22Path-195%22%20fill%3D%22%23C1DFEF%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M4.74639226%2C12.5661855%20L4.62065726%2C12.1605348%20L5.3515414%2C11.1625044%20L5.77622385%2C11.159939%20L6.20936309%2C12.5573481%20L4.74639226%2C12.5661855%20Z%20M6.20936309%2C12.5573481%20L6.32542632%2C12.9317954%20L28.4963855%2C34.8796718%20L28.4963855%2C47.8096691%20L32.6%2C46.4836513%20L32.6%2C34.8992365%20L53.973494%2C12.7035813%20L53.973494%2C12.2688201%20L6.20936309%2C12.5573481%20Z%20M55.373494%2C10.8603376%20L55.373494%2C13.2680664%20L34%2C35.4637216%20L34%2C47.5025401%20L27.0963855%2C49.7333333%20L27.0963855%2C35.4637219%20L5.09179688%2C13.680542%20L4.31325301%2C11.1687764%20L55.373494%2C10.8603376%20Z%22%20id%3D%22Path-149%22%20fill%3D%22%237FBDDD%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cellipse%20id%3D%22Oval-9%22%20fill%3D%22%23FFFFFF%22%20cx%3D%2230%22%20cy%3D%2211.785654%22%20rx%3D%2226%22%20ry%3D%226.78565401%22%3E%3C%2Fellipse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M30%2C17.171308%20C36.8772177%2C17.171308%2043.3112282%2C16.4610701%2048.0312371%2C15.2292106%20C50.2777611%2C14.6428977%2052.0507619%2C13.9579677%2053.2216231%2C13.2354973%20C54.1938565%2C12.6355886%2054.6%2C12.1175891%2054.6%2C11.785654%20C54.6%2C11.4537189%2054.1938565%2C10.9357194%2053.2216231%2C10.3358107%20C52.0507619%2C9.61334032%2050.2777611%2C8.92841034%2048.0312371%2C8.34209746%20C43.3112282%2C7.11023795%2036.8772177%2C6.4%2030%2C6.4%20C23.1227823%2C6.4%2016.6887718%2C7.11023795%2011.9687629%2C8.34209746%20C9.72223886%2C8.92841034%207.94923814%2C9.61334032%206.77837689%2C10.3358107%20C5.8061435%2C10.9357194%205.4%2C11.4537189%205.4%2C11.785654%20C5.4%2C12.1175891%205.8061435%2C12.6355886%206.77837689%2C13.2354973%20C7.94923814%2C13.9579677%209.72223886%2C14.6428977%2011.9687629%2C15.2292106%20C16.6887718%2C16.4610701%2023.1227823%2C17.171308%2030%2C17.171308%20Z%20M30%2C18.571308%20C15.6405965%2C18.571308%204%2C15.5332672%204%2C11.785654%20C4%2C8.03804078%2015.6405965%2C5%2030%2C5%20C44.3594035%2C5%2056%2C8.03804078%2056%2C11.785654%20C56%2C15.5332672%2044.3594035%2C18.571308%2030%2C18.571308%20Z%22%20id%3D%22Oval-9-Copy%22%20fill%3D%22%237FBDDD%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M18.2608643%2C7.14562988%20L22.727356%2C16.9047241%20C22.727356%2C16.9047241%2015.3006592%2C16.3911743%2010.276001%2C14.7511597%20C5.25134277%2C13.111145%205.38031006%2C11.8284302%205.38031006%2C11.6882935%20C5.38031006%2C10.4832831%208.16633152%2C9.41877716%2011.114563%2C8.57324219%20C14.549319%2C7.58817492%2018.2608643%2C7.14562988%2018.2608643%2C7.14562988%20Z%22%20id%3D%22Path-196%22%20fill%3D%22%23C1DFEF%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E")}.datagrid-table .datagrid-hidden-column.datagrid-cell,.datagrid-table .datagrid-hidden-column.datagrid-column{display:none}.datagrid-row-replaced .datagrid-scrolling-cells .datagrid-cell:not(.datagrid-expandable-caret):not(.datagrid-row-actions):not(.datagrid-select){display:none}.datagrid-row-replaced .datagrid-row-detail .datagrid-cell{display:block;padding-top:.55rem}.datagrid-row-replaced .datagrid-row-detail .datagrid-cell.datagrid-hidden-column{display:none}.datagrid-row-replaced .datagrid-row-detail .datagrid-expandable-caret{padding-top:.1rem}.datagrid-row-replaced .datagrid-row-detail.datagrid-container{border-top:.05rem solid #ccc}.datagrid-row-replaced .datagrid-row-detail.datagrid-container .datagrid-cell{border-top:none}.datagrid-footer{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;padding:0 .6rem;line-height:1.65rem;font-size:.55rem;background-color:#fafafa;background-color:var(--clr-thead-bgcolor,#fafafa);border-style:solid;border-color:#ccc;border-color:var(--clr-table-footer-border-top-color,#ccc);border-width:.05rem;border-width:var(--clr-global-borderwidth,.05rem);border-top:none;border-radius:0;border-bottom-right-radius:.15rem;border-bottom-right-radius:var(--clr-global-borderradius,.15rem);border-bottom-left-radius:.15rem;border-bottom-left-radius:var(--clr-global-borderradius,.15rem)}.datagrid-footer .pagination{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;line-height:1.8rem}.datagrid-footer .pagination-size{display:block;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;white-space:nowrap;text-align:right}.datagrid-footer .pagination-size .clr-select-wrapper::after{top:.6rem}.datagrid-footer .pagination-size .clr-page-size-select{font-size:100%;margin-left:.6rem;height:1.2rem;line-height:1.2rem;vertical-align:middle}.datagrid-footer .pagination-size+.pagination-description{margin-left:1.2rem}.datagrid-footer .pagination-description{white-space:nowrap}.datagrid-footer .pagination-list{margin-left:1.2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.datagrid-footer .column-switch-wrapper{position:relative;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.datagrid-footer .column-switch-wrapper.active .column-toggle--action cds-icon{color:#0072a3;color:var(--clr-color-action-600,#0072a3)}.datagrid-footer .column-switch-wrapper .column-toggle--action{min-width:.9rem;padding-left:0;padding-right:0}.datagrid-footer .column-switch-wrapper .column-toggle--action cds-icon{color:#b3b3b3;color:var(--clr-color-neutral-500,#b3b3b3)}.datagrid-footer .column-switch-wrapper .column-toggle--action:hover cds-icon{color:#0072a3;color:var(--clr-color-action-600,#0072a3)}.datagrid-footer .column-switch-wrapper .column-switch{border-radius:.15rem;border-radius:var(--clr-global-borderradius,.15rem);background-color:#fff;background-color:var(--clr-datagrid-popover-bg-color,#fff);border-color:#ccc;border-color:var(--clr-datagrid-popover-border-color,#ccc);border-width:.05rem;border-width:var(--clr-global-borderwidth,.05rem);-webkit-box-shadow:0 .05rem .15rem rgba(140,140,140,.25);box-shadow:0 .05rem .15rem rgba(140,140,140,.25);-webkit-box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));padding:.9rem;border-style:solid;border-top:none;width:12.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;z-index:1060}.datagrid-footer .column-switch-wrapper .column-switch .switch-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-weight:400;font-size:.8rem;padding-bottom:.6rem;line-height:1.2rem}.datagrid-footer .column-switch-wrapper .column-switch .switch-header button{min-width:.9rem;margin:0;padding:0;color:#b3b3b3;color:var(--clr-color-neutral-500,#b3b3b3)}.datagrid-footer .column-switch-wrapper .column-switch .switch-header button:hover{color:#0072a3;color:var(--clr-color-action-600,#0072a3)}.datagrid-footer .column-switch-wrapper .column-switch .switch-content{max-height:15rem;overflow-y:auto;min-height:2.4rem}.datagrid-footer .column-switch-wrapper .column-switch .switch-content li{line-height:1.2rem;padding-left:.1rem}.datagrid-footer .column-switch-wrapper .column-switch .switch-footer .btn{margin:0;padding:0}.datagrid-footer .column-switch-wrapper .column-switch .switch-footer .action-right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.datagrid-footer .column-switch-wrapper .column-switch{border-radius:.15rem;border-radius:var(--clr-global-borderradius,.15rem);background-color:#fff;background-color:var(--clr-datagrid-popover-bg-color,#fff);border-width:.05rem;border-width:var(--clr-global-borderwidth,.05rem);border-color:#ccc;border-color:var(--clr-datagrid-popover-border-color,#ccc);border-style:solid;-webkit-box-shadow:0 .05rem .15rem rgba(140,140,140,.25);box-shadow:0 .05rem .15rem rgba(140,140,140,.25);-webkit-box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));padding:.9rem;width:12.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;z-index:1060}.datagrid-footer .column-switch-wrapper .column-switch .switch-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-weight:400;font-size:.8rem;padding-bottom:.6rem;line-height:1.2rem}.datagrid-footer .column-switch-wrapper .column-switch .switch-header button{min-width:.9rem;margin:0;padding:0;color:#b3b3b3;color:var(--clr-datagrid-column-switch-header-font-color,#b3b3b3)}.datagrid-footer .column-switch-wrapper .column-switch .switch-header button:hover{color:#0072a3;color:var(--clr-datagrid-column-switch-header-font-hover-color,#0072a3)}.datagrid-footer .column-switch-wrapper .column-switch .switch-content{max-height:15rem;overflow-y:auto;min-height:1.25rem}.datagrid-footer .column-switch-wrapper .column-switch .switch-content li{line-height:1.2rem;padding-left:.1rem}.datagrid-footer .column-switch-wrapper .column-switch .switch-footer .btn{margin:0;padding:0}.datagrid-footer .column-switch-wrapper .column-switch .switch-footer .action-right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.clr-form-control-disabled .datagrid-footer-select.clr-checkbox-wrapper input[type=checkbox]:checked+label{top:.2rem;cursor:default;margin-right:.45rem}.clr-form-control-disabled .datagrid-footer-select.clr-checkbox-wrapper input[type=checkbox]:checked+label::before{background-color:#8c8c8c;background-color:var(--clr-color-neutral-600,#8c8c8c)}.clr-form-control-disabled .datagrid-footer-select.clr-checkbox-wrapper input[type=checkbox]:checked+label::after{border-left-color:#fff;border-left-color:var(--clr-color-neutral-0,#fff);border-bottom-color:#fff;border-bottom-color:var(--clr-color-neutral-0,#fff)}.datagrid-spinner{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;top:.6rem;height:calc(100% - .6rem);background-color:rgba(255,255,255,.6);background-color:var(--clr-datagrid-loading-background,rgba(255,255,255,.6));z-index:590}.datagrid-select .clr-control-label{min-height:.6rem;margin-top:-.24rem;padding-left:.7rem}.datagrid-compact .datagrid-header{min-height:1.2rem}.datagrid-compact .datagrid-column .datagrid-column-separator::after{height:calc(100% + .5 * .6rem - .05rem);top:calc(-.25 * .6rem + .05rem)}.datagrid-compact .datagrid-cell cds-icon{margin-top:-.2rem;margin-bottom:-.15rem;-webkit-transform:translateY(-.05rem);transform:translateY(-.05rem)}.datagrid-compact .datagrid-cell .badge{margin-top:-.15rem;margin-bottom:-.05rem}.datagrid-compact .datagrid-expandable-caret{text-align:center}.datagrid-compact .datagrid-expandable-caret .spinner{margin-top:.15rem}.datagrid-compact .datagrid-expandable-caret .datagrid-expandable-caret-button{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;margin:0;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;background:0 0;height:1.2rem;width:1.2rem;outline-offset:-.2rem}button.datagrid-compact .datagrid-expandable-caret .datagrid-expandable-caret-button{cursor:pointer}.datagrid-compact .datagrid-expandable-caret .datagrid-expandable-caret-icon{margin:0}.datagrid-compact .datagrid-expandable-caret.datagrid-cell{padding:0}.datagrid-compact .datagrid-expandable-caret.datagrid-column{padding-top:.3rem;padding-bottom:.25rem}.datagrid-compact .datagrid-signpost-trigger .signpost .signpost-trigger cds-icon:not([shape=info-circle],[shape=exclamation-triangle],[shape=exclamation-circle],[shape=check-circle],[shape=info],[shape=error]){height:1.05rem;width:1.05rem}.datagrid-compact .datagrid-footer{padding:0 .6rem;line-height:1.15rem}.datagrid-compact .datagrid-footer .pagination{line-height:1.2rem}.datagrid-compact .datagrid-footer .column-switch-wrapper .column-toggle--action{margin:0;outline-offset:-.2rem}.datagrid-compact .datagrid-footer .clr-form-control-disabled .datagrid-footer-select.clr-checkbox-wrapper input[type=checkbox]:checked+label{top:0}.datagrid-footer-description{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-wrap:nowrap;flex-wrap:nowrap;white-space:nowrap;display:block;text-align:right}.pagination-list{list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.pagination-list .pagination-current{background:0 0;background-color:#fff;background-color:var(--clr-forms-textarea-background-color,#fff);border-color:#ccc;border-color:var(--clr-datagrid-pagination-input-border-color,#ccc);border-width:.05rem;border-width:var(--clr-global-borderwidth,.05rem);border-style:solid;border-radius:.15rem;border-radius:var(--clr-global-borderradius,.15rem);line-height:1.2rem;font-size:.55rem;min-width:1.2rem;text-align:center;-webkit-transition:none!important;transition:none!important}.pagination-list .pagination-current.clr-focus,.pagination-list .pagination-current:focus{background:0 0;border:.05rem solid;border-color:#49aeda;border-color:var(--clr-datagrid-pagination-input-border-focus-color,#49aeda);-webkit-box-shadow:0 0 .05rem #49aeda;box-shadow:0 0 .05rem #49aeda;-webkit-box-shadow:0 0 var(--clr-global-borderwidth,.05rem) var(--clr-datagrid-pagination-input-border-focus-color,#49aeda);box-shadow:0 0 var(--clr-global-borderwidth,.05rem) var(--clr-datagrid-pagination-input-border-focus-color,#49aeda)}.pagination-list>*{padding:0 .12rem}.pagination-list .pagination-first,.pagination-list .pagination-last,.pagination-list .pagination-next,.pagination-list .pagination-previous{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:.7rem;width:.7rem;background-repeat:no-repeat;background-size:contain}.pagination-list .pagination-first:disabled,.pagination-list .pagination-last:disabled,.pagination-list .pagination-next:disabled,.pagination-list .pagination-previous:disabled{color:#8c8c8c;color:var(--clr-datagrid-pagination-btn-disabled-color,#8c8c8c);opacity:.56;opacity:var(--clr-datagrid-pagination-btn-disabled-opacity,.56)}.pagination-list .pagination-first,.pagination-list .pagination-previous{margin-right:.6rem}.pagination-list .pagination-last,.pagination-list .pagination-next{margin-left:.6rem}.pagination-list button{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;margin:0;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;background:0 0;color:#666;color:var(--clr-datagrid-pagination-btn-color,#666);cursor:pointer}button.pagination-list button{cursor:pointer}.datagrid-cell-width-zero{border:0!important;padding:0!important;width:0;-webkit-box-flex:0!important;-ms-flex:0 0 auto!important;flex:0 0 auto!important;min-width:0!important;display:block!important}.datagrid-outer-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:auto}.datagrid-inner-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:auto;min-width:12rem}.datagrid-detail-open .datagrid{border-top-right-radius:0;border-right:none}.datagrid-detail-open .datagrid-inner-wrapper{width:34%}.datagrid-detail-open .datagrid-placeholder-container,.datagrid-detail-open .datagrid-row{border-right:.05rem solid #ccc}.datagrid-detail-open .datagrid-footer{border-bottom-right-radius:0}.datagrid-detail-open .pagination{width:100%}.datagrid-detail-open .pagination-description-compact{text-align:left;-webkit-box-flex:1;-ms-flex:1;flex:1}.datagrid-detail-open .datagrid-footer .pagination-list{margin-right:0}.datagrid-row-detail-open{position:relative}.datagrid-row-detail-open:before{content:"";display:inline-block;position:absolute;border:.5rem solid transparent;border-color:transparent;border-right-color:#ccc;border-right-color:var(--clr-table-border-color,#ccc);top:.5rem;right:0}.datagrid-row-detail-open:after{content:"";display:inline-block;position:absolute;border:.45rem solid transparent;border-right-color:#fff;border-right-color:var(--clr-datagrid-popover-bg-color,#fff);top:.55rem;right:-.05rem}.datagrid-detail-pane{margin-top:.6rem;border-width:.05rem;border-width:var(--clr-global-borderwidth,.05rem);border-style:solid;border-color:#ccc;border-color:var(--clr-datagrid-default-border-color,#ccc);border-left:none;border-top-right-radius:.15rem;border-top-right-radius:var(--clr-global-borderradius,.15rem);border-bottom-right-radius:.15rem;border-bottom-right-radius:var(--clr-global-borderradius,.15rem);background:#fff;background:var(--clr-datagrid-popover-bg-color,#fff);overflow:hidden;display:block;-webkit-box-flex:2;-ms-flex-positive:2;flex-grow:2;width:66%}.datagrid-detail-pane-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:auto;height:100%}.datagrid-detail-body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 1.2rem}.datagrid-detail-header{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;font-size:.9rem;line-height:1.68rem;padding-left:1.2rem;margin-top:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.datagrid-detail-header .datagrid-detail-header-title{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding-top:.8rem}.datagrid-detail-header .datagrid-detail-pane-close{-webkit-box-flex:1;-ms-flex:1 1 1.8rem;flex:1 1 1.8rem;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.datagrid-detail-header .datagrid-detail-pane-close .btn.btn-link{color:#8c8c8c;color:var(--clr-modal-close-color,#8c8c8c);margin-top:.8rem;margin-bottom:0;padding-right:0}.datagrid-detail-caret{padding:0;text-align:center}.datagrid-detail-caret.datagrid-cell{padding:.3rem .45rem}.datagrid-detail-caret .datagrid-detail-caret-button{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;margin:0;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;background:0 0;cursor:pointer;padding:.1rem .2rem .15rem}button.datagrid-detail-caret .datagrid-detail-caret-button{cursor:pointer}.datagrid-detail-caret .datagrid-detail-caret-button.is-open{background-color:#0072a3;background-color:var(--clr-datagrid-detail-caret-icon-open-bg-color,#0072a3);border-radius:.15rem;border-radius:var(--clr-global-borderradius,.15rem)}.datagrid-detail-caret .datagrid-detail-caret-button.is-open .datagrid-detail-caret-icon{color:#fff;color:var(--clr-datagrid-detail-caret-icon-open-icon-color,#fff)}.datagrid-detail-caret .datagrid-detail-caret-icon{color:#8c8c8c;color:var(--clr-datagrid-icon-color,#8c8c8c);margin-top:.1rem}.datagrid-detail-caret .spinner{margin-top:.3rem}.datagrid-detail-caret.datagrid-column{padding:.55rem .6rem .55rem}.datagrid-detail-overlay.datagrid-detail-open .datagrid-inner-wrapper{display:none}.datagrid-detail-overlay .datagrid-detail-pane{border-left:.05rem solid #ccc;border-radius:.15rem}@media screen and (max-width:576px){.datagrid-detail-open .datagrid-inner-wrapper{display:none}.datagrid-detail-pane{border-left:.05rem solid #ccc;border-radius:.15rem}}.column-switch{border-radius:.15rem;border-radius:var(--clr-global-borderradius,.15rem);padding:.9rem;background-color:#fff;background-color:var(--clr-datagrid-popover-bg-color,#fff);border-width:.05rem;border-width:var(--clr-global-borderwidth,.05rem);border-style:solid;border-color:#ccc;border-color:var(--clr-datagrid-popover-border-color,#ccc);-webkit-box-shadow:0 .05rem .15rem rgba(140,140,140,.25);box-shadow:0 .05rem .15rem rgba(140,140,140,.25);-webkit-box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));width:12.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;z-index:1060}.column-switch .switch-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-weight:400;font-size:.8rem;padding-bottom:.6rem;line-height:1.2rem}.column-switch .switch-header button{min-width:.9rem;margin:0;padding:0;color:#b3b3b3;color:var(--clr-datagrid-column-switch-header-font-color,#b3b3b3)}.column-switch .switch-header button:hover{color:#0072a3;color:var(--clr-datagrid-column-switch-header-font-hover-color,#0072a3)}.column-switch .switch-content{max-height:15rem;overflow-y:auto;min-height:1.25rem}.column-switch .switch-content li{line-height:1.2rem;padding-left:.1rem}.column-switch .switch-footer .btn{margin:0;padding:0}.column-switch .switch-footer .action-right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.datagrid-filter{margin-top:.24rem;background:#fff;background:var(--clr-datagrid-popover-bg-color,#fff);border-width:.05rem;border-width:var(--clr-global-borderwidth,.05rem);border-style:solid;border-color:#ccc;border-color:var(--clr-datagrid-popover-border-color,#ccc);padding:.9rem;-webkit-box-shadow:0 .05rem .15rem rgba(140,140,140,.25);box-shadow:0 .05rem .15rem rgba(140,140,140,.25);-webkit-box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));border-radius:.15rem;border-radius:var(--clr-global-borderradius,.15rem);font-weight:400}.datagrid-filter .datagrid-filter-close-wrapper{text-align:right}.datagrid-filter .datagrid-filter-close-wrapper .close{float:none}.datagrid-filter .datagrid-filter-apply{margin-bottom:0}.datagrid-action-overflow{position:absolute;background:#fff;background:var(--clr-datagrid-popover-bg-color,#fff);padding:.3rem;margin-left:.3rem;border-width:.05rem;border-width:var(--clr-global-borderwidth,.05rem);border-style:solid;border-color:#ccc;border-color:var(--clr-datagrid-popover-border-color,#ccc);-webkit-box-shadow:0 .05rem .15rem rgba(140,140,140,.25);box-shadow:0 .05rem .15rem rgba(140,140,140,.25);-webkit-box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));box-shadow:0 .05rem .15rem var(--clr-datagrid-popovers-box-shadow-color,rgba(140,140,140,.25));border-radius:.15rem;border-radius:var(--clr-global-borderradius,.15rem);font-weight:400;white-space:nowrap}.datagrid-action-overflow::before{content:"";position:absolute;top:50%;right:100%;width:0;height:0;margin-top:-.3rem;border:.3rem solid transparent;border-left:0 none;border-right-color:#ccc;border-right-color:var(--clr-datagrid-popover-border-color,#ccc)}.datagrid-action-overflow::after{content:"";position:absolute;top:50%;right:100%;width:0;height:0;margin-top:-.25rem;border-right:.25rem solid #fff;border-top:.25rem solid transparent;border-bottom:.25rem solid transparent}.datagrid-action-overflow .action-item{color:#666;color:var(--clr-dropdown-text-color,#666);font-size:.7rem;letter-spacing:normal;background:0 0;border:0;cursor:pointer;display:block;line-height:1.15rem;margin:0;padding:.05rem 1.2rem 0;text-align:left;width:100%}.datagrid-action-overflow .action-item:focus,.datagrid-action-overflow .action-item:hover{text-decoration:none;background-color:#e8e8e8;background-color:var(--clr-datagrid-action-popover-hover-color,#e8e8e8)}.datagrid-action-overflow .action-item.active{background-color:#e8e8e8;background-color:var(--clr-datagrid-row-hover,#e8e8e8);color:#000;color:var(--clr-datagrid-row-hover-font-color,#000)}.datagrid-action-overflow .action-item:focus{outline:0}.datagrid-action-overflow .action-item.disabled,.datagrid-action-overflow .action-item:disabled{cursor:not-allowed;opacity:.4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datagrid-action-overflow .action-item.disabled:hover,.datagrid-action-overflow .action-item:disabled:hover{background:0 0}.datagrid-action-overflow .action-item.disabled:active,.datagrid-action-overflow .action-item.disabled:focus,.datagrid-action-overflow .action-item:disabled:active,.datagrid-action-overflow .action-item:disabled:focus{background:0 0;-webkit-box-shadow:none;box-shadow:none}.datagrid-action-overflow .action-item cds-icon{vertical-align:middle;-webkit-transform:translate3d(0,-1px,0);transform:translate3d(0,-1px,0)}.datagrid-host.datagrid-calculate-mode{display:block}.datagrid-host.datagrid-calculate-mode .datagrid,.datagrid-host.datagrid-calculate-mode .datagrid-footer,.datagrid-host.datagrid-calculate-mode .datagrid-row-clickable,.datagrid-host.datagrid-calculate-mode .datagrid-row-master{display:none}.datagrid-host.datagrid-calculate-mode .datagrid-calculation-table{display:table;table-layout:auto}.datagrid-host.datagrid-calculate-mode .datagrid-calculation-table .datagrid-calculation-header{display:table-header-group}.datagrid-host.datagrid-calculate-mode .datagrid-calculation-table .datagrid-calculation-header .datagrid-column{display:table-cell;min-width:4.8rem}.datagrid-host.datagrid-calculate-mode .datagrid-calculation-table .datagrid-calculation-header .datagrid-column{border-color:#e8e8e8;border-color:var(--clr-tablerow-bordercolor,#e8e8e8);border-width:.05rem;border-width:var(--clr-table-borderwidth,.05rem);border-style:solid;padding:.55rem .6rem .55rem;vertical-align:top;color:#666;color:var(--clr-p6-color,#666);font-weight:600;font-weight:var(--clr-font-weight-bold,600);font-size:.55rem;letter-spacing:.03em;line-height:.6rem;margin-top:1.2rem;margin-bottom:0}.datagrid-host.datagrid-calculate-mode .datagrid-calculation-table .datagrid-row{display:table-row}.datagrid-host.datagrid-calculate-mode .datagrid-calculation-table .datagrid-row .datagrid-cell{display:table-cell;min-width:4.8rem;font-size:.65rem;line-height:.7rem;padding:.55rem .6rem .55rem;vertical-align:top}.datagrid-host.datagrid-calculate-mode .datagrid-column-separator{display:none}.datagrid-host.datagrid-calculate-mode .datagrid-placeholder-container{display:none}.datagrid-host.datagrid-calculate-mode .datagrid-fixed-column{display:none}.fade{opacity:0;-webkit-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out;will-change:opacity}.fade.in{opacity:1}.fadeDown{opacity:0;-webkit-transform:translate(0,-25%);transform:translate(0,-25%);-webkit-transition:opacity .2s ease-in-out,-webkit-transform .2s ease-in-out;transition:opacity .2s ease-in-out,-webkit-transform .2s ease-in-out;transition:opacity .2s ease-in-out,transform .2s ease-in-out;transition:opacity .2s ease-in-out,transform .2s ease-in-out,-webkit-transform .2s ease-in-out;will-change:opacity,transform}.fadeDown.in{opacity:1;-webkit-transform:translate(0,0);transform:translate(0,0)}.offscreen-focus-rebounder{position:fixed!important;border:none!important;height:1px!important;width:1px!important;left:0!important;top:-convertBaselineToBase20(1)!important;overflow:hidden!important;visibility:hidden!important;padding:0!important;margin:0 0 -convertBaselineToBase20(1) 0!important;visibility:visible!important}:root{--clr-nav-box-shadow-color:var(--clr-color-neutral-400);--clr-nav-active-box-shadow-color:var(--clr-color-action-600);--clr-nav-active-bg-color:var(--clr-global-selection-color);--clr-nav-hover-bg-color:var(--clr-sidenav-link-hover-color);--clr-nav-link-color:var(--clr-color-neutral-600);--clr-nav-link-active-color:var(--clr-color-neutral-1000);--clr-nav-link-font-weight:var(--clr-p1-font-weight);--clr-nav-link-active-font-weight:var(--clr-nav-link-font-weight)}@media screen{section[aria-hidden=true]{display:none}}[data-hidden=true]{display:none}button.nav-link{border-radius:0;text-transform:capitalize;min-width:0}.tabs-overflow{position:relative}.tabs-overflow .nav-item{margin-right:0}.tab-content{display:inline}_:-ms-fullscreen .tab-content,:root .tab-content{display:inline-block;width:100%}.tabs-vertical{display:-webkit-box;display:-ms-flexbox;display:flex}.tabs-vertical>.nav{height:auto;-webkit-box-shadow:none;box-shadow:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;margin-right:1.2rem;overflow:auto;-ms-flex-negative:0;flex-shrink:0;padding:.2rem;width:12rem;min-width:2.4rem}.tabs-vertical>.nav .nav-link{text-align:left;padding:0 .6rem;border:none;margin-bottom:.05rem;-ms-flex-negative:0;flex-shrink:0;margin-top:0;margin-left:0;width:100%}.tabs-vertical>.nav .nav-link.nav-item{margin-right:0}.tabs-vertical>.nav .nav-link.active,.tabs-vertical>.nav .nav-link:hover{-webkit-box-shadow:inset .15rem 0 0 #0072a3;box-shadow:inset .15rem 0 0 #0072a3;-webkit-box-shadow:inset .15rem 0 0 var(--clr-nav-active-box-shadow-color);box-shadow:inset .15rem 0 0 var(--clr-nav-active-box-shadow-color)}.tabs-vertical>.nav .nav-link.active{background-color:#d8e3e9;background-color:var(--clr-nav-active-bg-color,#d8e3e9)}.tabs-vertical>.nav .nav-link:not(.active):hover{background-color:#e8e8e8;background-color:var(--clr-nav-hover-bg-color,#e8e8e8)}:root{--clr-wizard-main-bgcolor:var(--clr-color-neutral-0);--clr-wizard-sidenav-bgcolor:var(--clr-color-neutral-50);--clr-wizard-main-textColor:var(--clr-color-on-neutral-0);--clr-wizard-sidenav-text:var(--clr-color-neutral-900);--clr-wizard-sidenav-text--active:var(--clr-global-on-selection-color);--clr-wizard-title-text:var(--clr-color-neutral-1000);--clr-wizard-stepnav-border-size:0.2rem;--clr-wizard-stepnav-border-color:var(--clr-color-neutral-200);--clr-wizard-stepnav-border-color--active:var(--clr-color-success-400);--clr-wizard-stepnav-active-bgcolor:var(--clr-global-selection-color);--clr-wizard-header-action-color:var(--clr-color-neutral-600);--clr-wizard-header-action-color--hovered:var(--clr-color-neutral-1000);--clr-wizard-border-radius:var(--clr-global-borderradius);--clr-wizard-stepnav-active-border-radius:var(--clr-wizard-border-radius);--clr-wizard-step-nav-border-color:hsl(0, 0%, 89%);--clr-wizard-box-shadow-color:rgba(0, 0, 0, 0.2)}.clr-wizard .modal-dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-shadow:0 .05rem .1rem .1rem rgba(0,0,0,.2);box-shadow:0 .05rem .1rem .1rem rgba(0,0,0,.2);-webkit-box-shadow:0 .05rem .1rem .1rem var(--clr-wizard-box-shadow-color);box-shadow:0 .05rem .1rem .1rem var(--clr-wizard-box-shadow-color);height:50%;max-height:100%}.clr-wizard .modal-content{border-radius:0;border-top-right-radius:.15rem;border-top-right-radius:var(--clr-wizard-border-radius,.15rem);border-bottom-right-radius:.15rem;border-bottom-right-radius:var(--clr-wizard-border-radius,.15rem);-webkit-box-shadow:none;box-shadow:none;padding:0;-webkit-box-flex:2;-ms-flex:2 2 auto;flex:2 2 auto;width:66%;height:initial;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.clr-wizard .modal-header,.clr-wizard .modal-header--accessible{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:100%;padding:1.2rem .95rem .3rem 1.2rem}.clr-wizard .modal-title{color:#000;color:var(--clr-wizard-title-text,#000);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;width:100%;line-height:1.356rem;margin-top:-.156rem}.clr-wizard .modal-body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;color:#000;color:var(--clr-wizard-main-textColor,#000);width:100%}.clr-wizard .modal-footer{padding:0;display:block;padding-top:1.2rem;height:4.2rem;min-height:4.2rem;max-height:4.2rem;width:100%;-webkit-box-flex:0;-ms-flex:0 0 4.2rem;flex:0 0 4.2rem}.clr-wizard .clr-wizard-btn{margin:0;max-width:100%;display:block}.clr-wizard .modal-title-text{display:inline-block;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;width:100%;outline:0}.clr-wizard .modal-title-wrapper{width:100%}.clr-wizard .modal-header-actions-wrapper{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;padding-left:.6rem;padding-right:.2rem}.clr-wizard .clr-wizard-header-action{height:1.2rem;width:1.2rem;padding:0;margin:0;min-width:1.2rem;line-height:1.2rem;font-size:1.3rem;color:#8c8c8c;color:var(--clr-wizard-header-action-color,#8c8c8c);-webkit-transition:color linear .2s;transition:color linear .2s}.clr-wizard .clr-wizard-header-action a{color:#8c8c8c;color:var(--clr-wizard-header-action-color,#8c8c8c)}.clr-wizard .clr-wizard-header-action:active,.clr-wizard .clr-wizard-header-action:focus,.clr-wizard .clr-wizard-header-action:hover{color:#000;color:var(--clr-wizard-header-action-color--hovered,#000)}.clr-wizard .clr-wizard-header-action cds-icon{height:1.1rem;width:1.1rem}.clr-wizard .clr-wizard-stepnav-wrapper{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;width:34%;max-width:34%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;overflow:hidden;overflow-y:auto;padding-bottom:1.2rem;line-height:1.2rem;border-right-width:.05rem;border-right-width:var(--clr-global-borderwidth,.05rem);border-right-style:solid;border-right-color:#e3e3e3;border-right-color:var(--clr-wizard-step-nav-border-color,#e3e3e3);height:100%;background-color:#fafafa;background-color:var(--clr-wizard-sidenav-bgcolor,#fafafa);border-radius:0;border-top-left-radius:.15rem;border-top-left-radius:var(--clr-wizard-border-radius,.15rem);border-bottom-left-radius:.15rem;border-bottom-left-radius:var(--clr-wizard-border-radius,.15rem)}.clr-wizard .clr-wizard-stepnav{padding-left:1.2rem;display:block;font-size:.7rem;color:#333;color:var(--clr-wizard-sidenav-text,#333);width:100%;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.clr-wizard .clr-wizard-stepnav-list{display:block;-webkit-box-shadow:none;box-shadow:none;counter-reset:a;white-space:nowrap;height:auto;list-style-type:none;margin:0;width:100%}.clr-wizard .clr-wizard-stepnav-item{display:block;-webkit-box-shadow:.2rem 0 0 #e8e8e8 inset;box-shadow:.2rem 0 0 #e8e8e8 inset;-webkit-box-shadow:var(--clr-wizard-stepnav-border-size) 0 0 var(--clr-wizard-stepnav-border-color) inset;box-shadow:var(--clr-wizard-stepnav-border-size) 0 0 var(--clr-wizard-stepnav-border-color) inset;margin:0 0 -.05rem 0;padding:.3rem 0;padding-left:.4rem;color:#333;color:var(--clr-wizard-sidenav-text,#333);font-weight:400;font-weight:var(--clr-font-weight-regular,400)}.clr-wizard .clr-wizard-stepnav-item.active{color:#000;color:var(--clr-wizard-sidenav-text--active,#000);font-weight:500;font-weight:var(--clr-font-weight-semibold,500)}.clr-wizard .clr-wizard-stepnav-item.active .clr-wizard-stepnav-link{background-color:#d8e3e9;background-color:var(--clr-wizard-stepnav-active-bgcolor,#d8e3e9);border-radius:0;border-top-left-radius:.15rem;border-top-left-radius:var(--clr-wizard-border-radius,.15rem);border-bottom-left-radius:.15rem;border-bottom-left-radius:var(--clr-wizard-border-radius,.15rem)}.clr-wizard .clr-wizard-stepnav-item.complete{-webkit-box-shadow:.2rem 0 0 #5eb715 inset;box-shadow:.2rem 0 0 #5eb715 inset;-webkit-box-shadow:var(--clr-wizard-stepnav-border-size) 0 0 var(--clr-wizard-stepnav-border-color--active) inset;box-shadow:var(--clr-wizard-stepnav-border-size) 0 0 var(--clr-wizard-stepnav-border-color--active) inset;-webkit-transition:-webkit-box-shadow .2s ease-in;transition:-webkit-box-shadow .2s ease-in;transition:box-shadow .2s ease-in;transition:box-shadow .2s ease-in,-webkit-box-shadow .2s ease-in}.clr-wizard .clr-wizard-stepnav-item.error{-webkit-box-shadow:.2rem 0 0 #c21d00 inset;box-shadow:.2rem 0 0 #c21d00 inset;-webkit-transition:-webkit-box-shadow .2s ease-in;transition:-webkit-box-shadow .2s ease-in;transition:box-shadow .2s ease-in;transition:box-shadow .2s ease-in,-webkit-box-shadow .2s ease-in}.clr-wizard .clr-wizard-stepnav-item.no-click button{pointer-events:none}.clr-wizard .clr-wizard-stepnav-link{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;color:inherit;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 .15rem 0 .5rem;font-size:.7rem;font-weight:inherit;letter-spacing:normal;text-align:left;text-transform:none;margin:0}.clr-wizard .clr-wizard-stepnav-link .clr-wizard-stepnav-link-suffix{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-width:1.2rem;padding-right:.35rem}.clr-wizard .clr-wizard-stepnav-link .clr-wizard-stepnav-link-suffix .clr-wizard-stepnav-item-error-icon{-webkit-transform:none;transform:none;fill:#c21d00}.clr-wizard .clr-wizard-title{color:#000;color:var(--clr-wizard-title-text,#000);margin-top:0;padding-top:1.2rem;padding-left:1.2rem;padding-right:.6rem;padding-bottom:1.2rem;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;font-size:1.1rem;line-height:1.2rem}.clr-wizard .modal-content-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%;height:100%;width:100%;max-height:100%}.clr-wizard .modal-content-wrapper .modal-nav{height:auto}.clr-wizard .clr-wizard-footer-buttons{text-align:right;padding-right:1.2rem;margin:0}.clr-wizard .clr-wizard-footer-buttons-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.clr-wizard .clr-wizard-btn-wrapper{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;min-width:4.2rem;padding-left:.6rem}.clr-wizard .clr-wizard-btn-wrapper[aria-hidden=true]{display:none}.clr-wizard .clr-wizard-btn.btn-link{padding:0}.clr-wizard .clr-wizard-content{display:block}.clr-wizard .clr-wizard-page:not([aria-hidden=true]){padding:1.2rem;padding-top:.9rem;display:block}.clr-wizard .modal-dialog{height:75vh}.clr-wizard .modal-body{max-height:100%}.clr-wizard.wizard-md .modal-dialog{min-height:21rem;max-height:25.2rem}.clr-wizard.wizard-md .clr-wizard-stepnav-wrapper,.clr-wizard.wizard-md .modal-content{max-height:25.2rem}.clr-wizard.wizard-md .clr-wizard-stepnav-wrapper{min-width:10.8rem;max-width:12rem}.clr-wizard.wizard-lg .modal-dialog{min-height:21rem;max-height:36rem}.clr-wizard.wizard-lg .clr-wizard-stepnav-wrapper,.clr-wizard.wizard-lg .modal-content{max-height:36rem}.clr-wizard.wizard-lg .clr-wizard-stepnav-wrapper,.clr-wizard.wizard-lg .nav-panel{min-width:12rem;max-width:14.4rem}.clr-wizard.wizard-xl .modal-dialog{height:75vh;max-height:none}.clr-wizard.wizard-xl .clr-wizard-stepnav-wrapper,.clr-wizard.wizard-xl .nav-panel{min-width:12rem;max-width:15.6rem}.clr-wizard .spinner:not(.spinner-inline):not(.clr-treenode-spinner){left:calc(50% + 5.75rem);position:absolute;top:40%}.clr-wizard-page>:first-child{margin-top:0}.clr-wizard-page>:first-child>:first-child{margin-top:0}.clr-wizard-page>form:first-child{padding-top:0}.clr-wizard-page>form:first-child>.form-block:first-child{margin-top:0}.clr-wizard--inline{display:block;width:100%}.clr-wizard--inline>clr-modal>.modal:focus{outline-style:none;outline-color:transparent}.clr-wizard--inline clr-modal{height:100%;width:100%;display:block}.clr-wizard--inline .modal{padding:0;position:static;height:100%;max-height:100%}.clr-wizard--inline .modal .content-container{height:100%}.clr-wizard--inline .modal .content-container .nav-panel{height:99%;width:99%}.clr-wizard--inline .modal .modal-content{-webkit-box-shadow:none;box-shadow:none}.clr-wizard--inline .modal .modal-dialog{min-height:100%;height:100%;width:100%;z-index:auto}.clr-wizard--inline .modal-body{height:100%}.clr-wizard--inline .modal-header .close,.clr-wizard--inline .modal-header--accessible .close{display:none}.clr-wizard--inline .nav.navList{padding-top:0}.clr-wizard--inline .modal-dialog .modal-content .modal-body .content-area{overflow-y:auto}.clr-wizard--inline .modal-backdrop{height:0;width:0;display:none}.clr-wizard--inline .modal-content-wrapper{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;height:100%}.clr-wizard--inline .clr-wizard-stepnav-wrapper,.clr-wizard--inline.clr-wizard .modal-content{min-height:100%;height:auto;max-height:100%}.clr-wizard--inline .clr-wizard-stepnav-wrapper .clr-wizard-stepnav,.clr-wizard--inline.clr-wizard .modal-content .clr-wizard-stepnav{height:100%}.clr-wizard--no-shadow .modal-content-wrapper,.clr-wizard--no-shadow .modal-dialog{-webkit-box-shadow:none;box-shadow:none}.clr-wizard--no-title .clr-wizard-title{display:none}.clr-wizard--no-title .clr-wizard-stepnav{padding-top:1.2rem}@media screen{.clr-wizard-page[aria-hidden=true]{display:none}}@supports (-ms-ime-align:auto){.clr-wizard .clr-wizard-header-action{margin-top:-.15rem}}:root{--clr-signpost-content-bg-color:var(--clr-color-neutral-0);--clr-signpost-content-border-color:var(--clr-color-neutral-500);--clr-signpost-action-color:var(--clr-color-neutral-600);--clr-signpost-action-hover-color:var(--clr-color-action-700);--clr-signpost-border-radius:var(--clr-global-borderradius)}.signpost{display:inline-block}.signpost:hover{cursor:pointer}.signpost .signpost-action{min-width:1.2rem;margin:0;padding:0;color:#8c8c8c;color:var(--clr-signpost-action-color,#8c8c8c)}.signpost .signpost-action cds-icon{height:1.2rem;width:1.2rem}.signpost .signpost-action.active,.signpost .signpost-action:hover{color:#00648f;color:var(--clr-signpost-action-hover-color,#00648f)}.signpost .signpost-content-header button cds-icon{height:.8rem;width:.8rem}.signpost-trigger{margin:0;padding:0;display:inline-block}.signpost-content{background-color:transparent;min-width:10.8rem;max-width:18rem;min-height:2.4rem;max-height:25.2rem;display:inline-block;position:relative;z-index:1070}.signpost-content:hover{cursor:default}.signpost-content .popover-pointer{height:0;width:0;position:absolute}.signpost-content .popover-pointer:before{content:"";height:0;width:0;position:absolute}.signpost-content.top-left .popover-pointer,.signpost-content.top-middle .popover-pointer,.signpost-content.top-right .popover-pointer{border-top:.6rem solid #b3b3b3;bottom:-.6rem}.signpost-content.top-left .popover-pointer:before,.signpost-content.top-middle .popover-pointer:before,.signpost-content.top-right .popover-pointer:before{border-top:.6rem solid #fff;bottom:.1rem}.signpost-content.top-left .signpost-wrap{border-bottom-right-radius:0}.signpost-content.top-left .popover-pointer{border-left:.6rem solid transparent;right:-.05rem}.signpost-content.top-left .popover-pointer:before{border-left:.6rem solid transparent;right:.05rem}.signpost-content.top-middle .popover-pointer{border-right:.6rem solid transparent;left:50%}.signpost-content.top-middle .popover-pointer:before{border-right:.6rem solid transparent;left:.05rem}.signpost-content.top-right .signpost-wrap{border-bottom-left-radius:0}.signpost-content.top-right .popover-pointer{border-right:.6rem solid transparent;left:-.05rem}.signpost-content.top-right .popover-pointer:before{border-right:.6rem solid transparent;left:.05rem}.signpost-content.bottom-left .popover-pointer,.signpost-content.bottom-middle .popover-pointer,.signpost-content.bottom-right .popover-pointer{border-bottom:.6rem solid #b3b3b3;top:-.55rem}.signpost-content.bottom-left .popover-pointer:before,.signpost-content.bottom-middle .popover-pointer:before,.signpost-content.bottom-right .popover-pointer:before{border-bottom:.6rem solid #fff;top:.1rem}.signpost-content.bottom-left .signpost-wrap{border-top-right-radius:0}.signpost-content.bottom-left .popover-pointer{border-left:.6rem solid transparent;right:-.05rem}.signpost-content.bottom-left .popover-pointer:before{border-left:.6rem solid transparent;right:.05rem}.signpost-content.bottom-middle .popover-pointer{border-right:.6rem solid transparent;right:50%}.signpost-content.bottom-middle .popover-pointer:before{border-right:.6rem solid transparent;right:-.65rem}.signpost-content.bottom-right .signpost-wrap{border-top-left-radius:0}.signpost-content.bottom-right .popover-pointer{border-right:.6rem solid transparent;left:-.05rem}.signpost-content.bottom-right .popover-pointer:before{border-right:.6rem solid transparent;left:.05rem}.signpost-content.left-bottom .popover-pointer,.signpost-content.left-middle .popover-pointer,.signpost-content.left-top .popover-pointer{border-left:.6rem solid #b3b3b3;right:-.6rem}.signpost-content.left-bottom .popover-pointer:before,.signpost-content.left-middle .popover-pointer:before,.signpost-content.left-top .popover-pointer:before{border-left:.6rem solid #fff}.signpost-content.left-top .signpost-wrap{border-bottom-right-radius:0}.signpost-content.left-top .popover-pointer{border-top:.6rem solid transparent;bottom:-.05rem}.signpost-content.left-top .popover-pointer:before{border-top:.6rem solid transparent;top:-.65rem;right:.1rem}.signpost-content.left-middle .popover-pointer{border-bottom:.6rem solid transparent;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.signpost-content.left-middle .popover-pointer:before{border-bottom:.6rem solid transparent;top:.05rem;left:-.7rem}.signpost-content.left-bottom .signpost-wrap{border-top-right-radius:0}.signpost-content.left-bottom .popover-pointer{border-bottom:.6rem solid transparent;top:-.05rem}.signpost-content.left-bottom .popover-pointer:before{border-bottom:.6rem solid transparent;top:.05rem;left:-.7rem}.signpost-content.right-bottom .popover-pointer,.signpost-content.right-middle .popover-pointer,.signpost-content.right-top .popover-pointer{border-right:.6rem solid #b3b3b3;left:-.6rem}.signpost-content.right-bottom .popover-pointer:before,.signpost-content.right-middle .popover-pointer:before,.signpost-content.right-top .popover-pointer:before{border-right:.6rem solid #fff;left:.1rem}.signpost-content.right-top .signpost-wrap{border-bottom-left-radius:0}.signpost-content.right-top .popover-pointer{border-top:.6rem solid transparent;bottom:-.05rem}.signpost-content.right-top .popover-pointer:before{border-top:.6rem solid transparent;top:-.65rem}.signpost-content.right-middle .popover-pointer{border-bottom:.6rem solid transparent;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.signpost-content.right-middle .popover-pointer:before{border-bottom:.6rem solid transparent;top:.05rem}.signpost-content.right-bottom .signpost-wrap{border-top-left-radius:0}.signpost-content.right-bottom .popover-pointer{border-bottom:.6rem solid transparent;top:-.05rem}.signpost-content.right-bottom .popover-pointer:before{border-bottom:.6rem solid transparent;top:.05rem}.signpost-content-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;position:absolute;width:100%;background-color:inherit;top:0}.signpost-wrap{border-radius:.15rem;border-radius:var(--clr-signpost-border-radius,.15rem);border-width:.05rem;border-width:var(--clr-global-borderwidth,.05rem);border-style:solid;border-color:#b3b3b3;border-color:var(--clr-signpost-content-border-color,#b3b3b3);background-color:#fff;background-color:var(--clr-signpost-content-bg-color,#fff);z-index:1070;position:relative}.signpost-content-body{padding:1.2rem;max-height:24rem;overflow-y:auto}.drag-handle{cursor:-webkit-grab;cursor:grab}.in-drag{cursor:-webkit-grabbing;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.in-drag *{pointer-events:none}.in-drag .draggable.being-dragged{opacity:.6}.draggable-ghost{position:fixed;display:block;visibility:hidden;z-index:2147483647;pointer-events:none;will-change:left,top}.draggable-ghost>.draggable{margin:0;opacity:1}.draggable-ghost.dropped{opacity:0}.droppable.draggable-match{border:.05rem dashed #c090d5}.droppable.draggable-over{border:.05rem dashed #680094}:root{--clr-accordion-text-color:var(--clr-global-font-color);--clr-accordion-active-background-color:var(--clr-global-selection-color);--clr-accordion-content-background-color:var(--clr-color-neutral-0);--clr-accordion-header-background-color:var(--clr-color-neutral-50);--clr-accordion-header-hover-background-color:var(--clr-color-neutral-200);--clr-accordion-header-font-size:0.8rem;--clr-accordion-header-button-font-size:0.6rem;--clr-accordion-title-font-weight:500;--clr-accordion-title-font-size:0.65rem;--clr-accordion-error-color:var(--clr-global-error-color);--clr-accordion-complete-color:var(--clr-global-success-color);--clr-accordion-border-color:var(--clr-color-neutral-400);--clr-accordion-border-radius:var(--clr-global-borderradius);--clr-accordion-border-left-color:#e8e8e8;--clr-accordion-border-left-width:0.3rem;--clr-accordion-border-left-color-complete:var(--clr-accordion-complete-color);--clr-accordion-border-left-color-error:var(--clr-accordion-error-color);--clr-accordion-header-left-indicator:inset var(--clr-accordion-border-left-width) 0 0 var(--clr-accordion-border-left-color);--clr-accordion-header-left-complete-indicator:inset var(--clr-accordion-border-left-width) 0 0 var(--clr-accordion-border-left-color-complete);--clr-accordion-header-left-error-indicator:inset var(--clr-accordion-border-left-width) 0 0 var(--clr-accordion-border-left-color-error)}.clr-accordion{display:block;counter-reset:accordion;margin-bottom:1.2rem}.clr-accordion-panel{display:block}.clr-accordion-header{color:#666;color:var(--clr-accordion-text-color,#666);border:.05rem solid;border-color:#ccc;border-color:var(--clr-accordion-border-color,#ccc);-webkit-box-shadow:inset .3rem 0 0 #e8e8e8;box-shadow:inset .3rem 0 0 #e8e8e8;-webkit-box-shadow:var(--clr-accordion-header-left-indicator,inset .3rem 0 0 #e8e8e8);box-shadow:var(--clr-accordion-header-left-indicator,inset .3rem 0 0 #e8e8e8);background:#fafafa;background:var(--clr-accordion-header-background-color,#fafafa);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;border-bottom:0;width:100%;font-size:.8rem;font-size:var(--clr-accordion-header-font-size,.8rem);text-align:left}.clr-accordion-header:hover{background-color:#fafafa;background-color:var(--clr-accordion-header-background-color,#fafafa)}.clr-accordion-panel:last-child .clr-accordion-content,.clr-accordion-panel:last-child .clr-accordion-header{border-bottom-style:solid;border-bottom-width:.05rem;border-bottom-width:var(--clr-global-borderwidth,.05rem);border-bottom-color:#ccc;border-bottom-color:var(--clr-accordion-border-color,#ccc)}.clr-accordion-number{padding:0 .9rem;display:none}.clr-accordion-number::before{content:counter(accordion) ".";counter-increment:accordion}.clr-accordion-header-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-flex:1;-ms-flex:1 1 0%;flex:1 1 0%;width:100%;border:0;padding:.9rem;background:0 0;text-align:left;cursor:pointer;color:#666;color:var(--clr-accordion-text-color,#666)}@media (min-width:576px){.clr-accordion-header-button{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row;flex-flow:row}}.clr-accordion-status{width:1.8rem;display:inline-block;vertical-align:top}.clr-accordion-title{display:inline-block}@media (min-width:576px){clr-step-title.clr-accordion-title{min-width:8.64rem}}.clr-accordion-header-has-description .clr-accordion-title{max-width:13.2rem}.clr-accordion-description{display:inline-block;max-width:32.5rem}@media (min-width:576px){.clr-accordion-description{margin-left:1.8rem}}.clr-accordion-content{background:#fff;background:var(--clr-accordion-content-background-color,#fff);border-width:.05rem;border-width:var(--clr-global-borderwidth,.05rem);border-style:solid;border-color:#ccc;border-color:var(--clr-accordion-border-color,#ccc);border-bottom:0;overflow:hidden;padding:.9rem;display:none}.clr-accordion-content .clr-form{padding:0}.clr-accordion-content.ng-trigger{padding:0}@media (min-width:576px){.clr-accordion-content{padding:.9rem 2.7rem}}.clr-accordion-inner-content{padding:.9rem}@media (min-width:576px){.clr-accordion-inner-content{padding:.9rem 2.7rem}}.clr-accordion-angle{-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.clr-accordion-complete-icon,.clr-accordion-error-icon{height:1.2rem;width:1.2rem;display:none;padding:0;margin:0 .6rem}.clr-accordion-panel-open .clr-accordion-content{display:block}.clr-accordion-panel-open .clr-accordion-angle{visibility:visible;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.clr-accordion-panel-open .clr-accordion-header{background:#d8e3e9;background:var(--clr-accordion-active-background-color,#d8e3e9)}.clr-accordion-panel-complete .clr-accordion-complete-icon{display:inline-block;color:#5aa220;color:var(--clr-accordion-complete-color,#5aa220)}.clr-accordion-panel-complete .clr-accordion-angle{visibility:visible}.clr-accordion-panel-complete .clr-accordion-header{-webkit-box-shadow:inset .3rem 0 0 #5aa220;box-shadow:inset .3rem 0 0 #5aa220;-webkit-box-shadow:var(--clr-accordion-header-left-complete-indicator,inset .3rem 0 0 #5aa220);box-shadow:var(--clr-accordion-header-left-complete-indicator,inset .3rem 0 0 #5aa220)}.clr-accordion-panel-complete .ng-trigger.clr-accordion-content{display:block}.clr-accordion-panel-error .clr-accordion-header{border-bottom:.05rem solid;border-color:#c21d00;border-color:var(--clr-accordion-border-left-color-error,#c21d00);-webkit-box-shadow:inset .3rem 0 0 #c21d00;box-shadow:inset .3rem 0 0 #c21d00;-webkit-box-shadow:var(--clr-accordion-header-left-error-indicator,inset .3rem 0 0 #c21d00);box-shadow:var(--clr-accordion-header-left-error-indicator,inset .3rem 0 0 #c21d00);background-color:#d8e3e9;background-color:var(--clr-accordion-active-background-color,#d8e3e9)}.clr-accordion-panel-error .clr-accordion-error-icon{display:inline-block;color:#c21d00;color:var(--clr-accordion-error-color,#c21d00)}.clr-accordion-panel-complete .clr-accordion-number,.clr-accordion-panel-error .clr-accordion-number{position:absolute;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap;top:0;left:0}.clr-accordion:not(.clr-stepper-forms) .clr-accordion-header{-webkit-box-shadow:none;box-shadow:none}.clr-accordion:not(.clr-stepper-forms) .clr-accordion-panel:first-child .clr-accordion-header{border-top-left-radius:.15rem;border-top-left-radius:var(--clr-accordion-border-radius,.15rem);border-top-right-radius:.15rem;border-top-right-radius:var(--clr-accordion-border-radius,.15rem)}.clr-accordion:not(.clr-stepper-forms) .clr-accordion-panel:last-child .clr-accordion-content,.clr-accordion:not(.clr-stepper-forms) .clr-accordion-panel:last-child .clr-accordion-header{border-bottom-left-radius:.15rem;border-bottom-left-radius:var(--clr-accordion-border-radius,.15rem);border-bottom-right-radius:.15rem;border-bottom-right-radius:var(--clr-accordion-border-radius,.15rem)}.clr-accordion:not(.clr-stepper-forms) .clr-accordion-title{font-weight:500;font-weight:var(--clr-accordion-title-font-weight,500);font-size:.65rem;font-size:var(--clr-accordion-title-font-size,.65rem)}.clr-accordion:not(.clr-stepper-forms) .clr-accordion-header-button{font-size:.6rem;font-size:var(--clr-accordion-header-button-font-size,.6rem);padding:.3rem .6rem}.clr-accordion:not(.clr-stepper-forms) .clr-accordion-content{padding:0}.clr-accordion:not(.clr-stepper-forms) .clr-accordion-inner-content{padding:.3rem 1.75rem}.clr-accordion:not(.clr-stepper-forms) .clr-accordion-status{width:.96rem}.clr-accordion:not(.clr-stepper-forms) .clr-accordion-status cds-icon{height:.7rem;width:.7rem}.clr-accordion-panel-open .clr-accordion-header{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;border-bottom:0!important}.clr-stepper-forms .clr-accordion-panel-inactive .clr-accordion-angle{visibility:hidden}.clr-stepper-forms .clr-accordion-panel-open .clr-accordion-angle{visibility:visible}.clr-stepper-forms .clr-accordion-status{min-width:3.6rem}.clr-stepper-forms .clr-accordion-number{display:inline-block}.clr-step-button{display:block;margin-top:1.2rem}:root{--clr-timeline-line-color:var(--clr-color-neutral-500);--clr-timeline-step-header-color:var(--clr-color-neutral-600);--clr-timeline-step-title-color:var(--clr-color-neutral-700);--clr-timeline-step-description-color:var(--clr-color-neutral-700);--clr-timeline-incomplete-step-color:var(--clr-color-neutral-600);--clr-timeline-current-step-color:var(--clr-color-action-600);--clr-timeline-success-step-color:var(--clr-color-success-400);--clr-timeline-error-step-color:var(--clr-color-danger-800);--clr-timeline-step-title-font-weight:var(--clr-p2-font-weight)}.clr-timeline{display:-webkit-box;display:-ms-flexbox;display:flex;padding:.6rem}.clr-timeline-step{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;min-width:8.75rem;margin-left:.6rem}.clr-timeline-step cds-icon{height:1.8rem;width:1.8rem;min-height:1.8rem;min-width:1.8rem}.clr-timeline-step cds-icon[shape=circle]{color:#8c8c8c;color:var(--clr-timeline-incomplete-step-color,#8c8c8c)}.clr-timeline-step cds-icon[shape=dot-circle]{color:#0072a3;color:var(--clr-timeline-current-step-color,#0072a3)}.clr-timeline-step cds-icon[shape=success-standard]{color:#5eb715;color:var(--clr-timeline-success-step-color,#5eb715)}.clr-timeline-step cds-icon[shape=error-standard]{color:#c21d00;color:var(--clr-timeline-error-step-color,#c21d00)}.clr-timeline-step:not(:last-of-type) .clr-timeline-step-body::before{content:"";background:#b3b3b3;background:var(--clr-timeline-line-color,#b3b3b3);height:.1rem;width:calc(100% - .9rem - .1rem);-webkit-transform:translate(1.7rem,-.95rem);transform:translate(1.7rem,-.95rem)}.clr-timeline-step-header{color:#8c8c8c;color:var(--clr-timeline-step-header-color,#8c8c8c);font-size:.65rem;line-height:.9rem;white-space:nowrap;margin-bottom:.4rem}.clr-timeline-step-body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.clr-timeline-step-title{color:#666;color:var(--clr-timeline-step-title-color,#666);font-size:.65rem;font-weight:500;font-weight:var(--clr-timeline-step-title-font-weight,500);line-height:.9rem;margin-top:.4rem;margin-bottom:.3rem}.clr-timeline-step-description{color:#666;color:var(--clr-timeline-step-description-color,#666);font-size:.55rem;line-height:.8rem}.clr-timeline-step-description button{display:block;margin-top:.4rem}.clr-timeline-step-description img{width:100%;margin-top:.4rem}.clr-timeline.clr-timeline-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-width:16rem}.clr-timeline.clr-timeline-vertical .clr-timeline-step{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-left:0;position:relative}.clr-timeline.clr-timeline-vertical .clr-timeline-step:not(:last-of-type){margin-bottom:1.8rem}.clr-timeline.clr-timeline-vertical .clr-timeline-step:not(:last-of-type) .clr-timeline-step-body::before{position:absolute;width:.1rem;height:calc(100% + .2rem);-webkit-transform:translate(-1.55rem,1.4rem);transform:translate(-1.55rem,1.4rem)}.clr-timeline.clr-timeline-vertical .clr-timeline-step-header{text-align:right;white-space:normal;word-break:break-word;width:3rem;min-width:3rem;margin-right:.6rem;margin-top:.3rem;margin-bottom:0}.clr-timeline.clr-timeline-vertical .clr-timeline-step-title{margin-top:0}.clr-timeline.clr-timeline-vertical .clr-timeline-step-body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-width:8.9rem;margin-left:.6rem;margin-top:.3rem}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}} + */ /*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */ +html { + font-family: sans-serif; + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} +body { + margin: 0; +} +article, +aside, +details, +figcaption, +figure, +footer, +header, +main, +menu, +nav, +section, +summary { + display: block; +} +audio, +canvas, +progress, +video { + display: inline-block; +} +audio:not([controls]) { + display: none; + height: 0; +} +progress { + vertical-align: baseline; +} +[hidden], +template { + display: none; +} +a { + background-color: transparent; + -webkit-text-decoration-skip: objects; +} +a:active, +a:hover { + outline-width: 0; +} +abbr[title] { + border-bottom: none; + text-decoration: underline; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} +b, +strong { + font-weight: inherit; +} +b, +strong { + font-weight: bolder; +} +dfn { + font-style: italic; +} +h1 { + font-size: 2em; + margin: 0.67em 0; +} +mark { + background-color: #ff0; + color: #000; +} +small { + font-size: 80%; +} +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} +img { + border-style: none; +} +svg:not(:root) { + overflow: hidden; +} +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} +figure { + margin: 1em 40px; +} +hr { + -webkit-box-sizing: content-box; + box-sizing: content-box; + height: 0; + overflow: visible; +} +button, +input, +optgroup, +select, +textarea { + font: inherit; + margin: 0; +} +optgroup { + font-weight: 700; +} +button, +input { + overflow: visible; +} +button, +select { + text-transform: none; +} +[type="reset"], +[type="submit"], +button, +html [type="button"] { + -webkit-appearance: button; +} +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner, +button::-moz-focus-inner { + border-style: none; + padding: 0; +} +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring, +button:-moz-focusring { + outline: 1px dotted ButtonText; +} +fieldset { + border: 1px solid silver; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} +legend { + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; +} +textarea { + overflow: auto; +} +[type="checkbox"], +[type="radio"] { + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding: 0; +} +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; +} +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} +:root { + --clr-color-neutral-0: white; + --clr-color-neutral-50: #fafafa; + --clr-color-neutral-100: #f2f2f2; + --clr-color-neutral-200: #e8e8e8; + --clr-color-neutral-300: #dedede; + --clr-color-neutral-400: #cccccc; + --clr-color-neutral-500: #b3b3b3; + --clr-color-neutral-600: #8c8c8c; + --clr-color-neutral-700: #666666; + --clr-color-neutral-800: #454545; + --clr-color-neutral-900: #333333; + --clr-color-neutral-1000: black; + --clr-color-on-neutral-0: black; + --clr-color-on-neutral-50: black; + --clr-color-on-neutral-100: black; + --clr-color-on-neutral-200: black; + --clr-color-on-neutral-300: black; + --clr-color-on-neutral-400: black; + --clr-color-on-neutral-500: black; + --clr-color-on-neutral-600: white; + --clr-color-on-neutral-700: white; + --clr-color-on-neutral-800: white; + --clr-color-on-neutral-900: white; + --clr-color-on-neutral-1000: white; + --clr-color-action-50: #e3f5fc; + --clr-color-action-100: #c8eaf9; + --clr-color-action-200: #9bd8f3; + --clr-color-action-300: #79c6e6; + --clr-color-action-400: #49aeda; + --clr-color-action-500: #179bd3; + --clr-color-action-600: #0072a3; + --clr-color-action-700: #00648f; + --clr-color-action-800: #00567a; + --clr-color-action-900: #004b6b; + --clr-color-action-1000: #00364d; + --clr-color-on-action-50: black; + --clr-color-on-action-100: black; + --clr-color-on-action-200: black; + --clr-color-on-action-300: black; + --clr-color-on-action-400: black; + --clr-color-on-action-500: black; + --clr-color-on-action-600: white; + --clr-color-on-action-700: white; + --clr-color-on-action-800: white; + --clr-color-on-action-900: white; + --clr-color-on-action-1000: white; + --clr-color-secondary-action-50: #f7e6ff; + --clr-color-secondary-action-100: #e6caf1; + --clr-color-secondary-action-200: #d2aae4; + --clr-color-secondary-action-300: #c090d5; + --clr-color-secondary-action-400: #af73c9; + --clr-color-secondary-action-500: #9e57bc; + --clr-color-secondary-action-600: #8a39ac; + --clr-color-secondary-action-700: #781d9f; + --clr-color-secondary-action-800: #680094; + --clr-color-secondary-action-900: #4f0070; + --clr-color-secondary-action-1000: #320047; + --clr-color-on-secondary-action-50: black; + --clr-color-on-secondary-action-100: black; + --clr-color-on-secondary-action-200: black; + --clr-color-on-secondary-action-300: black; + --clr-color-on-secondary-action-400: black; + --clr-color-on-secondary-action-500: white; + --clr-color-on-secondary-action-600: white; + --clr-color-on-secondary-action-700: white; + --clr-color-on-secondary-action-800: white; + --clr-color-on-secondary-action-900: white; + --clr-color-on-secondary-action-1000: white; + --clr-color-danger-50: #fff2f0; + --clr-color-danger-100: #feddd7; + --clr-color-danger-200: #fcc5bb; + --clr-color-danger-300: #f59e8f; + --clr-color-danger-400: #f27963; + --clr-color-danger-500: #f35e44; + --clr-color-danger-600: #f52d0a; + --clr-color-danger-700: #db2100; + --clr-color-danger-800: #c21d00; + --clr-color-danger-900: #991700; + --clr-color-danger-1000: #660f00; + --clr-color-on-danger-50: black; + --clr-color-on-danger-100: black; + --clr-color-on-danger-200: black; + --clr-color-on-danger-300: black; + --clr-color-on-danger-400: black; + --clr-color-on-danger-500: black; + --clr-color-on-danger-600: black; + --clr-color-on-danger-700: white; + --clr-color-on-danger-800: white; + --clr-color-on-danger-900: white; + --clr-color-on-danger-1000: white; + --clr-color-warning-50: #fffae6; + --clr-color-warning-100: #fff4c7; + --clr-color-warning-200: #ffeea8; + --clr-color-warning-300: #fee272; + --clr-color-warning-400: #f8cf2a; + --clr-color-warning-500: #efc006; + --clr-color-warning-600: #e6b000; + --clr-color-warning-700: #d69a00; + --clr-color-warning-800: #ad7600; + --clr-color-warning-900: #8f5a00; + --clr-color-warning-1000: #613200; + --clr-color-on-warning-50: black; + --clr-color-on-warning-100: black; + --clr-color-on-warning-200: black; + --clr-color-on-warning-300: black; + --clr-color-on-warning-400: black; + --clr-color-on-warning-500: black; + --clr-color-on-warning-600: black; + --clr-color-on-warning-700: black; + --clr-color-on-warning-800: black; + --clr-color-on-warning-900: black; + --clr-color-on-warning-1000: white; + --clr-color-success-50: #dff0d0; + --clr-color-success-100: #bce49a; + --clr-color-success-200: #73dc1e; + --clr-color-success-300: #68c71a; + --clr-color-success-400: #5eb715; + --clr-color-success-500: #5aa220; + --clr-color-success-600: #4b970c; + --clr-color-success-700: #3c8500; + --clr-color-success-800: #306b00; + --clr-color-success-900: #255200; + --clr-color-success-1000: #1e4200; + --clr-color-on-success-50: black; + --clr-color-on-success-100: black; + --clr-color-on-success-200: black; + --clr-color-on-success-300: black; + --clr-color-on-success-400: black; + --clr-color-on-success-500: black; + --clr-color-on-success-600: black; + --clr-color-on-success-700: white; + --clr-color-on-success-800: white; + --clr-color-on-success-900: white; + --clr-color-on-success-1000: white; +} +:root { + --clr-global-borderradius: 0.15rem; + --clr-global-borderwidth: 0.05rem; + --clr-global-app-background: #fafafa; + --clr-global-selection-color: #d8e3e9; + --clr-global-on-selection-color: black; + --clr-global-hover-color: #e8e8e8; + --clr-global-content-header-font-color: black; + --clr-global-font-color: #666666; + --clr-global-success-color: #5aa220; + --clr-global-error-color: #c21d00; + --clr-close-color--normal: #8c8c8c; + --clr-close-color--normal-opacity: 0.2; + --clr-close-color--hover: black; + --clr-close-color--hover-opacity: 0.5; + --clr-popover-box-shadow-color: rgba(140, 140, 140, 0.25); +} +:root { + --clr-font: Metropolis, Avenir Next, Helvetica Neue, Arial, sans-serif; + --clr-display-font: var(--clr-font); + --clr-font-weight-light: 200; + --clr-font-weight-regular: 400; + --clr-font-weight-semibold: 500; + --clr-font-weight-bold: 600; + --clr-font-weight-extrabold: 600; + --clr-h1-color: var(--clr-global-content-header-font-color); + --clr-h1-font-weight: var(--clr-font-weight-light); + --clr-h1-font-family: var(--clr-display-font); + --clr-h2-color: var(--clr-global-content-header-font-color); + --clr-h2-font-weight: var(--clr-font-weight-light); + --clr-h2-font-family: var(--clr-display-font); + --clr-h3-color: var(--clr-global-content-header-font-color); + --clr-h3-font-weight: var(--clr-font-weight-light); + --clr-h3-font-family: var(--clr-display-font); + --clr-h4-color: var(--clr-global-content-header-font-color); + --clr-h4-font-weight: var(--clr-font-weight-light); + --clr-h4-font-family: var(--clr-display-font); + --clr-h5-color: var(--clr-global-font-color); + --clr-h5-font-weight: var(--clr-font-weight-regular); + --clr-h5-font-family: var(--clr-display-font); + --clr-h6-color: var(--clr-color-neutral-900); + --clr-h6-font-weight: var(--clr-font-weight-semibold); + --clr-h6-font-family: var(--clr-display-font); + --clr-p0-color: var(--clr-global-font-color); + --clr-p0-font-weight: var(--clr-font-weight-light); + --clr-p1-color: var(--clr-global-font-color); + --clr-p1-font-weight: var(--clr-font-weight-regular); + --clr-p2-color: var(--clr-global-font-color); + --clr-p2-font-weight: var(--clr-font-weight-semibold); + --clr-p3-color: var(--clr-global-font-color); + --clr-p3-font-weight: var(--clr-font-weight-regular); + --clr-p4-color: var(--clr-global-font-color); + --clr-p4-font-weight: var(--clr-font-weight-bold); + --clr-p5-color: var(--clr-global-font-color); + --clr-p5-font-weight: var(--clr-font-weight-regular); + --clr-p6-color: var(--clr-global-font-color); + --clr-p6-font-weight: var(--clr-font-weight-bold); + --clr-p7-color: var(--clr-global-font-color); + --clr-p7-font-weight: var(--clr-font-weight-regular); + --clr-p8-color: var(--clr-global-font-color); + --clr-p8-font-weight: var(--clr-font-weight-regular); +} +.clr-align-baseline { + vertical-align: baseline !important; +} +.clr-align-top { + vertical-align: top !important; +} +.clr-align-middle { + vertical-align: middle !important; +} +.clr-align-bottom { + vertical-align: bottom !important; +} +.clr-align-text-bottom { + vertical-align: text-bottom !important; +} +.clr-align-text-top { + vertical-align: text-top !important; +} +.clr-clearfix::after { + content: ""; + display: table; + clear: both; +} +.clr-display-block { + display: block !important; +} +.clr-display-inline-block { + display: inline-block !important; +} +.clr-display-inline { + display: inline !important; +} +.clr-flex-row { + -webkit-box-orient: horizontal !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: row !important; + flex-direction: row !important; +} +.clr-flex-column { + -webkit-box-orient: vertical !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: column !important; + flex-direction: column !important; +} +.clr-flex-row-reverse { + -webkit-box-orient: horizontal !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: row-reverse !important; + flex-direction: row-reverse !important; +} +.clr-flex-column-reverse { + -webkit-box-orient: vertical !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; +} +.clr-flex-wrap { + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; +} +.clr-flex-nowrap { + -ms-flex-wrap: nowrap !important; + flex-wrap: nowrap !important; +} +.clr-flex-wrap-reverse { + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; +} +.clr-flex-fill { + -webkit-box-flex: 1 !important; + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; +} +.clr-flex-grow-0 { + -webkit-box-flex: 0 !important; + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; +} +.clr-flex-grow-1 { + -webkit-box-flex: 1 !important; + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; +} +.clr-flex-shrink-0 { + -ms-flex-negative: 0 !important; + flex-shrink: 0 !important; +} +.clr-flex-shrink-1 { + -ms-flex-negative: 1 !important; + flex-shrink: 1 !important; +} +.clr-justify-content-start { + -webkit-box-pack: start !important; + -ms-flex-pack: start !important; + justify-content: flex-start !important; +} +.clr-justify-content-end { + -webkit-box-pack: end !important; + -ms-flex-pack: end !important; + justify-content: flex-end !important; +} +.clr-justify-content-center { + -webkit-box-pack: center !important; + -ms-flex-pack: center !important; + justify-content: center !important; +} +.clr-justify-content-between { + -webkit-box-pack: justify !important; + -ms-flex-pack: justify !important; + justify-content: space-between !important; +} +.clr-justify-content-around { + -ms-flex-pack: distribute !important; + justify-content: space-around !important; +} +.clr-align-items-start { + -webkit-box-align: start !important; + -ms-flex-align: start !important; + align-items: flex-start !important; +} +.clr-align-items-end { + -webkit-box-align: end !important; + -ms-flex-align: end !important; + align-items: flex-end !important; +} +.clr-align-items-center { + -webkit-box-align: center !important; + -ms-flex-align: center !important; + align-items: center !important; +} +.clr-align-items-baseline { + -webkit-box-align: baseline !important; + -ms-flex-align: baseline !important; + align-items: baseline !important; +} +.clr-align-items-stretch { + -webkit-box-align: stretch !important; + -ms-flex-align: stretch !important; + align-items: stretch !important; +} +.clr-align-content-start { + -ms-flex-line-pack: start !important; + align-content: flex-start !important; +} +.clr-align-content-end { + -ms-flex-line-pack: end !important; + align-content: flex-end !important; +} +.clr-align-content-center { + -ms-flex-line-pack: center !important; + align-content: center !important; +} +.clr-align-content-between { + -ms-flex-line-pack: justify !important; + align-content: space-between !important; +} +.clr-align-content-around { + -ms-flex-line-pack: distribute !important; + align-content: space-around !important; +} +.clr-align-content-stretch { + -ms-flex-line-pack: stretch !important; + align-content: stretch !important; +} +.clr-align-self-auto { + -ms-flex-item-align: auto !important; + align-self: auto !important; +} +.clr-align-self-start { + -ms-flex-item-align: start !important; + align-self: flex-start !important; +} +.clr-align-self-end { + -ms-flex-item-align: end !important; + align-self: flex-end !important; +} +.clr-align-self-center { + -ms-flex-item-align: center !important; + align-self: center !important; +} +.clr-align-self-baseline { + -ms-flex-item-align: baseline !important; + align-self: baseline !important; +} +.clr-align-self-stretch { + -ms-flex-item-align: stretch !important; + align-self: stretch !important; +} +@media (min-width: 576px) { + .clr-flex-sm-row { + -webkit-box-orient: horizontal !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: row !important; + flex-direction: row !important; + } + .clr-flex-sm-column { + -webkit-box-orient: vertical !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: column !important; + flex-direction: column !important; + } + .clr-flex-sm-row-reverse { + -webkit-box-orient: horizontal !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: row-reverse !important; + flex-direction: row-reverse !important; + } + .clr-flex-sm-column-reverse { + -webkit-box-orient: vertical !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; + } + .clr-flex-sm-wrap { + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; + } + .clr-flex-sm-nowrap { + -ms-flex-wrap: nowrap !important; + flex-wrap: nowrap !important; + } + .clr-flex-sm-wrap-reverse { + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; + } + .clr-flex-sm-fill { + -webkit-box-flex: 1 !important; + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; + } + .clr-flex-sm-grow-0 { + -webkit-box-flex: 0 !important; + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; + } + .clr-flex-sm-grow-1 { + -webkit-box-flex: 1 !important; + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; + } + .clr-flex-sm-shrink-0 { + -ms-flex-negative: 0 !important; + flex-shrink: 0 !important; + } + .clr-flex-sm-shrink-1 { + -ms-flex-negative: 1 !important; + flex-shrink: 1 !important; + } + .clr-justify-content-sm-start { + -webkit-box-pack: start !important; + -ms-flex-pack: start !important; + justify-content: flex-start !important; + } + .clr-justify-content-sm-end { + -webkit-box-pack: end !important; + -ms-flex-pack: end !important; + justify-content: flex-end !important; + } + .clr-justify-content-sm-center { + -webkit-box-pack: center !important; + -ms-flex-pack: center !important; + justify-content: center !important; + } + .clr-justify-content-sm-between { + -webkit-box-pack: justify !important; + -ms-flex-pack: justify !important; + justify-content: space-between !important; + } + .clr-justify-content-sm-around { + -ms-flex-pack: distribute !important; + justify-content: space-around !important; + } + .clr-align-items-sm-start { + -webkit-box-align: start !important; + -ms-flex-align: start !important; + align-items: flex-start !important; + } + .clr-align-items-sm-end { + -webkit-box-align: end !important; + -ms-flex-align: end !important; + align-items: flex-end !important; + } + .clr-align-items-sm-center { + -webkit-box-align: center !important; + -ms-flex-align: center !important; + align-items: center !important; + } + .clr-align-items-sm-baseline { + -webkit-box-align: baseline !important; + -ms-flex-align: baseline !important; + align-items: baseline !important; + } + .clr-align-items-sm-stretch { + -webkit-box-align: stretch !important; + -ms-flex-align: stretch !important; + align-items: stretch !important; + } + .clr-align-content-sm-start { + -ms-flex-line-pack: start !important; + align-content: flex-start !important; + } + .clr-align-content-sm-end { + -ms-flex-line-pack: end !important; + align-content: flex-end !important; + } + .clr-align-content-sm-center { + -ms-flex-line-pack: center !important; + align-content: center !important; + } + .clr-align-content-sm-between { + -ms-flex-line-pack: justify !important; + align-content: space-between !important; + } + .clr-align-content-sm-around { + -ms-flex-line-pack: distribute !important; + align-content: space-around !important; + } + .clr-align-content-sm-stretch { + -ms-flex-line-pack: stretch !important; + align-content: stretch !important; + } + .clr-align-self-sm-auto { + -ms-flex-item-align: auto !important; + align-self: auto !important; + } + .clr-align-self-sm-start { + -ms-flex-item-align: start !important; + align-self: flex-start !important; + } + .clr-align-self-sm-end { + -ms-flex-item-align: end !important; + align-self: flex-end !important; + } + .clr-align-self-sm-center { + -ms-flex-item-align: center !important; + align-self: center !important; + } + .clr-align-self-sm-baseline { + -ms-flex-item-align: baseline !important; + align-self: baseline !important; + } + .clr-align-self-sm-stretch { + -ms-flex-item-align: stretch !important; + align-self: stretch !important; + } +} +@media (min-width: 768px) { + .clr-flex-md-row { + -webkit-box-orient: horizontal !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: row !important; + flex-direction: row !important; + } + .clr-flex-md-column { + -webkit-box-orient: vertical !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: column !important; + flex-direction: column !important; + } + .clr-flex-md-row-reverse { + -webkit-box-orient: horizontal !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: row-reverse !important; + flex-direction: row-reverse !important; + } + .clr-flex-md-column-reverse { + -webkit-box-orient: vertical !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; + } + .clr-flex-md-wrap { + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; + } + .clr-flex-md-nowrap { + -ms-flex-wrap: nowrap !important; + flex-wrap: nowrap !important; + } + .clr-flex-md-wrap-reverse { + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; + } + .clr-flex-md-fill { + -webkit-box-flex: 1 !important; + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; + } + .clr-flex-md-grow-0 { + -webkit-box-flex: 0 !important; + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; + } + .clr-flex-md-grow-1 { + -webkit-box-flex: 1 !important; + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; + } + .clr-flex-md-shrink-0 { + -ms-flex-negative: 0 !important; + flex-shrink: 0 !important; + } + .clr-flex-md-shrink-1 { + -ms-flex-negative: 1 !important; + flex-shrink: 1 !important; + } + .clr-justify-content-md-start { + -webkit-box-pack: start !important; + -ms-flex-pack: start !important; + justify-content: flex-start !important; + } + .clr-justify-content-md-end { + -webkit-box-pack: end !important; + -ms-flex-pack: end !important; + justify-content: flex-end !important; + } + .clr-justify-content-md-center { + -webkit-box-pack: center !important; + -ms-flex-pack: center !important; + justify-content: center !important; + } + .clr-justify-content-md-between { + -webkit-box-pack: justify !important; + -ms-flex-pack: justify !important; + justify-content: space-between !important; + } + .clr-justify-content-md-around { + -ms-flex-pack: distribute !important; + justify-content: space-around !important; + } + .clr-align-items-md-start { + -webkit-box-align: start !important; + -ms-flex-align: start !important; + align-items: flex-start !important; + } + .clr-align-items-md-end { + -webkit-box-align: end !important; + -ms-flex-align: end !important; + align-items: flex-end !important; + } + .clr-align-items-md-center { + -webkit-box-align: center !important; + -ms-flex-align: center !important; + align-items: center !important; + } + .clr-align-items-md-baseline { + -webkit-box-align: baseline !important; + -ms-flex-align: baseline !important; + align-items: baseline !important; + } + .clr-align-items-md-stretch { + -webkit-box-align: stretch !important; + -ms-flex-align: stretch !important; + align-items: stretch !important; + } + .clr-align-content-md-start { + -ms-flex-line-pack: start !important; + align-content: flex-start !important; + } + .clr-align-content-md-end { + -ms-flex-line-pack: end !important; + align-content: flex-end !important; + } + .clr-align-content-md-center { + -ms-flex-line-pack: center !important; + align-content: center !important; + } + .clr-align-content-md-between { + -ms-flex-line-pack: justify !important; + align-content: space-between !important; + } + .clr-align-content-md-around { + -ms-flex-line-pack: distribute !important; + align-content: space-around !important; + } + .clr-align-content-md-stretch { + -ms-flex-line-pack: stretch !important; + align-content: stretch !important; + } + .clr-align-self-md-auto { + -ms-flex-item-align: auto !important; + align-self: auto !important; + } + .clr-align-self-md-start { + -ms-flex-item-align: start !important; + align-self: flex-start !important; + } + .clr-align-self-md-end { + -ms-flex-item-align: end !important; + align-self: flex-end !important; + } + .clr-align-self-md-center { + -ms-flex-item-align: center !important; + align-self: center !important; + } + .clr-align-self-md-baseline { + -ms-flex-item-align: baseline !important; + align-self: baseline !important; + } + .clr-align-self-md-stretch { + -ms-flex-item-align: stretch !important; + align-self: stretch !important; + } +} +@media (min-width: 992px) { + .clr-flex-lg-row { + -webkit-box-orient: horizontal !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: row !important; + flex-direction: row !important; + } + .clr-flex-lg-column { + -webkit-box-orient: vertical !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: column !important; + flex-direction: column !important; + } + .clr-flex-lg-row-reverse { + -webkit-box-orient: horizontal !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: row-reverse !important; + flex-direction: row-reverse !important; + } + .clr-flex-lg-column-reverse { + -webkit-box-orient: vertical !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; + } + .clr-flex-lg-wrap { + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; + } + .clr-flex-lg-nowrap { + -ms-flex-wrap: nowrap !important; + flex-wrap: nowrap !important; + } + .clr-flex-lg-wrap-reverse { + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; + } + .clr-flex-lg-fill { + -webkit-box-flex: 1 !important; + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; + } + .clr-flex-lg-grow-0 { + -webkit-box-flex: 0 !important; + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; + } + .clr-flex-lg-grow-1 { + -webkit-box-flex: 1 !important; + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; + } + .clr-flex-lg-shrink-0 { + -ms-flex-negative: 0 !important; + flex-shrink: 0 !important; + } + .clr-flex-lg-shrink-1 { + -ms-flex-negative: 1 !important; + flex-shrink: 1 !important; + } + .clr-justify-content-lg-start { + -webkit-box-pack: start !important; + -ms-flex-pack: start !important; + justify-content: flex-start !important; + } + .clr-justify-content-lg-end { + -webkit-box-pack: end !important; + -ms-flex-pack: end !important; + justify-content: flex-end !important; + } + .clr-justify-content-lg-center { + -webkit-box-pack: center !important; + -ms-flex-pack: center !important; + justify-content: center !important; + } + .clr-justify-content-lg-between { + -webkit-box-pack: justify !important; + -ms-flex-pack: justify !important; + justify-content: space-between !important; + } + .clr-justify-content-lg-around { + -ms-flex-pack: distribute !important; + justify-content: space-around !important; + } + .clr-align-items-lg-start { + -webkit-box-align: start !important; + -ms-flex-align: start !important; + align-items: flex-start !important; + } + .clr-align-items-lg-end { + -webkit-box-align: end !important; + -ms-flex-align: end !important; + align-items: flex-end !important; + } + .clr-align-items-lg-center { + -webkit-box-align: center !important; + -ms-flex-align: center !important; + align-items: center !important; + } + .clr-align-items-lg-baseline { + -webkit-box-align: baseline !important; + -ms-flex-align: baseline !important; + align-items: baseline !important; + } + .clr-align-items-lg-stretch { + -webkit-box-align: stretch !important; + -ms-flex-align: stretch !important; + align-items: stretch !important; + } + .clr-align-content-lg-start { + -ms-flex-line-pack: start !important; + align-content: flex-start !important; + } + .clr-align-content-lg-end { + -ms-flex-line-pack: end !important; + align-content: flex-end !important; + } + .clr-align-content-lg-center { + -ms-flex-line-pack: center !important; + align-content: center !important; + } + .clr-align-content-lg-between { + -ms-flex-line-pack: justify !important; + align-content: space-between !important; + } + .clr-align-content-lg-around { + -ms-flex-line-pack: distribute !important; + align-content: space-around !important; + } + .clr-align-content-lg-stretch { + -ms-flex-line-pack: stretch !important; + align-content: stretch !important; + } + .clr-align-self-lg-auto { + -ms-flex-item-align: auto !important; + align-self: auto !important; + } + .clr-align-self-lg-start { + -ms-flex-item-align: start !important; + align-self: flex-start !important; + } + .clr-align-self-lg-end { + -ms-flex-item-align: end !important; + align-self: flex-end !important; + } + .clr-align-self-lg-center { + -ms-flex-item-align: center !important; + align-self: center !important; + } + .clr-align-self-lg-baseline { + -ms-flex-item-align: baseline !important; + align-self: baseline !important; + } + .clr-align-self-lg-stretch { + -ms-flex-item-align: stretch !important; + align-self: stretch !important; + } +} +@media (min-width: 1200px) { + .clr-flex-xl-row { + -webkit-box-orient: horizontal !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: row !important; + flex-direction: row !important; + } + .clr-flex-xl-column { + -webkit-box-orient: vertical !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: column !important; + flex-direction: column !important; + } + .clr-flex-xl-row-reverse { + -webkit-box-orient: horizontal !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: row-reverse !important; + flex-direction: row-reverse !important; + } + .clr-flex-xl-column-reverse { + -webkit-box-orient: vertical !important; + -webkit-box-direction: reverse !important; + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; + } + .clr-flex-xl-wrap { + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; + } + .clr-flex-xl-nowrap { + -ms-flex-wrap: nowrap !important; + flex-wrap: nowrap !important; + } + .clr-flex-xl-wrap-reverse { + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; + } + .clr-flex-xl-fill { + -webkit-box-flex: 1 !important; + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; + } + .clr-flex-xl-grow-0 { + -webkit-box-flex: 0 !important; + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; + } + .clr-flex-xl-grow-1 { + -webkit-box-flex: 1 !important; + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; + } + .clr-flex-xl-shrink-0 { + -ms-flex-negative: 0 !important; + flex-shrink: 0 !important; + } + .clr-flex-xl-shrink-1 { + -ms-flex-negative: 1 !important; + flex-shrink: 1 !important; + } + .clr-justify-content-xl-start { + -webkit-box-pack: start !important; + -ms-flex-pack: start !important; + justify-content: flex-start !important; + } + .clr-justify-content-xl-end { + -webkit-box-pack: end !important; + -ms-flex-pack: end !important; + justify-content: flex-end !important; + } + .clr-justify-content-xl-center { + -webkit-box-pack: center !important; + -ms-flex-pack: center !important; + justify-content: center !important; + } + .clr-justify-content-xl-between { + -webkit-box-pack: justify !important; + -ms-flex-pack: justify !important; + justify-content: space-between !important; + } + .clr-justify-content-xl-around { + -ms-flex-pack: distribute !important; + justify-content: space-around !important; + } + .clr-align-items-xl-start { + -webkit-box-align: start !important; + -ms-flex-align: start !important; + align-items: flex-start !important; + } + .clr-align-items-xl-end { + -webkit-box-align: end !important; + -ms-flex-align: end !important; + align-items: flex-end !important; + } + .clr-align-items-xl-center { + -webkit-box-align: center !important; + -ms-flex-align: center !important; + align-items: center !important; + } + .clr-align-items-xl-baseline { + -webkit-box-align: baseline !important; + -ms-flex-align: baseline !important; + align-items: baseline !important; + } + .clr-align-items-xl-stretch { + -webkit-box-align: stretch !important; + -ms-flex-align: stretch !important; + align-items: stretch !important; + } + .clr-align-content-xl-start { + -ms-flex-line-pack: start !important; + align-content: flex-start !important; + } + .clr-align-content-xl-end { + -ms-flex-line-pack: end !important; + align-content: flex-end !important; + } + .clr-align-content-xl-center { + -ms-flex-line-pack: center !important; + align-content: center !important; + } + .clr-align-content-xl-between { + -ms-flex-line-pack: justify !important; + align-content: space-between !important; + } + .clr-align-content-xl-around { + -ms-flex-line-pack: distribute !important; + align-content: space-around !important; + } + .clr-align-content-xl-stretch { + -ms-flex-line-pack: stretch !important; + align-content: stretch !important; + } + .clr-align-self-xl-auto { + -ms-flex-item-align: auto !important; + align-self: auto !important; + } + .clr-align-self-xl-start { + -ms-flex-item-align: start !important; + align-self: flex-start !important; + } + .clr-align-self-xl-end { + -ms-flex-item-align: end !important; + align-self: flex-end !important; + } + .clr-align-self-xl-center { + -ms-flex-item-align: center !important; + align-self: center !important; + } + .clr-align-self-xl-baseline { + -ms-flex-item-align: baseline !important; + align-self: baseline !important; + } + .clr-align-self-xl-stretch { + -ms-flex-item-align: stretch !important; + align-self: stretch !important; + } +} +.clr-flex-xs-first { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; +} +.clr-flex-xs-last { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; +} +.clr-flex-xs-unordered { + -webkit-box-ordinal-group: 1; + -ms-flex-order: 0; + order: 0; +} +.clr-flex-items-xs-top { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; +} +.clr-flex-items-xs-middle { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.clr-flex-items-xs-bottom { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; +} +.clr-flex-xs-top { + -ms-flex-item-align: start; + align-self: flex-start; +} +.clr-flex-xs-middle { + -ms-flex-item-align: center; + align-self: center; +} +.clr-flex-xs-bottom { + -ms-flex-item-align: end; + align-self: flex-end; +} +.clr-flex-items-xs-left { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; +} +.clr-flex-items-xs-center { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +.clr-flex-items-xs-right { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; +} +.clr-flex-items-xs-around { + -ms-flex-pack: distribute; + justify-content: space-around; +} +.clr-flex-items-xs-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} +@media (min-width: 576px) { + .clr-flex-sm-first { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; + } + .clr-flex-sm-last { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; + } + .clr-flex-sm-unordered { + -webkit-box-ordinal-group: 1; + -ms-flex-order: 0; + order: 0; + } +} +@media (min-width: 576px) { + .clr-flex-items-sm-top { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + } + .clr-flex-items-sm-middle { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + .clr-flex-items-sm-bottom { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + } +} +@media (min-width: 576px) { + .clr-flex-sm-top { + -ms-flex-item-align: start; + align-self: flex-start; + } + .clr-flex-sm-middle { + -ms-flex-item-align: center; + align-self: center; + } + .clr-flex-sm-bottom { + -ms-flex-item-align: end; + align-self: flex-end; + } +} +@media (min-width: 576px) { + .clr-flex-items-sm-left { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + } + .clr-flex-items-sm-center { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } + .clr-flex-items-sm-right { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + } + .clr-flex-items-sm-around { + -ms-flex-pack: distribute; + justify-content: space-around; + } + .clr-flex-items-sm-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + } +} +@media (min-width: 768px) { + .clr-flex-md-first { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; + } + .clr-flex-md-last { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; + } + .clr-flex-md-unordered { + -webkit-box-ordinal-group: 1; + -ms-flex-order: 0; + order: 0; + } +} +@media (min-width: 768px) { + .clr-flex-items-md-top { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + } + .clr-flex-items-md-middle { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + .clr-flex-items-md-bottom { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + } +} +@media (min-width: 768px) { + .clr-flex-md-top { + -ms-flex-item-align: start; + align-self: flex-start; + } + .clr-flex-md-middle { + -ms-flex-item-align: center; + align-self: center; + } + .clr-flex-md-bottom { + -ms-flex-item-align: end; + align-self: flex-end; + } +} +@media (min-width: 768px) { + .clr-flex-items-md-left { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + } + .clr-flex-items-md-center { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } + .clr-flex-items-md-right { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + } + .clr-flex-items-md-around { + -ms-flex-pack: distribute; + justify-content: space-around; + } + .clr-flex-items-md-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + } +} +@media (min-width: 992px) { + .clr-flex-lg-first { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; + } + .clr-flex-lg-last { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; + } + .clr-flex-lg-unordered { + -webkit-box-ordinal-group: 1; + -ms-flex-order: 0; + order: 0; + } +} +@media (min-width: 992px) { + .clr-flex-items-lg-top { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + } + .clr-flex-items-lg-middle { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + .clr-flex-items-lg-bottom { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + } +} +@media (min-width: 992px) { + .clr-flex-lg-top { + -ms-flex-item-align: start; + align-self: flex-start; + } + .clr-flex-lg-middle { + -ms-flex-item-align: center; + align-self: center; + } + .clr-flex-lg-bottom { + -ms-flex-item-align: end; + align-self: flex-end; + } +} +@media (min-width: 992px) { + .clr-flex-items-lg-left { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + } + .clr-flex-items-lg-center { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } + .clr-flex-items-lg-right { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + } + .clr-flex-items-lg-around { + -ms-flex-pack: distribute; + justify-content: space-around; + } + .clr-flex-items-lg-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + } +} +@media (min-width: 1200px) { + .clr-flex-xl-first { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; + } + .clr-flex-xl-last { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; + } + .clr-flex-xl-unordered { + -webkit-box-ordinal-group: 1; + -ms-flex-order: 0; + order: 0; + } +} +@media (min-width: 1200px) { + .clr-flex-items-xl-top { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + } + .clr-flex-items-xl-middle { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + .clr-flex-items-xl-bottom { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + } +} +@media (min-width: 1200px) { + .clr-flex-xl-top { + -ms-flex-item-align: start; + align-self: flex-start; + } + .clr-flex-xl-middle { + -ms-flex-item-align: center; + align-self: center; + } + .clr-flex-xl-bottom { + -ms-flex-item-align: end; + align-self: flex-end; + } +} +@media (min-width: 1200px) { + .clr-flex-items-xl-left { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + } + .clr-flex-items-xl-center { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } + .clr-flex-items-xl-right { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + } + .clr-flex-items-xl-around { + -ms-flex-pack: distribute; + justify-content: space-around; + } + .clr-flex-items-xl-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + } +} +.clr-float-xs-left { + float: left !important; +} +.clr-float-xs-right { + float: right !important; +} +.clr-float-xs-none { + float: none !important; +} +@media (min-width: 576px) { + .clr-float-sm-left { + float: left !important; + } + .clr-float-sm-right { + float: right !important; + } + .clr-float-sm-none { + float: none !important; + } +} +@media (min-width: 768px) { + .clr-float-md-left { + float: left !important; + } + .clr-float-md-right { + float: right !important; + } + .clr-float-md-none { + float: none !important; + } +} +@media (min-width: 992px) { + .clr-float-lg-left { + float: left !important; + } + .clr-float-lg-right { + float: right !important; + } + .clr-float-lg-none { + float: none !important; + } +} +@media (min-width: 1200px) { + .clr-float-xl-left { + float: left !important; + } + .clr-float-xl-right { + float: right !important; + } + .clr-float-xl-none { + float: none !important; + } +} +.clr-invisible { + visibility: hidden !important; +} +.clr-hidden-xs-up { + display: none !important; +} +@media (max-width: 575.98px) { + .clr-hidden-xs-down { + display: none !important; + } +} +@media (min-width: 576px) { + .clr-hidden-sm-up { + display: none !important; + } +} +@media (max-width: 767.98px) { + .clr-hidden-sm-down { + display: none !important; + } +} +@media (min-width: 768px) { + .clr-hidden-md-up { + display: none !important; + } +} +@media (max-width: 991.98px) { + .clr-hidden-md-down { + display: none !important; + } +} +@media (min-width: 992px) { + .clr-hidden-lg-up { + display: none !important; + } +} +@media (max-width: 1199.98px) { + .clr-hidden-lg-down { + display: none !important; + } +} +@media (min-width: 1200px) { + .clr-hidden-xl-up { + display: none !important; + } +} +.clr-hidden-xl-down { + display: none !important; +} +.clr-visible-print-block { + display: none !important; +} +@media print { + .clr-visible-print-block { + display: block !important; + } +} +.clr-visible-print-inline { + display: none !important; +} +@media print { + .clr-visible-print-inline { + display: inline !important; + } +} +.clr-visible-print-inline-block { + display: none !important; +} +@media print { + .clr-visible-print-inline-block { + display: inline-block !important; + } +} +@media print { + .clr-hidden-print { + display: none !important; + } +} +.clr-row { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.6rem; + margin-left: -0.6rem; +} +.clr-no-gutters { + margin-right: 0; + margin-left: 0; +} +.clr-no-gutters > .clr-col, +.clr-no-gutters > [class*="clr-col-"] { + padding-right: 0; + padding-left: 0; +} +.clr-col, +.clr-col-1, +.clr-col-10, +.clr-col-11, +.clr-col-12, +.clr-col-2, +.clr-col-3, +.clr-col-4, +.clr-col-5, +.clr-col-6, +.clr-col-7, +.clr-col-8, +.clr-col-9, +.clr-col-auto, +.clr-col-lg, +.clr-col-lg-1, +.clr-col-lg-10, +.clr-col-lg-11, +.clr-col-lg-12, +.clr-col-lg-2, +.clr-col-lg-3, +.clr-col-lg-4, +.clr-col-lg-5, +.clr-col-lg-6, +.clr-col-lg-7, +.clr-col-lg-8, +.clr-col-lg-9, +.clr-col-lg-auto, +.clr-col-md, +.clr-col-md-1, +.clr-col-md-10, +.clr-col-md-11, +.clr-col-md-12, +.clr-col-md-2, +.clr-col-md-3, +.clr-col-md-4, +.clr-col-md-5, +.clr-col-md-6, +.clr-col-md-7, +.clr-col-md-8, +.clr-col-md-9, +.clr-col-md-auto, +.clr-col-sm, +.clr-col-sm-1, +.clr-col-sm-10, +.clr-col-sm-11, +.clr-col-sm-12, +.clr-col-sm-2, +.clr-col-sm-3, +.clr-col-sm-4, +.clr-col-sm-5, +.clr-col-sm-6, +.clr-col-sm-7, +.clr-col-sm-8, +.clr-col-sm-9, +.clr-col-sm-auto, +.clr-col-xl, +.clr-col-xl-1, +.clr-col-xl-10, +.clr-col-xl-11, +.clr-col-xl-12, +.clr-col-xl-2, +.clr-col-xl-3, +.clr-col-xl-4, +.clr-col-xl-5, +.clr-col-xl-6, +.clr-col-xl-7, +.clr-col-xl-8, +.clr-col-xl-9, +.clr-col-xl-auto { + width: 100%; + min-height: 0.05rem; + padding-right: 0.6rem; + padding-left: 0.6rem; +} +.clr-col { + -ms-flex-preferred-size: 0; + flex-basis: 0; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + max-width: 100%; +} +.clr-col-auto { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; + max-width: none; +} +.clr-col-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.3333333333%; + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; +} +.clr-col-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.6666666667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; +} +.clr-col-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; +} +.clr-col-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.3333333333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; +} +.clr-col-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.6666666667%; + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; +} +.clr-col-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; +} +.clr-col-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.3333333333%; + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; +} +.clr-col-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.6666666667%; + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; +} +.clr-col-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; +} +.clr-col-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.3333333333%; + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; +} +.clr-col-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.6666666667%; + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; +} +.clr-col-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; +} +.clr-order-first { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; +} +.clr-order-last { + -webkit-box-ordinal-group: 14; + -ms-flex-order: 13; + order: 13; +} +.clr-order-0 { + -webkit-box-ordinal-group: 1; + -ms-flex-order: 0; + order: 0; +} +.clr-order-1 { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; +} +.clr-order-2 { + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; +} +.clr-order-3 { + -webkit-box-ordinal-group: 4; + -ms-flex-order: 3; + order: 3; +} +.clr-order-4 { + -webkit-box-ordinal-group: 5; + -ms-flex-order: 4; + order: 4; +} +.clr-order-5 { + -webkit-box-ordinal-group: 6; + -ms-flex-order: 5; + order: 5; +} +.clr-order-6 { + -webkit-box-ordinal-group: 7; + -ms-flex-order: 6; + order: 6; +} +.clr-order-7 { + -webkit-box-ordinal-group: 8; + -ms-flex-order: 7; + order: 7; +} +.clr-order-8 { + -webkit-box-ordinal-group: 9; + -ms-flex-order: 8; + order: 8; +} +.clr-order-9 { + -webkit-box-ordinal-group: 10; + -ms-flex-order: 9; + order: 9; +} +.clr-order-10 { + -webkit-box-ordinal-group: 11; + -ms-flex-order: 10; + order: 10; +} +.clr-order-11 { + -webkit-box-ordinal-group: 12; + -ms-flex-order: 11; + order: 11; +} +.clr-order-12 { + -webkit-box-ordinal-group: 13; + -ms-flex-order: 12; + order: 12; +} +.clr-offset-1 { + margin-left: 8.3333333333%; +} +.clr-offset-2 { + margin-left: 16.6666666667%; +} +.clr-offset-3 { + margin-left: 25%; +} +.clr-offset-4 { + margin-left: 33.3333333333%; +} +.clr-offset-5 { + margin-left: 41.6666666667%; +} +.clr-offset-6 { + margin-left: 50%; +} +.clr-offset-7 { + margin-left: 58.3333333333%; +} +.clr-offset-8 { + margin-left: 66.6666666667%; +} +.clr-offset-9 { + margin-left: 75%; +} +.clr-offset-10 { + margin-left: 83.3333333333%; +} +.clr-offset-11 { + margin-left: 91.6666666667%; +} +@media (min-width: 576px) { + .clr-col-sm { + -ms-flex-preferred-size: 0; + flex-basis: 0; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + max-width: 100%; + } + .clr-col-sm-auto { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; + max-width: none; + } + .clr-col-sm-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.3333333333%; + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; + } + .clr-col-sm-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.6666666667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; + } + .clr-col-sm-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; + } + .clr-col-sm-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.3333333333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; + } + .clr-col-sm-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.6666666667%; + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; + } + .clr-col-sm-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; + } + .clr-col-sm-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.3333333333%; + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; + } + .clr-col-sm-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.6666666667%; + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; + } + .clr-col-sm-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; + } + .clr-col-sm-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.3333333333%; + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; + } + .clr-col-sm-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.6666666667%; + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; + } + .clr-col-sm-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; + } + .clr-order-sm-first { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; + } + .clr-order-sm-last { + -webkit-box-ordinal-group: 14; + -ms-flex-order: 13; + order: 13; + } + .clr-order-sm-0 { + -webkit-box-ordinal-group: 1; + -ms-flex-order: 0; + order: 0; + } + .clr-order-sm-1 { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; + } + .clr-order-sm-2 { + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; + } + .clr-order-sm-3 { + -webkit-box-ordinal-group: 4; + -ms-flex-order: 3; + order: 3; + } + .clr-order-sm-4 { + -webkit-box-ordinal-group: 5; + -ms-flex-order: 4; + order: 4; + } + .clr-order-sm-5 { + -webkit-box-ordinal-group: 6; + -ms-flex-order: 5; + order: 5; + } + .clr-order-sm-6 { + -webkit-box-ordinal-group: 7; + -ms-flex-order: 6; + order: 6; + } + .clr-order-sm-7 { + -webkit-box-ordinal-group: 8; + -ms-flex-order: 7; + order: 7; + } + .clr-order-sm-8 { + -webkit-box-ordinal-group: 9; + -ms-flex-order: 8; + order: 8; + } + .clr-order-sm-9 { + -webkit-box-ordinal-group: 10; + -ms-flex-order: 9; + order: 9; + } + .clr-order-sm-10 { + -webkit-box-ordinal-group: 11; + -ms-flex-order: 10; + order: 10; + } + .clr-order-sm-11 { + -webkit-box-ordinal-group: 12; + -ms-flex-order: 11; + order: 11; + } + .clr-order-sm-12 { + -webkit-box-ordinal-group: 13; + -ms-flex-order: 12; + order: 12; + } + .clr-offset-sm-0 { + margin-left: 0; + } + .clr-offset-sm-1 { + margin-left: 8.3333333333%; + } + .clr-offset-sm-2 { + margin-left: 16.6666666667%; + } + .clr-offset-sm-3 { + margin-left: 25%; + } + .clr-offset-sm-4 { + margin-left: 33.3333333333%; + } + .clr-offset-sm-5 { + margin-left: 41.6666666667%; + } + .clr-offset-sm-6 { + margin-left: 50%; + } + .clr-offset-sm-7 { + margin-left: 58.3333333333%; + } + .clr-offset-sm-8 { + margin-left: 66.6666666667%; + } + .clr-offset-sm-9 { + margin-left: 75%; + } + .clr-offset-sm-10 { + margin-left: 83.3333333333%; + } + .clr-offset-sm-11 { + margin-left: 91.6666666667%; + } +} +@media (min-width: 768px) { + .clr-col-md { + -ms-flex-preferred-size: 0; + flex-basis: 0; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + max-width: 100%; + } + .clr-col-md-auto { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; + max-width: none; + } + .clr-col-md-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.3333333333%; + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; + } + .clr-col-md-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.6666666667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; + } + .clr-col-md-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; + } + .clr-col-md-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.3333333333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; + } + .clr-col-md-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.6666666667%; + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; + } + .clr-col-md-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; + } + .clr-col-md-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.3333333333%; + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; + } + .clr-col-md-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.6666666667%; + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; + } + .clr-col-md-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; + } + .clr-col-md-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.3333333333%; + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; + } + .clr-col-md-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.6666666667%; + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; + } + .clr-col-md-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; + } + .clr-order-md-first { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; + } + .clr-order-md-last { + -webkit-box-ordinal-group: 14; + -ms-flex-order: 13; + order: 13; + } + .clr-order-md-0 { + -webkit-box-ordinal-group: 1; + -ms-flex-order: 0; + order: 0; + } + .clr-order-md-1 { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; + } + .clr-order-md-2 { + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; + } + .clr-order-md-3 { + -webkit-box-ordinal-group: 4; + -ms-flex-order: 3; + order: 3; + } + .clr-order-md-4 { + -webkit-box-ordinal-group: 5; + -ms-flex-order: 4; + order: 4; + } + .clr-order-md-5 { + -webkit-box-ordinal-group: 6; + -ms-flex-order: 5; + order: 5; + } + .clr-order-md-6 { + -webkit-box-ordinal-group: 7; + -ms-flex-order: 6; + order: 6; + } + .clr-order-md-7 { + -webkit-box-ordinal-group: 8; + -ms-flex-order: 7; + order: 7; + } + .clr-order-md-8 { + -webkit-box-ordinal-group: 9; + -ms-flex-order: 8; + order: 8; + } + .clr-order-md-9 { + -webkit-box-ordinal-group: 10; + -ms-flex-order: 9; + order: 9; + } + .clr-order-md-10 { + -webkit-box-ordinal-group: 11; + -ms-flex-order: 10; + order: 10; + } + .clr-order-md-11 { + -webkit-box-ordinal-group: 12; + -ms-flex-order: 11; + order: 11; + } + .clr-order-md-12 { + -webkit-box-ordinal-group: 13; + -ms-flex-order: 12; + order: 12; + } + .clr-offset-md-0 { + margin-left: 0; + } + .clr-offset-md-1 { + margin-left: 8.3333333333%; + } + .clr-offset-md-2 { + margin-left: 16.6666666667%; + } + .clr-offset-md-3 { + margin-left: 25%; + } + .clr-offset-md-4 { + margin-left: 33.3333333333%; + } + .clr-offset-md-5 { + margin-left: 41.6666666667%; + } + .clr-offset-md-6 { + margin-left: 50%; + } + .clr-offset-md-7 { + margin-left: 58.3333333333%; + } + .clr-offset-md-8 { + margin-left: 66.6666666667%; + } + .clr-offset-md-9 { + margin-left: 75%; + } + .clr-offset-md-10 { + margin-left: 83.3333333333%; + } + .clr-offset-md-11 { + margin-left: 91.6666666667%; + } +} +@media (min-width: 992px) { + .clr-col-lg { + -ms-flex-preferred-size: 0; + flex-basis: 0; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + max-width: 100%; + } + .clr-col-lg-auto { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; + max-width: none; + } + .clr-col-lg-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.3333333333%; + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; + } + .clr-col-lg-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.6666666667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; + } + .clr-col-lg-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; + } + .clr-col-lg-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.3333333333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; + } + .clr-col-lg-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.6666666667%; + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; + } + .clr-col-lg-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; + } + .clr-col-lg-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.3333333333%; + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; + } + .clr-col-lg-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.6666666667%; + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; + } + .clr-col-lg-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; + } + .clr-col-lg-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.3333333333%; + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; + } + .clr-col-lg-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.6666666667%; + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; + } + .clr-col-lg-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; + } + .clr-order-lg-first { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; + } + .clr-order-lg-last { + -webkit-box-ordinal-group: 14; + -ms-flex-order: 13; + order: 13; + } + .clr-order-lg-0 { + -webkit-box-ordinal-group: 1; + -ms-flex-order: 0; + order: 0; + } + .clr-order-lg-1 { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; + } + .clr-order-lg-2 { + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; + } + .clr-order-lg-3 { + -webkit-box-ordinal-group: 4; + -ms-flex-order: 3; + order: 3; + } + .clr-order-lg-4 { + -webkit-box-ordinal-group: 5; + -ms-flex-order: 4; + order: 4; + } + .clr-order-lg-5 { + -webkit-box-ordinal-group: 6; + -ms-flex-order: 5; + order: 5; + } + .clr-order-lg-6 { + -webkit-box-ordinal-group: 7; + -ms-flex-order: 6; + order: 6; + } + .clr-order-lg-7 { + -webkit-box-ordinal-group: 8; + -ms-flex-order: 7; + order: 7; + } + .clr-order-lg-8 { + -webkit-box-ordinal-group: 9; + -ms-flex-order: 8; + order: 8; + } + .clr-order-lg-9 { + -webkit-box-ordinal-group: 10; + -ms-flex-order: 9; + order: 9; + } + .clr-order-lg-10 { + -webkit-box-ordinal-group: 11; + -ms-flex-order: 10; + order: 10; + } + .clr-order-lg-11 { + -webkit-box-ordinal-group: 12; + -ms-flex-order: 11; + order: 11; + } + .clr-order-lg-12 { + -webkit-box-ordinal-group: 13; + -ms-flex-order: 12; + order: 12; + } + .clr-offset-lg-0 { + margin-left: 0; + } + .clr-offset-lg-1 { + margin-left: 8.3333333333%; + } + .clr-offset-lg-2 { + margin-left: 16.6666666667%; + } + .clr-offset-lg-3 { + margin-left: 25%; + } + .clr-offset-lg-4 { + margin-left: 33.3333333333%; + } + .clr-offset-lg-5 { + margin-left: 41.6666666667%; + } + .clr-offset-lg-6 { + margin-left: 50%; + } + .clr-offset-lg-7 { + margin-left: 58.3333333333%; + } + .clr-offset-lg-8 { + margin-left: 66.6666666667%; + } + .clr-offset-lg-9 { + margin-left: 75%; + } + .clr-offset-lg-10 { + margin-left: 83.3333333333%; + } + .clr-offset-lg-11 { + margin-left: 91.6666666667%; + } +} +@media (min-width: 1200px) { + .clr-col-xl { + -ms-flex-preferred-size: 0; + flex-basis: 0; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + max-width: 100%; + } + .clr-col-xl-auto { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; + max-width: none; + } + .clr-col-xl-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.3333333333%; + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; + } + .clr-col-xl-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.6666666667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; + } + .clr-col-xl-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; + } + .clr-col-xl-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.3333333333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; + } + .clr-col-xl-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.6666666667%; + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; + } + .clr-col-xl-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; + } + .clr-col-xl-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.3333333333%; + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; + } + .clr-col-xl-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.6666666667%; + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; + } + .clr-col-xl-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; + } + .clr-col-xl-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.3333333333%; + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; + } + .clr-col-xl-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.6666666667%; + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; + } + .clr-col-xl-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; + } + .clr-order-xl-first { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; + } + .clr-order-xl-last { + -webkit-box-ordinal-group: 14; + -ms-flex-order: 13; + order: 13; + } + .clr-order-xl-0 { + -webkit-box-ordinal-group: 1; + -ms-flex-order: 0; + order: 0; + } + .clr-order-xl-1 { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; + } + .clr-order-xl-2 { + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; + } + .clr-order-xl-3 { + -webkit-box-ordinal-group: 4; + -ms-flex-order: 3; + order: 3; + } + .clr-order-xl-4 { + -webkit-box-ordinal-group: 5; + -ms-flex-order: 4; + order: 4; + } + .clr-order-xl-5 { + -webkit-box-ordinal-group: 6; + -ms-flex-order: 5; + order: 5; + } + .clr-order-xl-6 { + -webkit-box-ordinal-group: 7; + -ms-flex-order: 6; + order: 6; + } + .clr-order-xl-7 { + -webkit-box-ordinal-group: 8; + -ms-flex-order: 7; + order: 7; + } + .clr-order-xl-8 { + -webkit-box-ordinal-group: 9; + -ms-flex-order: 8; + order: 8; + } + .clr-order-xl-9 { + -webkit-box-ordinal-group: 10; + -ms-flex-order: 9; + order: 9; + } + .clr-order-xl-10 { + -webkit-box-ordinal-group: 11; + -ms-flex-order: 10; + order: 10; + } + .clr-order-xl-11 { + -webkit-box-ordinal-group: 12; + -ms-flex-order: 11; + order: 11; + } + .clr-order-xl-12 { + -webkit-box-ordinal-group: 13; + -ms-flex-order: 12; + order: 12; + } + .clr-offset-xl-0 { + margin-left: 0; + } + .clr-offset-xl-1 { + margin-left: 8.3333333333%; + } + .clr-offset-xl-2 { + margin-left: 16.6666666667%; + } + .clr-offset-xl-3 { + margin-left: 25%; + } + .clr-offset-xl-4 { + margin-left: 33.3333333333%; + } + .clr-offset-xl-5 { + margin-left: 41.6666666667%; + } + .clr-offset-xl-6 { + margin-left: 50%; + } + .clr-offset-xl-7 { + margin-left: 58.3333333333%; + } + .clr-offset-xl-8 { + margin-left: 66.6666666667%; + } + .clr-offset-xl-9 { + margin-left: 75%; + } + .clr-offset-xl-10 { + margin-left: 83.3333333333%; + } + .clr-offset-xl-11 { + margin-left: 91.6666666667%; + } +} +.clr-break-row { + width: 100%; +} +*, +:after, +:before { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +pre { + margin: 0.6rem 0; +} +pre { + border-color: #ccc; + border-color: var(--clr-color-neutral-400, #ccc); + border-width: 0.05rem; + border-width: var(--clr-global-borderwidth, 0.05rem); + border-style: solid; + border-radius: 0.15rem; + border-radius: var(--clr-global-borderradius, 0.15rem); +} +pre code { + white-space: pre; +} +code.clr-code { + color: #c21d00; + color: var(--clr-color-danger-800, #c21d00); + padding: 0; + background: 0 0; +} +ul.list-unstyled:not([cds-list]) { + padding-left: 0; + margin-left: 0; + list-style: none; +} +ol:not([cds-list]), +ul:not([cds-list]) { + list-style-position: inside; + margin-left: 0; + margin-top: 0; + margin-bottom: 0; + padding-left: 0; +} +ol.list:not([cds-list]), +ul.list:not([cds-list]) { + list-style-position: outside; + margin-left: 1.1em; +} +ol.list:not([cds-list]).compact, +ul.list:not([cds-list]).compact { + line-height: 0.9rem; +} +ol.list:not([cds-list]).compact > li, +ul.list:not([cds-list]).compact > li { + margin-bottom: 0.3rem; +} +ol.list:not([cds-list]).compact > li:last-child, +ul.list:not([cds-list]).compact > li:last-child { + margin-bottom: 0; +} +ol:not([cds-list]) > li > ul.list-unstyled, +ul:not(.list-unstyled):not([cds-list]) > li > ul.list-unstyled { + margin-left: 1.1em; +} +li > ul:not([cds-list]) { + margin-top: 0; + margin-left: 1.1em; +} +ul.list-group:not([cds-list]) { + margin-top: 0; +} +ol:not([cds-list]).list-spacer, +ul:not([cds-list]).list-spacer { + margin-top: 1.2rem; +} +h1:not([cds-text]) { + color: #000; + color: var(--clr-h1-color, #000); + font-weight: 200; + font-weight: var(--clr-h1-font-weight, 200); + font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif; + font-family: var( + --clr-h1-font-family, + Metropolis, + "Avenir Next", + "Helvetica Neue", + Arial, + sans-serif + ); + font-size: 1.6rem; + letter-spacing: normal; + line-height: 2.4rem; + margin-top: 1.2rem; + margin-bottom: 0; +} +h2:not([cds-text]) { + color: #000; + color: var(--clr-h2-color, #000); + font-weight: 200; + font-weight: var(--clr-h2-font-weight, 200); + font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif; + font-family: var( + --clr-h2-font-family, + Metropolis, + "Avenir Next", + "Helvetica Neue", + Arial, + sans-serif + ); + font-size: 1.4rem; + letter-spacing: normal; + line-height: 2.4rem; + margin-top: 1.2rem; + margin-bottom: 0; +} +h3:not([cds-text]) { + color: #000; + color: var(--clr-h3-color, #000); + font-weight: 200; + font-weight: var(--clr-h3-font-weight, 200); + font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif; + font-family: var( + --clr-h3-font-family, + Metropolis, + "Avenir Next", + "Helvetica Neue", + Arial, + sans-serif + ); + font-size: 1.1rem; + letter-spacing: normal; + line-height: 1.2rem; + margin-top: 1.2rem; + margin-bottom: 0; +} +h4:not([cds-text]) { + color: #000; + color: var(--clr-h4-color, #000); + font-weight: 200; + font-weight: var(--clr-h4-font-weight, 200); + font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif; + font-family: var( + --clr-h4-font-family, + Metropolis, + "Avenir Next", + "Helvetica Neue", + Arial, + sans-serif + ); + font-size: 0.9rem; + letter-spacing: normal; + line-height: 1.2rem; + margin-top: 1.2rem; + margin-bottom: 0; +} +h5:not([cds-text]) { + color: #666; + color: var(--clr-h5-color, #666); + font-weight: 400; + font-weight: var(--clr-h5-font-weight, 400); + font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif; + font-family: var( + --clr-h5-font-family, + Metropolis, + "Avenir Next", + "Helvetica Neue", + Arial, + sans-serif + ); + font-size: 0.8rem; + letter-spacing: 0.01em; + line-height: 1.2rem; + margin-top: 1.2rem; + margin-bottom: 0; +} +h6:not([cds-text]) { + color: #333; + color: var(--clr-h6-color, #333); + font-weight: 500; + font-weight: var(--clr-h6-font-weight, 500); + font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif; + font-family: var( + --clr-h6-font-family, + Metropolis, + "Avenir Next", + "Helvetica Neue", + Arial, + sans-serif + ); + font-size: 0.7rem; + letter-spacing: normal; + line-height: 1.2rem; + margin-top: 1.2rem; + margin-bottom: 0; +} +body:not([cds-text]) { + color: #666; + color: var(--clr-p1-color, #666); + font-weight: 400; + font-weight: var(--clr-p1-font-weight, 400); + font-size: 0.7rem; + letter-spacing: normal; + line-height: 1.2rem; + margin-bottom: 0; + font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif; + font-family: var( + --clr-font, + Metropolis, + "Avenir Next", + "Helvetica Neue", + Arial, + sans-serif + ); + margin-top: 0 !important; +} +body p:not([cds-text]) { + color: #666; + color: var(--clr-p1-color, #666); + font-weight: 400; + font-weight: var(--clr-p1-font-weight, 400); + font-size: 0.7rem; + letter-spacing: normal; + line-height: 1.2rem; + margin-top: 1.2rem; + margin-bottom: 0; +} +body .p0:not([cds-text]), +body p.p0:not([cds-text]) { + color: #666; + color: var(--clr-p0-color, #666); + font-weight: 200; + font-weight: var(--clr-p0-font-weight, 200); + font-size: 1rem; + letter-spacing: normal; + line-height: 1.2rem; + margin-top: 1.2rem; + margin-bottom: 0; +} +body .p2:not([cds-text]), +body p.p2:not([cds-text]) { + color: #666; + color: var(--clr-p2-color, #666); + font-weight: 500; + font-weight: var(--clr-p2-font-weight, 500); + font-size: 0.65rem; + letter-spacing: normal; + line-height: 1.2rem; + margin-top: 1.2rem; + margin-bottom: 0; +} +body .p3:not([cds-text]), +body p.p3:not([cds-text]) { + color: #666; + color: var(--clr-p3-color, #666); + font-weight: 400; + font-weight: var(--clr-p3-font-weight, 400); + font-size: 0.65rem; + letter-spacing: normal; + line-height: 1.2rem; + margin-top: 1.2rem; + margin-bottom: 0; +} +body .p4:not([cds-text]), +body p.p4:not([cds-text]) { + color: #666; + color: var(--clr-p4-color, #666); + font-weight: 600; + font-weight: var(--clr-p4-font-weight, 600); + font-size: 0.6rem; + letter-spacing: normal; + line-height: 1.2rem; + margin-top: 1.2rem; + margin-bottom: 0; +} +body .p5:not([cds-text]), +body p.p5:not([cds-text]) { + color: #666; + color: var(--clr-p5-color, #666); + font-weight: 400; + font-weight: var(--clr-p5-font-weight, 400); + font-size: 0.6rem; + letter-spacing: normal; + line-height: 1.2rem; + margin-top: 1.2rem; + margin-bottom: 0; +} +body .p6:not([cds-text]), +body p.p6:not([cds-text]) { + color: #666; + color: var(--clr-p6-color, #666); + font-weight: 600; + font-weight: var(--clr-p6-font-weight, 600); + font-size: 0.55rem; + letter-spacing: 0.03em; + line-height: 0.6rem; + margin-top: 1.2rem; + margin-bottom: 0; +} +body .p7:not([cds-text]), +body p.p7:not([cds-text]) { + color: #666; + color: var(--clr-p7-color, #666); + font-weight: 400; + font-weight: var(--clr-p7-font-weight, 400); + font-size: 0.55rem; + letter-spacing: 0.03em; + line-height: 0.6rem; + margin-top: 1.2rem; + margin-bottom: 0; +} +body .p8:not([cds-text]), +body p.p8:not([cds-text]) { + color: #666; + color: var(--clr-p8-color, #666); + font-weight: 400; + font-weight: var(--clr-p8-font-weight, 400); + font-size: 0.5rem; + letter-spacing: 0.03em; + line-height: 0.6rem; + margin-top: 1.2rem; + margin-bottom: 0; +} +.text-light { + font-weight: 200; + font-weight: var(--clr-font-weight-light, 200); +} +.text-right { + text-align: right !important; +} +.text-center { + text-align: center !important; +} +.text-left { + text-align: left !important; +} +.text-justify { + text-align: justify !important; +} +html:not([cds-text]) { + color: #666; + color: var(--clr-global-font-color, #666); + font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif; + font-family: var( + --clr-font, + Metropolis, + "Avenir Next", + "Helvetica Neue", + Arial, + sans-serif + ); + font-size: 125%; +} +@font-face { + font-family: Metropolis; + src: url(data:application/font-woff;charset=utf-8;base64,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) + format("woff"); + font-weight: 200; + font-style: normal; +} +@font-face { + font-family: Metropolis; + src: url(data:application/font-woff;charset=utf-8;base64,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) + format("woff"); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: Metropolis; + src: url(data:application/font-woff;charset=utf-8;base64,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) + format("woff"); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: Metropolis; + src: url(data:application/font-woff;charset=utf-8;base64,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) + format("woff"); + font-weight: 600; + font-style: normal; +} +:root { + --clr-link-active-color: var(--clr-color-secondary-action-500); + --clr-link-color: var(--clr-color-action-600); + --clr-link-hover-color: var(--clr-color-action-600); + --clr-link-visited-color: hsl(238, 41%, 53%); + --clr-custom-links-hover-color: var(--clr-color-neutral-200); +} +html { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +*, +::after, +::before { + -webkit-box-sizing: inherit; + box-sizing: inherit; +} +@-ms-viewport { + width: device-width; +} +html { + -ms-overflow-style: scrollbar; + -webkit-tap-highlight-color: transparent; +} +img { + vertical-align: middle; +} +[role="button"] { + cursor: pointer; +} +[role="button"], +a, +area, +button, +input, +label, +select, +summary, +textarea { + -ms-touch-action: manipulation; + touch-action: manipulation; +} +button:focus { + outline: 1px dotted; + outline: 5px auto -webkit-focus-ring-color; +} +button, +input, +select, +textarea { + border-radius: 0; +} +input[type="checkbox"]:disabled, +input[type="radio"]:disabled { + cursor: not-allowed; +} +input[type="date"], +input[type="datetime-local"], +input[type="month"], +input[type="time"] { + -webkit-appearance: listbox; +} +textarea { + resize: vertical; +} +fieldset { + min-width: 0; + padding: 0; + margin: 0; + border: 0; +} +legend { + display: block; + width: 100%; + padding: 0; + line-height: inherit; +} +input[type="search"] { + -webkit-appearance: none; +} +[hidden] { + display: none !important; +} +dl { + margin-bottom: 0; + margin-top: 1rem; +} +table { + border-spacing: 0; +} +a:link { + color: #0072a3; + color: var(--clr-link-color, #0072a3); + text-decoration: none; +} +a:hover { + color: #0072a3; + color: var(--clr-link-hover-color, #0072a3); + text-decoration: underline; +} +a:active { + color: #9e57bc; + color: var(--clr-link-active-color, #9e57bc); + text-decoration: underline; +} +a:visited { + color: #5659b8; + color: var(--clr-link-visited-color, #5659b8); + text-decoration: none; +} +.clr-sr-only { + position: absolute; + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + padding: 0; + border: 0; + height: 1px; + width: 1px; + overflow: hidden; + white-space: nowrap; + top: 0; + left: 0; +} +.alert-icon, +.clr-icon { + display: inline-block; + height: 0.8rem; + width: 0.8rem; + padding: 0; + background-repeat: no-repeat; + background-size: contain; + vertical-align: middle; +} +.alert-icon.clr-icon-warning, +.alert-icon.icon-warning, +.clr-icon.clr-icon-warning, +.clr-icon.icon-warning { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%225%205%2026%2026%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.clr-i-outline%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23747474%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctitle%3Eexclamation-triangle-line%3C%2Ftitle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-1%22%20d%3D%22M18%2C21.32a1.3%2C1.3%2C0%2C0%2C0%2C1.3-1.3V14a1.3%2C1.3%2C0%2C1%2C0-2.6%2C0v6A1.3%2C1.3%2C0%2C0%2C0%2C18%2C21.32Z%22%3E%3C%2Fpath%3E%3Ccircle%20class%3D%22clr-i-outline%20clr-i-outline-path-2%22%20cx%3D%2217.95%22%20cy%3D%2224.27%22%20r%3D%221.5%22%3E%3C%2Fcircle%3E%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-3%22%20d%3D%22M30.33%2C25.54%2C20.59%2C7.6a3%2C3%2C0%2C0%2C0-5.27%2C0L5.57%2C25.54A3%2C3%2C0%2C0%2C0%2C8.21%2C30H27.69a3%2C3%2C0%2C0%2C0%2C2.64-4.43Zm-1.78%2C1.94a1%2C1%2C0%2C0%2C1-.86.49H8.21a1%2C1%2C0%2C0%2C1-.88-1.48L17.07%2C8.55a1%2C1%2C0%2C0%2C1%2C1.76%2C0l9.74%2C17.94A1%2C1%2C0%2C0%2C1%2C28.55%2C27.48Z%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E"); +} +.alert-icon.clr-icon-warning-white, +.clr-icon.clr-icon-warning-white { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%225%205%2026%2026%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.clr-i-outline%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23ffffff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctitle%3Eexclamation-triangle-line%3C%2Ftitle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-1%22%20d%3D%22M18%2C21.32a1.3%2C1.3%2C0%2C0%2C0%2C1.3-1.3V14a1.3%2C1.3%2C0%2C1%2C0-2.6%2C0v6A1.3%2C1.3%2C0%2C0%2C0%2C18%2C21.32Z%22%3E%3C%2Fpath%3E%3Ccircle%20class%3D%22clr-i-outline%20clr-i-outline-path-2%22%20cx%3D%2217.95%22%20cy%3D%2224.27%22%20r%3D%221.5%22%3E%3C%2Fcircle%3E%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-3%22%20d%3D%22M30.33%2C25.54%2C20.59%2C7.6a3%2C3%2C0%2C0%2C0-5.27%2C0L5.57%2C25.54A3%2C3%2C0%2C0%2C0%2C8.21%2C30H27.69a3%2C3%2C0%2C0%2C0%2C2.64-4.43Zm-1.78%2C1.94a1%2C1%2C0%2C0%2C1-.86.49H8.21a1%2C1%2C0%2C0%2C1-.88-1.48L17.07%2C8.55a1%2C1%2C0%2C0%2C1%2C1.76%2C0l9.74%2C17.94A1%2C1%2C0%2C0%2C1%2C28.55%2C27.48Z%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E"); +} +.alert-icon.clr-vmw-logo, +.clr-icon.clr-vmw-logo { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2036%2036%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Ctitle%3Evm%20bug%3C%2Ftitle%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Headers%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22CL-Headers-Specs%22%20transform%3D%22translate(-262.000000%2C%20-175.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%2201%22%20transform%3D%22translate(238.000000%2C%20163.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22vm-bug%22%20transform%3D%22translate(24.703125%2C%2012.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-42%22%20fill-opacity%3D%220.25%22%20fill%3D%22%23DDDDDD%22%20opacity%3D%220.6%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2236%22%20height%3D%2236%22%20rx%3D%223%22%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M7.63948376%2C13.8762402%20C7.32265324%2C13.2097082%206.53978152%2C12.9085139%205.80923042%2C13.219934%20C5.07771043%2C13.5322837%204.80932495%2C14.3103691%205.13972007%2C14.9769011%20L8.20725954%2C21.3744923%20C8.68977207%2C22.3784735%209.19844491%2C22.9037044%2010.1528121%2C22.9037044%20C11.1720955%2C22.9037044%2011.6168209%2C22.3310633%2012.0983646%2C21.3744923%20C12.0983646%2C21.3744923%2014.7744682%2C15.7847341%2014.8015974%2C15.7261685%20C14.8287266%2C15.6666733%2014.9149588%2C15.4863286%2015.1872199%2C15.4872582%20C15.4178182%2C15.490047%2015.6106294%2C15.6657437%2015.6106294%2C15.9018652%20L15.6106294%2C21.3698443%20C15.6106294%2C22.212073%2016.0979865%2C22.9037044%2017.0349134%2C22.9037044%20C17.9718403%2C22.9037044%2018.4785754%2C22.212073%2018.4785754%2C21.3698443%20L18.4785754%2C16.8965503%20C18.4785754%2C16.0338702%2019.1219254%2C15.4742436%2020.0007183%2C15.4742436%20C20.8785423%2C15.4742436%2021.4637583%2C16.0524624%2021.4637583%2C16.8965503%20L21.4637583%2C21.3698443%20C21.4637583%2C22.212073%2021.9520842%2C22.9037044%2022.8880423%2C22.9037044%20C23.8240003%2C22.9037044%2024.3326731%2C22.212073%2024.3326731%2C21.3698443%20L24.3326731%2C16.8965503%20C24.3326731%2C16.0338702%2024.9750543%2C15.4742436%2025.8538472%2C15.4742436%20C26.7307023%2C15.4742436%2027.3168871%2C16.0524624%2027.3168871%2C16.8965503%20L27.3168871%2C21.3698443%20C27.3168871%2C22.212073%2027.8052131%2C22.9037044%2028.74214%2C22.9037044%20C29.6771291%2C22.9037044%2030.1848331%2C22.212073%2030.1848331%2C21.3698443%20L30.1848331%2C16.2783582%20C30.1848331%2C14.4070488%2028.6181207%2C13.0962956%2026.7307023%2C13.0962956%20C24.8452216%2C13.0962956%2023.6651006%2C14.3475536%2023.6651006%2C14.3475536%20C23.037253%2C13.5666793%2022.1720247%2C13.0972252%2020.7089847%2C13.0972252%20C19.164557%2C13.0972252%2017.8129406%2C14.3475536%2017.8129406%2C14.3475536%20C17.1841241%2C13.5666793%2016.1154267%2C13.0972252%2015.2308204%2C13.0972252%20C13.8617638%2C13.0972252%2012.7746572%2C13.675444%2012.1119292%2C15.1302871%20L10.1528121%2C19.5608189%20L7.63948376%2C13.8762402%22%20id%3D%22Fill-4%22%20fill%3D%22%23FFFFFF%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"); +} +.is-off-screen { + position: fixed !important; + border: none !important; + height: 1px !important; + width: 1px !important; + left: 0 !important; + top: -convertBaselineToBase20(1) !important; + overflow: hidden !important; + visibility: hidden !important; + padding: 0 !important; + margin: 0 0 -convertBaselineToBase20(1) 0 !important; +} +.clr-popover-content { + position: fixed; + z-index: 5000; +} +:root { + --clr-btn-vertical-margin: 0.3rem; + --clr-btn-horizontal-margin: 0.6rem; + --clr-btn-horizontal-padding: 0.6rem; + --clr-btn-vertical-padding: 0; + --clr-btn-padding: var(--clr-btn-vertical-padding) + var(--clr-btn-horizontal-padding); + --clr-btn-height: 1.8rem; + --clr-btn-height-sm: 1.2rem; + --clr-btn-font-weight: 500; + --clr-btn-border-radius: 0.15rem; + --clr-btn-border-width: 0.05rem; + --clr-btn-outline-bg-color: transparent; + --clr-btn-appearance-standard-line-height: 1.15rem; + --clr-btn-appearance-standard-font-size: 0.55rem; + --clr-btn-appearance-standard-font-weight: 500; + --clr-btn-appearance-standard-height: 1.2rem; + --clr-btn-appearance-standard-padding: 0 0.6rem; + --clr-btn-appearance-standard-icon-size: 0.6rem; + --clr-btn-appearance-form-line-height: 1.8rem; + --clr-btn-appearance-form-letter-spacing: 0.12em; + --clr-btn-appearance-form-font-size: 0.6rem; + --clr-btn-appearance-form-font-weight: 500; + --clr-btn-appearance-form-height: 1.8rem; + --clr-btn-appearance-form-padding: 0 0.6rem; + --clr-btn-default-color: var(--clr-color-action-600); + --clr-btn-default-border-color: var(--clr-btn-default-color); + --clr-btn-default-bg-color: transparent; + --clr-btn-default-hover-bg-color: var(--clr-color-action-50); + --clr-btn-default-hover-color: var(--clr-color-action-800); + --clr-btn-default-box-shadow-color: var(--clr-color-action-500); + --clr-btn-default-disabled-color: var(--clr-color-neutral-700); + --clr-btn-default-disabled-bg-color: var(--clr-btn-default-bg-color); + --clr-btn-default-disabled-border-color: var(--clr-color-neutral-600); + --clr-btn-default-checked-bg-color: var(--clr-color-action-600); + --clr-btn-default-checked-color: var(--clr-color-neutral-0); + --clr-btn-default-outline-color: var(--clr-color-action-600); + --clr-btn-default-outline-border-color: var( + --clr-btn-default-outline-color + ); + --clr-btn-default-outline-bg-color: var(--clr-btn-outline-bg-color); + --clr-btn-default-outline-hover-bg-color: var(--clr-color-action-50); + --clr-btn-default-outline-hover-color: var(--clr-color-action-800); + --clr-btn-default-outline-box-shadow-color: var(--clr-color-action-500); + --clr-btn-default-outline-disabled-color: var(--clr-color-neutral-700); + --clr-btn-default-outline-disabled-bg-color: var( + --clr-btn-default-outline-bg-color + ); + --clr-btn-default-outline-disabled-border-color: var( + --clr-color-neutral-600 + ); + --clr-btn-default-outline-checked-color: var(--clr-color-neutral-0); + --clr-btn-default-outline-checked-bg-color: var( + --clr-btn-default-outline-color + ); + --clr-btn-primary-color: var(--clr-color-neutral-0); + --clr-btn-primary-bg-color: var(--clr-color-action-600); + --clr-btn-primary-border-color: var(--clr-color-action-600); + --clr-btn-primary-hover-bg-color: var(--clr-color-action-800); + --clr-btn-primary-hover-color: var(--clr-color-action-50); + --clr-btn-primary-box-shadow-color: var(--clr-color-action-500); + --clr-btn-primary-disabled-color: var(--clr-color-neutral-700); + --clr-btn-primary-disabled-bg-color: var(--clr-color-neutral-400); + --clr-btn-primary-disabled-border-color: var(--clr-color-neutral-400); + --clr-btn-primary-checked-bg-color: var(--clr-color-action-600); + --clr-btn-primary-checked-color: var(--clr-color-neutral-0); + --clr-btn-success-color: var(--clr-color-neutral-0); + --clr-btn-success-bg-color: var(--clr-color-success-700); + --clr-btn-success-border-color: var(--clr-btn-success-bg-color); + --clr-btn-success-hover-bg-color: var(--clr-color-success-800); + --clr-btn-success-hover-color: var(--clr-btn-success-color); + --clr-btn-success-box-shadow-color: var(--clr-color-success-900); + --clr-btn-success-disabled-color: var(--clr-color-neutral-700); + --clr-btn-success-disabled-bg-color: var(--clr-color-neutral-400); + --clr-btn-success-disabled-border-color: var(--clr-color-neutral-400); + --clr-btn-success-checked-bg-color: var(--clr-btn-success-hover-bg-color); + --clr-btn-success-checked-color: var(--clr-btn-success-color); + --clr-btn-success-outline-color: var(--clr-color-success-700); + --clr-btn-success-outline-bg-color: var(--clr-btn-outline-bg-color); + --clr-btn-success-outline-border-color: var(--clr-color-success-700); + --clr-btn-success-outline-hover-bg-color: var(--clr-color-success-50); + --clr-btn-success-outline-hover-color: var(--clr-color-success-900); + --clr-btn-success-outline-box-shadow-color: var(--clr-color-success-400); + --clr-btn-success-outline-disabled-color: var(--clr-color-neutral-700); + --clr-btn-success-outline-disabled-bg-color: var( + --clr-btn-success-outline-bg-color + ); + --clr-btn-success-outline-disabled-border-color: var( + --clr-color-neutral-600 + ); + --clr-btn-success-outline-checked-bg-color: var( + --clr-btn-success-outline-border-color + ); + --clr-btn-success-outline-checked-color: var(--clr-color-neutral-0); + --clr-btn-danger-color: var(--clr-color-neutral-0); + --clr-btn-danger-bg-color: var(--clr-color-danger-700); + --clr-btn-danger-border-color: var(--clr-btn-danger-bg-color); + --clr-btn-danger-hover-bg-color: var(--clr-color-danger-800); + --clr-btn-danger-hover-color: var(--clr-btn-danger-color); + --clr-btn-danger-box-shadow-color: var(--clr-color-danger-900); + --clr-btn-danger-disabled-color: var(--clr-color-neutral-700); + --clr-btn-danger-disabled-bg-color: var(--clr-color-neutral-400); + --clr-btn-danger-disabled-border-color: var( + --clr-btn-danger-disabled-color + ); + --clr-btn-danger-checked-bg-color: var(--clr-color-danger-800); + --clr-btn-danger-checked-color: var(--clr-btn-danger-color); + --clr-btn-danger-outline-color: var(--clr-color-danger-700); + --clr-btn-danger-outline-bg-color: var(--clr-btn-outline-bg-color); + --clr-btn-danger-outline-border-color: var(--clr-color-danger-800); + --clr-btn-danger-outline-hover-bg-color: var(--clr-color-danger-100); + --clr-btn-danger-outline-hover-color: var(--clr-color-danger-900); + --clr-btn-danger-outline-box-shadow-color: var(--clr-color-danger-200); + --clr-btn-danger-outline-disabled-color: var(--clr-color-neutral-700); + --clr-btn-danger-outline-disabled-bg-color: var( + --clr-btn-danger-outline-bg-color + ); + --clr-btn-danger-outline-disabled-border-color: var( + --clr-btn-danger-outline-disabled-color + ); + --clr-btn-danger-outline-checked-bg-color: var(--clr-color-danger-800); + --clr-btn-danger-outline-checked-color: var(--clr-color-neutral-0); + --clr-btn-link-color: var(--clr-color-action-600); + --clr-btn-link-bg-color: transparent; + --clr-btn-link-border-color: transparent; + --clr-btn-link-hover-bg-color: transparent; + --clr-btn-link-hover-color: var(--clr-color-action-800); + --clr-btn-link-disabled-color: var(--clr-color-neutral-700); + --clr-btn-link-disabled-bg-color: transparent; + --clr-btn-link-disabled-border-color: transparent; + --clr-btn-link-checked-bg-color: transparent; + --clr-btn-link-checked-color: var(--clr-color-action-800); + --clr-btn-inverse-color: var(--clr-color-neutral-0); + --clr-btn-inverse-border-color: var(--clr-color-neutral-0); + --clr-btn-inverse-bg-color: transparent; + --clr-btn-inverse-hover-bg-color: rgba(255, 255, 255, 0.15); + --clr-btn-inverse-hover-color: var(--clr-color-neutral-0); + --clr-btn-inverse-box-shadow-color: rgba(0, 0, 0, 0.25); + --clr-btn-inverse-disabled-color: var(--clr-color-neutral-0); + --clr-btn-inverse-disabled-bg-color: var(--clr-btn-inverse-bg-color); + --clr-btn-inverse-disabled-border-color: var(--clr-color-neutral-0); + --clr-btn-inverse-checked-bg-color: rgba(255, 255, 255, 0.15); + --clr-btn-inverse-checked-color: var(--clr-color-neutral-0); + --clr-btn-icon-disabled-color: var( + --clr-btn-default-disabled-color, + #666666 + ); + --clr-btn-group-focus-outline: #51cbee; +} +.btn { + cursor: pointer; + display: inline-block; + -webkit-appearance: none !important; + border-radius: 0.15rem; + border-radius: var(--clr-btn-border-radius, 0.15rem); + border-width: 0.05rem; + border-width: var(--clr-btn-border-width, 0.05rem); + border-style: solid; + min-width: 3.6rem; + max-width: 18rem; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + text-align: center; + text-decoration: none; + text-transform: uppercase; + vertical-align: middle; + border-color: #0072a3; + border-color: var(--clr-btn-default-border-color, #0072a3); + background-color: transparent; + background-color: var(--clr-btn-default-bg-color, transparent); + color: #0072a3; + color: var(--clr-btn-default-color, #0072a3); + line-height: 1.8rem; + line-height: var(--clr-btn-appearance-form-line-height, 1.8rem); + letter-spacing: 0.12em; + font-size: 0.6rem; + font-size: var(--clr-btn-appearance-form-font-size, 0.6rem); + font-weight: 500; + font-weight: var(--clr-btn-appearance-form-font-weight, 500); + height: 1.8rem; + height: var(--clr-btn-appearance-form-height, 1.8rem); + padding: 0 0.6rem; + padding: var(--clr-btn-appearance-form-padding, 0 0.6rem); +} +.btn:hover { + text-decoration: none; +} +.btn cds-icon { + color: #0072a3; + color: var(--clr-btn-default-color, #0072a3); +} +.btn:visited { + color: #0072a3; + color: var(--clr-btn-default-color, #0072a3); +} +.btn:hover { + background-color: #e3f5fc; + background-color: var(--clr-btn-default-hover-bg-color, #e3f5fc); + color: #00567a; + color: var(--clr-btn-default-hover-color, #00567a); +} +.btn:active { + -webkit-box-shadow: 0 0.1rem 0 0 #179bd3 inset; + box-shadow: 0 0.1rem 0 0 #179bd3 inset; + -webkit-box-shadow: 0 0.1rem 0 0 + var(--clr-btn-default-box-shadow-color, #179bd3) inset; + box-shadow: 0 0.1rem 0 0 var(--clr-btn-default-box-shadow-color, #179bd3) + inset; +} +.btn.disabled, +.btn:disabled { + color: #666; + color: var(--clr-btn-default-disabled-color, #666); + cursor: not-allowed; + opacity: 0.4; + background-color: transparent; + background-color: var(--clr-btn-default-disabled-bg-color, transparent); + border-color: #8c8c8c; + border-color: var(--clr-btn-default-disabled-border-color, #8c8c8c); + -webkit-box-shadow: none; + box-shadow: none; +} +.btn cds-icon, +.btn-group > .btn cds-icon { + -webkit-transform: translate3d(0, -0.1rem, 0); + transform: translate3d(0, -0.1rem, 0); +} +.btn-info .btn, +.btn-info-outline .btn, +.btn-outline .btn, +.btn-outline-info .btn, +.btn-outline-primary .btn, +.btn-outline-secondary .btn, +.btn-primary-outline .btn, +.btn-secondary .btn, +.btn-secondary-outline .btn, +.btn.btn-info, +.btn.btn-info-outline, +.btn.btn-outline, +.btn.btn-outline-primary, +.btn.btn-outline-secondary, +.btn.btn-primary-outline, +.btn.btn-secondary, +.btn.btn-secondary-outline { + border-color: #0072a3; + border-color: var(--clr-btn-default-border-color, #0072a3); + background-color: transparent; + background-color: var(--clr-btn-default-bg-color, transparent); + color: #0072a3; + color: var(--clr-btn-default-color, #0072a3); +} +.btn-info .btn cds-icon, +.btn-info-outline .btn cds-icon, +.btn-outline .btn cds-icon, +.btn-outline-info .btn cds-icon, +.btn-outline-primary .btn cds-icon, +.btn-outline-secondary .btn cds-icon, +.btn-primary-outline .btn cds-icon, +.btn-secondary .btn cds-icon, +.btn-secondary-outline .btn cds-icon, +.btn.btn-info cds-icon, +.btn.btn-info-outline cds-icon, +.btn.btn-outline cds-icon, +.btn.btn-outline-primary cds-icon, +.btn.btn-outline-secondary cds-icon, +.btn.btn-primary-outline cds-icon, +.btn.btn-secondary cds-icon, +.btn.btn-secondary-outline cds-icon { + color: #0072a3; + color: var(--clr-btn-default-color, #0072a3); +} +.btn-info .btn:visited, +.btn-info-outline .btn:visited, +.btn-outline .btn:visited, +.btn-outline-info .btn:visited, +.btn-outline-primary .btn:visited, +.btn-outline-secondary .btn:visited, +.btn-primary-outline .btn:visited, +.btn-secondary .btn:visited, +.btn-secondary-outline .btn:visited, +.btn.btn-info-outline:visited, +.btn.btn-info:visited, +.btn.btn-outline-primary:visited, +.btn.btn-outline-secondary:visited, +.btn.btn-outline:visited, +.btn.btn-primary-outline:visited, +.btn.btn-secondary-outline:visited, +.btn.btn-secondary:visited { + color: #0072a3; + color: var(--clr-btn-default-color, #0072a3); +} +.btn-info .btn:hover, +.btn-info-outline .btn:hover, +.btn-outline .btn:hover, +.btn-outline-info .btn:hover, +.btn-outline-primary .btn:hover, +.btn-outline-secondary .btn:hover, +.btn-primary-outline .btn:hover, +.btn-secondary .btn:hover, +.btn-secondary-outline .btn:hover, +.btn.btn-info-outline:hover, +.btn.btn-info:hover, +.btn.btn-outline-primary:hover, +.btn.btn-outline-secondary:hover, +.btn.btn-outline:hover, +.btn.btn-primary-outline:hover, +.btn.btn-secondary-outline:hover, +.btn.btn-secondary:hover { + background-color: #e3f5fc; + background-color: var(--clr-btn-default-hover-bg-color, #e3f5fc); + color: #00567a; + color: var(--clr-btn-default-hover-color, #00567a); +} +.btn-info .btn:active, +.btn-info-outline .btn:active, +.btn-outline .btn:active, +.btn-outline-info .btn:active, +.btn-outline-primary .btn:active, +.btn-outline-secondary .btn:active, +.btn-primary-outline .btn:active, +.btn-secondary .btn:active, +.btn-secondary-outline .btn:active, +.btn.btn-info-outline:active, +.btn.btn-info:active, +.btn.btn-outline-primary:active, +.btn.btn-outline-secondary:active, +.btn.btn-outline:active, +.btn.btn-primary-outline:active, +.btn.btn-secondary-outline:active, +.btn.btn-secondary:active { + -webkit-box-shadow: 0 0.1rem 0 0 #179bd3 inset; + box-shadow: 0 0.1rem 0 0 #179bd3 inset; + -webkit-box-shadow: 0 0.1rem 0 0 + var(--clr-btn-default-box-shadow-color, #179bd3) inset; + box-shadow: 0 0.1rem 0 0 var(--clr-btn-default-box-shadow-color, #179bd3) + inset; +} +.btn-info .btn.disabled, +.btn-info .btn:disabled, +.btn-info-outline .btn.disabled, +.btn-info-outline .btn:disabled, +.btn-outline .btn.disabled, +.btn-outline .btn:disabled, +.btn-outline-info .btn.disabled, +.btn-outline-info .btn:disabled, +.btn-outline-primary .btn.disabled, +.btn-outline-primary .btn:disabled, +.btn-outline-secondary .btn.disabled, +.btn-outline-secondary .btn:disabled, +.btn-primary-outline .btn.disabled, +.btn-primary-outline .btn:disabled, +.btn-secondary .btn.disabled, +.btn-secondary .btn:disabled, +.btn-secondary-outline .btn.disabled, +.btn-secondary-outline .btn:disabled, +.btn.btn-info-outline.disabled, +.btn.btn-info-outline:disabled, +.btn.btn-info.disabled, +.btn.btn-info:disabled, +.btn.btn-outline-primary.disabled, +.btn.btn-outline-primary:disabled, +.btn.btn-outline-secondary.disabled, +.btn.btn-outline-secondary:disabled, +.btn.btn-outline.disabled, +.btn.btn-outline:disabled, +.btn.btn-primary-outline.disabled, +.btn.btn-primary-outline:disabled, +.btn.btn-secondary-outline.disabled, +.btn.btn-secondary-outline:disabled, +.btn.btn-secondary.disabled, +.btn.btn-secondary:disabled { + color: #666; + color: var(--clr-btn-default-disabled-color, #666); + cursor: not-allowed; + opacity: 0.4; + background-color: transparent; + background-color: var(--clr-btn-default-disabled-bg-color, transparent); + border-color: #8c8c8c; + border-color: var(--clr-btn-default-disabled-border-color, #8c8c8c); + -webkit-box-shadow: none; + box-shadow: none; +} +.btn-primary .btn, +.btn.btn-primary { + border-color: #0072a3; + border-color: var(--clr-btn-primary-border-color, #0072a3); + background-color: #0072a3; + background-color: var(--clr-btn-primary-bg-color, #0072a3); + color: #fff; + color: var(--clr-btn-primary-color, #fff); +} +.btn-primary .btn cds-icon, +.btn.btn-primary cds-icon { + color: #fff; + color: var(--clr-btn-primary-color, #fff); +} +.btn-primary .btn:visited, +.btn.btn-primary:visited { + color: #fff; + color: var(--clr-btn-primary-color, #fff); +} +.btn-primary .btn:hover, +.btn.btn-primary:hover { + background-color: #00567a; + background-color: var(--clr-btn-primary-hover-bg-color, #00567a); + color: #e3f5fc; + color: var(--clr-btn-primary-hover-color, #e3f5fc); +} +.btn-primary .btn:active, +.btn.btn-primary:active { + -webkit-box-shadow: 0 0.1rem 0 0 #179bd3 inset; + box-shadow: 0 0.1rem 0 0 #179bd3 inset; + -webkit-box-shadow: 0 0.1rem 0 0 + var(--clr-btn-primary-box-shadow-color, #179bd3) inset; + box-shadow: 0 0.1rem 0 0 var(--clr-btn-primary-box-shadow-color, #179bd3) + inset; +} +.btn-primary .btn.disabled, +.btn-primary .btn:disabled, +.btn.btn-primary.disabled, +.btn.btn-primary:disabled { + color: #666; + color: var(--clr-btn-primary-disabled-color, #666); + cursor: not-allowed; + opacity: 0.4; + background-color: #ccc; + background-color: var(--clr-btn-primary-disabled-bg-color, #ccc); + border-color: #ccc; + border-color: var(--clr-btn-primary-disabled-border-color, #ccc); + -webkit-box-shadow: none; + box-shadow: none; +} +.btn-success .btn, +.btn.btn-success { + border-color: #3c8500; + border-color: var(--clr-btn-success-border-color, #3c8500); + background-color: #3c8500; + background-color: var(--clr-btn-success-bg-color, #3c8500); + color: #fff; + color: var(--clr-btn-success-color, #fff); +} +.btn-success .btn cds-icon, +.btn.btn-success cds-icon { + color: #fff; + color: var(--clr-btn-success-color, #fff); +} +.btn-success .btn:visited, +.btn.btn-success:visited { + color: #fff; + color: var(--clr-btn-success-color, #fff); +} +.btn-success .btn:hover, +.btn.btn-success:hover { + background-color: #306b00; + background-color: var(--clr-btn-success-hover-bg-color, #306b00); + color: #fff; + color: var(--clr-btn-success-hover-color, #fff); +} +.btn-success .btn:active, +.btn.btn-success:active { + -webkit-box-shadow: 0 0.1rem 0 0 #255200 inset; + box-shadow: 0 0.1rem 0 0 #255200 inset; + -webkit-box-shadow: 0 0.1rem 0 0 + var(--clr-btn-success-box-shadow-color, #255200) inset; + box-shadow: 0 0.1rem 0 0 var(--clr-btn-success-box-shadow-color, #255200) + inset; +} +.btn-success .btn.disabled, +.btn-success .btn:disabled, +.btn.btn-success.disabled, +.btn.btn-success:disabled { + color: #666; + color: var(--clr-btn-success-disabled-color, #666); + cursor: not-allowed; + opacity: 0.4; + background-color: #ccc; + background-color: var(--clr-btn-success-disabled-bg-color, #ccc); + border-color: #ccc; + border-color: var(--clr-btn-success-disabled-border-color, #ccc); + -webkit-box-shadow: none; + box-shadow: none; +} +.btn-danger .btn, +.btn-warning .btn, +.btn.btn-danger, +.btn.btn-warning { + border-color: #db2100; + border-color: var(--clr-btn-danger-border-color, #db2100); + background-color: #db2100; + background-color: var(--clr-btn-danger-bg-color, #db2100); + color: #fff; + color: var(--clr-btn-danger-color, #fff); +} +.btn-danger .btn cds-icon, +.btn-warning .btn cds-icon, +.btn.btn-danger cds-icon, +.btn.btn-warning cds-icon { + color: #fff; + color: var(--clr-btn-danger-color, #fff); +} +.btn-danger .btn:visited, +.btn-warning .btn:visited, +.btn.btn-danger:visited, +.btn.btn-warning:visited { + color: #fff; + color: var(--clr-btn-danger-color, #fff); +} +.btn-danger .btn:hover, +.btn-warning .btn:hover, +.btn.btn-danger:hover, +.btn.btn-warning:hover { + background-color: #c21d00; + background-color: var(--clr-btn-danger-hover-bg-color, #c21d00); + color: #fff; + color: var(--clr-btn-danger-hover-color, #fff); +} +.btn-danger .btn:active, +.btn-warning .btn:active, +.btn.btn-danger:active, +.btn.btn-warning:active { + -webkit-box-shadow: 0 0.1rem 0 0 #991700 inset; + box-shadow: 0 0.1rem 0 0 #991700 inset; + -webkit-box-shadow: 0 0.1rem 0 0 + var(--clr-btn-danger-box-shadow-color, #991700) inset; + box-shadow: 0 0.1rem 0 0 var(--clr-btn-danger-box-shadow-color, #991700) + inset; +} +.btn-danger .btn.disabled, +.btn-danger .btn:disabled, +.btn-warning .btn.disabled, +.btn-warning .btn:disabled, +.btn.btn-danger.disabled, +.btn.btn-danger:disabled, +.btn.btn-warning.disabled, +.btn.btn-warning:disabled { + color: #666; + color: var(--clr-btn-danger-disabled-color, #666); + cursor: not-allowed; + opacity: 0.4; + background-color: #ccc; + background-color: var(--clr-btn-danger-disabled-bg-color, #ccc); + border-color: #666; + border-color: var(--clr-btn-danger-disabled-border-color, #666); + -webkit-box-shadow: none; + box-shadow: none; +} +.btn-info-outline .btn, +.btn-outline .btn, +.btn.btn-info-outline, +.btn.btn-outline, +.btn.btn-outline .btn, +.btn.btn-outline-info { + border-color: #0072a3; + border-color: var(--clr-btn-default-outline-border-color, #0072a3); + background-color: transparent; + background-color: var(--clr-btn-default-outline-bg-color, transparent); + color: #0072a3; + color: var(--clr-btn-default-outline-color, #0072a3); +} +.btn-info-outline .btn cds-icon, +.btn-outline .btn cds-icon, +.btn.btn-info-outline cds-icon, +.btn.btn-outline .btn cds-icon, +.btn.btn-outline cds-icon, +.btn.btn-outline-info cds-icon { + color: #0072a3; + color: var(--clr-btn-default-outline-color, #0072a3); +} +.btn-info-outline .btn:visited, +.btn-outline .btn:visited, +.btn.btn-info-outline:visited, +.btn.btn-outline .btn:visited, +.btn.btn-outline-info:visited, +.btn.btn-outline:visited { + color: #0072a3; + color: var(--clr-btn-default-outline-color, #0072a3); +} +.btn-info-outline .btn:hover, +.btn-outline .btn:hover, +.btn.btn-info-outline:hover, +.btn.btn-outline .btn:hover, +.btn.btn-outline-info:hover, +.btn.btn-outline:hover { + background-color: #e3f5fc; + background-color: var(--clr-btn-default-outline-hover-bg-color, #e3f5fc); + color: #00567a; + color: var(--clr-btn-default-outline-hover-color, #00567a); +} +.btn-info-outline .btn:active, +.btn-outline .btn:active, +.btn.btn-info-outline:active, +.btn.btn-outline .btn:active, +.btn.btn-outline-info:active, +.btn.btn-outline:active { + -webkit-box-shadow: 0 0.1rem 0 0 #179bd3 inset; + box-shadow: 0 0.1rem 0 0 #179bd3 inset; + -webkit-box-shadow: 0 0.1rem 0 0 + var(--clr-btn-default-outline-box-shadow-color, #179bd3) inset; + box-shadow: 0 0.1rem 0 0 + var(--clr-btn-default-outline-box-shadow-color, #179bd3) inset; +} +.btn-info-outline .btn.disabled, +.btn-info-outline .btn:disabled, +.btn-outline .btn.disabled, +.btn-outline .btn:disabled, +.btn.btn-info-outline.disabled, +.btn.btn-info-outline:disabled, +.btn.btn-outline .btn.disabled, +.btn.btn-outline .btn:disabled, +.btn.btn-outline-info.disabled, +.btn.btn-outline-info:disabled, +.btn.btn-outline.disabled, +.btn.btn-outline:disabled { + color: #666; + color: var(--clr-btn-default-outline-disabled-color, #666); + cursor: not-allowed; + opacity: 0.4; + background-color: transparent; + background-color: var( + --clr-btn-default-outline-disabled-bg-color, + transparent + ); + border-color: #8c8c8c; + border-color: var(--clr-btn-default-outline-disabled-border-color, #8c8c8c); + -webkit-box-shadow: none; + box-shadow: none; +} +.btn-outline-success .btn, +.btn-success-outline .btn, +.btn.btn-outline-success, +.btn.btn-success-outline { + border-color: #3c8500; + border-color: var(--clr-btn-success-outline-border-color, #3c8500); + background-color: transparent; + background-color: var(--clr-btn-success-outline-bg-color, transparent); + color: #3c8500; + color: var(--clr-btn-success-outline-color, #3c8500); +} +.btn-outline-success .btn cds-icon, +.btn-success-outline .btn cds-icon, +.btn.btn-outline-success cds-icon, +.btn.btn-success-outline cds-icon { + color: #3c8500; + color: var(--clr-btn-success-outline-color, #3c8500); +} +.btn-outline-success .btn:visited, +.btn-success-outline .btn:visited, +.btn.btn-outline-success:visited, +.btn.btn-success-outline:visited { + color: #3c8500; + color: var(--clr-btn-success-outline-color, #3c8500); +} +.btn-outline-success .btn:hover, +.btn-success-outline .btn:hover, +.btn.btn-outline-success:hover, +.btn.btn-success-outline:hover { + background-color: #dff0d0; + background-color: var(--clr-btn-success-outline-hover-bg-color, #dff0d0); + color: #255200; + color: var(--clr-btn-success-outline-hover-color, #255200); +} +.btn-outline-success .btn:active, +.btn-success-outline .btn:active, +.btn.btn-outline-success:active, +.btn.btn-success-outline:active { + -webkit-box-shadow: 0 0.1rem 0 0 #5eb715 inset; + box-shadow: 0 0.1rem 0 0 #5eb715 inset; + -webkit-box-shadow: 0 0.1rem 0 0 + var(--clr-btn-success-outline-box-shadow-color, #5eb715) inset; + box-shadow: 0 0.1rem 0 0 + var(--clr-btn-success-outline-box-shadow-color, #5eb715) inset; +} +.btn-outline-success .btn.disabled, +.btn-outline-success .btn:disabled, +.btn-success-outline .btn.disabled, +.btn-success-outline .btn:disabled, +.btn.btn-outline-success.disabled, +.btn.btn-outline-success:disabled, +.btn.btn-success-outline.disabled, +.btn.btn-success-outline:disabled { + color: #666; + color: var(--clr-btn-success-outline-disabled-color, #666); + cursor: not-allowed; + opacity: 0.4; + background-color: transparent; + background-color: var( + --clr-btn-success-outline-disabled-bg-color, + transparent + ); + border-color: #8c8c8c; + border-color: var(--clr-btn-success-outline-disabled-border-color, #8c8c8c); + -webkit-box-shadow: none; + box-shadow: none; +} +.btn-danger-outline .btn, +.btn-outline-danger .btn, +.btn-outline-warning .btn, +.btn-warning-outline .btn, +.btn.btn-danger-outline, +.btn.btn-outline-danger, +.btn.btn-outline-warning, +.btn.btn-warning-outline { + border-color: #c21d00; + border-color: var(--clr-btn-danger-outline-border-color, #c21d00); + background-color: transparent; + background-color: var(--clr-btn-danger-outline-bg-color, transparent); + color: #db2100; + color: var(--clr-btn-danger-outline-color, #db2100); +} +.btn-danger-outline .btn cds-icon, +.btn-outline-danger .btn cds-icon, +.btn-outline-warning .btn cds-icon, +.btn-warning-outline .btn cds-icon, +.btn.btn-danger-outline cds-icon, +.btn.btn-outline-danger cds-icon, +.btn.btn-outline-warning cds-icon, +.btn.btn-warning-outline cds-icon { + color: #db2100; + color: var(--clr-btn-danger-outline-color, #db2100); +} +.btn-danger-outline .btn:visited, +.btn-outline-danger .btn:visited, +.btn-outline-warning .btn:visited, +.btn-warning-outline .btn:visited, +.btn.btn-danger-outline:visited, +.btn.btn-outline-danger:visited, +.btn.btn-outline-warning:visited, +.btn.btn-warning-outline:visited { + color: #db2100; + color: var(--clr-btn-danger-outline-color, #db2100); +} +.btn-danger-outline .btn:hover, +.btn-outline-danger .btn:hover, +.btn-outline-warning .btn:hover, +.btn-warning-outline .btn:hover, +.btn.btn-danger-outline:hover, +.btn.btn-outline-danger:hover, +.btn.btn-outline-warning:hover, +.btn.btn-warning-outline:hover { + background-color: #feddd7; + background-color: var(--clr-btn-danger-outline-hover-bg-color, #feddd7); + color: #991700; + color: var(--clr-btn-danger-outline-hover-color, #991700); +} +.btn-danger-outline .btn:active, +.btn-outline-danger .btn:active, +.btn-outline-warning .btn:active, +.btn-warning-outline .btn:active, +.btn.btn-danger-outline:active, +.btn.btn-outline-danger:active, +.btn.btn-outline-warning:active, +.btn.btn-warning-outline:active { + -webkit-box-shadow: 0 0.1rem 0 0 #fcc5bb inset; + box-shadow: 0 0.1rem 0 0 #fcc5bb inset; + -webkit-box-shadow: 0 0.1rem 0 0 + var(--clr-btn-danger-outline-box-shadow-color, #fcc5bb) inset; + box-shadow: 0 0.1rem 0 0 + var(--clr-btn-danger-outline-box-shadow-color, #fcc5bb) inset; +} +.btn-danger-outline .btn.disabled, +.btn-danger-outline .btn:disabled, +.btn-outline-danger .btn.disabled, +.btn-outline-danger .btn:disabled, +.btn-outline-warning .btn.disabled, +.btn-outline-warning .btn:disabled, +.btn-warning-outline .btn.disabled, +.btn-warning-outline .btn:disabled, +.btn.btn-danger-outline.disabled, +.btn.btn-danger-outline:disabled, +.btn.btn-outline-danger.disabled, +.btn.btn-outline-danger:disabled, +.btn.btn-outline-warning.disabled, +.btn.btn-outline-warning:disabled, +.btn.btn-warning-outline.disabled, +.btn.btn-warning-outline:disabled { + color: #666; + color: var(--clr-btn-danger-outline-disabled-color, #666); + cursor: not-allowed; + opacity: 0.4; + background-color: transparent; + background-color: var( + --clr-btn-danger-outline-disabled-bg-color, + transparent + ); + border-color: #666; + border-color: var(--clr-btn-danger-outline-disabled-border-color, #666); + -webkit-box-shadow: none; + box-shadow: none; +} +.btn-link .btn, +.btn.btn-link { + border-color: transparent; + border-color: var(--clr-btn-link-border-color, transparent); + background-color: transparent; + background-color: var(--clr-btn-link-bg-color, transparent); + color: #0072a3; + color: var(--clr-btn-link-color, #0072a3); +} +.btn-link .btn cds-icon, +.btn.btn-link cds-icon { + color: #0072a3; + color: var(--clr-btn-link-color, #0072a3); +} +.btn-link .btn:visited, +.btn.btn-link:visited { + color: #0072a3; + color: var(--clr-btn-link-color, #0072a3); +} +.btn-link .btn:hover, +.btn.btn-link:hover { + background-color: transparent; + background-color: var(--clr-btn-link-hover-bg-color, transparent); + color: #00567a; + color: var(--clr-btn-link-hover-color, #00567a); +} +.btn-link .btn:active, +.btn.btn-link:active { + -webkit-box-shadow: none; + box-shadow: none; +} +.btn-link .btn.disabled, +.btn-link .btn:disabled, +.btn.btn-link.disabled, +.btn.btn-link:disabled { + color: #666; + color: var(--clr-btn-link-disabled-color, #666); + cursor: not-allowed; + opacity: 0.4; + background-color: transparent; + background-color: var(--clr-btn-link-disabled-bg-color, transparent); + border-color: transparent; + border-color: var(--clr-btn-link-disabled-border-color, transparent); + -webkit-box-shadow: none; + box-shadow: none; +} +.alert-app-level .alert-item .btn, +.btn-inverse .btn, +.btn.btn-inverse { + border-color: #fff; + border-color: var(--clr-btn-inverse-border-color, #fff); + background-color: transparent; + background-color: var(--clr-btn-inverse-bg-color, transparent); + color: #fff; + color: var(--clr-btn-inverse-color, #fff); +} +.alert-app-level .alert-item .btn cds-icon, +.btn-inverse .btn cds-icon, +.btn.btn-inverse cds-icon { + color: #fff; + color: var(--clr-btn-inverse-color, #fff); +} +.alert-app-level .alert-item .btn:visited, +.btn-inverse .btn:visited, +.btn.btn-inverse:visited { + color: #fff; + color: var(--clr-btn-inverse-color, #fff); +} +.alert-app-level .alert-item .btn:hover, +.btn-inverse .btn:hover, +.btn.btn-inverse:hover { + background-color: rgba(255, 255, 255, 0.15); + background-color: var( + --clr-btn-inverse-hover-bg-color, + rgba(255, 255, 255, 0.15) + ); + color: #fff; + color: var(--clr-btn-inverse-hover-color, #fff); +} +.alert-app-level .alert-item .btn:active, +.btn-inverse .btn:active, +.btn.btn-inverse:active { + -webkit-box-shadow: 0 0.1rem 0 0 rgba(0, 0, 0, 0.25) inset; + box-shadow: 0 0.1rem 0 0 rgba(0, 0, 0, 0.25) inset; + -webkit-box-shadow: 0 0.1rem 0 0 + var(--clr-btn-inverse-box-shadow-color, rgba(0, 0, 0, 0.25)) inset; + box-shadow: 0 0.1rem 0 0 + var(--clr-btn-inverse-box-shadow-color, rgba(0, 0, 0, 0.25)) inset; +} +.alert-app-level .alert-item .btn.disabled, +.alert-app-level .alert-item .btn:disabled, +.btn-inverse .btn.disabled, +.btn-inverse .btn:disabled, +.btn.btn-inverse.disabled, +.btn.btn-inverse:disabled { + color: #fff; + color: var(--clr-btn-inverse-disabled-color, #fff); + cursor: not-allowed; + opacity: 0.4; + background-color: transparent; + background-color: var(--clr-btn-inverse-disabled-bg-color, transparent); + border-color: #fff; + border-color: var(--clr-btn-inverse-disabled-border-color, #fff); + -webkit-box-shadow: none; + box-shadow: none; +} +.alert-app-level .alert-item .btn, +.btn-sm .btn, +.btn.btn-sm { + line-height: 1.15rem; + line-height: var(--clr-btn-appearance-standard-line-height, 1.15rem); + letter-spacing: 0.073em; + font-size: 0.55rem; + font-size: var(--clr-btn-appearance-standard-font-size, 0.55rem); + font-weight: 500; + font-weight: var(--clr-btn-appearance-standard-font-weight, 500); + height: 1.2rem; + height: var(--clr-btn-appearance-standard-height, 1.2rem); + padding: 0 0.6rem; + padding: var(--clr-btn-appearance-standard-padding, 0 0.6rem); +} +.btn-block { + display: block; + width: 100%; + max-width: 100%; +} +.btn { + margin-top: 0.3rem; + margin-top: var(--clr-btn-vertical-margin, 0.3rem); + margin-bottom: 0.3rem; + margin-bottom: var(--clr-btn-vertical-margin, 0.3rem); + margin-right: 0.6rem; + margin-right: var(--clr-btn-horizontal-margin, 0.6rem); + margin-left: 0; +} +.btn.btn-link { + margin-right: 0; +} +.alert-app-level .alert-item .btn.btn-link, +.btn.btn-link.btn-inverse { + border-color: transparent; +} +.alert-app-level .alert-item .btn:not(.btn-link) cds-icon, +.btn-sm:not(.btn-link) cds-icon { + width: 0.6rem; + width: var(--clr-btn-appearance-standard-icon-size, 0.6rem); + height: 0.6rem; + height: var(--clr-btn-appearance-standard-icon-size, 0.6rem); + -webkit-transform: translate3d(0, -0.05rem, 0); + transform: translate3d(0, -0.05rem, 0); +} +.btn-icon { + min-width: 0; +} +.btn-icon.disabled, +.btn-icon:disabled { + color: #666; + color: var(--clr-btn-icon-disabled-color, #666); +} +.btn-group.btn-danger .dropdown-toggle, +.btn-group.btn-primary .dropdown-toggle, +.btn-group.btn-success .dropdown-toggle, +.btn-group.btn-warning .dropdown-toggle { + border-color: #0072a3; + border-color: var(--clr-btn-primary-border-color, #0072a3); + background-color: #0072a3; + background-color: var(--clr-btn-primary-bg-color, #0072a3); + color: #fff; + color: var(--clr-btn-primary-color, #fff); +} +.btn-group.btn-danger .dropdown-toggle cds-icon, +.btn-group.btn-primary .dropdown-toggle cds-icon, +.btn-group.btn-success .dropdown-toggle cds-icon, +.btn-group.btn-warning .dropdown-toggle cds-icon { + color: #fff; + color: var(--clr-btn-primary-color, #fff); +} +.btn-group.btn-danger .dropdown-toggle:visited, +.btn-group.btn-primary .dropdown-toggle:visited, +.btn-group.btn-success .dropdown-toggle:visited, +.btn-group.btn-warning .dropdown-toggle:visited { + color: #fff; + color: var(--clr-btn-primary-color, #fff); +} +.btn-group.btn-danger .dropdown-toggle:hover, +.btn-group.btn-primary .dropdown-toggle:hover, +.btn-group.btn-success .dropdown-toggle:hover, +.btn-group.btn-warning .dropdown-toggle:hover { + background-color: #00567a; + background-color: var(--clr-btn-primary-hover-bg-color, #00567a); + color: #e3f5fc; + color: var(--clr-btn-primary-hover-color, #e3f5fc); +} +.btn-group.btn-danger .dropdown-toggle:active, +.btn-group.btn-primary .dropdown-toggle:active, +.btn-group.btn-success .dropdown-toggle:active, +.btn-group.btn-warning .dropdown-toggle:active { + -webkit-box-shadow: 0 0.1rem 0 0 #179bd3 inset; + box-shadow: 0 0.1rem 0 0 #179bd3 inset; + -webkit-box-shadow: 0 0.1rem 0 0 + var(--clr-btn-primary-box-shadow-color, #179bd3) inset; + box-shadow: 0 0.1rem 0 0 var(--clr-btn-primary-box-shadow-color, #179bd3) + inset; +} +.btn-group.btn-danger .dropdown-toggle.disabled, +.btn-group.btn-danger .dropdown-toggle:disabled, +.btn-group.btn-primary .dropdown-toggle.disabled, +.btn-group.btn-primary .dropdown-toggle:disabled, +.btn-group.btn-success .dropdown-toggle.disabled, +.btn-group.btn-success .dropdown-toggle:disabled, +.btn-group.btn-warning .dropdown-toggle.disabled, +.btn-group.btn-warning .dropdown-toggle:disabled { + color: #666; + color: var(--clr-btn-primary-disabled-color, #666); + cursor: not-allowed; + opacity: 0.4; + background-color: #ccc; + background-color: var(--clr-btn-primary-disabled-bg-color, #ccc); + border-color: #ccc; + border-color: var(--clr-btn-primary-disabled-border-color, #ccc); + -webkit-box-shadow: none; + box-shadow: none; +} +.btn-group.btn-link .dropdown-toggle { + border-color: transparent; + border-color: var(--clr-btn-link-border-color, transparent); + background-color: transparent; + background-color: var(--clr-btn-link-bg-color, transparent); + color: #0072a3; + color: var(--clr-btn-link-color, #0072a3); +} +.btn-group.btn-link .dropdown-toggle cds-icon { + color: #0072a3; + color: var(--clr-btn-link-color, #0072a3); +} +.btn-group.btn-link .dropdown-toggle:visited { + color: #0072a3; + color: var(--clr-btn-link-color, #0072a3); +} +.btn-group.btn-link .dropdown-toggle:hover { + background-color: transparent; + background-color: var(--clr-btn-link-hover-bg-color, transparent); + color: #00567a; + color: var(--clr-btn-link-hover-color, #00567a); +} +.btn-group.btn-link .dropdown-toggle:active { + -webkit-box-shadow: none; + box-shadow: none; +} +.btn-group.btn-link .dropdown-toggle.disabled, +.btn-group.btn-link .dropdown-toggle:disabled { + color: #666; + color: var(--clr-btn-link-disabled-color, #666); + cursor: not-allowed; + opacity: 0.4; + background-color: transparent; + background-color: var(--clr-btn-link-disabled-bg-color, transparent); + border-color: transparent; + border-color: var(--clr-btn-link-disabled-border-color, transparent); + -webkit-box-shadow: none; + box-shadow: none; +} +.alert-app-level + .alert-item + .btn-group.btn + .btn-group-overflow + > .dropdown-toggle, +.btn-group.btn-sm .btn-group-overflow > .dropdown-toggle { + line-height: 1.15rem; + line-height: var(--clr-btn-appearance-standard-line-height, 1.15rem); + letter-spacing: 0.073em; + font-size: 0.55rem; + font-size: var(--clr-btn-appearance-standard-font-size, 0.55rem); + font-weight: 500; + font-weight: var(--clr-btn-appearance-standard-font-weight, 500); + height: 1.2rem; + height: var(--clr-btn-appearance-standard-height, 1.2rem); + padding: 0 0.6rem; + padding: var(--clr-btn-appearance-standard-padding, 0 0.6rem); +} +.checkbox-inline.btn, +.checkbox.btn, +.radio-inline.btn, +.radio.btn { + padding: 0; +} +.checkbox-inline.btn label, +.checkbox.btn label, +.radio-inline.btn label, +.radio.btn label { + display: block; + line-height: inherit; + padding: 0 0.6rem; + cursor: pointer; +} +.checkbox-inline.btn input[type="checkbox"] + label::after, +.checkbox-inline.btn input[type="checkbox"] + label::before, +.checkbox.btn input[type="checkbox"] + label::after, +.checkbox.btn input[type="checkbox"] + label::before { + content: none; +} +.radio-inline.btn input[type="radio"] + label::after, +.radio-inline.btn input[type="radio"] + label::before, +.radio.btn input[type="radio"] + label::after, +.radio.btn input[type="radio"] + label::before { + content: none; +} +.checkbox-inline.btn input[type="checkbox"]:checked + label, +.checkbox.btn input[type="checkbox"]:checked + label { + background-color: #0072a3; + color: #fff; +} +.checkbox-inline.btn label, +.checkbox.btn label { + width: 100%; +} +.checkbox-inline.btn.btn-info input[type="checkbox"]:checked + label, +.checkbox-inline.btn.btn-info-outline input[type="checkbox"]:checked + label, +.checkbox-inline.btn.btn-outline input[type="checkbox"]:checked + label, +.checkbox-inline.btn.btn-outline-info input[type="checkbox"]:checked + label, +.checkbox-inline.btn.btn-outline-primary input[type="checkbox"]:checked + label, +.checkbox-inline.btn.btn-outline-secondary + input[type="checkbox"]:checked + + label, +.checkbox-inline.btn.btn-primary-outline input[type="checkbox"]:checked + label, +.checkbox-inline.btn.btn-secondary input[type="checkbox"]:checked + label, +.checkbox-inline.btn.btn-secondary-outline + input[type="checkbox"]:checked + + label, +.checkbox.btn.btn-info input[type="checkbox"]:checked + label, +.checkbox.btn.btn-info-outline input[type="checkbox"]:checked + label, +.checkbox.btn.btn-outline input[type="checkbox"]:checked + label, +.checkbox.btn.btn-outline-info input[type="checkbox"]:checked + label, +.checkbox.btn.btn-outline-primary input[type="checkbox"]:checked + label, +.checkbox.btn.btn-outline-secondary input[type="checkbox"]:checked + label, +.checkbox.btn.btn-primary-outline input[type="checkbox"]:checked + label, +.checkbox.btn.btn-secondary input[type="checkbox"]:checked + label, +.checkbox.btn.btn-secondary-outline input[type="checkbox"]:checked + label { + background-color: #0072a3; + color: #fff; +} +.checkbox-inline.btn.btn-primary input[type="checkbox"]:checked + label, +.checkbox.btn.btn-primary input[type="checkbox"]:checked + label { + background-color: #0072a3; + color: #fff; +} +.checkbox-inline.btn.btn-success input[type="checkbox"]:checked + label, +.checkbox.btn.btn-success input[type="checkbox"]:checked + label { + background-color: #306b00; + color: #fff; +} +.checkbox-inline.btn.btn-danger input[type="checkbox"]:checked + label, +.checkbox-inline.btn.btn-warning input[type="checkbox"]:checked + label, +.checkbox.btn.btn-danger input[type="checkbox"]:checked + label, +.checkbox.btn.btn-warning input[type="checkbox"]:checked + label { + background-color: #c21d00; + color: #fff; +} +.checkbox-inline.btn.btn-link input[type="checkbox"]:checked + label, +.checkbox.btn.btn-link input[type="checkbox"]:checked + label { + background-color: transparent; + color: #00567a; +} +.alert-app-level + .alert-item + .checkbox-inline.btn + input[type="checkbox"]:checked + + label, +.alert-app-level + .alert-item + .checkbox.btn + input[type="checkbox"]:checked + + label, +.checkbox-inline.btn.btn-inverse input[type="checkbox"]:checked + label, +.checkbox.btn.btn-inverse input[type="checkbox"]:checked + label { + background-color: rgba(255, 255, 255, 0.15); + color: #fff; +} +.radio.btn input[type="radio"]:checked + label { + background-color: #0072a3; + color: #fff; +} +.radio.btn label { + width: 100%; +} +.radio.btn.btn-info input[type="radio"]:checked + label, +.radio.btn.btn-info-outline input[type="radio"]:checked + label, +.radio.btn.btn-outline input[type="radio"]:checked + label, +.radio.btn.btn-outline-info input[type="radio"]:checked + label, +.radio.btn.btn-outline-primary input[type="radio"]:checked + label, +.radio.btn.btn-outline-secondary input[type="radio"]:checked + label, +.radio.btn.btn-primary-outline input[type="radio"]:checked + label, +.radio.btn.btn-secondary input[type="radio"]:checked + label, +.radio.btn.btn-secondary-outline input[type="radio"]:checked + label { + background-color: #0072a3; + color: #fff; +} +.radio.btn.btn-primary input[type="radio"]:checked + label { + background-color: #0072a3; + color: #fff; +} +.radio.btn.btn-success input[type="radio"]:checked + label { + background-color: #306b00; + color: #fff; +} +.radio.btn.btn-danger input[type="radio"]:checked + label, +.radio.btn.btn-warning input[type="radio"]:checked + label { + background-color: #c21d00; + color: #fff; +} +.radio.btn.btn-outline-success input[type="radio"]:checked + label, +.radio.btn.btn-success-outline input[type="radio"]:checked + label { + background-color: #3c8500; + color: #fff; +} +.radio.btn.btn-danger-outline input[type="radio"]:checked + label, +.radio.btn.btn-outline-danger input[type="radio"]:checked + label, +.radio.btn.btn-outline-warning input[type="radio"]:checked + label, +.radio.btn.btn-warning-outline input[type="radio"]:checked + label { + background-color: #c21d00; + color: #fff; +} +.radio.btn.btn-link input[type="radio"]:checked + label { + background-color: transparent; + color: #00567a; +} +.alert-app-level .alert-item .radio.btn input[type="radio"]:checked + label, +.radio.btn.btn-inverse input[type="radio"]:checked + label { + background-color: rgba(255, 255, 255, 0.15); + color: #fff; +} +.btn-group { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + margin-right: 0.6rem; +} +.btn-group .btn { + margin: 0; + vertical-align: top; + overflow: visible; +} +.btn-group .btn label { + height: 100%; +} +.btn-group .btn input[type="checkbox"]:focus, +.btn-group .btn input[type="radio"]:focus { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + opacity: 1; + top: 0; + height: 100%; + width: 100%; + -webkit-box-shadow: 0 0 0.25rem #51cbee; + box-shadow: 0 0 0.25rem #51cbee; + -webkit-box-shadow: 0 0 0.25rem var(--clr-btn-group-focus-outline, #51cbee); + box-shadow: 0 0 0.25rem var(--clr-btn-group-focus-outline, #51cbee); + padding: 0.15rem 0 0.15rem 0.15rem; + border-width: 0.05rem; + border-style: solid; + border-color: #51cbee; + border-color: var(--clr-btn-group-focus-outline, #51cbee); +} +.btn-group .btn input[type="checkbox"]:focus::-ms-check, +.btn-group .btn input[type="radio"]:focus::-ms-check { + display: none; +} +.btn-group .btn:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group .btn:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.btn-group .tooltip:not(:first-child) .btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group .tooltip:not(:last-child) .btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.btn-group.btn-danger .btn:not(:last-child), +.btn-group.btn-danger .tooltip:not(:last-child) .btn, +.btn-group.btn-primary .btn:not(:last-child), +.btn-group.btn-primary .tooltip:not(:last-child) .btn, +.btn-group.btn-success .btn:not(:last-child), +.btn-group.btn-success .tooltip:not(:last-child) .btn, +.btn-group.btn-warning .btn:not(:last-child), +.btn-group.btn-warning .tooltip:not(:last-child) .btn { + margin: 0; + margin-right: 0.05rem; + margin-right: var(--clr-btn-border-width, 0.05rem); +} +.btn-group.btn-danger .dropdown-menu .btn, +.btn-group.btn-primary .dropdown-menu .btn, +.btn-group.btn-success .dropdown-menu .btn, +.btn-group.btn-warning .dropdown-menu .btn { + margin: 0; +} +.btn-group > .btn-group-overflow { + position: relative; +} +.btn-group + > .btn-group-overflow:last-child:not(:first-child) + > .btn:first-child { + border-radius: 0.15rem; + border-radius: var(--clr-btn-border-radius, 0.15rem); + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group > .btn-group-overflow:last-child:first-child > .btn:first-child { + border-radius: 0.15rem; + border-radius: var(--clr-btn-border-radius, 0.15rem); +} +.btn-group .btn + .btn { + border-left: none; +} +.btn-group .tooltip:not(:first-child) .btn { + border-left: none; +} +.btn-group .btn + .btn-group-overflow .btn { + border-left: none; +} +.btn-group.btn-link .dropdown-toggle { + min-width: 0; +} +.btn-group.btn-icon-link.btn-link .btn { + min-width: 0; +} +.btn-group.btn-icon .btn { + min-width: 0; +} +.btn-group .clr-icon-title { + display: none; + text-transform: none; +} +.btn-group .dropdown-toggle { + display: block; +} +.btn-group .dropdown-menu cds-icon { + display: none; +} +.btn-group .dropdown-menu .clr-icon-title { + display: inline; +} +.checkbox, +.radio { + position: relative; +} +.checkbox input[type="checkbox"], +.checkbox input[type="radio"], +.radio input[type="checkbox"], +.radio input[type="radio"] { + position: absolute; + top: 0; + left: 0; + height: 0; + width: 0; + opacity: 0; +} +.card-footer .checkbox.btn label, +.card-footer .radio.btn label { + line-height: 1.15rem; +} +.dropdown-menu.clr-button-group-menu { + visibility: visible; +} +button.close { + padding: 0; + cursor: pointer; + background: 0 0; + border: 0; + -webkit-appearance: none; +} +.close { + float: right; + font-size: 1.8rem; + -webkit-transition: color linear 0.2s; + transition: color linear 0.2s; + font-weight: 200; + text-shadow: none; + line-height: inherit; + color: #8c8c8c; + color: var(--clr-close-color--normal, #8c8c8c); +} +.close cds-icon { + fill: #8c8c8c; + fill: var(--clr-close-color--normal, #8c8c8c); +} +.close:active, +.close:focus, +.close:hover { + opacity: 1; + color: #000; + color: var(--clr-close-color--hover, #000); +} +.close:active cds-icon, +.close:focus cds-icon, +.close:hover cds-icon { + fill: #000; + fill: var(--clr-close-color--hover, #000); +} +.close:focus { + outline: 0; + -webkit-box-shadow: 0 0 0.1rem 0.1rem #69c0e2; + box-shadow: 0 0 0.1rem 0.1rem #69c0e2; +} +:root { + --clr-alert-action-color: var(--clr-color-neutral-700); + --clr-alert-action-active-color: var(--clr-color-secondary-action-900); + --clr-alert-close-icon-color: var(--clr-alert-action-color); + --clr-alert-close-icon-hover-color: var(--clr-alert-action-active-color); + --clr-alert-close-icon-opacity: 1; + --clr-alert-close-icon-hover-opacity: 1; + --clr-app-level-alert-color: var(--clr-color-neutral-0); + --clr-app-alert-close-icon-color: var(--clr-app-level-alert-color); + --clr-app-alert-close-icon-opacity: 0.8; + --clr-app-alert-close-icon-hover-opacity: 1; + --clr-alert-borderradius: var(--clr-global-borderradius); + --clr-alert-info-bg-color: var(--clr-color-action-50); + --clr-alert-info-font-color: var(--clr-color-neutral-700); + --clr-alert-info-border-color: var(--clr-color-action-800); + --clr-alert-info-icon-color: var(--clr-color-action-800); + --clr-alert-info-action-color: var(--clr-alert-action-color); + --clr-alert-info-action-active-color: var(--clr-alert-action-active-color); + --clr-alert-info-close-icon-color: var(--clr-alert-close-icon-color); + --clr-alert-info-close-icon-opacity: var(--clr-alert-close-icon-opacity); + --clr-alert-info-close-icon-hover-color: var( + --clr-alert-close-icon-hover-color + ); + --clr-alert-info-close-icon-hover-opacity: var( + --clr-alert-close-icon-hover-opacity + ); + --clr-alert-success-bg-color: var(--clr-color-success-50); + --clr-alert-success-font-color: var(--clr-color-neutral-700); + --clr-alert-success-border-color: var(--clr-color-success-800); + --clr-alert-success-icon-color: var(--clr-color-success-800); + --clr-alert-success-action-color: var(--clr-alert-action-color); + --clr-alert-success-action-active-color: var( + --clr-alert-action-active-color + ); + --clr-alert-success-close-icon-color: var(--clr-alert-close-icon-color); + --clr-alert-success-close-icon-opacity: var(--clr-alert-close-icon-opacity); + --clr-alert-success-close-icon-hover-color: var( + --clr-alert-close-icon-hover-color + ); + --clr-alert-success-close-icon-hover-opacity: var( + --clr-alert-close-icon-hover-opacity + ); + --clr-alert-warning-bg-color: var(--clr-color-warning-100); + --clr-alert-warning-font-color: var(--clr-color-neutral-900); + --clr-alert-warning-border-color: var(--clr-color-warning-800); + --clr-alert-warning-icon-color: var(--clr-color-warning-800); + --clr-alert-warning-action-color: var(--clr-alert-action-color); + --clr-alert-warning-action-active-color: var( + --clr-alert-action-active-color + ); + --clr-alert-warning-close-icon-color: var(--clr-alert-close-icon-color); + --clr-alert-warning-close-icon-opacity: var(--clr-alert-close-icon-opacity); + --clr-alert-warning-close-icon-hover-color: var( + --clr-alert-close-icon-hover-color + ); + --clr-alert-warning-close-icon-hover-opacity: var( + --clr-alert-close-icon-hover-opacity + ); + --clr-alert-danger-bg-color: var(--clr-color-danger-100); + --clr-alert-danger-font-color: var(--clr-color-neutral-700); + --clr-alert-danger-border-color: var(--clr-color-danger-900); + --clr-alert-danger-icon-color: var(--clr-color-danger-900); + --clr-alert-danger-action-color: var(--clr-alert-action-color); + --clr-alert-danger-action-active-color: var( + --clr-alert-action-active-color + ); + --clr-alert-danger-close-icon-color: var(--clr-alert-close-icon-color); + --clr-alert-danger-close-icon-opacity: var(--clr-alert-close-icon-opacity); + --clr-alert-danger-close-icon-hover-color: var( + --clr-alert-close-icon-hover-color + ); + --clr-alert-danger-close-icon-hover-opacity: var( + --clr-alert-close-icon-hover-opacity + ); + --clr-app-alert-info-bg-color: var(--clr-color-action-600); + --clr-app-alert-info-font-color: var(--clr-app-level-alert-color); + --clr-app-alert-info-border-color: none; + --clr-app-alert-info-icon-color: var(--clr-app-alert-close-icon-color); + --clr-app-alert-info-action-color: var(--clr-app-alert-info-font-color); + --clr-app-alert-info-action-active-color: var( + --clr-app-alert-info-font-color + ); + --clr-app-alert-info-close-icon-color: var( + --clr-app-alert-close-icon-color + ); + --clr-app-alert-info-close-icon-opacity: var( + --clr-app-alert-close-icon-opacity + ); + --clr-app-alert-info-close-icon-hover-color: var( + --clr-app-alert-close-icon-color + ); + --clr-app-alert-info-close-icon-hover-opacity: var( + --clr-app-alert-close-icon-hover-opacity + ); + --clr-app-alert-warning-bg-color: hsl(26, 100%, 38%); + --clr-app-alert-warning-border-color: none; + --clr-app-alert-warning-icon-color: var(--clr-app-alert-close-icon-color); + --clr-app-alert-warning-font-color: var(--clr-app-level-alert-color); + --clr-app-alert-warning-close-icon-color: var( + --clr-app-alert-close-icon-color + ); + --clr-app-alert-warning-action-color: var( + --clr-app-alert-warning-font-color + ); + --clr-app-alert-warning-action-active-color: var( + --clr-app-alert-warning-font-color + ); + --clr-app-alert-warning-close-icon-opacity: var( + --clr-app-alert-close-icon-opacity + ); + --clr-app-alert-warning-close-icon-hover-color: var( + --clr-app-alert-close-icon-color + ); + --clr-app-alert-warning-close-icon-hover-opacity: var( + --clr-app-alert-close-icon-hover-opacity + ); + --clr-app-alert-danger-bg-color: var(--clr-color-danger-800); + --clr-app-alert-danger-border-color: none; + --clr-app-alert-danger-icon-color: var(--clr-app-alert-close-icon-color); + --clr-app-alert-danger-font-color: var(--clr-app-level-alert-color); + --clr-app-alert-danger-close-icon-color: var( + --clr-app-alert-close-icon-color + ); + --clr-app-alert-danger-action-color: var(--clr-app-alert-danger-font-color); + --clr-app-alert-danger-action-active-color: var( + --clr-app-alert-danger-font-color + ); + --clr-app-alert-danger-close-icon-opacity: var( + --clr-app-alert-close-icon-opacity + ); + --clr-app-alert-danger-close-icon-hover-color: var( + --clr-app-alert-close-icon-color + ); + --clr-app-alert-danger-close-icon-hover-opacity: var( + --clr-app-alert-close-icon-hover-opacity + ); + --clr-app-alert-success-border-color: none; + --clr-app-alert-success-bg-color: var(--clr-color-success-700); + --clr-app-alert-success-icon-color: var(--clr-app-alert-close-icon-color); + --clr-app-alert-success-font-color: var(--clr-app-level-alert-color); + --clr-app-alert-success-close-icon-color: var( + --clr-app-alert-close-icon-color + ); + --clr-app-alert-success-action-color: var( + --clr-app-alert-success-font-color + ); + --clr-app-alert-success-action-active-color: var( + --clr-app-alert-success-font-color + ); + --clr-app-alert-success-close-icon-opacity: var( + --clr-app-alert-close-icon-opacity + ); + --clr-app-alert-success-close-icon-hover-color: var( + --clr-app-alert-close-icon-color + ); + --clr-app-alert-success-close-icon-hover-opacity: var( + --clr-app-alert-close-icon-hover-opacity + ); + --clr-app-alert-pager-text-color: var(--clr-color-neutral-0, white); + --clr-app-alert-info-pager-bg-color: var(--clr-color-action-800, #00567a); + --clr-app-alert-warning-pager-bg-color: var( + --clr-color-warning-900, + #8f5a00 + ); + --clr-app-alert-danger-pager-bg-color: var(--clr-color-danger-900, #991700); +} +.alert-icon { + height: 1.2rem; + width: 1.2rem; + margin-left: -0.15rem; + margin-top: -0.2rem; +} +.alert-icon-wrapper { + -webkit-box-flex: 0; + -ms-flex: 0 0 1.25rem; + flex: 0 0 1.25rem; + -ms-flex-item-align: start; + align-self: start; + padding-top: 0.05rem; + height: 0.9rem; +} +.alert-item { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + min-height: 0.9rem; + margin-bottom: 0.3rem; +} +.alert-item:last-child { + margin-bottom: 0; +} +.alert-items { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; + padding: 0.4rem 0.55rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.alert-item > span, +.alert-text { + display: inline-block; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-negative: 1; + flex-shrink: 1; + -ms-flex-preferred-size: 98%; + flex-basis: 98%; + max-width: 98%; + margin-right: 0.6rem; + text-align: left; +} +.alert { + font-size: 0.65rem; + letter-spacing: normal; + line-height: 0.9rem; + position: relative; + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + width: auto; + border-radius: 0.15rem; + border-radius: var(--clr-alert-borderradius, 0.15rem); + margin-top: 0.3rem; + background: #e3f5fc; + background: var(--clr-alert-info-bg-color, #e3f5fc); + color: #666; + color: var(--clr-alert-info-font-color, #666); + border: 0.05rem solid; + border-color: #00567a; + border-color: var(--clr-alert-info-border-color, #00567a); +} +.alert .alert-icon { + color: #00567a; + color: var(--clr-alert-info-icon-color, #00567a); +} +.alert .alert-actions .dropdown .dropdown-toggle { + color: #666; + color: var(--clr-alert-info-action-color, #666); + border-color: #666; + border-color: var(--clr-alert-info-action-color, #666); +} +.alert .alert-action, +.alert .dropdown-toggle { + color: #666; + color: var(--clr-alert-info-action-color, #666); +} +.alert .alert-action.btn, +.alert .dropdown-toggle.btn { + border-color: #666; + border-color: var(--clr-alert-info-action-color, #666); +} +.alert .alert-action.btn:active, +.alert .alert-action.btn:focus, +.alert .alert-action.btn:hover, +.alert .dropdown-toggle.btn:active, +.alert .dropdown-toggle.btn:focus, +.alert .dropdown-toggle.btn:hover { + border-color: #4f0070; + border-color: var(--clr-alert-info-action-active-color, #4f0070); +} +.alert .alert-action.btn:active, +.alert .dropdown-toggle.btn:active { + -webkit-box-shadow: 0 0.05rem 0 0 #4f0070 inset; + box-shadow: 0 0.05rem 0 0 #4f0070 inset; + -webkit-box-shadow: 0 0.05rem 0 0 + var(--clr-alert-info-action-active-color, #4f0070) inset; + box-shadow: 0 0.05rem 0 0 var(--clr-alert-info-action-active-color, #4f0070) + inset; +} +.alert .alert-action:active, +.alert .alert-action:focus, +.alert .alert-action:hover, +.alert .dropdown-toggle:active, +.alert .dropdown-toggle:focus, +.alert .dropdown-toggle:hover { + color: #4f0070; + color: var(--clr-alert-info-action-active-color, #4f0070); + color: #4f0070; +} +.alert .close { + color: #666; + color: var(--clr-alert-info-close-icon-color, #666); + opacity: 1; + opacity: var(--clr-alert-info-close-icon-opacity, 1); +} +.alert .close cds-icon { + fill: #666; + fill: var(--clr-alert-info-close-icon-color, #666); +} +.alert .close:active, +.alert .close:focus, +.alert .close:hover { + color: #4f0070; + color: var(--clr-alert-info-close-icon-hover-color, #4f0070); + opacity: 1; + opacity: var(--clr-alert-info-close-icon-hover-opacity, 1); +} +.alert.alert-info { + background: #e3f5fc; + background: var(--clr-alert-info-bg-color, #e3f5fc); + color: #666; + color: var(--clr-alert-info-font-color, #666); + border: 0.05rem solid; + border-color: #00567a; + border-color: var(--clr-alert-info-border-color, #00567a); +} +.alert.alert-info .alert-icon { + color: #00567a; + color: var(--clr-alert-info-icon-color, #00567a); +} +.alert.alert-info .alert-actions .dropdown .dropdown-toggle { + color: #666; + color: var(--clr-alert-info-action-color, #666); + border-color: #666; + border-color: var(--clr-alert-info-action-color, #666); +} +.alert.alert-info .alert-action, +.alert.alert-info .dropdown-toggle { + color: #666; + color: var(--clr-alert-info-action-color, #666); +} +.alert.alert-info .alert-action.btn, +.alert.alert-info .dropdown-toggle.btn { + border-color: #666; + border-color: var(--clr-alert-info-action-color, #666); +} +.alert.alert-info .alert-action.btn:active, +.alert.alert-info .alert-action.btn:focus, +.alert.alert-info .alert-action.btn:hover, +.alert.alert-info .dropdown-toggle.btn:active, +.alert.alert-info .dropdown-toggle.btn:focus, +.alert.alert-info .dropdown-toggle.btn:hover { + border-color: #4f0070; + border-color: var(--clr-alert-info-action-active-color, #4f0070); +} +.alert.alert-info .alert-action.btn:active, +.alert.alert-info .dropdown-toggle.btn:active { + -webkit-box-shadow: 0 0.05rem 0 0 #4f0070 inset; + box-shadow: 0 0.05rem 0 0 #4f0070 inset; + -webkit-box-shadow: 0 0.05rem 0 0 + var(--clr-alert-info-action-active-color, #4f0070) inset; + box-shadow: 0 0.05rem 0 0 var(--clr-alert-info-action-active-color, #4f0070) + inset; +} +.alert.alert-info .alert-action:active, +.alert.alert-info .alert-action:focus, +.alert.alert-info .alert-action:hover, +.alert.alert-info .dropdown-toggle:active, +.alert.alert-info .dropdown-toggle:focus, +.alert.alert-info .dropdown-toggle:hover { + color: #4f0070; + color: var(--clr-alert-info-action-active-color, #4f0070); + color: #4f0070; +} +.alert.alert-info .close { + color: #666; + color: var(--clr-alert-info-close-icon-color, #666); + opacity: 1; + opacity: var(--clr-alert-info-close-icon-opacity, 1); +} +.alert.alert-info .close cds-icon { + fill: #666; + fill: var(--clr-alert-info-close-icon-color, #666); +} +.alert.alert-info .close:active, +.alert.alert-info .close:focus, +.alert.alert-info .close:hover { + color: #4f0070; + color: var(--clr-alert-info-close-icon-hover-color, #4f0070); + opacity: 1; + opacity: var(--clr-alert-info-close-icon-hover-opacity, 1); +} +.alert.alert-success { + background: #dff0d0; + background: var(--clr-alert-success-bg-color, #dff0d0); + color: #666; + color: var(--clr-alert-success-font-color, #666); + border: 0.05rem solid; + border-color: #306b00; + border-color: var(--clr-alert-success-border-color, #306b00); +} +.alert.alert-success .alert-icon { + color: #306b00; + color: var(--clr-alert-success-icon-color, #306b00); +} +.alert.alert-success .alert-actions .dropdown .dropdown-toggle { + color: #666; + color: var(--clr-alert-success-action-color, #666); + border-color: #666; + border-color: var(--clr-alert-success-action-color, #666); +} +.alert.alert-success .alert-action, +.alert.alert-success .dropdown-toggle { + color: #666; + color: var(--clr-alert-success-action-color, #666); +} +.alert.alert-success .alert-action.btn, +.alert.alert-success .dropdown-toggle.btn { + border-color: #666; + border-color: var(--clr-alert-success-action-color, #666); +} +.alert.alert-success .alert-action.btn:active, +.alert.alert-success .alert-action.btn:focus, +.alert.alert-success .alert-action.btn:hover, +.alert.alert-success .dropdown-toggle.btn:active, +.alert.alert-success .dropdown-toggle.btn:focus, +.alert.alert-success .dropdown-toggle.btn:hover { + border-color: #4f0070; + border-color: var(--clr-alert-success-action-active-color, #4f0070); +} +.alert.alert-success .alert-action.btn:active, +.alert.alert-success .dropdown-toggle.btn:active { + -webkit-box-shadow: 0 0.05rem 0 0 #4f0070 inset; + box-shadow: 0 0.05rem 0 0 #4f0070 inset; + -webkit-box-shadow: 0 0.05rem 0 0 + var(--clr-alert-success-action-active-color, #4f0070) inset; + box-shadow: 0 0.05rem 0 0 + var(--clr-alert-success-action-active-color, #4f0070) inset; +} +.alert.alert-success .alert-action:active, +.alert.alert-success .alert-action:focus, +.alert.alert-success .alert-action:hover, +.alert.alert-success .dropdown-toggle:active, +.alert.alert-success .dropdown-toggle:focus, +.alert.alert-success .dropdown-toggle:hover { + color: #4f0070; + color: var(--clr-alert-success-action-active-color, #4f0070); + color: #4f0070; +} +.alert.alert-success .close { + color: #666; + color: var(--clr-alert-success-close-icon-color, #666); + opacity: 1; + opacity: var(--clr-alert-success-close-icon-opacity, 1); +} +.alert.alert-success .close cds-icon { + fill: #666; + fill: var(--clr-alert-success-close-icon-color, #666); +} +.alert.alert-success .close:active, +.alert.alert-success .close:focus, +.alert.alert-success .close:hover { + color: #4f0070; + color: var(--clr-alert-success-close-icon-hover-color, #4f0070); + opacity: 1; + opacity: var(--clr-alert-success-close-icon-hover-opacity, 1); +} +.alert.alert-warning { + background: #fff4c7; + background: var(--clr-alert-warning-bg-color, #fff4c7); + color: #333; + color: var(--clr-alert-warning-font-color, #333); + border: 0.05rem solid; + border-color: #ad7600; + border-color: var(--clr-alert-warning-border-color, #ad7600); +} +.alert.alert-warning .alert-icon { + color: #454545; + color: var(--clr-alert-warning-icon-color, #454545); +} +.alert.alert-warning .alert-actions .dropdown .dropdown-toggle { + color: #666; + color: var(--clr-alert-warning-action-color, #666); + border-color: #666; + border-color: var(--clr-alert-warning-action-color, #666); +} +.alert.alert-warning .alert-action, +.alert.alert-warning .dropdown-toggle { + color: #666; + color: var(--clr-alert-warning-action-color, #666); +} +.alert.alert-warning .alert-action.btn, +.alert.alert-warning .dropdown-toggle.btn { + border-color: #666; + border-color: var(--clr-alert-warning-action-color, #666); +} +.alert.alert-warning .alert-action.btn:active, +.alert.alert-warning .alert-action.btn:focus, +.alert.alert-warning .alert-action.btn:hover, +.alert.alert-warning .dropdown-toggle.btn:active, +.alert.alert-warning .dropdown-toggle.btn:focus, +.alert.alert-warning .dropdown-toggle.btn:hover { + border-color: #4f0070; + border-color: var(--clr-alert-warning-action-active-color, #4f0070); +} +.alert.alert-warning .alert-action.btn:active, +.alert.alert-warning .dropdown-toggle.btn:active { + -webkit-box-shadow: 0 0.05rem 0 0 #4f0070 inset; + box-shadow: 0 0.05rem 0 0 #4f0070 inset; + -webkit-box-shadow: 0 0.05rem 0 0 + var(--clr-alert-warning-action-active-color, #4f0070) inset; + box-shadow: 0 0.05rem 0 0 + var(--clr-alert-warning-action-active-color, #4f0070) inset; +} +.alert.alert-warning .alert-action:active, +.alert.alert-warning .alert-action:focus, +.alert.alert-warning .alert-action:hover, +.alert.alert-warning .dropdown-toggle:active, +.alert.alert-warning .dropdown-toggle:focus, +.alert.alert-warning .dropdown-toggle:hover { + color: #4f0070; + color: var(--clr-alert-warning-action-active-color, #4f0070); + color: #4f0070; +} +.alert.alert-warning .close { + color: #666; + color: var(--clr-alert-warning-close-icon-color, #666); + opacity: 1; + opacity: var(--clr-alert-warning-close-icon-opacity, 1); +} +.alert.alert-warning .close cds-icon { + fill: #666; + fill: var(--clr-alert-warning-close-icon-color, #666); +} +.alert.alert-warning .close:active, +.alert.alert-warning .close:focus, +.alert.alert-warning .close:hover { + color: #4f0070; + color: var(--clr-alert-warning-close-icon-hover-color, #4f0070); + opacity: 1; + opacity: var(--clr-alert-warning-close-icon-hover-opacity, 1); +} +.alert.alert-danger { + background: #feddd7; + background: var(--clr-alert-danger-bg-color, #feddd7); + color: #666; + color: var(--clr-alert-danger-font-color, #666); + border: 0.05rem solid; + border-color: #991700; + border-color: var(--clr-alert-danger-border-color, #991700); +} +.alert.alert-danger .alert-icon { + color: #991700; + color: var(--clr-alert-danger-icon-color, #991700); +} +.alert.alert-danger .alert-actions .dropdown .dropdown-toggle { + color: #666; + color: var(--clr-alert-danger-action-color, #666); + border-color: #666; + border-color: var(--clr-alert-danger-action-color, #666); +} +.alert.alert-danger .alert-action, +.alert.alert-danger .dropdown-toggle { + color: #666; + color: var(--clr-alert-danger-action-color, #666); +} +.alert.alert-danger .alert-action.btn, +.alert.alert-danger .dropdown-toggle.btn { + border-color: #666; + border-color: var(--clr-alert-danger-action-color, #666); +} +.alert.alert-danger .alert-action.btn:active, +.alert.alert-danger .alert-action.btn:focus, +.alert.alert-danger .alert-action.btn:hover, +.alert.alert-danger .dropdown-toggle.btn:active, +.alert.alert-danger .dropdown-toggle.btn:focus, +.alert.alert-danger .dropdown-toggle.btn:hover { + border-color: #4f0070; + border-color: var(--clr-alert-danger-action-active-color, #4f0070); +} +.alert.alert-danger .alert-action.btn:active, +.alert.alert-danger .dropdown-toggle.btn:active { + -webkit-box-shadow: 0 0.05rem 0 0 #4f0070 inset; + box-shadow: 0 0.05rem 0 0 #4f0070 inset; + -webkit-box-shadow: 0 0.05rem 0 0 + var(--clr-alert-danger-action-active-color, #4f0070) inset; + box-shadow: 0 0.05rem 0 0 + var(--clr-alert-danger-action-active-color, #4f0070) inset; +} +.alert.alert-danger .alert-action:active, +.alert.alert-danger .alert-action:focus, +.alert.alert-danger .alert-action:hover, +.alert.alert-danger .dropdown-toggle:active, +.alert.alert-danger .dropdown-toggle:focus, +.alert.alert-danger .dropdown-toggle:hover { + color: #4f0070; + color: var(--clr-alert-danger-action-active-color, #4f0070); + color: #4f0070; +} +.alert.alert-danger .close { + color: #666; + color: var(--clr-alert-danger-close-icon-color, #666); + opacity: 1; + opacity: var(--clr-alert-danger-close-icon-opacity, 1); +} +.alert.alert-danger .close cds-icon { + fill: #666; + fill: var(--clr-alert-danger-close-icon-color, #666); +} +.alert.alert-danger .close:active, +.alert.alert-danger .close:focus, +.alert.alert-danger .close:hover { + color: #4f0070; + color: var(--clr-alert-danger-close-icon-hover-color, #4f0070); + opacity: 1; + opacity: var(--clr-alert-danger-close-icon-hover-opacity, 1); +} +.alert .alert-item .clr-icon { + height: 0.9rem; + width: 0.9rem; + margin-right: 0.3rem; +} +.alert .alert-item .clr-icon + .alert-text { + padding-left: 0; +} +.alert .alert-item .clr-icon + .alert-text::before { + content: none; +} +.alert .alert-actions { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + white-space: nowrap; +} +.alert .alert-actions .dropdown:last-child { + margin-right: -0.1rem; +} +.alert .alert-actions .dropdown-item { + color: #666; + color: var(--clr-dropdown-text-color, #666); + font-size: 0.7rem; + line-height: 1.2rem; + letter-spacing: normal; +} +.alert .alert-action:not(:last-child) { + margin-right: 0.6rem; +} +.alert .alert-action, +.alert .dropdown-toggle { + text-decoration: underline; +} +.alert .alert-action button.dropdown-toggle:not(.btn) { + background: 0 0; + cursor: pointer; + color: #666; + color: var(--clr-dropdown-text-color, #666); +} +.alert .dropdown-toggle:not(.btn) { + display: inline-block; + background: 0 0; + border: none; +} +.alert .close { + width: 1.2rem; + display: block; + height: 1.8rem; + -webkit-box-flex: 0; + -ms-flex: 0 0 1.4rem; + flex: 0 0 1.4rem; + -webkit-box-ordinal-group: 101; + -ms-flex-order: 100; + order: 100; + padding-right: 0.2rem; +} +.alert .close cds-icon { + margin-top: -0.15rem; + height: 1.15rem; + width: 1.15rem; +} +.alert .close ~ .alert-item > .alert-actions { + padding-right: 0.6rem; +} +.alert .close ~ .alert-item > .alert-actions > .alert-action:last-child { + margin-right: 0.6rem; +} +.alert-app-level { + margin: 0; + border: none; + border-radius: 0; + overflow-y: auto; + background: #0072a3; + background: var(--clr-app-alert-info-bg-color, #0072a3); + color: #fff; + color: var(--clr-app-alert-info-font-color, #fff); + border: none; +} +.alert-app-level .alert-icon { + color: #fff; + color: var(--clr-app-alert-info-icon-color, #fff); +} +.alert-app-level .alert-actions .dropdown .dropdown-toggle { + color: #fff; + color: var(--clr-app-alert-info-action-color, #fff); + border-color: #fff; + border-color: var(--clr-app-alert-info-action-color, #fff); +} +.alert-app-level .alert-action, +.alert-app-level .dropdown-toggle { + color: #fff; + color: var(--clr-app-alert-info-action-color, #fff); +} +.alert-app-level .alert-action.btn, +.alert-app-level .dropdown-toggle.btn { + border-color: #fff; + border-color: var(--clr-app-alert-info-action-color, #fff); +} +.alert-app-level .alert-action.btn:active, +.alert-app-level .alert-action.btn:focus, +.alert-app-level .alert-action.btn:hover, +.alert-app-level .dropdown-toggle.btn:active, +.alert-app-level .dropdown-toggle.btn:focus, +.alert-app-level .dropdown-toggle.btn:hover { + border-color: #fff; + border-color: var(--clr-app-alert-info-action-active-color, #fff); +} +.alert-app-level .alert-action.btn:active, +.alert-app-level .dropdown-toggle.btn:active { + -webkit-box-shadow: 0 0.05rem 0 0 #fff inset; + box-shadow: 0 0.05rem 0 0 #fff inset; + -webkit-box-shadow: 0 0.05rem 0 0 + var(--clr-app-alert-info-action-active-color, #fff) inset; + box-shadow: 0 0.05rem 0 0 + var(--clr-app-alert-info-action-active-color, #fff) inset; +} +.alert-app-level .alert-action:active, +.alert-app-level .alert-action:focus, +.alert-app-level .alert-action:hover, +.alert-app-level .dropdown-toggle:active, +.alert-app-level .dropdown-toggle:focus, +.alert-app-level .dropdown-toggle:hover { + color: #fff; + color: var(--clr-app-alert-info-action-active-color, #fff); + color: #fff; +} +.alert-app-level .close { + color: #fff; + color: var(--clr-app-alert-info-close-icon-color, #fff); + opacity: 0.8; + opacity: var(--clr-app-alert-info-close-icon-opacity, 0.8); +} +.alert-app-level .close cds-icon { + fill: #fff; + fill: var(--clr-app-alert-info-close-icon-color, #fff); +} +.alert-app-level .close:active, +.alert-app-level .close:focus, +.alert-app-level .close:hover { + color: #fff; + color: var(--clr-app-alert-info-close-icon-hover-color, #fff); + opacity: 1; + opacity: var(--clr-app-alert-info-close-icon-hover-opacity, 1); +} +.alert-app-level.alert-info { + background: #0072a3; + background: var(--clr-app-alert-info-bg-color, #0072a3); + color: #fff; + color: var(--clr-app-alert-info-font-color, #fff); + border: none; +} +.alert-app-level.alert-info .alert-icon { + color: #fff; + color: var(--clr-app-alert-info-icon-color, #fff); +} +.alert-app-level.alert-info .alert-actions .dropdown .dropdown-toggle { + color: #fff; + color: var(--clr-app-alert-info-action-color, #fff); + border-color: #fff; + border-color: var(--clr-app-alert-info-action-color, #fff); +} +.alert-app-level.alert-info .alert-action, +.alert-app-level.alert-info .dropdown-toggle { + color: #fff; + color: var(--clr-app-alert-info-action-color, #fff); +} +.alert-app-level.alert-info .alert-action.btn, +.alert-app-level.alert-info .dropdown-toggle.btn { + border-color: #fff; + border-color: var(--clr-app-alert-info-action-color, #fff); +} +.alert-app-level.alert-info .alert-action.btn:active, +.alert-app-level.alert-info .alert-action.btn:focus, +.alert-app-level.alert-info .alert-action.btn:hover, +.alert-app-level.alert-info .dropdown-toggle.btn:active, +.alert-app-level.alert-info .dropdown-toggle.btn:focus, +.alert-app-level.alert-info .dropdown-toggle.btn:hover { + border-color: #fff; + border-color: var(--clr-app-alert-info-action-active-color, #fff); +} +.alert-app-level.alert-info .alert-action.btn:active, +.alert-app-level.alert-info .dropdown-toggle.btn:active { + -webkit-box-shadow: 0 0.05rem 0 0 #fff inset; + box-shadow: 0 0.05rem 0 0 #fff inset; + -webkit-box-shadow: 0 0.05rem 0 0 + var(--clr-app-alert-info-action-active-color, #fff) inset; + box-shadow: 0 0.05rem 0 0 + var(--clr-app-alert-info-action-active-color, #fff) inset; +} +.alert-app-level.alert-info .alert-action:active, +.alert-app-level.alert-info .alert-action:focus, +.alert-app-level.alert-info .alert-action:hover, +.alert-app-level.alert-info .dropdown-toggle:active, +.alert-app-level.alert-info .dropdown-toggle:focus, +.alert-app-level.alert-info .dropdown-toggle:hover { + color: #fff; + color: var(--clr-app-alert-info-action-active-color, #fff); + color: #fff; +} +.alert-app-level.alert-info .close { + color: #fff; + color: var(--clr-app-alert-info-close-icon-color, #fff); + opacity: 0.8; + opacity: var(--clr-app-alert-info-close-icon-opacity, 0.8); +} +.alert-app-level.alert-info .close cds-icon { + fill: #fff; + fill: var(--clr-app-alert-info-close-icon-color, #fff); +} +.alert-app-level.alert-info .close:active, +.alert-app-level.alert-info .close:focus, +.alert-app-level.alert-info .close:hover { + color: #fff; + color: var(--clr-app-alert-info-close-icon-hover-color, #fff); + opacity: 1; + opacity: var(--clr-app-alert-info-close-icon-hover-opacity, 1); +} +.alert-app-level.alert-danger { + background: #c21d00; + background: var(--clr-app-alert-danger-bg-color, #c21d00); + color: #fff; + color: var(--clr-app-alert-danger-font-color, #fff); + border: none; +} +.alert-app-level.alert-danger .alert-icon { + color: #fff; + color: var(--clr-app-alert-danger-icon-color, #fff); +} +.alert-app-level.alert-danger .alert-actions .dropdown .dropdown-toggle { + color: #fff; + color: var(--clr-app-alert-danger-action-color, #fff); + border-color: #fff; + border-color: var(--clr-app-alert-danger-action-color, #fff); +} +.alert-app-level.alert-danger .alert-action, +.alert-app-level.alert-danger .dropdown-toggle { + color: #fff; + color: var(--clr-app-alert-danger-action-color, #fff); +} +.alert-app-level.alert-danger .alert-action.btn, +.alert-app-level.alert-danger .dropdown-toggle.btn { + border-color: #fff; + border-color: var(--clr-app-alert-danger-action-color, #fff); +} +.alert-app-level.alert-danger .alert-action.btn:active, +.alert-app-level.alert-danger .alert-action.btn:focus, +.alert-app-level.alert-danger .alert-action.btn:hover, +.alert-app-level.alert-danger .dropdown-toggle.btn:active, +.alert-app-level.alert-danger .dropdown-toggle.btn:focus, +.alert-app-level.alert-danger .dropdown-toggle.btn:hover { + border-color: #fff; + border-color: var(--clr-app-alert-danger-action-active-color, #fff); +} +.alert-app-level.alert-danger .alert-action.btn:active, +.alert-app-level.alert-danger .dropdown-toggle.btn:active { + -webkit-box-shadow: 0 0.05rem 0 0 #fff inset; + box-shadow: 0 0.05rem 0 0 #fff inset; + -webkit-box-shadow: 0 0.05rem 0 0 + var(--clr-app-alert-danger-action-active-color, #fff) inset; + box-shadow: 0 0.05rem 0 0 + var(--clr-app-alert-danger-action-active-color, #fff) inset; +} +.alert-app-level.alert-danger .alert-action:active, +.alert-app-level.alert-danger .alert-action:focus, +.alert-app-level.alert-danger .alert-action:hover, +.alert-app-level.alert-danger .dropdown-toggle:active, +.alert-app-level.alert-danger .dropdown-toggle:focus, +.alert-app-level.alert-danger .dropdown-toggle:hover { + color: #fff; + color: var(--clr-app-alert-danger-action-active-color, #fff); + color: #fff; +} +.alert-app-level.alert-danger .close { + color: #fff; + color: var(--clr-app-alert-danger-close-icon-color, #fff); + opacity: 0.8; + opacity: var(--clr-app-alert-danger-close-icon-opacity, 0.8); +} +.alert-app-level.alert-danger .close cds-icon { + fill: #fff; + fill: var(--clr-app-alert-danger-close-icon-color, #fff); +} +.alert-app-level.alert-danger .close:active, +.alert-app-level.alert-danger .close:focus, +.alert-app-level.alert-danger .close:hover { + color: #fff; + color: var(--clr-app-alert-danger-close-icon-hover-color, #fff); + opacity: 1; + opacity: var(--clr-app-alert-danger-close-icon-hover-opacity, 1); +} +.alert-app-level.alert-warning { + background: #c25400; + background: var(--clr-app-alert-warning-bg-color, #c25400); + color: #fff; + color: var(--clr-app-alert-warning-font-color, #fff); + border: none; +} +.alert-app-level.alert-warning .alert-icon { + color: #fff; + color: var(--clr-app-alert-warning-icon-color, #fff); +} +.alert-app-level.alert-warning .alert-actions .dropdown .dropdown-toggle { + color: #fff; + color: var(--clr-app-alert-warning-action-color, #fff); + border-color: #fff; + border-color: var(--clr-app-alert-warning-action-color, #fff); +} +.alert-app-level.alert-warning .alert-action, +.alert-app-level.alert-warning .dropdown-toggle { + color: #fff; + color: var(--clr-app-alert-warning-action-color, #fff); +} +.alert-app-level.alert-warning .alert-action.btn, +.alert-app-level.alert-warning .dropdown-toggle.btn { + border-color: #fff; + border-color: var(--clr-app-alert-warning-action-color, #fff); +} +.alert-app-level.alert-warning .alert-action.btn:active, +.alert-app-level.alert-warning .alert-action.btn:focus, +.alert-app-level.alert-warning .alert-action.btn:hover, +.alert-app-level.alert-warning .dropdown-toggle.btn:active, +.alert-app-level.alert-warning .dropdown-toggle.btn:focus, +.alert-app-level.alert-warning .dropdown-toggle.btn:hover { + border-color: #fff; + border-color: var(--clr-app-alert-warning-action-active-color, #fff); +} +.alert-app-level.alert-warning .alert-action.btn:active, +.alert-app-level.alert-warning .dropdown-toggle.btn:active { + -webkit-box-shadow: 0 0.05rem 0 0 #fff inset; + box-shadow: 0 0.05rem 0 0 #fff inset; + -webkit-box-shadow: 0 0.05rem 0 0 + var(--clr-app-alert-warning-action-active-color, #fff) inset; + box-shadow: 0 0.05rem 0 0 + var(--clr-app-alert-warning-action-active-color, #fff) inset; +} +.alert-app-level.alert-warning .alert-action:active, +.alert-app-level.alert-warning .alert-action:focus, +.alert-app-level.alert-warning .alert-action:hover, +.alert-app-level.alert-warning .dropdown-toggle:active, +.alert-app-level.alert-warning .dropdown-toggle:focus, +.alert-app-level.alert-warning .dropdown-toggle:hover { + color: #fff; + color: var(--clr-app-alert-warning-action-active-color, #fff); + color: #fff; +} +.alert-app-level.alert-warning .close { + color: #fff; + color: var(--clr-app-alert-warning-close-icon-color, #fff); + opacity: 0.8; + opacity: var(--clr-app-alert-warning-close-icon-opacity, 0.8); +} +.alert-app-level.alert-warning .close cds-icon { + fill: #fff; + fill: var(--clr-app-alert-warning-close-icon-color, #fff); +} +.alert-app-level.alert-warning .close:active, +.alert-app-level.alert-warning .close:focus, +.alert-app-level.alert-warning .close:hover { + color: #fff; + color: var(--clr-app-alert-warning-close-icon-hover-color, #fff); + opacity: 1; + opacity: var(--clr-app-alert-warning-close-icon-hover-opacity, 1); +} +.alert-app-level.alert-success { + background: #3c8500; + background: var(--clr-app-alert-success-bg-color, #3c8500); + color: #fff; + color: var(--clr-app-alert-success-font-color, #fff); + border: none; +} +.alert-app-level.alert-success .alert-icon { + color: #fff; + color: var(--clr-app-alert-success-icon-color, #fff); +} +.alert-app-level.alert-success .alert-actions .dropdown .dropdown-toggle { + color: #fff; + color: var(--clr-app-alert-success-action-color, #fff); + border-color: #fff; + border-color: var(--clr-app-alert-success-action-color, #fff); +} +.alert-app-level.alert-success .alert-action, +.alert-app-level.alert-success .dropdown-toggle { + color: #fff; + color: var(--clr-app-alert-success-action-color, #fff); +} +.alert-app-level.alert-success .alert-action.btn, +.alert-app-level.alert-success .dropdown-toggle.btn { + border-color: #fff; + border-color: var(--clr-app-alert-success-action-color, #fff); +} +.alert-app-level.alert-success .alert-action.btn:active, +.alert-app-level.alert-success .alert-action.btn:focus, +.alert-app-level.alert-success .alert-action.btn:hover, +.alert-app-level.alert-success .dropdown-toggle.btn:active, +.alert-app-level.alert-success .dropdown-toggle.btn:focus, +.alert-app-level.alert-success .dropdown-toggle.btn:hover { + border-color: #fff; + border-color: var(--clr-app-alert-success-action-active-color, #fff); +} +.alert-app-level.alert-success .alert-action.btn:active, +.alert-app-level.alert-success .dropdown-toggle.btn:active { + -webkit-box-shadow: 0 0.05rem 0 0 #fff inset; + box-shadow: 0 0.05rem 0 0 #fff inset; + -webkit-box-shadow: 0 0.05rem 0 0 + var(--clr-app-alert-success-action-active-color, #fff) inset; + box-shadow: 0 0.05rem 0 0 + var(--clr-app-alert-success-action-active-color, #fff) inset; +} +.alert-app-level.alert-success .alert-action:active, +.alert-app-level.alert-success .alert-action:focus, +.alert-app-level.alert-success .alert-action:hover, +.alert-app-level.alert-success .dropdown-toggle:active, +.alert-app-level.alert-success .dropdown-toggle:focus, +.alert-app-level.alert-success .dropdown-toggle:hover { + color: #fff; + color: var(--clr-app-alert-success-action-active-color, #fff); + color: #fff; +} +.alert-app-level.alert-success .close { + color: #fff; + color: var(--clr-app-alert-success-close-icon-color, #fff); + opacity: 0.8; + opacity: var(--clr-app-alert-success-close-icon-opacity, 0.8); +} +.alert-app-level.alert-success .close cds-icon { + fill: #fff; + fill: var(--clr-app-alert-success-close-icon-color, #fff); +} +.alert-app-level.alert-success .close:active, +.alert-app-level.alert-success .close:focus, +.alert-app-level.alert-success .close:hover { + color: #fff; + color: var(--clr-app-alert-success-close-icon-hover-color, #fff); + opacity: 1; + opacity: var(--clr-app-alert-success-close-icon-hover-opacity, 1); +} +.alert-app-level .alert-items { + padding-top: 0.3rem; + padding-bottom: 0.3rem; +} +.alert-app-level .alert-item { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 1.2rem; +} +.alert-app-level .alert-item .btn { + margin: 0; +} +.alert-app-level .alert-item > span, +.alert-app-level .alert-text { + -webkit-box-flex: 0; + -ms-flex: 0 1 100%; + flex: 0 1 100%; +} +.alert-app-level .alert-icon-wrapper { + margin-top: 0.15rem; +} +.alert-app-level .close { + height: 1.8rem; + overflow: hidden; +} +.alert-app-level .close cds-icon { + margin-top: -0.25rem; +} +.alert-app-level .alert-action, +.alert-app-level .dropdown-toggle { + text-decoration: none; +} +.alert-sm { + font-size: 0.55rem; + letter-spacing: normal; + line-height: 0.8rem; +} +.alert-sm .alert-items { + padding: 0.15rem 0.25rem; +} +.alert-sm .alert-item { + padding-top: 0.05rem; + margin-bottom: 0.2rem; +} +.alert-sm .alert-item:last-child { + margin-bottom: 0; +} +.alert-sm .alert-icon-wrapper { + padding-top: 0; + height: 0.8rem; +} +.alert-sm .alert-icon { + margin-left: -0.2rem; + margin-top: -0.2rem; +} +.alert-sm .alert-item > span, +.alert-sm .alert-text { + margin-right: 0.3rem; +} +.alert-sm .close { + padding-right: 0; + -webkit-box-flex: 0; + -ms-flex: 0 0 1.2rem; + flex: 0 0 1.2rem; + height: 1.2rem; + line-height: 1.2rem; +} +.alert-sm .close cds-icon { + margin-top: -0.25rem; + margin-right: -0.05rem; + height: 1rem; + width: 1rem; + line-height: 1.05rem; +} +@media screen and (max-width: 768px) { + .alert .alert-item { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } + .alert .alert-text { + margin-right: 0; + max-width: 90%; + width: 90%; + -ms-flex-preferred-size: 90%; + flex-basis: 90%; + } + .alert .alert-actions { + -webkit-box-flex: 1; + -ms-flex: 1 0 100%; + flex: 1 0 100%; + padding-top: 0.15rem; + padding-left: 1.2rem; + } + .alerts-pager { + margin-top: 0.15rem; + } + .alert-app-level .alert-actions { + margin-left: 2.25rem; + } +} +.alert-hidden { + display: none; +} +.card .alert { + margin: 0.3rem 0; +} +.modal .alert + .modal-header, +.modal .alert + .modal-header--accessible { + margin-top: 0.6rem; +} +.alerts.alert-info { + background: #00567a; + background: var(--clr-app-alert-info-pager-bg-color, #00567a); +} +.alerts.alert-danger { + background: #991700; + background: var(--clr-app-alert-danger-pager-bg-color, #991700); +} +.alerts.alert-warning { + background: #8f5a00; + background: var(--clr-app-alert-warning-pager-bg-color, #8f5a00); +} +.alerts.alert-success { + background: #255200; + background: var(--clr-color-success-900, #255200); +} +.alerts-pager { + color: #fff; + color: var(--clr-app-alert-pager-text-color, #fff); + font-size: 0.65rem; + letter-spacing: normal; + float: left; + min-height: 1.8rem; + text-align: center; + width: 7.2rem; +} +.alerts-pager-button { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + background: 0 0; + color: #fff; + color: var(--clr-app-alert-pager-text-color, #fff); + cursor: pointer; +} +button.alerts-pager-button { + cursor: pointer; +} +.alerts-pager-button cds-icon { + color: #fff; + color: var(--clr-app-alert-pager-text-color, #fff); +} +.alerts-pager-control { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin-top: 0.3rem; + white-space: nowrap; +} +.alerts-page-down { + margin-left: 1.2rem; + width: 33.33%; +} +.alerts-page-up { + margin-right: 1.2rem; + width: 33.33%; +} +.alerts-pager-text { + width: 33.33%; +} +:root { + --clr-card-bg-color: var(--clr-color-neutral-0); + --clr-card-divider-color: var(--clr-color-neutral-300); + --clr-card-title-color: var(--clr-h4-color); + --clr-card-title-font-weight: var(--clr-h4-font-weight); + --clr-card-border-width: var(--clr-global-borderwidth); + --clr-card-border-radius: var(--clr-global-borderradius); + --clr-card-border-color: var(--clr-color-neutral-300); + --clr-card-box-shadow-color: var(--clr-card-border-color); + --clr-card-clickable-border-color: var(--clr-color-action-500); + --clr-card-clickable-box-shadow-color: var( + --clr-card-clickable-border-color + ); +} +.card { + -webkit-box-shadow: 0 0.15rem 0 0 #dedede; + box-shadow: 0 0.15rem 0 0 #dedede; + -webkit-box-shadow: 0 0.15rem 0 0 var(--clr-card-box-shadow-color); + box-shadow: 0 0.15rem 0 0 var(--clr-card-box-shadow-color); + border-radius: 0.15rem; + border-radius: var(--clr-card-border-radius, 0.15rem); + border-width: 0.05rem; + border-width: var(--clr-card-border-width, 0.05rem); + border-style: solid; + border-color: #dedede; + border-color: var(--clr-card-border-color, #dedede); +} +.card.clickable:hover { + -webkit-box-shadow: 0 0.15rem 0 0 #179bd3; + box-shadow: 0 0.15rem 0 0 #179bd3; + -webkit-box-shadow: 0 0.15rem 0 0 var(--clr-card-clickable-box-shadow-color); + box-shadow: 0 0.15rem 0 0 var(--clr-card-clickable-box-shadow-color); + border-width: 0.05rem; + border-width: var(--clr-card-border-width, 0.05rem); + border-style: solid; + border-color: #179bd3; + border-color: var(--clr-card-clickable-border-color, #179bd3); + cursor: pointer; + text-decoration: none; + -webkit-transform: translateY(-0.1rem); + transform: translateY(-0.1rem); + -webkit-transition: border 0.2s ease, -webkit-transform 0.2s ease; + transition: border 0.2s ease, -webkit-transform 0.2s ease; + transition: border 0.2s ease, transform 0.2s ease; + transition: border 0.2s ease, transform 0.2s ease, + -webkit-transform 0.2s ease; +} +.card .card-media-block, +.card .card-text, +.card .card-title, +.card .list, +.card .list-unstyled, +.card-block .card-divider { + margin-top: 0; + margin-bottom: 0.6rem; +} +.card .card-media-block:last-child, +.card .card-text:last-child, +.card .card-title:last-child, +.card .list-unstyled:last-child, +.card .list:last-child, +.card-block .card-divider:last-child { + margin-bottom: 0; +} +.card-img > img, +.card.card-img > img, +.card > .card-img:first-child:last-child > img { + display: block; + height: auto; + width: 100%; + max-width: 100%; +} +.card { + position: relative; + display: block; + background-color: #fff; + background-color: var(--clr-card-bg-color, #fff); + width: 100%; + margin-top: 1.2rem; +} +.card .btn-link { + min-width: 0; + padding: 0; +} +.card.clickable { + color: inherit; +} +.card > .list, +.card > .list-unstyled { + padding: 0.6rem 0.9rem; +} +.card .list-group { + padding-left: 0; + margin-bottom: 0; + list-style: none; +} +.card .list-group-item { + padding: 0.6rem 0.9rem; + font-size: 0.7rem; + background-color: #fff; + background-color: var(--clr-card-bg-color, #fff); + border-bottom-width: 0.05rem; + border-bottom-width: var(--clr-card-border-width, 0.05rem); + border-bottom-style: solid; + border-bottom-color: #dedede; + border-bottom-color: var(--clr-card-border-color, #dedede); +} +@supports (-ms-ime-align: auto) { + .card .dropdown > .dropdown-toggle::after { + display: inline-block; + margin-top: -0.6rem; + } +} +.card-block, +.card-footer, +.card-header { + padding: 0.6rem 0.9rem; +} +.card-header, +.card-title { + color: #000; + color: var(--clr-card-title-color, #000); + font-weight: 200; + font-weight: var(--clr-card-title-font-weight, 200); + font-size: 0.9rem; + letter-spacing: normal; +} +.card-text { + font-size: 0.7rem; +} +.card-img:first-child > img { + border-radius: 0; + border-top-left-radius: 0.15rem; + border-top-left-radius: var(--clr-card-border-radius, 0.15rem); + border-top-right-radius: 0.15rem; + border-top-right-radius: var(--clr-card-border-radius, 0.15rem); +} +.card-img:last-child > img { + border-radius: 0; + border-bottom-left-radius: 0.15rem; + border-bottom-left-radius: var(--clr-card-border-radius, 0.15rem); + border-bottom-right-radius: 0.15rem; + border-bottom-right-radius: var(--clr-card-border-radius, 0.15rem); +} +.card.card-img > img, +.card > .card-img:first-child:last-child > img { + border-radius: 0.15rem; + border-radius: var(--clr-card-border-radius, 0.15rem); +} +.card-block .btn, +.card-block .btn.btn-link, +.card-block .card-link, +.card-footer .btn, +.card-footer .btn.btn-link, +.card-footer .card-link { + margin: 0 0.6rem 0 0; +} +.card-block .btn-group .btn, +.card-footer .btn-group .btn { + margin: 0; +} +.card-block, +.card-header { + border-bottom-width: 0.05rem; + border-bottom-width: var(--clr-card-border-width, 0.05rem); + border-bottom-style: solid; + border-bottom-color: #dedede; + border-bottom-color: var(--clr-card-border-color, #dedede); +} +.card-block:last-child, +.card-header:last-child { + border-bottom: none; +} +.card-divider { + display: block; + border-bottom-width: 0.05rem; + border-bottom-width: var(--clr-card-border-width, 0.05rem); + border-bottom-style: solid; + border-bottom-color: #dedede; + border-bottom-color: var(--clr-card-divider-color, #dedede); +} +.card-block .card-divider { + margin-left: -0.9rem; + margin-right: -0.9rem; + width: auto; +} +.card-block + .card-divider, +.card-header + .card-divider { + display: none; +} +.card-media-block { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.card-media-block .card-media-image { + display: inline-block; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + height: 3rem; + width: 3rem; + max-height: 3rem; + max-width: 3rem; +} +.card-media-block .card-media-description { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + margin: 0 0 0 0.6rem; +} +.card-media-block .card-media-title { + display: inline-block; +} +.card-media-block .card-media-text, +.card-media-block span { + display: inline-block; +} +.card-media-block.wrap { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +.card-media-block.wrap .card-media-description { + margin: 0.3rem 0 0 0; +} +.card-block > .list, +.card-block > .list-unstyled { + padding: 0; +} +@media screen and (min-width: 576px) { + .card-columns { + -webkit-column-count: 3; + -moz-column-count: 3; + column-count: 3; + -webkit-column-gap: 0.6rem; + -moz-column-gap: 0.6rem; + column-gap: 0.6rem; + -webkit-column-break-inside: avoid; + -moz-column-break-inside: avoid; + break-inside: avoid; + -webkit-column-fill: balance; + -moz-column-fill: balance; + column-fill: balance; + -webkit-perspective: 1; + } + .card-columns.card-columns-2 { + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; + } + .card-columns.card-columns-4 { + -webkit-column-count: 4; + -moz-column-count: 4; + column-count: 4; + } + .card-columns .card { + display: inline-block; + margin: 0.3rem; + } + .card-columns .clickable { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + } +} +@supports (-ms-ime-align: auto) { + .card .checkbox-inline.btn label, + .card .checkbox.btn label, + .card .radio-inline.btn label, + .card .radio.btn label { + display: inline-block; + } +} +:root { + --clr-dropdown-active-text-color: var(--clr-color-neutral-1000); + --clr-dropdown-bg-color: var(--clr-color-neutral-0); + --clr-dropdown-border-color: var(--clr-color-neutral-400); + --clr-dropdown-divider-color: var(--clr-color-neutral-200); + --clr-dropdown-divider-border-width: var(--clr-global-borderwidth); + --clr-dropdown-child-border-color: var(--clr-color-neutral-500); + --clr-dropdown-bg-hover-color: var(--clr-global-hover-color); + --clr-dropdown-selection-color: var(--clr-global-selection-color); + --clr-dropdown-box-shadow: var(--clr-popover-box-shadow-color); + --clr-dropdown-text-color: var(--clr-p1-color); + --clr-dropdown-header-color: var(--clr-color-neutral-900); + --clr-dropdown-header-font-weight: 600; + --clr-dropdown-item-color: var(--clr-color-neutral-700); + --clr-dropdown-item-font-weight: var(--clr-p1-font-weight); +} +.dropdown-menu .btn, +.dropdown-menu .btn-danger, +.dropdown-menu .btn-info, +.dropdown-menu .btn-link, +.dropdown-menu .btn-outline, +.dropdown-menu .btn-outline-danger, +.dropdown-menu .btn-outline-primary, +.dropdown-menu .btn-outline-secondary, +.dropdown-menu .btn-outline-success, +.dropdown-menu .btn-outline-warning, +.dropdown-menu .btn-primary, +.dropdown-menu .btn-secondary, +.dropdown-menu .btn-success, +.dropdown-menu .btn-warning, +.dropdown-menu .dropdown-header, +.dropdown-menu .dropdown-item { + overflow: hidden; + text-overflow: ellipsis; + text-align: left; +} +.dropdown { + position: relative; + display: inline-block; +} +.dropdown .dropdown-toggle { + display: inline-block; + position: relative; + margin: 0; + white-space: nowrap; + cursor: pointer; +} +.dropdown .dropdown-toggle > * { + margin: 0; +} +.dropdown .dropdown-toggle cds-icon[shape^="angle"] { + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + color: inherit; + height: 0.5rem; + width: 0.5rem; +} +.dropdown .dropdown-toggle.btn { + padding-right: 1.2rem; +} +.dropdown .dropdown-toggle.btn cds-icon[shape^="angle"] { + right: 0.6rem; +} +.dropdown .dropdown-toggle:not(.btn) { + padding: 0 0.6rem 0 0; + color: #000; + color: var(--clr-dropdown-active-text-color, #000); +} +.dropdown .dropdown-toggle:not(.btn) cds-icon[shape^="angle"] { + right: 0; +} +.dropdown button.dropdown-toggle:not(.btn) { + background: 0 0; + border: none; + cursor: pointer; + color: #000; + color: var(--clr-dropdown-active-text-color, #000); +} +.dropdown-menu > * { + display: block; + white-space: nowrap; +} +.dropdown-menu { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + position: absolute; + top: 100%; + left: 0; + min-width: 6rem; + max-width: 18rem; + background: #fff; + background: var(--clr-dropdown-bg-color, #fff); + border-width: 0.05rem; + border-width: var(--clr-global-borderwidth, 0.05rem); + border-style: solid; + border-color: #ccc; + border-color: var(--clr-dropdown-border-color, #ccc); + border-radius: 0.15rem; + border-radius: var(--clr-global-borderradius, 0.15rem); + -webkit-box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + -webkit-box-shadow: 0 0.05rem 0.15rem + var(--clr-dropdown-box-shadow, rgba(140, 140, 140, 0.25)); + box-shadow: 0 0.05rem 0.15rem + var(--clr-dropdown-box-shadow, rgba(140, 140, 140, 0.25)); + margin-top: 0.1rem; + padding: 0.6rem 0; + visibility: hidden; + z-index: 1060; +} +.dropdown-menu .dropdown-header { + color: #333; + color: var(--clr-dropdown-header-color, #333); + font-size: 0.6rem; + font-weight: 600; + font-weight: var(--clr-dropdown-header-font-weight, 600); + letter-spacing: normal; + padding: 0 0.6rem; + line-height: 0.9rem; + margin: 0; +} +.dropdown-menu .btn, +.dropdown-menu .btn-danger, +.dropdown-menu .btn-info, +.dropdown-menu .btn-link, +.dropdown-menu .btn-outline, +.dropdown-menu .btn-outline-danger, +.dropdown-menu .btn-outline-primary, +.dropdown-menu .btn-outline-secondary, +.dropdown-menu .btn-outline-success, +.dropdown-menu .btn-outline-warning, +.dropdown-menu .btn-primary, +.dropdown-menu .btn-secondary, +.dropdown-menu .btn-success, +.dropdown-menu .btn-warning, +.dropdown-menu .dropdown-item { + color: #666; + color: var(--clr-dropdown-item-color, #666); + font-size: 0.7rem; + font-weight: 400; + font-weight: var(--clr-dropdown-item-font-weight, 400); + letter-spacing: normal; + background: 0 0; + border: 0; + cursor: pointer; + display: block; + height: auto; + line-height: inherit; + margin: 0; + width: 100%; + text-transform: none; +} +.dropdown-menu .btn-danger:hover, +.dropdown-menu .btn-info:hover, +.dropdown-menu .btn-link:hover, +.dropdown-menu .btn-outline-danger:hover, +.dropdown-menu .btn-outline-primary:hover, +.dropdown-menu .btn-outline-secondary:hover, +.dropdown-menu .btn-outline-success:hover, +.dropdown-menu .btn-outline-warning:hover, +.dropdown-menu .btn-outline:hover, +.dropdown-menu .btn-primary:hover, +.dropdown-menu .btn-secondary:hover, +.dropdown-menu .btn-success:hover, +.dropdown-menu .btn-warning:hover, +.dropdown-menu .btn:hover, +.dropdown-menu .dropdown-item:hover { + background-color: #e8e8e8; + background-color: var(--clr-dropdown-bg-hover-color, #e8e8e8); + color: #666; + color: var(--clr-dropdown-item-color, #666); + text-decoration: none; +} +.dropdown-menu .btn-danger.active, +.dropdown-menu .btn-info.active, +.dropdown-menu .btn-link.active, +.dropdown-menu .btn-outline-danger.active, +.dropdown-menu .btn-outline-primary.active, +.dropdown-menu .btn-outline-secondary.active, +.dropdown-menu .btn-outline-success.active, +.dropdown-menu .btn-outline-warning.active, +.dropdown-menu .btn-outline.active, +.dropdown-menu .btn-primary.active, +.dropdown-menu .btn-secondary.active, +.dropdown-menu .btn-success.active, +.dropdown-menu .btn-warning.active, +.dropdown-menu .btn.active, +.dropdown-menu .dropdown-item.active { + background: #d8e3e9; + background: var(--clr-dropdown-selection-color, #d8e3e9); + color: #000; + color: var(--clr-dropdown-active-text-color, #000); +} +.dropdown-menu .btn-danger:active, +.dropdown-menu .btn-info:active, +.dropdown-menu .btn-link:active, +.dropdown-menu .btn-outline-danger:active, +.dropdown-menu .btn-outline-primary:active, +.dropdown-menu .btn-outline-secondary:active, +.dropdown-menu .btn-outline-success:active, +.dropdown-menu .btn-outline-warning:active, +.dropdown-menu .btn-outline:active, +.dropdown-menu .btn-primary:active, +.dropdown-menu .btn-secondary:active, +.dropdown-menu .btn-success:active, +.dropdown-menu .btn-warning:active, +.dropdown-menu .btn:active, +.dropdown-menu .dropdown-item:active { + -webkit-box-shadow: none; + box-shadow: none; +} +.dropdown-menu .btn-danger:focus, +.dropdown-menu .btn-info:focus, +.dropdown-menu .btn-link:focus, +.dropdown-menu .btn-outline-danger:focus, +.dropdown-menu .btn-outline-primary:focus, +.dropdown-menu .btn-outline-secondary:focus, +.dropdown-menu .btn-outline-success:focus, +.dropdown-menu .btn-outline-warning:focus, +.dropdown-menu .btn-outline:focus, +.dropdown-menu .btn-primary:focus, +.dropdown-menu .btn-secondary:focus, +.dropdown-menu .btn-success:focus, +.dropdown-menu .btn-warning:focus, +.dropdown-menu .btn:focus, +.dropdown-menu .dropdown-item:focus { + z-index: inherit; +} +.dropdown-menu .btn-danger.disabled, +.dropdown-menu .btn-danger:disabled, +.dropdown-menu .btn-info.disabled, +.dropdown-menu .btn-info:disabled, +.dropdown-menu .btn-link.disabled, +.dropdown-menu .btn-link:disabled, +.dropdown-menu .btn-outline-danger.disabled, +.dropdown-menu .btn-outline-danger:disabled, +.dropdown-menu .btn-outline-primary.disabled, +.dropdown-menu .btn-outline-primary:disabled, +.dropdown-menu .btn-outline-secondary.disabled, +.dropdown-menu .btn-outline-secondary:disabled, +.dropdown-menu .btn-outline-success.disabled, +.dropdown-menu .btn-outline-success:disabled, +.dropdown-menu .btn-outline-warning.disabled, +.dropdown-menu .btn-outline-warning:disabled, +.dropdown-menu .btn-outline.disabled, +.dropdown-menu .btn-outline:disabled, +.dropdown-menu .btn-primary.disabled, +.dropdown-menu .btn-primary:disabled, +.dropdown-menu .btn-secondary.disabled, +.dropdown-menu .btn-secondary:disabled, +.dropdown-menu .btn-success.disabled, +.dropdown-menu .btn-success:disabled, +.dropdown-menu .btn-warning.disabled, +.dropdown-menu .btn-warning:disabled, +.dropdown-menu .btn.disabled, +.dropdown-menu .btn:disabled, +.dropdown-menu .dropdown-item.disabled, +.dropdown-menu .dropdown-item:disabled { + cursor: not-allowed; + opacity: 0.4; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.dropdown-menu .btn-danger.disabled:hover, +.dropdown-menu .btn-danger:disabled:hover, +.dropdown-menu .btn-info.disabled:hover, +.dropdown-menu .btn-info:disabled:hover, +.dropdown-menu .btn-link.disabled:hover, +.dropdown-menu .btn-link:disabled:hover, +.dropdown-menu .btn-outline-danger.disabled:hover, +.dropdown-menu .btn-outline-danger:disabled:hover, +.dropdown-menu .btn-outline-primary.disabled:hover, +.dropdown-menu .btn-outline-primary:disabled:hover, +.dropdown-menu .btn-outline-secondary.disabled:hover, +.dropdown-menu .btn-outline-secondary:disabled:hover, +.dropdown-menu .btn-outline-success.disabled:hover, +.dropdown-menu .btn-outline-success:disabled:hover, +.dropdown-menu .btn-outline-warning.disabled:hover, +.dropdown-menu .btn-outline-warning:disabled:hover, +.dropdown-menu .btn-outline.disabled:hover, +.dropdown-menu .btn-outline:disabled:hover, +.dropdown-menu .btn-primary.disabled:hover, +.dropdown-menu .btn-primary:disabled:hover, +.dropdown-menu .btn-secondary.disabled:hover, +.dropdown-menu .btn-secondary:disabled:hover, +.dropdown-menu .btn-success.disabled:hover, +.dropdown-menu .btn-success:disabled:hover, +.dropdown-menu .btn-warning.disabled:hover, +.dropdown-menu .btn-warning:disabled:hover, +.dropdown-menu .btn.disabled:hover, +.dropdown-menu .btn:disabled:hover, +.dropdown-menu .dropdown-item.disabled:hover, +.dropdown-menu .dropdown-item:disabled:hover { + background: 0 0; +} +.dropdown-menu .btn-danger.disabled:active, +.dropdown-menu .btn-danger:disabled:active, +.dropdown-menu .btn-info.disabled:active, +.dropdown-menu .btn-info:disabled:active, +.dropdown-menu .btn-link.disabled:active, +.dropdown-menu .btn-link:disabled:active, +.dropdown-menu .btn-outline-danger.disabled:active, +.dropdown-menu .btn-outline-danger:disabled:active, +.dropdown-menu .btn-outline-primary.disabled:active, +.dropdown-menu .btn-outline-primary:disabled:active, +.dropdown-menu .btn-outline-secondary.disabled:active, +.dropdown-menu .btn-outline-secondary:disabled:active, +.dropdown-menu .btn-outline-success.disabled:active, +.dropdown-menu .btn-outline-success:disabled:active, +.dropdown-menu .btn-outline-warning.disabled:active, +.dropdown-menu .btn-outline-warning:disabled:active, +.dropdown-menu .btn-outline.disabled:active, +.dropdown-menu .btn-outline:disabled:active, +.dropdown-menu .btn-primary.disabled:active, +.dropdown-menu .btn-primary:disabled:active, +.dropdown-menu .btn-secondary.disabled:active, +.dropdown-menu .btn-secondary:disabled:active, +.dropdown-menu .btn-success.disabled:active, +.dropdown-menu .btn-success:disabled:active, +.dropdown-menu .btn-warning.disabled:active, +.dropdown-menu .btn-warning:disabled:active, +.dropdown-menu .btn.disabled:active, +.dropdown-menu .btn:disabled:active, +.dropdown-menu .dropdown-item.disabled:active, +.dropdown-menu .dropdown-item:disabled:active { + background: 0 0; + -webkit-box-shadow: none; + box-shadow: none; +} +.dropdown-menu .btn-danger.expandable, +.dropdown-menu .btn-info.expandable, +.dropdown-menu .btn-link.expandable, +.dropdown-menu .btn-outline-danger.expandable, +.dropdown-menu .btn-outline-primary.expandable, +.dropdown-menu .btn-outline-secondary.expandable, +.dropdown-menu .btn-outline-success.expandable, +.dropdown-menu .btn-outline-warning.expandable, +.dropdown-menu .btn-outline.expandable, +.dropdown-menu .btn-primary.expandable, +.dropdown-menu .btn-secondary.expandable, +.dropdown-menu .btn-success.expandable, +.dropdown-menu .btn-warning.expandable, +.dropdown-menu .btn.expandable, +.dropdown-menu .dropdown-item.expandable { + margin-right: 1.2rem; + padding-right: 0.6rem; +} +.dropdown-menu .btn-danger.expandable:before, +.dropdown-menu .btn-info.expandable:before, +.dropdown-menu .btn-link.expandable:before, +.dropdown-menu .btn-outline-danger.expandable:before, +.dropdown-menu .btn-outline-primary.expandable:before, +.dropdown-menu .btn-outline-secondary.expandable:before, +.dropdown-menu .btn-outline-success.expandable:before, +.dropdown-menu .btn-outline-warning.expandable:before, +.dropdown-menu .btn-outline.expandable:before, +.dropdown-menu .btn-primary.expandable:before, +.dropdown-menu .btn-secondary.expandable:before, +.dropdown-menu .btn-success.expandable:before, +.dropdown-menu .btn-warning.expandable:before, +.dropdown-menu .btn.expandable:before, +.dropdown-menu .dropdown-item.expandable:before { + content: ""; + float: right; + height: 0.6rem; + width: 0.6rem; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%3E.cls-1%7Bfill%3A%239a9a9a%3B%7D%3C%2Fstyle%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M6%2C9L1.2%2C4.2a0.68%2C0.68%2C0%2C0%2C1%2C1-1L6%2C7.08%2C9.84%2C3.24a0.68%2C0.68%2C0%2C1%2C1%2C1%2C1Z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); + background-repeat: no-repeat; + background-size: contain; + vertical-align: middle; + margin-top: 0.3rem; +} +.dropdown-menu .btn, +.dropdown-menu .dropdown-item { + padding: 0.15rem 1.2rem; +} +@media screen and (max-width: 576px) { + .dropdown-menu .btn, + .dropdown-menu .dropdown-item { + padding: 0.3rem 1.2rem; + } +} +.dropdown-menu .dropdown-divider { + font-size: 0.6rem; + border-bottom-width: 0.05rem; + border-bottom-width: var(--clr-dropdown-divider-border-width, 0.05rem); + border-bottom-style: solid; + border-bottom-color: #e8e8e8; + border-bottom-color: var(--clr-dropdown-divider-color, #e8e8e8); + margin: 0.3rem 0; +} +.btn-group-overflow.open > .dropdown-menu, +.btn-group-overflow.open > .dropdown-menu-wrapper > .dropdown-menu, +.dropdown.open > .dropdown-menu, +.dropdown.open > .dropdown-menu-wrapper > .dropdown-menu, +.tabs-overflow.open > .dropdown-menu, +.tabs-overflow.open > .dropdown-menu-wrapper > .dropdown-menu { + visibility: visible; +} +.btn-group-overflow.bottom-left > .dropdown-menu, +.btn-group-overflow.bottom-right > .dropdown-menu, +.dropdown.bottom-left > .dropdown-menu, +.dropdown.bottom-right > .dropdown-menu, +.tabs-overflow.bottom-left > .dropdown-menu, +.tabs-overflow.bottom-right > .dropdown-menu { + top: 100%; + bottom: auto; + margin: 0.1rem 0 0 0; +} +.btn-group-overflow.bottom-left > .dropdown-menu, +.dropdown.bottom-left > .dropdown-menu, +.tabs-overflow.bottom-left > .dropdown-menu { + left: 0; + right: auto; +} +.btn-group-overflow.bottom-right > .dropdown-menu, +.dropdown.bottom-right > .dropdown-menu, +.tabs-overflow.bottom-right > .dropdown-menu { + right: 0; + left: auto; +} +.btn-group-overflow.top-left > .dropdown-menu, +.btn-group-overflow.top-right > .dropdown-menu, +.dropdown.top-left > .dropdown-menu, +.dropdown.top-right > .dropdown-menu, +.tabs-overflow.top-left > .dropdown-menu, +.tabs-overflow.top-right > .dropdown-menu { + top: auto; + bottom: 100%; + margin: 0 0 0.1rem 0; +} +.btn-group-overflow.top-left > .dropdown-menu, +.dropdown.top-left > .dropdown-menu, +.tabs-overflow.top-left > .dropdown-menu { + left: 0; + right: auto; +} +.btn-group-overflow.top-right > .dropdown-menu, +.dropdown.top-right > .dropdown-menu, +.tabs-overflow.top-right > .dropdown-menu { + right: 0; + left: auto; +} +.btn-group-overflow.left-bottom > .dropdown-menu, +.btn-group-overflow.left-top > .dropdown-menu, +.dropdown.left-bottom > .dropdown-menu, +.dropdown.left-top > .dropdown-menu, +.tabs-overflow.left-bottom > .dropdown-menu, +.tabs-overflow.left-top > .dropdown-menu { + right: 100%; + left: auto; + margin: 0 0.1rem 0 0; +} +.btn-group-overflow.left-bottom > .dropdown-menu, +.dropdown.left-bottom > .dropdown-menu, +.tabs-overflow.left-bottom > .dropdown-menu { + top: 0; + bottom: auto; +} +.btn-group-overflow.left-top > .dropdown-menu, +.dropdown.left-top > .dropdown-menu, +.tabs-overflow.left-top > .dropdown-menu { + bottom: 0; + top: auto; +} +.btn-group-overflow.right-bottom > .dropdown-menu, +.btn-group-overflow.right-top > .dropdown-menu, +.dropdown.right-bottom > .dropdown-menu, +.dropdown.right-top > .dropdown-menu, +.tabs-overflow.right-bottom > .dropdown-menu, +.tabs-overflow.right-top > .dropdown-menu { + left: 100%; + right: auto; + margin: 0 0 0 0.1rem; +} +.btn-group-overflow.right-bottom > .dropdown-menu, +.dropdown.right-bottom > .dropdown-menu, +.tabs-overflow.right-bottom > .dropdown-menu { + top: 0; + bottom: auto; +} +.btn-group-overflow.right-top > .dropdown-menu, +.dropdown.right-top > .dropdown-menu, +.tabs-overflow.right-top > .dropdown-menu { + bottom: 0; + top: auto; +} +.btn-group-overflow .dropdown .dropdown-menu, +.dropdown .dropdown .dropdown-menu, +.tabs-overflow .dropdown .dropdown-menu { + border-color: #b3b3b3; + border-color: var(--clr-dropdown-child-border-color, #b3b3b3); + position: absolute; +} +.btn-group-overflow .dropdown.left-top > .dropdown-menu, +.btn-group-overflow + .dropdown.left-top + > .dropdown-menu-wrapper + > .dropdown-menu, +.dropdown .dropdown.left-top > .dropdown-menu, +.dropdown .dropdown.left-top > .dropdown-menu-wrapper > .dropdown-menu, +.tabs-overflow .dropdown.left-top > .dropdown-menu, +.tabs-overflow .dropdown.left-top > .dropdown-menu-wrapper > .dropdown-menu { + top: 0; + bottom: auto; + left: auto; + right: 100%; + margin-top: -0.95rem; + margin-right: -0.2rem; +} +.btn-group-overflow .dropdown.right-top > .dropdown-menu, +.btn-group-overflow + .dropdown.right-top + > .dropdown-menu-wrapper + > .dropdown-menu, +.dropdown .dropdown.right-top > .dropdown-menu, +.dropdown .dropdown.right-top > .dropdown-menu-wrapper > .dropdown-menu, +.tabs-overflow .dropdown.right-top > .dropdown-menu, +.tabs-overflow .dropdown.right-top > .dropdown-menu-wrapper > .dropdown-menu { + top: 0; + bottom: auto; + left: 100%; + right: auto; + margin-top: -0.95rem; + margin-left: -0.2rem; +} +.btn-group-overflow .dropdown.left-bottom > .dropdown-menu, +.btn-group-overflow + .dropdown.left-bottom + > .dropdown-menu-wrapper + > .dropdown-menu, +.dropdown .dropdown.left-bottom > .dropdown-menu, +.dropdown .dropdown.left-bottom > .dropdown-menu-wrapper > .dropdown-menu, +.tabs-overflow .dropdown.left-bottom > .dropdown-menu, +.tabs-overflow .dropdown.left-bottom > .dropdown-menu-wrapper > .dropdown-menu { + top: auto; + bottom: 0; + left: auto; + right: 100%; + margin-bottom: -0.95rem; + margin-right: -0.2rem; +} +.btn-group-overflow .dropdown.right-bottom > .dropdown-menu, +.btn-group-overflow + .dropdown.right-bottom + > .dropdown-menu-wrapper + > .dropdown-menu, +.dropdown .dropdown.right-bottom > .dropdown-menu, +.dropdown .dropdown.right-bottom > .dropdown-menu-wrapper > .dropdown-menu, +.tabs-overflow .dropdown.right-bottom > .dropdown-menu, +.tabs-overflow + .dropdown.right-bottom + > .dropdown-menu-wrapper + > .dropdown-menu { + top: auto; + bottom: 0; + left: 100%; + right: auto; + margin-bottom: -0.95rem; + margin-left: -0.2rem; +} +:root { + --clr-badge-background-color: var(--clr-color-neutral-600); + --clr-badge-color: var(--clr-color-on-neutral-600); + --clr-badge-info-bg-color: var(--clr-color-action-800); + --clr-badge-info-color: var(--clr-color-neutral-0); + --clr-badge-success-bg-color: var(--clr-color-success-800); + --clr-badge-success-color: var(--clr-color-neutral-0); + --clr-badge-warning-bg-color: var(--clr-color-warning-1000); + --clr-badge-warning-color: var(--clr-color-neutral-0); + --clr-badge-danger-bg-color: var(--clr-color-danger-900); + --clr-badge-danger-color: var(--clr-color-neutral-0); + --clr-badge-gray-bg-color: var(--clr-color-neutral-600); + --clr-badge-gray-color: var(--clr-badge-font-color-light); + --clr-badge-purple-bg-color: var(--clr-color-secondary-action-500); + --clr-badge-purple-color: var(--clr-badge-font-color-light); + --clr-badge-blue-bg-color: var(--clr-color-action-800); + --clr-badge-blue-color: var(--clr-badge-font-color-light); + --clr-badge-orange-bg-color: var(--clr-color-warning-1000); + --clr-badge-orange-color: var(--clr-color-neutral-0); + --clr-badge-light-blue-bg-color: var(--clr-color-action-500); + --clr-badge-light-blue-color: var(--clr-color-neutral-0); +} +.badge { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + vertical-align: middle; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + min-width: 0.75rem; + background: #8c8c8c; + height: 0.75rem; + line-height: normal; + border-radius: 0.5rem; + font-size: 0.5rem; + padding: 0 0.2rem; + margin-right: 0.3rem; + white-space: nowrap; + text-align: center; + color: #fff; + color: var(--clr-badge-font-color-light, #fff); +} +.badge:visited { + color: #fff; + color: var(--clr-badge-font-color-light, #fff); +} +.badge.badge-1, +.badge.badge-gray { + background: #8c8c8c; + background: var(--clr-badge-gray-bg-color, #8c8c8c); + color: #fff; + color: var(--clr-badge-gray-color, #fff); +} +.badge.badge-2, +.badge.badge-purple { + background: #9e57bc; + background: var(--clr-badge-purple-bg-color, #9e57bc); + color: #fff; + color: var(--clr-badge-purple-color, #fff); +} +.badge.badge-3, +.badge.badge-blue { + background: #00567a; + background: var(--clr-badge-blue-bg-color, #00567a); + color: #fff; + color: var(--clr-badge-blue-color, #fff); +} +.badge.badge-4, +.badge.badge-orange { + background: #613200; + background: var(--clr-badge-orange-bg-color, #613200); + color: #fff; + color: var(--clr-badge-orange-color, #fff); +} +.badge.badge-5, +.badge.badge-light-blue { + background: #179bd3; + background: var(--clr-badge-light-blue-bg-color, #179bd3); + color: #fff; + color: var(--clr-badge-light-blue-color, #fff); +} +.badge.badge-info { + background: #00567a; + background: var(--clr-badge-info-bg-color, #00567a); + color: #fff; + color: var(--clr-badge-info-color, #fff); +} +.badge.badge-success { + background: #306b00; + background: var(--clr-badge-success-bg-color, #306b00); + color: #fff; + color: var(--clr-badge-success-color, #fff); +} +.badge.badge-danger { + background: #991700; + background: var(--clr-badge-danger-bg-color, #991700); + color: #fff; + color: var(--clr-badge-danger-color, #fff); +} +.badge.badge-warning { + background: #613200; + background: var(--clr-badge-warning-bg-color, #613200); + color: #fff; + color: var(--clr-badge-warning-color, #fff); +} +_:-ms-input-placeholder .badge, +:root .badge { + padding: 0.1rem 0.15rem 0; +} +@supports (-ms-ime-align: auto) { + .badge { + padding: 0.1rem 0.15rem 0; + } +} +:root { + --clr-label-font-color-light: var(--clr-color-neutral-1000); + --clr-label-font-color-dark: var(--clr-color-neutral-1000); + --clr-label-default-border-color: var(--clr-color-neutral-600); + --clr-label-font-size: 0.55rem; + --clr-label-font-weight: 400; + --clr-label-letter-spacing: 0.03em; + --clr-label-border-radius: 0.6rem; + --clr-label-bg-hover-color: var(--clr-color-neutral-200); + --clr-label-gray-bg-color: var(--clr-color-neutral-600); + --clr-label-gray-color: var(--clr-label-font-color-light); + --clr-label-purple-bg-color: var(--clr-color-secondary-action-500); + --clr-label-purple-color: var(--clr-label-font-color-light); + --clr-label-blue-bg-color: var(--clr-color-action-800); + --clr-label-blue-color: var(--clr-label-font-color-light); + --clr-label-orange-bg-color: var(--clr-color-warning-1000); + --clr-label-orange-color: var(--clr-label-font-color-dark); + --clr-label-light-blue-bg-color: var(--clr-color-action-500); + --clr-label-light-blue-color: var(--clr-label-font-color-dark); + --clr-label-info-bg-color: var(--clr-color-action-50); + --clr-label-info-font-color: var(--clr-color-action-800); + --clr-label-info-border-color: var(--clr-color-action-800); + --clr-label-success-bg-color: var(--clr-color-success-50); + --clr-label-success-font-color: var(--clr-color-success-800); + --clr-label-success-border-color: var(--clr-color-success-800); + --clr-label-warning-bg-color: var(--clr-color-warning-100); + --clr-label-warning-font-color: var(--clr-color-neutral-900); + --clr-label-warning-border-color: var(--clr-color-warning-800); + --clr-label-danger-bg-color: var(--clr-color-danger-100); + --clr-label-danger-font-color: var(--clr-color-danger-900); + --clr-label-danger-border-color: var(--clr-color-danger-900); +} +.label, +a.label { + font-size: 0.55rem; + font-size: var(--clr-label-font-size, 0.55rem); + font-weight: 400; + font-weight: var(--clr-label-font-weight, 400); + letter-spacing: 0.03em; + letter-spacing: var(--clr-label-letter-spacing, 0.03em); + line-height: 0.6rem; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0 0.6rem 0.05rem; + border-radius: 0.6rem; + border-radius: var(--clr-label-border-radius, 0.6rem); + border: 0.05rem solid; + border-color: #8c8c8c; + border-color: var(--clr-label-default-border-color, #8c8c8c); + height: 1.05rem; + margin: 0 0.3rem 0 0; + white-space: nowrap; + color: #000; + color: var(--clr-label-font-color-light, #000); +} +.label:visited, +a.label:visited { + color: #000; + color: var(--clr-label-font-color-light, #000); +} +.label:active, +.label:focus, +.label:hover, +a.label:active, +a.label:focus, +a.label:hover { + text-decoration: none; +} +.label.clickable:active, +.label.clickable:hover, +a.label.clickable:active, +a.label.clickable:hover { + background: #e8e8e8; + background: var(--clr-label-bg-hover-color, #e8e8e8); +} +.label.clickable:active, +a.label.clickable:active { + -webkit-box-shadow: 0 0.05rem 0 0 #8c8c8c inset; + box-shadow: 0 0.05rem 0 0 #8c8c8c inset; + -webkit-box-shadow: 0 0.05rem 0 0 var(--clr-label-gray-bg-color, #8c8c8c) + inset; + box-shadow: 0 0.05rem 0 0 var(--clr-label-gray-bg-color, #8c8c8c) inset; + -webkit-transform: translateY(0.5px); + transform: translateY(0.5px); +} +.label.label-1, +.label.label-gray, +a.label.label-1, +a.label.label-gray { + border: 0.05rem solid; + border-color: #8c8c8c; + border-color: var(--clr-label-gray-bg-color, #8c8c8c); +} +.label.clickable.label-gray:active, +.label.clickable.label-gray:hover, +a.label.clickable.label-gray:active, +a.label.clickable.label-gray:hover { + text-decoration: none; + background: #e8e8e8; + background: var(--clr-label-bg-hover-color, #e8e8e8); +} +.label.clickable.label-gray:active, +a.label.clickable.label-gray:active { + -webkit-box-shadow: 0 0.05rem 0 0 #8c8c8c inset; + box-shadow: 0 0.05rem 0 0 #8c8c8c inset; + -webkit-box-shadow: 0 0.05rem 0 0 var(--clr-label-gray-bg-color, #8c8c8c) + inset; + box-shadow: 0 0.05rem 0 0 var(--clr-label-gray-bg-color, #8c8c8c) inset; + -webkit-transform: translateY(0.5px); + transform: translateY(0.5px); +} +.label.label-gray > .badge, +a.label.label-gray > .badge { + background: #8c8c8c; + background: var(--clr-badge-gray-bg-color, #8c8c8c); + color: #fff; + color: var(--clr-badge-gray-color, #fff); +} +.label.label-2, +.label.label-purple, +a.label.label-2, +a.label.label-purple { + border: 0.05rem solid; + border-color: #9e57bc; + border-color: var(--clr-label-purple-bg-color, #9e57bc); +} +.label.clickable.label-purple:active, +.label.clickable.label-purple:hover, +a.label.clickable.label-purple:active, +a.label.clickable.label-purple:hover { + text-decoration: none; + background: #e8e8e8; + background: var(--clr-label-bg-hover-color, #e8e8e8); +} +.label.clickable.label-purple:active, +a.label.clickable.label-purple:active { + -webkit-box-shadow: 0 0.05rem 0 0 #9e57bc inset; + box-shadow: 0 0.05rem 0 0 #9e57bc inset; + -webkit-box-shadow: 0 0.05rem 0 0 var(--clr-label-purple-bg-color, #9e57bc) + inset; + box-shadow: 0 0.05rem 0 0 var(--clr-label-purple-bg-color, #9e57bc) inset; + -webkit-transform: translateY(0.5px); + transform: translateY(0.5px); +} +.label.label-purple > .badge, +a.label.label-purple > .badge { + background: #9e57bc; + background: var(--clr-badge-purple-bg-color, #9e57bc); + color: #fff; + color: var(--clr-badge-purple-color, #fff); +} +.label.label-3, +.label.label-blue, +a.label.label-3, +a.label.label-blue { + border: 0.05rem solid; + border-color: #00567a; + border-color: var(--clr-label-blue-bg-color, #00567a); +} +.label.clickable.label-blue:active, +.label.clickable.label-blue:hover, +a.label.clickable.label-blue:active, +a.label.clickable.label-blue:hover { + text-decoration: none; + background: #e8e8e8; + background: var(--clr-label-bg-hover-color, #e8e8e8); +} +.label.clickable.label-blue:active, +a.label.clickable.label-blue:active { + -webkit-box-shadow: 0 0.05rem 0 0 #00567a inset; + box-shadow: 0 0.05rem 0 0 #00567a inset; + -webkit-box-shadow: 0 0.05rem 0 0 var(--clr-label-blue-bg-color, #00567a) + inset; + box-shadow: 0 0.05rem 0 0 var(--clr-label-blue-bg-color, #00567a) inset; + -webkit-transform: translateY(0.5px); + transform: translateY(0.5px); +} +.label.label-blue > .badge, +a.label.label-blue > .badge { + background: #00567a; + background: var(--clr-badge-blue-bg-color, #00567a); + color: #fff; + color: var(--clr-badge-blue-color, #fff); +} +.label.label-4, +.label.label-orange, +a.label.label-4, +a.label.label-orange { + border: 0.05rem solid; + border-color: #613200; + border-color: var(--clr-label-orange-bg-color, #613200); +} +.label.clickable.label-orange:active, +.label.clickable.label-orange:hover, +a.label.clickable.label-orange:active, +a.label.clickable.label-orange:hover { + text-decoration: none; + background: #e8e8e8; + background: var(--clr-label-bg-hover-color, #e8e8e8); +} +.label.clickable.label-orange:active, +a.label.clickable.label-orange:active { + -webkit-box-shadow: 0 0.05rem 0 0 #613200 inset; + box-shadow: 0 0.05rem 0 0 #613200 inset; + -webkit-box-shadow: 0 0.05rem 0 0 var(--clr-label-orange-bg-color, #613200) + inset; + box-shadow: 0 0.05rem 0 0 var(--clr-label-orange-bg-color, #613200) inset; + -webkit-transform: translateY(0.5px); + transform: translateY(0.5px); +} +.label.label-orange > .badge, +a.label.label-orange > .badge { + background: #613200; + background: var(--clr-badge-orange-bg-color, #613200); + color: #fff; + color: var(--clr-badge-orange-color, #fff); +} +.label.label-5, +.label.label-light-blue, +a.label.label-5, +a.label.label-light-blue { + border: 0.05rem solid; + border-color: #179bd3; + border-color: var(--clr-label-light-blue-bg-color, #179bd3); +} +.label.clickable.label-light-blue:active, +.label.clickable.label-light-blue:hover, +a.label.clickable.label-light-blue:active, +a.label.clickable.label-light-blue:hover { + text-decoration: none; + background: #e8e8e8; + background: var(--clr-label-bg-hover-color, #e8e8e8); +} +.label.clickable.label-light-blue:active, +a.label.clickable.label-light-blue:active { + -webkit-box-shadow: 0 0.05rem 0 0 #179bd3 inset; + box-shadow: 0 0.05rem 0 0 #179bd3 inset; + -webkit-box-shadow: 0 0.05rem 0 0 + var(--clr-label-light-blue-bg-color, #179bd3) inset; + box-shadow: 0 0.05rem 0 0 var(--clr-label-light-blue-bg-color, #179bd3) + inset; + -webkit-transform: translateY(0.5px); + transform: translateY(0.5px); +} +.label.label-light-blue > .badge, +a.label.label-light-blue > .badge { + background: #179bd3; + background: var(--clr-badge-light-blue-bg-color, #179bd3); + color: #fff; + color: var(--clr-badge-light-blue-color, #fff); +} +.label.label-info, +a.label.label-info { + background: #e3f5fc; + background: var(--clr-label-info-bg-color, #e3f5fc); + color: #00567a; + color: var(--clr-label-info-font-color, #00567a); + border: 0.05rem solid; + border-color: #00567a; + border-color: var(--clr-label-info-border-color, #00567a); +} +.label.label-success, +a.label.label-success { + background: #dff0d0; + background: var(--clr-label-success-bg-color, #dff0d0); + color: #306b00; + color: var(--clr-label-success-font-color, #306b00); + border: 0.05rem solid; + border-color: #306b00; + border-color: var(--clr-label-success-border-color, #306b00); +} +.label.label-warning, +a.label.label-warning { + background: #fff4c7; + background: var(--clr-label-warning-bg-color, #fff4c7); + color: #333; + color: var(--clr-label-warning-font-color, #333); + border: 0.05rem solid; + border-color: #ad7600; + border-color: var(--clr-label-warning-border-color, #ad7600); +} +.label.label-danger, +a.label.label-danger { + background: #feddd7; + background: var(--clr-label-danger-bg-color, #feddd7); + color: #991700; + color: var(--clr-label-danger-font-color, #991700); + border: 0.05rem solid; + border-color: #991700; + border-color: var(--clr-label-danger-border-color, #991700); +} +.label > .badge, +a.label > .badge { + margin: 0 -0.45rem 0 0.3rem; +} +@-moz-document url-prefix() { + .label, + a.label { + vertical-align: bottom; + } +} +:root { + --clr-login-title-color: var(--clr-h1-color); + --clr-login-title-font-weight: var(--clr-h1-font-weight); + --clr-login-title-font-family: var(--clr-h1-font-family); + --clr-login-trademark-color: var(--clr-h2-color); + --clr-login-trademark-font-weight: var(--clr-h2-font-weight); + --clr-login-trademark-font-family: var(--clr-h2-font-family); + --clr-login-subtitle-color: var(--clr-h3-color); + --clr-login-subtitle-font-weight: var(--clr-h3-font-weight); + --clr-login-subtitle-font-family: var(--clr-h3-font-family); + --clr-login-background-color: var(--clr-global-app-background); + --clr-login-background: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%0D%0A%20%20%20%20%20version%3D%221.1%22%0D%0A%20%20%20%20%20id%3D%22no-aspect-ratio%22%0D%0A%20%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0D%0A%20%20%20%20%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%0D%0A%20%20%20%20%20x%3D%220px%22%0D%0A%20%20%20%20%20y%3D%220px%22%0D%0A%20%20%20%20%20height%3D%222055.55px%22%0D%0A%20%20%20%20%20width%3D%221440px%22%0D%0A%20%20%20%20%20viewBox%3D%220%200%202055.55%201440%22%0D%0A%20%20%20%20%20preserveAspectRatio%3D%22xMinYMin%20slice%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%3Cdesc%3ELogin%20Image%3C%2Fdesc%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate%280.000000%2C%20-4.000000%29%22%3E%0D%0A%20%20%20%20%20%20%20%20%3Cg%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%23FAFAFA%22%20x%3D%220%22%20y%3D%224%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23007CBB%22%20opacity%3D%220.4%22%20style%3D%22mix-blend-mode%3A%20multiply%3B%22%20points%3D%221108.43%201443.63%201109.08%201443.63%20443.44%20777.74%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2393D8CA%22%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3A%20overlay%3B%22%20points%3D%220.79%20334.92%20443.44%20777.74%200.79%20334.49%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%220.79%20211.88%200.79%20329.6%2059.62%20270.77%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%22160.65%20169.74%200.79%209.73%200.79%20211.88%2090.27%20301.46%2059.62%20270.77%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23CDE3EE%22%20points%3D%22503.77%201443.63%20697.47%201443.63%20803.74%201337.36%20706.93%201240.43%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23CDE3EE%22%20points%3D%22158.33%20691.15%200.79%20848.72%200.79%201427.43%20447.52%20980.7%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23CEDDE0%22%20points%3D%22257.71%20591.75%200.79%20334.49%200.79%20533.42%20158.33%20691.15%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A9C9D5%22%20points%3D%220.79%20533.42%200.79%20848.72%20158.33%20691.15%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23AFD4E7%22%20points%3D%22806.46%201140.89%20546.94%20881.28%20447.52%20980.7%20706.93%201240.43%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%238FC4DF%22%20points%3D%22447.52%20980.7%200.79%201427.43%200.79%201443.63%20503.77%201443.63%20706.93%201240.43%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2370C0DC%22%20points%3D%22608.23%20819.99%20546.94%20881.28%20806.46%201140.89%20867.64%201079.7%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%22420.05%20429.39%20319.01%20530.45%20608.23%20819.99%20709.3%20718.91%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2369AFD4%22%20points%3D%22709.3%20718.91%20608.23%20819.99%20867.64%201079.7%20968.74%20978.6%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%238EB5BC%22%20points%3D%22619.59%20229.82%20393.42%203.12%20327.27%203.12%20160.65%20169.74%20420.05%20429.39%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%238EB5BC%22%20points%3D%22319.01%20530.45%20319.01%20530.45%2090.27%20301.46%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%237CB0C7%22%20points%3D%22160.65%20169.74%2059.62%20270.77%2090.27%20301.46%20319.01%20530.45%20420.05%20429.39%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2384C4D2%22%20points%3D%2259.62%20270.77%200.79%20329.6%200.79%20334.49%20257.71%20591.75%20319.01%20530.45%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%237CB0C7%22%20points%3D%22537.55%203.12%20393.42%203.12%20619.59%20229.82%20691.74%20157.66%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2387D1DB%22%20points%3D%22846.25%203.12%20537.55%203.12%20691.74%20157.66%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23CDE3EE%22%20points%3D%22909.87%201443.63%20850.19%201383.87%20790.43%201443.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%22319.01%20530.45%20257.71%20591.75%20443.44%20777.74%20546.94%20881.28%20608.23%20819.99%20867.64%201079.7%20867.64%201079.7%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%22867.64%201079.7%20806.46%201140.89%20903.31%201237.78%20964.46%201176.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%221065.57%201075.52%20968.74%20978.6%20867.64%201079.7%20964.46%201176.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%22964.46%201176.63%20867.64%201079.7%20867.64%201079.7%20964.46%201176.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%221010.92%201223.13%201231.16%201443.63%201010.92%201223.13%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%221240.08%20707.22%201167.9%20779.4%201264.68%20876.4%201336.87%20804.22%201240.08%20707.21%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%22980.83%20447.39%20691.74%20157.66%20619.59%20229.82%20908.66%20519.56%20980.83%20447.39%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23AFD4E7%22%20points%3D%22709.3%20718.91%20968.74%20978.6%201167.91%20779.4%20908.66%20519.55%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2369AFD4%22%20points%3D%22980.83%20447.39%20908.66%20519.55%201167.91%20779.4%201240.08%20707.21%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%221034.59%203.12%20846.25%203.12%20691.74%20157.66%20980.83%20447.39%201229.75%20198.47%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%221240.08%20707.21%201336.87%20804.22%201586.01%20555.08%201489.14%20458.12%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2370C0DC%22%20points%3D%221229.75%20198.47%20980.83%20447.39%201240.08%20707.21%201489.14%20458.12%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23B7CED2%22%20points%3D%221292.22%201302.38%201433.32%201443.63%201830.61%201443.63%201491.18%201103.42%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%221010.92%201223.13%20949.78%201284.27%201109.08%201443.63%201150.98%201443.63%201191.09%201403.51%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2375B8C5%22%20points%3D%221150.98%201443.63%201231.16%201443.63%201191.09%201403.51%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%221292.22%201302.38%201112.03%201122.02%201010.92%201223.13%201191.09%201403.51%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%236EA4BC%22%20points%3D%221191.09%201403.51%201231.16%201443.63%201433.32%201443.63%201292.22%201302.38%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23007CBB%22%20opacity%3D%220.4%22%20style%3D%22mix-blend-mode%3A%20multiply%3B%22%20points%3D%221383.3%20850.75%201311.12%20922.94%201491.18%201103.42%201563.37%201031.23%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23B7CED2%22%20points%3D%221491.18%201103.42%201830.61%201443.63%201974.86%201443.63%201563.37%201031.23%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%236EA4BC%22%20points%3D%221491.18%201103.42%201830.61%201443.63%201974.86%201443.63%201563.37%201031.23%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%221812.65%20781.95%201632.46%20601.59%201383.3%20850.75%201563.37%201031.23%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23B7CED2%22%20points%3D%221563.37%201031.23%201974.86%201443.63%202054.45%201443.63%202054.45%201023.99%201812.65%20781.95%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2378CAD4%22%20points%3D%221563.37%201031.23%201974.86%201443.63%202054.45%201443.63%202054.45%201023.99%201812.65%20781.95%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2391C5E0%22%20points%3D%22803.74%201337.36%20850.19%201383.87%20949.78%201284.27%20903.31%201237.78%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2391C5E0%22%20points%3D%221065.57%201075.52%201112.03%201122.02%201311.12%20922.94%201264.69%20876.4%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2377B8D9%22%20points%3D%22697.47%201443.63%20790.43%201443.63%20850.19%201383.87%20803.74%201337.36%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%22964.46%201176.63%20903.31%201237.78%20949.78%201284.27%201010.92%201223.13%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%235DB5D6%22%20points%3D%22964.46%201176.63%20903.31%201237.78%20949.78%201284.27%201010.92%201223.13%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%2396C7DF%22%20transform%3D%22translate%281038.247297%2C%201149.275429%29%20rotate%28-44.970000%29%20translate%28-1038.247297%2C%20-1149.275429%29%20%22%20x%3D%22966.752297%22%20y%3D%221116.41043%22%20width%3D%22142.99%22%20height%3D%2265.73%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%2357A8D0%22%20transform%3D%22translate%281038.247297%2C%201149.275429%29%20rotate%28-44.970000%29%20translate%28-1038.247297%2C%20-1149.275429%29%20%22%20x%3D%22966.752297%22%20y%3D%221116.41043%22%20width%3D%22142.99%22%20height%3D%2265.73%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%221010.92%201223.13%201010.92%201223.13%20964.46%201176.63%20964.46%201176.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23000000%22%20opacity%3D%220.42%22%20points%3D%221010.92%201223.13%201010.92%201223.13%20964.46%201176.63%20964.46%201176.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23007CBB%22%20opacity%3D%220.4%22%20style%3D%22mix-blend-mode%3A%20multiply%3B%22%20points%3D%221336.87%20804.22%201264.69%20876.4%201311.12%20922.94%201383.3%20850.75%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2357A8D0%22%20points%3D%221336.87%20804.22%201264.69%20876.4%201311.12%20922.94%201383.3%20850.75%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2393D8CA%22%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3A%20overlay%3B%22%20points%3D%221336.87%20804.22%201383.3%20850.75%201632.46%20601.59%201586.01%20555.08%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%235DB5D6%22%20points%3D%221336.87%20804.22%201383.3%20850.75%201632.46%20601.59%201586.01%20555.08%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23AFD3E6%22%20points%3D%222056%200.12%201645.49%200.12%201648.49%203.12%201944.07%203.12%201796.22%20150.99%201893.12%20247.97%202054.45%2086.64%202054.45%20179.6%201939.58%20294.47%202056%20411%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%237AB9D9%22%20points%3D%221648.49%203.12%201796.22%20150.99%201944.07%203.12%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2366AED4%22%20points%3D%222054.45%2086.64%201893.12%20247.97%201939.58%20294.47%202054.45%20179.6%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23B7CED2%22%20points%3D%221884.82%20709.78%202054.45%20879.57%202054.45%20540.15%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23AFD4E7%22%20points%3D%221489.14%20458.12%201489.14%20458.12%201371.13%20339.99%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23AFD4E7%22%20points%3D%221796.22%20150.99%201648.49%203.12%201425.1%203.12%201301.91%20126.31%201561.3%20385.95%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%2391C5E0%22%20transform%3D%22translate%281798.954066%2C%20388.798781%29%20rotate%28-44.970000%29%20translate%28-1798.954066%2C%20-388.798781%29%20%22%20x%3D%221632.82407%22%20y%3D%22355.933781%22%20width%3D%22332.26%22%20height%3D%2265.73%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2391C5E0%22%20points%3D%221586.01%20555.08%201632.46%20601.59%201632.46%20601.59%201586.01%20555.08%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%23B3EAEE%22%20transform%3D%22translate%281573.711577%2C%20470.620263%29%20rotate%28-45.000000%29%20translate%28-1573.711577%2C%20-470.620263%29%20%22%20x%3D%221522.68158%22%20y%3D%22402.085263%22%20width%3D%22102.06%22%20height%3D%22137.07%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%23B3EAEE%22%20transform%3D%22translate%281758.676758%2C%20655.767120%29%20rotate%28-44.970000%29%20translate%28-1758.676758%2C%20-655.767120%29%20%22%20x%3D%221707.64676%22%20y%3D%22528.29212%22%20width%3D%22102.06%22%20height%3D%22254.95%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23B3EAEE%22%20points%3D%221301.91%20126.31%201178.84%203.12%201034.59%203.12%201229.75%20198.47%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2383C0C8%22%20points%3D%221812.65%20781.95%202054.45%201023.99%202054.45%20879.57%201884.82%20709.78%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%237DC6DC%22%20transform%3D%22translate%281395.516901%2C%20292.206519%29%20rotate%28-45.000000%29%20translate%28-1395.516901%2C%20-292.206519%29%20%22%20x%3D%221344.4919%22%20y%3D%22108.701519%22%20width%3D%22102.05%22%20height%3D%22367.01%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%2368B8D5%22%20transform%3D%22translate%281645.313619%2C%20542.249760%29%20rotate%28-45.000000%29%20translate%28-1645.313619%2C%20-542.249760%29%20%22%20x%3D%221594.28362%22%20y%3D%22509.38476%22%20width%3D%22102.06%22%20height%3D%2265.73%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%280.000000%2C%203.000000%29%22%20stroke%3D%22%23000000%22%20opacity%3D%220.15%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0.95%2C0.12%20L0.95%2C840.12%22%20id%3D%22Shape%22%3E%3C%2Fpath%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0D%0A%20%20%20%20%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E"); + --clr-login-error-background-color: var(--clr-color-danger-800); + --clr-login-error-border-radius: var(--clr-global-borderradius); + --clr-login-panel-line-color: var(--clr-color-neutral-1000); + --clr-login-panel-line-opacity: 0.1; +} +.login-wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + height: 100%; + background: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%0D%0A%20%20%20%20%20version%3D%221.1%22%0D%0A%20%20%20%20%20id%3D%22no-aspect-ratio%22%0D%0A%20%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0D%0A%20%20%20%20%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%0D%0A%20%20%20%20%20x%3D%220px%22%0D%0A%20%20%20%20%20y%3D%220px%22%0D%0A%20%20%20%20%20height%3D%222055.55px%22%0D%0A%20%20%20%20%20width%3D%221440px%22%0D%0A%20%20%20%20%20viewBox%3D%220%200%202055.55%201440%22%0D%0A%20%20%20%20%20preserveAspectRatio%3D%22xMinYMin%20slice%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%3Cdesc%3ELogin%20Image%3C%2Fdesc%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate%280.000000%2C%20-4.000000%29%22%3E%0D%0A%20%20%20%20%20%20%20%20%3Cg%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%23FAFAFA%22%20x%3D%220%22%20y%3D%224%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23007CBB%22%20opacity%3D%220.4%22%20style%3D%22mix-blend-mode%3A%20multiply%3B%22%20points%3D%221108.43%201443.63%201109.08%201443.63%20443.44%20777.74%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2393D8CA%22%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3A%20overlay%3B%22%20points%3D%220.79%20334.92%20443.44%20777.74%200.79%20334.49%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%220.79%20211.88%200.79%20329.6%2059.62%20270.77%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%22160.65%20169.74%200.79%209.73%200.79%20211.88%2090.27%20301.46%2059.62%20270.77%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23CDE3EE%22%20points%3D%22503.77%201443.63%20697.47%201443.63%20803.74%201337.36%20706.93%201240.43%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23CDE3EE%22%20points%3D%22158.33%20691.15%200.79%20848.72%200.79%201427.43%20447.52%20980.7%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23CEDDE0%22%20points%3D%22257.71%20591.75%200.79%20334.49%200.79%20533.42%20158.33%20691.15%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A9C9D5%22%20points%3D%220.79%20533.42%200.79%20848.72%20158.33%20691.15%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23AFD4E7%22%20points%3D%22806.46%201140.89%20546.94%20881.28%20447.52%20980.7%20706.93%201240.43%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%238FC4DF%22%20points%3D%22447.52%20980.7%200.79%201427.43%200.79%201443.63%20503.77%201443.63%20706.93%201240.43%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2370C0DC%22%20points%3D%22608.23%20819.99%20546.94%20881.28%20806.46%201140.89%20867.64%201079.7%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%22420.05%20429.39%20319.01%20530.45%20608.23%20819.99%20709.3%20718.91%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2369AFD4%22%20points%3D%22709.3%20718.91%20608.23%20819.99%20867.64%201079.7%20968.74%20978.6%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%238EB5BC%22%20points%3D%22619.59%20229.82%20393.42%203.12%20327.27%203.12%20160.65%20169.74%20420.05%20429.39%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%238EB5BC%22%20points%3D%22319.01%20530.45%20319.01%20530.45%2090.27%20301.46%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%237CB0C7%22%20points%3D%22160.65%20169.74%2059.62%20270.77%2090.27%20301.46%20319.01%20530.45%20420.05%20429.39%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2384C4D2%22%20points%3D%2259.62%20270.77%200.79%20329.6%200.79%20334.49%20257.71%20591.75%20319.01%20530.45%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%237CB0C7%22%20points%3D%22537.55%203.12%20393.42%203.12%20619.59%20229.82%20691.74%20157.66%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2387D1DB%22%20points%3D%22846.25%203.12%20537.55%203.12%20691.74%20157.66%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23CDE3EE%22%20points%3D%22909.87%201443.63%20850.19%201383.87%20790.43%201443.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%22319.01%20530.45%20257.71%20591.75%20443.44%20777.74%20546.94%20881.28%20608.23%20819.99%20867.64%201079.7%20867.64%201079.7%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%22867.64%201079.7%20806.46%201140.89%20903.31%201237.78%20964.46%201176.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%221065.57%201075.52%20968.74%20978.6%20867.64%201079.7%20964.46%201176.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%22964.46%201176.63%20867.64%201079.7%20867.64%201079.7%20964.46%201176.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%221010.92%201223.13%201231.16%201443.63%201010.92%201223.13%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%221240.08%20707.22%201167.9%20779.4%201264.68%20876.4%201336.87%20804.22%201240.08%20707.21%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%22980.83%20447.39%20691.74%20157.66%20619.59%20229.82%20908.66%20519.56%20980.83%20447.39%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23AFD4E7%22%20points%3D%22709.3%20718.91%20968.74%20978.6%201167.91%20779.4%20908.66%20519.55%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2369AFD4%22%20points%3D%22980.83%20447.39%20908.66%20519.55%201167.91%20779.4%201240.08%20707.21%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%221034.59%203.12%20846.25%203.12%20691.74%20157.66%20980.83%20447.39%201229.75%20198.47%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%221240.08%20707.21%201336.87%20804.22%201586.01%20555.08%201489.14%20458.12%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2370C0DC%22%20points%3D%221229.75%20198.47%20980.83%20447.39%201240.08%20707.21%201489.14%20458.12%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23B7CED2%22%20points%3D%221292.22%201302.38%201433.32%201443.63%201830.61%201443.63%201491.18%201103.42%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%221010.92%201223.13%20949.78%201284.27%201109.08%201443.63%201150.98%201443.63%201191.09%201403.51%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2375B8C5%22%20points%3D%221150.98%201443.63%201231.16%201443.63%201191.09%201403.51%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%221292.22%201302.38%201112.03%201122.02%201010.92%201223.13%201191.09%201403.51%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%236EA4BC%22%20points%3D%221191.09%201403.51%201231.16%201443.63%201433.32%201443.63%201292.22%201302.38%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23007CBB%22%20opacity%3D%220.4%22%20style%3D%22mix-blend-mode%3A%20multiply%3B%22%20points%3D%221383.3%20850.75%201311.12%20922.94%201491.18%201103.42%201563.37%201031.23%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23B7CED2%22%20points%3D%221491.18%201103.42%201830.61%201443.63%201974.86%201443.63%201563.37%201031.23%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%236EA4BC%22%20points%3D%221491.18%201103.42%201830.61%201443.63%201974.86%201443.63%201563.37%201031.23%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%221812.65%20781.95%201632.46%20601.59%201383.3%20850.75%201563.37%201031.23%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23B7CED2%22%20points%3D%221563.37%201031.23%201974.86%201443.63%202054.45%201443.63%202054.45%201023.99%201812.65%20781.95%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2378CAD4%22%20points%3D%221563.37%201031.23%201974.86%201443.63%202054.45%201443.63%202054.45%201023.99%201812.65%20781.95%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2391C5E0%22%20points%3D%22803.74%201337.36%20850.19%201383.87%20949.78%201284.27%20903.31%201237.78%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2391C5E0%22%20points%3D%221065.57%201075.52%201112.03%201122.02%201311.12%20922.94%201264.69%20876.4%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2377B8D9%22%20points%3D%22697.47%201443.63%20790.43%201443.63%20850.19%201383.87%20803.74%201337.36%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23A0DEEA%22%20points%3D%22964.46%201176.63%20903.31%201237.78%20949.78%201284.27%201010.92%201223.13%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%235DB5D6%22%20points%3D%22964.46%201176.63%20903.31%201237.78%20949.78%201284.27%201010.92%201223.13%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%2396C7DF%22%20transform%3D%22translate%281038.247297%2C%201149.275429%29%20rotate%28-44.970000%29%20translate%28-1038.247297%2C%20-1149.275429%29%20%22%20x%3D%22966.752297%22%20y%3D%221116.41043%22%20width%3D%22142.99%22%20height%3D%2265.73%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%2357A8D0%22%20transform%3D%22translate%281038.247297%2C%201149.275429%29%20rotate%28-44.970000%29%20translate%28-1038.247297%2C%20-1149.275429%29%20%22%20x%3D%22966.752297%22%20y%3D%221116.41043%22%20width%3D%22142.99%22%20height%3D%2265.73%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2396C7DF%22%20points%3D%221010.92%201223.13%201010.92%201223.13%20964.46%201176.63%20964.46%201176.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23000000%22%20opacity%3D%220.42%22%20points%3D%221010.92%201223.13%201010.92%201223.13%20964.46%201176.63%20964.46%201176.63%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23007CBB%22%20opacity%3D%220.4%22%20style%3D%22mix-blend-mode%3A%20multiply%3B%22%20points%3D%221336.87%20804.22%201264.69%20876.4%201311.12%20922.94%201383.3%20850.75%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2357A8D0%22%20points%3D%221336.87%20804.22%201264.69%20876.4%201311.12%20922.94%201383.3%20850.75%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2393D8CA%22%20opacity%3D%220.6%22%20style%3D%22mix-blend-mode%3A%20overlay%3B%22%20points%3D%221336.87%20804.22%201383.3%20850.75%201632.46%20601.59%201586.01%20555.08%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%235DB5D6%22%20points%3D%221336.87%20804.22%201383.3%20850.75%201632.46%20601.59%201586.01%20555.08%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23AFD3E6%22%20points%3D%222056%200.12%201645.49%200.12%201648.49%203.12%201944.07%203.12%201796.22%20150.99%201893.12%20247.97%202054.45%2086.64%202054.45%20179.6%201939.58%20294.47%202056%20411%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%237AB9D9%22%20points%3D%221648.49%203.12%201796.22%20150.99%201944.07%203.12%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2366AED4%22%20points%3D%222054.45%2086.64%201893.12%20247.97%201939.58%20294.47%202054.45%20179.6%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23B7CED2%22%20points%3D%221884.82%20709.78%202054.45%20879.57%202054.45%20540.15%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23AFD4E7%22%20points%3D%221489.14%20458.12%201489.14%20458.12%201371.13%20339.99%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23AFD4E7%22%20points%3D%221796.22%20150.99%201648.49%203.12%201425.1%203.12%201301.91%20126.31%201561.3%20385.95%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%2391C5E0%22%20transform%3D%22translate%281798.954066%2C%20388.798781%29%20rotate%28-44.970000%29%20translate%28-1798.954066%2C%20-388.798781%29%20%22%20x%3D%221632.82407%22%20y%3D%22355.933781%22%20width%3D%22332.26%22%20height%3D%2265.73%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2391C5E0%22%20points%3D%221586.01%20555.08%201632.46%20601.59%201632.46%20601.59%201586.01%20555.08%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%23B3EAEE%22%20transform%3D%22translate%281573.711577%2C%20470.620263%29%20rotate%28-45.000000%29%20translate%28-1573.711577%2C%20-470.620263%29%20%22%20x%3D%221522.68158%22%20y%3D%22402.085263%22%20width%3D%22102.06%22%20height%3D%22137.07%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%23B3EAEE%22%20transform%3D%22translate%281758.676758%2C%20655.767120%29%20rotate%28-44.970000%29%20translate%28-1758.676758%2C%20-655.767120%29%20%22%20x%3D%221707.64676%22%20y%3D%22528.29212%22%20width%3D%22102.06%22%20height%3D%22254.95%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%23B3EAEE%22%20points%3D%221301.91%20126.31%201178.84%203.12%201034.59%203.12%201229.75%20198.47%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20fill%3D%22%2383C0C8%22%20points%3D%221812.65%20781.95%202054.45%201023.99%202054.45%20879.57%201884.82%20709.78%22%3E%3C%2Fpolygon%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%237DC6DC%22%20transform%3D%22translate%281395.516901%2C%20292.206519%29%20rotate%28-45.000000%29%20translate%28-1395.516901%2C%20-292.206519%29%20%22%20x%3D%221344.4919%22%20y%3D%22108.701519%22%20width%3D%22102.05%22%20height%3D%22367.01%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20fill%3D%22%2368B8D5%22%20transform%3D%22translate%281645.313619%2C%20542.249760%29%20rotate%28-45.000000%29%20translate%28-1645.313619%2C%20-542.249760%29%20%22%20x%3D%221594.28362%22%20y%3D%22509.38476%22%20width%3D%22102.06%22%20height%3D%2265.73%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%280.000000%2C%203.000000%29%22%20stroke%3D%22%23000000%22%20opacity%3D%220.15%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0.95%2C0.12%20L0.95%2C840.12%22%20id%3D%22Shape%22%3E%3C%2Fpath%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0D%0A%20%20%20%20%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E"); + background-size: 100%; + background-position: 25.2rem 0; + background-repeat: no-repeat; +} +.login-wrapper .login { + background: #fafafa; + background: var(--clr-login-background-color, #fafafa); + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + padding: 1.2rem 3rem; + height: auto; + min-height: 100vh; + width: 25.2rem; +} +.login-wrapper .login .title { + color: #000; + color: var(--clr-login-title-color, #000); + font-weight: 200; + font-weight: var(--clr-login-title-font-weight, 200); + font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif; + font-family: var( + --clr-login-title-font-family, + Metropolis, + "Avenir Next", + "Helvetica Neue", + Arial, + sans-serif + ); + font-size: 1.6rem; + letter-spacing: normal; + line-height: 1.8rem; +} +.login-wrapper .login .title .welcome { + line-height: 1.8rem; +} +.login-wrapper .login .title .hint { + color: #000; + color: var(--clr-login-title-color, #000); + margin-top: 1.5rem; + font-size: 0.7rem; +} +.login-wrapper .login .trademark { + color: #000; + color: var(--clr-login-trademark-color, #000); + font-weight: 200; + font-weight: var(--clr-login-trademark-font-weight, 200); + font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif; + font-family: var( + --clr-login-trademark-font-family, + Metropolis, + "Avenir Next", + "Helvetica Neue", + Arial, + sans-serif + ); + font-size: 1.4rem; + letter-spacing: normal; +} +.login-wrapper .login .subtitle { + font-weight: 200; + font-weight: var(--clr-login-subtitle-font-weight, 200); + color: #000; + color: var(--clr-login-subtitle-color, #000); + font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif; + font-family: var( + --clr-login-subtitle-font-family, + Metropolis, + "Avenir Next", + "Helvetica Neue", + Arial, + sans-serif + ); + font-size: 1.1rem; + letter-spacing: normal; + line-height: 1.8rem; +} +.login-wrapper .login .login-group { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + padding: 2.4rem 0 0 0; +} +.login-wrapper .login .login-group .auth-source, +.login-wrapper .login .login-group .checkbox, +.login-wrapper .login .login-group .clr-checkbox-wrapper, +.login-wrapper .login .login-group .clr-form-control, +.login-wrapper .login .login-group .password, +.login-wrapper .login .login-group .username { + margin: 0.3rem 0 0.9rem 0; +} +.login-wrapper .login .login-group .clr-control-container { + display: block; + width: 100%; +} +.login-wrapper .login .login-group .clr-control-container .clr-select, +.login-wrapper .login .login-group .clr-control-container .clr-select-wrapper { + width: 100%; +} +.login-wrapper + .login + .login-group + .clr-control-container + .clr-input-wrapper + > .clr-input { + width: 100%; +} +.login-wrapper .login .login-group .clr-control-container .clr-input-wrapper { + width: 100%; +} +.login-wrapper + .login + .login-group + .clr-control-container + .clr-input-wrapper + > .clr-input-group { + max-width: 100%; + width: 100%; + padding-right: 0.48rem; +} +.login-wrapper + .login + .login-group + .clr-control-container + .clr-input-wrapper + > .clr-input-group + > .clr-input { + width: calc(100% - 1.2rem); +} +.login-wrapper .login .login-group .tooltip-validation { + margin-top: 0.3rem; +} +.login-wrapper .login .login-group .tooltip-validation .password, +.login-wrapper .login .login-group .tooltip-validation .username { + width: 100%; + margin-top: 0; +} +.login-wrapper .login .login-group .error { + display: none; + margin: 0.3rem 0 0 0; + padding: 0.45rem 0.6rem; + background: #c21d00; + background: var(--clr-login-error-background-color, #c21d00); + color: #fafafa; + color: var(--clr-login-background-color, #fafafa); + border-radius: 0.15rem; + border-radius: var(--clr-login-error-border-radius, 0.15rem); + line-height: 0.9rem; +} +.login-wrapper .login .login-group .error:before { + display: inline-block; + content: ""; + background: url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%225%205%2026%2026%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Cstyle%3E.clr-i-outline%7Bfill%3A%23fafafa%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctitle%3Eexclamation-circle-line%3C%2Ftitle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-1%22%20d%3D%22M18%2C6A12%2C12%2C0%2C1%2C0%2C30%2C18%2C12%2C12%2C0%2C0%2C0%2C18%2C6Zm0%2C22A10%2C10%2C0%2C1%2C1%2C28%2C18%2C10%2C10%2C0%2C0%2C1%2C18%2C28Z%22%3E%3C%2Fpath%3E%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-2%22%20d%3D%22M18%2C20.07a1.3%2C1.3%2C0%2C0%2C1-1.3-1.3v-6a1.3%2C1.3%2C0%2C1%2C1%2C2.6%2C0v6A1.3%2C1.3%2C0%2C0%2C1%2C18%2C20.07Z%22%3E%3C%2Fpath%3E%3Ccircle%20class%3D%22clr-i-outline%20clr-i-outline-path-3%22%20cx%3D%2217.95%22%20cy%3D%2223.02%22%20r%3D%221.5%22%3E%3C%2Fcircle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E"); + margin: 0.05rem 0.3rem 0 0; + height: 0.8rem; + width: 0.8rem; +} +.login-wrapper .login .login-group .error.active { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.login-wrapper .login .login-group .error.active:before { + -webkit-box-flex: 0; + -ms-flex: 0 0 0.8rem; + flex: 0 0 0.8rem; +} +.login-wrapper .login .login-group .btn { + margin: 3.6rem 0 0 0; + max-width: none; +} +.login-wrapper .login .login-group .error + .btn { + margin: 1.2rem 0 0 0; +} +.login-wrapper .login .login-group .signup { + margin-top: 0.6rem; + font-size: 0.7rem; + text-align: center; +} +.login-wrapper .login:after { + position: absolute; + content: ""; + display: block; + width: 0.05rem; + height: 100%; + background: #000; + background: var(--clr-login-panel-line-color, #000); + opacity: 0.1; + opacity: var(--clr-login-panel-line-opacity, 0.1); + top: 0; + right: -0.1rem; +} +@media screen and (max-width: 768px) { + .login-wrapper { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + background: #fafafa; + background: var(--clr-login-background-color, #fafafa); + } + .login-wrapper .login { + width: 100%; + margin-left: 0; + padding: 1.2rem 20%; + } + .login-wrapper .login:after { + content: none; + } +} +@media screen and (max-width: 576px) { + .login-wrapper .login { + padding: 1.2rem 15%; + } +} +.main-container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + height: 100vh; + background: #fafafa; + background: var(--clr-global-app-background, #fafafa); +} +.main-container .alert.alert-app-level { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + overflow-x: hidden; +} +.main-container .header, +.main-container header { + -webkit-box-flex: 0; + -ms-flex: 0 0 3rem; + flex: 0 0 3rem; +} +.main-container .sub-nav, +.main-container .subnav { + -webkit-box-flex: 0; + -ms-flex: 0 0 1.8rem; + flex: 0 0 1.8rem; +} +.main-container .u-main-container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + overflow: hidden; +} +.main-container .content-container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + min-height: 0.05rem; +} +.main-container .content-container .content-area { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + padding: 1.2rem 1.2rem 1.2rem 1.2rem; +} +.main-container .content-container .content-area > :first-child { + margin-top: 0; +} +.main-container .content-container .sidenav { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; + overflow: hidden; +} +.main-container .content-container .clr-vertical-nav { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; +} +@media print { + .main-container { + height: auto; + } +} +body.no-scrolling, +body[cds-layout="no-scrolling"] { + overflow: hidden; +} +body.no-scrolling .main-container .content-container .content-area, +body[cds-layout="no-scrolling"] + .main-container + .content-container + .content-area { + overflow: hidden; +} +:root { + --clr-modal-close-color: var(--clr-color-neutral-600); + --clr-modal-bg-color: var(--clr-color-neutral-0); + --clr-modal-content-box-shadow-color: rgba(0, 0, 0, 0.2); + --clr-modal-backdrop-color: var(--clr-color-neutral-900); + --clr-modal-backdrop-opacity: 0.85; + --clr-modal-border-radius: var(--clr-global-borderradius); + --clr-modal-title-color: var(--clr-h3-color); + --clr-modal-title-font-family: var(--clr-h3-font-family); + --clr-modal-title-font-weight: var(--clr-h3-font-weight); +} +.modal { + position: fixed; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 1050; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 2.4rem; +} +@media screen and (max-width: 576px) { + .modal { + padding: 0.6rem; + } +} +.modal-dialog { + position: relative; + z-index: 1050; + width: 28.8rem; + max-width: 100%; +} +.modal-dialog.modal-sm { + width: 14.4rem; +} +.modal-dialog.modal-lg { + width: 43.2rem; +} +.modal-dialog.modal-xl { + width: 57.6rem; +} +.modal-dialog .modal-content { + padding: 1.2rem 1.2rem 1.2rem 1.2rem; + background-color: #fff; + background-color: var(--clr-modal-bg-color, #fff); + border-radius: 0.15rem; + border-radius: var(--clr-modal-border-radius, 0.15rem); + -webkit-box-shadow: 0 0.05rem 0.1rem 0.1rem rgba(0, 0, 0, 0.2); + box-shadow: 0 0.05rem 0.1rem 0.1rem rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 0.05rem 0.1rem 0.1rem + var(--clr-modal-content-box-shadow-color); + box-shadow: 0 0.05rem 0.1rem 0.1rem + var(--clr-modal-content-box-shadow-color); +} +.modal-header, +.modal-header--accessible { + border-bottom: none; + padding: 0 0 1.2rem 0; +} +.modal-header--accessible { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; +} +.modal-header .modal-title, +.modal-header--accessible .modal-title { + color: #000; + color: var(--clr-modal-title-color, #000); + font-size: 1.1rem; + font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif; + font-family: var( + --clr-modal-title-font-family, + Metropolis, + "Avenir Next", + "Helvetica Neue", + Arial, + sans-serif + ); + font-weight: 200; + font-weight: var(--clr-modal-title-font-weight, 200); + line-height: 1.2rem; + letter-spacing: normal; + margin: 0; + padding: 0 0.15rem; +} +.modal-header .close, +.modal-header--accessible .close { + margin-top: -0.05rem; + margin-right: -0.25rem; + font-size: 1.3rem; + line-height: 1.2rem; +} +.modal-header .close cds-icon, +.modal-header--accessible .close cds-icon { + fill: #8c8c8c; + fill: var(--clr-modal-close-color, #8c8c8c); + height: 1.2rem; + width: 1.2rem; +} +.modal-body { + max-height: 70vh; + overflow-y: auto; + overflow-x: hidden; + padding: 0 0.15rem; +} +.modal-body > :first-child { + margin-top: 0; +} +.modal-body > :last-child { + margin-bottom: 0; +} +.modal-footer { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + padding: 1.2rem 0 0 0; +} +.modal-footer .btn { + margin: 0 0 0 0.6rem; +} +@media screen and (max-width: 768px) and (orientation: landscape) { + .modal-body { + max-height: 55vh; + } +} +@media screen and (max-width: 576px) { + .modal-content { + padding: 0.6rem 0 0.6rem 1.2rem; + } + .modal-header, + .modal-header--accessible { + padding: 0 1.2rem 0.6rem 0; + } + .modal-body { + max-height: 55vh; + } + .modal-footer { + padding: 0.6rem 1.2rem 0 0; + } +} +.modal-backdrop { + position: fixed; + top: 0; + bottom: 0; + right: 0; + left: 0; + background-color: #333; + background-color: var(--clr-modal-backdrop-color, #333); + opacity: 0.85; + opacity: var(--clr-modal-backdrop-opacity, 0.85); + z-index: 1040; +} +.modal .modal-nav { + display: none; +} +:root { + --clr-header-bg-color: var(--clr-color-neutral-900); + --clr-header-divider-opacity: 0.15; + --clr-header-nav-opacity: 0.65; + --clr-header-nav-hover-opacity: 1; + --clr-header-2-bg-color: #485a6a; + --clr-header-3-bg-color: var(--clr-color-secondary-action-1000); + --clr-header-4-bg-color: #247bae; + --clr-header-5-bg-color: var(--clr-color-action-800); + --clr-header-6-bg-color: var(--clr-color-action-1000); + --clr-header-7-bg-color: #304250; + --clr-header-font-color: var(--clr-color-neutral-50); + --clr-header-title-color: var(--clr-header-font-color); + --clr-header-title-font-weight: var(--clr-h5-font-weight); + --clr-header-title-font-family: var(--clr-h5-font-family); +} +.header, +header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + color: #fafafa; + color: var(--clr-header-font-color, #fafafa); + background-color: #333; + background-color: var(--clr-header-bg-color, #333); + height: 3rem; + white-space: nowrap; +} +.header.header-1, +header.header-1 { + background-color: #333; + background-color: var(--clr-header-bg-color, #333); +} +.header.header-2, +header.header-2 { + background-color: #485a6a; + background-color: var(--clr-header-2-bg-color, #485a6a); +} +.header.header-3, +header.header-3 { + background-color: #320047; + background-color: var(--clr-header-3-bg-color, #320047); +} +.header.header-4, +header.header-4 { + background-color: #247bae; + background-color: var(--clr-header-4-bg-color, #247bae); +} +.header.header-5, +header.header-5 { + background-color: #00567a; + background-color: var(--clr-header-5-bg-color, #00567a); +} +.header.header-6, +header.header-6 { + background-color: #00364d; + background-color: var(--clr-header-6-bg-color, #00364d); +} +.header.header-7, +header.header-7 { + background-color: #304250; + background-color: var(--clr-header-7-bg-color, #304250); +} +.header .branding, +header .branding { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + min-width: 10.2rem; + padding: 0 1.2rem; + height: 3rem; +} +.header .branding > .nav-link, +.header .branding > a, +header .branding > .nav-link, +header .branding > a { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 3rem; +} +.header .branding > .nav-link:active, +.header .branding > .nav-link:hover, +.header .branding > a:active, +.header .branding > a:hover, +header .branding > .nav-link:active, +header .branding > .nav-link:hover, +header .branding > a:active, +header .branding > a:hover { + text-decoration: none; +} +.header .branding > .nav-link:focus, +.header .branding > a:focus, +header .branding > .nav-link:focus, +header .branding > a:focus { + outline-offset: -0.25rem; +} +.header .branding .clr-icon, +.header .branding cds-icon, +header .branding .clr-icon, +header .branding cds-icon { + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + height: 1.8rem; + width: 1.8rem; + margin-right: 0.45rem; +} +.header .branding .title, +header .branding .title { + color: #fafafa; + color: var(--clr-header-title-color, #fafafa); + font-weight: 400; + font-weight: var(--clr-header-title-font-weight, 400); + font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif; + font-family: var( + --clr-header-title-font-family, + Metropolis, + "Avenir Next", + "Helvetica Neue", + Arial, + sans-serif + ); + font-size: 0.8rem; + letter-spacing: 0.01em; + line-height: 3rem; + text-decoration: none; +} +.header .header-actions, +.header .header-nav, +.header .settings, +header .header-actions, +header .header-nav, +header .settings { + height: 3rem; +} +.header .header-actions .nav-text, +.header .header-nav .nav-text, +.header .settings .nav-text, +header .header-actions .nav-text, +header .header-nav .nav-text, +header .settings .nav-text { + font-weight: 500; +} +.header .header-actions cds-icon, +.header .header-nav cds-icon, +.header .settings cds-icon, +header .header-actions cds-icon, +header .header-nav cds-icon, +header .settings cds-icon { + color: #fafafa; + color: var(--clr-header-font-color, #fafafa); +} +.header .header-actions .nav-icon, +.header .header-nav .nav-icon, +.header .settings .nav-icon, +header .header-actions .nav-icon, +header .header-nav .nav-icon, +header .settings .nav-icon { + height: 3rem; + width: 3rem; +} +.header .header-actions .nav-link, +.header .header-nav .nav-link, +.header .settings .nav-link, +header .header-actions .nav-link, +header .header-nav .nav-link, +header .settings .nav-link { + position: relative; + display: inline-block; + text-align: center; + padding: 0.9rem 1.2rem; + color: #fafafa; + color: var(--clr-header-font-color, #fafafa); + opacity: 0.65; + opacity: var(--clr-header-nav-opacity, 0.65); +} +.header .header-actions .nav-link:active, +.header .header-actions .nav-link:hover, +.header .header-nav .nav-link:active, +.header .header-nav .nav-link:hover, +.header .settings .nav-link:active, +.header .settings .nav-link:hover, +header .header-actions .nav-link:active, +header .header-actions .nav-link:hover, +header .header-nav .nav-link:active, +header .header-nav .nav-link:hover, +header .settings .nav-link:active, +header .settings .nav-link:hover { + text-decoration: none; +} +.header .header-actions .nav-link:enabled:hover, +.header .header-nav .nav-link:enabled:hover, +.header .settings .nav-link:enabled:hover, +header .header-actions .nav-link:enabled:hover, +header .header-nav .nav-link:enabled:hover, +header .settings .nav-link:enabled:hover { + opacity: 1; + opacity: var(--clr-header-nav-hover-opacity, 1); +} +.header .header-actions .nav-link:disabled, +.header .header-nav .nav-link:disabled, +.header .settings .nav-link:disabled, +header .header-actions .nav-link:disabled, +header .header-nav .nav-link:disabled, +header .settings .nav-link:disabled { + cursor: not-allowed; +} +.header .header-actions .nav-link .fa, +.header .header-actions .nav-link .nav-icon, +.header .header-nav .nav-link .fa, +.header .header-nav .nav-link .nav-icon, +.header .settings .nav-link .fa, +.header .settings .nav-link .nav-icon, +header .header-actions .nav-link .fa, +header .header-actions .nav-link .nav-icon, +header .header-nav .nav-link .fa, +header .header-nav .nav-link .nav-icon, +header .settings .nav-link .fa, +header .settings .nav-link .nav-icon { + font-size: 1.1rem; +} +.header .header-actions .nav-link cds-icon, +.header .header-nav .nav-link cds-icon, +.header .settings .nav-link cds-icon, +header .header-actions .nav-link cds-icon, +header .header-nav .nav-link cds-icon, +header .settings .nav-link cds-icon { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + height: 1.2rem; + width: 1.2rem; +} +.header .header-actions .nav-link.nav-icon-text cds-icon, +.header .header-nav .nav-link.nav-icon-text cds-icon, +.header .settings .nav-link.nav-icon-text cds-icon, +header .header-actions .nav-link.nav-icon-text cds-icon, +header .header-nav .nav-link.nav-icon-text cds-icon, +header .settings .nav-link.nav-icon-text cds-icon { + position: relative; + top: auto; + left: auto; + -webkit-transform: none; + transform: none; + margin-left: 1.2rem; +} +.header .header-actions .nav-link.nav-icon-text .nav-text, +.header .header-nav .nav-link.nav-icon-text .nav-text, +.header .settings .nav-link.nav-icon-text .nav-text, +header .header-actions .nav-link.nav-icon-text .nav-text, +header .header-nav .nav-link.nav-icon-text .nav-text, +header .settings .nav-link.nav-icon-text .nav-text { + margin-left: 0; + padding-left: 0.3rem; +} +.header .header-actions .nav-link .nav-icon + .nav-text, +.header .header-nav .nav-link .nav-icon + .nav-text, +.header .settings .nav-link .nav-icon + .nav-text, +header .header-actions .nav-link .nav-icon + .nav-text, +header .header-nav .nav-link .nav-icon + .nav-text, +header .settings .nav-link .nav-icon + .nav-text { + display: none; +} +.header .header-actions .nav-link.active, +.header .header-nav .nav-link.active, +.header .settings .nav-link.active, +header .header-actions .nav-link.active, +header .header-nav .nav-link.active, +header .settings .nav-link.active { + background: rgba(255, 255, 255, 0.15); + opacity: 1; +} +.header .header-actions .nav-link:focus, +.header .header-nav .nav-link:focus, +.header .settings .nav-link:focus, +header .header-actions .nav-link:focus, +header .header-nav .nav-link:focus, +header .settings .nav-link:focus { + outline-offset: -0.25rem; +} +.header .header-nav, +header .header-nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} +.header .header-nav:last-child > .nav-link:last-child::after, +header .header-nav:last-child > .nav-link:last-child::after { + content: none; +} +.header .header-nav .nav-link:first-of-type, +.header .header-nav .nav-link:last-of-type, +header .header-nav .nav-link:first-of-type, +header .header-nav .nav-link:last-of-type { + position: relative; +} +.header .header-nav .nav-link:first-of-type::before, +.header .header-nav .nav-link:last-of-type::after, +header .header-nav .nav-link:first-of-type::before, +header .header-nav .nav-link:last-of-type::after { + display: inline-block; + position: absolute; + content: ""; + background: #fafafa; + background: var(--clr-header-font-color, #fafafa); + opacity: 0.15; + opacity: var(--clr-header-divider-opacity, 0.15); + opacity: 0.15; + height: 2rem; + width: 0.05rem; + width: var(--clr-global-borderwidth, 0.05rem); + top: 0.5rem; + left: 0; + left: auto; +} +.header .header-nav .nav-link:first-of-type::before, +header .header-nav .nav-link:first-of-type::before { + left: 0; +} +.header .header-nav .nav-link:last-of-type::after, +header .header-nav .nav-link:last-of-type::after { + right: 0; +} +.header .header-nav .nav-link.active:first-of-type::before, +.header .header-nav .nav-link.active:last-of-type::after, +header .header-nav .nav-link.active:first-of-type::before, +header .header-nav .nav-link.active:last-of-type::after { + content: none; +} +.header .header-actions, +.header .settings, +header .header-actions, +header .settings { + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; +} +.header .header-actions > .dropdown > .dropdown-toggle, +.header .settings > .dropdown > .dropdown-toggle, +header .header-actions > .dropdown > .dropdown-toggle, +header .settings > .dropdown > .dropdown-toggle { + position: relative; + line-height: 3rem; + height: 3rem; + outline-offset: -0.25rem; + color: #fafafa; + color: var(--clr-header-font-color, #fafafa); + opacity: 0.65; + opacity: var(--clr-header-nav-opacity, 0.65); +} +.header .header-actions > .dropdown > .dropdown-toggle:enabled:hover, +.header .settings > .dropdown > .dropdown-toggle:enabled:hover, +header .header-actions > .dropdown > .dropdown-toggle:enabled:hover, +header .settings > .dropdown > .dropdown-toggle:enabled:hover { + opacity: 1; + opacity: var(--clr-header-nav-hover-opacity, 1); +} +.header .header-actions > .dropdown > .dropdown-toggle:disabled, +.header .settings > .dropdown > .dropdown-toggle:disabled, +header .header-actions > .dropdown > .dropdown-toggle:disabled, +header .settings > .dropdown > .dropdown-toggle:disabled { + cursor: not-allowed; +} +.header + .header-actions + > .dropdown + .dropdown-toggle.nav-icon + cds-icon:not([shape^="angle"]), +.header + .settings + > .dropdown + .dropdown-toggle.nav-icon + cds-icon:not([shape^="angle"]), +header + .header-actions + > .dropdown + .dropdown-toggle.nav-icon + cds-icon:not([shape^="angle"]), +header + .settings + > .dropdown + .dropdown-toggle.nav-icon + cds-icon:not([shape^="angle"]) { + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + height: 1.1rem; + width: 1.1rem; + right: 1.2rem; +} +.header + .header-actions + > .dropdown + .dropdown-toggle.nav-icon + cds-icon[shape^="angle"], +.header + .settings + > .dropdown + .dropdown-toggle.nav-icon + cds-icon[shape^="angle"], +header + .header-actions + > .dropdown + .dropdown-toggle.nav-icon + cds-icon[shape^="angle"], +header + .settings + > .dropdown + .dropdown-toggle.nav-icon + cds-icon[shape^="angle"] { + right: 0.6rem; +} +.header .header-actions > .dropdown .dropdown-toggle.nav-text, +.header .settings > .dropdown .dropdown-toggle.nav-text, +header .header-actions > .dropdown .dropdown-toggle.nav-text, +header .settings > .dropdown .dropdown-toggle.nav-text { + padding: 0 1.8rem 0 1.2rem; +} +.header + .header-actions + > .dropdown + .dropdown-toggle.nav-text + cds-icon[shape^="angle"], +.header + .settings + > .dropdown + .dropdown-toggle.nav-text + cds-icon[shape^="angle"], +header + .header-actions + > .dropdown + .dropdown-toggle.nav-text + cds-icon[shape^="angle"], +header + .settings + > .dropdown + .dropdown-toggle.nav-text + cds-icon[shape^="angle"] { + right: 1.2rem; +} +.header .header-actions > .dropdown .dropdown-toggle.nav-icon, +.header .settings > .dropdown .dropdown-toggle.nav-icon, +header .header-actions > .dropdown .dropdown-toggle.nav-icon, +header .settings > .dropdown .dropdown-toggle.nav-icon { + width: 3rem; + padding-right: 0; +} +.header .header-actions > .dropdown.bottom-left > .dropdown-menu, +.header .header-actions > .dropdown.bottom-right > .dropdown-menu, +.header .settings > .dropdown.bottom-left > .dropdown-menu, +.header .settings > .dropdown.bottom-right > .dropdown-menu, +header .header-actions > .dropdown.bottom-left > .dropdown-menu, +header .header-actions > .dropdown.bottom-right > .dropdown-menu, +header .settings > .dropdown.bottom-left > .dropdown-menu, +header .settings > .dropdown.bottom-right > .dropdown-menu { + top: 85%; +} +.header .header-actions > .dropdown:last-child.bottom-right > .dropdown-menu, +.header .settings > .dropdown:last-child.bottom-right > .dropdown-menu, +header .header-actions > .dropdown:last-child.bottom-right > .dropdown-menu, +header .settings > .dropdown:last-child.bottom-right > .dropdown-menu { + right: 0.15rem; +} +.header .header-actions > .dropdown .dropdown-menu, +.header .settings > .dropdown .dropdown-menu, +header .header-actions > .dropdown .dropdown-menu, +header .settings > .dropdown .dropdown-menu { + margin-top: -0.2rem; + left: auto; + right: 0; +} +.header .header-actions > .dropdown :last-child.dropdown-menu, +.header .settings > .dropdown :last-child.dropdown-menu, +header .header-actions > .dropdown :last-child.dropdown-menu, +header .settings > .dropdown :last-child.dropdown-menu { + margin-right: 0.4rem; +} +.header .search, +.header .search-box, +header .search, +header .search-box { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + max-width: 14.4rem; + padding: 0; + height: 3rem; + color: #fafafa; + color: var(--clr-header-font-color, #fafafa); + opacity: 0.65; + opacity: var(--clr-header-nav-opacity, 0.65); +} +.header .search-box:enabled:hover, +.header .search:enabled:hover, +header .search-box:enabled:hover, +header .search:enabled:hover { + opacity: 1; + opacity: var(--clr-header-nav-hover-opacity, 1); +} +.header .search-box:disabled, +.header .search:disabled, +header .search-box:disabled, +header .search:disabled { + cursor: not-allowed; +} +.header .search-box > .nav-icon, +.header .search > .nav-icon, +header .search-box > .nav-icon, +header .search > .nav-icon { + margin: 0 0.3rem 0.15rem 1.2rem; +} +.header .search label, +.header .search-box label, +header .search label, +header .search-box label { + display: inline-block; + height: 3rem; + line-height: 3rem; + padding-left: 1.2rem; + text-align: center; +} +.header .search label::before, +.header .search-box label::before, +header .search label::before, +header .search-box label::before { + display: inline-block; + content: ""; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2036%2036%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23ffffff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3ESearch%3C%2Ftitle%3E%3Cg%20id%3D%22icons%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M15%2C4.05A10.95%2C10.95%2C0%2C1%2C1%2C4.05%2C15%2C11%2C11%2C0%2C0%2C1%2C15%2C4.05M15%2C2A13%2C13%2C0%2C1%2C0%2C28%2C15%2C13%2C13%2C0%2C0%2C0%2C15%2C2Z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20%20d%3D%22M33.71%2C32.29l-7.37-7.42-1.42%2C1.41%2C7.37%2C7.42a1%2C1%2C0%2C1%2C0%2C1.42-1.41Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); + background-repeat: no-repeat; + background-size: contain; + cursor: pointer; + height: 1rem; + width: 1rem; + margin: 1rem 0 0; + vertical-align: top; +} +.header .search label input, +.header .search-box label input, +header .search label input, +header .search-box label input { + line-height: 1.2rem; + margin: 0.9rem 0; +} +.header .search input[type="text"], +.header .search-box input[type="text"], +header .search input[type="text"], +header .search-box input[type="text"] { + border: none; + background: 0 0; + color: #fafafa; + color: var(--clr-header-font-color, #fafafa); + padding: 0; + vertical-align: middle; +} +.header .search input[type="text"]:active, +.header .search input[type="text"]:focus, +.header .search-box input[type="text"]:active, +.header .search-box input[type="text"]:focus, +header .search input[type="text"]:active, +header .search input[type="text"]:focus, +header .search-box input[type="text"]:active, +header .search-box input[type="text"]:focus { + background: 0 0; +} +.header .branding + .search, +.header .branding + .search-box, +header .branding + .search, +header .branding + .search-box { + position: relative; +} +.header .branding + .search-box::after, +.header .branding + .search::after, +header .branding + .search-box::after, +header .branding + .search::after { + display: inline-block; + position: absolute; + content: ""; + background: #fafafa; + background: var(--clr-header-font-color, #fafafa); + opacity: 0.15; + opacity: var(--clr-header-divider-opacity, 0.15); + opacity: 0.15; + height: 2rem; + width: 0.05rem; + width: var(--clr-global-borderwidth, 0.05rem); + top: 0.5rem; + left: 0; +} +@media screen and (max-width: 768px) { + .header .search, + .header .search-box, + header .search, + header .search-box { + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + max-width: none; + } + .header .search label, + .header .search-box label, + header .search label, + header .search-box label { + padding: 0; + width: 3rem; + } + .header .search label::before, + .header .search-box label::before, + header .search label::before, + header .search-box label::before { + left: 1rem; + } + .header .search label input, + .header .search-box label input, + header .search label input, + header .search-box label input { + display: none; + } + .header .branding + .search-box::after, + .header .branding + .search::after, + header .branding + .search-box::after, + header .branding + .search::after { + content: none; + } + .header .search + .header-actions, + .header .search + .settings, + .header .search-box + .header-actions, + .header .search-box + .settings, + header .search + .header-actions, + header .search + .settings, + header .search-box + .header-actions, + header .search-box + .settings { + position: relative; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + } + .header .search + .header-actions::after, + .header .search + .settings::after, + .header .search-box + .header-actions::after, + .header .search-box + .settings::after, + header .search + .header-actions::after, + header .search + .settings::after, + header .search-box + .header-actions::after, + header .search-box + .settings::after { + display: inline-block; + position: absolute; + content: ""; + background: #fafafa; + background: var(--clr-header-font-color, #fafafa); + opacity: 0.15; + opacity: var(--clr-header-divider-opacity, 0.15); + opacity: 0.15; + height: 2rem; + width: 0.05rem; + width: var(--clr-global-borderwidth, 0.05rem); + top: 0.5rem; + left: 0; + } +} +a.link-normal:link { + color: #0072a3; + color: var(--clr-link-color, #0072a3); + text-decoration: none; +} +a.link-hovered:link { + color: #0072a3; + color: var(--clr-link-hover-color, #0072a3); + text-decoration: underline; +} +a.link-clicked:link { + color: #9e57bc; + color: var(--clr-link-active-color, #9e57bc); + text-decoration: underline; +} +a.link-visited:link { + color: #5659b8; + color: var(--clr-link-visited-color, #5659b8); + text-decoration: none; +} +.nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + height: 1.8rem; + list-style-type: none; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-shadow: 0 -0.05rem 0 #ccc inset; + box-shadow: 0 -0.05rem 0 #ccc inset; + margin: 0; + width: 100%; + white-space: nowrap; +} +.nav .nav-item { + display: inline-block; + margin-right: 1.2rem; +} +.nav .nav-item.active > .nav-link { + color: #000; + color: var(--clr-nav-link-active-color, #000); + -webkit-box-shadow: 0 -0.05rem 0 #ccc inset; + box-shadow: 0 -0.05rem 0 #ccc inset; + -webkit-box-shadow: 0 -0.05rem 0 var(--clr-nav-box-shadow-color, #ccc) inset; + box-shadow: 0 -0.05rem 0 var(--clr-nav-box-shadow-color, #ccc) inset; +} +.nav .nav-link { + color: #8c8c8c; + color: var(--clr-nav-link-color, #8c8c8c); + font-size: 0.7rem; + font-weight: 400; + font-weight: var(--clr-nav-link-font-weight, 400); + letter-spacing: normal; + line-height: 1.8rem; + display: inline-block; + padding: 0 0.15rem; + -webkit-box-shadow: none; + box-shadow: none; +} +.nav .nav-link.btn { + text-transform: none; + margin: 0; + margin-bottom: -0.05rem; + border-radius: 0; +} +.nav .nav-link:active, +.nav .nav-link:focus, +.nav .nav-link:hover { + color: inherit; +} +.nav .nav-link.active, +.nav .nav-link:hover { + -webkit-box-shadow: 0 -0.15rem 0 #0072a3 inset; + box-shadow: 0 -0.15rem 0 #0072a3 inset; + -webkit-box-shadow: 0 -0.15rem 0 var( + --clr-nav-active-box-shadow-color, + #0072a3 + ) inset; + box-shadow: 0 -0.15rem 0 var(--clr-nav-active-box-shadow-color, #0072a3) inset; + -webkit-transition: -webkit-box-shadow 0.2s ease-in; + transition: -webkit-box-shadow 0.2s ease-in; + transition: box-shadow 0.2s ease-in; + transition: box-shadow 0.2s ease-in, -webkit-box-shadow 0.2s ease-in; +} +.nav .nav-link.active, +.nav .nav-link:active, +.nav .nav-link:focus, +.nav .nav-link:hover { + text-decoration: none; +} +.nav .nav-link.active { + color: #000; + color: var(--clr-nav-link-active-color, #000); + font-weight: 400; + font-weight: var(--clr-nav-link-active-font-weight, 400); +} +.nav .nav-link.nav-item { + margin-right: 1.2rem; +} +:root { + --clr-subnav-bg-color: var(--clr-color-neutral-0); + --clr-nav-box-shadow-color: var(--clr-color-neutral-400); +} +.sub-nav, +.subnav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-shadow: 0 -0.05rem 0 #ccc inset; + box-shadow: 0 -0.05rem 0 #ccc inset; + -webkit-box-shadow: 0 -0.05rem 0 var(--clr-nav-box-shadow-color, #ccc) inset; + box-shadow: 0 -0.05rem 0 var(--clr-nav-box-shadow-color, #ccc) inset; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #fff; + background-color: var(--clr-subnav-bg-color, #fff); + height: 1.8rem; +} +.sub-nav .nav, +.subnav .nav { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + padding-left: 1.2rem; +} +.sub-nav aside, +.subnav aside { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 1.8rem; + padding: 0 1.2rem; +} +.sub-nav aside > :last-child, +.subnav aside > :last-child { + margin-right: 0; + padding-right: 0; +} +:root { + --clr-sidenav-border-color: var(--clr-color-neutral-400); + --clr-sidenav-border-width: var(--clr-global-borderwidth); + --clr-sidenav-link-hover-color: var(--clr-color-neutral-200); + --clr-sidenav-link-active-color: var(--clr-color-neutral-1000); + --clr-sidenav-link-active-bg-color: var(--clr-global-selection-color); + --clr-sidenav-link-active-border-radius: var(--clr-global-borderradius); + --clr-sidenav-header-color: var(--clr-h6-color); + --clr-sidenav-header-font-weight: var(--clr-h6-font-weight); + --clr-sidenav-header-font-family: var(--clr-h6-font-family); + --clr-sidenav-color: var(--clr-p1-color); + --clr-sidenav-font-weight: var(--clr-p1-font-weight); +} +.sidenav { + line-height: 1.2rem; + max-width: 15.6rem; + min-width: 10.8rem; + width: 18%; + border-right: 0.05rem solid #ccc; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +.sidenav .sidenav-content { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + overflow-x: hidden; + padding-bottom: 1.2rem; +} +.sidenav .sidenav-content .nav-link { + border-radius: 0; + border-top-left-radius: 0.15rem; + border-top-left-radius: var( + --clr-sidenav-link-active-border-radius, + 0.15rem + ); + border-bottom-left-radius: 0.15rem; + border-bottom-left-radius: var( + --clr-sidenav-link-active-border-radius, + 0.15rem + ); + display: inline-block; + color: inherit; + cursor: pointer; + text-decoration: none; + width: 100%; +} +.sidenav .sidenav-content > .nav-link { + margin: 1.2rem 0 0 1.5rem; + padding-left: 0.6rem; + color: #333; + color: var(--clr-sidenav-header-color, #333); + font-weight: 500; + font-weight: var(--clr-sidenav-header-font-weight, 500); + font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif; + font-family: var( + --clr-sidenav-header-font-family, + Metropolis, + "Avenir Next", + "Helvetica Neue", + Arial, + sans-serif + ); + font-size: 0.7rem; + line-height: 1.2rem; + letter-spacing: normal; +} +.sidenav .sidenav-content > .nav-link:hover { + background: #e8e8e8; + background: var(--clr-sidenav-link-hover-color, #e8e8e8); +} +.sidenav .sidenav-content > .nav-link.active { + background: #d8e3e9; + background: var(--clr-sidenav-link-active-bg-color, #d8e3e9); + color: #000; + color: var(--clr-sidenav-link-active-color, #000); +} +.sidenav .nav-group { + color: #666; + color: var(--clr-sidenav-color, #666); + font-weight: 400; + font-weight: var(--clr-sidenav-font-weight, 400); + font-size: 0.7rem; + letter-spacing: normal; + margin-top: 1.2rem; + width: 100%; +} +.sidenav .nav-group .nav-list, +.sidenav .nav-group label { + padding: 0 0 0 1.8rem; + cursor: pointer; + display: inline-block; + width: 100%; + margin: 0 0.3rem; +} +.sidenav .nav-group .nav-list { + list-style: none; + margin-top: 0; +} +.sidenav .nav-group .nav-list .nav-link { + line-height: 0.8rem; + padding: 0.2rem 0 0.2rem 0.6rem; +} +.sidenav .nav-group .nav-list .nav-link:hover { + background: #e8e8e8; + background: var(--clr-sidenav-link-hover-color, #e8e8e8); +} +.sidenav .nav-group .nav-list .nav-link.active { + background: #d8e3e9; + background: var(--clr-sidenav-link-active-bg-color, #d8e3e9); + color: #000; + color: var(--clr-sidenav-link-active-color, #000); +} +.sidenav .nav-group label { + color: #333; + color: var(--clr-sidenav-header-color, #333); + font-weight: 500; + font-weight: var(--clr-sidenav-header-font-weight, 500); + font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif; + font-family: var( + --clr-sidenav-header-font-family, + Metropolis, + "Avenir Next", + "Helvetica Neue", + Arial, + sans-serif + ); + font-size: 0.7rem; + line-height: 1.2rem; + letter-spacing: normal; +} +.sidenav .nav-group input[type="checkbox"] { + position: absolute; + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + padding: 0; + border: 0; + height: 1px; + width: 1px; + overflow: hidden; + white-space: nowrap; + top: 0; + left: 0; +} +.sidenav .nav-group input[type="checkbox"]:focus + label { + outline: #3b99fc auto 0.25rem; +} +.sidenav .collapsible label { + padding: 0 0 0 1.3rem; +} +.sidenav .collapsible label:after { + content: ""; + float: left; + height: 0.5rem; + width: 0.5rem; + -webkit-transform: translateX(-0.4rem) translateY(0.35rem); + transform: translateX(-0.4rem) translateY(0.35rem); + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%3E.cls-1%7Bfill%3A%239a9a9a%3B%7D%3C%2Fstyle%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M6%2C9L1.2%2C4.2a0.68%2C0.68%2C0%2C0%2C1%2C1-1L6%2C7.08%2C9.84%2C3.24a0.68%2C0.68%2C0%2C1%2C1%2C1%2C1Z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); + background-repeat: no-repeat; + background-size: contain; + vertical-align: middle; + margin: 0; +} +.sidenav .collapsible input[type="checkbox"]:checked ~ .nav-list, +.sidenav .collapsible input[type="checkbox"]:checked ~ ul { + height: 0; + display: none; +} +.sidenav .collapsible input[type="checkbox"] ~ .nav-list, +.sidenav .collapsible input[type="checkbox"] ~ ul { + height: auto; +} +.sidenav .collapsible input[type="checkbox"]:checked ~ label:after { + -webkit-transform: rotate(-90deg) translateX(-0.35rem) translateY(-0.4rem); + transform: rotate(-90deg) translateX(-0.35rem) translateY(-0.4rem); +} +:root { + --clr-vertical-nav-divider-color: var(--clr-color-neutral-700); + --clr-vertical-nav-icon-active-color: var(--clr-color-action-600); + --clr-vertical-nav-item-color: var(--clr-color-neutral-700); + --clr-vertical-nav-item-active-color: var(--clr-color-neutral-700); + --clr-vertical-nav-bg-color: var(--clr-color-neutral-200); + --clr-vertical-nav-active-bg-color: var(--clr-color-neutral-0); + --clr-vertical-nav-hover-bg-color: var(--clr-color-neutral-400); + --clr-vertical-nav-toggle-icon-color: var(--clr-color-neutral-1000); + --clr-vertical-nav-trigger-divider-border-width: var( + --clr-global-borderwidth + ); + --clr-vertical-nav-trigger-divider-border-color: var( + --clr-color-neutral-400 + ); + --clr-vertical-nav-header-font-weight: var(--clr-p4-font-weight); +} +.clr-vertical-nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + padding-top: 0.9rem; + width: 12rem; + min-width: 2.4rem; + background-color: #e8e8e8; + background-color: var(--clr-vertical-nav-bg-color, #e8e8e8); + will-change: width; + -webkit-transition: width 0.2s ease-in-out; + transition: width 0.2s ease-in-out; +} +.clr-vertical-nav .nav-divider { + border-color: #ccc; + border-color: var(--clr-vertical-nav-trigger-divider-border-color, #ccc); + border-style: solid; + border-width: 0.05rem; + border-width: var(--clr-vertical-nav-trigger-divider-border-width, 0.05rem); + margin: 0.6rem 0; +} +.clr-vertical-nav .nav-content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + overflow-y: auto; + overflow-x: hidden; +} +.clr-vertical-nav .nav-group { + display: block; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + height: auto; + min-height: 1.8rem; +} +.clr-vertical-nav .nav-group-content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + color: #666; + color: var(--clr-vertical-nav-item-color, #666); +} +.clr-vertical-nav .nav-group-content.active { + color: #666; + color: var(--clr-vertical-nav-item-active-color, #666); + background-color: #fff; + background-color: var(--clr-vertical-nav-active-bg-color, #fff); +} +.clr-vertical-nav .nav-group-content.active .nav-icon { + fill: #0072a3; + fill: var(--clr-vertical-nav-icon-active-color, #0072a3); +} +.clr-vertical-nav .nav-group-content:hover { + color: #666; + color: var(--clr-vertical-nav-item-active-color, #666); + background-color: #ccc; + background-color: var(--clr-vertical-nav-hover-bg-color, #ccc); + text-decoration: none; +} +.clr-vertical-nav .nav-group-content .nav-link { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + padding-left: 0; + min-width: 0; +} +.clr-vertical-nav .nav-group-content .nav-icon { + margin-left: 1.2rem; +} +.clr-vertical-nav .nav-group-content .nav-text { + padding-left: 1.2rem; +} +.clr-vertical-nav .nav-group-content .nav-icon + .nav-text { + padding-left: 0; +} +.clr-vertical-nav .nav-group-content .nav-link + .nav-group-text { + display: none; +} +.clr-vertical-nav .nav-group-trigger, +.clr-vertical-nav .nav-trigger { + -webkit-box-flex: 0; + -ms-flex: 0 0 1.8rem; + flex: 0 0 1.8rem; + border: none; + height: 1.8rem; + padding: 0; + background-color: transparent; + cursor: pointer; + outline-offset: -0.25rem; +} +.clr-vertical-nav .nav-group-trigger cds-icon[shape="angle-double"], +.clr-vertical-nav .nav-trigger cds-icon[shape="angle-double"] { + color: #000; + color: var(--clr-vertical-nav-toggle-icon-color, #000); +} +.clr-vertical-nav .nav-trigger { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + height: 1.8rem; + margin-top: -0.9rem; +} +.clr-vertical-nav .nav-group-trigger { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + color: inherit; + overflow: hidden; + text-align: left; +} +.clr-vertical-nav .nav-group-trigger .nav-group-trigger-icon { + -ms-flex-negative: 0; + flex-shrink: 0; + width: 0.8rem; + height: 1.8rem; + -ms-flex-item-align: center; + align-self: center; + margin-left: 0.5rem; + margin-right: 0.5rem; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} +.clr-vertical-nav .nav-trigger-icon { + margin-left: auto; + margin-right: 0.5rem; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} +.clr-vertical-nav .nav-trigger + .nav-content { + border-top-color: #ccc; + border-top-color: var( + --clr-vertical-nav-trigger-divider-border-color, + #ccc + ); + border-top-style: solid; + border-top-width: 0.05rem; + border-top-width: var( + --clr-vertical-nav-trigger-divider-border-width, + 0.05rem + ); + padding-top: 0.6rem; +} +.clr-vertical-nav .nav-group-text, +.clr-vertical-nav .nav-link { + height: 1.8rem; + padding: 0 0.6rem 0 1.2rem; + line-height: 1.8rem; + outline-offset: -0.25rem; +} +.clr-vertical-nav .nav-group-text, +.clr-vertical-nav .nav-text { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.clr-vertical-nav .nav-link { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + color: #666; + color: var(--clr-vertical-nav-item-color, #666); +} +.clr-vertical-nav .nav-link.active { + color: #666; + color: var(--clr-vertical-nav-item-active-color, #666); + background-color: #fff; + background-color: var(--clr-vertical-nav-active-bg-color, #fff); +} +.clr-vertical-nav .nav-link.active .nav-icon { + fill: #0072a3; + fill: var(--clr-vertical-nav-icon-active-color, #0072a3); +} +.clr-vertical-nav .nav-link:hover { + color: #666; + color: var(--clr-vertical-nav-item-active-color, #666); + background-color: #ccc; + background-color: var(--clr-vertical-nav-hover-bg-color, #ccc); + text-decoration: none; +} +.clr-vertical-nav .nav-header { + padding: 0 0.6rem 0 1.2rem; + font-size: 0.6rem; + font-weight: 600; + font-weight: var(--clr-vertical-nav-header-font-weight, 600); + letter-spacing: normal; + line-height: 1.8rem; +} +.clr-vertical-nav .nav-icon { + -webkit-box-flex: 0; + -ms-flex: 0 0 0.8rem; + flex: 0 0 0.8rem; + -ms-flex-item-align: center; + align-self: center; + height: 0.8rem; + width: 0.8rem; + margin-right: 0.3rem; + vertical-align: middle; +} +.clr-vertical-nav clr-vertical-nav-group-children { + display: block; +} +.clr-vertical-nav .nav-btn { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + padding: 0; + margin: 0; + background: 0 0; + border: none; + cursor: pointer; + outline-offset: -0.25rem; +} +.clr-vertical-nav .nav-content > .nav-link, +.clr-vertical-nav > .nav-link { + -webkit-box-flex: 0; + -ms-flex: 0 0 1.8rem; + flex: 0 0 1.8rem; +} +.clr-vertical-nav .nav-link + .nav-group-trigger { + -webkit-box-flex: 0; + -ms-flex: 0 0 1.8rem; + flex: 0 0 1.8rem; +} +.clr-vertical-nav .nav-link + .nav-group-trigger .nav-group-text { + display: none; +} +.clr-vertical-nav .nav-icon + .nav-group-text { + padding-left: 0; +} +.clr-vertical-nav.has-nav-groups .nav-group .nav-group-text, +.clr-vertical-nav.has-nav-groups .nav-group .nav-group-trigger, +.clr-vertical-nav.has-nav-groups .nav-link { + font-weight: 600; +} +.clr-vertical-nav.has-nav-groups .nav-group-children .nav-link { + font-weight: 400; +} +.clr-vertical-nav.has-icons .nav-group-children .nav-link { + padding-left: 2.3rem; +} +.clr-vertical-nav .nav-group.active:not(.is-expanded) .nav-group-content { + background-color: #fff; + background-color: var(--clr-vertical-nav-active-bg-color, #fff); +} +.clr-vertical-nav + .nav-group.active:not(.is-expanded) + .nav-group-content + .nav-icon { + fill: #0072a3; + fill: var(--clr-vertical-nav-icon-active-color, #0072a3); +} +.clr-vertical-nav .nav-group-content .nav-link.active ~ .nav-group-trigger { + background-color: #fff; + background-color: var(--clr-vertical-nav-active-bg-color, #fff); +} +.clr-vertical-nav .nav-group-content .nav-link:hover ~ .nav-group-trigger { + background-color: #ccc; + background-color: var(--clr-vertical-nav-hover-bg-color, #ccc); +} +.clr-vertical-nav:not(.is-collapsed) .nav-link + .nav-group-trigger { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +.main-container:not([class*="open-overflow-menu"]):not([class*="open-hamburger-menu"]) + .clr-vertical-nav.is-collapsed { + width: 2.4rem; + min-width: 2.4rem; + cursor: pointer; +} +.main-container:not([class*="open-overflow-menu"]):not([class*="open-hamburger-menu"]) + .clr-vertical-nav.is-collapsed + .nav-trigger { + margin-right: 0.15rem; +} +.main-container:not([class*="open-overflow-menu"]):not([class*="open-hamburger-menu"]) + .clr-vertical-nav.is-collapsed + .nav-icon { + margin: 0; + margin-left: 0.8rem; +} +.main-container:not([class*="open-overflow-menu"]):not([class*="open-hamburger-menu"]) + .clr-vertical-nav.is-collapsed + .nav-group-content + .nav-link { + -webkit-box-flex: 0; + -ms-flex: 0 0 2.4rem; + flex: 0 0 2.4rem; +} +.main-container:not([class*="open-overflow-menu"]):not([class*="open-hamburger-menu"]) + .clr-vertical-nav.is-collapsed + .nav-group-content + .nav-link + ~ .nav-group-trigger { + -webkit-box-flex: 0; + -ms-flex: 0 0 0.8rem; + flex: 0 0 0.8rem; + -webkit-transform: translateX(-0.8rem); + transform: translateX(-0.8rem); + pointer-events: none; +} +.main-container:not([class*="open-overflow-menu"]):not([class*="open-hamburger-menu"]) + .clr-vertical-nav.is-collapsed + .nav-group-trigger, +.main-container:not([class*="open-overflow-menu"]):not([class*="open-hamburger-menu"]) + .clr-vertical-nav.is-collapsed + .nav-link { + padding: 0; +} +.main-container:not([class*="open-overflow-menu"]):not([class*="open-hamburger-menu"]) + .clr-vertical-nav.is-collapsed + .nav-group-trigger { + padding-left: 0; +} +.main-container:not([class*="open-overflow-menu"]):not([class*="open-hamburger-menu"]) + .clr-vertical-nav.is-collapsed + .nav-group-trigger + .nav-group-trigger-icon { + height: 1.8rem; + width: 0.5rem; + margin-left: 0.15rem; + margin-right: 0; +} +.main-container:not([class*="open-overflow-menu"]):not([class*="open-hamburger-menu"]) + .clr-vertical-nav.is-collapsed + .nav-group, +.main-container:not([class*="open-overflow-menu"]):not([class*="open-hamburger-menu"]) + .clr-vertical-nav.is-collapsed + .nav-link { + display: none; +} +.main-container:not([class*="open-overflow-menu"]):not([class*="open-hamburger-menu"]) + .clr-vertical-nav.is-collapsed.has-icons + .nav-group { + display: block; +} +.main-container:not([class*="open-overflow-menu"]):not([class*="open-hamburger-menu"]) + .clr-vertical-nav.is-collapsed.has-icons + .nav-link { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.main-container:not([class*="open-overflow-menu"]):not([class*="open-hamburger-menu"]) + .clr-vertical-nav.is-collapsed.has-icons + .nav-group-text, +.main-container:not([class*="open-overflow-menu"]):not([class*="open-hamburger-menu"]) + .clr-vertical-nav.is-collapsed.has-icons + .nav-text { + display: none; +} +.clr-vertical-nav.nav-trigger--bottom .nav-trigger { + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; + margin-top: 0; +} +.clr-vertical-nav.nav-trigger--bottom .nav-trigger + .nav-content { + border-bottom-color: #ccc; + border-bottom-color: var( + --clr-vertical-nav-trigger-divider-border-color, + #ccc + ); + border-bottom-style: solid; + border-bottom-width: 0.05rem; + border-bottom-width: var( + --clr-vertical-nav-trigger-divider-border-width, + 0.05rem + ); + border-top: none; + padding-top: 0; +} +:root { + --clr-sliding-panel-text-color: var(--clr-color-neutral-700); + --clr-nav-background-color: var(--clr-color-neutral-200); + --clr-responsive-nav-hover-bg: var(--clr-color-neutral-0); + --clr-responsive-nav-trigger-bg-color: var(--clr-color-neutral-0); + --clr-responsive-nav-trigger-border-radius: var(--clr-global-borderradius); + --clr-responsive-nav-hamburger-border-radius: var( + --clr-responsive-nav-trigger-border-radius + ); + --clr-responsive-nav-overflow-border-radius: 0.2rem; + --clr-responsive-nav-header-backdrop-bg-color: var( + --clr-color-neutral-1000 + ); + --clr-responsive-nav-header-backdrop-opacity: 0.85; +} +.header-hamburger-trigger, +.header-overflow-trigger { + display: none; +} +.header-hamburger-trigger > span, +.header-hamburger-trigger > span::after, +.header-hamburger-trigger > span::before { + display: inline-block; + height: 0.1rem; + width: 1.2rem; + background: #fff; + background: var(--clr-responsive-nav-trigger-bg-color, #fff); + border-radius: 0.15rem; + border-radius: var(--clr-responsive-nav-hamburger-border-radius, 0.15rem); +} +.header-hamburger-trigger > span { + position: relative; + vertical-align: middle; +} +.header-hamburger-trigger > span::after, +.header-hamburger-trigger > span::before { + content: ""; + position: absolute; + left: 0; +} +.header-hamburger-trigger > span::before { + top: -0.35rem; +} +.header-hamburger-trigger > span::after { + bottom: -0.35rem; +} +.header-hamburger-trigger.active > span { + background: 0 0; +} +.header-hamburger-trigger.active > span::after, +.header-hamburger-trigger.active > span::before { + left: 0.15rem; + -webkit-transform-origin: 9%; + transform-origin: 9%; + -webkit-transition: -webkit-transform 0.6s ease; + transition: -webkit-transform 0.6s ease; + transition: transform 0.6s ease; + transition: transform 0.6s ease, -webkit-transform 0.6s ease; +} +.header-hamburger-trigger.active > span::before { + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} +.header-hamburger-trigger.active > span::after { + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} +.header-overflow-trigger > span, +.header-overflow-trigger > span::after, +.header-overflow-trigger > span::before { + display: inline-block; + height: 0.2rem; + width: 0.2rem; + background: #fff; + background: var(--clr-responsive-nav-trigger-bg-color, #fff); + border-radius: 0.2rem; + border-radius: var(--clr-responsive-nav-overflow-border-radius, 0.2rem); +} +.header-overflow-trigger > span { + position: relative; + vertical-align: middle; +} +.header-overflow-trigger > span::after, +.header-overflow-trigger > span::before { + content: ""; + position: absolute; + left: 0; +} +.header-overflow-trigger > span::before { + top: -0.4rem; +} +.header-overflow-trigger > span::after { + bottom: -0.4rem; +} +.header-overflow-trigger.active > span { + background: 0 0; +} +.header-overflow-trigger.active > span::after, +.header-overflow-trigger.active > span::before { + height: 0.1rem; + width: 1.2rem; + left: -0.3rem; + -webkit-transform-origin: -3%; + transform-origin: -3%; + -webkit-transition: -webkit-transform 0.6s ease; + transition: -webkit-transform 0.6s ease; + transition: transform 0.6s ease; + transition: transform 0.6s ease, -webkit-transform 0.6s ease; +} +.header-overflow-trigger.active > span::before { + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} +.header-overflow-trigger.active > span::after { + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} +@media screen and (max-width: 768px) { + .main-container .header-hamburger-trigger, + .main-container .header-overflow-trigger { + display: inline-block; + border: none; + background: 0 0; + cursor: pointer; + font-size: 1.2rem; + height: 3rem; + width: 3rem; + padding: 0 0 0.2rem 0; + text-align: center; + white-space: nowrap; + color: #fafafa; + color: var(--clr-header-font-color, #fafafa); + opacity: 0.65; + opacity: var(--clr-header-nav-opacity, 0.65); + } + .main-container .header-hamburger-trigger:focus, + .main-container .header-overflow-trigger:focus { + outline-offset: -0.25rem; + } + .main-container .header-hamburger-trigger:enabled:hover, + .main-container .header-overflow-trigger:enabled:hover { + opacity: 1; + opacity: var(--clr-header-nav-hover-opacity, 1); + } + .main-container .header-hamburger-trigger:disabled, + .main-container .header-overflow-trigger:disabled { + cursor: not-allowed; + } + .main-container .clr-vertical-nav.clr-nav-level-1, + .main-container .header-nav.clr-nav-level-1, + .main-container .sidenav.clr-nav-level-1, + .main-container .sub-nav.clr-nav-level-1, + .main-container .subnav.clr-nav-level-1 { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + position: fixed; + top: 0; + right: auto; + bottom: 0; + left: 0; + background: #e8e8e8; + background: var(--clr-nav-background-color, #e8e8e8); + z-index: 1039; + height: 100vh; + -webkit-transform: translateX(-18rem); + transform: translateX(-18rem); + -webkit-transition: -webkit-transform 0.3s ease; + transition: -webkit-transform 0.3s ease; + transition: transform 0.3s ease; + transition: transform 0.3s ease, -webkit-transform 0.3s ease; + } + .main-container .clr-vertical-nav.clr-nav-level-2, + .main-container .header-nav.clr-nav-level-2, + .main-container .sidenav.clr-nav-level-2, + .main-container .sub-nav.clr-nav-level-2, + .main-container .subnav.clr-nav-level-2 { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: auto; + background: #e8e8e8; + background: var(--clr-nav-background-color, #e8e8e8); + z-index: 1039; + height: 100vh; + -webkit-transform: translateX(18rem); + transform: translateX(18rem); + -webkit-transition: -webkit-transform 0.3s ease; + transition: -webkit-transform 0.3s ease; + transition: transform 0.3s ease; + transition: transform 0.3s ease, -webkit-transform 0.3s ease; + } + .main-container .sub-nav.clr-nav-level-1 .nav, + .main-container .sub-nav.clr-nav-level-1 aside, + .main-container .sub-nav.clr-nav-level-2 .nav, + .main-container .sub-nav.clr-nav-level-2 aside, + .main-container .subnav.clr-nav-level-1 .nav, + .main-container .subnav.clr-nav-level-1 aside, + .main-container .subnav.clr-nav-level-2 .nav, + .main-container .subnav.clr-nav-level-2 aside { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + } + .main-container .sub-nav.clr-nav-level-1 aside, + .main-container .sub-nav.clr-nav-level-2 aside, + .main-container .subnav.clr-nav-level-1 aside, + .main-container .subnav.clr-nav-level-2 aside { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + } + .main-container .sub-nav.clr-nav-level-1 .nav, + .main-container .sub-nav.clr-nav-level-2 .nav, + .main-container .subnav.clr-nav-level-1 .nav, + .main-container .subnav.clr-nav-level-2 .nav { + padding-left: 0; + } + .main-container .sub-nav.clr-nav-level-1 .nav .nav-item, + .main-container .sub-nav.clr-nav-level-2 .nav .nav-item, + .main-container .subnav.clr-nav-level-1 .nav .nav-item, + .main-container .subnav.clr-nav-level-2 .nav .nav-item { + height: 1.8rem; + margin-right: 0; + } + .main-container .sub-nav.clr-nav-level-1 .nav .nav-link, + .main-container .sub-nav.clr-nav-level-2 .nav .nav-link, + .main-container .subnav.clr-nav-level-1 .nav .nav-link, + .main-container .subnav.clr-nav-level-2 .nav .nav-link { + padding: 0 0.6rem 0 1.2rem; + width: 100%; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + border-radius: 0; + border-top-left-radius: 0.15rem; + border-top-left-radius: var(--clr-global-borderradius, 0.15rem); + border-bottom-left-radius: 0.15rem; + border-bottom-left-radius: var(--clr-global-borderradius, 0.15rem); + color: #666; + color: var(--clr-vertical-nav-item-color, #666); + } + .main-container .sub-nav.clr-nav-level-1 .nav .nav-link.active, + .main-container .sub-nav.clr-nav-level-2 .nav .nav-link.active, + .main-container .subnav.clr-nav-level-1 .nav .nav-link.active, + .main-container .subnav.clr-nav-level-2 .nav .nav-link.active { + color: #666; + color: var(--clr-vertical-nav-item-active-color, #666); + background-color: #fff; + background-color: var(--clr-vertical-nav-active-bg-color, #fff); + } + .main-container .sub-nav.clr-nav-level-1 .nav .nav-link.active .nav-icon, + .main-container .sub-nav.clr-nav-level-2 .nav .nav-link.active .nav-icon, + .main-container .subnav.clr-nav-level-1 .nav .nav-link.active .nav-icon, + .main-container .subnav.clr-nav-level-2 .nav .nav-link.active .nav-icon { + fill: #0072a3; + fill: var(--clr-vertical-nav-icon-active-color, #0072a3); + } + .main-container .sub-nav.clr-nav-level-1 .nav .nav-link:hover, + .main-container .sub-nav.clr-nav-level-2 .nav .nav-link:hover, + .main-container .subnav.clr-nav-level-1 .nav .nav-link:hover, + .main-container .subnav.clr-nav-level-2 .nav .nav-link:hover { + color: #666; + color: var(--clr-vertical-nav-item-active-color, #666); + background-color: #ccc; + background-color: var(--clr-vertical-nav-hover-bg-color, #ccc); + text-decoration: none; + } + .main-container .sub-nav.clr-nav-level-1 .nav .nav-link.active, + .main-container .sub-nav.clr-nav-level-1 .nav .nav-link:hover, + .main-container .sub-nav.clr-nav-level-2 .nav .nav-link.active, + .main-container .sub-nav.clr-nav-level-2 .nav .nav-link:hover, + .main-container .subnav.clr-nav-level-1 .nav .nav-link.active, + .main-container .subnav.clr-nav-level-1 .nav .nav-link:hover, + .main-container .subnav.clr-nav-level-2 .nav .nav-link.active, + .main-container .subnav.clr-nav-level-2 .nav .nav-link:hover { + -webkit-box-shadow: none; + box-shadow: none; + } + .main-container .sidenav.clr-nav-level-1 .nav-link.active, + .main-container .sidenav.clr-nav-level-1 .nav-link:hover, + .main-container .sidenav.clr-nav-level-2 .nav-link.active, + .main-container .sidenav.clr-nav-level-2 .nav-link:hover { + color: inherit; + background: #fff; + background: var(--clr-responsive-nav-hover-bg, #fff); + } + .main-container .clr-vertical-nav.clr-nav-level-1, + .main-container .clr-vertical-nav.clr-nav-level-2, + .main-container .sidenav.clr-nav-level-1, + .main-container .sidenav.clr-nav-level-2 { + border-right: none; + } + .main-container .header-overflow-trigger { + position: relative; + } + .main-container .header-overflow-trigger::after { + position: absolute; + content: ""; + display: inline-block; + position: absolute; + content: ""; + background: #fafafa; + background: var(--clr-header-font-color, #fafafa); + opacity: 0.15; + opacity: var(--clr-header-divider-opacity, 0.15); + opacity: 0.15; + height: 2rem; + width: 0.05rem; + width: var(--clr-global-borderwidth, 0.05rem); + top: 0.5rem; + left: 0; + left: 0; + } + .main-container .header .branding { + max-width: 12rem; + min-width: 0; + overflow: hidden; + } + .main-container .header .header-hamburger-trigger + .branding { + padding-left: 0; + } + .main-container .header .header-hamburger-trigger + .branding .clr-icon, + .main-container .header .header-hamburger-trigger + .branding .logo, + .main-container .header .header-hamburger-trigger + .branding cds-icon { + display: none; + } + .main-container .header .branding + .header-overflow-trigger, + .main-container .header .header-nav + .header-overflow-trigger { + margin-left: auto; + } + .main-container.open-hamburger-menu .header .header-backdrop, + .main-container.open-overflow-menu .header .header-backdrop { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: #000; + background: var(--clr-responsive-nav-header-backdrop-bg-color, #000); + opacity: 0.85; + opacity: var(--clr-responsive-nav-header-backdrop-opacity, 0.85); + cursor: pointer; + z-index: 1038; + } + .main-container.open-hamburger-menu + .header + .header-nav.clr-nav-level-1 + .nav-link, + .main-container.open-hamburger-menu + .header + .header-nav.clr-nav-level-2 + .nav-link, + .main-container.open-overflow-menu + .header + .header-nav.clr-nav-level-1 + .nav-link, + .main-container.open-overflow-menu + .header + .header-nav.clr-nav-level-2 + .nav-link { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + opacity: 1; + color: #666; + color: var(--clr-vertical-nav-item-color, #666); + } + .main-container.open-hamburger-menu + .header + .header-nav.clr-nav-level-1 + .nav-link + .fa, + .main-container.open-hamburger-menu + .header + .header-nav.clr-nav-level-1 + .nav-link + .nav-icon, + .main-container.open-hamburger-menu + .header + .header-nav.clr-nav-level-2 + .nav-link + .fa, + .main-container.open-hamburger-menu + .header + .header-nav.clr-nav-level-2 + .nav-link + .nav-icon, + .main-container.open-overflow-menu + .header + .header-nav.clr-nav-level-1 + .nav-link + .fa, + .main-container.open-overflow-menu + .header + .header-nav.clr-nav-level-1 + .nav-link + .nav-icon, + .main-container.open-overflow-menu + .header + .header-nav.clr-nav-level-2 + .nav-link + .fa, + .main-container.open-overflow-menu + .header + .header-nav.clr-nav-level-2 + .nav-link + .nav-icon { + display: none; + } + .main-container.open-hamburger-menu + .header + .header-nav.clr-nav-level-1 + .nav-link + .nav-text, + .main-container.open-hamburger-menu + .header + .header-nav.clr-nav-level-2 + .nav-link + .nav-text, + .main-container.open-overflow-menu + .header + .header-nav.clr-nav-level-1 + .nav-link + .nav-text, + .main-container.open-overflow-menu + .header + .header-nav.clr-nav-level-2 + .nav-link + .nav-text { + display: inline-block; + color: #666; + color: var(--clr-sliding-panel-text-color, #666); + line-height: 1.2rem; + padding: 0.3rem 0 0.3rem 1.2rem; + white-space: normal; + font-weight: 400; + } + .main-container.open-hamburger-menu + .header + .header-nav.clr-nav-level-1 + .nav-link + .nav-icon + + .nav-text, + .main-container.open-hamburger-menu + .header + .header-nav.clr-nav-level-2 + .nav-link + .nav-icon + + .nav-text, + .main-container.open-overflow-menu + .header + .header-nav.clr-nav-level-1 + .nav-link + .nav-icon + + .nav-text, + .main-container.open-overflow-menu + .header + .header-nav.clr-nav-level-2 + .nav-link + .nav-icon + + .nav-text { + display: inline-block; + } + .main-container.open-hamburger-menu + .header + .header-nav.clr-nav-level-1 + .nav-link.active, + .main-container.open-hamburger-menu + .header + .header-nav.clr-nav-level-2 + .nav-link.active, + .main-container.open-overflow-menu + .header + .header-nav.clr-nav-level-1 + .nav-link.active, + .main-container.open-overflow-menu + .header + .header-nav.clr-nav-level-2 + .nav-link.active { + color: #666; + color: var(--clr-vertical-nav-item-active-color, #666); + background-color: #fff; + background-color: var(--clr-vertical-nav-active-bg-color, #fff); + } + .main-container.open-hamburger-menu + .header + .header-nav.clr-nav-level-1 + .nav-link.active + .nav-icon, + .main-container.open-hamburger-menu + .header + .header-nav.clr-nav-level-2 + .nav-link.active + .nav-icon, + .main-container.open-overflow-menu + .header + .header-nav.clr-nav-level-1 + .nav-link.active + .nav-icon, + .main-container.open-overflow-menu + .header + .header-nav.clr-nav-level-2 + .nav-link.active + .nav-icon { + fill: #0072a3; + fill: var(--clr-vertical-nav-icon-active-color, #0072a3); + } + .main-container.open-hamburger-menu + .header + .header-nav.clr-nav-level-1 + .nav-link:hover, + .main-container.open-hamburger-menu + .header + .header-nav.clr-nav-level-2 + .nav-link:hover, + .main-container.open-overflow-menu + .header + .header-nav.clr-nav-level-1 + .nav-link:hover, + .main-container.open-overflow-menu + .header + .header-nav.clr-nav-level-2 + .nav-link:hover { + color: #666; + color: var(--clr-vertical-nav-item-active-color, #666); + background-color: #ccc; + background-color: var(--clr-vertical-nav-hover-bg-color, #ccc); + text-decoration: none; + } + .main-container.open-hamburger-menu + .header + .header-nav.clr-nav-level-1 + .nav-link.active + > .nav-text, + .main-container.open-hamburger-menu + .header + .header-nav.clr-nav-level-2 + .nav-link.active + > .nav-text, + .main-container.open-overflow-menu + .header + .header-nav.clr-nav-level-1 + .nav-link.active + > .nav-text, + .main-container.open-overflow-menu + .header + .header-nav.clr-nav-level-2 + .nav-link.active + > .nav-text { + color: inherit; + } + .main-container.open-hamburger-menu .clr-vertical-nav .nav-trigger, + .main-container.open-overflow-menu .clr-vertical-nav .nav-trigger { + display: none; + } + .main-container.open-hamburger-menu .header .branding { + position: fixed; + top: 0; + left: 0; + overflow: hidden; + width: 18rem; + max-width: 18rem; + z-index: 1040; + padding-left: 1.2rem; + } + .main-container.open-hamburger-menu .header .branding > .nav-link { + overflow: hidden; + } + .main-container.open-hamburger-menu .header .branding .clr-icon, + .main-container.open-hamburger-menu .header .branding .logo, + .main-container.open-hamburger-menu .header .branding cds-icon { + display: inline-block; + } + .main-container.open-hamburger-menu .header .branding .clr-vmw-logo, + .main-container.open-hamburger-menu + .header + .branding + cds-icon[shape="vm-bug"] { + background-color: #8c8c8c; + border-radius: 0.15rem; + } + .main-container.open-hamburger-menu .header .branding .title { + color: #666; + color: var(--clr-sliding-panel-text-color, #666); + text-overflow: ellipsis; + overflow: hidden; + } + .main-container.open-hamburger-menu .header-hamburger-trigger { + position: fixed; + top: 0; + right: auto; + left: 0; + z-index: 1039; + -webkit-transform: translateX(18.6rem); + transform: translateX(18.6rem); + -webkit-transition: -webkit-transform 0.6s ease; + transition: -webkit-transform 0.6s ease; + transition: transform 0.6s ease; + transition: transform 0.6s ease, -webkit-transform 0.6s ease; + } + .main-container.open-hamburger-menu .header-hamburger-trigger::after { + content: none; + } + .main-container.open-hamburger-menu .header-hamburger-trigger > span { + background: 0 0; + } + .main-container.open-hamburger-menu .header-hamburger-trigger > span::after, + .main-container.open-hamburger-menu + .header-hamburger-trigger + > span::before { + left: 0.15rem; + -webkit-transform-origin: 9%; + transform-origin: 9%; + -webkit-transition: -webkit-transform 0.6s ease; + transition: -webkit-transform 0.6s ease; + transition: transform 0.6s ease; + transition: transform 0.6s ease, -webkit-transform 0.6s ease; + } + .main-container.open-hamburger-menu + .header-hamburger-trigger + > span::before { + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + } + .main-container.open-hamburger-menu + .header-hamburger-trigger + > span::after { + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + } + .main-container.open-hamburger-menu .clr-vertical-nav.clr-nav-level-1, + .main-container.open-hamburger-menu .header-nav.clr-nav-level-1, + .main-container.open-hamburger-menu .sidenav.clr-nav-level-1, + .main-container.open-hamburger-menu .sub-nav.clr-nav-level-1, + .main-container.open-hamburger-menu .subnav.clr-nav-level-1 { + padding-top: 4.2rem; + -webkit-transform: translateX(0); + transform: translateX(0); + -webkit-transition: -webkit-transform 0.3s ease; + transition: -webkit-transform 0.3s ease; + transition: transform 0.3s ease; + transition: transform 0.3s ease, -webkit-transform 0.3s ease; + } + .main-container.open-hamburger-menu + .clr-vertical-nav.clr-nav-level-1 + .sidenav-content, + .main-container.open-hamburger-menu + .header-nav.clr-nav-level-1 + .sidenav-content, + .main-container.open-hamburger-menu + .sidenav.clr-nav-level-1 + .sidenav-content, + .main-container.open-hamburger-menu + .sub-nav.clr-nav-level-1 + .sidenav-content, + .main-container.open-hamburger-menu + .subnav.clr-nav-level-1 + .sidenav-content { + padding-bottom: 1.2rem; + } + .main-container.open-overflow-menu .clr-vertical-nav.clr-nav-level-2, + .main-container.open-overflow-menu .header-nav.clr-nav-level-2, + .main-container.open-overflow-menu .sidenav.clr-nav-level-2, + .main-container.open-overflow-menu .sub-nav.clr-nav-level-2, + .main-container.open-overflow-menu .subnav.clr-nav-level-2 { + -webkit-transform: translateX(0); + transform: translateX(0); + -webkit-transition: -webkit-transform 0.3s ease; + transition: -webkit-transform 0.3s ease; + transition: transform 0.3s ease; + transition: transform 0.3s ease, -webkit-transform 0.3s ease; + } + .main-container.open-overflow-menu .header-nav.clr-nav-level-2, + .main-container.open-overflow-menu .sub-nav.clr-nav-level-2, + .main-container.open-overflow-menu .subnav.clr-nav-level-2 { + padding-top: 1.2rem; + } + .main-container.open-overflow-menu .header-overflow-trigger { + position: fixed; + top: 0; + right: 0; + left: auto; + z-index: 1039; + -webkit-transform: translateX(-18.6rem); + transform: translateX(-18.6rem); + -webkit-transition: -webkit-transform 0.6s ease; + transition: -webkit-transform 0.6s ease; + transition: transform 0.6s ease; + transition: transform 0.6s ease, -webkit-transform 0.6s ease; + } + .main-container.open-overflow-menu .header-overflow-trigger::after { + content: none; + } + .main-container.open-overflow-menu .header-overflow-trigger > span { + background: 0 0; + } + .main-container.open-overflow-menu .header-overflow-trigger > span::after, + .main-container.open-overflow-menu .header-overflow-trigger > span::before { + height: 0.1rem; + width: 1.2rem; + left: -0.3rem; + -webkit-transform-origin: -3%; + transform-origin: -3%; + -webkit-transition: -webkit-transform 0.6s ease; + transition: -webkit-transform 0.6s ease; + transition: transform 0.6s ease; + transition: transform 0.6s ease, -webkit-transform 0.6s ease; + } + .main-container.open-overflow-menu .header-overflow-trigger > span::before { + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + } + .main-container.open-overflow-menu .header-overflow-trigger > span::after { + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + } + .main-container.open-hamburger-menu .clr-vertical-nav.clr-nav-level-1, + .main-container.open-hamburger-menu .header-nav.clr-nav-level-1, + .main-container.open-hamburger-menu .sidenav.clr-nav-level-1, + .main-container.open-hamburger-menu .sub-nav.clr-nav-level-1, + .main-container.open-hamburger-menu .subnav.clr-nav-level-1 { + width: 18rem; + max-width: 18rem; + } + .main-container.open-overflow-menu .clr-vertical-nav.clr-nav-level-2, + .main-container.open-overflow-menu .header-nav.clr-nav-level-2, + .main-container.open-overflow-menu .sidenav.clr-nav-level-2, + .main-container.open-overflow-menu .sub-nav.clr-nav-level-2, + .main-container.open-overflow-menu .subnav.clr-nav-level-2 { + width: 18rem; + max-width: 18rem; + } +} +@media screen and (max-width: 576px) { + .main-container .header .branding { + max-width: 7.2rem; + min-width: 0; + overflow: hidden; + } + .main-container .clr-vertical-nav.clr-nav-level-1, + .main-container .header-nav.clr-nav-level-1, + .main-container .sidenav.clr-nav-level-1, + .main-container .sub-nav.clr-nav-level-1, + .main-container .subnav.clr-nav-level-1 { + -webkit-transform: translateX(-14.4rem); + transform: translateX(-14.4rem); + } + .main-container .clr-vertical-nav.clr-nav-level-2, + .main-container .header-nav.clr-nav-level-2, + .main-container .sidenav.clr-nav-level-2, + .main-container .sub-nav.clr-nav-level-2, + .main-container .subnav.clr-nav-level-2 { + -webkit-transform: translateX(14.4rem); + transform: translateX(14.4rem); + } + .main-container.open-hamburger-menu .header .branding { + width: 14.4rem; + max-width: 14.4rem; + } + .main-container.open-hamburger-menu .clr-vertical-nav.clr-nav-level-1, + .main-container.open-hamburger-menu .header-nav.clr-nav-level-1, + .main-container.open-hamburger-menu .sidenav.clr-nav-level-1, + .main-container.open-hamburger-menu .sub-nav.clr-nav-level-1, + .main-container.open-hamburger-menu .subnav.clr-nav-level-1 { + width: 14.4rem; + max-width: 14.4rem; + } + .main-container.open-hamburger-menu .header-hamburger-trigger { + position: fixed; + top: 0; + right: auto; + left: 0; + z-index: 1039; + -webkit-transform: translateX(15rem); + transform: translateX(15rem); + -webkit-transition: -webkit-transform 0.6s ease; + transition: -webkit-transform 0.6s ease; + transition: transform 0.6s ease; + transition: transform 0.6s ease, -webkit-transform 0.6s ease; + } + .main-container.open-hamburger-menu .header-hamburger-trigger::after { + content: none; + } + .main-container.open-overflow-menu .clr-vertical-nav.clr-nav-level-2, + .main-container.open-overflow-menu .header-nav.clr-nav-level-2, + .main-container.open-overflow-menu .sidenav.clr-nav-level-2, + .main-container.open-overflow-menu .sub-nav.clr-nav-level-2, + .main-container.open-overflow-menu .subnav.clr-nav-level-2 { + width: 14.4rem; + max-width: 14.4rem; + } + .main-container.open-overflow-menu .header-overflow-trigger { + position: fixed; + top: 0; + right: 0; + left: auto; + z-index: 1039; + -webkit-transform: translateX(-15rem); + transform: translateX(-15rem); + -webkit-transition: -webkit-transform 0.6s ease; + transition: -webkit-transform 0.6s ease; + transition: transform 0.6s ease; + transition: transform 0.6s ease, -webkit-transform 0.6s ease; + } + .main-container.open-overflow-menu .header-overflow-trigger::after { + content: none; + } +} +:root { + --clr-progress-default-color: var(--clr-color-action-600); + --clr-progress-alt-color-1: var(--clr-color-success-400); + --clr-progress-alt-color-2: var(--clr-color-danger-800); + --clr-progress-alt-color-3: var(--clr-progress-alt-color-2); + --clr-progress-bg-color: var(--clr-color-neutral-200); +} +.progress, +.progress-static { + background-color: transparent; + border-radius: 0; + font-size: inherit; + height: 2em; + margin: 0; + max-height: 0.7rem; + min-height: 0.2rem; + overflow: hidden; + display: block; + width: 100%; +} +.progress > progress { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + color: #0072a3; + color: var(--clr-progress-default-color, #0072a3); + display: block; + background-color: #e8e8e8; + background-color: var(--clr-progress-bg-color, #e8e8e8); + border: none; + height: 100%; + width: 100%; +} +.progress > progress::-webkit-progress-value { + background-color: #0072a3; + background-color: var(--clr-progress-default-color, #0072a3); +} +.progress > progress::-moz-progress-bar { + background-color: #0072a3; + background-color: var(--clr-progress-default-color, #0072a3); +} +.progress > progress[value="0"]::-moz-progress-bar { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + color: #e8e8e8; + color: var(--clr-progress-bg-color, #e8e8e8); + min-width: 2.4rem; + background-color: transparent; + background-image: none; +} +.progress > progress[value="0"]::-webkit-progress-value { + -webkit-transition: none; + transition: none; +} +.progress > progress::-webkit-progress-bar { + border-radius: 0; + background-color: #e8e8e8; + background-color: var(--clr-progress-bg-color, #e8e8e8); +} +.progress > progress::-webkit-progress-inner-element { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; +} +.progress > progress::-webkit-progress-value { + -webkit-transition: width 0.23s ease-in; + transition: width 0.23s ease-in; + border-radius: 0; +} +.progress.success > progress { + color: #5eb715; + color: var(--clr-progress-alt-color-1, #5eb715); +} +.progress.success > progress::-webkit-progress-value { + background-color: #5eb715; + background-color: var(--clr-progress-alt-color-1, #5eb715); +} +.progress.success > progress::-moz-progress-bar { + background-color: #5eb715; + background-color: var(--clr-progress-alt-color-1, #5eb715); +} +.progress.warning > progress { + color: #c21d00; + color: var(--clr-progress-alt-color-3, #c21d00); +} +.progress.warning > progress::-webkit-progress-value { + background-color: #c21d00; + background-color: var(--clr-progress-alt-color-3, #c21d00); +} +.progress.warning > progress::-moz-progress-bar { + background-color: #c21d00; + background-color: var(--clr-progress-alt-color-3, #c21d00); +} +.progress.danger > progress { + color: #c21d00; + color: var(--clr-progress-alt-color-2, #c21d00); +} +.progress.danger > progress::-webkit-progress-value { + background-color: #c21d00; + background-color: var(--clr-progress-alt-color-2, #c21d00); +} +.progress.danger > progress::-moz-progress-bar { + background-color: #c21d00; + background-color: var(--clr-progress-alt-color-2, #c21d00); +} +.progress-static.labeled, +.progress.labeled { + position: relative; + padding-right: 3em; +} +.progress-static.labeled > span, +.progress.labeled > span { + display: block; + font-size: 1em; + position: absolute; + top: 50%; + right: 0; + line-height: 1em; + margin-top: -0.375em; +} +@-webkit-keyframes clr-progress-fade { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +@keyframes clr-progress-fade { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +.progress.progress-fade > progress[value="100"], +.progress.progress-fade > progress[value="100"] + span { + -webkit-animation: clr-progress-fade 0.3s linear 0.5s forwards; + animation: clr-progress-fade 0.3s linear 0.5s forwards; +} +.progress.flash-danger > progress, +.progress.flash > progress { + -webkit-transition: color 0.1s ease-out 1s; + transition: color 0.1s ease-out 1s; +} +.progress.flash-danger > progress::-webkit-progress-value, +.progress.flash > progress::-webkit-progress-value { + -webkit-transition: width 0.23s ease-in, background-color 0.1s ease-out 0.3s; + transition: width 0.23s ease-in, background-color 0.1s ease-out 0.3s; +} +.progress.flash-danger > progress[value="0"]::-webkit-progress-value, +.progress.flash > progress[value="0"]::-webkit-progress-value { + -webkit-transition: none; + transition: none; +} +.progress.flash-danger > progress::-moz-progress-bar, +.progress.flash > progress::-moz-progress-bar { + -moz-transition: width 0.23s ease-in, background-color 0.1s ease-out 0.3s; + transition: width 0.23s ease-in, background-color 0.1s ease-out 0.3s; +} +.progress.flash > progress[value="100"] { + color: #5eb715; + color: var(--clr-progress-alt-color-1, #5eb715); +} +.progress.flash > progress[value="100"]::-webkit-progress-value { + background-color: #5eb715; + background-color: var(--clr-progress-alt-color-1, #5eb715); +} +.progress.flash > progress[value="100"]::-moz-progress-bar { + background-color: #5eb715; + background-color: var(--clr-progress-alt-color-1, #5eb715); +} +.progress.progress-fade.flash > progress[value="100"], +.progress.progress-fade.flash > progress[value="100"] + span { + -webkit-animation: clr-progress-fade 0.6s linear 1s forwards; + animation: clr-progress-fade 0.6s linear 1s forwards; +} +.progress.flash-danger > progress[value="100"] { + color: #c21d00; + color: var(--clr-progress-alt-color-2, #c21d00); +} +.progress.flash-danger > progress[value="100"]::-webkit-progress-value { + background-color: #c21d00; + background-color: var(--clr-progress-alt-color-2, #c21d00); +} +.progress.flash-danger > progress[value="100"]::-moz-progress-bar { + background-color: #c21d00; + background-color: var(--clr-progress-alt-color-2, #c21d00); +} +@-webkit-keyframes clr-progress-looper { + from { + left: -100%; + } + to { + left: 100%; + } +} +@keyframes clr-progress-looper { + from { + left: -100%; + } + to { + left: 100%; + } +} +.progress.loop { + position: relative; +} +.progress.loop > progress { + overflow: hidden; + color: transparent; + color: var(--clr-color-action-600, transparent); +} +.progress.loop > progress::-webkit-progress-value { + background-color: transparent; + background-color: var(--clr-color-action-600, transparent); +} +.progress.loop > progress::-moz-progress-bar { + background-color: transparent; + background-color: var(--clr-color-action-600, transparent); +} +.progress.loop > progress::-moz-progress-bar { + background-color: transparent; +} +.progress.loop::after { + -webkit-animation: clr-progress-looper 2s ease-in-out infinite; + animation: clr-progress-looper 2s ease-in-out infinite; + content: " "; + top: 0; + bottom: 0; + left: 0; + position: absolute; + display: block; + background-color: #0072a3; + background-color: var(--clr-progress-default-color, #0072a3); + width: 75%; +} +.progress.loop.danger::after, +.progress.loop.warning::after { + background-color: #c21d00; + background-color: var(--clr-progress-alt-color-2, #c21d00); +} +.progress.loop.success::after { + background-color: #5eb715; + background-color: var(--clr-progress-alt-color-1, #5eb715); +} +.nav-item .progress::after { + top: 0; +} +.progress-static { + position: relative; + border: none; + width: 100%; +} +.progress-static > .progress-meter { + background-color: #e8e8e8; + background-color: var(--clr-progress-bg-color, #e8e8e8); + display: block; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +.progress-static > .progress-meter::before { + background-color: #0072a3; + background-color: var(--clr-progress-default-color, #0072a3); + top: 0; + bottom: 0; + left: 0; + position: absolute; + display: block; + width: 0%; + content: " "; +} +.progress-static > .progress-meter[data-value="1"]::before, +.progress-static > .progress-meter[data-value="2"]::before, +.progress-static > .progress-meter[data-value="3"]::before { + width: 2%; +} +.progress-static > .progress-meter[data-value="4"]::before, +.progress-static > .progress-meter[data-value="5"]::before, +.progress-static > .progress-meter[data-value="6"]::before, +.progress-static > .progress-meter[data-value="7"]::before { + width: 5%; +} +.progress-static > .progress-meter[data-value="10"]::before, +.progress-static > .progress-meter[data-value="11"]::before, +.progress-static > .progress-meter[data-value="12"]::before, +.progress-static > .progress-meter[data-value="8"]::before, +.progress-static > .progress-meter[data-value="9"]::before { + width: 10%; +} +.progress-static > .progress-meter[data-value="13"]::before, +.progress-static > .progress-meter[data-value="14"]::before, +.progress-static > .progress-meter[data-value="15"]::before, +.progress-static > .progress-meter[data-value="16"]::before, +.progress-static > .progress-meter[data-value="17"]::before { + width: 15%; +} +.progress-static > .progress-meter[data-value="18"]::before, +.progress-static > .progress-meter[data-value="19"]::before, +.progress-static > .progress-meter[data-value="20"]::before, +.progress-static > .progress-meter[data-value="21"]::before, +.progress-static > .progress-meter[data-value="22"]::before { + width: 20%; +} +.progress-static > .progress-meter[data-value="23"]::before, +.progress-static > .progress-meter[data-value="24"]::before, +.progress-static > .progress-meter[data-value="25"]::before, +.progress-static > .progress-meter[data-value="26"]::before, +.progress-static > .progress-meter[data-value="27"]::before { + width: 25%; +} +.progress-static > .progress-meter[data-value="28"]::before, +.progress-static > .progress-meter[data-value="29"]::before, +.progress-static > .progress-meter[data-value="30"]::before, +.progress-static > .progress-meter[data-value="31"]::before, +.progress-static > .progress-meter[data-value="32"]::before { + width: 30%; +} +.progress-static > .progress-meter[data-value="33"]::before, +.progress-static > .progress-meter[data-value="34"]::before, +.progress-static > .progress-meter[data-value="35"]::before, +.progress-static > .progress-meter[data-value="36"]::before, +.progress-static > .progress-meter[data-value="37"]::before { + width: 35%; +} +.progress-static > .progress-meter[data-value="38"]::before, +.progress-static > .progress-meter[data-value="39"]::before, +.progress-static > .progress-meter[data-value="40"]::before, +.progress-static > .progress-meter[data-value="41"]::before, +.progress-static > .progress-meter[data-value="42"]::before { + width: 40%; +} +.progress-static > .progress-meter[data-value="43"]::before, +.progress-static > .progress-meter[data-value="44"]::before, +.progress-static > .progress-meter[data-value="45"]::before, +.progress-static > .progress-meter[data-value="46"]::before, +.progress-static > .progress-meter[data-value="47"]::before { + width: 45%; +} +.progress-static > .progress-meter[data-value="48"]::before, +.progress-static > .progress-meter[data-value="49"]::before, +.progress-static > .progress-meter[data-value="50"]::before, +.progress-static > .progress-meter[data-value="51"]::before, +.progress-static > .progress-meter[data-value="52"]::before { + width: 50%; +} +.progress-static > .progress-meter[data-value="53"]::before, +.progress-static > .progress-meter[data-value="54"]::before, +.progress-static > .progress-meter[data-value="55"]::before, +.progress-static > .progress-meter[data-value="56"]::before, +.progress-static > .progress-meter[data-value="57"]::before { + width: 55%; +} +.progress-static > .progress-meter[data-value="58"]::before, +.progress-static > .progress-meter[data-value="59"]::before, +.progress-static > .progress-meter[data-value="60"]::before, +.progress-static > .progress-meter[data-value="61"]::before, +.progress-static > .progress-meter[data-value="62"]::before { + width: 60%; +} +.progress-static > .progress-meter[data-value="63"]::before, +.progress-static > .progress-meter[data-value="64"]::before, +.progress-static > .progress-meter[data-value="65"]::before, +.progress-static > .progress-meter[data-value="66"]::before, +.progress-static > .progress-meter[data-value="67"]::before { + width: 65%; +} +.progress-static > .progress-meter[data-value="68"]::before, +.progress-static > .progress-meter[data-value="69"]::before, +.progress-static > .progress-meter[data-value="70"]::before, +.progress-static > .progress-meter[data-value="71"]::before, +.progress-static > .progress-meter[data-value="72"]::before { + width: 70%; +} +.progress-static > .progress-meter[data-value="73"]::before, +.progress-static > .progress-meter[data-value="74"]::before, +.progress-static > .progress-meter[data-value="75"]::before, +.progress-static > .progress-meter[data-value="76"]::before, +.progress-static > .progress-meter[data-value="77"]::before { + width: 75%; +} +.progress-static > .progress-meter[data-value="78"]::before, +.progress-static > .progress-meter[data-value="79"]::before, +.progress-static > .progress-meter[data-value="80"]::before, +.progress-static > .progress-meter[data-value="81"]::before, +.progress-static > .progress-meter[data-value="82"]::before { + width: 80%; +} +.progress-static > .progress-meter[data-value="83"]::before, +.progress-static > .progress-meter[data-value="84"]::before, +.progress-static > .progress-meter[data-value="85"]::before, +.progress-static > .progress-meter[data-value="86"]::before, +.progress-static > .progress-meter[data-value="87"]::before { + width: 85%; +} +.progress-static > .progress-meter[data-value="88"]::before, +.progress-static > .progress-meter[data-value="89"]::before, +.progress-static > .progress-meter[data-value="90"]::before, +.progress-static > .progress-meter[data-value="91"]::before, +.progress-static > .progress-meter[data-value="92"]::before { + width: 90%; +} +.progress-static > .progress-meter[data-value="93"]::before, +.progress-static > .progress-meter[data-value="94"]::before, +.progress-static > .progress-meter[data-value="95"]::before, +.progress-static > .progress-meter[data-value="96"]::before { + width: 95%; +} +.progress-static > .progress-meter[data-value="97"]::before, +.progress-static > .progress-meter[data-value="98"]::before, +.progress-static > .progress-meter[data-value="99"]::before { + width: 98%; +} +.progress-static > .progress-meter[data-value="100"]::before { + width: 100%; +} +.progress-static.labeled > .progress-meter { + right: 3em; +} +.progress-static.success > .progress-meter::before { + background-color: #5eb715; + background-color: var(--clr-progress-alt-color-1, #5eb715); +} +.progress-static.warning > .progress-meter::before { + background-color: #c21d00; + background-color: var(--clr-progress-alt-color-3, #c21d00); +} +.progress-static.danger > .progress-meter::before { + background-color: #c21d00; + background-color: var(--clr-progress-alt-color-2, #c21d00); +} +.card-block .progress, +.card-block .progress-static, +.card-footer .progress, +.card-footer .progress-static { + margin: 0; + margin-top: -0.6rem; + height: 0.1875rem; + position: absolute; + left: 0; +} +.card-block .progress-static > .progress-meter, +.card-block .progress > progress, +.card-footer .progress-static > .progress-meter, +.card-footer .progress > progress { + height: 0.1875rem; + position: absolute; +} +.card-block .progress-static.top, +.card-block .progress.top, +.card-footer .progress-static.top, +.card-footer .progress.top { + margin-top: 0; + top: 0; +} +.nav-item .progress, +.nav-item .progress-static { + margin: 0; + height: 0.24rem; + min-height: 0.24rem; + max-height: 0.24rem; + left: 0; +} +.nav-item .progress-static > .progress-meter, +.nav-item .progress > progress { + height: 0.24rem; + min-height: 0.24rem; + max-height: 0.24rem; + position: absolute; +} +.progress-block { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +.progress-block > * { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.6rem; +} +.progress-block > :first-child { + padding-right: 0.9rem; +} +.progress-block > :last-child { + padding-right: 0; +} +.progress-block > label { + font-weight: 600; +} +.progress-block > .progress, +.progress-block > .progress-static { + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; +} +.progress-block > .progress-group { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + height: auto; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; +} +.progress-block > .progress-group .clr-row { + margin-left: 0; + margin-right: 0; +} +.progress-block > .progress-group .clr-row > [class*="clr-col-"] { + padding-left: 0; + padding-right: 0; +} +.card-block .progress-block { + margin-bottom: 0.6rem; + padding: 0; +} +.card-block .progress-block:last-child { + margin-bottom: 0; +} +.card-block .progress-block > label { + max-width: 33%; + line-height: 0.9rem; +} +.card-block .progress-block .progress, +.card-block .progress-block .progress-static { + position: relative; + height: 0.6395rem; + margin-top: 0; +} +.card-block .progress-block .progress-static > .progress-meter, +.card-block .progress-block .progress-static > progress, +.card-block .progress-block .progress > .progress-meter, +.card-block .progress-block .progress > progress { + height: 0.6395rem; +} +_:-ms-input-placeholder .progress-block > label, +:root .progress-block > label { + display: inline-block; +} +.spinner { + position: relative; + display: inline-block; + height: 3.6rem; + width: 3.6rem; + min-height: 3.6rem; + min-width: 3.6rem; + -webkit-animation: spin 1s linear infinite; + animation: spin 1s linear infinite; + margin: 0; + padding: 0; + background: url("data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22Layer_2%22%20data-name%3D%22Layer%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-1%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-2%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-miterlimit%3A%2010%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3A%205px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-1%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20%23000000%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-opacity%3A%200.15%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-2%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20%230072a3%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Ctitle%3EPreloader_72x2%3C%2Ftitle%3E%0A%20%20%20%20%3Ccircle%20class%3D%22cls-1%22%20cx%3D%2236%22%20cy%3D%2236%22%20r%3D%2233%22%2F%3E%0A%20%20%20%20%3Cpath%20class%3D%22cls-2%22%20d%3D%22M14.3%2C60.9A33%2C33%2C0%2C0%2C1%2C36%2C3%22%3E%0A%20%20%20%20%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A"); + text-indent: 100%; + overflow: hidden; + white-space: nowrap; +} +.spinner.spinner-md { + height: 1.8rem; + width: 1.8rem; + min-height: 1.8rem; + min-width: 1.8rem; +} +.spinner.spinner-inline, +.spinner.spinner-sm { + height: 0.9rem; + width: 0.9rem; + min-height: 0.9rem; + min-width: 0.9rem; +} +.spinner.spinner-inline { + vertical-align: text-bottom; +} +.spinner.spinner-inverse { + background: url("data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22Layer_2%22%20data-name%3D%22Layer%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-1%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-2%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-miterlimit%3A%2010%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3A%205px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-1%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20%23ffffff%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-opacity%3A%200.15%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-2%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20%2374c1e2%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Ctitle%3EPreloader_72x2%3C%2Ftitle%3E%0A%20%20%20%20%3Ccircle%20class%3D%22cls-1%22%20cx%3D%2236%22%20cy%3D%2236%22%20r%3D%2233%22%2F%3E%0A%20%20%20%20%3Cpath%20class%3D%22cls-2%22%20d%3D%22M14.3%2C60.9A33%2C33%2C0%2C0%2C1%2C36%2C3%22%3E%0A%20%20%20%20%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A"); +} +.spinner.spinner-neutral-0 { + background: url("data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22Layer_2%22%20data-name%3D%22Layer%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-1%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-2%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-miterlimit%3A%2010%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3A%205px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-1%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20%23transparent%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke-opacity%3A%201%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.cls-2%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20%23ffffff%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Ctitle%3EPreloader_72x2%3C%2Ftitle%3E%0A%20%20%20%20%3Ccircle%20class%3D%22cls-1%22%20cx%3D%2236%22%20cy%3D%2236%22%20r%3D%2233%22%2F%3E%0A%20%20%20%20%3Cpath%20class%3D%22cls-2%22%20d%3D%22M14.3%2C60.9A33%2C33%2C0%2C0%2C1%2C36%2C3%22%3E%0A%20%20%20%20%3C%2Fpath%3E%0A%3C%2Fsvg%3E%0A"); +} +.spinner.spinner-check { + -webkit-animation: none; + animation: none; + background: url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%2036%2036%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20focusable%3D%22false%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%3E%3Cpath%20fill%3D%22%230072a3%22%20class%3D%22clr-i-outline%20clr-i-outline-path-1%22%20d%3D%22M13.72%2C27.69%2C3.29%2C17.27a1%2C1%2C0%2C0%2C1%2C1.41-1.41l9%2C9L31.29%2C7.29a1%2C1%2C0%2C0%2C1%2C1.41%2C1.41Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); +} +.alert-app-level .alert-item .btn .spinner, +.btn-sm .spinner { + height: 0.65rem; + width: 0.65rem; + min-height: 0.65rem; + min-width: 0.65rem; +} +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes spin { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +:root { + --clr-table-bgcolor: var(--clr-color-neutral-0); + --clr-thead-bgcolor: var(--clr-color-neutral-50); + --clr-table-header-border-bottom-color: var(--clr-color-neutral-400); + --clr-table-footer-border-top-color: var(--clr-color-neutral-400); + --clr-table-border-color: var(--clr-color-neutral-400); + --clr-tablerow-bordercolor: var(--clr-color-neutral-200); + --clr-table-border-radius: var(--clr-global-borderradius); + --clr-table-borderwidth: var(--clr-global-borderwidth); + --clr-table-cornercellradius: 0.1rem; + --clr-table-font-color: var(--clr-color-neutral-700); + --clr-thead-color: #666666; +} +.table { + border-collapse: separate; + border-style: solid; + border-width: 0.05rem; + border-width: var(--clr-table-borderwidth, 0.05rem); + border-color: #ccc; + border-color: var(--clr-table-border-color, #ccc); + border-radius: 0.15rem; + border-radius: var(--clr-table-border-radius, 0.15rem); + background-color: #fff; + background-color: var(--clr-table-bgcolor, #fff); + color: #666; + color: var(--clr-table-font-color, #666); + margin: 0; + margin-top: 1.2rem; + max-width: 100%; + width: 100%; +} +.table td, +.table th { + font-size: 0.65rem; + line-height: 0.7rem; + border-top-style: solid; + border-top-width: 0.05rem; + border-top-width: var(--clr-table-borderwidth, 0.05rem); + border-top-color: #e8e8e8; + border-top-color: var(--clr-tablerow-bordercolor, #e8e8e8); + padding: 0.55rem 0.6rem 0.55rem; + text-align: center; + vertical-align: top; +} +.table td.left, +.table th.left { + text-align: left; +} +.table td.left:first-child, +.table th.left:first-child { + padding-left: 0.3rem; +} +.table th { + color: #666; + color: var(--clr-thead-color, #666); + font-size: 0.55rem; + font-weight: 600; + letter-spacing: 0.03em; + background-color: #fafafa; + background-color: var(--clr-thead-bgcolor, #fafafa); + vertical-align: bottom; + border-bottom-style: solid; + border-bottom-width: 0.05rem; + border-bottom-width: var(--clr-table-borderwidth, 0.05rem); + border-bottom-color: #ccc; + border-bottom-color: var(--clr-table-border-color, #ccc); + border-top: 0 none; +} +.table tbody tr:first-child td { + border-top: 0 none; +} +.table tbody + tbody { + border-top-style: solid; + border-top-width: 0.05rem; + border-top-width: var(--clr-table-borderwidth, 0.05rem); + border-top-color: #ccc; + border-top-color: var(--clr-table-border-color, #ccc); +} +.table thead th:first-child { + border-radius: 0; + border-top-left-radius: 0.1rem; + border-top-left-radius: var(--clr-table-cornercellradius, 0.1rem); +} +.table thead th:last-child { + border-radius: 0; + border-top-right-radius: 0.1rem; + border-top-right-radius: var(--clr-table-cornercellradius, 0.1rem); +} +.table tbody:last-child tr:last-child td:first-child { + border-radius: 0; + border-bottom-left-radius: 0.1rem; + border-bottom-left-radius: var(--clr-table-cornercellradius, 0.1rem); +} +.table tbody:last-child tr:last-child td:last-child { + border-radius: 0; + border-bottom-right-radius: 0.1rem; + border-bottom-right-radius: var(--clr-table-cornercellradius, 0.1rem); +} +.table-compact td, +.table-compact th { + padding-top: 0.3rem; + padding-bottom: 0.25rem; +} +.table.table-vertical thead th { + border: 0 none; + border-radius: 0; + display: none; +} +.table.table-vertical th { + border-bottom: 0; + border-top-style: solid; + border-top-width: 0.05rem; + border-top-width: var(--clr-table-borderwidth, 0.05rem); + border-top-color: #ccc; + border-top-color: var(--clr-table-border-color, #ccc); + vertical-align: top; +} +.table.table-vertical td, +.table.table-vertical th { + text-align: left; + border-color: #ccc; + border-color: var(--clr-table-border-color, #ccc); +} +.table.table-vertical td:first-child, +.table.table-vertical th:first-child { + border-right-style: solid; + border-right-width: 0.05rem; + border-right-width: var(--clr-table-borderwidth, 0.05rem); + border-right-color: #ccc; + border-right-color: var(--clr-table-border-color, #ccc); + background-color: #fafafa; + background-color: var(--clr-thead-bgcolor, #fafafa); + font-weight: 600; +} +.table.table-vertical tbody:first-of-type tr:first-child td, +.table.table-vertical tbody:first-of-type tr:first-child th { + border-top: 0 none; +} +.table.table-vertical tbody:first-of-type tr:first-child td:first-child, +.table.table-vertical tbody:first-of-type tr:first-child th:first-child { + border-radius: 0; + border-top-left-radius: 0.1rem; + border-top-left-radius: var(--clr-table-cornercellradius, 0.1rem); +} +.table.table-vertical tbody:first-of-type tr:first-child td:last-child, +.table.table-vertical tbody:first-of-type tr:first-child th:last-child { + border-radius: 0; + border-top-right-radius: 0.1rem; + border-top-right-radius: var(--clr-table-cornercellradius, 0.1rem); +} +.table.table-vertical tbody:last-child tr:last-child td:first-child, +.table.table-vertical tbody:last-child tr:last-child th:first-child { + border-radius: 0; + border-bottom-left-radius: 0.1rem; + border-bottom-left-radius: var(--clr-table-cornercellradius, 0.1rem); +} +.table.table-vertical tbody:last-child tr:last-child td:last-child, +.table.table-vertical tbody:last-child tr:last-child th:last-child { + border-radius: 0; + border-bottom-right-radius: 0.1rem; + border-bottom-right-radius: var(--clr-table-cornercellradius, 0.1rem); +} +.table.table-noborder { + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + background-color: transparent; + border: 0; +} +.table.table-noborder th { + background-color: transparent; + border-bottom-color: #ccc; + border-bottom-color: var(--clr-table-border-color, #ccc); + border-top: 0 none; +} +.table.table-noborder th:first-child { + border-right: 0 none; +} +.table.table-noborder td { + border-top: 0 none; + padding-top: 0.6rem; +} +.table.table-noborder td:first-child { + border-right: 0 none; +} +.table.table-noborder thead th:first-child, +.table.table-noborder thead th:last-child { + border-radius: 0; +} +.table.table-noborder td, +.table.table-noborder th { + border-radius: 0 !important; +} +.table.table-noborder td:first-child, +.table.table-noborder th:first-child { + padding-left: 0; +} +.table.table-compact td, +.table.table-compact th { + padding-top: 0.3rem; + padding-bottom: 0.25rem; +} +.table.table-compact.table-noborder td, +.table.table-compact.table-noborder th { + padding-top: 0.35rem; + padding-bottom: 0.3rem; +} +:root { + --clr-tooltip-background-color: var(--clr-color-neutral-1000); + --clr-tooltip-border-radius: var(--clr-global-borderradius); + --clr-tooltip-color: var(--clr-color-neutral-0); + --clr-tooltip-font-weight: var(--clr-p3-font-weight); +} +.tooltip { + display: inline-block; + position: relative; + text-align: left; + overflow: visible; +} +.tooltip > .tooltip-content { + visibility: hidden; + opacity: 0; + -webkit-transition: opacity 0.3s linear; + transition: opacity 0.3s linear; + white-space: normal; + z-index: 1070; +} +.tooltip:focus > .tooltip-content, +.tooltip:hover > .tooltip-content { + visibility: visible; + opacity: 1; +} +.tooltip:focus > .tooltip-content:empty, +.tooltip:hover > .tooltip-content:empty { + visibility: hidden; + opacity: 0; +} +.tooltip:focus { + outline: 0; +} +.tooltip:focus > :first-child { + outline-offset: 0.05rem; + outline-width: 0.05rem; + outline-color: #3b99fc; + outline-style: solid; +} +.tooltip .tooltip-content.tooltip-top-right, +.tooltip.tooltip-top-right > .tooltip-content, +.tooltip > .tooltip-content { + color: #fff; + color: var(--clr-tooltip-color, #fff); + font-size: 0.65rem; + font-weight: 400; + font-weight: var(--clr-tooltip-font-weight, 400); + letter-spacing: normal; + background-color: #000; + background-color: var(--clr-tooltip-background-color, #000); + border-radius: 0.15rem; + border-radius: var(--clr-tooltip-border-radius, 0.15rem); + line-height: 0.9rem; + margin: 0; + padding: 0.45rem 0.6rem; + width: 12rem; + position: absolute; + top: auto; + bottom: 100%; + left: 50%; + right: auto; + border-bottom-left-radius: 0; + margin-bottom: 0.8rem; +} +.tooltip .tooltip-content.tooltip-top-right::before, +.tooltip.tooltip-top-right > .tooltip-content::before, +.tooltip > .tooltip-content::before { + position: absolute; + bottom: -0.42rem; + left: 0; + top: auto; + right: auto; + content: ""; + border-left: 0.3rem solid #000; + border-left-color: var(--clr-tooltip-background-color); + border-top: 0.25rem solid #000; + border-top-color: var(--clr-tooltip-background-color); + border-right: 0.3rem solid transparent; + border-bottom: 0.25rem solid transparent; +} +.tooltip .tooltip-content.tooltip-top-left, +.tooltip.tooltip-top-left > .tooltip-content { + color: #fff; + color: var(--clr-tooltip-color, #fff); + font-size: 0.65rem; + font-weight: 400; + font-weight: var(--clr-tooltip-font-weight, 400); + letter-spacing: normal; + background-color: #000; + background-color: var(--clr-tooltip-background-color, #000); + border-radius: 0.15rem; + border-radius: var(--clr-tooltip-border-radius, 0.15rem); + line-height: 0.9rem; + margin: 0; + padding: 0.45rem 0.6rem; + width: 12rem; + position: absolute; + top: auto; + bottom: 100%; + right: 50%; + left: auto; + border-bottom-right-radius: 0; + margin-bottom: 0.8rem; +} +.tooltip .tooltip-content.tooltip-top-left::before, +.tooltip.tooltip-top-left > .tooltip-content::before { + position: absolute; + bottom: -0.42rem; + right: 0; + top: auto; + left: auto; + content: ""; + border-right: 0.3rem solid #000; + border-right-color: var(--clr-tooltip-background-color); + border-top: 0.25rem solid #000; + border-top-color: var(--clr-tooltip-background-color); + border-left: 0.3rem solid transparent; + border-bottom: 0.25rem solid transparent; +} +.tooltip .tooltip-content.tooltip-bottom-right, +.tooltip.tooltip-bottom-right > .tooltip-content { + color: #fff; + color: var(--clr-tooltip-color, #fff); + font-size: 0.65rem; + font-weight: 400; + font-weight: var(--clr-tooltip-font-weight, 400); + letter-spacing: normal; + background-color: #000; + background-color: var(--clr-tooltip-background-color, #000); + border-radius: 0.15rem; + border-radius: var(--clr-tooltip-border-radius, 0.15rem); + line-height: 0.9rem; + margin: 0; + padding: 0.45rem 0.6rem; + width: 12rem; + position: absolute; + bottom: auto; + top: 100%; + left: 50%; + right: auto; + border-top-left-radius: 0; + margin-top: 0.8rem; +} +.tooltip .tooltip-content.tooltip-bottom-right::before, +.tooltip.tooltip-bottom-right > .tooltip-content::before { + position: absolute; + top: -0.42rem; + left: 0; + bottom: auto; + right: auto; + content: ""; + border-left: 0.3rem solid #000; + border-left-color: var(--clr-tooltip-background-color); + border-bottom: 0.25rem solid #000; + border-bottom-color: var(--clr-tooltip-background-color); + border-right: 0.3rem solid transparent; + border-top: 0.25rem solid transparent; +} +.tooltip .tooltip-content.tooltip-bottom-left, +.tooltip.tooltip-bottom-left > .tooltip-content { + color: #fff; + color: var(--clr-tooltip-color, #fff); + font-size: 0.65rem; + font-weight: 400; + font-weight: var(--clr-tooltip-font-weight, 400); + letter-spacing: normal; + background-color: #000; + background-color: var(--clr-tooltip-background-color, #000); + border-radius: 0.15rem; + border-radius: var(--clr-tooltip-border-radius, 0.15rem); + line-height: 0.9rem; + margin: 0; + padding: 0.45rem 0.6rem; + width: 12rem; + position: absolute; + bottom: auto; + top: 100%; + right: 50%; + left: auto; + border-top-right-radius: 0; + margin-top: 0.8rem; +} +.tooltip .tooltip-content.tooltip-bottom-left::before, +.tooltip.tooltip-bottom-left > .tooltip-content::before { + position: absolute; + top: -0.42rem; + right: 0; + bottom: auto; + left: auto; + content: ""; + border-right: 0.3rem solid #000; + border-right-color: var(--clr-tooltip-background-color); + border-bottom: 0.25rem solid #000; + border-bottom-color: var(--clr-tooltip-background-color); + border-left: 0.3rem solid transparent; + border-top: 0.25rem solid transparent; +} +.tooltip .tooltip-content.tooltip-right, +.tooltip.tooltip-right > .tooltip-content { + position: absolute; + right: auto; + left: 100%; + top: 50%; + bottom: auto; + color: #fff; + color: var(--clr-tooltip-color, #fff); + font-size: 0.65rem; + font-weight: 400; + font-weight: var(--clr-tooltip-font-weight, 400); + letter-spacing: normal; + background-color: #000; + background-color: var(--clr-tooltip-background-color, #000); + border-radius: 0.15rem; + border-radius: var(--clr-tooltip-border-radius, 0.15rem); + line-height: 0.9rem; + margin: 0; + padding: 0.45rem 0.6rem; + width: 12rem; + border-top-left-radius: 0; + margin-left: 0.8rem; +} +.tooltip .tooltip-content.tooltip-right::before, +.tooltip.tooltip-right > .tooltip-content::before { + position: absolute; + top: 0; + left: -0.45rem; + bottom: auto; + right: auto; + content: ""; + border-top: 0.3rem solid #000; + border-top-color: var(--clr-tooltip-background-color); + border-right: 0.25rem solid #000; + border-right-color: var(--clr-tooltip-background-color); + border-bottom: 0.3rem solid transparent; + border-left: 0.25rem solid transparent; +} +.tooltip .tooltip-content.tooltip-left, +.tooltip.tooltip-left > .tooltip-content { + position: absolute; + left: auto; + right: 100%; + top: 50%; + bottom: auto; + color: #fff; + color: var(--clr-tooltip-color, #fff); + font-size: 0.65rem; + font-weight: 400; + font-weight: var(--clr-tooltip-font-weight, 400); + letter-spacing: normal; + background-color: #000; + background-color: var(--clr-tooltip-background-color, #000); + border-radius: 0.15rem; + border-radius: var(--clr-tooltip-border-radius, 0.15rem); + line-height: 0.9rem; + margin: 0; + padding: 0.45rem 0.6rem; + width: 12rem; + border-top-right-radius: 0; + margin-right: 0.8rem; +} +.tooltip .tooltip-content.tooltip-left::before, +.tooltip.tooltip-left > .tooltip-content::before { + position: absolute; + top: 0; + right: -0.45rem; + bottom: auto; + left: auto; + content: ""; + border-top: 0.3rem solid #000; + border-top-color: var(--clr-tooltip-background-color); + border-left: 0.25rem solid #000; + border-left-color: var(--clr-tooltip-background-color); + border-bottom: 0.3rem solid transparent; + border-right: 0.25rem solid transparent; +} +.tooltip .tooltip-content.tooltip-xs, +.tooltip.tooltip-xs > .tooltip-content { + width: 3.6rem; +} +.tooltip .tooltip-content.tooltip-sm, +.tooltip.tooltip-sm > .tooltip-content { + width: 6rem; +} +.tooltip .tooltip-content.tooltip-md, +.tooltip.tooltip-md > .tooltip-content { + width: 12rem; +} +.tooltip .tooltip-content.tooltip-lg, +.tooltip.tooltip-lg > .tooltip-content { + width: 18rem; +} +.tooltip.tooltip-top-left > .btn + .tooltip-content, +.tooltip.tooltip-top-right > .btn + .tooltip-content, +.tooltip > .btn + .tooltip-content { + margin-bottom: 0.5rem; +} +.tooltip.tooltip-bottom-left > .btn + .tooltip-content, +.tooltip.tooltip-bottom-right > .btn + .tooltip-content { + margin-top: 0.5rem; +} +.tooltip.tooltip-right > .btn + .tooltip-content { + margin-left: 0.2rem; +} +.tooltip > .clr-icon { + margin-right: 0; +} +.tooltip cds-icon > svg { + pointer-events: none; +} +.tooltip-trigger:focus + .tooltip-content { + visibility: visible; +} +:root { + --clr-form-disabled-background-color: var(--clr-color-neutral-400); + --clr-forms-label-color: var(--clr-color-neutral-800); + --clr-forms-text-color: var(--clr-color-neutral-1000); + --clr-forms-invalid-color: var(--clr-color-danger-800); + --clr-forms-valid-color: var(--clr-color-success-700); + --clr-forms-valid-text-color: var(--clr-color-success-900); + --clr-forms-subtext-color: var(--clr-color-neutral-600); + --clr-forms-placeholder-color: var(--clr-color-neutral-600); + --clr-forms-border-color: var(--clr-color-neutral-500); + --clr-forms-focused-color: var(--clr-color-action-600); + --clr-forms-subtext-disabled-color: #8c8c8c; + --clr-forms-border-disabled-color: #b3b3b3; + --clr-forms-text-disabled-color: #b3b3b3; + --clr-forms-label-disabled-color: #8c8c8c; + --clr-forms-label-font-weight: var(--clr-font-weight-bold); + --clr-forms-block-label-font-weight: 400; + --clr-forms-text-font-weight: 400; + --clr-forms-textarea-background-color: var(--clr-color-neutral-0); + --clr-forms-textarea-focused-outline: 0 0 0.1rem 0.1rem #69c0e2; + --clr-forms-textarea-invalid-focused-outline: 0 0 0.1rem 0.1rem #ff745c; + --clr-forms-select-hover-background: rgba(222, 222, 222, 0.5); + --clr-forms-select-caret-hover-color: var(--clr-color-neutral-600); + --clr-forms-select-caret-color: var(--clr-color-neutral-500); + --clr-forms-select-option-color: var(--clr-forms-text-color); + --clr-forms-select-multiple-background-color: var( + --clr-forms-textarea-background-color + ); + --clr-forms-select-multiple-border-color: var(--clr-color-neutral-400); + --clr-forms-select-multiple-option-color: var(--clr-forms-text-color); + --clr-forms-select-multiple-error-focus-color: #ff745c; + --clr-forms-checkbox-label-color: var(--clr-forms-label-color); + --clr-forms-checkbox-background-color: var(--clr-color-action-600); + --clr-forms-checkbox-indeterminate-border-color: var( + --clr-color-action-600 + ); + --clr-forms-checkbox-mark-color: var(--clr-color-neutral-0); + --clr-forms-checkbox-disabled-background-color: var( + --clr-form-disabled-background-color + ); + --clr-forms-checkbox-disabled-mark-color: var(--clr-color-neutral-1000); + --clr-forms-checkbox-border-radius: var(--clr-global-borderradius); + --clr-forms-checkbox-checked-shadow: inset 0 0 0 0.3rem + var(--clr-forms-checkbox-background-color); + --clr-forms-radio-label-color: var(--clr-forms-checkbox-label-color); + --clr-forms-radio-disabled-background-color: var( + --clr-form-disabled-background-color + ); + --clr-forms-radio-disabled-mark-color: var( + --clr-forms-checkbox-disabled-mark-color + ); + --clr-forms-radio-selected-shadow: var(--clr-forms-checkbox-checked-shadow); + --clr-forms-radio-disabled-shadow: var(--clr-forms-checkbox-checked-shadow); + --clr-forms-radio-focused-shadow: 0 0 0.1rem 0.1rem #69c0e2; + --clr-forms-range-progress-fill-color: var(--clr-color-action-600); + --clr-forms-range-track-color: var(--clr-color-neutral-200); +} +.clr-date-container .clr-input-wrapper { + max-width: -webkit-fit-content; + max-width: -moz-fit-content; + max-width: fit-content; +} +.clr-form-control { + margin-top: 1.2rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; +} +.clr-form-control-disabled { + color: #b3b3b3; + color: var(--clr-forms-text-disabled-color, #b3b3b3); +} +.clr-form-control-disabled .clr-control-label, +.clr-form-control-disabled label { + color: #8c8c8c; + color: var(--clr-forms-label-disabled-color, #8c8c8c); +} +.clr-form-control-disabled .clr-input, +.clr-form-control-disabled .clr-select, +.clr-form-control-disabled .clr-textarea { + color: #b3b3b3; + color: var(--clr-forms-text-disabled-color, #b3b3b3); + border-bottom-color: #b3b3b3; + border-bottom-color: var(--clr-forms-border-disabled-color, #b3b3b3); +} +.clr-form-control-disabled input[type="range"]::-webkit-slider-thumb { + background-color: #b3b3b3; + background-color: var(--clr-forms-border-disabled-color, #b3b3b3); +} +.clr-form-control-disabled .clr-subtext { + color: #8c8c8c; + color: var(--cclr-forms-subtext-disabled-color, #8c8c8c); +} +.clr-form-control-multi { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.clr-form-control-multi .clr-control-label { + width: 100%; +} +.clr-control-label { + display: block; + color: #454545; + color: var(--clr-forms-label-color, #454545); + font-size: 0.65rem; + font-weight: 600; + font-weight: var(--clr-forms-label-font-weight, 600); + line-height: 0.9rem; +} +.clr-control-container { + display: inline-block; +} +.clr-control-inline { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-line-pack: start; + align-content: flex-start; +} +.clr-control-inline .clr-control-label { + display: inline-block; + margin-right: 0.6rem; + width: auto; +} +.clr-subtext { + display: block; + font-size: 0.55rem; + line-height: 0.6rem; + color: #8c8c8c; + color: var(--clr-forms-subtext-color, #8c8c8c); + margin-top: 0.3rem; +} +.clr-subtext-wrapper { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.clr-validate-icon { + height: 1.2rem; + width: 1.2rem; + min-height: 1.2rem; + min-width: 1.2rem; + color: #c21d00; + color: var(--clr-forms-invalid-color, #c21d00); + display: none; + margin-left: -1.2rem; +} +.clr-success .clr-input { + border-bottom-color: #3c8500; + border-bottom-color: var(--clr-forms-valid-color, #3c8500); +} +.clr-success .clr-validate-icon { + display: inline-block; + color: #3c8500; + color: var(--clr-forms-valid-color, #3c8500); + margin-left: -0.2rem; +} +.clr-success .clr-subtext { + color: #255200; + color: var(--clr-forms-valid-text-color, #255200); +} +.clr-error .clr-validate-icon { + margin-left: -0.2rem; + display: inline-block; +} +.clr-error .clr-subtext { + color: #c21d00; + color: var(--clr-forms-invalid-color, #c21d00); +} +.clr-form-horizontal .clr-form-control > .clr-control-label, +.clr-form-horizontal + .clr-form-control + > .clr-form-control.clr-form-control-multi + .clr-control-label { + width: 9.6rem; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-top: 0.15rem; +} +.clr-form-horizontal.clr-row .clr-control-label { + width: auto; +} +.clr-form-horizontal .clr-form-control { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; +} +.clr-form-compact .clr-form-control > .clr-control-label { + width: 9.6rem; + min-width: 9.6rem; +} +.clr-form-compact .clr-form-control.clr-row > .clr-control-label { + width: auto; + min-width: auto; +} +.clr-form-compact .clr-control-label { + margin-top: 0.15rem; +} +.clr-form-compact .clr-form-control { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + margin-top: 0.6rem; +} +.clr-form-compact .clr-control-container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.clr-form-compact .clr-subtext { + display: inline-block; + margin-top: 0.3rem; + margin-left: 1.2rem; +} +.clr-form-compact .clr-error .clr-subtext, +.clr-form-compact .clr-success .clr-subtext { + margin-left: 0; +} +.clr-form-compact .clr-error .clr-validate-icon, +.clr-form-compact .clr-success .clr-validate-icon { + margin-left: 0; +} +.clr-form-compact .clr-subtext-wrapper { + -ms-flex-preferred-size: auto; + flex-basis: auto; + display: inline-block; +} +.clr-form { + padding: 0.3rem; +} +.clr-form-group { + padding: 0.3rem; +} +.clr-checkbox-wrapper { + position: relative; +} +.clr-checkbox-wrapper .clr-control-label { + font-weight: 400; + display: block; +} +.clr-checkbox-wrapper ~ .clr-validate-icon { + margin-left: 0; +} +.clr-checkbox-wrapper ~ .clr-subtext { + display: inline-block; +} +.clr-checkbox-wrapper input[type="checkbox"] { + position: absolute; + opacity: 0; + top: 0.25rem; + left: 0; + height: 0.8rem; + width: 0.8rem; +} +.clr-checkbox-wrapper label { + position: relative; + display: inline-block; + min-height: 1.2rem; + padding-left: 1.1rem; + margin-top: 0; + cursor: pointer; + line-height: 1.2rem; + color: #454545; + color: var(--clr-forms-checkbox-label-color, #454545); +} +.clr-checkbox-wrapper input[type="checkbox"] + label::before { + position: absolute; + top: 0.2rem; + left: 0; + content: ""; + display: inline-block; + height: 0.8rem; + width: 0.8rem; + border: 0.05rem solid; + border-color: #b3b3b3; + border-color: var(--clr-forms-border-color, #b3b3b3); + border-radius: 0.15rem; + border-radius: var(--clr-forms-checkbox-border-radius, 0.15rem); +} +.clr-checkbox-wrapper input[type="checkbox"]:focus + label::before { + outline: 0; + -webkit-box-shadow: 0 0 0.1rem 0.1rem #69c0e2; + box-shadow: 0 0 0.1rem 0.1rem #69c0e2; +} +.clr-checkbox-wrapper input[type="checkbox"] + label::after { + position: absolute; + content: ""; + display: none; + height: 0.25rem; + width: 0.4rem; + border-left: 0.1rem solid; + border-bottom: 0.1rem solid; + border-color: #fff; + border-color: var(--clr-forms-checkbox-mark-color, #fff); + top: 0.2rem; + left: 0.2rem; + -webkit-transform: translate(0, 0.2rem) rotate(-45deg); + transform: translate(0, 0.2rem) rotate(-45deg); +} +.clr-checkbox-wrapper input[type="checkbox"]:checked + label::before { + background: #0072a3; + background: var(--clr-forms-checkbox-background-color, #0072a3); + border: none; +} +.clr-checkbox-wrapper input[type="checkbox"]:checked + label::after { + display: inline-block; +} +.clr-checkbox-wrapper input[type="checkbox"].clr-indeterminate + label::before, +.clr-checkbox-wrapper input[type="checkbox"]:indeterminate + label::before { + border: 0.05rem solid; + border-color: #0072a3; + border-color: var(--clr-forms-checkbox-indeterminate-border-color, #0072a3); +} +.clr-checkbox-wrapper input[type="checkbox"].clr-indeterminate + label::after, +.clr-checkbox-wrapper input[type="checkbox"]:indeterminate + label::after { + border-left: none; + border-bottom-color: #0072a3; + border-bottom-color: var( + --clr-forms-checkbox-indeterminate-border-color, + #0072a3 + ); + display: inline-block; + -webkit-transform: translate(0, 0.2rem); + transform: translate(0, 0.2rem); +} +.clr-checkbox-wrapper.clr-checkbox-inline { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-line-pack: start; + align-content: flex-start; +} +.clr-checkbox-wrapper.clr-checkbox-inline .clr-control-label { + display: inline-block; + margin-right: 0.6rem; + width: auto; +} +.clr-error .clr-checkbox-wrapper input[type="checkbox"] + label::before { + border-color: #c21d00; + border-color: var(--clr-forms-invalid-color, #c21d00); +} +.clr-form-control-disabled .clr-checkbox-wrapper label { + cursor: not-allowed; +} +.clr-form-control-disabled + .clr-checkbox-wrapper + input[type="checkbox"] + + label::before, +.clr-form-control-disabled + .clr-checkbox-wrapper + input[type="checkbox"]:checked + + label::before { + background-color: #ccc; + background-color: var(--clr-forms-checkbox-disabled-background-color, #ccc); + border: none; +} +.clr-form-control-disabled + .clr-checkbox-wrapper + input[type="checkbox"]:checked + + label::after { + border-left: 0.1rem solid; + border-bottom: 0.1rem solid; + border-left-color: #000; + border-left-color: var(--clr-forms-checkbox-disabled-mark-color, #000); + border-bottom-color: #000; + border-bottom-color: var(--clr-forms-checkbox-disabled-mark-color, #000); +} +.clr-form-control-disabled + .clr-checkbox-wrapper + input[type="checkbox"]:checked.clr-indeterminate + + label::after, +.clr-form-control-disabled + .clr-checkbox-wrapper + input[type="checkbox"]:checked:indeterminate + + label::after { + border-left: none; +} +.clr-form-compact .clr-checkbox-wrapper { + max-width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-line-pack: start; + align-content: flex-start; + height: 1.2rem; +} +.clr-form-compact .clr-checkbox-wrapper ~ .clr-subtext { + margin-left: 0.3rem; +} +.clr-form-compact .clr-checkbox-wrapper .clr-control-label { + display: inline-block; + margin-right: 0.6rem; + width: auto; +} +.clr-form-compact .clr-checkbox-wrapper .clr-control-label { + margin-top: 0; +} +.clr-file-wrapper { + position: relative; + margin-top: 0.3rem; +} +.clr-file-wrapper .clr-control-label { + font-weight: 400; + display: block; +} +.clr-file-wrapper ~ .clr-validate-icon { + margin-left: 0; +} +.clr-file-wrapper ~ .clr-subtext { + display: inline-block; +} +.clr-file-wrapper .btn { + margin: 0; +} +.clr-file { + height: 0; + width: 0; + opacity: 0; + overflow: hidden; + position: absolute; + z-index: -1; +} +.clr-form-compact .clr-file-wrapper { + max-width: 100%; + margin-top: 0; +} +.clr-form-compact .clr-file-wrapper ~ .clr-subtext { + margin-left: 0.3rem; +} +.clr-form-compact .clr-file-wrapper ~ .clr-validate-icon { + line-height: 1.2rem; +} +.clr-form-compact .clr-file-wrapper ~ .clr-subtext { + line-height: 1.2rem; + margin-top: 0; +} +.clr-form-compact .clr-file-wrapper .clr-control-label { + margin-top: 0; + line-height: 1.08rem; +} +.clr-form-compact .clr-file-wrapper .btn { + height: 1.2rem; +} +.clr-input-wrapper { + white-space: nowrap; + max-height: 1.2rem; +} +.clr-input { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + background: 0 0; + height: 1.2rem; + color: #000; + color: var(--clr-forms-text-color, #000); + border-bottom: 0.05rem solid; + border-bottom-color: #b3b3b3; + border-bottom-color: var(--clr-forms-border-color, #b3b3b3); + display: inline-block; + padding: 0 0.3rem; + max-height: 1.2rem; + font-size: 0.65rem; +} +.clr-input:focus { + outline: 0; +} +.clr-input[readonly] { + border: none; +} +.clr-input:not([readonly]) { + background: -webkit-gradient( + linear, + left top, + left bottom, + color-stop(95%, transparent), + color-stop(95%, var(--clr-forms-focused-color, #0072a3)) + ) + no-repeat; + background: linear-gradient( + to bottom, + transparent 95%, + var(--clr-forms-focused-color, #0072a3) 95% + ) + no-repeat; + background-size: 0 100%; + -webkit-transition: background-size 0.2s ease; + transition: background-size 0.2s ease; +} +.clr-input:not([readonly]).clr-focus, +.clr-input:not([readonly]):focus { + border-bottom-color: #0072a3; + border-bottom-color: var(--clr-forms-focused-color, #0072a3); + background-size: 100% 100%; +} +.clr-input:disabled { + color: #b3b3b3; + color: var(--clr-forms-text-disabled-color, #b3b3b3); + cursor: not-allowed; +} +.clr-error .clr-input:not([readonly]) { + border-bottom-color: #c21d00; + border-bottom-color: var(--clr-forms-invalid-color, #c21d00); + background: -webkit-gradient( + linear, + left top, + left bottom, + color-stop(95%, transparent), + color-stop(95%, var(--clr-forms-invalid-color, #c21d00)) + ) + no-repeat; + background: linear-gradient( + to bottom, + transparent 95%, + var(--clr-forms-invalid-color, #c21d00) 95% + ) + no-repeat; + background-size: 0 100%; + -webkit-transition: background-size 0.2s ease; + transition: background-size 0.2s ease; +} +.clr-error .clr-input:not([readonly]).clr-focus, +.clr-error .clr-input:not([readonly]):focus { + border-bottom-color: #c21d00; + border-bottom-color: var(--clr-forms-invalid-color, #c21d00); + background-size: 100% 100%; +} +.clr-form-control.row .clr-input-wrapper { + max-width: calc(100% - 1.2rem); +} +.clr-form-compact .clr-input { + max-width: 100%; +} +.clr-form-compact .clr-input ~ .clr-subtext { + margin-left: 0.3rem; +} +.clr-form-control-readonly .clr-input { + border: none; +} +.clr-form-control-multi .clr-input { + max-width: calc(100% + 1.2rem); +} +::-webkit-input-placeholder { + color: #8c8c8c; + color: var(--clr-forms-placeholder-color, #8c8c8c); +} +:-ms-input-placeholder { + color: #8c8c8c; + color: var(--clr-forms-placeholder-color, #8c8c8c); +} +::-ms-input-placeholder { + color: #8c8c8c; + color: var(--clr-forms-placeholder-color, #8c8c8c); +} +::-webkit-input-placeholder { + color: #8c8c8c; + color: var(--clr-forms-placeholder-color, #8c8c8c); +} +::-moz-placeholder { + color: #8c8c8c; + color: var(--clr-forms-placeholder-color, #8c8c8c); +} +:-ms-input-placeholder { + color: #8c8c8c; + color: var(--clr-forms-placeholder-color, #8c8c8c); +} +::-ms-input-placeholder { + color: #8c8c8c; + color: var(--clr-forms-placeholder-color, #8c8c8c); +} +::placeholder { + color: #8c8c8c; + color: var(--clr-forms-placeholder-color, #8c8c8c); +} +.clr-input-group { + color: #000; + color: var(--clr-forms-text-color, #000); + border-bottom: 0.05rem solid; + border-bottom-color: #b3b3b3; + border-bottom-color: var(--clr-forms-border-color, #b3b3b3); + display: inline-block; + background: -webkit-gradient( + linear, + left top, + left bottom, + color-stop(95%, transparent), + color-stop(95%, var(--clr-forms-focused-color, #0072a3)) + ) + no-repeat; + background: linear-gradient( + to bottom, + transparent 95%, + var(--clr-forms-focused-color, #0072a3) 95% + ) + no-repeat; + background-size: 0 100%; + -webkit-transition: background-size 0.2s ease; + transition: background-size 0.2s ease; + max-width: 100%; + height: 1.2rem; +} +.clr-input-group.clr-focus, +.clr-input-group:focus { + border-bottom-color: #0072a3; + border-bottom-color: var(--clr-forms-focused-color, #0072a3); + background-size: 100% 100%; +} +.clr-input-group .clr-input { + background: 0 0; + border: none; + margin-right: 0; + max-width: 100%; +} +.clr-input-group .clr-input:not([readonly]):focus { + background-size: 0; + border: 0; +} +.clr-input-group select { + border: none; +} +.clr-input-group .clr-multiselect-wrapper select, +.clr-input-group .clr-select-wrapper select { + border: none; +} +.clr-input-group .clr-input-group-addon { + color: #8c8c8c; + color: var(--clr-forms-subtext-color, #8c8c8c); +} +.clr-input-group .clr-input-group-addon:first-child { + padding: 0 0 0 0.45rem; +} +.clr-input-group .clr-input-group-addon:last-child { + padding: 0 0.45rem 0 0; +} +.clr-input-group .clr-input-group-icon-action { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + background: 0 0; + color: #0072a3; + color: var(--clr-forms-focused-color, #0072a3); + padding: 0 0.45rem; +} +button.clr-input-group .clr-input-group-icon-action { + cursor: pointer; +} +.clr-input-group .clr-input-group-icon-action cds-icon { + height: 0.9rem; + width: 0.9rem; + -webkit-transform: translate(-0.05rem, -0.05rem); + transform: translate(-0.05rem, -0.05rem); +} +.clr-form-control-disabled .clr-input-group-icon-action { + color: #b3b3b3; + color: var(--clr-forms-text-disabled-color, #b3b3b3); + cursor: not-allowed; +} +.clr-error .clr-input-group { + border-bottom-color: #c21d00; + border-bottom-color: var(--clr-forms-invalid-color, #c21d00); + background: -webkit-gradient( + linear, + left top, + left bottom, + color-stop(95%, transparent), + color-stop(95%, var(--clr-forms-invalid-color, #c21d00)) + ) + no-repeat; + background: linear-gradient( + to bottom, + transparent 95%, + var(--clr-forms-invalid-color, #c21d00) 95% + ) + no-repeat; + background-size: 0 100%; + -webkit-transition: background-size 0.2s ease; + transition: background-size 0.2s ease; +} +.clr-error .clr-input-group.clr-focus, +.clr-error .clr-input-group:focus { + border-bottom-color: #c21d00; + border-bottom-color: var(--clr-forms-invalid-color, #c21d00); + background-size: 100% 100%; +} +.clr-form-horizontal .clr-input-group { + max-width: 100%; + padding-right: 0; +} +.clr-radio-wrapper { + position: relative; + line-height: 1.2rem; +} +.clr-radio-wrapper .clr-control-label { + font-weight: 400; + display: block; +} +.clr-radio-wrapper ~ .clr-validate-icon { + margin-left: 0; +} +.clr-radio-wrapper ~ .clr-subtext { + display: inline-block; +} +.clr-radio-wrapper input[type="radio"] { + position: absolute; + opacity: 0; + top: 0.25rem; + left: 0; + height: 0.8rem; + width: 0.8rem; +} +.clr-radio-wrapper label { + position: relative; + display: inline-block; + min-height: 1.2rem; + padding-left: 1.1rem; + margin-top: 0; + cursor: pointer; + line-height: 1.2rem; + color: #454545; + color: var(--clr-forms-radio-label-color, #454545); +} +.clr-radio-wrapper label:empty { + padding-left: 0; +} +.clr-radio-wrapper input[type="radio"] + label::before { + position: absolute; + top: 0.2rem; + left: 0; + content: ""; + display: inline-block; + height: 0.8rem; + width: 0.8rem; + border: 0.05rem solid; + border-color: #b3b3b3; + border-color: var(--clr-forms-border-color, #b3b3b3); + border-radius: 50%; +} +.clr-radio-wrapper input[type="radio"]:checked + label::before { + -webkit-box-shadow: inset 0 0 0 0.3rem #0072a3; + box-shadow: inset 0 0 0 0.3rem #0072a3; + -webkit-box-shadow: var( + --clr-forms-radio-selected-shadow, + inset 0 0 0 0.3rem #0072a3 + ); + box-shadow: var( + --clr-forms-radio-selected-shadow, + inset 0 0 0 0.3rem #0072a3 + ); + border: none; +} +.clr-radio-wrapper input[type="radio"]:focus + label::before { + outline: 0; + -webkit-box-shadow: 0 0 0.1rem 0.1rem #69c0e2; + box-shadow: 0 0 0.1rem 0.1rem #69c0e2; + -webkit-box-shadow: var( + --clr-forms-radio-focused-shadow, + 0 0 0.1rem 0.1rem #69c0e2 + ); + box-shadow: var( + --clr-forms-radio-focused-shadow, + 0 0 0.1rem 0.1rem #69c0e2 + ); +} +.clr-radio-wrapper input[type="radio"]:focus:checked + label::before { + outline: 0; + -webkit-box-shadow: inset 0 0 0 0.3rem #0072a3, 0 0 0.1rem 0.1rem #69c0e2; + box-shadow: inset 0 0 0 0.3rem #0072a3, 0 0 0.1rem 0.1rem #69c0e2; + -webkit-box-shadow: var( + --clr-forms-radio-selected-shadow, + inset 0 0 0 0.3rem #0072a3 + ), + var(--clr-forms-radio-focused-shadow, 0 0 0.1rem 0.1rem #69c0e2); + box-shadow: var( + --clr-forms-radio-selected-shadow, + inset 0 0 0 0.3rem #0072a3 + ), + var(--clr-forms-radio-focused-shadow, 0 0 0.1rem 0.1rem #69c0e2); +} +.clr-radio-wrapper.disabled input[type="radio"]:checked + label::before { + background-color: #ccc; + background-color: var(--clr-forms-radio-disabled-background-color, #ccc); + -webkit-box-shadow: inset 0 0 0 0.3rem #0072a3; + box-shadow: inset 0 0 0 0.3rem #0072a3; + -webkit-box-shadow: var( + --clr-forms-radio-disabled-shadow, + inset 0 0 0 0.3rem #0072a3 + ); + box-shadow: var( + --clr-forms-radio-disabled-shadow, + inset 0 0 0 0.3rem #0072a3 + ); +} +.clr-form-control-disabled .clr-radio-wrapper label { + cursor: not-allowed; +} +.clr-error .clr-radio-wrapper input[type="radio"] + label::before { + border-color: #c21d00; + border-color: var(--clr-forms-invalid-color, #c21d00); +} +.clr-form-compact .clr-error .clr-subtext { + margin-left: 0; +} +.clr-form-compact .clr-radio-wrapper { + max-width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-line-pack: start; + align-content: flex-start; + height: 1.2rem; +} +.clr-form-compact .clr-radio-wrapper ~ .clr-subtext { + margin-left: 0.3rem; +} +.clr-form-compact .clr-radio-wrapper .clr-control-label { + display: inline-block; + margin-right: 0.6rem; + width: auto; +} +.clr-form-compact .clr-radio-wrapper .clr-control-label { + margin-top: 0; +} +.clr-multiselect-wrapper, +.clr-select-wrapper { + position: relative; + white-space: nowrap; +} +.clr-multiselect-wrapper select, +.clr-select-wrapper select { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + background: 0 0; + height: 1.2rem; + color: #000; + color: var(--clr-forms-text-color, #000); + border-bottom: 0.05rem solid; + border-bottom-color: #b3b3b3; + border-bottom-color: var(--clr-forms-border-color, #b3b3b3); + display: inline-block; + background: -webkit-gradient( + linear, + left top, + left bottom, + color-stop(95%, transparent), + color-stop(95%, var(--clr-forms-focused-color, #0072a3)) + ) + no-repeat; + background: linear-gradient( + to bottom, + transparent 95%, + var(--clr-forms-focused-color, #0072a3) 95% + ) + no-repeat; + background-size: 0 100%; + -webkit-transition: background-size 0.2s ease; + transition: background-size 0.2s ease; + position: relative; + padding: 0 1.1rem 0 0.3rem; + cursor: pointer; + font-size: 0.65rem; + z-index: 2; +} +.clr-multiselect-wrapper select:focus, +.clr-select-wrapper select:focus { + outline: 0; +} +.clr-multiselect-wrapper select.clr-focus, +.clr-multiselect-wrapper select:focus, +.clr-select-wrapper select.clr-focus, +.clr-select-wrapper select:focus { + border-bottom-color: #0072a3; + border-bottom-color: var(--clr-forms-focused-color, #0072a3); + background-size: 100% 100%; +} +.clr-multiselect-wrapper select:active, +.clr-multiselect-wrapper select:hover, +.clr-select-wrapper select:active, +.clr-select-wrapper select:hover { + border-color: rgba(222, 222, 222, 0.5); + border-color: var( + --clr-forms-select-hover-background, + rgba(222, 222, 222, 0.5) + ); + background: rgba(222, 222, 222, 0.5); + background: var( + --clr-forms-select-hover-background, + rgba(222, 222, 222, 0.5) + ); +} +.clr-multiselect-wrapper select:disabled, +.clr-select-wrapper select:disabled { + color: #b3b3b3; + color: var(--clr-forms-text-disabled-color, #b3b3b3); + cursor: not-allowed; +} +.clr-multiselect-wrapper select option, +.clr-select-wrapper select option { + color: #000; + color: var(--clr-forms-select-option-color, #000); +} +.clr-multiselect-wrapper select::-ms-expand, +.clr-select-wrapper select::-ms-expand { + display: none; +} +.clr-select-wrapper { + max-height: 1.2rem; + display: inline-block; +} +.clr-select-wrapper::after { + position: absolute; + content: ""; + height: 0.5rem; + width: 0.5rem; + top: 0.35rem; + right: 0.3rem; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%3E.cls-1%7Bfill%3A%23b3b3b3%3B%7D%3C%2Fstyle%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M6%2C9L1.2%2C4.2a0.68%2C0.68%2C0%2C0%2C1%2C1-1L6%2C7.08%2C9.84%2C3.24a0.68%2C0.68%2C0%2C1%2C1%2C1%2C1Z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); + background-repeat: no-repeat; + background-size: contain; + vertical-align: middle; + margin: 0; +} +.clr-select-wrapper:hover::after { + color: #8c8c8c; + color: var(--clr-forms-select-caret-hover-color, #8c8c8c); +} +.clr-error .clr-select-wrapper::after { + right: 1.5rem; +} +.clr-multiselect-wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.clr-multiselect-wrapper .clr-validate-icon { + margin-left: 0; +} +select[multiple], +select[size] { + padding: 0; + background: #fff; + background: var(--clr-forms-select-multiple-background-color, #fff); + border: 0.05rem solid; + border-color: #ccc; + border-color: var(--clr-forms-select-multiple-border-color, #ccc); + border-radius: 0.15rem; + border-radius: var(--clr-global-borderradius, 0.15rem); + height: auto; + min-width: 6rem; +} +select[multiple]:active, +select[multiple]:hover, +select[size]:active, +select[size]:hover { + background: #fff; + background: var(--clr-forms-select-multiple-background-color, #fff); + border-color: #ccc; + border-color: var(--clr-forms-select-multiple-border-color, #ccc); +} +select[multiple] option, +select[size] option { + padding: 0.15rem 0.3rem; + color: #000; + color: var(--clr-forms-select-multiple-option-color, #000); +} +.clr-error select:not([multiple]) { + border-bottom-color: #c21d00; + border-bottom-color: var(--clr-forms-invalid-color, #c21d00); +} +.clr-error select[multiple] { + border-color: #c21d00; + border-color: var(--clr-forms-invalid-color, #c21d00); +} +.clr-error select[multiple]:focus { + outline: 0; + -webkit-box-shadow: 0 0.05rem 0.15rem #ff745c; + box-shadow: 0 0.05rem 0.15rem #ff745c; + -webkit-box-shadow: 0 0.05rem 0.15rem + var(--clr-forms-select-multiple-error-focus-color, #ff745c); + box-shadow: 0 0.05rem 0.15rem + var(--clr-forms-select-multiple-error-focus-color, #ff745c); +} +.clr-form-control-disabled .clr-select.disabled { + color: #b3b3b3; + color: var(--clr-forms-text-disabled-color, #b3b3b3); + cursor: not-allowed; +} +.clr-form-control-disabled .clr-select.disabled:hover::after { + color: #b3b3b3; + color: var(--clr-forms-select-caret-color, #b3b3b3); +} +.clr-form-control-disabled .clr-select select:disabled, +.clr-form-control-disabled .clr-select.disabled > select { + color: #b3b3b3; + color: var(--clr-forms-text-disabled-color, #b3b3b3); + cursor: not-allowed; +} +.clr-form-control-disabled .clr-select select:disabled:hover, +.clr-form-control-disabled .clr-select.disabled > select:hover { + background: 0 0; + border-color: #b3b3b3; + border-color: var(--clr-forms-border-color, #b3b3b3); +} +.clr-form-compact .clr-multiselect-wrapper { + margin-top: 0; +} +.clr-textarea-wrapper { + white-space: nowrap; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin-top: 0.3rem; +} +.clr-textarea-wrapper .clr-validate-icon { + margin-left: 0; +} +.clr-textarea { + max-width: calc(100% - 0.3rem); + height: auto; + resize: vertical; + background: #fff; + background: var(--clr-forms-textarea-background-color, #fff); + border: 0.05rem solid; + border-color: #b3b3b3; + border-color: var(--clr-forms-border-color, #b3b3b3); + color: #000; + color: var(--clr-forms-text-color, #000); + border-radius: 0.15rem; + padding: 0.4rem 0.6rem; + font-size: 0.65rem; +} +.clr-textarea:focus { + outline: 0; + -webkit-box-shadow: 0 0 0.1rem 0.1rem #69c0e2; + box-shadow: 0 0 0.1rem 0.1rem #69c0e2; + -webkit-box-shadow: var( + --clr-forms-textarea-focused-outline, + 0 0 0.1rem 0.1rem #69c0e2 + ); + box-shadow: var( + --clr-forms-textarea-focused-outline, + 0 0 0.1rem 0.1rem #69c0e2 + ); +} +.clr-textarea:disabled { + color: #b3b3b3; + color: var(--clr-forms-text-disabled-color, #b3b3b3); + cursor: not-allowed; +} +.clr-error .clr-textarea { + border-color: #c21d00; + border-color: var(--clr-forms-invalid-color, #c21d00); +} +.clr-error .clr-textarea:focus { + outline: 0; + -webkit-box-shadow: 0 0 0.1rem 0.1rem #ff745c; + box-shadow: 0 0 0.1rem 0.1rem #ff745c; + -webkit-box-shadow: var( + --clr-forms-textarea-invalid-focused-outline, + 0 0 0.1rem 0.1rem #ff745c + ); + box-shadow: var( + --clr-forms-textarea-invalid-focused-outline, + 0 0 0.1rem 0.1rem #ff745c + ); +} +.clr-control-container textarea { + width: auto; +} +.clr-form-control.row .clr-textarea-wrapper { + max-width: calc(100% - 0.3rem); +} +.clr-form-compact .clr-textarea-wrapper { + margin-top: 0; +} +.clr-form-compact .clr-textarea-wrapper .clr-textarea { + max-width: 100%; +} +.clr-form-compact .clr-textarea-wrapper .clr-textarea ~ .clr-subtext { + margin-left: 0.3rem; +} +:root { + --clr-toggle-bg-color-off: var(--clr-color-neutral-600); + --clr-toggle-bg-color-on: var(--clr-color-success-500); + --clr-toggle-handle-bg-color: var(--clr-color-neutral-50); + --clr-toggle-disabled-default-border-color: var(--clr-color-neutral-400); + --clr-toggle-disabled-default-handle-color: var(--clr-color-neutral-0); + --clr-toggle-disabled-off-border-color: var( + --clr-toggle-disabled-default-border-color + ); + --clr-toggle-disabled-off-bg-color: var( + --clr-toggle-disabled-default-handle-color + ); + --clr-toggle-disabled-off-handle-border-color: var( + --clr-toggle-disabled-default-border-color + ); + --clr-toggle-disabled-on-border-color: var( + --clr-toggle-disabled-default-border-color + ); + --clr-toggle-disabled-on-bg-color: var( + --clr-toggle-disabled-default-border-color + ); + --clr-toggle-disabled-on-handle-border-color: var( + --clr-toggle-disabled-default-handle-color + ); +} +.clr-toggle-wrapper input[type="checkbox"] { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; +} +.clr-toggle-wrapper { + height: 1.2rem; + vertical-align: middle; + position: relative; + display: block; + margin-right: 0.6rem; +} +.clr-toggle-wrapper label { + display: inline-block; + position: relative; + cursor: pointer; + height: 1.2rem; + margin-left: 2.1rem; + margin-right: 0; +} +.clr-toggle-wrapper input[type="checkbox"] { + position: absolute; + top: 0.3rem; + right: 0.3rem; + height: 0.8rem; + width: 0.8rem; + opacity: 0; +} +.clr-toggle-wrapper input[type="checkbox"] + label::before { + position: absolute; + display: inline-block; + content: ""; + height: 0.9rem; + width: 1.65rem; + border: 0.1rem solid; + border-radius: 0.45rem; + border-color: #8c8c8c; + border-color: var(--clr-toggle-bg-color-off, #8c8c8c); + background-color: #8c8c8c; + background-color: var(--clr-toggle-bg-color-off, #8c8c8c); + top: 0.15rem; + right: 0; + left: -2.1rem; + -webkit-transition-duration: 0.15s; + transition-duration: 0.15s; + -webkit-transition-timing-function: ease-in; + transition-timing-function: ease-in; + -webkit-transition-property: border-color, background-color; + transition-property: border-color, background-color; +} +.clr-toggle-wrapper input[type="checkbox"]:focus + label::before { + outline: 0; + -webkit-box-shadow: 0 0 0.1rem 0.1rem #69c0e2; + box-shadow: 0 0 0.1rem 0.1rem #69c0e2; +} +.clr-toggle-wrapper input[type="checkbox"]:checked + label::before { + border-color: #5aa220; + border-color: var(--clr-toggle-bg-color-on, #5aa220); + background-color: #5aa220; + background-color: var(--clr-toggle-bg-color-on, #5aa220); + -webkit-transition-duration: 0.15s; + transition-duration: 0.15s; + -webkit-transition-timing-function: ease-in; + transition-timing-function: ease-in; + -webkit-transition-property: border-color, background-color; + transition-property: border-color, background-color; +} +.clr-toggle-wrapper input[type="checkbox"] + label::after { + position: absolute; + display: inline-block; + content: ""; + height: 0.7rem; + width: 0.7rem; + border-width: 0.05rem; + border-color: #fafafa; + border-color: var(--clr-toggle-handle-bg-color, #fafafa); + border-style: solid; + border-radius: 50%; + background-color: #fafafa; + background-color: var(--clr-toggle-handle-bg-color, #fafafa); + top: 0.25rem; + right: 0; + left: -2rem; + -webkit-transition-duration: 0.15s; + transition-duration: 0.15s; + -webkit-transition-timing-function: ease-in; + transition-timing-function: ease-in; + -webkit-transition-property: right, left; + transition-property: right, left; +} +.clr-toggle-wrapper input[type="checkbox"]:checked + label::after { + right: -2rem; + left: -1.25rem; + -webkit-transition-duration: 0.15s; + transition-duration: 0.15s; + -webkit-transition-timing-function: ease-in; + transition-timing-function: ease-in; + -webkit-transition-property: right, left; + transition-property: right, left; +} +.clr-toggle-wrapper.disabled label { + opacity: 0.4; + cursor: not-allowed; +} +.clr-toggle-wrapper.disabled input[type="checkbox"]:checked + label::before { + border-color: #ccc; + border-color: var(--clr-toggle-disabled-on-border-color, #ccc); + background-color: #ccc; + background-color: var(--clr-toggle-disabled-on-border-color, #ccc); +} +.clr-toggle-wrapper input[type="checkbox"]:disabled + label { + cursor: not-allowed; +} +.clr-toggle-wrapper input[type="checkbox"]:disabled + label::before { + background-color: #fff; + background-color: var(--clr-toggle-disabled-off-bg-color, #fff); + border-color: #ccc; + border-color: var(--clr-toggle-disabled-off-border-color, #ccc); +} +.clr-toggle-wrapper input[type="checkbox"]:disabled + label::after { + background-color: #fff; + background-color: var(--clr-toggle-disabled-off-bg-color, #fff); + border-width: 0.1rem; + border-style: solid; + border-color: #ccc; + border-color: var(--clr-toggle-disabled-off-handle-border-color, #ccc); + height: 0.9rem; + width: 0.9rem; + top: 0.15rem; +} +.clr-toggle-wrapper input[type="checkbox"]:checked:disabled + label::before { + border-color: #ccc; + border-color: var(--clr-toggle-disabled-on-border-color, #ccc); + background-color: #ccc; + background-color: var(--clr-toggle-disabled-on-bg-color, #ccc); +} +.clr-toggle-wrapper input[type="checkbox"]:checked:disabled + label::after { + border-color: #fff; + border-color: var(--clr-toggle-disabled-on-handle-border-color, #fff); + height: 0.7rem; + width: 0.7rem; + top: 0.25rem; + left: -1.25rem; +} +.clr-toggle-wrapper input[type="checkbox"]:disabled + label::after { + left: -2.1rem; +} +.clr-toggle-wrapper.right-label label { + margin-left: 2.1rem; + margin-right: 0; +} +.clr-toggle-wrapper.right-label input[type="checkbox"] + label::before { + right: 0; + left: -2.1rem; +} +.clr-toggle-wrapper.right-label input[type="checkbox"] + label::after { + right: 0; + left: -2rem; + -webkit-transition-property: left; + transition-property: left; +} +.clr-toggle-wrapper.right-label input[type="checkbox"]:checked + label::after { + left: -1.25rem; + -webkit-transition-property: left; + transition-property: left; +} +.clr-toggle-wrapper .clr-control-label { + display: block; + font-weight: 400; + line-height: 1.2rem; +} +.clr-control-inline .clr-toggle-wrapper .clr-control-label { + display: inline-block; + margin-right: 0.6rem; +} +.clr-toggle-right label { + display: inline-block; + margin-right: 2.1rem; + margin-left: 0; +} +.clr-toggle-right input[type="checkbox"] + label::before { + left: unset; + right: -2.1rem; +} +.clr-toggle-right input[type="checkbox"] + label::after { + left: unset; + right: -1.25rem; + -webkit-transition-property: right; + transition-property: right; +} +.clr-toggle-right input[type="checkbox"]:checked + label::after { + left: unset; + right: -2rem; + -webkit-transition-property: right; + transition-property: right; +} +.clr-toggle-right input[type="checkbox"]:disabled + label::after { + left: unset; + right: -1.3rem; +} +.clr-toggle-right input[type="checkbox"]:checked:disabled + label::after { + left: unset; + right: -2rem; +} +.clr-toggle-right .clr-control-inline .clr-toggle-wrapper .clr-control-label { + margin-right: 2.7rem; +} +.clr-range-wrapper { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + height: 0.7rem; + white-space: nowrap; +} +.clr-range-wrapper .fill-input { + position: absolute; + left: 0; + display: inline-block; + height: 0.2rem; + pointer-events: none; + cursor: pointer; + z-index: 10; + background-color: #0072a3; + background-color: var(--clr-forms-range-progress-fill-color, #0072a3); +} +.clr-range { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + height: 0.7rem; +} +.clr-range:disabled, +.clr-range:disabled + .fill-input { + pointer-events: auto; + cursor: not-allowed; +} +input[type="range"] { + padding: 0; + -webkit-appearance: none; + left: 0; + height: 0.2rem; + background-color: #e8e8e8; + background-color: var(--clr-forms-range-track-color, #e8e8e8); +} +input[type="range"]::-webkit-slider-runnable-track { + height: 0.2rem; + cursor: pointer; + background-color: #e8e8e8; + background-color: var(--clr-forms-range-track-color, #e8e8e8); +} +input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + margin-top: -0.25rem; + border-radius: 50%; + height: 0.7rem; + width: 0.7rem; + background-color: #0072a3; + background-color: var(--clr-forms-range-progress-fill-color, #0072a3); +} +input[type="range"]::-moz-range-track { + height: 0.2rem; + cursor: pointer; + background-color: #e8e8e8; + background-color: var(--clr-forms-range-track-color, #e8e8e8); +} +input[type="range"]::-moz-range-thumb { + border: 0; + margin-top: -0.25rem; + border-radius: 50%; + height: 0.7rem; + width: 0.7rem; + background-color: #0072a3; + background-color: var(--clr-forms-range-progress-fill-color, #0072a3); +} +@supports (-ms-ime-align: auto) { + .clr-range-wrapper .fill-input { + display: none; + } + .clr-range-wrapper.progress-fill input[type="range"]::-ms-fill-lower { + height: 0.2rem; + background-color: #0072a3; + background-color: var(--clr-forms-range-progress-fill-color, #0072a3); + } + input[type="range"] { + border: 0; + margin: 0; + -webkit-appearance: none; + left: 0; + height: 0.7rem; + } + input[type="range"]::-ms-track { + margin: 0; + border: 0; + height: 0.2rem; + cursor: pointer; + background-color: #e8e8e8; + background-color: var(--clr-forms-range-track-color, #e8e8e8); + } + input[type="range"]::-ms-thumb { + border: 0; + margin-top: 0; + border-radius: 50%; + height: 0.7rem; + width: 0.7rem; + background-color: #0072a3; + background-color: var(--clr-forms-range-progress-fill-color, #0072a3); + } +} +_:-ms-fullscreen .clr-range-wrapper .fill-input, +:root .clr-range-wrapper .fill-input { + display: none; +} +_:-ms-fullscreen + .clr-range-wrapper.progress-fill + input[type="range"]::-ms-fill-lower, +:root .clr-range-wrapper.progress-fill input[type="range"]::-ms-fill-lower { + height: 0.2rem; + background-color: #0072a3; + background-color: var(--clr-forms-range-progress-fill-color, #0072a3); +} +_:-ms-fullscreen input[type="range"]::-ms-tooltip, +:root input[type="range"]::-ms-tooltip { + visibility: hidden; +} +_:-ms-fullscreen input[type="range"], +:root input[type="range"] { + border: 0; + margin: 0; + -webkit-appearance: none; + left: 0; + height: 0.7rem; +} +_:-ms-fullscreen input[type="range"]::-ms-track, +:root input[type="range"]::-ms-track { + border: 0; + margin: 0; + height: 0.2rem; + cursor: pointer; + background-color: #e8e8e8; + background-color: var(--clr-forms-range-track-color, #e8e8e8); +} +_:-ms-fullscreen input[type="range"]::-ms-thumb, +:root input[type="range"]::-ms-thumb { + border: 0; + margin-top: 0; + border-radius: 50%; + height: 0.7rem; + width: 0.7rem; + background-color: #0072a3; + background-color: var(--clr-forms-range-progress-fill-color, #0072a3); +} +input[clrDatalist]::-webkit-calendar-picker-indicator { + display: none; +} +clr-datalist-container .clr-input-group { + padding-right: 0; +} +:root { + --clr-calendar-background-color: var(--clr-color-neutral-0); + --clr-calendar-border-color: var(--clr-color-neutral-400); + --clr-datepicker-trigger-color: var(--clr-color-action-600); + --clr-datepicker-trigger-hover-color: var(--clr-color-action-800); + --clr-calendar-btn-color: var(--clr-color-action-600); + --clr-calendar-btn-hover-focus-color: var(--clr-global-hover-color); + --clr-calendar-picker-btn-font-size: 0.9rem; + --clr-calendar-picker-btn-font-weight: 200; + --clr-calendar-today-date-cell-color: var(--clr-color-neutral-1000); + --clr-calendar-today-date-cell-font-weight: 600; + --clr-calendar-active-cell-background-color: var( + --clr-global-selection-color + ); + --clr-calendar-active-focus-cell-background-color: var( + --clr-global-selection-color + ); + --clr-calendar-active-cell-color: var(--clr-color-neutral-1000); + --clr-day-font-size: 0.6rem; +} +.date-container { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + white-space: nowrap; +} +.datepicker-trigger { + height: 1.8rem; + min-width: 1.8rem; + padding: 0 0; + margin: 0 !important; + color: inherit; + border: none; + border-radius: 0.15rem; + border-radius: var(--clr-global-borderradius, 0.15rem); + background: 0 0; + cursor: pointer; + line-height: 1.8rem; +} +.datepicker-trigger .datepicker-trigger-icon { + fill: #0072a3; + fill: var(--clr-datepicker-trigger-color, #0072a3); +} +.datepicker-trigger .datepicker-trigger-icon:hover { + fill: #00567a; + fill: var(--clr-datepicker-trigger-hover-color, #00567a); +} +.datepicker-trigger:disabled { + cursor: not-allowed; +} +.clr-form-control .datepicker-trigger { + line-height: 1.1rem; + height: 1.1rem; +} +.date-input { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; +} +.datepicker { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + padding: 0.6rem; + margin-top: 0.3rem; + width: 13.9rem; + height: 15.7rem; + background: #fff; + background: var(--clr-calendar-background-color, #fff); + border: 0.05rem solid; + border-color: #ccc; + border-color: var(--clr-calendar-border-color, #ccc); + border-radius: 0.15rem; + border-radius: var(--clr-global-borderradius, 0.15rem); + -webkit-box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + -webkit-box-shadow: 0 0.05rem 0.15rem + var(--clr-popover-box-shadow-color, rgba(140, 140, 140, 0.25)); + box-shadow: 0 0.05rem 0.15rem + var(--clr-popover-box-shadow-color, rgba(140, 140, 140, 0.25)); + overflow: hidden; + z-index: 1060; +} +.calendar-header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.calendar-switchers, +.year-switchers { + -webkit-transform: translateY(-0.1rem); + transform: translateY(-0.1rem); + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.year-switchers { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: 5.4rem; + -ms-flex-item-align: center; + align-self: center; +} +.calendar-table { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + width: 100%; +} +.calendar-cell, +.calendar-table .calendar-cell { + height: 1.8rem; + width: 1.8rem; + min-height: 1.8rem; + min-width: 1.8rem; + padding: 0; + text-align: center; +} +.day { + display: inline-block; +} +.weekdays { + -webkit-box-flex: 0; + -ms-flex: 0 0 1.8rem; + flex: 0 0 1.8rem; +} +.weekday { + font-size: 0.6rem; + font-size: var(--clr-day-font-size, 0.6rem); + font-weight: 600; +} +.calendar-btn { + height: 1.8rem; + min-width: 1.8rem; + padding: 0 0; + margin: 0 !important; + color: inherit; + border: none; + border-radius: 0.15rem; + border-radius: var(--clr-global-borderradius, 0.15rem); + background: 0 0; + cursor: pointer; + line-height: 1.8rem; + font-size: 0.9rem; + font-size: var(--clr-calendar-picker-btn-font-size, 0.9rem); + font-weight: 200; + font-weight: var(--clr-calendar-picker-btn-font-weight, 200); +} +.calendar-btn:focus, +.calendar-btn:hover { + background: #e8e8e8; + background: var(--clr-calendar-btn-hover-focus-color, #e8e8e8); +} +.calendar-btn:focus { + outline: 0; +} +.day-btn { + height: 1.8rem; + min-width: 1.8rem; + padding: 0 0; + margin: 0 !important; + color: inherit; + border: none; + border-radius: 0.15rem; + border-radius: var(--clr-global-borderradius, 0.15rem); + background: 0 0; + cursor: pointer; + line-height: 1.8rem; + width: 100%; + color: inherit; +} +.day-btn:focus, +.day-btn:hover { + background: #e8e8e8; + background: var(--clr-calendar-btn-hover-focus-color, #e8e8e8); +} +.day-btn:focus { + outline: 0; +} +.day-btn.is-today { + color: #000; + color: var(--clr-calendar-today-date-cell-color, #000); + font-weight: 600; + font-weight: var(--clr-calendar-today-date-cell-font-weight, 600); +} +.day-btn.is-excluded { + opacity: 0.4; +} +.day-btn.is-excluded:hover { + background: 0 0; +} +.day-btn.is-selected { + background: #d8e3e9; + background: var(--clr-calendar-active-cell-background-color, #d8e3e9); + color: #000; + color: var(--clr-calendar-active-cell-color, #000); +} +.day-btn.is-selected:focus { + background: #d8e3e9; + background: var(--clr-calendar-active-focus-cell-background-color, #d8e3e9); +} +.day-btn.is-disabled { + opacity: 0.4; + pointer-events: none; +} +.day-btn.is-disabled:hover { + background: 0 0; +} +.calendar-pickers { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.switcher { + color: #0072a3; + color: var(--clr-calendar-btn-color, #0072a3); +} +.switcher cds-icon { + height: 0.9rem; + width: 0.9rem; +} +.monthpicker-trigger, +.yearpicker-trigger { + min-width: 2.4rem; + max-width: 3rem; + color: #0072a3; + color: var(--clr-calendar-btn-color, #0072a3); + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.monthpicker, +.yearpicker { + min-height: 14.4rem; +} +.monthpicker, +.yearpicker, +.years { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + overflow: hidden; +} +.monthpicker, +.years { + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.month, +.year { + height: 2.4rem; + min-width: 2.4rem; + padding: 0 0.6rem; + margin: 0 !important; + color: inherit; + border: none; + border-radius: 0.15rem; + border-radius: var(--clr-global-borderradius, 0.15rem); + background: 0 0; + cursor: pointer; + line-height: 1.8rem; + width: 6.3rem; + font-size: 0.9rem; + font-weight: 200; + outline-offset: -0.25rem; +} +.month:focus, +.month:hover, +.year:focus, +.year:hover { + background: #e8e8e8; + background: var(--clr-calendar-btn-hover-focus-color, #e8e8e8); +} +.month:focus, +.year:focus { + outline: 0; +} +.month.is-disabled, +.year.is-disabled { + opacity: 0.4; + pointer-events: none; +} +.month.is-disabled:hover, +.year.is-disabled:hover { + background: 0 0; +} +.month.is-selected, +.year.is-selected { + background: #d8e3e9; + background: var(--clr-calendar-active-cell-background-color, #d8e3e9); + color: #000; + color: var(--clr-calendar-active-cell-color, #000); +} +.month.is-selected:focus, +.year.is-selected:focus { + background: #d8e3e9; + background: var(--clr-calendar-active-focus-cell-background-color, #d8e3e9); +} +.month { + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.year { + text-align: center; +} +:root { + --clr-combobox-trigger-color: var(--clr-color-neutral-500); + --clr-combobox-font-size: 0.65rem; + --clr-combobox-border-color: #e8e8e8; + --clr-combobox-border-radius: 0.15rem; + --clr-combobox-input-background: #f2f2f2; + --clr-combobox-pill-background-color: white; + --clr-combobox-pill-border-color: #e8e8e8; + --clr-combobox-pill-border-radius: 0.15rem; + --clr-combobox-pill-font-color: #454545; + --clr-combobox-filter-highlight: #454545; +} +.clr-combobox-form-control { + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; +} +.clr-combobox-form-control .clr-error .clr-validate-icon { + margin-left: 0; +} +.clr-focus-indicator { + background-color: #0072a3; + background-color: var(--clr-forms-focused-color, #0072a3); + height: 0.1rem; + width: 0; + -webkit-transition: width 0.2s ease; + transition: width 0.2s ease; + position: absolute; + bottom: -0.05rem; + left: 0; + border-bottom-left-radius: 0.15rem; + border-bottom-left-radius: var(--clr-combobox-border-radius, 0.15rem); + border-bottom-right-radius: 0.15rem; + border-bottom-right-radius: var(--clr-combobox-border-radius, 0.15rem); +} +.clr-focus { + width: 100%; +} +.clr-error .clr-focus-indicator { + background-color: #c21d00; + background-color: var(--clr-forms-invalid-color, #c21d00); +} +.clr-combobox-wrapper { + position: relative; + padding: 0 1.2rem 0 0.3rem; + min-height: 1.2rem; + min-width: 8.4rem; + font-size: 0.65rem; + font-size: var(--clr-combobox-font-size, 0.65rem); + color: #000; + color: var(--clr-forms-text-color, #000); + border-bottom: 0.05rem solid; + border-bottom-color: #b3b3b3; + border-bottom-color: var(--clr-forms-border-color, #b3b3b3); + display: inline-block; + background-color: #f2f2f2; + background-color: var(--clr-combobox-input-background-color, #f2f2f2); + border: 0.05rem solid #e8e8e8; + border-bottom: 0.05rem solid #b3b3b3; + border-radius: 0.15rem; + border-radius: var(--clr-combobox-border-radius, 0.15rem); +} +.clr-combobox-wrapper.multi { + min-width: 18rem; + padding-bottom: 0.15rem; +} +.clr-combobox-wrapper .clr-input.clr-combobox-input:focus { + background: 0 0; +} +.clr-combobox-wrapper.invalid { + border-bottom-color: #c21d00; +} +.clr-combobox-wrapper .clr-combobox-input { + background: 0 0; + border-bottom: none; +} +.clr-combobox-wrapper .clr-combobox-remove-btn { + background: 0 0; + border: none; + cursor: pointer; + padding: 0.15rem 0.15rem; + color: #454545; +} +.clr-combobox-wrapper .label-combobox-pill { + margin: 0.15rem 0.3rem 0 0; + background-color: #fff; + background-color: var(--clr-combobox-pill-background-color, #fff); + border-width: 0.05rem; + border-style: solid; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + border-radius: 0.15rem; + border-radius: var(--clr-combobox-pill-border-radius, 0.15rem); + border-color: #e8e8e8; + border-color: var(--clr-combobox-pill-border-color, #e8e8e8); + padding: 0 0.1rem 0 0.2rem; +} +.clr-combobox-wrapper .label-combobox-pill .clr-combobox-pill-content { + color: #454545; + color: var(--clr-combobox-pill-font-color, #454545); + font-size: 0.55rem; + font-weight: 400; + padding: 0 0.4rem 0 0.2rem; +} +.clr-combobox-wrapper .label-combobox-pill cds-icon[shape="window-close"] { + color: #454545; + color: var(--clr-combobox-pill-font-color, #454545); +} +.clr-combobox-wrapper .clr-combobox-input-wrapper { + border: none; + background: 0 0; +} +.clr-combobox-trigger { + width: 1.2rem; + margin: auto; + position: absolute; + top: 0; + bottom: 0; + right: 0; + background: 0 0; + border: none; + color: currentColor; + cursor: pointer; + outline: 0; +} +.clr-combobox-trigger:disabled { + color: var(--clr-btn-link-disabled-color, #666); + opacity: 0.4; +} +.clr-combobox-trigger cds-icon[shape="angle"] { + color: #454545; + color: var(--clr-combobox-pill-font-color, #454545); +} +.clr-combobox-options { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + position: absolute; + top: 100%; + left: 0; + min-width: 6rem; + max-width: 18rem; + background: #fff; + background: var(--clr-dropdown-bg-color, #fff); + border-width: 0.05rem; + border-width: var(--clr-global-borderwidth, 0.05rem); + border-style: solid; + border-color: #ccc; + border-color: var(--clr-dropdown-border-color, #ccc); + border-radius: 0.15rem; + border-radius: var(--clr-global-borderradius, 0.15rem); + -webkit-box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + -webkit-box-shadow: 0 0.05rem 0.15rem + var(--clr-dropdown-box-shadow, rgba(140, 140, 140, 0.25)); + box-shadow: 0 0.05rem 0.15rem + var(--clr-dropdown-box-shadow, rgba(140, 140, 140, 0.25)); + margin-top: 0.1rem; + padding: 0.6rem 0; + visibility: hidden; + z-index: 1060; + position: static; + max-height: 12rem; + overflow-y: scroll; + visibility: visible; +} +.clr-combobox-options .clr-combobox-options-loading { + padding: 0.15rem 1.2rem; +} +.clr-combobox-options + .clr-combobox-options-loading + .clr-combobox-options-loading-text { + padding-left: 0.3rem; +} +.clr-combobox-options .clr-combobox-options-empty-text { + padding-left: 0.6rem; +} +.clr-combobox-option { + color: #666; + color: var(--clr-dropdown-item-color, #666); + font-size: 0.7rem; + font-weight: 400; + font-weight: var(--clr-dropdown-item-font-weight, 400); + letter-spacing: normal; + background: 0 0; + border: 0; + cursor: pointer; + display: block; + height: auto; + line-height: inherit; + margin: 0; + width: 100%; + text-transform: none; +} +.clr-combobox-option:hover { + background-color: #e8e8e8; + background-color: var(--clr-dropdown-bg-hover-color, #e8e8e8); + color: #666; + color: var(--clr-dropdown-item-color, #666); + text-decoration: none; +} +.clr-combobox-option.active { + background: #d8e3e9; + background: var(--clr-dropdown-selection-color, #d8e3e9); + color: #000; + color: var(--clr-dropdown-active-text-color, #000); +} +.clr-combobox-option:active { + -webkit-box-shadow: none; + box-shadow: none; +} +.clr-combobox-option:focus { + z-index: inherit; +} +.clr-combobox-option.disabled, +.clr-combobox-option:disabled { + cursor: not-allowed; + opacity: 0.4; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.clr-combobox-option.disabled:hover, +.clr-combobox-option:disabled:hover { + background: 0 0; +} +.clr-combobox-option.disabled:active, +.clr-combobox-option:disabled:active { + background: 0 0; + -webkit-box-shadow: none; + box-shadow: none; +} +.clr-combobox-option.clr-focus { + background-color: #e8e8e8; + background-color: var(--clr-dropdown-bg-hover-color, #e8e8e8); +} +.clr-combobox-options .clr-combobox-option { + padding: 0.15rem 1.2rem; +} +@media screen and (max-width: 576px) { + .clr-combobox-options .clr-combobox-option { + padding: 0.3rem 1.2rem; + } +} +.clr-combobox-options .clr-combobox-option.active, +.clr-combobox-options .clr-combobox-option:hover { + color: #666; + color: var(--clr-dropdown-item-color, #666); +} +.clr-combobox-disabled { + color: #b3b3b3; + color: var(--clr-forms-text-disabled-color, #b3b3b3); + cursor: not-allowed; +} +.clr-combobox-disabled .clr-combobox-input, +.clr-combobox-disabled .clr-combobox-remove-btn, +.clr-combobox-disabled .clr-combobox-trigger { + cursor: not-allowed; +} +.clr-filter-highlight b { + font-weight: 500; + color: #454545; + color: var(--clr-combobox-filter-highlight, #454545); +} +:root { + --clr-stack-view-border-radius: 0.15rem; + --clr-stack-view-border-color: var(--clr-color-neutral-400); + --clr-stack-view-bg-color: var(--clr-color-neutral-50); + --clr-stack-view-stack-block-border-bottom: var(--clr-color-neutral-300); + --clr-stack-view-color: #666666; + --clr-stack-view-stack-block-label-text-color: var(--clr-global-font-color); + --clr-stack-view-border-box-color: var(--clr-color-neutral-300); + --clr-stack-block-changed-border-top-color: var(--clr-color-action-600); + --clr-stack-view-stack-block-label-and-content-bg-color: var( + --clr-color-neutral-50 + ); + --clr-stack-view-stack-children-stack-block-border-bottom-color: var( + --clr-color-neutral-200 + ); + --clr-stack-view-stack-children-stack-block-label-and-content-bg-color: var( + --clr-color-neutral-0 + ); + --clr-stack-view-stack-block-expanded-bg-color: var( + --clr-global-selection-color + ); + --clr-stack-view-stack-block-expandable-hover: var(--clr-color-neutral-200); + --clr-stack-view-stack-block-content-text-color: inherit; + --clr-stack-view-stack-block-expanded-text-color: var( + --clr-color-neutral-1000 + ); + --clr-stack-view-stack-block-caret-color: var(--clr-global-font-color); +} +.stack-header { + font-weight: 400; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; +} +.stack-header .stack-title { + display: block; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + padding: 0.3rem 0; +} +.stack-header .stack-actions { + display: block; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} +.stack-header .stack-actions .stack-action { + margin: 0 0 0.3rem 0.6rem; +} +.stack-header .stack-actions .stack-action.btn { + min-width: 0; + padding: 0 0.6rem; +} +.stack-header .stack-actions .stack-action.btn-link { + margin-right: -0.6rem; +} +.stack-view { + color: #666; + color: var(--clr-stack-view-color, #666); + font-size: 0.65rem; + font-weight: 400; + line-height: 1.2rem; + letter-spacing: normal; + margin-top: 0; + border-width: 0.05rem; + border-style: solid; + border-color: #ccc; + border-color: var(--clr-stack-view-border-color, #ccc); + border-radius: 0.15rem; + border-radius: var(--clr-stack-view-border-radius, 0.15rem); + overflow-y: auto; + background-color: #fafafa; + background-color: var(--clr-stack-view-bg-color, #fafafa); + word-wrap: break-word; + -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); +} +.stack-view dd, +.stack-view dt { + -webkit-margin-start: 0; + -moz-margin-start: 0; + margin-inline-start: 0; + margin-left: 0; +} +.stack-view .stack-block { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + border-bottom-width: 0.05rem; + border-bottom-width: var(--clr-global-borderwidth, 0.05rem); + border-bottom-style: solid; + border-bottom-color: #dedede; + border-bottom-color: var( + --clr-stack-view-stack-block-border-bottom, + #dedede + ); + overflow-y: hidden; +} +.stack-view > .stack-block:last-child, +.stack-view > :last-child .stack-block:last-of-type { + border-bottom: none; + -webkit-box-shadow: 0 0.05rem 0 #dedede; + box-shadow: 0 0.05rem 0 #dedede; + -webkit-box-shadow: 0 0.05rem 0 var(--clr-stack-view-border-box-color); + box-shadow: 0 0.05rem 0 var(--clr-stack-view-border-box-color); +} +.stack-view .stack-block-changed > .stack-block-label { + margin-left: -0.45rem; +} +.stack-view .stack-block-changed::before { + content: " "; + position: relative; + height: 0; + width: 0; + border-top: 0.45rem solid; + border-top-color: #0072a3; + border-top-color: var(--clr-stack-block-changed-border-top-color, #0072a3); + border-right: 0.45rem solid transparent; +} +.stack-view .stack-block-label { + padding: 0.3rem 0.6rem; + background-color: #fafafa; + background-color: var( + --clr-stack-view-stack-block-label-and-content-bg-color, + #fafafa + ); +} +.stack-view .stack-block-content { + background-color: inherit; +} +.stack-view .stack-block-caret { + -ms-flex-item-align: center; + align-self: center; +} +.stack-view .stack-block-label { + color: #666; + color: var(--clr-stack-view-stack-block-label-text-color, #666); + font-size: 0.65rem; + font-weight: 500; + line-height: 1.2rem; + letter-spacing: normal; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.stack-view .stack-block-label::before { + display: inline-block; + content: ""; + float: left; + height: 0.7rem; + width: 0.7rem; + margin: 0.35rem 0.24rem 0 0; + text-align: center; +} +.stack-view .stack-block-label:focus { + outline: 0.25rem auto -webkit-focus-ring-color; +} +.stack-view .stack-view-key { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + max-width: 40%; +} +.stack-view .stack-block-caret { + height: 0.7rem; + width: 0.7rem; + margin-right: 0.24rem; + fill: #666; + fill: var(--clr-stack-view-stack-block-caret-color, #666); +} +.stack-view .stack-block-content { + color: inherit; + color: var(--clr-stack-view-stack-block-content-text-color, inherit); + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + width: 60%; + margin-bottom: 0; + font-weight: 400; +} +.stack-view .stack-block-content > :first-child { + margin-top: 0; +} +.stack-view .stack-block-content > :last-child { + margin-bottom: 0; +} +.stack-view .stack-children { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: 100%; +} +.stack-view .stack-children .stack-block { + border-bottom-color: #e8e8e8; + border-bottom-color: var( + --clr-stack-view-stack-children-stack-block-border-bottom-color, + #e8e8e8 + ); +} +.stack-view .stack-children > .stack-block:last-child, +.stack-view .stack-children > :last-child .stack-block:last-of-type { + border-bottom: none; + -webkit-box-shadow: 0 0.05rem 0 #dedede; + box-shadow: 0 0.05rem 0 #dedede; + -webkit-box-shadow: 0 0.05rem 0 var(--clr-stack-view-border-box-color); + box-shadow: 0 0.05rem 0 var(--clr-stack-view-border-box-color); +} +.stack-view .stack-children .stack-block-content, +.stack-view .stack-children .stack-block-label { + background-color: #fff; + background-color: var( + --clr-stack-view-stack-children-stack-block-label-and-content-bg-color, + #fff + ); +} +.stack-view .stack-children .stack-block-label { + padding-left: 1.2rem; +} +.stack-view .stack-block-expandable > .stack-block-label { + cursor: pointer; +} +.stack-view .stack-block-expandable > .stack-block-label::before { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%3E.cls-1%7Bfill%3A%23666666%3B%7D%3C%2Fstyle%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M6%2C9L1.2%2C4.2a0.68%2C0.68%2C0%2C0%2C1%2C1-1L6%2C7.08%2C9.84%2C3.24a0.68%2C0.68%2C0%2C1%2C1%2C1%2C1Z%22%2F%3E%0A%3C%2Fsvg%3E%0A"); + background-repeat: no-repeat; + background-size: contain; + vertical-align: middle; + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + height: 0.6rem; + width: 0.6rem; +} +.stack-view .stack-block-expandable > .stack-block-content, +.stack-view .stack-block-expandable > .stack-block-label { + -webkit-transition: background-color 0.2s ease-in-out, + color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; +} +.stack-view + .stack-block-expandable:hover:not(.stack-block-expanded) + > .stack-block-label { + background-color: #e8e8e8; + background-color: var( + --clr-stack-view-stack-block-expandable-hover, + #e8e8e8 + ); +} +.stack-view .stack-block-expanded > .stack-block-label::before { + -webkit-transform: rotate(0); + transform: rotate(0); +} +.stack-view .stack-block-expanded > .stack-block-label { + background-color: #d8e3e9; + background-color: var( + --clr-stack-view-stack-block-expanded-bg-color, + #d8e3e9 + ); + color: #000; + color: var(--clr-stack-view-stack-block-expanded-text-color, #000); +} +.stack-view .select, +.stack-view input[type="date"], +.stack-view input[type="datetime-local"], +.stack-view input[type="email"], +.stack-view input[type="number"], +.stack-view input[type="password"], +.stack-view input[type="tel"], +.stack-view input[type="text"], +.stack-view input[type="time"], +.stack-view input[type="url"] { + display: inline-block; + vertical-align: top; + margin-right: 0.6rem; + margin-bottom: -0.95rem; +} +.stack-view .select select, +.stack-view input[type="date"], +.stack-view input[type="datetime-local"], +.stack-view input[type="email"], +.stack-view input[type="number"], +.stack-view input[type="password"], +.stack-view input[type="tel"], +.stack-view input[type="text"], +.stack-view input[type="time"], +.stack-view input[type="url"] { + height: 1.2rem; +} +.stack-view .stack-block-expandable > .stack-block-content input[type="date"], +.stack-view + .stack-block-expandable + > .stack-block-content + input[type="datetime-local"], +.stack-view .stack-block-expandable > .stack-block-content input[type="email"], +.stack-view .stack-block-expandable > .stack-block-content input[type="number"], +.stack-view + .stack-block-expandable + > .stack-block-content + input[type="password"], +.stack-view .stack-block-expandable > .stack-block-content input[type="tel"], +.stack-view .stack-block-expandable > .stack-block-content input[type="text"], +.stack-view .stack-block-expandable > .stack-block-content input[type="time"], +.stack-view .stack-block-expandable > .stack-block-content input[type="url"] { + -webkit-transition: background-size 0.2s ease, + border-bottom-color 0.2s ease-in-out; + transition: background-size 0.2s ease, border-bottom-color 0.2s ease-in-out; +} +.stack-view .stack-block-expandable > .stack-block-content .select select { + -webkit-transition: border-bottom-color 0.2s ease-in-out; + transition: border-bottom-color 0.2s ease-in-out; +} +.stack-view .stack-block-expandable > .stack-block-content .select::after { + -webkit-transition: color 0.2s ease-in-out; + transition: color 0.2s ease-in-out; +} +.stack-view .stack-block-expanded > .stack-block-content input[type="date"], +.stack-view + .stack-block-expanded + > .stack-block-content + input[type="datetime-local"], +.stack-view .stack-block-expanded > .stack-block-content input[type="email"], +.stack-view .stack-block-expanded > .stack-block-content input[type="number"], +.stack-view .stack-block-expanded > .stack-block-content input[type="password"], +.stack-view .stack-block-expanded > .stack-block-content input[type="tel"], +.stack-view .stack-block-expanded > .stack-block-content input[type="text"], +.stack-view .stack-block-expanded > .stack-block-content input[type="time"], +.stack-view .stack-block-expanded > .stack-block-content input[type="url"] { + border-bottom-color: #8c8c8c; + border-bottom-color: var(--clr-color-neutral-600, #8c8c8c); + background: -webkit-gradient( + linear, + left top, + left bottom, + color-stop(95%, transparent), + color-stop(95%, var(--clr-color-action-600, #0072a3)) + ) + no-repeat; + background: linear-gradient( + to bottom, + transparent 95%, + var(--clr-color-action-600, #0072a3) 95% + ) + no-repeat; + background-size: 0 100%; + -webkit-transition: background-size 0.2s ease; + transition: background-size 0.2s ease; +} +.stack-view + .stack-block-expanded + > .stack-block-content + input[type="date"].clr-focus, +.stack-view + .stack-block-expanded + > .stack-block-content + input[type="date"]:focus, +.stack-view + .stack-block-expanded + > .stack-block-content + input[type="datetime-local"].clr-focus, +.stack-view + .stack-block-expanded + > .stack-block-content + input[type="datetime-local"]:focus, +.stack-view + .stack-block-expanded + > .stack-block-content + input[type="email"].clr-focus, +.stack-view + .stack-block-expanded + > .stack-block-content + input[type="email"]:focus, +.stack-view + .stack-block-expanded + > .stack-block-content + input[type="number"].clr-focus, +.stack-view + .stack-block-expanded + > .stack-block-content + input[type="number"]:focus, +.stack-view + .stack-block-expanded + > .stack-block-content + input[type="password"].clr-focus, +.stack-view + .stack-block-expanded + > .stack-block-content + input[type="password"]:focus, +.stack-view + .stack-block-expanded + > .stack-block-content + input[type="tel"].clr-focus, +.stack-view + .stack-block-expanded + > .stack-block-content + input[type="tel"]:focus, +.stack-view + .stack-block-expanded + > .stack-block-content + input[type="text"].clr-focus, +.stack-view + .stack-block-expanded + > .stack-block-content + input[type="text"]:focus, +.stack-view + .stack-block-expanded + > .stack-block-content + input[type="time"].clr-focus, +.stack-view + .stack-block-expanded + > .stack-block-content + input[type="time"]:focus, +.stack-view + .stack-block-expanded + > .stack-block-content + input[type="url"].clr-focus, +.stack-view + .stack-block-expanded + > .stack-block-content + input[type="url"]:focus { + border-bottom-color: #0072a3; + border-bottom-color: var(--clr-color-action-600, #0072a3); + background-size: 100% 100%; +} +.stack-view .stack-block-expanded > .stack-block-content .select select { + border-bottom-color: #8c8c8c; + border-bottom-color: var(--clr-color-neutral-600, #8c8c8c); +} +.stack-view .stack-block-expanded > .stack-block-content .select::after { + color: #8c8c8c; + color: var(--clr-color-neutral-600, #8c8c8c); +} +.modal .stack-view { + height: 55vh; + margin-bottom: 0; +} +.stack-view clr-stack-block.stack-block-expandable .stack-block-label::before { + content: none; +} +.stack-view .stack-children .stack-block-label, +.stack-view .stack-children clr-stack-block .stack-block-label { + padding-left: 1.8rem; +} +.stack-view .stack-children .stack-block-label::before, +.stack-view .stack-children clr-stack-block .stack-block-label::before { + display: none; +} +.stack-view .stack-children .stack-block-content, +.stack-view .stack-children clr-stack-block .stack-block-content { + padding-left: 0.36rem; +} +:root { + --clr-tree-border-radius: var(--clr-global-borderradius); + --clr-tree-node-caret-link-hover-color: var(--clr-color-neutral-1000); + --clr-tree-link-hover-color: var(--clr-custom-links-hover-color); + --clr-tree-link-selection-color: var(--clr-global-selection-color); + --clr-tree-link-text-color: var(--clr-color-neutral-700); + --clr-tree-node-caret-color: var(--clr-color-neutral-500); +} +.clr-tree-node { + display: block; +} +.clr-tree-node-content-container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.clr-treenode-content { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 0; + border-top-left-radius: 0.15rem; + border-top-left-radius: var(--clr-tree-border-radius, 0.15rem); + border-bottom-left-radius: 0.15rem; + border-bottom-left-radius: var(--clr-tree-border-radius, 0.15rem); + line-height: 1.62rem; +} +.clr-treenode-content:first-child { + padding-left: 1.62rem; +} +.clr-treenode-content cds-icon { + height: 0.8rem; + width: 0.8rem; + margin-right: 0.3rem; + vertical-align: middle; +} +.clr-treenode-caret { + -webkit-box-flex: 0; + -ms-flex: 0 0 1.62rem; + flex: 0 0 1.62rem; + padding: 0; + margin: 0; + height: 1.62rem; + width: 1.62rem; + background: 0 0; + border: none; + color: #b3b3b3; + color: var(--clr-tree-node-caret-color, #b3b3b3); + cursor: pointer; + outline-offset: -0.25rem; +} +.clr-treenode-caret:hover { + color: #000; + color: var(--clr-tree-node-caret-link-hover-color, #000); +} +.clr-tree-node-caret-icon { + height: 0.8rem; + width: 0.8rem; + vertical-align: middle; +} +.clr-treenode-spinner-container { + height: 1.62rem; + width: 1.62rem; + padding: 0.41rem; +} +.clr-treenode-spinner { + height: 0.8rem; + width: 0.8rem; + min-height: 0.8rem; + min-width: 0.8rem; +} +.clr-treenode-children { + margin-left: 1.17rem; + will-change: height; + overflow-y: hidden; +} +.clr-treenode-link { + display: inline-block; + height: 100%; + width: 100%; + margin: 0; + padding: 0 0 0 0.3rem; + background: 0 0; + border: 0; + color: #666; + color: var(--clr-tree-link-text-color, #666); + cursor: pointer; + line-height: inherit; + text-align: left; +} +.clr-treenode-link:active, +.clr-treenode-link:hover, +.clr-treenode-link:link, +.clr-treenode-link:visited { + color: inherit; +} +.clr-treenode-link:focus, +.clr-treenode-link:hover { + background: #e8e8e8; + background: var(--clr-tree-link-hover-color, #e8e8e8); + text-decoration: none; +} +.clr-treenode-link:focus { + outline: 0; +} +.clr-treenode-link.active { + background: #d8e3e9; + background: var(--clr-tree-link-selection-color, #d8e3e9); + color: #000; + color: var(--clr-tree-node-caret-link-hover-color, #000); +} +.clr-tree-node-content-container > .clr-checkbox-wrapper { + height: 1.62rem; + width: 1.62rem; + padding-top: 0.21rem; + padding-left: 0.41rem; +} +.clr-tree-node-content-container > .clr-checkbox-wrapper:first-child { + margin-left: 1.62rem; +} +.clr-treenode-content .label { + margin-left: 0.3rem; +} +@supports (-ms-ime-align: auto) { + .clr-treenode-content .label { + margin-left: 0.15rem; + } +} +_:-ms-input-placeholder .clr-treenode-content .label, +:root .clr-treenode-content .label { + margin-left: 0.15rem; +} +:root { + --clr-datagrid-font-color: #acbac3; + --clr-datagrid-default-border-color: var(--clr-color-neutral-400); + --clr-datagrid-icon-color: var(--clr-color-neutral-600); + --clr-datagrid-row-hover: var(--clr-color-neutral-200); + --clr-datagrid-row-hover-font-color: var(--clr-color-neutral-1000); + --clr-datagrid-action-toggle: var(--clr-color-neutral-700); + --clr-datagrid-pagination-btn-color: var(--clr-color-neutral-700); + --clr-datagrid-pagination-btn-disabled-color: var(--clr-color-neutral-600); + --clr-datagrid-pagination-input-border-color: var( + --clr-datagrid-default-border-color + ); + --clr-datagrid-pagination-input-border-focus-color: var( + --clr-color-action-400 + ); + --clr-datagrid-popover-bg-color: var(--clr-color-neutral-0); + --clr-datagrid-popover-border-color: var( + --clr-datagrid-default-border-color + ); + --clr-datagrid-action-popover-hover-color: var(--clr-color-neutral-200); + --clr-datagrid-row-selected: var(--clr-color-neutral-1000); + --clr-datagrid-loading-background: rgba(255, 255, 255, 0.6); + --clr-datagrid-popovers-box-shadow-color: rgba(140, 140, 140, 0.25); + --clr-datagrid-column-switch-header-font-color: var( + --clr-color-neutral-500 + ); + --clr-datagrid-column-switch-header-font-hover-color: var( + --clr-color-action-600 + ); + --clr-datagrid-detail-caret-icon-open-bg-color: var(--clr-color-action-600); + --clr-datagrid-detail-caret-icon-open-icon-color: var( + --clr-color-neutral-0 + ); + --clr-datagrid-placeholder-color: var(--clr-color-neutral-500); + --clr-datagrid-placeholder-font-size: 0.8rem; + --clr-datagrid-pagination-btn-disabled-opacity: 0.56; +} +.datagrid { + border-collapse: separate; + border-style: solid; + border-width: 0.05rem; + border-width: var(--clr-table-borderwidth, 0.05rem); + border-color: #ccc; + border-color: var(--clr-table-border-color, #ccc); + border-radius: 0.15rem; + border-radius: var(--clr-table-border-radius, 0.15rem); + background-color: #fff; + background-color: var(--clr-table-bgcolor, #fff); + color: #666; + color: var(--clr-table-font-color, #666); + margin: 0; + margin-top: 1.2rem; + max-width: 100%; + width: 100%; +} +.datagrid .datagrid-cell, +.datagrid .datagrid-column { + font-size: 0.65rem; + line-height: 0.7rem; + border-top-style: solid; + border-top-width: 0.05rem; + border-top-width: var(--clr-table-borderwidth, 0.05rem); + border-top-color: #e8e8e8; + border-top-color: var(--clr-tablerow-bordercolor, #e8e8e8); + padding: 0.55rem 0.6rem 0.55rem; + text-align: center; + vertical-align: top; +} +.datagrid .datagrid-cell.left, +.datagrid .datagrid-column.left { + text-align: left; +} +.datagrid .datagrid-cell.left:first-child, +.datagrid .datagrid-column.left:first-child { + padding-left: 0.3rem; +} +.datagrid .datagrid-column { + color: #666; + color: var(--clr-thead-color, #666); + font-size: 0.55rem; + font-weight: 600; + letter-spacing: 0.03em; + background-color: #fafafa; + background-color: var(--clr-thead-bgcolor, #fafafa); + vertical-align: bottom; + border-bottom-style: solid; + border-bottom-width: 0.05rem; + border-bottom-width: var(--clr-table-borderwidth, 0.05rem); + border-bottom-color: #ccc; + border-bottom-color: var(--clr-table-border-color, #ccc); + border-top: 0 none; +} +.datagrid .datagrid-body .datagrid-row:first-child .datagrid-cell { + border-top: 0 none; +} +.datagrid .datagrid-body + .datagrid-body { + border-top-style: solid; + border-top-width: 0.05rem; + border-top-width: var(--clr-table-borderwidth, 0.05rem); + border-top-color: #ccc; + border-top-color: var(--clr-table-border-color, #ccc); +} +.datagrid .datagrid-header .datagrid-column:first-child { + border-radius: 0; + border-top-left-radius: 0.1rem; + border-top-left-radius: var(--clr-table-cornercellradius, 0.1rem); +} +.datagrid .datagrid-header .datagrid-column:last-child { + border-radius: 0; + border-top-right-radius: 0.1rem; + border-top-right-radius: var(--clr-table-cornercellradius, 0.1rem); +} +.datagrid + .datagrid-body:last-child + .datagrid-row:last-child + .datagrid-cell:first-child { + border-radius: 0; + border-bottom-left-radius: 0.1rem; + border-bottom-left-radius: var(--clr-table-cornercellradius, 0.1rem); +} +.datagrid + .datagrid-body:last-child + .datagrid-row:last-child + .datagrid-cell:last-child { + border-radius: 0; + border-bottom-right-radius: 0.1rem; + border-bottom-right-radius: var(--clr-table-cornercellradius, 0.1rem); +} +.datagrid-compact .datagrid-cell, +.datagrid-compact .datagrid-column { + padding-top: 0.3rem; + padding-bottom: 0.25rem; +} +.datagrid-host { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; + position: relative; +} +.datagrid { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + -ms-overflow-style: -ms-autohiding-scrollbar; + overflow: auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + margin-top: 0.6rem; +} +.datagrid-container { + width: auto; + font-size: 0.65rem; + padding: 0.55rem 0.6rem 0.55rem; +} +.datagrid-expandable-caret { + padding: 0.1rem 0.2rem 0.15rem; + text-align: center; +} +.datagrid-expandable-caret .datagrid-expandable-caret-button { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + background: 0 0; + cursor: pointer; + height: 1.5rem; + width: 1.5rem; +} +button.datagrid-expandable-caret .datagrid-expandable-caret-button { + cursor: pointer; +} +.datagrid-expandable-caret .datagrid-expandable-caret-icon { + color: #8c8c8c; + color: var(--clr-datagrid-icon-color, #8c8c8c); + margin-top: 0.15rem; +} +.datagrid-expandable-caret .datagrid-expandable-caret-icon svg { + -webkit-transition: -webkit-transform 0.2s ease-in-out; + transition: -webkit-transform 0.2s ease-in-out; + transition: transform 0.2s ease-in-out; + transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; +} +.datagrid-expandable-caret .spinner { + margin-top: 0.3rem; +} +.datagrid-expandable-caret.datagrid-column { + padding: 0.55rem 0.6rem 0.55rem; +} +.datagrid-body, +.datagrid-cell, +.datagrid-column, +.datagrid-fixed-column, +.datagrid-header, +.datagrid-row { + display: block; +} +.datagrid-row { + border-top-style: solid; + border-top-width: 0.05rem; + border-top-width: var(--clr-table-borderwidth, 0.05rem); + border-top-color: #ccc; + border-top-color: var(--clr-table-border-color, #ccc); +} +.datagrid-row:first-of-type { + border-top: none; +} +.datagrid-row:hover { + background-color: #e8e8e8; + background-color: var(--clr-datagrid-row-hover, #e8e8e8); +} +.datagrid-row:hover .datagrid-row-sticky { + background-color: #e8e8e8; + background-color: var(--clr-datagrid-row-hover, #e8e8e8); +} +.datagrid-row.datagrid-selected { + color: #000; + color: var(--clr-datagrid-row-selected, #000); + background-color: #d8e3e9; + background-color: var(--clr-global-selection-color, #d8e3e9); +} +.datagrid-row.datagrid-selected .datagrid-row-sticky { + color: #000; + color: var(--clr-datagrid-row-selected, #000); + background-color: #d8e3e9; + background-color: var(--clr-global-selection-color, #d8e3e9); +} +.datagrid-row .datagrid-action-overflow { + position: absolute; + background: #fff; + background: var(--clr-datagrid-popover-bg-color, #fff); + padding: 0.3rem; + margin-left: 0.3rem; + border-style: solid; + border-width: 0.05rem; + border-width: var(--clr-global-borderwidth, 0.05rem); + border-color: #ccc; + border-color: var(--clr-datagrid-popover-border-color, #ccc); + -webkit-box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + -webkit-box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + border-radius: 0.15rem; + border-radius: var(--clr-global-borderradius, 0.15rem); + font-weight: 400; + white-space: nowrap; +} +.datagrid-row .datagrid-action-overflow::before { + content: ""; + position: absolute; + top: 50%; + right: 100%; + height: 0; + width: 0; + margin-top: -0.3rem; + border-top: 0.3rem solid transparent; + border-bottom: 0.3rem solid transparent; + border-right-width: 0.3rem; + border-right-style: solid; + border-right-color: #ccc; + border-right-color: var(--clr-datagrid-popover-border-color, #ccc); +} +.datagrid-row .datagrid-action-overflow::after { + content: ""; + position: absolute; + top: 50%; + right: 100%; + height: 0; + width: 0; + margin-top: -0.25rem; + border-top: 0.25rem solid transparent; + border-bottom: 0.25rem solid transparent; + border-right-width: 0.25rem; + border-right-style: solid; + border-right-color: #fff; + border-right-color: var(--clr-datagrid-popover-bg-color, #fff); +} +.datagrid-row .datagrid-action-overflow .action-item { + color: #666; + color: var(--clr-dropdown-text-color, #666); + font-size: 0.7rem; + letter-spacing: normal; + background: 0 0; + border: 0; + cursor: pointer; + display: block; + line-height: 1.15rem; + margin: 0; + padding: 0.05rem 1.2rem 0; + text-align: left; + width: 100%; +} +.datagrid-row .datagrid-action-overflow .action-item:focus, +.datagrid-row .datagrid-action-overflow .action-item:hover { + background-color: #e8e8e8; + background-color: var(--clr-datagrid-action-popover-hover-color, #e8e8e8); + text-decoration: none; +} +.datagrid-row .datagrid-action-overflow .action-item.active { + background: #e8e8e8; + background: var(--clr-datagrid-row-hover, #e8e8e8); + color: #000; + color: var(--clr-color-neutral-1000, #000); +} +.datagrid-row .datagrid-action-overflow .action-item:focus { + outline: 0; +} +.datagrid-row .datagrid-action-overflow .action-item.disabled, +.datagrid-row .datagrid-action-overflow .action-item:disabled { + cursor: not-allowed; + opacity: 0.4; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.datagrid-row .datagrid-action-overflow .action-item.disabled:hover, +.datagrid-row .datagrid-action-overflow .action-item:disabled:hover { + background: 0 0; +} +.datagrid-row .datagrid-action-overflow .action-item.disabled:active, +.datagrid-row .datagrid-action-overflow .action-item.disabled:focus, +.datagrid-row .datagrid-action-overflow .action-item:disabled:active, +.datagrid-row .datagrid-action-overflow .action-item:disabled:focus { + background: 0 0; + -webkit-box-shadow: none; + box-shadow: none; +} +.datagrid-row .datagrid-action-overflow .action-item cds-icon { + vertical-align: middle; + -webkit-transform: translate3d(0, -0.05rem, 0); + transform: translate3d(0, -0.05rem, 0); +} +.datagrid-row .datagrid-action-overflow { + position: absolute; + background: #fff; + background: var(--clr-datagrid-popover-bg-color, #fff); + padding: 0.3rem; + margin-left: 0.3rem; + border-style: solid; + border-width: 0.05rem; + border-width: var(--clr-global-borderwidth, 0.05rem); + border-color: #ccc; + border-color: var(--clr-datagrid-popover-border-color, #ccc); + -webkit-box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + -webkit-box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + border-radius: 0.15rem; + border-radius: var(--clr-global-borderradius, 0.15rem); + font-weight: 400; + white-space: nowrap; +} +.datagrid-row .datagrid-action-overflow::before { + content: ""; + position: absolute; + top: 50%; + right: 100%; + width: 0; + height: 0; + margin-top: -0.3rem; + border-top: 0.3rem solid transparent; + border-bottom: 0.3rem solid transparent; + border-right-width: 0.3rem; + border-right-style: solid; + border-right-color: #ccc; + border-right-color: var(--clr-datagrid-popover-border-color, #ccc); +} +.datagrid-row .datagrid-action-overflow::after { + content: ""; + position: absolute; + top: 50%; + right: 100%; + width: 0; + height: 0; + margin-top: -0.25rem; + border-top: 0.25rem solid transparent; + border-bottom: 0.25rem solid transparent; + border-right-width: 0.25rem; + border-right-style: solid; + border-right-color: #fff; + border-right-color: var(--clr-datagrid-popover-bg-color, #fff); +} +.datagrid-row .datagrid-action-overflow .action-item { + color: #666; + color: var(--clr-dropdown-text-color, #666); + font-size: 0.7rem; + letter-spacing: normal; + background: 0 0; + border: 0; + cursor: pointer; + display: block; + line-height: 1.15rem; + margin: 0; + padding: 0.05rem 1.2rem 0; + text-align: left; + width: 100%; +} +.datagrid-row .datagrid-action-overflow .action-item:focus, +.datagrid-row .datagrid-action-overflow .action-item:hover { + background-color: #e8e8e8; + background-color: var(--clr-datagrid-action-popover-hover-color, #e8e8e8); + text-decoration: none; +} +.datagrid-row .datagrid-action-overflow .action-item.active { + background: #e8e8e8; + background: var(--clr-datagrid-row-hover, #e8e8e8); + color: #000; + color: var(--clr-color-neutral-1000, #000); +} +.datagrid-row .datagrid-action-overflow .action-item:focus { + outline: 0; +} +.datagrid-row .datagrid-action-overflow .action-item.disabled, +.datagrid-row .datagrid-action-overflow .action-item:disabled { + cursor: not-allowed; + opacity: 0.4; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.datagrid-row .datagrid-action-overflow .action-item.disabled:hover, +.datagrid-row .datagrid-action-overflow .action-item:disabled:hover { + background: 0 0; +} +.datagrid-row .datagrid-action-overflow .action-item.disabled:active, +.datagrid-row .datagrid-action-overflow .action-item.disabled:focus, +.datagrid-row .datagrid-action-overflow .action-item:disabled:active, +.datagrid-row .datagrid-action-overflow .action-item:disabled:focus { + background: 0 0; + -webkit-box-shadow: none; + box-shadow: none; +} +.datagrid-row .datagrid-action-overflow .action-item cds-icon { + vertical-align: middle; + -webkit-transform: translate3d(0, -0.05rem, 0); + transform: translate3d(0, -0.05rem, 0); +} +.datagrid-row .datagrid-action-overflow { + position: absolute; + background: #fff; + background: var(--clr-datagrid-popover-bg-color, #fff); + padding: 0.3rem; + margin-left: 0.3rem; + border-width: 0.05rem; + border-width: var(--clr-global-borderwidth, 0.05rem); + border-style: solid; + border-color: #ccc; + border-color: var(--clr-datagrid-popover-border-color, #ccc); + -webkit-box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + -webkit-box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + border-color: 0.15rem; + border-color: var(--clr-global-borderradius, 0.15rem); + font-weight: 400; + white-space: nowrap; +} +.datagrid-row .datagrid-action-overflow::before { + content: ""; + position: absolute; + top: 50%; + right: 100%; + width: 0; + height: 0; + margin-top: -0.3rem; + border-right: 0.3rem solid; + border-right-color: #ccc; + border-right-color: var(--clr-datagrid-popover-border-color, #ccc); + border-top: 0.3rem solid transparent; + border-bottom: 0.3rem solid transparent; +} +.datagrid-row .datagrid-action-overflow::after { + content: ""; + position: absolute; + top: 50%; + right: 100%; + width: 0; + height: 0; + margin-top: -0.25rem; + border-right: 0.25rem solid #fff; + border-top: 0.25rem solid transparent; + border-bottom: 0.25rem solid transparent; +} +.datagrid-row .datagrid-action-overflow .action-item { + color: #666; + color: var(--clr-dropdown-text-color, #666); + font-size: 0.7rem; + letter-spacing: normal; + background: 0 0; + border: 0; + cursor: pointer; + display: block; + line-height: 1.15rem; + margin: 0; + padding: 0.05rem 1.2rem 0; + text-align: left; + width: 100%; +} +.datagrid-row .datagrid-action-overflow .action-item:focus, +.datagrid-row .datagrid-action-overflow .action-item:hover { + text-decoration: none; + background-color: #e8e8e8; + background-color: var(--clr-datagrid-action-popover-hover-color, #e8e8e8); +} +.datagrid-row .datagrid-action-overflow .action-item.active { + background: #e8e8e8; + background: var(--clr-datagrid-row-hover, #e8e8e8); + color: #000; + color: var(--clr-datagrid-row-hover-font-color, #000); +} +.datagrid-row .datagrid-action-overflow .action-item:focus { + outline: 0; +} +.datagrid-row .datagrid-action-overflow .action-item.disabled, +.datagrid-row .datagrid-action-overflow .action-item:disabled { + cursor: not-allowed; + opacity: 0.4; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.datagrid-row .datagrid-action-overflow .action-item.disabled:hover, +.datagrid-row .datagrid-action-overflow .action-item:disabled:hover { + background: 0 0; +} +.datagrid-row .datagrid-action-overflow .action-item.disabled:active, +.datagrid-row .datagrid-action-overflow .action-item.disabled:focus, +.datagrid-row .datagrid-action-overflow .action-item:disabled:active, +.datagrid-row .datagrid-action-overflow .action-item:disabled:focus { + background: 0 0; + -webkit-box-shadow: none; + box-shadow: none; +} +.datagrid-row .datagrid-action-overflow .action-item cds-icon { + vertical-align: middle; + -webkit-transform: translate3d(0, -0.05rem, 0); + transform: translate3d(0, -0.05rem, 0); +} +.datagrid-row .datagrid-row-detail-wrapper { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.datagrid-row .datagrid-row-detail { + width: auto; +} +.datagrid-row .datagrid-row-detail .datagrid-cell { + padding-top: 0; + border: none; +} +.datagrid-row .datagrid-select { + min-width: 0.4rem; +} +.datagrid-row .datagrid-signpost-trigger .signpost { + margin: -0.36rem 0; + height: 1.236rem; +} +.datagrid-row .datagrid-signpost-trigger .signpost .signpost-trigger { + height: inherit; + line-height: 1.2rem; +} +.datagrid-row .datagrid-row-sticky { + z-index: 500; +} +.datagrid-row-sticky { + background-color: #fff; + background-color: var(--clr-table-bgcolor, #fff); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + position: sticky; + left: 0; + z-index: 502; +} +.datagrid-row-sticky .datagrid-cell:last-child:after { + content: ""; + width: 0.05rem; + height: calc(100% - 0.5rem); + position: absolute; + right: 0; + top: 0.25rem; + background-color: #ccc; + background-color: var(--clr-table-border-color, #ccc); +} +.datagrid-row-scrollable { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; +} +.datagrid-row-scrollable.is-replaced { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; +} +.datagrid-row-scrollable.is-replaced .datagrid-scrolling-cells { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} +.datagrid-row-scrollable + .datagrid-column:last-child + .datagrid-column-separator { + display: none; +} +.datagrid-row-flex { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; +} +.datagrid-row-flex .datagrid-row-detail { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; +} +.datagrid-row-flex .datagrid-row-detail .datagrid-cell { + padding-top: 0; +} +.datagrid-scrolling-cells, +.datagrid-scrolling-details { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; +} +.datagrid-action-bar { + margin-top: 1.2rem; +} +.datagrid-action-bar ~ .datagrid-spinner { + height: calc(100% - 1.2rem); + top: 1.2rem; +} +.datagrid-header { + position: sticky; + top: 0; + z-index: 501; + width: auto; +} +.datagrid-header .datagrid-column { + border-bottom: none; +} +.datagrid-header .datagrid-row { + background-color: #fafafa; + background-color: var(--clr-thead-bgcolor, #fafafa); + border-top: none; + border-bottom-style: solid; + border-bottom-width: 0.05rem; + border-bottom-width: var(--clr-global-borderwidth, 0.05rem); + border-bottom-color: #ccc; + border-bottom-color: var(--clr-table-border-color, #ccc); +} +.datagrid-header .datagrid-row .datagrid-row-sticky { + background-color: #fafafa; + background-color: var(--clr-thead-bgcolor, #fafafa); +} +.datagrid-header .datagrid-row:hover { + background-color: #fafafa; + background-color: var(--clr-thead-bgcolor, #fafafa); +} +.datagrid-header .datagrid-row:hover .datagrid-row-sticky { + background-color: #fafafa; + background-color: var(--clr-thead-bgcolor, #fafafa); +} +.datagrid-header .datagrid-row-scrollable { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; +} +.datagrid-table-wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + min-height: 100%; +} +.datagrid-table { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -ms-flex-line-pack: start; + align-content: flex-start; + position: relative; +} +.datagrid-table .datagrid-body { + width: auto; +} +.datagrid-table .datagrid-column { + text-align: left; + min-width: 4.8rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + vertical-align: top; + border: none; +} +.datagrid-table .datagrid-column clr-dg-filter, +.datagrid-table .datagrid-column clr-dg-numeric-filter, +.datagrid-table .datagrid-column clr-dg-string-filter { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-ordinal-group: 100; + -ms-flex-order: 99; + order: 99; + margin-left: auto; +} +.datagrid-table .datagrid-column .datagrid-filter-input-spacer { + width: 0.6rem; + display: inline-block; +} +.datagrid-table .datagrid-column .datagrid-numeric-filter-input { + width: 3.9rem; +} +.datagrid-table .datagrid-column .datagrid-filter-toggle { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + background: 0 0; + cursor: pointer; + float: right; + vertical-align: middle; + height: 0.7rem; + width: 0.7rem; + margin-left: 0.3rem; + background-repeat: no-repeat; + background-size: contain; +} +button.datagrid-table .datagrid-column .datagrid-filter-toggle { + cursor: pointer; +} +.datagrid-table .datagrid-column .datagrid-filter-toggle cds-icon { + color: #b3b3b3; + color: var(--clr-color-neutral-500, #b3b3b3); +} +.datagrid-table .datagrid-column .datagrid-filter-toggle:hover cds-icon { + color: #0072a3; + color: var(--clr-color-action-600, #0072a3); +} +.datagrid-table + .datagrid-column + .datagrid-filter-toggle.datagrid-filter-open + cds-icon { + color: #0072a3; + color: var(--clr-color-action-600, #0072a3); +} +.datagrid-table + .datagrid-column + .datagrid-filter-toggle.datagrid-filtered + cds-icon { + color: #0072a3; + color: var(--clr-color-action-600, #0072a3); +} +.datagrid-table .datagrid-column .datagrid-filter { + top: 100%; + right: 0; + margin-top: 0.24rem; + background: #fff; + background: var(--clr-datagrid-popover-bg-color, #fff); + padding: 0.9rem; + border-style: solid; + border-width: 0.05rem; + border-width: var(--clr-global-borderwidth, 0.05rem); + border-color: #ccc; + border-color: var(--clr-datagrid-popover-border-color, #ccc); + -webkit-box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + -webkit-box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + border-radius: 0.15rem; + border-radius: var(--clr-global-borderradius, 0.15rem); + font-weight: 400; +} +.datagrid-table + .datagrid-column + .datagrid-filter + .datagrid-filter-close-wrapper { + text-align: right; +} +.datagrid-table + .datagrid-column + .datagrid-filter + .datagrid-filter-close-wrapper + .close { + float: none; +} +.datagrid-table .datagrid-column .datagrid-filter .datagrid-filter-apply { + margin-bottom: 0; +} +.datagrid-table .datagrid-column .datagrid-filter { + top: 100%; + right: 0; + margin-top: 0.24rem; + background: #fff; + background: var(--clr-datagrid-popover-bg-color, #fff); + padding: 0.9rem; + border-style: solid; + border-width: 0.05rem; + border-width: var(--clr-global-borderwidth, 0.05rem); + border-color: #ccc; + border-color: var(--clr-datagrid-popover-border-color, #ccc); + -webkit-box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + -webkit-box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + border-radius: 0.15rem; + border-radius: var(--clr-global-borderradius, 0.15rem); + font-weight: 400; +} +.datagrid-table + .datagrid-column + .datagrid-filter + .datagrid-filter-close-wrapper { + text-align: right; +} +.datagrid-table + .datagrid-column + .datagrid-filter + .datagrid-filter-close-wrapper + .close { + float: none; +} +.datagrid-table .datagrid-column .datagrid-filter .datagrid-filter-apply { + margin-bottom: 0; +} +.datagrid-table .datagrid-column .datagrid-filter { + top: 100%; + right: 0; + margin-top: 0.24rem; + background: #fff; + background: var(--clr-datagrid-popover-bg-color, #fff); + padding: 0.9rem; + border-width: 0.05rem; + border-width: var(--clr-global-borderwidth, 0.05rem); + border-color: #ccc; + border-color: var(--clr-datagrid-popover-border-color, #ccc); + border-style: solid; + -webkit-box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + -webkit-box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + border-radius: 0.15rem; + border-radius: var(--clr-global-borderradius, 0.15rem); + font-weight: 400; +} +.datagrid-table + .datagrid-column + .datagrid-filter + .datagrid-filter-close-wrapper { + text-align: right; +} +.datagrid-table + .datagrid-column + .datagrid-filter + .datagrid-filter-close-wrapper + .close { + float: none; +} +.datagrid-table .datagrid-column .datagrid-filter .datagrid-filter-apply { + margin-bottom: 0; +} +.datagrid-table .datagrid-column.datagrid-fixed-width { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} +.datagrid-table .datagrid-column .datagrid-column-flex { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; +} +.datagrid-table .datagrid-column .datagrid-column-title { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + background: 0 0; + color: #666; + color: var(--clr-table-font-color, #666); + text-align: left; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-item-align: center; + align-self: center; + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +button.datagrid-table .datagrid-column .datagrid-column-title { + cursor: pointer; +} +.datagrid-table + .datagrid-column + .datagrid-column-title + .signpost + .signpost-action.btn { + height: inherit; + line-height: inherit; +} +.datagrid-table + .datagrid-column + .datagrid-column-title + .clr-checkbox-wrapper + .clr-control-label { + margin-top: -0.48rem; +} +.datagrid-table .datagrid-column button.datagrid-column-title:hover { + text-decoration: underline; + cursor: pointer; +} +.datagrid-table .datagrid-column button.datagrid-column-title .sort-icon { + color: #0072a3; + color: var(--clr-color-action-600, #0072a3); + margin-left: auto; + height: 0.7rem; + width: 0.7rem; + vertical-align: middle; +} +.datagrid-table .datagrid-column .datagrid-column-separator { + position: relative; + left: 0.6rem; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: 0.05rem; + width: var(--clr-global-borderwidth, 0.05rem); + -webkit-box-ordinal-group: 101; + -ms-flex-order: 100; + order: 100; + margin-left: auto; + height: 100%; +} +.datagrid-table .datagrid-column .datagrid-column-separator::after { + content: ""; + position: absolute; + height: calc(100% + 0.6rem - 0.05rem); + width: 0.05rem; + top: calc(-0.5 * 0.6rem + 0.05rem); + left: 0; + background-color: #ccc; + background-color: var(--clr-table-border-color, #ccc); +} +.datagrid-table + .datagrid-column + .datagrid-column-separator + .datagrid-column-handle { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + background: 0 0; + position: absolute; + width: 0.65rem; + right: -0.3rem; + top: -0.3rem; + cursor: col-resize; + height: calc(100% + 0.6rem - 0.05rem); + z-index: 501; +} +button.datagrid-table + .datagrid-column + .datagrid-column-separator + .datagrid-column-handle { + cursor: pointer; +} +.datagrid-table + .datagrid-column + .datagrid-column-separator + .datagrid-column-resize-tracker { + position: absolute; + top: -0.6rem; + display: none; + width: 0.05rem; + height: 0; + border-right-style: dotted; + border-right-color: #79c6e6; + border-right-color: var(--clr-color-action-300, #79c6e6); + border-right-width: 0.05rem; + border-right-width: var(--clr-global-borderwidth, 0.05rem); + -webkit-transform: translateX(0); + transform: translateX(0); + cursor: col-resize; +} +.datagrid-table + .datagrid-column + .datagrid-column-separator + .datagrid-column-resize-tracker.on-arrow-key-resize { + -webkit-transition: -webkit-transform 0.2s ease-out; + transition: -webkit-transform 0.2s ease-out; + transition: transform 0.2s ease-out; + transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out; +} +.datagrid-table .datagrid-column .datagrid-column-separator .exceeded-max { + border-right: 0.05rem dotted rgba(219, 33, 0, 0.3); +} +.datagrid-table .datagrid-column .datagrid-signpost-trigger .signpost { + margin: -0.36rem 0; + height: 1.236rem; +} +.datagrid-table + .datagrid-column + .datagrid-signpost-trigger + .signpost + .signpost-trigger { + height: inherit; + line-height: 1.2rem; +} +.datagrid-table .datagrid-column.datagrid-expandable-caret, +.datagrid-table .datagrid-column.datagrid-row-actions, +.datagrid-table .datagrid-column.datagrid-select { + max-width: 1.9rem; + min-width: 1.9rem; +} +.datagrid-table .datagrid-cell { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + text-align: left; + min-width: 4.8rem; + border: none; +} +.datagrid-table .datagrid-cell.datagrid-fixed-width { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} +.datagrid-table .datagrid-cell.datagrid-fixed-column { + -webkit-box-flex: 0; + -ms-flex: 0 0 1.9rem; + flex: 0 0 1.9rem; + max-width: 1.9rem; + min-width: 1.9rem; +} +.datagrid-table .datagrid-cell.datagrid-row-actions { + background: 0 0; +} +.datagrid-table .datagrid-cell.datagrid-expandable-caret { + padding: 0.1rem 0.2rem 0.15rem; + text-align: center; +} +.datagrid-table .datagrid-cell .datagrid-action-toggle { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + background: 0 0; +} +button.datagrid-table .datagrid-cell .datagrid-action-toggle { + cursor: pointer; +} +.datagrid-table .datagrid-cell .datagrid-action-toggle cds-icon { + color: #8c8c8c; + color: var(--clr-datagrid-icon-color, #8c8c8c); +} +.datagrid-table .datagrid-cell .datagrid-action-toggle:active cds-icon { + color: #666; + color: var(--clr-datagrid-action-toggle, #666); +} +.datagrid-table .datagrid-cell .clr-toggle-wrapper { + margin-top: -0.66rem; + padding-top: 0.42rem; +} +.datagrid-table .datagrid-placeholder-container { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + border-top-style: solid; + border-top-color: #ccc; + border-top-color: var(--clr-table-border-color, #ccc); + border-top-width: 0.05rem; + border-top-width: var(--clr-global-borderwidth, 0.05rem); +} +.datagrid-table .datagrid-placeholder { + background: #fff; + background: var(--clr-table-bgcolor, #fff); + width: 100%; +} +.datagrid-table .datagrid-placeholder.datagrid-empty { + border-top: 0; + padding: 0.6rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + font-size: 0.8rem; + font-size: var(--clr-datagrid-placeholder-font-size, 0.8rem); + color: #b3b3b3; + color: var(--clr-datagrid-placeholder-color, #b3b3b3); +} +.datagrid-table .datagrid-placeholder .datagrid-placeholder-image { + height: 3rem; + width: 3rem; + margin-bottom: 0.6rem; + background-repeat: no-repeat; + background-size: contain; + background-position: center; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2060%2072%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cellipse%20id%3D%22path-1%22%20cx%3D%2230%22%20cy%3D%2261.7666667%22%20rx%3D%2215.4512904%22%20ry%3D%224.73333333%22%3E%3C%2Fellipse%3E%0A%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20maskContentUnits%3D%22userSpaceOnUse%22%20maskUnits%3D%22objectBoundingBox%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2230.9025808%22%20height%3D%229.46666667%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Artboard%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20id%3D%22Oval-10%22%20stroke%3D%22%23C1DFEF%22%20mask%3D%22url(%23mask-2)%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22square%22%20stroke-dasharray%3D%223%2C6%2C3%2C5%22%20xlink%3Ahref%3D%22%23path-1%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M38.4613647%2C18.1642456%20L30.9890137%2C34.9141846%20L31%2C47%20L32.5977783%2C46.5167236%20L32.5977783%2C34.9141846%20L51.0673218%2C15.7560425%20C51.0673218%2C15.7560425%2048.6295166%2C16.6542969%2044.9628906%2C17.3392334%20C41.2962646%2C18.0241699%2038.4613647%2C18.1642456%2038.4613647%2C18.1642456%20Z%22%20id%3D%22Path-195%22%20fill%3D%22%23C1DFEF%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M4.74639226%2C12.5661855%20L4.62065726%2C12.1605348%20L5.3515414%2C11.1625044%20L5.77622385%2C11.159939%20L6.20936309%2C12.5573481%20L4.74639226%2C12.5661855%20Z%20M6.20936309%2C12.5573481%20L6.32542632%2C12.9317954%20L28.4963855%2C34.8796718%20L28.4963855%2C47.8096691%20L32.6%2C46.4836513%20L32.6%2C34.8992365%20L53.973494%2C12.7035813%20L53.973494%2C12.2688201%20L6.20936309%2C12.5573481%20Z%20M55.373494%2C10.8603376%20L55.373494%2C13.2680664%20L34%2C35.4637216%20L34%2C47.5025401%20L27.0963855%2C49.7333333%20L27.0963855%2C35.4637219%20L5.09179688%2C13.680542%20L4.31325301%2C11.1687764%20L55.373494%2C10.8603376%20Z%22%20id%3D%22Path-149%22%20fill%3D%22%237FBDDD%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cellipse%20id%3D%22Oval-9%22%20fill%3D%22%23FFFFFF%22%20cx%3D%2230%22%20cy%3D%2211.785654%22%20rx%3D%2226%22%20ry%3D%226.78565401%22%3E%3C%2Fellipse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M30%2C17.171308%20C36.8772177%2C17.171308%2043.3112282%2C16.4610701%2048.0312371%2C15.2292106%20C50.2777611%2C14.6428977%2052.0507619%2C13.9579677%2053.2216231%2C13.2354973%20C54.1938565%2C12.6355886%2054.6%2C12.1175891%2054.6%2C11.785654%20C54.6%2C11.4537189%2054.1938565%2C10.9357194%2053.2216231%2C10.3358107%20C52.0507619%2C9.61334032%2050.2777611%2C8.92841034%2048.0312371%2C8.34209746%20C43.3112282%2C7.11023795%2036.8772177%2C6.4%2030%2C6.4%20C23.1227823%2C6.4%2016.6887718%2C7.11023795%2011.9687629%2C8.34209746%20C9.72223886%2C8.92841034%207.94923814%2C9.61334032%206.77837689%2C10.3358107%20C5.8061435%2C10.9357194%205.4%2C11.4537189%205.4%2C11.785654%20C5.4%2C12.1175891%205.8061435%2C12.6355886%206.77837689%2C13.2354973%20C7.94923814%2C13.9579677%209.72223886%2C14.6428977%2011.9687629%2C15.2292106%20C16.6887718%2C16.4610701%2023.1227823%2C17.171308%2030%2C17.171308%20Z%20M30%2C18.571308%20C15.6405965%2C18.571308%204%2C15.5332672%204%2C11.785654%20C4%2C8.03804078%2015.6405965%2C5%2030%2C5%20C44.3594035%2C5%2056%2C8.03804078%2056%2C11.785654%20C56%2C15.5332672%2044.3594035%2C18.571308%2030%2C18.571308%20Z%22%20id%3D%22Oval-9-Copy%22%20fill%3D%22%237FBDDD%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M18.2608643%2C7.14562988%20L22.727356%2C16.9047241%20C22.727356%2C16.9047241%2015.3006592%2C16.3911743%2010.276001%2C14.7511597%20C5.25134277%2C13.111145%205.38031006%2C11.8284302%205.38031006%2C11.6882935%20C5.38031006%2C10.4832831%208.16633152%2C9.41877716%2011.114563%2C8.57324219%20C14.549319%2C7.58817492%2018.2608643%2C7.14562988%2018.2608643%2C7.14562988%20Z%22%20id%3D%22Path-196%22%20fill%3D%22%23C1DFEF%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"); +} +.datagrid-table .datagrid-hidden-column.datagrid-cell, +.datagrid-table .datagrid-hidden-column.datagrid-column { + display: none; +} +.datagrid-row-replaced + .datagrid-scrolling-cells + .datagrid-cell:not(.datagrid-expandable-caret):not(.datagrid-row-actions):not(.datagrid-select) { + display: none; +} +.datagrid-row-replaced .datagrid-row-detail .datagrid-cell { + display: block; + padding-top: 0.55rem; +} +.datagrid-row-replaced + .datagrid-row-detail + .datagrid-cell.datagrid-hidden-column { + display: none; +} +.datagrid-row-replaced .datagrid-row-detail .datagrid-expandable-caret { + padding-top: 0.1rem; +} +.datagrid-row-replaced .datagrid-row-detail.datagrid-container { + border-top: 0.05rem solid #ccc; +} +.datagrid-row-replaced .datagrid-row-detail.datagrid-container .datagrid-cell { + border-top: none; +} +.datagrid-footer { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + padding: 0 0.6rem; + line-height: 1.65rem; + font-size: 0.55rem; + background-color: #fafafa; + background-color: var(--clr-thead-bgcolor, #fafafa); + border-style: solid; + border-color: #ccc; + border-color: var(--clr-table-footer-border-top-color, #ccc); + border-width: 0.05rem; + border-width: var(--clr-global-borderwidth, 0.05rem); + border-top: none; + border-radius: 0; + border-bottom-right-radius: 0.15rem; + border-bottom-right-radius: var(--clr-global-borderradius, 0.15rem); + border-bottom-left-radius: 0.15rem; + border-bottom-left-radius: var(--clr-global-borderradius, 0.15rem); +} +.datagrid-footer .pagination { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + line-height: 1.8rem; +} +.datagrid-footer .pagination-size { + display: block; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + white-space: nowrap; + text-align: right; +} +.datagrid-footer .pagination-size .clr-select-wrapper::after { + top: 0.6rem; +} +.datagrid-footer .pagination-size .clr-page-size-select { + font-size: 100%; + margin-left: 0.6rem; + height: 1.2rem; + line-height: 1.2rem; + vertical-align: middle; +} +.datagrid-footer .pagination-size + .pagination-description { + margin-left: 1.2rem; +} +.datagrid-footer .pagination-description { + white-space: nowrap; +} +.datagrid-footer .pagination-list { + margin-left: 1.2rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.datagrid-footer .column-switch-wrapper { + position: relative; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} +.datagrid-footer .column-switch-wrapper.active .column-toggle--action cds-icon { + color: #0072a3; + color: var(--clr-color-action-600, #0072a3); +} +.datagrid-footer .column-switch-wrapper .column-toggle--action { + min-width: 0.9rem; + padding-left: 0; + padding-right: 0; +} +.datagrid-footer .column-switch-wrapper .column-toggle--action cds-icon { + color: #b3b3b3; + color: var(--clr-color-neutral-500, #b3b3b3); +} +.datagrid-footer .column-switch-wrapper .column-toggle--action:hover cds-icon { + color: #0072a3; + color: var(--clr-color-action-600, #0072a3); +} +.datagrid-footer .column-switch-wrapper .column-switch { + border-radius: 0.15rem; + border-radius: var(--clr-global-borderradius, 0.15rem); + background-color: #fff; + background-color: var(--clr-datagrid-popover-bg-color, #fff); + border-color: #ccc; + border-color: var(--clr-datagrid-popover-border-color, #ccc); + border-width: 0.05rem; + border-width: var(--clr-global-borderwidth, 0.05rem); + -webkit-box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + -webkit-box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + padding: 0.9rem; + border-style: solid; + border-top: none; + width: 12.5rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + z-index: 1060; +} +.datagrid-footer .column-switch-wrapper .column-switch .switch-header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + font-weight: 400; + font-size: 0.8rem; + padding-bottom: 0.6rem; + line-height: 1.2rem; +} +.datagrid-footer .column-switch-wrapper .column-switch .switch-header button { + min-width: 0.9rem; + margin: 0; + padding: 0; + color: #b3b3b3; + color: var(--clr-color-neutral-500, #b3b3b3); +} +.datagrid-footer + .column-switch-wrapper + .column-switch + .switch-header + button:hover { + color: #0072a3; + color: var(--clr-color-action-600, #0072a3); +} +.datagrid-footer .column-switch-wrapper .column-switch .switch-content { + max-height: 15rem; + overflow-y: auto; + min-height: 2.4rem; +} +.datagrid-footer .column-switch-wrapper .column-switch .switch-content li { + line-height: 1.2rem; + padding-left: 0.1rem; +} +.datagrid-footer .column-switch-wrapper .column-switch .switch-footer .btn { + margin: 0; + padding: 0; +} +.datagrid-footer + .column-switch-wrapper + .column-switch + .switch-footer + .action-right { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; +} +.datagrid-footer .column-switch-wrapper .column-switch { + border-radius: 0.15rem; + border-radius: var(--clr-global-borderradius, 0.15rem); + background-color: #fff; + background-color: var(--clr-datagrid-popover-bg-color, #fff); + border-width: 0.05rem; + border-width: var(--clr-global-borderwidth, 0.05rem); + border-color: #ccc; + border-color: var(--clr-datagrid-popover-border-color, #ccc); + border-style: solid; + -webkit-box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + -webkit-box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + padding: 0.9rem; + width: 12.5rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + z-index: 1060; +} +.datagrid-footer .column-switch-wrapper .column-switch .switch-header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + font-weight: 400; + font-size: 0.8rem; + padding-bottom: 0.6rem; + line-height: 1.2rem; +} +.datagrid-footer .column-switch-wrapper .column-switch .switch-header button { + min-width: 0.9rem; + margin: 0; + padding: 0; + color: #b3b3b3; + color: var(--clr-datagrid-column-switch-header-font-color, #b3b3b3); +} +.datagrid-footer + .column-switch-wrapper + .column-switch + .switch-header + button:hover { + color: #0072a3; + color: var(--clr-datagrid-column-switch-header-font-hover-color, #0072a3); +} +.datagrid-footer .column-switch-wrapper .column-switch .switch-content { + max-height: 15rem; + overflow-y: auto; + min-height: 1.25rem; +} +.datagrid-footer .column-switch-wrapper .column-switch .switch-content li { + line-height: 1.2rem; + padding-left: 0.1rem; +} +.datagrid-footer .column-switch-wrapper .column-switch .switch-footer .btn { + margin: 0; + padding: 0; +} +.datagrid-footer + .column-switch-wrapper + .column-switch + .switch-footer + .action-right { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; +} +.clr-form-control-disabled + .datagrid-footer-select.clr-checkbox-wrapper + input[type="checkbox"]:checked + + label { + top: 0.2rem; + cursor: default; + margin-right: 0.45rem; +} +.clr-form-control-disabled + .datagrid-footer-select.clr-checkbox-wrapper + input[type="checkbox"]:checked + + label::before { + background-color: #8c8c8c; + background-color: var(--clr-color-neutral-600, #8c8c8c); +} +.clr-form-control-disabled + .datagrid-footer-select.clr-checkbox-wrapper + input[type="checkbox"]:checked + + label::after { + border-left-color: #fff; + border-left-color: var(--clr-color-neutral-0, #fff); + border-bottom-color: #fff; + border-bottom-color: var(--clr-color-neutral-0, #fff); +} +.datagrid-spinner { + position: absolute; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 100%; + top: 0.6rem; + height: calc(100% - 0.6rem); + background-color: rgba(255, 255, 255, 0.6); + background-color: var( + --clr-datagrid-loading-background, + rgba(255, 255, 255, 0.6) + ); + z-index: 590; +} +.datagrid-select .clr-control-label { + min-height: 0.6rem; + margin-top: -0.24rem; + padding-left: 0.7rem; +} +.datagrid-compact .datagrid-header { + min-height: 1.2rem; +} +.datagrid-compact .datagrid-column .datagrid-column-separator::after { + height: calc(100% + 0.5 * 0.6rem - 0.05rem); + top: calc(-0.25 * 0.6rem + 0.05rem); +} +.datagrid-compact .datagrid-cell cds-icon { + margin-top: -0.2rem; + margin-bottom: -0.15rem; + -webkit-transform: translateY(-0.05rem); + transform: translateY(-0.05rem); +} +.datagrid-compact .datagrid-cell .badge { + margin-top: -0.15rem; + margin-bottom: -0.05rem; +} +.datagrid-compact .datagrid-expandable-caret { + text-align: center; +} +.datagrid-compact .datagrid-expandable-caret .spinner { + margin-top: 0.15rem; +} +.datagrid-compact .datagrid-expandable-caret .datagrid-expandable-caret-button { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + background: 0 0; + height: 1.2rem; + width: 1.2rem; + outline-offset: -0.2rem; +} +button.datagrid-compact + .datagrid-expandable-caret + .datagrid-expandable-caret-button { + cursor: pointer; +} +.datagrid-compact .datagrid-expandable-caret .datagrid-expandable-caret-icon { + margin: 0; +} +.datagrid-compact .datagrid-expandable-caret.datagrid-cell { + padding: 0; +} +.datagrid-compact .datagrid-expandable-caret.datagrid-column { + padding-top: 0.3rem; + padding-bottom: 0.25rem; +} +.datagrid-compact + .datagrid-signpost-trigger + .signpost + .signpost-trigger + cds-icon:not([shape="info-circle"], [shape="exclamation-triangle"], [shape="exclamation-circle"], [shape="check-circle"], [shape="info"], [shape="error"]) { + height: 1.05rem; + width: 1.05rem; +} +.datagrid-compact .datagrid-footer { + padding: 0 0.6rem; + line-height: 1.15rem; +} +.datagrid-compact .datagrid-footer .pagination { + line-height: 1.2rem; +} +.datagrid-compact + .datagrid-footer + .column-switch-wrapper + .column-toggle--action { + margin: 0; + outline-offset: -0.2rem; +} +.datagrid-compact + .datagrid-footer + .clr-form-control-disabled + .datagrid-footer-select.clr-checkbox-wrapper + input[type="checkbox"]:checked + + label { + top: 0; +} +.datagrid-footer-description { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + white-space: nowrap; + display: block; + text-align: right; +} +.pagination-list { + list-style: none; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; +} +.pagination-list .pagination-current { + background: 0 0; + background-color: #fff; + background-color: var(--clr-forms-textarea-background-color, #fff); + border-color: #ccc; + border-color: var(--clr-datagrid-pagination-input-border-color, #ccc); + border-width: 0.05rem; + border-width: var(--clr-global-borderwidth, 0.05rem); + border-style: solid; + border-radius: 0.15rem; + border-radius: var(--clr-global-borderradius, 0.15rem); + line-height: 1.2rem; + font-size: 0.55rem; + min-width: 1.2rem; + text-align: center; + -webkit-transition: none !important; + transition: none !important; +} +.pagination-list .pagination-current.clr-focus, +.pagination-list .pagination-current:focus { + background: 0 0; + border: 0.05rem solid; + border-color: #49aeda; + border-color: var( + --clr-datagrid-pagination-input-border-focus-color, + #49aeda + ); + -webkit-box-shadow: 0 0 0.05rem #49aeda; + box-shadow: 0 0 0.05rem #49aeda; + -webkit-box-shadow: 0 0 var(--clr-global-borderwidth, 0.05rem) + var(--clr-datagrid-pagination-input-border-focus-color, #49aeda); + box-shadow: 0 0 var(--clr-global-borderwidth, 0.05rem) + var(--clr-datagrid-pagination-input-border-focus-color, #49aeda); +} +.pagination-list > * { + padding: 0 0.12rem; +} +.pagination-list .pagination-first, +.pagination-list .pagination-last, +.pagination-list .pagination-next, +.pagination-list .pagination-previous { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 0.7rem; + width: 0.7rem; + background-repeat: no-repeat; + background-size: contain; +} +.pagination-list .pagination-first:disabled, +.pagination-list .pagination-last:disabled, +.pagination-list .pagination-next:disabled, +.pagination-list .pagination-previous:disabled { + color: #8c8c8c; + color: var(--clr-datagrid-pagination-btn-disabled-color, #8c8c8c); + opacity: 0.56; + opacity: var(--clr-datagrid-pagination-btn-disabled-opacity, 0.56); +} +.pagination-list .pagination-first, +.pagination-list .pagination-previous { + margin-right: 0.6rem; +} +.pagination-list .pagination-last, +.pagination-list .pagination-next { + margin-left: 0.6rem; +} +.pagination-list button { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + background: 0 0; + color: #666; + color: var(--clr-datagrid-pagination-btn-color, #666); + cursor: pointer; +} +button.pagination-list button { + cursor: pointer; +} +.datagrid-cell-width-zero { + border: 0 !important; + padding: 0 !important; + width: 0; + -webkit-box-flex: 0 !important; + -ms-flex: 0 0 auto !important; + flex: 0 0 auto !important; + min-width: 0 !important; + display: block !important; +} +.datagrid-outer-wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + overflow: auto; +} +.datagrid-inner-wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + overflow: auto; + min-width: 12rem; +} +.datagrid-detail-open .datagrid { + border-top-right-radius: 0; + border-right: none; +} +.datagrid-detail-open .datagrid-inner-wrapper { + width: 34%; +} +.datagrid-detail-open .datagrid-placeholder-container, +.datagrid-detail-open .datagrid-row { + border-right: 0.05rem solid #ccc; +} +.datagrid-detail-open .datagrid-footer { + border-bottom-right-radius: 0; +} +.datagrid-detail-open .pagination { + width: 100%; +} +.datagrid-detail-open .pagination-description-compact { + text-align: left; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} +.datagrid-detail-open .datagrid-footer .pagination-list { + margin-right: 0; +} +.datagrid-row-detail-open { + position: relative; +} +.datagrid-row-detail-open:before { + content: ""; + display: inline-block; + position: absolute; + border: 0.5rem solid transparent; + border-color: transparent; + border-right-color: #ccc; + border-right-color: var(--clr-table-border-color, #ccc); + top: 0.5rem; + right: 0; +} +.datagrid-row-detail-open:after { + content: ""; + display: inline-block; + position: absolute; + border: 0.45rem solid transparent; + border-right-color: #fff; + border-right-color: var(--clr-datagrid-popover-bg-color, #fff); + top: 0.55rem; + right: -0.05rem; +} +.datagrid-detail-pane { + margin-top: 0.6rem; + border-width: 0.05rem; + border-width: var(--clr-global-borderwidth, 0.05rem); + border-style: solid; + border-color: #ccc; + border-color: var(--clr-datagrid-default-border-color, #ccc); + border-left: none; + border-top-right-radius: 0.15rem; + border-top-right-radius: var(--clr-global-borderradius, 0.15rem); + border-bottom-right-radius: 0.15rem; + border-bottom-right-radius: var(--clr-global-borderradius, 0.15rem); + background: #fff; + background: var(--clr-datagrid-popover-bg-color, #fff); + overflow: hidden; + display: block; + -webkit-box-flex: 2; + -ms-flex-positive: 2; + flex-grow: 2; + width: 66%; +} +.datagrid-detail-pane-content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + overflow: auto; + height: 100%; +} +.datagrid-detail-body { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + padding: 0 1.2rem; +} +.datagrid-detail-header { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + font-size: 0.9rem; + line-height: 1.68rem; + padding-left: 1.2rem; + margin-top: 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; +} +.datagrid-detail-header .datagrid-detail-header-title { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + padding-top: 0.8rem; +} +.datagrid-detail-header .datagrid-detail-pane-close { + -webkit-box-flex: 1; + -ms-flex: 1 1 1.8rem; + flex: 1 1 1.8rem; + padding: 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; +} +.datagrid-detail-header .datagrid-detail-pane-close .btn.btn-link { + color: #8c8c8c; + color: var(--clr-modal-close-color, #8c8c8c); + margin-top: 0.8rem; + margin-bottom: 0; + padding-right: 0; +} +.datagrid-detail-caret { + padding: 0; + text-align: center; +} +.datagrid-detail-caret.datagrid-cell { + padding: 0.3rem 0.45rem; +} +.datagrid-detail-caret .datagrid-detail-caret-button { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + margin: 0; + padding: 0; + border: none; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + background: 0 0; + cursor: pointer; + padding: 0.1rem 0.2rem 0.15rem; +} +button.datagrid-detail-caret .datagrid-detail-caret-button { + cursor: pointer; +} +.datagrid-detail-caret .datagrid-detail-caret-button.is-open { + background-color: #0072a3; + background-color: var( + --clr-datagrid-detail-caret-icon-open-bg-color, + #0072a3 + ); + border-radius: 0.15rem; + border-radius: var(--clr-global-borderradius, 0.15rem); +} +.datagrid-detail-caret + .datagrid-detail-caret-button.is-open + .datagrid-detail-caret-icon { + color: #fff; + color: var(--clr-datagrid-detail-caret-icon-open-icon-color, #fff); +} +.datagrid-detail-caret .datagrid-detail-caret-icon { + color: #8c8c8c; + color: var(--clr-datagrid-icon-color, #8c8c8c); + margin-top: 0.1rem; +} +.datagrid-detail-caret .spinner { + margin-top: 0.3rem; +} +.datagrid-detail-caret.datagrid-column { + padding: 0.55rem 0.6rem 0.55rem; +} +.datagrid-detail-overlay.datagrid-detail-open .datagrid-inner-wrapper { + display: none; +} +.datagrid-detail-overlay .datagrid-detail-pane { + border-left: 0.05rem solid #ccc; + border-radius: 0.15rem; +} +@media screen and (max-width: 576px) { + .datagrid-detail-open .datagrid-inner-wrapper { + display: none; + } + .datagrid-detail-pane { + border-left: 0.05rem solid #ccc; + border-radius: 0.15rem; + } +} +.column-switch { + border-radius: 0.15rem; + border-radius: var(--clr-global-borderradius, 0.15rem); + padding: 0.9rem; + background-color: #fff; + background-color: var(--clr-datagrid-popover-bg-color, #fff); + border-width: 0.05rem; + border-width: var(--clr-global-borderwidth, 0.05rem); + border-style: solid; + border-color: #ccc; + border-color: var(--clr-datagrid-popover-border-color, #ccc); + -webkit-box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + -webkit-box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + width: 12.5rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + z-index: 1060; +} +.column-switch .switch-header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + font-weight: 400; + font-size: 0.8rem; + padding-bottom: 0.6rem; + line-height: 1.2rem; +} +.column-switch .switch-header button { + min-width: 0.9rem; + margin: 0; + padding: 0; + color: #b3b3b3; + color: var(--clr-datagrid-column-switch-header-font-color, #b3b3b3); +} +.column-switch .switch-header button:hover { + color: #0072a3; + color: var(--clr-datagrid-column-switch-header-font-hover-color, #0072a3); +} +.column-switch .switch-content { + max-height: 15rem; + overflow-y: auto; + min-height: 1.25rem; +} +.column-switch .switch-content li { + line-height: 1.2rem; + padding-left: 0.1rem; +} +.column-switch .switch-footer .btn { + margin: 0; + padding: 0; +} +.column-switch .switch-footer .action-right { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; +} +.datagrid-filter { + margin-top: 0.24rem; + background: #fff; + background: var(--clr-datagrid-popover-bg-color, #fff); + border-width: 0.05rem; + border-width: var(--clr-global-borderwidth, 0.05rem); + border-style: solid; + border-color: #ccc; + border-color: var(--clr-datagrid-popover-border-color, #ccc); + padding: 0.9rem; + -webkit-box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + -webkit-box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + border-radius: 0.15rem; + border-radius: var(--clr-global-borderradius, 0.15rem); + font-weight: 400; +} +.datagrid-filter .datagrid-filter-close-wrapper { + text-align: right; +} +.datagrid-filter .datagrid-filter-close-wrapper .close { + float: none; +} +.datagrid-filter .datagrid-filter-apply { + margin-bottom: 0; +} +.datagrid-action-overflow { + position: absolute; + background: #fff; + background: var(--clr-datagrid-popover-bg-color, #fff); + padding: 0.3rem; + margin-left: 0.3rem; + border-width: 0.05rem; + border-width: var(--clr-global-borderwidth, 0.05rem); + border-style: solid; + border-color: #ccc; + border-color: var(--clr-datagrid-popover-border-color, #ccc); + -webkit-box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + box-shadow: 0 0.05rem 0.15rem rgba(140, 140, 140, 0.25); + -webkit-box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + box-shadow: 0 0.05rem 0.15rem + var(--clr-datagrid-popovers-box-shadow-color, rgba(140, 140, 140, 0.25)); + border-radius: 0.15rem; + border-radius: var(--clr-global-borderradius, 0.15rem); + font-weight: 400; + white-space: nowrap; +} +.datagrid-action-overflow::before { + content: ""; + position: absolute; + top: 50%; + right: 100%; + width: 0; + height: 0; + margin-top: -0.3rem; + border: 0.3rem solid transparent; + border-left: 0 none; + border-right-color: #ccc; + border-right-color: var(--clr-datagrid-popover-border-color, #ccc); +} +.datagrid-action-overflow::after { + content: ""; + position: absolute; + top: 50%; + right: 100%; + width: 0; + height: 0; + margin-top: -0.25rem; + border-right: 0.25rem solid #fff; + border-top: 0.25rem solid transparent; + border-bottom: 0.25rem solid transparent; +} +.datagrid-action-overflow .action-item { + color: #666; + color: var(--clr-dropdown-text-color, #666); + font-size: 0.7rem; + letter-spacing: normal; + background: 0 0; + border: 0; + cursor: pointer; + display: block; + line-height: 1.15rem; + margin: 0; + padding: 0.05rem 1.2rem 0; + text-align: left; + width: 100%; +} +.datagrid-action-overflow .action-item:focus, +.datagrid-action-overflow .action-item:hover { + text-decoration: none; + background-color: #e8e8e8; + background-color: var(--clr-datagrid-action-popover-hover-color, #e8e8e8); +} +.datagrid-action-overflow .action-item.active { + background-color: #e8e8e8; + background-color: var(--clr-datagrid-row-hover, #e8e8e8); + color: #000; + color: var(--clr-datagrid-row-hover-font-color, #000); +} +.datagrid-action-overflow .action-item:focus { + outline: 0; +} +.datagrid-action-overflow .action-item.disabled, +.datagrid-action-overflow .action-item:disabled { + cursor: not-allowed; + opacity: 0.4; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.datagrid-action-overflow .action-item.disabled:hover, +.datagrid-action-overflow .action-item:disabled:hover { + background: 0 0; +} +.datagrid-action-overflow .action-item.disabled:active, +.datagrid-action-overflow .action-item.disabled:focus, +.datagrid-action-overflow .action-item:disabled:active, +.datagrid-action-overflow .action-item:disabled:focus { + background: 0 0; + -webkit-box-shadow: none; + box-shadow: none; +} +.datagrid-action-overflow .action-item cds-icon { + vertical-align: middle; + -webkit-transform: translate3d(0, -1px, 0); + transform: translate3d(0, -1px, 0); +} +.datagrid-host.datagrid-calculate-mode { + display: block; +} +.datagrid-host.datagrid-calculate-mode .datagrid, +.datagrid-host.datagrid-calculate-mode .datagrid-footer, +.datagrid-host.datagrid-calculate-mode .datagrid-row-clickable, +.datagrid-host.datagrid-calculate-mode .datagrid-row-master { + display: none; +} +.datagrid-host.datagrid-calculate-mode .datagrid-calculation-table { + display: table; + table-layout: auto; +} +.datagrid-host.datagrid-calculate-mode + .datagrid-calculation-table + .datagrid-calculation-header { + display: table-header-group; +} +.datagrid-host.datagrid-calculate-mode + .datagrid-calculation-table + .datagrid-calculation-header + .datagrid-column { + display: table-cell; + min-width: 4.8rem; +} +.datagrid-host.datagrid-calculate-mode + .datagrid-calculation-table + .datagrid-calculation-header + .datagrid-column { + border-color: #e8e8e8; + border-color: var(--clr-tablerow-bordercolor, #e8e8e8); + border-width: 0.05rem; + border-width: var(--clr-table-borderwidth, 0.05rem); + border-style: solid; + padding: 0.55rem 0.6rem 0.55rem; + vertical-align: top; + color: #666; + color: var(--clr-p6-color, #666); + font-weight: 600; + font-weight: var(--clr-font-weight-bold, 600); + font-size: 0.55rem; + letter-spacing: 0.03em; + line-height: 0.6rem; + margin-top: 1.2rem; + margin-bottom: 0; +} +.datagrid-host.datagrid-calculate-mode + .datagrid-calculation-table + .datagrid-row { + display: table-row; +} +.datagrid-host.datagrid-calculate-mode + .datagrid-calculation-table + .datagrid-row + .datagrid-cell { + display: table-cell; + min-width: 4.8rem; + font-size: 0.65rem; + line-height: 0.7rem; + padding: 0.55rem 0.6rem 0.55rem; + vertical-align: top; +} +.datagrid-host.datagrid-calculate-mode .datagrid-column-separator { + display: none; +} +.datagrid-host.datagrid-calculate-mode .datagrid-placeholder-container { + display: none; +} +.datagrid-host.datagrid-calculate-mode .datagrid-fixed-column { + display: none; +} +.fade { + opacity: 0; + -webkit-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; + will-change: opacity; +} +.fade.in { + opacity: 1; +} +.fadeDown { + opacity: 0; + -webkit-transform: translate(0, -25%); + transform: translate(0, -25%); + -webkit-transition: opacity 0.2s ease-in-out, + -webkit-transform 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, + -webkit-transform 0.2s ease-in-out; + will-change: opacity, transform; +} +.fadeDown.in { + opacity: 1; + -webkit-transform: translate(0, 0); + transform: translate(0, 0); +} +.offscreen-focus-rebounder { + position: fixed !important; + border: none !important; + height: 1px !important; + width: 1px !important; + left: 0 !important; + top: -convertBaselineToBase20(1) !important; + overflow: hidden !important; + visibility: hidden !important; + padding: 0 !important; + margin: 0 0 -convertBaselineToBase20(1) 0 !important; + visibility: visible !important; +} +:root { + --clr-nav-box-shadow-color: var(--clr-color-neutral-400); + --clr-nav-active-box-shadow-color: var(--clr-color-action-600); + --clr-nav-active-bg-color: var(--clr-global-selection-color); + --clr-nav-hover-bg-color: var(--clr-sidenav-link-hover-color); + --clr-nav-link-color: var(--clr-color-neutral-600); + --clr-nav-link-active-color: var(--clr-color-neutral-1000); + --clr-nav-link-font-weight: var(--clr-p1-font-weight); + --clr-nav-link-active-font-weight: var(--clr-nav-link-font-weight); +} +@media screen { + section[aria-hidden="true"] { + display: none; + } +} +[data-hidden="true"] { + display: none; +} +button.nav-link { + border-radius: 0; + text-transform: capitalize; + min-width: 0; +} +.tabs-overflow { + position: relative; +} +.tabs-overflow .nav-item { + margin-right: 0; +} +.tab-content { + display: inline; +} +_:-ms-fullscreen .tab-content, +:root .tab-content { + display: inline-block; + width: 100%; +} +.tabs-vertical { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.tabs-vertical > .nav { + height: auto; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + margin-right: 1.2rem; + overflow: auto; + -ms-flex-negative: 0; + flex-shrink: 0; + padding: 0.2rem; + width: 12rem; + min-width: 2.4rem; +} +.tabs-vertical > .nav .nav-link { + text-align: left; + padding: 0 0.6rem; + border: none; + margin-bottom: 0.05rem; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-top: 0; + margin-left: 0; + width: 100%; +} +.tabs-vertical > .nav .nav-link.nav-item { + margin-right: 0; +} +.tabs-vertical > .nav .nav-link.active, +.tabs-vertical > .nav .nav-link:hover { + -webkit-box-shadow: inset 0.15rem 0 0 #0072a3; + box-shadow: inset 0.15rem 0 0 #0072a3; + -webkit-box-shadow: inset 0.15rem 0 0 var(--clr-nav-active-box-shadow-color); + box-shadow: inset 0.15rem 0 0 var(--clr-nav-active-box-shadow-color); +} +.tabs-vertical > .nav .nav-link.active { + background-color: #d8e3e9; + background-color: var(--clr-nav-active-bg-color, #d8e3e9); +} +.tabs-vertical > .nav .nav-link:not(.active):hover { + background-color: #e8e8e8; + background-color: var(--clr-nav-hover-bg-color, #e8e8e8); +} +:root { + --clr-wizard-main-bgcolor: var(--clr-color-neutral-0); + --clr-wizard-sidenav-bgcolor: var(--clr-color-neutral-50); + --clr-wizard-main-textColor: var(--clr-color-on-neutral-0); + --clr-wizard-sidenav-text: var(--clr-color-neutral-900); + --clr-wizard-sidenav-text--active: var(--clr-global-on-selection-color); + --clr-wizard-title-text: var(--clr-color-neutral-1000); + --clr-wizard-stepnav-border-size: 0.2rem; + --clr-wizard-stepnav-border-color: var(--clr-color-neutral-200); + --clr-wizard-stepnav-border-color--active: var(--clr-color-success-400); + --clr-wizard-stepnav-active-bgcolor: var(--clr-global-selection-color); + --clr-wizard-header-action-color: var(--clr-color-neutral-600); + --clr-wizard-header-action-color--hovered: var(--clr-color-neutral-1000); + --clr-wizard-border-radius: var(--clr-global-borderradius); + --clr-wizard-stepnav-active-border-radius: var(--clr-wizard-border-radius); + --clr-wizard-step-nav-border-color: hsl(0, 0%, 89%); + --clr-wizard-box-shadow-color: rgba(0, 0, 0, 0.2); +} +.clr-wizard .modal-dialog { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-shadow: 0 0.05rem 0.1rem 0.1rem rgba(0, 0, 0, 0.2); + box-shadow: 0 0.05rem 0.1rem 0.1rem rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 0.05rem 0.1rem 0.1rem + var(--clr-wizard-box-shadow-color); + box-shadow: 0 0.05rem 0.1rem 0.1rem var(--clr-wizard-box-shadow-color); + height: 50%; + max-height: 100%; +} +.clr-wizard .modal-content { + border-radius: 0; + border-top-right-radius: 0.15rem; + border-top-right-radius: var(--clr-wizard-border-radius, 0.15rem); + border-bottom-right-radius: 0.15rem; + border-bottom-right-radius: var(--clr-wizard-border-radius, 0.15rem); + -webkit-box-shadow: none; + box-shadow: none; + padding: 0; + -webkit-box-flex: 2; + -ms-flex: 2 2 auto; + flex: 2 2 auto; + width: 66%; + height: initial; + overflow: hidden; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +.clr-wizard .modal-header, +.clr-wizard .modal-header--accessible { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: 100%; + padding: 1.2rem 0.95rem 0.3rem 1.2rem; +} +.clr-wizard .modal-title { + color: #000; + color: var(--clr-wizard-title-text, #000); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + width: 100%; + line-height: 1.356rem; + margin-top: -0.156rem; +} +.clr-wizard .modal-body { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + color: #000; + color: var(--clr-wizard-main-textColor, #000); + width: 100%; +} +.clr-wizard .modal-footer { + padding: 0; + display: block; + padding-top: 1.2rem; + height: 4.2rem; + min-height: 4.2rem; + max-height: 4.2rem; + width: 100%; + -webkit-box-flex: 0; + -ms-flex: 0 0 4.2rem; + flex: 0 0 4.2rem; +} +.clr-wizard .clr-wizard-btn { + margin: 0; + max-width: 100%; + display: block; +} +.clr-wizard .modal-title-text { + display: inline-block; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + width: 100%; + outline: 0; +} +.clr-wizard .modal-title-wrapper { + width: 100%; +} +.clr-wizard .modal-header-actions-wrapper { + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + padding-left: 0.6rem; + padding-right: 0.2rem; +} +.clr-wizard .clr-wizard-header-action { + height: 1.2rem; + width: 1.2rem; + padding: 0; + margin: 0; + min-width: 1.2rem; + line-height: 1.2rem; + font-size: 1.3rem; + color: #8c8c8c; + color: var(--clr-wizard-header-action-color, #8c8c8c); + -webkit-transition: color linear 0.2s; + transition: color linear 0.2s; +} +.clr-wizard .clr-wizard-header-action a { + color: #8c8c8c; + color: var(--clr-wizard-header-action-color, #8c8c8c); +} +.clr-wizard .clr-wizard-header-action:active, +.clr-wizard .clr-wizard-header-action:focus, +.clr-wizard .clr-wizard-header-action:hover { + color: #000; + color: var(--clr-wizard-header-action-color--hovered, #000); +} +.clr-wizard .clr-wizard-header-action cds-icon { + height: 1.1rem; + width: 1.1rem; +} +.clr-wizard .clr-wizard-stepnav-wrapper { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + width: 34%; + max-width: 34%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; + overflow: hidden; + overflow-y: auto; + padding-bottom: 1.2rem; + line-height: 1.2rem; + border-right-width: 0.05rem; + border-right-width: var(--clr-global-borderwidth, 0.05rem); + border-right-style: solid; + border-right-color: #e3e3e3; + border-right-color: var(--clr-wizard-step-nav-border-color, #e3e3e3); + height: 100%; + background-color: #fafafa; + background-color: var(--clr-wizard-sidenav-bgcolor, #fafafa); + border-radius: 0; + border-top-left-radius: 0.15rem; + border-top-left-radius: var(--clr-wizard-border-radius, 0.15rem); + border-bottom-left-radius: 0.15rem; + border-bottom-left-radius: var(--clr-wizard-border-radius, 0.15rem); +} +.clr-wizard .clr-wizard-stepnav { + padding-left: 1.2rem; + display: block; + font-size: 0.7rem; + color: #333; + color: var(--clr-wizard-sidenav-text, #333); + width: 100%; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; +} +.clr-wizard .clr-wizard-stepnav-list { + display: block; + -webkit-box-shadow: none; + box-shadow: none; + counter-reset: a; + white-space: nowrap; + height: auto; + list-style-type: none; + margin: 0; + width: 100%; +} +.clr-wizard .clr-wizard-stepnav-item { + display: block; + -webkit-box-shadow: 0.2rem 0 0 #e8e8e8 inset; + box-shadow: 0.2rem 0 0 #e8e8e8 inset; + -webkit-box-shadow: var(--clr-wizard-stepnav-border-size) 0 0 + var(--clr-wizard-stepnav-border-color) inset; + box-shadow: var(--clr-wizard-stepnav-border-size) 0 0 + var(--clr-wizard-stepnav-border-color) inset; + margin: 0 0 -0.05rem 0; + padding: 0.3rem 0; + padding-left: 0.4rem; + color: #333; + color: var(--clr-wizard-sidenav-text, #333); + font-weight: 400; + font-weight: var(--clr-font-weight-regular, 400); +} +.clr-wizard .clr-wizard-stepnav-item.active { + color: #000; + color: var(--clr-wizard-sidenav-text--active, #000); + font-weight: 500; + font-weight: var(--clr-font-weight-semibold, 500); +} +.clr-wizard .clr-wizard-stepnav-item.active .clr-wizard-stepnav-link { + background-color: #d8e3e9; + background-color: var(--clr-wizard-stepnav-active-bgcolor, #d8e3e9); + border-radius: 0; + border-top-left-radius: 0.15rem; + border-top-left-radius: var(--clr-wizard-border-radius, 0.15rem); + border-bottom-left-radius: 0.15rem; + border-bottom-left-radius: var(--clr-wizard-border-radius, 0.15rem); +} +.clr-wizard .clr-wizard-stepnav-item.complete { + -webkit-box-shadow: 0.2rem 0 0 #5eb715 inset; + box-shadow: 0.2rem 0 0 #5eb715 inset; + -webkit-box-shadow: var(--clr-wizard-stepnav-border-size) 0 0 + var(--clr-wizard-stepnav-border-color--active) inset; + box-shadow: var(--clr-wizard-stepnav-border-size) 0 0 + var(--clr-wizard-stepnav-border-color--active) inset; + -webkit-transition: -webkit-box-shadow 0.2s ease-in; + transition: -webkit-box-shadow 0.2s ease-in; + transition: box-shadow 0.2s ease-in; + transition: box-shadow 0.2s ease-in, -webkit-box-shadow 0.2s ease-in; +} +.clr-wizard .clr-wizard-stepnav-item.error { + -webkit-box-shadow: 0.2rem 0 0 #c21d00 inset; + box-shadow: 0.2rem 0 0 #c21d00 inset; + -webkit-transition: -webkit-box-shadow 0.2s ease-in; + transition: -webkit-box-shadow 0.2s ease-in; + transition: box-shadow 0.2s ease-in; + transition: box-shadow 0.2s ease-in, -webkit-box-shadow 0.2s ease-in; +} +.clr-wizard .clr-wizard-stepnav-item.no-click button { + pointer-events: none; +} +.clr-wizard .clr-wizard-stepnav-link { + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + color: inherit; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0 0.15rem 0 0.5rem; + font-size: 0.7rem; + font-weight: inherit; + letter-spacing: normal; + text-align: left; + text-transform: none; + margin: 0; +} +.clr-wizard .clr-wizard-stepnav-link .clr-wizard-stepnav-link-suffix { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + min-width: 1.2rem; + padding-right: 0.35rem; +} +.clr-wizard + .clr-wizard-stepnav-link + .clr-wizard-stepnav-link-suffix + .clr-wizard-stepnav-item-error-icon { + -webkit-transform: none; + transform: none; + fill: #c21d00; +} +.clr-wizard .clr-wizard-title { + color: #000; + color: var(--clr-wizard-title-text, #000); + margin-top: 0; + padding-top: 1.2rem; + padding-left: 1.2rem; + padding-right: 0.6rem; + padding-bottom: 1.2rem; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + font-size: 1.1rem; + line-height: 1.2rem; +} +.clr-wizard .modal-content-wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-flex: 1; + -ms-flex: 1 1 100%; + flex: 1 1 100%; + height: 100%; + width: 100%; + max-height: 100%; +} +.clr-wizard .modal-content-wrapper .modal-nav { + height: auto; +} +.clr-wizard .clr-wizard-footer-buttons { + text-align: right; + padding-right: 1.2rem; + margin: 0; +} +.clr-wizard .clr-wizard-footer-buttons-wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; +} +.clr-wizard .clr-wizard-btn-wrapper { + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + min-width: 4.2rem; + padding-left: 0.6rem; +} +.clr-wizard .clr-wizard-btn-wrapper[aria-hidden="true"] { + display: none; +} +.clr-wizard .clr-wizard-btn.btn-link { + padding: 0; +} +.clr-wizard .clr-wizard-content { + display: block; +} +.clr-wizard .clr-wizard-page:not([aria-hidden="true"]) { + padding: 1.2rem; + padding-top: 0.9rem; + display: block; +} +.clr-wizard .modal-dialog { + height: 75vh; +} +.clr-wizard .modal-body { + max-height: 100%; +} +.clr-wizard.wizard-md .modal-dialog { + min-height: 21rem; + max-height: 25.2rem; +} +.clr-wizard.wizard-md .clr-wizard-stepnav-wrapper, +.clr-wizard.wizard-md .modal-content { + max-height: 25.2rem; +} +.clr-wizard.wizard-md .clr-wizard-stepnav-wrapper { + min-width: 10.8rem; + max-width: 12rem; +} +.clr-wizard.wizard-lg .modal-dialog { + min-height: 21rem; + max-height: 36rem; +} +.clr-wizard.wizard-lg .clr-wizard-stepnav-wrapper, +.clr-wizard.wizard-lg .modal-content { + max-height: 36rem; +} +.clr-wizard.wizard-lg .clr-wizard-stepnav-wrapper, +.clr-wizard.wizard-lg .nav-panel { + min-width: 12rem; + max-width: 14.4rem; +} +.clr-wizard.wizard-xl .modal-dialog { + height: 75vh; + max-height: none; +} +.clr-wizard.wizard-xl .clr-wizard-stepnav-wrapper, +.clr-wizard.wizard-xl .nav-panel { + min-width: 12rem; + max-width: 15.6rem; +} +.clr-wizard .spinner:not(.spinner-inline):not(.clr-treenode-spinner) { + left: calc(50% + 5.75rem); + position: absolute; + top: 40%; +} +.clr-wizard-page > :first-child { + margin-top: 0; +} +.clr-wizard-page > :first-child > :first-child { + margin-top: 0; +} +.clr-wizard-page > form:first-child { + padding-top: 0; +} +.clr-wizard-page > form:first-child > .form-block:first-child { + margin-top: 0; +} +.clr-wizard--inline { + display: block; + width: 100%; +} +.clr-wizard--inline > clr-modal > .modal:focus { + outline-style: none; + outline-color: transparent; +} +.clr-wizard--inline clr-modal { + height: 100%; + width: 100%; + display: block; +} +.clr-wizard--inline .modal { + padding: 0; + position: static; + height: 100%; + max-height: 100%; +} +.clr-wizard--inline .modal .content-container { + height: 100%; +} +.clr-wizard--inline .modal .content-container .nav-panel { + height: 99%; + width: 99%; +} +.clr-wizard--inline .modal .modal-content { + -webkit-box-shadow: none; + box-shadow: none; +} +.clr-wizard--inline .modal .modal-dialog { + min-height: 100%; + height: 100%; + width: 100%; + z-index: auto; +} +.clr-wizard--inline .modal-body { + height: 100%; +} +.clr-wizard--inline .modal-header .close, +.clr-wizard--inline .modal-header--accessible .close { + display: none; +} +.clr-wizard--inline .nav.navList { + padding-top: 0; +} +.clr-wizard--inline .modal-dialog .modal-content .modal-body .content-area { + overflow-y: auto; +} +.clr-wizard--inline .modal-backdrop { + height: 0; + width: 0; + display: none; +} +.clr-wizard--inline .modal-content-wrapper { + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + height: 100%; +} +.clr-wizard--inline .clr-wizard-stepnav-wrapper, +.clr-wizard--inline.clr-wizard .modal-content { + min-height: 100%; + height: auto; + max-height: 100%; +} +.clr-wizard--inline .clr-wizard-stepnav-wrapper .clr-wizard-stepnav, +.clr-wizard--inline.clr-wizard .modal-content .clr-wizard-stepnav { + height: 100%; +} +.clr-wizard--no-shadow .modal-content-wrapper, +.clr-wizard--no-shadow .modal-dialog { + -webkit-box-shadow: none; + box-shadow: none; +} +.clr-wizard--no-title .clr-wizard-title { + display: none; +} +.clr-wizard--no-title .clr-wizard-stepnav { + padding-top: 1.2rem; +} +@media screen { + .clr-wizard-page[aria-hidden="true"] { + display: none; + } +} +@supports (-ms-ime-align: auto) { + .clr-wizard .clr-wizard-header-action { + margin-top: -0.15rem; + } +} +:root { + --clr-signpost-content-bg-color: var(--clr-color-neutral-0); + --clr-signpost-content-border-color: var(--clr-color-neutral-500); + --clr-signpost-action-color: var(--clr-color-neutral-600); + --clr-signpost-action-hover-color: var(--clr-color-action-700); + --clr-signpost-border-radius: var(--clr-global-borderradius); +} +.signpost { + display: inline-block; +} +.signpost:hover { + cursor: pointer; +} +.signpost .signpost-action { + min-width: 1.2rem; + margin: 0; + padding: 0; + color: #8c8c8c; + color: var(--clr-signpost-action-color, #8c8c8c); +} +.signpost .signpost-action cds-icon { + height: 1.2rem; + width: 1.2rem; +} +.signpost .signpost-action.active, +.signpost .signpost-action:hover { + color: #00648f; + color: var(--clr-signpost-action-hover-color, #00648f); +} +.signpost .signpost-content-header button cds-icon { + height: 0.8rem; + width: 0.8rem; +} +.signpost-trigger { + margin: 0; + padding: 0; + display: inline-block; +} +.signpost-content { + background-color: transparent; + min-width: 10.8rem; + max-width: 18rem; + min-height: 2.4rem; + max-height: 25.2rem; + display: inline-block; + position: relative; + z-index: 1070; +} +.signpost-content:hover { + cursor: default; +} +.signpost-content .popover-pointer { + height: 0; + width: 0; + position: absolute; +} +.signpost-content .popover-pointer:before { + content: ""; + height: 0; + width: 0; + position: absolute; +} +.signpost-content.top-left .popover-pointer, +.signpost-content.top-middle .popover-pointer, +.signpost-content.top-right .popover-pointer { + border-top: 0.6rem solid #b3b3b3; + bottom: -0.6rem; +} +.signpost-content.top-left .popover-pointer:before, +.signpost-content.top-middle .popover-pointer:before, +.signpost-content.top-right .popover-pointer:before { + border-top: 0.6rem solid #fff; + bottom: 0.1rem; +} +.signpost-content.top-left .signpost-wrap { + border-bottom-right-radius: 0; +} +.signpost-content.top-left .popover-pointer { + border-left: 0.6rem solid transparent; + right: -0.05rem; +} +.signpost-content.top-left .popover-pointer:before { + border-left: 0.6rem solid transparent; + right: 0.05rem; +} +.signpost-content.top-middle .popover-pointer { + border-right: 0.6rem solid transparent; + left: 50%; +} +.signpost-content.top-middle .popover-pointer:before { + border-right: 0.6rem solid transparent; + left: 0.05rem; +} +.signpost-content.top-right .signpost-wrap { + border-bottom-left-radius: 0; +} +.signpost-content.top-right .popover-pointer { + border-right: 0.6rem solid transparent; + left: -0.05rem; +} +.signpost-content.top-right .popover-pointer:before { + border-right: 0.6rem solid transparent; + left: 0.05rem; +} +.signpost-content.bottom-left .popover-pointer, +.signpost-content.bottom-middle .popover-pointer, +.signpost-content.bottom-right .popover-pointer { + border-bottom: 0.6rem solid #b3b3b3; + top: -0.55rem; +} +.signpost-content.bottom-left .popover-pointer:before, +.signpost-content.bottom-middle .popover-pointer:before, +.signpost-content.bottom-right .popover-pointer:before { + border-bottom: 0.6rem solid #fff; + top: 0.1rem; +} +.signpost-content.bottom-left .signpost-wrap { + border-top-right-radius: 0; +} +.signpost-content.bottom-left .popover-pointer { + border-left: 0.6rem solid transparent; + right: -0.05rem; +} +.signpost-content.bottom-left .popover-pointer:before { + border-left: 0.6rem solid transparent; + right: 0.05rem; +} +.signpost-content.bottom-middle .popover-pointer { + border-right: 0.6rem solid transparent; + right: 50%; +} +.signpost-content.bottom-middle .popover-pointer:before { + border-right: 0.6rem solid transparent; + right: -0.65rem; +} +.signpost-content.bottom-right .signpost-wrap { + border-top-left-radius: 0; +} +.signpost-content.bottom-right .popover-pointer { + border-right: 0.6rem solid transparent; + left: -0.05rem; +} +.signpost-content.bottom-right .popover-pointer:before { + border-right: 0.6rem solid transparent; + left: 0.05rem; +} +.signpost-content.left-bottom .popover-pointer, +.signpost-content.left-middle .popover-pointer, +.signpost-content.left-top .popover-pointer { + border-left: 0.6rem solid #b3b3b3; + right: -0.6rem; +} +.signpost-content.left-bottom .popover-pointer:before, +.signpost-content.left-middle .popover-pointer:before, +.signpost-content.left-top .popover-pointer:before { + border-left: 0.6rem solid #fff; +} +.signpost-content.left-top .signpost-wrap { + border-bottom-right-radius: 0; +} +.signpost-content.left-top .popover-pointer { + border-top: 0.6rem solid transparent; + bottom: -0.05rem; +} +.signpost-content.left-top .popover-pointer:before { + border-top: 0.6rem solid transparent; + top: -0.65rem; + right: 0.1rem; +} +.signpost-content.left-middle .popover-pointer { + border-bottom: 0.6rem solid transparent; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); +} +.signpost-content.left-middle .popover-pointer:before { + border-bottom: 0.6rem solid transparent; + top: 0.05rem; + left: -0.7rem; +} +.signpost-content.left-bottom .signpost-wrap { + border-top-right-radius: 0; +} +.signpost-content.left-bottom .popover-pointer { + border-bottom: 0.6rem solid transparent; + top: -0.05rem; +} +.signpost-content.left-bottom .popover-pointer:before { + border-bottom: 0.6rem solid transparent; + top: 0.05rem; + left: -0.7rem; +} +.signpost-content.right-bottom .popover-pointer, +.signpost-content.right-middle .popover-pointer, +.signpost-content.right-top .popover-pointer { + border-right: 0.6rem solid #b3b3b3; + left: -0.6rem; +} +.signpost-content.right-bottom .popover-pointer:before, +.signpost-content.right-middle .popover-pointer:before, +.signpost-content.right-top .popover-pointer:before { + border-right: 0.6rem solid #fff; + left: 0.1rem; +} +.signpost-content.right-top .signpost-wrap { + border-bottom-left-radius: 0; +} +.signpost-content.right-top .popover-pointer { + border-top: 0.6rem solid transparent; + bottom: -0.05rem; +} +.signpost-content.right-top .popover-pointer:before { + border-top: 0.6rem solid transparent; + top: -0.65rem; +} +.signpost-content.right-middle .popover-pointer { + border-bottom: 0.6rem solid transparent; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); +} +.signpost-content.right-middle .popover-pointer:before { + border-bottom: 0.6rem solid transparent; + top: 0.05rem; +} +.signpost-content.right-bottom .signpost-wrap { + border-top-left-radius: 0; +} +.signpost-content.right-bottom .popover-pointer { + border-bottom: 0.6rem solid transparent; + top: -0.05rem; +} +.signpost-content.right-bottom .popover-pointer:before { + border-bottom: 0.6rem solid transparent; + top: 0.05rem; +} +.signpost-content-header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + position: absolute; + width: 100%; + background-color: inherit; + top: 0; +} +.signpost-wrap { + border-radius: 0.15rem; + border-radius: var(--clr-signpost-border-radius, 0.15rem); + border-width: 0.05rem; + border-width: var(--clr-global-borderwidth, 0.05rem); + border-style: solid; + border-color: #b3b3b3; + border-color: var(--clr-signpost-content-border-color, #b3b3b3); + background-color: #fff; + background-color: var(--clr-signpost-content-bg-color, #fff); + z-index: 1070; + position: relative; +} +.signpost-content-body { + padding: 1.2rem; + max-height: 24rem; + overflow-y: auto; +} +.drag-handle { + cursor: -webkit-grab; + cursor: grab; +} +.in-drag { + cursor: -webkit-grabbing; + cursor: grabbing; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.in-drag * { + pointer-events: none; +} +.in-drag .draggable.being-dragged { + opacity: 0.6; +} +.draggable-ghost { + position: fixed; + display: block; + visibility: hidden; + z-index: 2147483647; + pointer-events: none; + will-change: left, top; +} +.draggable-ghost > .draggable { + margin: 0; + opacity: 1; +} +.draggable-ghost.dropped { + opacity: 0; +} +.droppable.draggable-match { + border: 0.05rem dashed #c090d5; +} +.droppable.draggable-over { + border: 0.05rem dashed #680094; +} +:root { + --clr-accordion-text-color: var(--clr-global-font-color); + --clr-accordion-active-background-color: var(--clr-global-selection-color); + --clr-accordion-content-background-color: var(--clr-color-neutral-0); + --clr-accordion-header-background-color: var(--clr-color-neutral-50); + --clr-accordion-header-hover-background-color: var(--clr-color-neutral-200); + --clr-accordion-header-font-size: 0.8rem; + --clr-accordion-header-button-font-size: 0.6rem; + --clr-accordion-title-font-weight: 500; + --clr-accordion-title-font-size: 0.65rem; + --clr-accordion-error-color: var(--clr-global-error-color); + --clr-accordion-complete-color: var(--clr-global-success-color); + --clr-accordion-border-color: var(--clr-color-neutral-400); + --clr-accordion-border-radius: var(--clr-global-borderradius); + --clr-accordion-border-left-color: #e8e8e8; + --clr-accordion-border-left-width: 0.3rem; + --clr-accordion-border-left-color-complete: var( + --clr-accordion-complete-color + ); + --clr-accordion-border-left-color-error: var(--clr-accordion-error-color); + --clr-accordion-header-left-indicator: inset + var(--clr-accordion-border-left-width) 0 0 + var(--clr-accordion-border-left-color); + --clr-accordion-header-left-complete-indicator: inset + var(--clr-accordion-border-left-width) 0 0 + var(--clr-accordion-border-left-color-complete); + --clr-accordion-header-left-error-indicator: inset + var(--clr-accordion-border-left-width) 0 0 + var(--clr-accordion-border-left-color-error); +} +.clr-accordion { + display: block; + counter-reset: accordion; + margin-bottom: 1.2rem; +} +.clr-accordion-panel { + display: block; +} +.clr-accordion-header { + color: #666; + color: var(--clr-accordion-text-color, #666); + border: 0.05rem solid; + border-color: #ccc; + border-color: var(--clr-accordion-border-color, #ccc); + -webkit-box-shadow: inset 0.3rem 0 0 #e8e8e8; + box-shadow: inset 0.3rem 0 0 #e8e8e8; + -webkit-box-shadow: var( + --clr-accordion-header-left-indicator, + inset 0.3rem 0 0 #e8e8e8 + ); + box-shadow: var( + --clr-accordion-header-left-indicator, + inset 0.3rem 0 0 #e8e8e8 + ); + background: #fafafa; + background: var(--clr-accordion-header-background-color, #fafafa); + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + border-bottom: 0; + width: 100%; + font-size: 0.8rem; + font-size: var(--clr-accordion-header-font-size, 0.8rem); + text-align: left; +} +.clr-accordion-header:hover { + background-color: #fafafa; + background-color: var(--clr-accordion-header-background-color, #fafafa); +} +.clr-accordion-panel:last-child .clr-accordion-content, +.clr-accordion-panel:last-child .clr-accordion-header { + border-bottom-style: solid; + border-bottom-width: 0.05rem; + border-bottom-width: var(--clr-global-borderwidth, 0.05rem); + border-bottom-color: #ccc; + border-bottom-color: var(--clr-accordion-border-color, #ccc); +} +.clr-accordion-number { + padding: 0 0.9rem; + display: none; +} +.clr-accordion-number::before { + content: counter(accordion) "."; + counter-increment: accordion; +} +.clr-accordion-header-button { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-box-flex: 1; + -ms-flex: 1 1 0%; + flex: 1 1 0%; + width: 100%; + border: 0; + padding: 0.9rem; + background: 0 0; + text-align: left; + cursor: pointer; + color: #666; + color: var(--clr-accordion-text-color, #666); +} +@media (min-width: 576px) { + .clr-accordion-header-button { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row; + flex-flow: row; + } +} +.clr-accordion-status { + width: 1.8rem; + display: inline-block; + vertical-align: top; +} +.clr-accordion-title { + display: inline-block; +} +@media (min-width: 576px) { + clr-step-title.clr-accordion-title { + min-width: 8.64rem; + } +} +.clr-accordion-header-has-description .clr-accordion-title { + max-width: 13.2rem; +} +.clr-accordion-description { + display: inline-block; + max-width: 32.5rem; +} +@media (min-width: 576px) { + .clr-accordion-description { + margin-left: 1.8rem; + } +} +.clr-accordion-content { + background: #fff; + background: var(--clr-accordion-content-background-color, #fff); + border-width: 0.05rem; + border-width: var(--clr-global-borderwidth, 0.05rem); + border-style: solid; + border-color: #ccc; + border-color: var(--clr-accordion-border-color, #ccc); + border-bottom: 0; + overflow: hidden; + padding: 0.9rem; + display: none; +} +.clr-accordion-content .clr-form { + padding: 0; +} +.clr-accordion-content.ng-trigger { + padding: 0; +} +@media (min-width: 576px) { + .clr-accordion-content { + padding: 0.9rem 2.7rem; + } +} +.clr-accordion-inner-content { + padding: 0.9rem; +} +@media (min-width: 576px) { + .clr-accordion-inner-content { + padding: 0.9rem 2.7rem; + } +} +.clr-accordion-angle { + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} +.clr-accordion-complete-icon, +.clr-accordion-error-icon { + height: 1.2rem; + width: 1.2rem; + display: none; + padding: 0; + margin: 0 0.6rem; +} +.clr-accordion-panel-open .clr-accordion-content { + display: block; +} +.clr-accordion-panel-open .clr-accordion-angle { + visibility: visible; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); +} +.clr-accordion-panel-open .clr-accordion-header { + background: #d8e3e9; + background: var(--clr-accordion-active-background-color, #d8e3e9); +} +.clr-accordion-panel-complete .clr-accordion-complete-icon { + display: inline-block; + color: #5aa220; + color: var(--clr-accordion-complete-color, #5aa220); +} +.clr-accordion-panel-complete .clr-accordion-angle { + visibility: visible; +} +.clr-accordion-panel-complete .clr-accordion-header { + -webkit-box-shadow: inset 0.3rem 0 0 #5aa220; + box-shadow: inset 0.3rem 0 0 #5aa220; + -webkit-box-shadow: var( + --clr-accordion-header-left-complete-indicator, + inset 0.3rem 0 0 #5aa220 + ); + box-shadow: var( + --clr-accordion-header-left-complete-indicator, + inset 0.3rem 0 0 #5aa220 + ); +} +.clr-accordion-panel-complete .ng-trigger.clr-accordion-content { + display: block; +} +.clr-accordion-panel-error .clr-accordion-header { + border-bottom: 0.05rem solid; + border-color: #c21d00; + border-color: var(--clr-accordion-border-left-color-error, #c21d00); + -webkit-box-shadow: inset 0.3rem 0 0 #c21d00; + box-shadow: inset 0.3rem 0 0 #c21d00; + -webkit-box-shadow: var( + --clr-accordion-header-left-error-indicator, + inset 0.3rem 0 0 #c21d00 + ); + box-shadow: var( + --clr-accordion-header-left-error-indicator, + inset 0.3rem 0 0 #c21d00 + ); + background-color: #d8e3e9; + background-color: var(--clr-accordion-active-background-color, #d8e3e9); +} +.clr-accordion-panel-error .clr-accordion-error-icon { + display: inline-block; + color: #c21d00; + color: var(--clr-accordion-error-color, #c21d00); +} +.clr-accordion-panel-complete .clr-accordion-number, +.clr-accordion-panel-error .clr-accordion-number { + position: absolute; + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + padding: 0; + border: 0; + height: 1px; + width: 1px; + overflow: hidden; + white-space: nowrap; + top: 0; + left: 0; +} +.clr-accordion:not(.clr-stepper-forms) .clr-accordion-header { + -webkit-box-shadow: none; + box-shadow: none; +} +.clr-accordion:not(.clr-stepper-forms) + .clr-accordion-panel:first-child + .clr-accordion-header { + border-top-left-radius: 0.15rem; + border-top-left-radius: var(--clr-accordion-border-radius, 0.15rem); + border-top-right-radius: 0.15rem; + border-top-right-radius: var(--clr-accordion-border-radius, 0.15rem); +} +.clr-accordion:not(.clr-stepper-forms) + .clr-accordion-panel:last-child + .clr-accordion-content, +.clr-accordion:not(.clr-stepper-forms) + .clr-accordion-panel:last-child + .clr-accordion-header { + border-bottom-left-radius: 0.15rem; + border-bottom-left-radius: var(--clr-accordion-border-radius, 0.15rem); + border-bottom-right-radius: 0.15rem; + border-bottom-right-radius: var(--clr-accordion-border-radius, 0.15rem); +} +.clr-accordion:not(.clr-stepper-forms) .clr-accordion-title { + font-weight: 500; + font-weight: var(--clr-accordion-title-font-weight, 500); + font-size: 0.65rem; + font-size: var(--clr-accordion-title-font-size, 0.65rem); +} +.clr-accordion:not(.clr-stepper-forms) .clr-accordion-header-button { + font-size: 0.6rem; + font-size: var(--clr-accordion-header-button-font-size, 0.6rem); + padding: 0.3rem 0.6rem; +} +.clr-accordion:not(.clr-stepper-forms) .clr-accordion-content { + padding: 0; +} +.clr-accordion:not(.clr-stepper-forms) .clr-accordion-inner-content { + padding: 0.3rem 1.75rem; +} +.clr-accordion:not(.clr-stepper-forms) .clr-accordion-status { + width: 0.96rem; +} +.clr-accordion:not(.clr-stepper-forms) .clr-accordion-status cds-icon { + height: 0.7rem; + width: 0.7rem; +} +.clr-accordion-panel-open .clr-accordion-header { + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; + border-bottom: 0 !important; +} +.clr-stepper-forms .clr-accordion-panel-inactive .clr-accordion-angle { + visibility: hidden; +} +.clr-stepper-forms .clr-accordion-panel-open .clr-accordion-angle { + visibility: visible; +} +.clr-stepper-forms .clr-accordion-status { + min-width: 3.6rem; +} +.clr-stepper-forms .clr-accordion-number { + display: inline-block; +} +.clr-step-button { + display: block; + margin-top: 1.2rem; +} +:root { + --clr-timeline-line-color: var(--clr-color-neutral-500); + --clr-timeline-step-header-color: var(--clr-color-neutral-600); + --clr-timeline-step-title-color: var(--clr-color-neutral-700); + --clr-timeline-step-description-color: var(--clr-color-neutral-700); + --clr-timeline-incomplete-step-color: var(--clr-color-neutral-600); + --clr-timeline-current-step-color: var(--clr-color-action-600); + --clr-timeline-success-step-color: var(--clr-color-success-400); + --clr-timeline-error-step-color: var(--clr-color-danger-800); + --clr-timeline-step-title-font-weight: var(--clr-p2-font-weight); +} +.clr-timeline { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding: 0.6rem; +} +.clr-timeline-step { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + width: 100%; + min-width: 8.75rem; + margin-left: 0.6rem; +} +.clr-timeline-step cds-icon { + height: 1.8rem; + width: 1.8rem; + min-height: 1.8rem; + min-width: 1.8rem; +} +.clr-timeline-step cds-icon[shape="circle"] { + color: #8c8c8c; + color: var(--clr-timeline-incomplete-step-color, #8c8c8c); +} +.clr-timeline-step cds-icon[shape="dot-circle"] { + color: #0072a3; + color: var(--clr-timeline-current-step-color, #0072a3); +} +.clr-timeline-step cds-icon[shape="success-standard"] { + color: #5eb715; + color: var(--clr-timeline-success-step-color, #5eb715); +} +.clr-timeline-step cds-icon[shape="error-standard"] { + color: #c21d00; + color: var(--clr-timeline-error-step-color, #c21d00); +} +.clr-timeline-step:not(:last-of-type) .clr-timeline-step-body::before { + content: ""; + background: #b3b3b3; + background: var(--clr-timeline-line-color, #b3b3b3); + height: 0.1rem; + width: calc(100% - 0.9rem - 0.1rem); + -webkit-transform: translate(1.7rem, -0.95rem); + transform: translate(1.7rem, -0.95rem); +} +.clr-timeline-step-header { + color: #8c8c8c; + color: var(--clr-timeline-step-header-color, #8c8c8c); + font-size: 0.65rem; + line-height: 0.9rem; + white-space: nowrap; + margin-bottom: 0.4rem; +} +.clr-timeline-step-body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +.clr-timeline-step-title { + color: #666; + color: var(--clr-timeline-step-title-color, #666); + font-size: 0.65rem; + font-weight: 500; + font-weight: var(--clr-timeline-step-title-font-weight, 500); + line-height: 0.9rem; + margin-top: 0.4rem; + margin-bottom: 0.3rem; +} +.clr-timeline-step-description { + color: #666; + color: var(--clr-timeline-step-description-color, #666); + font-size: 0.55rem; + line-height: 0.8rem; +} +.clr-timeline-step-description button { + display: block; + margin-top: 0.4rem; +} +.clr-timeline-step-description img { + width: 100%; + margin-top: 0.4rem; +} +.clr-timeline.clr-timeline-vertical { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + min-width: 16rem; +} +.clr-timeline.clr-timeline-vertical .clr-timeline-step { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + margin-left: 0; + position: relative; +} +.clr-timeline.clr-timeline-vertical .clr-timeline-step:not(:last-of-type) { + margin-bottom: 1.8rem; +} +.clr-timeline.clr-timeline-vertical + .clr-timeline-step:not(:last-of-type) + .clr-timeline-step-body::before { + position: absolute; + width: 0.1rem; + height: calc(100% + 0.2rem); + -webkit-transform: translate(-1.55rem, 1.4rem); + transform: translate(-1.55rem, 1.4rem); +} +.clr-timeline.clr-timeline-vertical .clr-timeline-step-header { + text-align: right; + white-space: normal; + word-break: break-word; + width: 3rem; + min-width: 3rem; + margin-right: 0.6rem; + margin-top: 0.3rem; + margin-bottom: 0; +} +.clr-timeline.clr-timeline-vertical .clr-timeline-step-title { + margin-top: 0; +} +.clr-timeline.clr-timeline-vertical .clr-timeline-step-body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + min-width: 8.9rem; + margin-left: 0.6rem; + margin-top: 0.3rem; +} +@keyframes spin { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/environments/environment.prod.ts b/projects/frontend/data-pipelines/gui/projects/ui/src/environments/environment.prod.ts index bdc8e7c053..c2e3ea4d22 100644 --- a/projects/frontend/data-pipelines/gui/projects/ui/src/environments/environment.prod.ts +++ b/projects/frontend/data-pipelines/gui/projects/ui/src/environments/environment.prod.ts @@ -4,5 +4,5 @@ */ export const environment = { - production: true + production: true, }; diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/environments/environment.ts b/projects/frontend/data-pipelines/gui/projects/ui/src/environments/environment.ts index 6bf2099149..b168918bca 100644 --- a/projects/frontend/data-pipelines/gui/projects/ui/src/environments/environment.ts +++ b/projects/frontend/data-pipelines/gui/projects/ui/src/environments/environment.ts @@ -8,7 +8,7 @@ // The list of file replacements can be found in `angular.json`. export const environment = { - production: false + production: false, }; /* @@ -18,4 +18,4 @@ export const environment = { * This import should be commented out in production mode because it will have a negative impact * on performance if an error is thrown. */ -import 'zone.js/plugins/zone-error'; // Included with Angular CLI. +import 'zone.js/plugins/zone-error'; // Included with Angular CLI. diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/index.html b/projects/frontend/data-pipelines/gui/projects/ui/src/index.html index ac4328f021..0f04c68046 100644 --- a/projects/frontend/data-pipelines/gui/projects/ui/src/index.html +++ b/projects/frontend/data-pipelines/gui/projects/ui/src/index.html @@ -3,17 +3,21 @@ ~ SPDX-License-Identifier: Apache-2.0 --> - + - - - Ui - - - - - - - - + + + Ui + + + + + + + + diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/main.ts b/projects/frontend/data-pipelines/gui/projects/ui/src/main.ts index a61616e51e..34f515dc75 100644 --- a/projects/frontend/data-pipelines/gui/projects/ui/src/main.ts +++ b/projects/frontend/data-pipelines/gui/projects/ui/src/main.ts @@ -15,4 +15,4 @@ if (environment.production) { platformBrowserDynamic() .bootstrapModule(AppModule) - .catch(err => console.error(err)); + .catch((err) => console.error(err)); diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/styles.scss b/projects/frontend/data-pipelines/gui/projects/ui/src/styles.scss index 43ef083bb1..bdcf97db7b 100644 --- a/projects/frontend/data-pipelines/gui/projects/ui/src/styles.scss +++ b/projects/frontend/data-pipelines/gui/projects/ui/src/styles.scss @@ -10,238 +10,238 @@ **/ :root { - --taurus-placeholder-color: var(--clr-color-neutral-500, #b3b3b3); + --taurus-placeholder-color: var(--clr-color-neutral-500, #b3b3b3); } /* _normalize overwrite */ ::-webkit-input-placeholder { - /* clr-forms-placeholder-color */ - color: var(--taurus-placeholder-color) !important; + /* clr-forms-placeholder-color */ + color: var(--taurus-placeholder-color) !important; } /* Internet Explorer 10-11 */ :-ms-input-placeholder { - /* clr-forms-placeholder-color */ - color: var(--taurus-placeholder-color) !important; + /* clr-forms-placeholder-color */ + color: var(--taurus-placeholder-color) !important; } /* Microsoft Edge */ ::-ms-input-placeholder { - /* clr-forms-placeholder-color */ - color: var(--taurus-placeholder-color) !important; + /* clr-forms-placeholder-color */ + color: var(--taurus-placeholder-color) !important; } /* Chrome, Firefox, Opera, Safari 10.1+ */ ::placeholder { - /* clr-forms-placeholder-color */ - color: var(--taurus-placeholder-color) !important; + /* clr-forms-placeholder-color */ + color: var(--taurus-placeholder-color) !important; } .fade-to-dark.dark { - --taurus-placeholder-color: #b3b3b3; + --taurus-placeholder-color: #b3b3b3; } html { - scroll-behavior: smooth; + scroll-behavior: smooth; } .content-container.switch-btn-bottom .nav-content { - margin-bottom: 1.5rem; + margin-bottom: 1.5rem; } /* combo box */ .clr-popover-content { - margin-top: 10px; + margin-top: 10px; } /* vmw search component */ -vmw-search .search-container cds-icon[shape=search] { - top: 2px !important; +vmw-search .search-container cds-icon[shape="search"] { + top: 2px !important; } /* forms */ .destination-modal-body .custom-header-item .custom-header-input { - display: inline-block; - max-width: 10rem; + display: inline-block; + max-width: 10rem; } .modal-submit { - position: absolute; - left: -9999px; - z-index: -9999; - visibility: hidden; + position: absolute; + left: -9999px; + z-index: -9999; + visibility: hidden; } vmw-form-section-container.p-header-section .form-header { - padding-bottom: 0 !important; - margin-top: 0; + padding-bottom: 0 !important; + margin-top: 0; } vmw-form-section-container.p-header-section .form-header .section-title { - font-size: .7rem; - font-weight: 500; + font-size: 0.7rem; + font-weight: 500; } vmw-form-section-container.p-header-section .vmw-vertical-line { - margin-top: 0 !important; + margin-top: 0 !important; } vmw-form-section-container.p-header-section .csp-edit-button { - margin-left: 1rem !important; + margin-left: 1rem !important; } /* links */ a.disabled { - pointer-events: none; - cursor: default; - opacity: 0.5; + pointer-events: none; + cursor: default; + opacity: 0.5; } /* theme */ .toogle-theme { - position: absolute; - bottom: 0; - background-color: transparent !important; - padding-left: 0 !important; + position: absolute; + bottom: 0; + background-color: transparent !important; + padding-left: 0 !important; } .toogle-theme:hover { - background-color: transparent !important; + background-color: transparent !important; } .toogle-theme .nav-link { - background-color: transparent !important; + background-color: transparent !important; } .page-title { - margin-top: 0; + margin-top: 0; } .tc { - text-align: center !important; + text-align: center !important; } /* margins */ .m-0 { - margin: 0 !important; + margin: 0 !important; } .mt-0 { - margin-top: 0 !important; + margin-top: 0 !important; } .mb-12 { - margin-bottom: 12px !important; + margin-bottom: 12px !important; } .pl-35 { - padding-left: 35px !important; + padding-left: 35px !important; } .w-100 { - width: 100% !important; + width: 100% !important; } /* modals */ .modal-body > :first-child { - margin-top: 0; + margin-top: 0; } input.modal-form-control { - width: 12rem; + width: 12rem; } select.modal-form-control { - width: 8rem; + width: 8rem; } .modal-actions { - margin-top: -20px !important; + margin-top: -20px !important; } /* color styles */ .red { - color: #EB5757; + color: #eb5757; } /* position */ .right { - float: right; + float: right; } .left { - float: left; + float: left; } /* lists */ ul.idented { - text-indent: 2em; + text-indent: 2em; } /* media */ @media (max-width: 600px) { - .right { - float: none !important; - } + .right { + float: none !important; + } } /* datagrid cells */ .cell-img-container { - min-width: 30px !important; - width: 60px !important; - text-align: center !important; + min-width: 30px !important; + width: 60px !important; + text-align: center !important; } .cell-center { - margin: auto !important; + margin: auto !important; } .enabled-column { - width: 6rem !important; + width: 6rem !important; } /* limit-height */ .limit-height { - height: 50vh; + height: 50vh; } .limit-height clr-datagrid { - height: 50vh !important; + height: 50vh !important; } .limit-height clr-datagrid .datagrid { - margin-top: 0; + margin-top: 0; } .limit-height clr-datagrid clr-dg-cell { - margin: auto; + margin: auto; } /* team-list-component */ .team-list-container .clr-form-control { - margin-top: 0 !important; + margin-top: 0 !important; } /* CSP-HEADER */ /* Hide header assets */ .header .header-actions .nav-icon.app-switcher { - width: 0; + width: 0; } .header .header-actions .nav-icon.app-switcher cds-icon { - display: none !important; + display: none !important; } .header .header-actions .nav-icon.user-menu span.org-name { - display: none; + display: none; } @media (min-width: 768px) { - .header .header-actions .nav-icon.user-menu div { - margin-top: .5rem; - } + .header .header-actions .nav-icon.user-menu div { + margin-top: 0.5rem; + } } .cdk-overlay-container { - z-index: 1100; + z-index: 1100; } diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/test.ts b/projects/frontend/data-pipelines/gui/projects/ui/src/test.ts index d57e73ade7..f58b5b6f49 100644 --- a/projects/frontend/data-pipelines/gui/projects/ui/src/test.ts +++ b/projects/frontend/data-pipelines/gui/projects/ui/src/test.ts @@ -7,10 +7,17 @@ import 'zone.js/testing'; import { getTestBed } from '@angular/core/testing'; -import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting, +} from '@angular/platform-browser-dynamic/testing'; declare const require: { - context(path: string, deep?: boolean, filter?: RegExp): { + context( + path: string, + deep?: boolean, + filter?: RegExp + ): { keys(): string[]; (id: string): T; }; @@ -21,7 +28,7 @@ getTestBed().initTestEnvironment( BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { - teardown: { destroyAfterEach: false } + teardown: { destroyAfterEach: false }, } ); // Then we find all the tests. diff --git a/projects/frontend/shared-components/gui/projects/documentation-ui/karma.conf.js b/projects/frontend/shared-components/gui/projects/documentation-ui/karma.conf.js index 7b134b5021..0a991db2aa 100644 --- a/projects/frontend/shared-components/gui/projects/documentation-ui/karma.conf.js +++ b/projects/frontend/shared-components/gui/projects/documentation-ui/karma.conf.js @@ -6,63 +6,69 @@ // Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html -module.exports = function(config) { - config.set({ - basePath: '', - frameworks: ['jasmine', '@angular-devkit/build-angular'], - plugins: [ - require('karma-jasmine'), - require('karma-chrome-launcher'), - require('karma-jasmine-html-reporter'), - require('karma-junit-reporter'), - require('karma-coverage'), - require('@angular-devkit/build-angular/plugins/karma') - ], - client: { - jasmine: { - // you can add configuration options for Jasmine here - // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html - // for example, you can disable the random execution with `random: false` - // or set a specific seed with `seed: 4321` - }, - clearContext: false // leave Jasmine Spec Runner output visible in browser - }, - coverageReporter: { - dir: require('path').join(__dirname, '../../reports/coverage/documentation-ui'), - subdir: '.', - reporters: [ - //Code coverage - output only in HTML file - { type: 'html' }, - { type: 'text-summary' }, - { type: 'lcovonly' } - ], - check: { - global: { - lines: 20 - } - } - }, - jasmineHtmlReporter: { - suppressAll: true // removes the duplicated traces - }, - junitReporter: { - outputDir: require('path').join(__dirname, '../../reports/test-results/documentation-ui'), - outputFile: 'unit-tests.xml', - useBrowserName: false - }, - reporters: ['progress', 'junit', 'coverage'], - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: true, - browsers: ['ChromeHeadless'], - customLaunchers: { - ChromeHeadless_No_Sandbox: { - base: 'ChromeHeadless', - flags: ['--no-sandbox'] - } - }, - singleRun: false, - restartOnFileChange: true - }); +module.exports = function (config) { + config.set({ + basePath: '', + frameworks: ['jasmine', '@angular-devkit/build-angular'], + plugins: [ + require('karma-jasmine'), + require('karma-chrome-launcher'), + require('karma-jasmine-html-reporter'), + require('karma-junit-reporter'), + require('karma-coverage'), + require('@angular-devkit/build-angular/plugins/karma') + ], + client: { + jasmine: { + // you can add configuration options for Jasmine here + // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html + // for example, you can disable the random execution with `random: false` + // or set a specific seed with `seed: 4321` + }, + clearContext: false // leave Jasmine Spec Runner output visible in browser + }, + coverageReporter: { + dir: require('path').join( + __dirname, + '../../reports/coverage/documentation-ui' + ), + subdir: '.', + reporters: [ + //Code coverage - output only in HTML file + { type: 'html' }, + { type: 'text-summary' }, + { type: 'lcovonly' } + ], + check: { + global: { + lines: 20 + } + } + }, + jasmineHtmlReporter: { + suppressAll: true // removes the duplicated traces + }, + junitReporter: { + outputDir: require('path').join( + __dirname, + '../../reports/test-results/documentation-ui' + ), + outputFile: 'unit-tests.xml', + useBrowserName: false + }, + reporters: ['progress', 'junit', 'coverage'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ['ChromeHeadless'], + customLaunchers: { + ChromeHeadless_No_Sandbox: { + base: 'ChromeHeadless', + flags: ['--no-sandbox'] + } + }, + singleRun: false, + restartOnFileChange: true + }); }; diff --git a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app-routing.module.ts b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app-routing.module.ts index 8b2fe0e3e3..c610dc0ce0 100644 --- a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app-routing.module.ts +++ b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app-routing.module.ts @@ -7,22 +7,21 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; const routes: Routes = [ - { - path: '', - redirectTo: 'overview', - pathMatch: 'full' - }, - // Overview - { - path: 'overview', - loadChildren: () => import('./core/core.module').then((m) => m.CoreModule) - }, - { path: '**', redirectTo: 'overview' } + { + path: '', + redirectTo: 'overview', + pathMatch: 'full' + }, + // Overview + { + path: 'overview', + loadChildren: () => import('./core/core.module').then((m) => m.CoreModule) + }, + { path: '**', redirectTo: 'overview' } ]; @NgModule({ - imports: [RouterModule.forRoot(routes)], - exports: [RouterModule] + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule] }) -export class AppRoutingModule { -} +export class AppRoutingModule {} diff --git a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app.component.html b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app.component.html index 37b1d7f209..988535bf22 100644 --- a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app.component.html +++ b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app.component.html @@ -4,58 +4,63 @@ -->
    - -
    -
    - - - Shared Components Documentation UI - -
    -
    - - - -
    Logout
    -     -     -
    -
    - -
    - - - - Overview - -
    - Components -
    -     - -     - - -
    -
    - -
    -
    -
    + +
    +
    + + + Shared Components Documentation UI + +
    +
    + + + +
    + Logout +
    +     +     +
    +
    + +
    + + + + Overview + +
    Components
    +     +     + +
    +
    + +
    +
    +
    - +
    diff --git a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app.component.scss b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app.component.scss index 1afbdcdb34..1ef6daa795 100644 --- a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app.component.scss +++ b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app.component.scss @@ -4,36 +4,36 @@ */ .main-container { - .content-container { - .content-area { - .csp-content-area-margin { - margin: 0 30px; - padding-bottom: 30px; - height: 100%; - } - } - } + .content-container { + .content-area { + .csp-content-area-margin { + margin: 0 30px; + padding-bottom: 30px; + height: 100%; + } + } + } } ::ng-deep .table-documentation { - &.table th, - &.table td { - text-align: left; - } + &.table th, + &.table td { + text-align: left; + } } .checking-user { - display: table; - height: 26.5rem; - width: 100%; + display: table; + height: 26.5rem; + width: 100%; - .loading-spinner { - text-align: center; - display: table-cell; - vertical-align: middle; + .loading-spinner { + text-align: center; + display: table-cell; + vertical-align: middle; - .loading-title { - margin-bottom: .6rem; - } - } + .loading-title { + margin-bottom: 0.6rem; + } + } } diff --git a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app.component.spec.ts b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app.component.spec.ts index bd83efc951..494ec193da 100644 --- a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app.component.spec.ts +++ b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app.component.spec.ts @@ -10,23 +10,23 @@ import { OAuthModule } from 'angular-oauth2-oidc'; import { HttpClientTestingModule } from '@angular/common/http/testing'; describe('AppComponent', () => { - let component: AppComponent; - let fixture: ComponentFixture; + let component: AppComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [AppComponent], - schemas: [CUSTOM_ELEMENTS_SCHEMA], - imports: [OAuthModule.forRoot(), HttpClientTestingModule] - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(AppComponent); - component = fixture.debugElement.componentInstance; - }); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [AppComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + imports: [OAuthModule.forRoot(), HttpClientTestingModule] + }) + .compileComponents() + .then(() => { + fixture = TestBed.createComponent(AppComponent); + component = fixture.debugElement.componentInstance; + }); + }); - it('should create the app', () => { - expect(component).toBeTruthy(); - }); + it('should create the app', () => { + expect(component).toBeTruthy(); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app.component.ts b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app.component.ts index 7e855baa9f..3839d61a06 100644 --- a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app.component.ts +++ b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app.component.ts @@ -8,30 +8,32 @@ import { OAuthService } from 'angular-oauth2-oidc'; import { authCodeFlowConfig } from './auth'; @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'] }) export class AppComponent { - constructor(private oauthService: OAuthService) { - this.oauthService.configure(authCodeFlowConfig); - // eslint-disable-next-line @typescript-eslint/no-floating-promises - this.oauthService.loadDiscoveryDocumentAndLogin(); - } + constructor(private oauthService: OAuthService) { + this.oauthService.configure(authCodeFlowConfig); + // eslint-disable-next-line @typescript-eslint/no-floating-promises + this.oauthService.loadDiscoveryDocumentAndLogin(); + } - logout(): void { - this.oauthService.logOut(); - } + logout(): void { + this.oauthService.logOut(); + } - get idToken(): string { - return this.oauthService.getIdToken(); - } + get idToken(): string { + return this.oauthService.getIdToken(); + } - get userName(): string { - return (this.oauthService.getIdentityClaims()) ? this.getIdentityClaim('username') : 'N/A'; - } + get userName(): string { + return this.oauthService.getIdentityClaims() + ? this.getIdentityClaim('username') + : 'N/A'; + } - private getIdentityClaim(userNamePropName: string): string { - return this.oauthService.getIdentityClaims()[userNamePropName] as string; - } + private getIdentityClaim(userNamePropName: string): string { + return this.oauthService.getIdentityClaims()[userNamePropName] as string; + } } diff --git a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app.module.ts b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app.module.ts index 4a7e36c41d..cf1c9f71da 100644 --- a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app.module.ts +++ b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/app.module.ts @@ -14,7 +14,11 @@ import { ClarityModule } from '@clr/angular'; import { VdkComponentsModule } from '@vdk/shared'; -import { TaurusSharedCoreModule, TaurusSharedFeaturesModule, TaurusSharedNgRxModule } from '@vdk/shared'; +import { + TaurusSharedCoreModule, + TaurusSharedFeaturesModule, + TaurusSharedNgRxModule +} from '@vdk/shared'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @@ -22,43 +26,39 @@ import { AuthorizationInterceptor } from './http.interceptor'; import { authCodeFlowConfig } from './auth'; @NgModule({ - imports: [ - AppRoutingModule, - BrowserModule, - ClarityModule, - BrowserAnimationsModule, - TaurusSharedCoreModule.forRoot(), - TaurusSharedFeaturesModule.forRoot(), - TaurusSharedNgRxModule.forRootWithDevtools(), - VdkComponentsModule.forRoot(), - HttpClientModule, - OAuthModule.forRoot({ - resourceServer: { - allowedUrls: [ - authCodeFlowConfig.issuer, - '/metadata' - ], - sendAccessToken: true - } - }) - ], - declarations: [AppComponent], - providers: [ - { - provide: OAuthStorage, - useValue: localStorage - }, - { - provide: AuthConfig, - useValue: authCodeFlowConfig - }, - { - provide: HTTP_INTERCEPTORS, - useClass: AuthorizationInterceptor, - multi: true - } - ], - bootstrap: [AppComponent] + imports: [ + AppRoutingModule, + BrowserModule, + ClarityModule, + BrowserAnimationsModule, + TaurusSharedCoreModule.forRoot(), + TaurusSharedFeaturesModule.forRoot(), + TaurusSharedNgRxModule.forRootWithDevtools(), + VdkComponentsModule.forRoot(), + HttpClientModule, + OAuthModule.forRoot({ + resourceServer: { + allowedUrls: [authCodeFlowConfig.issuer, '/metadata'], + sendAccessToken: true + } + }) + ], + declarations: [AppComponent], + providers: [ + { + provide: OAuthStorage, + useValue: localStorage + }, + { + provide: AuthConfig, + useValue: authCodeFlowConfig + }, + { + provide: HTTP_INTERCEPTORS, + useClass: AuthorizationInterceptor, + multi: true + } + ], + bootstrap: [AppComponent] }) -export class AppModule { -} +export class AppModule {} diff --git a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/auth.ts b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/auth.ts index 48fec45ef1..cfc2fd35bb 100644 --- a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/auth.ts +++ b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/auth.ts @@ -6,21 +6,21 @@ import { AuthConfig } from 'angular-oauth2-oidc'; export const authCodeFlowConfig: AuthConfig = { - issuer: 'https://console-stg.cloud.vmware.com/csp/gateway/am/api/', - redirectUri: window.location.origin + '/index.html', - skipIssuerCheck: true, - requestAccessToken: true, - oidc: true, - strictDiscoveryDocumentValidation: false, - clientId: 'Lt44bhN5yMowdEHuxO3v1SBDKsS3aXW4GcJ', - responseType: 'code', - scope: 'openid ALL_PERMISSIONS customer_number group_names', - showDebugInformation: true, - silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html', - useSilentRefresh: true, // Needed for Code Flow to suggest using iframe-based refreshes - silentRefreshTimeout: 5000, // For faster testing - timeoutFactor: 0.25, // For faster testing - sessionChecksEnabled: true, - clearHashAfterLogin: false, // https://github.com/manfredsteyer/angular-oauth2-oidc/issues/457#issuecomment-431807040, - nonceStateSeparator: 'semicolon' // Real semicolon gets mangled by IdentityServer's URI encoding + issuer: 'https://console-stg.cloud.vmware.com/csp/gateway/am/api/', + redirectUri: window.location.origin + '/index.html', + skipIssuerCheck: true, + requestAccessToken: true, + oidc: true, + strictDiscoveryDocumentValidation: false, + clientId: 'Lt44bhN5yMowdEHuxO3v1SBDKsS3aXW4GcJ', + responseType: 'code', + scope: 'openid ALL_PERMISSIONS customer_number group_names', + showDebugInformation: true, + silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html', + useSilentRefresh: true, // Needed for Code Flow to suggest using iframe-based refreshes + silentRefreshTimeout: 5000, // For faster testing + timeoutFactor: 0.25, // For faster testing + sessionChecksEnabled: true, + clearHashAfterLogin: false, // https://github.com/manfredsteyer/angular-oauth2-oidc/issues/457#issuecomment-431807040, + nonceStateSeparator: 'semicolon' // Real semicolon gets mangled by IdentityServer's URI encoding }; diff --git a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/core/core.component.html b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/core/core.component.html index 4c09e4db07..51a9bc1d24 100644 --- a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/core/core.component.html +++ b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/core/core.component.html @@ -4,9 +4,8 @@ -->
    -

    Shared Components Overview

    +

    Shared Components Overview

    -
    -
    -
    +
    +
    diff --git a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/core/core.component.scss b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/core/core.component.scss index 836dffb8dc..edae7e8229 100644 --- a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/core/core.component.scss +++ b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/core/core.component.scss @@ -4,18 +4,17 @@ */ .core-component { - .card { - height: 100%; + .card { + height: 100%; - .card-block { - display: flex; - justify-content: center; - align-items: center; - - img { - width: 100%; - } - } - } + .card-block { + display: flex; + justify-content: center; + align-items: center; + img { + width: 100%; + } + } + } } diff --git a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/core/core.component.spec.ts b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/core/core.component.spec.ts index e2d1536521..3a03492915 100644 --- a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/core/core.component.spec.ts +++ b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/core/core.component.spec.ts @@ -8,22 +8,22 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { CoreComponent } from './core.component'; describe('CoreComponent', () => { - let component: CoreComponent; - let fixture: ComponentFixture; + let component: CoreComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [CoreComponent] - }).compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [CoreComponent] + }).compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(CoreComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(CoreComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it('should create', () => { + expect(component).toBeTruthy(); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/core/core.component.ts b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/core/core.component.ts index cd79f06ad7..1ba9147568 100644 --- a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/core/core.component.ts +++ b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/core/core.component.ts @@ -6,9 +6,8 @@ import { Component } from '@angular/core'; @Component({ - selector: 'app-core', - templateUrl: './core.component.html', - styleUrls: ['./core.component.scss'] + selector: 'app-core', + templateUrl: './core.component.html', + styleUrls: ['./core.component.scss'] }) -export class CoreComponent { -} +export class CoreComponent {} diff --git a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/core/core.module.ts b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/core/core.module.ts index dd3e55220a..f6d628a135 100644 --- a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/core/core.module.ts +++ b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/core/core.module.ts @@ -10,15 +10,14 @@ import { RouterModule, Routes } from '@angular/router'; import { ClarityModule } from '@clr/angular'; const routes: Routes = [ - { - path: '', - component: CoreComponent - } + { + path: '', + component: CoreComponent + } ]; @NgModule({ - declarations: [CoreComponent], - imports: [RouterModule.forChild(routes), CommonModule, ClarityModule] + declarations: [CoreComponent], + imports: [RouterModule.forChild(routes), CommonModule, ClarityModule] }) -export class CoreModule { -} +export class CoreModule {} diff --git a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/http.interceptor.ts b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/http.interceptor.ts index 936095a5e8..6c39d51744 100644 --- a/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/http.interceptor.ts +++ b/projects/frontend/shared-components/gui/projects/documentation-ui/src/app/http.interceptor.ts @@ -4,60 +4,70 @@ */ import { Injectable, Optional } from '@angular/core'; -import { OAuthModuleConfig, OAuthResourceServerErrorHandler, OAuthStorage } from 'angular-oauth2-oidc'; -import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http'; +import { + OAuthModuleConfig, + OAuthResourceServerErrorHandler, + OAuthStorage +} from 'angular-oauth2-oidc'; +import { + HttpEvent, + HttpHandler, + HttpInterceptor, + HttpRequest +} from '@angular/common/http'; import { Observable } from 'rxjs'; import { authCodeFlowConfig } from './auth'; @Injectable() export class AuthorizationInterceptor implements HttpInterceptor { + constructor( + private authStorage: OAuthStorage, + private errorHandler: OAuthResourceServerErrorHandler, + @Optional() private moduleConfig: OAuthModuleConfig + ) {} - constructor( - private authStorage: OAuthStorage, - private errorHandler: OAuthResourceServerErrorHandler, - @Optional() private moduleConfig: OAuthModuleConfig) { - } - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - public intercept(req: HttpRequest, next: HttpHandler): Observable> { - const url = req.url.toLowerCase(); - if (!this.moduleConfig) { - return next.handle(req); - } - if (!this.moduleConfig.resourceServer) { - return next.handle(req); - } - if (!this.moduleConfig.resourceServer.allowedUrls) { - return next.handle(req); - } - if (!this.checkUrl(url)) { - return next.handle(req); - } - - const sendAccessToken = this.moduleConfig.resourceServer.sendAccessToken; - - if (sendAccessToken && url.startsWith(authCodeFlowConfig.issuer)) { - - const headers = req.headers - .set('Authorization', 'Basic ' + btoa(authCodeFlowConfig.clientId + ':')); - req = req.clone({ headers }); - - } else if (sendAccessToken) { - - const token = this.authStorage.getItem('access_token'); - const header = 'Bearer ' + token; - const headers = req.headers - .set('Authorization', header); - req = req.clone({ headers }); - - } - - return next.handle(req); - } - - private checkUrl(url: string): boolean { - const found = this.moduleConfig.resourceServer.allowedUrls.find(u => url.startsWith(u)); - return !!found; - } + // eslint-disable-next-line @typescript-eslint/no-explicit-any + public intercept( + req: HttpRequest, + next: HttpHandler + ): Observable> { + const url = req.url.toLowerCase(); + if (!this.moduleConfig) { + return next.handle(req); + } + if (!this.moduleConfig.resourceServer) { + return next.handle(req); + } + if (!this.moduleConfig.resourceServer.allowedUrls) { + return next.handle(req); + } + if (!this.checkUrl(url)) { + return next.handle(req); + } + + const sendAccessToken = this.moduleConfig.resourceServer.sendAccessToken; + + if (sendAccessToken && url.startsWith(authCodeFlowConfig.issuer)) { + const headers = req.headers.set( + 'Authorization', + 'Basic ' + btoa(authCodeFlowConfig.clientId + ':') + ); + req = req.clone({ headers }); + } else if (sendAccessToken) { + const token = this.authStorage.getItem('access_token'); + const header = 'Bearer ' + token; + const headers = req.headers.set('Authorization', header); + req = req.clone({ headers }); + } + + return next.handle(req); + } + + private checkUrl(url: string): boolean { + const found = this.moduleConfig.resourceServer.allowedUrls.find((u) => + url.startsWith(u) + ); + return !!found; + } } diff --git a/projects/frontend/shared-components/gui/projects/documentation-ui/src/environments/environment.prod.ts b/projects/frontend/shared-components/gui/projects/documentation-ui/src/environments/environment.prod.ts index bdc8e7c053..77af28bf6e 100644 --- a/projects/frontend/shared-components/gui/projects/documentation-ui/src/environments/environment.prod.ts +++ b/projects/frontend/shared-components/gui/projects/documentation-ui/src/environments/environment.prod.ts @@ -4,5 +4,5 @@ */ export const environment = { - production: true + production: true }; diff --git a/projects/frontend/shared-components/gui/projects/documentation-ui/src/environments/environment.ts b/projects/frontend/shared-components/gui/projects/documentation-ui/src/environments/environment.ts index 6bf2099149..3b2213c473 100644 --- a/projects/frontend/shared-components/gui/projects/documentation-ui/src/environments/environment.ts +++ b/projects/frontend/shared-components/gui/projects/documentation-ui/src/environments/environment.ts @@ -8,7 +8,7 @@ // The list of file replacements can be found in `angular.json`. export const environment = { - production: false + production: false }; /* @@ -18,4 +18,4 @@ export const environment = { * This import should be commented out in production mode because it will have a negative impact * on performance if an error is thrown. */ -import 'zone.js/plugins/zone-error'; // Included with Angular CLI. +import 'zone.js/plugins/zone-error'; // Included with Angular CLI. diff --git a/projects/frontend/shared-components/gui/projects/documentation-ui/src/index.html b/projects/frontend/shared-components/gui/projects/documentation-ui/src/index.html index daccc8173e..957b75326f 100644 --- a/projects/frontend/shared-components/gui/projects/documentation-ui/src/index.html +++ b/projects/frontend/shared-components/gui/projects/documentation-ui/src/index.html @@ -3,17 +3,17 @@ ~ SPDX-License-Identifier: Apache-2.0 --> - + - - - DocumentationUi - - - - - - - - + + + DocumentationUi + + + + + + + + diff --git a/projects/frontend/shared-components/gui/projects/documentation-ui/src/main.ts b/projects/frontend/shared-components/gui/projects/documentation-ui/src/main.ts index 34f515dc75..06d016c516 100644 --- a/projects/frontend/shared-components/gui/projects/documentation-ui/src/main.ts +++ b/projects/frontend/shared-components/gui/projects/documentation-ui/src/main.ts @@ -10,9 +10,9 @@ import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { - enableProdMode(); + enableProdMode(); } platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => console.error(err)); + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); diff --git a/projects/frontend/shared-components/gui/projects/documentation-ui/src/styles.scss b/projects/frontend/shared-components/gui/projects/documentation-ui/src/styles.scss index 7bc758add5..0782512909 100644 --- a/projects/frontend/shared-components/gui/projects/documentation-ui/src/styles.scss +++ b/projects/frontend/shared-components/gui/projects/documentation-ui/src/styles.scss @@ -10,283 +10,291 @@ **/ :root { - --taurus-placeholder-color: var(--clr-color-neutral-500, #b3b3b3); + --taurus-placeholder-color: var(--clr-color-neutral-500, #b3b3b3); } /* _normalize overwrite */ ::-webkit-input-placeholder { - /* clr-forms-placeholder-color */ - color: var(--taurus-placeholder-color) !important; + /* clr-forms-placeholder-color */ + color: var(--taurus-placeholder-color) !important; } /* Internet Explorer 10-11 */ :-ms-input-placeholder { - /* clr-forms-placeholder-color */ - color: var(--taurus-placeholder-color) !important; + /* clr-forms-placeholder-color */ + color: var(--taurus-placeholder-color) !important; } /* Microsoft Edge */ ::-ms-input-placeholder { - /* clr-forms-placeholder-color */ - color: var(--taurus-placeholder-color) !important; + /* clr-forms-placeholder-color */ + color: var(--taurus-placeholder-color) !important; } /* Chrome, Firefox, Opera, Safari 10.1+ */ ::placeholder { - /* clr-forms-placeholder-color */ - color: var(--taurus-placeholder-color) !important; + /* clr-forms-placeholder-color */ + color: var(--taurus-placeholder-color) !important; } .fade-to-dark.dark { - --taurus-placeholder-color: #b3b3b3; + --taurus-placeholder-color: #b3b3b3; } html { - scroll-behavior: smooth; + scroll-behavior: smooth; } .content-container.switch-btn-bottom .nav-content { - margin-bottom: 1.5rem; + margin-bottom: 1.5rem; } /* combo box */ .clr-popover-content { - margin-top: 10px; + margin-top: 10px; } /* vmw search component */ -vdk-search .search-container cds-icon[shape=search] { - top: 2px !important; +vdk-search .search-container cds-icon[shape='search'] { + top: 2px !important; } /* forms */ .destination-modal-body .custom-header-item .custom-header-input { - display: inline-block; - max-width: 10rem; + display: inline-block; + max-width: 10rem; } .modal-submit { - position: absolute; - left: -9999px; - z-index: -9999; - visibility: hidden; + position: absolute; + left: -9999px; + z-index: -9999; + visibility: hidden; } vdk-form-section-container.p-header-section .form-header { - padding-bottom: 0 !important; - margin-top: 0; + padding-bottom: 0 !important; + margin-top: 0; } vdk-form-section-container.p-header-section .form-header .section-title { - font-size: .7rem; - font-weight: 500; + font-size: 0.7rem; + font-weight: 500; } vdk-form-section-container.p-header-section .vdk-vertical-line { - margin-top: 0 !important; + margin-top: 0 !important; } vdk-form-section-container.p-header-section .csp-edit-button { - margin-left: 1rem !important; + margin-left: 1rem !important; } /* links */ a.disabled { - pointer-events: none; - cursor: default; - opacity: 0.5; + pointer-events: none; + cursor: default; + opacity: 0.5; } /* theme */ .toogle-theme { - position: absolute; - bottom: 0; - background-color: transparent !important; - padding-left: 0 !important; + position: absolute; + bottom: 0; + background-color: transparent !important; + padding-left: 0 !important; } .toogle-theme:hover { - background-color: transparent !important; + background-color: transparent !important; } .toogle-theme .nav-link { - background-color: transparent !important; + background-color: transparent !important; } .page-title { - margin-top: 0; + margin-top: 0; } .tc { - text-align: center !important; + text-align: center !important; } /* margins */ .m-0 { - margin: 0 !important; + margin: 0 !important; } .mt-0 { - margin-top: 0 !important; + margin-top: 0 !important; } .mb-12 { - margin-bottom: 12px !important; + margin-bottom: 12px !important; } .pl-35 { - padding-left: 35px !important; + padding-left: 35px !important; } .w-100 { - width: 100% !important; + width: 100% !important; } /* modals */ .modal-body > :first-child { - margin-top: 0; + margin-top: 0; } input.modal-form-control { - width: 12rem; + width: 12rem; } select.modal-form-control { - width: 8rem; + width: 8rem; } .modal-actions { - margin-top: -20px !important; + margin-top: -20px !important; } /* color styles */ .red { - color: #EB5757; + color: #eb5757; } /* position */ .right { - float: right; + float: right; } .left { - float: left; + float: left; } /* lists */ ul.idented { - text-indent: 2em; + text-indent: 2em; } /* media */ @media (max-width: 600px) { - .right { - float: none !important; - } + .right { + float: none !important; + } } /* datagrid cells */ .cell-img-container { - min-width: 30px !important; - width: 60px !important; - text-align: center !important; + min-width: 30px !important; + width: 60px !important; + text-align: center !important; } .cell-center { - margin: auto !important; + margin: auto !important; } .enabled-column { - width: 6rem !important; + width: 6rem !important; } /* limit-height */ .limit-height { - height: 50vh; + height: 50vh; } .limit-height clr-datagrid { - height: 50vh !important; + height: 50vh !important; } .limit-height clr-datagrid .datagrid { - margin-top: 0; + margin-top: 0; } .limit-height clr-datagrid clr-dg-cell { - margin: auto; + margin: auto; } /* team-list-component */ .team-list-container .clr-form-control { - margin-top: 0 !important; + margin-top: 0 !important; } /* CSP-HEADER */ /* Hide header assets */ .header .header-actions .nav-icon.app-switcher { - width: 0; + width: 0; } .header .header-actions .nav-icon.app-switcher cds-icon { - display: none !important; + display: none !important; } .header .header-actions .nav-icon.user-menu span.org-name { - display: none; + display: none; } @media (min-width: 768px) { - .header .header-actions .nav-icon.user-menu div { - margin-top: .5rem; - } + .header .header-actions .nav-icon.user-menu div { + margin-top: 0.5rem; + } } .clr-vertical-nav .nav-group-trigger .nav-group-trigger-icon { - height: 0.8rem; + height: 0.8rem; } .page-wrapper { - padding-bottom: 2.4rem; + padding-bottom: 2.4rem; } pre { - padding: 0.5rem; - overflow: auto; + padding: 0.5rem; + overflow: auto; } p code { - color: #c21d00; + color: #c21d00; } .table-documentation { - caption { - display: none; - } + caption { + display: none; + } } .token { - &.attr-name, &.builtin, &.char &.inserted &.selector &.string { - color: #aa5d00; - } - - &.atrule, &.attr-value, &.function { - color: #aa5d00; - } - - &.constant, &.deleted, &.property, &.symbol, &.tag { - color: #007faa; - } - - &.punctuation { - color: #545454; - } - - &.class { - color: #306B00; - } - - &.access { - color: #00567A; - } + &.attr-name, + &.builtin, + &.char &.inserted &.selector &.string { + color: #aa5d00; + } + + &.atrule, + &.attr-value, + &.function { + color: #aa5d00; + } + + &.constant, + &.deleted, + &.property, + &.symbol, + &.tag { + color: #007faa; + } + + &.punctuation { + color: #545454; + } + + &.class { + color: #306b00; + } + + &.access { + color: #00567a; + } } diff --git a/projects/frontend/shared-components/gui/projects/documentation-ui/src/test.ts b/projects/frontend/shared-components/gui/projects/documentation-ui/src/test.ts index d57e73ade7..361e0b9782 100644 --- a/projects/frontend/shared-components/gui/projects/documentation-ui/src/test.ts +++ b/projects/frontend/shared-components/gui/projects/documentation-ui/src/test.ts @@ -7,22 +7,29 @@ import 'zone.js/testing'; import { getTestBed } from '@angular/core/testing'; -import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; declare const require: { - context(path: string, deep?: boolean, filter?: RegExp): { - keys(): string[]; - (id: string): T; - }; + context( + path: string, + deep?: boolean, + filter?: RegExp + ): { + keys(): string[]; + (id: string): T; + }; }; // First, initialize the Angular testing environment. getTestBed().initTestEnvironment( - BrowserDynamicTestingModule, - platformBrowserDynamicTesting(), - { - teardown: { destroyAfterEach: false } - } + BrowserDynamicTestingModule, + platformBrowserDynamicTesting(), + { + teardown: { destroyAfterEach: false } + } ); // Then we find all the tests. const context = require.context('./', true, /\.spec\.ts$/); diff --git a/projects/frontend/shared-components/gui/projects/shared/karma.conf.js b/projects/frontend/shared-components/gui/projects/shared/karma.conf.js index a1d9c95ef0..ca0df16795 100644 --- a/projects/frontend/shared-components/gui/projects/shared/karma.conf.js +++ b/projects/frontend/shared-components/gui/projects/shared/karma.conf.js @@ -6,63 +6,66 @@ // Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html -module.exports = function(config) { - config.set({ - basePath: '', - frameworks: ['jasmine', '@angular-devkit/build-angular'], - plugins: [ - require('karma-jasmine'), - require('karma-chrome-launcher'), - require('karma-jasmine-html-reporter'), - require('karma-junit-reporter'), - require('karma-coverage'), - require('@angular-devkit/build-angular/plugins/karma') - ], - client: { - jasmine: { - // you can add configuration options for Jasmine here - // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html - // for example, you can disable the random execution with `random: false` - // or set a specific seed with `seed: 4321` - }, - clearContext: false // leave Jasmine Spec Runner output visible in browser - }, - jasmineHtmlReporter: { - suppressAll: true // removes the duplicated traces - }, - coverageReporter: { - dir: require('path').join(__dirname, '../../reports/coverage/shared'), - subdir: '.', - reporters: [ - //Code coverage - output in HTML file and Console(to be parsed in the CI/CD badge) - { type: 'html' }, - { type: 'text-summary' }, - { type: 'lcovonly' } - ], - check: { - global: { - lines: 80 - } - } - }, - reporters: ['progress', 'junit', 'coverage'], - junitReporter: { - outputDir: require('path').join(__dirname, '../../reports/test-results/shared'), - outputFile: 'unit-tests.xml', - useBrowserName: false - }, - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: true, - browsers: ['ChromeHeadless'], - customLaunchers: { - ChromeHeadless_No_Sandbox: { - base: 'ChromeHeadless', - flags: ['--no-sandbox'] - } - }, - singleRun: false, - restartOnFileChange: true - }); +module.exports = function (config) { + config.set({ + basePath: '', + frameworks: ['jasmine', '@angular-devkit/build-angular'], + plugins: [ + require('karma-jasmine'), + require('karma-chrome-launcher'), + require('karma-jasmine-html-reporter'), + require('karma-junit-reporter'), + require('karma-coverage'), + require('@angular-devkit/build-angular/plugins/karma') + ], + client: { + jasmine: { + // you can add configuration options for Jasmine here + // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html + // for example, you can disable the random execution with `random: false` + // or set a specific seed with `seed: 4321` + }, + clearContext: false // leave Jasmine Spec Runner output visible in browser + }, + jasmineHtmlReporter: { + suppressAll: true // removes the duplicated traces + }, + coverageReporter: { + dir: require('path').join(__dirname, '../../reports/coverage/shared'), + subdir: '.', + reporters: [ + //Code coverage - output in HTML file and Console(to be parsed in the CI/CD badge) + { type: 'html' }, + { type: 'text-summary' }, + { type: 'lcovonly' } + ], + check: { + global: { + lines: 80 + } + } + }, + reporters: ['progress', 'junit', 'coverage'], + junitReporter: { + outputDir: require('path').join( + __dirname, + '../../reports/test-results/shared' + ), + outputFile: 'unit-tests.xml', + useBrowserName: false + }, + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ['ChromeHeadless'], + customLaunchers: { + ChromeHeadless_No_Sandbox: { + base: 'ChromeHeadless', + flags: ['--no-sandbox'] + } + }, + singleRun: false, + restartOnFileChange: true + }); }; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/http/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/http/index.ts index 412a9d8bd1..76ff84d2bf 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/http/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/http/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/http/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/http/public-api.ts index ba142389bd..484b60ff3c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/http/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/http/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/http/request/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/http/request/index.ts index d37bcae73a..d64e49985c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/http/request/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/http/request/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/http/request/request.model.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/http/request/request.model.spec.ts index c3e677beec..698fe06bc5 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/http/request/request.model.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/http/request/request.model.spec.ts @@ -1,376 +1,453 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 */ -import { ApiPredicate, RequestFilterImpl, RequestOrderImpl, RequestPageImpl } from './request.model'; +import { + ApiPredicate, + RequestFilterImpl, + RequestOrderImpl, + RequestPageImpl +} from './request.model'; describe('RequestPage', () => { - it('should verify instance is created', () => { - // When - const instance = new RequestPageImpl(0, 0); - - // Then - expect(instance).toBeDefined(); - expect(instance).toBeInstanceOf(RequestPageImpl); - }); - - it('should verify correct value are assigned', () => { - // Given - const pageNumber = 4; - const pageSize = 10; - - // When - const instance = new RequestPageImpl(pageNumber, pageSize); - - // Then - expect(instance.page).toEqual(pageNumber); - expect(instance.size).toEqual(pageSize); - }); - - it('should verify on Nil parameters default value will be assigned', () => { - // When - const instance = new RequestPageImpl(null, undefined); - - // Then - expect(instance.page).toEqual(1); - expect(instance.size).toEqual(25); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const instance = RequestPageImpl.of(8, 20); - - // Then - expect(instance).toBeInstanceOf(RequestPageImpl); - expect(instance.page).toEqual(8); - expect(instance.size).toEqual(20); - }); - }); - - describe('|empty|', () => { - it('should verify will create empty instance with default values', () => { - // When - const instance = RequestPageImpl.empty(); - - // Then - expect(instance).toBeInstanceOf(RequestPageImpl); - expect(instance.page).toEqual(1); - expect(instance.size).toEqual(25); - }); - }); - - describe('|fromLiteral|', () => { - it('should verify will create new instance from given literal object', () => { - // Given - const literal = { pageNumber: 7, pageSize: 52 }; - - // When - const instance = RequestPageImpl.fromLiteral(literal); - - // Then - expect(instance).toBeInstanceOf(RequestPageImpl); - expect(instance.page).toEqual(7); - expect(instance.size).toEqual(52); - }); - }); - }); - }); - - describe('Methods::', () => { - describe('|toLiteral|', () => { - it('should verify will create literal object from RequestPage object ', () => { - // Given - const requestPage = RequestPageImpl.of(5, 17); - - // When - const literal = requestPage.toLiteral(); - - // Then - expect(literal).not.toBeInstanceOf(RequestPageImpl); - expect(literal).toBeInstanceOf(Object); - expect(literal.pageNumber).toEqual(5); - expect(literal.pageSize).toEqual(17); - }); - }); - - describe('|toLiteralDeepClone|', () => { - it('should verify will create literal deep cloned object from RequestPage object ', () => { - // Given - const requestPage = RequestPageImpl.of(9, 13); - - // When - const literal = requestPage.toLiteralDeepClone(); - - // Then - expect(literal).not.toBeInstanceOf(RequestPageImpl); - expect(literal).toBeInstanceOf(Object); - expect(literal.pageNumber).toEqual(9); - expect(literal.pageSize).toEqual(13); - }); - }); - }); + it('should verify instance is created', () => { + // When + const instance = new RequestPageImpl(0, 0); + + // Then + expect(instance).toBeDefined(); + expect(instance).toBeInstanceOf(RequestPageImpl); + }); + + it('should verify correct value are assigned', () => { + // Given + const pageNumber = 4; + const pageSize = 10; + + // When + const instance = new RequestPageImpl(pageNumber, pageSize); + + // Then + expect(instance.page).toEqual(pageNumber); + expect(instance.size).toEqual(pageSize); + }); + + it('should verify on Nil parameters default value will be assigned', () => { + // When + const instance = new RequestPageImpl(null, undefined); + + // Then + expect(instance.page).toEqual(1); + expect(instance.size).toEqual(25); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const instance = RequestPageImpl.of(8, 20); + + // Then + expect(instance).toBeInstanceOf(RequestPageImpl); + expect(instance.page).toEqual(8); + expect(instance.size).toEqual(20); + }); + }); + + describe('|empty|', () => { + it('should verify will create empty instance with default values', () => { + // When + const instance = RequestPageImpl.empty(); + + // Then + expect(instance).toBeInstanceOf(RequestPageImpl); + expect(instance.page).toEqual(1); + expect(instance.size).toEqual(25); + }); + }); + + describe('|fromLiteral|', () => { + it('should verify will create new instance from given literal object', () => { + // Given + const literal = { pageNumber: 7, pageSize: 52 }; + + // When + const instance = RequestPageImpl.fromLiteral(literal); + + // Then + expect(instance).toBeInstanceOf(RequestPageImpl); + expect(instance.page).toEqual(7); + expect(instance.size).toEqual(52); + }); + }); + }); + }); + + describe('Methods::', () => { + describe('|toLiteral|', () => { + it('should verify will create literal object from RequestPage object ', () => { + // Given + const requestPage = RequestPageImpl.of(5, 17); + + // When + const literal = requestPage.toLiteral(); + + // Then + expect(literal).not.toBeInstanceOf(RequestPageImpl); + expect(literal).toBeInstanceOf(Object); + expect(literal.pageNumber).toEqual(5); + expect(literal.pageSize).toEqual(17); + }); + }); + + describe('|toLiteralDeepClone|', () => { + it('should verify will create literal deep cloned object from RequestPage object ', () => { + // Given + const requestPage = RequestPageImpl.of(9, 13); + + // When + const literal = requestPage.toLiteralDeepClone(); + + // Then + expect(literal).not.toBeInstanceOf(RequestPageImpl); + expect(literal).toBeInstanceOf(Object); + expect(literal.pageNumber).toEqual(9); + expect(literal.pageSize).toEqual(13); + }); + }); + }); }); describe('RequestOrder', () => { - let apiPredicate1: ApiPredicate; - let apiPredicate2: ApiPredicate; - let apiPredicate3: ApiPredicate; - - beforeEach(() => { - apiPredicate1 = { pattern: 'test*', property: 'config.team', sort: 'DESC' }; - apiPredicate2 = { pattern: 'mock*', property: 'config.job', sort: 'ASC' }; - apiPredicate3 = { pattern: 'prod*', property: 'config.status', sort: 'DESC' }; - }); - - it('should verify instance is created', () => { - // When - const instance = new RequestOrderImpl(); - - // Then - expect(instance).toBeDefined(); - expect(instance).toBeInstanceOf(RequestOrderImpl); - }); - - it('should verify correct value are assigned', () => { - // When - const instance = new RequestOrderImpl(apiPredicate1, apiPredicate2, apiPredicate3); - - // Then - expect(instance.criteria).toBeInstanceOf(Array); - expect(instance.criteria.length).toEqual(3); - expect(instance.criteria[0]).toBe(apiPredicate1); - expect(instance.criteria[1]).toBe(apiPredicate2); - expect(instance.criteria[2]).toBe(apiPredicate3); - }); - - it('should verify wont assign Nil parameters', () => { - // When - const instance = new RequestOrderImpl(null, apiPredicate2, undefined, apiPredicate1, null, apiPredicate3, undefined); - - // Then - expect(instance.criteria.length).toEqual(3); - expect(instance.criteria[0]).toBe(apiPredicate2); - expect(instance.criteria[1]).toBe(apiPredicate1); - expect(instance.criteria[2]).toBe(apiPredicate3); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const instance = RequestOrderImpl.of(apiPredicate1, null, apiPredicate2, apiPredicate3); - - // Then - expect(instance).toBeInstanceOf(RequestOrderImpl); - expect(instance.criteria.length).toEqual(3); - expect(instance.criteria[0]).toBe(apiPredicate1); - expect(instance.criteria[1]).toBe(apiPredicate2); - expect(instance.criteria[2]).toBe(apiPredicate3); - }); - }); - - describe('|empty|', () => { - it('should verify will create empty instance with no criteria', () => { - // When - const instance = RequestOrderImpl.empty(); - - // Then - expect(instance).toBeInstanceOf(RequestOrderImpl); - expect(instance.criteria).toEqual([]); - }); - }); - - describe('|fromLiteral|', () => { - it('should verify will create new instance from given literal Array of ApiPredicates', () => { - // Given - const literal: ApiPredicate[] = [apiPredicate1, apiPredicate2, apiPredicate3]; - - // When - const instance = RequestOrderImpl.fromLiteral(literal); - - // Then - expect(instance).toBeInstanceOf(RequestOrderImpl); - expect(instance.criteria.length).toEqual(3); - expect(instance.criteria[0]).toBe(apiPredicate1); - expect(instance.criteria[1]).toBe(apiPredicate2); - expect(instance.criteria[2]).toBe(apiPredicate3); - }); - }); - }); - }); - - describe('Methods::', () => { - describe('|toLiteral|', () => { - it('should verify will create literal from RequestOrder object ', () => { - // Given - const requestOrder = RequestOrderImpl.of(apiPredicate1, null, apiPredicate2, undefined, apiPredicate3); - - // When - const literal = requestOrder.toLiteral(); - - // Then - expect(literal).not.toBeInstanceOf(RequestOrderImpl); - expect(literal).toBeInstanceOf(Array); - expect(literal[0]).toBe(apiPredicate1); - expect(literal[1]).toBe(apiPredicate2); - expect(literal[2]).toBe(apiPredicate3); - }); - }); - - describe('|toLiteralDeepClone|', () => { - it('should verify will create literal deep cloned from RequestPage object ', () => { - // Given - const requestOrder = RequestOrderImpl.of(apiPredicate3, null, apiPredicate1, undefined, apiPredicate2); - - // When - const literal = requestOrder.toLiteralDeepClone(); - - // Then - expect(literal).not.toBeInstanceOf(RequestOrderImpl); - expect(literal).toBeInstanceOf(Array); - expect(literal[0]).not.toBe(apiPredicate3); - expect(literal[1]).not.toBe(apiPredicate1); - expect(literal[2]).not.toBe(apiPredicate2); - expect(literal[0]).toEqual(apiPredicate3); - expect(literal[1]).toEqual(apiPredicate1); - expect(literal[2]).toEqual(apiPredicate2); - }); - }); - }); + let apiPredicate1: ApiPredicate; + let apiPredicate2: ApiPredicate; + let apiPredicate3: ApiPredicate; + + beforeEach(() => { + apiPredicate1 = { pattern: 'test*', property: 'config.team', sort: 'DESC' }; + apiPredicate2 = { pattern: 'mock*', property: 'config.job', sort: 'ASC' }; + apiPredicate3 = { + pattern: 'prod*', + property: 'config.status', + sort: 'DESC' + }; + }); + + it('should verify instance is created', () => { + // When + const instance = new RequestOrderImpl(); + + // Then + expect(instance).toBeDefined(); + expect(instance).toBeInstanceOf(RequestOrderImpl); + }); + + it('should verify correct value are assigned', () => { + // When + const instance = new RequestOrderImpl( + apiPredicate1, + apiPredicate2, + apiPredicate3 + ); + + // Then + expect(instance.criteria).toBeInstanceOf(Array); + expect(instance.criteria.length).toEqual(3); + expect(instance.criteria[0]).toBe(apiPredicate1); + expect(instance.criteria[1]).toBe(apiPredicate2); + expect(instance.criteria[2]).toBe(apiPredicate3); + }); + + it('should verify wont assign Nil parameters', () => { + // When + const instance = new RequestOrderImpl( + null, + apiPredicate2, + undefined, + apiPredicate1, + null, + apiPredicate3, + undefined + ); + + // Then + expect(instance.criteria.length).toEqual(3); + expect(instance.criteria[0]).toBe(apiPredicate2); + expect(instance.criteria[1]).toBe(apiPredicate1); + expect(instance.criteria[2]).toBe(apiPredicate3); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const instance = RequestOrderImpl.of( + apiPredicate1, + null, + apiPredicate2, + apiPredicate3 + ); + + // Then + expect(instance).toBeInstanceOf(RequestOrderImpl); + expect(instance.criteria.length).toEqual(3); + expect(instance.criteria[0]).toBe(apiPredicate1); + expect(instance.criteria[1]).toBe(apiPredicate2); + expect(instance.criteria[2]).toBe(apiPredicate3); + }); + }); + + describe('|empty|', () => { + it('should verify will create empty instance with no criteria', () => { + // When + const instance = RequestOrderImpl.empty(); + + // Then + expect(instance).toBeInstanceOf(RequestOrderImpl); + expect(instance.criteria).toEqual([]); + }); + }); + + describe('|fromLiteral|', () => { + it('should verify will create new instance from given literal Array of ApiPredicates', () => { + // Given + const literal: ApiPredicate[] = [ + apiPredicate1, + apiPredicate2, + apiPredicate3 + ]; + + // When + const instance = RequestOrderImpl.fromLiteral(literal); + + // Then + expect(instance).toBeInstanceOf(RequestOrderImpl); + expect(instance.criteria.length).toEqual(3); + expect(instance.criteria[0]).toBe(apiPredicate1); + expect(instance.criteria[1]).toBe(apiPredicate2); + expect(instance.criteria[2]).toBe(apiPredicate3); + }); + }); + }); + }); + + describe('Methods::', () => { + describe('|toLiteral|', () => { + it('should verify will create literal from RequestOrder object ', () => { + // Given + const requestOrder = RequestOrderImpl.of( + apiPredicate1, + null, + apiPredicate2, + undefined, + apiPredicate3 + ); + + // When + const literal = requestOrder.toLiteral(); + + // Then + expect(literal).not.toBeInstanceOf(RequestOrderImpl); + expect(literal).toBeInstanceOf(Array); + expect(literal[0]).toBe(apiPredicate1); + expect(literal[1]).toBe(apiPredicate2); + expect(literal[2]).toBe(apiPredicate3); + }); + }); + + describe('|toLiteralDeepClone|', () => { + it('should verify will create literal deep cloned from RequestPage object ', () => { + // Given + const requestOrder = RequestOrderImpl.of( + apiPredicate3, + null, + apiPredicate1, + undefined, + apiPredicate2 + ); + + // When + const literal = requestOrder.toLiteralDeepClone(); + + // Then + expect(literal).not.toBeInstanceOf(RequestOrderImpl); + expect(literal).toBeInstanceOf(Array); + expect(literal[0]).not.toBe(apiPredicate3); + expect(literal[1]).not.toBe(apiPredicate1); + expect(literal[2]).not.toBe(apiPredicate2); + expect(literal[0]).toEqual(apiPredicate3); + expect(literal[1]).toEqual(apiPredicate1); + expect(literal[2]).toEqual(apiPredicate2); + }); + }); + }); }); describe('RequestFilter', () => { - let apiPredicate1: ApiPredicate; - let apiPredicate2: ApiPredicate; - let apiPredicate3: ApiPredicate; - - beforeEach(() => { - apiPredicate1 = { pattern: 'test*', property: 'config.team', sort: 'DESC' }; - apiPredicate2 = { pattern: 'mock*', property: 'config.job', sort: 'ASC' }; - apiPredicate3 = { pattern: 'prod*', property: 'config.status', sort: 'DESC' }; - }); - - it('should verify instance is created', () => { - // When - const instance = new RequestFilterImpl(); - - // Then - expect(instance).toBeDefined(); - expect(instance).toBeInstanceOf(RequestFilterImpl); - }); - - it('should verify correct value are assigned', () => { - // When - const instance = new RequestFilterImpl(apiPredicate1, apiPredicate2, apiPredicate3); - - // Then - expect(instance.criteria).toBeInstanceOf(Array); - expect(instance.criteria.length).toEqual(3); - expect(instance.criteria[0]).toBe(apiPredicate1); - expect(instance.criteria[1]).toBe(apiPredicate2); - expect(instance.criteria[2]).toBe(apiPredicate3); - }); - - it('should verify wont assign Nil parameters', () => { - // When - const instance = new RequestFilterImpl(null, apiPredicate2, undefined, apiPredicate1, null, apiPredicate3, undefined); - - // Then - expect(instance.criteria.length).toEqual(3); - expect(instance.criteria[0]).toBe(apiPredicate2); - expect(instance.criteria[1]).toBe(apiPredicate1); - expect(instance.criteria[2]).toBe(apiPredicate3); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const instance = RequestFilterImpl.of(apiPredicate1, null, apiPredicate2, apiPredicate3); - - // Then - expect(instance).toBeInstanceOf(RequestFilterImpl); - expect(instance.criteria.length).toEqual(3); - expect(instance.criteria[0]).toBe(apiPredicate1); - expect(instance.criteria[1]).toBe(apiPredicate2); - expect(instance.criteria[2]).toBe(apiPredicate3); - }); - }); - - describe('|empty|', () => { - it('should verify will create empty instance with no criteria', () => { - // When - const instance = RequestFilterImpl.empty(); - - // Then - expect(instance).toBeInstanceOf(RequestFilterImpl); - expect(instance.criteria).toEqual([]); - }); - }); - - describe('|fromLiteral|', () => { - it('should verify will create new instance from given literal Array of ApiPredicates', () => { - // Given - const literal: ApiPredicate[] = [apiPredicate1, apiPredicate2, apiPredicate3]; - - // When - const instance = RequestFilterImpl.fromLiteral(literal); - - // Then - expect(instance).toBeInstanceOf(RequestFilterImpl); - expect(instance.criteria.length).toEqual(3); - expect(instance.criteria[0]).toBe(apiPredicate1); - expect(instance.criteria[1]).toBe(apiPredicate2); - expect(instance.criteria[2]).toBe(apiPredicate3); - }); - }); - }); - }); - - describe('Methods::', () => { - describe('|toLiteral|', () => { - it('should verify will create literal from RequestFilter object ', () => { - // Given - const requestFilter = RequestFilterImpl.of(apiPredicate1, null, apiPredicate2, undefined, apiPredicate3); - - // When - const literal = requestFilter.toLiteral(); - - // Then - expect(literal).not.toBeInstanceOf(RequestFilterImpl); - expect(literal).toBeInstanceOf(Array); - expect(literal[0]).toBe(apiPredicate1); - expect(literal[1]).toBe(apiPredicate2); - expect(literal[2]).toBe(apiPredicate3); - }); - }); - - describe('|toLiteralDeepClone|', () => { - it('should verify will create literal deep cloned from RequestFilter object ', () => { - // Given - const requestFilter = RequestFilterImpl.of(apiPredicate3, null, apiPredicate1, undefined, apiPredicate2); - - // When - const literal = requestFilter.toLiteralDeepClone(); - - // Then - expect(literal).not.toBeInstanceOf(RequestFilterImpl); - expect(literal).toBeInstanceOf(Array); - expect(literal[0]).not.toBe(apiPredicate3); - expect(literal[1]).not.toBe(apiPredicate1); - expect(literal[2]).not.toBe(apiPredicate2); - expect(literal[0]).toEqual(apiPredicate3); - expect(literal[1]).toEqual(apiPredicate1); - expect(literal[2]).toEqual(apiPredicate2); - }); - }); - }); + let apiPredicate1: ApiPredicate; + let apiPredicate2: ApiPredicate; + let apiPredicate3: ApiPredicate; + + beforeEach(() => { + apiPredicate1 = { pattern: 'test*', property: 'config.team', sort: 'DESC' }; + apiPredicate2 = { pattern: 'mock*', property: 'config.job', sort: 'ASC' }; + apiPredicate3 = { + pattern: 'prod*', + property: 'config.status', + sort: 'DESC' + }; + }); + + it('should verify instance is created', () => { + // When + const instance = new RequestFilterImpl(); + + // Then + expect(instance).toBeDefined(); + expect(instance).toBeInstanceOf(RequestFilterImpl); + }); + + it('should verify correct value are assigned', () => { + // When + const instance = new RequestFilterImpl( + apiPredicate1, + apiPredicate2, + apiPredicate3 + ); + + // Then + expect(instance.criteria).toBeInstanceOf(Array); + expect(instance.criteria.length).toEqual(3); + expect(instance.criteria[0]).toBe(apiPredicate1); + expect(instance.criteria[1]).toBe(apiPredicate2); + expect(instance.criteria[2]).toBe(apiPredicate3); + }); + + it('should verify wont assign Nil parameters', () => { + // When + const instance = new RequestFilterImpl( + null, + apiPredicate2, + undefined, + apiPredicate1, + null, + apiPredicate3, + undefined + ); + + // Then + expect(instance.criteria.length).toEqual(3); + expect(instance.criteria[0]).toBe(apiPredicate2); + expect(instance.criteria[1]).toBe(apiPredicate1); + expect(instance.criteria[2]).toBe(apiPredicate3); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const instance = RequestFilterImpl.of( + apiPredicate1, + null, + apiPredicate2, + apiPredicate3 + ); + + // Then + expect(instance).toBeInstanceOf(RequestFilterImpl); + expect(instance.criteria.length).toEqual(3); + expect(instance.criteria[0]).toBe(apiPredicate1); + expect(instance.criteria[1]).toBe(apiPredicate2); + expect(instance.criteria[2]).toBe(apiPredicate3); + }); + }); + + describe('|empty|', () => { + it('should verify will create empty instance with no criteria', () => { + // When + const instance = RequestFilterImpl.empty(); + + // Then + expect(instance).toBeInstanceOf(RequestFilterImpl); + expect(instance.criteria).toEqual([]); + }); + }); + + describe('|fromLiteral|', () => { + it('should verify will create new instance from given literal Array of ApiPredicates', () => { + // Given + const literal: ApiPredicate[] = [ + apiPredicate1, + apiPredicate2, + apiPredicate3 + ]; + + // When + const instance = RequestFilterImpl.fromLiteral(literal); + + // Then + expect(instance).toBeInstanceOf(RequestFilterImpl); + expect(instance.criteria.length).toEqual(3); + expect(instance.criteria[0]).toBe(apiPredicate1); + expect(instance.criteria[1]).toBe(apiPredicate2); + expect(instance.criteria[2]).toBe(apiPredicate3); + }); + }); + }); + }); + + describe('Methods::', () => { + describe('|toLiteral|', () => { + it('should verify will create literal from RequestFilter object ', () => { + // Given + const requestFilter = RequestFilterImpl.of( + apiPredicate1, + null, + apiPredicate2, + undefined, + apiPredicate3 + ); + + // When + const literal = requestFilter.toLiteral(); + + // Then + expect(literal).not.toBeInstanceOf(RequestFilterImpl); + expect(literal).toBeInstanceOf(Array); + expect(literal[0]).toBe(apiPredicate1); + expect(literal[1]).toBe(apiPredicate2); + expect(literal[2]).toBe(apiPredicate3); + }); + }); + + describe('|toLiteralDeepClone|', () => { + it('should verify will create literal deep cloned from RequestFilter object ', () => { + // Given + const requestFilter = RequestFilterImpl.of( + apiPredicate3, + null, + apiPredicate1, + undefined, + apiPredicate2 + ); + + // When + const literal = requestFilter.toLiteralDeepClone(); + + // Then + expect(literal).not.toBeInstanceOf(RequestFilterImpl); + expect(literal).toBeInstanceOf(Array); + expect(literal[0]).not.toBe(apiPredicate3); + expect(literal[1]).not.toBe(apiPredicate1); + expect(literal[2]).not.toBe(apiPredicate2); + expect(literal[0]).toEqual(apiPredicate3); + expect(literal[1]).toEqual(apiPredicate1); + expect(literal[2]).toEqual(apiPredicate2); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/http/request/request.model.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/http/request/request.model.ts index 219ec59109..937592ee67 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/http/request/request.model.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/http/request/request.model.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -13,8 +11,8 @@ import { CollectionsUtil } from '../../../utils'; export type LiteralRequestPage = { pageNumber: number; pageSize: number }; export interface RequestPage extends Literal { - readonly page: number; - readonly size: number; + readonly page: number; + readonly size: number; } /** @@ -23,57 +21,60 @@ export interface RequestPage extends Literal { * */ export class RequestPageImpl implements RequestPage { - public readonly page: number; - public readonly size: number; - - constructor(page: number, size: number) { - this.page = page ?? 1; - this.size = size ?? 25; - } - - /** - * ** Factory method. - */ - static of(page: number, size: number): RequestPageImpl { - return new RequestPageImpl(page, size); - } - - /** - * ** Factory method for empty RequestPageDTO. - */ - static empty(): RequestPageImpl { - return new RequestPageImpl(null, null); - } - - /** - * ** Creates DTO from literal. - */ - static fromLiteral(literalDTO: { pageNumber: number; pageSize: number }): RequestPageImpl { - return RequestPageImpl.of(literalDTO.pageNumber, literalDTO.pageSize); - } - - /** - * @inheritDoc - */ - toLiteral(): LiteralRequestPage { - return { - pageNumber: this.page ?? 1, - pageSize: this.size ?? 25 - }; - } - - /** - * @inheritDoc - */ - toLiteralDeepClone(): LiteralRequestPage { - return this.toLiteral(); - } + public readonly page: number; + public readonly size: number; + + constructor(page: number, size: number) { + this.page = page ?? 1; + this.size = size ?? 25; + } + + /** + * ** Factory method. + */ + static of(page: number, size: number): RequestPageImpl { + return new RequestPageImpl(page, size); + } + + /** + * ** Factory method for empty RequestPageDTO. + */ + static empty(): RequestPageImpl { + return new RequestPageImpl(null, null); + } + + /** + * ** Creates DTO from literal. + */ + static fromLiteral(literalDTO: { + pageNumber: number; + pageSize: number; + }): RequestPageImpl { + return RequestPageImpl.of(literalDTO.pageNumber, literalDTO.pageSize); + } + + /** + * @inheritDoc + */ + toLiteral(): LiteralRequestPage { + return { + pageNumber: this.page ?? 1, + pageSize: this.size ?? 25 + }; + } + + /** + * @inheritDoc + */ + toLiteralDeepClone(): LiteralRequestPage { + return this.toLiteral(); + } } // Order DTO export interface RequestOrder extends Literal { - readonly criteria: ApiPredicate[]; + readonly criteria: ApiPredicate[]; } /** @@ -82,54 +83,53 @@ export interface RequestOrder extends Literal { * */ export class RequestOrderImpl implements RequestOrder { - public readonly criteria: ApiPredicate[]; - - constructor(...criteria: ApiPredicate[]) { - // eslint-disable-next-line @typescript-eslint/unbound-method - this.criteria = [...criteria.filter(CollectionsUtil.isDefined)]; - } - - /** - * ** Factory method. - */ - static of(...criteria: ApiPredicate[]): RequestOrderImpl { - return new RequestOrderImpl(...criteria); - } - - /** - * ** Factory method for empty RequestOrderDTO. - */ - static empty(): RequestOrderImpl { - return new RequestOrderImpl(); - } - - /** - * ** Creates DTO from literal. - */ - static fromLiteral(literalCriteria: Array): RequestOrderImpl { - return RequestOrderImpl.of(...literalCriteria); - } - - /** - * @inheritDoc - */ - toLiteral(): LiteralApiPredicates { - return [...this.criteria]; - } - - /** - * @inheritDoc - */ - toLiteralDeepClone(): LiteralApiPredicates { - return this.criteria - .map((c) => ({ ...c })); - } + public readonly criteria: ApiPredicate[]; + + constructor(...criteria: ApiPredicate[]) { + // eslint-disable-next-line @typescript-eslint/unbound-method + this.criteria = [...criteria.filter(CollectionsUtil.isDefined)]; + } + + /** + * ** Factory method. + */ + static of(...criteria: ApiPredicate[]): RequestOrderImpl { + return new RequestOrderImpl(...criteria); + } + + /** + * ** Factory method for empty RequestOrderDTO. + */ + static empty(): RequestOrderImpl { + return new RequestOrderImpl(); + } + + /** + * ** Creates DTO from literal. + */ + static fromLiteral(literalCriteria: Array): RequestOrderImpl { + return RequestOrderImpl.of(...literalCriteria); + } + + /** + * @inheritDoc + */ + toLiteral(): LiteralApiPredicates { + return [...this.criteria]; + } + + /** + * @inheritDoc + */ + toLiteralDeepClone(): LiteralApiPredicates { + return this.criteria.map((c) => ({ ...c })); + } } // Filter DTO export interface RequestFilter extends Literal { - readonly criteria: ApiPredicate[]; + readonly criteria: ApiPredicate[]; } /** @@ -138,48 +138,47 @@ export interface RequestFilter extends Literal { * */ export class RequestFilterImpl implements RequestFilter { - public readonly criteria: ApiPredicate[]; - - constructor(...criteria: ApiPredicate[]) { - // eslint-disable-next-line @typescript-eslint/unbound-method - this.criteria = [...criteria.filter(CollectionsUtil.isDefined)]; - } - - /** - * ** Factory method. - */ - static of(...criteria: ApiPredicate[]): RequestFilterImpl { - return new RequestFilterImpl(...criteria); - } - - /** - * ** Factory method for empty RequestFilterDTO. - */ - static empty(): RequestFilterImpl { - return new RequestFilterImpl(); - } - - /** - * ** Creates DTO from literal. - */ - static fromLiteral(literalCriteria: Array): RequestFilterImpl { - return RequestFilterImpl.of(...literalCriteria); - } - - /** - * @inheritDoc - */ - toLiteral(): LiteralApiPredicates { - return [...this.criteria]; - } - - /** - * @inheritDoc - */ - toLiteralDeepClone(): LiteralApiPredicates { - return this.criteria - .map((c) => ({ ...c })); - } + public readonly criteria: ApiPredicate[]; + + constructor(...criteria: ApiPredicate[]) { + // eslint-disable-next-line @typescript-eslint/unbound-method + this.criteria = [...criteria.filter(CollectionsUtil.isDefined)]; + } + + /** + * ** Factory method. + */ + static of(...criteria: ApiPredicate[]): RequestFilterImpl { + return new RequestFilterImpl(...criteria); + } + + /** + * ** Factory method for empty RequestFilterDTO. + */ + static empty(): RequestFilterImpl { + return new RequestFilterImpl(); + } + + /** + * ** Creates DTO from literal. + */ + static fromLiteral(literalCriteria: Array): RequestFilterImpl { + return RequestFilterImpl.of(...literalCriteria); + } + + /** + * @inheritDoc + */ + toLiteral(): LiteralApiPredicates { + return [...this.criteria]; + } + + /** + * @inheritDoc + */ + toLiteralDeepClone(): LiteralApiPredicates { + return this.criteria.map((c) => ({ ...c })); + } } // Generic Predicate for API @@ -191,7 +190,7 @@ export const DESC = 'DESC'; export type DirectionType = typeof ASC | typeof DESC; export interface ApiPredicate { - readonly property: string; - readonly pattern: string; - readonly sort: DirectionType; + readonly property: string; + readonly pattern: string; + readonly sort: DirectionType; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/index.ts index 8698258268..c0891268c7 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/comparable.interface.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/comparable.interface.ts index 147d9d9e97..ac3395048d 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/comparable.interface.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/comparable.interface.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -11,62 +9,62 @@ * */ export interface Comparable { - /** - * ** Value stored in Comparable for Comparison. - */ - readonly value: T; + /** + * ** Value stored in Comparable for Comparison. + */ + readonly value: T; - /** - * ** Compares stored data with the provided one. - * - * -1 if the stored value is less than the provided value. - * 0 if both values are equal. - * 1 if stored value is bigger than the provided value. - */ - compare(comparable: Comparable): number; + /** + * ** Compares stored data with the provided one. + * + * -1 if the stored value is less than the provided value. + * 0 if both values are equal. + * 1 if stored value is bigger than the provided value. + */ + compare(comparable: Comparable): number; - /** - * ** Verify if stored value is null or undefined and returns true. - */ - isNil(): boolean; + /** + * ** Verify if stored value is null or undefined and returns true. + */ + isNil(): boolean; - /** - * ** Verify if stored value is not null and not undefined. - */ - notNil(): boolean; + /** + * ** Verify if stored value is not null and not undefined. + */ + notNil(): boolean; - /** - * ** Compare if stored value is similar to provided value. - */ - like(comparable: Comparable): boolean; + /** + * ** Compare if stored value is similar to provided value. + */ + like(comparable: Comparable): boolean; - /** - * ** Verify if stored value is equals with provided value. - */ - equal(comparable: Comparable): boolean; + /** + * ** Verify if stored value is equals with provided value. + */ + equal(comparable: Comparable): boolean; - /** - * ** Verify if stored value is different than provided value. - */ - notEqual(comparable: Comparable): boolean; + /** + * ** Verify if stored value is different than provided value. + */ + notEqual(comparable: Comparable): boolean; - /** - * ** Verify if stored value is less than provided value. - */ - lessThan(comparable: Comparable): boolean; + /** + * ** Verify if stored value is less than provided value. + */ + lessThan(comparable: Comparable): boolean; - /** - * ** Verify if stored value is less or equal than provided value. - */ - lessThanInclusive(comparable: Comparable): boolean; + /** + * ** Verify if stored value is less or equal than provided value. + */ + lessThanInclusive(comparable: Comparable): boolean; - /** - * ** Verify if stored value is greater than provided value. - */ - greaterThan(comparable: Comparable): boolean; + /** + * ** Verify if stored value is greater than provided value. + */ + greaterThan(comparable: Comparable): boolean; - /** - * ** Verify if stored value is greater or equal than provided value. - */ - greaterThanInclusive(comparable: Comparable): boolean; + /** + * ** Verify if stored value is greater or equal than provided value. + */ + greaterThanInclusive(comparable: Comparable): boolean; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/copy.interface.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/copy.interface.ts index ad29bc74cc..afd10f5319 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/copy.interface.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/copy.interface.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -13,9 +11,9 @@ * */ export interface Copy> { - /** - * ** Make shallow copy of current Object. - * - Optionally provide partial Object to merge on top of the current one. - */ - copy(partial?: Partial); + /** + * ** Make shallow copy of current Object. + * - Optionally provide partial Object to merge on top of the current one. + */ + copy(partial?: Partial); } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/expression.interface.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/expression.interface.ts index 492aca817c..9103671ce1 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/expression.interface.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/expression.interface.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -14,13 +12,13 @@ import { Predicate } from './predicate.interface'; * */ export interface Expression { - /** - * ** Predicates Array. - */ - readonly predicates: T[]; + /** + * ** Predicates Array. + */ + readonly predicates: T[]; - /** - * ** Evaluate Expression to boolean (true or false). - */ - evaluate(comparable?: Comparable): boolean; + /** + * ** Evaluate Expression to boolean (true or false). + */ + evaluate(comparable?: Comparable): boolean; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/index.ts index 7ffff61d6d..d2fbbeaf7a 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/literal.interface.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/literal.interface.ts index d81fe5c61d..17d48e6135 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/literal.interface.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/literal.interface.ts @@ -1,13 +1,19 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 */ -import { PrimitivesNil, PrimitivesNilArrays, PrimitivesNilObject } from '../../utils'; +import { + PrimitivesNil, + PrimitivesNilArrays, + PrimitivesNilObject +} from '../../utils'; -type SerializedType = PrimitivesNil | PrimitivesNilArrays | PrimitivesNilObject | unknown; +type SerializedType = + | PrimitivesNil + | PrimitivesNilArrays + | PrimitivesNilObject + | unknown; /** * ** This interface gives boundaries for Class instances to get converted into Literals. @@ -15,16 +21,16 @@ type SerializedType = PrimitivesNil | PrimitivesNilArrays | PrimitivesNilObject * */ export interface Literal { - /** - * ** Implements this method and return data you want to be serialized into Literals. - */ - toLiteral(): T; + /** + * ** Implements this method and return data you want to be serialized into Literals. + */ + toLiteral(): T; - /** - * ** Implements this method and return data you want to be serialized into Literals. - *

    - * - Data should be deep clone before return, to comply with immutability. - *

    - */ - toLiteralDeepClone(): T; + /** + * ** Implements this method and return data you want to be serialized into Literals. + *

    + * - Data should be deep clone before return, to comply with immutability. + *

    + */ + toLiteralDeepClone(): T; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/predicate.interface.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/predicate.interface.ts index 8531fa0644..19b3fee192 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/predicate.interface.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/predicate.interface.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -12,14 +10,17 @@ import { Comparable } from './comparable.interface'; * * */ -export interface Predicate { - /** - * ** Stored comparable that have to be compared with provided comparable. - */ - readonly comparable: T; +export interface Predicate< + T extends Comparable = Comparable, + C extends Comparable = T +> { + /** + * ** Stored comparable that have to be compared with provided comparable. + */ + readonly comparable: T; - /** - * ** Evaluate Predicate to boolean (true or false). - */ - evaluate(comparable: C): boolean; + /** + * ** Evaluate Predicate to boolean (true or false). + */ + evaluate(comparable: C): boolean; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/public-api.ts index ba142389bd..484b60ff3c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/replacer.interface.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/replacer.interface.ts index 462712e1c7..8c15712781 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/replacer.interface.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/replacer.interface.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -11,6 +9,6 @@ * */ export interface Replacer { - searchValue: T; - replaceValue: T; + searchValue: T; + replaceValue: T; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/serializable.interface.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/serializable.interface.ts index 452af94619..b72f753d52 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/serializable.interface.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/interfaces/serializable.interface.ts @@ -1,13 +1,19 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 */ -import { PrimitivesNil, PrimitivesNilArrays, PrimitivesNilObject } from '../../utils'; +import { + PrimitivesNil, + PrimitivesNilArrays, + PrimitivesNilObject +} from '../../utils'; -type SerializedType = PrimitivesNil | PrimitivesNilArrays | PrimitivesNilObject | unknown; +type SerializedType = + | PrimitivesNil + | PrimitivesNilArrays + | PrimitivesNilObject + | unknown; /** * ** This interface gives boundaries for Objects that we want to be serializable for JSON. @@ -15,8 +21,8 @@ type SerializedType = PrimitivesNil | PrimitivesNilArrays | PrimitivesNilObject * */ export interface Serializable { - /** - * ** Implements this method and return data you want to be serialized when JSON.stringify(...) is executed. - */ - toJSON(): T; + /** + * ** Implements this method and return data you want to be serialized when JSON.stringify(...) is executed. + */ + toJSON(): T; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/object/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/object/index.ts index 787b0abb40..bab84f3c08 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/object/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/object/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/object/model/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/object/model/index.ts index dcc4045eb1..d151505b93 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/object/model/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/object/model/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/object/model/taurus-object.model.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/object/model/taurus-object.model.spec.ts index 3824703266..4ea2efcb9f 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/object/model/taurus-object.model.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/object/model/taurus-object.model.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -14,145 +12,178 @@ import { CallFake } from '../../../unit-testing'; import { TaurusObject } from './taurus-object.model'; describe('TaurusObject', () => { - it('should verify instance is created', () => { - // When - const instance = new TaurusObject(); - - // Then - expect(instance).toBeDefined(); - expect(instance).toBeInstanceOf(TaurusObject); - }); - - describe('Properties::', () => { - describe('|subscriptions|', () => { - it('should verify default value is empty Array', () => { - // Given - const instance = new TaurusObject(); - - // Then - expect(instance['subscriptions']).toEqual([]); - }); - }); - }); - - describe('Methods::', () => { - describe('|dispose|', () => { - it('should verify will clean all subscriptions', () => { - // Given - const subscription1 = jasmine.createSpyObj('subscription1', ['unsubscribe']); - const subscription2 = jasmine.createSpyObj('subscription2', ['unsubscribe']); - const subscription3 = jasmine.createSpyObj('subscription3', ['unsubscribe']); - const instance = new TaurusObject(); - instance['subscriptions'].push(subscription1, null, subscription2, undefined, subscription3); - - // When - instance.dispose(); - - // Then - expect(subscription1.unsubscribe).toHaveBeenCalled(); - expect(subscription2.unsubscribe).toHaveBeenCalled(); - expect(subscription3.unsubscribe).toHaveBeenCalled(); - }); - }); - - describe('|removeSubscriptionRef|', () => { - let subscription1: Subscription; - let subscription2: Subscription; - let subscription3: Subscription; - let instance: TaurusObject; - - beforeEach(() => { - subscription1 = new Subscription(); - subscription2 = new Subscription(); - subscription3 = new Subscription(); - instance = new TaurusObject(); - }); - - it('should verify will remove provided subscription from buffer', () => { - // Given - instance['subscriptions'].push(subscription1, null, undefined, subscription2, subscription3); - const unsubscribeSpy = spyOn(subscription2, 'unsubscribe').and.callThrough(); - - // Then 1 - expect(instance['subscriptions'].length).toEqual(5); - - // When - // @ts-ignore - const value = instance.removeSubscriptionRef(subscription2); - - // Then 2 - expect(value).toBeTrue(); - expect(unsubscribeSpy).toHaveBeenCalled(); - expect(instance['subscriptions'].length).toEqual(4); - }); - - it('should verify will remove provided subscription from buffer and unsubscribe error will be logged in console', () => { - // Given - instance['subscriptions'].push(subscription1); - const error = new Error('Error'); - const unsubscribeSpy = spyOn(subscription1, 'unsubscribe').and.throwError(error); - const consoleErrorSpy = spyOn(console, 'error').and.callFake(CallFake); - - // When - // @ts-ignore - const value = instance.removeSubscriptionRef(subscription1); - - // Then 2 - expect(value).toBeFalse(); - expect(unsubscribeSpy).toHaveBeenCalled(); - expect(consoleErrorSpy).toHaveBeenCalledWith(`Taurus Object failed to unsubscribe from rxjs stream!`, error); - }); - - it(`should verify will unsubscribe even reference doesn't exist in buffer`, () => { - // Given - instance['subscriptions'].push(subscription2, null, undefined); - const unsubscribeSpy = spyOn(subscription1, 'unsubscribe').and.callThrough(); - - // Then 1 - expect(instance['subscriptions'].length).toEqual(3); - - // When - // @ts-ignore - const value = instance.removeSubscriptionRef(subscription1); - - // Then 2 - expect(value).toBeTrue(); - expect(unsubscribeSpy).toHaveBeenCalled(); - expect(instance['subscriptions'].length).toEqual(3); - }); - - it(`should verify will return false when provided reference is not Subscription instance`, () => { - // Given - instance['subscriptions'].push(subscription1, subscription2); - - // Then 1 - expect(instance['subscriptions'].length).toEqual(2); - - // When - // @ts-ignore - const value1 = instance.removeSubscriptionRef(null); - // @ts-ignore - const value2 = instance.removeSubscriptionRef(undefined); - - // Then 2 - expect(value1).toBeFalse(); - expect(value2).toBeFalse(); - expect(instance['subscriptions'].length).toEqual(2); - }); - }); - - describe('|ngOnDestroy|', () => { - it('should verify will invoke correct method', () => { - // Given - const instance = new TaurusObject(); - const disposeSpy = spyOn(instance, 'dispose').and.callFake(CallFake); - - // When - instance.ngOnDestroy(); - - // Then - expect(disposeSpy).toHaveBeenCalled(); - }); - }); - }); + it('should verify instance is created', () => { + // When + const instance = new TaurusObject(); + + // Then + expect(instance).toBeDefined(); + expect(instance).toBeInstanceOf(TaurusObject); + }); + + describe('Properties::', () => { + describe('|subscriptions|', () => { + it('should verify default value is empty Array', () => { + // Given + const instance = new TaurusObject(); + + // Then + expect(instance['subscriptions']).toEqual([]); + }); + }); + }); + + describe('Methods::', () => { + describe('|dispose|', () => { + it('should verify will clean all subscriptions', () => { + // Given + const subscription1 = jasmine.createSpyObj( + 'subscription1', + ['unsubscribe'] + ); + const subscription2 = jasmine.createSpyObj( + 'subscription2', + ['unsubscribe'] + ); + const subscription3 = jasmine.createSpyObj( + 'subscription3', + ['unsubscribe'] + ); + const instance = new TaurusObject(); + instance['subscriptions'].push( + subscription1, + null, + subscription2, + undefined, + subscription3 + ); + + // When + instance.dispose(); + + // Then + expect(subscription1.unsubscribe).toHaveBeenCalled(); + expect(subscription2.unsubscribe).toHaveBeenCalled(); + expect(subscription3.unsubscribe).toHaveBeenCalled(); + }); + }); + + describe('|removeSubscriptionRef|', () => { + let subscription1: Subscription; + let subscription2: Subscription; + let subscription3: Subscription; + let instance: TaurusObject; + + beforeEach(() => { + subscription1 = new Subscription(); + subscription2 = new Subscription(); + subscription3 = new Subscription(); + instance = new TaurusObject(); + }); + + it('should verify will remove provided subscription from buffer', () => { + // Given + instance['subscriptions'].push( + subscription1, + null, + undefined, + subscription2, + subscription3 + ); + const unsubscribeSpy = spyOn( + subscription2, + 'unsubscribe' + ).and.callThrough(); + + // Then 1 + expect(instance['subscriptions'].length).toEqual(5); + + // When + // @ts-ignore + const value = instance.removeSubscriptionRef(subscription2); + + // Then 2 + expect(value).toBeTrue(); + expect(unsubscribeSpy).toHaveBeenCalled(); + expect(instance['subscriptions'].length).toEqual(4); + }); + + it('should verify will remove provided subscription from buffer and unsubscribe error will be logged in console', () => { + // Given + instance['subscriptions'].push(subscription1); + const error = new Error('Error'); + const unsubscribeSpy = spyOn( + subscription1, + 'unsubscribe' + ).and.throwError(error); + const consoleErrorSpy = spyOn(console, 'error').and.callFake(CallFake); + + // When + // @ts-ignore + const value = instance.removeSubscriptionRef(subscription1); + + // Then 2 + expect(value).toBeFalse(); + expect(unsubscribeSpy).toHaveBeenCalled(); + expect(consoleErrorSpy).toHaveBeenCalledWith( + `Taurus Object failed to unsubscribe from rxjs stream!`, + error + ); + }); + + it(`should verify will unsubscribe even reference doesn't exist in buffer`, () => { + // Given + instance['subscriptions'].push(subscription2, null, undefined); + const unsubscribeSpy = spyOn( + subscription1, + 'unsubscribe' + ).and.callThrough(); + + // Then 1 + expect(instance['subscriptions'].length).toEqual(3); + + // When + // @ts-ignore + const value = instance.removeSubscriptionRef(subscription1); + + // Then 2 + expect(value).toBeTrue(); + expect(unsubscribeSpy).toHaveBeenCalled(); + expect(instance['subscriptions'].length).toEqual(3); + }); + + it(`should verify will return false when provided reference is not Subscription instance`, () => { + // Given + instance['subscriptions'].push(subscription1, subscription2); + + // Then 1 + expect(instance['subscriptions'].length).toEqual(2); + + // When + // @ts-ignore + const value1 = instance.removeSubscriptionRef(null); + // @ts-ignore + const value2 = instance.removeSubscriptionRef(undefined); + + // Then 2 + expect(value1).toBeFalse(); + expect(value2).toBeFalse(); + expect(instance['subscriptions'].length).toEqual(2); + }); + }); + + describe('|ngOnDestroy|', () => { + it('should verify will invoke correct method', () => { + // Given + const instance = new TaurusObject(); + const disposeSpy = spyOn(instance, 'dispose').and.callFake(CallFake); + + // When + instance.ngOnDestroy(); + + // Then + expect(disposeSpy).toHaveBeenCalled(); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/object/model/taurus-object.model.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/object/model/taurus-object.model.ts index 00ebef9bd5..af48625f66 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/object/model/taurus-object.model.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/object/model/taurus-object.model.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -20,73 +18,74 @@ import { CollectionsUtil } from '../../../utils'; @Directive() // eslint-disable-next-line @angular-eslint/directive-class-suffix export class TaurusObject implements OnDestroy { - - /** - * ** Store for Subscriptions references. - */ - protected subscriptions: Subscription[]; - - /** - * ** Constructor. - */ - constructor() { - this.subscriptions = []; - } - - /** - * ** Methods that will dispose Object. - * - Clean all Subscriptions. - */ - dispose(): void { - this.cleanSubscriptions(); - } - - /** - * @inheritDoc - */ - ngOnDestroy() { - this.dispose(); - } - - /** - * ** Clean all Subscriptions. - */ - protected cleanSubscriptions(): void { - // unsubscribe all valid subscriptions - this.subscriptions - // eslint-disable-next-line @typescript-eslint/unbound-method - .filter(CollectionsUtil.isDefined) - // eslint-disable-next-line @typescript-eslint/unbound-method - .forEach(TaurusObject._unsubscribeFromStream); - } - - protected removeSubscriptionRef(subscriptionRef: Subscription): boolean { - const subscriptionIndex = this.subscriptions.findIndex((s) => s === subscriptionRef); - - if (subscriptionIndex === -1) { - if (subscriptionRef instanceof Subscription) { - TaurusObject._unsubscribeFromStream(subscriptionRef); - - return true; - } - - return false; - } - - const removedSubscription = this.subscriptions.splice(subscriptionIndex, 1); - - return TaurusObject._unsubscribeFromStream(removedSubscription[0]); - } - - private static _unsubscribeFromStream(s: Subscription): boolean { - try { - s.unsubscribe(); - - return true; - } catch (e) { - console.error(`Taurus Object failed to unsubscribe from rxjs stream!`, e); - - return false; - } - } + /** + * ** Store for Subscriptions references. + */ + protected subscriptions: Subscription[]; + + /** + * ** Constructor. + */ + constructor() { + this.subscriptions = []; + } + + /** + * ** Methods that will dispose Object. + * - Clean all Subscriptions. + */ + dispose(): void { + this.cleanSubscriptions(); + } + + /** + * @inheritDoc + */ + ngOnDestroy() { + this.dispose(); + } + + /** + * ** Clean all Subscriptions. + */ + protected cleanSubscriptions(): void { + // unsubscribe all valid subscriptions + this.subscriptions + // eslint-disable-next-line @typescript-eslint/unbound-method + .filter(CollectionsUtil.isDefined) + // eslint-disable-next-line @typescript-eslint/unbound-method + .forEach(TaurusObject._unsubscribeFromStream); + } + + protected removeSubscriptionRef(subscriptionRef: Subscription): boolean { + const subscriptionIndex = this.subscriptions.findIndex( + (s) => s === subscriptionRef + ); + + if (subscriptionIndex === -1) { + if (subscriptionRef instanceof Subscription) { + TaurusObject._unsubscribeFromStream(subscriptionRef); + + return true; + } + + return false; + } + + const removedSubscription = this.subscriptions.splice(subscriptionIndex, 1); + + return TaurusObject._unsubscribeFromStream(removedSubscription[0]); + } + + private static _unsubscribeFromStream(s: Subscription): boolean { + try { + s.unsubscribe(); + + return true; + } catch (e) { + console.error(`Taurus Object failed to unsubscribe from rxjs stream!`, e); + + return false; + } + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/object/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/object/public-api.ts index ba142389bd..484b60ff3c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/object/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/object/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/comparable/comparable.impl.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/comparable/comparable.impl.spec.ts index 4ded4754d3..81e9a21ac6 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/comparable/comparable.impl.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/comparable/comparable.impl.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -10,296 +8,296 @@ import { Comparable } from '../../interfaces'; import { ComparableImpl } from './comparable.impl'; class ComparableStub implements Comparable { - public readonly value: unknown; + public readonly value: unknown; - constructor(value: unknown) { - this.value = value; - } + constructor(value: unknown) { + this.value = value; + } - compare(_comparable: Comparable): number { - return 0; - } + compare(_comparable: Comparable): number { + return 0; + } - equal(_comparable: Comparable): boolean { - return true; - } + equal(_comparable: Comparable): boolean { + return true; + } - like(_comparable: Comparable): boolean { - return true; - } + like(_comparable: Comparable): boolean { + return true; + } - notEqual(_comparable: Comparable): boolean { - return false; - } + notEqual(_comparable: Comparable): boolean { + return false; + } - isNil(): boolean { - return false; - } + isNil(): boolean { + return false; + } - notNil(): boolean { - return true; - } + notNil(): boolean { + return true; + } - greaterThan(_comparable: Comparable): boolean { - return false; - } + greaterThan(_comparable: Comparable): boolean { + return false; + } - greaterThanInclusive(_comparable: Comparable): boolean { - return false; - } + greaterThanInclusive(_comparable: Comparable): boolean { + return false; + } - lessThan(_comparable: Comparable): boolean { - return false; - } + lessThan(_comparable: Comparable): boolean { + return false; + } - lessThanInclusive(_comparable: Comparable): boolean { - return false; - } + lessThanInclusive(_comparable: Comparable): boolean { + return false; + } } describe('ComparableImpl', () => { - it('should verify instance is created', () => { - // Given - const value = 'VDK'; - - // When - const instance = new ComparableImpl(value); - - // Then - expect(instance).toBeDefined(); - }); - - it('should verify value is correctly assigned', () => { - // Given - const value = 'VDK'; - - // When - const instance = new ComparableImpl(value); - - // Then - expect(instance.value).toBe(value); - }); - - describe('Statics::', () => { - describe('Methods::()', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // Given - const value = 'VDK'; - - // When - const instance = ComparableImpl.of(value); - - // Then - expect(instance).toBeDefined(); - expect(instance).toBeInstanceOf(ComparableImpl); - }); - }); - }); - }); - - describe('Methods::()', () => { - let v1: unknown; - let v2: unknown; - let v3: unknown; - let v4: unknown; - let v5: unknown; - let v6: unknown; - let v7: unknown; - let v8: unknown; - - let c1: ComparableImpl; - let c2: ComparableImpl; - let c3: ComparableImpl; - let c4: ComparableImpl; - let c5: ComparableImpl; - let c6: ComparableImpl; - let c7: ComparableImpl; - let c8: ComparableImpl; - - beforeEach(() => { - v1 = null; - v2 = undefined; - v3 = 'Saggitarius'; - v4 = 10; - v5 = 'Saggitarius'; - v6 = 11; - v7 = 10; - v8 = 'Taurus'; - - c1 = ComparableImpl.of(v1); - c2 = ComparableImpl.of(v2); - c3 = ComparableImpl.of(v3); - c4 = ComparableImpl.of(v4); - c5 = ComparableImpl.of(v5); - c6 = ComparableImpl.of(v6); - c7 = ComparableImpl.of(v7); - c8 = ComparableImpl.of(v8); - }); - - describe('|compare|', () => { - it('should verify will return 0 for equal', () => { - // When - const comparison = c3.compare(c5); - - // Then - expect(comparison).toEqual(0); - }); - - it('should verify will return 1 for greaterThan', () => { - // When - const comparison = c8.compare(c5); - - // Then - expect(comparison).toEqual(1); - }); - - it('should verify will return -1 for lessThan', () => { - // When - const comparison = c5.compare(c8); - - // Then - expect(comparison).toEqual(-1); - }); - - it('should verify will return -1 given comparable is not instance of the current Constructor', () => { - // Given - const c10 = new ComparableStub(v2); - - // When - const comparison = c5.compare(c10); - - // Then - expect(comparison).toEqual(-1); - }); - }); - - describe('|isNil|', () => { - it('should verify will return true if value is null or undefined, otherwise false', () => { - // When - const r1 = c1.isNil(); - const r2 = c2.isNil(); - const r3 = c3.isNil(); - const r4 = c4.isNil(); - - // Then - expect(r1).toBeTrue(); - expect(r2).toBeTrue(); - expect(r3).toBeFalse(); - expect(r4).toBeFalse(); - }); - }); - - describe('|notNil|', () => { - it('should verify will return false if value is null or undefined, otherwise true', () => { - // When - const r1 = c1.notNil(); - const r2 = c2.notNil(); - const r3 = c3.notNil(); - const r4 = c4.notNil(); - - // Then - expect(r1).toBeFalse(); - expect(r2).toBeFalse(); - expect(r3).toBeTrue(); - expect(r4).toBeTrue(); - }); - }); - - describe('|like|', () => { - it('should verify will return true if values are similar, otherwise false', () => { - // When - const r1 = c3.like(c5); - const r2 = c3.like(c8); - - // Then - expect(r1).toBeTrue(); - expect(r2).toBeFalse(); - }); - }); - - describe('|equal|', () => { - it('should verify will return true if values are equal, otherwise false', () => { - // When - const r1 = c3.equal(c5); - const r2 = c3.equal(c8); - const r3 = c4.equal(c7); - const r4 = c4.equal(c6); - - // Then - expect(r1).toBeTrue(); - expect(r2).toBeFalse(); - expect(r3).toBeTrue(); - expect(r4).toBeFalse(); - }); - }); - - describe('|notEqual|', () => { - it('should verify will return true if values are not equal, otherwise false', () => { - // When - const r1 = c3.notEqual(c5); - const r2 = c3.notEqual(c8); - const r3 = c4.notEqual(c7); - const r4 = c4.notEqual(c6); - - // Then - expect(r1).toBeFalse(); - expect(r2).toBeTrue(); - expect(r3).toBeFalse(); - expect(r4).toBeTrue(); - }); - }); - - describe('|lessThan|', () => { - it('should verify will return true if value is less than provided, otherwise false', () => { - // When - const r1 = c4.lessThan(c6); - const r2 = c6.lessThan(c4); - - // Then - expect(r1).toBeTrue(); - expect(r2).toBeFalse(); - }); - }); - - describe('|lessThanInclusive|', () => { - it('should verify will return true if value is less than or equal to provided, otherwise false', () => { - // When - const r1 = c4.lessThanInclusive(c6); - const r2 = c6.lessThanInclusive(c4); - const r3 = c4.lessThanInclusive(c7); - - // Then - expect(r1).toBeTrue(); - expect(r2).toBeFalse(); - expect(r3).toBeTrue(); - }); - }); - - describe('|greaterThan|', () => { - it('should verify will return true if value is greater than provided, otherwise false', () => { - // When - const r1 = c6.greaterThan(c4); - const r2 = c4.greaterThan(c6); - - // Then - expect(r1).toBeTrue(); - expect(r2).toBeFalse(); - }); - }); - - describe('|greaterThanInclusive|', () => { - it('should verify will return true if value is greater than or equal to provided, otherwise false', () => { - // When - const r1 = c6.greaterThanInclusive(c4); - const r2 = c4.greaterThanInclusive(c6); - const r3 = c7.greaterThanInclusive(c4); - - // Then - expect(r1).toBeTrue(); - expect(r2).toBeFalse(); - expect(r3).toBeTrue(); - }); - }); - }); + it('should verify instance is created', () => { + // Given + const value = 'VDK'; + + // When + const instance = new ComparableImpl(value); + + // Then + expect(instance).toBeDefined(); + }); + + it('should verify value is correctly assigned', () => { + // Given + const value = 'VDK'; + + // When + const instance = new ComparableImpl(value); + + // Then + expect(instance.value).toBe(value); + }); + + describe('Statics::', () => { + describe('Methods::()', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // Given + const value = 'VDK'; + + // When + const instance = ComparableImpl.of(value); + + // Then + expect(instance).toBeDefined(); + expect(instance).toBeInstanceOf(ComparableImpl); + }); + }); + }); + }); + + describe('Methods::()', () => { + let v1: unknown; + let v2: unknown; + let v3: unknown; + let v4: unknown; + let v5: unknown; + let v6: unknown; + let v7: unknown; + let v8: unknown; + + let c1: ComparableImpl; + let c2: ComparableImpl; + let c3: ComparableImpl; + let c4: ComparableImpl; + let c5: ComparableImpl; + let c6: ComparableImpl; + let c7: ComparableImpl; + let c8: ComparableImpl; + + beforeEach(() => { + v1 = null; + v2 = undefined; + v3 = 'Saggitarius'; + v4 = 10; + v5 = 'Saggitarius'; + v6 = 11; + v7 = 10; + v8 = 'Taurus'; + + c1 = ComparableImpl.of(v1); + c2 = ComparableImpl.of(v2); + c3 = ComparableImpl.of(v3); + c4 = ComparableImpl.of(v4); + c5 = ComparableImpl.of(v5); + c6 = ComparableImpl.of(v6); + c7 = ComparableImpl.of(v7); + c8 = ComparableImpl.of(v8); + }); + + describe('|compare|', () => { + it('should verify will return 0 for equal', () => { + // When + const comparison = c3.compare(c5); + + // Then + expect(comparison).toEqual(0); + }); + + it('should verify will return 1 for greaterThan', () => { + // When + const comparison = c8.compare(c5); + + // Then + expect(comparison).toEqual(1); + }); + + it('should verify will return -1 for lessThan', () => { + // When + const comparison = c5.compare(c8); + + // Then + expect(comparison).toEqual(-1); + }); + + it('should verify will return -1 given comparable is not instance of the current Constructor', () => { + // Given + const c10 = new ComparableStub(v2); + + // When + const comparison = c5.compare(c10); + + // Then + expect(comparison).toEqual(-1); + }); + }); + + describe('|isNil|', () => { + it('should verify will return true if value is null or undefined, otherwise false', () => { + // When + const r1 = c1.isNil(); + const r2 = c2.isNil(); + const r3 = c3.isNil(); + const r4 = c4.isNil(); + + // Then + expect(r1).toBeTrue(); + expect(r2).toBeTrue(); + expect(r3).toBeFalse(); + expect(r4).toBeFalse(); + }); + }); + + describe('|notNil|', () => { + it('should verify will return false if value is null or undefined, otherwise true', () => { + // When + const r1 = c1.notNil(); + const r2 = c2.notNil(); + const r3 = c3.notNil(); + const r4 = c4.notNil(); + + // Then + expect(r1).toBeFalse(); + expect(r2).toBeFalse(); + expect(r3).toBeTrue(); + expect(r4).toBeTrue(); + }); + }); + + describe('|like|', () => { + it('should verify will return true if values are similar, otherwise false', () => { + // When + const r1 = c3.like(c5); + const r2 = c3.like(c8); + + // Then + expect(r1).toBeTrue(); + expect(r2).toBeFalse(); + }); + }); + + describe('|equal|', () => { + it('should verify will return true if values are equal, otherwise false', () => { + // When + const r1 = c3.equal(c5); + const r2 = c3.equal(c8); + const r3 = c4.equal(c7); + const r4 = c4.equal(c6); + + // Then + expect(r1).toBeTrue(); + expect(r2).toBeFalse(); + expect(r3).toBeTrue(); + expect(r4).toBeFalse(); + }); + }); + + describe('|notEqual|', () => { + it('should verify will return true if values are not equal, otherwise false', () => { + // When + const r1 = c3.notEqual(c5); + const r2 = c3.notEqual(c8); + const r3 = c4.notEqual(c7); + const r4 = c4.notEqual(c6); + + // Then + expect(r1).toBeFalse(); + expect(r2).toBeTrue(); + expect(r3).toBeFalse(); + expect(r4).toBeTrue(); + }); + }); + + describe('|lessThan|', () => { + it('should verify will return true if value is less than provided, otherwise false', () => { + // When + const r1 = c4.lessThan(c6); + const r2 = c6.lessThan(c4); + + // Then + expect(r1).toBeTrue(); + expect(r2).toBeFalse(); + }); + }); + + describe('|lessThanInclusive|', () => { + it('should verify will return true if value is less than or equal to provided, otherwise false', () => { + // When + const r1 = c4.lessThanInclusive(c6); + const r2 = c6.lessThanInclusive(c4); + const r3 = c4.lessThanInclusive(c7); + + // Then + expect(r1).toBeTrue(); + expect(r2).toBeFalse(); + expect(r3).toBeTrue(); + }); + }); + + describe('|greaterThan|', () => { + it('should verify will return true if value is greater than provided, otherwise false', () => { + // When + const r1 = c6.greaterThan(c4); + const r2 = c4.greaterThan(c6); + + // Then + expect(r1).toBeTrue(); + expect(r2).toBeFalse(); + }); + }); + + describe('|greaterThanInclusive|', () => { + it('should verify will return true if value is greater than or equal to provided, otherwise false', () => { + // When + const r1 = c6.greaterThanInclusive(c4); + const r2 = c4.greaterThanInclusive(c6); + const r3 = c7.greaterThanInclusive(c4); + + // Then + expect(r1).toBeTrue(); + expect(r2).toBeFalse(); + expect(r3).toBeTrue(); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/comparable/comparable.impl.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/comparable/comparable.impl.ts index e5a485f457..be7088d043 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/comparable/comparable.impl.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/comparable/comparable.impl.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -17,103 +15,99 @@ import { CollectionsUtil } from '../../../utils'; * */ export class ComparableImpl implements Comparable { - - /** - * @inheritDoc - */ - public readonly value: T; - - /** - * ** Constructor. - */ - constructor(value: T) { - this.value = value; - } - - /** - * ** Factory method. - */ - static of(value: any): ComparableImpl { - return new ComparableImpl(value); - } - - /** - * @inheritDoc - */ - compare(comparable: Comparable): number { - if (comparable instanceof ComparableImpl) { - const evaluateSecondStatement = () => this.value > comparable.value - ? 1 - : -1; - - return this.value === comparable.value - ? 0 - : evaluateSecondStatement(); - } else { - return -1; - } - } - - /** - * @inheritDoc - */ - isNil(): boolean { - return CollectionsUtil.isNil(this.value); - } - - /** - * @inheritDoc - */ - notNil(): boolean { - return CollectionsUtil.isDefined(this.value); - } - - /** - * @inheritDoc - */ - like(comparable: Comparable): boolean { - return this.compare(comparable) === 0; - } - - /** - * @inheritDoc - */ - equal(comparable: Comparable): boolean { - return this.compare(comparable) === 0; - } - - /** - * @inheritDoc - */ - notEqual(comparable: Comparable): boolean { - return this.compare(comparable) !== 0; - } - - /** - * @inheritDoc - */ - lessThan(comparable: Comparable): boolean { - return this.compare(comparable) < 0; - } - - /** - * @inheritDoc - */ - lessThanInclusive(comparable: Comparable): boolean { - return this.compare(comparable) <= 0; - } - - /** - * @inheritDoc - */ - greaterThan(comparable: Comparable): boolean { - return this.compare(comparable) > 0; - } - - /** - * @inheritDoc - */ - greaterThanInclusive(comparable: Comparable): boolean { - return this.compare(comparable) >= 0; - } + /** + * @inheritDoc + */ + public readonly value: T; + + /** + * ** Constructor. + */ + constructor(value: T) { + this.value = value; + } + + /** + * ** Factory method. + */ + static of(value: any): ComparableImpl { + return new ComparableImpl(value); + } + + /** + * @inheritDoc + */ + compare(comparable: Comparable): number { + if (comparable instanceof ComparableImpl) { + const evaluateSecondStatement = () => + this.value > comparable.value ? 1 : -1; + + return this.value === comparable.value ? 0 : evaluateSecondStatement(); + } else { + return -1; + } + } + + /** + * @inheritDoc + */ + isNil(): boolean { + return CollectionsUtil.isNil(this.value); + } + + /** + * @inheritDoc + */ + notNil(): boolean { + return CollectionsUtil.isDefined(this.value); + } + + /** + * @inheritDoc + */ + like(comparable: Comparable): boolean { + return this.compare(comparable) === 0; + } + + /** + * @inheritDoc + */ + equal(comparable: Comparable): boolean { + return this.compare(comparable) === 0; + } + + /** + * @inheritDoc + */ + notEqual(comparable: Comparable): boolean { + return this.compare(comparable) !== 0; + } + + /** + * @inheritDoc + */ + lessThan(comparable: Comparable): boolean { + return this.compare(comparable) < 0; + } + + /** + * @inheritDoc + */ + lessThanInclusive(comparable: Comparable): boolean { + return this.compare(comparable) <= 0; + } + + /** + * @inheritDoc + */ + greaterThan(comparable: Comparable): boolean { + return this.compare(comparable) > 0; + } + + /** + * @inheritDoc + */ + greaterThanInclusive(comparable: Comparable): boolean { + return this.compare(comparable) >= 0; + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/comparable/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/comparable/index.ts index 785b6e3731..64e23a32fd 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/comparable/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/comparable/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/comparable/predicates-comparable.impl.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/comparable/predicates-comparable.impl.spec.ts index d6647a0008..6dfcb827c9 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/comparable/predicates-comparable.impl.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/comparable/predicates-comparable.impl.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -12,309 +10,394 @@ import { Comparable, Predicate } from '../../interfaces'; import { PredicatesComparable } from './predicates-comparable.impl'; class ComparableStub implements Comparable { - public readonly value: any; + public readonly value: any; - constructor(value: any) { - this.value = value; - } + constructor(value: any) { + this.value = value; + } - compare(_comparable: Comparable): number { - return 0; - } + compare(_comparable: Comparable): number { + return 0; + } - equal(_comparable: Comparable): boolean { - return true; - } + equal(_comparable: Comparable): boolean { + return true; + } - like(_comparable: Comparable): boolean { - return true; - } + like(_comparable: Comparable): boolean { + return true; + } - notEqual(_comparable: Comparable): boolean { - return false; - } + notEqual(_comparable: Comparable): boolean { + return false; + } - isNil(): boolean { - return false; - } + isNil(): boolean { + return false; + } - notNil(): boolean { - return true; - } + notNil(): boolean { + return true; + } - greaterThan(_comparable: Comparable): boolean { - return false; - } + greaterThan(_comparable: Comparable): boolean { + return false; + } - greaterThanInclusive(_comparable: Comparable): boolean { - return false; - } + greaterThanInclusive(_comparable: Comparable): boolean { + return false; + } - lessThan(_comparable: Comparable): boolean { - return false; - } + lessThan(_comparable: Comparable): boolean { + return false; + } - lessThanInclusive(_comparable: Comparable): boolean { - return false; - } + lessThanInclusive(_comparable: Comparable): boolean { + return false; + } } class PredicateEqualStub implements Predicate { - comparable: ComparableStub; + comparable: ComparableStub; - constructor(comparable: ComparableStub) { - this.comparable = comparable; - } + constructor(comparable: ComparableStub) { + this.comparable = comparable; + } - evaluate(comparable: Comparable): boolean { - return this.comparable.equal(comparable); - } + evaluate(comparable: Comparable): boolean { + return this.comparable.equal(comparable); + } } describe('PredicatesComparable', () => { - let predicate1: Predicate; - let predicate2: Predicate; - let predicate3: Predicate; - - beforeEach(() => { - predicate1 = new PredicateEqualStub(new ComparableStub('A')); - predicate2 = new PredicateEqualStub(new ComparableStub('B')); - predicate3 = new PredicateEqualStub(new ComparableStub('1')); - }); - - it('should verify instance is created', () => { - // When - const instance = new PredicatesComparable(predicate1, predicate2); - - // Then - expect(instance).toBeDefined(); - }); - - it('should verify value is correctly assigned', () => { - // When - const instance = new PredicatesComparable(predicate1, predicate2); - - // Then - expect(instance.value[0]).toBe(predicate1); - expect(instance.value[1]).toBe(predicate2); - }); - - describe('Statics::', () => { - describe('Methods::()', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const instance = PredicatesComparable.of(predicate1, predicate2); - - // Then - expect(instance).toBeDefined(); - expect(instance).toBeInstanceOf(PredicatesComparable); - expect(instance.value[0]).toBe(predicate1); - expect(instance.value[1]).toBe(predicate2); - }); - }); - }); - }); - - describe('Methods::()', () => { - let predicatesComparable: PredicatesComparable; - let injectedComparable: ComparableStub; - let consoleWarnSpy: jasmine.Spy; - - beforeEach(() => { - predicatesComparable = PredicatesComparable.of(predicate1, predicate2); - injectedComparable = new ComparableStub('C'); - consoleWarnSpy = spyOn(console, 'warn').and.callFake(CallFake); - }); - - describe('|compare|', () => { - it('should verify will return -1 and log warn to console', () => { - // When - const comparison = predicatesComparable.compare(injectedComparable); - - // Then - expect(comparison).toEqual(-1); - expect(consoleWarnSpy).toHaveBeenCalledWith('PredicatesComparable, unsupported comparison.'); - }); - }); - - describe('|isNil|', () => { - it('should verify will return false all the time', () => { - // Given - const c1 = PredicatesComparable.of(null); - const c2 = PredicatesComparable.of(undefined); - const c3 = PredicatesComparable.of(predicate1); - - // When - const r1 = c1.isNil(); - const r2 = c2.isNil(); - const r3 = c3.isNil(); - - // Then - expect(r1).toBeFalse(); - expect(r2).toBeFalse(); - expect(r3).toBeFalse(); - }); - }); - - describe('|notNil|', () => { - it('should verify will return true all the time', () => { - // Given - const c1 = PredicatesComparable.of(null); - const c2 = PredicatesComparable.of(undefined); - const c3 = PredicatesComparable.of(predicate1); - - // When - const r1 = c1.notNil(); - const r2 = c2.notNil(); - const r3 = c3.notNil(); - - // Then - expect(r1).toBeTrue(); - expect(r2).toBeTrue(); - expect(r3).toBeTrue(); - }); - }); - - describe('|like|', () => { - it('should verify will return true if one or more predicates return true, otherwise false', () => { - // Given - const predicate1EvaluateSpy = spyOn(predicate1, 'evaluate').and.returnValues(false, false); - const predicate2EvaluateSpy = spyOn(predicate2, 'evaluate').and.returnValues(true, false); - const predicate3EvaluateSpy = spyOn(predicate3, 'evaluate').and.returnValues(false); - const comparableStub = new ComparableStub('D'); - predicatesComparable = PredicatesComparable.of(predicate1, predicate2, predicate3); - - // When - const r1 = predicatesComparable.like(injectedComparable); - const r2 = predicatesComparable.like(comparableStub); - - // Then - expect(r1).toBeTrue(); - expect(predicate1EvaluateSpy.calls.argsFor(0)).toEqual([injectedComparable]); - expect(predicate2EvaluateSpy.calls.argsFor(0)).toEqual([injectedComparable]); - - expect(r2).toBeFalse(); - expect(predicate1EvaluateSpy.calls.argsFor(1)).toEqual([comparableStub]); - expect(predicate2EvaluateSpy.calls.argsFor(1)).toEqual([comparableStub]); - expect(predicate3EvaluateSpy.calls.argsFor(0)).toEqual([comparableStub]); - - expect(predicate1EvaluateSpy).toHaveBeenCalledTimes(2); - expect(predicate2EvaluateSpy).toHaveBeenCalledTimes(2); - expect(predicate3EvaluateSpy).toHaveBeenCalledTimes(1); - }); - }); - - describe('|equal|', () => { - it('should verify will return true if all predicates return true, otherwise false', () => { - // Given - const predicate1EvaluateSpy = spyOn(predicate1, 'evaluate').and.returnValues(true, false, true); - const predicate2EvaluateSpy = spyOn(predicate2, 'evaluate').and.returnValues(false, true); - const predicate3EvaluateSpy = spyOn(predicate3, 'evaluate').and.returnValues(true); - const comparableStub1 = new ComparableStub('F'); - const comparableStub2 = new ComparableStub('G'); - predicatesComparable = PredicatesComparable.of(predicate1, predicate2, predicate3); - - // When - const r1 = predicatesComparable.equal(injectedComparable); - const r2 = predicatesComparable.equal(comparableStub1); - const r3 = predicatesComparable.equal(comparableStub2); - - // Then - expect(r1).toBeFalse(); - expect(predicate1EvaluateSpy.calls.argsFor(0)).toEqual([injectedComparable]); - expect(predicate2EvaluateSpy.calls.argsFor(0)).toEqual([injectedComparable]); - - expect(r2).toBeFalse(); - expect(predicate1EvaluateSpy.calls.argsFor(1)).toEqual([comparableStub1]); - - expect(r3).toBeTrue(); - expect(predicate1EvaluateSpy.calls.argsFor(2)).toEqual([comparableStub2]); - expect(predicate2EvaluateSpy.calls.argsFor(1)).toEqual([comparableStub2]); - expect(predicate3EvaluateSpy.calls.argsFor(0)).toEqual([comparableStub2]); - - expect(predicate1EvaluateSpy).toHaveBeenCalledTimes(3); - expect(predicate2EvaluateSpy).toHaveBeenCalledTimes(2); - expect(predicate3EvaluateSpy).toHaveBeenCalledTimes(1); - }); - }); - - describe('|notEqual|', () => { - it('should verify will return true if one or more predicates return false, otherwise false', () => { - // Given - const predicate1EvaluateSpy = spyOn(predicate1, 'evaluate').and.returnValues(false, true, true); - const predicate2EvaluateSpy = spyOn(predicate2, 'evaluate').and.returnValues(false, true); - const predicate3EvaluateSpy = spyOn(predicate3, 'evaluate').and.returnValues(true); - const comparableStub1 = new ComparableStub('H'); - const comparableStub2 = new ComparableStub('I'); - predicatesComparable = PredicatesComparable.of(predicate1, predicate2, predicate3); - - // When - const r1 = predicatesComparable.notEqual(injectedComparable); - const r2 = predicatesComparable.notEqual(comparableStub1); - const r3 = predicatesComparable.notEqual(comparableStub2); - - // Then - expect(r1).toBeTrue(); - expect(predicate1EvaluateSpy.calls.argsFor(0)).toEqual([injectedComparable]); - - expect(r2).toBeTrue(); - expect(predicate1EvaluateSpy.calls.argsFor(1)).toEqual([comparableStub1]); - expect(predicate2EvaluateSpy.calls.argsFor(0)).toEqual([comparableStub1]); - - expect(r3).toBeFalse(); - expect(predicate1EvaluateSpy.calls.argsFor(2)).toEqual([comparableStub2]); - expect(predicate2EvaluateSpy.calls.argsFor(1)).toEqual([comparableStub2]); - expect(predicate3EvaluateSpy.calls.argsFor(0)).toEqual([comparableStub2]); - - expect(predicate1EvaluateSpy).toHaveBeenCalledTimes(3); - expect(predicate2EvaluateSpy).toHaveBeenCalledTimes(2); - expect(predicate3EvaluateSpy).toHaveBeenCalledTimes(1); - }); - }); - - describe('|lessThan|', () => { - it('should verify will return -1 and log warn to console', () => { - // When - const comparison = predicatesComparable.lessThan(injectedComparable); - - // Then - expect(comparison).toBeFalse(); - expect(consoleWarnSpy).toHaveBeenCalledWith('PredicatesComparable, unsupported comparison.'); - }); - }); - - describe('|lessThanInclusive|', () => { - it('should verify will return -1 and log warn to console', () => { - // When - const comparison = predicatesComparable.lessThanInclusive(injectedComparable); - - // Then - expect(comparison).toBeFalse(); - expect(consoleWarnSpy).toHaveBeenCalledWith('PredicatesComparable, unsupported comparison.'); - }); - }); - - describe('|greaterThan|', () => { - it('should verify will return -1 and log warn to console', () => { - // When - const comparison = predicatesComparable.greaterThan(injectedComparable); - - // Then - expect(comparison).toBeFalse(); - expect(consoleWarnSpy).toHaveBeenCalledWith('PredicatesComparable, unsupported comparison.'); - }); - }); - - describe('|greaterThanInclusive|', () => { - it('should verify will return -1 and log warn to console', () => { - // When - const comparison = predicatesComparable.greaterThanInclusive(injectedComparable); - - // Then - expect(comparison).toBeFalse(); - expect(consoleWarnSpy).toHaveBeenCalledWith('PredicatesComparable, unsupported comparison.'); - }); - }); - }); + let predicate1: Predicate; + let predicate2: Predicate; + let predicate3: Predicate; + + beforeEach(() => { + predicate1 = new PredicateEqualStub(new ComparableStub('A')); + predicate2 = new PredicateEqualStub(new ComparableStub('B')); + predicate3 = new PredicateEqualStub(new ComparableStub('1')); + }); + + it('should verify instance is created', () => { + // When + const instance = new PredicatesComparable(predicate1, predicate2); + + // Then + expect(instance).toBeDefined(); + }); + + it('should verify value is correctly assigned', () => { + // When + const instance = new PredicatesComparable(predicate1, predicate2); + + // Then + expect(instance.value[0]).toBe(predicate1); + expect(instance.value[1]).toBe(predicate2); + }); + + describe('Statics::', () => { + describe('Methods::()', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const instance = PredicatesComparable.of(predicate1, predicate2); + + // Then + expect(instance).toBeDefined(); + expect(instance).toBeInstanceOf(PredicatesComparable); + expect(instance.value[0]).toBe(predicate1); + expect(instance.value[1]).toBe(predicate2); + }); + }); + }); + }); + + describe('Methods::()', () => { + let predicatesComparable: PredicatesComparable; + let injectedComparable: ComparableStub; + let consoleWarnSpy: jasmine.Spy; + + beforeEach(() => { + predicatesComparable = PredicatesComparable.of(predicate1, predicate2); + injectedComparable = new ComparableStub('C'); + consoleWarnSpy = spyOn(console, 'warn').and.callFake(CallFake); + }); + + describe('|compare|', () => { + it('should verify will return -1 and log warn to console', () => { + // When + const comparison = predicatesComparable.compare(injectedComparable); + + // Then + expect(comparison).toEqual(-1); + expect(consoleWarnSpy).toHaveBeenCalledWith( + 'PredicatesComparable, unsupported comparison.' + ); + }); + }); + + describe('|isNil|', () => { + it('should verify will return false all the time', () => { + // Given + const c1 = PredicatesComparable.of(null); + const c2 = PredicatesComparable.of(undefined); + const c3 = PredicatesComparable.of(predicate1); + + // When + const r1 = c1.isNil(); + const r2 = c2.isNil(); + const r3 = c3.isNil(); + + // Then + expect(r1).toBeFalse(); + expect(r2).toBeFalse(); + expect(r3).toBeFalse(); + }); + }); + + describe('|notNil|', () => { + it('should verify will return true all the time', () => { + // Given + const c1 = PredicatesComparable.of(null); + const c2 = PredicatesComparable.of(undefined); + const c3 = PredicatesComparable.of(predicate1); + + // When + const r1 = c1.notNil(); + const r2 = c2.notNil(); + const r3 = c3.notNil(); + + // Then + expect(r1).toBeTrue(); + expect(r2).toBeTrue(); + expect(r3).toBeTrue(); + }); + }); + + describe('|like|', () => { + it('should verify will return true if one or more predicates return true, otherwise false', () => { + // Given + const predicate1EvaluateSpy = spyOn( + predicate1, + 'evaluate' + ).and.returnValues(false, false); + const predicate2EvaluateSpy = spyOn( + predicate2, + 'evaluate' + ).and.returnValues(true, false); + const predicate3EvaluateSpy = spyOn( + predicate3, + 'evaluate' + ).and.returnValues(false); + const comparableStub = new ComparableStub('D'); + predicatesComparable = PredicatesComparable.of( + predicate1, + predicate2, + predicate3 + ); + + // When + const r1 = predicatesComparable.like(injectedComparable); + const r2 = predicatesComparable.like(comparableStub); + + // Then + expect(r1).toBeTrue(); + expect(predicate1EvaluateSpy.calls.argsFor(0)).toEqual([ + injectedComparable + ]); + expect(predicate2EvaluateSpy.calls.argsFor(0)).toEqual([ + injectedComparable + ]); + + expect(r2).toBeFalse(); + expect(predicate1EvaluateSpy.calls.argsFor(1)).toEqual([ + comparableStub + ]); + expect(predicate2EvaluateSpy.calls.argsFor(1)).toEqual([ + comparableStub + ]); + expect(predicate3EvaluateSpy.calls.argsFor(0)).toEqual([ + comparableStub + ]); + + expect(predicate1EvaluateSpy).toHaveBeenCalledTimes(2); + expect(predicate2EvaluateSpy).toHaveBeenCalledTimes(2); + expect(predicate3EvaluateSpy).toHaveBeenCalledTimes(1); + }); + }); + + describe('|equal|', () => { + it('should verify will return true if all predicates return true, otherwise false', () => { + // Given + const predicate1EvaluateSpy = spyOn( + predicate1, + 'evaluate' + ).and.returnValues(true, false, true); + const predicate2EvaluateSpy = spyOn( + predicate2, + 'evaluate' + ).and.returnValues(false, true); + const predicate3EvaluateSpy = spyOn( + predicate3, + 'evaluate' + ).and.returnValues(true); + const comparableStub1 = new ComparableStub('F'); + const comparableStub2 = new ComparableStub('G'); + predicatesComparable = PredicatesComparable.of( + predicate1, + predicate2, + predicate3 + ); + + // When + const r1 = predicatesComparable.equal(injectedComparable); + const r2 = predicatesComparable.equal(comparableStub1); + const r3 = predicatesComparable.equal(comparableStub2); + + // Then + expect(r1).toBeFalse(); + expect(predicate1EvaluateSpy.calls.argsFor(0)).toEqual([ + injectedComparable + ]); + expect(predicate2EvaluateSpy.calls.argsFor(0)).toEqual([ + injectedComparable + ]); + + expect(r2).toBeFalse(); + expect(predicate1EvaluateSpy.calls.argsFor(1)).toEqual([ + comparableStub1 + ]); + + expect(r3).toBeTrue(); + expect(predicate1EvaluateSpy.calls.argsFor(2)).toEqual([ + comparableStub2 + ]); + expect(predicate2EvaluateSpy.calls.argsFor(1)).toEqual([ + comparableStub2 + ]); + expect(predicate3EvaluateSpy.calls.argsFor(0)).toEqual([ + comparableStub2 + ]); + + expect(predicate1EvaluateSpy).toHaveBeenCalledTimes(3); + expect(predicate2EvaluateSpy).toHaveBeenCalledTimes(2); + expect(predicate3EvaluateSpy).toHaveBeenCalledTimes(1); + }); + }); + + describe('|notEqual|', () => { + it('should verify will return true if one or more predicates return false, otherwise false', () => { + // Given + const predicate1EvaluateSpy = spyOn( + predicate1, + 'evaluate' + ).and.returnValues(false, true, true); + const predicate2EvaluateSpy = spyOn( + predicate2, + 'evaluate' + ).and.returnValues(false, true); + const predicate3EvaluateSpy = spyOn( + predicate3, + 'evaluate' + ).and.returnValues(true); + const comparableStub1 = new ComparableStub('H'); + const comparableStub2 = new ComparableStub('I'); + predicatesComparable = PredicatesComparable.of( + predicate1, + predicate2, + predicate3 + ); + + // When + const r1 = predicatesComparable.notEqual(injectedComparable); + const r2 = predicatesComparable.notEqual(comparableStub1); + const r3 = predicatesComparable.notEqual(comparableStub2); + + // Then + expect(r1).toBeTrue(); + expect(predicate1EvaluateSpy.calls.argsFor(0)).toEqual([ + injectedComparable + ]); + + expect(r2).toBeTrue(); + expect(predicate1EvaluateSpy.calls.argsFor(1)).toEqual([ + comparableStub1 + ]); + expect(predicate2EvaluateSpy.calls.argsFor(0)).toEqual([ + comparableStub1 + ]); + + expect(r3).toBeFalse(); + expect(predicate1EvaluateSpy.calls.argsFor(2)).toEqual([ + comparableStub2 + ]); + expect(predicate2EvaluateSpy.calls.argsFor(1)).toEqual([ + comparableStub2 + ]); + expect(predicate3EvaluateSpy.calls.argsFor(0)).toEqual([ + comparableStub2 + ]); + + expect(predicate1EvaluateSpy).toHaveBeenCalledTimes(3); + expect(predicate2EvaluateSpy).toHaveBeenCalledTimes(2); + expect(predicate3EvaluateSpy).toHaveBeenCalledTimes(1); + }); + }); + + describe('|lessThan|', () => { + it('should verify will return -1 and log warn to console', () => { + // When + const comparison = predicatesComparable.lessThan(injectedComparable); + + // Then + expect(comparison).toBeFalse(); + expect(consoleWarnSpy).toHaveBeenCalledWith( + 'PredicatesComparable, unsupported comparison.' + ); + }); + }); + + describe('|lessThanInclusive|', () => { + it('should verify will return -1 and log warn to console', () => { + // When + const comparison = + predicatesComparable.lessThanInclusive(injectedComparable); + + // Then + expect(comparison).toBeFalse(); + expect(consoleWarnSpy).toHaveBeenCalledWith( + 'PredicatesComparable, unsupported comparison.' + ); + }); + }); + + describe('|greaterThan|', () => { + it('should verify will return -1 and log warn to console', () => { + // When + const comparison = predicatesComparable.greaterThan(injectedComparable); + + // Then + expect(comparison).toBeFalse(); + expect(consoleWarnSpy).toHaveBeenCalledWith( + 'PredicatesComparable, unsupported comparison.' + ); + }); + }); + + describe('|greaterThanInclusive|', () => { + it('should verify will return -1 and log warn to console', () => { + // When + const comparison = + predicatesComparable.greaterThanInclusive(injectedComparable); + + // Then + expect(comparison).toBeFalse(); + expect(consoleWarnSpy).toHaveBeenCalledWith( + 'PredicatesComparable, unsupported comparison.' + ); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/comparable/predicates-comparable.impl.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/comparable/predicates-comparable.impl.ts index af1f0109c9..8752578db6 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/comparable/predicates-comparable.impl.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/comparable/predicates-comparable.impl.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -9,106 +7,104 @@ import { CollectionsUtil } from '../../../utils'; import { Comparable, Predicate } from '../../interfaces'; -export class PredicatesComparable implements Comparable { - - /** - * @inheritDoc - */ - public readonly value: T; - - /** - * ** Constructor. - */ - constructor(...predicates: T) { - this.value = predicates ?? [] as T; - } - - /** - * ** Factory method. - */ - static of(...predicates: Predicate[]): PredicatesComparable { - return new PredicatesComparable(...predicates); - } - - /** - * @inheritDoc - */ - compare(_comparable: Comparable): number { - console.warn('PredicatesComparable, unsupported comparison.'); - - return -1; - } - - /** - * @inheritDoc - */ - isNil(): boolean { - return CollectionsUtil.isNil(this.value); - } - - /** - * @inheritDoc - */ - notNil(): boolean { - return CollectionsUtil.isDefined(this.value); - } - - /** - * @inheritDoc - */ - like(comparable: Comparable): boolean { - return this.value - .some((predicate) => predicate.evaluate(comparable)); - } - - /** - * @inheritDoc - */ - equal(comparable: Comparable): boolean { - return this.value - .every((predicate) => predicate.evaluate(comparable)); - } - - /** - * @inheritDoc - */ - notEqual(comparable: Comparable): boolean { - return !this.value - .every((predicate) => predicate.evaluate(comparable)); - } - - /** - * @inheritDoc - */ - lessThan(_comparable: Comparable): boolean { - return PredicatesComparable._defaultUnsupported(); - } - - /** - * @inheritDoc - */ - lessThanInclusive(_comparable: Comparable): boolean { - return PredicatesComparable._defaultUnsupported(); - } - - /** - * @inheritDoc - */ - greaterThan(_comparable: Comparable): boolean { - return PredicatesComparable._defaultUnsupported(); - } - - /** - * @inheritDoc - */ - greaterThanInclusive(_comparable: Comparable): boolean { - return PredicatesComparable._defaultUnsupported(); - } - - // eslint-disable-next-line @typescript-eslint/member-ordering - private static _defaultUnsupported(): boolean { - console.warn('PredicatesComparable, unsupported comparison.'); - - return false; - } +export class PredicatesComparable + implements Comparable +{ + /** + * @inheritDoc + */ + public readonly value: T; + + /** + * ** Constructor. + */ + constructor(...predicates: T) { + this.value = predicates ?? ([] as T); + } + + /** + * ** Factory method. + */ + static of(...predicates: Predicate[]): PredicatesComparable { + return new PredicatesComparable(...predicates); + } + + /** + * @inheritDoc + */ + compare(_comparable: Comparable): number { + console.warn('PredicatesComparable, unsupported comparison.'); + + return -1; + } + + /** + * @inheritDoc + */ + isNil(): boolean { + return CollectionsUtil.isNil(this.value); + } + + /** + * @inheritDoc + */ + notNil(): boolean { + return CollectionsUtil.isDefined(this.value); + } + + /** + * @inheritDoc + */ + like(comparable: Comparable): boolean { + return this.value.some((predicate) => predicate.evaluate(comparable)); + } + + /** + * @inheritDoc + */ + equal(comparable: Comparable): boolean { + return this.value.every((predicate) => predicate.evaluate(comparable)); + } + + /** + * @inheritDoc + */ + notEqual(comparable: Comparable): boolean { + return !this.value.every((predicate) => predicate.evaluate(comparable)); + } + + /** + * @inheritDoc + */ + lessThan(_comparable: Comparable): boolean { + return PredicatesComparable._defaultUnsupported(); + } + + /** + * @inheritDoc + */ + lessThanInclusive(_comparable: Comparable): boolean { + return PredicatesComparable._defaultUnsupported(); + } + + /** + * @inheritDoc + */ + greaterThan(_comparable: Comparable): boolean { + return PredicatesComparable._defaultUnsupported(); + } + + /** + * @inheritDoc + */ + greaterThanInclusive(_comparable: Comparable): boolean { + return PredicatesComparable._defaultUnsupported(); + } + + // eslint-disable-next-line @typescript-eslint/member-ordering + private static _defaultUnsupported(): boolean { + console.warn('PredicatesComparable, unsupported comparison.'); + + return false; + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/and.predicate.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/and.predicate.spec.ts index 86a7e534eb..4a17db94d2 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/and.predicate.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/and.predicate.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -15,106 +13,145 @@ import { CompoundPredicate } from './base-compound.predicate'; import { And } from './and.predicate'; describe('And', () => { - it('should verify instance is created from one predicate', () => { - // Given - const predicate1: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - - // When - const instance = new And(predicate1); - - // Then - expect(instance).toBeDefined(); - expect(instance).toBeInstanceOf(CompoundPredicate); - expect(instance.comparable).toBeInstanceOf(PredicatesComparable); - expect(instance.comparable.value[0]).toBe(predicate1); - }); - - it('should verify instance is created from predicates', () => { - // Given - const predicate1: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - const predicate2: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - - // When - const instance = new And(predicate1, predicate2); - - // Then - expect(instance).toBeDefined(); - expect(instance).toBeInstanceOf(CompoundPredicate); - expect(instance.comparable).toBeInstanceOf(PredicatesComparable); - expect(instance.comparable.value[0]).toBe(predicate1); - expect(instance.comparable.value[1]).toBe(predicate2); - }); - - it('should verify instance is created from comparable', () => { - // Given - const predicate1: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - const predicate2: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - const comparable = new PredicatesComparable(predicate1, predicate2); - - // When - const instance = new And(comparable); - - // Then - expect(instance).toBeDefined(); - expect(instance).toBeInstanceOf(CompoundPredicate); - expect(instance.comparable).toBe(comparable); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance from predicates', () => { - // Given - const predicate1: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - const predicate2: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - - // When - const instance = And.of(predicate1, predicate2); - - // Then - expect(instance).toBeInstanceOf(And); - expect(instance).toBeInstanceOf(CompoundPredicate); - expect(instance.comparable).toBeInstanceOf(PredicatesComparable); - expect(instance.comparable.value[0]).toBe(predicate1); - expect(instance.comparable.value[1]).toBe(predicate2); - }); - - it('should verify factory method will create instance from comparable', () => { - // Given - const predicate1: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - const predicate2: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - const comparable = new PredicatesComparable(predicate1, predicate2); - - // When - const instance = And.of(comparable); - - // Then - expect(instance).toBeInstanceOf(And); - expect(instance).toBeInstanceOf(CompoundPredicate); - expect(instance.comparable).toBe(comparable); - }); - }); - }); - }); - - describe('Methods::', () => { - describe('|evaluate|', () => { - it('should verify will invoke correct methods', () => { - // Given - const comparableEqualSpy = spyOn(PredicatesComparable.prototype, 'equal').and.returnValue(true); - const predicate1: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - const predicate2: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - const predicatesComparable = new PredicatesComparable(predicate1, predicate2); - const instance = new And(predicatesComparable); - const standardComparable = {} as Comparable; - - // When - const result = instance.evaluate(standardComparable); - - // Then - expect(result).toBeTrue(); - expect(comparableEqualSpy).toHaveBeenCalledWith(standardComparable); - }); - }); - }); + it('should verify instance is created from one predicate', () => { + // Given + const predicate1: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + + // When + const instance = new And(predicate1); + + // Then + expect(instance).toBeDefined(); + expect(instance).toBeInstanceOf(CompoundPredicate); + expect(instance.comparable).toBeInstanceOf(PredicatesComparable); + expect(instance.comparable.value[0]).toBe(predicate1); + }); + + it('should verify instance is created from predicates', () => { + // Given + const predicate1: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + const predicate2: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + + // When + const instance = new And(predicate1, predicate2); + + // Then + expect(instance).toBeDefined(); + expect(instance).toBeInstanceOf(CompoundPredicate); + expect(instance.comparable).toBeInstanceOf(PredicatesComparable); + expect(instance.comparable.value[0]).toBe(predicate1); + expect(instance.comparable.value[1]).toBe(predicate2); + }); + + it('should verify instance is created from comparable', () => { + // Given + const predicate1: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + const predicate2: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + const comparable = new PredicatesComparable(predicate1, predicate2); + + // When + const instance = new And(comparable); + + // Then + expect(instance).toBeDefined(); + expect(instance).toBeInstanceOf(CompoundPredicate); + expect(instance.comparable).toBe(comparable); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance from predicates', () => { + // Given + const predicate1: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + const predicate2: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + + // When + const instance = And.of(predicate1, predicate2); + + // Then + expect(instance).toBeInstanceOf(And); + expect(instance).toBeInstanceOf(CompoundPredicate); + expect(instance.comparable).toBeInstanceOf(PredicatesComparable); + expect(instance.comparable.value[0]).toBe(predicate1); + expect(instance.comparable.value[1]).toBe(predicate2); + }); + + it('should verify factory method will create instance from comparable', () => { + // Given + const predicate1: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + const predicate2: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + const comparable = new PredicatesComparable(predicate1, predicate2); + + // When + const instance = And.of(comparable); + + // Then + expect(instance).toBeInstanceOf(And); + expect(instance).toBeInstanceOf(CompoundPredicate); + expect(instance.comparable).toBe(comparable); + }); + }); + }); + }); + + describe('Methods::', () => { + describe('|evaluate|', () => { + it('should verify will invoke correct methods', () => { + // Given + const comparableEqualSpy = spyOn( + PredicatesComparable.prototype, + 'equal' + ).and.returnValue(true); + const predicate1: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + const predicate2: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + const predicatesComparable = new PredicatesComparable( + predicate1, + predicate2 + ); + const instance = new And(predicatesComparable); + const standardComparable = {} as Comparable; + + // When + const result = instance.evaluate(standardComparable); + + // Then + expect(result).toBeTrue(); + expect(comparableEqualSpy).toHaveBeenCalledWith(standardComparable); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/and.predicate.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/and.predicate.ts index efb876ecdc..8c636f3722 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/and.predicate.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/and.predicate.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -12,24 +10,23 @@ import { PredicatesComparable } from '../comparable'; import { CompoundPredicate } from './base-compound.predicate'; export class And extends CompoundPredicate { - - /** - * ** Factory method. - */ - static override of(comparable: PredicatesComparable): And; - static override of(...predicates: Predicate[]): And; - static override of(...values: Predicate[] | [PredicatesComparable]): And { - if (values[0] instanceof PredicatesComparable) { - return new And(values[0]); - } else { - return new And(...values as Predicate[]); - } - } - - /** - * @inheritDoc - */ - evaluate(comparable: Comparable): boolean { - return this.comparable.equal(comparable); - } + /** + * ** Factory method. + */ + static override of(comparable: PredicatesComparable): And; + static override of(...predicates: Predicate[]): And; + static override of(...values: Predicate[] | [PredicatesComparable]): And { + if (values[0] instanceof PredicatesComparable) { + return new And(values[0]); + } else { + return new And(...(values as Predicate[])); + } + } + + /** + * @inheritDoc + */ + evaluate(comparable: Comparable): boolean { + return this.comparable.equal(comparable); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/base-compound.predicate.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/base-compound.predicate.spec.ts index 7153e2ff9c..613e119150 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/base-compound.predicate.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/base-compound.predicate.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -12,17 +10,24 @@ import { Comparable, Predicate } from '../../interfaces'; import { CompoundPredicate } from './base-compound.predicate'; describe('CompoundPredicate', () => { - describe('Statics::', () => { - describe('|of|', () => { - it('should verify will throw Error', () => { - // Given - const predicate1: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - const predicate2: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; + describe('Statics::', () => { + describe('|of|', () => { + it('should verify will throw Error', () => { + // Given + const predicate1: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + const predicate2: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; - // When/Then - expect(() => CompoundPredicate.of(predicate1, predicate2)) - .toThrowError('Method have to be overridden in Subclasses.'); - }); - }); - }); + // When/Then + expect(() => CompoundPredicate.of(predicate1, predicate2)).toThrowError( + 'Method have to be overridden in Subclasses.' + ); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/base-compound.predicate.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/base-compound.predicate.ts index 40efaf16a4..a27e8795a4 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/base-compound.predicate.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/base-compound.predicate.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -9,38 +7,40 @@ import { Comparable, Predicate } from '../../interfaces'; import { PredicatesComparable } from '../comparable'; -export abstract class CompoundPredicate implements Predicate { - /** - * @inheritDoc - */ - readonly comparable: PredicatesComparable; - - /** - * ** Constructor. - */ - constructor(comparable: PredicatesComparable); - constructor(...predicates: Predicate[]); - constructor(...values: Predicate[] | [PredicatesComparable]) { - if (values.length === 1) { - if (values[0] instanceof PredicatesComparable) { - this.comparable = values[0]; - } else { - this.comparable = PredicatesComparable.of(values[0]); - } - } else { - this.comparable = PredicatesComparable.of(...values as Predicate[]); - } - } - - /** - * ** Factory method. - */ - static of(..._args: unknown[]): CompoundPredicate { - throw new Error('Method have to be overridden in Subclasses.'); - } - - /** - * @inheritDoc - */ - abstract evaluate(value: Comparable): boolean; +export abstract class CompoundPredicate + implements Predicate +{ + /** + * @inheritDoc + */ + readonly comparable: PredicatesComparable; + + /** + * ** Constructor. + */ + constructor(comparable: PredicatesComparable); + constructor(...predicates: Predicate[]); + constructor(...values: Predicate[] | [PredicatesComparable]) { + if (values.length === 1) { + if (values[0] instanceof PredicatesComparable) { + this.comparable = values[0]; + } else { + this.comparable = PredicatesComparable.of(values[0]); + } + } else { + this.comparable = PredicatesComparable.of(...(values as Predicate[])); + } + } + + /** + * ** Factory method. + */ + static of(..._args: unknown[]): CompoundPredicate { + throw new Error('Method have to be overridden in Subclasses.'); + } + + /** + * @inheritDoc + */ + abstract evaluate(value: Comparable): boolean; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/index.ts index 45222c6bbf..19e2b2da74 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/or.predicate.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/or.predicate.spec.ts index a52a52cb98..e7ec6e8934 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/or.predicate.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/or.predicate.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -15,106 +13,145 @@ import { CompoundPredicate } from './base-compound.predicate'; import { Or } from './or.predicate'; describe('Or', () => { - it('should verify instance is created from one predicate', () => { - // Given - const predicate1: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - - // When - const instance = new Or(predicate1); - - // Then - expect(instance).toBeDefined(); - expect(instance).toBeInstanceOf(CompoundPredicate); - expect(instance.comparable).toBeInstanceOf(PredicatesComparable); - expect(instance.comparable.value[0]).toBe(predicate1); - }); - - it('should verify instance is created from predicates', () => { - // Given - const predicate1: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - const predicate2: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - - // When - const instance = new Or(predicate1, predicate2); - - // Then - expect(instance).toBeDefined(); - expect(instance).toBeInstanceOf(CompoundPredicate); - expect(instance.comparable).toBeInstanceOf(PredicatesComparable); - expect(instance.comparable.value[0]).toBe(predicate1); - expect(instance.comparable.value[1]).toBe(predicate2); - }); - - it('should verify instance is created from comparable', () => { - // Given - const predicate1: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - const predicate2: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - const comparable = new PredicatesComparable(predicate1, predicate2); - - // When - const instance = new Or(comparable); - - // Then - expect(instance).toBeDefined(); - expect(instance).toBeInstanceOf(CompoundPredicate); - expect(instance.comparable).toBe(comparable); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance from predicates', () => { - // Given - const predicate1: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - const predicate2: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - - // When - const instance = Or.of(predicate1, predicate2); - - // Then - expect(instance).toBeInstanceOf(Or); - expect(instance).toBeInstanceOf(CompoundPredicate); - expect(instance.comparable).toBeInstanceOf(PredicatesComparable); - expect(instance.comparable.value[0]).toBe(predicate1); - expect(instance.comparable.value[1]).toBe(predicate2); - }); - - it('should verify factory method will create instance from comparable', () => { - // Given - const predicate1: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - const predicate2: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - const comparable = new PredicatesComparable(predicate1, predicate2); - - // When - const instance = Or.of(comparable); - - // Then - expect(instance).toBeInstanceOf(Or); - expect(instance).toBeInstanceOf(CompoundPredicate); - expect(instance.comparable).toBe(comparable); - }); - }); - }); - }); - - describe('Methods::', () => { - describe('|evaluate|', () => { - it('should verify will invoke correct methods', () => { - // Given - const comparableLikeSpy = spyOn(PredicatesComparable.prototype, 'like').and.returnValue(true); - const predicate1: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - const predicate2: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - const predicatesComparable = new PredicatesComparable(predicate1, predicate2); - const instance = new Or(predicatesComparable); - const standardComparable = {} as Comparable; - - // When - const result = instance.evaluate(standardComparable); - - // Then - expect(result).toBeTrue(); - expect(comparableLikeSpy).toHaveBeenCalledWith(standardComparable); - }); - }); - }); + it('should verify instance is created from one predicate', () => { + // Given + const predicate1: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + + // When + const instance = new Or(predicate1); + + // Then + expect(instance).toBeDefined(); + expect(instance).toBeInstanceOf(CompoundPredicate); + expect(instance.comparable).toBeInstanceOf(PredicatesComparable); + expect(instance.comparable.value[0]).toBe(predicate1); + }); + + it('should verify instance is created from predicates', () => { + // Given + const predicate1: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + const predicate2: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + + // When + const instance = new Or(predicate1, predicate2); + + // Then + expect(instance).toBeDefined(); + expect(instance).toBeInstanceOf(CompoundPredicate); + expect(instance.comparable).toBeInstanceOf(PredicatesComparable); + expect(instance.comparable.value[0]).toBe(predicate1); + expect(instance.comparable.value[1]).toBe(predicate2); + }); + + it('should verify instance is created from comparable', () => { + // Given + const predicate1: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + const predicate2: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + const comparable = new PredicatesComparable(predicate1, predicate2); + + // When + const instance = new Or(comparable); + + // Then + expect(instance).toBeDefined(); + expect(instance).toBeInstanceOf(CompoundPredicate); + expect(instance.comparable).toBe(comparable); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance from predicates', () => { + // Given + const predicate1: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + const predicate2: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + + // When + const instance = Or.of(predicate1, predicate2); + + // Then + expect(instance).toBeInstanceOf(Or); + expect(instance).toBeInstanceOf(CompoundPredicate); + expect(instance.comparable).toBeInstanceOf(PredicatesComparable); + expect(instance.comparable.value[0]).toBe(predicate1); + expect(instance.comparable.value[1]).toBe(predicate2); + }); + + it('should verify factory method will create instance from comparable', () => { + // Given + const predicate1: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + const predicate2: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + const comparable = new PredicatesComparable(predicate1, predicate2); + + // When + const instance = Or.of(comparable); + + // Then + expect(instance).toBeInstanceOf(Or); + expect(instance).toBeInstanceOf(CompoundPredicate); + expect(instance.comparable).toBe(comparable); + }); + }); + }); + }); + + describe('Methods::', () => { + describe('|evaluate|', () => { + it('should verify will invoke correct methods', () => { + // Given + const comparableLikeSpy = spyOn( + PredicatesComparable.prototype, + 'like' + ).and.returnValue(true); + const predicate1: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + const predicate2: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + const predicatesComparable = new PredicatesComparable( + predicate1, + predicate2 + ); + const instance = new Or(predicatesComparable); + const standardComparable = {} as Comparable; + + // When + const result = instance.evaluate(standardComparable); + + // Then + expect(result).toBeTrue(); + expect(comparableLikeSpy).toHaveBeenCalledWith(standardComparable); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/or.predicate.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/or.predicate.ts index 621bfd720b..a076225420 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/or.predicate.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/compound/or.predicate.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -12,24 +10,23 @@ import { PredicatesComparable } from '../comparable'; import { CompoundPredicate } from './base-compound.predicate'; export class Or extends CompoundPredicate { - - /** - * ** Factory method. - */ - static override of(comparable: PredicatesComparable): Or; - static override of(...predicates: Predicate[]): Or; - static override of(...values: Predicate[] | [PredicatesComparable]): Or { - if (values[0] instanceof PredicatesComparable) { - return new Or(values[0]); - } else { - return new Or(...values as Predicate[]); - } - } - - /** - * @inheritDoc - */ - evaluate(comparable: Comparable): boolean { - return this.comparable.like(comparable); - } + /** + * ** Factory method. + */ + static override of(comparable: PredicatesComparable): Or; + static override of(...predicates: Predicate[]): Or; + static override of(...values: Predicate[] | [PredicatesComparable]): Or { + if (values[0] instanceof PredicatesComparable) { + return new Or(values[0]); + } else { + return new Or(...(values as Predicate[])); + } + } + + /** + * @inheritDoc + */ + evaluate(comparable: Comparable): boolean { + return this.comparable.like(comparable); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/index.ts index 8b47b57bfd..6772353d8c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/public-api.ts index ba142389bd..484b60ff3c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/simple/base-simple.predicate.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/simple/base-simple.predicate.spec.ts index 69a4f97aad..74da2580ce 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/simple/base-simple.predicate.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/simple/base-simple.predicate.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -12,17 +10,24 @@ import { Comparable, Predicate } from '../../interfaces'; import { SimplePredicate } from './base-simple.predicate'; describe('SimplePredicate', () => { - describe('Statics::', () => { - describe('|of|', () => { - it('should verify will throw Error', () => { - // Given - const predicate1: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; - const predicate2: Predicate = { comparable: {} as Comparable, evaluate: CallFake }; + describe('Statics::', () => { + describe('|of|', () => { + it('should verify will throw Error', () => { + // Given + const predicate1: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; + const predicate2: Predicate = { + comparable: {} as Comparable, + evaluate: CallFake + }; - // When/Then - expect(() => SimplePredicate.of(predicate1, predicate2)) - .toThrowError('Method have to be overridden in Subclasses.'); - }); - }); - }); + // When/Then + expect(() => SimplePredicate.of(predicate1, predicate2)).toThrowError( + 'Method have to be overridden in Subclasses.' + ); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/simple/base-simple.predicate.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/simple/base-simple.predicate.ts index ea7676fa72..2c871e2b91 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/simple/base-simple.predicate.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/simple/base-simple.predicate.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -7,28 +5,30 @@ import { Comparable, Predicate } from '../../interfaces'; -export abstract class SimplePredicate implements Predicate { - /** - * @inheritDoc - */ - readonly comparable: T; +export abstract class SimplePredicate + implements Predicate +{ + /** + * @inheritDoc + */ + readonly comparable: T; - /** - * ** Constructor. - */ - protected constructor(comparable: T) { - this.comparable = comparable; - } + /** + * ** Constructor. + */ + protected constructor(comparable: T) { + this.comparable = comparable; + } - /** - * ** Factory method. - */ - static of(..._args: unknown[]): SimplePredicate { - throw new Error('Method have to be overridden in Subclasses.'); - } + /** + * ** Factory method. + */ + static of(..._args: unknown[]): SimplePredicate { + throw new Error('Method have to be overridden in Subclasses.'); + } - /** - * @inheritDoc - */ - abstract evaluate(comparable: T): boolean; + /** + * @inheritDoc + */ + abstract evaluate(comparable: T): boolean; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/simple/equal.predicate.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/simple/equal.predicate.spec.ts index e9883a0d25..8371d4518f 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/simple/equal.predicate.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/simple/equal.predicate.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -12,71 +10,71 @@ import { ComparableImpl } from '../comparable'; import { Equal } from './equal.predicate'; describe('Equal', () => { - let v1: string; - let v2: string; - let v3: string; - - let c1: Comparable; - let c2: Comparable; - let c3: Comparable; - - beforeEach(() => { - v1 = 'Taurus'; - v2 = 'Taurus'; - v3 = 'VDK'; - - c1 = ComparableImpl.of(v1); - c2 = ComparableImpl.of(v2); - c3 = ComparableImpl.of(v3); - }); - - it('should verify instance is created', () => { - // When - const p = new Equal(c1); - - // Then - expect(p).toBeDefined(); - }); - - it('should verify value (Comparable) is correctly assigned', () => { - // When - const p = Equal.of(c1); - - // Then - expect(p.comparable).toBe(c1); - }); - - describe('Statics::', () => { - describe('Methods::()', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const p = Equal.of(c1); - - // Then - expect(p).toBeDefined(); - expect(p).toBeInstanceOf(Equal); - }); - }); - }); - }); - - describe('Methods::()', () => { - describe('|evaluate|', () => { - it('should verify will return true if both comparables have same values, otherwise false', () => { - // Given - const p = Equal.of(c1); - - // When - const r1 = p.evaluate(c2); - const r2 = p.evaluate(c3); - const r3 = p.evaluate(c1); - - // Then - expect(r1).toBeTrue(); - expect(r2).toBeFalse(); - expect(r3).toBeTrue(); - }); - }); - }); + let v1: string; + let v2: string; + let v3: string; + + let c1: Comparable; + let c2: Comparable; + let c3: Comparable; + + beforeEach(() => { + v1 = 'Taurus'; + v2 = 'Taurus'; + v3 = 'VDK'; + + c1 = ComparableImpl.of(v1); + c2 = ComparableImpl.of(v2); + c3 = ComparableImpl.of(v3); + }); + + it('should verify instance is created', () => { + // When + const p = new Equal(c1); + + // Then + expect(p).toBeDefined(); + }); + + it('should verify value (Comparable) is correctly assigned', () => { + // When + const p = Equal.of(c1); + + // Then + expect(p.comparable).toBe(c1); + }); + + describe('Statics::', () => { + describe('Methods::()', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const p = Equal.of(c1); + + // Then + expect(p).toBeDefined(); + expect(p).toBeInstanceOf(Equal); + }); + }); + }); + }); + + describe('Methods::()', () => { + describe('|evaluate|', () => { + it('should verify will return true if both comparables have same values, otherwise false', () => { + // Given + const p = Equal.of(c1); + + // When + const r1 = p.evaluate(c2); + const r2 = p.evaluate(c3); + const r3 = p.evaluate(c1); + + // Then + expect(r1).toBeTrue(); + expect(r2).toBeFalse(); + expect(r3).toBeTrue(); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/simple/equal.predicate.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/simple/equal.predicate.ts index 2f2183cecb..e81eb7408b 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/simple/equal.predicate.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/simple/equal.predicate.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -14,25 +12,27 @@ import { SimplePredicate } from './base-simple.predicate'; * * */ -export class Equal extends SimplePredicate { - /** - * ** Constructor. - */ - constructor(comparable: T) { - super(comparable); - } +export class Equal< + T extends Comparable = Comparable +> extends SimplePredicate { + /** + * ** Constructor. + */ + constructor(comparable: T) { + super(comparable); + } - /** - * ** Factory method. - */ - static override of(comparable: Comparable): Equal { - return new Equal(comparable); - } + /** + * ** Factory method. + */ + static override of(comparable: Comparable): Equal { + return new Equal(comparable); + } - /** - * @inheritDoc - */ - evaluate(comparable: Comparable): boolean { - return this.comparable.equal(comparable); - } + /** + * @inheritDoc + */ + evaluate(comparable: Comparable): boolean { + return this.comparable.equal(comparable); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/simple/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/simple/index.ts index 5ee54f15ed..d5306f5c8f 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/simple/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/predicate/simple/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/public-api.ts index 1188800ed1..29910ed947 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/route/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/route/index.ts index db0bb6637c..0a1df8829d 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/route/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/route/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/route/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/route/public-api.ts index ba142389bd..484b60ff3c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/route/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/route/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/route/route.model.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/route/route.model.ts index 68e3ffceec..485a6f8f54 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/route/route.model.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/route/route.model.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -15,104 +13,107 @@ import { Replacer } from '../interfaces'; * ** Interface for Navigate back command. */ export interface TaurusNavigateAction { - /** - * ** Path / Path commands where user should be navigated, returned or redirected. - * - * - If path is '$.current' - current loaded path will be use. - * - If path is '$.requested' - requested path will be use. - * - If path is '$.parent' - parent of the current path will be use. - * - Any other string - use at is and assume it as path for navigation (URL path) - * - */ - path: string | '$.current' | '$.requested' | '$.parent'; - - /** - * ** Replacers to tune and finalize navigate back Path / Path commands. - */ - replacers?: Array>; - - /** - * ** Optional query params for navigation action. - */ - queryParams?: Params; - - /** - * ** Optional instruction for queryParams handling. - * - * - If not provided will fallback to default one 'merge'. - * - If provided and its value is null, it won't do any handling for queryParams. - */ - queryParamsHandling?: NavigationExtras['queryParamsHandling']; - - /** - * ** Optional instruction whether to use resolved path or config path. - * - * - TRUE - will use config path, which means use it as it's configured in the routing modules. - * - FALSE - will use resolved path to the current point. - */ - useConfigPath?: boolean; + /** + * ** Path / Path commands where user should be navigated, returned or redirected. + * + * - If path is '$.current' - current loaded path will be use. + * - If path is '$.requested' - requested path will be use. + * - If path is '$.parent' - parent of the current path will be use. + * - Any other string - use at is and assume it as path for navigation (URL path) + * + */ + path: string | '$.current' | '$.requested' | '$.parent'; + + /** + * ** Replacers to tune and finalize navigate back Path / Path commands. + */ + replacers?: Array>; + + /** + * ** Optional query params for navigation action. + */ + queryParams?: Params; + + /** + * ** Optional instruction for queryParams handling. + * + * - If not provided will fallback to default one 'merge'. + * - If provided and its value is null, it won't do any handling for queryParams. + */ + queryParamsHandling?: NavigationExtras['queryParamsHandling']; + + /** + * ** Optional instruction whether to use resolved path or config path. + * + * - TRUE - will use config path, which means use it as it's configured in the routing modules. + * - FALSE - will use resolved path to the current point. + */ + useConfigPath?: boolean; } /** * ** Taurus Route data with navigate to command. */ export interface TaurusRouteNavigateToData { - /** - * ** Field that has Navigate to command. - */ - navigateTo?: TaurusNavigateAction; + /** + * ** Field that has Navigate to command. + */ + navigateTo?: TaurusNavigateAction; } /** * ** Taurus Route data with navigate back command. */ export interface TaurusRouteNavigateBackData { - /** - * ** Field that has Navigate back command. - */ - navigateBack?: TaurusNavigateAction; + /** + * ** Field that has Navigate back command. + */ + navigateBack?: TaurusNavigateAction; } /** * ** Taurus Route data with redirect command. */ export interface TaurusRouteRedirectData { - /** - * ** Field that has Redirect command. - */ - redirect?: TaurusNavigateAction; + /** + * ** Field that has Redirect command. + */ + redirect?: TaurusNavigateAction; } /** * ** Custom type for Route Data with Generics. */ -export type TaurusRouteData = Record> = - T - & TaurusRouteNavigateToData - & TaurusRouteNavigateBackData - & TaurusRouteRedirectData - & Data; +export type TaurusRouteData< + T extends Record = Record +> = T & + TaurusRouteNavigateToData & + TaurusRouteNavigateBackData & + TaurusRouteRedirectData & + Data; /** * ** Taurus Route config. */ -export interface TaurusRoute extends Route { - /** - * @inheritDoc - * - * ** Static data configured per Route. - */ - data?: T; - - /** - * @inheritDoc - * - * ** Children Route configs object. - */ - children?: TaurusRoutes; +export interface TaurusRoute + extends Route { + /** + * @inheritDoc + * + * ** Static data configured per Route. + */ + data?: T; + + /** + * @inheritDoc + * + * ** Children Route configs object. + */ + children?: TaurusRoutes; } /** * ** Taurus Routes configs. */ -export type TaurusRoutes = TaurusRoute[]; +export type TaurusRoutes = + TaurusRoute[]; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/tasks/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/tasks/index.ts index a9552dbc58..e7255de981 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/tasks/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/tasks/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/tasks/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/tasks/public-api.ts index ba142389bd..484b60ff3c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/tasks/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/tasks/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/tasks/task.model.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/tasks/task.model.spec.ts index cf5f85815c..9e2f8e9c0d 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/tasks/task.model.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/tasks/task.model.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -10,47 +8,56 @@ import { CollectionsUtil } from '../../utils'; import { createTaskIdentifier, extractTaskFromIdentifier } from './task.model'; describe('Tasks', () => { - describe('|createTaskIdentifier|', () => { - it('should verify will return expected value', () => { - // Given - const task = 'create_entity'; - const dateNowISO = new Date().toISOString(); - const taskIdentifier = `${ task } __ ${ dateNowISO }`; - const dateISOSpy = spyOn(CollectionsUtil, 'dateISO').and.returnValue(dateNowISO); - const interpolateStringSpy = spyOn(CollectionsUtil, 'interpolateString').and.returnValue(taskIdentifier); - const expected = `${ task } __ ${ dateNowISO }`; - - // When - const response = createTaskIdentifier(task); - - // Then - expect(response).toEqual(expected); - expect(dateISOSpy).toHaveBeenCalled(); - // @ts-ignore - expect(interpolateStringSpy).toHaveBeenCalledWith('%s __ %s', task, dateNowISO); - }); - - it('should verify will return value undefined when no task provided', () => { - // When - const response = createTaskIdentifier(null); - - // Then - expect(response).toBeUndefined(); - }); - }); - - describe('|extractTaskFromIdentifier|', () => { - it('should verify will return Task from provided identifier', () => { - // Given - const dateNowISO = new Date().toISOString(); - const taskIdentifier = `delete_entity __ ${ dateNowISO }`; - const expected = 'delete_entity'; - - // When - const response = extractTaskFromIdentifier(taskIdentifier); - - // Then - expect(response).toEqual(expected); - }); - }); + describe('|createTaskIdentifier|', () => { + it('should verify will return expected value', () => { + // Given + const task = 'create_entity'; + const dateNowISO = new Date().toISOString(); + const taskIdentifier = `${task} __ ${dateNowISO}`; + const dateISOSpy = spyOn(CollectionsUtil, 'dateISO').and.returnValue( + dateNowISO + ); + const interpolateStringSpy = spyOn( + CollectionsUtil, + 'interpolateString' + ).and.returnValue(taskIdentifier); + const expected = `${task} __ ${dateNowISO}`; + + // When + const response = createTaskIdentifier(task); + + // Then + expect(response).toEqual(expected); + expect(dateISOSpy).toHaveBeenCalled(); + // @ts-ignore + expect(interpolateStringSpy).toHaveBeenCalledWith( + '%s __ %s', + task, + dateNowISO + ); + }); + + it('should verify will return value undefined when no task provided', () => { + // When + const response = createTaskIdentifier(null); + + // Then + expect(response).toBeUndefined(); + }); + }); + + describe('|extractTaskFromIdentifier|', () => { + it('should verify will return Task from provided identifier', () => { + // Given + const dateNowISO = new Date().toISOString(); + const taskIdentifier = `delete_entity __ ${dateNowISO}`; + const expected = 'delete_entity'; + + // When + const response = extractTaskFromIdentifier(taskIdentifier); + + // Then + expect(response).toEqual(expected); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/tasks/task.model.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/tasks/task.model.ts index 08f450af50..e3927d5a96 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/common/tasks/task.model.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/common/tasks/task.model.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -8,30 +6,32 @@ import { CollectionsUtil } from '../../utils'; const TASK_IDENTIFIER_SEPARATOR = ' __ '; -const TASK_IDENTIFIER_TEMPLATE = `%s${ TASK_IDENTIFIER_SEPARATOR }%s`; +const TASK_IDENTIFIER_TEMPLATE = `%s${TASK_IDENTIFIER_SEPARATOR}%s`; /** * ** Factory for Tasks identifiers. */ export const createTaskIdentifier = (task: string) => { - if (CollectionsUtil.isString(task)) { - return CollectionsUtil.interpolateString( - TASK_IDENTIFIER_TEMPLATE, - task, - CollectionsUtil.dateISO() - ); - } - - return undefined; + if (CollectionsUtil.isString(task)) { + return CollectionsUtil.interpolateString( + TASK_IDENTIFIER_TEMPLATE, + task, + CollectionsUtil.dateISO() + ); + } + + return undefined; }; /** * ** Extract Task from Tasks identifiers. */ -export const extractTaskFromIdentifier = (taskIdentifier: string) => { - if (CollectionsUtil.isString(taskIdentifier)) { - return taskIdentifier.split(TASK_IDENTIFIER_SEPARATOR)[0] as T; - } - - return null; +export const extractTaskFromIdentifier = ( + taskIdentifier: string +) => { + if (CollectionsUtil.isString(taskIdentifier)) { + return taskIdentifier.split(TASK_IDENTIFIER_SEPARATOR)[0] as T; + } + + return null; }; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/css/colors.scss b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/css/colors.scss index 707e22e936..0012ed4cd3 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/css/colors.scss +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/css/colors.scss @@ -7,7 +7,7 @@ $gray1: #747474; $gray2: #eee; $gray3: #ddd; $gray4: #ccc; -$gray5: #8C8C8C; +$gray5: #8c8c8c; $black: #000; $black1: #313131; $error-red: #e62700; @@ -16,17 +16,17 @@ $dark-text: #adbbc4; $red2: #c92100; $ready-green: #318700; $darkblue: rgb(0, 106, 144); -$lighterBlue: #89CBDF; -$lightblue: #49AFD9; -$darkButtonHoverBlue: #0095D3; +$lighterBlue: #89cbdf; +$lightblue: #49afd9; +$darkButtonHoverBlue: #0095d3; $blue3: #49afd9; $blue4: #57c7ea; $blue5: #0079b8; -$inactiveGray: #95A4B2; -$bgcolor: #25333D; +$inactiveGray: #95a4b2; +$bgcolor: #25333d; $bgcolorDark: #0f171c; $bgcolorTextareaDark: #17242b; -$white: #FFF; +$white: #fff; $focused-control-border: #6bc1e3; $dark-theme-text: #acbac3; $label-danger-color: #a32100; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/css/screen-sizes.scss b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/css/screen-sizes.scss index ca64f13dcf..0aaabf8234 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/css/screen-sizes.scss +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/css/screen-sizes.scss @@ -25,25 +25,25 @@ $xxl-min-width: 1919px; $min-el-size: 310px; .medium-and-up { - @media screen and (max-width: $medium-width2) { - display: none !important; - } + @media screen and (max-width: $medium-width2) { + display: none !important; + } } .small-and-up { - @media screen and (max-width: $xs-max) { - display: none !important; - } + @media screen and (max-width: $xs-max) { + display: none !important; + } } .medium-and-down { - @media screen and (min-width: $medium-width) { - display: none !important; - } + @media screen and (min-width: $medium-width) { + display: none !important; + } } .small-and-down { - @media screen and (min-width: $small-width) { - display: none !important; - } + @media screen and (min-width: $small-width) { + display: none !important; + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/css/utils.scss b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/css/utils.scss index 914f818af9..4c213d9f73 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/css/utils.scss +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/css/utils.scss @@ -1,4 +1,3 @@ - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -26,14 +25,14 @@ * ``` */ @mixin light-theme { - :host-context(body:not([cds-theme])) &, - :host-context(body[cds-theme='light']) & { - @content; - } + :host-context(body:not([cds-theme])) &, + :host-context(body[cds-theme='light']) & { + @content; + } } @mixin dark-theme { - :host-context(body[cds-theme='dark']) & { - @content; - } + :host-context(body[cds-theme='dark']) & { + @content; + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/index.ts index eb4cd3584c..b474de5042 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/animation-constants.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/animation-constants.ts index 8654e82ea5..ad22bc5453 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/animation-constants.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/animation-constants.ts @@ -17,7 +17,6 @@ export const atomicSecondaryEnterTiming = 400; export const atomicSecondaryLeaveCurve = 'cubic-bezier(0, 1.5, 0.5, 1)'; export const atomicSecondaryLeaveTiming = 100; - // COMPONENT Animations // primary export const componentPrimaryEnterCurve = 'cubic-bezier(0,.99,0,.99)'; @@ -32,11 +31,10 @@ export const pagePrimaryEnterTiming = 250; export const pagePrimaryLeaveCurve = 'cubic-bezier(0,.99,0,.99)'; export const pagePrimaryLeaveTiming = 200; - // PROGRESS Animations // primary export const progressPrimaryCurve = 'cubic-bezier(.17,.4,.8,.79)'; -export const progressPrimaryTiming = 790; +export const progressPrimaryTiming = 790; // secondary export const progressSecondaryCurve = 'cubic-bezier(.34,.01,.39,1)'; @@ -67,5 +65,5 @@ export const STAGGER_DURATION = 200; const ANIMATION_MULTIPLIER = 1; export function multiply(value: number) { - return value * ANIMATION_MULTIPLIER; + return value * ANIMATION_MULTIPLIER; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/copy-to-clipboard-button.component.html b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/copy-to-clipboard-button.component.html index 449ab76ebe..889de4c216 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/copy-to-clipboard-button.component.html +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/copy-to-clipboard-button.component.html @@ -4,48 +4,52 @@ --> - - + + - - {{tooltip}} - - + + {{tooltip}} + + - - {{copyAlert}} + + {{copyAlert}} - + diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/copy-to-clipboard-button.component.scss b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/copy-to-clipboard-button.component.scss index 9bd2f0a806..d47da737fd 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/copy-to-clipboard-button.component.scss +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/copy-to-clipboard-button.component.scss @@ -4,59 +4,63 @@ */ span.copy-button { - button { - margin-right: 0px !important; - border: none; - padding: 0; - } + button { + margin-right: 0px !important; + border: none; + padding: 0; + } } .flip-horizontal-bottom { - -webkit-animation: flip-horizontal-bottom 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; - animation: flip-horizontal-bottom 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; + -webkit-animation: flip-horizontal-bottom 0.5s + cubic-bezier(0.455, 0.03, 0.515, 0.955) both; + animation: flip-horizontal-bottom 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) + both; } .flip-horizontal-reverse { - -webkit-animation: flip-horizontal-reverse 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; - animation: flip-horizontal-reverse 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; + -webkit-animation: flip-horizontal-reverse 0.5s + cubic-bezier(0.455, 0.03, 0.515, 0.955) both; + animation: flip-horizontal-reverse 0.5s + cubic-bezier(0.455, 0.03, 0.515, 0.955) both; } .anim-object { - transform-style: preserve-3d; - display: block; - outline: none; + transform-style: preserve-3d; + display: block; + outline: none; } .face { - position: absolute; - width: 100%; - height: 100%; - backface-visibility: hidden; - border-radius: 3px; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - transform: rotateX(0deg); + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + border-radius: 3px; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + transform: rotateX(0deg); } .front { - z-index: 20; + z-index: 20; - &.face-label { - position: relative; - } + &.face-label { + position: relative; + } } .back { - z-index: 10; - transform: rotateX(180deg); - &.face-label { - top: 0px; - } + z-index: 10; + transform: rotateX(180deg); + &.face-label { + top: 0px; + } } .hide-tooltip { - display: none; + display: none; } /** @@ -65,45 +69,45 @@ span.copy-button { * ---------------------------------------- */ @-webkit-keyframes flip-horizontal-bottom { - 0% { - -webkit-transform: rotateX(0); - transform: rotateX(0); - } - 100% { - -webkit-transform: rotateX(-180deg); - transform: rotateX(-180deg); - } + 0% { + -webkit-transform: rotateX(0); + transform: rotateX(0); + } + 100% { + -webkit-transform: rotateX(-180deg); + transform: rotateX(-180deg); + } } @keyframes flip-horizontal-bottom { - 0% { - -webkit-transform: rotateX(0); - transform: rotateX(0); - } - 100% { - -webkit-transform: rotateX(-180deg); - transform: rotateX(-180deg); - } + 0% { + -webkit-transform: rotateX(0); + transform: rotateX(0); + } + 100% { + -webkit-transform: rotateX(-180deg); + transform: rotateX(-180deg); + } } @-webkit-keyframes flip-horizontal-reverse { - 0% { - -webkit-transform: rotateX(-180deg); - transform: rotateX(-180deg); - } - 100% { - -webkit-transform: rotateX(0); - transform: rotateX(0); - } + 0% { + -webkit-transform: rotateX(-180deg); + transform: rotateX(-180deg); + } + 100% { + -webkit-transform: rotateX(0); + transform: rotateX(0); + } } @keyframes flip-horizontal-reverse { - 0% { - -webkit-transform: rotateX(-180deg); - transform: rotateX(-180deg); - } - 100% { - -webkit-transform: rotateX(0); - transform: rotateX(0); - } + 0% { + -webkit-transform: rotateX(-180deg); + transform: rotateX(-180deg); + } + 100% { + -webkit-transform: rotateX(0); + transform: rotateX(0); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/copy-to-clipboard-button.component.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/copy-to-clipboard-button.component.spec.ts index a1a034fac8..3e056770c3 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/copy-to-clipboard-button.component.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/copy-to-clipboard-button.component.spec.ts @@ -1,100 +1,99 @@ - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 */ import { ViewChild, Component } from '@angular/core'; -import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing'; +import { + ComponentFixture, + TestBed, + fakeAsync, + tick +} from '@angular/core/testing'; -import { ClarityModule } from "@clr/angular"; +import { ClarityModule } from '@clr/angular'; import { VdkCopyToClipboardButtonComponent } from './copy-to-clipboard-button.component'; describe('CopyToClipboardButtonComponent', () => { - let component: VdkCopyToClipboardButtonComponent; - let hostComponent: TestHostComponent; - let fixture: ComponentFixture; - let element: any; - - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [ - ClarityModule, - ], - declarations: [ - TestHostComponent, - VdkCopyToClipboardButtonComponent - ] - }); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(TestHostComponent); - element = fixture.debugElement.nativeElement; - hostComponent = fixture.componentInstance; - component = hostComponent.component; - }); - - describe('when no btnLabel specified', () => { - beforeEach(() => { - fixture.detectChanges(); - }); - - it('should initialize size properly', () => { - component.ngOnInit(); - expect(component.bounds).toBe('22px'); - component.size = 24; - component.ngOnInit(); - expect(component.bounds).toBe('30px'); - }); - - it('should copy the value to the clipboard', () => { - spyOn(component, 'copyToClipboard'); - component.doCopy(); - expect(component.copyToClipboard).toHaveBeenCalledWith('Test string'); - }); - - it('should set the proper "copied" status', fakeAsync(() => { - component.doCopy(); - expect(component.copied).toBeTruthy(); - tick(1500); - expect(component.copied).toBeFalsy(); - })); - - // it('should show the copy icon', () => { - // expect(element).toHaveRendered('.copy-button'); - // }); - - // it('should not show the copy button with text', () => { - // expect(element).not.toHaveRendered('button.btn.btn-outline'); - // }); - }); - - // describe('when btnLabel specified', () => { - // beforeEach(() => { - // component.btnLabel = 'COPY TO CLIPBOARD'; - // fixture.detectChanges(); - // }); - // - // it('should show the copy button with text', () => { - // expect(element).toHaveRendered('button.btn.btn-outline'); - // - // let label = element.querySelector('button .face-label span'); - // expect(label.innerText.trim()).toEqual('COPY TO CLIPBOARD'); - // }); - // }); + let component: VdkCopyToClipboardButtonComponent; + let hostComponent: TestHostComponent; + let fixture: ComponentFixture; + let element: any; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ClarityModule], + declarations: [TestHostComponent, VdkCopyToClipboardButtonComponent] + }); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(TestHostComponent); + element = fixture.debugElement.nativeElement; + hostComponent = fixture.componentInstance; + component = hostComponent.component; + }); + + describe('when no btnLabel specified', () => { + beforeEach(() => { + fixture.detectChanges(); + }); + + it('should initialize size properly', () => { + component.ngOnInit(); + expect(component.bounds).toBe('22px'); + component.size = 24; + component.ngOnInit(); + expect(component.bounds).toBe('30px'); + }); + + it('should copy the value to the clipboard', () => { + spyOn(component, 'copyToClipboard'); + component.doCopy(); + expect(component.copyToClipboard).toHaveBeenCalledWith('Test string'); + }); + + it('should set the proper "copied" status', fakeAsync(() => { + component.doCopy(); + expect(component.copied).toBeTruthy(); + tick(1500); + expect(component.copied).toBeFalsy(); + })); + + // it('should show the copy icon', () => { + // expect(element).toHaveRendered('.copy-button'); + // }); + + // it('should not show the copy button with text', () => { + // expect(element).not.toHaveRendered('button.btn.btn-outline'); + // }); + }); + + // describe('when btnLabel specified', () => { + // beforeEach(() => { + // component.btnLabel = 'COPY TO CLIPBOARD'; + // fixture.detectChanges(); + // }); + // + // it('should show the copy button with text', () => { + // expect(element).toHaveRendered('button.btn.btn-outline'); + // + // let label = element.querySelector('button .face-label span'); + // expect(label.innerText.trim()).toEqual('COPY TO CLIPBOARD'); + // }); + // }); }); @Component({ - template: ` - - - ` + template: ` + + + ` }) class TestHostComponent { - @ViewChild(VdkCopyToClipboardButtonComponent, { static: true }) component: VdkCopyToClipboardButtonComponent; + @ViewChild(VdkCopyToClipboardButtonComponent, { static: true }) + component: VdkCopyToClipboardButtonComponent; - public value = 'Test string'; + public value = 'Test string'; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/copy-to-clipboard-button.component.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/copy-to-clipboard-button.component.ts index 7230cfaaff..098cbb4f49 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/copy-to-clipboard-button.component.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/copy-to-clipboard-button.component.ts @@ -4,14 +4,14 @@ */ import { - ElementRef, - HostBinding, - Output, - EventEmitter, - Component, - OnInit, - Input, - ViewChild, + ElementRef, + HostBinding, + Output, + EventEmitter, + Component, + OnInit, + Input, + ViewChild } from '@angular/core'; import { VdkSimpleTranslateService } from '../../ngx-utils'; @@ -20,107 +20,117 @@ import { TRANSLATIONS } from './copy-to-clipboard-button.l10n'; const SHOW_CHECKBOX_TIMEOUT = 1500; @Component({ - selector: 'vdk-copy-to-clipboard-button', - templateUrl: './copy-to-clipboard-button.component.html', - styleUrls: ['./copy-to-clipboard-button.component.scss'] + selector: 'vdk-copy-to-clipboard-button', + templateUrl: './copy-to-clipboard-button.component.html', + styleUrls: ['./copy-to-clipboard-button.component.scss'] }) export class VdkCopyToClipboardButtonComponent implements OnInit { - @ViewChild('area', { read: ElementRef, static: false }) area: ElementRef; - - @HostBinding('class') @Input('class') classList: string = ''; - - @Input() value: string; - @Input() ariaLabel: string = ""; - @Input() copyAlert: string; - @Input() size = 16; - @Input() tooltip = ''; - @Input() btnLabel = ''; // if no label specified, show the normal copy icon - @Input() btnClasses = ['btn-outline']; // if no label specified, show the normal copy icon - @Input() disabled: boolean = false; - @Input() tooltipDirection = 'top-left'; - - @Output() copyClick = new EventEmitter(); - - private firstLoad = true; // show correct icon first - - btnClassesToApply: string; - bounds: string; - hasProjectedContent: boolean = false; - isSafari: boolean = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); - copied: boolean = false; - - constructor(private el: ElementRef, public translateService: VdkSimpleTranslateService) { - this.translateService.loadTranslationsForComponent('copy-to-clipboard-button', TRANSLATIONS); - } - - ngOnInit() { - this.bounds = (this.size + 6) + 'px'; - - this.hasProjectedContent = this.el.nativeElement.innerText.trim(); - - this.calculateClassesToApply(); - this.copyAlert = this.copyAlert || this.translateService.translate('copy-to-clipboard-button.copied'); - } - - calculateClassesToApply() { - let classes: Array = []; - - if (!this.btnLabel.length) { - classes.push('icon-btn'); - } - - if (this.btnLabel.length) { - classes = classes.concat(this.btnClasses); - } - - if (this.disabled) { - classes.push('disabled'); - } - - this.btnClassesToApply = classes.join(' ') + ' ' + this.classList; - } - - ngOnChanges() { - this.calculateClassesToApply(); - } - - copyToClipboard(val: string) { - let myWindow: any = window; - - let onCopy = (e: ClipboardEvent) => { - e.preventDefault(); - - if (e.clipboardData) { - e.clipboardData.setData('text/plain', val); - } else if (myWindow.clipboardData) { - myWindow.clipboardData.setData('Text', val); - } - - myWindow.removeEventListener('copy', onCopy); - }; - - if (this.isSafari) { - this.area.nativeElement.value = val; - this.area.nativeElement.select(); - navigator.clipboard?.writeText(val); - } - - myWindow.addEventListener('copy', onCopy); - - if (myWindow.clipboardData && myWindow.clipboardData.setData) { - myWindow.clipboardData.setData('Text', val); - } else { - document.execCommand('copy'); - } - } - - doCopy() { - this.copyToClipboard(this.value); - this.copyClick.emit(); - this.firstLoad = false; - this.copied = true; - setTimeout(() => { - this.copied = false; - }, SHOW_CHECKBOX_TIMEOUT); - } + @ViewChild('area', { read: ElementRef, static: false }) area: ElementRef; + + @HostBinding('class') @Input('class') classList: string = ''; + + @Input() value: string; + @Input() ariaLabel: string = ''; + @Input() copyAlert: string; + @Input() size = 16; + @Input() tooltip = ''; + @Input() btnLabel = ''; // if no label specified, show the normal copy icon + @Input() btnClasses = ['btn-outline']; // if no label specified, show the normal copy icon + @Input() disabled: boolean = false; + @Input() tooltipDirection = 'top-left'; + + @Output() copyClick = new EventEmitter(); + + private firstLoad = true; // show correct icon first + + btnClassesToApply: string; + bounds: string; + hasProjectedContent: boolean = false; + isSafari: boolean = /^((?!chrome|android).)*safari/i.test( + navigator.userAgent + ); + copied: boolean = false; + + constructor( + private el: ElementRef, + public translateService: VdkSimpleTranslateService + ) { + this.translateService.loadTranslationsForComponent( + 'copy-to-clipboard-button', + TRANSLATIONS + ); + } + + ngOnInit() { + this.bounds = this.size + 6 + 'px'; + + this.hasProjectedContent = this.el.nativeElement.innerText.trim(); + + this.calculateClassesToApply(); + this.copyAlert = + this.copyAlert || + this.translateService.translate('copy-to-clipboard-button.copied'); + } + + calculateClassesToApply() { + let classes: Array = []; + + if (!this.btnLabel.length) { + classes.push('icon-btn'); + } + + if (this.btnLabel.length) { + classes = classes.concat(this.btnClasses); + } + + if (this.disabled) { + classes.push('disabled'); + } + + this.btnClassesToApply = classes.join(' ') + ' ' + this.classList; + } + + ngOnChanges() { + this.calculateClassesToApply(); + } + + copyToClipboard(val: string) { + let myWindow: any = window; + + let onCopy = (e: ClipboardEvent) => { + e.preventDefault(); + + if (e.clipboardData) { + e.clipboardData.setData('text/plain', val); + } else if (myWindow.clipboardData) { + myWindow.clipboardData.setData('Text', val); + } + + myWindow.removeEventListener('copy', onCopy); + }; + + if (this.isSafari) { + this.area.nativeElement.value = val; + this.area.nativeElement.select(); + navigator.clipboard?.writeText(val); + } + + myWindow.addEventListener('copy', onCopy); + + if (myWindow.clipboardData && myWindow.clipboardData.setData) { + myWindow.clipboardData.setData('Text', val); + } else { + document.execCommand('copy'); + } + } + + doCopy() { + this.copyToClipboard(this.value); + this.copyClick.emit(); + this.firstLoad = false; + this.copied = true; + setTimeout(() => { + this.copied = false; + }, SHOW_CHECKBOX_TIMEOUT); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/copy-to-clipboard-button.l10n.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/copy-to-clipboard-button.l10n.ts index c8ef3cefc9..c2f689c1af 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/copy-to-clipboard-button.l10n.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/copy-to-clipboard-button.l10n.ts @@ -4,40 +4,40 @@ */ export const TRANSLATIONS = { - 'en': { - 'copied': 'Copied' - }, - 'de': { - 'copied': 'Kopiert' - }, - 'es': { - 'copied': 'Copiado' - }, - 'fr': { - 'copied': 'Copié' - }, - 'ja': { - 'copied': 'コピー' - }, - 'ko': { - 'copied': '복사' - }, - 'zh_TW': { - 'copied': '已复制' - }, - 'zh_CN': { - 'copied': '已復制' - }, - 'it': { - 'copied': 'Copiato' - }, - 'nl': { - 'copied': 'Gekopieerd' - }, - 'pt': { - 'copied': 'Copiado' - }, - 'ru': { - 'copied': 'Скопировано' - }, + en: { + copied: 'Copied' + }, + de: { + copied: 'Kopiert' + }, + es: { + copied: 'Copiado' + }, + fr: { + copied: 'Copié' + }, + ja: { + copied: 'コピー' + }, + ko: { + copied: '복사' + }, + zh_TW: { + copied: '已复制' + }, + zh_CN: { + copied: '已復制' + }, + it: { + copied: 'Copiato' + }, + nl: { + copied: 'Gekopieerd' + }, + pt: { + copied: 'Copiado' + }, + ru: { + copied: 'Скопировано' + } }; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/index.ts index 35266a99a0..6a92d47a01 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/index.ts @@ -1,16 +1,14 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 */ -import { Type } from "@angular/core"; +import { Type } from '@angular/core'; import { VdkCopyToClipboardButtonComponent } from './copy-to-clipboard-button.component'; -export * from "./copy-to-clipboard-button.component"; +export * from './copy-to-clipboard-button.component'; export const COPY_TO_CLIPBPOARD_BUTTON_DIRECTIVES: Type[] = [ - VdkCopyToClipboardButtonComponent, + VdkCopyToClipboardButtonComponent ]; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/public-api.ts index ba142389bd..484b60ff3c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/copy-to-clipboard-button/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/empty-state-placeholder.component.html b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/empty-state-placeholder.component.html index d1aa65c6d4..a36163882d 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/empty-state-placeholder.component.html +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/empty-state-placeholder.component.html @@ -8,15 +8,16 @@ -
    - {{title}} +
    + {{title}}
    -
    - {{description}} +
    + {{description}}
    diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/empty-state-placeholder.component.scss b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/empty-state-placeholder.component.scss index 7c65c41eae..364c090591 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/empty-state-placeholder.component.scss +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/empty-state-placeholder.component.scss @@ -3,47 +3,47 @@ * SPDX-License-Identifier: Apache-2.0 */ -$text-dark: #919FA8; +$text-dark: #919fa8; $text-light: #67747d; :host { - display: flex; - align-items: center; - flex-direction: column; - margin: 1rem 0; - - cds-icon { - fill: #CCC; - } - - .empty-placeholder-heading { - font-size: 18px; - color: $text-light; - margin-top: 18px; - line-height: 48px; - font-weight: 200; - } - - .empty-placeholder-description { - margin-top: 0; - font-size: 13px; - color: $text-light; - margin-bottom: 18px; - font-weight: 200; - } + display: flex; + align-items: center; + flex-direction: column; + margin: 1rem 0; + + cds-icon { + fill: #ccc; + } + + .empty-placeholder-heading { + font-size: 18px; + color: $text-light; + margin-top: 18px; + line-height: 48px; + font-weight: 200; + } + + .empty-placeholder-description { + margin-top: 0; + font-size: 13px; + color: $text-light; + margin-bottom: 18px; + font-weight: 200; + } } - :host ::ng-deep button:last-child { - margin-right: 0 !important; + margin-right: 0 !important; } :host ::ng-deep button.btn-link { - margin-top: 0 !important; + margin-top: 0 !important; } :host-context(.dark) { - h2, h3 { - color: $text-dark; - } + h2, + h3 { + color: $text-dark; + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/empty-state-placeholder.component.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/empty-state-placeholder.component.ts index e96e5240a5..2d8d17668f 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/empty-state-placeholder.component.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/empty-state-placeholder.component.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -8,13 +6,13 @@ import { Component, Input } from '@angular/core'; @Component({ - selector: 'vdk-empty-state-placeholder', - templateUrl: './empty-state-placeholder.component.html', - styleUrls: ["./empty-state-placeholder.component.scss"] + selector: 'vdk-empty-state-placeholder', + templateUrl: './empty-state-placeholder.component.html', + styleUrls: ['./empty-state-placeholder.component.scss'] }) export class VdkEmptyStatePlaceholderComponent { - @Input('title') title: string; - @Input() icon: string; - @Input() description: string; - @Input() headingLevel = 2; + @Input('title') title: string; + @Input() icon: string; + @Input() description: string; + @Input() headingLevel = 2; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/empty-state-placeholder.module.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/empty-state-placeholder.module.ts index d0d6729040..1882916fa2 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/empty-state-placeholder.module.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/empty-state-placeholder.module.ts @@ -1,27 +1,16 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 */ -import { CommonModule } from "@angular/common"; -import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core"; -import { VdkEmptyStatePlaceholderComponent } from "./empty-state-placeholder.component"; +import { CommonModule } from '@angular/common'; +import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; +import { VdkEmptyStatePlaceholderComponent } from './empty-state-placeholder.component'; @NgModule({ - imports: [ - CommonModule, - ], - declarations: [ - VdkEmptyStatePlaceholderComponent, - ], - exports: [ - VdkEmptyStatePlaceholderComponent, - ], - schemas: [ - CUSTOM_ELEMENTS_SCHEMA, - ], + imports: [CommonModule], + declarations: [VdkEmptyStatePlaceholderComponent], + exports: [VdkEmptyStatePlaceholderComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA] }) -export class VdkEmptyStatePlaceholderModule { -} +export class VdkEmptyStatePlaceholderModule {} diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/index.ts index 2877606b57..2b22ac2626 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/index.ts @@ -1,9 +1,7 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 */ -export * from "./empty-state-placeholder.component"; -export * from "./empty-state-placeholder.module"; +export * from './empty-state-placeholder.component'; +export * from './empty-state-placeholder.module'; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/public-api.ts index ba142389bd..484b60ff3c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/empty-state-placeholder/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/form-section-container.component.html b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/form-section-container.component.html index 366023234d..da74e157a5 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/form-section-container.component.html +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/form-section-container.component.html @@ -3,50 +3,58 @@ ~ SPDX-License-Identifier: Apache-2.0 --> - -
    - - + +
    + - -
    + +
    -
    - - -
    +
    + +
    -
    - - -
    +
    + +
    -
    - - -
    +
    + + +
    diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/form-section-container.component.scss b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/form-section-container.component.scss index 4e07a40b5f..706cc655d5 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/form-section-container.component.scss +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/form-section-container.component.scss @@ -1,17 +1,15 @@ - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 */ :host ::ng-deep { - - .section-title { - display: inline-block; - } + .section-title { + display: inline-block; + } } .csp-edit-button { - margin: 0 0; - cursor: pointer; + margin: 0 0; + cursor: pointer; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/form-section-container.component.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/form-section-container.component.spec.ts index 6606b01a94..8048c18179 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/form-section-container.component.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/form-section-container.component.spec.ts @@ -4,17 +4,25 @@ */ import { VdkFormSectionContainerComponent } from './form-section-container.component'; -import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; -import { Component, DebugElement, ViewChild } from "@angular/core"; -import { ReactiveFormsModule, FormBuilder, FormGroup, FormControl } from '@angular/forms'; +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { Component, DebugElement, ViewChild } from '@angular/core'; +import { + ReactiveFormsModule, + FormBuilder, + FormGroup, + FormControl +} from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { By } from "@angular/platform-browser"; +import { By } from '@angular/platform-browser'; -import { ClarityModule } from "@clr/angular"; +import { ClarityModule } from '@clr/angular'; import { FORM_STATE, VDKFormState } from './form-section-container.component'; import { VdkFormSectionComponent } from '../form-section'; -import { VdkSimpleTranslateModule, VdkSimpleTranslateService } from "../../ngx-utils"; +import { + VdkSimpleTranslateModule, + VdkSimpleTranslateService +} from '../../ngx-utils'; let fixture: ComponentFixture; let hostComp: TestHostComponent; @@ -22,171 +30,211 @@ let page: PageObject; let el: Element; class PageObject { - fixtureElement: DebugElement; - - constructor() { - } - - populateLocators(): void { - this.fixtureElement = fixture.debugElement.query(By.css("vdk-form-section-container")); - } - - getReadOnlySectionElements(): NodeListOf { - return el.querySelectorAll(".form-section-readonly"); - } - - getEditSectionElements(): NodeListOf { - return el.querySelectorAll(".form-section-edit"); - } - - setInputValue(inputName: string, inputValue: any) { - hostComp.editProfileForm.controls[inputName].setValue(inputValue); - hostComp.editProfileForm.controls[inputName].markAsDirty(); - } - - getSaveBtnSpan(): HTMLElement | undefined { - const span = fixture.debugElement.queryAll(By.css('.csp-save-button span')); - if (span && span.length > 0) { - return span[0].nativeElement; - } - return undefined; - } + fixtureElement: DebugElement; + + constructor() {} + + populateLocators(): void { + this.fixtureElement = fixture.debugElement.query( + By.css('vdk-form-section-container') + ); + } + + getReadOnlySectionElements(): NodeListOf { + return el.querySelectorAll('.form-section-readonly'); + } + + getEditSectionElements(): NodeListOf { + return el.querySelectorAll('.form-section-edit'); + } + + setInputValue(inputName: string, inputValue: any) { + hostComp.editProfileForm.controls[inputName].setValue(inputValue); + hostComp.editProfileForm.controls[inputName].markAsDirty(); + } + + getSaveBtnSpan(): HTMLElement | undefined { + const span = fixture.debugElement.queryAll(By.css('.csp-save-button span')); + if (span && span.length > 0) { + return span[0].nativeElement; + } + return undefined; + } } @Component({ - template: ` -
    - - - -
    - Title -
    - -
    -
    -
    - -
    -
    - firstName -
    -
    - -
    - -
    -
    -
    - -
    -
    - -
    -
    -
    -     -
    ` - + template: `
    + +
    Title
    + +
    +
    +
    + +
    +
    + firstName +
    +
    +
    + +
    +
    +
    + +
    +
    + +
    +
    +
    +     +
    ` }) class TestHostComponent { - @ViewChild(VdkFormSectionContainerComponent, { static: false }) child: VdkFormSectionContainerComponent; - formState: VDKFormState; - - editProfileForm = new FormGroup({ - "firstName": new FormControl(), - }); + @ViewChild(VdkFormSectionContainerComponent, { static: false }) + child: VdkFormSectionContainerComponent; + formState: VDKFormState; + editProfileForm = new FormGroup({ + firstName: new FormControl() + }); } -describe("Form Section Container Component", () => { - function createComponent() { - fixture = TestBed.createComponent(TestHostComponent); - hostComp = fixture.componentInstance; - el = fixture.nativeElement; - fixture.detectChanges(); - page = new PageObject(); - page.populateLocators(); - } - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [ - ReactiveFormsModule, - VdkSimpleTranslateModule, - BrowserAnimationsModule, - ClarityModule, - ], - providers: [ - VdkSimpleTranslateService, - FormBuilder - ], - declarations: [ - TestHostComponent, - VdkFormSectionComponent, - VdkFormSectionContainerComponent, - ] - }); - - createComponent(); - fixture.detectChanges(); - })); - - it("should project .title content correctly", () => { - expect(el.querySelector('.section-title').textContent).toContain('Title'); - }); - - it("should readOnly and Edit sections to be toggled on Edit", () => { - expect(page.getReadOnlySectionElements().length).toBe(1, "Readonly Section shown initially"); - expect(page.getEditSectionElements().length).toBe(0, "Edit section hidden initially"); - expect(el.querySelectorAll(".csp-edit-button").length).toBe(1, "Edit button shown initially"); - const editButton: HTMLInputElement = el.querySelector(".csp-edit-button"); - editButton.click(); - fixture.detectChanges(); - - expect(page.getReadOnlySectionElements().length).toBe(0, "Readonly section hidden on Edit button"); - expect(page.getEditSectionElements().length).toBe(1, "Edit section shown on Edit button"); - }); - - it("should readOnly and Edit sections to be toggled on Cancel", () => { - const editButton: HTMLInputElement = el.querySelector(".csp-edit-button"); - editButton.click(); - fixture.detectChanges(); - - expect(el.querySelectorAll(".csp-cancel-button").length).toBe(1, "Cancel button to be shown"); - const cancelButton: HTMLInputElement = el.querySelector(".csp-cancel-button"); - cancelButton.click(); - fixture.detectChanges(); - - expect(page.getReadOnlySectionElements().length).toBe(1, "Readonly section shown on Cancel"); - expect(page.getEditSectionElements().length).toBe(0, "Edit section hidden on Cancel"); - }); - - - it("should show Readonly and Edit section after save", () => { - const editButton: HTMLInputElement = el.querySelector(".csp-edit-button"); - editButton.click(); - fixture.detectChanges(); - - page.setInputValue('firstName', 'firstName'); - expect(el.querySelectorAll(".csp-save-button").length).toBe(1, "Save button shown"); - const saveButton: HTMLInputElement = el.querySelector(".csp-save-button"); - expect(page.getSaveBtnSpan().innerText.trim()).toBe('Save', "save btn shown"); - saveButton.click(); - fixture.detectChanges(); - - expect(saveButton.disabled).toEqual(true, "Save to be disabled"); - hostComp.formState = new VDKFormState(FORM_STATE.CAN_EDIT); - fixture.detectChanges(); - - expect(page.getReadOnlySectionElements().length).toBe(1, "Readonly Section shown"); - expect(page.getEditSectionElements().length).toBe(0, "Edit Section hidden"); - }); - +describe('Form Section Container Component', () => { + function createComponent() { + fixture = TestBed.createComponent(TestHostComponent); + hostComp = fixture.componentInstance; + el = fixture.nativeElement; + fixture.detectChanges(); + page = new PageObject(); + page.populateLocators(); + } + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + imports: [ + ReactiveFormsModule, + VdkSimpleTranslateModule, + BrowserAnimationsModule, + ClarityModule + ], + providers: [VdkSimpleTranslateService, FormBuilder], + declarations: [ + TestHostComponent, + VdkFormSectionComponent, + VdkFormSectionContainerComponent + ] + }); + + createComponent(); + fixture.detectChanges(); + })); + + it('should project .title content correctly', () => { + expect(el.querySelector('.section-title').textContent).toContain('Title'); + }); + + it('should readOnly and Edit sections to be toggled on Edit', () => { + expect(page.getReadOnlySectionElements().length).toBe( + 1, + 'Readonly Section shown initially' + ); + expect(page.getEditSectionElements().length).toBe( + 0, + 'Edit section hidden initially' + ); + expect(el.querySelectorAll('.csp-edit-button').length).toBe( + 1, + 'Edit button shown initially' + ); + const editButton: HTMLInputElement = ( + el.querySelector('.csp-edit-button') + ); + editButton.click(); + fixture.detectChanges(); + + expect(page.getReadOnlySectionElements().length).toBe( + 0, + 'Readonly section hidden on Edit button' + ); + expect(page.getEditSectionElements().length).toBe( + 1, + 'Edit section shown on Edit button' + ); + }); + + it('should readOnly and Edit sections to be toggled on Cancel', () => { + const editButton: HTMLInputElement = ( + el.querySelector('.csp-edit-button') + ); + editButton.click(); + fixture.detectChanges(); + + expect(el.querySelectorAll('.csp-cancel-button').length).toBe( + 1, + 'Cancel button to be shown' + ); + const cancelButton: HTMLInputElement = ( + el.querySelector('.csp-cancel-button') + ); + cancelButton.click(); + fixture.detectChanges(); + + expect(page.getReadOnlySectionElements().length).toBe( + 1, + 'Readonly section shown on Cancel' + ); + expect(page.getEditSectionElements().length).toBe( + 0, + 'Edit section hidden on Cancel' + ); + }); + + it('should show Readonly and Edit section after save', () => { + const editButton: HTMLInputElement = ( + el.querySelector('.csp-edit-button') + ); + editButton.click(); + fixture.detectChanges(); + + page.setInputValue('firstName', 'firstName'); + expect(el.querySelectorAll('.csp-save-button').length).toBe( + 1, + 'Save button shown' + ); + const saveButton: HTMLInputElement = ( + el.querySelector('.csp-save-button') + ); + expect(page.getSaveBtnSpan().innerText.trim()).toBe( + 'Save', + 'save btn shown' + ); + saveButton.click(); + fixture.detectChanges(); + + expect(saveButton.disabled).toEqual(true, 'Save to be disabled'); + hostComp.formState = new VDKFormState(FORM_STATE.CAN_EDIT); + fixture.detectChanges(); + + expect(page.getReadOnlySectionElements().length).toBe( + 1, + 'Readonly Section shown' + ); + expect(page.getEditSectionElements().length).toBe(0, 'Edit Section hidden'); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/form-section-container.component.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/form-section-container.component.ts index f736632652..5d1577c7b1 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/form-section-container.component.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/form-section-container.component.ts @@ -4,167 +4,187 @@ */ import { - Component, - Output, - EventEmitter, - Input, - Host, - Optional, - ChangeDetectionStrategy, - ChangeDetectorRef, - ViewChild, - ElementRef -} from "@angular/core"; -import { FormGroupDirective } from "@angular/forms"; -import { ClrLoadingState } from "@clr/angular"; + Component, + Output, + EventEmitter, + Input, + Host, + Optional, + ChangeDetectionStrategy, + ChangeDetectorRef, + ViewChild, + ElementRef +} from '@angular/core'; +import { FormGroupDirective } from '@angular/forms'; +import { ClrLoadingState } from '@clr/angular'; export enum FORM_STATE { - VIEW, - CAN_EDIT, - EDIT, - ERROR, - SUBMIT + VIEW, + CAN_EDIT, + EDIT, + ERROR, + SUBMIT } export class VDKFormState { - state: FORM_STATE; - - /** - * Optional. The section with this name identifier will be excluded from the state change. - */ - emittingSection: string; - - /** - * Optional. - * All the sections in the array will change its state. - * All the others will be excluded if this array is not empty. - */ - sectionsToInclude: string[]; - - constructor( _state: FORM_STATE, _sectionsToInclude?: string[], _emittingSection?: string ) { - this.state = _state; - this.sectionsToInclude = _sectionsToInclude ? _sectionsToInclude : []; - this.emittingSection = _emittingSection; - } + state: FORM_STATE; + + /** + * Optional. The section with this name identifier will be excluded from the state change. + */ + emittingSection: string; + + /** + * Optional. + * All the sections in the array will change its state. + * All the others will be excluded if this array is not empty. + */ + sectionsToInclude: string[]; + + constructor( + _state: FORM_STATE, + _sectionsToInclude?: string[], + _emittingSection?: string + ) { + this.state = _state; + this.sectionsToInclude = _sectionsToInclude ? _sectionsToInclude : []; + this.emittingSection = _emittingSection; + } } @Component({ - selector: "vdk-form-section-container", - templateUrl: "./form-section-container.component.html", - styleUrls: ['form-section-container.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush + selector: 'vdk-form-section-container', + templateUrl: './form-section-container.component.html', + styleUrls: ['form-section-container.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush }) export class VdkFormSectionContainerComponent { - FORM_STATE = FORM_STATE; //used in the template - _sectionState: FORM_STATE = FORM_STATE.CAN_EDIT; - ClrLoadingState = ClrLoadingState; - stopInitialFocus = true; - - @Input() canEditSection = true; //set to false if the section is readonly - @Input() isSubmitEnabled: boolean; //controls the Submit(Save) button state - @Input() sectionName: string; //unique section identifier - @Input() editBtn = "Edit"; //Edit button text - @Input() cancelBtn = "Cancel"; //Cancel button text - @Input() saveBtn = "Save"; //Save button text - @Input() editBtnAriaLabel = "Edit"; //Edit button text - @Input() cancelBtnAriaLabel = "Cancel"; //Cancel button text - @Input() saveBtnAriaLabel = "Save"; //Save button text - - @Input('formState') set formState(_formState:VDKFormState) { - if (!_formState) { - return; - } - - if ( (_formState.emittingSection && _formState.emittingSection !== this.sectionName) || - ( !_formState.emittingSection && _formState.sectionsToInclude.length === 0 ) || - (_formState.sectionsToInclude.some(name => name === this.sectionName)) ) { - - //on ERROR set EDIT state only on submitted section - //to the rest of sections restore CAN_EDIT state - if (_formState.state === FORM_STATE.ERROR) { - if (this._sectionState === FORM_STATE.SUBMIT) { - this._sectionState = FORM_STATE.EDIT; - //put it in a microtask(make it asynchronous) to not violate detection run - //and avoid error for Expression changed after check - Promise.resolve(null).then(() => { - if (this.cspForm) { - this.cspForm.form.enable(); - } else { - this.enableForm.emit(); - } - }); - } else { - this._sectionState = FORM_STATE.CAN_EDIT; - } - } else { - this.changeSectionState(_formState.state); - } - } - } - - @Output() formStateChange = new EventEmitter(); - @Output() sectionStateChange = new EventEmitter(); - - //Events that are used when no formGroup is found in parent component - @Output() submitForm = new EventEmitter(); - @Output() disableForm = new EventEmitter(); - @Output() enableForm = new EventEmitter(); - - @ViewChild('editButton') editButtonEl: ElementRef; - - constructor(@Optional() @Host() private cspForm: FormGroupDirective, private cdr: ChangeDetectorRef) {} - - showEditBtn() { - return this._sectionState === FORM_STATE.CAN_EDIT && this.canEditSection; - } - - showSaveBtn() { - return this._sectionState === FORM_STATE.EDIT; - } - - clickEdit() { - this.formStateChange.emit(new VDKFormState(FORM_STATE.CAN_EDIT, [], this.sectionName)); - if (this.cspForm) { - this.cspForm.form.enable(); - } else { - this.enableForm.emit(); - } - this.changeSectionState(FORM_STATE.EDIT); - } - - clickCancel() { - this.changeSectionState(FORM_STATE.CAN_EDIT); - } - - // @ts-ignore - clickSave(): boolean { - this.formStateChange.emit(new VDKFormState(FORM_STATE.VIEW, [], this.sectionName)); - this.changeSectionState(FORM_STATE.SUBMIT); - if (this.cspForm) { - this.cspForm.form.disable(); - this.cspForm.onSubmit(this.cspForm.value); - this.cspForm.form.markAsPristine(); - // cancel submitting the form since cspForm.onSubmit has been called above. - // solves a specific issue in Firefox where onSubmit was called twice. - return false; - } else { - this.disableForm.emit(); - this.submitForm.emit(); - } - } - - changeSectionState(_sectionState: FORM_STATE) { - if (_sectionState !== this._sectionState) { - this.sectionStateChange.emit(new VDKFormState(_sectionState, [], this.sectionName)); - this._sectionState = _sectionState; - } - } - - focusEdit() { - if (this.editButtonEl && this._sectionState === FORM_STATE.CAN_EDIT && !this.stopInitialFocus) { - this.editButtonEl.nativeElement.focus(); - } - if (this.stopInitialFocus) { - this.stopInitialFocus = false; - } - } + FORM_STATE = FORM_STATE; //used in the template + _sectionState: FORM_STATE = FORM_STATE.CAN_EDIT; + ClrLoadingState = ClrLoadingState; + stopInitialFocus = true; + + @Input() canEditSection = true; //set to false if the section is readonly + @Input() isSubmitEnabled: boolean; //controls the Submit(Save) button state + @Input() sectionName: string; //unique section identifier + @Input() editBtn = 'Edit'; //Edit button text + @Input() cancelBtn = 'Cancel'; //Cancel button text + @Input() saveBtn = 'Save'; //Save button text + @Input() editBtnAriaLabel = 'Edit'; //Edit button text + @Input() cancelBtnAriaLabel = 'Cancel'; //Cancel button text + @Input() saveBtnAriaLabel = 'Save'; //Save button text + + @Input('formState') set formState(_formState: VDKFormState) { + if (!_formState) { + return; + } + + if ( + (_formState.emittingSection && + _formState.emittingSection !== this.sectionName) || + (!_formState.emittingSection && + _formState.sectionsToInclude.length === 0) || + _formState.sectionsToInclude.some((name) => name === this.sectionName) + ) { + //on ERROR set EDIT state only on submitted section + //to the rest of sections restore CAN_EDIT state + if (_formState.state === FORM_STATE.ERROR) { + if (this._sectionState === FORM_STATE.SUBMIT) { + this._sectionState = FORM_STATE.EDIT; + //put it in a microtask(make it asynchronous) to not violate detection run + //and avoid error for Expression changed after check + Promise.resolve(null).then(() => { + if (this.cspForm) { + this.cspForm.form.enable(); + } else { + this.enableForm.emit(); + } + }); + } else { + this._sectionState = FORM_STATE.CAN_EDIT; + } + } else { + this.changeSectionState(_formState.state); + } + } + } + + @Output() formStateChange = new EventEmitter(); + @Output() sectionStateChange = new EventEmitter(); + + //Events that are used when no formGroup is found in parent component + @Output() submitForm = new EventEmitter(); + @Output() disableForm = new EventEmitter(); + @Output() enableForm = new EventEmitter(); + + @ViewChild('editButton') editButtonEl: ElementRef; + + constructor( + @Optional() @Host() private cspForm: FormGroupDirective, + private cdr: ChangeDetectorRef + ) {} + + showEditBtn() { + return this._sectionState === FORM_STATE.CAN_EDIT && this.canEditSection; + } + + showSaveBtn() { + return this._sectionState === FORM_STATE.EDIT; + } + + clickEdit() { + this.formStateChange.emit( + new VDKFormState(FORM_STATE.CAN_EDIT, [], this.sectionName) + ); + if (this.cspForm) { + this.cspForm.form.enable(); + } else { + this.enableForm.emit(); + } + this.changeSectionState(FORM_STATE.EDIT); + } + + clickCancel() { + this.changeSectionState(FORM_STATE.CAN_EDIT); + } + + // @ts-ignore + clickSave(): boolean { + this.formStateChange.emit( + new VDKFormState(FORM_STATE.VIEW, [], this.sectionName) + ); + this.changeSectionState(FORM_STATE.SUBMIT); + if (this.cspForm) { + this.cspForm.form.disable(); + this.cspForm.onSubmit(this.cspForm.value); + this.cspForm.form.markAsPristine(); + // cancel submitting the form since cspForm.onSubmit has been called above. + // solves a specific issue in Firefox where onSubmit was called twice. + return false; + } else { + this.disableForm.emit(); + this.submitForm.emit(); + } + } + + changeSectionState(_sectionState: FORM_STATE) { + if (_sectionState !== this._sectionState) { + this.sectionStateChange.emit( + new VDKFormState(_sectionState, [], this.sectionName) + ); + this._sectionState = _sectionState; + } + } + + focusEdit() { + if ( + this.editButtonEl && + this._sectionState === FORM_STATE.CAN_EDIT && + !this.stopInitialFocus + ) { + this.editButtonEl.nativeElement.focus(); + } + if (this.stopInitialFocus) { + this.stopInitialFocus = false; + } + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/index.ts index dc87efc967..d4b9696936 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/index.ts @@ -1,16 +1,14 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 */ -import { Type } from "@angular/core"; +import { Type } from '@angular/core'; import { VdkFormSectionContainerComponent } from './form-section-container.component'; -export * from "./form-section-container.component"; +export * from './form-section-container.component'; export const FORM_SECTION_CONTAINER_DIRECTIVES: Type[] = [ - VdkFormSectionContainerComponent, + VdkFormSectionContainerComponent ]; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/public-api.ts index ba142389bd..484b60ff3c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section-container/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/form-section.component.html b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/form-section.component.html index aea32aea2f..23242fb145 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/form-section.component.html +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/form-section.component.html @@ -4,15 +4,18 @@ -->
    -
    -
    -
    -
    - -
    - -
    - -
    -
    +
    +
    +
    + +
    + +
    + +
    +
    diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/form-section.component.scss b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/form-section.component.scss index 8ff5bd4b2d..06d945161a 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/form-section.component.scss +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/form-section.component.scss @@ -4,36 +4,35 @@ */ .vdk-form-container { - display: flex; + display: flex; - .vdk-vertical-line { - margin-top: 20px; - margin-bottom: 5px; - border-left: 3px solid #007cbb; - } + .vdk-vertical-line { + margin-top: 20px; + margin-bottom: 5px; + border-left: 3px solid #007cbb; + } - .vdk-form-content { + .vdk-form-content { + .form-header { + padding-bottom: 15px; + } - .form-header { - padding-bottom: 15px; - } + display: flex; + flex-direction: column; + width: 100%; + } - display: flex; - flex-direction: column; - width: 100%; - } + .form-header { + color: #000; + font-size: 18px; + font-weight: 200; + margin-block-start: 24px; + margin-top: 24px; + } - .form-header { - color:#000; - font-size:18px; - font-weight:200; - margin-block-start:24px; - margin-top:24px; - } - - :host-context(.dark) { - .form-header { - color: #eaedf0; - } - } + :host-context(.dark) { + .form-header { + color: #eaedf0; + } + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/form-section.component.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/form-section.component.spec.ts index 267942c3b1..c86302890e 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/form-section.component.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/form-section.component.spec.ts @@ -3,76 +3,78 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; -import { Component, ViewChild } from "@angular/core"; +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { Component, ViewChild } from '@angular/core'; -import { ClarityModule } from "@clr/angular"; +import { ClarityModule } from '@clr/angular'; -import { VdkFormSectionComponent } from "./form-section.component"; -import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { VdkFormSectionComponent } from './form-section.component'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @Component({ - template: ` - - Test header - Test content - Test footer - - ` + template: ` + + Test header + Test content + Test footer + + ` }) class TestHostComponent { - @ViewChild(VdkFormSectionComponent, { static: true }) child: VdkFormSectionComponent; - focused: boolean = false; + @ViewChild(VdkFormSectionComponent, { static: true }) + child: VdkFormSectionComponent; + focused: boolean = false; } -describe("VdkFormSectionComponent", () => { +describe('VdkFormSectionComponent', () => { + let fixture: ComponentFixture; + let comp: VdkFormSectionComponent; + let el: any; - let fixture: ComponentFixture; - let comp: VdkFormSectionComponent; - let el: any; + function createComponent() { + fixture = TestBed.createComponent(TestHostComponent); + comp = fixture.componentInstance.child; + el = fixture.debugElement.nativeElement; + fixture.detectChanges(); + } - function createComponent() { - fixture = TestBed.createComponent(TestHostComponent); - comp = fixture.componentInstance.child; - el = fixture.debugElement.nativeElement; - fixture.detectChanges(); - } + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + imports: [BrowserAnimationsModule, ClarityModule], + providers: [], + declarations: [TestHostComponent, VdkFormSectionComponent] + }); - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [ - BrowserAnimationsModule, - ClarityModule, - ], - providers: [], - declarations: [ - TestHostComponent, - VdkFormSectionComponent - ] - }); + createComponent(); + fixture.detectChanges(); + })); - createComponent(); - fixture.detectChanges(); - })); + it('should project .form-section-header content correctly', () => { + const headers: NodeListOf = el.querySelectorAll( + 'vdk-form-section span.form-section-header' + ); + expect(headers.length).toBe(1); + }); - it("should project .form-section-header content correctly", () => { - const headers: NodeListOf = el.querySelectorAll("vdk-form-section span.form-section-header"); - expect(headers.length).toBe(1); - }); + it('should project .form-section-content content correctly', () => { + const content: NodeListOf = el.querySelectorAll( + 'vdk-form-section span.form-section-content' + ); + expect(content.length).toBe(1); + }); - it("should project .form-section-content content correctly", () => { - const content: NodeListOf = el.querySelectorAll("vdk-form-section span.form-section-content"); - expect(content.length).toBe(1); - }); - - it("should project .form-section-footer content only when focused and then change edit state", () => { - expect(comp.getFormState()).toBe("normal"); - const footer: NodeListOf = el.querySelectorAll("vdk-form-section span.form-section-footer"); - expect(footer.length).toBe(0); - fixture.componentInstance.focused = true; - fixture.detectChanges(); - expect(comp.getFormState()).toBe("edit"); - const footers: NodeListOf = el.querySelectorAll("vdk-form-section span.form-section-footer"); - expect(footers.length).toBe(1); - }); + it('should project .form-section-footer content only when focused and then change edit state', () => { + expect(comp.getFormState()).toBe('normal'); + const footer: NodeListOf = el.querySelectorAll( + 'vdk-form-section span.form-section-footer' + ); + expect(footer.length).toBe(0); + fixture.componentInstance.focused = true; + fixture.detectChanges(); + expect(comp.getFormState()).toBe('edit'); + const footers: NodeListOf = el.querySelectorAll( + 'vdk-form-section span.form-section-footer' + ); + expect(footers.length).toBe(1); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/form-section.component.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/form-section.component.ts index e05e30ed44..3a9a559bad 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/form-section.component.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/form-section.component.ts @@ -3,58 +3,63 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, EventEmitter, Input, Output } from "@angular/core"; -import { animate, state, style, transition, trigger } from "@angular/animations"; - +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { + animate, + state, + style, + transition, + trigger +} from '@angular/animations'; @Component({ - selector: 'vdk-form-section', - styleUrls: ['form-section.component.scss'], - templateUrl: 'form-section.component.html', - animations: [ - trigger('customFormState', [ - state('edit', style({ - opacity: 1, - width: '3px', - 'margin-right': '24px' - })), - state('normal', style({ - opacity: 0, - width: '0px', - 'margin-right': '0px' - - })), - transition('normal => edit', [ - animate('300ms ease-in-out') - ]), - transition('edit => normal', [ - animate('100ms ease-in-out') - ]) - ]), - trigger('footerState', [ - transition(':enter', [ - style({ opacity: 0, height: '0' }), - animate('0.1s 0.2s ease-in-out', style({ opacity: 1, height: '*'})), - ]), - transition(':leave', [ - animate('0.1s', style({ opacity: 0, height: '0' })) - ]) - ]) - ] + selector: 'vdk-form-section', + styleUrls: ['form-section.component.scss'], + templateUrl: 'form-section.component.html', + animations: [ + trigger('customFormState', [ + state( + 'edit', + style({ + opacity: 1, + width: '3px', + 'margin-right': '24px' + }) + ), + state( + 'normal', + style({ + opacity: 0, + width: '0px', + 'margin-right': '0px' + }) + ), + transition('normal => edit', [animate('300ms ease-in-out')]), + transition('edit => normal', [animate('100ms ease-in-out')]) + ]), + trigger('footerState', [ + transition(':enter', [ + style({ opacity: 0, height: '0' }), + animate('0.1s 0.2s ease-in-out', style({ opacity: 1, height: '*' })) + ]), + transition(':leave', [ + animate('0.1s', style({ opacity: 0, height: '0' })) + ]) + ]) + ] }) - export class VdkFormSectionComponent { - @Input() - focused: boolean = false; + @Input() + focused: boolean = false; - @Output() - animationDone = new EventEmitter(); + @Output() + animationDone = new EventEmitter(); - getFormState() { - return this.focused ? 'edit' : 'normal'; - } + getFormState() { + return this.focused ? 'edit' : 'normal'; + } - emitAnimationDone() { - this.animationDone.emit(); - } + emitAnimationDone() { + this.animationDone.emit(); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/index.ts index 7b17da1cbf..aef47fb861 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/index.ts @@ -1,16 +1,12 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 */ -import { Type } from "@angular/core"; +import { Type } from '@angular/core'; import { VdkFormSectionComponent } from './form-section.component'; -export * from "./form-section.component"; +export * from './form-section.component'; -export const FORM_SECTION_DIRECTIVES: Type[] = [ - VdkFormSectionComponent, -]; +export const FORM_SECTION_DIRECTIVES: Type[] = [VdkFormSectionComponent]; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/public-api.ts index 4996b4ff68..484b60ff3c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/form-section/public-api.ts @@ -1,6 +1,3 @@ - - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/index.ts index 4bc9385849..88bdad237e 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/index.ts @@ -1,16 +1,13 @@ - - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 */ -export * from "./copy-to-clipboard-button/index"; -export * from "./form-section/index"; -export * from "./form-section-container/index"; -export * from "./empty-state-placeholder/index"; -export * from "./toast/index"; -export * from "./search/index"; +export * from './copy-to-clipboard-button/index'; +export * from './form-section/index'; +export * from './form-section-container/index'; +export * from './empty-state-placeholder/index'; +export * from './toast/index'; +export * from './search/index'; -export * from "./vdk-ngx-components.module"; +export * from './vdk-ngx-components.module'; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/public-api.ts index ba142389bd..484b60ff3c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/index.ts index cfb0e28f62..4f4a361286 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/index.ts @@ -3,5 +3,5 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './search.component' +export * from './search.component'; export { VdkSearchModule } from './search.module'; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/public-api.ts index ba142389bd..484b60ff3c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/search.component.html b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/search.component.html index c33a6cad4c..1de0a674af 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/search.component.html +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/search.component.html @@ -3,51 +3,61 @@ ~ SPDX-License-Identifier: Apache-2.0 --> -
    - - +
    + + - + - - + + - - - - + + + + - {{helperText}} + {{helperText}}
    diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/search.component.scss b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/search.component.scss index 1daa216d82..a300a50df8 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/search.component.scss +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/search.component.scss @@ -4,92 +4,92 @@ */ :host { - width: 200px; - display: block; + width: 200px; + display: block; } .search-container { - display: flex; - flex-direction: column; - position: relative; - width: 100%; - margin-bottom: 0; - margin: 0.5rem 0; + display: flex; + flex-direction: column; + position: relative; + width: 100%; + margin-bottom: 0; + margin: 0.5rem 0; - &.disabled { - cursor: not-allowed; + &.disabled { + cursor: not-allowed; - * { - pointer-events: none; - } + * { + pointer-events: none; + } - input { - color: #888888; - } + input { + color: #888888; + } - cds-icon[shape="search"] { - fill: #888888; - } + cds-icon[shape='search'] { + fill: #888888; + } - .clear-search-btn { - cds-icon[shape="times-circle"] { - fill: #888888; - } - } - } + .clear-search-btn { + cds-icon[shape='times-circle'] { + fill: #888888; + } + } + } - cds-icon[shape="search"] { - height: 18px; - position: absolute; - top: 3px; - left: 0; - } + cds-icon[shape='search'] { + height: 18px; + position: absolute; + top: 3px; + left: 0; + } - &.focused { - cds-icon[shape="search"] { - fill: var(--clr-forms-focused-color); - stroke: var(--clr-forms-focused-color); - stroke-width: 0.75px; - } - } + &.focused { + cds-icon[shape='search'] { + fill: var(--clr-forms-focused-color); + stroke: var(--clr-forms-focused-color); + stroke-width: 0.75px; + } + } - .clear-search-btn { - position: absolute; - top: -1px; - right: 0; - padding: 0; - border: transparent; - background-color: transparent; + .clear-search-btn { + position: absolute; + top: -1px; + right: 0; + padding: 0; + border: transparent; + background-color: transparent; - cds-icon[shape="times-circle"] { - fill: #565656; - opacity: 0.8; - &:hover { - cursor: pointer; - opacity: 1; - } - } - } + cds-icon[shape='times-circle'] { + fill: #565656; + opacity: 0.8; + &:hover { + cursor: pointer; + opacity: 1; + } + } + } - .btn-link { - position: absolute; - right: 0; - top: -6px; - margin: 0; - } + .btn-link { + position: absolute; + right: 0; + top: -6px; + margin: 0; + } - input { - padding: 0 24px; - flex: 1 1 24px; - } + input { + padding: 0 24px; + flex: 1 1 24px; + } } :host-context(.dark) { - .clear-search-btn { - color: #d3d3d3; + .clear-search-btn { + color: #d3d3d3; - cds-icon[shape="times-circle"] { - fill: #acbac3; - } - } + cds-icon[shape='times-circle'] { + fill: #acbac3; + } + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/search.component.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/search.component.spec.ts index af4d373825..fd580e696c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/search.component.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/search.component.spec.ts @@ -3,227 +3,230 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ComponentFixture, TestBed, ComponentFixtureAutoDetect, waitForAsync } from '@angular/core/testing'; -import { ReactiveFormsModule } from "@angular/forms"; +import { + ComponentFixture, + TestBed, + ComponentFixtureAutoDetect, + waitForAsync +} from '@angular/core/testing'; +import { ReactiveFormsModule } from '@angular/forms'; -import { ClarityModule } from "@clr/angular"; -import { VdkSearchComponent } from "./search.component"; +import { ClarityModule } from '@clr/angular'; +import { VdkSearchComponent } from './search.component'; let comp: VdkSearchComponent; let fixture: ComponentFixture; let page: PageObject; export class PageObject { - - getSearchInputElement(): HTMLInputElement { - return fixture.nativeElement.querySelector(`[data-test-id="search-input"]`); - } - - getSearchButtonElement(): HTMLInputElement { - return fixture.nativeElement.querySelector(`[data-test-id="search-button"]`); - } - - getClearSearchBtn(): HTMLButtonElement { - return fixture.nativeElement.querySelector(`[data-test-id="clear-search-btn"]`); - } - - getSearchIcon(): HTMLElement { - return fixture.nativeElement.querySelector(`[data-test-id="search-icon"]`); - } - - getHelperText(): HTMLElement { - return fixture.nativeElement.querySelector('[data-test-id="search-results-text"]') - } + getSearchInputElement(): HTMLInputElement { + return fixture.nativeElement.querySelector(`[data-test-id="search-input"]`); + } + + getSearchButtonElement(): HTMLInputElement { + return fixture.nativeElement.querySelector( + `[data-test-id="search-button"]` + ); + } + + getClearSearchBtn(): HTMLButtonElement { + return fixture.nativeElement.querySelector( + `[data-test-id="clear-search-btn"]` + ); + } + + getSearchIcon(): HTMLElement { + return fixture.nativeElement.querySelector(`[data-test-id="search-icon"]`); + } + + getHelperText(): HTMLElement { + return fixture.nativeElement.querySelector( + '[data-test-id="search-results-text"]' + ); + } } describe('VdkSearchComponent', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ClarityModule, ReactiveFormsModule], + declarations: [VdkSearchComponent], + providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }] + }); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(VdkSearchComponent); + comp = fixture.componentInstance; + fixture.detectChanges(); + page = new PageObject(); + }); + + it('should create', () => { + expect(comp).toBeTruthy(); + expect(page.getSearchInputElement()).toBeTruthy(); + expect(page.getSearchIcon()).toBeTruthy(); + expect(page.getClearSearchBtn()).toBeFalsy(); + }); + + it('should show and hide "clear search button"', waitForAsync(() => { + const searchQuery = 'test'; + expect(page.getClearSearchBtn()).toBeFalsy(); + page.getSearchInputElement().value = searchQuery; + page.getSearchInputElement().dispatchEvent(new Event('input')); + fixture.detectChanges(); + fixture + .whenStable() + .then(() => { + expect(comp.searchQuery.value).toBe( + searchQuery, + 'searchQuery input value is not correct' + ); + expect(comp.searchQueryValue).toBe( + searchQuery, + 'searchQueryValue property is not correct' + ); + expect(page.getClearSearchBtn()).toBeTruthy(); + page.getClearSearchBtn().click(); + fixture.detectChanges(); + return fixture.whenStable(); + }) + .then(() => { + expect(page.getClearSearchBtn()).toBeFalsy(); + }); + })); + + it('should input show correct data', waitForAsync(() => { + const searchQuery = 'test'; + page.getSearchInputElement().value = searchQuery; + page.getSearchInputElement().dispatchEvent(new Event('input')); + fixture.detectChanges(); + fixture + .whenStable() + .then(() => { + expect(page.getSearchInputElement().value).toBe(searchQuery); + page.getClearSearchBtn().click(); + fixture.detectChanges(); + return fixture.whenStable(); + }) + .then(() => { + expect(comp.searchQueryValue).toBe(''); + }); + })); + + it('should emit correct value', waitForAsync(() => { + const searchQuery = 'test'; + const searchSpy = spyOn(comp.search, 'emit').and.callThrough(); + page.getSearchInputElement().value = searchQuery; + page.getSearchInputElement().dispatchEvent(new Event('input')); + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(searchSpy).toHaveBeenCalledWith(searchQuery); + }); + })); + + it('should show helper text with results when resultCount is a number', () => { + fixture.componentInstance.helperText = `Over 9999 results`; + fixture.detectChanges(); + expect(page.getHelperText()).not.toBeNull(); + }); + + it('should not show helper text with results when resultCount is not used', () => { + expect(page.getHelperText()).toBeNull(); + }); + + describe('when in "Manual Search" mode', () => { + beforeEach(() => { + comp.showSearchButton = true; + }); + + it('should show "SEARCH" button disabled when more than one char is entered but it is not above the min limit', waitForAsync(async () => { + comp.searchTermMinimalLength = 3; + + fixture.detectChanges(); + + expect(page.getSearchButtonElement()).toBeNull(); + + page.getSearchInputElement().value = 't'; + page.getSearchInputElement().dispatchEvent(new Event('input')); + fixture.detectChanges(); + await fixture.whenStable(); + + let searchButton = page.getSearchButtonElement(); + expect(searchButton).toBeTruthy(); + expect(searchButton.disabled).toBeTruthy(); + + page.getSearchInputElement().value = 'two'; + page.getSearchInputElement().dispatchEvent(new Event('input')); + fixture.detectChanges(); + await fixture.whenStable(); + + searchButton = page.getSearchButtonElement(); + expect(searchButton).toBeTruthy(); + expect(searchButton.disabled).toBeFalsy(); + })); + + it('should emit value ONLY upon clicking "Enter" or "SEARCH" and should hide the latter', waitForAsync(async () => { + const searchQuery = 'test'; + const searchSpy = spyOn(comp.search, 'emit').and.callThrough(); + page.getSearchInputElement().value = searchQuery; + page.getSearchInputElement().dispatchEvent(new Event('input')); + fixture.detectChanges(); + await fixture.whenStable(); + + expect(page.getClearSearchBtn()).toBeFalsy(); + expect(searchSpy).not.toHaveBeenCalledWith(searchQuery); + + const searchButton = page.getSearchButtonElement(); + searchButton.click(); + + await fixture.whenStable(); + + expect(searchSpy).toHaveBeenCalledWith(searchQuery); + + expect(page.getClearSearchBtn()).toBeTruthy(); + + page + .getSearchInputElement() + .dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' })); + + const newSearchQuery = searchQuery + '123'; + page.getSearchInputElement().value = newSearchQuery; + page.getSearchInputElement().dispatchEvent(new Event('input')); + fixture.detectChanges(); + await fixture.whenStable(); + + expect(searchSpy).toHaveBeenCalledWith(newSearchQuery); + })); + + it('should clear input upon clicking "X" button', waitForAsync(async () => { + const searchQuery = 'test'; + const searchSpy = spyOn(comp.search, 'emit').and.callThrough(); + + page.getSearchInputElement().value = searchQuery; + page.getSearchInputElement().dispatchEvent(new Event('input')); + fixture.detectChanges(); + await fixture.whenStable(); + + expect(searchSpy).not.toHaveBeenCalledWith(searchQuery); + + let searchButton = page.getSearchButtonElement(); + searchButton.click(); + await fixture.whenStable(); - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [ - ClarityModule, - ReactiveFormsModule - ], - declarations: [ - VdkSearchComponent - ], - providers: [ - { provide: ComponentFixtureAutoDetect, useValue: true }, - ] - }); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(VdkSearchComponent); - comp = fixture.componentInstance; - fixture.detectChanges(); - page = new PageObject(); - }); - - it('should create', () => { - expect(comp).toBeTruthy(); - expect(page.getSearchInputElement()).toBeTruthy(); - expect(page.getSearchIcon()).toBeTruthy(); - expect(page.getClearSearchBtn()).toBeFalsy(); - }); - - it('should show and hide "clear search button"', waitForAsync(() => { - const searchQuery = 'test'; - expect(page.getClearSearchBtn()).toBeFalsy(); - page.getSearchInputElement().value = searchQuery; - page.getSearchInputElement().dispatchEvent(new Event('input')); - fixture.detectChanges(); - fixture.whenStable().then(() => { - expect(comp.searchQuery.value).toBe(searchQuery, 'searchQuery input value is not correct'); - expect(comp.searchQueryValue).toBe(searchQuery, 'searchQueryValue property is not correct'); - expect(page.getClearSearchBtn()).toBeTruthy(); - page.getClearSearchBtn().click(); - fixture.detectChanges(); - return fixture.whenStable(); - }) - .then(() => { - expect(page.getClearSearchBtn()).toBeFalsy(); - }); - })); - - it('should input show correct data', waitForAsync(() => { - const searchQuery = 'test'; - page.getSearchInputElement().value = searchQuery; - page.getSearchInputElement().dispatchEvent(new Event('input')); - fixture.detectChanges(); - fixture.whenStable().then(() => { - expect(page.getSearchInputElement().value).toBe(searchQuery); - page.getClearSearchBtn().click(); - fixture.detectChanges(); - return fixture.whenStable(); - }) - .then(() => { - expect(comp.searchQueryValue).toBe(''); - }); - })); - - it('should emit correct value', waitForAsync(() => { - const searchQuery = 'test'; - const searchSpy = spyOn(comp.search, 'emit').and.callThrough(); - page.getSearchInputElement().value = searchQuery; - page.getSearchInputElement().dispatchEvent(new Event('input')); - fixture.detectChanges(); - fixture.whenStable().then(() => { - expect(searchSpy).toHaveBeenCalledWith(searchQuery); - }); - })); - - - it('should show helper text with results when resultCount is a number', () => { - fixture.componentInstance.helperText = `Over 9999 results`; - fixture.detectChanges(); - expect(page.getHelperText()).not.toBeNull(); - }); - - it('should not show helper text with results when resultCount is not used', () => { - expect(page.getHelperText()).toBeNull(); - }); - - describe('when in "Manual Search" mode', () => { - beforeEach(() => { - comp.showSearchButton = true; - }); - - it( - 'should show "SEARCH" button disabled when more than one char is entered but it is not above the min limit', - waitForAsync(async () => { - comp.searchTermMinimalLength = 3; - - fixture.detectChanges(); - - expect(page.getSearchButtonElement()).toBeNull(); - - page.getSearchInputElement().value = 't'; - page.getSearchInputElement().dispatchEvent(new Event('input')); - fixture.detectChanges(); - await fixture.whenStable(); - - let searchButton = page.getSearchButtonElement(); - expect(searchButton).toBeTruthy(); - expect(searchButton.disabled).toBeTruthy(); - - page.getSearchInputElement().value = 'two'; - page.getSearchInputElement().dispatchEvent(new Event('input')); - fixture.detectChanges(); - await fixture.whenStable(); - - searchButton = page.getSearchButtonElement(); - expect(searchButton).toBeTruthy(); - expect(searchButton.disabled).toBeFalsy(); - }) - ); - - it( - 'should emit value ONLY upon clicking "Enter" or "SEARCH" and should hide the latter', - waitForAsync(async () => { - const searchQuery = 'test'; - const searchSpy = spyOn(comp.search, 'emit').and.callThrough(); - page.getSearchInputElement().value = searchQuery; - page.getSearchInputElement().dispatchEvent(new Event('input')); - fixture.detectChanges(); - await fixture.whenStable(); - - expect(page.getClearSearchBtn()).toBeFalsy(); - expect(searchSpy).not.toHaveBeenCalledWith(searchQuery); - - const searchButton = page.getSearchButtonElement(); - searchButton.click(); - - await fixture.whenStable(); - - expect(searchSpy).toHaveBeenCalledWith(searchQuery); - - expect(page.getClearSearchBtn()).toBeTruthy(); - - page.getSearchInputElement().dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' })); - - const newSearchQuery = searchQuery + '123'; - page.getSearchInputElement().value = newSearchQuery; - page.getSearchInputElement().dispatchEvent(new Event('input')); - fixture.detectChanges(); - await fixture.whenStable(); - - expect(searchSpy).toHaveBeenCalledWith(newSearchQuery); - }) - ); - - it( - 'should clear input upon clicking "X" button', - waitForAsync(async () => { - const searchQuery = 'test'; - const searchSpy = spyOn(comp.search, 'emit').and.callThrough(); - - page.getSearchInputElement().value = searchQuery; - page.getSearchInputElement().dispatchEvent(new Event('input')); - fixture.detectChanges(); - await fixture.whenStable(); - - expect(searchSpy).not.toHaveBeenCalledWith(searchQuery); - - let searchButton = page.getSearchButtonElement(); - searchButton.click(); - await fixture.whenStable(); - - expect(searchSpy).toHaveBeenCalledWith(searchQuery); - - searchButton = page.getSearchButtonElement(); - expect(searchButton).toBeNull(); + expect(searchSpy).toHaveBeenCalledWith(searchQuery); - const clearSearchButton = page.getClearSearchBtn(); - expect(clearSearchButton).toBeTruthy(); + searchButton = page.getSearchButtonElement(); + expect(searchButton).toBeNull(); - clearSearchButton.click(); - fixture.detectChanges(); - await fixture.whenStable(); + const clearSearchButton = page.getClearSearchBtn(); + expect(clearSearchButton).toBeTruthy(); - expect(comp.searchQueryValue).toEqual(''); - expect(searchSpy).toHaveBeenCalledWith(''); - }) - ); - }); + clearSearchButton.click(); + fixture.detectChanges(); + await fixture.whenStable(); + expect(comp.searchQueryValue).toEqual(''); + expect(searchSpy).toHaveBeenCalledWith(''); + })); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/search.component.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/search.component.ts index 64cbe04d00..03bea4fc4e 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/search.component.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/search.component.ts @@ -3,134 +3,147 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from "@angular/core"; -import { FormControl } from "@angular/forms"; - -import { BehaviorSubject, combineLatest, Subject, Subscription } from "rxjs"; -import { debounceTime } from "rxjs/operators"; +import { + Component, + ElementRef, + EventEmitter, + Input, + Output, + ViewChild +} from '@angular/core'; +import { FormControl } from '@angular/forms'; + +import { BehaviorSubject, combineLatest, Subject, Subscription } from 'rxjs'; +import { debounceTime } from 'rxjs/operators'; const defaultSearchInputPadding = 24; @Component({ - selector: "vdk-search", - templateUrl: "./search.component.html", - styleUrls: ["./search.component.scss"], + selector: 'vdk-search', + templateUrl: './search.component.html', + styleUrls: ['./search.component.scss'] }) export class VdkSearchComponent { - searchInputPaddingRight = `${defaultSearchInputPadding}px`; - - private _disabled: boolean = false; - public get disabled(): boolean { - return this._disabled; - } - @Input('disabled') - public set disabled(value: boolean) { - this._disabled = value; - - if (value) { - this.searchQuery?.disable({ emitEvent: false }); - } else { - this.searchQuery?.enable({ emitEvent: false }); - } - } - - @Input() searchQueryValue: string = ''; - @Input() clearSearchTitle: string = 'Clear Search'; - @Input('placeholder') - set placeholder(pass: string) { - this.finalPlaceholder = pass ? pass : "Search"; - } - - @Input() helperText: string = ''; - @Input() debounceTime: number = 100; - @Input() searchTermMinimalLength: number = 2; - @Input() showSearchButton = false; - @Input() searchButtonText: string = "Search"; - @Input() searchButtonAriaLabelText: string = "Search"; - @Input() searchAriaLabelText: string; - - @Output() search: EventEmitter = new EventEmitter(); - - @ViewChild('searchButton', { read: ElementRef }) - searchButton?: ElementRef; - isSeachButtonVisible: boolean; - - private triggerSearch$: Subject = new BehaviorSubject(undefined); - private hasSearchBeenTriggeredManually: boolean; - - public searchQuery: FormControl; - public searchQuerySub: Subscription; - public focused: boolean = false; - public finalPlaceholder: string = "Search"; - - ngOnInit() { - this.searchQuery = new FormControl(this.searchQueryValue); - - this.searchQuerySub = combineLatest([this.searchQuery.valueChanges, this.triggerSearch$]) - .pipe(debounceTime(this.debounceTime)) - .subscribe(([query]) => { - const queryLength = query.length; - query = query.trim(); - this.searchQueryValue = query; - - // not emit search event if it hasn't been inputted something different from whitespace - if (this.searchQueryValue.length === 0 && - queryLength !== 0) { - return; - } - - // Make sure that the 'Search' button will be visible in 'Manual Search' mode upon every change. - this.isSeachButtonVisible = this.showSearchButton; - - const shouldNotifyForQueryChange = !this.showSearchButton || this.hasSearchBeenTriggeredManually; - const inputHasMinLengthOrIsCleared = - this.searchQueryValue.length >= this.searchTermMinimalLength || this.searchQueryValue.length === 0; - if (shouldNotifyForQueryChange && inputHasMinLengthOrIsCleared) { - // If we are about to notify that the search term has changed replace 'Search' button with the `X` one. - this.isSeachButtonVisible = false; - this.search.emit(query); - } - - this.hasSearchBeenTriggeredManually = false; - this.computeSearchInputPadding(); - }); - } - - ngOnDestroy(): void { - if (this.searchQuerySub) { - this.searchQuerySub.unsubscribe(); - } - } - - clearSearch(): void { - this.searchQuery.setValue(''); - if (this.showSearchButton) { - this.triggerSearch(); - } - } - - handleKeyDown(event: KeyboardEvent): void { - if (event.key === 'Enter') { - this.triggerSearch(); - } - } - - triggerSearch(): void { - this.hasSearchBeenTriggeredManually = true; - this.triggerSearch$.next(); - } - - private computeSearchInputPadding(): void { - if (this.showSearchButton && this.isSeachButtonVisible) { - - // Wait for the search button to be rendered as changes 'shouldShowSearchButton' might not be applied in the template. - // Useful especially after the first rendering. - setTimeout(() => { - this.searchInputPaddingRight = - Math.round(this.searchButton?.nativeElement.clientWidth || defaultSearchInputPadding) + 'px'; - }); - } else { - this.searchInputPaddingRight = `${defaultSearchInputPadding}px`; - } - } + searchInputPaddingRight = `${defaultSearchInputPadding}px`; + + private _disabled: boolean = false; + public get disabled(): boolean { + return this._disabled; + } + @Input('disabled') + public set disabled(value: boolean) { + this._disabled = value; + + if (value) { + this.searchQuery?.disable({ emitEvent: false }); + } else { + this.searchQuery?.enable({ emitEvent: false }); + } + } + + @Input() searchQueryValue: string = ''; + @Input() clearSearchTitle: string = 'Clear Search'; + @Input('placeholder') + set placeholder(pass: string) { + this.finalPlaceholder = pass ? pass : 'Search'; + } + + @Input() helperText: string = ''; + @Input() debounceTime: number = 100; + @Input() searchTermMinimalLength: number = 2; + @Input() showSearchButton = false; + @Input() searchButtonText: string = 'Search'; + @Input() searchButtonAriaLabelText: string = 'Search'; + @Input() searchAriaLabelText: string; + + @Output() search: EventEmitter = new EventEmitter(); + + @ViewChild('searchButton', { read: ElementRef }) + searchButton?: ElementRef; + isSeachButtonVisible: boolean; + + private triggerSearch$: Subject = new BehaviorSubject(undefined); + private hasSearchBeenTriggeredManually: boolean; + + public searchQuery: FormControl; + public searchQuerySub: Subscription; + public focused: boolean = false; + public finalPlaceholder: string = 'Search'; + + ngOnInit() { + this.searchQuery = new FormControl(this.searchQueryValue); + + this.searchQuerySub = combineLatest([ + this.searchQuery.valueChanges, + this.triggerSearch$ + ]) + .pipe(debounceTime(this.debounceTime)) + .subscribe(([query]) => { + const queryLength = query.length; + query = query.trim(); + this.searchQueryValue = query; + + // not emit search event if it hasn't been inputted something different from whitespace + if (this.searchQueryValue.length === 0 && queryLength !== 0) { + return; + } + + // Make sure that the 'Search' button will be visible in 'Manual Search' mode upon every change. + this.isSeachButtonVisible = this.showSearchButton; + + const shouldNotifyForQueryChange = + !this.showSearchButton || this.hasSearchBeenTriggeredManually; + const inputHasMinLengthOrIsCleared = + this.searchQueryValue.length >= this.searchTermMinimalLength || + this.searchQueryValue.length === 0; + if (shouldNotifyForQueryChange && inputHasMinLengthOrIsCleared) { + // If we are about to notify that the search term has changed replace 'Search' button with the `X` one. + this.isSeachButtonVisible = false; + this.search.emit(query); + } + + this.hasSearchBeenTriggeredManually = false; + this.computeSearchInputPadding(); + }); + } + + ngOnDestroy(): void { + if (this.searchQuerySub) { + this.searchQuerySub.unsubscribe(); + } + } + + clearSearch(): void { + this.searchQuery.setValue(''); + if (this.showSearchButton) { + this.triggerSearch(); + } + } + + handleKeyDown(event: KeyboardEvent): void { + if (event.key === 'Enter') { + this.triggerSearch(); + } + } + + triggerSearch(): void { + this.hasSearchBeenTriggeredManually = true; + this.triggerSearch$.next(); + } + + private computeSearchInputPadding(): void { + if (this.showSearchButton && this.isSeachButtonVisible) { + // Wait for the search button to be rendered as changes 'shouldShowSearchButton' might not be applied in the template. + // Useful especially after the first rendering. + setTimeout(() => { + this.searchInputPaddingRight = + Math.round( + this.searchButton?.nativeElement.clientWidth || + defaultSearchInputPadding + ) + 'px'; + }); + } else { + this.searchInputPaddingRight = `${defaultSearchInputPadding}px`; + } + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/search.module.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/search.module.ts index e705868a39..4d97852be2 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/search.module.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/search/search.module.ts @@ -3,25 +3,16 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; +import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { CommonModule } from "@angular/common"; -import {VdkSearchComponent} from "./search.component"; -import {ReactiveFormsModule} from "@angular/forms"; +import { CommonModule } from '@angular/common'; +import { VdkSearchComponent } from './search.component'; +import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ - declarations: [ - VdkSearchComponent - ], - imports: [ - CommonModule, - ReactiveFormsModule - ], - exports: [ - VdkSearchComponent - ], - schemas: [ - CUSTOM_ELEMENTS_SCHEMA, - ], + declarations: [VdkSearchComponent], + imports: [CommonModule, ReactiveFormsModule], + exports: [VdkSearchComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class VdkSearchModule {} diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/index.ts index 6a02961b9a..b6b81529f9 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/index.ts @@ -1,18 +1,17 @@ - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 */ -import { Type } from "@angular/core"; -import { VdkToastComponent } from "./toast.component"; -import { VdkToastContainerComponent } from "./toast-container.component"; +import { Type } from '@angular/core'; +import { VdkToastComponent } from './toast.component'; +import { VdkToastContainerComponent } from './toast-container.component'; -export * from "./toast.component"; -export * from "./toast-container.component"; -export * from "./toast.model"; +export * from './toast.component'; +export * from './toast-container.component'; +export * from './toast.model'; export const TOAST_DIRECTIVES: Type[] = [ - VdkToastContainerComponent, - VdkToastComponent, + VdkToastContainerComponent, + VdkToastComponent ]; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/public-api.ts index ba142389bd..484b60ff3c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast-container.component.html b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast-container.component.html index de5c2d9785..7422d65d9b 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast-container.component.html +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast-container.component.html @@ -4,5 +4,5 @@ -->
    - +
    diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast-container.component.scss b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast-container.component.scss index f3f25c1356..f53064f4b6 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast-container.component.scss +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast-container.component.scss @@ -3,30 +3,30 @@ * SPDX-License-Identifier: Apache-2.0 */ -@import "../../css/screen-sizes.scss"; +@import '../../css/screen-sizes.scss'; :host { - display: block; - z-index: 1040; - position: absolute; - right: 0; - width: 414px; - opacity: 1.0; - margin-top: 18px; + display: block; + z-index: 1040; + position: absolute; + right: 0; + width: 414px; + opacity: 1; + margin-top: 18px; - @media screen and(max-width: $xs-width) { - max-width: $min-el-size; - right: -12px; - } + @media screen and(max-width: $xs-width) { + max-width: $min-el-size; + right: -12px; + } } .toast-container { - margin-right: 0; - > div { - margin-left: 0px; - margin-right: -12px; - } - display: flex; - justify-content: flex-end; - flex-direction: column; + margin-right: 0; + > div { + margin-left: 0px; + margin-right: -12px; + } + display: flex; + justify-content: flex-end; + flex-direction: column; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast-container.component.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast-container.component.ts index 6036f5fea3..a38ab74348 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast-container.component.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast-container.component.ts @@ -5,44 +5,41 @@ import { HostBinding, Input, Component } from '@angular/core'; import { - trigger, - transition, - query, - animateChild, - stagger, + trigger, + transition, + query, + animateChild, + stagger } from '@angular/animations'; -import { - multiply, - STAGGER_DURATION, -} from "../animation-constants"; +import { multiply, STAGGER_DURATION } from '../animation-constants'; import { VdkToastComponent } from './toast.component'; @Component({ - selector: "vdk-toast-container", - templateUrl: "./toast-container.component.html", - styleUrls: ["./toast-container.component.scss"], - animations:[ - trigger('toastContainer', [ - transition(':enter', [ - query('@launchToast', [ - stagger(`${multiply(STAGGER_DURATION)}ms`, animateChild()) - ], {optional: true}), - ]), - transition(':leave', [ - query('@launchToast', [ - animateChild() - ], {optional:true}) - ]), - ]) - ] + selector: 'vdk-toast-container', + templateUrl: './toast-container.component.html', + styleUrls: ['./toast-container.component.scss'], + animations: [ + trigger('toastContainer', [ + transition(':enter', [ + query( + '@launchToast', + [stagger(`${multiply(STAGGER_DURATION)}ms`, animateChild())], + { optional: true } + ) + ]), + transition(':leave', [ + query('@launchToast', [animateChild()], { optional: true }) + ]) + ]) + ] }) export class VdkToastContainerComponent { - @Input() topOffset: number = 0; + @Input() topOffset: number = 0; - @HostBinding('style.top') - get top(): string { - return (60 + this.topOffset) + 'px'; - } + @HostBinding('style.top') + get top(): string { + return 60 + this.topOffset + 'px'; + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast.component.html b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast.component.html index 2acec5f5e3..a297ac1615 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast.component.html +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast.component.html @@ -3,87 +3,127 @@ ~ SPDX-License-Identifier: Apache-2.0 --> -
    - +
    + -
    - - - - - - - - +
    + + + + + + + + - - - - - - - + + + + + + + - - - - - - - - + + + + + + + - - - - - - - - - - -
    + + + + + + + + +     + +
    -
    -
    -
    - - +
    +
    +
    + + - -
    -
    + +
    +
    - - + + -
    - - -
    -
    +
    + + +
    +
    diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast.component.scss b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast.component.scss index 0f24bc0dd7..9bda5c4aae 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast.component.scss +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast.component.scss @@ -3,316 +3,325 @@ * SPDX-License-Identifier: Apache-2.0 */ -@import "../../css/colors"; -@import "../../css/screen-sizes.scss"; +@import '../../css/colors'; +@import '../../css/screen-sizes.scss'; :host { - @media screen and(max-width: $xs-width) { - max-width: 75vw; - } - - ::ng-deep .toast-description { - font-size: 1.0em; - color: #ADBBC4; - margin-top: 3px; - line-height: 18px; - - -webkit-line-clamp: 4; - -moz-line-clamp: 4; - display: -webkit-box; - overflow: hidden; - text-overflow: ellipsis; - // https://github.com/postcss/autoprefixer/issues/776 - /* autoprefixer: ignore next */ - -webkit-box-orient: vertical; - max-height: 70px; - } - - ::ng-deep .toast-link { - font-size: 0.85em; - color: #89CBDF; - display: block; - text-transform: uppercase; - font-family: 'Metropolis-Semibold'; - margin-top: 12px; - float: right; - letter-spacing: 1px; - } - - ::ng-deep .toast-date { - color: #ADBBC4; - font-size: 11px; - margin-left: 6px; - position: relative; - top: 1px; - } - - ::ng-deep .toast-title { - font-weight: 500; - color: #E9ECEF; - font-size: 14px; - margin-top: 0; - line-height: 24px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - max-width: 240px; - } - + @media screen and(max-width: $xs-width) { + max-width: 75vw; + } + + ::ng-deep .toast-description { + font-size: 1em; + color: #adbbc4; + margin-top: 3px; + line-height: 18px; + + -webkit-line-clamp: 4; + -moz-line-clamp: 4; + display: -webkit-box; + overflow: hidden; + text-overflow: ellipsis; + // https://github.com/postcss/autoprefixer/issues/776 + /* autoprefixer: ignore next */ + -webkit-box-orient: vertical; + max-height: 70px; + } + + ::ng-deep .toast-link { + font-size: 0.85em; + color: #89cbdf; + display: block; + text-transform: uppercase; + font-family: 'Metropolis-Semibold'; + margin-top: 12px; + float: right; + letter-spacing: 1px; + } + + ::ng-deep .toast-date { + color: #adbbc4; + font-size: 11px; + margin-left: 6px; + position: relative; + top: 1px; + } + + ::ng-deep .toast-title { + font-weight: 500; + color: #e9ecef; + font-size: 14px; + margin-top: 0; + line-height: 24px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + max-width: 240px; + } } .toast { - display: flex; - flex-direction: row; - max-width: 100%; - min-width: $min-el-size; - background-color: $bgcolor; - border-radius: 3px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); - position: relative; - right: 18px; - padding: 12px; - margin: 0 0 12px 0; - - // animation - steady state of component - transform: scale(1, 1); - transform-origin: 100% 0; + display: flex; + flex-direction: row; + max-width: 100%; + min-width: $min-el-size; + background-color: $bgcolor; + border-radius: 3px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); + position: relative; + right: 18px; + padding: 12px; + margin: 0 0 12px 0; + + // animation - steady state of component + transform: scale(1, 1); + transform-origin: 100% 0; } .dismiss-bg { - .dismiss { - cds-icon[shape="times"] { - fill: #ADBBC4; - margin-top: -8px; - margin-left: 1px; - } - } - background: transparent; - width: 30px; - height: 30px; - display: inline-block; - position: absolute; - right: 8px; - top: 8px; - cursor: pointer; - border-radius: 100%; - border: none; - - &:hover { - background-color: rgba(0, 0, 0, 0.15); - } + .dismiss { + cds-icon[shape='times'] { + fill: #adbbc4; + margin-top: -8px; + margin-left: 1px; + } + } + background: transparent; + width: 30px; + height: 30px; + display: inline-block; + position: absolute; + right: 8px; + top: 8px; + cursor: pointer; + border-radius: 100%; + border: none; + + &:hover { + background-color: rgba(0, 0, 0, 0.15); + } } - .dismiss { - position: absolute; - left: 6px; - top: 6px; + position: absolute; + left: 6px; + top: 6px; } - .gradient { - width: 35%; - height: 100%; - background: linear-gradient(-90deg, rgba($bgcolor, 0) -14.71%, rgba($bgcolor, 1) 46.71%); - display: inline-block; - position: absolute; - top: 0px; - transform: scale(0, 1); - transform-origin: 0 100%; + width: 35%; + height: 100%; + background: linear-gradient( + -90deg, + rgba($bgcolor, 0) -14.71%, + rgba($bgcolor, 1) 46.71% + ); + display: inline-block; + position: absolute; + top: 0px; + transform: scale(0, 1); + transform-origin: 0 100%; } .toast-button { - font-weight: 500; - color: #89CBDF; - text-transform: uppercase; - font-size: 11px; - letter-spacing: 1px; - margin-top: 12px; + font-weight: 500; + color: #89cbdf; + text-transform: uppercase; + font-size: 11px; + letter-spacing: 1px; + margin-top: 12px; } .toast-button.secondary { - margin-right: 6px; + margin-right: 6px; } button.toast-button { - background: none; - border: none; + background: none; + border: none; } .toast-title-container { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } div.clr-row { - padding-bottom: 10px; + padding-bottom: 10px; } div.content { - padding-left: 12px; - width: 100%; + padding-left: 12px; + width: 100%; } div.content-wrapper { - flex: 1; - display: flex; + flex: 1; + display: flex; } div.button-container { - text-align: right; + text-align: right; - button { - cursor: pointer; + button { + cursor: pointer; - &:hover { - color: $darkButtonHoverBlue; - } - } + &:hover { + color: $darkButtonHoverBlue; + } + } } // icons .icon { - transform: scale(1); - transform-origin: center; + transform: scale(1); + transform-origin: center; } .icon-container { - margin: -6px; + margin: -6px; } // info -#info-icon-outline, #info-icon-line { - fill: none; - stroke: #0095D3; - stroke-miterlimit: 10; - stroke-width: 2; +#info-icon-outline, +#info-icon-line { + fill: none; + stroke: #0095d3; + stroke-miterlimit: 10; + stroke-width: 2; } #info-icon-line { - stroke-linecap: round; - stroke-dasharray: 16; - stroke-dashoffset: 0; - animation-fill-mode: forwards; + stroke-linecap: round; + stroke-dasharray: 16; + stroke-dashoffset: 0; + animation-fill-mode: forwards; } #info-icon-dot { - transform-origin: 50% 42%; - fill: #0095D3; + transform-origin: 50% 42%; + fill: #0095d3; } //warning -#warn-icon-line, #warn-icon-triangle, #warn-icon-dot { - fill: #ffef5ff1; +#warn-icon-line, +#warn-icon-triangle, +#warn-icon-dot { + fill: #ffef5ff1; } #warn-icon-dot { - transform-origin: 50% 54%; + transform-origin: 50% 54%; } // error -#error-icon-outline, #error-icon-line { - fill: none; - stroke: #F54F47; - stroke-miterlimit: 10; - stroke-width: 2; +#error-icon-outline, +#error-icon-line { + fill: none; + stroke: #f54f47; + stroke-miterlimit: 10; + stroke-width: 2; } #error-icon-line { - stroke-linecap: round; - stroke-width: 2.65; - stroke-dasharray: 7; - animation-fill-mode: forwards; - stroke-dashoffset: 0; + stroke-linecap: round; + stroke-width: 2.65; + stroke-dasharray: 7; + animation-fill-mode: forwards; + stroke-dashoffset: 0; } #error-icon-dot { - transform-origin: 50% 54%; - fill: #F54F47; + transform-origin: 50% 54%; + fill: #f54f47; } // success icon .checkmark { - fill: none; - stroke: #FFFFFF; - stroke-linecap: round; - stroke-miterlimit: 10; - stroke-width: 1.9px; - stroke-dasharray: 31.386688232421875; - animation-fill-mode: forwards; + fill: none; + stroke: #ffffff; + stroke-linecap: round; + stroke-miterlimit: 10; + stroke-width: 1.9px; + stroke-dasharray: 31.386688232421875; + animation-fill-mode: forwards; } :host-context(.dark) { - .toast { - background-color: $bgcolorDark; - } - - .gradient { - background: linear-gradient(-90deg, rgba($bgcolorDark, 0) -14.71%, rgba($bgcolorDark, 1) 46.71%); - } - - ::ng-deep .toast-description { - color: #A9B6BE; - } - - ::ng-deep .toast-button { - color: #49AFD9; - - &:hover { - color: #0095D3 ; - } - } - - ::ng-deep .toast-date { - color: #A9B6BE; - } - - .dismiss-bg:hover { - background-color: rgba(255,255,255,.1); - } + .toast { + background-color: $bgcolorDark; + } + + .gradient { + background: linear-gradient( + -90deg, + rgba($bgcolorDark, 0) -14.71%, + rgba($bgcolorDark, 1) 46.71% + ); + } + + ::ng-deep .toast-description { + color: #a9b6be; + } + + ::ng-deep .toast-button { + color: #49afd9; + + &:hover { + color: #0095d3; + } + } + + ::ng-deep .toast-date { + color: #a9b6be; + } + + .dismiss-bg:hover { + background-color: rgba(255, 255, 255, 0.1); + } } // MUTED styles :host-context(.muted) { - ::ng-deep .toast-title, - ::ng-deep .toast-date, - ::ng-deep .toast-description, - ::ng-deep .button-container button { - color: $inactiveGray; - } - - .info-bg, - .error-bg { - fill: $inactiveGray; - } - - .info-dot { - fill: $bgcolor; - } - - .info-bg, - .info-dot, - .info-line-vertical, - .info-line-horizontal, - .error-bg, - .error-line, - .error-dot { - stroke: $bgcolor; - } - - :host-context(.dark) { - .info-bg, - .info-dot, - .info-line-vertical, - .info-line-horizontal, - .error-bg, - .error-line, - .error-dot { - stroke: $bgcolorDark; - } - - .info-dot { - fill: $bgcolorDark; - } - } + ::ng-deep .toast-title, + ::ng-deep .toast-date, + ::ng-deep .toast-description, + ::ng-deep .button-container button { + color: $inactiveGray; + } + + .info-bg, + .error-bg { + fill: $inactiveGray; + } + + .info-dot { + fill: $bgcolor; + } + + .info-bg, + .info-dot, + .info-line-vertical, + .info-line-horizontal, + .error-bg, + .error-line, + .error-dot { + stroke: $bgcolor; + } + + :host-context(.dark) { + .info-bg, + .info-dot, + .info-line-vertical, + .info-line-horizontal, + .error-bg, + .error-line, + .error-dot { + stroke: $bgcolorDark; + } + + .info-dot { + fill: $bgcolorDark; + } + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast.component.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast.component.ts index 8b6358ff34..ee40235238 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast.component.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast.component.ts @@ -4,299 +4,369 @@ */ import { - ElementRef, - NgZone, - Component, - Input, - Output, - EventEmitter, - HostListener, - Optional -} from "@angular/core"; + ElementRef, + NgZone, + Component, + Input, + Output, + EventEmitter, + HostListener, + Optional +} from '@angular/core'; import { - trigger, - group, - style, - animate, - transition, - query, - animateChild, - keyframes, + trigger, + group, + style, + animate, + transition, + query, + animateChild, + keyframes } from '@angular/animations'; -import { timer } from "rxjs"; -import { take } from "rxjs/operators"; +import { timer } from 'rxjs'; +import { take } from 'rxjs/operators'; -import { VmwToastType } from "./toast.model"; +import { VmwToastType } from './toast.model'; import { TRANSLATIONS } from './toast.l10n'; -import { VdkSimpleTranslateService } from "../../ngx-utils"; +import { VdkSimpleTranslateService } from '../../ngx-utils'; import { - multiply, - componentPrimaryEnterCurve, - componentPrimaryEnterTiming, - componentPrimaryLeaveCurve, - componentPrimaryLeaveTiming, - linePrimaryEnterCurve, - linePrimaryEnterTiming, - linePrimaryEnterDelay, - lineSecondaryEnterCurve, - lineSecondaryEnterTiming, - lineSecondaryEnterDelay, - DISMISS_ICON_DELAY, - DISMISS_ICON_DURATION, - DISMISS_ICON_CURVE, - GRADIENT_DURATION, - GRADIENT_DELAY, - GRADIENT_LEAVE_CURVE, -} from "../animation-constants"; + multiply, + componentPrimaryEnterCurve, + componentPrimaryEnterTiming, + componentPrimaryLeaveCurve, + componentPrimaryLeaveTiming, + linePrimaryEnterCurve, + linePrimaryEnterTiming, + linePrimaryEnterDelay, + lineSecondaryEnterCurve, + lineSecondaryEnterTiming, + lineSecondaryEnterDelay, + DISMISS_ICON_DELAY, + DISMISS_ICON_DURATION, + DISMISS_ICON_CURVE, + GRADIENT_DURATION, + GRADIENT_DELAY, + GRADIENT_LEAVE_CURVE +} from '../animation-constants'; const AUTODISMISS_TIMEOUT_SECONDS = 6; const TRACKED_TAG = { - "A": true, - "BUTTON": true -} + A: true, + BUTTON: true +}; @Component({ - selector: "vdk-toast", - templateUrl: "./toast.component.html", - styleUrls: ["./toast.component.scss"], - animations: [ - trigger('launchToast', [ - transition(':enter', [ - // toast parent element animation - group([ - style({ - transform: 'translateX(48px) scale(0, 1)' - }), - animate(`${multiply(componentPrimaryEnterTiming)}ms ${componentPrimaryEnterCurve}`, style({ - transform: 'translateX(0) scale(1, 1)' - })), - - // use optional: true for if/else elements - query('.checkmark', animateChild(), {optional: true}), - query('#info-icon-dot', animateChild(), {optional: true}), - query('#info-icon-line', animateChild(), {optional: true}), - query('#warn-icon-dot', animateChild(), {optional: true}), - query('#warn-icon-line', animateChild(), {optional: true}), - query('#error-icon-dot', animateChild(), {optional: true}), - query('#error-icon-line', animateChild(), {optional: true}), - query('.gradient', animateChild()), - query('.dismiss', animateChild(), { optional: true }), - ]), - ]), - - // START LEAVE ANIMATION - // ':leave' is a default state for ngIf and ngFor, doesn't need to be predefined - transition(':leave', [ - group([ - style({ - transform: 'translateX(0px) scale(1, 1)', - marginTop: '*', - }), - - // use query self to be able to group the animation on the current element - query(':self', [ - animate(`${multiply(componentPrimaryLeaveTiming)}ms ${componentPrimaryLeaveCurve}`, style({ - transform: 'translateX(18px) scale(0, 1)' - })), - - animate(`${multiply(componentPrimaryLeaveTiming)}ms ${componentPrimaryLeaveCurve}`, style({ - marginTop: '-{{height}}px' - })), - ]), - - query('.toast-description, .toast-title, .icon, .button-container, .dismiss-bg, .dismiss, .toast-date', [ - animate(`${multiply(10)}ms`, style({ - opacity: '0' - })), - ]), - - ]), - ], { - params: { - height: 0 - } - }), - // end launchToast - ]), - - - // info icon animation - trigger('infoLine', [ - transition('* => *', [ - animate(`${multiply(linePrimaryEnterTiming)}ms ${multiply(linePrimaryEnterDelay)}ms ${linePrimaryEnterCurve}`, keyframes([ - style({ strokeDashoffset: '16', offset: 0 }), - style({ strokeDashoffset: '0', offset: 1.0}), - ])) - ]), - ]), - trigger('infoDot', [ - transition('* => *', [ - style({ - transform: 'scale(0)' - }), - animate(`${multiply(lineSecondaryEnterTiming)}ms ${multiply(lineSecondaryEnterDelay)}ms ${lineSecondaryEnterCurve}`, style({ - transform: 'scale(1)' - })) - ]), - ]), - - // error icon animation - trigger('errorLine', [ - transition('* => *', [ - animate(`${multiply(linePrimaryEnterTiming)}ms ${multiply(linePrimaryEnterDelay)}ms ${linePrimaryEnterCurve}`, keyframes([ - style({ strokeDashoffset: '7.919999599456787', offset: 0 }), - style({ strokeDashoffset: '0', offset: 1.0}), - ])) - ]), - ]), - trigger('errorDot', [ - transition('* => *', [ - style({ - transform: 'scale(0)' - }), - animate(`${multiply(lineSecondaryEnterTiming)}ms ${multiply(lineSecondaryEnterDelay)}ms ${lineSecondaryEnterCurve}`, style({ - transform: 'scale(1)' - })) - ]), - ]), - - //warning icon animation - trigger('warnLine', [ - transition('* => *', [ - animate(`${multiply(linePrimaryEnterTiming)}ms ${multiply(linePrimaryEnterDelay)}ms ${linePrimaryEnterCurve}`, keyframes([ - style({ strokeDashoffset: '7.919999599456787', offset: 0 }), - style({ strokeDashoffset: '0', offset: 1.0}), - ])) - ]), - ]), - trigger('warnDot', [ - transition('* => *', [ - style({ - transform: 'scale(0)' - }), - animate(`${multiply(lineSecondaryEnterTiming)}ms ${multiply(lineSecondaryEnterDelay)}ms ${lineSecondaryEnterCurve}`, style({ - transform: 'scale(1)' - })) - ]), - ]), - - // success icon animation - trigger('checkmarkLine', [ - transition('* => *', [ - // css keyframe animation - animate(`${multiply(linePrimaryEnterTiming)}ms ${multiply(linePrimaryEnterDelay)}ms ${linePrimaryEnterCurve}`, keyframes([ - style({ strokeDashoffset: '31.386688232421875', offset: 0 }), - style({ strokeDashoffset: '0', offset: 1.0}), - ])) - ]), - ]), - - // moving the gradient offview - trigger('gradientMove', [ - transition('* => *', [ - style({ - transform: 'scale(1, 1)' - }), - animate(`${multiply(GRADIENT_DURATION)}ms ${multiply(GRADIENT_DELAY)}ms ${GRADIENT_LEAVE_CURVE}`, style({ - transform: 'scale(0, 1)' - })) - ]), - ]), - - // fade in the dismiss icon - trigger('dismissIconVisible', [ - transition('* => *', [ - style({ - opacity: '0' - }), - animate(`${multiply(DISMISS_ICON_DURATION)}ms ${multiply(DISMISS_ICON_DELAY)}ms ${DISMISS_ICON_CURVE}`, style({ - opacity: '1' - })) - ]), - ]), - ] - + selector: 'vdk-toast', + templateUrl: './toast.component.html', + styleUrls: ['./toast.component.scss'], + animations: [ + trigger('launchToast', [ + transition(':enter', [ + // toast parent element animation + group([ + style({ + transform: 'translateX(48px) scale(0, 1)' + }), + animate( + `${multiply( + componentPrimaryEnterTiming + )}ms ${componentPrimaryEnterCurve}`, + style({ + transform: 'translateX(0) scale(1, 1)' + }) + ), + + // use optional: true for if/else elements + query('.checkmark', animateChild(), { optional: true }), + query('#info-icon-dot', animateChild(), { optional: true }), + query('#info-icon-line', animateChild(), { optional: true }), + query('#warn-icon-dot', animateChild(), { optional: true }), + query('#warn-icon-line', animateChild(), { optional: true }), + query('#error-icon-dot', animateChild(), { optional: true }), + query('#error-icon-line', animateChild(), { optional: true }), + query('.gradient', animateChild()), + query('.dismiss', animateChild(), { optional: true }) + ]) + ]), + + // START LEAVE ANIMATION + // ':leave' is a default state for ngIf and ngFor, doesn't need to be predefined + transition( + ':leave', + [ + group([ + style({ + transform: 'translateX(0px) scale(1, 1)', + marginTop: '*' + }), + + // use query self to be able to group the animation on the current element + query(':self', [ + animate( + `${multiply( + componentPrimaryLeaveTiming + )}ms ${componentPrimaryLeaveCurve}`, + style({ + transform: 'translateX(18px) scale(0, 1)' + }) + ), + + animate( + `${multiply( + componentPrimaryLeaveTiming + )}ms ${componentPrimaryLeaveCurve}`, + style({ + marginTop: '-{{height}}px' + }) + ) + ]), + + query( + '.toast-description, .toast-title, .icon, .button-container, .dismiss-bg, .dismiss, .toast-date', + [ + animate( + `${multiply(10)}ms`, + style({ + opacity: '0' + }) + ) + ] + ) + ]) + ], + { + params: { + height: 0 + } + } + ) + // end launchToast + ]), + + // info icon animation + trigger('infoLine', [ + transition('* => *', [ + animate( + `${multiply(linePrimaryEnterTiming)}ms ${multiply( + linePrimaryEnterDelay + )}ms ${linePrimaryEnterCurve}`, + keyframes([ + style({ strokeDashoffset: '16', offset: 0 }), + style({ strokeDashoffset: '0', offset: 1.0 }) + ]) + ) + ]) + ]), + trigger('infoDot', [ + transition('* => *', [ + style({ + transform: 'scale(0)' + }), + animate( + `${multiply(lineSecondaryEnterTiming)}ms ${multiply( + lineSecondaryEnterDelay + )}ms ${lineSecondaryEnterCurve}`, + style({ + transform: 'scale(1)' + }) + ) + ]) + ]), + + // error icon animation + trigger('errorLine', [ + transition('* => *', [ + animate( + `${multiply(linePrimaryEnterTiming)}ms ${multiply( + linePrimaryEnterDelay + )}ms ${linePrimaryEnterCurve}`, + keyframes([ + style({ strokeDashoffset: '7.919999599456787', offset: 0 }), + style({ strokeDashoffset: '0', offset: 1.0 }) + ]) + ) + ]) + ]), + trigger('errorDot', [ + transition('* => *', [ + style({ + transform: 'scale(0)' + }), + animate( + `${multiply(lineSecondaryEnterTiming)}ms ${multiply( + lineSecondaryEnterDelay + )}ms ${lineSecondaryEnterCurve}`, + style({ + transform: 'scale(1)' + }) + ) + ]) + ]), + + //warning icon animation + trigger('warnLine', [ + transition('* => *', [ + animate( + `${multiply(linePrimaryEnterTiming)}ms ${multiply( + linePrimaryEnterDelay + )}ms ${linePrimaryEnterCurve}`, + keyframes([ + style({ strokeDashoffset: '7.919999599456787', offset: 0 }), + style({ strokeDashoffset: '0', offset: 1.0 }) + ]) + ) + ]) + ]), + trigger('warnDot', [ + transition('* => *', [ + style({ + transform: 'scale(0)' + }), + animate( + `${multiply(lineSecondaryEnterTiming)}ms ${multiply( + lineSecondaryEnterDelay + )}ms ${lineSecondaryEnterCurve}`, + style({ + transform: 'scale(1)' + }) + ) + ]) + ]), + + // success icon animation + trigger('checkmarkLine', [ + transition('* => *', [ + // css keyframe animation + animate( + `${multiply(linePrimaryEnterTiming)}ms ${multiply( + linePrimaryEnterDelay + )}ms ${linePrimaryEnterCurve}`, + keyframes([ + style({ strokeDashoffset: '31.386688232421875', offset: 0 }), + style({ strokeDashoffset: '0', offset: 1.0 }) + ]) + ) + ]) + ]), + + // moving the gradient offview + trigger('gradientMove', [ + transition('* => *', [ + style({ + transform: 'scale(1, 1)' + }), + animate( + `${multiply(GRADIENT_DURATION)}ms ${multiply( + GRADIENT_DELAY + )}ms ${GRADIENT_LEAVE_CURVE}`, + style({ + transform: 'scale(0, 1)' + }) + ) + ]) + ]), + + // fade in the dismiss icon + trigger('dismissIconVisible', [ + transition('* => *', [ + style({ + opacity: '0' + }), + animate( + `${multiply(DISMISS_ICON_DURATION)}ms ${multiply( + DISMISS_ICON_DELAY + )}ms ${DISMISS_ICON_CURVE}`, + style({ + opacity: '1' + }) + ) + ]) + ]) + ] }) export class VdkToastComponent { - public mouseover = false; - public focused = false; - - @Input() type: VmwToastType = VmwToastType.INFO; - @Input() primaryButtonText: string; - @Input() secondaryButtonText: string; - @Input() dismissible: boolean = true; - @Input() timeoutSeconds: number = AUTODISMISS_TIMEOUT_SECONDS; - - @Output() dismissed = new EventEmitter(); - @Output() primaryButtonClick = new EventEmitter(); - @Output() secondaryButtonClick = new EventEmitter(); - - readonly VmwToastType = VmwToastType; - disableAutoDismiss: boolean = false; - height: number; - animate = true; - - constructor( - private element: ElementRef, - private ngZone: NgZone, - public translateService: VdkSimpleTranslateService, - // @Optional() private segmentService, - ) { - this.translateService.loadTranslationsForComponent('toast', TRANSLATIONS); - } - - ngOnInit() { - this.setUpTimer(); - } - - @HostListener('click', ['$event']) - trackClicks(event: any) { - return; - } - - mouseOver(over: boolean) { - // If the user moves their mouse over the snack, disable auto-dismiss - this.disableAutoDismiss = over; - } - - focus(focused: boolean) { - this.disableAutoDismiss = focused; - } - - get loaded() { - return { - value: this.animate, - params: { - height: this.element.nativeElement.clientHeight - } - }; - } - - dismiss(userDismissed: boolean = false) { - this.animate = false; - - // before we tell the app to remove the toast, give the leave animation - // some time to run... - timer(multiply(componentPrimaryLeaveTiming + 200)).pipe(take(1)).subscribe(() => { - this.dismissed.emit(); - }); - } - - private setUpTimer() { - if (this.timeoutSeconds > 0) { - this.ngZone.runOutsideAngular(() => { - timer(this.timeoutSeconds * multiply(1000)).pipe(take(1)).subscribe(() => { - this.ngZone.run(() => { - if (this.disableAutoDismiss) { - this.setUpTimer(); - return; - } - this.dismiss(); - }); - }); - }); - } - } + public mouseover = false; + public focused = false; + + @Input() type: VmwToastType = VmwToastType.INFO; + @Input() primaryButtonText: string; + @Input() secondaryButtonText: string; + @Input() dismissible: boolean = true; + @Input() timeoutSeconds: number = AUTODISMISS_TIMEOUT_SECONDS; + + @Output() dismissed = new EventEmitter(); + @Output() primaryButtonClick = new EventEmitter(); + @Output() secondaryButtonClick = new EventEmitter(); + + readonly VmwToastType = VmwToastType; + disableAutoDismiss: boolean = false; + height: number; + animate = true; + + constructor( + private element: ElementRef, + private ngZone: NgZone, + public translateService: VdkSimpleTranslateService // @Optional() private segmentService, + ) { + this.translateService.loadTranslationsForComponent('toast', TRANSLATIONS); + } + + ngOnInit() { + this.setUpTimer(); + } + + @HostListener('click', ['$event']) + trackClicks(event: any) { + return; + } + + mouseOver(over: boolean) { + // If the user moves their mouse over the snack, disable auto-dismiss + this.disableAutoDismiss = over; + } + + focus(focused: boolean) { + this.disableAutoDismiss = focused; + } + + get loaded() { + return { + value: this.animate, + params: { + height: this.element.nativeElement.clientHeight + } + }; + } + + dismiss(userDismissed: boolean = false) { + this.animate = false; + + // before we tell the app to remove the toast, give the leave animation + // some time to run... + timer(multiply(componentPrimaryLeaveTiming + 200)) + .pipe(take(1)) + .subscribe(() => { + this.dismissed.emit(); + }); + } + + private setUpTimer() { + if (this.timeoutSeconds > 0) { + this.ngZone.runOutsideAngular(() => { + timer(this.timeoutSeconds * multiply(1000)) + .pipe(take(1)) + .subscribe(() => { + this.ngZone.run(() => { + if (this.disableAutoDismiss) { + this.setUpTimer(); + return; + } + this.dismiss(); + }); + }); + }); + } + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast.l10n.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast.l10n.ts index d54ac54fbe..3b8f9208ff 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast.l10n.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast.l10n.ts @@ -4,76 +4,76 @@ */ export const TRANSLATIONS = { - 'en': { - 'dismiss-notification': 'Dismiss notification', - 'success-icon': 'Success Icon', - 'info-icon': 'Information Icon', - 'failure-icon': 'Failure Icon', - }, - 'es': { - 'dismiss-notification': 'Descartar notificación', - 'success-icon': 'Icono de éxito', - 'failure-icon': 'Icono de error', - 'info-icon': 'Icono de información', - }, - 'de': { - 'dismiss-notification': 'Benachrichtigung verwerfen', - 'success-icon': 'Symbol „Erfolgreich“', - 'failure-icon': 'Fehlersymbol', - 'info-icon': 'Informationssymbol', - }, - 'fr': { - 'dismiss-notification': 'Ignorer la notification', - 'success-icon': 'Icône de réussite', - 'failure-icon': "Icône d'échec", - 'info-icon': "Icône d'informations", - }, - 'ja': { - 'dismiss-notification': '通知を破棄', - 'success-icon': '成功アイコン', - 'failure-icon': '障害アイコン', - 'info-icon': '情報アイコン', - }, - 'ko': { - 'dismiss-notification': '알림 해제', - 'success-icon': '성공 아이콘', - 'failure-icon': '실패 아이콘', - 'info-icon': '정보 아이콘', - }, - 'zh_TW': { - 'dismiss-notification': '關閉通知', - 'success-icon': '成功图标', - 'failure-icon': '失敗圖示', - 'info-icon': '資訊圖示', - }, - 'zh_CN': { - 'dismiss-notification': '关闭通知', - 'success-icon': '成功图标', - 'info-icon': '信息图标', - 'failure-icon': '故障图标', - }, - 'it': { - 'dismiss-notification': 'Ignora notifica', - 'success-icon': 'Icona Operazione riuscita', - 'info-icon': 'Icona Informazioni', - 'failure-icon': 'Icona Errore', - }, - 'nl': { - 'dismiss-notification': 'Melding negeren', - 'success-icon': 'Pictogram Geslaagd', - 'info-icon': 'Pictogram Informatie', - 'failure-icon': 'Pictogram Fout', - }, - 'pt': { - 'dismiss-notification': 'Descartar notificação', - 'success-icon': 'Ícone de êxito', - 'info-icon': 'Ícone de informação', - 'failure-icon': 'Ícone de falha', - }, - 'ru': { - 'dismiss-notification': 'Закрыть уведомление', - 'success-icon': 'Значок успешного выполнения', - 'info-icon': 'Значок информации', - 'failure-icon': 'Значок ошибки', - }, + en: { + 'dismiss-notification': 'Dismiss notification', + 'success-icon': 'Success Icon', + 'info-icon': 'Information Icon', + 'failure-icon': 'Failure Icon' + }, + es: { + 'dismiss-notification': 'Descartar notificación', + 'success-icon': 'Icono de éxito', + 'failure-icon': 'Icono de error', + 'info-icon': 'Icono de información' + }, + de: { + 'dismiss-notification': 'Benachrichtigung verwerfen', + 'success-icon': 'Symbol „Erfolgreich“', + 'failure-icon': 'Fehlersymbol', + 'info-icon': 'Informationssymbol' + }, + fr: { + 'dismiss-notification': 'Ignorer la notification', + 'success-icon': 'Icône de réussite', + 'failure-icon': "Icône d'échec", + 'info-icon': "Icône d'informations" + }, + ja: { + 'dismiss-notification': '通知を破棄', + 'success-icon': '成功アイコン', + 'failure-icon': '障害アイコン', + 'info-icon': '情報アイコン' + }, + ko: { + 'dismiss-notification': '알림 해제', + 'success-icon': '성공 아이콘', + 'failure-icon': '실패 아이콘', + 'info-icon': '정보 아이콘' + }, + zh_TW: { + 'dismiss-notification': '關閉通知', + 'success-icon': '成功图标', + 'failure-icon': '失敗圖示', + 'info-icon': '資訊圖示' + }, + zh_CN: { + 'dismiss-notification': '关闭通知', + 'success-icon': '成功图标', + 'info-icon': '信息图标', + 'failure-icon': '故障图标' + }, + it: { + 'dismiss-notification': 'Ignora notifica', + 'success-icon': 'Icona Operazione riuscita', + 'info-icon': 'Icona Informazioni', + 'failure-icon': 'Icona Errore' + }, + nl: { + 'dismiss-notification': 'Melding negeren', + 'success-icon': 'Pictogram Geslaagd', + 'info-icon': 'Pictogram Informatie', + 'failure-icon': 'Pictogram Fout' + }, + pt: { + 'dismiss-notification': 'Descartar notificação', + 'success-icon': 'Ícone de êxito', + 'info-icon': 'Ícone de informação', + 'failure-icon': 'Ícone de falha' + }, + ru: { + 'dismiss-notification': 'Закрыть уведомление', + 'success-icon': 'Значок успешного выполнения', + 'info-icon': 'Значок информации', + 'failure-icon': 'Значок ошибки' + } }; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast.model.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast.model.ts index ca492ec7d2..2f71f636c6 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast.model.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/toast/toast.model.ts @@ -4,8 +4,8 @@ */ export enum VmwToastType { - SUCCESS = "success", - FAILURE = "failure", - INFO = "info", - WARN = "warning", + SUCCESS = 'success', + FAILURE = 'failure', + INFO = 'info', + WARN = 'warning' } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/vdk-ngx-components.module.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/vdk-ngx-components.module.ts index 3d200de559..2de4a1cbd8 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/vdk-ngx-components.module.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-components/vdk-ngx-components.module.ts @@ -1,101 +1,101 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 */ -import { CUSTOM_ELEMENTS_SCHEMA, ModuleWithProviders, NgModule } from "@angular/core"; -import { CommonModule } from "@angular/common"; -import { FormsModule, ReactiveFormsModule } from "@angular/forms"; +import { + CUSTOM_ELEMENTS_SCHEMA, + ModuleWithProviders, + NgModule +} from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { - ClarityModule, - ClrDropdownModule, - ClrLoadingButtonModule, - ClrLoadingModule, - ClrTooltipModule, -} from "@clr/angular"; + ClarityModule, + ClrDropdownModule, + ClrLoadingButtonModule, + ClrLoadingModule, + ClrTooltipModule +} from '@clr/angular'; import { VdkSimpleTranslateModule } from '../ngx-utils'; import { - angleIcon, - arrowIcon, - checkCircleIcon, - checkIcon, - ClarityIcons, - copyToClipboardIcon, - exclamationCircleIcon, - searchIcon, - timesCircleIcon, - timesIcon + angleIcon, + arrowIcon, + checkCircleIcon, + checkIcon, + ClarityIcons, + copyToClipboardIcon, + exclamationCircleIcon, + searchIcon, + timesCircleIcon, + timesIcon } from '@cds/core/icon'; -import { VdkEmptyStatePlaceholderModule } from "./empty-state-placeholder/empty-state-placeholder.module"; +import { VdkEmptyStatePlaceholderModule } from './empty-state-placeholder/empty-state-placeholder.module'; -import { COPY_TO_CLIPBPOARD_BUTTON_DIRECTIVES } from "./copy-to-clipboard-button/index"; -import { FORM_SECTION_DIRECTIVES } from "./form-section/index"; -import { FORM_SECTION_CONTAINER_DIRECTIVES } from "./form-section-container/index"; -import { TOAST_DIRECTIVES } from "./toast/index"; -import { VdkSearchModule } from "./search"; +import { COPY_TO_CLIPBPOARD_BUTTON_DIRECTIVES } from './copy-to-clipboard-button/index'; +import { FORM_SECTION_DIRECTIVES } from './form-section/index'; +import { FORM_SECTION_CONTAINER_DIRECTIVES } from './form-section-container/index'; +import { TOAST_DIRECTIVES } from './toast/index'; +import { VdkSearchModule } from './search'; @NgModule({ - imports: [ - CommonModule, - FormsModule, - ReactiveFormsModule, - ClarityModule, - ClrTooltipModule, - ClrDropdownModule, - ClrLoadingModule, - ClrLoadingButtonModule, - VdkSimpleTranslateModule, - VdkEmptyStatePlaceholderModule, - VdkSearchModule - ], - declarations: [ - COPY_TO_CLIPBPOARD_BUTTON_DIRECTIVES, - FORM_SECTION_DIRECTIVES, - FORM_SECTION_CONTAINER_DIRECTIVES, - TOAST_DIRECTIVES - ], - exports: [ - COPY_TO_CLIPBPOARD_BUTTON_DIRECTIVES, - FORM_SECTION_DIRECTIVES, - FORM_SECTION_CONTAINER_DIRECTIVES, - TOAST_DIRECTIVES, - VdkEmptyStatePlaceholderModule, - VdkSearchModule - ], - schemas: [ - CUSTOM_ELEMENTS_SCHEMA, - ], + imports: [ + CommonModule, + FormsModule, + ReactiveFormsModule, + ClarityModule, + ClrTooltipModule, + ClrDropdownModule, + ClrLoadingModule, + ClrLoadingButtonModule, + VdkSimpleTranslateModule, + VdkEmptyStatePlaceholderModule, + VdkSearchModule + ], + declarations: [ + COPY_TO_CLIPBPOARD_BUTTON_DIRECTIVES, + FORM_SECTION_DIRECTIVES, + FORM_SECTION_CONTAINER_DIRECTIVES, + TOAST_DIRECTIVES + ], + exports: [ + COPY_TO_CLIPBPOARD_BUTTON_DIRECTIVES, + FORM_SECTION_DIRECTIVES, + FORM_SECTION_CONTAINER_DIRECTIVES, + TOAST_DIRECTIVES, + VdkEmptyStatePlaceholderModule, + VdkSearchModule + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class VdkComponentsModule { - static forRoot(): ModuleWithProviders { - return { - ngModule: VdkComponentsModule, - }; - } + static forRoot(): ModuleWithProviders { + return { + ngModule: VdkComponentsModule + }; + } - static forChild(): ModuleWithProviders { - return { - ngModule: VdkComponentsModule, - }; - } + static forChild(): ModuleWithProviders { + return { + ngModule: VdkComponentsModule + }; + } - constructor() { - ClarityIcons.addIcons( - angleIcon, - arrowIcon, - checkCircleIcon, - checkIcon, - copyToClipboardIcon, - exclamationCircleIcon, - searchIcon, - timesCircleIcon, - timesIcon - ); - } + constructor() { + ClarityIcons.addIcons( + angleIcon, + arrowIcon, + checkCircleIcon, + checkIcon, + copyToClipboardIcon, + exclamationCircleIcon, + searchIcon, + timesCircleIcon, + timesIcon + ); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/index.ts index 79cbf723dd..f231fe8358 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from "./simple-translate-service/index"; +export * from './simple-translate-service/index'; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/public-api.ts index ba142389bd..484b60ff3c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/index.ts index b135809eb5..63b98e42a7 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/index.ts @@ -3,6 +3,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from "./simple-translate.module"; -export * from "./simple-translate.service"; -export * from "./simple-translate.pipe"; +export * from './simple-translate.module'; +export * from './simple-translate.service'; +export * from './simple-translate.pipe'; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/public-api.ts index ba142389bd..484b60ff3c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/simple-translate.module.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/simple-translate.module.ts index 4aef87e8f8..f44d29aee8 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/simple-translate.module.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/simple-translate.module.ts @@ -1,30 +1,22 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 */ -import { NgModule, ModuleWithProviders } from "@angular/core"; +import { NgModule, ModuleWithProviders } from '@angular/core'; -import { VdkSimpleTranslateService } from "./simple-translate.service"; -import { VdkSimpleTranslatePipe } from "./simple-translate.pipe"; +import { VdkSimpleTranslateService } from './simple-translate.service'; +import { VdkSimpleTranslatePipe } from './simple-translate.pipe'; @NgModule({ - declarations: [ - VdkSimpleTranslatePipe, - ], - exports: [ - VdkSimpleTranslatePipe, - ], + declarations: [VdkSimpleTranslatePipe], + exports: [VdkSimpleTranslatePipe] }) export class VdkSimpleTranslateModule { - static forRoot(): ModuleWithProviders { - return { - ngModule: VdkSimpleTranslateModule, - providers: [ - VdkSimpleTranslateService, - ] - }; - } + static forRoot(): ModuleWithProviders { + return { + ngModule: VdkSimpleTranslateModule, + providers: [VdkSimpleTranslateService] + }; + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/simple-translate.pipe.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/simple-translate.pipe.ts index 39f00b5294..2fe2a10be1 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/simple-translate.pipe.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/simple-translate.pipe.ts @@ -8,13 +8,13 @@ import { Pipe, PipeTransform } from '@angular/core'; import { VdkSimpleTranslateService } from './simple-translate.service'; @Pipe({ - name: 'simpleTranslate', - pure: false, + name: 'simpleTranslate', + pure: false }) export class VdkSimpleTranslatePipe implements PipeTransform { - constructor(private simpleTranslate: VdkSimpleTranslateService) {} + constructor(private simpleTranslate: VdkSimpleTranslateService) {} - transform(text: string, ...args: any[]) { - return this.simpleTranslate.translate(text, ...args); - } + transform(text: string, ...args: any[]) { + return this.simpleTranslate.translate(text, ...args); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/simple-translate.service.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/simple-translate.service.spec.ts index 47c9ac9eef..e71af3f13b 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/simple-translate.service.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/simple-translate.service.spec.ts @@ -3,68 +3,70 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { TestBed, inject } from "@angular/core/testing"; +import { TestBed, inject } from '@angular/core/testing'; -import { VdkSimpleTranslateService } from "./simple-translate.service"; +import { VdkSimpleTranslateService } from './simple-translate.service'; const mockTranslations = { - 'en': { - 'chat-with-vmware-support': 'Chat with VMware Support', - 'return-to-chat': "Return to chat" - }, - 'es': { - 'chat-with-vmware-support': 'Conversa con VMware Support', - 'return-to-chat': "Retornar a conversacion" - } + en: { + 'chat-with-vmware-support': 'Chat with VMware Support', + 'return-to-chat': 'Return to chat' + }, + es: { + 'chat-with-vmware-support': 'Conversa con VMware Support', + 'return-to-chat': 'Retornar a conversacion' + } }; -describe("VdkSimpleTranslateService", () => { - let service: VdkSimpleTranslateService; +describe('VdkSimpleTranslateService', () => { + let service: VdkSimpleTranslateService; - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [ - VdkSimpleTranslateService - ] - }); + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [VdkSimpleTranslateService] + }); - service = TestBed.inject(VdkSimpleTranslateService); - }); + service = TestBed.inject(VdkSimpleTranslateService); + }); - it("should accept a LCID and set language", () => { - expect(service).toBeTruthy(); - expect(service.getLanguage()).toEqual('en'); - service.setLanguage('es-CO'); - expect(service.getLanguage()).toEqual('es'); - service.setLanguage('es_CO'); - expect(service.getLanguage()).toEqual('es'); - service.setLanguage('zh_TW'); - expect(service.getLanguage()).toEqual('zh_TW'); - service.setLanguage('zh'); - expect(service.getLanguage()).toEqual('zh'); - }); + it('should accept a LCID and set language', () => { + expect(service).toBeTruthy(); + expect(service.getLanguage()).toEqual('en'); + service.setLanguage('es-CO'); + expect(service.getLanguage()).toEqual('es'); + service.setLanguage('es_CO'); + expect(service.getLanguage()).toEqual('es'); + service.setLanguage('zh_TW'); + expect(service.getLanguage()).toEqual('zh_TW'); + service.setLanguage('zh'); + expect(service.getLanguage()).toEqual('zh'); + }); - it("should translate string as per specified language", () => { - service.setLanguage('es-CO'); + it('should translate string as per specified language', () => { + service.setLanguage('es-CO'); - service.loadTranslationsForComponent('test', mockTranslations); + service.loadTranslationsForComponent('test', mockTranslations); - expect(service.translate('test.return-to-chat')).toEqual('Retornar a conversacion'); - }); + expect(service.translate('test.return-to-chat')).toEqual( + 'Retornar a conversacion' + ); + }); - it("should return translation in the default langauge if the string does not exist in the specified language", () => { - service.setLanguage('pl-PL'); + it('should return translation in the default langauge if the string does not exist in the specified language', () => { + service.setLanguage('pl-PL'); - service.loadTranslationsForComponent('test', mockTranslations); + service.loadTranslationsForComponent('test', mockTranslations); - expect(service.translate('test.return-to-chat')).toEqual('Return to chat'); - }); + expect(service.translate('test.return-to-chat')).toEqual('Return to chat'); + }); - it("error message should show if key is not found", () => { - service.setLanguage('pl-PL'); + it('error message should show if key is not found', () => { + service.setLanguage('pl-PL'); - service.loadTranslationsForComponent('test', mockTranslations); + service.loadTranslationsForComponent('test', mockTranslations); - expect(service.translate('test.some-non-existing-key')).toEqual('!! Key test.some-non-existing-key not found !!'); - }); + expect(service.translate('test.some-non-existing-key')).toEqual( + '!! Key test.some-non-existing-key not found !!' + ); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/simple-translate.service.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/simple-translate.service.ts index 03b2047599..5b5ae17069 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/simple-translate.service.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/commons/ngx-utils/simple-translate-service/simple-translate.service.ts @@ -3,93 +3,94 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Injectable } from "@angular/core"; +import { Injectable } from '@angular/core'; const DEFAULT_LANGUAGE = 'en'; @Injectable({ - providedIn: 'root' + providedIn: 'root' }) export class VdkSimpleTranslateService { - private language: string = DEFAULT_LANGUAGE; - private translations: any = {}; - - constructor () { - const w: any = window as any; - const language = w.navigator.language || w.navigator.userLanguage; - this.setLanguage(language); - } - - loadTranslationsForComponent(componentKey: string, translationsToAdd: any) { - for (let language in translationsToAdd) { - if (!this.translations[language]) { - this.translations[language] = {}; - } - - for (let y in translationsToAdd[language]) { - let newKey = componentKey + '.' + y; - this.translations[language][newKey] = translationsToAdd[language][y]; - } - } - } - - setLanguage(language: string) { - language = language.replace('-', '_'); - - // check if different locale names are used for Simplified or Traditional Chinese - const chineseMapping = { - 'zh_Hans': 'zh_CN', - 'zh_Hant': 'zh_TW' - } - language = chineseMapping[language] || language; - - // Special-case Chinese because we support both TW and CN locales - // Also if the locale is pt_PT(Portuguese Portugal) we should default to EN - // otherwise the 2 character language ID is what we want - const mainLocale = language.substring(0, 2); - const isChinese = language.length > 2 && mainLocale === 'zh'; - const isNotSupportedPortuguese = language.length > 2 && mainLocale === 'pt' && language !== 'pt_BR'; - - if (isChinese || isNotSupportedPortuguese) { - this.language = language; - } else { - this.language = mainLocale; - } - } - - getLanguage() { - return this.language; - } - - translate(key: any, ...args: any[]) { - let translations = this.translations[this.language]; - - //if there are no translations of the user's language set translations to equal the default language - if (!translations) { - translations = this.translations[DEFAULT_LANGUAGE] ? this.translations[DEFAULT_LANGUAGE] : []; - } - - //if there is a translation get that translation otherwise use the default language - let translation = undefined; - if (translations[key]) { - translation = translations[key]; - } else if(this.translations[DEFAULT_LANGUAGE]) { - translation = this.translations[DEFAULT_LANGUAGE][key]; - } - - //if no translation is found in the user's language or in the default language then show an error string - if (!translation) { - translation = `!! Key ${key} not found !!`; - } - - return this.format(translation, ...args); - } - - private format(format: string, ...args: string[]) { - return format.replace(/{(\d+)}/g, function(match, number) { - return typeof args[number] != 'undefined' - ? args[number] - : match; - }); - } + private language: string = DEFAULT_LANGUAGE; + private translations: any = {}; + + constructor() { + const w: any = window as any; + const language = w.navigator.language || w.navigator.userLanguage; + this.setLanguage(language); + } + + loadTranslationsForComponent(componentKey: string, translationsToAdd: any) { + for (let language in translationsToAdd) { + if (!this.translations[language]) { + this.translations[language] = {}; + } + + for (let y in translationsToAdd[language]) { + let newKey = componentKey + '.' + y; + this.translations[language][newKey] = translationsToAdd[language][y]; + } + } + } + + setLanguage(language: string) { + language = language.replace('-', '_'); + + // check if different locale names are used for Simplified or Traditional Chinese + const chineseMapping = { + zh_Hans: 'zh_CN', + zh_Hant: 'zh_TW' + }; + language = chineseMapping[language] || language; + + // Special-case Chinese because we support both TW and CN locales + // Also if the locale is pt_PT(Portuguese Portugal) we should default to EN + // otherwise the 2 character language ID is what we want + const mainLocale = language.substring(0, 2); + const isChinese = language.length > 2 && mainLocale === 'zh'; + const isNotSupportedPortuguese = + language.length > 2 && mainLocale === 'pt' && language !== 'pt_BR'; + + if (isChinese || isNotSupportedPortuguese) { + this.language = language; + } else { + this.language = mainLocale; + } + } + + getLanguage() { + return this.language; + } + + translate(key: any, ...args: any[]) { + let translations = this.translations[this.language]; + + //if there are no translations of the user's language set translations to equal the default language + if (!translations) { + translations = this.translations[DEFAULT_LANGUAGE] + ? this.translations[DEFAULT_LANGUAGE] + : []; + } + + //if there is a translation get that translation otherwise use the default language + let translation = undefined; + if (translations[key]) { + translation = translations[key]; + } else if (this.translations[DEFAULT_LANGUAGE]) { + translation = this.translations[DEFAULT_LANGUAGE][key]; + } + + //if no translation is found in the user's language or in the default language then show an error string + if (!translation) { + translation = `!! Key ${key} not found !!`; + } + + return this.format(translation, ...args); + } + + private format(format: string, ...args: string[]) { + return format.replace(/{(\d+)}/g, function (match, number) { + return typeof args[number] != 'undefined' ? args[number] : match; + }); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/base/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/base/index.ts index da2b664823..d5fda50e2c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/base/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/base/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/base/interfaces/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/base/interfaces/index.ts index 9d35b0dc49..1090cdfb01 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/base/interfaces/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/base/interfaces/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/base/interfaces/taurus-component-lifecycle-hooks.interface.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/base/interfaces/taurus-component-lifecycle-hooks.interface.ts index d7ad5c60d4..e75a631393 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/base/interfaces/taurus-component-lifecycle-hooks.interface.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/base/interfaces/taurus-component-lifecycle-hooks.interface.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -13,14 +11,14 @@ import { ComponentModel } from '../../model'; * */ export interface OnTaurusModelInit { - /** - * ** Fires once per Route, after Component is initialized and - * immediately after {@link ComponentModel} is initialized and it is bound to the Component model field. - * - * - model - ComponentModel optional parameter. - * - task - Is string optional parameter that inject context to callback for the specific operation. - */ - onModelInit(model?: ComponentModel, task?: string): void; + /** + * ** Fires once per Route, after Component is initialized and + * immediately after {@link ComponentModel} is initialized and it is bound to the Component model field. + * + * - model - ComponentModel optional parameter. + * - task - Is string optional parameter that inject context to callback for the specific operation. + */ + onModelInit(model?: ComponentModel, task?: string): void; } /** @@ -31,37 +29,36 @@ export interface OnTaurusModelInit { * */ export interface OnTaurusModelFirstLoad { - /** - * ** Fires when something in State change and its status is LOADED or FAILED, and it fires only once. - * - * - model - ComponentModel optional parameter. - * - task - Is string optional parameter that inject context to callback for the specific operation. - * - *

    - * - General hook ideal for Ui state restore, or something that need Read->Action->Done behaviour. - *

    - */ - onModelFirstLoad(model?: ComponentModel, task?: string): void; + /** + * ** Fires when something in State change and its status is LOADED or FAILED, and it fires only once. + * + * - model - ComponentModel optional parameter. + * - task - Is string optional parameter that inject context to callback for the specific operation. + * + *

    + * - General hook ideal for Ui state restore, or something that need Read->Action->Done behaviour. + *

    + */ + onModelFirstLoad(model?: ComponentModel, task?: string): void; } - /** * ** Taurus Component Lifecycle hook for Model Initial Load. * * */ export interface OnTaurusModelInitialLoad { - /** - * ** Fires when something in State change and its status is LOADED or FAILED, and it fires only once. - * - * - model - ComponentModel optional parameter. - * - task - Is string optional parameter that inject context to callback for the specific operation. - * - *

    - * - General hook ideal for Ui state restore, or something that need Read->Action->Done behaviour. - *

    - */ - onModelInitialLoad(model?: ComponentModel, task?: string): void; + /** + * ** Fires when something in State change and its status is LOADED or FAILED, and it fires only once. + * + * - model - ComponentModel optional parameter. + * - task - Is string optional parameter that inject context to callback for the specific operation. + * + *

    + * - General hook ideal for Ui state restore, or something that need Read->Action->Done behaviour. + *

    + */ + onModelInitialLoad(model?: ComponentModel, task?: string): void; } /** @@ -70,17 +67,17 @@ export interface OnTaurusModelInitialLoad { * */ export interface OnTaurusModelLoad { - /** - * ** Fires when something in State change and its status is LOADED or FAILED. - * - * - model - ComponentModel optional parameter. - * - task - Is string optional parameter that inject context to callback for the specific operation. - * - *

    - * - General hook ideal for loading spinner HIDE. - *

    - */ - onModelLoad(model?: ComponentModel, task?: string): void; + /** + * ** Fires when something in State change and its status is LOADED or FAILED. + * + * - model - ComponentModel optional parameter. + * - task - Is string optional parameter that inject context to callback for the specific operation. + * + *

    + * - General hook ideal for loading spinner HIDE. + *

    + */ + onModelLoad(model?: ComponentModel, task?: string): void; } /** @@ -89,13 +86,13 @@ export interface OnTaurusModelLoad { * */ export interface OnTaurusModelChange { - /** - * ** Fires when something in State change and its status is LOADED. - * - * - model - ComponentModel optional parameter. - * - task - Is string optional parameter that inject context to callback for the specific operation. - */ - onModelChange(model?: ComponentModel, task?: string): void; + /** + * ** Fires when something in State change and its status is LOADED. + * + * - model - ComponentModel optional parameter. + * - task - Is string optional parameter that inject context to callback for the specific operation. + */ + onModelChange(model?: ComponentModel, task?: string): void; } /** @@ -106,13 +103,13 @@ export interface OnTaurusModelChange { * */ export interface OnTaurusModelFail { - /** - * ** Fires when something in State change and its status is FAILED. - * - * - model - ComponentModel optional parameter. - * - task - Is string optional parameter that inject context to callback for the specific operation. - */ - onModelFail(model?: ComponentModel, task?: string): void; + /** + * ** Fires when something in State change and its status is FAILED. + * + * - model - ComponentModel optional parameter. + * - task - Is string optional parameter that inject context to callback for the specific operation. + */ + onModelFail(model?: ComponentModel, task?: string): void; } /** @@ -121,19 +118,19 @@ export interface OnTaurusModelFail { * */ export interface OnTaurusModelError { - /** - * ** Fires when something in State change and its status is FAILED. - * - * - model - ComponentModel optional parameter. - * - task - Is string optional parameter that inject context to callback for the specific operation. - */ - onModelError(model?: ComponentModel, task?: string): void; + /** + * ** Fires when something in State change and its status is FAILED. + * + * - model - ComponentModel optional parameter. + * - task - Is string optional parameter that inject context to callback for the specific operation. + */ + onModelError(model?: ComponentModel, task?: string): void; } -export type TaurusComponentHooks = OnTaurusModelInit - & OnTaurusModelInitialLoad - & OnTaurusModelFirstLoad - & OnTaurusModelLoad - & OnTaurusModelChange - & OnTaurusModelError - & OnTaurusModelFail; +export type TaurusComponentHooks = OnTaurusModelInit & + OnTaurusModelInitialLoad & + OnTaurusModelFirstLoad & + OnTaurusModelLoad & + OnTaurusModelChange & + OnTaurusModelError & + OnTaurusModelFail; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/base/taurus-base.component.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/base/taurus-base.component.spec.ts index 735c3ea7ef..ff51ec16a0 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/base/taurus-base.component.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/base/taurus-base.component.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -27,528 +25,708 @@ import { ComponentModel, ComponentState, FAILED, LOADED } from '../model'; import { ComponentService } from '../services'; import { - OnTaurusModelChange, - OnTaurusModelFail, - OnTaurusModelFirstLoad, - OnTaurusModelInit, - OnTaurusModelLoad + OnTaurusModelChange, + OnTaurusModelFail, + OnTaurusModelFirstLoad, + OnTaurusModelInit, + OnTaurusModelLoad } from './interfaces'; import { TaurusBaseComponent } from './taurus-base.component'; @Component({ - selector: 'shared-taurus-base-subclass-component', - template: '' + selector: 'shared-taurus-base-subclass-component', + template: '' }) - // eslint-disable-next-line @angular-eslint/component-class-suffix -class TaurusBaseComponentStub extends TaurusBaseComponent - implements OnInit, OnDestroy, - OnTaurusModelInit, OnTaurusModelLoad, - OnTaurusModelFirstLoad, OnTaurusModelChange, - OnTaurusModelFail { - - uuid = 'TaurusBaseComponentStub'; - - constructor(componentService: ComponentService, - navigationService: NavigationService, - activatedRoute: ActivatedRoute) { - super(componentService, navigationService, activatedRoute); - } - - onModelInit(_model?: ComponentModel, _task?: string) { - // No-op. - } - - onModelFirstLoad(_model?: ComponentModel, _task?: string) { - // No-op. - } - - onModelLoad(_model?: ComponentModel, _task?: string) { - // No-op. - } - - onModelChange(_model?: ComponentModel, _task?: string) { - // No-op. - } - - onModelFail(_model?: ComponentModel, _task?: string) { - // No-op. - } - - override ngOnInit() { - super.ngOnInit(); - } - - override ngOnDestroy() { - super.ngOnDestroy(); - } +// eslint-disable-next-line @angular-eslint/component-class-suffix +class TaurusBaseComponentStub + extends TaurusBaseComponent + implements + OnInit, + OnDestroy, + OnTaurusModelInit, + OnTaurusModelLoad, + OnTaurusModelFirstLoad, + OnTaurusModelChange, + OnTaurusModelFail +{ + uuid = 'TaurusBaseComponentStub'; + + constructor( + componentService: ComponentService, + navigationService: NavigationService, + activatedRoute: ActivatedRoute + ) { + super(componentService, navigationService, activatedRoute); + } + + onModelInit(_model?: ComponentModel, _task?: string) { + // No-op. + } + + onModelFirstLoad(_model?: ComponentModel, _task?: string) { + // No-op. + } + + onModelLoad(_model?: ComponentModel, _task?: string) { + // No-op. + } + + onModelChange(_model?: ComponentModel, _task?: string) { + // No-op. + } + + onModelFail(_model?: ComponentModel, _task?: string) { + // No-op. + } + + override ngOnInit() { + super.ngOnInit(); + } + + override ngOnDestroy() { + super.ngOnDestroy(); + } } class ComponentModelStub { - task: string; + task: string; - constructor(task?: string) { - this.task = task; - } + constructor(task?: string) { + this.task = task; + } - get status() { - return null; - } + get status() { + return null; + } - isModified(): boolean { - return null; - } + isModified(): boolean { + return null; + } - withStatusIdle() { - return this; - } + withStatusIdle() { + return this; + } - getComponentState() { - return {}; - } + getComponentState() { + return {}; + } - getTask() { - return this.task; - } + getTask() { + return this.task; + } - clearTask() { - return this; - } + clearTask() { + return this; + } } describe('TaurusBaseComponent -> TaurusSubclassComponent', () => { - let componentServiceStub: jasmine.SpyObj; - let navigationServiceStub: jasmine.SpyObj; - let activatedRouteStub: Partial; - let activatedRouteSnapshotStub: ActivatedRouteSnapshot; - - let routeStateStub: RouteState; - - let fixture: ComponentFixture; - let component: TaurusBaseComponentStub; - let modelStub: ComponentModel; - - beforeEach(() => { - componentServiceStub = jasmine.createSpyObj('componentService', ['init', 'idle', 'getModel', 'update']); - navigationServiceStub = jasmine.createSpyObj('navigationService', ['navigateTo', 'navigateBack']); - activatedRouteSnapshotStub = { - url: '', - params: {}, - data: {} - } as any; - activatedRouteStub = { snapshot: activatedRouteSnapshotStub }; - routeStateStub = { - routePathSegments: ['path1/path2', 'path3/path4'] - } as RouteState; - spyOn(RouteStateFactory.prototype, 'create').and.returnValue(routeStateStub); - - modelStub = new ComponentModelStub() as any; - - TestBed.configureTestingModule({ - declarations: [ - TaurusBaseComponentStub - ], - providers: [ - { provide: ComponentService, useValue: componentServiceStub }, - { provide: NavigationService, useValue: navigationServiceStub }, - { provide: ActivatedRoute, useValue: activatedRouteStub } - ] - }); - - fixture = TestBed.createComponent(TaurusBaseComponentStub); - component = fixture.componentInstance; - }); - - it('should verify component is created', () => { - // Given - component.model = modelStub; - - // Then - expect(component).toBeDefined(); - expect(component).toBeInstanceOf(TaurusBaseComponentStub); - expect(component).toBeInstanceOf(TaurusBaseComponent); - }); - - describe('Properties::', () => { - describe('|uuid|', () => { - it('should verify default value is undefined', () => { - // Given - component.model = modelStub; - - // When - expect(component.uuid).toEqual('TaurusBaseComponentStub'); - }); - }); - - describe('|componentService|', () => { - it('should verify ComponentService will be injected', () => { - // Given - component.model = modelStub; - - // When - expect(component['componentService']).toBeDefined(); - }); - }); - - describe('|navigationService|', () => { - it('should verify NavigationService will be injected', () => { - // Given - component.model = modelStub; - - // When - expect(component['navigationService']).toBeDefined(); - }); - }); - - describe('|activatedRoute|', () => { - it('should verify ActivatedRoute will be injected', () => { - // Given - component.model = modelStub; - - // When - expect(component['activatedRoute']).toBeDefined(); - }); - }); - }); - - describe('Angular lifecycle hooks::', () => { - beforeEach(() => { - component.model = modelStub; - }); - - describe('|ngOnInit|', () => { - it('should verify will invoke expected method', () => { - // Given - // @ts-ignore - const bindModelSpy = spyOn(component, 'bindModel').and.callFake(CallFake); - - // When - fixture.detectChanges(); - - // Then - expect(bindModelSpy).toHaveBeenCalled(); - }); - }); - - describe('|ngOnDestroy|', () => { - it('should verify will invoke expected methods', () => { - // Given - spyOn(TaurusBaseComponent.prototype, 'ngOnInit').and.callFake(CallFake); - // @ts-ignore - const setIdleSpy: jasmine.Spy<() => void> = spyOn(TaurusBaseComponent.prototype, 'setStateIdle').and.callFake(CallFake); - const ngOnDestroySpy: jasmine.Spy<() => void> = spyOn(TaurusObject.prototype, 'ngOnDestroy').and.callFake(CallFake); - - // When - fixture = TestBed.createComponent(TaurusBaseComponentStub); - fixture.componentInstance.model = modelStub; - fixture.detectChanges(); - fixture.destroy(); - - // Then - expect(setIdleSpy).toHaveBeenCalled(); - expect(ngOnDestroySpy).toHaveBeenCalled(); - }); - }); - }); - - describe('Methods::', () => { - describe('navigateTo', () => { - it('should verify will invoke correct methods', () => { - // Given - const replaceValues = { '$.team': 'team1', '$.entity': 'Prime' }; - navigationServiceStub.navigateTo.and.returnValue(Promise.resolve(true)); - component.model = modelStub; - - // When - const promise = component.navigateTo(replaceValues); - - // Then - expect(promise).toBeInstanceOf(Promise); - expect(navigationServiceStub.navigateTo).toHaveBeenCalledWith(replaceValues); - }); - }); - - describe('navigateBack', () => { - it('should verify will invoke correct methods', () => { - // Given - const replaceValues = { '$.team': 'team10', '$.entity': 'Second' }; - navigationServiceStub.navigateBack.and.returnValue(Promise.resolve(false)); - component.model = modelStub; - - // When - const promise = component.navigateBack(replaceValues); - - // Then - expect(promise).toBeInstanceOf(Promise); - expect(navigationServiceStub.navigateBack).toHaveBeenCalledWith(replaceValues); - }); - }); - - describe('|bindModel|', () => { - it('should verify will create correct subscriptions', () => { - // Given - componentServiceStub.init.and.returnValue(of(modelStub).pipe(take(1))); - componentServiceStub.getModel.and.returnValue(of(modelStub)); - - // When - // @ts-ignore - component.bindModel(); - - // Then 2 - expect(componentServiceStub.init).toHaveBeenCalledWith(component.uuid, routeStateStub); - expect(componentServiceStub.getModel).toHaveBeenCalledWith(component.uuid, routeStateStub.routePathSegments); - expect(component['subscriptions'].length).toEqual(1); - }); - - it('should verify will invoke correct Taurus lifecycle hooks for LOADED and modified', () => { - // Given - const onModelInitSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelInit').and.callFake(CallFake); - const onModelFirstLoadSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelFirstLoad').and.callFake(CallFake); - const onModelLoadSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelLoad').and.callFake(CallFake); - const onModelChangeSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelChange').and.callFake(CallFake); - const onModelFailSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelFail').and.callFake(CallFake); - const isModelModifiedSpy = spyOn(modelStub, 'isModified').and.returnValue(true); - const modelStatusSpy = spyOnProperty(modelStub, 'status', 'get').and.returnValue(LOADED); - - componentServiceStub.init.and.returnValue(of(modelStub)); - componentServiceStub.getModel.and.returnValue(of(modelStub)); - - // Then 1 - expect(component.model).toBeUndefined(); - - // When - // @ts-ignore - component.bindModel(); - - // Then 2 - expect(component.model).toBe(modelStub); - expect(onModelInitSpy).toHaveBeenCalledWith(modelStub); - expect(onModelFirstLoadSpy).toHaveBeenCalledWith(modelStub); - expect(onModelLoadSpy).toHaveBeenCalledWith(modelStub); - expect(isModelModifiedSpy).toHaveBeenCalledWith(modelStub); - expect(component.model).toBe(modelStub); - expect(modelStatusSpy).toHaveBeenCalled(); - expect(onModelChangeSpy).toHaveBeenCalledWith(modelStub); - expect(onModelFailSpy).not.toHaveBeenCalled(); - }); - - it('should verify will invoke correct Taurus lifecycle hooks for LOADED and modified with Task', () => { - // Given - const task = 'delete_entity'; - modelStub = new ComponentModelStub(task) as any; - const onModelInitSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelInit').and.callFake(CallFake); - const onModelFirstLoadSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelFirstLoad').and.callFake(CallFake); - const onModelLoadSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelLoad').and.callFake(CallFake); - const onModelChangeSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelChange').and.callFake(CallFake); - const onModelFailSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelFail').and.callFake(CallFake); - const isModelModifiedSpy = spyOn(modelStub, 'isModified').and.returnValue(true); - const modelStatusSpy = spyOnProperty(modelStub, 'status', 'get').and.returnValue(LOADED); - - componentServiceStub.init.and.returnValue(of(modelStub)); - componentServiceStub.getModel.and.returnValue(of(modelStub)); - - // Then 1 - expect(component.model).toBeUndefined(); - - // When - // @ts-ignore - component.bindModel(); - - // Then 2 - expect(component.model).toBe(modelStub); - expect(onModelInitSpy).toHaveBeenCalledWith(modelStub, task); - expect(onModelFirstLoadSpy).toHaveBeenCalledWith(modelStub, task); - expect(onModelLoadSpy).toHaveBeenCalledWith(modelStub, task); - expect(isModelModifiedSpy).toHaveBeenCalledWith(modelStub); - expect(component.model).toBe(modelStub); - expect(modelStatusSpy).toHaveBeenCalled(); - expect(onModelChangeSpy).toHaveBeenCalledWith(modelStub, task); - expect(onModelFailSpy).not.toHaveBeenCalled(); - }); - - it('should verify will invoke correct Taurus lifecycle hooks for FAILED and modified', () => { - // Given - const onModelInitSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelInit').and.callFake(CallFake); - const onModelFirstLoadSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelFirstLoad').and.callFake(CallFake); - const onModelLoadSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelLoad').and.callFake(CallFake); - const onModelChangeSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelChange').and.callFake(CallFake); - const onModelFailSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelFail').and.callFake(CallFake); - const isModelModifiedSpy = spyOn(modelStub, 'isModified').and.returnValue(true); - const modelStatusSpy = spyOnProperty(modelStub, 'status', 'get').and.returnValue(FAILED); - - componentServiceStub.init.and.returnValue(of(modelStub)); - componentServiceStub.getModel.and.returnValue(of(modelStub)); - - // Then 1 - expect(component.model).toBeUndefined(); - - // When - // @ts-ignore - component.bindModel(); - - // Then 2 - expect(component.model).toBe(modelStub); - expect(onModelInitSpy).toHaveBeenCalledWith(modelStub); - expect(onModelFirstLoadSpy).toHaveBeenCalledWith(modelStub); - expect(onModelLoadSpy).toHaveBeenCalledWith(modelStub); - expect(isModelModifiedSpy).toHaveBeenCalledWith(modelStub); - expect(component.model).toBe(modelStub); - expect(modelStatusSpy).toHaveBeenCalled(); - expect(onModelFailSpy).toHaveBeenCalledWith(modelStub); - expect(onModelChangeSpy).not.toHaveBeenCalled(); - }); - - it('should verify will invoke correct Taurus lifecycle hooks for FAILED and modified with Task', () => { - // Given - const task = 'patch_entity'; - modelStub = new ComponentModelStub(task) as any; - const onModelInitSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelInit').and.callFake(CallFake); - const onModelFirstLoadSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelFirstLoad').and.callFake(CallFake); - const onModelLoadSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelLoad').and.callFake(CallFake); - const onModelChangeSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelChange').and.callFake(CallFake); - const onModelFailSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelFail').and.callFake(CallFake); - const isModelModifiedSpy = spyOn(modelStub, 'isModified').and.returnValue(true); - const modelStatusSpy = spyOnProperty(modelStub, 'status', 'get').and.returnValue(FAILED); - - componentServiceStub.init.and.returnValue(of(modelStub)); - componentServiceStub.getModel.and.returnValue(of(modelStub)); - - // Then 1 - expect(component.model).toBeUndefined(); - - // When - // @ts-ignore - component.bindModel(); - - // Then 2 - expect(component.model).toBe(modelStub); - expect(onModelInitSpy).toHaveBeenCalledWith(modelStub, task); - expect(onModelFirstLoadSpy).toHaveBeenCalledWith(modelStub, task); - expect(onModelLoadSpy).toHaveBeenCalledWith(modelStub, task); - expect(isModelModifiedSpy).toHaveBeenCalledWith(modelStub); - expect(component.model).toBe(modelStub); - expect(modelStatusSpy).toHaveBeenCalled(); - expect(onModelFailSpy).toHaveBeenCalledWith(modelStub, task); - expect(onModelChangeSpy).not.toHaveBeenCalled(); - }); - - it('should verify will invoke correct Taurus lifecycle hooks for LOADED and not modified', () => { - // Given - const localModelStub: ComponentModel = new ComponentModelStub() as any; - const onModelInitSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelInit').and.callFake(CallFake); - const onModelFirstLoadSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelFirstLoad').and.callFake(CallFake); - const onModelLoadSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelLoad').and.callFake(CallFake); - const onModelChangeSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelChange').and.callFake(CallFake); - const onModelFailSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelFail').and.callFake(CallFake); - const isModelModifiedSpy = spyOn(localModelStub, 'isModified').and.returnValue(false); - const modelStatusSpy = spyOnProperty(localModelStub, 'status', 'get').and.returnValue(LOADED); - - componentServiceStub.init.and.returnValue(of(modelStub)); - componentServiceStub.getModel.and.returnValue(of(localModelStub)); - - // Then 1 - expect(component.model).toBeUndefined(); - - // When - // @ts-ignore - component.bindModel(); - - // Then 2 - expect(component.model).toBe(modelStub); - expect(onModelInitSpy).toHaveBeenCalledWith(modelStub); - expect(onModelFirstLoadSpy).toHaveBeenCalledWith(localModelStub); - expect(onModelLoadSpy).toHaveBeenCalledWith(localModelStub); - expect(isModelModifiedSpy).toHaveBeenCalledWith(modelStub); - expect(component.model).not.toBe(localModelStub); - expect(modelStatusSpy).not.toHaveBeenCalled(); - expect(onModelChangeSpy).not.toHaveBeenCalled(); - expect(onModelFailSpy).not.toHaveBeenCalled(); - }); - - it('should verify will invoke correct Taurus lifecycle hooks for LOADED and not modified with Task', () => { - // Given - const task = 'move_entity'; - modelStub = new ComponentModelStub() as any; - const localModelStub: ComponentModel = new ComponentModelStub(task) as any; - const onModelInitSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelInit').and.callFake(CallFake); - const onModelFirstLoadSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelFirstLoad').and.callFake(CallFake); - const onModelLoadSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelLoad').and.callFake(CallFake); - const onModelChangeSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelChange').and.callFake(CallFake); - const onModelFailSpy = spyOn(TaurusBaseComponentStub.prototype, 'onModelFail').and.callFake(CallFake); - const isModelModifiedSpy = spyOn(localModelStub, 'isModified').and.returnValue(false); - const modelStatusSpy = spyOnProperty(localModelStub, 'status', 'get').and.returnValue(LOADED); - - componentServiceStub.init.and.returnValue(of(modelStub)); - componentServiceStub.getModel.and.returnValue(of(localModelStub)); - - // Then 1 - expect(component.model).toBeUndefined(); - - // When - // @ts-ignore - component.bindModel(); - - // Then 2 - expect(component.model).toBe(modelStub); - expect(onModelInitSpy).toHaveBeenCalledWith(modelStub); - expect(onModelFirstLoadSpy).toHaveBeenCalledWith(localModelStub, task); - expect(onModelLoadSpy).toHaveBeenCalledWith(localModelStub, task); - expect(isModelModifiedSpy).toHaveBeenCalledWith(modelStub); - expect(component.model).not.toBe(localModelStub); - expect(modelStatusSpy).not.toHaveBeenCalled(); - expect(onModelChangeSpy).not.toHaveBeenCalled(); - expect(onModelFailSpy).not.toHaveBeenCalled(); - }); - }); - - describe('|setStateIdle|', () => { - it('should verify will invoke correct methods', () => { - // Given - const componentState: ComponentState = { - id: 'TaurusBaseComponentStub', - status: LOADED, - toLiteral: CallFake, - toLiteralDeepClone: CallFake, - copy: CallFake - }; - const setStatusIdleSpy = spyOn(modelStub, 'withStatusIdle').and.callFake(() => modelStub); - const getComponentStateSpy = spyOn(modelStub, 'getComponentState').and.returnValue(componentState); - component.model = modelStub; - - // When - // @ts-ignore - component.setStateIdle(); - - // Then - expect(setStatusIdleSpy).toHaveBeenCalled(); - expect(getComponentStateSpy).toHaveBeenCalled(); - expect(componentServiceStub.idle).toHaveBeenCalledWith(componentState); - }); - }); - - describe('|normalizeModelState|', () => { - it('should verify will invoke correct methods', () => { - // Given - const componentState: ComponentState = { - id: 'TaurusBaseComponentStub', - status: LOADED, - toLiteral: CallFake, - toLiteralDeepClone: CallFake, - copy: CallFake - }; - const clearTaskSpy = spyOn(modelStub, 'clearTask').and.callFake(() => modelStub); - const getComponentStateSpy = spyOn(modelStub, 'getComponentState').and.returnValue(componentState); - component.model = modelStub; - - // When - // @ts-ignore - component.normalizeModelState(modelStub); - - // Then - expect(clearTaskSpy).toHaveBeenCalled(); - expect(getComponentStateSpy).toHaveBeenCalled(); - expect(componentServiceStub.update).toHaveBeenCalledWith(componentState); - }); - }); - }); + let componentServiceStub: jasmine.SpyObj; + let navigationServiceStub: jasmine.SpyObj; + let activatedRouteStub: Partial; + let activatedRouteSnapshotStub: ActivatedRouteSnapshot; + + let routeStateStub: RouteState; + + let fixture: ComponentFixture; + let component: TaurusBaseComponentStub; + let modelStub: ComponentModel; + + beforeEach(() => { + componentServiceStub = jasmine.createSpyObj( + 'componentService', + ['init', 'idle', 'getModel', 'update'] + ); + navigationServiceStub = jasmine.createSpyObj( + 'navigationService', + ['navigateTo', 'navigateBack'] + ); + activatedRouteSnapshotStub = { + url: '', + params: {}, + data: {} + } as any; + activatedRouteStub = { snapshot: activatedRouteSnapshotStub }; + routeStateStub = { + routePathSegments: ['path1/path2', 'path3/path4'] + } as RouteState; + spyOn(RouteStateFactory.prototype, 'create').and.returnValue( + routeStateStub + ); + + modelStub = new ComponentModelStub() as any; + + TestBed.configureTestingModule({ + declarations: [TaurusBaseComponentStub], + providers: [ + { provide: ComponentService, useValue: componentServiceStub }, + { provide: NavigationService, useValue: navigationServiceStub }, + { provide: ActivatedRoute, useValue: activatedRouteStub } + ] + }); + + fixture = TestBed.createComponent(TaurusBaseComponentStub); + component = fixture.componentInstance; + }); + + it('should verify component is created', () => { + // Given + component.model = modelStub; + + // Then + expect(component).toBeDefined(); + expect(component).toBeInstanceOf(TaurusBaseComponentStub); + expect(component).toBeInstanceOf(TaurusBaseComponent); + }); + + describe('Properties::', () => { + describe('|uuid|', () => { + it('should verify default value is undefined', () => { + // Given + component.model = modelStub; + + // When + expect(component.uuid).toEqual('TaurusBaseComponentStub'); + }); + }); + + describe('|componentService|', () => { + it('should verify ComponentService will be injected', () => { + // Given + component.model = modelStub; + + // When + expect(component['componentService']).toBeDefined(); + }); + }); + + describe('|navigationService|', () => { + it('should verify NavigationService will be injected', () => { + // Given + component.model = modelStub; + + // When + expect(component['navigationService']).toBeDefined(); + }); + }); + + describe('|activatedRoute|', () => { + it('should verify ActivatedRoute will be injected', () => { + // Given + component.model = modelStub; + + // When + expect(component['activatedRoute']).toBeDefined(); + }); + }); + }); + + describe('Angular lifecycle hooks::', () => { + beforeEach(() => { + component.model = modelStub; + }); + + describe('|ngOnInit|', () => { + it('should verify will invoke expected method', () => { + // Given + // @ts-ignore + const bindModelSpy = spyOn(component, 'bindModel').and.callFake( + CallFake + ); + + // When + fixture.detectChanges(); + + // Then + expect(bindModelSpy).toHaveBeenCalled(); + }); + }); + + describe('|ngOnDestroy|', () => { + it('should verify will invoke expected methods', () => { + // Given + spyOn(TaurusBaseComponent.prototype, 'ngOnInit').and.callFake(CallFake); + // @ts-ignore + const setIdleSpy: jasmine.Spy<() => void> = spyOn( + TaurusBaseComponent.prototype, + 'setStateIdle' + ).and.callFake(CallFake); + const ngOnDestroySpy: jasmine.Spy<() => void> = spyOn( + TaurusObject.prototype, + 'ngOnDestroy' + ).and.callFake(CallFake); + + // When + fixture = TestBed.createComponent(TaurusBaseComponentStub); + fixture.componentInstance.model = modelStub; + fixture.detectChanges(); + fixture.destroy(); + + // Then + expect(setIdleSpy).toHaveBeenCalled(); + expect(ngOnDestroySpy).toHaveBeenCalled(); + }); + }); + }); + + describe('Methods::', () => { + describe('navigateTo', () => { + it('should verify will invoke correct methods', () => { + // Given + const replaceValues = { '$.team': 'team1', '$.entity': 'Prime' }; + navigationServiceStub.navigateTo.and.returnValue(Promise.resolve(true)); + component.model = modelStub; + + // When + const promise = component.navigateTo(replaceValues); + + // Then + expect(promise).toBeInstanceOf(Promise); + expect(navigationServiceStub.navigateTo).toHaveBeenCalledWith( + replaceValues + ); + }); + }); + + describe('navigateBack', () => { + it('should verify will invoke correct methods', () => { + // Given + const replaceValues = { '$.team': 'team10', '$.entity': 'Second' }; + navigationServiceStub.navigateBack.and.returnValue( + Promise.resolve(false) + ); + component.model = modelStub; + + // When + const promise = component.navigateBack(replaceValues); + + // Then + expect(promise).toBeInstanceOf(Promise); + expect(navigationServiceStub.navigateBack).toHaveBeenCalledWith( + replaceValues + ); + }); + }); + + describe('|bindModel|', () => { + it('should verify will create correct subscriptions', () => { + // Given + componentServiceStub.init.and.returnValue(of(modelStub).pipe(take(1))); + componentServiceStub.getModel.and.returnValue(of(modelStub)); + + // When + // @ts-ignore + component.bindModel(); + + // Then 2 + expect(componentServiceStub.init).toHaveBeenCalledWith( + component.uuid, + routeStateStub + ); + expect(componentServiceStub.getModel).toHaveBeenCalledWith( + component.uuid, + routeStateStub.routePathSegments + ); + expect(component['subscriptions'].length).toEqual(1); + }); + + it('should verify will invoke correct Taurus lifecycle hooks for LOADED and modified', () => { + // Given + const onModelInitSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelInit' + ).and.callFake(CallFake); + const onModelFirstLoadSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelFirstLoad' + ).and.callFake(CallFake); + const onModelLoadSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelLoad' + ).and.callFake(CallFake); + const onModelChangeSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelChange' + ).and.callFake(CallFake); + const onModelFailSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelFail' + ).and.callFake(CallFake); + const isModelModifiedSpy = spyOn( + modelStub, + 'isModified' + ).and.returnValue(true); + const modelStatusSpy = spyOnProperty( + modelStub, + 'status', + 'get' + ).and.returnValue(LOADED); + + componentServiceStub.init.and.returnValue(of(modelStub)); + componentServiceStub.getModel.and.returnValue(of(modelStub)); + + // Then 1 + expect(component.model).toBeUndefined(); + + // When + // @ts-ignore + component.bindModel(); + + // Then 2 + expect(component.model).toBe(modelStub); + expect(onModelInitSpy).toHaveBeenCalledWith(modelStub); + expect(onModelFirstLoadSpy).toHaveBeenCalledWith(modelStub); + expect(onModelLoadSpy).toHaveBeenCalledWith(modelStub); + expect(isModelModifiedSpy).toHaveBeenCalledWith(modelStub); + expect(component.model).toBe(modelStub); + expect(modelStatusSpy).toHaveBeenCalled(); + expect(onModelChangeSpy).toHaveBeenCalledWith(modelStub); + expect(onModelFailSpy).not.toHaveBeenCalled(); + }); + + it('should verify will invoke correct Taurus lifecycle hooks for LOADED and modified with Task', () => { + // Given + const task = 'delete_entity'; + modelStub = new ComponentModelStub(task) as any; + const onModelInitSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelInit' + ).and.callFake(CallFake); + const onModelFirstLoadSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelFirstLoad' + ).and.callFake(CallFake); + const onModelLoadSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelLoad' + ).and.callFake(CallFake); + const onModelChangeSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelChange' + ).and.callFake(CallFake); + const onModelFailSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelFail' + ).and.callFake(CallFake); + const isModelModifiedSpy = spyOn( + modelStub, + 'isModified' + ).and.returnValue(true); + const modelStatusSpy = spyOnProperty( + modelStub, + 'status', + 'get' + ).and.returnValue(LOADED); + + componentServiceStub.init.and.returnValue(of(modelStub)); + componentServiceStub.getModel.and.returnValue(of(modelStub)); + + // Then 1 + expect(component.model).toBeUndefined(); + + // When + // @ts-ignore + component.bindModel(); + + // Then 2 + expect(component.model).toBe(modelStub); + expect(onModelInitSpy).toHaveBeenCalledWith(modelStub, task); + expect(onModelFirstLoadSpy).toHaveBeenCalledWith(modelStub, task); + expect(onModelLoadSpy).toHaveBeenCalledWith(modelStub, task); + expect(isModelModifiedSpy).toHaveBeenCalledWith(modelStub); + expect(component.model).toBe(modelStub); + expect(modelStatusSpy).toHaveBeenCalled(); + expect(onModelChangeSpy).toHaveBeenCalledWith(modelStub, task); + expect(onModelFailSpy).not.toHaveBeenCalled(); + }); + + it('should verify will invoke correct Taurus lifecycle hooks for FAILED and modified', () => { + // Given + const onModelInitSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelInit' + ).and.callFake(CallFake); + const onModelFirstLoadSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelFirstLoad' + ).and.callFake(CallFake); + const onModelLoadSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelLoad' + ).and.callFake(CallFake); + const onModelChangeSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelChange' + ).and.callFake(CallFake); + const onModelFailSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelFail' + ).and.callFake(CallFake); + const isModelModifiedSpy = spyOn( + modelStub, + 'isModified' + ).and.returnValue(true); + const modelStatusSpy = spyOnProperty( + modelStub, + 'status', + 'get' + ).and.returnValue(FAILED); + + componentServiceStub.init.and.returnValue(of(modelStub)); + componentServiceStub.getModel.and.returnValue(of(modelStub)); + + // Then 1 + expect(component.model).toBeUndefined(); + + // When + // @ts-ignore + component.bindModel(); + + // Then 2 + expect(component.model).toBe(modelStub); + expect(onModelInitSpy).toHaveBeenCalledWith(modelStub); + expect(onModelFirstLoadSpy).toHaveBeenCalledWith(modelStub); + expect(onModelLoadSpy).toHaveBeenCalledWith(modelStub); + expect(isModelModifiedSpy).toHaveBeenCalledWith(modelStub); + expect(component.model).toBe(modelStub); + expect(modelStatusSpy).toHaveBeenCalled(); + expect(onModelFailSpy).toHaveBeenCalledWith(modelStub); + expect(onModelChangeSpy).not.toHaveBeenCalled(); + }); + + it('should verify will invoke correct Taurus lifecycle hooks for FAILED and modified with Task', () => { + // Given + const task = 'patch_entity'; + modelStub = new ComponentModelStub(task) as any; + const onModelInitSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelInit' + ).and.callFake(CallFake); + const onModelFirstLoadSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelFirstLoad' + ).and.callFake(CallFake); + const onModelLoadSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelLoad' + ).and.callFake(CallFake); + const onModelChangeSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelChange' + ).and.callFake(CallFake); + const onModelFailSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelFail' + ).and.callFake(CallFake); + const isModelModifiedSpy = spyOn( + modelStub, + 'isModified' + ).and.returnValue(true); + const modelStatusSpy = spyOnProperty( + modelStub, + 'status', + 'get' + ).and.returnValue(FAILED); + + componentServiceStub.init.and.returnValue(of(modelStub)); + componentServiceStub.getModel.and.returnValue(of(modelStub)); + + // Then 1 + expect(component.model).toBeUndefined(); + + // When + // @ts-ignore + component.bindModel(); + + // Then 2 + expect(component.model).toBe(modelStub); + expect(onModelInitSpy).toHaveBeenCalledWith(modelStub, task); + expect(onModelFirstLoadSpy).toHaveBeenCalledWith(modelStub, task); + expect(onModelLoadSpy).toHaveBeenCalledWith(modelStub, task); + expect(isModelModifiedSpy).toHaveBeenCalledWith(modelStub); + expect(component.model).toBe(modelStub); + expect(modelStatusSpy).toHaveBeenCalled(); + expect(onModelFailSpy).toHaveBeenCalledWith(modelStub, task); + expect(onModelChangeSpy).not.toHaveBeenCalled(); + }); + + it('should verify will invoke correct Taurus lifecycle hooks for LOADED and not modified', () => { + // Given + const localModelStub: ComponentModel = new ComponentModelStub() as any; + const onModelInitSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelInit' + ).and.callFake(CallFake); + const onModelFirstLoadSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelFirstLoad' + ).and.callFake(CallFake); + const onModelLoadSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelLoad' + ).and.callFake(CallFake); + const onModelChangeSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelChange' + ).and.callFake(CallFake); + const onModelFailSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelFail' + ).and.callFake(CallFake); + const isModelModifiedSpy = spyOn( + localModelStub, + 'isModified' + ).and.returnValue(false); + const modelStatusSpy = spyOnProperty( + localModelStub, + 'status', + 'get' + ).and.returnValue(LOADED); + + componentServiceStub.init.and.returnValue(of(modelStub)); + componentServiceStub.getModel.and.returnValue(of(localModelStub)); + + // Then 1 + expect(component.model).toBeUndefined(); + + // When + // @ts-ignore + component.bindModel(); + + // Then 2 + expect(component.model).toBe(modelStub); + expect(onModelInitSpy).toHaveBeenCalledWith(modelStub); + expect(onModelFirstLoadSpy).toHaveBeenCalledWith(localModelStub); + expect(onModelLoadSpy).toHaveBeenCalledWith(localModelStub); + expect(isModelModifiedSpy).toHaveBeenCalledWith(modelStub); + expect(component.model).not.toBe(localModelStub); + expect(modelStatusSpy).not.toHaveBeenCalled(); + expect(onModelChangeSpy).not.toHaveBeenCalled(); + expect(onModelFailSpy).not.toHaveBeenCalled(); + }); + + it('should verify will invoke correct Taurus lifecycle hooks for LOADED and not modified with Task', () => { + // Given + const task = 'move_entity'; + modelStub = new ComponentModelStub() as any; + const localModelStub: ComponentModel = new ComponentModelStub( + task + ) as any; + const onModelInitSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelInit' + ).and.callFake(CallFake); + const onModelFirstLoadSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelFirstLoad' + ).and.callFake(CallFake); + const onModelLoadSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelLoad' + ).and.callFake(CallFake); + const onModelChangeSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelChange' + ).and.callFake(CallFake); + const onModelFailSpy = spyOn( + TaurusBaseComponentStub.prototype, + 'onModelFail' + ).and.callFake(CallFake); + const isModelModifiedSpy = spyOn( + localModelStub, + 'isModified' + ).and.returnValue(false); + const modelStatusSpy = spyOnProperty( + localModelStub, + 'status', + 'get' + ).and.returnValue(LOADED); + + componentServiceStub.init.and.returnValue(of(modelStub)); + componentServiceStub.getModel.and.returnValue(of(localModelStub)); + + // Then 1 + expect(component.model).toBeUndefined(); + + // When + // @ts-ignore + component.bindModel(); + + // Then 2 + expect(component.model).toBe(modelStub); + expect(onModelInitSpy).toHaveBeenCalledWith(modelStub); + expect(onModelFirstLoadSpy).toHaveBeenCalledWith(localModelStub, task); + expect(onModelLoadSpy).toHaveBeenCalledWith(localModelStub, task); + expect(isModelModifiedSpy).toHaveBeenCalledWith(modelStub); + expect(component.model).not.toBe(localModelStub); + expect(modelStatusSpy).not.toHaveBeenCalled(); + expect(onModelChangeSpy).not.toHaveBeenCalled(); + expect(onModelFailSpy).not.toHaveBeenCalled(); + }); + }); + + describe('|setStateIdle|', () => { + it('should verify will invoke correct methods', () => { + // Given + const componentState: ComponentState = { + id: 'TaurusBaseComponentStub', + status: LOADED, + toLiteral: CallFake, + toLiteralDeepClone: CallFake, + copy: CallFake + }; + const setStatusIdleSpy = spyOn( + modelStub, + 'withStatusIdle' + ).and.callFake(() => modelStub); + const getComponentStateSpy = spyOn( + modelStub, + 'getComponentState' + ).and.returnValue(componentState); + component.model = modelStub; + + // When + // @ts-ignore + component.setStateIdle(); + + // Then + expect(setStatusIdleSpy).toHaveBeenCalled(); + expect(getComponentStateSpy).toHaveBeenCalled(); + expect(componentServiceStub.idle).toHaveBeenCalledWith(componentState); + }); + }); + + describe('|normalizeModelState|', () => { + it('should verify will invoke correct methods', () => { + // Given + const componentState: ComponentState = { + id: 'TaurusBaseComponentStub', + status: LOADED, + toLiteral: CallFake, + toLiteralDeepClone: CallFake, + copy: CallFake + }; + const clearTaskSpy = spyOn(modelStub, 'clearTask').and.callFake( + () => modelStub + ); + const getComponentStateSpy = spyOn( + modelStub, + 'getComponentState' + ).and.returnValue(componentState); + component.model = modelStub; + + // When + // @ts-ignore + component.normalizeModelState(modelStub); + + // Then + expect(clearTaskSpy).toHaveBeenCalled(); + expect(getComponentStateSpy).toHaveBeenCalled(); + expect(componentServiceStub.update).toHaveBeenCalledWith( + componentState + ); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/base/taurus-base.component.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/base/taurus-base.component.ts index f92668aa98..6c0a7b6193 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/base/taurus-base.component.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/base/taurus-base.component.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -30,306 +28,337 @@ import { TaurusComponentHooks } from './interfaces'; * */ @Directive() -export abstract class TaurusBaseComponent extends TaurusObject implements OnInit, OnDestroy { - private static _routeStateFactory: RouteStateFactory; - - /** - * ** Field that hold Component Model. - */ - model: ComponentModel; - - /** - * ** UUID is identifier for every Subclass in Components state Store. - */ - abstract readonly uuid: string; - - /** - * ** Feature flag to enforce Route reuse in native way provided from Taurus NgRx. - * - * - Introduced for backward compatibility. - * - Default value is false, and continues to operate like previous major version. - * - If set to true will enforce Route reuse strategy and will re-initialize Component with new Model for the new params. - */ - enforceRouteReuse = false; - - /** - * ** Model subscription ref. - * @private - */ - private _modelSubscription: Subscription; - - /** - * ** Constructor. - */ - protected constructor(protected readonly componentService: ComponentService, - protected readonly navigationService: NavigationService, - protected readonly activatedRoute: ActivatedRoute) { - super(); - } - - /** - * ** Navigate to page using {@link NavigationService.navigateTo}. - */ - navigateTo(replaceValues?: { [key: string]: ArrayElement['replaceValue'] }): Promise { - return this - .navigationService - .navigateTo(replaceValues); - } - - /** - * ** Navigate back to previous page using {@link NavigationService.navigateBack}. - */ - navigateBack(replaceValues?: { [key: string]: ArrayElement['replaceValue'] }): Promise { - return this - .navigationService - .navigateBack(replaceValues); - } - - /** - * @inheritDoc - */ - ngOnInit() { - this.bindModel(); - - this.initializeRouteReuse(); - } - - /** - * @inheritDoc - */ - override ngOnDestroy() { - this.setStateIdle(); - - super.ngOnDestroy(); - } - - /** - * ** Invoking method register subscriber for Taurus NgRx Redux Store mutation in context of {@link ComponentState.routePathSegments}, - * which binds {@link ComponentModel} to {@link TaurusBaseComponent.model} - * and start invocation of Taurus NgRx Redux Component lifecycle hooks. - * - * Invocation order: - * - * 1. {@link OnTaurusModelInit} - * 2. {@link OnTaurusModelInitialLoad} or {@link OnTaurusModelFirstLoad} - only one could be invoke, - * where deprecated shouldn't be implemented anymore. - * 3. {@link OnTaurusModelLoad} - * 4. {@link OnTaurusModelChange} when status is {@link LOADED} - * 5. {@link OnTaurusModelError} or {@link OnTaurusModelFail} when status is {@link FAILED} - only one could be invoke, - * where deprecated shouldn't be implemented anymore. - * - *

    - *
    - * Override it if you want to change default behavior. - *

    - * - * @protected - */ - protected bindModel(): void { - let isOnModelInitialLoadExecuted = false; - - if (!TaurusBaseComponent._routeStateFactory) { - TaurusBaseComponent._routeStateFactory = new RouteStateFactory(); - } - - const routeState = TaurusBaseComponent - ._routeStateFactory - .create(this.activatedRoute.snapshot, null); - - this.componentService - .init(this.uuid, routeState) - .subscribe((model) => { - this.model = model; - - TaurusBaseComponent._executeTaurusComponentHook(this, 'onModelInit', model); - }); - - this._modelSubscription = this.componentService - .getModel(this.uuid, routeState.routePathSegments) - .subscribe((model) => { - if (!isOnModelInitialLoadExecuted) { - isOnModelInitialLoadExecuted = true; - if (!TaurusBaseComponent._executeTaurusComponentHook(this, 'onModelInitialLoad', model)) { - TaurusBaseComponent._executeTaurusComponentHook(this, 'onModelFirstLoad', model); - } - } - - this.evaluateTaurusComponentLifecycleHooks(model); - }); - - this.subscriptions.push(this._modelSubscription); - } - - /** - * ** Evaluates Taurus NgRx Redux Component lifecycle hooks - * ({@link OnTaurusModelLoad} and {@link OnTaurusModelChange} and ({@link OnTaurusModelFail} or {@link OnTaurusModelError})). - * - * - Override it if you want to change default behavior. - * - * @protected - */ - protected evaluateTaurusComponentLifecycleHooks(model: ComponentModel): void { - TaurusBaseComponent._executeTaurusComponentHook(this, 'onModelLoad', model); - - if (!this.isModelModified(model)) { - return; - } - - this.refreshModel(model); - - if (model.status === FAILED) { - if (!TaurusBaseComponent._executeTaurusComponentHook(this, 'onModelError', model)) { - TaurusBaseComponent._executeTaurusComponentHook(this, 'onModelFail', model); - } - } else { - TaurusBaseComponent._executeTaurusComponentHook(this, 'onModelChange', model); - } - - try { - this.normalizeModelState(model); - } catch (e) { - console.error(`Taurus NgRx Redux failed to normalize ComponentModel!`, e); - } - } - - /** - * ** Refresh model field {@link TaurusBaseComponent.model} with new one, assignment by reference. - * - * - Override it if you want to change default behavior. - * - * @protected - */ - protected refreshModel(model: ComponentModel): void { - this.model = model; - } - - /** - * ** Normalize Model state, by default it clear Task field in {@link ComponentState.task} and update model in Taurus NgRx Redux Store. - * - * - It is invoked only if {@link ComponentModel} is modified and after invocation of all Taurus components lifecycle hooks. - * - Override it if you want to change default behavior. - * - * @protected - */ - protected normalizeModelState(model: ComponentModel): void { - this.componentService.update( - model - .clearTask() - .getComponentState() - ); - } - - /** - * ** Set Model state in IDLE to stop listening on Events from Store. - * - * - It is invoked by default before Component is destroyed, in Angular lifecycle hook {@link OnDestroy}. - * - Override it if you want to change default behavior. - * - * @protected - */ - protected setStateIdle(): void { - this.componentService.idle( - this.model - .withStatusIdle() - .getComponentState() - ); - } - - /** - * ** Evaluation of this method acknowledge that new {@link ComponentModel} is modified or not. - * - * - Comparison is evaluated between provided Model and assigned Component's Model {@link TaurusBaseComponent.model}. - * - Default implementation use {@link ComponentModel.isModified} for deep Comparison of specific fields. - * - Override it if you want to change default behavior. - * - *

    - * Be cautious about your changes and intents! - * Examples what can wrong comparison do? - *

    - * - * 1. Infinite lifecycle hooks invocation, where consequences are: performance deterioration or application freeze. - * 2. Prevent lifecycle hooks invocation, where consequences are: your Data never arrive to your Component fields. - * - * @protected - */ - protected isModelModified(model: ComponentModel): boolean { - return model.isModified(this.model); - } - - /** - * ** Initialize Route reuse strategy for Component in context of Taurus NgRx. - * - Turns on listener for Activated params change and if detects mutation - * sets current model in current RoutePathSegment to idle, - * and bind for new model stream to the new RoutePathSegment. - * - New feature this is completely backward compatible, - * and it can be turned on with feature flag per Component Class. - * - * @protected - */ - protected initializeRouteReuse(): void { - if (!this.enforceRouteReuse) { - return; - } - - let previousParams: Params; - - this.subscriptions.push( - this.activatedRoute - .params - .subscribe((params) => { - if (CollectionsUtil.isNil(previousParams)) { - previousParams = params; - - return; - } - - if (!CollectionsUtil.isEqual(previousParams, params)) { - previousParams = params; - - const isRemoveSuccessful = this.removeSubscriptionRef(this._modelSubscription); - if (isRemoveSuccessful) { - // set current RoutePathSegment model state to idle - this.setStateIdle(); - // bind new model stream to new RoutePathSegment - this.bindModel(); - } - } - }) - ); - } - - /** - * ** Invoke Taurus NgRx Redux Component lifecycle hook. - * - * - Lifecycle hooks are invoked only if implementation they are found as implemented in subclasses. - * - Returns true if method is found and executed, otherwise false. - * - * @private - */ - // eslint-disable-next-line @typescript-eslint/member-ordering - private static _executeTaurusComponentHook( - instance: TaurusBaseComponent, - method: keyof TaurusComponentHooks, - model: ComponentModel): boolean { - - if (CollectionsUtil.isFunction(instance[method])) { - const currentTask = model.getTask(); - - try { - if (CollectionsUtil.isString(currentTask)) { - // eslint-disable-next-line @typescript-eslint/no-unsafe-call - instance[method](model, currentTask); - } else { - // eslint-disable-next-line @typescript-eslint/no-unsafe-call - instance[method](model); - } - } catch (e) { - console.error(`Taurus NgRx Redux failed to execute lifecycle hook "${ method }"!`, e); - } - - return true; - } - - return false; - } +export abstract class TaurusBaseComponent + extends TaurusObject + implements OnInit, OnDestroy +{ + private static _routeStateFactory: RouteStateFactory; + + /** + * ** Field that hold Component Model. + */ + model: ComponentModel; + + /** + * ** UUID is identifier for every Subclass in Components state Store. + */ + abstract readonly uuid: string; + + /** + * ** Feature flag to enforce Route reuse in native way provided from Taurus NgRx. + * + * - Introduced for backward compatibility. + * - Default value is false, and continues to operate like previous major version. + * - If set to true will enforce Route reuse strategy and will re-initialize Component with new Model for the new params. + */ + enforceRouteReuse = false; + + /** + * ** Model subscription ref. + * @private + */ + private _modelSubscription: Subscription; + + /** + * ** Constructor. + */ + protected constructor( + protected readonly componentService: ComponentService, + protected readonly navigationService: NavigationService, + protected readonly activatedRoute: ActivatedRoute + ) { + super(); + } + + /** + * ** Navigate to page using {@link NavigationService.navigateTo}. + */ + navigateTo(replaceValues?: { + [key: string]: ArrayElement< + TaurusNavigateAction['replacers'] + >['replaceValue']; + }): Promise { + return this.navigationService.navigateTo(replaceValues); + } + + /** + * ** Navigate back to previous page using {@link NavigationService.navigateBack}. + */ + navigateBack(replaceValues?: { + [key: string]: ArrayElement< + TaurusNavigateAction['replacers'] + >['replaceValue']; + }): Promise { + return this.navigationService.navigateBack(replaceValues); + } + + /** + * @inheritDoc + */ + ngOnInit() { + this.bindModel(); + + this.initializeRouteReuse(); + } + + /** + * @inheritDoc + */ + override ngOnDestroy() { + this.setStateIdle(); + + super.ngOnDestroy(); + } + + /** + * ** Invoking method register subscriber for Taurus NgRx Redux Store mutation in context of {@link ComponentState.routePathSegments}, + * which binds {@link ComponentModel} to {@link TaurusBaseComponent.model} + * and start invocation of Taurus NgRx Redux Component lifecycle hooks. + * + * Invocation order: + * + * 1. {@link OnTaurusModelInit} + * 2. {@link OnTaurusModelInitialLoad} or {@link OnTaurusModelFirstLoad} - only one could be invoke, + * where deprecated shouldn't be implemented anymore. + * 3. {@link OnTaurusModelLoad} + * 4. {@link OnTaurusModelChange} when status is {@link LOADED} + * 5. {@link OnTaurusModelError} or {@link OnTaurusModelFail} when status is {@link FAILED} - only one could be invoke, + * where deprecated shouldn't be implemented anymore. + * + *

    + *
    + * Override it if you want to change default behavior. + *

    + * + * @protected + */ + protected bindModel(): void { + let isOnModelInitialLoadExecuted = false; + + if (!TaurusBaseComponent._routeStateFactory) { + TaurusBaseComponent._routeStateFactory = new RouteStateFactory(); + } + + const routeState = TaurusBaseComponent._routeStateFactory.create( + this.activatedRoute.snapshot, + null + ); + + this.componentService.init(this.uuid, routeState).subscribe((model) => { + this.model = model; + + TaurusBaseComponent._executeTaurusComponentHook( + this, + 'onModelInit', + model + ); + }); + + this._modelSubscription = this.componentService + .getModel(this.uuid, routeState.routePathSegments) + .subscribe((model) => { + if (!isOnModelInitialLoadExecuted) { + isOnModelInitialLoadExecuted = true; + if ( + !TaurusBaseComponent._executeTaurusComponentHook( + this, + 'onModelInitialLoad', + model + ) + ) { + TaurusBaseComponent._executeTaurusComponentHook( + this, + 'onModelFirstLoad', + model + ); + } + } + + this.evaluateTaurusComponentLifecycleHooks(model); + }); + + this.subscriptions.push(this._modelSubscription); + } + + /** + * ** Evaluates Taurus NgRx Redux Component lifecycle hooks + * ({@link OnTaurusModelLoad} and {@link OnTaurusModelChange} and ({@link OnTaurusModelFail} or {@link OnTaurusModelError})). + * + * - Override it if you want to change default behavior. + * + * @protected + */ + protected evaluateTaurusComponentLifecycleHooks(model: ComponentModel): void { + TaurusBaseComponent._executeTaurusComponentHook(this, 'onModelLoad', model); + + if (!this.isModelModified(model)) { + return; + } + + this.refreshModel(model); + + if (model.status === FAILED) { + if ( + !TaurusBaseComponent._executeTaurusComponentHook( + this, + 'onModelError', + model + ) + ) { + TaurusBaseComponent._executeTaurusComponentHook( + this, + 'onModelFail', + model + ); + } + } else { + TaurusBaseComponent._executeTaurusComponentHook( + this, + 'onModelChange', + model + ); + } + + try { + this.normalizeModelState(model); + } catch (e) { + console.error(`Taurus NgRx Redux failed to normalize ComponentModel!`, e); + } + } + + /** + * ** Refresh model field {@link TaurusBaseComponent.model} with new one, assignment by reference. + * + * - Override it if you want to change default behavior. + * + * @protected + */ + protected refreshModel(model: ComponentModel): void { + this.model = model; + } + + /** + * ** Normalize Model state, by default it clear Task field in {@link ComponentState.task} and update model in Taurus NgRx Redux Store. + * + * - It is invoked only if {@link ComponentModel} is modified and after invocation of all Taurus components lifecycle hooks. + * - Override it if you want to change default behavior. + * + * @protected + */ + protected normalizeModelState(model: ComponentModel): void { + this.componentService.update(model.clearTask().getComponentState()); + } + + /** + * ** Set Model state in IDLE to stop listening on Events from Store. + * + * - It is invoked by default before Component is destroyed, in Angular lifecycle hook {@link OnDestroy}. + * - Override it if you want to change default behavior. + * + * @protected + */ + protected setStateIdle(): void { + this.componentService.idle(this.model.withStatusIdle().getComponentState()); + } + + /** + * ** Evaluation of this method acknowledge that new {@link ComponentModel} is modified or not. + * + * - Comparison is evaluated between provided Model and assigned Component's Model {@link TaurusBaseComponent.model}. + * - Default implementation use {@link ComponentModel.isModified} for deep Comparison of specific fields. + * - Override it if you want to change default behavior. + * + *

    + * Be cautious about your changes and intents! + * Examples what can wrong comparison do? + *

    + * + * 1. Infinite lifecycle hooks invocation, where consequences are: performance deterioration or application freeze. + * 2. Prevent lifecycle hooks invocation, where consequences are: your Data never arrive to your Component fields. + * + * @protected + */ + protected isModelModified(model: ComponentModel): boolean { + return model.isModified(this.model); + } + + /** + * ** Initialize Route reuse strategy for Component in context of Taurus NgRx. + * - Turns on listener for Activated params change and if detects mutation + * sets current model in current RoutePathSegment to idle, + * and bind for new model stream to the new RoutePathSegment. + * - New feature this is completely backward compatible, + * and it can be turned on with feature flag per Component Class. + * + * @protected + */ + protected initializeRouteReuse(): void { + if (!this.enforceRouteReuse) { + return; + } + + let previousParams: Params; + + this.subscriptions.push( + this.activatedRoute.params.subscribe((params) => { + if (CollectionsUtil.isNil(previousParams)) { + previousParams = params; + + return; + } + + if (!CollectionsUtil.isEqual(previousParams, params)) { + previousParams = params; + + const isRemoveSuccessful = this.removeSubscriptionRef( + this._modelSubscription + ); + if (isRemoveSuccessful) { + // set current RoutePathSegment model state to idle + this.setStateIdle(); + // bind new model stream to new RoutePathSegment + this.bindModel(); + } + } + }) + ); + } + + /** + * ** Invoke Taurus NgRx Redux Component lifecycle hook. + * + * - Lifecycle hooks are invoked only if implementation they are found as implemented in subclasses. + * - Returns true if method is found and executed, otherwise false. + * + * @private + */ + // eslint-disable-next-line @typescript-eslint/member-ordering + private static _executeTaurusComponentHook( + instance: TaurusBaseComponent, + method: keyof TaurusComponentHooks, + model: ComponentModel + ): boolean { + if (CollectionsUtil.isFunction(instance[method])) { + const currentTask = model.getTask(); + + try { + if (CollectionsUtil.isString(currentTask)) { + // eslint-disable-next-line @typescript-eslint/no-unsafe-call + instance[method](model, currentTask); + } else { + // eslint-disable-next-line @typescript-eslint/no-unsafe-call + instance[method](model); + } + } catch (e) { + console.error( + `Taurus NgRx Redux failed to execute lifecycle hook "${method}"!`, + e + ); + } + + return true; + } + + return false; + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/index.ts index ec2d13fdc8..fdc6f0f794 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/component-model.comparable.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/component-model.comparable.spec.ts index 22092047f4..156119683d 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/component-model.comparable.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/component-model.comparable.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -18,218 +16,253 @@ import { ComponentModel } from './component.model'; import { ComponentModelComparable } from './component-model.comparable'; describe('ComponentModelComparable', () => { - it('should verify instance is created', () => { - // When - const instance = new ComponentModelComparable(null); - - // Then - expect(instance).toBeDefined(); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const instance = ComponentModelComparable.of(null); - - // Then - expect(instance).toBeInstanceOf(ComponentModelComparable); - expect(instance).toBeInstanceOf(ComparableImpl); - }); - }); - }); - }); - - describe('Methods::', () => { - let componentState: ComponentState; - let routerState: RouterState; - let modelComparable: ComponentModelComparable; - - beforeEach(() => { - componentState = ComponentStateImpl.of({ - id: 'testId', - status: IDLE, - data: new Map([['countries', ['aCountry', 'bCountry', 'cCountry']]]) - }); - routerState = RouterState.of( - RouteState.of( - RouteSegments.of( - 'entity/117', - {}, - { entityId: '107' }, - { search: 'test-team-107' }, - RouteSegments.of( - 'domain/context', - {}, - {}, - { search: 'test-team-107' } - ) - ), - 'domain/context/entity/117' - ), - 43 - ); - modelComparable = ComponentModelComparable.of(ComponentModel.of(componentState, routerState)); - }); - - describe('|compare|', () => { - it('should verify will return -1 when stored comparable value is not instance of ComponentModel', () => { - // Given - modelComparable = ComponentModelComparable.of(null); - - // When - const compareV = modelComparable.compare(ComponentModelComparable.of(undefined)); - - // Then - expect(compareV).toEqual(-1); - }); - - it('should verify will return -1 when provided comparable is not instance of expected', () => { - // When - const compareV = modelComparable.compare(ComponentModelComparable.of(null)); - - // Then - expect(compareV).toEqual(-1); - }); - - it('should verify will return -1 when no comparable model provided', () => { - // When - const compareV = modelComparable.compare(null); - - // Then - expect(compareV).toEqual(-1); - }); - - it('should verify will return 0 when ComponentModel ref is same', () => { - // Given - const isEqualSpy = spyOn(CollectionsUtil, 'isEqual').and.callThrough(); - - // When - modelComparable.value.withPage(10, 100); - modelComparable.value.getComponentState().uiState.set('submitBtn', { state: 'submitted' }); - const compareV = modelComparable.compare(modelComparable); - - // Then - expect(compareV).toEqual(0); - expect(isEqualSpy).not.toHaveBeenCalled(); - }); - - it('should verify will return -1 when status is different', () => { - // Given - const componentStateComparable = ComponentStateImpl.of({ - ...componentState, - status: LOADED - }); - const modelComparableDI = ComponentModelComparable.of(ComponentModel.of(componentStateComparable, routerState)); - - // When - const compareV = modelComparable.compare(modelComparableDI); - - // Then - expect(compareV).toEqual(-1); - }); - - it('should verify will return -1 when task is different', () => { - // Given - const componentStateComparable = ComponentStateImpl.of({ - ...componentState, - task: 'patch_entity' - }); - const modelComparableDI = ComponentModelComparable.of(ComponentModel.of(componentStateComparable, routerState)); - - // When - const compareV = modelComparable.compare(modelComparableDI); - - // Then - expect(compareV).toEqual(-1); - }); - - it('should verify will return 0 when navigationId is different', () => { - // Given - const routerStateComparable = RouterState.of( - routerState.state, - 90 - ); - const modelComparableDI = ComponentModelComparable.of(ComponentModel.of(componentState, routerStateComparable)); - - // When - const compareV = modelComparable.compare(modelComparableDI); - - // Then - expect(compareV).toEqual(0); - }); - - it('should verify will return -1 when error is different', () => { - // Given - const isEqualSpy = spyOn(CollectionsUtil, 'isEqual').and.callThrough(); - const componentStateComparable = ComponentStateImpl.of({ - ...componentState, - error: new Error('new Error()') - }); - const modelComparableDI = ComponentModelComparable.of(ComponentModel.of(componentStateComparable, routerState)); - - // When - const compareV = modelComparable.compare(modelComparableDI); - - // Then - expect(compareV).toEqual(-1); - expect(isEqualSpy).not.toHaveBeenCalled(); - }); - - it('should verify will return 0 when data ref is same', () => { - // Given - const isEqualSpy = spyOn(CollectionsUtil, 'isEqual').and.callThrough(); - const componentStateComparable = ComponentStateImpl.of({ - ...componentState, - data: componentState.data - }); - const modelComparableDI = ComponentModelComparable.of(ComponentModel.of(componentStateComparable, routerState)); - - // When - const compareV = modelComparable.compare(modelComparableDI); - - // Then - expect(compareV).toEqual(0); - expect(isEqualSpy).not.toHaveBeenCalled(); - }); - - it('should verify will return 0 when ref is different but content is same', () => { - // Given - const areMapsEqualSpy = spyOn(CollectionsUtil, 'areMapsEqual').and.callThrough(); - const componentStateComparable = ComponentStateImpl.of({ - ...componentState, - data: new Map([['countries', ['aCountry', 'bCountry', 'cCountry']]]) - }); - const modelComparableDI = ComponentModelComparable.of(ComponentModel.of(componentStateComparable, routerState)); - - // When - const compareV = modelComparable.compare(modelComparableDI); - - // Then - expect(compareV).toEqual(0); - expect(areMapsEqualSpy).toHaveBeenCalledWith(componentState.data, componentStateComparable.data); - }); - - it('should verify will return -1 when ref is different and content is different', () => { - // Given - const areMapsEqualSpy = spyOn(CollectionsUtil, 'areMapsEqual').and.callThrough(); - const componentStateComparable = ComponentStateImpl.of({ - ...componentState, - data: new Map([ - ['countries', ['aCountry', 'bCountry', 'cCountry']], - ['users', ['aUser', 'bUser', 'cUser']] - ]) - }); - const modelComparableDI = ComponentModelComparable.of(ComponentModel.of(componentStateComparable, routerState)); - - // When - const compareV = modelComparable.compare(modelComparableDI); - - // Then - expect(compareV).toEqual(-1); - expect(areMapsEqualSpy).toHaveBeenCalledWith(componentState.data, componentStateComparable.data); - }); - }); - }); + it('should verify instance is created', () => { + // When + const instance = new ComponentModelComparable(null); + + // Then + expect(instance).toBeDefined(); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const instance = ComponentModelComparable.of(null); + + // Then + expect(instance).toBeInstanceOf(ComponentModelComparable); + expect(instance).toBeInstanceOf(ComparableImpl); + }); + }); + }); + }); + + describe('Methods::', () => { + let componentState: ComponentState; + let routerState: RouterState; + let modelComparable: ComponentModelComparable; + + beforeEach(() => { + componentState = ComponentStateImpl.of({ + id: 'testId', + status: IDLE, + data: new Map([ + ['countries', ['aCountry', 'bCountry', 'cCountry']] + ]) + }); + routerState = RouterState.of( + RouteState.of( + RouteSegments.of( + 'entity/117', + {}, + { entityId: '107' }, + { search: 'test-team-107' }, + RouteSegments.of( + 'domain/context', + {}, + {}, + { search: 'test-team-107' } + ) + ), + 'domain/context/entity/117' + ), + 43 + ); + modelComparable = ComponentModelComparable.of( + ComponentModel.of(componentState, routerState) + ); + }); + + describe('|compare|', () => { + it('should verify will return -1 when stored comparable value is not instance of ComponentModel', () => { + // Given + modelComparable = ComponentModelComparable.of(null); + + // When + const compareV = modelComparable.compare( + ComponentModelComparable.of(undefined) + ); + + // Then + expect(compareV).toEqual(-1); + }); + + it('should verify will return -1 when provided comparable is not instance of expected', () => { + // When + const compareV = modelComparable.compare( + ComponentModelComparable.of(null) + ); + + // Then + expect(compareV).toEqual(-1); + }); + + it('should verify will return -1 when no comparable model provided', () => { + // When + const compareV = modelComparable.compare(null); + + // Then + expect(compareV).toEqual(-1); + }); + + it('should verify will return 0 when ComponentModel ref is same', () => { + // Given + const isEqualSpy = spyOn(CollectionsUtil, 'isEqual').and.callThrough(); + + // When + modelComparable.value.withPage(10, 100); + modelComparable.value + .getComponentState() + .uiState.set('submitBtn', { state: 'submitted' }); + const compareV = modelComparable.compare(modelComparable); + + // Then + expect(compareV).toEqual(0); + expect(isEqualSpy).not.toHaveBeenCalled(); + }); + + it('should verify will return -1 when status is different', () => { + // Given + const componentStateComparable = ComponentStateImpl.of({ + ...componentState, + status: LOADED + }); + const modelComparableDI = ComponentModelComparable.of( + ComponentModel.of(componentStateComparable, routerState) + ); + + // When + const compareV = modelComparable.compare(modelComparableDI); + + // Then + expect(compareV).toEqual(-1); + }); + + it('should verify will return -1 when task is different', () => { + // Given + const componentStateComparable = ComponentStateImpl.of({ + ...componentState, + task: 'patch_entity' + }); + const modelComparableDI = ComponentModelComparable.of( + ComponentModel.of(componentStateComparable, routerState) + ); + + // When + const compareV = modelComparable.compare(modelComparableDI); + + // Then + expect(compareV).toEqual(-1); + }); + + it('should verify will return 0 when navigationId is different', () => { + // Given + const routerStateComparable = RouterState.of(routerState.state, 90); + const modelComparableDI = ComponentModelComparable.of( + ComponentModel.of(componentState, routerStateComparable) + ); + + // When + const compareV = modelComparable.compare(modelComparableDI); + + // Then + expect(compareV).toEqual(0); + }); + + it('should verify will return -1 when error is different', () => { + // Given + const isEqualSpy = spyOn(CollectionsUtil, 'isEqual').and.callThrough(); + const componentStateComparable = ComponentStateImpl.of({ + ...componentState, + error: new Error('new Error()') + }); + const modelComparableDI = ComponentModelComparable.of( + ComponentModel.of(componentStateComparable, routerState) + ); + + // When + const compareV = modelComparable.compare(modelComparableDI); + + // Then + expect(compareV).toEqual(-1); + expect(isEqualSpy).not.toHaveBeenCalled(); + }); + + it('should verify will return 0 when data ref is same', () => { + // Given + const isEqualSpy = spyOn(CollectionsUtil, 'isEqual').and.callThrough(); + const componentStateComparable = ComponentStateImpl.of({ + ...componentState, + data: componentState.data + }); + const modelComparableDI = ComponentModelComparable.of( + ComponentModel.of(componentStateComparable, routerState) + ); + + // When + const compareV = modelComparable.compare(modelComparableDI); + + // Then + expect(compareV).toEqual(0); + expect(isEqualSpy).not.toHaveBeenCalled(); + }); + + it('should verify will return 0 when ref is different but content is same', () => { + // Given + const areMapsEqualSpy = spyOn( + CollectionsUtil, + 'areMapsEqual' + ).and.callThrough(); + const componentStateComparable = ComponentStateImpl.of({ + ...componentState, + data: new Map([ + ['countries', ['aCountry', 'bCountry', 'cCountry']] + ]) + }); + const modelComparableDI = ComponentModelComparable.of( + ComponentModel.of(componentStateComparable, routerState) + ); + + // When + const compareV = modelComparable.compare(modelComparableDI); + + // Then + expect(compareV).toEqual(0); + expect(areMapsEqualSpy).toHaveBeenCalledWith( + componentState.data, + componentStateComparable.data + ); + }); + + it('should verify will return -1 when ref is different and content is different', () => { + // Given + const areMapsEqualSpy = spyOn( + CollectionsUtil, + 'areMapsEqual' + ).and.callThrough(); + const componentStateComparable = ComponentStateImpl.of({ + ...componentState, + data: new Map([ + ['countries', ['aCountry', 'bCountry', 'cCountry']], + ['users', ['aUser', 'bUser', 'cUser']] + ]) + }); + const modelComparableDI = ComponentModelComparable.of( + ComponentModel.of(componentStateComparable, routerState) + ); + + // When + const compareV = modelComparable.compare(modelComparableDI); + + // Then + expect(compareV).toEqual(-1); + expect(areMapsEqualSpy).toHaveBeenCalledWith( + componentState.data, + componentStateComparable.data + ); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/component-model.comparable.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/component-model.comparable.ts index 9a6c427de7..3dc63d3146 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/component-model.comparable.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/component-model.comparable.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -12,64 +10,75 @@ import { Comparable, ComparableImpl } from '../../../common'; import { AbstractComponentModel } from './component.model.interface'; export class ComponentModelComparable extends ComparableImpl { - /** - * ** Constructor. - */ - constructor(model: AbstractComponentModel) { - super(model); - } - - /** - * ** Factory method. - */ - static override of(model: AbstractComponentModel): ComponentModelComparable { - return new ComponentModelComparable(model); - } - - /** - * @inheritDoc - */ - override compare(comparable: Comparable): number { - if (comparable instanceof ComponentModelComparable) { - return this._compareEquality(comparable); - } else { - return -1; - } - } - - private _compareEquality(comparable: ComponentModelComparable): number { - if (!(this.value instanceof AbstractComponentModel)) { - return -1; - } - - if (!(comparable.value instanceof AbstractComponentModel)) { - return -1; - } - - if (this.value === comparable.value) { - return 0; - } - - if (this.value.status !== comparable.value.status) { - return -1; - } - - if (this.value.getTask() !== comparable.value.getTask()) { - return -1; - } - - if (this.value.getComponentState().error !== comparable.value.getComponentState().error) { - return -1; - } - - if (this.value.getComponentState().data === comparable.value.getComponentState().data) { - return 0; - } - - if (CollectionsUtil.areMapsEqual(this.value.getComponentState().data, comparable.value.getComponentState().data)) { - return 0; - } - - return -1; - } + /** + * ** Constructor. + */ + constructor(model: AbstractComponentModel) { + super(model); + } + + /** + * ** Factory method. + */ + static override of(model: AbstractComponentModel): ComponentModelComparable { + return new ComponentModelComparable(model); + } + + /** + * @inheritDoc + */ + override compare(comparable: Comparable): number { + if (comparable instanceof ComponentModelComparable) { + return this._compareEquality(comparable); + } else { + return -1; + } + } + + private _compareEquality(comparable: ComponentModelComparable): number { + if (!(this.value instanceof AbstractComponentModel)) { + return -1; + } + + if (!(comparable.value instanceof AbstractComponentModel)) { + return -1; + } + + if (this.value === comparable.value) { + return 0; + } + + if (this.value.status !== comparable.value.status) { + return -1; + } + + if (this.value.getTask() !== comparable.value.getTask()) { + return -1; + } + + if ( + this.value.getComponentState().error !== + comparable.value.getComponentState().error + ) { + return -1; + } + + if ( + this.value.getComponentState().data === + comparable.value.getComponentState().data + ) { + return 0; + } + + if ( + CollectionsUtil.areMapsEqual( + this.value.getComponentState().data, + comparable.value.getComponentState().data + ) + ) { + return 0; + } + + return -1; + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/component.model.interface.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/component.model.interface.ts index 1c46014743..3a47d98269 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/component.model.interface.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/component.model.interface.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -19,168 +17,167 @@ import { ComponentState, StatusType } from './state'; * */ export abstract class AbstractComponentModel { - - /** - * ** Return RouterState. - */ - abstract get routerState(): RouterState; - - /** - * ** Return Status from ComponentState. - */ - abstract get status(): StatusType; - - /** - * ** Return routePath from RouterState. - */ - abstract get routePath(): string; - - /** - * ** Return the ComponentState. - */ - abstract getComponentState(): ComponentState; - - /** - * ** Set Search query to ComponentState and get Model reference again. - *

    - * - Ready for method chaining. - *

    - */ - abstract withSearch(search: string): this; - - /** - * ** Set Page to ComponentState and get Model reference again. - *

    - * - Ready for method chaining. - *

    - */ - abstract withPage(page: number, size: number): this; - - /** - * ** Set Filter to ComponentState and get Model reference again. - *

    - * - Ready for method chaining. - *

    - */ - abstract withFilter(filterPredicates: ApiPredicate[]): this; - - /** - * ** Set Request params to ComponentState and get Model reference again. - *

    - * - Ready for method chaining. - *

    - */ - abstract withRequestParam(key: string, value: any): this; - - /** - * ** Set Data (bound to key identifier) to ComponentState and get Model reference again. - *

    - * - Ready for method chaining. - *

    - */ - abstract withData(key: string, data: any): this; - - /** - * ** Set Task identifier to ComponentState and get Model reference again. - * - * - Should be set only after data comes from the API, action is asynchronous. - * - Don't set this property during action dispatch - * - *

    - * - Ready for method chaining. - *

    - */ - abstract withTask(taskIdentifier: string): this; - - /** - * ** Clear Task identifier from ComponentState and get Model reference again. - *

    - * - Ready for method chaining. - *

    - */ - abstract clearTask(): this; - - /** - * ** Returns latest Task from ComponentState. - */ - abstract getTask(): string; - - /** - * ** Returns latest Task unique identifier from ComponentState. - */ - abstract getTaskUniqueIdentifier(): string; - - /** - * ** Set Error to ComponentState and get Model reference again. - *

    - * - Ready for method chaining. - *

    - */ - abstract withError(error: Error): this; - - /** - * ** Clear Error from ComponentState and get Model reference again. - *

    - * - Ready for method chaining. - *

    - */ - abstract clearError(): this; - - /** - * ** Set UiState for given identifier to ComponentState and get Model reference again. - *

    - * - Ready for method chaining. - *

    - */ - abstract withUiState(key: string, value: any): this; - - /** - * ** Returns UiState for given identifier. - */ - abstract getUiState(key: string): T; - - /** - * ** Set Component State status to IDLE. - *

    - * - Ready for method chaining. - *

    - */ - abstract withStatusIdle(): this; - - /** - * ** Set Component State status to LOADING. - *

    - * - Ready for method chaining. - *

    - */ - abstract withStatusLoading(): this; - - /** - * ** Set Component State status to LOADED. - *

    - * - Ready for method chaining. - *

    - */ - abstract withStatusLoaded(): this; - - /** - * ** Set Component State status to FAILED. - *

    - * - Ready for method chaining. - *

    - */ - abstract withStatusFailed(): this; - - /** - * ** Update Component State with Partial Component State patch. - *

    - * - Ready for method chaining. - *

    - */ - abstract updateComponentState(patchState: Partial): this; - - /** - * ** Filter method that analyze if current Model is different from given one. - */ - abstract isModified(model: AbstractComponentModel): boolean; + /** + * ** Return RouterState. + */ + abstract get routerState(): RouterState; + + /** + * ** Return Status from ComponentState. + */ + abstract get status(): StatusType; + + /** + * ** Return routePath from RouterState. + */ + abstract get routePath(): string; + + /** + * ** Return the ComponentState. + */ + abstract getComponentState(): ComponentState; + + /** + * ** Set Search query to ComponentState and get Model reference again. + *

    + * - Ready for method chaining. + *

    + */ + abstract withSearch(search: string): this; + + /** + * ** Set Page to ComponentState and get Model reference again. + *

    + * - Ready for method chaining. + *

    + */ + abstract withPage(page: number, size: number): this; + + /** + * ** Set Filter to ComponentState and get Model reference again. + *

    + * - Ready for method chaining. + *

    + */ + abstract withFilter(filterPredicates: ApiPredicate[]): this; + + /** + * ** Set Request params to ComponentState and get Model reference again. + *

    + * - Ready for method chaining. + *

    + */ + abstract withRequestParam(key: string, value: any): this; + + /** + * ** Set Data (bound to key identifier) to ComponentState and get Model reference again. + *

    + * - Ready for method chaining. + *

    + */ + abstract withData(key: string, data: any): this; + + /** + * ** Set Task identifier to ComponentState and get Model reference again. + * + * - Should be set only after data comes from the API, action is asynchronous. + * - Don't set this property during action dispatch + * + *

    + * - Ready for method chaining. + *

    + */ + abstract withTask(taskIdentifier: string): this; + + /** + * ** Clear Task identifier from ComponentState and get Model reference again. + *

    + * - Ready for method chaining. + *

    + */ + abstract clearTask(): this; + + /** + * ** Returns latest Task from ComponentState. + */ + abstract getTask(): string; + + /** + * ** Returns latest Task unique identifier from ComponentState. + */ + abstract getTaskUniqueIdentifier(): string; + + /** + * ** Set Error to ComponentState and get Model reference again. + *

    + * - Ready for method chaining. + *

    + */ + abstract withError(error: Error): this; + + /** + * ** Clear Error from ComponentState and get Model reference again. + *

    + * - Ready for method chaining. + *

    + */ + abstract clearError(): this; + + /** + * ** Set UiState for given identifier to ComponentState and get Model reference again. + *

    + * - Ready for method chaining. + *

    + */ + abstract withUiState(key: string, value: any): this; + + /** + * ** Returns UiState for given identifier. + */ + abstract getUiState(key: string): T; + + /** + * ** Set Component State status to IDLE. + *

    + * - Ready for method chaining. + *

    + */ + abstract withStatusIdle(): this; + + /** + * ** Set Component State status to LOADING. + *

    + * - Ready for method chaining. + *

    + */ + abstract withStatusLoading(): this; + + /** + * ** Set Component State status to LOADED. + *

    + * - Ready for method chaining. + *

    + */ + abstract withStatusLoaded(): this; + + /** + * ** Set Component State status to FAILED. + *

    + * - Ready for method chaining. + *

    + */ + abstract withStatusFailed(): this; + + /** + * ** Update Component State with Partial Component State patch. + *

    + * - Ready for method chaining. + *

    + */ + abstract updateComponentState(patchState: Partial): this; + + /** + * ** Filter method that analyze if current Model is different from given one. + */ + abstract isModified(model: AbstractComponentModel): boolean; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/component.model.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/component.model.spec.ts index 557d4cab14..e3e2b8f677 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/component.model.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/component.model.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -9,441 +7,500 @@ import { ASC, RequestFilterImpl, RequestPageImpl } from '../../../common'; import { RouterState, RouteSegments, RouteState } from '../../router'; -import { ComponentState, ComponentStateImpl, FAILED, IDLE, INITIALIZED, LOADED, LOADING } from './state'; +import { + ComponentState, + ComponentStateImpl, + FAILED, + IDLE, + INITIALIZED, + LOADED, + LOADING +} from './state'; import { ComponentModel } from './component.model'; import { ComponentModelComparable } from './component-model.comparable'; describe('ComponentModel', () => { - it('should verify instance is created', () => { - // When - const instance = new ComponentModel(null, null); - - // Then - expect(instance).toBeDefined(); - }); - - describe('Statics::', () => { - describe('Methods::()', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // Given - const componentState = { id: 'testId', status: IDLE } as ComponentState; - const routerState = RouterState.of( - { - routeSegments: { - routePath: 'domain/context' - } - } as RouteState, - 9 - ); - - // When - const instance = ComponentModel.of(componentState, routerState); - - // Then - expect(instance).toBeInstanceOf(ComponentModel); - }); - }); - }); - }); - - describe('Getters/Setters::', () => { - let componentState: ComponentState; - let routerState: RouterState; - - beforeEach(() => { - componentState = { id: 'testId', status: IDLE } as ComponentState; - routerState = RouterState.of( - { - routeSegments: { - routePath: 'domain/context' - } - } as RouteState, - 9 - ); - }); - - describe('|GET -> routerState|', () => { - it('should verify will return correct value', () => { - // Given - const model = ComponentModel.of(componentState, routerState); - - // When - const _routerState = model.routerState; - - // Then - expect(_routerState).toBe(routerState); - }); - }); - - describe('|GET -> status|', () => { - it('should verify will return correct value', () => { - // Given - const model = ComponentModel.of(componentState, routerState); - - // When - const status = model.status; - - // Then - expect(status).toEqual(IDLE); - }); - }); - - describe('|GET -> routePath|', () => { - it('should verify will return correct value from componentState', () => { - // Given - componentState = { ...componentState, routePath: 'entity/15' }; - const model = ComponentModel.of(componentState, routerState); - - // When - const routePath = model.routePath; - - // Then - expect(routePath).toEqual('entity/15'); - }); - - it('should verify will return correct value from routerState', () => { - // Given - const model = ComponentModel.of(componentState, routerState); - - // When - const routePath = model.routePath; - - // Then - expect(routePath).toEqual('domain/context'); - }); - }); - }); - - describe('Methods::', () => { - let componentState: ComponentState; - let routerState: RouterState; - let model: ComponentModel; - - beforeEach(() => { - componentState = ComponentStateImpl.of({ - id: 'testId', - status: IDLE, - data: new Map([['countries', ['aCountry', 'bCountry', 'cCountry']]]) - }); - routerState = RouterState.of( - RouteState.of( - RouteSegments.of( - 'entity/21', - { entityId: '21' }, - { search: 'test-team' }, - RouteSegments.of('domain/context', - {}, - { search: 'test-team' } - ) - ), - 'domain/context/entity/21' - ), - 9 - ); - model = ComponentModel.of(componentState, routerState); - }); - - describe('|getComponentState|', () => { - it('should verify will return ComponentState', () => { - // When - const _componentState = model.getComponentState(); - - // Then - expect(_componentState).toBe(componentState); - }); - }); - - describe('|withSearch|', () => { - it('should verify will invoke correct method with correct payload', () => { - // Given - const updateSpy = spyOn(model, 'updateComponentState').and.callThrough(); - - // When - const ref = model.withSearch('metadataSearchParam'); - - // Then - expect(ref).toBe(model); - expect(updateSpy).toHaveBeenCalledWith({ search: 'metadataSearchParam' }); - }); - }); - - describe('|withPage|', () => { - it('should verify will invoke correct method with correct payload', () => { - // Given - const updateSpy = spyOn(model, 'updateComponentState').and.callThrough(); - - // When - const ref = model.withPage(6, 18); - - // Then - expect(ref).toBe(model); - expect(updateSpy).toHaveBeenCalledWith({ page: RequestPageImpl.of(6, 18) }); - }); - }); - - describe('|withFilter|', () => { - it('should verify will invoke correct method with correct payload', () => { - // Given - const updateSpy = spyOn(model, 'updateComponentState').and.callThrough(); - - // When - const ref = model.withFilter([{ pattern: 'test*', property: 'config.path', sort: ASC }]); - - // Then - expect(ref).toBe(model); - expect(updateSpy).toHaveBeenCalledWith({ - filter: RequestFilterImpl.of({ - pattern: 'test*', - property: 'config.path', - sort: ASC - }) - }); - }); - }); - - describe('|withRequestParam|', () => { - it('should verify will set data to Request param map', () => { - // Given - const attributes = ['topBrand', 'extraSize', 'largeNumber']; - const order = { sort: ASC, path: 'config.user' }; - - // When - const ref = model - .withRequestParam('attributes', attributes) - .withRequestParam('order', order); - - // Then - expect(ref).toBe(model); - expect(model.getComponentState().requestParams).toEqual( - new Map([['attributes', [...attributes]], ['order', { ...order }]]) - ); - }); - }); - - describe('|withData|', () => { - it('should verify will set data to Data map', () => { - // Given - const users = ['aUser', 'bUser', 'cUser']; - - // When - const ref = model.withData('users', users); - - // Then - expect(ref).toBe(model); - expect(model.getComponentState().data).toEqual( - new Map([['countries', ['aCountry', 'bCountry', 'cCountry']], ['users', users]]) - ); - }); - }); - - describe('|withTask|', () => { - it('should verify will set Task to ComponentState', () => { - // Given - const task = 'delete_entity'; - - // Then 1 - expect(model.getComponentState().task).not.toEqual(task); - - // When - const ref = model.withTask(task); - - // Then 2 - expect(ref).toBe(model); - expect(model.getComponentState().task).toEqual(task); - }); - }); - - describe('|getTask|', () => { - it('should verify will return Task from ComponentState', () => { - // Given - const task = 'search_users'; - const taskIdentifier = `${ task } __ ${ new Date().toISOString() }`; - componentState = ComponentStateImpl.of({ - ...componentState, - task: taskIdentifier - }); - model = ComponentModel.of(componentState, routerState); - - // When - const res = model.getTask(); - - // Then - expect(res).toBe(task); - }); - }); - - describe('|withError|', () => { - it('should verify will invoke correct method with correct payload', () => { - // Given - const error = new Error('random error'); - const updateSpy = spyOn(model, 'updateComponentState').and.callThrough(); - - // When - const ref = model.withError(error); - - // Then - expect(ref).toBe(model); - expect(updateSpy).toHaveBeenCalledWith({ error }); - }); - }); - - describe('|clearError|', () => { - it('should verify will invoke correct method with correct payload', () => { - // Given - const updateSpy = spyOn(model, 'updateComponentState').and.callThrough(); - - // When - const ref = model.clearError(); - - // Then - expect(ref).toBe(model); - expect(updateSpy).toHaveBeenCalledWith({ error: null }); - }); - }); - - describe('|withUiState|', () => { - it('should verify will set data to Data map', () => { - // Given - const btnState = { active: true }; - - // When - const ref = model.withUiState('btnOk', btnState); - - // Then - expect(ref).toBe(model); - expect(model.getComponentState().uiState).toEqual(new Map([['btnOk', btnState]])); - }); - }); - - describe('|getUiState|', () => { - it('should verify will return uiState from ComponentState for given key', () => { - // Given - const btnState = { active: true }; - componentState = ComponentStateImpl.of({ - ...componentState, - uiState: new Map([['btnOk', btnState]]) - }); - model = ComponentModel.of(componentState, routerState); - - // When - const uiState = model.getUiState('btnOk'); - - // Then - expect(uiState).toBe(btnState); - }); - }); - - describe('|withStatusIdle|', () => { - it('should verify will invoke correct method with correct payload', () => { - // Given - const updateSpy = spyOn(model, 'updateComponentState').and.callThrough(); - - // When - const ref = model.withStatusIdle(); - - // Then - expect(ref).toBe(model); - expect(updateSpy).toHaveBeenCalledWith({ status: IDLE }); - }); - }); - - describe('|withStatusLoading|', () => { - it('should verify will invoke correct method with correct payload', () => { - // Given - const updateSpy = spyOn(model, 'updateComponentState').and.callThrough(); - - // When - const ref = model.withStatusLoading(); - - // Then - expect(ref).toBe(model); - expect(updateSpy).toHaveBeenCalledWith({ status: LOADING }); - }); - }); - - describe('|withStatusLoaded|', () => { - it('should verify will invoke correct method with correct payload', () => { - // Given - const updateSpy = spyOn(model, 'updateComponentState').and.callThrough(); - - // When - const ref = model.withStatusLoaded(); - - // Then - expect(ref).toBe(model); - expect(updateSpy).toHaveBeenCalledWith({ status: LOADED }); - }); - }); - - describe('|withStatusFailed|', () => { - it('should verify will invoke correct method with correct payload', () => { - // Given - const updateSpy = spyOn(model, 'updateComponentState').and.callThrough(); - - // When - const ref = model.withStatusFailed(); - - // Then - expect(ref).toBe(model); - expect(updateSpy).toHaveBeenCalledWith({ status: FAILED }); - }); - }); - - describe('|updateComponentState|', () => { - it('should verify will update local ComponentState', () => { - // Given - const assertionComponentState = ComponentStateImpl.of({ - ...componentState, - status: INITIALIZED, - id: 'test-component-1234', - search: 'teamUSA*', - page: RequestPageImpl.of(9, 45) - }); - - // When - const ref = model.updateComponentState({ - status: INITIALIZED, - id: 'test-component-1234', - search: 'teamUSA*', - page: RequestPageImpl.of(9, 45) - }); - - // Then - expect(ref).toBe(model); - expect(model.getComponentState()).toEqual(assertionComponentState); - }); - }); - - describe('|isModified|', () => { - it('should verify will invoke correct methods', () => { - // Given - const componentModelComparableStub = jasmine.createSpyObj('comparable', ['notEqual']); - componentModelComparableStub.notEqual.and.returnValue(false); - const factoryOfSpy = spyOn(ComponentModelComparable, 'of').and.returnValue(componentModelComparableStub); - - const comparableState = ComponentStateImpl.of({ - ...componentState, - data: new Map([ - ['countries', ['aCountry', 'bCountry', 'cCountry']], - ['users', ['aUser', 'bUser', 'cUser']] - ]) - }); - const comparableModel = ComponentModel.of(comparableState, routerState); - - // When - const isModified = model.isModified(comparableModel); - - // Then - expect(isModified).toBeFalse(); - expect(factoryOfSpy).toHaveBeenCalledTimes(2); - expect(factoryOfSpy.calls.argsFor(0)).toEqual([model]); - expect(factoryOfSpy.calls.argsFor(1)).toEqual([comparableModel]); - expect(componentModelComparableStub.notEqual).toHaveBeenCalledTimes(1); - expect(componentModelComparableStub.notEqual).toHaveBeenCalledWith(componentModelComparableStub); - }); - }); - }); + it('should verify instance is created', () => { + // When + const instance = new ComponentModel(null, null); + + // Then + expect(instance).toBeDefined(); + }); + + describe('Statics::', () => { + describe('Methods::()', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // Given + const componentState = { + id: 'testId', + status: IDLE + } as ComponentState; + const routerState = RouterState.of( + { + routeSegments: { + routePath: 'domain/context' + } + } as RouteState, + 9 + ); + + // When + const instance = ComponentModel.of(componentState, routerState); + + // Then + expect(instance).toBeInstanceOf(ComponentModel); + }); + }); + }); + }); + + describe('Getters/Setters::', () => { + let componentState: ComponentState; + let routerState: RouterState; + + beforeEach(() => { + componentState = { id: 'testId', status: IDLE } as ComponentState; + routerState = RouterState.of( + { + routeSegments: { + routePath: 'domain/context' + } + } as RouteState, + 9 + ); + }); + + describe('|GET -> routerState|', () => { + it('should verify will return correct value', () => { + // Given + const model = ComponentModel.of(componentState, routerState); + + // When + const _routerState = model.routerState; + + // Then + expect(_routerState).toBe(routerState); + }); + }); + + describe('|GET -> status|', () => { + it('should verify will return correct value', () => { + // Given + const model = ComponentModel.of(componentState, routerState); + + // When + const status = model.status; + + // Then + expect(status).toEqual(IDLE); + }); + }); + + describe('|GET -> routePath|', () => { + it('should verify will return correct value from componentState', () => { + // Given + componentState = { ...componentState, routePath: 'entity/15' }; + const model = ComponentModel.of(componentState, routerState); + + // When + const routePath = model.routePath; + + // Then + expect(routePath).toEqual('entity/15'); + }); + + it('should verify will return correct value from routerState', () => { + // Given + const model = ComponentModel.of(componentState, routerState); + + // When + const routePath = model.routePath; + + // Then + expect(routePath).toEqual('domain/context'); + }); + }); + }); + + describe('Methods::', () => { + let componentState: ComponentState; + let routerState: RouterState; + let model: ComponentModel; + + beforeEach(() => { + componentState = ComponentStateImpl.of({ + id: 'testId', + status: IDLE, + data: new Map([ + ['countries', ['aCountry', 'bCountry', 'cCountry']] + ]) + }); + routerState = RouterState.of( + RouteState.of( + RouteSegments.of( + 'entity/21', + { entityId: '21' }, + { search: 'test-team' }, + RouteSegments.of('domain/context', {}, { search: 'test-team' }) + ), + 'domain/context/entity/21' + ), + 9 + ); + model = ComponentModel.of(componentState, routerState); + }); + + describe('|getComponentState|', () => { + it('should verify will return ComponentState', () => { + // When + const _componentState = model.getComponentState(); + + // Then + expect(_componentState).toBe(componentState); + }); + }); + + describe('|withSearch|', () => { + it('should verify will invoke correct method with correct payload', () => { + // Given + const updateSpy = spyOn( + model, + 'updateComponentState' + ).and.callThrough(); + + // When + const ref = model.withSearch('metadataSearchParam'); + + // Then + expect(ref).toBe(model); + expect(updateSpy).toHaveBeenCalledWith({ + search: 'metadataSearchParam' + }); + }); + }); + + describe('|withPage|', () => { + it('should verify will invoke correct method with correct payload', () => { + // Given + const updateSpy = spyOn( + model, + 'updateComponentState' + ).and.callThrough(); + + // When + const ref = model.withPage(6, 18); + + // Then + expect(ref).toBe(model); + expect(updateSpy).toHaveBeenCalledWith({ + page: RequestPageImpl.of(6, 18) + }); + }); + }); + + describe('|withFilter|', () => { + it('should verify will invoke correct method with correct payload', () => { + // Given + const updateSpy = spyOn( + model, + 'updateComponentState' + ).and.callThrough(); + + // When + const ref = model.withFilter([ + { pattern: 'test*', property: 'config.path', sort: ASC } + ]); + + // Then + expect(ref).toBe(model); + expect(updateSpy).toHaveBeenCalledWith({ + filter: RequestFilterImpl.of({ + pattern: 'test*', + property: 'config.path', + sort: ASC + }) + }); + }); + }); + + describe('|withRequestParam|', () => { + it('should verify will set data to Request param map', () => { + // Given + const attributes = ['topBrand', 'extraSize', 'largeNumber']; + const order = { sort: ASC, path: 'config.user' }; + + // When + const ref = model + .withRequestParam('attributes', attributes) + .withRequestParam('order', order); + + // Then + expect(ref).toBe(model); + expect(model.getComponentState().requestParams).toEqual( + new Map([ + ['attributes', [...attributes]], + ['order', { ...order }] + ]) + ); + }); + }); + + describe('|withData|', () => { + it('should verify will set data to Data map', () => { + // Given + const users = ['aUser', 'bUser', 'cUser']; + + // When + const ref = model.withData('users', users); + + // Then + expect(ref).toBe(model); + expect(model.getComponentState().data).toEqual( + new Map([ + ['countries', ['aCountry', 'bCountry', 'cCountry']], + ['users', users] + ]) + ); + }); + }); + + describe('|withTask|', () => { + it('should verify will set Task to ComponentState', () => { + // Given + const task = 'delete_entity'; + + // Then 1 + expect(model.getComponentState().task).not.toEqual(task); + + // When + const ref = model.withTask(task); + + // Then 2 + expect(ref).toBe(model); + expect(model.getComponentState().task).toEqual(task); + }); + }); + + describe('|getTask|', () => { + it('should verify will return Task from ComponentState', () => { + // Given + const task = 'search_users'; + const taskIdentifier = `${task} __ ${new Date().toISOString()}`; + componentState = ComponentStateImpl.of({ + ...componentState, + task: taskIdentifier + }); + model = ComponentModel.of(componentState, routerState); + + // When + const res = model.getTask(); + + // Then + expect(res).toBe(task); + }); + }); + + describe('|withError|', () => { + it('should verify will invoke correct method with correct payload', () => { + // Given + const error = new Error('random error'); + const updateSpy = spyOn( + model, + 'updateComponentState' + ).and.callThrough(); + + // When + const ref = model.withError(error); + + // Then + expect(ref).toBe(model); + expect(updateSpy).toHaveBeenCalledWith({ error }); + }); + }); + + describe('|clearError|', () => { + it('should verify will invoke correct method with correct payload', () => { + // Given + const updateSpy = spyOn( + model, + 'updateComponentState' + ).and.callThrough(); + + // When + const ref = model.clearError(); + + // Then + expect(ref).toBe(model); + expect(updateSpy).toHaveBeenCalledWith({ error: null }); + }); + }); + + describe('|withUiState|', () => { + it('should verify will set data to Data map', () => { + // Given + const btnState = { active: true }; + + // When + const ref = model.withUiState('btnOk', btnState); + + // Then + expect(ref).toBe(model); + expect(model.getComponentState().uiState).toEqual( + new Map([['btnOk', btnState]]) + ); + }); + }); + + describe('|getUiState|', () => { + it('should verify will return uiState from ComponentState for given key', () => { + // Given + const btnState = { active: true }; + componentState = ComponentStateImpl.of({ + ...componentState, + uiState: new Map([['btnOk', btnState]]) + }); + model = ComponentModel.of(componentState, routerState); + + // When + const uiState = model.getUiState('btnOk'); + + // Then + expect(uiState).toBe(btnState); + }); + }); + + describe('|withStatusIdle|', () => { + it('should verify will invoke correct method with correct payload', () => { + // Given + const updateSpy = spyOn( + model, + 'updateComponentState' + ).and.callThrough(); + + // When + const ref = model.withStatusIdle(); + + // Then + expect(ref).toBe(model); + expect(updateSpy).toHaveBeenCalledWith({ status: IDLE }); + }); + }); + + describe('|withStatusLoading|', () => { + it('should verify will invoke correct method with correct payload', () => { + // Given + const updateSpy = spyOn( + model, + 'updateComponentState' + ).and.callThrough(); + + // When + const ref = model.withStatusLoading(); + + // Then + expect(ref).toBe(model); + expect(updateSpy).toHaveBeenCalledWith({ status: LOADING }); + }); + }); + + describe('|withStatusLoaded|', () => { + it('should verify will invoke correct method with correct payload', () => { + // Given + const updateSpy = spyOn( + model, + 'updateComponentState' + ).and.callThrough(); + + // When + const ref = model.withStatusLoaded(); + + // Then + expect(ref).toBe(model); + expect(updateSpy).toHaveBeenCalledWith({ status: LOADED }); + }); + }); + + describe('|withStatusFailed|', () => { + it('should verify will invoke correct method with correct payload', () => { + // Given + const updateSpy = spyOn( + model, + 'updateComponentState' + ).and.callThrough(); + + // When + const ref = model.withStatusFailed(); + + // Then + expect(ref).toBe(model); + expect(updateSpy).toHaveBeenCalledWith({ status: FAILED }); + }); + }); + + describe('|updateComponentState|', () => { + it('should verify will update local ComponentState', () => { + // Given + const assertionComponentState = ComponentStateImpl.of({ + ...componentState, + status: INITIALIZED, + id: 'test-component-1234', + search: 'teamUSA*', + page: RequestPageImpl.of(9, 45) + }); + + // When + const ref = model.updateComponentState({ + status: INITIALIZED, + id: 'test-component-1234', + search: 'teamUSA*', + page: RequestPageImpl.of(9, 45) + }); + + // Then + expect(ref).toBe(model); + expect(model.getComponentState()).toEqual(assertionComponentState); + }); + }); + + describe('|isModified|', () => { + it('should verify will invoke correct methods', () => { + // Given + const componentModelComparableStub = + jasmine.createSpyObj('comparable', [ + 'notEqual' + ]); + componentModelComparableStub.notEqual.and.returnValue(false); + const factoryOfSpy = spyOn( + ComponentModelComparable, + 'of' + ).and.returnValue(componentModelComparableStub); + + const comparableState = ComponentStateImpl.of({ + ...componentState, + data: new Map([ + ['countries', ['aCountry', 'bCountry', 'cCountry']], + ['users', ['aUser', 'bUser', 'cUser']] + ]) + }); + const comparableModel = ComponentModel.of(comparableState, routerState); + + // When + const isModified = model.isModified(comparableModel); + + // Then + expect(isModified).toBeFalse(); + expect(factoryOfSpy).toHaveBeenCalledTimes(2); + expect(factoryOfSpy.calls.argsFor(0)).toEqual([model]); + expect(factoryOfSpy.calls.argsFor(1)).toEqual([comparableModel]); + expect(componentModelComparableStub.notEqual).toHaveBeenCalledTimes(1); + expect(componentModelComparableStub.notEqual).toHaveBeenCalledWith( + componentModelComparableStub + ); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/component.model.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/component.model.ts index 45c3163191..2a8f57c936 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/component.model.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/component.model.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -7,11 +5,24 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { ApiPredicate, extractTaskFromIdentifier, RequestFilterImpl, RequestPageImpl } from '../../../common'; +import { + ApiPredicate, + extractTaskFromIdentifier, + RequestFilterImpl, + RequestPageImpl +} from '../../../common'; import { RouterState } from '../../router'; -import { ComponentState, ComponentStateImpl, FAILED, IDLE, LOADED, LOADING, StatusType } from './state'; +import { + ComponentState, + ComponentStateImpl, + FAILED, + IDLE, + LOADED, + LOADING, + StatusType +} from './state'; import { ComponentModelComparable } from './component-model.comparable'; @@ -23,228 +34,225 @@ import { AbstractComponentModel } from './component.model.interface'; * */ export class ComponentModel extends AbstractComponentModel { - /** - * ** Constructor. - */ - constructor(protected _componentState: ComponentState, - protected _routerState: RouterState) { - super(); - } - - /** - * ** Factory method. - */ - static of(componentState: ComponentState, routerState: RouterState) { - return new ComponentModel(componentState, routerState); - } - - /** - * @inheritDoc - */ - get routerState(): RouterState { - return this._routerState; - } - - /** - * @inheritDoc - */ - get status(): StatusType { - return this.getComponentState().status; - } - - /** - * @inheritDoc - */ - get routePath(): string { - return this.getComponentState().routePath || - this.routerState.state.routeSegments.routePath; - } - - /** - * @inheritDoc - */ - getComponentState(): ComponentState { - return this._componentState; - } - - /** - * @inheritDoc - */ - withSearch(search: string) { - this.updateComponentState({ - search - }); - - return this; - } - - /** - * @inheritDoc - */ - withPage(page: number, size: number) { - this.updateComponentState({ - page: RequestPageImpl.of(page, size) - }); - - return this; - } - - /** - * @inheritDoc - */ - withFilter(filterPredicates: ApiPredicate[]) { - this.updateComponentState({ - filter: RequestFilterImpl.of(...filterPredicates) - }); - - return this; - } - - /** - * @inheritDoc - */ - withRequestParam(key: string, value: any) { - this.getComponentState() - .requestParams - .set(key, value); - - return this; - } - - /** - * @inheritDoc - */ - withData(key: string, data: any) { - this.getComponentState() - .data - .set(key, data); - - return this; - } - - /** - * @inheritDoc - */ - withTask(taskIdentifier: string) { - this.updateComponentState({ task: taskIdentifier }); - - return this; - } - - /** - * @inheritDoc - */ - clearTask() { - this.updateComponentState({ task: null }); - - return this; - } - - /** - * @inheritDoc - */ - getTask(): string { - return extractTaskFromIdentifier(this.getComponentState().task); - } - - /** - * @inheritDoc - */ - getTaskUniqueIdentifier(): string { - return this.getComponentState().task; - } - - /** - * @inheritDoc - */ - withError(error: Error) { - this.updateComponentState({ error }); - - return this; - } - - /** - * @inheritDoc - */ - clearError() { - this.updateComponentState({ error: null }); - - return this; - } - - /** - * @inheritDoc - */ - withUiState(key: string, value: any) { - this.getComponentState() - .uiState - .set(key, value); - - return this; - } - - /** - * @inheritDoc - */ - getUiState(key: string): T { - return this.getComponentState() - .uiState - .get(key) as T; - } - - /** - * @inheritDoc - */ - withStatusIdle() { - this.updateComponentState({ status: IDLE }); - - return this; - } - - /** - * @inheritDoc - */ - withStatusLoading() { - this.updateComponentState({ status: LOADING }); - - return this; - } - - /** - * @inheritDoc - */ - withStatusLoaded() { - this.updateComponentState({ status: LOADED }); - - return this; - } - - /** - * @inheritDoc - */ - withStatusFailed() { - this.updateComponentState({ status: FAILED }); - - return this; - } - - /** - * @inheritDoc - */ - updateComponentState(patchState: Partial) { - this._componentState = ComponentStateImpl.of({ - ...this.getComponentState(), - ...patchState - }); - - return this; - } - - /** - * @inheritDoc - */ - isModified(model: ComponentModel): boolean { - return ComponentModelComparable.of(this) - .notEqual(ComponentModelComparable.of(model)); - } + /** + * ** Constructor. + */ + constructor( + protected _componentState: ComponentState, + protected _routerState: RouterState + ) { + super(); + } + + /** + * ** Factory method. + */ + static of(componentState: ComponentState, routerState: RouterState) { + return new ComponentModel(componentState, routerState); + } + + /** + * @inheritDoc + */ + get routerState(): RouterState { + return this._routerState; + } + + /** + * @inheritDoc + */ + get status(): StatusType { + return this.getComponentState().status; + } + + /** + * @inheritDoc + */ + get routePath(): string { + return ( + this.getComponentState().routePath || + this.routerState.state.routeSegments.routePath + ); + } + + /** + * @inheritDoc + */ + getComponentState(): ComponentState { + return this._componentState; + } + + /** + * @inheritDoc + */ + withSearch(search: string) { + this.updateComponentState({ + search + }); + + return this; + } + + /** + * @inheritDoc + */ + withPage(page: number, size: number) { + this.updateComponentState({ + page: RequestPageImpl.of(page, size) + }); + + return this; + } + + /** + * @inheritDoc + */ + withFilter(filterPredicates: ApiPredicate[]) { + this.updateComponentState({ + filter: RequestFilterImpl.of(...filterPredicates) + }); + + return this; + } + + /** + * @inheritDoc + */ + withRequestParam(key: string, value: any) { + this.getComponentState().requestParams.set(key, value); + + return this; + } + + /** + * @inheritDoc + */ + withData(key: string, data: any) { + this.getComponentState().data.set(key, data); + + return this; + } + + /** + * @inheritDoc + */ + withTask(taskIdentifier: string) { + this.updateComponentState({ task: taskIdentifier }); + + return this; + } + + /** + * @inheritDoc + */ + clearTask() { + this.updateComponentState({ task: null }); + + return this; + } + + /** + * @inheritDoc + */ + getTask(): string { + return extractTaskFromIdentifier(this.getComponentState().task); + } + + /** + * @inheritDoc + */ + getTaskUniqueIdentifier(): string { + return this.getComponentState().task; + } + + /** + * @inheritDoc + */ + withError(error: Error) { + this.updateComponentState({ error }); + + return this; + } + + /** + * @inheritDoc + */ + clearError() { + this.updateComponentState({ error: null }); + + return this; + } + + /** + * @inheritDoc + */ + withUiState(key: string, value: any) { + this.getComponentState().uiState.set(key, value); + + return this; + } + + /** + * @inheritDoc + */ + getUiState(key: string): T { + return this.getComponentState().uiState.get(key) as T; + } + + /** + * @inheritDoc + */ + withStatusIdle() { + this.updateComponentState({ status: IDLE }); + + return this; + } + + /** + * @inheritDoc + */ + withStatusLoading() { + this.updateComponentState({ status: LOADING }); + + return this; + } + + /** + * @inheritDoc + */ + withStatusLoaded() { + this.updateComponentState({ status: LOADED }); + + return this; + } + + /** + * @inheritDoc + */ + withStatusFailed() { + this.updateComponentState({ status: FAILED }); + + return this; + } + + /** + * @inheritDoc + */ + updateComponentState(patchState: Partial) { + this._componentState = ComponentStateImpl.of({ + ...this.getComponentState(), + ...patchState + }); + + return this; + } + + /** + * @inheritDoc + */ + isModified(model: ComponentModel): boolean { + return ComponentModelComparable.of(this).notEqual( + ComponentModelComparable.of(model) + ); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/index.ts index 9409d7dea5..416dc4d587 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/component-state.model.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/component-state.model.spec.ts index 2143716c84..2e794eea13 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/component-state.model.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/component-state.model.spec.ts @@ -1,275 +1,345 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 */ -import { ApiPredicate, ASC, RequestFilterImpl, RequestOrderImpl, RequestPageImpl } from '../../../../common'; +import { + ApiPredicate, + ASC, + RequestFilterImpl, + RequestOrderImpl, + RequestPageImpl +} from '../../../../common'; import { IDLE, LOADED } from './component-status.model'; -import { ComponentState, ComponentStateImpl, LiteralComponentState } from './component-state.model'; +import { + ComponentState, + ComponentStateImpl, + LiteralComponentState +} from './component-state.model'; describe('ComponentStateImpl', () => { - let partialStateMock: Partial; - let stateMock: ComponentStateImpl; - let literalStateMock: LiteralComponentState; - - beforeEach(() => { - const apiPredicate1: ApiPredicate = { sort: ASC, property: 'test.property.10', pattern: 'test.pattern.20' }; - const apiPredicate2: ApiPredicate = { sort: ASC, property: 'test.property.30', pattern: 'test.pattern.40' }; - - const uiState1 = { order: 'ASC' }; - const uiState2 = [1, 2, 3]; - - const data1 = { data: { name: 'aName' } }; - const data2 = { content: { page: { size: 10, page: 2 } } }; - - const dateNowISO = new Date().toISOString(); - - partialStateMock = { - id: 'testId', - status: LOADED, - navigationId: 11, - error: null, - search: 'testSearch', - routePath: 'domain/context/entity/10', - routePathSegments: ['domain/context', 'entity/10'], - page: new RequestPageImpl(5, 10), - order: new RequestOrderImpl(apiPredicate1), - filter: new RequestFilterImpl(apiPredicate2), - requestParams: new Map([ - ['test_param.1', apiPredicate1], - ['test_param.2', apiPredicate2] - ]), - task: `delete_user __ ${ dateNowISO }`, - uiState: new Map([ - ['test_uiState.1', uiState1], - ['test_uiState.2', uiState2] - ]), - data: new Map([ - ['test_data.1', data1], - ['test_data.2', data2] - ]) - }; - - stateMock = new ComponentStateImpl(partialStateMock); - - literalStateMock = { - id: 'testId', - status: LOADED, - navigationId: 11, - error: null, - search: 'testSearch', - routePath: 'domain/context/entity/10', - routePathSegments: ['domain/context', 'entity/10'], - page: { pageNumber: 5, pageSize: 10 }, - order: [apiPredicate1], - filter: [apiPredicate2], - requestParams: { - 'test_param.1': apiPredicate1, - 'test_param.2': apiPredicate2 - }, - task: `delete_user __ ${ dateNowISO }`, - uiState: { - 'test_uiState.1': uiState1, - 'test_uiState.2': uiState2 - }, - data: { - 'test_data.1': data1, - 'test_data.2': data2 - } - }; - }); - - it('should verify instance is created', () => { - // When - const instance = new ComponentStateImpl({}); - - // Then - expect(instance).toBeDefined(); - }); - - it('should verify provided value will be correctly assigned', () => { - // When - const instance = new ComponentStateImpl(partialStateMock); - - // Then - expect(instance.id).toEqual(partialStateMock.id); - expect(instance.status).toEqual(partialStateMock.status); - expect(instance.navigationId).toEqual(partialStateMock.navigationId); - expect(instance.error).toEqual(partialStateMock.error); - expect(instance.search).toEqual(partialStateMock.search); - expect(instance.routePath).toEqual(partialStateMock.routePath); - expect(instance.routePathSegments).toBe(partialStateMock.routePathSegments); - expect(instance.page).toBe(partialStateMock.page); - expect(instance.order).toBe(partialStateMock.order); - expect(instance.filter).toBe(partialStateMock.filter); - expect(instance.requestParams).toBe(partialStateMock.requestParams); - expect(instance.task).toEqual(partialStateMock.task); - expect(instance.uiState).toBe(partialStateMock.uiState); - expect(instance.data).toBe(partialStateMock.data); - }); - - it('should verify will correctly assign default values', () => { - // When - const instance = new ComponentStateImpl({}); - - // Then - expect(instance).toBeDefined(); - expect(instance.id).toBeUndefined(); - expect(instance.status).toEqual(IDLE); - expect(instance.navigationId).toEqual(null); - expect(instance.routePath).toBeUndefined(); - expect(instance.routePathSegments).toEqual([]); - expect(instance.search).toEqual(''); - expect(instance.page).toEqual(RequestPageImpl.empty()); - expect(instance.order).toEqual(RequestOrderImpl.empty()); - expect(instance.filter).toEqual(RequestFilterImpl.empty()); - expect(instance.requestParams).toBeInstanceOf(Map); - expect(instance.error).toEqual(null); - expect(instance.task).toEqual(null); - expect(instance.data).toBeInstanceOf(Map); - expect(instance.uiState).toBeInstanceOf(Map); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const instance = ComponentStateImpl.of(partialStateMock); - - // Then - expect(instance.id).toEqual(partialStateMock.id); - expect(instance.status).toEqual(partialStateMock.status); - expect(instance.navigationId).toEqual(partialStateMock.navigationId); - expect(instance.error).toEqual(partialStateMock.error); - expect(instance.search).toEqual(partialStateMock.search); - expect(instance.routePath).toEqual(partialStateMock.routePath); - expect(instance.routePathSegments).toBe(partialStateMock.routePathSegments); - expect(instance.page).toBe(partialStateMock.page); - expect(instance.order).toBe(partialStateMock.order); - expect(instance.filter).toBe(partialStateMock.filter); - expect(instance.requestParams).toBe(partialStateMock.requestParams); - expect(instance.task).toEqual(partialStateMock.task); - expect(instance.uiState).toBe(partialStateMock.uiState); - expect(instance.data).toBe(partialStateMock.data); - }); - }); - - describe('|fromLiteralComponentState|', () => { - it('should verify will create instance of ComponentStateImpl from LiteralComponentState', () => { - // When - const instance = ComponentStateImpl.fromLiteralComponentState(literalStateMock); - - // Then - expect(instance).toEqual(stateMock); - expect(instance.order.criteria[0]).toBe(stateMock.order.criteria[0]); - expect(instance.filter.criteria[0]).toBe(stateMock.filter.criteria[0]); - expect(instance.requestParams.get('test_param.1')).toBe(stateMock.requestParams.get('test_param.1')); - expect(instance.requestParams.get('test_param.2')).toBe(stateMock.requestParams.get('test_param.2')); - expect(instance.uiState.get('test_uiState.1')).toBe(stateMock.uiState.get('test_uiState.1')); - expect(instance.uiState.get('test_uiState.2')).toBe(stateMock.uiState.get('test_uiState.2')); - expect(instance.data.get('test_data.1')).toBe(stateMock.data.get('test_data.1')); - expect(instance.data.get('test_data.2')).toBe(stateMock.data.get('test_data.2')); - }); - }); - - describe('|cloneDeepLiteral|', () => { - it('should verify will create deep clone from LiteralComponentState', () => { - // When - const instance = ComponentStateImpl.cloneDeepLiteral(literalStateMock); - - // Then - expect(instance).toEqual(literalStateMock); - expect(instance.order[0]).not.toBe(literalStateMock.order[0]); - expect(instance.filter[0]).not.toBe(literalStateMock.filter[0]); - expect(instance.requestParams['test_param.1']).not.toBe(literalStateMock.requestParams['test_param.1']); - expect(instance.requestParams['test_param.2']).not.toBe(literalStateMock.requestParams['test_param.2']); - expect(instance.uiState['test_uiState.1']).not.toBe(literalStateMock.uiState['test_uiState.1']); - expect(instance.uiState['test_uiState.2']).not.toBe(literalStateMock.uiState['test_uiState.2']); - expect(instance.data['test_data.1']).not.toBe(literalStateMock.data['test_data.1']); - expect(instance.data['test_data.2']).not.toBe(literalStateMock.data['test_data.2']); - }); - }); - }); - }); - - describe('Methods::', () => { - describe('|toLiteral|', () => { - it('should verify will create LiteralComponentState', () => { - // When - const instance = stateMock.toLiteral(); - - // Then - expect(instance).toEqual(literalStateMock); - expect(instance.order[0]).toBe(literalStateMock.order[0]); - expect(instance.filter[0]).toBe(literalStateMock.filter[0]); - expect(instance.requestParams['test_param.1']).toBe(literalStateMock.requestParams['test_param.1']); - expect(instance.requestParams['test_param.2']).toBe(literalStateMock.requestParams['test_param.2']); - expect(instance.uiState['test_uiState.1']).toBe(literalStateMock.uiState['test_uiState.1']); - expect(instance.uiState['test_uiState.2']).toBe(literalStateMock.uiState['test_uiState.2']); - expect(instance.data['test_data.1']).toBe(literalStateMock.data['test_data.1']); - expect(instance.data['test_data.2']).toBe(literalStateMock.data['test_data.2']); - }); - }); - - describe('|toLiteralDeepClone|', () => { - it('should verify will create LiteralComponentState deep cloned', () => { - // When - const instance = stateMock.toLiteralDeepClone(); - - // Then - expect(instance).toEqual(literalStateMock); - expect(instance.order[0]).not.toBe(literalStateMock.order[0]); - expect(instance.filter[0]).not.toBe(literalStateMock.filter[0]); - expect(instance.requestParams['test_param.1']).not.toBe(literalStateMock.requestParams['test_param.1']); - expect(instance.requestParams['test_param.2']).not.toBe(literalStateMock.requestParams['test_param.2']); - expect(instance.uiState['test_uiState.1']).not.toBe(literalStateMock.uiState['test_uiState.1']); - expect(instance.uiState['test_uiState.2']).not.toBe(literalStateMock.uiState['test_uiState.2']); - expect(instance.data['test_data.1']).not.toBe(literalStateMock.data['test_data.1']); - expect(instance.data['test_data.2']).not.toBe(literalStateMock.data['test_data.2']); - }); - }); - - describe('|copy|', () => { - it('should verify will create copy from ComponentStateImpl', () => { - // When - const instance = stateMock.copy(); - - // Then - expect(instance).not.toBe(stateMock); - expect(instance).toEqual(stateMock); - }); - - it('should verify will merge provided State on top of original and return instance', () => { - // Given - const partialState: Partial = { - id: 'newId', - status: LOADED, - search: 'randomSearch', - routePath: 'domain/context/entity/20', - routePathSegments: ['domain/context', 'entity/20'], - data: new Map(), - uiState: new Map() - }; - - // When - const instance = stateMock.copy(partialState); - - // Then - expect(instance).not.toBe(stateMock); - expect(instance).not.toEqual(stateMock); - expect(instance.id).toEqual(partialState.id); - expect(instance.status).toEqual(partialState.status); - expect(instance.search).toEqual(partialState.search); - expect(instance.routePath).toEqual(partialState.routePath); - expect(instance.routePathSegments).toBe(partialState.routePathSegments); - expect(instance.data).toBe(partialState.data); - expect(instance.uiState).toBe(partialState.uiState); - }); - }); - }); + let partialStateMock: Partial; + let stateMock: ComponentStateImpl; + let literalStateMock: LiteralComponentState; + + beforeEach(() => { + const apiPredicate1: ApiPredicate = { + sort: ASC, + property: 'test.property.10', + pattern: 'test.pattern.20' + }; + const apiPredicate2: ApiPredicate = { + sort: ASC, + property: 'test.property.30', + pattern: 'test.pattern.40' + }; + + const uiState1 = { order: 'ASC' }; + const uiState2 = [1, 2, 3]; + + const data1 = { data: { name: 'aName' } }; + const data2 = { content: { page: { size: 10, page: 2 } } }; + + const dateNowISO = new Date().toISOString(); + + partialStateMock = { + id: 'testId', + status: LOADED, + navigationId: 11, + error: null, + search: 'testSearch', + routePath: 'domain/context/entity/10', + routePathSegments: ['domain/context', 'entity/10'], + page: new RequestPageImpl(5, 10), + order: new RequestOrderImpl(apiPredicate1), + filter: new RequestFilterImpl(apiPredicate2), + requestParams: new Map([ + ['test_param.1', apiPredicate1], + ['test_param.2', apiPredicate2] + ]), + task: `delete_user __ ${dateNowISO}`, + uiState: new Map([ + ['test_uiState.1', uiState1], + ['test_uiState.2', uiState2] + ]), + data: new Map([ + ['test_data.1', data1], + ['test_data.2', data2] + ]) + }; + + stateMock = new ComponentStateImpl(partialStateMock); + + literalStateMock = { + id: 'testId', + status: LOADED, + navigationId: 11, + error: null, + search: 'testSearch', + routePath: 'domain/context/entity/10', + routePathSegments: ['domain/context', 'entity/10'], + page: { pageNumber: 5, pageSize: 10 }, + order: [apiPredicate1], + filter: [apiPredicate2], + requestParams: { + 'test_param.1': apiPredicate1, + 'test_param.2': apiPredicate2 + }, + task: `delete_user __ ${dateNowISO}`, + uiState: { + 'test_uiState.1': uiState1, + 'test_uiState.2': uiState2 + }, + data: { + 'test_data.1': data1, + 'test_data.2': data2 + } + }; + }); + + it('should verify instance is created', () => { + // When + const instance = new ComponentStateImpl({}); + + // Then + expect(instance).toBeDefined(); + }); + + it('should verify provided value will be correctly assigned', () => { + // When + const instance = new ComponentStateImpl(partialStateMock); + + // Then + expect(instance.id).toEqual(partialStateMock.id); + expect(instance.status).toEqual(partialStateMock.status); + expect(instance.navigationId).toEqual(partialStateMock.navigationId); + expect(instance.error).toEqual(partialStateMock.error); + expect(instance.search).toEqual(partialStateMock.search); + expect(instance.routePath).toEqual(partialStateMock.routePath); + expect(instance.routePathSegments).toBe(partialStateMock.routePathSegments); + expect(instance.page).toBe(partialStateMock.page); + expect(instance.order).toBe(partialStateMock.order); + expect(instance.filter).toBe(partialStateMock.filter); + expect(instance.requestParams).toBe(partialStateMock.requestParams); + expect(instance.task).toEqual(partialStateMock.task); + expect(instance.uiState).toBe(partialStateMock.uiState); + expect(instance.data).toBe(partialStateMock.data); + }); + + it('should verify will correctly assign default values', () => { + // When + const instance = new ComponentStateImpl({}); + + // Then + expect(instance).toBeDefined(); + expect(instance.id).toBeUndefined(); + expect(instance.status).toEqual(IDLE); + expect(instance.navigationId).toEqual(null); + expect(instance.routePath).toBeUndefined(); + expect(instance.routePathSegments).toEqual([]); + expect(instance.search).toEqual(''); + expect(instance.page).toEqual(RequestPageImpl.empty()); + expect(instance.order).toEqual(RequestOrderImpl.empty()); + expect(instance.filter).toEqual(RequestFilterImpl.empty()); + expect(instance.requestParams).toBeInstanceOf(Map); + expect(instance.error).toEqual(null); + expect(instance.task).toEqual(null); + expect(instance.data).toBeInstanceOf(Map); + expect(instance.uiState).toBeInstanceOf(Map); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const instance = ComponentStateImpl.of(partialStateMock); + + // Then + expect(instance.id).toEqual(partialStateMock.id); + expect(instance.status).toEqual(partialStateMock.status); + expect(instance.navigationId).toEqual(partialStateMock.navigationId); + expect(instance.error).toEqual(partialStateMock.error); + expect(instance.search).toEqual(partialStateMock.search); + expect(instance.routePath).toEqual(partialStateMock.routePath); + expect(instance.routePathSegments).toBe( + partialStateMock.routePathSegments + ); + expect(instance.page).toBe(partialStateMock.page); + expect(instance.order).toBe(partialStateMock.order); + expect(instance.filter).toBe(partialStateMock.filter); + expect(instance.requestParams).toBe(partialStateMock.requestParams); + expect(instance.task).toEqual(partialStateMock.task); + expect(instance.uiState).toBe(partialStateMock.uiState); + expect(instance.data).toBe(partialStateMock.data); + }); + }); + + describe('|fromLiteralComponentState|', () => { + it('should verify will create instance of ComponentStateImpl from LiteralComponentState', () => { + // When + const instance = + ComponentStateImpl.fromLiteralComponentState(literalStateMock); + + // Then + expect(instance).toEqual(stateMock); + expect(instance.order.criteria[0]).toBe(stateMock.order.criteria[0]); + expect(instance.filter.criteria[0]).toBe( + stateMock.filter.criteria[0] + ); + expect(instance.requestParams.get('test_param.1')).toBe( + stateMock.requestParams.get('test_param.1') + ); + expect(instance.requestParams.get('test_param.2')).toBe( + stateMock.requestParams.get('test_param.2') + ); + expect(instance.uiState.get('test_uiState.1')).toBe( + stateMock.uiState.get('test_uiState.1') + ); + expect(instance.uiState.get('test_uiState.2')).toBe( + stateMock.uiState.get('test_uiState.2') + ); + expect(instance.data.get('test_data.1')).toBe( + stateMock.data.get('test_data.1') + ); + expect(instance.data.get('test_data.2')).toBe( + stateMock.data.get('test_data.2') + ); + }); + }); + + describe('|cloneDeepLiteral|', () => { + it('should verify will create deep clone from LiteralComponentState', () => { + // When + const instance = + ComponentStateImpl.cloneDeepLiteral(literalStateMock); + + // Then + expect(instance).toEqual(literalStateMock); + expect(instance.order[0]).not.toBe(literalStateMock.order[0]); + expect(instance.filter[0]).not.toBe(literalStateMock.filter[0]); + expect(instance.requestParams['test_param.1']).not.toBe( + literalStateMock.requestParams['test_param.1'] + ); + expect(instance.requestParams['test_param.2']).not.toBe( + literalStateMock.requestParams['test_param.2'] + ); + expect(instance.uiState['test_uiState.1']).not.toBe( + literalStateMock.uiState['test_uiState.1'] + ); + expect(instance.uiState['test_uiState.2']).not.toBe( + literalStateMock.uiState['test_uiState.2'] + ); + expect(instance.data['test_data.1']).not.toBe( + literalStateMock.data['test_data.1'] + ); + expect(instance.data['test_data.2']).not.toBe( + literalStateMock.data['test_data.2'] + ); + }); + }); + }); + }); + + describe('Methods::', () => { + describe('|toLiteral|', () => { + it('should verify will create LiteralComponentState', () => { + // When + const instance = stateMock.toLiteral(); + + // Then + expect(instance).toEqual(literalStateMock); + expect(instance.order[0]).toBe(literalStateMock.order[0]); + expect(instance.filter[0]).toBe(literalStateMock.filter[0]); + expect(instance.requestParams['test_param.1']).toBe( + literalStateMock.requestParams['test_param.1'] + ); + expect(instance.requestParams['test_param.2']).toBe( + literalStateMock.requestParams['test_param.2'] + ); + expect(instance.uiState['test_uiState.1']).toBe( + literalStateMock.uiState['test_uiState.1'] + ); + expect(instance.uiState['test_uiState.2']).toBe( + literalStateMock.uiState['test_uiState.2'] + ); + expect(instance.data['test_data.1']).toBe( + literalStateMock.data['test_data.1'] + ); + expect(instance.data['test_data.2']).toBe( + literalStateMock.data['test_data.2'] + ); + }); + }); + + describe('|toLiteralDeepClone|', () => { + it('should verify will create LiteralComponentState deep cloned', () => { + // When + const instance = stateMock.toLiteralDeepClone(); + + // Then + expect(instance).toEqual(literalStateMock); + expect(instance.order[0]).not.toBe(literalStateMock.order[0]); + expect(instance.filter[0]).not.toBe(literalStateMock.filter[0]); + expect(instance.requestParams['test_param.1']).not.toBe( + literalStateMock.requestParams['test_param.1'] + ); + expect(instance.requestParams['test_param.2']).not.toBe( + literalStateMock.requestParams['test_param.2'] + ); + expect(instance.uiState['test_uiState.1']).not.toBe( + literalStateMock.uiState['test_uiState.1'] + ); + expect(instance.uiState['test_uiState.2']).not.toBe( + literalStateMock.uiState['test_uiState.2'] + ); + expect(instance.data['test_data.1']).not.toBe( + literalStateMock.data['test_data.1'] + ); + expect(instance.data['test_data.2']).not.toBe( + literalStateMock.data['test_data.2'] + ); + }); + }); + + describe('|copy|', () => { + it('should verify will create copy from ComponentStateImpl', () => { + // When + const instance = stateMock.copy(); + + // Then + expect(instance).not.toBe(stateMock); + expect(instance).toEqual(stateMock); + }); + + it('should verify will merge provided State on top of original and return instance', () => { + // Given + const partialState: Partial = { + id: 'newId', + status: LOADED, + search: 'randomSearch', + routePath: 'domain/context/entity/20', + routePathSegments: ['domain/context', 'entity/20'], + data: new Map(), + uiState: new Map() + }; + + // When + const instance = stateMock.copy(partialState); + + // Then + expect(instance).not.toBe(stateMock); + expect(instance).not.toEqual(stateMock); + expect(instance.id).toEqual(partialState.id); + expect(instance.status).toEqual(partialState.status); + expect(instance.search).toEqual(partialState.search); + expect(instance.routePath).toEqual(partialState.routePath); + expect(instance.routePathSegments).toBe(partialState.routePathSegments); + expect(instance.data).toBe(partialState.data); + expect(instance.uiState).toBe(partialState.uiState); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/component-state.model.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/component-state.model.ts index 44c9652104..aa5c648235 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/component-state.model.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/component-state.model.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -10,16 +8,16 @@ import { CollectionsUtil } from '../../../../utils'; import { - Copy, - Literal, - LiteralApiPredicates, - LiteralRequestPage, - RequestFilter, - RequestFilterImpl, - RequestOrder, - RequestOrderImpl, - RequestPage, - RequestPageImpl + Copy, + Literal, + LiteralApiPredicates, + LiteralRequestPage, + RequestFilter, + RequestFilterImpl, + RequestOrder, + RequestOrderImpl, + RequestPage, + RequestPageImpl } from '../../../../common'; import { IDLE, StatusType } from './component-status.model'; @@ -30,409 +28,417 @@ import { IDLE, StatusType } from './component-status.model'; * */ export interface LiteralComponentState { - /** - * ** Identifier for Component State. - */ - readonly id: string; - - /** - * ** Status for Component State. - */ - readonly status: StatusType; - - /** - * ** Component State Data. - *

    - * - Free format Literal Object. - *

    - */ - readonly data?: { [key: string]: any }; - - /** - * ** Route path for current State. - */ - readonly routePath?: string; - - /** - * ** Route path segments for current State. - */ - readonly routePathSegments?: string[]; - - /** - * ** Search query for Http requests. - */ - readonly search?: string; - - /** - * ** Page for Http requests. - */ - readonly page?: LiteralRequestPage; - - /** - * ** Order for Http requests. - */ - readonly order?: LiteralApiPredicates; - - /** - * ** Filter for Http requests. - */ - readonly filter?: LiteralApiPredicates; - - /** - * ** Order for Http requests. - */ - readonly requestParams?: { [key: string]: any }; - - /** - * ** Task is property that give bi-directional refinement context. - * - * - Gives context to Effect through Action. - * - Gives context to Component through ComponentState (ComponentModel). - */ - readonly task?: string; - - /** - * ** Router NavigationId bound to this Component State. - */ - readonly navigationId?: number; - - /** - * ** Error that could happen in Stream manipulation down to the Components. - *

    - * - Ideal for storing Http errors, so Component could easily leverage that knowledge and show info for User. - *

    - */ - readonly error?: Error; - - /** - * ** Component State UiState, that holds all information for UiElements. - *

    - * - Free format Literal Object where key identifier could be (Component/Html Element) name/id/class etc... - *

    - */ - readonly uiState?: { [key: string]: any }; + /** + * ** Identifier for Component State. + */ + readonly id: string; + + /** + * ** Status for Component State. + */ + readonly status: StatusType; + + /** + * ** Component State Data. + *

    + * - Free format Literal Object. + *

    + */ + readonly data?: { [key: string]: any }; + + /** + * ** Route path for current State. + */ + readonly routePath?: string; + + /** + * ** Route path segments for current State. + */ + readonly routePathSegments?: string[]; + + /** + * ** Search query for Http requests. + */ + readonly search?: string; + + /** + * ** Page for Http requests. + */ + readonly page?: LiteralRequestPage; + + /** + * ** Order for Http requests. + */ + readonly order?: LiteralApiPredicates; + + /** + * ** Filter for Http requests. + */ + readonly filter?: LiteralApiPredicates; + + /** + * ** Order for Http requests. + */ + readonly requestParams?: { [key: string]: any }; + + /** + * ** Task is property that give bi-directional refinement context. + * + * - Gives context to Effect through Action. + * - Gives context to Component through ComponentState (ComponentModel). + */ + readonly task?: string; + + /** + * ** Router NavigationId bound to this Component State. + */ + readonly navigationId?: number; + + /** + * ** Error that could happen in Stream manipulation down to the Components. + *

    + * - Ideal for storing Http errors, so Component could easily leverage that knowledge and show info for User. + *

    + */ + readonly error?: Error; + + /** + * ** Component State UiState, that holds all information for UiElements. + *

    + * - Free format Literal Object where key identifier could be (Component/Html Element) name/id/class etc... + *

    + */ + readonly uiState?: { [key: string]: any }; } -export interface ComponentState extends Literal, Copy { - /** - * ** Identifier for Component State. - */ - readonly id: string; - - /** - * ** Status for Component State. - */ - readonly status: StatusType; - - /** - * ** Component State Data. - *

    - * - Free format Map. - *

    - */ - readonly data?: Map; - - /** - * ** Route path for current State. - */ - readonly routePath?: string; - - /** - * ** Route Path Segments for current State. - */ - readonly routePathSegments?: string[]; - - /** - * ** Search query for Http requests. - */ - readonly search?: string; - - /** - * ** Page for Http requests. - */ - readonly page?: RequestPage; - - /** - * ** Order for Http requests. - */ - readonly order?: RequestOrder; - - /** - * ** Filter for Http requests. - */ - readonly filter?: RequestFilter; - - /** - * ** Map with different parameters for Http requests. - */ - readonly requestParams?: Map; - - /** - * ** Task is property that give bi-directional refinement context. - * - * - Gives context to Effect through Action. - * - Gives context to Component through ComponentState (ComponentModel). - */ - readonly task?: string; - - /** - * ** Router NavigationId bound to this Component State. - */ - readonly navigationId?: number; - - /** - * ** Error that could happen in Stream manipulation down to the Components. - *

    - * - Ideal for storing Http errors, so Component could easily leverage that knowledge and show info for User. - *

    - */ - readonly error?: Error; - - /** - * ** Component State UiState, that holds all information for UiElements. - *

    - * - Free format Map where key identifier could be (Component/Html Element) name/id/class etc... - *

    - */ - readonly uiState?: Map; - - /** - * @inheritDoc - */ - toLiteral(): LiteralComponentState; - - /** - * @inheritDoc - */ - toLiteralDeepClone(): LiteralComponentState; - - /** - * @inheritDoc - */ - copy(state?: Partial): ComponentState; +export interface ComponentState + extends Literal, + Copy { + /** + * ** Identifier for Component State. + */ + readonly id: string; + + /** + * ** Status for Component State. + */ + readonly status: StatusType; + + /** + * ** Component State Data. + *

    + * - Free format Map. + *

    + */ + readonly data?: Map; + + /** + * ** Route path for current State. + */ + readonly routePath?: string; + + /** + * ** Route Path Segments for current State. + */ + readonly routePathSegments?: string[]; + + /** + * ** Search query for Http requests. + */ + readonly search?: string; + + /** + * ** Page for Http requests. + */ + readonly page?: RequestPage; + + /** + * ** Order for Http requests. + */ + readonly order?: RequestOrder; + + /** + * ** Filter for Http requests. + */ + readonly filter?: RequestFilter; + + /** + * ** Map with different parameters for Http requests. + */ + readonly requestParams?: Map; + + /** + * ** Task is property that give bi-directional refinement context. + * + * - Gives context to Effect through Action. + * - Gives context to Component through ComponentState (ComponentModel). + */ + readonly task?: string; + + /** + * ** Router NavigationId bound to this Component State. + */ + readonly navigationId?: number; + + /** + * ** Error that could happen in Stream manipulation down to the Components. + *

    + * - Ideal for storing Http errors, so Component could easily leverage that knowledge and show info for User. + *

    + */ + readonly error?: Error; + + /** + * ** Component State UiState, that holds all information for UiElements. + *

    + * - Free format Map where key identifier could be (Component/Html Element) name/id/class etc... + *

    + */ + readonly uiState?: Map; + + /** + * @inheritDoc + */ + toLiteral(): LiteralComponentState; + + /** + * @inheritDoc + */ + toLiteralDeepClone(): LiteralComponentState; + + /** + * @inheritDoc + */ + copy(state?: Partial): ComponentState; } /** * ** ComponentState implementation will all methods and other utilities. */ export class ComponentStateImpl implements ComponentState { - /** - * @inheritDoc - */ - readonly id: string; - - /** - * @inheritDoc - */ - readonly status: StatusType; - - /** - * @inheritDoc - */ - readonly data: Map; - - /** - * @inheritDoc - */ - readonly routePath: string; - - /** - * @inheritDoc - */ - readonly routePathSegments: string[]; - - /** - * @inheritDoc - */ - readonly search: string; - - /** - * @inheritDoc - */ - readonly page: RequestPageImpl; - - /** - * @inheritDoc - */ - readonly order: RequestOrderImpl; - - /** - * @inheritDoc - */ - readonly filter: RequestFilterImpl; - - /** - * @inheritDoc - */ - readonly requestParams: Map; - - /** - * @inheritDoc - */ - readonly task: string; - - /** - * @inheritDoc - */ - readonly navigationId: number; - - /** - * @inheritDoc - */ - readonly error: Error; - - /** - * @inheritDoc - */ - readonly uiState: Map; - - /** - * ** Constructor. - * - *

    - * Important: - *

    - *

    - * If you add new Property in {@link LiteralComponentState}/{@link ComponentState} - *

      - *
    • - * Implement field in {@link ComponentStateImpl} and handle null/undefined, assign defaults (required for Collections). - *
      • - *
    • - * Copy/Clone process have to be handled manually (for performance gain) in methods: - * - * {@link ComponentStateImpl.fromLiteralComponentState} - * {@link ComponentStateImpl.cloneDeepLiteral} - * {@link ComponentStateImpl.toLiteral} - *
      • - *
    - *

    - */ - constructor(stateModelProp: Partial) { - const stateModel: Partial = CollectionsUtil.isDefined(stateModelProp) - ? stateModelProp - : {}; - - this.id = stateModel.id; - this.status = stateModel.status ?? IDLE; - this.navigationId = stateModel.navigationId ?? null; - this.routePath = stateModel.routePath; - this.routePathSegments = stateModel.routePathSegments ?? []; - this.search = stateModel.search ?? ''; - this.page = stateModel.page ?? RequestPageImpl.empty(); - this.order = stateModel.order ?? RequestOrderImpl.empty(); - this.filter = stateModel.filter ?? RequestFilterImpl.empty(); - this.requestParams = stateModel.requestParams ?? new Map(); - this.task = stateModel.task ?? null; - this.error = stateModel.error ?? null; - this.data = stateModel.data ?? new Map(); - this.uiState = stateModel.uiState ?? new Map(); - } - - /** - * ** Factory method. - */ - static of(stateModel: Partial): ComponentStateImpl { - return new ComponentStateImpl(stateModel); - } - - /** - * ** Convert provided {@link LiteralComponentState} into instance of {@link ComponentStateImpl}. - *

    - * Every literals could be transformed to their original Collection format. - *

      - *
    • - * Object literals could be transformed to Map/WeakMap/Set depends of the needs. - *
      • - *
    • - * Array is keep as it is. - *
      • - *
    - *

    - * - * @see CollectionsUtil.transformObjectToMap - * @see CollectionsUtil.transformMapToObject - */ - static fromLiteralComponentState(literalStateModel: LiteralComponentState): ComponentStateImpl { - return ComponentStateImpl.of({ - ...literalStateModel, - page: RequestPageImpl.fromLiteral(literalStateModel.page), - order: RequestOrderImpl.fromLiteral(literalStateModel.order), - filter: RequestFilterImpl.fromLiteral(literalStateModel.filter), - requestParams: CollectionsUtil.transformObjectToMap(literalStateModel.requestParams), - data: CollectionsUtil.transformObjectToMap(literalStateModel.data), - uiState: CollectionsUtil.transformObjectToMap(literalStateModel.uiState) - }); - } - - /** - * ** Make deep clone from Literal Component State. - */ - static cloneDeepLiteral(literalStateModel: LiteralComponentState): LiteralComponentState { - return { - id: literalStateModel.id, - status: literalStateModel.status, - data: CollectionsUtil.cloneDeep(literalStateModel.data), - routePath: literalStateModel.routePath, - routePathSegments: [...literalStateModel.routePathSegments], - search: literalStateModel.search, - page: CollectionsUtil.cloneDeep(literalStateModel.page), - order: CollectionsUtil.cloneDeep(literalStateModel.order), - filter: CollectionsUtil.cloneDeep(literalStateModel.filter), - requestParams: CollectionsUtil.cloneDeep(literalStateModel.requestParams), - task: literalStateModel.task, - navigationId: literalStateModel.navigationId, - error: literalStateModel.error, - uiState: CollectionsUtil.cloneDeep(literalStateModel.uiState) - }; - } - - /** - *

    - * Every Collection should be transformed to format of JSON supported literals, ready for LocalStorage/SessionStorage persist. - *

      - *
    • - * Map/WeakMap/Set have to be transform to Object literal. - *
      • - *
    • - * Array is keep as it is. - *
      • - *
    - *

    - * - * @see CollectionsUtil.transformObjectToMap - * @see CollectionsUtil.transformMapToObject - * - * @inheritDoc - */ - toLiteral(): LiteralComponentState { - return { - ...this, - page: this.page.toLiteral(), - order: this.order.toLiteral(), - filter: this.filter.toLiteral(), - requestParams: CollectionsUtil.transformMapToObject(this.requestParams), - data: CollectionsUtil.transformMapToObject(this.data), - uiState: CollectionsUtil.transformMapToObject(this.uiState) - }; - } - - /** - * @inheritDoc - */ - toLiteralDeepClone(): LiteralComponentState { - return ComponentStateImpl.cloneDeepLiteral( - this.toLiteral() - ); - } - - /** - * @inheritDoc - */ - copy(state: Partial = {}): ComponentStateImpl { - return ComponentStateImpl.of({ - ...this, - ...state - }); - } + /** + * @inheritDoc + */ + readonly id: string; + + /** + * @inheritDoc + */ + readonly status: StatusType; + + /** + * @inheritDoc + */ + readonly data: Map; + + /** + * @inheritDoc + */ + readonly routePath: string; + + /** + * @inheritDoc + */ + readonly routePathSegments: string[]; + + /** + * @inheritDoc + */ + readonly search: string; + + /** + * @inheritDoc + */ + readonly page: RequestPageImpl; + + /** + * @inheritDoc + */ + readonly order: RequestOrderImpl; + + /** + * @inheritDoc + */ + readonly filter: RequestFilterImpl; + + /** + * @inheritDoc + */ + readonly requestParams: Map; + + /** + * @inheritDoc + */ + readonly task: string; + + /** + * @inheritDoc + */ + readonly navigationId: number; + + /** + * @inheritDoc + */ + readonly error: Error; + + /** + * @inheritDoc + */ + readonly uiState: Map; + + /** + * ** Constructor. + * + *

    + * Important: + *

    + *

    + * If you add new Property in {@link LiteralComponentState}/{@link ComponentState} + *

      + *
    • + * Implement field in {@link ComponentStateImpl} and handle null/undefined, assign defaults (required for Collections). + *
      • + *
    • + * Copy/Clone process have to be handled manually (for performance gain) in methods: + * + * {@link ComponentStateImpl.fromLiteralComponentState} + * {@link ComponentStateImpl.cloneDeepLiteral} + * {@link ComponentStateImpl.toLiteral} + *
      • + *
    + *

    + */ + constructor(stateModelProp: Partial) { + const stateModel: Partial = CollectionsUtil.isDefined( + stateModelProp + ) + ? stateModelProp + : {}; + + this.id = stateModel.id; + this.status = stateModel.status ?? IDLE; + this.navigationId = stateModel.navigationId ?? null; + this.routePath = stateModel.routePath; + this.routePathSegments = stateModel.routePathSegments ?? []; + this.search = stateModel.search ?? ''; + this.page = stateModel.page ?? RequestPageImpl.empty(); + this.order = stateModel.order ?? RequestOrderImpl.empty(); + this.filter = stateModel.filter ?? RequestFilterImpl.empty(); + this.requestParams = stateModel.requestParams ?? new Map(); + this.task = stateModel.task ?? null; + this.error = stateModel.error ?? null; + this.data = stateModel.data ?? new Map(); + this.uiState = stateModel.uiState ?? new Map(); + } + + /** + * ** Factory method. + */ + static of(stateModel: Partial): ComponentStateImpl { + return new ComponentStateImpl(stateModel); + } + + /** + * ** Convert provided {@link LiteralComponentState} into instance of {@link ComponentStateImpl}. + *

    + * Every literals could be transformed to their original Collection format. + *

      + *
    • + * Object literals could be transformed to Map/WeakMap/Set depends of the needs. + *
      • + *
    • + * Array is keep as it is. + *
      • + *
    + *

    + * + * @see CollectionsUtil.transformObjectToMap + * @see CollectionsUtil.transformMapToObject + */ + static fromLiteralComponentState( + literalStateModel: LiteralComponentState + ): ComponentStateImpl { + return ComponentStateImpl.of({ + ...literalStateModel, + page: RequestPageImpl.fromLiteral(literalStateModel.page), + order: RequestOrderImpl.fromLiteral(literalStateModel.order), + filter: RequestFilterImpl.fromLiteral(literalStateModel.filter), + requestParams: CollectionsUtil.transformObjectToMap( + literalStateModel.requestParams + ), + data: CollectionsUtil.transformObjectToMap(literalStateModel.data), + uiState: CollectionsUtil.transformObjectToMap(literalStateModel.uiState) + }); + } + + /** + * ** Make deep clone from Literal Component State. + */ + static cloneDeepLiteral( + literalStateModel: LiteralComponentState + ): LiteralComponentState { + return { + id: literalStateModel.id, + status: literalStateModel.status, + data: CollectionsUtil.cloneDeep(literalStateModel.data), + routePath: literalStateModel.routePath, + routePathSegments: [...literalStateModel.routePathSegments], + search: literalStateModel.search, + page: CollectionsUtil.cloneDeep(literalStateModel.page), + order: CollectionsUtil.cloneDeep(literalStateModel.order), + filter: CollectionsUtil.cloneDeep(literalStateModel.filter), + requestParams: CollectionsUtil.cloneDeep(literalStateModel.requestParams), + task: literalStateModel.task, + navigationId: literalStateModel.navigationId, + error: literalStateModel.error, + uiState: CollectionsUtil.cloneDeep(literalStateModel.uiState) + }; + } + + /** + *

    + * Every Collection should be transformed to format of JSON supported literals, ready for LocalStorage/SessionStorage persist. + *

      + *
    • + * Map/WeakMap/Set have to be transform to Object literal. + *
      • + *
    • + * Array is keep as it is. + *
      • + *
    + *

    + * + * @see CollectionsUtil.transformObjectToMap + * @see CollectionsUtil.transformMapToObject + * + * @inheritDoc + */ + toLiteral(): LiteralComponentState { + return { + ...this, + page: this.page.toLiteral(), + order: this.order.toLiteral(), + filter: this.filter.toLiteral(), + requestParams: CollectionsUtil.transformMapToObject(this.requestParams), + data: CollectionsUtil.transformMapToObject(this.data), + uiState: CollectionsUtil.transformMapToObject(this.uiState) + }; + } + + /** + * @inheritDoc + */ + toLiteralDeepClone(): LiteralComponentState { + return ComponentStateImpl.cloneDeepLiteral(this.toLiteral()); + } + + /** + * @inheritDoc + */ + copy(state: Partial = {}): ComponentStateImpl { + return ComponentStateImpl.of({ + ...this, + ...state + }); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/component-status.model.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/component-status.model.ts index ccd24bb50b..e6d4d1e47a 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/component-status.model.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/component-status.model.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -35,4 +33,9 @@ export const FAILED = 'Failed'; /** * ** Status types. */ -export type StatusType = typeof INITIALIZED | typeof IDLE | typeof LOADING | typeof LOADED | typeof FAILED; +export type StatusType = + | typeof INITIALIZED + | typeof IDLE + | typeof LOADING + | typeof LOADED + | typeof FAILED; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/components-state.model.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/components-state.model.spec.ts index 226e6822c2..c8426feb7f 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/components-state.model.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/components-state.model.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -11,301 +9,363 @@ import { CollectionsUtil } from '../../../../utils'; import { FAILED, IDLE, LOADED, LOADING } from './component-status.model'; -import { ComponentState, ComponentStateImpl, LiteralComponentState } from './component-state.model'; +import { + ComponentState, + ComponentStateImpl, + LiteralComponentState +} from './component-state.model'; -import { ComponentsStateHelper, LiteralComponentsState } from './components-state.model'; +import { + ComponentsStateHelper, + LiteralComponentsState +} from './components-state.model'; describe('ComponentsStateHelper', () => { - it('should verify instance is created', () => { - // When - const instance = new ComponentsStateHelper(); - - // Then - expect(instance).toBeDefined(); - }); - - describe('Methods::', () => { - let literalComponentsState: LiteralComponentsState; - let helper: ComponentsStateHelper; - let componentState1: ComponentState; - let componentState2: ComponentState; - let componentState3: ComponentState; - let componentState4: ComponentState; - - beforeEach(() => { - componentState1 = ComponentStateImpl.of({ id: 'component1', status: LOADED }); - componentState2 = ComponentStateImpl.of({ id: 'component2', status: IDLE }); - componentState3 = ComponentStateImpl.of({ id: 'component3', status: FAILED }); - componentState4 = ComponentStateImpl.of({ id: 'component4', status: IDLE }); - - literalComponentsState = createComponentsLiteralState( - componentState1, - componentState2, - componentState3, - componentState4 - ); - - helper = new ComponentsStateHelper(); - helper.setState(literalComponentsState); - }); - - describe('|getState|', () => { - it('should verify will return literalComponentState', () => { - // When - const state = helper.getState(); - - // Then - expect(state).toBeDefined(); - expect(state).toEqual(literalComponentsState); - expect(state.components).not.toBe(literalComponentsState.components); - expect(state.routePathSegments).not.toBe(literalComponentsState.routePathSegments); - }); - }); - - describe('|getLiteralComponentState|', () => { - it('should verify will return LiteralComponentState', () => { - // When - const state = helper.getLiteralComponentState('component3', ['test_domain/context', 'test_entity/10']); - - // Then - expect(state).toBeDefined(); - expect(state).toEqual(literalComponentsState - .routePathSegments['test_domain/context'] - .routePathSegments['test_entity/10'] - .components['component3']); - }); - - it('should verify will return null if there is no such state', () => { - // When - const state = helper.getLiteralComponentState('component10', ['test_domain/context', 'test_entity/10']); - - // Then - expect(state).toEqual(null); - }); - - it('should verify will return null if there is no such routePathSegments', () => { - // When - const state = helper.getLiteralComponentState('component3', ['test_domain/context', 'entity/15']); - - // Then - expect(state).toEqual(null); - }); - }); - - describe('|getComponentState|', () => { - it('should verify will return ComponentState', () => { - // When - const state = helper.getComponentState('component2', ['test_domain/context', 'test_entity/18']); - - // Then - expect(state).toBeDefined(); - expect(state).toEqual(componentState2.copy({ - routePath: 'domain/context/entity/18', - routePathSegments: ['test_domain/context', 'test_entity/18'] - })); - expect(state.routePathSegments).not.toBe(componentState2.routePathSegments); - expect(state.data).not.toBe(componentState2.data); - expect(state.uiState).not.toBe(componentState2.uiState); - }); - - it('should verify will return null if there is no such state', () => { - // When - const state = helper.getComponentState('component4', ['test_domain/context']); - - // Then - expect(state).toEqual(null); - }); - - it('should verify will return null if there is no such routePathSegments', () => { - // When - const state = helper.getLiteralComponentState('component2', ['domain/explore', 'test_entity/10']); - - // Then - expect(state).toEqual(null); - }); - }); - - describe('|getAllComponentState|', () => { - it('should verify will return Array of all ComponentState in given routePathSegments', () => { - // When - const states = helper.getAllComponentState(['test_domain/context', 'test_entity/10']); - - // Then - expect(states.length).toEqual(8); - expect(states).toEqual([ - componentState1, - componentState3, - componentState2.copy({ - routePath: 'test_domain/context', - routePathSegments: ['test_domain/context'] - }), - componentState3.copy({ - routePath: 'test_domain/context', - routePathSegments: ['test_domain/context'] - }), - componentState2.copy({ - routePath: 'domain/context/entity/10', - routePathSegments: ['test_domain/context', 'test_entity/10'] - }), - componentState4.copy({ - routePath: 'domain/context/entity/10', - routePathSegments: ['test_domain/context', 'test_entity/10'] - }), - componentState1.copy({ - routePath: 'domain/context/entity/10', - routePathSegments: ['test_domain/context', 'test_entity/10'] - }), - componentState3.copy({ - routePath: 'domain/context/entity/10', - routePathSegments: ['test_domain/context', 'test_entity/10'] - }) - ]); - }); - }); - - describe('|updateLiteralComponentState|', () => { - it('should verify will update state in right routePathSegments', () => { - // Given - const literalState: LiteralComponentState = { - ...componentState1.toLiteral(), - status: LOADING, - routePath: 'domain/context/entity/10', - routePathSegments: ['test_domain/context', 'test_entity/10'], - data: { payload: { content: { data: [1, 2, 3] } } }, - uiState: { element1: { click: true } } - }; - - // Then 1 - expect(helper - .getState() - .routePathSegments['test_domain/context'] - .routePathSegments['test_entity/10'] - .components['component1']).not.toEqual(literalState); - - // When - helper.updateLiteralComponentState(literalState); - - // Then 2 - expect(helper - .getState() - .routePathSegments['test_domain/context'] - .routePathSegments['test_entity/10'] - .components['component1']).toEqual(literalState); - }); - }); - - describe('|resetComponentStates|', () => { - it('should verify will reset all ComponentStata status in given routePathSegments', () => { - // When - helper.resetComponentStates(['test_domain/context', 'test_entity/10']); - const state = helper.getState(); - - // Then - CollectionsUtil.iterateObject(state.components, (value) => { - expect(value.status).toEqual(IDLE); - }); - - CollectionsUtil.iterateObject(state.routePathSegments['test_domain/context'].components, (value) => { - expect(value.status).toEqual(IDLE); - }); - - CollectionsUtil.iterateObject( - state.routePathSegments['test_domain/context'].routePathSegments['test_entity/10'].components, - (value) => { - expect(value.status).toEqual(IDLE); - } - ); - }); - }); - - describe('|deleteRoutePathSegments|', () => { - it('should verify will delete routePathSegment', () => { - // Then 1 - expect(helper.getState().routePathSegments['test_domain/context'].routePathSegments['test_entity/18']).toBeDefined(); - - // When - helper.deleteRoutePathSegments(['test_domain/context', 'test_entity/18']); - - // Then 2 - expect(helper.getState().routePathSegments['test_domain/context'].routePathSegments['test_entity/18']).toBeUndefined(); - }); - }); - }); + it('should verify instance is created', () => { + // When + const instance = new ComponentsStateHelper(); + + // Then + expect(instance).toBeDefined(); + }); + + describe('Methods::', () => { + let literalComponentsState: LiteralComponentsState; + let helper: ComponentsStateHelper; + let componentState1: ComponentState; + let componentState2: ComponentState; + let componentState3: ComponentState; + let componentState4: ComponentState; + + beforeEach(() => { + componentState1 = ComponentStateImpl.of({ + id: 'component1', + status: LOADED + }); + componentState2 = ComponentStateImpl.of({ + id: 'component2', + status: IDLE + }); + componentState3 = ComponentStateImpl.of({ + id: 'component3', + status: FAILED + }); + componentState4 = ComponentStateImpl.of({ + id: 'component4', + status: IDLE + }); + + literalComponentsState = createComponentsLiteralState( + componentState1, + componentState2, + componentState3, + componentState4 + ); + + helper = new ComponentsStateHelper(); + helper.setState(literalComponentsState); + }); + + describe('|getState|', () => { + it('should verify will return literalComponentState', () => { + // When + const state = helper.getState(); + + // Then + expect(state).toBeDefined(); + expect(state).toEqual(literalComponentsState); + expect(state.components).not.toBe(literalComponentsState.components); + expect(state.routePathSegments).not.toBe( + literalComponentsState.routePathSegments + ); + }); + }); + + describe('|getLiteralComponentState|', () => { + it('should verify will return LiteralComponentState', () => { + // When + const state = helper.getLiteralComponentState('component3', [ + 'test_domain/context', + 'test_entity/10' + ]); + + // Then + expect(state).toBeDefined(); + expect(state).toEqual( + literalComponentsState.routePathSegments['test_domain/context'] + .routePathSegments['test_entity/10'].components['component3'] + ); + }); + + it('should verify will return null if there is no such state', () => { + // When + const state = helper.getLiteralComponentState('component10', [ + 'test_domain/context', + 'test_entity/10' + ]); + + // Then + expect(state).toEqual(null); + }); + + it('should verify will return null if there is no such routePathSegments', () => { + // When + const state = helper.getLiteralComponentState('component3', [ + 'test_domain/context', + 'entity/15' + ]); + + // Then + expect(state).toEqual(null); + }); + }); + + describe('|getComponentState|', () => { + it('should verify will return ComponentState', () => { + // When + const state = helper.getComponentState('component2', [ + 'test_domain/context', + 'test_entity/18' + ]); + + // Then + expect(state).toBeDefined(); + expect(state).toEqual( + componentState2.copy({ + routePath: 'domain/context/entity/18', + routePathSegments: ['test_domain/context', 'test_entity/18'] + }) + ); + expect(state.routePathSegments).not.toBe( + componentState2.routePathSegments + ); + expect(state.data).not.toBe(componentState2.data); + expect(state.uiState).not.toBe(componentState2.uiState); + }); + + it('should verify will return null if there is no such state', () => { + // When + const state = helper.getComponentState('component4', [ + 'test_domain/context' + ]); + + // Then + expect(state).toEqual(null); + }); + + it('should verify will return null if there is no such routePathSegments', () => { + // When + const state = helper.getLiteralComponentState('component2', [ + 'domain/explore', + 'test_entity/10' + ]); + + // Then + expect(state).toEqual(null); + }); + }); + + describe('|getAllComponentState|', () => { + it('should verify will return Array of all ComponentState in given routePathSegments', () => { + // When + const states = helper.getAllComponentState([ + 'test_domain/context', + 'test_entity/10' + ]); + + // Then + expect(states.length).toEqual(8); + expect(states).toEqual([ + componentState1, + componentState3, + componentState2.copy({ + routePath: 'test_domain/context', + routePathSegments: ['test_domain/context'] + }), + componentState3.copy({ + routePath: 'test_domain/context', + routePathSegments: ['test_domain/context'] + }), + componentState2.copy({ + routePath: 'domain/context/entity/10', + routePathSegments: ['test_domain/context', 'test_entity/10'] + }), + componentState4.copy({ + routePath: 'domain/context/entity/10', + routePathSegments: ['test_domain/context', 'test_entity/10'] + }), + componentState1.copy({ + routePath: 'domain/context/entity/10', + routePathSegments: ['test_domain/context', 'test_entity/10'] + }), + componentState3.copy({ + routePath: 'domain/context/entity/10', + routePathSegments: ['test_domain/context', 'test_entity/10'] + }) + ]); + }); + }); + + describe('|updateLiteralComponentState|', () => { + it('should verify will update state in right routePathSegments', () => { + // Given + const literalState: LiteralComponentState = { + ...componentState1.toLiteral(), + status: LOADING, + routePath: 'domain/context/entity/10', + routePathSegments: ['test_domain/context', 'test_entity/10'], + data: { payload: { content: { data: [1, 2, 3] } } }, + uiState: { element1: { click: true } } + }; + + // Then 1 + expect( + helper.getState().routePathSegments['test_domain/context'] + .routePathSegments['test_entity/10'].components['component1'] + ).not.toEqual(literalState); + + // When + helper.updateLiteralComponentState(literalState); + + // Then 2 + expect( + helper.getState().routePathSegments['test_domain/context'] + .routePathSegments['test_entity/10'].components['component1'] + ).toEqual(literalState); + }); + }); + + describe('|resetComponentStates|', () => { + it('should verify will reset all ComponentStata status in given routePathSegments', () => { + // When + helper.resetComponentStates(['test_domain/context', 'test_entity/10']); + const state = helper.getState(); + + // Then + CollectionsUtil.iterateObject(state.components, (value) => { + expect(value.status).toEqual(IDLE); + }); + + CollectionsUtil.iterateObject( + state.routePathSegments['test_domain/context'].components, + (value) => { + expect(value.status).toEqual(IDLE); + } + ); + + CollectionsUtil.iterateObject( + state.routePathSegments['test_domain/context'].routePathSegments[ + 'test_entity/10' + ].components, + (value) => { + expect(value.status).toEqual(IDLE); + } + ); + }); + }); + + describe('|deleteRoutePathSegments|', () => { + it('should verify will delete routePathSegment', () => { + // Then 1 + expect( + helper.getState().routePathSegments['test_domain/context'] + .routePathSegments['test_entity/18'] + ).toBeDefined(); + + // When + helper.deleteRoutePathSegments([ + 'test_domain/context', + 'test_entity/18' + ]); + + // Then 2 + expect( + helper.getState().routePathSegments['test_domain/context'] + .routePathSegments['test_entity/18'] + ).toBeUndefined(); + }); + }); + }); }); -const createComponentsLiteralState = (c1: ComponentState, c2: ComponentState, c3: ComponentState, c4: ComponentState) => { - return { - components: { - component1: { ...c1.toLiteral() }, - component3: { ...c3.toLiteral() } - }, - routePathSegments: { - 'test_domain/context': { - components: { - component2: { - ...c2.toLiteral(), - routePath: 'test_domain/context', - routePathSegments: ['test_domain/context'] - }, - component3: { - ...c3.toLiteral(), - routePath: 'test_domain/context', - routePathSegments: ['test_domain/context'] - } - }, - routePathSegments: { - 'test_entity/10': { - components: { - component2: { - ...c2.toLiteral(), - routePath: 'domain/context/entity/10', - routePathSegments: ['test_domain/context', 'test_entity/10'] - }, - component4: { - ...c4.toLiteral(), - routePath: 'domain/context/entity/10', - routePathSegments: ['test_domain/context', 'test_entity/10'] - }, - component1: { - ...c1.toLiteral(), - routePath: 'domain/context/entity/10', - routePathSegments: ['test_domain/context', 'test_entity/10'] - }, - component3: { - ...c3.toLiteral(), - routePath: 'domain/context/entity/10', - routePathSegments: ['test_domain/context', 'test_entity/10'] - } - }, - routePathSegments: {} - }, - 'test_entity/18': { - components: { - component3: { - ...c3.toLiteral(), - routePath: 'domain/context/entity/18', - routePathSegments: ['test_domain/context', 'test_entity/18'] - }, - component2: { - ...c2.toLiteral(), - routePath: 'domain/context/entity/18', - routePathSegments: ['test_domain/context', 'test_entity/18'] - }, - component1: { - ...c1.toLiteral(), - routePath: 'domain/context/entity/18', - routePathSegments: ['test_domain/context', 'test_entity/18'] - }, - component4: { - ...c4.toLiteral(), - routePath: 'domain/context/entity/18', - routePathSegments: ['test_domain/context', 'test_entity/18'] - } - }, - routePathSegments: {} - } - } - } - } - } as LiteralComponentsState; +const createComponentsLiteralState = ( + c1: ComponentState, + c2: ComponentState, + c3: ComponentState, + c4: ComponentState +) => { + return { + components: { + component1: { ...c1.toLiteral() }, + component3: { ...c3.toLiteral() } + }, + routePathSegments: { + 'test_domain/context': { + components: { + component2: { + ...c2.toLiteral(), + routePath: 'test_domain/context', + routePathSegments: ['test_domain/context'] + }, + component3: { + ...c3.toLiteral(), + routePath: 'test_domain/context', + routePathSegments: ['test_domain/context'] + } + }, + routePathSegments: { + 'test_entity/10': { + components: { + component2: { + ...c2.toLiteral(), + routePath: 'domain/context/entity/10', + routePathSegments: ['test_domain/context', 'test_entity/10'] + }, + component4: { + ...c4.toLiteral(), + routePath: 'domain/context/entity/10', + routePathSegments: ['test_domain/context', 'test_entity/10'] + }, + component1: { + ...c1.toLiteral(), + routePath: 'domain/context/entity/10', + routePathSegments: ['test_domain/context', 'test_entity/10'] + }, + component3: { + ...c3.toLiteral(), + routePath: 'domain/context/entity/10', + routePathSegments: ['test_domain/context', 'test_entity/10'] + } + }, + routePathSegments: {} + }, + 'test_entity/18': { + components: { + component3: { + ...c3.toLiteral(), + routePath: 'domain/context/entity/18', + routePathSegments: ['test_domain/context', 'test_entity/18'] + }, + component2: { + ...c2.toLiteral(), + routePath: 'domain/context/entity/18', + routePathSegments: ['test_domain/context', 'test_entity/18'] + }, + component1: { + ...c1.toLiteral(), + routePath: 'domain/context/entity/18', + routePathSegments: ['test_domain/context', 'test_entity/18'] + }, + component4: { + ...c4.toLiteral(), + routePath: 'domain/context/entity/18', + routePathSegments: ['test_domain/context', 'test_entity/18'] + } + }, + routePathSegments: {} + } + } + } + } + } as LiteralComponentsState; }; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/components-state.model.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/components-state.model.ts index 2620df6f48..efd6b76580 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/components-state.model.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/components-state.model.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -8,11 +6,15 @@ import { CollectionsUtil } from '../../../../utils'; import { IDLE } from './component-status.model'; -import { ComponentState, ComponentStateImpl, LiteralComponentState } from './component-state.model'; +import { + ComponentState, + ComponentStateImpl, + LiteralComponentState +} from './component-state.model'; export interface LiteralComponentsState { - readonly components: { [name: string]: LiteralComponentState }; - readonly routePathSegments: { [segmentId: string]: LiteralComponentsState }; + readonly components: { [name: string]: LiteralComponentState }; + readonly routePathSegments: { [segmentId: string]: LiteralComponentsState }; } /** @@ -21,263 +23,293 @@ export interface LiteralComponentsState { * */ export class ComponentsStateHelper { - private _literalComponentsState: LiteralComponentsState; - - constructor() { - this._literalComponentsState = { - components: {}, - routePathSegments: {} - }; - } - - /** - * ** Returns LiteralComponentsState from Helper. - */ - getState(): LiteralComponentsState { - return { - ...this._literalComponentsState - }; - } - - /** - * ** Will set state to the local Helper state. - */ - setState(literalComponentsState: LiteralComponentsState) { - this._literalComponentsState = this._shallowCloneComponentsState(literalComponentsState); - - return this; - } - - /** - * ** Will return LiteralComponentState for given id and routePathSegments. - */ - getLiteralComponentState(id: string, routePathSegments?: string[]): LiteralComponentState { - return this._getLiteralComponentState( - id, - CollectionsUtil.isArray(routePathSegments) - ? [...routePathSegments] - : [], - this._literalComponentsState - ); - } - - /** - * ** Get ComponentState for given id and routePathSegments. - */ - getComponentState(id: string, routePathSegments?: string[]): ComponentState { - const literalComponentState = this._getLiteralComponentState( - id, - CollectionsUtil.isArray(routePathSegments) - ? [...routePathSegments] - : [], - this._literalComponentsState - ); - - return CollectionsUtil.isDefined(literalComponentState) - ? ComponentStateImpl.fromLiteralComponentState(literalComponentState) - : null; - } - - /** - * ** Get all ComponentState for given routePathSegments. - */ - getAllComponentState(routePathSegments: string[]): ComponentState[] { - return this._getAllComponentState( - CollectionsUtil.isArray(routePathSegments) - ? [...routePathSegments] - : [], - this._literalComponentsState - ); - } - - /** - * ** Update LiteralComponentState. - */ - updateLiteralComponentState(literalComponentState: LiteralComponentState): void { - return this._updateLiteralComponentState( - literalComponentState, - [...literalComponentState.routePathSegments], - this._literalComponentsState - ); - } - - /** - * ** Reset component status to NOT_LOADED for all ComponentState in a given routePathSegment. - */ - resetComponentStates(routePathSegments: string[]): void { - this._resetComponentStates( - CollectionsUtil.isArray(routePathSegments) - ? [...routePathSegments] - : [], - this._literalComponentsState - ); - } - - /** - * ** Delete all ComponentState for given routePathSegment. - */ - deleteRoutePathSegments(routePathSegments: string[]): void { - this._deleteRoutePathSegments( - CollectionsUtil.isArray(routePathSegments) - ? [...routePathSegments] - : [], - this._literalComponentsState - ); - } - - /** - * ** Update ComponentState. - */ - private _updateLiteralComponentState( - literalComponentState: LiteralComponentState, - routePathSegments: string[], - state: LiteralComponentsState): void { - - if (CollectionsUtil.isArrayEmpty(routePathSegments)) { - state.components[literalComponentState.id] = literalComponentState; - - return; - } - - const routePathSegment = routePathSegments.shift(); - - this._updateLiteralComponentState( - literalComponentState, - routePathSegments, - this._normalizeRoutePathSegments(state.routePathSegments, routePathSegment) - ); - } - - /** - * ** Get ComponentState. - */ - private _getLiteralComponentState( - id: string, - routePathSegments: string[], - state: LiteralComponentsState): LiteralComponentState | null { - - if (!state) { - return null; - } - - if (CollectionsUtil.isArrayEmpty(routePathSegments)) { - if (state.components[id]) { - return ComponentStateImpl.cloneDeepLiteral(state.components[id]); - } - - return null; - } - - const routePathSegment = routePathSegments.shift(); - - return this._getLiteralComponentState( - id, - routePathSegments, - state.routePathSegments[routePathSegment] - ); - } - - /** - * ** Get all components for given routePathSegments. - */ - private _getAllComponentState(routePathSegments: string[], state: LiteralComponentsState): ComponentState[] { - if (!state) { - return []; - } - - const components: ComponentState[] = CollectionsUtil.objectValues(state.components) - .map((c) => ComponentStateImpl.fromLiteralComponentState( - ComponentStateImpl.cloneDeepLiteral(c) - )); - - if (CollectionsUtil.isArrayEmpty(routePathSegments)) { - return components; - } - - const routePathSegment = routePathSegments.shift(); - - return [ - ...components, - ...this._getAllComponentState(routePathSegments, state.routePathSegments[routePathSegment]) - ]; - } - - /** - * ** Reset component status to NOT_LOADED for all component in a given context. - */ - private _resetComponentStates(routePathSegments: string[], state: LiteralComponentsState): void { - CollectionsUtil.iterateObject(state.components, (componentState, id) => { - state.components[id] = { ...componentState, status: IDLE }; - }); - - if (CollectionsUtil.isArrayEmpty(routePathSegments)) { - return; - } - - const routePathSegment = routePathSegments.shift(); - - this._resetComponentStates( - routePathSegments, - this._normalizeRoutePathSegments(state.routePathSegments, routePathSegment) - ); - } - - /** - * ** Delete all components state for a given route path segment. - */ - private _deleteRoutePathSegments(routePathSegments: string[], state: LiteralComponentsState): void { - const routePathSegment = routePathSegments.shift(); - - if (!routePathSegment) { - return; - } - - if (CollectionsUtil.isArrayEmpty(routePathSegments)) { - delete state.routePathSegments[routePathSegment]; - - return; - } - - this._deleteRoutePathSegments( - routePathSegments, - this._normalizeRoutePathSegments(state.routePathSegments, routePathSegment) - ); - } - - /** - * ** Normalize Route path segments. - */ - private _normalizeRoutePathSegments( - urlSegments: { [segmentId: string]: LiteralComponentsState }, - urlSegmentName: string): LiteralComponentsState { - - if (CollectionsUtil.isNil(urlSegments[urlSegmentName])) { - urlSegments[urlSegmentName] = { - components: {}, - routePathSegments: {} - }; - } - - return urlSegments[urlSegmentName]; - } - - private _shallowCloneComponentsState(source: LiteralComponentsState, target?: LiteralComponentsState): LiteralComponentsState { - const _source: LiteralComponentsState = source ?? { components: {}, routePathSegments: {} }; - const _target: LiteralComponentsState = target ?? { components: {}, routePathSegments: {} }; - - CollectionsUtil.iterateObject(_source.components, (value, key) => { - _target.components[key] = value; - }); - - CollectionsUtil.iterateObject(_source.routePathSegments, (value, key) => { - _target.routePathSegments[key] = { - components: {}, - routePathSegments: {} - }; - - this._shallowCloneComponentsState(value, _target.routePathSegments[key]); - }); - - return _target; - } + private _literalComponentsState: LiteralComponentsState; + + constructor() { + this._literalComponentsState = { + components: {}, + routePathSegments: {} + }; + } + + /** + * ** Returns LiteralComponentsState from Helper. + */ + getState(): LiteralComponentsState { + return { + ...this._literalComponentsState + }; + } + + /** + * ** Will set state to the local Helper state. + */ + setState(literalComponentsState: LiteralComponentsState) { + this._literalComponentsState = this._shallowCloneComponentsState( + literalComponentsState + ); + + return this; + } + + /** + * ** Will return LiteralComponentState for given id and routePathSegments. + */ + getLiteralComponentState( + id: string, + routePathSegments?: string[] + ): LiteralComponentState { + return this._getLiteralComponentState( + id, + CollectionsUtil.isArray(routePathSegments) ? [...routePathSegments] : [], + this._literalComponentsState + ); + } + + /** + * ** Get ComponentState for given id and routePathSegments. + */ + getComponentState(id: string, routePathSegments?: string[]): ComponentState { + const literalComponentState = this._getLiteralComponentState( + id, + CollectionsUtil.isArray(routePathSegments) ? [...routePathSegments] : [], + this._literalComponentsState + ); + + return CollectionsUtil.isDefined(literalComponentState) + ? ComponentStateImpl.fromLiteralComponentState(literalComponentState) + : null; + } + + /** + * ** Get all ComponentState for given routePathSegments. + */ + getAllComponentState(routePathSegments: string[]): ComponentState[] { + return this._getAllComponentState( + CollectionsUtil.isArray(routePathSegments) ? [...routePathSegments] : [], + this._literalComponentsState + ); + } + + /** + * ** Update LiteralComponentState. + */ + updateLiteralComponentState( + literalComponentState: LiteralComponentState + ): void { + return this._updateLiteralComponentState( + literalComponentState, + [...literalComponentState.routePathSegments], + this._literalComponentsState + ); + } + + /** + * ** Reset component status to NOT_LOADED for all ComponentState in a given routePathSegment. + */ + resetComponentStates(routePathSegments: string[]): void { + this._resetComponentStates( + CollectionsUtil.isArray(routePathSegments) ? [...routePathSegments] : [], + this._literalComponentsState + ); + } + + /** + * ** Delete all ComponentState for given routePathSegment. + */ + deleteRoutePathSegments(routePathSegments: string[]): void { + this._deleteRoutePathSegments( + CollectionsUtil.isArray(routePathSegments) ? [...routePathSegments] : [], + this._literalComponentsState + ); + } + + /** + * ** Update ComponentState. + */ + private _updateLiteralComponentState( + literalComponentState: LiteralComponentState, + routePathSegments: string[], + state: LiteralComponentsState + ): void { + if (CollectionsUtil.isArrayEmpty(routePathSegments)) { + state.components[literalComponentState.id] = literalComponentState; + + return; + } + + const routePathSegment = routePathSegments.shift(); + + this._updateLiteralComponentState( + literalComponentState, + routePathSegments, + this._normalizeRoutePathSegments( + state.routePathSegments, + routePathSegment + ) + ); + } + + /** + * ** Get ComponentState. + */ + private _getLiteralComponentState( + id: string, + routePathSegments: string[], + state: LiteralComponentsState + ): LiteralComponentState | null { + if (!state) { + return null; + } + + if (CollectionsUtil.isArrayEmpty(routePathSegments)) { + if (state.components[id]) { + return ComponentStateImpl.cloneDeepLiteral(state.components[id]); + } + + return null; + } + + const routePathSegment = routePathSegments.shift(); + + return this._getLiteralComponentState( + id, + routePathSegments, + state.routePathSegments[routePathSegment] + ); + } + + /** + * ** Get all components for given routePathSegments. + */ + private _getAllComponentState( + routePathSegments: string[], + state: LiteralComponentsState + ): ComponentState[] { + if (!state) { + return []; + } + + const components: ComponentState[] = CollectionsUtil.objectValues( + state.components + ).map((c) => + ComponentStateImpl.fromLiteralComponentState( + ComponentStateImpl.cloneDeepLiteral(c) + ) + ); + + if (CollectionsUtil.isArrayEmpty(routePathSegments)) { + return components; + } + + const routePathSegment = routePathSegments.shift(); + + return [ + ...components, + ...this._getAllComponentState( + routePathSegments, + state.routePathSegments[routePathSegment] + ) + ]; + } + + /** + * ** Reset component status to NOT_LOADED for all component in a given context. + */ + private _resetComponentStates( + routePathSegments: string[], + state: LiteralComponentsState + ): void { + CollectionsUtil.iterateObject(state.components, (componentState, id) => { + state.components[id] = { ...componentState, status: IDLE }; + }); + + if (CollectionsUtil.isArrayEmpty(routePathSegments)) { + return; + } + + const routePathSegment = routePathSegments.shift(); + + this._resetComponentStates( + routePathSegments, + this._normalizeRoutePathSegments( + state.routePathSegments, + routePathSegment + ) + ); + } + + /** + * ** Delete all components state for a given route path segment. + */ + private _deleteRoutePathSegments( + routePathSegments: string[], + state: LiteralComponentsState + ): void { + const routePathSegment = routePathSegments.shift(); + + if (!routePathSegment) { + return; + } + + if (CollectionsUtil.isArrayEmpty(routePathSegments)) { + delete state.routePathSegments[routePathSegment]; + + return; + } + + this._deleteRoutePathSegments( + routePathSegments, + this._normalizeRoutePathSegments( + state.routePathSegments, + routePathSegment + ) + ); + } + + /** + * ** Normalize Route path segments. + */ + private _normalizeRoutePathSegments( + urlSegments: { [segmentId: string]: LiteralComponentsState }, + urlSegmentName: string + ): LiteralComponentsState { + if (CollectionsUtil.isNil(urlSegments[urlSegmentName])) { + urlSegments[urlSegmentName] = { + components: {}, + routePathSegments: {} + }; + } + + return urlSegments[urlSegmentName]; + } + + private _shallowCloneComponentsState( + source: LiteralComponentsState, + target?: LiteralComponentsState + ): LiteralComponentsState { + const _source: LiteralComponentsState = source ?? { + components: {}, + routePathSegments: {} + }; + const _target: LiteralComponentsState = target ?? { + components: {}, + routePathSegments: {} + }; + + CollectionsUtil.iterateObject(_source.components, (value, key) => { + _target.components[key] = value; + }); + + CollectionsUtil.iterateObject(_source.routePathSegments, (value, key) => { + _target.routePathSegments[key] = { + components: {}, + routePathSegments: {} + }; + + this._shallowCloneComponentsState(value, _target.routePathSegments[key]); + }); + + return _target; + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/index.ts index c6369edf04..fb8da01a27 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/model/state/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/public-api.ts index ba142389bd..484b60ff3c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/services/component.service.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/services/component.service.spec.ts index ce79f1e9e3..6f0f9aa536 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/services/component.service.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/services/component.service.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -18,717 +16,969 @@ import { marbles } from 'rxjs-marbles/jasmine'; import { CollectionsUtil } from '../../../utils'; -import { GenericAction, STORE_COMPONENTS, STORE_ROUTER, StoreState } from '../../ngrx'; -import { RouterService, RouterState, RouteSegments, RouteState } from '../../router'; +import { + GenericAction, + STORE_COMPONENTS, + STORE_ROUTER, + StoreState +} from '../../ngrx'; +import { + RouterService, + RouterState, + RouteSegments, + RouteState +} from '../../router'; import { - ComponentModel, - ComponentState, - ComponentStateImpl, - FAILED, - IDLE, - INITIALIZED, - LiteralComponentsState, - LiteralComponentState, - LOADED, - LOADING, - StatusType + ComponentModel, + ComponentState, + ComponentStateImpl, + FAILED, + IDLE, + INITIALIZED, + LiteralComponentsState, + LiteralComponentState, + LOADED, + LOADING, + StatusType } from '../model'; -import { ComponentIdle, ComponentInit, ComponentLoading, ComponentUpdate } from '../state'; +import { + ComponentIdle, + ComponentInit, + ComponentLoading, + ComponentUpdate +} from '../state'; import { ComponentService, ComponentServiceImpl } from './component.service'; describe('ComponentService -> ComponentServiceImpl', () => { - let storeStub$: jasmine.SpyObj>; - let routerServiceStub: jasmine.SpyObj; - - let service: ComponentService; - - beforeEach(() => { - storeStub$ = jasmine.createSpyObj>('store', ['select', 'dispatch']); - routerServiceStub = jasmine.createSpyObj('routerService', ['get', 'getState']); - - TestBed.configureTestingModule({ - providers: [ - { provide: Store, useValue: storeStub$ }, - { provide: RouterService, useValue: routerServiceStub }, - { provide: ComponentService, useClass: ComponentServiceImpl } - ] - }); - - service = TestBed.inject(ComponentService); - }); - - it('should verify service is created', () => { - // Then - expect(service).toBeDefined(); - }); - - describe('Methods::', () => { - let id: string; - let components: LiteralComponentsState; - let router: RouterState; - - beforeEach(() => { - id = 'testComponent10'; - router = createStoreState()[STORE_ROUTER]; - - routerServiceStub.getState.and.returnValue(of(router.state)); - routerServiceStub.get.and.returnValue(of(router)); - }); - - describe('|init|', () => { - it('should verify will initialize correct component and dispatch ComponentInit', () => { - // Given - const componentState = createComponentState(router, id, INITIALIZED); - - storeStub$.select.and.callFake((param) => { - if (param === STORE_COMPONENTS) { - components = createStoreState(componentState.toLiteral())[STORE_COMPONENTS]; - - return of(components); - } - - return of(createStoreState()); - }); - - // When - const response$ = service.init(id, router.state); - - // Then - expect(storeStub$.select.calls.argsFor(0)).toEqual([jasmine.any(Function)]); - expect(storeStub$.select.calls.argsFor(1)).toEqual([STORE_COMPONENTS]); - expect(storeStub$.dispatch).toHaveBeenCalledWith(ComponentInit.of(componentState)); - - response$.subscribe((model) => { - expect(model['_routerState']).toEqual(router); - expect(model['_componentState']).toEqual(getComponentState(components, id)); - expect(model.status).toEqual(INITIALIZED); - }); - - expect(routerServiceStub.getState).toHaveBeenCalled(); - expect(storeStub$.select.calls.argsFor(2)).toEqual([STORE_COMPONENTS]); - expect(routerServiceStub.get).toHaveBeenCalled(); - }, 1000); - - it('should verify wont dispatch ComponentInit', () => { - // Given - const componentState = createComponentState(router, id, LOADED); - - storeStub$.select.and.callFake((param) => { - if (param === STORE_COMPONENTS) { - components = createStoreState(componentState.toLiteral())[STORE_COMPONENTS]; - - return of(components); - } - - return of(createStoreState(componentState.toLiteral())); - }); - - // When - const response$ = service.init(id, router.state); - - // Then - expect(storeStub$.select.calls.argsFor(0)).toEqual([jasmine.any(Function)]); - expect(storeStub$.dispatch).not.toHaveBeenCalled(); - expect(storeStub$.select.calls.argsFor(1)).toEqual([STORE_COMPONENTS]); - - response$.subscribe((model) => { - expect(model['_routerState']).toEqual(router); - expect(model['_componentState']).toEqual(getComponentState(components, id)); - expect(model.status).toEqual(LOADED); - }); - - expect(routerServiceStub.getState).toHaveBeenCalled(); - expect(storeStub$.select.calls.argsFor(2)).toEqual([STORE_COMPONENTS]); - expect(routerServiceStub.get).toHaveBeenCalled(); - }, 1000); - }); - - describe('|idle|', () => { - it('should verify will dispatch ComponentIdle with provided ComponentState', () => { - // Given - const componentState = createComponentState(router, id, LOADED); - - // When - service.idle(componentState); - - // Then - expect(storeStub$.dispatch).toHaveBeenCalledWith(ComponentIdle.of(componentState)); - }); - }); - - describe('|load|', () => { - it('should verify will dispatch ComponentLoading with provided ComponentState', () => { - // Given - const componentState = createComponentState(router, id, FAILED); - routerServiceStub.get.and.returnValue(of(router)); - storeStub$.select - .and - .returnValue( - of(createStoreState(createComponentState(router, id, LOADED).toLiteral())[STORE_COMPONENTS]) - ); - - // When - const response$ = service.load(componentState); - - // Then - expect(routerServiceStub.get).toHaveBeenCalledTimes(1); - // @ts-ignore - expect(storeStub$.dispatch.calls.argsFor(0)).toEqual([ - ComponentLoading.of( - componentState.copy({ - navigationId: router.navigationId, - status: LOADING - }) - ) - ]); - - const assertionComponentState = createComponentState(router, id, LOADED); - response$.subscribe((model) => { - expect(model['_routerState']).toEqual(router); - expect(model['_componentState']).toEqual(assertionComponentState); - expect(model.status).toEqual(LOADED); - }); - - // @ts-ignore - expect(storeStub$.select).toHaveBeenCalledWith(STORE_COMPONENTS); - expect(routerServiceStub.getState).toHaveBeenCalled(); - expect(routerServiceStub.get).toHaveBeenCalledTimes(2); - }, 1000); - - it('should verify will dispatch ComponentIdle and ComponentLoading with provided component id', () => { - // Given - const componentState = createComponentState(router, id, INITIALIZED); - routerServiceStub.get.and.returnValue(of(router)); - storeStub$.select - .and - .returnValue( - of(createStoreState(createComponentState(router, id, LOADED).toLiteral())[STORE_COMPONENTS]) - ); - - // When - const response$ = service.load(componentState); - - // Then - expect(routerServiceStub.get).toHaveBeenCalledTimes(1); - // @ts-ignore - expect(storeStub$.dispatch.calls.argsFor(0)).toEqual([ - ComponentIdle.of( - createComponentState(router, id, IDLE).copy({ - navigationId: router.navigationId - }) - ) - ]); - expect(storeStub$.dispatch.calls.argsFor(1)).toEqual([ - ComponentLoading.of( - createComponentState(router, id, LOADING).copy({ - navigationId: router.navigationId - }) - ) - ]); - - const assertionComponentState = createComponentState(router, id, LOADED); - response$.subscribe((model) => { - expect(model['_routerState']).toEqual(router); - expect(model['_componentState']).toEqual(assertionComponentState); - expect(model.status).toEqual(LOADED); - }); - - // @ts-ignore - expect(storeStub$.select).toHaveBeenCalledWith(STORE_COMPONENTS); - expect(routerServiceStub.getState).toHaveBeenCalled(); - expect(routerServiceStub.get).toHaveBeenCalledTimes(2); - }, 1000); - }); - - describe('|update|', () => { - it('should verify will dispatch ComponentUpdate with provided ComponentState', () => { - // Given - const componentState = createComponentState(router, id, LOADED); - - // When - service.update(componentState); - - // Then - expect(routerServiceStub.get).toHaveBeenCalled(); - expect(storeStub$.dispatch).toHaveBeenCalledWith( - ComponentUpdate.of( - componentState.copy({ navigationId: router.navigationId }) - ) - ); - }); - }); - - describe('|hasInSegment|', () => { - it('should verify will return true when ComponentState exist', marbles((m) => { - // Given - const componentsStream$ = m.cold('---a', { - a: createStoreState( - createComponentState(router, 'someComponentId', LOADED).toLiteral())[STORE_COMPONENTS] - }); - const routeStateStream$ = m.cold('--a', { - a: router.state - }); - storeStub$.select.and.returnValue(componentsStream$); - routerServiceStub.getState.and.returnValue(routeStateStream$); - const expected$ = m.cold('---(a|)', { a: true }); - - // When - const response$ = service.hasInSegment('someComponentId', ['test_domain/context', 'test_entity/10']); - - // Then - m.expect(response$).toBeObservable(expected$); - })); - - it('should verify will return false when ComponentState not exist', marbles((m) => { - // Given - const componentsStream$ = m.cold('---a', { - a: createStoreState( - createComponentState(router, 'someComponentId', LOADED).toLiteral())[STORE_COMPONENTS] - }); - const routeStateStream$ = m.cold('---a', { - a: router.state - }); - storeStub$.select.and.returnValue(componentsStream$); - routerServiceStub.getState.and.returnValue(routeStateStream$); - const expected$ = m.cold('---(a|)', { a: false }); - - // When - const response$ = service.hasInSegment('newComponentId', ['test_domain/context', 'test_entity/10']); - - // Then - m.expect(response$).toBeObservable(expected$); - })); - }); - - describe('|onInit|', () => { - it(`should verify wont emit when state doesn't exist`, marbles((m) => { - // Given - const cA = createStoreState(createComponentState(router, 'testId10', INITIALIZED).toLiteral()); - const cB = createStoreState(createComponentState(router, 'testId10', IDLE).toLiteral()); - const cC = createStoreState(createComponentState(router, 'testId10', LOADING).toLiteral()); - const cD = createStoreState(createComponentState(router, 'testId10', LOADED).toLiteral()); - const cE = createStoreState(createComponentState(router, 'testId22', LOADED).toLiteral()); - const cF = createStoreState(createComponentState(router, 'testId33', LOADED).toLiteral()); - const componentsMarbleStream$ = m.cold('-a--bc-d-e--f-|', { - a: cA[STORE_COMPONENTS], - b: cB[STORE_COMPONENTS], - c: cC[STORE_COMPONENTS], - d: cD[STORE_COMPONENTS], - e: cE[STORE_COMPONENTS], - f: cF[STORE_COMPONENTS] - }); - const expectedModelMarbleStream$ = m.cold('--------------|'); - storeStub$.select.and.returnValue(componentsMarbleStream$); - - // When - const response$ = service.onInit(id, router.state.routePathSegments); - - // Then - m.expect(response$).toBeObservable(expectedModelMarbleStream$); - })); - - it('should verify will emit when state exist', () => { - // Given - const componentState = createComponentState(router, id, INITIALIZED); - const storeState = createStoreState(componentState.toLiteral()); - - storeStub$.select.and.returnValue(of(storeState[STORE_COMPONENTS])); - - // When - const response$ = service.onInit(id, router.state.routePathSegments); - - // Then - // @ts-ignore - expect(storeStub$.select.calls.argsFor(0)).toEqual([STORE_COMPONENTS]); - expect(routerServiceStub.getState).toHaveBeenCalled(); - - response$.subscribe((model) => { - expect(model).toBeDefined(); - expect(model.status).toEqual(INITIALIZED); - }); - - expect(storeStub$.select.calls.argsFor(1)).toEqual([STORE_COMPONENTS]); - expect(routerServiceStub.get).toHaveBeenCalled(); - }, 1000); - }); - - describe('|onLoaded|', () => { - it(`should verify wont emit when state doesn't exist`, marbles((m) => { - // Given - const cA = createStoreState(createComponentState(router, 'testId1', INITIALIZED).toLiteral()); - const cB = createStoreState(createComponentState(router, 'testId1', IDLE).toLiteral()); - const cC = createStoreState(createComponentState(router, 'testId1', LOADING).toLiteral()); - const cD = createStoreState(createComponentState(router, 'testId1', LOADED).toLiteral()); - const cE = createStoreState(createComponentState(router, 'testId2', LOADED).toLiteral()); - const cF = createStoreState(createComponentState(router, 'testId3', LOADED).toLiteral()); - const componentsMarbleStream$ = m.cold('-a--bc---d--e----f-|', { - a: cA[STORE_COMPONENTS], - b: cB[STORE_COMPONENTS], - c: cC[STORE_COMPONENTS], - d: cD[STORE_COMPONENTS], - e: cE[STORE_COMPONENTS], - f: cF[STORE_COMPONENTS] - }); - const expectedModelMarbleStream$ = m.cold('-------------------|'); - storeStub$.select.and.returnValue(componentsMarbleStream$); - - // When - const response$ = service.onLoaded(id, router.state.routePathSegments); - - // Then - m.expect(response$).toBeObservable(expectedModelMarbleStream$); - })); - - it('should verify wont emit when state status is not LOADED or FAILED', marbles((m) => { - // Given - const cA = createStoreState(createComponentState(router, id, INITIALIZED).toLiteral()); - const cB = createStoreState(createComponentState(router, id, IDLE).toLiteral()); - const cC = createStoreState(createComponentState(router, id, LOADING).toLiteral()); - const componentsMarbleStream$ = m.cold('-a--bc---|', { - a: cA[STORE_COMPONENTS], - b: cB[STORE_COMPONENTS], - c: cC[STORE_COMPONENTS] - }); - const expectedModelMarbleStream$ = m.cold('---------|'); - storeStub$.select.and.returnValue(componentsMarbleStream$); - - // When - const response$ = service.onLoaded(id, router.state.routePathSegments); - - // Then - m.expect(response$).toBeObservable(expectedModelMarbleStream$); - })); - - it('should verify will emit when state exist and its status is LOADED', marbles((m) => { - // Given - const cA = createStoreState(createComponentState(router, id, INITIALIZED).toLiteral()); - const cB = createStoreState(createComponentState(router, id, IDLE).toLiteral()); - const cC = createStoreState(createComponentState(router, id, LOADING).toLiteral()); - const cD = createStoreState(createComponentState(router, id, LOADED).toLiteral()); - const componentsMarbleStream$ = m.cold('-a--bc---d---', { - a: cA[STORE_COMPONENTS], - b: cB[STORE_COMPONENTS], - c: cC[STORE_COMPONENTS], - d: cD[STORE_COMPONENTS] - }); - const componentsMarbleStream1$ = m.cold('d----', { - d: cD[STORE_COMPONENTS] - }); - const expectedModelMarbleStream$ = m.cold('---------(a|)', { - a: ComponentModel.of(getComponentState(cD, id), cD[STORE_ROUTER]) - }); - let cnt = 0; - storeStub$.select.and.callFake(() => { - cnt++; - if (cnt === 1) { - return componentsMarbleStream$; - } - - if (cnt === 2) { - return componentsMarbleStream1$; - } - - return throwError(() => new Error(`This shouldn't be reachable`)); - }); - routerServiceStub.getState.and.returnValue(m.cold('a----', { a: router.state })); - routerServiceStub.get.and.returnValue(m.cold('a----', { a: router })); - - // When - const response$ = service.onLoaded(id, router.state.routePathSegments); - - // Then - m.expect(response$).toBeObservable(expectedModelMarbleStream$); - })); - - it('should verify will emit when state exist and its status is FAILED', marbles((m) => { - // Given - const cA = createStoreState(createComponentState(router, id, INITIALIZED).toLiteral()); - const cB = createStoreState(createComponentState(router, id, IDLE).toLiteral()); - const cC = createStoreState(createComponentState(router, id, LOADING).toLiteral()); - const cD = createStoreState(createComponentState(router, id, FAILED).toLiteral()); - const componentsMarbleStream$ = m.cold('-a--bc---d---', { - a: cA[STORE_COMPONENTS], - b: cB[STORE_COMPONENTS], - c: cC[STORE_COMPONENTS], - d: cD[STORE_COMPONENTS] - }); - const componentsMarbleStream1$ = m.cold('d----', { - d: cD[STORE_COMPONENTS] - }); - const expectedModelMarbleStream$ = m.cold('---------(a|)', { - a: ComponentModel.of(getComponentState(cD, id), cD[STORE_ROUTER]) - }); - let cnt = 0; - storeStub$.select.and.callFake(() => { - cnt++; - if (cnt === 1) { - return componentsMarbleStream$; - } - - if (cnt === 2) { - return componentsMarbleStream1$; - } - - return throwError(() => new Error(`This shouldn't be reachable`)); - }); - routerServiceStub.getState.and.returnValue(m.cold('a----', { a: router.state })); - routerServiceStub.get.and.returnValue(m.cold('a----', { a: router })); - - // When - const response$ = service.onLoaded(id, router.state.routePathSegments); - - // Then - m.expect(response$).toBeObservable(expectedModelMarbleStream$); - })); - }); - - describe('|getModel|', () => { - it(`should verify wont emit when state doesn't exist`, marbles((m) => { - // Given - const cA = createStoreState(createComponentState(router, 'testId21', INITIALIZED).toLiteral()); - const cB = createStoreState(createComponentState(router, 'testId21', IDLE).toLiteral()); - const cC = createStoreState(createComponentState(router, 'testId21', LOADING).toLiteral()); - const cD = createStoreState(createComponentState(router, 'testId21', LOADED).toLiteral()); - const cE = createStoreState(createComponentState(router, 'testId32', LOADED).toLiteral()); - const cF = createStoreState(createComponentState(router, 'testId33', LOADED).toLiteral()); - const componentsMarbleStream$ = m.cold('--a-bc---d----e--f---|', { - a: cA[STORE_COMPONENTS], - b: cB[STORE_COMPONENTS], - c: cC[STORE_COMPONENTS], - d: cD[STORE_COMPONENTS], - e: cE[STORE_COMPONENTS], - f: cF[STORE_COMPONENTS] - }); - const expectedModelMarbleStream$ = m.cold('---------------------|'); - storeStub$.select.and.returnValue(componentsMarbleStream$); - - // When - const response$ = service.getModel(id, router.state.routePathSegments); - - // Then - m.expect(response$).toBeObservable(expectedModelMarbleStream$); - })); - - it('should verify will emit on every status', marbles((m) => { - // Given - const cA = createStoreState(createComponentState(router, id, INITIALIZED).toLiteral()); - const cB = createStoreState(createComponentState(router, id, IDLE).toLiteral()); - const cC = createStoreState(createComponentState(router, id, LOADING).toLiteral()); - const cD = createStoreState(createComponentState(router, id, LOADED).toLiteral()); - const cE = createStoreState(createComponentState(router, id, FAILED).toLiteral()); - const componentsMarbleStream$ = m.cold('-a--bc---d---e-', { - a: cA[STORE_COMPONENTS], - b: cB[STORE_COMPONENTS], - c: cC[STORE_COMPONENTS], - d: cD[STORE_COMPONENTS], - e: cE[STORE_COMPONENTS] - }); - const expectedModelMarbleStream$ = m.cold('-a--bc---d---e-', { - a: ComponentModel.of(getComponentState(cA, id), cA[STORE_ROUTER]), - b: ComponentModel.of(getComponentState(cB, id), cB[STORE_ROUTER]), - c: ComponentModel.of(getComponentState(cC, id), cC[STORE_ROUTER]), - d: ComponentModel.of(getComponentState(cD, id), cD[STORE_ROUTER]), - e: ComponentModel.of(getComponentState(cE, id), cE[STORE_ROUTER]) - }); - storeStub$.select.and.returnValue(componentsMarbleStream$); - routerServiceStub.get.and.returnValue(m.cold('a', { a: router })); - - // When - const response$ = service.getModel(id, router.state.routePathSegments, ['*']); - - // Then - m.expect(response$).toBeObservable(expectedModelMarbleStream$); - })); - - it('should verify will emit on requested statuses', marbles((m) => { - // Given - const cA = createStoreState(createComponentState(router, id, INITIALIZED).toLiteral()); - const cB = createStoreState(createComponentState(router, id, IDLE).toLiteral()); - const cC = createStoreState(createComponentState(router, id, LOADING).toLiteral()); - const cD = createStoreState(createComponentState(router, id, LOADED).toLiteral()); - const cE = createStoreState(createComponentState(router, id, FAILED).toLiteral()); - const componentsMarbleStream$ = m.cold('-a--bc---d---e-', { - a: cA[STORE_COMPONENTS], - b: cB[STORE_COMPONENTS], - c: cC[STORE_COMPONENTS], - d: cD[STORE_COMPONENTS], - e: cE[STORE_COMPONENTS] - }); - const expectedModelMarbleStream$ = m.cold('-----c-------e-', { - c: ComponentModel.of(getComponentState(cC, id), cC[STORE_ROUTER]), - e: ComponentModel.of(getComponentState(cE, id), cE[STORE_ROUTER]) - }); - storeStub$.select.and.returnValue(componentsMarbleStream$); - routerServiceStub.get.and.returnValue(m.cold('a', { a: router })); - - // When - const response$ = service.getModel(id, router.state.routePathSegments, [LOADING, FAILED]); - - // Then - m.expect(response$).toBeObservable(expectedModelMarbleStream$); - })); - - it('should verify will emit on default statuses', marbles((m) => { - // Given - const cA = createStoreState(createComponentState(router, id, INITIALIZED).toLiteral()); - const cB = createStoreState(createComponentState(router, id, IDLE).toLiteral()); - const cC = createStoreState(createComponentState(router, id, LOADING).toLiteral()); - const cD = createStoreState(createComponentState(router, id, LOADED).toLiteral()); - const cE = createStoreState(createComponentState(router, id, LOADING).toLiteral()); - const cF = createStoreState(createComponentState(router, id, FAILED).toLiteral()); - const componentsMarbleStream$ = m.cold('-a--bc---d---e---f-', { - a: cA[STORE_COMPONENTS], - b: cB[STORE_COMPONENTS], - c: cC[STORE_COMPONENTS], - d: cD[STORE_COMPONENTS], - e: cE[STORE_COMPONENTS], - f: cF[STORE_COMPONENTS] - }); - const expectedModelMarbleStream$ = m.cold('---------d-------f-', { - d: ComponentModel.of(getComponentState(cD, id), cD[STORE_ROUTER]), - f: ComponentModel.of(getComponentState(cF, id), cF[STORE_ROUTER]) - }); - storeStub$.select.and.returnValue(componentsMarbleStream$); - routerServiceStub.get.and.returnValue(m.cold('a', { a: router })); - - // When - const response$ = service.getModel(id, router.state.routePathSegments); - - // Then - m.expect(response$).toBeObservable(expectedModelMarbleStream$); - })); - }); - - describe('|dispatchAction|', () => { - it('should verify will invoke correct methods', () => { - // Given - const componentState = createComponentState(router, id, LOADING); - const typeStub = '[component] Some Action'; - const modelStub = { - getComponentState: () => componentState - } as ComponentModel; - const getModelSpy = spyOn(service, 'getModel').and.returnValue(of(modelStub)); - const actionStub = { type: typeStub, payload: componentState, task: undefined }; - const genericActionOfSpy = spyOn(GenericAction, 'of').and.returnValue(actionStub); - - // When - service.dispatchAction(typeStub, componentState); - - // Then - expect(getModelSpy).toHaveBeenCalledWith(componentState.id, componentState.routePathSegments, ['*']); - expect(genericActionOfSpy).toHaveBeenCalledWith(typeStub, componentState, undefined); - expect(storeStub$.dispatch).toHaveBeenCalledWith(actionStub); - }); - - it('should verify will invoke correct methods when Task is provided', () => { - // Given - const taskIdentifier = `search_data __ ${ new Date().toISOString() }`; - const componentState = createComponentState(router, id, INITIALIZED); - const typeStub = '[component] Load Users'; - const modelStub = { - getComponentState: () => componentState - } as ComponentModel; - const getModelSpy = spyOn(service, 'getModel').and.returnValue(of(modelStub)); - const actionStub = { - type: typeStub, - payload: componentState, - task: taskIdentifier - }; - const genericActionOfSpy = spyOn(GenericAction, 'of').and.returnValue(actionStub); - - // When - service.dispatchAction(typeStub, componentState, taskIdentifier); - - // Then - expect(getModelSpy).toHaveBeenCalledWith(componentState.id, componentState.routePathSegments, ['*']); - expect(genericActionOfSpy).toHaveBeenCalledWith(typeStub, componentState, taskIdentifier); - expect(storeStub$.dispatch).toHaveBeenCalledWith(actionStub); - }); - }); - }); + let storeStub$: jasmine.SpyObj>; + let routerServiceStub: jasmine.SpyObj; + + let service: ComponentService; + + beforeEach(() => { + storeStub$ = jasmine.createSpyObj>('store', [ + 'select', + 'dispatch' + ]); + routerServiceStub = jasmine.createSpyObj('routerService', [ + 'get', + 'getState' + ]); + + TestBed.configureTestingModule({ + providers: [ + { provide: Store, useValue: storeStub$ }, + { provide: RouterService, useValue: routerServiceStub }, + { provide: ComponentService, useClass: ComponentServiceImpl } + ] + }); + + service = TestBed.inject(ComponentService); + }); + + it('should verify service is created', () => { + // Then + expect(service).toBeDefined(); + }); + + describe('Methods::', () => { + let id: string; + let components: LiteralComponentsState; + let router: RouterState; + + beforeEach(() => { + id = 'testComponent10'; + router = createStoreState()[STORE_ROUTER]; + + routerServiceStub.getState.and.returnValue(of(router.state)); + routerServiceStub.get.and.returnValue(of(router)); + }); + + describe('|init|', () => { + it('should verify will initialize correct component and dispatch ComponentInit', () => { + // Given + const componentState = createComponentState(router, id, INITIALIZED); + + storeStub$.select.and.callFake((param) => { + if (param === STORE_COMPONENTS) { + components = createStoreState(componentState.toLiteral())[ + STORE_COMPONENTS + ]; + + return of(components); + } + + return of(createStoreState()); + }); + + // When + const response$ = service.init(id, router.state); + + // Then + expect(storeStub$.select.calls.argsFor(0)).toEqual([ + jasmine.any(Function) + ]); + expect(storeStub$.select.calls.argsFor(1)).toEqual([STORE_COMPONENTS]); + expect(storeStub$.dispatch).toHaveBeenCalledWith( + ComponentInit.of(componentState) + ); + + response$.subscribe((model) => { + expect(model['_routerState']).toEqual(router); + expect(model['_componentState']).toEqual( + getComponentState(components, id) + ); + expect(model.status).toEqual(INITIALIZED); + }); + + expect(routerServiceStub.getState).toHaveBeenCalled(); + expect(storeStub$.select.calls.argsFor(2)).toEqual([STORE_COMPONENTS]); + expect(routerServiceStub.get).toHaveBeenCalled(); + }, 1000); + + it('should verify wont dispatch ComponentInit', () => { + // Given + const componentState = createComponentState(router, id, LOADED); + + storeStub$.select.and.callFake((param) => { + if (param === STORE_COMPONENTS) { + components = createStoreState(componentState.toLiteral())[ + STORE_COMPONENTS + ]; + + return of(components); + } + + return of(createStoreState(componentState.toLiteral())); + }); + + // When + const response$ = service.init(id, router.state); + + // Then + expect(storeStub$.select.calls.argsFor(0)).toEqual([ + jasmine.any(Function) + ]); + expect(storeStub$.dispatch).not.toHaveBeenCalled(); + expect(storeStub$.select.calls.argsFor(1)).toEqual([STORE_COMPONENTS]); + + response$.subscribe((model) => { + expect(model['_routerState']).toEqual(router); + expect(model['_componentState']).toEqual( + getComponentState(components, id) + ); + expect(model.status).toEqual(LOADED); + }); + + expect(routerServiceStub.getState).toHaveBeenCalled(); + expect(storeStub$.select.calls.argsFor(2)).toEqual([STORE_COMPONENTS]); + expect(routerServiceStub.get).toHaveBeenCalled(); + }, 1000); + }); + + describe('|idle|', () => { + it('should verify will dispatch ComponentIdle with provided ComponentState', () => { + // Given + const componentState = createComponentState(router, id, LOADED); + + // When + service.idle(componentState); + + // Then + expect(storeStub$.dispatch).toHaveBeenCalledWith( + ComponentIdle.of(componentState) + ); + }); + }); + + describe('|load|', () => { + it('should verify will dispatch ComponentLoading with provided ComponentState', () => { + // Given + const componentState = createComponentState(router, id, FAILED); + routerServiceStub.get.and.returnValue(of(router)); + storeStub$.select.and.returnValue( + of( + createStoreState( + createComponentState(router, id, LOADED).toLiteral() + )[STORE_COMPONENTS] + ) + ); + + // When + const response$ = service.load(componentState); + + // Then + expect(routerServiceStub.get).toHaveBeenCalledTimes(1); + // @ts-ignore + expect(storeStub$.dispatch.calls.argsFor(0)).toEqual([ + ComponentLoading.of( + componentState.copy({ + navigationId: router.navigationId, + status: LOADING + }) + ) + ]); + + const assertionComponentState = createComponentState( + router, + id, + LOADED + ); + response$.subscribe((model) => { + expect(model['_routerState']).toEqual(router); + expect(model['_componentState']).toEqual(assertionComponentState); + expect(model.status).toEqual(LOADED); + }); + + // @ts-ignore + expect(storeStub$.select).toHaveBeenCalledWith(STORE_COMPONENTS); + expect(routerServiceStub.getState).toHaveBeenCalled(); + expect(routerServiceStub.get).toHaveBeenCalledTimes(2); + }, 1000); + + it('should verify will dispatch ComponentIdle and ComponentLoading with provided component id', () => { + // Given + const componentState = createComponentState(router, id, INITIALIZED); + routerServiceStub.get.and.returnValue(of(router)); + storeStub$.select.and.returnValue( + of( + createStoreState( + createComponentState(router, id, LOADED).toLiteral() + )[STORE_COMPONENTS] + ) + ); + + // When + const response$ = service.load(componentState); + + // Then + expect(routerServiceStub.get).toHaveBeenCalledTimes(1); + // @ts-ignore + expect(storeStub$.dispatch.calls.argsFor(0)).toEqual([ + ComponentIdle.of( + createComponentState(router, id, IDLE).copy({ + navigationId: router.navigationId + }) + ) + ]); + expect(storeStub$.dispatch.calls.argsFor(1)).toEqual([ + ComponentLoading.of( + createComponentState(router, id, LOADING).copy({ + navigationId: router.navigationId + }) + ) + ]); + + const assertionComponentState = createComponentState( + router, + id, + LOADED + ); + response$.subscribe((model) => { + expect(model['_routerState']).toEqual(router); + expect(model['_componentState']).toEqual(assertionComponentState); + expect(model.status).toEqual(LOADED); + }); + + // @ts-ignore + expect(storeStub$.select).toHaveBeenCalledWith(STORE_COMPONENTS); + expect(routerServiceStub.getState).toHaveBeenCalled(); + expect(routerServiceStub.get).toHaveBeenCalledTimes(2); + }, 1000); + }); + + describe('|update|', () => { + it('should verify will dispatch ComponentUpdate with provided ComponentState', () => { + // Given + const componentState = createComponentState(router, id, LOADED); + + // When + service.update(componentState); + + // Then + expect(routerServiceStub.get).toHaveBeenCalled(); + expect(storeStub$.dispatch).toHaveBeenCalledWith( + ComponentUpdate.of( + componentState.copy({ navigationId: router.navigationId }) + ) + ); + }); + }); + + describe('|hasInSegment|', () => { + it( + 'should verify will return true when ComponentState exist', + marbles((m) => { + // Given + const componentsStream$ = m.cold('---a', { + a: createStoreState( + createComponentState( + router, + 'someComponentId', + LOADED + ).toLiteral() + )[STORE_COMPONENTS] + }); + const routeStateStream$ = m.cold('--a', { + a: router.state + }); + storeStub$.select.and.returnValue(componentsStream$); + routerServiceStub.getState.and.returnValue(routeStateStream$); + const expected$ = m.cold('---(a|)', { a: true }); + + // When + const response$ = service.hasInSegment('someComponentId', [ + 'test_domain/context', + 'test_entity/10' + ]); + + // Then + m.expect(response$).toBeObservable(expected$); + }) + ); + + it( + 'should verify will return false when ComponentState not exist', + marbles((m) => { + // Given + const componentsStream$ = m.cold('---a', { + a: createStoreState( + createComponentState( + router, + 'someComponentId', + LOADED + ).toLiteral() + )[STORE_COMPONENTS] + }); + const routeStateStream$ = m.cold('---a', { + a: router.state + }); + storeStub$.select.and.returnValue(componentsStream$); + routerServiceStub.getState.and.returnValue(routeStateStream$); + const expected$ = m.cold('---(a|)', { a: false }); + + // When + const response$ = service.hasInSegment('newComponentId', [ + 'test_domain/context', + 'test_entity/10' + ]); + + // Then + m.expect(response$).toBeObservable(expected$); + }) + ); + }); + + describe('|onInit|', () => { + it( + `should verify wont emit when state doesn't exist`, + marbles((m) => { + // Given + const cA = createStoreState( + createComponentState(router, 'testId10', INITIALIZED).toLiteral() + ); + const cB = createStoreState( + createComponentState(router, 'testId10', IDLE).toLiteral() + ); + const cC = createStoreState( + createComponentState(router, 'testId10', LOADING).toLiteral() + ); + const cD = createStoreState( + createComponentState(router, 'testId10', LOADED).toLiteral() + ); + const cE = createStoreState( + createComponentState(router, 'testId22', LOADED).toLiteral() + ); + const cF = createStoreState( + createComponentState(router, 'testId33', LOADED).toLiteral() + ); + const componentsMarbleStream$ = m.cold('-a--bc-d-e--f-|', { + a: cA[STORE_COMPONENTS], + b: cB[STORE_COMPONENTS], + c: cC[STORE_COMPONENTS], + d: cD[STORE_COMPONENTS], + e: cE[STORE_COMPONENTS], + f: cF[STORE_COMPONENTS] + }); + const expectedModelMarbleStream$ = m.cold('--------------|'); + storeStub$.select.and.returnValue(componentsMarbleStream$); + + // When + const response$ = service.onInit(id, router.state.routePathSegments); + + // Then + m.expect(response$).toBeObservable(expectedModelMarbleStream$); + }) + ); + + it('should verify will emit when state exist', () => { + // Given + const componentState = createComponentState(router, id, INITIALIZED); + const storeState = createStoreState(componentState.toLiteral()); + + storeStub$.select.and.returnValue(of(storeState[STORE_COMPONENTS])); + + // When + const response$ = service.onInit(id, router.state.routePathSegments); + + // Then + // @ts-ignore + expect(storeStub$.select.calls.argsFor(0)).toEqual([STORE_COMPONENTS]); + expect(routerServiceStub.getState).toHaveBeenCalled(); + + response$.subscribe((model) => { + expect(model).toBeDefined(); + expect(model.status).toEqual(INITIALIZED); + }); + + expect(storeStub$.select.calls.argsFor(1)).toEqual([STORE_COMPONENTS]); + expect(routerServiceStub.get).toHaveBeenCalled(); + }, 1000); + }); + + describe('|onLoaded|', () => { + it( + `should verify wont emit when state doesn't exist`, + marbles((m) => { + // Given + const cA = createStoreState( + createComponentState(router, 'testId1', INITIALIZED).toLiteral() + ); + const cB = createStoreState( + createComponentState(router, 'testId1', IDLE).toLiteral() + ); + const cC = createStoreState( + createComponentState(router, 'testId1', LOADING).toLiteral() + ); + const cD = createStoreState( + createComponentState(router, 'testId1', LOADED).toLiteral() + ); + const cE = createStoreState( + createComponentState(router, 'testId2', LOADED).toLiteral() + ); + const cF = createStoreState( + createComponentState(router, 'testId3', LOADED).toLiteral() + ); + const componentsMarbleStream$ = m.cold('-a--bc---d--e----f-|', { + a: cA[STORE_COMPONENTS], + b: cB[STORE_COMPONENTS], + c: cC[STORE_COMPONENTS], + d: cD[STORE_COMPONENTS], + e: cE[STORE_COMPONENTS], + f: cF[STORE_COMPONENTS] + }); + const expectedModelMarbleStream$ = m.cold('-------------------|'); + storeStub$.select.and.returnValue(componentsMarbleStream$); + + // When + const response$ = service.onLoaded( + id, + router.state.routePathSegments + ); + + // Then + m.expect(response$).toBeObservable(expectedModelMarbleStream$); + }) + ); + + it( + 'should verify wont emit when state status is not LOADED or FAILED', + marbles((m) => { + // Given + const cA = createStoreState( + createComponentState(router, id, INITIALIZED).toLiteral() + ); + const cB = createStoreState( + createComponentState(router, id, IDLE).toLiteral() + ); + const cC = createStoreState( + createComponentState(router, id, LOADING).toLiteral() + ); + const componentsMarbleStream$ = m.cold('-a--bc---|', { + a: cA[STORE_COMPONENTS], + b: cB[STORE_COMPONENTS], + c: cC[STORE_COMPONENTS] + }); + const expectedModelMarbleStream$ = m.cold('---------|'); + storeStub$.select.and.returnValue(componentsMarbleStream$); + + // When + const response$ = service.onLoaded( + id, + router.state.routePathSegments + ); + + // Then + m.expect(response$).toBeObservable(expectedModelMarbleStream$); + }) + ); + + it( + 'should verify will emit when state exist and its status is LOADED', + marbles((m) => { + // Given + const cA = createStoreState( + createComponentState(router, id, INITIALIZED).toLiteral() + ); + const cB = createStoreState( + createComponentState(router, id, IDLE).toLiteral() + ); + const cC = createStoreState( + createComponentState(router, id, LOADING).toLiteral() + ); + const cD = createStoreState( + createComponentState(router, id, LOADED).toLiteral() + ); + const componentsMarbleStream$ = m.cold('-a--bc---d---', { + a: cA[STORE_COMPONENTS], + b: cB[STORE_COMPONENTS], + c: cC[STORE_COMPONENTS], + d: cD[STORE_COMPONENTS] + }); + const componentsMarbleStream1$ = m.cold('d----', { + d: cD[STORE_COMPONENTS] + }); + const expectedModelMarbleStream$ = m.cold('---------(a|)', { + a: ComponentModel.of(getComponentState(cD, id), cD[STORE_ROUTER]) + }); + let cnt = 0; + storeStub$.select.and.callFake(() => { + cnt++; + if (cnt === 1) { + return componentsMarbleStream$; + } + + if (cnt === 2) { + return componentsMarbleStream1$; + } + + return throwError(() => new Error(`This shouldn't be reachable`)); + }); + routerServiceStub.getState.and.returnValue( + m.cold('a----', { a: router.state }) + ); + routerServiceStub.get.and.returnValue(m.cold('a----', { a: router })); + + // When + const response$ = service.onLoaded( + id, + router.state.routePathSegments + ); + + // Then + m.expect(response$).toBeObservable(expectedModelMarbleStream$); + }) + ); + + it( + 'should verify will emit when state exist and its status is FAILED', + marbles((m) => { + // Given + const cA = createStoreState( + createComponentState(router, id, INITIALIZED).toLiteral() + ); + const cB = createStoreState( + createComponentState(router, id, IDLE).toLiteral() + ); + const cC = createStoreState( + createComponentState(router, id, LOADING).toLiteral() + ); + const cD = createStoreState( + createComponentState(router, id, FAILED).toLiteral() + ); + const componentsMarbleStream$ = m.cold('-a--bc---d---', { + a: cA[STORE_COMPONENTS], + b: cB[STORE_COMPONENTS], + c: cC[STORE_COMPONENTS], + d: cD[STORE_COMPONENTS] + }); + const componentsMarbleStream1$ = m.cold('d----', { + d: cD[STORE_COMPONENTS] + }); + const expectedModelMarbleStream$ = m.cold('---------(a|)', { + a: ComponentModel.of(getComponentState(cD, id), cD[STORE_ROUTER]) + }); + let cnt = 0; + storeStub$.select.and.callFake(() => { + cnt++; + if (cnt === 1) { + return componentsMarbleStream$; + } + + if (cnt === 2) { + return componentsMarbleStream1$; + } + + return throwError(() => new Error(`This shouldn't be reachable`)); + }); + routerServiceStub.getState.and.returnValue( + m.cold('a----', { a: router.state }) + ); + routerServiceStub.get.and.returnValue(m.cold('a----', { a: router })); + + // When + const response$ = service.onLoaded( + id, + router.state.routePathSegments + ); + + // Then + m.expect(response$).toBeObservable(expectedModelMarbleStream$); + }) + ); + }); + + describe('|getModel|', () => { + it( + `should verify wont emit when state doesn't exist`, + marbles((m) => { + // Given + const cA = createStoreState( + createComponentState(router, 'testId21', INITIALIZED).toLiteral() + ); + const cB = createStoreState( + createComponentState(router, 'testId21', IDLE).toLiteral() + ); + const cC = createStoreState( + createComponentState(router, 'testId21', LOADING).toLiteral() + ); + const cD = createStoreState( + createComponentState(router, 'testId21', LOADED).toLiteral() + ); + const cE = createStoreState( + createComponentState(router, 'testId32', LOADED).toLiteral() + ); + const cF = createStoreState( + createComponentState(router, 'testId33', LOADED).toLiteral() + ); + const componentsMarbleStream$ = m.cold('--a-bc---d----e--f---|', { + a: cA[STORE_COMPONENTS], + b: cB[STORE_COMPONENTS], + c: cC[STORE_COMPONENTS], + d: cD[STORE_COMPONENTS], + e: cE[STORE_COMPONENTS], + f: cF[STORE_COMPONENTS] + }); + const expectedModelMarbleStream$ = m.cold('---------------------|'); + storeStub$.select.and.returnValue(componentsMarbleStream$); + + // When + const response$ = service.getModel( + id, + router.state.routePathSegments + ); + + // Then + m.expect(response$).toBeObservable(expectedModelMarbleStream$); + }) + ); + + it( + 'should verify will emit on every status', + marbles((m) => { + // Given + const cA = createStoreState( + createComponentState(router, id, INITIALIZED).toLiteral() + ); + const cB = createStoreState( + createComponentState(router, id, IDLE).toLiteral() + ); + const cC = createStoreState( + createComponentState(router, id, LOADING).toLiteral() + ); + const cD = createStoreState( + createComponentState(router, id, LOADED).toLiteral() + ); + const cE = createStoreState( + createComponentState(router, id, FAILED).toLiteral() + ); + const componentsMarbleStream$ = m.cold('-a--bc---d---e-', { + a: cA[STORE_COMPONENTS], + b: cB[STORE_COMPONENTS], + c: cC[STORE_COMPONENTS], + d: cD[STORE_COMPONENTS], + e: cE[STORE_COMPONENTS] + }); + const expectedModelMarbleStream$ = m.cold('-a--bc---d---e-', { + a: ComponentModel.of(getComponentState(cA, id), cA[STORE_ROUTER]), + b: ComponentModel.of(getComponentState(cB, id), cB[STORE_ROUTER]), + c: ComponentModel.of(getComponentState(cC, id), cC[STORE_ROUTER]), + d: ComponentModel.of(getComponentState(cD, id), cD[STORE_ROUTER]), + e: ComponentModel.of(getComponentState(cE, id), cE[STORE_ROUTER]) + }); + storeStub$.select.and.returnValue(componentsMarbleStream$); + routerServiceStub.get.and.returnValue(m.cold('a', { a: router })); + + // When + const response$ = service.getModel( + id, + router.state.routePathSegments, + ['*'] + ); + + // Then + m.expect(response$).toBeObservable(expectedModelMarbleStream$); + }) + ); + + it( + 'should verify will emit on requested statuses', + marbles((m) => { + // Given + const cA = createStoreState( + createComponentState(router, id, INITIALIZED).toLiteral() + ); + const cB = createStoreState( + createComponentState(router, id, IDLE).toLiteral() + ); + const cC = createStoreState( + createComponentState(router, id, LOADING).toLiteral() + ); + const cD = createStoreState( + createComponentState(router, id, LOADED).toLiteral() + ); + const cE = createStoreState( + createComponentState(router, id, FAILED).toLiteral() + ); + const componentsMarbleStream$ = m.cold('-a--bc---d---e-', { + a: cA[STORE_COMPONENTS], + b: cB[STORE_COMPONENTS], + c: cC[STORE_COMPONENTS], + d: cD[STORE_COMPONENTS], + e: cE[STORE_COMPONENTS] + }); + const expectedModelMarbleStream$ = m.cold('-----c-------e-', { + c: ComponentModel.of(getComponentState(cC, id), cC[STORE_ROUTER]), + e: ComponentModel.of(getComponentState(cE, id), cE[STORE_ROUTER]) + }); + storeStub$.select.and.returnValue(componentsMarbleStream$); + routerServiceStub.get.and.returnValue(m.cold('a', { a: router })); + + // When + const response$ = service.getModel( + id, + router.state.routePathSegments, + [LOADING, FAILED] + ); + + // Then + m.expect(response$).toBeObservable(expectedModelMarbleStream$); + }) + ); + + it( + 'should verify will emit on default statuses', + marbles((m) => { + // Given + const cA = createStoreState( + createComponentState(router, id, INITIALIZED).toLiteral() + ); + const cB = createStoreState( + createComponentState(router, id, IDLE).toLiteral() + ); + const cC = createStoreState( + createComponentState(router, id, LOADING).toLiteral() + ); + const cD = createStoreState( + createComponentState(router, id, LOADED).toLiteral() + ); + const cE = createStoreState( + createComponentState(router, id, LOADING).toLiteral() + ); + const cF = createStoreState( + createComponentState(router, id, FAILED).toLiteral() + ); + const componentsMarbleStream$ = m.cold('-a--bc---d---e---f-', { + a: cA[STORE_COMPONENTS], + b: cB[STORE_COMPONENTS], + c: cC[STORE_COMPONENTS], + d: cD[STORE_COMPONENTS], + e: cE[STORE_COMPONENTS], + f: cF[STORE_COMPONENTS] + }); + const expectedModelMarbleStream$ = m.cold('---------d-------f-', { + d: ComponentModel.of(getComponentState(cD, id), cD[STORE_ROUTER]), + f: ComponentModel.of(getComponentState(cF, id), cF[STORE_ROUTER]) + }); + storeStub$.select.and.returnValue(componentsMarbleStream$); + routerServiceStub.get.and.returnValue(m.cold('a', { a: router })); + + // When + const response$ = service.getModel( + id, + router.state.routePathSegments + ); + + // Then + m.expect(response$).toBeObservable(expectedModelMarbleStream$); + }) + ); + }); + + describe('|dispatchAction|', () => { + it('should verify will invoke correct methods', () => { + // Given + const componentState = createComponentState(router, id, LOADING); + const typeStub = '[component] Some Action'; + const modelStub = { + getComponentState: () => componentState + } as ComponentModel; + const getModelSpy = spyOn(service, 'getModel').and.returnValue( + of(modelStub) + ); + const actionStub = { + type: typeStub, + payload: componentState, + task: undefined + }; + const genericActionOfSpy = spyOn(GenericAction, 'of').and.returnValue( + actionStub + ); + + // When + service.dispatchAction(typeStub, componentState); + + // Then + expect(getModelSpy).toHaveBeenCalledWith( + componentState.id, + componentState.routePathSegments, + ['*'] + ); + expect(genericActionOfSpy).toHaveBeenCalledWith( + typeStub, + componentState, + undefined + ); + expect(storeStub$.dispatch).toHaveBeenCalledWith(actionStub); + }); + + it('should verify will invoke correct methods when Task is provided', () => { + // Given + const taskIdentifier = `search_data __ ${new Date().toISOString()}`; + const componentState = createComponentState(router, id, INITIALIZED); + const typeStub = '[component] Load Users'; + const modelStub = { + getComponentState: () => componentState + } as ComponentModel; + const getModelSpy = spyOn(service, 'getModel').and.returnValue( + of(modelStub) + ); + const actionStub = { + type: typeStub, + payload: componentState, + task: taskIdentifier + }; + const genericActionOfSpy = spyOn(GenericAction, 'of').and.returnValue( + actionStub + ); + + // When + service.dispatchAction(typeStub, componentState, taskIdentifier); + + // Then + expect(getModelSpy).toHaveBeenCalledWith( + componentState.id, + componentState.routePathSegments, + ['*'] + ); + expect(genericActionOfSpy).toHaveBeenCalledWith( + typeStub, + componentState, + taskIdentifier + ); + expect(storeStub$.dispatch).toHaveBeenCalledWith(actionStub); + }); + }); + }); }); -const createComponentState = (router: RouterReducerState, id: string, status: StatusType) => { - return ComponentStateImpl.of({ - id, - status, - routePath: router?.state.routePath ?? null, - routePathSegments: router?.state.routePathSegments ?? [], - navigationId: router.navigationId - }); +const createComponentState = ( + router: RouterReducerState, + id: string, + status: StatusType +) => { + return ComponentStateImpl.of({ + id, + status, + routePath: router?.state.routePath ?? null, + routePathSegments: router?.state.routePathSegments ?? [], + navigationId: router.navigationId + }); }; -const getComponentState = (state: StoreState | LiteralComponentsState, id: string): ComponentState => { - if (CollectionsUtil.isNil(state)) { - return ComponentStateImpl.of({}); - } - - const componentsState = ( - CollectionsUtil.isNil((state as LiteralComponentsState).routePathSegments) - ? state[STORE_COMPONENTS] - : state - ) as LiteralComponentsState; - - return ComponentStateImpl.fromLiteralComponentState( - componentsState - .routePathSegments['test_domain/context'] - .routePathSegments['test_entity/10'] - .components[id] - ); +const getComponentState = ( + state: StoreState | LiteralComponentsState, + id: string +): ComponentState => { + if (CollectionsUtil.isNil(state)) { + return ComponentStateImpl.of({}); + } + + const componentsState = ( + CollectionsUtil.isNil((state as LiteralComponentsState).routePathSegments) + ? state[STORE_COMPONENTS] + : state + ) as LiteralComponentsState; + + return ComponentStateImpl.fromLiteralComponentState( + componentsState.routePathSegments['test_domain/context'].routePathSegments[ + 'test_entity/10' + ].components[id] + ); }; const createStoreState = (state?: LiteralComponentState): StoreState => { - return CollectionsUtil.isNil(state) - ? { - [STORE_ROUTER]: RouterState.of( - RouteState.of( - RouteSegments.of( - 'test_entity/10', - {}, - { entity: 10 }, - null, - RouteSegments.of('test_domain/context') - ), - '/domain/context/entity/10' - ), - 3 - ), - [STORE_COMPONENTS]: { - components: {}, - routePathSegments: {} - } - } - : { - [STORE_ROUTER]: RouterState.of( - RouteState.of( - RouteSegments.of( - 'test_entity/10', - {}, - { entity: 10 }, - null, - RouteSegments.of('test_domain/context') - ), - '/domain/context/entity/10' - ), - 3 - ), - [STORE_COMPONENTS]: { - components: {}, - routePathSegments: { - 'test_domain/context': { - components: {}, - routePathSegments: { - 'test_entity/10': { - components: { - [state.id]: state - }, - routePathSegments: {} - } - } - } - } - } - }; + return CollectionsUtil.isNil(state) + ? { + [STORE_ROUTER]: RouterState.of( + RouteState.of( + RouteSegments.of( + 'test_entity/10', + {}, + { entity: 10 }, + null, + RouteSegments.of('test_domain/context') + ), + '/domain/context/entity/10' + ), + 3 + ), + [STORE_COMPONENTS]: { + components: {}, + routePathSegments: {} + } + } + : { + [STORE_ROUTER]: RouterState.of( + RouteState.of( + RouteSegments.of( + 'test_entity/10', + {}, + { entity: 10 }, + null, + RouteSegments.of('test_domain/context') + ), + '/domain/context/entity/10' + ), + 3 + ), + [STORE_COMPONENTS]: { + components: {}, + routePathSegments: { + 'test_domain/context': { + components: {}, + routePathSegments: { + 'test_entity/10': { + components: { + [state.id]: state + }, + routePathSegments: {} + } + } + } + } + } + }; }; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/services/component.service.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/services/component.service.ts index 454995e8b6..da641e7ae5 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/services/component.service.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/services/component.service.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -19,18 +17,23 @@ import { CollectionsUtil } from '../../../utils'; import { RouterService, RouterState, RouteState } from '../../router'; import { GenericAction, STORE_COMPONENTS, StoreState } from '../../ngrx'; -import { ComponentIdle, ComponentInit, ComponentLoading, ComponentUpdate } from '../state'; import { - ComponentsStateHelper, - ComponentState, - ComponentStateImpl, - FAILED, - IDLE, - INITIALIZED, - LiteralComponentsState, - LOADED, - LOADING, - StatusType + ComponentIdle, + ComponentInit, + ComponentLoading, + ComponentUpdate +} from '../state'; +import { + ComponentsStateHelper, + ComponentState, + ComponentStateImpl, + FAILED, + IDLE, + INITIALIZED, + LiteralComponentsState, + LOADED, + LOADING, + StatusType } from '../model/state'; import { ComponentModel } from '../model'; @@ -40,60 +43,77 @@ import { ComponentModel } from '../model'; * */ export abstract class ComponentService { - /** - * ** Initialize Component State and return Model. - */ - abstract init(id: string, routeState: RouteState): Observable; - - /** - * ** Set Component status to IDLE. - */ - abstract idle(componentState: ComponentState): void; - - /** - * ** Load Component State and return Model. - */ - abstract load(componentState: ComponentState): Observable; - - /** - * ** Update Component State. - */ - abstract update(componentState: ComponentState): void; - - /** - * ** Acknowledge if has ComponentState in segment. - * - * - true - has ComponentState. - * - false - doesn't have ComponentState. - */ - abstract hasInSegment(id: string, routePathSegments: string[]): Observable; - - /** - * ** Listener that fires once after successful Component State initialization and returns Model. - */ - abstract onInit(id: string, routePathSegments: string[]): Observable; - - /** - * ** Listener that fires once after successful Component State load and returns Model. - */ - abstract onLoaded(id: string, routePathSegments: string[]): Observable; - - /** - * ** Returns stream with value Component Model and fires whenever Component State changes in Store. - * - * - If no statusWatch provided by default will listen for statuses {@link LOADED} and {@link FAILED}. - */ - abstract getModel(id: string, routePathSegments: string[], statusWatch?: Array): Observable; - - /** - * ** Dispatch GenericAction with provided Type, ComponentState and optionally task. - */ - abstract dispatchAction(type: string, componentState: ComponentState, task?: string): void; - - /** - * ** Initialize Service. - */ - abstract initialize(): void; + /** + * ** Initialize Component State and return Model. + */ + abstract init(id: string, routeState: RouteState): Observable; + + /** + * ** Set Component status to IDLE. + */ + abstract idle(componentState: ComponentState): void; + + /** + * ** Load Component State and return Model. + */ + abstract load(componentState: ComponentState): Observable; + + /** + * ** Update Component State. + */ + abstract update(componentState: ComponentState): void; + + /** + * ** Acknowledge if has ComponentState in segment. + * + * - true - has ComponentState. + * - false - doesn't have ComponentState. + */ + abstract hasInSegment( + id: string, + routePathSegments: string[] + ): Observable; + + /** + * ** Listener that fires once after successful Component State initialization and returns Model. + */ + abstract onInit( + id: string, + routePathSegments: string[] + ): Observable; + + /** + * ** Listener that fires once after successful Component State load and returns Model. + */ + abstract onLoaded( + id: string, + routePathSegments: string[] + ): Observable; + + /** + * ** Returns stream with value Component Model and fires whenever Component State changes in Store. + * + * - If no statusWatch provided by default will listen for statuses {@link LOADED} and {@link FAILED}. + */ + abstract getModel( + id: string, + routePathSegments: string[], + statusWatch?: Array + ): Observable; + + /** + * ** Dispatch GenericAction with provided Type, ComponentState and optionally task. + */ + abstract dispatchAction( + type: string, + componentState: ComponentState, + task?: string + ): void; + + /** + * ** Initialize Service. + */ + abstract initialize(): void; } /** @@ -101,296 +121,328 @@ export abstract class ComponentService { */ @Injectable() export class ComponentServiceImpl extends ComponentService { - private readonly componentsStateHelper: ComponentsStateHelper; - - /** - * ** Constructor. - */ - constructor(private readonly store$: Store, - private readonly routerService: RouterService) { - super(); - - this.componentsStateHelper = new ComponentsStateHelper(); - } - - /** - * @inheritDoc - */ - init(id: string, routeState: RouteState): Observable { - this.store$ - .select((store) => store) - .pipe( - take(1), - map((store) => this._getComponentState(id, routeState.routePathSegments, store.router, store.components)) - ) - .subscribe((componentState) => { - if (componentState.status === INITIALIZED) { - this.store$.dispatch( - ComponentInit.of(componentState) - ); - } - }); - - return this.onInit(id, routeState.routePathSegments); - } - - /** - * @inheritDoc - */ - idle(componentState: ComponentState): void { - this.store$.dispatch( - ComponentIdle.of(componentState) - ); - } - - /** - * @inheritDoc - */ - load(componentState: ComponentState): Observable { - this.routerService - .get() - .pipe( - take(1) - ) - .subscribe((routerState: RouterState) => { - if (componentState.status === INITIALIZED) { - this.store$.dispatch( - ComponentIdle.of( - componentState.copy({ - status: IDLE, - navigationId: routerState.navigationId - }) - ) - ); - } - - this.store$.dispatch( - ComponentLoading.of( - componentState.copy({ - status: LOADING, - navigationId: routerState.navigationId - }) - ) - ); - }); - - return this.onLoaded(componentState.id, componentState.routePathSegments); - } - - /** - * @inheritDoc - */ - update(componentState: ComponentState): void { - this.routerService - .get() - .pipe( - take(1) - ) - .subscribe((routerState) => { - this.store$.dispatch( - ComponentUpdate.of( - componentState.copy({ - navigationId: routerState.navigationId - }) - ) - ); - }); - } - - /** - * @inheritDoc - */ - hasInSegment(id: string, routePathSegments: string[]): Observable { - return this.store$ - .select(STORE_COMPONENTS) - .pipe( - withLatestFrom(this.routerService.getState()), - map(([literalComponentsState, routeState]) => - this._isComponentInStatus(id, routePathSegments, literalComponentsState, routeState, ['*'])), - take(1) - ); - } - - /** - * @inheritDoc - */ - onInit(id: string, routePathSegments: string[]): Observable { - return this.store$ - .select(STORE_COMPONENTS) - .pipe( - withLatestFrom(this.routerService.getState()), - map(([literalComponentsState, routeState]) => - this._isComponentInStatus(id, routePathSegments, literalComponentsState, routeState, ['*'])), - filter((isInitialized) => isInitialized), - switchMap(() => this.getModel(id, routePathSegments, ['*'])), - take(1) - ); - } - - /** - * @inheritDoc - */ - onLoaded(id: string, routePathSegments: string[]): Observable { - return this.store$ - .select(STORE_COMPONENTS) - .pipe( - withLatestFrom(this.routerService.getState()), - map(([literalComponentsState, routeState]) => - this._isComponentInStatus(id, routePathSegments, literalComponentsState, routeState, [LOADED, FAILED])), - filter((isLoaded) => isLoaded), - switchMap(() => this.getModel(id, routePathSegments)), - take(1) - ); - } - - /** - * @inheritDoc - */ - getModel(id: string, routePathSegments: string[], statusWatch?: Array): Observable { - const _statusWatch = statusWatch ?? [LOADED, FAILED]; - - return this.store$ - .select(STORE_COMPONENTS) - .pipe( - switchMap((literalComponentsState) => this.routerService.get().pipe( - map((routerState) => [literalComponentsState, routerState]) - )), - filter(([literalComponentsState, routerState]: [LiteralComponentsState, RouterState]) => - this._isComponentInStatus(id, routePathSegments, literalComponentsState, routerState.state, _statusWatch)), - map(([literalComponentsState, routerState]) => - this._createModel(id, routePathSegments, literalComponentsState, routerState)) - ); - } - - /** - * @inheritDoc - */ - dispatchAction(type: string, componentState: ComponentState, task?: string): void { - this.getModel(componentState.id, componentState.routePathSegments, ['*']) - .pipe( - take(1) - ) - .subscribe((model) => - this.store$.dispatch( - GenericAction.of( - type, - model.getComponentState(), - task - ) - ) - ); - } - - /** - * @inheritDoc - */ - initialize() { - // No-op. - } - - // Get Component State from Store if exist, otherwise create new State. - private _getComponentState( - id: string, - routePathSegments: string[], - routerState: RouterState, - literalComponentsState: LiteralComponentsState): ComponentState { - - let _navigationId: number = null; - let _routePath: string = null; - let _routePathSegments: string[] = []; - - if (routerState) { - _navigationId = routerState.navigationId; - - if (routerState.state && !routePathSegments) { - _routePath = routerState.state.routePath; - _routePathSegments = routerState.state.routePathSegments; - } - } - - if (routePathSegments) { - _routePath = routePathSegments.slice().pop(); - _routePathSegments = routePathSegments; - } - - let componentState = this.componentsStateHelper - .setState(literalComponentsState) - .getComponentState( - id, - _routePathSegments - ); - - if (componentState) { - return componentState; - } - - componentState = ComponentStateImpl.of({ - id, - status: INITIALIZED, - routePath: _routePath, - routePathSegments: _routePathSegments, - navigationId: _navigationId - }); - - return componentState; - } - - // Utility method that filter if provided state is in desired status. - private _isComponentInStatus( - id: string, - routePathSegments: string[], - literalComponentsState: LiteralComponentsState, - routeState: RouteState, - statusWatch: Array): boolean { - - let _routePathSegments: string[] = []; - - if (CollectionsUtil.isArray(routePathSegments)) { - _routePathSegments = routePathSegments; - } else if (routeState) { - _routePathSegments = routeState.routePathSegments; - } - - const componentLiteralState = this.componentsStateHelper - .setState(literalComponentsState) - .getLiteralComponentState( - id, - _routePathSegments - ); - - if (!componentLiteralState) { - return false; - } - - if (statusWatch.indexOf('*') !== -1) { - return true; - } - - return statusWatch.indexOf(componentLiteralState.status) !== -1; - } - - // Creates Model from provided data. - private _createModel( - id: string, - routePathSegments: string[], - literalComponentsState: LiteralComponentsState, - routerState: RouterState): ComponentModel { - - let _routePathSegments: string[] = []; - - if (CollectionsUtil.isArray(routePathSegments)) { - _routePathSegments = routePathSegments; - } else if (routerState && routerState.state) { - _routePathSegments = routerState.state.routePathSegments; - } - - const componentState = this.componentsStateHelper - .setState(literalComponentsState) - .getComponentState( - id, - _routePathSegments - ); - - return ComponentModel.of(componentState, CollectionsUtil.cloneDeep(routerState)); - } + private readonly componentsStateHelper: ComponentsStateHelper; + + /** + * ** Constructor. + */ + constructor( + private readonly store$: Store, + private readonly routerService: RouterService + ) { + super(); + + this.componentsStateHelper = new ComponentsStateHelper(); + } + + /** + * @inheritDoc + */ + init(id: string, routeState: RouteState): Observable { + this.store$ + .select((store) => store) + .pipe( + take(1), + map((store) => + this._getComponentState( + id, + routeState.routePathSegments, + store.router, + store.components + ) + ) + ) + .subscribe((componentState) => { + if (componentState.status === INITIALIZED) { + this.store$.dispatch(ComponentInit.of(componentState)); + } + }); + + return this.onInit(id, routeState.routePathSegments); + } + + /** + * @inheritDoc + */ + idle(componentState: ComponentState): void { + this.store$.dispatch(ComponentIdle.of(componentState)); + } + + /** + * @inheritDoc + */ + load(componentState: ComponentState): Observable { + this.routerService + .get() + .pipe(take(1)) + .subscribe((routerState: RouterState) => { + if (componentState.status === INITIALIZED) { + this.store$.dispatch( + ComponentIdle.of( + componentState.copy({ + status: IDLE, + navigationId: routerState.navigationId + }) + ) + ); + } + + this.store$.dispatch( + ComponentLoading.of( + componentState.copy({ + status: LOADING, + navigationId: routerState.navigationId + }) + ) + ); + }); + + return this.onLoaded(componentState.id, componentState.routePathSegments); + } + + /** + * @inheritDoc + */ + update(componentState: ComponentState): void { + this.routerService + .get() + .pipe(take(1)) + .subscribe((routerState) => { + this.store$.dispatch( + ComponentUpdate.of( + componentState.copy({ + navigationId: routerState.navigationId + }) + ) + ); + }); + } + + /** + * @inheritDoc + */ + hasInSegment(id: string, routePathSegments: string[]): Observable { + return this.store$.select(STORE_COMPONENTS).pipe( + withLatestFrom(this.routerService.getState()), + map(([literalComponentsState, routeState]) => + this._isComponentInStatus( + id, + routePathSegments, + literalComponentsState, + routeState, + ['*'] + ) + ), + take(1) + ); + } + + /** + * @inheritDoc + */ + onInit(id: string, routePathSegments: string[]): Observable { + return this.store$.select(STORE_COMPONENTS).pipe( + withLatestFrom(this.routerService.getState()), + map(([literalComponentsState, routeState]) => + this._isComponentInStatus( + id, + routePathSegments, + literalComponentsState, + routeState, + ['*'] + ) + ), + filter((isInitialized) => isInitialized), + switchMap(() => this.getModel(id, routePathSegments, ['*'])), + take(1) + ); + } + + /** + * @inheritDoc + */ + onLoaded( + id: string, + routePathSegments: string[] + ): Observable { + return this.store$.select(STORE_COMPONENTS).pipe( + withLatestFrom(this.routerService.getState()), + map(([literalComponentsState, routeState]) => + this._isComponentInStatus( + id, + routePathSegments, + literalComponentsState, + routeState, + [LOADED, FAILED] + ) + ), + filter((isLoaded) => isLoaded), + switchMap(() => this.getModel(id, routePathSegments)), + take(1) + ); + } + + /** + * @inheritDoc + */ + getModel( + id: string, + routePathSegments: string[], + statusWatch?: Array + ): Observable { + const _statusWatch = statusWatch ?? [LOADED, FAILED]; + + return this.store$.select(STORE_COMPONENTS).pipe( + switchMap((literalComponentsState) => + this.routerService + .get() + .pipe(map((routerState) => [literalComponentsState, routerState])) + ), + filter( + ([literalComponentsState, routerState]: [ + LiteralComponentsState, + RouterState + ]) => + this._isComponentInStatus( + id, + routePathSegments, + literalComponentsState, + routerState.state, + _statusWatch + ) + ), + map(([literalComponentsState, routerState]) => + this._createModel( + id, + routePathSegments, + literalComponentsState, + routerState + ) + ) + ); + } + + /** + * @inheritDoc + */ + dispatchAction( + type: string, + componentState: ComponentState, + task?: string + ): void { + this.getModel(componentState.id, componentState.routePathSegments, ['*']) + .pipe(take(1)) + .subscribe((model) => + this.store$.dispatch( + GenericAction.of(type, model.getComponentState(), task) + ) + ); + } + + /** + * @inheritDoc + */ + initialize() { + // No-op. + } + + // Get Component State from Store if exist, otherwise create new State. + private _getComponentState( + id: string, + routePathSegments: string[], + routerState: RouterState, + literalComponentsState: LiteralComponentsState + ): ComponentState { + let _navigationId: number = null; + let _routePath: string = null; + let _routePathSegments: string[] = []; + + if (routerState) { + _navigationId = routerState.navigationId; + + if (routerState.state && !routePathSegments) { + _routePath = routerState.state.routePath; + _routePathSegments = routerState.state.routePathSegments; + } + } + + if (routePathSegments) { + _routePath = routePathSegments.slice().pop(); + _routePathSegments = routePathSegments; + } + + let componentState = this.componentsStateHelper + .setState(literalComponentsState) + .getComponentState(id, _routePathSegments); + + if (componentState) { + return componentState; + } + + componentState = ComponentStateImpl.of({ + id, + status: INITIALIZED, + routePath: _routePath, + routePathSegments: _routePathSegments, + navigationId: _navigationId + }); + + return componentState; + } + + // Utility method that filter if provided state is in desired status. + private _isComponentInStatus( + id: string, + routePathSegments: string[], + literalComponentsState: LiteralComponentsState, + routeState: RouteState, + statusWatch: Array + ): boolean { + let _routePathSegments: string[] = []; + + if (CollectionsUtil.isArray(routePathSegments)) { + _routePathSegments = routePathSegments; + } else if (routeState) { + _routePathSegments = routeState.routePathSegments; + } + + const componentLiteralState = this.componentsStateHelper + .setState(literalComponentsState) + .getLiteralComponentState(id, _routePathSegments); + + if (!componentLiteralState) { + return false; + } + + if (statusWatch.indexOf('*') !== -1) { + return true; + } + + return statusWatch.indexOf(componentLiteralState.status) !== -1; + } + + // Creates Model from provided data. + private _createModel( + id: string, + routePathSegments: string[], + literalComponentsState: LiteralComponentsState, + routerState: RouterState + ): ComponentModel { + let _routePathSegments: string[] = []; + + if (CollectionsUtil.isArray(routePathSegments)) { + _routePathSegments = routePathSegments; + } else if (routerState && routerState.state) { + _routePathSegments = routerState.state.routePathSegments; + } + + const componentState = this.componentsStateHelper + .setState(literalComponentsState) + .getComponentState(id, _routePathSegments); + + return ComponentModel.of( + componentState, + CollectionsUtil.cloneDeep(routerState) + ); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/services/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/services/index.ts index fab0d2dcd2..c38a636b5c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/services/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/services/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/actions/component.actions.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/actions/component.actions.spec.ts index 36ca688537..9b5e9fbcfc 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/actions/component.actions.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/actions/component.actions.spec.ts @@ -1,293 +1,301 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 */ import { - COMPONENT_CLEAR_DATA, - COMPONENT_FAILED, - COMPONENT_IDLE, - COMPONENT_INIT, - COMPONENT_LOADED, - COMPONENT_LOADING, - COMPONENT_UPDATE, - ComponentClearData, - ComponentFailed, - ComponentIdle, - ComponentInit, - ComponentLoaded, - ComponentLoading, - ComponentUpdate + COMPONENT_CLEAR_DATA, + COMPONENT_FAILED, + COMPONENT_IDLE, + COMPONENT_INIT, + COMPONENT_LOADED, + COMPONENT_LOADING, + COMPONENT_UPDATE, + ComponentClearData, + ComponentFailed, + ComponentIdle, + ComponentInit, + ComponentLoaded, + ComponentLoading, + ComponentUpdate } from './component.actions'; import { ComponentStateImpl } from '../../model'; import { BaseAction, BaseActionWithPayload } from '../../../ngrx'; describe('ComponentActions', () => { - describe('ComponentInit', () => { - it('should verify instance is created', () => { - // Then - expect(() => new ComponentInit(ComponentStateImpl.of({}))).toBeDefined(); - }); - - it('should verify correct type is assigned', () => { - // When - const instance = new ComponentInit(ComponentStateImpl.of({})); - - // Then - expect(instance.type).toEqual(COMPONENT_INIT); - }); - - it('should verify prototype chaining', () => { - // When - const instance = new ComponentInit(ComponentStateImpl.of({})); - - // Then - expect(instance).toBeInstanceOf(BaseActionWithPayload); - expect(instance).toBeInstanceOf(BaseAction); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const instance = ComponentInit.of(ComponentStateImpl.of({})); - - // Then - expect(instance).toBeInstanceOf(ComponentInit); - }); - }); - }); - }); - }); - - describe('ComponentIdle', () => { - it('should verify instance is created', () => { - // Then - expect(() => new ComponentIdle(ComponentStateImpl.of({}))).toBeDefined(); - }); - - it('should verify correct type is assigned', () => { - // When - const instance = new ComponentIdle(ComponentStateImpl.of({})); - - // Then - expect(instance.type).toEqual(COMPONENT_IDLE); - }); - - it('should verify prototype chaining', () => { - // When - const instance = new ComponentIdle(ComponentStateImpl.of({})); - - // Then - expect(instance).toBeInstanceOf(BaseActionWithPayload); - expect(instance).toBeInstanceOf(BaseAction); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const instance = ComponentIdle.of(ComponentStateImpl.of({})); - - // Then - expect(instance).toBeInstanceOf(ComponentIdle); - }); - }); - }); - }); - }); - - describe('ComponentLoading', () => { - it('should verify instance is created', () => { - // Then - expect(() => new ComponentLoading(ComponentStateImpl.of({}))).toBeDefined(); - }); - - it('should verify correct type is assigned', () => { - // When - const instance = new ComponentLoading(ComponentStateImpl.of({})); - - // Then - expect(instance.type).toEqual(COMPONENT_LOADING); - }); - - it('should verify prototype chaining', () => { - // When - const instance = new ComponentLoading(ComponentStateImpl.of({})); - - // Then - expect(instance).toBeInstanceOf(BaseActionWithPayload); - expect(instance).toBeInstanceOf(BaseAction); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const instance = ComponentLoading.of(ComponentStateImpl.of({})); - - // Then - expect(instance).toBeInstanceOf(ComponentLoading); - }); - }); - }); - }); - }); - - describe('ComponentLoaded', () => { - it('should verify instance is created', () => { - // Then - expect(() => new ComponentLoaded(ComponentStateImpl.of({}))).toBeDefined(); - }); - - it('should verify correct type is assigned', () => { - // When - const instance = new ComponentLoaded(ComponentStateImpl.of({})); - - // Then - expect(instance.type).toEqual(COMPONENT_LOADED); - }); - - it('should verify prototype chaining', () => { - // When - const instance = new ComponentLoaded(ComponentStateImpl.of({})); - - // Then - expect(instance).toBeInstanceOf(BaseActionWithPayload); - expect(instance).toBeInstanceOf(BaseAction); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const instance = ComponentLoaded.of(ComponentStateImpl.of({})); - - // Then - expect(instance).toBeInstanceOf(ComponentLoaded); - }); - }); - }); - }); - }); - - describe('ComponentFailed', () => { - it('should verify instance is created', () => { - // Then - expect(() => new ComponentFailed(ComponentStateImpl.of({}))).toBeDefined(); - }); - - it('should verify correct type is assigned', () => { - // When - const instance = new ComponentFailed(ComponentStateImpl.of({})); - - // Then - expect(instance.type).toEqual(COMPONENT_FAILED); - }); - - it('should verify prototype chaining', () => { - // When - const instance = new ComponentFailed(ComponentStateImpl.of({})); - - // Then - expect(instance).toBeInstanceOf(BaseActionWithPayload); - expect(instance).toBeInstanceOf(BaseAction); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const instance = ComponentFailed.of(ComponentStateImpl.of({})); - - // Then - expect(instance).toBeInstanceOf(ComponentFailed); - }); - }); - }); - }); - }); - - describe('ComponentUpdate', () => { - it('should verify instance is created', () => { - // Then - expect(() => new ComponentUpdate(ComponentStateImpl.of({}))).toBeDefined(); - }); - - it('should verify correct type is assigned', () => { - // When - const instance = new ComponentUpdate(ComponentStateImpl.of({})); - - // Then - expect(instance.type).toEqual(COMPONENT_UPDATE); - }); - - it('should verify prototype chaining', () => { - // When - const instance = new ComponentUpdate(ComponentStateImpl.of({})); - - // Then - expect(instance).toBeInstanceOf(BaseActionWithPayload); - expect(instance).toBeInstanceOf(BaseAction); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const instance = ComponentUpdate.of(ComponentStateImpl.of({})); - - // Then - expect(instance).toBeInstanceOf(ComponentUpdate); - }); - }); - }); - }); - }); - - describe('ComponentClearData', () => { - it('should verify instance is created', () => { - // Then - expect(() => new ComponentClearData(ComponentStateImpl.of({}))).toBeDefined(); - }); - - it('should verify correct type is assigned', () => { - // When - const instance = new ComponentClearData(ComponentStateImpl.of({})); - - // Then - expect(instance.type).toEqual(COMPONENT_CLEAR_DATA); - }); - - it('should verify prototype chaining', () => { - // When - const instance = new ComponentClearData(ComponentStateImpl.of({})); - - // Then - expect(instance).toBeInstanceOf(BaseActionWithPayload); - expect(instance).toBeInstanceOf(BaseAction); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const instance = ComponentClearData.of(ComponentStateImpl.of({})); - - // Then - expect(instance).toBeInstanceOf(ComponentClearData); - }); - }); - }); - }); - }); + describe('ComponentInit', () => { + it('should verify instance is created', () => { + // Then + expect(() => new ComponentInit(ComponentStateImpl.of({}))).toBeDefined(); + }); + + it('should verify correct type is assigned', () => { + // When + const instance = new ComponentInit(ComponentStateImpl.of({})); + + // Then + expect(instance.type).toEqual(COMPONENT_INIT); + }); + + it('should verify prototype chaining', () => { + // When + const instance = new ComponentInit(ComponentStateImpl.of({})); + + // Then + expect(instance).toBeInstanceOf(BaseActionWithPayload); + expect(instance).toBeInstanceOf(BaseAction); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const instance = ComponentInit.of(ComponentStateImpl.of({})); + + // Then + expect(instance).toBeInstanceOf(ComponentInit); + }); + }); + }); + }); + }); + + describe('ComponentIdle', () => { + it('should verify instance is created', () => { + // Then + expect(() => new ComponentIdle(ComponentStateImpl.of({}))).toBeDefined(); + }); + + it('should verify correct type is assigned', () => { + // When + const instance = new ComponentIdle(ComponentStateImpl.of({})); + + // Then + expect(instance.type).toEqual(COMPONENT_IDLE); + }); + + it('should verify prototype chaining', () => { + // When + const instance = new ComponentIdle(ComponentStateImpl.of({})); + + // Then + expect(instance).toBeInstanceOf(BaseActionWithPayload); + expect(instance).toBeInstanceOf(BaseAction); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const instance = ComponentIdle.of(ComponentStateImpl.of({})); + + // Then + expect(instance).toBeInstanceOf(ComponentIdle); + }); + }); + }); + }); + }); + + describe('ComponentLoading', () => { + it('should verify instance is created', () => { + // Then + expect( + () => new ComponentLoading(ComponentStateImpl.of({})) + ).toBeDefined(); + }); + + it('should verify correct type is assigned', () => { + // When + const instance = new ComponentLoading(ComponentStateImpl.of({})); + + // Then + expect(instance.type).toEqual(COMPONENT_LOADING); + }); + + it('should verify prototype chaining', () => { + // When + const instance = new ComponentLoading(ComponentStateImpl.of({})); + + // Then + expect(instance).toBeInstanceOf(BaseActionWithPayload); + expect(instance).toBeInstanceOf(BaseAction); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const instance = ComponentLoading.of(ComponentStateImpl.of({})); + + // Then + expect(instance).toBeInstanceOf(ComponentLoading); + }); + }); + }); + }); + }); + + describe('ComponentLoaded', () => { + it('should verify instance is created', () => { + // Then + expect( + () => new ComponentLoaded(ComponentStateImpl.of({})) + ).toBeDefined(); + }); + + it('should verify correct type is assigned', () => { + // When + const instance = new ComponentLoaded(ComponentStateImpl.of({})); + + // Then + expect(instance.type).toEqual(COMPONENT_LOADED); + }); + + it('should verify prototype chaining', () => { + // When + const instance = new ComponentLoaded(ComponentStateImpl.of({})); + + // Then + expect(instance).toBeInstanceOf(BaseActionWithPayload); + expect(instance).toBeInstanceOf(BaseAction); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const instance = ComponentLoaded.of(ComponentStateImpl.of({})); + + // Then + expect(instance).toBeInstanceOf(ComponentLoaded); + }); + }); + }); + }); + }); + + describe('ComponentFailed', () => { + it('should verify instance is created', () => { + // Then + expect( + () => new ComponentFailed(ComponentStateImpl.of({})) + ).toBeDefined(); + }); + + it('should verify correct type is assigned', () => { + // When + const instance = new ComponentFailed(ComponentStateImpl.of({})); + + // Then + expect(instance.type).toEqual(COMPONENT_FAILED); + }); + + it('should verify prototype chaining', () => { + // When + const instance = new ComponentFailed(ComponentStateImpl.of({})); + + // Then + expect(instance).toBeInstanceOf(BaseActionWithPayload); + expect(instance).toBeInstanceOf(BaseAction); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const instance = ComponentFailed.of(ComponentStateImpl.of({})); + + // Then + expect(instance).toBeInstanceOf(ComponentFailed); + }); + }); + }); + }); + }); + + describe('ComponentUpdate', () => { + it('should verify instance is created', () => { + // Then + expect( + () => new ComponentUpdate(ComponentStateImpl.of({})) + ).toBeDefined(); + }); + + it('should verify correct type is assigned', () => { + // When + const instance = new ComponentUpdate(ComponentStateImpl.of({})); + + // Then + expect(instance.type).toEqual(COMPONENT_UPDATE); + }); + + it('should verify prototype chaining', () => { + // When + const instance = new ComponentUpdate(ComponentStateImpl.of({})); + + // Then + expect(instance).toBeInstanceOf(BaseActionWithPayload); + expect(instance).toBeInstanceOf(BaseAction); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const instance = ComponentUpdate.of(ComponentStateImpl.of({})); + + // Then + expect(instance).toBeInstanceOf(ComponentUpdate); + }); + }); + }); + }); + }); + + describe('ComponentClearData', () => { + it('should verify instance is created', () => { + // Then + expect( + () => new ComponentClearData(ComponentStateImpl.of({})) + ).toBeDefined(); + }); + + it('should verify correct type is assigned', () => { + // When + const instance = new ComponentClearData(ComponentStateImpl.of({})); + + // Then + expect(instance.type).toEqual(COMPONENT_CLEAR_DATA); + }); + + it('should verify prototype chaining', () => { + // When + const instance = new ComponentClearData(ComponentStateImpl.of({})); + + // Then + expect(instance).toBeInstanceOf(BaseActionWithPayload); + expect(instance).toBeInstanceOf(BaseAction); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const instance = ComponentClearData.of(ComponentStateImpl.of({})); + + // Then + expect(instance).toBeInstanceOf(ComponentClearData); + }); + }); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/actions/component.actions.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/actions/component.actions.ts index 467aca13e0..94b936c253 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/actions/component.actions.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/actions/component.actions.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -50,16 +48,16 @@ export const COMPONENT_CLEAR_DATA = '[component] Clear data'; * */ export class ComponentInit extends BaseActionWithPayload { - constructor(payload: ComponentState) { - super(COMPONENT_INIT, payload); - } - - /** - * ** Factory method. - */ - static override of(payload: ComponentState) { - return new ComponentInit(payload); - } + constructor(payload: ComponentState) { + super(COMPONENT_INIT, payload); + } + + /** + * ** Factory method. + */ + static override of(payload: ComponentState) { + return new ComponentInit(payload); + } } /** @@ -68,16 +66,16 @@ export class ComponentInit extends BaseActionWithPayload { * */ export class ComponentIdle extends BaseActionWithPayload { - constructor(payload: ComponentState) { - super(COMPONENT_IDLE, payload); - } - - /** - * ** Factory method. - */ - static override of(payload: ComponentState) { - return new ComponentIdle(payload); - } + constructor(payload: ComponentState) { + super(COMPONENT_IDLE, payload); + } + + /** + * ** Factory method. + */ + static override of(payload: ComponentState) { + return new ComponentIdle(payload); + } } /** @@ -86,16 +84,16 @@ export class ComponentIdle extends BaseActionWithPayload { * */ export class ComponentLoading extends BaseActionWithPayload { - constructor(payload: ComponentState) { - super(COMPONENT_LOADING, payload); - } - - /** - * ** Factory method. - */ - static override of(payload: ComponentState) { - return new ComponentLoading(payload); - } + constructor(payload: ComponentState) { + super(COMPONENT_LOADING, payload); + } + + /** + * ** Factory method. + */ + static override of(payload: ComponentState) { + return new ComponentLoading(payload); + } } /** @@ -104,16 +102,16 @@ export class ComponentLoading extends BaseActionWithPayload { * */ export class ComponentLoaded extends BaseActionWithPayload { - constructor(payload: ComponentState) { - super(COMPONENT_LOADED, payload); - } - - /** - * ** Factory method. - */ - static override of(payload: ComponentState) { - return new ComponentLoaded(payload); - } + constructor(payload: ComponentState) { + super(COMPONENT_LOADED, payload); + } + + /** + * ** Factory method. + */ + static override of(payload: ComponentState) { + return new ComponentLoaded(payload); + } } /** @@ -122,16 +120,16 @@ export class ComponentLoaded extends BaseActionWithPayload { * */ export class ComponentFailed extends BaseActionWithPayload { - constructor(payload: ComponentState) { - super(COMPONENT_FAILED, payload); - } - - /** - * ** Factory method. - */ - static override of(payload: ComponentState) { - return new ComponentFailed(payload); - } + constructor(payload: ComponentState) { + super(COMPONENT_FAILED, payload); + } + + /** + * ** Factory method. + */ + static override of(payload: ComponentState) { + return new ComponentFailed(payload); + } } /** @@ -140,16 +138,16 @@ export class ComponentFailed extends BaseActionWithPayload { * */ export class ComponentUpdate extends BaseActionWithPayload { - constructor(payload: ComponentState) { - super(COMPONENT_UPDATE, payload); - } - - /** - * ** Factory method. - */ - static override of(payload: ComponentState) { - return new ComponentUpdate(payload); - } + constructor(payload: ComponentState) { + super(COMPONENT_UPDATE, payload); + } + + /** + * ** Factory method. + */ + static override of(payload: ComponentState) { + return new ComponentUpdate(payload); + } } /** @@ -158,20 +156,26 @@ export class ComponentUpdate extends BaseActionWithPayload { * */ export class ComponentClearData extends BaseActionWithPayload { - constructor(payload: ComponentState) { - super(COMPONENT_CLEAR_DATA, payload); - } - - /** - * ** Factory method. - */ - static override of(payload: ComponentState) { - return new ComponentClearData(payload); - } + constructor(payload: ComponentState) { + super(COMPONENT_CLEAR_DATA, payload); + } + + /** + * ** Factory method. + */ + static override of(payload: ComponentState) { + return new ComponentClearData(payload); + } } /** * ** Union of all Actions that could be use as a type in Effects/Reducers/etc... */ -export type ComponentActions = ComponentInit | ComponentIdle | ComponentLoading | - ComponentLoaded | ComponentFailed | ComponentUpdate | ComponentClearData; +export type ComponentActions = + | ComponentInit + | ComponentIdle + | ComponentLoading + | ComponentLoaded + | ComponentFailed + | ComponentUpdate + | ComponentClearData; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/actions/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/actions/index.ts index f52a972a87..e4366483a1 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/actions/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/actions/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/index.ts index 22087bff61..2a9ecf6d67 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/operators/component-rx.operators.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/operators/component-rx.operators.spec.ts index dba55fb8fd..50b84703cd 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/operators/component-rx.operators.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/operators/component-rx.operators.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -13,222 +11,240 @@ import { RouterState, RouteSegments, RouteState } from '../../../router'; import { BaseActionWithPayload } from '../../../ngrx'; -import { ComponentModel, ComponentState, ComponentStateImpl, FAILED, INITIALIZED, LOADED } from '../../model'; +import { + ComponentModel, + ComponentState, + ComponentStateImpl, + FAILED, + INITIALIZED, + LOADED +} from '../../model'; import { ComponentService } from '../../services'; import { ComponentFailed } from '../actions'; -import { getModel, getModelAndTask, handleActionError } from './component-rx.operators'; +import { + getModel, + getModelAndTask, + handleActionError +} from './component-rx.operators'; import { CollectionsUtil } from '../../../../utils'; describe('rxjs operators', () => { - describe('|getModel|', () => { - it('should verify will create ComponentModel down the stream', marbles((m) => { - // Given - const inputActionStream$ = m.cold('----a---b----', { - a: new ActionStub(ComponentStateImpl.of({ - id: 'test1', - status: INITIALIZED, - routePathSegments: ['entity/10'] - })), - b: new ActionStub(ComponentStateImpl.of({ - id: 'test2', status: LOADED, - routePathSegments: ['entity/225'] - })) - }); - const getModelStream1$ = m.cold('-a', { - a: ComponentModel.of( - ComponentStateImpl.of({ id: 'test1', status: INITIALIZED }), - RouterState.of( - RouteState.of( - RouteSegments.of('entity/10'), - 'entity/5' - ), - 3 - ) - ) - }); - const getModelStream2$ = m.cold('--a', { - a: ComponentModel.of( - ComponentStateImpl.of({ id: 'test5', status: LOADED }), - RouterState.of( - RouteState.of( - RouteSegments.of('entity/225'), - 'entity/225' - ), - 3 - ) - ) - }); - const expectedOutputStream$ = m.cold('-----a----b----', { - a: ComponentModel.of( - ComponentStateImpl.of({ id: 'test1', status: INITIALIZED }), - RouterState.of( - RouteState.of( - RouteSegments.of('entity/10'), - 'entity/5' - ), - 3 - ) - ), - b: ComponentModel.of( - ComponentStateImpl.of({ id: 'test5', status: LOADED }), - RouterState.of( - RouteState.of( - RouteSegments.of('entity/225'), - 'entity/225' - ), - 3 - ) - ) - }); - - const componentServiceStub = jasmine.createSpyObj('componentService', ['getModel']); - let cnt = 0; - componentServiceStub.getModel.and.callFake(() => { - cnt++; - if (cnt === 1) { - return getModelStream1$; - } else { - return getModelStream2$; - } - }); - - // When - const response$ = getModel(componentServiceStub)(inputActionStream$); - - // Then - m.expect(response$).toBeObservable(expectedOutputStream$); - })); - }); - - describe('|getModelAndTask|', () => { - it('should verify will create ComponentModel down the stream', marbles((m) => { - // Given - const taskIdentifier1 = `patch_entity __ ${ new Date().toISOString() }`; - const taskIdentifier2 = `patch_dataset __ ${ new Date().toISOString() }`; - spyOn(CollectionsUtil, 'interpolateString').and.returnValues(taskIdentifier1, taskIdentifier2); - const inputActionStream$ = m.cold('----a---b----', { - a: new ActionStub( - ComponentStateImpl.of({ - id: 'test1', - status: INITIALIZED, - routePathSegments: ['entity/10'] - }), - taskIdentifier1 - ), - b: new ActionStub( - ComponentStateImpl.of({ - id: 'test2', status: LOADED, - routePathSegments: ['entity/225'] - }), - taskIdentifier2 - ) - }); - const getModelStream1$ = m.cold('-a', { - a: ComponentModel.of( - ComponentStateImpl.of({ id: 'test1', status: INITIALIZED }), - RouterState.of( - RouteState.of( - RouteSegments.of('entity/10'), - 'entity/5' - ), - 3 - ) - ) - }); - const getModelStream2$ = m.cold('--a', { - a: ComponentModel.of( - ComponentStateImpl.of({ id: 'test5', status: LOADED }), - RouterState.of( - RouteState.of( - RouteSegments.of('entity/225'), - 'entity/225' - ), - 3 - ) - ) - }); - const expectedOutputStream$ = m.cold('-----a----b----', { - a: [ - ComponentModel.of( - ComponentStateImpl.of({ id: 'test1', status: INITIALIZED }), - RouterState.of( - RouteState.of( - RouteSegments.of('entity/10'), - 'entity/5' - ), - 3 - ) - ), - taskIdentifier1 - ] as [ComponentModel, string], - b: [ - ComponentModel.of( - ComponentStateImpl.of({ id: 'test5', status: LOADED }), - RouterState.of( - RouteState.of( - RouteSegments.of('entity/225'), - 'entity/225' - ), - 3 - ) - ), - taskIdentifier2 - ] as [ComponentModel, string] - }); - - const componentServiceStub = jasmine.createSpyObj('componentService', ['getModel']); - let cnt = 0; - componentServiceStub.getModel.and.callFake(() => { - cnt++; - if (cnt === 1) { - return getModelStream1$; - } else { - return getModelStream2$; - } - }); - - // When - const response$ = getModelAndTask(componentServiceStub)(inputActionStream$); - - // Then - m.expect(response$).toBeObservable(expectedOutputStream$); - })); - }); - - describe('|handleActionError|', () => { - it('should verify will handle Stream error and return ComponentFailed action', marbles((m) => { - // Given - const inputModel = ComponentModel.of( - ComponentStateImpl.of({ id: 'test1', status: INITIALIZED, navigationId: 3 }), - RouterState.of( - RouteState.of( - RouteSegments.of('entity/10'), - 'entity/5' - ), - 3 - ) - ); - const error = new Error('Http Failure'); - const getResponseStream$ = throwError(error); - const expectedOutputStream$ = m.cold('(a|)', { - a: ComponentFailed.of( - ComponentStateImpl.of({ id: 'test1', status: FAILED, navigationId: 3, error }) - ) - }); - - // When - const response$ = handleActionError(inputModel)(getResponseStream$); - - // Then - m.expect(response$).toBeObservable(expectedOutputStream$); - })); - }); + describe('|getModel|', () => { + it( + 'should verify will create ComponentModel down the stream', + marbles((m) => { + // Given + const inputActionStream$ = m.cold('----a---b----', { + a: new ActionStub( + ComponentStateImpl.of({ + id: 'test1', + status: INITIALIZED, + routePathSegments: ['entity/10'] + }) + ), + b: new ActionStub( + ComponentStateImpl.of({ + id: 'test2', + status: LOADED, + routePathSegments: ['entity/225'] + }) + ) + }); + const getModelStream1$ = m.cold('-a', { + a: ComponentModel.of( + ComponentStateImpl.of({ id: 'test1', status: INITIALIZED }), + RouterState.of( + RouteState.of(RouteSegments.of('entity/10'), 'entity/5'), + 3 + ) + ) + }); + const getModelStream2$ = m.cold('--a', { + a: ComponentModel.of( + ComponentStateImpl.of({ id: 'test5', status: LOADED }), + RouterState.of( + RouteState.of(RouteSegments.of('entity/225'), 'entity/225'), + 3 + ) + ) + }); + const expectedOutputStream$ = m.cold('-----a----b----', { + a: ComponentModel.of( + ComponentStateImpl.of({ id: 'test1', status: INITIALIZED }), + RouterState.of( + RouteState.of(RouteSegments.of('entity/10'), 'entity/5'), + 3 + ) + ), + b: ComponentModel.of( + ComponentStateImpl.of({ id: 'test5', status: LOADED }), + RouterState.of( + RouteState.of(RouteSegments.of('entity/225'), 'entity/225'), + 3 + ) + ) + }); + + const componentServiceStub = jasmine.createSpyObj( + 'componentService', + ['getModel'] + ); + let cnt = 0; + componentServiceStub.getModel.and.callFake(() => { + cnt++; + if (cnt === 1) { + return getModelStream1$; + } else { + return getModelStream2$; + } + }); + + // When + const response$ = getModel(componentServiceStub)(inputActionStream$); + + // Then + m.expect(response$).toBeObservable(expectedOutputStream$); + }) + ); + }); + + describe('|getModelAndTask|', () => { + it( + 'should verify will create ComponentModel down the stream', + marbles((m) => { + // Given + const taskIdentifier1 = `patch_entity __ ${new Date().toISOString()}`; + const taskIdentifier2 = `patch_dataset __ ${new Date().toISOString()}`; + spyOn(CollectionsUtil, 'interpolateString').and.returnValues( + taskIdentifier1, + taskIdentifier2 + ); + const inputActionStream$ = m.cold('----a---b----', { + a: new ActionStub( + ComponentStateImpl.of({ + id: 'test1', + status: INITIALIZED, + routePathSegments: ['entity/10'] + }), + taskIdentifier1 + ), + b: new ActionStub( + ComponentStateImpl.of({ + id: 'test2', + status: LOADED, + routePathSegments: ['entity/225'] + }), + taskIdentifier2 + ) + }); + const getModelStream1$ = m.cold('-a', { + a: ComponentModel.of( + ComponentStateImpl.of({ id: 'test1', status: INITIALIZED }), + RouterState.of( + RouteState.of(RouteSegments.of('entity/10'), 'entity/5'), + 3 + ) + ) + }); + const getModelStream2$ = m.cold('--a', { + a: ComponentModel.of( + ComponentStateImpl.of({ id: 'test5', status: LOADED }), + RouterState.of( + RouteState.of(RouteSegments.of('entity/225'), 'entity/225'), + 3 + ) + ) + }); + const expectedOutputStream$ = m.cold('-----a----b----', { + a: [ + ComponentModel.of( + ComponentStateImpl.of({ id: 'test1', status: INITIALIZED }), + RouterState.of( + RouteState.of(RouteSegments.of('entity/10'), 'entity/5'), + 3 + ) + ), + taskIdentifier1 + ] as [ComponentModel, string], + b: [ + ComponentModel.of( + ComponentStateImpl.of({ id: 'test5', status: LOADED }), + RouterState.of( + RouteState.of(RouteSegments.of('entity/225'), 'entity/225'), + 3 + ) + ), + taskIdentifier2 + ] as [ComponentModel, string] + }); + + const componentServiceStub = jasmine.createSpyObj( + 'componentService', + ['getModel'] + ); + let cnt = 0; + componentServiceStub.getModel.and.callFake(() => { + cnt++; + if (cnt === 1) { + return getModelStream1$; + } else { + return getModelStream2$; + } + }); + + // When + const response$ = + getModelAndTask(componentServiceStub)(inputActionStream$); + + // Then + m.expect(response$).toBeObservable(expectedOutputStream$); + }) + ); + }); + + describe('|handleActionError|', () => { + it( + 'should verify will handle Stream error and return ComponentFailed action', + marbles((m) => { + // Given + const inputModel = ComponentModel.of( + ComponentStateImpl.of({ + id: 'test1', + status: INITIALIZED, + navigationId: 3 + }), + RouterState.of( + RouteState.of(RouteSegments.of('entity/10'), 'entity/5'), + 3 + ) + ); + const error = new Error('Http Failure'); + const getResponseStream$ = throwError(error); + const expectedOutputStream$ = m.cold('(a|)', { + a: ComponentFailed.of( + ComponentStateImpl.of({ + id: 'test1', + status: FAILED, + navigationId: 3, + error + }) + ) + }); + + // When + const response$ = handleActionError(inputModel)(getResponseStream$); + + // Then + m.expect(response$).toBeObservable(expectedOutputStream$); + }) + ); + }); }); class ActionStub extends BaseActionWithPayload { - constructor(payload: ComponentState, task?: string) { - super('[component] action stub', payload, task); - } + constructor(payload: ComponentState, task?: string) { + super('[component] action stub', payload, task); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/operators/component-rx.operators.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/operators/component-rx.operators.ts index d9d9374ef8..187b9d393f 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/operators/component-rx.operators.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/operators/component-rx.operators.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -22,12 +20,15 @@ import { ComponentFailed } from '../actions'; * * */ -export const getModel = (componentService: ComponentService) => - (source$: Observable>): Observable => - source$.pipe( - extractAction, - switchMap((action) => subscribeForModel(action, componentService)) - ); +export const getModel = + (componentService: ComponentService) => + ( + source$: Observable> + ): Observable => + source$.pipe( + extractAction, + switchMap((action) => subscribeForModel(action, componentService)) + ); /** * ** RXJS Operator that fetch Component Model from Store using provided ComponentService and consume task from Action. @@ -36,16 +37,19 @@ export const getModel = (componentService: ComponentService) => * * */ -export const getModelAndTask = (componentService: ComponentService) => - (source$: Observable>): Observable<[ComponentModel, string]> => - source$.pipe( - extractAction, - switchMap((action) => - subscribeForModel(action, componentService).pipe( - map((model) => [model, action.task] as [ComponentModel, string]) - ) - ) - ); +export const getModelAndTask = + (componentService: ComponentService) => + ( + source$: Observable> + ): Observable<[ComponentModel, string]> => + source$.pipe( + extractAction, + switchMap((action) => + subscribeForModel(action, componentService).pipe( + map((model) => [model, action.task] as [ComponentModel, string]) + ) + ) + ); /** * ** Handle Error from some Action, ideal to use for API response. @@ -55,45 +59,55 @@ export const getModelAndTask = (componentService: ComponentService) => * * */ -export const handleActionError = (model: ComponentModel) => - (source$: Observable>): Observable> => - source$.pipe( - catchError((error: unknown) => of( - ComponentFailed.of( - model - .withError(error as Error) - .withStatusFailed() - .getComponentState() - ) - )) - ); +export const handleActionError = + (model: ComponentModel) => + ( + source$: Observable> + ): Observable> => + source$.pipe( + catchError((error: unknown) => + of( + ComponentFailed.of( + model + .withError(error as Error) + .withStatusFailed() + .getComponentState() + ) + ) + ) + ); /** * ** Validate if Action is instance of {@link BaseActionWithPayload} and pass down the stream. * * */ -const extractAction = (source$: Observable>) => - source$.pipe( - mergeMap((action) => - iif( - () => action instanceof BaseActionWithPayload, - of(action), - throwError( - new Error('Unsupported Action type. It should be subclass of BaseActionWithPayload') - ) - ) - ) - ); +const extractAction = ( + source$: Observable> +) => + source$.pipe( + mergeMap((action) => + iif( + () => action instanceof BaseActionWithPayload, + of(action), + throwError( + new Error( + 'Unsupported Action type. It should be subclass of BaseActionWithPayload' + ) + ) + ) + ) + ); /** * ** Make actual subscription to Store for ComponentModel. * * */ -const subscribeForModel = (action: BaseActionWithPayload, componentService: ComponentService) => - componentService - .getModel(action.payload.id, action.payload.routePathSegments, ['*']) - .pipe( - take(1) - ); +const subscribeForModel = ( + action: BaseActionWithPayload, + componentService: ComponentService +) => + componentService + .getModel(action.payload.id, action.payload.routePathSegments, ['*']) + .pipe(take(1)); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/operators/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/operators/index.ts index ec099b75ac..819fd02082 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/operators/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/operators/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/reducers/component.reducer.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/reducers/component.reducer.spec.ts index 801b50a8b3..7738817cb6 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/reducers/component.reducer.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/reducers/component.reducer.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -18,408 +16,474 @@ import { BaseActionWithPayload } from '../../../ngrx'; import { RouteSegments, RouteState } from '../../../router'; import { - ComponentsStateHelper, - ComponentState, - FAILED, - IDLE, - INITIALIZED, - LiteralComponentsState, - LiteralComponentState, - LOADED, - LOADING, - StatusType + ComponentsStateHelper, + ComponentState, + FAILED, + IDLE, + INITIALIZED, + LiteralComponentsState, + LiteralComponentState, + LOADED, + LOADING, + StatusType } from '../../model'; import { - COMPONENT_CLEAR_DATA, - COMPONENT_FAILED, - COMPONENT_INIT, - COMPONENT_LOADING, - COMPONENT_UPDATE, - ComponentIdle, - ComponentLoaded + COMPONENT_CLEAR_DATA, + COMPONENT_FAILED, + COMPONENT_INIT, + COMPONENT_LOADING, + COMPONENT_UPDATE, + ComponentIdle, + ComponentLoaded } from '../actions'; import { componentReducer } from './component.reducer'; describe('componentReducer', () => { - let id: string; - let routePathSegments: string[]; - let literalComponentsState: LiteralComponentsState; - let updateComponentHelperSpy: jasmine.Spy; - let getComponentHelperSpy: jasmine.Spy; - let getStateHelperSpy: jasmine.Spy; - - beforeEach(() => { - id = 'testComponent1'; - routePathSegments = ['test_entity/15']; - literalComponentsState = { - components: {}, - routePathSegments: {} - }; - updateComponentHelperSpy = spyOn(ComponentsStateHelper.prototype, 'updateLiteralComponentState').and.callFake(CallFake); - getComponentHelperSpy = spyOn(ComponentsStateHelper.prototype, 'getLiteralComponentState'); - getStateHelperSpy = spyOn(ComponentsStateHelper.prototype, 'getState'); - }); - - describe('Actions::', () => { - describe('|COMPONENT_INIT|', () => { - it('should verify invokes correct methods', () => { - // Given - const action = new ActionStub(COMPONENT_INIT, createComponentState(null)); - getStateHelperSpy - .and - .returnValue(createComponentsState(createComponentState(INITIALIZED).toLiteral())); - - // When - const result = componentReducer(literalComponentsState, action); - - // Then - expect(result).toEqual(createComponentsState(createComponentState(INITIALIZED).toLiteral())); - expect(updateComponentHelperSpy).toHaveBeenCalledWith(createComponentState(INITIALIZED).toLiteral()); - }); - }); - - describe('|COMPONENT_IDLE|', () => { - it('should verify invokes correct methods', () => { - // Given - const action = ComponentIdle.of(createComponentState(INITIALIZED, 'test-team', 4)); - getComponentHelperSpy - .and - .returnValue(createComponentState(INITIALIZED).toLiteral()); - getStateHelperSpy - .and - .returnValue(createComponentsState(createComponentState(IDLE, 'test-team', 4).toLiteral())); - - // When - const result = componentReducer(literalComponentsState, action); - - // Then - expect(getComponentHelperSpy).toHaveBeenCalledWith(id, routePathSegments); - expect(result).toEqual(createComponentsState(createComponentState(IDLE, 'test-team', 4).toLiteral())); - expect(updateComponentHelperSpy).toHaveBeenCalledWith(createComponentState(IDLE, 'test-team', 4).toLiteral()); - }); - }); - - describe('|COMPONENT_LOADING|', () => { - it('should verify invokes correct methods', () => { - // Given - const action = new ActionStub(COMPONENT_LOADING, createComponentState(IDLE, 'test-team', 4)); - getComponentHelperSpy - .and - .returnValue(createComponentState(IDLE).toLiteral()); - getStateHelperSpy - .and - .returnValue(createComponentsState(createComponentState(LOADING, 'test-team', 4).toLiteral())); - - // When - const result = componentReducer(literalComponentsState, action); - - // Then - expect(getComponentHelperSpy).toHaveBeenCalledWith(id, routePathSegments); - expect(result).toEqual(createComponentsState(createComponentState(LOADING, 'test-team', 4).toLiteral())); - expect(updateComponentHelperSpy).toHaveBeenCalledWith(createComponentState(LOADING, 'test-team', 4).toLiteral()); - }); - }); - - describe('|COMPONENT_UPDATE|', () => { - it('should verify invokes correct methods (data from action)', () => { - // Given - const data = new Map([['users', []], ['cities', {}]]); - const action = new ActionStub( - COMPONENT_UPDATE, - createComponentState(IDLE, 'test-team', 7, data) - ); - getComponentHelperSpy - .and - .returnValue(createComponentState(LOADING).toLiteral()); - getStateHelperSpy - .and - .returnValue( - createComponentsState( - createComponentState(IDLE, 'test-team', 7, data).toLiteral() - ) - ); - - // When - const result = componentReducer(literalComponentsState, action); - - // Then - expect(getComponentHelperSpy).toHaveBeenCalledWith(id, routePathSegments); - expect(result).toEqual( - createComponentsState( - createComponentState(IDLE, 'test-team', 7, data).toLiteral() - ) - ); - expect(updateComponentHelperSpy).toHaveBeenCalledWith( - createComponentState(IDLE, 'test-team', 7, data).toLiteral() - ); - }); - - it('should verify invokes correct methods (data from store)', () => { - // Given - const data = new Map([['countries', []], ['payload', {}]]); - const action = new ActionStub( - COMPONENT_UPDATE, - createComponentState(FAILED, 'test-team', 6) - ); - getComponentHelperSpy - .and - .returnValue(createComponentState(LOADING, 'test-team', 4, data).toLiteral()); - getStateHelperSpy - .and - .returnValue( - createComponentsState( - createComponentState(FAILED, 'test-team', 6, data).toLiteral() - ) - ); - - // When - const result = componentReducer(literalComponentsState, action); - - // Then - expect(getComponentHelperSpy).toHaveBeenCalledWith(id, routePathSegments); - expect(result).toEqual( - createComponentsState( - createComponentState(FAILED, 'test-team', 6, data).toLiteral() - ) - ); - expect(updateComponentHelperSpy).toHaveBeenCalledWith( - createComponentState(FAILED, 'test-team', 6, data).toLiteral() - ); - }); - }); - - describe('|COMPONENT_LOADED|', () => { - it('should verify invokes correct methods', () => { - // Given - const action = ComponentLoaded.of(createComponentState(LOADING, 'test-team', 11)); - getComponentHelperSpy - .and - .returnValue(createComponentState(IDLE, 'test-team', 7).toLiteral()); - getStateHelperSpy - .and - .returnValue( - createComponentsState( - createComponentState(LOADED, 'test-team', 11).toLiteral() - ) - ); - - // When - const result = componentReducer(literalComponentsState, action); - - // Then - expect(getComponentHelperSpy).toHaveBeenCalledWith(id, routePathSegments); - expect(result).toEqual( - createComponentsState( - createComponentState(LOADED, 'test-team', 11).toLiteral() - ) - ); - expect(updateComponentHelperSpy).toHaveBeenCalledWith( - createComponentState(LOADED, 'test-team', 11).toLiteral() - ); - }); - }); - - describe('|COMPONENT_FAILED|', () => { - it('should verify invokes correct methods (data from action)', () => { - // Given - const data = new Map([['data', []], ['invokes', {}]]); - const action = new ActionStub( - COMPONENT_FAILED, - createComponentState(IDLE, 'test-team', 9, data) - ); - getComponentHelperSpy - .and - .returnValue(createComponentState(LOADING).toLiteral()); - getStateHelperSpy - .and - .returnValue( - createComponentsState( - createComponentState(FAILED, 'test-team', 9, data).toLiteral() - ) - ); - - // When - const result = componentReducer(literalComponentsState, action); - - // Then - expect(getComponentHelperSpy).toHaveBeenCalledWith(id, routePathSegments); - expect(result).toEqual( - createComponentsState( - createComponentState(FAILED, 'test-team', 9, data).toLiteral() - ) - ); - expect(updateComponentHelperSpy).toHaveBeenCalledWith( - createComponentState(FAILED, 'test-team', 9, data).toLiteral() - ); - }); - - it('should verify invokes correct methods (data from store)', () => { - // Given - const data = new Map([['wifi', []], ['routers', {}]]); - const action = new ActionStub( - COMPONENT_FAILED, - createComponentState(LOADING, 'test-team', 16) - ); - getComponentHelperSpy - .and - .returnValue(createComponentState(LOADING, 'test-team', 14, data).toLiteral()); - getStateHelperSpy - .and - .returnValue( - createComponentsState( - createComponentState(FAILED, 'test-team', 16, data).toLiteral() - ) - ); - - // When - const result = componentReducer(literalComponentsState, action); - - // Then - expect(getComponentHelperSpy).toHaveBeenCalledWith(id, routePathSegments); - expect(result).toEqual( - createComponentsState( - createComponentState(FAILED, 'test-team', 16, data).toLiteral() - ) - ); - expect(updateComponentHelperSpy).toHaveBeenCalledWith( - createComponentState(FAILED, 'test-team', 16, data).toLiteral() - ); - }); - }); - - describe('|COMPONENT_CLEAR_DATA|', () => { - it('should verify invokes correct methods', () => { - // Given - const data = new Map([['admins', []], ['telcos', {}]]); - const action = new ActionStub( - COMPONENT_CLEAR_DATA, - createComponentState(LOADED, 'test-team', 21) - ); - getComponentHelperSpy - .and - .returnValue(createComponentState(LOADED, 'test-team', 15, data).toLiteral()); - getStateHelperSpy - .and - .returnValue( - createComponentsState( - createComponentState(LOADING, 'test-team', 21).toLiteral() - ) - ); - - // When - const result = componentReducer(literalComponentsState, action); - - // Then - expect(getComponentHelperSpy).toHaveBeenCalledWith(id, routePathSegments); - expect(result).toEqual( - createComponentsState( - createComponentState(LOADING, 'test-team', 21).toLiteral() - ) - ); - expect(updateComponentHelperSpy).toHaveBeenCalledWith( - createComponentState(LOADING, 'test-team', 21).toLiteral() - ); - }); - }); - - describe('|ROUTER_NAVIGATION|', () => { - it('should verify invokes correct methods', () => { - // Given - const routerNavigationPayload = createRouterNavigationPayload(); - const action = new ActionStub>( - ROUTER_NAVIGATION, - routerNavigationPayload - ); - const resetComponentsHelperSpy = spyOn(ComponentsStateHelper.prototype, 'resetComponentStates').and.callFake(CallFake); - getStateHelperSpy - .and - .returnValue( - createComponentsState( - createComponentState(IDLE, 'test-team', 17).toLiteral() - ) - ); - - // When - const result = componentReducer(literalComponentsState, action); - - // Then - expect(resetComponentsHelperSpy).toHaveBeenCalledWith(routerNavigationPayload.routerState.routePathSegments); - expect(result).toEqual( - createComponentsState( - createComponentState(IDLE, 'test-team', 17).toLiteral() - ) - ); - }); - }); - - describe('|UNKNOWN_ACTION for this Reducer|', () => { - it('should verify will return state as it is', () => { - // Given - const action = new ActionStub('[action] unknown type', {}); - - // When - const result = componentReducer(literalComponentsState, action); - - // Then - expect(result).toBe(literalComponentsState); - }); - }); - }); + let id: string; + let routePathSegments: string[]; + let literalComponentsState: LiteralComponentsState; + let updateComponentHelperSpy: jasmine.Spy; + let getComponentHelperSpy: jasmine.Spy; + let getStateHelperSpy: jasmine.Spy; + + beforeEach(() => { + id = 'testComponent1'; + routePathSegments = ['test_entity/15']; + literalComponentsState = { + components: {}, + routePathSegments: {} + }; + updateComponentHelperSpy = spyOn( + ComponentsStateHelper.prototype, + 'updateLiteralComponentState' + ).and.callFake(CallFake); + getComponentHelperSpy = spyOn( + ComponentsStateHelper.prototype, + 'getLiteralComponentState' + ); + getStateHelperSpy = spyOn(ComponentsStateHelper.prototype, 'getState'); + }); + + describe('Actions::', () => { + describe('|COMPONENT_INIT|', () => { + it('should verify invokes correct methods', () => { + // Given + const action = new ActionStub( + COMPONENT_INIT, + createComponentState(null) + ); + getStateHelperSpy.and.returnValue( + createComponentsState(createComponentState(INITIALIZED).toLiteral()) + ); + + // When + const result = componentReducer(literalComponentsState, action); + + // Then + expect(result).toEqual( + createComponentsState(createComponentState(INITIALIZED).toLiteral()) + ); + expect(updateComponentHelperSpy).toHaveBeenCalledWith( + createComponentState(INITIALIZED).toLiteral() + ); + }); + }); + + describe('|COMPONENT_IDLE|', () => { + it('should verify invokes correct methods', () => { + // Given + const action = ComponentIdle.of( + createComponentState(INITIALIZED, 'test-team', 4) + ); + getComponentHelperSpy.and.returnValue( + createComponentState(INITIALIZED).toLiteral() + ); + getStateHelperSpy.and.returnValue( + createComponentsState( + createComponentState(IDLE, 'test-team', 4).toLiteral() + ) + ); + + // When + const result = componentReducer(literalComponentsState, action); + + // Then + expect(getComponentHelperSpy).toHaveBeenCalledWith( + id, + routePathSegments + ); + expect(result).toEqual( + createComponentsState( + createComponentState(IDLE, 'test-team', 4).toLiteral() + ) + ); + expect(updateComponentHelperSpy).toHaveBeenCalledWith( + createComponentState(IDLE, 'test-team', 4).toLiteral() + ); + }); + }); + + describe('|COMPONENT_LOADING|', () => { + it('should verify invokes correct methods', () => { + // Given + const action = new ActionStub( + COMPONENT_LOADING, + createComponentState(IDLE, 'test-team', 4) + ); + getComponentHelperSpy.and.returnValue( + createComponentState(IDLE).toLiteral() + ); + getStateHelperSpy.and.returnValue( + createComponentsState( + createComponentState(LOADING, 'test-team', 4).toLiteral() + ) + ); + + // When + const result = componentReducer(literalComponentsState, action); + + // Then + expect(getComponentHelperSpy).toHaveBeenCalledWith( + id, + routePathSegments + ); + expect(result).toEqual( + createComponentsState( + createComponentState(LOADING, 'test-team', 4).toLiteral() + ) + ); + expect(updateComponentHelperSpy).toHaveBeenCalledWith( + createComponentState(LOADING, 'test-team', 4).toLiteral() + ); + }); + }); + + describe('|COMPONENT_UPDATE|', () => { + it('should verify invokes correct methods (data from action)', () => { + // Given + const data = new Map([ + ['users', []], + ['cities', {}] + ]); + const action = new ActionStub( + COMPONENT_UPDATE, + createComponentState(IDLE, 'test-team', 7, data) + ); + getComponentHelperSpy.and.returnValue( + createComponentState(LOADING).toLiteral() + ); + getStateHelperSpy.and.returnValue( + createComponentsState( + createComponentState(IDLE, 'test-team', 7, data).toLiteral() + ) + ); + + // When + const result = componentReducer(literalComponentsState, action); + + // Then + expect(getComponentHelperSpy).toHaveBeenCalledWith( + id, + routePathSegments + ); + expect(result).toEqual( + createComponentsState( + createComponentState(IDLE, 'test-team', 7, data).toLiteral() + ) + ); + expect(updateComponentHelperSpy).toHaveBeenCalledWith( + createComponentState(IDLE, 'test-team', 7, data).toLiteral() + ); + }); + + it('should verify invokes correct methods (data from store)', () => { + // Given + const data = new Map([ + ['countries', []], + ['payload', {}] + ]); + const action = new ActionStub( + COMPONENT_UPDATE, + createComponentState(FAILED, 'test-team', 6) + ); + getComponentHelperSpy.and.returnValue( + createComponentState(LOADING, 'test-team', 4, data).toLiteral() + ); + getStateHelperSpy.and.returnValue( + createComponentsState( + createComponentState(FAILED, 'test-team', 6, data).toLiteral() + ) + ); + + // When + const result = componentReducer(literalComponentsState, action); + + // Then + expect(getComponentHelperSpy).toHaveBeenCalledWith( + id, + routePathSegments + ); + expect(result).toEqual( + createComponentsState( + createComponentState(FAILED, 'test-team', 6, data).toLiteral() + ) + ); + expect(updateComponentHelperSpy).toHaveBeenCalledWith( + createComponentState(FAILED, 'test-team', 6, data).toLiteral() + ); + }); + }); + + describe('|COMPONENT_LOADED|', () => { + it('should verify invokes correct methods', () => { + // Given + const action = ComponentLoaded.of( + createComponentState(LOADING, 'test-team', 11) + ); + getComponentHelperSpy.and.returnValue( + createComponentState(IDLE, 'test-team', 7).toLiteral() + ); + getStateHelperSpy.and.returnValue( + createComponentsState( + createComponentState(LOADED, 'test-team', 11).toLiteral() + ) + ); + + // When + const result = componentReducer(literalComponentsState, action); + + // Then + expect(getComponentHelperSpy).toHaveBeenCalledWith( + id, + routePathSegments + ); + expect(result).toEqual( + createComponentsState( + createComponentState(LOADED, 'test-team', 11).toLiteral() + ) + ); + expect(updateComponentHelperSpy).toHaveBeenCalledWith( + createComponentState(LOADED, 'test-team', 11).toLiteral() + ); + }); + }); + + describe('|COMPONENT_FAILED|', () => { + it('should verify invokes correct methods (data from action)', () => { + // Given + const data = new Map([ + ['data', []], + ['invokes', {}] + ]); + const action = new ActionStub( + COMPONENT_FAILED, + createComponentState(IDLE, 'test-team', 9, data) + ); + getComponentHelperSpy.and.returnValue( + createComponentState(LOADING).toLiteral() + ); + getStateHelperSpy.and.returnValue( + createComponentsState( + createComponentState(FAILED, 'test-team', 9, data).toLiteral() + ) + ); + + // When + const result = componentReducer(literalComponentsState, action); + + // Then + expect(getComponentHelperSpy).toHaveBeenCalledWith( + id, + routePathSegments + ); + expect(result).toEqual( + createComponentsState( + createComponentState(FAILED, 'test-team', 9, data).toLiteral() + ) + ); + expect(updateComponentHelperSpy).toHaveBeenCalledWith( + createComponentState(FAILED, 'test-team', 9, data).toLiteral() + ); + }); + + it('should verify invokes correct methods (data from store)', () => { + // Given + const data = new Map([ + ['wifi', []], + ['routers', {}] + ]); + const action = new ActionStub( + COMPONENT_FAILED, + createComponentState(LOADING, 'test-team', 16) + ); + getComponentHelperSpy.and.returnValue( + createComponentState(LOADING, 'test-team', 14, data).toLiteral() + ); + getStateHelperSpy.and.returnValue( + createComponentsState( + createComponentState(FAILED, 'test-team', 16, data).toLiteral() + ) + ); + + // When + const result = componentReducer(literalComponentsState, action); + + // Then + expect(getComponentHelperSpy).toHaveBeenCalledWith( + id, + routePathSegments + ); + expect(result).toEqual( + createComponentsState( + createComponentState(FAILED, 'test-team', 16, data).toLiteral() + ) + ); + expect(updateComponentHelperSpy).toHaveBeenCalledWith( + createComponentState(FAILED, 'test-team', 16, data).toLiteral() + ); + }); + }); + + describe('|COMPONENT_CLEAR_DATA|', () => { + it('should verify invokes correct methods', () => { + // Given + const data = new Map([ + ['admins', []], + ['telcos', {}] + ]); + const action = new ActionStub( + COMPONENT_CLEAR_DATA, + createComponentState(LOADED, 'test-team', 21) + ); + getComponentHelperSpy.and.returnValue( + createComponentState(LOADED, 'test-team', 15, data).toLiteral() + ); + getStateHelperSpy.and.returnValue( + createComponentsState( + createComponentState(LOADING, 'test-team', 21).toLiteral() + ) + ); + + // When + const result = componentReducer(literalComponentsState, action); + + // Then + expect(getComponentHelperSpy).toHaveBeenCalledWith( + id, + routePathSegments + ); + expect(result).toEqual( + createComponentsState( + createComponentState(LOADING, 'test-team', 21).toLiteral() + ) + ); + expect(updateComponentHelperSpy).toHaveBeenCalledWith( + createComponentState(LOADING, 'test-team', 21).toLiteral() + ); + }); + }); + + describe('|ROUTER_NAVIGATION|', () => { + it('should verify invokes correct methods', () => { + // Given + const routerNavigationPayload = createRouterNavigationPayload(); + const action = new ActionStub>( + ROUTER_NAVIGATION, + routerNavigationPayload + ); + const resetComponentsHelperSpy = spyOn( + ComponentsStateHelper.prototype, + 'resetComponentStates' + ).and.callFake(CallFake); + getStateHelperSpy.and.returnValue( + createComponentsState( + createComponentState(IDLE, 'test-team', 17).toLiteral() + ) + ); + + // When + const result = componentReducer(literalComponentsState, action); + + // Then + expect(resetComponentsHelperSpy).toHaveBeenCalledWith( + routerNavigationPayload.routerState.routePathSegments + ); + expect(result).toEqual( + createComponentsState( + createComponentState(IDLE, 'test-team', 17).toLiteral() + ) + ); + }); + }); + + describe('|UNKNOWN_ACTION for this Reducer|', () => { + it('should verify will return state as it is', () => { + // Given + const action = new ActionStub('[action] unknown type', {}); + + // When + const result = componentReducer(literalComponentsState, action); + + // Then + expect(result).toBe(literalComponentsState); + }); + }); + }); }); class ActionStub extends BaseActionWithPayload { - constructor(type: string, payload: T) { - super(type, payload); - } + constructor(type: string, payload: T) { + super(type, payload); + } } const createComponentState = ( - status: StatusType, - search = '', - navigationId = 3, - data: Map = new Map()): ComponentState => { - - const literalComponentState: LiteralComponentState = { - id: 'testComponent1', - status, - routePath: 'test_entity/15', - routePathSegments: ['test_entity/15'], - navigationId, - search, - data: CollectionsUtil.transformMapToObject(data) - }; - - return { - ...literalComponentState as any, - data, - copy: CallFake, - toLiteral: () => literalComponentState, - toLiteralDeepClone: () => literalComponentState - } as ComponentState; + status: StatusType, + search = '', + navigationId = 3, + data: Map = new Map() +): ComponentState => { + const literalComponentState: LiteralComponentState = { + id: 'testComponent1', + status, + routePath: 'test_entity/15', + routePathSegments: ['test_entity/15'], + navigationId, + search, + data: CollectionsUtil.transformMapToObject(data) + }; + + return { + ...(literalComponentState as any), + data, + copy: CallFake, + toLiteral: () => literalComponentState, + toLiteralDeepClone: () => literalComponentState + } as ComponentState; }; -const createComponentsState = (componentState: LiteralComponentState): LiteralComponentsState => { - return { - components: {}, - routePathSegments: { - 'test_entity/15': { - components: { - testComponent1: componentState - }, - routePathSegments: {} - } - } - }; +const createComponentsState = ( + componentState: LiteralComponentState +): LiteralComponentsState => { + return { + components: {}, + routePathSegments: { + 'test_entity/15': { + components: { + testComponent1: componentState + }, + routePathSegments: {} + } + } + }; }; -const createRouterNavigationPayload = (): RouterNavigationPayload => { - return { - routerState: RouteState.of( - RouteSegments.of('entity/21'), - 'entity/21' - ), - event: null - }; -}; +const createRouterNavigationPayload = + (): RouterNavigationPayload => { + return { + routerState: RouteState.of(RouteSegments.of('entity/21'), 'entity/21'), + event: null + }; + }; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/reducers/component.reducer.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/reducers/component.reducer.ts index bdb6ec45de..dac68d7a5e 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/reducers/component.reducer.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/reducers/component.reducer.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -13,23 +11,32 @@ import { CollectionsUtil } from '../../../../utils'; import { NavigationActions, RouteSegments, RouteState } from '../../../router'; -import { ComponentsStateHelper, ComponentState, FAILED, IDLE, INITIALIZED, LiteralComponentState, LOADED, LOADING } from '../../model'; +import { + ComponentsStateHelper, + ComponentState, + FAILED, + IDLE, + INITIALIZED, + LiteralComponentState, + LOADED, + LOADING +} from '../../model'; import { - COMPONENT_CLEAR_DATA, - COMPONENT_FAILED, - COMPONENT_IDLE, - COMPONENT_INIT, - COMPONENT_LOADED, - COMPONENT_LOADING, - COMPONENT_UPDATE, - ComponentActions, - ComponentClearData, - ComponentIdle, - ComponentInit, - ComponentLoaded, - ComponentLoading, - ComponentUpdate + COMPONENT_CLEAR_DATA, + COMPONENT_FAILED, + COMPONENT_IDLE, + COMPONENT_INIT, + COMPONENT_LOADED, + COMPONENT_LOADING, + COMPONENT_UPDATE, + ComponentActions, + ComponentClearData, + ComponentIdle, + ComponentInit, + ComponentLoaded, + ComponentLoading, + ComponentUpdate } from '../actions'; const stateHelper = new ComponentsStateHelper(); @@ -40,116 +47,134 @@ const stateHelper = new ComponentsStateHelper(); * */ export function componentReducer( - state = stateHelper.getState(), - action: ComponentActions | NavigationActions = { type: null, payload: null }) { - - let actionComponentState: ComponentState; - let actionLiteralComponentState: LiteralComponentState; - let storeLiteralComponentState: LiteralComponentState; - - stateHelper.setState(state); - - switch (action.type) { - case COMPONENT_INIT: - actionComponentState = (action as ComponentInit).payload; - - stateHelper.updateLiteralComponentState({ - ...actionComponentState.toLiteralDeepClone(), - status: INITIALIZED - }); - - return stateHelper.getState(); - case COMPONENT_IDLE: - case COMPONENT_LOADING: - actionComponentState = (action as ComponentIdle | ComponentLoading).payload; - storeLiteralComponentState = stateHelper - .getLiteralComponentState(actionComponentState.id, actionComponentState.routePathSegments); - - actionLiteralComponentState = actionComponentState.toLiteralDeepClone(); - - stateHelper.updateLiteralComponentState({ - ...storeLiteralComponentState, - ...actionLiteralComponentState, - status: action instanceof ComponentIdle - ? IDLE - : LOADING - }); - - return stateHelper.getState(); - case COMPONENT_UPDATE: - case COMPONENT_LOADED: - actionComponentState = (action as (ComponentLoaded | ComponentUpdate)).payload; - storeLiteralComponentState = stateHelper - .getLiteralComponentState(actionComponentState.id, actionComponentState.routePathSegments); - - actionLiteralComponentState = actionComponentState.toLiteralDeepClone(); - - stateHelper.updateLiteralComponentState({ - ...storeLiteralComponentState, - ...actionLiteralComponentState, - status: action instanceof ComponentLoaded - ? LOADED - : actionComponentState.status, - data: getComponentStateData(actionLiteralComponentState, storeLiteralComponentState) - }); - - return stateHelper.getState(); - case COMPONENT_FAILED: - actionComponentState = (action as (ComponentLoaded | ComponentUpdate)).payload; - storeLiteralComponentState = stateHelper - .getLiteralComponentState(actionComponentState.id, actionComponentState.routePathSegments); - - actionLiteralComponentState = actionComponentState.toLiteralDeepClone(); - - stateHelper.updateLiteralComponentState({ - ...storeLiteralComponentState, - ...actionLiteralComponentState, - data: getComponentStateData(actionLiteralComponentState, storeLiteralComponentState), - status: FAILED - }); - - return stateHelper.getState(); - case COMPONENT_CLEAR_DATA: - actionComponentState = (action as ComponentClearData).payload; - storeLiteralComponentState = stateHelper.getLiteralComponentState( - actionComponentState.id, - actionComponentState.routePathSegments); - - stateHelper.updateLiteralComponentState({ - ...storeLiteralComponentState, - ...actionComponentState.toLiteralDeepClone(), - data: {}, - status: LOADING - }); - - return stateHelper.getState(); - case ROUTER_NAVIGATION: - const routeSegments = (action as RouterNavigationAction).payload.routerState.routeSegments; - - if (!(routeSegments instanceof RouteSegments)) { - return state; - } - - stateHelper.resetComponentStates(routeSegments.routePathSegments); - - return stateHelper.getState(); - default: - return state; - } + state = stateHelper.getState(), + action: ComponentActions | NavigationActions = { type: null, payload: null } +) { + let actionComponentState: ComponentState; + let actionLiteralComponentState: LiteralComponentState; + let storeLiteralComponentState: LiteralComponentState; + + stateHelper.setState(state); + + switch (action.type) { + case COMPONENT_INIT: + actionComponentState = (action as ComponentInit).payload; + + stateHelper.updateLiteralComponentState({ + ...actionComponentState.toLiteralDeepClone(), + status: INITIALIZED + }); + + return stateHelper.getState(); + case COMPONENT_IDLE: + case COMPONENT_LOADING: + actionComponentState = (action as ComponentIdle | ComponentLoading) + .payload; + storeLiteralComponentState = stateHelper.getLiteralComponentState( + actionComponentState.id, + actionComponentState.routePathSegments + ); + + actionLiteralComponentState = actionComponentState.toLiteralDeepClone(); + + stateHelper.updateLiteralComponentState({ + ...storeLiteralComponentState, + ...actionLiteralComponentState, + status: action instanceof ComponentIdle ? IDLE : LOADING + }); + + return stateHelper.getState(); + case COMPONENT_UPDATE: + case COMPONENT_LOADED: + actionComponentState = (action as ComponentLoaded | ComponentUpdate) + .payload; + storeLiteralComponentState = stateHelper.getLiteralComponentState( + actionComponentState.id, + actionComponentState.routePathSegments + ); + + actionLiteralComponentState = actionComponentState.toLiteralDeepClone(); + + stateHelper.updateLiteralComponentState({ + ...storeLiteralComponentState, + ...actionLiteralComponentState, + status: + action instanceof ComponentLoaded + ? LOADED + : actionComponentState.status, + data: getComponentStateData( + actionLiteralComponentState, + storeLiteralComponentState + ) + }); + + return stateHelper.getState(); + case COMPONENT_FAILED: + actionComponentState = (action as ComponentLoaded | ComponentUpdate) + .payload; + storeLiteralComponentState = stateHelper.getLiteralComponentState( + actionComponentState.id, + actionComponentState.routePathSegments + ); + + actionLiteralComponentState = actionComponentState.toLiteralDeepClone(); + + stateHelper.updateLiteralComponentState({ + ...storeLiteralComponentState, + ...actionLiteralComponentState, + data: getComponentStateData( + actionLiteralComponentState, + storeLiteralComponentState + ), + status: FAILED + }); + + return stateHelper.getState(); + case COMPONENT_CLEAR_DATA: + actionComponentState = (action as ComponentClearData).payload; + storeLiteralComponentState = stateHelper.getLiteralComponentState( + actionComponentState.id, + actionComponentState.routePathSegments + ); + + stateHelper.updateLiteralComponentState({ + ...storeLiteralComponentState, + ...actionComponentState.toLiteralDeepClone(), + data: {}, + status: LOADING + }); + + return stateHelper.getState(); + case ROUTER_NAVIGATION: + const routeSegments = (action as RouterNavigationAction) + .payload.routerState.routeSegments; + + if (!(routeSegments instanceof RouteSegments)) { + return state; + } + + stateHelper.resetComponentStates(routeSegments.routePathSegments); + + return stateHelper.getState(); + default: + return state; + } } const getComponentStateData = ( - actionComponentState: LiteralComponentState, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - storeLiteralComponentState: LiteralComponentState): { [key: string]: any } => { - - if (CollectionsUtil.isLiteralObjectWithProperties(actionComponentState.data)) { - return actionComponentState.data; - } - - if (CollectionsUtil.isDefined(storeLiteralComponentState)) { - return storeLiteralComponentState.data; - } - - return {}; + actionComponentState: LiteralComponentState, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + storeLiteralComponentState: LiteralComponentState +): { [key: string]: any } => { + if ( + CollectionsUtil.isLiteralObjectWithProperties(actionComponentState.data) + ) { + return actionComponentState.data; + } + + if (CollectionsUtil.isDefined(storeLiteralComponentState)) { + return storeLiteralComponentState.data; + } + + return {}; }; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/reducers/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/reducers/index.ts index 56ef825780..391d3c5b72 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/reducers/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/component/state/reducers/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/index.ts index f76250a9ae..d8782511f2 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/navigation/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/navigation/index.ts index 4117a214b3..0639568a55 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/navigation/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/navigation/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/navigation/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/navigation/public-api.ts index 61c133a9d8..3709079dec 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/navigation/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/navigation/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/navigation/services/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/navigation/services/index.ts index c438c6ff08..479a3831bd 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/navigation/services/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/navigation/services/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/navigation/services/navigation.service.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/navigation/services/navigation.service.spec.ts index bff88152f1..1a81dff82a 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/navigation/services/navigation.service.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/navigation/services/navigation.service.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -19,425 +17,451 @@ import { RouterService, RouteSegments, RouteState } from '../../router'; import { NavigationService } from './navigation.service'; describe('NavigationService', () => { - let routerStub: jasmine.SpyObj; - let routerServiceStub: jasmine.SpyObj; - - let service: NavigationService; - - beforeEach(() => { - routerStub = jasmine.createSpyObj('router', ['navigate']); - routerServiceStub = jasmine.createSpyObj('routerService', ['getState', 'initialize']); - - TestBed.configureTestingModule({ - providers: [ - { provide: Router, useValue: routerStub }, - { provide: RouterService, useValue: routerServiceStub }, - NavigationService - ] - }); - - service = TestBed.inject(NavigationService); - - // @ts-ignore - service['router'] = routerStub; - // @ts-ignore - service['routerService'] = routerServiceStub; - }); - - it('should verify instance is created', () => { - // Then - expect(service).toBeDefined(); - }); - - describe('Methods::()', () => { - describe('|initialize|', () => { - it('should verify method exist and is callable', () => { - // Then - expect(service.initialize).toBeDefined(); - expect(() => service.initialize()).not.toThrow(); - expect(routerServiceStub.initialize).toHaveBeenCalled(); - }); - }); - - describe('|navigate|', () => { - let url: string; - let urlChunks: string[]; - let extras: NavigationExtras; - - beforeEach(() => { - url = '/explore/data-jobs'; - urlChunks = ['explore', 'data-jobs']; - extras = { - queryParams: { - search: 'vdk' - }, - replaceUrl: true, - queryParamsHandling: 'merge' - }; - // @ts-ignore - service['router'] = routerStub; - }); - - it('should verify will call Router.navigate() from Angular', () => { - // Given - routerStub.navigate.and.returnValue(Promise.resolve(true)); - - // When - service.navigate(url); - - // Then - expect(routerStub.navigate).toHaveBeenCalledWith(['/explore', 'data-jobs']); - }); - - it('should verify will return Promise', () => { - // Given - routerStub.navigate.and.returnValue(Promise.resolve(true)); - - // When - const returnedValue = service.navigate(url); - - // Then - expect(returnedValue).toBeInstanceOf(Promise); - }); - - it('should verify will return Promise.resolve(false) on Nil value for url', () => { - // When - const returnedValue = service.navigate(null); - - // Then - returnedValue.then((v) => expect(v).toBeFalse()); - expect(routerStub.navigate).not.toHaveBeenCalled(); - }); - - it('should verify will handle both url string and url Array', () => { - // Given - routerStub.navigate.and.returnValue(Promise.resolve(true)); - - // When - service.navigate(url); - service.navigate(urlChunks); - - // Then - expect(routerStub.navigate).toHaveBeenCalledTimes(2); - expect(routerStub.navigate.calls.argsFor(0)).toEqual([['/explore', 'data-jobs']]); - expect(routerStub.navigate.calls.argsFor(1)).toEqual([['/explore', 'data-jobs']]); - }); - - it('should verify will handle extras parameters', () => { - // Given - routerStub.navigate.and.returnValue(Promise.resolve(true)); - - // When - service.navigate(url, extras); - - // Then - expect(routerStub.navigate).toHaveBeenCalledWith(['/explore', 'data-jobs'], extras); - }); - }); - - describe('|_navigationSystemEventHandler_|', () => { - it('should verify will skip navigation if payload is Nil', () => { - // Given - const payload: { url: string | string[]; extras?: NavigationExtras } = null; - const navigateSpy = spyOn(service, 'navigate').and.callFake(() => Promise.resolve(false)); - - // When - const returnedValue = service._navigationSystemEventHandler_(payload); - - // Then - returnedValue.then((v) => expect(v).toBeFalse()); - expect(navigateSpy).not.toHaveBeenCalled(); - }); - - it('should verify will execute navigation when payload is provided', () => { - // Given - const payload = { url: '/explore/data-jobs', extras: { queryParams: { search: 'vdk' } } }; - spyOn(service, 'navigate').and.callFake(() => Promise.resolve(true)); - - // When - const returnedValue = service._navigationSystemEventHandler_(payload); - - // Then - returnedValue.then((v) => expect(v).toBeTrue()); - expect(service.navigate).toHaveBeenCalledWith(payload.url, payload.extras); - }); - }); - - describe('|navigateBack|', () => { - it('should verify will invoke correct methods when NavigationAction provided', (done) => { - // Given - const routeState = RouteState.of( - RouteSegments.of( - 'delivery', - { - navigateBack: { - path: '$.parent', - queryParamsHandling: 'preserve', - queryParams: { randomParam: 'abc' } - } - } as TaurusRouteData, - {}, - { search: 'team-test' }, - RouteSegments.of( - 'entity/25', - { - navigateTo: { - path: '/domain/context/entity/{0}/update/information', - replacers: [ - { searchValue: '{0}', replaceValue: '$.entity' } - ], - queryParams: { showWizard: true } - } - } as TaurusRouteData, - { entityId: 25 }, - { search: 'team-test' }, - RouteSegments.of( - 'domain/context', - {}, - {}, - { search: 'team-test' }, - null, - 'domain/context' - ), - 'entity/:entityId' - ), - 'delivery' - ), - 'domain/context/entity/25/delivery' - ); - routerServiceStub.getState.and.returnValue(of(routeState)); - const navigateSpy = spyOn(service, 'navigate').and.returnValue(Promise.resolve(true)); - - // When - const promise = service.navigateBack(); - - // Then - expect(promise).toBeInstanceOf(Promise); - expect(routerServiceStub.getState).toHaveBeenCalled(); - promise.then((value) => { - expect(value).toBeTrue(); - expect(navigateSpy).toHaveBeenCalledWith( - '/domain/context/entity/25', - { - queryParamsHandling: 'preserve' - } - ); - - done(); - }); - }); - - it('should verify will invoke correct methods when no NavigationAction provided', (done) => { - // Given - const routeState = RouteState.of( - RouteSegments.of( - 'delivery', - {}, - {}, - { search: 'team-test' }, - RouteSegments.of( - 'entity/25', - {}, - { entityId: 25 }, - { search: 'team-test' }, - RouteSegments.of( - 'domain/context', - {}, - {}, - { search: 'team-test' }, - null, - 'domain/context' - ), - 'entity/:entityId' - ), - 'delivery' - ), - 'domain/context/entity/25/delivery' - ); - routerServiceStub.getState.and.returnValue(of(routeState)); - const navigateSpy = spyOn(service, 'navigate').and.returnValue(Promise.resolve(true)); - - // When - const promise = service.navigateBack(); - - // Then - expect(promise).toBeInstanceOf(Promise); - expect(routerServiceStub.getState).toHaveBeenCalled(); - promise.then((value) => { - expect(value).toBeTrue(); - expect(navigateSpy).toHaveBeenCalledWith( - '/domain/context/entity/25', - { - queryParamsHandling: 'merge' - } - ); - - done(); - }); - }); - }); - - describe('|navigateTo|', () => { - it('should verify will invoke correct methods preserve routerState QueryParams', (done) => { - // Given - const routeState = RouteState.of( - RouteSegments.of( - 'delivery', - { - navigateBack: { - path: '$.parent', - queryParamsHandling: 'preserve', - queryParams: { randomParam: 'abc' } - } - } as TaurusRouteData, - {}, - { search: 'team-test' }, - RouteSegments.of( - 'entity/25', - { - navigateTo: { - path: '/domain/context/entity/{0}/update/information', - replacers: [ - { searchValue: '{0}', replaceValue: '$.entity' } - ], - queryParamsHandling: 'preserve', - queryParams: { showWizard: true } - } - } as TaurusRouteData, - { entityId: 25 }, - { search: 'team-test' }, - RouteSegments.of( - 'domain/context', - {}, - {}, - { search: 'team-test' }, - null, - 'domain/context' - ), - 'entity/:entityId' - ), - 'delivery' - ), - 'domain/context/entity/25/delivery' - ); - routerServiceStub.getState.and.returnValue(of(routeState)); - const navigateSpy = spyOn(service, 'navigate').and.returnValue(Promise.resolve(true)); - - // When - const promise = service.navigateTo({ '$.entity': '101' }); - - // Then - expect(promise).toBeInstanceOf(Promise); - expect(routerServiceStub.getState).toHaveBeenCalled(); - promise.then((value) => { - expect(value).toBeTrue(); - expect(navigateSpy).toHaveBeenCalledWith( - '/domain/context/entity/101/update/information', - { - queryParamsHandling: 'preserve' - } - ); - - done(); - }); - }); - - it('should verify will invoke correct methods merge QueryParams, provided and from routeState', (done) => { - // Given - const routeState = RouteState.of( - RouteSegments.of( - 'delivery', - { - navigateBack: { - path: '$.parent', - queryParamsHandling: 'preserve', - queryParams: { randomParam: 'abc' } - } - } as TaurusRouteData, - {}, - { search: 'team-test' }, - RouteSegments.of( - 'entity/25', - { - navigateTo: { - path: '/domain/context/entity/{0}/update/information', - replacers: [ - { searchValue: '{0}', replaceValue: '$.entity' } - ], - queryParams: { showWizard: true }, - queryParamsHandling: 'merge' - } - } as TaurusRouteData, - { entityId: 25 }, - { search: 'team-test' }, - RouteSegments.of( - 'domain/context', - {}, - {}, - { search: 'team-test' }, - null, - 'domain/context' - ), - 'entity/:entityId' - ), - 'delivery' - ), - 'domain/context/entity/25/delivery' - ); - routerServiceStub.getState.and.returnValue(of(routeState)); - const navigateSpy = spyOn(service, 'navigate').and.returnValue(Promise.resolve(true)); - - // When - const promise = service.navigateTo({ '$.entity': '101' }); - - // Then - expect(promise).toBeInstanceOf(Promise); - expect(routerServiceStub.getState).toHaveBeenCalled(); - promise.then((value) => { - expect(value).toBeTrue(); - expect(navigateSpy).toHaveBeenCalledWith( - '/domain/context/entity/101/update/information', - { - queryParamsHandling: 'merge', - queryParams: { search: 'team-test', showWizard: true } - } - ); - - done(); - }); - }); - - it('should verify will reject Promise when no NavigationAction is provided', (done) => { - // Given - const routeState = RouteState.of( - RouteSegments.of( - 'delivery', - {}, - {}, - { search: 'team-test' }, - null, - 'delivery' - ), - 'domain/context/entity/25/delivery' - ); - routerServiceStub.getState.and.returnValue(of(routeState)); - const navigateSpy = spyOn(service, 'navigate').and.returnValue(Promise.resolve(true)); - const consoleErrorSpy = spyOn(console, 'error').and.callThrough(); - - // When - const promise = service.navigateTo(); - - // Then - expect(promise).toBeInstanceOf(Promise); - expect(routerServiceStub.getState).toHaveBeenCalled(); - promise.then((value) => { - expect(value).toBeFalse(); - expect(navigateSpy).not.toHaveBeenCalled(); - expect(consoleErrorSpy).toHaveBeenCalled(); - - done(); - }); - }); - }); - }); + let routerStub: jasmine.SpyObj; + let routerServiceStub: jasmine.SpyObj; + + let service: NavigationService; + + beforeEach(() => { + routerStub = jasmine.createSpyObj('router', ['navigate']); + routerServiceStub = jasmine.createSpyObj('routerService', [ + 'getState', + 'initialize' + ]); + + TestBed.configureTestingModule({ + providers: [ + { provide: Router, useValue: routerStub }, + { provide: RouterService, useValue: routerServiceStub }, + NavigationService + ] + }); + + service = TestBed.inject(NavigationService); + + // @ts-ignore + service['router'] = routerStub; + // @ts-ignore + service['routerService'] = routerServiceStub; + }); + + it('should verify instance is created', () => { + // Then + expect(service).toBeDefined(); + }); + + describe('Methods::()', () => { + describe('|initialize|', () => { + it('should verify method exist and is callable', () => { + // Then + expect(service.initialize).toBeDefined(); + expect(() => service.initialize()).not.toThrow(); + expect(routerServiceStub.initialize).toHaveBeenCalled(); + }); + }); + + describe('|navigate|', () => { + let url: string; + let urlChunks: string[]; + let extras: NavigationExtras; + + beforeEach(() => { + url = '/explore/data-jobs'; + urlChunks = ['explore', 'data-jobs']; + extras = { + queryParams: { + search: 'vdk' + }, + replaceUrl: true, + queryParamsHandling: 'merge' + }; + // @ts-ignore + service['router'] = routerStub; + }); + + it('should verify will call Router.navigate() from Angular', () => { + // Given + routerStub.navigate.and.returnValue(Promise.resolve(true)); + + // When + service.navigate(url); + + // Then + expect(routerStub.navigate).toHaveBeenCalledWith([ + '/explore', + 'data-jobs' + ]); + }); + + it('should verify will return Promise', () => { + // Given + routerStub.navigate.and.returnValue(Promise.resolve(true)); + + // When + const returnedValue = service.navigate(url); + + // Then + expect(returnedValue).toBeInstanceOf(Promise); + }); + + it('should verify will return Promise.resolve(false) on Nil value for url', () => { + // When + const returnedValue = service.navigate(null); + + // Then + returnedValue.then((v) => expect(v).toBeFalse()); + expect(routerStub.navigate).not.toHaveBeenCalled(); + }); + + it('should verify will handle both url string and url Array', () => { + // Given + routerStub.navigate.and.returnValue(Promise.resolve(true)); + + // When + service.navigate(url); + service.navigate(urlChunks); + + // Then + expect(routerStub.navigate).toHaveBeenCalledTimes(2); + expect(routerStub.navigate.calls.argsFor(0)).toEqual([ + ['/explore', 'data-jobs'] + ]); + expect(routerStub.navigate.calls.argsFor(1)).toEqual([ + ['/explore', 'data-jobs'] + ]); + }); + + it('should verify will handle extras parameters', () => { + // Given + routerStub.navigate.and.returnValue(Promise.resolve(true)); + + // When + service.navigate(url, extras); + + // Then + expect(routerStub.navigate).toHaveBeenCalledWith( + ['/explore', 'data-jobs'], + extras + ); + }); + }); + + describe('|_navigationSystemEventHandler_|', () => { + it('should verify will skip navigation if payload is Nil', () => { + // Given + const payload: { url: string | string[]; extras?: NavigationExtras } = + null; + const navigateSpy = spyOn(service, 'navigate').and.callFake(() => + Promise.resolve(false) + ); + + // When + const returnedValue = service._navigationSystemEventHandler_(payload); + + // Then + returnedValue.then((v) => expect(v).toBeFalse()); + expect(navigateSpy).not.toHaveBeenCalled(); + }); + + it('should verify will execute navigation when payload is provided', () => { + // Given + const payload = { + url: '/explore/data-jobs', + extras: { queryParams: { search: 'vdk' } } + }; + spyOn(service, 'navigate').and.callFake(() => Promise.resolve(true)); + + // When + const returnedValue = service._navigationSystemEventHandler_(payload); + + // Then + returnedValue.then((v) => expect(v).toBeTrue()); + expect(service.navigate).toHaveBeenCalledWith( + payload.url, + payload.extras + ); + }); + }); + + describe('|navigateBack|', () => { + it('should verify will invoke correct methods when NavigationAction provided', (done) => { + // Given + const routeState = RouteState.of( + RouteSegments.of( + 'delivery', + { + navigateBack: { + path: '$.parent', + queryParamsHandling: 'preserve', + queryParams: { randomParam: 'abc' } + } + } as TaurusRouteData, + {}, + { search: 'team-test' }, + RouteSegments.of( + 'entity/25', + { + navigateTo: { + path: '/domain/context/entity/{0}/update/information', + replacers: [{ searchValue: '{0}', replaceValue: '$.entity' }], + queryParams: { showWizard: true } + } + } as TaurusRouteData, + { entityId: 25 }, + { search: 'team-test' }, + RouteSegments.of( + 'domain/context', + {}, + {}, + { search: 'team-test' }, + null, + 'domain/context' + ), + 'entity/:entityId' + ), + 'delivery' + ), + 'domain/context/entity/25/delivery' + ); + routerServiceStub.getState.and.returnValue(of(routeState)); + const navigateSpy = spyOn(service, 'navigate').and.returnValue( + Promise.resolve(true) + ); + + // When + const promise = service.navigateBack(); + + // Then + expect(promise).toBeInstanceOf(Promise); + expect(routerServiceStub.getState).toHaveBeenCalled(); + promise.then((value) => { + expect(value).toBeTrue(); + expect(navigateSpy).toHaveBeenCalledWith( + '/domain/context/entity/25', + { + queryParamsHandling: 'preserve' + } + ); + + done(); + }); + }); + + it('should verify will invoke correct methods when no NavigationAction provided', (done) => { + // Given + const routeState = RouteState.of( + RouteSegments.of( + 'delivery', + {}, + {}, + { search: 'team-test' }, + RouteSegments.of( + 'entity/25', + {}, + { entityId: 25 }, + { search: 'team-test' }, + RouteSegments.of( + 'domain/context', + {}, + {}, + { search: 'team-test' }, + null, + 'domain/context' + ), + 'entity/:entityId' + ), + 'delivery' + ), + 'domain/context/entity/25/delivery' + ); + routerServiceStub.getState.and.returnValue(of(routeState)); + const navigateSpy = spyOn(service, 'navigate').and.returnValue( + Promise.resolve(true) + ); + + // When + const promise = service.navigateBack(); + + // Then + expect(promise).toBeInstanceOf(Promise); + expect(routerServiceStub.getState).toHaveBeenCalled(); + promise.then((value) => { + expect(value).toBeTrue(); + expect(navigateSpy).toHaveBeenCalledWith( + '/domain/context/entity/25', + { + queryParamsHandling: 'merge' + } + ); + + done(); + }); + }); + }); + + describe('|navigateTo|', () => { + it('should verify will invoke correct methods preserve routerState QueryParams', (done) => { + // Given + const routeState = RouteState.of( + RouteSegments.of( + 'delivery', + { + navigateBack: { + path: '$.parent', + queryParamsHandling: 'preserve', + queryParams: { randomParam: 'abc' } + } + } as TaurusRouteData, + {}, + { search: 'team-test' }, + RouteSegments.of( + 'entity/25', + { + navigateTo: { + path: '/domain/context/entity/{0}/update/information', + replacers: [{ searchValue: '{0}', replaceValue: '$.entity' }], + queryParamsHandling: 'preserve', + queryParams: { showWizard: true } + } + } as TaurusRouteData, + { entityId: 25 }, + { search: 'team-test' }, + RouteSegments.of( + 'domain/context', + {}, + {}, + { search: 'team-test' }, + null, + 'domain/context' + ), + 'entity/:entityId' + ), + 'delivery' + ), + 'domain/context/entity/25/delivery' + ); + routerServiceStub.getState.and.returnValue(of(routeState)); + const navigateSpy = spyOn(service, 'navigate').and.returnValue( + Promise.resolve(true) + ); + + // When + const promise = service.navigateTo({ '$.entity': '101' }); + + // Then + expect(promise).toBeInstanceOf(Promise); + expect(routerServiceStub.getState).toHaveBeenCalled(); + promise.then((value) => { + expect(value).toBeTrue(); + expect(navigateSpy).toHaveBeenCalledWith( + '/domain/context/entity/101/update/information', + { + queryParamsHandling: 'preserve' + } + ); + + done(); + }); + }); + + it('should verify will invoke correct methods merge QueryParams, provided and from routeState', (done) => { + // Given + const routeState = RouteState.of( + RouteSegments.of( + 'delivery', + { + navigateBack: { + path: '$.parent', + queryParamsHandling: 'preserve', + queryParams: { randomParam: 'abc' } + } + } as TaurusRouteData, + {}, + { search: 'team-test' }, + RouteSegments.of( + 'entity/25', + { + navigateTo: { + path: '/domain/context/entity/{0}/update/information', + replacers: [{ searchValue: '{0}', replaceValue: '$.entity' }], + queryParams: { showWizard: true }, + queryParamsHandling: 'merge' + } + } as TaurusRouteData, + { entityId: 25 }, + { search: 'team-test' }, + RouteSegments.of( + 'domain/context', + {}, + {}, + { search: 'team-test' }, + null, + 'domain/context' + ), + 'entity/:entityId' + ), + 'delivery' + ), + 'domain/context/entity/25/delivery' + ); + routerServiceStub.getState.and.returnValue(of(routeState)); + const navigateSpy = spyOn(service, 'navigate').and.returnValue( + Promise.resolve(true) + ); + + // When + const promise = service.navigateTo({ '$.entity': '101' }); + + // Then + expect(promise).toBeInstanceOf(Promise); + expect(routerServiceStub.getState).toHaveBeenCalled(); + promise.then((value) => { + expect(value).toBeTrue(); + expect(navigateSpy).toHaveBeenCalledWith( + '/domain/context/entity/101/update/information', + { + queryParamsHandling: 'merge', + queryParams: { search: 'team-test', showWizard: true } + } + ); + + done(); + }); + }); + + it('should verify will reject Promise when no NavigationAction is provided', (done) => { + // Given + const routeState = RouteState.of( + RouteSegments.of( + 'delivery', + {}, + {}, + { search: 'team-test' }, + null, + 'delivery' + ), + 'domain/context/entity/25/delivery' + ); + routerServiceStub.getState.and.returnValue(of(routeState)); + const navigateSpy = spyOn(service, 'navigate').and.returnValue( + Promise.resolve(true) + ); + const consoleErrorSpy = spyOn(console, 'error').and.callThrough(); + + // When + const promise = service.navigateTo(); + + // Then + expect(promise).toBeInstanceOf(Promise); + expect(routerServiceStub.getState).toHaveBeenCalled(); + promise.then((value) => { + expect(value).toBeFalse(); + expect(navigateSpy).not.toHaveBeenCalled(); + expect(consoleErrorSpy).toHaveBeenCalled(); + + done(); + }); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/navigation/services/navigation.service.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/navigation/services/navigation.service.ts index e7819df918..0cad05e2cb 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/navigation/services/navigation.service.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/navigation/services/navigation.service.ts @@ -1,12 +1,15 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 */ import { Injectable } from '@angular/core'; -import { ActivatedRoute, ActivatedRouteSnapshot, NavigationExtras, Router } from '@angular/router'; +import { + ActivatedRoute, + ActivatedRouteSnapshot, + NavigationExtras, + Router +} from '@angular/router'; import { take } from 'rxjs/operators'; @@ -14,7 +17,11 @@ import { ArrayElement, CollectionsUtil } from '../../../utils'; import { Replacer, TaurusNavigateAction } from '../../../common'; -import { SE_NAVIGATE, SystemEventHandler, SystemEventHandlerClass } from '../../system-events'; +import { + SE_NAVIGATE, + SystemEventHandler, + SystemEventHandlerClass +} from '../../system-events'; import { RouterService, RouteState } from '../../router'; import { RouteStateFactory } from '../../router/factory'; @@ -27,323 +34,375 @@ import { RouteStateFactory } from '../../router/factory'; @Injectable() @SystemEventHandlerClass() export class NavigationService { - private readonly _routeStateFactory: RouteStateFactory; - - /** - * ** Constructor. - */ - constructor(private readonly router: Router, - private readonly routerService: RouterService) { - this._routeStateFactory = new RouteStateFactory(); - } - - /** - * ** Intercept SE_NAVIGATE Event and handle (react) on it. - */ - @SystemEventHandler(SE_NAVIGATE) - _navigationSystemEventHandler_(payload: { url: string | string[]; extras?: NavigationExtras }): Promise { - if (CollectionsUtil.isNil(payload)) { - return Promise.resolve(false); - } - - return this.navigate(payload.url, payload.extras); - } - - /** - * ** Navigate to url with provided extras. - */ - navigate(url: string | string[], extras?: NavigationExtras): Promise { - let urlChunks: string[]; - - if (CollectionsUtil.isArray(url)) { - urlChunks = url - .map((v, i) => - i === 0 - ? `/${ v.replace(/^\//, '') }` - : v - ); - } else if (CollectionsUtil.isString(url)) { - if (url.trim() === '/') { - urlChunks = ['/']; - } else { - urlChunks = url - .split('/') - .filter((v) => !!v) - .map((v, i) => - i === 0 - ? `/${ v }` - : v - ); - } - } else { - return Promise.resolve(false); - } - - return CollectionsUtil.isLiteralObject(extras) - ? this.router.navigate(urlChunks, extras) - : this.router.navigate(urlChunks); - } - - /** - * ** Navigate to using Route config, RouteState and leveraging provided optional replaceValueResolver. - * - * @param replaceValues is Object with mapping between Replacer.replaceValue key pointer to dynamic value specific for the Page. - * - What does it mean? - * Replacer has searchValue and replaceValue. When searchValue match, it replace with replaceValue, but - * replaceValue could be something like '$.team', '$.job', '{0}', '{1}' etc... dynamic params, so those params - * could be key in this Map to construct correct url depending of the logic in RouteConfig. - *

    - * Important!!! - * - If replaceValues is not provided or some key doesn't exist there, replaceValue would be use as it is in the RouteConfig. - *

    - *

    - * @param activatedRoute is optional and could be provided if you want those state to be used to extract RouteConfig and NavigationAction. - */ - navigateTo(replaceValues?: { [key: string]: ArrayElement['replaceValue'] }, - activatedRoute?: ActivatedRoute | ActivatedRouteSnapshot): Promise { - return this._navigateWithAction(replaceValues, activatedRoute, 'navigateTo'); - } - - /** - * ** Navigate back using Route config, RouteState and leveraging provided optional replaceValueResolver. - * - * @param replaceValues is Object with mapping between Replacer.replaceValue key pointer to dynamic value specific for the Page. - * - What does it mean? - * Replacer has searchValue and replaceValue. When searchValue match, it replace with replaceValue, but - * replaceValue could be something like '$.team', '$.job', '{0}', '{1}' etc... dynamic params, so those params - * could be key in this Map to construct correct url depending of the logic in RouteConfig. - *

    - * Important!!! - * - If replaceValues is not provided or some key doesn't exist there, replaceValue would be use as it is in the RouteConfig. - *

    - *

    - * @param activatedRoute is optional and could be provided if you want those state to be used to extract RouteConfig and NavigationAction. - */ - navigateBack(replaceValues?: { [key: string]: ArrayElement['replaceValue'] }, - activatedRoute?: ActivatedRoute | ActivatedRouteSnapshot): Promise { - return this._navigateWithAction(replaceValues, activatedRoute, 'navigateBack'); - } - - /** - * ** Redirect using Route config, RouteState and leveraging provided optional replaceValueResolver. - * - * @param replaceValues is Object with mapping between Replacer.replaceValue key pointer to dynamic value specific for the Page. - * - What does it mean? - * Replacer has searchValue and replaceValue. When searchValue match, it replace with replaceValue, but - * replaceValue could be something like '$.team', '$.job', '{0}', '{1}' etc... dynamic params, so those params - * could be key in this Map to construct correct url depending of the logic in RouteConfig. - *

    - * Important!!! - * - If replaceValues is not provided or some key doesn't exist there, replaceValue would be use as it is in the RouteConfig. - *

    - *

    - * @param activatedRoute is optional and could be provided if you want those state to be used to extract RouteConfig and NavigationAction. - */ - redirect(replaceValues?: { [key: string]: ArrayElement['replaceValue'] }, - activatedRoute?: ActivatedRoute | ActivatedRouteSnapshot): Promise { - return this._navigateWithAction(replaceValues, activatedRoute, 'redirect') - } - - /** - * ** Resolve NavigationAction using Route config, RouteState and leveraging provided optional replaceValueResolver. - * @param navigateActionType is the type of the NavigationAction we want to resolve from Route config. - * @param replaceValues is Object with mapping between Replacer.replaceValue key pointer to dynamic value specific for the Page. - * - What does it mean? - * Replacer has searchValue and replaceValue. When searchValue match, it replace with replaceValue, but - * replaceValue could be something like '$.team', '$.job', '{0}', '{1}' etc... dynamic params, so those params - * could be key in this Map to construct correct url depending of the logic in RouteConfig. - *

    - * Important!!! - * - If replaceValues is not provided or some key doesn't exist there, replaceValue would be use as it is in the RouteConfig. - *

    - *

    - * @param activatedRoute is optional and could be provided if you want those state to be used to extract RouteConfig and NavigationAction. - */ - resolveNavigateActionUrl(navigateActionType: 'navigateTo' | 'navigateBack' | 'redirect', - replaceValues?: { [key: string]: ArrayElement['replaceValue'] }, - activatedRoute?: ActivatedRoute | ActivatedRouteSnapshot | RouteState): Promise<[string, NavigationExtras]> { - - const _replaceValues = CollectionsUtil.isLiteralObject(replaceValues) - ? replaceValues - : {}; - - return this - ._extractRouteState(activatedRoute) - .then((state) => this._constructNavigateParameters(state, navigateActionType)) - .then((params) => - this._resolveNavigateValues( - params.url, - params.replacers, - _replaceValues, - params.navigationExtras - ) - ); - } - - /** - * ** Initialize the Service without any operation, just to create singleton Service instance. - * - * - It should be done in the root of the project only once. - * - Possible place is AppComponent or some root initializer guard. - */ - initialize(): void { - this.routerService.initialize(); - } - - private _navigateWithAction( - replaceValues: { [key: string]: ArrayElement['replaceValue'] }, - activatedRoute: ActivatedRoute | ActivatedRouteSnapshot, - dataKey: 'navigateTo' | 'navigateBack' | 'redirect'): Promise { - - return this.resolveNavigateActionUrl(dataKey, replaceValues, activatedRoute) - .then() - .then(([url, navigationExtras]) => this.navigate(url, navigationExtras)) - .catch((error) => { - console.error(error); - - return false; - }); - } - - private _extractRouteState(activatedRoute: ActivatedRoute | ActivatedRouteSnapshot | RouteState): Promise { - // NOTICE - // this piece of code is needed for Guards cases usage. - // Use params and data from Guard RouteState instead from RouterService because - // RouterService state is populated after all guards are resolved - if (CollectionsUtil.isDefined(activatedRoute)) { - if (activatedRoute instanceof RouteState) { - return Promise.resolve(activatedRoute); - } - - return Promise.resolve( - this._routeStateFactory - .create( - activatedRoute instanceof ActivatedRoute - ? activatedRoute.snapshot - : activatedRoute, - null - ) - ); - } - - return this.routerService - .getState() - .pipe( - take(1) - ) - .toPromise() - .then((state) => state); - } - - // eslint-disable-next-line max-len - private _constructNavigateParameters(state: RouteState, dataKey: 'navigateTo' | 'navigateBack' | 'redirect'): Promise { - const navigateAction = state.getData(dataKey); - const navigationExtras: NavigationExtras = { queryParamsHandling: 'merge' }; - - let url: string; - let replacers: Array> = []; - - if (CollectionsUtil.isDefined(navigateAction)) { - url = this._resolveNavigateUrl(state, dataKey, navigateAction); - - if (CollectionsUtil.isArray(navigateAction.replacers)) { - replacers = navigateAction.replacers; - } - - this._appendNavigateExtras(state, navigationExtras, navigateAction); - } else if (dataKey === 'navigateBack') { - url = state.getParentAbsoluteRoutePath(); - } else { - return Promise.reject('Cannot navigate without NavigationAction'); - } - - return Promise.resolve({ - url, - replacers, - navigationExtras - }); - } - - private _resolveNavigateUrl(state: RouteState, - dataKey: 'navigateTo' | 'navigateBack' | 'redirect', - navigateAction: TaurusNavigateAction): string { - - if (dataKey === 'redirect' || dataKey === 'navigateBack') { - if (navigateAction.path === '$.parent' || navigateAction.path === '$.requested') { - return navigateAction.useConfigPath - ? state.getParentAbsoluteConfigPath() - : state.getParentAbsoluteRoutePath(); - } - - if (navigateAction.path === '$.current') { - return navigateAction.useConfigPath - ? state.getAbsoluteConfigPath() - : state.getAbsoluteRoutePath(); - } - - return navigateAction.path; - } - - if (navigateAction.path === '$.current') { - return navigateAction.useConfigPath - ? state.getAbsoluteConfigPath() - : state.getAbsoluteRoutePath(); - } - - return navigateAction.path; - } - - // eslint-disable-next-line max-len - private _appendNavigateExtras(state: RouteState, navigationExtras: NavigationExtras, navigateAction: TaurusNavigateAction): void { - if (CollectionsUtil.isString(navigateAction.queryParamsHandling)) { - navigationExtras.queryParamsHandling = navigateAction.queryParamsHandling; - - if (navigationExtras.queryParamsHandling === 'merge') { - navigationExtras.queryParams = { - ...state.queryParams, - ...(navigateAction.queryParams ?? {}) - }; - } else if (navigationExtras.queryParamsHandling !== 'preserve') { - navigationExtras.queryParams = navigateAction.queryParams ?? {}; - } - } else if (CollectionsUtil.isNull(navigateAction.queryParamsHandling)) { - delete navigationExtras.queryParamsHandling; - } else { - navigationExtras.queryParams = { - ...state.queryParams, - ...(navigateAction.queryParams ?? {}) - }; - } - } - - private _resolveNavigateValues( - path: string, - replacers: Array>, - replaceValues: { [key: string]: ArrayElement['replaceValue'] }, - navigationExtras: NavigationExtras): Promise<[string, NavigationExtras]> { - - let resolvedPath: string; - - if (CollectionsUtil.isString(path)) { - resolvedPath = path; - } else { - resolvedPath = '/'; - - console.error(`RouteConfig error! NavigationAction config, "path" property is missing.`); - } - - for (const replacer of replacers) { - const replaceValue = replaceValues[replacer.replaceValue] ?? replacer.replaceValue; - - resolvedPath = resolvedPath.replace(replacer.searchValue, replaceValue); - } - - return Promise.resolve([resolvedPath, navigationExtras]); - } + private readonly _routeStateFactory: RouteStateFactory; + + /** + * ** Constructor. + */ + constructor( + private readonly router: Router, + private readonly routerService: RouterService + ) { + this._routeStateFactory = new RouteStateFactory(); + } + + /** + * ** Intercept SE_NAVIGATE Event and handle (react) on it. + */ + @SystemEventHandler(SE_NAVIGATE) + _navigationSystemEventHandler_(payload: { + url: string | string[]; + extras?: NavigationExtras; + }): Promise { + if (CollectionsUtil.isNil(payload)) { + return Promise.resolve(false); + } + + return this.navigate(payload.url, payload.extras); + } + + /** + * ** Navigate to url with provided extras. + */ + navigate( + url: string | string[], + extras?: NavigationExtras + ): Promise { + let urlChunks: string[]; + + if (CollectionsUtil.isArray(url)) { + urlChunks = url.map((v, i) => (i === 0 ? `/${v.replace(/^\//, '')}` : v)); + } else if (CollectionsUtil.isString(url)) { + if (url.trim() === '/') { + urlChunks = ['/']; + } else { + urlChunks = url + .split('/') + .filter((v) => !!v) + .map((v, i) => (i === 0 ? `/${v}` : v)); + } + } else { + return Promise.resolve(false); + } + + return CollectionsUtil.isLiteralObject(extras) + ? this.router.navigate(urlChunks, extras) + : this.router.navigate(urlChunks); + } + + /** + * ** Navigate to using Route config, RouteState and leveraging provided optional replaceValueResolver. + * + * @param replaceValues is Object with mapping between Replacer.replaceValue key pointer to dynamic value specific for the Page. + * - What does it mean? + * Replacer has searchValue and replaceValue. When searchValue match, it replace with replaceValue, but + * replaceValue could be something like '$.team', '$.job', '{0}', '{1}' etc... dynamic params, so those params + * could be key in this Map to construct correct url depending of the logic in RouteConfig. + *

    + * Important!!! + * - If replaceValues is not provided or some key doesn't exist there, replaceValue would be use as it is in the RouteConfig. + *

    + *

    + * @param activatedRoute is optional and could be provided if you want those state to be used to extract RouteConfig and NavigationAction. + */ + navigateTo( + replaceValues?: { + [key: string]: ArrayElement< + TaurusNavigateAction['replacers'] + >['replaceValue']; + }, + activatedRoute?: ActivatedRoute | ActivatedRouteSnapshot + ): Promise { + return this._navigateWithAction( + replaceValues, + activatedRoute, + 'navigateTo' + ); + } + + /** + * ** Navigate back using Route config, RouteState and leveraging provided optional replaceValueResolver. + * + * @param replaceValues is Object with mapping between Replacer.replaceValue key pointer to dynamic value specific for the Page. + * - What does it mean? + * Replacer has searchValue and replaceValue. When searchValue match, it replace with replaceValue, but + * replaceValue could be something like '$.team', '$.job', '{0}', '{1}' etc... dynamic params, so those params + * could be key in this Map to construct correct url depending of the logic in RouteConfig. + *

    + * Important!!! + * - If replaceValues is not provided or some key doesn't exist there, replaceValue would be use as it is in the RouteConfig. + *

    + *

    + * @param activatedRoute is optional and could be provided if you want those state to be used to extract RouteConfig and NavigationAction. + */ + navigateBack( + replaceValues?: { + [key: string]: ArrayElement< + TaurusNavigateAction['replacers'] + >['replaceValue']; + }, + activatedRoute?: ActivatedRoute | ActivatedRouteSnapshot + ): Promise { + return this._navigateWithAction( + replaceValues, + activatedRoute, + 'navigateBack' + ); + } + + /** + * ** Redirect using Route config, RouteState and leveraging provided optional replaceValueResolver. + * + * @param replaceValues is Object with mapping between Replacer.replaceValue key pointer to dynamic value specific for the Page. + * - What does it mean? + * Replacer has searchValue and replaceValue. When searchValue match, it replace with replaceValue, but + * replaceValue could be something like '$.team', '$.job', '{0}', '{1}' etc... dynamic params, so those params + * could be key in this Map to construct correct url depending of the logic in RouteConfig. + *

    + * Important!!! + * - If replaceValues is not provided or some key doesn't exist there, replaceValue would be use as it is in the RouteConfig. + *

    + *

    + * @param activatedRoute is optional and could be provided if you want those state to be used to extract RouteConfig and NavigationAction. + */ + redirect( + replaceValues?: { + [key: string]: ArrayElement< + TaurusNavigateAction['replacers'] + >['replaceValue']; + }, + activatedRoute?: ActivatedRoute | ActivatedRouteSnapshot + ): Promise { + return this._navigateWithAction(replaceValues, activatedRoute, 'redirect'); + } + + /** + * ** Resolve NavigationAction using Route config, RouteState and leveraging provided optional replaceValueResolver. + * @param navigateActionType is the type of the NavigationAction we want to resolve from Route config. + * @param replaceValues is Object with mapping between Replacer.replaceValue key pointer to dynamic value specific for the Page. + * - What does it mean? + * Replacer has searchValue and replaceValue. When searchValue match, it replace with replaceValue, but + * replaceValue could be something like '$.team', '$.job', '{0}', '{1}' etc... dynamic params, so those params + * could be key in this Map to construct correct url depending of the logic in RouteConfig. + *

    + * Important!!! + * - If replaceValues is not provided or some key doesn't exist there, replaceValue would be use as it is in the RouteConfig. + *

    + *

    + * @param activatedRoute is optional and could be provided if you want those state to be used to extract RouteConfig and NavigationAction. + */ + resolveNavigateActionUrl( + navigateActionType: 'navigateTo' | 'navigateBack' | 'redirect', + replaceValues?: { + [key: string]: ArrayElement< + TaurusNavigateAction['replacers'] + >['replaceValue']; + }, + activatedRoute?: ActivatedRoute | ActivatedRouteSnapshot | RouteState + ): Promise<[string, NavigationExtras]> { + const _replaceValues = CollectionsUtil.isLiteralObject(replaceValues) + ? replaceValues + : {}; + + return this._extractRouteState(activatedRoute) + .then((state) => + this._constructNavigateParameters(state, navigateActionType) + ) + .then((params) => + this._resolveNavigateValues( + params.url, + params.replacers, + _replaceValues, + params.navigationExtras + ) + ); + } + + /** + * ** Initialize the Service without any operation, just to create singleton Service instance. + * + * - It should be done in the root of the project only once. + * - Possible place is AppComponent or some root initializer guard. + */ + initialize(): void { + this.routerService.initialize(); + } + + private _navigateWithAction( + replaceValues: { + [key: string]: ArrayElement< + TaurusNavigateAction['replacers'] + >['replaceValue']; + }, + activatedRoute: ActivatedRoute | ActivatedRouteSnapshot, + dataKey: 'navigateTo' | 'navigateBack' | 'redirect' + ): Promise { + return this.resolveNavigateActionUrl(dataKey, replaceValues, activatedRoute) + .then() + .then(([url, navigationExtras]) => this.navigate(url, navigationExtras)) + .catch((error) => { + console.error(error); + + return false; + }); + } + + private _extractRouteState( + activatedRoute: ActivatedRoute | ActivatedRouteSnapshot | RouteState + ): Promise { + // NOTICE + // this piece of code is needed for Guards cases usage. + // Use params and data from Guard RouteState instead from RouterService because + // RouterService state is populated after all guards are resolved + if (CollectionsUtil.isDefined(activatedRoute)) { + if (activatedRoute instanceof RouteState) { + return Promise.resolve(activatedRoute); + } + + return Promise.resolve( + this._routeStateFactory.create( + activatedRoute instanceof ActivatedRoute + ? activatedRoute.snapshot + : activatedRoute, + null + ) + ); + } + + return this.routerService + .getState() + .pipe(take(1)) + .toPromise() + .then((state) => state); + } + + // eslint-disable-next-line max-len + private _constructNavigateParameters( + state: RouteState, + dataKey: 'navigateTo' | 'navigateBack' | 'redirect' + ): Promise { + const navigateAction = state.getData(dataKey); + const navigationExtras: NavigationExtras = { queryParamsHandling: 'merge' }; + + let url: string; + let replacers: Array> = []; + + if (CollectionsUtil.isDefined(navigateAction)) { + url = this._resolveNavigateUrl(state, dataKey, navigateAction); + + if (CollectionsUtil.isArray(navigateAction.replacers)) { + replacers = navigateAction.replacers; + } + + this._appendNavigateExtras(state, navigationExtras, navigateAction); + } else if (dataKey === 'navigateBack') { + url = state.getParentAbsoluteRoutePath(); + } else { + return Promise.reject('Cannot navigate without NavigationAction'); + } + + return Promise.resolve({ + url, + replacers, + navigationExtras + }); + } + + private _resolveNavigateUrl( + state: RouteState, + dataKey: 'navigateTo' | 'navigateBack' | 'redirect', + navigateAction: TaurusNavigateAction + ): string { + if (dataKey === 'redirect' || dataKey === 'navigateBack') { + if ( + navigateAction.path === '$.parent' || + navigateAction.path === '$.requested' + ) { + return navigateAction.useConfigPath + ? state.getParentAbsoluteConfigPath() + : state.getParentAbsoluteRoutePath(); + } + + if (navigateAction.path === '$.current') { + return navigateAction.useConfigPath + ? state.getAbsoluteConfigPath() + : state.getAbsoluteRoutePath(); + } + + return navigateAction.path; + } + + if (navigateAction.path === '$.current') { + return navigateAction.useConfigPath + ? state.getAbsoluteConfigPath() + : state.getAbsoluteRoutePath(); + } + + return navigateAction.path; + } + + // eslint-disable-next-line max-len + private _appendNavigateExtras( + state: RouteState, + navigationExtras: NavigationExtras, + navigateAction: TaurusNavigateAction + ): void { + if (CollectionsUtil.isString(navigateAction.queryParamsHandling)) { + navigationExtras.queryParamsHandling = navigateAction.queryParamsHandling; + + if (navigationExtras.queryParamsHandling === 'merge') { + navigationExtras.queryParams = { + ...state.queryParams, + ...(navigateAction.queryParams ?? {}) + }; + } else if (navigationExtras.queryParamsHandling !== 'preserve') { + navigationExtras.queryParams = navigateAction.queryParams ?? {}; + } + } else if (CollectionsUtil.isNull(navigateAction.queryParamsHandling)) { + delete navigationExtras.queryParamsHandling; + } else { + navigationExtras.queryParams = { + ...state.queryParams, + ...(navigateAction.queryParams ?? {}) + }; + } + } + + private _resolveNavigateValues( + path: string, + replacers: Array>, + replaceValues: { + [key: string]: ArrayElement< + TaurusNavigateAction['replacers'] + >['replaceValue']; + }, + navigationExtras: NavigationExtras + ): Promise<[string, NavigationExtras]> { + let resolvedPath: string; + + if (CollectionsUtil.isString(path)) { + resolvedPath = path; + } else { + resolvedPath = '/'; + + console.error( + `RouteConfig error! NavigationAction config, "path" property is missing.` + ); + } + + for (const replacer of replacers) { + const replaceValue = + replaceValues[replacer.replaceValue] ?? replacer.replaceValue; + + resolvedPath = resolvedPath.replace(replacer.searchValue, replaceValue); + } + + return Promise.resolve([resolvedPath, navigationExtras]); + } } interface NavigationParameters { - url: string; - replacers: Array>; - navigationExtras: NavigationExtras; + url: string; + replacers: Array>; + navigationExtras: NavigationExtras; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/actions/base.actions.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/actions/base.actions.spec.ts index 32a7c9d502..af8dfc9401 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/actions/base.actions.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/actions/base.actions.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -7,77 +5,91 @@ import { CollectionsUtil } from '../../../utils'; -import { BaseAction, BaseActionWithPayload, GenericAction } from './base.actions'; +import { + BaseAction, + BaseActionWithPayload, + GenericAction +} from './base.actions'; describe('BaseActionWithPayload', () => { - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify will throw Error', () => { - // Then - expect(() => BaseActionWithPayload.of(null, null)) - .toThrowError('Method have to be overridden in Subclasses.'); - }); - }); - }); - }); + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify will throw Error', () => { + // Then + expect(() => BaseActionWithPayload.of(null, null)).toThrowError( + 'Method have to be overridden in Subclasses.' + ); + }); + }); + }); + }); }); describe('GenericAction', () => { - it('should verify instance is created', () => { - // When - const instance = new GenericAction(null, null); + it('should verify instance is created', () => { + // When + const instance = new GenericAction(null, null); - // Then - expect(instance).toBeDefined(); - }); + // Then + expect(instance).toBeDefined(); + }); - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // Given - const type = '[component] Create State'; - const payload = { state: [1, 2, 3, 4] }; + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // Given + const type = '[component] Create State'; + const payload = { state: [1, 2, 3, 4] }; - // When - const instance = GenericAction.of(type, payload); + // When + const instance = GenericAction.of(type, payload); - // Then - expect(instance).toBeInstanceOf(GenericAction); - expect(instance).toBeInstanceOf(BaseActionWithPayload); - expect(instance).toBeInstanceOf(BaseAction); + // Then + expect(instance).toBeInstanceOf(GenericAction); + expect(instance).toBeInstanceOf(BaseActionWithPayload); + expect(instance).toBeInstanceOf(BaseAction); - expect(instance.type).toEqual(type); - expect(instance.payload).toBe(payload); - }); + expect(instance.type).toEqual(type); + expect(instance.payload).toBe(payload); + }); - it('should verify factory method will create instance with Task', () => { - // Given - const type = '[component] Submit Data'; - const payload = { state: [10, 20, 30, 40] }; - const task = 'patch_entity'; - const dateNowISO = new Date().toISOString(); - const taskIdentifier = `${ task } __ ${ dateNowISO }`; - const dateISOSpy = spyOn(CollectionsUtil, 'dateISO').and.returnValue(dateNowISO); - const interpolateStringSpy = spyOn(CollectionsUtil, 'interpolateString').and.returnValue(taskIdentifier); + it('should verify factory method will create instance with Task', () => { + // Given + const type = '[component] Submit Data'; + const payload = { state: [10, 20, 30, 40] }; + const task = 'patch_entity'; + const dateNowISO = new Date().toISOString(); + const taskIdentifier = `${task} __ ${dateNowISO}`; + const dateISOSpy = spyOn(CollectionsUtil, 'dateISO').and.returnValue( + dateNowISO + ); + const interpolateStringSpy = spyOn( + CollectionsUtil, + 'interpolateString' + ).and.returnValue(taskIdentifier); - // When - const instance = GenericAction.of(type, payload, task); + // When + const instance = GenericAction.of(type, payload, task); - // Then - expect(instance).toBeInstanceOf(GenericAction); - expect(instance).toBeInstanceOf(BaseActionWithPayload); - expect(instance).toBeInstanceOf(BaseAction); + // Then + expect(instance).toBeInstanceOf(GenericAction); + expect(instance).toBeInstanceOf(BaseActionWithPayload); + expect(instance).toBeInstanceOf(BaseAction); - expect(instance.type).toEqual(type); - expect(instance.payload).toBe(payload); - expect(instance.task).toEqual(taskIdentifier); - expect(dateISOSpy).toHaveBeenCalled(); - // @ts-ignore - expect(interpolateStringSpy).toHaveBeenCalledWith('%s __ %s', task, dateNowISO); - }); - }); - }); - }); + expect(instance.type).toEqual(type); + expect(instance.payload).toBe(payload); + expect(instance.task).toEqual(taskIdentifier); + expect(dateISOSpy).toHaveBeenCalled(); + // @ts-ignore + expect(interpolateStringSpy).toHaveBeenCalledWith( + '%s __ %s', + task, + dateNowISO + ); + }); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/actions/base.actions.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/actions/base.actions.ts index 8ff0c5e217..583f599684 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/actions/base.actions.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/actions/base.actions.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -15,17 +13,17 @@ import { createTaskIdentifier } from '../../../common'; * */ export abstract class BaseAction implements Action { - /** - * ** Type of Action. - */ - readonly type: string; + /** + * ** Type of Action. + */ + readonly type: string; - /** - * ** Constructor. - */ - protected constructor(type: string) { - this.type = type; - } + /** + * ** Constructor. + */ + protected constructor(type: string) { + this.type = type; + } } /** @@ -34,35 +32,32 @@ export abstract class BaseAction implements Action { * */ export abstract class BaseActionWithPayload extends BaseAction { + /** + * ** Action payload data. + */ + readonly payload: T; - /** - * ** Action payload data. - */ - readonly payload: T; - - /** - * ** Action Task. - */ - readonly task: string; + /** + * ** Action Task. + */ + readonly task: string; - /** - * ** Constructor. - */ - protected constructor(type: string, - payload: T, - task?: string) { - super(type); + /** + * ** Constructor. + */ + protected constructor(type: string, payload: T, task?: string) { + super(type); - this.payload = payload; - this.task = createTaskIdentifier(task); - } + this.payload = payload; + this.task = createTaskIdentifier(task); + } - /** - * ** Factory method that have to be overridden in Subclasses. - */ - static of(..._args: unknown[]): BaseActionWithPayload { - throw new Error('Method have to be overridden in Subclasses.'); - } + /** + * ** Factory method that have to be overridden in Subclasses. + */ + static of(..._args: unknown[]): BaseActionWithPayload { + throw new Error('Method have to be overridden in Subclasses.'); + } } /** @@ -73,19 +68,21 @@ export abstract class BaseActionWithPayload extends BaseAction { * */ export class GenericAction extends BaseActionWithPayload { - /** - * ** Constructor. - */ - constructor(type: string, - payload: T, - task?: string) { - super(type, payload, task); - } + /** + * ** Constructor. + */ + constructor(type: string, payload: T, task?: string) { + super(type, payload, task); + } - /** - * ** Factory method for Generic Action with type and payload in Constructor. - */ - static override of(type: string, payload: K, task?: string): GenericAction { - return new GenericAction(type, payload, task); - } + /** + * ** Factory method for Generic Action with type and payload in Constructor. + */ + static override of( + type: string, + payload: K, + task?: string + ): GenericAction { + return new GenericAction(type, payload, task); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/actions/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/actions/index.ts index 6f669d9c61..44fab8b3d3 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/actions/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/actions/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/config/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/config/index.ts index 9dcd8f6725..a5d3d5a7a5 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/config/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/config/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/config/ngrx-config.model.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/config/ngrx-config.model.spec.ts index fa9dd5d0f5..39de78013b 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/config/ngrx-config.model.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/config/ngrx-config.model.spec.ts @@ -1,32 +1,33 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 */ -import { NGRX_STORE_CONFIG, NGRX_STORE_DEVTOOLS_CONFIG } from './ngrx-config.model'; +import { + NGRX_STORE_CONFIG, + NGRX_STORE_DEVTOOLS_CONFIG +} from './ngrx-config.model'; describe('NGRX_STORE_DEVTOOLS_CONFIG', () => { - it('should verify default values are set', () => { - // Then - expect(NGRX_STORE_DEVTOOLS_CONFIG).toEqual({ - maxAge: 100, - serialize: true, - logOnly: false, - name: 'Taurus NgRx Store' - }); - }); + it('should verify default values are set', () => { + // Then + expect(NGRX_STORE_DEVTOOLS_CONFIG).toEqual({ + maxAge: 100, + serialize: true, + logOnly: false, + name: 'Taurus NgRx Store' + }); + }); }); describe('NGRX_STORE_CONFIG', () => { - it('should verify default values are set', () => { - // Then - expect(NGRX_STORE_CONFIG).toEqual({ - runtimeChecks: { - strictActionImmutability: true, - strictStateImmutability: true - } - }); - }); + it('should verify default values are set', () => { + // Then + expect(NGRX_STORE_CONFIG).toEqual({ + runtimeChecks: { + strictActionImmutability: true, + strictStateImmutability: true + } + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/config/ngrx-config.model.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/config/ngrx-config.model.ts index 635e4a46c1..16046fe303 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/config/ngrx-config.model.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/config/ngrx-config.model.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -14,13 +12,12 @@ import { StoreDevtoolsConfig } from '@ngrx/store-devtools'; * */ export const NGRX_STORE_DEVTOOLS_CONFIG: StoreDevtoolsConfig = { - maxAge: 100, - serialize: true, - logOnly: false, - name: 'Taurus NgRx Store' + maxAge: 100, + serialize: true, + logOnly: false, + name: 'Taurus NgRx Store' }; - /** * ** Configuration for NgRx Store. * @@ -28,10 +25,10 @@ export const NGRX_STORE_DEVTOOLS_CONFIG: StoreDevtoolsConfig = { */ // eslint-disable-next-line @typescript-eslint/no-explicit-any export const NGRX_STORE_CONFIG: RootStoreConfig = { - runtimeChecks: { - strictActionImmutability: true, - strictStateImmutability: true - } + runtimeChecks: { + strictActionImmutability: true, + strictStateImmutability: true + } }; /** @@ -40,9 +37,9 @@ export const NGRX_STORE_CONFIG: RootStoreConfig = { * */ export interface TaurusNgRxConfig { - /** - * ** StoreDevTools configuration replica. - *

    see {@link https://ngrx.io/guide/store-devtools/config}

    - */ - storeDevToolsConfig?: StoreDevtoolsConfig; + /** + * ** StoreDevTools configuration replica. + *

    see {@link https://ngrx.io/guide/store-devtools/config}

    + */ + storeDevToolsConfig?: StoreDevtoolsConfig; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/effects/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/effects/index.ts index 2fcf8e79a2..b8607a6332 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/effects/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/effects/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/effects/root-effects.registry.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/effects/root-effects.registry.spec.ts index 97b0369487..246708ea4d 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/effects/root-effects.registry.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/effects/root-effects.registry.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -10,8 +8,8 @@ import { RouterEffects } from '../../router/state/effects'; import { SHARED_ROOT_EFFECTS } from './root-effects.registry'; describe('SHARED_ROOT_EFFECTS', () => { - it('should verify expected Effects are in this registry', () => { - // Then - expect(SHARED_ROOT_EFFECTS).toEqual([RouterEffects]); - }); + it('should verify expected Effects are in this registry', () => { + // Then + expect(SHARED_ROOT_EFFECTS).toEqual([RouterEffects]); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/effects/root-effects.registry.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/effects/root-effects.registry.ts index 3c4e25d4db..ef03da762a 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/effects/root-effects.registry.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/effects/root-effects.registry.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -15,6 +13,4 @@ import { RouterEffects } from '../../router/state/effects'; * */ // eslint-disable-next-line @typescript-eslint/no-explicit-any -export const SHARED_ROOT_EFFECTS: Array> = [ - RouterEffects -]; +export const SHARED_ROOT_EFFECTS: Array> = [RouterEffects]; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/helper-modules/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/helper-modules/index.ts index 8f1199e1f4..f7668330c8 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/helper-modules/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/helper-modules/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/helper-modules/taurus-shared-ngrx-dev.module.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/helper-modules/taurus-shared-ngrx-dev.module.ts index f19b4f4670..56fc6aaee2 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/helper-modules/taurus-shared-ngrx-dev.module.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/helper-modules/taurus-shared-ngrx-dev.module.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -28,38 +26,43 @@ import { STORE_ROUTER } from '../state'; * */ @NgModule({ - imports: [ - StoreModule.forRoot(SHARED_ROOT_REDUCERS, NGRX_STORE_CONFIG), - EffectsModule.forRoot(SHARED_ROOT_EFFECTS), - StoreDevtoolsModule.instrument(() => TaurusSharedNgrxDevModule.storeDevToolsConfig), - StoreRouterConnectingModule.forRoot({ - stateKey: STORE_ROUTER, - serializer: SharedRouterSerializer - }) - ], - exports: [ - StoreModule, - EffectsModule, - StoreDevtoolsModule, - StoreRouterConnectingModule - ] + imports: [ + StoreModule.forRoot(SHARED_ROOT_REDUCERS, NGRX_STORE_CONFIG), + EffectsModule.forRoot(SHARED_ROOT_EFFECTS), + StoreDevtoolsModule.instrument( + () => TaurusSharedNgrxDevModule.storeDevToolsConfig + ), + StoreRouterConnectingModule.forRoot({ + stateKey: STORE_ROUTER, + serializer: SharedRouterSerializer + }) + ], + exports: [ + StoreModule, + EffectsModule, + StoreDevtoolsModule, + StoreRouterConnectingModule + ] }) export class TaurusSharedNgrxDevModule { - private static storeDevToolsConfig: StoreDevtoolsConfig = NGRX_STORE_DEVTOOLS_CONFIG; + private static storeDevToolsConfig: StoreDevtoolsConfig = + NGRX_STORE_DEVTOOLS_CONFIG; - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-explicit-any - static forRoot(config: StoreDevtoolsConfig = {} as any): ModuleWithProviders { - TaurusSharedNgrxDevModule.storeDevToolsConfig = { - ...NGRX_STORE_DEVTOOLS_CONFIG, - ...config - }; + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-explicit-any + static forRoot( + config: StoreDevtoolsConfig = {} as any + ): ModuleWithProviders { + TaurusSharedNgrxDevModule.storeDevToolsConfig = { + ...NGRX_STORE_DEVTOOLS_CONFIG, + ...config + }; - return { - ngModule: TaurusSharedNgrxDevModule, - providers: [ - { provide: RouterService, useClass: RouterServiceImpl }, - { provide: ComponentService, useClass: ComponentServiceImpl } - ] - }; - } + return { + ngModule: TaurusSharedNgrxDevModule, + providers: [ + { provide: RouterService, useClass: RouterServiceImpl }, + { provide: ComponentService, useClass: ComponentServiceImpl } + ] + }; + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/helper-modules/taurus-shared-ngrx-prod.module.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/helper-modules/taurus-shared-ngrx-prod.module.ts index 5bf0570272..79e493106e 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/helper-modules/taurus-shared-ngrx-prod.module.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/helper-modules/taurus-shared-ngrx-prod.module.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -27,28 +25,24 @@ import { STORE_ROUTER } from '../state'; * */ @NgModule({ - imports: [ - StoreModule.forRoot(SHARED_ROOT_REDUCERS, NGRX_STORE_CONFIG), - EffectsModule.forRoot(SHARED_ROOT_EFFECTS), - StoreRouterConnectingModule.forRoot({ - stateKey: STORE_ROUTER, - serializer: SharedRouterSerializer - }) - ], - exports: [ - StoreModule, - EffectsModule, - StoreRouterConnectingModule - ] + imports: [ + StoreModule.forRoot(SHARED_ROOT_REDUCERS, NGRX_STORE_CONFIG), + EffectsModule.forRoot(SHARED_ROOT_EFFECTS), + StoreRouterConnectingModule.forRoot({ + stateKey: STORE_ROUTER, + serializer: SharedRouterSerializer + }) + ], + exports: [StoreModule, EffectsModule, StoreRouterConnectingModule] }) export class TaurusSharedNgrxProdModule { - static forRoot(): ModuleWithProviders { - return { - ngModule: TaurusSharedNgrxProdModule, - providers: [ - { provide: RouterService, useClass: RouterServiceImpl }, - { provide: ComponentService, useClass: ComponentServiceImpl } - ] - }; - } + static forRoot(): ModuleWithProviders { + return { + ngModule: TaurusSharedNgrxProdModule, + providers: [ + { provide: RouterService, useClass: RouterServiceImpl }, + { provide: ComponentService, useClass: ComponentServiceImpl } + ] + }; + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/index.ts index 8acf801157..a28160fda3 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/public-api.ts index ba142389bd..484b60ff3c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/reducers/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/reducers/index.ts index 681b00b6bc..dd386b3169 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/reducers/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/reducers/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/reducers/shared-root-reducers.registry.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/reducers/shared-root-reducers.registry.spec.ts index 2cdc95b5b9..730df0842c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/reducers/shared-root-reducers.registry.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/reducers/shared-root-reducers.registry.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -14,11 +12,11 @@ import { STORE_COMPONENTS, STORE_ROUTER } from '../state'; import { SHARED_ROOT_REDUCERS } from './shared-root-reducers.registry'; describe('SHARED_ROOT_REDUCERS', () => { - it('should verify root reducers are registered', () => { - // Then - expect(SHARED_ROOT_REDUCERS).toEqual({ - [STORE_ROUTER]: routerReducer, - [STORE_COMPONENTS]: componentReducer - }); - }); + it('should verify root reducers are registered', () => { + // Then + expect(SHARED_ROOT_REDUCERS).toEqual({ + [STORE_ROUTER]: routerReducer, + [STORE_COMPONENTS]: componentReducer + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/reducers/shared-root-reducers.registry.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/reducers/shared-root-reducers.registry.ts index 4e0291d602..ae62d44944 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/reducers/shared-root-reducers.registry.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/reducers/shared-root-reducers.registry.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -18,6 +16,6 @@ import { componentReducer } from '../../component/state'; * */ export const SHARED_ROOT_REDUCERS: ActionReducerMap = { - [STORE_ROUTER]: routerReducer, - [STORE_COMPONENTS]: componentReducer + [STORE_ROUTER]: routerReducer, + [STORE_COMPONENTS]: componentReducer }; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/state/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/state/index.ts index d83955450f..d82ef631ea 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/state/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/state/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/state/store-state.model.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/state/store-state.model.ts index 1356c3af04..8b89bb4c7e 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/state/store-state.model.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/state/store-state.model.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -24,6 +22,6 @@ export const STORE_COMPONENTS = 'components'; * */ export interface StoreState { - [STORE_ROUTER]: RouterState; - [STORE_COMPONENTS]: LiteralComponentsState; + [STORE_ROUTER]: RouterState; + [STORE_COMPONENTS]: LiteralComponentsState; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/taurus-shared-ngrx.module.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/taurus-shared-ngrx.module.ts index 2362ffd93b..147c219adc 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/taurus-shared-ngrx.module.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/ngrx/taurus-shared-ngrx.module.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -7,13 +5,28 @@ /* eslint-disable @typescript-eslint/unified-signatures */ -import { InjectionToken, ModuleWithProviders, NgModule, Type } from '@angular/core'; +import { + InjectionToken, + ModuleWithProviders, + NgModule, + Type +} from '@angular/core'; -import { Action, ActionReducer, ActionReducerMap, StoreConfig, StoreFeatureModule, StoreModule } from '@ngrx/store'; +import { + Action, + ActionReducer, + ActionReducerMap, + StoreConfig, + StoreFeatureModule, + StoreModule +} from '@ngrx/store'; import { EffectsFeatureModule, EffectsModule } from '@ngrx/effects'; import { TaurusNgRxConfig } from './config'; -import { TaurusSharedNgrxProdModule, TaurusSharedNgrxDevModule } from './helper-modules'; +import { + TaurusSharedNgrxProdModule, + TaurusSharedNgrxDevModule +} from './helper-modules'; /** * ** Integration Class module for NgRx Redux. @@ -22,60 +35,66 @@ import { TaurusSharedNgrxProdModule, TaurusSharedNgrxDevModule } from './helper- */ @NgModule({}) export class TaurusSharedNgRxModule { - /** - * ** Provides TaurusSharedNgrxProdModule and all Services related to Taurus Redux. - * - * - Recommended for Prod (release) builds. - * - Should be invoke at Root and only once for entire project. - * - In FeaturesModules (lazy loaded Modules) invoke one of the methods forFeatureEffects/forFeatureStore. - */ - static forRoot(): ModuleWithProviders { - return TaurusSharedNgrxProdModule.forRoot(); - } - - /** - * ** Provides TaurusSharedNgrxDevModule including StoreDevTools and all Services related to Taurus Redux. - * - * - Recommended for Dev (local) builds. - * - Should be invoke at Root and only once for entire project. - * - In FeaturesModules (lazy loaded Modules) invoke one of the methods forFeatureEffects/forFeatureStore. - */ - static forRootWithDevtools(config: TaurusNgRxConfig = {}): ModuleWithProviders { - return TaurusSharedNgrxDevModule.forRoot(config.storeDevToolsConfig); - } + /** + * ** Provides TaurusSharedNgrxProdModule and all Services related to Taurus Redux. + * + * - Recommended for Prod (release) builds. + * - Should be invoke at Root and only once for entire project. + * - In FeaturesModules (lazy loaded Modules) invoke one of the methods forFeatureEffects/forFeatureStore. + */ + static forRoot(): ModuleWithProviders { + return TaurusSharedNgrxProdModule.forRoot(); + } - /** - * ** Load Features Effects. - * - * - Should be invoke in FeatureModules (lazy loaded Modules). - * - It will register Effects for that Feature. - */ - // eslint-disable-next-line @typescript-eslint/no-explicit-any - static forFeatureEffects(effects: Array>): ModuleWithProviders { - return EffectsModule.forFeature(effects); - } + /** + * ** Provides TaurusSharedNgrxDevModule including StoreDevTools and all Services related to Taurus Redux. + * + * - Recommended for Dev (local) builds. + * - Should be invoke at Root and only once for entire project. + * - In FeaturesModules (lazy loaded Modules) invoke one of the methods forFeatureEffects/forFeatureStore. + */ + static forRootWithDevtools( + config: TaurusNgRxConfig = {} + ): ModuleWithProviders { + return TaurusSharedNgrxDevModule.forRoot(config.storeDevToolsConfig); + } - /** - * ** Load Features Store reducers. - * - * - Should be invoke in FeatureModules (lazy loaded Modules). - * - It will extend Store and add reducers for that Feature. - */ - static forFeatureStore( - featureName: string, - reducers: ActionReducerMap | InjectionToken>, - config?: StoreConfig | InjectionToken>): ModuleWithProviders; - static forFeatureStore( - featureName: string, - reducer: ActionReducer | InjectionToken>, - config?: StoreConfig | InjectionToken>): ModuleWithProviders; - static forFeatureStore( - featureName: string, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - reducer: any, - config?: StoreConfig | InjectionToken>): ModuleWithProviders { + /** + * ** Load Features Effects. + * + * - Should be invoke in FeatureModules (lazy loaded Modules). + * - It will register Effects for that Feature. + */ + // eslint-disable-next-line @typescript-eslint/no-explicit-any + static forFeatureEffects( + effects: Array> + ): ModuleWithProviders { + return EffectsModule.forFeature(effects); + } - // eslint-disable-next-line @typescript-eslint/no-unsafe-argument - return StoreModule.forFeature(featureName, reducer, config); - } + /** + * ** Load Features Store reducers. + * + * - Should be invoke in FeatureModules (lazy loaded Modules). + * - It will extend Store and add reducers for that Feature. + */ + static forFeatureStore( + featureName: string, + reducers: ActionReducerMap | InjectionToken>, + config?: StoreConfig | InjectionToken> + ): ModuleWithProviders; + static forFeatureStore( + featureName: string, + reducer: ActionReducer | InjectionToken>, + config?: StoreConfig | InjectionToken> + ): ModuleWithProviders; + static forFeatureStore( + featureName: string, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + reducer: any, + config?: StoreConfig | InjectionToken> + ): ModuleWithProviders { + // eslint-disable-next-line @typescript-eslint/no-unsafe-argument + return StoreModule.forFeature(featureName, reducer, config); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/public-api.ts index d97123f0dd..dc27640f6d 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/factory/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/factory/index.ts index c03c42df7f..c32edab93c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/factory/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/factory/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/factory/route-state.factory.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/factory/route-state.factory.spec.ts index 523ac14a70..1fe763ce81 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/factory/route-state.factory.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/factory/route-state.factory.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -12,43 +10,48 @@ import { RouteSegments, RouteState } from '../model'; import { RouteStateFactory } from './route-state.factory'; describe('RouteStateFactory', () => { - it('should verify instance is created', () => { - // When - const instance = new RouteStateFactory(); - - // Then - expect(instance).toBeDefined(); - }); - - describe('Methods::', () => { - describe('|create|', () => { - it('should verify will return RouteState from provided ActivatedRouteSnapshot', () => { - // Given - const routeSnapshot = createRouteSnapshot({}); - const factory = new RouteStateFactory(); - const assertion = RouteState.of( - new RouteSegments( - 'entity/23', - { paramKey: 'prime' }, - { entityId: 23 }, - { search: 'test-team' }, - new RouteSegments( - 'domain/context', - {}, - {}, - {}, - undefined, - 'domain/context'), - 'entity/23'), - 'domain/context/entity/23' - ); - - // When - const routeState = factory.create(routeSnapshot, 'domain/context/entity/23'); - - // Then - expect(routeState).toEqual(assertion); - }); - }); - }); + it('should verify instance is created', () => { + // When + const instance = new RouteStateFactory(); + + // Then + expect(instance).toBeDefined(); + }); + + describe('Methods::', () => { + describe('|create|', () => { + it('should verify will return RouteState from provided ActivatedRouteSnapshot', () => { + // Given + const routeSnapshot = createRouteSnapshot({}); + const factory = new RouteStateFactory(); + const assertion = RouteState.of( + new RouteSegments( + 'entity/23', + { paramKey: 'prime' }, + { entityId: 23 }, + { search: 'test-team' }, + new RouteSegments( + 'domain/context', + {}, + {}, + {}, + undefined, + 'domain/context' + ), + 'entity/23' + ), + 'domain/context/entity/23' + ); + + // When + const routeState = factory.create( + routeSnapshot, + 'domain/context/entity/23' + ); + + // Then + expect(routeState).toEqual(assertion); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/factory/route-state.factory.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/factory/route-state.factory.ts index 233ab1866d..12736b65a9 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/factory/route-state.factory.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/factory/route-state.factory.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -17,38 +15,44 @@ import { RouteSegments, RouteState } from '../model'; * */ export class RouteStateFactory { - /** - * ** Creates Router State from provided Route snapshot. - */ - create(routeSnapshot: ActivatedRouteSnapshot, url: string): RouteState { - return RouteState.of( - this._getRouteSegments(routeSnapshot), - url - ); - } - - private _getRouteSegments(routeSnapshot: ActivatedRouteSnapshot): RouteSegments { - if (CollectionsUtil.isNil(routeSnapshot)) { - return null; - } - - const routePathSegments: string[] = []; - routeSnapshot.url.forEach((segment: UrlSegment) => { - routePathSegments.push(segment.path); - }); - - const routePath = routePathSegments.join('/'); - const data = CollectionsUtil.cloneDeep(routeSnapshot.data); - const params = CollectionsUtil.cloneDeep(routeSnapshot.params); - const queryParams = CollectionsUtil.cloneDeep(routeSnapshot.queryParams); - const configPath = routeSnapshot.routeConfig?.path; - - let parentNavSegments: RouteSegments; - - if (routeSnapshot.parent) { - parentNavSegments = this._getRouteSegments(routeSnapshot.parent); - } - - return RouteSegments.of(routePath, data, params, queryParams, parentNavSegments, configPath); - } + /** + * ** Creates Router State from provided Route snapshot. + */ + create(routeSnapshot: ActivatedRouteSnapshot, url: string): RouteState { + return RouteState.of(this._getRouteSegments(routeSnapshot), url); + } + + private _getRouteSegments( + routeSnapshot: ActivatedRouteSnapshot + ): RouteSegments { + if (CollectionsUtil.isNil(routeSnapshot)) { + return null; + } + + const routePathSegments: string[] = []; + routeSnapshot.url.forEach((segment: UrlSegment) => { + routePathSegments.push(segment.path); + }); + + const routePath = routePathSegments.join('/'); + const data = CollectionsUtil.cloneDeep(routeSnapshot.data); + const params = CollectionsUtil.cloneDeep(routeSnapshot.params); + const queryParams = CollectionsUtil.cloneDeep(routeSnapshot.queryParams); + const configPath = routeSnapshot.routeConfig?.path; + + let parentNavSegments: RouteSegments; + + if (routeSnapshot.parent) { + parentNavSegments = this._getRouteSegments(routeSnapshot.parent); + } + + return RouteSegments.of( + routePath, + data, + params, + queryParams, + parentNavSegments, + configPath + ); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/index.ts index 6ad912db02..b046b79f68 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/integration/ngrx/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/integration/ngrx/index.ts index 497a8d8bcf..edba626ed9 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/integration/ngrx/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/integration/ngrx/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/integration/ngrx/router-serializer.service.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/integration/ngrx/router-serializer.service.spec.ts index 00d6ff1b24..be3e86f981 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/integration/ngrx/router-serializer.service.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/integration/ngrx/router-serializer.service.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -8,7 +6,11 @@ import { UrlSegment } from '@angular/router'; import { TestBed } from '@angular/core/testing'; -import { ComponentStub, createRouteSnapshot, RouteConfigStub } from '../../../../unit-testing'; +import { + ComponentStub, + createRouteSnapshot, + RouteConfigStub +} from '../../../../unit-testing'; import { RouteSegments, RouteState } from '../../model'; import { RouteStateFactory } from '../../factory'; @@ -16,92 +18,115 @@ import { RouteStateFactory } from '../../factory'; import { SharedRouterSerializer } from './router-serializer.service'; describe('SharedRouterSerializer', () => { - let service: SharedRouterSerializer; + let service: SharedRouterSerializer; - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [ - SharedRouterSerializer - ] - }); + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [SharedRouterSerializer] + }); - service = TestBed.inject(SharedRouterSerializer); - }); + service = TestBed.inject(SharedRouterSerializer); + }); - it('should verify instance is created', () => { - // Then - expect(service).toBeDefined(); - }); + it('should verify instance is created', () => { + // Then + expect(service).toBeDefined(); + }); - describe('Methods::', () => { - describe('|serialize|', () => { - it('should verify will invoke correct methods', () => { - // Given - const routeState = RouteState.of( - RouteSegments.of( - 'delivery', - { paramKey: 'prime' }, - { entityId: 25 }, - { search: 'test-team' }, - RouteSegments.of( - 'entity/25', - { deferredLoading: true }, - { entityId: 25 }, - { search: 'test-team' }, - RouteSegments.of( - 'domain/context', - { entityKey: 'second' }, - {}, - { search: 'test-team' }, - null - ) - ) - ), - 'domain/context/entity/25/delivery' - ); - const factoryCreateSpy = spyOn(RouteStateFactory.prototype, 'create').and.returnValue(routeState); + describe('Methods::', () => { + describe('|serialize|', () => { + it('should verify will invoke correct methods', () => { + // Given + const routeState = RouteState.of( + RouteSegments.of( + 'delivery', + { paramKey: 'prime' }, + { entityId: 25 }, + { search: 'test-team' }, + RouteSegments.of( + 'entity/25', + { deferredLoading: true }, + { entityId: 25 }, + { search: 'test-team' }, + RouteSegments.of( + 'domain/context', + { entityKey: 'second' }, + {}, + { search: 'test-team' }, + null + ) + ) + ), + 'domain/context/entity/25/delivery' + ); + const factoryCreateSpy = spyOn( + RouteStateFactory.prototype, + 'create' + ).and.returnValue(routeState); - const routeSnapshotChild2 = createRouteSnapshot({ - url: [new UrlSegment('domain/context', {}), new UrlSegment('entity/25', {}), new UrlSegment('delivery', {})], - data: { entityKey: 'second' }, - params: { entityId: 25 }, - queryParams: { search: 'team-test' }, - outlet: 'router-outlet', - component: ComponentStub, - routeConfig: new RouteConfigStub('delivery', ComponentStub, 'router-outlet') - }); - const routeSnapshotChild1 = createRouteSnapshot({ - url: [new UrlSegment('domain/context', {}), new UrlSegment('entity/25', {})], - data: { deferredLoading: true }, - params: { entityId: 25 }, - queryParams: { search: 'team-test' }, - outlet: 'router-outlet', - component: ComponentStub, - routeConfig: new RouteConfigStub('entity/25', ComponentStub, 'router-outlet'), - firstChild: routeSnapshotChild2 - }); - const rootRouteSnapshot = createRouteSnapshot({ - url: [new UrlSegment('domain/context', {})], - data: { paramKey: 'prime' }, - params: {}, - queryParams: { search: 'team-test' }, - outlet: 'router-outlet', - component: ComponentStub, - routeConfig: new RouteConfigStub('domain/context', ComponentStub, 'router-outlet'), - firstChild: routeSnapshotChild1 - }); + const routeSnapshotChild2 = createRouteSnapshot({ + url: [ + new UrlSegment('domain/context', {}), + new UrlSegment('entity/25', {}), + new UrlSegment('delivery', {}) + ], + data: { entityKey: 'second' }, + params: { entityId: 25 }, + queryParams: { search: 'team-test' }, + outlet: 'router-outlet', + component: ComponentStub, + routeConfig: new RouteConfigStub( + 'delivery', + ComponentStub, + 'router-outlet' + ) + }); + const routeSnapshotChild1 = createRouteSnapshot({ + url: [ + new UrlSegment('domain/context', {}), + new UrlSegment('entity/25', {}) + ], + data: { deferredLoading: true }, + params: { entityId: 25 }, + queryParams: { search: 'team-test' }, + outlet: 'router-outlet', + component: ComponentStub, + routeConfig: new RouteConfigStub( + 'entity/25', + ComponentStub, + 'router-outlet' + ), + firstChild: routeSnapshotChild2 + }); + const rootRouteSnapshot = createRouteSnapshot({ + url: [new UrlSegment('domain/context', {})], + data: { paramKey: 'prime' }, + params: {}, + queryParams: { search: 'team-test' }, + outlet: 'router-outlet', + component: ComponentStub, + routeConfig: new RouteConfigStub( + 'domain/context', + ComponentStub, + 'router-outlet' + ), + firstChild: routeSnapshotChild1 + }); - // When - const result = service.serialize({ - url: 'domain/context/entity/25/delivery', - root: rootRouteSnapshot, - toString: () => '' - }); + // When + const result = service.serialize({ + url: 'domain/context/entity/25/delivery', + root: rootRouteSnapshot, + toString: () => '' + }); - // Then - expect(factoryCreateSpy).toHaveBeenCalledWith(routeSnapshotChild2, 'domain/context/entity/25/delivery'); - expect(result).toBe(routeState); - }); - }); - }); + // Then + expect(factoryCreateSpy).toHaveBeenCalledWith( + routeSnapshotChild2, + 'domain/context/entity/25/delivery' + ); + expect(result).toBe(routeState); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/integration/ngrx/router-serializer.service.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/integration/ngrx/router-serializer.service.ts index 5006876b44..0fa1aa8547 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/integration/ngrx/router-serializer.service.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/integration/ngrx/router-serializer.service.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -19,26 +17,28 @@ import { RouteStateFactory } from '../../factory'; * */ @Injectable() -export class SharedRouterSerializer implements RouterStateSerializer { - private readonly _routeStateFactory: RouteStateFactory; - - /** - * ** Constructor. - */ - constructor() { - this._routeStateFactory = new RouteStateFactory(); - } - - /** - * @inheritDoc - */ - serialize(routerState: RouterStateSnapshot): RouteState { - let routeSnapshot = routerState.root; - - while (routeSnapshot.firstChild) { - routeSnapshot = routeSnapshot.firstChild; - } - - return this._routeStateFactory.create(routeSnapshot, routerState.url); - } +export class SharedRouterSerializer + implements RouterStateSerializer +{ + private readonly _routeStateFactory: RouteStateFactory; + + /** + * ** Constructor. + */ + constructor() { + this._routeStateFactory = new RouteStateFactory(); + } + + /** + * @inheritDoc + */ + serialize(routerState: RouterStateSnapshot): RouteState { + let routeSnapshot = routerState.root; + + while (routeSnapshot.firstChild) { + routeSnapshot = routeSnapshot.firstChild; + } + + return this._routeStateFactory.create(routeSnapshot, routerState.url); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/model/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/model/index.ts index db0bb6637c..0a1df8829d 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/model/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/model/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/model/route.model.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/model/route.model.spec.ts index ac74027172..2b87cf6e1a 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/model/route.model.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/model/route.model.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -8,785 +6,776 @@ import { RouterState, RouteSegments, RouteState } from './route.model'; describe('Route Classes', () => { - describe('RouteSegments', () => { - it('should verify instance is created', () => { - // When - const instance = new RouteSegments( - 'domain/context', - {}, - {}, - {}, - null, - null); - - // Then - expect(instance).toBeDefined(); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const instance = RouteSegments.of('domain/context', - {}, - {}, - null, - null); - - // Then - expect(instance).toBeInstanceOf(RouteSegments); - }); - }); - - describe('|empty|', () => { - it('should verify will create empty instance with default values', () => { - // When - const instance = RouteSegments.empty(); - - // Then - expect(instance).toBeInstanceOf(RouteSegments); - expect(instance.params).toEqual({}); - expect(instance.queryParams).toEqual({}); - expect(instance.routePath).toEqual(''); - }); - }); - }); - }); - - describe('Methods::', () => { - describe('|getData|', () => { - it('should verify will return param', () => { - // Given - const routeSegments = RouteSegments.of( - 'bill/105/view', - { paramKey: 'prime' }, - { billId: '105' }, - {}, - RouteSegments.of( - 'entity/17/explore', - { deferredLoad: true }, - { entityId: '17' }, - null, - RouteSegments.of( - 'domain/context', - null, - null, - null, - null, - 'domain/context' - ), - 'entity/:entityId/explore' - ), - 'bill/:billId/view' - ); - - // When - const param1 = routeSegments.getData('randomParam'); - const param2 = routeSegments.getData('paramKey'); - const param3 = routeSegments.getData('deferredLoad'); - - // Then - expect(param1).toBeUndefined(); - expect(param2).toEqual('prime'); - expect(param3).toEqual(true); - }); - }); - - describe('|getParam|', () => { - it('should verify will return param', () => { - // Given - const routeSegments = RouteSegments.of( - 'bill/105', - {}, - { billId: '105' }, - {}, - RouteSegments.of( - 'entity/17', - {}, - { entityId: '17' }, - {}, - null, - 'entity/:entityId' - ), - 'bill/:billId' - ); - - // When - const param1 = routeSegments.getParam('randomParam'); - const param2 = routeSegments.getParam('billId'); - const param3 = routeSegments.getParam('entityId'); - - // Then - expect(param1).toBeUndefined(); - expect(param2).toEqual('105'); - expect(param3).toEqual('17'); - }); - }); - - describe('|getQueryParam|', () => { - it('should verify will return queryParam', () => { - // Given - const routeSegments = RouteSegments.of( - 'bill/105', - {}, - { billId: '105' }, - { search: 'test-team', activeUser: 'aUser' }, - RouteSegments.of( - 'entity/17', - {}, - { entityId: '17' }, - { search: 'test-team', activeUser: 'aUser' }, - RouteSegments.of( - 'domain/context', - {}, - {}, - { search: 'test-team', activeUser: 'aUser' }, - null, - 'domain/context' - ), - 'entity/:entityId' - ), - 'bill/:billId' - ); - - // When - const queryParam1 = routeSegments.getQueryParam('entityId'); - const queryParam2 = routeSegments.getQueryParam('search'); - const queryParam3 = routeSegments.getQueryParam('activeUser'); - - // Then - expect(queryParam1).toBeUndefined(); - expect(queryParam2).toEqual('test-team'); - expect(queryParam3).toEqual('aUser'); - }); - }); - }); - - describe('Getters/Setters::', () => { - describe('|GET -> routePathSegments|', () => { - it('should verify will return routePathSegments', () => { - // Given - const routeSegments = RouteSegments.of( - 'bill/105/view', - {}, - null, - null, - RouteSegments.of( - 'entity/17/explore', - {}, - null, - null, - RouteSegments.of( - 'domain/context', - null, - null, - null, - null, - 'domain/context' - ), - 'entity/:entityId/explore' - ), - 'bill/:billId/view' - ); - - // When - const routePathSegments = routeSegments.routePathSegments; - - // Then - expect(routePathSegments).toEqual(['domain/context', 'entity/17/explore', 'bill/105/view']); - }); - }); - - describe('|GET -> configPathSegments|', () => { - it('should verify will return configPathSegments', () => { - // Given - const routeSegments = RouteSegments.of( - 'bill/105/view', - {}, - null, - null, - RouteSegments.of( - 'entity/17/explore', - {}, - null, - null, - RouteSegments.of( - 'domain/context', - null, - null, - null, - null, - 'domain/context' - ), - 'entity/:entityId/explore' - ), - 'bill/:billId/view' - ); - - // When - const configPathSegments = routeSegments.configPathSegments; - - // Then - expect(configPathSegments).toEqual(['domain/context', 'entity/:entityId/explore', 'bill/:billId/view']); - }); - }); - }); - }); - - describe('RouteState', () => { - let routeState: RouteState; - let routeSegments: RouteSegments; - - beforeEach(() => { - routeSegments = RouteSegments.of( - 'bill/105/view', - {}, - null, - { 'test_search*': '^test-team$', 'test_@active-user': '%aUser%' }, - RouteSegments.of( - 'entity/17/explore', - {}, - null, - null, - RouteSegments.of( - 'domain/context', - {}, - null, - null, - null, - 'domain/context' - ), - 'entity/:entityId/explore' - ), - 'bill/:billId/view' - ); - - routeState = RouteState.of( - routeSegments, - 'domain/context/entity/17/explore/bill/105/view' - ); - }); - - it('should verify instance is created', () => { - // When - const instance = new RouteState( - new RouteSegments( - 'domain/context', - {}, - {}, - null, - null), - 'domain/context' - ); - - // Then - expect(instance).toBeDefined(); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const instance = RouteState.of( - new RouteSegments( - 'domain/context', - {}, - {}, - null, - null), - 'domain/context' - ); - - // Then - expect(instance).toBeInstanceOf(RouteState); - }); - }); - - describe('|empty|', () => { - it('should verify will create empty instance with default values', () => { - // When - const instance = RouteState.empty(); - - // Then - expect(instance).toBeInstanceOf(RouteState); - expect(instance.routeSegments).toEqual(RouteSegments.empty()); - expect(instance.url).toEqual(''); - }); - }); - }); - }); - - describe('Getters/Setters::', () => { - describe('|GET -> absoluteRoutePath|', () => { - it('should verify will return location', () => { - // When - const location = routeState.absoluteRoutePath; - - // Then - expect(location).toEqual('/domain/context/entity/17/explore/bill/105/view'); - }); - }); - - describe('|GET -> routePath|', () => { - it('should verify will return routePath', () => { - // When - const routePath = routeState.routePath; - - // Then - expect(routePath).toEqual('bill/105/view'); - }); - }); - - describe('|GET -> routePathSegments|', () => { - it('should verify will return routePathSegments', () => { - // When - const routePathSegments = routeState.routePathSegments; - - // Then - expect(routePathSegments).toEqual(['domain/context', 'entity/17/explore', 'bill/105/view']); - }); - }); - - describe('|GET -> configPath|', () => { - it('should verify will return configPath', () => { - // When - const configPath = routeState.configPath; - - // Then - expect(configPath).toEqual('bill/:billId/view'); - }); - }); - - describe('|GET -> absoluteConfigPath|', () => { - it('should verify will return absoluteConfigPath', () => { - // When - const absoluteConfigPath = routeState.absoluteConfigPath; - - // Then - expect(absoluteConfigPath).toEqual('/domain/context/entity/:entityId/explore/bill/:billId/view'); - }); - }); - - describe('|GET -> configPathSegments|', () => { - it('should verify will return configPathSegments', () => { - // When - const configPathSegments = routeState.configPathSegments; - - // Then - expect(configPathSegments).toEqual(['domain/context', 'entity/:entityId/explore', 'bill/:billId/view']); - }); - }); - - describe('|GET -> queryParams|', () => { - it('should verify will return queryParams', () => { - // When - const queryParams = routeState.queryParams; - - // Then - expect(queryParams).toBe(routeState.routeSegments.queryParams); - }); - }); - }); - - describe('Methods::', () => { - describe('|serializeQueryParams|', () => { - it('should verify will serialize queryParams in string', () => { - // When - const query = routeState.serializeQueryParams(); - - // Then - expect(query).toEqual('test_search*=%5Etest-team%24&test_%40active-user=%25aUser%25'); - }); - - it('should verify will return empty string when no queryParams', () => { - // Given - routeState = RouteState.of( - RouteSegments.of( - routeState.routeSegments.routePath, - routeState.routeSegments.data, - routeState.routeSegments.params, - {}, - routeState.routeSegments.parent, - routeState.routeSegments.configPath - ), - routeState.url - ); - - // When - const query = routeState.serializeQueryParams(); - - // Then - expect(query).toEqual(''); - }); - }); - - describe('|getUrl|', () => { - it('should verify will return correct value', () => { - // When - const url = routeState.getUrl(); - - // Then - expect(url).toEqual( - '/domain/context/entity/17/explore/bill/105/view?test_search*=%5Etest-team%24&test_%40active-user=%25aUser%25' - ); - }); - }); - - describe('|getData|', () => { - it('should verify will invoke correct methods', () => { - // Given - const getDataSpy = spyOn(RouteSegments.prototype, 'getData').and.returnValue('loading'); - - // When - const data = routeState.getData('primeKey'); - - // Then - expect(getDataSpy).toHaveBeenCalledWith('primeKey'); - expect(data).toEqual('loading'); - }); - }); - - describe('|getParam|', () => { - it('should verify will invoke correct methods', () => { - // Given - const getParamSpy = spyOn(RouteSegments.prototype, 'getParam').and.returnValue('test-value'); - - // When - const param = routeState.getParam('random-key'); - - // Then - expect(getParamSpy).toHaveBeenCalledWith('random-key'); - expect(param).toEqual('test-value'); - }); - }); - - describe('|getQueryParam|', () => { - it('should verify will invoke correct methods', () => { - // Given - const getQueryParamSpy = spyOn(RouteSegments.prototype, 'getQueryParam').and.returnValue('test-value'); - - // When - const queryParam = routeState.getQueryParam('random-key'); - - // Then - expect(getQueryParamSpy).toHaveBeenCalledWith('random-key'); - expect(queryParam).toEqual('test-value'); - }); - }); - - describe('|getParentAbsoluteRoutePath|', () => { - it('should verify will return correct value', () => { - // When - const parentAbsoluteRoutePath = routeState.getParentAbsoluteRoutePath(); - - // Then - expect(parentAbsoluteRoutePath).toEqual('/domain/context/entity/17/explore'); - }); - }); - - describe('|toJSON|', () => { - it('should verify will return correct object for serialization', () => { - // When - const objForSerialize = routeState.toJSON(); - - // Then - expect(objForSerialize).toEqual({ - routeSegments, - url: 'domain/context/entity/17/explore/bill/105/view', - routePath: 'bill/105/view', - absoluteRoutePath: '/domain/context/entity/17/explore/bill/105/view', - routePathSegments: ['domain/context', 'entity/17/explore', 'bill/105/view'], - configPath: 'bill/:billId/view', - absoluteConfigPath: '/domain/context/entity/:entityId/explore/bill/:billId/view', - configPathSegments: ['domain/context', 'entity/:entityId/explore', 'bill/:billId/view'], - queryParams: { 'test_search*': '^test-team$', 'test_@active-user': '%aUser%' } - }); - }); - }); - }); - }); - - describe('RouterState', () => { - let routeSegments: RouteSegments; - let routeState: RouteState; - let routerState: RouterState; - let previousRouterState: RouterState; - - beforeEach(() => { - routeSegments = RouteSegments.of( - 'bill/105/view', - {}, - null, - { 'test_search*': '^test-team$', 'test_@active-user': '%aUser%' }, - RouteSegments.of( - 'entity/17/explore', - {}, - null, - null, - RouteSegments.of( - 'domain/context', - {}, - null, - null, - null, - 'domain/context' - ), - 'entity/:entityId/explore' - ), - 'bill/:billId/view' - ); - - routeState = RouteState.of( - routeSegments, - 'domain/context/entity/17/explore/bill/105/view' - ); - - routerState = RouterState.of( - routeState, - 15 - ); - - previousRouterState = RouterState.of( - RouteState.empty(), - 14 - ); - previousRouterState.previousStates.push( - RouterState.of( - RouteState.empty(), - 13 - ), - RouterState.of( - RouteState.empty(), - 12 - ), - RouterState.of( - RouteState.empty(), - 11 - ) - ); - }); - - it('should verify instance is created', () => { - // When - const instance = new RouterState( - new RouteState( - new RouteSegments( - 'domain/context', - {}, - {}, - null, - null), - 'domain/context' - ), - 8 - ); - - // Then - expect(instance).toBeDefined(); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const instance = RouterState.of( - new RouteState( - new RouteSegments( - 'domain/context', - {}, - {}, - null, - null), - 'domain/context' - ), - 11 - ); - - // Then - expect(instance).toBeInstanceOf(RouterState); - }); - }); - - describe('|empty|', () => { - it('should verify will create empty instance with default values', () => { - // When - const instance = RouterState.empty(); - - // Then - expect(instance).toBeInstanceOf(RouterState); - expect(instance.state).toEqual(RouteState.empty()); - expect(instance.navigationId).toEqual(null); - expect(instance.previousStates).toEqual([]); - }); - }); - }); - }); - - describe('Methods::', () => { - describe('|getPrevious|', () => { - beforeEach(() => { - routerState.previousStates.push( - ...previousRouterState.previousStates - ); - previousRouterState.previousStates.length = 0; - routerState.previousStates.unshift(previousRouterState); - }); - - it('should verify will return the first before current as default', () => { - // When - const previous = routerState.getPrevious(); - - // Then - expect(previous).toBe(previousRouterState); - }); - - it('should verify will return the first before current for index 0', () => { - // When - const previous = routerState.getPrevious(0); - - // Then - expect(previous).toBe(previousRouterState); - }); - - it('should verify will return the third before current for index 2', () => { - // When - const previous = routerState.getPrevious(2); - - // Then - expect(previous).toBe(routerState.previousStates[2]); - }); - - it('should verify will return null for number less than 0', () => { - // When - const previous = routerState.getPrevious(-1); - - // Then - expect(previous).toBe(null); - }); - - it('should verify will return the first before current for index not a number', () => { - // When - const previous = routerState.getPrevious(null); - - // Then - expect(previous).toBe(previousRouterState); - }); - - it('should verify will return null for index that is out of bound of stored States', () => { - // When - const previous = routerState.getPrevious(4); - - // Then - expect(previous).toBe(null); - }); - }); - - describe('|appendPrevious|', () => { - it('should verify will add previousStates to current one', () => { - // Given - const firstElement = RouterState.of(RouteState.empty(), 14); - const forthElement = RouterState.of(RouteState.empty(), 11); - - // When - routerState.appendPrevious(previousRouterState); - - // Then - expect(routerState.previousStates.length).toEqual(4); - expect(routerState.previousStates[0]).toEqual(firstElement); - expect(routerState.previousStates[3]).toEqual(forthElement); - }); - - it('should verify will pop the oldest one and will unshift the new one when buffer has 10 elements', () => { - // Given - previousRouterState.previousStates.push( - RouterState.of( - RouteState.empty(), - 10 - ), - RouterState.of( - RouteState.empty(), - 9 - ), - RouterState.of( - RouteState.empty(), - 8 - ), - RouterState.of( - RouteState.empty(), - 7 - ), - RouterState.of( - RouteState.empty(), - 6 - ), - RouterState.of( - RouteState.empty(), - 5 - ), - RouterState.of( - RouteState.empty(), - 4 - ) - ); - - // Then 1 - expect(routerState.previousStates.length).toEqual(0); - expect(routerState.previousStates[0]).toBeUndefined(); - expect(previousRouterState.navigationId).toEqual(14); - expect(previousRouterState.previousStates[0]).toEqual( - RouterState.of(RouteState.empty(), 13) - ); - expect(previousRouterState.previousStates[9]).toEqual( - RouterState.of(RouteState.empty(), 4) - ); - - // When - routerState.appendPrevious(previousRouterState); - - // Then 2 - expect(routerState.previousStates.length).toEqual(10); - expect(routerState.previousStates[0]).toEqual( - RouterState.of(RouteState.empty(), 14) - ); - expect(routerState.previousStates[9]).toEqual( - RouterState.of(RouteState.empty(), 5) - ); - }); - - it(`should verify won't add new state when previousState has same navigationId like current`, () => { - // Given - routerState = RouterState.of( - RouteState.empty(), - 14 - ); - - // Then 1 - expect(routerState.previousStates.length).toEqual(0); - expect(previousRouterState.previousStates.length).toEqual(3); - expect(previousRouterState.previousStates[0]).toEqual( - RouterState.of(RouteState.empty(), 13) - ); - expect(previousRouterState.previousStates[2]).toEqual( - RouterState.of(RouteState.empty(), 11) - ); - - // When - routerState.appendPrevious(previousRouterState); - - // Then 2 - expect(routerState.previousStates.length).toEqual(3); - expect(routerState.navigationId).toEqual(14); - expect(routerState.previousStates[0]).toEqual( - RouterState.of(RouteState.empty(), 13) - ); - expect(routerState.previousStates[2]).toEqual( - RouterState.of(RouteState.empty(), 11) - ); - }); - }); - }); - }); + describe('RouteSegments', () => { + it('should verify instance is created', () => { + // When + const instance = new RouteSegments( + 'domain/context', + {}, + {}, + {}, + null, + null + ); + + // Then + expect(instance).toBeDefined(); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const instance = RouteSegments.of( + 'domain/context', + {}, + {}, + null, + null + ); + + // Then + expect(instance).toBeInstanceOf(RouteSegments); + }); + }); + + describe('|empty|', () => { + it('should verify will create empty instance with default values', () => { + // When + const instance = RouteSegments.empty(); + + // Then + expect(instance).toBeInstanceOf(RouteSegments); + expect(instance.params).toEqual({}); + expect(instance.queryParams).toEqual({}); + expect(instance.routePath).toEqual(''); + }); + }); + }); + }); + + describe('Methods::', () => { + describe('|getData|', () => { + it('should verify will return param', () => { + // Given + const routeSegments = RouteSegments.of( + 'bill/105/view', + { paramKey: 'prime' }, + { billId: '105' }, + {}, + RouteSegments.of( + 'entity/17/explore', + { deferredLoad: true }, + { entityId: '17' }, + null, + RouteSegments.of( + 'domain/context', + null, + null, + null, + null, + 'domain/context' + ), + 'entity/:entityId/explore' + ), + 'bill/:billId/view' + ); + + // When + const param1 = routeSegments.getData('randomParam'); + const param2 = routeSegments.getData('paramKey'); + const param3 = routeSegments.getData('deferredLoad'); + + // Then + expect(param1).toBeUndefined(); + expect(param2).toEqual('prime'); + expect(param3).toEqual(true); + }); + }); + + describe('|getParam|', () => { + it('should verify will return param', () => { + // Given + const routeSegments = RouteSegments.of( + 'bill/105', + {}, + { billId: '105' }, + {}, + RouteSegments.of( + 'entity/17', + {}, + { entityId: '17' }, + {}, + null, + 'entity/:entityId' + ), + 'bill/:billId' + ); + + // When + const param1 = routeSegments.getParam('randomParam'); + const param2 = routeSegments.getParam('billId'); + const param3 = routeSegments.getParam('entityId'); + + // Then + expect(param1).toBeUndefined(); + expect(param2).toEqual('105'); + expect(param3).toEqual('17'); + }); + }); + + describe('|getQueryParam|', () => { + it('should verify will return queryParam', () => { + // Given + const routeSegments = RouteSegments.of( + 'bill/105', + {}, + { billId: '105' }, + { search: 'test-team', activeUser: 'aUser' }, + RouteSegments.of( + 'entity/17', + {}, + { entityId: '17' }, + { search: 'test-team', activeUser: 'aUser' }, + RouteSegments.of( + 'domain/context', + {}, + {}, + { search: 'test-team', activeUser: 'aUser' }, + null, + 'domain/context' + ), + 'entity/:entityId' + ), + 'bill/:billId' + ); + + // When + const queryParam1 = routeSegments.getQueryParam('entityId'); + const queryParam2 = routeSegments.getQueryParam('search'); + const queryParam3 = routeSegments.getQueryParam('activeUser'); + + // Then + expect(queryParam1).toBeUndefined(); + expect(queryParam2).toEqual('test-team'); + expect(queryParam3).toEqual('aUser'); + }); + }); + }); + + describe('Getters/Setters::', () => { + describe('|GET -> routePathSegments|', () => { + it('should verify will return routePathSegments', () => { + // Given + const routeSegments = RouteSegments.of( + 'bill/105/view', + {}, + null, + null, + RouteSegments.of( + 'entity/17/explore', + {}, + null, + null, + RouteSegments.of( + 'domain/context', + null, + null, + null, + null, + 'domain/context' + ), + 'entity/:entityId/explore' + ), + 'bill/:billId/view' + ); + + // When + const routePathSegments = routeSegments.routePathSegments; + + // Then + expect(routePathSegments).toEqual([ + 'domain/context', + 'entity/17/explore', + 'bill/105/view' + ]); + }); + }); + + describe('|GET -> configPathSegments|', () => { + it('should verify will return configPathSegments', () => { + // Given + const routeSegments = RouteSegments.of( + 'bill/105/view', + {}, + null, + null, + RouteSegments.of( + 'entity/17/explore', + {}, + null, + null, + RouteSegments.of( + 'domain/context', + null, + null, + null, + null, + 'domain/context' + ), + 'entity/:entityId/explore' + ), + 'bill/:billId/view' + ); + + // When + const configPathSegments = routeSegments.configPathSegments; + + // Then + expect(configPathSegments).toEqual([ + 'domain/context', + 'entity/:entityId/explore', + 'bill/:billId/view' + ]); + }); + }); + }); + }); + + describe('RouteState', () => { + let routeState: RouteState; + let routeSegments: RouteSegments; + + beforeEach(() => { + routeSegments = RouteSegments.of( + 'bill/105/view', + {}, + null, + { 'test_search*': '^test-team$', 'test_@active-user': '%aUser%' }, + RouteSegments.of( + 'entity/17/explore', + {}, + null, + null, + RouteSegments.of( + 'domain/context', + {}, + null, + null, + null, + 'domain/context' + ), + 'entity/:entityId/explore' + ), + 'bill/:billId/view' + ); + + routeState = RouteState.of( + routeSegments, + 'domain/context/entity/17/explore/bill/105/view' + ); + }); + + it('should verify instance is created', () => { + // When + const instance = new RouteState( + new RouteSegments('domain/context', {}, {}, null, null), + 'domain/context' + ); + + // Then + expect(instance).toBeDefined(); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const instance = RouteState.of( + new RouteSegments('domain/context', {}, {}, null, null), + 'domain/context' + ); + + // Then + expect(instance).toBeInstanceOf(RouteState); + }); + }); + + describe('|empty|', () => { + it('should verify will create empty instance with default values', () => { + // When + const instance = RouteState.empty(); + + // Then + expect(instance).toBeInstanceOf(RouteState); + expect(instance.routeSegments).toEqual(RouteSegments.empty()); + expect(instance.url).toEqual(''); + }); + }); + }); + }); + + describe('Getters/Setters::', () => { + describe('|GET -> absoluteRoutePath|', () => { + it('should verify will return location', () => { + // When + const location = routeState.absoluteRoutePath; + + // Then + expect(location).toEqual( + '/domain/context/entity/17/explore/bill/105/view' + ); + }); + }); + + describe('|GET -> routePath|', () => { + it('should verify will return routePath', () => { + // When + const routePath = routeState.routePath; + + // Then + expect(routePath).toEqual('bill/105/view'); + }); + }); + + describe('|GET -> routePathSegments|', () => { + it('should verify will return routePathSegments', () => { + // When + const routePathSegments = routeState.routePathSegments; + + // Then + expect(routePathSegments).toEqual([ + 'domain/context', + 'entity/17/explore', + 'bill/105/view' + ]); + }); + }); + + describe('|GET -> configPath|', () => { + it('should verify will return configPath', () => { + // When + const configPath = routeState.configPath; + + // Then + expect(configPath).toEqual('bill/:billId/view'); + }); + }); + + describe('|GET -> absoluteConfigPath|', () => { + it('should verify will return absoluteConfigPath', () => { + // When + const absoluteConfigPath = routeState.absoluteConfigPath; + + // Then + expect(absoluteConfigPath).toEqual( + '/domain/context/entity/:entityId/explore/bill/:billId/view' + ); + }); + }); + + describe('|GET -> configPathSegments|', () => { + it('should verify will return configPathSegments', () => { + // When + const configPathSegments = routeState.configPathSegments; + + // Then + expect(configPathSegments).toEqual([ + 'domain/context', + 'entity/:entityId/explore', + 'bill/:billId/view' + ]); + }); + }); + + describe('|GET -> queryParams|', () => { + it('should verify will return queryParams', () => { + // When + const queryParams = routeState.queryParams; + + // Then + expect(queryParams).toBe(routeState.routeSegments.queryParams); + }); + }); + }); + + describe('Methods::', () => { + describe('|serializeQueryParams|', () => { + it('should verify will serialize queryParams in string', () => { + // When + const query = routeState.serializeQueryParams(); + + // Then + expect(query).toEqual( + 'test_search*=%5Etest-team%24&test_%40active-user=%25aUser%25' + ); + }); + + it('should verify will return empty string when no queryParams', () => { + // Given + routeState = RouteState.of( + RouteSegments.of( + routeState.routeSegments.routePath, + routeState.routeSegments.data, + routeState.routeSegments.params, + {}, + routeState.routeSegments.parent, + routeState.routeSegments.configPath + ), + routeState.url + ); + + // When + const query = routeState.serializeQueryParams(); + + // Then + expect(query).toEqual(''); + }); + }); + + describe('|getUrl|', () => { + it('should verify will return correct value', () => { + // When + const url = routeState.getUrl(); + + // Then + expect(url).toEqual( + '/domain/context/entity/17/explore/bill/105/view?test_search*=%5Etest-team%24&test_%40active-user=%25aUser%25' + ); + }); + }); + + describe('|getData|', () => { + it('should verify will invoke correct methods', () => { + // Given + const getDataSpy = spyOn( + RouteSegments.prototype, + 'getData' + ).and.returnValue('loading'); + + // When + const data = routeState.getData('primeKey'); + + // Then + expect(getDataSpy).toHaveBeenCalledWith('primeKey'); + expect(data).toEqual('loading'); + }); + }); + + describe('|getParam|', () => { + it('should verify will invoke correct methods', () => { + // Given + const getParamSpy = spyOn( + RouteSegments.prototype, + 'getParam' + ).and.returnValue('test-value'); + + // When + const param = routeState.getParam('random-key'); + + // Then + expect(getParamSpy).toHaveBeenCalledWith('random-key'); + expect(param).toEqual('test-value'); + }); + }); + + describe('|getQueryParam|', () => { + it('should verify will invoke correct methods', () => { + // Given + const getQueryParamSpy = spyOn( + RouteSegments.prototype, + 'getQueryParam' + ).and.returnValue('test-value'); + + // When + const queryParam = routeState.getQueryParam('random-key'); + + // Then + expect(getQueryParamSpy).toHaveBeenCalledWith('random-key'); + expect(queryParam).toEqual('test-value'); + }); + }); + + describe('|getParentAbsoluteRoutePath|', () => { + it('should verify will return correct value', () => { + // When + const parentAbsoluteRoutePath = + routeState.getParentAbsoluteRoutePath(); + + // Then + expect(parentAbsoluteRoutePath).toEqual( + '/domain/context/entity/17/explore' + ); + }); + }); + + describe('|toJSON|', () => { + it('should verify will return correct object for serialization', () => { + // When + const objForSerialize = routeState.toJSON(); + + // Then + expect(objForSerialize).toEqual({ + routeSegments, + url: 'domain/context/entity/17/explore/bill/105/view', + routePath: 'bill/105/view', + absoluteRoutePath: + '/domain/context/entity/17/explore/bill/105/view', + routePathSegments: [ + 'domain/context', + 'entity/17/explore', + 'bill/105/view' + ], + configPath: 'bill/:billId/view', + absoluteConfigPath: + '/domain/context/entity/:entityId/explore/bill/:billId/view', + configPathSegments: [ + 'domain/context', + 'entity/:entityId/explore', + 'bill/:billId/view' + ], + queryParams: { + 'test_search*': '^test-team$', + 'test_@active-user': '%aUser%' + } + }); + }); + }); + }); + }); + + describe('RouterState', () => { + let routeSegments: RouteSegments; + let routeState: RouteState; + let routerState: RouterState; + let previousRouterState: RouterState; + + beforeEach(() => { + routeSegments = RouteSegments.of( + 'bill/105/view', + {}, + null, + { 'test_search*': '^test-team$', 'test_@active-user': '%aUser%' }, + RouteSegments.of( + 'entity/17/explore', + {}, + null, + null, + RouteSegments.of( + 'domain/context', + {}, + null, + null, + null, + 'domain/context' + ), + 'entity/:entityId/explore' + ), + 'bill/:billId/view' + ); + + routeState = RouteState.of( + routeSegments, + 'domain/context/entity/17/explore/bill/105/view' + ); + + routerState = RouterState.of(routeState, 15); + + previousRouterState = RouterState.of(RouteState.empty(), 14); + previousRouterState.previousStates.push( + RouterState.of(RouteState.empty(), 13), + RouterState.of(RouteState.empty(), 12), + RouterState.of(RouteState.empty(), 11) + ); + }); + + it('should verify instance is created', () => { + // When + const instance = new RouterState( + new RouteState( + new RouteSegments('domain/context', {}, {}, null, null), + 'domain/context' + ), + 8 + ); + + // Then + expect(instance).toBeDefined(); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const instance = RouterState.of( + new RouteState( + new RouteSegments('domain/context', {}, {}, null, null), + 'domain/context' + ), + 11 + ); + + // Then + expect(instance).toBeInstanceOf(RouterState); + }); + }); + + describe('|empty|', () => { + it('should verify will create empty instance with default values', () => { + // When + const instance = RouterState.empty(); + + // Then + expect(instance).toBeInstanceOf(RouterState); + expect(instance.state).toEqual(RouteState.empty()); + expect(instance.navigationId).toEqual(null); + expect(instance.previousStates).toEqual([]); + }); + }); + }); + }); + + describe('Methods::', () => { + describe('|getPrevious|', () => { + beforeEach(() => { + routerState.previousStates.push( + ...previousRouterState.previousStates + ); + previousRouterState.previousStates.length = 0; + routerState.previousStates.unshift(previousRouterState); + }); + + it('should verify will return the first before current as default', () => { + // When + const previous = routerState.getPrevious(); + + // Then + expect(previous).toBe(previousRouterState); + }); + + it('should verify will return the first before current for index 0', () => { + // When + const previous = routerState.getPrevious(0); + + // Then + expect(previous).toBe(previousRouterState); + }); + + it('should verify will return the third before current for index 2', () => { + // When + const previous = routerState.getPrevious(2); + + // Then + expect(previous).toBe(routerState.previousStates[2]); + }); + + it('should verify will return null for number less than 0', () => { + // When + const previous = routerState.getPrevious(-1); + + // Then + expect(previous).toBe(null); + }); + + it('should verify will return the first before current for index not a number', () => { + // When + const previous = routerState.getPrevious(null); + + // Then + expect(previous).toBe(previousRouterState); + }); + + it('should verify will return null for index that is out of bound of stored States', () => { + // When + const previous = routerState.getPrevious(4); + + // Then + expect(previous).toBe(null); + }); + }); + + describe('|appendPrevious|', () => { + it('should verify will add previousStates to current one', () => { + // Given + const firstElement = RouterState.of(RouteState.empty(), 14); + const forthElement = RouterState.of(RouteState.empty(), 11); + + // When + routerState.appendPrevious(previousRouterState); + + // Then + expect(routerState.previousStates.length).toEqual(4); + expect(routerState.previousStates[0]).toEqual(firstElement); + expect(routerState.previousStates[3]).toEqual(forthElement); + }); + + it('should verify will pop the oldest one and will unshift the new one when buffer has 10 elements', () => { + // Given + previousRouterState.previousStates.push( + RouterState.of(RouteState.empty(), 10), + RouterState.of(RouteState.empty(), 9), + RouterState.of(RouteState.empty(), 8), + RouterState.of(RouteState.empty(), 7), + RouterState.of(RouteState.empty(), 6), + RouterState.of(RouteState.empty(), 5), + RouterState.of(RouteState.empty(), 4) + ); + + // Then 1 + expect(routerState.previousStates.length).toEqual(0); + expect(routerState.previousStates[0]).toBeUndefined(); + expect(previousRouterState.navigationId).toEqual(14); + expect(previousRouterState.previousStates[0]).toEqual( + RouterState.of(RouteState.empty(), 13) + ); + expect(previousRouterState.previousStates[9]).toEqual( + RouterState.of(RouteState.empty(), 4) + ); + + // When + routerState.appendPrevious(previousRouterState); + + // Then 2 + expect(routerState.previousStates.length).toEqual(10); + expect(routerState.previousStates[0]).toEqual( + RouterState.of(RouteState.empty(), 14) + ); + expect(routerState.previousStates[9]).toEqual( + RouterState.of(RouteState.empty(), 5) + ); + }); + + it(`should verify won't add new state when previousState has same navigationId like current`, () => { + // Given + routerState = RouterState.of(RouteState.empty(), 14); + + // Then 1 + expect(routerState.previousStates.length).toEqual(0); + expect(previousRouterState.previousStates.length).toEqual(3); + expect(previousRouterState.previousStates[0]).toEqual( + RouterState.of(RouteState.empty(), 13) + ); + expect(previousRouterState.previousStates[2]).toEqual( + RouterState.of(RouteState.empty(), 11) + ); + + // When + routerState.appendPrevious(previousRouterState); + + // Then 2 + expect(routerState.previousStates.length).toEqual(3); + expect(routerState.navigationId).toEqual(14); + expect(routerState.previousStates[0]).toEqual( + RouterState.of(RouteState.empty(), 13) + ); + expect(routerState.previousStates[2]).toEqual( + RouterState.of(RouteState.empty(), 11) + ); + }); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/model/route.model.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/model/route.model.ts index 6166a4b410..2dbf4820f2 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/model/route.model.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/model/route.model.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -21,127 +19,134 @@ import { Serializable, TaurusRouteData } from '../../../common'; * */ export class RouteSegments { - public readonly routePath: string; - public readonly data: TaurusRouteData; - public readonly params: Params; - public readonly queryParams: Params; - public readonly parent?: RouteSegments; - public readonly configPath?: string; - - /** - * ** Constructor. - */ - constructor( - routePath: string, - data: TaurusRouteData, - params: Params, - queryParams: Params, - parent?: RouteSegments, - configPath?: string) { - - this.routePath = routePath ?? ''; - this.data = data || {}; - this.params = params || {}; - this.queryParams = queryParams || {}; - this.parent = parent; - this.configPath = configPath; - } - - /** - * ** Factory method. - */ - static of( - routePath?: string, - data?: TaurusRouteData, - params?: Params, - queryParams?: Params, - parent?: RouteSegments, - configPath?: string): RouteSegments { - - return new RouteSegments(routePath, data, params, queryParams, parent, configPath); - } - - /** - * ** Factory method for empty RouteSegments. - */ - static empty(): RouteSegments { - return RouteSegments.of(null, null, null, null, null, null); - } - - /** - * ** Get RoutePath Segments. - */ - get routePathSegments(): string[] { - if (this.parent) { - return ([] as string[]) - .concat(this.parent.routePathSegments, this.routePath) - .filter((path) => path); - } - - return [this.routePath]; - } - - /** - * ** Get ConfigPath Segments. - */ - get configPathSegments(): string[] { - if (this.parent) { - return ([] as string[]) - .concat(this.parent.configPathSegments, this.configPath) - .filter((path) => path); - } - - return [this.configPath]; - } - - /** - * ** Get Data from Route configuration by key. - * - * - Return first (closest) found key starting from the current one. - */ - getData(key: string): T { - if (this.data[key]) { - return this.data[key] as T; - } - - if (this.parent) { - return this.parent.getData(key); - } - - return undefined; - } - - /** - * ** Get url param by key. - * - * - Return first (closest) found key starting from the current one. - */ - getParam(key: string): string { - if (this.params[key]) { - return this.params[key] as string; - } - - if (this.parent) { - return this.parent.getParam(key); - } - - return undefined; - } - - /** - * ** Get query param by key. - */ - getQueryParam(key: string): string { - if (this.queryParams[key]) { - return this.queryParams[key] as string; - } - - if (this.parent) { - return this.parent.getQueryParam(key); - } - - return undefined; - } + public readonly routePath: string; + public readonly data: TaurusRouteData; + public readonly params: Params; + public readonly queryParams: Params; + public readonly parent?: RouteSegments; + public readonly configPath?: string; + + /** + * ** Constructor. + */ + constructor( + routePath: string, + data: TaurusRouteData, + params: Params, + queryParams: Params, + parent?: RouteSegments, + configPath?: string + ) { + this.routePath = routePath ?? ''; + this.data = data || {}; + this.params = params || {}; + this.queryParams = queryParams || {}; + this.parent = parent; + this.configPath = configPath; + } + + /** + * ** Factory method. + */ + static of( + routePath?: string, + data?: TaurusRouteData, + params?: Params, + queryParams?: Params, + parent?: RouteSegments, + configPath?: string + ): RouteSegments { + return new RouteSegments( + routePath, + data, + params, + queryParams, + parent, + configPath + ); + } + + /** + * ** Factory method for empty RouteSegments. + */ + static empty(): RouteSegments { + return RouteSegments.of(null, null, null, null, null, null); + } + + /** + * ** Get RoutePath Segments. + */ + get routePathSegments(): string[] { + if (this.parent) { + return ([] as string[]) + .concat(this.parent.routePathSegments, this.routePath) + .filter((path) => path); + } + + return [this.routePath]; + } + + /** + * ** Get ConfigPath Segments. + */ + get configPathSegments(): string[] { + if (this.parent) { + return ([] as string[]) + .concat(this.parent.configPathSegments, this.configPath) + .filter((path) => path); + } + + return [this.configPath]; + } + + /** + * ** Get Data from Route configuration by key. + * + * - Return first (closest) found key starting from the current one. + */ + getData(key: string): T { + if (this.data[key]) { + return this.data[key] as T; + } + + if (this.parent) { + return this.parent.getData(key); + } + + return undefined; + } + + /** + * ** Get url param by key. + * + * - Return first (closest) found key starting from the current one. + */ + getParam(key: string): string { + if (this.params[key]) { + return this.params[key] as string; + } + + if (this.parent) { + return this.parent.getParam(key); + } + + return undefined; + } + + /** + * ** Get query param by key. + */ + getQueryParam(key: string): string { + if (this.queryParams[key]) { + return this.queryParams[key] as string; + } + + if (this.parent) { + return this.parent.getQueryParam(key); + } + + return undefined; + } } /** @@ -149,295 +154,293 @@ export class RouteSegments { * * */ -export class RouteState implements BaseRouterStoreState, Serializable { - public readonly routeSegments: RouteSegments; - public readonly url: string; - - /** - * ** Constructor. - */ - constructor(routeSegments: RouteSegments, - url: string) { - this.routeSegments = routeSegments ?? RouteSegments.empty(); - this.url = url ?? ''; - } - - /** - * ** Factory method. - */ - static of(routeSegments: RouteSegments, url: string): RouteState { - return new RouteState(routeSegments, url); - } - - /** - * ** Factory method for empty State. - */ - static empty(): RouteState { - return RouteState.of(null, null); - } - - /** - * ** Get serialized queryString. - */ - static serializeQueryParams(queryParams: unknown): string { - const paramsKeys = Object.keys(queryParams); - - if (!paramsKeys.length) { - return ''; - } - - return paramsKeys - .map((key) => `${ encodeURIComponent(key) }=${ encodeURIComponent(queryParams[key] as string) }`) - .join('&'); - } - - /** - * ** Returns current RoutePath. - */ - get routePath(): string { - return this.routeSegments.routePath; - } - - /** - * ** Returns current Absolute RoutePath. - */ - get absoluteRoutePath(): string { - return RouteState._resolveAbsolutePath( - this.routePathSegments - ); - } - - /** - * ** Returns the route paths for each route segment starting from the root. - */ - get routePathSegments(): string[] { - return this.routeSegments.routePathSegments; - } - - /** - * ** Returns current ConfigPath. - */ - get configPath(): string { - return this.routeSegments.configPath; - } - - /** - * ** Returns current Absolute ConfigPath. - */ - get absoluteConfigPath(): string { - return RouteState._resolveAbsolutePath( - this.configPathSegments - ); - } - - /** - * ** Returns the config paths for each route segment starting from the root. - */ - get configPathSegments(): string[] { - return this.routeSegments.configPathSegments; - } - - /** - * ** Get all query params. - */ - get queryParams(): Params { - return this.routeSegments.queryParams; - } - - /** - * ** Get serialized queryString. - */ - serializeQueryParams(): string { - return RouteState.serializeQueryParams(this.queryParams); - } - - /** - * ** Get url including QueryParams. - */ - getUrl(): string { - return `${ this.absoluteRoutePath }?${ this.serializeQueryParams() }`; - } - - /** - * ** Get Data from Route configuration by key. - * - * - Return first (closest) found key starting from first RouteSegment. - */ - getData(key: string): T { - return this.routeSegments.getData(key); - } - - /** - * ** Get url param by key. - * - * - Return first (closest) found key starting from first RouteSegment. - */ - getParam(key: string): string { - return this.routeSegments.getParam(key); - } - - /** - * ** Get query param by key. - */ - getQueryParam(key: string): string { - return this.routeSegments.getQueryParam(key); - } - - /** - * ** Get Absolute ConfigPath. - */ - getAbsoluteConfigPath(): string { - return this.absoluteConfigPath; - } - - /** - * ** Get parent of current Absolute ConfigPath. - */ - getParentAbsoluteConfigPath(): string { - const configPathSegments = this.configPathSegments; - configPathSegments.pop(); - - return RouteState._resolveAbsolutePath(configPathSegments); - } - - /** - * ** Get Absolute RoutePath. - */ - getAbsoluteRoutePath(): string { - return RouteState._resolveAbsolutePath( - this.routePathSegments - ); - } - - /** - * ** Get parent of current Absolute RoutePath. - */ - getParentAbsoluteRoutePath(): string { - const routePathSegments = this.routePathSegments; - routePathSegments.pop(); - - return RouteState._resolveAbsolutePath(routePathSegments); - } - - /** - * @inheritDoc - */ - toJSON(): SerializedRouteState { - return { - url: this.url, - routePath: this.routePath, - absoluteRoutePath: this.absoluteRoutePath, - routePathSegments: this.routePathSegments, - configPath: this.configPath, - absoluteConfigPath: this.absoluteConfigPath, - configPathSegments: this.configPathSegments, - queryParams: this.queryParams, - routeSegments: this.routeSegments - }; - } - - /** - * ** Resolve Absolute RoutePath from given routePathSegments. - */ - private static _resolveAbsolutePath(routePathSegments: string[]): string { - const path = routePathSegments - .join('/') - .replace(/^\/+/, ''); - - if (path === '') { - return '/'; - } - - return `/${ path }`; - } +export class RouteState + implements BaseRouterStoreState, Serializable +{ + public readonly routeSegments: RouteSegments; + public readonly url: string; + + /** + * ** Constructor. + */ + constructor(routeSegments: RouteSegments, url: string) { + this.routeSegments = routeSegments ?? RouteSegments.empty(); + this.url = url ?? ''; + } + + /** + * ** Factory method. + */ + static of(routeSegments: RouteSegments, url: string): RouteState { + return new RouteState(routeSegments, url); + } + + /** + * ** Factory method for empty State. + */ + static empty(): RouteState { + return RouteState.of(null, null); + } + + /** + * ** Get serialized queryString. + */ + static serializeQueryParams(queryParams: unknown): string { + const paramsKeys = Object.keys(queryParams); + + if (!paramsKeys.length) { + return ''; + } + + return paramsKeys + .map( + (key) => + `${encodeURIComponent(key)}=${encodeURIComponent( + queryParams[key] as string + )}` + ) + .join('&'); + } + + /** + * ** Returns current RoutePath. + */ + get routePath(): string { + return this.routeSegments.routePath; + } + + /** + * ** Returns current Absolute RoutePath. + */ + get absoluteRoutePath(): string { + return RouteState._resolveAbsolutePath(this.routePathSegments); + } + + /** + * ** Returns the route paths for each route segment starting from the root. + */ + get routePathSegments(): string[] { + return this.routeSegments.routePathSegments; + } + + /** + * ** Returns current ConfigPath. + */ + get configPath(): string { + return this.routeSegments.configPath; + } + + /** + * ** Returns current Absolute ConfigPath. + */ + get absoluteConfigPath(): string { + return RouteState._resolveAbsolutePath(this.configPathSegments); + } + + /** + * ** Returns the config paths for each route segment starting from the root. + */ + get configPathSegments(): string[] { + return this.routeSegments.configPathSegments; + } + + /** + * ** Get all query params. + */ + get queryParams(): Params { + return this.routeSegments.queryParams; + } + + /** + * ** Get serialized queryString. + */ + serializeQueryParams(): string { + return RouteState.serializeQueryParams(this.queryParams); + } + + /** + * ** Get url including QueryParams. + */ + getUrl(): string { + return `${this.absoluteRoutePath}?${this.serializeQueryParams()}`; + } + + /** + * ** Get Data from Route configuration by key. + * + * - Return first (closest) found key starting from first RouteSegment. + */ + getData(key: string): T { + return this.routeSegments.getData(key); + } + + /** + * ** Get url param by key. + * + * - Return first (closest) found key starting from first RouteSegment. + */ + getParam(key: string): string { + return this.routeSegments.getParam(key); + } + + /** + * ** Get query param by key. + */ + getQueryParam(key: string): string { + return this.routeSegments.getQueryParam(key); + } + + /** + * ** Get Absolute ConfigPath. + */ + getAbsoluteConfigPath(): string { + return this.absoluteConfigPath; + } + + /** + * ** Get parent of current Absolute ConfigPath. + */ + getParentAbsoluteConfigPath(): string { + const configPathSegments = this.configPathSegments; + configPathSegments.pop(); + + return RouteState._resolveAbsolutePath(configPathSegments); + } + + /** + * ** Get Absolute RoutePath. + */ + getAbsoluteRoutePath(): string { + return RouteState._resolveAbsolutePath(this.routePathSegments); + } + + /** + * ** Get parent of current Absolute RoutePath. + */ + getParentAbsoluteRoutePath(): string { + const routePathSegments = this.routePathSegments; + routePathSegments.pop(); + + return RouteState._resolveAbsolutePath(routePathSegments); + } + + /** + * @inheritDoc + */ + toJSON(): SerializedRouteState { + return { + url: this.url, + routePath: this.routePath, + absoluteRoutePath: this.absoluteRoutePath, + routePathSegments: this.routePathSegments, + configPath: this.configPath, + absoluteConfigPath: this.absoluteConfigPath, + configPathSegments: this.configPathSegments, + queryParams: this.queryParams, + routeSegments: this.routeSegments + }; + } + + /** + * ** Resolve Absolute RoutePath from given routePathSegments. + */ + private static _resolveAbsolutePath(routePathSegments: string[]): string { + const path = routePathSegments.join('/').replace(/^\/+/, ''); + + if (path === '') { + return '/'; + } + + return `/${path}`; + } } /** * ** Router state. */ export class RouterState implements RouterReducerState { - readonly state: RouteState; - readonly navigationId: number; - readonly previousStates: RouterState[]; - - /** - * ** Constructor. - */ - constructor(state: RouteState, - navigationId: number) { - this.state = state ?? RouteState.empty(); - this.navigationId = navigationId ?? null; - this.previousStates = []; - } - - /** - * ** Factory method. - */ - static of(state: RouteState, navigationId: number): RouterState { - return new RouterState(state, navigationId); - } - - /** - * ** Factory method for empty State. - */ - static empty(): RouterState { - return RouterState.of(null, null); - } - - /** - * ** Returns previous RouterState if exist otherwise null. - * - * - Optional parameter could be provided to instruct which previous RouterState to return, default one is 0. - * - 0 means the first before current. - * - 1 means the second before current. - * - 2 means the third before current. - * - 3 ... etc... - */ - getPrevious(index = 0): RouterState | null { - const lookupIndex = CollectionsUtil.isNumber(index) - ? index - : 0; - - if (lookupIndex >= 0 && lookupIndex < this.previousStates.length) { - return this.previousStates[lookupIndex]; - } - - return null; - } - - /** - * ** Append previous RouterState[] to current One. - * - * - Internal API used in reducer, not for public use. - */ - appendPrevious(routerState: RouterState): void { - const previousStoredStates: RouterState[] = [...routerState.previousStates]; - const cleanedPreviousState = RouterState.of(routerState.state, routerState.navigationId); - - if (this.navigationId !== cleanedPreviousState.navigationId) { - if (previousStoredStates.length >= 10) { - previousStoredStates.pop(); - } - - previousStoredStates.unshift(cleanedPreviousState); - } - - this.previousStates.length = 0; - this.previousStates.push(...previousStoredStates); - } + readonly state: RouteState; + readonly navigationId: number; + readonly previousStates: RouterState[]; + + /** + * ** Constructor. + */ + constructor(state: RouteState, navigationId: number) { + this.state = state ?? RouteState.empty(); + this.navigationId = navigationId ?? null; + this.previousStates = []; + } + + /** + * ** Factory method. + */ + static of(state: RouteState, navigationId: number): RouterState { + return new RouterState(state, navigationId); + } + + /** + * ** Factory method for empty State. + */ + static empty(): RouterState { + return RouterState.of(null, null); + } + + /** + * ** Returns previous RouterState if exist otherwise null. + * + * - Optional parameter could be provided to instruct which previous RouterState to return, default one is 0. + * - 0 means the first before current. + * - 1 means the second before current. + * - 2 means the third before current. + * - 3 ... etc... + */ + getPrevious(index = 0): RouterState | null { + const lookupIndex = CollectionsUtil.isNumber(index) ? index : 0; + + if (lookupIndex >= 0 && lookupIndex < this.previousStates.length) { + return this.previousStates[lookupIndex]; + } + + return null; + } + + /** + * ** Append previous RouterState[] to current One. + * + * - Internal API used in reducer, not for public use. + */ + appendPrevious(routerState: RouterState): void { + const previousStoredStates: RouterState[] = [...routerState.previousStates]; + const cleanedPreviousState = RouterState.of( + routerState.state, + routerState.navigationId + ); + + if (this.navigationId !== cleanedPreviousState.navigationId) { + if (previousStoredStates.length >= 10) { + previousStoredStates.pop(); + } + + previousStoredStates.unshift(cleanedPreviousState); + } + + this.previousStates.length = 0; + this.previousStates.push(...previousStoredStates); + } } /** * ** Route state serialized. */ interface SerializedRouteState { - url: string; - routePath: string; - absoluteRoutePath: string; - routePathSegments: string[]; - configPath: string; - absoluteConfigPath: string; - configPathSegments: string[]; - queryParams: { [key: string]: PrimitivesNil }; - routeSegments: RouteSegments; + url: string; + routePath: string; + absoluteRoutePath: string; + routePathSegments: string[]; + configPath: string; + absoluteConfigPath: string; + configPathSegments: string[]; + queryParams: { [key: string]: PrimitivesNil }; + routeSegments: RouteSegments; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/public-api.ts index a99e71c6d1..9ced625f13 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/services/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/services/index.ts index adc9a3f64f..272b8b7798 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/services/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/services/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/services/router.service.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/services/router.service.spec.ts index fde2ad54e6..e1c5adffff 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/services/router.service.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/services/router.service.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -23,171 +21,188 @@ import { RouterState, RouteState } from '../model'; import { RouterService, RouterServiceImpl } from './router.service'; describe('RouterService -> RouterServiceImpl', () => { - let storeStub$: jasmine.SpyObj>; - let service: RouterService; - - beforeEach(() => { - storeStub$ = jasmine.createSpyObj>('store', ['select']); - - TestBed.configureTestingModule({ - providers: [ - { provide: Store, useValue: storeStub$ }, - { provide: RouterService, useClass: RouterServiceImpl } - ] - }); - - service = TestBed.inject(RouterService); - }); - - it('should verify instance is created', () => { - // Then - expect(service).toBeDefined(); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|get|', () => { - it('should verify will return RouterState', () => { - // When - const routerState = RouterService.get(); - - // Then - expect(routerState.state).toEqual(RouteState.empty()); - }); - }); - - describe('|getState|', () => { - it('should verify will return RouteState', () => { - // When - const routeState = RouterService.getState(); - - // Then - expect(routeState).toEqual(RouteState.empty()); - }); - }); - }); - }); - - describe('Methods::', () => { - describe('|get|', () => { - it('should verify will select RouterState from Store', () => { - // Given - storeStub$.select.and.returnValue(of({ state: {}, navigationId: 5 } as RouterState)); - - // When - service.get(); - - // Then - expect(storeStub$.select.calls.mostRecent().args).toEqual([STORE_ROUTER]); - }); - - it('should verify will return correct Observable state', marbles((m) => { - // Given - const storeStream$ = m.cold('----a---', { - a: { - state: RouteState.empty(), - navigationId: 7 - } as RouterState - }); - const expectedOutputStream$ = m.cold('----a---', { - a: { - state: RouteState.empty(), - navigationId: 7 - } as RouterState - }); - storeStub$.select.and.returnValue(storeStream$); - - // When - const response$ = service.get(); - - // Then - m.expect(response$).toBeObservable(expectedOutputStream$); - })); - }); - - describe('|getState|', () => { - it('should verify will select RouterState from Store', () => { - // Given - storeStub$.select.and.returnValue(of({ state: {}, navigationId: 5 } as RouterState)); - - // When - service.getState(); - - // Then - expect(storeStub$.select.calls.mostRecent().args).toEqual([STORE_ROUTER]); - }); - - it('should verify will return correct Observable state', marbles((m) => { - // Given - const storeStream$ = m.cold('----a---', { - a: { - state: RouteState.empty(), - navigationId: 7 - } as RouterState - }); - const expectedOutputStream$ = m.cold('----a---', { - a: RouteState.empty() - }); - storeStub$.select.and.returnValue(storeStream$); - - // When - const response$ = service.getState(); - - // Then - m.expect(response$).toBeObservable(expectedOutputStream$); - })); - }); - - describe('|initialize|', () => { - it('should verify will push created subscriptions to buffer', () => { - // Given - const storeStream$ = of({ - state: RouteState.empty(), - navigationId: 7 - } as RouterState); - storeStub$.select.and.returnValue(storeStream$); - // @ts-ignore - const cleanSubSpy = spyOn(service, 'cleanSubscriptions').and.callThrough(); - - // Then 1 - expect(service['subscriptions'].length).toEqual(0); - - // When - service.initialize(); - - // Then 2 - expect(service['subscriptions'].length).toEqual(1); - expect(cleanSubSpy).toHaveBeenCalled(); - }); - - it('should verify will create subscriptions and will assign value to local state', marbles((m) => { - // Given - const routerState = RouterState.of( - RouteState.empty(), - 7 - ); - const storeStream$ = m.hot('-^--a---', { - a: routerState - }); - storeStub$.select.and.returnValue(storeStream$); - - // When 1 - service.initialize(); - - // delay of 4 frames - of(true).pipe( - delay(m.time('----|')) - ).subscribe(() => { - // Then 1 - expect(RouterService['_routerState']).toBe(routerState); - - // When 2 // destroy Service - service.ngOnDestroy(); - - // Then - m.expect(storeStream$).toHaveSubscriptions('^---!'); - }); - })); - }); - }); + let storeStub$: jasmine.SpyObj>; + let service: RouterService; + + beforeEach(() => { + storeStub$ = jasmine.createSpyObj>('store', ['select']); + + TestBed.configureTestingModule({ + providers: [ + { provide: Store, useValue: storeStub$ }, + { provide: RouterService, useClass: RouterServiceImpl } + ] + }); + + service = TestBed.inject(RouterService); + }); + + it('should verify instance is created', () => { + // Then + expect(service).toBeDefined(); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|get|', () => { + it('should verify will return RouterState', () => { + // When + const routerState = RouterService.get(); + + // Then + expect(routerState.state).toEqual(RouteState.empty()); + }); + }); + + describe('|getState|', () => { + it('should verify will return RouteState', () => { + // When + const routeState = RouterService.getState(); + + // Then + expect(routeState).toEqual(RouteState.empty()); + }); + }); + }); + }); + + describe('Methods::', () => { + describe('|get|', () => { + it('should verify will select RouterState from Store', () => { + // Given + storeStub$.select.and.returnValue( + of({ state: {}, navigationId: 5 } as RouterState) + ); + + // When + service.get(); + + // Then + expect(storeStub$.select.calls.mostRecent().args).toEqual([ + STORE_ROUTER + ]); + }); + + it( + 'should verify will return correct Observable state', + marbles((m) => { + // Given + const storeStream$ = m.cold('----a---', { + a: { + state: RouteState.empty(), + navigationId: 7 + } as RouterState + }); + const expectedOutputStream$ = m.cold('----a---', { + a: { + state: RouteState.empty(), + navigationId: 7 + } as RouterState + }); + storeStub$.select.and.returnValue(storeStream$); + + // When + const response$ = service.get(); + + // Then + m.expect(response$).toBeObservable(expectedOutputStream$); + }) + ); + }); + + describe('|getState|', () => { + it('should verify will select RouterState from Store', () => { + // Given + storeStub$.select.and.returnValue( + of({ state: {}, navigationId: 5 } as RouterState) + ); + + // When + service.getState(); + + // Then + expect(storeStub$.select.calls.mostRecent().args).toEqual([ + STORE_ROUTER + ]); + }); + + it( + 'should verify will return correct Observable state', + marbles((m) => { + // Given + const storeStream$ = m.cold('----a---', { + a: { + state: RouteState.empty(), + navigationId: 7 + } as RouterState + }); + const expectedOutputStream$ = m.cold('----a---', { + a: RouteState.empty() + }); + storeStub$.select.and.returnValue(storeStream$); + + // When + const response$ = service.getState(); + + // Then + m.expect(response$).toBeObservable(expectedOutputStream$); + }) + ); + }); + + describe('|initialize|', () => { + it('should verify will push created subscriptions to buffer', () => { + // Given + const storeStream$ = of({ + state: RouteState.empty(), + navigationId: 7 + } as RouterState); + storeStub$.select.and.returnValue(storeStream$); + // @ts-ignore + const cleanSubSpy = spyOn( + service, + 'cleanSubscriptions' + ).and.callThrough(); + + // Then 1 + expect(service['subscriptions'].length).toEqual(0); + + // When + service.initialize(); + + // Then 2 + expect(service['subscriptions'].length).toEqual(1); + expect(cleanSubSpy).toHaveBeenCalled(); + }); + + it( + 'should verify will create subscriptions and will assign value to local state', + marbles((m) => { + // Given + const routerState = RouterState.of(RouteState.empty(), 7); + const storeStream$ = m.hot('-^--a---', { + a: routerState + }); + storeStub$.select.and.returnValue(storeStream$); + + // When 1 + service.initialize(); + + // delay of 4 frames + of(true) + .pipe(delay(m.time('----|'))) + .subscribe(() => { + // Then 1 + expect(RouterService['_routerState']).toBe(routerState); + + // When 2 // destroy Service + service.ngOnDestroy(); + + // Then + m.expect(storeStream$).toHaveSubscriptions('^---!'); + }); + }) + ); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/services/router.service.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/services/router.service.ts index 2b4af4d298..d6260c1fcf 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/services/router.service.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/services/router.service.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -26,36 +24,36 @@ import { RouterState, RouteState } from '../model'; @Directive() // eslint-disable-next-line @angular-eslint/directive-class-suffix export abstract class RouterService extends TaurusObject { - protected static _routerState: RouterState = RouterState.empty(); - - /** - * ** Will return current Router. - */ - static get(): RouterState { - return RouterService._routerState; - } - - /** - * ** Will return current Route State. - */ - static getState(): RouteState { - return RouterService._routerState.state; - } - - /** - * ** Will return Observable with NgRx Route State. - */ - abstract get(): Observable; - - /** - * ** Will return Observable with Route State. - */ - abstract getState(): Observable; - - /** - * ** Will initialize service. - */ - abstract initialize(): void; + protected static _routerState: RouterState = RouterState.empty(); + + /** + * ** Will return current Router. + */ + static get(): RouterState { + return RouterService._routerState; + } + + /** + * ** Will return current Route State. + */ + static getState(): RouteState { + return RouterService._routerState.state; + } + + /** + * ** Will return Observable with NgRx Route State. + */ + abstract get(): Observable; + + /** + * ** Will return Observable with Route State. + */ + abstract getState(): Observable; + + /** + * ** Will initialize service. + */ + abstract initialize(): void; } /** @@ -63,37 +61,34 @@ export abstract class RouterService extends TaurusObject { */ @Injectable() export class RouterServiceImpl extends RouterService { - constructor(private readonly store$: Store) { - super(); - } - - /** - * @inheritDoc - */ - get(): Observable { - return this.store$.select(STORE_ROUTER); - } - - /** - * @inheritDoc - */ - getState(): Observable { - return this.get().pipe( - map((data) => data.state) - ); - } - - /** - * @inheritDoc - */ - initialize(): void { - this.cleanSubscriptions(); - - this.subscriptions.push( - this.get() - .subscribe((state) => { - RouterService._routerState = state; - }) - ); - } + constructor(private readonly store$: Store) { + super(); + } + + /** + * @inheritDoc + */ + get(): Observable { + return this.store$.select(STORE_ROUTER); + } + + /** + * @inheritDoc + */ + getState(): Observable { + return this.get().pipe(map((data) => data.state)); + } + + /** + * @inheritDoc + */ + initialize(): void { + this.cleanSubscriptions(); + + this.subscriptions.push( + this.get().subscribe((state) => { + RouterService._routerState = state; + }) + ); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/actions/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/actions/index.ts index 258264b723..b7857cfe90 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/actions/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/actions/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/actions/router.actions.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/actions/router.actions.spec.ts index 626c0f6ba0..278064f08b 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/actions/router.actions.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/actions/router.actions.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -8,164 +6,185 @@ import { BaseAction, BaseActionWithPayload } from '../../../ngrx'; import { - LOCATION_BACK, - LOCATION_FORWARD, - LOCATION_GO, - LocationBack, - LocationForward, - LocationGo, - ROUTER_NAVIGATE, - RouterNavigate + LOCATION_BACK, + LOCATION_FORWARD, + LOCATION_GO, + LocationBack, + LocationForward, + LocationGo, + ROUTER_NAVIGATE, + RouterNavigate } from './router.actions'; describe('NavigationActions', () => { - describe('RouterNavigate', () => { - it('should verify instance is created', () => { - // Then - expect(() => new RouterNavigate({ commands: [], extras: {} })).toBeDefined(); - }); - - it('should verify correct type is assigned', () => { - // When - const instance = new RouterNavigate({ commands: [], extras: {} }); - - // Then - expect(instance.type).toEqual(ROUTER_NAVIGATE); - }); - - it('should verify prototype chaining', () => { - // When - const instance = new RouterNavigate({ commands: [], extras: {} }); - - // Then - expect(instance).toBeInstanceOf(BaseActionWithPayload); - expect(instance).toBeInstanceOf(BaseAction); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const instance = RouterNavigate.of({ commands: [], extras: {} }); - - // Then - expect(instance).toBeInstanceOf(RouterNavigate); - }); - }); - }); - }); - }); - - describe('LocationGo', () => { - it('should verify instance is created', () => { - // Then - expect(() => new LocationGo({ path: 'entity/15', query: 'search=test-team', state: {} })).toBeDefined(); - }); - - it('should verify correct type is assigned', () => { - // When - const instance = new LocationGo({ path: 'entity/15', query: 'search=test-team', state: {} }); - - // Then - expect(instance.type).toEqual(LOCATION_GO); - }); - - it('should verify prototype chaining', () => { - // When - const instance = new LocationGo({ path: 'entity/15', query: 'search=test-team', state: {} }); - - // Then - expect(instance).toBeInstanceOf(BaseActionWithPayload); - expect(instance).toBeInstanceOf(BaseAction); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const instance = LocationGo.of({ path: 'entity/15', query: 'search=test-team', state: {} }); - - // Then - expect(instance).toBeInstanceOf(LocationGo); - }); - }); - }); - }); - }); - - describe('LocationBack', () => { - it('should verify instance is created', () => { - // Then - expect(() => new LocationBack()).toBeDefined(); - }); - - it('should verify correct type is assigned', () => { - // When - const instance = new LocationBack(); - - // Then - expect(instance.type).toEqual(LOCATION_BACK); - }); - - it('should verify prototype chaining', () => { - // When - const instance = new LocationBack(); - - // Then - expect(instance).toBeInstanceOf(BaseAction); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const instance = LocationBack.of(); - - // Then - expect(instance).toBeInstanceOf(LocationBack); - }); - }); - }); - }); - }); - - describe('LocationForward', () => { - it('should verify instance is created', () => { - // Then - expect(() => new LocationForward()).toBeDefined(); - }); - - it('should verify correct type is assigned', () => { - // When - const instance = new LocationForward(); - - // Then - expect(instance.type).toEqual(LOCATION_FORWARD); - }); - - it('should verify prototype chaining', () => { - // When - const instance = new LocationForward(); - - // Then - expect(instance).toBeInstanceOf(BaseAction); - }); - - describe('Statics::', () => { - describe('Methods::', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const instance = LocationForward.of(); - - // Then - expect(instance).toBeInstanceOf(LocationForward); - }); - }); - }); - }); - }); + describe('RouterNavigate', () => { + it('should verify instance is created', () => { + // Then + expect( + () => new RouterNavigate({ commands: [], extras: {} }) + ).toBeDefined(); + }); + + it('should verify correct type is assigned', () => { + // When + const instance = new RouterNavigate({ commands: [], extras: {} }); + + // Then + expect(instance.type).toEqual(ROUTER_NAVIGATE); + }); + + it('should verify prototype chaining', () => { + // When + const instance = new RouterNavigate({ commands: [], extras: {} }); + + // Then + expect(instance).toBeInstanceOf(BaseActionWithPayload); + expect(instance).toBeInstanceOf(BaseAction); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const instance = RouterNavigate.of({ commands: [], extras: {} }); + + // Then + expect(instance).toBeInstanceOf(RouterNavigate); + }); + }); + }); + }); + }); + + describe('LocationGo', () => { + it('should verify instance is created', () => { + // Then + expect( + () => + new LocationGo({ + path: 'entity/15', + query: 'search=test-team', + state: {} + }) + ).toBeDefined(); + }); + + it('should verify correct type is assigned', () => { + // When + const instance = new LocationGo({ + path: 'entity/15', + query: 'search=test-team', + state: {} + }); + + // Then + expect(instance.type).toEqual(LOCATION_GO); + }); + + it('should verify prototype chaining', () => { + // When + const instance = new LocationGo({ + path: 'entity/15', + query: 'search=test-team', + state: {} + }); + + // Then + expect(instance).toBeInstanceOf(BaseActionWithPayload); + expect(instance).toBeInstanceOf(BaseAction); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const instance = LocationGo.of({ + path: 'entity/15', + query: 'search=test-team', + state: {} + }); + + // Then + expect(instance).toBeInstanceOf(LocationGo); + }); + }); + }); + }); + }); + + describe('LocationBack', () => { + it('should verify instance is created', () => { + // Then + expect(() => new LocationBack()).toBeDefined(); + }); + + it('should verify correct type is assigned', () => { + // When + const instance = new LocationBack(); + + // Then + expect(instance.type).toEqual(LOCATION_BACK); + }); + + it('should verify prototype chaining', () => { + // When + const instance = new LocationBack(); + + // Then + expect(instance).toBeInstanceOf(BaseAction); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const instance = LocationBack.of(); + + // Then + expect(instance).toBeInstanceOf(LocationBack); + }); + }); + }); + }); + }); + + describe('LocationForward', () => { + it('should verify instance is created', () => { + // Then + expect(() => new LocationForward()).toBeDefined(); + }); + + it('should verify correct type is assigned', () => { + // When + const instance = new LocationForward(); + + // Then + expect(instance.type).toEqual(LOCATION_FORWARD); + }); + + it('should verify prototype chaining', () => { + // When + const instance = new LocationForward(); + + // Then + expect(instance).toBeInstanceOf(BaseAction); + }); + + describe('Statics::', () => { + describe('Methods::', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const instance = LocationForward.of(); + + // Then + expect(instance).toBeInstanceOf(LocationForward); + }); + }); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/actions/router.actions.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/actions/router.actions.ts index 299d347a31..e2dd492e9b 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/actions/router.actions.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/actions/router.actions.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -38,9 +36,9 @@ export const LOCATION_BACK = '[location] Back'; export const LOCATION_FORWARD = '[location] Forward'; export interface NavigatePayload { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - commands: any[]; - extras?: NavigationExtras; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + commands: any[]; + extras?: NavigationExtras; } /** @@ -49,23 +47,23 @@ export interface NavigatePayload { * */ export class RouterNavigate extends BaseActionWithPayload { - constructor(payload: NavigatePayload) { - super(ROUTER_NAVIGATE, payload); - } - - /** - * ** Factory method. - */ - static override of(payload: NavigatePayload) { - return new RouterNavigate(payload); - } + constructor(payload: NavigatePayload) { + super(ROUTER_NAVIGATE, payload); + } + + /** + * ** Factory method. + */ + static override of(payload: NavigatePayload) { + return new RouterNavigate(payload); + } } export interface GoPayload { - path: string; - query?: string; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - state?: any; + path: string; + query?: string; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + state?: any; } /** @@ -74,16 +72,16 @@ export interface GoPayload { * */ export class LocationGo extends BaseActionWithPayload { - constructor(payload: GoPayload) { - super(LOCATION_GO, payload); - } - - /** - * ** Factory method. - */ - static override of(payload: GoPayload) { - return new LocationGo(payload); - } + constructor(payload: GoPayload) { + super(LOCATION_GO, payload); + } + + /** + * ** Factory method. + */ + static override of(payload: GoPayload) { + return new LocationGo(payload); + } } /** @@ -92,16 +90,16 @@ export class LocationGo extends BaseActionWithPayload { * */ export class LocationBack extends BaseAction { - constructor() { - super(LOCATION_BACK); - } - - /** - * ** Factory method. - */ - static of() { - return new LocationBack(); - } + constructor() { + super(LOCATION_BACK); + } + + /** + * ** Factory method. + */ + static of() { + return new LocationBack(); + } } /** @@ -110,16 +108,20 @@ export class LocationBack extends BaseAction { * */ export class LocationForward extends BaseAction { - constructor() { - super(LOCATION_FORWARD); - } - - /** - * ** Factory method. - */ - static of() { - return new LocationForward(); - } + constructor() { + super(LOCATION_FORWARD); + } + + /** + * ** Factory method. + */ + static of() { + return new LocationForward(); + } } -export type NavigationActions = RouterNavigate | LocationGo | LocationBack | LocationForward; +export type NavigationActions = + | RouterNavigate + | LocationGo + | LocationBack + | LocationForward; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/effects/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/effects/index.ts index 49fe38a24f..428fc6908c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/effects/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/effects/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/effects/router.effects.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/effects/router.effects.spec.ts index e3d34b49a5..4d121abfeb 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/effects/router.effects.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/effects/router.effects.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -15,115 +13,146 @@ import { Observable } from 'rxjs'; import { marbles } from 'rxjs-marbles/jasmine'; import { RouterEffects } from './router.effects'; -import { LocationBack, LocationForward, LocationGo, RouterNavigate } from '../actions'; +import { + LocationBack, + LocationForward, + LocationGo, + RouterNavigate +} from '../actions'; describe('RouterEffects', () => { - let effects: RouterEffects; - - let routeAction$: Observable; - - let routerStub: jasmine.SpyObj; - let locationStub: jasmine.SpyObj; - - beforeEach(waitForAsync(() => { - routerStub = jasmine.createSpyObj('router', ['navigate']); - locationStub = jasmine.createSpyObj('location', ['go', 'back', 'forward']); - - TestBed.configureTestingModule({ - providers: [ - { - provide: Router, - useValue: routerStub - }, - { - provide: Location, - useValue: locationStub - }, - provideMockActions(() => routeAction$), - RouterEffects - ] - }); - - routerStub.navigate.and.returnValue(Promise.resolve(true)); - - effects = TestBed.inject(RouterEffects); - })); - - it('should use Location.go()', marbles((m) => { - routeAction$ = m.hot('-a', { a: new LocationGo({ path: '/test', query: 'search=random', state: {} }) }); - effects.locationGo$.subscribe(() => { - expect(locationStub.go).toHaveBeenCalled(); - }); - })); - - it(`should verify will handle error and won't invoke Location.go()`, marbles((m) => { - routeAction$ = m.hot('-#'); - - effects.locationGo$.subscribe((v) => { - expect(v).toBeTrue(); - expect(locationStub.go).not.toHaveBeenCalled(); - }); - })); - - it('should navigate back', marbles((m) => { - routeAction$ = m.hot('-a', { a: new LocationBack() }); - effects.locationBack$.subscribe(() => { - expect(locationStub.back).toHaveBeenCalled(); - }); - })); - - it(`should verify will handle error and won't invoke navigate back`, marbles((m) => { - routeAction$ = m.hot('-#'); - - effects.locationBack$.subscribe((v) => { - expect(v).toBeTrue(); - expect(locationStub.back).not.toHaveBeenCalled(); - }); - })); - - it('should navigate forward', marbles((m) => { - routeAction$ = m.hot('-a', { a: new LocationForward() }); - effects.locationForward$.subscribe(() => { - expect(locationStub.forward).toHaveBeenCalled(); - }); - })); - - it(`should verify will handle error and won't invoke Location.forward()`, marbles((m) => { - routeAction$ = m.hot('-#'); - - effects.locationForward$.subscribe((v) => { - expect(v).toBeTrue(); - expect(locationStub.forward).not.toHaveBeenCalled(); - }); - })); - - it('should navigate to path', marbles((m) => { - const goAction = new RouterNavigate({ - commands: ['/domain', 'context', 'entity', 10, 'sub-entity', 7], - extras: { - queryParams: { value: 1 } - } - }); - - routeAction$ = m.hot('a', { a: goAction }); - effects.routerNavigate$.subscribe(() => { - expect(routerStub.navigate).toHaveBeenCalledWith([ - '/domain', - 'context', - 'entity', - 10, - 'sub-entity', - 7 - ], goAction.payload.extras); - }); - })); - - it(`should verify will handle error and won't invoke router navigate`, marbles((m) => { - routeAction$ = m.hot('-#'); - - effects.routerNavigate$.subscribe((v) => { - expect(v).toBeTrue(); - expect(routerStub.navigate).not.toHaveBeenCalled(); - }); - })); + let effects: RouterEffects; + + let routeAction$: Observable; + + let routerStub: jasmine.SpyObj; + let locationStub: jasmine.SpyObj; + + beforeEach(waitForAsync(() => { + routerStub = jasmine.createSpyObj('router', ['navigate']); + locationStub = jasmine.createSpyObj('location', [ + 'go', + 'back', + 'forward' + ]); + + TestBed.configureTestingModule({ + providers: [ + { + provide: Router, + useValue: routerStub + }, + { + provide: Location, + useValue: locationStub + }, + provideMockActions(() => routeAction$), + RouterEffects + ] + }); + + routerStub.navigate.and.returnValue(Promise.resolve(true)); + + effects = TestBed.inject(RouterEffects); + })); + + it( + 'should use Location.go()', + marbles((m) => { + routeAction$ = m.hot('-a', { + a: new LocationGo({ path: '/test', query: 'search=random', state: {} }) + }); + effects.locationGo$.subscribe(() => { + expect(locationStub.go).toHaveBeenCalled(); + }); + }) + ); + + it( + `should verify will handle error and won't invoke Location.go()`, + marbles((m) => { + routeAction$ = m.hot('-#'); + + effects.locationGo$.subscribe((v) => { + expect(v).toBeTrue(); + expect(locationStub.go).not.toHaveBeenCalled(); + }); + }) + ); + + it( + 'should navigate back', + marbles((m) => { + routeAction$ = m.hot('-a', { a: new LocationBack() }); + effects.locationBack$.subscribe(() => { + expect(locationStub.back).toHaveBeenCalled(); + }); + }) + ); + + it( + `should verify will handle error and won't invoke navigate back`, + marbles((m) => { + routeAction$ = m.hot('-#'); + + effects.locationBack$.subscribe((v) => { + expect(v).toBeTrue(); + expect(locationStub.back).not.toHaveBeenCalled(); + }); + }) + ); + + it( + 'should navigate forward', + marbles((m) => { + routeAction$ = m.hot('-a', { a: new LocationForward() }); + effects.locationForward$.subscribe(() => { + expect(locationStub.forward).toHaveBeenCalled(); + }); + }) + ); + + it( + `should verify will handle error and won't invoke Location.forward()`, + marbles((m) => { + routeAction$ = m.hot('-#'); + + effects.locationForward$.subscribe((v) => { + expect(v).toBeTrue(); + expect(locationStub.forward).not.toHaveBeenCalled(); + }); + }) + ); + + it( + 'should navigate to path', + marbles((m) => { + const goAction = new RouterNavigate({ + commands: ['/domain', 'context', 'entity', 10, 'sub-entity', 7], + extras: { + queryParams: { value: 1 } + } + }); + + routeAction$ = m.hot('a', { a: goAction }); + effects.routerNavigate$.subscribe(() => { + expect(routerStub.navigate).toHaveBeenCalledWith( + ['/domain', 'context', 'entity', 10, 'sub-entity', 7], + goAction.payload.extras + ); + }); + }) + ); + + it( + `should verify will handle error and won't invoke router navigate`, + marbles((m) => { + routeAction$ = m.hot('-#'); + + effects.routerNavigate$.subscribe((v) => { + expect(v).toBeTrue(); + expect(routerStub.navigate).not.toHaveBeenCalled(); + }); + }) + ); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/effects/router.effects.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/effects/router.effects.ts index a04d69b227..36734e9572 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/effects/router.effects.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/effects/router.effects.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -14,7 +12,15 @@ import { catchError, map, tap } from 'rxjs/operators'; import { Actions, createEffect, ofType } from '@ngrx/effects'; -import { GoPayload, LOCATION_BACK, LOCATION_FORWARD, LOCATION_GO, NavigatePayload, ROUTER_NAVIGATE, RouterNavigate } from '../actions'; +import { + GoPayload, + LOCATION_BACK, + LOCATION_FORWARD, + LOCATION_GO, + NavigatePayload, + ROUTER_NAVIGATE, + RouterNavigate +} from '../actions'; /** * ** Router Effects Service. @@ -23,77 +29,82 @@ import { GoPayload, LOCATION_BACK, LOCATION_FORWARD, LOCATION_GO, NavigatePayloa */ @Injectable() export class RouterEffects { - /** - * ** Effect for Router navigation. - */ - routerNavigate$ = createEffect( - () => this.actions$.pipe( - ofType(ROUTER_NAVIGATE), - map((action: RouterNavigate) => action.payload), - tap((payload) => this._navigate(payload)), - catchError((error: unknown) => RouterEffects._handleError(error)) - ), - { dispatch: false } - ); + /** + * ** Effect for Router navigation. + */ + routerNavigate$ = createEffect( + () => + this.actions$.pipe( + ofType(ROUTER_NAVIGATE), + map((action: RouterNavigate) => action.payload), + tap((payload) => this._navigate(payload)), + catchError((error: unknown) => RouterEffects._handleError(error)) + ), + { dispatch: false } + ); - /** - * ** Effect for Location go (navigate). - */ - locationGo$ = createEffect( - () => this.actions$.pipe( - ofType(LOCATION_GO), - tap((payload: GoPayload) => this.location.go(payload.path, payload.query, payload.state)), - catchError((error: unknown) => RouterEffects._handleError(error)) - ), - { dispatch: false } - ); + /** + * ** Effect for Location go (navigate). + */ + locationGo$ = createEffect( + () => + this.actions$.pipe( + ofType(LOCATION_GO), + tap((payload: GoPayload) => + this.location.go(payload.path, payload.query, payload.state) + ), + catchError((error: unknown) => RouterEffects._handleError(error)) + ), + { dispatch: false } + ); - /** - * ** Effect for pop Backward Browser state. - */ - locationBack$ = createEffect( - () => this.actions$.pipe( - ofType(LOCATION_BACK), - tap(() => this.location.back()), - catchError((error: unknown) => RouterEffects._handleError(error)) - ), - { dispatch: false } - ); + /** + * ** Effect for pop Backward Browser state. + */ + locationBack$ = createEffect( + () => + this.actions$.pipe( + ofType(LOCATION_BACK), + tap(() => this.location.back()), + catchError((error: unknown) => RouterEffects._handleError(error)) + ), + { dispatch: false } + ); - /** - * ** Effect for push Forward Browser state. - */ - locationForward$ = createEffect( - () => this.actions$.pipe( - ofType(LOCATION_FORWARD), - tap(() => this.location.forward()), - catchError((error: unknown) => RouterEffects._handleError(error)) - ), - { dispatch: false } - ); + /** + * ** Effect for push Forward Browser state. + */ + locationForward$ = createEffect( + () => + this.actions$.pipe( + ofType(LOCATION_FORWARD), + tap(() => this.location.forward()), + catchError((error: unknown) => RouterEffects._handleError(error)) + ), + { dispatch: false } + ); - /** - * ** Constructor. - */ - constructor(private readonly actions$: Actions, - private readonly router: Router, - private readonly location: Location) { - } + /** + * ** Constructor. + */ + constructor( + private readonly actions$: Actions, + private readonly router: Router, + private readonly location: Location + ) {} - private static _handleError(error: unknown): Observable { - console.error(error); + private static _handleError(error: unknown): Observable { + console.error(error); - return of(true); - } + return of(true); + } - private _navigate(payload: NavigatePayload): void { - const extras = payload.extras ?? {}; + private _navigate(payload: NavigatePayload): void { + const extras = payload.extras ?? {}; - // eslint-disable-next-line @typescript-eslint/no-floating-promises - this.router - .navigate(payload.commands, extras) - .then(() => { - // No-op. - }); - } + // eslint-disable-next-line @typescript-eslint/no-floating-promises + this.router.navigate(payload.commands, extras).then(() => { + // No-op. + }); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/reducers/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/reducers/index.ts index 3bbc2f5e1e..e4d44cbe27 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/reducers/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/reducers/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/reducers/router.reducer.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/reducers/router.reducer.spec.ts index 018109ec64..33b81868b0 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/reducers/router.reducer.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/reducers/router.reducer.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -14,25 +12,43 @@ import { RouterState, RouteState } from '../../model'; import { routerReducer } from './router.reducer'; describe('routerReducer', () => { - it('should verify will invoke correct methods', () => { - // Given - const navigateAction: RouterNavigationAction = { - type: ROUTER_NAVIGATION, - payload: { - routerState: RouteState.empty(), - event: new RoutesRecognized(5, 'domain/context', 'domain/context', {} as RouterStateSnapshot) - } - }; - const storedRouterStateStub = jasmine.createSpyObj('routerState', ['appendPrevious']); - const newRouterStateStub = jasmine.createSpyObj('routerState', ['appendPrevious']); - const factoryMethodSpy = spyOn(RouterState, 'of').and.returnValue(newRouterStateStub); - - // When - const value = routerReducer(storedRouterStateStub, navigateAction); - - // Then - expect(value).toBe(newRouterStateStub); - expect(factoryMethodSpy).toHaveBeenCalledWith(navigateAction.payload.routerState, navigateAction.payload.event.id); - expect(newRouterStateStub.appendPrevious).toHaveBeenCalledWith(storedRouterStateStub); - }); + it('should verify will invoke correct methods', () => { + // Given + const navigateAction: RouterNavigationAction = { + type: ROUTER_NAVIGATION, + payload: { + routerState: RouteState.empty(), + event: new RoutesRecognized( + 5, + 'domain/context', + 'domain/context', + {} as RouterStateSnapshot + ) + } + }; + const storedRouterStateStub = jasmine.createSpyObj( + 'routerState', + ['appendPrevious'] + ); + const newRouterStateStub = jasmine.createSpyObj( + 'routerState', + ['appendPrevious'] + ); + const factoryMethodSpy = spyOn(RouterState, 'of').and.returnValue( + newRouterStateStub + ); + + // When + const value = routerReducer(storedRouterStateStub, navigateAction); + + // Then + expect(value).toBe(newRouterStateStub); + expect(factoryMethodSpy).toHaveBeenCalledWith( + navigateAction.payload.routerState, + navigateAction.payload.event.id + ); + expect(newRouterStateStub.appendPrevious).toHaveBeenCalledWith( + storedRouterStateStub + ); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/reducers/router.reducer.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/reducers/router.reducer.ts index 4376692c54..849590a0cc 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/reducers/router.reducer.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/router/state/reducers/router.reducer.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -8,19 +6,20 @@ /* eslint-disable arrow-body-style,prefer-arrow/prefer-arrow-functions */ import { - ROUTER_CANCEL, - ROUTER_ERROR, - ROUTER_NAVIGATION, - RouterCancelAction, - RouterErrorAction, - RouterNavigationAction + ROUTER_CANCEL, + ROUTER_ERROR, + ROUTER_NAVIGATION, + RouterCancelAction, + RouterErrorAction, + RouterNavigationAction } from '@ngrx/router-store'; import { RouterState, RouteState } from '../../model'; -type AcceptedActions = RouterNavigationAction | - RouterErrorAction | - RouterCancelAction; +type AcceptedActions = + | RouterNavigationAction + | RouterErrorAction + | RouterCancelAction; /** * ** Reducer for Router Actions. @@ -28,20 +27,23 @@ type AcceptedActions = RouterNavigationAction | * */ export function routerReducer( - state = RouterState.empty(), - action: AcceptedActions = { type: null, payload: null }) { - - const actionPayload = action.payload; - - switch (action.type) { - case ROUTER_NAVIGATION: - case ROUTER_ERROR: - case ROUTER_CANCEL: - const newState = RouterState.of(actionPayload.routerState, actionPayload.event.id); - newState.appendPrevious(state); - - return newState; - default: - return state; - } + state = RouterState.empty(), + action: AcceptedActions = { type: null, payload: null } +) { + const actionPayload = action.payload; + + switch (action.type) { + case ROUTER_NAVIGATION: + case ROUTER_ERROR: + case ROUTER_CANCEL: + const newState = RouterState.of( + actionPayload.routerState, + actionPayload.event.id + ); + newState.appendPrevious(state); + + return newState; + default: + return state; + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/event-handler-class.decorator.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/event-handler-class.decorator.ts index cd33dd1f32..9f9586c8da 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/event-handler-class.decorator.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/event-handler-class.decorator.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -50,80 +48,94 @@ import { SYSTEM_EVENTS_METADATA_KEY } from './models'; * */ export function SystemEventHandlerClass(): ClassDecorator { - // @ts-ignore - return InstanceType>(OriginConstructor: T): - (...args: ConstructorParameters) => InstanceType => { - - const originMetadataKeys = Reflect.getMetadataKeys(OriginConstructor); - const originMetadataRecords: SystemEventMetadataRecords = Reflect.getMetadata(SYSTEM_EVENTS_METADATA_KEY, OriginConstructor) ?? []; - const originOnDestroyRef: () => void = getOriginOnDestroyRef(OriginConstructor); - - let instance: InstanceType; - - const OverriddenConstructor = function(...args: ConstructorParameters): InstanceType { - instance = new OriginConstructor(...args); - - originMetadataRecords.forEach((r) => { - SystemEventHandlerRegistry.register>( - r.events, - r.handler, - instance, - r.filterExpression - ); - }); - - return instance; - }; - - OriginConstructor.prototype.ngOnDestroy = () => { - originMetadataRecords.forEach((r) => { - SystemEventHandlerRegistry.unregister( - r.events, - r.handler - ); - - if (originOnDestroyRef) { - originOnDestroyRef.call(instance); - } - }); - }; - - originMetadataKeys.forEach((key) => { - Reflect.defineMetadata(key, Reflect.getMetadata(key, OriginConstructor), OverriddenConstructor); - }); - - copyFromOriginToOverride(OriginConstructor, OverriddenConstructor); - - return OverriddenConstructor; - }; + // @ts-ignore + return InstanceType>( + OriginConstructor: T + ): ((...args: ConstructorParameters) => InstanceType) => { + const originMetadataKeys = Reflect.getMetadataKeys(OriginConstructor); + const originMetadataRecords: SystemEventMetadataRecords = + Reflect.getMetadata(SYSTEM_EVENTS_METADATA_KEY, OriginConstructor) ?? []; + const originOnDestroyRef: () => void = + getOriginOnDestroyRef(OriginConstructor); + + let instance: InstanceType; + + const OverriddenConstructor = function ( + ...args: ConstructorParameters + ): InstanceType { + instance = new OriginConstructor(...args); + + originMetadataRecords.forEach((r) => { + SystemEventHandlerRegistry.register>( + r.events, + r.handler, + instance, + r.filterExpression + ); + }); + + return instance; + }; + + OriginConstructor.prototype.ngOnDestroy = () => { + originMetadataRecords.forEach((r) => { + SystemEventHandlerRegistry.unregister(r.events, r.handler); + + if (originOnDestroyRef) { + originOnDestroyRef.call(instance); + } + }); + }; + + originMetadataKeys.forEach((key) => { + Reflect.defineMetadata( + key, + Reflect.getMetadata(key, OriginConstructor), + OverriddenConstructor + ); + }); + + copyFromOriginToOverride(OriginConstructor, OverriddenConstructor); + + return OverriddenConstructor; + }; } -const getOriginOnDestroyRef = InstanceType>(classRef: T): () => void | null => { - if (!classRef || !classRef.prototype) { - return null; - } +const getOriginOnDestroyRef = < + T extends new (...args: any[]) => InstanceType +>( + classRef: T +): (() => void | null) => { + if (!classRef || !classRef.prototype) { + return null; + } - if (classRef.prototype.ngOnDestroy) { - return classRef.prototype.ngOnDestroy as (() => void); - } + if (classRef.prototype.ngOnDestroy) { + return classRef.prototype.ngOnDestroy as () => void; + } - return getOriginOnDestroyRef(classRef.prototype); + return getOriginOnDestroyRef(classRef.prototype); }; -const copyFromOriginToOverride = InstanceType>( - OriginConstructor: T, - OverriddenConstructor: (...args: ConstructorParameters) => InstanceType +const copyFromOriginToOverride = < + T extends new (...args: any[]) => InstanceType +>( + OriginConstructor: T, + OverriddenConstructor: (...args: ConstructorParameters) => InstanceType ) => { - - CollectionsUtil.iterateClassStatics(OriginConstructor, (descriptor, key) => { - const overriddenPropertyDescriptor = CollectionsUtil.getObjectPropertyDescriptor(OverriddenConstructor, key); - if (overriddenPropertyDescriptor && !overriddenPropertyDescriptor.writable) { - return; - } - - OverriddenConstructor[key] = descriptor.value; - }); - - OverriddenConstructor.prototype = Object.create(OriginConstructor.prototype); - OverriddenConstructor.prototype.constructor = OverriddenConstructor; + CollectionsUtil.iterateClassStatics(OriginConstructor, (descriptor, key) => { + const overriddenPropertyDescriptor = + CollectionsUtil.getObjectPropertyDescriptor(OverriddenConstructor, key); + if ( + overriddenPropertyDescriptor && + !overriddenPropertyDescriptor.writable + ) { + return; + } + + OverriddenConstructor[key] = descriptor.value; + }); + + OverriddenConstructor.prototype = Object.create(OriginConstructor.prototype); + OverriddenConstructor.prototype.constructor = OverriddenConstructor; }; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/event-handler.decorator.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/event-handler.decorator.spec.ts index 7225ff7797..3dcc85973b 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/event-handler.decorator.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/event-handler.decorator.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -9,60 +7,73 @@ import { SystemEventHandler } from './event-handler.decorator'; import { SYSTEM_EVENTS_METADATA_KEY } from './models'; describe('SystemEventHandler', () => { - let event: string; - let event2: string; - // eslint-disable-next-line @typescript-eslint/ban-types - let constructor: Function; - // eslint-disable-next-line @typescript-eslint/ban-types - let target: { constructor: Function }; - let propertyKey: string; - let propertyKey2: string; - let descriptor: PropertyDescriptor; - let descriptor2: PropertyDescriptor; + let event: string; + let event2: string; + // eslint-disable-next-line @typescript-eslint/ban-types + let constructor: Function; + // eslint-disable-next-line @typescript-eslint/ban-types + let target: { constructor: Function }; + let propertyKey: string; + let propertyKey2: string; + let descriptor: PropertyDescriptor; + let descriptor2: PropertyDescriptor; - beforeEach(() => { - class TestClazz { - } + beforeEach(() => { + class TestClazz {} - event = 'SE_Register_User'; - event2 = 'SE_Unregister_User'; - constructor = TestClazz.prototype.constructor; - target = { constructor }; - propertyKey = '_eventHandlerRegister'; - propertyKey2 = 'eventHandleUnregister'; - descriptor = { value: () => Promise.resolve(true) }; - descriptor2 = { value: () => Promise.resolve(true) }; - }); + event = 'SE_Register_User'; + event2 = 'SE_Unregister_User'; + constructor = TestClazz.prototype.constructor; + target = { constructor }; + propertyKey = '_eventHandlerRegister'; + propertyKey2 = 'eventHandleUnregister'; + descriptor = { value: () => Promise.resolve(true) }; + descriptor2 = { value: () => Promise.resolve(true) }; + }); - it('should verify will record metadata with Reflect to Constructor', () => { - // Then 1 - expect(Reflect.hasMetadata(SYSTEM_EVENTS_METADATA_KEY, constructor)).toBeFalse(); + it('should verify will record metadata with Reflect to Constructor', () => { + // Then 1 + expect( + Reflect.hasMetadata(SYSTEM_EVENTS_METADATA_KEY, constructor) + ).toBeFalse(); - // When - SystemEventHandler(event, null)(target, propertyKey, descriptor); + // When + SystemEventHandler(event, null)(target, propertyKey, descriptor); - // Then 2 - expect(Reflect.hasMetadata(SYSTEM_EVENTS_METADATA_KEY, constructor)).toBeTrue(); - expect(Reflect.getMetadata(SYSTEM_EVENTS_METADATA_KEY, constructor)).toEqual([{ - handler: descriptor.value, - events: event, - filterExpression: null - }]); - }); + // Then 2 + expect( + Reflect.hasMetadata(SYSTEM_EVENTS_METADATA_KEY, constructor) + ).toBeTrue(); + expect( + Reflect.getMetadata(SYSTEM_EVENTS_METADATA_KEY, constructor) + ).toEqual([ + { + handler: descriptor.value, + events: event, + filterExpression: null + } + ]); + }); - it('should verify will add metadata on existing with Reflect to Constructor', () => { - // Then 1 - expect(Reflect.hasMetadata(SYSTEM_EVENTS_METADATA_KEY, constructor)).toBeFalse(); + it('should verify will add metadata on existing with Reflect to Constructor', () => { + // Then 1 + expect( + Reflect.hasMetadata(SYSTEM_EVENTS_METADATA_KEY, constructor) + ).toBeFalse(); - // When - SystemEventHandler(event, null)(target, propertyKey, descriptor); - SystemEventHandler(event2, null)(target, propertyKey2, descriptor2); + // When + SystemEventHandler(event, null)(target, propertyKey, descriptor); + SystemEventHandler(event2, null)(target, propertyKey2, descriptor2); - // Then 2 - expect(Reflect.hasMetadata(SYSTEM_EVENTS_METADATA_KEY, constructor)).toBeTrue(); - expect(Reflect.getMetadata(SYSTEM_EVENTS_METADATA_KEY, constructor)).toEqual([ - { handler: descriptor.value, events: event, filterExpression: null }, - { handler: descriptor2.value, events: event2, filterExpression: null } - ]); - }); + // Then 2 + expect( + Reflect.hasMetadata(SYSTEM_EVENTS_METADATA_KEY, constructor) + ).toBeTrue(); + expect( + Reflect.getMetadata(SYSTEM_EVENTS_METADATA_KEY, constructor) + ).toEqual([ + { handler: descriptor.value, events: event, filterExpression: null }, + { handler: descriptor2.value, events: event2, filterExpression: null } + ]); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/event-handler.decorator.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/event-handler.decorator.ts index 236b4a39fa..978c8c9924 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/event-handler.decorator.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/event-handler.decorator.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -15,7 +13,10 @@ import 'reflect-metadata'; import { Expression } from '../../../common'; import { SystemEvent } from '../event'; -import { SystemEventHandlerRef, SystemEventMetadataRecords } from '../dispatcher/models'; +import { + SystemEventHandlerRef, + SystemEventMetadataRecords +} from '../dispatcher/models'; import { SYSTEM_EVENTS_METADATA_KEY } from './models'; @@ -103,35 +104,49 @@ import { SYSTEM_EVENTS_METADATA_KEY } from './models'; * * */ -export function SystemEventHandler(knownEvents: SystemEvent | SystemEvent[], - filterExpression?: Expression): MethodDecorator { - return (target, propertyKey, descriptor) => { - if (!descriptor || !knownEvents) { - return; - } +export function SystemEventHandler( + knownEvents: SystemEvent | SystemEvent[], + filterExpression?: Expression +): MethodDecorator { + return (target, propertyKey, descriptor) => { + if (!descriptor || !knownEvents) { + return; + } - let metadataRecords: SystemEventMetadataRecords = []; + let metadataRecords: SystemEventMetadataRecords = []; - if (Reflect.hasMetadata(SYSTEM_EVENTS_METADATA_KEY, target.constructor)) { - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment - metadataRecords = Reflect.getMetadata(SYSTEM_EVENTS_METADATA_KEY, target.constructor); - metadataRecords.push({ - handler: (descriptor.value as unknown) as SystemEventHandlerRef, - events: knownEvents, - filterExpression - }); + if (Reflect.hasMetadata(SYSTEM_EVENTS_METADATA_KEY, target.constructor)) { + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment + metadataRecords = Reflect.getMetadata( + SYSTEM_EVENTS_METADATA_KEY, + target.constructor + ); + metadataRecords.push({ + handler: descriptor.value as unknown as SystemEventHandlerRef, + events: knownEvents, + filterExpression + }); - Reflect.defineMetadata(SYSTEM_EVENTS_METADATA_KEY, metadataRecords, target.constructor, propertyKey); + Reflect.defineMetadata( + SYSTEM_EVENTS_METADATA_KEY, + metadataRecords, + target.constructor, + propertyKey + ); - return; - } + return; + } - metadataRecords.push({ - handler: (descriptor.value as unknown) as SystemEventHandlerRef, - events: knownEvents, - filterExpression - }); + metadataRecords.push({ + handler: descriptor.value as unknown as SystemEventHandlerRef, + events: knownEvents, + filterExpression + }); - Reflect.defineMetadata(SYSTEM_EVENTS_METADATA_KEY, metadataRecords, target.constructor); - }; + Reflect.defineMetadata( + SYSTEM_EVENTS_METADATA_KEY, + metadataRecords, + target.constructor + ); + }; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/index.ts index bbb4bbda79..cd2b769644 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/models/event-decorator-helper.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/models/event-decorator-helper.ts index c9e64490e4..488bd7de2b 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/models/event-decorator-helper.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/models/event-decorator-helper.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -10,4 +8,5 @@ * * */ -export const SYSTEM_EVENTS_METADATA_KEY = '__taurus::shared::system::events::metadata__'; +export const SYSTEM_EVENTS_METADATA_KEY = + '__taurus::shared::system::events::metadata__'; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/models/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/models/index.ts index ee7097320d..94bcf7e3ca 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/models/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/decorator/models/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/event.dispatcher.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/event.dispatcher.spec.ts index 732e7729fd..6952fd82d3 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/event.dispatcher.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/event.dispatcher.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -14,127 +12,199 @@ import { SystemEventDispatcher } from './event.dispatcher'; import { SystemEventHandlerRef } from './models'; describe('SystemEventDispatcher', () => { - describe('Statics::', () => { - describe('Methods::()', () => { - describe('|post|', () => { - it('should verify will post NON-BLOCKING System Event to 2 Handlers', fakeAsync(() => { - // Given - const spyHandler1: jasmine.SpyObj<{ evaluate: SystemEventHandlerRef }> = jasmine.createSpyObj('handler1', ['evaluate']); - const spyHandler2: jasmine.SpyObj<{ evaluate: SystemEventHandlerRef }> = jasmine.createSpyObj('handler2', ['evaluate']); - const spyRegistryPrepared = spyOn(SystemEventHandlerRegistry, 'getPreparedArrayOfHandlers').and.returnValue([ - { handlerRef: spyHandler1.evaluate, handlerClassInstance: spyHandler1 }, - { handlerRef: spyHandler2.evaluate, handlerClassInstance: spyHandler2 } - ]); - const spyRegistryFind = spyOn(SystemEventHandlerRegistry, 'findHandlerByReference').and.returnValue({ - handlerRef: () => Promise.resolve(true), - handlerRecord: { - handlerRef: () => Promise.resolve(true), - handlerClassInstance: null, - handlerFilterExpression: null - }, - active: true - }); - const payload = {}; - - // When - SystemEventDispatcher.post(SE_NAVIGATE, payload); - - // Then - tick(100); - expect(spyRegistryPrepared).toHaveBeenCalled(); - expect(spyHandler1.evaluate).toHaveBeenCalledWith(payload, SE_NAVIGATE); - expect(spyHandler2.evaluate).toHaveBeenCalledWith(payload, SE_NAVIGATE); - expect(spyRegistryFind).toHaveBeenCalledTimes(2); - })); - - it('should verify will post NON-BLOCKING System Event to 1 Handler and will skip the second one', fakeAsync(() => { - // Given - const spyHandler1: jasmine.SpyObj<{ evaluate: SystemEventHandlerRef }> = jasmine.createSpyObj('handler1', ['evaluate']); - const spyHandler2: jasmine.SpyObj<{ evaluate: SystemEventHandlerRef }> = jasmine.createSpyObj('handler2', ['evaluate']); - const spyRegistryPrepared = spyOn(SystemEventHandlerRegistry, 'getPreparedArrayOfHandlers').and.returnValue([ - { handlerRef: spyHandler1.evaluate, handlerClassInstance: spyHandler1 }, - { handlerRef: spyHandler2.evaluate, handlerClassInstance: spyHandler2 } - ]); - const spyRegistryFind = spyOn(SystemEventHandlerRegistry, 'findHandlerByReference').and.returnValue({ - handlerRef: () => Promise.resolve(true), - handlerRecord: { - handlerRef: () => Promise.resolve(true), - handlerClassInstance: null, - handlerFilterExpression: null - }, - active: true - }); - const payload = {}; - - // When - SystemEventDispatcher.post(SE_NAVIGATE, payload, 1); - - // Then - tick(100); - expect(spyRegistryPrepared).toHaveBeenCalled(); - expect(spyHandler1.evaluate).toHaveBeenCalledWith(payload, SE_NAVIGATE); - expect(spyHandler2.evaluate).not.toHaveBeenCalled(); - expect(spyRegistryFind).toHaveBeenCalledTimes(1); - })); - }); - - describe('|send|', () => { - it('should verify will send BLOCKING System Event to 2 Handlers', fakeAsync(() => { - // Given - const spyHandler1: jasmine.SpyObj<{ evaluate: SystemEventHandlerRef }> = jasmine.createSpyObj('handler1', ['evaluate']); - const spyHandler2: jasmine.SpyObj<{ evaluate: SystemEventHandlerRef }> = jasmine.createSpyObj('handler2', ['evaluate']); - spyHandler1.evaluate.and.returnValue(Promise.resolve(true)); - spyHandler2.evaluate.and.returnValue(Promise.resolve(true)); - - const spyRegistryPrepared = spyOn(SystemEventHandlerRegistry, 'getPreparedArrayOfHandlers').and.returnValue([ - { handlerRef: spyHandler1.evaluate, handlerClassInstance: spyHandler1 }, - { handlerRef: spyHandler2.evaluate, handlerClassInstance: spyHandler2 } - ]); - const payload = {}; - - // When - SystemEventDispatcher - .send(SE_NAVIGATE, payload) - .then(() => { - // No-op. - }); - - tick(100); - - // Then - expect(spyRegistryPrepared).toHaveBeenCalled(); - expect(spyHandler1.evaluate).toHaveBeenCalledWith(payload, SE_NAVIGATE); - expect(spyHandler2.evaluate).toHaveBeenCalledWith(payload, SE_NAVIGATE); - })); - - it('should verify will send BLOCKING System Event to 1 Handler and will skip the second one', fakeAsync(() => { - // Given - const spyHandler1: jasmine.SpyObj<{ evaluate: SystemEventHandlerRef }> = jasmine.createSpyObj('handler1', ['evaluate']); - const spyHandler2: jasmine.SpyObj<{ evaluate: SystemEventHandlerRef }> = jasmine.createSpyObj('handler2', ['evaluate']); - spyHandler1.evaluate.and.returnValue(Promise.resolve(true)); - spyHandler2.evaluate.and.returnValue(Promise.resolve(true)); - - const spyRegistryPrepared = spyOn(SystemEventHandlerRegistry, 'getPreparedArrayOfHandlers').and.returnValue([ - { handlerRef: spyHandler1.evaluate, handlerClassInstance: spyHandler1 }, - { handlerRef: spyHandler2.evaluate, handlerClassInstance: spyHandler2 } - ]); - const payload = {}; - - // When - SystemEventDispatcher - .send(SE_NAVIGATE, payload, 1) - .then(() => { - // No-op. - }); - - tick(100); - - // Then - expect(spyRegistryPrepared).toHaveBeenCalled(); - expect(spyHandler1.evaluate).not.toHaveBeenCalled(); - expect(spyHandler2.evaluate).toHaveBeenCalledWith(payload, SE_NAVIGATE); - })); - }); - }); - }); + describe('Statics::', () => { + describe('Methods::()', () => { + describe('|post|', () => { + it('should verify will post NON-BLOCKING System Event to 2 Handlers', fakeAsync(() => { + // Given + const spyHandler1: jasmine.SpyObj<{ + evaluate: SystemEventHandlerRef; + }> = jasmine.createSpyObj('handler1', ['evaluate']); + const spyHandler2: jasmine.SpyObj<{ + evaluate: SystemEventHandlerRef; + }> = jasmine.createSpyObj('handler2', ['evaluate']); + const spyRegistryPrepared = spyOn( + SystemEventHandlerRegistry, + 'getPreparedArrayOfHandlers' + ).and.returnValue([ + { + handlerRef: spyHandler1.evaluate, + handlerClassInstance: spyHandler1 + }, + { + handlerRef: spyHandler2.evaluate, + handlerClassInstance: spyHandler2 + } + ]); + const spyRegistryFind = spyOn( + SystemEventHandlerRegistry, + 'findHandlerByReference' + ).and.returnValue({ + handlerRef: () => Promise.resolve(true), + handlerRecord: { + handlerRef: () => Promise.resolve(true), + handlerClassInstance: null, + handlerFilterExpression: null + }, + active: true + }); + const payload = {}; + + // When + SystemEventDispatcher.post(SE_NAVIGATE, payload); + + // Then + tick(100); + expect(spyRegistryPrepared).toHaveBeenCalled(); + expect(spyHandler1.evaluate).toHaveBeenCalledWith( + payload, + SE_NAVIGATE + ); + expect(spyHandler2.evaluate).toHaveBeenCalledWith( + payload, + SE_NAVIGATE + ); + expect(spyRegistryFind).toHaveBeenCalledTimes(2); + })); + + it('should verify will post NON-BLOCKING System Event to 1 Handler and will skip the second one', fakeAsync(() => { + // Given + const spyHandler1: jasmine.SpyObj<{ + evaluate: SystemEventHandlerRef; + }> = jasmine.createSpyObj('handler1', ['evaluate']); + const spyHandler2: jasmine.SpyObj<{ + evaluate: SystemEventHandlerRef; + }> = jasmine.createSpyObj('handler2', ['evaluate']); + const spyRegistryPrepared = spyOn( + SystemEventHandlerRegistry, + 'getPreparedArrayOfHandlers' + ).and.returnValue([ + { + handlerRef: spyHandler1.evaluate, + handlerClassInstance: spyHandler1 + }, + { + handlerRef: spyHandler2.evaluate, + handlerClassInstance: spyHandler2 + } + ]); + const spyRegistryFind = spyOn( + SystemEventHandlerRegistry, + 'findHandlerByReference' + ).and.returnValue({ + handlerRef: () => Promise.resolve(true), + handlerRecord: { + handlerRef: () => Promise.resolve(true), + handlerClassInstance: null, + handlerFilterExpression: null + }, + active: true + }); + const payload = {}; + + // When + SystemEventDispatcher.post(SE_NAVIGATE, payload, 1); + + // Then + tick(100); + expect(spyRegistryPrepared).toHaveBeenCalled(); + expect(spyHandler1.evaluate).toHaveBeenCalledWith( + payload, + SE_NAVIGATE + ); + expect(spyHandler2.evaluate).not.toHaveBeenCalled(); + expect(spyRegistryFind).toHaveBeenCalledTimes(1); + })); + }); + + describe('|send|', () => { + it('should verify will send BLOCKING System Event to 2 Handlers', fakeAsync(() => { + // Given + const spyHandler1: jasmine.SpyObj<{ + evaluate: SystemEventHandlerRef; + }> = jasmine.createSpyObj('handler1', ['evaluate']); + const spyHandler2: jasmine.SpyObj<{ + evaluate: SystemEventHandlerRef; + }> = jasmine.createSpyObj('handler2', ['evaluate']); + spyHandler1.evaluate.and.returnValue(Promise.resolve(true)); + spyHandler2.evaluate.and.returnValue(Promise.resolve(true)); + + const spyRegistryPrepared = spyOn( + SystemEventHandlerRegistry, + 'getPreparedArrayOfHandlers' + ).and.returnValue([ + { + handlerRef: spyHandler1.evaluate, + handlerClassInstance: spyHandler1 + }, + { + handlerRef: spyHandler2.evaluate, + handlerClassInstance: spyHandler2 + } + ]); + const payload = {}; + + // When + SystemEventDispatcher.send(SE_NAVIGATE, payload).then(() => { + // No-op. + }); + + tick(100); + + // Then + expect(spyRegistryPrepared).toHaveBeenCalled(); + expect(spyHandler1.evaluate).toHaveBeenCalledWith( + payload, + SE_NAVIGATE + ); + expect(spyHandler2.evaluate).toHaveBeenCalledWith( + payload, + SE_NAVIGATE + ); + })); + + it('should verify will send BLOCKING System Event to 1 Handler and will skip the second one', fakeAsync(() => { + // Given + const spyHandler1: jasmine.SpyObj<{ + evaluate: SystemEventHandlerRef; + }> = jasmine.createSpyObj('handler1', ['evaluate']); + const spyHandler2: jasmine.SpyObj<{ + evaluate: SystemEventHandlerRef; + }> = jasmine.createSpyObj('handler2', ['evaluate']); + spyHandler1.evaluate.and.returnValue(Promise.resolve(true)); + spyHandler2.evaluate.and.returnValue(Promise.resolve(true)); + + const spyRegistryPrepared = spyOn( + SystemEventHandlerRegistry, + 'getPreparedArrayOfHandlers' + ).and.returnValue([ + { + handlerRef: spyHandler1.evaluate, + handlerClassInstance: spyHandler1 + }, + { + handlerRef: spyHandler2.evaluate, + handlerClassInstance: spyHandler2 + } + ]); + const payload = {}; + + // When + SystemEventDispatcher.send(SE_NAVIGATE, payload, 1).then(() => { + // No-op. + }); + + tick(100); + + // Then + expect(spyRegistryPrepared).toHaveBeenCalled(); + expect(spyHandler1.evaluate).not.toHaveBeenCalled(); + expect(spyHandler2.evaluate).toHaveBeenCalledWith( + payload, + SE_NAVIGATE + ); + })); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/event.dispatcher.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/event.dispatcher.ts index 37d10651d4..f7017f45ea 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/event.dispatcher.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/event.dispatcher.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -46,112 +44,160 @@ import { SystemEventHandlerRecord } from './models'; * */ export class SystemEventDispatcher { - /** - * ** Method to post System Event. - * - * - NON-BLOCKING execution. - * - Execution is non-blocking, e.g. it is executed in queue using setTimeout of 0. - * - If third parameters is provided it will execute as many handlers as it is request. - * - e.g. 1 or 2 or N and will skip the others. - */ - static post(eventId: SystemEvent, payload: any, handlersToExecute: number = null) { - const preparedHandlers = SystemEventHandlerRegistry.getPreparedArrayOfHandlers(eventId); - - let executedHandlers = 0; - - for (const handlerRecord of preparedHandlers) { - if (!SystemEventDispatcher.executeExpressionFilter(handlerRecord, eventId, payload)) { - return; - } - - executedHandlers++; - - const isHandlerActive = (e: SystemEvent) => SystemEventHandlerRegistry.findHandlerByReference( - e, - handlerRecord.handlerRef, - handlerRecord.handlerClassInstance - ).active; - - setTimeout(() => { - if (!isHandlerActive(eventId) && !isHandlerActive(SE_ALL_EVENTS)) { - return; - } - - handlerRecord.handlerRef.call(handlerRecord.handlerClassInstance, payload, eventId); - }, 0); - - if (CollectionsUtil.isNumber(handlersToExecute) && executedHandlers >= handlersToExecute) { - break; - } - } - } - - /** - * ** Method to send System Event. - * - * - BLOCKING execution. - * - Execution is blocking, e.g. it is achieved using Promises, and every handler must return Promise. - * - If third parameters is provided it will execute as many handlers as it is request. - * - e.g. 1 or 2 or N and will return the flow to the invoker. - */ - static send(eventId: SystemEvent, payload: any, handlersToExecute: number = null): Promise { - const preparedHandlers = SystemEventHandlerRegistry.getPreparedArrayOfHandlers(eventId, true); - - return SystemEventDispatcher.executeSendCommand( - preparedHandlers, - eventId, - payload, - handlersToExecute - ); - } - - /** - * ** Execute send command and handle Promises from handlers. - */ - private static executeSendCommand(handlers: SystemEventHandlerRecord[], - eventId: SystemEvent, - payload: any, - handlersToExecute: number = null, - executedHandlers = 0): Promise { - - if (!handlers.length) { - return Promise.resolve(true); - } - - if (CollectionsUtil.isNumber(handlersToExecute) && handlersToExecute === executedHandlers) { - return Promise.resolve(true); - } - - const handlerForExecution = handlers.pop(); - - if (!SystemEventDispatcher.executeExpressionFilter(handlerForExecution, eventId, payload)) { - return SystemEventDispatcher.executeSendCommand(handlers, eventId, payload, handlersToExecute, executedHandlers); - } - - // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-return - return handlerForExecution.handlerRef - .call(handlerForExecution.handlerClassInstance, payload, eventId) - .then(() => SystemEventDispatcher - .executeSendCommand(handlers, eventId, payload, handlersToExecute, executedHandlers + 1)) - .catch(() => Promise.reject(false)); - } - - /** - * ** Execute Expression filter for Handler before execution. - */ - private static executeExpressionFilter(handlerRecord: SystemEventHandlerRecord, - eventId: SystemEvent, - payload: any): boolean { - - const filterExpression = handlerRecord.handlerFilterExpression; - - if (CollectionsUtil.isNil(filterExpression)) { - return true; - } - - return handlerRecord.handlerFilterExpression.evaluate( - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment - SystemEventComparable.of({ eventId, payload }) - ); - } + /** + * ** Method to post System Event. + * + * - NON-BLOCKING execution. + * - Execution is non-blocking, e.g. it is executed in queue using setTimeout of 0. + * - If third parameters is provided it will execute as many handlers as it is request. + * - e.g. 1 or 2 or N and will skip the others. + */ + static post( + eventId: SystemEvent, + payload: any, + handlersToExecute: number = null + ) { + const preparedHandlers = + SystemEventHandlerRegistry.getPreparedArrayOfHandlers(eventId); + + let executedHandlers = 0; + + for (const handlerRecord of preparedHandlers) { + if ( + !SystemEventDispatcher.executeExpressionFilter( + handlerRecord, + eventId, + payload + ) + ) { + return; + } + + executedHandlers++; + + const isHandlerActive = (e: SystemEvent) => + SystemEventHandlerRegistry.findHandlerByReference( + e, + handlerRecord.handlerRef, + handlerRecord.handlerClassInstance + ).active; + + setTimeout(() => { + if (!isHandlerActive(eventId) && !isHandlerActive(SE_ALL_EVENTS)) { + return; + } + + handlerRecord.handlerRef.call( + handlerRecord.handlerClassInstance, + payload, + eventId + ); + }, 0); + + if ( + CollectionsUtil.isNumber(handlersToExecute) && + executedHandlers >= handlersToExecute + ) { + break; + } + } + } + + /** + * ** Method to send System Event. + * + * - BLOCKING execution. + * - Execution is blocking, e.g. it is achieved using Promises, and every handler must return Promise. + * - If third parameters is provided it will execute as many handlers as it is request. + * - e.g. 1 or 2 or N and will return the flow to the invoker. + */ + static send( + eventId: SystemEvent, + payload: any, + handlersToExecute: number = null + ): Promise { + const preparedHandlers = + SystemEventHandlerRegistry.getPreparedArrayOfHandlers(eventId, true); + + return SystemEventDispatcher.executeSendCommand( + preparedHandlers, + eventId, + payload, + handlersToExecute + ); + } + + /** + * ** Execute send command and handle Promises from handlers. + */ + private static executeSendCommand( + handlers: SystemEventHandlerRecord[], + eventId: SystemEvent, + payload: any, + handlersToExecute: number = null, + executedHandlers = 0 + ): Promise { + if (!handlers.length) { + return Promise.resolve(true); + } + + if ( + CollectionsUtil.isNumber(handlersToExecute) && + handlersToExecute === executedHandlers + ) { + return Promise.resolve(true); + } + + const handlerForExecution = handlers.pop(); + + if ( + !SystemEventDispatcher.executeExpressionFilter( + handlerForExecution, + eventId, + payload + ) + ) { + return SystemEventDispatcher.executeSendCommand( + handlers, + eventId, + payload, + handlersToExecute, + executedHandlers + ); + } + + // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-return + return handlerForExecution.handlerRef + .call(handlerForExecution.handlerClassInstance, payload, eventId) + .then(() => + SystemEventDispatcher.executeSendCommand( + handlers, + eventId, + payload, + handlersToExecute, + executedHandlers + 1 + ) + ) + .catch(() => Promise.reject(false)); + } + + /** + * ** Execute Expression filter for Handler before execution. + */ + private static executeExpressionFilter( + handlerRecord: SystemEventHandlerRecord, + eventId: SystemEvent, + payload: any + ): boolean { + const filterExpression = handlerRecord.handlerFilterExpression; + + if (CollectionsUtil.isNil(filterExpression)) { + return true; + } + + return handlerRecord.handlerFilterExpression.evaluate( + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment + SystemEventComparable.of({ eventId, payload }) + ); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/index.ts index 58f53223ee..a6c6c1b0d9 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/models/event-dispatcher.model.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/models/event-dispatcher.model.ts index 71de77cc95..cb6d0582d9 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/models/event-dispatcher.model.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/models/event-dispatcher.model.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -12,34 +10,41 @@ import { Expression } from '../../../../common'; import { SystemEvent } from '../../event'; export type SystemEventMetadataRecord = { - handler: SystemEventHandlerRef; - events: SystemEvent | SystemEvent[]; - filterExpression: Expression; + handler: SystemEventHandlerRef; + events: SystemEvent | SystemEvent[]; + filterExpression: Expression; }; /** * ** Type for one Handler interface. */ -export type SystemEventHandlerRef = (payload: any, eventId?: SystemEvent) => Promise; +export type SystemEventHandlerRef = ( + payload: any, + eventId?: SystemEvent +) => Promise; /** * ** Event Handler record in registry. */ export type SystemEventHandlerRecord = { - /** - * ** Reference to Handler instance. - */ - handlerRef: SystemEventHandlerRef; - - /** - * ** Reference to the object where Handler belongs, for context purpose. - */ - handlerClassInstance?: Record; - - /** - * ** Expression that filters if some Event should be dispatch to the Handler reference or not. - */ - handlerFilterExpression?: Expression; + /** + * ** Reference to Handler instance. + */ + handlerRef: SystemEventHandlerRef; + + /** + * ** Reference to the object where Handler belongs, for context purpose. + */ + handlerClassInstance?: Record; + + /** + * ** Expression that filters if some Event should be dispatch to the Handler reference or not. + */ + handlerFilterExpression?: Expression; +}; +export type SystemEventHandlerFindByRef = { + active: boolean; + handlerRecord: SystemEventHandlerRecord; + handlerRef: SystemEventHandlerRef; }; -export type SystemEventHandlerFindByRef = { active: boolean; handlerRecord: SystemEventHandlerRecord; handlerRef: SystemEventHandlerRef }; export type SystemEventMetadataRecords = SystemEventMetadataRecord[]; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/models/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/models/index.ts index ebacdda6a0..ccd38cfc99 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/models/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/models/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/registry/event-handler.registry.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/registry/event-handler.registry.spec.ts index 3dc86ff736..d55d5c35f6 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/registry/event-handler.registry.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/registry/event-handler.registry.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -7,245 +5,287 @@ import { SystemEventHandlerRegistry } from './event-handler.registry'; -class TestClazz { -} +class TestClazz {} describe('SystemEventHandlerRegistry', () => { - describe('Statics::', () => { - describe('Getters::()', () => { - describe('|instance|', () => { - it('should verify will return always same Repository instance', () => { - // When - const r1 = SystemEventHandlerRegistry.instance; - const r2 = SystemEventHandlerRegistry.instance; - const r3 = SystemEventHandlerRegistry.instance; - - // Then - expect(r2).toBe(r1); - expect(r3).toBe(r2); - }); - }); - }); - - describe('Methods::()', () => { - describe('|register|', () => { - it('should verify will execute register and execute methods in Registry instance', () => { - // Given - // @ts-ignore - const spyRegister = spyOn(SystemEventHandlerRegistry.instance, 'register').and.callThrough(); - // @ts-ignore - const spyExecute = spyOn(SystemEventHandlerRegistry.instance, 'execute').and.callThrough(); - const handler = () => Promise.resolve(true); - const handlerClassInstance = {}; - - // When - SystemEventHandlerRegistry.register( - 'SE_Send_Email', - handler, - handlerClassInstance - ); - - // Then - // @ts-ignore - expect(spyRegister).toHaveBeenCalledWith('SE_Send_Email', handler, handlerClassInstance, null); - // @ts-ignore - expect(spyExecute).toHaveBeenCalledWith('SE_Send_Email', handler, jasmine.any(Function), handlerClassInstance, null); - }); - - it('should verify will register handler in Registry', () => { - // Given - const event = 'SE_Create_Job'; - const handlerRef = () => Promise.resolve(false); - const clazzInstance = new TestClazz(); - - // When - SystemEventHandlerRegistry.register( - event, - handlerRef, - clazzInstance - ); - - // Then - // eslint-disable-next-line @typescript-eslint/dot-notation - const registry = SystemEventHandlerRegistry.instance['handlers']; - const handlers = registry.get(event); - expect(Array.from(handlers.values())).toContain({ - handlerRef, - handlerFilterExpression: null, - handlerClassInstance: clazzInstance - }); - }); - }); - - describe('|unregister|', () => { - it('should verify will execute unregister and execute methods in Registry instance', () => { - // Given - // @ts-ignore - const spyUnregister = spyOn(SystemEventHandlerRegistry.instance, 'unregister').and.callThrough(); - // @ts-ignore - const spyExecute = spyOn(SystemEventHandlerRegistry.instance, 'execute').and.callThrough(); - const event = 'SE_Delete_Job'; - const handler = () => Promise.resolve(true); - - // When - SystemEventHandlerRegistry.unregister( - event, - handler - ); - - // Then - // @ts-ignore - expect(spyUnregister).toHaveBeenCalledWith(event, handler); - // @ts-ignore - expect(spyExecute).toHaveBeenCalledWith(event, handler, jasmine.any(Function)); - }); - - it('should verify will remove handler in Registry after it is added', () => { - // Given - // eslint-disable-next-line @typescript-eslint/dot-notation - const registry = SystemEventHandlerRegistry.instance['handlers']; - const event = 'SE_Update_Job'; - const handlerRef = () => Promise.resolve(true); - const clazzInstance = new TestClazz(); - - // When 1 - SystemEventHandlerRegistry.register( - event, - handlerRef, - clazzInstance - ); - - // Then 1 - const handlers = registry.get(event); - expect(Array.from(handlers.values())).toContain({ - handlerRef, - handlerFilterExpression: null, - handlerClassInstance: clazzInstance - }); - - // When 2 - SystemEventHandlerRegistry.unregister(event, handlerRef); - - // Then 2 - // eslint-disable-next-line @typescript-eslint/dot-notation - expect(Array.from(handlers.values())).not.toContain({ - handlerRef, - handlerFilterExpression: null, - handlerClassInstance: clazzInstance - }); - }); - }); - - describe('|findHandlerByReference|', () => { - it('should verify will find Handler by its reference', () => { - // Given - const event = 'SE_Notify_Users'; - const handlerRef = () => Promise.resolve(true); - const clazzInstance = new TestClazz(); - - // When - SystemEventHandlerRegistry.register( - event, - handlerRef, - clazzInstance - ); - const record = SystemEventHandlerRegistry.findHandlerByReference(event, handlerRef, clazzInstance); - - // Then - expect(record).toEqual({ - active: true, - handlerRef, - handlerRecord: { - handlerRef, - handlerFilterExpression: null, - handlerClassInstance: clazzInstance - } - }); - }); - }); - - describe('|getPreparedArrayOfHandlers|', () => { - it('should verify will return empty Array when there is no Handlers for Event', () => { - // Given - const event = 'SE_Clean_Jobs'; - - // When - const handlers = SystemEventHandlerRegistry.getPreparedArrayOfHandlers(event); - - // Then - expect(handlers).toEqual([]); - }); - - it('should verify will return 3 handlers for given Event', () => { - // Given - const event = 'SE_Log_Incident'; - const handlerRef1 = () => Promise.resolve(true); - const handlerRef2 = () => Promise.resolve(true); - const handlerRef3 = () => Promise.resolve(true); - const clazzInstance = new TestClazz(); - - SystemEventHandlerRegistry.register( - event, - handlerRef1, - clazzInstance - ); - SystemEventHandlerRegistry.register( - event, - handlerRef2, - clazzInstance - ); - SystemEventHandlerRegistry.register( - event, - handlerRef3, - clazzInstance - ); - - // When - const handlers = SystemEventHandlerRegistry.getPreparedArrayOfHandlers(event); - - // Then - expect(handlers).toEqual([ - { handlerRef: handlerRef1, handlerClassInstance: clazzInstance, handlerFilterExpression: null }, - { handlerRef: handlerRef2, handlerClassInstance: clazzInstance, handlerFilterExpression: null }, - { handlerRef: handlerRef3, handlerClassInstance: clazzInstance, handlerFilterExpression: null } - ]); - }); - - it('should verify will return 3 handlers in reverse order for given Event', () => { - // Given - const event = 'SE_Clean_Session'; - const handlerRef11 = () => Promise.resolve(true); - const handlerRef22 = () => Promise.resolve(true); - const handlerRef33 = () => Promise.resolve(true); - const clazzInstance = new TestClazz(); - - SystemEventHandlerRegistry.register( - event, - handlerRef11, - clazzInstance - ); - SystemEventHandlerRegistry.register( - event, - handlerRef22, - clazzInstance - ); - SystemEventHandlerRegistry.register( - event, - handlerRef33, - clazzInstance - ); - - // When - const handlers = SystemEventHandlerRegistry.getPreparedArrayOfHandlers(event, true); - - // Then - expect(handlers).toEqual([ - { handlerRef: handlerRef33, handlerClassInstance: clazzInstance, handlerFilterExpression: null }, - { handlerRef: handlerRef22, handlerClassInstance: clazzInstance, handlerFilterExpression: null }, - { handlerRef: handlerRef11, handlerClassInstance: clazzInstance, handlerFilterExpression: null } - ]); - }); - }); - }); - }); + describe('Statics::', () => { + describe('Getters::()', () => { + describe('|instance|', () => { + it('should verify will return always same Repository instance', () => { + // When + const r1 = SystemEventHandlerRegistry.instance; + const r2 = SystemEventHandlerRegistry.instance; + const r3 = SystemEventHandlerRegistry.instance; + + // Then + expect(r2).toBe(r1); + expect(r3).toBe(r2); + }); + }); + }); + + describe('Methods::()', () => { + describe('|register|', () => { + it('should verify will execute register and execute methods in Registry instance', () => { + // Given + // @ts-ignore + const spyRegister = spyOn( + SystemEventHandlerRegistry.instance, + 'register' + ).and.callThrough(); + // @ts-ignore + const spyExecute = spyOn( + SystemEventHandlerRegistry.instance, + 'execute' + ).and.callThrough(); + const handler = () => Promise.resolve(true); + const handlerClassInstance = {}; + + // When + SystemEventHandlerRegistry.register( + 'SE_Send_Email', + handler, + handlerClassInstance + ); + + // Then + // @ts-ignore + expect(spyRegister).toHaveBeenCalledWith( + 'SE_Send_Email', + handler, + handlerClassInstance, + null + ); + // @ts-ignore + expect(spyExecute).toHaveBeenCalledWith( + 'SE_Send_Email', + handler, + jasmine.any(Function), + handlerClassInstance, + null + ); + }); + + it('should verify will register handler in Registry', () => { + // Given + const event = 'SE_Create_Job'; + const handlerRef = () => Promise.resolve(false); + const clazzInstance = new TestClazz(); + + // When + SystemEventHandlerRegistry.register(event, handlerRef, clazzInstance); + + // Then + // eslint-disable-next-line @typescript-eslint/dot-notation + const registry = SystemEventHandlerRegistry.instance['handlers']; + const handlers = registry.get(event); + expect(Array.from(handlers.values())).toContain({ + handlerRef, + handlerFilterExpression: null, + handlerClassInstance: clazzInstance + }); + }); + }); + + describe('|unregister|', () => { + it('should verify will execute unregister and execute methods in Registry instance', () => { + // Given + // @ts-ignore + const spyUnregister = spyOn( + SystemEventHandlerRegistry.instance, + 'unregister' + ).and.callThrough(); + // @ts-ignore + const spyExecute = spyOn( + SystemEventHandlerRegistry.instance, + 'execute' + ).and.callThrough(); + const event = 'SE_Delete_Job'; + const handler = () => Promise.resolve(true); + + // When + SystemEventHandlerRegistry.unregister(event, handler); + + // Then + // @ts-ignore + expect(spyUnregister).toHaveBeenCalledWith(event, handler); + // @ts-ignore + expect(spyExecute).toHaveBeenCalledWith( + event, + handler, + jasmine.any(Function) + ); + }); + + it('should verify will remove handler in Registry after it is added', () => { + // Given + // eslint-disable-next-line @typescript-eslint/dot-notation + const registry = SystemEventHandlerRegistry.instance['handlers']; + const event = 'SE_Update_Job'; + const handlerRef = () => Promise.resolve(true); + const clazzInstance = new TestClazz(); + + // When 1 + SystemEventHandlerRegistry.register(event, handlerRef, clazzInstance); + + // Then 1 + const handlers = registry.get(event); + expect(Array.from(handlers.values())).toContain({ + handlerRef, + handlerFilterExpression: null, + handlerClassInstance: clazzInstance + }); + + // When 2 + SystemEventHandlerRegistry.unregister(event, handlerRef); + + // Then 2 + // eslint-disable-next-line @typescript-eslint/dot-notation + expect(Array.from(handlers.values())).not.toContain({ + handlerRef, + handlerFilterExpression: null, + handlerClassInstance: clazzInstance + }); + }); + }); + + describe('|findHandlerByReference|', () => { + it('should verify will find Handler by its reference', () => { + // Given + const event = 'SE_Notify_Users'; + const handlerRef = () => Promise.resolve(true); + const clazzInstance = new TestClazz(); + + // When + SystemEventHandlerRegistry.register(event, handlerRef, clazzInstance); + const record = SystemEventHandlerRegistry.findHandlerByReference( + event, + handlerRef, + clazzInstance + ); + + // Then + expect(record).toEqual({ + active: true, + handlerRef, + handlerRecord: { + handlerRef, + handlerFilterExpression: null, + handlerClassInstance: clazzInstance + } + }); + }); + }); + + describe('|getPreparedArrayOfHandlers|', () => { + it('should verify will return empty Array when there is no Handlers for Event', () => { + // Given + const event = 'SE_Clean_Jobs'; + + // When + const handlers = + SystemEventHandlerRegistry.getPreparedArrayOfHandlers(event); + + // Then + expect(handlers).toEqual([]); + }); + + it('should verify will return 3 handlers for given Event', () => { + // Given + const event = 'SE_Log_Incident'; + const handlerRef1 = () => Promise.resolve(true); + const handlerRef2 = () => Promise.resolve(true); + const handlerRef3 = () => Promise.resolve(true); + const clazzInstance = new TestClazz(); + + SystemEventHandlerRegistry.register( + event, + handlerRef1, + clazzInstance + ); + SystemEventHandlerRegistry.register( + event, + handlerRef2, + clazzInstance + ); + SystemEventHandlerRegistry.register( + event, + handlerRef3, + clazzInstance + ); + + // When + const handlers = + SystemEventHandlerRegistry.getPreparedArrayOfHandlers(event); + + // Then + expect(handlers).toEqual([ + { + handlerRef: handlerRef1, + handlerClassInstance: clazzInstance, + handlerFilterExpression: null + }, + { + handlerRef: handlerRef2, + handlerClassInstance: clazzInstance, + handlerFilterExpression: null + }, + { + handlerRef: handlerRef3, + handlerClassInstance: clazzInstance, + handlerFilterExpression: null + } + ]); + }); + + it('should verify will return 3 handlers in reverse order for given Event', () => { + // Given + const event = 'SE_Clean_Session'; + const handlerRef11 = () => Promise.resolve(true); + const handlerRef22 = () => Promise.resolve(true); + const handlerRef33 = () => Promise.resolve(true); + const clazzInstance = new TestClazz(); + + SystemEventHandlerRegistry.register( + event, + handlerRef11, + clazzInstance + ); + SystemEventHandlerRegistry.register( + event, + handlerRef22, + clazzInstance + ); + SystemEventHandlerRegistry.register( + event, + handlerRef33, + clazzInstance + ); + + // When + const handlers = + SystemEventHandlerRegistry.getPreparedArrayOfHandlers(event, true); + + // Then + expect(handlers).toEqual([ + { + handlerRef: handlerRef33, + handlerClassInstance: clazzInstance, + handlerFilterExpression: null + }, + { + handlerRef: handlerRef22, + handlerClassInstance: clazzInstance, + handlerFilterExpression: null + }, + { + handlerRef: handlerRef11, + handlerClassInstance: clazzInstance, + handlerFilterExpression: null + } + ]); + }); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/registry/event-handler.registry.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/registry/event-handler.registry.ts index 5c0273bb04..5397dc68cb 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/registry/event-handler.registry.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/registry/event-handler.registry.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -12,7 +10,11 @@ import { CollectionsUtil } from '../../../../utils'; import { Expression } from '../../../../common'; import { SE_ALL_EVENTS, SystemEvent } from '../../event'; -import { SystemEventHandlerFindByRef, SystemEventHandlerRecord, SystemEventHandlerRef } from '../models'; +import { + SystemEventHandlerFindByRef, + SystemEventHandlerRecord, + SystemEventHandlerRef +} from '../models'; /** * ** Registry for Events Handlers. @@ -20,239 +22,282 @@ import { SystemEventHandlerFindByRef, SystemEventHandlerRecord, SystemEventHandl * */ export class SystemEventHandlerRegistry { - /** - * ** Returns Singleton instance. - */ - static get instance(): SystemEventHandlerRegistry { - if (CollectionsUtil.isNil(SystemEventHandlerRegistry._instance)) { - SystemEventHandlerRegistry._instance = new SystemEventHandlerRegistry(); - } - - return SystemEventHandlerRegistry._instance; - } - - private static _instance: SystemEventHandlerRegistry; - - private readonly handlers: Map> = new Map>(); - - /** - * ** Constructor. - * - * - Private constructor to make it Singleton. - */ - private constructor() { - // No-op. - } - - /** - * ** Register Handler for SystemEvent/s. - */ - static register(knownEvents: SystemEvent | SystemEvent[], - handlerRef: SystemEventHandlerRef, - handlerClassInstance: T, - handlerFilterExpression: Expression = null): boolean { - return SystemEventHandlerRegistry - .instance - .register( - knownEvents, - handlerRef, - handlerClassInstance, - handlerFilterExpression - ); - } - - /** - * ** Unregister Handler from registry. - * - * - It should be done in ngOnDestroy() method in Services/Components to avoid potential memory leaks. - */ - static unregister(knownEvents: SystemEvent | SystemEvent[], handlerRef: SystemEventHandlerRef): boolean { - return SystemEventHandlerRegistry - .instance - .unregister(knownEvents, handlerRef); - } - - /** - * ** Find Handler by reference looking through the Registry. - */ - static findHandlerByReference(eventId: SystemEvent, - handlerRef: SystemEventHandlerRef, - handlerClassInstance?: any): SystemEventHandlerFindByRef { - return SystemEventHandlerRegistry - .instance - .findHandlerByReference(eventId, handlerRef, handlerClassInstance); - } - - /** - * ** Prepare array of handlers for execution of post or send. - */ - static getPreparedArrayOfHandlers(eventId: SystemEvent, reversed = false): SystemEventHandlerRecord[] { - return SystemEventHandlerRegistry - .instance - .getPreparedArrayOfHandlers(eventId, reversed); - } - - private register(knownEvents: SystemEvent | SystemEvent[], - handlerRef: SystemEventHandlerRef, - handlerClassInstance: T, - handlerFilterExpression: Expression = null): boolean { - - return this.execute( - knownEvents, - handlerRef, - // eslint-disable-next-line @typescript-eslint/no-unsafe-argument - this.executeRegister.bind(this), - handlerClassInstance, - handlerFilterExpression - ); - } - - private unregister(knownEvents: SystemEvent | SystemEvent[], handlerRef: SystemEventHandlerRef): boolean { - return this.execute( - knownEvents, - handlerRef, - // eslint-disable-next-line @typescript-eslint/no-unsafe-argument - this.executeUnregister.bind(this) - ); - } - - private findHandlerByReference(eventId: SystemEvent, - handlerRef: SystemEventHandlerRef, - handlerClassInstance?: any): SystemEventHandlerFindByRef { - - const handlers = this.handlers.has(eventId) - ? this.handlers.get(eventId) - : new Set(); - - const handlerRecord = Array.from(handlers.values()).find((r) => { - let isEqual = r.handlerRef === handlerRef; - - if (handlerClassInstance) { - isEqual = isEqual && (r.handlerClassInstance === handlerClassInstance); - } - - return isEqual; - }); - - return { - active: CollectionsUtil.isDefined(handlerRecord), - handlerRecord, - handlerRef: CollectionsUtil.isDefined(handlerRecord) - ? handlerRecord.handlerRef - : undefined - }; - } - - private getPreparedArrayOfHandlers(eventId: SystemEvent, reversed = false): SystemEventHandlerRecord[] { - const specialHandlers: SystemEventHandlerRecord[] = this.getSpecialHandlers(); - - if (!this.handlers.has(eventId)) { - return specialHandlers; - } - - return reversed - ? Array.from(this.handlers.get(eventId).values()).concat(specialHandlers).reverse() - : Array.from(this.handlers.get(eventId).values()).concat(specialHandlers); - } - - /** - * ** Generic abstraction for Register and Unregister handlers. - */ - private execute(knownEvents: SystemEvent | SystemEvent[], - handlerRef: SystemEventHandlerRef, - executeMethodRef: (...arg: any[]) => any, - handlerClassInstance?: any, - handlerFilterExpression?: Expression): boolean { - - const preparedData = this.prepareEventNames(knownEvents); - - if (!preparedData.status || !CollectionsUtil.isFunction(handlerRef)) { - return false; - } - - try { - preparedData.eventNames.forEach((eventId) => { - executeMethodRef( - eventId, - handlerRef, - handlerClassInstance, - handlerFilterExpression - ); - }); - - return true; - } catch (_e) { - return false; - } - } - - /** - * ** Evaluate Handler register. - */ - private executeRegister(eventId: SystemEvent, - handlerRef: SystemEventHandlerRef, - handlerClassInstance: any, - handlerFilterExpression: Expression): boolean { - - if (!this.handlers.has(eventId)) { - this.handlers.set(eventId, new Set()); - } - - if (this.findHandlerByReference(eventId, handlerRef, handlerClassInstance).active) { - return false; - } - - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment - this.handlers.get(eventId).add({ handlerRef, handlerClassInstance, handlerFilterExpression }); - - return true; - } - - /** - * ** Evaluate Handler unregister. - */ - private executeUnregister(eventId: SystemEvent, handlerRef: SystemEventHandlerRef): boolean { - if (!this.handlers.has(eventId)) { - return false; - } - - const findHandlerResponse = this.findHandlerByReference(eventId, handlerRef); - - if (!findHandlerResponse.active) { - return false; - } - - this.handlers.get(eventId).delete(findHandlerResponse.handlerRecord); - - return true; - } - - /** - * ** Prepares Event names in Array of strings format. - */ - private prepareEventNames(knownEvents: SystemEvent | SystemEvent[]): { status: boolean; eventNames?: SystemEvent[] } { - if (!CollectionsUtil.isString(knownEvents) && !CollectionsUtil.isArray(knownEvents)) { - return { - status: false - }; - } - - return { - status: true, - eventNames: CollectionsUtil.isString(knownEvents) - ? [knownEvents] - : knownEvents - }; - } - - /** - * ** Returns special Handlers. - */ - private getSpecialHandlers(): SystemEventHandlerRecord[] { - if (!this.handlers.has(SE_ALL_EVENTS)) { - return []; - } - - return Array.from(this.handlers.get(SE_ALL_EVENTS).values()); - } + /** + * ** Returns Singleton instance. + */ + static get instance(): SystemEventHandlerRegistry { + if (CollectionsUtil.isNil(SystemEventHandlerRegistry._instance)) { + SystemEventHandlerRegistry._instance = new SystemEventHandlerRegistry(); + } + + return SystemEventHandlerRegistry._instance; + } + + private static _instance: SystemEventHandlerRegistry; + + private readonly handlers: Map> = + new Map>(); + + /** + * ** Constructor. + * + * - Private constructor to make it Singleton. + */ + private constructor() { + // No-op. + } + + /** + * ** Register Handler for SystemEvent/s. + */ + static register( + knownEvents: SystemEvent | SystemEvent[], + handlerRef: SystemEventHandlerRef, + handlerClassInstance: T, + handlerFilterExpression: Expression = null + ): boolean { + return SystemEventHandlerRegistry.instance.register( + knownEvents, + handlerRef, + handlerClassInstance, + handlerFilterExpression + ); + } + + /** + * ** Unregister Handler from registry. + * + * - It should be done in ngOnDestroy() method in Services/Components to avoid potential memory leaks. + */ + static unregister( + knownEvents: SystemEvent | SystemEvent[], + handlerRef: SystemEventHandlerRef + ): boolean { + return SystemEventHandlerRegistry.instance.unregister( + knownEvents, + handlerRef + ); + } + + /** + * ** Find Handler by reference looking through the Registry. + */ + static findHandlerByReference( + eventId: SystemEvent, + handlerRef: SystemEventHandlerRef, + handlerClassInstance?: any + ): SystemEventHandlerFindByRef { + return SystemEventHandlerRegistry.instance.findHandlerByReference( + eventId, + handlerRef, + handlerClassInstance + ); + } + + /** + * ** Prepare array of handlers for execution of post or send. + */ + static getPreparedArrayOfHandlers( + eventId: SystemEvent, + reversed = false + ): SystemEventHandlerRecord[] { + return SystemEventHandlerRegistry.instance.getPreparedArrayOfHandlers( + eventId, + reversed + ); + } + + private register( + knownEvents: SystemEvent | SystemEvent[], + handlerRef: SystemEventHandlerRef, + handlerClassInstance: T, + handlerFilterExpression: Expression = null + ): boolean { + return this.execute( + knownEvents, + handlerRef, + // eslint-disable-next-line @typescript-eslint/no-unsafe-argument + this.executeRegister.bind(this), + handlerClassInstance, + handlerFilterExpression + ); + } + + private unregister( + knownEvents: SystemEvent | SystemEvent[], + handlerRef: SystemEventHandlerRef + ): boolean { + return this.execute( + knownEvents, + handlerRef, + // eslint-disable-next-line @typescript-eslint/no-unsafe-argument + this.executeUnregister.bind(this) + ); + } + + private findHandlerByReference( + eventId: SystemEvent, + handlerRef: SystemEventHandlerRef, + handlerClassInstance?: any + ): SystemEventHandlerFindByRef { + const handlers = this.handlers.has(eventId) + ? this.handlers.get(eventId) + : new Set(); + + const handlerRecord = Array.from(handlers.values()).find((r) => { + let isEqual = r.handlerRef === handlerRef; + + if (handlerClassInstance) { + isEqual = isEqual && r.handlerClassInstance === handlerClassInstance; + } + + return isEqual; + }); + + return { + active: CollectionsUtil.isDefined(handlerRecord), + handlerRecord, + handlerRef: CollectionsUtil.isDefined(handlerRecord) + ? handlerRecord.handlerRef + : undefined + }; + } + + private getPreparedArrayOfHandlers( + eventId: SystemEvent, + reversed = false + ): SystemEventHandlerRecord[] { + const specialHandlers: SystemEventHandlerRecord[] = + this.getSpecialHandlers(); + + if (!this.handlers.has(eventId)) { + return specialHandlers; + } + + return reversed + ? Array.from(this.handlers.get(eventId).values()) + .concat(specialHandlers) + .reverse() + : Array.from(this.handlers.get(eventId).values()).concat(specialHandlers); + } + + /** + * ** Generic abstraction for Register and Unregister handlers. + */ + private execute( + knownEvents: SystemEvent | SystemEvent[], + handlerRef: SystemEventHandlerRef, + executeMethodRef: (...arg: any[]) => any, + handlerClassInstance?: any, + handlerFilterExpression?: Expression + ): boolean { + const preparedData = this.prepareEventNames(knownEvents); + + if (!preparedData.status || !CollectionsUtil.isFunction(handlerRef)) { + return false; + } + + try { + preparedData.eventNames.forEach((eventId) => { + executeMethodRef( + eventId, + handlerRef, + handlerClassInstance, + handlerFilterExpression + ); + }); + + return true; + } catch (_e) { + return false; + } + } + + /** + * ** Evaluate Handler register. + */ + private executeRegister( + eventId: SystemEvent, + handlerRef: SystemEventHandlerRef, + handlerClassInstance: any, + handlerFilterExpression: Expression + ): boolean { + if (!this.handlers.has(eventId)) { + this.handlers.set(eventId, new Set()); + } + + if ( + this.findHandlerByReference(eventId, handlerRef, handlerClassInstance) + .active + ) { + return false; + } + + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment + this.handlers + .get(eventId) + .add({ handlerRef, handlerClassInstance, handlerFilterExpression }); + + return true; + } + + /** + * ** Evaluate Handler unregister. + */ + private executeUnregister( + eventId: SystemEvent, + handlerRef: SystemEventHandlerRef + ): boolean { + if (!this.handlers.has(eventId)) { + return false; + } + + const findHandlerResponse = this.findHandlerByReference( + eventId, + handlerRef + ); + + if (!findHandlerResponse.active) { + return false; + } + + this.handlers.get(eventId).delete(findHandlerResponse.handlerRecord); + + return true; + } + + /** + * ** Prepares Event names in Array of strings format. + */ + private prepareEventNames(knownEvents: SystemEvent | SystemEvent[]): { + status: boolean; + eventNames?: SystemEvent[]; + } { + if ( + !CollectionsUtil.isString(knownEvents) && + !CollectionsUtil.isArray(knownEvents) + ) { + return { + status: false + }; + } + + return { + status: true, + eventNames: CollectionsUtil.isString(knownEvents) + ? [knownEvents] + : knownEvents + }; + } + + /** + * ** Returns special Handlers. + */ + private getSpecialHandlers(): SystemEventHandlerRecord[] { + if (!this.handlers.has(SE_ALL_EVENTS)) { + return []; + } + + return Array.from(this.handlers.get(SE_ALL_EVENTS).values()); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/registry/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/registry/index.ts index a7bd46eb94..80e30479c3 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/registry/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/dispatcher/registry/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/index.ts index af30aa746b..94487a79e2 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event-filter.expression.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event-filter.expression.spec.ts index 796b81c9a7..1dccddeaf7 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event-filter.expression.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event-filter.expression.spec.ts @@ -1,147 +1,150 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 */ -import { Comparable, ComparableImpl, Equal, Predicate } from '../../../../common'; +import { + Comparable, + ComparableImpl, + Equal, + Predicate +} from '../../../../common'; import { SystemEventFilterExpression } from './event-filter.expression'; describe('SystemEventFilterExpression', () => { - let v1: any; - let v2: any; - let v3: any; - let v4: any; - - let c1: Comparable; - let c2: Comparable; - let c3: Comparable; - let c4: Comparable; - - let p1: Predicate; - let p2: Predicate; - let p3: Predicate; - let p4: Predicate; - - beforeEach(() => { - v1 = 'Taurus'; - v2 = 'Taurus'; - v3 = 'VDK'; - v4 = 'Taurus'; - - c1 = ComparableImpl.of(v1); - c2 = ComparableImpl.of(v2); - c3 = ComparableImpl.of(v3); - c4 = ComparableImpl.of(v4); - - p1 = Equal.of(c1); - p2 = Equal.of(c2); - p3 = Equal.of(c3); - p4 = Equal.of(c4); - }); - - it('should verify instance is created', () => { - // When - const r = new SystemEventFilterExpression(p1); - - // Then - expect(r).toBeDefined(); - }); - - it('should verify Predicates are correctly assigned', () => { - // When - const r = new SystemEventFilterExpression(p1, p2, p3); - - // Then - expect(r.predicates).toEqual([p1, p2, p3]); - }); - - it('should verify is no Predicates given will create empty Expression', () => { - // When - const r1 = SystemEventFilterExpression.of(); - const r2 = new SystemEventFilterExpression(); - - // Then - expect(r1).toBeDefined(); - expect(r1.predicates).toEqual([]); - expect(r2).toBeDefined(); - expect(r2.predicates).toEqual([]); - }); - - describe('Statics::', () => { - describe('Methods::()', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // When - const r = SystemEventFilterExpression.of(p1, p2, p3, p4); - - // Then - expect(r).toBeDefined(); - expect(r).toBeInstanceOf(SystemEventFilterExpression); - expect(r.predicates).toEqual([p1, p2, p3, p4]); - }); - }); - }); - }); - - describe('Methods::()', () => { - describe('|addPredicate|', () => { - it('should verify will add new Predicates to existing one', () => { - // Given - const e = SystemEventFilterExpression.of(p1); - - // Then 1 - expect(e.predicates).toEqual([p1]); - - // When - e.addPredicate(p3, p4); - e.addPredicate(p2); - - // Then 2 - expect(e.predicates).toEqual([p1, p3, p4, p2]); - }); - }); - - describe('|hasPredicates|', () => { - it('should verify will return true if there is Predicates in Expression, otherwise false', () => { - // Given - const e1 = SystemEventFilterExpression.of(); - const e2 = SystemEventFilterExpression.of(p1, p2); - - // When - const r1 = e1.hasPredicates(); - const r2 = e2.hasPredicates(); - - // Then - expect(r1).toBeFalse(); - expect(r2).toBeTrue(); - }); - }); - - describe('|evaluate|', () => { - it('should verify will return true only when all predicates return true', () => { - // Given - const e = SystemEventFilterExpression.of(p1, p2); - - // When - const r = e.evaluate(c4); - - // Then - expect(r).toBeTrue(); - }); - - it('should verify will return false if one of the Predicates return false', () => { - // Given - const e = SystemEventFilterExpression.of(p1, p2, p3); - - // When - const r = e.evaluate(c4); - - // Then - expect(r).toBeFalse(); - }); - }); - }); + let v1: any; + let v2: any; + let v3: any; + let v4: any; + + let c1: Comparable; + let c2: Comparable; + let c3: Comparable; + let c4: Comparable; + + let p1: Predicate; + let p2: Predicate; + let p3: Predicate; + let p4: Predicate; + + beforeEach(() => { + v1 = 'Taurus'; + v2 = 'Taurus'; + v3 = 'VDK'; + v4 = 'Taurus'; + + c1 = ComparableImpl.of(v1); + c2 = ComparableImpl.of(v2); + c3 = ComparableImpl.of(v3); + c4 = ComparableImpl.of(v4); + + p1 = Equal.of(c1); + p2 = Equal.of(c2); + p3 = Equal.of(c3); + p4 = Equal.of(c4); + }); + + it('should verify instance is created', () => { + // When + const r = new SystemEventFilterExpression(p1); + + // Then + expect(r).toBeDefined(); + }); + + it('should verify Predicates are correctly assigned', () => { + // When + const r = new SystemEventFilterExpression(p1, p2, p3); + + // Then + expect(r.predicates).toEqual([p1, p2, p3]); + }); + + it('should verify is no Predicates given will create empty Expression', () => { + // When + const r1 = SystemEventFilterExpression.of(); + const r2 = new SystemEventFilterExpression(); + + // Then + expect(r1).toBeDefined(); + expect(r1.predicates).toEqual([]); + expect(r2).toBeDefined(); + expect(r2.predicates).toEqual([]); + }); + + describe('Statics::', () => { + describe('Methods::()', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // When + const r = SystemEventFilterExpression.of(p1, p2, p3, p4); + + // Then + expect(r).toBeDefined(); + expect(r).toBeInstanceOf(SystemEventFilterExpression); + expect(r.predicates).toEqual([p1, p2, p3, p4]); + }); + }); + }); + }); + + describe('Methods::()', () => { + describe('|addPredicate|', () => { + it('should verify will add new Predicates to existing one', () => { + // Given + const e = SystemEventFilterExpression.of(p1); + + // Then 1 + expect(e.predicates).toEqual([p1]); + + // When + e.addPredicate(p3, p4); + e.addPredicate(p2); + + // Then 2 + expect(e.predicates).toEqual([p1, p3, p4, p2]); + }); + }); + + describe('|hasPredicates|', () => { + it('should verify will return true if there is Predicates in Expression, otherwise false', () => { + // Given + const e1 = SystemEventFilterExpression.of(); + const e2 = SystemEventFilterExpression.of(p1, p2); + + // When + const r1 = e1.hasPredicates(); + const r2 = e2.hasPredicates(); + + // Then + expect(r1).toBeFalse(); + expect(r2).toBeTrue(); + }); + }); + + describe('|evaluate|', () => { + it('should verify will return true only when all predicates return true', () => { + // Given + const e = SystemEventFilterExpression.of(p1, p2); + + // When + const r = e.evaluate(c4); + + // Then + expect(r).toBeTrue(); + }); + + it('should verify will return false if one of the Predicates return false', () => { + // Given + const e = SystemEventFilterExpression.of(p1, p2, p3); + + // When + const r = e.evaluate(c4); + + // Then + expect(r).toBeFalse(); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event-filter.expression.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event-filter.expression.ts index 4e3c27f65d..01c09fe98e 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event-filter.expression.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event-filter.expression.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -13,44 +11,43 @@ import { Comparable, Expression, Predicate } from '../../../../common'; * */ export class SystemEventFilterExpression implements Expression { - /** - * @inheritDoc - */ - public readonly predicates: Predicate[]; - - /** - * ** Constructor. - */ - constructor(...predicates: Predicate[]) { - this.predicates = predicates ?? []; - } - - /** - * ** Factory method. - */ - static of(...predicates: Predicate[]): SystemEventFilterExpression { - return new SystemEventFilterExpression(...predicates); - } - - /** - * ** Add Predicates to Expression. - */ - addPredicate(...predicates: Predicate[]): void { - this.predicates.push(...predicates); - } - - /** - * ** Returns value that reflects if there is any Predicate inside the Expression (SystemEventFilter). - */ - hasPredicates(): boolean { - return this.predicates.length > 0; - } - - /** - * @inheritDoc - */ - evaluate(comparable?: Comparable): boolean { - return this.predicates - .every((p) => p.evaluate(comparable)); - } + /** + * @inheritDoc + */ + public readonly predicates: Predicate[]; + + /** + * ** Constructor. + */ + constructor(...predicates: Predicate[]) { + this.predicates = predicates ?? []; + } + + /** + * ** Factory method. + */ + static of(...predicates: Predicate[]): SystemEventFilterExpression { + return new SystemEventFilterExpression(...predicates); + } + + /** + * ** Add Predicates to Expression. + */ + addPredicate(...predicates: Predicate[]): void { + this.predicates.push(...predicates); + } + + /** + * ** Returns value that reflects if there is any Predicate inside the Expression (SystemEventFilter). + */ + hasPredicates(): boolean { + return this.predicates.length > 0; + } + + /** + * @inheritDoc + */ + evaluate(comparable?: Comparable): boolean { + return this.predicates.every((p) => p.evaluate(comparable)); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event-helper.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event-helper.ts index b7c1d54424..1c96696136 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event-helper.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event-helper.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event.codes.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event.codes.ts index f57106b0fa..23535380cb 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event.codes.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event.codes.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event.comparable.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event.comparable.spec.ts index 3be2b233f4..f0e4bcbfc4 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event.comparable.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event.comparable.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -10,157 +8,157 @@ import { Comparable } from '../../../../common/interfaces'; import { SystemEventComparable } from './event.comparable'; class ComparableStub implements Comparable { - public readonly value: any; + public readonly value: any; - constructor(value: any) { - this.value = value; - } + constructor(value: any) { + this.value = value; + } - compare(_comparable: Comparable): number { - return 0; - } + compare(_comparable: Comparable): number { + return 0; + } - equal(_comparable: Comparable): boolean { - return true; - } + equal(_comparable: Comparable): boolean { + return true; + } - like(_comparable: Comparable): boolean { - return true; - } + like(_comparable: Comparable): boolean { + return true; + } - notEqual(_comparable: Comparable): boolean { - return false; - } + notEqual(_comparable: Comparable): boolean { + return false; + } - isNil(): boolean { - return false; - } + isNil(): boolean { + return false; + } - notNil(): boolean { - return true; - } + notNil(): boolean { + return true; + } - greaterThan(_comparable: Comparable): boolean { - return false; - } + greaterThan(_comparable: Comparable): boolean { + return false; + } - greaterThanInclusive(_comparable: Comparable): boolean { - return false; - } + greaterThanInclusive(_comparable: Comparable): boolean { + return false; + } - lessThan(_comparable: Comparable): boolean { - return false; - } + lessThan(_comparable: Comparable): boolean { + return false; + } - lessThanInclusive(_comparable: Comparable): boolean { - return false; - } + lessThanInclusive(_comparable: Comparable): boolean { + return false; + } } describe('SystemEventComparable', () => { - it('should verify instance is created', () => { - // Given - const eventId = 'VDK'; - const payload = {}; - - // When - const instance = new SystemEventComparable({ eventId, payload }); - - // Then - expect(instance).toBeDefined(); - }); - - it('should verify value is correctly assigned', () => { - // Given - const eventId = 'VDK'; - const payload = {}; - const value = { eventId, payload }; - - // When - const instance = new SystemEventComparable(value); - - // Then - expect(instance.value).toBe(value); - }); - - describe('Statics::', () => { - describe('Methods::()', () => { - describe('|of|', () => { - it('should verify factory method will create instance', () => { - // Given - const eventId = 'VDK'; - const payload = {}; - const value = { eventId, payload }; - - // When - const instance = SystemEventComparable.of(value); - - // Then - expect(instance).toBeDefined(); - expect(instance).toBeInstanceOf(SystemEventComparable); - }); - }); - }); - }); - - describe('Methods::()', () => { - let v1: { eventId: string; payload: unknown }; - let v2: { eventId: string; payload: unknown }; - let v3: { eventId: string; payload: unknown }; - let v4: { eventId: string; payload: unknown }; - - let c1: SystemEventComparable; - let c2: SystemEventComparable; - let c3: SystemEventComparable; - let c4: SystemEventComparable; - - beforeEach(() => { - v1 = { eventId: 'Taurus', payload: { t: 10 } }; - v2 = { eventId: 'VDK', payload: { t: 100 } }; - v3 = { eventId: 'Test', payload: { t: 30 } }; - v4 = { eventId: 'Taurus', payload: { t: 10 } }; - - c1 = SystemEventComparable.of(v1); - c2 = SystemEventComparable.of(v2); - c3 = SystemEventComparable.of(v3); - c4 = SystemEventComparable.of(v4); - }); - - describe('|compare|', () => { - it('should verify will return 0 for equal', () => { - // When - const comparison = c1.compare(c4); - - // Then - expect(comparison).toEqual(0); - }); - - it('should verify will return -1 for greaterThan', () => { - // When - const comparison = c2.compare(c1); - - // Then - expect(comparison).toEqual(-1); - }); - - it('should verify will return -1 for lessThan', () => { - // When - const comparison = c2.compare(c3); - - // Then - expect(comparison).toEqual(-1); - }); - - it('should verify will return -1 given comparable is not instance of the current Constructor', () => { - // Given - const c10 = new ComparableStub(v2); - - // When - const comparison = c1.compare(c10); - - // Then - expect(comparison).toEqual(-1); - }); - }); - }); + it('should verify instance is created', () => { + // Given + const eventId = 'VDK'; + const payload = {}; + + // When + const instance = new SystemEventComparable({ eventId, payload }); + + // Then + expect(instance).toBeDefined(); + }); + + it('should verify value is correctly assigned', () => { + // Given + const eventId = 'VDK'; + const payload = {}; + const value = { eventId, payload }; + + // When + const instance = new SystemEventComparable(value); + + // Then + expect(instance.value).toBe(value); + }); + + describe('Statics::', () => { + describe('Methods::()', () => { + describe('|of|', () => { + it('should verify factory method will create instance', () => { + // Given + const eventId = 'VDK'; + const payload = {}; + const value = { eventId, payload }; + + // When + const instance = SystemEventComparable.of(value); + + // Then + expect(instance).toBeDefined(); + expect(instance).toBeInstanceOf(SystemEventComparable); + }); + }); + }); + }); + + describe('Methods::()', () => { + let v1: { eventId: string; payload: unknown }; + let v2: { eventId: string; payload: unknown }; + let v3: { eventId: string; payload: unknown }; + let v4: { eventId: string; payload: unknown }; + + let c1: SystemEventComparable; + let c2: SystemEventComparable; + let c3: SystemEventComparable; + let c4: SystemEventComparable; + + beforeEach(() => { + v1 = { eventId: 'Taurus', payload: { t: 10 } }; + v2 = { eventId: 'VDK', payload: { t: 100 } }; + v3 = { eventId: 'Test', payload: { t: 30 } }; + v4 = { eventId: 'Taurus', payload: { t: 10 } }; + + c1 = SystemEventComparable.of(v1); + c2 = SystemEventComparable.of(v2); + c3 = SystemEventComparable.of(v3); + c4 = SystemEventComparable.of(v4); + }); + + describe('|compare|', () => { + it('should verify will return 0 for equal', () => { + // When + const comparison = c1.compare(c4); + + // Then + expect(comparison).toEqual(0); + }); + + it('should verify will return -1 for greaterThan', () => { + // When + const comparison = c2.compare(c1); + + // Then + expect(comparison).toEqual(-1); + }); + + it('should verify will return -1 for lessThan', () => { + // When + const comparison = c2.compare(c3); + + // Then + expect(comparison).toEqual(-1); + }); + + it('should verify will return -1 given comparable is not instance of the current Constructor', () => { + // Given + const c10 = new ComparableStub(v2); + + // When + const comparison = c1.compare(c10); + + // Then + expect(comparison).toEqual(-1); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event.comparable.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event.comparable.ts index 8d33d31100..b26071af69 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event.comparable.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/event.comparable.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -16,35 +14,43 @@ import { SystemEvent } from './event-helper'; * * */ -export class SystemEventComparable extends ComparableImpl<{ eventId: SystemEvent; payload: unknown }> { - /** - * ** Constructor. - */ - constructor(value: { eventId: string; payload: unknown }) { - super(value); - } - - /** - * ** Factory method. - */ - static override of(value: { eventId: string; payload: unknown }): SystemEventComparable { - return new SystemEventComparable(value); - } - - /** - * @inheritDoc - */ - override compare(comparable: Comparable): number { - if (comparable instanceof SystemEventComparable) { - const evaluateSecondStatement = () => this.value.payload > comparable.value.payload ? - 1 : - -1; - - return CollectionsUtil.isEqual(this.value.payload, comparable.value.payload) ? - 0 : - evaluateSecondStatement(); - } else { - return -1; - } - } +export class SystemEventComparable extends ComparableImpl<{ + eventId: SystemEvent; + payload: unknown; +}> { + /** + * ** Constructor. + */ + constructor(value: { eventId: string; payload: unknown }) { + super(value); + } + + /** + * ** Factory method. + */ + static override of(value: { + eventId: string; + payload: unknown; + }): SystemEventComparable { + return new SystemEventComparable(value); + } + + /** + * @inheritDoc + */ + override compare(comparable: Comparable): number { + if (comparable instanceof SystemEventComparable) { + const evaluateSecondStatement = () => + this.value.payload > comparable.value.payload ? 1 : -1; + + return CollectionsUtil.isEqual( + this.value.payload, + comparable.value.payload + ) + ? 0 + : evaluateSecondStatement(); + } else { + return -1; + } + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/index.ts index 600c82d32a..66ffae16d6 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/event/models/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/index.ts index fa95660c4d..bc0cbd50cd 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/public-api.ts index a959d2330b..a86cd69cba 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/system-events/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -7,4 +5,10 @@ export { SystemEventHandler, SystemEventHandlerClass } from './decorator'; export { SystemEventDispatcher } from './dispatcher'; -export { SE_NAVIGATE, SE_ALL_EVENTS, SystemEvent, SystemEventFilterExpression, SystemEventComparable } from './event'; +export { + SE_NAVIGATE, + SE_ALL_EVENTS, + SystemEvent, + SystemEventFilterExpression, + SystemEventComparable +} from './event'; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/taurus-shared-core.module.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/taurus-shared-core.module.ts index e211cb8466..aeb0f3aa2f 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/taurus-shared-core.module.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/taurus-shared-core.module.ts @@ -1,11 +1,14 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 */ -import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core'; +import { + ModuleWithProviders, + NgModule, + Optional, + SkipSelf +} from '@angular/core'; import { CookieService } from 'ngx-cookie-service'; @@ -13,27 +16,30 @@ import { NavigationService } from './navigation'; @NgModule({}) export class TaurusSharedCoreModule { - /** - * ** Constructor. - */ - constructor(@Optional() @SkipSelf() readonly taurusSharedCoreModule: TaurusSharedCoreModule) { - if (taurusSharedCoreModule) { - throw new Error('TaurusSharedCoreModule is already loaded. Import only once in root Module'); - } - } + /** + * ** Constructor. + */ + constructor( + @Optional() + @SkipSelf() + readonly taurusSharedCoreModule: TaurusSharedCoreModule + ) { + if (taurusSharedCoreModule) { + throw new Error( + 'TaurusSharedCoreModule is already loaded. Import only once in root Module' + ); + } + } - /** - * ** Provides TaurusSharedCore and all Services related to Taurus Core. - * - * - Should be execute once for entire project. - */ - static forRoot(): ModuleWithProviders { - return { - ngModule: TaurusSharedCoreModule, - providers: [ - CookieService, - NavigationService - ] - }; - } + /** + * ** Provides TaurusSharedCore and all Services related to Taurus Core. + * + * - Should be execute once for entire project. + */ + static forRoot(): ModuleWithProviders { + return { + ngModule: TaurusSharedCoreModule, + providers: [CookieService, NavigationService] + }; + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/url-state-manager/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/url-state-manager/index.ts index 7d58315c43..3500428c58 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/url-state-manager/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/url-state-manager/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/url-state-manager/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/url-state-manager/public-api.ts index 5908b4978b..042ff36e6a 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/url-state-manager/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/url-state-manager/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/url-state-manager/url-state.manager.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/url-state-manager/url-state.manager.ts index 1e3bf01d4a..3a3ea376fc 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/core/url-state-manager/url-state.manager.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/core/url-state-manager/url-state.manager.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -12,9 +10,9 @@ import { Location } from '@angular/common'; import { SE_NAVIGATE, SystemEventDispatcher } from '../system-events'; export interface StateManagerParamValue { - key: string; - value: string; - position: number; + key: string; + value: string; + position: number; } /** @@ -24,227 +22,229 @@ export interface StateManagerParamValue { * - Provides ability to serialize current state as URL href. */ export class URLStateManager { - /** - * ** Store value if URL Params State mutated since previous navigation. - */ - public isParamsStateMutated = false; - - /** - * ** Store value if URL QueryParams State mutated since previous navigation. - */ - public isQueryParamsStateMutated = false; - - private readonly params: Map; - private readonly queryParams: Map; - private readonly locationHref: string; - - /** - * ** Constructor. - */ - constructor(public baseURL: string, - public urlLocation: Location) { - - this.params = new Map(); - this.queryParams = new Map(); - - this.locationHref = this.urlLocation.path(); - } - - /** - * ** Returns current Browser URL href. - */ - get URL(): string { - if (this.baseURL) { - return `${ this.baseURL }${ this.getParamsToString() }${ this.getQueryParamsToString() }`; - } - - return null; - } - - /** - * ** Apply current URL state to Browser URl. - */ - locationToURL(): void { - const browserCurrUrl = window.location.href; - - if (browserCurrUrl.endsWith(this.URL)) { - return; - } - - this.isParamsStateMutated = false; - - this.urlLocation.go(this.URL); - } - - /** - * ** Navigate through Angular Router with set URL state. - */ - navigateToUrl(): Promise { - const browserCurrUrl = window.location.href; - - if (browserCurrUrl.endsWith(this.URL)) { - return Promise.resolve(false); - } - - this.isQueryParamsStateMutated = false; - - return SystemEventDispatcher.send( - SE_NAVIGATE, - { - url: this.buildUrlWithParams(), - extras: { - queryParams: this.getQueryParamsAsMap() - } - }, - 1 - ); - } - - /** - * ** Set query param to URL state. - */ - setQueryParam(key: string, value: string, position = 1): void { - this.isQueryParamsStateMutated = true; - - if (value) { - this.queryParams.set(key, { key, value, position }); - } else { - this.removeQueryParam(key); - } - } - - /** - * ** Returns query param value for given key. - */ - getQueryParam(key: string): string { - if (this.queryParams.has(key)) { - return this.queryParams.get(key).value; - } - - return null; - } - - /** - * ** Removes query param from URL state. - */ - removeQueryParam(key: string): void { - if (this.queryParams.has(key)) { - this.isQueryParamsStateMutated = true; - - this.queryParams.delete(key); - } - } - - /** - * ** Clear stored queryParams. - */ - clearQueryParams(): void { - this.queryParams.clear(); - } - - /** - * ** Set param to URL state. - */ - setParam(key: string, value: string, position = 1): void { - this.isParamsStateMutated = true; - - if (value) { - this.params.set(key, { key, value, position }); - } else { - this.removeParam(key); - } - } - - /** - * ** Returns param value for given key. - */ - getParam(key: string): string { - if (this.params.has(key)) { - return this.params.get(key).value; - } - - return null; - } - - /** - * ** Removes query param from URL state. - */ - removeParam(key: string): void { - if (this.params.has(key)) { - this.isParamsStateMutated = true; - - this.params.delete(key); - } - } - - /** - * ** Clear stored params. - */ - clearParams(): void { - this.params.clear(); - } - - /** - * ** Returns serialized params in string. - */ - getParamsToString(): string { - let paramString = ''; - - this.getSortedByPosition(this.params).forEach((p) => { - paramString += `/${ p.value }`; - }); - - return paramString; - } - - /** - * ** Returns serialized queryParams in string. - */ - getQueryParamsToString(): string { - const sortedParams = this.getSortedByPosition(this.queryParams); - - let paramString = ''; - - if (sortedParams.length > 0) { - paramString = `?${ sortedParams[0].key }=${ sortedParams[0].value }`; - - for (let i = 1; i < sortedParams.length; i++) { - const p = sortedParams[i]; - paramString += `&${ p.key }=${ p.value }`; - } - } - - return paramString; - } - - /** - * ** Returns query params in Map format. - */ - getQueryParamsAsMap(): { [key: string]: string } { - const sortedParams = this.getSortedByPosition(this.queryParams); - const paramsMap = {}; - - for (const paramsPair of sortedParams) { - paramsMap[paramsPair.key] = paramsPair.value; - } - - return paramsMap; - } - - /** - * ** Build url from base and provided params. - */ - buildUrlWithParams(): string { - if (this.baseURL) { - return `${ this.baseURL }${ this.getParamsToString() }`; - } - - return null; - } - - private getSortedByPosition(values: Map): StateManagerParamValue[] { - return Array.from(values.entries()) - .sort((p1, p2) => p1[1].position - p2[1].position) - .map((e) => e[1]); - } + /** + * ** Store value if URL Params State mutated since previous navigation. + */ + public isParamsStateMutated = false; + + /** + * ** Store value if URL QueryParams State mutated since previous navigation. + */ + public isQueryParamsStateMutated = false; + + private readonly params: Map; + private readonly queryParams: Map; + private readonly locationHref: string; + + /** + * ** Constructor. + */ + constructor(public baseURL: string, public urlLocation: Location) { + this.params = new Map(); + this.queryParams = new Map(); + + this.locationHref = this.urlLocation.path(); + } + + /** + * ** Returns current Browser URL href. + */ + get URL(): string { + if (this.baseURL) { + return `${ + this.baseURL + }${this.getParamsToString()}${this.getQueryParamsToString()}`; + } + + return null; + } + + /** + * ** Apply current URL state to Browser URl. + */ + locationToURL(): void { + const browserCurrUrl = window.location.href; + + if (browserCurrUrl.endsWith(this.URL)) { + return; + } + + this.isParamsStateMutated = false; + + this.urlLocation.go(this.URL); + } + + /** + * ** Navigate through Angular Router with set URL state. + */ + navigateToUrl(): Promise { + const browserCurrUrl = window.location.href; + + if (browserCurrUrl.endsWith(this.URL)) { + return Promise.resolve(false); + } + + this.isQueryParamsStateMutated = false; + + return SystemEventDispatcher.send( + SE_NAVIGATE, + { + url: this.buildUrlWithParams(), + extras: { + queryParams: this.getQueryParamsAsMap() + } + }, + 1 + ); + } + + /** + * ** Set query param to URL state. + */ + setQueryParam(key: string, value: string, position = 1): void { + this.isQueryParamsStateMutated = true; + + if (value) { + this.queryParams.set(key, { key, value, position }); + } else { + this.removeQueryParam(key); + } + } + + /** + * ** Returns query param value for given key. + */ + getQueryParam(key: string): string { + if (this.queryParams.has(key)) { + return this.queryParams.get(key).value; + } + + return null; + } + + /** + * ** Removes query param from URL state. + */ + removeQueryParam(key: string): void { + if (this.queryParams.has(key)) { + this.isQueryParamsStateMutated = true; + + this.queryParams.delete(key); + } + } + + /** + * ** Clear stored queryParams. + */ + clearQueryParams(): void { + this.queryParams.clear(); + } + + /** + * ** Set param to URL state. + */ + setParam(key: string, value: string, position = 1): void { + this.isParamsStateMutated = true; + + if (value) { + this.params.set(key, { key, value, position }); + } else { + this.removeParam(key); + } + } + + /** + * ** Returns param value for given key. + */ + getParam(key: string): string { + if (this.params.has(key)) { + return this.params.get(key).value; + } + + return null; + } + + /** + * ** Removes query param from URL state. + */ + removeParam(key: string): void { + if (this.params.has(key)) { + this.isParamsStateMutated = true; + + this.params.delete(key); + } + } + + /** + * ** Clear stored params. + */ + clearParams(): void { + this.params.clear(); + } + + /** + * ** Returns serialized params in string. + */ + getParamsToString(): string { + let paramString = ''; + + this.getSortedByPosition(this.params).forEach((p) => { + paramString += `/${p.value}`; + }); + + return paramString; + } + + /** + * ** Returns serialized queryParams in string. + */ + getQueryParamsToString(): string { + const sortedParams = this.getSortedByPosition(this.queryParams); + + let paramString = ''; + + if (sortedParams.length > 0) { + paramString = `?${sortedParams[0].key}=${sortedParams[0].value}`; + + for (let i = 1; i < sortedParams.length; i++) { + const p = sortedParams[i]; + paramString += `&${p.key}=${p.value}`; + } + } + + return paramString; + } + + /** + * ** Returns query params in Map format. + */ + getQueryParamsAsMap(): { [key: string]: string } { + const sortedParams = this.getSortedByPosition(this.queryParams); + const paramsMap = {}; + + for (const paramsPair of sortedParams) { + paramsMap[paramsPair.key] = paramsPair.value; + } + + return paramsMap; + } + + /** + * ** Build url from base and provided params. + */ + buildUrlWithParams(): string { + if (this.baseURL) { + return `${this.baseURL}${this.getParamsToString()}`; + } + + return null; + } + + private getSortedByPosition( + values: Map + ): StateManagerParamValue[] { + return Array.from(values.entries()) + .sort((p1, p2) => p1[1].position - p2[1].position) + .map((e) => e[1]); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/error-handler/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/error-handler/public-api.ts index ab31b844b5..87116b1cba 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/error-handler/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/error-handler/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/error-handler/service/error-handler.service.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/error-handler/service/error-handler.service.spec.ts index 53e58cf51d..292f943268 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/error-handler/service/error-handler.service.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/error-handler/service/error-handler.service.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -22,472 +20,487 @@ import { FormattedError } from '../../toasts/model'; import { ErrorHandlerService } from './error-handler.service'; describe('ErrorHandlerService', () => { - let toastServiceStub: jasmine.SpyObj; - let service: ErrorHandlerService; - - beforeEach(() => { - toastServiceStub = jasmine.createSpyObj('toastService', ['show']); - - TestBed.configureTestingModule({ - providers: [ - { provide: ToastService, useValue: toastServiceStub }, - ErrorHandlerService - ] - }); - - service = TestBed.inject(ErrorHandlerService); - }); - - it('should verify instance is created', () => { - // Then - expect(service).toBeDefined(); - }); - - describe('Methods::', () => { - describe('|handleError|', () => { - it('should verify will return Observable in error state', fakeAsync(() => { - // Given - const rootError = new Error('some error'); - const processErrorSpy: jasmine.Spy<(error: Error) => void> = spyOn(service, 'processError'); - - // When - const observable$ = service.handleError(rootError); - - // Then - expect(processErrorSpy).toHaveBeenCalledWith(rootError); - expect(observable$).toBeInstanceOf(Observable); - - observable$.subscribe( - CallFake, - (error: unknown) => { - expect(error).toEqual(new Error('Something unexpected happened')); - }); - - tick(100); - })); - }); - - describe('|processError|', () => { - let logErrorSpy: jasmine.Spy; - let url: string; - - beforeEach(() => { - logErrorSpy = spyOn(console, 'error').and.callFake(CallFake); - url = '/shared/resources/statistics/15'; - }); - - describe('should verify will invoke ToastService with expected Toast:', () => { - it('Error is Nil', () => { - // Given - const rootError: Error = null; - - // When - service.processError(rootError); - - // Then - expect(logErrorSpy).toHaveBeenCalledWith(rootError); - expect(toastServiceStub.show).toHaveBeenCalledWith({ - type: VmwToastType.FAILURE, - title: `An error occurred: undefined`, - description: 'We are sorry for the inconvenience.' + - 'Please try again or come back later, and if the issue persists – please copy the details and report the error.', - error: rootError, - responseStatus: null - }); - }); - - it('Error of type SyntaxError', () => { - // Given - const rootError = new SyntaxError('Uncaught SyntaxError: Function statements require a function name'); - - // When - service.processError(rootError); - - // Then - expect(logErrorSpy).toHaveBeenCalledWith(rootError); - expect(toastServiceStub.show).toHaveBeenCalledWith({ - type: VmwToastType.FAILURE, - title: `An error occurred: ${ rootError.message }`, - description: 'We are sorry for the inconvenience.' + - 'Please try again or come back later, and if the issue persists – please copy the details and report the error.', - error: rootError, - responseStatus: null - }); - }); - - it('Error of type SyntaxError and provided additional ErrorHandlerConfig', () => { - // Given - const rootError = new SyntaxError('Uncaught SyntaxError: Function statements require a function name'); - - // When - service.processError( - rootError, - { - title: '---> Unknown error happened', - description: '---> Please try again later, or contact you administrator.', - type: VmwToastType.INFO - } - ); - - // Then - expect(logErrorSpy).toHaveBeenCalledWith(rootError); - expect(toastServiceStub.show).toHaveBeenCalledWith({ - title: '---> Unknown error happened', - description: '---> Please try again later, or contact you administrator.', - type: VmwToastType.INFO, - error: rootError, - responseStatus: null, - extendedData: { - title: `An error occurred: ${ rootError.message }`, - description: 'We are sorry for the inconvenience.' + - 'Please try again or come back later, and if the issue persists – please copy the details and report the error.' - } - }); - }); - - it('Error of type HttpErrorResponse when sub-error is of type ErrorEvent', () => { - // Given - const topRootError = new ErrorEvent('Connection lost'); - const rootError = new HttpErrorResponse({ - error: topRootError, - status: 0, - url, - headers: new HttpHeaders() - }); - - // When - service.processError(rootError); - - // Then - expect(logErrorSpy).toHaveBeenCalledWith(`An error occurred: ${ (rootError.error as Error).message }`); - expect(toastServiceStub.show).toHaveBeenCalledWith({ - type: VmwToastType.FAILURE, - title: `An error occurred: ${ rootError.message }`, - description: 'We are sorry for the inconvenience.' + - 'Please try again or come back later, and if the issue persists – please copy the details and report the error.', - error: rootError, - responseStatus: null - }); - }); - - it('Error of type HttpErrorResponse when status 403 and sub-error is server side error', () => { - // Given - const topRootError = { message: 'Access Denied' } as Error; - const rootError = new HttpErrorResponse({ - error: topRootError, - status: 403, - url, - headers: new HttpHeaders() - }); - - // When - service.processError(rootError); - - // Then - expect(logErrorSpy).toHaveBeenCalledWith(topRootError); - expect(toastServiceStub.show).toHaveBeenCalledWith({ - type: VmwToastType.FAILURE, - title: 'ACCESS DENIED', - description: 'You are not authorized for this content!\ ' + - 'If you think it is a mistake please contact the data owners and request them to grant you access.', - error: topRootError, - responseStatus: 403 - }); - }); - - it('Error of type HttpErrorResponse when status 500 and sub-error is Nil', () => { - // Given - const topRootError = null; - const rootError = new HttpErrorResponse({ - error: topRootError, - status: 500, - url, - headers: new HttpHeaders() - }); - - // When - service.processError(rootError); - - // Then - expect(logErrorSpy).toHaveBeenCalledWith(rootError); - expect(toastServiceStub.show).toHaveBeenCalledWith({ - type: VmwToastType.FAILURE, - title: 'Internal Server Error', - description: 'We are sorry for the inconvenience.' + - 'Please try again or come back later, and if the issue persists – please copy the details and report the error.', - error: topRootError, - responseStatus: 500 - }); - }); - - it('Error of type HttpErrorResponse when status 500 and sub-error is server side error with what and why', () => { - // Given - const topRootError = { - message: 'Internal Server Error', - what: 'Server is down, internal server error', - why: 'Unknown error happened on server side' - }; - const rootError = new HttpErrorResponse({ - error: topRootError, - status: 500, - url, - headers: new HttpHeaders() - }); - - // When - service.processError(rootError); - - // Then - expect(logErrorSpy).toHaveBeenCalledWith(topRootError); - expect(toastServiceStub.show).toHaveBeenCalledWith({ - type: VmwToastType.FAILURE, - title: topRootError.what, - description: topRootError.why, - error: topRootError, - responseStatus: 500 - }); - }); - - it('Error of type HttpErrorResponse when status 500 and sub-error is server side error', () => { - // Given - const topRootError = { - message: 'Internal Server Error' - } as Error; - const rootError = new HttpErrorResponse({ - error: topRootError, - status: 500, - url, - headers: new HttpHeaders() - }); - - // When - service.processError(rootError); - - // Then - expect(logErrorSpy).toHaveBeenCalledWith(topRootError); - expect(toastServiceStub.show).toHaveBeenCalledWith({ - type: VmwToastType.FAILURE, - title: 'Internal Server Error', - description: 'We are sorry for the inconvenience.' + - 'Please try again or come back later, and if the issue persists – please copy the details and report the error.', - error: topRootError, - responseStatus: 500 - }); - }); - - it('Error of type HttpErrorResponse when status 400 and sub-error is Nil', () => { - // Given - const rootError = new HttpErrorResponse({ - error: null, - status: 400, - url, - headers: new HttpHeaders() - }); - - // When - service.processError(rootError); - - // Then - expect(logErrorSpy).toHaveBeenCalledWith(rootError); - expect(toastServiceStub.show).toHaveBeenCalledWith({ - type: VmwToastType.FAILURE, - title: 'Invalid param', - description: 'Operation failed', - error: rootError, - responseStatus: 400 - }); - }); - - it('Error of type HttpErrorResponse when status 401 and sub-error is Nil', () => { - // Given - const rootError = new HttpErrorResponse({ - error: null, - status: 401, - url, - headers: new HttpHeaders() - }); - - // When - service.processError(rootError); - - // Then - expect(logErrorSpy).toHaveBeenCalledWith(rootError); - expect(toastServiceStub.show).toHaveBeenCalledWith({ - type: VmwToastType.FAILURE, - title: 'Unauthorized', - description: 'Operation failed', - error: rootError, - responseStatus: 401 - }); - }); - - it('Error of type HttpErrorResponse when status 404 and sub-error is Nil', () => { - // Given - const rootError = new HttpErrorResponse({ - error: null, - status: 404, - url, - headers: new HttpHeaders() - }); - - // When - service.processError(rootError); - - // Then - expect(logErrorSpy).toHaveBeenCalledWith(rootError); - expect(toastServiceStub.show).toHaveBeenCalledWith({ - type: VmwToastType.FAILURE, - title: 'Not Found', - description: 'Operation failed', - error: rootError, - responseStatus: 404 - }); - }); - - it('Error of type HttpErrorResponse when status 405 and sub-error is Nil', () => { - // Given - const rootError = new HttpErrorResponse({ - error: null, - status: 405, - url, - headers: new HttpHeaders() - }); - - // When - service.processError(rootError); - - // Then - expect(logErrorSpy).toHaveBeenCalledWith(rootError); - expect(toastServiceStub.show).toHaveBeenCalledWith({ - type: VmwToastType.FAILURE, - title: 'Not Allowed', - description: 'Operation failed', - error: rootError, - responseStatus: 405 - }); - }); - - it('Error of type HttpErrorResponse when status 422 and sub-error is Nil', () => { - // Given - const rootError = new HttpErrorResponse({ - error: null, - status: 422, - url, - headers: new HttpHeaders() - }); - - // When - service.processError(rootError); - - // Then - expect(logErrorSpy).toHaveBeenCalledWith(rootError); - expect(toastServiceStub.show).toHaveBeenCalledWith({ - type: VmwToastType.FAILURE, - title: 'Invalid operation', - description: 'Operation failed', - error: rootError, - responseStatus: 422 - }); - }); - - it('Error of type HttpErrorResponse when status 501 and sub-error is Nil', () => { - // Given - const rootError = new HttpErrorResponse({ - error: null, - status: 501, - url, - headers: new HttpHeaders() - }); - - // When - service.processError(rootError); - - // Then - expect(logErrorSpy).toHaveBeenCalledWith(rootError); - expect(toastServiceStub.show).toHaveBeenCalledWith({ - type: VmwToastType.FAILURE, - title: 'Unknown Error', - description: 'Operation failed', - error: rootError, - responseStatus: 501 - }); - }); - - it('Error of type HttpErrorResponse when status 507 and sub-error is server side error with what and why', () => { - // Given - const rootError = new HttpErrorResponse({ - error: { - message: 'Insufficient Storage', - what: 'Insufficient Storage on server', - why: 'Cloud storage id down' - }, - status: 507, - url, - headers: new HttpHeaders() - }); - - // When - service.processError(rootError); - - // Then - expect(logErrorSpy).toHaveBeenCalledWith(rootError.error); - expect(toastServiceStub.show).toHaveBeenCalledWith({ - type: VmwToastType.FAILURE, - title: (rootError.error as FormattedError).what, - description: (rootError.error as FormattedError).why, - error: rootError.error, - responseStatus: 507 - }); - }); - - it('Error of type HttpErrorResponse when status 423 and sub-error is of type string', () => { - // Given - const rootError = new HttpErrorResponse({ - error: 'Entity is locked', - status: 423, - url, - headers: new HttpHeaders() - }); - - // When - service.processError(rootError); - - // Then - expect(logErrorSpy).toHaveBeenCalledWith(rootError.error); - expect(toastServiceStub.show).toHaveBeenCalledWith({ - type: VmwToastType.FAILURE, - title: rootError.error, - description: rootError.message, - error: rootError.error, - responseStatus: 423 - }); - }); - - it('Error of type HttpErrorResponse when status 417 and sub-error is server side error', () => { - // Given - const rootError = new HttpErrorResponse({ - error: { - message: 'Expectation Failed' - }, - status: 417, - url, - headers: new HttpHeaders() - }); - - // When - service.processError(rootError); - - // Then - expect(logErrorSpy).toHaveBeenCalledWith(rootError.error); - expect(toastServiceStub.show).toHaveBeenCalledWith({ - type: VmwToastType.FAILURE, - title: 'Unknown Error', - description: rootError.message, - error: rootError.error, - responseStatus: 417 - }); - }); - }); - }); - }); + let toastServiceStub: jasmine.SpyObj; + let service: ErrorHandlerService; + + beforeEach(() => { + toastServiceStub = jasmine.createSpyObj('toastService', [ + 'show' + ]); + + TestBed.configureTestingModule({ + providers: [ + { provide: ToastService, useValue: toastServiceStub }, + ErrorHandlerService + ] + }); + + service = TestBed.inject(ErrorHandlerService); + }); + + it('should verify instance is created', () => { + // Then + expect(service).toBeDefined(); + }); + + describe('Methods::', () => { + describe('|handleError|', () => { + it('should verify will return Observable in error state', fakeAsync(() => { + // Given + const rootError = new Error('some error'); + const processErrorSpy: jasmine.Spy<(error: Error) => void> = spyOn( + service, + 'processError' + ); + + // When + const observable$ = service.handleError(rootError); + + // Then + expect(processErrorSpy).toHaveBeenCalledWith(rootError); + expect(observable$).toBeInstanceOf(Observable); + + observable$.subscribe(CallFake, (error: unknown) => { + expect(error).toEqual(new Error('Something unexpected happened')); + }); + + tick(100); + })); + }); + + describe('|processError|', () => { + let logErrorSpy: jasmine.Spy; + let url: string; + + beforeEach(() => { + logErrorSpy = spyOn(console, 'error').and.callFake(CallFake); + url = '/shared/resources/statistics/15'; + }); + + describe('should verify will invoke ToastService with expected Toast:', () => { + it('Error is Nil', () => { + // Given + const rootError: Error = null; + + // When + service.processError(rootError); + + // Then + expect(logErrorSpy).toHaveBeenCalledWith(rootError); + expect(toastServiceStub.show).toHaveBeenCalledWith({ + type: VmwToastType.FAILURE, + title: `An error occurred: undefined`, + description: + 'We are sorry for the inconvenience.' + + 'Please try again or come back later, and if the issue persists – please copy the details and report the error.', + error: rootError, + responseStatus: null + }); + }); + + it('Error of type SyntaxError', () => { + // Given + const rootError = new SyntaxError( + 'Uncaught SyntaxError: Function statements require a function name' + ); + + // When + service.processError(rootError); + + // Then + expect(logErrorSpy).toHaveBeenCalledWith(rootError); + expect(toastServiceStub.show).toHaveBeenCalledWith({ + type: VmwToastType.FAILURE, + title: `An error occurred: ${rootError.message}`, + description: + 'We are sorry for the inconvenience.' + + 'Please try again or come back later, and if the issue persists – please copy the details and report the error.', + error: rootError, + responseStatus: null + }); + }); + + it('Error of type SyntaxError and provided additional ErrorHandlerConfig', () => { + // Given + const rootError = new SyntaxError( + 'Uncaught SyntaxError: Function statements require a function name' + ); + + // When + service.processError(rootError, { + title: '---> Unknown error happened', + description: + '---> Please try again later, or contact you administrator.', + type: VmwToastType.INFO + }); + + // Then + expect(logErrorSpy).toHaveBeenCalledWith(rootError); + expect(toastServiceStub.show).toHaveBeenCalledWith({ + title: '---> Unknown error happened', + description: + '---> Please try again later, or contact you administrator.', + type: VmwToastType.INFO, + error: rootError, + responseStatus: null, + extendedData: { + title: `An error occurred: ${rootError.message}`, + description: + 'We are sorry for the inconvenience.' + + 'Please try again or come back later, and if the issue persists – please copy the details and report the error.' + } + }); + }); + + it('Error of type HttpErrorResponse when sub-error is of type ErrorEvent', () => { + // Given + const topRootError = new ErrorEvent('Connection lost'); + const rootError = new HttpErrorResponse({ + error: topRootError, + status: 0, + url, + headers: new HttpHeaders() + }); + + // When + service.processError(rootError); + + // Then + expect(logErrorSpy).toHaveBeenCalledWith( + `An error occurred: ${(rootError.error as Error).message}` + ); + expect(toastServiceStub.show).toHaveBeenCalledWith({ + type: VmwToastType.FAILURE, + title: `An error occurred: ${rootError.message}`, + description: + 'We are sorry for the inconvenience.' + + 'Please try again or come back later, and if the issue persists – please copy the details and report the error.', + error: rootError, + responseStatus: null + }); + }); + + it('Error of type HttpErrorResponse when status 403 and sub-error is server side error', () => { + // Given + const topRootError = { message: 'Access Denied' } as Error; + const rootError = new HttpErrorResponse({ + error: topRootError, + status: 403, + url, + headers: new HttpHeaders() + }); + + // When + service.processError(rootError); + + // Then + expect(logErrorSpy).toHaveBeenCalledWith(topRootError); + expect(toastServiceStub.show).toHaveBeenCalledWith({ + type: VmwToastType.FAILURE, + title: 'ACCESS DENIED', + description: + 'You are not authorized for this content! ' + + 'If you think it is a mistake please contact the data owners and request them to grant you access.', + error: topRootError, + responseStatus: 403 + }); + }); + + it('Error of type HttpErrorResponse when status 500 and sub-error is Nil', () => { + // Given + const topRootError = null; + const rootError = new HttpErrorResponse({ + error: topRootError, + status: 500, + url, + headers: new HttpHeaders() + }); + + // When + service.processError(rootError); + + // Then + expect(logErrorSpy).toHaveBeenCalledWith(rootError); + expect(toastServiceStub.show).toHaveBeenCalledWith({ + type: VmwToastType.FAILURE, + title: 'Internal Server Error', + description: + 'We are sorry for the inconvenience.' + + 'Please try again or come back later, and if the issue persists – please copy the details and report the error.', + error: topRootError, + responseStatus: 500 + }); + }); + + it('Error of type HttpErrorResponse when status 500 and sub-error is server side error with what and why', () => { + // Given + const topRootError = { + message: 'Internal Server Error', + what: 'Server is down, internal server error', + why: 'Unknown error happened on server side' + }; + const rootError = new HttpErrorResponse({ + error: topRootError, + status: 500, + url, + headers: new HttpHeaders() + }); + + // When + service.processError(rootError); + + // Then + expect(logErrorSpy).toHaveBeenCalledWith(topRootError); + expect(toastServiceStub.show).toHaveBeenCalledWith({ + type: VmwToastType.FAILURE, + title: topRootError.what, + description: topRootError.why, + error: topRootError, + responseStatus: 500 + }); + }); + + it('Error of type HttpErrorResponse when status 500 and sub-error is server side error', () => { + // Given + const topRootError = { + message: 'Internal Server Error' + } as Error; + const rootError = new HttpErrorResponse({ + error: topRootError, + status: 500, + url, + headers: new HttpHeaders() + }); + + // When + service.processError(rootError); + + // Then + expect(logErrorSpy).toHaveBeenCalledWith(topRootError); + expect(toastServiceStub.show).toHaveBeenCalledWith({ + type: VmwToastType.FAILURE, + title: 'Internal Server Error', + description: + 'We are sorry for the inconvenience.' + + 'Please try again or come back later, and if the issue persists – please copy the details and report the error.', + error: topRootError, + responseStatus: 500 + }); + }); + + it('Error of type HttpErrorResponse when status 400 and sub-error is Nil', () => { + // Given + const rootError = new HttpErrorResponse({ + error: null, + status: 400, + url, + headers: new HttpHeaders() + }); + + // When + service.processError(rootError); + + // Then + expect(logErrorSpy).toHaveBeenCalledWith(rootError); + expect(toastServiceStub.show).toHaveBeenCalledWith({ + type: VmwToastType.FAILURE, + title: 'Invalid param', + description: 'Operation failed', + error: rootError, + responseStatus: 400 + }); + }); + + it('Error of type HttpErrorResponse when status 401 and sub-error is Nil', () => { + // Given + const rootError = new HttpErrorResponse({ + error: null, + status: 401, + url, + headers: new HttpHeaders() + }); + + // When + service.processError(rootError); + + // Then + expect(logErrorSpy).toHaveBeenCalledWith(rootError); + expect(toastServiceStub.show).toHaveBeenCalledWith({ + type: VmwToastType.FAILURE, + title: 'Unauthorized', + description: 'Operation failed', + error: rootError, + responseStatus: 401 + }); + }); + + it('Error of type HttpErrorResponse when status 404 and sub-error is Nil', () => { + // Given + const rootError = new HttpErrorResponse({ + error: null, + status: 404, + url, + headers: new HttpHeaders() + }); + + // When + service.processError(rootError); + + // Then + expect(logErrorSpy).toHaveBeenCalledWith(rootError); + expect(toastServiceStub.show).toHaveBeenCalledWith({ + type: VmwToastType.FAILURE, + title: 'Not Found', + description: 'Operation failed', + error: rootError, + responseStatus: 404 + }); + }); + + it('Error of type HttpErrorResponse when status 405 and sub-error is Nil', () => { + // Given + const rootError = new HttpErrorResponse({ + error: null, + status: 405, + url, + headers: new HttpHeaders() + }); + + // When + service.processError(rootError); + + // Then + expect(logErrorSpy).toHaveBeenCalledWith(rootError); + expect(toastServiceStub.show).toHaveBeenCalledWith({ + type: VmwToastType.FAILURE, + title: 'Not Allowed', + description: 'Operation failed', + error: rootError, + responseStatus: 405 + }); + }); + + it('Error of type HttpErrorResponse when status 422 and sub-error is Nil', () => { + // Given + const rootError = new HttpErrorResponse({ + error: null, + status: 422, + url, + headers: new HttpHeaders() + }); + + // When + service.processError(rootError); + + // Then + expect(logErrorSpy).toHaveBeenCalledWith(rootError); + expect(toastServiceStub.show).toHaveBeenCalledWith({ + type: VmwToastType.FAILURE, + title: 'Invalid operation', + description: 'Operation failed', + error: rootError, + responseStatus: 422 + }); + }); + + it('Error of type HttpErrorResponse when status 501 and sub-error is Nil', () => { + // Given + const rootError = new HttpErrorResponse({ + error: null, + status: 501, + url, + headers: new HttpHeaders() + }); + + // When + service.processError(rootError); + + // Then + expect(logErrorSpy).toHaveBeenCalledWith(rootError); + expect(toastServiceStub.show).toHaveBeenCalledWith({ + type: VmwToastType.FAILURE, + title: 'Unknown Error', + description: 'Operation failed', + error: rootError, + responseStatus: 501 + }); + }); + + it('Error of type HttpErrorResponse when status 507 and sub-error is server side error with what and why', () => { + // Given + const rootError = new HttpErrorResponse({ + error: { + message: 'Insufficient Storage', + what: 'Insufficient Storage on server', + why: 'Cloud storage id down' + }, + status: 507, + url, + headers: new HttpHeaders() + }); + + // When + service.processError(rootError); + + // Then + expect(logErrorSpy).toHaveBeenCalledWith(rootError.error); + expect(toastServiceStub.show).toHaveBeenCalledWith({ + type: VmwToastType.FAILURE, + title: (rootError.error as FormattedError).what, + description: (rootError.error as FormattedError).why, + error: rootError.error, + responseStatus: 507 + }); + }); + + it('Error of type HttpErrorResponse when status 423 and sub-error is of type string', () => { + // Given + const rootError = new HttpErrorResponse({ + error: 'Entity is locked', + status: 423, + url, + headers: new HttpHeaders() + }); + + // When + service.processError(rootError); + + // Then + expect(logErrorSpy).toHaveBeenCalledWith(rootError.error); + expect(toastServiceStub.show).toHaveBeenCalledWith({ + type: VmwToastType.FAILURE, + title: rootError.error, + description: rootError.message, + error: rootError.error, + responseStatus: 423 + }); + }); + + it('Error of type HttpErrorResponse when status 417 and sub-error is server side error', () => { + // Given + const rootError = new HttpErrorResponse({ + error: { + message: 'Expectation Failed' + }, + status: 417, + url, + headers: new HttpHeaders() + }); + + // When + service.processError(rootError); + + // Then + expect(logErrorSpy).toHaveBeenCalledWith(rootError.error); + expect(toastServiceStub.show).toHaveBeenCalledWith({ + type: VmwToastType.FAILURE, + title: 'Unknown Error', + description: rootError.message, + error: rootError.error, + responseStatus: 417 + }); + }); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/error-handler/service/error-handler.service.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/error-handler/service/error-handler.service.ts index 256f6099d2..67a92639d2 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/error-handler/service/error-handler.service.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/error-handler/service/error-handler.service.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -20,9 +18,9 @@ import { FormattedError, Toast } from '../../toasts/model'; import { ToastService } from '../../toasts/service'; export interface ErrorHandlerConfig { - title?: Toast['title']; - description?: Toast['description']; - type?: Toast['type']; + title?: Toast['title']; + description?: Toast['description']; + type?: Toast['type']; } /** @@ -32,157 +30,180 @@ export interface ErrorHandlerConfig { */ @Injectable() export class ErrorHandlerService { - /** - * ** Constructor. - */ - constructor(private readonly toastService: ToastService) { - } - - /** - * ** Handle Error in rxjs stream. - * - * - Show Toast message - * - Log it to console - * - Re-throw new Error('Something unexpected happened') - */ - handleError = (error: Error): Observable => { - this.processError(error); - - const newError = new Error('Something unexpected happened'); - - return throwError(() => newError); - }; - - /** - * ** Process Error. - * - * - Show Toast message - * - Log it to console - */ - processError(error: Error): void; - processError(error: Error, overriddenConfig: ErrorHandlerConfig): void; - processError(error: Error, overriddenConfig?: ErrorHandlerConfig): void { - if (error instanceof HttpErrorResponse) { - if (error.error instanceof ErrorEvent) { // A client-side or network error occurred. - const toast = ErrorHandlerService._createToastConfigForError(error, overriddenConfig); - - console.error(`An error occurred: ${ error.error.message }`); - - this.toastService.show(toast); - } else { // Server side error occurred. - const toast = ErrorHandlerService._createToastConfigForHttpErrorResponse(error, overriddenConfig); - - console.error(error.error ?? error); - - this.toastService.show(toast); - } - } else { // Runtime error occurred, potential bug. - const toast = ErrorHandlerService._createToastConfigForError(error, overriddenConfig); - - console.error(error); - - this.toastService.show(toast); - } - } - - /* eslint-disable @typescript-eslint/member-ordering */ - - private static _createToastConfigForHttpErrorResponse(error: HttpErrorResponse, overriddenConfig: ErrorHandlerConfig): Toast { - let title: string; - let description: string; - let rootError: Error = error.error as Error; - const responseStatus = error.status; - - if (error.status === 403) { - title = 'ACCESS DENIED'; - description = 'You are not authorized for this content!\ ' + - 'If you think it is a mistake please contact the data owners and request them to grant you access.'; - } else if (error.status === 500) { - title = (error.error as FormattedError)?.what - ? (error.error as FormattedError).what - : 'Internal Server Error'; - description = (error.error as FormattedError)?.why - ? (error.error as FormattedError).why - : 'We are sorry for the inconvenience.' + - 'Please try again or come back later, and if the issue persists – please copy the details and report the error.'; - } else if (CollectionsUtil.isNil(error.error)) { - title = ErrorHandlerService._getErrorTitle(error.status); - description = 'Operation failed'; - rootError = error; - } else if (error.error && (error.error as FormattedError).what && (error.error as FormattedError).why) { - title = (error.error as FormattedError).what; - description = (error.error as FormattedError).why; - } else if (typeof error.error === 'string') { - title = error.error; - description = error.message; - } else { - title = ErrorHandlerService._getErrorTitle(error.status); - description = error.message; - } - - return ErrorHandlerService._createToastConfig( - title, - description, - rootError, - responseStatus, - overriddenConfig - ); - } - - private static _createToastConfigForError(error: Error, overriddenConfig: ErrorHandlerConfig): Toast { - return ErrorHandlerService._createToastConfig( - `An error occurred: ${ error?.message }`, - 'We are sorry for the inconvenience.' + - 'Please try again or come back later, and if the issue persists – please copy the details and report the error.', - error, - undefined, - overriddenConfig - ); - } - - private static _getErrorTitle(status: number): string { - switch (status) { - case 400: - return 'Invalid param'; - case 401: - return 'Unauthorized'; - case 404: - return 'Not Found'; - case 405: - return 'Not Allowed'; - case 422: - return 'Invalid operation'; - default: - return 'Unknown Error'; - } - } - - private static _createToastConfig( - title: string, - description: string, - error: Error, - responseStatus: number = null, - overriddenConfig: ErrorHandlerConfig = null): Toast { - - let toastConfig: Toast = { - title, - description, - type: VmwToastType.FAILURE, - error, - responseStatus - }; - - if (CollectionsUtil.isDefined(overriddenConfig)) { - toastConfig = { - ...toastConfig, - ...overriddenConfig, - extendedData: { - title, - description - } - }; - } - - return toastConfig; - } + /** + * ** Constructor. + */ + constructor(private readonly toastService: ToastService) {} + + /** + * ** Handle Error in rxjs stream. + * + * - Show Toast message + * - Log it to console + * - Re-throw new Error('Something unexpected happened') + */ + handleError = (error: Error): Observable => { + this.processError(error); + + const newError = new Error('Something unexpected happened'); + + return throwError(() => newError); + }; + + /** + * ** Process Error. + * + * - Show Toast message + * - Log it to console + */ + processError(error: Error): void; + processError(error: Error, overriddenConfig: ErrorHandlerConfig): void; + processError(error: Error, overriddenConfig?: ErrorHandlerConfig): void { + if (error instanceof HttpErrorResponse) { + if (error.error instanceof ErrorEvent) { + // A client-side or network error occurred. + const toast = ErrorHandlerService._createToastConfigForError( + error, + overriddenConfig + ); + + console.error(`An error occurred: ${error.error.message}`); + + this.toastService.show(toast); + } else { + // Server side error occurred. + const toast = + ErrorHandlerService._createToastConfigForHttpErrorResponse( + error, + overriddenConfig + ); + + console.error(error.error ?? error); + + this.toastService.show(toast); + } + } else { + // Runtime error occurred, potential bug. + const toast = ErrorHandlerService._createToastConfigForError( + error, + overriddenConfig + ); + + console.error(error); + + this.toastService.show(toast); + } + } + + /* eslint-disable @typescript-eslint/member-ordering */ + + private static _createToastConfigForHttpErrorResponse( + error: HttpErrorResponse, + overriddenConfig: ErrorHandlerConfig + ): Toast { + let title: string; + let description: string; + let rootError: Error = error.error as Error; + const responseStatus = error.status; + + if (error.status === 403) { + title = 'ACCESS DENIED'; + description = + 'You are not authorized for this content! ' + + 'If you think it is a mistake please contact the data owners and request them to grant you access.'; + } else if (error.status === 500) { + title = (error.error as FormattedError)?.what + ? (error.error as FormattedError).what + : 'Internal Server Error'; + description = (error.error as FormattedError)?.why + ? (error.error as FormattedError).why + : 'We are sorry for the inconvenience.' + + 'Please try again or come back later, and if the issue persists – please copy the details and report the error.'; + } else if (CollectionsUtil.isNil(error.error)) { + title = ErrorHandlerService._getErrorTitle(error.status); + description = 'Operation failed'; + rootError = error; + } else if ( + error.error && + (error.error as FormattedError).what && + (error.error as FormattedError).why + ) { + title = (error.error as FormattedError).what; + description = (error.error as FormattedError).why; + } else if (typeof error.error === 'string') { + title = error.error; + description = error.message; + } else { + title = ErrorHandlerService._getErrorTitle(error.status); + description = error.message; + } + + return ErrorHandlerService._createToastConfig( + title, + description, + rootError, + responseStatus, + overriddenConfig + ); + } + + private static _createToastConfigForError( + error: Error, + overriddenConfig: ErrorHandlerConfig + ): Toast { + return ErrorHandlerService._createToastConfig( + `An error occurred: ${error?.message}`, + 'We are sorry for the inconvenience.' + + 'Please try again or come back later, and if the issue persists – please copy the details and report the error.', + error, + undefined, + overriddenConfig + ); + } + + private static _getErrorTitle(status: number): string { + switch (status) { + case 400: + return 'Invalid param'; + case 401: + return 'Unauthorized'; + case 404: + return 'Not Found'; + case 405: + return 'Not Allowed'; + case 422: + return 'Invalid operation'; + default: + return 'Unknown Error'; + } + } + + private static _createToastConfig( + title: string, + description: string, + error: Error, + responseStatus: number = null, + overriddenConfig: ErrorHandlerConfig = null + ): Toast { + let toastConfig: Toast = { + title, + description, + type: VmwToastType.FAILURE, + error, + responseStatus + }; + + if (CollectionsUtil.isDefined(overriddenConfig)) { + toastConfig = { + ...toastConfig, + ...overriddenConfig, + extendedData: { + title, + description + } + }; + } + + return toastConfig; + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/error-handler/service/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/error-handler/service/index.ts index e1e7d2b202..3e24ddb94c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/error-handler/service/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/error-handler/service/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/public-api.ts index c70260de59..4c99858a76 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/taurus-shared-features.module.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/taurus-shared-features.module.ts index 029941ae07..3a2c73707c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/taurus-shared-features.module.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/taurus-shared-features.module.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -20,43 +18,38 @@ import { ErrorHandlerService } from './error-handler/service'; import { ToastService } from './toasts/service'; @NgModule({ - imports: [ - CommonModule, - ClarityModule, - VdkComponentsModule.forChild(), - RouterModule, - ToastsModule - ], - exports: [ - ToastsModule - ] + imports: [ + CommonModule, + ClarityModule, + VdkComponentsModule.forChild(), + RouterModule, + ToastsModule + ], + exports: [ToastsModule] }) export class TaurusSharedFeaturesModule { - /** - * ** Provides TaurusSharedFeaturesModule and all Services related to Shared Module features. - * - * - Should be invoke only once for entire project. - * - Not inside FeatureModule (lazy loaded Module). - * - In other modules import only taurus-shared-features.module.tTaurusSharedFeaturesModule. - */ - static forRoot(): ModuleWithProviders { - return { - ngModule: TaurusSharedFeaturesModule, - providers: [ - ErrorHandlerService, - ToastService - ] - }; - } - - /** - * ** Provides TaurusSharedFeaturesModule. - * - * - Should be invoke in FeatureModules (lazy loaded Modules). - */ - static forChild(): ModuleWithProviders { - return { - ngModule: TaurusSharedFeaturesModule - }; - } + /** + * ** Provides TaurusSharedFeaturesModule and all Services related to Shared Module features. + * + * - Should be invoke only once for entire project. + * - Not inside FeatureModule (lazy loaded Module). + * - In other modules import only taurus-shared-features.module.tTaurusSharedFeaturesModule. + */ + static forRoot(): ModuleWithProviders { + return { + ngModule: TaurusSharedFeaturesModule, + providers: [ErrorHandlerService, ToastService] + }; + } + + /** + * ** Provides TaurusSharedFeaturesModule. + * + * - Should be invoke in FeatureModules (lazy loaded Modules). + */ + static forChild(): ModuleWithProviders { + return { + ngModule: TaurusSharedFeaturesModule + }; + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/model/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/model/index.ts index 21595c91af..77332879c0 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/model/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/model/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/model/toast.interface.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/model/toast.interface.ts index b54401093b..91341a058f 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/model/toast.interface.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/model/toast.interface.ts @@ -8,21 +8,21 @@ import { HttpErrorResponse } from '@angular/common/http'; import { VmwToastType } from '../../../commons'; export interface Toast { - title: string; - description: string; - type: VmwToastType; - error?: Error | FormattedError | HttpErrorResponse; - expanded?: boolean; - responseStatus?: number; - extendedData?: { - title: string; - description: string; - }; + title: string; + description: string; + type: VmwToastType; + error?: Error | FormattedError | HttpErrorResponse; + expanded?: boolean; + responseStatus?: number; + extendedData?: { + title: string; + description: string; + }; } export interface FormattedError { - consequences?: string; - countermeasures?: string; - what: string; - why: string; + consequences?: string; + countermeasures?: string; + what: string; + why: string; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/public-api.ts index b54203acde..b35780162f 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/service/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/service/index.ts index 5237c38345..68e0391296 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/service/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/service/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/service/toast.service.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/service/toast.service.spec.ts index c718797b04..c121303faa 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/service/toast.service.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/service/toast.service.spec.ts @@ -9,32 +9,32 @@ import { VmwToastType } from '../../../commons'; import { ToastService } from './toast.service'; describe('ToastServiceComponent', () => { - let service: ToastService; + let service: ToastService; - const TEST_TOAST = { - title: 'title001', - description: 'descr001', - type: VmwToastType.FAILURE - }; + const TEST_TOAST = { + title: 'title001', + description: 'descr001', + type: VmwToastType.FAILURE + }; - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [ - ToastService - ] - }); - service = TestBed.inject(ToastService); - }); + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [ToastService] + }); + service = TestBed.inject(ToastService); + }); - it('should create', () => { - expect(service).toBeTruthy(); - }); + it('should create', () => { + expect(service).toBeTruthy(); + }); - describe('show', () => { - it('makes expected calls', () => { - spyOn(service.notificationsSubject, 'next').and.callThrough(); - service.show(TEST_TOAST); - expect(service.notificationsSubject.next).toHaveBeenCalledWith(TEST_TOAST); - }); - }); + describe('show', () => { + it('makes expected calls', () => { + spyOn(service.notificationsSubject, 'next').and.callThrough(); + service.show(TEST_TOAST); + expect(service.notificationsSubject.next).toHaveBeenCalledWith( + TEST_TOAST + ); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/service/toast.service.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/service/toast.service.ts index 478c751a64..9f47996d3b 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/service/toast.service.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/service/toast.service.ts @@ -11,20 +11,20 @@ import { Toast } from '../model'; @Injectable() export class ToastService { - notificationsSubject = new Subject(); - private notification$ = this.notificationsSubject.asObservable(); + notificationsSubject = new Subject(); + private notification$ = this.notificationsSubject.asObservable(); - /** - * ** Get subscribable stream, that raise new Events when new Toast should be shown. - */ - getNotifications() { - return this.notification$; - } + /** + * ** Get subscribable stream, that raise new Events when new Toast should be shown. + */ + getNotifications() { + return this.notification$; + } - /** - * ** Show Toast message. - */ - show(toast: Toast) { - this.notificationsSubject.next(toast); - } + /** + * ** Show Toast message. + */ + show(toast: Toast) { + this.notificationsSubject.next(toast); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/toasts.module.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/toasts.module.ts index 628c32533d..d6ac936283 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/toasts.module.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/toasts.module.ts @@ -15,18 +15,8 @@ import { VdkComponentsModule } from '../../commons'; import { ToastsComponent } from './widget'; @NgModule({ - imports: [ - CommonModule, - ClarityModule, - VdkComponentsModule, - ClipboardModule - ], - declarations: [ - ToastsComponent - ], - exports: [ - ToastsComponent - ] + imports: [CommonModule, ClarityModule, VdkComponentsModule, ClipboardModule], + declarations: [ToastsComponent], + exports: [ToastsComponent] }) -export class ToastsModule { -} +export class ToastsModule {} diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/widget/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/widget/index.ts index a65b5a6aa9..7b3eac5a93 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/widget/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/widget/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/widget/toasts.component.html b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/widget/toasts.component.html index 69dab4f082..34be48ad38 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/widget/toasts.component.html +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/widget/toasts.component.html @@ -4,24 +4,33 @@ --> - -
    {{toast.title}}
    + +
    {{toast.title}}
    -

    {{toast.description}}

    -

    consequences: {{toast.error?.consequences}}

    -

    countermeasures: {{toast.error?.countermeasures}}

    -

    Please copy the details and report the error.

    - -     +

    {{toast.description}}

    +

    + consequences: {{toast.error?.consequences}} +

    +

    + countermeasures: {{toast.error?.countermeasures}} +

    +

    + Please copy the details and report the error. +

    +     diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/widget/toasts.component.scss b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/widget/toasts.component.scss index 34245805c0..6a5fe14965 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/widget/toasts.component.scss +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/widget/toasts.component.scss @@ -4,14 +4,14 @@ */ .toast-container { - z-index: 1051; + z-index: 1051; - .toast-title { - max-width: 300px; - } + .toast-title { + max-width: 300px; + } - .toast-description { - margin-top: 5px; - max-width: 330px; - } + .toast-description { + margin-top: 5px; + max-width: 330px; + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/widget/toasts.component.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/widget/toasts.component.spec.ts index da82baa729..403bc72e79 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/widget/toasts.component.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/widget/toasts.component.spec.ts @@ -11,47 +11,43 @@ import { ToastsComponent } from './toasts.component'; import { ToastService } from '../service'; describe('ToastsComponent', () => { - let component: ToastsComponent; - let fixture: ComponentFixture; - - const TEST_TOAST = { - title: 'title001', - description: 'description001', - type: VmwToastType.FAILURE, - id: 10, - time: new Date() - }; - - const FIRST_ELEMENT_INDEX = 0; - const EMPTY_LIST_LENGTH = 0; - - beforeEach( - async () => { - await TestBed.configureTestingModule({ - providers: [ - ToastService - ], - schemas: [NO_ERRORS_SCHEMA], - declarations: [ToastsComponent] - }).compileComponents(); - } - ); - - beforeEach(() => { - fixture = TestBed.createComponent(ToastsComponent); - component = fixture.componentInstance; - component.toasts = [TEST_TOAST]; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); - - describe('remove', () => { - it('removes an element from the toasts list ', () => { - component.removeToast(FIRST_ELEMENT_INDEX); - expect(component.toasts.length).toEqual(EMPTY_LIST_LENGTH); - }); - }); + let component: ToastsComponent; + let fixture: ComponentFixture; + + const TEST_TOAST = { + title: 'title001', + description: 'description001', + type: VmwToastType.FAILURE, + id: 10, + time: new Date() + }; + + const FIRST_ELEMENT_INDEX = 0; + const EMPTY_LIST_LENGTH = 0; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + providers: [ToastService], + schemas: [NO_ERRORS_SCHEMA], + declarations: [ToastsComponent] + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ToastsComponent); + component = fixture.componentInstance; + component.toasts = [TEST_TOAST]; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + describe('remove', () => { + it('removes an element from the toasts list ', () => { + component.removeToast(FIRST_ELEMENT_INDEX); + expect(component.toasts.length).toEqual(EMPTY_LIST_LENGTH); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/widget/toasts.component.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/widget/toasts.component.ts index b55151ca8a..bd015e646f 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/widget/toasts.component.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/features/toasts/widget/toasts.component.ts @@ -15,153 +15,147 @@ import { Toast } from '../model'; import { ToastService } from '../service'; interface ToastInternal extends Toast { - id: number; - time: Date; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - error?: any; + id: number; + time: Date; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + error?: any; } @Component({ - selector: 'shared-toasts', - templateUrl: './toasts.component.html', - styleUrls: ['./toasts.component.scss'] + selector: 'shared-toasts', + templateUrl: './toasts.component.html', + styleUrls: ['./toasts.component.scss'] }) export class ToastsComponent extends TaurusObject implements OnInit { - private static toastMessageCounter = 0; - - toasts: ToastInternal[]; - - constructor(private readonly toastService: ToastService, - private readonly clipboardService: ClipboardService) { - super(); - this.toasts = []; - } - - /** - * ** Optimize Toast rendering using tracking with auto incremented ID per Toast. - */ - trackByRendering(_index: number, toast: ToastInternal): number { - return toast.id; - } - - /** - * ** Returns if Toast with given index is expanded. - */ - isToastExpanded(index: number): boolean { - return this.toasts[index].expanded; - } - - /** - * ** Evaluate if recommendation text for Copy and Report is visible. - */ - isReportRecommendationVisible(toast: ToastInternal, index: number): boolean { - return this.isToastExpanded(index) && - this._isTypeError(toast) && - toast.responseStatus !== 500; - } - - /** - * ** Remove Toast message. - */ - removeToast(index: number): void { - this.toasts.splice(index, 1); - } - - /** - * ** Toggle Toast expand details (expand/collapse). - */ - toggleToastExpandDetails(index: number): void { - this.toasts[index].expanded = !this.toasts[index].expanded; - } - - /** - * ** Copy to clipboard provided object. - */ - copyToClipboard(copy: ToastInternal): void { - try { - this.clipboardService.copy(JSON.stringify(copy)); - } catch (e) { - console.error(e); - - this._handleCopyActionError(); - } - } - - /** - * ** Returns Toast timeout in unit seconds. - */ - getTimeout(toast: ToastInternal): number { - return this._isTypeError(toast) - ? 30 - : 5; - } - - /** - * ** Returns text for Btn CopyToClipboard. - */ - getCopyToClipboardBtnText(toast: ToastInternal): string { - return this._isTypeError(toast) - ? 'Copy to clipboard' - : ''; - } - - /** - * ** Returns text for Btn Expand/Collapse. - */ - getExpandBtnText(toast: ToastInternal, index: number): string { - if (this._isTypeError(toast)) { - return this.isToastExpanded(index) - ? 'less' - : 'more'; - } - - return ''; - } - - /** - * @inheritDoc - */ - ngOnInit() { - this.subscriptions.push( - this.toastService - .getNotifications() - .subscribe((toast: Toast) => { - this.toasts.push({ - ...toast, - id: ToastsComponent.generateID(), - time: ToastsComponent.getDateTimeNow() - }); - }), - this.clipboardService - .copyResponse$ - .subscribe((result) => { - if (!result.isSuccess) { - this._handleCopyActionError(); - } - }) - ); - } - - private _isTypeError(toast: Toast): boolean { - return toast.type === VmwToastType.FAILURE && !!toast.error; - } - - private _handleCopyActionError(): void { - this.toasts.push({ - type: VmwToastType.FAILURE, - title: `Copy to clipboard`, - description: `The view definition failed to copy to the clipboard`, - id: ToastsComponent.generateID(), - time: ToastsComponent.getDateTimeNow() - }); - } - - /* eslint-disable @typescript-eslint/member-ordering */ - private static generateID(): number { - return this.toastMessageCounter++; - } - - private static getDateTimeNow(): Date { - return new Date(); - } + private static toastMessageCounter = 0; + + toasts: ToastInternal[]; + + constructor( + private readonly toastService: ToastService, + private readonly clipboardService: ClipboardService + ) { + super(); + this.toasts = []; + } + + /** + * ** Optimize Toast rendering using tracking with auto incremented ID per Toast. + */ + trackByRendering(_index: number, toast: ToastInternal): number { + return toast.id; + } + + /** + * ** Returns if Toast with given index is expanded. + */ + isToastExpanded(index: number): boolean { + return this.toasts[index].expanded; + } + + /** + * ** Evaluate if recommendation text for Copy and Report is visible. + */ + isReportRecommendationVisible(toast: ToastInternal, index: number): boolean { + return ( + this.isToastExpanded(index) && + this._isTypeError(toast) && + toast.responseStatus !== 500 + ); + } + + /** + * ** Remove Toast message. + */ + removeToast(index: number): void { + this.toasts.splice(index, 1); + } + + /** + * ** Toggle Toast expand details (expand/collapse). + */ + toggleToastExpandDetails(index: number): void { + this.toasts[index].expanded = !this.toasts[index].expanded; + } + + /** + * ** Copy to clipboard provided object. + */ + copyToClipboard(copy: ToastInternal): void { + try { + this.clipboardService.copy(JSON.stringify(copy)); + } catch (e) { + console.error(e); + + this._handleCopyActionError(); + } + } + + /** + * ** Returns Toast timeout in unit seconds. + */ + getTimeout(toast: ToastInternal): number { + return this._isTypeError(toast) ? 30 : 5; + } + + /** + * ** Returns text for Btn CopyToClipboard. + */ + getCopyToClipboardBtnText(toast: ToastInternal): string { + return this._isTypeError(toast) ? 'Copy to clipboard' : ''; + } + + /** + * ** Returns text for Btn Expand/Collapse. + */ + getExpandBtnText(toast: ToastInternal, index: number): string { + if (this._isTypeError(toast)) { + return this.isToastExpanded(index) ? 'less' : 'more'; + } + + return ''; + } + + /** + * @inheritDoc + */ + ngOnInit() { + this.subscriptions.push( + this.toastService.getNotifications().subscribe((toast: Toast) => { + this.toasts.push({ + ...toast, + id: ToastsComponent.generateID(), + time: ToastsComponent.getDateTimeNow() + }); + }), + this.clipboardService.copyResponse$.subscribe((result) => { + if (!result.isSuccess) { + this._handleCopyActionError(); + } + }) + ); + } + + private _isTypeError(toast: Toast): boolean { + return toast.type === VmwToastType.FAILURE && !!toast.error; + } + + private _handleCopyActionError(): void { + this.toasts.push({ + type: VmwToastType.FAILURE, + title: `Copy to clipboard`, + description: `The view definition failed to copy to the clipboard`, + id: ToastsComponent.generateID(), + time: ToastsComponent.getDateTimeNow() + }); + } + + /* eslint-disable @typescript-eslint/member-ordering */ + private static generateID(): number { + return this.toastMessageCounter++; + } + + private static getDateTimeNow(): Date { + return new Date(); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/unit-testing/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/unit-testing/index.ts index 937c1ff272..77178476e0 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/unit-testing/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/unit-testing/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/unit-testing/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/unit-testing/public-api.ts index ba142389bd..484b60ff3c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/unit-testing/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/unit-testing/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/unit-testing/utils/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/unit-testing/utils/index.ts index c9509c2a3c..f0c2bf3482 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/unit-testing/utils/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/unit-testing/utils/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/unit-testing/utils/router-utils.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/unit-testing/utils/router-utils.ts index 28effb9a76..5707307aac 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/unit-testing/utils/router-utils.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/unit-testing/utils/router-utils.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -12,124 +10,134 @@ import { Type } from '@angular/core'; -import { ActivatedRouteSnapshot, Data, Params, Route, UrlSegment } from '@angular/router'; +import { + ActivatedRouteSnapshot, + Data, + Params, + Route, + UrlSegment +} from '@angular/router'; import { CollectionsUtil } from '../../utils'; type ComponentType = Type | string | null; export const createRouteSnapshot = ({ - url = [new UrlSegment('entity/23', {})] as UrlSegment[], - data = { paramKey: 'prime' } as Data, - params = { entityId: 23 } as Params, - queryParams = { search: 'test-team' } as Params, - outlet = 'router-outlet' as string, - component = ComponentStub as ComponentType, - routeConfig = new RouteConfigStub('entity/23', ComponentStub, 'router-outlet'), - firstChild = null as ActivatedRouteSnapshot, - parent = undefined as ActivatedRouteSnapshot - }): ActivatedRouteSnapshot => { - - // @ts-ignore - return new ActivatedRouteSnapshotStub({ - url, - data, - params, - queryParams, - outlet, - component, - routeConfig, - firstChild, - parent: CollectionsUtil.isUndefined(parent) - ? createRouteSnapshot({ - url: [new UrlSegment('domain/context', {})], - data: {}, - params: {}, - queryParams: {}, - outlet: 'router-outlet', - component: null, - routeConfig: new RouteConfigStub('domain/context', null, 'router-outlet'), - firstChild: null, - parent: null - }) - : null - }); + url = [new UrlSegment('entity/23', {})] as UrlSegment[], + data = { paramKey: 'prime' } as Data, + params = { entityId: 23 } as Params, + queryParams = { search: 'test-team' } as Params, + outlet = 'router-outlet' as string, + component = ComponentStub as ComponentType, + routeConfig = new RouteConfigStub( + 'entity/23', + ComponentStub, + 'router-outlet' + ), + firstChild = null as ActivatedRouteSnapshot, + parent = undefined as ActivatedRouteSnapshot +}): ActivatedRouteSnapshot => { + // @ts-ignore + return new ActivatedRouteSnapshotStub({ + url, + data, + params, + queryParams, + outlet, + component, + routeConfig, + firstChild, + parent: CollectionsUtil.isUndefined(parent) + ? createRouteSnapshot({ + url: [new UrlSegment('domain/context', {})], + data: {}, + params: {}, + queryParams: {}, + outlet: 'router-outlet', + component: null, + routeConfig: new RouteConfigStub( + 'domain/context', + null, + 'router-outlet' + ), + firstChild: null, + parent: null + }) + : null + }); }; -export class ComponentStub { -} +export class ComponentStub {} interface RouteSnapshotStub { - url: UrlSegment[]; - data: Data; - params: Params; - queryParams: Params; - outlet: string; - component: Type | string | null; - routeConfig: Route | null; - firstChild: ActivatedRouteSnapshot; - parent: ActivatedRouteSnapshot; + url: UrlSegment[]; + data: Data; + params: Params; + queryParams: Params; + outlet: string; + component: Type | string | null; + routeConfig: Route | null; + firstChild: ActivatedRouteSnapshot; + parent: ActivatedRouteSnapshot; } export class ActivatedRouteSnapshotStub extends ActivatedRouteSnapshot { - override url: UrlSegment[]; - override data: Data; - override params: Params; - override queryParams: Params; - override outlet: string; - // @ts-ignore - override component: Type | string | null; - override readonly routeConfig: Route | null; - - override get parent(): ActivatedRouteSnapshot | null { - return this._parent; - } - - override set parent(parent: ActivatedRouteSnapshot) { - this._parent = parent; - } - - override get firstChild(): ActivatedRouteSnapshot | null { - return this._firstChild; - } - - protected _parent: ActivatedRouteSnapshot; - protected _firstChild: ActivatedRouteSnapshot; - - constructor(snapshot: RouteSnapshotStub) { - super(); - - this.url = snapshot.url; - this.data = snapshot.data; - this.params = snapshot.params; - this.queryParams = snapshot.queryParams; - this.outlet = snapshot.outlet; - this.component = snapshot.component; - this.routeConfig = snapshot.routeConfig; - this._firstChild = snapshot.firstChild; - this._parent = snapshot.parent; - - if (snapshot.firstChild instanceof ActivatedRouteSnapshotStub) { - // @ts-ignore - snapshot.firstChild.parent = this; - } - } - - override toString(): string { - return super.toString(); - } + override url: UrlSegment[]; + override data: Data; + override params: Params; + override queryParams: Params; + override outlet: string; + // @ts-ignore + override component: Type | string | null; + override readonly routeConfig: Route | null; + + override get parent(): ActivatedRouteSnapshot | null { + return this._parent; + } + + override set parent(parent: ActivatedRouteSnapshot) { + this._parent = parent; + } + + override get firstChild(): ActivatedRouteSnapshot | null { + return this._firstChild; + } + + protected _parent: ActivatedRouteSnapshot; + protected _firstChild: ActivatedRouteSnapshot; + + constructor(snapshot: RouteSnapshotStub) { + super(); + + this.url = snapshot.url; + this.data = snapshot.data; + this.params = snapshot.params; + this.queryParams = snapshot.queryParams; + this.outlet = snapshot.outlet; + this.component = snapshot.component; + this.routeConfig = snapshot.routeConfig; + this._firstChild = snapshot.firstChild; + this._parent = snapshot.parent; + + if (snapshot.firstChild instanceof ActivatedRouteSnapshotStub) { + // @ts-ignore + snapshot.firstChild.parent = this; + } + } + + override toString(): string { + return super.toString(); + } } export class RouteConfigStub implements Route { - path: string; - component: Type; - outlet: string; - - constructor(path: string, - component: Type, - outlet: string) { - this.path = path; - this.component = component; - this.outlet = outlet; - } + path: string; + component: Type; + outlet: string; + + constructor(path: string, component: Type, outlet: string) { + this.path = path; + this.component = component; + this.outlet = outlet; + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/unit-testing/utils/unit-test-utils.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/unit-testing/utils/unit-test-utils.ts index f85b0bbb62..33ba4a4394 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/unit-testing/utils/unit-test-utils.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/unit-testing/utils/unit-test-utils.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -16,18 +14,22 @@ * */ export const CallFake = (..._args: any[]): any => { - // No-op. + // No-op. }; /** * ** Utility to trigger keyboard event from some HTMLElement. */ -export const triggerKeyboardEvent = (el: HTMLElement, type: string, keyCode: string) => { - const e = new KeyboardEvent(type, { - code: keyCode, - bubbles: true, - cancelable: true - }); +export const triggerKeyboardEvent = ( + el: HTMLElement, + type: string, + keyCode: string +) => { + const e = new KeyboardEvent(type, { + code: keyCode, + bubbles: true, + cancelable: true + }); - el.dispatchEvent(e); + el.dispatchEvent(e); }; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/collections/collections-util.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/collections/collections-util.spec.ts index 5b18c07bb1..5ca1a836cb 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/collections/collections-util.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/collections/collections-util.spec.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -10,950 +8,1073 @@ import { CollectionsUtil } from './collections-util'; const testObj: { - num: number; - str: string; - arr: any[]; - arrEmpty: any[]; - obj: Record; - objNoProp: Record; - undef: any; - nullVal: null; - bool: boolean; - nan: any; - map: Map; - weakMap: WeakMap; - set: Set; - func: () => void; - date: Date; + num: number; + str: string; + arr: any[]; + arrEmpty: any[]; + obj: Record; + objNoProp: Record; + undef: any; + nullVal: null; + bool: boolean; + nan: any; + map: Map; + weakMap: WeakMap; + set: Set; + func: () => void; + date: Date; } = { - num: 1, - str: 'string', - arr: [1, 2, 3, 4, 5], - arrEmpty: [], - obj: { prop: 1 }, - objNoProp: {}, - undef: undefined, - nullVal: null, - bool: true, - nan: NaN, - map: new Map(), - weakMap: new WeakMap(), - set: new Set(), - func: () => { - // do nothing; - }, - date: new Date() + num: 1, + str: 'string', + arr: [1, 2, 3, 4, 5], + arrEmpty: [], + obj: { prop: 1 }, + objNoProp: {}, + undef: undefined, + nullVal: null, + bool: true, + nan: NaN, + map: new Map(), + weakMap: new WeakMap(), + set: new Set(), + func: () => { + // do nothing; + }, + date: new Date() }; describe('CollectionsUtil::', () => { - describe('Statics', () => { - describe('Methods::()', () => { - describe('|isUndefined|', () => { - it('should verify if undefined', () => { - expect(CollectionsUtil.isUndefined(testObj.undef)).toBeTruthy(); - - expect(CollectionsUtil.isUndefined(testObj.num)).toBeFalsy(); - expect(CollectionsUtil.isUndefined(testObj.str)).toBeFalsy(); - expect(CollectionsUtil.isUndefined(testObj.arr)).toBeFalsy(); - expect(CollectionsUtil.isUndefined(testObj.arrEmpty)).toBeFalsy(); - expect(CollectionsUtil.isUndefined(testObj.obj)).toBeFalsy(); - expect(CollectionsUtil.isUndefined(testObj.objNoProp)).toBeFalsy(); - expect(CollectionsUtil.isUndefined(testObj.nullVal)).toBeFalsy(); - expect(CollectionsUtil.isUndefined(testObj.bool)).toBeFalsy(); - expect(CollectionsUtil.isUndefined(testObj.nan)).toBeFalsy(); - expect(CollectionsUtil.isUndefined(testObj.func)).toBeFalsy(); - }); - }); - - describe('|isNumber|', () => { - it('should verify if number', () => { - expect(CollectionsUtil.isNumber(testObj.num)).toBeTruthy(); - expect(CollectionsUtil.isNumber(testObj.nan)).toBeTruthy(); - - expect(CollectionsUtil.isNumber(testObj.str)).toBeFalsy(); - expect(CollectionsUtil.isNumber(testObj.arr)).toBeFalsy(); - expect(CollectionsUtil.isNumber(testObj.arrEmpty)).toBeFalsy(); - expect(CollectionsUtil.isNumber(testObj.obj)).toBeFalsy(); - expect(CollectionsUtil.isNumber(testObj.objNoProp)).toBeFalsy(); - expect(CollectionsUtil.isNumber(testObj.undef)).toBeFalsy(); - expect(CollectionsUtil.isNumber(testObj.nullVal)).toBeFalsy(); - expect(CollectionsUtil.isNumber(testObj.bool)).toBeFalsy(); - expect(CollectionsUtil.isNumber(testObj.func)).toBeFalsy(); - }); - }); - - describe('|isString|', () => { - it('should verify if string', () => { - expect(CollectionsUtil.isString(testObj.str)).toBeTruthy(); - - expect(CollectionsUtil.isString(testObj.num)).toBeFalsy(); - expect(CollectionsUtil.isString(testObj.arr)).toBeFalsy(); - expect(CollectionsUtil.isString(testObj.arrEmpty)).toBeFalsy(); - expect(CollectionsUtil.isString(testObj.obj)).toBeFalsy(); - expect(CollectionsUtil.isString(testObj.objNoProp)).toBeFalsy(); - expect(CollectionsUtil.isString(testObj.undef)).toBeFalsy(); - expect(CollectionsUtil.isString(testObj.nullVal)).toBeFalsy(); - expect(CollectionsUtil.isString(testObj.bool)).toBeFalsy(); - expect(CollectionsUtil.isString(testObj.nan)).toBeFalsy(); - expect(CollectionsUtil.isString(testObj.func)).toBeFalsy(); - }); - }); - - describe('|isBoolean|', () => { - it('should verify if boolean', () => { - expect(CollectionsUtil.isBoolean(testObj.bool)).toBeTruthy(); - - expect(CollectionsUtil.isBoolean(testObj.num)).toBeFalsy(); - expect(CollectionsUtil.isBoolean(testObj.str)).toBeFalsy(); - expect(CollectionsUtil.isBoolean(testObj.arr)).toBeFalsy(); - expect(CollectionsUtil.isBoolean(testObj.arrEmpty)).toBeFalsy(); - expect(CollectionsUtil.isBoolean(testObj.obj)).toBeFalsy(); - expect(CollectionsUtil.isBoolean(testObj.objNoProp)).toBeFalsy(); - expect(CollectionsUtil.isBoolean(testObj.undef)).toBeFalsy(); - expect(CollectionsUtil.isBoolean(testObj.nullVal)).toBeFalsy(); - expect(CollectionsUtil.isBoolean(testObj.nan)).toBeFalsy(); - expect(CollectionsUtil.isBoolean(testObj.func)).toBeFalsy(); - }); - }); - - describe('|isPrimitive|', () => { - it('should verify if value is Primitive', () => { - expect(CollectionsUtil.isPrimitive(testObj.bool)).toBeTruthy(); - expect(CollectionsUtil.isPrimitive(testObj.num)).toBeTruthy(); - expect(CollectionsUtil.isPrimitive(testObj.nan)).toBeTruthy(); - expect(CollectionsUtil.isPrimitive(testObj.str)).toBeTruthy(); - expect(CollectionsUtil.isPrimitive(testObj.undef)).toBeTruthy(); - - expect(CollectionsUtil.isPrimitive(testObj.arr)).toBeFalsy(); - expect(CollectionsUtil.isPrimitive(testObj.arrEmpty)).toBeFalsy(); - expect(CollectionsUtil.isPrimitive(testObj.obj)).toBeFalsy(); - expect(CollectionsUtil.isPrimitive(testObj.objNoProp)).toBeFalsy(); - expect(CollectionsUtil.isPrimitive(testObj.nullVal)).toBeFalsy(); - expect(CollectionsUtil.isPrimitive(testObj.func)).toBeFalsy(); - }); - }); - - describe('|isObject|', () => { - it('should verify if object', () => { - expect(CollectionsUtil.isObject(testObj.obj)).toBeTruthy(); - expect(CollectionsUtil.isObject(testObj.objNoProp)).toBeTruthy(); - expect(CollectionsUtil.isObject(testObj.arr)).toBeTruthy(); - expect(CollectionsUtil.isObject(testObj.arrEmpty)).toBeTruthy(); - expect(CollectionsUtil.isObject(testObj.nullVal)).toBeTruthy(); - - expect(CollectionsUtil.isObject(testObj.func)).toBeFalsy(); - expect(CollectionsUtil.isObject(testObj.num)).toBeFalsy(); - expect(CollectionsUtil.isObject(testObj.str)).toBeFalsy(); - expect(CollectionsUtil.isObject(testObj.undef)).toBeFalsy(); - expect(CollectionsUtil.isObject(testObj.bool)).toBeFalsy(); - expect(CollectionsUtil.isObject(testObj.nan)).toBeFalsy(); - }); - }); - - describe('|isArray|', () => { - it('should verify if array', () => { - expect(CollectionsUtil.isArray(testObj.arr)).toBeTruthy(); - expect(CollectionsUtil.isArray(testObj.arrEmpty)).toBeTruthy(); - - expect(CollectionsUtil.isArray(testObj.num)).toBeFalsy(); - expect(CollectionsUtil.isArray(testObj.str)).toBeFalsy(); - expect(CollectionsUtil.isArray(testObj.obj)).toBeFalsy(); - expect(CollectionsUtil.isArray(testObj.objNoProp)).toBeFalsy(); - expect(CollectionsUtil.isArray(testObj.undef)).toBeFalsy(); - expect(CollectionsUtil.isArray(testObj.nullVal)).toBeFalsy(); - expect(CollectionsUtil.isArray(testObj.bool)).toBeFalsy(); - expect(CollectionsUtil.isArray(testObj.nan)).toBeFalsy(); - expect(CollectionsUtil.isArray(testObj.func)).toBeFalsy(); - }); - }); - - describe('|isArrayEmpty|', () => { - it('should verify will return true when value is not Array', () => { - expect(CollectionsUtil.isArrayEmpty(testObj.num)).toBeTruthy(); - expect(CollectionsUtil.isArrayEmpty(testObj.str)).toBeTruthy(); - expect(CollectionsUtil.isArrayEmpty(testObj.obj)).toBeTruthy(); - expect(CollectionsUtil.isArrayEmpty(testObj.objNoProp)).toBeTruthy(); - expect(CollectionsUtil.isArrayEmpty(testObj.undef)).toBeTruthy(); - expect(CollectionsUtil.isArrayEmpty(testObj.nullVal)).toBeTruthy(); - expect(CollectionsUtil.isArrayEmpty(testObj.bool)).toBeTruthy(); - expect(CollectionsUtil.isArrayEmpty(testObj.nan)).toBeTruthy(); - expect(CollectionsUtil.isArrayEmpty(testObj.func)).toBeTruthy(); - }); - - it(`should verify will return true when value is Array and doesn't have elements`, () => { - expect(CollectionsUtil.isArrayEmpty(testObj.arrEmpty)).toBeTruthy(); - }); - - it('should verify will return false when value is Array and has elements', () => { - expect(CollectionsUtil.isArrayEmpty(testObj.arr)).toBeFalsy(); - }); - }); - - describe('|isNull|', () => { - it('should verify if null', () => { - expect(CollectionsUtil.isNull(testObj.nullVal)).toBeTruthy(); - - expect(CollectionsUtil.isNull(testObj.num)).toBeFalsy(); - expect(CollectionsUtil.isNull(testObj.str)).toBeFalsy(); - expect(CollectionsUtil.isNull(testObj.arr)).toBeFalsy(); - expect(CollectionsUtil.isNull(testObj.arrEmpty)).toBeFalsy(); - expect(CollectionsUtil.isNull(testObj.obj)).toBeFalsy(); - expect(CollectionsUtil.isNull(testObj.objNoProp)).toBeFalsy(); - expect(CollectionsUtil.isNull(testObj.undef)).toBeFalsy(); - expect(CollectionsUtil.isNull(testObj.bool)).toBeFalsy(); - expect(CollectionsUtil.isNull(testObj.nan)).toBeFalsy(); - expect(CollectionsUtil.isNull(testObj.func)).toBeFalsy(); - }); - }); - - describe('|isNaN|', () => { - it('should verify if nan', () => { - expect(CollectionsUtil.isNaN(testObj.nan)).toBeTruthy(); - - expect(CollectionsUtil.isNaN(testObj.func)).toBeFalsy(); - expect(CollectionsUtil.isNaN(testObj.nullVal)).toBeFalsy(); - expect(CollectionsUtil.isNaN(testObj.num)).toBeFalsy(); - expect(CollectionsUtil.isNaN(testObj.str)).toBeFalsy(); - expect(CollectionsUtil.isNaN(testObj.arr)).toBeFalsy(); - expect(CollectionsUtil.isNaN(testObj.arrEmpty)).toBeFalsy(); - expect(CollectionsUtil.isNaN(testObj.obj)).toBeFalsy(); - expect(CollectionsUtil.isNaN(testObj.objNoProp)).toBeFalsy(); - expect(CollectionsUtil.isNaN(testObj.undef)).toBeFalsy(); - expect(CollectionsUtil.isNaN(testObj.bool)).toBeFalsy(); - }); - }); - - describe('|isDate|', () => { - it('should verify if Date', () => { - expect(CollectionsUtil.isDate(testObj.date)).toBeTruthy(); - - expect(CollectionsUtil.isDate(testObj.nan)).toBeFalsy(); - expect(CollectionsUtil.isDate(testObj.func)).toBeFalsy(); - expect(CollectionsUtil.isDate(testObj.nullVal)).toBeFalsy(); - expect(CollectionsUtil.isDate(testObj.num)).toBeFalsy(); - expect(CollectionsUtil.isDate(testObj.str)).toBeFalsy(); - expect(CollectionsUtil.isDate(testObj.arr)).toBeFalsy(); - expect(CollectionsUtil.isDate(testObj.arrEmpty)).toBeFalsy(); - expect(CollectionsUtil.isDate(testObj.obj)).toBeFalsy(); - expect(CollectionsUtil.isDate(testObj.objNoProp)).toBeFalsy(); - expect(CollectionsUtil.isDate(testObj.undef)).toBeFalsy(); - expect(CollectionsUtil.isDate(testObj.bool)).toBeFalsy(); - }); - }); - - describe('|isPrimitiveOrDate|', () => { - it('should verify if Date or Primitive', () => { - expect(CollectionsUtil.isPrimitiveOrDate(testObj.date)).toBeTruthy(); - expect(CollectionsUtil.isPrimitiveOrDate(testObj.bool)).toBeTruthy(); - expect(CollectionsUtil.isPrimitiveOrDate(testObj.num)).toBeTruthy(); - expect(CollectionsUtil.isPrimitiveOrDate(testObj.nan)).toBeTruthy(); - expect(CollectionsUtil.isPrimitiveOrDate(testObj.str)).toBeTruthy(); - expect(CollectionsUtil.isPrimitiveOrDate(testObj.undef)).toBeTruthy(); - - expect(CollectionsUtil.isPrimitiveOrDate(testObj.arr)).toBeFalsy(); - expect(CollectionsUtil.isPrimitiveOrDate(testObj.arrEmpty)).toBeFalsy(); - expect(CollectionsUtil.isPrimitiveOrDate(testObj.obj)).toBeFalsy(); - expect(CollectionsUtil.isPrimitiveOrDate(testObj.objNoProp)).toBeFalsy(); - expect(CollectionsUtil.isPrimitiveOrDate(testObj.nullVal)).toBeFalsy(); - expect(CollectionsUtil.isPrimitiveOrDate(testObj.func)).toBeFalsy(); - }); - }); - - describe('|isFunction|', () => { - it('should verify if function', () => { - expect(CollectionsUtil.isFunction(testObj.func)).toBeTruthy(); - - expect(CollectionsUtil.isFunction(testObj.nullVal)).toBeFalsy(); - expect(CollectionsUtil.isFunction(testObj.num)).toBeFalsy(); - expect(CollectionsUtil.isFunction(testObj.str)).toBeFalsy(); - expect(CollectionsUtil.isFunction(testObj.arr)).toBeFalsy(); - expect(CollectionsUtil.isFunction(testObj.arrEmpty)).toBeFalsy(); - expect(CollectionsUtil.isFunction(testObj.obj)).toBeFalsy(); - expect(CollectionsUtil.isFunction(testObj.objNoProp)).toBeFalsy(); - expect(CollectionsUtil.isFunction(testObj.undef)).toBeFalsy(); - expect(CollectionsUtil.isFunction(testObj.bool)).toBeFalsy(); - expect(CollectionsUtil.isFunction(testObj.nan)).toBeFalsy(); - }); - }); - - describe('|isBooleanAndTrue|', () => { - it('should verify if boolean and true', () => { - expect(CollectionsUtil.isBooleanAndTrue(testObj.bool)).toBeTruthy(); - expect(CollectionsUtil.isBooleanAndTrue(false)).toBeFalsy(); - - expect(CollectionsUtil.isBooleanAndTrue(testObj.num)).toBeFalsy(); - expect(CollectionsUtil.isBooleanAndTrue(testObj.str)).toBeFalsy(); - expect(CollectionsUtil.isBooleanAndTrue(testObj.arr)).toBeFalsy(); - expect(CollectionsUtil.isBooleanAndTrue(testObj.arrEmpty)).toBeFalsy(); - expect(CollectionsUtil.isBooleanAndTrue(testObj.obj)).toBeFalsy(); - expect(CollectionsUtil.isBooleanAndTrue(testObj.objNoProp)).toBeFalsy(); - expect(CollectionsUtil.isBooleanAndTrue(testObj.undef)).toBeFalsy(); - expect(CollectionsUtil.isBooleanAndTrue(testObj.nullVal)).toBeFalsy(); - expect(CollectionsUtil.isBooleanAndTrue(testObj.nan)).toBeFalsy(); - expect(CollectionsUtil.isBooleanAndTrue(testObj.func)).toBeFalsy(); - }); - }); - - describe('|isLiteralObjectOrNull|', () => { - it('should verify if literal object including null', () => { - expect(CollectionsUtil.isLiteralObjectOrNull(testObj.obj)).toBeTruthy(); - expect(CollectionsUtil.isLiteralObjectOrNull(testObj.objNoProp)).toBeTruthy(); - expect(CollectionsUtil.isLiteralObjectOrNull(testObj.nullVal)).toBeTruthy(); - - expect(CollectionsUtil.isLiteralObjectOrNull(testObj.func)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObjectOrNull(testObj.num)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObjectOrNull(testObj.str)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObjectOrNull(testObj.arr)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObjectOrNull(testObj.arrEmpty)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObjectOrNull(testObj.undef)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObjectOrNull(testObj.bool)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObjectOrNull(testObj.nan)).toBeFalsy(); - }); - }); - - describe('|isLiteralObject|', () => { - it('should verify if literal object', () => { - expect(CollectionsUtil.isLiteralObject(testObj.obj)).toBeTruthy(); - expect(CollectionsUtil.isLiteralObject(testObj.objNoProp)).toBeTruthy(); - - expect(CollectionsUtil.isLiteralObject(testObj.func)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObject(testObj.num)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObject(testObj.str)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObject(testObj.arr)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObject(testObj.arrEmpty)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObject(testObj.undef)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObject(testObj.nullVal)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObject(testObj.bool)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObject(testObj.nan)).toBeFalsy(); - }); - }); - - describe('|isLiteralObjectWithProperties|', () => { - it('should verify if plain object with properties', () => { - expect(CollectionsUtil.isLiteralObjectWithProperties(testObj.obj)).toBeTruthy(); - - expect(CollectionsUtil.isLiteralObjectWithProperties(testObj.func)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObjectWithProperties(testObj.num)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObjectWithProperties(testObj.str)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObjectWithProperties(testObj.arr)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObjectWithProperties(testObj.arrEmpty)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObjectWithProperties(testObj.objNoProp)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObjectWithProperties(testObj.undef)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObjectWithProperties(testObj.nullVal)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObjectWithProperties(testObj.bool)).toBeFalsy(); - expect(CollectionsUtil.isLiteralObjectWithProperties(testObj.nan)).toBeFalsy(); - }); - }); - - describe('|isCollection|', () => { - it('should verify if value is type of Collection', () => { - expect(CollectionsUtil.isCollection(testObj.obj)).toBeTruthy(); - expect(CollectionsUtil.isCollection(testObj.arr)).toBeTruthy(); - expect(CollectionsUtil.isCollection(testObj.arrEmpty)).toBeTruthy(); - expect(CollectionsUtil.isCollection(testObj.objNoProp)).toBeTruthy(); - expect(CollectionsUtil.isCollection(testObj.map)).toBeTruthy(); - expect(CollectionsUtil.isCollection(testObj.weakMap)).toBeTruthy(); - expect(CollectionsUtil.isCollection(testObj.set)).toBeTruthy(); - - expect(CollectionsUtil.isCollection(testObj.func)).toBeFalsy(); - expect(CollectionsUtil.isCollection(testObj.num)).toBeFalsy(); - expect(CollectionsUtil.isCollection(testObj.str)).toBeFalsy(); - expect(CollectionsUtil.isCollection(testObj.undef)).toBeFalsy(); - expect(CollectionsUtil.isCollection(testObj.nullVal)).toBeFalsy(); - expect(CollectionsUtil.isCollection(testObj.bool)).toBeFalsy(); - expect(CollectionsUtil.isCollection(testObj.nan)).toBeFalsy(); - }); - }); - - describe('|isObjectNotNull|', () => { - it('should verify if value is Object but not null', () => { - expect(CollectionsUtil.isObjectNotNull(testObj.obj)).toBeTruthy(); - expect(CollectionsUtil.isObjectNotNull(testObj.arr)).toBeTruthy(); - expect(CollectionsUtil.isObjectNotNull(testObj.arrEmpty)).toBeTruthy(); - expect(CollectionsUtil.isObjectNotNull(testObj.objNoProp)).toBeTruthy(); - expect(CollectionsUtil.isObjectNotNull(testObj.map)).toBeTruthy(); - expect(CollectionsUtil.isObjectNotNull(testObj.weakMap)).toBeTruthy(); - expect(CollectionsUtil.isObjectNotNull(testObj.set)).toBeTruthy(); - - expect(CollectionsUtil.isObjectNotNull(testObj.func)).toBeFalsy(); - expect(CollectionsUtil.isObjectNotNull(testObj.num)).toBeFalsy(); - expect(CollectionsUtil.isObjectNotNull(testObj.str)).toBeFalsy(); - expect(CollectionsUtil.isObjectNotNull(testObj.undef)).toBeFalsy(); - expect(CollectionsUtil.isObjectNotNull(testObj.nullVal)).toBeFalsy(); - expect(CollectionsUtil.isObjectNotNull(testObj.bool)).toBeFalsy(); - expect(CollectionsUtil.isObjectNotNull(testObj.nan)).toBeFalsy(); - }); - }); - - describe('|isObjectWithProperties|', () => { - it('should verify if value is Object and has properties', () => { - expect(CollectionsUtil.isObjectWithProperties(testObj.obj)).toBeTruthy(); - expect(CollectionsUtil.isObjectWithProperties(testObj.arr)).toBeTruthy(); - - expect(CollectionsUtil.isObjectWithProperties(testObj.map)).toBeFalsy(); - expect(CollectionsUtil.isObjectWithProperties(testObj.weakMap)).toBeFalsy(); - expect(CollectionsUtil.isObjectWithProperties(testObj.set)).toBeFalsy(); - expect(CollectionsUtil.isObjectWithProperties(testObj.objNoProp)).toBeFalsy(); - expect(CollectionsUtil.isObjectWithProperties(testObj.arrEmpty)).toBeFalsy(); - expect(CollectionsUtil.isObjectWithProperties(testObj.func)).toBeFalsy(); - expect(CollectionsUtil.isObjectWithProperties(testObj.num)).toBeFalsy(); - expect(CollectionsUtil.isObjectWithProperties(testObj.str)).toBeFalsy(); - expect(CollectionsUtil.isObjectWithProperties(testObj.undef)).toBeFalsy(); - expect(CollectionsUtil.isObjectWithProperties(testObj.nullVal)).toBeFalsy(); - expect(CollectionsUtil.isObjectWithProperties(testObj.bool)).toBeFalsy(); - expect(CollectionsUtil.isObjectWithProperties(testObj.nan)).toBeFalsy(); - }); - }); - - describe('|dateISO|', () => { - it('should verify will return Date in ISO format', () => { - // When - const res = CollectionsUtil.dateISO(); - - // Then - // eslint-disable-next-line max-len - expect(/^(-?(?:[1-9][0-9]*)?[0-9]{4})-(1[0-2]|0[1-9])-(3[01]|0[1-9]|[12][0-9])T(2[0-3]|[01][0-9]):([0-5][0-9]):([0-5][0-9])(\.[0-9]+)?(Z|[+-](?:2[0-3]|[01][0-9]):[0-5][0-9])?$/.test(res)); - }); - }); - - describe('|isEqual|', () => { - it('should verify will return true after deep comparison of two objects', () => { - // Given - const obj1 = { - project: 'aProject', - country: 'aCountry', - teams: ['aTeam', 'bTeam', 'cTeam', 'dTeam'], - managers: { - aTeam: 'aManager', - bTeam: 'bManager' - }, - prod: true, - age: 3, - deps: null - }; - const obj2 = { - project: 'aProject', - country: 'aCountry', - teams: ['aTeam', 'bTeam', 'cTeam', 'dTeam'], - managers: { - aTeam: 'aManager', - bTeam: 'bManager' - }, - prod: true, - age: 3, - deps: null - }; - - // When - const r = CollectionsUtil.isEqual(obj1, obj2); - - // Then - expect(r).toBeTrue(); - }); - }); - - describe('|cloneDeep|', () => { - it('should verify will deep clone provided Object', () => { - // Given - class A { - constructor(protected readonly name: string) { - } - } - - class B extends A { - constructor(name: string, - private readonly surname: string) { - super(name); - } - - getName(): string { - return this.name; - } - - getSurname(): string { - return this.surname; - } - } - - const instance = new B('aUser', 'bUser'); - - // When - const cloned = CollectionsUtil.cloneDeep(instance); - - // Then - expect(cloned).not.toBe(instance); - expect(cloned).toEqual(instance); - expect(cloned.getName()).toEqual('aUser'); - expect(cloned.getSurname()).toEqual('bUser'); - }); - - it('should verify will deep clone provided Array', () => { - // Given - const arr = ['aUser', 'bUser', 'cUser']; - - // When - const cloned = CollectionsUtil.cloneDeep(arr); - - // Then - expect(cloned).not.toBe(arr); - expect(cloned).toEqual(arr); - }); - }); - - describe('|objectValues|', () => { - it('should verify will return Array of values from provided Object', () => { - // Given - const obj = { - prop1: 1, - prop2: 2, - prop3: 3, - prop4: 4, - prop5: 5 - }; - - // When - const values = CollectionsUtil.objectValues(obj); - - // Then - expect(values).toEqual([1, 2, 3, 4, 5]); - }); - }); - - describe('|transformMapToObject|', () => { - it('should verify will remap provided Map to Object', () => { - // Given - const map = new Map(); - map.set('name', 'aName'); - map.set('age', 35); - map.set('surname', 'aSurname'); - map.set('city', 'aCity'); - map.set('graduated', true); - - // When - const obj = CollectionsUtil.transformMapToObject(map); - - // Then - expect(obj).toEqual({ - name: 'aName', - age: 35, - surname: 'aSurname', - city: 'aCity', - graduated: true - }); - }); - }); - - describe('|transformObjectToMap|', () => { - it('should verify will remap provided Object to Map', () => { - // Given - const assertionMap = new Map(); - assertionMap.set('name', 'aName'); - assertionMap.set('age', 35); - assertionMap.set('surname', 'aSurname'); - assertionMap.set('city', 'aCity'); - assertionMap.set('graduated', true); - - const obj: { [key: string]: any } = { - name: 'aName', - age: 35, - surname: 'aSurname', - city: 'aCity', - graduated: true - }; - - // When - const map = CollectionsUtil.transformObjectToMap(obj); - - // Then - expect(map).toEqual(assertionMap); - }); - }); - - describe('|iterateObject|', () => { - it('should verify method will iterate all properties from Object', () => { - // Given - const obj = { - prop1: 'prop1', - prop2: [], - prop3: {}, - prop4: true - }; - - // When/Then - let cnt = 0; - const r = CollectionsUtil.iterateObject(obj, (value, key, collection) => { - expect(obj[key]).toBe(value); - expect(obj).toBe(collection); - cnt++; - }); - - expect(cnt).toEqual(4); - expect(r).toBe(obj); - }); - - it('should verify will return null immediately if there is no iterator provided', () => { - // Given - const obj = { - prop1: 'prop1', - prop2: [], - prop3: {}, - prop4: true - }; - - // When - const r = CollectionsUtil.iterateObject(obj, null); - - // Then - expect(r).toEqual(null); - }); - - it('should verify will return null immediately if value is not literal object', () => { - // Given - const obj = [] as unknown; - - // When/Then - let cnt = 0; - const r = CollectionsUtil.iterateObject(obj as Record, () => { - cnt++; - }); - - expect(cnt).toEqual(0); - expect(r).toEqual(null); - }); - - it('should verify will return null immediately if value is null', () => { - // Given - const obj = null; - - // When/Then - let cnt = 0; - const r = CollectionsUtil.iterateObject(obj, () => { - cnt++; - }); - - expect(cnt).toEqual(0); - expect(r).toEqual(null); - }); - - it('should verify will return null immediately if value is null', () => { - // When/Then - let cnt = 0; - const r = CollectionsUtil.iterateObject(null, () => { - cnt++; - }, 'objectLookLike'); - - expect(cnt).toEqual(0); - expect(r).toEqual(null); - }); - - it('should verify will break iteration if iterator returns false or -1', () => { - // Given - const obj = { - prop1: 'prop1', - prop2: [], - prop3: {}, - prop4: true - }; - - // When/Then - let cnt1 = 0; - // @ts-ignore - const r1 = CollectionsUtil.iterateObject(obj, (value, key, collection) => { - if (cnt1 === 2) { - return false; - } - - expect(obj[key]).toBe(value); - expect(obj).toBe(collection); - cnt1++; - }); - let cnt2 = 0; - // @ts-ignore - const r2 = CollectionsUtil.iterateObject(obj, (value, key, collection) => { - if (cnt2 === 3) { - return -1; - } - - expect(obj[key]).toBe(value); - expect(obj).toBe(collection); - cnt2++; - }); - - expect(cnt2).toEqual(3); - expect(r1).toBe(obj); - expect(r2).toBe(obj); - }); - }); - - describe('|objectPairs|', () => { - it('should verify will return Array of pairs [key, value] from provided Object', () => { - // Given - const obj: { [key: string]: any } = { - prop1: 1, - prop2: 2, - prop3: 3, - prop4: 4, - prop5: 5 - }; - - // When - const values = CollectionsUtil.objectPairs(obj); - - // Then - expect(values).toEqual([ - ['prop1', 1], - ['prop2', 2], - ['prop3', 3], - ['prop4', 4], - ['prop5', 5] - ]); - }); - - it('should verify will return empty Array if provided value is not literal Object', () => { - // When - const values = CollectionsUtil.objectPairs(null); - - // Then - expect(values).toEqual([]); - }); - }); - - describe('|getObjectPropertyDescriptor|', () => { - it('should verify will get Object property descriptor', () => { - // Given - const obj = { user: 'aUser' }; - - // When - const descriptor = CollectionsUtil.getObjectPropertyDescriptor(obj, 'user'); - - // Then - expect(descriptor).toEqual({ - value: 'aUser', - enumerable: true, - configurable: true, - writable: true - }); - }); - - it('should verify will return null if provided value is not Function or Object or key is not String', () => { - // When - const descriptor1 = CollectionsUtil.getObjectPropertyDescriptor(undefined, 'user'); - const descriptor2 = CollectionsUtil.getObjectPropertyDescriptor({}, null); - const descriptor3 = CollectionsUtil.getObjectPropertyDescriptor(function() { - // No-op. - }, null); - - // Then - expect(descriptor1).toEqual(null); - expect(descriptor2).toEqual(null); - expect(descriptor3).toEqual(null); - }); - }); - - describe('|iterateClassStatics|', () => { - it('should verify will return null when no class provided', () => { - // Given - let cnt = 0; - - // When - const result = CollectionsUtil.iterateClassStatics(null, (_descriptor, _key, _fn) => { - cnt++; - }); - - // Then - expect(result).toEqual(null); - expect(cnt).toEqual(0); - }); - }); - - describe('|areMapsEqual|', () => { - it('should verify will return true when maps are same reference', () => { - // Given - const map1 = new Map([['users', ['aUser', 'bUser', 'cUser']]]); - const map2 = map1; - - // When - const result = CollectionsUtil.areMapsEqual(map1, map2); - - // Then - expect(result).toBeTrue(); - }); - - it('should verify will return false when maps are different reference and different size', () => { - // Given - const map1 = new Map([['users', ['aUser', 'bUser', 'cUser']]]); - const map2 = new Map([['holders', ['aHolder', 'bHolder', 'cHolder', 'dHolder']]]); - - // When - const result = CollectionsUtil.areMapsEqual(map1, map2); - - // Then - expect(result).toBeFalse(); - }); - - // eslint-disable-next-line max-len - it('should verify will return false when maps are different reference, same size, same content, different order', () => { - // Given - const map1 = new Map([ - [ - 'users', - ['aUser', 'bUser', 'cUser'] - ], - [ - 'data', - [ - { person: 'aPerson', salary: 89087, age: 35 }, - { person: 'bPerson', salary: 78963, age: 31 }, - { person: 'cPerson', salary: 70664, age: 37 } - ] - ] - ]); - const map2 = new Map([ - [ - 'users', - ['cUser', 'bUser', 'aUser'] - ], - [ - 'data', - [ - { person: 'aPerson', salary: 89087, age: 35 }, - { person: 'bPerson', salary: 78963, age: 31 }, - { person: 'cPerson', salary: 70664, age: 37 } - ] - ] - ]); - const map3 = new Map([ - [ - 'users', - ['aUser', 'bUser', 'cUser'] - ], - [ - 'data', - [ - { person: 'cPerson', salary: 70664, age: 37 }, - { person: 'bPerson', salary: 78963, age: 31 }, - { person: 'aPerson', salary: 89087, age: 35 } - ] - ] - ]); - - // When - const result1 = CollectionsUtil.areMapsEqual(map1, map2); - const result2 = CollectionsUtil.areMapsEqual(map1, map3); - - // Then - expect(result1).toBeFalse(); - expect(result2).toBeFalse(); - }); - - it('should verify will return false when maps are different reference, same size and different content', () => { - // Given - const map1 = new Map([['users', ['aUser', 'bUser', 'cUser']]]); - const map2 = new Map([['users', ['aUser', 'bUser', 'dUser']]]); - const map3 = new Map([['holders', ['aHolder', 'cHolder', 'dHolder']]]); - const map4 = new Map([['val0', 1], ['val2', 2], ['val3', 3], ['val-undefined', undefined]]); - const map5 = new Map([['val0', 1], ['val2', 2], ['val3', 3], ['val4', 4]]); - - // When - const result1 = CollectionsUtil.areMapsEqual(map1, map2); - const result2 = CollectionsUtil.areMapsEqual(map1, map3); - const result3 = CollectionsUtil.areMapsEqual(map4, map5); - - // Then - expect(result1).toBeFalse(); - expect(result2).toBeFalse(); - expect(result3).toBeFalse(); - }); - - it('should verify will return true when maps are different reference, same size and same content', () => { - // Given - const map1 = new Map([ - [ - 'users', - ['aUser', 'bUser', 'cUser'] - ], - [ - 'data', - new Map([ - [ - 'emails', - ['aEmail', 'bEmail', 'cEmail'] - ], - [ - 'payments', - [ - { month: 'June', salary: 88900 }, - { month: 'July', salary: 98431 } - ] - ] - ]) - ] - ]); - const map2 = new Map([ - [ - 'users', - ['aUser', 'bUser', 'cUser'] - ], - [ - 'data', - new Map([ - [ - 'emails', - ['aEmail', 'bEmail', 'cEmail'] - ], - [ - 'payments', - [ - { month: 'June', salary: 88900 }, - { month: 'July', salary: 98431 } - ] - ] - ]) - ] - ]); - const map3 = new Map([['users', 'aUser']]); - const map4 = new Map([['users', 'aUser']]); - - // When - const result1 = CollectionsUtil.areMapsEqual(map1, map2); - const result2 = CollectionsUtil.areMapsEqual(map3, map4); - - // Then - expect(result1).toBeTrue(); - expect(result2).toBeTrue(); - }); - }); - - describe('|interpolateString|', () => { - it('should verify will interpolate provided string replacers', () => { - // Given - const text = 'User %s want to delete entity %s.'; - - // When - const res = CollectionsUtil.interpolateString(text, 'John', '25'); - - // Then - expect(res).toEqual('User John want to delete entity 25.'); - }); - - it('should verify will interpolate provided Replacer replacers', () => { - // Given - const text = 'Error {0} on line [1] because http request "%s%" failure.'; - - // When - const res = CollectionsUtil.interpolateString( - text, - { searchValue: '{0}', replaceValue: 'HttpResponseError' }, - { searchValue: '[1]', replaceValue: '27' }, - { searchValue: '%s%', replaceValue: 'http://xy.com/api/entity/29' } - ); - - // Then - expect(res).toEqual( - 'Error HttpResponseError on line 27 because http request "http://xy.com/api/entity/29" failure.' - ); - }); - }); - }); - }); + describe('Statics', () => { + describe('Methods::()', () => { + describe('|isUndefined|', () => { + it('should verify if undefined', () => { + expect(CollectionsUtil.isUndefined(testObj.undef)).toBeTruthy(); + + expect(CollectionsUtil.isUndefined(testObj.num)).toBeFalsy(); + expect(CollectionsUtil.isUndefined(testObj.str)).toBeFalsy(); + expect(CollectionsUtil.isUndefined(testObj.arr)).toBeFalsy(); + expect(CollectionsUtil.isUndefined(testObj.arrEmpty)).toBeFalsy(); + expect(CollectionsUtil.isUndefined(testObj.obj)).toBeFalsy(); + expect(CollectionsUtil.isUndefined(testObj.objNoProp)).toBeFalsy(); + expect(CollectionsUtil.isUndefined(testObj.nullVal)).toBeFalsy(); + expect(CollectionsUtil.isUndefined(testObj.bool)).toBeFalsy(); + expect(CollectionsUtil.isUndefined(testObj.nan)).toBeFalsy(); + expect(CollectionsUtil.isUndefined(testObj.func)).toBeFalsy(); + }); + }); + + describe('|isNumber|', () => { + it('should verify if number', () => { + expect(CollectionsUtil.isNumber(testObj.num)).toBeTruthy(); + expect(CollectionsUtil.isNumber(testObj.nan)).toBeTruthy(); + + expect(CollectionsUtil.isNumber(testObj.str)).toBeFalsy(); + expect(CollectionsUtil.isNumber(testObj.arr)).toBeFalsy(); + expect(CollectionsUtil.isNumber(testObj.arrEmpty)).toBeFalsy(); + expect(CollectionsUtil.isNumber(testObj.obj)).toBeFalsy(); + expect(CollectionsUtil.isNumber(testObj.objNoProp)).toBeFalsy(); + expect(CollectionsUtil.isNumber(testObj.undef)).toBeFalsy(); + expect(CollectionsUtil.isNumber(testObj.nullVal)).toBeFalsy(); + expect(CollectionsUtil.isNumber(testObj.bool)).toBeFalsy(); + expect(CollectionsUtil.isNumber(testObj.func)).toBeFalsy(); + }); + }); + + describe('|isString|', () => { + it('should verify if string', () => { + expect(CollectionsUtil.isString(testObj.str)).toBeTruthy(); + + expect(CollectionsUtil.isString(testObj.num)).toBeFalsy(); + expect(CollectionsUtil.isString(testObj.arr)).toBeFalsy(); + expect(CollectionsUtil.isString(testObj.arrEmpty)).toBeFalsy(); + expect(CollectionsUtil.isString(testObj.obj)).toBeFalsy(); + expect(CollectionsUtil.isString(testObj.objNoProp)).toBeFalsy(); + expect(CollectionsUtil.isString(testObj.undef)).toBeFalsy(); + expect(CollectionsUtil.isString(testObj.nullVal)).toBeFalsy(); + expect(CollectionsUtil.isString(testObj.bool)).toBeFalsy(); + expect(CollectionsUtil.isString(testObj.nan)).toBeFalsy(); + expect(CollectionsUtil.isString(testObj.func)).toBeFalsy(); + }); + }); + + describe('|isBoolean|', () => { + it('should verify if boolean', () => { + expect(CollectionsUtil.isBoolean(testObj.bool)).toBeTruthy(); + + expect(CollectionsUtil.isBoolean(testObj.num)).toBeFalsy(); + expect(CollectionsUtil.isBoolean(testObj.str)).toBeFalsy(); + expect(CollectionsUtil.isBoolean(testObj.arr)).toBeFalsy(); + expect(CollectionsUtil.isBoolean(testObj.arrEmpty)).toBeFalsy(); + expect(CollectionsUtil.isBoolean(testObj.obj)).toBeFalsy(); + expect(CollectionsUtil.isBoolean(testObj.objNoProp)).toBeFalsy(); + expect(CollectionsUtil.isBoolean(testObj.undef)).toBeFalsy(); + expect(CollectionsUtil.isBoolean(testObj.nullVal)).toBeFalsy(); + expect(CollectionsUtil.isBoolean(testObj.nan)).toBeFalsy(); + expect(CollectionsUtil.isBoolean(testObj.func)).toBeFalsy(); + }); + }); + + describe('|isPrimitive|', () => { + it('should verify if value is Primitive', () => { + expect(CollectionsUtil.isPrimitive(testObj.bool)).toBeTruthy(); + expect(CollectionsUtil.isPrimitive(testObj.num)).toBeTruthy(); + expect(CollectionsUtil.isPrimitive(testObj.nan)).toBeTruthy(); + expect(CollectionsUtil.isPrimitive(testObj.str)).toBeTruthy(); + expect(CollectionsUtil.isPrimitive(testObj.undef)).toBeTruthy(); + + expect(CollectionsUtil.isPrimitive(testObj.arr)).toBeFalsy(); + expect(CollectionsUtil.isPrimitive(testObj.arrEmpty)).toBeFalsy(); + expect(CollectionsUtil.isPrimitive(testObj.obj)).toBeFalsy(); + expect(CollectionsUtil.isPrimitive(testObj.objNoProp)).toBeFalsy(); + expect(CollectionsUtil.isPrimitive(testObj.nullVal)).toBeFalsy(); + expect(CollectionsUtil.isPrimitive(testObj.func)).toBeFalsy(); + }); + }); + + describe('|isObject|', () => { + it('should verify if object', () => { + expect(CollectionsUtil.isObject(testObj.obj)).toBeTruthy(); + expect(CollectionsUtil.isObject(testObj.objNoProp)).toBeTruthy(); + expect(CollectionsUtil.isObject(testObj.arr)).toBeTruthy(); + expect(CollectionsUtil.isObject(testObj.arrEmpty)).toBeTruthy(); + expect(CollectionsUtil.isObject(testObj.nullVal)).toBeTruthy(); + + expect(CollectionsUtil.isObject(testObj.func)).toBeFalsy(); + expect(CollectionsUtil.isObject(testObj.num)).toBeFalsy(); + expect(CollectionsUtil.isObject(testObj.str)).toBeFalsy(); + expect(CollectionsUtil.isObject(testObj.undef)).toBeFalsy(); + expect(CollectionsUtil.isObject(testObj.bool)).toBeFalsy(); + expect(CollectionsUtil.isObject(testObj.nan)).toBeFalsy(); + }); + }); + + describe('|isArray|', () => { + it('should verify if array', () => { + expect(CollectionsUtil.isArray(testObj.arr)).toBeTruthy(); + expect(CollectionsUtil.isArray(testObj.arrEmpty)).toBeTruthy(); + + expect(CollectionsUtil.isArray(testObj.num)).toBeFalsy(); + expect(CollectionsUtil.isArray(testObj.str)).toBeFalsy(); + expect(CollectionsUtil.isArray(testObj.obj)).toBeFalsy(); + expect(CollectionsUtil.isArray(testObj.objNoProp)).toBeFalsy(); + expect(CollectionsUtil.isArray(testObj.undef)).toBeFalsy(); + expect(CollectionsUtil.isArray(testObj.nullVal)).toBeFalsy(); + expect(CollectionsUtil.isArray(testObj.bool)).toBeFalsy(); + expect(CollectionsUtil.isArray(testObj.nan)).toBeFalsy(); + expect(CollectionsUtil.isArray(testObj.func)).toBeFalsy(); + }); + }); + + describe('|isArrayEmpty|', () => { + it('should verify will return true when value is not Array', () => { + expect(CollectionsUtil.isArrayEmpty(testObj.num)).toBeTruthy(); + expect(CollectionsUtil.isArrayEmpty(testObj.str)).toBeTruthy(); + expect(CollectionsUtil.isArrayEmpty(testObj.obj)).toBeTruthy(); + expect(CollectionsUtil.isArrayEmpty(testObj.objNoProp)).toBeTruthy(); + expect(CollectionsUtil.isArrayEmpty(testObj.undef)).toBeTruthy(); + expect(CollectionsUtil.isArrayEmpty(testObj.nullVal)).toBeTruthy(); + expect(CollectionsUtil.isArrayEmpty(testObj.bool)).toBeTruthy(); + expect(CollectionsUtil.isArrayEmpty(testObj.nan)).toBeTruthy(); + expect(CollectionsUtil.isArrayEmpty(testObj.func)).toBeTruthy(); + }); + + it(`should verify will return true when value is Array and doesn't have elements`, () => { + expect(CollectionsUtil.isArrayEmpty(testObj.arrEmpty)).toBeTruthy(); + }); + + it('should verify will return false when value is Array and has elements', () => { + expect(CollectionsUtil.isArrayEmpty(testObj.arr)).toBeFalsy(); + }); + }); + + describe('|isNull|', () => { + it('should verify if null', () => { + expect(CollectionsUtil.isNull(testObj.nullVal)).toBeTruthy(); + + expect(CollectionsUtil.isNull(testObj.num)).toBeFalsy(); + expect(CollectionsUtil.isNull(testObj.str)).toBeFalsy(); + expect(CollectionsUtil.isNull(testObj.arr)).toBeFalsy(); + expect(CollectionsUtil.isNull(testObj.arrEmpty)).toBeFalsy(); + expect(CollectionsUtil.isNull(testObj.obj)).toBeFalsy(); + expect(CollectionsUtil.isNull(testObj.objNoProp)).toBeFalsy(); + expect(CollectionsUtil.isNull(testObj.undef)).toBeFalsy(); + expect(CollectionsUtil.isNull(testObj.bool)).toBeFalsy(); + expect(CollectionsUtil.isNull(testObj.nan)).toBeFalsy(); + expect(CollectionsUtil.isNull(testObj.func)).toBeFalsy(); + }); + }); + + describe('|isNaN|', () => { + it('should verify if nan', () => { + expect(CollectionsUtil.isNaN(testObj.nan)).toBeTruthy(); + + expect(CollectionsUtil.isNaN(testObj.func)).toBeFalsy(); + expect(CollectionsUtil.isNaN(testObj.nullVal)).toBeFalsy(); + expect(CollectionsUtil.isNaN(testObj.num)).toBeFalsy(); + expect(CollectionsUtil.isNaN(testObj.str)).toBeFalsy(); + expect(CollectionsUtil.isNaN(testObj.arr)).toBeFalsy(); + expect(CollectionsUtil.isNaN(testObj.arrEmpty)).toBeFalsy(); + expect(CollectionsUtil.isNaN(testObj.obj)).toBeFalsy(); + expect(CollectionsUtil.isNaN(testObj.objNoProp)).toBeFalsy(); + expect(CollectionsUtil.isNaN(testObj.undef)).toBeFalsy(); + expect(CollectionsUtil.isNaN(testObj.bool)).toBeFalsy(); + }); + }); + + describe('|isDate|', () => { + it('should verify if Date', () => { + expect(CollectionsUtil.isDate(testObj.date)).toBeTruthy(); + + expect(CollectionsUtil.isDate(testObj.nan)).toBeFalsy(); + expect(CollectionsUtil.isDate(testObj.func)).toBeFalsy(); + expect(CollectionsUtil.isDate(testObj.nullVal)).toBeFalsy(); + expect(CollectionsUtil.isDate(testObj.num)).toBeFalsy(); + expect(CollectionsUtil.isDate(testObj.str)).toBeFalsy(); + expect(CollectionsUtil.isDate(testObj.arr)).toBeFalsy(); + expect(CollectionsUtil.isDate(testObj.arrEmpty)).toBeFalsy(); + expect(CollectionsUtil.isDate(testObj.obj)).toBeFalsy(); + expect(CollectionsUtil.isDate(testObj.objNoProp)).toBeFalsy(); + expect(CollectionsUtil.isDate(testObj.undef)).toBeFalsy(); + expect(CollectionsUtil.isDate(testObj.bool)).toBeFalsy(); + }); + }); + + describe('|isPrimitiveOrDate|', () => { + it('should verify if Date or Primitive', () => { + expect(CollectionsUtil.isPrimitiveOrDate(testObj.date)).toBeTruthy(); + expect(CollectionsUtil.isPrimitiveOrDate(testObj.bool)).toBeTruthy(); + expect(CollectionsUtil.isPrimitiveOrDate(testObj.num)).toBeTruthy(); + expect(CollectionsUtil.isPrimitiveOrDate(testObj.nan)).toBeTruthy(); + expect(CollectionsUtil.isPrimitiveOrDate(testObj.str)).toBeTruthy(); + expect(CollectionsUtil.isPrimitiveOrDate(testObj.undef)).toBeTruthy(); + + expect(CollectionsUtil.isPrimitiveOrDate(testObj.arr)).toBeFalsy(); + expect( + CollectionsUtil.isPrimitiveOrDate(testObj.arrEmpty) + ).toBeFalsy(); + expect(CollectionsUtil.isPrimitiveOrDate(testObj.obj)).toBeFalsy(); + expect( + CollectionsUtil.isPrimitiveOrDate(testObj.objNoProp) + ).toBeFalsy(); + expect( + CollectionsUtil.isPrimitiveOrDate(testObj.nullVal) + ).toBeFalsy(); + expect(CollectionsUtil.isPrimitiveOrDate(testObj.func)).toBeFalsy(); + }); + }); + + describe('|isFunction|', () => { + it('should verify if function', () => { + expect(CollectionsUtil.isFunction(testObj.func)).toBeTruthy(); + + expect(CollectionsUtil.isFunction(testObj.nullVal)).toBeFalsy(); + expect(CollectionsUtil.isFunction(testObj.num)).toBeFalsy(); + expect(CollectionsUtil.isFunction(testObj.str)).toBeFalsy(); + expect(CollectionsUtil.isFunction(testObj.arr)).toBeFalsy(); + expect(CollectionsUtil.isFunction(testObj.arrEmpty)).toBeFalsy(); + expect(CollectionsUtil.isFunction(testObj.obj)).toBeFalsy(); + expect(CollectionsUtil.isFunction(testObj.objNoProp)).toBeFalsy(); + expect(CollectionsUtil.isFunction(testObj.undef)).toBeFalsy(); + expect(CollectionsUtil.isFunction(testObj.bool)).toBeFalsy(); + expect(CollectionsUtil.isFunction(testObj.nan)).toBeFalsy(); + }); + }); + + describe('|isBooleanAndTrue|', () => { + it('should verify if boolean and true', () => { + expect(CollectionsUtil.isBooleanAndTrue(testObj.bool)).toBeTruthy(); + expect(CollectionsUtil.isBooleanAndTrue(false)).toBeFalsy(); + + expect(CollectionsUtil.isBooleanAndTrue(testObj.num)).toBeFalsy(); + expect(CollectionsUtil.isBooleanAndTrue(testObj.str)).toBeFalsy(); + expect(CollectionsUtil.isBooleanAndTrue(testObj.arr)).toBeFalsy(); + expect( + CollectionsUtil.isBooleanAndTrue(testObj.arrEmpty) + ).toBeFalsy(); + expect(CollectionsUtil.isBooleanAndTrue(testObj.obj)).toBeFalsy(); + expect( + CollectionsUtil.isBooleanAndTrue(testObj.objNoProp) + ).toBeFalsy(); + expect(CollectionsUtil.isBooleanAndTrue(testObj.undef)).toBeFalsy(); + expect(CollectionsUtil.isBooleanAndTrue(testObj.nullVal)).toBeFalsy(); + expect(CollectionsUtil.isBooleanAndTrue(testObj.nan)).toBeFalsy(); + expect(CollectionsUtil.isBooleanAndTrue(testObj.func)).toBeFalsy(); + }); + }); + + describe('|isLiteralObjectOrNull|', () => { + it('should verify if literal object including null', () => { + expect( + CollectionsUtil.isLiteralObjectOrNull(testObj.obj) + ).toBeTruthy(); + expect( + CollectionsUtil.isLiteralObjectOrNull(testObj.objNoProp) + ).toBeTruthy(); + expect( + CollectionsUtil.isLiteralObjectOrNull(testObj.nullVal) + ).toBeTruthy(); + + expect( + CollectionsUtil.isLiteralObjectOrNull(testObj.func) + ).toBeFalsy(); + expect( + CollectionsUtil.isLiteralObjectOrNull(testObj.num) + ).toBeFalsy(); + expect( + CollectionsUtil.isLiteralObjectOrNull(testObj.str) + ).toBeFalsy(); + expect( + CollectionsUtil.isLiteralObjectOrNull(testObj.arr) + ).toBeFalsy(); + expect( + CollectionsUtil.isLiteralObjectOrNull(testObj.arrEmpty) + ).toBeFalsy(); + expect( + CollectionsUtil.isLiteralObjectOrNull(testObj.undef) + ).toBeFalsy(); + expect( + CollectionsUtil.isLiteralObjectOrNull(testObj.bool) + ).toBeFalsy(); + expect( + CollectionsUtil.isLiteralObjectOrNull(testObj.nan) + ).toBeFalsy(); + }); + }); + + describe('|isLiteralObject|', () => { + it('should verify if literal object', () => { + expect(CollectionsUtil.isLiteralObject(testObj.obj)).toBeTruthy(); + expect( + CollectionsUtil.isLiteralObject(testObj.objNoProp) + ).toBeTruthy(); + + expect(CollectionsUtil.isLiteralObject(testObj.func)).toBeFalsy(); + expect(CollectionsUtil.isLiteralObject(testObj.num)).toBeFalsy(); + expect(CollectionsUtil.isLiteralObject(testObj.str)).toBeFalsy(); + expect(CollectionsUtil.isLiteralObject(testObj.arr)).toBeFalsy(); + expect(CollectionsUtil.isLiteralObject(testObj.arrEmpty)).toBeFalsy(); + expect(CollectionsUtil.isLiteralObject(testObj.undef)).toBeFalsy(); + expect(CollectionsUtil.isLiteralObject(testObj.nullVal)).toBeFalsy(); + expect(CollectionsUtil.isLiteralObject(testObj.bool)).toBeFalsy(); + expect(CollectionsUtil.isLiteralObject(testObj.nan)).toBeFalsy(); + }); + }); + + describe('|isLiteralObjectWithProperties|', () => { + it('should verify if plain object with properties', () => { + expect( + CollectionsUtil.isLiteralObjectWithProperties(testObj.obj) + ).toBeTruthy(); + + expect( + CollectionsUtil.isLiteralObjectWithProperties(testObj.func) + ).toBeFalsy(); + expect( + CollectionsUtil.isLiteralObjectWithProperties(testObj.num) + ).toBeFalsy(); + expect( + CollectionsUtil.isLiteralObjectWithProperties(testObj.str) + ).toBeFalsy(); + expect( + CollectionsUtil.isLiteralObjectWithProperties(testObj.arr) + ).toBeFalsy(); + expect( + CollectionsUtil.isLiteralObjectWithProperties(testObj.arrEmpty) + ).toBeFalsy(); + expect( + CollectionsUtil.isLiteralObjectWithProperties(testObj.objNoProp) + ).toBeFalsy(); + expect( + CollectionsUtil.isLiteralObjectWithProperties(testObj.undef) + ).toBeFalsy(); + expect( + CollectionsUtil.isLiteralObjectWithProperties(testObj.nullVal) + ).toBeFalsy(); + expect( + CollectionsUtil.isLiteralObjectWithProperties(testObj.bool) + ).toBeFalsy(); + expect( + CollectionsUtil.isLiteralObjectWithProperties(testObj.nan) + ).toBeFalsy(); + }); + }); + + describe('|isCollection|', () => { + it('should verify if value is type of Collection', () => { + expect(CollectionsUtil.isCollection(testObj.obj)).toBeTruthy(); + expect(CollectionsUtil.isCollection(testObj.arr)).toBeTruthy(); + expect(CollectionsUtil.isCollection(testObj.arrEmpty)).toBeTruthy(); + expect(CollectionsUtil.isCollection(testObj.objNoProp)).toBeTruthy(); + expect(CollectionsUtil.isCollection(testObj.map)).toBeTruthy(); + expect(CollectionsUtil.isCollection(testObj.weakMap)).toBeTruthy(); + expect(CollectionsUtil.isCollection(testObj.set)).toBeTruthy(); + + expect(CollectionsUtil.isCollection(testObj.func)).toBeFalsy(); + expect(CollectionsUtil.isCollection(testObj.num)).toBeFalsy(); + expect(CollectionsUtil.isCollection(testObj.str)).toBeFalsy(); + expect(CollectionsUtil.isCollection(testObj.undef)).toBeFalsy(); + expect(CollectionsUtil.isCollection(testObj.nullVal)).toBeFalsy(); + expect(CollectionsUtil.isCollection(testObj.bool)).toBeFalsy(); + expect(CollectionsUtil.isCollection(testObj.nan)).toBeFalsy(); + }); + }); + + describe('|isObjectNotNull|', () => { + it('should verify if value is Object but not null', () => { + expect(CollectionsUtil.isObjectNotNull(testObj.obj)).toBeTruthy(); + expect(CollectionsUtil.isObjectNotNull(testObj.arr)).toBeTruthy(); + expect( + CollectionsUtil.isObjectNotNull(testObj.arrEmpty) + ).toBeTruthy(); + expect( + CollectionsUtil.isObjectNotNull(testObj.objNoProp) + ).toBeTruthy(); + expect(CollectionsUtil.isObjectNotNull(testObj.map)).toBeTruthy(); + expect(CollectionsUtil.isObjectNotNull(testObj.weakMap)).toBeTruthy(); + expect(CollectionsUtil.isObjectNotNull(testObj.set)).toBeTruthy(); + + expect(CollectionsUtil.isObjectNotNull(testObj.func)).toBeFalsy(); + expect(CollectionsUtil.isObjectNotNull(testObj.num)).toBeFalsy(); + expect(CollectionsUtil.isObjectNotNull(testObj.str)).toBeFalsy(); + expect(CollectionsUtil.isObjectNotNull(testObj.undef)).toBeFalsy(); + expect(CollectionsUtil.isObjectNotNull(testObj.nullVal)).toBeFalsy(); + expect(CollectionsUtil.isObjectNotNull(testObj.bool)).toBeFalsy(); + expect(CollectionsUtil.isObjectNotNull(testObj.nan)).toBeFalsy(); + }); + }); + + describe('|isObjectWithProperties|', () => { + it('should verify if value is Object and has properties', () => { + expect( + CollectionsUtil.isObjectWithProperties(testObj.obj) + ).toBeTruthy(); + expect( + CollectionsUtil.isObjectWithProperties(testObj.arr) + ).toBeTruthy(); + + expect( + CollectionsUtil.isObjectWithProperties(testObj.map) + ).toBeFalsy(); + expect( + CollectionsUtil.isObjectWithProperties(testObj.weakMap) + ).toBeFalsy(); + expect( + CollectionsUtil.isObjectWithProperties(testObj.set) + ).toBeFalsy(); + expect( + CollectionsUtil.isObjectWithProperties(testObj.objNoProp) + ).toBeFalsy(); + expect( + CollectionsUtil.isObjectWithProperties(testObj.arrEmpty) + ).toBeFalsy(); + expect( + CollectionsUtil.isObjectWithProperties(testObj.func) + ).toBeFalsy(); + expect( + CollectionsUtil.isObjectWithProperties(testObj.num) + ).toBeFalsy(); + expect( + CollectionsUtil.isObjectWithProperties(testObj.str) + ).toBeFalsy(); + expect( + CollectionsUtil.isObjectWithProperties(testObj.undef) + ).toBeFalsy(); + expect( + CollectionsUtil.isObjectWithProperties(testObj.nullVal) + ).toBeFalsy(); + expect( + CollectionsUtil.isObjectWithProperties(testObj.bool) + ).toBeFalsy(); + expect( + CollectionsUtil.isObjectWithProperties(testObj.nan) + ).toBeFalsy(); + }); + }); + + describe('|dateISO|', () => { + it('should verify will return Date in ISO format', () => { + // When + const res = CollectionsUtil.dateISO(); + + // Then + // eslint-disable-next-line max-len + expect( + /^(-?(?:[1-9][0-9]*)?[0-9]{4})-(1[0-2]|0[1-9])-(3[01]|0[1-9]|[12][0-9])T(2[0-3]|[01][0-9]):([0-5][0-9]):([0-5][0-9])(\.[0-9]+)?(Z|[+-](?:2[0-3]|[01][0-9]):[0-5][0-9])?$/.test( + res + ) + ); + }); + }); + + describe('|isEqual|', () => { + it('should verify will return true after deep comparison of two objects', () => { + // Given + const obj1 = { + project: 'aProject', + country: 'aCountry', + teams: ['aTeam', 'bTeam', 'cTeam', 'dTeam'], + managers: { + aTeam: 'aManager', + bTeam: 'bManager' + }, + prod: true, + age: 3, + deps: null + }; + const obj2 = { + project: 'aProject', + country: 'aCountry', + teams: ['aTeam', 'bTeam', 'cTeam', 'dTeam'], + managers: { + aTeam: 'aManager', + bTeam: 'bManager' + }, + prod: true, + age: 3, + deps: null + }; + + // When + const r = CollectionsUtil.isEqual(obj1, obj2); + + // Then + expect(r).toBeTrue(); + }); + }); + + describe('|cloneDeep|', () => { + it('should verify will deep clone provided Object', () => { + // Given + class A { + constructor(protected readonly name: string) {} + } + + class B extends A { + constructor(name: string, private readonly surname: string) { + super(name); + } + + getName(): string { + return this.name; + } + + getSurname(): string { + return this.surname; + } + } + + const instance = new B('aUser', 'bUser'); + + // When + const cloned = CollectionsUtil.cloneDeep(instance); + + // Then + expect(cloned).not.toBe(instance); + expect(cloned).toEqual(instance); + expect(cloned.getName()).toEqual('aUser'); + expect(cloned.getSurname()).toEqual('bUser'); + }); + + it('should verify will deep clone provided Array', () => { + // Given + const arr = ['aUser', 'bUser', 'cUser']; + + // When + const cloned = CollectionsUtil.cloneDeep(arr); + + // Then + expect(cloned).not.toBe(arr); + expect(cloned).toEqual(arr); + }); + }); + + describe('|objectValues|', () => { + it('should verify will return Array of values from provided Object', () => { + // Given + const obj = { + prop1: 1, + prop2: 2, + prop3: 3, + prop4: 4, + prop5: 5 + }; + + // When + const values = CollectionsUtil.objectValues(obj); + + // Then + expect(values).toEqual([1, 2, 3, 4, 5]); + }); + }); + + describe('|transformMapToObject|', () => { + it('should verify will remap provided Map to Object', () => { + // Given + const map = new Map(); + map.set('name', 'aName'); + map.set('age', 35); + map.set('surname', 'aSurname'); + map.set('city', 'aCity'); + map.set('graduated', true); + + // When + const obj = CollectionsUtil.transformMapToObject(map); + + // Then + expect(obj).toEqual({ + name: 'aName', + age: 35, + surname: 'aSurname', + city: 'aCity', + graduated: true + }); + }); + }); + + describe('|transformObjectToMap|', () => { + it('should verify will remap provided Object to Map', () => { + // Given + const assertionMap = new Map(); + assertionMap.set('name', 'aName'); + assertionMap.set('age', 35); + assertionMap.set('surname', 'aSurname'); + assertionMap.set('city', 'aCity'); + assertionMap.set('graduated', true); + + const obj: { [key: string]: any } = { + name: 'aName', + age: 35, + surname: 'aSurname', + city: 'aCity', + graduated: true + }; + + // When + const map = CollectionsUtil.transformObjectToMap(obj); + + // Then + expect(map).toEqual(assertionMap); + }); + }); + + describe('|iterateObject|', () => { + it('should verify method will iterate all properties from Object', () => { + // Given + const obj = { + prop1: 'prop1', + prop2: [], + prop3: {}, + prop4: true + }; + + // When/Then + let cnt = 0; + const r = CollectionsUtil.iterateObject( + obj, + (value, key, collection) => { + expect(obj[key]).toBe(value); + expect(obj).toBe(collection); + cnt++; + } + ); + + expect(cnt).toEqual(4); + expect(r).toBe(obj); + }); + + it('should verify will return null immediately if there is no iterator provided', () => { + // Given + const obj = { + prop1: 'prop1', + prop2: [], + prop3: {}, + prop4: true + }; + + // When + const r = CollectionsUtil.iterateObject(obj, null); + + // Then + expect(r).toEqual(null); + }); + + it('should verify will return null immediately if value is not literal object', () => { + // Given + const obj = [] as unknown; + + // When/Then + let cnt = 0; + const r = CollectionsUtil.iterateObject( + obj as Record, + () => { + cnt++; + } + ); + + expect(cnt).toEqual(0); + expect(r).toEqual(null); + }); + + it('should verify will return null immediately if value is null', () => { + // Given + const obj = null; + + // When/Then + let cnt = 0; + const r = CollectionsUtil.iterateObject(obj, () => { + cnt++; + }); + + expect(cnt).toEqual(0); + expect(r).toEqual(null); + }); + + it('should verify will return null immediately if value is null', () => { + // When/Then + let cnt = 0; + const r = CollectionsUtil.iterateObject( + null, + () => { + cnt++; + }, + 'objectLookLike' + ); + + expect(cnt).toEqual(0); + expect(r).toEqual(null); + }); + + it('should verify will break iteration if iterator returns false or -1', () => { + // Given + const obj = { + prop1: 'prop1', + prop2: [], + prop3: {}, + prop4: true + }; + + // When/Then + let cnt1 = 0; + // @ts-ignore + const r1 = CollectionsUtil.iterateObject( + obj, + (value, key, collection) => { + if (cnt1 === 2) { + return false; + } + + expect(obj[key]).toBe(value); + expect(obj).toBe(collection); + cnt1++; + } + ); + let cnt2 = 0; + // @ts-ignore + const r2 = CollectionsUtil.iterateObject( + obj, + (value, key, collection) => { + if (cnt2 === 3) { + return -1; + } + + expect(obj[key]).toBe(value); + expect(obj).toBe(collection); + cnt2++; + } + ); + + expect(cnt2).toEqual(3); + expect(r1).toBe(obj); + expect(r2).toBe(obj); + }); + }); + + describe('|objectPairs|', () => { + it('should verify will return Array of pairs [key, value] from provided Object', () => { + // Given + const obj: { [key: string]: any } = { + prop1: 1, + prop2: 2, + prop3: 3, + prop4: 4, + prop5: 5 + }; + + // When + const values = CollectionsUtil.objectPairs(obj); + + // Then + expect(values).toEqual([ + ['prop1', 1], + ['prop2', 2], + ['prop3', 3], + ['prop4', 4], + ['prop5', 5] + ]); + }); + + it('should verify will return empty Array if provided value is not literal Object', () => { + // When + const values = CollectionsUtil.objectPairs(null); + + // Then + expect(values).toEqual([]); + }); + }); + + describe('|getObjectPropertyDescriptor|', () => { + it('should verify will get Object property descriptor', () => { + // Given + const obj = { user: 'aUser' }; + + // When + const descriptor = CollectionsUtil.getObjectPropertyDescriptor( + obj, + 'user' + ); + + // Then + expect(descriptor).toEqual({ + value: 'aUser', + enumerable: true, + configurable: true, + writable: true + }); + }); + + it('should verify will return null if provided value is not Function or Object or key is not String', () => { + // When + const descriptor1 = CollectionsUtil.getObjectPropertyDescriptor( + undefined, + 'user' + ); + const descriptor2 = CollectionsUtil.getObjectPropertyDescriptor( + {}, + null + ); + const descriptor3 = CollectionsUtil.getObjectPropertyDescriptor( + function () { + // No-op. + }, + null + ); + + // Then + expect(descriptor1).toEqual(null); + expect(descriptor2).toEqual(null); + expect(descriptor3).toEqual(null); + }); + }); + + describe('|iterateClassStatics|', () => { + it('should verify will return null when no class provided', () => { + // Given + let cnt = 0; + + // When + const result = CollectionsUtil.iterateClassStatics( + null, + (_descriptor, _key, _fn) => { + cnt++; + } + ); + + // Then + expect(result).toEqual(null); + expect(cnt).toEqual(0); + }); + }); + + describe('|areMapsEqual|', () => { + it('should verify will return true when maps are same reference', () => { + // Given + const map1 = new Map([ + ['users', ['aUser', 'bUser', 'cUser']] + ]); + const map2 = map1; + + // When + const result = CollectionsUtil.areMapsEqual(map1, map2); + + // Then + expect(result).toBeTrue(); + }); + + it('should verify will return false when maps are different reference and different size', () => { + // Given + const map1 = new Map([ + ['users', ['aUser', 'bUser', 'cUser']] + ]); + const map2 = new Map([ + ['holders', ['aHolder', 'bHolder', 'cHolder', 'dHolder']] + ]); + + // When + const result = CollectionsUtil.areMapsEqual(map1, map2); + + // Then + expect(result).toBeFalse(); + }); + + // eslint-disable-next-line max-len + it('should verify will return false when maps are different reference, same size, same content, different order', () => { + // Given + const map1 = new Map([ + ['users', ['aUser', 'bUser', 'cUser']], + [ + 'data', + [ + { person: 'aPerson', salary: 89087, age: 35 }, + { person: 'bPerson', salary: 78963, age: 31 }, + { person: 'cPerson', salary: 70664, age: 37 } + ] + ] + ]); + const map2 = new Map([ + ['users', ['cUser', 'bUser', 'aUser']], + [ + 'data', + [ + { person: 'aPerson', salary: 89087, age: 35 }, + { person: 'bPerson', salary: 78963, age: 31 }, + { person: 'cPerson', salary: 70664, age: 37 } + ] + ] + ]); + const map3 = new Map([ + ['users', ['aUser', 'bUser', 'cUser']], + [ + 'data', + [ + { person: 'cPerson', salary: 70664, age: 37 }, + { person: 'bPerson', salary: 78963, age: 31 }, + { person: 'aPerson', salary: 89087, age: 35 } + ] + ] + ]); + + // When + const result1 = CollectionsUtil.areMapsEqual(map1, map2); + const result2 = CollectionsUtil.areMapsEqual(map1, map3); + + // Then + expect(result1).toBeFalse(); + expect(result2).toBeFalse(); + }); + + it('should verify will return false when maps are different reference, same size and different content', () => { + // Given + const map1 = new Map([ + ['users', ['aUser', 'bUser', 'cUser']] + ]); + const map2 = new Map([ + ['users', ['aUser', 'bUser', 'dUser']] + ]); + const map3 = new Map([ + ['holders', ['aHolder', 'cHolder', 'dHolder']] + ]); + const map4 = new Map([ + ['val0', 1], + ['val2', 2], + ['val3', 3], + ['val-undefined', undefined] + ]); + const map5 = new Map([ + ['val0', 1], + ['val2', 2], + ['val3', 3], + ['val4', 4] + ]); + + // When + const result1 = CollectionsUtil.areMapsEqual(map1, map2); + const result2 = CollectionsUtil.areMapsEqual(map1, map3); + const result3 = CollectionsUtil.areMapsEqual(map4, map5); + + // Then + expect(result1).toBeFalse(); + expect(result2).toBeFalse(); + expect(result3).toBeFalse(); + }); + + it('should verify will return true when maps are different reference, same size and same content', () => { + // Given + const map1 = new Map([ + ['users', ['aUser', 'bUser', 'cUser']], + [ + 'data', + new Map([ + ['emails', ['aEmail', 'bEmail', 'cEmail']], + [ + 'payments', + [ + { month: 'June', salary: 88900 }, + { month: 'July', salary: 98431 } + ] + ] + ]) + ] + ]); + const map2 = new Map([ + ['users', ['aUser', 'bUser', 'cUser']], + [ + 'data', + new Map([ + ['emails', ['aEmail', 'bEmail', 'cEmail']], + [ + 'payments', + [ + { month: 'June', salary: 88900 }, + { month: 'July', salary: 98431 } + ] + ] + ]) + ] + ]); + const map3 = new Map([['users', 'aUser']]); + const map4 = new Map([['users', 'aUser']]); + + // When + const result1 = CollectionsUtil.areMapsEqual(map1, map2); + const result2 = CollectionsUtil.areMapsEqual(map3, map4); + + // Then + expect(result1).toBeTrue(); + expect(result2).toBeTrue(); + }); + }); + + describe('|interpolateString|', () => { + it('should verify will interpolate provided string replacers', () => { + // Given + const text = 'User %s want to delete entity %s.'; + + // When + const res = CollectionsUtil.interpolateString(text, 'John', '25'); + + // Then + expect(res).toEqual('User John want to delete entity 25.'); + }); + + it('should verify will interpolate provided Replacer replacers', () => { + // Given + const text = + 'Error {0} on line [1] because http request "%s%" failure.'; + + // When + const res = CollectionsUtil.interpolateString( + text, + { searchValue: '{0}', replaceValue: 'HttpResponseError' }, + { searchValue: '[1]', replaceValue: '27' }, + { searchValue: '%s%', replaceValue: 'http://xy.com/api/entity/29' } + ); + + // Then + expect(res).toEqual( + 'Error HttpResponseError on line 27 because http request "http://xy.com/api/entity/29" failure.' + ); + }); + }); + }); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/collections/collections-util.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/collections/collections-util.ts index 71ab20b3e4..97ed9c88bd 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/collections/collections-util.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/collections/collections-util.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -11,428 +9,499 @@ import { cloneDeep, isEqual } from 'lodash'; import { Replacer } from '../../common'; -import { Collections, IteratorFnResult, LiteralObjectOrNull, Nil, ObjectIterator, Primitives, PrimitivesDate, Subtract } from '../model'; +import { + Collections, + IteratorFnResult, + LiteralObjectOrNull, + Nil, + ObjectIterator, + Primitives, + PrimitivesDate, + Subtract +} from '../model'; /** * ** Utility Class for Collections. */ export class CollectionsUtil { - /** - * ** Check if value is of type undefined. - */ - static isUndefined(value: any): value is undefined { - return typeof value === 'undefined'; - } - - /** - * ** Check if value has value null. - */ - static isNull(value: any): value is null { - return value === null; - } - - /** - * ** Check if value is undefined or null. - */ - static isNil(value: any): value is Nil { - return CollectionsUtil.isNull(value) || CollectionsUtil.isUndefined(value); - } - - /** - * ** Check if value is defined (opposite of isNil). - * - * - Not null. - * - Not undefined. - */ - static isDefined(value: T): boolean { - return !CollectionsUtil.isNull(value) && !CollectionsUtil.isUndefined(value); - } - - /** - * ** Check if value T is of type Number. - */ - static isNumber(num: T | any): num is number { - return typeof num === 'number'; - } - - /** - * ** Check if value T is of type String. - */ - static isString(str: T | any): str is string { - return typeof str === 'string'; - } - - /** - * ** Check if value T is of type Boolean. - */ - static isBoolean(bool: T | any): bool is boolean { - return typeof bool === 'boolean'; - } - - /** - * ** Check if value is Primitive. - * - * - String, Number, Boolean, null or undefined. - */ - static isPrimitive(value: any): value is (Primitives | Nil) { - return CollectionsUtil.isString(value) || - CollectionsUtil.isBoolean(value) || - CollectionsUtil.isNumber(value) || - CollectionsUtil.isUndefined(value); - } - - /** - * ** Check if value is NaN. - */ - static isNaN(value: T | any): boolean { - return Number.isNaN(value); - } - - /** - * ** Check if value is of type Date. - */ - static isDate(value: any): value is Date { - return value instanceof Date; - } - - /** - * ** Check if value is Primitive or Date. - * - * - String, Number, Boolean, null, undefined or Date. - */ - static isPrimitiveOrDate(value: T | any): value is (Primitives | Nil | Date) { - return CollectionsUtil.isPrimitive(value) || CollectionsUtil.isDate(value); - } - - /** - * ** Check if value T is a reference that points to function (Class/Method). - */ - // eslint-disable-next-line - static isFunction any>(value: T | any): value is (...args: any[]) => any { - return typeof value === 'function'; - } - - /** - * ** Check if value T is of type Object. - */ - static isObject>(obj: T | any): obj is Record { - return typeof obj === 'object'; - } - - /** - * ** Check if value T is instance of Array. - */ - static isArray(arr: T | any): arr is (T extends any[] ? T : any[]) { - return arr instanceof Array; - } - - /** - * ** Check if value T is not instance of Array or there are no elements in Array. - */ - static isArrayEmpty(arr: T | any): boolean { - return !CollectionsUtil.isArray(arr) || arr.length === 0; - } - - /** - * ** Check if value is Map. - */ - static isMap(obj: Map | any): obj is Map { - return obj instanceof Map; - } - - /** - * ** Check if value is WeakMap. - */ - static isWeakMap(obj: WeakMap | any): obj is WeakMap { - return obj instanceof WeakMap; - } - - /** - * ** Check if value is Set. - */ - static isSet(obj: Set | any): obj is Set { - return obj instanceof Set; - } - - /** - * ** Check if value is Collection (literal Object, Array, Map, WeakMap or Set). - */ - static isCollection(obj: Collections | any): obj is Collections { - return CollectionsUtil.isArray(obj) || - CollectionsUtil.isMap(obj) || - CollectionsUtil.isWeakMap(obj) || - CollectionsUtil.isSet(obj) || - CollectionsUtil.isLiteralObject(obj); - } - - /** - * ** Check if value is of type Object and not null. - */ - static isObjectNotNull>(obj: T | any): - obj is Record & Subtract, null> { - - return CollectionsUtil.isObject(obj) && !CollectionsUtil.isNull(obj); - } - - /** - * ** Check if some variable is of type Boolean and is true. - */ - static isBooleanAndTrue(bool: boolean | any): boolean { - return CollectionsUtil.isBoolean(bool) && bool; - } - - /** - * ** Check if value is literal Object or null. - * - * - Not an Array, Map, WeakMap or Set. - */ - static isLiteralObjectOrNull>(obj: T | any): obj is LiteralObjectOrNull { - return CollectionsUtil.isObject(obj) && - !CollectionsUtil.isArray(obj) && - !CollectionsUtil.isMap(obj) && - !CollectionsUtil.isWeakMap(obj) && - !CollectionsUtil.isSet(obj); - } - - /** - * ** Check if provided value is literal Object. - * - * - Not and Array, Map, WeakMap, Set or null. - */ - static isLiteralObject>(obj: T | any): boolean { - return CollectionsUtil.isLiteralObjectOrNull(obj) && !CollectionsUtil.isNull(obj); - } - - /** - * ** Check if value is Object and has properties. - */ - static isObjectWithProperties>(obj: T | any): boolean { - return CollectionsUtil.isObjectNotNull(obj) && Object.keys(obj).length > 0; - } - - /** - * ** Return current Date in ISO string format. - */ - static dateISO(): string { - return new Date().toISOString(); - } - - /** - * ** Performs deep comparison between two values to determine if the are equivalent. - */ - static isEqual(value1: any, value2: any): boolean { - return isEqual(value1, value2); - } - - /** - * ** Create recursive deep cloned value from provided one. - */ - static cloneDeep(value: T): T { - return cloneDeep(value); - } - - /** - * ** Iterates own enumerable properties in Object. - * - * - use Object.keys method for extraction, and executes provided iteratorFn. - * - if iteratorFn returns false or -1 it will break iteration. - * - all other return values continue until last property. - * - * - flag as third parameter is optional: - * - Without flag or with flag and has value 'plainObject, method will iterate only through literal Objects. - * - With flag and has value 'objectLookLike', method will try to iterate through everything - * that passes type value === 'object' (literal Object, Array, Map, Set, WeakMap, etc..). - */ - static iterateObject>(obj: T, - iteratorFn: ObjectIterator, - flag: 'plainObject' | 'objectLookLike' = 'plainObject'): T | null { - - if (!CollectionsUtil.isFunction(iteratorFn)) { - return null; - } - - if (flag === 'objectLookLike') { - if (!CollectionsUtil.isObjectNotNull(obj)) { - return null; - } - } else { - if (!CollectionsUtil.isLiteralObject(obj)) { - return null; - } - } - - const objectKeys = Object.keys(obj); - for (const key of objectKeys) { - const resultOfIteratorFn = iteratorFn(obj[key] as T[keyof T], key, obj); - if (resultOfIteratorFn === false || resultOfIteratorFn === -1) { - break; - } - } - - return obj; - } - - /** - * ** Check if value is Literal Object and has properties. - */ - static isLiteralObjectWithProperties>(obj: T | unknown): boolean { - return CollectionsUtil.isLiteralObject(obj) && Object.keys(obj).length > 0; - } - - /** - * ** Iterates over object properties and return Array of its values. - */ - static objectValues>(obj: T | null | undefined): Array { - const _result: Array = []; - - CollectionsUtil.iterateObject(obj, (value) => { - _result.push(value); - }); - - return _result; - } - - /** - * ** Transform given Map to Object. - */ - static transformMapToObject>(map: T): { [key: string]: unknown } { - const obj: { [key: string]: any } = {}; - - map.forEach((value, key) => obj[key] = value); - - return obj; - } - - /** - * ** Transform given Object to Map. - */ - static transformObjectToMap(obj: T): Map { - const map = new Map(); - - CollectionsUtil.iterateObject(obj, (value, key) => { - map.set(key, value); - }); - - return map; - } - - /** - * ** Iterates over object properties and return Array of its keys/values in pairs. - *

    - * - Returns Array of subArrays that have 2 elements each, first element key and second element value. - */ - static objectPairs>(obj: T | null | undefined): Array<[string, T[keyof T]]> { - if (!CollectionsUtil.isLiteralObject(obj)) { - return []; - } - - return Object.entries(obj) as Array<[string, T[keyof T]]>; - } - - /** - * ** Return own property Descriptor from provided object/function. - */ - static getObjectPropertyDescriptor>(obj: T, key: string): PropertyDescriptor { - if (!((CollectionsUtil.isFunction(obj) || CollectionsUtil.isObject(obj)) && CollectionsUtil.isString(key))) { - return null; - } - - return Object.getOwnPropertyDescriptor(obj, key); - } - - /** - * ** Iterates own enumerable properties (statics) of Function (Class). - * - * - use Object.getOwnPropertyDescriptors method for extraction, and executes provided iteratorFn. - * - if iteratorFn returns false or -1 will break iteration. - * - all other return values means continue until last property. - */ - static iterateClassStatics>(fn: T, - iteratorFn: (descriptor: PropertyDescriptor, - key: string, - fn: T) => IteratorFnResult) { - - if (!CollectionsUtil.isFunction(fn) || !CollectionsUtil.isFunction(iteratorFn)) { - return null; - } - - const descriptors = Object.getOwnPropertyDescriptors(fn); - CollectionsUtil.iterateObject( - descriptors, - (descriptor: PropertyDescriptor, key) => iteratorFn(descriptor, key, fn) - ); - - return fn; - } - - /** - * ** Check if two Maps are Equal. - * - * - They are equal if they have same references. - * - They are equal if they have same keys and same values for compared keys. - */ - static areMapsEqual(m1: Map, m2: Map): boolean { - const evaluateDeepComparison = () => { - for (const [key, val] of m1) { - const compareVal = m2.get(key); - - if (CollectionsUtil.isMap(val)) { - if (!CollectionsUtil.areMapsEqual(val, compareVal as Map)) { - return false; - } - - continue; - } - - if (!CollectionsUtil.isEqual(val, compareVal) || (CollectionsUtil.isUndefined(compareVal) && !m2.has(key))) { - return false; - } - } - - return true; - }; - - return CollectionsUtil.isMap(m1) - && CollectionsUtil.isMap(m2) - && ( - m1 === m2 - || ( - m1.size === m2.size - && evaluateDeepComparison() - ) - ); - } - - /** - * ** Interpolate string and replace while iterating through provided strings. - * - * - Replacers are strings that are replaced on every place where %s is found starting from index 0. - */ - static interpolateString(target: string, ...replacers: string[]): string; - /** - * ** Interpolate text and replace while iterating through provided replacers. - * - * - Replacers are objects ofType {@link Replacer} that are iterates and consumes, - * searchValue is matcher and replaceValue is value that is placed on match. - */ - static interpolateString(target: string, ...replacers: Array>): string; - /** - * @inheritDoc - */ - static interpolateString(target: string, ...replacers: string[] | Array>): string { - let response = target; - - replacers.forEach((replacer: string | Replacer) => { - if (CollectionsUtil.isString(replacer)) { - response = response.replace('%s', replacer); - } else { - response = response.replace( - replacer.searchValue, - replacer.replaceValue - ); - } - }); - - return response; - } + /** + * ** Check if value is of type undefined. + */ + static isUndefined(value: any): value is undefined { + return typeof value === 'undefined'; + } + + /** + * ** Check if value has value null. + */ + static isNull(value: any): value is null { + return value === null; + } + + /** + * ** Check if value is undefined or null. + */ + static isNil(value: any): value is Nil { + return CollectionsUtil.isNull(value) || CollectionsUtil.isUndefined(value); + } + + /** + * ** Check if value is defined (opposite of isNil). + * + * - Not null. + * - Not undefined. + */ + static isDefined(value: T): boolean { + return ( + !CollectionsUtil.isNull(value) && !CollectionsUtil.isUndefined(value) + ); + } + + /** + * ** Check if value T is of type Number. + */ + static isNumber(num: T | any): num is number { + return typeof num === 'number'; + } + + /** + * ** Check if value T is of type String. + */ + static isString(str: T | any): str is string { + return typeof str === 'string'; + } + + /** + * ** Check if value T is of type Boolean. + */ + static isBoolean(bool: T | any): bool is boolean { + return typeof bool === 'boolean'; + } + + /** + * ** Check if value is Primitive. + * + * - String, Number, Boolean, null or undefined. + */ + static isPrimitive(value: any): value is Primitives | Nil { + return ( + CollectionsUtil.isString(value) || + CollectionsUtil.isBoolean(value) || + CollectionsUtil.isNumber(value) || + CollectionsUtil.isUndefined(value) + ); + } + + /** + * ** Check if value is NaN. + */ + static isNaN(value: T | any): boolean { + return Number.isNaN(value); + } + + /** + * ** Check if value is of type Date. + */ + static isDate(value: any): value is Date { + return value instanceof Date; + } + + /** + * ** Check if value is Primitive or Date. + * + * - String, Number, Boolean, null, undefined or Date. + */ + static isPrimitiveOrDate( + value: T | any + ): value is Primitives | Nil | Date { + return CollectionsUtil.isPrimitive(value) || CollectionsUtil.isDate(value); + } + + /** + * ** Check if value T is a reference that points to function (Class/Method). + */ + // eslint-disable-next-line + static isFunction any>( + value: T | any + ): value is (...args: any[]) => any { + return typeof value === 'function'; + } + + /** + * ** Check if value T is of type Object. + */ + static isObject>( + obj: T | any + ): obj is Record { + return typeof obj === 'object'; + } + + /** + * ** Check if value T is instance of Array. + */ + static isArray(arr: T | any): arr is T extends any[] ? T : any[] { + return arr instanceof Array; + } + + /** + * ** Check if value T is not instance of Array or there are no elements in Array. + */ + static isArrayEmpty(arr: T | any): boolean { + return !CollectionsUtil.isArray(arr) || arr.length === 0; + } + + /** + * ** Check if value is Map. + */ + static isMap(obj: Map | any): obj is Map { + return obj instanceof Map; + } + + /** + * ** Check if value is WeakMap. + */ + static isWeakMap(obj: WeakMap | any): obj is WeakMap { + return obj instanceof WeakMap; + } + + /** + * ** Check if value is Set. + */ + static isSet(obj: Set | any): obj is Set { + return obj instanceof Set; + } + + /** + * ** Check if value is Collection (literal Object, Array, Map, WeakMap or Set). + */ + static isCollection(obj: Collections | any): obj is Collections { + return ( + CollectionsUtil.isArray(obj) || + CollectionsUtil.isMap(obj) || + CollectionsUtil.isWeakMap(obj) || + CollectionsUtil.isSet(obj) || + CollectionsUtil.isLiteralObject(obj) + ); + } + + /** + * ** Check if value is of type Object and not null. + */ + static isObjectNotNull>( + obj: T | any + ): obj is Record & Subtract, null> { + return CollectionsUtil.isObject(obj) && !CollectionsUtil.isNull(obj); + } + + /** + * ** Check if some variable is of type Boolean and is true. + */ + static isBooleanAndTrue(bool: boolean | any): boolean { + return CollectionsUtil.isBoolean(bool) && bool; + } + + /** + * ** Check if value is literal Object or null. + * + * - Not an Array, Map, WeakMap or Set. + */ + static isLiteralObjectOrNull>( + obj: T | any + ): obj is LiteralObjectOrNull { + return ( + CollectionsUtil.isObject(obj) && + !CollectionsUtil.isArray(obj) && + !CollectionsUtil.isMap(obj) && + !CollectionsUtil.isWeakMap(obj) && + !CollectionsUtil.isSet(obj) + ); + } + + /** + * ** Check if provided value is literal Object. + * + * - Not and Array, Map, WeakMap, Set or null. + */ + static isLiteralObject>( + obj: T | any + ): boolean { + return ( + CollectionsUtil.isLiteralObjectOrNull(obj) && !CollectionsUtil.isNull(obj) + ); + } + + /** + * ** Check if value is Object and has properties. + */ + static isObjectWithProperties>( + obj: T | any + ): boolean { + return CollectionsUtil.isObjectNotNull(obj) && Object.keys(obj).length > 0; + } + + /** + * ** Return current Date in ISO string format. + */ + static dateISO(): string { + return new Date().toISOString(); + } + + /** + * ** Performs deep comparison between two values to determine if the are equivalent. + */ + static isEqual(value1: any, value2: any): boolean { + return isEqual(value1, value2); + } + + /** + * ** Create recursive deep cloned value from provided one. + */ + static cloneDeep(value: T): T { + return cloneDeep(value); + } + + /** + * ** Iterates own enumerable properties in Object. + * + * - use Object.keys method for extraction, and executes provided iteratorFn. + * - if iteratorFn returns false or -1 it will break iteration. + * - all other return values continue until last property. + * + * - flag as third parameter is optional: + * - Without flag or with flag and has value 'plainObject, method will iterate only through literal Objects. + * - With flag and has value 'objectLookLike', method will try to iterate through everything + * that passes type value === 'object' (literal Object, Array, Map, Set, WeakMap, etc..). + */ + static iterateObject>( + obj: T, + iteratorFn: ObjectIterator, + flag: 'plainObject' | 'objectLookLike' = 'plainObject' + ): T | null { + if (!CollectionsUtil.isFunction(iteratorFn)) { + return null; + } + + if (flag === 'objectLookLike') { + if (!CollectionsUtil.isObjectNotNull(obj)) { + return null; + } + } else { + if (!CollectionsUtil.isLiteralObject(obj)) { + return null; + } + } + + const objectKeys = Object.keys(obj); + for (const key of objectKeys) { + const resultOfIteratorFn = iteratorFn(obj[key] as T[keyof T], key, obj); + if (resultOfIteratorFn === false || resultOfIteratorFn === -1) { + break; + } + } + + return obj; + } + + /** + * ** Check if value is Literal Object and has properties. + */ + static isLiteralObjectWithProperties>( + obj: T | unknown + ): boolean { + return ( + CollectionsUtil.isLiteralObject(obj) && Object.keys(obj).length > 0 + ); + } + + /** + * ** Iterates over object properties and return Array of its values. + */ + static objectValues>( + obj: T | null | undefined + ): Array { + const _result: Array = []; + + CollectionsUtil.iterateObject(obj, (value) => { + _result.push(value); + }); + + return _result; + } + + /** + * ** Transform given Map to Object. + */ + static transformMapToObject>( + map: T + ): { [key: string]: unknown } { + const obj: { [key: string]: any } = {}; + + map.forEach((value, key) => (obj[key] = value)); + + return obj; + } + + /** + * ** Transform given Object to Map. + */ + static transformObjectToMap( + obj: T + ): Map { + const map = new Map(); + + CollectionsUtil.iterateObject(obj, (value, key) => { + map.set(key, value); + }); + + return map; + } + + /** + * ** Iterates over object properties and return Array of its keys/values in pairs. + *

    + * - Returns Array of subArrays that have 2 elements each, first element key and second element value. + */ + static objectPairs>( + obj: T | null | undefined + ): Array<[string, T[keyof T]]> { + if (!CollectionsUtil.isLiteralObject(obj)) { + return []; + } + + return Object.entries(obj) as Array<[string, T[keyof T]]>; + } + + /** + * ** Return own property Descriptor from provided object/function. + */ + static getObjectPropertyDescriptor>( + obj: T, + key: string + ): PropertyDescriptor { + if ( + !( + (CollectionsUtil.isFunction(obj) || CollectionsUtil.isObject(obj)) && + CollectionsUtil.isString(key) + ) + ) { + return null; + } + + return Object.getOwnPropertyDescriptor(obj, key); + } + + /** + * ** Iterates own enumerable properties (statics) of Function (Class). + * + * - use Object.getOwnPropertyDescriptors method for extraction, and executes provided iteratorFn. + * - if iteratorFn returns false or -1 will break iteration. + * - all other return values means continue until last property. + */ + static iterateClassStatics>( + fn: T, + iteratorFn: ( + descriptor: PropertyDescriptor, + key: string, + fn: T + ) => IteratorFnResult + ) { + if ( + !CollectionsUtil.isFunction(fn) || + !CollectionsUtil.isFunction(iteratorFn) + ) { + return null; + } + + const descriptors = Object.getOwnPropertyDescriptors(fn); + CollectionsUtil.iterateObject( + descriptors, + (descriptor: PropertyDescriptor, key) => iteratorFn(descriptor, key, fn) + ); + + return fn; + } + + /** + * ** Check if two Maps are Equal. + * + * - They are equal if they have same references. + * - They are equal if they have same keys and same values for compared keys. + */ + static areMapsEqual( + m1: Map, + m2: Map + ): boolean { + const evaluateDeepComparison = () => { + for (const [key, val] of m1) { + const compareVal = m2.get(key); + + if (CollectionsUtil.isMap(val)) { + if ( + !CollectionsUtil.areMapsEqual( + val, + compareVal as Map + ) + ) { + return false; + } + + continue; + } + + if ( + !CollectionsUtil.isEqual(val, compareVal) || + (CollectionsUtil.isUndefined(compareVal) && !m2.has(key)) + ) { + return false; + } + } + + return true; + }; + + return ( + CollectionsUtil.isMap(m1) && + CollectionsUtil.isMap(m2) && + (m1 === m2 || (m1.size === m2.size && evaluateDeepComparison())) + ); + } + + /** + * ** Interpolate string and replace while iterating through provided strings. + * + * - Replacers are strings that are replaced on every place where %s is found starting from index 0. + */ + static interpolateString(target: string, ...replacers: string[]): string; + /** + * ** Interpolate text and replace while iterating through provided replacers. + * + * - Replacers are objects ofType {@link Replacer} that are iterates and consumes, + * searchValue is matcher and replaceValue is value that is placed on match. + */ + static interpolateString( + target: string, + ...replacers: Array> + ): string; + /** + * @inheritDoc + */ + static interpolateString( + target: string, + ...replacers: string[] | Array> + ): string { + let response = target; + + replacers.forEach((replacer: string | Replacer) => { + if (CollectionsUtil.isString(replacer)) { + response = response.replace('%s', replacer); + } else { + response = response.replace( + replacer.searchValue, + replacer.replaceValue + ); + } + }); + + return response; + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/collections/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/collections/index.ts index 5128426006..92e8468a7e 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/collections/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/collections/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/index.ts index 49a593f8bc..d0ba616c84 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/model/data-source.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/model/data-source.ts index 3472fc5865..cd3e5e8dde 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/model/data-source.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/model/data-source.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -29,12 +27,12 @@ export type PrimitivesNilObject = PrimitivesNil | LiteralObject; // Represent union of LiteralObject, Array, Map, WeakMap and Set. export type Collections = - LiteralObject - | T[] - | Map - | WeakMap - | Set - | { [key: string]: T }; + | LiteralObject + | T[] + | Map + | WeakMap + | Set + | { [key: string]: T }; // Extracts element from Array and its type. export type ArrayElement> = ArrayType[number]; @@ -43,10 +41,14 @@ export type ArrayElement> = ArrayType[number]; * The state of a DataSource. */ export interface DataSource> { - /** - * ** Map of DataSource. - * - * - Each DataSource can be either a primitive, null or undefined, other DataSource or array of DataSources. - */ - readonly [key: string]: PrimitivesNilArrays | DataSource | Array> | T; + /** + * ** Map of DataSource. + * + * - Each DataSource can be either a primitive, null or undefined, other DataSource or array of DataSources. + */ + readonly [key: string]: + | PrimitivesNilArrays + | DataSource + | Array> + | T; } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/model/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/model/index.ts index a5d4cf7546..35815b89a9 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/model/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/model/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/model/shorthand-types.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/model/shorthand-types.ts index 046f7a2c10..a732ae6337 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/model/shorthand-types.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/model/shorthand-types.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -10,18 +8,38 @@ import { ArrayElement } from './data-source'; // Iterator function for Object. -export type ObjectIterator = (value: TObject[keyof TObject], key: string, collection: TObject) => TResult; +export type ObjectIterator = ( + value: TObject[keyof TObject], + key: string, + collection: TObject +) => TResult; // Iterator function for Array. -export type ArrayIterator = (value: TCollection, index: number, collection: TCollection[]) => TResult; +export type ArrayIterator = ( + value: TCollection, + index: number, + collection: TCollection[] +) => TResult; // Mapper function for Array. -export type ArrayMapper = (value: TCollection, index: number, collection: TCollection[]) => TResult; +export type ArrayMapper = ( + value: TCollection, + index: number, + collection: TCollection[] +) => TResult; // Accepted result from Iterator function. export type IteratorFnResult = void | number | boolean; // Predicate function for Object. -export type ObjectPredicateFn = (value: TObject[keyof TObject], key?: string, collection?: TObject) => boolean; +export type ObjectPredicateFn = ( + value: TObject[keyof TObject], + key?: string, + collection?: TObject +) => boolean; // Predicate function for Array. -export type ArrayPredicateFn = (value: ArrayElement, index?: number, collection?: TArray) => boolean; +export type ArrayPredicateFn = ( + value: ArrayElement, + index?: number, + collection?: TArray +) => boolean; // Predicate function Generic. export type PredicateFn = (value: T) => boolean; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/public-api.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/public-api.ts index f128589636..1f1324ccb0 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/public-api.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/public-api.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 @@ -7,25 +5,25 @@ export { CollectionsUtil } from './collections'; export { - ObjectIterator, - IteratorFnResult, - ArrayIterator, - ArrayMapper, - ArrayPredicateFn, - PredicateFn, - ObjectPredicateFn, - Subtract, - Nil, - Primitives, - Collections, - ArrayElement, - LiteralObjectOrNull, - LiteralObject, - PrimitivesDate, - PrimitivesNil, - LiteralObjectNull, - PrimitivesNilArrays, - PrimitivesNilObject + ObjectIterator, + IteratorFnResult, + ArrayIterator, + ArrayMapper, + ArrayPredicateFn, + PredicateFn, + ObjectPredicateFn, + Subtract, + Nil, + Primitives, + Collections, + ArrayElement, + LiteralObjectOrNull, + LiteralObject, + PrimitivesDate, + PrimitivesNil, + LiteralObjectNull, + PrimitivesNilArrays, + PrimitivesNilObject } from './model'; export { UrlUtil } from './url'; diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/url/index.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/url/index.ts index 7feba46d0c..e157d569c3 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/url/index.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/url/index.ts @@ -1,5 +1,3 @@ - - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/url/url.util.spec.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/url/url.util.spec.ts index 16ad782b45..eec4b4c35c 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/url/url.util.spec.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/url/url.util.spec.ts @@ -10,29 +10,31 @@ const TEST_VALUE_NO_FORWARD_SLASH = 'https://some_value'; const TEST_VALUE_WITH_FORWARD_SLASH = 'https://some_value/'; describe('UrlUtil', () => { - it('normalize Endpoint with Empty input', () => { - expect(UrlUtil.normalizeEndpoint(null)) - .toEqual(''); - }); - - it('normalize Endpoint with no Forward Slash at the end', () => { - expect(UrlUtil.normalizeEndpoint(TEST_VALUE_NO_FORWARD_SLASH)) - .toEqual(TEST_VALUE_WITH_FORWARD_SLASH); - }); - - it('normalize Endpoint with Forward Slash at the end', () => { - expect(UrlUtil.normalizeEndpoint(TEST_VALUE_WITH_FORWARD_SLASH)) - .toEqual(TEST_VALUE_WITH_FORWARD_SLASH); - }); - - it('constructTieSwaggerUiEndpoint with Empty Input', () => { - expect(UrlUtil.constructTieSwaggerUiEndpoint(null)) - .toEqual(TIE_SWAGGER_DOC_LOCATION); - }); - - it('constructTieSwaggerUiEndpoint with Valid Input', () => { - expect(UrlUtil.constructTieSwaggerUiEndpoint(TEST_VALUE_WITH_FORWARD_SLASH)) - .toEqual(TEST_VALUE_WITH_FORWARD_SLASH + TIE_SWAGGER_DOC_LOCATION); - }); - + it('normalize Endpoint with Empty input', () => { + expect(UrlUtil.normalizeEndpoint(null)).toEqual(''); + }); + + it('normalize Endpoint with no Forward Slash at the end', () => { + expect(UrlUtil.normalizeEndpoint(TEST_VALUE_NO_FORWARD_SLASH)).toEqual( + TEST_VALUE_WITH_FORWARD_SLASH + ); + }); + + it('normalize Endpoint with Forward Slash at the end', () => { + expect(UrlUtil.normalizeEndpoint(TEST_VALUE_WITH_FORWARD_SLASH)).toEqual( + TEST_VALUE_WITH_FORWARD_SLASH + ); + }); + + it('constructTieSwaggerUiEndpoint with Empty Input', () => { + expect(UrlUtil.constructTieSwaggerUiEndpoint(null)).toEqual( + TIE_SWAGGER_DOC_LOCATION + ); + }); + + it('constructTieSwaggerUiEndpoint with Valid Input', () => { + expect( + UrlUtil.constructTieSwaggerUiEndpoint(TEST_VALUE_WITH_FORWARD_SLASH) + ).toEqual(TEST_VALUE_WITH_FORWARD_SLASH + TIE_SWAGGER_DOC_LOCATION); + }); }); diff --git a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/url/url.util.ts b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/url/url.util.ts index cca98a0cf4..5b146bfd17 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/url/url.util.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/lib/utils/url/url.util.ts @@ -8,19 +8,21 @@ export const FORWARD_SLASH = '/'; export const TIE_SWAGGER_DOC_LOCATION = 'swagger-ui.html#'; export class UrlUtil { - static normalizeEndpoint(endPoint: string): string { - if (!endPoint) { - return ''; - } + static normalizeEndpoint(endPoint: string): string { + if (!endPoint) { + return ''; + } - if (endPoint.endsWith(FORWARD_SLASH)) { - return endPoint; - } + if (endPoint.endsWith(FORWARD_SLASH)) { + return endPoint; + } - return endPoint + FORWARD_SLASH; - } + return endPoint + FORWARD_SLASH; + } - static constructTieSwaggerUiEndpoint(endpointBasePath: string) { - return UrlUtil.normalizeEndpoint(endpointBasePath) + TIE_SWAGGER_DOC_LOCATION; - } + static constructTieSwaggerUiEndpoint(endpointBasePath: string) { + return ( + UrlUtil.normalizeEndpoint(endpointBasePath) + TIE_SWAGGER_DOC_LOCATION + ); + } } diff --git a/projects/frontend/shared-components/gui/projects/shared/src/test.ts b/projects/frontend/shared-components/gui/projects/shared/src/test.ts index 714bd074d3..62c3d1c231 100644 --- a/projects/frontend/shared-components/gui/projects/shared/src/test.ts +++ b/projects/frontend/shared-components/gui/projects/shared/src/test.ts @@ -8,22 +8,29 @@ import 'zone.js'; import 'zone.js/testing'; import { getTestBed } from '@angular/core/testing'; -import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; declare const require: { - context(path: string, deep?: boolean, filter?: RegExp): { - keys(): string[]; - (id: string): T; - }; + context( + path: string, + deep?: boolean, + filter?: RegExp + ): { + keys(): string[]; + (id: string): T; + }; }; // First, initialize the Angular testing environment. getTestBed().initTestEnvironment( - BrowserDynamicTestingModule, - platformBrowserDynamicTesting(), - { - teardown: { destroyAfterEach: false } - } + BrowserDynamicTestingModule, + platformBrowserDynamicTesting(), + { + teardown: { destroyAfterEach: false } + } ); // Then we find all the tests. const context = require.context('./', true, /\.spec\.ts$/); diff --git a/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/index.ts b/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/index.ts index 59fbdf0f72..69d6031ab7 100644 --- a/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/index.ts +++ b/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/index.ts @@ -20,7 +20,10 @@ const plugin: JupyterFrontEndPlugin = { id: 'vdk-jupyterlab-extension:plugin', autoStart: true, optional: [ISettingRegistry], - activate: async (app: JupyterFrontEnd, settingRegistry: ISettingRegistry | null) => { + activate: async ( + app: JupyterFrontEnd, + settingRegistry: ISettingRegistry | null + ) => { console.log('JupyterLab extension vdk-jupyterlab-extension is activated!'); await getCurrentPathRequest(); const { commands } = app; diff --git a/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/jobData.ts b/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/jobData.ts index 9f7c8ccb03..14c151a634 100644 --- a/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/jobData.ts +++ b/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/jobData.ts @@ -32,7 +32,6 @@ export function setJobDataToDefault() { */ setJobDataToDefault(); - /* * Function taht return the JSON object of jobData * TODO: find a better wat to parse the Map into JSON object diff --git a/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/serverRequests.ts b/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/serverRequests.ts index 1e9418fd36..a0e0c22387 100644 --- a/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/serverRequests.ts +++ b/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/serverRequests.ts @@ -134,7 +134,7 @@ export async function downloadJobRequest() { * Sent a POST request to the server to create a data job. * The information about the data job is retrieved from sessionStorage and sent as JSON. */ - export async function createJobRequest() { +export async function createJobRequest() { if (jobData.get(VdkOption.NAME) && jobData.get(VdkOption.TEAM)) { try { const data = await requestAPI('create', { diff --git a/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/utils.ts b/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/utils.ts index 30cece6a0b..e1e1f6925a 100644 --- a/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/utils.ts +++ b/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/utils.ts @@ -1,4 +1,3 @@ - /* * Copyright 2021-2023 VMware, Inc. * SPDX-License-Identifier: Apache-2.0 diff --git a/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/vdkOptions/vdk_options.ts b/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/vdkOptions/vdk_options.ts index 3426cee471..1c1b206447 100644 --- a/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/vdkOptions/vdk_options.ts +++ b/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/src/vdkOptions/vdk_options.ts @@ -4,11 +4,11 @@ */ export enum VdkOption { - NAME = 'jobName', - TEAM = 'jobTeam', - REST_API_URL = 'restApiUrl', - PATH = 'jobPath', - CLOUD = 'cloud', - LOCAL = 'local', - ARGUMENTS = 'jobArguments', + NAME = 'jobName', + TEAM = 'jobTeam', + REST_API_URL = 'restApiUrl', + PATH = 'jobPath', + CLOUD = 'cloud', + LOCAL = 'local', + ARGUMENTS = 'jobArguments' } diff --git a/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/ui-tests/tests/vdk-jupyterlab-extension.spec.ts b/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/ui-tests/tests/vdk-jupyterlab-extension.spec.ts index 90be70185d..6ea1dd1924 100644 --- a/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/ui-tests/tests/vdk-jupyterlab-extension.spec.ts +++ b/projects/vdk-plugins/vdk-jupyter/vdk-jupyterlab-extension/ui-tests/tests/vdk-jupyterlab-extension.spec.ts @@ -12,28 +12,34 @@ import { assert } from 'console'; */ test.use({ autoGoto: false }); -test('should open run job pop up and then cancel the operation', async ({ page }) => { - await page.goto(""); +test('should open run job pop up and then cancel the operation', async ({ + page +}) => { + await page.goto(''); await page.menu.open('VDK'); await page.locator('#jp-vdk-menu').getByText('Run').click(); await page.locator('div').filter({ hasText: 'Run Job' }); await page.getByRole('button', { name: 'Cancel' }).click(); }); - -test('should try to run a job with empty input and get error', async ({ page }) => { - await page.goto(""); +test('should try to run a job with empty input and get error', async ({ + page +}) => { + await page.goto(''); await page.menu.open('VDK'); await page.locator('#jp-vdk-menu').getByText('Run').click(); await page.locator('div').filter({ hasText: 'Run Job' }); await page.getByRole('button', { name: 'OK' }).click(); - await page.locator('div').filter({ hasText: 'Encountered an error when trying to run the job.' }); + await page + .locator('div') + .filter({ hasText: 'Encountered an error when trying to run the job.' }); await page.getByRole('button', { name: 'OK' }).click(); - }); -test('should try to run a job with incorrect data and get a dialog error message', async ({page}) => { - await page.goto(""); +test('should try to run a job with incorrect data and get a dialog error message', async ({ + page +}) => { + await page.goto(''); await page.menu.open('VDK'); await page.locator('#jp-vdk-menu').getByText('Run').click(); await page.getByLabel('Path to parent directory:').click(); @@ -45,26 +51,34 @@ test('should try to run a job with incorrect data and get a dialog error message }); }); -test('should open create job pop up and then cancel the operation', async ({ page }) => { - await page.goto(""); +test('should open create job pop up and then cancel the operation', async ({ + page +}) => { + await page.goto(''); await page.menu.open('VDK'); await page.locator('#jp-vdk-menu').getByText('Create').click(); await page.locator('div').filter({ hasText: 'Create Job' }); await page.getByRole('button', { name: 'Cancel' }).click(); }); -test('should try to create a job with empty input and get error', async ({ page }) => { - await page.goto(""); +test('should try to create a job with empty input and get error', async ({ + page +}) => { + await page.goto(''); await page.menu.open('VDK'); await page.locator('#jp-vdk-menu').getByText('Create').click(); await page.locator('div').filter({ hasText: 'Run Job' }); await page.getByRole('button', { name: 'OK' }).click(); - await page.locator('div').filter({ hasText: 'Encountered an error when creating the job.' }); + await page + .locator('div') + .filter({ hasText: 'Encountered an error when creating the job.' }); await page.getByRole('button', { name: 'OK' }).click(); }); -test('should try to create a job with incorrect input and get error', async ({ page }) => { - await page.goto(""); +test('should try to create a job with incorrect input and get error', async ({ + page +}) => { + await page.goto(''); await page.menu.open('VDK'); await page.locator('#jp-vdk-menu').getByText('Create').click(); await page.getByLabel('Local').check(); @@ -75,12 +89,16 @@ test('should try to create a job with incorrect input and get error', async ({ p await page.getByLabel('Path to parent directory:').click(); await page.getByLabel('Path to parent directory:').fill('sdfgsdfsdfsd'); await page.getByRole('button', { name: 'OK' }).click(); - await page.locator('div').filter({ hasText: 'Encountered an error when creating the job.' }); + await page + .locator('div') + .filter({ hasText: 'Encountered an error when creating the job.' }); await page.getByRole('button', { name: 'OK' }).click(); }); -test('should open delete job pop up and then cancel the operation', async ({ page }) => { - await page.goto(""); +test('should open delete job pop up and then cancel the operation', async ({ + page +}) => { + await page.goto(''); await page.menu.open('VDK'); await page.locator('#jp-vdk-menu').getByText('Delete').click(); await page.locator('div').filter({ hasText: 'Delete Job' }); @@ -88,42 +106,60 @@ test('should open delete job pop up and then cancel the operation', async ({ pag }); test('should open delete job confirmation pop up', async ({ page }) => { - await page.goto(""); + await page.goto(''); await page.menu.open('VDK'); await page.locator('#jp-vdk-menu').getByText('Delete').click(); await page.locator('div').filter({ hasText: 'Delete Job' }); await page.getByRole('button', { name: 'OK' }).click(); // this is tested with empty input that's why the message is with null - await page.locator('div').filter({ hasText: 'Do you really want to delete the job with name null from null?' }); + await page.locator('div').filter({ + hasText: 'Do you really want to delete the job with name null from null?' + }); await page.getByRole('button', { name: 'Cancel' }).click(); }); -test('should try to delete a job with empty input and get error', async ({ page }) => { - await page.goto(""); +test('should try to delete a job with empty input and get error', async ({ + page +}) => { + await page.goto(''); await page.menu.open('VDK'); await page.locator('#jp-vdk-menu').getByText('Delete').click(); await page.locator('div').filter({ hasText: 'Delete Job' }); await page.getByRole('button', { name: 'OK' }).click(); // this is tested with empty input that's why the message is with null - await page.locator('div').filter({ hasText: 'Do you really want to delete the job with name null from null?' }).first().click(); + await page + .locator('div') + .filter({ + hasText: 'Do you really want to delete the job with name null from null?' + }) + .first() + .click(); await page.getByRole('button', { name: 'Yes' }).click(); - await page.locator('div').filter({ hasText: 'Encountered an error when deleting the job.'}); + await page + .locator('div') + .filter({ hasText: 'Encountered an error when deleting the job.' }); }); -test('should open download job pop up and then cancel the operation', async ({ page }) => { - await page.goto(""); +test('should open download job pop up and then cancel the operation', async ({ + page +}) => { + await page.goto(''); await page.menu.open('VDK'); await page.locator('#jp-vdk-menu').getByText('Download').click(); await page.locator('div').filter({ hasText: 'Download Job' }); await page.getByRole('button', { name: 'Cancel' }).click(); }); -test('should try download operation with empty input and get error', async ({ page }) => { - await page.goto(""); +test('should try download operation with empty input and get error', async ({ + page +}) => { + await page.goto(''); await page.menu.open('VDK'); await page.locator('#jp-vdk-menu').getByText('Download').click(); await page.locator('div').filter({ hasText: 'Download Job' }); await page.getByRole('button', { name: 'OK' }).click(); - await page.locator('div').filter({ hasText: 'Encountered an error when trying to download the job. '}); + await page.locator('div').filter({ + hasText: 'Encountered an error when trying to download the job. ' + }); await page.getByRole('button', { name: 'OK' }).click(); });