@gravionlabs/helix-ui 22.2.14 → 22.2.15

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.
Files changed (4) hide show
  1. package/README.md +61 -61
  2. package/core.css +7 -5
  3. package/package.json +1 -1
  4. package/styles.css +7 -5
package/README.md CHANGED
@@ -38,67 +38,67 @@ import { HxChart } from '@gravionlabs/helix-ui/chart';
38
38
 
39
39
  ## Components
40
40
 
41
- | Component | Selector | |
42
- | --- | --- | --- |
43
- | `HxButton` | `button[hx-button]`, `a[hx-button]` | variants, severities, sizes, loading, icon-only |
44
- | `HxInput` | `input[hx-input]`, `textarea[hx-input]` | outlined / filled, sizes, invalid, textarea `autoResize` |
45
- | `HxCheckbox` | `input[hx-checkbox]` | native checkbox, indeterminate |
46
- | `HxRadio` | `input[hx-radio]` | native radio |
47
- | `HxSelect` | `hx-select` | CDK listbox in an overlay, all three forms APIs |
48
- | `HxDivider` | `hx-divider` | horizontal/vertical, labelled |
49
- | `HxTooltip` | `[hx-tooltip]` | CDK overlay, hover and focus |
50
- | `HxAvatar`, `HxAvatarGroup` | `hx-avatar`, `hx-avatar-group` | picture, icon or initials; sizes, shapes; the group overlaps its avatars |
51
- | `HxBadge`, `HxOverlayBadge` | `hx-badge`, `hx-overlay-badge` | count or dot marker, severities and sizes; the overlay variant sits on a corner of the wrapped element |
52
- | `HxBreadcrumb` | `hx-breadcrumb` | router links, home item |
53
- | `HxDataTable`, `HxColumn`, `HxCell`, `HxTableHeader`, `HxTableBody`, `HxTableFooter`, `HxTableCaption`, `HxTableEmpty`, `HxRowExpansion` | `hx-data-table` … | column model, cell and row templates, sorting (single or multiple), paging, lazy loading, selection (checkbox, single, meta key), global and column filters, row expansion, caption, empty and loading state, scrolling body with a sticky header |
54
- | `HxCarousel`, `HxCarouselItem` | `hx-carousel` | slides over items: numVisible/numScroll, responsive counts, circular, autoplay, indicators, keyboard |
55
- | `HxGalleria`, `HxGalleriaItemTemplate`, `HxGalleriaThumbnail`, `HxGalleriaCaption` | `hx-galleria` | image gallery: stage, thumbnail strip, captions, indicators, autoplay, full screen in a modal dialog |
56
- | `HxImage`, `HxImageIndicator` | `hx-image` | picture with a modal preview: rotate, zoom, close; labelled toolbar |
57
- | `HxPaginator` | `hx-paginator` | first/previous/page links/next/last, rows per page, current page report; `first` and `rows` models |
58
- | `HxIconField`, `HxInputIcon` | `hx-icon-field`, `[hx-input-icon]` | icon on the start or end edge of a text field |
59
- | `HxFloatLabel` | `hx-float-label` | a label that sits in the field and floats up on focus or a value (`over`, `in`, `on`) |
60
- | `HxInputGroup`, `HxInputGroupAddon` | `hx-input-group`, `hx-input-group-addon` | joins fields, selects, buttons and addons |
61
- | `HxInputNumber` | `hx-input-number` | locale formatting, step buttons, all three forms APIs |
62
- | `HxPassword` | `hx-password` | show/hide toggle, all three forms APIs |
63
- | `HxCard` | `hx-card` | surface with header, title (a heading), subtitle, content and footer slots |
64
- | `HxProgressBar`, `HxProgressSpinner` | `hx-progress-bar`, `hx-progress-spinner` | determinate and indeterminate bar, spinner; `role=progressbar`, reduced motion |
65
- | `HxTree` | `hx-tree` | hierarchical data: selection (single, multiple, checkbox), filter, lazy children, node template, WAI-ARIA tree keyboard |
66
- | `HxTimeline` | `hx-timeline` | events on a line: vertical or horizontal, left/right/alternate, content, opposite and marker templates |
67
- | `HxSkeleton` | `hx-skeleton` | loading placeholder: rectangle or circle, any size, wave (off under reduced motion), `aria-hidden` |
68
- | `HxSplitButton` | `hx-split-button` | default action plus an `hx-menu` of related actions; severity, variant, size, rounded, raised |
69
- | `HxStepper`, `HxStepList`, `HxStep`, `HxStepPanels`, `HxStepPanel` | `hx-stepper` … | steps with panels: completed/active state, linear mode, `activateCallback`, lazy panels |
70
- | `HxButtonGroup` | `hx-button-group` | joins `hx-button`s: square inner corners, shared borders, `role=group` |
71
- | `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 |
72
- | `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 |
73
- | `HxDrawer` | `hx-drawer` | panel that slides in from an edge, same dialog semantics as `hx-dialog`; modal, full screen, reduced motion |
74
- | `HxPopover` | `hx-popover` | anchored panel with arrow: `toggle(event, target)`, outside click and Escape close, non-modal dialog with focus in and back |
75
- | `HxConfirmationService`, `HxConfirmDialog`, `HxConfirmPopup` | `hx-confirm-dialog`, `hx-confirm-popup` | ask the user to confirm: centred `alertdialog` or a popup anchored to a target; `confirm()` with callbacks or `confirmAsync()` |
76
- | `HxTable` | `table[hx-table]` | native table styles: caption, header, body, footer, striped, gridlines, hover, sizes, sticky header; no behaviour (data grids use AG Grid) |
77
- | `HxChip` | `hx-chip` | entity pill with picture or icon, removable by button, Backspace or Delete |
78
- | `HxTag` | `hx-tag` | label for a category or status: severities, rounded, decorative icon |
79
- | `HxTabs`, `HxTabList`, `HxTab`, `HxTabPanels`, `HxTabPanel` | `hx-tabs` … | WAI-ARIA tabs: roving tabindex, automatic activation, lazy panels, scrollable list |
80
- | `HxToast`, `HxMessageService` | `hx-toast` | short messages from a service, live regions, pause on hover and focus, keys and positions |
81
- | `HxMenubar` | `hx-menubar` | horizontal menu with dropdown submenus on the CDK menubar, collapses into a button below a breakpoint |
82
- | `HxMenu` | `hx-menu` | menu of `HxMenuItem`s, inline or popup, group headings and nested submenus on the CDK menu |
83
- | `HxMessage` | `hx-message` | inline message: severity, filled/outlined/simple, icon, closable, life |
84
- | `HxToolbar` | `hx-toolbar` | start, center and end areas that wrap on small screens; no toolbar role |
85
- | `HxAccordion`, `HxAccordionPanel`, `HxAccordionHeader`, `HxAccordionContent` | `hx-accordion` … | WAI-ARIA accordion on the CDK, single or multiple |
86
- | `HxFieldset` | `hx-fieldset` | native fieldset and legend, optional collapse with a legend button |
87
- | `HxPanel` | `hx-panel` | titled container, optional collapse with a toggle button, header and footer slots |
88
- | `HxFileUpload` | `hx-file-upload` | choose and drop files, list, validation messages, progress; no HTTP, the app uploads |
89
- | `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 |
90
- | `HxDateRangeQuickSelect` | `hx-date-range-quick-select` | Kibana-style quick select for a date range: Last/Next N unit, commonly and recently used ranges, a start and an end editor (absolute, relative, now), date-math `expression` model, all three forms APIs |
91
- | `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 |
92
- | `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 |
93
- | `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 |
94
- | `HxAutoComplete` | `hx-auto-complete` | text field with suggestions from `(complete)`, chips, dropdown, all three forms APIs |
95
- | `HxMultiSelect` | `hx-multi-select` | select for several values: comma or chips, filter, select all, all three forms APIs |
96
- | `HxListbox` | `hx-listbox` | inline single or multiple list on the CDK listbox, filter, checkmark, all three forms APIs |
97
- | `HxRating` | `hx-rating` | star rating as a radio group, read only as an image, all three forms APIs |
98
- | `HxSlider` | `hx-slider` | one value or a range on native range inputs, horizontal or vertical, all three forms APIs |
99
- | `HxToggleButton` | `hx-toggle-button` | on/off button with labels and icons, all three forms APIs |
100
- | `HxSelectButton` | `hx-select-button` | single or multiple, all three forms APIs |
101
- | `HxSwitch` | `input[hx-switch]` | native checkbox with `role="switch"` |
41
+ | Component | Selector | |
42
+ | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
43
+ | `HxButton` | `button[hx-button]`, `a[hx-button]` | variants, severities, sizes, loading, icon-only |
44
+ | `HxInput` | `input[hx-input]`, `textarea[hx-input]` | outlined / filled, sizes, invalid, textarea `autoResize` |
45
+ | `HxCheckbox` | `input[hx-checkbox]` | native checkbox, indeterminate |
46
+ | `HxRadio` | `input[hx-radio]` | native radio |
47
+ | `HxSelect` | `hx-select` | CDK listbox in an overlay, all three forms APIs |
48
+ | `HxDivider` | `hx-divider` | horizontal/vertical, labelled |
49
+ | `HxTooltip` | `[hx-tooltip]` | CDK overlay, hover and focus |
50
+ | `HxAvatar`, `HxAvatarGroup` | `hx-avatar`, `hx-avatar-group` | picture, icon or initials; sizes, shapes; the group overlaps its avatars |
51
+ | `HxBadge`, `HxOverlayBadge` | `hx-badge`, `hx-overlay-badge` | count or dot marker, severities and sizes; the overlay variant sits on a corner of the wrapped element |
52
+ | `HxBreadcrumb` | `hx-breadcrumb` | router links, home item |
53
+ | `HxDataTable`, `HxColumn`, `HxCell`, `HxTableHeader`, `HxTableBody`, `HxTableFooter`, `HxTableCaption`, `HxTableEmpty`, `HxRowExpansion` | `hx-data-table` … | column model, cell and row templates, sorting (single or multiple), paging, lazy loading, selection (checkbox, single, meta key), global and column filters, row expansion, caption, empty and loading state, scrolling body with a sticky header |
54
+ | `HxCarousel`, `HxCarouselItem` | `hx-carousel` | slides over items: numVisible/numScroll, responsive counts, circular, autoplay, indicators, keyboard |
55
+ | `HxGalleria`, `HxGalleriaItemTemplate`, `HxGalleriaThumbnail`, `HxGalleriaCaption` | `hx-galleria` | image gallery: stage, thumbnail strip, captions, indicators, autoplay, full screen in a modal dialog |
56
+ | `HxImage`, `HxImageIndicator` | `hx-image` | picture with a modal preview: rotate, zoom, close; labelled toolbar |
57
+ | `HxPaginator` | `hx-paginator` | first/previous/page links/next/last, rows per page, current page report; `first` and `rows` models |
58
+ | `HxIconField`, `HxInputIcon` | `hx-icon-field`, `[hx-input-icon]` | icon on the start or end edge of a text field |
59
+ | `HxFloatLabel` | `hx-float-label` | a label that sits in the field and floats up on focus or a value (`over`, `in`, `on`) |
60
+ | `HxInputGroup`, `HxInputGroupAddon` | `hx-input-group`, `hx-input-group-addon` | joins fields, selects, buttons and addons |
61
+ | `HxInputNumber` | `hx-input-number` | locale formatting, step buttons, all three forms APIs |
62
+ | `HxPassword` | `hx-password` | show/hide toggle, all three forms APIs |
63
+ | `HxCard` | `hx-card` | surface with header, title (a heading), subtitle, content and footer slots |
64
+ | `HxProgressBar`, `HxProgressSpinner` | `hx-progress-bar`, `hx-progress-spinner` | determinate and indeterminate bar, spinner; `role=progressbar`, reduced motion |
65
+ | `HxTree` | `hx-tree` | hierarchical data: selection (single, multiple, checkbox), filter, lazy children, node template, WAI-ARIA tree keyboard |
66
+ | `HxTimeline` | `hx-timeline` | events on a line: vertical or horizontal, left/right/alternate, content, opposite and marker templates |
67
+ | `HxSkeleton` | `hx-skeleton` | loading placeholder: rectangle or circle, any size, wave (off under reduced motion), `aria-hidden` |
68
+ | `HxSplitButton` | `hx-split-button` | default action plus an `hx-menu` of related actions; severity, variant, size, rounded, raised |
69
+ | `HxStepper`, `HxStepList`, `HxStep`, `HxStepPanels`, `HxStepPanel` | `hx-stepper` … | steps with panels: completed/active state, linear mode, `activateCallback`, lazy panels |
70
+ | `HxButtonGroup` | `hx-button-group` | joins `hx-button`s: square inner corners, shared borders, `role=group` |
71
+ | `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 |
72
+ | `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 |
73
+ | `HxDrawer` | `hx-drawer` | panel that slides in from an edge, same dialog semantics as `hx-dialog`; modal, full screen, reduced motion |
74
+ | `HxPopover` | `hx-popover` | anchored panel with arrow: `toggle(event, target)`, outside click and Escape close, non-modal dialog with focus in and back |
75
+ | `HxConfirmationService`, `HxConfirmDialog`, `HxConfirmPopup` | `hx-confirm-dialog`, `hx-confirm-popup` | ask the user to confirm: centred `alertdialog` or a popup anchored to a target; `confirm()` with callbacks or `confirmAsync()` |
76
+ | `HxTable` | `table[hx-table]` | native table styles: caption, header, body, footer, striped, gridlines, hover, sizes, sticky header; no behaviour (data grids use AG Grid) |
77
+ | `HxChip` | `hx-chip` | entity pill with picture or icon, removable by button, Backspace or Delete |
78
+ | `HxTag` | `hx-tag` | label for a category or status: severities, rounded, decorative icon |
79
+ | `HxTabs`, `HxTabList`, `HxTab`, `HxTabPanels`, `HxTabPanel` | `hx-tabs` … | WAI-ARIA tabs: roving tabindex, automatic activation, lazy panels, scrollable list |
80
+ | `HxToast`, `HxMessageService` | `hx-toast` | short messages from a service, live regions, pause on hover and focus, keys and positions |
81
+ | `HxMenubar` | `hx-menubar` | horizontal menu with dropdown submenus on the CDK menubar, collapses into a button below a breakpoint |
82
+ | `HxMenu` | `hx-menu` | menu of `HxMenuItem`s, inline or popup, group headings and nested submenus on the CDK menu |
83
+ | `HxMessage` | `hx-message` | inline message: severity, filled/outlined/simple, icon, closable, life |
84
+ | `HxToolbar` | `hx-toolbar` | start, center and end areas that wrap on small screens; no toolbar role |
85
+ | `HxAccordion`, `HxAccordionPanel`, `HxAccordionHeader`, `HxAccordionContent` | `hx-accordion` … | WAI-ARIA accordion on the CDK, single or multiple |
86
+ | `HxFieldset` | `hx-fieldset` | native fieldset and legend, optional collapse with a legend button |
87
+ | `HxPanel` | `hx-panel` | titled container, optional collapse with a toggle button, header and footer slots |
88
+ | `HxFileUpload` | `hx-file-upload` | choose and drop files, list, validation messages, progress; no HTTP, the app uploads |
89
+ | `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 |
90
+ | `HxDateRangeQuickSelect` | `hx-date-range-quick-select` | Kibana-style quick select for a date range: Last/Next N unit, commonly and recently used ranges, a start and an end editor (absolute, relative, now), date-math `expression` model, all three forms APIs |
91
+ | `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 |
92
+ | `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 |
93
+ | `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 |
94
+ | `HxAutoComplete` | `hx-auto-complete` | text field with suggestions from `(complete)`, chips, dropdown, all three forms APIs |
95
+ | `HxMultiSelect` | `hx-multi-select` | select for several values: comma or chips, filter, select all, all three forms APIs |
96
+ | `HxListbox` | `hx-listbox` | inline single or multiple list on the CDK listbox, filter, checkmark, all three forms APIs |
97
+ | `HxRating` | `hx-rating` | star rating as a radio group, read only as an image, all three forms APIs |
98
+ | `HxSlider` | `hx-slider` | one value or a range on native range inputs, horizontal or vertical, all three forms APIs |
99
+ | `HxToggleButton` | `hx-toggle-button` | on/off button with labels and icons, all three forms APIs |
100
+ | `HxSelectButton` | `hx-select-button` | single or multiple, all three forms APIs |
101
+ | `HxSwitch` | `input[hx-switch]` | native checkbox with `role="switch"` |
102
102
 
