v18.6.1

Documentation 📚

• activate a1 for all components (ba59316)

Bug Fixes 🐛

• breadcrumb: make nxBreadcrumbItem more lenient and add example with context menu and buttons (e4a24ad)
• circle toggle: link error message to controls (56ad612)
• context-menu: replace onStable with afterNextRender for zoneless compatability (e7709bd)
• context-menu: stop propagation on esc (24e0fb6)
• datefield: add role="button" to the dates in the datepicker (36daeee)
• datepicker: disabled selected styling (c55a66b)
• docs: replace px with rem (0bc5fd1)
• dropdown: prevent unnecessary macrotasks (7cec758)
• formfield, autocomplete, datefield, multi-select: fix accessibility issues with aria owns (137e136)
• modal: use inert to block content outside of dialog (581b574)
• natural-language-form: replace zone.onStable for zoneless compatibility (7e7d1da)
• pagination: improve and maintain focus state (e8448b5)
• popover: fix IntersectionObserver not defined error in SSR when popover can only be opened through client interaction (9a92304)
• popover: set active state for trigger button (d33c2da)
• rating: implement radio behaviour (e1c9842)
• table: fix condensed styling (ccb6e11)
• tabs: make tabs ssr ready (77f4235)
• tree: fix errors for undefined treeControl and elementRef with separate declarations (a560ac5)
• word: width of input should adapt to rendered value (1499c01)

v18.6.0

Timefield built in validator

The timefield component now has a built in validator to check if the entered time is valid. The feature can be enabled by an opt-in setting enableTimeValidation.

Features ✨

• modal: add more autofocus options (a2eb516)
• switcher: always show tickmark when checked (6f3f5a2)
• timefield: add custom validator for invalid time (ce55e71)

Bug Fixes 🐛

• checkbox: active and error hover/active styles (b3dbac7)
• circle-toggle: allow any value (5866d47)
• datefield: use spacebar to select date (4622d74)
• grid: convert scss example file to css (3b7ea9e)
• headline: add css for links inside of headline (ae0cd54)
• message-toast: add NxMessageToastService to providers (bab33f4)
• message-toast: replace onMicrotaskEmpty with queueMicrotask for zoneless compatability (3fcde39)
• sidebar: item position while resizing and when closed(0d5cf74)
• table: change sorting direction (e67a600)
• tooltip: replace onMicrotaskEmpty with afterNextRender for zoneless compatability (7357258)

v18.5.1

Bug Fixes 🐛

• autocomplete: replace onStable to make it zoneless compatible (5fcc2ec)
• checkbox: link aria-describedby with projected nx-error (32bbdde)
• formfield: remove css coloring icons blue in appendix (dcea5da)
• formfield: remove reveal icon in Edge only when password toggle exists (7036b7a)
• number-stepper: allow comma as decimal separator, add commaDecimal input (f144496)
• radio-toggle-button: fix disable-mobile styles (2daa138)
• switcher: fix css for label left (22354ca)
• table: fix sticky column not working (c0f5b36)

v18.5.0

Documentation 📚

• file-uploader: make screenreader read error message (7a5ac74)
• only show implemented components for A1 themes (9d190ed)

Bug Fixes 🐛

• radio-button, circle-toggle: add tabindex="-1" to label element in radio groups (e3ada6b)

Features ✨

• radio toggle: link error message to radio toggle by aria-describedby (50249cf)
• spinner: add ariaPoliteness input (0aa0483)

v18.4.0

Documentation 📚

• add aquila issue template (05515fd)
• update icon version info (e6c02ea)
• update safari just to most recent (6193c65)
• update screenreader support page (feaae27)

Bug Fixes 🐛

