Skip to main content

Unifi Angular

Current version: 10.0.0

10.0.0

Update Summary

Addition of the UTableAdvanced Component.

Library

Added

The UTableAdvancedComponent has been added. Wrapping this component around a u-table provides the following features:

  • Compatibility of the Pagination, Sorting, Expandable rows and Sticky header table functionality
  • Adding the uTableFilter directive to the u-table, and u-filterable-column components to your uTableHeaderOutlet, allows for column data to be filtered
  • By default the table will filter for exact matches unless the filterType property on the u-table-advanced is set to 'includes'
  • Using the ignoredChars property allows the filtering to ignore certain characters

Fixed

  • The UPaginatorComponent is now compatible with asynchronous data calls
  • Fix an issue with the UPanelsComponent that would cause alwaysOpen panels to close when their parent panel was closed
  • Numeric table headers of a USortableColumnComponent now properly align their text to the right

Changed

  • The UProgressSpinnerComponent no longer offers a ariaLabel input variable
  • In order to be compatible with the UTableAdvancedComponent, the logic and template of expandable rows had to set the rowIndex on the u-table-details-row

Deprecated

  • USortableColumnComponent: The getArrowDirectionState() method is now deprecated and will be removed in a future release

9.2.0

Library

Added

  • Table component can be configured to have a sticky header
  • Date range example added to documentation site
  • Date service is now being exported

Changed

  • All table headers will have a bottom border to improve contrast

Fixed

  • Date validators automatically being applied from the UDate directive will stay up to date with changes to the directive

9.1.0

Library

Added

  • Icon variant added to the button component
  • New theme variables created for neutral icon button

Changed

  • Text field end adornment button uses the neutral icon button
  • Unifi Web is now at 5.0.1

Fixed

  • Icon component will react to property changes rather than always using the initial values
  • Title added back to the form error icon
  • uBadgeAriaDescription will now read appropriately when using screen readers
  • Calendar button when using the UDateDirective now has a type of button so that it does not submit surrounding forms

9.0.1

Library

Added

  • index property added to UTab
  • selectedIndex property added to UTabGroup
  • Added new icons to the UIcon component

Fixed

  • UDialog is now fully responsive without having to set fullWidth to true
  • Long tab text will no longer be cut off at smaller screen sizes, instead horizontal scrolling is introduced
  • Invalid input elements will no longer show a red underline inside the field
  • Exported missing injection tokens

9.0.0

Library

Added

  • Icon component added, along with the UIconConfigService that provides the ability to override the default Unifi iconography

Changed

  • Angular upgraded from v15 to v16
  • Unifi Web is now at 5.0.0

Fixed

  • Multi select options will no longer cover the input when open and the connectedPosition property has been removed
  • Data URLs are no longer being used in our style sheets and have been replaced with HTML-based SVGs for improved security

8.1.0

Library

Changed

  • Custom date picker is now available
  • Unifi Web is now at 4.1.0

8.0.1

Library

Changed

  • Unifi Web is now at 4.0.1

Fixed

  • Table sort direction will reset when the table data changes
  • When expanding the mobile stepper steps, focus will remain on the button instead of going to the list
  • Dialog close button will no longer shrink
  • Notification text color will no longer inherit the text color of a dialog when placed within one, and can now be updated via theming

8.0.0

Library

Changed

  • Angular upgraded from v14 to v15
  • Typescript upgraded from v4.8.4 to v4.9.4
  • Unifi Web upgraded from v3.1.1 to v4.0.0
  • Sass no longer uses @import rules and instead uses @use and @forward
  • Sass variables are now separated into two categories, "Tokens" and "Variables"

7.0.1

Update Summary

Bug fixes

Library

Changed

  • Unifi Web dependency is now at 3.1.1 (changelog)
  • An update was made to the Table component sortingDataAccessor to hopefully avoid issues when implementing custom sorting

Fixed

  • Checkboxes will no longer become small when a checkbox label has wrapping content
  • Checkbox inputs and labels have been rearranged to resolve an issue with the tab order of the content being incorrect (e.g. when a label has a link)
  • The close method now works properly on the drawer component
  • Select Components will now replace values as expected instead of appending them if the model value is changed programmatically

7.0.0

Update Summary

Enhance Stepper Component

