From fa29e2592b50eff66061030f02a882b10aff5228 Mon Sep 17 00:00:00 2001
From: Danil Khaliulin <danielooneilie@gmail.com>
Date: Mon, 7 Sep 2026 17:35:02 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=D0=BF=D0=BE=D0=BA=D0=B0=D0=B7=D0=B0=D1=82?=
 =?UTF-8?q?=D1=8C=20=D0=B2=D1=8B=D1=80=D0=B0=D0=B2=D0=BD=D0=B8=D0=B2=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20divider=20=D0=B2=20story:=20=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=BD=D1=82=D0=B5=D0=BD=D1=82,=20=D0=B2=D1=8B=D1=81=D0=BE?=
 =?UTF-8?q?=D1=82=D0=B0=20=D0=B4=D0=BB=D1=8F=20=D0=B2=D0=B5=D1=80=D1=82?=
 =?UTF-8?q?=D0=B8=D0=BA=D0=B0=D0=BB=D0=B8=20=D0=B8=20=D0=BE=D0=BF=D1=86?=
 =?UTF-8?q?=D0=B8=D0=B8=20=D0=BF=D0=BE=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/divider/divider.stories.ts     | 61 +++++++++++++++----
 1 file changed, 49 insertions(+), 12 deletions(-)

diff --git a/src/stories/components/divider/divider.stories.ts b/src/stories/components/divider/divider.stories.ts
index 8f7c5f87..f575aee2 100644
--- a/src/stories/components/divider/divider.stories.ts
+++ b/src/stories/components/divider/divider.stories.ts
@@ -6,9 +6,14 @@ import {
 } from './examples/divider-with-content.component';
 import { DividerWithIconComponent, WithIcon as WithIconStory } from './examples/divider-with-icon.component';
 import { AlignLeft as AlignLeftStory, DividerAlignLeftComponent } from './examples/divider-align-left.component';
-import { AlignBottom as AlignBottomStory, DividerAlignBottomComponent } from './examples/divider-align-bottom.component';
+import {
+  AlignBottom as AlignBottomStory,
+  DividerAlignBottomComponent
+} from './examples/divider-align-bottom.component';
+
+type DividerArgs = DividerComponent & { horizontalAlign: string; verticalAlign: string; content: string };
 
-const meta: Meta<DividerComponent> = {
+const meta: Meta<DividerArgs> = {
   title: 'Components/Panel/Divider',
   component: DividerComponent,
   tags: ['autodocs'],
@@ -56,14 +61,37 @@ import { DividerModule } from 'primeng/divider';
         type: { summary: "'solid' | 'dash'" }
       }
     },
-    align: {
+    align: { table: { disable: true } },
+    horizontalAlign: {
+      name: 'align',
       control: 'select',
-      options: ['left', 'center', 'right', 'top', 'bottom'],
+      options: ['left', 'center', 'right'],
       description: 'Выравнивание контента внутри разделителя',
       table: {
         category: 'Props',
         defaultValue: { summary: 'center' },
-        type: { summary: "'left' | 'center' | 'right' | 'top' | 'bottom'" }
+        type: { summary: "'left' | 'center' | 'right'" }
+      },
+      if: { arg: 'layout', eq: 'horizontal' }
+    },
+    verticalAlign: {
+      name: 'align',
+      control: 'select',
+      options: ['top', 'center', 'bottom'],
+      description: 'Выравнивание контента внутри разделителя',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'center' },
+        type: { summary: "'top' | 'center' | 'bottom'" }
+      },
+      if: { arg: 'layout', eq: 'vertical' }
+    },
+    content: {
+      control: 'text',
+      description: 'Контент разделителя (content projection); выравнивать без него нечего',
+      table: {
+        category: 'Слоты',
+        type: { summary: 'ng-content' }
       }
     }
   }
@@ -78,29 +106,38 @@ const commonTemplate = `
 `;
 
 export default meta;
