@gravionlabs/helix-ui 22.2.5 → 22.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravionlabs/helix-ui",
-  "version": "22.2.5",
+  "version": "22.2.7",
   "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,26 @@
     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;
+  }
+
   /* sortable headers: a button that fills the header cell */
   .hx-data-table-sort {
     display: inline-flex;
@@ -2268,6 +2288,260 @@
     outline: var(--h-datepicker-date-focus-ring-width) var(--h-datepicker-date-focus-ring-style) var(--h-datepicker-date-focus-ring-color);
   }
 
+  /* date-time-picker */
+  /*
+   * DateTimePicker: `<hx-date-time-picker>`. The field, button and popup of the date picker with the calendar and a
+   * time row inside; styled by `date-picker.scss` (`hx-date-picker-*`) and `time-row.scss`. Every colour and size comes from the
+   * `--h-datepicker-*` and `--h-inputtext-*` tokens.
+   */
+  .hx-date-time-picker {
+    display: inline-block;
+  }
+
+  .hx-date-time-picker:not(.hx-date-time-picker-inline) {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .hx-date-time-picker-field {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .hx-date-time-picker-panel {
+    box-sizing: border-box;
+    min-width: 17rem;
+    padding: var(--h-datepicker-panel-padding);
+    border: 1px solid var(--h-datepicker-panel-border-color);
+    border-radius: var(--h-datepicker-panel-border-radius);
+    background: var(--h-datepicker-panel-background);
+    color: var(--h-datepicker-panel-color);
+  }
+
+  .hx-date-time-picker-popup .hx-date-time-picker-panel {
+    border-radius: var(--h-datepicker-panel-border-radius) var(--h-datepicker-panel-border-radius) 0 0;
+  }
+
+  .hx-date-time-picker-popup .hx-date-time-picker-panel:last-child {
+    border-radius: var(--h-datepicker-panel-border-radius);
+  }
+
+  .hx-date-time-picker-input {
+    box-sizing: border-box;
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: var(--h-inputtext-padding-y) var(--h-inputtext-padding-x);
+    border: 1px solid var(--h-inputtext-border-color);
+    border-radius: var(--h-inputtext-border-radius);
+    background: var(--h-inputtext-background);
+    color: var(--h-inputtext-color);
+    box-shadow: var(--h-inputtext-shadow);
+    font: inherit;
+    font-size: 1rem;
+    outline: 0 none;
+    transition: border-color var(--h-datepicker-transition-duration), box-shadow var(--h-datepicker-transition-duration);
+  }
+
+  .hx-date-time-picker-input::placeholder {
+    color: var(--h-inputtext-placeholder-color);
+  }
+
+  .hx-date-time-picker-input:enabled:hover {
+    border-color: var(--h-inputtext-hover-border-color);
+  }
+
+  .hx-date-time-picker-input:enabled:focus,
+  .hx-date-time-picker-open .hx-date-time-picker-input {
+    border-color: var(--h-inputtext-focus-border-color);
+    outline: var(--h-inputtext-focus-ring-width) var(--h-inputtext-focus-ring-style) var(--h-inputtext-focus-ring-color);
+    outline-offset: var(--h-inputtext-focus-ring-offset);
+    box-shadow: var(--h-inputtext-focus-ring-shadow);
+  }
+
+  .hx-date-time-picker-input:disabled {
+    background: var(--h-inputtext-disabled-background);
+    color: var(--h-inputtext-disabled-color);
+  }
+
+  .hx-date-time-picker-invalid .hx-date-time-picker-input,
+  .hx-date-time-picker.ng-invalid.ng-touched .hx-date-time-picker-input,
+  .hx-date-time-picker-input[aria-invalid=true] {
+    border-color: var(--h-inputtext-invalid-border-color);
+  }
+
+  .hx-date-time-picker-invalid .hx-date-time-picker-panel,
+  .hx-date-time-picker.ng-invalid.ng-touched .hx-date-time-picker-panel {
+    border-color: var(--h-form-field-invalid-border-color);
+  }
+
+  .hx-date-time-picker-has-icon .hx-date-time-picker-input {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .hx-date-time-picker-disabled {
+    opacity: 0.6;
+  }
+
+  .hx-date-time-picker-trigger {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: var(--h-datepicker-dropdown-width);
+    border: 1px solid var(--h-datepicker-dropdown-border-color);
+    border-inline-start: 0;
+    border-start-end-radius: var(--h-datepicker-dropdown-border-radius);
+    border-end-end-radius: var(--h-datepicker-dropdown-border-radius);
+    background: var(--h-datepicker-dropdown-background);
+    color: var(--h-datepicker-dropdown-color);
+    cursor: pointer;
+    outline: 0 none;
+  }
+
+  .hx-date-time-picker-trigger:not(:disabled):hover {
+    border-color: var(--h-datepicker-dropdown-hover-border-color);
+    background: var(--h-datepicker-dropdown-hover-background);
+    color: var(--h-datepicker-dropdown-hover-color);
+  }
+
+  .hx-date-time-picker-trigger:focus-visible {
+    outline: var(--h-datepicker-dropdown-focus-ring-width) var(--h-datepicker-dropdown-focus-ring-style) var(--h-datepicker-dropdown-focus-ring-color);
+    outline-offset: var(--h-datepicker-dropdown-focus-ring-offset);
+    box-shadow: var(--h-datepicker-dropdown-focus-ring-shadow);
+  }
+
+  .hx-date-time-picker-trigger-icon {
+    display: inline-block;
+    flex: none;
+    width: 1rem;
+    height: 1rem;
+    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='M5 6h14a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1ZM4 10.5h16M8.5 3.5v4M15.5 3.5v4'/%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='M5 6h14a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1ZM4 10.5h16M8.5 3.5v4M15.5 3.5v4'/%3E%3C/svg%3E") center/contain no-repeat;
+  }
+
+  .hx-date-time-picker-popup {
+    box-shadow: var(--h-datepicker-panel-shadow);
+    border-radius: var(--h-datepicker-panel-border-radius);
+    background: var(--h-datepicker-panel-background);
+    color: var(--h-datepicker-panel-color);
+    font-size: 1rem;
+  }
+
+  .hx-date-time-picker-buttonbar {
+    display: flex;
+    justify-content: space-between;
+    padding: var(--h-datepicker-buttonbar-padding);
+    border: 1px solid var(--h-datepicker-buttonbar-border-color);
+    border-top: 0;
+    border-radius: 0 0 var(--h-datepicker-panel-border-radius) var(--h-datepicker-panel-border-radius);
+  }
+
+  .hx-date-time-picker-button {
+    padding: var(--h-datepicker-select-month-padding);
+    border: 0;
+    border-radius: var(--h-datepicker-select-month-border-radius);
+    background: transparent;
+    color: var(--h-datepicker-select-month-color);
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .hx-date-time-picker-button:hover {
+    background: var(--h-datepicker-select-month-hover-background);
+  }
+
+  /* date-time-range-picker */
+  /*
+   * DateTimeRangePicker: `<hx-date-time-range-picker>`. One read-only field with a button (styled by `date-picker.scss`)
+   * and a popup with one calendar for the range and an inline `hx-time-picker` for each end; every colour and size comes from the
+   * date picker and input tokens.
+   */
+  .hx-date-time-range-picker {
+    display: block;
+    position: relative;
+  }
+
+  .hx-date-time-range-picker .hx-date-time-range-picker-control {
+    display: flex;
+    width: 100%;
+  }
+
+  .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 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--h-datepicker-title-gap);
+    padding: var(--h-datepicker-panel-padding);
+  }
+
+  .hx-date-time-range-picker-times {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    gap: var(--h-datepicker-title-gap);
+  }
+
+  /* from and to side by side: the name above the time, the arrows beside the value */
+  .hx-date-time-range-picker-time {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--h-datepicker-title-gap);
+  }
+
+  .hx-date-time-range-picker-caption {
+    font-weight: var(--h-datepicker-title-font-weight);
+  }
+
+  .hx-date-time-range-picker-popup .hx-date-picker-time {
+    padding: 0;
+  }
+
+  .hx-date-time-range-picker-popup .hx-date-picker-time-column {
+    flex-direction: row-reverse;
+  }
+
+  .hx-date-time-range-picker-popup .hx-date-picker-time-up-icon {
+    transform: rotate(90deg);
+  }
+
+  .hx-date-time-range-picker-popup .hx-date-picker-time-down-icon {
+    transform: rotate(90deg);
+  }
+
+  .hx-date-time-range-picker-spacer {
+    flex: 1 1 auto;
+  }
+
+  .hx-date-time-range-picker-footer {
+    gap: var(--h-datepicker-title-gap);
+  }
+
+  .hx-date-time-range-picker-submit {
+    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
@@ -6904,6 +7178,253 @@
     font-size: var(--h-tag-icon-size);
   }
 
+  /* time-picker */
+  /*
+   * TimePicker: `<hx-time-picker>`. The field, button and popup of the date picker with a time row inside; the
+   * columns are styled by `time-row.scss` (`hx-date-picker-time-*`). Every colour and size comes from the
+   * `--h-datepicker-*` and `--h-inputtext-*` tokens.
+   */
+  .hx-time-picker {
+    display: inline-block;
+  }
+
+  .hx-time-picker:not(.hx-time-picker-inline) {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .hx-time-picker-field {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .hx-time-picker-panel {
+    box-sizing: border-box;
+    padding: var(--h-datepicker-panel-padding);
+    border: 1px solid var(--h-datepicker-panel-border-color);
+    border-radius: var(--h-datepicker-panel-border-radius);
+    background: var(--h-datepicker-panel-background);
+    color: var(--h-datepicker-panel-color);
+  }
+
+  .hx-time-picker-popup .hx-time-picker-panel {
+    border-radius: var(--h-datepicker-panel-border-radius) var(--h-datepicker-panel-border-radius) 0 0;
+  }
+
+  .hx-time-picker-popup .hx-time-picker-panel:last-child {
+    border-radius: var(--h-datepicker-panel-border-radius);
+  }
+
+  .hx-time-picker-input {
+    box-sizing: border-box;
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: var(--h-inputtext-padding-y) var(--h-inputtext-padding-x);
+    border: 1px solid var(--h-inputtext-border-color);
+    border-radius: var(--h-inputtext-border-radius);
+    background: var(--h-inputtext-background);
+    color: var(--h-inputtext-color);
+    box-shadow: var(--h-inputtext-shadow);
+    font: inherit;
+    font-size: 1rem;
+    outline: 0 none;
+    transition: border-color var(--h-datepicker-transition-duration), box-shadow var(--h-datepicker-transition-duration);
+  }
+
+  .hx-time-picker-input::placeholder {
+    color: var(--h-inputtext-placeholder-color);
+  }
+
+  .hx-time-picker-input:enabled:hover {
+    border-color: var(--h-inputtext-hover-border-color);
+  }
+
+  .hx-time-picker-input:enabled:focus,
+  .hx-time-picker-open .hx-time-picker-input {
+    border-color: var(--h-inputtext-focus-border-color);
+    outline: var(--h-inputtext-focus-ring-width) var(--h-inputtext-focus-ring-style) var(--h-inputtext-focus-ring-color);
+    outline-offset: var(--h-inputtext-focus-ring-offset);
+    box-shadow: var(--h-inputtext-focus-ring-shadow);
+  }
+
+  .hx-time-picker-input:disabled {
+    background: var(--h-inputtext-disabled-background);
+    color: var(--h-inputtext-disabled-color);
+  }
+
+  .hx-time-picker-invalid .hx-time-picker-input,
+  .hx-time-picker.ng-invalid.ng-touched .hx-time-picker-input,
+  .hx-time-picker-input[aria-invalid=true] {
+    border-color: var(--h-inputtext-invalid-border-color);
+  }
+
+  .hx-time-picker-invalid .hx-time-picker-panel,
+  .hx-time-picker.ng-invalid.ng-touched .hx-time-picker-panel {
+    border-color: var(--h-form-field-invalid-border-color);
+  }
+
+  .hx-time-picker-has-icon .hx-time-picker-input {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .hx-time-picker-disabled {
+    opacity: 0.6;
+  }
+
+  .hx-time-picker-disabled .hx-date-picker-time-button {
+    cursor: default;
+  }
+
+  .hx-time-picker-trigger {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: var(--h-datepicker-dropdown-width);
+    border: 1px solid var(--h-datepicker-dropdown-border-color);
+    border-inline-start: 0;
+    border-start-end-radius: var(--h-datepicker-dropdown-border-radius);
+    border-end-end-radius: var(--h-datepicker-dropdown-border-radius);
+    background: var(--h-datepicker-dropdown-background);
+    color: var(--h-datepicker-dropdown-color);
+    cursor: pointer;
+    outline: 0 none;
+  }
+
+  .hx-time-picker-trigger:not(:disabled):hover {
+    border-color: var(--h-datepicker-dropdown-hover-border-color);
+    background: var(--h-datepicker-dropdown-hover-background);
+    color: var(--h-datepicker-dropdown-hover-color);
+  }
+
+  .hx-time-picker-trigger:focus-visible {
+    outline: var(--h-datepicker-dropdown-focus-ring-width) var(--h-datepicker-dropdown-focus-ring-style) var(--h-datepicker-dropdown-focus-ring-color);
+    outline-offset: var(--h-datepicker-dropdown-focus-ring-offset);
+    box-shadow: var(--h-datepicker-dropdown-focus-ring-shadow);
+  }
+
+  .hx-time-picker-trigger-icon {
+    display: inline-block;
+    flex: none;
+    width: 1rem;
+    height: 1rem;
+    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='M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17ZM12 7.5V12l3 2'/%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='M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17ZM12 7.5V12l3 2'/%3E%3C/svg%3E") center/contain no-repeat;
+  }
+
+  .hx-time-picker-popup {
+    box-shadow: var(--h-datepicker-panel-shadow);
+    border-radius: var(--h-datepicker-panel-border-radius);
+    background: var(--h-datepicker-panel-background);
+    color: var(--h-datepicker-panel-color);
+    font-size: 1rem;
+  }
+
+  .hx-time-picker-buttonbar {
+    display: flex;
+    justify-content: space-between;
+    padding: var(--h-datepicker-buttonbar-padding);
+    border: 1px solid var(--h-datepicker-buttonbar-border-color);
+    border-top: 0;
+    border-radius: 0 0 var(--h-datepicker-panel-border-radius) var(--h-datepicker-panel-border-radius);
+  }
+
+  .hx-time-picker-button {
+    padding: var(--h-datepicker-select-month-padding);
+    border: 0;
+    border-radius: var(--h-datepicker-select-month-border-radius);
+    background: transparent;
+    color: var(--h-datepicker-select-month-color);
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .hx-time-picker-button:hover {
+    background: var(--h-datepicker-select-month-hover-background);
+  }
+
+  /* time-row */
+  /*
+   * Time row: the columns of `<hx-time-row>` (hour, minute, second, AM/PM) inside the time picker, the date-time
+   * picker and the date-time range picker. Every colour and size comes from the `--h-datepicker-*` tokens.
+   */
+  .hx-date-picker-time {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--h-datepicker-title-gap);
+    padding: var(--h-datepicker-header-padding);
+  }
+
+  .hx-date-picker-time-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .hx-date-picker-time-button,
+  .hx-date-picker-time-spin {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--h-datepicker-date-width);
+    height: var(--h-datepicker-date-height);
+    border: 0;
+    border-radius: var(--h-datepicker-date-border-radius);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    outline: 0 none;
+  }
+
+  .hx-date-picker-time-button {
+    cursor: pointer;
+  }
+
+  .hx-date-picker-time-spin {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .hx-date-picker-time-button:not(:disabled):hover {
+    background: var(--h-datepicker-date-hover-background);
+    color: var(--h-datepicker-date-hover-color);
+  }
+
+  .hx-date-picker-time-button:focus-visible,
+  .hx-date-picker-time-spin:focus-visible {
+    outline: var(--h-datepicker-date-focus-ring-width) var(--h-datepicker-date-focus-ring-style) var(--h-datepicker-date-focus-ring-color);
+    outline-offset: var(--h-datepicker-date-focus-ring-offset);
+    box-shadow: var(--h-datepicker-date-focus-ring-shadow);
+  }
+
+  .hx-date-picker-time-up-icon {
+    display: inline-block;
+    flex: none;
+    width: 1rem;
+    height: 1rem;
+    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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
+  }
+
+  .hx-date-picker-time-down-icon {
+    display: inline-block;
+    flex: none;
+    width: 1rem;
+    height: 1rem;
+    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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
+  }
+
+  .hx-date-picker-disabled .hx-date-picker-time-button,
+  .hx-date-time-picker-disabled .hx-date-picker-time-button {
+    cursor: default;
+  }
+
   /* timeline */
   /*
    * Timeline: `<hx-timeline>`. Events in an ordered list, each a row (vertical) or column (horizontal) of the opposite

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 };