Library

Changed

  • Stepper can now also be navigated by clicking on the steps, as opposed to only using buttons within the step content
  • Mobile view redesign so that all of the step names are visible to the user
  • Improved screen reader behavior
  • linear property defaults to true, setting to false is not recommended and may be removed in a future release

6.0.1

Library

Added

  • The badge component now has a uBadgeHidden property that can be used to dynamically hide itself

Changed

  •  Unifi Web dependency is now at 3.1.0 (changelog)

Fixed

  • Skip link within the starter kit will now be visible when focused on
  • Using the fullWidth property on the tab component will work as expected
  • Notification icons now use a title tag instead of the aria-label attribute to meet accessibility guidelines
  • The uTableNoDataOutlet will be easier to use because the data property on the table component now also accepts a type of null | undefined. Setting data to an empty array will also cause the outlet to display.
  • Expandable table rows will no longer require a double click to open
  • Column sorting within a table will now treat words that start with uppercase and lowercase letters the same

Documentation

The expand/collapse all buttons within the panel documentation no longer incorrectly use the aria-expanded attribute.

6.0.0

Update Summary

Library

Changed

  • Angular upgraded from v13 to v14
  • Typescript upgraded from v4.4.4 to v4.8.4
  • Users using the new Starter Kit are encouraged to upgrade to Typescript 4.8.4 after starting a new Angular app

Fixed

  • Accessibility fix: The u-tab-group component now has role="tablist" in order to better communicate the Tabs functionality to screenreaders.

Documentation

Angular Theming and Get Started pages include changes needed to import Unifi styles.

5.1.0

Update Summary

New Badge component, updates to Panels arrow alignment and a few fixes.

Library

  • Badge component: The Badge component can now be used by adding the uBadge directive to an element. View the Badge documentation to view more information on how to use this component.
  • Panels: It is now possible to use the alignArrow property on the Panel component to align the arrow icon to the right or left (by default it will be aligned right).
  • Tab components using the color="primary" attribute now show the correct color when hovering over a Tab.
  • UPanelAccordionComponent now shows the correct selector u-panel-accordion on the Panels documentation.

Documentation

5.0.0

Update Summary

Updated Unifi Angular library to Angular 13

Library

Changed

  • Included typescript update to 4.4.4
  • Breaking change will require utilizing "stylePreprocessorOptions" with your node_modules folder added to the "includePaths" in your angular.json file.

Documentation

Angular Theming and Get Started pages include changes needed to import Unifi styles.

4.4.1

Library

Unifi Web Dependency:

  • Upgrade to version 3.0.1

Bug Fix:

  • Fix starter kit navigation so that appropriate menu items appear active by default.

New theme variables for the progress bar:

  • $u-progress-bar-primary
  • $u-progress-bar-primary-background
  • $u-progress-bar-secondary
  • $u-progress-bar-secondary-background

Documentation

Progress bar documentation reflects new variables.

4.4.0

Library

Update to node version 14:

  • Version 14.19.3 is being used since version 12 is no longer under LTS.

Bug fix:

  • Updated buttons within Unifi components to have a type attribute of 'button' so that they will no longer submit forms unintentionally.
  • Created the CloseableItemService in order to manage the interaction between nested expandable components. This allows us to work around an angular bug that hides content unexpectedly when the components are using ngIf with angular animations. Also updated styles so expand arrows will work when used within a panel.

Documentation

Select component documentation updated to fix some conflicts from merging a previous release.

4.3.1

Library

Bug Fix:

  • Updated the UDialogComponent to disable its focus trap upon destruction. This fixes a bug that caused the page scrollbars to permanently remain hidden if the UDialogComponent was destroyed while in a non-closed state.

Documentation

Removed extraneous merge conflict markers from UDialogComponent API documentation.

4.3.0

Library

New feature:

  • Column sort functionality on Unifi Angular table.

4.2.1

Library

The UTableRowToggleComponent imports the take operator from rxjs, but apps using an rxjs version lower than 7 will throw an error because the import for lower versions is from 'rxjs/operators' rather than just simply 'rxjs'. Changed the import to use 'rxjs/operators' so this doesn't cause errors for apps using rxjs versions lower than 7.

4.2.0

Update Summary

Library

