diff --git a/alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.ts b/alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.ts index b476cb65e8a35e2bdb723d407f176d3aca923689..a534a5276d34b072c1b8edee6e95e362a5296d77 100644 --- a/alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.ts +++ b/alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.ts @@ -32,7 +32,7 @@ type TextInputVariants = VariantProps<typeof textInputVariants>; imports: [CommonModule, ErrorMessageComponent, ReactiveFormsModule, TechSharedModule], template: ` <div class="relative"> - <label [for]="id" class="text-md mb-2 block font-medium text-text"> + <label *ngIf="showLabel" [for]="id" class="text-md mb-2 block font-medium text-text"> {{ inputLabel }}<ng-container *ngIf="required"><i aria-hidden="true">*</i></ng-container> </label> <div class="mt-2"> @@ -84,6 +84,7 @@ export class TextInputComponent { @Input() required: boolean = false; @Input() withPrefix: boolean = false; @Input() withSuffix: boolean = false; + @Input() showLabel: boolean = true; @Input() set focus(value: boolean) { if (value && this.inputElement) { diff --git a/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.ts b/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.ts index b4e2dd528d8ec6f2b894b51802ec22581bd01f61..ab653fe9d22fae4f7f7faf447d5b7a5685e85342 100644 --- a/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.ts +++ b/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.ts @@ -37,7 +37,6 @@ import { InstantSearchQuery, InstantSearchResult } from './instant-search.model' template: ` <div class="relative"> <ods-search-field [placeholder]="placeholder" - [label]="label" [attr.aria-expanded]="results.length" [control]="control" aria-controls="results" @@ -70,7 +69,6 @@ import { InstantSearchQuery, InstantSearchResult } from './instant-search.model' export class InstantSearchComponent implements OnInit, OnDestroy { static readonly DEBOUNCE_TIME_IN_MILLIS: number = 300; - @Input() label: string = EMPTY_STRING; @Input() placeholder: string = EMPTY_STRING; @Input() headerText: string = EMPTY_STRING; @Input() control: FormControl<string> = new FormControl(EMPTY_STRING); diff --git a/alfa-client/libs/design-system/src/lib/instant-search/search-field/search-field.component.ts b/alfa-client/libs/design-system/src/lib/instant-search/search-field/search-field.component.ts index 2dc1f73fa4f735efa0d1fc6e18e2c4946ab383ef..787d40064fb28440d7f0b75efe9b94786dc317ad 100644 --- a/alfa-client/libs/design-system/src/lib/instant-search/search-field/search-field.component.ts +++ b/alfa-client/libs/design-system/src/lib/instant-search/search-field/search-field.component.ts @@ -11,22 +11,28 @@ import { SearchIconComponent } from '../../icons/search-icon/search-icon.compone standalone: true, imports: [CommonModule, TextInputComponent, SearchIconComponent, CloseIconComponent], template: `<ods-text-input - [label]="label" + label="instant search" [fieldControl]="control" [placeholder]="placeholder" [withPrefix]="true" [withSuffix]="true" + [showLabel]="false" (clickEmitter)="inputClicked.emit()" role="combobox" > <ods-search-icon prefix aria-hidden="true" aria-label="Suchfeld" /> - <button suffix *ngIf="control.value" (click)="clearInput()" aria-label="Eingabe löschen"> + <button + suffix + *ngIf="control.value" + (click)="clearInput()" + aria-label="Eingabe löschen" + data-test-id="clear-instant-search" + > <ods-close-icon class="fill-primary hover:fill-primary-hover" /> </button> </ods-text-input>`, }) export class SearchFieldComponent { - @Input() label: string = EMPTY_STRING; @Input() placeholder: string = EMPTY_STRING; @Input() control: FormControl<string> = new FormControl(EMPTY_STRING); diff --git a/alfa-client/libs/design-system/src/lib/instant-search/search-result-item/search-result-item.component.ts b/alfa-client/libs/design-system/src/lib/instant-search/search-result-item/search-result-item.component.ts index e02da6ddc31ea1fda0572f40be876b6a1969012b..ec65fb9ec1774751a28416ba22ae62a27895ad7c 100644 --- a/alfa-client/libs/design-system/src/lib/instant-search/search-result-item/search-result-item.component.ts +++ b/alfa-client/libs/design-system/src/lib/instant-search/search-result-item/search-result-item.component.ts @@ -17,7 +17,7 @@ import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@ data-test-id="item-button" #button > - <div class="flex flex-col items-start justify-between text-text"> + <div class="flex flex-col items-start justify-between text-start text-text"> <p class="text-base font-medium">{{ title }}</p> <p class="text-sm">{{ description }}</p> </div>