🐞 Bug report

Description

Reproduction

https://stackblitz.com/edit/taiga-starter?file=src%2Fapp%2Fapp.component.html

Expected behavior

Versions

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Angular [e.g. 8]
• Package [e.g. @taiga-ui/[email protected]]

Additional context

🐞 Bug report

Description

On a smaller screen when the tabs get hidden.

The more option does not work: (and the background colors seem a bit of)

Reproduction

https://taiga-ui.dev/tui-tabs#complex

Expected behavior

Should expand the more options.

Versions

• OS: [e.g. Windows]
• Browser [e.g. chrome]
• Angular: Demo

Hello!

Can't understand how to set dataTransfer

I think setData must set in tuiDragStart, is it true?
But I can't get data in tuiDroppableDragOverChange

source code
https://stackblitz.com/edit/taigacdk?file=src%2Fapp%2Fapp.component.html

🚀 Feature request

will be great to have the same component

https://fomantic-ui.com/modules/sidebar.html

InternationalInputPhone has a default list of countries with names in Russian. It would be better to have it in Eng with a russian version as an alternative

🚀 Feature request

Add a service to detect dark mode preference.

Let's make a package with providers for different languages. It will translate all Taiga UI components with one simple import

How to use:

import {RUSSIAN_PROVIDER} from '@taiga-ui/i18n';
...
{
  imports: [TuiRootModule, ...],
  providers: [RUSSIAN_PROVIDER],
  ...
}
export class AppModule {}

🐞 Bug report

Description

Wrapper

No TS template:
https://youtu.be/JK0Fp7bQ52w?t=757

Icons

Wrong less file:
https://youtu.be/JK0Fp7bQ52w?t=1800

🚀 Feature request

Is your feature request related to a problem?

We need to have a way to display dynamic tables with various data, filters, pagination etc

Describe the solution you'd like

Here's an approximate example:
https://www.primefaces.org/primeng/showcase/#/table

Describe alternatives you've considered

Using CSS:
https://taiga-ui.dev/tables

Additional context

Design is ready internally, development should start soon

Are you going to implement something from the list below ?

Examples from NgPrime components:
OrganizationChart - https://www.primefaces.org/primeng/showcase/#/organizationchart
Tree - https://www.primefaces.org/primeng/showcase/#/tree
DataGrid with sorting, filtering, editing, local and remote datasource - https://www.primefaces.org/primeng/showcase/#/table
TreeTable - https://www.primefaces.org/primeng/showcase/#/treetable

🚀 Feature request

What is a good UI for InputTime?

The drop-down list seems to be a pretty good solution when you have just a few time options. However the drop-down list doesn't seem to be a good fit for a generic time input that should accept all possible times of a day - or in my use-case every 5 minutes between 8:00am and 11:00pm.

So this feature request is to think about a good UI for entering times. Here are some existing solutions:

• analog-like https://cutt.ly/Xh8Ri8h, but doesn't work as good as I initially thought... maybe it's because the user has to click/touch twice in whitespace (no real target) to turn the clock hand in the right direction
• sliders https://cutt.ly/6h8Ryrx, but they are fiddly / unprecise
• multi-columns https://cutt.ly/0h8Rcet, but visually not pleasing
• arrows above/below hours/minutes https://cutt.ly/Oh8RgUs, this is currently my favourite type and works for touch input as well as mouse/keyboard

I hope someone with background in human/machine interaction and visually pleasing interfaces has a ground-breaking idea for a better InputTime visualisation... but the one with the arrows above/below hours and minutes might be a good starting point.

I had a hard time changing the tuiInput from LTR to RTL and I couldn't change the placeholder.

🚀 Feature request

Is your feature request related to a problem?

If one opens the given link to the doc page or search and chose some stuff (component/directive/...) or just reload the page the side panel will be not synced with the opened doc page. Sometimes it may be really hard to find related pages inside the side panel since it contains a lot of links and groups.

