When change the ux-tab active status async, the ui selected status can not b reload.

Hi,

I 'd like to know if the radio buttons and checkox of UX Asepects can be used in Angular FormGroup? Thanks

While trying to create a new angular/ux-aspects project, I keep getting the following error when I try to install ux-aspects:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/rxjs
npm ERR!   rxjs@"~7.5.0" from the root project
npm ERR!   peer rxjs@"^6.5.3 || ^7.4.0" from @angular/[email protected]
npm ERR!   node_modules/@angular/core
npm ERR!     @angular/core@"~13.2.0" from the root project
npm ERR!     peer @angular/core@">=12.0.0 <14.0.0" from @ux-aspects/[email protected]
npm ERR!     node_modules/@ux-aspects/ux-aspects
npm ERR!       @ux-aspects/ux-aspects@"*" from the root project
npm ERR!     6 more (@angular/animations, @angular/cdk, @angular/common, ...)
npm ERR!   3 more (@angular/cdk, @angular/common, @angular/forms)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer rxjs@"^6.3.3" from [email protected]
npm ERR! node_modules/ng2-charts
npm ERR!   peer ng2-charts@">=2.3.0 <3.0.0" from @ux-aspects/[email protected]
npm ERR!   node_modules/@ux-aspects/ux-aspects
npm ERR!     @ux-aspects/ux-aspects@"*" from the root project

The steps have been pretty easy to duplicate. Just simply run the following:

$ ng new hello
$ cd hello
$ npm install @ux-aspects/ux-aspects

OS: Windows 11
Node: v16.13.1
NPM: 8.1.2

In example would be good how to use tagClass in ux-tag-input.

Example: I want to colorize tags, in disabled mode.
https://uxaspects.github.io/UXAspects/#/components/input-controls#tags

Version: @ux-aspects/ux-aspects:1.6.0, AngularJS

Link: https://pages.github.houston.softwaregrp.net/caf/ux-aspects-micro-focus/#/ui-components/buttons#toggle-buttons-ng1-component
https://github.com/UXAspects/UXAspects/blob/82aafe855433a5b5413941fee8cd32015873cc66/docs/app/pages/components/components-sections/input-controls/toggle-switch-ng1/snippets/sample.html

How we use
{{'select-volume-populate-btn' | translate}}

Summitter
[email protected]
[email protected]

Steps to reproduce:

1. Open official docs for select, which contain demo inside
   https://uxaspects.github.io/UXAspects/#/components/select#select
2. In combobox select "Afganistan"
3. Now instead of word "Afganistan" in editable input type two whitespaces. --> No results will be
4. Delete your two whitespaces and click on "Afganistan;' again.

Expected result:

1. After step 4 - "Afganistan" should be rendered as current selection.

Actual result:

1. Input remains empty as nothing selected, while previous selection is unchanged.
2. +corrent "Afganistan" will be rendered if user click outside (will cause change detection from parent component)

Date & Time Picker example which is refered on https://uxaspects.github.io/UXAspects/#/components/date-time-picker#date-time-picker page throws error.
Please let me know if this error can be ignored.

Steps to reproduce:

1. Open https://uxaspects.github.io/UXAspects/#/components/date-time-picker#date-time-picker
2. Click on the first Edit in Plunker link.
3. Open the browser console for the Plunker tab.
4. Click on the calender icon.

Observation:
An error appears on the console.
ERROR TypeError: Cannot read property 'name' of undefined
at timezoneComparator (date-time-picker.utils.ts:82)
at tryCatcher (tryCatch.ts:7)
at DistinctUntilChangedSubscriber._next (distinctUntilChanged.ts:111)
at DistinctUntilChangedSubscriber.Subscriber.next (Subscriber.ts:102)
at BehaviorSubject.Subject.next (Subject.ts:62)
at BehaviorSubject.next (BehaviorSubject.ts:40)
at DateTimePickerComponent.set [as timezone] (date-time-picker.component.ts:66)
at updateProp (provider.ts:446)
at checkAndUpdateDirectiveInline (provider.ts:182)
at checkAndUpdateNodeInline (view.ts:429)

Expectation:
No error should appear on the console while picking the date.

As the title shows, and here is the demo and screenshot.

Chrome Version 94.0.4606.81.

As I see, the reason is the scroll event in the target .wrapper doesn't bubble to the .cdk-overlay-container. So, the scroll event is not caught, thus it didn't update the position.
Also, the element out of the .wrapper is not scrollable. So, there is no scroll event triggered in the .cdk-overlay-container.

CodeSandbox repro

demo

Steps to reproduce

1. Click "Go to settings page"
2. Click "Toggle analysis tab"
3. Click "Toggle analysis tab" again
4. Expect Analytics tab is not selected while it is selected
5. Click "Toggle analysis tab" again
6. Click "Toggle analysis tab" again
7. Expect the route to equal "/settings" while it equals "/analytics"

// navigation-item.component.ts 
// this is the reason for 7 in your source code I think.
    ngAfterViewInit(): void {
        this._pageHeaderService.selected$.pipe(tick(), takeUntil(this._onDestroy)).subscribe(selectedItem => {

            // Update selected state for this item
            this._pageHeaderService.updateItem(this.item, selectedItem);

            if (selectedItem && this.isOpen) {
                this.isOpen = false;
            }
        });
    }

Environment

Angular@15-16
UXAspects@latest

Have anybody tried to use this Framework in Angular 5?
Are there any changes necessary for the UpgradeAdapter or something??

At present, I tried to use UX radio buttons with form control, it has two radio buttons in a group,
The code is like following.
https://next.plnkr.co/edit/rW7ibkMOK50v6Y6p?preview

but it doesn't work! The radio buttons check states are wrong, do you know why?

Hello, I was wondering if I could use UX Aspects in Adobe Xd. Any help would be greatly appreciated!

Hello, can we get options to allow custom setting with a gear icon inside the header of the widget & header of the dashboard.

For e.g.

• Print
• Export to PRF/Excel/Word
• Share widget Id
• Set permissions on Widget (Super Admins)
• Change Graph type from chart to plot etc.
• Change data source