diff --git a/package-lock.json b/package-lock.json index d30ca5a2d5dd..a072da56e676 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2822,11 +2822,11 @@ } }, "@tinkoff/ng-polymorpheus": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@tinkoff/ng-polymorpheus/-/ng-polymorpheus-2.1.0.tgz", - "integrity": "sha512-3w3b6GNHjNhEArRWv7SOY2YuQt8ELZQW6TBMV7Q/idvaMPSdWcinYq7xPFZjC2i/ha4LexHnvqXnRmhFpleo9Q==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@tinkoff/ng-polymorpheus/-/ng-polymorpheus-3.0.0.tgz", + "integrity": "sha512-I4b0c3u6XRNUb/hpXETlezK5FxQCRwyEoPYs8WQ6xnphFzHPeeSZzQjjMbp83qaJHon3go56aktv6lFoNDI3KA==", "requires": { - "tslib": "^1.9.0" + "tslib": "^1.10.0" } }, "@types/body-parser": { diff --git a/package.json b/package.json index a0120c08bd8e..1a202e3563ed 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,7 @@ "@tinkoff/angular-contenteditable-accessor": "1.1.0", "@tinkoff/ng-dompurify": "3.0.0", "@tinkoff/ng-event-plugins": "2.0.0", - "@tinkoff/ng-polymorpheus": "2.1.0", + "@tinkoff/ng-polymorpheus": "3.0.0", "angular2-text-mask": "9.0.0", "classlist.js": "^1.1.20150312", "core-js": "^2.6.9", diff --git a/projects/addon-charts/components/bar-chart/bar-chart.template.html b/projects/addon-charts/components/bar-chart/bar-chart.template.html index 6b549501f17c..17496e59a5fe 100644 --- a/projects/addon-charts/components/bar-chart/bar-chart.template.html +++ b/projects/addon-charts/components/bar-chart/bar-chart.template.html @@ -21,10 +21,11 @@ > - + > diff --git a/projects/addon-charts/components/line-chart/line-chart.template.html b/projects/addon-charts/components/line-chart/line-chart.template.html index bb67c05f8518..ea3c629b4818 100644 --- a/projects/addon-charts/components/line-chart/line-chart.template.html +++ b/projects/addon-charts/components/line-chart/line-chart.template.html @@ -72,11 +72,12 @@ [style.bottom.%]="getBottom(point[1])" > - + > diff --git a/projects/addon-charts/components/line-days-chart/line-days-chart.template.html b/projects/addon-charts/components/line-days-chart/line-days-chart.template.html index 170fa48ed28a..8dde776b3d30 100644 --- a/projects/addon-charts/components/line-days-chart/line-days-chart.template.html +++ b/projects/addon-charts/components/line-days-chart/line-days-chart.template.html @@ -14,8 +14,9 @@ [xStringify]="xStringify ? daysStringify : null" > - + > diff --git a/projects/addon-charts/components/pie-chart/pie-chart.template.html b/projects/addon-charts/components/pie-chart/pie-chart.template.html index 515d8020c18d..b4426b96b233 100644 --- a/projects/addon-charts/components/pie-chart/pie-chart.template.html +++ b/projects/addon-charts/components/pie-chart/pie-chart.template.html @@ -41,9 +41,10 @@ - + > diff --git a/projects/addon-charts/components/ring-chart/ring-chart.template.html b/projects/addon-charts/components/ring-chart/ring-chart.template.html index b1a075fb78fa..4120d3f2a9ee 100644 --- a/projects/addon-charts/components/ring-chart/ring-chart.template.html +++ b/projects/addon-charts/components/ring-chart/ring-chart.template.html @@ -1,10 +1,11 @@
- + >
=6.0.0", "@angular/core": ">=6.0.0", - "@tinkoff/ng-polymorpheus": ">=2.0.0", + "@tinkoff/ng-polymorpheus": ">=3.0.0", "@taiga-ui/cdk": "1.6.5", "@taiga-ui/core": "1.6.5" }, diff --git a/projects/addon-commerce/package.json b/projects/addon-commerce/package.json index f53a0ad1f1bc..3da0bb7ddfb1 100644 --- a/projects/addon-commerce/package.json +++ b/projects/addon-commerce/package.json @@ -17,7 +17,7 @@ "@angular/common": ">=6.0.0", "@angular/core": ">=6.0.0", "@angular/forms": ">=6.0.0", - "@tinkoff/ng-polymorpheus": ">=2.0.0", + "@tinkoff/ng-polymorpheus": ">=3.0.0", "@taiga-ui/cdk": "1.6.5", "@taiga-ui/core": "1.6.5", "angular2-text-mask": "9.0.0", diff --git a/projects/addon-doc/package.json b/projects/addon-doc/package.json index 694b4d450962..dc505feaf5d1 100644 --- a/projects/addon-doc/package.json +++ b/projects/addon-doc/package.json @@ -20,7 +20,7 @@ "@angular/forms": ">=6.0.0", "@angular/router": ">=6.0.0", "@angular-devkit/schematics": "^8.3.21", - "@tinkoff/ng-polymorpheus": ">=2.0.0", + "@tinkoff/ng-polymorpheus": ">=3.0.0", "@taiga-ui/cdk": "1.6.5", "@taiga-ui/core": "1.6.5", "@taiga-ui/kit": "1.6.5", diff --git a/projects/addon-doc/src/internal/source-code/source-code.template.html b/projects/addon-doc/src/internal/source-code/source-code.template.html index c9b59b0dd251..3aa8a4680e84 100644 --- a/projects/addon-doc/src/internal/source-code/source-code.template.html +++ b/projects/addon-doc/src/internal/source-code/source-code.template.html @@ -1,4 +1,5 @@ - - + diff --git a/projects/addon-mobile/components/mobile-dialog/mobile-dialog.template.html b/projects/addon-mobile/components/mobile-dialog/mobile-dialog.template.html index e21e38f4f869..16d0f37ef681 100644 --- a/projects/addon-mobile/components/mobile-dialog/mobile-dialog.template.html +++ b/projects/addon-mobile/components/mobile-dialog/mobile-dialog.template.html @@ -1,11 +1,12 @@

{{internal.label}}

