diff --git a/projects/demo/src/modules/components/range/examples/3/index.html b/projects/demo/src/modules/components/range/examples/3/index.html index a29685677559..1f23cb51987e 100644 --- a/projects/demo/src/modules/components/range/examples/3/index.html +++ b/projects/demo/src/modules/components/range/examples/3/index.html @@ -1,6 +1,5 @@ > = [ - ['year', 'years', 'years'], - {one: 'thing', few: 'things', many: 'things', other: 'things'}, - { - one: 'year', - other: 'years', - }, - ]; - - pluralize: Record | TuiPluralize | null = null; - readonly keyStepsVariants: readonly TuiKeySteps[] = [[[50, 1000]]]; keySteps: TuiKeySteps | null = null; diff --git a/projects/demo/src/modules/components/range/range.template.html b/projects/demo/src/modules/components/range/range.template.html index 5d9506374957..16fafbf5ee0b 100644 --- a/projects/demo/src/modules/components/range/range.template.html +++ b/projects/demo/src/modules/components/range/range.template.html @@ -6,29 +6,6 @@

Component allows to choose a part of a range

- -

- 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 - Range - . -

- -

- 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‑range new ...> -

-
- Size
- - Plural forms for labels. TuiPluralize array is deprecated. Use object that mimics the - - ICU format - - for i18nPlural - -

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

