import { AsyncPipe, NgIf, PercentPipe } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output, } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TUI_FALSE_HANDLER } from '@taiga-ui/cdk/constants';
import { TuiLet } from '@taiga-ui/cdk/directives/let';
import { tuiClamp } from '@taiga-ui/cdk/utils/math';
import { TuiButton } from '@taiga-ui/core/components/button';
import { TuiHint } from '@taiga-ui/core/directives/hint';
import { TuiSlider } from '@taiga-ui/kit/components/slider';
import { TUI_PREVIEW_ICONS, TUI_PREVIEW_ZOOM_TEXTS } from '@taiga-ui/kit/tokens';
import { map, merge, of, startWith, switchMap, timer } from 'rxjs';
import { TuiPreviewAction } from '../action/preview-action.directive';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@taiga-ui/core/directives/hint";
import * as i3 from "@taiga-ui/kit/components/slider";
const STEP = 0.5;
class TuiPreviewZoom {
    constructor() {
        this.icons = inject(TUI_PREVIEW_ICONS);
        this.zoomTexts$ = inject(TUI_PREVIEW_ZOOM_TEXTS);
        this.sliderLabel$ = this.zoomTexts$.pipe(map((texts) => `${texts.zoomOut} / ${texts.zoomIn}`));
        this.min = 0.5;
        this.max = 2;
        this.value = 1;
        this.valueChange = new EventEmitter();
        this.reset = new EventEmitter();
        this.hintShow$ = this.valueChange.pipe(switchMap(() => merge(of(true), timer(1000).pipe(map(TUI_FALSE_HANDLER)))), startWith(false));
    }
    get leftButtonDisabled() {
        return this.value === this.min;
    }
    get rightButtonDisabled() {
        return this.value === this.max;
    }
    get collapseVisible() {
        return this.value > this.min;
    }
    onModelChange(value) {
        const clamped = tuiClamp(value, this.min, this.max);
        if (clamped === this.value) {
            return;
        }
        this.value = clamped;
        this.valueChange.emit(clamped);
    }
    onReset() {
        this.reset.emit();
    }
    onMinus() {
        this.onModelChange(this.value - STEP);
    }
    onPlus() {
        this.onModelChange(this.value < 1 ? 1 : this.value + STEP);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiPreviewZoom, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiPreviewZoom, isStandalone: true, selector: "tui-preview-zoom", inputs: { min: "min", max: "max", value: "value" }, outputs: { valueChange: "valueChange", reset: "reset" }, ngImport: i0, template: "<ng-container *ngIf=\"zoomTexts$ | async as texts\">\n    <section class=\"t-zoom\">\n        <button\n            tuiIconButton\n            tuiPreviewAction\n            type=\"button\"\n            class=\"t-sign_minus\"\n            [disabled]=\"leftButtonDisabled\"\n            [iconStart]=\"icons.zoomOut\"\n            (click)=\"onMinus()\"\n        >\n            {{ texts.zoomOut }}\n        </button>\n        <label\n            *tuiLet=\"value | percent as sliderValueText\"\n            tuiSliderThumbLabel\n        >\n            <div\n                [tuiHint]=\"sliderValueText\"\n                [tuiHintManual]=\"!!(hintShow$ | async)\"\n            ></div>\n\n            <input\n                step=\"any\"\n                tuiSlider\n                tuiTheme=\"dark\"\n                type=\"range\"\n                class=\"t-slider\"\n                [attr.aria-label]=\"sliderLabel$ | async\"\n                [attr.aria-valuetext]=\"sliderValueText\"\n                [max]=\"max\"\n                [min]=\"min\"\n                [ngModel]=\"value\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (ngModelChange)=\"onModelChange($event)\"\n            />\n        </label>\n        <button\n            tuiIconButton\n            tuiPreviewAction\n            type=\"button\"\n            class=\"t-sign_plus\"\n            [disabled]=\"rightButtonDisabled\"\n            [iconStart]=\"icons.zoomIn\"\n            (click)=\"onPlus()\"\n        >\n            {{ texts.zoomIn }}\n        </button>\n    </section>\n\n    <button\n        tuiHintAppearance=\"dark\"\n        tuiHintDescribe\n        tuiHintDirection=\"top-right\"\n        tuiIconButton\n        tuiPreviewAction\n        type=\"button\"\n        class=\"t-reset-button\"\n        [class.t-invisible]=\"!collapseVisible\"\n        [iconStart]=\"icons.zoomReset\"\n        [tuiHint]=\"texts.reset\"\n        (click)=\"onReset()\"\n    >\n        {{ texts.reset }}\n    </button>\n</ng-container>\n", styles: [":host{position:relative;display:flex}.t-zoom{border-radius:1rem;background:#686868f5;color:#fff;display:flex;font:var(--tui-font-text-s);justify-content:space-between;align-items:center;inline-size:12rem}.t-slider{inline-size:7.5rem}.t-sign_minus{border-top-right-radius:0;border-bottom-right-radius:0}.t-sign_plus{border-top-left-radius:0;border-bottom-left-radius:0}.t-invisible{visibility:hidden}.t-reset-button{margin-inline-start:.3125rem}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: i2.TuiHintDirective, selector: "[tuiHint]:not(ng-container):not(ng-template)", inputs: ["tuiHintContext", "tuiHintAppearance", "tuiHint"], outputs: ["tuiHintVisible"] }, { kind: "directive", type: i2.TuiHintDescribe, selector: "[tuiHintDescribe]", inputs: ["tuiHintDescribe"] }, { kind: "directive", type: i2.TuiHintManual, selector: "[tuiHint][tuiHintManual]", inputs: ["tuiHintManual"] }, { kind: "directive", type: TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: TuiPreviewAction, selector: "[tuiPreviewAction]" }, { kind: "component", type: i3.TuiSliderComponent, selector: "input[type=range][tuiSlider]", inputs: ["size", "segments"] }, { kind: "component", type: i3.TuiSliderThumbLabel, selector: "[tuiSliderThumbLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiPreviewZoom };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiPreviewZoom, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'tui-preview-zoom', imports: [
                        AsyncPipe,
                        FormsModule,
                        NgIf,
                        PercentPipe,
                        TuiButton,
                        TuiHint,
                        TuiLet,
                        TuiPreviewAction,
                        TuiSlider,
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"zoomTexts$ | async as texts\">\n    <section class=\"t-zoom\">\n        <button\n            tuiIconButton\n            tuiPreviewAction\n            type=\"button\"\n            class=\"t-sign_minus\"\n            [disabled]=\"leftButtonDisabled\"\n            [iconStart]=\"icons.zoomOut\"\n            (click)=\"onMinus()\"\n        >\n            {{ texts.zoomOut }}\n        </button>\n        <label\n            *tuiLet=\"value | percent as sliderValueText\"\n            tuiSliderThumbLabel\n        >\n            <div\n                [tuiHint]=\"sliderValueText\"\n                [tuiHintManual]=\"!!(hintShow$ | async)\"\n            ></div>\n\n            <input\n                step=\"any\"\n                tuiSlider\n                tuiTheme=\"dark\"\n                type=\"range\"\n                class=\"t-slider\"\n                [attr.aria-label]=\"sliderLabel$ | async\"\n                [attr.aria-valuetext]=\"sliderValueText\"\n                [max]=\"max\"\n                [min]=\"min\"\n                [ngModel]=\"value\"\n                [ngModelOptions]=\"{standalone: true}\"\n                (ngModelChange)=\"onModelChange($event)\"\n            />\n        </label>\n        <button\n            tuiIconButton\n            tuiPreviewAction\n            type=\"button\"\n            class=\"t-sign_plus\"\n            [disabled]=\"rightButtonDisabled\"\n            [iconStart]=\"icons.zoomIn\"\n            (click)=\"onPlus()\"\n        >\n            {{ texts.zoomIn }}\n        </button>\n    </section>\n\n    <button\n        tuiHintAppearance=\"dark\"\n        tuiHintDescribe\n        tuiHintDirection=\"top-right\"\n        tuiIconButton\n        tuiPreviewAction\n        type=\"button\"\n        class=\"t-reset-button\"\n        [class.t-invisible]=\"!collapseVisible\"\n        [iconStart]=\"icons.zoomReset\"\n        [tuiHint]=\"texts.reset\"\n        (click)=\"onReset()\"\n    >\n        {{ texts.reset }}\n    </button>\n</ng-container>\n", styles: [":host{position:relative;display:flex}.t-zoom{border-radius:1rem;background:#686868f5;color:#fff;display:flex;font:var(--tui-font-text-s);justify-content:space-between;align-items:center;inline-size:12rem}.t-slider{inline-size:7.5rem}.t-sign_minus{border-top-right-radius:0;border-bottom-right-radius:0}.t-sign_plus{border-top-left-radius:0;border-bottom-left-radius:0}.t-invisible{visibility:hidden}.t-reset-button{margin-inline-start:.3125rem}\n"] }]
        }], propDecorators: { min: [{
                type: Input
            }], max: [{
                type: Input
            }], value: [{
                type: Input
            }], valueChange: [{
                type: Output
            }], reset: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 