import { ChangeDetectionStrategy, Component, EventEmitter, forwardRef, inject, Input, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { BehaviorSubject } from 'rxjs';
import { IconModule } from '@ironsource/fusion-ui/components/icon/v1';
import { TooltipDirective } from '@ironsource/fusion-ui/components/tooltip/v4';
import { TestIdsService } from '@ironsource/fusion-ui/services/test-ids';
import { UniqueIdService } from '@ironsource/fusion-ui/services/unique-id';
import { ToggleTestIdModifiers } from '@ironsource/fusion-ui/entities';
import { InputHelperComponent } from '@ironsource/fusion-ui/components/input-helper/v4';
import { GenericPipe } from '@ironsource/fusion-ui/pipes/generic';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@ironsource/fusion-ui/components/icon/v1";
function ToggleV4Component_Conditional_14_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "fusion-icon", 8);
    i0.ɵɵpipe(1, "generic");
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵproperty("name", ctx_r0.startIcon);
    i0.ɵɵattribute("data-testid", i0.ɵɵpipeBind3(1, 2, ctx_r0.testIdsService.getTestAttribute.bind(ctx_r0), ctx_r0.testId, ctx_r0.testIdToggleModifiers.START_ICON));
} }
function ToggleV4Component_Conditional_15_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "fusion-icon", 11);
    i0.ɵɵpipe(1, "generic");
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("name", ctx_r0.endIcon);
    i0.ɵɵattribute("data-testid", i0.ɵɵpipeBind3(1, 2, ctx_r0.testIdsService.getTestAttribute.bind(ctx_r0), ctx_r0.testId, ctx_r0.testIdToggleModifiers.END_ICON));
} }
function ToggleV4Component_Conditional_15_Conditional_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "fusion-icon", 12);
    i0.ɵɵpipe(1, "generic");
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("name", ctx_r0.labelHelpIcon)("fusionTooltip", ctx_r0.labelTooltipText)("configuration", ctx_r0.labelTooltipConfiguration);
    i0.ɵɵattribute("data-testid", i0.ɵɵpipeBind3(1, 4, ctx_r0.testIdsService.getTestAttribute.bind(ctx_r0), ctx_r0.testId, ctx_r0.testIdToggleModifiers.LABEL_ICON));
} }
function ToggleV4Component_Conditional_15_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 10);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(2, ToggleV4Component_Conditional_15_Conditional_2_Template, 2, 6, "fusion-icon", 11)(3, ToggleV4Component_Conditional_15_Conditional_3_Template, 2, 8, "fusion-icon", 12);
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(ctx_r0.labelText);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r0.endIcon ? 2 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r0.labelHelpIcon ? 3 : -1);
} }
function ToggleV4Component_Conditional_16_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "fusion-input-helper", 9);
    i0.ɵɵpipe(1, "generic");
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵproperty("text", ctx_r0.helperText)("state", ctx_r0.helperVariant)("iconName", ctx_r0.helperIcon)("testId", ctx_r0.testId);
    i0.ɵɵattribute("data-testid", i0.ɵɵpipeBind3(1, 5, ctx_r0.testIdsService.getTestAttribute.bind(ctx_r0), ctx_r0.testId, ctx_r0.testIdToggleModifiers.HELPER));
} }
export class ToggleV4Component {
    constructor() {
        this.uniqueIdService = inject(UniqueIdService);
        this.id = `fuToggle_${this.uniqueIdService.getUniqueId()}`;
        this.helperVariant = 'default';
        // endregion
        // region variants and state
        this.color = 'primary';
        this.size = 'small';
        this.#model = false;
        this.modelChange = new EventEmitter();
        /** @internal */
        this.testIdToggleModifiers = ToggleTestIdModifiers;
        /** @internal */
        this.testIdsService = inject(TestIdsService);
        // endregion
        // region common states
        /** @internal */
        this.loading$ = new BehaviorSubject(false);
        /** @internal */
        this.checked$ = new BehaviorSubject(false);
        /** @internal */
        this.disabled$ = new BehaviorSubject(false);
        // Implement ControlValueAccessor methods
        /**
         * Method to call when value has changes.
         * @ignore
         */
        this.propagateChange = (_) => { };
        /**
         * Method to call when the component is touched (when it was is clicked).
         * @ignore
         */
        this.propagateTouched = () => { };
    }
    set loading(value) {
        this.loading$.next(value);
    }
    set disabled(value) {
        this.disabled$.next(value);
    }
    // endregion
    // region model in case work with component as model, not as form control
    set model(value) {
        this.#model = value ?? false;
    }
    get model() {
        return this.#model;
    }
    #model;
    // endregion
    /** @ignore */
    change($event) {
        this.propagateTouched();
        this.model = $event.target.checked;
        this.checked$.next(this.model);
        this.propagateChange(this.model);
        this.modelChange.emit(this.model);
    }
    /**
     * update value from model to the component
     * @ignore
     */
    writeValue(value) {
        this.checked$.next(!!value);
    }
    /**
     * Informs the outside world about changes.
     * see method propagateChange call - this.propagateChange(this.model);
     * @ignore
     */
    registerOnChange(fn) {
        this.propagateChange = fn;
    }
    /**
     * on click
     * @ignore
     */
    registerOnTouched(fn) {
        this.propagateTouched = fn;
    }
    /**
     * on set form controll enabled / disabled
     * also do UI Component enabled / disabled
     * @ignore
     */
    setDisabledState(disabled) {
        this.disabled$.next(disabled);
    }
    static { this.ɵfac = function ToggleV4Component_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ToggleV4Component)(); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ToggleV4Component, selectors: [["fusion-toggle"]], hostAttrs: [1, "fusion-v4"], inputs: { id: "id", labelText: "labelText", labelHelpIcon: "labelHelpIcon", labelTooltipText: "labelTooltipText", labelTooltipConfiguration: "labelTooltipConfiguration", helperText: "helperText", helperIcon: "helperIcon", helperVariant: "helperVariant", startIcon: "startIcon", endIcon: "endIcon", color: "color", size: "size", loading: "loading", disabled: "disabled", model: "model", testId: "testId" }, outputs: { modelChange: "modelChange" }, standalone: true, features: [i0.ɵɵProvidersFeature([
                {
                    provide: NG_VALUE_ACCESSOR,
                    useExisting: forwardRef(() => ToggleV4Component),
                    multi: true
                }
            ]), i0.ɵɵStandaloneFeature], decls: 17, vars: 25, consts: [[1, "fu-toggle-wrapper"], ["type", "checkbox", 3, "change", "id", "checked", "disabled"], [1, "fu-toggle-slider"], [1, "fu-toggle-slider-dot"], [1, "fu-toggle-loader"], ["xmlns", "http://www.w3.org/2000/svg", "fill", "none", "viewBox", "0 0 12 12"], ["fill", "currentColor", "d", "M12 6a6 6 0 1 1-6-6v1.2A4.8 4.8 0 1 0 10.8 6H12Z"], [1, "fu-toggle-label"], [1, "fu-toggle-start-icon", 3, "name"], [3, "text", "state", "iconName", "testId"], [1, "fu-toggle-label-text"], [1, "fu-toggle-end-icon", 3, "name"], [1, "fu-toggle-label-icon", 3, "name", "fusionTooltip", "configuration"]], template: function ToggleV4Component_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0);
            i0.ɵɵpipe(1, "async");
            i0.ɵɵelementStart(2, "label")(3, "input", 1);
            i0.ɵɵpipe(4, "async");
            i0.ɵɵpipe(5, "async");
            i0.ɵɵpipe(6, "async");
            i0.ɵɵlistener("change", function ToggleV4Component_Template_input_change_3_listener($event) { return ctx.change($event); });
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(7, "div", 2)(8, "div", 3)(9, "div", 4);
            i0.ɵɵnamespaceSVG();
            i0.ɵɵelementStart(10, "svg", 5);
            i0.ɵɵelement(11, "path", 6);
            i0.ɵɵelementEnd()()()()();
            i0.ɵɵnamespaceHTML();
            i0.ɵɵelementStart(12, "div", 7);
            i0.ɵɵpipe(13, "generic");
            i0.ɵɵtemplate(14, ToggleV4Component_Conditional_14_Template, 2, 6, "fusion-icon", 8)(15, ToggleV4Component_Conditional_15_Template, 4, 3);
            i0.ɵɵelementEnd()();
            i0.ɵɵtemplate(16, ToggleV4Component_Conditional_16_Template, 2, 9, "fusion-input-helper", 9);
        } if (rf & 2) {
            i0.ɵɵclassProp("fu-toggle-loading", i0.ɵɵpipeBind1(1, 13, ctx.loading$));
            i0.ɵɵadvance(2);
            i0.ɵɵclassMapInterpolate2("fu-toggle-holder fu-toggle-size-", ctx.size, " fu-toggle-color-", ctx.color, "");
            i0.ɵɵadvance();
            i0.ɵɵproperty("id", ctx.id)("checked", i0.ɵɵpipeBind1(4, 15, ctx.checked$))("disabled", i0.ɵɵpipeBind1(5, 17, ctx.disabled$) || i0.ɵɵpipeBind1(6, 19, ctx.loading$));
            i0.ɵɵadvance(9);
            i0.ɵɵattribute("data-testid", i0.ɵɵpipeBind3(13, 21, ctx.testIdsService.getTestAttribute.bind(ctx), ctx.testId, ctx.testIdToggleModifiers.LABEL));
            i0.ɵɵadvance(2);
            i0.ɵɵconditional(ctx.startIcon ? 14 : -1);
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.labelText ? 15 : -1);
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.helperText ? 16 : -1);
        } }, dependencies: [CommonModule, i1.AsyncPipe, FormsModule, ReactiveFormsModule, IconModule, i2.IconComponent, TooltipDirective, InputHelperComponent, GenericPipe], styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\";.font-v4-bold[_ngcontent-%COMP%], .font-v4-tab-label-2[_ngcontent-%COMP%], .font-v4-chart-2[_ngcontent-%COMP%], .font-v4-chart-1[_ngcontent-%COMP%]{font-family:Inter,sans-serif;font-weight:700;-webkit-font-smoothing:antialiased}.font-v4-semibold[_ngcontent-%COMP%], .font-v4-chip-label[_ngcontent-%COMP%], .font-v4-table-label[_ngcontent-%COMP%], .font-v4-button[_ngcontent-%COMP%], .font-v4-heading-6[_ngcontent-%COMP%], .font-v4-heading-5[_ngcontent-%COMP%], .font-v4-heading-4[_ngcontent-%COMP%], .font-v4-heading-3[_ngcontent-%COMP%], .font-v4-heading-2[_ngcontent-%COMP%], .font-v4-heading-1[_ngcontent-%COMP%], .font-v4-title[_ngcontent-%COMP%]{font-family:Inter,sans-serif;font-weight:600;-webkit-font-smoothing:antialiased}.font-v4-medium[_ngcontent-%COMP%], .font-v4-tab-label-1[_ngcontent-%COMP%], .font-v4-input-label[_ngcontent-%COMP%], .font-v4-overline[_ngcontent-%COMP%], .font-v4-subtitle-2[_ngcontent-%COMP%], .font-v4-subtitle-1[_ngcontent-%COMP%]{font-family:Inter,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased}.font-v4-regular[_ngcontent-%COMP%], .font-v4-caption[_ngcontent-%COMP%], .font-v4-body-2[_ngcontent-%COMP%], [_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   .fu-toggle-label[_ngcontent-%COMP%]   .fu-toggle-label-text[_ngcontent-%COMP%], .font-v4-body-1[_ngcontent-%COMP%]{font-family:Inter,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}.font-v4-title[_ngcontent-%COMP%]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-v4-heading-1[_ngcontent-%COMP%]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-v4-heading-2[_ngcontent-%COMP%]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-v4-heading-3[_ngcontent-%COMP%]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-v4-heading-4[_ngcontent-%COMP%]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-v4-heading-5[_ngcontent-%COMP%]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-v4-heading-6[_ngcontent-%COMP%]{font-size:.75rem;line-height:.75rem;letter-spacing:0}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   .fu-toggle-label[_ngcontent-%COMP%]   .fu-toggle-label-text[_ngcontent-%COMP%], .font-v4-body-1[_ngcontent-%COMP%]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-v4-body-2[_ngcontent-%COMP%]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-v4-subtitle-1[_ngcontent-%COMP%]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-v4-subtitle-2[_ngcontent-%COMP%]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-v4-chart-1[_ngcontent-%COMP%]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-v4-chart-2[_ngcontent-%COMP%]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-v4-button[_ngcontent-%COMP%]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-v4-overline[_ngcontent-%COMP%]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-v4-caption[_ngcontent-%COMP%]{font-size:.75rem;line-height:1rem}.font-v4-table-label[_ngcontent-%COMP%]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-v4-input-label[_ngcontent-%COMP%]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-v4-tab-label-1[_ngcontent-%COMP%], .font-v4-tab-label-2[_ngcontent-%COMP%]{font-size:.875rem;line-height:1rem}.font-v4-chip-label[_ngcontent-%COMP%]{font-size:.75rem;line-height:1rem;letter-spacing:normal}[_nghost-%COMP%]   *[_ngcontent-%COMP%]{box-sizing:border-box}[_nghost-%COMP%]{margin:0;padding:0;vertical-align:initial;text-align:initial}@keyframes _ngcontent-%COMP%_rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes _ngcontent-%COMP%_shineAnimation{0%{background-position:-750px 0}to{background-position:750px 0}}[_nghost-%COMP%]{display:inline-flex;flex-direction:column;gap:12px;--slider-color: var(--action-hover, hsla(0, 0%, 0%, .05));--slider-borer-color: var(--action-outlined-border, hsl(0, 0%, 73%));--slider-dot-color: var(--action-active, hsl(0, 0%, 50.3%));--slider-hover-color: var(--action-hover, hsla(0, 0%, 0%, .05));--slider-hover-borer-color: var(--action-active, hsl(0, 0%, 50.3%));--slider-disabled-color: var(--action-disabled-background, hsl(0, 0%, 95%));--slider-disabled-borer-color: var(--action-outlined-border, hsl(0, 0%, 73%));--slider-disabled-dot-color: var(--action-disabled, hsl(0, 0%, 87%));--slider-checked-color: var(--primary-main, hsl(206, 100%, 50%));--slider-checked-border-color: var(--primary-dark, hsl(208, 93.5%, 47.4%));--slider-checked-dot-color: var(--common-white, #FFFFFF);--slider-hover-checked-color: var(--primary-main-50-p, hsla(206, 100%, 50%, .5));--slider-hover-checked-border-color: var(--primary-main-50-p, hsla(206, 100%, 50%, .5));--slider-disabled-checked-color: var(--primary-main-8-p, hsla(206, 100%, 50%, .08));--slider-disabled-checked-border-color: var(--primary-main-50-p, hsla(206, 100%, 50%, .5));--slider-disabled-checked-dot-color: var(--primary-main-50-p, hsla(206, 100%, 50%, .5));--slider-test-color: var(--warning-main, hsl(42, 100%, 62%));--slider-test-border-color: var(--warning-dark, hsl(42, 100%, 55%));--slider-hover-test-color: var(--warning-main-50-p, hsla(42, 100%, 62%, .5));--slider-hover-test-border-color: var(--warning-dark, hsl(42, 100%, 55%));--slider-disabled-test-color: var(--warning-main-8-p, hsla(42, 100%, 62%, .08));--slider-disabled-test-border-color: var(--warning-main-50-p, hsla(42, 100%, 62%, .5));--slider-disabled-test-dot-color: var(--warning-main-50-p, hsla(42, 100%, 62%, .5));--slider-loader-color: var(--action-active, hsl(0, 0%, 50.3%));--slider-loader-checked-color: var(--primary-dartker, hsl(211, 90%, 42%));--slider-loader-checked-test-color: var(--warning-darker, hsl(25, 50%, 38%));--slider-width: 28px;--slider-height: 16px;--slider-medium-width: 36px;--slider-medium-height: 20px;--slioder-dot-size: 12px;--slioder-loader-size: 8px;--slioder-medium-dot-size: 16px;--slioder-medium-loader-size: 12px}@keyframes _ngcontent-%COMP%_rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]{display:flex;gap:var(--toggle-inner-gap, 12px);align-items:center}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   .fu-toggle-slider[_ngcontent-%COMP%]{background-color:var(--slider-color);width:var(--slider-width);height:var(--slider-height);border-radius:100px;border:1px solid var(--slider-borer-color);position:relative;-webkit-transition:background-color linear .3s 0s;-o-transition:background-color linear .3s 0s;transition:background-color linear .3s 0s}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   .fu-toggle-slider[_ngcontent-%COMP%]   .fu-toggle-slider-dot[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;width:var(--slioder-dot-size);height:var(--slioder-dot-size);border-radius:var(--slioder-dot-size);background-color:var(--slider-dot-color);position:absolute;top:1px;left:1px;-webkit-transition:left linear .3s 0s;-o-transition:left linear .3s 0s;transition:left linear .3s 0s}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   .fu-toggle-slider[_ngcontent-%COMP%]:hover{cursor:pointer;background-color:var(--slider-hover-color);border:1px solid var(--slider-hover-borer-color)}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%]{display:none}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%]:checked + .fu-toggle-slider[_ngcontent-%COMP%]{background-color:var(--slider-checked-color);border-color:var(--slider-checked-border-color)}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%]:checked + .fu-toggle-slider[_ngcontent-%COMP%]   .fu-toggle-slider-dot[_ngcontent-%COMP%]{left:13px;background-color:var(--slider-checked-dot-color)}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%]:checked + .fu-toggle-slider[_ngcontent-%COMP%]   .fu-toggle-slider-dot[_ngcontent-%COMP%]   .fu-toggle-loader[_ngcontent-%COMP%]{color:var(--slider-loader-checked-color)}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%]:checked + .fu-toggle-slider[_ngcontent-%COMP%]:hover{background-color:var(--slider-hover-checked-color);border-color:var(--slider-hover-checked-border-color)}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%]:disabled ~ .fu-toggle-slider[_ngcontent-%COMP%]{background-color:var(--slider-disabled-color);border-color:var(--slider-disabled-borer-color);pointer-events:unset}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%]:disabled ~ .fu-toggle-slider[_ngcontent-%COMP%]:hover{cursor:default}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%]:disabled ~ .fu-toggle-slider[_ngcontent-%COMP%]   .fu-toggle-slider-dot[_ngcontent-%COMP%]{background-color:var(--slider-disabled-dot-color)}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%]:disabled:checked ~ .fu-toggle-slider[_ngcontent-%COMP%]{background-color:var(--slider-disabled-checked-color);border-color:var(--slider-disabled-checked-border-color)}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%]:disabled:checked ~ .fu-toggle-slider[_ngcontent-%COMP%]   .fu-toggle-slider-dot[_ngcontent-%COMP%]{background-color:var(--slider-disabled-checked-dot-color)}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label.fu-toggle-color-test[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%]:checked + .fu-toggle-slider[_ngcontent-%COMP%]{background-color:var(--slider-test-color);border-color:var(--slider-test-border-color)}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label.fu-toggle-color-test[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%]:checked + .fu-toggle-slider[_ngcontent-%COMP%]   .fu-toggle-slider-dot[_ngcontent-%COMP%]{left:13px;background-color:var(--slider-checked-dot-color)}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label.fu-toggle-color-test[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%]:checked + .fu-toggle-slider[_ngcontent-%COMP%]   .fu-toggle-slider-dot[_ngcontent-%COMP%]   .fu-toggle-loader[_ngcontent-%COMP%]{color:var(--slider-loader-checked-test-color)}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label.fu-toggle-color-test[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%]:checked + .fu-toggle-slider[_ngcontent-%COMP%]:hover{background-color:var(--slider-hover-test-color);border-color:var(--slider-hover-test-border-color)}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label.fu-toggle-color-test[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%]:disabled:checked ~ .fu-toggle-slider[_ngcontent-%COMP%]{background-color:var(--slider-disabled-test-color);border-color:var(--slider-disabled-test-border-color)}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label.fu-toggle-color-test[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%]:disabled:checked ~ .fu-toggle-slider[_ngcontent-%COMP%]   .fu-toggle-slider-dot[_ngcontent-%COMP%]{background-color:var(--slider-disabled-test-dot-color)}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label.fu-toggle-size-medium[_ngcontent-%COMP%]   .fu-toggle-slider[_ngcontent-%COMP%]{width:var(--slider-medium-width);height:var(--slider-medium-height)}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label.fu-toggle-size-medium[_ngcontent-%COMP%]   .fu-toggle-slider[_ngcontent-%COMP%]   .fu-toggle-slider-dot[_ngcontent-%COMP%]{width:var(--slioder-medium-dot-size);height:var(--slioder-medium-dot-size)}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label.fu-toggle-size-medium[_ngcontent-%COMP%]   .fu-toggle-slider[_ngcontent-%COMP%]   .fu-toggle-slider-dot[_ngcontent-%COMP%]   .fu-toggle-loader[_ngcontent-%COMP%]{width:var(--slioder-medium-loader-size);height:var(--slioder-medium-loader-size)}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   label.fu-toggle-size-medium[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%]:checked + .fu-toggle-slider[_ngcontent-%COMP%]   .fu-toggle-slider-dot[_ngcontent-%COMP%]{left:17px}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   .fu-toggle-loader[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;width:var(--slioder-loader-size);height:var(--slioder-loader-size);animation:_ngcontent-%COMP%_rotation 1s linear infinite;color:var(--slider-loader-color);opacity:0}[_nghost-%COMP%]   .fu-toggle-wrapper.fu-toggle-loading[_ngcontent-%COMP%]   .fu-toggle-loader[_ngcontent-%COMP%]{opacity:1}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   .fu-toggle-start-icon[_ngcontent-%COMP%], [_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   .fu-toggle-end-icon[_ngcontent-%COMP%], [_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   .fu-toggle-label-icon[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--action-active, hsl(0, 0%, 50.3%))}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   .fu-toggle-label[_ngcontent-%COMP%]{display:flex;align-items:center;gap:var(--toggle-label-gap, 4px)}[_nghost-%COMP%]   .fu-toggle-wrapper[_ngcontent-%COMP%]   .fu-toggle-label[_ngcontent-%COMP%]   .fu-toggle-label-text[_ngcontent-%COMP%]{color:var(--text-primary, hsl(0, 0%, 12.5%))}"], changeDetection: 0 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToggleV4Component, [{
        type: Component,
        args: [{ selector: 'fusion-toggle', standalone: true, host: { class: 'fusion-v4' }, imports: [CommonModule, FormsModule, ReactiveFormsModule, IconModule, TooltipDirective, InputHelperComponent, GenericPipe], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef(() => ToggleV4Component),
                        multi: true
                    }
                ], template: "<div class=\"fu-toggle-wrapper\"\n     [class.fu-toggle-loading]=\"loading$ | async\"\n>\n    <label class=\"fu-toggle-holder fu-toggle-size-{{size}} fu-toggle-color-{{color}}\">\n        <input type=\"checkbox\"\n               [id]=\"id\"\n               [checked]=\"checked$ | async\"\n               [disabled]=\"(disabled$ | async) || (loading$ | async)\"\n               (change)=\"change($event)\"\n        />\n        <div class=\"fu-toggle-slider\">\n            <div class=\"fu-toggle-slider-dot\">\n                <div class=\"fu-toggle-loader\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\">\n                        <path fill=\"currentColor\" d=\"M12 6a6 6 0 1 1-6-6v1.2A4.8 4.8 0 1 0 10.8 6H12Z\"/>\n                    </svg>\n                </div>\n            </div>\n        </div>\n    </label>\n    <div class=\"fu-toggle-label\"\n         [attr.data-testid]=\"testIdsService.getTestAttribute.bind(this) | generic:testId:testIdToggleModifiers.LABEL\">\n        @if (startIcon) {\n            <fusion-icon class=\"fu-toggle-start-icon\" [name]=\"startIcon\"\n                         [attr.data-testid]=\"testIdsService.getTestAttribute.bind(this) | generic:testId:testIdToggleModifiers.START_ICON\"></fusion-icon>\n        }\n        @if (labelText) {\n            <span class=\"fu-toggle-label-text\">{{ labelText }}</span>\n            @if (endIcon) {\n                <fusion-icon class=\"fu-toggle-end-icon\" [name]=\"endIcon\"\n                             [attr.data-testid]=\"testIdsService.getTestAttribute.bind(this) | generic:testId:testIdToggleModifiers.END_ICON\"></fusion-icon>\n            }\n            @if (labelHelpIcon) {\n                <fusion-icon class=\"fu-toggle-label-icon\"\n                             [name]=\"labelHelpIcon\"\n                             [fusionTooltip]=\"labelTooltipText\"\n                             [configuration]=\"labelTooltipConfiguration\"\n                             [attr.data-testid]=\"testIdsService.getTestAttribute.bind(this) | generic:testId:testIdToggleModifiers.LABEL_ICON\"\n                ></fusion-icon>\n            }\n        }\n    </div>\n</div>\n@if (helperText) {\n    <fusion-input-helper [text]=\"helperText\"\n                         [state]=\"helperVariant\"\n                         [iconName]=\"helperIcon\"\n                         [testId]=\"testId\"\n                         [attr.data-testid]=\"testIdsService.getTestAttribute.bind(this) | generic:testId:testIdToggleModifiers.HELPER\"\n    ></fusion-input-helper>\n}\n\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\";.font-v4-bold,.font-v4-tab-label-2,.font-v4-chart-2,.font-v4-chart-1{font-family:Inter,sans-serif;font-weight:700;-webkit-font-smoothing:antialiased}.font-v4-semibold,.font-v4-chip-label,.font-v4-table-label,.font-v4-button,.font-v4-heading-6,.font-v4-heading-5,.font-v4-heading-4,.font-v4-heading-3,.font-v4-heading-2,.font-v4-heading-1,.font-v4-title{font-family:Inter,sans-serif;font-weight:600;-webkit-font-smoothing:antialiased}.font-v4-medium,.font-v4-tab-label-1,.font-v4-input-label,.font-v4-overline,.font-v4-subtitle-2,.font-v4-subtitle-1{font-family:Inter,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased}.font-v4-regular,.font-v4-caption,.font-v4-body-2,:host .fu-toggle-wrapper .fu-toggle-label .fu-toggle-label-text,.font-v4-body-1{font-family:Inter,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}.font-v4-title{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-v4-heading-1{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-v4-heading-2{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-v4-heading-3{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-v4-heading-4{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-v4-heading-5{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-v4-heading-6{font-size:.75rem;line-height:.75rem;letter-spacing:0}:host .fu-toggle-wrapper .fu-toggle-label .fu-toggle-label-text,.font-v4-body-1{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-v4-body-2{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-v4-subtitle-1{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-v4-subtitle-2{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-v4-chart-1{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-v4-chart-2{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-v4-button{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-v4-overline{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-v4-caption{font-size:.75rem;line-height:1rem}.font-v4-table-label{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-v4-input-label{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-v4-tab-label-1,.font-v4-tab-label-2{font-size:.875rem;line-height:1rem}.font-v4-chip-label{font-size:.75rem;line-height:1rem;letter-spacing:normal}:host *{box-sizing:border-box}:host{margin:0;padding:0;vertical-align:initial;text-align:initial}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes shineAnimation{0%{background-position:-750px 0}to{background-position:750px 0}}:host{display:inline-flex;flex-direction:column;gap:12px;--slider-color: var(--action-hover, hsla(0, 0%, 0%, .05));--slider-borer-color: var(--action-outlined-border, hsl(0, 0%, 73%));--slider-dot-color: var(--action-active, hsl(0, 0%, 50.3%));--slider-hover-color: var(--action-hover, hsla(0, 0%, 0%, .05));--slider-hover-borer-color: var(--action-active, hsl(0, 0%, 50.3%));--slider-disabled-color: var(--action-disabled-background, hsl(0, 0%, 95%));--slider-disabled-borer-color: var(--action-outlined-border, hsl(0, 0%, 73%));--slider-disabled-dot-color: var(--action-disabled, hsl(0, 0%, 87%));--slider-checked-color: var(--primary-main, hsl(206, 100%, 50%));--slider-checked-border-color: var(--primary-dark, hsl(208, 93.5%, 47.4%));--slider-checked-dot-color: var(--common-white, #FFFFFF);--slider-hover-checked-color: var(--primary-main-50-p, hsla(206, 100%, 50%, .5));--slider-hover-checked-border-color: var(--primary-main-50-p, hsla(206, 100%, 50%, .5));--slider-disabled-checked-color: var(--primary-main-8-p, hsla(206, 100%, 50%, .08));--slider-disabled-checked-border-color: var(--primary-main-50-p, hsla(206, 100%, 50%, .5));--slider-disabled-checked-dot-color: var(--primary-main-50-p, hsla(206, 100%, 50%, .5));--slider-test-color: var(--warning-main, hsl(42, 100%, 62%));--slider-test-border-color: var(--warning-dark, hsl(42, 100%, 55%));--slider-hover-test-color: var(--warning-main-50-p, hsla(42, 100%, 62%, .5));--slider-hover-test-border-color: var(--warning-dark, hsl(42, 100%, 55%));--slider-disabled-test-color: var(--warning-main-8-p, hsla(42, 100%, 62%, .08));--slider-disabled-test-border-color: var(--warning-main-50-p, hsla(42, 100%, 62%, .5));--slider-disabled-test-dot-color: var(--warning-main-50-p, hsla(42, 100%, 62%, .5));--slider-loader-color: var(--action-active, hsl(0, 0%, 50.3%));--slider-loader-checked-color: var(--primary-dartker, hsl(211, 90%, 42%));--slider-loader-checked-test-color: var(--warning-darker, hsl(25, 50%, 38%));--slider-width: 28px;--slider-height: 16px;--slider-medium-width: 36px;--slider-medium-height: 20px;--slioder-dot-size: 12px;--slioder-loader-size: 8px;--slioder-medium-dot-size: 16px;--slioder-medium-loader-size: 12px}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .fu-toggle-wrapper{display:flex;gap:var(--toggle-inner-gap, 12px);align-items:center}:host .fu-toggle-wrapper label .fu-toggle-slider{background-color:var(--slider-color);width:var(--slider-width);height:var(--slider-height);border-radius:100px;border:1px solid var(--slider-borer-color);position:relative;-webkit-transition:background-color linear .3s 0s;-o-transition:background-color linear .3s 0s;transition:background-color linear .3s 0s}:host .fu-toggle-wrapper label .fu-toggle-slider .fu-toggle-slider-dot{display:flex;align-items:center;justify-content:center;width:var(--slioder-dot-size);height:var(--slioder-dot-size);border-radius:var(--slioder-dot-size);background-color:var(--slider-dot-color);position:absolute;top:1px;left:1px;-webkit-transition:left linear .3s 0s;-o-transition:left linear .3s 0s;transition:left linear .3s 0s}:host .fu-toggle-wrapper label .fu-toggle-slider:hover{cursor:pointer;background-color:var(--slider-hover-color);border:1px solid var(--slider-hover-borer-color)}:host .fu-toggle-wrapper label input[type=checkbox]{display:none}:host .fu-toggle-wrapper label input[type=checkbox]:checked+.fu-toggle-slider{background-color:var(--slider-checked-color);border-color:var(--slider-checked-border-color)}:host .fu-toggle-wrapper label input[type=checkbox]:checked+.fu-toggle-slider .fu-toggle-slider-dot{left:13px;background-color:var(--slider-checked-dot-color)}:host .fu-toggle-wrapper label input[type=checkbox]:checked+.fu-toggle-slider .fu-toggle-slider-dot .fu-toggle-loader{color:var(--slider-loader-checked-color)}:host .fu-toggle-wrapper label input[type=checkbox]:checked+.fu-toggle-slider:hover{background-color:var(--slider-hover-checked-color);border-color:var(--slider-hover-checked-border-color)}:host .fu-toggle-wrapper label input[type=checkbox]:disabled~.fu-toggle-slider{background-color:var(--slider-disabled-color);border-color:var(--slider-disabled-borer-color);pointer-events:unset}:host .fu-toggle-wrapper label input[type=checkbox]:disabled~.fu-toggle-slider:hover{cursor:default}:host .fu-toggle-wrapper label input[type=checkbox]:disabled~.fu-toggle-slider .fu-toggle-slider-dot{background-color:var(--slider-disabled-dot-color)}:host .fu-toggle-wrapper label input[type=checkbox]:disabled:checked~.fu-toggle-slider{background-color:var(--slider-disabled-checked-color);border-color:var(--slider-disabled-checked-border-color)}:host .fu-toggle-wrapper label input[type=checkbox]:disabled:checked~.fu-toggle-slider .fu-toggle-slider-dot{background-color:var(--slider-disabled-checked-dot-color)}:host .fu-toggle-wrapper label.fu-toggle-color-test input[type=checkbox]:checked+.fu-toggle-slider{background-color:var(--slider-test-color);border-color:var(--slider-test-border-color)}:host .fu-toggle-wrapper label.fu-toggle-color-test input[type=checkbox]:checked+.fu-toggle-slider .fu-toggle-slider-dot{left:13px;background-color:var(--slider-checked-dot-color)}:host .fu-toggle-wrapper label.fu-toggle-color-test input[type=checkbox]:checked+.fu-toggle-slider .fu-toggle-slider-dot .fu-toggle-loader{color:var(--slider-loader-checked-test-color)}:host .fu-toggle-wrapper label.fu-toggle-color-test input[type=checkbox]:checked+.fu-toggle-slider:hover{background-color:var(--slider-hover-test-color);border-color:var(--slider-hover-test-border-color)}:host .fu-toggle-wrapper label.fu-toggle-color-test input[type=checkbox]:disabled:checked~.fu-toggle-slider{background-color:var(--slider-disabled-test-color);border-color:var(--slider-disabled-test-border-color)}:host .fu-toggle-wrapper label.fu-toggle-color-test input[type=checkbox]:disabled:checked~.fu-toggle-slider .fu-toggle-slider-dot{background-color:var(--slider-disabled-test-dot-color)}:host .fu-toggle-wrapper label.fu-toggle-size-medium .fu-toggle-slider{width:var(--slider-medium-width);height:var(--slider-medium-height)}:host .fu-toggle-wrapper label.fu-toggle-size-medium .fu-toggle-slider .fu-toggle-slider-dot{width:var(--slioder-medium-dot-size);height:var(--slioder-medium-dot-size)}:host .fu-toggle-wrapper label.fu-toggle-size-medium .fu-toggle-slider .fu-toggle-slider-dot .fu-toggle-loader{width:var(--slioder-medium-loader-size);height:var(--slioder-medium-loader-size)}:host .fu-toggle-wrapper label.fu-toggle-size-medium input[type=checkbox]:checked+.fu-toggle-slider .fu-toggle-slider-dot{left:17px}:host .fu-toggle-wrapper .fu-toggle-loader{display:flex;align-items:center;justify-content:center;width:var(--slioder-loader-size);height:var(--slioder-loader-size);animation:rotation 1s linear infinite;color:var(--slider-loader-color);opacity:0}:host .fu-toggle-wrapper.fu-toggle-loading .fu-toggle-loader{opacity:1}:host .fu-toggle-wrapper .fu-toggle-start-icon,:host .fu-toggle-wrapper .fu-toggle-end-icon,:host .fu-toggle-wrapper .fu-toggle-label-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--action-active, hsl(0, 0%, 50.3%))}:host .fu-toggle-wrapper .fu-toggle-label{display:flex;align-items:center;gap:var(--toggle-label-gap, 4px)}:host .fu-toggle-wrapper .fu-toggle-label .fu-toggle-label-text{color:var(--text-primary, hsl(0, 0%, 12.5%))}\n"] }]
    }], null, { id: [{
            type: Input
        }], labelText: [{
            type: Input
        }], labelHelpIcon: [{
            type: Input
        }], labelTooltipText: [{
            type: Input
        }], labelTooltipConfiguration: [{
            type: Input
        }], helperText: [{
            type: Input
        }], helperIcon: [{
            type: Input
        }], helperVariant: [{
            type: Input
        }], startIcon: [{
            type: Input
        }], endIcon: [{
            type: Input
        }], color: [{
            type: Input
        }], size: [{
            type: Input
        }], loading: [{
            type: Input
        }], disabled: [{
            type: Input
        }], model: [{
            type: Input
        }], modelChange: [{
            type: Output
        }], testId: [{
            type: Input
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ToggleV4Component, { className: "ToggleV4Component", filePath: "toggle-v4.component.ts", lineNumber: 32 }); })();
//# sourceMappingURL=data:application/json;base64, 