103
103
  Selectors, inputs and classes use the prefix `hx` (`hx-button`); the custom properties keep the prefix `--h-`.
104
104
 
package/core.css CHANGED
@@ -927,11 +927,15 @@
927
927
  -webkit-mask: var(--hx-check) center/contain no-repeat;
928
928
  transform: scale(0);
929
929
  transition: transform var(--h-checkbox-transition-duration);
930
- --hx-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 7.5 2.8 2.8L11 4.5'/%3E%3C/svg%3E");
930
+ --hx-check: url(
931
+ "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 7.5 2.8 2.8L11 4.5'/%3E%3C/svg%3E"
932
+ );
931
933
  }
932
934
 
933
935
  .hx-checkbox:indeterminate::before {
934
- --hx-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 7h8'/%3E%3C/svg%3E");
936
+ --hx-check: url(
937
+ "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 7h8'/%3E%3C/svg%3E"
938
+ );
935
939
  }
936
940
 
937
941
  .hx-checkbox:checked,
@@ -1681,9 +1685,7 @@
1681
1685
  }
1682
1686
 
1683
1687
  /* invalid */
1684
- .hx-float-label:has(> [aria-invalid=true],
1685
- > .ng-invalid.ng-touched,
1686
- > .hx-select-invalid) > label {
1688
+ .hx-float-label:has(> [aria-invalid=true], > .ng-invalid.ng-touched, > .hx-select-invalid) > label {
1687
1689
  color: var(--h-floatlabel-invalid-color);
1688
1690
  }
1689
1691
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravionlabs/helix-ui",
3
- "version": "22.2.14",
3
+ "version": "22.2.15",
4
4
  "description": "Helix UI: vanilla Angular components on the Helix design tokens — plain CSS, no runtime styling engine.",
5
5
  "license": "MIT",
6
6
  "keywords": [
package/styles.css CHANGED
@@ -1453,11 +1453,15 @@
1453
1453
  -webkit-mask: var(--hx-check) center/contain no-repeat;
1454
1454
  transform: scale(0);
1455
1455
  transition: transform var(--h-checkbox-transition-duration);
1456
- --hx-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 7.5 2.8 2.8L11 4.5'/%3E%3C/svg%3E");
1456
+ --hx-check: url(
1457
+ "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 7.5 2.8 2.8L11 4.5'/%3E%3C/svg%3E"
1458
+ );
1457
1459
  }
1458
1460
 
1459
1461
  .hx-checkbox:indeterminate::before {
1460
- --hx-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 7h8'/%3E%3C/svg%3E");
1462
+ --hx-check: url(
1463
+ "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 7h8'/%3E%3C/svg%3E"
1464
+ );
1461
1465
  }
1462
1466
 
1463
1467
  .hx-checkbox:checked,
@@ -3484,9 +3488,7 @@
3484
3488
  }
3485
3489
 
3486
3490
  /* invalid */
3487
- .hx-float-label:has(> [aria-invalid=true],
3488
- > .ng-invalid.ng-touched,
3489
- > .hx-select-invalid) > label {
3491
+ .hx-float-label:has(> [aria-invalid=true], > .ng-invalid.ng-touched, > .hx-select-invalid) > label {
3490
3492
  color: var(--h-floatlabel-invalid-color);
3491
3493
  }
3492
3494