One stable component:

  • Data Table
    First iteration of the Unifi Angular data table component. Includes basic data table structure with expandable rows feature.

Bug Fix:

  • Removed the default value of the private _fullWidth property in the notification component. Previously was set to true, but wasn't actually doing anything. This change will not affect any notification functionality.

Documentation

Documentation for each component is now split up into tabs: Overview, API, and Accessibility (if applicable). The code examples for each Unifi Angular component also include tabs for HTML, TS, and CSS (if applicable). This improves readability of the code examples to provide a better experience for developers when implementing the Unifi Angular components in their applications.

4.1.1

Library

Bug Fix:

  • When we re-factored the paper mixin imports in the Unifi Web library, it broke how the default styles for u-paper were being brought into Unifi Angular. This fix adds the u-paper-core-styles to the unifi-core mixin, which makes the paper styles available with other Unifi core styles.

4.1.0

Library

One stable component:

  • Dialog

Bug fix:

  • Fixed an issue with the USelectComponent not finishing selecting/de-selecting options when using async data.

4.0.0

Update Summary

Update to Angular 12

Library

  • Change Ivy compilation to partial compilation, as per Angular library publishing standards. Angular 12 applications build with Ivy by default.
  • Added a high-level endpoint or "barrel" file for each component to import into the main public-api.ts endpoint. This is necessary to resolve the error "Unsupported private class... component is not exported from the top-level library endpoint."
  • Schematics updated to install Unifi Web 2.0. Will no longer install Unifi Web 1.3.1 for any applications using an Angular version less than 12, as we previously were. If your application is not updated to Angular 12, the schematics may fail due to unmet peer dependencies.
  • After the Angular 12 upgrade to the library, went through and fixed new linting errors in all the components.
  • It was necessary to move some child components or directives into the same file as their parent. For example: moved the UStepHeaderComponent into the UStepperComponent. This is because the <u-step-header> component is used inside the <u-stepper> template, so if we leave the UStepHeaderComponent in its own separate file, we get a cyclic dependency error upon library build. Related: moved the UTabBodyPortalDirective into the UTabsComponent.
  • Updated the UStepperComponent to properly implement the Angular CDK Stepper component, which in Angular 12 updated its super class to include the elementRef and document member variables.

Documentation

The Unifi Angular documentation is using the latest component samples from Unifi Angular 4.0.0. Code samples and documentation has been updated to reflect this change.

PLEASE NOTE: If you are using a Unifi Angular version lower than 4.0.0, the code samples available for copy/paste may not work with your application, as they are tailored to work with Angular 12 and Unifi Angular 4.0.0.

3.2.0

Library

Two new stable components:

  • Cards
  • Progress Indicators

Documentation

  • Fixed code samples for the Select component. Code samples were incorrectly using u-select as the directive, and not uSelect.
  • Fixed code samples for the Tabs component from using title to tabTitle.

3.1.0

Update Summary

Updated Unifi Angular schematics dependencies to be compatible with new Angular 12 applications.

Library

  • Updated Unifi Web dependency to 1.4.0.
  • Updated Unifi Angular dependency to 3.0.1.
  • Updated Angular CDK dependency to 12.1.4.
  • Updated ng-add schematic to check the user's Angular version and install Unifi Web 1.3.1 for versions less than 12. It will install Unifi Web 1.4.1 for Angular 12.

3.0.1

Library

Updated SASS division operator from slash "/" to div() in all instances. Instead of using div() in some cases, the migration tool is using multiplication instead, for example: $unit / 2 becomes $unit * 0.5.

3.0.0

Update Summary

This release was focused on re-engineering the UOptionComponent and USelectComponent, to de-couple the UOptionComponent from the USelectComponent so it can be used independently. The USelectComponent was also re-factored for this change, including changes to handle object values more gracefully.

POSSIBLE BREAKING CHANGES

If the implementation of the multiple select involved a lot of manual code to handle objects or more complex interaction, there may be some breaking changes when updating. For this reason, we have bumped this release version to the next major version, v3.0.0.

There were no breaking changes to basic implementations of the multiple select during testing.

Library

