@gravionlabs/helix-ui 22.2.7 → 22.2.9

package/fesm2022/gravionlabs-helix-ui.mjs

@@ -2,7 +2,7 @@ import * as i1 from "@angular/cdk/accordion";
 import { CdkAccordion, CdkAccordionItem } from "@angular/cdk/accordion";
 import { DOCUMENT, NgComponentOutlet, NgStyle, NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, PLATFORM_ID, TemplateRef, afterEveryRender, afterNextRender, booleanAttribute, computed, contentChild, contentChildren, effect, forwardRef, inject, input, isDevMode, makeEnvironmentProviders, model, numberAttribute, output, provideEnvironmentInitializer, signal, untracked, viewChild } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, PLATFORM_ID, TemplateRef, afterEveryRender, afterNextRender, booleanAttribute, computed, contentChild, contentChildren, effect, forwardRef, inject, input, isDevMode, makeEnvironmentProviders, model, numberAttribute, output, provideEnvironmentInitializer, signal, untracked, viewChild, viewChildren } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { CdkConnectedOverlay, CdkOverlayOrigin, Overlay } from "@angular/cdk/overlay";
 import { NG_VALUE_ACCESSOR, NgControl } from "@angular/forms";
@@ -4441,9 +4441,14 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const HX_SELECT_OVERLAY_CLASS = "hx-select-overlay";
+function isInSelectOverlay(target) {
+	return target instanceof Element && target.closest(`.hx-select-overlay`) !== null;
+}
 var HxSelect = class HxSelect {
 	#host = inject(ElementRef);
 	#injector = inject(Injector);
+	overlayClass = HX_SELECT_OVERLAY_CLASS;
 	options = input([], ...ngDevMode ? [{ debugName: "options" }] : 	/* istanbul ignore next */ []);
 	optionLabel = input("label", ...ngDevMode ? [{ debugName: "optionLabel" }] : 	/* istanbul ignore next */ []);
 	optionValue = input("value", ...ngDevMode ? [{ debugName: "optionValue" }] : 	/* istanbul ignore next */ []);
@@ -4470,6 +4475,7 @@ var HxSelect = class HxSelect {
 	inputId = input(...ngDevMode ? [void 0, { debugName: "inputId" }] : 	/* istanbul ignore next */ []);
 	ariaLabel = input(...ngDevMode ? [void 0, { debugName: "ariaLabel" }] : 	/* istanbul ignore next */ []);
 	ariaLabelledby = input(...ngDevMode ? [void 0, { debugName: "ariaLabelledby" }] : 	/* istanbul ignore next */ []);
+	ariaDescribedby = input(...ngDevMode ? [void 0, { debugName: "ariaDescribedby" }] : 	/* istanbul ignore next */ []);
 	compareWith = input(compareValues$1, ...ngDevMode ? [{ debugName: "compareWith" }] : 	/* istanbul ignore next */ []);
 	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
 	disabled = input(false, {
@@ -4750,6 +4756,13 @@ var HxSelect = class HxSelect {
 				isRequired: false,
 				transformFunction: null
 			},
+			ariaDescribedby: {
+				classPropertyName: "ariaDescribedby",
+				publicName: "ariaDescribedby",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			compareWith: {
 				classPropertyName: "compareWith",
 				publicName: "compareWith",
@@ -4827,7 +4840,7 @@ var HxSelect = class HxSelect {
 			}
 		],
 		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    @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",
+		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-describedby]=\"ariaDescribedby() ?? 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]=\"overlayClass\"\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",
@@ -4946,7 +4959,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    @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"
+			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-describedby]=\"ariaDescribedby() ?? 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]=\"overlayClass\"\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: {
@@ -5086,6 +5099,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		ariaDescribedby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaDescribedby",
+				required: false
+			}]
+		}],
 		compareWith: [{
 			type: i0.Input,
 			args: [{
@@ -5393,6 +5414,7 @@ var HxPaginator = class HxPaginator {
 				"inputId",
 				"ariaLabel",
 				"ariaLabelledby",
+				"ariaDescribedby",
 				"compareWith",
 				"value",
 				"disabled",
@@ -6199,6 +6221,11 @@ var HxDataTable = class HxDataTable {
 	filterDisplay = input(...ngDevMode ? [void 0, { debugName: "filterDisplay" }] : 	/* istanbul ignore next */ []);
 	filters = model({}, ...ngDevMode ? [{ debugName: "filters" }] : 	/* istanbul ignore next */ []);
 	filterLabel = input("Filter {header}", ...ngDevMode ? [{ debugName: "filterLabel" }] : 	/* istanbul ignore next */ []);
+	clearLabel = input("Clear", ...ngDevMode ? [{ debugName: "clearLabel" }] : 	/* istanbul ignore next */ []);
+	filterPopover = viewChild(HxPopover, ...ngDevMode ? [{ debugName: "filterPopover" }] : 	/* istanbul ignore next */ []);
+	filterInput = viewChild("filterInput", ...ngDevMode ? [{ debugName: "filterInput" }] : 	/* istanbul ignore next */ []);
+	activeFilterColumn = signal(null, ...ngDevMode ? [{ debugName: "activeFilterColumn" }] : 	/* istanbul ignore next */ []);
+	injector = inject(Injector);
 	expandedRowKeys = model({}, ...ngDevMode ? [{ debugName: "expandedRowKeys" }] : 	/* istanbul ignore next */ []);
 	expandLabel = input("Expand row", ...ngDevMode ? [{ debugName: "expandLabel" }] : 	/* istanbul ignore next */ []);
 	collapseLabel = input("Collapse row", ...ngDevMode ? [{ debugName: "collapseLabel" }] : 	/* istanbul ignore next */ []);
@@ -6322,6 +6349,26 @@ var HxDataTable = class HxDataTable {
 		this.first.set(0);
 		if (this.lazy()) this.emitLazy();
 	}
+	openFilter(event, column) {
+		const popover = this.filterPopover();
+		if (!popover) return;
+		if (popover.open() && this.activeFilterColumn()?.field === column.field) {
+			popover.hide();
+			return;
+		}
+		const switching = popover.open();
+		popover.hide(false);
+		this.activeFilterColumn.set(column);
+		popover.show(event, event.currentTarget);
+		if (switching) afterNextRender(() => this.filterInput()?.nativeElement.focus(), { injector: this.injector });
+	}
+	filterLabelFor(column) {
+		return this.filterLabel().replace("{header}", column.header);
+	}
+	clearFilter(column) {
+		this.setFilter(column, "");
+		this.filterPopover()?.hide();
+	}
 	setFilter(column, text) {
 		const next = { ...this.filters() };
 		if (text) next[column.field] = text;
@@ -6695,6 +6742,13 @@ var HxDataTable = class HxDataTable {
 				isRequired: false,
 				transformFunction: null
 			},
+			clearLabel: {
+				classPropertyName: "clearLabel",
+				publicName: "clearLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			expandedRowKeys: {
 				classPropertyName: "expandedRowKeys",
 				publicName: "expandedRowKeys",
@@ -6783,8 +6837,21 @@ var HxDataTable = class HxDataTable {
 				isSignal: true
 			}
 		],
+		viewQueries: [{
+			propertyName: "filterPopover",
+			first: true,
+			predicate: HxPopover,
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "filterInput",
+			first: true,
+			predicate: ["filterInput"],
+			descendants: true,
+			isSignal: true
+		}],
 		ngImport: i0,
-		template: "<div class=\"hx-data-table-frame\" [attr.aria-busy]=\"loading() ? 'true' : null\">\n  <div\n    class=\"hx-table-scroll hx-data-table-scroll\"\n    [class.hx-data-table-scrolls]=\"scrolls()\"\n    [style.max-height]=\"scrollHeight() ?? null\"\n    [attr.role]=\"scrolls() ? 'region' : null\"\n    [attr.aria-label]=\"scrolls() ? (ariaLabel() ?? caption() ?? null) : null\"\n    [attr.tabindex]=\"scrolls() ? 0 : null\"\n  >\n    <table\n      class=\"hx-table\"\n      [class.hx-table-sm]=\"size() === 'small'\"\n      [class.hx-table-lg]=\"size() === 'large'\"\n      [class.hx-table-striped]=\"stripedRows()\"\n      [class.hx-table-gridlines]=\"showGridlines()\"\n      [class.hx-table-hoverable]=\"hoverRows()\"\n      [class.hx-table-sticky]=\"!!scrollHeight()\"\n    >\n      @if (hasCaption()) {\n        <caption [class.hx-data-table-caption-hidden]=\"captionHidden()\">\n          @if (captionTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n          } @else {\n            {{ caption() ?? ariaLabel() }}\n          }\n        </caption>\n      }\n      <thead>\n        <tr>\n          @if (expanderColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-expander-cell\"><span class=\"hx-data-table-caption-hidden\">Row details</span></th>\n          }\n          @if (checkboxColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-select-cell\">\n              <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectAllLabel()\" [checked]=\"allSelected()\" [indeterminate]=\"someSelected()\" (change)=\"toggleSelectAll($any($event.target).checked)\" />\n            </th>\n          }\n          @if (headerTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          } @else {\n            @for (column of columns(); track column.field) {\n              <th\n                scope=\"col\"\n                [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\"\n                [class.hx-data-table-sorted]=\"orderOf(column) !== 0\"\n                [style.width]=\"column.width ?? null\"\n                [attr.aria-sort]=\"ariaSort(column)\"\n                [attr.title]=\"column.title ?? null\"\n              >\n                @if (columnHeaders().get(column.field); as extra) {\n                  <div class=\"hx-data-table-header-content\">\n                    <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: column }\" />\n                    <ng-container [ngTemplateOutlet]=\"extra\" [ngTemplateOutletContext]=\"{ $implicit: column }\" />\n                  </div>\n                } @else {\n                  <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: column }\" />\n                }\n              </th>\n            }\n          }\n        </tr>\n        @if (filterRow()) {\n          <tr class=\"hx-data-table-filter-row\">\n            @if (expanderColumn()) { <th></th> }\n            @if (checkboxColumn()) { <th></th> }\n            @for (column of columns(); track column.field) {\n              <th>\n                @if (column.filter) {\n                  <input type=\"text\" hx-input size=\"small\" fluid [attr.aria-label]=\"filterLabel().replace('{header}', column.header)\" [value]=\"filters()[column.field] ?? ''\" (input)=\"setFilter(column, $any($event.target).value)\" />\n                }\n              </th>\n            }\n          </tr>\n        }\n      </thead>\n      <tbody>\n        @for (row of visibleRows(); track trackRow(row, $index); let i = $index) {\n          <tr\n            [class]=\"rowClassOf(row)\"\n            [class.hx-data-table-selectable]=\"selectable()\"\n            [attr.aria-selected]=\"selectionMode() ? (isSelected(row) ? 'true' : 'false') : null\"\n            [attr.tabindex]=\"selectable() ? 0 : null\"\n            (click)=\"selectRow(row, $event)\"\n            (keydown.enter)=\"onRowKey(row, $event)\"\n            (keydown.space)=\"onRowKey(row, $event)\"\n          >\n            @if (expanderColumn()) {\n              <td class=\"hx-data-table-expander-cell\">\n                <button type=\"button\" class=\"hx-data-table-expander\" [class.hx-data-table-expander-open]=\"isExpanded(row, i)\" [attr.aria-expanded]=\"isExpanded(row, i)\" [attr.aria-label]=\"isExpanded(row, i) ? collapseLabel() : expandLabel()\" (click)=\"toggleExpansion(row, i)\"></button>\n              </td>\n            }\n            @if (checkboxColumn()) {\n              <td class=\"hx-data-table-select-cell\">\n                <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectRowLabel().replace('{row}', '' + (first() + i + 1))\" [checked]=\"isSelected(row)\" (change)=\"toggleRowCheckbox(row, $any($event.target).checked)\" />\n              </td>\n            }\n            @if (bodyTemplate(); as tpl) {\n              <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n            } @else {\n              @for (column of columns(); track column.field) {\n                <td [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\">\n                  @if (cells().get(column.field); as cell) {\n                    <ng-container [ngTemplateOutlet]=\"cell\" [ngTemplateOutletContext]=\"{ $implicit: row, value: valueOf(row, column), index: i }\" />\n                  } @else {\n                    {{ valueOf(row, column) ?? emptyValue() }}\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (expansionTemplate(); as tpl) {\n            @if (isExpanded(row, i)) {\n              <tr class=\"hx-data-table-expansion\">\n                <td [attr.colspan]=\"colspan()\">\n                  <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n                </td>\n              </tr>\n            }\n          }\n        } @empty {\n          <tr class=\"hx-data-table-empty\">\n            <td [attr.colspan]=\"colspan()\">\n              @if (emptyTemplate(); as tpl) {\n                <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n              } @else {\n                {{ emptyMessage() }}\n              }\n            </td>\n          </tr>\n        }\n      </tbody>\n      @if (footerTemplate(); as tpl) {\n        <tfoot>\n          <tr>\n            @if (expanderColumn()) { <td></td> }\n            @if (checkboxColumn()) { <td></td> }\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          </tr>\n        </tfoot>\n      }\n    </table>\n  </div>\n  <span class=\"hx-data-table-caption-hidden\" aria-live=\"polite\">{{ announcement() }}</span>\n  @if (loading()) {\n    <div class=\"hx-data-table-loading\" role=\"status\">\n      <hx-progress-spinner ariaLabel=\"Loading\" />\n    </div>\n  }\n  @if (paginator()) {\n    <hx-paginator\n      class=\"hx-data-table-paginator\"\n      [rows]=\"rows()\"\n      [first]=\"first()\"\n      [totalRecords]=\"total()\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions()\"\n      [showAll]=\"showAll()\"\n      (showAllChange)=\"showAll.set($event)\"\n      [allLabel]=\"allLabel()\"\n      [showCurrentPageReport]=\"showCurrentPageReport()\"\n      (pageChange)=\"onPage($event)\"\n    />\n  }\n</div>\n\n<ng-template #label let-column>\n  @if (column.sortable) {\n    <button type=\"button\" class=\"hx-data-table-sort\" (click)=\"sort(column)\">\n      <span>{{ column.header }}</span>\n      <span class=\"hx-data-table-sort-icon\" [class.hx-data-table-sort-asc]=\"orderOf(column) === 1\" [class.hx-data-table-sort-desc]=\"orderOf(column) === -1\" aria-hidden=\"true\"></span>\n      @if (sortRank(column); as rank) {\n        <span class=\"hx-data-table-sort-rank\" aria-hidden=\"true\">{{ rank }}</span>\n      }\n    </button>\n  } @else {\n    {{ column.header }}\n  }\n</ng-template>\n",
+		template: "<div class=\"hx-data-table-frame\" [attr.aria-busy]=\"loading() ? 'true' : null\">\n  <div\n    class=\"hx-table-scroll hx-data-table-scroll\"\n    [class.hx-data-table-scrolls]=\"scrolls()\"\n    [style.max-height]=\"scrollHeight() ?? null\"\n    [attr.role]=\"scrolls() ? 'region' : null\"\n    [attr.aria-label]=\"scrolls() ? (ariaLabel() ?? caption() ?? null) : null\"\n    [attr.tabindex]=\"scrolls() ? 0 : null\"\n  >\n    <table\n      class=\"hx-table\"\n      [class.hx-table-sm]=\"size() === 'small'\"\n      [class.hx-table-lg]=\"size() === 'large'\"\n      [class.hx-table-striped]=\"stripedRows()\"\n      [class.hx-table-gridlines]=\"showGridlines()\"\n      [class.hx-table-hoverable]=\"hoverRows()\"\n      [class.hx-table-sticky]=\"!!scrollHeight()\"\n    >\n      @if (hasCaption()) {\n        <caption [class.hx-data-table-caption-hidden]=\"captionHidden()\">\n          @if (captionTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n          } @else {\n            {{ caption() ?? ariaLabel() }}\n          }\n        </caption>\n      }\n      <thead>\n        <tr>\n          @if (expanderColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-expander-cell\"><span class=\"hx-data-table-caption-hidden\">Row details</span></th>\n          }\n          @if (checkboxColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-select-cell\">\n              <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectAllLabel()\" [checked]=\"allSelected()\" [indeterminate]=\"someSelected()\" (change)=\"toggleSelectAll($any($event.target).checked)\" />\n            </th>\n          }\n          @if (headerTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          } @else {\n            @for (column of columns(); track column.field) {\n              <th\n                scope=\"col\"\n                [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\"\n                [class.hx-data-table-sorted]=\"orderOf(column) !== 0\"\n                [style.width]=\"column.width ?? null\"\n                [attr.aria-sort]=\"ariaSort(column)\"\n                [attr.title]=\"column.title ?? null\"\n              >\n                @let extra = columnHeaders().get(column.field);\n                @let menu = filterDisplay() === 'menu' && column.filter;\n                @if (extra || menu) {\n                  <div class=\"hx-data-table-header-content\">\n                    <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: column }\" />\n                    @if (extra) {\n                      <ng-container [ngTemplateOutlet]=\"extra\" [ngTemplateOutletContext]=\"{ $implicit: column }\" />\n                    }\n                    @if (menu) {\n                      <button\n                        type=\"button\"\n                        class=\"hx-data-table-filter-button\"\n                        [class.hx-data-table-filter-active]=\"!!filters()[column.field]\"\n                        aria-haspopup=\"dialog\"\n                        [attr.aria-expanded]=\"activeFilterColumn()?.field === column.field\"\n                        [attr.aria-label]=\"filterLabelFor(column)\"\n                        (click)=\"openFilter($event, column)\"\n                      >\n                        <span class=\"hx-data-table-filter-icon\" aria-hidden=\"true\"></span>\n                      </button>\n                    }\n                  </div>\n                } @else {\n                  <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: column }\" />\n                }\n              </th>\n            }\n          }\n        </tr>\n        @if (filterRow()) {\n          <tr class=\"hx-data-table-filter-row\">\n            @if (expanderColumn()) { <th></th> }\n            @if (checkboxColumn()) { <th></th> }\n            @for (column of columns(); track column.field) {\n              <th>\n                @if (column.filter) {\n                  <input type=\"text\" hx-input size=\"small\" fluid [attr.aria-label]=\"filterLabelFor(column)\" [value]=\"filters()[column.field] ?? ''\" (input)=\"setFilter(column, $any($event.target).value)\" />\n                }\n              </th>\n            }\n          </tr>\n        }\n      </thead>\n      <tbody>\n        @for (row of visibleRows(); track trackRow(row, $index); let i = $index) {\n          <tr\n            [class]=\"rowClassOf(row)\"\n            [class.hx-data-table-selectable]=\"selectable()\"\n            [attr.aria-selected]=\"selectionMode() ? (isSelected(row) ? 'true' : 'false') : null\"\n            [attr.tabindex]=\"selectable() ? 0 : null\"\n            (click)=\"selectRow(row, $event)\"\n            (keydown.enter)=\"onRowKey(row, $event)\"\n            (keydown.space)=\"onRowKey(row, $event)\"\n          >\n            @if (expanderColumn()) {\n              <td class=\"hx-data-table-expander-cell\">\n                <button type=\"button\" class=\"hx-data-table-expander\" [class.hx-data-table-expander-open]=\"isExpanded(row, i)\" [attr.aria-expanded]=\"isExpanded(row, i)\" [attr.aria-label]=\"isExpanded(row, i) ? collapseLabel() : expandLabel()\" (click)=\"toggleExpansion(row, i)\"></button>\n              </td>\n            }\n            @if (checkboxColumn()) {\n              <td class=\"hx-data-table-select-cell\">\n                <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectRowLabel().replace('{row}', '' + (first() + i + 1))\" [checked]=\"isSelected(row)\" (change)=\"toggleRowCheckbox(row, $any($event.target).checked)\" />\n              </td>\n            }\n            @if (bodyTemplate(); as tpl) {\n              <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n            } @else {\n              @for (column of columns(); track column.field) {\n                <td [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\">\n                  @if (cells().get(column.field); as cell) {\n                    <ng-container [ngTemplateOutlet]=\"cell\" [ngTemplateOutletContext]=\"{ $implicit: row, value: valueOf(row, column), index: i }\" />\n                  } @else {\n                    {{ valueOf(row, column) ?? emptyValue() }}\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (expansionTemplate(); as tpl) {\n            @if (isExpanded(row, i)) {\n              <tr class=\"hx-data-table-expansion\">\n                <td [attr.colspan]=\"colspan()\">\n                  <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n                </td>\n              </tr>\n            }\n          }\n        } @empty {\n          <tr class=\"hx-data-table-empty\">\n            <td [attr.colspan]=\"colspan()\">\n              @if (emptyTemplate(); as tpl) {\n                <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n              } @else {\n                {{ emptyMessage() }}\n              }\n            </td>\n          </tr>\n        }\n      </tbody>\n      @if (footerTemplate(); as tpl) {\n        <tfoot>\n          <tr>\n            @if (expanderColumn()) { <td></td> }\n            @if (checkboxColumn()) { <td></td> }\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          </tr>\n        </tfoot>\n      }\n    </table>\n  </div>\n  <span class=\"hx-data-table-caption-hidden\" aria-live=\"polite\">{{ announcement() }}</span>\n  @if (loading()) {\n    <div class=\"hx-data-table-loading\" role=\"status\">\n      <hx-progress-spinner ariaLabel=\"Loading\" />\n    </div>\n  }\n  @if (paginator()) {\n    <hx-paginator\n      class=\"hx-data-table-paginator\"\n      [rows]=\"rows()\"\n      [first]=\"first()\"\n      [totalRecords]=\"total()\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions()\"\n      [showAll]=\"showAll()\"\n      (showAllChange)=\"showAll.set($event)\"\n      [allLabel]=\"allLabel()\"\n      [showCurrentPageReport]=\"showCurrentPageReport()\"\n      (pageChange)=\"onPage($event)\"\n    />\n  }\n</div>\n\n@if (filterDisplay() === 'menu') {\n  @let active = activeFilterColumn();\n  <hx-popover panelClass=\"hx-data-table-filter-popover\" [ariaLabel]=\"active ? filterLabelFor(active) : undefined\" (hidden)=\"activeFilterColumn.set(null)\">\n    @if (active) {\n      <div class=\"hx-data-table-filter-menu\">\n        <input #filterInput type=\"text\" hx-input size=\"small\" fluid [attr.aria-label]=\"filterLabelFor(active)\" [value]=\"filters()[active.field] ?? ''\" (input)=\"setFilter(active, $any($event.target).value)\" (keydown.enter)=\"filterPopover()?.hide()\" />\n        <button hx-button type=\"button\" size=\"small\" variant=\"text\" class=\"hx-data-table-filter-clear\" (click)=\"clearFilter(active)\">{{ clearLabel() }}</button>\n      </div>\n    }\n  </hx-popover>\n}\n\n<ng-template #label let-column>\n  @if (column.sortable) {\n    <button type=\"button\" class=\"hx-data-table-sort\" (click)=\"sort(column)\">\n      <span>{{ column.header }}</span>\n      <span class=\"hx-data-table-sort-icon\" [class.hx-data-table-sort-asc]=\"orderOf(column) === 1\" [class.hx-data-table-sort-desc]=\"orderOf(column) === -1\" aria-hidden=\"true\"></span>\n      @if (sortRank(column); as rank) {\n        <span class=\"hx-data-table-sort-rank\" aria-hidden=\"true\">{{ rank }}</span>\n      }\n    </button>\n  } @else {\n    {{ column.header }}\n  }\n</ng-template>\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -6854,6 +6921,37 @@ var HxDataTable = class HxDataTable {
 					"autoResize"
 				],
 				exportAs: ["hx-input"]
+			},
+			{
+				kind: "directive",
+				type: HxButton,
+				selector: "button[hx-button], a[hx-button]",
+				inputs: [
+					"variant",
+					"severity",
+					"size",
+					"rounded",
+					"raised",
+					"fluid",
+					"iconOnly",
+					"loading"
+				],
+				exportAs: ["hx-button"]
+			},
+			{
+				kind: "component",
+				type: HxPopover,
+				selector: "hx-popover",
+				inputs: [
+					"ariaLabel",
+					"ariaLabelledBy",
+					"ariaDescribedBy",
+					"role",
+					"panelClass",
+					"dismissable",
+					"closeOnEscape"
+				],
+				outputs: ["shown", "hidden"]
 			}
 		],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -6873,11 +6971,13 @@ i0.ɵɵngDeclareClassMetadata({
 				HxProgressSpinner,
 				HxPaginator,
 				HxCheckbox,
-				HxInput
+				HxInput,
+				HxButton,
+				HxPopover
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { class: "hx-data-table" },
-			template: "<div class=\"hx-data-table-frame\" [attr.aria-busy]=\"loading() ? 'true' : null\">\n  <div\n    class=\"hx-table-scroll hx-data-table-scroll\"\n    [class.hx-data-table-scrolls]=\"scrolls()\"\n    [style.max-height]=\"scrollHeight() ?? null\"\n    [attr.role]=\"scrolls() ? 'region' : null\"\n    [attr.aria-label]=\"scrolls() ? (ariaLabel() ?? caption() ?? null) : null\"\n    [attr.tabindex]=\"scrolls() ? 0 : null\"\n  >\n    <table\n      class=\"hx-table\"\n      [class.hx-table-sm]=\"size() === 'small'\"\n      [class.hx-table-lg]=\"size() === 'large'\"\n      [class.hx-table-striped]=\"stripedRows()\"\n      [class.hx-table-gridlines]=\"showGridlines()\"\n      [class.hx-table-hoverable]=\"hoverRows()\"\n      [class.hx-table-sticky]=\"!!scrollHeight()\"\n    >\n      @if (hasCaption()) {\n        <caption [class.hx-data-table-caption-hidden]=\"captionHidden()\">\n          @if (captionTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n          } @else {\n            {{ caption() ?? ariaLabel() }}\n          }\n        </caption>\n      }\n      <thead>\n        <tr>\n          @if (expanderColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-expander-cell\"><span class=\"hx-data-table-caption-hidden\">Row details</span></th>\n          }\n          @if (checkboxColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-select-cell\">\n              <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectAllLabel()\" [checked]=\"allSelected()\" [indeterminate]=\"someSelected()\" (change)=\"toggleSelectAll($any($event.target).checked)\" />\n            </th>\n          }\n          @if (headerTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          } @else {\n            @for (column of columns(); track column.field) {\n              <th\n                scope=\"col\"\n                [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\"\n                [class.hx-data-table-sorted]=\"orderOf(column) !== 0\"\n                [style.width]=\"column.width ?? null\"\n                [attr.aria-sort]=\"ariaSort(column)\"\n                [attr.title]=\"column.title ?? null\"\n              >\n                @if (columnHeaders().get(column.field); as extra) {\n                  <div class=\"hx-data-table-header-content\">\n                    <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: column }\" />\n                    <ng-container [ngTemplateOutlet]=\"extra\" [ngTemplateOutletContext]=\"{ $implicit: column }\" />\n                  </div>\n                } @else {\n                  <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: column }\" />\n                }\n              </th>\n            }\n          }\n        </tr>\n        @if (filterRow()) {\n          <tr class=\"hx-data-table-filter-row\">\n            @if (expanderColumn()) { <th></th> }\n            @if (checkboxColumn()) { <th></th> }\n            @for (column of columns(); track column.field) {\n              <th>\n                @if (column.filter) {\n                  <input type=\"text\" hx-input size=\"small\" fluid [attr.aria-label]=\"filterLabel().replace('{header}', column.header)\" [value]=\"filters()[column.field] ?? ''\" (input)=\"setFilter(column, $any($event.target).value)\" />\n                }\n              </th>\n            }\n          </tr>\n        }\n      </thead>\n      <tbody>\n        @for (row of visibleRows(); track trackRow(row, $index); let i = $index) {\n          <tr\n            [class]=\"rowClassOf(row)\"\n            [class.hx-data-table-selectable]=\"selectable()\"\n            [attr.aria-selected]=\"selectionMode() ? (isSelected(row) ? 'true' : 'false') : null\"\n            [attr.tabindex]=\"selectable() ? 0 : null\"\n            (click)=\"selectRow(row, $event)\"\n            (keydown.enter)=\"onRowKey(row, $event)\"\n            (keydown.space)=\"onRowKey(row, $event)\"\n          >\n            @if (expanderColumn()) {\n              <td class=\"hx-data-table-expander-cell\">\n                <button type=\"button\" class=\"hx-data-table-expander\" [class.hx-data-table-expander-open]=\"isExpanded(row, i)\" [attr.aria-expanded]=\"isExpanded(row, i)\" [attr.aria-label]=\"isExpanded(row, i) ? collapseLabel() : expandLabel()\" (click)=\"toggleExpansion(row, i)\"></button>\n              </td>\n            }\n            @if (checkboxColumn()) {\n              <td class=\"hx-data-table-select-cell\">\n                <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectRowLabel().replace('{row}', '' + (first() + i + 1))\" [checked]=\"isSelected(row)\" (change)=\"toggleRowCheckbox(row, $any($event.target).checked)\" />\n              </td>\n            }\n            @if (bodyTemplate(); as tpl) {\n              <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n            } @else {\n              @for (column of columns(); track column.field) {\n                <td [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\">\n                  @if (cells().get(column.field); as cell) {\n                    <ng-container [ngTemplateOutlet]=\"cell\" [ngTemplateOutletContext]=\"{ $implicit: row, value: valueOf(row, column), index: i }\" />\n                  } @else {\n                    {{ valueOf(row, column) ?? emptyValue() }}\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (expansionTemplate(); as tpl) {\n            @if (isExpanded(row, i)) {\n              <tr class=\"hx-data-table-expansion\">\n                <td [attr.colspan]=\"colspan()\">\n                  <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n                </td>\n              </tr>\n            }\n          }\n        } @empty {\n          <tr class=\"hx-data-table-empty\">\n            <td [attr.colspan]=\"colspan()\">\n              @if (emptyTemplate(); as tpl) {\n                <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n              } @else {\n                {{ emptyMessage() }}\n              }\n            </td>\n          </tr>\n        }\n      </tbody>\n      @if (footerTemplate(); as tpl) {\n        <tfoot>\n          <tr>\n            @if (expanderColumn()) { <td></td> }\n            @if (checkboxColumn()) { <td></td> }\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          </tr>\n        </tfoot>\n      }\n    </table>\n  </div>\n  <span class=\"hx-data-table-caption-hidden\" aria-live=\"polite\">{{ announcement() }}</span>\n  @if (loading()) {\n    <div class=\"hx-data-table-loading\" role=\"status\">\n      <hx-progress-spinner ariaLabel=\"Loading\" />\n    </div>\n  }\n  @if (paginator()) {\n    <hx-paginator\n      class=\"hx-data-table-paginator\"\n      [rows]=\"rows()\"\n      [first]=\"first()\"\n      [totalRecords]=\"total()\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions()\"\n      [showAll]=\"showAll()\"\n      (showAllChange)=\"showAll.set($event)\"\n      [allLabel]=\"allLabel()\"\n      [showCurrentPageReport]=\"showCurrentPageReport()\"\n      (pageChange)=\"onPage($event)\"\n    />\n  }\n</div>\n\n<ng-template #label let-column>\n  @if (column.sortable) {\n    <button type=\"button\" class=\"hx-data-table-sort\" (click)=\"sort(column)\">\n      <span>{{ column.header }}</span>\n      <span class=\"hx-data-table-sort-icon\" [class.hx-data-table-sort-asc]=\"orderOf(column) === 1\" [class.hx-data-table-sort-desc]=\"orderOf(column) === -1\" aria-hidden=\"true\"></span>\n      @if (sortRank(column); as rank) {\n        <span class=\"hx-data-table-sort-rank\" aria-hidden=\"true\">{{ rank }}</span>\n      }\n    </button>\n  } @else {\n    {{ column.header }}\n  }\n</ng-template>\n"
+			template: "<div class=\"hx-data-table-frame\" [attr.aria-busy]=\"loading() ? 'true' : null\">\n  <div\n    class=\"hx-table-scroll hx-data-table-scroll\"\n    [class.hx-data-table-scrolls]=\"scrolls()\"\n    [style.max-height]=\"scrollHeight() ?? null\"\n    [attr.role]=\"scrolls() ? 'region' : null\"\n    [attr.aria-label]=\"scrolls() ? (ariaLabel() ?? caption() ?? null) : null\"\n    [attr.tabindex]=\"scrolls() ? 0 : null\"\n  >\n    <table\n      class=\"hx-table\"\n      [class.hx-table-sm]=\"size() === 'small'\"\n      [class.hx-table-lg]=\"size() === 'large'\"\n      [class.hx-table-striped]=\"stripedRows()\"\n      [class.hx-table-gridlines]=\"showGridlines()\"\n      [class.hx-table-hoverable]=\"hoverRows()\"\n      [class.hx-table-sticky]=\"!!scrollHeight()\"\n    >\n      @if (hasCaption()) {\n        <caption [class.hx-data-table-caption-hidden]=\"captionHidden()\">\n          @if (captionTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n          } @else {\n            {{ caption() ?? ariaLabel() }}\n          }\n        </caption>\n      }\n      <thead>\n        <tr>\n          @if (expanderColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-expander-cell\"><span class=\"hx-data-table-caption-hidden\">Row details</span></th>\n          }\n          @if (checkboxColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-select-cell\">\n              <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectAllLabel()\" [checked]=\"allSelected()\" [indeterminate]=\"someSelected()\" (change)=\"toggleSelectAll($any($event.target).checked)\" />\n            </th>\n          }\n          @if (headerTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          } @else {\n            @for (column of columns(); track column.field) {\n              <th\n                scope=\"col\"\n                [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\"\n                [class.hx-data-table-sorted]=\"orderOf(column) !== 0\"\n                [style.width]=\"column.width ?? null\"\n                [attr.aria-sort]=\"ariaSort(column)\"\n                [attr.title]=\"column.title ?? null\"\n              >\n                @let extra = columnHeaders().get(column.field);\n                @let menu = filterDisplay() === 'menu' && column.filter;\n                @if (extra || menu) {\n                  <div class=\"hx-data-table-header-content\">\n                    <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: column }\" />\n                    @if (extra) {\n                      <ng-container [ngTemplateOutlet]=\"extra\" [ngTemplateOutletContext]=\"{ $implicit: column }\" />\n                    }\n                    @if (menu) {\n                      <button\n                        type=\"button\"\n                        class=\"hx-data-table-filter-button\"\n                        [class.hx-data-table-filter-active]=\"!!filters()[column.field]\"\n                        aria-haspopup=\"dialog\"\n                        [attr.aria-expanded]=\"activeFilterColumn()?.field === column.field\"\n                        [attr.aria-label]=\"filterLabelFor(column)\"\n                        (click)=\"openFilter($event, column)\"\n                      >\n                        <span class=\"hx-data-table-filter-icon\" aria-hidden=\"true\"></span>\n                      </button>\n                    }\n                  </div>\n                } @else {\n                  <ng-container [ngTemplateOutlet]=\"label\" [ngTemplateOutletContext]=\"{ $implicit: column }\" />\n                }\n              </th>\n            }\n          }\n        </tr>\n        @if (filterRow()) {\n          <tr class=\"hx-data-table-filter-row\">\n            @if (expanderColumn()) { <th></th> }\n            @if (checkboxColumn()) { <th></th> }\n            @for (column of columns(); track column.field) {\n              <th>\n                @if (column.filter) {\n                  <input type=\"text\" hx-input size=\"small\" fluid [attr.aria-label]=\"filterLabelFor(column)\" [value]=\"filters()[column.field] ?? ''\" (input)=\"setFilter(column, $any($event.target).value)\" />\n                }\n              </th>\n            }\n          </tr>\n        }\n      </thead>\n      <tbody>\n        @for (row of visibleRows(); track trackRow(row, $index); let i = $index) {\n          <tr\n            [class]=\"rowClassOf(row)\"\n            [class.hx-data-table-selectable]=\"selectable()\"\n            [attr.aria-selected]=\"selectionMode() ? (isSelected(row) ? 'true' : 'false') : null\"\n            [attr.tabindex]=\"selectable() ? 0 : null\"\n            (click)=\"selectRow(row, $event)\"\n            (keydown.enter)=\"onRowKey(row, $event)\"\n            (keydown.space)=\"onRowKey(row, $event)\"\n          >\n            @if (expanderColumn()) {\n              <td class=\"hx-data-table-expander-cell\">\n                <button type=\"button\" class=\"hx-data-table-expander\" [class.hx-data-table-expander-open]=\"isExpanded(row, i)\" [attr.aria-expanded]=\"isExpanded(row, i)\" [attr.aria-label]=\"isExpanded(row, i) ? collapseLabel() : expandLabel()\" (click)=\"toggleExpansion(row, i)\"></button>\n              </td>\n            }\n            @if (checkboxColumn()) {\n              <td class=\"hx-data-table-select-cell\">\n                <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectRowLabel().replace('{row}', '' + (first() + i + 1))\" [checked]=\"isSelected(row)\" (change)=\"toggleRowCheckbox(row, $any($event.target).checked)\" />\n              </td>\n            }\n            @if (bodyTemplate(); as tpl) {\n              <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n            } @else {\n              @for (column of columns(); track column.field) {\n                <td [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\">\n                  @if (cells().get(column.field); as cell) {\n                    <ng-container [ngTemplateOutlet]=\"cell\" [ngTemplateOutletContext]=\"{ $implicit: row, value: valueOf(row, column), index: i }\" />\n                  } @else {\n                    {{ valueOf(row, column) ?? emptyValue() }}\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (expansionTemplate(); as tpl) {\n            @if (isExpanded(row, i)) {\n              <tr class=\"hx-data-table-expansion\">\n                <td [attr.colspan]=\"colspan()\">\n                  <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n                </td>\n              </tr>\n            }\n          }\n        } @empty {\n          <tr class=\"hx-data-table-empty\">\n            <td [attr.colspan]=\"colspan()\">\n              @if (emptyTemplate(); as tpl) {\n                <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n              } @else {\n                {{ emptyMessage() }}\n              }\n            </td>\n          </tr>\n        }\n      </tbody>\n      @if (footerTemplate(); as tpl) {\n        <tfoot>\n          <tr>\n            @if (expanderColumn()) { <td></td> }\n            @if (checkboxColumn()) { <td></td> }\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          </tr>\n        </tfoot>\n      }\n    </table>\n  </div>\n  <span class=\"hx-data-table-caption-hidden\" aria-live=\"polite\">{{ announcement() }}</span>\n  @if (loading()) {\n    <div class=\"hx-data-table-loading\" role=\"status\">\n      <hx-progress-spinner ariaLabel=\"Loading\" />\n    </div>\n  }\n  @if (paginator()) {\n    <hx-paginator\n      class=\"hx-data-table-paginator\"\n      [rows]=\"rows()\"\n      [first]=\"first()\"\n      [totalRecords]=\"total()\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions()\"\n      [showAll]=\"showAll()\"\n      (showAllChange)=\"showAll.set($event)\"\n      [allLabel]=\"allLabel()\"\n      [showCurrentPageReport]=\"showCurrentPageReport()\"\n      (pageChange)=\"onPage($event)\"\n    />\n  }\n</div>\n\n@if (filterDisplay() === 'menu') {\n  @let active = activeFilterColumn();\n  <hx-popover panelClass=\"hx-data-table-filter-popover\" [ariaLabel]=\"active ? filterLabelFor(active) : undefined\" (hidden)=\"activeFilterColumn.set(null)\">\n    @if (active) {\n      <div class=\"hx-data-table-filter-menu\">\n        <input #filterInput type=\"text\" hx-input size=\"small\" fluid [attr.aria-label]=\"filterLabelFor(active)\" [value]=\"filters()[active.field] ?? ''\" (input)=\"setFilter(active, $any($event.target).value)\" (keydown.enter)=\"filterPopover()?.hide()\" />\n        <button hx-button type=\"button\" size=\"small\" variant=\"text\" class=\"hx-data-table-filter-clear\" (click)=\"clearFilter(active)\">{{ clearLabel() }}</button>\n      </div>\n    }\n  </hx-popover>\n}\n\n<ng-template #label let-column>\n  @if (column.sortable) {\n    <button type=\"button\" class=\"hx-data-table-sort\" (click)=\"sort(column)\">\n      <span>{{ column.header }}</span>\n      <span class=\"hx-data-table-sort-icon\" [class.hx-data-table-sort-asc]=\"orderOf(column) === 1\" [class.hx-data-table-sort-desc]=\"orderOf(column) === -1\" aria-hidden=\"true\"></span>\n      @if (sortRank(column); as rank) {\n        <span class=\"hx-data-table-sort-rank\" aria-hidden=\"true\">{{ rank }}</span>\n      }\n    </button>\n  } @else {\n    {{ column.header }}\n  }\n</ng-template>\n"
 		}]
 	}],
 	propDecorators: {
@@ -7218,6 +7318,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		clearLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearLabel",
+				required: false
+			}]
+		}],
+		filterPopover: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => HxPopover), { isSignal: true }]
+		}],
+		filterInput: [{
+			type: i0.ViewChild,
+			args: ["filterInput", { isSignal: true }]
+		}],
 		expandedRowKeys: [{
 			type: i0.Input,
 			args: [{
@@ -7319,6 +7435,90 @@ function monthCells(year, month, firstDayOfWeek) {
 	for (let i = 0; i < cells.length; i += 7) rows.push(cells.slice(i, i + 7));
 	return rows;
 }
+function hxResolvePreset(preset, context, fit) {
+	const from = fit(preset.from(context), "from");
+	const to = fit(preset.to(context), "to");
+	if (from === void 0 || to === void 0) return void 0;
+	return from && to && to < from ? {
+		from: to,
+		to: from
+	} : {
+		from,
+		to
+	};
+}
+const ENGLISH = {
+	last15Minutes: "Last 15 minutes",
+	last1Hour: "Last 1 hour",
+	last6Hours: "Last 6 hours",
+	last24Hours: "Last 24 hours",
+	last7Days: "Last 7 days",
+	last30Days: "Last 30 days",
+	today: "Today",
+	yesterday: "Yesterday",
+	thisWeek: "This week",
+	thisMonth: "This month"
+};
+const minutesAgo = (minutes) => () => /* @__PURE__ */ new Date(Date.now() - minutes * 6e4);
+const now = () => /* @__PURE__ */ new Date();
+const endOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
+const startOfWeek = (date, firstDayOfWeek = 0) => addDays(startOfDay(date), -((date.getDay() - firstDayOfWeek + 7) % 7));
+const RANGES = {
+	last15Minutes: {
+		from: minutesAgo(15),
+		to: now
+	},
+	last1Hour: {
+		from: minutesAgo(60),
+		to: now
+	},
+	last6Hours: {
+		from: minutesAgo(360),
+		to: now
+	},
+	last24Hours: {
+		from: minutesAgo(1440),
+		to: now
+	},
+	last7Days: {
+		from: () => addDays(startOfDay(/* @__PURE__ */ new Date()), -6),
+		to: now
+	},
+	last30Days: {
+		from: () => addDays(startOfDay(/* @__PURE__ */ new Date()), -29),
+		to: now
+	},
+	today: {
+		from: () => startOfDay(/* @__PURE__ */ new Date()),
+		to: now
+	},
+	yesterday: {
+		from: () => addDays(startOfDay(/* @__PURE__ */ new Date()), -1),
+		to: () => endOfDay(addDays(/* @__PURE__ */ new Date(), -1))
+	},
+	thisWeek: {
+		from: (c) => startOfWeek(/* @__PURE__ */ new Date(), c?.firstDayOfWeek),
+		to: (c) => endOfDay(addDays(startOfWeek(/* @__PURE__ */ new Date(), c?.firstDayOfWeek), 6))
+	},
+	thisMonth: {
+		from: () => new Date((/* @__PURE__ */ new Date()).getFullYear(), (/* @__PURE__ */ new Date()).getMonth(), 1),
+		to: () => endOfDay(new Date((/* @__PURE__ */ new Date()).getFullYear(), (/* @__PURE__ */ new Date()).getMonth() + 1, 0))
+	}
+};
+const DAY_IDS = [
+	"today",
+	"last7Days",
+	"thisMonth"
+];
+const build = (ids, labels) => ids.map((id) => ({
+	label: labels[id] ?? ENGLISH[id],
+	...RANGES[id]
+}));
+function hxDateRangePresets(labels = {}) {
+	return build(Object.keys(RANGES), labels);
+}
+const HX_DATE_RANGE_PRESETS = hxDateRangePresets();
+const HX_DATE_RANGE_DAY_PRESETS = build(DAY_IDS, {});
 function dateKey(date) {
 	return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
 }
@@ -7724,326 +7924,2076 @@ function parseDateTimeText(text, options) {
 	const day = options.timeOnly && rest === "" ? startOfDay(options.fallbackDay) : parseDateText(rest, options.locale);
 	return day && withTime(day, hours, minutes, seconds);
 }
-const startOfDayOrNull$1 = (date) => isValidDate(date) ? startOfDay(date) : null;
-var HxDatePicker = class HxDatePicker {
-	#host = inject(ElementRef);
-	#injector = inject(Injector);
-	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : 	/* istanbul ignore next */ []);
-	showIcon = input(false, {
-		...ngDevMode ? { debugName: "showIcon" } : 		/* istanbul ignore next */ {},
-		transform: booleanAttribute
-	});
-	showButtonBar = input(false, {
-		...ngDevMode ? { debugName: "showButtonBar" } : 		/* istanbul ignore next */ {},
-		transform: booleanAttribute
-	});
-	dateFormat = input(...ngDevMode ? [void 0, { debugName: "dateFormat" }] : 	/* istanbul ignore next */ []);
-	todayLabel = input("Today", ...ngDevMode ? [{ debugName: "todayLabel" }] : 	/* istanbul ignore next */ []);
-	clearLabel = input("Clear", ...ngDevMode ? [{ debugName: "clearLabel" }] : 	/* istanbul ignore next */ []);
-	chooseLabel = input("Choose date", ...ngDevMode ? [{ debugName: "chooseLabel" }] : 	/* istanbul ignore next */ []);
-	inputId = input(...ngDevMode ? [void 0, { debugName: "inputId" }] : 	/* istanbul ignore next */ []);
-	inline = input(false, {
-		...ngDevMode ? { debugName: "inline" } : 		/* istanbul ignore next */ {},
-		transform: booleanAttribute
-	});
-	selectionMode = input("single", ...ngDevMode ? [{ debugName: "selectionMode" }] : 	/* istanbul ignore next */ []);
-	minDate = input(null, ...ngDevMode ? [{ debugName: "minDate" }] : 	/* istanbul ignore next */ []);
-	maxDate = input(null, ...ngDevMode ? [{ debugName: "maxDate" }] : 	/* istanbul ignore next */ []);
-	disabledDates = input([], ...ngDevMode ? [{ debugName: "disabledDates" }] : 	/* istanbul ignore next */ []);
-	firstDayOfWeek = input(0, {
-		...ngDevMode ? { debugName: "firstDayOfWeek" } : 		/* istanbul ignore next */ {},
-		transform: numberAttribute
-	});
-	locale = input(...ngDevMode ? [void 0, { debugName: "locale" }] : 	/* istanbul ignore next */ []);
-	ariaLabel = input(...ngDevMode ? [void 0, { debugName: "ariaLabel" }] : 	/* istanbul ignore next */ []);
-	ariaLabelledby = input(...ngDevMode ? [void 0, { debugName: "ariaLabelledby" }] : 	/* istanbul ignore next */ []);
-	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
+var HxRangePresets = class HxRangePresets {
+	presets = input.required(...ngDevMode ? [{ debugName: "presets" }] : 	/* istanbul ignore next */ []);
+	display = input("buttons", ...ngDevMode ? [{ debugName: "display" }] : 	/* istanbul ignore next */ []);
+	label = input("Presets", ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	disabled = input(false, {
 		...ngDevMode ? { debugName: "disabled" } : 		/* istanbul ignore next */ {},
 		transform: booleanAttribute
 	});
-	invalid = input(false, {
-		...ngDevMode ? { debugName: "invalid" } : 		/* istanbul ignore next */ {},
-		transform: booleanAttribute
-	});
-	touch = output();
-	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : 	/* istanbul ignore next */ []);
-	titleId = nextId("hx-date-picker-title");
-	popupId = nextId("hx-date-picker-popup");
-	positions = [{
-		originX: "start",
-		originY: "bottom",
-		overlayX: "start",
-		overlayY: "top",
-		offsetY: 2
-	}, {
-		originX: "start",
-		originY: "top",
-		overlayX: "start",
-		overlayY: "bottom",
-		offsetY: -2
-	}];
-	field = viewChild("field", ...ngDevMode ? [{ debugName: "field" }] : 	/* istanbul ignore next */ []);
-	calendar = viewChild(HxCalendar, ...ngDevMode ? [{ debugName: "calendar" }] : 	/* istanbul ignore next */ []);
-	#typed = signal(null, ...ngDevMode ? [{ debugName: "#typed" }] : 	/* istanbul ignore next */ []);
-	view = signal("day", ...ngDevMode ? [{ debugName: "view" }] : 	/* istanbul ignore next */ []);
-	#cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "#cvaDisabled" }] : 	/* istanbul ignore next */ []);
-	isDisabled = computed(() => this.disabled() || this.#cvaDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : 	/* istanbul ignore next */ []);
-	focusedDate = signal(startOfDay(/* @__PURE__ */ new Date()), ...ngDevMode ? [{ debugName: "focusedDate" }] : 	/* istanbul ignore next */ []);
-	today = startOfDay(/* @__PURE__ */ new Date());
-	selectedDates = computed(() => {
-		const value = this.value();
-		if (Array.isArray(value)) return value.filter(isValidDate);
-		return isValidDate(value) ? [value] : [];
-	}, ...ngDevMode ? [{ debugName: "selectedDates" }] : 	/* istanbul ignore next */ []);
-	#format = computed(() => new Intl.DateTimeFormat(this.locale(), this.dateFormat() ?? {
-		day: "2-digit",
-		month: "2-digit",
-		year: "numeric"
-	}), ...ngDevMode ? [{ debugName: "#format" }] : 	/* istanbul ignore next */ []);
-	text = computed(() => {
-		const typed = this.#typed();
-		if (typed !== null) return typed;
-		const dates = this.selectedDates();
-		const fmt = this.#format();
-		if (this.selectionMode() === "range") return dates.map((d) => fmt.format(d)).join(" – ");
-		return dates.map((d) => fmt.format(d)).join(", ");
-	}, ...ngDevMode ? [{ debugName: "text" }] : 	/* istanbul ignore next */ []);
-	constructor() {
-		effect(() => {
-			const first = this.selectedDates()[0] ?? clampTime(this.today, startOfDayOrNull$1(this.minDate()), this.maxDate());
-			const shown = untracked(() => this.focusedDate());
-			if (first && (first.getFullYear() !== shown.getFullYear() || first.getMonth() !== shown.getMonth())) this.focusedDate.set(startOfDay(first));
-		});
-	}
-	#onChange = () => {};
-	#onTouched = () => {};
-	writeValue(value) {
-		this.#typed.set(null);
-		this.value.set(value ?? null);
-	}
-	registerOnChange(fn) {
-		this.#onChange = fn;
-	}
-	registerOnTouched(fn) {
-		this.#onTouched = fn;
-	}
-	setDisabledState(disabled) {
-		this.#cvaDisabled.set(disabled);
-	}
-	focus() {
-		const field = this.field();
-		if (field) field.nativeElement.focus();
-		else this.#focusDay();
-	}
-	isDateDisabled(date) {
-		return isDateDisabled(date, {
-			min: this.minDate(),
-			max: this.maxDate(),
-			disabledDates: this.disabledDates()
-		});
-	}
-	isSelected(date) {
-		return this.selectedDates().some((d) => isSameDay(d, date));
-	}
-	pick(date) {
-		if (this.isDisabled() || this.isDateDisabled(date)) return;
-		const day = startOfDay(date);
-		this.focusedDate.set(day);
-		const selected = this.selectedDates();
-		let next;
-		const mode = this.selectionMode();
-		switch (mode) {
-			case "multiple":
-				next = this.isSelected(day) ? selected.filter((d) => !isSameDay(d, day)) : [...selected, day];
-				break;
-			case "range":
-				if (selected.length !== 1) next = [day];
-				else next = compareDays(day, selected[0]) < 0 ? [day, selected[0]] : [selected[0], day];
-				break;
-			default: next = day;
-		}
-		this.#typed.set(null);
-		this.#commit(next);
-		if (!this.inline()) {
-			if (mode === "single" || mode === "range" && Array.isArray(next) && next.length === 2) this.close(true);
-		}
-	}
-	#commit(next) {
-		this.value.set(next);
-		this.#onChange(next);
-	}
-	#focusDay() {
-		afterNextRender(() => {
-			this.calendar()?.focusDay();
-		}, { injector: this.#injector });
-	}
-	show() {
-		if (this.isDisabled() || this.inline() || this.open()) return;
-		this.open.set(true);
-	}
-	toggle() {
-		if (this.open()) this.close(true);
-		else this.show();
-	}
-	close(refocus = false) {
-		if (!this.open()) return;
-		this.open.set(false);
-		if (refocus) this.field()?.nativeElement.focus();
-	}
-	onAttach() {
-		const first = this.selectedDates()[0];
-		this.view.set("day");
-		this.focusedDate.set(startOfDay(first ?? clampTime(this.today, startOfDayOrNull$1(this.minDate()), this.maxDate())));
-		this.#focusDay();
-	}
-	onOverlayKeydown(event) {
-		if (event.key === "Escape") {
-			event.preventDefault();
-			this.close(true);
+	selected = input(null, ...ngDevMode ? [{ debugName: "selected" }] : 	/* istanbul ignore next */ []);
+	describedBy = input(null, ...ngDevMode ? [{ debugName: "describedBy" }] : 	/* istanbul ignore next */ []);
+	chosen = output();
+	select = viewChild(HxSelect, ...ngDevMode ? [{ debugName: "select" }] : 	/* istanbul ignore next */ []);
+	presetValue = (preset) => preset;
+	#restoring = false;
+	chooseInSelect(preset) {
+		if (!preset || this.#restoring) return;
+		this.chosen.emit(preset);
+		this.#restoring = true;
+		try {
+			this.select()?.value.set(this.selected());
+		} finally {
+			this.#restoring = false;
 		}
 	}
-	onOutsideClick(event) {
-		if (!this.#host.nativeElement.contains(event.target)) this.close();
-	}
-	onFieldKeydown(event) {
-		if (event.key === "ArrowDown" || event.altKey && event.key === "ArrowUp") {
-			event.preventDefault();
-			this.show();
-		} else if (event.key === "Enter") this.commitTyping();
-	}
-	onTyping(event) {
-		this.#typed.set(event.target.value);
-	}
-	commitTyping() {
-		const typed = this.#typed();
-		if (typed === null) return;
-		this.#typed.set(null);
-		this.#parseAndCommit(typed);
-		const field = this.field();
-		if (field) field.nativeElement.value = this.text();
-	}
-	#parseAndCommit(typed) {
-		const text = typed.trim();
-		if (text === "") {
-			this.#commit(this.selectionMode() === "single" ? null : []);
-			return;
-		}
-		const dates = (this.selectionMode() === "single" ? [text] : text.split(/\s*(?:,|–)\s*/)).map((part) => this.#parse(part));
-		if (dates.some((d) => d === null || this.isDateDisabled(d))) return;
-		const valid = dates;
-		if (this.selectionMode() === "range" && valid.length > 2) return;
-		this.#commit(this.selectionMode() === "single" ? valid[0] : valid);
-		if (valid[0]) this.focusedDate.set(startOfDay(valid[0]));
-	}
-	#parse(text) {
-		return parseDateText(text, this.locale());
-	}
-	selectToday() {
-		this.pick(this.today);
-	}
-	clear() {
-		this.#typed.set(null);
-		this.#commit(this.selectionMode() === "single" ? null : []);
-		this.close(true);
-	}
-	onHostFocusOut(event) {
-		if (this.inline()) return;
-		const next = event.relatedTarget;
-		if (next?.closest(".hx-date-picker-popup") || this.#host.nativeElement.contains(next)) return;
-		if (this.open()) return;
-		this.close();
-		this.commitTyping();
-		this.#onTouched();
-		this.touch.emit();
-	}
-	onFocusOut(event) {
-		if (!this.inline()) return;
-		if (this.#host.nativeElement.contains(event.relatedTarget)) return;
-		this.#onTouched();
-		this.touch.emit();
-	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
 		ngImport: i0,
-		type: HxDatePicker,
+		type: HxRangePresets,
 		deps: [],
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
 		version: "22.2.1",
-		type: HxDatePicker,
+		type: HxRangePresets,
 		isStandalone: true,
-		selector: "hx-date-picker",
+		selector: "hx-range-presets",
 		inputs: {
-			placeholder: {
-				classPropertyName: "placeholder",
-				publicName: "placeholder",
+			presets: {
+				classPropertyName: "presets",
+				publicName: "presets",
 				isSignal: true,
-				isRequired: false,
+				isRequired: true,
 				transformFunction: null
 			},
-			showIcon: {
-				classPropertyName: "showIcon",
-				publicName: "showIcon",
+			display: {
+				classPropertyName: "display",
+				publicName: "display",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			showButtonBar: {
-				classPropertyName: "showButtonBar",
-				publicName: "showButtonBar",
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			dateFormat: {
-				classPropertyName: "dateFormat",
-				publicName: "dateFormat",
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			todayLabel: {
-				classPropertyName: "todayLabel",
-				publicName: "todayLabel",
+			selected: {
+				classPropertyName: "selected",
+				publicName: "selected",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			clearLabel: {
-				classPropertyName: "clearLabel",
-				publicName: "clearLabel",
+			describedBy: {
+				classPropertyName: "describedBy",
+				publicName: "describedBy",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			}
+		},
+		outputs: { chosen: "chosen" },
+		host: {
+			properties: {
+				"class.hx-range-presets-select": "display() === 'select'",
+				"attr.role": "display() === 'select' ? null : 'group'",
+				"attr.aria-label": "display() === 'select' ? null : label()"
 			},
-			chooseLabel: {
-				classPropertyName: "chooseLabel",
-				publicName: "chooseLabel",
+			classAttribute: "hx-range-presets"
+		},
+		viewQueries: [{
+			propertyName: "select",
+			first: true,
+			predicate: HxSelect,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    @if (display() === 'select') {
+      <hx-select
+        class="hx-range-preset-select"
+        fluid
+        [options]="presets()"
+        optionLabel="label"
+        [optionValue]="presetValue"
+        [placeholder]="label()"
+        [ariaLabel]="label()"
+        [ariaDescribedby]="describedBy()"
+        [disabled]="disabled()"
+        [value]="selected()"
+        (valueChange)="chooseInSelect($event)"
+      />
+    } @else {
+      @for (preset of presets(); track $index) {
+        <button
+          type="button"
+          class="hx-date-picker-button hx-range-preset"
+          [disabled]="disabled()"
+          [attr.aria-describedby]="describedBy()"
+          (click)="chosen.emit(preset)"
+        >
+          {{ preset.label }}
+        </button>
+      }
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: HxSelect,
+			selector: "hx-select",
+			inputs: [
+				"options",
+				"optionLabel",
+				"optionValue",
+				"optionDisabled",
+				"placeholder",
+				"emptyMessage",
+				"filter",
+				"filterPlaceholder",
+				"filterBy",
+				"emptyFilterMessage",
+				"size",
+				"variant",
+				"fluid",
+				"showClear",
+				"inputId",
+				"ariaLabel",
+				"ariaLabelledby",
+				"ariaDescribedby",
+				"compareWith",
+				"value",
+				"disabled",
+				"invalid"
+			],
+			outputs: ["valueChange", "touch"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: HxRangePresets,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hx-range-presets",
+			imports: [HxSelect],
+			template: `
+    @if (display() === 'select') {
+      <hx-select
+        class="hx-range-preset-select"
+        fluid
+        [options]="presets()"
+        optionLabel="label"
+        [optionValue]="presetValue"
+        [placeholder]="label()"
+        [ariaLabel]="label()"
+        [ariaDescribedby]="describedBy()"
+        [disabled]="disabled()"
+        [value]="selected()"
+        (valueChange)="chooseInSelect($event)"
+      />
+    } @else {
+      @for (preset of presets(); track $index) {
+        <button
+          type="button"
+          class="hx-date-picker-button hx-range-preset"
+          [disabled]="disabled()"
+          [attr.aria-describedby]="describedBy()"
+          (click)="chosen.emit(preset)"
+        >
+          {{ preset.label }}
+        </button>
+      }
+    }
+  `,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "hx-range-presets",
+				"[class.hx-range-presets-select]": "display() === 'select'",
+				"[attr.role]": "display() === 'select' ? null : 'group'",
+				"[attr.aria-label]": "display() === 'select' ? null : label()"
+			}
+		}]
+	}],
+	propDecorators: {
+		presets: [{
+			type: i0.Input,
+			args: [{
 				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			inputId: {
-				classPropertyName: "inputId",
-				publicName: "inputId",
+				alias: "presets",
+				required: true
+			}]
+		}],
+		display: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "display",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		selected: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selected",
+				required: false
+			}]
+		}],
+		describedBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "describedBy",
+				required: false
+			}]
+		}],
+		chosen: [{
+			type: i0.Output,
+			args: ["chosen"]
+		}],
+		select: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => HxSelect), { isSignal: true }]
+		}]
+	}
+});
+const startOfDayOrNull$1 = (date) => isValidDate(date) ? startOfDay(date) : null;
+var HxDatePicker = class HxDatePicker {
+	#host = inject(ElementRef);
+	#injector = inject(Injector);
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : 	/* istanbul ignore next */ []);
+	showIcon = input(false, {
+		...ngDevMode ? { debugName: "showIcon" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showButtonBar = input(false, {
+		...ngDevMode ? { debugName: "showButtonBar" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	dateFormat = input(...ngDevMode ? [void 0, { debugName: "dateFormat" }] : 	/* istanbul ignore next */ []);
+	todayLabel = input("Today", ...ngDevMode ? [{ debugName: "todayLabel" }] : 	/* istanbul ignore next */ []);
+	clearLabel = input("Clear", ...ngDevMode ? [{ debugName: "clearLabel" }] : 	/* istanbul ignore next */ []);
+	chooseLabel = input("Choose date", ...ngDevMode ? [{ debugName: "chooseLabel" }] : 	/* istanbul ignore next */ []);
+	inputId = input(...ngDevMode ? [void 0, { debugName: "inputId" }] : 	/* istanbul ignore next */ []);
+	inline = input(false, {
+		...ngDevMode ? { debugName: "inline" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	selectionMode = input("single", ...ngDevMode ? [{ debugName: "selectionMode" }] : 	/* istanbul ignore next */ []);
+	minDate = input(null, ...ngDevMode ? [{ debugName: "minDate" }] : 	/* istanbul ignore next */ []);
+	maxDate = input(null, ...ngDevMode ? [{ debugName: "maxDate" }] : 	/* istanbul ignore next */ []);
+	disabledDates = input([], ...ngDevMode ? [{ debugName: "disabledDates" }] : 	/* istanbul ignore next */ []);
+	firstDayOfWeek = input(0, {
+		...ngDevMode ? { debugName: "firstDayOfWeek" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	locale = input(...ngDevMode ? [void 0, { debugName: "locale" }] : 	/* istanbul ignore next */ []);
+	ariaLabel = input(...ngDevMode ? [void 0, { debugName: "ariaLabel" }] : 	/* istanbul ignore next */ []);
+	ariaLabelledby = input(...ngDevMode ? [void 0, { debugName: "ariaLabelledby" }] : 	/* istanbul ignore next */ []);
+	presets = input([], ...ngDevMode ? [{ debugName: "presets" }] : 	/* istanbul ignore next */ []);
+	presetDisplay = input("buttons", ...ngDevMode ? [{ debugName: "presetDisplay" }] : 	/* istanbul ignore next */ []);
+	presetsLabel = input("Presets", ...ngDevMode ? [{ debugName: "presetsLabel" }] : 	/* istanbul ignore next */ []);
+	presetRefusedLabel = input("This range cannot be chosen.", ...ngDevMode ? [{ debugName: "presetRefusedLabel" }] : 	/* istanbul ignore next */ []);
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touch = output();
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : 	/* istanbul ignore next */ []);
+	titleId = nextId("hx-date-picker-title");
+	popupId = nextId("hx-date-picker-popup");
+	positions = [{
+		originX: "start",
+		originY: "bottom",
+		overlayX: "start",
+		overlayY: "top",
+		offsetY: 2
+	}, {
+		originX: "start",
+		originY: "top",
+		overlayX: "start",
+		overlayY: "bottom",
+		offsetY: -2
+	}];
+	field = viewChild("field", ...ngDevMode ? [{ debugName: "field" }] : 	/* istanbul ignore next */ []);
+	calendar = viewChild(HxCalendar, ...ngDevMode ? [{ debugName: "calendar" }] : 	/* istanbul ignore next */ []);
+	shownPresets = computed(() => this.selectionMode() === "range" ? this.presets() : [], ...ngDevMode ? [{ debugName: "shownPresets" }] : 	/* istanbul ignore next */ []);
+	#chosen = signal(null, ...ngDevMode ? [{ debugName: "#chosen" }] : 	/* istanbul ignore next */ []);
+	selectedPreset = computed(() => {
+		const chosen = this.#chosen();
+		if (!chosen) return null;
+		const days = this.selectedDates();
+		if (!(days.length === 2 && isSameDay(days[0], chosen.from) && isSameDay(days[1], chosen.to))) return null;
+		const list = this.shownPresets();
+		return list.find((p) => p === chosen.preset) ?? list.find((p) => p.label === chosen.preset.label) ?? null;
+	}, ...ngDevMode ? [{ debugName: "selectedPreset" }] : 	/* istanbul ignore next */ []);
+	presetError = signal(false, ...ngDevMode ? [{ debugName: "presetError" }] : 	/* istanbul ignore next */ []);
+	presetErrorId = nextId("hx-date-picker-preset-error");
+	#typed = signal(null, ...ngDevMode ? [{ debugName: "#typed" }] : 	/* istanbul ignore next */ []);
+	view = signal("day", ...ngDevMode ? [{ debugName: "view" }] : 	/* istanbul ignore next */ []);
+	#cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "#cvaDisabled" }] : 	/* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.#cvaDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : 	/* istanbul ignore next */ []);
+	focusedDate = signal(startOfDay(/* @__PURE__ */ new Date()), ...ngDevMode ? [{ debugName: "focusedDate" }] : 	/* istanbul ignore next */ []);
+	today = startOfDay(/* @__PURE__ */ new Date());
+	selectedDates = computed(() => {
+		const value = this.value();
+		if (Array.isArray(value)) return value.filter(isValidDate);
+		return isValidDate(value) ? [value] : [];
+	}, ...ngDevMode ? [{ debugName: "selectedDates" }] : 	/* istanbul ignore next */ []);
+	#format = computed(() => new Intl.DateTimeFormat(this.locale(), this.dateFormat() ?? {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric"
+	}), ...ngDevMode ? [{ debugName: "#format" }] : 	/* istanbul ignore next */ []);
+	text = computed(() => {
+		const typed = this.#typed();
+		if (typed !== null) return typed;
+		const dates = this.selectedDates();
+		const fmt = this.#format();
+		if (this.selectionMode() === "range") return dates.map((d) => fmt.format(d)).join(" – ");
+		return dates.map((d) => fmt.format(d)).join(", ");
+	}, ...ngDevMode ? [{ debugName: "text" }] : 	/* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const first = this.selectedDates()[0] ?? clampTime(this.today, startOfDayOrNull$1(this.minDate()), this.maxDate());
+			const shown = untracked(() => this.focusedDate());
+			if (first && (first.getFullYear() !== shown.getFullYear() || first.getMonth() !== shown.getMonth())) this.focusedDate.set(startOfDay(first));
+		});
+	}
+	#onChange = () => {};
+	#onTouched = () => {};
+	writeValue(value) {
+		this.#typed.set(null);
+		this.presetError.set(false);
+		this.value.set(value ?? null);
+	}
+	registerOnChange(fn) {
+		this.#onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.#onTouched = fn;
+	}
+	setDisabledState(disabled) {
+		this.#cvaDisabled.set(disabled);
+	}
+	focus() {
+		const field = this.field();
+		if (field) field.nativeElement.focus();
+		else this.#focusDay();
+	}
+	isDateDisabled(date) {
+		return isDateDisabled(date, {
+			min: this.minDate(),
+			max: this.maxDate(),
+			disabledDates: this.disabledDates()
+		});
+	}
+	isSelected(date) {
+		return this.selectedDates().some((d) => isSameDay(d, date));
+	}
+	pick(date) {
+		if (this.isDisabled() || this.isDateDisabled(date)) return;
+		const day = startOfDay(date);
+		this.focusedDate.set(day);
+		const selected = this.selectedDates();
+		let next;
+		const mode = this.selectionMode();
+		switch (mode) {
+			case "multiple":
+				next = this.isSelected(day) ? selected.filter((d) => !isSameDay(d, day)) : [...selected, day];
+				break;
+			case "range":
+				if (selected.length !== 1) next = [day];
+				else next = compareDays(day, selected[0]) < 0 ? [day, selected[0]] : [selected[0], day];
+				break;
+			default: next = day;
+		}
+		this.#typed.set(null);
+		this.#commit(next);
+		if (!this.inline()) {
+			if (mode === "single" || mode === "range" && Array.isArray(next) && next.length === 2) this.close(true);
+		}
+	}
+	applyPreset(preset) {
+		if (this.isDisabled()) return;
+		const range = hxResolvePreset(preset, { firstDayOfWeek: this.firstDayOfWeek() }, (date) => this.#presetDay(date));
+		const [min, max] = [this.minDate(), this.maxDate()];
+		const outside = !range?.from || !range.to || isValidDate(min) && compareDays(range.to, min) < 0 || isValidDate(max) && compareDays(range.from, max) > 0;
+		const from = range?.from && this.#inLimits(range.from);
+		const to = range?.to && this.#inLimits(range.to);
+		if (outside || !from || !to || this.isDateDisabled(from) || this.isDateDisabled(to)) {
+			this.presetError.set(true);
+			return;
+		}
+		const next = [from, to];
+		this.#typed.set(null);
+		this.focusedDate.set(from);
+		this.#commit(next);
+		this.#chosen.set({
+			preset,
+			from,
+			to
+		});
+		if (this.inline() || !this.open()) return;
+		this.close();
+		afterNextRender(() => this.field()?.nativeElement.focus(), { injector: this.#injector });
+	}
+	#presetDay(date) {
+		if (!isValidDate(date)) return null;
+		const day = startOfDay(date);
+		return this.disabledDates().some((d) => isSameDay(d, day)) ? void 0 : day;
+	}
+	#inLimits(day) {
+		const max = this.maxDate();
+		return clampTime(day, startOfDayOrNull$1(this.minDate()), isValidDate(max) ? startOfDay(max) : null);
+	}
+	#commit(next) {
+		this.presetError.set(false);
+		this.value.set(next);
+		this.#onChange(next);
+	}
+	#focusDay() {
+		afterNextRender(() => {
+			this.calendar()?.focusDay();
+		}, { injector: this.#injector });
+	}
+	show() {
+		if (this.isDisabled() || this.inline() || this.open()) return;
+		this.presetError.set(false);
+		this.open.set(true);
+	}
+	toggle() {
+		if (this.open()) this.close(true);
+		else this.show();
+	}
+	close(refocus = false) {
+		if (!this.open()) return;
+		this.open.set(false);
+		if (refocus) this.field()?.nativeElement.focus();
+	}
+	onAttach() {
+		const first = this.selectedDates()[0];
+		this.view.set("day");
+		this.focusedDate.set(startOfDay(first ?? clampTime(this.today, startOfDayOrNull$1(this.minDate()), this.maxDate())));
+		this.#focusDay();
+	}
+	onOverlayKeydown(event) {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			this.close(true);
+		}
+	}
+	onOutsideClick(event) {
+		if (isInSelectOverlay(event.target)) return;
+		if (!this.#host.nativeElement.contains(event.target)) this.close();
+	}
+	onFieldKeydown(event) {
+		if (event.key === "ArrowDown" || event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			this.show();
+		} else if (event.key === "Enter") this.commitTyping();
+	}
+	onTyping(event) {
+		this.#typed.set(event.target.value);
+	}
+	commitTyping() {
+		const typed = this.#typed();
+		if (typed === null) return;
+		this.#typed.set(null);
+		this.#parseAndCommit(typed);
+		const field = this.field();
+		if (field) field.nativeElement.value = this.text();
+	}
+	#parseAndCommit(typed) {
+		const text = typed.trim();
+		if (text === "") {
+			this.#commit(this.selectionMode() === "single" ? null : []);
+			return;
+		}
+		const dates = (this.selectionMode() === "single" ? [text] : text.split(/\s*(?:,|–)\s*/)).map((part) => this.#parse(part));
+		if (dates.some((d) => d === null || this.isDateDisabled(d))) return;
+		const valid = dates;
+		if (this.selectionMode() === "range" && valid.length > 2) return;
+		this.#commit(this.selectionMode() === "single" ? valid[0] : valid);
+		if (valid[0]) this.focusedDate.set(startOfDay(valid[0]));
+	}
+	#parse(text) {
+		return parseDateText(text, this.locale());
+	}
+	selectToday() {
+		this.pick(this.today);
+	}
+	clear() {
+		this.#typed.set(null);
+		this.#commit(this.selectionMode() === "single" ? null : []);
+		this.close(true);
+	}
+	onHostFocusOut(event) {
+		if (this.inline()) return;
+		const next = event.relatedTarget;
+		if (next?.closest(".hx-date-picker-popup") || this.#host.nativeElement.contains(next)) return;
+		if (this.open()) return;
+		this.close();
+		this.commitTyping();
+		this.#onTouched();
+		this.touch.emit();
+	}
+	onFocusOut(event) {
+		if (!this.inline()) return;
+		const host = this.#host.nativeElement;
+		const next = event.relatedTarget;
+		if (host.contains(next) || isInSelectOverlay(next)) return;
+		this.#onTouched();
+		this.touch.emit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: HxDatePicker,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: HxDatePicker,
+		isStandalone: true,
+		selector: "hx-date-picker",
+		inputs: {
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showIcon: {
+				classPropertyName: "showIcon",
+				publicName: "showIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showButtonBar: {
+				classPropertyName: "showButtonBar",
+				publicName: "showButtonBar",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dateFormat: {
+				classPropertyName: "dateFormat",
+				publicName: "dateFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			todayLabel: {
+				classPropertyName: "todayLabel",
+				publicName: "todayLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearLabel: {
+				classPropertyName: "clearLabel",
+				publicName: "clearLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			chooseLabel: {
+				classPropertyName: "chooseLabel",
+				publicName: "chooseLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputId: {
+				classPropertyName: "inputId",
+				publicName: "inputId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inline: {
+				classPropertyName: "inline",
+				publicName: "inline",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectionMode: {
+				classPropertyName: "selectionMode",
+				publicName: "selectionMode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minDate: {
+				classPropertyName: "minDate",
+				publicName: "minDate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxDate: {
+				classPropertyName: "maxDate",
+				publicName: "maxDate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabledDates: {
+				classPropertyName: "disabledDates",
+				publicName: "disabledDates",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			firstDayOfWeek: {
+				classPropertyName: "firstDayOfWeek",
+				publicName: "firstDayOfWeek",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabelledby: {
+				classPropertyName: "ariaLabelledby",
+				publicName: "ariaLabelledby",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			presets: {
+				classPropertyName: "presets",
+				publicName: "presets",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			presetDisplay: {
+				classPropertyName: "presetDisplay",
+				publicName: "presetDisplay",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			presetsLabel: {
+				classPropertyName: "presetsLabel",
+				publicName: "presetsLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			presetRefusedLabel: {
+				classPropertyName: "presetRefusedLabel",
+				publicName: "presetRefusedLabel",
+				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
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch"
+		},
+		host: {
+			listeners: { "focusout": "onHostFocusOut($event)" },
+			properties: {
+				"class.hx-date-picker-inline": "inline()",
+				"class.hx-date-picker-disabled": "isDisabled()",
+				"class.hx-date-picker-invalid": "invalid()",
+				"class.hx-date-picker-open": "open()",
+				"class.hx-date-picker-has-icon": "showIcon() && !inline()",
+				"class.hx-filled": "!inline() && text() !== \"\""
+			},
+			classAttribute: "hx-date-picker"
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => HxDatePicker),
+			multi: true
+		}],
+		viewQueries: [{
+			propertyName: "field",
+			first: true,
+			predicate: ["field"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "calendar",
+			first: true,
+			predicate: HxCalendar,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"calendar\" />\n} @else {\n  <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\n      class=\"hx-date-picker-input\"\n      autocomplete=\"off\"\n      aria-haspopup=\"dialog\"\n      [attr.id]=\"inputId() ?? null\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"text()\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"open() ? popupId : null\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      (input)=\"onTyping($event)\"\n      (change)=\"commitTyping()\"\n      (click)=\"show()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    @if (showIcon()) {\n      <button\n        type=\"button\"\n        class=\"hx-date-picker-trigger\"\n        aria-haspopup=\"dialog\"\n        [attr.aria-label]=\"chooseLabel()\"\n        [attr.aria-expanded]=\"open()\"\n        [disabled]=\"isDisabled()\"\n        (click)=\"toggle()\"\n      >\n        <span class=\"hx-date-picker-trigger-icon\" aria-hidden=\"true\"></span>\n      </button>\n    }\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayPanelClass=\"hx-date-picker-overlay\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayPush]=\"true\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n    (overlayKeydown)=\"onOverlayKeydown($event)\"\n    (attach)=\"onAttach()\"\n    (detach)=\"open.set(false)\"\n  >\n    <div\n      class=\"hx-date-picker-popup\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [id]=\"popupId\"\n      [attr.aria-label]=\"ariaLabel() ?? 'Choose date'\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n    >\n      <ng-container [ngTemplateOutlet]=\"calendar\" />\n      @if (showButtonBar()) {\n        <div class=\"hx-date-picker-buttonbar\">\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"selectToday()\">{{ todayLabel() }}</button>\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n        </div>\n      }\n    </div>\n  </ng-template>\n}\n\n<ng-template #calendar>\n<div\n  class=\"hx-date-picker-panel\"\n  role=\"group\"\n  [attr.aria-label]=\"ariaLabel() ?? 'Calendar'\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  (focusout)=\"onFocusOut($event)\"\n>\n    @if (shownPresets().length > 0) {\n      <hx-range-presets\n        [presets]=\"shownPresets()\"\n        [display]=\"presetDisplay()\"\n        [label]=\"presetsLabel()\"\n        [disabled]=\"isDisabled()\"\n        [selected]=\"selectedPreset()\"\n        [describedBy]=\"presetError() ? presetErrorId : null\"\n        (chosen)=\"applyPreset($event)\"\n      />\n      @if (presetError()) {\n        <p class=\"hx-date-picker-error\" role=\"alert\" [id]=\"presetErrorId\">{{ presetRefusedLabel() }}</p>\n      }\n    }\n    <hx-calendar\n      [(focusedDate)]=\"focusedDate\"\n      [(view)]=\"view\"\n      [selectedDates]=\"selectedDates()\"\n      [selectionMode]=\"selectionMode()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabledDates]=\"disabledDates()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [locale]=\"locale()\"\n      [disabled]=\"isDisabled()\"\n      [titleId]=\"titleId\"\n      [today]=\"today\"\n      (picked)=\"pick($event)\"\n    />\n</div>\n</ng-template>\n",
+		dependencies: [
+			{
+				kind: "directive",
+				type: CdkConnectedOverlay,
+				selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]",
+				inputs: [
+					"cdkConnectedOverlayOrigin",
+					"cdkConnectedOverlayPositions",
+					"cdkConnectedOverlayPositionStrategy",
+					"cdkConnectedOverlayOffsetX",
+					"cdkConnectedOverlayOffsetY",
+					"cdkConnectedOverlayWidth",
+					"cdkConnectedOverlayHeight",
+					"cdkConnectedOverlayMinWidth",
+					"cdkConnectedOverlayMinHeight",
+					"cdkConnectedOverlayBackdropClass",
+					"cdkConnectedOverlayPanelClass",
+					"cdkConnectedOverlayViewportMargin",
+					"cdkConnectedOverlayScrollStrategy",
+					"cdkConnectedOverlayOpen",
+					"cdkConnectedOverlayDisableClose",
+					"cdkConnectedOverlayTransformOriginOn",
+					"cdkConnectedOverlayHasBackdrop",
+					"cdkConnectedOverlayLockPosition",
+					"cdkConnectedOverlayFlexibleDimensions",
+					"cdkConnectedOverlayGrowAfterOpen",
+					"cdkConnectedOverlayPush",
+					"cdkConnectedOverlayDisposeOnNavigation",
+					"cdkConnectedOverlayUsePopover",
+					"cdkConnectedOverlayMatchWidth",
+					"cdkConnectedOverlay"
+				],
+				outputs: [
+					"backdropClick",
+					"positionChange",
+					"attach",
+					"detach",
+					"overlayKeydown",
+					"overlayOutsideClick"
+				],
+				exportAs: ["cdkConnectedOverlay"]
+			},
+			{
+				kind: "directive",
+				type: CdkOverlayOrigin,
+				selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]",
+				exportAs: ["cdkOverlayOrigin"]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: HxCalendar,
+				selector: "hx-calendar",
+				inputs: [
+					"focusedDate",
+					"view",
+					"selectedDates",
+					"selectionMode",
+					"minDate",
+					"maxDate",
+					"disabledDates",
+					"firstDayOfWeek",
+					"locale",
+					"disabled",
+					"titleId",
+					"today"
+				],
+				outputs: [
+					"focusedDateChange",
+					"viewChange",
+					"picked"
+				]
+			},
+			{
+				kind: "component",
+				type: HxRangePresets,
+				selector: "hx-range-presets",
+				inputs: [
+					"presets",
+					"display",
+					"label",
+					"disabled",
+					"selected",
+					"describedBy"
+				],
+				outputs: ["chosen"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: HxDatePicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hx-date-picker",
+			imports: [
+				CdkConnectedOverlay,
+				CdkOverlayOrigin,
+				NgTemplateOutlet,
+				HxCalendar,
+				HxRangePresets
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => HxDatePicker),
+				multi: true
+			}],
+			host: {
+				class: "hx-date-picker",
+				"[class.hx-date-picker-inline]": "inline()",
+				"[class.hx-date-picker-disabled]": "isDisabled()",
+				"[class.hx-date-picker-invalid]": "invalid()",
+				"[class.hx-date-picker-open]": "open()",
+				"[class.hx-date-picker-has-icon]": "showIcon() && !inline()",
+				"[class.hx-filled]": "!inline() && text() !== \"\"",
+				"(focusout)": "onHostFocusOut($event)"
+			},
+			template: "@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"calendar\" />\n} @else {\n  <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\n      class=\"hx-date-picker-input\"\n      autocomplete=\"off\"\n      aria-haspopup=\"dialog\"\n      [attr.id]=\"inputId() ?? null\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"text()\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"open() ? popupId : null\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      (input)=\"onTyping($event)\"\n      (change)=\"commitTyping()\"\n      (click)=\"show()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    @if (showIcon()) {\n      <button\n        type=\"button\"\n        class=\"hx-date-picker-trigger\"\n        aria-haspopup=\"dialog\"\n        [attr.aria-label]=\"chooseLabel()\"\n        [attr.aria-expanded]=\"open()\"\n        [disabled]=\"isDisabled()\"\n        (click)=\"toggle()\"\n      >\n        <span class=\"hx-date-picker-trigger-icon\" aria-hidden=\"true\"></span>\n      </button>\n    }\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayPanelClass=\"hx-date-picker-overlay\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayPush]=\"true\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n    (overlayKeydown)=\"onOverlayKeydown($event)\"\n    (attach)=\"onAttach()\"\n    (detach)=\"open.set(false)\"\n  >\n    <div\n      class=\"hx-date-picker-popup\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [id]=\"popupId\"\n      [attr.aria-label]=\"ariaLabel() ?? 'Choose date'\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n    >\n      <ng-container [ngTemplateOutlet]=\"calendar\" />\n      @if (showButtonBar()) {\n        <div class=\"hx-date-picker-buttonbar\">\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"selectToday()\">{{ todayLabel() }}</button>\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n        </div>\n      }\n    </div>\n  </ng-template>\n}\n\n<ng-template #calendar>\n<div\n  class=\"hx-date-picker-panel\"\n  role=\"group\"\n  [attr.aria-label]=\"ariaLabel() ?? 'Calendar'\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  (focusout)=\"onFocusOut($event)\"\n>\n    @if (shownPresets().length > 0) {\n      <hx-range-presets\n        [presets]=\"shownPresets()\"\n        [display]=\"presetDisplay()\"\n        [label]=\"presetsLabel()\"\n        [disabled]=\"isDisabled()\"\n        [selected]=\"selectedPreset()\"\n        [describedBy]=\"presetError() ? presetErrorId : null\"\n        (chosen)=\"applyPreset($event)\"\n      />\n      @if (presetError()) {\n        <p class=\"hx-date-picker-error\" role=\"alert\" [id]=\"presetErrorId\">{{ presetRefusedLabel() }}</p>\n      }\n    }\n    <hx-calendar\n      [(focusedDate)]=\"focusedDate\"\n      [(view)]=\"view\"\n      [selectedDates]=\"selectedDates()\"\n      [selectionMode]=\"selectionMode()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabledDates]=\"disabledDates()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [locale]=\"locale()\"\n      [disabled]=\"isDisabled()\"\n      [titleId]=\"titleId\"\n      [today]=\"today\"\n      (picked)=\"pick($event)\"\n    />\n</div>\n</ng-template>\n"
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		showIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showIcon",
+				required: false
+			}]
+		}],
+		showButtonBar: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showButtonBar",
+				required: false
+			}]
+		}],
+		dateFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dateFormat",
+				required: false
+			}]
+		}],
+		todayLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "todayLabel",
+				required: false
+			}]
+		}],
+		clearLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearLabel",
+				required: false
+			}]
+		}],
+		chooseLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "chooseLabel",
+				required: false
+			}]
+		}],
+		inputId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputId",
+				required: false
+			}]
+		}],
+		inline: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inline",
+				required: false
+			}]
+		}],
+		selectionMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectionMode",
+				required: false
+			}]
+		}],
+		minDate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minDate",
+				required: false
+			}]
+		}],
+		maxDate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxDate",
+				required: false
+			}]
+		}],
+		disabledDates: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabledDates",
+				required: false
+			}]
+		}],
+		firstDayOfWeek: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "firstDayOfWeek",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		ariaLabelledby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabelledby",
+				required: false
+			}]
+		}],
+		presets: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "presets",
+				required: false
+			}]
+		}],
+		presetDisplay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "presetDisplay",
+				required: false
+			}]
+		}],
+		presetsLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "presetsLabel",
+				required: false
+			}]
+		}],
+		presetRefusedLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "presetRefusedLabel",
+				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
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		field: [{
+			type: i0.ViewChild,
+			args: ["field", { isSignal: true }]
+		}],
+		calendar: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => HxCalendar), { isSignal: true }]
+		}]
+	}
+});
+const EXPRESSION = /^now((?:[+-]\d+[smhdwMy]|\/[smhdwMy])*)$/;
+const TOKEN = /([+-])(\d+)([smhdwMy])|\/([smhdwMy])/g;
+const MS = {
+	s: 1e3,
+	m: 6e4,
+	h: 36e5
+};
+function add(date, amount, unit) {
+	switch (unit) {
+		case "s":
+		case "m":
+		case "h": return new Date(date.getTime() + amount * MS[unit]);
+		case "d":
+		case "w": {
+			const result = new Date(date);
+			result.setDate(result.getDate() + amount * (unit === "w" ? 7 : 1));
+			return result;
+		}
+		case "M": return addMonthsKeepingTime(date, amount);
+		case "y": return addMonthsKeepingTime(date, amount * 12);
+	}
+}
+function addMonthsKeepingTime(date, months) {
+	const day = addMonths(date, months);
+	day.setHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
+	return day;
+}
+function startOf(date, unit, firstDayOfWeek) {
+	const [y, mo, d, h, mi, s] = [
+		date.getFullYear(),
+		date.getMonth(),
+		date.getDate(),
+		date.getHours(),
+		date.getMinutes(),
+		date.getSeconds()
+	];
+	switch (unit) {
+		case "s": return new Date(y, mo, d, h, mi, s);
+		case "m": return new Date(y, mo, d, h, mi);
+		case "h": return new Date(y, mo, d, h);
+		case "d": return new Date(y, mo, d);
+		case "w": return new Date(y, mo, d - (date.getDay() - firstDayOfWeek + 7) % 7);
+		case "M": return new Date(y, mo, 1);
+		case "y": return new Date(y, 0, 1);
+	}
+}
+function round(date, unit, options) {
+	const start = startOf(date, unit, options.firstDayOfWeek ?? 0);
+	if (!options.roundUp) return start;
+	return /* @__PURE__ */ new Date(add(start, 1, unit).getTime() - 1);
+}
+function hxParseDateMath(expression, options = {}) {
+	const match = typeof expression === "string" ? EXPRESSION.exec(expression.trim()) : null;
+	const now = options.now ?? /* @__PURE__ */ new Date();
+	if (!match || Number.isNaN(now.getTime())) return null;
+	let result = new Date(now);
+	for (const token of match[1].matchAll(TOKEN)) {
+		const [, sign, amount, shiftUnit, roundUnit] = token;
+		result = roundUnit ? round(result, roundUnit, options) : add(result, (sign === "-" ? -1 : 1) * Number(amount), shiftUnit);
+		if (Number.isNaN(result.getTime())) return null;
+	}
+	return result;
+}
+function hxRelativeRangeExpressions(direction, amount, unit) {
+	if (!Number.isSafeInteger(amount) || amount < 1) return null;
+	return direction === "last" ? {
+		from: `now-${amount}${unit}`,
+		to: "now"
+	} : {
+		from: "now",
+		to: `now+${amount}${unit}`
+	};
+}
+const QUICK_SELECT_UNITS = [
+	"s",
+	"m",
+	"h",
+	"d",
+	"w",
+	"M",
+	"y"
+];
+const HX_QUICK_SELECT_LABELS = {
+	quickSelect: "Quick select",
+	last: "Last",
+	next: "Next",
+	amount: "Amount",
+	unit: "Unit",
+	direction: "Direction",
+	apply: "Apply",
+	commonlyUsed: "Commonly used",
+	recentlyUsed: "Recently used",
+	start: "Start",
+	end: "End",
+	absolute: "Absolute",
+	relative: "Relative",
+	now: "Now",
+	nowHint: "Set to the current time when the range is applied.",
+	incompleteRange: "Choose a start and an end that can be applied.",
+	date: "Date",
+	roundTo: "Round to the {unit}",
+	lastRange: "Last {n} {unit}",
+	nextRange: "Next {n} {unit}",
+	range: "Start and end",
+	nowSummary: "now",
+	agoSummary: "~ {n} {unit} ago",
+	fromNowSummary: "~ {n} {unit} from now",
+	roundedSummary: "rounded to the {unit}",
+	emptySide: "Not set",
+	resolvesTo: "Resolves to {date}",
+	units: {
+		s: "seconds",
+		m: "minutes",
+		h: "hours",
+		d: "days",
+		w: "weeks",
+		M: "months",
+		y: "years"
+	},
+	unitsOne: {
+		s: "second",
+		m: "minute",
+		h: "hour",
+		d: "day",
+		w: "week",
+		M: "month",
+		y: "year"
+	},
+	unitsAgo: {
+		s: "Seconds ago",
+		m: "Minutes ago",
+		h: "Hours ago",
+		d: "Days ago",
+		w: "Weeks ago",
+		M: "Months ago",
+		y: "Years ago"
+	},
+	unitsFromNow: {
+		s: "Seconds from now",
+		m: "Minutes from now",
+		h: "Hours from now",
+		d: "Days from now",
+		w: "Weeks from now",
+		M: "Months from now",
+		y: "Years from now"
+	}
+};
+const HX_QUICK_SELECT_COMMONLY_USED = [
+	{
+		label: "Today",
+		from: "now/d",
+		to: "now/d"
+	},
+	{
+		label: "This week",
+		from: "now/w",
+		to: "now/w"
+	},
+	{
+		label: "Last 15 minutes",
+		from: "now-15m",
+		to: "now"
+	},
+	{
+		label: "Last 30 minutes",
+		from: "now-30m",
+		to: "now"
+	},
+	{
+		label: "Last 1 hour",
+		from: "now-1h",
+		to: "now"
+	},
+	{
+		label: "Last 24 hours",
+		from: "now-24h",
+		to: "now"
+	},
+	{
+		label: "Last 7 days",
+		from: "now-7d",
+		to: "now"
+	},
+	{
+		label: "Last 30 days",
+		from: "now-30d",
+		to: "now"
+	},
+	{
+		label: "Last 90 days",
+		from: "now-90d",
+		to: "now"
+	},
+	{
+		label: "Last 1 year",
+		from: "now-1y",
+		to: "now"
+	}
+];
+const DEFAULT_SIDE = {
+	mode: "absolute",
+	amount: 15,
+	unit: "m",
+	direction: "ago",
+	round: false,
+	raw: null
+};
+const SIDE_MODES = [
+	"absolute",
+	"relative",
+	"now"
+];
+const ABSOLUTE_SIDES = {
+	from: DEFAULT_SIDE,
+	to: DEFAULT_SIDE
+};
+const SIMPLE = /^now(?:([+-])(\d+)([smhdwMy]))?(?:\/([smhdwMy]))?$/;
+function sideFromExpression(expression) {
+	const text = expression.trim();
+	if (text === "now") return {
+		...DEFAULT_SIDE,
+		mode: "now"
+	};
+	const match = SIMPLE.exec(text);
+	if (match) {
+		const [, sign, amount, shiftUnit, roundUnit] = match;
+		if (!shiftUnit || !roundUnit || shiftUnit === roundUnit) return {
+			mode: "relative",
+			amount: amount ? Number(amount) : 0,
+			unit: shiftUnit ?? roundUnit,
+			direction: sign === "+" ? "fromNow" : "ago",
+			round: !!roundUnit,
+			raw: null
+		};
+	}
+	if (hxParseDateMath(text)) return {
+		...DEFAULT_SIDE,
+		mode: "relative",
+		raw: text
+	};
+	return { ...DEFAULT_SIDE };
+}
+function sideExpression(side) {
+	if (side.mode === "now") return "now";
+	if (side.mode === "absolute") return null;
+	if (side.raw) return side.raw;
+	if (side.amount === null || !Number.isFinite(side.amount) || side.amount < 0) return null;
+	const amount = Math.floor(side.amount);
+	return `now${amount > 0 ? `${side.direction === "ago" ? "-" : "+"}${amount}${side.unit}` : ""}${side.round ? `/${side.unit}` : ""}`;
+}
+const DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
+function hxResolveRangeSide(expression, options = {}) {
+	const math = hxParseDateMath(expression, options);
+	if (math) return math;
+	const text = typeof expression === "string" ? expression.trim() : "";
+	const day = DATE_ONLY.exec(text);
+	if (day) {
+		const [y, m, d] = [
+			Number(day[1]),
+			Number(day[2]) - 1,
+			Number(day[3])
+		];
+		const date = new Date(y, m, d);
+		return date.getFullYear() === y && date.getMonth() === m && date.getDate() === d ? date : null;
+	}
+	if (!/^\d{4}-\d{2}-\d{2}T/.test(text)) return null;
+	const date = new Date(text);
+	return Number.isNaN(date.getTime()) ? null : date;
+}
+function hxResolveRangeExpression(range, options = {}) {
+	return {
+		from: hxResolveRangeSide(range.from, {
+			...options,
+			roundUp: false
+		}),
+		to: hxResolveRangeSide(range.to, {
+			...options,
+			roundUp: true
+		})
+	};
+}
+const fill = (template, n, unit) => template.replace("{n}", String(n)).replace("{unit}", unit);
+function describeSide(side, labels) {
+	if (side.mode === "absolute") return null;
+	if (side.mode === "now") return labels.nowSummary;
+	if (side.raw) return side.raw;
+	if (sideExpression(side) === null) return labels.emptySide;
+	const n = Math.floor(side.amount ?? 0);
+	const unit = n === 1 ? labels.unitsOne[side.unit] : labels.units[side.unit];
+	const text = n === 0 ? labels.nowSummary : fill(side.direction === "ago" ? labels.agoSummary : labels.fromNowSummary, n, unit);
+	return side.round ? `${text}, ${fill(labels.roundedSummary, n, labels.unitsOne[side.unit])}` : text;
+}
+function describeRange(range, labels, common, formatDate, separator = "-") {
+	const known = common.find((c) => c.from === range.from && c.to === range.to);
+	if (known) return known.label;
+	const last = /^now-(\d+)([smhdwMy])$/.exec(range.from);
+	const next = /^now\+(\d+)([smhdwMy])$/.exec(range.to);
+	const unitName = (n, unit) => n === 1 ? labels.unitsOne[unit] : labels.units[unit];
+	if (last && range.to === "now") {
+		const n = Number(last[1]);
+		return fill(labels.lastRange, n, unitName(n, last[2]));
+	}
+	if (next && range.from === "now") {
+		const n = Number(next[1]);
+		return fill(labels.nextRange, n, unitName(n, next[2]));
+	}
+	const side = (text) => {
+		if (hxParseDateMath(text)) return text;
+		const date = hxResolveRangeSide(text);
+		return date ? formatDate(date) : text;
+	};
+	return `${side(range.from)} ${separator} ${side(range.to)}`;
+}
+const RECENT_SIDE_MAX = 64;
+const isRangeSide = (value) => typeof value === "string" && value.length <= RECENT_SIDE_MAX && hxResolveRangeSide(value) !== null;
+const isRange = (value) => !!value && isRangeSide(value.from) && isRangeSide(value.to);
+function storage() {
+	try {
+		return globalThis.localStorage ?? null;
+	} catch {
+		return null;
+	}
+}
+function readRecentRanges(key) {
+	if (!key) return null;
+	let text;
+	try {
+		const store = storage();
+		if (!store) return null;
+		text = store.getItem(key);
+	} catch {
+		return null;
+	}
+	try {
+		const parsed = JSON.parse(text ?? "[]");
+		if (!Array.isArray(parsed)) return [];
+		return parsed.filter(isRange).reduce((list, { from, to }) => list.some((r) => r.from === from && r.to === to) ? list : [...list, {
+			from,
+			to
+		}], []).slice(0, 5);
+	} catch {
+		return [];
+	}
+}
+function writeRecentRanges(key, ranges) {
+	if (!key) return;
+	try {
+		storage()?.setItem(key, JSON.stringify(ranges));
+	} catch {}
+}
+function addRecentRange(ranges, range, max = 5) {
+	const rest = ranges.filter((r) => r.from !== range.from || r.to !== range.to);
+	return [{
+		from: range.from,
+		to: range.to
+	}, ...rest].slice(0, max);
+}
+const EMPTY$1 = {
+	from: null,
+	to: null
+};
+const RESOLVE_TOLERANCE_MS = 1e3;
+const sameTime$1 = (a, b, tolerance = 0) => a === null || b === null ? a === b : Math.abs(a.getTime() - b.getTime()) <= tolerance;
+const sameRange$1 = (a, b) => b !== null && sameTime$1(a.from, b.from) && sameTime$1(a.to, b.to);
+const SIDE_KEYS = ["from", "to"];
+const sidesFrom = (expression) => expression ? {
+	from: sideFromExpression(expression.from),
+	to: sideFromExpression(expression.to)
+} : ABSOLUTE_SIDES;
+var HxDateRangeQuickSelect = class HxDateRangeQuickSelect {
+	labels = input({}, ...ngDevMode ? [{ debugName: "labels" }] : 	/* istanbul ignore next */ []);
+	commonlyUsed = input(HX_QUICK_SELECT_COMMONLY_USED, ...ngDevMode ? [{ debugName: "commonlyUsed" }] : 	/* istanbul ignore next */ []);
+	recentStorageKey = input("hx-date-range-recent", ...ngDevMode ? [{ debugName: "recentStorageKey" }] : 	/* istanbul ignore next */ []);
+	expression = model(null, ...ngDevMode ? [{ debugName: "expression" }] : 	/* istanbul ignore next */ []);
+	minDate = input(null, ...ngDevMode ? [{ debugName: "minDate" }] : 	/* istanbul ignore next */ []);
+	maxDate = input(null, ...ngDevMode ? [{ debugName: "maxDate" }] : 	/* istanbul ignore next */ []);
+	firstDayOfWeek = input(0, {
+		...ngDevMode ? { debugName: "firstDayOfWeek" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	locale = input(...ngDevMode ? [void 0, { debugName: "locale" }] : 	/* istanbul ignore next */ []);
+	dateFormat = input(...ngDevMode ? [void 0, { debugName: "dateFormat" }] : 	/* istanbul ignore next */ []);
+	separator = input("-", ...ngDevMode ? [{ debugName: "separator" }] : 	/* istanbul ignore next */ []);
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : 	/* istanbul ignore next */ []);
+	chooseLabel = input("Choose date range", ...ngDevMode ? [{ debugName: "chooseLabel" }] : 	/* istanbul ignore next */ []);
+	inputId = input(...ngDevMode ? [void 0, { debugName: "inputId" }] : 	/* istanbul ignore next */ []);
+	ariaLabel = input(...ngDevMode ? [void 0, { debugName: "ariaLabel" }] : 	/* istanbul ignore next */ []);
+	ariaLabelledby = input(...ngDevMode ? [void 0, { debugName: "ariaLabelledby" }] : 	/* istanbul ignore next */ []);
+	value = model(EMPTY$1, ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touch = output();
+	#host = inject(ElementRef);
+	#injector = inject(Injector);
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : 	/* istanbul ignore next */ []);
+	popupId = nextId("hx-date-range-quick-select-popup");
+	positions = [{
+		originX: "start",
+		originY: "bottom",
+		overlayX: "start",
+		overlayY: "top",
+		offsetY: 2
+	}, {
+		originX: "start",
+		originY: "top",
+		overlayX: "start",
+		overlayY: "bottom",
+		offsetY: -2
+	}];
+	quickDirection = signal("last", ...ngDevMode ? [{ debugName: "quickDirection" }] : 	/* istanbul ignore next */ []);
+	quickAmount = signal("15", ...ngDevMode ? [{ debugName: "quickAmount" }] : 	/* istanbul ignore next */ []);
+	quickUnit = signal("m", ...ngDevMode ? [{ debugName: "quickUnit" }] : 	/* istanbul ignore next */ []);
+	recent = signal([], ...ngDevMode ? [{ debugName: "recent" }] : 	/* istanbul ignore next */ []);
+	quickError = signal(false, ...ngDevMode ? [{ debugName: "quickError" }] : 	/* istanbul ignore next */ []);
+	quickErrorId = `${this.popupId}-error`;
+	sideKeys = SIDE_KEYS;
+	sideModes = SIDE_MODES;
+	openSide = signal(null, ...ngDevMode ? [{ debugName: "openSide" }] : 	/* istanbul ignore next */ []);
+	sides = signal(ABSOLUTE_SIDES, ...ngDevMode ? [{ debugName: "sides" }] : 	/* istanbul ignore next */ []);
+	#appliedSides = signal(ABSOLUTE_SIDES, ...ngDevMode ? [{ debugName: "#appliedSides" }] : 	/* istanbul ignore next */ []);
+	sideError = signal(false, ...ngDevMode ? [{ debugName: "sideError" }] : 	/* istanbul ignore next */ []);
+	calendarFocus = signal(startOfDay(/* @__PURE__ */ new Date()), ...ngDevMode ? [{ debugName: "calendarFocus" }] : 	/* istanbul ignore next */ []);
+	calendarView = signal("day", ...ngDevMode ? [{ debugName: "calendarView" }] : 	/* istanbul ignore next */ []);
+	today = signal(startOfDay(/* @__PURE__ */ new Date()), ...ngDevMode ? [{ debugName: "today" }] : 	/* istanbul ignore next */ []);
+	calendarTitleId = `${this.popupId}-calendar-title`;
+	texts = computed(() => ({
+		...HX_QUICK_SELECT_LABELS,
+		...this.labels()
+	}), ...ngDevMode ? [{ debugName: "texts" }] : 	/* istanbul ignore next */ []);
+	directionOptions = computed(() => [{
+		label: this.texts().last,
+		value: "last"
+	}, {
+		label: this.texts().next,
+		value: "next"
+	}], ...ngDevMode ? [{ debugName: "directionOptions" }] : 	/* istanbul ignore next */ []);
+	unitOptions = computed(() => QUICK_SELECT_UNITS.map((unit) => ({
+		label: this.texts().units[unit],
+		value: unit
+	})), ...ngDevMode ? [{ debugName: "unitOptions" }] : 	/* istanbul ignore next */ []);
+	relativeOptions = computed(() => {
+		const l = this.texts();
+		return [...QUICK_SELECT_UNITS.map((unit) => ({
+			label: l.unitsAgo[unit],
+			value: `${unit}-ago`
+		})), ...QUICK_SELECT_UNITS.map((unit) => ({
+			label: l.unitsFromNow[unit],
+			value: `${unit}-fromNow`
+		}))];
+	}, ...ngDevMode ? [{ debugName: "relativeOptions" }] : 	/* istanbul ignore next */ []);
+	recentItems = computed(() => this.recent().map((range) => ({
+		range,
+		label: this.#describe(range)
+	})), ...ngDevMode ? [{ debugName: "recentItems" }] : 	/* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.#cvaDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : 	/* istanbul ignore next */ []);
+	text = computed(() => {
+		const expression = this.expression();
+		if (expression) return this.#describe(expression);
+		const { from, to } = this.value();
+		if (!from && !to) return "";
+		const one = (d) => d ? this.#formatDate(d) : "";
+		return `${one(from)} ${this.separator()} ${one(to)}`.trim();
+	}, ...ngDevMode ? [{ debugName: "text" }] : 	/* istanbul ignore next */ []);
+	field = viewChild("field", ...ngDevMode ? [{ debugName: "field" }] : 	/* istanbul ignore next */ []);
+	quickFirst = viewChild("quickFirst", {
+		...ngDevMode ? { debugName: "quickFirst" } : 		/* istanbul ignore next */ {},
+		read: HxSelect
+	});
+	sideButtons = viewChildren("sideButton", ...ngDevMode ? [{ debugName: "sideButtons" }] : 	/* istanbul ignore next */ []);
+	sideTabs = viewChildren("sideTab", ...ngDevMode ? [{ debugName: "sideTabs" }] : 	/* istanbul ignore next */ []);
+	#cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "#cvaDisabled" }] : 	/* istanbul ignore next */ []);
+	#format = computed(() => new Intl.DateTimeFormat(this.locale(), this.dateFormat() ?? {
+		day: "numeric",
+		month: "numeric",
+		year: "numeric",
+		hour: "numeric",
+		minute: "2-digit",
+		hourCycle: "h23"
+	}), ...ngDevMode ? [{ debugName: "#format" }] : 	/* istanbul ignore next */ []);
+	#onChange = () => {};
+	#onTouched = () => {};
+	#seenExpression = null;
+	#expressionValue = null;
+	#editedValue = null;
+	#editedExpression = null;
+	#editedRange = null;
+	constructor() {
+		effect(() => {
+			if (this.isDisabled()) untracked(() => this.close());
+		});
+		effect(() => {
+			const value = this.value();
+			const expression = this.expression();
+			untracked(() => {
+				if (expression !== this.#seenExpression) {
+					this.#seenExpression = expression;
+					this.#expressionValue = value;
+				} else if (expression !== null && value !== this.#expressionValue) if (sameRange$1(value, this.#expressionValue) || this.#resolvesTo(expression, value)) this.#expressionValue = value;
+				else this.expression.set(null);
+				if (value !== this.#editedValue || this.expression() !== this.#editedExpression) {
+					this.#editedValue = null;
+					this.#editedExpression = null;
+					this.#editedRange = null;
+					this.sideError.set(false);
+					const sides = sidesFrom(this.expression());
+					this.sides.set(sides);
+					this.#appliedSides.set(sides);
+				}
+			});
+		});
+	}
+	writeValue(value) {
+		this.value.set({
+			from: value?.from ?? null,
+			to: value?.to ?? null
+		});
+	}
+	registerOnChange(fn) {
+		this.#onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.#onTouched = fn;
+	}
+	setDisabledState(disabled) {
+		this.#cvaDisabled.set(disabled);
+	}
+	focus() {
+		this.field()?.nativeElement.focus();
+	}
+	show() {
+		if (this.isDisabled() || this.open()) return;
+		const stored = readRecentRanges(this.recentStorageKey());
+		if (stored) this.recent.set(stored);
+		this.quickError.set(false);
+		this.#dropRefusedEdit();
+		this.openSide.set(null);
+		this.open.set(true);
+	}
+	toggle() {
+		if (this.open()) this.close(true);
+		else this.show();
+	}
+	close(refocus = false) {
+		if (!this.open()) return;
+		this.#dropRefusedEdit();
+		this.openSide.set(null);
+		if (this.#editedRange) this.#remember(this.#editedRange);
+		this.#editedRange = null;
+		this.open.set(false);
+		if (refocus) this.field()?.nativeElement.focus();
+	}
+	onAttach() {
+		afterNextRender(() => this.quickFirst()?.focus(), { injector: this.#injector });
+	}
+	onFieldKeydown(event) {
+		if (event.key === "ArrowDown" || event.altKey && event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			this.show();
+		}
+	}
+	onOverlayKeydown(event) {
+		if (event.key !== "Escape") return;
+		event.preventDefault();
+		if (this.openSide()) this.closeSide();
+		else this.close(true);
+	}
+	onOutsideClick(event) {
+		if (isInSelectOverlay(event.target)) return;
+		if (!this.#host.nativeElement.contains(event.target)) this.close();
+	}
+	setQuickDirection(direction) {
+		if (direction === "last" || direction === "next") this.quickDirection.set(direction);
+	}
+	setQuickAmount(event) {
+		this.quickError.set(false);
+		this.quickAmount.set(event.target.value);
+	}
+	setQuickUnit(unit) {
+		if (QUICK_SELECT_UNITS.includes(unit)) this.quickUnit.set(unit);
+	}
+	applyQuick() {
+		const text = this.quickAmount().trim();
+		const range = hxRelativeRangeExpressions(this.quickDirection(), text === "" ? NaN : Number(text), this.quickUnit());
+		if (!range || !this.#applyRange(range)) this.quickError.set(true);
+	}
+	applyRange(range) {
+		if (!this.#applyRange(range)) this.quickError.set(true);
+	}
+	sideSummary(side) {
+		const relative = describeSide(this.#appliedSides()[side], this.texts());
+		if (relative !== null) return relative;
+		const date = this.value()[side];
+		return date ? this.#formatDate(date) : this.texts().emptySide;
+	}
+	sideButtonId(side) {
+		return `${this.popupId}-${side}-button`;
+	}
+	editorId(side) {
+		return `${this.popupId}-${side}-editor`;
+	}
+	tabId(side, mode) {
+		return `${this.popupId}-${side}-${mode}`;
+	}
+	panelId(side) {
+		return `${this.popupId}-${side}-panel`;
+	}
+	toggleSide(side) {
+		if (this.openSide() === side) {
+			this.closeSide();
+			return;
+		}
+		this.#dropRefusedEdit();
+		this.openSide.set(side);
+		this.#showDay(side);
+		afterNextRender(() => this.#focusById(this.sideTabs(), this.tabId(side, this.sides()[side].mode)), { injector: this.#injector });
+	}
+	closeSide() {
+		const side = this.openSide();
+		if (!side) return;
+		this.#dropRefusedEdit();
+		this.openSide.set(null);
+		this.#focusById(this.sideButtons(), this.sideButtonId(side));
+	}
+	setSideMode(side, mode) {
+		const sides = this.sides();
+		if (sides[side].mode === mode) return;
+		this.#editSides({
+			...sides,
+			[side]: {
+				...sides[side],
+				mode
+			}
+		});
+		if (mode === "absolute") this.#showDay(side);
+	}
+	onTabKeydown(side, event) {
+		const index = SIDE_MODES.indexOf(this.sides()[side].mode);
+		const last = SIDE_MODES.length - 1;
+		const next = event.key === "ArrowRight" ? (index + 1) % SIDE_MODES.length : event.key === "ArrowLeft" ? (index + last) % SIDE_MODES.length : event.key === "Home" ? 0 : event.key === "End" ? last : -1;
+		if (next < 0) return;
+		event.preventDefault();
+		this.setSideMode(side, SIDE_MODES[next]);
+		event.currentTarget.querySelectorAll("[role=tab]")[next]?.focus();
+	}
+	setSideAmount(side, event) {
+		const text = event.target.value.trim();
+		this.#patchSide(side, { amount: text === "" ? null : Number(text) });
+	}
+	setSideUnit(side, value) {
+		const [unit, direction] = String(value).split("-");
+		if (!QUICK_SELECT_UNITS.includes(unit)) return;
+		this.#patchSide(side, {
+			unit,
+			direction: direction === "fromNow" ? "fromNow" : "ago"
+		});
+	}
+	setSideRound(side, event) {
+		this.#patchSide(side, { round: event.target.checked });
+	}
+	sideUnitValue(side) {
+		const state = this.sides()[side];
+		return `${state.unit}-${state.direction}`;
+	}
+	sideRoundLabel(side) {
+		return this.texts().roundTo.replace("{unit}", this.texts().unitsOne[this.sides()[side].unit]);
+	}
+	sideExpressionText(side) {
+		return sideExpression(this.sides()[side]) ?? "";
+	}
+	sideResolvedText(side) {
+		const state = this.sides()[side];
+		const expression = sideExpression(state);
+		const resolved = state.mode === "absolute" ? this.value()[side] : expression ? hxResolveRangeSide(expression, {
+			firstDayOfWeek: this.firstDayOfWeek(),
+			roundUp: side === "to"
+		}) : null;
+		if (!isValidDate(resolved)) return "";
+		const date = clampTime(resolved, this.minDate(), this.maxDate());
+		return this.texts().resolvesTo.replace("{date}", this.#formatDate(date));
+	}
+	sideText(side) {
+		const date = this.value()[side];
+		return date ? this.#formatDate(date) : "";
+	}
+	sideDays(side) {
+		const date = this.value()[side];
+		return date ? [date] : [];
+	}
+	setAbsoluteSide(side, event) {
+		const field = event.target;
+		const text = field.value.trim();
+		if (text === this.sideText(side)) {
+			this.#dropRefusedEdit();
+			return;
+		}
+		let date = null;
+		if (text !== "") {
+			date = parseDateTimeText(text, {
+				locale: this.locale(),
+				showMinutes: true,
+				timeOnly: false,
+				fallbackDay: this.value()[side] ?? /* @__PURE__ */ new Date()
+			}) ?? parseDateText(text, this.locale());
+			const [min, max] = [this.minDate(), this.maxDate()];
+			if (!date || min && date < min || max && date > max) {
+				this.sideError.set(true);
+				return;
+			}
+		}
+		if (!this.#editSides(this.sides(), { [side]: date })) return;
+		if (date) this.calendarFocus.set(startOfDay(date));
+		field.value = this.sideText(this.openSide() ?? side);
+	}
+	pickDay(side, day) {
+		const [min, max] = [this.minDate(), this.maxDate()];
+		if (this.isDisabled() || isDateDisabled(day, {
+			min,
+			max
+		})) return;
+		const old = this.value()[side];
+		const date = startOfDay(day);
+		if (old) date.setHours(old.getHours(), old.getMinutes(), old.getSeconds(), old.getMilliseconds());
+		else if (side === "to") date.setHours(23, 59, 59, 999);
+		this.calendarFocus.set(startOfDay(day));
+		this.#editSides(this.sides(), { [side]: clampTime(date, min, max) });
+	}
+	#patchSide(side, patch) {
+		const sides = this.sides();
+		this.#editSides({
+			...sides,
+			[side]: {
+				...sides[side],
+				...patch,
+				raw: null
+			}
+		});
+	}
+	#editSides(sides, dates = {}) {
+		this.sides.set(sides);
+		const applied = this.#applySides(sides, dates);
+		this.sideError.set(!applied);
+		return applied;
+	}
+	#applySides(edited, dates) {
+		let sides = edited;
+		const options = {
+			now: /* @__PURE__ */ new Date(),
+			firstDayOfWeek: this.firstDayOfWeek()
+		};
+		const resolved = {
+			from: null,
+			to: null
+		};
+		const texts = {
+			from: null,
+			to: null
+		};
+		for (const side of SIDE_KEYS) {
+			const state = sides[side];
+			if (state.mode === "absolute") {
+				const date = side in dates ? dates[side] ?? null : this.value()[side];
+				resolved[side] = date;
+				texts[side] = date?.toISOString() ?? null;
+				continue;
+			}
+			const expression = sideExpression(state);
+			const date = expression ? hxResolveRangeSide(expression, {
+				...options,
+				roundUp: side === "to"
+			}) : null;
+			if (!expression || !isValidDate(date)) return false;
+			resolved[side] = date;
+			texts[side] = expression;
+		}
+		if (resolved.from && resolved.to && resolved.from > resolved.to) {
+			[resolved.from, resolved.to] = [resolved.to, resolved.from];
+			[texts.from, texts.to] = [texts.to, texts.from];
+			sides = {
+				from: sides.to,
+				to: sides.from
+			};
+			this.sides.set(sides);
+			const open = this.openSide();
+			if (open) this.openSide.set(open === "from" ? "to" : "from");
+		}
+		const inside = (d) => d && clampTime(d, this.minDate(), this.maxDate());
+		const next = {
+			from: inside(resolved.from),
+			to: inside(resolved.to)
+		};
+		const range = texts.from !== null && texts.to !== null ? {
+			from: texts.from,
+			to: texts.to
+		} : null;
+		const expression = sides.from.mode !== "absolute" || sides.to.mode !== "absolute" ? range : null;
+		this.#editedValue = next;
+		this.#editedExpression = expression;
+		this.#editedRange = range;
+		this.#appliedSides.set(sides);
+		this.#commit(next);
+		this.expression.set(expression);
+		return true;
+	}
+	#focusById(elements, id) {
+		elements.find((e) => e.nativeElement.id === id)?.nativeElement.focus();
+	}
+	#dropRefusedEdit() {
+		if (!this.sideError()) return;
+		this.sideError.set(false);
+		this.sides.set(this.#appliedSides());
+	}
+	#showDay(side) {
+		const today = startOfDay(/* @__PURE__ */ new Date());
+		this.today.set(today);
+		const min = this.minDate();
+		const date = this.value()[side] ?? clampTime(today, min && startOfDay(min), this.maxDate());
+		this.calendarFocus.set(startOfDay(date));
+		this.calendarView.set("day");
+	}
+	#applyRange(range) {
+		const options = {
+			now: /* @__PURE__ */ new Date(),
+			firstDayOfWeek: this.firstDayOfWeek()
+		};
+		const from = hxResolveRangeSide(range.from, {
+			...options,
+			roundUp: false
+		});
+		const to = hxResolveRangeSide(range.to, {
+			...options,
+			roundUp: true
+		});
+		if (!isValidDate(from) || !isValidDate(to)) return false;
+		const swapped = to < from;
+		const stored = swapped ? {
+			from: range.to,
+			to: range.from
+		} : {
+			from: range.from,
+			to: range.to
+		};
+		const inside = (d) => clampTime(d, this.minDate(), this.maxDate());
+		const next = swapped ? {
+			from: inside(to),
+			to: inside(from)
+		} : {
+			from: inside(from),
+			to: inside(to)
+		};
+		const relative = hxParseDateMath(range.from) !== null || hxParseDateMath(range.to) !== null;
+		this.#editedRange = null;
+		this.#remember(stored);
+		this.#commit(next);
+		this.expression.set(relative ? stored : null);
+		this.close(true);
+		return true;
+	}
+	#resolvesTo(expression, value) {
+		const { from, to } = hxResolveRangeExpression(expression, { firstDayOfWeek: this.firstDayOfWeek() });
+		const inside = (d) => isValidDate(d) ? clampTime(d, this.minDate(), this.maxDate()) : null;
+		const near = (a, b) => sameTime$1(a, b, RESOLVE_TOLERANCE_MS);
+		const matches = (start, end) => near(value.from, start) && near(value.to, end) || near(value.from, inside(start)) && near(value.to, inside(end));
+		return matches(from, to) || matches(to, from);
+	}
+	#remember(range) {
+		const next = addRecentRange(this.recent(), range);
+		this.recent.set(next);
+		writeRecentRanges(this.recentStorageKey(), next);
+	}
+	#describe(range) {
+		return describeRange(range, this.texts(), this.commonlyUsed(), (d) => this.#formatDate(d), this.separator());
+	}
+	#formatDate(date) {
+		return this.#format().format(date).replace(/,\s*/, " ");
+	}
+	onHostFocusOut(event) {
+		const next = event.relatedTarget;
+		if (isInSelectOverlay(next) || next?.closest(".hx-date-range-quick-select-popup") || this.#host.nativeElement.contains(next)) return;
+		if (this.open() && !next) return;
+		this.close();
+		this.markTouched();
+	}
+	onPopupFocusOut(event) {
+		const next = event.relatedTarget;
+		if (!next || isInSelectOverlay(next) || next.closest(".hx-date-range-quick-select-popup") || this.#host.nativeElement.contains(next)) return;
+		this.close();
+		this.markTouched();
+	}
+	markTouched() {
+		this.#onTouched();
+		this.touch.emit();
+	}
+	#commit(next) {
+		this.value.set(next);
+		this.#onChange(next);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: HxDateRangeQuickSelect,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: HxDateRangeQuickSelect,
+		isStandalone: true,
+		selector: "hx-date-range-quick-select",
+		inputs: {
+			labels: {
+				classPropertyName: "labels",
+				publicName: "labels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			commonlyUsed: {
+				classPropertyName: "commonlyUsed",
+				publicName: "commonlyUsed",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			inline: {
-				classPropertyName: "inline",
-				publicName: "inline",
+			recentStorageKey: {
+				classPropertyName: "recentStorageKey",
+				publicName: "recentStorageKey",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			selectionMode: {
-				classPropertyName: "selectionMode",
-				publicName: "selectionMode",
+			expression: {
+				classPropertyName: "expression",
+				publicName: "expression",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
@@ -8062,13 +10012,6 @@ var HxDatePicker = class HxDatePicker {
 				isRequired: false,
 				transformFunction: null
 			},
-			disabledDates: {
-				classPropertyName: "disabledDates",
-				publicName: "disabledDates",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
 			firstDayOfWeek: {
 				classPropertyName: "firstDayOfWeek",
 				publicName: "firstDayOfWeek",
@@ -8083,6 +10026,41 @@ var HxDatePicker = class HxDatePicker {
 				isRequired: false,
 				transformFunction: null
 			},
+			dateFormat: {
+				classPropertyName: "dateFormat",
+				publicName: "dateFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			separator: {
+				classPropertyName: "separator",
+				publicName: "separator",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			chooseLabel: {
+				classPropertyName: "chooseLabel",
+				publicName: "chooseLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputId: {
+				classPropertyName: "inputId",
+				publicName: "inputId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			ariaLabel: {
 				classPropertyName: "ariaLabel",
 				publicName: "ariaLabel",
@@ -8120,41 +10098,50 @@ var HxDatePicker = class HxDatePicker {
 			}
 		},
 		outputs: {
+			expression: "expressionChange",
 			value: "valueChange",
 			touch: "touch"
 		},
 		host: {
 			listeners: { "focusout": "onHostFocusOut($event)" },
-			properties: {
-				"class.hx-date-picker-inline": "inline()",
-				"class.hx-date-picker-disabled": "isDisabled()",
-				"class.hx-date-picker-invalid": "invalid()",
-				"class.hx-date-picker-open": "open()",
-				"class.hx-date-picker-has-icon": "showIcon() && !inline()",
-				"class.hx-filled": "!inline() && text() !== \"\""
-			},
-			classAttribute: "hx-date-picker"
+			classAttribute: "hx-date-range-quick-select"
 		},
 		providers: [{
 			provide: NG_VALUE_ACCESSOR,
-			useExisting: forwardRef(() => HxDatePicker),
+			useExisting: forwardRef(() => HxDateRangeQuickSelect),
 			multi: true
 		}],
-		viewQueries: [{
-			propertyName: "field",
-			first: true,
-			predicate: ["field"],
-			descendants: true,
-			isSignal: true
-		}, {
-			propertyName: "calendar",
-			first: true,
-			predicate: HxCalendar,
-			descendants: true,
-			isSignal: true
-		}],
+		viewQueries: [
+			{
+				propertyName: "field",
+				first: true,
+				predicate: ["field"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "quickFirst",
+				first: true,
+				predicate: ["quickFirst"],
+				descendants: true,
+				read: HxSelect,
+				isSignal: true
+			},
+			{
+				propertyName: "sideButtons",
+				predicate: ["sideButton"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "sideTabs",
+				predicate: ["sideTab"],
+				descendants: true,
+				isSignal: true
+			}
+		],
 		ngImport: i0,
-		template: "@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"calendar\" />\n} @else {\n  <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\n      class=\"hx-date-picker-input\"\n      autocomplete=\"off\"\n      aria-haspopup=\"dialog\"\n      [attr.id]=\"inputId() ?? null\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"text()\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"open() ? popupId : null\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      (input)=\"onTyping($event)\"\n      (change)=\"commitTyping()\"\n      (click)=\"show()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    @if (showIcon()) {\n      <button\n        type=\"button\"\n        class=\"hx-date-picker-trigger\"\n        aria-haspopup=\"dialog\"\n        [attr.aria-label]=\"chooseLabel()\"\n        [attr.aria-expanded]=\"open()\"\n        [disabled]=\"isDisabled()\"\n        (click)=\"toggle()\"\n      >\n        <span class=\"hx-date-picker-trigger-icon\" aria-hidden=\"true\"></span>\n      </button>\n    }\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayPanelClass=\"hx-date-picker-overlay\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayPush]=\"true\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n    (overlayKeydown)=\"onOverlayKeydown($event)\"\n    (attach)=\"onAttach()\"\n    (detach)=\"open.set(false)\"\n  >\n    <div\n      class=\"hx-date-picker-popup\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [id]=\"popupId\"\n      [attr.aria-label]=\"ariaLabel() ?? 'Choose date'\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n    >\n      <ng-container [ngTemplateOutlet]=\"calendar\" />\n      @if (showButtonBar()) {\n        <div class=\"hx-date-picker-buttonbar\">\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"selectToday()\">{{ todayLabel() }}</button>\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n        </div>\n      }\n    </div>\n  </ng-template>\n}\n\n<ng-template #calendar>\n<div\n  class=\"hx-date-picker-panel\"\n  role=\"group\"\n  [attr.aria-label]=\"ariaLabel() ?? 'Calendar'\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  (focusout)=\"onFocusOut($event)\"\n>\n    <hx-calendar\n      [(focusedDate)]=\"focusedDate\"\n      [(view)]=\"view\"\n      [selectedDates]=\"selectedDates()\"\n      [selectionMode]=\"selectionMode()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabledDates]=\"disabledDates()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [locale]=\"locale()\"\n      [disabled]=\"isDisabled()\"\n      [titleId]=\"titleId\"\n      [today]=\"today\"\n      (picked)=\"pick($event)\"\n    />\n</div>\n</ng-template>\n",
+		template: "<div\n  class=\"hx-date-picker hx-date-picker-has-icon hx-date-range-quick-select-control\"\n  [class.hx-date-picker-open]=\"open()\"\n  [class.hx-date-picker-disabled]=\"isDisabled()\"\n  [class.hx-date-picker-invalid]=\"invalid()\"\n>\n  <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\n      readonly\n      class=\"hx-date-picker-input\"\n      autocomplete=\"off\"\n      aria-haspopup=\"dialog\"\n      [attr.id]=\"inputId() ?? null\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"text()\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"open() ? popupId : null\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      (click)=\"show()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    <button\n      type=\"button\"\n      class=\"hx-date-picker-trigger\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-label]=\"chooseLabel()\"\n      [attr.aria-expanded]=\"open()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggle()\"\n    >\n      <span class=\"hx-date-picker-trigger-icon\" aria-hidden=\"true\"></span>\n    </button>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayPanelClass=\"hx-date-picker-overlay\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayPush]=\"true\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n    (overlayKeydown)=\"onOverlayKeydown($event)\"\n    (attach)=\"onAttach()\"\n    (detach)=\"close()\"\n  >\n    @let l = texts();\n    <div\n      class=\"hx-date-picker-popup hx-date-range-quick-select-popup\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [id]=\"popupId\"\n      [attr.aria-label]=\"ariaLabel() ?? chooseLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      (focusout)=\"onPopupFocusOut($event)\"\n    >\n      <section class=\"hx-date-range-quick-select-section\" [attr.aria-labelledby]=\"popupId + '-quick'\">\n        <span class=\"hx-date-range-quick-select-caption\" [id]=\"popupId + '-quick'\">{{ l.quickSelect }}</span>\n        <div class=\"hx-date-range-quick-select-row\">\n          <hx-select\n            #quickFirst\n            class=\"hx-date-range-quick-select-direction\"\n            [options]=\"directionOptions()\"\n            [ariaLabel]=\"l.direction\"\n            [value]=\"quickDirection()\"\n            (valueChange)=\"setQuickDirection($event)\"\n          />\n          <input\n            hx-input\n            type=\"number\"\n            min=\"1\"\n            step=\"1\"\n            class=\"hx-date-range-quick-select-amount\"\n            [attr.aria-label]=\"l.amount\"\n            [attr.aria-invalid]=\"quickError() ? 'true' : null\"\n            [attr.aria-describedby]=\"quickError() ? quickErrorId : null\"\n            [value]=\"quickAmount()\"\n            (input)=\"setQuickAmount($event)\"\n            (keydown.enter)=\"$event.preventDefault(); applyQuick()\"\n          />\n          <hx-select\n            class=\"hx-date-range-quick-select-unit\"\n            [options]=\"unitOptions()\"\n            [ariaLabel]=\"l.unit\"\n            [value]=\"quickUnit()\"\n            (valueChange)=\"setQuickUnit($event)\"\n          />\n          <button\n            type=\"button\"\n            class=\"hx-date-picker-button hx-date-range-quick-select-apply\"\n            [attr.aria-describedby]=\"quickError() ? quickErrorId : null\"\n            (click)=\"applyQuick()\"\n          >\n            {{ l.apply }}\n          </button>\n        </div>\n      </section>\n      @if (commonlyUsed().length > 0) {\n        <section class=\"hx-date-range-quick-select-section\" [attr.aria-labelledby]=\"popupId + '-common'\">\n          <span class=\"hx-date-range-quick-select-caption\" [id]=\"popupId + '-common'\">{{ l.commonlyUsed }}</span>\n          <ul class=\"hx-date-range-quick-select-ranges hx-date-range-quick-select-common\">\n            @for (range of commonlyUsed(); track $index) {\n              <li>\n                <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"applyRange(range)\">{{ range.label }}</button>\n              </li>\n            }\n          </ul>\n        </section>\n      }\n      @if (recentItems().length > 0) {\n        <section class=\"hx-date-range-quick-select-section\" [attr.aria-labelledby]=\"popupId + '-recent'\">\n          <span class=\"hx-date-range-quick-select-caption\" [id]=\"popupId + '-recent'\">{{ l.recentlyUsed }}</span>\n          <ul class=\"hx-date-range-quick-select-ranges hx-date-range-quick-select-recent\">\n            @for (item of recentItems(); track item.range.from + ' ' + item.range.to) {\n              <li>\n                <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"applyRange(item.range)\">{{ item.label }}</button>\n              </li>\n            }\n          </ul>\n        </section>\n      }\n      <!-- one line per side; a click opens the editor of that side (Absolute / Relative / Now) below -->\n      <div class=\"hx-date-range-quick-select-summary\" role=\"group\" [attr.aria-label]=\"l.range\">\n        @for (s of sideKeys; track s) {\n          <button\n            #sideButton\n            type=\"button\"\n            class=\"hx-date-range-quick-select-side-line\"\n            [class]=\"'hx-date-range-quick-select-side-line-' + s\"\n            [id]=\"sideButtonId(s)\"\n            [attr.aria-expanded]=\"openSide() === s\"\n            [attr.aria-controls]=\"openSide() === s ? editorId(s) : null\"\n            (click)=\"toggleSide(s)\"\n          >\n            <span class=\"hx-date-range-quick-select-side-name\">{{ s === 'from' ? l.start : l.end }}</span>&ngsp;\n            <span class=\"hx-date-range-quick-select-side-value\">{{ sideSummary(s) }}</span>\n          </button>\n        }\n      </div>\n      @if (openSide(); as s) {\n        @let state = sides()[s];\n        @let sideName = s === 'from' ? l.start : l.end;\n        <section\n          class=\"hx-date-range-quick-select-editor\"\n          [class]=\"'hx-date-range-quick-select-editor-' + s\"\n          [id]=\"editorId(s)\"\n          [attr.aria-labelledby]=\"sideButtonId(s)\"\n        >\n          <div\n            class=\"hx-date-range-quick-select-tabs\"\n            role=\"tablist\"\n            [attr.aria-labelledby]=\"sideButtonId(s)\"\n            (keydown)=\"onTabKeydown(s, $event)\"\n          >\n            @for (mode of sideModes; track mode) {\n              <button\n                #sideTab\n                type=\"button\"\n                role=\"tab\"\n                class=\"hx-date-range-quick-select-tab\"\n                [id]=\"tabId(s, mode)\"\n                [attr.aria-selected]=\"state.mode === mode\"\n                [attr.aria-controls]=\"panelId(s)\"\n                [attr.tabindex]=\"state.mode === mode ? 0 : -1\"\n                (click)=\"setSideMode(s, mode)\"\n              >\n                {{ mode === 'absolute' ? l.absolute : mode === 'relative' ? l.relative : l.now }}\n              </button>\n            }\n          </div>\n          <div\n            class=\"hx-date-range-quick-select-tabpanel\"\n            role=\"tabpanel\"\n            tabindex=\"0\"\n            [id]=\"panelId(s)\"\n            [attr.aria-labelledby]=\"tabId(s, state.mode)\"\n            [attr.aria-describedby]=\"sideError() ? quickErrorId : null\"\n          >\n            @switch (state.mode) {\n              @case ('absolute') {\n                <input\n                  hx-input\n                  fluid\n                  type=\"text\"\n                  autocomplete=\"off\"\n                  class=\"hx-date-range-quick-select-side-date\"\n                  [attr.aria-label]=\"sideName + ' ' + l.date\"\n                  [attr.aria-invalid]=\"sideError() ? 'true' : null\"\n                  [attr.aria-describedby]=\"sideError() ? quickErrorId : null\"\n                  [value]=\"sideText(s)\"\n                  (change)=\"setAbsoluteSide(s, $event)\"\n                  (keydown.enter)=\"$event.preventDefault(); setAbsoluteSide(s, $event)\"\n                />\n                <p class=\"hx-date-range-quick-select-side-resolved\">\n                  <span class=\"hx-date-range-quick-select-resolved-date\">{{ sideResolvedText(s) }}</span>\n                </p>\n                <div class=\"hx-date-range-quick-select-calendar\" role=\"group\" [attr.aria-label]=\"sideName + ' ' + l.date\">\n                  <hx-calendar\n                    [(focusedDate)]=\"calendarFocus\"\n                    [(view)]=\"calendarView\"\n                    [selectedDates]=\"sideDays(s)\"\n                    selectionMode=\"single\"\n                    [minDate]=\"minDate()\"\n                    [maxDate]=\"maxDate()\"\n                    [firstDayOfWeek]=\"firstDayOfWeek()\"\n                    [locale]=\"locale()\"\n                    [disabled]=\"isDisabled()\"\n                    [titleId]=\"calendarTitleId\"\n                    [today]=\"today()\"\n                    (picked)=\"pickDay(s, $event)\"\n                  />\n                </div>\n              }\n              @case ('relative') {\n                <div class=\"hx-date-range-quick-select-row\">\n                  <input\n                    hx-input\n                    type=\"number\"\n                    min=\"0\"\n                    step=\"1\"\n                    class=\"hx-date-range-quick-select-side-amount\"\n                    [attr.aria-label]=\"l.amount\"\n                    [attr.aria-invalid]=\"sideError() ? 'true' : null\"\n                    [attr.aria-describedby]=\"sideError() ? quickErrorId : null\"\n                    [value]=\"state.amount ?? ''\"\n                    (input)=\"setSideAmount(s, $event)\"\n                  />\n                  <hx-select\n                    class=\"hx-date-range-quick-select-side-unit\"\n                    [options]=\"relativeOptions()\"\n                    [ariaLabel]=\"l.unit\"\n                    [value]=\"sideUnitValue(s)\"\n                    (valueChange)=\"setSideUnit(s, $event)\"\n                  />\n                </div>\n                <label class=\"hx-date-range-quick-select-side-round\">\n                  <input type=\"checkbox\" hx-checkbox [checked]=\"state.round\" (change)=\"setSideRound(s, $event)\" />\n                  {{ sideRoundLabel(s) }}\n                </label>\n                <p class=\"hx-date-range-quick-select-side-resolved\">\n                  <code class=\"hx-date-range-quick-select-expression\">{{ sideExpressionText(s) }}</code>&ngsp;\n                  <span class=\"hx-date-range-quick-select-resolved-date\">{{ sideResolvedText(s) }}</span>\n                </p>\n              }\n              @case ('now') {\n                <p class=\"hx-date-range-quick-select-now-hint\">{{ l.nowHint }}</p>\n                <p class=\"hx-date-range-quick-select-side-resolved\">\n                  <span class=\"hx-date-range-quick-select-resolved-date\">{{ sideResolvedText(s) }}</span>\n                </p>\n              }\n            }\n          </div>\n        </section>\n      }\n      @if (quickError() || sideError()) {\n        <p class=\"hx-date-range-quick-select-error\" role=\"alert\" [id]=\"quickErrorId\">{{ l.incompleteRange }}</p>\n      }\n    </div>\n  </ng-template>\n</div>\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -8203,16 +10190,6 @@ var HxDatePicker = class HxDatePicker {
 				selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]",
 				exportAs: ["cdkOverlayOrigin"]
 			},
-			{
-				kind: "directive",
-				type: NgTemplateOutlet,
-				selector: "[ngTemplateOutlet]",
-				inputs: [
-					"ngTemplateOutletContext",
-					"ngTemplateOutlet",
-					"ngTemplateOutletInjector"
-				]
-			},
 			{
 				kind: "component",
 				type: HxCalendar,
@@ -8236,6 +10213,55 @@ var HxDatePicker = class HxDatePicker {
 					"viewChange",
 					"picked"
 				]
+			},
+			{
+				kind: "directive",
+				type: HxCheckbox,
+				selector: "input[hx-checkbox]",
+				inputs: ["size"],
+				exportAs: ["hx-checkbox"]
+			},
+			{
+				kind: "directive",
+				type: HxInput,
+				selector: "input[hx-input], textarea[hx-input]",
+				inputs: [
+					"variant",
+					"size",
+					"fluid",
+					"autoResize"
+				],
+				exportAs: ["hx-input"]
+			},
+			{
+				kind: "component",
+				type: HxSelect,
+				selector: "hx-select",
+				inputs: [
+					"options",
+					"optionLabel",
+					"optionValue",
+					"optionDisabled",
+					"placeholder",
+					"emptyMessage",
+					"filter",
+					"filterPlaceholder",
+					"filterBy",
+					"emptyFilterMessage",
+					"size",
+					"variant",
+					"fluid",
+					"showClear",
+					"inputId",
+					"ariaLabel",
+					"ariaLabelledby",
+					"ariaDescribedby",
+					"compareWith",
+					"value",
+					"disabled",
+					"invalid"
+				],
+				outputs: ["valueChange", "touch"]
 			}
 		],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -8245,155 +10271,138 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.1",
 	ngImport: i0,
-	type: HxDatePicker,
+	type: HxDateRangeQuickSelect,
 	decorators: [{
 		type: Component,
 		args: [{
-			selector: "hx-date-picker",
+			selector: "hx-date-range-quick-select",
 			imports: [
 				CdkConnectedOverlay,
 				CdkOverlayOrigin,
-				NgTemplateOutlet,
-				HxCalendar
+				HxCalendar,
+				HxCheckbox,
+				HxInput,
+				HxSelect
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			providers: [{
 				provide: NG_VALUE_ACCESSOR,
-				useExisting: forwardRef(() => HxDatePicker),
+				useExisting: forwardRef(() => HxDateRangeQuickSelect),
 				multi: true
 			}],
 			host: {
-				class: "hx-date-picker",
-				"[class.hx-date-picker-inline]": "inline()",
-				"[class.hx-date-picker-disabled]": "isDisabled()",
-				"[class.hx-date-picker-invalid]": "invalid()",
-				"[class.hx-date-picker-open]": "open()",
-				"[class.hx-date-picker-has-icon]": "showIcon() && !inline()",
-				"[class.hx-filled]": "!inline() && text() !== \"\"",
+				class: "hx-date-range-quick-select",
 				"(focusout)": "onHostFocusOut($event)"
 			},
-			template: "@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"calendar\" />\n} @else {\n  <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\n      class=\"hx-date-picker-input\"\n      autocomplete=\"off\"\n      aria-haspopup=\"dialog\"\n      [attr.id]=\"inputId() ?? null\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"text()\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"open() ? popupId : null\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      (input)=\"onTyping($event)\"\n      (change)=\"commitTyping()\"\n      (click)=\"show()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    @if (showIcon()) {\n      <button\n        type=\"button\"\n        class=\"hx-date-picker-trigger\"\n        aria-haspopup=\"dialog\"\n        [attr.aria-label]=\"chooseLabel()\"\n        [attr.aria-expanded]=\"open()\"\n        [disabled]=\"isDisabled()\"\n        (click)=\"toggle()\"\n      >\n        <span class=\"hx-date-picker-trigger-icon\" aria-hidden=\"true\"></span>\n      </button>\n    }\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayPanelClass=\"hx-date-picker-overlay\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayPush]=\"true\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n    (overlayKeydown)=\"onOverlayKeydown($event)\"\n    (attach)=\"onAttach()\"\n    (detach)=\"open.set(false)\"\n  >\n    <div\n      class=\"hx-date-picker-popup\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [id]=\"popupId\"\n      [attr.aria-label]=\"ariaLabel() ?? 'Choose date'\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n    >\n      <ng-container [ngTemplateOutlet]=\"calendar\" />\n      @if (showButtonBar()) {\n        <div class=\"hx-date-picker-buttonbar\">\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"selectToday()\">{{ todayLabel() }}</button>\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n        </div>\n      }\n    </div>\n  </ng-template>\n}\n\n<ng-template #calendar>\n<div\n  class=\"hx-date-picker-panel\"\n  role=\"group\"\n  [attr.aria-label]=\"ariaLabel() ?? 'Calendar'\"\n  [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n  (focusout)=\"onFocusOut($event)\"\n>\n    <hx-calendar\n      [(focusedDate)]=\"focusedDate\"\n      [(view)]=\"view\"\n      [selectedDates]=\"selectedDates()\"\n      [selectionMode]=\"selectionMode()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabledDates]=\"disabledDates()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [locale]=\"locale()\"\n      [disabled]=\"isDisabled()\"\n      [titleId]=\"titleId\"\n      [today]=\"today\"\n      (picked)=\"pick($event)\"\n    />\n</div>\n</ng-template>\n"
+			template: "<div\n  class=\"hx-date-picker hx-date-picker-has-icon hx-date-range-quick-select-control\"\n  [class.hx-date-picker-open]=\"open()\"\n  [class.hx-date-picker-disabled]=\"isDisabled()\"\n  [class.hx-date-picker-invalid]=\"invalid()\"\n>\n  <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\n      readonly\n      class=\"hx-date-picker-input\"\n      autocomplete=\"off\"\n      aria-haspopup=\"dialog\"\n      [attr.id]=\"inputId() ?? null\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"text()\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"open() ? popupId : null\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      (click)=\"show()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    <button\n      type=\"button\"\n      class=\"hx-date-picker-trigger\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-label]=\"chooseLabel()\"\n      [attr.aria-expanded]=\"open()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggle()\"\n    >\n      <span class=\"hx-date-picker-trigger-icon\" aria-hidden=\"true\"></span>\n    </button>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayPanelClass=\"hx-date-picker-overlay\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayPush]=\"true\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n    (overlayKeydown)=\"onOverlayKeydown($event)\"\n    (attach)=\"onAttach()\"\n    (detach)=\"close()\"\n  >\n    @let l = texts();\n    <div\n      class=\"hx-date-picker-popup hx-date-range-quick-select-popup\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [id]=\"popupId\"\n      [attr.aria-label]=\"ariaLabel() ?? chooseLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      (focusout)=\"onPopupFocusOut($event)\"\n    >\n      <section class=\"hx-date-range-quick-select-section\" [attr.aria-labelledby]=\"popupId + '-quick'\">\n        <span class=\"hx-date-range-quick-select-caption\" [id]=\"popupId + '-quick'\">{{ l.quickSelect }}</span>\n        <div class=\"hx-date-range-quick-select-row\">\n          <hx-select\n            #quickFirst\n            class=\"hx-date-range-quick-select-direction\"\n            [options]=\"directionOptions()\"\n            [ariaLabel]=\"l.direction\"\n            [value]=\"quickDirection()\"\n            (valueChange)=\"setQuickDirection($event)\"\n          />\n          <input\n            hx-input\n            type=\"number\"\n            min=\"1\"\n            step=\"1\"\n            class=\"hx-date-range-quick-select-amount\"\n            [attr.aria-label]=\"l.amount\"\n            [attr.aria-invalid]=\"quickError() ? 'true' : null\"\n            [attr.aria-describedby]=\"quickError() ? quickErrorId : null\"\n            [value]=\"quickAmount()\"\n            (input)=\"setQuickAmount($event)\"\n            (keydown.enter)=\"$event.preventDefault(); applyQuick()\"\n          />\n          <hx-select\n            class=\"hx-date-range-quick-select-unit\"\n            [options]=\"unitOptions()\"\n            [ariaLabel]=\"l.unit\"\n            [value]=\"quickUnit()\"\n            (valueChange)=\"setQuickUnit($event)\"\n          />\n          <button\n            type=\"button\"\n            class=\"hx-date-picker-button hx-date-range-quick-select-apply\"\n            [attr.aria-describedby]=\"quickError() ? quickErrorId : null\"\n            (click)=\"applyQuick()\"\n          >\n            {{ l.apply }}\n          </button>\n        </div>\n      </section>\n      @if (commonlyUsed().length > 0) {\n        <section class=\"hx-date-range-quick-select-section\" [attr.aria-labelledby]=\"popupId + '-common'\">\n          <span class=\"hx-date-range-quick-select-caption\" [id]=\"popupId + '-common'\">{{ l.commonlyUsed }}</span>\n          <ul class=\"hx-date-range-quick-select-ranges hx-date-range-quick-select-common\">\n            @for (range of commonlyUsed(); track $index) {\n              <li>\n                <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"applyRange(range)\">{{ range.label }}</button>\n              </li>\n            }\n          </ul>\n        </section>\n      }\n      @if (recentItems().length > 0) {\n        <section class=\"hx-date-range-quick-select-section\" [attr.aria-labelledby]=\"popupId + '-recent'\">\n          <span class=\"hx-date-range-quick-select-caption\" [id]=\"popupId + '-recent'\">{{ l.recentlyUsed }}</span>\n          <ul class=\"hx-date-range-quick-select-ranges hx-date-range-quick-select-recent\">\n            @for (item of recentItems(); track item.range.from + ' ' + item.range.to) {\n              <li>\n                <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"applyRange(item.range)\">{{ item.label }}</button>\n              </li>\n            }\n          </ul>\n        </section>\n      }\n      <!-- one line per side; a click opens the editor of that side (Absolute / Relative / Now) below -->\n      <div class=\"hx-date-range-quick-select-summary\" role=\"group\" [attr.aria-label]=\"l.range\">\n        @for (s of sideKeys; track s) {\n          <button\n            #sideButton\n            type=\"button\"\n            class=\"hx-date-range-quick-select-side-line\"\n            [class]=\"'hx-date-range-quick-select-side-line-' + s\"\n            [id]=\"sideButtonId(s)\"\n            [attr.aria-expanded]=\"openSide() === s\"\n            [attr.aria-controls]=\"openSide() === s ? editorId(s) : null\"\n            (click)=\"toggleSide(s)\"\n          >\n            <span class=\"hx-date-range-quick-select-side-name\">{{ s === 'from' ? l.start : l.end }}</span>&ngsp;\n            <span class=\"hx-date-range-quick-select-side-value\">{{ sideSummary(s) }}</span>\n          </button>\n        }\n      </div>\n      @if (openSide(); as s) {\n        @let state = sides()[s];\n        @let sideName = s === 'from' ? l.start : l.end;\n        <section\n          class=\"hx-date-range-quick-select-editor\"\n          [class]=\"'hx-date-range-quick-select-editor-' + s\"\n          [id]=\"editorId(s)\"\n          [attr.aria-labelledby]=\"sideButtonId(s)\"\n        >\n          <div\n            class=\"hx-date-range-quick-select-tabs\"\n            role=\"tablist\"\n            [attr.aria-labelledby]=\"sideButtonId(s)\"\n            (keydown)=\"onTabKeydown(s, $event)\"\n          >\n            @for (mode of sideModes; track mode) {\n              <button\n                #sideTab\n                type=\"button\"\n                role=\"tab\"\n                class=\"hx-date-range-quick-select-tab\"\n                [id]=\"tabId(s, mode)\"\n                [attr.aria-selected]=\"state.mode === mode\"\n                [attr.aria-controls]=\"panelId(s)\"\n                [attr.tabindex]=\"state.mode === mode ? 0 : -1\"\n                (click)=\"setSideMode(s, mode)\"\n              >\n                {{ mode === 'absolute' ? l.absolute : mode === 'relative' ? l.relative : l.now }}\n              </button>\n            }\n          </div>\n          <div\n            class=\"hx-date-range-quick-select-tabpanel\"\n            role=\"tabpanel\"\n            tabindex=\"0\"\n            [id]=\"panelId(s)\"\n            [attr.aria-labelledby]=\"tabId(s, state.mode)\"\n            [attr.aria-describedby]=\"sideError() ? quickErrorId : null\"\n          >\n            @switch (state.mode) {\n              @case ('absolute') {\n                <input\n                  hx-input\n                  fluid\n                  type=\"text\"\n                  autocomplete=\"off\"\n                  class=\"hx-date-range-quick-select-side-date\"\n                  [attr.aria-label]=\"sideName + ' ' + l.date\"\n                  [attr.aria-invalid]=\"sideError() ? 'true' : null\"\n                  [attr.aria-describedby]=\"sideError() ? quickErrorId : null\"\n                  [value]=\"sideText(s)\"\n                  (change)=\"setAbsoluteSide(s, $event)\"\n                  (keydown.enter)=\"$event.preventDefault(); setAbsoluteSide(s, $event)\"\n                />\n                <p class=\"hx-date-range-quick-select-side-resolved\">\n                  <span class=\"hx-date-range-quick-select-resolved-date\">{{ sideResolvedText(s) }}</span>\n                </p>\n                <div class=\"hx-date-range-quick-select-calendar\" role=\"group\" [attr.aria-label]=\"sideName + ' ' + l.date\">\n                  <hx-calendar\n                    [(focusedDate)]=\"calendarFocus\"\n                    [(view)]=\"calendarView\"\n                    [selectedDates]=\"sideDays(s)\"\n                    selectionMode=\"single\"\n                    [minDate]=\"minDate()\"\n                    [maxDate]=\"maxDate()\"\n                    [firstDayOfWeek]=\"firstDayOfWeek()\"\n                    [locale]=\"locale()\"\n                    [disabled]=\"isDisabled()\"\n                    [titleId]=\"calendarTitleId\"\n                    [today]=\"today()\"\n                    (picked)=\"pickDay(s, $event)\"\n                  />\n                </div>\n              }\n              @case ('relative') {\n                <div class=\"hx-date-range-quick-select-row\">\n                  <input\n                    hx-input\n                    type=\"number\"\n                    min=\"0\"\n                    step=\"1\"\n                    class=\"hx-date-range-quick-select-side-amount\"\n                    [attr.aria-label]=\"l.amount\"\n                    [attr.aria-invalid]=\"sideError() ? 'true' : null\"\n                    [attr.aria-describedby]=\"sideError() ? quickErrorId : null\"\n                    [value]=\"state.amount ?? ''\"\n                    (input)=\"setSideAmount(s, $event)\"\n                  />\n                  <hx-select\n                    class=\"hx-date-range-quick-select-side-unit\"\n                    [options]=\"relativeOptions()\"\n                    [ariaLabel]=\"l.unit\"\n                    [value]=\"sideUnitValue(s)\"\n                    (valueChange)=\"setSideUnit(s, $event)\"\n                  />\n                </div>\n                <label class=\"hx-date-range-quick-select-side-round\">\n                  <input type=\"checkbox\" hx-checkbox [checked]=\"state.round\" (change)=\"setSideRound(s, $event)\" />\n                  {{ sideRoundLabel(s) }}\n                </label>\n                <p class=\"hx-date-range-quick-select-side-resolved\">\n                  <code class=\"hx-date-range-quick-select-expression\">{{ sideExpressionText(s) }}</code>&ngsp;\n                  <span class=\"hx-date-range-quick-select-resolved-date\">{{ sideResolvedText(s) }}</span>\n                </p>\n              }\n              @case ('now') {\n                <p class=\"hx-date-range-quick-select-now-hint\">{{ l.nowHint }}</p>\n                <p class=\"hx-date-range-quick-select-side-resolved\">\n                  <span class=\"hx-date-range-quick-select-resolved-date\">{{ sideResolvedText(s) }}</span>\n                </p>\n              }\n            }\n          </div>\n        </section>\n      }\n      @if (quickError() || sideError()) {\n        <p class=\"hx-date-range-quick-select-error\" role=\"alert\" [id]=\"quickErrorId\">{{ l.incompleteRange }}</p>\n      }\n    </div>\n  </ng-template>\n</div>\n"
 		}]
 	}],
 	ctorParameters: () => [],
 	propDecorators: {
-		placeholder: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "placeholder",
-				required: false
-			}]
-		}],
-		showIcon: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "showIcon",
-				required: false
-			}]
-		}],
-		showButtonBar: [{
+		labels: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "showButtonBar",
+				alias: "labels",
 				required: false
 			}]
 		}],
-		dateFormat: [{
+		commonlyUsed: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "dateFormat",
+				alias: "commonlyUsed",
 				required: false
 			}]
 		}],
