[BUG] ProgressCircle is in docs but does not work

[rvalitov]

🐞 Bug report

Description

Component is described in docs https://taiga-ui.dev/components/progress-circle but does not work.

Error:

 error NG8001: 'tui-progress-circle' is not a known element:
1. If 'tui-progress-circle' is an Angular component, then verify that it is part of this module.
2. If 'tui-progress-circle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Reproduction

Run the Stackblitz example of the API sandbox https://taiga-ui.dev/components/progress-circle

Expected behavior

Supposed to work

Versions

• @taiga-ui/cdk@2.17.0

Additional context

N/A

[waterplea]

@nsbarsukov we need to add new module to our StackBlitz modules array.

[nsbarsukov]

@rvalitov Thanks for the bug report! I have made PR with adding new modules to stackblitz starter. But stackblitz has some problems with installing of fresh versions of npm packages: https://github.com/stackblitz/core/issues/1605

Probably, even after merging this PR you will not be able to open ProgressCircle untill stackblitz understands that new @taiga-ui/kit@2.17.0 was released.

[rvalitov]

@nsbarsukov Thank you for your comment. Please let me know if I'm able to use the ProgressCircle in my code locally. Is it really released? The problem is that this component does not work both in my IDE and stackblitz. In my IDE the error appears when I run ng serve with the following text that I initially specified:

error NG8001: 'tui-progress-circle' is not a known element:
1. If 'tui-progress-circle' is an Angular component, then verify that it is part of this module.
2. If 'tui-progress-circle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

[rvalitov]

It seems I resolved the problem. When I used a command ng add taiga-ui, it inserted the following lines to the package.json:

"@taiga-ui/addon-charts": "2.16.3",
    "@taiga-ui/addon-mobile": "^2.16.3",
    "@taiga-ui/addon-table": "2.16.3",
    "@taiga-ui/cdk": "2.16.3",
    "@taiga-ui/core": "2.16.3",
    "@taiga-ui/icons": "2.16.3",
    "@taiga-ui/kit": "2.16.3",

I was expecting that all the modules will be with upgradable with "^" version symbol. However, only one of them was. And when I run the command npm upgrade I saw that Taiga was upgraded, but I didn't check that only a single package was upgraded, not all of them. After fixing the package file, it works now.

I think that the ng add taiga-ui should not link to static versions of the Taiga, it should make upgradable code. And make it universal (either all packages are upgradable or all packages are not upgradable).

[waterplea]

@vladimirpotekhin what do you think, let's make all packages upgradable? Should be fine as long as we follow semver.

[rvalitov]

Still does not work properly. After a proper upgrader to 2.17.0 I'm able to put the ProgressCircle on page, but does never draw the progress. I tried different CSS styles or using the [color] property of the component: still it has no effect. For example, this is how the sample code from the docs is supposed to render:

In my case:

Any idea what I may doing wrong?

[waterplea]

@rvalitov we use binging to CSS variable under the hood:

@Input()
@HostBinding('style.--tui-progress-color')
@tuiDefaultProp()
color: string | null = null;

This only works in Ivy. What version of Angular are you using? Do you have Ivy enabled? It should fallback to --tui-primary though so this might not be your issue.

[nsbarsukov]

@rvalitov do you have any errors in console ?

[rvalitov]

I use Angular 12.2.7. No errors in console.

[rvalitov]

Yes, Ivy is enabled by default.

[nsbarsukov]

@rvalitov I reopen the issue. We will investigate it.

[nsbarsukov]

@rvalitov Thank you again for your help!

This component has some problems with prod build. In next release it should be fixed.