@gravionlabs/helix-ui 22.2.7 → 22.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravionlabs/helix-ui",
-  "version": "22.2.7",
+  "version": "22.2.8",
   "description": "Helix UI: vanilla Angular components on the Helix design tokens — plain CSS, no runtime styling engine.",
   "license": "MIT",
   "keywords": [

package/styles.css

@@ -1773,6 +1773,63 @@
     justify-content: flex-end;
   }
 
+  /* the filter button of filterDisplay="menu": an icon button beside the label, marked when the column is filtered */
+  .hx-data-table-filter-button {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    margin: 0;
+    position: relative;
+    padding: 0.125rem;
+    border: 0;
+    background: transparent;
+    color: var(--h-datatable-sort-icon-color);
+    cursor: pointer;
+    border-radius: 2px;
+    outline-color: transparent;
+  }
+
+  .hx-data-table-filter-icon {
+    display: inline-block;
+    flex: none;
+    width: var(--h-datatable-sort-icon-size);
+    height: var(--h-datatable-sort-icon-size);
+    background: currentcolor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6 7.5V19l-4 1.5v-8L4 5Z'/%3E%3C/svg%3E") center/contain no-repeat;
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6 7.5V19l-4 1.5v-8L4 5Z'/%3E%3C/svg%3E") center/contain no-repeat;
+  }
+
+  .hx-data-table-filter-button:hover {
+    color: var(--h-datatable-sort-icon-hover-color);
+  }
+
+  .hx-data-table-filter-button:focus-visible {
+    outline: var(--h-datatable-header-cell-focus-ring-width) var(--h-datatable-header-cell-focus-ring-style) var(--h-datatable-header-cell-focus-ring-color);
+    outline-offset: var(--h-datatable-header-cell-focus-ring-offset);
+    box-shadow: var(--h-datatable-header-cell-focus-ring-shadow);
+  }
+
+  .hx-data-table-filter-button.hx-data-table-filter-active {
+    color: var(--h-datatable-header-cell-selected-color);
+  }
+
+  .hx-data-table-filter-button.hx-data-table-filter-active::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 0.375rem;
+    height: 0.375rem;
+    border-radius: 50%;
+    background: currentcolor;
+  }
+
+  .hx-data-table-filter-menu {
+    display: flex;
+    align-items: center;
+    gap: var(--h-datatable-header-cell-gap);
+  }
+
   /* sortable headers: a button that fills the header cell */
   .hx-data-table-sort {
     display: inline-flex;

package/types/gravionlabs-helix-ui.d.ts

@@ -1,7 +1,7 @@
 import * as i1 from "@angular/cdk/accordion";
 import { CdkAccordionItem } from "@angular/cdk/accordion";
 import * as i0 from "@angular/core";
-import { EnvironmentProviders, InjectionToken, OnInit, TemplateRef, Type } from "@angular/core";
+import { ElementRef, EnvironmentProviders, InjectionToken, OnInit, TemplateRef, Type } from "@angular/core";
 import { ConnectedOverlayPositionChange, ConnectedPosition } from "@angular/cdk/overlay";
 import { ControlValueAccessor } from "@angular/forms";
 import { FormValueControl } from "@angular/forms/signals";
@@ -1182,6 +1182,98 @@ export declare class HxPaginator {
     "pageChange": "pageChange";
   }, never, never, true, never>;
 }
