@taiga-ui/kit
Version:
Taiga UI Angular main components kit
38 lines • 9.02 kB
JavaScript
/// <reference types="@taiga-ui/tsconfig/ng-dev-mode" />
/// <reference types="@taiga-ui/tsconfig/ng-dev-mode" />
import { AsyncPipe, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, ContentChild } from '@angular/core';
import { NgControl } from '@angular/forms';
import { tuiHintOptionsProvider } from '@taiga-ui/core/directives/hint';
import { TuiSliderComponent } from '../slider.component';
import * as i0 from "@angular/core";
class TuiSliderThumbLabel {
ngAfterContentInit() {
ngDevMode &&
console.assert(Boolean(this.control?.valueChanges), '\n[tuiSliderThumbLabel] expected <input tuiSlider type="range" /> to use Angular Forms.\n' +
'Use [(ngModel)] or [formControl] or formControlName for correct work.');
}
get size() {
return this.slider?.size || 'm';
}
get ratio() {
return this.slider?.valueRatio || 0;
}
get ghostStart() {
return this.ratio * (this.slider?.el.offsetWidth || 0);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSliderThumbLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiSliderThumbLabel, isStandalone: true, selector: "[tuiSliderThumbLabel]", providers: [tuiHintOptionsProvider({ direction: 'top', appearance: 'dark' })], queries: [{ propertyName: "slider", first: true, predicate: TuiSliderComponent, descendants: true }, { propertyName: "control", first: true, predicate: NgControl, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"control?.valueChanges | async\" />\n\n<div\n class=\"t-ghost\"\n [attr.data-size]=\"size\"\n [style.--tui-slider-thumb-ratio]=\"ratio\"\n [style.inset-inline-start.px]=\"ghostStart\"\n [style.left.px]=\"ghostStart\"\n>\n <ng-content />\n</div>\n\n<ng-content select=\"input[type=range]\" />\n", styles: [":host{position:relative}.t-ghost{position:absolute;top:0;bottom:0;margin:auto;border-radius:50%;pointer-events:none}.t-ghost[data-size=s]{inline-size:.5rem;block-size:.5rem;transform:translate(calc(var(--tui-slider-thumb-ratio) * -.5rem * var(--tui-inline)))}.t-ghost[data-size=m]{inline-size:.75rem;block-size:.75rem;transform:translate(calc(var(--tui-slider-thumb-ratio) * -.75rem * var(--tui-inline)))}@supports (inset-inline-end: 0){:host-context([dir=\"rtl\"]) .t-ghost{left:unset!important}}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiSliderThumbLabel };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSliderThumbLabel, decorators: [{
type: Component,
args: [{ standalone: true, selector: '[tuiSliderThumbLabel]', imports: [AsyncPipe, NgIf], changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiHintOptionsProvider({ direction: 'top', appearance: 'dark' })], template: "<ng-container *ngIf=\"control?.valueChanges | async\" />\n\n<div\n class=\"t-ghost\"\n [attr.data-size]=\"size\"\n [style.--tui-slider-thumb-ratio]=\"ratio\"\n [style.inset-inline-start.px]=\"ghostStart\"\n [style.left.px]=\"ghostStart\"\n>\n <ng-content />\n</div>\n\n<ng-content select=\"input[type=range]\" />\n", styles: [":host{position:relative}.t-ghost{position:absolute;top:0;bottom:0;margin:auto;border-radius:50%;pointer-events:none}.t-ghost[data-size=s]{inline-size:.5rem;block-size:.5rem;transform:translate(calc(var(--tui-slider-thumb-ratio) * -.5rem * var(--tui-inline)))}.t-ghost[data-size=m]{inline-size:.75rem;block-size:.75rem;transform:translate(calc(var(--tui-slider-thumb-ratio) * -.75rem * var(--tui-inline)))}@supports (inset-inline-end: 0){:host-context([dir=\"rtl\"]) .t-ghost{left:unset!important}}\n"] }]
}], propDecorators: { slider: [{
type: ContentChild,
args: [TuiSliderComponent]
}], control: [{
type: ContentChild,
args: [NgControl]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLXRodW1iLWxhYmVsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9jb21wb25lbnRzL3NsaWRlci9oZWxwZXJzL3NsaWRlci10aHVtYi1sYWJlbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9raXQvY29tcG9uZW50cy9zbGlkZXIvaGVscGVycy9zbGlkZXItdGh1bWItbGFiZWwudGVtcGxhdGUuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSx3REFBd0Q7QUFBeEQsd0RBQXdEO0FBQ3hELE9BQU8sRUFBQyxTQUFTLEVBQUUsSUFBSSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFFaEQsT0FBTyxFQUFDLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDL0UsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBQ3pDLE9BQU8sRUFBQyxzQkFBc0IsRUFBQyxNQUFNLGdDQUFnQyxDQUFDO0FBR3RFLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLHFCQUFxQixDQUFDOztBQUV2RCxNQVNhLG1CQUFtQjtJQU9yQixrQkFBa0I7UUFDckIsU0FBUztZQUNMLE9BQU8sQ0FBQyxNQUFNLENBQ1YsT0FBTyxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsWUFBWSxDQUFDLEVBQ25DLDJGQUEyRjtnQkFDdkYsdUVBQXVFLENBQzlFLENBQUM7SUFDVixDQUFDO0lBRUQsSUFBYyxJQUFJO1FBQ2QsT0FBTyxJQUFJLENBQUMsTUFBTSxFQUFFLElBQUksSUFBSSxHQUFHLENBQUM7SUFDcEMsQ0FBQztJQUVELElBQWMsS0FBSztRQUNmLE9BQU8sSUFBSSxDQUFDLE1BQU0sRUFBRSxVQUFVLElBQUksQ0FBQyxDQUFDO0lBQ3hDLENBQUM7SUFFRCxJQUFjLFVBQVU7UUFDcEIsT0FBTyxJQUFJLENBQUMsS0FBSyxHQUFHLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxFQUFFLENBQUMsV0FBVyxJQUFJLENBQUMsQ0FBQyxDQUFDO0lBQzNELENBQUM7K0dBMUJRLG1CQUFtQjttR0FBbkIsbUJBQW1CLG9FQUZqQixDQUFDLHNCQUFzQixDQUFDLEVBQUMsU0FBUyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFDLENBQUMsQ0FBQyw4REFHN0Qsa0JBQWtCLDBFQUdsQixTQUFTLGdEQ3ZCM0IsOFVBYUEsd2lCREFjLFNBQVMsOENBQUUsSUFBSTs7U0FNaEIsbUJBQW1COzRGQUFuQixtQkFBbUI7a0JBVC9CLFNBQVM7aUNBQ00sSUFBSSxZQUNOLHVCQUF1QixXQUN4QixDQUFDLFNBQVMsRUFBRSxJQUFJLENBQUMsbUJBR1QsdUJBQXVCLENBQUMsTUFBTSxhQUNwQyxDQUFDLHNCQUFzQixDQUFDLEVBQUMsU0FBUyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFDLENBQUMsQ0FBQzs4QkFJeEQsTUFBTTtzQkFEeEIsWUFBWTt1QkFBQyxrQkFBa0I7Z0JBSWIsT0FBTztzQkFEekIsWUFBWTt1QkFBQyxTQUFTIiwic291cmNlc0NvbnRlbnQiOlsiLy8vIDxyZWZlcmVuY2UgdHlwZXM9XCJAdGFpZ2EtdWkvdHNjb25maWcvbmctZGV2LW1vZGVcIiAvPlxuaW1wb3J0IHtBc3luY1BpcGUsIE5nSWZ9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgdHlwZSB7QWZ0ZXJDb250ZW50SW5pdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0NoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIENvbnRlbnRDaGlsZH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge05nQ29udHJvbH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHt0dWlIaW50T3B0aW9uc1Byb3ZpZGVyfSBmcm9tICdAdGFpZ2EtdWkvY29yZS9kaXJlY3RpdmVzL2hpbnQnO1xuaW1wb3J0IHR5cGUge1R1aVNpemVTfSBmcm9tICdAdGFpZ2EtdWkvY29yZS90eXBlcyc7XG5cbmltcG9ydCB7VHVpU2xpZGVyQ29tcG9uZW50fSBmcm9tICcuLi9zbGlkZXIuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ1t0dWlTbGlkZXJUaHVtYkxhYmVsXScsXG4gICAgaW1wb3J0czogW0FzeW5jUGlwZSwgTmdJZl0sXG4gICAgdGVtcGxhdGVVcmw6ICcuL3NsaWRlci10aHVtYi1sYWJlbC50ZW1wbGF0ZS5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9zbGlkZXItdGh1bWItbGFiZWwuc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIHByb3ZpZGVyczogW3R1aUhpbnRPcHRpb25zUHJvdmlkZXIoe2RpcmVjdGlvbjogJ3RvcCcsIGFwcGVhcmFuY2U6ICdkYXJrJ30pXSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpU2xpZGVyVGh1bWJMYWJlbCBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXQge1xuICAgIEBDb250ZW50Q2hpbGQoVHVpU2xpZGVyQ29tcG9uZW50KVxuICAgIHByb3RlY3RlZCByZWFkb25seSBzbGlkZXI/OiBUdWlTbGlkZXJDb21wb25lbnQ7XG5cbiAgICBAQ29udGVudENoaWxkKE5nQ29udHJvbClcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgY29udHJvbD86IE5nQ29udHJvbDtcblxuICAgIHB1YmxpYyBuZ0FmdGVyQ29udGVudEluaXQoKTogdm9pZCB7XG4gICAgICAgIG5nRGV2TW9kZSAmJlxuICAgICAgICAgICAgY29uc29sZS5hc3NlcnQoXG4gICAgICAgICAgICAgICAgQm9vbGVhbih0aGlzLmNvbnRyb2w/LnZhbHVlQ2hhbmdlcyksXG4gICAgICAgICAgICAgICAgJ1xcblt0dWlTbGlkZXJUaHVtYkxhYmVsXSBleHBlY3RlZCA8aW5wdXQgdHVpU2xpZGVyIHR5cGU9XCJyYW5nZVwiIC8+IHRvIHVzZSBBbmd1bGFyIEZvcm1zLlxcbicgK1xuICAgICAgICAgICAgICAgICAgICAnVXNlIFsobmdNb2RlbCldIG9yIFtmb3JtQ29udHJvbF0gb3IgZm9ybUNvbnRyb2xOYW1lIGZvciBjb3JyZWN0IHdvcmsuJyxcbiAgICAgICAgICAgICk7XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIGdldCBzaXplKCk6IFR1aVNpemVTIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuc2xpZGVyPy5zaXplIHx8ICdtJztcbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgZ2V0IHJhdGlvKCk6IG51bWJlciB7XG4gICAgICAgIHJldHVybiB0aGlzLnNsaWRlcj8udmFsdWVSYXRpbyB8fCAwO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBnZXQgZ2hvc3RTdGFydCgpOiBudW1iZXIge1xuICAgICAgICByZXR1cm4gdGhpcy5yYXRpbyAqICh0aGlzLnNsaWRlcj8uZWwub2Zmc2V0V2lkdGggfHwgMCk7XG4gICAgfVxufVxuIiwiPG5nLWNvbnRhaW5lciAqbmdJZj1cImNvbnRyb2w/LnZhbHVlQ2hhbmdlcyB8IGFzeW5jXCIgLz5cblxuPGRpdlxuICAgIGNsYXNzPVwidC1naG9zdFwiXG4gICAgW2F0dHIuZGF0YS1zaXplXT1cInNpemVcIlxuICAgIFtzdHlsZS4tLXR1aS1zbGlkZXItdGh1bWItcmF0aW9dPVwicmF0aW9cIlxuICAgIFtzdHlsZS5pbnNldC1pbmxpbmUtc3RhcnQucHhdPVwiZ2hvc3RTdGFydFwiXG4gICAgW3N0eWxlLmxlZnQucHhdPVwiZ2hvc3RTdGFydFwiXG4+XG4gICAgPG5nLWNvbnRlbnQgLz5cbjwvZGl2PlxuXG48bmctY29udGVudCBzZWxlY3Q9XCJpbnB1dFt0eXBlPXJhbmdlXVwiIC8+XG4iXX0=