diff --git a/apps/isa-app/stories/ui/search-bar/search-bar.stories.ts b/apps/isa-app/stories/ui/search-bar/search-bar.stories.ts index 1884c0b9b..8ddb4fc73 100644 --- a/apps/isa-app/stories/ui/search-bar/search-bar.stories.ts +++ b/apps/isa-app/stories/ui/search-bar/search-bar.stories.ts @@ -43,7 +43,7 @@ const meta: Meta = { render: (args) => ({ props: { ...args, control: new FormControl(args.value) }, template: ` - + + +} diff --git a/libs/feature/return/pages/src/lib/feature-return-pages.component.css b/libs/shared/filter/src/lib/inputs/search-bar-input/search-bar-input.component.scss similarity index 100% rename from libs/feature/return/pages/src/lib/feature-return-pages.component.css rename to libs/shared/filter/src/lib/inputs/search-bar-input/search-bar-input.component.scss diff --git a/libs/shared/filter/src/lib/inputs/search-bar-input/search-bar-input.component.ts b/libs/shared/filter/src/lib/inputs/search-bar-input/search-bar-input.component.ts new file mode 100644 index 000000000..7cf0f0fc4 --- /dev/null +++ b/libs/shared/filter/src/lib/inputs/search-bar-input/search-bar-input.component.ts @@ -0,0 +1,47 @@ +import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core'; +import { UiSearchBarComponent } from '@isa/ui/search-bar'; +import { FormControl, ReactiveFormsModule } from '@angular/forms'; +import { UiIconButtonComponent } from '@isa/ui/buttons'; +import { NgIconComponent, provideIcons } from '@ng-icons/core'; +import { isaActionSearch } from '@isa/icons'; +import { FilterService, TextFilterInput } from '../../core'; +import { InputType } from '../../types'; + +@Component({ + selector: 'filter-search-bar-input', + templateUrl: './search-bar-input.component.html', + styleUrls: ['./search-bar-input.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [UiSearchBarComponent, UiIconButtonComponent, NgIconComponent, ReactiveFormsModule], + providers: [provideIcons({ isaActionSearch })], +}) +export class SearchBarInputComponent { + readonly filterService = inject(FilterService); + + control = new FormControl(); + + inputKey = input.required(); + + input = computed(() => { + const inputs = this.filterService.inputs(); + const input = inputs.find( + (input) => input.key === this.inputKey() && input.type === InputType.Text, + ) as TextFilterInput; + + if (!input) { + throw new Error(`Input not found for key: ${this.inputKey()}`); + } + + this.control.setValue(input.value); + + return input; + }); + + search = output(); + + onSearch() { + this.filterService.setInputValue(this.inputKey(), this.control.value); + this.search.emit(); + } +} diff --git a/libs/shared/filter/src/lib/types.ts b/libs/shared/filter/src/lib/types.ts new file mode 100644 index 000000000..69c255775 --- /dev/null +++ b/libs/shared/filter/src/lib/types.ts @@ -0,0 +1,194 @@ +export enum InputType { + Text = 1, + Checkbox = 2, + DateRange = 128, +} + +export interface QuerySettingsDTO { + /** + * Filter + */ + filter: Array; + + /** + * Eingabefelder + */ + input: Array; + + /** + * Sortierung + */ + orderBy: Array; +} + +export interface InputGroupDTO { + /** + * Beschreibung + */ + description?: string; + + /** + * Group / ID + */ + group: string; + + /** + * Eingabefelder + */ + input: Array; + + /** + * Label + */ + label?: string; +} + +/** + * Sortierwert + */ +export interface OrderByDTO { + /** + * Wert + */ + by?: string; + + /** + * Absteigend + */ + desc?: boolean; + + /** + * Label + */ + label?: string; +} + +/** + * Eingabeelement + */ +export interface InputDTO { + /** + * Regex-Überprüfung + */ + constraint?: string; + + /** + * Beschreibung + */ + description?: string; + + /** + * Key / ID + */ + key: string; + + /** + * Label + */ + label?: string; + + /** + * Max-Wert (optional) + */ + maxValue?: string; + + /** + * Min-Wert (optional) + */ + minValue?: string; + + /** + * Auswahl + */ + options?: InputOptionsDTO; + + /** + * Wasserzeichen + */ + placeholder?: string; + + /** + * Anwendungsziel + */ + target?: string; + + /** + * Art des Werts + */ + type: InputType; + + /** + * Wert + */ + value?: string; +} + +/** + * Auswahl + */ +export interface InputOptionsDTO { + /** + * Maximale Anzahl auswählbarer Elemente (null => alle, 1 = single select) + */ + max?: number; + + /** + * Werte + */ + values?: Array; +} + +/** + * Auswahlelement + */ +export interface OptionDTO { + /** + * Beschreibung + */ + description?: string; + + /** + * Aktiv + */ + enabled?: boolean; + + /** + * Key / ID + */ + key?: string; + + /** + * Label + */ + label?: string; + + /** + * Max-Wert (optional) + */ + maxValue?: string; + + /** + * Min-Wert (optional) + */ + minValue?: string; + + /** + * Wasserzeichen + */ + placeholder?: string; + + /** + * Ausgewählt / Default + */ + selected?: boolean; + + /** + * Wert + */ + value?: string; + + /** + * Unter-Optionen + */ + values?: Array; +} diff --git a/libs/shared/filter/src/test-setup.ts b/libs/shared/filter/src/test-setup.ts new file mode 100644 index 000000000..ea414013f --- /dev/null +++ b/libs/shared/filter/src/test-setup.ts @@ -0,0 +1,6 @@ +import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone'; + +setupZoneTestEnv({ + errorOnUnknownElements: true, + errorOnUnknownProperties: true, +}); diff --git a/libs/shared/filter/tsconfig.json b/libs/shared/filter/tsconfig.json new file mode 100644 index 000000000..fde35eab0 --- /dev/null +++ b/libs/shared/filter/tsconfig.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "target": "es2022", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ], + "extends": "../../../tsconfig.base.json", + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} diff --git a/libs/shared/filter/tsconfig.lib.json b/libs/shared/filter/tsconfig.lib.json new file mode 100644 index 000000000..9b49be758 --- /dev/null +++ b/libs/shared/filter/tsconfig.lib.json @@ -0,0 +1,17 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": [ + "src/**/*.spec.ts", + "src/test-setup.ts", + "jest.config.ts", + "src/**/*.test.ts" + ], + "include": ["src/**/*.ts"] +} diff --git a/libs/shared/filter/tsconfig.spec.json b/libs/shared/filter/tsconfig.spec.json new file mode 100644 index 000000000..f858ef78c --- /dev/null +++ b/libs/shared/filter/tsconfig.spec.json @@ -0,0 +1,16 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc", + "module": "commonjs", + "target": "es2016", + "types": ["jest", "node"] + }, + "files": ["src/test-setup.ts"], + "include": [ + "jest.config.ts", + "src/**/*.test.ts", + "src/**/*.spec.ts", + "src/**/*.d.ts" + ] +} diff --git a/libs/ui/search-bar/src/lib/search-bar.component.html b/libs/ui/search-bar/src/lib/search-bar.component.html index ff0b93d1b..83a4de24f 100644 --- a/libs/ui/search-bar/src/lib/search-bar.component.html +++ b/libs/ui/search-bar/src/lib/search-bar.component.html @@ -1,6 +1,4 @@ - - -@let control = inputControl(); +
diff --git a/libs/ui/search-bar/src/lib/search-bar.component.ts b/libs/ui/search-bar/src/lib/search-bar.component.ts index 53a6ba276..682011cc8 100644 --- a/libs/ui/search-bar/src/lib/search-bar.component.ts +++ b/libs/ui/search-bar/src/lib/search-bar.component.ts @@ -5,18 +5,14 @@ import { ElementRef, ViewEncapsulation, } from '@angular/core'; -import { isaActionClose } from '@isa/icons'; -import { NgIconComponent, provideIcons } from '@ng-icons/core'; import { NgControl } from '@angular/forms'; @Component({ selector: 'ui-search-bar', - imports: [NgIconComponent], templateUrl: './search-bar.component.html', styleUrl: './search-bar.component.scss', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, - providers: [provideIcons({ isaActionClose })], host: { '[class]': '["ui-search-bar"]', }, diff --git a/tailwind-plugins/typography.plugin.js b/tailwind-plugins/typography.plugin.js index 912278a76..71352cc97 100644 --- a/tailwind-plugins/typography.plugin.js +++ b/tailwind-plugins/typography.plugin.js @@ -1,209 +1,209 @@ -const plugin = require("tailwindcss/plugin"); +const plugin = require('tailwindcss/plugin'); module.exports = plugin(function ({ addBase, addUtilities }) { addBase({ - ".text-h1": { fontSize: "3.375rem", lineHeight: "4.5rem" }, - ".text-h2": { fontSize: "1.625rem", lineHeight: "2.25rem" }, - ".text-h3": { fontSize: "1.375rem", lineHeight: "1.75rem" }, - ".text-p1": { fontSize: "1.125rem", lineHeight: "1.5rem" }, - ".text-p2": { fontSize: "1rem", lineHeight: "1.313rem" }, - ".text-p3": { fontSize: "0.875rem", lineHeight: "1.188rem" }, - ".text-p4": { fontSize: "0.75rem", lineHeight: "1rem" }, + '.text-h1': { fontSize: '3.375rem', lineHeight: '4.5rem' }, + '.text-h2': { fontSize: '1.625rem', lineHeight: '2.25rem' }, + '.text-h3': { fontSize: '1.375rem', lineHeight: '1.75rem' }, + '.text-p1': { fontSize: '1.125rem', lineHeight: '1.5rem' }, + '.text-p2': { fontSize: '1rem', lineHeight: '1.313rem' }, + '.text-p3': { fontSize: '0.875rem', lineHeight: '1.188rem' }, + '.text-p4': { fontSize: '0.75rem', lineHeight: '1rem' }, }); addUtilities({ - ".isa-text-heading-1-bold": { - fontFamily: "Open Sans", - fontSize: "3.75rem", - fontStyle: "normal", - fontWeight: "700", - lineHeight: "4.5rem", - letterSpacing: "0.02813rem", + '.isa-text-heading-1-bold': { + fontFamily: 'Open Sans', + fontSize: '3.75rem', + fontStyle: 'normal', + fontWeight: '700', + lineHeight: '4.5rem', + letterSpacing: '0.02813rem', }, - ".isa-text-heading-2-bold": { - fontFamily: "Open Sans", - fontSize: "3rem", - fontStyle: "normal", - fontWeight: "700", - lineHeight: "4rem", + '.isa-text-heading-2-bold': { + fontFamily: 'Open Sans', + fontSize: '3rem', + fontStyle: 'normal', + fontWeight: '700', + lineHeight: '4rem', }, - ".isa-text-heading-3-bold": { - fontFamily: "Open Sans", - fontSize: "2.5rem", - fontStyle: "normal", - fontWeight: "700", - lineHeight: "3rem", + '.isa-text-heading-3-bold': { + fontFamily: 'Open Sans', + fontSize: '2.5rem', + fontStyle: 'normal', + fontWeight: '700', + lineHeight: '3rem', }, - ".isa-text-subtitle-1-regular": { - fontFamily: "Open Sans", - fontSize: "1.75rem", - fontStyle: "normal", - fontWeight: "400", - lineHeight: "2.5rem", + '.isa-text-subtitle-1-regular': { + fontFamily: 'Open Sans', + fontSize: '1.75rem', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '2.5rem', }, - ".isa-text-subtitle-1-bold": { - fontFamily: "Open Sans", - fontSize: "1.75rem", - fontStyle: "normal", - fontWeight: "700", - lineHeight: "2.5rem", + '.isa-text-subtitle-1-bold': { + fontFamily: 'Open Sans', + fontSize: '1.75rem', + fontStyle: 'normal', + fontWeight: '700', + lineHeight: '2.5rem', }, - ".isa-text-subtitle-2-bold": { - fontFamily: "Open Sans", - fontSize: "1rem", - fontStyle: "normal", - fontWeight: "700", - lineHeight: "1.5rem", - letterSpacing: "0.025rem", - textTransform: "uppercase", + '.isa-text-subtitle-2-bold': { + fontFamily: 'Open Sans', + fontSize: '1rem', + fontStyle: 'normal', + fontWeight: '700', + lineHeight: '1.5rem', + letterSpacing: '0.025rem', + textTransform: 'uppercase', }, - ".isa-text-body-1-bold": { - fontFamily: "Open Sans", - fontSize: "1rem", - fontStyle: "normal", - fontWeight: "700", - lineHeight: "1.5rem", + '.isa-text-body-1-bold': { + fontFamily: 'Open Sans', + fontSize: '1rem', + fontStyle: 'normal', + fontWeight: '700', + lineHeight: '1.5rem', }, - ".isa-text-body-1-bold-big": { - fontFamily: "Open Sans", - fontSize: "1.25rem", - fontStyle: "normal", - fontWeight: "700", - lineHeight: "1.75rem", + '.isa-text-body-1-bold-big': { + fontFamily: 'Open Sans', + fontSize: '1.25rem', + fontStyle: 'normal', + fontWeight: '700', + lineHeight: '1.75rem', }, - ".isa-text-body-1-bold-xl": { - fontFamily: "Open Sans", - fontSize: "1.375rem", - fontStyle: "normal", - fontWeight: "700", - lineHeight: "2.125rem", + '.isa-text-body-1-bold-xl': { + fontFamily: 'Open Sans', + fontSize: '1.375rem', + fontStyle: 'normal', + fontWeight: '700', + lineHeight: '2.125rem', }, - ".isa-text-body-1-semibold": { - fontFamily: "Open Sans", - fontSize: "1rem", - fontStyle: "normal", - fontWeight: "600", - lineHeight: "1.5rem", + '.isa-text-body-1-semibold': { + fontFamily: 'Open Sans', + fontSize: '1rem', + fontStyle: 'normal', + fontWeight: '600', + lineHeight: '1.5rem', }, - ".isa-text-body-1-regular": { - fontFamily: "Open Sans", - fontSize: "1rem", - fontStyle: "normal", - fontWeight: "400", - lineHeight: "1.5rem", + '.isa-text-body-1-regular': { + fontFamily: 'Open Sans', + fontSize: '1rem', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '1.5rem', }, - ".isa-text-body-1-regular-big": { - fontFamily: "Open Sans", - fontSize: "1.25rem", - fontStyle: "normal", - fontWeight: "400", - lineHeight: "1.75rem", + '.isa-text-body-1-regular-big': { + fontFamily: 'Open Sans', + fontSize: '1.25rem', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '1.75rem', }, - ".isa-text-body-1-regular-xl": { - fontFamily: "Open Sans", - fontSize: "1.375rem", - fontStyle: "normal", - fontWeight: "400", - lineHeight: "2.125rem", + '.isa-text-body-1-regular-xl': { + fontFamily: 'Open Sans', + fontSize: '1.375rem', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '2.125rem', }, - ".isa-text-body-2-bold": { - fontFamily: "Open Sans", - fontSize: "0.875rem", - fontStyle: "normal", - fontWeight: "700", - lineHeight: "1.25rem", + '.isa-text-body-2-bold': { + fontFamily: 'Open Sans', + fontSize: '0.875rem', + fontStyle: 'normal', + fontWeight: '700', + lineHeight: '1.25rem', }, - ".isa-text-body-2-bold-big": { - fontFamily: "Open Sans", - fontSize: "1.125rem", - fontStyle: "normal", - fontWeight: "700", - lineHeight: "1.625rem", + '.isa-text-body-2-bold-big': { + fontFamily: 'Open Sans', + fontSize: '1.125rem', + fontStyle: 'normal', + fontWeight: '700', + lineHeight: '1.625rem', }, - ".isa-text-body-2-bold-xl": { - fontFamily: "Open Sans", - fontSize: "1.25rem", - fontStyle: "normal", - fontWeight: "700", - lineHeight: "1.75rem", + '.isa-text-body-2-bold-xl': { + fontFamily: 'Open Sans', + fontSize: '1.25rem', + fontStyle: 'normal', + fontWeight: '700', + lineHeight: '1.75rem', }, - ".isa-text-body-2-semibold": { - fontFamily: "Open Sans", - fontSize: "0.875rem", - fontStyle: "normal", - fontWeight: "600", - lineHeight: "1.25rem", + '.isa-text-body-2-semibold': { + fontFamily: 'Open Sans', + fontSize: '0.875rem', + fontStyle: 'normal', + fontWeight: '600', + lineHeight: '1.25rem', }, - ".isa-text-body-2-regular": { - fontFamily: "Open Sans", - fontSize: "0.875rem", - fontStyle: "normal", - fontWeight: "400", - lineHeight: "1.25rem", + '.isa-text-body-2-regular': { + fontFamily: 'Open Sans', + fontSize: '0.875rem', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '1.25rem', }, - ".isa-text-body-2-regular-big": { - fontFamily: "Open Sans", - fontSize: "1.125rem", - fontStyle: "normal", - fontWeight: "400", - lineHeight: "1.625rem", + '.isa-text-body-2-regular-big': { + fontFamily: 'Open Sans', + fontSize: '1.125rem', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '1.625rem', }, - ".isa-text-body-2-regular-xl": { - fontFamily: "Open Sans", - fontSize: "1.125rem", - fontStyle: "normal", - fontWeight: "400", - lineHeight: "1.75rem", + '.isa-text-body-2-regular-xl': { + fontFamily: 'Open Sans', + fontSize: '1.125rem', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '1.75rem', }, - ".isa-text-caption-bold": { - fontFamily: "Open Sans", - fontSize: "0.75rem", - fontStyle: "normal", - fontWeight: "700", - lineHeight: "1rem", + '.isa-text-caption-bold': { + fontFamily: 'Open Sans', + fontSize: '0.75rem', + fontStyle: 'normal', + fontWeight: '700', + lineHeight: '1rem', }, - ".isa-text-caption-bold-big": { - fontFamily: "Open Sans", - fontSize: "0.875rem", - fontStyle: "normal", - fontWeight: "700", - lineHeight: "1.25rem", + '.isa-text-caption-bold-big': { + fontFamily: 'Open Sans', + fontSize: '0.875rem', + fontStyle: 'normal', + fontWeight: '700', + lineHeight: '1.25rem', }, - ".isa-text-caption-bold-xl": { - fontFamily: "Open Sans", - fontSize: "0.875rem", - fontStyle: "normal", - fontWeight: "700", - lineHeight: "1.25rem", + '.isa-text-caption-bold-xl': { + fontFamily: 'Open Sans', + fontSize: '0.875rem', + fontStyle: 'normal', + fontWeight: '700', + lineHeight: '1.25rem', }, - ".isa-text-caption-caps": { - fontFamily: "Open Sans", - fontSize: "0.75rem", - fontStyle: "normal", - fontWeight: "700", - lineHeight: "1rem", - textTransform: "uppercase", + '.isa-text-caption-caps': { + fontFamily: 'Open Sans', + fontSize: '0.75rem', + fontStyle: 'normal', + fontWeight: '700', + lineHeight: '1rem', + textTransform: 'uppercase', }, - ".isa-text-caption-regular": { - fontFamily: "Open Sans", - fontSize: "0.75rem", - fontStyle: "normal", - fontWeight: "400", - lineHeight: "1rem", + '.isa-text-caption-regular': { + fontFamily: 'Open Sans', + fontSize: '0.75rem', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '1rem', }, - ".isa-text-caption-regular-big": { - fontFamily: "Open Sans", - fontSize: "0.875rem", - fontStyle: "normal", - fontWeight: "400", - lineHeight: "1.25rem", + '.isa-text-caption-regular-big': { + fontFamily: 'Open Sans', + fontSize: '0.875rem', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '1.25rem', }, - ".isa-text-caption-regular-xl": { - fontFamily: "Open Sans", - fontSize: "0.875rem", - fontStyle: "normal", - fontWeight: "400", - lineHeight: "1.25rem", + '.isa-text-caption-regular-xl': { + fontFamily: 'Open Sans', + fontSize: '0.875rem', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '1.25rem', }, }); }); diff --git a/tailwind.config.js b/tailwind.config.js index 31f846a0c..946eb0067 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,7 +2,7 @@ const plugin = require('tailwindcss/plugin'); /** @type {import('tailwindcss').Config} */ module.exports = { - content: ['./apps/**/*.{html,ts}'], + content: ['./apps/**/*.{html,ts}', './libs/**/*.{html,ts}'], darkMode: 'media', // or 'media' or 'class', theme: { screens: { diff --git a/tsconfig.base.json b/tsconfig.base.json index 624192f4b..b10df9718 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -46,6 +46,7 @@ "@hub/*": ["apps/isa-app/src/hub/*/index.ts"], "@isa/core/process": ["libs/core/process/src/index.ts"], "@isa/icons": ["libs/icons/src/index.ts"], + "@isa/shared/filter": ["libs/shared/filter/src/index.ts"], "@isa/ui/buttons": ["libs/ui/buttons/src/index.ts"], "@isa/ui/input-controls": ["libs/ui/input-controls/src/index.ts"], "@isa/ui/search-bar": ["libs/ui/search-bar/src/index.ts"],