docs(sidepanel): modal mode with close disabled (#DS-2313)

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: `
         <sidepanel-overview-example />
@@ -44,6 +46,8 @@ import {
         <sidepanel-with-dynamic-config-update-example />
         <hr />
         <sidepanel-with-custom-injector-example />
+        <hr />
+        <sidepanel-disable-close-example />
     `,
     changeDetection: ChangeDetectionStrategy.OnPush
 })

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`.
+
 <!-- example(sidepanel-with-dynamic-config-update) -->
 
 ### Custom injector

packages/components/sidepanel/examples.sidepanel.ru.md

@@ -1,5 +1,7 @@
 ### Динамическое изменение конфигурации
 
+Параметры `KbqSidepanelConfig`, такие как `hasBackdrop` и `disableClose`, можно изменить и после того, как сайдпанель уже открыта, через `KbqSidepanelRef.config`.
+
 <!-- example(sidepanel-with-dynamic-config-update) -->
 
 ### Пользовательский инжектор

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
 
 <!-- example(sidepanel-overview) -->
 
+##### 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.
+
+<!-- example(sidepanel-disable-close) -->
+
 #### 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.

packages/components/sidepanel/sidepanel.ru.md

@@ -21,6 +21,12 @@
 
 <!-- example(sidepanel-overview) -->
 
+##### Запрет закрытия по клику на подложку
+
+Параметр `disableClose` в `KbqSidepanelConfig` запрещает закрытие сайдпанели по клику на подложку или нажатию Escape. Это полезно, когда пользователь должен явно подтвердить или закрыть сайдпанель действием внутри неё, например, чтобы не потерять несохранённые изменения.
+
+<!-- example(sidepanel-disable-close) -->
+
 #### Немодальный режим (без блокировки страницы)
 
 Сайдпанель при появлении выезжает из-за границы экрана, при этом основной экран не затемняется и со всеми элементами на нем можно взаимодействовать.

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({

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: `
+        <kbq-sidepanel-header [closeable]="true">Sidepanel</kbq-sidepanel-header>
+        <kbq-sidepanel-body>
+            Clicking the backdrop or pressing Escape won't close this sidepanel. Use the button below or the close icon
+            in the header instead.
+        </kbq-sidepanel-body>
+        <kbq-sidepanel-footer>
+            <kbq-sidepanel-actions>
+                <button kbq-button color="contrast" kbq-sidepanel-close>
+                    <span>Close</span>
+                </button>
+            </kbq-sidepanel-actions>
+        </kbq-sidepanel-footer>
+    `,
+    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: `
+        <button kbq-button (click)="open()">
+            <span>Open</span>
+        </button>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SidepanelDisableCloseExample {
+    private readonly sidepanelService = inject(KbqSidepanelService);
+
+    open() {
+        this.sidepanelService.open(ExampleSidepanelDisableCloseContent, {
+            hasBackdrop: true,
+            disableClose: true
+        });
+    }
+}

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