import { ConfirmModalComponent } from '@agorapulse/ui-components/confirm-modal';
import { SymbolRegistry, apCheck, apClose, SymbolComponent } from '@agorapulse/ui-symbol';
import * as i0 from '@angular/core';
import { forwardRef, inject, ChangeDetectorRef, EventEmitter, booleanAttribute, Output, Input, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { first } from 'rxjs/operators';

const AP_CHECKBOX_CONTROL_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => ToggleComponent),
    multi: true,
};
class ToggleComponent {
    symbolRegistry = inject(SymbolRegistry);
    dialog = inject(MatDialog);
    cdr = inject(ChangeDetectorRef);
    inputElement;
    labelElement;
    ariaLabel = '';
    ariaLabelledby = null;
    ariaDescribedby = null;
    labelPosition = 'right';
    disabled = false;
    checked = false;
    required = false;
    confirm = false;
    confirmMessage = 'If you toggle this, it will affect other things. Are you sure';
    confirmOk = 'Confirm';
    confirmCancel = 'Cancel';
    confirmTitle = 'Are you sure?';
    set name(name) {
        if (!name.endsWith('Checkbox')) {
            this._name = name + 'Checkbox';
        }
        else {
            this._name = name;
        }
    }
    get name() {
        return this._name;
    }
    // eslint-disable-next-line
    change = new EventEmitter();
    hasLabel = false;
    _name = '';
    _controlValueAccessorChangeFn;
    onTouched;
    ngOnChanges() {
        if (this.labelElement) {
            this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();
        }
    }
    ngOnInit() {
        this.symbolRegistry.registerSymbols([apCheck, apClose]);
    }
    ngAfterContentInit() {
        if (this.labelElement) {
            this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();
        }
    }
    onValueChange() {
        if (!this.disabled) {
            if (!this.confirm) {
                if (this.onTouched) {
                    this.onTouched();
                }
                this.changeValue();
            }
            else {
                const toggleConfirmModal = {
                    contentText: this.confirmMessage,
                    headerTitle: this.confirmTitle,
                    footerCancelButtonLabel: this.confirmCancel,
                    footerConfirmButtonLabel: this.confirmOk,
                    footerConfirmButtonId: 'confirm',
                    footerCancelButtonId: 'cancel',
                };
                const modalConfig = {
                    matDialogConfig: {
                        panelClass: 'design-system',
                        width: '550px',
                    },
                };
                const dialogRef = ConfirmModalComponent.open(this.dialog, toggleConfirmModal, modalConfig);
                dialogRef
                    .afterClosed()
                    .pipe(first())
                    .subscribe(result => {
                    if (result) {
                        if (this.onTouched) {
                            this.onTouched();
                        }
                        this.changeValue();
                    }
                });
            }
        }
    }
    changeValue() {
        this.checked = !this.checked;
        this.focus();
        this.change.emit(this.checked);
        if (this._controlValueAccessorChangeFn) {
            this._controlValueAccessorChangeFn(this.checked);
        }
        // Assigning the value again here is redundant, but we have to do it in case it was
        // changed inside the `change` listener which will cause the input to be out of sync.
        if (this.inputElement) {
            this.inputElement.nativeElement.checked = this.checked;
        }
        this.cdr.markForCheck();
    }
    focus() {
        this.inputElement.nativeElement.focus();
    }
    writeValue(value) {
        this.checked = value;
        this.cdr.markForCheck();
    }
    registerOnChange(fn) {
        this._controlValueAccessorChangeFn = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    validate({ value }) {
        return (this.required &&
            !value && {
            invalid: true,
        });
    }
    _preventBubblingFromLabel(event) {
        if (!!event.target && this.labelElement.nativeElement.contains(event.target)) {
            event.stopPropagation();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.16", type: ToggleComponent, isStandalone: true, selector: "ap-toggle", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], labelPosition: "labelPosition", disabled: ["disabled", "disabled", booleanAttribute], checked: "checked", required: ["required", "required", booleanAttribute], confirm: "confirm", confirmMessage: "confirmMessage", confirmOk: "confirmOk", confirmCancel: "confirmCancel", confirmTitle: "confirmTitle", name: "name" }, outputs: { change: "change" }, providers: [
            AP_CHECKBOX_CONTROL_VALUE_ACCESSOR,
            {
                provide: NG_VALIDATORS,
                useExisting: ToggleComponent,
                multi: true,
            },
            MatDialog,
        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"toggle\"\n    (click)=\"_preventBubblingFromLabel($event)\">\n    <input\n        #input\n        class=\"hidden\"\n        type=\"checkbox\"\n        role=\"switch\"\n        [id]=\"name\"\n        [name]=\"name\"\n        [checked]=\"checked\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [attr.data-test]=\"name\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.aria-checked]=\"checked\"\n        [class.checked]=\"checked\"\n        (click)=\"onValueChange()\" />\n    <div\n        class=\"switch-container\"\n        [class.label-left]=\"labelPosition === 'left'\">\n        <div\n            class=\"switch\"\n            [class.checked]=\"checked\"\n            [class.disabled]=\"disabled\"\n            (click)=\"onValueChange()\">\n            <div class=\"knob\">\n                <ap-symbol\n                    [class.checked]=\"checked\"\n                    [symbolId]=\"checked ? 'check' : 'close'\" />\n            </div>\n        </div>\n        <label\n            #label\n            [class.disabled]=\"disabled\"\n            [for]=\"name\">\n            <ng-content />\n        </label>\n    </div>\n</div>\n", styles: ["ap-toggle{position:relative}ap-toggle .toggle{display:flex;gap:var(--ref-spacing-xxs);align-items:center;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height);color:var(--ref-color-grey-100)}ap-toggle .toggle input.hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}ap-toggle .toggle input[type=checkbox]{margin:0;padding:0;width:0;height:0;transform:scale(0)}@media(hover:hover){ap-toggle .toggle input[type=checkbox]:focus:not(.disabled)~.switch-container .switch{outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-toggle .toggle input[type=checkbox]:disabled~.switch-container .switch{pointer-events:none;cursor:default}ap-toggle .toggle .switch-container{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-toggle .toggle .switch-container.label-left{flex-direction:row-reverse}ap-toggle .toggle .switch-container .switch{box-sizing:content-box;position:relative;display:flex;align-items:center;padding:2px;width:28px;height:12px;border-radius:16px;background:var(--ref-color-grey-60);transition:background-color .25s;cursor:pointer}ap-toggle .toggle .switch-container .switch:hover,ap-toggle .toggle .switch-container .switch:focus,ap-toggle .toggle .switch-container .switch:active{background:var(--ref-color-grey-80)}ap-toggle .toggle .switch-container .switch .knob{color:var(--ref-color-grey-80)}ap-toggle .toggle .switch-container .switch .knob.checked:active{background:var(--ref-color-electric-blue-60)}ap-toggle .toggle .switch-container .switch .knob.checked{background:var(--ref-color-electric-blue-100)}ap-toggle .toggle .switch-container .switch.checked{background:var(--ref-color-electric-blue-100)}ap-toggle .toggle .switch-container .switch.checked:hover,ap-toggle .toggle .switch-container .switch.checked:focus{background:var(--ref-color-electric-blue-80)}ap-toggle .toggle .switch-container .switch.checked:active{background:var(--ref-color-electric-blue-60)}ap-toggle .toggle .switch-container .switch.checked .knob{left:18px}ap-toggle .toggle .switch-container .switch.checked .knob ap-symbol,ap-toggle .toggle .switch-container .switch.checked .knob ap-symbol svg{color:var(--ref-color-electric-blue-150)}ap-toggle .toggle .switch-container .switch.disabled{background:var(--ref-color-grey-20)}ap-toggle .toggle .switch-container .switch.disabled .knob ap-symbol,ap-toggle .toggle .switch-container .switch.disabled .knob ap-symbol svg{color:var(--ref-color-grey-40)}ap-toggle .toggle .switch-container .switch .knob{width:12px;height:12px;background:#fff;border-radius:100%;position:absolute;transition:left .25s ease-in-out;left:2px}ap-toggle .toggle .switch-container .switch .knob ap-symbol,ap-toggle .toggle .switch-container .switch .knob ap-symbol svg{width:10px;height:10px;min-width:10px;max-width:10px;max-height:10px}ap-toggle .toggle .switch-container label{display:flex;align-items:center;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height)}ap-toggle .toggle .switch-container label:empty{display:none}ap-toggle .toggle .switch-container label.disabled{color:var(--ref-color-grey-60)}ap-toggle .toggle .switch-container label:hover:not(.disabled){cursor:pointer}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ToggleComponent, decorators: [{
            type: Component,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-toggle', imports: [SymbolComponent], providers: [
                        AP_CHECKBOX_CONTROL_VALUE_ACCESSOR,
                        {
                            provide: NG_VALIDATORS,
                            useExisting: ToggleComponent,
                            multi: true,
                        },
                        MatDialog,
                    ], encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"toggle\"\n    (click)=\"_preventBubblingFromLabel($event)\">\n    <input\n        #input\n        class=\"hidden\"\n        type=\"checkbox\"\n        role=\"switch\"\n        [id]=\"name\"\n        [name]=\"name\"\n        [checked]=\"checked\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [attr.data-test]=\"name\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.aria-checked]=\"checked\"\n        [class.checked]=\"checked\"\n        (click)=\"onValueChange()\" />\n    <div\n        class=\"switch-container\"\n        [class.label-left]=\"labelPosition === 'left'\">\n        <div\n            class=\"switch\"\n            [class.checked]=\"checked\"\n            [class.disabled]=\"disabled\"\n            (click)=\"onValueChange()\">\n            <div class=\"knob\">\n                <ap-symbol\n                    [class.checked]=\"checked\"\n                    [symbolId]=\"checked ? 'check' : 'close'\" />\n            </div>\n        </div>\n        <label\n            #label\n            [class.disabled]=\"disabled\"\n            [for]=\"name\">\n            <ng-content />\n        </label>\n    </div>\n</div>\n", styles: ["ap-toggle{position:relative}ap-toggle .toggle{display:flex;gap:var(--ref-spacing-xxs);align-items:center;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height);color:var(--ref-color-grey-100)}ap-toggle .toggle input.hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}ap-toggle .toggle input[type=checkbox]{margin:0;padding:0;width:0;height:0;transform:scale(0)}@media(hover:hover){ap-toggle .toggle input[type=checkbox]:focus:not(.disabled)~.switch-container .switch{outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-toggle .toggle input[type=checkbox]:disabled~.switch-container .switch{pointer-events:none;cursor:default}ap-toggle .toggle .switch-container{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-toggle .toggle .switch-container.label-left{flex-direction:row-reverse}ap-toggle .toggle .switch-container .switch{box-sizing:content-box;position:relative;display:flex;align-items:center;padding:2px;width:28px;height:12px;border-radius:16px;background:var(--ref-color-grey-60);transition:background-color .25s;cursor:pointer}ap-toggle .toggle .switch-container .switch:hover,ap-toggle .toggle .switch-container .switch:focus,ap-toggle .toggle .switch-container .switch:active{background:var(--ref-color-grey-80)}ap-toggle .toggle .switch-container .switch .knob{color:var(--ref-color-grey-80)}ap-toggle .toggle .switch-container .switch .knob.checked:active{background:var(--ref-color-electric-blue-60)}ap-toggle .toggle .switch-container .switch .knob.checked{background:var(--ref-color-electric-blue-100)}ap-toggle .toggle .switch-container .switch.checked{background:var(--ref-color-electric-blue-100)}ap-toggle .toggle .switch-container .switch.checked:hover,ap-toggle .toggle .switch-container .switch.checked:focus{background:var(--ref-color-electric-blue-80)}ap-toggle .toggle .switch-container .switch.checked:active{background:var(--ref-color-electric-blue-60)}ap-toggle .toggle .switch-container .switch.checked .knob{left:18px}ap-toggle .toggle .switch-container .switch.checked .knob ap-symbol,ap-toggle .toggle .switch-container .switch.checked .knob ap-symbol svg{color:var(--ref-color-electric-blue-150)}ap-toggle .toggle .switch-container .switch.disabled{background:var(--ref-color-grey-20)}ap-toggle .toggle .switch-container .switch.disabled .knob ap-symbol,ap-toggle .toggle .switch-container .switch.disabled .knob ap-symbol svg{color:var(--ref-color-grey-40)}ap-toggle .toggle .switch-container .switch .knob{width:12px;height:12px;background:#fff;border-radius:100%;position:absolute;transition:left .25s ease-in-out;left:2px}ap-toggle .toggle .switch-container .switch .knob ap-symbol,ap-toggle .toggle .switch-container .switch .knob ap-symbol svg{width:10px;height:10px;min-width:10px;max-width:10px;max-height:10px}ap-toggle .toggle .switch-container label{display:flex;align-items:center;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height)}ap-toggle .toggle .switch-container label:empty{display:none}ap-toggle .toggle .switch-container label.disabled{color:var(--ref-color-grey-60)}ap-toggle .toggle .switch-container label:hover:not(.disabled){cursor:pointer}\n"] }]
        }], propDecorators: { inputElement: [{
                type: ViewChild,
                args: ['input']
            }], labelElement: [{
                type: ViewChild,
                args: ['label']
            }], ariaLabel: [{
                type: Input,
                args: ['aria-label']
            }], ariaLabelledby: [{
                type: Input,
                args: ['aria-labelledby']
            }], ariaDescribedby: [{
                type: Input,
                args: ['aria-describedby']
            }], labelPosition: [{
                type: Input
            }], disabled: [{
                type: Input,
                args: [{
                        transform: booleanAttribute,
                    }]
            }], checked: [{
                type: Input
            }], required: [{
                type: Input,
                args: [{
                        transform: booleanAttribute,
                    }]
            }], confirm: [{
                type: Input
            }], confirmMessage: [{
                type: Input
            }], confirmOk: [{
                type: Input
            }], confirmCancel: [{
                type: Input
            }], confirmTitle: [{
                type: Input
            }], name: [{
                type: Input,
                args: [{
                        required: true,
                    }]
            }], change: [{
                type: Output
            }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { AP_CHECKBOX_CONTROL_VALUE_ACCESSOR, ToggleComponent };
//# sourceMappingURL=agorapulse-ui-components-toggle.mjs.map
