diff --git a/apps/docs/src/assets/stackblitz/src/koobiq.module.ts b/apps/docs/src/assets/stackblitz/src/koobiq.module.ts index 247df48a1..58d720c98 100644 --- a/apps/docs/src/assets/stackblitz/src/koobiq.module.ts +++ b/apps/docs/src/assets/stackblitz/src/koobiq.module.ts @@ -25,7 +25,6 @@ import { KbqPopoverModule } from '@koobiq/components/popover'; import { KbqProgressBarModule } from '@koobiq/components/progress-bar'; import { KbqProgressSpinnerModule } from '@koobiq/components/progress-spinner'; import { KbqRadioModule } from '@koobiq/components/radio'; -import { KbqScrollbarModule } from '@koobiq/components/scrollbar'; import { KbqSelectModule } from '@koobiq/components/select'; import { KbqSidebarModule } from '@koobiq/components/sidebar'; import { KbqSidepanelModule } from '@koobiq/components/sidepanel'; @@ -70,7 +69,6 @@ const KBQ_COMPONENTS = [ KbqSidebarModule, KbqSidepanelModule, KbqSplitterModule, - KbqScrollbarModule, KbqTableModule, KbqTabsModule, KbqTagsModule, diff --git a/package.json b/package.json index ab29b0d13..c22407da9 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "@koobiq/icons": "^7.1.1", "core-js": "^3.36.0", "marked": "^9.0.0", - "overlayscrollbars": "2.7.3", + "overlayscrollbars": "^2.7.3", "rxjs": "7.8.1", "tslib": "^2.6.2", "ua-parser-js": "^1.0.38", diff --git a/packages/components-dev/scrollbar/module.ts b/packages/components-dev/scrollbar/module.ts index 5b7438810..c71c0e390 100644 --- a/packages/components-dev/scrollbar/module.ts +++ b/packages/components-dev/scrollbar/module.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, NgModule, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectorRef, Component, NgModule, ViewEncapsulation } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { KbqButtonModule } from '@koobiq/components/button'; import { KbqScrollbarEvents, KbqScrollbarModule, KbqScrollbarOptions } from '@koobiq/components/scrollbar'; @@ -7,8 +7,7 @@ import { KbqScrollbarEvents, KbqScrollbarModule, KbqScrollbarOptions } from '@ko selector: 'app', templateUrl: './template.html', styleUrls: ['../main.scss', './styles.scss'], - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush + encapsulation: ViewEncapsulation.None }) export class DemoComponent { options: KbqScrollbarOptions; diff --git a/packages/components-dev/scrollbar/template.html b/packages/components-dev/scrollbar/template.html index 2572b572b..ca5fcfabb 100644 --- a/packages/components-dev/scrollbar/template.html +++ b/packages/components-dev/scrollbar/template.html @@ -21,7 +21,7 @@

Simple example

