;
+
+// ── Default ───────────────────────────────────────────────────────────────────
+
+export const Default: Story = {
+ name: 'Default',
+ render: (args) => ({
+ props: { ...args, visible: false },
+ template: `
+
+
+ Drawer content.
+
+ `,
+ }),
+ args: {
+ header: 'Drawer',
+ position: 'right',
+ size: 'default',
+ modal: true,
+ fullScreen: false,
+ dismissible: true,
+ showCloseIcon: true,
+ closeOnEscape: true,
+ blockScroll: true,
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Базовый пример компонента. Используйте Controls для интерактивного изменения пропсов.',
+ },
+ },
+ },
+};
+
+// ── Sizes ─────────────────────────────────────────────────────────────────────
+
+export const Sizes: Story = SizesStory;
+
+// ── Position ──────────────────────────────────────────────────────────────────
+
+export const Position: Story = PositionStory;
+
+// ── WithFooter ────────────────────────────────────────────────────────────────
+
+export const WithFooter: Story = WithFooterStory;
+
+// ── FullScreen ────────────────────────────────────────────────────────────────
+
+export const FullScreen: Story = FullScreenStory;
+
+// ── WithoutModal ──────────────────────────────────────────────────────────────
+
+export const WithoutModal: Story = WithoutModalStory;
+
+// ── WithCustomHeader ─────────────────────────────────────────────────────────
+
+export const WithCustomHeader: Story = WithCustomHeaderStory;
diff --git a/src/stories/components/drawer/examples/drawer-full-screen.component.ts b/src/stories/components/drawer/examples/drawer-full-screen.component.ts
new file mode 100644
index 0000000..544ccb8
--- /dev/null
+++ b/src/stories/components/drawer/examples/drawer-full-screen.component.ts
@@ -0,0 +1,59 @@
+import { Component } from '@angular/core';
+import { StoryObj } from '@storybook/angular';
+import { ExtraDrawerComponent } from '../../../../lib/components/drawer/drawer.component';
+import { ExtraButtonComponent } from '../../../../lib/components/button/button.component';
+
+const template = `
+
+
+
+ Full screen drawer content.
+
+`;
+const styles = '';
+
+@Component({
+ selector: 'app-drawer-full-screen',
+ standalone: true,
+ imports: [ExtraDrawerComponent, ExtraButtonComponent],
+ template,
+ styles,
+})
+export class DrawerFullScreenComponent {
+ visible = false;
+}
+
+export const FullScreen: StoryObj = {
+ render: () => ({
+ template: ``,
+ }),
+ parameters: {
+ controls: { disable: true },
+ docs: {
+ description: { story: 'Drawer в полноэкранном режиме.' },
+ source: {
+ language: 'ts',
+ code: `
+import { Component } from '@angular/core';
+import { ExtraDrawerComponent, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+ selector: 'app-drawer-full-screen',
+ standalone: true,
+ imports: [ExtraDrawerComponent, ExtraButtonComponent],
+ template: \`
+
+
+
+ Full screen drawer content.
+
+ \`,
+})
+export class DrawerFullScreenComponent {
+ visible = false;
+}
+ `,
+ },
+ },
+ },
+};
diff --git a/src/stories/components/drawer/examples/drawer-position.component.ts b/src/stories/components/drawer/examples/drawer-position.component.ts
new file mode 100644
index 0000000..a927bb6
--- /dev/null
+++ b/src/stories/components/drawer/examples/drawer-position.component.ts
@@ -0,0 +1,99 @@
+import { Component } from '@angular/core';
+import { StoryObj } from '@storybook/angular';
+import { ExtraDrawerComponent } from '../../../../lib/components/drawer/drawer.component';
+import { ExtraButtonComponent } from '../../../../lib/components/button/button.component';
+
+const template = `
+
+
+
+
+
+
+
+
+ Left drawer content.
+
+
+
+ Right drawer content.
+
+
+
+ Top drawer content.
+
+
+
+ Bottom drawer content.
+
+`;
+const styles = '';
+
+@Component({
+ selector: 'app-drawer-position',
+ standalone: true,
+ imports: [ExtraDrawerComponent, ExtraButtonComponent],
+ template,
+ styles,
+})
+export class DrawerPositionComponent {
+ visibleLeft = false;
+ visibleRight = false;
+ visibleTop = false;
+ visibleBottom = false;
+}
+
+export const Position: StoryObj = {
+ render: () => ({
+ template: ``,
+ }),
+ parameters: {
+ controls: { disable: true },
+ docs: {
+ description: { story: 'Drawer с различными позициями: left, right, top, bottom.' },
+ source: {
+ language: 'ts',
+ code: `
+import { Component } from '@angular/core';
+import { ExtraDrawerComponent, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+ selector: 'app-drawer-position',
+ standalone: true,
+ imports: [ExtraDrawerComponent, ExtraButtonComponent],
+ template: \`
+
+
+
+
+
+
+
+
+ Left drawer content.
+
+
+
+ Right drawer content.
+
+
+
+ Top drawer content.
+
+
+
+ Bottom drawer content.
+
+ \`,
+})
+export class DrawerPositionComponent {
+ visibleLeft = false;
+ visibleRight = false;
+ visibleTop = false;
+ visibleBottom = false;
+}
+ `,
+ },
+ },
+ },
+};
diff --git a/src/stories/components/drawer/examples/drawer-sizes.component.ts b/src/stories/components/drawer/examples/drawer-sizes.component.ts
new file mode 100644
index 0000000..481152d
--- /dev/null
+++ b/src/stories/components/drawer/examples/drawer-sizes.component.ts
@@ -0,0 +1,99 @@
+import { Component } from '@angular/core';
+import { StoryObj } from '@storybook/angular';
+import { ExtraDrawerComponent } from '../../../../lib/components/drawer/drawer.component';
+import { ExtraButtonComponent } from '../../../../lib/components/button/button.component';
+
+const template = `
+
+
+
+
+
+
+
+
+ Default size drawer content.
+
+
+
+ Small size drawer content.
+
+
+
+ Large size drawer content.
+
+
+
+ Extra large size drawer content.
+
+`;
+const styles = '';
+
+@Component({
+ selector: 'app-drawer-sizes',
+ standalone: true,
+ imports: [ExtraDrawerComponent, ExtraButtonComponent],
+ template,
+ styles,
+})
+export class DrawerSizesComponent {
+ visibleDefault = false;
+ visibleSm = false;
+ visibleLg = false;
+ visibleXlg = false;
+}
+
+export const Sizes: StoryObj = {
+ render: () => ({
+ template: ``,
+ }),
+ parameters: {
+ controls: { disable: true },
+ docs: {
+ description: { story: 'Drawer в различных размерах: default, sm, lg, xlg.' },
+ source: {
+ language: 'ts',
+ code: `
+import { Component } from '@angular/core';
+import { ExtraDrawerComponent, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+ selector: 'app-drawer-sizes',
+ standalone: true,
+ imports: [ExtraDrawerComponent, ExtraButtonComponent],
+ template: \`
+
+
+
+
+
+
+
+
+ Default size drawer content.
+
+
+
+ Small size drawer content.
+
+
+
+ Large size drawer content.
+
+
+
+ Extra large size drawer content.
+
+ \`,
+})
+export class DrawerSizesComponent {
+ visibleDefault = false;
+ visibleSm = false;
+ visibleLg = false;
+ visibleXlg = false;
+}
+ `,
+ },
+ },
+ },
+};
diff --git a/src/stories/components/drawer/examples/drawer-with-custom-header.component.ts b/src/stories/components/drawer/examples/drawer-with-custom-header.component.ts
new file mode 100644
index 0000000..3e07452
--- /dev/null
+++ b/src/stories/components/drawer/examples/drawer-with-custom-header.component.ts
@@ -0,0 +1,73 @@
+import { Component } from '@angular/core';
+import { StoryObj } from '@storybook/angular';
+import { ExtraDrawerComponent } from '../../../../lib/components/drawer/drawer.component';
+import { ExtraButtonComponent } from '../../../../lib/components/button/button.component';
+
+const template = `
+
+
+
+
+
+ Custom Header
+
+
+
+
+ Drawer content with a custom header template.
+
+`;
+const styles = '';
+
+@Component({
+ selector: 'app-drawer-with-custom-header',
+ standalone: true,
+ imports: [ExtraDrawerComponent, ExtraButtonComponent],
+ template,
+ styles,
+})
+export class DrawerWithCustomHeaderComponent {
+ visible = false;
+}
+
+export const WithCustomHeader: StoryObj = {
+ render: () => ({
+ template: ``,
+ }),
+ parameters: {
+ controls: { disable: true },
+ docs: {
+ description: { story: 'Drawer с кастомным заголовком через ng-template #drawerHeader.' },
+ source: {
+ language: 'ts',
+ code: `
+import { Component } from '@angular/core';
+import { ExtraDrawerComponent, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+ selector: 'app-drawer-with-custom-header',
+ standalone: true,
+ imports: [ExtraDrawerComponent, ExtraButtonComponent],
+ template: \`
+
+
+
+
+
+ Custom Header
+
+
+
+
+ Drawer content with a custom header template.
+
+ \`,
+})
+export class DrawerWithCustomHeaderComponent {
+ visible = false;
+}
+ `,
+ },
+ },
+ },
+};
diff --git a/src/stories/components/drawer/examples/drawer-with-footer.component.ts b/src/stories/components/drawer/examples/drawer-with-footer.component.ts
new file mode 100644
index 0000000..dccabc7
--- /dev/null
+++ b/src/stories/components/drawer/examples/drawer-with-footer.component.ts
@@ -0,0 +1,73 @@
+import { Component } from '@angular/core';
+import { StoryObj } from '@storybook/angular';
+import { ExtraDrawerComponent } from '../../../../lib/components/drawer/drawer.component';
+import { ExtraButtonComponent } from '../../../../lib/components/button/button.component';
+
+const template = `
+
+
+
+ Drawer content with footer actions.
+
+
+
+
+
+
+
+
+`;
+const styles = '';
+
+@Component({
+ selector: 'app-drawer-with-footer',
+ standalone: true,
+ imports: [ExtraDrawerComponent, ExtraButtonComponent],
+ template,
+ styles,
+})
+export class DrawerWithFooterComponent {
+ visible = false;
+}
+
+export const WithFooter: StoryObj = {
+ render: () => ({
+ template: ``,
+ }),
+ parameters: {
+ controls: { disable: true },
+ docs: {
+ description: { story: 'Drawer с футером, содержащим кнопки действий.' },
+ source: {
+ language: 'ts',
+ code: `
+import { Component } from '@angular/core';
+import { ExtraDrawerComponent, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+ selector: 'app-drawer-with-footer',
+ standalone: true,
+ imports: [ExtraDrawerComponent, ExtraButtonComponent],
+ template: \`
+
+
+
+ Drawer content with footer actions.
+
+
+
+
+
+
+
+
+ \`,
+})
+export class DrawerWithFooterComponent {
+ visible = false;
+}
+ `,
+ },
+ },
+ },
+};
diff --git a/src/stories/components/drawer/examples/drawer-without-modal.component.ts b/src/stories/components/drawer/examples/drawer-without-modal.component.ts
new file mode 100644
index 0000000..ba27fdf
--- /dev/null
+++ b/src/stories/components/drawer/examples/drawer-without-modal.component.ts
@@ -0,0 +1,59 @@
+import { Component } from '@angular/core';
+import { StoryObj } from '@storybook/angular';
+import { ExtraDrawerComponent } from '../../../../lib/components/drawer/drawer.component';
+import { ExtraButtonComponent } from '../../../../lib/components/button/button.component';
+
+const template = `
+
+
+
+ Drawer without backdrop overlay.
+
+`;
+const styles = '';
+
+@Component({
+ selector: 'app-drawer-without-modal',
+ standalone: true,
+ imports: [ExtraDrawerComponent, ExtraButtonComponent],
+ template,
+ styles,
+})
+export class DrawerWithoutModalComponent {
+ visible = false;
+}
+
+export const WithoutModal: StoryObj = {
+ render: () => ({
+ template: ``,
+ }),
+ parameters: {
+ controls: { disable: true },
+ docs: {
+ description: { story: 'Drawer без модального оверлея.' },
+ source: {
+ language: 'ts',
+ code: `
+import { Component } from '@angular/core';
+import { ExtraDrawerComponent, ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+ selector: 'app-drawer-without-modal',
+ standalone: true,
+ imports: [ExtraDrawerComponent, ExtraButtonComponent],
+ template: \`
+
+
+
+ Drawer without backdrop overlay.
+
+ \`,
+})
+export class DrawerWithoutModalComponent {
+ visible = false;
+}
+ `,
+ },
+ },
+ },
+};