From 81430fee88f6295748e2b35521353dac4817ebd7 Mon Sep 17 00:00:00 2001 From: Barsukov Nikita Date: Wed, 27 Jul 2022 17:28:30 +0300 Subject: [PATCH] feat(kit)!: `InputRange` remove all deprecated API (#2215) --- .../input-range/examples/1/index.html | 1 - .../input-range/examples/2/index.html | 1 - .../input-range/examples/4/index.html | 1 - .../input-range/examples/5/index.html | 1 - .../input-range/input-range.component.ts | 19 +- .../input-range/input-range.template.html | 117 +-------- projects/kit/abstract/index.ts | 1 - projects/kit/abstract/input-slider.ts | 166 ------------ .../input-range/input-range.component.ts | 74 +++--- .../input-range/input-range.module.ts | 10 +- .../input-range/input-range.style.less | 8 +- .../input-range/input-range.template.html | 49 +--- .../test/input-range.component.spec.ts | 241 ++++++++---------- .../kit/components/range/range.component.ts | 11 - projects/kit/components/range/range.module.ts | 6 +- 15 files changed, 166 insertions(+), 540 deletions(-) delete mode 100644 projects/kit/abstract/input-slider.ts diff --git a/projects/demo/src/modules/components/input-range/examples/1/index.html b/projects/demo/src/modules/components/input-range/examples/1/index.html index 0048b1f2e76c..afed9edac51a 100644 --- a/projects/demo/src/modules/components/input-range/examples/1/index.html +++ b/projects/demo/src/modules/components/input-range/examples/1/index.html @@ -1,5 +1,4 @@ > = [ - ['year', 'years', 'years'], + readonly pluralizeVariants: ReadonlyArray> = [ {one: 'thing', few: 'things', many: 'things', other: 'things'}, { one: 'year', @@ -82,17 +81,7 @@ export class ExampleTuiInputRangeComponent extends AbstractExampleTuiControl { }, ]; - pluralize: TuiPluralize | Record | null = null; - - segmentsPluralize: Record | TuiPluralize | null = null; - - minLabelVariants: readonly string[] = ['', 'Nothing']; - - minLabel = this.minLabelVariants[0]; - - maxLabelVariants: readonly string[] = ['', 'Everything']; - - maxLabel = this.maxLabelVariants[0]; + pluralize: Record | null = null; keyStepsVariants: readonly TuiKeySteps[] = [[[50, 1000]]]; diff --git a/projects/demo/src/modules/components/input-range/input-range.template.html b/projects/demo/src/modules/components/input-range/input-range.template.html index 7f7083aed1bf..bbdb9cb38cfc 100644 --- a/projects/demo/src/modules/components/input-range/input-range.template.html +++ b/projects/demo/src/modules/components/input-range/input-range.template.html @@ -17,29 +17,6 @@

- -

- This component is being refactored. Soon (next major release) you will see the fresh - version of it! -

-

- Of course, we keep backward compatibility in mind (for 2.x.x). You can still use old version of - InputRange - . -

- -

- However, if you are going to use this component, we recommend to use new version. To enable the "new - version"-mode, add - new - directive. Example:  - <tui‑input‑range new ...> -

- - Just a very long label. Don't afraid it does not overflow the wrapper, the label is just cut off with ellipsis when it does not fit the wrapper. @@ -258,18 +230,22 @@ i18n documentationPropertyName="pluralize" documentationPropertyMode="input" - documentationPropertyType="TuiPluralize | Record" + documentationPropertyType="Record" [documentationPropertyValues]="pluralizeVariants" [(documentationPropertyValue)]="pluralize" > - Plural forms for labels. TuiPluralize array is deprecated. Use object that mimics the - - ICU format - - for i18nPlural + Plural forms for labels. + +

+ Use object that mimics the + + ICU format + + for i18nPlural +

Component is read only - - Size - -

- Use - tuiTextfieldSize - instead. -

- - - Label for min value - -

- Use - leftValueContent - instead. -

- - - Label for max value - -

- Use - rightValueContent - instead. -

- - - Plural forms for - segments - -

- See examples how to create ticks without this property (outside of the component). -

-
0; -} - -/** - * @internal - * @deprecated TODO: 3.0 delete me after `InputSlider` and `InputRange` stop using it - */ -@Directive() -export abstract class AbstractTuiInputSlider - extends AbstractTuiControl - implements TuiWithOptionalMinMax -{ - @Input() - @tuiDefaultProp() - min = 0; - - @Input() - @tuiDefaultProp() - max = Infinity; - - /** - * @deprecated This input-property will be deleted in next major update. - * Use `valueContent` for `InputSlider`. - * Use `leftValueContent` for `InputRange`. - * ___ - * TODO remove in v3.0. - * Dont forget to delete backward-compatibility helpers inside `InputSlider` and `InputRange`: - *** {@link legacyMinMaxLabel} - */ - @Input() - @tuiDefaultProp() - minLabel = ``; - - /** - * @deprecated This input-property will be deleted in next major update. - * Use `valueContent` for `InputSlider`. - * Use `rightValueContent` for `InputRange`. - * ___ - * TODO remove in v3.0. - * Dont forget to delete backward-compatibility helpers inside `InputSlider` and `InputRange`: - *** {@link legacyMinMaxLabel} - */ - @Input() - @tuiDefaultProp() - maxLabel = ``; - - // TODO: remove setter in v3.0: - @Input() - @tuiDefaultProp() - set pluralize(pluralize: TuiPluralize | Record | null) { - this.pluralizeMap = Array.isArray(pluralize) - ? tuiPluralizeToICU(pluralize) - : pluralize; - } - - /** - * @deprecated This input-property will be deleted in next major update. - * You can create ticks labels below this input by yourself. It is easy! - * Mixin `tui-slider-ticks-labels` will help with it. See examples in demo page `InputSlider`. - * ___ - * TODO remove in v3.0. - * Dont forget to delete: - *** {@link segmentsPluralizeMap} - *** {@link getTickPrefix} - *** TuiFormatNumberPipeModule - *** TuiRepeatTimesModule - */ - @Input() - @tuiDefaultProp() - set segmentsPluralize(pluralize: TuiPluralize | Record | null) { - this.segmentsPluralizeMap = Array.isArray(pluralize) - ? tuiPluralizeToICU(pluralize) - : pluralize; - } - - @Input() - @tuiDefaultProp() - segments = 0; - - @Input() - @tuiDefaultProp() - steps = 0; - - @Input() - @tuiDefaultProp(quantumAssertion, `Quantum must be positive`) - quantum = 1; - - @Input() - @tuiDefaultProp() - keySteps: TuiKeySteps | null = null; - - /** - * @deprecated use `tuiTextfieldSize` instead - * TODO delete in v3.0 - */ - @Input() - @HostBinding(`attr.data-size`) - @tuiDefaultProp() - size: TuiSizeL = `l`; - - /** - * @deprecated replace by input-property {@link pluralize} in v3.0 - */ - pluralizeMap: Record | null = null; - /** @deprecated TODO remove in v3.0 */ - segmentsPluralizeMap: Record | null = null; - /** @deprecated TODO remove in v3.0 */ - readonly pluralizeMapFallback = { - one: ``, - few: ``, - many: ``, - other: ``, - }; - - /** @deprecated TODO remove in v3.0 */ - @tuiPure - getTickPrefix(segment: number, segments: number, texts: [string, string]): string { - if (segments !== 1) { - return ``; - } - - return segment === 0 ? `${texts[0]}` : `${texts[1]}`; - } - - @HostBinding(`class._segmented`) - get segmented(): boolean { - return this.segments > 0; - } - - get length(): number { - return this.max - this.min; - } - - get computedSteps(): number { - return this.steps || this.length / this.quantum; - } - - get step(): number { - return this.length / this.computedSteps; - } - - get computedKeySteps(): TuiKeySteps { - return this.computePureKeySteps(this.keySteps, this.min, this.max); - } - - @tuiPure - private computePureKeySteps( - keySteps: TuiKeySteps | null, - min: number, - max: number, - ): TuiKeySteps { - return [[0, min], ...(keySteps || []), [100, max]]; - } -} diff --git a/projects/kit/components/input-range/input-range.component.ts b/projects/kit/components/input-range/input-range.component.ts index 53041c2bf47d..7326209aa411 100644 --- a/projects/kit/components/input-range/input-range.component.ts +++ b/projects/kit/components/input-range/input-range.component.ts @@ -5,7 +5,6 @@ import { Directive, ElementRef, forwardRef, - HostBinding, Inject, Input, Optional, @@ -16,6 +15,7 @@ import { } from '@angular/core'; import {NgControl} from '@angular/forms'; import { + AbstractTuiControl, clamp, EMPTY_QUERY, round, @@ -34,12 +34,11 @@ import { TUI_TEXTFIELD_WATCHED_CONTROLLER, TuiDecimal, tuiGetFractionPartPadded, - TuiSizeL, TuiTextfieldController, + TuiWithOptionalMinMax, } from '@taiga-ui/core'; -import {AbstractTuiInputSlider, quantumAssertion} from '@taiga-ui/kit/abstract'; import {TuiInputNumberComponent} from '@taiga-ui/kit/components/input-number'; -import {TuiNewRangeDirective, TuiRangeComponent} from '@taiga-ui/kit/components/range'; +import {TuiRangeComponent} from '@taiga-ui/kit/components/range'; import {TUI_FLOATING_PRECISION} from '@taiga-ui/kit/constants'; import {TuiKeySteps} from '@taiga-ui/kit/types'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; @@ -49,6 +48,10 @@ import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; selector: 'tui-input-range', templateUrl: './input-range.template.html', styleUrls: ['./input-range.style.less'], + host: { + '[attr.data-size]': 'controller.size', + '[class._label-outside]': 'controller.labelOutside', + }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [ { @@ -57,21 +60,10 @@ import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; }, TEXTFIELD_CONTROLLER_PROVIDER, ], - host: { - /** - * TODO: 3.0 delete it - * Dont forget to clear html-tags - */ - '[class._show-ticks-labels]': '!isNew', - }, }) -/** - * `AbstractTuiInputSlider` includes all legacy code (it can be deleted in v3.0) - * TODO replace `extends AbstractTuiInputSlider<[number, number]>` by `extends AbstractTuiControl<[number, number]> implements TuiWithOptionalMinMax` - */ export class TuiInputRangeComponent - extends AbstractTuiInputSlider<[number, number]> - implements TuiFocusableElementAccessor + extends AbstractTuiControl<[number, number]> + implements TuiWithOptionalMinMax, TuiFocusableElementAccessor { @ViewChildren(TuiInputNumberComponent) private readonly inputNumberRefs: QueryList = EMPTY_QUERY; @@ -83,22 +75,27 @@ export class TuiInputRangeComponent @tuiDefaultProp() min = 0; - /* TODO: make `100` as default value (like in native sliders) */ @Input() @tuiDefaultProp() - max = Infinity; + max = 100; @Input() - @tuiDefaultProp(quantumAssertion, 'Quantum must be positive') + @tuiDefaultProp(q => q > 0, '[quantum] must be positive') quantum = 1; @Input() - @tuiDefaultProp() + @tuiDefaultProp( + s => s >= 0 && Number.isInteger(s), + '[steps] must be non-negative integer', + ) steps = 0; @Input() - @tuiDefaultProp() - segments = 0; + @tuiDefaultProp( + s => s > 0 && Number.isInteger(s), + '[segments] must be positive integer', + ) + segments = 1; @Input() @tuiDefaultProp() @@ -112,6 +109,10 @@ export class TuiInputRangeComponent @tuiDefaultProp() rightValueContent: PolymorpheusContent> = ''; + @Input() + @tuiDefaultProp() + pluralize: Record | null = null; + lastActiveSide: 'left' | 'right' = 'left'; constructor( @@ -127,9 +128,6 @@ export class TuiInputRangeComponent @Inject(ElementRef) private readonly elementRef: ElementRef, @Inject(TUI_TEXTFIELD_WATCHED_CONTROLLER) readonly controller: TuiTextfieldController, - @Optional() - @Inject(TuiNewRangeDirective) - readonly isNew: TuiNewRangeDirective | null, ) { super(control, changeDetectorRef); } @@ -154,7 +152,7 @@ export class TuiInputRangeComponent get showLeftValueContent(): boolean { return Boolean( - (this.minLabel || this.leftValueContent) && + this.leftValueContent && !tuiIsNativeFocused(this.leftFocusableElement) && !(this.rangeRef?.focused && this.lastActiveSide === 'left'), ); @@ -162,7 +160,7 @@ export class TuiInputRangeComponent get showRightValueContent(): boolean { return Boolean( - (this.maxLabel || this.rightValueContent) && + this.rightValueContent && !tuiIsNativeFocused(this.rightFocusableElement) && !(this.rangeRef?.focused && this.lastActiveSide === 'right'), ); @@ -180,15 +178,8 @@ export class TuiInputRangeComponent return this.steps || (this.max - this.min) / this.quantum; } - get computedSize(): TuiSizeL { - return this.isNew && this.controller.size !== 's' - ? this.controller.size - : this.size; - } - - @HostBinding('class._label-outside') - get legacyLabelOutside(): boolean { - return this.isNew ? this.controller.labelOutside : this.computedSize === 'm'; + get step(): number { + return (this.max - this.min) / this.computedSteps; } onActiveZone(active: boolean): void { @@ -306,19 +297,14 @@ export class TuiInputRangeComponent } } -export function tuiTextfieldAppearanceDirectiveFactory({ - nativeElement, -}: ElementRef): string { - return nativeElement.getAttribute('tuiTextfieldAppearance'); -} - @Directive({ selector: '[tuiTextfieldAppearance]', providers: [ { provide: TUI_TEXTFIELD_APPEARANCE, deps: [ElementRef], - useFactory: tuiTextfieldAppearanceDirectiveFactory, + useFactory: ({nativeElement}: ElementRef) => + nativeElement.getAttribute('tuiTextfieldAppearance'), }, ], }) diff --git a/projects/kit/components/input-range/input-range.module.ts b/projects/kit/components/input-range/input-range.module.ts index d33a3e92d72d..9483d0b98207 100644 --- a/projects/kit/components/input-range/input-range.module.ts +++ b/projects/kit/components/input-range/input-range.module.ts @@ -1,10 +1,10 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; +import {FormsModule} from '@angular/forms'; import {TuiActiveZoneModule, TuiPressedModule} from '@taiga-ui/cdk'; -import {TuiTextfieldControllerModule, TuiWrapperModule} from '@taiga-ui/core'; +import {TuiWrapperModule} from '@taiga-ui/core'; import {TuiInputNumberModule} from '@taiga-ui/kit/components/input-number'; -import {TuiNewRangeDirective, TuiRangeModule} from '@taiga-ui/kit/components/range'; +import {TuiRangeModule} from '@taiga-ui/kit/components/range'; import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; import { @@ -16,16 +16,14 @@ import { imports: [ CommonModule, FormsModule, - ReactiveFormsModule, PolymorpheusModule, TuiActiveZoneModule, TuiInputNumberModule, TuiPressedModule, TuiRangeModule, - TuiTextfieldControllerModule, TuiWrapperModule, ], declarations: [TuiInputRangeComponent, TuiTextfieldAppearanceDirective], - exports: [TuiInputRangeComponent, TuiNewRangeDirective], + exports: [TuiInputRangeComponent], }) export class TuiInputRangeModule {} diff --git a/projects/kit/components/input-range/input-range.style.less b/projects/kit/components/input-range/input-range.style.less index b4f397b9fc50..a16b2a10bef1 100644 --- a/projects/kit/components/input-range/input-range.style.less +++ b/projects/kit/components/input-range/input-range.style.less @@ -50,15 +50,9 @@ :host { display: block; border-radius: var(--tui-radius-m); - - &._show-ticks-labels._segmented { - // TODO: 3.0 delete - /* stylelint-disable-next-line */ - border-bottom: 26px solid transparent; - } } -.t-slider { +.t-range { position: absolute; top: 100%; left: 0; diff --git a/projects/kit/components/input-range/input-range.template.html b/projects/kit/components/input-range/input-range.template.html index 464f4df4a2ab..403065034cfe 100644 --- a/projects/kit/components/input-range/input-range.template.html +++ b/projects/kit/components/input-range/input-range.template.html @@ -17,11 +17,9 @@ [max]="value[1]" [precision]="precision" [decimal]="decimal" - [postfix]="pluralizeMap && !showLeftValueContent ? (value[0] | i18nPlural: pluralizeMap) : ''" + [postfix]="pluralize && !showLeftValueContent ? (value[0] | i18nPlural: pluralize) : ''" [disabled]="computedDisabled" [readOnly]="readOnly" - [tuiTextfieldSize]="computedSize" - [tuiTextfieldLabelOutside]="legacyLabelOutside" [ngModel]="value[0]" (ngModelChange)="onInputLeft($event)" (focusedChange)="onTextInputFocused($event, false)" @@ -33,12 +31,7 @@ *ngIf="showLeftValueContent" ngProjectAs="tuiContent" > - + {{ text }} @@ -55,8 +48,6 @@ [decimal]="decimal" [disabled]="computedDisabled" [readOnly]="readOnly" - [tuiTextfieldSize]="computedSize" - [tuiTextfieldLabelOutside]="legacyLabelOutside" [ngModel]="value[1]" (ngModelChange)="onInputRight($event)" (focusedChange)="onTextInputFocused($event, true)" @@ -67,12 +58,7 @@ *ngIf="showRightValueContent" ngProjectAs="tuiContent" > - + {{ text }} @@ -80,22 +66,21 @@ -  {{ value[1] | i18nPlural: pluralizeMap }} +  {{ value[1] | i18nPlural: pluralize }} - - - - {{ minLabel }} - - {{ value }} {{ value | i18nPlural: pluralizeMap || pluralizeMapFallback }} - - - - - - {{ maxLabel }} - - {{ value }} {{ value | i18nPlural: pluralizeMap || pluralizeMapFallback }} - - diff --git a/projects/kit/components/input-range/test/input-range.component.spec.ts b/projects/kit/components/input-range/test/input-range.component.spec.ts index ca4eea15f4b1..1abaf957ed35 100644 --- a/projects/kit/components/input-range/test/input-range.component.spec.ts +++ b/projects/kit/components/input-range/test/input-range.component.spec.ts @@ -1,22 +1,17 @@ import {Component, DebugElement, ViewChild} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; import {FormControl, ReactiveFormsModule} from '@angular/forms'; -import { - configureTestSuite, - TuiNativeInputPO, - TuiPageObject, - tuiReplaceNbsp, -} from '@taiga-ui/testing'; +import {CHAR_NO_BREAK_SPACE} from '@taiga-ui/cdk'; +import {configureTestSuite, TuiNativeInputPO, TuiPageObject} from '@taiga-ui/testing'; import {TuiInputRangeComponent} from '../input-range.component'; import {TuiInputRangeModule} from '../input-range.module'; -describe(`InputRange`, () => { +describe('InputRange', () => { @Component({ template: ` { [formControl]="control" [max]="max" [min]="min" - [minLabel]="minLabel" - [maxLabel]="maxLabel" [pluralize]="pluralize" [readOnly]="readOnly" [steps]="steps" @@ -44,9 +37,7 @@ describe(`InputRange`, () => { quantum = 5; readOnly = false; steps = 0; - minLabel = `Nothing`; - maxLabel = `All`; - pluralize = [`год`, `года`, `лет`]; + pluralize = {one: 'год', few: 'года', many: 'лет', other: 'лет'}; } let fixture: ComponentFixture; @@ -61,16 +52,16 @@ describe(`InputRange`, () => { const testContext = { get prefix() { - return `tui-input-range__`; + return 'tui-input-range__'; }, get nativeInputAutoId() { - return `tui-primitive-textfield__native-input`; + return 'tui-primitive-textfield__native-input'; }, get valueContentAutoId() { - return `tui-primitive-textfield__value`; + return 'tui-primitive-textfield__value'; }, get valueDecorationAutoId() { - return `tui-primitive-textfield__value-decoration`; + return 'tui-primitive-textfield__value-decoration'; }, }; @@ -92,7 +83,7 @@ describe(`InputRange`, () => { initializeInputsPO(); }); - describe(`Default values`, () => { + describe('Default values', () => { beforeEach(() => { testComponent.default = true; fixture.detectChanges(); @@ -100,154 +91,132 @@ describe(`InputRange`, () => { initializeInputsPO(); }); - it(`minLabel is missing`, () => { + it('[leftValueContent] is missing', () => { expect(getLeftValueContent()).toBeNull(); }); - it(`maxLabel is missing`, () => { + it('[rightValueContent] is missing', () => { testComponent.control.setValue([0, 10]); fixture.detectChanges(); expect(getRightValueContent()).toBeNull(); }); - it(`Plural signature missing`, () => { + it('Plural signature missing', () => { expect(getLeftValueContent()).toBeNull(); expect(getRightValueContent()).toBeNull(); }); }); - describe(`Labels`, () => { - it(`Plural signature is present`, () => { - expect(getLeftValueContent()).toBe(`0 лет`); - expect(getRightValueContent()).toBe(`1 год`); + describe('Labels', () => { + it('Plural signature is present', () => { + expect(getLeftValueDecoration()).toContain('лет'); + expect(getRightValueDecoration()).toBe('год'); }); - it(`minLabel is shown`, () => { - testComponent.control.setValue([-10, 10]); - fixture.detectChanges(); - - expect(getLeftValueContent()).toBe(testComponent.minLabel); - }); - - it(`minLabel missing on focus`, () => { - testComponent.control.setValue([-10, 10]); - inputPOLeft.focus(); - - expect(getLeftValueContent()).toBeNull(); - expect(getLeftValueDecoration()).toBe(`0 лет`); - }); - - it(`maxLabel is shown`, () => { - testComponent.control.setValue([-10, 10]); - fixture.detectChanges(); - - expect(getRightValueContent()).toBe(testComponent.maxLabel); - }); - - it(`maxLabel missing on focus`, () => { + it('[rightValueContent] missing on focus', () => { testComponent.control.setValue([-10, 10]); inputPORight.focus(); expect(getRightValueContent()).toBeNull(); - expect(getRightValueDecoration()).toBe(`лет`); + expect(getRightValueDecoration()).toBe('лет'); }); }); - describe(`quantum`, () => { - it(`Rounds the left value to the nearest quantum on loss of focus`, () => { - inputPOLeft.sendTextAndBlur(`-7`); + describe('quantum', () => { + it('Rounds the left value to the nearest quantum on loss of focus', () => { + inputPOLeft.sendTextAndBlur('-7'); expect(testComponent.control.value[0]).toBe(-5); }); - it(`Rounds the left value of an input field to the nearest quantum when focus is lost`, async () => { - inputPOLeft.sendTextAndBlur(`-7`); + it('Rounds the left value of an input field to the nearest quantum when focus is lost', async () => { + inputPOLeft.sendTextAndBlur('-7'); await fixture.whenStable(); fixture.detectChanges(); await fixture.whenStable(); - expect(inputPOLeft.value).toBe(`-5`); + expect(inputPOLeft.value).toBe('-5'); }); - it(`Rounds the right value to the nearest quantum on loss of focus`, () => { - inputPORight.sendTextAndBlur(`7`); + it('Rounds the right value to the nearest quantum on loss of focus', () => { + inputPORight.sendTextAndBlur('7'); expect(testComponent.control.value[1]).toBe(5); }); - it(`Rounds the right value of an input field to the nearest quantum on loss of focus`, async () => { - inputPORight.sendTextAndBlur(`7`); + it('Rounds the right value of an input field to the nearest quantum on loss of focus', async () => { + inputPORight.sendTextAndBlur('7'); await fixture.whenStable(); fixture.detectChanges(); await fixture.whenStable(); - expect(inputPORight.value).toBe(`5`); + expect(inputPORight.value).toBe('5'); }); }); - describe(`Deleting Values`, () => { - it(`Doesn't change value when left content is removed`, async () => { - inputPOLeft.sendTextAndBlur(`-5`); - inputPOLeft.sendTextAndBlur(``); + describe('Deleting Values', () => { + it("Doesn't change value when left content is removed", async () => { + inputPOLeft.sendTextAndBlur('-5'); + inputPOLeft.sendTextAndBlur(''); await fixture.whenStable(); expect(testComponent.control.value[0]).toBe(-5); - expect(inputPOLeft.value).toBe(`-5`); + expect(inputPOLeft.value).toBe('-5'); }); - it(`Doesn't change value when deleting right content`, async () => { - inputPORight.sendTextAndBlur(`5`); - inputPORight.sendTextAndBlur(``); + it("Doesn't change value when deleting right content", async () => { + inputPORight.sendTextAndBlur('5'); + inputPORight.sendTextAndBlur(''); await fixture.whenStable(); expect(testComponent.control.value[1]).toBe(5); - expect(inputPORight.value).toBe(`5`); + expect(inputPORight.value).toBe('5'); }); }); - describe(`Changing values`, () => { - it(`Prevents the left value from exceeding the right value when typing`, () => { - inputPORight.sendTextAndBlur(`5`); - inputPOLeft.sendTextAndBlur(`123`); + describe('Changing values', () => { + it('Prevents the left value from exceeding the right value when typing', () => { + inputPORight.sendTextAndBlur('5'); + inputPOLeft.sendTextAndBlur('123'); expect(testComponent.control.value[0]).toBe(testComponent.control.value[1]); expect(inputPOLeft.value).toBe(testComponent.control.value[1].toString()); }); - it(`Prevents the right value from becoming less than the left value when leaving the field`, () => { - inputPOLeft.sendTextAndBlur(`-5`); + it('Prevents the right value from becoming less than the left value when leaving the field', () => { + inputPOLeft.sendTextAndBlur('-5'); fixture.detectChanges(); - inputPORight.sendTextAndBlur(`-10`); + inputPORight.sendTextAndBlur('-10'); expect(testComponent.control.value[1]).toBe(testComponent.control.value[0]); expect(inputPORight.value).toBe(testComponent.control.value[0].toString()); }); }); - describe(`Format`, () => { + describe('Format', () => { beforeEach(() => { testComponent.max = 100000; testComponent.quantum = 0.01; fixture.detectChanges(); - inputPORight.sendTextAndBlur(`12345.67`); + inputPORight.sendTextAndBlur('12345.67'); }); - it(`Formats input`, () => { - expect(inputPORight.value).toBe(`12 345,67`); + it('Formats input', () => { + expect(inputPORight.value).toBe(`12${CHAR_NO_BREAK_SPACE}345,67`); }); - it(`Doesn't format the value`, () => { + it("Doesn't format the value", () => { expect(testComponent.control.value[1]).toBe(12345.67); }); }); - describe(`Arrows`, () => { + describe('Arrows', () => { beforeEach(() => { testComponent.min = 0; testComponent.max = 10; @@ -256,154 +225,154 @@ describe(`InputRange`, () => { fixture.detectChanges(); }); - describe(`readOnly`, () => { - it(`The up arrow on the left margin does not increase the value`, () => { + describe('readOnly', () => { + it('The up arrow on the left margin does not increase the value', () => { testComponent.readOnly = true; fixture.detectChanges(); - inputPOLeft.sendKeydown(`arrowUp`); + inputPOLeft.sendKeydown('arrowUp'); expect(testComponent.control.value[0]).toBe(2); }); - it(`Down arrow on left margin does not decrease value`, () => { + it('Down arrow on left margin does not decrease value', () => { testComponent.readOnly = true; fixture.detectChanges(); - inputPOLeft.sendKeydown(`arrowDown`); + inputPOLeft.sendKeydown('arrowDown'); expect(testComponent.control.value[0]).toBe(2); }); - it(`The up arrow on the right margin does not increase the value`, () => { + it('The up arrow on the right margin does not increase the value', () => { testComponent.readOnly = true; fixture.detectChanges(); - inputPORight.sendKeydown(`arrowUp`); + inputPORight.sendKeydown('arrowUp'); expect(testComponent.control.value[1]).toBe(6); }); - it(`Down arrow on right margin does not decrease value`, () => { + it('Down arrow on right margin does not decrease value', () => { testComponent.readOnly = true; fixture.detectChanges(); - inputPORight.sendKeydown(`arrowDown`); + inputPORight.sendKeydown('arrowDown'); expect(testComponent.control.value[1]).toBe(6); }); }); - describe(`Quantum`, () => { - it(`The up arrow on the left margin increases start by a quantum`, () => { - inputPOLeft.sendKeydown(`arrowUp`); + describe('Quantum', () => { + it('The up arrow on the left margin increases start by a quantum', () => { + inputPOLeft.sendKeydown('arrowUp'); expect(testComponent.control.value[0]).toBe(3); }); - it(`The down arrow on the left margin decreases start by a quantum`, () => { - inputPOLeft.sendKeydown(`arrowDown`); + it('The down arrow on the left margin decreases start by a quantum', () => { + inputPOLeft.sendKeydown('arrowDown'); expect(testComponent.control.value[0]).toBe(1); }); - it(`The up arrow on the right margin increases end by a quantum`, () => { - inputPORight.sendKeydown(`arrowUp`); + it('The up arrow on the right margin increases end by a quantum', () => { + inputPORight.sendKeydown('arrowUp'); expect(testComponent.control.value[1]).toBe(7); }); - it(`The down arrow on the right margin decreases end by a quantum`, () => { - inputPORight.sendKeydown(`arrowDown`); + it('The down arrow on the right margin decreases end by a quantum', () => { + inputPORight.sendKeydown('arrowDown'); expect(testComponent.control.value[1]).toBe(5); }); }); - describe(`Steps`, () => { + describe('Steps', () => { beforeEach(() => { testComponent.steps = 5; fixture.detectChanges(); }); - it(`The up arrow on the left margin increases start by one step`, () => { - inputPOLeft.sendKeydown(`arrowUp`); + it('The up arrow on the left margin increases start by one step', () => { + inputPOLeft.sendKeydown('arrowUp'); expect(testComponent.control.value[0]).toBe(4); }); - it(`Down arrow on the left margin decreases start by one step`, () => { - inputPOLeft.sendKeydown(`arrowDown`); + it('Down arrow on the left margin decreases start by one step', () => { + inputPOLeft.sendKeydown('arrowDown'); expect(testComponent.control.value[0]).toBe(0); }); - it(`The up arrow on the right margin increases end by one step`, () => { - inputPORight.sendKeydown(`arrowUp`); + it('The up arrow on the right margin increases end by one step', () => { + inputPORight.sendKeydown('arrowUp'); expect(testComponent.control.value[1]).toBe(8); }); - it(`Down arrow on the right margin decreases end by one step`, () => { - inputPORight.sendKeydown(`arrowDown`); + it('Down arrow on the right margin decreases end by one step', () => { + inputPORight.sendKeydown('arrowDown'); expect(testComponent.control.value[1]).toBe(4); }); }); - describe(`Limitations`, () => { - it(`The up arrow on the left margin does not increase start to a value greater than end`, () => { + describe('Limitations', () => { + it('The up arrow on the left margin does not increase start to a value greater than end', () => { testComponent.control.setValue([6, 6]); - inputPOLeft.sendKeydown(`arrowUp`); + inputPOLeft.sendKeydown('arrowUp'); expect(testComponent.control.value[0]).toBe(6); }); - it(`The down arrow on the left margin does not decrease start to a value less than min`, () => { + it('The down arrow on the left margin does not decrease start to a value less than min', () => { testComponent.control.setValue([0, 6]); - inputPOLeft.sendKeydown(`arrowDown`); + inputPOLeft.sendKeydown('arrowDown'); expect(testComponent.control.value[0]).toBe(0); }); - it(`The up arrow on the right margin does not increase end to a value greater than max`, () => { + it('The up arrow on the right margin does not increase end to a value greater than max', () => { testComponent.control.setValue([6, 10]); - inputPORight.sendKeydown(`arrowUp`); + inputPORight.sendKeydown('arrowUp'); expect(testComponent.control.value[1]).toBe(10); }); - it(`The down arrow on the right margin does not decrease end to a value less than start`, () => { + it('The down arrow on the right margin does not decrease end to a value less than start', () => { testComponent.control.setValue([6, 6]); - inputPORight.sendKeydown(`arrowDown`); + inputPORight.sendKeydown('arrowDown'); expect(testComponent.control.value[1]).toBe(6); }); - it(`Keyboard input does not exceed max`, () => { - inputPORight.sendText(`12345`); + it('Keyboard input does not exceed max', () => { + inputPORight.sendText('12345'); - expect(inputPORight.value).toBe(`10`); + expect(inputPORight.value).toBe('10'); }); - it(`Keyboard input does not exceed min`, () => { + it('Keyboard input does not exceed min', () => { testComponent.min = -10; fixture.detectChanges(); - inputPOLeft.sendText(`-123`); + inputPOLeft.sendText('-123'); - expect(inputPOLeft.value).toBe(`-10`); + expect(inputPOLeft.value).toBe('-10'); }); - it(`Keyboard input does not go beyond value[1]`, () => { - inputPOLeft.sendText(`12345`); + it('Keyboard input does not go beyond value[1]', () => { + inputPOLeft.sendText('12345'); - expect(inputPOLeft.value).toBe(`6`); + expect(inputPOLeft.value).toBe('6'); }); - it(`Keyboard input does not output value[1] beyond value[0]`, () => { - inputPORight.sendText(`1`); + it('Keyboard input does not output value[1] beyond value[0]', () => { + inputPORight.sendText('1'); - expect(inputPORight.value).toBe(`1`); + expect(inputPORight.value).toBe('1'); expect(testComponent.control.value[1]).toBe(6); }); }); @@ -415,7 +384,7 @@ describe(`InputRange`, () => { leftInputWrapper, ); - return tuiReplaceNbsp(valueContent?.nativeElement.textContent.trim()) || null; + return valueContent?.nativeElement.textContent.trim() || null; } function getRightValueContent(): string | null { @@ -424,26 +393,26 @@ describe(`InputRange`, () => { rightInputWrapper, ); - return tuiReplaceNbsp(valueContent?.nativeElement.textContent.trim()) || null; + return valueContent?.nativeElement.textContent.trim() || null; } function getLeftValueDecoration(): string { return pageObject .getByAutomationId(testContext.valueDecorationAutoId, leftInputWrapper) ?.nativeElement.textContent.trim() - .replace(`\n `, ``); + .replace('\n ', ''); } function getRightValueDecoration(): string { return pageObject .getByAutomationId(`${testContext.prefix}pluralize-right`) ?.nativeElement.textContent.trim() - .replace(`\n `, ``); + .replace('\n ', ''); } function initializeInputsPO(): void { - leftInputWrapper = pageObject.getByAutomationId(`tui-input-range__left-input`)!; - rightInputWrapper = pageObject.getByAutomationId(`tui-input-range__right-input`)!; + leftInputWrapper = pageObject.getByAutomationId('tui-input-range__left-input')!; + rightInputWrapper = pageObject.getByAutomationId('tui-input-range__right-input')!; inputPOLeft = new TuiNativeInputPO( fixture, diff --git a/projects/kit/components/range/range.component.ts b/projects/kit/components/range/range.component.ts index 749989df920e..81cdc9e1d1d5 100644 --- a/projects/kit/components/range/range.component.ts +++ b/projects/kit/components/range/range.component.ts @@ -3,7 +3,6 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, - Directive, ElementRef, forwardRef, HostBinding, @@ -43,16 +42,6 @@ import { } from '@taiga-ui/kit/utils'; import {Observable} from 'rxjs'; -/** - * Turn on new mode for `Range` and `InputRange`. - * The new version of component will behave almost the same as the same component from the next major release. - * @deprecated TODO remove me in v3.0 and make `Range` and `InputRange` always "new". - */ -@Directive({ - selector: 'tui-range[new], tui-input-range[new]', -}) -export class TuiNewRangeDirective {} - // @dynamic @Component({ selector: 'tui-range', diff --git a/projects/kit/components/range/range.module.ts b/projects/kit/components/range/range.module.ts index 6d3b398e2260..ae109dfd81d6 100644 --- a/projects/kit/components/range/range.module.ts +++ b/projects/kit/components/range/range.module.ts @@ -4,12 +4,12 @@ import {FormsModule} from '@angular/forms'; import {TuiFocusableModule} from '@taiga-ui/cdk'; import {TuiSliderModule} from '@taiga-ui/kit/components/slider'; -import {TuiNewRangeDirective, TuiRangeComponent} from './range.component'; +import {TuiRangeComponent} from './range.component'; import {TuiRangeChangeDirective} from './range-change.directive'; @NgModule({ imports: [CommonModule, TuiFocusableModule, TuiSliderModule, FormsModule], - declarations: [TuiRangeComponent, TuiRangeChangeDirective, TuiNewRangeDirective], - exports: [TuiRangeComponent, TuiRangeChangeDirective, TuiNewRangeDirective], + declarations: [TuiRangeComponent, TuiRangeChangeDirective], + exports: [TuiRangeComponent, TuiRangeChangeDirective], }) export class TuiRangeModule {}