crdx-components 1.0.0 → 2.0.0

package/src/lib/components/button/button.html

@@ -1,187 +0,0 @@
-@switch (variant()) {
-  @case ('filled') {
-    <button
-      mat-flat-button
-      class="lib-mat-btn"
-      [attr.type]="type()"
-      [disabled]="disabled()"
-      [ngClass]="classes()"
-      [attr.aria-pressed]="toggle() ? selected() : null"
-      (pointerdown)="onPressStart()"
-      (pointerup)="onPressEnd()"
-      (pointerleave)="onPressCancel()"
-      (pointercancel)="onPressCancel()"
-      (keydown)="onKeyDown($event)"
-      (keyup)="onKeyUp()"
-      (blur)="onPressEnd()"
-    >
-      @if (hasInputContent()) {
-        @if (iconPosition() === 'leading' && icon()) {
-          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
-        }
-        @if (label()) {
-          <span [class]="labelClass()">{{ label() }}</span>
-        }
-        @if (iconPosition() === 'trailing' && icon()) {
-          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
-        }
-      } @else {
-        <ng-content></ng-content>
-      }
-    </button>
-  }
-  @case ('outlined') {
-    <button
-      mat-stroked-button
-      class="lib-mat-btn"
-      [attr.type]="type()"
-      [disabled]="disabled()"
-      [ngClass]="classes()"
-      [attr.aria-pressed]="toggle() ? selected() : null"
-      (pointerdown)="onPressStart()"
-      (pointerup)="onPressEnd()"
-      (pointerleave)="onPressCancel()"
-      (pointercancel)="onPressCancel()"
-      (keydown)="onKeyDown($event)"
-      (keyup)="onKeyUp()"
-      (blur)="onPressEnd()"
-    >
-      @if (hasInputContent()) {
-        @if (iconPosition() === 'leading' && icon()) {
-          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
-        }
-        @if (label()) {
-          <span [class]="labelClass()">{{ label() }}</span>
-        }
-        @if (iconPosition() === 'trailing' && icon()) {
-          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
-        }
-      } @else {
-        <ng-content></ng-content>
-      }
-    </button>
-  }
-  @case ('tonal') {
-    <button
-      matButton
-      appearance="tonal"
-      class="lib-mat-btn lib-mat-btn--variant-tonal"
-      [attr.type]="type()"
-      [disabled]="disabled()"
-      [ngClass]="classes()"
-      [attr.aria-pressed]="toggle() ? selected() : null"
-      (pointerdown)="onPressStart()"
-      (pointerup)="onPressEnd()"
-      (pointerleave)="onPressCancel()"
-      (pointercancel)="onPressCancel()"
-      (keydown)="onKeyDown($event)"
-      (keyup)="onKeyUp()"
-      (blur)="onPressEnd()"
-    >
-      @if (hasInputContent()) {
-        @if (iconPosition() === 'leading' && icon()) {
-          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
-        }
-        @if (label()) {
-          <span [class]="labelClass()">{{ label() }}</span>
-        }
-        @if (iconPosition() === 'trailing' && icon()) {
-          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
-        }
-      } @else {
-        <ng-content></ng-content>
-      }
-    </button>
-  }
-  @case ('text') {
-    <button
-      mat-button
-      class="lib-mat-btn"
-      [attr.type]="type()"
-      [disabled]="disabled()"
-      [ngClass]="classes()"
-      (pointerdown)="onPressStart()"
-      (pointerup)="onPressEnd()"
-      (pointerleave)="onPressCancel()"
-      (pointercancel)="onPressCancel()"
-      (keydown)="onKeyDown($event)"
-      (keyup)="onKeyUp()"
-      (blur)="onPressEnd()"
-    >
-      @if (hasInputContent()) {
-        @if (iconPosition() === 'leading' && icon()) {
-          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
-        }
-        @if (label()) {
-          <span [class]="labelClass()">{{ label() }}</span>
-        }
-        @if (iconPosition() === 'trailing' && icon()) {
-          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
-        }
-      } @else {
-        <ng-content></ng-content>
-      }
-    </button>
-  }
-  @case ('elevated') {
-    <button
-      mat-raised-button
-      class="lib-mat-btn"
-      [attr.type]="type()"
-      [disabled]="disabled()"
-      [ngClass]="classes()"
-      [attr.aria-pressed]="toggle() ? selected() : null"
-      (pointerdown)="onPressStart()"
-      (pointerup)="onPressEnd()"
-      (pointerleave)="onPressCancel()"
-      (pointercancel)="onPressCancel()"
-      (keydown)="onKeyDown($event)"
-      (keyup)="onKeyUp()"
-      (blur)="onPressEnd()"
-    >
-      @if (hasInputContent()) {
-        @if (iconPosition() === 'leading' && icon()) {
-          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
-        }
-        @if (label()) {
-          <span [class]="labelClass()">{{ label() }}</span>
-        }
-        @if (iconPosition() === 'trailing' && icon()) {
-          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
-        }
-      } @else {
-        <ng-content></ng-content>
-      }
-    </button>
-  }
-  @default {
-    <button
-      mat-flat-button
-      class="lib-mat-btn"
-      [attr.type]="type()"
-      [disabled]="disabled()"
-      [ngClass]="classes()"
-      (pointerdown)="onPressStart()"
-      (pointerup)="onPressEnd()"
-      (pointerleave)="onPressCancel()"
-      (pointercancel)="onPressCancel()"
-      (keydown)="onKeyDown($event)"
-      (keyup)="onKeyUp()"
-      (blur)="onPressEnd()"
-    >
-      @if (hasInputContent()) {
-        @if (iconPosition() === 'leading' && icon()) {
-          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
-        }
-        @if (label()) {
-          <span [class]="labelClass()">{{ label() }}</span>
-        }
-        @if (iconPosition() === 'trailing' && icon()) {
-          <mat-icon [svgIcon]="icon()">{{ icon() }}</mat-icon>
-        }
-      } @else {
-        <ng-content></ng-content>
-      }
-    </button>
-  }
-}

