import { AXComponent, MXValueComponent } from '@acorex/cdk/common';
import * as i0 from '@angular/core';
import { input, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component, viewChild, signal, afterNextRender, effect, forwardRef, NgModule } from '@angular/core';
import { AXCarouselDirective } from '@acorex/cdk/carousel';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { CommonModule } from '@angular/common';

class AXPickerContainerComponent {
    constructor() {
        this.customClass = input('', ...(ngDevMode ? [{ debugName: "customClass", alias: 'class' }] : [{ alias: 'class' }]));
    }
    get __hostClass() {
        return `${this.customClass()}`;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPickerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: AXPickerContainerComponent, isStandalone: true, selector: "ax-picker-container", inputs: { customClass: { classPropertyName: "customClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXPickerContainerComponent }], ngImport: i0, template: "<div class=\"ax-picker-title-container\">\n  <ng-content select=\"ax-picker-title\"></ng-content>\n</div>\n<div class=\"ax-picker-items-container\">\n  <ng-content select=\"ax-picker-items\"></ng-content>\n</div>\n", styles: ["ax-picker-container{width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}ax-picker-container .ax-picker-items-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}ax-picker-container .ax-picker-title-container{display:flex;align-items:center;justify-content:center;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPickerContainerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-picker-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXPickerContainerComponent }], template: "<div class=\"ax-picker-title-container\">\n  <ng-content select=\"ax-picker-title\"></ng-content>\n</div>\n<div class=\"ax-picker-items-container\">\n  <ng-content select=\"ax-picker-items\"></ng-content>\n</div>\n", styles: ["ax-picker-container{width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}ax-picker-container .ax-picker-items-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}ax-picker-container .ax-picker-title-container{display:flex;align-items:center;justify-content:center;width:100%}\n"] }]
        }], propDecorators: { customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], __hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

class AXPickerItemsComponent extends MXValueComponent {
    constructor() {
        super(...arguments);
        this.swiperRef = viewChild('c', ...(ngDevMode ? [{ debugName: "swiperRef" }] : []));
        this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
        this.valueField = input('id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
        this.textField = input('text', ...(ngDevMode ? [{ debugName: "textField" }] : []));
        this.slidesPerGroup = input(...(ngDevMode ? [undefined, { debugName: "slidesPerGroup" }] : []));
        this.loop = input(...(ngDevMode ? [undefined, { debugName: "loop" }] : []));
        this.selectedItemIndex = signal(null, ...(ngDevMode ? [{ debugName: "selectedItemIndex" }] : []));
        this.minValue = input(null, ...(ngDevMode ? [{ debugName: "minValue" }] : []));
        this.maxValue = input(null, ...(ngDevMode ? [{ debugName: "maxValue" }] : []));
        this.option = signal({
            direction: 'vertical',
            keyboard: true,
            mousewheel: true,
            autoHeight: true,
            slidesPerView: 'auto',
            centeredSlides: true,
            slidesPerGroup: 1,
            freeMode: { enabled: true, sticky: true },
            loop: false,
        }, ...(ngDevMode ? [{ debugName: "option" }] : []));
        this.#init = afterNextRender(async () => {
            await this.swiperRef().init(this.option());
            this.disabledChange.subscribe((e) => {
                if (e) {
                    this.swiperRef().carousel().disable();
                }
                else {
                    this.swiperRef().carousel().enable();
                }
            });
            this.readonlyChange.subscribe((e) => {
                if (e) {
                    this.swiperRef().carousel().disable();
                }
                else {
                    this.swiperRef().carousel().enable();
                }
            });
        });
        this.#effect = effect(() => {
            if (this.swiperRef().carousel()) {
                this.swiperRef()
                    .carousel()
                    .on('slideChange', (e) => {
                    if (this.minValue() && this.items()[e.activeIndex].text < this.minValue())
                        return;
                    if (this.maxValue() && this.items()[e.activeIndex].text > this.maxValue())
                        return;
                    this.onValueChanged.emit({
                        value: this.items()[e.activeIndex],
                        component: this,
                        isUserInteraction: true,
                    });
                });
            }
        }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
        this.#effect2 = effect(() => {
            if (this.swiperRef().carousel() && this.selectedItemIndex()) {
                this.swiperRef().carousel().slideTo(this.selectedItemIndex());
            }
        }, ...(ngDevMode ? [{ debugName: "#effect2" }] : []));
        this.#effect3 = effect(() => {
            if (this.slidesPerGroup()) {
                this.option.update((prev) => ({ ...prev, slidesPerGroup: this.slidesPerGroup() }));
            }
            if (this.loop()) {
                this.option.update((prev) => ({ ...prev, loop: true }));
            }
        }, ...(ngDevMode ? [{ debugName: "#effect3" }] : []));
    }
    #init;
    #effect;
    #effect2;
    #effect3;
    clickHandler(v) {
        if (this.minValue() && v.text < this.minValue())
            return;
        if (this.maxValue() && v.text > this.maxValue())
            return;
        if (v == null)
            return v;
        if (typeof v == 'object') {
            this.selectedItemIndex.set(this.items().findIndex((c) => c[this.valueField()] == v[this.valueField()]));
        }
        else {
            this.selectedItemIndex.set(this.items().findIndex((c) => c[this.valueField()] == v));
        }
    }
    internalSetValue(v) {
        if (v == null)
            return v;
        if (typeof v == 'object') {
            this.selectedItemIndex.set(this.items().findIndex((c) => c[this.valueField()] == v[this.valueField()]));
        }
        else {
            this.selectedItemIndex.set(this.items().findIndex((c) => c[this.valueField()] == v));
        }
    }
    /** @ignore */
    get __hostClass() {
        return [`${this.disabled && 'ax-state-disabled'}`, `${this.readonly && 'ax-state-readonly'}`];
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPickerItemsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPickerItemsComponent, isStandalone: true, selector: "ax-picker-items", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, readonlyChange: { classPropertyName: "readonlyChange", publicName: "readonlyChange", isSignal: false, isRequired: false, transformFunction: null }, disabledChange: { classPropertyName: "disabledChange", publicName: "disabledChange", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, slidesPerGroup: { classPropertyName: "slidesPerGroup", publicName: "slidesPerGroup", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => AXPickerItemsComponent),
                multi: true,
            },
            { provide: AXComponent, useExisting: AXPickerItemsComponent },
        ], viewQueries: [{ propertyName: "swiperRef", first: true, predicate: ["c"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #c=\"axCarousel\" axCarousel class=\"ax-carousel\">\n  <div class=\"ax-carousel-wrapper\">\n    @for (item of items(); track item.id) {\n      <div (click)=\"clickHandler(item)\" class=\"ax-carousel-slide\">\n        @if (minValue() && item.text < minValue()) {\n          <p class=\"ax-picker-item ax-state-disabled\">{{ item.text }}</p>\n        } @else if (maxValue() && item.text > maxValue()) {\n          <p class=\"ax-picker-item ax-state-disabled\">{{ item.text }}</p>\n        } @else {\n          <p class=\"ax-picker-item\">{{ item.text }}</p>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"ax-selected-picker-border\"></div>\n</div>\n", styles: ["ax-picker-items{width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden;-webkit-user-select:none;user-select:none}ax-picker-items .ax-state-disabled{opacity:.5;cursor:not-allowed}ax-picker-items.ax-state-disabled{opacity:.5}ax-picker-items.ax-state-disabled .ax-carousel .ax-carousel-slide{cursor:not-allowed}ax-picker-items .ax-carousel{width:100%;height:100%;position:relative}ax-picker-items .ax-carousel .ax-carousel-wrapper .ax-carousel-slide{cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center}ax-picker-items .ax-carousel .ax-carousel-wrapper .ax-carousel-slide .ax-picker-item{width:100%;padding-block:.5rem;-webkit-user-select:none;user-select:none}ax-picker-items .ax-carousel .ax-carousel-wrapper .ax-carousel-slide .ax-picker-item:hover{background-color:rgba(var(--ax-sys-color-primary-lightest-surface));color:rgba(var(--ax-sys-color-on-primary-lightest-surface))}ax-picker-items .ax-carousel .ax-selected-picker-border{border-block:1px solid rgba(var(--ax-sys-color-primary-dark-surface));height:2rem;position:absolute;top:50%;transform:translateY(-50%);width:100%}.ax-dark ax-picker-items .ax-carousel .ax-selected-picker-border{border-block:1px solid rgba(var(--ax-sys-color-primary-lightest-surface))}\n"], dependencies: [{ kind: "directive", type: AXCarouselDirective, selector: "[axCarousel]", exportAs: ["axCarousel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPickerItemsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-picker-items', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['disabled', 'readonly', 'readonlyChange', 'disabledChange'], outputs: ['onValueChanged'], providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => AXPickerItemsComponent),
                            multi: true,
                        },
                        { provide: AXComponent, useExisting: AXPickerItemsComponent },
                    ], imports: [AXCarouselDirective], template: "<div #c=\"axCarousel\" axCarousel class=\"ax-carousel\">\n  <div class=\"ax-carousel-wrapper\">\n    @for (item of items(); track item.id) {\n      <div (click)=\"clickHandler(item)\" class=\"ax-carousel-slide\">\n        @if (minValue() && item.text < minValue()) {\n          <p class=\"ax-picker-item ax-state-disabled\">{{ item.text }}</p>\n        } @else if (maxValue() && item.text > maxValue()) {\n          <p class=\"ax-picker-item ax-state-disabled\">{{ item.text }}</p>\n        } @else {\n          <p class=\"ax-picker-item\">{{ item.text }}</p>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"ax-selected-picker-border\"></div>\n</div>\n", styles: ["ax-picker-items{width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden;-webkit-user-select:none;user-select:none}ax-picker-items .ax-state-disabled{opacity:.5;cursor:not-allowed}ax-picker-items.ax-state-disabled{opacity:.5}ax-picker-items.ax-state-disabled .ax-carousel .ax-carousel-slide{cursor:not-allowed}ax-picker-items .ax-carousel{width:100%;height:100%;position:relative}ax-picker-items .ax-carousel .ax-carousel-wrapper .ax-carousel-slide{cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center}ax-picker-items .ax-carousel .ax-carousel-wrapper .ax-carousel-slide .ax-picker-item{width:100%;padding-block:.5rem;-webkit-user-select:none;user-select:none}ax-picker-items .ax-carousel .ax-carousel-wrapper .ax-carousel-slide .ax-picker-item:hover{background-color:rgba(var(--ax-sys-color-primary-lightest-surface));color:rgba(var(--ax-sys-color-on-primary-lightest-surface))}ax-picker-items .ax-carousel .ax-selected-picker-border{border-block:1px solid rgba(var(--ax-sys-color-primary-dark-surface));height:2rem;position:absolute;top:50%;transform:translateY(-50%);width:100%}.ax-dark ax-picker-items .ax-carousel .ax-selected-picker-border{border-block:1px solid rgba(var(--ax-sys-color-primary-lightest-surface))}\n"] }]
        }], propDecorators: { swiperRef: [{ type: i0.ViewChild, args: ['c', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], slidesPerGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidesPerGroup", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], __hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

class AXPickerTitleComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPickerTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXPickerTitleComponent, isStandalone: true, selector: "ax-picker-title", providers: [{ provide: AXComponent, useExisting: AXPickerTitleComponent }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["ax-picker-title{display:flex;justify-content:center;align-items:center;padding:.5rem;width:100%;height:fit-content}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPickerTitleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-picker-title', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXPickerTitleComponent }], template: "<ng-content></ng-content>\n", styles: ["ax-picker-title{display:flex;justify-content:center;align-items:center;padding:.5rem;width:100%;height:fit-content}\n"] }]
        }] });

const COMPONENT = [AXPickerContainerComponent, AXPickerItemsComponent, AXPickerTitleComponent];
const MODULES = [CommonModule, AXCarouselDirective];
class AXPickerModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AXPickerModule, imports: [CommonModule, AXCarouselDirective, AXPickerContainerComponent, AXPickerItemsComponent, AXPickerTitleComponent], exports: [AXPickerContainerComponent, AXPickerItemsComponent, AXPickerTitleComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPickerModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPickerModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [...MODULES, ...COMPONENT],
                    exports: [...COMPONENT],
                    providers: [],
                }]
        }] });

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

export { AXPickerContainerComponent, AXPickerItemsComponent, AXPickerModule, AXPickerTitleComponent };
//# sourceMappingURL=acorex-components-picker.mjs.map
