crdx-components 1.0.0 → 2.0.0

package/src/lib/components/form-field/text-field.ts

@@ -1,102 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, effect, input, output } from '@angular/core';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldAppearance, MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatIconModule } from '@angular/material/icon';
-
-type LibTextFieldAppearance = MatFormFieldAppearance | 'outlined' | 'filled';
-
-@Component({
-  selector: 'lib-text-field',
-  standalone: true,
-  imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule, MatIconModule],
-  templateUrl: './text-field.html',
-  styleUrl: './text-field.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class LibTextFieldComponent {
-  private disabledAppliedByInput = false;
-
-  readonly label = input.required<string>();
-  readonly control = input.required<FormControl>();
-  readonly appearance = input<LibTextFieldAppearance>('outline');
-  /**
-   * @deprecated Use `appearance`. Kept for compatibility.
-   */
-  readonly apperance = input<LibTextFieldAppearance | null>(null);
-  readonly suffixIcon = input<string>('');
-  readonly suffixTextIcon = input<string>('');
-  readonly prefixIcon = input<string>('');
-  readonly prefixIconSrc = input<string>('');
-  /**
-   * @deprecated Use `prefixIcon`. Kept for compatibility.
-   */
-  readonly preffixIcon = input<string | null>(null);
-  readonly error = input<string | null>(null);
-  readonly errorState = input<boolean | null>(null);
-  readonly hint = input<string>('');
-  readonly suffixEvent = output<void>();
-  readonly showSuffix = input(false, { transform: coerceBooleanProperty });
-  readonly suffixIconBand = input(false, { transform: coerceBooleanProperty });
-  readonly placeholder = input<string>('');
-  readonly autocomplete = input<string>('off');
-  readonly fullWidth = input(false, { transform: coerceBooleanProperty });
-  readonly width = input<string | null, string | number | null>(null, {
-    transform: (value) => {
-      if (value == null || value === '') {
-        return null;
-      }
-      return typeof value === 'number' ? `${value}px` : String(value);
-    },
-  });
-  readonly disabled = input(false, { transform: coerceBooleanProperty });
-  readonly type = input<string>('text');
-  readonly hideRequiredMarker = input(false, { transform: coerceBooleanProperty });
-
-  readonly resolvedAppearance = computed<MatFormFieldAppearance>(() => {
-    const raw = this.apperance() ?? this.appearance();
-    if (raw === 'outlined') return 'outline';
-    if (raw === 'filled') return 'fill';
-    return raw;
-  });
-  readonly resolvedPrefixIcon = computed(() => this.preffixIcon() ?? this.prefixIcon());
-  readonly widthStyle = computed(() => (this.fullWidth() ? '100%' : this.width()));
-  readonly shouldShowSuffix = computed(
-    () => this.showSuffix() || (this.suffixIconBand() && (!!this.suffixIcon() || !!this.suffixTextIcon()))
-  );
-  readonly shouldShowError = computed(() => {
-    const forcedError = this.errorState();
-    if (forcedError !== null) {
-      return forcedError;
-    }
-
-    const control = this.control();
-    return control.invalid && (control.dirty || control.touched);
-  });
-
-  constructor() {
-    effect(() => {
-      const control = this.control();
-      const shouldDisable = this.disabled();
-
-      if (shouldDisable) {
-        if (control.enabled) {
-          control.disable({ emitEvent: false });
-        }
-        this.disabledAppliedByInput = true;
-        return;
-      }
-
-      if (this.disabledAppliedByInput && control.disabled) {
-        control.enable({ emitEvent: false });
-      }
-
-      this.disabledAppliedByInput = false;
-    });
-  }
-
-  pressSuffixEvent(): void {
-    this.suffixEvent.emit();
-  }
-}

package/src/lib/components/header/header.css

