Feature/styles debug

.gitignore

@@ -52,6 +52,6 @@ api-generator/typedoc.json
 # файлы в этим папках компилятся и должны создаваться при сборке
 src/assets/components/themes
 
-./storybook-static
-./debug-storybook.log
-./documentation.json
+/storybook-static
+/debug-storybook.log
+/documentation.json

angular.json

@@ -117,5 +117,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

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

@@ -0,0 +1,51 @@
+import { Component, HostBinding, Input } from '@angular/core';
+import { Avatar } from 'primeng/avatar';
+import { AvatarGroup } from 'primeng/avatargroup';
+
+export type AvatarSize = 'normal' | 'large' | 'xlarge';
+export type AvatarShape = 'square' | 'circle';
+
+@Component({
+  selector: 'avatar',
+  standalone: true,
+  imports: [Avatar],
+  template: `
+    <p-avatar
+      [label]="label || undefined"
+      [icon]="icon || undefined"
+      [image]="image || undefined"
+      [size]="primeSize"
+      [shape]="shape"
+    ></p-avatar>
+  `,
+})
+export class AvatarComponent {
+  @Input() label = '';
+  @Input() icon = '';
+  @Input() image = '';
+  @Input() size: AvatarSize = 'normal';
+  @Input() shape: AvatarShape = 'square';
+
+  @HostBinding('class') get hostClass(): string {
+    const classes = ['ui-avatar'];
+    if (this.size === 'large') classes.push('ui-avatar-lg');
+    if (this.size === 'xlarge') classes.push('ui-avatar-xl');
+    return classes.join(' ');
+  }
+
+  get primeSize(): 'normal' | 'large' | 'xlarge' | undefined {
+    return this.size === 'normal' ? undefined : this.size;
+  }
+}
+
+@Component({
+  selector: 'avatar-group',
+  standalone: true,
+  imports: [AvatarGroup],
+  template: `
+    <p-avatar-group>
+      <ng-content></ng-content>
+    </p-avatar-group>
+  `,
+})
+export class AvatarGroupComponent { }

src/lib/components/badge/badge.component.ts

@@ -0,0 +1,37 @@
+import { Component, Input } from '@angular/core';
+import { Badge } from 'primeng/badge';
+
+export type BadgeSeverity = 'primary' | 'success' | 'info' | 'warning' | 'danger';
+export type BadgeSize = 'base' | 'large' | 'xlarge';
+
+type PrimeBadgeSeverity = ReturnType<Badge['severity']>;
+type PrimeBadgeSize = ReturnType<Badge['size']>;
+
+@Component({
+  selector: 'badge',
+  standalone: true,
+  imports: [Badge],
+  template: `
+    <p-badge
+      [value]="value"
+      [severity]="primeSeverity"
+      [size]="primeSize"
+    ></p-badge>
+  `
+})
+export class BadgeComponent {
+  @Input() value: string | number = '';
+  @Input() severity: BadgeSeverity = 'primary';
+  @Input() size: BadgeSize = 'base';
+
+  get primeSeverity(): PrimeBadgeSeverity {
+    if (this.severity === 'primary') return null;
+    if (this.severity === 'warning') return 'warn';
+    return this.severity as Exclude<PrimeBadgeSeverity, null>;
+  }
+
+  get primeSize(): PrimeBadgeSize {
+    if (this.size === 'base') return null;
+    return this.size as PrimeBadgeSize;
+  }
+}

src/lib/components/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { Breadcrumb } from 'primeng/breadcrumb';
+import { MenuItem } from 'primeng/api';
+
+@Component({
+  selector: 'breadcrumb',
+  standalone: true,
+  imports: [Breadcrumb],
+  template: `
+    <p-breadcrumb
+      [model]="model"
+      [home]="home"
+    ></p-breadcrumb>
+  `,
+})
+export class BreadcrumbComponent {
+  @Input() model: MenuItem[] = [];
+  @Input() home: MenuItem | undefined = undefined;
+}

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

