@ah-oh/ao-workspaces-design-system 0.0.51 → 0.0.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6047,25 +6047,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
6047
6047
|
|
|
6048
6048
|
class SearchResultsPageComponent {
|
|
6049
6049
|
sanitizer = inject(DomSanitizer);
|
|
6050
|
+
hostRef = inject((ElementRef));
|
|
6050
6051
|
query = input('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
|
|
6051
6052
|
groups = input([], ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
|
|
6052
6053
|
availableTypes = input([], ...(ngDevMode ? [{ debugName: "availableTypes" }] : /* istanbul ignore next */ []));
|
|
6053
6054
|
typeFilter = model(null, ...(ngDevMode ? [{ debugName: "typeFilter" }] : /* istanbul ignore next */ []));
|
|
6054
|
-
dateFilter = model(null, ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
|
|
6055
6055
|
resultClick = output();
|
|
6056
|
-
typeFilterClick = output();
|
|
6057
|
-
dateFilterClick = output();
|
|
6058
6056
|
caretDownIcon = phosphorCaretDown;
|
|
6059
|
-
calendarIcon = phosphorCalendarBlank;
|
|
6060
6057
|
sparkleIcon = phosphorSparkle;
|
|
6058
|
+
typeFilterOpen = signal(false, ...(ngDevMode ? [{ debugName: "typeFilterOpen" }] : /* istanbul ignore next */ []));
|
|
6059
|
+
typeOptions = computed(() => {
|
|
6060
|
+
const configured = this.availableTypes();
|
|
6061
|
+
if (configured.length > 0) {
|
|
6062
|
+
return configured;
|
|
6063
|
+
}
|
|
6064
|
+
const seen = new Set();
|
|
6065
|
+
const options = this.groups().reduce((items, group) => {
|
|
6066
|
+
if (seen.has(group.type)) {
|
|
6067
|
+
return items;
|
|
6068
|
+
}
|
|
6069
|
+
seen.add(group.type);
|
|
6070
|
+
items.push({ value: group.type, label: group.label });
|
|
6071
|
+
return items;
|
|
6072
|
+
}, [{ value: null, label: 'Alle Typen' }]);
|
|
6073
|
+
return options;
|
|
6074
|
+
}, ...(ngDevMode ? [{ debugName: "typeOptions" }] : /* istanbul ignore next */ []));
|
|
6075
|
+
activeTypeLabel = computed(() => this.typeOptions().find(option => option.value === this.typeFilter())?.label ?? 'Alle Typen', ...(ngDevMode ? [{ debugName: "activeTypeLabel" }] : /* istanbul ignore next */ []));
|
|
6076
|
+
filteredGroups = computed(() => {
|
|
6077
|
+
const type = this.typeFilter();
|
|
6078
|
+
if (type === null) {
|
|
6079
|
+
return this.groups();
|
|
6080
|
+
}
|
|
6081
|
+
return this.groups().filter(group => group.type === type);
|
|
6082
|
+
}, ...(ngDevMode ? [{ debugName: "filteredGroups" }] : /* istanbul ignore next */ []));
|
|
6083
|
+
onDocumentClick(event) {
|
|
6084
|
+
if (!this.typeFilterOpen()) {
|
|
6085
|
+
return;
|
|
6086
|
+
}
|
|
6087
|
+
const target = event.target;
|
|
6088
|
+
if (target && !this.hostRef.nativeElement.contains(target)) {
|
|
6089
|
+
this.typeFilterOpen.set(false);
|
|
6090
|
+
}
|
|
6091
|
+
}
|
|
6061
6092
|
onResultClick(r) {
|
|
6062
6093
|
this.resultClick.emit(r);
|
|
6063
6094
|
}
|
|
6064
6095
|
onTypeFilterClick() {
|
|
6065
|
-
this.
|
|
6096
|
+
this.typeFilterOpen.update(isOpen => !isOpen);
|
|
6066
6097
|
}
|
|
6067
|
-
|
|
6068
|
-
this.
|
|
6098
|
+
onTypeOptionClick(option) {
|
|
6099
|
+
this.typeFilter.set(option.value);
|
|
6100
|
+
this.typeFilterOpen.set(false);
|
|
6069
6101
|
}
|
|
6070
6102
|
highlight(text) {
|
|
6071
6103
|
const query = this.query().trim();
|
|
@@ -6074,7 +6106,7 @@ class SearchResultsPageComponent {
|
|
|
6074
6106
|
}
|
|
6075
6107
|
const escaped = this.escapeHtml(text);
|
|
6076
6108
|
const pattern = new RegExp(this.escapeRegex(query), 'gi');
|
|
6077
|
-
const highlighted = escaped.replace(pattern,
|
|
6109
|
+
const highlighted = escaped.replace(pattern, match => `<mark class="search-results__hl">${match}</mark>`);
|
|
6078
6110
|
return this.sanitizer.bypassSecurityTrustHtml(highlighted);
|
|
6079
6111
|
}
|
|
6080
6112
|
escapeHtml(text) {
|
|
@@ -6089,14 +6121,17 @@ class SearchResultsPageComponent {
|
|
|
6089
6121
|
return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
6090
6122
|
}
|
|
6091
6123
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SearchResultsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6092
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SearchResultsPageComponent, isStandalone: true, selector: "ao-search-results-page", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, availableTypes: { classPropertyName: "availableTypes", publicName: "availableTypes", isSignal: true, isRequired: false, transformFunction: null }, typeFilter: { classPropertyName: "typeFilter", publicName: "typeFilter", isSignal: true, isRequired: false, transformFunction: null },
|
|
6124
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SearchResultsPageComponent, isStandalone: true, selector: "ao-search-results-page", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, availableTypes: { classPropertyName: "availableTypes", publicName: "availableTypes", isSignal: true, isRequired: false, transformFunction: null }, typeFilter: { classPropertyName: "typeFilter", publicName: "typeFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { typeFilter: "typeFilterChange", resultClick: "resultClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "ao-search-results-page" }, ngImport: i0, template: "<header class=\"search-results__header\">\n <h1 class=\"search-results__title\">Suchergebnisse</h1>\n <div class=\"search-results__filters\">\n <div class=\"search-results__type-filter\">\n <button\n ao-button\n variant=\"outline\"\n [iconTrailing]=\"caretDownIcon\"\n [attr.aria-expanded]=\"typeFilterOpen()\"\n aria-haspopup=\"listbox\"\n (click)=\"onTypeFilterClick()\"\n >\n {{ activeTypeLabel() }}\n </button>\n @if (typeFilterOpen()) {\n <div class=\"search-results__type-menu\" role=\"listbox\">\n @for (option of typeOptions(); track option.value ?? 'all') {\n <button\n type=\"button\"\n class=\"search-results__type-option\"\n [class.search-results__type-option--active]=\"option.value === typeFilter()\"\n [attr.aria-selected]=\"option.value === typeFilter()\"\n role=\"option\"\n (click)=\"onTypeOptionClick(option)\"\n >\n {{ option.label }}\n </button>\n }\n </div>\n }\n </div>\n </div>\n</header>\n\n@for (group of filteredGroups(); track group.type) {\n <section class=\"search-results__section\">\n <div class=\"search-results__section-header\">\n <h2 class=\"search-results__section-title\">{{ group.label }}</h2>\n <span class=\"search-results__count\">\n {{ group.totalCount ?? group.results.length }} Ergebnisse\n </span>\n </div>\n\n @if (group.type !== 'ki') {\n @if (group.columns?.length) {\n <div class=\"search-results__row search-results__row--head\">\n @for (col of group.columns; track col) {\n <span class=\"search-results__cell search-results__cell--head\">{{ col }}</span>\n }\n </div>\n }\n @for (r of group.results; track r.id) {\n <button type=\"button\" class=\"search-results__row\" (click)=\"onResultClick(r)\">\n <span\n class=\"search-results__cell search-results__cell--primary\"\n [innerHTML]=\"highlight(r.primary)\"\n ></span>\n <span class=\"search-results__cell\">{{ r.secondary }}</span>\n <span class=\"search-results__cell\">{{ r.tertiary }}</span>\n </button>\n }\n } @else {\n @for (r of group.results; track r.id) {\n <button type=\"button\" class=\"search-results__ai-row\" (click)=\"onResultClick(r)\">\n <ao-icon [svg]=\"sparkleIcon\" size=\"sm\" class=\"search-results__ai-icon\" />\n <span [innerHTML]=\"highlight(r.primary)\"></span>\n </button>\n }\n }\n </section>\n} @empty {\n <div class=\"search-results__empty\">Keine Ergebnisse gefunden</div>\n}\n", styles: [":host{display:block;box-sizing:border-box;width:calc(100% - var(--desktop-margin, 96px));max-width:var(--desktop-boxed, 1640px);margin:0 auto;padding-top:20px}@media(max-width:1279px){:host{width:calc(100% - var(--tablet-margin, 64px))}}@media(max-width:599px){:host{width:calc(100% - var(--mobile-margin, 32px))}}.search-results__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.search-results__title{margin:0;font-size:24px;font-weight:400;line-height:36px;letter-spacing:0;color:#212121}.search-results__filters{display:flex;gap:10px}.search-results__type-filter{position:relative}.search-results__type-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:10;min-width:180px;padding:5px 0;border:1px solid #e9e9e9;border-radius:5px;background-color:#fff;box-shadow:0 4px 16px #2121211a}.search-results__type-option{display:block;width:100%;padding:10px 15px;border:none;background:transparent;color:#212121;text-align:left;cursor:pointer;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0}.search-results__type-option:hover,.search-results__type-option--active{background-color:#f3f3f3}.search-results__type-option:focus-visible{outline:3px solid #ff004d;outline-offset:-3px}.search-results__section{margin-bottom:30px}.search-results__section-header{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid #e9e9e9;margin-bottom:10px}.search-results__section-title{margin:0;font-size:15px;font-weight:400;line-height:22.5px;letter-spacing:0;color:#212121}.search-results__count{font-size:12px;font-weight:500;line-height:18px;letter-spacing:0;color:#909090}.search-results__row{display:grid;grid-template-columns:1fr 2fr 2fr;gap:15px;width:100%;padding:10px 0;border:none;border-bottom:1px solid #e9e9e9;background:transparent;text-align:left;cursor:pointer;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0;color:#212121}.search-results__row:hover:not(.search-results__row--head){background-color:#f3f3f3}.search-results__row--head{cursor:default;color:#909090;font-size:12px;font-weight:500;line-height:18px;letter-spacing:0}.search-results__cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-results__cell--primary{font-weight:600}.search-results__cell--head{color:#909090}.search-results__ai-row{display:flex;align-items:center;gap:10px;width:100%;padding:10px 0;border:none;background:transparent;text-align:left;cursor:pointer;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0;color:#212121}.search-results__ai-row:hover{background-color:#f3f3f3}.search-results__ai-icon{color:#223cff;flex-shrink:0}.search-results__empty{padding:25px 0;color:#909090;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0}.search-results__hl{background-color:#fff59d;color:inherit;padding:0;border-radius:2px}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[ao-button], a[ao-button]", inputs: ["variant", "icon", "iconTrailing"] }, { kind: "component", type: IconComponent, selector: "ao-icon", inputs: ["svg", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6093
6125
|
}
|
|
6094
6126
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SearchResultsPageComponent, decorators: [{
|
|
6095
6127
|
type: Component,
|
|
6096
6128
|
args: [{ selector: 'ao-search-results-page', imports: [ButtonComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
6097
6129
|
class: 'ao-search-results-page',
|
|
6098
|
-
}, template: "<header class=\"search-results__header\">\n <h1 class=\"search-results__title\">Suchergebnisse</h1>\n <div class=\"search-results__filters\">\n <button\n
|
|
6099
|
-
}], propDecorators: { query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], availableTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableTypes", required: false }] }], typeFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeFilter", required: false }] }, { type: i0.Output, args: ["typeFilterChange"] }],
|
|
6130
|
+
}, template: "<header class=\"search-results__header\">\n <h1 class=\"search-results__title\">Suchergebnisse</h1>\n <div class=\"search-results__filters\">\n <div class=\"search-results__type-filter\">\n <button\n ao-button\n variant=\"outline\"\n [iconTrailing]=\"caretDownIcon\"\n [attr.aria-expanded]=\"typeFilterOpen()\"\n aria-haspopup=\"listbox\"\n (click)=\"onTypeFilterClick()\"\n >\n {{ activeTypeLabel() }}\n </button>\n @if (typeFilterOpen()) {\n <div class=\"search-results__type-menu\" role=\"listbox\">\n @for (option of typeOptions(); track option.value ?? 'all') {\n <button\n type=\"button\"\n class=\"search-results__type-option\"\n [class.search-results__type-option--active]=\"option.value === typeFilter()\"\n [attr.aria-selected]=\"option.value === typeFilter()\"\n role=\"option\"\n (click)=\"onTypeOptionClick(option)\"\n >\n {{ option.label }}\n </button>\n }\n </div>\n }\n </div>\n </div>\n</header>\n\n@for (group of filteredGroups(); track group.type) {\n <section class=\"search-results__section\">\n <div class=\"search-results__section-header\">\n <h2 class=\"search-results__section-title\">{{ group.label }}</h2>\n <span class=\"search-results__count\">\n {{ group.totalCount ?? group.results.length }} Ergebnisse\n </span>\n </div>\n\n @if (group.type !== 'ki') {\n @if (group.columns?.length) {\n <div class=\"search-results__row search-results__row--head\">\n @for (col of group.columns; track col) {\n <span class=\"search-results__cell search-results__cell--head\">{{ col }}</span>\n }\n </div>\n }\n @for (r of group.results; track r.id) {\n <button type=\"button\" class=\"search-results__row\" (click)=\"onResultClick(r)\">\n <span\n class=\"search-results__cell search-results__cell--primary\"\n [innerHTML]=\"highlight(r.primary)\"\n ></span>\n <span class=\"search-results__cell\">{{ r.secondary }}</span>\n <span class=\"search-results__cell\">{{ r.tertiary }}</span>\n </button>\n }\n } @else {\n @for (r of group.results; track r.id) {\n <button type=\"button\" class=\"search-results__ai-row\" (click)=\"onResultClick(r)\">\n <ao-icon [svg]=\"sparkleIcon\" size=\"sm\" class=\"search-results__ai-icon\" />\n <span [innerHTML]=\"highlight(r.primary)\"></span>\n </button>\n }\n }\n </section>\n} @empty {\n <div class=\"search-results__empty\">Keine Ergebnisse gefunden</div>\n}\n", styles: [":host{display:block;box-sizing:border-box;width:calc(100% - var(--desktop-margin, 96px));max-width:var(--desktop-boxed, 1640px);margin:0 auto;padding-top:20px}@media(max-width:1279px){:host{width:calc(100% - var(--tablet-margin, 64px))}}@media(max-width:599px){:host{width:calc(100% - var(--mobile-margin, 32px))}}.search-results__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.search-results__title{margin:0;font-size:24px;font-weight:400;line-height:36px;letter-spacing:0;color:#212121}.search-results__filters{display:flex;gap:10px}.search-results__type-filter{position:relative}.search-results__type-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:10;min-width:180px;padding:5px 0;border:1px solid #e9e9e9;border-radius:5px;background-color:#fff;box-shadow:0 4px 16px #2121211a}.search-results__type-option{display:block;width:100%;padding:10px 15px;border:none;background:transparent;color:#212121;text-align:left;cursor:pointer;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0}.search-results__type-option:hover,.search-results__type-option--active{background-color:#f3f3f3}.search-results__type-option:focus-visible{outline:3px solid #ff004d;outline-offset:-3px}.search-results__section{margin-bottom:30px}.search-results__section-header{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid #e9e9e9;margin-bottom:10px}.search-results__section-title{margin:0;font-size:15px;font-weight:400;line-height:22.5px;letter-spacing:0;color:#212121}.search-results__count{font-size:12px;font-weight:500;line-height:18px;letter-spacing:0;color:#909090}.search-results__row{display:grid;grid-template-columns:1fr 2fr 2fr;gap:15px;width:100%;padding:10px 0;border:none;border-bottom:1px solid #e9e9e9;background:transparent;text-align:left;cursor:pointer;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0;color:#212121}.search-results__row:hover:not(.search-results__row--head){background-color:#f3f3f3}.search-results__row--head{cursor:default;color:#909090;font-size:12px;font-weight:500;line-height:18px;letter-spacing:0}.search-results__cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-results__cell--primary{font-weight:600}.search-results__cell--head{color:#909090}.search-results__ai-row{display:flex;align-items:center;gap:10px;width:100%;padding:10px 0;border:none;background:transparent;text-align:left;cursor:pointer;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0;color:#212121}.search-results__ai-row:hover{background-color:#f3f3f3}.search-results__ai-icon{color:#223cff;flex-shrink:0}.search-results__empty{padding:25px 0;color:#909090;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0}.search-results__hl{background-color:#fff59d;color:inherit;padding:0;border-radius:2px}\n"] }]
|
|
6131
|
+
}], propDecorators: { query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], availableTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableTypes", required: false }] }], typeFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeFilter", required: false }] }, { type: i0.Output, args: ["typeFilterChange"] }], resultClick: [{ type: i0.Output, args: ["resultClick"] }], onDocumentClick: [{
|
|
6132
|
+
type: HostListener,
|
|
6133
|
+
args: ['document:click', ['$event']]
|
|
6134
|
+
}] } });
|
|
6100
6135
|
|
|
6101
6136
|
const ROBIN_API_BASE_URL = new InjectionToken('ROBIN_API_BASE_URL', {
|
|
6102
6137
|
providedIn: 'root',
|