-
diff --git a/projects/kit/components/range/range.component.ts b/projects/kit/components/range/range.component.ts index 9f9c0cebc2d0..749989df920e 100644 --- a/projects/kit/components/range/range.component.ts +++ b/projects/kit/components/range/range.component.ts @@ -49,19 +49,19 @@ import {Observable} from 'rxjs'; * @deprecated TODO remove me in v3.0 and make `Range` and `InputRange` always "new". */ @Directive({ - selector: `tui-range[new], tui-input-range[new]`, + selector: 'tui-range[new], tui-input-range[new]', }) export class TuiNewRangeDirective {} // @dynamic @Component({ - selector: `tui-range`, - templateUrl: `./range.template.html`, - styleUrls: [`./range.style.less`], + selector: 'tui-range', + templateUrl: './range.template.html', + styleUrls: ['./range.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, host: { - '[attr.tabindex]': `-1`, - '[attr.aria-disabled]': `computedDisabled`, + '[attr.tabindex]': '-1', + '[attr.aria-disabled]': 'computedDisabled', }, providers: [ { @@ -102,17 +102,17 @@ export class TuiRangeComponent * It can be done after removing backward compatibility code inside {@link computePureKeySteps} in v3.0 * */ @Input() - @tuiDefaultProp(nonNegativeFiniteAssertion, `Quantum must be a non-negative number`) + @tuiDefaultProp(nonNegativeFiniteAssertion, 'Quantum must be a non-negative number') quantum = 0; @Input() - @HostBinding(`attr.data-size`) + @HostBinding('attr.data-size') @tuiDefaultProp() - size: TuiSizeS = `m`; + size: TuiSizeS = 'm'; @Input() @tuiDefaultProp() - segments = 0; + segments = 1; @Input() @tuiDefaultProp() @@ -121,7 +121,7 @@ export class TuiRangeComponent @ViewChildren(TuiSliderComponent, {read: ElementRef}) slidersRefs: QueryList> = EMPTY_QUERY; - lastActiveThumb: 'right' | 'left' = `right`; + lastActiveThumb: 'right' | 'left' = 'right'; constructor( @Optional() @@ -132,9 +132,6 @@ export class TuiRangeComponent @Inject(DOCUMENT) documentRef: Document, @Inject(ElementRef) private readonly elementRef: ElementRef, @Inject(TUI_FROM_TO_TEXTS) fromToTexts$: Observable<[string, string]>, - @Optional() - @Inject(TuiNewRangeDirective) - readonly isNew: TuiNewRangeDirective | null, ) { super(control, changeDetectorRef, documentRef, fromToTexts$); } @@ -167,26 +164,30 @@ export class TuiRangeComponent return this.computePureKeySteps(this.keySteps, this.min, this.max); } - @HostBinding(`style.--left.%`) + get segmentWidthRatio(): number { + return 1 / this.segments; + } + + @HostBinding('style.--left.%') get left(): number { return this.getPercentageFromValue(this.value[0]); } - @HostBinding(`style.--right.%`) + @HostBinding('style.--right.%') get right(): number { return 100 - this.getPercentageFromValue(this.value[1]); } - @HostListener(`focusin`, [`true`]) - @HostListener(`focusout`, [`false`]) + @HostListener('focusin', ['true']) + @HostListener('focusout', ['false']) onFocused(focused: boolean): void { this.updateFocused(focused); } - @HostListener(`keydown.arrowUp.prevent`, [`1`, `$event.target`]) - @HostListener(`keydown.arrowRight.prevent`, [`1`, `$event.target`]) - @HostListener(`keydown.arrowLeft.prevent`, [`-1`, `$event.target`]) - @HostListener(`keydown.arrowDown.prevent`, [`-1`, `$event.target`]) + @HostListener('keydown.arrowUp.prevent', ['1', '$event.target']) + @HostListener('keydown.arrowRight.prevent', ['1', '$event.target']) + @HostListener('keydown.arrowLeft.prevent', ['-1', '$event.target']) + @HostListener('keydown.arrowDown.prevent', ['-1', '$event.target']) changeByStep(coefficient: number, target: HTMLElement): void { const [sliderLeftRef, sliderRightRef] = this.slidersRefs; const leftThumbElement = sliderLeftRef.nativeElement; @@ -194,7 +195,7 @@ export class TuiRangeComponent const isRightThumb = target === this.elementRef.nativeElement - ? this.lastActiveThumb === `right` + ? this.lastActiveThumb === 'right' : target === rightThumbElement; const activeThumbElement = isRightThumb ? rightThumbElement : leftThumbElement; const previousValue = isRightThumb ? this.value[1] : this.value[0]; @@ -218,7 +219,7 @@ export class TuiRangeComponent this.updateStart(guardedValue); } - this.lastActiveThumb = right ? `right` : `left`; + this.lastActiveThumb = right ? 'right' : 'left'; } fractionGuard(fraction: number): number { @@ -265,10 +266,10 @@ export class TuiRangeComponent // TODO replace all function by `return keySteps || [[0, min], [100, max]]` in v3.0 tuiAssert.assert( !keySteps, - `\n` + - `Input property [keySteps] should contain min and max percents.\n` + - `We have taken [min] and [max] properties of your component for now (but it will not work in v3.0).\n` + - `See example how properly use [keySteps]: https://taiga-ui.dev/components/range#key-steps`, + '\n' + + 'Input property [keySteps] should contain min and max percents.\n' + + 'We have taken [min] and [max] properties of your component for now (but it will not work in v3.0).\n' + + 'See example how properly use [keySteps]: https://taiga-ui.dev/components/range#key-steps', ); return [[0, min], ...(keySteps || []), [100, max]]; diff --git a/projects/kit/components/range/range.module.ts b/projects/kit/components/range/range.module.ts index 2c4bc849d451..6d3b398e2260 100644 --- a/projects/kit/components/range/range.module.ts +++ b/projects/kit/components/range/range.module.ts @@ -1,22 +1,14 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; -import {TuiFocusableModule, TuiRepeatTimesModule} from '@taiga-ui/cdk'; -import {TuiFormatNumberPipeModule} from '@taiga-ui/core'; +import {TuiFocusableModule} from '@taiga-ui/cdk'; import {TuiSliderModule} from '@taiga-ui/kit/components/slider'; import {TuiNewRangeDirective, TuiRangeComponent} from './range.component'; import {TuiRangeChangeDirective} from './range-change.directive'; @NgModule({ - imports: [ - CommonModule, - TuiRepeatTimesModule, - TuiFocusableModule, - TuiFormatNumberPipeModule, - TuiSliderModule, - FormsModule, - ], + imports: [CommonModule, TuiFocusableModule, TuiSliderModule, FormsModule], declarations: [TuiRangeComponent, TuiRangeChangeDirective, TuiNewRangeDirective], exports: [TuiRangeComponent, TuiRangeChangeDirective, TuiNewRangeDirective], }) diff --git a/projects/kit/components/range/range.style.less b/projects/kit/components/range/range.style.less index d90e6d48ac3b..904304370a01 100644 --- a/projects/kit/components/range/range.style.less +++ b/projects/kit/components/range/range.style.less @@ -2,6 +2,7 @@ @track-height: 0.125rem; @extra-click-area-space: 0.4375rem; +@tick-thickness: 0.25rem; :host { position: relative; @@ -38,7 +39,7 @@ height: 100%; /* Filled selected range */ - &:after { + &:before { content: ''; position: absolute; top: 0; @@ -48,6 +49,22 @@ background: var(--tui-primary); margin: 0 (-@thumb-width / 2); } + + /* Ticks */ + &:after { + .fullsize(absolute, inset); + content: ''; + left: ((@thumb-width - @tick-thickness) / 2); + right: ((@thumb-width + @tick-thickness) / 2); + background-image: repeating-linear-gradient( + to right, + var(--tui-base-07) 0 @tick-thickness, + transparent 0 calc(var(--segment-width) / var(--bg-size-ratio)) + ); + background-position-x: right; + background-repeat: no-repeat; + background-size: calc(100% * var(--bg-size-ratio)); + } } .t-track { @@ -128,47 +145,3 @@ opacity: 1; // prevent double overlay for disabled state } } - -// TODO delete in v3.0 -.t-segments { - .fullsize(absolute, inset); - - :host[data-size='s'] & { - .tui-slider-ticks-labels(s); - padding: 0 (@thumb-diameters[ @s] / 2); - } - - :host[data-size='m'] & { - .tui-slider-ticks-labels(m); - padding: 0 (@thumb-diameters[ @m] / 2); - } -} - -// TODO Use background-image with repeating-linear-gradient to make ticks -.t-segment:not(:last-of-type):not(:first-of-type):before { - content: ''; - position: absolute; - left: 0; - right: 0; - margin: auto; - background: var(--tui-base-07); - width: 0.25rem; - height: 100%; -} - -// TODO delete in v3.0 -.t-segment { - &:last-of-type .t-number { - margin-right: (-@thumb-diameters[ @m] / 2); - } - - &:first-of-type .t-number { - margin-left: (-@thumb-diameters[ @m] / 2); - } -} - -// TODO delete in v3.0 -.t-number { - display: inline-block; - margin-top: 0.5rem; -} diff --git a/projects/kit/components/range/range.template.html b/projects/kit/components/range/range.template.html index 82a9dc4dfb6f..59f270a3ef70 100644 --- a/projects/kit/components/range/range.template.html +++ b/projects/kit/components/range/range.template.html @@ -1,4 +1,8 @@ -
+
- - -
- - - - {{ getSegmentPrefix(tickIndex, fromToText) }} - {{ tickIndex | tuiSliderTickLabel: segments:computedKeySteps | tuiFormatNumber }} - - {{ tickIndex | tuiSliderTickLabel: segments:computedKeySteps | i18nPlural: pluralizeMap }} - - - - -