@@ -0,0 +1,78 @@
+import { Component, Input } from '@angular/core';
+import { Button, ButtonSeverity as PrimeButtonSeverity } from 'primeng/button';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outlined' | 'text' | 'link';
+export type ButtonSeverity = 'success' | 'warning' | 'danger' | 'info' | null;
+export type ButtonSize = 'small' | 'base' | 'large' | 'xlarge';
+export type ButtonIconPos = 'prefix' | 'postfix' | null;
+export type BadgeSeverity = 'success' | 'info' | 'warning' | 'danger' | 'secondary' | 'contrast' | null;
+type PrimeBadgeSeverity = Extract<Button['badgeSeverity'], string | null>;
+
+@Component({
+  selector: 'button',
+  standalone: true,
+  imports: [Button],
+  template: `
+    <p-button
+      [label]="iconOnly ? '' : label"
+      [disabled]="disabled"
+      [loading]="loading"
+      [size]="primeSize"
+      [styleClass]="size === 'xlarge' ? 'p-button-xlg' : ''"
+      [rounded]="rounded"
+      [outlined]="variant === 'outlined'"
+      [text]="variant === 'text' || text"
+      [link]="variant === 'link'"
+      [icon]="icon"
+      [iconPos]="primeIconPos"
+      [severity]="primeSeverity"
+      [badge]="showBadge ? badge || ' ' : undefined"
+      [badgeSeverity]="primeBadgeSeverity"
+      [fluid]="fluid"
+      [ariaLabel]="ariaLabel"
+      [autofocus]="autofocus"
+      [tabindex]="tabindex"
+    ></p-button>
+  `
+})
+export class ButtonComponent {
+  @Input() label = 'Button';
+  @Input() variant: ButtonVariant = 'primary';
+  @Input() severity: ButtonSeverity = null;
+  @Input() size: ButtonSize = 'base';
+  @Input() rounded = false;
+  @Input() iconPos: ButtonIconPos = null;
+  @Input() iconOnly = false;
+  @Input() icon = '';
+  @Input() disabled = false;
+  @Input() loading = false;
+  @Input() badge = '';
+  @Input() badgeSeverity: BadgeSeverity = null;
+  @Input() showBadge = false;
+  @Input() fluid = false;
+  @Input() ariaLabel: string | undefined = undefined;
+  @Input() autofocus = false;
+  @Input() tabindex: number | undefined = undefined;
+  @Input() text = false;
+
+  get primeSize(): 'small' | 'large' | undefined {
+    if (this.size === 'small') return 'small';
+    if (this.size === 'large') return 'large';
+    return undefined;
+  }
+
+  get primeIconPos(): 'left' | 'right' {
+    return this.iconPos === 'postfix' ? 'right' : 'left';
+  }
+
+  get primeSeverity(): PrimeButtonSeverity | null {
+    if (this.variant === 'secondary') return 'secondary';
+    if (this.severity === 'warning') return 'warn';
+    return this.severity;
+  }
+
+  get primeBadgeSeverity(): PrimeBadgeSeverity {
+    if (this.badgeSeverity === 'warning') return 'warn';
+    return this.badgeSeverity;
+  }
+}

src/lib/components/checkbox/checkbox.component.ts

