From b4f4f32b43e78a47aa66cdaa6ed411c5ccb02f71 Mon Sep 17 00:00:00 2001 From: Alex Inkin Date: Wed, 23 Oct 2024 15:58:22 +0400 Subject: [PATCH] fix(core): `Notification` remove flex layout (#9580) --- .../addon-doc/components/main/main.style.less | 10 +-- .../core/components/alert/alert.style.less | 4 ++ .../core/components/alert/alert.template.html | 1 + .../core/styles/components/notification.less | 69 +++++++++++++++---- .../src/modules/app/home/home.template.html | 16 ++--- .../src/modules/app/styles-info/index.html | 12 ++-- .../modules/components/bar-chart/index.html | 20 +++--- .../components/cell/examples/7/index.html | 6 +- .../components/cell/examples/8/index.html | 6 +- .../modules/components/checkbox/index.html | 8 +-- .../modules/components/combo-box/index.html | 34 ++++----- .../src/modules/components/confirm/index.html | 20 +++--- .../modules/components/data-list/index.html | 16 ++--- .../src/modules/components/dialog/index.html | 13 ++-- .../modules/components/input-color/index.html | 26 ++++--- .../components/input-date-range/index.html | 12 ++-- .../components/input-date-time/index.html | 12 ++-- .../input-date/examples/4/index.html | 12 ++-- .../components/input-month-range/index.html | 12 ++-- .../modules/components/input-month/index.html | 12 ++-- .../components/input-number/index.html | 12 ++-- .../input-phone-international/index.html | 44 ++++++------ .../modules/components/input-phone/index.html | 12 ++-- .../modules/components/input-range/index.html | 8 +-- .../components/input-slider/index.html | 8 +-- .../modules/components/input-year/index.html | 12 ++-- .../components/input/examples/10/index.html | 14 ++-- .../src/modules/components/input/index.html | 42 +++++------ .../src/modules/components/island/index.html | 18 +++-- .../line-clamp/examples/1/index.html | 8 +-- .../line-days-chart/examples/2/index.html | 6 +- .../notification/examples/1/index.html | 5 +- .../modules/components/pdf-viewer/index.html | 50 +++++++------- .../modules/components/pie-chart/index.html | 20 +++--- .../components/primitive-textfield/index.html | 30 ++++---- .../components/pull-to-refresh/index.html | 8 +-- .../src/modules/components/radio/index.html | 22 +++--- .../src/modules/components/range/index.html | 22 +++--- .../modules/components/scrollbar/index.html | 8 +-- .../src/modules/components/select/index.html | 24 +++---- .../sheet-dialog/examples/6/index.html | 18 +++-- .../src/modules/components/sheet/index.html | 48 ++++++------- .../src/modules/components/slider/index.html | 22 +++--- .../src/modules/components/surface/index.html | 52 +++++++------- .../src/modules/components/switch/index.html | 8 +-- .../src/modules/components/tab-bar/index.html | 20 +++--- .../src/modules/components/tabs/index.html | 12 ++-- .../src/modules/components/tag/index.html | 18 +++-- .../modules/components/textarea/index.html | 12 ++-- .../src/modules/directives/hint/index.html | 12 ++-- .../src/modules/directives/resizer/index.html | 10 ++- .../modules/directives/sensitive/index.html | 12 ++-- .../demo/src/modules/info/browsers/index.html | 16 ++--- .../modules/info/migration-guide/index.html | 38 +++++----- .../src/modules/markup/typography/index.html | 26 ++++--- .../pipes/stringify-content/index.html | 18 +++-- .../src/modules/pipes/stringify/index.html | 32 ++++----- 57 files changed, 489 insertions(+), 579 deletions(-) diff --git a/projects/addon-doc/components/main/main.style.less b/projects/addon-doc/components/main/main.style.less index 5d13729e8630..d8e2fb7fac6c 100644 --- a/projects/addon-doc/components/main/main.style.less +++ b/projects/addon-doc/components/main/main.style.less @@ -47,7 +47,7 @@ code:not(pre code) { .transition(background); display: inline-flex; - background: var(--tui-background-base-alt); + background: var(--tui-background-neutral-1); color: var(--tui-text-secondary); vertical-align: middle; align-items: center; @@ -60,14 +60,6 @@ code:not(pre code) { //noinspection CssInvalidPropertyValue text-wrap: wrap; - tui-notification & { - mix-blend-mode: color-burn; - } - - [tuiTheme='dark'] tui-notification & { - mix-blend-mode: luminosity; - } - a & { color: var(--tui-text-action); } diff --git a/projects/core/components/alert/alert.style.less b/projects/core/components/alert/alert.style.less index 8329a9c41c21..2ab116e99a0b 100644 --- a/projects/core/components/alert/alert.style.less +++ b/projects/core/components/alert/alert.style.less @@ -17,3 +17,7 @@ margin-bottom: 0 !important; } } + +.t-closeable { + padding-inline-end: 2.5rem; +} diff --git a/projects/core/components/alert/alert.template.html b/projects/core/components/alert/alert.template.html index 8aea0e829192..298bca998a2f 100644 --- a/projects/core/components/alert/alert.template.html +++ b/projects/core/components/alert/alert.template.html @@ -1,6 +1,7 @@ diff --git a/projects/core/styles/components/notification.less b/projects/core/styles/components/notification.less index 606f1aeeb4af..d72e487a272e 100644 --- a/projects/core/styles/components/notification.less +++ b/projects/core/styles/components/notification.less @@ -26,38 +26,66 @@ tui-notification, .button-clear(); position: relative; - display: flex; + display: block; max-block-size: 100%; color: var(--tui-text-primary); - gap: 0.5rem; padding: 1rem; font: var(--tui-font-text-m); line-height: 1.5rem; border-radius: var(--tui-radius-l); box-sizing: border-box; - overflow: hidden; text-align: start; text-decoration: none; + border-inline-start: var(--t-left) solid transparent; + border-inline-end: var(--t-right) solid transparent; + + --t-left: 0; + --t-right: 0; + + &[style*='--t-icon-start:'] { + --t-left: 2rem; + } + + &[style*='--t-icon-end:'] { + --t-right: 1.5rem; + } + + &::before { + position: absolute; + left: -1rem; + } &::after { + .center-top(); + + right: -0.5rem; font-size: 1rem; margin: 0 -0.25rem 0 auto; - align-self: center; color: var(--tui-text-tertiary) !important; } &[data-size='s'] { - gap: 0.5rem; padding: 0.375rem 0.625rem; font: var(--tui-font-text-s); line-height: 1.25rem; border-radius: var(--tui-radius-m); - &::before, + &[style*='--t-icon-start:'] { + --t-left: 1.5rem; + } + + &::before { + top: 0.5rem; + left: -0.875rem; + font-size: 1rem; + } + + &::after { + right: -0.875rem; + } + tui-icon { font-size: 1rem; - margin-top: 0.125rem; - margin-bottom: 0.125rem; } [tuiTitle] { @@ -75,18 +103,30 @@ tui-notification, } > [tuiIconButton] { - margin: -0.375rem -0.625rem -0.375rem auto; + top: 0; + right: 0; } } &[data-size='m'] { - gap: 0.375rem; padding: 0.75rem; font: var(--tui-font-text-s); line-height: 1.25rem; border-radius: var(--tui-radius-m); - &::before, + &[style*='--t-icon-start:'] { + --t-left: 1.625rem; + } + + &::before { + left: -0.875rem; + font-size: 1.25rem; + } + + &::after { + right: -0.75rem; + } + tui-icon { font-size: 1.25rem; } @@ -106,7 +146,8 @@ tui-notification, } > [tuiIconButton] { - margin: -0.375rem -0.25rem -0.375rem auto; + top: 0.375rem; + right: 0.5rem; } } @@ -129,9 +170,11 @@ tui-notification, } > [tuiIconButton] { + position: absolute; + top: 0.75rem; + right: 0.75rem; box-shadow: none !important; background: transparent !important; - margin: -0.25rem -0.25rem -0.25rem auto; } } diff --git a/projects/demo/src/modules/app/home/home.template.html b/projects/demo/src/modules/app/home/home.template.html index 9f7489b9fb54..d27714b46fc1 100644 --- a/projects/demo/src/modules/app/home/home.template.html +++ b/projects/demo/src/modules/app/home/home.template.html @@ -34,15 +34,13 @@

Automatic install Taiga UI (recommended)

/> - - Note: - If you want to add Taiga UI to a project that is not using the latest major version of Angular, make sure to - install the appropriate version of - @angular/cdk - and - @angular/animations - first to prevent dependency conflicts. - + Note: + If you want to add Taiga UI to a project that is not using the latest major version of Angular, make sure to + install the appropriate version of + @angular/cdk + and + @angular/animations + first to prevent dependency conflicts.

Manual

diff --git a/projects/demo/src/modules/app/styles-info/index.html b/projects/demo/src/modules/app/styles-info/index.html index 260ae3a68304..aceefb500061 100644 --- a/projects/demo/src/modules/app/styles-info/index.html +++ b/projects/demo/src/modules/app/styles-info/index.html @@ -1,9 +1,7 @@ -
- To use this you need to add optional - @taiga-ui/styles - package and include - @taiga-ui/styles/taiga-ui-global.less - in your global styles -
+ To use this you need to add optional + @taiga-ui/styles + package and include + @taiga-ui/styles/taiga-ui-global.less + in your global styles diff --git a/projects/demo/src/modules/components/bar-chart/index.html b/projects/demo/src/modules/components/bar-chart/index.html index b0d8e6066bbd..c03d79e116a3 100644 --- a/projects/demo/src/modules/components/bar-chart/index.html +++ b/projects/demo/src/modules/components/bar-chart/index.html @@ -29,17 +29,15 @@ [content]="2 | tuiExample" > -
- Use - - Hint - - directive to enable hints with - tuiHintContent -
+ Use + + Hint + + directive to enable hints with + tuiHintContent diff --git a/projects/demo/src/modules/components/cell/examples/7/index.html b/projects/demo/src/modules/components/cell/examples/7/index.html index 29ee4fd0e359..4e5055dc12e6 100644 --- a/projects/demo/src/modules/components/cell/examples/7/index.html +++ b/projects/demo/src/modules/components/cell/examples/7/index.html @@ -1,8 +1,6 @@ -
- Don't forget import - TuiCardLarge -
+ Don't forget import + TuiCardLarge
-
- Can be attached as host directive: - hostDirectives: [TuiConnected] -
+ Can be attached as host directive: + hostDirectives: [TuiConnected]
-
- Use - --tui-background-accent-2 - CSS variable to customize color of native control emulation -
+ Use + --tui-background-accent-2 + CSS variable to customize color of native control emulation diff --git a/projects/demo/src/modules/components/combo-box/index.html b/projects/demo/src/modules/components/combo-box/index.html index 1835174a62c5..0659a6d63107 100644 --- a/projects/demo/src/modules/components/combo-box/index.html +++ b/projects/demo/src/modules/components/combo-box/index.html @@ -17,13 +17,11 @@ [content]="1 | tuiExample: 'html,ts,less'" > -
- If you need to set some attributes or listen to events on native - input - , you can put it inside with - Textfield - directive as shown below -
+ If you need to set some attributes or listen to events on native + input + , you can put it inside with + Textfield + directive as shown below @@ -41,13 +39,11 @@ [content]="8 | tuiExample: 'html,ts'" > -
- If you receive your id to text mapping from the server, you would need to recreate - items - and - stringify - when new data comes, so they will be observables and you would need async pipe in the template -
+ If you receive your id to text mapping from the server, you would need to recreate + items + and + stringify + when new data comes, so they will be observables and you would need async pipe in the template @@ -89,12 +85,10 @@ . -
- Note that virtual scroll can imperatively remove focused option from DOM. This causes - ExpressionChange errors and to solve those take a look at a tiny - IndexChange - directive included in this example. -
+ Note that virtual scroll can imperatively remove focused option from DOM. This causes ExpressionChange + errors and to solve those take a look at a tiny + IndexChange + directive included in this example. diff --git a/projects/demo/src/modules/components/confirm/index.html b/projects/demo/src/modules/components/confirm/index.html index 360d0fcaef80..fe087dbf75cc 100644 --- a/projects/demo/src/modules/components/confirm/index.html +++ b/projects/demo/src/modules/components/confirm/index.html @@ -16,17 +16,15 @@

-
- See - - this example - - to learn how to use confirm to prevent data loss on forms inside other modals -
+ See + + this example + + to learn how to use confirm to prevent data loss on forms inside other modals -
- Use - TuiDataListDropdownManager - for nested menus -
+ Use + TuiDataListDropdownManager + for nested menus @@ -52,11 +50,9 @@ [content]="5 | tuiExample" > -
- Use - TuiDataListDropdownManager - for nested menus -
+ Use + TuiDataListDropdownManager + for nested menus diff --git a/projects/demo/src/modules/components/dialog/index.html b/projects/demo/src/modules/components/dialog/index.html index 0bf6bbd3790b..71eade511ac2 100644 --- a/projects/demo/src/modules/components/dialog/index.html +++ b/projects/demo/src/modules/components/dialog/index.html @@ -18,14 +18,11 @@

-
- Use - - TUI_DIALOGS_CLOSE - - token if you need to close dialog with from a stream. For example, this way you can close dialogs by - logout -
+ Use + + TUI_DIALOGS_CLOSE + + token if you need to close dialog with from a stream. For example, this way you can close dialogs by logout diff --git a/projects/demo/src/modules/components/input-color/index.html b/projects/demo/src/modules/components/input-color/index.html index 90ba5519bc28..02108f842280 100644 --- a/projects/demo/src/modules/components/input-color/index.html +++ b/projects/demo/src/modules/components/input-color/index.html @@ -33,20 +33,18 @@ [content]="4 | tuiExample" > -
- You can easily integrative native color picker into input using interactive icon content and - - Maskito - - for masking -
+ You can easily integrative native color picker into input using interactive icon content and + + Maskito + + for masking diff --git a/projects/demo/src/modules/components/input-date-range/index.html b/projects/demo/src/modules/components/input-date-range/index.html index 8062594485d9..95e39d7895d6 100644 --- a/projects/demo/src/modules/components/input-date-range/index.html +++ b/projects/demo/src/modules/components/input-date-range/index.html @@ -80,13 +80,11 @@

DI-tokens for input-configurations:

[content]="1 | tuiExample: 'html,ts'" > -
- If you need to set some attributes or listen to events on native - input - , you can put it inside with - Textfield - directive as shown below -
+ If you need to set some attributes or listen to events on native + input + , you can put it inside with + Textfield + directive as shown below diff --git a/projects/demo/src/modules/components/input-date-time/index.html b/projects/demo/src/modules/components/input-date-time/index.html index f90dc982a54d..3d4024ba6cfd 100644 --- a/projects/demo/src/modules/components/input-date-time/index.html +++ b/projects/demo/src/modules/components/input-date-time/index.html @@ -60,13 +60,11 @@

DI-tokens for input-configurations:

[content]="1 | tuiExample: 'html,ts'" > -
- If you need to set some attributes or listen to events on native - input - , you can put it inside with - Textfield - directive as shown below -
+ If you need to set some attributes or listen to events on native + input + , you can put it inside with + Textfield + directive as shown below diff --git a/projects/demo/src/modules/components/input-date/examples/4/index.html b/projects/demo/src/modules/components/input-date/examples/4/index.html index 085bc3ea0d88..820b583d2c02 100644 --- a/projects/demo/src/modules/components/input-date/examples/4/index.html +++ b/projects/demo/src/modules/components/input-date/examples/4/index.html @@ -1,11 +1,9 @@ -
- If you need to set some attributes or listen to events on native - input - , you can put it inside with - Textfield - directive as shown below -
+ If you need to set some attributes or listen to events on native + input + , you can put it inside with + Textfield + directive as shown below Choose a date diff --git a/projects/demo/src/modules/components/input-month-range/index.html b/projects/demo/src/modules/components/input-month-range/index.html index 6b08c24ef514..634ea4cd7906 100644 --- a/projects/demo/src/modules/components/input-month-range/index.html +++ b/projects/demo/src/modules/components/input-month-range/index.html @@ -13,13 +13,11 @@ [content]="1 | tuiExample: 'html,ts'" > -
- If you need to set some attributes or listen to events on native - input - , you can put it inside with - Textfield - directive as shown below -
+ If you need to set some attributes or listen to events on native + input + , you can put it inside with + Textfield + directive as shown below diff --git a/projects/demo/src/modules/components/input-month/index.html b/projects/demo/src/modules/components/input-month/index.html index 21ed8185b4d0..c2f0619bcd99 100644 --- a/projects/demo/src/modules/components/input-month/index.html +++ b/projects/demo/src/modules/components/input-month/index.html @@ -13,13 +13,11 @@ [content]="1 | tuiExample: 'html,ts'" > -
- If you need to set some attributes or listen to events on native - input - , you can put it inside with - Textfield - directive as shown below -
+ If you need to set some attributes or listen to events on native + input + , you can put it inside with + Textfield + directive as shown below diff --git a/projects/demo/src/modules/components/input-number/index.html b/projects/demo/src/modules/components/input-number/index.html index 0ef63b58ea7e..1f2a2103e5b5 100644 --- a/projects/demo/src/modules/components/input-number/index.html +++ b/projects/demo/src/modules/components/input-number/index.html @@ -98,13 +98,11 @@

There are also other components to input numbers:

-
- If you need to set some attributes or listen to events on native - input - , you can put it inside with - Textfield - directive as shown below -
+ If you need to set some attributes or listen to events on native + input + , you can put it inside with + Textfield + directive as shown below diff --git a/projects/demo/src/modules/components/input-phone-international/index.html b/projects/demo/src/modules/components/input-phone-international/index.html index fe28073e1af2..b96bea4b55b9 100644 --- a/projects/demo/src/modules/components/input-phone-international/index.html +++ b/projects/demo/src/modules/components/input-phone-international/index.html @@ -28,32 +28,30 @@

-
+ + libphonenumber + + is an ultimate phone number formatting and parsing library developed by + Google + . + +

+ This library - libphonenumber + collects - is an ultimate phone number formatting and parsing library developed by - Google - . - -

- This library - - collects - - the latest phone number rules from ITU documents, user bug reports, telecom company home pages and - government telecommunication authorities. It is always up-to-date (for more than 10 years), and - releases are published almost every month. It means that - InputPhoneInternational - has the robust source of truth! -

-
+ the latest phone number rules from ITU documents, user bug reports, telecom company home pages and + government telecommunication authorities. It is always up-to-date (for more than 10 years), and releases + are published almost every month. It means that + InputPhoneInternational + has the robust source of truth! +

-
- If you need to set some attributes or listen to events on native - input - , you can put it inside with - Textfield - directive as shown below -
+ If you need to set some attributes or listen to events on native + input + , you can put it inside with + Textfield + directive as shown below diff --git a/projects/demo/src/modules/components/input-range/index.html b/projects/demo/src/modules/components/input-range/index.html index e03dd928ee0e..4ee8d4ec5461 100644 --- a/projects/demo/src/modules/components/input-range/index.html +++ b/projects/demo/src/modules/components/input-range/index.html @@ -77,11 +77,9 @@ [content]="4 | tuiExample" > -
- Use mixin - tui-slider-ticks-labels - to arrange ticks' labels (it places them strictly below ticks). -
+ Use mixin + tui-slider-ticks-labels + to arrange ticks' labels (it places them strictly below ticks). diff --git a/projects/demo/src/modules/components/input-slider/index.html b/projects/demo/src/modules/components/input-slider/index.html index 120df98a6d3a..0538555605a9 100644 --- a/projects/demo/src/modules/components/input-slider/index.html +++ b/projects/demo/src/modules/components/input-slider/index.html @@ -42,11 +42,9 @@ [content]="2 | tuiExample" > -
- Use mixin - tui-slider-ticks-labels - to arrange ticks' labels (it places them strictly below ticks). -
+ Use mixin + tui-slider-ticks-labels + to arrange ticks' labels (it places them strictly below ticks). diff --git a/projects/demo/src/modules/components/input-year/index.html b/projects/demo/src/modules/components/input-year/index.html index a159b496ca8e..01e970861c62 100644 --- a/projects/demo/src/modules/components/input-year/index.html +++ b/projects/demo/src/modules/components/input-year/index.html @@ -13,13 +13,11 @@ [content]="1 | tuiExample: 'html,ts'" > -
- If you need to set some attributes or listen to events on native - input - , you can put it inside with - Textfield - directive as shown below -
+ If you need to set some attributes or listen to events on native + input + , you can put it inside with + Textfield + directive as shown below diff --git a/projects/demo/src/modules/components/input/examples/10/index.html b/projects/demo/src/modules/components/input/examples/10/index.html index 726e2956b946..b743bd935c32 100644 --- a/projects/demo/src/modules/components/input/examples/10/index.html +++ b/projects/demo/src/modules/components/input/examples/10/index.html @@ -25,10 +25,8 @@

-
- autocomplete=off - is largely ignored in modern browsers - primarily due to password managers etc. -
+ autocomplete=off + is largely ignored in modern browsers - primarily due to password managers etc.
@@ -44,9 +42,7 @@

-
- This is a hint, which browsers are not required to comply with. However modern browsers have stopped autofilling - elements with - autocomplete="new-password" -
+ This is a hint, which browsers are not required to comply with. However modern browsers have stopped autofilling + elements with + autocomplete="new-password" diff --git a/projects/demo/src/modules/components/input/index.html b/projects/demo/src/modules/components/input/index.html index dea0bac54952..5fe7efabc156 100644 --- a/projects/demo/src/modules/components/input/index.html +++ b/projects/demo/src/modules/components/input/index.html @@ -109,13 +109,11 @@ [content]="1 | tuiExample: 'html,ts'" > -
- If you need to set some attributes or listen to events on native - input - , you can put it inside with - Textfield - directive as shown below -
+ If you need to set some attributes or listen to events on native + input + , you can put it inside with + Textfield + directive as shown below @@ -133,25 +131,21 @@ [content]="3 | tuiExample: 'html,ts'" > -
- Taiga UI input is compatible with - - Maskito - -
+ Taiga UI input is compatible with + + Maskito + -
- TuiUnmaskHandler - allows to store value without mask in form control -
+ TuiUnmaskHandler + allows to store value without mask in form control diff --git a/projects/demo/src/modules/components/island/index.html b/projects/demo/src/modules/components/island/index.html index 66f955ab7267..aa168790ef5d 100644 --- a/projects/demo/src/modules/components/island/index.html +++ b/projects/demo/src/modules/components/island/index.html @@ -5,16 +5,14 @@ > -
- This component is deprecated in favor of - - Card - - component -
+ This component is deprecated in favor of + + Card + + component
Islands show information in rounded block with a border
diff --git a/projects/demo/src/modules/components/line-clamp/examples/1/index.html b/projects/demo/src/modules/components/line-clamp/examples/1/index.html index b63dba9dff08..6cdf249ce717 100644 --- a/projects/demo/src/modules/components/line-clamp/examples/1/index.html +++ b/projects/demo/src/modules/components/line-clamp/examples/1/index.html @@ -7,11 +7,9 @@

-
- Use - white-space: nowrap - to expand to the right -
+ Use + white-space: nowrap + to expand to the right
diff --git a/projects/demo/src/modules/components/line-days-chart/examples/2/index.html b/projects/demo/src/modules/components/line-days-chart/examples/2/index.html index e8a343a85179..7e508b959ec9 100644 --- a/projects/demo/src/modules/components/line-days-chart/examples/2/index.html +++ b/projects/demo/src/modules/components/line-days-chart/examples/2/index.html @@ -1,8 +1,6 @@ -
- TuiLineDaysChart - is used to show data of several months to simplify working with different number of days in months -
+ TuiLineDaysChart + is used to show data of several months to simplify working with different number of days in months

-

+
I am title
I am content of the notification and I can even wrap to multiple lines.
diff --git a/projects/demo/src/modules/components/pdf-viewer/index.html b/projects/demo/src/modules/components/pdf-viewer/index.html index 608a787aba33..760250f35e76 100644 --- a/projects/demo/src/modules/components/pdf-viewer/index.html +++ b/projects/demo/src/modules/components/pdf-viewer/index.html @@ -10,32 +10,30 @@ appearance="warning" class="tui-space_top-5" > -
- PDF display in browsers is handled by each browser independently, using their own homegrown or 3rd-party - code, as this is not part of the HTML spec. Keep in mind most mobile devices do not support displaying - PDFs in iframe. Check it - - here - - . The only way to enforce rendering consistency in all browsers is to do the rendering server-side, - bundle your own JS PDF renderer, or use a 3rd-party rendering service. If you want to display it - yourself, so you need to rely on - TUI_IS_MOBILE - token to provide suitable alternative behavior. For example, you can use third-party service - https://drive.google.com/viewerng/viewer?embedded=true&url=$YOUR_PUBLIC_PATH_TO_PDF - or your own service to render PDF by - - pdf.js. - -
+ PDF display in browsers is handled by each browser independently, using their own homegrown or 3rd-party + code, as this is not part of the HTML spec. Keep in mind most mobile devices do not support displaying PDFs + in iframe. Check it + + here + + . The only way to enforce rendering consistency in all browsers is to do the rendering server-side, bundle + your own JS PDF renderer, or use a 3rd-party rendering service. If you want to display it yourself, so you + need to rely on + TUI_IS_MOBILE + token to provide suitable alternative behavior. For example, you can use third-party service + https://drive.google.com/viewerng/viewer?embedded=true&url=$YOUR_PUBLIC_PATH_TO_PDF + or your own service to render PDF by + + pdf.js. + -
- Use - - Hint - - directive to enable hints with - tuiHintContent -
+ Use + + Hint + + directive to enable hints with + tuiHintContent diff --git a/projects/demo/src/modules/components/primitive-textfield/index.html b/projects/demo/src/modules/components/primitive-textfield/index.html index 79bc92ed487f..0444cba74fce 100644 --- a/projects/demo/src/modules/components/primitive-textfield/index.html +++ b/projects/demo/src/modules/components/primitive-textfield/index.html @@ -5,16 +5,14 @@ > -
- This component is deprecated, use new - - Textfield - - instead to build your custom textfield controls -
+ This component is deprecated, use new + + Textfield + + instead to build your custom textfield controls

PrimitiveTextfield is a flexible string input that can be used as a base for complex inputs. Use it as a @@ -39,13 +37,11 @@ [content]="2 | tuiExample: 'html,ts'" > -

- If you need to set some attributes or listen to events on native - input - , you can put it inside with - Textfield - directive as shown below -
+ If you need to set some attributes or listen to events on native + input + , you can put it inside with + Textfield + directive as shown below diff --git a/projects/demo/src/modules/components/pull-to-refresh/index.html b/projects/demo/src/modules/components/pull-to-refresh/index.html index c3b1369db301..2ef3d0e33882 100644 --- a/projects/demo/src/modules/components/pull-to-refresh/index.html +++ b/projects/demo/src/modules/components/pull-to-refresh/index.html @@ -23,11 +23,9 @@

-
- Use - overscroll-behavior: none; - CSS on your scrolling container to stop elastic scrolling on iOS -
+ Use + overscroll-behavior: none; + CSS on your scrolling container to stop elastic scrolling on iOS A radio component that is able to imitate native control on mobile platforms.

-
- Use - --tui-background-accent-2 - CSS variable to customize color of native control emulation -
+ Use + --tui-background-accent-2 + CSS variable to customize color of native control emulation -
- Due to internal Angular implementation of radio buttons, you are required to add - name - attribute to your - input - tag, unless you are using - formControlName -
+ Due to internal Angular implementation of radio buttons, you are required to add + name + attribute to your + input + tag, unless you are using + formControlName +

+ Use mixin + tui-slider-ticks-labels + to arrange ticks' labels (it places them strictly below ticks). +

-

- Use mixin - tui-slider-ticks-labels - to arrange ticks' labels (it places them strictly below ticks). -

-
- The mixin accepts only a single argument – size of the slider ( - m - or - s - ). -
+ The mixin accepts only a single argument – size of the slider ( + m + or + s + ).
diff --git a/projects/demo/src/modules/components/scrollbar/index.html b/projects/demo/src/modules/components/scrollbar/index.html index 4356e337b22f..08e5f1e889cd 100644 --- a/projects/demo/src/modules/components/scrollbar/index.html +++ b/projects/demo/src/modules/components/scrollbar/index.html @@ -12,11 +12,9 @@

Native scrollbar is hidden to keep native platform scroll experience

-
- Use - TUI_SCROLL_REF - token to get a scrollable container. For example, when working with virtual scroll. -
+ Use + TUI_SCROLL_REF + token to get a scrollable container. For example, when working with virtual scroll. -
- If you need to set some attributes or listen to events on native - input - , you can put it inside with - Textfield - directive as shown below -
+ If you need to set some attributes or listen to events on native + input + , you can put it inside with + Textfield + directive as shown below @@ -114,13 +112,11 @@ [content]="11 | tuiExample: 'html,ts'" > -
- You can enable native select on mobile devices by putting - select - inside with - tuiSelect - directive as shown below -
+ You can enable native select on mobile devices by putting + select + inside with + tuiSelect + directive as shown below diff --git a/projects/demo/src/modules/components/sheet-dialog/examples/6/index.html b/projects/demo/src/modules/components/sheet-dialog/examples/6/index.html index 2a0750f84316..182d71573348 100644 --- a/projects/demo/src/modules/components/sheet-dialog/examples/6/index.html +++ b/projects/demo/src/modules/components/sheet-dialog/examples/6/index.html @@ -1,14 +1,12 @@ -
- Taiga UI watches for - visualViewport - changes and updates following CSS variables automatically: - --tui-viewport-x - --tui-viewport-y - --tui-viewport-width - --tui-viewport-height - --tui-viewport-scale -
+ Taiga UI watches for + visualViewport + changes and updates following CSS variables automatically: + --tui-viewport-x + --tui-viewport-y + --tui-viewport-width + --tui-viewport-height + --tui-viewport-scale

-
- This component is deprecated in favor of - - Chip - - component -
+ This component is deprecated in favor of + + Chip + + component

diff --git a/projects/demo/src/modules/components/textarea/index.html b/projects/demo/src/modules/components/textarea/index.html index c1c784cd23fe..9c790b8c46e5 100644 --- a/projects/demo/src/modules/components/textarea/index.html +++ b/projects/demo/src/modules/components/textarea/index.html @@ -41,13 +41,11 @@ [content]="5 | tuiExample: 'html,ts'" > -

- If you need to set some attributes or listen to events on native - textarea - , you can put it inside with - Textfield - directive as shown below -
+ If you need to set some attributes or listen to events on native + textarea + , you can put it inside with + Textfield + directive as shown below diff --git a/projects/demo/src/modules/directives/hint/index.html b/projects/demo/src/modules/directives/hint/index.html index ab4739537383..d836710915ed 100644 --- a/projects/demo/src/modules/directives/hint/index.html +++ b/projects/demo/src/modules/directives/hint/index.html @@ -17,13 +17,11 @@ *ngIf="index === 1" class="tui-space_bottom-4" > -
- Make sure - *tuiHint - directive is nested inside - tuiHint - directive so that dependency injection works properly -
+ Make sure + *tuiHint + directive is nested inside + tuiHint + directive so that dependency injection works properly diff --git a/projects/demo/src/modules/directives/resizer/index.html b/projects/demo/src/modules/directives/resizer/index.html index 46ff6b8b715c..99bbeef1a579 100644 --- a/projects/demo/src/modules/directives/resizer/index.html +++ b/projects/demo/src/modules/directives/resizer/index.html @@ -14,12 +14,10 @@ [fullsize]="true" > -
- If you need to react to the new size somehow, you can subscribe to - (tuiSizeChange) - event of type - [x: number, y: number] -
+ If you need to react to the new size somehow, you can subscribe to + (tuiSizeChange) + event of type + [x: number, y: number] diff --git a/projects/demo/src/modules/directives/sensitive/index.html b/projects/demo/src/modules/directives/sensitive/index.html index 3bb691d2dcba..3c425be83265 100644 --- a/projects/demo/src/modules/directives/sensitive/index.html +++ b/projects/demo/src/modules/directives/sensitive/index.html @@ -23,13 +23,11 @@ [content]="2 | tuiExample: 'html,ts'" > -
- Buttons have - gap - style configured for icons, avatars and other similar content. Wrap your text in - span - so it does not affect you. -
+ Buttons have + gap + style configured for icons, avatars and other similar content. Wrap your text in + span + so it does not affect you. diff --git a/projects/demo/src/modules/info/browsers/index.html b/projects/demo/src/modules/info/browsers/index.html index 4af62386960a..4e0f51203525 100644 --- a/projects/demo/src/modules/info/browsers/index.html +++ b/projects/demo/src/modules/info/browsers/index.html @@ -37,15 +37,13 @@

Mobile

- + See our + + browserslist config + diff --git a/projects/demo/src/modules/info/migration-guide/index.html b/projects/demo/src/modules/info/migration-guide/index.html index 523559c22cb0..84f0ed854d33 100644 --- a/projects/demo/src/modules/info/migration-guide/index.html +++ b/projects/demo/src/modules/info/migration-guide/index.html @@ -33,27 +33,25 @@

Prerequisites

command. -
- If you use Yarn or cannot get rid of - legacy-peer-deps - flag – this step cannot be skipped, but you should be ready to make some - additional manual efforts - to resolve all transitive peer dependencies. + If you use Yarn or cannot get rid of + legacy-peer-deps + flag – this step cannot be skipped, but you should be ready to make some + additional manual efforts + to resolve all transitive peer dependencies. -

- See - - this guide - - from - Troubleshooting - section. -

-
+

+ See + + this guide + + from + Troubleshooting + section. +

diff --git a/projects/demo/src/modules/markup/typography/index.html b/projects/demo/src/modules/markup/typography/index.html index 926179510676..bae0e43a7c64 100644 --- a/projects/demo/src/modules/markup/typography/index.html +++ b/projects/demo/src/modules/markup/typography/index.html @@ -1,20 +1,18 @@ -
- To use classes you need to add optional - @taiga-ui/styles - package and include - @taiga-ui/styles/taiga-ui-global - in your global styles. - - Read more. - -
+ To use classes you need to add optional + @taiga-ui/styles + package and include + @taiga-ui/styles/taiga-ui-global + in your global styles. + + Read more. +

Heading

diff --git a/projects/demo/src/modules/pipes/stringify-content/index.html b/projects/demo/src/modules/pipes/stringify-content/index.html index f5898a142da0..2f081e72f575 100644 --- a/projects/demo/src/modules/pipes/stringify-content/index.html +++ b/projects/demo/src/modules/pipes/stringify-content/index.html @@ -17,16 +17,14 @@ [content]="1 | tuiExample: 'html,ts'" > -
- With - - FilterByInput - - pipe. -
+ With + + FilterByInput + + pipe. diff --git a/projects/demo/src/modules/pipes/stringify/index.html b/projects/demo/src/modules/pipes/stringify/index.html index 24c297733216..4f5baf1671d6 100644 --- a/projects/demo/src/modules/pipes/stringify/index.html +++ b/projects/demo/src/modules/pipes/stringify/index.html @@ -15,23 +15,21 @@ [content]="1 | tuiExample: 'html,ts'" > - + With + + FilterByInput + + and + + StringifyContent + + pipes.