@gravionlabs/helix-ui 22.2.6 → 22.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -1
- package/chart/package.json +4 -0
- package/core.css +4082 -0
- package/fesm2022/gravionlabs-helix-ui-chart.mjs +446 -0
- package/fesm2022/gravionlabs-helix-ui-chart.mjs.map +1 -0
- package/fesm2022/gravionlabs-helix-ui.mjs +369 -465
- package/fesm2022/gravionlabs-helix-ui.mjs.map +1 -1
- package/package.json +6 -1
- package/styles.css +34 -0
- package/types/gravionlabs-helix-ui-chart.d.ts +134 -0
- package/types/gravionlabs-helix-ui.d.ts +136 -139
|
@@ -857,137 +857,6 @@ export declare class HxCarousel<T = unknown> {
|
|
|
857
857
|
"page": "pageChange";
|
|
858
858
|
}, ["itemTemplate"], ["[hxCarouselHeader]", "[hxCarouselFooter]"], true, never>;
|
|
859
859
|
}
|
|
860
|
-
type HxChartType = 'bar' | 'line' | 'scatter' | 'bubble' | 'pie' | 'doughnut' | 'polarArea' | 'radar';
|
|
861
|
-
/** What `(dataSelect)` carries: the click and what chart.js found under it. */
|
|
862
|
-
interface HxChartSelectEvent {
|
|
863
|
-
originalEvent: Event;
|
|
864
|
-
/** The nearest element under the pointer (chart.js `{ datasetIndex, index, element }`). */
|
|
865
|
-
element: unknown;
|
|
866
|
-
/** The elements of that dataset. */
|
|
867
|
-
dataset: unknown[];
|
|
868
|
-
}
|
|
869
|
-
/** The part of chart.js this component uses; the real module is `chart.js/auto`. */
|
|
870
|
-
interface HxChartModule {
|
|
871
|
-
default: new (canvas: HTMLCanvasElement, config: unknown) => HxChartInstance;
|
|
872
|
-
}
|
|
873
|
-
interface HxChartInstance {
|
|
874
|
-
data: unknown;
|
|
875
|
-
options: unknown;
|
|
876
|
-
update(mode?: string): void;
|
|
877
|
-
destroy(): void;
|
|
878
|
-
getElementsAtEventForMode(event: Event, mode: string, options: object, useFinalPosition: boolean): unknown[];
|
|
879
|
-
}
|
|
880
|
-
/**
|
|
881
|
-
* Loads chart.js. The default is a dynamic `import('chart.js/auto')`, so chart.js is only fetched by apps that show
|
|
882
|
-
* a chart; provide another function to register a smaller set of chart.js parts or to replace it in tests.
|
|
883
|
-
*/
|
|
884
|
-
export declare const HX_CHART_LOADER: InjectionToken<() => Promise<HxChartModule>>;
|
|
885
|
-
type Json = Record<string, unknown>;
|
|
886
|
-
/** The parts of chart.js data and datasets that are read here; everything else is passed on untouched. */
|
|
887
|
-
interface ChartDataLike extends Json {
|
|
888
|
-
datasets?: unknown;
|
|
889
|
-
}
|
|
890
|
-
/**
|
|
891
|
-
* A chart.js chart whose colours, grid and font come from the Helix tokens.
|
|
892
|
-
*
|
|
893
|
-
* ```html
|
|
894
|
-
* <hx-chart type="bar" [data]="data" [options]="options" height="20rem" ariaLabel="Sales per month">
|
|
895
|
-
* <table hxChartFallback>…the same numbers as text…</table>
|
|
896
|
-
* </hx-chart>
|
|
897
|
-
* ```
|
|
898
|
-
*
|
|
899
|
-
* chart.js is an optional peer dependency, loaded with a dynamic import (see `HX_CHART_LOADER`) the first time a
|
|
900
|
-
* chart is shown. Datasets without colours get the Helix palette; text, grid and legend colours come from
|
|
901
|
-
* `--h-text-muted-color` and `--h-content-border-color` of the element. Your `options` win over these defaults.
|
|
902
|
-
* The chart is redrawn when `class` or `style` of `<html>` change (dark mode, the primary colour).
|
|
903
|
-
*
|
|
904
|
-
* The canvas is an `img` named by `ariaLabel` / `ariaLabelledBy`; content marked `hxChartFallback` becomes the
|
|
905
|
-
* canvas fallback content, which assistive technology reads: put the numbers there as text or as a table.
|
|
906
|
-
*/
|
|
907
|
-
export declare class HxChart {
|
|
908
|
-
#private;
|
|
909
|
-
private readonly canvas;
|
|
910
|
-
readonly type: import("@angular/core").InputSignal<HxChartType>;
|
|
911
|
-
/** chart.js data: `{ labels, datasets }`. Pass a new object to update the chart. */
|
|
912
|
-
readonly data: import("@angular/core").InputSignal<ChartDataLike>;
|
|
913
|
-
/** chart.js options, on top of the token defaults. Pass a new object to update the chart. */
|
|
914
|
-
readonly options: import("@angular/core").InputSignal<Json>;
|
|
915
|
-
/** Extra chart.js plugins for this chart. */
|
|
916
|
-
readonly plugins: import("@angular/core").InputSignal<readonly unknown[]>;
|
|
917
|
-
/** CSS width of the frame, e.g. `30rem`; the chart fills its container by default. */
|
|
918
|
-
readonly width: import("@angular/core").InputSignal<string | undefined>;
|
|
919
|
-
/** CSS height of the frame; without it chart.js keeps its aspect ratio. */
|
|
920
|
-
readonly height: import("@angular/core").InputSignal<string | undefined>;
|
|
921
|
-
/** Resize with the container. */
|
|
922
|
-
readonly responsive: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
923
|
-
readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
|
|
924
|
-
readonly ariaLabelledBy: import("@angular/core").InputSignal<string | undefined>;
|
|
925
|
-
/** Delay of a redraw after the theme changed, in ms; the style change is usually followed by more. */
|
|
926
|
-
readonly themeDelay: import("@angular/core").InputSignalWithTransform<number, unknown>;
|
|
927
|
-
/** A data point or dataset was clicked. */
|
|
928
|
-
readonly dataSelect: import("@angular/core").OutputEmitterRef<HxChartSelectEvent>;
|
|
929
|
-
constructor();
|
|
930
|
-
/** The chart.js instance, once it exists; `undefined` before chart.js has loaded. */
|
|
931
|
-
get chart(): HxChartInstance | undefined;
|
|
932
|
-
/** Redraws the chart, e.g. after the theme changed in a way the component cannot see. */
|
|
933
|
-
refresh(): void;
|
|
934
|
-
protected onClick(event: MouseEvent): void;
|
|
935
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<HxChart, never>;
|
|
936
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<HxChart, "hx-chart", never, {
|
|
937
|
-
"type": {
|
|
938
|
-
"alias": "type";
|
|
939
|
-
"required": false;
|
|
940
|
-
"isSignal": true;
|
|
941
|
-
};
|
|
942
|
-
"data": {
|
|
943
|
-
"alias": "data";
|
|
944
|
-
"required": false;
|
|
945
|
-
"isSignal": true;
|
|
946
|
-
};
|
|
947
|
-
"options": {
|
|
948
|
-
"alias": "options";
|
|
949
|
-
"required": false;
|
|
950
|
-
"isSignal": true;
|
|
951
|
-
};
|
|
952
|
-
"plugins": {
|
|
953
|
-
"alias": "plugins";
|
|
954
|
-
"required": false;
|
|
955
|
-
"isSignal": true;
|
|
956
|
-
};
|
|
957
|
-
"width": {
|
|
958
|
-
"alias": "width";
|
|
959
|
-
"required": false;
|
|
960
|
-
"isSignal": true;
|
|
961
|
-
};
|
|
962
|
-
"height": {
|
|
963
|
-
"alias": "height";
|
|
964
|
-
"required": false;
|
|
965
|
-
"isSignal": true;
|
|
966
|
-
};
|
|
967
|
-
"responsive": {
|
|
968
|
-
"alias": "responsive";
|
|
969
|
-
"required": false;
|
|
970
|
-
"isSignal": true;
|
|
971
|
-
};
|
|
972
|
-
"ariaLabel": {
|
|
973
|
-
"alias": "ariaLabel";
|
|
974
|
-
"required": false;
|
|
975
|
-
"isSignal": true;
|
|
976
|
-
};
|
|
977
|
-
"ariaLabelledBy": {
|
|
978
|
-
"alias": "ariaLabelledBy";
|
|
979
|
-
"required": false;
|
|
980
|
-
"isSignal": true;
|
|
981
|
-
};
|
|
982
|
-
"themeDelay": {
|
|
983
|
-
"alias": "themeDelay";
|
|
984
|
-
"required": false;
|
|
985
|
-
"isSignal": true;
|
|
986
|
-
};
|
|
987
|
-
}, {
|
|
988
|
-
"dataSelect": "dataSelect";
|
|
989
|
-
}, never, ["[hxChartFallback]"], true, never>;
|
|
990
|
-
}
|
|
991
860
|
type HxCheckboxSize = 'small' | 'medium' | 'large';
|
|
992
861
|
/**
|
|
993
862
|
* A native `<input type="checkbox">` drawn as a Helix checkbox (CSS only). It is a real checkbox: `checked`,
|
|
@@ -1156,6 +1025,8 @@ interface HxPageEvent {
|
|
|
1156
1025
|
/** The page, 0-based. */
|
|
1157
1026
|
page: number;
|
|
1158
1027
|
pageCount: number;
|
|
1028
|
+
/** Set when the "All" size is chosen: `rows` is then the number of all records (at least 1). */
|
|
1029
|
+
all?: true;
|
|
1159
1030
|
}
|
|
1160
1031
|
/**
|
|
1161
1032
|
* Page navigation for a list or table: first, previous, page links, next, last, and a rows-per-page select.
|
|
@@ -1176,7 +1047,7 @@ export declare class HxPaginator {
|
|
|
1176
1047
|
/** Index of the first record shown. */
|
|
1177
1048
|
readonly first: import("@angular/core").ModelSignal<number>;
|
|
1178
1049
|
/** Offers a rows-per-page select when given. */
|
|
1179
|
-
readonly rowsPerPageOptions: import("@angular/core").InputSignal<readonly number[] | undefined>;
|
|
1050
|
+
readonly rowsPerPageOptions: import("@angular/core").InputSignal<readonly (number | "all")[] | undefined>;
|
|
1180
1051
|
/** Page links shown at most (the current page stays in the middle). */
|
|
1181
1052
|
readonly pageLinkSize: import("@angular/core").InputSignalWithTransform<number, unknown>;
|
|
1182
1053
|
readonly showCurrentPageReport: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
@@ -1191,6 +1062,15 @@ export declare class HxPaginator {
|
|
|
1191
1062
|
/** `{page}` is replaced by the page number (1-based). */
|
|
1192
1063
|
readonly pageLabelTemplate: import("@angular/core").InputSignal<string>;
|
|
1193
1064
|
readonly rowsPerPageLabel: import("@angular/core").InputSignal<string>;
|
|
1065
|
+
/** The label of the `'all'` entry of `rowsPerPageOptions`. */
|
|
1066
|
+
readonly allLabel: import("@angular/core").InputSignal<string>;
|
|
1067
|
+
/** The "All" size is chosen: one page with every record; `rows` is left as it was. */
|
|
1068
|
+
readonly showAll: import("@angular/core").ModelSignal<boolean>;
|
|
1069
|
+
/** "All" is chosen and still offered by `rowsPerPageOptions`. */
|
|
1070
|
+
private readonly allSelected;
|
|
1071
|
+
/** The records per page in effect: all of them when "All" is chosen. */
|
|
1072
|
+
private readonly perPage;
|
|
1073
|
+
protected readonly rowsValue: import("@angular/core").Signal<number | "all">;
|
|
1194
1074
|
readonly pageChange: import("@angular/core").OutputEmitterRef<HxPageEvent>;
|
|
1195
1075
|
protected readonly pageCount: import("@angular/core").Signal<number>;
|
|
1196
1076
|
protected readonly page: import("@angular/core").Signal<number>;
|
|
@@ -1200,7 +1080,7 @@ export declare class HxPaginator {
|
|
|
1200
1080
|
protected readonly links: import("@angular/core").Signal<number[]>;
|
|
1201
1081
|
protected readonly rowsOptions: import("@angular/core").Signal<{
|
|
1202
1082
|
label: string;
|
|
1203
|
-
value: number;
|
|
1083
|
+
value: number | "all";
|
|
1204
1084
|
}[]>;
|
|
1205
1085
|
protected readonly report: import("@angular/core").Signal<string>;
|
|
1206
1086
|
protected pageLabel(page: number): string;
|
|
@@ -1285,9 +1165,20 @@ export declare class HxPaginator {
|
|
|
1285
1165
|
"required": false;
|
|
1286
1166
|
"isSignal": true;
|
|
1287
1167
|
};
|
|
1168
|
+
"allLabel": {
|
|
1169
|
+
"alias": "allLabel";
|
|
1170
|
+
"required": false;
|
|
1171
|
+
"isSignal": true;
|
|
1172
|
+
};
|
|
1173
|
+
"showAll": {
|
|
1174
|
+
"alias": "showAll";
|
|
1175
|
+
"required": false;
|
|
1176
|
+
"isSignal": true;
|
|
1177
|
+
};
|
|
1288
1178
|
}, {
|
|
1289
1179
|
"rows": "rowsChange";
|
|
1290
1180
|
"first": "firstChange";
|
|
1181
|
+
"showAll": "showAllChange";
|
|
1291
1182
|
"pageChange": "pageChange";
|
|
1292
1183
|
}, never, never, true, never>;
|
|
1293
1184
|
}
|
|
@@ -1359,6 +1250,8 @@ interface HxColumn {
|
|
|
1359
1250
|
field: string;
|
|
1360
1251
|
/** The header text. */
|
|
1361
1252
|
header: string;
|
|
1253
|
+
/** The `title` attribute of the header cell (a tooltip). */
|
|
1254
|
+
title?: string;
|
|
1362
1255
|
/** CSS width of the column (`8rem`, `20%`). */
|
|
1363
1256
|
width?: string;
|
|
1364
1257
|
/** Horizontal alignment of header and cells (the start edge by default). */
|
|
@@ -1367,7 +1260,13 @@ interface HxColumn {
|
|
|
1367
1260
|
sortable?: boolean;
|
|
1368
1261
|
/** The column gets a text filter in the filter row (`filterDisplay="row"`). */
|
|
1369
1262
|
filter?: boolean;
|
|
1263
|
+
/** The direction of the first click on the sort button (the table's `sortFirstOrder` by default). */
|
|
1264
|
+
sortFirstOrder?: HxSortFirstOrder;
|
|
1370
1265
|
}
|
|
1266
|
+
/** The direction a sort starts with. */
|
|
1267
|
+
type HxSortFirstOrder = 'asc' | 'desc';
|
|
1268
|
+
/** What `rowClass` may return: anything `[class]` accepts. */
|
|
1269
|
+
type HxRowClass = string | readonly string[] | Record<string, boolean | null | undefined> | null | undefined;
|
|
1371
1270
|
/** One sorted column: `order` 1 is ascending, -1 descending. */
|
|
1372
1271
|
interface HxSortMeta {
|
|
1373
1272
|
field: string;
|
|
@@ -1409,6 +1308,26 @@ export declare class HxCell {
|
|
|
1409
1308
|
};
|
|
1410
1309
|
}, {}, never, never, true, never>;
|
|
1411
1310
|
}
|
|
1311
|
+
/**
|
|
1312
|
+
* Extra content in the header of one column, beside the label and outside the sort button:
|
|
1313
|
+
* `<ng-template hxColumnHeader="price" let-column>…</ng-template>`. The context has the column (`$implicit`).
|
|
1314
|
+
*/
|
|
1315
|
+
export declare class HxColumnHeader {
|
|
1316
|
+
/** The `field` of the column. */
|
|
1317
|
+
readonly field: import("@angular/core").InputSignal<string>;
|
|
1318
|
+
readonly template: TemplateRef<HxColumnHeaderContext>;
|
|
1319
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<HxColumnHeader, never>;
|
|
1320
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<HxColumnHeader, "ng-template[hxColumnHeader]", never, {
|
|
1321
|
+
"field": {
|
|
1322
|
+
"alias": "hxColumnHeader";
|
|
1323
|
+
"required": true;
|
|
1324
|
+
"isSignal": true;
|
|
1325
|
+
};
|
|
1326
|
+
}, {}, never, never, true, never>;
|
|
1327
|
+
}
|
|
1328
|
+
interface HxColumnHeaderContext {
|
|
1329
|
+
$implicit: HxColumn;
|
|
1330
|
+
}
|
|
1412
1331
|
interface HxCellContext {
|
|
1413
1332
|
$implicit: unknown;
|
|
1414
1333
|
value: unknown;
|
|
@@ -1485,6 +1404,12 @@ export declare class HxDataTable implements OnInit {
|
|
|
1485
1404
|
/** Rows change colour under the pointer (default on). */
|
|
1486
1405
|
readonly hoverRows: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
1487
1406
|
readonly emptyMessage: import("@angular/core").InputSignal<string>;
|
|
1407
|
+
/** Classes for the `<tr>` of a row: a string, an array or an object, as for `[class]`. */
|
|
1408
|
+
readonly rowClass: import("@angular/core").InputSignal<((row: never) => HxRowClass) | undefined>;
|
|
1409
|
+
/** Text shown in a cell whose value is `null` or `undefined` (not for `0`, `false` or `''`). */
|
|
1410
|
+
readonly emptyValue: import("@angular/core").InputSignal<string>;
|
|
1411
|
+
/** The label of the `'all'` entry of `rowsPerPageOptions`. */
|
|
1412
|
+
readonly allLabel: import("@angular/core").InputSignal<string>;
|
|
1488
1413
|
/** Covers the table with a spinner and sets `aria-busy`. */
|
|
1489
1414
|
readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
1490
1415
|
/** Visible caption text above the table. */
|
|
@@ -1505,11 +1430,13 @@ export declare class HxDataTable implements OnInit {
|
|
|
1505
1430
|
readonly multiSortMeta: import("@angular/core").ModelSignal<HxSortMeta[]>;
|
|
1506
1431
|
/** Replaces the client-side sort. */
|
|
1507
1432
|
readonly sortFunction: import("@angular/core").InputSignal<HxSortFunction | undefined>;
|
|
1433
|
+
/** The direction of the first click on a sortable column; a column's own `sortFirstOrder` wins. */
|
|
1434
|
+
readonly sortFirstOrder: import("@angular/core").InputSignal<HxSortFirstOrder>;
|
|
1508
1435
|
/** Shows a paginator below the table. */
|
|
1509
1436
|
readonly paginator: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
1510
1437
|
readonly rows: import("@angular/core").ModelSignal<number>;
|
|
1511
1438
|
readonly first: import("@angular/core").ModelSignal<number>;
|
|
1512
|
-
readonly rowsPerPageOptions: import("@angular/core").InputSignal<readonly number[] | undefined>;
|
|
1439
|
+
readonly rowsPerPageOptions: import("@angular/core").InputSignal<readonly (number | "all")[] | undefined>;
|
|
1513
1440
|
readonly showCurrentPageReport: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
1514
1441
|
/** The rows are paged and sorted elsewhere: the table only shows `value` and emits `lazyLoad`. */
|
|
1515
1442
|
readonly lazy: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
@@ -1541,7 +1468,13 @@ export declare class HxDataTable implements OnInit {
|
|
|
1541
1468
|
readonly collapseLabel: import("@angular/core").InputSignal<string>;
|
|
1542
1469
|
protected readonly announcement: import("@angular/core").WritableSignal<string>;
|
|
1543
1470
|
private readonly globalText;
|
|
1471
|
+
/** The paginator's "All" size is chosen: every row is shown, whatever `rows` says. */
|
|
1472
|
+
private readonly showAll;
|
|
1473
|
+
/** A `rows` set from outside (or by the user) ends "All". */
|
|
1474
|
+
private readonly resetAll;
|
|
1475
|
+
private readonly allActive;
|
|
1544
1476
|
protected readonly cellTemplates: import("@angular/core").Signal<readonly HxCell[]>;
|
|
1477
|
+
protected readonly columnHeaderTemplates: import("@angular/core").Signal<readonly HxColumnHeader[]>;
|
|
1545
1478
|
protected readonly headerTemplate: import("@angular/core").Signal<HxTableHeader | undefined>;
|
|
1546
1479
|
protected readonly bodyTemplate: import("@angular/core").Signal<HxTableBody | undefined>;
|
|
1547
1480
|
protected readonly footerTemplate: import("@angular/core").Signal<HxTableFooter | undefined>;
|
|
@@ -1557,6 +1490,8 @@ export declare class HxDataTable implements OnInit {
|
|
|
1557
1490
|
/** The rows the table draws: sorted, then the current page. */
|
|
1558
1491
|
protected readonly visibleRows: import("@angular/core").Signal<readonly unknown[]>;
|
|
1559
1492
|
protected readonly cells: import("@angular/core").Signal<Map<string, TemplateRef<HxCellContext>>>;
|
|
1493
|
+
private readonly warnedFields;
|
|
1494
|
+
protected readonly columnHeaders: import("@angular/core").Signal<Map<string, TemplateRef<HxColumnHeaderContext>>>;
|
|
1560
1495
|
protected readonly scrolls: import("@angular/core").Signal<boolean>;
|
|
1561
1496
|
protected readonly hasCaption: import("@angular/core").Signal<boolean>;
|
|
1562
1497
|
protected readonly captionHidden: import("@angular/core").Signal<boolean>;
|
|
@@ -1588,11 +1523,12 @@ export declare class HxDataTable implements OnInit {
|
|
|
1588
1523
|
protected ariaSort(column: HxColumn): 'ascending' | 'descending' | 'none' | null;
|
|
1589
1524
|
/** The position (1-based) of a column in a multi-column sort, when more than one column is sorted. */
|
|
1590
1525
|
protected sortRank(column: HxColumn): number | null;
|
|
1591
|
-
/** Sorts by a column:
|
|
1526
|
+
/** Sorts by a column: the first order, then the opposite, then not at all (ascending first by default). */
|
|
1592
1527
|
sort(column: HxColumn): void;
|
|
1593
1528
|
protected onPage(event: HxPageEvent): void;
|
|
1594
1529
|
private emitLazy;
|
|
1595
1530
|
protected trackRow(row: unknown, index: number): unknown;
|
|
1531
|
+
protected rowClassOf(row: unknown): HxRowClass;
|
|
1596
1532
|
protected valueOf(row: unknown, column: HxColumn): unknown;
|
|
1597
1533
|
static ɵfac: i0.ɵɵFactoryDeclaration<HxDataTable, never>;
|
|
1598
1534
|
static ɵcmp: i0.ɵɵComponentDeclaration<HxDataTable, "hx-data-table", never, {
|
|
@@ -1636,6 +1572,21 @@ export declare class HxDataTable implements OnInit {
|
|
|
1636
1572
|
"required": false;
|
|
1637
1573
|
"isSignal": true;
|
|
1638
1574
|
};
|
|
1575
|
+
"rowClass": {
|
|
1576
|
+
"alias": "rowClass";
|
|
1577
|
+
"required": false;
|
|
1578
|
+
"isSignal": true;
|
|
1579
|
+
};
|
|
1580
|
+
"emptyValue": {
|
|
1581
|
+
"alias": "emptyValue";
|
|
1582
|
+
"required": false;
|
|
1583
|
+
"isSignal": true;
|
|
1584
|
+
};
|
|
1585
|
+
"allLabel": {
|
|
1586
|
+
"alias": "allLabel";
|
|
1587
|
+
"required": false;
|
|
1588
|
+
"isSignal": true;
|
|
1589
|
+
};
|
|
1639
1590
|
"loading": {
|
|
1640
1591
|
"alias": "loading";
|
|
1641
1592
|
"required": false;
|
|
@@ -1686,6 +1637,11 @@ export declare class HxDataTable implements OnInit {
|
|
|
1686
1637
|
"required": false;
|
|
1687
1638
|
"isSignal": true;
|
|
1688
1639
|
};
|
|
1640
|
+
"sortFirstOrder": {
|
|
1641
|
+
"alias": "sortFirstOrder";
|
|
1642
|
+
"required": false;
|
|
1643
|
+
"isSignal": true;
|
|
1644
|
+
};
|
|
1689
1645
|
"paginator": {
|
|
1690
1646
|
"alias": "paginator";
|
|
1691
1647
|
"required": false;
|
|
@@ -1796,7 +1752,7 @@ export declare class HxDataTable implements OnInit {
|
|
|
1796
1752
|
"selection": "selectionChange";
|
|
1797
1753
|
"filters": "filtersChange";
|
|
1798
1754
|
"expandedRowKeys": "expandedRowKeysChange";
|
|
1799
|
-
}, ["cellTemplates", "headerTemplate", "bodyTemplate", "footerTemplate", "captionTemplate", "expansionTemplate", "emptyTemplate"], never, true, never>;
|
|
1755
|
+
}, ["cellTemplates", "columnHeaderTemplates", "headerTemplate", "bodyTemplate", "footerTemplate", "captionTemplate", "expansionTemplate", "emptyTemplate"], never, true, never>;
|
|
1800
1756
|
}
|
|
1801
1757
|
type CalendarView = 'day' | 'month' | 'year';
|
|
1802
1758
|
interface DisabledRules {
|
|
@@ -2584,13 +2540,20 @@ interface HxDateTimeRangeValue {
|
|
|
2584
2540
|
from: Date | null;
|
|
2585
2541
|
to: Date | null;
|
|
2586
2542
|
}
|
|
2543
|
+
/** A relative range in the popup's preset list; `from` and `to` are read when it is chosen (`now` stays current). */
|
|
2544
|
+
interface HxDateTimeRangePreset {
|
|
2545
|
+
label: string;
|
|
2546
|
+
from: () => Date;
|
|
2547
|
+
to: () => Date;
|
|
2548
|
+
}
|
|
2587
2549
|
/**
|
|
2588
2550
|
* A from and a to date-time range in one field with one button. The field shows the range as one text
|
|
2589
2551
|
* (`1/1/2026 00:00 - 1/2/2026 00:15`); the popup holds one calendar (an inline range `hx-date-picker`) and a time picker for each end,
|
|
2590
2552
|
* from and to. The value is `{ from, to }` (`null` while a side is empty); `to` is never before `from`: the `to`
|
|
2591
2553
|
* time picker starts at `from` (including the time), the `from` time picker ends at `to`, and a choice that crosses the
|
|
2592
|
-
* other side moves it. The field is read-only
|
|
2593
|
-
* leaving it
|
|
2554
|
+
* other side moves it. The field is read-only unless `typeable`, which lets the range be typed in the field's
|
|
2555
|
+
* format (Enter or leaving the field commits it, an unreadable range puts the value back); the popup stays open
|
|
2556
|
+
* until Escape, an outside click or the focus leaving it.
|
|
2594
2557
|
*
|
|
2595
2558
|
* ```html
|
|
2596
2559
|
* <hx-date-time-range-picker [stepMinute]="15" [(ngModel)]="shift" />
|
|
@@ -2609,12 +2572,18 @@ export declare class HxDateTimeRangePicker implements ControlValueAccessor, Form
|
|
|
2609
2572
|
/** The text between the two dates in the field. */
|
|
2610
2573
|
readonly separator: import("@angular/core").InputSignal<string>;
|
|
2611
2574
|
readonly placeholder: import("@angular/core").InputSignal<string>;
|
|
2575
|
+
/** The name of the group of preset buttons. */
|
|
2576
|
+
readonly presetsLabel: import("@angular/core").InputSignal<string>;
|
|
2577
|
+
/** Ready-made ranges listed in the popup; choosing one fills the draft, Submit applies it. */
|
|
2578
|
+
readonly presets: import("@angular/core").InputSignal<readonly HxDateTimeRangePreset[]>;
|
|
2612
2579
|
readonly clearLabel: import("@angular/core").InputSignal<string>;
|
|
2613
2580
|
readonly cancelLabel: import("@angular/core").InputSignal<string>;
|
|
2614
2581
|
readonly submitLabel: import("@angular/core").InputSignal<string>;
|
|
2615
2582
|
readonly chooseLabel: import("@angular/core").InputSignal<string>;
|
|
2616
2583
|
/** The `id` of the text field, for a `<label for>`. */
|
|
2617
2584
|
readonly inputId: import("@angular/core").InputSignal<string | undefined>;
|
|
2585
|
+
/** The range can be typed into the field (`from separator to`); otherwise the field is read-only. */
|
|
2586
|
+
readonly typeable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
2618
2587
|
/** The time picker options, for both ends. */
|
|
2619
2588
|
readonly showTime: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
2620
2589
|
readonly timeOnly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
@@ -2655,6 +2624,7 @@ export declare class HxDateTimeRangePicker implements ControlValueAccessor, Form
|
|
|
2655
2624
|
/** The values of the two time pickers: a fresh `Date` per draft change (midnight while a side is empty). */
|
|
2656
2625
|
protected readonly fromValue: import("@angular/core").Signal<HxTimePickerValue>;
|
|
2657
2626
|
protected readonly toValue: import("@angular/core").Signal<HxTimePickerValue>;
|
|
2627
|
+
constructor();
|
|
2658
2628
|
writeValue(value: HxDateTimeRangeValue | null): void;
|
|
2659
2629
|
registerOnChange(fn: (value: HxDateTimeRangeValue) => void): void;
|
|
2660
2630
|
registerOnTouched(fn: () => void): void;
|
|
@@ -2665,10 +2635,17 @@ export declare class HxDateTimeRangePicker implements ControlValueAccessor, Form
|
|
|
2665
2635
|
protected toggle(): void;
|
|
2666
2636
|
protected close(refocus?: boolean): void;
|
|
2667
2637
|
protected onAttach(): void;
|
|
2638
|
+
/** A typeable field opens with the button, Arrow Down or Alt+Arrow Up (click, Enter and Space are for typing). */
|
|
2639
|
+
protected onFieldClick(): void;
|
|
2668
2640
|
protected onFieldKeydown(event: KeyboardEvent): void;
|
|
2641
|
+
protected onTyping(event: Event): void;
|
|
2642
|
+
/** Parses the typed range; an unreadable side, a disabled day or a time outside the limits puts the value back. */
|
|
2643
|
+
protected commitTyping(): void;
|
|
2669
2644
|
protected onOverlayKeydown(event: KeyboardEvent): void;
|
|
2670
2645
|
protected onOutsideClick(event: MouseEvent): void;
|
|
2671
2646
|
protected clear(): void;
|
|
2647
|
+
/** Puts a preset into the draft (the calendar and the time pickers show it); Submit commits it. */
|
|
2648
|
+
protected applyPreset(preset: HxDateTimeRangePreset): void;
|
|
2672
2649
|
protected submit(): void;
|
|
2673
2650
|
/** The focus left the control (field, button and popup): the popup closes and the control is touched. */
|
|
2674
2651
|
protected onHostFocusOut(event: FocusEvent): void;
|
|
@@ -2704,6 +2681,16 @@ export declare class HxDateTimeRangePicker implements ControlValueAccessor, Form
|
|
|
2704
2681
|
"required": false;
|
|
2705
2682
|
"isSignal": true;
|
|
2706
2683
|
};
|
|
2684
|
+
"presetsLabel": {
|
|
2685
|
+
"alias": "presetsLabel";
|
|
2686
|
+
"required": false;
|
|
2687
|
+
"isSignal": true;
|
|
2688
|
+
};
|
|
2689
|
+
"presets": {
|
|
2690
|
+
"alias": "presets";
|
|
2691
|
+
"required": false;
|
|
2692
|
+
"isSignal": true;
|
|
2693
|
+
};
|
|
2707
2694
|
"clearLabel": {
|
|
2708
2695
|
"alias": "clearLabel";
|
|
2709
2696
|
"required": false;
|
|
@@ -2729,6 +2716,11 @@ export declare class HxDateTimeRangePicker implements ControlValueAccessor, Form
|
|
|
2729
2716
|
"required": false;
|
|
2730
2717
|
"isSignal": true;
|
|
2731
2718
|
};
|
|
2719
|
+
"typeable": {
|
|
2720
|
+
"alias": "typeable";
|
|
2721
|
+
"required": false;
|
|
2722
|
+
"isSignal": true;
|
|
2723
|
+
};
|
|
2732
2724
|
"showTime": {
|
|
2733
2725
|
"alias": "showTime";
|
|
2734
2726
|
"required": false;
|
|
@@ -6133,6 +6125,11 @@ interface HxThemeOptions {
|
|
|
6133
6125
|
* `tokens.css`) or an attribute (`[data-theme="dark"]`).
|
|
6134
6126
|
*/
|
|
6135
6127
|
darkSelector?: string;
|
|
6128
|
+
/**
|
|
6129
|
+
* `false`: the host app owns the dark class/attribute (e.g. from `prefers-color-scheme`), HxTheme never writes it
|
|
6130
|
+
* to `<html>`. `dark()` still follows `setDark()` for the colour overrides. Default `true`.
|
|
6131
|
+
*/
|
|
6132
|
+
manageDark?: boolean;
|
|
6136
6133
|
/** Where the choice is remembered (localStorage). `null` (the default) remembers nothing. */
|
|
6137
6134
|
storageKey?: string | null;
|
|
6138
6135
|
/** Dark mode when nothing is remembered; by default the system setting (`prefers-color-scheme`). */
|
|
@@ -6700,4 +6697,4 @@ export declare class HxTree {
|
|
|
6700
6697
|
"nodeCollapse": "nodeCollapse";
|
|
6701
6698
|
}, ["template"], never, true, never>;
|
|
6702
6699
|
}
|
|
6703
|
-
export type { HxAccordionValue, HxAutoCompleteEvent, HxAutoCompleteSize, HxAvatarShape, HxAvatarSize, HxBadgeSeverity, HxBadgeSize, HxBreadcrumbItem, HxButtonSeverity, HxButtonSize, HxButtonVariant, HxCarouselItemContext, HxCarouselOrientation, HxCarouselResponsiveOption, HxCellContext,
|
|
6700
|
+
export type { HxAccordionValue, HxAutoCompleteEvent, HxAutoCompleteSize, HxAvatarShape, HxAvatarSize, HxBadgeSeverity, HxBadgeSize, HxBreadcrumbItem, HxButtonSeverity, HxButtonSize, HxButtonVariant, HxCarouselItemContext, HxCarouselOrientation, HxCarouselResponsiveOption, HxCellContext, HxCheckboxSize, HxColumn, HxColumnAlign, HxColumnHeaderContext, HxConfirmation, HxDatePickerSelectionMode, HxDatePickerValue, HxDateTimePickerValue, HxDateTimeRangePreset, HxDateTimeRangeValue, HxDialogConfig, HxDialogPosition, HxDividerAlign, HxDividerLayout, HxDividerType, HxDrawerPosition, HxFileUploadMode, HxFloatLabelVariant, HxGalleriaItem, HxGalleriaItemContext, HxGalleriaThumbnailsPosition, HxIconPosition, HxInputNumberButtonLayout, HxInputNumberMode, HxInputNumberSize, HxInputNumberVariant, HxInputSize, HxInputVariant, HxLazyLoadEvent, HxMenuItem, HxMenuItemCommandEvent, HxMessageSeverity, HxMessageSize, HxMessageVariant, HxMultiSelectDisplay, HxMultiSelectSize, HxMultiSelectVariant, HxPageEvent, HxPrimaryColor, HxProgressMode, HxRadioSize, HxRowClass, HxSelectButtonSize, HxSelectItem, HxSelectSize, HxSelectVariant, HxSelectionMode, HxSkeletonAnimation, HxSkeletonShape, HxSliderOrientation, HxSliderValue, HxSortFirstOrder, HxSortFunction, HxSortMeta, HxSortMode, HxStepContentContext, HxStepValue, HxSurface, HxTableColumnsContext, HxTableRowContext, HxTableSize, HxTagSeverity, HxThemeOptions, HxTimePickerValue, HxTimelineAlign, HxTimelineContext, HxTimelineLayout, HxToastMessage, HxToastMessageInput, HxToastPosition, HxToastSeverity, HxToggleButtonSize, HxTooltipEvent, HxTooltipPosition, HxTreeFilterMode, HxTreeNode, HxTreeNodeContext, HxTreeNodeEvent, HxTreeSelection, HxTreeSelectionMode };
|