Updates for this release include:

  • Re-engineered UOptionComponent to be independent from the USelectComponent. This will allow it to be used outside of a multiple select.
  • Re-engineered USelectComponent to better handle object values. Also fixed a bug where pre-selected options had to be manually programmed to actually be selected.
  • Added more unit tests for passing in objects to the u-option and u-select components.

2.4.0

Update Summary

Library

Bug Fix

Changed peer dependencies for Unifi Angular to allow Angular 12, otherwise ng add schematic will fail when trying to install.

2.3.0

Update Summary

Updated Unifi Angular project dependencies and added one new component.

Library

Includes one new stable component:

  • Paginator Component

Other updates:

  • Updated Unifi Angular library project to 11.2.14. It was decided to not update to Angular 12, as our library would not have backward compatibility with Angular 11 apps.
  • Updated Unifi Angular peer dependencies to require Angular versions 11 and greater, but less than 12. Will warn users installing Unifi Angular using schematics if they are using a version less than Angular 11.
  • Updated schematics to install Angular 11.2.14 and Angular CDK 11.2.13.

2.2.0

Update Summary

Addition of Stepper Component and List Component, as well as a couple bug fixes.

Library

Includes two new stable components:

  • Stepper Component
  • List Component

In conjunction with the Stepper Component release, we have added a UFocusManagerDirective utility. This directive can be used on any element that needs to receive focus. The directive exposes the ElementRef. It can also access the element's NgControl (optional).

Bug Fixes

  • Fixed a bug with the USelectComponent keyboard accessibility. The keyboard accessibility broke when Unifi Angular was updated to Angular 11. This is now fixed.
  • Fixed a bug with the native datepicker component where the label covered the datepicker content when animated was set to true.

2.1.2

Update Summary

BUG FIX

Library

Fixed a bug in the picker input by removing the resize functionality that would appear when error validation would appear. Also fixed minor bug where picker icon wasn't positioned properly.

2.1.1

Update Summary

BUG FIX

Library

Fixed a bug in the u-select component that was preventing users from scrolling through the list of options on the multiple select component with the keyboard.

2.1.0

Update Summary

New Notification component and Native Datepicker component, as well as form control error message enhancements.

Library

Includes two new stable components:

  • Notification
  • Native Datepicker

Other updates:

  • Added alert icon to inline form control error messages as an added visual for impaired users.

Schematics updates:

  • Updated Unifi Web dependency to 1.3.0.
  • Updated Unifi Angular dependency to 2.1.0.

2.0.1

Update Summary

Patch version for 2.0.0, to address breaking changes found while regression testing.

Library

Coerce all boolean properties on u-form-control, so users who aren't using property binding won't have any breaking changes.

2.0.0

Update Summary

DEPRECATION NOTICE

The Unifi Angular Library has been updated to Angular 11, and migrated from TSLint to ESLint. We will no longer support applications using an Angular version lower than 10.0.0.

Applications do not have to be updated to Angular 11 to use Unifi Angular 2.0.0, just version 10.0.0 or higher. Applications also do not have to be using ESLint in order to use Unifi Angular 2.0.0.

Component properties in Unifi Angular have been updated to adhere to stricter tsconfig rules (such as adding stronger types to component properties).

Unfortunately, there were no new components added in Unifi Angular 2.0.0, due to the major undertaking of the schematics re-tooling.

Library

  • Update Unifi Angular peer dependencies to @angular/common >=10.0.0, @angular/core >=10.0.0, and @angular/cdk >=10.0.0.
  • The update to Angular 11 constituted the complete re-work of the ng-add schematic for Unifi Angular. The main reason for this was that the getWorkspace function from the Angular Schematics utility library was changed to an async function, which changed the return type on functions using this to be a <Promise>, which affected the chaining of our schematic rules. The re-working of the schematics doesn't change the experience for devs using it, and it still has the same features as before.
  • Component properties have been updated to adhere to stricter tsconfig rules. If you update your Angular project to use stricter rules, take note there will be some lint issues you will need to address. Most notably, using property binding on boolean attributes. For example: changing <u-form-control animated> to <u-form-control [animated]="true">, or <u-panel expanded> to <u-panel [expanded]="true">.

1.1.0

Update Summary

Form control enhancements and update to Angular 10.