• checkbox: link checkbox group aria-labelledby with projected nx-error (1793088)
• datefield: make the datepicker zoneless ready (e64213d)
• foooter: first year then company (78da2e8)
• list: icons missing aria-labels (50da7ee)
• multi-stepper: remove unnecessary aria role (967aea3)
• table: add :host to ::ng-deep for block-scoped styles (d1014e3)
• table: spacing issues with ndbx-base-integrated styles (4d4dc1c)

Features ✨

• formfield-harness: add isReadonly query and filter (93c1149)
• formfield: add example of customizing spacing with theming tokens (6b25bac)
• switcher: announce errors by screen readers by linking error message (4ba485f)

v18.3.0

Readonly states for radio- and checkbox-style components

With this release we added a readonly state to the circle toggle, radio button, checkbox, switcher and toggle button components. The number stepper has to be delayed until the next major version because of a necessary breaking change.
Please note: the readonly states on these elements is only approved for internal (expert) applications because of accessibility constraints.

Features ✨

• accordion: add flush alignment option (28a37fd)
• circle-toggle: add readonly state (c2abe67)
• multi-select: add filterInput output (d61712c)
• radio-button: add readonly state (b6ef4f6)
• switcher: add readonly state (a72712a)
• toggle-button: add readonly state (571e1df)

Bug Fixes 🐛

• circle-toggle: invalid aria-required attributes in radio group (79e18ce)
• datefield: to use plain buttons and update cell font-weight (ea29b77)
• grid: use DI for missing nxRow warning (8d4a236)
• header: change height of header to match figma designs (d5bf893)
• multi-select: open dropdown with arrow keys (785b98e)
• radio-toggle: forward focus to toggleInput (7c6edda)
• sidenavigation,action: text and icon alignment in the navigation items (b6b2c79)

Documentation 📚

• accordion: add aria-hidden to error icons (74c9106)

v18.2.0

Features ✨

• checkbox: add readonly state (96e717c)

Bug Fixes 🐛

• code-input: link error message with aria-describedby (ce2c995)
• comparision-table: track expression warning (f400dd8)
• context-menu: change behavior to match a11y guidelines (5595eaf)
• dropdown: change keyboard behavior (7f23419)
• input: remove a password reveal button in Microsoft Edge (f1f55df)
• multi-select: add aria-describedby, aria-invalid (98f784d)
• phone-input: correct focused state (71527c5)
• phone-input: remove binding from role attribute (bfe1f23)
• popover: change aria-haspopup to dialog (7e4cdf5)

Documentation 📚

• add documentation for non interactive scrollable content (e4e201f)
• fix opening examples in stackblitz (ea96a78)

v18.1.0

Emphasis button update

The emphasis button was deprecated in 18.0.0 because there was no plan to make the colors accessibility compliant. This decision was changed and now the orange colors got updated to fulfill WCAG contrast requirements. The emphasis button is not deprecated anymore and can be used again.

Features ✨

• dropdown: align dropdown checkmark (5fed95d)
• natural-language-form: enable aria-describedby for words (d418a65)
• tag: add nxTagIntl provider for i18n (a4b9ffd)

Bug Fixes 🐛

• action: use new line instead of ellipsis for narrow space (aa76f08)
• context-menu: adjust header styles to selection menu designs (adb40ee)
• dynamictable: add nxContextMenuItemCheckbox to column settings checkboxes (edd5cd0)
• dynamictable: remove drag and drop from custom settings (f70cf23)
• file-uploader: don't intterupt adding file when an invalid file is found (2f23c2a)
• formfield: add role group and aria label to custom formfield (0852a44)
• formfield: change from nx-icon hover to button click for popover (a0b8d2b)
• formfield: remove aria label for readonly (b3f5125)
• licence-plate: empty value is valid in validator (0ed5059)
• popover: change maxwidth to 100% to work for small screens (3c7f91c)
• switcher: set required validator, correct aria (1e4c2e7)
• table: don't emit sortChange when set active, direction (06390a9)
• table: remove nxTableCellClip from column resize table (02143af)
• tag: remove backspace deletion use focusable button instead (f456efe)
• tooltip: annouce message when show (3d39cd5)

