Revert "fix(docs,cli,scrolling): stick to specific scrollbar lib vers…

…ion (#DS-2899)" (#306)

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,

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",

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;

packages/components-dev/scrollbar/template.html

@@ -21,7 +21,7 @@ <h4>Simple example</h4>
                     #scrollbarRef="kbqScrollbar"
                     kbq-scrollbar
                     style="height: 300px; max-width: 400px"
-                    (onScroll)="(null)"
+                    (onScroll)="cdr.markForCheck()"
                 >
                     <div style="width: 400px">{{ longText }}</div>
                 </div>

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": {

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',

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]'
 })

packages/components/scrollbar/scrollbar.md

@@ -1,34 +1,20 @@
-Используется для настройки параметров скроллбара, таких как:
-
--   Минимальная высота/ширина ползунка
--   Задний фон ползунка
--   Поведение скролла при перемещении мыши вне области скроллбара.
+Используется для кастомизации скроллбара.
 
 На данный момент возможно применять к простым элементам за исключением textarea.
 
-Чтобы компонент работал правильно, установите библиотеку `overlayscrollbars` с версией `2.7.3`.
-Если ее ещё нет в вашем списке зависимостей, убедитесь, что вы устанавливаете её следующей командой:
-
-```
-npm install [email protected]
-```
-
-<!-- example(scrollbar-overview) -->
-
-## Настройка поведения скроллбаров
-
-Вы можете задать параметры для скроллбаров двумя способами:
+### Кастомизация
 
-**Настройка одного скроллбара:** Если вам нужно изменить настройки только для одного скроллбара, используйте `options` параметр.
+1. Доступно установка кастомные поведения скролла:
+    - Для отдельного скролла через `@Input() options`
+    - Для всех скроллбаров в определенной области через токен `KBQ_SCROLLBAR_CONFIG`
+2. Доступна кастомизация цветов и геометрии элементов скроллбара:
+    - Минимальная высота/ширина ползунка
+    - Задний фон ползунка
 
-<!-- example(scrollbar-input-customization) -->
-
-**Настройка всех скроллбаров:** если вы хотите изменить настройки для всех скроллбаров в модуле, используйте токен `KBQ_SCROLLBAR_CONFIG`.
-
-<!-- example(scrollbar-module-customization) -->
+Доступно прослушивание нативного событие scroll.
 
-### Возможности
+<!-- example(scrollbar-overview) -->
 
-Доступно прослушивание нативного событие scroll.
+### Scroll to top
 
 <!-- example(scrollbar-scroll-to-top) -->

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
     }

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]
 })

packages/docs-examples/components/scrollbar/scrollbar-overview/scrollbar-overview-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */