@ah-oh/ao-workspaces-design-system 0.0.50 → 0.0.51
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.
|
@@ -2902,6 +2902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
2902
2902
|
}, template: "<nav class=\"side-nav\" role=\"navigation\" aria-label=\"Side navigation\">\n <div class=\"side-nav__header\">\n <div class=\"side-nav__logo\">\n <ng-content select=\"[aoSideNavLogo]\" />\n </div>\n </div>\n\n <ul class=\"side-nav__list\" role=\"menu\">\n @for (item of items(); track item.id) {\n @if (item.separator) {\n <li role=\"separator\" class=\"side-nav__separator\"></li>\n } @else {\n <li role=\"none\">\n <a\n class=\"side-nav__item\"\n [class.side-nav__item--active]=\"item.id === activeItemId()\"\n [class.side-nav__item--disabled]=\"item.disabled\"\n [class.side-nav__item--highlight]=\"item.highlight\"\n [attr.href]=\"item.route ?? null\"\n [attr.data-nav-id]=\"item.id\"\n [attr.aria-current]=\"item.id === activeItemId() ? 'page' : null\"\n [attr.aria-disabled]=\"item.disabled || null\"\n [attr.tabindex]=\"item.disabled ? -1 : 0\"\n [attr.title]=\"item.tooltip ?? item.label\"\n role=\"menuitem\"\n (click)=\"$event.preventDefault(); onItemClick(item)\"\n (keydown)=\"onKeydown($event, item)\"\n >\n @if (item.icon) {\n <ao-icon [svg]=\"item.icon\" size=\"sm\" class=\"side-nav__icon\" />\n }\n <span class=\"side-nav__label\">{{ item.label }}</span>\n </a>\n </li>\n }\n }\n </ul>\n\n @if (bottomItems().length > 0) {\n <div class=\"side-nav__bottom\">\n @for (item of bottomItems(); track item.id) {\n <button\n type=\"button\"\n class=\"side-nav__bottom-item\"\n [class.side-nav__bottom-item--disabled]=\"item.disabled\"\n [attr.data-nav-id]=\"item.id\"\n [attr.aria-disabled]=\"item.disabled || null\"\n [attr.title]=\"item.tooltip ?? item.label\"\n [disabled]=\"item.disabled\"\n (click)=\"onBottomItemClick(item)\"\n >\n @if (item.icon) {\n <ao-icon [svg]=\"item.icon\" size=\"lg\" />\n }\n </button>\n }\n </div>\n }\n</nav>\n", styles: [":host{position:fixed;top:0;left:0;z-index:4;display:block;width:70px;height:100vh;background-color:#fff;border-right:1px solid #e9e9e9}:host.ao-side-nav--expanded{width:140px}.side-nav{display:flex;flex-direction:column;height:100%}.side-nav__header{display:flex;align-items:center;justify-content:center;height:50px;padding:0 20px}.side-nav__logo{display:flex;align-items:center;justify-content:center}.side-nav__list{display:flex;flex-direction:column;gap:20px;flex:1;list-style:none;margin:0;padding:30px 0}.side-nav__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5px;width:100%;min-height:40px;padding:5px 20px;border:none;border-left:3px solid transparent;background:transparent;color:#212121;text-decoration:none;cursor:pointer;transition:border-color .2s ease,color .2s ease,background-color .2s ease;box-sizing:border-box;font-size:12px;font-weight:500;line-height:18px;letter-spacing:0}.side-nav__item:hover:not(.side-nav__item--disabled){background-color:#e9e9e9}.side-nav__item:focus-visible{outline:3px solid #ff004d;outline-offset:-3px}:host(.ao-side-nav--expanded) .side-nav__item{flex-direction:row;justify-content:flex-start;gap:10px;padding:10px 15px}.side-nav__item--active{color:#ff004d;border-left-color:#ff004d;background-color:#ff004d0d}.side-nav__item--disabled{color:#909090;cursor:not-allowed}.side-nav__item--highlight,.side-nav__item--highlight .side-nav__icon{color:#ff004d}.side-nav__separator{height:0;margin:10px 20px;border:none;border-top:1px solid #e9e9e9}.side-nav__icon{flex-shrink:0}.side-nav__label{text-align:center}:host(.ao-side-nav--expanded) .side-nav__label{text-align:left;white-space:nowrap}.side-nav__bottom{display:flex;flex-direction:column;padding-bottom:50px}.side-nav__bottom-item{display:flex;align-items:center;justify-content:center;width:100%;height:50px;padding:0 20px;border:none;background:transparent;color:#212121;cursor:pointer;transition:background-color .2s ease,color .2s ease}.side-nav__bottom-item:hover:not(:disabled){background-color:#e9e9e9}.side-nav__bottom-item:focus-visible{outline:3px solid #ff004d;outline-offset:-3px}.side-nav__bottom-item:disabled{color:#909090;cursor:not-allowed}.side-nav__bottom-item--active{color:#ff004d}\n"] }]
|
|
2903
2903
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bottomItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottomItems", required: false }] }], activeItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItemId", required: false }] }, { type: i0.Output, args: ["activeItemIdChange"] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], itemChange: [{ type: i0.Output, args: ["itemChange"] }], bottomItemClick: [{ type: i0.Output, args: ["bottomItemClick"] }] } });
|
|
2904
2904
|
|
|
2905
|
+
const MAX_VISIBLE_RESULTS = 10;
|
|
2905
2906
|
class AiSearchComponent {
|
|
2906
2907
|
sanitizer = inject(DomSanitizer);
|
|
2907
2908
|
hostRef = inject((ElementRef));
|
|
@@ -2938,9 +2939,46 @@ class AiSearchComponent {
|
|
|
2938
2939
|
searchInput = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []));
|
|
2939
2940
|
speechRecognition = null;
|
|
2940
2941
|
currentVoiceTranscript = '';
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
this.
|
|
2942
|
+
visibleResultGroups = computed(() => {
|
|
2943
|
+
let remaining = MAX_VISIBLE_RESULTS;
|
|
2944
|
+
return this.resultGroups().reduce((groups, group) => {
|
|
2945
|
+
if (remaining <= 0) {
|
|
2946
|
+
return groups;
|
|
2947
|
+
}
|
|
2948
|
+
const results = group.results.slice(0, remaining);
|
|
2949
|
+
if (results.length === 0) {
|
|
2950
|
+
return groups;
|
|
2951
|
+
}
|
|
2952
|
+
remaining -= results.length;
|
|
2953
|
+
groups.push({ ...group, results });
|
|
2954
|
+
return groups;
|
|
2955
|
+
}, []);
|
|
2956
|
+
}, ...(ngDevMode ? [{ debugName: "visibleResultGroups" }] : /* istanbul ignore next */ []));
|
|
2957
|
+
visibleAiSuggestions = computed(() => {
|
|
2958
|
+
const visibleGroupCount = this.visibleResultGroups().reduce((total, group) => total + group.results.length, 0);
|
|
2959
|
+
const remaining = Math.max(MAX_VISIBLE_RESULTS - visibleGroupCount, 0);
|
|
2960
|
+
return this.aiSuggestions().slice(0, remaining);
|
|
2961
|
+
}, ...(ngDevMode ? [{ debugName: "visibleAiSuggestions" }] : /* istanbul ignore next */ []));
|
|
2962
|
+
visibleResultCount = computed(() => this.visibleResultGroups().reduce((total, group) => total + group.results.length, 0) +
|
|
2963
|
+
this.visibleAiSuggestions().length, ...(ngDevMode ? [{ debugName: "visibleResultCount" }] : /* istanbul ignore next */ []));
|
|
2964
|
+
totalResultCount = computed(() => this.resultGroups().reduce((total, group) => total + this.getGroupResultCount(group), 0) +
|
|
2965
|
+
this.aiSuggestions().length, ...(ngDevMode ? [{ debugName: "totalResultCount" }] : /* istanbul ignore next */ []));
|
|
2966
|
+
hasMoreResults = computed(() => this.totalResultCount() > MAX_VISIBLE_RESULTS, ...(ngDevMode ? [{ debugName: "hasMoreResults" }] : /* istanbul ignore next */ []));
|
|
2967
|
+
resultSummary = computed(() => {
|
|
2968
|
+
const total = this.totalResultCount();
|
|
2969
|
+
if (total === 1) {
|
|
2970
|
+
return '1 Ergebnis';
|
|
2971
|
+
}
|
|
2972
|
+
if (this.hasMoreResults()) {
|
|
2973
|
+
return `${this.visibleResultCount()} von ${total} Ergebnissen`;
|
|
2974
|
+
}
|
|
2975
|
+
return `${total} Ergebnisse`;
|
|
2976
|
+
}, ...(ngDevMode ? [{ debugName: "resultSummary" }] : /* istanbul ignore next */ []));
|
|
2977
|
+
hasAnyResults = computed(() => this.totalResultCount() > 0 || this.pageSuggestion() !== null, ...(ngDevMode ? [{ debugName: "hasAnyResults" }] : /* istanbul ignore next */ []));
|
|
2978
|
+
showNoResults = computed(() => this.value().trim().length > 0 &&
|
|
2979
|
+
!this.loading() &&
|
|
2980
|
+
this.effectiveError() === null &&
|
|
2981
|
+
!this.hasAnyResults(), ...(ngDevMode ? [{ debugName: "showNoResults" }] : /* istanbul ignore next */ []));
|
|
2944
2982
|
showRecommendedFilters = computed(() => this.activeFilter() === null && this.recommendedFilters().length > 0, ...(ngDevMode ? [{ debugName: "showRecommendedFilters" }] : /* istanbul ignore next */ []));
|
|
2945
2983
|
effectivePlaceholder = computed(() => {
|
|
2946
2984
|
const filter = this.activeFilter();
|
|
@@ -2956,7 +2994,7 @@ class AiSearchComponent {
|
|
|
2956
2994
|
if (this.value().length === 0) {
|
|
2957
2995
|
return this.showRecommendedFilters();
|
|
2958
2996
|
}
|
|
2959
|
-
return this.hasAnyResults() || this.loading();
|
|
2997
|
+
return this.hasAnyResults() || this.loading() || this.showNoResults();
|
|
2960
2998
|
}, ...(ngDevMode ? [{ debugName: "hasPanelContent" }] : /* istanbul ignore next */ []));
|
|
2961
2999
|
onDocumentClick(event) {
|
|
2962
3000
|
if (!this.panelOpen()) {
|
|
@@ -3130,6 +3168,9 @@ class AiSearchComponent {
|
|
|
3130
3168
|
this.activeFilter.set(null);
|
|
3131
3169
|
this.filterClear.emit();
|
|
3132
3170
|
}
|
|
3171
|
+
getGroupResultCount(group) {
|
|
3172
|
+
return Math.max(group.totalCount ?? 0, group.results.length);
|
|
3173
|
+
}
|
|
3133
3174
|
escapeHtml(text) {
|
|
3134
3175
|
return text
|
|
3135
3176
|
.replace(/&/g, '&')
|
|
@@ -3142,13 +3183,13 @@ class AiSearchComponent {
|
|
|
3142
3183
|
return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
3143
3184
|
}
|
|
3144
3185
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AiSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3145
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: AiSearchComponent, isStandalone: true, selector: "ao-ai-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, recommendedFilters: { classPropertyName: "recommendedFilters", publicName: "recommendedFilters", isSignal: true, isRequired: false, transformFunction: null }, activeFilter: { classPropertyName: "activeFilter", publicName: "activeFilter", isSignal: true, isRequired: false, transformFunction: null }, resultGroups: { classPropertyName: "resultGroups", publicName: "resultGroups", isSignal: true, isRequired: false, transformFunction: null }, pageSuggestion: { classPropertyName: "pageSuggestion", publicName: "pageSuggestion", isSignal: true, isRequired: false, transformFunction: null }, aiSuggestions: { classPropertyName: "aiSuggestions", publicName: "aiSuggestions", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, panelOpen: { classPropertyName: "panelOpen", publicName: "panelOpen", isSignal: true, isRequired: false, transformFunction: null }, voiceLanguage: { classPropertyName: "voiceLanguage", publicName: "voiceLanguage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", activeFilter: "activeFilterChange", panelOpen: "panelOpenChange", submit: "submit", voiceStart: "voiceStart", queryChange: "queryChange", filterSelect: "filterSelect", filterClear: "filterClear", resultSelect: "resultSelect", aiSuggestionSelect: "aiSuggestionSelect", pageSuggestionSelect: "pageSuggestionSelect", viewAllClick: "viewAllClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "ao-ai-search" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ai-search\" [class.ai-search--open]=\"panelOpen() && hasPanelContent()\">\n <ao-icon [svg]=\"sparkleIcon\" size=\"sm\" class=\"ai-search__icon-left\" />\n @if (activeFilter(); as f) {\n <span class=\"ai-search__active-chip\" role=\"status\">\n <span class=\"ai-search__active-chip-label\">{{ f.label }}</span>\n <button\n type=\"button\"\n class=\"ai-search__active-chip-remove\"\n [disabled]=\"disabled()\"\n (click)=\"onChipRemove($event)\"\n [attr.aria-label]=\"'Filter ' + f.label + ' entfernen'\"\n >\n <ao-icon [svg]=\"closeIcon\" size=\"xs\" />\n </button>\n </span>\n }\n <input\n #searchInput\n type=\"text\"\n class=\"ai-search__input\"\n [placeholder]=\"effectivePlaceholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n (focus)=\"onFocus()\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"onEnter()\"\n (keydown.escape)=\"onEscape()\"\n (keydown.backspace)=\"onBackspace($event)\"\n aria-label=\"AI Search\"\n autocomplete=\"off\"\n />\n <button\n type=\"button\"\n class=\"ai-search__voice-btn\"\n [class.ai-search__voice-btn--recording]=\"isVoiceRecording()\"\n [disabled]=\"disabled()\"\n (click)=\"onVoiceClick()\"\n [attr.aria-label]=\"voiceButtonLabel()\"\n [attr.aria-pressed]=\"isVoiceRecording()\"\n >\n <ao-icon [svg]=\"micIcon\" size=\"sm\" />\n </button>\n</div>\n\n@if (panelOpen() && hasPanelContent()) {\n <div class=\"ai-search__panel\" role=\"listbox\">\n @if (effectiveError(); as msg) {\n <div class=\"ai-search__panel-section ai-search__status ai-search__status--error\">\n {{ msg }}\n </div>\n } @else if (value().length === 0) {\n @if (showRecommendedFilters()) {\n <div class=\"ai-search__panel-section\">\n <h4 class=\"ai-search__section-title\">Empfohlene Filter</h4>\n <div class=\"ai-search__filter-chips\">\n @for (f of recommendedFilters(); track f.id) {\n <button type=\"button\" class=\"ai-search__filter-chip\" (click)=\"onFilterClick(f)\">\n {{ f.label }}\n </button>\n }\n </div>\n </div>\n }\n } @else {\n @if (loading() && !hasAnyResults()) {\n <div class=\"ai-search__panel-section ai-search__status\">\n <span class=\"ai-search__spinner\" aria-hidden=\"true\"></span>\n Suche l\u00E4uft\u2026\n </div>\n }\n @if (pageSuggestion(); as p) {\n <div class=\"ai-search__panel-section\">\n <h4 class=\"ai-search__section-title\">Pfad</h4>\n <button type=\"button\" class=\"ai-search__path-row\" (click)=\"onPathClick(p)\">\n @for (crumb of p.breadcrumb; track crumb; let last = $last) {\n <span class=\"ai-search__path-crumb\">{{ crumb }}</span>\n @if (!last) {\n <ao-icon [svg]=\"caretRightIcon\" size=\"sm\" class=\"ai-search__path-sep\" />\n }\n }\n </button>\n </div>\n }\n @for (group of resultGroups(); track group.type) {\n <div class=\"ai-search__panel-section\">\n <h4 class=\"ai-search__section-title\">{{ group.label }}</h4>\n @for (r of group.results; track r.id) {\n <button type=\"button\" class=\"ai-search__result-row\" (click)=\"onResultClick(r)\">\n <span class=\"ai-search__result-primary\" [innerHTML]=\"highlight(r.primary)\"></span>\n </button>\n }\n </div>\n }\n @if (aiSuggestions().length) {\n <div class=\"ai-search__panel-section\">\n <h4 class=\"ai-search__section-title\">KI-Vorschl\u00E4ge</h4>\n @for (r of aiSuggestions(); track r.id) {\n <button type=\"button\" class=\"ai-search__ai-row\" (click)=\"onAiSuggestionClick(r)\">\n <ao-icon [svg]=\"sparkleIcon\" size=\"sm\" class=\"ai-search__ai-icon\" />\n <span [innerHTML]=\"highlight(r.primary)\"></span>\n </button>\n }\n </div>\n }\n @if (hasAnyResults()) {\n <button type=\"button\" class=\"ai-search__view-all\" (click)=\"onViewAll()\">\n <span>Alle Ergebnisse anzeigen</span>\n <ao-icon [svg]=\"arrowRightIcon\" size=\"sm\" />\n </button>\n }\n }\n </div>\n}\n", styles: [":host{display:inline-block;position:relative}.ai-search{display:flex;align-items:center;gap:10px;width:400px;height:35px;padding:0 10px 0 15px;border:1px solid #223cff;background-color:#fff;border-radius:9999px;position:relative;z-index:2}.ai-search__icon-left{color:#223cff;flex-shrink:0}.ai-search__active-chip{display:inline-flex;align-items:center;gap:5px;height:23px;padding:0 5px 0 10px;background-color:#223cff14;color:#223cff;border:1px solid #223cff;border-radius:9999px;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0;flex-shrink:0;max-width:50%}.ai-search__active-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.ai-search__active-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:none;border-radius:50%;background-color:transparent;color:inherit;cursor:pointer;flex-shrink:0}.ai-search__active-chip-remove:hover:not(:disabled){background-color:#00000014}.ai-search__active-chip-remove:focus-visible{outline:3px solid #223cff;outline-offset:1px}.ai-search__active-chip-remove:disabled{cursor:not-allowed;opacity:.5}.ai-search__input{flex:1;height:100%;padding:0;border:none;background:transparent;color:#212121;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0}.ai-search__input::placeholder{color:#212121}.ai-search__input:focus{outline:none}.ai-search__input:disabled{cursor:not-allowed}.ai-search__voice-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:50%;background-color:transparent;color:#212121;cursor:pointer;transition:color .2s ease;flex-shrink:0}.ai-search__voice-btn:hover:not(:disabled){color:#223cff}.ai-search__voice-btn--recording{color:#223cff;background-color:#223cff14}.ai-search__voice-btn:focus-visible{outline:3px solid #223cff;outline-offset:2px}.ai-search__voice-btn:disabled{opacity:.5;cursor:not-allowed}.ai-search__panel{position:absolute;top:45px;left:0;width:400px;max-height:70vh;overflow-y:auto;background-color:#fff;border:1px solid #e9e9e9;border-radius:5px;box-shadow:0 4px 16px #2121211a;z-index:10}.ai-search__panel-section{padding:15px 0;border-bottom:1px solid #e9e9e9}.ai-search__panel-section:last-of-type{border-bottom:none}.ai-search__section-title{margin:0 0 10px;padding:0 15px;font-size:12px;line-height:18px;letter-spacing:0;color:#909090;font-weight:500}.ai-search__filter-chips{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:0 15px}.ai-search__filter-chip{display:inline-flex;align-items:center;padding:5px 15px;border:1px solid #e9e9e9;background-color:#fff;color:#212121;cursor:pointer;border-radius:9999px;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0;transition:background-color .15s ease,border-color .15s ease}.ai-search__filter-chip:hover{background-color:#f3f3f3;border-color:#909090}.ai-search__filter-chip:focus-visible{outline:3px solid #223cff;outline-offset:2px}.ai-search__path-row,.ai-search__result-row,.ai-search__ai-row{display:flex;align-items:center;width:100%;padding:10px 15px;border:none;background:transparent;text-align:left;cursor:pointer;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0;color:#212121}.ai-search__path-row:hover,.ai-search__result-row:hover,.ai-search__ai-row:hover{background-color:#f3f3f3}.ai-search__path-row:focus-visible,.ai-search__result-row:focus-visible,.ai-search__ai-row:focus-visible{outline:3px solid #223cff;outline-offset:-2px}.ai-search__path-row{gap:10px}.ai-search__path-sep{color:#909090}.ai-search__result-row{display:block;width:100%}.ai-search__result-primary{display:block;width:100%;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-search__ai-row{gap:10px}.ai-search__ai-icon{color:#223cff;flex-shrink:0}.ai-search__hl{background-color:#fff59d;color:inherit;padding:0;border-radius:2px}.ai-search__status{display:flex;align-items:center;gap:10px;padding:15px;color:#212121;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0}.ai-search__status--error{color:#ff004d}.ai-search__spinner{display:inline-block;width:14px;height:14px;border:2px solid #e9e9e9;border-top-color:#223cff;border-radius:50%;animation:ao-ai-search-spin .8s linear infinite}@keyframes ao-ai-search-spin{to{transform:rotate(360deg)}}.ai-search__view-all{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px;border:none;border-top:1px solid #e9e9e9;background:transparent;cursor:pointer;text-align:left;color:#212121;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0}.ai-search__view-all:hover{background-color:#f3f3f3}.ai-search__view-all:focus-visible{outline:3px solid #223cff;outline-offset:-2px}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ao-icon", inputs: ["svg", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3186
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: AiSearchComponent, isStandalone: true, selector: "ao-ai-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, recommendedFilters: { classPropertyName: "recommendedFilters", publicName: "recommendedFilters", isSignal: true, isRequired: false, transformFunction: null }, activeFilter: { classPropertyName: "activeFilter", publicName: "activeFilter", isSignal: true, isRequired: false, transformFunction: null }, resultGroups: { classPropertyName: "resultGroups", publicName: "resultGroups", isSignal: true, isRequired: false, transformFunction: null }, pageSuggestion: { classPropertyName: "pageSuggestion", publicName: "pageSuggestion", isSignal: true, isRequired: false, transformFunction: null }, aiSuggestions: { classPropertyName: "aiSuggestions", publicName: "aiSuggestions", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, panelOpen: { classPropertyName: "panelOpen", publicName: "panelOpen", isSignal: true, isRequired: false, transformFunction: null }, voiceLanguage: { classPropertyName: "voiceLanguage", publicName: "voiceLanguage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", activeFilter: "activeFilterChange", panelOpen: "panelOpenChange", submit: "submit", voiceStart: "voiceStart", queryChange: "queryChange", filterSelect: "filterSelect", filterClear: "filterClear", resultSelect: "resultSelect", aiSuggestionSelect: "aiSuggestionSelect", pageSuggestionSelect: "pageSuggestionSelect", viewAllClick: "viewAllClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "ao-ai-search" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ai-search\" [class.ai-search--open]=\"panelOpen() && hasPanelContent()\">\n <ao-icon [svg]=\"sparkleIcon\" size=\"sm\" class=\"ai-search__icon-left\" />\n @if (activeFilter(); as f) {\n <span class=\"ai-search__active-chip\" role=\"status\">\n <span class=\"ai-search__active-chip-label\">{{ f.label }}</span>\n <button\n type=\"button\"\n class=\"ai-search__active-chip-remove\"\n [disabled]=\"disabled()\"\n (click)=\"onChipRemove($event)\"\n [attr.aria-label]=\"'Filter ' + f.label + ' entfernen'\"\n >\n <ao-icon [svg]=\"closeIcon\" size=\"xs\" />\n </button>\n </span>\n }\n <input\n #searchInput\n type=\"text\"\n class=\"ai-search__input\"\n [placeholder]=\"effectivePlaceholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n (focus)=\"onFocus()\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"onEnter()\"\n (keydown.escape)=\"onEscape()\"\n (keydown.backspace)=\"onBackspace($event)\"\n aria-label=\"AI Search\"\n autocomplete=\"off\"\n />\n <button\n type=\"button\"\n class=\"ai-search__voice-btn\"\n [class.ai-search__voice-btn--recording]=\"isVoiceRecording()\"\n [disabled]=\"disabled()\"\n (click)=\"onVoiceClick()\"\n [attr.aria-label]=\"voiceButtonLabel()\"\n [attr.aria-pressed]=\"isVoiceRecording()\"\n >\n <ao-icon [svg]=\"micIcon\" size=\"sm\" />\n </button>\n</div>\n\n@if (panelOpen() && hasPanelContent()) {\n <div class=\"ai-search__panel\" role=\"listbox\">\n @if (effectiveError(); as msg) {\n <div class=\"ai-search__panel-section ai-search__status ai-search__status--error\">\n {{ msg }}\n </div>\n } @else if (value().length === 0) {\n @if (showRecommendedFilters()) {\n <div class=\"ai-search__panel-section\">\n <h4 class=\"ai-search__section-title\">Empfohlene Filter</h4>\n <div class=\"ai-search__filter-chips\">\n @for (f of recommendedFilters(); track f.id) {\n <button type=\"button\" class=\"ai-search__filter-chip\" (click)=\"onFilterClick(f)\">\n {{ f.label }}\n </button>\n }\n </div>\n </div>\n }\n } @else {\n @if (loading() && !hasAnyResults()) {\n <div class=\"ai-search__panel-section ai-search__status\">\n <span class=\"ai-search__spinner\" aria-hidden=\"true\"></span>\n Suche l\u00E4uft\u2026\n </div>\n } @else if (showNoResults()) {\n <div class=\"ai-search__panel-section ai-search__status\">Keine Ergebnisse gefunden</div>\n }\n @if (pageSuggestion(); as p) {\n <div class=\"ai-search__panel-section\">\n <h4 class=\"ai-search__section-title\">Pfad</h4>\n <button type=\"button\" class=\"ai-search__path-row\" (click)=\"onPathClick(p)\">\n @for (crumb of p.breadcrumb; track crumb; let last = $last) {\n <span class=\"ai-search__path-crumb\">{{ crumb }}</span>\n @if (!last) {\n <ao-icon [svg]=\"caretRightIcon\" size=\"sm\" class=\"ai-search__path-sep\" />\n }\n }\n </button>\n </div>\n }\n @for (group of visibleResultGroups(); track group.type) {\n <div class=\"ai-search__panel-section\">\n <h4 class=\"ai-search__section-title\">{{ group.label }}</h4>\n @for (r of group.results; track r.id) {\n <button type=\"button\" class=\"ai-search__result-row\" (click)=\"onResultClick(r)\">\n <span class=\"ai-search__result-primary\" [innerHTML]=\"highlight(r.primary)\"></span>\n </button>\n }\n </div>\n }\n @if (visibleAiSuggestions().length) {\n <div class=\"ai-search__panel-section\">\n <h4 class=\"ai-search__section-title\">KI-Vorschl\u00E4ge</h4>\n @for (r of visibleAiSuggestions(); track r.id) {\n <button type=\"button\" class=\"ai-search__ai-row\" (click)=\"onAiSuggestionClick(r)\">\n <ao-icon [svg]=\"sparkleIcon\" size=\"sm\" class=\"ai-search__ai-icon\" />\n <span [innerHTML]=\"highlight(r.primary)\"></span>\n </button>\n }\n </div>\n }\n @if (totalResultCount() > 0) {\n <div class=\"ai-search__result-summary\">\n {{ resultSummary() }}\n </div>\n }\n @if (hasMoreResults()) {\n <button type=\"button\" class=\"ai-search__view-all\" (click)=\"onViewAll()\">\n <span>Alle {{ totalResultCount() }} Ergebnisse anzeigen</span>\n <ao-icon [svg]=\"arrowRightIcon\" size=\"sm\" />\n </button>\n }\n }\n </div>\n}\n", styles: [":host{display:inline-block;position:relative}.ai-search{display:flex;align-items:center;gap:10px;width:400px;height:35px;padding:0 10px 0 15px;border:1px solid #223cff;background-color:#fff;border-radius:9999px;position:relative;z-index:2}.ai-search__icon-left{color:#223cff;flex-shrink:0}.ai-search__active-chip{display:inline-flex;align-items:center;gap:5px;height:23px;padding:0 5px 0 10px;background-color:#223cff14;color:#223cff;border:1px solid #223cff;border-radius:9999px;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0;flex-shrink:0;max-width:50%}.ai-search__active-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.ai-search__active-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:none;border-radius:50%;background-color:transparent;color:inherit;cursor:pointer;flex-shrink:0}.ai-search__active-chip-remove:hover:not(:disabled){background-color:#00000014}.ai-search__active-chip-remove:focus-visible{outline:3px solid #223cff;outline-offset:1px}.ai-search__active-chip-remove:disabled{cursor:not-allowed;opacity:.5}.ai-search__input{flex:1;height:100%;padding:0;border:none;background:transparent;color:#212121;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0}.ai-search__input::placeholder{color:#212121}.ai-search__input:focus{outline:none}.ai-search__input:disabled{cursor:not-allowed}.ai-search__voice-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:50%;background-color:transparent;color:#212121;cursor:pointer;transition:color .2s ease;flex-shrink:0}.ai-search__voice-btn:hover:not(:disabled){color:#223cff}.ai-search__voice-btn--recording{color:#223cff;background-color:#223cff14}.ai-search__voice-btn:focus-visible{outline:3px solid #223cff;outline-offset:2px}.ai-search__voice-btn:disabled{opacity:.5;cursor:not-allowed}.ai-search__panel{position:absolute;top:45px;left:0;width:400px;max-height:70vh;overflow-y:auto;background-color:#fff;border:1px solid #e9e9e9;border-radius:5px;box-shadow:0 4px 16px #2121211a;z-index:10}.ai-search__panel-section{padding:15px 0;border-bottom:1px solid #e9e9e9}.ai-search__panel-section:last-of-type{border-bottom:none}.ai-search__section-title{margin:0 0 10px;padding:0 15px;font-size:12px;line-height:18px;letter-spacing:0;color:#909090;font-weight:500}.ai-search__filter-chips{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:0 15px}.ai-search__filter-chip{display:inline-flex;align-items:center;padding:5px 15px;border:1px solid #e9e9e9;background-color:#fff;color:#212121;cursor:pointer;border-radius:9999px;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0;transition:background-color .15s ease,border-color .15s ease}.ai-search__filter-chip:hover{background-color:#f3f3f3;border-color:#909090}.ai-search__filter-chip:focus-visible{outline:3px solid #223cff;outline-offset:2px}.ai-search__path-row,.ai-search__result-row,.ai-search__ai-row{display:flex;align-items:center;width:100%;padding:10px 15px;border:none;background:transparent;text-align:left;cursor:pointer;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0;color:#212121}.ai-search__path-row:hover,.ai-search__result-row:hover,.ai-search__ai-row:hover{background-color:#f3f3f3}.ai-search__path-row:focus-visible,.ai-search__result-row:focus-visible,.ai-search__ai-row:focus-visible{outline:3px solid #223cff;outline-offset:-2px}.ai-search__path-row{gap:10px}.ai-search__path-sep{color:#909090}.ai-search__result-row{display:block;width:100%}.ai-search__result-primary{display:block;width:100%;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-search__ai-row{gap:10px}.ai-search__ai-icon{color:#223cff;flex-shrink:0}.ai-search__hl{background-color:#fff59d;color:inherit;padding:0;border-radius:2px}.ai-search__status{display:flex;align-items:center;gap:10px;padding:15px;color:#212121;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0}.ai-search__status--error{color:#ff004d}.ai-search__result-summary{padding:10px 15px;border-top:1px solid #e9e9e9;color:#909090;font-size:12px;font-weight:500;line-height:18px;letter-spacing:0}.ai-search__spinner{display:inline-block;width:14px;height:14px;border:2px solid #e9e9e9;border-top-color:#223cff;border-radius:50%;animation:ao-ai-search-spin .8s linear infinite}@keyframes ao-ai-search-spin{to{transform:rotate(360deg)}}.ai-search__view-all{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px;border:none;border-top:1px solid #e9e9e9;background:transparent;cursor:pointer;text-align:left;color:#212121;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0}.ai-search__view-all:hover{background-color:#f3f3f3}.ai-search__view-all:focus-visible{outline:3px solid #223cff;outline-offset:-2px}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ao-icon", inputs: ["svg", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3146
3187
|
}
|
|
3147
3188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AiSearchComponent, decorators: [{
|
|
3148
3189
|
type: Component,
|
|
3149
3190
|
args: [{ selector: 'ao-ai-search', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3150
3191
|
class: 'ao-ai-search',
|
|
3151
|
-
}, template: "<div class=\"ai-search\" [class.ai-search--open]=\"panelOpen() && hasPanelContent()\">\n <ao-icon [svg]=\"sparkleIcon\" size=\"sm\" class=\"ai-search__icon-left\" />\n @if (activeFilter(); as f) {\n <span class=\"ai-search__active-chip\" role=\"status\">\n <span class=\"ai-search__active-chip-label\">{{ f.label }}</span>\n <button\n type=\"button\"\n class=\"ai-search__active-chip-remove\"\n [disabled]=\"disabled()\"\n (click)=\"onChipRemove($event)\"\n [attr.aria-label]=\"'Filter ' + f.label + ' entfernen'\"\n >\n <ao-icon [svg]=\"closeIcon\" size=\"xs\" />\n </button>\n </span>\n }\n <input\n #searchInput\n type=\"text\"\n class=\"ai-search__input\"\n [placeholder]=\"effectivePlaceholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n (focus)=\"onFocus()\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"onEnter()\"\n (keydown.escape)=\"onEscape()\"\n (keydown.backspace)=\"onBackspace($event)\"\n aria-label=\"AI Search\"\n autocomplete=\"off\"\n />\n <button\n type=\"button\"\n class=\"ai-search__voice-btn\"\n [class.ai-search__voice-btn--recording]=\"isVoiceRecording()\"\n [disabled]=\"disabled()\"\n (click)=\"onVoiceClick()\"\n [attr.aria-label]=\"voiceButtonLabel()\"\n [attr.aria-pressed]=\"isVoiceRecording()\"\n >\n <ao-icon [svg]=\"micIcon\" size=\"sm\" />\n </button>\n</div>\n\n@if (panelOpen() && hasPanelContent()) {\n <div class=\"ai-search__panel\" role=\"listbox\">\n @if (effectiveError(); as msg) {\n <div class=\"ai-search__panel-section ai-search__status ai-search__status--error\">\n {{ msg }}\n </div>\n } @else if (value().length === 0) {\n @if (showRecommendedFilters()) {\n <div class=\"ai-search__panel-section\">\n <h4 class=\"ai-search__section-title\">Empfohlene Filter</h4>\n <div class=\"ai-search__filter-chips\">\n @for (f of recommendedFilters(); track f.id) {\n <button type=\"button\" class=\"ai-search__filter-chip\" (click)=\"onFilterClick(f)\">\n {{ f.label }}\n </button>\n }\n </div>\n </div>\n }\n } @else {\n @if (loading() && !hasAnyResults()) {\n <div class=\"ai-search__panel-section ai-search__status\">\n <span class=\"ai-search__spinner\" aria-hidden=\"true\"></span>\n Suche l\u00E4uft\u2026\n </div>\n }\n @if (pageSuggestion(); as p) {\n <div class=\"ai-search__panel-section\">\n <h4 class=\"ai-search__section-title\">Pfad</h4>\n <button type=\"button\" class=\"ai-search__path-row\" (click)=\"onPathClick(p)\">\n @for (crumb of p.breadcrumb; track crumb; let last = $last) {\n <span class=\"ai-search__path-crumb\">{{ crumb }}</span>\n @if (!last) {\n <ao-icon [svg]=\"caretRightIcon\" size=\"sm\" class=\"ai-search__path-sep\" />\n }\n }\n </button>\n </div>\n }\n @for (group of
|
|
3192
|
+
}, template: "<div class=\"ai-search\" [class.ai-search--open]=\"panelOpen() && hasPanelContent()\">\n <ao-icon [svg]=\"sparkleIcon\" size=\"sm\" class=\"ai-search__icon-left\" />\n @if (activeFilter(); as f) {\n <span class=\"ai-search__active-chip\" role=\"status\">\n <span class=\"ai-search__active-chip-label\">{{ f.label }}</span>\n <button\n type=\"button\"\n class=\"ai-search__active-chip-remove\"\n [disabled]=\"disabled()\"\n (click)=\"onChipRemove($event)\"\n [attr.aria-label]=\"'Filter ' + f.label + ' entfernen'\"\n >\n <ao-icon [svg]=\"closeIcon\" size=\"xs\" />\n </button>\n </span>\n }\n <input\n #searchInput\n type=\"text\"\n class=\"ai-search__input\"\n [placeholder]=\"effectivePlaceholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n (focus)=\"onFocus()\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"onEnter()\"\n (keydown.escape)=\"onEscape()\"\n (keydown.backspace)=\"onBackspace($event)\"\n aria-label=\"AI Search\"\n autocomplete=\"off\"\n />\n <button\n type=\"button\"\n class=\"ai-search__voice-btn\"\n [class.ai-search__voice-btn--recording]=\"isVoiceRecording()\"\n [disabled]=\"disabled()\"\n (click)=\"onVoiceClick()\"\n [attr.aria-label]=\"voiceButtonLabel()\"\n [attr.aria-pressed]=\"isVoiceRecording()\"\n >\n <ao-icon [svg]=\"micIcon\" size=\"sm\" />\n </button>\n</div>\n\n@if (panelOpen() && hasPanelContent()) {\n <div class=\"ai-search__panel\" role=\"listbox\">\n @if (effectiveError(); as msg) {\n <div class=\"ai-search__panel-section ai-search__status ai-search__status--error\">\n {{ msg }}\n </div>\n } @else if (value().length === 0) {\n @if (showRecommendedFilters()) {\n <div class=\"ai-search__panel-section\">\n <h4 class=\"ai-search__section-title\">Empfohlene Filter</h4>\n <div class=\"ai-search__filter-chips\">\n @for (f of recommendedFilters(); track f.id) {\n <button type=\"button\" class=\"ai-search__filter-chip\" (click)=\"onFilterClick(f)\">\n {{ f.label }}\n </button>\n }\n </div>\n </div>\n }\n } @else {\n @if (loading() && !hasAnyResults()) {\n <div class=\"ai-search__panel-section ai-search__status\">\n <span class=\"ai-search__spinner\" aria-hidden=\"true\"></span>\n Suche l\u00E4uft\u2026\n </div>\n } @else if (showNoResults()) {\n <div class=\"ai-search__panel-section ai-search__status\">Keine Ergebnisse gefunden</div>\n }\n @if (pageSuggestion(); as p) {\n <div class=\"ai-search__panel-section\">\n <h4 class=\"ai-search__section-title\">Pfad</h4>\n <button type=\"button\" class=\"ai-search__path-row\" (click)=\"onPathClick(p)\">\n @for (crumb of p.breadcrumb; track crumb; let last = $last) {\n <span class=\"ai-search__path-crumb\">{{ crumb }}</span>\n @if (!last) {\n <ao-icon [svg]=\"caretRightIcon\" size=\"sm\" class=\"ai-search__path-sep\" />\n }\n }\n </button>\n </div>\n }\n @for (group of visibleResultGroups(); track group.type) {\n <div class=\"ai-search__panel-section\">\n <h4 class=\"ai-search__section-title\">{{ group.label }}</h4>\n @for (r of group.results; track r.id) {\n <button type=\"button\" class=\"ai-search__result-row\" (click)=\"onResultClick(r)\">\n <span class=\"ai-search__result-primary\" [innerHTML]=\"highlight(r.primary)\"></span>\n </button>\n }\n </div>\n }\n @if (visibleAiSuggestions().length) {\n <div class=\"ai-search__panel-section\">\n <h4 class=\"ai-search__section-title\">KI-Vorschl\u00E4ge</h4>\n @for (r of visibleAiSuggestions(); track r.id) {\n <button type=\"button\" class=\"ai-search__ai-row\" (click)=\"onAiSuggestionClick(r)\">\n <ao-icon [svg]=\"sparkleIcon\" size=\"sm\" class=\"ai-search__ai-icon\" />\n <span [innerHTML]=\"highlight(r.primary)\"></span>\n </button>\n }\n </div>\n }\n @if (totalResultCount() > 0) {\n <div class=\"ai-search__result-summary\">\n {{ resultSummary() }}\n </div>\n }\n @if (hasMoreResults()) {\n <button type=\"button\" class=\"ai-search__view-all\" (click)=\"onViewAll()\">\n <span>Alle {{ totalResultCount() }} Ergebnisse anzeigen</span>\n <ao-icon [svg]=\"arrowRightIcon\" size=\"sm\" />\n </button>\n }\n }\n </div>\n}\n", styles: [":host{display:inline-block;position:relative}.ai-search{display:flex;align-items:center;gap:10px;width:400px;height:35px;padding:0 10px 0 15px;border:1px solid #223cff;background-color:#fff;border-radius:9999px;position:relative;z-index:2}.ai-search__icon-left{color:#223cff;flex-shrink:0}.ai-search__active-chip{display:inline-flex;align-items:center;gap:5px;height:23px;padding:0 5px 0 10px;background-color:#223cff14;color:#223cff;border:1px solid #223cff;border-radius:9999px;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0;flex-shrink:0;max-width:50%}.ai-search__active-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.ai-search__active-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:none;border-radius:50%;background-color:transparent;color:inherit;cursor:pointer;flex-shrink:0}.ai-search__active-chip-remove:hover:not(:disabled){background-color:#00000014}.ai-search__active-chip-remove:focus-visible{outline:3px solid #223cff;outline-offset:1px}.ai-search__active-chip-remove:disabled{cursor:not-allowed;opacity:.5}.ai-search__input{flex:1;height:100%;padding:0;border:none;background:transparent;color:#212121;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0}.ai-search__input::placeholder{color:#212121}.ai-search__input:focus{outline:none}.ai-search__input:disabled{cursor:not-allowed}.ai-search__voice-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:50%;background-color:transparent;color:#212121;cursor:pointer;transition:color .2s ease;flex-shrink:0}.ai-search__voice-btn:hover:not(:disabled){color:#223cff}.ai-search__voice-btn--recording{color:#223cff;background-color:#223cff14}.ai-search__voice-btn:focus-visible{outline:3px solid #223cff;outline-offset:2px}.ai-search__voice-btn:disabled{opacity:.5;cursor:not-allowed}.ai-search__panel{position:absolute;top:45px;left:0;width:400px;max-height:70vh;overflow-y:auto;background-color:#fff;border:1px solid #e9e9e9;border-radius:5px;box-shadow:0 4px 16px #2121211a;z-index:10}.ai-search__panel-section{padding:15px 0;border-bottom:1px solid #e9e9e9}.ai-search__panel-section:last-of-type{border-bottom:none}.ai-search__section-title{margin:0 0 10px;padding:0 15px;font-size:12px;line-height:18px;letter-spacing:0;color:#909090;font-weight:500}.ai-search__filter-chips{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:0 15px}.ai-search__filter-chip{display:inline-flex;align-items:center;padding:5px 15px;border:1px solid #e9e9e9;background-color:#fff;color:#212121;cursor:pointer;border-radius:9999px;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0;transition:background-color .15s ease,border-color .15s ease}.ai-search__filter-chip:hover{background-color:#f3f3f3;border-color:#909090}.ai-search__filter-chip:focus-visible{outline:3px solid #223cff;outline-offset:2px}.ai-search__path-row,.ai-search__result-row,.ai-search__ai-row{display:flex;align-items:center;width:100%;padding:10px 15px;border:none;background:transparent;text-align:left;cursor:pointer;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0;color:#212121}.ai-search__path-row:hover,.ai-search__result-row:hover,.ai-search__ai-row:hover{background-color:#f3f3f3}.ai-search__path-row:focus-visible,.ai-search__result-row:focus-visible,.ai-search__ai-row:focus-visible{outline:3px solid #223cff;outline-offset:-2px}.ai-search__path-row{gap:10px}.ai-search__path-sep{color:#909090}.ai-search__result-row{display:block;width:100%}.ai-search__result-primary{display:block;width:100%;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-search__ai-row{gap:10px}.ai-search__ai-icon{color:#223cff;flex-shrink:0}.ai-search__hl{background-color:#fff59d;color:inherit;padding:0;border-radius:2px}.ai-search__status{display:flex;align-items:center;gap:10px;padding:15px;color:#212121;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0}.ai-search__status--error{color:#ff004d}.ai-search__result-summary{padding:10px 15px;border-top:1px solid #e9e9e9;color:#909090;font-size:12px;font-weight:500;line-height:18px;letter-spacing:0}.ai-search__spinner{display:inline-block;width:14px;height:14px;border:2px solid #e9e9e9;border-top-color:#223cff;border-radius:50%;animation:ao-ai-search-spin .8s linear infinite}@keyframes ao-ai-search-spin{to{transform:rotate(360deg)}}.ai-search__view-all{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px;border:none;border-top:1px solid #e9e9e9;background:transparent;cursor:pointer;text-align:left;color:#212121;font-size:13px;font-weight:400;line-height:19.5px;letter-spacing:0}.ai-search__view-all:hover{background-color:#f3f3f3}.ai-search__view-all:focus-visible{outline:3px solid #223cff;outline-offset:-2px}\n"] }]
|
|
3152
3193
|
}], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], recommendedFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "recommendedFilters", required: false }] }], activeFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeFilter", required: false }] }, { type: i0.Output, args: ["activeFilterChange"] }], resultGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "resultGroups", required: false }] }], pageSuggestion: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSuggestion", required: false }] }], aiSuggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiSuggestions", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], panelOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelOpen", required: false }] }, { type: i0.Output, args: ["panelOpenChange"] }], voiceLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "voiceLanguage", required: false }] }], submit: [{ type: i0.Output, args: ["submit"] }], voiceStart: [{ type: i0.Output, args: ["voiceStart"] }], queryChange: [{ type: i0.Output, args: ["queryChange"] }], filterSelect: [{ type: i0.Output, args: ["filterSelect"] }], filterClear: [{ type: i0.Output, args: ["filterClear"] }], resultSelect: [{ type: i0.Output, args: ["resultSelect"] }], aiSuggestionSelect: [{ type: i0.Output, args: ["aiSuggestionSelect"] }], pageSuggestionSelect: [{ type: i0.Output, args: ["pageSuggestionSelect"] }], viewAllClick: [{ type: i0.Output, args: ["viewAllClick"] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], onDocumentClick: [{
|
|
3153
3194
|
type: HostListener,
|
|
3154
3195
|
args: ['document:click', ['$event']]
|
|
@@ -6048,13 +6089,13 @@ class SearchResultsPageComponent {
|
|
|
6048
6089
|
return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
6049
6090
|
}
|
|
6050
6091
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SearchResultsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6051
|
-
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 }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { typeFilter: "typeFilterChange", dateFilter: "dateFilterChange", resultClick: "resultClick", typeFilterClick: "typeFilterClick", dateFilterClick: "dateFilterClick" }, host: { 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 <button\n ao-button\n variant=\"outline\"\n [iconTrailing]=\"caretDownIcon\"\n (click)=\"onTypeFilterClick()\"\n >\n Typ\n </button>\n <button\n ao-button\n variant=\"outline\"\n [iconTrailing]=\"calendarIcon\"\n (click)=\"onDateFilterClick()\"\n >\n Datum\n </button>\n </div>\n</header>\n\n@for (group of groups(); 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\n type=\"button\"\n class=\"search-results__row\"\n (click)=\"onResultClick(r)\"\n >\n <span class=\"search-results__cell search-results__cell--primary\" [innerHTML]=\"highlight(r.primary)\"></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\n type=\"button\"\n class=\"search-results__ai-row\"\n (click)=\"onResultClick(r)\"\n >\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}\n", styles: [":host{display:block;padding:
|
|
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 }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { typeFilter: "typeFilterChange", dateFilter: "dateFilterChange", resultClick: "resultClick", typeFilterClick: "typeFilterClick", dateFilterClick: "dateFilterClick" }, host: { 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 <button\n ao-button\n variant=\"outline\"\n [iconTrailing]=\"caretDownIcon\"\n (click)=\"onTypeFilterClick()\"\n >\n Typ\n </button>\n <button\n ao-button\n variant=\"outline\"\n [iconTrailing]=\"calendarIcon\"\n (click)=\"onDateFilterClick()\"\n >\n Datum\n </button>\n </div>\n</header>\n\n@for (group of groups(); 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\n type=\"button\"\n class=\"search-results__row\"\n (click)=\"onResultClick(r)\"\n >\n <span class=\"search-results__cell search-results__cell--primary\" [innerHTML]=\"highlight(r.primary)\"></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\n type=\"button\"\n class=\"search-results__ai-row\"\n (click)=\"onResultClick(r)\"\n >\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}\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__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__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 });
|
|
6052
6093
|
}
|
|
6053
6094
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SearchResultsPageComponent, decorators: [{
|
|
6054
6095
|
type: Component,
|
|
6055
6096
|
args: [{ selector: 'ao-search-results-page', imports: [ButtonComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
6056
6097
|
class: 'ao-search-results-page',
|
|
6057
|
-
}, template: "<header class=\"search-results__header\">\n <h1 class=\"search-results__title\">Suchergebnisse</h1>\n <div class=\"search-results__filters\">\n <button\n ao-button\n variant=\"outline\"\n [iconTrailing]=\"caretDownIcon\"\n (click)=\"onTypeFilterClick()\"\n >\n Typ\n </button>\n <button\n ao-button\n variant=\"outline\"\n [iconTrailing]=\"calendarIcon\"\n (click)=\"onDateFilterClick()\"\n >\n Datum\n </button>\n </div>\n</header>\n\n@for (group of groups(); 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\n type=\"button\"\n class=\"search-results__row\"\n (click)=\"onResultClick(r)\"\n >\n <span class=\"search-results__cell search-results__cell--primary\" [innerHTML]=\"highlight(r.primary)\"></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\n type=\"button\"\n class=\"search-results__ai-row\"\n (click)=\"onResultClick(r)\"\n >\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}\n", styles: [":host{display:block;padding:
|
|
6098
|
+
}, template: "<header class=\"search-results__header\">\n <h1 class=\"search-results__title\">Suchergebnisse</h1>\n <div class=\"search-results__filters\">\n <button\n ao-button\n variant=\"outline\"\n [iconTrailing]=\"caretDownIcon\"\n (click)=\"onTypeFilterClick()\"\n >\n Typ\n </button>\n <button\n ao-button\n variant=\"outline\"\n [iconTrailing]=\"calendarIcon\"\n (click)=\"onDateFilterClick()\"\n >\n Datum\n </button>\n </div>\n</header>\n\n@for (group of groups(); 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\n type=\"button\"\n class=\"search-results__row\"\n (click)=\"onResultClick(r)\"\n >\n <span class=\"search-results__cell search-results__cell--primary\" [innerHTML]=\"highlight(r.primary)\"></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\n type=\"button\"\n class=\"search-results__ai-row\"\n (click)=\"onResultClick(r)\"\n >\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}\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__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__hl{background-color:#fff59d;color:inherit;padding:0;border-radius:2px}\n"] }]
|
|
6058
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"] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }, { type: i0.Output, args: ["dateFilterChange"] }], resultClick: [{ type: i0.Output, args: ["resultClick"] }], typeFilterClick: [{ type: i0.Output, args: ["typeFilterClick"] }], dateFilterClick: [{ type: i0.Output, args: ["dateFilterClick"] }] } });
|
|
6059
6100
|
|
|
6060
6101
|
const ROBIN_API_BASE_URL = new InjectionToken('ROBIN_API_BASE_URL', {
|