+/**
+ * A small panel anchored to an element, with arbitrary content and an arrow pointing at the element.
+ *
+ * ```html
+ * <button hx-button aria-haspopup="dialog" (click)="op.toggle($event)">Share</button>
+ * <hx-popover #op ariaLabel="Share this page">
+ *   <input hx-input aria-label="Link" value="https://…" />
+ * </hx-popover>
+ * ```
+ *
+ * `toggle(event, target?)`, `show(event, target?)` and `hide()` open it below the element of the event (or `target`),
+ * or above when there is no room. An outside click and Escape close it. It is a non-modal `role="dialog"`: the focus
+ * moves to its first control when it has one and returns to the element that opened it when it closes, and the page
+ * behind stays reachable. Name it with `ariaLabel` or `ariaLabelledBy`, and put `aria-haspopup="dialog"` on the
+ * trigger. Projected content is created with the popover, only shown while it is open.
+ */
+export declare class HxPopover {
+  #private;
+  private readonly panel;
+  /** Accessible name of the popover. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+  readonly ariaLabelledBy: import("@angular/core").InputSignal<string | undefined>;
+  readonly ariaDescribedBy: import("@angular/core").InputSignal<string | undefined>;
+  /** `alertdialog` for a question that needs an answer (the confirm popup). */
+  readonly role: import("@angular/core").InputSignal<"dialog" | "alertdialog">;
+  /** Extra CSS classes on the panel. */
+  readonly panelClass: import("@angular/core").InputSignal<string | undefined>;
+  /** A click outside closes it. */
+  readonly dismissable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly closeOnEscape: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly shown: import("@angular/core").OutputEmitterRef<void>;
+  readonly hidden: import("@angular/core").OutputEmitterRef<void>;
+  readonly open: import("@angular/core").WritableSignal<boolean>;
+  protected readonly origin: import("@angular/core").WritableSignal<Element | null>;
+  protected readonly fallbackOrigin: HTMLElement;
+  /** The popover is above the element (no room below). */
+  protected readonly above: import("@angular/core").WritableSignal<boolean>;
+  /** The popover is aligned to the end edge of the element (no room to extend to the right). */
+  protected readonly end: import("@angular/core").WritableSignal<boolean>;
+  protected readonly positions: ConnectedPosition[];
+  /** Opens it at the element of the event (or `target`), or closes it when it is open. */
+  toggle(event: Event | Element, target?: Element | null): void;
+  /** Opens it at `target`, else at the element of the event; an element can be passed instead of an event. */
+  show(event: Event | Element, target?: Element | null): void;
+  hide(refocus?: boolean): void;
+  protected onPosition(change: ConnectedOverlayPositionChange): void;
+  protected onAttach(): void;
+  protected onDetach(): void;
+  protected onKeydown(event: KeyboardEvent): void;
+  protected onOutsideClick(event: MouseEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxPopover, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HxPopover, "hx-popover", never, {
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabelledBy": {
+      "alias": "ariaLabelledBy";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaDescribedBy": {
+      "alias": "ariaDescribedBy";
+      "required": false;
+      "isSignal": true;
+    };
+    "role": {
+      "alias": "role";
+      "required": false;
+      "isSignal": true;
+    };
+    "panelClass": {
+      "alias": "panelClass";
+      "required": false;
+      "isSignal": true;
+    };
+    "dismissable": {
+      "alias": "dismissable";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeOnEscape": {
+      "alias": "closeOnEscape";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "shown": "shown";
+    "hidden": "hidden";
+  }, never, ["*"], true, never>;
+}
 type HxTableSize = 'small' | 'medium' | 'large';
 /**
  * A native `<table>` drawn as a Helix table (CSS only): header, body and footer rows, hover, stripes and gridlines
@@ -1258,7 +1350,7 @@ interface HxColumn {
   align?: HxColumnAlign;
   /** The header is a button that sorts by the column. */
   sortable?: boolean;
-  /** The column gets a text filter in the filter row (`filterDisplay="row"`). */
+  /** The column gets a text filter: in the filter row (`filterDisplay="row"`) or in a popover from its header (`"menu"`). */
   filter?: boolean;
   /** The direction of the first click on the sort button (the table's `sortFirstOrder` by default). */
   sortFirstOrder?: HxSortFirstOrder;
@@ -1384,13 +1476,13 @@ interface HxTableRowContext {
  *
  * ```html
  * <hx-data-table [value]="invoices" [columns]="columns" dataKey="id" caption="Invoices" stripedRows>
- *   <ng-template hxCell="amount" let-value>{{ value | currency: 'EUR' }}</ng-template>
+ *   <ng-template hxCell="amount" let-value="value">{{ value | currency: 'EUR' }}</ng-template>
  * </hx-data-table>
  * ```
  *
  * The table keeps the native semantics: a `<caption>` (drawn as the table header; visually hidden when only
  * `ariaLabel` is set), `<th scope="col">` cells and `aria-busy` while `loading`. A scrolling table is a labelled,
- * focusable `region`.
+ * focusable `region`. `filterDisplay="menu"` puts the column filters in a popover opened from the header.
  */
 export declare class HxDataTable implements OnInit {
   /** The rows. */
@@ -1457,11 +1549,21 @@ export declare class HxDataTable implements OnInit {
   readonly selectRowLabel: import("@angular/core").InputSignal<string>;
   /** The properties of a row the global filter looks in (`filterGlobal`). */
   readonly globalFilterFields: import("@angular/core").InputSignal<readonly string[]>;
-  /** `row`: a filter row with a text input under the headers of columns with `filter: true`. */
-  readonly filterDisplay: import("@angular/core").InputSignal<"row" | undefined>;
+  /**
+   * `row`: a filter row with a text input under the headers of columns with `filter: true`. `menu`: a filter button in
+   * those headers that opens a popover with the text input.
+   */
+  readonly filterDisplay: import("@angular/core").InputSignal<"menu" | "row" | undefined>;
   /** The text of the column filters, by field. */
   readonly filters: import("@angular/core").ModelSignal<Record<string, string>>;
   readonly filterLabel: import("@angular/core").InputSignal<string>;
+  /** The text of the button that empties a filter in the header menu. */
+  readonly clearLabel: import("@angular/core").InputSignal<string>;
+  protected readonly filterPopover: import("@angular/core").Signal<HxPopover | undefined>;
+  protected readonly filterInput: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;
+  /** The column whose filter popover is open. */
+  protected readonly activeFilterColumn: import("@angular/core").WritableSignal<HxColumn | null>;
+  private readonly injector;
   /** The rows that are open (by `dataKey`, or the row index without one); needs a `hxRowExpansion` template. */
   readonly expandedRowKeys: import("@angular/core").ModelSignal<Record<string, boolean>>;
   readonly expandLabel: import("@angular/core").InputSignal<string>;
@@ -1513,6 +1615,9 @@ export declare class HxDataTable implements OnInit {
   protected onRowKey(row: unknown, event: Event): void;
   /** Filters every column in `globalFilterFields` for a text (case-insensitive, contains). */
   filterGlobal(text: string): void;
+  protected openFilter(event: Event, column: HxColumn): void;
+  protected filterLabelFor(column: HxColumn): string;
+  protected clearFilter(column: HxColumn): void;
   protected setFilter(column: HxColumn, text: string): void;
   protected rowKey(row: unknown, index: number): string;
   protected isExpanded(row: unknown, index: number): boolean;
@@ -1727,6 +1832,11 @@ export declare class HxDataTable implements OnInit {
       "required": false;
       "isSignal": true;
     };
+    "clearLabel": {
+      "alias": "clearLabel";
+      "required": false;
+      "isSignal": true;
+    };
     "expandedRowKeys": {
       "alias": "expandedRowKeys";
       "required": false;
@@ -4827,98 +4937,6 @@ export declare class HxPassword implements ControlValueAccessor, FormValueContro
     "touch": "touch";
   }, never, never, true, never>;
 }
-/**
- * A small panel anchored to an element, with arbitrary content and an arrow pointing at the element.
- *
- * ```html
- * <button hx-button aria-haspopup="dialog" (click)="op.toggle($event)">Share</button>
- * <hx-popover #op ariaLabel="Share this page">
- *   <input hx-input aria-label="Link" value="https://…" />
- * </hx-popover>
- * ```
- *
- * `toggle(event, target?)`, `show(event, target?)` and `hide()` open it below the element of the event (or `target`),
- * or above when there is no room. An outside click and Escape close it. It is a non-modal `role="dialog"`: the focus
- * moves to its first control when it has one and returns to the element that opened it when it closes, and the page
- * behind stays reachable. Name it with `ariaLabel` or `ariaLabelledBy`, and put `aria-haspopup="dialog"` on the
- * trigger. Projected content is created with the popover, only shown while it is open.
- */
-export declare class HxPopover {
-  #private;
-  private readonly panel;
-  /** Accessible name of the popover. */
-  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
-  readonly ariaLabelledBy: import("@angular/core").InputSignal<string | undefined>;
-  readonly ariaDescribedBy: import("@angular/core").InputSignal<string | undefined>;
-  /** `alertdialog` for a question that needs an answer (the confirm popup). */
-  readonly role: import("@angular/core").InputSignal<"dialog" | "alertdialog">;
-  /** Extra CSS classes on the panel. */
-  readonly panelClass: import("@angular/core").InputSignal<string | undefined>;
-  /** A click outside closes it. */
-  readonly dismissable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  readonly closeOnEscape: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  readonly shown: import("@angular/core").OutputEmitterRef<void>;
-  readonly hidden: import("@angular/core").OutputEmitterRef<void>;
-  readonly open: import("@angular/core").WritableSignal<boolean>;
-  protected readonly origin: import("@angular/core").WritableSignal<Element | null>;
-  protected readonly fallbackOrigin: HTMLElement;
-  /** The popover is above the element (no room below). */
-  protected readonly above: import("@angular/core").WritableSignal<boolean>;
-  /** The popover is aligned to the end edge of the element (no room to extend to the right). */
-  protected readonly end: import("@angular/core").WritableSignal<boolean>;
-  protected readonly positions: ConnectedPosition[];
-  /** Opens it at the element of the event (or `target`), or closes it when it is open. */
-  toggle(event: Event | Element, target?: Element | null): void;
-  /** Opens it at `target`, else at the element of the event; an element can be passed instead of an event. */
-  show(event: Event | Element, target?: Element | null): void;
-  hide(refocus?: boolean): void;
-  protected onPosition(change: ConnectedOverlayPositionChange): void;
-  protected onAttach(): void;
-  protected onDetach(): void;
-  protected onKeydown(event: KeyboardEvent): void;
-  protected onOutsideClick(event: MouseEvent): void;
-  static ɵfac: i0.ɵɵFactoryDeclaration<HxPopover, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<HxPopover, "hx-popover", never, {
-    "ariaLabel": {
-      "alias": "ariaLabel";
-      "required": false;
-      "isSignal": true;
-    };
-    "ariaLabelledBy": {
-      "alias": "ariaLabelledBy";
-      "required": false;
-      "isSignal": true;
-    };
-    "ariaDescribedBy": {
-      "alias": "ariaDescribedBy";
-      "required": false;
-      "isSignal": true;
-    };
-    "role": {
-      "alias": "role";
-      "required": false;
-      "isSignal": true;
-    };
-    "panelClass": {
-      "alias": "panelClass";
-      "required": false;
-      "isSignal": true;
-    };
-    "dismissable": {
-      "alias": "dismissable";
-      "required": false;
-      "isSignal": true;
-    };
-    "closeOnEscape": {
-      "alias": "closeOnEscape";
-      "required": false;
-      "isSignal": true;
-    };
-  }, {
-    "shown": "shown";
-    "hidden": "hidden";
-  }, never, ["*"], true, never>;
-}
 type HxProgressMode = 'determinate' | 'indeterminate';
 /**
  * A bar that fills from 0 to 100, or slides while the duration is unknown.