[Question] проблема с совместным использованием PrizmScrollbarComponent и PrizmLoaderComponent

Библиотека

[] @prizm-ui/core
[x] @prizm-ui/components
[ ] @prizm-ui/install
[ ] @prizm-ui/icons
[ ] @prizm-ui/flag-icons
[ ] @prizm-ui/theme
[ ] @prizm-ui/charts
[ ] @prizm-ui/ast
[ ] @prizm-ui/nx-plugin

Компонент

PrizmScrollbarComponent, PrizmLoaderComponent

Операционная ситема:

macOs Ventura 13.4.1

Браузер:

Google Chrome Версия 124.0.6367.119 (Официальная сборка), (arm64)

NodeJS:

v20.12.2

Dependencies:

@prizm-ui/components 4.2.0 ├─┬ @angular-material-components/datetime-picker@16.0.1 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker ├─┬ @angular-material-components/moment-adapter@16.0.1 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @angular/animations@17.3.4 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @angular/cdk-experimental@16.2.14 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @angular/cdk@16.2.14 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @angular/common@17.3.4 invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @angular/compiler@17.3.4 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├── @angular/core@17.3.4 invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @angular/forms@17.3.4 invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @angular/material-moment-adapter@17.3.4 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @angular/material@16.2.14 invalid: "17.3.4" from node_modules/@angular/material-moment-adapter │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @angular/platform-browser-dynamic@17.3.4 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @angular/platform-browser@17.3.4 invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @angular/router@17.3.4 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @ng-web-apis/common@2.1.0 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @ng-web-apis/intersection-observer@3.0.0 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @ng-web-apis/resize-observer@2.0.0 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @ngrx/component-store@17.0.1 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @ngrx/effects@17.0.1 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @ngrx/entity@17.0.1 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @ngrx/store@17.0.1 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @prizm-ui/charts@4.1.2 invalid: "~4.2.0" from the root project │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @prizm-ui/components@4.1.2 invalid: "~4.2.0" from the root project │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @prizm-ui/core@4.1.2 invalid: "~4.2.0" from the root project │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @prizm-ui/helpers@4.1.2 invalid: "~4.2.0" from the root project │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @prizm-ui/i18n@4.1.2 invalid: "~4.2.0" from the root project │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @prizm-ui/icons@4.1.2 invalid: "~4.2.0" from the root project │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ @prizm-ui/theme@4.1.2 invalid: "~4.2.0" from the root project │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ angular-svg-icon@17.0.0 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ jest-preset-angular@14.0.3 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ keycloak-angular@15.2.1 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter ├─┬ ngx-cookie-service@15.0.0 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter, "^15.0.0" from node_modules/ngx-cookie-service ├─┬ ngx-drag-drop@15.1.0 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter, "^15.0.0" from node_modules/ngx-cookie-service, "^15.0.3" from node_modules/ngx-drag-drop ├─┬ ngx-image-cropper@6.3.4 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter, "^15.0.0" from node_modules/ngx-cookie-service, "^15.0.3" from node_modules/ngx-drag-drop ├─┬ ngx-infinite-scroll@15.0.0 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter, "^15.0.0" from node_modules/ngx-cookie-service, "^15.0.3" from node_modules/ngx-drag-drop, ">=15.0.0 <16.0.0" from node_modules/ngx-infinite-scroll ├─┬ ngx-mask@15.2.3 invalid: "17.0.4" from node_modules/@prizm-ui/components │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter, "^15.0.0" from node_modules/ngx-cookie-service, "^15.0.3" from node_modules/ngx-drag-drop, ">=15.0.0 <16.0.0" from node_modules/ngx-infinite-scroll ├─┬ ngx-pagination@6.0.3 │ └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter, "^15.0.0" from node_modules/ngx-cookie-service, "^15.0.3" from node_modules/ngx-drag-drop, ">=15.0.0 <16.0.0" from node_modules/ngx-infinite-scroll └─┬ single-spa-angular@8.1.1 └── @angular/core@17.3.4 deduped invalid: "^16.0.0" from node_modules/@angular-material-components/datetime-picker, "^16.0.0" from node_modules/@angular-material-components/moment-adapter, "^15.0.0" from node_modules/ngx-cookie-service, "^15.0.3" from node_modules/ngx-drag-drop, ">=15.0.0 <16.0.0" from node_modules/ngx-infinite-scroll

Проект в котором используется Prizm

ejco

Вопрос

Есть проблема с совместным использованием PrizmScrollbarComponent и PrizmLoaderComponent, при разном комбинировании вложенности (либо PrizmScrollbarComponent внутри PrizmLoaderComponent, либо PrizmLoaderComponent внутри PrizmScrollbarComponent), средствами юай кита не удается достичь размещения лоадера посередине видимой области, и после отключения состояния загрузки предоставлять возможность скроллить контент. При размещении PrizmLoaderComponent внутри PrizmScrollbarComponent лоадер переезжает на середину высоты котента PrizmScrollbarComponent. При размещении PrizmScrollbarComponent внутри PrizmLoaderComponent отключается возможность скроллить контент в PrizmScrollbarComponent. P.s есть решение но размещать его в каждой реализации не очень удобно.

zyfra / Prizm