crdx-components 1.0.0 → 2.0.0

package/src/lib/components/shared-table/shared-table.component.html

@@ -1,96 +0,0 @@
-<figure class="shared-table">
-  <div
-    class="shared-table__container mdc-data-table"
-    [class.shared-table__container--no-paginator]="!shouldRenderPaginator()"
-  >
-    <!-- Header: scroll sincronizado con el cuerpo, sin barra visible -->
-    <div class="shared-table__header-wrap" #headerWrap>
-      <table
-        mat-table
-        [dataSource]="dataSource"
-        class="shared-table__mat-table shared-table__mat-table--header"
-      >
-        @for (column of columns(); track columnTrackBy($index, column)) {
-          <ng-container [matColumnDef]="columnId(column)">
-            <th
-              mat-header-cell
-              *matHeaderCellDef
-              [style.text-align]="resolveTextAlign(column)"
-              [style.width]="resolveWidth(column)"
-            >
-              {{ column.header }}
-            </th>
-          </ng-container>
-        }
-        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      </table>
-    </div>
-    <!-- Cuerpo: scroll horizontal aquí (barra debajo del header) -->
-    <div
-      class="shared-table__body-wrap"
-      [class.shared-table__body-wrap--loading]="loading()"
-      #bodyWrap
-    >
-      <table
-        mat-table
-        [dataSource]="dataSource"
-        class="shared-table__mat-table shared-table__mat-table--body"
-      >
-        @for (column of columns(); track columnTrackBy($index, column)) {
-          <ng-container [matColumnDef]="columnId(column)">
-            <td
-              mat-cell
-              *matCellDef="let row; let i = index"
-              [style.text-align]="resolveTextAlign(column)"
-              [style.width]="resolveWidth(column)"
-            >
-              @if (cellTemplates[column.key]) {
-                <ng-container
-                  [ngTemplateOutlet]="cellTemplates[column.key]"
-                  [ngTemplateOutletContext]="{
-                    $implicit: row,
-                    index: i,
-                    column: column,
-                  }"
-                ></ng-container>
-              } @else {
-                {{ getCellValue(column, row, i) }}
-              }
-            </td>
-          </ng-container>
-        }
-        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-        <tr mat-no-data-row>
-          <td
-            class="shared-table__empty"
-            [attr.colspan]="displayedColumns.length || 1"
-          >
-
-          <span>loading: {{ loading() }}</span>
-            @if (!loading()) {
-              {{ emptyState() }}
-            }
-          </td>
-        </tr>
-      </table>
-      @if (loading()) {
-        <div class="shared-table__loading-overlay">
-          <mat-spinner
-            class="shared-table__loading-spinner"
-            [diameter]="48"
-            [strokeWidth]="4"
-          ></mat-spinner>
-        </div>
-      }
-    </div>
-  </div>
-
-  @if (shouldRenderPaginator()) {
-    <mat-paginator
-      class="shared-table__paginator"
-      [length]="totalElements() ?? data().length"
-      [pageSize]="pageSize()"
-      [pageSizeOptions]="pageSizeOptions()"
-    ></mat-paginator>
-  }
-</figure>

package/src/lib/components/shared-table/shared-table.component.ts

