@gravionlabs/helix-ui 22.2.6 → 22.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravionlabs/helix-ui",
-  "version": "22.2.6",
+  "version": "22.2.8",
   "description": "Helix UI: vanilla Angular components on the Helix design tokens — plain CSS, no runtime styling engine.",
   "license": "MIT",
   "keywords": [
@@ -47,11 +47,16 @@
       "types": "./types/gravionlabs-helix-ui.d.ts",
       "default": "./fesm2022/gravionlabs-helix-ui.mjs"
     },
+    "./chart": {
+      "types": "./types/gravionlabs-helix-ui-chart.d.ts",
+      "default": "./fesm2022/gravionlabs-helix-ui-chart.mjs"
+    },
     "./validators": {
       "types": "./types/gravionlabs-helix-ui-validators.d.ts",
       "default": "./fesm2022/gravionlabs-helix-ui-validators.mjs"
     },
     "./styles.css": "./styles.css",
+    "./core.css": "./core.css",
     "./tokens.css": "./tokens.css"
   },
   "type": "module"

package/styles.css

@@ -1753,6 +1753,83 @@
     height: 2.5rem;
   }
 
+  /* a header with extra content: the label (or sort button) and the content side by side */
+  .hx-data-table-header-content {
+    display: flex;
+    align-items: center;
+    gap: var(--h-datatable-header-cell-gap);
+  }
+
+  .hx-data-table-header-content > .hx-data-table-sort {
+    flex: 1 1 auto;
+    width: auto;
+  }
+
+  .hx-data-table-align-center .hx-data-table-header-content {
+    justify-content: center;
+  }
+
+  .hx-data-table-align-right .hx-data-table-header-content {
+    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;
@@ -2452,6 +2529,13 @@
   .hx-date-time-range-picker-popup {
     max-width: calc(100vw - 2rem);
     overflow: auto;
+    /* the presets row and the body sit inside the popup, so the popup carries the outer border */
+    border: 1px solid var(--h-datepicker-panel-border-color);
+  }
+
+  /* the popup border already closes the button bar */
+  .hx-date-time-range-picker-popup .hx-date-picker-buttonbar {
+    border: 0;
   }
 
   .hx-date-time-range-picker-body {
@@ -2508,6 +2592,13 @@
     font-weight: var(--h-datepicker-title-font-weight);
   }
 
+  .hx-date-time-range-picker-presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--h-datepicker-title-gap);
+    padding: var(--h-datepicker-panel-padding) var(--h-datepicker-panel-padding) 0;
+  }
+
   /* dialog */
   /*
    * Dialog: `<hx-dialog>` and the dialogs of `HxDialogService`. The box (`.hx-dialog`) is a grid of the title, the

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

@@ -0,0 +1,134 @@
+import * as i0 from "@angular/core";
+import { InjectionToken } from "@angular/core";
+type HxChartType = 'bar' | 'line' | 'scatter' | 'bubble' | 'pie' | 'doughnut' | 'polarArea' | 'radar';
+/** What `(dataSelect)` carries: the click and what chart.js found under it. */
+interface HxChartSelectEvent {
+  originalEvent: Event;
+  /** The nearest element under the pointer (chart.js `{ datasetIndex, index, element }`). */
+  element: unknown;
+  /** The elements of that dataset. */
+  dataset: unknown[];
+}
+/** The part of chart.js this component uses; the real module is `chart.js/auto`. */
+interface HxChartModule {
+  default: new (canvas: HTMLCanvasElement, config: unknown) => HxChartInstance;
+}
+interface HxChartInstance {
+  data: unknown;
+  options: unknown;
+  update(mode?: string): void;
+  destroy(): void;
+  getElementsAtEventForMode(event: Event, mode: string, options: object, useFinalPosition: boolean): unknown[];
+}
+/**
+ * Loads chart.js. The default is a dynamic `import('chart.js/auto')`, so chart.js is only fetched by apps that show
+ * a chart; provide another function to register a smaller set of chart.js parts or to replace it in tests.
+ */
+export declare const HX_CHART_LOADER: InjectionToken<() => Promise<HxChartModule>>;
+type Json = Record<string, unknown>;
+/** The parts of chart.js data and datasets that are read here; everything else is passed on untouched. */
+interface ChartDataLike extends Json {
+  datasets?: unknown;
+}
+/**
+ * A chart.js chart whose colours, grid and font come from the Helix tokens.
+ *
+ * ```html
+ * <hx-chart type="bar" [data]="data" [options]="options" height="20rem" ariaLabel="Sales per month">
+ *   <table hxChartFallback>…the same numbers as text…</table>
+ * </hx-chart>
+ * ```
+ *
+ * chart.js is an optional peer dependency, loaded with a dynamic import (see `HX_CHART_LOADER`) the first time a
+ * chart is shown. Datasets without colours get the Helix palette; text, grid and legend colours come from
+ * `--h-text-muted-color` and `--h-content-border-color` of the element. Your `options` win over these defaults.
+ * The chart is redrawn when `class` or `style` of `<html>` change (dark mode, the primary colour).
+ *
+ * The canvas is an `img` named by `ariaLabel` / `ariaLabelledBy`; content marked `hxChartFallback` becomes the
+ * canvas fallback content, which assistive technology reads: put the numbers there as text or as a table.
+ */
+export declare class HxChart {
+  #private;
+  private readonly canvas;
+  readonly type: import("@angular/core").InputSignal<HxChartType>;
+  /** chart.js data: `{ labels, datasets }`. Pass a new object to update the chart. */
+  readonly data: import("@angular/core").InputSignal<ChartDataLike>;
+  /** chart.js options, on top of the token defaults. Pass a new object to update the chart. */
+  readonly options: import("@angular/core").InputSignal<Json>;
+  /** Extra chart.js plugins for this chart. */
+  readonly plugins: import("@angular/core").InputSignal<readonly unknown[]>;
+  /** CSS width of the frame, e.g. `30rem`; the chart fills its container by default. */
+  readonly width: import("@angular/core").InputSignal<string | undefined>;
+  /** CSS height of the frame; without it chart.js keeps its aspect ratio. */
+  readonly height: import("@angular/core").InputSignal<string | undefined>;
+  /** Resize with the container. */
+  readonly responsive: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+  readonly ariaLabelledBy: import("@angular/core").InputSignal<string | undefined>;
+  /** Delay of a redraw after the theme changed, in ms; the style change is usually followed by more. */
+  readonly themeDelay: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** A data point or dataset was clicked. */
+  readonly dataSelect: import("@angular/core").OutputEmitterRef<HxChartSelectEvent>;
+  constructor();
+  /** The chart.js instance, once it exists; `undefined` before chart.js has loaded. */
+  get chart(): HxChartInstance | undefined;
+  /** Redraws the chart, e.g. after the theme changed in a way the component cannot see. */
+  refresh(): void;
+  protected onClick(event: MouseEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxChart, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HxChart, "hx-chart", never, {
+    "type": {
+      "alias": "type";
+      "required": false;
+      "isSignal": true;
+    };
+    "data": {
+      "alias": "data";
+      "required": false;
+      "isSignal": true;
+    };
+    "options": {
+      "alias": "options";
+      "required": false;
+      "isSignal": true;
+    };
+    "plugins": {
+      "alias": "plugins";
+      "required": false;
+      "isSignal": true;
+    };
+    "width": {
+      "alias": "width";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "responsive": {
+      "alias": "responsive";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabelledBy": {
+      "alias": "ariaLabelledBy";
+      "required": false;
+      "isSignal": true;
+    };
+    "themeDelay": {
+      "alias": "themeDelay";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "dataSelect": "dataSelect";
+  }, never, ["[hxChartFallback]"], true, never>;
+}
+export type { HxChartInstance, HxChartModule, HxChartSelectEvent, HxChartType };