@colijnit/corecomponents_v12 12.0.18 → 12.0.21
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/bundles/colijnit-corecomponents_v12.umd.js +283 -81
- package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
- package/colijnit-corecomponents_v12.d.ts +14 -16
- package/colijnit-corecomponents_v12.metadata.json +1 -1
- package/esm2015/colijnit-corecomponents_v12.js +15 -17
- package/esm2015/lib/components/base/base-input.component.js +181 -36
- package/esm2015/lib/components/carousel-3d/carousel-3d.component.js +12 -6
- package/esm2015/lib/components/co-dialog/co-dialog.module.js +1 -3
- package/esm2015/lib/components/collapsible/collapsible.component.js +10 -2
- package/esm2015/lib/components/drop-down-list/drop-down-list.component.js +1 -1
- package/esm2015/lib/components/drop-down-list/drop-down.module.js +6 -6
- package/esm2015/lib/components/form/form.component.js +18 -18
- package/esm2015/lib/components/input-checkbox/input-checkbox.component.js +1 -1
- package/esm2015/lib/components/input-checkbox-multi-select/input-checkbox-multi-select.component.js +1 -1
- package/esm2015/lib/components/input-date-picker/input-date-picker.component.js +1 -1
- package/esm2015/lib/components/input-radio-button/input-radio-button.component.js +1 -1
- package/esm2015/lib/components/input-text/input-text.component.js +15 -4
- package/esm2015/lib/components/input-text/input-text.module.js +1 -1
- package/esm2015/lib/components/input-textarea/input-textarea.component.js +8 -8
- package/esm2015/lib/components/multi-select-list/multi-select-list.module.js +6 -6
- package/esm2015/lib/components/validation-error/validation-error.component.js +13 -1
- package/esm2015/lib/components/validation-error/validation-error.module.js +4 -2
- package/esm2015/public-api.js +3 -1
- package/fesm2015/colijnit-corecomponents_v12.js +246 -69
- package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
- package/lib/components/base/base-input.component.d.ts +23 -5
- package/lib/components/co-kanban/style/_layout.scss +4 -0
- package/lib/components/co-kanban/style/_material-definition.scss +2 -0
- package/lib/components/drop-down-list/style/_layout.scss +2 -1
- package/lib/components/drop-down-list/style/_material-definition.scss +2 -0
- package/lib/components/form/form.component.d.ts +2 -3
- package/lib/components/input-checkbox/style/_material-definition.scss +1 -2
- package/lib/components/input-checkbox/style/material.scss +2 -0
- package/lib/components/input-checkbox-multi-select/style/_layout.scss +5 -1
- package/lib/components/input-checkbox-multi-select/style/_material-definition.scss +2 -0
- package/lib/components/input-combo-box/style/_layout.scss +4 -2
- package/lib/components/input-combo-box/style/_material-definition.scss +2 -0
- package/lib/components/input-date-picker/style/_layout.scss +2 -1
- package/lib/components/input-date-picker/style/_material-definition.scss +4 -0
- package/lib/components/input-listbox/style/_layout.scss +0 -1
- package/lib/components/input-listbox/style/_material-definition.scss +2 -2
- package/lib/components/input-text/style/_layout.scss +32 -0
- package/lib/components/input-text/style/_material-definition.scss +3 -0
- package/lib/components/input-text/style/_theme.scss +21 -1
- package/lib/components/input-textarea/style/_theme.scss +1 -0
- package/lib/components/multi-select-list/style/_layout.scss +2 -1
- package/lib/components/multi-select-list/style/_material-definition.scss +2 -0
- package/lib/components/multi-select-list/style/_theme.scss +5 -1
- package/lib/components/validation-error/style/_layout.scss +10 -2
- package/lib/components/validation-error/validation-error.component.d.ts +6 -0
- package/lib/style/_input.mixins.scss +4 -3
- package/lib/style/_variables.scss +41 -1
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
|
@@ -7,7 +7,6 @@ import { auditTime } from 'rxjs/operators';
|
|
|
7
7
|
import { __decorate, __awaiter } from 'tslib';
|
|
8
8
|
import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
|
|
9
9
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
10
|
-
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
11
10
|
import { DialogModule } from '@syncfusion/ej2-angular-popups';
|
|
12
11
|
import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
|
|
13
12
|
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService, TimelineViewsService, TimelineMonthService, ScheduleModule } from '@syncfusion/ej2-angular-schedule';
|
|
@@ -2235,7 +2234,6 @@ CoDialogModule.decorators = [
|
|
|
2235
2234
|
{ type: NgModule, args: [{
|
|
2236
2235
|
imports: [
|
|
2237
2236
|
CommonModule,
|
|
2238
|
-
BrowserAnimationsModule,
|
|
2239
2237
|
IconModule
|
|
2240
2238
|
],
|
|
2241
2239
|
declarations: [CoDialogComponent],
|
|
@@ -2649,10 +2647,17 @@ CollapsibleComponent.decorators = [
|
|
|
2649
2647
|
<co-icon class="expand-icon" [iconData]="iconData"></co-icon>
|
|
2650
2648
|
</div>
|
|
2651
2649
|
</div>
|
|
2652
|
-
<div class="collapsible-content" *ngIf="expanded">
|
|
2650
|
+
<div class="collapsible-content" *ngIf="expanded" @showHideContent>
|
|
2653
2651
|
<ng-content></ng-content>
|
|
2654
2652
|
</div>
|
|
2655
2653
|
`,
|
|
2654
|
+
animations: [
|
|
2655
|
+
trigger('showHideContent', [
|
|
2656
|
+
state('*', style({ height: '*' })),
|
|
2657
|
+
state('void', style({ height: 0 })),
|
|
2658
|
+
transition('void <=> *', animate(200))
|
|
2659
|
+
]),
|
|
2660
|
+
],
|
|
2656
2661
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2657
2662
|
encapsulation: ViewEncapsulation.None
|
|
2658
2663
|
},] }
|
|
@@ -2771,6 +2776,10 @@ function maxStringLengthValidator(length) {
|
|
|
2771
2776
|
}
|
|
2772
2777
|
|
|
2773
2778
|
class ValidationErrorComponent {
|
|
2779
|
+
constructor(icons) {
|
|
2780
|
+
this.icons = icons;
|
|
2781
|
+
this.Icons = CoreComponentsIcon;
|
|
2782
|
+
}
|
|
2774
2783
|
showClass() {
|
|
2775
2784
|
return true;
|
|
2776
2785
|
}
|
|
@@ -2780,6 +2789,7 @@ ValidationErrorComponent.decorators = [
|
|
|
2780
2789
|
selector: "co-validation-error",
|
|
2781
2790
|
template: `
|
|
2782
2791
|
<div class="validation-error-content">
|
|
2792
|
+
<co-icon [iconData]="icons.getIcon(Icons.InformationRoundOpen)"></co-icon>
|
|
2783
2793
|
<div class="validation-error-message" [textContent]="error"></div>
|
|
2784
2794
|
</div>
|
|
2785
2795
|
`,
|
|
@@ -2787,8 +2797,13 @@ ValidationErrorComponent.decorators = [
|
|
|
2787
2797
|
encapsulation: ViewEncapsulation.None
|
|
2788
2798
|
},] }
|
|
2789
2799
|
];
|
|
2800
|
+
ValidationErrorComponent.ctorParameters = () => [
|
|
2801
|
+
{ type: IconCacheService }
|
|
2802
|
+
];
|
|
2790
2803
|
ValidationErrorComponent.propDecorators = {
|
|
2791
2804
|
error: [{ type: Input }],
|
|
2805
|
+
top: [{ type: HostBinding, args: ['style.top.px',] }, { type: Input }],
|
|
2806
|
+
left: [{ type: HostBinding, args: ['style.left.px',] }, { type: Input }],
|
|
2792
2807
|
showClass: [{ type: HostBinding, args: ['class.co-validation-error',] }]
|
|
2793
2808
|
};
|
|
2794
2809
|
|
|
@@ -2803,10 +2818,13 @@ class BaseInputComponent {
|
|
|
2803
2818
|
this.formUserChangeListener = formUserChangeListener;
|
|
2804
2819
|
this.ngZoneWrapper = ngZoneWrapper;
|
|
2805
2820
|
this.elementRef = elementRef;
|
|
2821
|
+
this.showSaveCancel = false;
|
|
2806
2822
|
this.noValidation = false;
|
|
2807
2823
|
this.forceRequired = false; // a force outside of [cfgName]'s influence
|
|
2808
2824
|
// Goal: ability to emulate the red background of input fields (form-submitted invalid state)
|
|
2809
2825
|
this.redErrorBackground = false;
|
|
2826
|
+
// @Output()
|
|
2827
|
+
// public commit: EventEmitter<any> = new EventEmitter<any>();
|
|
2810
2828
|
this.nativeBlur = new EventEmitter();
|
|
2811
2829
|
this.blur = new EventEmitter();
|
|
2812
2830
|
// emits when the enter button on keyboard was pressed while this form input had focussed
|
|
@@ -2825,12 +2843,19 @@ class BaseInputComponent {
|
|
|
2825
2843
|
this.fullWidth = false;
|
|
2826
2844
|
this.excludeUserModelChange = false;
|
|
2827
2845
|
this.noFormGroupControl = false;
|
|
2846
|
+
this.keepFocus = false;
|
|
2847
|
+
this.canSaveOrCancel = false;
|
|
2828
2848
|
this._markedAsUserTouched = false;
|
|
2829
2849
|
this._destroyed = false;
|
|
2830
2850
|
this._hasOnPushCdStrategy = false;
|
|
2851
|
+
this._initialModelSet = false;
|
|
2831
2852
|
this._forceReadonly = undefined;
|
|
2832
2853
|
this._validators = [];
|
|
2833
2854
|
this._asyncValidators = [];
|
|
2855
|
+
// descendents should override this
|
|
2856
|
+
this.commit = (model) => __awaiter(this, void 0, void 0, function* () {
|
|
2857
|
+
return Promise.resolve(true);
|
|
2858
|
+
});
|
|
2834
2859
|
BaseInputComponent.BaseFormInputComponentIndex++;
|
|
2835
2860
|
this.name = BaseInputComponent.BaseFormInputComponentIndex.toString();
|
|
2836
2861
|
if (this.formUserChangeListener) {
|
|
@@ -2848,7 +2873,12 @@ class BaseInputComponent {
|
|
|
2848
2873
|
}
|
|
2849
2874
|
}
|
|
2850
2875
|
set model(value) {
|
|
2876
|
+
if (!this._initialModelSet) {
|
|
2877
|
+
this._initialModel = this._model;
|
|
2878
|
+
this._initialModelSet = true;
|
|
2879
|
+
}
|
|
2851
2880
|
this._model = value;
|
|
2881
|
+
this.canSaveOrCancel = this._model !== this._initialModel;
|
|
2852
2882
|
this._clearErrorComponent();
|
|
2853
2883
|
}
|
|
2854
2884
|
get model() {
|
|
@@ -2989,6 +3019,30 @@ class BaseInputComponent {
|
|
|
2989
3019
|
get validationDisabled() {
|
|
2990
3020
|
return this.readonly || this.disabled || this.noValidation;
|
|
2991
3021
|
}
|
|
3022
|
+
onClick(event) {
|
|
3023
|
+
if (this.canChange && !this.noClickFocus) {
|
|
3024
|
+
this.requestFocus();
|
|
3025
|
+
if (!this.excludeUserModelChange) {
|
|
3026
|
+
this.markAsUserTouched();
|
|
3027
|
+
}
|
|
3028
|
+
}
|
|
3029
|
+
}
|
|
3030
|
+
onFocusIn() {
|
|
3031
|
+
if (!this.excludeUserModelChange) {
|
|
3032
|
+
this.markAsUserTouched();
|
|
3033
|
+
}
|
|
3034
|
+
}
|
|
3035
|
+
handleDocumentScroll() {
|
|
3036
|
+
this._positionValidationError();
|
|
3037
|
+
}
|
|
3038
|
+
handleWindowResize() {
|
|
3039
|
+
this._positionValidationError();
|
|
3040
|
+
}
|
|
3041
|
+
handleKeyDown(event) {
|
|
3042
|
+
if (this.showSaveCancel && this.canSaveOrCancel) {
|
|
3043
|
+
this._handleKeyDown(event);
|
|
3044
|
+
}
|
|
3045
|
+
}
|
|
2992
3046
|
get canChange() {
|
|
2993
3047
|
return !this.readonly && !this.disabled;
|
|
2994
3048
|
}
|
|
@@ -3001,25 +3055,13 @@ class BaseInputComponent {
|
|
|
3001
3055
|
get isDestroyed() {
|
|
3002
3056
|
return this._destroyed;
|
|
3003
3057
|
}
|
|
3004
|
-
showValidationError(error) {
|
|
3005
|
-
if (this.validationErrorContainer) {
|
|
3006
|
-
if (this._errorValidationComponent) {
|
|
3007
|
-
this._clearErrorComponent();
|
|
3008
|
-
}
|
|
3009
|
-
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ValidationErrorComponent);
|
|
3010
|
-
this._errorValidationComponent = this.validationErrorContainer.createComponent(componentFactory);
|
|
3011
|
-
this._errorValidationComponent.instance.error = error;
|
|
3012
|
-
}
|
|
3013
|
-
}
|
|
3014
3058
|
ngOnInit() {
|
|
3015
3059
|
this._modelChangeSub = this.modelChange.subscribe((val) => {
|
|
3016
3060
|
this.model = val;
|
|
3017
3061
|
});
|
|
3018
|
-
// if (this.speechInput) {
|
|
3019
|
-
// this._subscribeToSpeechInput();
|
|
3020
|
-
// }
|
|
3021
3062
|
}
|
|
3022
3063
|
ngAfterViewInit() {
|
|
3064
|
+
this._prepareInput();
|
|
3023
3065
|
this._updateControlValidatorsAndOwnFlags();
|
|
3024
3066
|
this._addOrRemoveSelfFromForm();
|
|
3025
3067
|
if (this.formComponent) {
|
|
@@ -3033,6 +3075,10 @@ class BaseInputComponent {
|
|
|
3033
3075
|
}
|
|
3034
3076
|
}
|
|
3035
3077
|
ngOnDestroy() {
|
|
3078
|
+
if (this.input) {
|
|
3079
|
+
this.input.removeEventListener('blur', (event) => this.doBlur(event));
|
|
3080
|
+
this.input.removeEventListener('focus', (event) => this.doFocus(event));
|
|
3081
|
+
}
|
|
3036
3082
|
this._destroyed = true;
|
|
3037
3083
|
this._clearErrorComponent();
|
|
3038
3084
|
// if (this.tooltipManager && this.elementRef) {
|
|
@@ -3056,7 +3102,33 @@ class BaseInputComponent {
|
|
|
3056
3102
|
// this._removeSelfFromForm();
|
|
3057
3103
|
this.elementRef = undefined;
|
|
3058
3104
|
this.changeDetector = undefined;
|
|
3059
|
-
|
|
3105
|
+
this.input = undefined;
|
|
3106
|
+
}
|
|
3107
|
+
commitClick(event) {
|
|
3108
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
3109
|
+
this.keepFocus = true;
|
|
3110
|
+
yield this.commit(this.model);
|
|
3111
|
+
this.keepFocus = false;
|
|
3112
|
+
this.doBlur(event);
|
|
3113
|
+
});
|
|
3114
|
+
}
|
|
3115
|
+
cancelClick(event) {
|
|
3116
|
+
this.keepFocus = true;
|
|
3117
|
+
if (this._initialModelSet) {
|
|
3118
|
+
this.model = this._initialModel;
|
|
3119
|
+
}
|
|
3120
|
+
this.keepFocus = false;
|
|
3121
|
+
}
|
|
3122
|
+
showValidationError(error) {
|
|
3123
|
+
if (this.validationErrorContainer) {
|
|
3124
|
+
if (this._errorValidationComponent) {
|
|
3125
|
+
this._clearErrorComponent();
|
|
3126
|
+
}
|
|
3127
|
+
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ValidationErrorComponent);
|
|
3128
|
+
this._errorValidationComponent = this.validationErrorContainer.createComponent(componentFactory);
|
|
3129
|
+
this._errorValidationComponent.instance.error = error;
|
|
3130
|
+
this._positionValidationError();
|
|
3131
|
+
}
|
|
3060
3132
|
}
|
|
3061
3133
|
/**
|
|
3062
3134
|
* Emits a modelChange event with given value, indicating that the model of this form input
|
|
@@ -3073,28 +3145,33 @@ class BaseInputComponent {
|
|
|
3073
3145
|
this.detectChanges();
|
|
3074
3146
|
}
|
|
3075
3147
|
}
|
|
3076
|
-
onClick(event) {
|
|
3077
|
-
if (this.canChange && !this.noClickFocus) {
|
|
3078
|
-
this.requestFocus();
|
|
3079
|
-
if (!this.excludeUserModelChange) {
|
|
3080
|
-
this.markAsUserTouched();
|
|
3081
|
-
}
|
|
3082
|
-
}
|
|
3083
|
-
}
|
|
3084
|
-
onFocusIn() {
|
|
3085
|
-
if (!this.excludeUserModelChange) {
|
|
3086
|
-
this.markAsUserTouched();
|
|
3087
|
-
}
|
|
3088
|
-
}
|
|
3089
3148
|
requestFocus() {
|
|
3090
3149
|
if (this.canChange && this.input) {
|
|
3091
3150
|
this.input.focus();
|
|
3092
3151
|
this.focused = true;
|
|
3093
3152
|
}
|
|
3094
3153
|
}
|
|
3095
|
-
|
|
3096
|
-
this.
|
|
3097
|
-
|
|
3154
|
+
doFocus(event) {
|
|
3155
|
+
if (this.disabled) {
|
|
3156
|
+
return;
|
|
3157
|
+
}
|
|
3158
|
+
this._initialModelSet = false;
|
|
3159
|
+
this.focused = true;
|
|
3160
|
+
this.canSaveOrCancel = false;
|
|
3161
|
+
this.focus.next();
|
|
3162
|
+
}
|
|
3163
|
+
doBlur(event) {
|
|
3164
|
+
setTimeout(() => {
|
|
3165
|
+
if (this.keepFocus) {
|
|
3166
|
+
if (event) {
|
|
3167
|
+
event.preventDefault;
|
|
3168
|
+
}
|
|
3169
|
+
return false;
|
|
3170
|
+
}
|
|
3171
|
+
this.focused = false;
|
|
3172
|
+
this.input.blur();
|
|
3173
|
+
this.blur.next();
|
|
3174
|
+
}, 200);
|
|
3098
3175
|
}
|
|
3099
3176
|
detectChanges() {
|
|
3100
3177
|
if (!this._destroyed) {
|
|
@@ -3146,7 +3223,7 @@ class BaseInputComponent {
|
|
|
3146
3223
|
if (notNill(this.forcedMaxLength) || maxLength === this._maxLength) {
|
|
3147
3224
|
return;
|
|
3148
3225
|
}
|
|
3149
|
-
if (maxLength
|
|
3226
|
+
if (!isNaN(maxLength)) {
|
|
3150
3227
|
this._maxLength = maxLength;
|
|
3151
3228
|
this._updateControlValidatorsAndOwnFlags();
|
|
3152
3229
|
}
|
|
@@ -3225,7 +3302,7 @@ class BaseInputComponent {
|
|
|
3225
3302
|
}
|
|
3226
3303
|
}
|
|
3227
3304
|
_setNativeMaxLength(maxlength) {
|
|
3228
|
-
if (this.input) {
|
|
3305
|
+
if (this.input && !isNaN(maxlength)) {
|
|
3229
3306
|
this.input.maxLength = maxlength;
|
|
3230
3307
|
}
|
|
3231
3308
|
}
|
|
@@ -3271,6 +3348,85 @@ class BaseInputComponent {
|
|
|
3271
3348
|
this.formComponent.addFormInput(this.myFormInputInstance ? this.myFormInputInstance : this);
|
|
3272
3349
|
}
|
|
3273
3350
|
}
|
|
3351
|
+
_prepareInput() {
|
|
3352
|
+
if (this.elementRef && this.elementRef.nativeElement) {
|
|
3353
|
+
//try to find input element
|
|
3354
|
+
this.input = this._findInputNode(this.elementRef.nativeElement.children);
|
|
3355
|
+
if (this.input) {
|
|
3356
|
+
this.input.addEventListener('blur', (event) => this.doBlur(event));
|
|
3357
|
+
this.input.addEventListener('focus', (event) => this.doFocus(event));
|
|
3358
|
+
}
|
|
3359
|
+
}
|
|
3360
|
+
}
|
|
3361
|
+
_findInputNode(nodes) {
|
|
3362
|
+
for (let i = 0; i < nodes.length; i++) {
|
|
3363
|
+
const node = nodes[i];
|
|
3364
|
+
if (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement) {
|
|
3365
|
+
return node;
|
|
3366
|
+
}
|
|
3367
|
+
else if (node.children.length > 0) {
|
|
3368
|
+
return this._findInputNode(node.children);
|
|
3369
|
+
}
|
|
3370
|
+
}
|
|
3371
|
+
}
|
|
3372
|
+
_positionValidationError() {
|
|
3373
|
+
if (this.elementRef && this.elementRef.nativeElement && this._errorValidationComponent) {
|
|
3374
|
+
const clientRect = this.elementRef.nativeElement.getBoundingClientRect();
|
|
3375
|
+
this._errorValidationComponent.instance.top = clientRect.bottom;
|
|
3376
|
+
this._errorValidationComponent.instance.left = clientRect.left;
|
|
3377
|
+
}
|
|
3378
|
+
}
|
|
3379
|
+
_handleKeyDown(event) {
|
|
3380
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
3381
|
+
switch (event.code) {
|
|
3382
|
+
case 'Enter':
|
|
3383
|
+
event.preventDefault();
|
|
3384
|
+
yield this.commitClick();
|
|
3385
|
+
return false;
|
|
3386
|
+
case 'Tab':
|
|
3387
|
+
const nextSiblingToFocus = event.shiftKey ? event.currentTarget.previousSibling : event.currentTarget.nextSibling;
|
|
3388
|
+
event.preventDefault();
|
|
3389
|
+
yield this.commitClick();
|
|
3390
|
+
if (nextSiblingToFocus) {
|
|
3391
|
+
try {
|
|
3392
|
+
this._setFocusOnNextPossibleInput(nextSiblingToFocus, event.shiftKey);
|
|
3393
|
+
}
|
|
3394
|
+
catch (e) {
|
|
3395
|
+
}
|
|
3396
|
+
}
|
|
3397
|
+
return false;
|
|
3398
|
+
case 'Escape':
|
|
3399
|
+
this.cancelClick();
|
|
3400
|
+
event.preventDefault();
|
|
3401
|
+
return false;
|
|
3402
|
+
}
|
|
3403
|
+
});
|
|
3404
|
+
}
|
|
3405
|
+
_createNewFocusEvent(element) {
|
|
3406
|
+
let eventType = "onfocusin" in element ? "focusin" : "focus", bubbles = "onfocusin" in element, focusEvent;
|
|
3407
|
+
if ("createEvent" in document) {
|
|
3408
|
+
focusEvent = document.createEvent("Event");
|
|
3409
|
+
focusEvent.initEvent(eventType, bubbles, true);
|
|
3410
|
+
}
|
|
3411
|
+
else if ("Event" in window) {
|
|
3412
|
+
focusEvent = new Event(eventType, { bubbles: bubbles, cancelable: true });
|
|
3413
|
+
}
|
|
3414
|
+
return focusEvent;
|
|
3415
|
+
}
|
|
3416
|
+
_setFocusOnNextPossibleInput(element, previous) {
|
|
3417
|
+
const elementColl = element.getElementsByTagName('input');
|
|
3418
|
+
if (elementColl && elementColl.length > 0) {
|
|
3419
|
+
const inputElement = elementColl[0];
|
|
3420
|
+
if (inputElement.disabled || inputElement.readOnly) {
|
|
3421
|
+
this._setFocusOnNextPossibleInput(previous ? element.previousSibling : element.nextSibling, previous);
|
|
3422
|
+
}
|
|
3423
|
+
else {
|
|
3424
|
+
const focusEvent = this._createNewFocusEvent(element);
|
|
3425
|
+
inputElement.focus();
|
|
3426
|
+
inputElement.dispatchEvent(focusEvent);
|
|
3427
|
+
}
|
|
3428
|
+
}
|
|
3429
|
+
}
|
|
3274
3430
|
}
|
|
3275
3431
|
BaseInputComponent.BaseFormInputComponentIndex = 0;
|
|
3276
3432
|
BaseInputComponent.HiddenClass = "hidden";
|
|
@@ -3287,6 +3443,8 @@ BaseInputComponent.ctorParameters = () => [
|
|
|
3287
3443
|
];
|
|
3288
3444
|
BaseInputComponent.propDecorators = {
|
|
3289
3445
|
validationErrorContainer: [{ type: ViewChild, args: ["validationError", { read: ViewContainerRef },] }],
|
|
3446
|
+
_ngModel: [{ type: ViewChild, args: [NgModel, { static: true },] }],
|
|
3447
|
+
showSaveCancel: [{ type: Input }],
|
|
3290
3448
|
model: [{ type: Input }],
|
|
3291
3449
|
label: [{ type: Input }],
|
|
3292
3450
|
noValidation: [{ type: Input }],
|
|
@@ -3316,7 +3474,6 @@ BaseInputComponent.propDecorators = {
|
|
|
3316
3474
|
modelChange: [{ type: Output }],
|
|
3317
3475
|
userModelChange: [{ type: Output }],
|
|
3318
3476
|
hiddenChange: [{ type: Output }],
|
|
3319
|
-
_ngModel: [{ type: ViewChild, args: [NgModel, { static: true },] }],
|
|
3320
3477
|
focused: [{ type: HostBinding, args: ["class.cc-input-focused",] }],
|
|
3321
3478
|
formInput: [{ type: HostBinding, args: ["class.form-input",] }],
|
|
3322
3479
|
customWidth: [{ type: Input }, { type: HostBinding, args: ["class.custom-width",] }],
|
|
@@ -3336,7 +3493,10 @@ BaseInputComponent.propDecorators = {
|
|
|
3336
3493
|
valid: [{ type: HostBinding, args: ["class.valid",] }],
|
|
3337
3494
|
validationDisabled: [{ type: HostBinding, args: ["class.no-validation",] }],
|
|
3338
3495
|
onClick: [{ type: HostListener, args: ["click", ["$event"],] }],
|
|
3339
|
-
onFocusIn: [{ type: HostListener, args: ["focusin",] }]
|
|
3496
|
+
onFocusIn: [{ type: HostListener, args: ["focusin",] }],
|
|
3497
|
+
handleDocumentScroll: [{ type: HostListener, args: ["document:scroll",] }],
|
|
3498
|
+
handleWindowResize: [{ type: HostListener, args: ["window:resize",] }],
|
|
3499
|
+
handleKeyDown: [{ type: HostListener, args: ["keydown", ["$event"],] }]
|
|
3340
3500
|
};
|
|
3341
3501
|
__decorate([
|
|
3342
3502
|
InputBoolean()
|
|
@@ -3567,19 +3727,20 @@ class FormComponent {
|
|
|
3567
3727
|
isValid() {
|
|
3568
3728
|
return this._init && this.formGroup.valid;
|
|
3569
3729
|
}
|
|
3570
|
-
|
|
3571
|
-
|
|
3572
|
-
|
|
3573
|
-
|
|
3574
|
-
|
|
3575
|
-
|
|
3576
|
-
|
|
3577
|
-
|
|
3578
|
-
|
|
3579
|
-
|
|
3580
|
-
|
|
3581
|
-
|
|
3582
|
-
|
|
3730
|
+
// @HostListener('keyup.enter', ['$event'])
|
|
3731
|
+
// onEnterKey(event: KeyboardEvent): void {
|
|
3732
|
+
// const target: HTMLElement = <HTMLElement>event.target;
|
|
3733
|
+
// if (['TEXTAREA', 'SELECT'].indexOf(target.tagName) !== -1) {
|
|
3734
|
+
// return;
|
|
3735
|
+
// }
|
|
3736
|
+
// if (target.isContentEditable) {
|
|
3737
|
+
// return;
|
|
3738
|
+
// }
|
|
3739
|
+
// if (target.tagName === 'BUTTON-COLIJN' && target.getAttribute('type') === 'submit') {
|
|
3740
|
+
// return;
|
|
3741
|
+
// }
|
|
3742
|
+
// this.submit();
|
|
3743
|
+
// }
|
|
3583
3744
|
reset() {
|
|
3584
3745
|
this.submitted = false;
|
|
3585
3746
|
this.formGroup.markAsUntouched();
|
|
@@ -3648,8 +3809,7 @@ FormComponent.propDecorators = {
|
|
|
3648
3809
|
anySubmit: [{ type: Output }],
|
|
3649
3810
|
validityChange: [{ type: Output }],
|
|
3650
3811
|
readonlyChange: [{ type: Output }],
|
|
3651
|
-
invalidSubmit: [{ type: Output }]
|
|
3652
|
-
onEnterKey: [{ type: HostListener, args: ['keyup.enter', ['$event'],] }]
|
|
3812
|
+
invalidSubmit: [{ type: Output }]
|
|
3653
3813
|
};
|
|
3654
3814
|
|
|
3655
3815
|
class DropDownListComponent extends BaseInputComponent {
|
|
@@ -4802,14 +4962,17 @@ InputTextComponent.decorators = [
|
|
|
4802
4962
|
selector: "co-input-text",
|
|
4803
4963
|
template: `
|
|
4804
4964
|
<label [textContent]="placeholder"></label>
|
|
4805
|
-
<input
|
|
4965
|
+
<input #input
|
|
4966
|
+
[type]="type"
|
|
4806
4967
|
[ngModel]="model"
|
|
4807
4968
|
[readonly]="readonly"
|
|
4808
4969
|
[required]="required"
|
|
4809
4970
|
(ngModelChange)="modelChange.emit($event)"
|
|
4810
|
-
(focus)="focused = true"
|
|
4811
|
-
(blur)="focused = false"
|
|
4812
4971
|
>
|
|
4972
|
+
<div *ngIf="showSaveCancel && focused && canSaveOrCancel" class="input-save-cancel-button-wrapper" @showHideSaveCancel>
|
|
4973
|
+
<div class="input-save-cancel-button save" (click)="commitClick($event)"></div>
|
|
4974
|
+
<div class="input-save-cancel-button cancel" (click)="cancelClick($event)"></div>
|
|
4975
|
+
</div>
|
|
4813
4976
|
<div class="required-indicator"></div>
|
|
4814
4977
|
<ng-template #validationError></ng-template>
|
|
4815
4978
|
`,
|
|
@@ -4817,6 +4980,13 @@ InputTextComponent.decorators = [
|
|
|
4817
4980
|
provide: COMPONENT_INTERFACE_NAME,
|
|
4818
4981
|
useExisting: forwardRef(() => InputTextComponent)
|
|
4819
4982
|
}],
|
|
4983
|
+
animations: [
|
|
4984
|
+
trigger('showHideSaveCancel', [
|
|
4985
|
+
state('*', style({ transform: 'scaleY(1)', opacity: 1 })),
|
|
4986
|
+
state('void', style({ transform: 'scaleY(0)', opacity: 0 })),
|
|
4987
|
+
transition('void <=> *', animate(200))
|
|
4988
|
+
]),
|
|
4989
|
+
],
|
|
4820
4990
|
encapsulation: ViewEncapsulation.None
|
|
4821
4991
|
},] }
|
|
4822
4992
|
];
|
|
@@ -5121,7 +5291,8 @@ class ValidationErrorModule {
|
|
|
5121
5291
|
ValidationErrorModule.decorators = [
|
|
5122
5292
|
{ type: NgModule, args: [{
|
|
5123
5293
|
imports: [
|
|
5124
|
-
CommonModule
|
|
5294
|
+
CommonModule,
|
|
5295
|
+
IconModule
|
|
5125
5296
|
],
|
|
5126
5297
|
declarations: [
|
|
5127
5298
|
ValidationErrorComponent
|
|
@@ -5263,13 +5434,13 @@ InputTextareaComponent.decorators = [
|
|
|
5263
5434
|
selector: "co-input-textarea",
|
|
5264
5435
|
template: `
|
|
5265
5436
|
<label [textContent]="placeholder"></label>
|
|
5266
|
-
<textarea
|
|
5267
|
-
|
|
5268
|
-
|
|
5269
|
-
|
|
5270
|
-
|
|
5271
|
-
|
|
5272
|
-
|
|
5437
|
+
<textarea
|
|
5438
|
+
#input
|
|
5439
|
+
type="textarea"
|
|
5440
|
+
[ngModel]="model"
|
|
5441
|
+
[readonly]="readonly"
|
|
5442
|
+
[required]="required"
|
|
5443
|
+
(ngModelChange)="modelChange.emit($event)"
|
|
5273
5444
|
></textarea>
|
|
5274
5445
|
<div class="required-indicator"></div>
|
|
5275
5446
|
<ng-template #validationError></ng-template>
|
|
@@ -7200,6 +7371,7 @@ class Carousel3dComponent {
|
|
|
7200
7371
|
this._createTiles();
|
|
7201
7372
|
}
|
|
7202
7373
|
this._checkNavigationButtons();
|
|
7374
|
+
this._resizeCanvasToDisplaySize();
|
|
7203
7375
|
}
|
|
7204
7376
|
_init() {
|
|
7205
7377
|
if (!this.canvasContainer || !this.canvasContainer.nativeElement) {
|
|
@@ -7400,11 +7572,16 @@ class Carousel3dComponent {
|
|
|
7400
7572
|
this._rotate(800);
|
|
7401
7573
|
}
|
|
7402
7574
|
_resizeCanvasToDisplaySize() {
|
|
7403
|
-
|
|
7404
|
-
|
|
7405
|
-
|
|
7406
|
-
|
|
7407
|
-
|
|
7575
|
+
setTimeout(() => {
|
|
7576
|
+
if (!this.canvasContainer || !this.canvasContainer.nativeElement) {
|
|
7577
|
+
return;
|
|
7578
|
+
}
|
|
7579
|
+
this._camera.aspect = this.canvasContainer.nativeElement.clientWidth / this.canvasContainer.nativeElement.clientHeight;
|
|
7580
|
+
this._camera.updateProjectionMatrix();
|
|
7581
|
+
this._rendererCss.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
|
|
7582
|
+
this._renderer.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
|
|
7583
|
+
this._render();
|
|
7584
|
+
});
|
|
7408
7585
|
}
|
|
7409
7586
|
_render() {
|
|
7410
7587
|
this._rendererCss.render(this._sceneCss, this._camera);
|
|
@@ -7476,5 +7653,5 @@ Carousel3dModule.decorators = [
|
|
|
7476
7653
|
* Generated bundle index. Do not edit.
|
|
7477
7654
|
*/
|
|
7478
7655
|
|
|
7479
|
-
export { ArticleTileComponent, ArticleTileModule, ButtonComponent, ButtonDropDownComponent, ButtonDropDownModule, ButtonModule, COMPONENT_INTERFACE_NAME, Carousel3dComponent, Carousel3dModule, CoDialogComponent, CoDialogModule, CoDialogPromptComponent, CoDialogPromptModule, CoGridComponent, CoGridModule, CoKanbanComponent, CoKanbanModule, CoPivotComponent, CoPivotModule, CoRichTextEditorComponent, CoRichTextEditorModule, CoScheduleComponent, CoScheduleModule, CoSidebarComponent, CoSidebarModule, CoToggleComponent, CoToggleModule, CollapsibleComponent, CollapsibleModule, ColumnAlign, CoreComponentsIcon, DropDownListComponent, DropDownModule, FormComponent, FormMasterService, FormModule, IconCacheService, IconComponent, IconModule, ImageComponent, ImageModule, InputCheckboxComponent, InputCheckboxModule, InputCheckboxMultiSelectComponent, InputCheckboxMultiSelectModule, InputComboBoxComponent, InputComboBoxModule, InputDatePickerComponent, InputDatePickerModule, InputListboxComponent, InputListboxModule, InputNumberPickerComponent, InputNumberPickerModule, InputRadioButtonComponent, InputRadioButtonModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, LevelIndicatorComponent, LevelIndicatorModule, MultiSelectListComponent, MultiSelectListModule, PopupButtonsComponent, PopupMessageDisplayComponent, PopupModule, PopupWindowShellComponent, PromptService, SimpleGridColumnDirective, SimpleGridComponent, SimpleGridModule, TextInputPopupComponent, TileComponent, TileModule, RippleModule as ɵa, MD_RIPPLE_GLOBAL_OPTIONS as ɵb, CoRippleDirective as ɵc, CoViewportRulerService as ɵd, CoScrollDispatcherService as ɵe, CoScrollableDirective as ɵf, StopClickModule as ɵg, StopClickDirective as ɵh,
|
|
7656
|
+
export { ArticleTileComponent, ArticleTileModule, ButtonComponent, ButtonDropDownComponent, ButtonDropDownModule, ButtonModule, COMPONENT_INTERFACE_NAME, Carousel3dComponent, Carousel3dModule, CoDialogComponent, CoDialogModule, CoDialogPromptComponent, CoDialogPromptModule, CoGridComponent, CoGridModule, CoKanbanComponent, CoKanbanModule, CoPivotComponent, CoPivotModule, CoRichTextEditorComponent, CoRichTextEditorModule, CoScheduleComponent, CoScheduleModule, CoSidebarComponent, CoSidebarModule, CoToggleComponent, CoToggleModule, CollapsibleComponent, CollapsibleModule, ColumnAlign, CoreComponentsIcon, DropDownListComponent, DropDownModule, FormComponent, FormMasterService, FormModule, IconCacheService, IconComponent, IconModule, ImageComponent, ImageModule, InputCheckboxComponent, InputCheckboxModule, InputCheckboxMultiSelectComponent, InputCheckboxMultiSelectModule, InputComboBoxComponent, InputComboBoxModule, InputDatePickerComponent, InputDatePickerModule, InputListboxComponent, InputListboxModule, InputNumberPickerComponent, InputNumberPickerModule, InputRadioButtonComponent, InputRadioButtonModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, LevelIndicatorComponent, LevelIndicatorModule, MultiSelectListComponent, MultiSelectListModule, PopupButtonsComponent, PopupMessageDisplayComponent, PopupModule, PopupWindowShellComponent, PriceDisplayPipe, PriceDisplayPipeModule, PromptService, SimpleGridColumnDirective, SimpleGridComponent, SimpleGridModule, TextInputPopupComponent, TileComponent, TileModule, RippleModule as ɵa, MD_RIPPLE_GLOBAL_OPTIONS as ɵb, CoRippleDirective as ɵc, CoViewportRulerService as ɵd, CoScrollDispatcherService as ɵe, CoScrollableDirective as ɵf, StopClickModule as ɵg, StopClickDirective as ɵh, InputBoolean as ɵi, BaseModule as ɵj, FormInputUserModelChangeListenerService as ɵk, NgZoneWrapperService as ɵl, BaseInputComponent as ɵm, BaseSelectionGridComponent as ɵn, BaseInlineEditGridComponent as ɵo, BaseToolbarGridComponent as ɵp, BaseGridComponent as ɵq, AppendPipeModule as ɵr, AppendPipe as ɵs, ValidationErrorModule as ɵt, ValidationErrorComponent as ɵu, PopupShowerService as ɵv };
|
|
7480
7657
|
//# sourceMappingURL=colijnit-corecomponents_v12.js.map
|