crdx-components 1.0.0 → 1.0.1

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

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

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

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

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

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

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

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

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

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

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

@@ -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>