@@ -1,172 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  AfterContentInit,
-  AfterViewInit,
-  Component,
-  ContentChildren,
-  DestroyRef,
-  ElementRef,
-  EventEmitter,
-  effect,
-  input,
-  OnDestroy,
-  Output,
-  QueryList,
-  ViewChild,
-  inject,
-} from '@angular/core';
-import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { MatPaginator, MatPaginatorModule, PageEvent } from '@angular/material/paginator';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { SharedTableCellTemplateDirective } from './shared-table-cell-template.directive';
-
-export interface TablePageEvent {
-  pageIndex: number;
-  pageSize: number;
-}
-
-export interface SharedTableColumn<T extends Record<string, unknown> = Record<string, unknown>> {
-  key:  string;
-  header: string;
-  align?: 'start' | 'center' | 'end';
-  width?: string;
-  cell?: (row: T, index: number) => unknown;
-}
-
-@Component({
-  selector: 'lib-shared-table, shared-table',
-  standalone: true,
-  imports: [CommonModule, MatTableModule, MatPaginatorModule, MatProgressSpinnerModule],
-  templateUrl: './shared-table.component.html',
-  styleUrl: './shared-table.component.css'
-})
-export class SharedTableComponent<T extends Record<string, unknown> = Record<string, unknown>>
-  implements AfterContentInit, AfterViewInit, OnDestroy {
-  readonly columns = input.required<ReadonlyArray<SharedTableColumn<T>>>();
-  readonly data = input.required<ReadonlyArray<T>>();
-  readonly caption = input<string | undefined>();
-  readonly emptyState = input('Sin registros disponibles');
-  readonly loading = input(false);
-  readonly showPaginator = input(true);
-  readonly pageSize = input(10);
-  readonly pageSizeOptions = input<ReadonlyArray<number>>([5, 10, 20]);
-  readonly enableRowClick = input(false);
-  readonly totalElements = input<number | undefined>();
-  @Output() rowClick = new EventEmitter<T>();
-  @Output() pageChange = new EventEmitter<TablePageEvent>();
-  @ContentChildren(SharedTableCellTemplateDirective, { descendants: true })
-  cellTemplatesQuery!: QueryList<SharedTableCellTemplateDirective>;
-  cellTemplates: Record<string, SharedTableCellTemplateDirective['template']> = {};
-  private removeScrollSync: (() => void) | null = null;
-  private _paginator?: MatPaginator;
-  private readonly destroyRef = inject(DestroyRef);
-
-  readonly dataSource = new MatTableDataSource<T>();
-  displayedColumns: string[] = [];
-
-  constructor() {
-    effect(() => {
-      const columns = this.columns();
-      this.displayedColumns = columns.map((column) => String(column.key));
-    });
-
-    effect(() => {
-      const rows = this.data();
-      this.dataSource.data = rows.slice();
-    });
-  }
-
-  @ViewChild(MatPaginator) set paginator(paginator: MatPaginator | undefined) {
-    this._paginator = paginator;
-    // En modo server-side (totalElements definido) NO conectamos al dataSource
-    // para que Material no intente paginar los datos localmente
-    if (this.totalElements() === undefined) {
-      this.dataSource.paginator = paginator ?? null;
-    }
-  }
-
-  @ViewChild('headerWrap') headerWrapRef?: ElementRef<HTMLDivElement>;
-  @ViewChild('bodyWrap') bodyWrapRef?: ElementRef<HTMLDivElement>;
-
-  ngAfterViewInit(): void {
-    const header = this.headerWrapRef?.nativeElement;
-    const body = this.bodyWrapRef?.nativeElement;
-    if (header && body) {
-      const onScroll = () => { header.scrollLeft = body.scrollLeft; };
-      body.addEventListener('scroll', onScroll);
-      this.removeScrollSync = () => body.removeEventListener('scroll', onScroll);
-    }
-
-    // Modo server-side: escuchar eventos del paginator y emitirlos hacia arriba
-    if (this._paginator && this.totalElements() !== undefined) {
-      this._paginator.page.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event: PageEvent) => {
-        this.pageChange.emit({ pageIndex: event.pageIndex, pageSize: event.pageSize });
-      });
-    }
-  }
-
-  ngAfterContentInit(): void {
-    const rebuildTemplateMap = () => {
-      const map: Record<string, SharedTableCellTemplateDirective['template']> = {};
-      this.cellTemplatesQuery.forEach((entry) => {
-        if (entry.key) {
-          map[entry.key] = entry.template;
-        }
-      });
-      this.cellTemplates = map;
-    };
-
-    rebuildTemplateMap();
-    this.cellTemplatesQuery.changes
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(() => rebuildTemplateMap());
-  }
-
-  ngOnDestroy(): void {
-    this.removeScrollSync?.();
-    this.removeScrollSync = null;
-  }
-
-  getCellValue(column: SharedTableColumn<T>, row: T, index: number): unknown {
-    if (column.cell) {
-      return column.cell(row, index);
-    }
-
-    const key = column.key as keyof T;
-    const fallbackKey = column.key as keyof typeof row;
-    return (row?.[key] ?? row?.[fallbackKey]) ?? '';
-  }
-
-  columnId(column: SharedTableColumn<T>): string {
-    return String(column.key);
-  }
-
-  columnTrackBy = (_: number, column: SharedTableColumn<T>) => column.key;
-
-  resolveTextAlign(column: SharedTableColumn<T>): 'start' | 'center' | 'end' {
-    return column.align ?? 'start';
-  }
-
-  resolveWidth(column: SharedTableColumn<T>): string | null {
-    return column.width ?? null;
-  }
-
-  shouldRenderPaginator(): boolean {
-    return this.showPaginator();
-  }
-
-  onRowClick(event: MouseEvent, row: T): void {
-    if (!this.enableRowClick()) return;
-
-    const el = event.target as HTMLElement | null;
-    // Evita abrir el side modal si el click fue sobre un elemento interactivo (acciones dentro de la fila)
-    if (el?.closest('button, a, input, textarea, select, [role="button"], mat-icon, mat-slide-toggle, mat-checkbox')) {
-      return;
-    }
-
-    this.rowClick.emit(row);
-  }
-}
-
-export { SharedTableCellTemplateDirective } from './shared-table-cell-template.directive';

