@gravionlabs/helix-ui 22.2.2 → 22.2.3

package/fesm2022/gravionlabs-helix-ui.mjs

@@ -4890,6 +4890,13 @@ var HxSelect = class HxSelect {
 	optionDisabled = input("disabled", ...ngDevMode ? [{ debugName: "optionDisabled" }] : 	/* istanbul ignore next */ []);
 	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : 	/* istanbul ignore next */ []);
 	emptyMessage = input("No options", ...ngDevMode ? [{ debugName: "emptyMessage" }] : 	/* istanbul ignore next */ []);
+	filter = input(false, {
+		...ngDevMode ? { debugName: "filter" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	filterPlaceholder = input("Search", ...ngDevMode ? [{ debugName: "filterPlaceholder" }] : 	/* istanbul ignore next */ []);
+	filterBy = input(...ngDevMode ? [void 0, { debugName: "filterBy" }] : 	/* istanbul ignore next */ []);
+	emptyFilterMessage = input("No results", ...ngDevMode ? [{ debugName: "emptyFilterMessage" }] : 	/* istanbul ignore next */ []);
 	size = input("medium", ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
 	variant = input("outlined", ...ngDevMode ? [{ debugName: "variant" }] : 	/* istanbul ignore next */ []);
 	fluid = input(false, {
@@ -4932,9 +4939,25 @@ var HxSelect = class HxSelect {
 	}];
 	trigger = viewChild.required("trigger", ...ngDevMode ? [{ debugName: "trigger" }] : 	/* istanbul ignore next */ []);
 	listbox = viewChild(CdkListbox, ...ngDevMode ? [{ debugName: "listbox" }] : 	/* istanbul ignore next */ []);
+	filterField = viewChild("filterField", ...ngDevMode ? [{ debugName: "filterField" }] : 	/* istanbul ignore next */ []);
+	query = signal("", ...ngDevMode ? [{ debugName: "query" }] : 	/* istanbul ignore next */ []);
 	#cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "#cvaDisabled" }] : 	/* istanbul ignore next */ []);
 	isDisabled = computed(() => this.disabled() || this.#cvaDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : 	/* istanbul ignore next */ []);
 	items = computed(() => resolveOptions(this.options(), this.optionLabel(), this.optionValue(), this.optionDisabled()), ...ngDevMode ? [{ debugName: "items" }] : 	/* istanbul ignore next */ []);
+	visibleItems = computed(() => {
+		const query = this.query().trim().toLowerCase();
+		const items = this.items();
+		if (!this.filter() || !query) return items;
+		const by = this.filterBy();
+		const options = this.options();
+		return items.filter((item, i) => {
+			return (by === void 0 ? item.label : this.#filterText(options[i], by, item.label)).toLowerCase().includes(query);
+		});
+	}, ...ngDevMode ? [{ debugName: "visibleItems" }] : 	/* istanbul ignore next */ []);
+	resultsLabel = computed(() => {
+		const n = this.visibleItems().length;
+		return n === 1 ? "1 result" : `${n} results`;
+	}, ...ngDevMode ? [{ debugName: "resultsLabel" }] : 	/* istanbul ignore next */ []);
 	selected = computed(() => {
 		const compare = this.compareWith();
 		const current = this.value();
@@ -4974,10 +4997,26 @@ var HxSelect = class HxSelect {
 	close(refocus = false) {
 		if (!this.open()) return;
 		this.open.set(false);
+		this.query.set("");
 		if (refocus) this.focus();
 	}
 	onAttach() {
-		afterNextRender(() => this.listbox()?.focus(), { injector: this.#injector });
+		afterNextRender(() => {
+			const field = this.filterField();
+			if (field) field.nativeElement.focus();
+			else this.listbox()?.focus();
+		}, { injector: this.#injector });
+	}
+	onFilterKeydown(event) {
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			this.listbox()?.focus();
+		}
+	}
+	#filterText(option, by, fallback) {
+		if (option === null || typeof option !== "object") return fallback;
+		if (typeof by === "function") return String(by(option) ?? "");
+		return by in option ? String(option[by] ?? "") : "";
 	}
 	onTriggerKeydown(event) {
 		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
@@ -5074,6 +5113,34 @@ var HxSelect = class HxSelect {
 				isRequired: false,
 				transformFunction: null
 			},
+			filter: {
+				classPropertyName: "filter",
+				publicName: "filter",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filterPlaceholder: {
+				classPropertyName: "filterPlaceholder",
+				publicName: "filterPlaceholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filterBy: {
+				classPropertyName: "filterBy",
+				publicName: "filterBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyFilterMessage: {
+				classPropertyName: "emptyFilterMessage",
+				publicName: "emptyFilterMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			size: {
 				classPropertyName: "size",
 				publicName: "size",
@@ -5176,21 +5243,31 @@ var HxSelect = class HxSelect {
 			useExisting: forwardRef(() => HxSelect),
 			multi: true
 		}],
-		viewQueries: [{
-			propertyName: "trigger",
-			first: true,
-			predicate: ["trigger"],
-			descendants: true,
-			isSignal: true
-		}, {
-			propertyName: "listbox",
-			first: true,
-			predicate: CdkListbox,
-			descendants: true,
-			isSignal: true
-		}],
+		viewQueries: [
+			{
+				propertyName: "trigger",
+				first: true,
+				predicate: ["trigger"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "listbox",
+				first: true,
+				predicate: CdkListbox,
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "filterField",
+				first: true,
+				predicate: ["filterField"],
+				descendants: true,
+				isSignal: true
+			}
+		],
 		ngImport: i0,
-		template: "<button\n  #trigger\n  type=\"button\"\n  class=\"hx-select-trigger\"\n  role=\"combobox\"\n  cdkOverlayOrigin\n  #origin=\"cdkOverlayOrigin\"\n  aria-haspopup=\"listbox\"\n  [attr.id]=\"inputId() ?? null\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"open() ? panelId : null\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n  (click)=\"toggle()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n>\n  <span class=\"hx-select-label\" [class.hx-select-placeholder]=\"!selected()\">{{\n    selected()?.label ?? placeholder()\n  }}</span>\n  <span class=\"hx-select-chevron\" aria-hidden=\"true\"></span>\n</button>\n@if (canClear()) {\n  <button type=\"button\" class=\"hx-select-clear\" aria-label=\"Clear selection\" (click)=\"clear($event)\">\n    <span class=\"hx-select-clear-icon\" aria-hidden=\"true\"></span>\n  </button>\n}\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayPanelClass=\"hx-select-overlay\"\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayMinWidth]=\"panelWidth()\"\n  (overlayOutsideClick)=\"onOutsideClick($event)\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n  (attach)=\"onAttach()\"\n  (detach)=\"close()\"\n>\n  <div class=\"hx-select-panel\">\n    <div\n      cdkListbox\n      class=\"hx-select-list\"\n      [id]=\"panelId\"\n      [cdkListboxValue]=\"selectedValues()\"\n      [cdkListboxUseActiveDescendant]=\"true\"\n      [cdkListboxCompareWith]=\"compareWith()\"\n      [attr.aria-label]=\"ariaLabel() ?? placeholder() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      (cdkListboxValueChange)=\"onSelect($event)\"\n    >\n      @for (item of items(); track $index) {\n        <div\n          class=\"hx-select-option\"\n          [cdkOption]=\"item.value\"\n          [cdkOptionDisabled]=\"item.disabled\"\n          [cdkOptionTypeaheadLabel]=\"item.label\"\n        >\n          <span class=\"hx-select-check\" aria-hidden=\"true\"></span>\n          <span>{{ item.label }}</span>\n        </div>\n      } @empty {\n        <div class=\"hx-select-empty\">{{ emptyMessage() }}</div>\n      }\n    </div>\n  </div>\n</ng-template>\n",
+		template: "<button\n  #trigger\n  type=\"button\"\n  class=\"hx-select-trigger\"\n  role=\"combobox\"\n  cdkOverlayOrigin\n  #origin=\"cdkOverlayOrigin\"\n  aria-haspopup=\"listbox\"\n  [attr.id]=\"inputId() ?? null\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"open() ? panelId : null\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n  (click)=\"toggle()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n>\n  <span class=\"hx-select-label\" [class.hx-select-placeholder]=\"!selected()\">{{\n    selected()?.label ?? placeholder()\n  }}</span>\n  <span class=\"hx-select-chevron\" aria-hidden=\"true\"></span>\n</button>\n@if (canClear()) {\n  <button type=\"button\" class=\"hx-select-clear\" aria-label=\"Clear selection\" (click)=\"clear($event)\">\n    <span class=\"hx-select-clear-icon\" aria-hidden=\"true\"></span>\n  </button>\n}\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayPanelClass=\"hx-select-overlay\"\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayMinWidth]=\"panelWidth()\"\n  (overlayOutsideClick)=\"onOutsideClick($event)\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n  (attach)=\"onAttach()\"\n  (detach)=\"close()\"\n>\n  <div class=\"hx-select-panel\">\n    @if (filter()) {\n      <div class=\"hx-select-header\">\n        <input\n          #filterField\n          type=\"text\"\n          class=\"hx-select-filter\"\n          autocomplete=\"off\"\n          [attr.aria-label]=\"filterPlaceholder()\"\n          [attr.aria-controls]=\"panelId\"\n          [placeholder]=\"filterPlaceholder()\"\n          [value]=\"query()\"\n          (input)=\"query.set($any($event.target).value)\"\n          (keydown)=\"onFilterKeydown($event)\"\n        />\n      </div>\n    }\n    <div\n      cdkListbox\n      class=\"hx-select-list\"\n      [id]=\"panelId\"\n      [cdkListboxValue]=\"selectedValues()\"\n      [cdkListboxUseActiveDescendant]=\"true\"\n      [cdkListboxCompareWith]=\"compareWith()\"\n      [attr.aria-label]=\"ariaLabel() ?? placeholder() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      (cdkListboxValueChange)=\"onSelect($event)\"\n    >\n      @for (item of visibleItems(); track item) {\n        <div\n          class=\"hx-select-option\"\n          [cdkOption]=\"item.value\"\n          [cdkOptionDisabled]=\"item.disabled\"\n          [cdkOptionTypeaheadLabel]=\"item.label\"\n        >\n          <span class=\"hx-select-check\" aria-hidden=\"true\"></span>\n          <span>{{ item.label }}</span>\n        </div>\n      } @empty {\n        <div class=\"hx-select-empty\">{{ query().trim() ? emptyFilterMessage() : emptyMessage() }}</div>\n      }\n    </div>\n    @if (filter()) {\n      <span class=\"hx-select-sr-only\" aria-live=\"polite\">{{ resultsLabel() }}</span>\n    }\n  </div>\n</ng-template>\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -5309,7 +5386,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[class.hx-filled]": "!!selected()",
 				"(focusout)": "onFocusOut($event)"
 			},
-			template: "<button\n  #trigger\n  type=\"button\"\n  class=\"hx-select-trigger\"\n  role=\"combobox\"\n  cdkOverlayOrigin\n  #origin=\"cdkOverlayOrigin\"\n  aria-haspopup=\"listbox\"\n  [attr.id]=\"inputId() ?? null\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"open() ? panelId : null\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n  (click)=\"toggle()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n>\n  <span class=\"hx-select-label\" [class.hx-select-placeholder]=\"!selected()\">{{\n    selected()?.label ?? placeholder()\n  }}</span>\n  <span class=\"hx-select-chevron\" aria-hidden=\"true\"></span>\n</button>\n@if (canClear()) {\n  <button type=\"button\" class=\"hx-select-clear\" aria-label=\"Clear selection\" (click)=\"clear($event)\">\n    <span class=\"hx-select-clear-icon\" aria-hidden=\"true\"></span>\n  </button>\n}\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayPanelClass=\"hx-select-overlay\"\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayMinWidth]=\"panelWidth()\"\n  (overlayOutsideClick)=\"onOutsideClick($event)\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n  (attach)=\"onAttach()\"\n  (detach)=\"close()\"\n>\n  <div class=\"hx-select-panel\">\n    <div\n      cdkListbox\n      class=\"hx-select-list\"\n      [id]=\"panelId\"\n      [cdkListboxValue]=\"selectedValues()\"\n      [cdkListboxUseActiveDescendant]=\"true\"\n      [cdkListboxCompareWith]=\"compareWith()\"\n      [attr.aria-label]=\"ariaLabel() ?? placeholder() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      (cdkListboxValueChange)=\"onSelect($event)\"\n    >\n      @for (item of items(); track $index) {\n        <div\n          class=\"hx-select-option\"\n          [cdkOption]=\"item.value\"\n          [cdkOptionDisabled]=\"item.disabled\"\n          [cdkOptionTypeaheadLabel]=\"item.label\"\n        >\n          <span class=\"hx-select-check\" aria-hidden=\"true\"></span>\n          <span>{{ item.label }}</span>\n        </div>\n      } @empty {\n        <div class=\"hx-select-empty\">{{ emptyMessage() }}</div>\n      }\n    </div>\n  </div>\n</ng-template>\n"
+			template: "<button\n  #trigger\n  type=\"button\"\n  class=\"hx-select-trigger\"\n  role=\"combobox\"\n  cdkOverlayOrigin\n  #origin=\"cdkOverlayOrigin\"\n  aria-haspopup=\"listbox\"\n  [attr.id]=\"inputId() ?? null\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"open() ? panelId : null\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n  (click)=\"toggle()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n>\n  <span class=\"hx-select-label\" [class.hx-select-placeholder]=\"!selected()\">{{\n    selected()?.label ?? placeholder()\n  }}</span>\n  <span class=\"hx-select-chevron\" aria-hidden=\"true\"></span>\n</button>\n@if (canClear()) {\n  <button type=\"button\" class=\"hx-select-clear\" aria-label=\"Clear selection\" (click)=\"clear($event)\">\n    <span class=\"hx-select-clear-icon\" aria-hidden=\"true\"></span>\n  </button>\n}\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayPanelClass=\"hx-select-overlay\"\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayMinWidth]=\"panelWidth()\"\n  (overlayOutsideClick)=\"onOutsideClick($event)\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n  (attach)=\"onAttach()\"\n  (detach)=\"close()\"\n>\n  <div class=\"hx-select-panel\">\n    @if (filter()) {\n      <div class=\"hx-select-header\">\n        <input\n          #filterField\n          type=\"text\"\n          class=\"hx-select-filter\"\n          autocomplete=\"off\"\n          [attr.aria-label]=\"filterPlaceholder()\"\n          [attr.aria-controls]=\"panelId\"\n          [placeholder]=\"filterPlaceholder()\"\n          [value]=\"query()\"\n          (input)=\"query.set($any($event.target).value)\"\n          (keydown)=\"onFilterKeydown($event)\"\n        />\n      </div>\n    }\n    <div\n      cdkListbox\n      class=\"hx-select-list\"\n      [id]=\"panelId\"\n      [cdkListboxValue]=\"selectedValues()\"\n      [cdkListboxUseActiveDescendant]=\"true\"\n      [cdkListboxCompareWith]=\"compareWith()\"\n      [attr.aria-label]=\"ariaLabel() ?? placeholder() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      (cdkListboxValueChange)=\"onSelect($event)\"\n    >\n      @for (item of visibleItems(); track item) {\n        <div\n          class=\"hx-select-option\"\n          [cdkOption]=\"item.value\"\n          [cdkOptionDisabled]=\"item.disabled\"\n          [cdkOptionTypeaheadLabel]=\"item.label\"\n        >\n          <span class=\"hx-select-check\" aria-hidden=\"true\"></span>\n          <span>{{ item.label }}</span>\n        </div>\n      } @empty {\n        <div class=\"hx-select-empty\">{{ query().trim() ? emptyFilterMessage() : emptyMessage() }}</div>\n      }\n    </div>\n    @if (filter()) {\n      <span class=\"hx-select-sr-only\" aria-live=\"polite\">{{ resultsLabel() }}</span>\n    }\n  </div>\n</ng-template>\n"
 		}]
 	}],
 	propDecorators: {
@@ -5361,6 +5438,38 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		filter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filter",
+				required: false
+			}]
+		}],
+		filterPlaceholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filterPlaceholder",
+				required: false
+			}]
+		}],
+		filterBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filterBy",
+				required: false
+			}]
+		}],
+		emptyFilterMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyFilterMessage",
+				required: false
+			}]
+		}],
 		size: [{
 			type: i0.Input,
 			args: [{
@@ -5463,6 +5572,10 @@ i0.ɵɵngDeclareClassMetadata({
 		listbox: [{
 			type: i0.ViewChild,
 			args: [i0.forwardRef(() => CdkListbox), { isSignal: true }]
+		}],
+		filterField: [{
+			type: i0.ViewChild,
+			args: ["filterField", { isSignal: true }]
 		}]
 	}
 });
@@ -5680,6 +5793,10 @@ var HxPaginator = class HxPaginator {
 				"optionDisabled",
 				"placeholder",
 				"emptyMessage",
+				"filter",
+				"filterPlaceholder",
+				"filterBy",
+				"emptyFilterMessage",
 				"size",
 				"variant",
 				"fluid",