Describe the solution you'd like

Would be nice to see synced side panel to easily find related stuff especially when there are exist a few types, eg inputs, charts, etc

Good day!
The question is in the headline without a catch.

I follow your project, I really like it.

I am looking for a library for Angular and yours is very encouraging.

Libraries that I looked at have a number of disadvantages:

1. a small number of components;
2. long-term elimination of errors;
3. "curve" design.

I would like to use one ecosystem to build the interface.

I like Quasar (https://quasar.dev/), but he Vue.

And I'm interested in: NX - Angular - NestJs

Question: are you planning Taiga UI - complete ecosystem?
If so, what are the dates?

Thank you :-)

🐞 Bug report

Description

On mobile, the datepicker of InputDate immediately closes after it has been opened.

Reproduction

Open the datepicker on mobile at https://taiga-ui.dev/tui-input-date by clicking on the calendar icon.

Expected behavior

The datepicker stays open and is usable.

Versions

• OS: Android
• Browser: Chrome
• Angular: 9
• Package: @taiga-ui/core

Additional context

🐞 Bug report

Description

Content shakes during animation. Adding will-change will fix such behaviour.

Reproduction

https://taiga-ui.dev/tui-action/Setup

Versions

• OS: macOs
• Browser Google Chrome Version 87.0.4280.141
• TuiActionModule

Additional context

🚀 Feature request

will be great to have the same component

https://fomantic-ui.com/modules/rating.html

🚀 Feature request

We need to add a guide on how to use different icon set. Perhaps a whole section on customisation with instructions on different aspects, such as theme, custom dialogs, etc.

🐞 Bug report

Description

The close button for dialogs seems to be missing regardless of the settings of closeable input.

Reproduction

• Head to https://taiga-ui.dev/tui-dialog-service/API?closeable=true
• Open the dialog
• Check if the close button is missing

Expected behavior

A close button is shown in the corner of the dialog.

🐞 Bug report

Description

The Dialog will not close when clicking on the box shadow and not the background:

Expected behavior

Dialog should close

Versions

• OS: Windows
• Browser chrome
• Angular 10
• Package [e.g. @taiga-ui/[email protected]]

🚀 Feature request

