api refactor

src/lib/components/avatar/avatar.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular
 import { Avatar } from 'primeng/avatar';
 import { AvatarGroup } from 'primeng/avatargroup';
 
-export type ExtraAvatarSize = 'normal' | 'large' | 'xlarge';
+export type ExtraAvatarSize = 'base' | 'large' | 'xlarge';
 export type ExtraAvatarShape = 'square' | 'circle';
 
 @Component({
@@ -24,7 +24,7 @@ export class ExtraAvatarComponent {
   @Input() label = '';
   @Input() icon = '';
   @Input() image = '';
-  @Input() size: ExtraAvatarSize = 'normal';
+  @Input() size: ExtraAvatarSize = 'base';
   @Input() shape: ExtraAvatarShape = 'square';
 
   @HostBinding('class') get hostClass(): string {
@@ -34,8 +34,8 @@ export class ExtraAvatarComponent {
     return classes.join(' ');
   }
 
-  get primeSize(): 'normal' | 'large' | 'xlarge' | undefined {
-    return this.size === 'normal' ? undefined : this.size;
+  get primeSize(): 'large' | 'xlarge' | undefined {
+    return this.size === 'base' ? undefined : this.size;
   }
 }
 

src/lib/components/button/button.component.ts

@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { Button, ButtonSeverity as PrimeButtonSeverity } from 'primeng/button';
 
-export type ExtraButtonVariant = 'primary' | 'secondary' | 'outlined' | 'text' | 'link';
+export type ExtraButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'text' | 'link';
 export type ExtraButtonSeverity = 'success' | 'warning' | 'danger' | 'info' | null;
 export type ExtraButtonSize = 'small' | 'base' | 'large' | 'xlarge';
-export type ExtraButtonIconPos = 'prefix' | 'postfix' | null;
+export type ExtraButtonIconPosition = 'prefix' | 'postfix' | null;
 export type ExtraBadgeSeverity = 'success' | 'info' | 'warning' | 'danger' | 'secondary' | 'contrast' | null;
 type PrimeBadgeSeverity = Extract<Button['badgeSeverity'], string | null>;
 type ExtraButtonSeverityValue = PrimeButtonSeverity;
@@ -23,11 +23,11 @@ type ExtraBadgeSeverityValue = PrimeBadgeSeverity;
       [size]="primeSize"
       [styleClass]="size === 'xlarge' ? 'p-button-xlg' : ''"
       [rounded]="rounded"
-      [outlined]="variant === 'outlined'"
+      [outlined]="variant === 'tertiary'"
       [text]="variant === 'text' || text"
       [link]="variant === 'link'"
       [icon]="icon"
-      [iconPos]="primeIconPos"
+      [iconPos]="primeIconPosition"
       [severity]="primeSeverity"
       [badge]="showBadge ? badge || ' ' : undefined"
       [badgeSeverity]="primeBadgeSeverity"
@@ -44,7 +44,7 @@ export class ExtraButtonComponent {
   @Input() severity: ExtraButtonSeverity = null;
   @Input() size: ExtraButtonSize = 'base';
   @Input() rounded = false;
-  @Input() iconPos: ExtraButtonIconPos = null;
+  @Input() iconPosition: ExtraButtonIconPosition = null;
   @Input() iconOnly = false;
   @Input() icon = '';
   @Input() disabled = false;
@@ -64,8 +64,8 @@ export class ExtraButtonComponent {
     return undefined;
   }
 
-  get primeIconPos(): 'left' | 'right' {
-    return this.iconPos === 'postfix' ? 'right' : 'left';
+  get primeIconPosition(): 'left' | 'right' {
+    return this.iconPosition === 'postfix' ? 'right' : 'left';
   }
 
   get primeSeverity(): ExtraButtonSeverityValue | null {

src/lib/components/confirm-dialog/confirm-dialog.component.ts

@@ -5,7 +5,7 @@ import { PrimeTemplate } from 'primeng/api';
 import { ExtraButtonComponent } from '@cdek-it/angular-ui-kit/components/button';
 
 export type ExtraConfirmDialogSize = 'sm' | 'default' | 'lg' | 'xlg';
-export type ExtraConfirmDialogSeverity = 'success' | 'info' | 'warn' | 'help' | 'danger' | 'default';
+export type ExtraConfirmDialogSeverity = 'success' | 'info' | 'warning' | 'help' | 'danger' | 'default';
 
 @Directive({ selector: '[extraConfirmDialogHeader]', standalone: true })
 export class ExtraConfirmDialogHeaderDirective {}
@@ -84,7 +84,7 @@ export class ExtraConfirmDialogComponent {
     const severityMap: Record<ExtraConfirmDialogSeverity, string> = {
       success: 'p-confirm-dialog-accept',
       info: 'p-confirm-dialog-info',
-      warn: 'p-confirm-dialog-warn',
+      warning: 'p-confirm-dialog-warn',
       help: 'p-confirm-dialog-help',
       danger: 'p-confirm-dialog-error',
       default: ''

src/lib/components/message/message.component.ts

@@ -3,21 +3,23 @@ import { Message } from 'primeng/message';
 import { ButtonDirective } from 'primeng/button';
 import { SharedModule } from 'primeng/api';
 
-export type ExtraMessageSeverity = 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast';
+export type ExtraMessageSeverity = 'success' | 'info' | 'warning' | 'danger' | 'secondary' | 'contrast';
+
+type PrimeMessageSeverity = 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast';
 
 const SEVERITY_ICONS: Record<string, string> = {
   info: 'ti ti-info-circle',
   success: 'ti ti-circle-check',
-  warn: 'ti ti-alert-triangle',
-  error: 'ti ti-alert-circle'
+  warning: 'ti ti-alert-triangle',
+  danger: 'ti ti-alert-circle'
 };
 
 @Component({
   selector: 'extra-message',
   standalone: true,
   imports: [Message, ButtonDirective, SharedModule],
   template: `
-    <p-message [severity]="severity" [closable]="false" [life]="life">
+    <p-message [severity]="primeSeverity" [closable]="false" [life]="life">
       <ng-template pTemplate="container" let-closeCallback="closeCallback">
         <div class="p-message-accent-line"></div>
         <i [class]="resolvedIcon + ' p-message-icon'"></i>
@@ -55,4 +57,10 @@ export class ExtraMessageComponent {
   get resolvedIcon(): string {
     return this.icon ?? SEVERITY_ICONS[this.severity] ?? 'ti ti-info-circle';
   }
+
+  get primeSeverity(): PrimeMessageSeverity {
+    if (this.severity === 'warning') return 'warn';
+    if (this.severity === 'danger') return 'error';
+    return this.severity;
+  }
 }

src/lib/components/progressspinner/progressspinner.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 // Let's import the component directly. Wait, index.d.ts exports { ProgressSpinner, ProgressSpinnerModule }. Either is fine. Let's use ProgressSpinner.
 import { ProgressSpinner } from 'primeng/progressspinner';
 
-export type ExtraProgressSpinnerSize = 'small' | 'medium' | 'large' | 'xlarge';
+export type ExtraProgressSpinnerSize = 'small' | 'base' | 'large' | 'xlarge';
 
 @Component({
   selector: 'extra-progressspinner',
@@ -20,7 +20,7 @@ export type ExtraProgressSpinnerSize = 'small' | 'medium' | 'large' | 'xlarge';
   `
 })
 export class ExtraProgressSpinnerComponent {
-  @Input() size: ExtraProgressSpinnerSize = 'medium';
+  @Input() size: ExtraProgressSpinnerSize = 'base';
   @Input() multicolor = true;
   @Input() strokeWidth = '2';
   @Input() fill = 'none';

src/lib/components/select-button/select-button.component.ts

@@ -42,7 +42,7 @@ export class ExtraSelectButtonComponent implements ControlValueAccessor {
   @Input() optionLabel = 'label';
   @Input() optionValue = 'value';
   @Input() optionDisabled = 'disabled';
-  @Input() size: 'base' | 'small' | 'large' | 'xLarge' = 'base';
+  @Input() size: 'base' | 'small' | 'large' | 'xlarge' = 'base';
   @Input() multiple = false;
   @Input() allowEmpty = true;
 
@@ -66,7 +66,7 @@ export class ExtraSelectButtonComponent implements ControlValueAccessor {
     const sizeMap: Record<string, string> = {
       small: 'p-selectbutton-small',
       large: 'p-selectbutton-large',
-      xLarge: 'p-selectbutton-xlarge',
+      xlarge: 'p-selectbutton-xlarge',
     };
     return sizeMap[this.size] ?? '';
   }

src/lib/components/tag/tag.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { Tag } from 'primeng/tag';
 
-export type ExtraTagSeverity = 'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger';
+export type ExtraTagSeverity = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger';
 
 @Component({
   selector: 'extra-tag',
@@ -20,6 +20,7 @@ export class ExtraTagComponent {
 
   get primeSeverity(): 'secondary' | 'success' | 'info' | 'warn' | 'danger' | undefined {
     if (this.severity === 'primary') return undefined;
+    if (this.severity === 'warning') return 'warn';
     return this.severity;
   }
 }

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

@@ -15,8 +15,8 @@ export const progressspinnerCss = ({ dt }: { dt: (token: string) => string }): s
   height: ${dt('progressspinner.extend.small')};
 }
 
-.p-progressspinner.p-progressspinner-medium,
-.p-progressspinner.p-progressspinner-medium .p-progressspinner-circle {
+.p-progressspinner.p-progressspinner-base,
+.p-progressspinner.p-progressspinner-base .p-progressspinner-circle {
   width: ${dt('progressspinner.extend.medium')};
   height: ${dt('progressspinner.extend.medium')};
 }

src/stories/components/avatar/avatar.stories.ts

@@ -54,12 +54,12 @@ import { ExtraAvatarComponent, ExtraAvatarGroupComponent } from '@cdek-it/angula
     },
     size: {
       control: 'select',
-      options: ['normal', 'large', 'xlarge'],
+      options: ['base', 'large', 'xlarge'],
       description: 'Размер аватара',
       table: {
         category: 'Props',
-        defaultValue: { summary: 'normal' },
-        type: { summary: "'normal' | 'large' | 'xlarge'" }
+        defaultValue: { summary: 'base' },
+        type: { summary: "'base' | 'large' | 'xlarge'" }
       }
     },
     shape: {
@@ -98,7 +98,7 @@ export const Default: Story = {
     if (args.label) parts.push(`label="${args.label}"`);
     if (args.icon) parts.push(`icon="${args.icon}"`);
     if (args.image) parts.push(`image="${args.image}"`);
-    if (args.size && args.size !== 'normal') parts.push(`size="${args.size}"`);
+    if (args.size && args.size !== 'base') parts.push(`size="${args.size}"`);
     if (args.shape && args.shape !== 'square') parts.push(`shape="${args.shape}"`);
 
     const template = parts.length
@@ -109,7 +109,7 @@ export const Default: Story = {
   },
   args: {
     label: 'A',
-    size: 'normal',
+    size: 'base',
     shape: 'square'
   },
   parameters: {
@@ -125,7 +125,7 @@ export const Default: Story = {
 
 export const Label: Story = {
   render: (args) => ({ props: args, template: commonTemplate }),
-  args: { label: 'A', size: 'normal', shape: 'square' },
+  args: { label: 'A', size: 'base', shape: 'square' },
   parameters: {
     docs: {
       description: { story: 'Аватар с текстовой меткой.' },
@@ -140,7 +140,7 @@ export const Label: Story = {
 
 export const Icon: Story = {
   render: (args) => ({ props: args, template: commonTemplate }),
-  args: { icon: 'ti ti-user', size: 'normal', shape: 'square' },
+  args: { icon: 'ti ti-user', size: 'base', shape: 'square' },
   parameters: {
     docs: {
       description: { story: 'Аватар с иконкой.' },
@@ -155,7 +155,7 @@ export const Icon: Story = {
 
 export const Image: Story = {
   render: (args) => ({ props: args, template: commonTemplate }),
-  args: { image: '/assets/images/avatar/avatar.png', size: 'normal', shape: 'square' },
+  args: { image: '/assets/images/avatar/avatar.png', size: 'base', shape: 'square' },
   parameters: {
     docs: {
       description: {
@@ -175,7 +175,7 @@ export const Sizes: Story = {
   args: { label: 'L', size: 'large', shape: 'square' },
   parameters: {
     docs: {
-      description: { story: 'Размер аватара. Доступны: normal, large, xlarge.' },
+      description: { story: 'Размер аватара. Доступны: base, large, xlarge.' },
       source: {
         code: `<extra-avatar label="L" size="large"></extra-avatar>`
       }
@@ -187,7 +187,7 @@ export const Sizes: Story = {
 
 export const Shapes: Story = {
   render: (args) => ({ props: args, template: commonTemplate }),
-  args: { label: 'C', size: 'normal', shape: 'circle' },
+  args: { label: 'C', size: 'base', shape: 'circle' },
   parameters: {
     docs: {
       description: { story: 'Форма аватара. circle — круглый, square — квадратный (по умолчанию).' },

src/stories/components/avatar/examples/avatar-sizes.component.ts

@@ -30,7 +30,7 @@ export const Sizes: StoryObj = {
   parameters: {
     docs: {
       description: {
-        story: 'Все доступные размеры аватара: normal, large, xlarge.'
+        story: 'Все доступные размеры аватара: base, large, xlarge.'
       },
       source: {
         language: 'ts',

src/stories/components/button/button.stories.ts

@@ -70,12 +70,12 @@ import { ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
     },
     variant: {
       control: 'select',
-      options: ['primary', 'secondary', 'outlined', 'text', 'link'],
+      options: ['primary', 'secondary', 'tertiary', 'text', 'link'],
       description: 'Вариант отображения кнопки',
       table: {
         category: 'Props',
         defaultValue: { summary: 'primary' },
-        type: { summary: "'primary' | 'secondary' | 'outlined' | 'text' | 'link'" }
+        type: { summary: "'primary' | 'secondary' | 'tertiary' | 'text' | 'link'" }
       }
     },
     size: {
@@ -97,7 +97,7 @@ import { ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
         type: { summary: 'string' }
       }
     },
-    iconPos: {
+    iconPosition: {
       control: 'select',
       options: [null, 'prefix', 'postfix'],
       description: 'Позиция иконки относительно текста',
@@ -244,7 +244,7 @@ const commonTemplate = `
   [severity]="severity"
   [size]="size"
   [rounded]="rounded"
-  [iconPos]="iconPos"
+  [iconPosition]="iconPosition"
   [iconOnly]="iconOnly"
   [icon]="icon"
   [disabled]="disabled"
@@ -275,7 +275,7 @@ export const Default: Story = {
     if (args.variant != null) parts.push(`variant="${args.variant}"`);
     if (args.size != null) parts.push(`size="${args.size}"`);
     if (args.icon != null && (args.icon as string) !== '') parts.push(`icon="${args.icon}"`);
-    if (args.iconPos != null) parts.push(`iconPos="${args.iconPos}"`);
+    if (args.iconPosition != null) parts.push(`iconPosition="${args.iconPosition}"`);
     if (args.rounded) parts.push(`[rounded]="true"`);
     if (args.disabled) parts.push(`[disabled]="true"`);
     if (args.loading) parts.push(`[loading]="true"`);

src/stories/components/button/examples/button-extra.component.ts

@@ -12,7 +12,7 @@ export const Extra: StoryObj = {
   [severity]="severity"
   [size]="size"
   [rounded]="rounded"
-  [iconPos]="iconPos"
+  [iconPosition]="iconPosition"
   [iconOnly]="iconOnly"
   [icon]="icon"
   [disabled]="disabled"
@@ -38,7 +38,7 @@ export const Extra: StoryObj = {
     label: { control: 'text' },
     variant: {
       control: 'select',
-      options: ['primary', 'secondary', 'outlined', 'text', 'link']
+      options: ['primary', 'secondary', 'tertiary', 'text', 'link']
     },
     severity: {
       control: 'select',
@@ -49,7 +49,7 @@ export const Extra: StoryObj = {
       options: ['small', 'base', 'large', 'xlarge']
     },
     rounded: { control: 'boolean' },
-    iconPos: {
+    iconPosition: {
       control: 'select',
       options: [null, 'prefix', 'postfix']
     },

src/stories/components/confirm-dialog/confirm-dialog.stories.ts

@@ -63,12 +63,12 @@ import { ExtraConfirmDialogComponent, ExtraConfirmDialogService, provideExtraCon
     },
     severity: {
       control: 'select',
-      options: ['default', 'success', 'info', 'warn', 'help', 'danger'],
+      options: ['default', 'success', 'info', 'warning', 'help', 'danger'],
       description: 'Цветовая схема иконки в заголовке',
       table: {
         category: 'Props',
         defaultValue: { summary: 'default' },
-        type: { summary: "'default' | 'success' | 'info' | 'warn' | 'help' | 'danger'" }
+        type: { summary: "'default' | 'success' | 'info' | 'warning' | 'help' | 'danger'" }
       }
     }
   }