popover: стилизация, сторисы, обёртки

src/lib/components/popover/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public_api.ts"
+  }
+}
+

src/lib/components/popover/popover.component.ts

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component, Input, ViewChild } from '@angular/core';
+import { Popover } from 'primeng/popover';
+import { SharedModule } from 'primeng/api';
+
+@Component({
+  selector: 'extra-popover',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [Popover, SharedModule],
+  host: { style: 'display: contents' },
+  template: `
+    <p-popover #op [dismissable]="dismissable" [appendTo]="appendTo">
+      <ng-content></ng-content>
+    </p-popover>
+  `
+})
+export class ExtraPopoverComponent {
+  @Input() dismissable = true;
+  @Input() appendTo: string | HTMLElement = 'body';
+
+  @ViewChild('op') private op!: Popover;
+
+  toggle(event: Event): void {
+    this.op.toggle(event);
+  }
+}

src/lib/components/popover/public_api.ts

@@ -0,0 +1,2 @@
+export * from './popover.component';
+

src/lib/providers/prime-preset/map-tokens.ts

@@ -49,6 +49,7 @@ import { timelineCss } from './tokens/components/timeline';
 import { toastCss } from './tokens/components/toast';
 import { toggleswitchCss } from './tokens/components/toggleswitch';
 import { autocompleteCss } from './tokens/components/autocomplete';
+import { popoverCss } from './tokens/components/popover';
 
 const presetTokens: Preset<AuraBaseDesignTokens> = {
   primitive: tokens.primitive as unknown as AuraBaseDesignTokens['primitive'],
@@ -233,6 +234,10 @@ const presetTokens: Preset<AuraBaseDesignTokens> = {
     autocomplete: {
       ...(tokens.components.autocomplete as unknown as ComponentsDesignTokens['autocomplete']),
       css: autocompleteCss
+    },
+    popover: {
+      ...(tokens.components.popover as unknown as ComponentsDesignTokens['popover']),
+      css: popoverCss
     }
   } as ComponentsDesignTokens
 };

src/lib/providers/prime-preset/tokens/components/popover.ts

@@ -0,0 +1,10 @@
+export const popoverCss = ({ dt }: { dt: (token: string) => string }): string => `
+  .p-popover.p-component::before {
+    border-width: 0.73rem;
+    margin-left: -0.86rem;
+  }
+
+  .p-popover.p-component::after {
+    margin-left: calc(-1 * ${dt('popover.extend.arrow.width')});
+  }
+`;

src/lib/providers/prime-preset/tokens/tokens.json

@@ -4021,8 +4021,9 @@
         "color": "{overlay.popover.color}",
         "borderRadius": "{overlay.popover.borderRadius}",
         "shadow": "{overlay.popover.shadow}",
-        "gutter": "{overlay.gap.100}",
-        "arrowOffset": "{overlay.popover.padding.200}"
+        "gutter": "{overlay.gap.300}",
+        "arrowOffset": "{overlay.popover.padding.200}",
+        "arrowLeft": "0px"
       },
       "content": {
         "padding": "{overlay.popover.padding.100}"

src/stories/components/popover/examples/popover-basic.component.ts

@@ -0,0 +1,61 @@
+import { Component, ViewChild } from '@angular/core';
+import { StoryObj } from '@storybook/angular';
+import { ExtraPopoverComponent } from '../../../../lib/components/popover/popover.component';
+import { ExtraButtonComponent } from '../../../../lib/components/button/button.component';
+
+const template = `
+<div class="min-h-[200px]">
+  <div class="relative inline-block">
+    <extra-button label="Показать" (click)="popover.toggle($event)"></extra-button>
+    <extra-popover #popover appendTo="self">
+      <p>Содержимое popover.</p>
+    </extra-popover>
+  </div>
+</div>
+`;
+const styles = '';
+
+@Component({
+  selector: 'app-popover-basic',
+  standalone: true,
+  imports: [ExtraPopoverComponent, ExtraButtonComponent],
+  template,
+  styles,
+})
+export class PopoverBasicComponent {
+  @ViewChild('popover') popover!: ExtraPopoverComponent;
+}
+
+export const Basic: StoryObj = {
+  render: () => ({
+    template: `<app-popover-basic></app-popover-basic>`,
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Базовый popover с текстовым содержимым.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component, ViewChild } from '@angular/core';
+import { ExtraPopoverComponent } from '@cdek-it/angular-ui-kit';
+import { ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-popover-basic',
+  standalone: true,
+  imports: [ExtraPopoverComponent, ExtraButtonComponent],
+  template: \`
+    <extra-button label="Показать" (click)="popover.toggle($event)"></extra-button>
+    <extra-popover #popover appendTo="self">
+      <p>Содержимое popover.</p>
+    </extra-popover>
+  \`,
+})
+export class PopoverBasicComponent {
+  @ViewChild('popover') popover!: ExtraPopoverComponent;
+}
+        `,
+      },
+    },
+  },
+};