package/src/lib/components/sidebar/sidebar.css

@@ -1,234 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-}
-
-.sidebar {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-container-width, 96) * 1px);
-  min-width: calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-container-width, 96) * 1px);
-  height: 100%;
-  padding: calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-item-top-space, 44) * 1px) 0
-    calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-item-vertical-space, 4) * 1px);
-  box-sizing: border-box;
-  gap: calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-item-vertical-space, 4) * 1px);
-  background-color: var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-container-color, #ebeef0);
-  border-radius: calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-container-shape, 0) * 1px);
-  color: var(--navigation-rail-nav-rail-item-vertical-nav-rail-item-vertical-text-color, #434749);
-  transition: width 280ms ease, min-width 280ms ease, padding 280ms ease;
-}
-
-.sidebar--show-labels {
-  align-items: stretch;
-  width: calc(var(--navigation-rail-nav-rail-expanded-nav-rail-expanded-container-width-minimum, 220) * 1px);
-  min-width: calc(var(--navigation-rail-nav-rail-expanded-nav-rail-expanded-container-width-minimum, 220) * 1px);
-}
-
-.sidebar__header,
-.sidebar__footer {
-  display: flex;
-  justify-content: center;
-  padding-inline: calc(var(--navigation-rail-nav-rail-item-vertical-nav-rail-item-vertical-leading-space, 16) * 1px);
-  width: 100%;
-}
-
-.sidebar__header {
-  min-height: calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-header-space-minimum, 40) * 1px);
-  align-items: center;
-}
-
-.sidebar__header:empty,
-.sidebar__footer:empty {
-  display: none;
-}
-
-.sidebar__nav {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  padding: 0 var(--padding-container-main, 16px) 0;
-}
-
-.sidebar__list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-container-vertical-space, 6) * 1px);
-}
-
-.sidebar--show-labels .sidebar__list {
-  align-items: stretch;
-}
-
-.sidebar__item {
-  width: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.sidebar--show-labels .sidebar__item {
-  justify-content: flex-start;
-}
-
-.sidebar__button {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  width: auto;
-  max-width: 100%;
-  height: calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-container-height, 64) * 1px);
-  margin: 0;
-  padding-inline: 0;
-  padding-block: 0;
-  border: 0;
-  background: none;
-  cursor: pointer;
-  color: var(--navigation-rail-nav-rail-item-common-nav-rail-item-icon-color, #181c1e);
-  text-decoration: none;
-  transition:
-    color 180ms ease,
-    height 320ms ease,
-    max-width 320ms ease,
-    padding 320ms ease;
-}
-
-.sidebar__button--expanded {
-  align-self: center;
-  width: auto;
-  max-width: 100%;
-  height: calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-container-height, 64) * 1px);
-  justify-content: flex-start;
-  padding-inline: 0;
-}
-
-.sidebar__button:focus-visible {
-  outline: 2px solid var(--navigation-rail-nav-rail-item-common-nav-rail-item-focus-indicator, #5b5f61);
-  outline-offset: 4px;
-}
-
-.sidebar__button:disabled {
-  cursor: default;
-  opacity: 0.48;
-}
-
-.sidebar__active {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-active-indicator-icon-label-space, 8) * 1px);
-  height: calc(var(--navigation-rail-nav-rail-item-vertical-nav-rail-item-vertical-active-indicator-height, 32) * 1px);
-  padding-inline: calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-active-indicator-leading-space, 16) * 1px)
-    calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-active-indicator-trailing-space, 16) * 1px);
-  border-radius: calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-active-indicator-shape, 1000) * 1px);
-  background-color: transparent;
-  transition:
-    background-color 180ms ease,
-    color 180ms ease,
-    gap 320ms cubic-bezier(0.4, 0, 0.2, 1),
-    padding 320ms cubic-bezier(0.4, 0, 0.2, 1),
-    width 320ms cubic-bezier(0.4, 0, 0.2, 1),
-    max-width 320ms cubic-bezier(0.4, 0, 0.2, 1);
-  max-width: calc(var(--navigation-rail-nav-rail-expanded-nav-rail-expanded-container-width-minimum, 220) * 1px);
-  overflow: hidden;
-}
-
-.sidebar__button--expanded .sidebar__active,
-.sidebar__active--expanded {
-  width: auto;
-  max-width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: flex-start;
-  padding-inline: calc(var(--navigation-rail-nav-rail-item-horizontal-nav-rail-item-horizontal-full-width-leading-space, 16) * 1px);
-  gap: calc(var(--navigation-rail-nav-rail-item-horizontal-nav-rail-item-horizontal-icon-label-space, 8) * 1px);
-}
-
-.sidebar__button:not(:disabled):hover .sidebar__active {
-  background-color: rgba(24, 28, 30, 0.08);
-}
-
-.sidebar__button:not(:disabled):active .sidebar__active {
-  background-color: rgba(24, 28, 30, 0.12);
-}
-
-.sidebar__button--selected .sidebar__active {
-  background-color: var(--navigation-rail-nav-rail-item-common-nav-rail-item-container-selected-color, #e42313);
-  color: var(--navigation-rail-nav-rail-item-common-nav-rail-item-icon-selected-color, #ffffff);
-}
-
-.sidebar__button--selected:not(:disabled):hover .sidebar__active {
-  background-color: rgba(228, 35, 19, 0.88);
-}
-
-.sidebar__button--selected:not(:disabled):active .sidebar__active {
-  background-color: rgba(228, 35, 19, 0.76);
-}
-
-.sidebar__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-icon-size, 24) * 1px);
-  height: calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-icon-size, 24) * 1px);
-  color: currentColor;
-}
-
-.sidebar__icon-svg,
-.sidebar__icon-img {
-  width: 100%;
-  height: 100%;
-}
-
-.sidebar__icon-svg {
-  fill: currentColor;
-}
-
-.sidebar__icon-img {
-  object-fit: contain;
-}
-
-.sidebar__label {
-  flex: 1 1 auto;
-  min-width: 0;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  line-height: 1.2;
-  color: inherit;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  transition: opacity 200ms ease;
-}
-
-.sidebar__accessory {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  margin-left: auto;
-  color: inherit;
-}
-
-.sidebar__accessory-svg,
-.sidebar__accessory-img {
-  width: 100%;
-  height: 100%;
-  fill: currentColor;
-}
-
-.sidebar__footer {
-  margin-top: auto;
-  align-items: flex-end;
-  padding-bottom: calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-item-vertical-space, 4) * 1px);
-}