-type Story = StoryObj<DividerComponent>;
+type Story = StoryObj<DividerArgs>;
 
 // ── Default ───────────────────────────────────────────────────────────────────
 
 export const Default: Story = {
   name: 'Default',
   render: (args) => {
+    const layout = args.layout ?? 'horizontal';
+    const align = layout === 'vertical' ? (args.verticalAlign ?? 'center') : (args.horizontalAlign ?? 'center');
+
     const parts: string[] = [];
 
-    if (args.layout && args.layout !== 'horizontal') parts.push(`layout="${args.layout}"`);
+    if (layout !== 'horizontal') parts.push(`layout="${layout}"`);
     if (args.type && args.type !== 'solid') parts.push(`type="${args.type}"`);
-    if (args.align && args.align !== 'center') parts.push(`align="${args.align}"`);
+    if (align !== 'center') parts.push(`align="${align}"`);
+
+    const attrs = parts.length ? `\n  ${parts.join('\n  ')}\n` : '';
+    const content = args.content ? `\n  <span>${args.content}</span>\n` : '';
+    const divider = `<extra-divider${attrs}>${content}</extra-divider>`;
 
-    const template = parts.length
-      ? `<extra-divider\n  ${parts.join('\n  ')}\n></extra-divider>`
-      : `<extra-divider></extra-divider>`;
+    /* Вертикальному разделителю нужна высота от родителя: без неё он ровно по контенту,
+       и выравнивать внутри нечего — top, center и bottom дают одно и то же. */
+    const template = layout === 'vertical' ? `<div class="flex h-40">\n  ${divider}\n</div>` : divider;
 
     return { props: args, template };
   },
   args: {
     layout: 'horizontal',
     type: 'solid',
-    align: 'center'
+    horizontalAlign: 'center',
+    verticalAlign: 'center',
+    content: 'Отправитель'
   },
   parameters: {
     docs: {

From 55cde734934cb5f70332d7dc6fbf19d365991e01 Mon Sep 17 00:00:00 2001
From: Danil Khaliulin <danielooneilie@gmail.com>
Date: Mon, 7 Sep 2026 17:40:33 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=D0=B2=D0=BA=D0=BB=D1=8E=D1=87=D0=B8=D1=82?=
 =?UTF-8?q?=D1=8C=20=D0=BA=D0=BE=D0=BD=D1=82=D1=80=D0=BE=D0=BB=D1=8B=20?=
 =?UTF-8?q?=D0=B2=20story=20with-content:=20=D0=B2=D1=8B=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5,=20=D1=82=D0=B8?=
 =?UTF-8?q?=D0=BF=20=D0=BB=D0=B8=D0=BD=D0=B8=D0=B8=20=D0=B8=20=D1=82=D0=B5?=
 =?UTF-8?q?=D0=BA=D1=81=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../divider-with-content.component.ts         | 48 +++++++++++++++----
 1 file changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/stories/components/divider/examples/divider-with-content.component.ts b/src/stories/components/divider/examples/divider-with-content.component.ts
index 166aa1c1..7fd19c0c 100644
--- a/src/stories/components/divider/examples/divider-with-content.component.ts
+++ b/src/stories/components/divider/examples/divider-with-content.component.ts
@@ -1,10 +1,17 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ExtraDividerComponent } from '../../../../lib/components/divider/divider.component';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  ExtraDividerAlign,
+  ExtraDividerComponent,
+  ExtraDividerLayout,
+  ExtraDividerType
+} from '../../../../lib/components/divider/divider.component';
 
+/* Вертикальному разделителю нужна высота от родителя: без неё он ровно по контенту,
+   и выравнивать внутри нечего — top, center и bottom дают одно и то же. */
 const template = `
-<div>
-  <extra-divider align="center">
-    <span>Москва → Новосибирск</span>
+<div [class]="layout === 'vertical' ? 'flex h-40' : ''">
+  <extra-divider [layout]="layout" [type]="type" [align]="align">
+    <span>{{ content }}</span>
   </extra-divider>
 </div>
 `;
@@ -18,12 +25,35 @@ const styles = '';
   template,
   styles
 })