Now I am trying to use taiga from devexpress ui kit.
(https://devexpress.github.io/ThemeBuilder/advanced/generic/darkmoon/base.common/)
I read this article .Input change to material appearance .
https://taiga-ui.dev/wrapper
Because of taiga build in ui design it is hard to maintain css and customize to material design.
Is there any way fast apply material design in taiga all components.

Hi!
When I try to open the page https://taiga-ui.dev/tui-tabs the application becomes broken, UI on holding.

🐞 Bug report

Description

The editor has Russian text.

Reproduction

https://stackblitz.com/edit/taiga-starter-dtl6lb

Expected behavior

Create a Token to manipulate Font and Code values

Additional context

https://github.com/TinkoffCreditSystems/taiga-ui/blob/main/projects/addon-editor/components/toolbar/toolbar.component.ts#L95,L127

🚀 Feature request

Is your feature request related to a problem?

Describe the solution you'd like

All sizes, except borders and such should be switched from PX to REM.

🚀 Feature request

Is your feature request related to a problem?

I would like to adjust the default values for several inputs on different components. In our project for instance, we would like to use the checkbox component in size l. Given the current implementation, we need to add the size input to every checkbox. It would be nice to globally define the default values via a configuration provider. Similar functionality exists on Angular Material and other frameworks.

Describe the solution you'd like

import {TUI_CHECKBOX_DEFAULT_OPTIONS} from '@taiga-ui/kit';
...
{
  imports: [TuiRootModule, ...],
  providers: [{
    provide: TUI_CHECKBOX_DEFAULT_OPTIONS,
    useValue: {
      size: 'l'
    }
  }],
  ...
}
export class AppModule {}

Describe alternatives you've considered

The only alternative currently is to set the size input on every checkbox.

Additional context

Ideally, this would be available for every component and not only for checkboxes. We can help provide PRs if you like the idea.

🚀 Feature request

Is your feature request related to a problem?

Last release of angular2-text-mask was about 3 years ago. Currently this project is not maintained. Using this library results in a build-time warning:
Warning: /node_modules/@taiga-ui/kit/ivy_ngcc/fesm2015/taiga-ui-kit-components-input-range.js depends on 'angular2-text-mask'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

There is a possibility to switch off this warning. But I'm always frustrated when something can cause optimization bailouts. =)

Describe the solution you'd like

Maybe it would be better to migrate to ngx-mask (https://github.com/JsDaddy/ngx-mask). This project looks alive.

Describe alternatives you've considered

Additional context

🚀 Feature request

Is your feature request related to a problem?

If one quickly wants to reproduce a bug from the demo page. Or play around. Developers intend to copy and paste the HTML, TS, and Style content into StackBlitz.

Most of the time there are module error because other modules were used in the same example.

Describe the solution you'd like

Would be nice to know all the modules involved in each example. This will help devs understand how modular the Taiga UI approach really is.

Or even better, a StackBlitz for each example 😄

Additional context

Screenshot from Angular Material:

🚀 Feature request

Is your feature request related to a problem?

For a given file type I would like to display a little icon to make the file easily recognizable. Think of a folder listing on the browser or a simple list of files that could be prefixed with such a component.

Describe the solution you'd like

A simple icon component wrapper that receives the MIME type as an input and displays the respective icon. A set of icons is predefined (e.g. for image, video, audio, text, ...) bit additional icons can be configured using a provider.

Hi, this is a really great project and I would like to implement it in future apps.

What is the the current compatibility status for ionic-angular?

🐞 Bug report

Description

My default gets changed to night mode (because of browser settings).

When I switch to day mode. Not all text is visible.

Reproduction

Browser should be on dark mode.
getting-started

Switch to light. The below happens:

Then

I did realize after investigation that this only happens when:

export const changeDetection = ChangeDetectionStrategy.OnPush;

Expected behavior

Versions

• OS: Windows
• Browser Chrome
• Angular Demo

Additional context

The below attribute on the links never changed:

Sometimes we want to be able to have different implementations of dialogs in the same app. We should make DIALOGS a multi-token and have services contain DIALOG implementation inside.

it seems like some user agents have changed and now our isFirefox util function does not match modern Firefox

🐞 Bug report

Description

SVG icons not rendering, throwing XSS warning and instead of icons printing SafeValue must use [property]=binding: (see https://g.co/ng/security#xss) on the page.

What am I missing?

Reproduction

app.module.ts

// ...
providers: [
    {
      provide: Sanitizer,
      useClass: NgDompurifySanitizer,
    }
  ],
// ...

my.component.ts

// ...
import { tuiIconPin, tuiIconCheckList } from '@taiga-ui/icons';
// ...
readonly mapIcon = tuiIconPin;
readonly lstIcon = tuiIconCheckList;
// ...

my.component.html

<!-- ... -->
<tui-tabs>
      <button tuiTab
              type="button">
        <tui-svg [src]="mapIcon"
                 class="tui-space_right-2"></tui-svg>
        Maps
      </button>
      <button tuiTab
              type="button">
        <tui-svg [src]="lstIcon"
                 class="tui-space_right-2"></tui-svg>
        Settings
      </button>
    </tui-tabs>
<!-- ... -->

Expected behavior

Rendered icons :)

Versions

• OS: [e.g. iOS]
• Browser: Chrome
• Angular: 11
• Taiga: 2.2.1

🚀 Feature request

will be great to have the same component

https://fomantic-ui.com/elements/loader.html

🚀 Feature request

Describe the solution you'd like

Let's return setNativeFocused polyfill for IE/Safari with some refactors for Taiga UI

🚀 Feature request

Is your feature request related to a problem?

Describe the solution you'd like

Describe alternatives you've considered

Additional context

🚀 Could you describe some examples to use this API.

I think it's useful for tabs and stepper components?

🚀 Refactoring request

Is your feature request related to a problem?

I would like to contribute to the tests, but most of them are written in Russian.

Describe the solution you'd like

Tests should be translated to english.

🚀 Feature request

Describe the solution you'd like

be able to use the mixins with SASS

Hi,

Thanks for this awesome library. I haven't started fully using it yet but planning to. I've just noticed the library is compiled against Angular 9 (https://github.com/TinkoffCreditSystems/taiga-ui/blob/main/package.json#L57) and enabling ivy on stack blitz (https://stackblitz.com/edit/taiga?file=tsconfig.json) results in a failed build. Is there plans to upgrade to Angular 11 and support ivy in the near future?

🚀 Feature request

Is your feature request related to a problem?

We are in need of contextual buttons that indicate success or danger.

Describe the solution you'd like

Buttons appearance mode should also support "Success" and "Error" and use the colors already defined in the current colors set.

Additional context

🚀 Feature request

Is your feature request related to a problem?

No

Describe the solution you'd like

Ability to show currency symbol at the beginning of a number input field rather than just a suffix.

Additional context

The InputNumber component currently displays currency symbol at the end using the [postfix] property, which depending on the country this might be fine, but would be great to have the ability to specify a [prefix] property value where this would be fixed to the left and data entry would occur after this value.

🚀 Feature request

will be great to have the same component

https://fomantic-ui.com/modules/dimmer.html

🐞 Bug report

Description

InputPhoneInternational component page on documentation site has broken pics for icons, representing some countries like Russia, USA. But for some countries icons are not broken.

Reproduction

1. Go to https://taiga-ui.dev/tui-input-phone-international
2. See broken icons on the right of the input and in select.

Expected behavior

The icons should be visible

Versions

• OS: MacOS Catalina 10.15.7
• Browser Chrome 87.0.4280.141 (also Safari 14)

🚀 Feature request

Describe the solution you'd like

There is no progress indicator like a progress bar or ring in this library. This is quite common in other libraries and should also be implemented in taiga-ui.

Describe alternatives you've considered

The slider can be used with read only, but this is not realy a solution.

Additional context

This is a good example:
https://ng.ant.design/components/progress/en

Hi!
I have the example with adaptive grid.
https://gist.githubusercontent.com/AnteaterKit/0f0f3fcf64d3b6db7359e8ccd4ebb83f/raw/ce7031a3148535e039d167f36c0025953b85ec1a/grid

May be add padding-bottom and padding-top in some media queries?

🐞 [valueContent] of Tui Select doesn't work with 0 as value

Reproduction

select "Option 0"
https://stackblitz.com/edit/taiga-starter-dgk5ua?file=src%2Fapp%2Fapp.component.html

Expected behavior

[valueContent] for 0 value should work the same as for other numbers ("Option 0" and not "0")

Versions

• Windows 10
• Browser chrome
• Angular 11
• Package [email protected]

🚀 Add schematics to the easy creating apps. Drop and Dialog schematics.

Schematic helps to setup a project with taiga CDK.

We can to discuss it and I can help. What do you think?

🚀 Improve type checking for tuiLet

Is your feature request related to a problem?

Angular language service doesn't provide type checkng for value produced by expression *tuiLet="someValue$ | async as value". The same expression with ngIf works just fine.

Describe the solution you'd like

I'm guessing tuiLet is missing ngTemplateContextGuard as described here

Additional context

The problem occurs in VS Code with Angular Language Service extension.

Sometimes we have something like readonly items we got from DI. They will never change so they will not spoil pureness of methods if we use them. However tuiPure currently has no access to this in methods, which is also inconsistent with its getters implementation. We should add access to this.