diff --git a/packages/components-dev/sidepanel/module.ts b/packages/components-dev/sidepanel/module.ts index f0f550dc8d..40136b7f3b 100644 --- a/packages/components-dev/sidepanel/module.ts +++ b/packages/components-dev/sidepanel/module.ts @@ -14,6 +14,7 @@ import { } from '@koobiq/components/sidepanel'; import { KbqToggleModule } from '@koobiq/components/toggle'; import { + SidepanelDisableCloseExample, SidepanelNormalModeExample, SidepanelOverlayedExample, SidepanelOverviewExample, @@ -30,7 +31,8 @@ import { SidepanelNormalModeExample, SidepanelOverlayedExample, SidepanelSizesExample, - SidepanelWithCustomInjectorExample + SidepanelWithCustomInjectorExample, + SidepanelDisableCloseExample ], template: ` @@ -44,6 +46,8 @@ import {
+
+ `, changeDetection: ChangeDetectionStrategy.OnPush }) diff --git a/packages/components/sidepanel/examples.sidepanel.en.md b/packages/components/sidepanel/examples.sidepanel.en.md index 265aacdf32..4c87f64431 100644 --- a/packages/components/sidepanel/examples.sidepanel.en.md +++ b/packages/components/sidepanel/examples.sidepanel.en.md @@ -1,5 +1,7 @@ ### Dynamic configuration update +`KbqSidepanelConfig` properties, such as `hasBackdrop` and `disableClose`, can also be changed after the sidepanel is already open, via `KbqSidepanelRef.config`. + ### Custom injector diff --git a/packages/components/sidepanel/examples.sidepanel.ru.md b/packages/components/sidepanel/examples.sidepanel.ru.md index d3210c2ffb..94bbed958f 100644 --- a/packages/components/sidepanel/examples.sidepanel.ru.md +++ b/packages/components/sidepanel/examples.sidepanel.ru.md @@ -1,5 +1,7 @@ ### Динамическое изменение конфигурации +Параметры `KbqSidepanelConfig`, такие как `hasBackdrop` и `disableClose`, можно изменить и после того, как сайдпанель уже открыта, через `KbqSidepanelRef.config`. + ### Пользовательский инжектор diff --git a/packages/components/sidepanel/sidepanel.en.md b/packages/components/sidepanel/sidepanel.en.md index 9b7ffda3f8..9fe5976b9c 100644 --- a/packages/components/sidepanel/sidepanel.en.md +++ b/packages/components/sidepanel/sidepanel.en.md @@ -21,6 +21,12 @@ When opening, the sidepanel slides in from the edge of the screen and dims the r +##### Disable close on backdrop click + +The `disableClose` option in `KbqSidepanelConfig` prevents the sidepanel from being closed by clicking the backdrop or pressing Escape. This is useful when the user must explicitly confirm or dismiss the sidepanel through an action inside it, for example, to avoid losing unsaved changes. + + + #### Non-modal mode (without page blocking) When opening, the sidepanel slides in from the edge of the screen without dimming the rest of the page, so all elements behind it remain interactive. diff --git a/packages/components/sidepanel/sidepanel.ru.md b/packages/components/sidepanel/sidepanel.ru.md index 3d0240a94b..ce2cd500bb 100644 --- a/packages/components/sidepanel/sidepanel.ru.md +++ b/packages/components/sidepanel/sidepanel.ru.md @@ -21,6 +21,12 @@ +##### Запрет закрытия по клику на подложку + +Параметр `disableClose` в `KbqSidepanelConfig` запрещает закрытие сайдпанели по клику на подложку или нажатию Escape. Это полезно, когда пользователь должен явно подтвердить или закрыть сайдпанель действием внутри неё, например, чтобы не потерять несохранённые изменения. + + + #### Немодальный режим (без блокировки страницы) Сайдпанель при появлении выезжает из-за границы экрана, при этом основной экран не затемняется и со всеми элементами на нем можно взаимодействовать. diff --git a/packages/docs-examples/components/sidepanel/index.ts b/packages/docs-examples/components/sidepanel/index.ts index 2faec2fe4c..b6c4098775 100644 --- a/packages/docs-examples/components/sidepanel/index.ts +++ b/packages/docs-examples/components/sidepanel/index.ts @@ -1,4 +1,5 @@ import { NgModule } from '@angular/core'; +import { SidepanelDisableCloseExample } from './sidepanel-disable-close/sidepanel-disable-close-example'; import { SidepanelNormalModeExample } from './sidepanel-normal-mode/sidepanel-normal-mode-example'; import { SidepanelOverlayedExample } from './sidepanel-overlayed/sidepanel-overlayed-example'; import { SidepanelOverviewExample } from './sidepanel-overview/sidepanel-overview-example'; @@ -7,6 +8,7 @@ import { SidepanelWithCustomInjectorExample } from './sidepanel-with-custom-inje import { SidepanelWithDynamicConfigUpdateExample } from './sidepanel-with-dynamic-config-update/sidepanel-with-dynamic-config-update-example'; export { + SidepanelDisableCloseExample, SidepanelNormalModeExample, SidepanelOverlayedExample, SidepanelOverviewExample, @@ -21,7 +23,8 @@ const EXAMPLES = [ SidepanelOverlayedExample, SidepanelSizesExample, SidepanelWithCustomInjectorExample, - SidepanelWithDynamicConfigUpdateExample + SidepanelWithDynamicConfigUpdateExample, + SidepanelDisableCloseExample ]; @NgModule({ diff --git a/packages/docs-examples/components/sidepanel/sidepanel-disable-close/sidepanel-disable-close-example.ts b/packages/docs-examples/components/sidepanel/sidepanel-disable-close/sidepanel-disable-close-example.ts new file mode 100644 index 0000000000..d58f7143d7 --- /dev/null +++ b/packages/docs-examples/components/sidepanel/sidepanel-disable-close/sidepanel-disable-close-example.ts @@ -0,0 +1,49 @@ +import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; +import { KbqButtonModule } from '@koobiq/components/button'; +import { KbqSidepanelModule, KbqSidepanelService } from '@koobiq/components/sidepanel'; + +@Component({ + selector: 'example-sidepanel-disable-close-content', + imports: [KbqSidepanelModule, KbqButtonModule], + template: ` + Sidepanel + + Clicking the backdrop or pressing Escape won't close this sidepanel. Use the button below or the close icon + in the header instead. + + + + + + + `, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'layout-column flex' } +}) +export class ExampleSidepanelDisableCloseContent {} + +/** + * @title Sidepanel with disabled close on backdrop click + */ +@Component({ + selector: 'sidepanel-disable-close-example', + imports: [KbqButtonModule], + template: ` + + `, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class SidepanelDisableCloseExample { + private readonly sidepanelService = inject(KbqSidepanelService); + + open() { + this.sidepanelService.open(ExampleSidepanelDisableCloseContent, { + hasBackdrop: true, + disableClose: true + }); + } +} diff --git a/packages/docs-examples/example-module.ts b/packages/docs-examples/example-module.ts index 75881b1667..deeb641bc0 100644 --- a/packages/docs-examples/example-module.ts +++ b/packages/docs-examples/example-module.ts @@ -5224,6 +5224,21 @@ export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample} = { "primaryFile": "sidebar-with-splitter-example.ts", "importPath": "components/sidebar" }, + "sidepanel-disable-close": { + "packagePath": "components/sidepanel/sidepanel-disable-close", + "title": "Sidepanel with disabled close on backdrop click", + "componentName": "SidepanelDisableCloseExample", + "files": [ + "sidepanel-disable-close-example.ts" + ], + "localImportFiles": [], + "selector": "sidepanel-disable-close-example", + "additionalComponents": [ + "ExampleSidepanelDisableCloseContent" + ], + "primaryFile": "sidepanel-disable-close-example.ts", + "importPath": "components/sidepanel" + }, "sidepanel-normal-mode": { "packagePath": "components/sidepanel/sidepanel-normal-mode", "title": "Sidepanel normal mode", @@ -8324,6 +8339,8 @@ return import('@koobiq/docs-examples/components/select'); return import('@koobiq/docs-examples/components/sidebar'); case 'sidebar-with-splitter': return import('@koobiq/docs-examples/components/sidebar'); + case 'sidepanel-disable-close': +return import('@koobiq/docs-examples/components/sidepanel'); case 'sidepanel-normal-mode': return import('@koobiq/docs-examples/components/sidepanel'); case 'sidepanel-overlayed':