package/src/lib/components/sidebar/sidebar.html

@@ -1,67 +0,0 @@
-<aside class="sidebar" role="navigation" aria-label="Navegación principal" [class.sidebar--show-labels]="hasLabels()">
-  <div class="sidebar__header">
-    <ng-content select="[sidebar-header]"></ng-content>
-  </div>
-
-  <nav class="sidebar__nav" aria-label="Secciones">
-    <ul class="sidebar__list">
-      @for (item of items(); track trackById($index, item)) {
-        <li
-          class="sidebar__item"
-          [class.sidebar__item--selected]="isSelected(item)"
-          [class.sidebar__item--disabled]="item.disabled"
-        >
-          <button
-            type="button"
-            class="sidebar__button"
-            [class.sidebar__button--expanded]="hasLabels()"
-            [class.sidebar__button--selected]="isSelected(item)"
-            [attr.aria-label]="item.ariaLabel ?? item.label"
-            [attr.aria-current]="isSelected(item) ? 'page' : null"
-            [attr.title]="shouldShowLabel(item) ? null : (item.ariaLabel || item.label)"
-            [disabled]="item.disabled"
-            (click)="onSelect(item)"
-          >
-            <span class="sidebar__active" [class.sidebar__active--expanded]="hasLabels()">
-              @if (iconRef(item); as iconSrc) {
-                <span class="sidebar__icon" aria-hidden="true">
-                  <ng-container
-                    [ngTemplateOutlet]="renderIcon"
-                    [ngTemplateOutletContext]="{ $implicit: iconSrc, svgClass: 'sidebar__icon-svg', imgClass: 'sidebar__icon-img' }"
-                  ></ng-container>
-                </span>
-              }
-
-              @if (shouldShowLabel(item)) {
-                <span class="sidebar__label">{{ item.label }}</span>
-              }
-
-              @if (accessoryRef(item); as accessorySrc) {
-                <span class="sidebar__accessory" aria-hidden="true">
-                  <ng-container
-                    [ngTemplateOutlet]="renderIcon"
-                    [ngTemplateOutletContext]="{ $implicit: accessorySrc, svgClass: 'sidebar__accessory-svg', imgClass: 'sidebar__accessory-img' }"
-                  ></ng-container>
-                </span>
-              }
-            </span>
-          </button>
-        </li>
-      }
-    </ul>
-  </nav>
-
-  <div class="sidebar__footer">
-    <ng-content select="[sidebar-footer]"></ng-content>
-  </div>
-
-  <ng-template #renderIcon let-src let-svgClass="svgClass" let-imgClass="imgClass">
-    @if (isSprite(src)) {
-      <svg [attr.class]="svgClass">
-        <use [attr.href]="src"></use>
-      </svg>
-    } @else {
-      <img [attr.class]="imgClass" [src]="src" alt="" />
-    }
-  </ng-template>
-</aside>

