multiselect: стилизация

src/lib/components/multiselect/multiselect.component.ts

@@ -0,0 +1,177 @@
+import { Component, EventEmitter, forwardRef, inject, Injector, Input, OnInit, Output, TemplateRef } from '@angular/core';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { ControlValueAccessor, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { MultiSelect } from 'primeng/multiselect';
+import { PrimeTemplate } from 'primeng/api';
+
+export type MultiSelectSize = 'small' | 'base' | 'large' | 'xlarge';
+export type MultiSelectDisplay = 'comma' | 'chip';
+
+@Component({
+  selector: 'multiselect-field',
+  standalone: true,
+  imports: [MultiSelect, NgClass, NgTemplateOutlet, PrimeTemplate, FormsModule],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MultiSelectComponent),
+      multi: true,
+    },
+  ],
+  template: `
+    <p-multiselect
+      [ngClass]="multiSelectClasses"
+      [ngModel]="modelValue"
+      [disabled]="disabled"
+      [options]="options"
+      [optionLabel]="optionLabel"
+      [optionValue]="optionValue"
+      [optionGroupLabel]="optionGroupLabel"
+      [optionGroupChildren]="optionGroupChildren"
+      [group]="group"
+      [placeholder]="placeholder"
+      [filter]="filter"
+      [showClear]="showClear"
+      [display]="display"
+      [readonly]="readonly"
+      [loading]="loading"
+      [inputId]="inputId"
+      [appendTo]="appendTo"
+      [maxSelectedLabels]="maxSelectedLabels"
+      [selectedItemsLabel]="selectedItemsLabel"
+      [emptyMessage]="emptyMessage"
+      [emptyFilterMessage]="emptyFilterMessage"
+      [size]="primeSize"
+      [pt]="filterPt"
+      (onChange)="onMultiSelectChange($event)"
+      (onClear)="onClear.emit($event)"
+      (onFilter)="onFilter.emit($event)"
+      (onShow)="onShow.emit($event)"
+      (onHide)="onHide.emit($event)"
+      (onFocus)="onFocus.emit($event)"
+      (onBlur)="handleBlur($event)"
+    >
+      @if (optionTemplate) {
+        <ng-template pTemplate="item" let-option>
+          <ng-container [ngTemplateOutlet]="optionTemplate" [ngTemplateOutletContext]="{ $implicit: option }"></ng-container>
+        </ng-template>
+      }
+      @if (selectedItemsTemplate) {
+        <ng-template pTemplate="selecteditems" let-options>
+          <ng-container [ngTemplateOutlet]="selectedItemsTemplate" [ngTemplateOutletContext]="{ $implicit: options }"></ng-container>
+        </ng-template>
+      }
+      @if (optionGroupTemplate) {
+        <ng-template pTemplate="group" let-group>
+          <ng-container [ngTemplateOutlet]="optionGroupTemplate" [ngTemplateOutletContext]="{ $implicit: group }"></ng-container>
+        </ng-template>
+      }
+      @if (headerTemplate) {
+        <ng-template pTemplate="header">
+          <ng-container [ngTemplateOutlet]="headerTemplate"></ng-container>
+        </ng-template>
+      }
+      @if (footerTemplate) {
+        <ng-template pTemplate="footer">
+          <ng-container [ngTemplateOutlet]="footerTemplate"></ng-container>
+        </ng-template>
+      }
+    </p-multiselect>
+  `,
+})
+export class MultiSelectComponent implements ControlValueAccessor, OnInit {
+  private readonly _injector = inject(Injector);
+  private _ngControl: NgControl | null = null;
+
+  ngOnInit(): void {
+    this._ngControl = this._injector.get(NgControl, null, { self: true, optional: true });
+  }
+
+  @Input() options: any[] | null | undefined;
+  @Input() optionLabel: string | undefined;
+  @Input() optionValue: string | undefined;
+  @Input() optionGroupLabel: string | undefined;
+  @Input() optionGroupChildren = 'items';
+  @Input() group = false;
+  @Input() placeholder = '';
+  @Input() size: MultiSelectSize = 'base';
+  @Input() display: MultiSelectDisplay = 'comma';
+  @Input() filter = false;
+  @Input() showClear = false;
+  @Input() readonly = false;
+  @Input() loading = false;
+  @Input() inputId: string | undefined;
+  @Input() appendTo: any = 'body';
+  @Input() maxSelectedLabels = 3;
+  @Input() selectedItemsLabel = 'Выбрано {0}';
+  @Input() emptyMessage = 'Нет данных';
+  @Input() emptyFilterMessage = 'Результаты не найдены';
+  @Input() optionTemplate: TemplateRef<any> | null = null;
+  @Input() selectedItemsTemplate: TemplateRef<any> | null = null;
+  @Input() optionGroupTemplate: TemplateRef<any> | null = null;
+  @Input() headerTemplate: TemplateRef<any> | null = null;
+  @Input() footerTemplate: TemplateRef<any> | null = null;
+
+  disabled = false;
+  modelValue: any[] = [];
+
+  @Output() onClear = new EventEmitter<Event>();
+  @Output() onFilter = new EventEmitter<any>();
+  @Output() onShow = new EventEmitter<Event>();
+  @Output() onHide = new EventEmitter<Event>();
+  @Output() onFocus = new EventEmitter<Event>();
+  @Output() onBlur = new EventEmitter<Event>();
+
+  readonly filterPt = {
+    pcFilterContainer: { root: { class: 'p-iconfield p-multiselect-filter-container' } },
+    pcFilter: { root: { class: 'p-inputtext-sm' } },
+    pcFilterIconContainer: { root: { class: 'p-inputicon' } },
+  };
+
+  get invalid(): boolean {
+    return !!(this._ngControl?.invalid && this._ngControl?.touched);
+  }
+
+  get primeSize(): 'small' | 'large' | undefined {
+    if (this.size === 'small') return 'small';
+    if (this.size === 'large') return 'large';
+    return undefined;
+  }
+
+  get multiSelectClasses(): Record<string, boolean> {
+    return {
+      'p-multiselect-xlg': this.size === 'xlarge',
+      'p-invalid': this.invalid,
+    };
+  }
+
+  private _onChange: (value: any[]) => void = () => {};
+  private _onTouched: () => void = () => {};
+
+  onMultiSelectChange(event: { value: any[] }): void {
+    this.modelValue = event.value;
+    this._onChange(event.value);
+  }
+
+  handleBlur(event: Event): void {
+    this._onTouched();
+    this.onBlur.emit(event);
+  }
+
+  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/prime-preset/map-tokens.ts

@@ -12,6 +12,7 @@ import { tagCss } from './tokens/components/tag';
 import { tooltipCss } from './tokens/components/tooltip';
 import { megamenuCss } from './tokens/components/megamenu';
 import { selectCss } from './tokens/components/select';
+import { multiselectCss } from './tokens/components/multiselect';
 
 const presetTokens: Preset<AuraBaseDesignTokens> = {
   primitive: tokens.primitive as unknown as AuraBaseDesignTokens['primitive'],
@@ -54,6 +55,10 @@ const presetTokens: Preset<AuraBaseDesignTokens> = {
       ...(tokens.components.select as unknown as ComponentsDesignTokens['select']),
       css: selectCss,
     },
+    multiselect: {
+      ...(tokens.components.multiselect as unknown as ComponentsDesignTokens['multiselect']),
+      css: multiselectCss,
+    },
   } as ComponentsDesignTokens,
 };
 