-export class DividerWithContentComponent {}
+export class DividerWithContentComponent {
+  @Input() layout: ExtraDividerLayout = 'horizontal';
+  @Input() type: ExtraDividerType = 'solid';
+  @Input() align: ExtraDividerAlign = 'center';
+  @Input() content = 'Москва → Новосибирск';
+}
 
 export const WithContent = {
-  render: () => ({
-    template: `<app-divider-with-content></app-divider-with-content>`
-  }),
+  render: (args: Record<string, unknown>) => {
+    const layout = (args['layout'] as ExtraDividerLayout) ?? 'horizontal';
+    const align = (layout === 'vertical' ? args['verticalAlign'] : args['horizontalAlign']) as ExtraDividerAlign;
+
+    return {
+      props: { ...args, layout, align },
+      template: `<app-divider-with-content
+  [layout]="layout"
+  [type]="type"
+  [align]="align"
+  [content]="content"
+></app-divider-with-content>`
+    };
+  },
+  args: {
+    layout: 'horizontal' as const,
+    type: 'solid' as const,
+    horizontalAlign: 'center',
+    verticalAlign: 'center',
+    content: 'Москва → Новосибирск'
+  },
   parameters: {
     docs: {
       description: { story: 'Разделитель с текстовым контентом по центру.' },

From 731c0b5d2f09d68b083c96c86f8062bf8c778503 Mon Sep 17 00:00:00 2001
From: Danil Khaliulin <danielooneilie@gmail.com>
Date: Mon, 7 Sep 2026 17:44:35 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=D0=B2=D0=BA=D0=BB=D1=8E=D1=87=D0=B8=D1=82?=
 =?UTF-8?q?=D1=8C=20=D0=BA=D0=BE=D0=BD=D1=82=D1=80=D0=BE=D0=BB=D1=8B=20?=
 =?UTF-8?q?=D0=B2=20stories=20with-icon,=20align-left=20=D0=B8=20align-bot?=
 =?UTF-8?q?tom?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../divider-align-bottom.component.ts         | 48 ++++++++++++---
 .../examples/divider-align-left.component.ts  | 48 ++++++++++++---
 .../examples/divider-with-icon.component.ts   | 59 ++++++++++++++++---
 3 files changed, 128 insertions(+), 27 deletions(-)

diff --git a/src/stories/components/divider/examples/divider-align-bottom.component.ts b/src/stories/components/divider/examples/divider-align-bottom.component.ts
index 0e7a2336..504c6714 100644
--- a/src/stories/components/divider/examples/divider-align-bottom.component.ts
+++ b/src/stories/components/divider/examples/divider-align-bottom.component.ts
@@ -1,10 +1,17 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ExtraDividerComponent } from '../../../../lib/components/divider/divider.component';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  ExtraDividerAlign,
+  ExtraDividerComponent,
+  ExtraDividerLayout,
+  ExtraDividerType
+} from '../../../../lib/components/divider/divider.component';
 
+/* Вертикальному разделителю нужна высота от родителя: без неё он ровно по контенту,
+   и выравнивать внутри нечего — top, center и bottom дают одно и то же. */
 const template = `
-<div class="flex h-40">
-  <extra-divider layout="vertical" align="bottom">
-    <span>Отправитель</span>
+<div [class]="layout === 'vertical' ? 'flex h-40' : ''">
+  <extra-divider [layout]="layout" [type]="type" [align]="align">
+    <span>{{ content }}</span>
   </extra-divider>
 </div>
 `;
@@ -18,12 +25,35 @@ const styles = '';
   template,
   styles
 })
-export class DividerAlignBottomComponent {}
+export class DividerAlignBottomComponent {
+  @Input() layout: ExtraDividerLayout = 'vertical';
+  @Input() type: ExtraDividerType = 'solid';
+  @Input() align: ExtraDividerAlign = 'bottom';
+  @Input() content = 'Отправитель';
+}
 
 export const AlignBottom = {
-  render: () => ({
-    template: `<app-divider-align-bottom></app-divider-align-bottom>`
-  }),
+  render: (args: Record<string, unknown>) => {
+    const layout = (args['layout'] as ExtraDividerLayout) ?? 'vertical';
+    const align = (layout === 'vertical' ? args['verticalAlign'] : args['horizontalAlign']) as ExtraDividerAlign;
+
+    return {
+      props: { ...args, layout, align },
+      template: `<app-divider-align-bottom
+  [layout]="layout"
+  [type]="type"
+  [align]="align"
+  [content]="content"
+></app-divider-align-bottom>`
+    };
+  },
+  args: {
+    layout: 'vertical' as const,
+    type: 'solid' as const,
+    horizontalAlign: 'center',
+    verticalAlign: 'bottom',
+    content: 'Отправитель'
+  },
   parameters: {
     docs: {
       description: { story: 'Контент вертикального разделителя выровнен по нижнему краю.' },
diff --git a/src/stories/components/divider/examples/divider-align-left.component.ts b/src/stories/components/divider/examples/divider-align-left.component.ts
index 21e85145..5e1e5f2c 100644
--- a/src/stories/components/divider/examples/divider-align-left.component.ts
+++ b/src/stories/components/divider/examples/divider-align-left.component.ts
@@ -1,10 +1,17 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ExtraDividerComponent } from '../../../../lib/components/divider/divider.component';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  ExtraDividerAlign,
+  ExtraDividerComponent,
+  ExtraDividerLayout,
+  ExtraDividerType
+} from '../../../../lib/components/divider/divider.component';
 
+/* Вертикальному разделителю нужна высота от родителя: без неё он ровно по контенту,
+   и выравнивать внутри нечего — top, center и bottom дают одно и то же. */
 const template = `
-<div>
-  <extra-divider align="left">
-    <span>Отправитель</span>
+<div [class]="layout === 'vertical' ? 'flex h-40' : ''">
+  <extra-divider [layout]="layout" [type]="type" [align]="align">
+    <span>{{ content }}</span>
   </extra-divider>
 </div>
 `;
@@ -18,12 +25,35 @@ const styles = '';
   template,
   styles
 })
