@acorex/components 19.10.0-next.1 → 19.10.0-next.2

package/fesm2022/acorex-components-picker.mjs

@@ -1,266 +1,161 @@
-import { MXValueComponent, MXBaseComponent } from '@acorex/components/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, Input, Output, Directive, inject, NgZone, PLATFORM_ID, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { input, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component, viewChild, signal, afterNextRender, effect, forwardRef, NgModule } from '@angular/core';
+import { MXValueComponent } from '@acorex/components/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { AXUnsubscriber, AXDrawingUtil } from '@acorex/core/utils';
-import { isPlatformBrowser, CommonModule } from '@angular/common';
-import { startWith } from 'rxjs';
+import * as i1 from '@acorex/cdk/carousel';
+import { AXCarouselDirective } from '@acorex/cdk/carousel';
+import { CommonModule } from '@angular/common';
 
-class AXPickerColumnDirective extends MXValueComponent {
+class AXPickerContainerComponent {
     constructor() {
-        super(...arguments);
-        this.valueField = 'id';
-        this.textField = 'text';
-        this.step = 1;
-        this.itemsChange = new EventEmitter();
-    }
-    get items() {
-        return this._items;
-    }
-    set items(v) {
-        this._items = v;
-        this.itemsChange.emit(v);
+        this.customClass = input('', { alias: 'class' });
     }
-    internalSetValue(v) {
-        if (v == null)
-            return v;
-        else if (typeof v == 'object') {
-            return this.items.find((c) => c[this.valueField] == v[this.valueField]);
-        }
-        else {
-            return this.items.find((c) => c[this.valueField] == v);
-        }
+    get __hostClass() {
+        return `${this.customClass()}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPickerColumnDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: AXPickerColumnDirective, isStandalone: false, selector: "ax-picker-column", inputs: { disabled: "disabled", readonly: "readonly", readonlyChange: "readonlyChange", disabledChange: "disabledChange", valueField: "valueField", textField: "textField", title: "title", step: "step", items: "items" }, outputs: { onValueChanged: "onValueChanged", itemsChange: "itemsChange" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => AXPickerColumnDirective),
-                multi: true,
-            },
-        ], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPickerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: AXPickerContainerComponent, isStandalone: false, selector: "ax-picker-container", inputs: { customClass: { classPropertyName: "customClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, 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: "19.0.3", ngImport: i0, type: AXPickerColumnDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ax-picker-column',
-                    inputs: ['disabled', 'readonly', 'readonlyChange', 'disabledChange'],
-                    outputs: ['onValueChanged'],
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => AXPickerColumnDirective),
-                            multi: true,
-                        },
-                    ],
-                    standalone: false
-                }]
-        }], propDecorators: { valueField: [{
-                type: Input
-            }], textField: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], step: [{
-                type: Input
-            }], itemsChange: [{
-                type: Output
-            }], items: [{
-                type: Input
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPickerContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-picker-container', standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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: { __hostClass: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
-/**
- * @category Components
- * A picker component with OnPush change detection and no encapsulation.
- */
-class AXPickerComponent extends MXBaseComponent {
+class AXPickerItemsComponent extends MXValueComponent {
     constructor() {
         super(...arguments);
-        /** @ignore */
-        this._columns = {};
-        /** @ignore */
-        this._itemHeight = this._calcItemheight();
-        /** @ignore */
-        this._dragging = false;
-        /** @ignore */
-        this._unsubscriber = inject(AXUnsubscriber);
-        /** @ignore */
-        this._zone = inject(NgZone);
-        this.platformID = inject(PLATFORM_ID);
-    }
-    /** @ignore */
-    ngAfterContentInit() {
-        this._columns.changes
-            .pipe(this._unsubscriber.takeUntilDestroy)
-            .pipe(startWith(undefined))
-            .subscribe(() => {
-            this._setHeights();
-            this.cdr.detectChanges();
-            this._bindEvents();
+        this.swiperRef = viewChild('c');
+        this.items = input.required();
+        this.valueField = input('id');
+        this.textField = input('text');
+        this.selectedItemIndex = signal(null);
+        this.slidesPerGroup = input();
+        this.loop = input();
+        this.option = signal({
+            direction: 'vertical',
+            keyboard: true,
+            mousewheel: true,
+            autoHeight: true,
+            slidesPerView: 'auto',
+            centeredSlides: true,
+            slidesPerGroup: 1,
+            freeMode: { enabled: true, sticky: true },
+            loop: false,
         });
-    }
-    /** @ignore */
-    ngOnDestroy() {
-        this._removeEvents();
-    }
-    /** @ignore */
-    _setHeights() {
-        this._itemHeight = this._calcItemheight();
-        setTimeout(() => {
-            const val = this.getHostElement().clientHeight - this.getHostElement().querySelector('.ax-header').clientHeight;
-            this.getHostElement().style.setProperty('--ax-content-height', `${val}px`);
-        }, 50);
-    }
-    /** @ignore */
-    _calcItemheight() {
-        if (isPlatformBrowser(this.platformID)) {
-            const rem = window
-                .getComputedStyle(document.documentElement, null)
-                .getPropertyValue('--ax-size-default');
-            return AXDrawingUtil.convertRemToPixels(Number(rem?.replace('rem', '') ?? 0));
-        }
-        return 0;
-    }
-    /** @ignore */
-    _bindEvents() {
-        this._removeEvents();
-        //
-        this._htmlColumns = Array.from(this.getHostElement().querySelectorAll('.ax-picker-col .ax-content'));
-        this._columns.forEach((c) => {
-            c.onValueChanged.pipe(this._unsubscriber.takeUntilDestroy).subscribe(() => {
-                this._detectSelectedItemsByValue();
+        this.#init = afterNextRender(() => {
+            this.disabledChange.subscribe((e) => {
+                if (e) {
+                    this.swiperRef().carousel().disable();
+                }
+                else {
+                    this.swiperRef().carousel().enable();
+                }
             });
-            c.onOptionChanged.pipe(this._unsubscriber.takeUntilDestroy).subscribe(() => {
-                this.cdr.markForCheck();
+            this.readonlyChange.subscribe((e) => {
+                if (e) {
+                    this.swiperRef().carousel().disable();
+                }
+                else {
+                    this.swiperRef().carousel().enable();
+                }
             });
         });
-        this._htmlColumns.forEach((col, index) => {
-            col['column'] = this._columns.get(index);
-            col.addEventListener('wheel', this._handleMouseWeel.bind(this), {
-                passive: false,
-            });
-            //
-            col.addEventListener('touchstart', this._handleTouchStart.bind(this), {
-                passive: false,
-            });
-            //col.addEventListener("mousedown", this._handleTouchStart.bind(this), { passive: false });
-            //
-            col.addEventListener('touchmove', this._handleTouchMove.bind(this), {
-                passive: false,
-            });
-            //col.addEventListener('mousemove', this._handleTouchMove.bind(this), { passive: false })
-            //
-            col.addEventListener('touchend', this._handleTouchEnd.bind(this), {
-                passive: false,
-            });
-            //col.addEventListener('mouseup', this._handleTouchMove.bind(this), { passive: false })
+        this.#effect = effect(() => {
+            if (this.swiperRef().carousel()) {
+                this.swiperRef()
+                    .carousel()
+                    .on('slideChange', (e) => {
+                    this.onValueChanged.emit({
+                        value: this.items()[e.activeIndex],
+                        component: this,
+                        isUserInteraction: true,
+                    });
+                });
+            }
         });
-    }
-    /** @ignore */
-    _removeEvents() {
-        this._htmlColumns?.forEach((col) => {
-            col.removeEventListener('wheel', this._handleMouseWeel.bind(this));
-            //
-            col.removeEventListener('touchstart', this._handleTouchStart.bind(this));
-            //col.removeEventListener("mousedown", this._handleTouchStart.bind(this));
-            col.removeEventListener('touchmove', this._handleTouchMove.bind(this));
-            //col.removeEventListener('mousemove', this._handleTouchMove.bind(this));
-            //
-            col.removeEventListener('touchend', this._handleTouchEnd.bind(this));
-            //col.removeEventListener('mouseup', this._handleTouchEnd.bind(this));
+        this.#effect2 = effect(() => {
+            if (this.swiperRef().carousel() && this.selectedItemIndex()) {
+                this.swiperRef().carousel().slideTo(this.selectedItemIndex());
+            }
         });
-    }
-    /** @ignore */
-    _handleTouchStart(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        this._currentList = e.currentTarget;
-        this._previousY = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;
-    }
-    /** @ignore */
-    _handleTouchMove(e) {
-        this._dragging = true;
-        e.preventDefault();
-        e.stopPropagation();
-        this._zone.runOutsideAngular(() => {
-            if (this._currentList && this._dragging) {
-                const clientY = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;
-                const delta = clientY - this._previousY;
-                this._previousY = clientY;
-                if (Math.abs(delta) > 1)
-                    this._moveByDelta(this._currentList, -delta);
+        this.#effect3 = effect(() => {
+            if (this.slidesPerGroup()) {
+                this.option.update((prev) => ({ ...prev, slidesPerGroup: this.slidesPerGroup() }));
+            }
+            if (this.loop()) {
+                this.option.update((prev) => ({ ...prev, loop: true }));
             }
         });
     }
-    /** @ignore */
-    _handleTouchEnd(e) {
-        // simulate click
-        const targetelement = e.target;
-        if (!this._dragging && targetelement.tagName == 'LI') {
-            targetelement.click();
+    #init;
+    #effect;
+    #effect2;
+    #effect3;
+    clickHandler(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));
         }
-        this._dragging = false;
-    }
-    /** @ignore */
-    _handleMouseWeel(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        this._moveByDelta(e.currentTarget, e.deltaY);
-    }
-    /** @ignore */
-    _moveByDelta(col, deltaY) {
-        const column = col['column'];
-        if (column.readonly || column.disabled)
-            return;
-        let index = column.items.indexOf(column.value);
-        index = deltaY < 0 ? index - column.step : index + column.step;
-        if (index < 0)
-            index = 0;
-        if (index >= column.items.length)
-            index = column.items.length - 1;
-        column.commitValue(column.items[index], true);
     }
-    /** @ignore */
-    _handleItemClick(column, item) {
-        if (column.readonly || column.disabled)
-            return;
-        column.commitValue(item, true);
+    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 */
-    _detectSelectedItemsByValue() {
-        this._zone.runOutsideAngular(() => {
-            this._htmlColumns.forEach((col) => {
-                const column = col['column'];
-                const index = column.items.indexOf(column.value);
-                col.querySelector('ul').style.transform = `translateY(${-index * this._itemHeight}px)`;
-                this.cdr.markForCheck();
-            });
-        });
-    }
-    /**
-     * Refreshes the component by setting heights and detecting selected items by value.
-     */
-    refresh() {
-        this._setHeights();
-        this._detectSelectedItemsByValue();
+    get __hostClass() {
+        return [`${this.disabled && 'ax-state-disabled'}`, `${this.readonly && 'ax-state-readonly'}`];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPickerComponent, isStandalone: false, selector: "ax-picker", providers: [AXUnsubscriber], queries: [{ propertyName: "_columns", predicate: AXPickerColumnDirective }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-header\">\n  @for (col of _columns; track $index) {\n    <div class=\"ax-picker-col\">\n      <div class=\"ax-header\">\n        {{ col.title }}\n      </div>\n    </div>\n  }\n</div>\n<div class=\"ax-content\">\n  <div class=\"ax-picker-window\"></div>\n  @for (col of _columns; track $index) {\n    <div\n      class=\"ax-picker-col\"\n      [class.ax-state-disabled]=\"col.disabled\"\n      [class.ax-state-readonly]=\"col.readonly\"\n    >\n      <div class=\"ax-content\">\n        <ul>\n          @for (item of col.items; track $index) {\n            <li\n              (click)=\"_handleItemClick(col, item)\"\n              [class.ax-state-active]=\"col.value && col.value[col.valueField] === item[col.valueField]\"\n              [class.ax-state-disabled]=\"col.disabled\"\n              [class.ax-state-readonly]=\"col.readonly\"\n            >\n              {{ item[col.textField] }}\n            </li>\n          }\n        </ul>\n      </div>\n    </div>\n  }\n</div>\n", styles: ["ax-picker{display:flex;width:100%;flex-direction:column;direction:ltr!important;--ax-item-height: var(--ax-size-default);--ax-content-height: 302px;--ax-content-pad: calc((var(--ax-content-height) - var(--ax-item-height)) / 2)}ax-picker>.ax-header,ax-picker>.ax-content{display:flex;width:100%}ax-picker>.ax-header .ax-picker-col,ax-picker>.ax-content .ax-picker-col{display:flex;flex:1 1 0%;flex-direction:column;text-align:center}ax-picker>.ax-header{padding:.5rem;font-size:.875rem;line-height:1.25rem;font-weight:500}ax-picker>.ax-content{position:relative;flex:1 1 0%}ax-picker>.ax-content .ax-picker-window{height:calc(var(--ax-item-height));pointer-events:none;position:absolute;inset-inline-start:0px;top:50%;width:100%;transform:translateY(-50%);border-bottom-width:1px;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface))}ax-picker>.ax-content .ax-picker-col{display:flex;height:100%;flex:1 1 0%;cursor:pointer;flex-direction:column;justify-content:center;text-align:center}ax-picker>.ax-content .ax-picker-col.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-picker>.ax-content .ax-picker-col.ax-state-readonly{cursor:text;opacity:.75}ax-picker>.ax-content .ax-picker-col:hover:not(.ax-state-disabled,.ax-state-readonly){background-color:rgba(var(--ax-color-on-surface))}ax-picker>.ax-content .ax-picker-col>.ax-content{font-feature-settings:\"tnum\";touch-action:pan-y!important;position:relative;flex:1 1 0%;overflow:hidden;font-weight:400}ax-picker>.ax-content .ax-picker-col>.ax-content:before,ax-picker>.ax-content .ax-picker-col>.ax-content:after{height:var(--ax-content-pad);pointer-events:none;position:absolute;inset-inline-start:0px;z-index:10;width:100%;content:\"\"}ax-picker>.ax-content .ax-picker-col>.ax-content:before{top:0;background:linear-gradient(rgba(var(--ax-color-surface)),rgba(var(--ax-color-surface),.3))}ax-picker>.ax-content .ax-picker-col>.ax-content:after{bottom:0;background:linear-gradient(rgba(var(--ax-color-surface),.3),rgba(var(--ax-color-surface)))}ax-picker>.ax-content .ax-picker-col>.ax-content>ul{transition:transform .1s ease 0s;height:var(--ax-content-height);padding-block:var(--ax-content-pad);will-change:transform}ax-picker>.ax-content .ax-picker-col>.ax-content>ul li{height:calc(var(--ax-item-height));scroll-snap-align:center;display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;font-size:1rem;line-height:1.5rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-picker>.ax-content .ax-picker-col>.ax-content>ul li:hover:not(.ax-state-disabled,.ax-state-readonly,.ax-state-active){color:rgba(var(--ax-color-primary-500))}ax-picker>.ax-content .ax-picker-col>.ax-content>ul li.ax-state-active{background-color:rgba(var(--ax-color-primary-200));font-size:1.125rem;line-height:1.75rem;font-weight:500;color:rgba(var(--ax-color-primary-fore-tint))}ax-picker>.ax-content .ax-picker-col:not(:last-child){border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPickerItemsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPickerItemsComponent, isStandalone: false, 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 } }, outputs: { onValueChanged: "onValueChanged" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AXPickerItemsComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "swiperRef", first: true, predicate: ["c"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #c=\"axCarousel\" axCarousel [carouselOptions]=\"option()\" 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        <p class=\"ax-picker-item\">{{ item.text }}</p>\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}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-200));color:rgba(var(--ax-sys-color-on-contrast-primary))}ax-picker-items .ax-carousel .ax-selected-picker-border{border-block:1px solid rgba(var(--ax-sys-color-primary-500));height:2rem;position:absolute;top:50%;transform:translateY(-50%);width:100%}\n"], dependencies: [{ kind: "directive", type: i1.AXCarouselDirective, selector: "[axCarousel]", inputs: ["carouselOptions"], exportAs: ["axCarousel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPickerItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [AXUnsubscriber], standalone: false, template: "<div class=\"ax-header\">\n  @for (col of _columns; track $index) {\n    <div class=\"ax-picker-col\">\n      <div class=\"ax-header\">\n        {{ col.title }}\n      </div>\n    </div>\n  }\n</div>\n<div class=\"ax-content\">\n  <div class=\"ax-picker-window\"></div>\n  @for (col of _columns; track $index) {\n    <div\n      class=\"ax-picker-col\"\n      [class.ax-state-disabled]=\"col.disabled\"\n      [class.ax-state-readonly]=\"col.readonly\"\n    >\n      <div class=\"ax-content\">\n        <ul>\n          @for (item of col.items; track $index) {\n            <li\n              (click)=\"_handleItemClick(col, item)\"\n              [class.ax-state-active]=\"col.value && col.value[col.valueField] === item[col.valueField]\"\n              [class.ax-state-disabled]=\"col.disabled\"\n              [class.ax-state-readonly]=\"col.readonly\"\n            >\n              {{ item[col.textField] }}\n            </li>\n          }\n        </ul>\n      </div>\n    </div>\n  }\n</div>\n", styles: ["ax-picker{display:flex;width:100%;flex-direction:column;direction:ltr!important;--ax-item-height: var(--ax-size-default);--ax-content-height: 302px;--ax-content-pad: calc((var(--ax-content-height) - var(--ax-item-height)) / 2)}ax-picker>.ax-header,ax-picker>.ax-content{display:flex;width:100%}ax-picker>.ax-header .ax-picker-col,ax-picker>.ax-content .ax-picker-col{display:flex;flex:1 1 0%;flex-direction:column;text-align:center}ax-picker>.ax-header{padding:.5rem;font-size:.875rem;line-height:1.25rem;font-weight:500}ax-picker>.ax-content{position:relative;flex:1 1 0%}ax-picker>.ax-content .ax-picker-window{height:calc(var(--ax-item-height));pointer-events:none;position:absolute;inset-inline-start:0px;top:50%;width:100%;transform:translateY(-50%);border-bottom-width:1px;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-on-surface))}ax-picker>.ax-content .ax-picker-col{display:flex;height:100%;flex:1 1 0%;cursor:pointer;flex-direction:column;justify-content:center;text-align:center}ax-picker>.ax-content .ax-picker-col.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-picker>.ax-content .ax-picker-col.ax-state-readonly{cursor:text;opacity:.75}ax-picker>.ax-content .ax-picker-col:hover:not(.ax-state-disabled,.ax-state-readonly){background-color:rgba(var(--ax-color-on-surface))}ax-picker>.ax-content .ax-picker-col>.ax-content{font-feature-settings:\"tnum\";touch-action:pan-y!important;position:relative;flex:1 1 0%;overflow:hidden;font-weight:400}ax-picker>.ax-content .ax-picker-col>.ax-content:before,ax-picker>.ax-content .ax-picker-col>.ax-content:after{height:var(--ax-content-pad);pointer-events:none;position:absolute;inset-inline-start:0px;z-index:10;width:100%;content:\"\"}ax-picker>.ax-content .ax-picker-col>.ax-content:before{top:0;background:linear-gradient(rgba(var(--ax-color-surface)),rgba(var(--ax-color-surface),.3))}ax-picker>.ax-content .ax-picker-col>.ax-content:after{bottom:0;background:linear-gradient(rgba(var(--ax-color-surface),.3),rgba(var(--ax-color-surface)))}ax-picker>.ax-content .ax-picker-col>.ax-content>ul{transition:transform .1s ease 0s;height:var(--ax-content-height);padding-block:var(--ax-content-pad);will-change:transform}ax-picker>.ax-content .ax-picker-col>.ax-content>ul li{height:calc(var(--ax-item-height));scroll-snap-align:center;display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;font-size:1rem;line-height:1.5rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-picker>.ax-content .ax-picker-col>.ax-content>ul li:hover:not(.ax-state-disabled,.ax-state-readonly,.ax-state-active){color:rgba(var(--ax-color-primary-500))}ax-picker>.ax-content .ax-picker-col>.ax-content>ul li.ax-state-active{background-color:rgba(var(--ax-color-primary-200));font-size:1.125rem;line-height:1.75rem;font-weight:500;color:rgba(var(--ax-color-primary-fore-tint))}ax-picker>.ax-content .ax-picker-col:not(:last-child){border-inline-end-width:1px;border-color:rgba(var(--ax-color-border-default))}\n"] }]
-        }], propDecorators: { _columns: [{
-                type: ContentChildren,
-                args: [AXPickerColumnDirective, { emitDistinctChangesOnly: true }]
+            args: [{ selector: 'ax-picker-items', standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['disabled', 'readonly', 'readonlyChange', 'disabledChange'], outputs: ['onValueChanged'], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXPickerItemsComponent),
+                            multi: true,
+                        },
+                    ], template: "<div #c=\"axCarousel\" axCarousel [carouselOptions]=\"option()\" 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        <p class=\"ax-picker-item\">{{ item.text }}</p>\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}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-200));color:rgba(var(--ax-sys-color-on-contrast-primary))}ax-picker-items .ax-carousel .ax-selected-picker-border{border-block:1px solid rgba(var(--ax-sys-color-primary-500));height:2rem;position:absolute;top:50%;transform:translateY(-50%);width:100%}\n"] }]
+        }], propDecorators: { __hostClass: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
-const COMPONENT = [AXPickerComponent, AXPickerColumnDirective];
-const MODULES = [CommonModule];
+class AXPickerTitleComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPickerTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPickerTitleComponent, isStandalone: false, selector: "ax-picker-title", 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: "19.0.3", ngImport: i0, type: AXPickerTitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-picker-title', standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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: "19.0.3", ngImport: i0, type: AXPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXPickerModule, declarations: [AXPickerComponent, AXPickerColumnDirective], imports: [CommonModule], exports: [AXPickerComponent, AXPickerColumnDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPickerModule, imports: [MODULES] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXPickerModule, declarations: [AXPickerContainerComponent, AXPickerItemsComponent, AXPickerTitleComponent], imports: [CommonModule, AXCarouselDirective], exports: [AXPickerContainerComponent, AXPickerItemsComponent, AXPickerTitleComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPickerModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPickerModule, decorators: [{
             type: NgModule,
@@ -276,5 +171,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPickerColumnDirective, AXPickerComponent, AXPickerModule };
+export { AXPickerContainerComponent, AXPickerItemsComponent, AXPickerModule, AXPickerTitleComponent };
 //# sourceMappingURL=acorex-components-picker.mjs.map

package/fesm2022/acorex-components-picker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-picker.mjs","sources":["../../../../libs/components/picker/src/lib/picker-column.directive.ts","../../../../libs/components/picker/src/lib/picker.component.ts","../../../../libs/components/picker/src/lib/picker.component.html","../../../../libs/components/picker/src/lib/picker.module.ts","../../../../libs/components/picker/src/acorex-components-picker.ts"],"sourcesContent":["import { MXValueComponent } from '@acorex/components/common';\nimport { Directive, EventEmitter, Input, Output, forwardRef } from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Directive({\n    selector: 'ax-picker-column',\n    inputs: ['disabled', 'readonly', 'readonlyChange', 'disabledChange'],\n    outputs: ['onValueChanged'],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => AXPickerColumnDirective),\n            multi: true,\n        },\n    ],\n    standalone: false\n})\nexport class AXPickerColumnDirective extends MXValueComponent {\n  @Input()\n  valueField = 'id';\n\n  @Input()\n  textField = 'text';\n\n  @Input()\n  public title: string;\n  @Input()\n  public step = 1;\n\n  @Output()\n  itemsChange: EventEmitter<unknown[]> = new EventEmitter<unknown[]>();\n\n  private _items: unknown[];\n  @Input()\n  public get items(): unknown[] {\n    return this._items;\n  }\n  public set items(v: unknown[]) {\n    this._items = v;\n    this.itemsChange.emit(v);\n  }\n\n  override internalSetValue(v) {\n    if (v == null) return v;\n    else if (typeof v == 'object') {\n      return this.items.find((c) => c[this.valueField] == v[this.valueField]);\n    } else {\n      return this.items.find((c) => c[this.valueField] == v);\n    }\n  }\n}\n","import { MXBaseComponent } from '@acorex/components/common';\nimport { AXDrawingUtil, AXUnsubscriber } from '@acorex/core/utils';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  NgZone,\n  OnDestroy,\n  PLATFORM_ID,\n  QueryList,\n  ViewEncapsulation,\n  inject,\n} from '@angular/core';\nimport { startWith } from 'rxjs';\nimport { AXPickerColumnDirective } from './picker-column.directive';\n\n/**\n * @category Components\n * A picker component with OnPush change detection and no encapsulation.\n */\n@Component({\n    selector: 'ax-picker',\n    templateUrl: './picker.component.html',\n    styleUrls: ['./picker.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    providers: [AXUnsubscriber],\n    standalone: false\n})\nexport class AXPickerComponent extends MXBaseComponent implements AfterContentInit, OnDestroy {\n  /** @ignore */\n  @ContentChildren(AXPickerColumnDirective, { emitDistinctChangesOnly: true })\n\n  /** @ignore */\n  protected _columns: QueryList<AXPickerColumnDirective> = {} as QueryList<AXPickerColumnDirective>;\n\n  /** @ignore */\n  private _itemHeight = this._calcItemheight();\n\n  /** @ignore */\n  private _htmlColumns: HTMLDivElement[];\n\n  /** @ignore */\n  private _dragging = false;\n\n  /** @ignore */\n  private _previousY: number;\n\n  /** @ignore */\n  private _currentList: HTMLDivElement;\n\n  /** @ignore */\n  protected _unsubscriber: AXUnsubscriber = inject(AXUnsubscriber);\n\n  /** @ignore */\n  protected _zone: NgZone = inject(NgZone);\n  protected platformID = inject(PLATFORM_ID);\n\n  /** @ignore */\n  ngAfterContentInit() {\n    this._columns.changes\n      .pipe(this._unsubscriber.takeUntilDestroy)\n      .pipe(startWith(undefined))\n      .subscribe(() => {\n        this._setHeights();\n        this.cdr.detectChanges();\n        this._bindEvents();\n      });\n  }\n\n  /** @ignore */\n  ngOnDestroy() {\n    this._removeEvents();\n  }\n\n  /** @ignore */\n  private _setHeights() {\n    this._itemHeight = this._calcItemheight();\n    setTimeout(() => {\n      const val =\n        this.getHostElement().clientHeight - this.getHostElement().querySelector('.ax-header').clientHeight;\n      this.getHostElement().style.setProperty('--ax-content-height', `${val}px`);\n    }, 50);\n  }\n\n  /** @ignore */\n  private _calcItemheight(): number {\n    if (isPlatformBrowser(this.platformID)) {\n      const rem = window\n        .getComputedStyle(document.documentElement, null)\n        .getPropertyValue('--ax-size-default');\n      return AXDrawingUtil.convertRemToPixels(Number(rem?.replace('rem', '') ?? 0));\n    }\n    return 0;\n  }\n\n  /** @ignore */\n  private _bindEvents(): void {\n    this._removeEvents();\n    //\n    this._htmlColumns = Array.from(\n      this.getHostElement().querySelectorAll<HTMLDivElement>('.ax-picker-col .ax-content'),\n    );\n    this._columns.forEach((c) => {\n      c.onValueChanged.pipe(this._unsubscriber.takeUntilDestroy).subscribe(() => {\n        this._detectSelectedItemsByValue();\n      });\n      c.onOptionChanged.pipe(this._unsubscriber.takeUntilDestroy).subscribe(() => {\n        this.cdr.markForCheck();\n      });\n    });\n\n    this._htmlColumns.forEach((col, index) => {\n      col['column'] = this._columns.get(index);\n      col.addEventListener('wheel', this._handleMouseWeel.bind(this), {\n        passive: false,\n      });\n      //\n      col.addEventListener('touchstart', this._handleTouchStart.bind(this), {\n        passive: false,\n      });\n      //col.addEventListener(\"mousedown\", this._handleTouchStart.bind(this), { passive: false });\n      //\n      col.addEventListener('touchmove', this._handleTouchMove.bind(this), {\n        passive: false,\n      });\n      //col.addEventListener('mousemove', this._handleTouchMove.bind(this), { passive: false })\n      //\n      col.addEventListener('touchend', this._handleTouchEnd.bind(this), {\n        passive: false,\n      });\n      //col.addEventListener('mouseup', this._handleTouchMove.bind(this), { passive: false })\n    });\n  }\n\n  /** @ignore */\n  private _removeEvents(): void {\n    this._htmlColumns?.forEach((col) => {\n      col.removeEventListener('wheel', this._handleMouseWeel.bind(this));\n      //\n      col.removeEventListener('touchstart', this._handleTouchStart.bind(this));\n      //col.removeEventListener(\"mousedown\", this._handleTouchStart.bind(this));\n      col.removeEventListener('touchmove', this._handleTouchMove.bind(this));\n      //col.removeEventListener('mousemove', this._handleTouchMove.bind(this));\n      //\n      col.removeEventListener('touchend', this._handleTouchEnd.bind(this));\n      //col.removeEventListener('mouseup', this._handleTouchEnd.bind(this));\n    });\n  }\n\n  /** @ignore */\n  _handleTouchStart(e: MouseEvent | TouchEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    this._currentList = e.currentTarget as HTMLDivElement;\n    this._previousY = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;\n  }\n\n  /** @ignore */\n  private _handleTouchMove(e: MouseEvent | TouchEvent): void {\n    this._dragging = true;\n    e.preventDefault();\n    e.stopPropagation();\n    this._zone.runOutsideAngular(() => {\n      if (this._currentList && this._dragging) {\n        const clientY = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;\n        const delta = clientY - this._previousY;\n        this._previousY = clientY;\n        if (Math.abs(delta) > 1) this._moveByDelta(this._currentList, -delta);\n      }\n    });\n  }\n\n  /** @ignore */\n  private _handleTouchEnd(e: MouseEvent | TouchEvent): void {\n    // simulate click\n    const targetelement = e.target as HTMLElement;\n    if (!this._dragging && targetelement.tagName == 'LI') {\n      targetelement.click();\n    }\n    this._dragging = false;\n  }\n\n  /** @ignore */\n  private _handleMouseWeel(e: WheelEvent): void {\n    e.preventDefault();\n    e.stopPropagation();\n    this._moveByDelta(e.currentTarget as HTMLDivElement, e.deltaY);\n  }\n\n  /** @ignore */\n  private _moveByDelta(col: HTMLDivElement, deltaY: number) {\n    const column = col['column'] as AXPickerColumnDirective;\n    if (column.readonly || column.disabled) return;\n    let index = column.items.indexOf(column.value);\n    index = deltaY < 0 ? index - column.step : index + column.step;\n    if (index < 0) index = 0;\n    if (index >= column.items.length) index = column.items.length - 1;\n    column.commitValue(column.items[index], true);\n  }\n\n  /** @ignore */\n  protected _handleItemClick(column: AXPickerColumnDirective, item: any) {\n    if (column.readonly || column.disabled) return;\n    column.commitValue(item, true);\n  }\n\n  /** @ignore */\n  private _detectSelectedItemsByValue(): void {\n    this._zone.runOutsideAngular(() => {\n      this._htmlColumns.forEach((col) => {\n        const column = col['column'] as AXPickerColumnDirective;\n        const index = column.items.indexOf(column.value);\n        col.querySelector('ul').style.transform = `translateY(${-index * this._itemHeight}px)`;\n        this.cdr.markForCheck();\n      });\n    });\n  }\n\n  /**\n   * Refreshes the component by setting heights and detecting selected items by value.\n   */\n  public refresh() {\n    this._setHeights();\n    this._detectSelectedItemsByValue();\n  }\n}\n","<div class=\"ax-header\">\n  @for (col of _columns; track $index) {\n    <div class=\"ax-picker-col\">\n      <div class=\"ax-header\">\n        {{ col.title }}\n      </div>\n    </div>\n  }\n</div>\n<div class=\"ax-content\">\n  <div class=\"ax-picker-window\"></div>\n  @for (col of _columns; track $index) {\n    <div\n      class=\"ax-picker-col\"\n      [class.ax-state-disabled]=\"col.disabled\"\n      [class.ax-state-readonly]=\"col.readonly\"\n    >\n      <div class=\"ax-content\">\n        <ul>\n          @for (item of col.items; track $index) {\n            <li\n              (click)=\"_handleItemClick(col, item)\"\n              [class.ax-state-active]=\"col.value && col.value[col.valueField] === item[col.valueField]\"\n              [class.ax-state-disabled]=\"col.disabled\"\n              [class.ax-state-readonly]=\"col.readonly\"\n            >\n              {{ item[col.textField] }}\n            </li>\n          }\n        </ul>\n      </div>\n    </div>\n  }\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXPickerColumnDirective } from './picker-column.directive';\nimport { AXPickerComponent } from './picker.component';\n\nconst COMPONENT = [AXPickerComponent, AXPickerColumnDirective];\nconst MODULES = [CommonModule];\n\n@NgModule({\n  declarations: [...COMPONENT],\n  imports: [...MODULES],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXPickerModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-picker.mjs","sources":["../../../../libs/components/picker/src/lib/picker-container/picker-container.component.ts","../../../../libs/components/picker/src/lib/picker-container/picker-container.component.html","../../../../libs/components/picker/src/lib/picker-items/picker-items.component.ts","../../../../libs/components/picker/src/lib/picker-items/picker-items.component.html","../../../../libs/components/picker/src/lib/picker-title/picker-title.component.ts","../../../../libs/components/picker/src/lib/picker-title/picker-title.component.html","../../../../libs/components/picker/src/lib/picker.module.ts","../../../../libs/components/picker/src/acorex-components-picker.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, input, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'ax-picker-container',\n  templateUrl: './picker-container.component.html',\n  styleUrls: ['./picker-container.component.scss'],\n  standalone: false,\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AXPickerContainerComponent {\n  customClass = input<string>('', { alias: 'class' });\n\n  @HostBinding('class')\n  get __hostClass(): string {\n    return `${this.customClass()}`;\n  }\n}\n","<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","import { AXCarouselDirective, AXCarouselOptions } from '@acorex/cdk/carousel';\nimport { MXValueComponent } from '@acorex/components/common';\nimport {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  forwardRef,\n  HostBinding,\n  input,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'ax-picker-items',\n  templateUrl: './picker-items.component.html',\n  styleUrls: ['./picker-items.component.scss'],\n  standalone: false,\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  inputs: ['disabled', 'readonly', 'readonlyChange', 'disabledChange'],\n  outputs: ['onValueChanged'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AXPickerItemsComponent),\n      multi: true,\n    },\n  ],\n})\nexport class AXPickerItemsComponent extends MXValueComponent {\n  protected swiperRef = viewChild<AXCarouselDirective>('c');\n\n  items = input.required<any[]>();\n  valueField = input('id');\n  textField = input('text');\n  selectedItemIndex = signal(null);\n  slidesPerGroup = input<number>();\n  loop = input<boolean>();\n\n  protected option = signal<AXCarouselOptions>({\n    direction: 'vertical',\n    keyboard: true,\n    mousewheel: true,\n    autoHeight: true,\n    slidesPerView: 'auto',\n    centeredSlides: true,\n    slidesPerGroup: 1,\n    freeMode: { enabled: true, sticky: true },\n    loop: false,\n  });\n\n  #init = afterNextRender(() => {\n    this.disabledChange.subscribe((e) => {\n      if (e) {\n        this.swiperRef().carousel().disable();\n      } else {\n        this.swiperRef().carousel().enable();\n      }\n    });\n\n    this.readonlyChange.subscribe((e) => {\n      if (e) {\n        this.swiperRef().carousel().disable();\n      } else {\n        this.swiperRef().carousel().enable();\n      }\n    });\n  });\n\n  #effect = effect(() => {\n    if (this.swiperRef().carousel()) {\n      this.swiperRef()\n        .carousel()\n        .on('slideChange', (e) => {\n          this.onValueChanged.emit({\n            value: this.items()[e.activeIndex],\n            component: this,\n            isUserInteraction: true,\n          });\n        });\n    }\n  });\n\n  #effect2 = effect(() => {\n    if (this.swiperRef().carousel() && this.selectedItemIndex()) {\n      this.swiperRef().carousel().slideTo(this.selectedItemIndex());\n    }\n  });\n\n  #effect3 = effect(() => {\n    if (this.slidesPerGroup()) {\n      this.option.update((prev) => ({ ...prev, slidesPerGroup: this.slidesPerGroup() }));\n    }\n    if (this.loop()) {\n      this.option.update((prev) => ({ ...prev, loop: true }));\n    }\n  });\n\n  protected clickHandler(v: any) {\n    if (v == null) return v;\n    if (typeof v == 'object') {\n      this.selectedItemIndex.set(this.items().findIndex((c) => c[this.valueField()] == v[this.valueField()]));\n    } else {\n      this.selectedItemIndex.set(this.items().findIndex((c) => c[this.valueField()] == v));\n    }\n  }\n\n  override internalSetValue(v) {\n    if (v == null) return v;\n    if (typeof v == 'object') {\n      this.selectedItemIndex.set(this.items().findIndex((c) => c[this.valueField()] == v[this.valueField()]));\n    } else {\n      this.selectedItemIndex.set(this.items().findIndex((c) => c[this.valueField()] == v));\n    }\n  }\n\n  /** @ignore */\n  @HostBinding('class')\n  private get __hostClass(): string[] {\n    return [`${this.disabled && 'ax-state-disabled'}`, `${this.readonly && 'ax-state-readonly'}`];\n  }\n}\n","<div #c=\"axCarousel\" axCarousel [carouselOptions]=\"option()\" 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        <p class=\"ax-picker-item\">{{ item.text }}</p>\n      </div>\n    }\n  </div>\n\n  <div class=\"ax-selected-picker-border\"></div>\n</div>\n","import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'ax-picker-title',\n  templateUrl: './picker-title.component.html',\n  styleUrls: ['./picker-title.component.scss'],\n  standalone: false,\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AXPickerTitleComponent {}\n","<ng-content></ng-content>\n","import { AXCarouselDirective } from '@acorex/cdk/carousel';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXPickerContainerComponent } from './picker-container/picker-container.component';\nimport { AXPickerItemsComponent } from './picker-items/picker-items.component';\nimport { AXPickerTitleComponent } from './picker-title/picker-title.component';\n\nconst COMPONENT = [AXPickerContainerComponent, AXPickerItemsComponent, AXPickerTitleComponent];\nconst MODULES = [CommonModule, AXCarouselDirective];\n\n@NgModule({\n  declarations: [...COMPONENT],\n  imports: [...MODULES],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXPickerModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-popup.mjs

@@ -168,11 +168,11 @@ class AXPopupComponent extends MXBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPopupComponent, deps: [{ token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: i1.AXLoadingService }, { token: i2.AXPlatform }, { token: DIALOG_DATA }, { token: i3.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPopupComponent, isStandalone: false, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXPopupComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper \" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\n  <div class=\"ax-popup  ax-popup-{{ data.size }}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!data.draggable\">\n    <div cdkDragHandle class=\"ax-popup-header-container\">\n      @if(data.header){\n      <div class=\"ax-popup-header\">\n        <span class=\"ax-popup-title\">{{ data.title | translate | async }}</span>\n        @if(data.closeButton){\n        <ax-close-button tabindex=\"1\"></ax-close-button>\n        }\n      </div>\n      }\n    </div>\n    <div class=\"ax-popup-main-container ax-loading-container\">\n      <div class=\"ax-popup-body-container\">\n        <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\n      </div>\n      <div class=\"ax-popup-footer-container\"></div>\n    </div>\n  </div>\n</div>", styles: [".ax-popup{max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));margin-left:auto;margin-right:auto;display:flex;width:auto;flex-direction:column;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));padding:0;--ax-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);outline:2px solid transparent;outline-offset:2px;color:rgba(var(--ax-color-text-default))}.ax-popup .ax-popup-header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.75rem}.ax-popup .ax-popup-header .ax-popup-title{font-size:1rem;line-height:1;font-weight:500}@media (min-width: 768px){.ax-popup .ax-popup-header .ax-popup-title{font-size:1.125rem;line-height:1.75rem}}.ax-popup ax-footer{box-shadow:0 2px 10px #0000004d;display:flex;align-items:center;justify-content:space-between;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.75rem}.ax-popup:focus{outline:2px solid transparent;outline-offset:2px}.ax-popup:focus-visible{border-color:rgba(var(--ax-color-primary-500))}.ax-popup .ax-popup-main-container{display:flex;flex:1 1 0%;flex-direction:column;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{flex:1 1 0%;overflow:auto}.ax-popup.ax-popup-full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh));border-radius:0!important}.ax-popup.ax-fit{width:fit-content!important}.ax-popup.ax-fit .ax-popup-body-container{max-height:100vh}.ax-popup.ax-fit .ax-popup-body-container>ng-component>div{width:fit-content!important}@media (min-width: 320px) and (max-width: 640px){.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.ax-popup.ax-popup-lg{width:93vw!important;height:fit-content;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}.ax-popup.ax-popup-sm .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-md .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-lg .ax-popup-body-container>ng-component>div{width:100%}}@media (min-width: 768px){.ax-popup.ax-popup-sm{width:55vw!important}.ax-popup.ax-popup-md{width:65vw!important}.ax-popup.ax-popup-lg{width:75vw!important}}@media (min-width: 1280px){.ax-popup.ax-popup-sm{width:30vw!important}.ax-popup.ax-popup-md{width:50vw!important}.ax-popup.ax-popup-lg{width:85vw!important}}@media (min-width: 1536px){.ax-popup.ax-popup-sm{width:25vw!important}.ax-popup.ax-popup-md{width:40vw!important}.ax-popup.ax-popup-lg{width:65vw!important}}\n"], dependencies: [{ kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i7.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPopupComponent, isStandalone: false, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, providers: [{ provide: AXClosbaleComponent, useExisting: AXPopupComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\n  <div class=\"ax-popup ax-popup-{{ data.size }}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!data.draggable\">\n    <div cdkDragHandle class=\"ax-popup-header-container\">\n      @if (data.header) {\n        <div class=\"ax-popup-header\">\n          <span class=\"ax-popup-title\">{{ data.title | translate | async }}</span>\n          @if (data.closeButton) {\n            <ax-close-button tabindex=\"1\"></ax-close-button>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"ax-popup-main-container ax-loading-container\">\n      <div class=\"ax-popup-body-container\">\n        <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\n      </div>\n      <div class=\"ax-popup-footer-container\"></div>\n    </div>\n  </div>\n</div>\n", styles: [".ax-popup{max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));margin-left:auto;margin-right:auto;display:flex;width:auto;flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-border-color));background-color:rgba(var(--ax-comp-popup-bg-color, var(--ax-sys-color-surface-lowest)));padding:0;--ax-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);outline:2px solid transparent;outline-offset:2px;color:rgba(var(--ax-sys-body-text-color))}.ax-popup .ax-popup-header-container{background-color:rgba(var(--ax-comp-popup-header-bg-color, var(--ax-sys-color-surface-low)))}.ax-popup .ax-popup-header-container .ax-popup-header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;border-color:rgba(var(--ax-sys-border-color));padding:.75rem}.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:1rem;font-weight:500}@media (min-width: 768px){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:1.125rem;line-height:1.75rem}}.ax-popup ax-footer{box-shadow:0 2px 10px #0000004d;display:flex;align-items:center;justify-content:space-between;border-top-width:1px;border-color:rgba(var(--ax-sys-border-color));padding:.75rem}.ax-popup:focus{outline:2px solid transparent;outline-offset:2px}.ax-popup:focus-visible{border-color:rgba(var(--ax-sys-color-primary-500))}.ax-popup .ax-popup-main-container{display:flex;flex:1 1 0%;flex-direction:column;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{flex:1 1 0%;overflow:auto;background-color:rgba(var(--ax-comp-popup-body-bg-color, var(--ax-sys-color-surface-lowest)))}.ax-popup .ax-popup-main-container .ax-popup-footer-container{background-color:rgba(var(--ax-comp-popup-footer-bg-color, var(--ax-sys-color-surface-lowest)))}.ax-popup.ax-popup-full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh));border-radius:0!important}.ax-popup.ax-fit{width:fit-content!important}.ax-popup.ax-fit .ax-popup-body-container{max-height:100vh}.ax-popup.ax-fit .ax-popup-body-container>ng-component>div{width:fit-content!important}@media (min-width: 320px) and (max-width: 640px){.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.ax-popup.ax-popup-lg{width:93vw!important;height:fit-content;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}.ax-popup.ax-popup-sm .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-md .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-lg .ax-popup-body-container>ng-component>div{width:100%}}@media (min-width: 768px){.ax-popup.ax-popup-sm{width:55vw!important}.ax-popup.ax-popup-md{width:65vw!important}.ax-popup.ax-popup-lg{width:75vw!important}}@media (min-width: 1280px){.ax-popup.ax-popup-sm{width:30vw!important}.ax-popup.ax-popup-md{width:50vw!important}.ax-popup.ax-popup-lg{width:85vw!important}}@media (min-width: 1536px){.ax-popup.ax-popup-sm{width:25vw!important}.ax-popup.ax-popup-md{width:40vw!important}.ax-popup.ax-popup-lg{width:65vw!important}}\n"], dependencies: [{ kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i7.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXClosbaleComponent, useExisting: AXPopupComponent }], standalone: false, template: "<div class=\"ax-popup-wrapper \" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\n  <div class=\"ax-popup  ax-popup-{{ data.size }}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!data.draggable\">\n    <div cdkDragHandle class=\"ax-popup-header-container\">\n      @if(data.header){\n      <div class=\"ax-popup-header\">\n        <span class=\"ax-popup-title\">{{ data.title | translate | async }}</span>\n        @if(data.closeButton){\n        <ax-close-button tabindex=\"1\"></ax-close-button>\n        }\n      </div>\n      }\n    </div>\n    <div class=\"ax-popup-main-container ax-loading-container\">\n      <div class=\"ax-popup-body-container\">\n        <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\n      </div>\n      <div class=\"ax-popup-footer-container\"></div>\n    </div>\n  </div>\n</div>", styles: [".ax-popup{max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));margin-left:auto;margin-right:auto;display:flex;width:auto;flex-direction:column;overflow:hidden;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface));padding:0;--ax-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);outline:2px solid transparent;outline-offset:2px;color:rgba(var(--ax-color-text-default))}.ax-popup .ax-popup-header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.75rem}.ax-popup .ax-popup-header .ax-popup-title{font-size:1rem;line-height:1;font-weight:500}@media (min-width: 768px){.ax-popup .ax-popup-header .ax-popup-title{font-size:1.125rem;line-height:1.75rem}}.ax-popup ax-footer{box-shadow:0 2px 10px #0000004d;display:flex;align-items:center;justify-content:space-between;border-top-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.75rem}.ax-popup:focus{outline:2px solid transparent;outline-offset:2px}.ax-popup:focus-visible{border-color:rgba(var(--ax-color-primary-500))}.ax-popup .ax-popup-main-container{display:flex;flex:1 1 0%;flex-direction:column;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{flex:1 1 0%;overflow:auto}.ax-popup.ax-popup-full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh));border-radius:0!important}.ax-popup.ax-fit{width:fit-content!important}.ax-popup.ax-fit .ax-popup-body-container{max-height:100vh}.ax-popup.ax-fit .ax-popup-body-container>ng-component>div{width:fit-content!important}@media (min-width: 320px) and (max-width: 640px){.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.ax-popup.ax-popup-lg{width:93vw!important;height:fit-content;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}.ax-popup.ax-popup-sm .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-md .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-lg .ax-popup-body-container>ng-component>div{width:100%}}@media (min-width: 768px){.ax-popup.ax-popup-sm{width:55vw!important}.ax-popup.ax-popup-md{width:65vw!important}.ax-popup.ax-popup-lg{width:75vw!important}}@media (min-width: 1280px){.ax-popup.ax-popup-sm{width:30vw!important}.ax-popup.ax-popup-md{width:50vw!important}.ax-popup.ax-popup-lg{width:85vw!important}}@media (min-width: 1536px){.ax-popup.ax-popup-sm{width:25vw!important}.ax-popup.ax-popup-md{width:40vw!important}.ax-popup.ax-popup-lg{width:65vw!important}}\n"] }]
+            args: [{ selector: 'ax-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXClosbaleComponent, useExisting: AXPopupComponent }], standalone: false, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\n  <div class=\"ax-popup ax-popup-{{ data.size }}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!data.draggable\">\n    <div cdkDragHandle class=\"ax-popup-header-container\">\n      @if (data.header) {\n        <div class=\"ax-popup-header\">\n          <span class=\"ax-popup-title\">{{ data.title | translate | async }}</span>\n          @if (data.closeButton) {\n            <ax-close-button tabindex=\"1\"></ax-close-button>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"ax-popup-main-container ax-loading-container\">\n      <div class=\"ax-popup-body-container\">\n        <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\n      </div>\n      <div class=\"ax-popup-footer-container\"></div>\n    </div>\n  </div>\n</div>\n", styles: [".ax-popup{max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));margin-left:auto;margin-right:auto;display:flex;width:auto;flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-border-color));background-color:rgba(var(--ax-comp-popup-bg-color, var(--ax-sys-color-surface-lowest)));padding:0;--ax-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);outline:2px solid transparent;outline-offset:2px;color:rgba(var(--ax-sys-body-text-color))}.ax-popup .ax-popup-header-container{background-color:rgba(var(--ax-comp-popup-header-bg-color, var(--ax-sys-color-surface-low)))}.ax-popup .ax-popup-header-container .ax-popup-header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;border-color:rgba(var(--ax-sys-border-color));padding:.75rem}.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:1rem;font-weight:500}@media (min-width: 768px){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:1.125rem;line-height:1.75rem}}.ax-popup ax-footer{box-shadow:0 2px 10px #0000004d;display:flex;align-items:center;justify-content:space-between;border-top-width:1px;border-color:rgba(var(--ax-sys-border-color));padding:.75rem}.ax-popup:focus{outline:2px solid transparent;outline-offset:2px}.ax-popup:focus-visible{border-color:rgba(var(--ax-sys-color-primary-500))}.ax-popup .ax-popup-main-container{display:flex;flex:1 1 0%;flex-direction:column;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{flex:1 1 0%;overflow:auto;background-color:rgba(var(--ax-comp-popup-body-bg-color, var(--ax-sys-color-surface-lowest)))}.ax-popup .ax-popup-main-container .ax-popup-footer-container{background-color:rgba(var(--ax-comp-popup-footer-bg-color, var(--ax-sys-color-surface-lowest)))}.ax-popup.ax-popup-full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh));border-radius:0!important}.ax-popup.ax-fit{width:fit-content!important}.ax-popup.ax-fit .ax-popup-body-container{max-height:100vh}.ax-popup.ax-fit .ax-popup-body-container>ng-component>div{width:fit-content!important}@media (min-width: 320px) and (max-width: 640px){.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.ax-popup.ax-popup-lg{width:93vw!important;height:fit-content;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}.ax-popup.ax-popup-sm .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-md .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-lg .ax-popup-body-container>ng-component>div{width:100%}}@media (min-width: 768px){.ax-popup.ax-popup-sm{width:55vw!important}.ax-popup.ax-popup-md{width:65vw!important}.ax-popup.ax-popup-lg{width:75vw!important}}@media (min-width: 1280px){.ax-popup.ax-popup-sm{width:30vw!important}.ax-popup.ax-popup-md{width:50vw!important}.ax-popup.ax-popup-lg{width:85vw!important}}@media (min-width: 1536px){.ax-popup.ax-popup-sm{width:25vw!important}.ax-popup.ax-popup-md{width:40vw!important}.ax-popup.ax-popup-lg{width:65vw!important}}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: i1.AXLoadingService }, { type: i2.AXPlatform }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DIALOG_DATA]