@@ -1,142 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-  --bars-common-app-bar-brand-width: 47;
-  --bars-common-app-bar-brand-height: 25;
-}
-
-.app-bar {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  width: 100%;
-  flex-shrink: 0;
-  align-self: stretch;
-  height: calc(var(--bars-size-small-app-bar-small-container-height, 64) * 1px);
-  padding: 0.5rem calc(var(--bars-common-app-bar-right-padding, 4) * 1px) 0.5rem calc(var(--bars-common-app-bar-left-padding, 4) * 1px);
-  background-color: var(--bars-common-app-bar-container-color, #ebeef0);
-  border-radius: calc(var(--bars-common-app-bar-container-shape, 0) * 1px);
-  box-sizing: border-box;
-  column-gap: calc(var(--bars-common-app-bar-icon-spacing, 0) * 1px);
-}
-
-.app-bar__leading,
-.app-bar__actions {
-  display: flex;
-  align-items: center;
-}
-
-.app-bar__leading {
-  justify-self: start;
-  width: calc(var(--bars-common-app-bar-icon-touch-target-size, 48) * 1px);
-}
-
-.app-bar__actions {
-  justify-self: end;
-  justify-content: flex-end;
-  gap: calc(var(--bars-common-app-bar-icon-spacing, 0) * 1px);
-  min-width: calc(var(--bars-common-app-bar-icon-touch-target-size, 48) * 1px);
-}
-
-.app-bar__actions:empty {
-  min-width: 0;
-}
-
-.app-bar__brand {
-  justify-self: center;
-  position: relative;
-  width: calc(var(--bars-common-app-bar-brand-width, 47) * 1px);
-  height: calc(var(--bars-common-app-bar-brand-height, 25) * 1px);
-  aspect-ratio: 47 / 25;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-  color: var(--bars-common-app-bar-central-icon, #e42313);
-}
-
-.app-bar__brand-icon {
-  width: 100%;
-  height: 100%;
-  aspect-ratio: 47 / 25;
-  display: block;
-  object-fit: contain;
-}
-
-.app-bar__brand-icon use {
-  width: 100% !important;
-  height: 100% !important;
-}
-
-.app-bar__brand-dot {
-  position: absolute;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-}
-
-.app-bar__brand-dot--primary {
-  top: 6px;
-  left: 6px;
-}
-
-.app-bar__brand-dot--secondary {
-  top: 3px;
-  left: 16px;
-}
-
-.app-bar__brand-dot--tertiary {
-  top: 8px;
-  left: 26px;
-}
-
-.app-bar__brand-curve {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 32px;
-  height: 18px;
-  border-bottom: 4px solid var(--bars-common-app-bar-central-icon, #e42313);
-  border-right: 4px solid var(--bars-common-app-bar-central-icon, #e42313);
-  border-left: 0;
-  border-top: 0;
-  border-radius: 0 0 24px 24px;
-}
-
-.app-bar__icon-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  flex: 0 0 auto;
-  border: 0;
-  border-radius: calc(var(--icon-buttons-size-small-icon-button-small-container-shape-round, 1000) * 1px);
-  background: transparent;
-  color: var(--bars-common-app-bar-leading-icon, #181c1e);
-  cursor: pointer;
-  transition: background-color 150ms ease, color 150ms ease;
-}
-
-.app-bar__icon-button--trailing {
-  color: var(--bars-common-app-bar-trailing-icon, #434749);
-}
-
-.app-bar__icon-button:hover,
-.app-bar__icon-button:focus-visible {
-  background-color: rgba(0, 0, 0, 0.08);
-}
-
-.app-bar__icon-button:focus-visible {
-  outline: 2px solid rgba(0, 0, 0, 0.24);
-  outline-offset: 2px;
-}
-
-.app-bar__icon {
-  font-size: calc(var(--bars-common-app-bar-icon-size, 24) * 1px);
-  width: 1em;
-  height: 1em;
-  line-height: 1;
-  display: block;
-  object-fit: contain;
-}

package/src/lib/components/header/header.html

@@ -1,36 +0,0 @@
-<header class="app-bar" role="banner">
-  <div class="app-bar__leading">
-    @if(showLeading()) {
-    <button type="button" class="app-bar__icon-button app-bar__icon-button--leading" (click)="onLeadingClick()"
-      [attr.aria-label]="leadingActionLabel()">
-      @if (leadingIconUrl(); as leadingIconSrc) {
-      <img class="app-bar__icon" [src]="leadingIconSrc" alt="" aria-hidden="true" />
-      }
-    </button>
-    }
-  </div>
-  <div class="app-bar__brand" role="img" [attr.aria-label]="brandLabel()">
-    <svg xmlns="http://www.w3.org/2000/svg" width="47" height="25" viewBox="0 0 47 25" fill="none">
-      <path
-        d="M34.0017 2.67521e-05C30.6579 -0.00672338 27.4427 1.26417 25.0377 3.54336C22.6327 5.82255 21.2268 8.93092 21.1179 12.2097C21.1179 12.3304 21.0564 12.5274 21.0564 12.6959C21.0564 14.8068 20.2017 16.8311 18.6803 18.3237C17.1589 19.8163 15.0955 20.6548 12.9439 20.6548C10.7923 20.6548 8.72889 19.8163 7.2075 18.3237C5.68612 16.8311 4.83141 14.8068 4.83141 12.6959C4.83073 12.0678 4.57609 11.4656 4.12335 11.0214C3.67061 10.5773 3.05676 10.3274 2.4165 10.3268C2.09598 10.3218 1.77774 10.3805 1.48091 10.4992C1.18407 10.6179 0.914746 10.7943 0.689116 11.0177C0.463486 11.2411 0.286201 11.5069 0.167908 11.7992C0.0496149 12.0915 -0.00724651 12.4042 0.000738184 12.7186C0.114789 15.972 1.49612 19.0588 3.86027 21.3431C6.22441 23.6274 9.39139 24.9353 12.709 24.9977C16.0266 25.06 19.2423 23.8719 21.6939 21.678C24.1454 19.4842 25.6462 16.4516 25.8871 13.2048C25.9417 13.0487 25.9626 12.8831 25.9486 12.7186C25.9486 10.6078 26.8033 8.58341 28.3247 7.09083C29.8461 5.59826 31.9095 4.75974 34.0611 4.75974C36.2127 4.75974 38.2761 5.59826 39.7975 7.09083C41.3189 8.58341 42.1736 10.6078 42.1736 12.7186C42.1562 13.0399 42.2056 13.3613 42.3189 13.6632C42.4322 13.9651 42.607 14.2412 42.8327 14.4747C43.0583 14.7082 43.3301 14.8941 43.6313 15.0212C43.9326 15.1482 44.2571 15.2138 44.5851 15.2138C44.913 15.2138 45.2375 15.1482 45.5388 15.0212C45.8401 14.8941 46.1119 14.7082 46.3375 14.4747C46.5632 14.2412 46.738 13.9651 46.8513 13.6632C46.9646 13.3613 47.014 13.0399 46.9966 12.7186C46.99 9.34216 45.6178 6.10632 43.1814 3.72165C40.7449 1.33699 37.4433 -0.00153433 34.0017 2.67521e-05Z"
-        fill="#E42313" />
-      <path
-        d="M10.5943 6.75042C10.5937 7.32697 10.4188 7.89037 10.0918 8.36943C9.76482 8.84848 9.30041 9.22168 8.75728 9.44185C8.21414 9.66203 7.61667 9.71929 7.04037 9.60641C6.46407 9.49352 5.93482 9.21556 5.51951 8.80765C5.1042 8.39974 4.82148 7.88019 4.70708 7.31468C4.59268 6.74917 4.65174 6.16307 4.87678 5.63048C5.10183 5.09789 5.48277 4.64271 5.97145 4.32247C6.46013 4.00222 7.03461 3.8313 7.62228 3.8313C8.40773 3.84195 9.15792 4.15302 9.71305 4.69826C10.2682 5.24351 10.5844 5.97984 10.5943 6.75042Z"
-        fill="#E42313" />
-      <path
-        d="M19.3841 6.75044C19.3841 7.52375 19.0709 8.26539 18.5136 8.8122C17.9562 9.35901 17.2003 9.66621 16.412 9.66621C15.6238 9.66621 14.8678 9.35901 14.3104 8.8122C13.7531 8.26539 13.44 7.52375 13.44 6.75044C13.4347 6.36594 13.5079 5.9843 13.6554 5.62802C13.8028 5.27174 14.0215 4.94802 14.2985 4.67596C14.5755 4.4039 14.9052 4.18901 15.2682 4.04394C15.6312 3.89888 16.0201 3.82658 16.412 3.83132C17.1975 3.84196 17.9476 4.15303 18.5028 4.69828C19.0579 5.24352 19.3741 5.97985 19.3841 6.75044Z"
-        fill="#E42313" />
-    </svg>
-  </div>
-
-  <div class="app-bar__actions">
-    @for (action of trailingActions(); track trackByAction($index, action)) {
-    <button type="button" class="app-bar__icon-button app-bar__icon-button--trailing" (click)="onActionClick(action)"
-      [attr.aria-label]="action.ariaLabel">
-      @if (actionIconUrl(action); as actionIconSrc) {
-      <img class="app-bar__icon" [src]="actionIconSrc" alt="" aria-hidden="true" />
-      }
-    </button>
-    }
-  </div>
-</header>

package/src/lib/components/header/header.ts

@@ -1,101 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Output, computed, input } from '@angular/core';
-import { resolveUiIconResource, UiIconName, UI_ICON_NAMES } from '../../icons/register-icons';
-
-export interface HeaderAction {
-  icon: string;
-  ariaLabel: string;
-  id?: string;
-  iconPath?: string;
-}
-
-@Component({
-  selector: 'lib-header',
-  standalone: true,
-  imports: [],
-  templateUrl: './header.html',
-  styleUrl: './header.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class HeaderComponent {
-  readonly showLeading = input(true);
-  readonly leadingIcon = input('icon-menu');
-  readonly leadingIconPath = input<string | null>(null);
-  readonly leadingActionLabel = input('Abrir navegación');
-  readonly brandLabel = input('Credix');
-  readonly brandIcon = input('smiley');
-  readonly brandIconPath = input<string | null>(null);
-  readonly trailingActions = input<readonly HeaderAction[]>([
-    { icon: 'search', ariaLabel: 'Abrir buscador' },
-  ]);
-  readonly iconBasePath = input('assets/icons');
-
-  @Output() readonly leadingClick = new EventEmitter<void>();
-  @Output() readonly actionClick = new EventEmitter<HeaderAction>();
-
-  protected readonly iconAssetBasePath = computed(() =>
-    this.normalizeAssetBasePath(this.iconBasePath())
-  );
-
-  protected readonly leadingIconUrl = computed(() =>
-    this.resolveIconUrl(this.leadingIcon(), this.leadingIconPath())
-  );
-
-  protected readonly brandIconUrl = computed(() =>
-    this.resolveIconUrl(this.brandIcon(), this.brandIconPath())
-  );
-
-  protected onLeadingClick(): void {
-    this.leadingClick.emit();
-  }
-
-  protected onActionClick(action: HeaderAction): void {
-    this.actionClick.emit(action);
-  }
-
-  protected trackByAction(_index: number, action: HeaderAction): string {
-    return action.id ?? action.icon;
-  }
-
-  protected actionIconUrl(action: HeaderAction): string | null {
-    return this.resolveIconUrl(action.icon, action.iconPath ?? null);
-  }
-
-  private resolveIconUrl(iconName: string | null | undefined, explicitPath: string | null): string | null {
-    if (explicitPath) {
-      if (explicitPath.includes('#')) {
-        const spriteSymbol = explicitPath.split('#')[1];
-        if (spriteSymbol) {
-          const fallback = this.resolveIconUrl(spriteSymbol, null);
-          if (fallback) {
-            return fallback;
-          }
-        }
-      }
-      return explicitPath;
-    }
-
-    if (!iconName) {
-      return null;
-    }
-
-    if (KNOWN_UI_ICON_NAMES.has(iconName as UiIconName)) {
-      return resolveUiIconResource(iconName as UiIconName, {
-        basePath: this.iconAssetBasePath(),
-      });
-    }
-
-    return `${this.iconAssetBasePath()}/${iconName}.svg`;
-  }
-
-  private normalizeAssetBasePath(basePath: string | null | undefined): string {
-    const targetPath = basePath ?? 'assets/icons';
-
-    if (/^(https?:)?\/\//.test(targetPath)) {
-      return targetPath.replace(/\/$/, '');
-    }
-
-    return targetPath.replace(/\/$/, '');
-  }
-}
-
-const KNOWN_UI_ICON_NAMES = new Set<UiIconName>(UI_ICON_NAMES);