-export class DividerAlignLeftComponent {}
+export class DividerAlignLeftComponent {
+  @Input() layout: ExtraDividerLayout = 'horizontal';
+  @Input() type: ExtraDividerType = 'solid';
+  @Input() align: ExtraDividerAlign = 'left';
+  @Input() content = 'Отправитель';
+}
 
 export const AlignLeft = {
-  render: () => ({
-    template: `<app-divider-align-left></app-divider-align-left>`
-  }),
+  render: (args: Record<string, unknown>) => {
+    const layout = (args['layout'] as ExtraDividerLayout) ?? 'horizontal';
+    const align = (layout === 'vertical' ? args['verticalAlign'] : args['horizontalAlign']) as ExtraDividerAlign;
+
+    return {
+      props: { ...args, layout, align },
+      template: `<app-divider-align-left
+  [layout]="layout"
+  [type]="type"
+  [align]="align"
+  [content]="content"
+></app-divider-align-left>`
+    };
+  },
+  args: {
+    layout: 'horizontal' as const,
+    type: 'solid' as const,
+    horizontalAlign: 'left',
+    verticalAlign: 'top',
+    content: 'Отправитель'
+  },
   parameters: {
     docs: {
       description: { story: 'Контент разделителя выровнен по левому краю.' },
diff --git a/src/stories/components/divider/examples/divider-with-icon.component.ts b/src/stories/components/divider/examples/divider-with-icon.component.ts
index 1c8f8a77..ea704a1e 100644
--- a/src/stories/components/divider/examples/divider-with-icon.component.ts
+++ b/src/stories/components/divider/examples/divider-with-icon.component.ts
@@ -1,10 +1,17 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ExtraDividerComponent } from '../../../../lib/components/divider/divider.component';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  ExtraDividerAlign,
+  ExtraDividerComponent,
+  ExtraDividerLayout,
+  ExtraDividerType
+} from '../../../../lib/components/divider/divider.component';
 
+/* Вертикальному разделителю нужна высота от родителя: без неё он ровно по контенту,
+   и выравнивать внутри нечего — top, center и bottom дают одно и то же. */
 const template = `
-<div>
-  <extra-divider align="center">
-    <i class="ti ti-map-pin"></i>
+<div [class]="layout === 'vertical' ? 'flex h-40' : ''">
+  <extra-divider [layout]="layout" [type]="type" [align]="align">
+    <i [class]="icon"></i>
   </extra-divider>
 </div>
 `;
@@ -18,12 +25,46 @@ const styles = '';
   template,
   styles
 })
-export class DividerWithIconComponent {}
+export class DividerWithIconComponent {
+  @Input() layout: ExtraDividerLayout = 'horizontal';
+  @Input() type: ExtraDividerType = 'solid';
+  @Input() align: ExtraDividerAlign = 'center';
+  @Input() icon = 'ti ti-map-pin';
+}
 
 export const WithIcon = {
-  render: () => ({
-    template: `<app-divider-with-icon></app-divider-with-icon>`
-  }),
+  render: (args: Record<string, unknown>) => {
+    const layout = (args['layout'] as ExtraDividerLayout) ?? 'horizontal';
+    const align = (layout === 'vertical' ? args['verticalAlign'] : args['horizontalAlign']) as ExtraDividerAlign;
+
+    return {
+      props: { ...args, layout, align },
+      template: `<app-divider-with-icon
+  [layout]="layout"
+  [type]="type"
+  [align]="align"
+  [icon]="icon"
+></app-divider-with-icon>`
+    };
+  },
+  args: {
+    layout: 'horizontal' as const,
+    type: 'solid' as const,
+    horizontalAlign: 'center',
+    verticalAlign: 'center',
+    icon: 'ti ti-map-pin'
+  },
+  argTypes: {
+    content: { table: { disable: true } },
+    icon: {
+      control: 'text',
+      description: 'Класс иконки tabler icon',
+      table: {
+        category: 'Слоты',
+        type: { summary: 'string' }
+      }
+    }
+  },
   parameters: {
     docs: {
       description: { story: 'Разделитель с иконкой.' },