-		todayLabel: [{
+		recentStorageKey: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "todayLabel",
+				alias: "recentStorageKey",
 				required: false
 			}]
 		}],
-		clearLabel: [{
+		expression: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "clearLabel",
+				alias: "expression",
 				required: false
 			}]
+		}, {
+			type: i0.Output,
+			args: ["expressionChange"]
 		}],
-		chooseLabel: [{
+		minDate: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "chooseLabel",
+				alias: "minDate",
 				required: false
 			}]
 		}],
-		inputId: [{
+		maxDate: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "inputId",
+				alias: "maxDate",
 				required: false
 			}]
 		}],
-		inline: [{
+		firstDayOfWeek: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "inline",
+				alias: "firstDayOfWeek",
 				required: false
 			}]
 		}],
-		selectionMode: [{
+		locale: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "selectionMode",
+				alias: "locale",
 				required: false
 			}]
 		}],
-		minDate: [{
+		dateFormat: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "minDate",
+				alias: "dateFormat",
 				required: false
 			}]
 		}],
-		maxDate: [{
+		separator: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "maxDate",
+				alias: "separator",
 				required: false
 			}]
 		}],
-		disabledDates: [{
+		placeholder: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "disabledDates",
+				alias: "placeholder",
 				required: false
 			}]
 		}],
