e1112bbd50
telegram-login: close X and lock icons (auth-gate icon reused across telegram-login and cart - same 'log in required' concept, now the same lock icon in both instead of two different hand-drawn shapes); retry/refresh icon (QR expired/error states, was duplicated). Added missing aria-label on the close button (had none). catalog-empty-state, category, subcategories, item-detail: empty-state illustrations (package/search/grid), add-to-cart icons, success/error status icons, and thumbs up/down vote icons replaced. Rating stars (item-detail, both product rating and per-review rating) now use one Star icon with a color input and a .dx-star--filled CSS class for the solid/outline toggle, instead of hand-toggling raw fill/stroke SVG attributes - fixes the same rating-star pattern being drawn two different ways (outline-only in the carousel earlier, fill-toggling here). Added color input to app-icon (was stroke-only via currentColor before) and four more icons to the registry: refresh, thumbsUp/Down, locate/mapPin (added earlier this session). Also fixed the currency-dropdown chevron in language-selector that a prior replace_all missed (same markup, different [class.rotated] binding target). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
|
|
import { LucideDynamicIcon } from '@lucide/angular';
|
|
import { APP_ICONS, type AppIconName } from './icon-registry';
|
|
|
|
/**
|
|
* Single entry point for every icon in the app. Renders a Lucide icon by
|
|
* canonical name (see icon-registry.ts) so every screen uses one icon family
|
|
* at one consistent size/stroke-width by default.
|
|
*
|
|
* Decorative by default (aria-hidden). Pass `ariaLabel` only when the icon
|
|
* itself carries meaning with no adjacent text (e.g. inside an icon-only
|
|
* button) - the label belongs on the interactive element when there is one.
|
|
*/
|
|
@Component({
|
|
selector: 'app-icon',
|
|
standalone: true,
|
|
imports: [LucideDynamicIcon],
|
|
template: `
|
|
<svg
|
|
[lucideIcon]="iconData()"
|
|
[size]="size()"
|
|
[color]="color()"
|
|
[strokeWidth]="strokeWidth()"
|
|
[title]="ariaLabel()"
|
|
></svg>
|
|
`,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
host: {
|
|
class: 'app-icon',
|
|
'[style.display]': "'inline-flex'"
|
|
}
|
|
})
|
|
export class IconComponent {
|
|
readonly name = input.required<AppIconName>();
|
|
readonly size = input<number>(20);
|
|
readonly color = input<string>('currentColor');
|
|
readonly strokeWidth = input<number>(2);
|
|
readonly ariaLabel = input<string | null>(null);
|
|
|
|
protected readonly iconData = computed(() => APP_ICONS[this.name()]);
|
|
}
|