fix: resuelve invarianza de inputs heredados y estrictez de tipos heredada

libs/ui/src/lib/ui/button/base-button.component.ts

@@ -23,11 +23,11 @@ export abstract class PiBaseButtonComponent implements OnInit {
     return `pi-color__${this.color()}`;
   }
 
-  protected get sizeClass(): string {
+  protected get sizeClass(): string | null {
     return `pi-button__${this.size()}`;
   }
 
-  protected get appearanceClass(): string {
+  protected get appearanceClass(): string | null {
     return `pi-button__appearance--${this.appearance()}`;
   }
 

libs/ui/src/lib/ui/button/switch-button/switch-button.component.ts

@@ -31,7 +31,7 @@ export class PiSwitchButtonComponent extends PiBaseButtonComponent {
   }
 
   readonly isActive = model(true);
-  readonly toggledTo = output();
+  readonly toggledTo = output<'on' | 'off'>();
 
   readonly contentType = input<'icon' | 'text'>('icon');
   readonly content = input.required<[

libs/ui/src/lib/ui/card/base-card.component.ts

@@ -40,7 +40,7 @@ export abstract class PiBaseCardComponent implements OnInit {
     return this.hasShadow() && 'has-shadow';
   }
 
-  protected get isClickableClass(): string | undefined {
+  protected get isClickableClass(): string | false | undefined {
     return this.isClickable() && 'is-clickable';
   }
 

libs/ui/src/lib/ui/chip/chip-action/chip-action.component.ts

@@ -52,7 +52,7 @@ export class PiChipActionComponent extends PiBaseChipComponent {
 
   // Skin
   override readonly size = input<'small' | 'medium' | 'large'>('small');
-  override readonly color = input<chipColor>('primary');
+  override readonly color = input<chipColor | undefined>('primary');
 
   // Status
   readonly isActive = input.required<boolean>();

libs/ui/src/lib/ui/chip/chip-date/chip-date.component.ts

@@ -5,6 +5,7 @@ import {
   input,
   output
 } from '@angular/core';
+import { chipColor } from '../entities/chip.model';
 import { ComponentFamilyClass, theming } from '../../../styles';
 import { Date } from '../../../util/models';
 import { PiBaseChipComponent } from '../base-chip.component';
@@ -48,7 +49,7 @@ export class PiChipDateComponent extends PiBaseChipComponent {
   readonly date = input.required<string>(); // ISO format in UTC time zone
 
   // Skin
-  override readonly color = input<theming>('primary');
+  override readonly color = input<chipColor | undefined>('primary');
   readonly isStroked = input(false);
 
   // Size - weekday only available in LARGE

libs/ui/src/lib/ui/chip/chip-status/chip-status.component.ts

@@ -30,7 +30,7 @@ export class PiChipStatusComponent extends PiBaseChipComponent {
   // Skin
   readonly appearance = input<'ghost' | 'fill'>('fill');
   override readonly affixPosition = input<'previous' | 'after'>('previous');
-  override readonly size = input<'small' | 'medium'>('small');
+  override readonly size = input<'small' | 'medium' | 'large'>('small');
 
   /* green | red | yellow | blue | opacity */
   readonly status = input.required<status>();

libs/ui/src/lib/ui/chip/chip-time/chip-time.component.ts

@@ -5,6 +5,7 @@ import {
   input,
   output
 } from '@angular/core';
+import { chipColor } from '../entities/chip.model';
 import { ComponentFamilyClass } from '../../../styles';
 import { DateTime } from 'luxon';
 import { PiBaseChipComponent } from '../base-chip.component';
@@ -39,17 +40,17 @@ export class PiChipTimeComponent extends PiBaseChipComponent {
   readonly timezone = input<string>('utc');
 
   // Skin
-  override readonly color = input<chipThemingColor>('primary');
+  override readonly color = input<chipColor | undefined>('primary');
 
   /**
    * On the chip time cases, we override the affix position property because
      it will be always used by the thime input and will be always previous
    */
-  override readonly affixPosition = input<'previous'>('previous');
+  override readonly affixPosition = input<'previous' | 'after'>('previous');
 
   // time - available in S and M
   // time + date - available in S
-  override readonly size = input<'small' | 'medium'>('small');
+  override readonly size = input<'small' | 'medium' | 'large'>('small');
 
   // Status
   readonly isActive = input.required<boolean>();

libs/ui/src/lib/ui/chip/chip-value/chip-value.component.ts

@@ -12,7 +12,7 @@ import { NgIf } from '@angular/common';
 })
 export class PiChipValueComponent extends PiBaseChipComponent {
   @HostBinding('class') get valueClasses(): string {
-    const colorClass = this.value() > 0 ? 'pi-color__success' : 'pi-color__warn';
+    const colorClass = Number(this.value()) > 0 ? 'pi-color__success' : 'pi-color__warn';
     const hasLabelClass = !!this.label() ? 'has-label' : '';
     const unitPosition = this.unitPosition();
     const unitPositionClass =
@@ -26,11 +26,10 @@ export class PiChipValueComponent extends PiBaseChipComponent {
   }
 
   // Content
-  override readonly value = input.required<number>();
   readonly unit = input.required<unit | string>();
 
   // Skin
-  override readonly size = input<'medium' | 'large'>('large');
+  override readonly size = input<'small' | 'medium' | 'large'>('large');
 
   // Unit
   readonly unitPosition = input<'previous' | 'after'>('after');

libs/ui/src/lib/ui/chip/chip/chip.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
 import { theming } from '../../../styles';
+import { chipColor } from '../entities/chip.model';
 import { PiBaseChipComponent } from '../base-chip.component';
 import { NgIf } from '@angular/common';
 import { MatIcon } from '@angular/material/icon';
@@ -29,5 +30,5 @@ export class PiChipComponent extends PiBaseChipComponent {
 
   // Skin
   readonly appearance = input<'outline' | 'fill'>('outline');
-  override readonly color = input<theming>('primary');
+  override readonly color = input<chipColor | undefined>('primary');
 }

libs/ui/src/lib/ui/list-item/list-item/list-item.component.ts

@@ -90,7 +90,7 @@ export class PiListItemComponent {
     return color ? `pi-color__${color}` : '';
   }
 
-  protected get maxWidthClass(): string {
+  protected get maxWidthClass(): string | false {
     const maxWidth = this.maxWidth();
     return maxWidth !== 'full' && `pi-list-item__max-width--${maxWidth}`;
   }

libs/ui/src/lib/ui/modal/modal/modal.component.ts

@@ -73,7 +73,7 @@ export class PiModalComponent {
     return this.data as CustomModalData;
   }
 
-  get buttonColorClass(): string {
+  get buttonColorClass(): string | null {
     return this.buttonColor ? `pi-button pi-color__${this.buttonColor}` : null;
   }
 

libs/ui/src/lib/ui/note/note/note.component.ts

@@ -105,7 +105,7 @@ export class PiNoteComponent implements OnInit {
     this.noteStatus = this.getNoteStatus();
   }
 
-  getNoteStatus(): NoteStatus {
+  getNoteStatus(): NoteStatus | undefined {
     const noteStatusOptions = this.noteDataService.getNoteStatusData();
     return noteStatusOptions.find((noteStatus) => this.status() === noteStatus.statusType);
   }

libs/ui/src/lib/ui/paginator/paginator/paginator.component.ts

@@ -24,7 +24,7 @@ export class PiPaginatorComponent implements OnInit {
   readonly totalPages = input.required<number>();
   readonly isDisabled = input.required<boolean>();
 
-  readonly changePage = output();
+  readonly changePage = output<number>();
 
   firstPages!: number[];
 
@@ -101,7 +101,7 @@ export class PiPaginatorComponent implements OnInit {
     if (!this.isDisabled()) {
       this.firstPagesRange = this.firstPagesRange + 3;
       this.firstPages = this.incrementPaginatorRangeBy(3);
-      this.currentPage = this.firstPages[0];
+      this.currentPage.set(this.firstPages[0]);
       this.changePage.emit(this.currentPage());
     }
   }

libs/ui/src/lib/ui/panel/base-panel.component.ts

@@ -98,7 +98,7 @@ export abstract class PiBasePanelComponent implements OnInit {
     return paddingValue ? `pi-panel__padding--${paddingValue}` : '';
   }
 
-  protected get gridClass(): string {
+  protected get gridClass(): string | false {
     const grid = this.grid();
     return grid && `pi-panel__grid--${grid}`;
   }

libs/ui/src/lib/ui/select/base-select.component.ts

@@ -280,7 +280,7 @@ export class PiBaseSelectComponent extends PiFormControl {
   /**
    * Manage the Select & Select Multiple appearance property
    */
-  protected get appearanceClass(): string | undefined {
+  protected get appearanceClass(): string | false | undefined {
     const appearance = this.appearance();
     return (
       this.menuType() !== 'custom-grid' &&

libs/ui/src/lib/ui/select/select-period/select-period.component.ts

@@ -93,8 +93,6 @@ export class PiSelectPeriodComponent extends PiBaseSelectComponent implements Af
     }
   }
 
-  override readonly type = input<'dropdown'>();
-  override readonly menuType = input<'flex-wrap'>();
 
   /**
    * Component's constructor. Initializes the component with required services.

libs/ui/src/lib/ui/text/text-viewer-link/text-viewer-link.component.ts

@@ -39,7 +39,6 @@ export class PiTextViewerLinkComponent extends PiBaseTextViewerComponent {
   readonly target = input('_self');
   readonly queryParams = input<Params>();
 
-  override readonly color = input.required<'primary' | 'accent' | 'white' | 'highlighted' | 'grey' | undefined>();
 
   // Skin
   override readonly alignment = input<alignment>('center');

libs/ui/src/lib/ui/wrapper/directives/grid-wrapper.directive.ts

@@ -26,7 +26,7 @@ export abstract class PiBaseGridWrapper {
     return gap && `pi-wrapper__gap--${gap}`;
   }
 
-  protected get fillClass(): string | undefined {
+  protected get fillClass(): string | false | undefined {
     const fill = this.fill();
     return fill !== 'fit-content' && `pi-wrapper__fill--${fill}`;
   }

libs/ui/src/lib/ui/wrapper/main/main.wrapper.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, Directive, HostBinding, input } from '@angular/core';
 import { WrapperTypeClass } from '../../../styles';
+import { gap } from '../../../styles';
 import { PiBaseWrapper } from '../base.wrapper';
 
 @Directive()
@@ -49,5 +50,5 @@ export class PiMainWrapper extends PiBaseWrapper {
   readonly isCentered = input(false);
   readonly type = input<'' | 'document'>('');
 
-  override readonly gap = input<'s' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'>('xxl');
+  override readonly gap = input<gap>('xxl');
 }

libs/ui/src/lib/util/device-configs/application/device-configs.facade.ts

@@ -1,5 +1,5 @@
 // Angular
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 // Ngrx
 import { Store } from '@ngrx/store';
@@ -15,6 +15,10 @@ import * as fromSelectors from '../state/device-configs.selectors';
 
 @Injectable({ providedIn: 'root' })
 export class DeviceConfigsFacade {
+  // `inject()` en vez de parámetro de constructor: los inicializadores de
+  // propiedad de abajo se evalúan antes que los parámetros del constructor.
+  private readonly store = inject<Store<fromState.DeviceConfigsState>>(Store);
+
   // Device
   readonly device$: Observable<Device> = this.store.select(fromSelectors.getDevice);
   readonly size$: Observable<Size> = this.store.select(fromSelectors.getSize);
@@ -23,8 +27,6 @@ export class DeviceConfigsFacade {
   // Browser
   readonly browser$: Observable<Browser> = this.store.select(fromSelectors.getBrowser);
 
-  constructor(private store: Store<fromState.DeviceConfigsState>) {}
-
   getBrowser(): void {
     this.store.dispatch(fromActions.BrowserActions.getBrowser());
   }

libs/ui/src/lib/util/list-configs/application/list-configs.facade.ts

@@ -1,5 +1,5 @@
 // Angular
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 // Ngrx
 import { Store } from '@ngrx/store';
@@ -14,9 +14,11 @@ import * as fromState from '../state/list-configs.reducer';
 
 @Injectable({ providedIn: 'root' })
 export class ListConfigsFacade {
-  readonly mode$: Observable<fromState.ListMode> = this.store.select(fromSelectors.getListMode);
+  // `inject()` en vez de parámetro de constructor: los inicializadores de
+  // propiedad de abajo se evalúan antes que los parámetros del constructor.
+  private readonly store = inject<Store<fromState.ListConfigsState>>(Store);
 
-  constructor(private store: Store<fromState.ListConfigsState>) {}
+  readonly mode$: Observable<fromState.ListMode> = this.store.select(fromSelectors.getListMode);
 
   setListMode(payload: fromState.ListMode): void {
     this.store.dispatch(fromActions.setListMode({ payload }));

libs/ui/src/lib/util/loaders/aplication/loader.facade.ts

@@ -1,5 +1,5 @@
 // Angular
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 
 // RxJS
 import { Observable, Subscribable } from 'rxjs';
@@ -13,10 +13,12 @@ import * as LoaderActions from '../state/loader.actions';
 
 @Injectable()
 export class LoaderFacade {
-  loader$: Observable<boolean> = this.store.pipe(select(LoaderSelectors.getLoader));
-  showLoader$: Observable<unknown> | Subscribable<unknown> | Promise<unknown>;
+  // `inject()` en vez de parámetro de constructor: los inicializadores de
+  // propiedad de abajo se evalúan antes que los parámetros del constructor.
+  private readonly store = inject(Store);
 
-  constructor(private store: Store) {}
+  loader$: Observable<boolean> = this.store.pipe(select(LoaderSelectors.getLoader));
+  showLoader$?: Observable<unknown> | Subscribable<unknown> | Promise<unknown>;
 
   showLoader() {
     this.store.dispatch(LoaderActions.showLoader());