package/src/lib/components/button/button.ts

@@ -1,103 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  signal,
-} from '@angular/core';
-import { NgClass } from '@angular/common';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-
-export type LibButtonSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-
-export type LibButtonVariant = 'filled' | 'outlined' | 'tonal' | 'text' | 'elevated';
-
-export type LibButtonShape = 'round' | 'square';
-
-export type LibButtonIconPosition = 'leading' | 'trailing';
-
-export type LibButtonContentAlign = 'start' | 'center' | 'end';
-
-@Component({
-  selector: 'lib-button',
-  standalone: true,
-  imports: [MatButtonModule, MatIconModule, NgClass],
-  templateUrl: './button.html',
-  styleUrl: './button.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    '[class.lib-mat-btn-host--full]': 'fullWidth()',
-  },
-})
-export class LibButtonComponent {
-  size = input<LibButtonSize>('medium');
-  disabled = input(false);
-  type = input<'button' | 'submit' | 'reset'>('button');
-  fullWidth = input(false);
-  variant = input<LibButtonVariant>('filled');
-  shape = input<LibButtonShape>('round');
-  toggle = input(false);
-  selected = input(false);
-  label = input<string>('');
-  icon = input<string>('');
-  iconPosition = input<LibButtonIconPosition>('leading');
-  contentAlign = input<LibButtonContentAlign>('center');
-  labelClass = input<string>('');
-  pressed = input<boolean>(false);
-  debugPadding = input<boolean>(false);
-  readonly isPressed = signal(false);
-
-  /** Si hay label o icon por input, se usa contenido interno; si no, ng-content. */
-  readonly hasInputContent = computed(
-    () => this.label().length > 0 || this.icon().length > 0
-  );
-
-  /** contentAlign ya es 'start' | 'center' | 'end'; se usa directo para las clases CSS. */
-  private readonly contentAlignNormalized = computed(() => this.contentAlign());
-
-  readonly classes = computed(() => ({
-    'lib-mat-btn': true,
-    'lib-mat-btn--xsmall': this.size() === 'xsmall',
-    'lib-mat-btn--small': this.size() === 'small',
-    'lib-mat-btn--medium': this.size() === 'medium',
-    'lib-mat-btn--large': this.size() === 'large',
-    'lib-mat-btn--xlarge': this.size() === 'xlarge',
-    'lib-mat-btn--full': this.fullWidth(),
-    'lib-mat-btn--variant-filled': this.variant() === 'filled',
-    'lib-mat-btn--variant-outlined': this.variant() === 'outlined',
-    'lib-mat-btn--variant-tonal': this.variant() === 'tonal',
-    'lib-mat-btn--variant-text': this.variant() === 'text',
-    'lib-mat-btn--variant-elevated': this.variant() === 'elevated',
-    'lib-mat-btn--shape-round': this.shape() === 'round',
-    'lib-mat-btn--shape-square': this.shape() === 'square',
-    'lib-mat-btn--toggle': this.toggle(),
-    'lib-mat-btn--selected': this.toggle() && this.selected(),
-    'lib-mat-btn--pressed': this.isPressed() || this.pressed(),
-    'lib-mat-btn--debug-padding': this.debugPadding(),
-    'lib-mat-btn--align-start': this.contentAlignNormalized() === 'start',
-    'lib-mat-btn--align-center': this.contentAlignNormalized() === 'center',
-    'lib-mat-btn--align-end': this.contentAlignNormalized() === 'end',
-  }));
-
-  onPressStart(): void {
-    if (!this.disabled()) this.isPressed.set(true);
-  }
-
-  onPressEnd(): void {
-    this.isPressed.set(false);
-  }
-
-  onPressCancel(): void {
-    this.isPressed.set(false);
-  }
-
-  onKeyDown(event: KeyboardEvent): void {
-    if (this.disabled()) return;
-    if (event.code === 'Space' || event.code === 'Enter') this.isPressed.set(true);
-  }
-
-  onKeyUp(): void {
-    this.isPressed.set(false);
-  }
-}