src/prime-preset/tokens/components/multiselect.ts

@@ -0,0 +1,66 @@
+export const multiselectCss = ({ dt }: { dt: (token: string) => string }): string => `
+  /* ─── Базовые стили ─── */
+  .p-multiselect.p-component {
+    width: 100%;
+    border-width: ${dt('multiselect.extend.borderWidth')};
+    line-height: ${dt('fonts.lineHeight.250')};
+  }
+
+  /* ─── Focus ─── */
+  .p-multiselect.p-component:not(.p-disabled).p-focus {
+    box-shadow: 0 0 0 ${dt('multiselect.root.focusRing.width')} ${dt('form.focusRing.color')};
+  }
+
+  /* ─── Invalid + Focus ─── */
+  .p-multiselect.p-component.p-invalid.p-focus {
+    border-color: ${dt('form.invalidBorderColor')};
+    box-shadow: 0 0 0 ${dt('multiselect.root.focusRing.width')} ${dt('focusRing.extend.invalid')};
+  }
+
+  /* ─── Readonly ─── */
+  .p-multiselect.p-component[readonly] {
+    background: ${dt('multiselect.extend.readonlyBackground')};
+    border-color: ${dt('form.borderColor')};
+    cursor: default;
+    pointer-events: none;
+  }
+
+  /* ─── XLarge ─── */
+  .p-multiselect.p-component.p-multiselect-xlg .p-multiselect-label {
+    font-size: ${dt('inputtext.extend.extXlg.fontSize')};
+    padding-block: ${dt('inputtext.extend.extXlg.paddingY')};
+    padding-inline: ${dt('inputtext.extend.extXlg.paddingX')};
+  }
+
+  /* ─── Chips: базовые отступы ─── */
+  .p-multiselect.p-component.p-multiselect-display-chip .p-multiselect-label:has(.p-chip) {
+    padding-block: calc(${dt('multiselect.root.paddingY')} - 7px);
+    padding-inline: calc(${dt('multiselect.root.paddingX')} - 7px);
+  }
+
+  .p-multiselect.p-component.p-multiselect-sm.p-multiselect-display-chip .p-multiselect-label:has(.p-chip) {
+    padding-block: calc(${dt('multiselect.root.sm.paddingY')} - 7px);
+    padding-inline: calc(${dt('multiselect.root.sm.paddingX')} - 7px);
+  }
+
+  .p-multiselect.p-component.p-multiselect-lg.p-multiselect-display-chip .p-multiselect-label:has(.p-chip) {
+    padding-block: calc(${dt('multiselect.root.lg.paddingY')} - 7px);
+    padding-inline: calc(${dt('multiselect.root.lg.paddingX')} - 7px);
+  }
+
+  .p-multiselect.p-component.p-multiselect-xlg.p-multiselect-display-chip .p-multiselect-label:has(.p-chip) {
+    padding-block: calc(${dt('inputtext.extend.extXlg.paddingY')} - 7px);
+    padding-inline: calc(${dt('inputtext.extend.extXlg.paddingX')} - 7px);
+  }
+
+  /* ─── Chip: отступ при наличии иконки удаления ─── */
+  .p-multiselect .p-chip:has(.p-chip-remove-icon) {
+    padding-inline-end: ${dt('chip.root.paddingX')};
+  }
+
+  /* ─── FloatLabel variant="in" ─── */
+  .p-floatlabel-in .p-multiselect.p-component .p-multiselect-label {
+    padding-block-start: ${dt('floatlabel.in.input.paddingTop')};
+    padding-block-end: ${dt('floatlabel.in.input.paddingBottom')};
+  }
+`;

