diff --git a/src/app/shared/components/icon-button/icon-button.component.scss b/src/app/shared/components/icon-button/icon-button.component.scss index ef0ba79..2c8f9eb 100644 --- a/src/app/shared/components/icon-button/icon-button.component.scss +++ b/src/app/shared/components/icon-button/icon-button.component.scss @@ -48,6 +48,17 @@ } } +.icon-btn--bordered { + width: 38px; + height: 38px; + border: 1px solid var(--border-color); + + &:hover:not(:disabled), + &:focus-visible:not(:disabled) { + border-color: currentcolor; + } +} + // Hover/Active/Focus colors (non-disabled) .icon-btn:hover:not(:disabled), .icon-btn:focus-visible:not(:disabled), diff --git a/src/app/shared/components/icon-button/icon-button.component.ts b/src/app/shared/components/icon-button/icon-button.component.ts index 4598acc..40464ee 100644 --- a/src/app/shared/components/icon-button/icon-button.component.ts +++ b/src/app/shared/components/icon-button/icon-button.component.ts @@ -22,6 +22,7 @@ export type IconButtonVariant = }) export class IconButtonComponent { readonly variant = input.required(); + readonly bordered = input(false); readonly disabled = input(false); readonly ariaLabel = input(''); readonly ariaExpanded = input(null); @@ -45,6 +46,10 @@ export class IconButtonComponent { }); protected readonly buttonClasses = computed(() => { - return ['icon-btn', `icon-btn--${this.variant()}`]; + return { + 'icon-btn': true, + [`icon-btn--${this.variant()}`]: true, + 'icon-btn--bordered': this.bordered(), + }; }); } diff --git a/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.html b/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.html index fad14ba..da697a2 100644 --- a/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.html +++ b/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.html @@ -58,6 +58,7 @@ { expect(fixture.nativeElement.querySelector('.ticket-selector__row-status')).toBeNull(); }); + it('shows the remove action as a bordered icon button', async () => { + const { fixture } = await createComponent({ + maps: [mapResponse([variant(401, 'general', 'A', '1', '1')])], + }); + + const removeButton = fixture.nativeElement.querySelector( + 'app-icon-button[ariaLabel="Eliminar entrada"] button', + ) as HTMLButtonElement | null; + + expect(removeButton?.classList.contains('icon-btn--bordered')).toBe(true); + }); + it('clears only the seat after a stock conflict when the row still has alternatives', async () => { const failed = variant(401, 'general', 'A', '1', '1'); const alternative = variant(402, 'general', 'A', '1', '2');