package/src/lib/components/card/card.css

@@ -1,285 +0,0 @@
-:host {
-  display: block;
-}
-
-:host(.lib-card-host--full-width) {
-  width: 100%;
-  min-width: 0;
-}
-
-.ui-card {
-  display: flex;
-  align-items: stretch;
-  overflow: hidden;
-  border-radius: calc(var(--app-cards-outlined-enabled-container-outlined-card-container-shape, 12) * 1px);
-  color: var(--app-pallete-scheme-surface-on-surface, #181c1e);
-  box-sizing: border-box;
-  cursor: pointer;
-  transition: box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
-  position: relative;
-  isolation: isolate;
-}
-
-.ui-card:focus-visible {
-  outline: none;
-}
-
-.ui-card:focus-visible .ui-card__focus-indicator {
-  display: block;
-}
-
-.ui-card--outlined {
-  border: 0;
-  outline: calc(var(--app-cards-outlined-enabled-outline-outlined-card-outline-width, 1) * 1px) solid
-    var(--app-cards-outlined-enabled-outline-outlined-card-outline-color, #c3c7c9);
-  outline-offset: -1px;
-  background: var(--app-cards-outlined-enabled-container-outlined-card-container-color, #f7fafc);
-}
-
-.ui-card--elevated {
-  border: 0;
-  background: var(--app-cards-elevated-enabled-container-elevated-card-container-color, #f1f4f6);
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
-}
-
-.ui-card--filled {
-  border: 0;
-  background: var(--app-cards-filled-enabled-container-filled-card-container-color, #e0e3e5);
-}
-
-.ui-card--active {
-  outline-color: var(--app-pallete-scheme-surface-outline-variant, #d4d7db);
-  background: var(--app-pallete-scheme-surface-outline-variant, #d4d7db);
-}
-
-.ui-card--disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
-.ui-card__content {
-  flex: 1 1 auto;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 16px;
-  position: relative;
-  z-index: 2;
-}
-
-.ui-card__avatar {
-  width: 2.5rem;
-  height: 2.5rem;
-  flex: 0 0 auto;
-  border-radius: 100px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--app-pallete-scheme-primary-primary, #e42313);
-  color: var(--app-pallete-scheme-primary-on-primary, #fff);
-  font-family: var(--app-typescale-title-medium-font, Heebo), sans-serif;
-  font-size: 1rem;
-  font-weight: 500;
-  line-height: 1.5rem;
-  letter-spacing: 0.00625rem;
-}
-
-.ui-card__leading {
-  width: 2.5rem;
-  height: 2.5rem;
-  flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ui-card__leading--icon img,
-.ui-card__leading--icon svg {
-  width: 2.08331rem;
-  height: 2.08331rem;
-  display: block;
-}
-
-.ui-card__leading--icon svg {
-  fill: currentColor;
-}
-
-.ui-card__text {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  min-width: 0;
-  color: inherit;
-}
-
-.ui-card__title,
-.ui-card__subhead {
-  margin: 0;
-}
-
-.ui-card__title {
-  font-family: var(--app-typescale-title-medium-font, Heebo), sans-serif;
-  font-size: calc(var(--app-typescale-title-medium-size, 16) * 1px);
-  font-weight: var(--app-typescale-title-medium-weight, 500);
-  line-height: calc(var(--app-typescale-title-medium-line-height, 24) * 1px);
-  letter-spacing: calc(var(--app-typescale-title-medium-tracking, 0.15) * 1px);
-}
-
-.ui-card--title-emphasized .ui-card__title {
-  font-weight: var(--app-typescale-title-medium-weight-emphasized, 700);
-}
-
-.ui-card__subhead {
-  font-family: var(--app-typescale-body-medium-font, Heebo), sans-serif;
-  font-size: calc(var(--app-typescale-body-medium-size, 14) * 1px);
-  font-weight: var(--app-typescale-body-medium-weight, 400);
-  line-height: calc(var(--app-typescale-body-medium-line-height, 20) * 1px);
-  letter-spacing: calc(var(--app-typescale-body-medium-tracking, 0.25) * 1px);
-}
-
-.ui-card__media {
-  width: 5rem;
-  flex: 0 0 5rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-left: 1px solid var(--app-pallete-scheme-surface-outline-variant, #c3c7c9);
-  background: var(--app-schemes-surface-container-high, #ebe7e7);
-  position: relative;
-  z-index: 2;
-}
-
-.ui-card__media img,
-.ui-card__media svg {
-  width: 2.08331rem;
-  height: 2.08331rem;
-  display: block;
-}
-
-.ui-card__media svg {
-  fill: var(--app-schemes-outline, #b5b5b5);
-}
-
-.ui-card__media--empty {
-  opacity: 0.45;
-}
-
-.ui-card__state-layer {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 1;
-  opacity: 0;
-  background: transparent;
-}
-
-.ui-card__focus-indicator {
-  display: none;
-  position: absolute;
-  inset: -3px;
-  border-radius: 14px;
-  border: 3px solid var(--app-cards-outlined-focused-focus-indicator-outlined-card-focus-indicator-color, #5b5f61);
-  pointer-events: none;
-  z-index: 3;
-}
-
-.ui-card--state-focused .ui-card__focus-indicator {
-  display: block;
-}
-
-.ui-card--state-hovered .ui-card__state-layer,
-.ui-card:hover .ui-card__state-layer {
-  opacity: 1;
-}
-
-.ui-card--state-focused .ui-card__state-layer,
-.ui-card--state-pressed .ui-card__state-layer,
-.ui-card--state-dragged .ui-card__state-layer {
-  opacity: 1;
-}
-
-.ui-card--outlined.ui-card--state-hovered,
-.ui-card--outlined:hover {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
-}
-
-.ui-card--outlined.ui-card--state-dragged {
-  box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
-}
-
-.ui-card--elevated.ui-card--state-hovered,
-.ui-card--elevated:hover {
-  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
-}
-
-.ui-card--elevated.ui-card--state-pressed {
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
-}
-
-.ui-card--elevated.ui-card--state-dragged {
-  box-shadow: 0 6px 10px 4px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.3);
-}
-
-.ui-card--filled.ui-card--state-hovered {
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
-}
-
-.ui-card--filled.ui-card--state-dragged {
-  box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
-}
-
-.ui-card--outlined.ui-card--state-hovered .ui-card__state-layer,
-.ui-card--outlined:hover .ui-card__state-layer {
-  background: rgba(24, 28, 30, 0.08);
-}
-
-.ui-card--outlined.ui-card--state-focused .ui-card__state-layer {
-  background: rgba(24, 28, 30, 0.1);
-}
-
-.ui-card--outlined.ui-card--state-pressed .ui-card__state-layer {
-  background: rgba(24, 28, 30, 0.1);
-}
-
-.ui-card--outlined.ui-card--state-dragged .ui-card__state-layer {
-  background: rgba(24, 28, 30, 0.16);
-}
-
-.ui-card--elevated.ui-card--state-hovered .ui-card__state-layer,
-.ui-card--elevated:hover .ui-card__state-layer {
-  background: rgba(24, 28, 30, 0.08);
-}
-
-.ui-card--elevated.ui-card--state-focused .ui-card__state-layer {
-  background: rgba(24, 28, 30, 0.1);
-}
-
-.ui-card--elevated.ui-card--state-pressed .ui-card__state-layer {
-  background: rgba(24, 28, 30, 0.1);
-}
-
-.ui-card--elevated.ui-card--state-dragged .ui-card__state-layer {
-  background: rgba(24, 28, 30, 0.16);
-}
-
-.ui-card--filled.ui-card--state-hovered .ui-card__state-layer,
-.ui-card--filled:hover .ui-card__state-layer {
-  background: rgba(24, 28, 30, 0.08);
-}
-
-.ui-card--filled.ui-card--state-focused .ui-card__state-layer {
-  background: rgba(24, 28, 30, 0.1);
-}
-
-.ui-card--filled.ui-card--state-pressed .ui-card__state-layer {
-  background: rgba(24, 28, 30, 0.1);
-}
-
-.ui-card--filled.ui-card--state-dragged .ui-card__state-layer {
-  background: rgba(24, 28, 30, 0.16);
-}
-
-.ui-card--disabled .ui-card__state-layer {
-  display: none;
-}

package/src/lib/components/card/card.html

@@ -1,69 +0,0 @@
-<div
-  [ngClass]="classes()"
-  [style.width]="fullWidth() ? '100%' : width()"
-  [style.min-width]="fullWidth() ? '0rem' : width()"
-  [style.height]="height()"
-  [style.min-height]="height()"
-  [attr.aria-disabled]="disabled()"
-  role="button"
-  tabindex="0"
-  (click)="onCardClick()"
-  (keydown)="onCardKeydown($event)"
->
-  <div class="ui-card__content">
-    @if (leadingKind() === 'icon') {
-      <div
-        class="ui-card__leading ui-card__leading--icon"
-        aria-hidden="true"
-        [style.width]="leadingContainerSize()"
-        [style.height]="leadingContainerSize()"
-      >
-        @if (hasLeadingIcon()) {
-          @if (isLeadingImage()) {
-            <img [src]="leadingIcon()" alt="" [style.width]="leadingIconSize()" [style.height]="leadingIconSize()" />
-          } @else {
-            <svg
-              viewBox="0 0 24 24"
-              [style.width]="leadingIconSize()"
-              [style.height]="leadingIconSize()"
-            >
-              <g [innerHTML]="leadingIcon()"></g>
-            </svg>
-          }
-        } @else {
-          <span>{{ initial() }}</span>
-        }
-      </div>
-    } @else {
-      <div class="ui-card__avatar" aria-hidden="true">
-        {{ initial() }}
-      </div>
-    }
-
-    <div class="ui-card__text">
-      <p class="ui-card__title">{{ title() }}</p>
-      @if (subhead()) {
-        <p class="ui-card__subhead">{{ subhead() }}</p>
-      }
-    </div>
-  </div>
-
-  @if (showMedia()) {
-    <div class="ui-card__media" [class.ui-card__media--empty]="!hasMedia()">
-      @if (hasMedia()) {
-        @if (isMediaImage()) {
-          <img [src]="mediaIcon()" [alt]="mediaAlt()" />
-        } @else {
-          <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
-            <g [innerHTML]="mediaIcon()"></g>
-          </svg>
-        }
-      }
-    </div>
-  }
-
-  <span class="ui-card__state-layer" aria-hidden="true"></span>
-  @if (state() === 'focused') {
-    <span class="ui-card__focus-indicator" aria-hidden="true"></span>
-  }
-</div>