- +> diff --git a/projects/core/components/notification/test/notification.component.spec.ts b/projects/core/components/notification/test/notification.component.spec.ts index 16af986b62a9..ea4f37d18fe0 100644 --- a/projects/core/components/notification/test/notification.component.spec.ts +++ b/projects/core/components/notification/test/notification.component.spec.ts @@ -12,26 +12,33 @@ describe('Notification', () => { @Component({ template: ` Короткое простое информационное сообщение + + + Короткое простое информационное сообщение + + `, }) class TestComponent { - @ViewChild(TuiNotificationComponent, {static: true}) + @ViewChild(TuiNotificationComponent, {static: false}) component: TuiNotificationComponent; hasCloseButton = true; hasIcon = true; status: TuiNotification = TuiNotification.Info; + + onClose() {} } let fixture: ComponentFixture; let testComponent: TestComponent; - let component: TuiNotificationComponent; let pageObject: PageObject; function getIcon(): DebugElement { @@ -55,7 +62,6 @@ describe('Notification', () => { pageObject = new PageObject(fixture); testComponent = fixture.componentInstance; fixture.detectChanges(); - component = testComponent.component; }); describe('icon', () => { @@ -64,19 +70,19 @@ describe('Notification', () => { }); it('выбирается правильно в зависимости от статуса', () => { - expect(component.icon).toBe(STATUS_ICON[testComponent.status]); + expect(testComponent.component.icon).toBe(STATUS_ICON[testComponent.status]); testComponent.status = TuiNotification.Success; fixture.detectChanges(); - expect(component.icon).toBe(STATUS_ICON[testComponent.status]); + expect(testComponent.component.icon).toBe(STATUS_ICON[testComponent.status]); testComponent.status = TuiNotification.Error; fixture.detectChanges(); - expect(component.icon).toBe(STATUS_ICON[testComponent.status]); + expect(testComponent.component.icon).toBe(STATUS_ICON[testComponent.status]); testComponent.status = TuiNotification.Warning; fixture.detectChanges(); - expect(component.icon).toBe(STATUS_ICON[testComponent.status]); + expect(testComponent.component.icon).toBe(STATUS_ICON[testComponent.status]); }); it('при hasIcon=false отсутствует', () => { @@ -88,11 +94,11 @@ describe('Notification', () => { }); describe('крестик закрытия', () => { - it('по умолчанию присутствует', () => { + it('присутствует при подписке на close', () => { expect(getClose()).not.toBeNull(); }); - it('при hasCloseButton=false отсутствует', () => { + it('без подписки на close отсутствует', () => { testComponent.hasCloseButton = false; fixture.detectChanges(); diff --git a/projects/core/components/primitive-textfield/primitive-textfield.template.html b/projects/core/components/primitive-textfield/primitive-textfield.template.html index 6a5ea0e3d23f..c91ff40956a9 100644 --- a/projects/core/components/primitive-textfield/primitive-textfield.template.html +++ b/projects/core/components/primitive-textfield/primitive-textfield.template.html @@ -45,7 +45,8 @@
- - +
- - + - - + diff --git a/projects/core/components/wrapper/wrapper.component.ts b/projects/core/components/wrapper/wrapper.component.ts index e4d66c635e86..3f3c9349c520 100644 --- a/projects/core/components/wrapper/wrapper.component.ts +++ b/projects/core/components/wrapper/wrapper.component.ts @@ -74,7 +74,7 @@ export class TuiWrapperComponent { return TuiInteractiveState.Readonly; } - if (this.pressed) { + if (this.pressed && !this.isMobile) { return TuiInteractiveState.Pressed; } diff --git a/projects/core/karma.conf.js b/projects/core/karma.conf.js index c743656e3c38..d5fc3979853c 100644 --- a/projects/core/karma.conf.js +++ b/projects/core/karma.conf.js @@ -1,4 +1,4 @@ -const base = require('../../karma.conf'); +const base = require('../../karma.config'); module.exports = function (config) { base(config); diff --git a/projects/core/modules/notifications/notification-alert/notification-alert.template.html b/projects/core/modules/notifications/notification-alert/notification-alert.template.html index c8cc7bf42784..45df38ac9c10 100644 --- a/projects/core/modules/notifications/notification-alert/notification-alert.template.html +++ b/projects/core/modules/notifications/notification-alert/notification-alert.template.html @@ -1,5 +1,5 @@ @@ -10,10 +10,29 @@ > {{safeItem.label}} - + > + + + +
+ + diff --git a/projects/core/package.json b/projects/core/package.json index 9a1050841d61..fa7e21b6cc74 100644 --- a/projects/core/package.json +++ b/projects/core/package.json @@ -23,7 +23,7 @@ "@angular/platform-browser": ">=6.0.0", "@angular/router": ">=6.0.0", "@tinkoff/ng-event-plugins": ">=2.0.0", - "@tinkoff/ng-polymorpheus": ">=2.0.0", + "@tinkoff/ng-polymorpheus": ">=3.0.0", "rxjs": ">=6.0.0" } } diff --git a/projects/demo/src/assets/images/card.jpg b/projects/demo/src/assets/images/card.jpg new file mode 100644 index 000000000000..e81847e8f3e7 Binary files /dev/null and b/projects/demo/src/assets/images/card.jpg differ diff --git a/projects/demo/src/index.html b/projects/demo/src/index.html index 4858a7a3c7ec..5deb8bbee3d5 100644 --- a/projects/demo/src/index.html +++ b/projects/demo/src/index.html @@ -5,10 +5,41 @@ - + + + + + + + + + + + + + + - - Taiga UI diff --git a/projects/demo/src/modules/app/home/examples/angular-json-styles.txt b/projects/demo/src/modules/app/home/examples/angular-json-styles.txt index a76ea0a8306e..270970bc2644 100644 --- a/projects/demo/src/modules/app/home/examples/angular-json-styles.txt +++ b/projects/demo/src/modules/app/home/examples/angular-json-styles.txt @@ -6,7 +6,8 @@ "options": { "styles": [ "src/styles.scss", - "node_modules/@taiga-ui/core/styles/taiga-ui-angular-global.less" + "node_modules/@taiga-ui/core/styles/taiga-ui-global.less", + "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less" ] } } diff --git a/projects/demo/src/modules/app/home/examples/app-module-icons.txt b/projects/demo/src/modules/app/home/examples/app-module-icons.txt index d57efbdd756d..0022308c9bc7 100644 --- a/projects/demo/src/modules/app/home/examples/app-module-icons.txt +++ b/projects/demo/src/modules/app/home/examples/app-module-icons.txt @@ -1,18 +1,9 @@ -import {TUI_SANITIZER} from '@taiga-ui/cdk'; import {iconsPathFactory, TUI_ICONS_PATH} from '@taiga-ui/core'; ... -const unsafeSanitizer: Sanitizer = { - sanitize: (_: any, value: any) => value, -}; - @NgModule({ ... providers: [ - { - provide: TUI_SANITIZER, - useValue: unsafeSanitizer, - }, { provide: TUI_ICONS_PATH, useValue: iconsPathFactory('assets/taiga-ui/icons/'), diff --git a/projects/demo/src/modules/app/home/examples/app-module-optional.txt b/projects/demo/src/modules/app/home/examples/app-module-optional.txt index a7716afe8345..ebca15d643b4 100644 --- a/projects/demo/src/modules/app/home/examples/app-module-optional.txt +++ b/projects/demo/src/modules/app/home/examples/app-module-optional.txt @@ -1,6 +1,5 @@ import {NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; -import {TuiTableBarsHostModule} from '@taiga-ui/addon-tablebars'; import { TuiNotificationsModule, TuiDialogModule, @@ -16,7 +15,6 @@ import {AppComponent} from './app.component'; imports: [ BrowserModule, TuiRootModule, - TuiTableBarsHostModule, TuiNotificationsModule, TuiDialogModule, AppRoutingModule, diff --git a/projects/demo/src/modules/app/home/examples/ie-support.txt b/projects/demo/src/modules/app/home/examples/ie-support.txt index bc61d6d0c7ca..39441eec9955 100644 --- a/projects/demo/src/modules/app/home/examples/ie-support.txt +++ b/projects/demo/src/modules/app/home/examples/ie-support.txt @@ -5,20 +5,14 @@ import {areCssVarsSupported} from '@taiga-ui/core/utils/dom'; import cssVars from 'css-vars-ponyfill'; export function bootstrapListenerFactory( - documentRef: Document, - cssRef: any, // TODO: change it to CSS if you have TS 3.9+ (https://github.com/ng-web-apis/common/pull/6) + rootElement: Document, + cssRef: CSS, userAgent: string, ): () => void { const factory = () => { - if (areCssVarsSupported(cssRef, userAgent)) { - return; + if (!areCssVarsSupported(cssRef, userAgent)) { + cssVars({rootElement, onlyLegacy: false, watch: true}); } - - cssVars({ - rootElement: documentRef, - onlyLegacy: false, - watch: true, - }); }; return factory; @@ -35,4 +29,4 @@ export function bootstrapListenerFactory( } ], }) -export class AppModule {} \ No newline at end of file +export class AppModule {} diff --git a/projects/demo/src/modules/app/home/home.template.html b/projects/demo/src/modules/app/home/home.template.html index cc44e1e0cfc6..61dc43252102 100644 --- a/projects/demo/src/modules/app/home/home.template.html +++ b/projects/demo/src/modules/app/home/home.template.html @@ -115,15 +115,14 @@
  • - Otherwise, do not forget about file type if you import styles - directly from our library + For non-LESS environment, do not forget about file type if you + import styles directly from our library
  • Many of our components need your app to be wrapped into tui-root. Import TuiRootModule in your - main module and add TuiRootScroller into providers for - correct working of Angular router + main module. Wrap all content of your app with root component

    + + Note: your window will no longer scroll. To control + scrolling when modal dialogs are shown, + tui-root tag will be topmost scroll container. + +
  • - Taiga UI has also optional modules for dialogs, notifications and - tablebars. If you need these features, add modules into your - app.module.ts + Taiga UI also has optional modules for dialogs and notifications. If + you need these features, add modules into your app.module.ts
  • - Icons do not included into library bundle. Add our standart icon - pack providing token TUI_ICONS_PATH with a function - that gets icon name and returs path to it. + Icons are not included in the bundle. To add icons provide + TUI_ICONS_PATH token with a function that gets icon + name and returns path to it.

    First of all, add icons into assets of your app:

    @@ -164,21 +168,7 @@ [code]="examples.assets" > -

    - Then you should provide path with a token. Moreover, - Sanitizer of Angular removes SVG code - and that is why you also need to reassign - TUI_SANITIZER token that is used to sanitize icons. - If you use safe icons, you can reassign it with unsafe sanitizer - from the sample below. Otherwise, we recommend you using our - library - ng-dompurify -

    +

    Then you should provide path with a token:

    Taiga UI uses CSS custom properties for styling that is not supported by Internet Explorer. - If you need to support IE 11, use this package + If you need to support IE 11, use css-vars-ponyfill + css-vars-ponyfill + + package

    Install it:

    @@ -222,6 +214,31 @@ filename="app.module.ts" [code]="examples.ieSupport" >     + +

    + Internet Explorer also does not support native + SVG inlining. Taiga UI icons will be automatically + downloaded and inlined directly into DOM. However, Angular + Sanitizer removes SVG code in that + case. To use custom sanitizer that properly supports + SVG provide TUI_SANITIZER token. We + recommend you using our library + + ng-dompurify + + to properly sanitize code with + + DOMPurify + +

    • diff --git a/projects/demo/src/modules/app/landing/landing.component.ts b/projects/demo/src/modules/app/landing/landing.component.ts index 3d98ee2f0b2e..9bb4db5e7fa8 100644 --- a/projects/demo/src/modules/app/landing/landing.component.ts +++ b/projects/demo/src/modules/app/landing/landing.component.ts @@ -1,6 +1,13 @@ -import {ChangeDetectionStrategy, Component, ElementRef, HostBinding} from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + HostBinding, + QueryList, + ViewChildren, +} from '@angular/core'; import {INTERSECTION_ROOT} from '@ng-web-apis/intersection-observer'; -import {TuiDay} from '@taiga-ui/cdk'; +import {EMPTY_QUERY, TuiDay} from '@taiga-ui/cdk'; @Component({ selector: 'landing', @@ -23,6 +30,9 @@ export class LandingComponent { readonly labels = ['New', 'Read', 'Archived', 'Junk']; + @ViewChildren('block', {read: ElementRef}) + private readonly blocks: QueryList> = EMPTY_QUERY; + @HostBinding('style.background') get background(): string { return this.current ? '#5f6ed0' : '#3dc67c'; @@ -38,6 +48,14 @@ export class LandingComponent { this.date = date; } + onClick() { + this.blocks.forEach(({nativeElement}, index) => { + if (index === this.current + 1) { + nativeElement.scrollIntoView(); + } + }); + } + stop(e?: KeyboardEvent) { if (e && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) { e.stopPropagation(); diff --git a/projects/demo/src/modules/app/landing/landing.style.less b/projects/demo/src/modules/app/landing/landing.style.less index 335b584f1c05..269c07720b10 100644 --- a/projects/demo/src/modules/app/landing/landing.style.less +++ b/projects/demo/src/modules/app/landing/landing.style.less @@ -32,7 +32,7 @@ } .footer { - position: fixed; + position: sticky; left: 0; right: 0; bottom: 0; @@ -372,10 +372,13 @@ top: 50%; left: 50%; margin: -35px -12px; - width: 25px; - height: 60px; + width: 30px; + height: 65px; border-radius: 20px; border: 3px solid rgba(0, 0, 0, 0.2); + cursor: pointer; + background: none; + outline: none; animation: bounce 1s infinite alternate; &:before, diff --git a/projects/demo/src/modules/app/landing/landing.template.html b/projects/demo/src/modules/app/landing/landing.template.html index d5726bbdb65d..953f6dde5ee8 100644 --- a/projects/demo/src/modules/app/landing/landing.template.html +++ b/projects/demo/src/modules/app/landing/landing.template.html @@ -185,6 +185,7 @@

    > Browse components -
    + by Tinkoff diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index 9cc2894691b5..0afb22fcc4cb 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -753,7 +753,7 @@ export const pages: TuiDocPages = [ }, { section: $localize`Tools`, - title: 'Декораторы', + title: $localize`Decorators`, subPages: [ { section: $localize`Tools`, @@ -780,7 +780,7 @@ export const pages: TuiDocPages = [ }, { section: $localize`Tools`, - title: 'Директивы', + title: $localize`Directives`, subPages: [ { section: $localize`Tools`, @@ -926,7 +926,7 @@ export const pages: TuiDocPages = [ }, { section: $localize`Tools`, - title: 'Пайпы', + title: $localize`Pipes`, subPages: [ { section: $localize`Tools`, @@ -965,7 +965,7 @@ export const pages: TuiDocPages = [ }, { section: $localize`Tools`, - title: 'Сервисы', + title: $localize`Services`, subPages: [ { section: $localize`Tools`, diff --git a/projects/demo/src/modules/charts/axes/axes.template.html b/projects/demo/src/modules/charts/axes/axes.template.html index 607a30f9258f..09e37eff6ebf 100644 --- a/projects/demo/src/modules/charts/axes/axes.template.html +++ b/projects/demo/src/modules/charts/axes/axes.template.html @@ -184,7 +184,7 @@
  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

    + TuiLineDaysChart is used to show data of several months to simplify working with different number of days in months diff --git a/projects/demo/src/modules/charts/line-days-chart/line-days-chart.template.html b/projects/demo/src/modules/charts/line-days-chart/line-days-chart.template.html index d3bccf75e7c9..ded5058314f8 100644 --- a/projects/demo/src/modules/charts/line-days-chart/line-days-chart.template.html +++ b/projects/demo/src/modules/charts/line-days-chart/line-days-chart.template.html @@ -137,7 +137,7 @@
  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

    = ['m', 'l']; diff --git a/projects/demo/src/modules/components/breadcrumbs/breadcrumbs.template.html b/projects/demo/src/modules/components/breadcrumbs/breadcrumbs.template.html index ea759ee7e7ad..16c421e86ad6 100644 --- a/projects/demo/src/modules/components/breadcrumbs/breadcrumbs.template.html +++ b/projects/demo/src/modules/components/breadcrumbs/breadcrumbs.template.html @@ -1,7 +1,7 @@

    - Navigation element that shows a path from root page to current + Navigation element that shows a path from root page to the current

  • -

    Add into template:

    +

    Add to the template:

    - + Link cannot be disabled. If you want to make an unactive link, remove href attribute or send an empty string into routerLink. To prevent keyboard @@ -185,7 +185,7 @@
  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

    - + Import TuiArrowModule if you need a rotated arrow @@ -95,7 +91,7 @@

    Option

  • -

    Add into template:

    +

    Add to the template:

    Rich Text Editor for using with Angular forms

    - + This component is experimental. Use it with caution. @@ -84,7 +79,7 @@
  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

    Some heading

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

    Link -

    - Previous visited link -

    +Link diff --git a/projects/demo/src/modules/components/link/link.template.html b/projects/demo/src/modules/components/link/link.template.html index 3110ddb51e52..da44ed7095a2 100644 --- a/projects/demo/src/modules/components/link/link.template.html +++ b/projects/demo/src/modules/components/link/link.template.html @@ -129,7 +129,7 @@
  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

    mode param to choose appearance or set it with custom styles

    - + Marker icons should be 48х48px or smaller. If icon is smaller, it will be cantered. @@ -101,7 +101,7 @@
  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

    Button:

    - +

    Link:

    @@ -12,4 +12,4 @@

    Island:

    - Wow! +Wow! diff --git a/projects/demo/src/modules/components/mobile-themes/examples/1/index.ts b/projects/demo/src/modules/components/mobile-themes/examples/1/index.ts index f6fb88738109..2a9e62ec7adf 100644 --- a/projects/demo/src/modules/components/mobile-themes/examples/1/index.ts +++ b/projects/demo/src/modules/components/mobile-themes/examples/1/index.ts @@ -1,4 +1,5 @@ import {Component} from '@angular/core'; +import {TUI_IS_ANDROID, TUI_IS_IOS, TUI_IS_MOBILE} from '@taiga-ui/cdk'; import {changeDetection} from '../../../../../change-detection-strategy'; import {encapsulation} from '../../../../../view-encapsulation'; @@ -7,5 +8,19 @@ import {encapsulation} from '../../../../../view-encapsulation'; templateUrl: './index.html', changeDetection, encapsulation, + providers: [ + { + provide: TUI_IS_MOBILE, + useValue: true, + }, + { + provide: TUI_IS_ANDROID, + useValue: true, + }, + { + provide: TUI_IS_IOS, + useValue: false, + }, + ], }) export class TuiMobileThemesExample1 {} diff --git a/projects/demo/src/modules/components/mobile-themes/examples/2/index.html b/projects/demo/src/modules/components/mobile-themes/examples/2/index.html index 0c5fa476006c..7d7e667e6c6f 100644 --- a/projects/demo/src/modules/components/mobile-themes/examples/2/index.html +++ b/projects/demo/src/modules/components/mobile-themes/examples/2/index.html @@ -2,14 +2,14 @@

    Button:

    - +

    Link:

    - + Let's check it

    Island:

    - Wow! +Wow! diff --git a/projects/demo/src/modules/components/mobile-themes/examples/2/index.ts b/projects/demo/src/modules/components/mobile-themes/examples/2/index.ts index d83de71c9779..d79c3807491e 100644 --- a/projects/demo/src/modules/components/mobile-themes/examples/2/index.ts +++ b/projects/demo/src/modules/components/mobile-themes/examples/2/index.ts @@ -1,4 +1,5 @@ import {Component} from '@angular/core'; +import {TUI_IS_ANDROID, TUI_IS_IOS, TUI_IS_MOBILE} from '@taiga-ui/cdk'; import {changeDetection} from '../../../../../change-detection-strategy'; import {encapsulation} from '../../../../../view-encapsulation'; @@ -7,5 +8,19 @@ import {encapsulation} from '../../../../../view-encapsulation'; templateUrl: './index.html', changeDetection, encapsulation, + providers: [ + { + provide: TUI_IS_MOBILE, + useValue: true, + }, + { + provide: TUI_IS_ANDROID, + useValue: false, + }, + { + provide: TUI_IS_IOS, + useValue: true, + }, + ], }) export class TuiMobileThemesExample2 {} diff --git a/projects/demo/src/modules/components/mobile-themes/mobile-themes.module.ts b/projects/demo/src/modules/components/mobile-themes/mobile-themes.module.ts index 617af22b7333..c17ffd9fb728 100644 --- a/projects/demo/src/modules/components/mobile-themes/mobile-themes.module.ts +++ b/projects/demo/src/modules/components/mobile-themes/mobile-themes.module.ts @@ -2,7 +2,12 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {RouterModule} from '@angular/router'; import {generateRoutes, TUI_DOC_PAGE_MODULES} from '@taiga-ui/addon-doc'; -import {TuiThemeAndroidModule, TuiThemeIosModule} from '@taiga-ui/addon-mobile'; +import { + TuiRippleModule, + TuiThemeAndroidModule, + TuiThemeIosModule, + TuiTouchableModule, +} from '@taiga-ui/addon-mobile'; import {TuiButtonModule, TuiLinkModule} from '@taiga-ui/core'; import {TuiIslandModule} from '@taiga-ui/kit'; import {TuiMobileThemesExample1} from './examples/1'; @@ -18,6 +23,8 @@ import {ExampleTuiMobileThemesComponent} from './mobile-themes.component'; TuiButtonModule, TuiLinkModule, TuiIslandModule, + TuiRippleModule, + TuiTouchableModule, ...TUI_DOC_PAGE_MODULES, RouterModule.forChild(generateRoutes(ExampleTuiMobileThemesComponent)), ], diff --git a/projects/demo/src/modules/components/mobile-themes/mobile-themes.template.html b/projects/demo/src/modules/components/mobile-themes/mobile-themes.template.html index fab943d2163c..14b999413bbf 100644 --- a/projects/demo/src/modules/components/mobile-themes/mobile-themes.template.html +++ b/projects/demo/src/modules/components/mobile-themes/mobile-themes.template.html @@ -1,7 +1,7 @@ Import TuiThemeAndroidModule into your app.module and add - tui-theme-android compoent to enable anroid theme. + tui-theme-android component to enable Android theme. TUI_IS_ANDROID can help to recognize Android user diff --git a/projects/demo/src/modules/components/money/money.template.html b/projects/demo/src/modules/components/money/money.template.html index 2a17e050b995..e734d2f5d5e9 100644 --- a/projects/demo/src/modules/components/money/money.template.html +++ b/projects/demo/src/modules/components/money/money.template.html @@ -173,7 +173,7 @@
  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

    Some content + + Some content + diff --git a/projects/demo/src/modules/components/notification/notification.component.ts b/projects/demo/src/modules/components/notification/notification.component.ts index 682a22b4125f..52ebde1d9dd7 100644 --- a/projects/demo/src/modules/components/notification/notification.component.ts +++ b/projects/demo/src/modules/components/notification/notification.component.ts @@ -26,7 +26,6 @@ export class ExampleTuiNotificationComponent { }; hasIcon = true; - hasCloseButton = true; readonly statusVariants: ReadonlyArray = [ TuiNotification.Info, diff --git a/projects/demo/src/modules/components/notification/notification.template.html b/projects/demo/src/modules/components/notification/notification.template.html index 107f0f7d5822..6c59fd1fa23c 100644 --- a/projects/demo/src/modules/components/notification/notification.template.html +++ b/projects/demo/src/modules/components/notification/notification.template.html @@ -18,23 +18,14 @@ A short simple informative message + A short simple informative message + - - Enables close cross - - Emits click on close cross + Emits click on close cross. When subscribed to, close button + appears. @@ -80,7 +72,7 @@
  • -

    Add into template:

    +

    Add to the template:

    - Принимает фокус с клавиатуры + Accepts focus with keyboard - Индекс активной страницы + Active page index - Количество страниц + Total pages count - Размер + Size @@ -101,7 +101,7 @@
  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

    - +
    It emits (pulled) event when user wants to start loading. @@ -40,7 +40,7 @@
  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

    Component for creating tabs. It emulates appearance and behaviour of - native iOS and Android components. + native iOS and Android components when + TUI_MOBILE_AWARE token is true.

    - + If you use routerLink, add also routerLinkActive directive. @@ -61,8 +62,8 @@ documentationPropertyType="number" [(documentationPropertyValue)]="itemsLimit" > - Visible tabs by default - for TabsWithMore + Visible tabs count limit + for TabsWithMore only
  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

    ( - (quantity, context) => Number.isInteger(quantity) && quantity >= context.min, - 'Should be ingeter number more than min value', + @tuiDefaultProp( + quantity => Number.isInteger(quantity) && quantity >= 5, + 'Should be integer number more than min value', ) quantity = 10; } diff --git a/projects/demo/src/modules/decorators/default-prop/default-prop.component.ts b/projects/demo/src/modules/decorators/default-prop/default-prop.component.ts index b2822075b297..3f606a6f8709 100644 --- a/projects/demo/src/modules/decorators/default-prop/default-prop.component.ts +++ b/projects/demo/src/modules/decorators/default-prop/default-prop.component.ts @@ -12,8 +12,6 @@ export class ExampleTuiDefaultPropComponent { quantity: number | undefined = 10; - min = 10; - setUndefined() { this.quantity = undefined; } diff --git a/projects/demo/src/modules/decorators/default-prop/default-prop.template.html b/projects/demo/src/modules/decorators/default-prop/default-prop.template.html index f179c124859d..975b6958a9b7 100644 --- a/projects/demo/src/modules/decorators/default-prop/default-prop.template.html +++ b/projects/demo/src/modules/decorators/default-prop/default-prop.template.html @@ -7,28 +7,29 @@ Warning: decorator overrides getter/setter of input +

    + Decorator stops undefined values if they were passed + into input. If it gets undefined, it will use default + value and show an error message about the problem in console in dev + mode. +

    +
    See - RequiredSetter + + RequiredSetter + for work with setters
    - -
    -

    See console

    +

    See console. Min value is 5

    quantity - - min -
  • -

    Add into template and subscribe to a change:

    +

    Add to the template and subscribe to a change:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

  • -

    Add into template:

    +

    Add to the template:

    Desktop Microsoft Internet Explorer - 11+ + + 11+ +
    + + See + + instructions + + on how to enable + +
    + Edge (EdgeHTML) diff --git a/projects/demo/src/modules/info/doc/doc.template.html b/projects/demo/src/modules/info/doc/doc.template.html index 326e2a116f8a..3054bc767de0 100644 --- a/projects/demo/src/modules/info/doc/doc.template.html +++ b/projects/demo/src/modules/info/doc/doc.template.html @@ -7,12 +7,15 @@ 
    npm install @taiga-ui/addon-doc
    -

    And setup with project README intructions:

    - - README.md - +

    + And use with project + + README.md + + instructions. +

    diff --git a/projects/demo/src/modules/info/related/related.template.html b/projects/demo/src/modules/info/related/related.template.html index 91c11e991b00..dea607f0af04 100644 --- a/projects/demo/src/modules/info/related/related.template.html +++ b/projects/demo/src/modules/info/related/related.template.html @@ -1,7 +1,7 @@

    - We maintain these projects by ourselves and higly recommend them for - modern Angular app + We maintain these projects ourselves and higly recommend them for modern + Angular apps

    @@ -20,9 +20,10 @@ @@ -35,10 +36,15 @@ @@ -84,7 +90,13 @@ diff --git a/projects/demo/src/modules/markup/colors/colors.template.html b/projects/demo/src/modules/markup/colors/colors.template.html index a4b87f4b1c92..15c2692c0a4b 100644 --- a/projects/demo/src/modules/markup/colors/colors.template.html +++ b/projects/demo/src/modules/markup/colors/colors.template.html @@ -4,7 +4,7 @@
    - A tiny library for polymorphic templates in Angular that - abstracts over different ways of view customization in - Angular with one simple attribute component + A tiny library that abstracts over different ways of view + customization in Angular with one simple attribute + component. + Included with @taiga-ui/cdk
    - A tiny (1KB gzip) library for optimizing change detection - cycles for performance sensitive events (such as touchmove, - scroll, drag etc.) and declarative preventDefault() and - stopPropagation(). + Angular event plugins library for optimizing change + detection cycles for performance sensitive events (such as + touchmove, scroll, + drag etc.) and declarative + preventDefault() and + stopPropagation() as well as capture phase + listeners. + Included with @taiga-ui/cdk + and enabled by TuiRootModule
    High quality lightweight wrappers for native Web APIs for - idiomatic use with Angular + idiomatic use with Angular. + + @ng-web-apis/common, + @ng-web-apis/mutation-observer and + @ng-web-apis/resize-observer are included + with @taiga-ui/cdk +
    - +
    diff --git a/projects/demo/src/modules/markup/grid/examples/1/index.html b/projects/demo/src/modules/markup/grid/examples/1/index.html index 648a597b708c..46d1a85d82b4 100644 --- a/projects/demo/src/modules/markup/grid/examples/1/index.html +++ b/projects/demo/src/modules/markup/grid/examples/1/index.html @@ -104,44 +104,3 @@ -

    Temporary layout for SME transition

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    diff --git a/projects/demo/src/modules/markup/icons/icons.module.ts b/projects/demo/src/modules/markup/icons/icons.module.ts index bef18fb83507..bd753d7c6207 100644 --- a/projects/demo/src/modules/markup/icons/icons.module.ts +++ b/projects/demo/src/modules/markup/icons/icons.module.ts @@ -5,6 +5,7 @@ import {RouterModule} from '@angular/router'; import {generateRoutes, TUI_DOC_PAGE_MODULES} from '@taiga-ui/addon-doc'; import { TuiButtonModule, + TuiHintControllerModule, TuiLinkModule, TuiSvgModule, TuiTextfieldControllerModule, @@ -23,6 +24,7 @@ import {IconsComponent} from './icons.component'; TuiInputModule, TuiButtonModule, TuiTextfieldControllerModule, + TuiHintControllerModule, ...TUI_DOC_PAGE_MODULES, RouterModule.forChild(generateRoutes(IconsComponent)), ], diff --git a/projects/demo/src/modules/markup/icons/icons.template.html b/projects/demo/src/modules/markup/icons/icons.template.html index 35c9c36393bf..d8a90ab5a202 100644 --- a/projects/demo/src/modules/markup/icons/icons.template.html +++ b/projects/demo/src/modules/markup/icons/icons.template.html @@ -1,22 +1,14 @@ -

    - Icons can be imported in a component or can be used - by its name. You can copy icon's name with a click -

    -

    - Use CSS color style to set an icon color. You can also - use fill for icons with two colors: - -

    Search by name

    - Input icons name to highlight + Input icon name to highlight

    Логотипы

    diff --git a/projects/demo/src/modules/markup/shadows/shadows.style.less b/projects/demo/src/modules/markup/shadows/shadows.style.less index ae348454d667..ecd3ad0eaf64 100644 --- a/projects/demo/src/modules/markup/shadows/shadows.style.less +++ b/projects/demo/src/modules/markup/shadows/shadows.style.less @@ -1,10 +1,5 @@ @import 'taiga-ui-local'; -.wrapper { - display: flex; - align-items: flex-start; -} - .example { display: flex; flex: 1; @@ -12,10 +7,6 @@ padding: 20px; } -.code { - flex: 1; -} - .item { .transition(box-shadow); display: flex; @@ -23,14 +14,14 @@ justify-content: center; margin-top: 40px; margin-left: 40px; - width: 160px; + width: 280px; height: 80px; border-radius: var(--tui-radius); color: var(--tui-text-03); cursor: pointer; text-align: center; - &_standart { + &_default { .shadow(); &:hover { @@ -49,4 +40,12 @@ &_sidebar { .shadow(4); } + + &_navigation { + .shadow(6); + } + + &_mobile { + .shadow(7); + } } diff --git a/projects/demo/src/modules/markup/shadows/shadows.template.html b/projects/demo/src/modules/markup/shadows/shadows.template.html index 36ac9ec59f38..53331182b133 100644 --- a/projects/demo/src/modules/markup/shadows/shadows.template.html +++ b/projects/demo/src/modules/markup/shadows/shadows.template.html @@ -1,39 +1,28 @@ -
    -
    -
    Basic shadow
    -
    Dropdown shadow
    -
    Modal shadow
    -
    Sidebar shadow
    +

    Different kinds of shadows can be applied with mixin:

    +
    +
    + + Basic shadow: .shadow(1) with + .shadow(5) when hovered + +
    +
    + Dropdown shadow: .shadow(2) +
    +
    + Modal shadow: .shadow(3) +
    +
    + Sidebar shadow: .shadow(4) +
    +
    + Navigation shadow: .shadow(6) +
    +
    + Mobile modal shadow: .shadow(7)
    - 
    -                .item {
-                    // Card
-                    &_standart {
-                        .shadow();
-
-                        &:hover {
-                            .shadow(5);
-                        }
-                    }
-
-                    // Dropdown
-                    &_dropdown {
-                        .shadow(2);
-                    }
-
-                    // Modal
-                    &_modal {
-                        .shadow(3);
-                    }
-
-                    // Sidebar
-                    &_dialog {
-                        .shadow(4);
-                    }
-                }
-
    diff --git a/projects/demo/src/modules/markup/skeleton/examples/1/index.html b/projects/demo/src/modules/markup/skeleton/examples/1/index.html index e3180b0e2c16..fefb9b9921c8 100644 --- a/projects/demo/src/modules/markup/skeleton/examples/1/index.html +++ b/projects/demo/src/modules/markup/skeleton/examples/1/index.html @@ -13,7 +13,11 @@

    -
    +
    diff --git a/projects/demo/src/modules/markup/skeleton/examples/1/index.style.less b/projects/demo/src/modules/markup/skeleton/examples/1/index.less similarity index 83% rename from projects/demo/src/modules/markup/skeleton/examples/1/index.style.less rename to projects/demo/src/modules/markup/skeleton/examples/1/index.less index b5ac74334fd2..d302a1f2fdb2 100644 --- a/projects/demo/src/modules/markup/skeleton/examples/1/index.style.less +++ b/projects/demo/src/modules/markup/skeleton/examples/1/index.less @@ -4,6 +4,10 @@ &_dark { background-image: linear-gradient(225deg, #3023ae, #c86dd7); + + & * { + color: var(--tui-text-01-night); + } } } diff --git a/projects/demo/src/modules/markup/skeleton/examples/1/index.ts b/projects/demo/src/modules/markup/skeleton/examples/1/index.ts index 37454976489b..55e0974ff7a4 100644 --- a/projects/demo/src/modules/markup/skeleton/examples/1/index.ts +++ b/projects/demo/src/modules/markup/skeleton/examples/1/index.ts @@ -6,7 +6,7 @@ import {encapsulation} from '../../../../../view-encapsulation'; @Component({ selector: 'tui-skeleton-example-1', templateUrl: './index.html', - styleUrls: ['./index.style.less'], + styleUrls: ['./index.less'], changeDetection, encapsulation, }) diff --git a/projects/demo/src/modules/markup/skeleton/examples/2/index.html b/projects/demo/src/modules/markup/skeleton/examples/2/index.html index dce479a6ce27..000f7ef18ba7 100644 --- a/projects/demo/src/modules/markup/skeleton/examples/2/index.html +++ b/projects/demo/src/modules/markup/skeleton/examples/2/index.html @@ -16,7 +16,11 @@
    -
    +

    - Use .tui-skeleton class to an element to add + Use .tui-skeleton class on an element to add skeleton of the same size above it.

    You can also use the following modifiers:

    diff --git a/projects/demo/src/modules/markup/spaces/spaces.template.html b/projects/demo/src/modules/markup/spaces/spaces.template.html index 52cee3535b89..e204083776ae 100644 --- a/projects/demo/src/modules/markup/spaces/spaces.template.html +++ b/projects/demo/src/modules/markup/spaces/spaces.template.html @@ -14,20 +14,21 @@ (tui-space_<direction>-<value>).
    - -
    Mixins are included in local LESS styles, so you need to import them into LESS styles file and add it to classes of your component
    - Mixin also gets a direction and a value (.tui-space(<direction>, <value>);). + + +

    + Mixin also gets a direction and a value ( + .tui-space(<direction>, <value>);). +

    Use .tui-table class to add Taiga styles to a table

    + + + An advanced separate @taiga-ui/table package with + interactive tables is in development + +

    Elements

      :root block in CSS to make a custom theme. You can also reassign a speficic component styles with tui-wrapper. Theme can be switched in runtime with a - ThemeSwitcher - component. + + ThemeSwitcher + + component. More advanced theming tools and techniques are planned for + future releases.

      Examples diff --git a/projects/demo/src/modules/services/dialogs/dialogs.template.html b/projects/demo/src/modules/services/dialogs/dialogs.template.html index 3c505711aed0..7bd6a3e29d6f 100644 --- a/projects/demo/src/modules/services/dialogs/dialogs.template.html +++ b/projects/demo/src/modules/services/dialogs/dialogs.template.html @@ -2,22 +2,14 @@

      Optional service to show modal windows

      - + Use TUI_DIALOGS_CLOSE token if you need to close dialog with from a stream. For example, this way you can close dialogs by routing:

      - + Do not forget to add TuiDialogModule into your app.module to use dialogs (See also "Setup" for details) diff --git a/projects/demo/src/modules/services/notifications/notifications.template.html b/projects/demo/src/modules/services/notifications/notifications.template.html index 68e975de4231..42a8c5c68172 100644 --- a/projects/demo/src/modules/services/notifications/notifications.template.html +++ b/projects/demo/src/modules/services/notifications/notifications.template.html @@ -121,7 +121,7 @@ documentationPropertyType="boolean" [(documentationPropertyValue)]="hasCloseButton" > - Has close cross + Has close button       diff --git a/projects/demo/src/modules/services/table-bar/table-bar.template.html b/projects/demo/src/modules/services/table-bar/table-bar.template.html index ae730583243e..e46275f88f64 100644 --- a/projects/demo/src/modules/services/table-bar/table-bar.template.html +++ b/projects/demo/src/modules/services/table-bar/table-bar.template.html @@ -49,7 +49,7 @@ documentationPropertyType="boolean" [(documentationPropertyValue)]="hasCloseButton" > - Enable close cross + Enable close button
    • -

      Add into template:

      +

      Add to the template:

    • -

      Add into template:

      +

      Add to the template:

    • -

      Add into template:

      +

      Add to the template:

      0; +} + /** * @internal */ @@ -65,7 +65,7 @@ export abstract class AbstractTuiInputSlider steps = 0; @Input() - @tuiDefaultProp(quantumAssertion, incorrectQuantumMessage) + @tuiDefaultProp(quantumAssertion, 'Quantum must be positive') quantum = 1; @Input() diff --git a/projects/kit/components/accordion/accordion-item/accordion-item.template.html b/projects/kit/components/accordion/accordion-item/accordion-item.template.html index d58ccab77dbd..ff4079e5b3f5 100644 --- a/projects/kit/components/accordion/accordion-item/accordion-item.template.html +++ b/projects/kit/components/accordion/accordion-item/accordion-item.template.html @@ -29,11 +29,12 @@

    - + >
    diff --git a/projects/kit/components/badged-content/badged-content.template.html b/projects/kit/components/badged-content/badged-content.template.html index 92871b3d6b89..bd6c0656794e 100644 --- a/projects/kit/components/badged-content/badged-content.template.html +++ b/projects/kit/components/badged-content/badged-content.template.html @@ -14,7 +14,8 @@ [style.boxShadow]="boxShadow" >
    - - +
    - - +
    diff --git a/projects/kit/components/calendar-month/calendar-month.component.ts b/projects/kit/components/calendar-month/calendar-month.component.ts index 8eeef2f07893..9963cc67ba34 100644 --- a/projects/kit/components/calendar-month/calendar-month.component.ts +++ b/projects/kit/components/calendar-month/calendar-month.component.ts @@ -25,12 +25,6 @@ import {TuiMonthContext} from '@taiga-ui/kit/interfaces'; import {TUI_CALENDAR_MONTHS} from '@taiga-ui/kit/tokens'; import {TuiBooleanHandlerWithContext} from '@taiga-ui/kit/types'; -function maxMonthAssertion(max: TuiMonth, context: {min: TuiMonth}): boolean { - return max.monthAfter(context.min); -} - -const incorrectMaxMessage = 'Min value must be less than max value'; - const TODAY = TuiDay.currentLocal(); // @dynamic @@ -61,7 +55,7 @@ export class TuiCalendarMonthComponent implements TuiWithOptionalMinMax min: TuiDay = TUI_FIRST_DAY; @Input() - @tuiDefaultProp(maxDayAssertion, incorrectMaxMessage) + @tuiDefaultProp() max: TuiDay = TUI_LAST_DAY; @Input() diff --git a/projects/kit/components/combo-box/combo-box.template.html b/projects/kit/components/combo-box/combo-box.template.html index 870ea13e8c72..ff9a228377b6 100644 --- a/projects/kit/components/combo-box/combo-box.template.html +++ b/projects/kit/components/combo-box/combo-box.template.html @@ -23,12 +23,13 @@ (keydown.enter)="onFieldKeyDownEnter($event)" > - + >
    diff --git a/projects/kit/components/filter/filter.template.html b/projects/kit/components/filter/filter.template.html index 443ec2aa828e..5e28ac05d9e5 100644 --- a/projects/kit/components/filter/filter.template.html +++ b/projects/kit/components/filter/filter.template.html @@ -9,10 +9,11 @@ (ngModelChange)="onCheckbox($event, item)" >
    - + >
    - +
    diff --git a/projects/kit/components/input-count/input-count.component.ts b/projects/kit/components/input-count/input-count.component.ts index eab6d8dc11e1..48db29fad0ca 100644 --- a/projects/kit/components/input-count/input-count.component.ts +++ b/projects/kit/components/input-count/input-count.component.ts @@ -35,7 +35,6 @@ import { TuiWithOptionalMinMax, TuiWithTextMask, } from '@taiga-ui/core'; -import {incorrectMaxMessage, maxAssertion} from '@taiga-ui/kit/constants'; import {TUI_PLUS_MINUS_TEXTS} from '@taiga-ui/kit/tokens'; // @dynamic @@ -66,7 +65,7 @@ export class TuiInputCountComponent min = 0; @Input() - @tuiDefaultProp(maxAssertion, incorrectMaxMessage) + @tuiDefaultProp() max = Infinity; @Input() diff --git a/projects/kit/components/input-date-range/input-date-range.component.ts b/projects/kit/components/input-date-range/input-date-range.component.ts index 6236e2bbd531..b9a3a042a6a8 100644 --- a/projects/kit/components/input-date-range/input-date-range.component.ts +++ b/projects/kit/components/input-date-range/input-date-range.component.ts @@ -48,9 +48,7 @@ import { import {TuiDayRangePeriod} from '@taiga-ui/kit/classes'; import { EMPTY_MASK, - incorrectMaxMessage, MAX_DAY_RANGE_LENGTH_MAPPER, - maxDayAssertion, TUI_DATE_RANGE_MASK, } from '@taiga-ui/kit/constants'; import {LEFT_ALIGNED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/kit/providers'; @@ -101,7 +99,7 @@ export class TuiInputDateRangeComponent min = TUI_FIRST_DAY; @Input() - @tuiDefaultProp(maxDayAssertion, incorrectMaxMessage) + @tuiDefaultProp() max = TUI_LAST_DAY; @Input() diff --git a/projects/kit/components/input-date-time/input-date-time.component.ts b/projects/kit/components/input-date-time/input-date-time.component.ts index 062d878669eb..573b16dc3435 100644 --- a/projects/kit/components/input-date-time/input-date-time.component.ts +++ b/projects/kit/components/input-date-time/input-date-time.component.ts @@ -35,12 +35,7 @@ import { TuiTextMaskOptions, TuiWithOptionalMinMax, } from '@taiga-ui/core'; -import { - DATE_TIME_SEPARATOR, - incorrectMaxMessage, - maxDayAssertion, - TUI_DATE_MASK, -} from '@taiga-ui/kit/constants'; +import {DATE_TIME_SEPARATOR, TUI_DATE_MASK} from '@taiga-ui/kit/constants'; import {LEFT_ALIGNED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/kit/providers'; import {TUI_CALENDAR_DATA_STREAM, TUI_TIME_TEXTS} from '@taiga-ui/kit/tokens'; import { @@ -76,7 +71,7 @@ export class TuiInputDateTimeComponent min = TUI_FIRST_DAY; @Input() - @tuiDefaultProp(maxDayAssertion, incorrectMaxMessage) + @tuiDefaultProp() max = TUI_LAST_DAY; @Input() diff --git a/projects/kit/components/input-date/input-date.component.ts b/projects/kit/components/input-date/input-date.component.ts index cabc165b707f..cf01a6b13af8 100644 --- a/projects/kit/components/input-date/input-date.component.ts +++ b/projects/kit/components/input-date/input-date.component.ts @@ -39,12 +39,7 @@ import { TuiWithOptionalMinMax, } from '@taiga-ui/core'; import {TuiNamedDay} from '@taiga-ui/kit/classes'; -import { - EMPTY_MASK, - incorrectMaxMessage, - maxDayAssertion, - TUI_DATE_MASK, -} from '@taiga-ui/kit/constants'; +import {EMPTY_MASK, TUI_DATE_MASK} from '@taiga-ui/kit/constants'; import {LEFT_ALIGNED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/kit/providers'; import {TUI_CALENDAR_DATA_STREAM, TUI_MOBILE_CALENDAR} from '@taiga-ui/kit/tokens'; import {tuiCreateAutoCorrectedDatePipe} from '@taiga-ui/kit/utils/mask'; @@ -78,7 +73,7 @@ export class TuiInputDateComponent min = TUI_FIRST_DAY; @Input() - @tuiDefaultProp(maxDayAssertion, incorrectMaxMessage) + @tuiDefaultProp() max = TUI_LAST_DAY; @Input() diff --git a/projects/kit/components/input-file/file/file.template.html b/projects/kit/components/input-file/file/file.template.html index f1754c1d3d70..6270bb9a9ef5 100644 --- a/projects/kit/components/input-file/file/file.template.html +++ b/projects/kit/components/input-file/file/file.template.html @@ -54,12 +54,13 @@ {{fileSize}}
    - + >     diff --git a/projects/kit/components/radio-list/radio-list.template.html b/projects/kit/components/radio-list/radio-list.template.html index 0b49c98e25bf..fcd3c4cec923 100644 --- a/projects/kit/components/radio-list/radio-list.template.html +++ b/projects/kit/components/radio-list/radio-list.template.html @@ -12,9 +12,10 @@ [ngModel]="value" (ngModelChange)="onModelChange($event)" > - + > diff --git a/projects/kit/components/select/select.template.html b/projects/kit/components/select/select.template.html index 1b76edc0824c..e7f466a96ad5 100644 --- a/projects/kit/components/select/select.template.html +++ b/projects/kit/components/select/select.template.html @@ -23,12 +23,13 @@ (keydown.backspace.prevent)="onKeyDownDelete()" > - + > diff --git a/projects/kit/components/tabs/tabs-with-more/tabs-with-more.template.html b/projects/kit/components/tabs/tabs-with-more/tabs-with-more.template.html index e46060edd9f9..39f56dce8d7f 100644 --- a/projects/kit/components/tabs/tabs-with-more/tabs-with-more.template.html +++ b/projects/kit/components/tabs/tabs-with-more/tabs-with-more.template.html @@ -35,9 +35,7 @@ [tuiFocusable]="isMoreFocusable" (keydown.arrowLeft.prevent)="onArrowLeft()" > - +
    {{moreWord}} diff --git a/projects/kit/components/tag/tag.template.html b/projects/kit/components/tag/tag.template.html index 66a49d0fa1e6..2098d7031c59 100644 --- a/projects/kit/components/tag/tag.template.html +++ b/projects/kit/components/tag/tag.template.html @@ -3,11 +3,12 @@ [style.backgroundColor]="backgroundColor" (dblclick)="edit($event)" > - + > {{displayText}} 0; -} - -export function maxAssertion(max: number, context: {min: number}): boolean { - return max >= context.min; -} - -export function maxDayAssertion(max: TuiDay, context: {min: TuiDay}): boolean { - return max.dayAfter(context.min); -} diff --git a/projects/kit/constants/assert-messages.ts b/projects/kit/constants/assert-messages.ts deleted file mode 100644 index d09eb823e653..000000000000 --- a/projects/kit/constants/assert-messages.ts +++ /dev/null @@ -1,8 +0,0 @@ -/** - * @internal - */ -export const incorrectQuantumMessage = 'Quantum must be positive'; -export const incorrectMaxMessage = 'Min value must be less than max value'; -export const incorrectLengthMessage = 'Length must be positive and bigger than index'; -export const progressIncorrectMaxValueMessage = - 'In separated mode maxValue required to be less than 10'; diff --git a/projects/kit/constants/index.ts b/projects/kit/constants/index.ts index 7f7aa3bd34da..6f3ce26fce2c 100644 --- a/projects/kit/constants/index.ts +++ b/projects/kit/constants/index.ts @@ -1,5 +1,3 @@ -export * from './assert-functions'; -export * from './assert-messages'; export * from './date-time-separator'; export * from './empty-mask'; export * from './group-class-names'; diff --git a/projects/kit/package.json b/projects/kit/package.json index 836859e04dad..78a782ac6648 100644 --- a/projects/kit/package.json +++ b/projects/kit/package.json @@ -18,7 +18,7 @@ "@angular/forms": ">= 6.0.0", "@angular/router": ">= 6.0.0", "@ng-web-apis/common": ">=1.6.0", - "@tinkoff/ng-polymorpheus": ">=2.0.0", + "@tinkoff/ng-polymorpheus": ">=3.0.0", "@taiga-ui/cdk": "1.6.5", "@taiga-ui/core": "1.6.5", "rxjs": ">=6.0.0"