-		firstDayOfWeek: [{
+		chooseLabel: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "firstDayOfWeek",
+				alias: "chooseLabel",
 				required: false
 			}]
 		}],
-		locale: [{
+		inputId: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "locale",
+				alias: "inputId",
 				required: false
 			}]
 		}],
@@ -8448,9 +10457,20 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.ViewChild,
 			args: ["field", { isSignal: true }]
 		}],
-		calendar: [{
+		quickFirst: [{
 			type: i0.ViewChild,
-			args: [i0.forwardRef(() => HxCalendar), { isSignal: true }]
+			args: ["quickFirst", {
+				read: HxSelect,
+				isSignal: true
+			}]
+		}],
+		sideButtons: [{
+			type: i0.ViewChildren,
+			args: ["sideButton", { isSignal: true }]
+		}],
+		sideTabs: [{
+			type: i0.ViewChildren,
+			args: ["sideTab", { isSignal: true }]
 		}]
 	}
 });
@@ -10672,6 +12692,7 @@ var HxDateTimeRangePicker = class HxDateTimeRangePicker {
 	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : 	/* istanbul ignore next */ []);
 	presetsLabel = input("Presets", ...ngDevMode ? [{ debugName: "presetsLabel" }] : 	/* istanbul ignore next */ []);
 	presets = input([], ...ngDevMode ? [{ debugName: "presets" }] : 	/* istanbul ignore next */ []);
