crdx-components 1.0.0

package/src/lib/components/divider/divider.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  selector: 'lib-divider',
+  standalone: true,
+  templateUrl: './divider.html',
+  styleUrl: './divider.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LibDividerComponent {
+  /** Orientación: horizontal (full width) o vertical (full height). Figma: Horizontal/Full-width, Vertical/Full-width */
+  orientation = input<'horizontal' | 'vertical'>('horizontal');
+}

package/src/lib/components/footer-actions/footer/footer-flow.store.ts

@@ -0,0 +1,30 @@
+import { Injectable, signal } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class FooterFlowStore {
+  readonly totalSteps = signal(1);
+  readonly currentStep = signal(1);
+
+  setTotalSteps(total: number): void {
+    this.totalSteps.set(Math.max(1, total));
+    if (this.currentStep() > this.totalSteps()) {
+      this.currentStep.set(this.totalSteps());
+    }
+  }
+
+  reset(): void {
+    this.currentStep.set(1);
+  }
+
+  advance(): void {
+    if (this.currentStep() < this.totalSteps()) {
+      this.currentStep.update((step) => step + 1);
+    }
+  }
+
+  retreat(): void {
+    if (this.currentStep() > 1) {
+      this.currentStep.update((step) => step - 1);
+    }
+  }
+}

package/src/lib/components/footer-actions/footer/footer.html

@@ -0,0 +1,14 @@
+<lib-modal-footer-actions>
+  <lib-button
+    variant="outlined"
+    size="small"
+    [label]="'Cancelar' | translate"
+    (click)="onCancel()"
+  />
+  <lib-button
+    variant="filled"
+    size="small"
+    [label]="primaryLabel() | translate"
+    (click)="onContinue()"
+  />
+</lib-modal-footer-actions>

package/src/lib/components/footer-actions/footer/footer.ts

@@ -0,0 +1,50 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { ConfirmModalStore } from '../../dialogs/confirm-modal/confirm-modal.store';
+import { LibButtonComponent } from '../../button/button';
+import { ModalFooterActionsComponent } from '../modal-footer-actions/modal-footer-actions';
+import { SideModalStore } from '../../dialogs/side-modal/side-modal.state';
+import { TranslatePipe } from '@ngx-translate/core';
+import { FooterFlowStore } from './footer-flow.store';
+
+@Component({
+  selector: 'lib-side-modal-footer',
+  standalone: true,
+  imports: [ModalFooterActionsComponent, LibButtonComponent, TranslatePipe],
+  templateUrl: './footer.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FooterComponent {
+  private readonly sideModalStore = inject(SideModalStore);
+  private readonly confirmModalStore = inject(ConfirmModalStore);
+  private readonly flowStore = inject(FooterFlowStore);
+
+  readonly primaryLabel = computed(() =>
+    this.flowStore.currentStep() < this.flowStore.totalSteps() ? 'NEXT' : 'SAVE'
+  );
+
+  onCancel(): void {
+    this.sideModalStore.closeSideModal();
+  }
+
+  onContinue(): void {
+    if (this.flowStore.currentStep() < this.flowStore.totalSteps()) {
+      this.flowStore.advance();
+      return;
+    }
+
+    const dialogRef = this.confirmModalStore.open(
+      '¿Guardar cambios?',
+      'Guardar',
+      '',
+      '',
+      'max-content',
+      'Cancelar',
+    );
+
+    dialogRef.closed.subscribe((result: unknown) => {
+      if (result === true) {
+        this.sideModalStore.closeSideModal({ step: this.flowStore.totalSteps(), saved: true });
+      }
+    });
+  }
+}

package/src/lib/components/footer-actions/modal-footer-actions/modal-footer-actions.css

@@ -0,0 +1,44 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+
+:host-context(.side-modal__content) {
+  width: calc(100% + 2rem);
+  margin-left: -1rem;
+  margin-right: -1rem;
+  margin-bottom: -1rem;
+}
+
+:host-context(.side-modal__content) .lib-modal-footer-actions__buttons {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.lib-modal-footer-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  align-self: flex-end;
+  flex: 0 0 auto;
+  margin-top: auto;
+  background: var(--side-sheets-enabled-container-sheet-side-docked-standard-container-color,
+      var(--app-side-sheets-enabled-container-sheet-side-docked-standard-container-color, #F7FAFC));
+  z-index: 10;
+  position: sticky;
+  bottom: 0;
+}
+
+.lib-modal-footer-actions__buttons {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0.75rem 1.5rem 1.25rem;
+}
+
+.lib-modal-footer-actions__buttons lib-mat-button,
+.lib-modal-footer-actions__buttons .lib-mat-btn {
+  width: auto;
+}

package/src/lib/components/footer-actions/modal-footer-actions/modal-footer-actions.html

@@ -0,0 +1,7 @@
+<div class="lib-modal-footer-actions">
+  <lib-divider orientation="horizontal" />
+  <div class="lib-modal-footer-actions__buttons">
+    <ng-content></ng-content>
+  </div>
+</div>
+

package/src/lib/components/footer-actions/modal-footer-actions/modal-footer-actions.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { LibDividerComponent } from '../../divider/divider';
+
+@Component({
+  selector: 'lib-modal-footer-actions',
+  standalone: true,
+  imports: [LibDividerComponent],
+  templateUrl: './modal-footer-actions.html',
+  styleUrl: './modal-footer-actions.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ModalFooterActionsComponent {}

package/src/lib/components/footer-actions/page-footer-actions/page-footer-actions.css

@@ -0,0 +1,31 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+:host-context(.side-modal__content) {
+  width: calc(100% + 2rem);
+  margin-left: -1rem;
+  margin-right: -1rem;
+  margin-bottom: -1rem;
+}
+
+.lib-page-footer-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+}
+
+.lib-page-footer-actions__buttons {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px 0;
+  justify-content: flex-end;
+}
+
+.lib-page-footer-actions__buttons lib-mat-button,
+.lib-page-footer-actions__buttons .lib-mat-btn {
+  width: auto;
+}

package/src/lib/components/footer-actions/page-footer-actions/page-footer-actions.html

@@ -0,0 +1,7 @@
+<div class="lib-page-footer-actions">
+  <lib-divider orientation="horizontal" />
+  <div class="lib-page-footer-actions__buttons">
+    <ng-content></ng-content>
+  </div>
+</div>
+

package/src/lib/components/footer-actions/page-footer-actions/page-footer-actions.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { LibDividerComponent } from '../../divider/divider';
+
+@Component({
+  selector: 'lib-page-footer-actions',
+  standalone: true,
+  imports: [LibDividerComponent],
+  templateUrl: './page-footer-actions.html',
+  styleUrl: './page-footer-actions.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PageFooterActionsComponent {}

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

@@ -0,0 +1,178 @@
+.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

@@ -0,0 +1,94 @@
+<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>