Documentation 📚

• button: undeprecate emphasis button (fc1d126)
• checkbox: show freedom of layouting (7c3f680)
• datefield: add error messages in examples (19b76ec)
• file-uploader: fix a11y screen reader issue in example (4b677d4)
• input-mask: add error messages in examples (90589dd)
• input: add instruction to import css when using cdkTextareaAutosize (56b12bd)
• mask-input: add error messages to examples (e221643)
• release guide update (e769015)
• sync browser support with Angular (318cce1)

v18.0.0

Replacement of the emphasis button

The emphasis button was not fulfilling WCAG accessibility requirements and was replaced by the new attention button variant. The emphasis button is deprecated and will be removed in the future. As different usages could lead to other solutions than using the attention button, the change is opt-in and will not be done automatically.

Library migration to standalone

The library has been migrated to the Angular standalone APIs. This change should not affect you and everything should work the same and you can import and use the modules as before. But the components and directives are now standalone and you can make use of new Angular features like host directives, import only components/directives instead of a module or find better solutions for mocking in tests.

Library migration to new control flow syntax

The templates of components use the new control flow syntax from Angular. This should have no negative effect on your application or changes needed as everything should work as before.

⚠ BREAKING CHANGES

• iso-date-adapter: The iso date adapter was loading the requested locales from dayjs lazily by a built in feature.
  This doesn't work with the new vite based build system from Angular anymore so we remove it.
  If you did not explicitly import the necessary locales before you will have to do so with this update.

Add the respective imports into your application:

import 'dayjs/locales/de';
import 'dayjs/locales/es';

For lazy loading projects have to find a custom solution that works together with vite and rollup.

• layout: The order of the nx-margins have been changed for specificity reasons, this can change the behaviour of current margins.

EXAMPLES:

class="nx-margin-0 nx-margin-top-xl"
before: margin top: 0, left: 0 , right: 0 , bottom: 0
now: margin: top: 64 (xl), left: 0 , right: 0 , bottom: 0

class="nx-margin-s nx-margin-top-xs nx-margin-bottom-m"
before: margin top: 16 (s), left: 16 (s), right: 16 (s), bottom: 24 (m)
now: margin: top: 12 (xs), left: 16 (s), right: 16 (s), bottom: 24 (m)

• progress-indicator: to fulfill accessibility requirements the variant with a progress bar between steps needs an accessible label. The label can be set with the progressbarAriaLabel or progressbarAriaLabelledBy input. There is an english default but you should set this to a meaningful value for your application. Please see more details in the documentatioon.

DEPRECATIONS

• swipebar:: The swipebar component has been deprecated and will be removed in the future. Please rely on native scroll bars.
• button:: the emphasis button has been deprecated and will be removed in the future. Please use the attention button instead.

Documentation 📚

• swipebar: deprecate swipebar component (88f7127)

Features ✨

• button: add attention button and deprecate emphasis button (b043927)
• migrate library to standalone (0a9b4ee)
• progress-bar: set aria attributes and allow custom ranges (e7fa382)
• update to Angular 18 (717db8b)

Bug Fixes 🐛

• avatar: add role image in examples (1209151)
• datefield: propagate readonly state to all directives and components (8ca1e89)
• iso-date-adapter: remove automatic lazy loading of locales (edb6909)
• layout: fix nx-margin-classes for better specificity (3b050dd)
• radio-button: cannot access radiogroup before initialization error (49a6346)
• status-icon: add inline-flex to status icon (a5cdc6a)
• tag: keep focus after tag deleted (c8ee14e)
• timefield: group time input fields for improved screen reader us… (3bc35e9)
• timefield: make screen readers read all infos instead of content only (415c553)

v17.9.2

Bug Fixes 🐛

• radio-button: cannot access radiogroup before initialization error (08afe61)