@acorex/components 5.0.35 → 5.0.36
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.
- package/esm2020/lib/badge/badge.component.mjs +3 -3
- package/esm2020/lib/base/mixin/selection-component.class.mjs +2 -2
- package/esm2020/lib/checkbox/checkbox.component.mjs +8 -4
- package/esm2020/lib/datepicker/datepicker.component.mjs +16 -11
- package/esm2020/lib/label/label.component.mjs +10 -3
- package/esm2020/lib/popover/popover.component.mjs +17 -36
- package/esm2020/lib/selectbox/selectbox.component.mjs +24 -18
- package/esm2020/lib/selectbox/selectbox.module.mjs +5 -5
- package/fesm2015/acorex-components.mjs +61 -61
- package/fesm2015/acorex-components.mjs.map +1 -1
- package/fesm2020/acorex-components.mjs +61 -61
- package/fesm2020/acorex-components.mjs.map +1 -1
- package/lib/checkbox/checkbox.component.d.ts +4 -2
- package/lib/datepicker/datepicker.component.d.ts +4 -1
- package/lib/label/label.component.d.ts +3 -0
- package/lib/popover/popover.component.d.ts +0 -1
- package/lib/selectbox/selectbox.component.d.ts +9 -4
- package/lib/selectbox/selectbox.module.d.ts +9 -9
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { Injectable, Inject, EventEmitter, Directive, NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, HostBinding, HostListener, ContentChildren, Optional,
|
|
3
|
+
import { Injectable, Inject, EventEmitter, Directive, NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, HostBinding, HostListener, ContentChildren, Optional, ContentChild, ViewChild, ElementRef, TemplateRef, ViewChildren } from '@angular/core';
|
|
4
4
|
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
|
|
5
5
|
import * as i2 from '@acorex/core';
|
|
6
6
|
import { AXObjectUtil, AXDateTime, AXDateTimeRange, AXDateTimeModule, AXDrawingUtil, AXStringUtil, AXTranslator, AXConfig } from '@acorex/core';
|
|
@@ -660,7 +660,7 @@ function _SelectionComponenetMixin(Base) {
|
|
|
660
660
|
if (items && items.length) {
|
|
661
661
|
items.forEach(item => {
|
|
662
662
|
if (this.multiple) {
|
|
663
|
-
this.
|
|
663
|
+
this.isItemSelected(item) ? this.unselectItems(item) : this.selectItems(item);
|
|
664
664
|
}
|
|
665
665
|
else {
|
|
666
666
|
this.selectItems(item);
|
|
@@ -1443,10 +1443,10 @@ class AXBadgeComponent extends AXBaseComponentMixin {
|
|
|
1443
1443
|
}
|
|
1444
1444
|
}
|
|
1445
1445
|
AXBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXBadgeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1446
|
-
AXBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXBadgeComponent, selector: "ax-badge", inputs: { text: "text", color: "color" }, host: { properties: { "class": "this.__hostClass" }, classAttribute: "ax-badge" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<span class=\"ax-font-medium\">{{text}}</span>\r\n<ng-content select=\"ax-suffix\"></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1446
|
+
AXBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXBadgeComponent, selector: "ax-badge", inputs: { text: "text", color: "color" }, host: { properties: { "class": "this.__hostClass" }, classAttribute: "ax-badge" }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<span class=\"ax-font-medium ax-truncate\">{{text}}</span>\r\n<ng-content select=\"ax-suffix\"></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1447
1447
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXBadgeComponent, decorators: [{
|
|
1448
1448
|
type: Component,
|
|
1449
|
-
args: [{ selector: 'ax-badge', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-badge' }, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<span class=\"ax-font-medium\">{{text}}</span>\r\n<ng-content select=\"ax-suffix\"></ng-content>" }]
|
|
1449
|
+
args: [{ selector: 'ax-badge', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-badge' }, template: "<ng-content select=\"ax-prefix\"></ng-content>\r\n<span class=\"ax-font-medium ax-truncate\">{{text}}</span>\r\n<ng-content select=\"ax-suffix\"></ng-content>" }]
|
|
1450
1450
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
|
|
1451
1451
|
type: Input
|
|
1452
1452
|
}], color: [{
|
|
@@ -2770,12 +2770,19 @@ class AXLabelComponent extends AXBaseComponentMixin {
|
|
|
2770
2770
|
constructor(elementRef, cdr) {
|
|
2771
2771
|
super(elementRef, cdr);
|
|
2772
2772
|
}
|
|
2773
|
+
get target() {
|
|
2774
|
+
return this._target;
|
|
2775
|
+
}
|
|
2776
|
+
set target(v) {
|
|
2777
|
+
this._target = v;
|
|
2778
|
+
this._cdr.markForCheck();
|
|
2779
|
+
}
|
|
2773
2780
|
}
|
|
2774
2781
|
AXLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2775
|
-
AXLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXLabelComponent, selector: "ax-label", usesInheritance: true, ngImport: i0, template: "<label>\r\n <ng-content></ng-content>\r\n</label>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2782
|
+
AXLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXLabelComponent, selector: "ax-label", usesInheritance: true, ngImport: i0, template: "<label [attr.for]=\"target\">\r\n <ng-content></ng-content>\r\n</label>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2776
2783
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXLabelComponent, decorators: [{
|
|
2777
2784
|
type: Component,
|
|
2778
|
-
args: [{ selector: 'ax-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<label>\r\n <ng-content></ng-content>\r\n</label>" }]
|
|
2785
|
+
args: [{ selector: 'ax-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<label [attr.for]=\"target\">\r\n <ng-content></ng-content>\r\n</label>" }]
|
|
2779
2786
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
|
|
2780
2787
|
|
|
2781
2788
|
const COMPONENT$g = [AXLabelComponent];
|
|
@@ -2806,6 +2813,10 @@ class AXCheckBoxComponent extends AXBaseValueComponentMixin {
|
|
|
2806
2813
|
this.value = false;
|
|
2807
2814
|
}
|
|
2808
2815
|
}
|
|
2816
|
+
onViewInit() {
|
|
2817
|
+
if (this._label)
|
|
2818
|
+
this._label.target = this.id;
|
|
2819
|
+
}
|
|
2809
2820
|
_onValueChanging(value) {
|
|
2810
2821
|
if (this.allowNull && value == null) {
|
|
2811
2822
|
this._stateIndeterminate = true;
|
|
@@ -2825,7 +2836,7 @@ class AXCheckBoxComponent extends AXBaseValueComponentMixin {
|
|
|
2825
2836
|
}
|
|
2826
2837
|
}
|
|
2827
2838
|
AXCheckBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCheckBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2828
|
-
AXCheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, queries: [{ propertyName: "
|
|
2839
|
+
AXCheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged" }, queries: [{ propertyName: "_label", first: true, predicate: AXLabelComponent, descendants: true }, { propertyName: "_hint", predicate: AXFormHintComponent }], usesInheritance: true, ngImport: i0, template: "<!-- <div class=\"ax-wrapper ax-flex ax-flex-row \" [class.ax-items-center]=\"_hint.length==0\"\r\n [class.ax-items-start]=\"_hint.length>=0\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"disabled\">\r\n <input [id]=\"id\" type=\"checkbox\" [indeterminate]=\"_stateIndeterminate\" [(ngModel)]=\"value\" [checked]=\"value\"\r\n [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\"\r\n (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n <div class=\"ax-suffix ax-ms-3\" *ngIf=\"_label.length||_hint.length\">\r\n <div *ngIf=\"_label.length\">\r\n <ng-content select=\"ax-label\"></ng-content>\r\n </div>\r\n <div *ngIf=\"_hint.length\">\r\n <ng-content select=\"ax-form-hint\"></ng-content>\r\n </div>\r\n </div>\r\n</div> -->\r\n\r\n<div class=\"ax-flex ax-items-start\">\r\n <div class=\"ax-flex ax-items-center ax-h-5\">\r\n <input [id]=\"id\" class=\"ax-h-4 ax-w-4\" type=\"checkbox\" [indeterminate]=\"_stateIndeterminate\" [(ngModel)]=\"value\" [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\"\r\n (blur)=\"_emitOnBlurEvent($event)\">\r\n </div>\r\n <div class=\"ax-ms-3 ax-text-sm\">\r\n <ng-content select=\"ax-label\"></ng-content>\r\n <ng-content select=\"ax-form-hint\"></ng-content>\r\n </div>\r\n</div>\r\n\r\n<ng-content select=\"ax-validation-rule\"></ng-content>", directives: [{ type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2829
2840
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXCheckBoxComponent, decorators: [{
|
|
2830
2841
|
type: Component,
|
|
2831
2842
|
args: [{ selector: 'ax-check-box', inputs: [...INTERACTIVE_INPUTS, ...VALUE_INPUTS], outputs: [...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div class=\"ax-wrapper ax-flex ax-flex-row \" [class.ax-items-center]=\"_hint.length==0\"\r\n [class.ax-items-start]=\"_hint.length>=0\" [class.ax-state-disabled]=\"disabled\" [class.ax-state-readonly]=\"disabled\">\r\n <input [id]=\"id\" type=\"checkbox\" [indeterminate]=\"_stateIndeterminate\" [(ngModel)]=\"value\" [checked]=\"value\"\r\n [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\"\r\n (focus)=\"_emitOnFocusEvent($event)\" (blur)=\"_emitOnBlurEvent($event)\">\r\n <div class=\"ax-suffix ax-ms-3\" *ngIf=\"_label.length||_hint.length\">\r\n <div *ngIf=\"_label.length\">\r\n <ng-content select=\"ax-label\"></ng-content>\r\n </div>\r\n <div *ngIf=\"_hint.length\">\r\n <ng-content select=\"ax-form-hint\"></ng-content>\r\n </div>\r\n </div>\r\n</div> -->\r\n\r\n<div class=\"ax-flex ax-items-start\">\r\n <div class=\"ax-flex ax-items-center ax-h-5\">\r\n <input [id]=\"id\" class=\"ax-h-4 ax-w-4\" type=\"checkbox\" [indeterminate]=\"_stateIndeterminate\" [(ngModel)]=\"value\" [checked]=\"value\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\" (click)=\"_handleOnClickEvent($event)\" (focus)=\"_emitOnFocusEvent($event)\"\r\n (blur)=\"_emitOnBlurEvent($event)\">\r\n </div>\r\n <div class=\"ax-ms-3 ax-text-sm\">\r\n <ng-content select=\"ax-label\"></ng-content>\r\n <ng-content select=\"ax-form-hint\"></ng-content>\r\n </div>\r\n</div>\r\n\r\n<ng-content select=\"ax-validation-rule\"></ng-content>" }]
|
|
@@ -2833,7 +2844,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
2833
2844
|
type: ContentChildren,
|
|
2834
2845
|
args: [AXFormHintComponent]
|
|
2835
2846
|
}], _label: [{
|
|
2836
|
-
type:
|
|
2847
|
+
type: ContentChild,
|
|
2837
2848
|
args: [AXLabelComponent]
|
|
2838
2849
|
}] } });
|
|
2839
2850
|
|
|
@@ -3075,28 +3086,27 @@ class AXPopoverComponent extends AXBaseComponent {
|
|
|
3075
3086
|
if (!targetRef)
|
|
3076
3087
|
return;
|
|
3077
3088
|
if (!this._overlayRef) {
|
|
3078
|
-
let positionStrategy;
|
|
3079
|
-
let scrollStrategy;
|
|
3080
3089
|
debugger;
|
|
3081
3090
|
if (this._platform.is('Mobile')) {
|
|
3082
|
-
|
|
3083
|
-
|
|
3091
|
+
this._overlayRef = this._overlay.create({
|
|
3092
|
+
positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
|
|
3093
|
+
scrollStrategy: this._overlay.scrollStrategies.noop(),
|
|
3094
|
+
panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
|
|
3095
|
+
hasBackdrop: true
|
|
3096
|
+
});
|
|
3084
3097
|
}
|
|
3085
3098
|
else {
|
|
3086
|
-
|
|
3087
|
-
.
|
|
3088
|
-
|
|
3089
|
-
|
|
3090
|
-
|
|
3099
|
+
this._overlayRef = this._overlay.create({
|
|
3100
|
+
positionStrategy: this._overlay.position()
|
|
3101
|
+
.flexibleConnectedTo(targetRef)
|
|
3102
|
+
.withPositions(Array.isArray(this.position) ? this.position : [this.position])
|
|
3103
|
+
.withPush(false),
|
|
3104
|
+
scrollStrategy: this._overlay.scrollStrategies.close(),
|
|
3105
|
+
panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
|
|
3106
|
+
hasBackdrop: this.hasBackdrop,
|
|
3107
|
+
backdropClass: [this.backdropClass || 'cdk-overlay-transparent-backdrop']
|
|
3108
|
+
});
|
|
3091
3109
|
}
|
|
3092
|
-
this._overlayRef = this._overlay.create({
|
|
3093
|
-
positionStrategy,
|
|
3094
|
-
scrollStrategy,
|
|
3095
|
-
panelClass: ['ax-animate-fadeIn', 'ax-animate-faster'],
|
|
3096
|
-
hasBackdrop: true,
|
|
3097
|
-
backdropClass: [this.backdropClass || 'cdk-overlay-transparent-backdrop']
|
|
3098
|
-
});
|
|
3099
|
-
this._updateOverlay();
|
|
3100
3110
|
if (this.closeTrigger == 'clickout') {
|
|
3101
3111
|
this._addSub(this._overlayRef._outsidePointerEvents.subscribe(c => {
|
|
3102
3112
|
const target = c.target;
|
|
@@ -3126,24 +3136,6 @@ class AXPopoverComponent extends AXBaseComponent {
|
|
|
3126
3136
|
_addSub(sub) {
|
|
3127
3137
|
this._subs.push(sub);
|
|
3128
3138
|
}
|
|
3129
|
-
_updateOverlay() {
|
|
3130
|
-
const targetRef = this._target;
|
|
3131
|
-
let positionStrategy;
|
|
3132
|
-
let scrollStrategy;
|
|
3133
|
-
if (this._platform.is('Mobile')) {
|
|
3134
|
-
positionStrategy = this._overlay.position().global().centerHorizontally().bottom();
|
|
3135
|
-
scrollStrategy = this._overlay.scrollStrategies.noop();
|
|
3136
|
-
}
|
|
3137
|
-
else {
|
|
3138
|
-
positionStrategy = this._overlay.position()
|
|
3139
|
-
.flexibleConnectedTo(targetRef)
|
|
3140
|
-
.withPositions(Array.isArray(this.position) ? this.position : [this.position])
|
|
3141
|
-
.withPush(false);
|
|
3142
|
-
scrollStrategy = this._overlay.scrollStrategies.close();
|
|
3143
|
-
}
|
|
3144
|
-
this._overlayRef.updatePositionStrategy(positionStrategy);
|
|
3145
|
-
this._overlayRef.updateScrollStrategy(scrollStrategy);
|
|
3146
|
-
}
|
|
3147
3139
|
}
|
|
3148
3140
|
AXPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXPopoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$2.Overlay }, { token: i2.AXPlatform }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3149
3141
|
AXPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXPopoverComponent, selector: "ax-popover", inputs: { target: "target", position: "position", openTrigger: "openTrigger", closeTrigger: "closeTrigger", hasBackdrop: "hasBackdrop", backdropClass: "backdropClass" }, outputs: { onOpened: "onOpened", onClosed: "onClosed" }, host: { listeners: { "document:keydown": "_handleKeydownHandler($event)" } }, viewQueries: [{ propertyName: "_baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #baseTemplate>\r\n <ng-content></ng-content>\r\n</ng-template>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
@@ -3176,12 +3168,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
3176
3168
|
|
|
3177
3169
|
const AXBaseDatePickerMixin = _InteractiveComponenetMixin(_DropdownComponenetMixin(_ValueComponenetMixin(_TextboxComponenetMixin(AXCalendarBaseComponent))));
|
|
3178
3170
|
class AXDatePickerComponent extends AXBaseDatePickerMixin {
|
|
3179
|
-
constructor(_elementRef, _cdr) {
|
|
3171
|
+
constructor(_elementRef, _cdr, _platform) {
|
|
3180
3172
|
super(_elementRef, _cdr);
|
|
3173
|
+
this._platform = _platform;
|
|
3181
3174
|
this._cursorPos = 0;
|
|
3175
|
+
this._isMobile = false;
|
|
3182
3176
|
this.formatChange = new EventEmitter();
|
|
3183
3177
|
this._format = 'YYYY-MM-dd';
|
|
3184
3178
|
this._target = this._getHostElement();
|
|
3179
|
+
this._isMobile = this._platform.is('Mobile');
|
|
3185
3180
|
}
|
|
3186
3181
|
get format() {
|
|
3187
3182
|
return this._format;
|
|
@@ -3296,12 +3291,12 @@ class AXDatePickerComponent extends AXBaseDatePickerMixin {
|
|
|
3296
3291
|
input.setSelectionRange(start, end);
|
|
3297
3292
|
}
|
|
3298
3293
|
}
|
|
3299
|
-
AXDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3300
|
-
AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", format: "format" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange", formatChange: "formatChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\"
|
|
3294
|
+
AXDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
|
|
3295
|
+
AXDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXDatePickerComponent, selector: "ax-date-picker", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", format: "format" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange", formatChange: "formatChange" }, host: { classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\" [class.ax-state-disabled]=\"disabled\"\r\n [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\" (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n <div class=\"ax-overlay-pane\" [style.min-width.px]=\"dropdownWidth\">\r\n <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n <span >{{placeholder || 'Choose a date'}}</span>\r\n <i class=\"ax-ic ax-ic-close \"\r\n (click)=\"close()\" tabindex=\"1\"></i>\r\n </div>\r\n <ax-calendar [disabled]=\"disabled\" [readonly]=\"readonly\" [(value)]=\"value\" [min]=\"min\" [min]=\"max\"\r\n [disabledDates]=\"disabledDates\" [holidayDates]=\"holidayDates\" [depth]=\"depth\">\r\n </ax-calendar>\r\n </div>\r\n</ax-popover>", components: [{ type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"], outputs: ["onOpened", "onClosed"] }, { type: AXCalendarComponent, selector: "ax-calendar", inputs: ["readonly", "allowNull", "value", "debounceTime", "name", "checked", "disabled", "tabIndex", "depth", "activeView", "min", "max", "disabledDates", "holidayDates"], outputs: ["valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange"] }], directives: [{ type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3301
3296
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXDatePickerComponent, decorators: [{
|
|
3302
3297
|
type: Component,
|
|
3303
|
-
args: [{ selector: 'ax-date-picker', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...CALENDAR_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...CALENDAR_OUTPUTS], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\"
|
|
3304
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { popover: [{
|
|
3298
|
+
args: [{ selector: 'ax-date-picker', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...CALENDAR_INPUTS], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...CALENDAR_OUTPUTS], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n <input class=\"ax-input\" type=\"text\" [attr.placeholder]=\"placeholder\" [class.ax-state-disabled]=\"disabled\"\r\n [class.ax-state-readonly]=\"readonly\" [disabled]=\"disabled\" [readonly]=\"readonly\" [tabindex]=\"tabIndex\"\r\n [ngModel]=\"displayText\" (focus)=\"_emitOnFocusEvent($event)\" (mouseup)=\"_handleOnInputClickEvent($event)\"\r\n (blur)=\"_emitOnBlurEvent($event)\" (keydown)=\"_handleOnKeydownEvent($event)\">\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n <div class=\"ax-overlay-pane\" [style.min-width.px]=\"dropdownWidth\">\r\n <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n <span >{{placeholder || 'Choose a date'}}</span>\r\n <i class=\"ax-ic ax-ic-close \"\r\n (click)=\"close()\" tabindex=\"1\"></i>\r\n </div>\r\n <ax-calendar [disabled]=\"disabled\" [readonly]=\"readonly\" [(value)]=\"value\" [min]=\"min\" [min]=\"max\"\r\n [disabledDates]=\"disabledDates\" [holidayDates]=\"holidayDates\" [depth]=\"depth\">\r\n </ax-calendar>\r\n </div>\r\n</ax-popover>" }]
|
|
3299
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2.AXPlatform }]; }, propDecorators: { popover: [{
|
|
3305
3300
|
type: ViewChild,
|
|
3306
3301
|
args: [AXPopoverComponent]
|
|
3307
3302
|
}], formatChange: [{
|
|
@@ -5266,24 +5261,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
5266
5261
|
}] });
|
|
5267
5262
|
|
|
5268
5263
|
class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
|
|
5269
|
-
constructor(
|
|
5270
|
-
super(
|
|
5271
|
-
this.
|
|
5264
|
+
constructor(_elementRef, _cdr, _zone, _platform) {
|
|
5265
|
+
super(_elementRef, _cdr);
|
|
5266
|
+
this._elementRef = _elementRef;
|
|
5267
|
+
this._cdr = _cdr;
|
|
5268
|
+
this._zone = _zone;
|
|
5269
|
+
this._platform = _platform;
|
|
5272
5270
|
this._currentfocusedIndex = -1;
|
|
5271
|
+
this._isMobile = false;
|
|
5273
5272
|
this._target = this._getHostElement();
|
|
5273
|
+
this._isMobile = this._platform.is('Mobile');
|
|
5274
5274
|
}
|
|
5275
5275
|
_handleArrowClickEvent(e) {
|
|
5276
5276
|
this.toggle();
|
|
5277
5277
|
}
|
|
5278
5278
|
onViewInit() {
|
|
5279
|
-
debugger;
|
|
5280
5279
|
super.onViewInit();
|
|
5281
|
-
this.dropdownWidth = this._target.
|
|
5280
|
+
this.dropdownWidth = this._target.offsetWidth;
|
|
5282
5281
|
this.onOpened.subscribe(() => {
|
|
5283
5282
|
this._focusSelectedItem();
|
|
5284
5283
|
});
|
|
5285
5284
|
}
|
|
5286
5285
|
_handleOnItemClick(e, item) {
|
|
5286
|
+
debugger;
|
|
5287
5287
|
if (!this.multiple)
|
|
5288
5288
|
this.close();
|
|
5289
5289
|
this.toggleSelect(item);
|
|
@@ -5403,7 +5403,7 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
|
|
|
5403
5403
|
}
|
|
5404
5404
|
_focusItemByIndex(inedx) {
|
|
5405
5405
|
if (this.listContainer) {
|
|
5406
|
-
this.
|
|
5406
|
+
this._zone.runOutsideAngular(() => {
|
|
5407
5407
|
const itemDiv = this.listContainer.nativeElement.querySelector(`.ax-list-item:nth-child(${inedx + 1})`);
|
|
5408
5408
|
if (itemDiv) {
|
|
5409
5409
|
itemDiv.focus();
|
|
@@ -5428,12 +5428,12 @@ class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
|
|
|
5428
5428
|
this._currentfocusedIndex = index;
|
|
5429
5429
|
}
|
|
5430
5430
|
}
|
|
5431
|
-
AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
5432
|
-
AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", items: "items", multiple: "multiple", valueField: "valueField", textField: "textField" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange" }, host: { listeners: { "document:keydown": "_handleKeydown($event)" }, classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"
|
|
5431
|
+
AXSelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i2.AXPlatform }], target: i0.ɵɵFactoryTarget.Component });
|
|
5432
|
+
AXSelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: { isOpen: "isOpen", fitParent: "fitParent", dropdownWidth: "dropdownWidth", position: "position", disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", allowNull: "allowNull", value: "value", debounceTime: "debounceTime", name: "name", checked: "checked", placeholder: "placeholder", maxLength: "maxLength", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", items: "items", multiple: "multiple", valueField: "valueField", textField: "textField" }, outputs: { onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", onValueChanged: "onValueChanged", depthChange: "depthChange" }, host: { listeners: { "document:keydown": "_handleKeydown($event)" }, classAttribute: "ax-editor-container ax-drop-down" }, viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }, { propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n (blur)=\"_emitOnBlurEvent($event)\">\r\n <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n <ng-template #singleSelectedTemplate>\r\n <ng-container *ngFor=\"let item of selectedItems\">\r\n <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #multipleSelectedTemplate>\r\n <div class=\"ax-flex ax-mx-2\">\r\n <ng-container *ngFor=\"let item of selectedItems\">\r\n <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n <ax-suffix>\r\n <ax-icon icon=\"ax-ic ax-ic-close\" (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n </ax-suffix>\r\n </ax-badge>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n <div class=\"ax-overlay-pane \" [class.ax-overlay-center]=\"_isMobile\">\r\n <div class=\"ax-list ax-list-container\" panel>\r\n <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n <span>{{placeholder || 'Choose an Item'}}</span>\r\n <i class=\"ax-ic {{multiple?'ax-ic-check':'ax-ic-close'}}\" (click)=\"close()\" tabindex=\"1\"></i>\r\n </div>\r\n <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n (scroll)=\"_handleListScroll($event)\" #listContainer>\r\n <ng-container *ngFor=\"let item of displayItems;let i = index;trackBy : _trackByFunction\">\r\n <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n <ng-container\r\n *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #defualtTemplate>\r\n <ng-container *ngIf=\"!multiple; then singleTemplate; else multipleTemplate\"></ng-container>\r\n <ng-template #singleTemplate>\r\n <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n {{ _getItemDisplayTextTemplte(item) }}\r\n </div>\r\n </ng-template>\r\n <ng-template #multipleTemplate>\r\n <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n <ax-check-box [value]=\"isItemSelected(item)\">\r\n </ax-check-box>\r\n {{ _getItemDisplayTextTemplte(item) }}\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n </ng-container>\r\n <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n Empty!\r\n </ng-template>\r\n </ng-container>\r\n <ng-container *ngIf=\"isLoading\">\r\n <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #elseLoadingTemplate>\r\n <div class=\"ax-list-loading-container\">\r\n <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ax-popover>", components: [{ type: AXBadgeComponent, selector: "ax-badge", inputs: ["text", "color"] }, { type: AXDecoratorSuffixComponent, selector: "ax-suffix" }, { type: AXIconComponent, selector: "ax-icon", inputs: ["icon"] }, { type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "size", "text", "submitBehavior", "cancelBehavior", "color", "look", "toggleable", "selected"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange"] }, { type: AXPopoverComponent, selector: "ax-popover", inputs: ["target", "position", "openTrigger", "closeTrigger", "hasBackdrop", "backdropClass"], outputs: ["onOpened", "onClosed"] }, { type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "allowNull", "value", "debounceTime", "name", "checked"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5433
5433
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
|
|
5434
5434
|
type: Component,
|
|
5435
|
-
args: [{ selector: 'ax-select-box', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...CALENDAR_INPUTS, 'items', 'multiple', 'allowNull', 'valueField', 'textField'], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...CALENDAR_OUTPUTS], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"
|
|
5436
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { popover: [{
|
|
5435
|
+
args: [{ selector: 'ax-select-box', inputs: [...DROPDOWN_INPUTS, ...INTERACTIVE_INPUTS, ...VALUE_INPUTS, ...TEXTBOX_INPUTS, ...CALENDAR_INPUTS, 'items', 'multiple', 'allowNull', 'valueField', 'textField'], outputs: [...DROPDOWN_OUTPUT, ...INTERACTIVE_OUTPUT, ...VALUE_OUTPUT, ...TEXTBOX_OUTPUT, ...CALENDAR_OUTPUTS], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ax-editor-container ax-drop-down' }, template: "<ng-content select=\"ax-prefix\">\r\n</ng-content>\r\n<div class=\"ax-dropdown-content\">\r\n <div class=\"ax-select-box-selection\" [tabindex]=\"tabIndex\" (focus)=\"_emitOnFocusEvent($event)\"\r\n (blur)=\"_emitOnBlurEvent($event)\">\r\n <ng-container *ngIf=\"!multiple; then singleSelectedTemplate; else multipleSelectedTemplate\"></ng-container>\r\n <ng-template #singleSelectedTemplate>\r\n <ng-container *ngFor=\"let item of selectedItems\">\r\n <span class=\"ax-mx-2\"> {{ _getItemDisplayTextTemplte(item) }}</span>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #multipleSelectedTemplate>\r\n <div class=\"ax-flex ax-mx-2\">\r\n <ng-container *ngFor=\"let item of selectedItems\">\r\n <ax-badge [text]=\"_getItemDisplayTextTemplte(item)\" color=\"light\" class=\"ax-me-2\">\r\n <ax-suffix>\r\n <ax-icon icon=\"ax-ic ax-ic-close\" (click)=\"_handleBadgeRemove($event,item)\"></ax-icon>\r\n </ax-suffix>\r\n </ax-badge>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</div>\r\n<ax-button [disabled]=\"disabled\" [tabIndex]=\"-1\" color=\"light\" look=\"blank\" (onClick)=\"_handleArrowClickEvent($event)\">\r\n <ax-icon icon=\"ax-ic ax-ic-chevron ax-transform ax--rotate-90\"></ax-icon>\r\n</ax-button>\r\n<ng-content select=\"ax-suffix\">\r\n</ng-content>\r\n<ax-popover [target]=\"_target\" [position]=\"position\" [openTrigger]=\"'manual'\" [closeTrigger]=\"'clickout'\">\r\n <div class=\"ax-overlay-pane \" [class.ax-overlay-center]=\"_isMobile\">\r\n <div class=\"ax-list ax-list-container\" panel>\r\n <div *ngIf=\"_isMobile\" class=\"ax-overlay-pane-header\">\r\n <span>{{placeholder || 'Choose an Item'}}</span>\r\n <i class=\"ax-ic {{multiple?'ax-ic-check':'ax-ic-close'}}\" (click)=\"close()\" tabindex=\"1\"></i>\r\n </div>\r\n <div class=\"ax-list-items-container ax-vertical ax-default\" [class.ax-full]=\"_isMobile\"\r\n (scroll)=\"_handleListScroll($event)\" #listContainer>\r\n <ng-container *ngFor=\"let item of displayItems;let i = index;trackBy : _trackByFunction\">\r\n <ng-container *ngIf=\"itemTemplate; else defualtTemplate\">\r\n <div class=\"ax-list-item\" (click)=\"_handleOnItemClick($event,item)\">\r\n <ng-container\r\n *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item,direction:direction}\">\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #defualtTemplate>\r\n <ng-container *ngIf=\"!multiple; then singleTemplate; else multipleTemplate\"></ng-container>\r\n <ng-template #singleTemplate>\r\n <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n {{ _getItemDisplayTextTemplte(item) }}\r\n </div>\r\n </ng-template>\r\n <ng-template #multipleTemplate>\r\n <div class=\"ax-list-item\" [class.ax-state-selected]=\"isItemSelected(item)\"\r\n [attr.tabindex]=\"i\" (click)=\"_handleOnItemClick($event,item)\">\r\n <ax-check-box [value]=\"isItemSelected(item)\">\r\n </ax-check-box>\r\n {{ _getItemDisplayTextTemplte(item) }}\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n </ng-container>\r\n <ng-container *ngIf=\"(displayItems==null || displayItems.length==0) && !isLoading\">\r\n <ng-container *ngIf=\"emptyTemplate; else elseEmptyTemplate\">\r\n <ng-container *ngTemplateOutlet=\"elseEmptyTemplate\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n Empty!\r\n </ng-template>\r\n </ng-container>\r\n <ng-container *ngIf=\"isLoading\">\r\n <ng-container *ngIf=\"loadingTemplate; else elseLoadingTemplate\">\r\n <ng-container *ngTemplateOutlet=\"loadingTemplate\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #elseLoadingTemplate>\r\n <div class=\"ax-list-loading-container\">\r\n <div><i class=\"fas fa-spinner ax-animate-spin\"></i> Loading ...</div>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ax-popover>" }]
|
|
5436
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i2.AXPlatform }]; }, propDecorators: { popover: [{
|
|
5437
5437
|
type: ViewChild,
|
|
5438
5438
|
args: [AXPopoverComponent]
|
|
5439
5439
|
}], listContainer: [{
|
|
@@ -5447,12 +5447,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
5447
5447
|
class AXSelectBoxModule {
|
|
5448
5448
|
}
|
|
5449
5449
|
AXSelectBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
5450
|
-
AXSelectBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [CommonModule,
|
|
5451
|
-
AXSelectBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxModule, providers: [], imports: [[CommonModule,
|
|
5450
|
+
AXSelectBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxModule, declarations: [AXSelectBoxComponent], imports: [CommonModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXIconModule, AXPopoverModule, AXButtonModule, AXLabelModule], exports: [AXSelectBoxComponent] });
|
|
5451
|
+
AXSelectBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxModule, providers: [], imports: [[CommonModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXIconModule, AXPopoverModule, AXButtonModule, AXLabelModule]] });
|
|
5452
5452
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AXSelectBoxModule, decorators: [{
|
|
5453
5453
|
type: NgModule,
|
|
5454
5454
|
args: [{
|
|
5455
|
-
imports: [CommonModule,
|
|
5455
|
+
imports: [CommonModule, FormsModule, AXCheckBoxModule, AXBadgeModule, AXEditorDecoratorModule, AXIconModule, AXPopoverModule, AXButtonModule, AXLabelModule],
|
|
5456
5456
|
exports: [AXSelectBoxComponent],
|
|
5457
5457
|
declarations: [AXSelectBoxComponent],
|
|
5458
5458
|
providers: [],
|