npm - @acorex/components - Versions diffs - 7.1.31 → 7.1.32 - Mend

@acorex/components 7.1.31 → 7.1.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/esm2022/loading/src/loading.component.mjs +10 -22
package/esm2022/loading/src/loading.service.mjs +13 -19
package/esm2022/menu/src/menu.component.mjs +8 -22
package/esm2022/picker/src/picker-column.component.mjs +2 -2
package/esm2022/picker/src/picker.component.mjs +2 -2
package/esm2022/popover/src/popover.component.mjs +1 -2
package/esm2022/select-box/src/selectbox.component.mjs +20 -44
package/esm2022/switch/src/switch.component.mjs +1 -1
package/fesm2022/acorex-components-loading.mjs +19 -37
package/fesm2022/acorex-components-loading.mjs.map +1 -1
package/fesm2022/acorex-components-menu.mjs +7 -22
package/fesm2022/acorex-components-menu.mjs.map +1 -1
package/fesm2022/acorex-components-picker.mjs +4 -4
package/fesm2022/acorex-components-picker.mjs.map +1 -1
package/fesm2022/acorex-components-popover.mjs +0 -1
package/fesm2022/acorex-components-popover.mjs.map +1 -1
package/fesm2022/acorex-components-select-box.mjs +17 -41
package/fesm2022/acorex-components-select-box.mjs.map +1 -1
package/fesm2022/acorex-components-switch.mjs +1 -1
package/fesm2022/acorex-components-switch.mjs.map +1 -1
package/loading/src/loading.component.d.ts +2 -2
package/loading/src/loading.service.d.ts +5 -1
package/menu/src/menu.component.d.ts +3 -0
package/package.json +39 -39
package/select-box/src/selectbox.component.d.ts +3 -0

package/fesm2022/acorex-components-picker.mjs CHANGED Viewed

@@ -16,11 +16,11 @@ import { AXPopoverModule } from '@acorex/components/popover';
 class AXPickerColumnComponent {
     divider = false;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: AXPickerColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: AXPickerColumnComponent, selector: "ax-picker-column", inputs: { divider: "divider" }, ngImport: i0, template: "<div class=\"picker-container\" [ngClass]=\"{'picker-divider':divider}\">\n    <div class=\"picker-scrollbar picker-time-spinner-wrapper\">\n        <div class=\"picker-scrollbar-wrap\">\n            <div class=\"picker-time-spinner-list\">\n                <div class=\"picker-time-spinner-item\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".picker-container{width:100%;white-space:nowrap}.picker-container.picker-divider{border-right:solid 1px rgba(var(--ax-color-border-default))}.picker-container .picker-scrollbar{position:relative;height:100%}.picker-container .picker-scrollbar.picker-time-spinner-wrapper{max-height:200px;display:inline-block;vertical-align:top;width:100%;position:relative}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap{max-height:inherit;overflow-y:hidden;height:100%;scroll-snap-type:y mandatory;overscroll-behavior-y:contain}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap::-webkit-scrollbar{width:2px}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap:hover{overflow:scroll;height:100vh;overscroll-behavior:inherit;z-index:-1}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list{scroll-snap-type:y mandatory;overscroll-behavior-y:contain;list-style:none;text-align:center}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list:before{content:\"\";display:block;width:100%}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list .picker-time-spinner-item{scroll-snap-align:center;line-height:40px;cursor:pointer}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list .picker-time-spinner-item.ax-state-active{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore));border-radius:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: AXPickerColumnComponent, selector: "ax-picker-column", inputs: { divider: "divider" }, ngImport: i0, template: "<div class=\"picker-container\" [ngClass]=\"{'picker-divider':divider}\">\n    <div class=\"picker-scrollbar picker-time-spinner-wrapper\">\n        <div class=\"picker-scrollbar-wrap\">\n            <div class=\"picker-time-spinner-list\">\n                <div class=\"picker-time-spinner-item\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".picker-container{width:100%;white-space:nowrap}.picker-container.picker-divider{border-right:solid 1px rgba(var(--ax-color-border-default))}.picker-container .picker-scrollbar{position:relative;height:100%}.picker-container .picker-scrollbar.picker-time-spinner-wrapper{max-height:200px;display:inline-block;vertical-align:top;width:100%;position:relative}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap{max-height:inherit;overflow-y:hidden;height:100%;scroll-snap-type:y mandatory;overscroll-behavior-y:contain}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap.picker-time-spinner-wrapper{max-height:200px;display:inline-block;vertical-align:top;width:100%;position:relative}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap.picker-time-spinner-wrapper .picker-scrollbar-wrap{max-height:inherit;overflow-y:hidden;height:100%;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-gutter:stable both-edges}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap.picker-time-spinner-wrapper .picker-scrollbar-wrap::-webkit-scrollbar{width:2px}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap.picker-time-spinner-wrapper .picker-scrollbar-wrap:hover{scrollbar-gutter:stable both-edges;overflow:scroll}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list{scroll-snap-type:y mandatory;overscroll-behavior-y:contain;list-style:none;text-align:center}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list:before{content:\"\";display:block;width:100%}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list .picker-time-spinner-item{scroll-snap-align:initial;line-height:40px;cursor:pointer}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list .picker-time-spinner-item.ax-state-active{background-color:rgba(var(--ax-color-primary));color:rgba(var(--ax-color-primary-fore));border-radius:8px}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap:hover{overflow:scroll;height:100vh;overscroll-behavior:inherit;z-index:-1}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list{scroll-snap-type:y mandatory;overscroll-behavior-y:contain;list-style:none;text-align:center}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list:before{content:\"\";display:block;width:100%}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list .picker-time-spinner-item{scroll-snap-align:center;line-height:40px;cursor:pointer}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list .picker-time-spinner-item.ax-state-active{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore));border-radius:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: AXPickerColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-picker-column', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"picker-container\" [ngClass]=\"{'picker-divider':divider}\">\n    <div class=\"picker-scrollbar picker-time-spinner-wrapper\">\n        <div class=\"picker-scrollbar-wrap\">\n            <div class=\"picker-time-spinner-list\">\n                <div class=\"picker-time-spinner-item\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".picker-container{width:100%;white-space:nowrap}.picker-container.picker-divider{border-right:solid 1px rgba(var(--ax-color-border-default))}.picker-container .picker-scrollbar{position:relative;height:100%}.picker-container .picker-scrollbar.picker-time-spinner-wrapper{max-height:200px;display:inline-block;vertical-align:top;width:100%;position:relative}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap{max-height:inherit;overflow-y:hidden;height:100%;scroll-snap-type:y mandatory;overscroll-behavior-y:contain}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap::-webkit-scrollbar{width:2px}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap:hover{overflow:scroll;height:100vh;overscroll-behavior:inherit;z-index:-1}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list{scroll-snap-type:y mandatory;overscroll-behavior-y:contain;list-style:none;text-align:center}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list:before{content:\"\";display:block;width:100%}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list .picker-time-spinner-item{scroll-snap-align:center;line-height:40px;cursor:pointer}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list .picker-time-spinner-item.ax-state-active{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore));border-radius:8px}\n"] }]
+            args: [{ selector: 'ax-picker-column', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"picker-container\" [ngClass]=\"{'picker-divider':divider}\">\n    <div class=\"picker-scrollbar picker-time-spinner-wrapper\">\n        <div class=\"picker-scrollbar-wrap\">\n            <div class=\"picker-time-spinner-list\">\n                <div class=\"picker-time-spinner-item\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".picker-container{width:100%;white-space:nowrap}.picker-container.picker-divider{border-right:solid 1px rgba(var(--ax-color-border-default))}.picker-container .picker-scrollbar{position:relative;height:100%}.picker-container .picker-scrollbar.picker-time-spinner-wrapper{max-height:200px;display:inline-block;vertical-align:top;width:100%;position:relative}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap{max-height:inherit;overflow-y:hidden;height:100%;scroll-snap-type:y mandatory;overscroll-behavior-y:contain}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap.picker-time-spinner-wrapper{max-height:200px;display:inline-block;vertical-align:top;width:100%;position:relative}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap.picker-time-spinner-wrapper .picker-scrollbar-wrap{max-height:inherit;overflow-y:hidden;height:100%;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-gutter:stable both-edges}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap.picker-time-spinner-wrapper .picker-scrollbar-wrap::-webkit-scrollbar{width:2px}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap.picker-time-spinner-wrapper .picker-scrollbar-wrap:hover{scrollbar-gutter:stable both-edges;overflow:scroll}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list{scroll-snap-type:y mandatory;overscroll-behavior-y:contain;list-style:none;text-align:center}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list:before{content:\"\";display:block;width:100%}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list .picker-time-spinner-item{scroll-snap-align:initial;line-height:40px;cursor:pointer}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list .picker-time-spinner-item.ax-state-active{background-color:rgba(var(--ax-color-primary));color:rgba(var(--ax-color-primary-fore));border-radius:8px}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap:hover{overflow:scroll;height:100vh;overscroll-behavior:inherit;z-index:-1}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list{scroll-snap-type:y mandatory;overscroll-behavior-y:contain;list-style:none;text-align:center}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list:before{content:\"\";display:block;width:100%}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list .picker-time-spinner-item{scroll-snap-align:center;line-height:40px;cursor:pointer}.picker-container .picker-scrollbar.picker-time-spinner-wrapper .picker-scrollbar-wrap .picker-time-spinner-list .picker-time-spinner-item.ax-state-active{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore));border-radius:8px}\n"] }]
         }], propDecorators: { divider: [{
                 type: Input
             }] } });