@@ -0,0 +1,106 @@
+import { Component, Input, Output, EventEmitter, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Checkbox, CheckboxChangeEvent } from 'primeng/checkbox';
+
+export type CheckboxSize = 'small' | 'base' | 'large';
+export type CheckboxVariant = 'outlined' | 'filled';
+
+@Component({
+  selector: 'checkbox',
+  standalone: true,
+  imports: [Checkbox],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CheckboxComponent),
+      multi: true,
+    },
+  ],
+  template: `
+    <p-checkbox
+      [value]="value"
+      [binary]="binary"
+      [(ngModel)]="modelValue"
+      [disabled]="disabled"
+      [readonly]="readonly"
+      [indeterminate]="indeterminate"
+      [styleClass]="indeterminate ? 'p-checkbox-indeterminate' : ''"
+      [invalid]="invalid"
+      [size]="primeSize"
+      [variant]="primeVariant"
+      [checkboxIcon]="checkboxIcon"
+      [ariaLabel]="ariaLabel"
+      [ariaLabelledBy]="ariaLabelledBy"
+      [tabindex]="tabindex"
+      [inputId]="inputId"
+      [trueValue]="trueValue"
+      [falseValue]="falseValue"
+      [autofocus]="autofocus"
+      (onChange)="onChangeHandler($event)"
+      (onFocus)="onFocus.emit($event)"
+      (onBlur)="onBlur.emit($event)"
+    ></p-checkbox>
+  `,
+})
+export class CheckboxComponent implements ControlValueAccessor {
+  @Input() value: any = null;
+  @Input() binary = false;
+  @Input() disabled = false;
+  @Input() readonly = false;
+  @Input() indeterminate = false;
+  @Input() invalid = false;
+  @Input() size: CheckboxSize = 'base';
+  @Input() variant: CheckboxVariant = 'outlined';
+  @Input() checkboxIcon: string | undefined = undefined;
+  @Input() ariaLabel: string | undefined = undefined;
+  @Input() ariaLabelledBy: string | undefined = undefined;
+  @Input() tabindex: number | undefined = undefined;
+  @Input() inputId: string | undefined = undefined;
+  @Input() trueValue: any = true;
+  @Input() falseValue: any = false;
+  @Input() autofocus = false;
+
+  @Output() onChange = new EventEmitter<CheckboxChangeEvent>();
+  @Output() onFocus = new EventEmitter<Event>();
+  @Output() onBlur = new EventEmitter<Event>();
+
+  modelValue: any = false;
+
+  private _onChange: (value: any) => void = () => {};
+  private _onTouched: () => void = () => {};
+
+  // Геттеры — маппинг в PrimeNG API
+  get primeSize(): 'small' | 'large' | undefined {
+    if (this.size === 'small') return 'small';
+    if (this.size === 'large') return 'large';
+    return undefined;
+  }
+
+  get primeVariant(): 'filled' | 'outlined' | undefined {
+    if (this.variant === 'filled') return 'filled';
+    return undefined;
+  }
+
+  onChangeHandler(event: CheckboxChangeEvent): void {
+    this._onChange(event.checked);
+    this._onTouched();
+    this.onChange.emit(event);
+  }
+
+  // ControlValueAccessor
+  writeValue(value: any): void {
+    this.modelValue = value;
+  }
+
+  registerOnChange(fn: (value: any) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this._onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+}

src/lib/components/chip/chip.component.ts

@@ -0,0 +1,24 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Chip } from 'primeng/chip';
+
+@Component({
+  selector: 'chip',
+  standalone: true,
+  imports: [Chip],
+  template: `
+    <p-chip
+      [label]="label"
+      [icon]="icon"
+      [removable]="removable"
+      [disabled]="disabled"
+      (onRemove)="onRemove.emit($event)"
+    ></p-chip>
+  `,
+})
+export class ChipComponent {
+  @Input() label = '';
+  @Input() icon = '';
+  @Input() removable = false;
+  @Input() disabled = false;
+  @Output() onRemove = new EventEmitter<MouseEvent>();
+}

src/lib/components/divider/divider.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input } from '@angular/core';
+import { Divider } from 'primeng/divider';
+
+export type DividerLayout = 'horizontal' | 'vertical';
+export type DividerType = 'solid' | 'dashed' | 'dotted';
+export type DividerAlign = 'left' | 'center' | 'right' | 'top' | 'bottom';
+
+@Component({
+  selector: 'divider',
+  standalone: true,
+  imports: [Divider],
+  template: `
+    <p-divider
+      [layout]="layout"
+      [type]="type"
+      [align]="align"
+    >
+      <ng-content></ng-content>
+    </p-divider>
+  `,
+})
+export class DividerComponent {
+  @Input() layout: DividerLayout = 'horizontal';
+  @Input() type: DividerType = 'solid';
+  @Input() align: DividerAlign = 'center';
+}