Library

  • Allow users to set global defaults for Unifi form control component. The available defaults are: variant: 'filled' | 'outlined', dense: boolean, and animated: boolean.
  • Addition of Error State Matcher. User can now globally determine the behavior of form errors. The error state matcher is available on: u-textfield, native uSelect, u-select multi-select, and uRadio.
  • Fixed inconsistency in 'dense' variant between text fields and selects.
  • Fixed small UI bug on u-panel-header, where the corners still had a border radius applied when the user set the paper property to square.

BREAKING CHANGES:

  • Refactored Unifi Angular directives to follow the recommended Angular coding style guide for directives https://angular.io/guide/styleguide#directive-selectors. The following directive names have changed: u-radio is now uRadio; u-checkbox is now uCheckbox; u-label is now uLabel; u-select is now uSelect (directive only, not the component).
  • Any u-form-error components are now hidden initially inside the form control.
  • The class .u-form-error on the u-form-control has been changed to .u-form-control--invalid, to keep it consistent with the Unifi Web error class for an invalid form control.

1.0.1

Update Summary

Patch version

Library

MINOR BREAKING CHANGE

Removed click event listener on u-drawer component. Event listener was listening for clicks on the drawer, then closing the drawer when clicked. Removing this functionality allows the user to control when the drawer closes.

1.0.0

Update Summary

First major release 1.0.0

Library

Includes 10 stable components:

  • App Bar
  • Panels
  • Buttons
  • Links
  • Checkboxes
  • Radio Buttons
  • Selects
  • Text Fields
  • Drawers
  • Tabs

BREAKING CHANGES:

U-Drawer

  • The elevation property will pertain to the temporary drawer. The permanent drawer will always have an elevation of 0.

U-Panel-Header

  • The title property has been changed to panelTitle, so as not to interfere with the native HTML 'title' attribute.

U-Panel

  • Removed disabled property. Panels can no longer be disabled, rather they should be excluded if their content cannot be accessed.

U-Tab

  • Removed disabled property. Tabs can no longer be disabled, rather they should be excluded if their content cannot be accessed.
  • The title property is now tabTitle, so as not to interfere with the native HTML 'title' attribute.

OTHER CHANGES FOR 1.0.0

U-Drawer

  • The permanent drawer will always have an elevation of 0.
  • The default value for the elevation property has been set to 16. This can be customized using the elevation property.
  • The value of the elevation property will now pertain to the temporary drawer, not the permanent drawer.
  • ADA focus improvements when the temporary drawer is opened and closed.
  • The z-index property of the temporary drawer has been changed to 100 from 1300, so as not to interfere with assistive technology.

U-Form-Control

  • Fixed two small UI bugs with Safari:
    `u-select` outlined variant right border was disappearing when resizing browser.
    `u-textfield` outlined variant top and bottom outline gap border color was not properly being calculated while using rgba. Changed to use hex value and separate opacity value.
  • Fixed UI bug with dense textfield using adornments.

U-Panel-Header

  • Override $u-theme-on-info and $u-theme-on-warning defaults. Unifi Web library is incorrectly calculating the values as white, and should be black. Overriding here until we can fix in Unifi Web.

U-Tab-Group

  • Keyboard accessibility added that allows users to navigate between tabs using right and left arrow keys.
  • Directive of uTabButton added to implement FocusableOption on the tab buttons.

Updated library peer dependency versions:

  • @angular/common 9.1.9 or above
  • @angular/core 9.1.9 or above
  • @angular/cdk 9.2.4 or above
  • typescript 3.8.3 or above

Updated dependency versions in schematics. Schematics will now install the following library versions:

  • Unifi Web ^1.2.0
  • Unifi Angular ^1.0.0

Beta

Update Summary

Beta release

Library

Includes 10 stable components:

  • App Bar
  • Panels
  • Buttons
  • Links
  • Checkboxes
  • Radio Buttons
  • Selects
  • Text Fields
  • Drawers
  • Tabs

Documentation

0.13.1

Library

  • Change app bar full-width class to u-appbar--full-width to be specific to app bar component.

0.13.0

Update Summary

  • Starter kit release (pre-beta)
  • Update to Angular 9.1.9
  • Update to Typescript 3.8.3
  • ng add schematic created
  • Starter kit option in schematic for new apps

Library

Components available:

  • Buttons
  • Links
  • Text Fields
  • Drawers
  • App Bar