package/src/lib/components/sidebar/sidebar.ts

@@ -1,92 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Output, computed, input } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
-
-export interface SidebarNavItem {
-  id: string;
-  label: string;
-  icon: string;
-  iconPath?: string;
-  accessoryIcon?: string;
-  accessoryIconPath?: string;
-  ariaLabel?: string;
-  disabled?: boolean;
-}
-
-@Component({
-  selector: 'lib-sidebar',
-  standalone: true,
-  imports: [NgTemplateOutlet],
-  templateUrl: './sidebar.html',
-  styleUrl: './sidebar.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SidebarComponent {
-  readonly items = input<readonly SidebarNavItem[]>([]);
-  readonly selectedId = input<string | null>(null);
-  readonly showLabels = input(true);
-  readonly spritePath = input('assets/icons/sprite.svg');
-
-  @Output() readonly itemSelected = new EventEmitter<SidebarNavItem>();
-
-  protected readonly hasLabels = computed(() => this.showLabels() && this.items().some(({ label }) => !!label));
-
-  protected onSelect(item: SidebarNavItem): void {
-    if (item.disabled) {
-      return;
-    }
-
-    this.itemSelected.emit(item);
-  }
-
-  protected isSelected(item: SidebarNavItem): boolean {
-    return item.id === this.selectedId();
-  }
-
-  protected trackById(_index: number, item: SidebarNavItem): string {
-    return item.id;
-  }
-
-  protected iconHref(icon: string): string {
-    return `${this.spritePath()}#${icon}`;
-  }
-
-  protected accessoryHref(accessoryIcon: string): string {
-    return `${this.spritePath()}#${accessoryIcon}`;
-  }
-
-  protected iconRef(item: SidebarNavItem): string | null {
-    if (item.iconPath) {
-      return item.iconPath;
-    }
-
-    if (item.icon) {
-      return this.iconHref(item.icon);
-    }
-
-    return null;
-  }
-
-  protected accessoryRef(item: SidebarNavItem): string | null {
-    if (item.accessoryIconPath) {
-      return item.accessoryIconPath;
-    }
-
-    if (item.accessoryIcon) {
-      return this.accessoryHref(item.accessoryIcon);
-    }
-
-    return null;
-  }
-
-  protected isSprite(ref: string | null | undefined): ref is string {
-    return !!ref && ref.includes('#');
-  }
-
-  protected shouldShowLabel(item: SidebarNavItem): boolean {
-    if (!item.label) {
-      return false;
-    }
-
-    return this.showLabels();
-  }
-}

package/src/lib/components/slide-toggle/slide-toggle.html

@@ -1,3 +0,0 @@
-<mat-slide-toggle [checked]="checked()" [hideIcon]="true" (change)="onChange($event)">
-	<ng-content></ng-content>
-</mat-slide-toggle>

package/src/lib/components/slide-toggle/slide-toggle.ts

@@ -1,18 +0,0 @@
-import { Component, input, output } from '@angular/core';
-import { MatSlideToggleModule, MatSlideToggleChange } from '@angular/material/slide-toggle';
-
-@Component({
-  selector: 'lib-slide-toggle, slide-toggle',
-  standalone: true, 
-  imports: [MatSlideToggleModule],
-  templateUrl: './slide-toggle.html',
-  styleUrl: './slide-toggle.css',
-})
-export class SlideToggle {
-  checked = input(false);
-  checkedChange = output<boolean>();
-
-  onChange(event: MatSlideToggleChange) {
-    this.checkedChange.emit(event.checked);
-  }
-}

package/src/lib/components/spinner/spinner.css

@@ -1,9 +0,0 @@
-:host {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-:host ::ng-deep .lib-spinner {
-  --mdc-circular-progress-active-indicator-color: var(--lib-spinner-color, var(--Rojo-400, #e30613));
-}