src/prime-preset/tokens/tokens.json

@@ -570,8 +570,6 @@
         "paddingY": "{spacing.3x}"
       },
       "fontSize": "{fonts.fontSize.300}",
-      "paddingX": "{spacing.4x}",
-      "paddingY": "{spacing.4x}",
       "lg": {
         "width": "{sizing.76x}",
         "fontSize": "{fonts.fontSize.300}",
@@ -3811,8 +3809,8 @@
       },
       "root": {
         "shadow": "0",
-        "paddingX": "{form.paddingX}",
-        "paddingY": "{form.paddingY}",
+        "paddingX": "{form.padding.300}",
+        "paddingY": "{form.padding.300}",
         "borderRadius": "{form.borderRadius.200}",
         "transitionDuration": "{form.transitionDuration}",
         "sm": {
@@ -4729,8 +4727,8 @@
         "placeholderColor": "{form.placeholderColor}",
         "invalidPlaceholderColor": "{form.invalidPlaceholderColor}",
         "shadow": "0",
-        "paddingX": "{form.paddingX}",
-        "paddingY": "{form.paddingY}",
+        "paddingX": "{form.padding.300}",
+        "paddingY": "{form.padding.300}",
         "borderRadius": "{form.borderRadius.200}",
         "transitionDuration": "{form.transitionDuration}",
         "focusRing": {

src/stories/components/multiselect/examples/multiselect-chips.component.ts

@@ -0,0 +1,90 @@
+import { Component, Input } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MultiSelectComponent, MultiSelectSize } from '../../../../lib/components/multiselect/multiselect.component';
+
+const OPTIONS = [
+  { name: 'Новосибирск', code: 'NSK' },
+  { name: 'Москва', code: 'MSK' },
+  { name: 'Санкт-Петербург', code: 'SPB' },
+  { name: 'Екатеринбург', code: 'EKB' },
+  { name: 'Казань', code: 'KZN' },
+];
+
+const template = `
+<multiselect-field
+  [formControl]="control"
+  [options]="options"
+  optionLabel="name"
+  placeholder="Выберите города..."
+  display="chip"
+  [showClear]="showClear"
+  [size]="size"
+  [filter]="filter"
+></multiselect-field>
+`;
+const styles = '';
+
+@Component({
+  selector: 'app-multiselect-chips',
+  standalone: true,
+  imports: [MultiSelectComponent, ReactiveFormsModule],
+  template,
+  styles,
+})
+export class MultiSelectChipsComponent {
+  @Input() size: MultiSelectSize = 'base';
+  @Input() showClear = false;
+  @Input() filter = true;
+  control = new FormControl(null);
+  options = OPTIONS;
+}
+
+export const Chips = {
+  name: 'Chips',
+  render: (args: any) => ({
+    props: { size: args['size'], showClear: args['showClear'], filter: args['filter'] },
+    template: `<app-multiselect-chips [size]="size" [showClear]="showClear" [filter]="filter"></app-multiselect-chips>`,
+  }),
+  argTypes: {
+    display: { table: { disable: true } },
+    readonly: { table: { disable: true } },
+    disabled: { table: { disable: true } },
+    invalid: { table: { disable: true } },
+  },
+  parameters: {
+    docs: {
+      description: { story: 'Выбранные значения отображаются в виде чипов (`display="chip"`).' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MultiSelectComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  standalone: true,
+  imports: [MultiSelectComponent, ReactiveFormsModule],
+  template: \`
+    <multiselect-field
+      [formControl]="control"
+      [options]="options"
+      optionLabel="name"
+      placeholder="Выберите города..."
+      display="chip"
+      [showClear]="true"
+    ></multiselect-field>
+  \`,
+})
+export class MultiSelectChipsExample {
+  control = new FormControl(null);
+  options = [
+    { name: 'Новосибирск', code: 'NSK' },
+    { name: 'Москва', code: 'MSK' },
+    { name: 'Санкт-Петербург', code: 'SPB' },
+  ];
+}
+        `,
+      },
+    },
+  },
+};