diff --git a/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang/externe-fachstelle-container/externe-fachstelle-container.component.html b/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang/externe-fachstelle-container/externe-fachstelle-container.component.html
index 620fc9b81ed43ea83b7d35f921e67c08ead4450d..f97b38f009433d90a0f84a07482faf148b615b29 100644
--- a/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang/externe-fachstelle-container/externe-fachstelle-container.component.html
+++ b/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang/externe-fachstelle-container/externe-fachstelle-container.component.html
@@ -11,9 +11,9 @@
></alfa-collaboration-request-form>
</ng-container>
<ng-template #anfrageErstellenButton>
- <div class="flex w-fit gap-3 bg-background-100 p-4 shadow-md">
+ <div class="flex w-111 justify-between bg-background-100 p-4 shadow-md">
<ods-external-unit-icon />
- <div class="flex flex-col text-base">
+ <div class="flex w-44 flex-col text-base">
<p class="text-primary">Externe Fachstelle</p>
<p class="text-text">Private Organisation,</p>
<p class="text-text">Verein, Schule</p>
diff --git a/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang/organisations-einheit-container/organisations-einheit-container.component.html b/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang/organisations-einheit-container/organisations-einheit-container.component.html
index 665224a844d665c2a601f5377df3ebcf1878522b..85b5867ac43b95ec7909eefc849be1aa28f9a0cf 100644
--- a/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang/organisations-einheit-container/organisations-einheit-container.component.html
+++ b/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang/organisations-einheit-container/organisations-einheit-container.component.html
@@ -11,9 +11,9 @@
></alfa-collaboration-request-form>
</ng-container>
<ng-template #anfrageErstellenButton>
- <div class="flex w-fit gap-3 bg-background-100 p-4 shadow-md">
+ <div class="flex w-111 justify-between bg-background-100 p-4 shadow-md">
<ods-public-administration-icon />
- <div class="flex flex-col text-base">
+ <div class="flex w-44 flex-col text-base">
<p class="text-primary">Öffentliche Verwaltung</p>
<p class="text-text">Kommune, Amt,</p>
<p class="text-text">Ministerium</p>
diff --git a/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.spec.ts b/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.spec.ts
index 72cc13e7708a00114b96193a07e83a855f0c628c..b83a6e167dbaabae7a8a6e4b6595086ff48bde93 100644
--- a/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.spec.ts
+++ b/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.spec.ts
@@ -1,12 +1,6 @@
import { Mock, mock, useFromMock } from '@alfa-client/test-utils';
import { EventEmitter } from '@angular/core';
-import {
- ComponentFixture,
- TestBed,
- discardPeriodicTasks,
- fakeAsync,
- tick,
-} from '@angular/core/testing';
+import { ComponentFixture, TestBed, discardPeriodicTasks, fakeAsync, tick } from '@angular/core/testing';
import { Resource } from '@ngxp/rest';
import { Subscription } from 'rxjs';
import { InstantSearchComponent } from './instant-search.component';
@@ -184,16 +178,13 @@ describe('InstantSearchComponent', () => {
});
describe('on null or undefined', () => {
- it.each([null, undefined])(
- 'should not call setSearchResults for %s',
- (searchResults: InstantSearchResult<Resource>[]) => {
- component.setSearchResults = jest.fn();
+ it.each([null, undefined])('should not call setSearchResults for %s', (searchResults: InstantSearchResult<Resource>[]) => {
+ component.setSearchResults = jest.fn();
- component.searchResults = searchResults;
+ component.searchResults = searchResults;
- expect(component.setSearchResults).not.toHaveBeenCalled();
- },
- );
+ expect(component.setSearchResults).not.toHaveBeenCalled();
+ });
});
});
@@ -274,11 +265,11 @@ describe('InstantSearchComponent', () => {
});
it('should call hideResults', () => {
- component.hideResults = jest.fn();
+ component.searchClosed.emit = jest.fn();
component.handleEscape(event);
- expect(component.hideResults).toHaveBeenCalled();
+ expect(component.searchClosed.emit).toHaveBeenCalled();
});
});
@@ -362,17 +353,13 @@ describe('InstantSearchComponent', () => {
it('should return text for one result', () => {
const result: string = component.buildAriaLiveText(1);
- expect(result).toBe(
- 'Ein Suchergebnis für Eingabe test. Nutze Pfeiltaste nach unten, um das zu erreichen.',
- );
+ expect(result).toBe('Ein Suchergebnis für Eingabe test. Nutze Pfeiltaste nach unten, um das zu erreichen.');
});
it('should return text for many results', () => {
const result: string = component.buildAriaLiveText(4);
- expect(result).toBe(
- '4 Suchergebnisse für Eingabe test. Nutze Pfeiltaste nach unten, um diese zu erreichen.',
- );
+ expect(result).toBe('4 Suchergebnisse für Eingabe test. Nutze Pfeiltaste nach unten, um diese zu erreichen.');
});
it('should return text for no results', () => {
@@ -396,14 +383,6 @@ describe('InstantSearchComponent', () => {
expect(component.areResultsVisible).toBe(false);
});
-
- it('should emit searchResultClosed event', () => {
- component.searchResultClosed.emit = jest.fn();
-
- component.hideResults();
-
- expect(component.searchResultClosed.emit).toHaveBeenCalled();
- });
});
describe('onKeydownHandler', () => {
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 1db3186f29f20d234199679ff3cc0c1688729cc8..8b23822f25beea96c9bdf42a52c4eba075c50b9d 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
@@ -15,7 +15,7 @@ import {
import { FormControl } from '@angular/forms';
import { Resource } from '@ngxp/rest';
import { isEqual, isUndefined } from 'lodash-es';
-import { Subscription, debounceTime, distinctUntilChanged, filter } from 'rxjs';
+import { Subscription, debounceTime, filter } from 'rxjs';
import { AriaLiveRegionComponent } from '../../aria-live-region/aria-live-region.component';
import { SearchFieldComponent } from '../search-field/search-field.component';
import { SearchResultHeaderComponent } from '../search-result-header/search-result-header.component';
@@ -74,8 +74,8 @@ export class InstantSearchComponent implements OnInit, OnDestroy {
}
}
+ @Output() searchClosed: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
@Output() searchResultSelected: EventEmitter<InstantSearchResult<Resource>> = new EventEmitter<InstantSearchResult<Resource>>();
- @Output() searchResultClosed: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
@Output() searchQueryChanged: EventEmitter<InstantSearchQuery> = new EventEmitter<InstantSearchQuery>();
@Output() searchQueryCleared: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
@@ -99,8 +99,8 @@ export class InstantSearchComponent implements OnInit, OnDestroy {
this.formControlSubscription = this.control.valueChanges
.pipe(
debounceTime(InstantSearchComponent.DEBOUNCE_TIME_IN_MILLIS),
+ filter((value) => Boolean(value)),
filter((value: string) => value.length >= this.PREVIEW_SEARCH_STRING_MIN_LENGTH),
- distinctUntilChanged(),
)
.subscribe((searchBy: string) => {
this.searchQueryChanged.emit({ searchBy });
@@ -138,6 +138,7 @@ export class InstantSearchComponent implements OnInit, OnDestroy {
handleEscape(e: KeyboardEvent): void {
e.preventDefault();
this.hideResults();
+ this.searchClosed.emit();
}
setFocusOnResultItem(index: number): void {
@@ -193,7 +194,6 @@ export class InstantSearchComponent implements OnInit, OnDestroy {
hideResults(): void {
this.areResultsVisible = false;
this.focusedResult = undefined;
- this.searchResultClosed.emit();
}
isLastItemOrOutOfArray(index: number, arrayLength: number): boolean {
diff --git a/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js b/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
index 3d33483b952c991b6d66bbf1170437c787cb80f4..c95f46b8f1d743ae68a353fa87d645f7f36edc6e 100644
--- a/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
+++ b/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
@@ -6,10 +6,7 @@ const { join } = require('path');
/** @type {import('tailwindcss').Config} */
module.exports = {
- content: [
- join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
- ...createGlobPatternsForDependencies(__dirname),
- ],
+ content: [join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'), ...createGlobPatternsForDependencies(__dirname)],
darkMode: 'class',
theme: {
extend: {
@@ -48,6 +45,9 @@ module.exports = {
maxHeight: {
120: '480px',
},
+ width: {
+ 111: '444px',
+ },
colors: {
ozgblue: {
50: 'hsl(200, 100%, 96%)',
diff --git a/alfa-client/libs/zustaendige-stelle/src/lib/search-zustaendige-stelle-dialog/search-zustaendige-stelle-form/search-zustaendige-stelle-form.component.html b/alfa-client/libs/zustaendige-stelle/src/lib/search-zustaendige-stelle-dialog/search-zustaendige-stelle-form/search-zustaendige-stelle-form.component.html
index 7252665d682c7686f3ae4b63e4cce1567edf4f9d..6c888f1981e40ff86e638086a34a92d0b6c8c1d1 100644
--- a/alfa-client/libs/zustaendige-stelle/src/lib/search-zustaendige-stelle-dialog/search-zustaendige-stelle-form/search-zustaendige-stelle-form.component.html
+++ b/alfa-client/libs/zustaendige-stelle/src/lib/search-zustaendige-stelle-dialog/search-zustaendige-stelle-form/search-zustaendige-stelle-form.component.html
@@ -7,6 +7,6 @@
(searchResultSelected)="selectSearchResult.emit($event.data)"
(searchQueryChanged)="search.emit($event.searchBy)"
(searchQueryCleared)="clearSearchResult.emit()"
- (searchResultClosed)="clearSearchResult.emit()"
+ (searchClosed)="clearSearchResult.emit()"
></ods-instant-search>
</form>