@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.
Files changed (54) hide show
  1. package/bundles/colijnit-corecomponents_v12.umd.js +283 -81
  2. package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
  3. package/colijnit-corecomponents_v12.d.ts +14 -16
  4. package/colijnit-corecomponents_v12.metadata.json +1 -1
  5. package/esm2015/colijnit-corecomponents_v12.js +15 -17
  6. package/esm2015/lib/components/base/base-input.component.js +181 -36
  7. package/esm2015/lib/components/carousel-3d/carousel-3d.component.js +12 -6
  8. package/esm2015/lib/components/co-dialog/co-dialog.module.js +1 -3
  9. package/esm2015/lib/components/collapsible/collapsible.component.js +10 -2
  10. package/esm2015/lib/components/drop-down-list/drop-down-list.component.js +1 -1
  11. package/esm2015/lib/components/drop-down-list/drop-down.module.js +6 -6
  12. package/esm2015/lib/components/form/form.component.js +18 -18
  13. package/esm2015/lib/components/input-checkbox/input-checkbox.component.js +1 -1
  14. package/esm2015/lib/components/input-checkbox-multi-select/input-checkbox-multi-select.component.js +1 -1
  15. package/esm2015/lib/components/input-date-picker/input-date-picker.component.js +1 -1
  16. package/esm2015/lib/components/input-radio-button/input-radio-button.component.js +1 -1
  17. package/esm2015/lib/components/input-text/input-text.component.js +15 -4
  18. package/esm2015/lib/components/input-text/input-text.module.js +1 -1
  19. package/esm2015/lib/components/input-textarea/input-textarea.component.js +8 -8
  20. package/esm2015/lib/components/multi-select-list/multi-select-list.module.js +6 -6
  21. package/esm2015/lib/components/validation-error/validation-error.component.js +13 -1
  22. package/esm2015/lib/components/validation-error/validation-error.module.js +4 -2
  23. package/esm2015/public-api.js +3 -1
  24. package/fesm2015/colijnit-corecomponents_v12.js +246 -69
  25. package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
  26. package/lib/components/base/base-input.component.d.ts +23 -5
  27. package/lib/components/co-kanban/style/_layout.scss +4 -0
  28. package/lib/components/co-kanban/style/_material-definition.scss +2 -0
  29. package/lib/components/drop-down-list/style/_layout.scss +2 -1
  30. package/lib/components/drop-down-list/style/_material-definition.scss +2 -0
  31. package/lib/components/form/form.component.d.ts +2 -3
  32. package/lib/components/input-checkbox/style/_material-definition.scss +1 -2
  33. package/lib/components/input-checkbox/style/material.scss +2 -0
  34. package/lib/components/input-checkbox-multi-select/style/_layout.scss +5 -1
  35. package/lib/components/input-checkbox-multi-select/style/_material-definition.scss +2 -0
  36. package/lib/components/input-combo-box/style/_layout.scss +4 -2
  37. package/lib/components/input-combo-box/style/_material-definition.scss +2 -0
  38. package/lib/components/input-date-picker/style/_layout.scss +2 -1
  39. package/lib/components/input-date-picker/style/_material-definition.scss +4 -0
  40. package/lib/components/input-listbox/style/_layout.scss +0 -1
  41. package/lib/components/input-listbox/style/_material-definition.scss +2 -2
  42. package/lib/components/input-text/style/_layout.scss +32 -0
  43. package/lib/components/input-text/style/_material-definition.scss +3 -0
  44. package/lib/components/input-text/style/_theme.scss +21 -1
  45. package/lib/components/input-textarea/style/_theme.scss +1 -0
  46. package/lib/components/multi-select-list/style/_layout.scss +2 -1
  47. package/lib/components/multi-select-list/style/_material-definition.scss +2 -0
  48. package/lib/components/multi-select-list/style/_theme.scss +5 -1
  49. package/lib/components/validation-error/style/_layout.scss +10 -2
  50. package/lib/components/validation-error/validation-error.component.d.ts +6 -0
  51. package/lib/style/_input.mixins.scss +4 -3
  52. package/lib/style/_variables.scss +41 -1
  53. package/package.json +1 -1
  54. 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
- // this.input = undefined;
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
- doBlur() {
3096
- this.input.blur();
3097
- this.focused = false;
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 > 0) { // not maxLength is 0
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
- onEnterKey(event) {
3571
- const target = event.target;
3572
- if (['TEXTAREA', 'SELECT'].indexOf(target.tagName) !== -1) {
3573
- return;
3574
- }
3575
- if (target.isContentEditable) {
3576
- return;
3577
- }
3578
- if (target.tagName === 'BUTTON-COLIJN' && target.getAttribute('type') === 'submit') {
3579
- return;
3580
- }
3581
- this.submit();
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 [type]="type"
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 type="textarea"
5267
- [ngModel]="model"
5268
- [readonly]="readonly"
5269
- [required]="required"
5270
- (ngModelChange)="modelChange.emit($event)"
5271
- (focus)="focused = true"
5272
- (blur)="focused = false"
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
- this._camera.aspect = this.canvasContainer.nativeElement.clientWidth / this.canvasContainer.nativeElement.clientHeight;
7404
- this._camera.updateProjectionMatrix();
7405
- this._rendererCss.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
7406
- this._renderer.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
7407
- this._render();
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, PriceDisplayPipeModule as ɵi, PriceDisplayPipe as ɵj, InputBoolean as ɵk, BaseModule as ɵl, FormInputUserModelChangeListenerService as ɵm, NgZoneWrapperService as ɵn, BaseInputComponent as ɵo, BaseSelectionGridComponent as ɵp, BaseInlineEditGridComponent as ɵq, BaseToolbarGridComponent as ɵr, BaseGridComponent as ɵs, AppendPipeModule as ɵt, AppendPipe as ɵu, ValidationErrorModule as ɵv, ValidationErrorComponent as ɵw, PopupShowerService as ɵx };
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