@acorex/components 1.3.93 → 3.0.1
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/acorex-components.metadata.json +1 -1
- package/bundles/acorex-components.umd.js +33 -21
- package/bundles/acorex-components.umd.js.map +1 -1
- package/bundles/acorex-components.umd.min.js +1 -1
- package/bundles/acorex-components.umd.min.js.map +1 -1
- package/esm2015/lib/base/element.class.js +16 -9
- package/esm2015/lib/button/button.component.js +2 -2
- package/esm2015/lib/calendar/calendar-box/calendar-box.component.js +2 -2
- package/esm2015/lib/checkbox/checkbox.component.js +2 -5
- package/esm2015/lib/form-group/form-group.component.js +3 -3
- package/esm2015/lib/menu/menu2.component.js +1 -1
- package/esm2015/lib/selectbox/selectbox.component.js +5 -2
- package/esm2015/lib/toast/toast-message/toast-message.component.js +3 -3
- package/esm2015/lib/tree-view/tree-view.component.js +6 -2
- package/esm5/lib/base/element.class.js +17 -9
- package/esm5/lib/button/button.component.js +2 -2
- package/esm5/lib/calendar/calendar-box/calendar-box.component.js +2 -2
- package/esm5/lib/checkbox/checkbox.component.js +2 -5
- package/esm5/lib/form-group/form-group.component.js +3 -3
- package/esm5/lib/menu/menu2.component.js +1 -1
- package/esm5/lib/selectbox/selectbox.component.js +5 -2
- package/esm5/lib/toast/toast-message/toast-message.component.js +3 -3
- package/esm5/lib/tree-view/tree-view.component.js +6 -2
- package/fesm2015/acorex-components.js +32 -21
- package/fesm2015/acorex-components.js.map +1 -1
- package/fesm5/acorex-components.js +33 -21
- package/fesm5/acorex-components.js.map +1 -1
- package/lib/base/element.class.d.ts +1 -1
- package/package.json +1 -1
|
@@ -254,26 +254,32 @@ class AXValidatableComponent extends AXBaseComponent {
|
|
|
254
254
|
return Promise.resolve({ result: true });
|
|
255
255
|
}
|
|
256
256
|
}
|
|
257
|
-
clearValidationStyle(element) {
|
|
258
|
-
var _a, _b, _c, _d, _e;
|
|
257
|
+
clearValidationStyle(element, clear = false) {
|
|
258
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
259
259
|
const formGroup = element.closest('.form-group');
|
|
260
260
|
const formItem = ((_a = formGroup) === null || _a === void 0 ? void 0 : _a.querySelector('.form-item')) || element.closest('.form-item') || element.querySelector('.form-item');
|
|
261
261
|
;
|
|
262
262
|
const label = (_b = formGroup) === null || _b === void 0 ? void 0 : _b.querySelector('.form-group-label');
|
|
263
263
|
const parent = ((_c = formItem) === null || _c === void 0 ? void 0 : _c.parentElement) || element.parentElement;
|
|
264
|
-
(_d = formItem) === null || _d === void 0 ? void 0 : _d.classList.remove('
|
|
265
|
-
(_e =
|
|
264
|
+
(_d = formItem) === null || _d === void 0 ? void 0 : _d.classList.remove('success-state');
|
|
265
|
+
(_e = formItem) === null || _e === void 0 ? void 0 : _e.classList.remove('error-state');
|
|
266
|
+
//formItem?.classList.remove('required-state');
|
|
267
|
+
if (!clear) {
|
|
268
|
+
(_f = formItem) === null || _f === void 0 ? void 0 : _f.classList.add('success-state');
|
|
269
|
+
}
|
|
270
|
+
(_g = label) === null || _g === void 0 ? void 0 : _g.classList.remove('error-text');
|
|
266
271
|
if (parent.querySelector('span.error-text')) {
|
|
267
272
|
parent.removeChild(parent.querySelector('span.error-text'));
|
|
268
273
|
}
|
|
269
274
|
}
|
|
270
275
|
applyValidationStyle(element, v) {
|
|
271
|
-
var _a, _b, _c, _d, _e;
|
|
276
|
+
var _a, _b, _c, _d, _e, _f;
|
|
272
277
|
const formGroup = element.closest('.form-group');
|
|
273
278
|
const formItem = ((_a = formGroup) === null || _a === void 0 ? void 0 : _a.querySelector('.form-item')) || element.closest('.form-item') || element.querySelector('.form-item');
|
|
274
279
|
const label = (_b = formGroup) === null || _b === void 0 ? void 0 : _b.querySelector('.form-group-label');
|
|
275
280
|
const parent = ((_c = formItem) === null || _c === void 0 ? void 0 : _c.parentElement) || element.parentElement;
|
|
276
|
-
(_d = formItem) === null || _d === void 0 ? void 0 : _d.classList.add('error');
|
|
281
|
+
(_d = formItem) === null || _d === void 0 ? void 0 : _d.classList.add('error-state');
|
|
282
|
+
(_e = formItem) === null || _e === void 0 ? void 0 : _e.classList.remove('success-state');
|
|
277
283
|
if (parent.querySelector('span.error-text')) {
|
|
278
284
|
parent.removeChild(parent.querySelector('span.error-text'));
|
|
279
285
|
}
|
|
@@ -283,7 +289,7 @@ class AXValidatableComponent extends AXBaseComponent {
|
|
|
283
289
|
span.classList.add('ax', 'error-text');
|
|
284
290
|
parent.appendChild(span);
|
|
285
291
|
}
|
|
286
|
-
(
|
|
292
|
+
(_f = label) === null || _f === void 0 ? void 0 : _f.classList.add('error-text');
|
|
287
293
|
}
|
|
288
294
|
}
|
|
289
295
|
__decorate([
|
|
@@ -353,7 +359,8 @@ class AXBaseTextComponent extends AXValidatableComponent {
|
|
|
353
359
|
isUserChange: this.userChange
|
|
354
360
|
});
|
|
355
361
|
this.userChange = false;
|
|
356
|
-
|
|
362
|
+
debugger;
|
|
363
|
+
this.clearValidationStyle(this.input.nativeElement, v ? false : true);
|
|
357
364
|
this.cdr.detectChanges();
|
|
358
365
|
}
|
|
359
366
|
}
|
|
@@ -921,7 +928,7 @@ AXButtonComponent = __decorate([
|
|
|
921
928
|
Component({
|
|
922
929
|
selector: 'ax-button',
|
|
923
930
|
encapsulation: ViewEncapsulation.None,
|
|
924
|
-
template: "<button #container class=\"ax button form-control {{type}} {{size}}\" [class.selected]=\"selected\" [class.icon]=\"icon\"\r\n [class.icon]=\"loading\" [class.disabled]=\"disabled || loading\" (click)=\"handleClick($event)\" [disabled]=\"disabled\"\r\n [ngStyle]=\"{'width.%': block ? 100 : 'auto'}\" [attr.tabindex]=\"tabIndex\">\r\n <div class=\"button-inner-content\">\r\n <ng-container *ngIf=\"icon && !loading\">\r\n <i class=\"{{icon}} icon\"></i
|
|
931
|
+
template: "<button #container class=\"ax button form-control {{type}} {{size}}\" [class.selected]=\"selected\" [class.icon]=\"icon\"\r\n [class.icon]=\"loading\" [class.disabled]=\"disabled || loading\" (click)=\"handleClick($event)\" [disabled]=\"disabled\"\r\n [ngStyle]=\"{'width.%': block ? 100 : 'auto'}\" [attr.tabindex]=\"tabIndex\">\r\n <div class=\"button-inner-content\">\r\n <ng-container *ngIf=\"icon && !loading\">\r\n <i class=\"{{icon}} icon\"></i>\r\n <ng-container *ngIf=\"refContent.innerText.length==0 && refContent.children.length == 0\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"loading\">\r\n <i class=\"far fa-circle-notch fa-spin icon\"></i>\r\n <ng-container *ngIf=\"refContent.innerText.length==0 && refContent.children.length == 0\"></ng-container>\r\n </ng-container>\r\n <div class=\"ax-wrapper\" #refContent>\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n</button>"
|
|
925
932
|
}),
|
|
926
933
|
__metadata("design:paramtypes", [ElementRef])
|
|
927
934
|
], AXButtonComponent);
|
|
@@ -1371,7 +1378,7 @@ __decorate([
|
|
|
1371
1378
|
AXCalendarBoxComponent = __decorate([
|
|
1372
1379
|
Component({
|
|
1373
1380
|
selector: 'ax-calendar-box',
|
|
1374
|
-
template: "<div class=\"calendar-body ax {{size}}\" [ngClass]=\"type\"
|
|
1381
|
+
template: "<div class=\"calendar-body ax {{size}}\" [ngClass]=\"type\">\r\n <div class=\"calendar-selector\">\r\n <div class=\"arrows left-arrow\" (click)=\"prev()\">\r\n <i class=\"far fa-chevron-left\"></i>\r\n </div>\r\n <div class=\"selector-name\" (click)=\"changeView()\" [ngSwitch]=\"view\">\r\n <ng-container *ngSwitchCase=\"'day'\">\r\n {{viewRange.startTime.add('day',10) | dt:\"MMM YYYY\"}}\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'month'\">\r\n {{viewRange.startTime | dt:\"YYYY\"}}\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n {{viewRange.startTime | dt:\"YYYY\"}} - {{viewRange.endTime | dt:\"YYYY\"}}\r\n </ng-container>\r\n </div>\r\n <div class=\"arrows right-arrow\" (click)=\"next()\">\r\n <i class=\"far fa-chevron-right\"></i>\r\n </div>\r\n </div>\r\n <div class=\"view\">\r\n <ng-container [ngSwitch]=\"view\">\r\n <ng-container *ngSwitchCase=\"'day'\">\r\n <table>\r\n <thead>\r\n <tr class=\"days-name calendar-row\">\r\n <th class=\"calendar-item\" *ngFor='let w of weekdays'>{{w}}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n <td *ngFor=\"let d of r;trackBy:trackByFn\" class=\"calendar-item \" [title]=\"getTitle(d.date)\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today,'next-month':d.nextMonth , 'holiday':d.holiday , 'unselect':d.unselect}\" [ngStyle]=\"(findDay(d.date)) ? getStyle(d.date):''\"\r\n (click)=\"setDayClick($event,d)\">\r\n <div>\r\n {{d.date.dayInMonth}}\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'month'\">\r\n <table>\r\n <tbody>\r\n <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n <td class=\"calendar-item month-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setMonthClick($event,d.date)\">\r\n <div>\r\n {{d.date| dt:\"MMM\"}}\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'year'\">\r\n <table>\r\n <tbody>\r\n <tr class=\"calendar-row\" *ngFor=\"let r of matrix\">\r\n <td class=\"calendar-item year-item\" *ngFor=\"let d of r;trackBy:trackByFn\" [ngClass]=\"{'selected': d.selected,'focused':d.focused,'today':d.today}\" (click)=\"setYearClick($event,d.date)\">\r\n <div>\r\n {{d.date | dt:\"YYYY\"}}\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div style=\"padding: 5px;\">\r\n <!-- TODO: Add buttons -->\r\n <ax-button (click)=\"setToday()\" *ngIf=\"showTodayButton\" size=\"sm\" type=\"primary\" block=\"'true'\">\r\n {{getTodayName()}}\r\n </ax-button>\r\n </div>\r\n</div>",
|
|
1375
1382
|
encapsulation: ViewEncapsulation.None,
|
|
1376
1383
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
1377
1384
|
}),
|
|
@@ -3008,7 +3015,7 @@ AXMenu2Component = AXMenu2Component_1 = __decorate([
|
|
|
3008
3015
|
</div>
|
|
3009
3016
|
`,
|
|
3010
3017
|
encapsulation: ViewEncapsulation.None,
|
|
3011
|
-
styles: [".ax.ax-menu{display:flex}.ax.ax-menu.ax-menu-vertical[data-level=\"0\"]{display:flex;flex-direction:row}.ax.ax-menu.ax-menu-vertical:not([data-level=\"0\"]){display:flex;transition:opacity .3s;min-width:12em;box-shadow:0 1px 7px 0 var(--ax-border-color);background:#fff;flex-direction:column}.ax.ax-menu.ax-menu-vertical .ax-menu-item{display:flex;white-space:nowrap;cursor:pointer;padding:0 10px;font-weight:400;font-size:1rem;line-height:40px;text-decoration:none;align-items:center}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:first-child{-webkit-margin-end:var(--ax-size-md);margin-inline-end:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:last-child{-webkit-margin-start:var(--ax-size-md);margin-inline-start:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled{color:var(--ax-gray-color)!important;background-color:var(--ax-gray-trans-light-color)!important;cursor:not-allowed!important}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled .icon{color:var(--ax-gray-dark-color)!important}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled:hover{background:var(--ax-light-light-color)!important;border-color:var(--ax-light-light-color)!important;color:var(--ax-gray-dark-color)!important;cursor:not-allowed!important}"]
|
|
3018
|
+
styles: [".ax.ax-menu{display:flex}.ax.ax-menu.ax-menu-vertical[data-level=\"0\"]{display:flex;flex-direction:row}.ax.ax-menu.ax-menu-vertical:not([data-level=\"0\"]){display:flex;transition:opacity .3s;min-width:12em;box-shadow:0 1px 7px 0 var(--ax-border-color);background:#fff;flex-direction:column}.ax.ax-menu.ax-menu-vertical .ax-menu-item{display:flex;white-space:nowrap;cursor:pointer;padding:0 10px;font-weight:400;font-size:1rem;line-height:40px;text-decoration:none;align-items:center}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:first-child{-webkit-margin-end:var(--ax-size-md);margin-inline-end:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item .icon:last-child{-webkit-margin-start:var(--ax-size-md);margin-inline-start:var(--ax-size-md)}.ax.ax-menu.ax-menu-vertical .ax-menu-item span{flex:1}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled{color:var(--ax-gray-color)!important;background-color:var(--ax-gray-trans-light-color)!important;cursor:not-allowed!important}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled .icon{color:var(--ax-gray-dark-color)!important}.ax.ax-menu.ax-menu-vertical .ax-menu-item.disabled:hover{background:var(--ax-light-light-color)!important;border-color:var(--ax-light-light-color)!important;color:var(--ax-gray-dark-color)!important;cursor:not-allowed!important}"]
|
|
3012
3019
|
}),
|
|
3013
3020
|
__metadata("design:paramtypes", [Overlay,
|
|
3014
3021
|
ViewContainerRef,
|
|
@@ -3173,10 +3180,7 @@ let AXCheckBoxComponent = class AXCheckBoxComponent extends AXBaseComponent {
|
|
|
3173
3180
|
}
|
|
3174
3181
|
handleClick(e) {
|
|
3175
3182
|
if (!this.disabled && !this.readonly) {
|
|
3176
|
-
e.preventDefault();
|
|
3177
|
-
e.stopPropagation();
|
|
3178
3183
|
//TODO: check intermddiate;
|
|
3179
|
-
this.value = !this.value;
|
|
3180
3184
|
this.onClick.emit({
|
|
3181
3185
|
component: this,
|
|
3182
3186
|
htmlElement: this.ref.nativeElement,
|
|
@@ -3238,7 +3242,7 @@ __decorate([
|
|
|
3238
3242
|
AXCheckBoxComponent = __decorate([
|
|
3239
3243
|
Component({
|
|
3240
3244
|
selector: 'ax-check-box',
|
|
3241
|
-
template: "<label class=\"ax checkbox {{size}}\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\"\r\n (click)=\"handleClick($event)\">\r\n {{ label }}\r\n <input #input type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [checked]=\"value\"\r\n [disabled]=\"disabled || readonly\" />\r\n <span class=\"checkmark\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\"></span>\r\n\r\n</label>",
|
|
3245
|
+
template: "<!-- <label class=\"ax checkbox {{size}}\" for=\"{{uid}}\" [ngClass]=\"{ 'disabled': disabled, 'readonly': readonly }\"\r\n (click)=\"handleClick($event)\">\r\n {{ label }}\r\n <input #input type=\"checkbox\" id=\"{{uid}}\" [readonly]=\"readonly\" [checked]=\"value\"\r\n [disabled]=\"disabled || readonly\" />\r\n <span class=\"checkmark\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\"></span>\r\n\r\n</label> -->\r\n\r\n<label for=\"{{uid}}\" class=\"ax-checkbox-container\" (click)=\"handleClick($event)\">\r\n <input #input type=\"checkbox\" class=\"ax-checkbox\" [ngClass]=\"{'indeterminate': indeterminate && value == null}\"\r\n id=\"{{uid}}\" [readonly]=\"readonly\" [checked]=\"value\" [(ngModel)]=\"value\" [disabled]=\"disabled || readonly\" />\r\n <span>{{ label ? label : ' ' }}</span>\r\n</label>",
|
|
3242
3246
|
encapsulation: ViewEncapsulation.None,
|
|
3243
3247
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
3244
3248
|
}),
|
|
@@ -4210,9 +4214,9 @@ __decorate([
|
|
|
4210
4214
|
], AXToastMessageComponent.prototype, "type", void 0);
|
|
4211
4215
|
AXToastMessageComponent = __decorate([
|
|
4212
4216
|
Component({
|
|
4213
|
-
template: "<div class=\"toast-container\">\r\n
|
|
4217
|
+
template: "<div class=\"toast-container\">\r\n <header *ngIf=\"title\" class=\"ax toast {{ style }}\">\r\n <div>\r\n <i class=\"{{icon}}\"></i> {{ title }}\r\n </div>\r\n <div *ngIf=\"closeable\" (click)=\"close()\" class=\"toast-close\">\r\n <i class=\"far fa-times-circle\"></i>\r\n </div>\r\n </header>\r\n <div class=\"content ax toast {{ style }}\">\r\n {{ message }}\r\n <div *ngIf=\"!title && closeable\" (click)=\"close()\" class=\"toast-close\">\r\n <i class=\"far fa-times-circle\"></i>\r\n </div>\r\n <div class=\"toast-progress\" [style.animation-duration.ms]=\"timeOut\"></div>\r\n </div>\r\n</div>",
|
|
4214
4218
|
encapsulation: ViewEncapsulation.None,
|
|
4215
|
-
styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8em 0;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);animation:.3s cubic-bezier(.25,.46,.45,.94) both slide-in-bottom;-webkit-animation:.3s cubic-bezier(.25,.46,.45,.94) both slide-in-bottom}.toast-container header{display:flex;justify-content:space-between;padding:.8em}.toast-container .content{padding:.8em;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer}.toast-container .toast-progress{position:absolute;background:rgba(0,0,0,.5);width:100%;bottom:0;left:0;padding:.15em 0;
|
|
4219
|
+
styles: [".rtl .toast-progress{right:0;left:inherit!important}.toast-container{overflow:hidden;margin:.8em 0;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);animation:.3s cubic-bezier(.25,.46,.45,.94) both slide-in-bottom;-webkit-animation:.3s cubic-bezier(.25,.46,.45,.94) both slide-in-bottom}.toast-container header{display:flex;justify-content:space-between;padding:.8em}.toast-container .content{padding:.8em;display:flex;align-items:center;justify-content:space-between}.toast-container .toast-close{cursor:pointer}.toast-container .toast-progress{position:absolute;background:rgba(0,0,0,.5);width:100%;bottom:0;left:0;padding:.15em 0;-webkit-animation-duration:4s;animation-duration:4s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:progressBar;animation-name:progressBar}@-webkit-keyframes progressBar{0%{width:100%}100%{width:0%}}@keyframes progressBar{0%{width:100%}100%{width:0%}}@-webkit-keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes slide-in-top{0%{transform:translateY(-1000px);opacity:0}100%{transform:translateY(0);opacity:1}}@-webkit-keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{transform:translateY(1000px);opacity:0}100%{transform:translateY(0);opacity:1}}"]
|
|
4216
4220
|
}),
|
|
4217
4221
|
__metadata("design:paramtypes", [ElementRef])
|
|
4218
4222
|
], AXToastMessageComponent);
|
|
@@ -5719,7 +5723,7 @@ let AXFormGroupComponent = class AXFormGroupComponent extends AXBaseComponent {
|
|
|
5719
5723
|
var _a, _b, _c;
|
|
5720
5724
|
this.required = (_c = (_b = (_a = this.component) === null || _a === void 0 ? void 0 : _a.validation) === null || _b === void 0 ? void 0 : _b.rules) === null || _c === void 0 ? void 0 : _c.some(c => c.type === 'required');
|
|
5721
5725
|
if (this.required) {
|
|
5722
|
-
this.div.nativeElement.classList.add('required');
|
|
5726
|
+
this.div.nativeElement.classList.add('required-state');
|
|
5723
5727
|
}
|
|
5724
5728
|
}
|
|
5725
5729
|
};
|
|
@@ -5741,7 +5745,7 @@ __decorate([
|
|
|
5741
5745
|
AXFormGroupComponent = __decorate([
|
|
5742
5746
|
Component({
|
|
5743
5747
|
selector: 'ax-form-group',
|
|
5744
|
-
template: "<div class=\"ax form-group {{size}}\">\r\n <ng-content select=\"ax-label\"></ng-content>\r\n <div #div class=\"ax form-item\" [ngClass]=\"{'required': required}\">\r\n <div class=\"ax buttons start-buttons\" #startButtons>\r\n <ng-content select=\"ax-button[start]\"></ng-content>\r\n </div>\r\n <div class=\"content\" #content>\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"ax buttons end-buttons\" #endButtons>\r\n <ng-content select=\"ax-button[end]\"></ng-content>\r\n <ng-content select=\"ax-button\"></ng-content>\r\n </div>\r\n </div>\r\n</div>",
|
|
5748
|
+
template: "<div class=\"ax form-group {{size}}\">\r\n <ng-content select=\"ax-label\"></ng-content>\r\n <div #div class=\"ax form-item\" [ngClass]=\"{'required-state': required}\">\r\n <div class=\"ax buttons start-buttons\" #startButtons>\r\n <ng-content select=\"ax-button[start]\"></ng-content>\r\n </div>\r\n <div class=\"content\" #content>\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"ax buttons end-buttons\" #endButtons>\r\n <ng-content select=\"ax-button[end]\"></ng-content>\r\n <ng-content select=\"ax-button\"></ng-content>\r\n </div>\r\n </div>\r\n</div>",
|
|
5745
5749
|
encapsulation: ViewEncapsulation.None,
|
|
5746
5750
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
5747
5751
|
host: { style: 'display: contents;' }
|
|
@@ -7731,6 +7735,7 @@ let AXSelectBoxComponent = AXSelectBoxComponent_1 = class AXSelectBoxComponent e
|
|
|
7731
7735
|
this.showCheckBox = true;
|
|
7732
7736
|
this.readonly = false;
|
|
7733
7737
|
this.rtl = AXConfig.get('layout.rtl');
|
|
7738
|
+
this.disabled = false;
|
|
7734
7739
|
this.size = 'md';
|
|
7735
7740
|
this.allowNull = true;
|
|
7736
7741
|
this.textAlign = null;
|
|
@@ -8179,6 +8184,7 @@ let AXSelectBoxComponent = AXSelectBoxComponent_1 = class AXSelectBoxComponent e
|
|
|
8179
8184
|
}
|
|
8180
8185
|
onFocusTextBox(e) { }
|
|
8181
8186
|
onTextBoxClick(e) {
|
|
8187
|
+
debugger;
|
|
8182
8188
|
if (this.disabled == false && this.readonly == false) {
|
|
8183
8189
|
this.dropdown.open();
|
|
8184
8190
|
}
|
|
@@ -8215,6 +8221,7 @@ let AXSelectBoxComponent = AXSelectBoxComponent_1 = class AXSelectBoxComponent e
|
|
|
8215
8221
|
this.serchBox.focus();
|
|
8216
8222
|
}
|
|
8217
8223
|
}, 0);
|
|
8224
|
+
e.stopPropagation();
|
|
8218
8225
|
}
|
|
8219
8226
|
handleKeyEventSearch(e) {
|
|
8220
8227
|
var _a;
|
|
@@ -8687,7 +8694,7 @@ __decorate([
|
|
|
8687
8694
|
AXSelectBoxComponent = AXSelectBoxComponent_1 = __decorate([
|
|
8688
8695
|
Component({
|
|
8689
8696
|
selector: 'ax-select-box',
|
|
8690
|
-
template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\"
|
|
8697
|
+
template: "<ax-drop-down [size]=\"size\" [rtl]=\"rtl\" [showDropDownButton]=\"showDropDownButton\" [disabled]=\"disabled\" [readonly]=\"readonly\" #d (dropdownToggle)=\"dropdownToggle($event)\">\r\n <ng-container start>\r\n <ng-content select=\"[start]\">\r\n </ng-content>\r\n </ng-container>\r\n <ng-container header>\r\n <div class=\"ax chips-container\" [horizontalScroll]=\"40\">\r\n <div class=\"chips\" [class.chips-blank]=\"mode === 'single'\" [title]=\"item[textField]\" *ngFor=\"let item of selectedItems\">\r\n <span class=\"chips-text\">\r\n {{item[textField]}}\r\n </span>\r\n <span class=\"close-icon\" (click)=\"handleItemRemoveClick(item)\" *ngIf=\"(readonly!=true || itemRemove ==true)&& disabled!=true && (allowNull==true || (selectedItems.length > 1))\">\r\n <i class=\"far fa-times-circle close\"></i>\r\n </span>\r\n </div>\r\n <div class=\"search-wrapper\" (click)=\"onTextBoxClick($event)\">\r\n <ax-text-box #textBoxSelectBox [textAlign]=\"textAlign\" [placeholder]=\"selectedItems.length == 0 ? placeholder : ''\" [readonly]=\"readonly\" [disabled]=\"disabled\" (onkey)=\"handleKeyEvent($event)\" [size]=\"size\" (onFocus)=\"onFocusTextBox($event)\">\r\n </ax-text-box>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container end>\r\n <ng-content select=\"[end]\">\r\n </ng-content>\r\n </ng-container>\r\n\r\n <ng-container panel>\r\n <div *ngIf=\"allowSearch\" class=\"search-wrapper\" style=\"padding: 0.7em;\">\r\n <ax-search-box #serchBox [(value)]=\"text\" (onkey)=\"handleKeyEventSearch($event)\" (textChanged)=\"textChanged($event)\" (onButtonClick)=\"textChanged($event)\">\r\n </ax-search-box>\r\n </div>\r\n <div class=\"ax list-container\">\r\n <div #listContainer style=\"max-height: 300px;overflow-y: auto;width: 100%;\" (scroll)=\"scrolled($event)\">\r\n <ng-container *ngIf=\"getItems().length>0; then thenTemplate; else elseTemplate\"></ng-container>\r\n <ng-template #thenTemplate>\r\n <div class=\"list-item\" *ngFor=\"let item of getItems();let i = index\" [class.focused]=\"i==currentfocusedIndex\" [class.selected]=\"isItemSelected(item)\" (click)=\"handleItemClick($event,item)\">\r\n <div style=\"display: flex;\">\r\n <ax-check-box *ngIf=\"showCheckBox\" [size]=\"size\" [value]=\"isItemSelected(item)\" [disabled]=\"!allowNull && selectedItems.length === 1 && isItemSelected(item)\">\r\n </ax-check-box>\r\n <ng-container *ngIf=\"rowTemplate; else elseTemplate\">\r\n <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\" [title]=\"item[textField]\" [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n <ng-container *ngTemplateOutlet=\"rowTemplate; context:{ $implicit: item }\">\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n <div style=\"white-space: nowrap;text-overflow: ellipsis;overflow: hidden;\" [title]=\"item[textField]\" [ngStyle]=\"(showCheckBox) ? {'padding-inline-start': '0.5rem'}:''\">\r\n {{ item[textField] }}\r\n </div>\r\n </ng-template>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </ng-template>\r\n <div *ngIf=\"showLoading\" class=\"ax-pad-sm\" style=\"text-align: center;\">\r\n <i class=\"far fa-spinner-third fa-pulse fa-2x\" style=\"color: var(--ax-primary-color);\"></i>\r\n\r\n </div>\r\n <!-- <ax-loading-indicator ></ax-loading-indicator> -->\r\n <ng-template #elseTemplate>\r\n <ng-container *ngIf=\"showLoading == true; then searchTemplate else noDataTemplate\"></ng-container>\r\n <ng-template #searchTemplate>\r\n <div class=\"list-item\">\r\n {{'common.searching' | trans}}\r\n </div>\r\n </ng-template>\r\n <ng-template #noDataTemplate>\r\n <div class=\"list-item\">\r\n {{'common.noDataFound' | trans}}\r\n </div>\r\n </ng-template>\r\n\r\n </ng-template>\r\n\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n</ax-drop-down>",
|
|
8691
8698
|
encapsulation: ViewEncapsulation.None,
|
|
8692
8699
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
8693
8700
|
host: { style: 'display: contents;' },
|
|
@@ -12708,6 +12715,7 @@ let AXTreeViewComponent = class AXTreeViewComponent extends AXBaseComponent {
|
|
|
12708
12715
|
this._contentDataSource.fetch(null);
|
|
12709
12716
|
}
|
|
12710
12717
|
internalSelectItem(item, userChange = true) {
|
|
12718
|
+
debugger;
|
|
12711
12719
|
if (item[this.hasChildField] === false || this.selectionMode === 'single') {
|
|
12712
12720
|
item.select = !item.select;
|
|
12713
12721
|
if (item.parentNode && this.selectionMode !== 'single') {
|
|
@@ -12878,6 +12886,7 @@ let AXTreeViewComponent = class AXTreeViewComponent extends AXBaseComponent {
|
|
|
12878
12886
|
}
|
|
12879
12887
|
}
|
|
12880
12888
|
handleOnNodeClick(e, item, flag = false) {
|
|
12889
|
+
// this.internalSelectItem(item);
|
|
12881
12890
|
this.onItemClick.emit({
|
|
12882
12891
|
component: this,
|
|
12883
12892
|
htmlEvent: e,
|
|
@@ -12928,6 +12937,7 @@ let AXTreeViewComponent = class AXTreeViewComponent extends AXBaseComponent {
|
|
|
12928
12937
|
this.hideLoading(null);
|
|
12929
12938
|
this.list = _data.data.result;
|
|
12930
12939
|
this.list.forEach((el) => {
|
|
12940
|
+
el.disabledCheckBox = false;
|
|
12931
12941
|
el.select = false;
|
|
12932
12942
|
if (this.selectionLevel == 'nodes' && el[this.hasChildField] == true) {
|
|
12933
12943
|
el.disabledCheckBox = true;
|
|
@@ -12972,6 +12982,7 @@ let AXTreeViewComponent = class AXTreeViewComponent extends AXBaseComponent {
|
|
|
12972
12982
|
if (this.list.length !== 0) {
|
|
12973
12983
|
if (this.itemRow[this.childField] && this.itemRow[this.childField].length > 0) {
|
|
12974
12984
|
result.forEach((el) => {
|
|
12985
|
+
el.disabledCheckBox = false;
|
|
12975
12986
|
this.itemRow[this.childField][this.itemRow[this.childField].length] = el;
|
|
12976
12987
|
});
|
|
12977
12988
|
}
|
|
@@ -13330,7 +13341,7 @@ __decorate([
|
|
|
13330
13341
|
AXTreeViewComponent = __decorate([
|
|
13331
13342
|
Component({
|
|
13332
13343
|
selector: 'ax-tree-view',
|
|
13333
|
-
template: "<ul class=\"ax treeview {{size}}\">\r\n
|
|
13344
|
+
template: "<ul class=\"ax treeview {{size}}\">\r\n <ng-template #recursiveList let-list>\r\n <ng-container *ngFor=\"let item of list\">\r\n <li class=\"active {{item[hasChildField] ? '':'node'}}\" [class.bordered]=\"bordered\" [class.selected]=\"item.select\" [draggable]=\"allowDrag\" (dragstart)=\"onDragStart($event, item)\" [attr.data-id]=\"item[keyField]\" (dragleave)=\"onDragEnd($event,item)\" (dragend)=drop($event)>\r\n <div axContextMenu [contextDataItem]=\"item\" [contextMenuItems]=\"contextMenuItems\" [contextMenu]=\"menu\" (onContextMenuItemClick)=\"handleOnContextMenuItem($event)\" style=\"display: flex; cursor: pointer;align-items: center;\">\r\n <div class=\"start-side\">\r\n <div *ngIf=\"item[hasChildField]\" class=\"collapse-icon\" (click)=\"handleOnNodeClick($event,item,true)\">\r\n <i class=\"fal\" [ngClass]=\"{'fa-minus': !!item.toggle , 'fa-plus': !item.toggle , 'fa-spinner fa-spin':item.loading }\"></i>\r\n </div>\r\n\r\n <ax-check-box *ngIf=\"showSelectBox\" [disabled]=\"item.disabledCheckBox\" [size]=\"size\" [indeterminate]=\"true\" [value]=\"item.select\" (onClick)=\"internalSelectItem(item)\">\r\n </ax-check-box>\r\n\r\n\r\n </div>\r\n <div class=\"text-list\" (click)=\"handleOnNodeClick($event,item)\" (dblclick)=\"itemdbClick($event,item)\">\r\n <ng-container *ngIf=\"nodeTemplate; else elseTemplate\">\r\n <ng-container *ngTemplateOutlet=\"nodeTemplate; context:{ $implicit: item }\"></ng-container>\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n {{item.title}}\r\n </ng-template>\r\n </div>\r\n </div>\r\n <ul *ngIf=\"item.loading\">\r\n <i class=\"far \"></i>\r\n </ul>\r\n <ul class=\"child\" *ngIf=\"item.toggle\" style=\"background-color: white !important;\">\r\n <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: item.childeren }\">\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </ng-container>\r\n </ng-template>\r\n <ng-container *ngTemplateOutlet=\"recursiveList; context:{ $implicit: list }\"></ng-container>\r\n</ul>\r\n\r\n<ax-context-menu #menu></ax-context-menu>",
|
|
13334
13345
|
encapsulation: ViewEncapsulation.None
|
|
13335
13346
|
}),
|
|
13336
13347
|
__metadata("design:paramtypes", [ElementRef])
|