API.listbox

docs/components-api/listbox.md

@@ -2,22 +2,24 @@
 
 # ExtraListbox
 
-| Свойство            | Описание                                          | Типизация                                                      |
-| ------------------- | ------------------------------------------------- | -------------------------------------------------------------- |
-| `options`           | список элементов или список групп с элементами     | `ExtraListboxGroup[] \| ExtraListboxOption[] \| any[]`         |
-| `optionLabel`       | наименование поля, содержащего отображаемое значение | `string`                                                     |
-| `multiple`          | множественный выбор (элементы с чекбоксами)        | `boolean`                                                      |
-| `showFilter`        | отображать поле поиска элементов                   | `boolean`                                                      |
-| `filterPlaceholder` | текст подсказки в поле поиска                      | `string`                                                       |
-| `showCheckbox`      | отображать чекбоксы у элементов и «выбрать всё»    | `boolean`                                                      |
-| `emptyMessage`      | сообщение при отсутствии элементов                 | `string`                                                       |
+> ✅ **Реализован**: `ExtraListboxComponent` (`@cdek-it/angular-ui-kit`) соответствует спецификации.
+
+| Свойство            | Описание                                             | Типизация                                              |
+| ------------------- | ---------------------------------------------------- | ------------------------------------------------------ |
+| `options`           | список элементов или список групп с элементами       | `ExtraListboxGroup[] \| ExtraListboxOption[] \| any[]` |
+| `optionLabel`       | наименование поля, содержащего отображаемое значение | `string`                                               |
+| `multiple`          | множественный выбор (элементы с чекбоксами)          | `boolean`                                              |
+| `showFilter`        | отображать поле поиска элементов                     | `boolean`                                              |
+| `filterPlaceholder` | текст подсказки в поле поиска                        | `string`                                               |
+| `showCheckbox`      | отображать чекбоксы у элементов и «выбрать всё»      | `boolean`                                              |
+| `emptyMessage`      | сообщение при отсутствии элементов                   | `string`                                               |
 
 # События
 
-| Событие           | Описание                                  | Типизация                                       |
-| ----------------- | ----------------------------------------- | ----------------------------------------------- |
-| `change`        | срабатывает при изменении выбора          | `(event: ExtraListboxChangeEvent) => void`      |
-| `filter`        | срабатывает при фильтрации                | `(event: ExtraListboxFilterEvent) => void`      |
+| Событие     | Описание                                   | Типизация                                           |
+| ----------- | ------------------------------------------ | --------------------------------------------------- |
+| `change`    | срабатывает при изменении выбора           | `(event: ExtraListboxChangeEvent) => void`          |
+| `filter`    | срабатывает при фильтрации                 | `(event: ExtraListboxFilterEvent) => void`          |
 | `selectAll` | срабатывает при переключении «выбрать всё» | `(event: ExtraListboxSelectAllChangeEvent) => void` |
 
 # ExtraListboxChangeEvent
@@ -29,28 +31,28 @@
 
 # ExtraListboxFilterEvent
 
-| Свойство        | Описание                | Типизация |
-| --------------- | ----------------------- | --------- |
-| `filter`        | введённый текст поиска  | `string`  |
-| `originalEvent` | исходное событие        | `Event`   |
+| Свойство        | Описание               | Типизация |
+| --------------- | ---------------------- | --------- |
+| `filter`        | введённый текст поиска | `string`  |
+| `originalEvent` | исходное событие       | `Event`   |
 
 # ExtraListboxSelectAllChangeEvent
 
-| Свойство        | Описание        | Типизация |
-| --------------- | --------------- | --------- |
-| `checked`       | выбрано ли всё  | `boolean` |
+| Свойство        | Описание         | Типизация |
+| --------------- | ---------------- | --------- |
+| `checked`       | выбрано ли всё   | `boolean` |
 | `originalEvent` | исходное событие | `Event`   |
 
 # ExtraListboxOption
 
-| Свойство | Описание        | Типизация          |
-| -------- | --------------- | ------------------ |
-| `name`   | текст элемента  | `string`           |
-| `code`   | идентификатор   | `string \| number` |
+| Свойство | Описание       | Типизация          |
+| -------- | -------------- | ------------------ |
+| `name`   | текст элемента | `string`           |
+| `code`   | идентификатор  | `string \| number` |
 
 # ExtraListboxGroup
 
-| Свойство  | Описание            | Типизация                            |
-| --------- | ------------------- | ------------------------------------ |
-| `options` | список элементов    | `ExtraListboxOption[] \| any[]`      |
-| `name`    | наименование группы | `string`                             |
+| Свойство  | Описание            | Типизация                       |
+| --------- | ------------------- | ------------------------------- |
+| `options` | список элементов    | `ExtraListboxOption[] \| any[]` |
+| `name`    | наименование группы | `string`                        |

src/lib/components/listbox/listbox.component.ts