@@ -32,11 +32,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImpor
  */
 class AXPickerComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: AXPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: AXPickerComponent, selector: "ax-picker", ngImport: i0, template: "<div class=\"picker-container\">\n    <ng-content select=\"ax-picker-column\"></ng-content>\n</div>", styles: [".picker-container{display:flex;justify-content:space-between}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: AXPickerComponent, selector: "ax-picker", ngImport: i0, template: "<div class=\"picker-container\">\n    <ng-content select=\"ax-picker-column\"></ng-content>\n</div>", styles: [".picker-container{display:flex;justify-content:space-between;align-items:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: AXPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"picker-container\">\n    <ng-content select=\"ax-picker-column\"></ng-content>\n</div>", styles: [".picker-container{display:flex;justify-content:space-between}\n"] }]
+            args: [{ selector: 'ax-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"picker-container\">\n    <ng-content select=\"ax-picker-column\"></ng-content>\n</div>", styles: [".picker-container{display:flex;justify-content:space-between;align-items:center}\n"] }]
         }] });
 const COMPONENT = [AXPickerColumnComponent, AXPickerComponent];

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

	@@ -1 +1 @@
1	- {"version":3,"file":"acorex-components-picker.mjs","sources":["../../../../projects/acorex/components/picker/src/picker-column.component.ts","../../../../projects/acorex/components/picker/src/picker-column.component.html","../../../../projects/acorex/components/picker/src/picker.component.ts","../../../../projects/acorex/components/picker/src/picker.component.html","../../../../projects/acorex/components/picker/src/picker.module.ts","../../../../projects/acorex/components/picker/acorex-components-picker.ts"],"sourcesContent":["\nimport {\n Component,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n Input,\n} from '@angular/core';\n\n/*\n The Button is a component which detects user interaction and triggers a corresponding event\n \n @category Components\n /\n@Component({\n selector: 'ax-picker-column',\n templateUrl: './picker-column.component.html',\n styleUrls: ['./picker-column.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AXPickerColumnComponent {\n\n @Input()\n divider: boolean = false\n\n}\n","<div class=\"picker-container\" [ngClass]=\"{'picker-divider':divider}\">\n <div class=\"picker-scrollbar picker-time-spinner-wrapper\">\n <div class=\"picker-scrollbar-wrap\">\n <div class=\"picker-time-spinner-list\">\n <div class=\"picker-time-spinner-item\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n </div>\n</div>","\nimport {\n Component,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n Input,\n} from '@angular/core';\n\n/\n The Button is a component which detects user interaction and triggers a corresponding event\n \n @category Components\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})\nexport class AXPickerComponent {\n\n\n}\n","<div class=\"picker-container\">\n <ng-content select=\"ax-picker-column\"></ng-content>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AXLoadingModule } from '@acorex/components/loading';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { AXPopoverModule } from '@acorex/components/popover';\nimport { AXPickerColumnComponent } from './picker-column.component';\nimport { AXPickerComponent } from './picker.component';\n\nconst COMPONENT = [AXPickerColumnComponent, AXPickerComponent];\nconst MODULES = [\n AXDecoratorModule,\n AXLoadingModule,\n AXTranslationModule,\n OverlayModule,\n AXPopoverModule\n];\n\n@NgModule({\n declarations: [...COMPONENT],\n imports: [CommonModule, ...MODULES],\n exports: [...COMPONENT],\n providers: [],\n})\nexport class AXPickerModule { }\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;AAQA;;;;AAIG;AACH,MAOa,uBAAuB,CAAA;IAGlC,OAAO,GAAY,KAAK,CAAA;uGAHb,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,wFCpBpC,2aAUM,EAAA,MAAA,EAAA,CAAA,~~0nDAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDUO,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAPnC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,mBAGX,uBAAuB,CAAC,MAAM,EAChC,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,2aAAA,EAAA,MAAA,EAAA,CAAA,~~0nDAAA~~,CAAA,EAAA,CAAA;8BAKrC,OAAO,EAAA,CAAA;sBADN,KAAK;;;AEdR;;;;AAIG;AACH,MAOa,iBAAiB,CAAA;uGAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,iDCpB9B,qGAEM,EAAA,MAAA,EAAA,CAAA,~~iEAAA~~,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDkBO,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAP7B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,mBAGJ,uBAAuB,CAAC,MAAM,EAChC,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,qGAAA,EAAA,MAAA,EAAA,CAAA,~~iEAAA~~,CAAA,EAAA,CAAA;;;AERzC,MAAM,SAAS,GAAG,CAAC,uBAAuB,EAAE,iBAAiB,CAAC,CAAC;AAC/D,MAAM,OAAO,GAAG;IACd,iBAAiB;IACjB,eAAe;IACf,mBAAmB;IACnB,aAAa;IACb,eAAe;CAChB,CAAC;AAEF,MAMa,cAAc,CAAA;uGAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,iBAfR,uBAAuB,EAAE,iBAAiB,CAWjD,EAAA,OAAA,EAAA,CAAA,YAAY,EATtB,iBAAiB;YACjB,eAAe;YACf,mBAAmB;YACnB,aAAa;YACb,eAAe,CAAA,EAAA,OAAA,EAAA,CANE,uBAAuB,EAAE,iBAAiB,CAAA,EAAA,CAAA,CAAA;wGAehD,cAAc,EAAA,OAAA,EAAA,CAJf,YAAY,EAAK,OAAO,CAAA,EAAA,CAAA,CAAA;;2FAIvB,cAAc,EAAA,UAAA,EAAA,CAAA;kBAN1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE,CAAC,GAAG,SAAS,CAAC;AAC5B,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,GAAG,OAAO,CAAC;AACnC,oBAAA,OAAO,EAAE,CAAC,GAAG,SAAS,CAAC;AACvB,oBAAA,SAAS,EAAE,EAAE;AACd,iBAAA,CAAA;;;ACxBD;;AAEG;;;;"}
1	+ {"version":3,"file":"acorex-components-picker.mjs","sources":["../../../../projects/acorex/components/picker/src/picker-column.component.ts","../../../../projects/acorex/components/picker/src/picker-column.component.html","../../../../projects/acorex/components/picker/src/picker.component.ts","../../../../projects/acorex/components/picker/src/picker.component.html","../../../../projects/acorex/components/picker/src/picker.module.ts","../../../../projects/acorex/components/picker/acorex-components-picker.ts"],"sourcesContent":["\nimport {\n Component,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n Input,\n} from '@angular/core';\n\n/*\n The Button is a component which detects user interaction and triggers a corresponding event\n \n @category Components\n /\n@Component({\n selector: 'ax-picker-column',\n templateUrl: './picker-column.component.html',\n styleUrls: ['./picker-column.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AXPickerColumnComponent {\n\n @Input()\n divider: boolean = false\n\n}\n","<div class=\"picker-container\" [ngClass]=\"{'picker-divider':divider}\">\n <div class=\"picker-scrollbar picker-time-spinner-wrapper\">\n <div class=\"picker-scrollbar-wrap\">\n <div class=\"picker-time-spinner-list\">\n <div class=\"picker-time-spinner-item\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n </div>\n</div>","\nimport {\n Component,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n Input,\n} from '@angular/core';\n\n/\n The Button is a component which detects user interaction and triggers a corresponding event\n \n @category Components\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})\nexport class AXPickerComponent {\n\n\n}\n","<div class=\"picker-container\">\n <ng-content select=\"ax-picker-column\"></ng-content>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AXLoadingModule } from '@acorex/components/loading';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { AXPopoverModule } from '@acorex/components/popover';\nimport { AXPickerColumnComponent } from './picker-column.component';\nimport { AXPickerComponent } from './picker.component';\n\nconst COMPONENT = [AXPickerColumnComponent, AXPickerComponent];\nconst MODULES = [\n AXDecoratorModule,\n AXLoadingModule,\n AXTranslationModule,\n OverlayModule,\n AXPopoverModule\n];\n\n@NgModule({\n declarations: [...COMPONENT],\n imports: [CommonModule, ...MODULES],\n exports: [...COMPONENT],\n providers: [],\n})\nexport class AXPickerModule { }\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;AAQA;;;;AAIG;AACH,MAOa,uBAAuB,CAAA;IAGlC,OAAO,GAAY,KAAK,CAAA;uGAHb,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,wFCpBpC,2aAUM,EAAA,MAAA,EAAA,CAAA,o1GAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDUO,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAPnC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,mBAGX,uBAAuB,CAAC,MAAM,EAChC,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,2aAAA,EAAA,MAAA,EAAA,CAAA,o1GAAA,CAAA,EAAA,CAAA;8BAKrC,OAAO,EAAA,CAAA;sBADN,KAAK;;;AEdR;;;;AAIG;AACH,MAOa,iBAAiB,CAAA;uGAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,iDCpB9B,qGAEM,EAAA,MAAA,EAAA,CAAA,oFAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDkBO,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAP7B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,mBAGJ,uBAAuB,CAAC,MAAM,EAChC,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,qGAAA,EAAA,MAAA,EAAA,CAAA,oFAAA,CAAA,EAAA,CAAA;;;AERzC,MAAM,SAAS,GAAG,CAAC,uBAAuB,EAAE,iBAAiB,CAAC,CAAC;AAC/D,MAAM,OAAO,GAAG;IACd,iBAAiB;IACjB,eAAe;IACf,mBAAmB;IACnB,aAAa;IACb,eAAe;CAChB,CAAC;AAEF,MAMa,cAAc,CAAA;uGAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,iBAfR,uBAAuB,EAAE,iBAAiB,CAWjD,EAAA,OAAA,EAAA,CAAA,YAAY,EATtB,iBAAiB;YACjB,eAAe;YACf,mBAAmB;YACnB,aAAa;YACb,eAAe,CAAA,EAAA,OAAA,EAAA,CANE,uBAAuB,EAAE,iBAAiB,CAAA,EAAA,CAAA,CAAA;wGAehD,cAAc,EAAA,OAAA,EAAA,CAJf,YAAY,EAAK,OAAO,CAAA,EAAA,CAAA,CAAA;;2FAIvB,cAAc,EAAA,UAAA,EAAA,CAAA;kBAN1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE,CAAC,GAAG,SAAS,CAAC;AAC5B,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,GAAG,OAAO,CAAC;AACnC,oBAAA,OAAO,EAAE,CAAC,GAAG,SAAS,CAAC;AACvB,oBAAA,SAAS,EAAE,EAAE;AACd,iBAAA,CAAA;;;ACxBD;;AAEG;;;;"}

package/fesm2022/acorex-components-popover.mjs CHANGED Viewed

@@ -85,7 +85,6 @@ class AXPopoverComponent extends MXInteractiveComponent {
         return this._target;
     }
     set target(v) {
-        debugger;
         if (v instanceof HTMLElement)
             this._target = v;
         else if (v instanceof ElementRef)

package/fesm2022/acorex-components-popover.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"acorex-components-popover.mjs","sources":["../../../../projects/acorex/components/popover/src/dropdown-component.class.ts","../../../../projects/acorex/components/popover/src/popover.component.ts","../../../../projects/acorex/components/popover/src/popover.component.html","../../../../projects/acorex/components/popover/src/popover.module.ts","../../../../projects/acorex/components/popover/acorex-components-popover.ts"],"sourcesContent":["import { AXConnectedPosition, AXEvent, MXInteractiveComponent } from '@acorex/components/common';\nimport { EventEmitter, Injectable } from '@angular/core';\nimport { AXPopoverComponent } from './popover.component';\n\n@Injectable()\nexport abstract class MXDropDownComponent extends MXInteractiveComponent {\n onOpened: EventEmitter<AXEvent> = new EventEmitter<AXEvent>();\n onClosed: EventEmitter<AXEvent> = new EventEmitter<AXEvent>();\n\n protected abstract popover: AXPopoverComponent;\n\n protected popOverPositions: AXConnectedPosition[] = [];\n\n protected initPopOverPositions() {\n const offset = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', ''));\n const list: AXConnectedPosition[] = [\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n offsetY: offset,\n },\n {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom',\n offsetY: -offset,\n },\n {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top',\n offsetY: offset,\n },\n {\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom',\n offsetY: -offset,\n },\n ];\n this.popOverPositions.push(...list);\n }\n\n toggle() {\n if (this.disabled !== true) {\n this.popover.toggle();\n }\n }\n\n close() {\n if (!this.isOpen \|\| this.disabled) {\n return;\n }\n this.popover.close();\n (this as any)?.focus();\n }\n\n open() {\n if (this.isOpen \|\| this.disabled) {\n return;\n }\n this.popover.open();\n this.popover.focus();\n }\n\n get isOpen(): boolean {\n return this.popover?.isOpen;\n }\n}\n","import { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, Input, ViewChild, TemplateRef, Output, EventEmitter, inject } from '@angular/core';\nimport { some, includes } from 'lodash-es';\nimport { Subscription, fromEvent, throttleTime } from 'rxjs';\nimport { AXConnectedPosition, AXEvent, MXBaseComponent, MXInteractiveComponent } from '@acorex/components/common';\nimport { AXPlatform } from '@acorex/core/platform';\nimport { AXPoint, AXDrawingUtil } from '@acorex/core/utils';\n\n@Component({\n selector: 'ax-popover',\n templateUrl: './popover.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AXPopoverComponent extends MXInteractiveComponent {\n private _platform: AXPlatform = inject(AXPlatform);\n private _overlay: Overlay = inject(Overlay);\n\n //\n private _target: HTMLElement;\n @Input()\n public get target(): HTMLElement \| ElementRef \| MXBaseComponent {\n return this._target;\n }\n public set target(v: HTMLElement \| ElementRef \| MXBaseComponent) {\n debugger;\n if (v instanceof HTMLElement) this._target = v;\n else if (v instanceof ElementRef) this._target = v.nativeElement;\n else if (typeof v.getHostElement == 'function') this._target = v.getHostElement();\n }\n\n offset = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', ''));\n\n @Input()\n position: AXConnectedPosition \| AXConnectedPosition[] = [\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n offsetY: this.offset,\n },\n {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom',\n offsetY: -this.offset,\n },\n {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top',\n offsetY: this.offset,\n },\n {\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom',\n offsetY: -this.offset,\n },\n ];\n //\n @ViewChild('baseTemplate')\n _baseTemplate: TemplateRef<any>;\n _overlayRef: OverlayRef;\n _templatePortal: TemplatePortal;\n\n _subs: Subscription[] = [];\n //\n @Input()\n openTrigger: 'manual' \| 'click' \| 'mouseover' \| 'toggle' = 'toggle';\n //\n @Input()\n closeTrigger: 'manual' \| 'clickout' \| 'mouseout' = 'clickout';\n //\n @Input()\n hasBackdrop: boolean = false;\n\n @Input()\n backdropClass: string;\n\n @Input()\n adaptivityEnabled: boolean = false;\n //\n private _mousePos: AXPoint = { x: 0, y: 0 };\n private _isScrollAttached: boolean = false;\n private _lastActiveElement: HTMLElement;\n //\n @Output()\n onOpened: EventEmitter<AXEvent> = new EventEmitter<AXEvent>();\n @Output()\n onClosed: EventEmitter<AXEvent> = new EventEmitter<AXEvent>();\n\n _emitOnOpenedEvent() {\n this.onOpened.emit({\n component: this,\n htmlElement: this.getHostElement(),\n });\n }\n\n _emitOnClosedEvent() {\n this.onClosed.emit({\n component: this,\n htmlElement: this.getHostElement(),\n });\n }\n //\n ngAfterViewInit() {\n if (this._target) {\n if (this.openTrigger === 'mouseover') {\n const mouseEnter$ = fromEvent<MouseEvent>(this._target, 'mouseover');\n this._addSub(\n mouseEnter$.subscribe(e => {\n const point = { x: e.clientX, y: e.clientY };\n if (AXDrawingUtil.isInElementBound(point, this._target)) this.open();\n })\n );\n }\n if (this.closeTrigger === 'mouseout') {\n const mouseMove$ = fromEvent<MouseEvent>(document, 'mousemove');\n this._addSub(\n mouseMove$.pipe(throttleTime(50)).subscribe(e => {\n this._mousePos.x = e.clientX;\n this._mousePos.y = e.clientY;\n if (this.isOpen) {\n setTimeout(() => {\n if (some([this._target, this._overlayRef.overlayElement], el => includes(document.elementsFromPoint(this._mousePos.x, this._mousePos.y), el))) this.close();\n }, 100);\n }\n })\n );\n }\n //\n if (this.openTrigger === 'click' \|\| this.openTrigger === 'toggle') {\n const click$ = fromEvent<MouseEvent>(this._target, 'click');\n this._addSub(\n click$.subscribe(e => {\n this.openTrigger == 'toggle' ? this.toggle() : this.open();\n })\n );\n }\n }\n }\n //\n ngOnDestroy(): void {\n this._overlayRef?.detach();\n this._overlayRef?.dispose();\n this._subs.forEach(s => {\n s?.unsubscribe();\n });\n }\n\n toggle() {\n this.isOpen ? this.close() : this.open();\n }\n\n //\n close() {\n if (!this.isOpen) {\n return;\n }\n this._overlayRef?.detach();\n this._emitOnClosedEvent();\n //\n if (this._lastActiveElement?.focus) {\n this._lastActiveElement.focus();\n }\n }\n\n dispose() {\n this.close();\n this._overlayRef?.dispose();\n this._overlayRef = null as any;\n }\n\n //\n open() {\n if (this.isOpen) {\n return;\n }\n this._lastActiveElement = document.activeElement as HTMLElement;\n this._ensureOverlayCreated();\n this._overlayRef?.attach(this._templatePortal);\n this._emitOnOpenedEvent();\n }\n\n private _ensureOverlayCreated() {\n const targetRef = this._target;\n if (!targetRef) return;\n\n if (!this._overlayRef) {\n if (this._platform.is('SM') && this.adaptivityEnabled) {\n this._openAsActionsheet();\n } else {\n this._openAsPopover(targetRef);\n }\n\n if (this.closeTrigger == 'clickout') {\n this._addSub(\n this._overlayRef._outsidePointerEvents.subscribe(c => {\n const target = c.target as HTMLElement;\n const comElem = targetRef;\n if (!comElem.contains(target)) {\n this.close();\n }\n })\n );\n }\n this._addSub(\n this._overlayRef.attachments().subscribe(() => {\n if (!this._isScrollAttached) {\n this._addSub(\n this._platform.scroll.subscribe(c => {\n try {\n if (!(c.nativeEvent.target as HTMLElement)?.closest('.ax-overlay-pane')) this.close();\n } catch (error) {}\n })\n );\n this._isScrollAttached = true;\n }\n })\n );\n }\n if (!this._templatePortal) {\n this._templatePortal = new TemplatePortal(this._baseTemplate, this.getViewContainer());\n }\n }\n\n private _openAsPopover(targetRef: HTMLElement) {\n this._overlayRef = this._overlay.create({\n positionStrategy: this._overlay\n .position()\n .flexibleConnectedTo(targetRef)\n .withPositions(Array.isArray(this.position) ? this.position : [this.position])\n .withPush(false),\n scrollStrategy: this._overlay.scrollStrategies.reposition(),\n disposeOnNavigation: true,\n panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],\n maxHeight: 'unset',\n hasBackdrop: this.hasBackdrop,\n backdropClass: [this.backdropClass \|\| 'cdk-overlay-transparent-backdrop'],\n });\n }\n\n private _openAsActionsheet() {\n this._overlayRef = this._overlay.create({\n positionStrategy: this._overlay\n .position()\n .flexibleConnectedTo(document.body)\n .withPositions([\n {\n originX: 'center',\n originY: 'bottom',\n overlayX: 'center',\n overlayY: 'bottom',\n },\n ]),\n disposeOnNavigation: true,\n panelClass: ['ax-animate-slideInUp', 'ax-animate-faster'],\n hasBackdrop: true,\n width: '100%',\n });\n }\n\n get isOpen(): boolean {\n return this._overlayRef ? this._overlayRef.hasAttached() : false;\n }\n\n private _addSub(sub: Subscription) {\n this._subs.push(sub);\n }\n\n updatePosition(): void {\n this._overlayRef?.updatePosition();\n this.focus();\n }\n}\n","<ng-template #baseTemplate>\n <ng-content></ng-content>\n</ng-template>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AXPopoverComponent } from './popover.component';\n\n@NgModule({\n declarations: [AXPopoverComponent],\n imports: [CommonModule],\n exports: [AXPopoverComponent],\n providers: [],\n})\nexport class AXPopoverModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"acorex-components-popover.mjs","sources":["../../../../projects/acorex/components/popover/src/dropdown-component.class.ts","../../../../projects/acorex/components/popover/src/popover.component.ts","../../../../projects/acorex/components/popover/src/popover.component.html","../../../../projects/acorex/components/popover/src/popover.module.ts","../../../../projects/acorex/components/popover/acorex-components-popover.ts"],"sourcesContent":["import { AXConnectedPosition, AXEvent, MXInteractiveComponent } from '@acorex/components/common';\nimport { EventEmitter, Injectable } from '@angular/core';\nimport { AXPopoverComponent } from './popover.component';\n\n@Injectable()\nexport abstract class MXDropDownComponent extends MXInteractiveComponent {\n onOpened: EventEmitter<AXEvent> = new EventEmitter<AXEvent>();\n onClosed: EventEmitter<AXEvent> = new EventEmitter<AXEvent>();\n\n protected abstract popover: AXPopoverComponent;\n\n protected popOverPositions: AXConnectedPosition[] = [];\n\n protected initPopOverPositions() {\n const offset = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', ''));\n const list: AXConnectedPosition[] = [\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n offsetY: offset,\n },\n {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom',\n offsetY: -offset,\n },\n {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top',\n offsetY: offset,\n },\n {\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom',\n offsetY: -offset,\n },\n ];\n this.popOverPositions.push(...list);\n }\n\n toggle() {\n if (this.disabled !== true) {\n this.popover.toggle();\n }\n }\n\n close() {\n if (!this.isOpen \|\| this.disabled) {\n return;\n }\n this.popover.close();\n (this as any)?.focus();\n }\n\n open() {\n if (this.isOpen \|\| this.disabled) {\n return;\n }\n this.popover.open();\n this.popover.focus();\n }\n\n get isOpen(): boolean {\n return this.popover?.isOpen;\n }\n}\n","import { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport { Component, ViewEncapsulation, ChangeDetectionStrategy, ElementRef, Input, ViewChild, TemplateRef, Output, EventEmitter, inject } from '@angular/core';\nimport { some, includes } from 'lodash-es';\nimport { Subscription, fromEvent, throttleTime } from 'rxjs';\nimport { AXConnectedPosition, AXEvent, MXBaseComponent, MXInteractiveComponent } from '@acorex/components/common';\nimport { AXPlatform } from '@acorex/core/platform';\nimport { AXPoint, AXDrawingUtil } from '@acorex/core/utils';\n\n@Component({\n selector: 'ax-popover',\n templateUrl: './popover.component.html',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AXPopoverComponent extends MXInteractiveComponent {\n private _platform: AXPlatform = inject(AXPlatform);\n private _overlay: Overlay = inject(Overlay);\n\n //\n private _target: HTMLElement;\n @Input()\n public get target(): HTMLElement \| ElementRef \| MXBaseComponent {\n return this._target;\n }\n public set target(v: HTMLElement \| ElementRef \| MXBaseComponent) {\n if (v instanceof HTMLElement) this._target = v;\n else if (v instanceof ElementRef) this._target = v.nativeElement;\n else if (typeof v.getHostElement == 'function') this._target = v.getHostElement();\n }\n\n offset = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', ''));\n\n @Input()\n position: AXConnectedPosition \| AXConnectedPosition[] = [\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n offsetY: this.offset,\n },\n {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom',\n offsetY: -this.offset,\n },\n {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top',\n offsetY: this.offset,\n },\n {\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom',\n offsetY: -this.offset,\n },\n ];\n //\n @ViewChild('baseTemplate')\n _baseTemplate: TemplateRef<any>;\n _overlayRef: OverlayRef;\n _templatePortal: TemplatePortal;\n\n _subs: Subscription[] = [];\n //\n @Input()\n openTrigger: 'manual' \| 'click' \| 'mouseover' \| 'toggle' = 'toggle';\n //\n @Input()\n closeTrigger: 'manual' \| 'clickout' \| 'mouseout' = 'clickout';\n //\n @Input()\n hasBackdrop: boolean = false;\n\n @Input()\n backdropClass: string;\n\n @Input()\n adaptivityEnabled: boolean = false;\n //\n private _mousePos: AXPoint = { x: 0, y: 0 };\n private _isScrollAttached: boolean = false;\n private _lastActiveElement: HTMLElement;\n //\n @Output()\n onOpened: EventEmitter<AXEvent> = new EventEmitter<AXEvent>();\n @Output()\n onClosed: EventEmitter<AXEvent> = new EventEmitter<AXEvent>();\n\n _emitOnOpenedEvent() {\n this.onOpened.emit({\n component: this,\n htmlElement: this.getHostElement(),\n });\n }\n\n _emitOnClosedEvent() {\n this.onClosed.emit({\n component: this,\n htmlElement: this.getHostElement(),\n });\n }\n //\n ngAfterViewInit() {\n if (this._target) {\n if (this.openTrigger === 'mouseover') {\n const mouseEnter$ = fromEvent<MouseEvent>(this._target, 'mouseover');\n this._addSub(\n mouseEnter$.subscribe(e => {\n const point = { x: e.clientX, y: e.clientY };\n if (AXDrawingUtil.isInElementBound(point, this._target)) this.open();\n })\n );\n }\n if (this.closeTrigger === 'mouseout') {\n const mouseMove$ = fromEvent<MouseEvent>(document, 'mousemove');\n this._addSub(\n mouseMove$.pipe(throttleTime(50)).subscribe(e => {\n this._mousePos.x = e.clientX;\n this._mousePos.y = e.clientY;\n if (this.isOpen) {\n setTimeout(() => {\n if (some([this._target, this._overlayRef.overlayElement], el => includes(document.elementsFromPoint(this._mousePos.x, this._mousePos.y), el))) this.close();\n }, 100);\n }\n })\n );\n }\n //\n if (this.openTrigger === 'click' \|\| this.openTrigger === 'toggle') {\n const click$ = fromEvent<MouseEvent>(this._target, 'click');\n this._addSub(\n click$.subscribe(e => {\n this.openTrigger == 'toggle' ? this.toggle() : this.open();\n })\n );\n }\n }\n }\n //\n ngOnDestroy(): void {\n this._overlayRef?.detach();\n this._overlayRef?.dispose();\n this._subs.forEach(s => {\n s?.unsubscribe();\n });\n }\n\n toggle() {\n this.isOpen ? this.close() : this.open();\n }\n\n //\n close() {\n if (!this.isOpen) {\n return;\n }\n this._overlayRef?.detach();\n this._emitOnClosedEvent();\n //\n if (this._lastActiveElement?.focus) {\n this._lastActiveElement.focus();\n }\n }\n\n dispose() {\n this.close();\n this._overlayRef?.dispose();\n this._overlayRef = null as any;\n }\n\n //\n open() {\n if (this.isOpen) {\n return;\n }\n this._lastActiveElement = document.activeElement as HTMLElement;\n this._ensureOverlayCreated();\n this._overlayRef?.attach(this._templatePortal);\n this._emitOnOpenedEvent();\n }\n\n private _ensureOverlayCreated() {\n const targetRef = this._target;\n if (!targetRef) return;\n\n if (!this._overlayRef) {\n if (this._platform.is('SM') && this.adaptivityEnabled) {\n this._openAsActionsheet();\n } else {\n this._openAsPopover(targetRef);\n }\n\n if (this.closeTrigger == 'clickout') {\n this._addSub(\n this._overlayRef._outsidePointerEvents.subscribe(c => {\n const target = c.target as HTMLElement;\n const comElem = targetRef;\n if (!comElem.contains(target)) {\n this.close();\n }\n })\n );\n }\n this._addSub(\n this._overlayRef.attachments().subscribe(() => {\n if (!this._isScrollAttached) {\n this._addSub(\n this._platform.scroll.subscribe(c => {\n try {\n if (!(c.nativeEvent.target as HTMLElement)?.closest('.ax-overlay-pane')) this.close();\n } catch (error) {}\n })\n );\n this._isScrollAttached = true;\n }\n })\n );\n }\n if (!this._templatePortal) {\n this._templatePortal = new TemplatePortal(this._baseTemplate, this.getViewContainer());\n }\n }\n\n private _openAsPopover(targetRef: HTMLElement) {\n this._overlayRef = this._overlay.create({\n positionStrategy: this._overlay\n .position()\n .flexibleConnectedTo(targetRef)\n .withPositions(Array.isArray(this.position) ? this.position : [this.position])\n .withPush(false),\n scrollStrategy: this._overlay.scrollStrategies.reposition(),\n disposeOnNavigation: true,\n panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],\n maxHeight: 'unset',\n hasBackdrop: this.hasBackdrop,\n backdropClass: [this.backdropClass \|\| 'cdk-overlay-transparent-backdrop'],\n });\n }\n\n private _openAsActionsheet() {\n this._overlayRef = this._overlay.create({\n positionStrategy: this._overlay\n .position()\n .flexibleConnectedTo(document.body)\n .withPositions([\n {\n originX: 'center',\n originY: 'bottom',\n overlayX: 'center',\n overlayY: 'bottom',\n },\n ]),\n disposeOnNavigation: true,\n panelClass: ['ax-animate-slideInUp', 'ax-animate-faster'],\n hasBackdrop: true,\n width: '100%',\n });\n }\n\n get isOpen(): boolean {\n return this._overlayRef ? this._overlayRef.hasAttached() : false;\n }\n\n private _addSub(sub: Subscription) {\n this._subs.push(sub);\n }\n\n updatePosition(): void {\n this._overlayRef?.updatePosition();\n this.focus();\n }\n}\n","<ng-template #baseTemplate>\n <ng-content></ng-content>\n</ng-template>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AXPopoverComponent } from './popover.component';\n\n@NgModule({\n declarations: [AXPopoverComponent],\n imports: [CommonModule],\n exports: [AXPopoverComponent],\n providers: [],\n})\nexport class AXPopoverModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-select-box.mjs CHANGED Viewed

@@ -54,6 +54,9 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
     }
     _isActionSheet = false;
     _forceFocus = false;
+    _loadingOptions = {
+        text: AXTranslator.get('layout.loading.text'),
+    };
     /**
      *  @ignore
      */
@@ -95,8 +98,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
     _updatePopupTitle() {
         const count = this.selectedItems?.length || 0;
         //this._popoverTitle = count > 1 ? `(${count}) items selected` : (this.placeholder || AXTranslator.get('selectbox.popover.title'));
-        this._popoverTitle =
-            this.placeholder || AXTranslator.get('selectbox.popover.title');
+        this._popoverTitle = this.placeholder || AXTranslator.get('selectbox.popover.title');
     }
     _detectPopupSize() {
         this._popoverWidth = this._isActionSheet ? 0 : this._target.offsetWidth;
@@ -119,8 +121,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
     }
     _checkForLoadData() {
         const list = this.listContainer.nativeElement;
-        if (this.loadedCount < this.totalCount &&
-            list.scrollHeight < list.parentElement.clientHeight * 1.5) {
+        if (this.loadedCount < this.totalCount && list.scrollHeight < list.parentElement.clientHeight * 1.5) {
             this._fetchData();
         }
     }
@@ -151,18 +152,13 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
     }
     _handleKeydown(e) {
         const isLetter = new RegExp(/[a-zA-Z0-9\-]/).test(String.fromCharCode(e.keyCode));
-        if (e.code === 'Backspace' &&
-            e.type === 'keydown' &&
-            ((this.allowNull === true && this.selectedItems.length > 0) ||
-                (this.allowNull !== true && this.selectedItems.length > 1))) {
+        if (e.code === 'Backspace' && e.type === 'keydown' && ((this.allowNull === true && this.selectedItems.length > 0) || (this.allowNull !== true && this.selectedItems.length > 1))) {
             this.isUserInput = true;
             this.unselectItems(this.selectedItems.pop());
             e.preventDefault();
             return;
         }
-        else if ((e.code === 'ArrowDown' || e.code === 'ArrowUp' || e.code === 'Space') &&
-            !this.popover.isOpen &&
-            e.type === 'keydown') {
+        else if ((e.code === 'ArrowDown' || e.code === 'ArrowUp' || e.code === 'Space') && !this.popover.isOpen && e.type === 'keydown') {
             if (this.multiple) {
                 this.open();
             }
@@ -186,18 +182,14 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         }
     }
     _handlePopoverKeydown(e) {
-        if (e.target.tagName == 'INPUT' &&
-            ['Space', 'Backspace'].includes(e.code))
+        if (e.target.tagName == 'INPUT' && ['Space', 'Backspace'].includes(e.code))
             return;
-        if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') &&
-            this.displayItems.length > 0) {
+        if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && this.displayItems.length > 0) {
             this.isUserInput = true;
             this._focusItemByNav(e.key === 'ArrowDown' ? 1 : -1);
             e.preventDefault();
         }
-        else if (e.code === 'Backspace' &&
-            ((this.allowNull === true && this.selectedItems.length > 0) ||
-                (this.allowNull !== true && this.selectedItems.length > 1))) {
+        else if (e.code === 'Backspace' && ((this.allowNull === true && this.selectedItems.length > 0) || (this.allowNull !== true && this.selectedItems.length > 1))) {
             this.isUserInput = true;
             this.unselectItems(this.selectedItems.pop());
             e.preventDefault();
@@ -205,10 +197,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         else if (e.code === 'Space' || e.code === 'Enter') {
             e.preventDefault();
             const focusedItemId = this.listContainer.nativeElement.querySelector('.ax-state-focus')?.dataset?.id;
-            const focusedItem = findLast(this.flatItems, [
-                this.valueField,
-                focusedItemId,
-            ]);
+            const focusedItem = findLast(this.flatItems, [this.valueField, focusedItemId]);
             if (focusedItem) {
                 if (this.isItemDisabled(focusedItem)) {
                     return;
@@ -251,17 +240,14 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         this.focus();
     }
     _focusSearchBox() {
-        if (this._searchBox &&
-            (!this._isActionSheet || this._searchBox.searchExp)) {
+        if (this._searchBox && (!this._isActionSheet || this._searchBox.searchExp)) {
             this._searchBox.focus();
         }
     }
     _focusItemByNav(sign) {
         const list = this.listContainer.nativeElement;
         const fn = s => list.querySelector(s);
-        const itemDiv = fn(`.ax-list-item.ax-state-focus`) ||
-            fn(`.ax-list-item.ax-state-selected`) ||
-            fn(`.ax-list-item`);
+        const itemDiv = fn(`.ax-list-item.ax-state-focus`) || fn(`.ax-list-item.ax-state-selected`) || fn(`.ax-list-item`);
         let next = (sign == 1 ? itemDiv.nextElementSibling : itemDiv.previousElementSibling);
         if (next) {
             this._focusItemElement(next);
@@ -309,10 +295,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
         const _last = last(this.selectedItems);
         let i = 0;
         if (_last) {
-            i = findLastIndex(this.flatItems, [
-                this.valueField,
-                _last[this.valueField],
-            ]);
+            i = findLastIndex(this.flatItems, [this.valueField, _last[this.valueField]]);
         }
         i += sign;
         let next = nth(this.flatItems, i);
@@ -339,7 +322,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.4", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", allowNull: "allowNull", value: "value", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", type: "type", autoComplete: "autoComplete", readonly: "readonly", pageSize: "pageSize", items: "items", valueField: "valueField", textField: "textField", disabledField: "disabledField", disabledCallback: "disabledCallback", multiple: "multiple", selectionMode: "selectionMode", clearButton: "clearButton", checkbox: "checkbox" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, classAttribute: "ax-editor-container ax-drop-down" }, providers: [
             { provide: AXClosbaleComponent, useExisting: AXSelectBoxComponent },
             { provide: AXSearchableComponent, useExisting: AXSelectBoxComponent },
-        ], queries: [{ propertyName: "_searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"> </ng-content>\n<div\n  class=\"ax-dropdown-content\"\n  [class.ax-state-disabled]=\"disabled\"\n  (click)=\"_handleInputClickEvent($event)\">\n  <div\n    class=\"ax-select-box-selection\"\n    [tabindex]=\"tabIndex\"\n    (focus)=\"_emitOnFocusEvent($event)\"\n    (blur)=\"_emitOnBlurEvent($event)\">\n    <ng-container\n      *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\n      <ng-container\n        *ngIf=\"\n          !multiple;\n          then singleSelectedTemplate;\n          else multipleSelectedTemplate\n        \"></ng-container>\n      <ng-template #singleSelectedTemplate>\n        <ng-container *ngFor=\"let item of selectedItems\">\n          <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n        </ng-container>\n      </ng-template>\n      <ng-template #multipleSelectedTemplate>\n        <ng-container *ngFor=\"let item of selectedItems\">\n          <div class=\"ax-select-multi-item\">\n            {{ _getItemDisplayTextTemplte(item) }}\n            <span\n              class=\"ax-icon ax-icon-close\"\n              (click)=\"_handleBadgeRemove($event, item)\">\n            </span>\n          </div>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-template #showPlaceholder>\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n        {{ placeholder }}\n      </div>\n    </ng-template>\n  </div>\n</div>\n<ax-button\n  color=\"light\"\n  look=\"blank\"\n  (onClick)=\"clear()\"\n  [tabIndex]=\"-1\"\n  *ngIf=\"value && clearButton && !(disabled || readonly)\">\n  <ax-icon icon=\"ax-icon ax-icon-close\"></ax-icon>\n</ax-button>\n<button\n  [disabled]=\"disabled\"\n  [tabIndex]=\"-1\"\n  class=\"ax-editor-control\"\n  (click)=\"_handleArrowClickEvent($event)\">\n  <ng-container *ngIf=\"isLoading && !this.popover.isOpen; else iconTemplate\">\n    <ax-loading type=\"spinner\"></ax-loading>\n  </ng-container>\n  <ng-template #iconTemplate>\n    <span\n      class=\"ax-icon ax-icon-chevron-left ax-transition-all\"\n      [ngClass]=\"{\n        '-ax-rotation-90': !isOpen,\n        'ax-rotation-90': isOpen\n      }\"></span>\n  </ng-template>\n</button>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<ng-content select=\"ax-suffix\"> </ng-content>\n<ax-popover\n  [target]=\"_target\"\n  [position]=\"position\"\n  [openTrigger]=\"'manual'\"\n  [closeTrigger]=\"'clickout'\"\n  [adaptivityEnabled]=\"true\"\n  (onOpened)=\"_handlePopupOnOpened($event)\"\n  (onClosed)=\"_handlePopupOnClosed($event)\">\n  <div\n    class=\"ax-overlay-pane\"\n    (keydown)=\"_handlePopoverKeydown($event)\"\n    tabindex=\"0\"\n    aria-modal=\"true\"\n    cdkTrapFocus\n    [class.ax-overlay-actionsheet]=\"_isActionSheet\"\n    [class.ax-full]=\"_searchBox || isLazy\"\n    [style.min-width.px]=\"_popoverWidth\">\n    <div class=\"ax-list\">\n      <ax-header *ngIf=\"_isActionSheet\">\n        <ax-title>{{ _popoverTitle }}</ax-title>\n        <ax-close-button\n          class=\"ax-icon\"\n          [icon]=\"\n            multiple ? 'ax-icon-done !ax-text-primary-500' : 'ax-icon-close'\n          \"></ax-close-button>\n      </ax-header>\n      <div\n        class=\"ax-search-box-container\"\n        [class.ax-state-hidden]=\"!_searchBox\"\n        [cdkTrapFocus]=\"_searchBox != null\">\n        <ng-content select=\"ax-search-box\"></ng-content>\n      </div>\n      <div\n        class=\"ax-content ax-list-items-container ax-default\"\n        (scroll)=\"_handleListScroll($event)\"\n        #listContainer>\n        <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\n          <ul>\n            <ng-container\n              *ngTemplateOutlet=\"tmpTree; context: { list: displayItems }\">\n            </ng-container>\n            <ng-template #tmpTree let-list=\"list\">\n              <ng-container\n                *ngFor=\"\n                  let item of list;\n                  let i = index;\n                  trackBy: _trackByFunction\n                \">\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\n                  <li\n                    class=\"ax-list-item\"\n                    (click)=\"_handleOnItemClick($event, item)\"\n                    [attr.data-id]=\"item[this.valueField]\">\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: { $implicit: item, direction: direction }\n                      \">\n                    </ng-container>\n                  </li>\n                </ng-container>\n                <ng-template #defualtTemplate>\n                  <ng-container *ngIf=\"item.children?.length > 0; else tmpItem\">\n                    <li\n                      class=\"ax-list-item-group\"\n                      [attr.data-id]=\"item[this.valueField]\">\n                      <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n                      <ul *ngIf=\"item.children?.length > 0\">\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            tmpTree;\n                            context: { list: item.children }\n                          \">\n                        </ng-container>\n                      </ul>\n                    </li>\n                  </ng-container>\n                  <ng-template #tmpItem>\n                    <ng-container *ngIf=\"!multiple; else multipleTemplate\">\n                      <li\n                        class=\"ax-list-item\"\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\n                        [attr.tabindex]=\"i\"\n                        (click)=\"_handleOnItemClick($event, item)\"\n                        [attr.data-id]=\"item[this.valueField]\">\n                        <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n                        <span\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\n                          *ngIf=\"isItemSelected(item)\"></span>\n                      </li>\n                    </ng-container>\n                    <ng-template #multipleTemplate>\n                      <li\n                        class=\"ax-list-item\"\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\n                        [class.ax-state-checkbox]=\"checkbox\"\n                        [attr.tabindex]=\"i\"\n                        (click)=\"_handleOnItemClick($event, item)\"\n                        [attr.data-id]=\"item[this.valueField]\">\n                        <span>\n                          <input\n                            class=\"ax-checkbox\"\n                            type=\"checkbox\"\n                            [class.ax-state-disabled]=\"isItemDisabled(item)\"\n                            *ngIf=\"checkbox\"\n                            [checked]=\"isItemSelected(item)\"\n                            [disabled]=\"isItemDisabled(item)\" />\n                          <span class=\"ax-checkbox-label\">{{\n                            _getItemDisplayTextTemplte(item)\n                          }}</span>\n                        </span>\n                        <span\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\n                          *ngIf=\"isItemSelected(item) && !checkbox\"></span>\n                      </li>\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </ng-container>\n            </ng-template>\n          </ul>\n        </ng-container>\n        <ng-container *ngIf=\"isLoading\">\n          <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\n          </ng-container>\n          <ng-template #elseLoadingTemplate>\n            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n              <ax-loading\n                text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\n            </div>\n          </ng-template>\n        </ng-container>\n        <ng-template #tmpEmpty>\n          <ng-container *ngIf=\"!isLoading\">\n            <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\n            </ng-container>\n            <ng-template #elseEmptyTemplate>\n              <div\n                class=\"ax-flex ax-items-center ax-justify-center ax-p-4\"\n                [innerHTML]=\"\n                  'common.no-result-for'\n                    | trans\n                      : {\n                          exp: this._searchBox ? this._searchBox.searchExp : ''\n                        }\n                \"></div>\n            </ng-template>\n          </ng-container>\n        </ng-template>\n      </div>\n      <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\n                >\n               \n            </div> -->\n      <!-- <div class=\"ax-footer\">footer</div> -->\n    </div>\n  </div>\n</ax-popover>\n", styles: ["ax-select-box .ax-select-multi-item{display:flex;align-items:center;padding:.25rem .5rem;background-color:rgba(var(--ax-color-on-surface));border-radius:var(--ax-rounded-border-default);margin-inline-end:.5rem}ax-select-box .ax-select-multi-item .ax-icon-close{cursor:pointer;margin-inline-start:.5rem}ax-select-box .ax-select-box-selection{display:flex;justify-content:center;align-items:center;outline-color:transparent;padding:0 .5rem;outline:transparent;-webkit-user-select:none;user-select:none}ax-select-box .ax-select-box-selection .ax-selectbox-input{opacity:0;width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.AXDecoratorHeaderComponent, selector: "ax-header" }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorTitleComponent, selector: "ax-title" }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i4.AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }, { kind: "component", type: i6.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "text"], outputs: ["visibleChange"] }, { kind: "directive", type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "_searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, static: true }, { propertyName: "_contentEmptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true, static: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"> </ng-content>\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\n  <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\n    <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\n      <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\n      <ng-template #singleSelectedTemplate>\n        <ng-container *ngFor=\"let item of selectedItems\">\n          <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n        </ng-container>\n      </ng-template>\n      <ng-template #multipleSelectedTemplate>\n        <ng-container *ngFor=\"let item of selectedItems\">\n          <div class=\"ax-select-multi-item\">\n            {{ _getItemDisplayTextTemplte(item) }}\n            <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"> </span>\n          </div>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-template #showPlaceholder>\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n        {{ placeholder }}\n      </div>\n    </ng-template>\n  </div>\n</div>\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\" *ngIf=\"value && clearButton && !(disabled || readonly)\">\n  <ax-icon icon=\"ax-icon ax-icon-close\"></ax-icon>\n</ax-button>\n<button [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-editor-control\" (click)=\"_handleArrowClickEvent($event)\">\n  <ng-container *ngIf=\"isLoading && !this.popover.isOpen; else iconTemplate\">\n    <ax-loading type=\"spinner\"></ax-loading>\n  </ng-container>\n  <ng-template #iconTemplate>\n    <span\n      class=\"ax-icon ax-icon-chevron-left ax-transition-all\"\n      [ngClass]=\"{\n        '-ax-rotation-90': !isOpen,\n        'ax-rotation-90': isOpen\n      }\"></span>\n  </ng-template>\n</button>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<ng-content select=\"ax-suffix\"> </ng-content>\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"true\" (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\n  <div\n    class=\"ax-overlay-pane\"\n    (keydown)=\"_handlePopoverKeydown($event)\"\n    tabindex=\"0\"\n    aria-modal=\"true\"\n    cdkTrapFocus\n    [class.ax-overlay-actionsheet]=\"_isActionSheet\"\n    [class.ax-full]=\"_searchBox || isLazy\"\n    [style.min-width.px]=\"_popoverWidth\">\n    <div class=\"ax-list\">\n      <ax-header *ngIf=\"_isActionSheet\">\n        <ax-title>{{ _popoverTitle }}</ax-title>\n        <ax-close-button class=\"ax-icon\" [icon]=\"multiple ? 'ax-icon-done !ax-text-primary-500' : 'ax-icon-close'\"></ax-close-button>\n      </ax-header>\n      <div class=\"ax-search-box-container\" [class.ax-state-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox != null\">\n        <ng-content select=\"ax-search-box\"></ng-content>\n      </div>\n      <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\" #listContainer>\n        <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\n          <ul>\n            <ng-container *ngTemplateOutlet=\"tmpTree; context: { list: displayItems }\"> </ng-container>\n            <ng-template #tmpTree let-list=\"list\">\n              <ng-container *ngFor=\"let item of list; let i = index; trackBy: _trackByFunction\">\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\n                  <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event, item)\" [attr.data-id]=\"item[this.valueField]\">\n                    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, direction: direction }\"> </ng-container>\n                  </li>\n                </ng-container>\n                <ng-template #defualtTemplate>\n                  <ng-container *ngIf=\"item.children?.length > 0; else tmpItem\">\n                    <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\n                      <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n                      <ul *ngIf=\"item.children?.length > 0\">\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context: { list: item.children }\"> </ng-container>\n                      </ul>\n                    </li>\n                  </ng-container>\n                  <ng-template #tmpItem>\n                    <ng-container *ngIf=\"!multiple; else multipleTemplate\">\n                      <li\n                        class=\"ax-list-item\"\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\n                        [attr.tabindex]=\"i\"\n                        (click)=\"_handleOnItemClick($event, item)\"\n                        [attr.data-id]=\"item[this.valueField]\">\n                        <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n                        <span class=\"ax-icon ax-icon-done ax-selected-icon\" *ngIf=\"isItemSelected(item)\"></span>\n                      </li>\n                    </ng-container>\n                    <ng-template #multipleTemplate>\n                      <li\n                        class=\"ax-list-item\"\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\n                        [class.ax-state-checkbox]=\"checkbox\"\n                        [attr.tabindex]=\"i\"\n                        (click)=\"_handleOnItemClick($event, item)\"\n                        [attr.data-id]=\"item[this.valueField]\">\n                        <span>\n                          <input class=\"ax-checkbox\" type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\" *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\" [disabled]=\"isItemDisabled(item)\" />\n                          <span class=\"ax-checkbox-label\">{{ _getItemDisplayTextTemplte(item) }}</span>\n                        </span>\n                        <span class=\"ax-icon ax-icon-done ax-selected-icon\" *ngIf=\"isItemSelected(item) && !checkbox\"></span>\n                      </li>\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </ng-container>\n            </ng-template>\n          </ul>\n        </ng-container>\n        <ng-container *ngIf=\"isLoading\">\n          <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\n          </ng-container>\n          <ng-template #elseLoadingTemplate>\n            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n              <ax-loading [options]=\"_loadingOptions\"></ax-loading>\n            </div>\n          </ng-template>\n        </ng-container>\n        <ng-template #tmpEmpty>\n          <ng-container *ngIf=\"!isLoading\">\n            <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\n            </ng-container>\n            <ng-template #elseEmptyTemplate>\n              <div\n                class=\"ax-flex ax-items-center ax-justify-center ax-p-4\"\n                [innerHTML]=\"\n                  'common.no-result-for'\n                    | trans\n                      : {\n                          exp: this._searchBox ? this._searchBox.searchExp : ''\n                        }\n                \"></div>\n            </ng-template>\n          </ng-container>\n        </ng-template>\n      </div>\n      <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\n                >\n               \n            </div> -->\n      <!-- <div class=\"ax-footer\">footer</div> -->\n    </div>\n  </div>\n</ax-popover>\n", styles: ["ax-select-box .ax-select-multi-item{display:flex;align-items:center;padding:.25rem .5rem;background-color:rgba(var(--ax-color-on-surface));border-radius:var(--ax-rounded-border-default);margin-inline-end:.5rem}ax-select-box .ax-select-multi-item .ax-icon-close{cursor:pointer;margin-inline-start:.5rem}ax-select-box .ax-select-box-selection{display:flex;justify-content:center;align-items:center;outline-color:transparent;padding:0 .5rem;outline:transparent;-webkit-user-select:none;user-select:none}ax-select-box .ax-select-box-selection .ax-selectbox-input{opacity:0;width:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.AXDecoratorHeaderComponent, selector: "ax-header" }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorTitleComponent, selector: "ax-title" }, { kind: "component", type: i3.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["icon"] }, { kind: "component", type: i4.AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: i5.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange"] }, { kind: "component", type: i6.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "options"], outputs: ["visibleChange"] }, { kind: "directive", type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: i8.AXTranslatorPipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
@@ -367,17 +350,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.4", ngImpor
                         'disabledCallback',
                         'multiple',
                         'selectionMode',
-                    ], outputs: [
-                        'onOpened',
-                        'onClosed',
-                        'onBlur',
-                        'onFocus',
-                        'valueChange',
-                        'onValueChanged',
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                    ], outputs: ['onOpened', 'onClosed', 'onBlur', 'onFocus', 'valueChange', 'onValueChanged'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: AXClosbaleComponent, useExisting: AXSelectBoxComponent },
                         { provide: AXSearchableComponent, useExisting: AXSelectBoxComponent },
-                    ], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\"> </ng-content>\n<div\n  class=\"ax-dropdown-content\"\n  [class.ax-state-disabled]=\"disabled\"\n  (click)=\"_handleInputClickEvent($event)\">\n  <div\n    class=\"ax-select-box-selection\"\n    [tabindex]=\"tabIndex\"\n    (focus)=\"_emitOnFocusEvent($event)\"\n    (blur)=\"_emitOnBlurEvent($event)\">\n    <ng-container\n      *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\n      <ng-container\n        *ngIf=\"\n          !multiple;\n          then singleSelectedTemplate;\n          else multipleSelectedTemplate\n        \"></ng-container>\n      <ng-template #singleSelectedTemplate>\n        <ng-container *ngFor=\"let item of selectedItems\">\n          <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n        </ng-container>\n      </ng-template>\n      <ng-template #multipleSelectedTemplate>\n        <ng-container *ngFor=\"let item of selectedItems\">\n          <div class=\"ax-select-multi-item\">\n            {{ _getItemDisplayTextTemplte(item) }}\n            <span\n              class=\"ax-icon ax-icon-close\"\n              (click)=\"_handleBadgeRemove($event, item)\">\n            </span>\n          </div>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-template #showPlaceholder>\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n        {{ placeholder }}\n      </div>\n    </ng-template>\n  </div>\n</div>\n<ax-button\n  color=\"light\"\n  look=\"blank\"\n  (onClick)=\"clear()\"\n  [tabIndex]=\"-1\"\n  *ngIf=\"value && clearButton && !(disabled || readonly)\">\n  <ax-icon icon=\"ax-icon ax-icon-close\"></ax-icon>\n</ax-button>\n<button\n  [disabled]=\"disabled\"\n  [tabIndex]=\"-1\"\n  class=\"ax-editor-control\"\n  (click)=\"_handleArrowClickEvent($event)\">\n  <ng-container *ngIf=\"isLoading && !this.popover.isOpen; else iconTemplate\">\n    <ax-loading type=\"spinner\"></ax-loading>\n  </ng-container>\n  <ng-template #iconTemplate>\n    <span\n      class=\"ax-icon ax-icon-chevron-left ax-transition-all\"\n      [ngClass]=\"{\n        '-ax-rotation-90': !isOpen,\n        'ax-rotation-90': isOpen\n      }\"></span>\n  </ng-template>\n</button>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<ng-content select=\"ax-suffix\"> </ng-content>\n<ax-popover\n  [target]=\"_target\"\n  [position]=\"position\"\n  [openTrigger]=\"'manual'\"\n  [closeTrigger]=\"'clickout'\"\n  [adaptivityEnabled]=\"true\"\n  (onOpened)=\"_handlePopupOnOpened($event)\"\n  (onClosed)=\"_handlePopupOnClosed($event)\">\n  <div\n    class=\"ax-overlay-pane\"\n    (keydown)=\"_handlePopoverKeydown($event)\"\n    tabindex=\"0\"\n    aria-modal=\"true\"\n    cdkTrapFocus\n    [class.ax-overlay-actionsheet]=\"_isActionSheet\"\n    [class.ax-full]=\"_searchBox || isLazy\"\n    [style.min-width.px]=\"_popoverWidth\">\n    <div class=\"ax-list\">\n      <ax-header *ngIf=\"_isActionSheet\">\n        <ax-title>{{ _popoverTitle }}</ax-title>\n        <ax-close-button\n          class=\"ax-icon\"\n          [icon]=\"\n            multiple ? 'ax-icon-done !ax-text-primary-500' : 'ax-icon-close'\n          \"></ax-close-button>\n      </ax-header>\n      <div\n        class=\"ax-search-box-container\"\n        [class.ax-state-hidden]=\"!_searchBox\"\n        [cdkTrapFocus]=\"_searchBox != null\">\n        <ng-content select=\"ax-search-box\"></ng-content>\n      </div>\n      <div\n        class=\"ax-content ax-list-items-container ax-default\"\n        (scroll)=\"_handleListScroll($event)\"\n        #listContainer>\n        <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\n          <ul>\n            <ng-container\n              *ngTemplateOutlet=\"tmpTree; context: { list: displayItems }\">\n            </ng-container>\n            <ng-template #tmpTree let-list=\"list\">\n              <ng-container\n                *ngFor=\"\n                  let item of list;\n                  let i = index;\n                  trackBy: _trackByFunction\n                \">\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\n                  <li\n                    class=\"ax-list-item\"\n                    (click)=\"_handleOnItemClick($event, item)\"\n                    [attr.data-id]=\"item[this.valueField]\">\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: { $implicit: item, direction: direction }\n                      \">\n                    </ng-container>\n                  </li>\n                </ng-container>\n                <ng-template #defualtTemplate>\n                  <ng-container *ngIf=\"item.children?.length > 0; else tmpItem\">\n                    <li\n                      class=\"ax-list-item-group\"\n                      [attr.data-id]=\"item[this.valueField]\">\n                      <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n                      <ul *ngIf=\"item.children?.length > 0\">\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            tmpTree;\n                            context: { list: item.children }\n                          \">\n                        </ng-container>\n                      </ul>\n                    </li>\n                  </ng-container>\n                  <ng-template #tmpItem>\n                    <ng-container *ngIf=\"!multiple; else multipleTemplate\">\n                      <li\n                        class=\"ax-list-item\"\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\n                        [attr.tabindex]=\"i\"\n                        (click)=\"_handleOnItemClick($event, item)\"\n                        [attr.data-id]=\"item[this.valueField]\">\n                        <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n                        <span\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\n                          *ngIf=\"isItemSelected(item)\"></span>\n                      </li>\n                    </ng-container>\n                    <ng-template #multipleTemplate>\n                      <li\n                        class=\"ax-list-item\"\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\n                        [class.ax-state-checkbox]=\"checkbox\"\n                        [attr.tabindex]=\"i\"\n                        (click)=\"_handleOnItemClick($event, item)\"\n                        [attr.data-id]=\"item[this.valueField]\">\n                        <span>\n                          <input\n                            class=\"ax-checkbox\"\n                            type=\"checkbox\"\n                            [class.ax-state-disabled]=\"isItemDisabled(item)\"\n                            *ngIf=\"checkbox\"\n                            [checked]=\"isItemSelected(item)\"\n                            [disabled]=\"isItemDisabled(item)\" />\n                          <span class=\"ax-checkbox-label\">{{\n                            _getItemDisplayTextTemplte(item)\n                          }}</span>\n                        </span>\n                        <span\n                          class=\"ax-icon ax-icon-done ax-selected-icon\"\n                          *ngIf=\"isItemSelected(item) && !checkbox\"></span>\n                      </li>\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </ng-container>\n            </ng-template>\n          </ul>\n        </ng-container>\n        <ng-container *ngIf=\"isLoading\">\n          <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\n          </ng-container>\n          <ng-template #elseLoadingTemplate>\n            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n              <ax-loading\n                text=\"{{ 'layout.loading.text' | trans }}\"></ax-loading>\n            </div>\n          </ng-template>\n        </ng-container>\n        <ng-template #tmpEmpty>\n          <ng-container *ngIf=\"!isLoading\">\n            <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\n            </ng-container>\n            <ng-template #elseEmptyTemplate>\n              <div\n                class=\"ax-flex ax-items-center ax-justify-center ax-p-4\"\n                [innerHTML]=\"\n                  'common.no-result-for'\n                    | trans\n                      : {\n                          exp: this._searchBox ? this._searchBox.searchExp : ''\n                        }\n                \"></div>\n            </ng-template>\n          </ng-container>\n        </ng-template>\n      </div>\n      <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\n                >\n               \n            </div> -->\n      <!-- <div class=\"ax-footer\">footer</div> -->\n    </div>\n  </div>\n</ax-popover>\n", styles: ["ax-select-box .ax-select-multi-item{display:flex;align-items:center;padding:.25rem .5rem;background-color:rgba(var(--ax-color-on-surface));border-radius:var(--ax-rounded-border-default);margin-inline-end:.5rem}ax-select-box .ax-select-multi-item .ax-icon-close{cursor:pointer;margin-inline-start:.5rem}ax-select-box .ax-select-box-selection{display:flex;justify-content:center;align-items:center;outline-color:transparent;padding:0 .5rem;outline:transparent;-webkit-user-select:none;user-select:none}ax-select-box .ax-select-box-selection .ax-selectbox-input{opacity:0;width:0}\n"] }]
+                    ], host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\"> </ng-content>\n<div class=\"ax-dropdown-content\" [class.ax-state-disabled]=\"disabled\" (click)=\"_handleInputClickEvent($event)\">\n  <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\n    <ng-container *ngIf=\"selectedItems && selectedItems.length; else showPlaceholder\">\n      <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\n      <ng-template #singleSelectedTemplate>\n        <ng-container *ngFor=\"let item of selectedItems\">\n          <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n        </ng-container>\n      </ng-template>\n      <ng-template #multipleSelectedTemplate>\n        <ng-container *ngFor=\"let item of selectedItems\">\n          <div class=\"ax-select-multi-item\">\n            {{ _getItemDisplayTextTemplte(item) }}\n            <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"> </span>\n          </div>\n        </ng-container>\n      </ng-template>\n    </ng-container>\n    <ng-template #showPlaceholder>\n      <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n        {{ placeholder }}\n      </div>\n    </ng-template>\n  </div>\n</div>\n<ax-button color=\"light\" look=\"blank\" (onClick)=\"clear()\" [tabIndex]=\"-1\" *ngIf=\"value && clearButton && !(disabled || readonly)\">\n  <ax-icon icon=\"ax-icon ax-icon-close\"></ax-icon>\n</ax-button>\n<button [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-editor-control\" (click)=\"_handleArrowClickEvent($event)\">\n  <ng-container *ngIf=\"isLoading && !this.popover.isOpen; else iconTemplate\">\n    <ax-loading type=\"spinner\"></ax-loading>\n  </ng-container>\n  <ng-template #iconTemplate>\n    <span\n      class=\"ax-icon ax-icon-chevron-left ax-transition-all\"\n      [ngClass]=\"{\n        '-ax-rotation-90': !isOpen,\n        'ax-rotation-90': isOpen\n      }\"></span>\n  </ng-template>\n</button>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n<ng-content select=\"ax-suffix\"> </ng-content>\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\" [adaptivityEnabled]=\"true\" (onOpened)=\"_handlePopupOnOpened($event)\" (onClosed)=\"_handlePopupOnClosed($event)\">\n  <div\n    class=\"ax-overlay-pane\"\n    (keydown)=\"_handlePopoverKeydown($event)\"\n    tabindex=\"0\"\n    aria-modal=\"true\"\n    cdkTrapFocus\n    [class.ax-overlay-actionsheet]=\"_isActionSheet\"\n    [class.ax-full]=\"_searchBox || isLazy\"\n    [style.min-width.px]=\"_popoverWidth\">\n    <div class=\"ax-list\">\n      <ax-header *ngIf=\"_isActionSheet\">\n        <ax-title>{{ _popoverTitle }}</ax-title>\n        <ax-close-button class=\"ax-icon\" [icon]=\"multiple ? 'ax-icon-done !ax-text-primary-500' : 'ax-icon-close'\"></ax-close-button>\n      </ax-header>\n      <div class=\"ax-search-box-container\" [class.ax-state-hidden]=\"!_searchBox\" [cdkTrapFocus]=\"_searchBox != null\">\n        <ng-content select=\"ax-search-box\"></ng-content>\n      </div>\n      <div class=\"ax-content ax-list-items-container ax-default\" (scroll)=\"_handleListScroll($event)\" #listContainer>\n        <ng-container *ngIf=\"displayItems.length; else tmpEmpty\">\n          <ul>\n            <ng-container *ngTemplateOutlet=\"tmpTree; context: { list: displayItems }\"> </ng-container>\n            <ng-template #tmpTree let-list=\"list\">\n              <ng-container *ngFor=\"let item of list; let i = index; trackBy: _trackByFunction\">\n                <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\n                  <li class=\"ax-list-item\" (click)=\"_handleOnItemClick($event, item)\" [attr.data-id]=\"item[this.valueField]\">\n                    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item, direction: direction }\"> </ng-container>\n                  </li>\n                </ng-container>\n                <ng-template #defualtTemplate>\n                  <ng-container *ngIf=\"item.children?.length > 0; else tmpItem\">\n                    <li class=\"ax-list-item-group\" [attr.data-id]=\"item[this.valueField]\">\n                      <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n                      <ul *ngIf=\"item.children?.length > 0\">\n                        <ng-container *ngTemplateOutlet=\"tmpTree; context: { list: item.children }\"> </ng-container>\n                      </ul>\n                    </li>\n                  </ng-container>\n                  <ng-template #tmpItem>\n                    <ng-container *ngIf=\"!multiple; else multipleTemplate\">\n                      <li\n                        class=\"ax-list-item\"\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\n                        [attr.tabindex]=\"i\"\n                        (click)=\"_handleOnItemClick($event, item)\"\n                        [attr.data-id]=\"item[this.valueField]\">\n                        <span> {{ _getItemDisplayTextTemplte(item) }}</span>\n                        <span class=\"ax-icon ax-icon-done ax-selected-icon\" *ngIf=\"isItemSelected(item)\"></span>\n                      </li>\n                    </ng-container>\n                    <ng-template #multipleTemplate>\n                      <li\n                        class=\"ax-list-item\"\n                        [class.ax-state-selected]=\"isItemSelected(item)\"\n                        [class.ax-state-disabled]=\"isItemDisabled(item)\"\n                        [class.ax-state-checkbox]=\"checkbox\"\n                        [attr.tabindex]=\"i\"\n                        (click)=\"_handleOnItemClick($event, item)\"\n                        [attr.data-id]=\"item[this.valueField]\">\n                        <span>\n                          <input class=\"ax-checkbox\" type=\"checkbox\" [class.ax-state-disabled]=\"isItemDisabled(item)\" *ngIf=\"checkbox\" [checked]=\"isItemSelected(item)\" [disabled]=\"isItemDisabled(item)\" />\n                          <span class=\"ax-checkbox-label\">{{ _getItemDisplayTextTemplte(item) }}</span>\n                        </span>\n                        <span class=\"ax-icon ax-icon-done ax-selected-icon\" *ngIf=\"isItemSelected(item) && !checkbox\"></span>\n                      </li>\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </ng-container>\n            </ng-template>\n          </ul>\n        </ng-container>\n        <ng-container *ngIf=\"isLoading\">\n          <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\n            <ng-container *ngTemplateOutlet=\"loadingTemplate\"> </ng-container>\n          </ng-container>\n          <ng-template #elseLoadingTemplate>\n            <div class=\"ax-flex ax-items-center ax-justify-center ax-p-4\">\n              <ax-loading [options]=\"_loadingOptions\"></ax-loading>\n            </div>\n          </ng-template>\n        </ng-container>\n        <ng-template #tmpEmpty>\n          <ng-container *ngIf=\"!isLoading\">\n            <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\n              <ng-container *ngTemplateOutlet=\"emptyTemplate\"> </ng-container>\n            </ng-container>\n            <ng-template #elseEmptyTemplate>\n              <div\n                class=\"ax-flex ax-items-center ax-justify-center ax-p-4\"\n                [innerHTML]=\"\n                  'common.no-result-for'\n                    | trans\n                      : {\n                          exp: this._searchBox ? this._searchBox.searchExp : ''\n                        }\n                \"></div>\n            </ng-template>\n          </ng-container>\n        </ng-template>\n      </div>\n      <!-- <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\n                >\n               \n            </div> -->\n      <!-- <div class=\"ax-footer\">footer</div> -->\n    </div>\n  </div>\n</ax-popover>\n", styles: ["ax-select-box .ax-select-multi-item{display:flex;align-items:center;padding:.25rem .5rem;background-color:rgba(var(--ax-color-on-surface));border-radius:var(--ax-rounded-border-default);margin-inline-end:.5rem}ax-select-box .ax-select-multi-item .ax-icon-close{cursor:pointer;margin-inline-start:.5rem}ax-select-box .ax-select-box-selection{display:flex;justify-content:center;align-items:center;outline-color:transparent;padding:0 .5rem;outline:transparent;-webkit-user-select:none;user-select:none}ax-select-box .ax-select-box-selection .ax-selectbox-input{opacity:0;width:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.AXPlatform }]; }, propDecorators: { popover: [{
                 type: ViewChild,
                 args: [AXPopoverComponent, { static: true }]