src/stories/components/popover/examples/popover-rich-content.component.ts

@@ -0,0 +1,67 @@
+import { Component, ViewChild } from '@angular/core';
+import { StoryObj } from '@storybook/angular';
+import { ExtraPopoverComponent } from '../../../../lib/components/popover/popover.component';
+import { ExtraButtonComponent } from '../../../../lib/components/button/button.component';
+
+const template = `
+<div class="min-h-[250px]">
+  <div class="relative inline-block">
+    <extra-button label="Показать" (click)="popover.toggle($event)"></extra-button>
+    <extra-popover #popover appendTo="self">
+      <div class="flex flex-col gap-2">
+        <span class="font-semibold">Заголовок</span>
+        <p class="text-sm text-color-secondary">Дополнительное описание или любой произвольный контент внутри popover.</p>
+      </div>
+    </extra-popover>
+  </div>
+</div>
+`;
+const styles = '';
+
+@Component({
+  selector: 'app-popover-rich-content',
+  standalone: true,
+  imports: [ExtraPopoverComponent, ExtraButtonComponent],
+  template,
+  styles,
+})
+export class PopoverRichContentComponent {
+  @ViewChild('popover') popover!: ExtraPopoverComponent;
+}
+
+export const RichContent: StoryObj = {
+  render: () => ({
+    template: `<app-popover-rich-content></app-popover-rich-content>`,
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Popover с расширенным содержимым: заголовок и описание.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component, ViewChild } from '@angular/core';
+import { ExtraPopoverComponent } from '@cdek-it/angular-ui-kit';
+import { ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-popover-rich-content',
+  standalone: true,
+  imports: [ExtraPopoverComponent, ExtraButtonComponent],
+  template: \`
+    <extra-button label="Показать" (click)="popover.toggle($event)"></extra-button>
+    <extra-popover #popover appendTo="self">
+      <div class="flex flex-col gap-2">
+        <span class="font-semibold">Заголовок</span>
+        <p class="text-sm text-color-secondary">Дополнительное описание или любой произвольный контент внутри popover.</p>
+      </div>
+    </extra-popover>
+  \`,
+})
+export class PopoverRichContentComponent {
+  @ViewChild('popover') popover!: ExtraPopoverComponent;
+}
+        `,
+      },
+    },
+  },
+};

src/stories/components/popover/popover.stories.ts

@@ -0,0 +1,71 @@
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { ExtraPopoverComponent } from '../../../lib/components/popover/popover.component';
+import { PopoverBasicComponent } from './examples/popover-basic.component';
+import { PopoverRichContentComponent, RichContent } from './examples/popover-rich-content.component';
+
+const meta: Meta<ExtraPopoverComponent> = {
+  title: 'Components/Overlay/Popover',
+  component: ExtraPopoverComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [
+        ExtraPopoverComponent,
+        PopoverBasicComponent,
+        PopoverRichContentComponent,
+      ],
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: `Всплывающее наложение, привязанное к целевому элементу.
+
+\`\`\`typescript
+import { ExtraPopoverComponent } from '@cdek-it/angular-ui-kit';
+\`\`\``,
+      },
+    },
+    designTokens: { prefix: '--p-popover' },
+  },
+  argTypes: {
+    dismissable: {
+      control: 'boolean',
+      description: 'Закрывает popover при клике вне его области.',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'true' },
+        type: { summary: 'boolean' },
+      },
+    },
+    appendTo: {
+      control: 'text',
+      description: 'Элемент, к которому присоединяется popover в DOM.',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'body' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ExtraPopoverComponent>;
+
+export const Default: Story = {
+  name: 'Default',
+  render: () => ({
+    template: `<app-popover-basic></app-popover-basic>`,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story: 'Базовый пример компонента.',
+      },
+    },
+  },
+};
+
+export { RichContent };