#scrollbarRef="kbqScrollbar" kbq-scrollbar style="height: 300px; max-width: 400px" - (onScroll)="(null)" + (onScroll)="cdr.markForCheck()" >
{{ longText }}
diff --git a/packages/components/package.json b/packages/components/package.json index 39e323de1..2ee088358 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -31,7 +31,7 @@ "@koobiq/tokens-builder": "3.5.1", "@koobiq/design-tokens": "3.5.1", "marked": "^9.0.0", - "overlayscrollbars": "2.7.3", + "overlayscrollbars": "^2.2.0", "ngx-highlightjs": "^10.0.0" }, "dependencies": { diff --git a/packages/components/scrollbar/scrollbar.component.ts b/packages/components/scrollbar/scrollbar.component.ts index 00bb98c45..392d16c97 100644 --- a/packages/components/scrollbar/scrollbar.component.ts +++ b/packages/components/scrollbar/scrollbar.component.ts @@ -33,12 +33,6 @@ const filterEvents = (emits: KbqScrollbarEvents, events: KbqScrollbarEvents) => {} ); -/** - * The component acts as a wrapper for overlayscrollbars with improved functionality, - * allowing you to configure the scrollbar parameters. - * - * It also provides a convenient interface for listening to library events in an Angular style using output parameters. - */ @Component({ selector: 'kbq-scrollbar, [kbq-scrollbar]', exportAs: 'kbqScrollbar', diff --git a/packages/components/scrollbar/scrollbar.directive.ts b/packages/components/scrollbar/scrollbar.directive.ts index aa321448b..98c632eab 100644 --- a/packages/components/scrollbar/scrollbar.directive.ts +++ b/packages/components/scrollbar/scrollbar.directive.ts @@ -46,12 +46,6 @@ const createDefer = (): Defer => { ]; }; -/** - * A directive for adding overlayscrollbars to elements - * - * It leverages the library to provide customizable and visually appealing scrollbars. - * Also, it provides the optimization with `defer` param - * */ @Directive({ selector: '[kbqScrollbar]' }) diff --git a/packages/components/scrollbar/scrollbar.md b/packages/components/scrollbar/scrollbar.md index 87f13e11c..cf554e1b5 100644 --- a/packages/components/scrollbar/scrollbar.md +++ b/packages/components/scrollbar/scrollbar.md @@ -1,34 +1,20 @@ -Используется для настройки параметров скроллбара, таких как: - -- Минимальная высота/ширина ползунка -- Задний фон ползунка -- Поведение скролла при перемещении мыши вне области скроллбара. +Используется для кастомизации скроллбара. На данный момент возможно применять к простым элементам за исключением textarea. -Чтобы компонент работал правильно, установите библиотеку `overlayscrollbars` с версией `2.7.3`. -Если ее ещё нет в вашем списке зависимостей, убедитесь, что вы устанавливаете её следующей командой: - -``` -npm install overlayscrollbars@2.7.3 -``` - - - -## Настройка поведения скроллбаров - -Вы можете задать параметры для скроллбаров двумя способами: +### Кастомизация -**Настройка одного скроллбара:** Если вам нужно изменить настройки только для одного скроллбара, используйте `options` параметр. +1. Доступно установка кастомные поведения скролла: + - Для отдельного скролла через `@Input() options` + - Для всех скроллбаров в определенной области через токен `KBQ_SCROLLBAR_CONFIG` +2. Доступна кастомизация цветов и геометрии элементов скроллбара: + - Минимальная высота/ширина ползунка + - Задний фон ползунка - - -**Настройка всех скроллбаров:** если вы хотите изменить настройки для всех скроллбаров в модуле, используйте токен `KBQ_SCROLLBAR_CONFIG`. - - +Доступно прослушивание нативного событие scroll. -### Возможности + -Доступно прослушивание нативного событие scroll. +### Scroll to top diff --git a/packages/components/scrollbar/scrollbar.types.ts b/packages/components/scrollbar/scrollbar.types.ts index 0cc497e1f..8716315c2 100644 --- a/packages/components/scrollbar/scrollbar.types.ts +++ b/packages/components/scrollbar/scrollbar.types.ts @@ -8,7 +8,6 @@ export type KbqScrollbarTarget = InitializationTarget; export const KBQ_SCROLLBAR_OPTIONS_DEFAULT_CONFIG: KbqScrollbarOptions = { scrollbars: { - /* scrolling behavior when moving the mouse outside the scrollbar area. */ autoHide: 'leave', autoHideDelay: 100 } diff --git a/packages/docs-examples/components/scrollbar/index.ts b/packages/docs-examples/components/scrollbar/index.ts index 3cb1a8745..9f5285144 100644 --- a/packages/docs-examples/components/scrollbar/index.ts +++ b/packages/docs-examples/components/scrollbar/index.ts @@ -1,26 +1,24 @@ import { NgModule } from '@angular/core'; -import { KBQ_SCROLLBAR_OPTIONS_DEFAULT_CONFIG_PROVIDER } from '@koobiq/components/scrollbar'; -import { ScrollbarInputCustomizationExample } from './scrollbar-input-customization/scrollbar-input-customization-example'; -import { ScrollbarModuleCustomizationExample } from './scrollbar-module-customization/scrollbar-module-customization-example'; +import { BrowserModule } from '@angular/platform-browser'; +import { KbqButtonModule } from '@koobiq/components/button'; +import { KBQ_SCROLLBAR_OPTIONS_DEFAULT_CONFIG_PROVIDER, KbqScrollbarModule } from '@koobiq/components/scrollbar'; import { ScrollbarOverviewExample } from './scrollbar-overview/scrollbar-overview-example'; import { ScrollbarScrollToTopExample } from './scrollbar-scroll-to-top/scrollbar-scroll-to-top-example'; -export { - ScrollbarInputCustomizationExample, - ScrollbarModuleCustomizationExample, - ScrollbarOverviewExample, - ScrollbarScrollToTopExample -}; +export { ScrollbarOverviewExample, ScrollbarScrollToTopExample }; const EXAMPLES = [ ScrollbarOverviewExample, - ScrollbarScrollToTopExample, - ScrollbarInputCustomizationExample, - ScrollbarModuleCustomizationExample + ScrollbarScrollToTopExample ]; @NgModule({ - imports: EXAMPLES, + imports: [ + BrowserModule, + KbqButtonModule, + KbqScrollbarModule + ], + declarations: EXAMPLES, exports: EXAMPLES, providers: [KBQ_SCROLLBAR_OPTIONS_DEFAULT_CONFIG_PROVIDER] }) diff --git a/packages/docs-examples/components/scrollbar/scrollbar-input-customization/scrollbar-input-customization-example.ts b/packages/docs-examples/components/scrollbar/scrollbar-input-customization/scrollbar-input-customization-example.ts deleted file mode 100644 index 6f0995bf8..000000000 --- a/packages/docs-examples/components/scrollbar/scrollbar-input-customization/scrollbar-input-customization-example.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; -import { KbqScrollbarModule, KbqScrollbarOptions } from '@koobiq/components/scrollbar'; - -/** - * @title scrollbar-input-customization-example - */ -@Component({ - standalone: true, - selector: 'scrollbar-input-customization-example', - imports: [KbqScrollbarModule], - template: ` -
-
-
- @for (paragraph of text; track paragraph) { - {{ paragraph }} - } -
-
-
-
- @for (paragraph of text; track paragraph) { - {{ paragraph }} - } -
-
-
-
- @for (paragraph of text; track paragraph) { - {{ paragraph }} - } -
-
-
- `, - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class ScrollbarInputCustomizationExample { - options: KbqScrollbarOptions = { - scrollbars: { - autoHide: 'never', - visibility: 'visible' - } - }; - text = Array(20).fill( - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum mauris ut hendrerit lobortis. Nam tincidunt eros dolor, vitae auctor dolor suscipit quis. Quisque sagittis sit amet lectus sed vulputate. Cras ornare purus quis suscipit vulputate. Proin vitae dolor in velit tristique finibus eget ut lorem. Integer eu maximus lorem. Maecenas eu consectetur ligula, id mattis urna. Donec nisi ipsum, sollicitudin sit amet euismod ut, tempor eu felis. Quisque sit amet sapien purus. Curabitur quis nisi eros. Cras at aliquet sem, vel tincidunt turpis.' - ); -} diff --git a/packages/docs-examples/components/scrollbar/scrollbar-module-customization/scrollbar-module-customization-example.ts b/packages/docs-examples/components/scrollbar/scrollbar-module-customization/scrollbar-module-customization-example.ts deleted file mode 100644 index 05eb30360..000000000 --- a/packages/docs-examples/components/scrollbar/scrollbar-module-customization/scrollbar-module-customization-example.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; -import { KBQ_SCROLLBAR_CONFIG, KbqScrollbarModule, KbqScrollbarOptions } from '@koobiq/components/scrollbar'; - -const customScrollbarConfig: KbqScrollbarOptions = { - scrollbars: { - autoHide: 'never', - visibility: 'visible' - } -}; - -/** - * @title scrollbar-module-customization-example - */ -@Component({ - standalone: true, - selector: 'scrollbar-module-customization-example', - imports: [KbqScrollbarModule], - providers: [ - { provide: KBQ_SCROLLBAR_CONFIG, useValue: customScrollbarConfig }], - template: ` -
-
-
- @for (paragraph of text; track paragraph) { - {{ paragraph }} - } -
-
-
-
- @for (paragraph of text; track paragraph) { - {{ paragraph }} - } -
-
-
-
- @for (paragraph of text; track paragraph) { - {{ paragraph }} - } -
-
-
- `, - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class ScrollbarModuleCustomizationExample { - text = Array(20).fill( - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum mauris ut hendrerit lobortis. Nam tincidunt eros dolor, vitae auctor dolor suscipit quis. Quisque sagittis sit amet lectus sed vulputate. Cras ornare purus quis suscipit vulputate. Proin vitae dolor in velit tristique finibus eget ut lorem. Integer eu maximus lorem. Maecenas eu consectetur ligula, id mattis urna. Donec nisi ipsum, sollicitudin sit amet euismod ut, tempor eu felis. Quisque sit amet sapien purus. Curabitur quis nisi eros. Cras at aliquet sem, vel tincidunt turpis.' - ); -} diff --git a/packages/docs-examples/components/scrollbar/scrollbar-overview/scrollbar-overview-example.css b/packages/docs-examples/components/scrollbar/scrollbar-overview/scrollbar-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/packages/docs-examples/components/scrollbar/scrollbar-overview/scrollbar-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/packages/docs-examples/components/scrollbar/scrollbar-overview/scrollbar-overview-example.html b/packages/docs-examples/components/scrollbar/scrollbar-overview/scrollbar-overview-example.html new file mode 100644 index 000000000..a26e21fec --- /dev/null +++ b/packages/docs-examples/components/scrollbar/scrollbar-overview/scrollbar-overview-example.html @@ -0,0 +1,86 @@ +
+
+ Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, + convallis at tellus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Pellentesque in ipsum id orci + porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec sollicitudin molestie + malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget + tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac diam sit amet + quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. + Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci + luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet + ligula. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla + sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non + nisi. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas + non nisi. Donec rutrum congue leo eget malesuada. Proin eget tortor risus. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec + sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui + posuere blandit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, + accumsan id imperdiet et, porttitor at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed + porttitor lectus nibh. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque + nec, egestas non nisi. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet + elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut + libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. + Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada. Proin eget + tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed + magna dictum porta. Cras ultricies ligula sed magna dictum porta. Cras ultricies ligula sed magna dictum porta. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Proin eget tortor risus. + Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis in faucibus orci + luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet + ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur + sed, convallis at tellus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Pellentesque in ipsum id + orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec sollicitudin molestie + malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget + tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac diam sit amet + quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. + Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci + luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet + ligula. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla + sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non + nisi. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas + non nisi. Donec rutrum congue leo eget malesuada. Proin eget tortor risus. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec + sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui + posuere blandit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, + accumsan id imperdiet et, porttitor at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed + porttitor lectus nibh. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque + nec, egestas non nisi. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet + elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut + libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. + Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada. Proin eget + tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed + magna dictum porta. Cras ultricies ligula sed magna dictum porta. Cras ultricies ligula sed magna dictum porta. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Proin eget tortor risus. + Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis in faucibus orci + luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet + ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur + sed, convallis at tellus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Pellentesque in ipsum id + orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec sollicitudin molestie + malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget + tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac diam sit amet + quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. + Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci + luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet + ligula. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla + sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non + nisi. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas + non nisi. Donec rutrum congue leo eget malesuada. Proin eget tortor risus. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec + sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui + posuere blandit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, + accumsan id imperdiet et, porttitor at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed + porttitor lectus nibh. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque + nec, egestas non nisi. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet + elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut + libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. + Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada. Proin eget + tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed + magna dictum porta. Cras ultricies ligula sed magna dictum porta. Cras ultricies ligula sed magna dictum porta. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Proin eget tortor risus. + Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis in faucibus orci + luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet + ligula. +
+
diff --git a/packages/docs-examples/components/scrollbar/scrollbar-overview/scrollbar-overview-example.ts b/packages/docs-examples/components/scrollbar/scrollbar-overview/scrollbar-overview-example.ts index 3478ceb43..51da2265c 100644 --- a/packages/docs-examples/components/scrollbar/scrollbar-overview/scrollbar-overview-example.ts +++ b/packages/docs-examples/components/scrollbar/scrollbar-overview/scrollbar-overview-example.ts @@ -1,30 +1,12 @@ -import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; -import { KbqScrollbarModule } from '@koobiq/components/scrollbar'; +import { Component, ViewEncapsulation } from '@angular/core'; /** * @title Basic Scrollbar */ @Component({ - standalone: true, selector: 'scrollbar-overview-example', - imports: [KbqScrollbarModule], - template: ` -
-
- @for (paragraph of text; track paragraph) { - {{ paragraph }} - } -
-
- `, - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush + templateUrl: 'scrollbar-overview-example.html', + styleUrls: ['scrollbar-overview-example.css'], + encapsulation: ViewEncapsulation.None }) -export class ScrollbarOverviewExample { - text = Array(20).fill( - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum mauris ut hendrerit lobortis. Nam tincidunt eros dolor, vitae auctor dolor suscipit quis. Quisque sagittis sit amet lectus sed vulputate. Cras ornare purus quis suscipit vulputate. Proin vitae dolor in velit tristique finibus eget ut lorem. Integer eu maximus lorem. Maecenas eu consectetur ligula, id mattis urna. Donec nisi ipsum, sollicitudin sit amet euismod ut, tempor eu felis. Quisque sit amet sapien purus. Curabitur quis nisi eros. Cras at aliquet sem, vel tincidunt turpis.' - ); -} +export class ScrollbarOverviewExample {} diff --git a/packages/docs-examples/components/scrollbar/scrollbar-scroll-to-top/scrollbar-scroll-to-top-example.css b/packages/docs-examples/components/scrollbar/scrollbar-scroll-to-top/scrollbar-scroll-to-top-example.css new file mode 100644 index 000000000..dd34348f5 --- /dev/null +++ b/packages/docs-examples/components/scrollbar/scrollbar-scroll-to-top/scrollbar-scroll-to-top-example.css @@ -0,0 +1,10 @@ +.scrollarea_with-scroll-to-top { + position: relative; + width: 400px; +} + +.kbq-button.button_scroll-to-top { + position: absolute; + bottom: 5px; + right: 5px; +} diff --git a/packages/docs-examples/components/scrollbar/scrollbar-scroll-to-top/scrollbar-scroll-to-top-example.html b/packages/docs-examples/components/scrollbar/scrollbar-scroll-to-top/scrollbar-scroll-to-top-example.html new file mode 100644 index 000000000..b4cbc8f91 --- /dev/null +++ b/packages/docs-examples/components/scrollbar/scrollbar-scroll-to-top/scrollbar-scroll-to-top-example.html @@ -0,0 +1,103 @@ +
+
+
+ Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, + convallis at tellus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Pellentesque in ipsum id + orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec sollicitudin + molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit + aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a + pellentesque nec, egestas non nisi. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum + ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit + amet aliquam vel, ullamcorper sit amet ligula. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut + libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien + massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci porta dapibus. Praesent + sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada. Proin + eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac diam sit amet quam + vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci + porta dapibus. Curabitur aliquet quam id dui posuere blandit. Vestibulum ac diam sit amet quam vehicula + elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Lorem ipsum + dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Donec sollicitudin molestie + malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur arcu erat, + accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. + Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat. + Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Quisque velit nisi, + pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada. Proin eget tortor risus. + Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna + dictum porta. Cras ultricies ligula sed magna dictum porta. Cras ultricies ligula sed magna dictum porta. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Proin eget tortor risus. + Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis in faucibus + orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper + sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget + consectetur sed, convallis at tellus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. + Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at + sem. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac + lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien + massa, convallis a pellentesque nec, egestas non nisi. Mauris blandit aliquet elit, eget tincidunt nibh + pulvinar a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec + velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla porttitor accumsan tincidunt. + Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac + lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci + porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue + leo eget malesuada. Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. + Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Vestibulum ac + diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, + porttitor at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Donec + sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. + Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt + nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada + feugiat. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Quisque velit + nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada. Proin eget tortor + risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed + magna dictum porta. Cras ultricies ligula sed magna dictum porta. Cras ultricies ligula sed magna dictum + porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Proin eget tortor + risus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis in + faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, + ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, + lacinia eget consectetur sed, convallis at tellus. Quisque velit nisi, pretium ut lacinia in, elementum id + enim. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor + at sem. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac + lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien + massa, convallis a pellentesque nec, egestas non nisi. Mauris blandit aliquet elit, eget tincidunt nibh + pulvinar a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec + velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla porttitor accumsan tincidunt. + Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac + lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci + porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue + leo eget malesuada. Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. + Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Vestibulum ac + diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, + porttitor at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Donec + sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. + Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt + nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada + feugiat. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Quisque velit + nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada. Proin eget tortor + risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed + magna dictum porta. Cras ultricies ligula sed magna dictum porta. Cras ultricies ligula sed magna dictum + porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Proin eget tortor + risus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis in + faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, + ullamcorper sit amet ligula. +
+
+ + @if (scrollbarRef?.contentElement?.nativeElement?.scrollTop || 0 > 0) { + + } +
diff --git a/packages/docs-examples/components/scrollbar/scrollbar-scroll-to-top/scrollbar-scroll-to-top-example.ts b/packages/docs-examples/components/scrollbar/scrollbar-scroll-to-top/scrollbar-scroll-to-top-example.ts index e865ebdda..fe1737ac9 100644 --- a/packages/docs-examples/components/scrollbar/scrollbar-scroll-to-top/scrollbar-scroll-to-top-example.ts +++ b/packages/docs-examples/components/scrollbar/scrollbar-scroll-to-top/scrollbar-scroll-to-top-example.ts @@ -1,52 +1,14 @@ -import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; -import { KbqButtonModule } from '@koobiq/components/button'; -import { KbqScrollbarModule } from '@koobiq/components/scrollbar'; +import { ChangeDetectorRef, Component, ViewEncapsulation } from '@angular/core'; /** * @title Scrollbar Scroll To Top */ @Component({ - standalone: true, selector: 'scrollbar-scroll-to-top-example', - imports: [ - KbqButtonModule, - KbqScrollbarModule - ], - template: ` -
-
-
- @for (paragraph of text; track paragraph) { - {{ paragraph }} - } -
-
- - @if (scrollbarRef?.contentElement?.nativeElement?.scrollTop || 0 > 0) { - - } -
- `, - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush + templateUrl: 'scrollbar-scroll-to-top-example.html', + styleUrls: ['scrollbar-scroll-to-top-example.css'], + encapsulation: ViewEncapsulation.None }) export class ScrollbarScrollToTopExample { - text = Array(20).fill( - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum mauris ut hendrerit lobortis. Nam tincidunt eros dolor, vitae auctor dolor suscipit quis. Quisque sagittis sit amet lectus sed vulputate. Cras ornare purus quis suscipit vulputate. Proin vitae dolor in velit tristique finibus eget ut lorem. Integer eu maximus lorem. Maecenas eu consectetur ligula, id mattis urna. Donec nisi ipsum, sollicitudin sit amet euismod ut, tempor eu felis. Quisque sit amet sapien purus. Curabitur quis nisi eros. Cras at aliquet sem, vel tincidunt turpis.' - ); + constructor(public cdr: ChangeDetectorRef) {} } diff --git a/packages/docs-examples/example-module.ts b/packages/docs-examples/example-module.ts index 026f3513e..fe6820f20 100644 --- a/packages/docs-examples/example-module.ts +++ b/packages/docs-examples/example-module.ts @@ -2884,44 +2884,14 @@ export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample} = { "importPath": "koobiq-docs-examples-components-radio" } }, - "scrollbar-input-customization": { - "packagePath": "components/scrollbar/scrollbar-input-customization", - "title": "scrollbar-input-customization-example", - "componentName": "ScrollbarInputCustomizationExample", - "files": [ - "scrollbar-input-customization-example.ts" - ], - "selector": "scrollbar-input-customization-example", - "additionalComponents": [], - "primaryFile": "scrollbar-input-customization-example.ts", - "module": { - "name": "ScrollbarExamplesModule", - "importSpecifier": "components/scrollbar", - "importPath": "koobiq-docs-examples-components-scrollbar" - } - }, - "scrollbar-module-customization": { - "packagePath": "components/scrollbar/scrollbar-module-customization", - "title": "scrollbar-module-customization-example", - "componentName": "ScrollbarModuleCustomizationExample", - "files": [ - "scrollbar-module-customization-example.ts" - ], - "selector": "scrollbar-module-customization-example", - "additionalComponents": [], - "primaryFile": "scrollbar-module-customization-example.ts", - "module": { - "name": "ScrollbarExamplesModule", - "importSpecifier": "components/scrollbar", - "importPath": "koobiq-docs-examples-components-scrollbar" - } - }, "scrollbar-overview": { "packagePath": "components/scrollbar/scrollbar-overview", "title": "Basic Scrollbar", "componentName": "ScrollbarOverviewExample", "files": [ - "scrollbar-overview-example.ts" + "scrollbar-overview-example.ts", + "scrollbar-overview-example.html", + "scrollbar-overview-example.css" ], "selector": "scrollbar-overview-example", "additionalComponents": [], @@ -2937,7 +2907,9 @@ export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample} = { "title": "Scrollbar Scroll To Top", "componentName": "ScrollbarScrollToTopExample", "files": [ - "scrollbar-scroll-to-top-example.ts" + "scrollbar-scroll-to-top-example.ts", + "scrollbar-scroll-to-top-example.html", + "scrollbar-scroll-to-top-example.css" ], "selector": "scrollbar-scroll-to-top-example", "additionalComponents": [], diff --git a/packages/schematics/rollup.config.js b/packages/schematics/rollup.config.js index 9739810e3..fbc7165d4 100644 --- a/packages/schematics/rollup.config.js +++ b/packages/schematics/rollup.config.js @@ -44,8 +44,7 @@ module.exports = [ 'VERSIONS.MESSAGEFORMAT_CORE': version(pkg.devDependencies['@messageformat/core']), 'VERSIONS.LUXON': version(pkg.devDependencies.luxon), 'VERSIONS.MARKED': version(pkg.dependencies.marked), - // design system scrollbar relies on specific version of lib, stick to it - 'VERSIONS.OVERLAYSCROLLBARS': JSON.stringify(pkg.dependencies.overlayscrollbars), + 'VERSIONS.OVERLAYSCROLLBARS': version(pkg.dependencies.overlayscrollbars), 'VERSIONS.NGX_HIGHLIGHTJS': version(pkg.devDependencies['ngx-highlightjs']) }), typescript({ diff --git a/tools/cspell-locales/en.json b/tools/cspell-locales/en.json index 0a83e6eb4..e14cc3377 100644 --- a/tools/cspell-locales/en.json +++ b/tools/cspell-locales/en.json @@ -27,7 +27,6 @@ "stylelintrc", "Repobeats", "timepicker", - "unclickable", - "overlayscrollbars" + "unclickable" ] } diff --git a/tools/public_api_guard/components/scrollbar.api.md b/tools/public_api_guard/components/scrollbar.api.md index fdbf5a649..571b9e21e 100644 --- a/tools/public_api_guard/components/scrollbar.api.md +++ b/tools/public_api_guard/components/scrollbar.api.md @@ -54,7 +54,7 @@ export const KBQ_SCROLLBAR_OPTIONS_DEFAULT_CONFIG: KbqScrollbarOptions; // @public export const KBQ_SCROLLBAR_OPTIONS_DEFAULT_CONFIG_PROVIDER: Provider; -// @public +// @public (undocumented) export class KbqScrollbar implements AfterViewInit, OnDestroy { constructor(ngZone: NgZone, targetElement: ElementRef); contentElement: ElementRef; @@ -84,7 +84,7 @@ export class KbqScrollbar implements AfterViewInit, OnDestroy { static ɵfac: i0.ɵɵFactoryDeclaration; } -// @public +// @public (undocumented) export class KbqScrollbarDirective implements OnDestroy { constructor(ngZone: NgZone, scrollbarConfig?: { paddingAbsolute?: boolean | undefined; diff --git a/yarn.lock b/yarn.lock index 60aedf0a6..1dae55bb9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14409,7 +14409,7 @@ __metadata: ngx-highlightjs: "npm:^10.0.0" node-fetch: "npm:^3.3.1" nunjucks: "npm:^3.2.4" - overlayscrollbars: "npm:2.7.3" + overlayscrollbars: "npm:^2.7.3" postcss: "npm:^8.4.38" postcss-discard-comments: "npm:^7.0.0" prettier: "npm:^3.3.3" @@ -16427,7 +16427,7 @@ __metadata: languageName: node linkType: hard -"overlayscrollbars@npm:2.7.3": +"overlayscrollbars@npm:^2.7.3": version: 2.7.3 resolution: "overlayscrollbars@npm:2.7.3" checksum: 10c0/260ebc198eed8bf82656321a37ad13133f40062d2d2a3523574d940616f1330e97313d8b7442981e5314e680c26aa1966e0b704d678e5adb6a05d72f05dd6e82