@masmarino/gabarit 1.4.0 → 2.1.0

package/fesm2022/masmarino-gabarit-search-bar.mjs

@@ -0,0 +1,576 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, Injector, afterNextRender, booleanAttribute, computed, inject, input, model, output, signal, viewChild } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { Icon } from "@masmarino/gabarit/icon";
+let nextSearchBarId = 0;
+function collapsibleAttribute(value) {
+	return value === "narrow" ? "narrow" : booleanAttribute(value);
+}
+var SearchBar = class SearchBar {
+	elementRef = inject(ElementRef);
+	injector = inject(Injector);
+	id = input(`gbt-search-bar-${++nextSearchBarId}`, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	results = input(null, ...ngDevMode ? [{ debugName: "results" }] : /* istanbul ignore next */ []);
+	groupedResults = input(null, ...ngDevMode ? [{ debugName: "groupedResults" }] : /* istanbul ignore next */ []);
+	placeholder = input("Search…", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	displayFn = input((item) => String(item), ...ngDevMode ? [{ debugName: "displayFn" }] : /* istanbul ignore next */ []);
+	itemTemplate = input(...ngDevMode ? [void 0, { debugName: "itemTemplate" }] : /* istanbul ignore next */ []);
+	keepQueryOnSelect = input(false, ...ngDevMode ? [{ debugName: "keepQueryOnSelect" }] : /* istanbul ignore next */ []);
+	noResultsMessage = input("No results", ...ngDevMode ? [{ debugName: "noResultsMessage" }] : /* istanbul ignore next */ []);
+	noResultsHint = input("Try a different search.", ...ngDevMode ? [{ debugName: "noResultsHint" }] : /* istanbul ignore next */ []);
+	clearLabel = input("Clear search", ...ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []);
+	resultsAnnouncement = input((count) => `${count} result${count !== 1 ? "s" : ""}`, ...ngDevMode ? [{ debugName: "resultsAnnouncement" }] : /* istanbul ignore next */ []);
+	navigateHint = input("Navigate", ...ngDevMode ? [{ debugName: "navigateHint" }] : /* istanbul ignore next */ []);
+	selectHint = input("Select", ...ngDevMode ? [{ debugName: "selectHint" }] : /* istanbul ignore next */ []);
+	closeHint = input("Close", ...ngDevMode ? [{ debugName: "closeHint" }] : /* istanbul ignore next */ []);
+	collapsible = input(false, {
+		...ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {},
+		transform: collapsibleAttribute
+	});
+	expanded = model(false, ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+	openLabel = input("Search", ...ngDevMode ? [{ debugName: "openLabel" }] : /* istanbul ignore next */ []);
+	closeLabel = input("Close search", ...ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []);
+	queryChange = output();
+	itemSelected = output();
+	clear = output();
+	isFocused = signal(false, ...ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []);
+	showResults = signal(false, ...ngDevMode ? [{ debugName: "showResults" }] : /* istanbul ignore next */ []);
+	searchQuery = signal("", ...ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []);
+	activeIndex = signal(0, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
+	searchInput = viewChild("searchInput", ...ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []);
+	toggleButton = viewChild("toggle", ...ngDevMode ? [{ debugName: "toggleButton" }] : /* istanbul ignore next */ []);
+	collapsibleMode = computed(() => {
+		const mode = this.collapsible();
+		return mode === "narrow" ? "narrow" : mode ? "always" : null;
+	}, ...ngDevMode ? [{ debugName: "collapsibleMode" }] : /* istanbul ignore next */ []);
+	folded = computed(() => this.collapsibleMode() !== null && !this.expanded(), ...ngDevMode ? [{ debugName: "folded" }] : /* istanbul ignore next */ []);
+	triggerId = computed(() => `${this.id()}-trigger`, ...ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []);
+	hasGroupedResultsInput = computed(() => !!this.groupedResults(), ...ngDevMode ? [{ debugName: "hasGroupedResultsInput" }] : /* istanbul ignore next */ []);
+	allVisibleItems = computed(() => {
+		if (this.groupedResults()) return this.groupedResults().flatMap((category) => category.items);
+		return this.results() ?? [];
+	}, ...ngDevMode ? [{ debugName: "allVisibleItems" }] : /* istanbul ignore next */ []);
+	showOverlay = computed(() => this.showResults(), ...ngDevMode ? [{ debugName: "showOverlay" }] : /* istanbul ignore next */ []);
+	panelId = computed(() => `${this.id()}-panel`, ...ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []);
+	itemDomId(index) {
+		return `${this.id()}-item-${index}`;
+	}
+	indexedGroupedResults = computed(() => {
+		const grouped = this.groupedResults();
+		if (!grouped) return null;
+		const format = this.displayFn();
+		let index = 0;
+		return grouped.map((category) => ({
+			...category,
+			indexedItems: category.items.map((item) => ({
+				item,
+				index: index++,
+				formatted: format(item)
+			}))
+		}));
+	}, ...ngDevMode ? [{ debugName: "indexedGroupedResults" }] : /* istanbul ignore next */ []);
+	indexedResults = computed(() => {
+		const format = this.displayFn();
+		return (this.results() ?? []).map((item, index) => ({
+			item,
+			index,
+			formatted: format(item)
+		}));
+	}, ...ngDevMode ? [{ debugName: "indexedResults" }] : /* istanbul ignore next */ []);
+	activeItemDomId = computed(() => {
+		if (!this.showOverlay()) return null;
+		const idx = this.activeIndex();
+		return idx >= 0 && idx < this.allVisibleItems().length ? this.itemDomId(idx) : null;
+	}, ...ngDevMode ? [{ debugName: "activeItemDomId" }] : /* istanbul ignore next */ []);
+	resultCount = computed(() => this.showOverlay() ? this.allVisibleItems().length : 0, ...ngDevMode ? [{ debugName: "resultCount" }] : /* istanbul ignore next */ []);
+	hasGroupedResults = computed(() => this.hasGroupedResultsInput() && !!this.groupedResults()?.some((c) => c.items.length > 0), ...ngDevMode ? [{ debugName: "hasGroupedResults" }] : /* istanbul ignore next */ []);
+	hasNoResults = computed(() => this.allVisibleItems().length === 0, ...ngDevMode ? [{ debugName: "hasNoResults" }] : /* istanbul ignore next */ []);
+	onNavigationKeydown(event) {
+		if (event.key === "Escape" && this.collapsibleMode() !== null && this.expanded() && !this.showOverlay()) {
+			event.preventDefault();
+			this.fold(true);
+			return;
+		}
+		if (!this.isFocused() || !this.showOverlay()) return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			this.blurSearch();
+			return;
+		}
+		const items = this.allVisibleItems();
+		if (items.length === 0) return;
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				this.activeIndex.update((i) => Math.min(i + 1, items.length - 1));
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				this.activeIndex.update((i) => Math.max(i - 1, 0));
+				break;
+			case "Enter": {
+				const active = items[this.activeIndex()];
+				if (!active) break;
+				event.preventDefault();
+				this.onSelect(active);
+				break;
+			}
+		}
+	}
+	handleClickOutside(event) {
+		if (!this.elementRef.nativeElement.contains(event.target)) this.showResults.set(false);
+	}
+	focusSearch() {
+		this.searchInput()?.nativeElement.focus();
+	}
+	blurSearch() {
+		this.searchInput()?.nativeElement.blur();
+		this.showResults.set(false);
+	}
+	onFocus() {
+		this.isFocused.set(true);
+		if (this.searchQuery().length > 0) this.showResults.set(true);
+	}
+	expand() {
+		this.expanded.set(true);
+		afterNextRender(() => this.focusSearch(), { injector: this.injector });
+	}
+	fold(returnFocus) {
+		this.expanded.set(false);
+		if (returnFocus) afterNextRender(() => this.toggleButton()?.nativeElement.focus(), { injector: this.injector });
+	}
+	close(event) {
+		event.stopPropagation();
+		this.showResults.set(false);
+		this.fold(true);
+	}
+	onBlur(event) {
+		this.isFocused.set(false);
+		if (this.collapsibleMode() !== null && this.expanded() && this.searchQuery().length === 0 && !this.elementRef.nativeElement.contains(event?.relatedTarget)) this.fold(false);
+		setTimeout(() => {
+			if (!this.elementRef.nativeElement.contains(document.activeElement)) this.showResults.set(false);
+		}, 200);
+	}
+	onInput(event) {
+		const value = event.target.value;
+		this.searchQuery.set(value);
+		this.activeIndex.set(0);
+		this.showResults.set(value.length > 0);
+		this.queryChange.emit(value);
+	}
+	onClear() {
+		this.searchQuery.set("");
+		this.activeIndex.set(0);
+		this.showResults.set(false);
+		this.clear.emit();
+		this.focusSearch();
+	}
+	onSelect(item) {
+		this.itemSelected.emit(item);
+		this.showResults.set(false);
+		this.searchQuery.set(this.keepQueryOnSelect() ? this.displayFn()(item) : "");
+		if (this.collapsibleMode() !== null && !this.keepQueryOnSelect()) this.fold(false);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: SearchBar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: SearchBar,
+		isStandalone: true,
+		selector: "gbt-search-bar",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			results: {
+				classPropertyName: "results",
+				publicName: "results",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			groupedResults: {
+				classPropertyName: "groupedResults",
+				publicName: "groupedResults",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			displayFn: {
+				classPropertyName: "displayFn",
+				publicName: "displayFn",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			itemTemplate: {
+				classPropertyName: "itemTemplate",
+				publicName: "itemTemplate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			keepQueryOnSelect: {
+				classPropertyName: "keepQueryOnSelect",
+				publicName: "keepQueryOnSelect",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			noResultsMessage: {
+				classPropertyName: "noResultsMessage",
+				publicName: "noResultsMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			noResultsHint: {
+				classPropertyName: "noResultsHint",
+				publicName: "noResultsHint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearLabel: {
+				classPropertyName: "clearLabel",
+				publicName: "clearLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			resultsAnnouncement: {
+				classPropertyName: "resultsAnnouncement",
+				publicName: "resultsAnnouncement",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			navigateHint: {
+				classPropertyName: "navigateHint",
+				publicName: "navigateHint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectHint: {
+				classPropertyName: "selectHint",
+				publicName: "selectHint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeHint: {
+				classPropertyName: "closeHint",
+				publicName: "closeHint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapsible: {
+				classPropertyName: "collapsible",
+				publicName: "collapsible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			expanded: {
+				classPropertyName: "expanded",
+				publicName: "expanded",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			openLabel: {
+				classPropertyName: "openLabel",
+				publicName: "openLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeLabel: {
+				classPropertyName: "closeLabel",
+				publicName: "closeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			expanded: "expandedChange",
+			queryChange: "queryChange",
+			itemSelected: "itemSelected",
+			clear: "clear"
+		},
+		host: {
+			listeners: {
+				"keydown": "onNavigationKeydown($event)",
+				"document:click": "handleClickOutside($event)"
+			},
+			properties: {
+				"attr.data-collapsible": "collapsibleMode()",
+				"attr.data-expanded": "collapsibleMode() && expanded() ? \"\" : null"
+			}
+		},
+		viewQueries: [{
+			propertyName: "searchInput",
+			first: true,
+			predicate: ["searchInput"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "toggleButton",
+			first: true,
+			predicate: ["toggle"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "@if (collapsibleMode()) {\n  @if (folded()) {\n    <button\n      #toggle\n      type=\"button\"\n      class=\"gbt-sb-toggle\"\n      aria-expanded=\"false\"\n      [attr.aria-controls]=\"triggerId()\"\n      [attr.aria-label]=\"openLabel()\"\n      (click)=\"expand()\"\n    >\n      <gbt-icon name=\"search\" aria-hidden=\"true\" />\n    </button>\n  }\n}\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<div\n  class=\"gbt-sb-trigger\"\n  [attr.id]=\"collapsibleMode() ? triggerId() : null\"\n  [attr.hidden]=\"folded() && collapsibleMode() === 'always' ? '' : null\"\n  [class.gbt-sb-trigger--folded]=\"folded()\"\n  [class.gbt-sb-trigger--open]=\"isFocused()\"\n  (click)=\"focusSearch()\"\n>\n  @if (collapsibleMode() && expanded()) {\n    <button\n      type=\"button\"\n      class=\"gbt-sb-trigger__close\"\n      [attr.aria-label]=\"closeLabel()\"\n      (click)=\"close($event)\"\n    >\n      <gbt-icon name=\"arrow-left\" aria-hidden=\"true\" />\n    </button>\n  }\n  <gbt-icon name=\"search\" class=\"gbt-sb-trigger__icon\" aria-hidden=\"true\" />\n  <input\n    #searchInput\n    type=\"text\"\n    role=\"combobox\"\n    class=\"gbt-sb-trigger__input\"\n    [placeholder]=\"placeholder()\"\n    [attr.aria-label]=\"ariaLabel() || placeholder()\"\n    [value]=\"searchQuery()\"\n    [attr.aria-expanded]=\"showOverlay()\"\n    aria-autocomplete=\"list\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-controls]=\"showOverlay() ? panelId() : null\"\n    [attr.aria-activedescendant]=\"activeItemDomId()\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur($event)\"\n    (input)=\"onInput($event)\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n  />\n  @if (searchQuery().length > 0) {\n    <button\n      type=\"button\"\n      class=\"gbt-sb-trigger__clear\"\n      (click)=\"onClear()\"\n      [attr.aria-label]=\"clearLabel()\"\n    >\n      <gbt-icon name=\"x\" aria-hidden=\"true\" />\n    </button>\n  }\n</div>\n@if (showOverlay()) {\n  <div role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">\n    {{ resultsAnnouncement()(resultCount()) }}\n  </div>\n}\n@if (showOverlay()) {\n  <div class=\"gbt-sb-backdrop\" (click)=\"blurSearch()\" aria-hidden=\"true\"></div>\n  <ng-template #footer>\n    <div class=\"gbt-sb-footer\" aria-hidden=\"true\">\n      <span class=\"gbt-sb-footer__hint\">\n        <kbd class=\"gbt-sb-kbd gbt-sb-kbd--sm\">↑</kbd>\n        <kbd class=\"gbt-sb-kbd gbt-sb-kbd--sm\">↓</kbd>\n        {{ navigateHint() }}\n      </span>\n      <span class=\"gbt-sb-footer__hint\">\n        <kbd class=\"gbt-sb-kbd gbt-sb-kbd--sm\">↵</kbd>\n        {{ selectHint() }}\n      </span>\n      <span class=\"gbt-sb-footer__hint\">\n        <kbd class=\"gbt-sb-kbd gbt-sb-kbd--sm\">Esc</kbd>\n        {{ closeHint() }}\n      </span>\n    </div>\n  </ng-template>\n  @if (hasNoResults()) {\n    <div [id]=\"panelId()\" class=\"gbt-sb-panel\">\n      <div class=\"gbt-sb-state\" role=\"status\">\n        <gbt-icon name=\"search\" class=\"gbt-sb-state__icon\" aria-hidden=\"true\" />\n        <span>{{ noResultsMessage() }}</span>\n        <p class=\"gbt-sb-state__hint\">{{ noResultsHint() }}</p>\n      </div>\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\n    </div>\n  } @else {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n    <div\n      [id]=\"panelId()\"\n      class=\"gbt-sb-panel\"\n      role=\"listbox\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      @if (hasGroupedResults()) {\n        <div class=\"gbt-sb-list\">\n          @for (category of indexedGroupedResults(); track category.label) {\n            @if (category.items.length > 0) {\n              <div class=\"gbt-sb-group-label\">\n                @if (category.icon) {\n                  <gbt-icon [name]=\"category.icon\" aria-hidden=\"true\" />\n                }\n                {{ category.label }}\n                <span class=\"gbt-sb-group-count\" aria-hidden=\"true\">{{\n                  category.items.length\n                }}</span>\n              </div>\n              @for (entry of category.indexedItems; track entry.index) {\n                <button\n                  type=\"button\"\n                  role=\"option\"\n                  tabindex=\"-1\"\n                  [id]=\"itemDomId(entry.index)\"\n                  class=\"gbt-sb-item\"\n                  [attr.aria-selected]=\"entry.index === activeIndex()\"\n                  [class.gbt-sb-item--active]=\"entry.index === activeIndex()\"\n                  (click)=\"onSelect(entry.item)\"\n                  (mouseenter)=\"activeIndex.set(entry.index)\"\n                >\n                  @if (itemTemplate()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"itemTemplate()!\"\n                      [ngTemplateOutletContext]=\"{ $implicit: entry.item }\"\n                    ></ng-container>\n                  } @else {\n                    @if (category.icon) {\n                      <gbt-icon\n                        [name]=\"category.icon\"\n                        class=\"gbt-sb-item__icon\"\n                        aria-hidden=\"true\"\n                      />\n                    }\n                    <span class=\"gbt-sb-item__label\">{{ entry.formatted }}</span>\n                  }\n                </button>\n              }\n            }\n          }\n        </div>\n      } @else if (results() && results()!.length > 0) {\n        <div class=\"gbt-sb-list\">\n          @for (entry of indexedResults(); track entry.index) {\n            <button\n              type=\"button\"\n              role=\"option\"\n              tabindex=\"-1\"\n              [id]=\"itemDomId(entry.index)\"\n              class=\"gbt-sb-item\"\n              [attr.aria-selected]=\"entry.index === activeIndex()\"\n              [class.gbt-sb-item--active]=\"entry.index === activeIndex()\"\n              (click)=\"onSelect(entry.item)\"\n              (mouseenter)=\"activeIndex.set(entry.index)\"\n            >\n              @if (itemTemplate()) {\n                <ng-container\n                  [ngTemplateOutlet]=\"itemTemplate()!\"\n                  [ngTemplateOutletContext]=\"{ $implicit: entry.item }\"\n                ></ng-container>\n              } @else {\n                <span class=\"gbt-sb-item__label\">{{ entry.formatted }}</span>\n              }\n            </button>\n          }\n        </div>\n      }\n\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\n    </div>\n  }\n}\n",
+		styles: [":host{position:relative;display:block}.gbt-sb-trigger{position:relative;z-index:1000;box-sizing:border-box;display:flex;align-items:center;gap:8px;height:40px;width:340px;padding:0 12px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--gbt-radius-search, 3px);transition:width .35s cubic-bezier(.34,1.56,.64,1),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1);cursor:text}.gbt-sb-trigger--open{width:420px;border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}.gbt-sb-trigger__icon{flex-shrink:0;color:var(--text-secondary);transition:color .2s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.34,1.56,.64,1)}.gbt-sb-trigger--open .gbt-sb-trigger__icon{color:var(--primary);transform:scale(1.1) rotate(5deg)}.gbt-sb-trigger__input{flex:1;min-width:0;border:none;outline:none;background:transparent;color:var(--text-primary);font-size:14px;line-height:1.5}.gbt-sb-trigger__input::placeholder{color:var(--text-secondary)}.gbt-sb-trigger__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:var(--gbt-radius-chip, 2px);color:var(--text-secondary);cursor:pointer;transition:background .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1)}.gbt-sb-trigger__clear:hover{background:var(--bg-hover);color:var(--text-primary)}.gbt-sb-trigger__clear:active{transform:scale(.9)}.gbt-sb-trigger[hidden],.gbt-sb-trigger--folded{display:none}.gbt-sb-toggle{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;border-radius:var(--site-border-radius-sm);background:none;color:var(--text-primary);cursor:pointer;transition:background .15s cubic-bezier(.4,0,.2,1)}.gbt-sb-toggle:hover{background:var(--bg-hover)}.gbt-sb-toggle:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-sb-trigger__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:44px;height:calc(100% + 2px);margin:-1px 0 -1px -13px;padding:0;background:transparent;border:none;border-radius:calc(var(--gbt-radius-search, 3px) - 1px) 0 0 calc(var(--gbt-radius-search, 3px) - 1px);color:var(--text-secondary);cursor:pointer;transition:background .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1)}.gbt-sb-trigger__close:hover{background:var(--bg-hover);color:var(--text-primary)}.gbt-sb-trigger__close:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px}@media(prefers-reduced-motion:reduce){.gbt-sb-trigger__close{transition:none}}:host([data-collapsible][data-expanded]) .gbt-sb-trigger__icon{display:none}:host([data-collapsible]) .gbt-sb-trigger{width:100%;height:44px}:host([data-collapsible]) .gbt-sb-trigger--open{width:100%}@media(min-width:769px){:host([data-collapsible=narrow]) .gbt-sb-toggle,:host([data-collapsible=narrow]) .gbt-sb-trigger__close{display:none}:host([data-collapsible=narrow]) .gbt-sb-trigger__icon{display:inline-flex}:host([data-collapsible=narrow]) .gbt-sb-trigger--folded{display:flex}:host([data-collapsible=narrow]) .gbt-sb-trigger{width:340px;height:40px}:host([data-collapsible=narrow]) .gbt-sb-trigger--open{width:420px}}.gbt-sb-backdrop{position:fixed;inset:0;background:#0000004d;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:999;animation:gbt-search-bar-fade-in .2s cubic-bezier(.4,0,.2,1) both}.gbt-sb-panel{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);width:420px;max-height:460px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius);box-shadow:0 16px 48px #0000002e,0 4px 12px #00000014;overflow:hidden;display:flex;flex-direction:column;z-index:1001;animation:gbt-search-bar-scale-in .25s cubic-bezier(.34,1.56,.64,1) both}.gbt-sb-list{flex:1;overflow-y:auto;padding:6px;display:flex;flex-direction:column}.gbt-sb-list::-webkit-scrollbar{width:6px}.gbt-sb-list::-webkit-scrollbar-track{background:transparent}.gbt-sb-list::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:3px}.gbt-sb-list::-webkit-scrollbar-thumb:hover{background:var(--border-color)}.gbt-sb-group-label{display:flex;align-items:center;gap:6px;padding:10px 10px 4px;color:var(--text-secondary);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.gbt-sb-group-count{margin-left:auto;padding:1px 7px;background:var(--bg-hover);border-radius:var(--gbt-radius-badge, 3px);font-size:11px;font-weight:600;color:var(--text-secondary)}.gbt-sb-item{box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;background:transparent;border:none;border-radius:var(--gbt-radius-menu, 4px);text-align:left;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-sb-item:hover{background:var(--bg-hover)}.gbt-sb-item--active{background:color-mix(in srgb,var(--primary) 9%,transparent)}.gbt-sb-item__icon{flex-shrink:0;color:var(--text-secondary);transition:color .15s cubic-bezier(.4,0,.2,1)}.gbt-sb-item--active .gbt-sb-item__icon{color:var(--primary)}.gbt-sb-item__label{flex:1;font-size:14px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-sb-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;text-align:center}.gbt-sb-state span{color:var(--text-primary);font-size:14px;font-weight:500}.gbt-sb-state__icon{color:var(--text-secondary);opacity:.4}.gbt-sb-state__hint{margin:0;color:var(--text-secondary);font-size:12px}.gbt-sb-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 5px;background:var(--bg-hover);border:1px solid var(--border-color);border-bottom-width:2px;border-radius:var(--gbt-radius-chip, 2px);color:var(--text-secondary);font-size:11px;font-family:var(--gbt-font-mono);font-weight:500;line-height:1}.gbt-sb-kbd--sm{min-width:18px;height:18px;font-size:10px;border-radius:4px}.gbt-sb-footer{flex-shrink:0;display:flex;align-items:center;gap:16px;padding:8px 12px;border-top:1px solid var(--border-color);background:var(--bg-hover)}.gbt-sb-footer__hint{display:flex;align-items:center;gap:4px;color:var(--text-secondary);font-size:11px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes gbt-search-bar-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gbt-search-bar-scale-in{0%{opacity:0;transform:translate(-50%) scale(.96) translateY(-6px)}to{opacity:1;transform:translate(-50%) scale(1) translateY(0)}}@media(prefers-reduced-motion:reduce){.gbt-sb-toggle{transition:none}.gbt-sb-trigger{transition:border-color .15s,box-shadow .15s}.gbt-sb-trigger__icon{transition:color .15s;transform:none!important}.gbt-sb-trigger__clear{transition:none}.gbt-sb-trigger__clear:active{transform:none}.gbt-sb-backdrop,.gbt-sb-panel{animation:none}}@media screen and (max-width:800px){.gbt-sb-trigger,.gbt-sb-trigger--open{width:100%}.gbt-sb-panel{width:calc(100vw - 32px);max-height:360px}.gbt-sb-state{padding:32px 16px}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: Icon,
+			selector: "gbt-icon",
+			inputs: ["name"]
+		}, {
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: SearchBar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-search-bar",
+			standalone: true,
+			imports: [Icon, NgTemplateOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"(keydown)": "onNavigationKeydown($event)",
+				"(document:click)": "handleClickOutside($event)",
+				"[attr.data-collapsible]": "collapsibleMode()",
+				"[attr.data-expanded]": "collapsibleMode() && expanded() ? \"\" : null"
+			},
+			template: "@if (collapsibleMode()) {\n  @if (folded()) {\n    <button\n      #toggle\n      type=\"button\"\n      class=\"gbt-sb-toggle\"\n      aria-expanded=\"false\"\n      [attr.aria-controls]=\"triggerId()\"\n      [attr.aria-label]=\"openLabel()\"\n      (click)=\"expand()\"\n    >\n      <gbt-icon name=\"search\" aria-hidden=\"true\" />\n    </button>\n  }\n}\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<div\n  class=\"gbt-sb-trigger\"\n  [attr.id]=\"collapsibleMode() ? triggerId() : null\"\n  [attr.hidden]=\"folded() && collapsibleMode() === 'always' ? '' : null\"\n  [class.gbt-sb-trigger--folded]=\"folded()\"\n  [class.gbt-sb-trigger--open]=\"isFocused()\"\n  (click)=\"focusSearch()\"\n>\n  @if (collapsibleMode() && expanded()) {\n    <button\n      type=\"button\"\n      class=\"gbt-sb-trigger__close\"\n      [attr.aria-label]=\"closeLabel()\"\n      (click)=\"close($event)\"\n    >\n      <gbt-icon name=\"arrow-left\" aria-hidden=\"true\" />\n    </button>\n  }\n  <gbt-icon name=\"search\" class=\"gbt-sb-trigger__icon\" aria-hidden=\"true\" />\n  <input\n    #searchInput\n    type=\"text\"\n    role=\"combobox\"\n    class=\"gbt-sb-trigger__input\"\n    [placeholder]=\"placeholder()\"\n    [attr.aria-label]=\"ariaLabel() || placeholder()\"\n    [value]=\"searchQuery()\"\n    [attr.aria-expanded]=\"showOverlay()\"\n    aria-autocomplete=\"list\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-controls]=\"showOverlay() ? panelId() : null\"\n    [attr.aria-activedescendant]=\"activeItemDomId()\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur($event)\"\n    (input)=\"onInput($event)\"\n    autocomplete=\"off\"\n    spellcheck=\"false\"\n  />\n  @if (searchQuery().length > 0) {\n    <button\n      type=\"button\"\n      class=\"gbt-sb-trigger__clear\"\n      (click)=\"onClear()\"\n      [attr.aria-label]=\"clearLabel()\"\n    >\n      <gbt-icon name=\"x\" aria-hidden=\"true\" />\n    </button>\n  }\n</div>\n@if (showOverlay()) {\n  <div role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">\n    {{ resultsAnnouncement()(resultCount()) }}\n  </div>\n}\n@if (showOverlay()) {\n  <div class=\"gbt-sb-backdrop\" (click)=\"blurSearch()\" aria-hidden=\"true\"></div>\n  <ng-template #footer>\n    <div class=\"gbt-sb-footer\" aria-hidden=\"true\">\n      <span class=\"gbt-sb-footer__hint\">\n        <kbd class=\"gbt-sb-kbd gbt-sb-kbd--sm\">↑</kbd>\n        <kbd class=\"gbt-sb-kbd gbt-sb-kbd--sm\">↓</kbd>\n        {{ navigateHint() }}\n      </span>\n      <span class=\"gbt-sb-footer__hint\">\n        <kbd class=\"gbt-sb-kbd gbt-sb-kbd--sm\">↵</kbd>\n        {{ selectHint() }}\n      </span>\n      <span class=\"gbt-sb-footer__hint\">\n        <kbd class=\"gbt-sb-kbd gbt-sb-kbd--sm\">Esc</kbd>\n        {{ closeHint() }}\n      </span>\n    </div>\n  </ng-template>\n  @if (hasNoResults()) {\n    <div [id]=\"panelId()\" class=\"gbt-sb-panel\">\n      <div class=\"gbt-sb-state\" role=\"status\">\n        <gbt-icon name=\"search\" class=\"gbt-sb-state__icon\" aria-hidden=\"true\" />\n        <span>{{ noResultsMessage() }}</span>\n        <p class=\"gbt-sb-state__hint\">{{ noResultsHint() }}</p>\n      </div>\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\n    </div>\n  } @else {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n    <div\n      [id]=\"panelId()\"\n      class=\"gbt-sb-panel\"\n      role=\"listbox\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      @if (hasGroupedResults()) {\n        <div class=\"gbt-sb-list\">\n          @for (category of indexedGroupedResults(); track category.label) {\n            @if (category.items.length > 0) {\n              <div class=\"gbt-sb-group-label\">\n                @if (category.icon) {\n                  <gbt-icon [name]=\"category.icon\" aria-hidden=\"true\" />\n                }\n                {{ category.label }}\n                <span class=\"gbt-sb-group-count\" aria-hidden=\"true\">{{\n                  category.items.length\n                }}</span>\n              </div>\n              @for (entry of category.indexedItems; track entry.index) {\n                <button\n                  type=\"button\"\n                  role=\"option\"\n                  tabindex=\"-1\"\n                  [id]=\"itemDomId(entry.index)\"\n                  class=\"gbt-sb-item\"\n                  [attr.aria-selected]=\"entry.index === activeIndex()\"\n                  [class.gbt-sb-item--active]=\"entry.index === activeIndex()\"\n                  (click)=\"onSelect(entry.item)\"\n                  (mouseenter)=\"activeIndex.set(entry.index)\"\n                >\n                  @if (itemTemplate()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"itemTemplate()!\"\n                      [ngTemplateOutletContext]=\"{ $implicit: entry.item }\"\n                    ></ng-container>\n                  } @else {\n                    @if (category.icon) {\n                      <gbt-icon\n                        [name]=\"category.icon\"\n                        class=\"gbt-sb-item__icon\"\n                        aria-hidden=\"true\"\n                      />\n                    }\n                    <span class=\"gbt-sb-item__label\">{{ entry.formatted }}</span>\n                  }\n                </button>\n              }\n            }\n          }\n        </div>\n      } @else if (results() && results()!.length > 0) {\n        <div class=\"gbt-sb-list\">\n          @for (entry of indexedResults(); track entry.index) {\n            <button\n              type=\"button\"\n              role=\"option\"\n              tabindex=\"-1\"\n              [id]=\"itemDomId(entry.index)\"\n              class=\"gbt-sb-item\"\n              [attr.aria-selected]=\"entry.index === activeIndex()\"\n              [class.gbt-sb-item--active]=\"entry.index === activeIndex()\"\n              (click)=\"onSelect(entry.item)\"\n              (mouseenter)=\"activeIndex.set(entry.index)\"\n            >\n              @if (itemTemplate()) {\n                <ng-container\n                  [ngTemplateOutlet]=\"itemTemplate()!\"\n                  [ngTemplateOutletContext]=\"{ $implicit: entry.item }\"\n                ></ng-container>\n              } @else {\n                <span class=\"gbt-sb-item__label\">{{ entry.formatted }}</span>\n              }\n            </button>\n          }\n        </div>\n      }\n\n      <ng-container [ngTemplateOutlet]=\"footer\"></ng-container>\n    </div>\n  }\n}\n",
+			styles: [":host{position:relative;display:block}.gbt-sb-trigger{position:relative;z-index:1000;box-sizing:border-box;display:flex;align-items:center;gap:8px;height:40px;width:340px;padding:0 12px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--gbt-radius-search, 3px);transition:width .35s cubic-bezier(.34,1.56,.64,1),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1);cursor:text}.gbt-sb-trigger--open{width:420px;border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}.gbt-sb-trigger__icon{flex-shrink:0;color:var(--text-secondary);transition:color .2s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.34,1.56,.64,1)}.gbt-sb-trigger--open .gbt-sb-trigger__icon{color:var(--primary);transform:scale(1.1) rotate(5deg)}.gbt-sb-trigger__input{flex:1;min-width:0;border:none;outline:none;background:transparent;color:var(--text-primary);font-size:14px;line-height:1.5}.gbt-sb-trigger__input::placeholder{color:var(--text-secondary)}.gbt-sb-trigger__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:var(--gbt-radius-chip, 2px);color:var(--text-secondary);cursor:pointer;transition:background .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1)}.gbt-sb-trigger__clear:hover{background:var(--bg-hover);color:var(--text-primary)}.gbt-sb-trigger__clear:active{transform:scale(.9)}.gbt-sb-trigger[hidden],.gbt-sb-trigger--folded{display:none}.gbt-sb-toggle{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;border-radius:var(--site-border-radius-sm);background:none;color:var(--text-primary);cursor:pointer;transition:background .15s cubic-bezier(.4,0,.2,1)}.gbt-sb-toggle:hover{background:var(--bg-hover)}.gbt-sb-toggle:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-sb-trigger__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:44px;height:calc(100% + 2px);margin:-1px 0 -1px -13px;padding:0;background:transparent;border:none;border-radius:calc(var(--gbt-radius-search, 3px) - 1px) 0 0 calc(var(--gbt-radius-search, 3px) - 1px);color:var(--text-secondary);cursor:pointer;transition:background .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1)}.gbt-sb-trigger__close:hover{background:var(--bg-hover);color:var(--text-primary)}.gbt-sb-trigger__close:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px}@media(prefers-reduced-motion:reduce){.gbt-sb-trigger__close{transition:none}}:host([data-collapsible][data-expanded]) .gbt-sb-trigger__icon{display:none}:host([data-collapsible]) .gbt-sb-trigger{width:100%;height:44px}:host([data-collapsible]) .gbt-sb-trigger--open{width:100%}@media(min-width:769px){:host([data-collapsible=narrow]) .gbt-sb-toggle,:host([data-collapsible=narrow]) .gbt-sb-trigger__close{display:none}:host([data-collapsible=narrow]) .gbt-sb-trigger__icon{display:inline-flex}:host([data-collapsible=narrow]) .gbt-sb-trigger--folded{display:flex}:host([data-collapsible=narrow]) .gbt-sb-trigger{width:340px;height:40px}:host([data-collapsible=narrow]) .gbt-sb-trigger--open{width:420px}}.gbt-sb-backdrop{position:fixed;inset:0;background:#0000004d;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:999;animation:gbt-search-bar-fade-in .2s cubic-bezier(.4,0,.2,1) both}.gbt-sb-panel{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);width:420px;max-height:460px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius);box-shadow:0 16px 48px #0000002e,0 4px 12px #00000014;overflow:hidden;display:flex;flex-direction:column;z-index:1001;animation:gbt-search-bar-scale-in .25s cubic-bezier(.34,1.56,.64,1) both}.gbt-sb-list{flex:1;overflow-y:auto;padding:6px;display:flex;flex-direction:column}.gbt-sb-list::-webkit-scrollbar{width:6px}.gbt-sb-list::-webkit-scrollbar-track{background:transparent}.gbt-sb-list::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:3px}.gbt-sb-list::-webkit-scrollbar-thumb:hover{background:var(--border-color)}.gbt-sb-group-label{display:flex;align-items:center;gap:6px;padding:10px 10px 4px;color:var(--text-secondary);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.gbt-sb-group-count{margin-left:auto;padding:1px 7px;background:var(--bg-hover);border-radius:var(--gbt-radius-badge, 3px);font-size:11px;font-weight:600;color:var(--text-secondary)}.gbt-sb-item{box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;background:transparent;border:none;border-radius:var(--gbt-radius-menu, 4px);text-align:left;cursor:pointer;transition:background .12s cubic-bezier(.4,0,.2,1)}.gbt-sb-item:hover{background:var(--bg-hover)}.gbt-sb-item--active{background:color-mix(in srgb,var(--primary) 9%,transparent)}.gbt-sb-item__icon{flex-shrink:0;color:var(--text-secondary);transition:color .15s cubic-bezier(.4,0,.2,1)}.gbt-sb-item--active .gbt-sb-item__icon{color:var(--primary)}.gbt-sb-item__label{flex:1;font-size:14px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gbt-sb-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;text-align:center}.gbt-sb-state span{color:var(--text-primary);font-size:14px;font-weight:500}.gbt-sb-state__icon{color:var(--text-secondary);opacity:.4}.gbt-sb-state__hint{margin:0;color:var(--text-secondary);font-size:12px}.gbt-sb-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 5px;background:var(--bg-hover);border:1px solid var(--border-color);border-bottom-width:2px;border-radius:var(--gbt-radius-chip, 2px);color:var(--text-secondary);font-size:11px;font-family:var(--gbt-font-mono);font-weight:500;line-height:1}.gbt-sb-kbd--sm{min-width:18px;height:18px;font-size:10px;border-radius:4px}.gbt-sb-footer{flex-shrink:0;display:flex;align-items:center;gap:16px;padding:8px 12px;border-top:1px solid var(--border-color);background:var(--bg-hover)}.gbt-sb-footer__hint{display:flex;align-items:center;gap:4px;color:var(--text-secondary);font-size:11px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes gbt-search-bar-fade-in{0%{opacity:0}to{opacity:1}}@keyframes gbt-search-bar-scale-in{0%{opacity:0;transform:translate(-50%) scale(.96) translateY(-6px)}to{opacity:1;transform:translate(-50%) scale(1) translateY(0)}}@media(prefers-reduced-motion:reduce){.gbt-sb-toggle{transition:none}.gbt-sb-trigger{transition:border-color .15s,box-shadow .15s}.gbt-sb-trigger__icon{transition:color .15s;transform:none!important}.gbt-sb-trigger__clear{transition:none}.gbt-sb-trigger__clear:active{transform:none}.gbt-sb-backdrop,.gbt-sb-panel{animation:none}}@media screen and (max-width:800px){.gbt-sb-trigger,.gbt-sb-trigger--open{width:100%}.gbt-sb-panel{width:calc(100vw - 32px);max-height:360px}.gbt-sb-state{padding:32px 16px}}\n"]
+		}]
+	}],
+	propDecorators: {
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		results: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "results",
+				required: false
+			}]
+		}],
+		groupedResults: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "groupedResults",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		displayFn: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "displayFn",
+				required: false
+			}]
+		}],
+		itemTemplate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "itemTemplate",
+				required: false
+			}]
+		}],
+		keepQueryOnSelect: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "keepQueryOnSelect",
+				required: false
+			}]
+		}],
+		noResultsMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "noResultsMessage",
+				required: false
+			}]
+		}],
+		noResultsHint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "noResultsHint",
+				required: false
+			}]
+		}],
+		clearLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearLabel",
+				required: false
+			}]
+		}],
+		resultsAnnouncement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "resultsAnnouncement",
+				required: false
+			}]
+		}],
+		navigateHint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navigateHint",
+				required: false
+			}]
+		}],
+		selectHint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectHint",
+				required: false
+			}]
+		}],
+		closeHint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeHint",
+				required: false
+			}]
+		}],
+		collapsible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsible",
+				required: false
+			}]
+		}],
+		expanded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expanded",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["expandedChange"]
+		}],
+		openLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "openLabel",
+				required: false
+			}]
+		}],
+		closeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeLabel",
+				required: false
+			}]
+		}],
+		queryChange: [{
+			type: i0.Output,
+			args: ["queryChange"]
+		}],
+		itemSelected: [{
+			type: i0.Output,
+			args: ["itemSelected"]
+		}],
+		clear: [{
+			type: i0.Output,
+			args: ["clear"]
+		}],
+		searchInput: [{
+			type: i0.ViewChild,
+			args: ["searchInput", { isSignal: true }]
+		}],
+		toggleButton: [{
+			type: i0.ViewChild,
+			args: ["toggle", { isSignal: true }]
+		}]
+	}
+});
+export { SearchBar };
+
+//# sourceMappingURL=masmarino-gabarit-search-bar.mjs.map