@@ -1,20 +1,45 @@
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ContentChild,
   Directive,
   EventEmitter,
   forwardRef,
+  inject,
   Input,
   Output,
   TemplateRef
 } from '@angular/core';
 import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Listbox, ListboxChangeEvent } from 'primeng/listbox';
+import { Listbox } from 'primeng/listbox';
 import { SharedModule } from 'primeng/api';
 import { NgTemplateOutlet } from '@angular/common';
 
-export type ExtraListboxChangeEvent = ListboxChangeEvent;
+export interface ExtraListboxChangeEvent {
+  value: any;
+  originalEvent: Event;
+}
+
+export interface ExtraListboxFilterEvent {
+  filter: string;
+  originalEvent: Event;
+}
+
+export interface ExtraListboxSelectAllChangeEvent {
+  checked: boolean;
+  originalEvent: Event;
+}
+
+export interface ExtraListboxOption {
+  name: string;
+  code: string | number;
+}
+
+export interface ExtraListboxGroup {
+  options: ExtraListboxOption[] | any[];
+  name: string;
+}
 
 @Directive({ selector: '[extraListboxItem]', standalone: true })
 export class ExtraListboxItemDirective {}
@@ -32,8 +57,10 @@ export class ExtraListboxItemDirective {}
       [optionLabel]="optionLabel"
       [optionValue]="optionValue"
       [multiple]="multiple"
-      [filter]="filter"
-      [filterPlaceHolder]="filterPlaceHolder"
+      [filter]="showFilter"
+      [filterPlaceHolder]="filterPlaceholder"
+      [checkbox]="showCheckbox"
+      [showToggleAll]="showCheckbox"
       [checkmark]="checkmark"
       [group]="group"
       [optionGroupLabel]="optionGroupLabel"
@@ -42,6 +69,8 @@ export class ExtraListboxItemDirective {}
       [emptyMessage]="emptyMessage"
       [disabled]="isDisabled"
       (onChange)="onChangeHandler($event)"
+      (onFilter)="onFilter.emit($event)"
+      (onSelectAllChange)="onSelectAll.emit($event)"
       (onFocus)="onFocus.emit($event)"
       (onBlur)="onBlurHandler($event)"
     >
@@ -57,12 +86,16 @@ export class ExtraListboxItemDirective {}
   `
 })
 export class ExtraListboxComponent implements ControlValueAccessor {
-  @Input() options: any[] = [];
+  private readonly _cdr = inject(ChangeDetectorRef);
+
+  @Input() options: ExtraListboxGroup[] | ExtraListboxOption[] | any[] = [];
   @Input() optionLabel = 'label';
   @Input() optionValue: string | undefined = undefined;
   @Input() multiple = false;
-  @Input() filter = false;
-  @Input() filterPlaceHolder: string | undefined = undefined;
+  @Input() showFilter = false;
+  @Input() filterPlaceholder: string | undefined = undefined;
+  @Input() showCheckbox = false;
+  /** Галочка у выбранного пункта (одиночный выбор) — полезный проп сверх спеки. */
   @Input() checkmark = false;
   @Input() group = false;
   @Input() optionGroupLabel: string | undefined = undefined;
@@ -71,6 +104,9 @@ export class ExtraListboxComponent implements ControlValueAccessor {
   @Input() emptyMessage: string | undefined = undefined;
   @ContentChild(ExtraListboxItemDirective, { read: TemplateRef }) itemTemplate: TemplateRef<any> | null = null;
 
+  @Output() onChange = new EventEmitter<ExtraListboxChangeEvent>();
+  @Output() onFilter = new EventEmitter<ExtraListboxFilterEvent>();
+  @Output() onSelectAll = new EventEmitter<ExtraListboxSelectAllChangeEvent>();
   @Output() onFocus = new EventEmitter<FocusEvent>();
   @Output() onBlur = new EventEmitter<FocusEvent>();
 
@@ -85,19 +121,19 @@ export class ExtraListboxComponent implements ControlValueAccessor {
   }
 
   onChangeHandler(event: ExtraListboxChangeEvent): void {
-    // Обновляем внутреннее значение и уведомляем форму об изменении.
     this.modelValue = event.value;
     this._onChange(event.value);
+    this.onChange.emit(event);
   }
 
   onBlurHandler(event: FocusEvent): void {
-    // emit external onBlur and mark control as touched for forms
     this.onBlur.emit(event);
     this._onTouched();
   }
 
   writeValue(value: any): void {
     this.modelValue = value;
+    this._cdr.markForCheck();
   }
 
   registerOnChange(fn: (value: any) => void): void {
@@ -110,5 +146,6 @@ export class ExtraListboxComponent implements ControlValueAccessor {
 
   setDisabledState(isDisabled: boolean): void {
     this._disabled = isDisabled;
+    this._cdr.markForCheck();
   }
 }