@gravionlabs/helix-ui 22.2.5 → 22.2.7

package/README.md

@@ -19,6 +19,23 @@ npm install @gravionlabs/helix-ui
 
 Dark mode: tokens switch under the `app-dark` class on `<html>`, as in `helix-shell`.
 
+### Chart
+
+`HxChart` is in the secondary entry point `@gravionlabs/helix-ui/chart`, the only place that imports chart.js. chart.js
+is an optional peer dependency: install it only when you use the chart. An app without chart.js builds without any
+extra configuration.
+
+```bash
+npm install chart.js
+```
+
+```ts
+import { HxChart } from '@gravionlabs/helix-ui/chart';
+```
+
+**Breaking change:** `HxChart`, `HX_CHART_LOADER` and the `HxChart*` types are no longer exported from
+`@gravionlabs/helix-ui`; import them from `@gravionlabs/helix-ui/chart`.
+
 ## Components
 
 | Component | Selector | |
@@ -51,7 +68,7 @@ Dark mode: tokens switch under the `app-dark` class on `<html>`, as in `helix-sh
 | `HxSplitButton` | `hx-split-button` | default action plus an `hx-menu` of related actions; severity, variant, size, rounded, raised |
 | `HxStepper`, `HxStepList`, `HxStep`, `HxStepPanels`, `HxStepPanel` | `hx-stepper` … | steps with panels: completed/active state, linear mode, `activateCallback`, lazy panels |
 | `HxButtonGroup` | `hx-button-group` | joins `hx-button`s: square inner corners, shared borders, `role=group` |
-| `HxChart` | `hx-chart` | chart.js with colours, grid and font from the tokens; optional peer dependency loaded on demand, redraws on theme change, canvas fallback slot |
+| `HxChart` | `hx-chart` | from `@gravionlabs/helix-ui/chart`: chart.js with colours, grid and font from the tokens; optional peer dependency loaded on demand, redraws on theme change, canvas fallback slot |
 | `HxDialog`, `HxDialogService`, `HxDialogRef` | `hx-dialog` | modal or non-modal dialog on the CDK dialog; declarative with `[(visible)]` or opened as a component from a service with data and a result |
 | `HxDrawer` | `hx-drawer` | panel that slides in from an edge, same dialog semantics as `hx-dialog`; modal, full screen, reduced motion |
 | `HxPopover` | `hx-popover` | anchored panel with arrow: `toggle(event, target)`, outside click and Escape close, non-modal dialog with focus in and back |
@@ -69,6 +86,9 @@ Dark mode: tokens switch under the `app-dark` class on `<html>`, as in `helix-sh
 | `HxFieldset` | `hx-fieldset` | native fieldset and legend, optional collapse with a legend button |
 | `HxPanel` | `hx-panel` | titled container, optional collapse with a toggle button, header and footer slots |
 | `HxFileUpload` | `hx-file-upload` | choose and drop files, list, validation messages, progress; no HTTP, the app uploads |
+| `HxDateTimeRangePicker` | `hx-date-time-range-picker` | date-time range in one field with one popup calendar and a time row per end (`{ from, to }`), same time options as the time picker, all three forms APIs |
+| `HxDateTimePicker` | `hx-date-time-picker` | date and time in one field: a calendar popup (or inline) with a time row under it (`Date`), 24 h or 12 h, hour only, steps, `minDate`/`maxDate` with the time, typing, all three forms APIs |
+| `HxTimePicker` | `hx-time-picker` | time field with a time row popup or inline (`Date` today at that time), 24 h or 12 h, hour only, steps, `minTime`/`maxTime`, typing, all three forms APIs |
 | `HxDatePicker` | `hx-date-picker` | date field with a calendar popup or inline: single, range or multiple days, typing, month and year views, all three forms APIs |
 | `HxAutoComplete` | `hx-auto-complete` | text field with suggestions from `(complete)`, chips, dropdown, all three forms APIs |
 | `HxMultiSelect` | `hx-multi-select` | select for several values: comma or chips, filter, select all, all three forms APIs |

package/chart/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/gravionlabs-helix-ui-chart.mjs",
+  "typings": "../types/gravionlabs-helix-ui-chart.d.ts"
+}