crdx-components 1.0.0 → 2.0.0

package/src/lib/components/form-field/select-field.css

@@ -1,178 +0,0 @@
-.lib-select-field__field {
-  display: block;
-}
-
-:host ::ng-deep .lib-select-field__field .mat-mdc-select-arrow,
-:host ::ng-deep .lib-select-field__field .mat-mdc-select-arrow-wrapper {
-  display: none !important;
-}
-
-:host ::ng-deep .mat-mdc-select-trigger {
-  padding-right: 0 !important;
-}
-
-.lib-select-field__field .mat-mdc-select-arrow-wrapper {
-  display: none !important;
-}
-
-.lib-select-field__filter-option {
-  pointer-events: auto;
-  height: auto;
-  padding: 0;
-  line-height: 0;
-}
-
-.lib-select-field__filter-option .mat-pseudo-checkbox {
-  display: none;
-}
-
-.lib-select-field__filter-option .lib-select-field__filter-input {
-  width: 100%;
-  padding: 8px 16px;
-  border: none;
-  outline: none;
-  background: transparent;
-  font-size: 14px;
-  box-sizing: border-box;
-}
-
-
-.lib-select-field__multi-trigger-input {
-  width: 100%;
-  border: none;
-  outline: none;
-  background: transparent;
-  font: inherit;
-  font-size: 14px;
-  color: inherit;
-  box-sizing: border-box;
-  cursor: pointer;
-}
-
-.lib-select-field__multi-trigger-input::placeholder {
-  color: rgba(0, 0, 0, 0.42);
-}
-
-.lib-select-field__option-row {
-  display: inline-flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.lib-select-field__virtual-row {
-  height: 48px;
-}
-
-.lib-select-field__select-all-option {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  padding: 0 16px;
-  box-sizing: border-box;
-  cursor: pointer;
-}
-
-
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel {
-  overflow: hidden !important;
-}
-
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport {
-  width: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--Gris-500, #6a7282) var(--Gris-100, #f3f4f6);
-}
-
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar {
-  width: 10px;
-}
-
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:start:decrement,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:start:decrement,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:end:increment,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:end:increment,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:start:decrement,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:start:decrement,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:end:increment,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:end:increment,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:start:decrement,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:start:decrement,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:end:increment,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:end:increment,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:start:decrement,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:start:decrement,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:end:increment,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:end:increment,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:decrement,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:decrement,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:increment,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:increment,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:decrement,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:decrement,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:increment,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:increment,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:decrement,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:decrement,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:increment,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:increment,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:decrement,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:decrement,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:increment,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:increment,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:start,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:start,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:end,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:end,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:start,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:start,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:end,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:end {
-  display: none !important;
-  width: 0 !important;
-  height: 0 !important;
-  -webkit-appearance: none !important;
-  appearance: none !important;
-}
-
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-track,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-track {
-  background: var(--Gris-100, #f3f4f6);
-  border-radius: var(--Corner-Radius-Full, 6.25rem);
-}
-
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-thumb,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-thumb {
-  background: var(--Gris-500, #6a7282);
-  border-radius: var(--Corner-Radius-Small, 0.5rem);
-  min-height: 3rem;
-}
-
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-thumb:hover,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-thumb:hover {
-  background: color-mix(in srgb, var(--Gris-500, #6a7282) 80%, black);
-}
-
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-thumb:active,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-thumb:active {
-  background: color-mix(in srgb, var(--Gris-500, #6a7282) 65%, black);
-}
-
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport .mat-pseudo-checkbox,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport .mat-pseudo-checkbox,
-:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport .mat-mdc-option .mdc-list-item__start,
-:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport .mat-mdc-option .mdc-list-item__start {
-  display: none !important;
-}

package/src/lib/components/form-field/select-field.html

@@ -1,94 +0,0 @@
-<mat-form-field
-  class="lib-select-field__field"
-  [appearance]="matAppearance()"
-  [style.width]="widthStyle() ?? null"
->
-  @if (label()) {
-  <mat-label>{{ label() }}</mat-label>
-  }
-  <mat-select
-    [value]="displayValue"
-    [multiple]="isMultiple()"
-    [disabled]="disabled() || disabledByControl()"
-    [required]="required()"
-    [placeholder]="placeholder()"
-    panelClass="lib-select-field-panel"
-    (openedChange)="onPanelOpenChange($event)"
-    (selectionChange)="onSelectionChange($event)"
-  >
-    @if (isMultiple()) {
-    <mat-select-trigger
-      >{{ multiTriggerLabel() || placeholder() }}</mat-select-trigger
-    >
-    } @if (filterable()) {
-    <div
-      class="lib-select-field__filter-option"
-      (mousedown)="$event.stopPropagation()"
-    >
-      <input
-        #filterInput
-        class="lib-select-field__filter-input"
-        type="text"
-        [placeholder]="filterPlaceholder()"
-        [value]="filterTerm()"
-        (mousedown)="$event.stopPropagation()"
-        (click)="$event.stopPropagation()"
-        (input)="onFilterInput($event)"
-        (keydown)="onFilterKeydown($event)"
-      />
-    </div>
-    }
-    <cdk-virtual-scroll-viewport
-          class="lib-select-field__viewport app-scrollbar-figma"
-      [itemSize]="48"
-      minBufferPx="240"
-      maxBufferPx="240"
-      [style.height.px]="virtualViewportHeight()"
-    >
-      <div
-        *cdkVirtualFor="let row of virtualRows(); trackBy: trackByVirtualRow"
-        class="lib-select-field__virtual-row"
-      >
-        @if (row.kind === 'selectAll') {
-          <div
-            class="lib-select-field__select-all-option"
-            role="button"
-            tabindex="0"
-            (mousedown)="$event.stopPropagation()"
-            (click)="toggledAllSelection(); $event.stopPropagation()"
-            (keydown.enter)="toggledAllSelection(); $event.preventDefault(); $event.stopPropagation()"
-            (keydown.space)="toggledAllSelection(); $event.preventDefault(); $event.stopPropagation()"
-          >
-            <span class="lib-select-field__option-row">
-              <lib-checkbox
-                [checked]="allSelected()"
-                [indeterminate]="selectAllIndeterminate()"
-                (click)="$event.stopPropagation()"
-                (checkedChange)="onSelectAllCheckedChange($event)"
-              />
-              <span>{{ selectAllLabel() }}</span>
-            </span>
-          </div>
-        } @else {
-          <mat-option [value]="row.option.value">
-            @if (isMultiple()) {
-              <span class="lib-select-field__option-row">
-                <lib-checkbox
-                  [checked]="isSelected(row.option.value)"
-                  (click)="$event.stopPropagation()"
-                  (checkedChange)="onOptionCheckedChange(row.option.value, $event)"
-                />
-                <span>{{ row.option.label }}</span>
-              </span>
-            } @else {
-              {{ row.option.label }}
-            }
-          </mat-option>
-        }
-      </div>
-    </cdk-virtual-scroll-viewport>
-  </mat-select>
-  <mat-icon class="lib-select-field__arrow" matSuffix>
-    {{ panelOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}
-  </mat-icon>
-</mat-form-field>

package/src/lib/components/form-field/select-field.ts

@@ -1,324 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  computed,
-  DestroyRef,
-  forwardRef,
-  inject,
-  Injector,
-  input,
-  OnInit,
-  output,
-  signal,
-} from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
-import { MatFormFieldAppearance, MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule, MatSelectChange } from '@angular/material/select';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { LibCheckboxComponent } from '../checkbox/checkbox';
-import { ScrollingModule } from '@angular/cdk/scrolling';
-
-export interface LibSelectOption<T = string> {
-  value: T;
-  label: string;
-}
-
-type VirtualRow<T> =
-  | { kind: 'selectAll' }
-  | { kind: 'option'; option: LibSelectOption<T> };
-
-export type LibSelectMode = 'single' | 'multiple';
-
-@Component({
-  selector: 'lib-select-field',
-  standalone: true,
-  imports: [MatFormFieldModule, MatSelectModule, ScrollingModule, MatInputModule, MatIconModule, LibCheckboxComponent],
-  templateUrl: './select-field.html',
-  styleUrl: './select-field.css',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => LibSelectFieldComponent),
-      multi: true,
-    },
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class LibSelectFieldComponent<T = string> implements ControlValueAccessor, OnInit {
-  private static readonly PANEL_CONTENT_HEIGHT = 240;
-  private static readonly FILTER_ROW_HEIGHT = 48;
-  private static readonly OPTION_ROW_HEIGHT = 48;
-
-  private readonly cdr = inject(ChangeDetectorRef);
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly injector = inject(Injector);
-  private ngControl: NgControl | null = null;
-
-  readonly label = input('');
-  readonly appearance = input<'outline' | 'filled'>('outline');
-  readonly placeholder = input('Elegir opción');
-  readonly options = input<LibSelectOption<T>[]>([]);
-  readonly mode = input<LibSelectMode>('single');
-  readonly filterable = input(true, { transform: coerceBooleanProperty });
-  readonly filterPlaceholder = input('Buscar...');
-  readonly disabled = input(false, { transform: coerceBooleanProperty });
-  readonly required = input(false, { transform: coerceBooleanProperty });
-  readonly width = input<string | number | null>(null);
-  readonly selectAllLabel = input('Seleccionar todos');
-  readonly widthStyle = computed(() => {
-    const v = this.width();
-    return v == null || v === '' ? null : typeof v === 'number' ? `${v}px` : String(v);
-  });
-  readonly matAppearance = computed<MatFormFieldAppearance>(() =>
-    this.appearance() === 'filled' ? 'fill' : 'outline'
-  );
-
-  readonly valueChange = output<T | T[]>();
-
-  readonly panelOpen = signal(false);
-  readonly filterTerm = signal('');
-  readonly disabledByControl = signal(false);
-
-  readonly isMultiple = computed(() => this.mode() === 'multiple');
-  readonly virtualViewportMaxHeight = computed(() =>
-    this.filterable()
-      ? LibSelectFieldComponent.PANEL_CONTENT_HEIGHT - LibSelectFieldComponent.FILTER_ROW_HEIGHT
-      : LibSelectFieldComponent.PANEL_CONTENT_HEIGHT
-  );
-
-  readonly filteredOptions = computed(() => {
-    const opts = this.options();
-    const term = this.filterTerm().trim().toLowerCase();
-    if (!term) return opts;
-    return opts.filter(
-      (o) => o.label.toLowerCase().includes(term)
-    );
-  });
-
-  readonly virtualRows = computed<VirtualRow<T>[]>(() => {
-    const rows: VirtualRow<T>[] = this.filteredOptions().map((option) => ({
-      kind: 'option',
-      option,
-    }));
-
-    if (this.isMultiple()) {
-      rows.unshift({ kind: 'selectAll' });
-    }
-
-    return rows;
-  });
-
-  readonly virtualViewportHeight = computed(() => {
-    const rowsCount = this.virtualRows().length;
-    const contentHeight = rowsCount * LibSelectFieldComponent.OPTION_ROW_HEIGHT;
-    const maxHeight = this.virtualViewportMaxHeight();
-    const minHeight = rowsCount > 0 ? LibSelectFieldComponent.OPTION_ROW_HEIGHT : 0;
-
-    return Math.max(minHeight, Math.min(contentHeight, maxHeight));
-  });
-
-  readonly allSelected = computed(() => {
-    if (!this.isMultiple()) {
-      return false;
-    }
-    const opts = this.options();
-    const current = this.value();
-    if (!Array.isArray(current) || !opts.length) {
-      return false;
-    }
-    const values = opts.map((o) => o.value);
-    return values.every((v) => current.includes(v));
-  });
-
-  readonly selectedLabels = computed(() => {
-    const current = this.value();
-    if (!Array.isArray(current) || !current.length) {
-      return [] as string[];
-    }
-    const selectedSet = new Set(current);
-    return this.options()
-      .filter((o) => selectedSet.has(o.value))
-      .map((o) => o.label);
-  });
-
-  readonly multiTriggerLabel = computed(() => {
-    const labels = this.selectedLabels();
-    if (!labels.length) {
-      return '';
-    }
-    if (labels.length === 1) {
-      return labels[0];
-    }
-    return `${labels[0]} (+${labels.length - 1} items)`;
-  });
-
-  readonly selectAllIndeterminate = computed(() => {
-    if (!this.isMultiple()) {
-      return false;
-    }
-    const opts = this.options();
-    const current = this.value();
-    if (!Array.isArray(current) || !opts.length) {
-      return false;
-    }
-    const selectedCount = opts.filter((o) => current.includes(o.value)).length;
-    return selectedCount > 0 && selectedCount < opts.length;
-  });
-
-  private readonly value = signal<T | T[] | null>(null);
-  private onChange: (v: T | T[] | null) => void = () => {
-    /* assigned by registerOnChange */
-  };
-  private onTouched: () => void = () => {
-    /* assigned by registerOnTouched */
-  };
-
-  ngOnInit(): void {
-    this.ngControl = this.injector.get(NgControl, null);
-    if (this.ngControl) {
-      this.ngControl.valueAccessor = this;
-    }
-    if (this.ngControl?.valueChanges) {
-      this.ngControl.valueChanges
-        .pipe(takeUntilDestroyed(this.destroyRef))
-        .subscribe(() => this.cdr.markForCheck());
-    }
-  }
-
-  onPanelOpenChange(open: boolean): void {
-    this.panelOpen.set(open);
-    if (!open) this.filterTerm.set('');
-    this.cdr.markForCheck();
-  }
-
-  onFilterInput(event: Event): void {
-    const el = event.target as HTMLInputElement;
-    this.filterTerm.set(el?.value ?? '');
-  }
-
-  onFilterKeydown(event: KeyboardEvent): void {
-    event.stopPropagation();
-  }
-
-  onSelectionChange(change: MatSelectChange): void {
-    if (this.isMultiple()) {
-      const incoming = Array.isArray(change.value) ? (change.value as T[]) : [];
-      const options = this.options().map((o) => o.value);
-      const optionSet = new Set(options);
-      const hasUnknownValues = incoming.some((v) => !optionSet.has(v));
-
-      // Ignore synthetic values emitted by the auxiliary "select all" option.
-      if (hasUnknownValues) {
-        this.cdr.markForCheck();
-        return;
-      }
-
-      const incomingSet = new Set(incoming);
-      const normalized = options.filter((v) => incomingSet.has(v)) as T[];
-      this.value.set(normalized);
-      this.onChange(normalized);
-      this.valueChange.emit(normalized);
-      this.cdr.markForCheck();
-      return;
-    }
-
-    this.value.set(change.value);
-    this.onChange(change.value);
-    this.valueChange.emit(change.value);
-    this.cdr.markForCheck();
-  }
-
-  onToggleSelectAll(checked: boolean): void {
-    if (!this.isMultiple()) {
-      return;
-    }
-    const options = this.options();
-    const currentValue = this.value();
-    const current = Array.isArray(currentValue) ? [...currentValue] : [];
-    if (checked) {
-      const toAdd = options.map((o) => o.value);
-      const set = new Set(current);
-      for (const v of toAdd) {
-        set.add(v);
-      }
-      this.value.set(Array.from(set) as T[]);
-    } else {
-      const toRemove = new Set(options.map((o) => o.value));
-      this.value.set(current.filter((v) => !toRemove.has(v as T)) as T[]);
-    }
-    const updated = this.value();
-    this.onChange(updated);
-    this.valueChange.emit(updated as T | T[]);
-    this.cdr.markForCheck();
-  }
-
-  onSelectAllCheckedChange(checked: boolean): void {
-    this.onToggleSelectAll(checked);
-  }
-
-  onOptionCheckedChange(value: T, checked: boolean): void {
-    if (!this.isMultiple()) {
-      return;
-    }
-    const currentValue = this.value();
-    const current = Array.isArray(currentValue) ? [...currentValue] : [];
-    const set = new Set(current);
-    if (checked) {
-      set.add(value);
-    } else {
-      set.delete(value);
-    }
-    this.value.set(Array.from(set) as T[]);
-    const updated = this.value();
-    this.onChange(updated);
-    this.valueChange.emit(updated as T | T[]);
-    this.cdr.markForCheck();
-  }
-
-  writeValue(value: T | T[] | null): void {
-    this.value.set(value);
-    this.cdr.markForCheck();
-  }
-
-  registerOnChange(fn: (v: T | T[] | null) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabledByControl.set(isDisabled);
-    this.cdr.markForCheck();
-  }
-
-  get displayValue(): T | T[] | null {
-    return this.value();
-  }
-
-  toggledAllSelection(){
-    if (this.allSelected()) {
-      this.onToggleSelectAll(false);
-      return;
-    }
-    this.onToggleSelectAll(true);
-  }
-
-
-  isSelected(value: T): boolean {
-    const current = this.value();
-    if (!Array.isArray(current)) {
-      return false;
-    }
-    return current.includes(value);
-  }
-
-  trackByVirtualRow(_index: number, row: VirtualRow<T>): string {
-    return row.kind === 'selectAll' ? '__select-all__' : String(row.option.value);
-  }
-}

package/src/lib/components/form-field/text-field.css

@@ -1,41 +0,0 @@
-:host {
-	display: block;
-}
-
-.lib-text-field__field {
-	width: 100%;
-}
-
-.lib-text-field__prefix-image {
-	width: 24px;
-	height: 24px;
-	font-size: 24px;
-	overflow: visible;
-}
-
-.lib-text-field__prefix-image svg {
-	width: 24px;
-	height: 24px;
-}
-
-:host[data-state='error'] ::ng-deep .mat-mdc-form-field,
-:host[data-state='error-hover'] ::ng-deep .mat-mdc-form-field,
-:host[data-state='error-focus'] ::ng-deep .mat-mdc-form-field {
-	--mdc-outlined-text-field-outline-color: var(--text-fields-outlined-error-outline-outlined-text-field-error-outline-color, #ba1a1a);
-	--mdc-outlined-text-field-hover-outline-color: var(--text-fields-outlined-error-hover-outlined-text-field-error-hover-outline-color, #ba1a1a);
-	--mdc-outlined-text-field-focus-outline-color: var(--text-fields-outlined-error-focus-outlined-text-field-error-focus-outline-color, #ba1a1a);
-	--mdc-outlined-text-field-label-text-color: var(--text-fields-outlined-error-outline-outlined-text-field-error-outline-color, #ba1a1a);
-	--mdc-filled-text-field-active-indicator-color: var(--text-fields-outlined-error-outline-outlined-text-field-error-outline-color, #ba1a1a);
-	--mdc-filled-text-field-focus-active-indicator-color: var(--text-fields-outlined-error-focus-outlined-text-field-error-focus-outline-color, #ba1a1a);
-	--mdc-filled-text-field-label-text-color: var(--text-fields-outlined-error-outline-outlined-text-field-error-outline-color, #ba1a1a);
-}
-
-.lib-text-field__field textarea.mat-mdc-input-element {
-	resize: none;
-}
-
-/* Hide browser-provided password reveal/clear controls to avoid duplicate icons. */
-:host ::ng-deep input[type='password']::-ms-reveal,
-:host ::ng-deep input[type='password']::-ms-clear {
-	display: none;
-}

package/src/lib/components/form-field/text-field.html

@@ -1,38 +0,0 @@
-<mat-form-field [appearance]="resolvedAppearance()" [style.width]="widthStyle() ?? null" [hideRequiredMarker]="hideRequiredMarker()">
-  @if(prefixIconSrc()){
-    <mat-icon
-      matPrefix
-      class="lib-text-field__prefix-image"
-      [svgIcon]="prefixIconSrc()"
-      (click)="pressSuffixEvent()"
-    >
-      {{ prefixIconSrc() }}
-    </mat-icon>
-  } @else if(resolvedPrefixIcon()){
-    <mat-icon matPrefix>
-      {{ resolvedPrefixIcon() }}
-    </mat-icon>
-  }
-
-  <mat-label>{{ label() }}</mat-label>
-  <input matInput [type]="type()" [formControl]="control()" [placeholder]="placeholder()" [attr.autocomplete]="autocomplete()" />
-
-  @if(shouldShowError() && error()) {
-    <mat-error>{{ error() }}</mat-error>
-  }
-
-  @if(hint()) {
-    <mat-hint>{{ hint() }}</mat-hint>
-  }
-
-  @if(shouldShowSuffix()) {
-    <mat-icon
-      matSuffix
-      class="lib-text-field__icon lib-text-field__icon--suffix"
-      [svgIcon]="suffixIcon()"
-      (click)="pressSuffixEvent()"
-    >
-      {{ suffixTextIcon() }}
-    </mat-icon>
-  }
-</mat-form-field>