+	presetDisplay = input("buttons", ...ngDevMode ? [{ debugName: "presetDisplay" }] : 	/* istanbul ignore next */ []);
 	clearLabel = input("Clear", ...ngDevMode ? [{ debugName: "clearLabel" }] : 	/* istanbul ignore next */ []);
 	cancelLabel = input("Cancel", ...ngDevMode ? [{ debugName: "cancelLabel" }] : 	/* istanbul ignore next */ []);
 	submitLabel = input("Submit", ...ngDevMode ? [{ debugName: "submitLabel" }] : 	/* istanbul ignore next */ []);
@@ -10739,6 +12760,7 @@ var HxDateTimeRangePicker = class HxDateTimeRangePicker {
 	#injector = inject(Injector);
 	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : 	/* istanbul ignore next */ []);
 	draft = signal(EMPTY, ...ngDevMode ? [{ debugName: "draft" }] : 	/* istanbul ignore next */ []);
+	selectedPreset = signal(null, ...ngDevMode ? [{ debugName: "selectedPreset" }] : 	/* istanbul ignore next */ []);
 	popupId = nextId("hx-date-time-range-picker-popup");
 	positions = [{
 		originX: "start",
@@ -10781,8 +12803,7 @@ var HxDateTimeRangePicker = class HxDateTimeRangePicker {
 		if (typed !== null) return typed;
 		const { from, to } = this.value();
 		if (!from && !to) return "";
-		const fmt = this.#format();
-		const one = (d) => d ? fmt.format(d).replace(/,\s*/, " ") : "";
+		const one = (d) => d ? this.#formatDate(d) : "";
 		return `${one(from)} ${this.separator()} ${one(to)}`.trim();
 	}, ...ngDevMode ? [{ debugName: "text" }] : 	/* istanbul ignore next */ []);
 	isDisabled = computed(() => this.disabled() || this.#cvaDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : 	/* istanbul ignore next */ []);
@@ -10820,6 +12841,7 @@ var HxDateTimeRangePicker = class HxDateTimeRangePicker {
 	show() {
 		if (this.isDisabled() || this.open()) return;
 		this.#stage(this.value());
+		this.selectedPreset.set(null);
 		this.open.set(true);
 	}
 	toggle() {
@@ -10911,23 +12933,24 @@ var HxDateTimeRangePicker = class HxDateTimeRangePicker {
 		}
 	}
 	onOutsideClick(event) {
+		if (this.#inSelectList(event.target)) return;
 		if (!this.#host.nativeElement.contains(event.target)) this.close();
 	}
 	clear() {
 		this.#stage(EMPTY);
 	}
+	selectPreset(preset) {
+		if (this.applyPreset(preset)) this.selectedPreset.set(preset);
+	}
+	#inSelectList(target) {
+		return isInSelectOverlay(target);
+	}
 	applyPreset(preset) {
 		const { from: oldFrom, to: oldTo } = this.draft();
-		const from = this.#fitPreset(preset.from(), oldFrom);
-		const to = this.#fitPreset(preset.to(), oldTo ?? oldFrom);
-		if (from === void 0 || to === void 0) return;
-		this.#stage(from && to && to < from ? {
-			from: to,
-			to: from
-		} : {
-			from,
-			to
-		});
+		const range = hxResolvePreset(preset, { firstDayOfWeek: this.firstDayOfWeek() }, (date, side) => this.#fitPreset(date, side === "from" ? oldFrom : oldTo ?? oldFrom));
+		if (!range) return false;
+		this.#stage(range);
+		return true;
 	}
 	#fitPreset(date, old) {
 		if (!isValidDate(date)) return null;
@@ -10941,16 +12964,19 @@ var HxDateTimeRangePicker = class HxDateTimeRangePicker {
 		this.#commit(this.draft());
 		this.close(true);
 	}
+	#formatDate(date) {
+		return this.#format().format(date).replace(/,\s*/, " ");
+	}
 	onHostFocusOut(event) {
 		const next = event.relatedTarget;
-		if (next?.closest(".hx-date-time-range-picker-popup") || this.#host.nativeElement.contains(next)) return;
+		if (this.#inSelectList(next) || next?.closest(".hx-date-time-range-picker-popup") || this.#host.nativeElement.contains(next)) return;
 		if (this.open() && !next) return;
 		this.close();
 		this.markTouched();
 	}
 	onPopupFocusOut(event) {
 		const next = event.relatedTarget;
-		if (!next || next.closest(".hx-date-time-range-picker-popup") || this.#host.nativeElement.contains(next)) return;
+		if (!next || this.#inSelectList(next) || next.closest(".hx-date-time-range-picker-popup") || this.#host.nativeElement.contains(next)) return;
 		this.close();
 		this.markTouched();
 	}
@@ -11022,14 +13048,18 @@ var HxDateTimeRangePicker = class HxDateTimeRangePicker {
 		this.touch.emit();
 	}
 	#stage(next) {
+		const clean = this.#inside(next);
+		this.selectedPreset.set(null);
+		if (clean.from) this.#lastFrom = clean.from;
+		if (clean.to) this.#lastTo = clean.to;
+		this.draft.set(clean);
+	}
+	#inside(next) {
 		const inside = (d) => isValidDate(d) ? clampTime(d, this.minDate(), this.maxDate()) : null;
-		const clean = {
+		return {
 			from: inside(next.from),
 			to: inside(next.to)
 		};
-		if (clean.from) this.#lastFrom = clean.from;
-		if (clean.to) this.#lastTo = clean.to;
-		this.draft.set(clean);
 	}
 	#commit(next) {
 		this.value.set(next);
@@ -11092,6 +13122,13 @@ var HxDateTimeRangePicker = class HxDateTimeRangePicker {
 				isRequired: false,
 				transformFunction: null
 			},
+			presetDisplay: {
+				classPropertyName: "presetDisplay",
+				publicName: "presetDisplay",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			clearLabel: {
 				classPropertyName: "clearLabel",
 				publicName: "clearLabel",
@@ -11312,7 +13349,7 @@ var HxDateTimeRangePicker = class HxDateTimeRangePicker {
 			}
 		],
 		ngImport: i0,
-		template: "<div\n  class=\"hx-date-picker hx-date-picker-has-icon hx-date-time-range-picker-control\"\n  [class.hx-date-picker-open]=\"open()\"\n  [class.hx-date-picker-disabled]=\"isDisabled()\"\n  [class.hx-date-picker-invalid]=\"invalid()\"\n>\n  <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\n      [readOnly]=\"!typeable()\"\n      class=\"hx-date-picker-input\"\n      autocomplete=\"off\"\n      aria-haspopup=\"dialog\"\n      [attr.id]=\"inputId() ?? null\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"text()\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"open() ? popupId : null\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      (input)=\"onTyping($event)\"\n      (change)=\"commitTyping()\"\n      (click)=\"onFieldClick()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    <button\n      type=\"button\"\n      class=\"hx-date-picker-trigger\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-label]=\"chooseLabel()\"\n      [attr.aria-expanded]=\"open()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggle()\"\n    >\n      <span class=\"hx-date-picker-trigger-icon\" aria-hidden=\"true\"></span>\n    </button>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayPanelClass=\"hx-date-picker-overlay\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayPush]=\"true\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n    (overlayKeydown)=\"onOverlayKeydown($event)\"\n    (attach)=\"onAttach()\"\n    (detach)=\"open.set(false)\"\n  >\n    <div\n      class=\"hx-date-picker-popup hx-date-time-range-picker-popup\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [id]=\"popupId\"\n      [attr.aria-label]=\"ariaLabel() ?? chooseLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      (focusout)=\"onPopupFocusOut($event)\"\n    >\n      @if (presets().length > 0) {\n        <div class=\"hx-date-time-range-picker-presets\" role=\"group\" [attr.aria-label]=\"presetsLabel()\">\n          @for (preset of presets(); track $index) {\n            <button type=\"button\" class=\"hx-date-picker-button hx-date-time-range-picker-preset\" (click)=\"applyPreset(preset)\">{{ preset.label }}</button>\n          }\n        </div>\n      }\n      <div class=\"hx-date-time-range-picker-body\">\n        @if (!timeOnly()) {\n          <hx-date-picker\n            class=\"hx-date-time-range-picker-days\"\n            inline\n            selectionMode=\"range\"\n            [ariaLabel]=\"chooseLabel()\"\n            [value]=\"days()\"\n            [minDate]=\"minDate()\"\n            [maxDate]=\"maxDate()\"\n            [locale]=\"locale()\"\n            [firstDayOfWeek]=\"firstDayOfWeek()\"\n            [disabledDates]=\"disabledDates()\"\n            (valueChange)=\"setDays($event)\"\n          />\n        }\n        @if (showTime() || timeOnly()) {\n          <div class=\"hx-date-time-range-picker-times\">\n            <div class=\"hx-date-time-range-picker-time\">\n              <span class=\"hx-date-time-range-picker-caption\" aria-hidden=\"true\">{{ fromLabel() }}</span>\n              <hx-time-picker\n                inline\n                class=\"hx-date-time-range-picker-from\"\n                [ariaLabel]=\"fromLabel()\"\n                [value]=\"fromValue()\"\n                [hourFormat]=\"hourFormat()\"\n                [showMinutes]=\"showMinutes()\"\n                [showSeconds]=\"showSeconds()\"\n                [stepHour]=\"stepHour()\"\n                [stepMinute]=\"stepMinute()\"\n                [stepSecond]=\"stepSecond()\"\n                [locale]=\"locale()\"\n                [disabled]=\"isDisabled()\"\n                (valueChange)=\"setFromTime($event)\"\n              />\n            </div>\n            <div class=\"hx-date-time-range-picker-time\">\n              <span class=\"hx-date-time-range-picker-caption\" aria-hidden=\"true\">{{ toLabel() }}</span>\n              <hx-time-picker\n                inline\n                class=\"hx-date-time-range-picker-to\"\n                [ariaLabel]=\"toLabel()\"\n                [value]=\"toValue()\"\n                [hourFormat]=\"hourFormat()\"\n                [showMinutes]=\"showMinutes()\"\n                [showSeconds]=\"showSeconds()\"\n                [stepHour]=\"stepHour()\"\n                [stepMinute]=\"stepMinute()\"\n                [stepSecond]=\"stepSecond()\"\n                [locale]=\"locale()\"\n                [disabled]=\"isDisabled()\"\n                (valueChange)=\"setToTime($event)\"\n              />\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"hx-date-picker-buttonbar hx-date-time-range-picker-footer\">\n        @if (showButtonBar()) {\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n        }\n        <span class=\"hx-date-time-range-picker-spacer\"></span>\n        <button type=\"button\" class=\"hx-date-picker-button hx-date-time-range-picker-cancel\" (click)=\"close(true)\">{{ cancelLabel() }}</button>\n        <button type=\"button\" class=\"hx-date-picker-button hx-date-time-range-picker-submit\" (click)=\"submit()\">{{ submitLabel() }}</button>\n      </div>\n    </div>\n  </ng-template>\n</div>\n",
+		template: "<div\n  class=\"hx-date-picker hx-date-picker-has-icon hx-date-time-range-picker-control\"\n  [class.hx-date-picker-open]=\"open()\"\n  [class.hx-date-picker-disabled]=\"isDisabled()\"\n  [class.hx-date-picker-invalid]=\"invalid()\"\n>\n  <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\n      [readOnly]=\"!typeable()\"\n      class=\"hx-date-picker-input\"\n      autocomplete=\"off\"\n      aria-haspopup=\"dialog\"\n      [attr.id]=\"inputId() ?? null\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"text()\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"open() ? popupId : null\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      (input)=\"onTyping($event)\"\n      (change)=\"commitTyping()\"\n      (click)=\"onFieldClick()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    <button\n      type=\"button\"\n      class=\"hx-date-picker-trigger\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-label]=\"chooseLabel()\"\n      [attr.aria-expanded]=\"open()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggle()\"\n    >\n      <span class=\"hx-date-picker-trigger-icon\" aria-hidden=\"true\"></span>\n    </button>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayPanelClass=\"hx-date-picker-overlay\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayPush]=\"true\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n    (overlayKeydown)=\"onOverlayKeydown($event)\"\n    (attach)=\"onAttach()\"\n    (detach)=\"open.set(false)\"\n  >\n    <div\n      class=\"hx-date-picker-popup hx-date-time-range-picker-popup\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [id]=\"popupId\"\n      [attr.aria-label]=\"ariaLabel() ?? chooseLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      (focusout)=\"onPopupFocusOut($event)\"\n    >\n      @if (presets().length > 0) {\n        <hx-range-presets\n          [presets]=\"presets()\"\n          [display]=\"presetDisplay()\"\n          [label]=\"presetsLabel()\"\n          [disabled]=\"isDisabled()\"\n          [selected]=\"selectedPreset()\"\n          (chosen)=\"selectPreset($event)\"\n        />\n      }\n      <div class=\"hx-date-time-range-picker-body\">\n        @if (!timeOnly()) {\n          <hx-date-picker\n            class=\"hx-date-time-range-picker-days\"\n            inline\n            selectionMode=\"range\"\n            [ariaLabel]=\"chooseLabel()\"\n            [value]=\"days()\"\n            [minDate]=\"minDate()\"\n            [maxDate]=\"maxDate()\"\n            [locale]=\"locale()\"\n            [firstDayOfWeek]=\"firstDayOfWeek()\"\n            [disabledDates]=\"disabledDates()\"\n            (valueChange)=\"setDays($event)\"\n          />\n        }\n        @if (showTime() || timeOnly()) {\n          <div class=\"hx-date-time-range-picker-times\">\n            <div class=\"hx-date-time-range-picker-time\">\n              <span class=\"hx-date-time-range-picker-caption\" aria-hidden=\"true\">{{ fromLabel() }}</span>\n              <hx-time-picker\n                inline\n                class=\"hx-date-time-range-picker-from\"\n                [ariaLabel]=\"fromLabel()\"\n                [value]=\"fromValue()\"\n                [hourFormat]=\"hourFormat()\"\n                [showMinutes]=\"showMinutes()\"\n                [showSeconds]=\"showSeconds()\"\n                [stepHour]=\"stepHour()\"\n                [stepMinute]=\"stepMinute()\"\n                [stepSecond]=\"stepSecond()\"\n                [locale]=\"locale()\"\n                [disabled]=\"isDisabled()\"\n                (valueChange)=\"setFromTime($event)\"\n              />\n            </div>\n            <div class=\"hx-date-time-range-picker-time\">\n              <span class=\"hx-date-time-range-picker-caption\" aria-hidden=\"true\">{{ toLabel() }}</span>\n              <hx-time-picker\n                inline\n                class=\"hx-date-time-range-picker-to\"\n                [ariaLabel]=\"toLabel()\"\n                [value]=\"toValue()\"\n                [hourFormat]=\"hourFormat()\"\n                [showMinutes]=\"showMinutes()\"\n                [showSeconds]=\"showSeconds()\"\n                [stepHour]=\"stepHour()\"\n                [stepMinute]=\"stepMinute()\"\n                [stepSecond]=\"stepSecond()\"\n                [locale]=\"locale()\"\n                [disabled]=\"isDisabled()\"\n                (valueChange)=\"setToTime($event)\"\n              />\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"hx-date-picker-buttonbar hx-date-time-range-picker-footer\">\n        @if (showButtonBar()) {\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n        }\n        <span class=\"hx-date-time-range-picker-spacer\"></span>\n        <button type=\"button\" class=\"hx-date-picker-button hx-date-time-range-picker-cancel\" (click)=\"close(true)\">{{ cancelLabel() }}</button>\n        <button\n          type=\"button\"\n          class=\"hx-date-picker-button hx-date-time-range-picker-submit\"\n          (click)=\"submit()\"\n        >{{ submitLabel() }}</button>\n      </div>\n    </div>\n  </ng-template>\n</div>\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -11383,12 +13420,30 @@ var HxDateTimeRangePicker = class HxDateTimeRangePicker {
 					"locale",
 					"ariaLabel",
 					"ariaLabelledby",
+					"presets",
+					"presetDisplay",
+					"presetsLabel",
+					"presetRefusedLabel",
 					"value",
 					"disabled",
 					"invalid"
 				],
 				outputs: ["valueChange", "touch"]
 			},
+			{
+				kind: "component",
+				type: HxRangePresets,
+				selector: "hx-range-presets",
+				inputs: [
+					"presets",
+					"display",
+					"label",
+					"disabled",
+					"selected",
+					"describedBy"
+				],
+				outputs: ["chosen"]
+			},
 			{
 				kind: "component",
 				type: HxTimePicker,
@@ -11442,6 +13497,7 @@ i0.ɵɵngDeclareClassMetadata({
 				CdkConnectedOverlay,
 				CdkOverlayOrigin,
 				HxDatePicker,
+				HxRangePresets,
 				HxTimePicker
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
@@ -11454,7 +13510,7 @@ i0.ɵɵngDeclareClassMetadata({
 				class: "hx-date-time-range-picker",
 				"(focusout)": "onHostFocusOut($event)"
 			},
-			template: "<div\n  class=\"hx-date-picker hx-date-picker-has-icon hx-date-time-range-picker-control\"\n  [class.hx-date-picker-open]=\"open()\"\n  [class.hx-date-picker-disabled]=\"isDisabled()\"\n  [class.hx-date-picker-invalid]=\"invalid()\"\n>\n  <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\n      [readOnly]=\"!typeable()\"\n      class=\"hx-date-picker-input\"\n      autocomplete=\"off\"\n      aria-haspopup=\"dialog\"\n      [attr.id]=\"inputId() ?? null\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"text()\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"open() ? popupId : null\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      (input)=\"onTyping($event)\"\n      (change)=\"commitTyping()\"\n      (click)=\"onFieldClick()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    <button\n      type=\"button\"\n      class=\"hx-date-picker-trigger\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-label]=\"chooseLabel()\"\n      [attr.aria-expanded]=\"open()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggle()\"\n    >\n      <span class=\"hx-date-picker-trigger-icon\" aria-hidden=\"true\"></span>\n    </button>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayPanelClass=\"hx-date-picker-overlay\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayPush]=\"true\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n    (overlayKeydown)=\"onOverlayKeydown($event)\"\n    (attach)=\"onAttach()\"\n    (detach)=\"open.set(false)\"\n  >\n    <div\n      class=\"hx-date-picker-popup hx-date-time-range-picker-popup\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [id]=\"popupId\"\n      [attr.aria-label]=\"ariaLabel() ?? chooseLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      (focusout)=\"onPopupFocusOut($event)\"\n    >\n      @if (presets().length > 0) {\n        <div class=\"hx-date-time-range-picker-presets\" role=\"group\" [attr.aria-label]=\"presetsLabel()\">\n          @for (preset of presets(); track $index) {\n            <button type=\"button\" class=\"hx-date-picker-button hx-date-time-range-picker-preset\" (click)=\"applyPreset(preset)\">{{ preset.label }}</button>\n          }\n        </div>\n      }\n      <div class=\"hx-date-time-range-picker-body\">\n        @if (!timeOnly()) {\n          <hx-date-picker\n            class=\"hx-date-time-range-picker-days\"\n            inline\n            selectionMode=\"range\"\n            [ariaLabel]=\"chooseLabel()\"\n            [value]=\"days()\"\n            [minDate]=\"minDate()\"\n            [maxDate]=\"maxDate()\"\n            [locale]=\"locale()\"\n            [firstDayOfWeek]=\"firstDayOfWeek()\"\n            [disabledDates]=\"disabledDates()\"\n            (valueChange)=\"setDays($event)\"\n          />\n        }\n        @if (showTime() || timeOnly()) {\n          <div class=\"hx-date-time-range-picker-times\">\n            <div class=\"hx-date-time-range-picker-time\">\n              <span class=\"hx-date-time-range-picker-caption\" aria-hidden=\"true\">{{ fromLabel() }}</span>\n              <hx-time-picker\n                inline\n                class=\"hx-date-time-range-picker-from\"\n                [ariaLabel]=\"fromLabel()\"\n                [value]=\"fromValue()\"\n                [hourFormat]=\"hourFormat()\"\n                [showMinutes]=\"showMinutes()\"\n                [showSeconds]=\"showSeconds()\"\n                [stepHour]=\"stepHour()\"\n                [stepMinute]=\"stepMinute()\"\n                [stepSecond]=\"stepSecond()\"\n                [locale]=\"locale()\"\n                [disabled]=\"isDisabled()\"\n                (valueChange)=\"setFromTime($event)\"\n              />\n            </div>\n            <div class=\"hx-date-time-range-picker-time\">\n              <span class=\"hx-date-time-range-picker-caption\" aria-hidden=\"true\">{{ toLabel() }}</span>\n              <hx-time-picker\n                inline\n                class=\"hx-date-time-range-picker-to\"\n                [ariaLabel]=\"toLabel()\"\n                [value]=\"toValue()\"\n                [hourFormat]=\"hourFormat()\"\n                [showMinutes]=\"showMinutes()\"\n                [showSeconds]=\"showSeconds()\"\n                [stepHour]=\"stepHour()\"\n                [stepMinute]=\"stepMinute()\"\n                [stepSecond]=\"stepSecond()\"\n                [locale]=\"locale()\"\n                [disabled]=\"isDisabled()\"\n                (valueChange)=\"setToTime($event)\"\n              />\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"hx-date-picker-buttonbar hx-date-time-range-picker-footer\">\n        @if (showButtonBar()) {\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n        }\n        <span class=\"hx-date-time-range-picker-spacer\"></span>\n        <button type=\"button\" class=\"hx-date-picker-button hx-date-time-range-picker-cancel\" (click)=\"close(true)\">{{ cancelLabel() }}</button>\n        <button type=\"button\" class=\"hx-date-picker-button hx-date-time-range-picker-submit\" (click)=\"submit()\">{{ submitLabel() }}</button>\n      </div>\n    </div>\n  </ng-template>\n</div>\n"
+			template: "<div\n  class=\"hx-date-picker hx-date-picker-has-icon hx-date-time-range-picker-control\"\n  [class.hx-date-picker-open]=\"open()\"\n  [class.hx-date-picker-disabled]=\"isDisabled()\"\n  [class.hx-date-picker-invalid]=\"invalid()\"\n>\n  <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #field\n      type=\"text\"\n      [readOnly]=\"!typeable()\"\n      class=\"hx-date-picker-input\"\n      autocomplete=\"off\"\n      aria-haspopup=\"dialog\"\n      [attr.id]=\"inputId() ?? null\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"text()\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"open() ? popupId : null\"\n      [attr.aria-label]=\"ariaLabel() ?? null\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      (input)=\"onTyping($event)\"\n      (change)=\"commitTyping()\"\n      (click)=\"onFieldClick()\"\n      (keydown)=\"onFieldKeydown($event)\"\n    />\n    <button\n      type=\"button\"\n      class=\"hx-date-picker-trigger\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-label]=\"chooseLabel()\"\n      [attr.aria-expanded]=\"open()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggle()\"\n    >\n      <span class=\"hx-date-picker-trigger-icon\" aria-hidden=\"true\"></span>\n    </button>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayPanelClass=\"hx-date-picker-overlay\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayPush]=\"true\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n    (overlayKeydown)=\"onOverlayKeydown($event)\"\n    (attach)=\"onAttach()\"\n    (detach)=\"open.set(false)\"\n  >\n    <div\n      class=\"hx-date-picker-popup hx-date-time-range-picker-popup\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [id]=\"popupId\"\n      [attr.aria-label]=\"ariaLabel() ?? chooseLabel()\"\n      [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n      (focusout)=\"onPopupFocusOut($event)\"\n    >\n      @if (presets().length > 0) {\n        <hx-range-presets\n          [presets]=\"presets()\"\n          [display]=\"presetDisplay()\"\n          [label]=\"presetsLabel()\"\n          [disabled]=\"isDisabled()\"\n          [selected]=\"selectedPreset()\"\n          (chosen)=\"selectPreset($event)\"\n        />\n      }\n      <div class=\"hx-date-time-range-picker-body\">\n        @if (!timeOnly()) {\n          <hx-date-picker\n            class=\"hx-date-time-range-picker-days\"\n            inline\n            selectionMode=\"range\"\n            [ariaLabel]=\"chooseLabel()\"\n            [value]=\"days()\"\n            [minDate]=\"minDate()\"\n            [maxDate]=\"maxDate()\"\n            [locale]=\"locale()\"\n            [firstDayOfWeek]=\"firstDayOfWeek()\"\n            [disabledDates]=\"disabledDates()\"\n            (valueChange)=\"setDays($event)\"\n          />\n        }\n        @if (showTime() || timeOnly()) {\n          <div class=\"hx-date-time-range-picker-times\">\n            <div class=\"hx-date-time-range-picker-time\">\n              <span class=\"hx-date-time-range-picker-caption\" aria-hidden=\"true\">{{ fromLabel() }}</span>\n              <hx-time-picker\n                inline\n                class=\"hx-date-time-range-picker-from\"\n                [ariaLabel]=\"fromLabel()\"\n                [value]=\"fromValue()\"\n                [hourFormat]=\"hourFormat()\"\n                [showMinutes]=\"showMinutes()\"\n                [showSeconds]=\"showSeconds()\"\n                [stepHour]=\"stepHour()\"\n                [stepMinute]=\"stepMinute()\"\n                [stepSecond]=\"stepSecond()\"\n                [locale]=\"locale()\"\n                [disabled]=\"isDisabled()\"\n                (valueChange)=\"setFromTime($event)\"\n              />\n            </div>\n            <div class=\"hx-date-time-range-picker-time\">\n              <span class=\"hx-date-time-range-picker-caption\" aria-hidden=\"true\">{{ toLabel() }}</span>\n              <hx-time-picker\n                inline\n                class=\"hx-date-time-range-picker-to\"\n                [ariaLabel]=\"toLabel()\"\n                [value]=\"toValue()\"\n                [hourFormat]=\"hourFormat()\"\n                [showMinutes]=\"showMinutes()\"\n                [showSeconds]=\"showSeconds()\"\n                [stepHour]=\"stepHour()\"\n                [stepMinute]=\"stepMinute()\"\n                [stepSecond]=\"stepSecond()\"\n                [locale]=\"locale()\"\n                [disabled]=\"isDisabled()\"\n                (valueChange)=\"setToTime($event)\"\n              />\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"hx-date-picker-buttonbar hx-date-time-range-picker-footer\">\n        @if (showButtonBar()) {\n          <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n        }\n        <span class=\"hx-date-time-range-picker-spacer\"></span>\n        <button type=\"button\" class=\"hx-date-picker-button hx-date-time-range-picker-cancel\" (click)=\"close(true)\">{{ cancelLabel() }}</button>\n        <button\n          type=\"button\"\n          class=\"hx-date-picker-button hx-date-time-range-picker-submit\"\n          (click)=\"submit()\"\n        >{{ submitLabel() }}</button>\n      </div>\n    </div>\n  </ng-template>\n</div>\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -11507,6 +13563,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		presetDisplay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "presetDisplay",
+				required: false
+			}]
+		}],
 		clearLabel: [{
 			type: i0.Input,
 			args: [{
@@ -23752,6 +25816,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { HX_DIALOG_DATA, HX_PRIMARY_COLORS, HX_SURFACES, HX_SURFACE_NAMES, HX_THEME_OPTIONS, HxAccordion, HxAccordionContent, HxAccordionHeader, HxAccordionPanel, HxAutoComplete, HxAvatar, HxAvatarGroup, HxBadge, HxBreadcrumb, HxButton, HxButtonGroup, HxCard, HxCarousel, HxCarouselItem, HxCell, HxCheckbox, HxChip, HxColumnHeader, HxConfirmDialog, HxConfirmPopup, HxConfirmationService, HxDataTable, HxDatePicker, HxDateTimePicker, HxDateTimeRangePicker, HxDialog, HxDialogRef, HxDialogService, HxDivider, HxDrawer, HxFieldset, HxFileUpload, HxFloatLabel, HxGalleria, HxGalleriaCaption, HxGalleriaItemTemplate, HxGalleriaThumbnail, HxIconField, HxImage, HxImageIndicator, HxInput, HxInputGroup, HxInputGroupAddon, HxInputIcon, HxInputNumber, HxListbox, HxMenu, HxMenubar, HxMessage, HxMessageService, HxMultiSelect, HxOverlayBadge, HxPaginator, HxPanel, HxPassword, HxPopover, HxProgressBar, HxProgressSpinner, HxRadio, HxRating, HxRowExpansion, HxSelect, HxSelectButton, HxSkeleton, HxSlider, HxSplitButton, HxStep, HxStepContent, HxStepList, HxStepPanel, HxStepPanels, HxStepper, HxSwitch, HxTab, HxTabContent, HxTabList, HxTabPanel, HxTabPanels, HxTable, HxTableBody, HxTableCaption, HxTableEmpty, HxTableFooter, HxTableHeader, HxTabs, HxTag, HxTheme, HxTimePicker, HxTimeline, HxTimelineContent, HxTimelineMarker, HxTimelineOpposite, HxToast, HxToastItem, HxToggleButton, HxToolbar, HxTooltip, HxTree, HxTreeNodeTemplate, compareValues, formatFileSize, matchesAccept, provideHxTheme, resolveField };
+export { HX_DATE_RANGE_DAY_PRESETS, HX_DATE_RANGE_PRESETS, HX_DIALOG_DATA, HX_PRIMARY_COLORS, HX_QUICK_SELECT_COMMONLY_USED, HX_QUICK_SELECT_LABELS, HX_SURFACES, HX_SURFACE_NAMES, HX_THEME_OPTIONS, HxAccordion, HxAccordionContent, HxAccordionHeader, HxAccordionPanel, HxAutoComplete, HxAvatar, HxAvatarGroup, HxBadge, HxBreadcrumb, HxButton, HxButtonGroup, HxCard, HxCarousel, HxCarouselItem, HxCell, HxCheckbox, HxChip, HxColumnHeader, HxConfirmDialog, HxConfirmPopup, HxConfirmationService, HxDataTable, HxDatePicker, HxDateRangeQuickSelect, HxDateTimePicker, HxDateTimeRangePicker, HxDialog, HxDialogRef, HxDialogService, HxDivider, HxDrawer, HxFieldset, HxFileUpload, HxFloatLabel, HxGalleria, HxGalleriaCaption, HxGalleriaItemTemplate, HxGalleriaThumbnail, HxIconField, HxImage, HxImageIndicator, HxInput, HxInputGroup, HxInputGroupAddon, HxInputIcon, HxInputNumber, HxListbox, HxMenu, HxMenubar, HxMessage, HxMessageService, HxMultiSelect, HxOverlayBadge, HxPaginator, HxPanel, HxPassword, HxPopover, HxProgressBar, HxProgressSpinner, HxRadio, HxRating, HxRowExpansion, HxSelect, HxSelectButton, HxSkeleton, HxSlider, HxSplitButton, HxStep, HxStepContent, HxStepList, HxStepPanel, HxStepPanels, HxStepper, HxSwitch, HxTab, HxTabContent, HxTabList, HxTabPanel, HxTabPanels, HxTable, HxTableBody, HxTableCaption, HxTableEmpty, HxTableFooter, HxTableHeader, HxTabs, HxTag, HxTheme, HxTimePicker, HxTimeline, HxTimelineContent, HxTimelineMarker, HxTimelineOpposite, HxToast, HxToastItem, HxToggleButton, HxToolbar, HxTooltip, HxTree, HxTreeNodeTemplate, compareValues, formatFileSize, hxDateRangePresets, hxParseDateMath, hxRelativeRangeExpressions, hxResolveRangeExpression, hxResolveRangeSide, matchesAccept, provideHxTheme, resolveField };
 
 //# sourceMappingURL=gravionlabs-helix-ui.mjs.map