@kms-ngx-ui/presentational 20.3.6 → 20.4.1

package/fesm2022/kms-ngx-ui-presentational.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Component, Pipe, NgModule, EventEmitter, Output, Input, Directive, HostListener, PLATFORM_ID, DOCUMENT, Inject, Injectable, input, VERSION, forwardRef, InjectionToken, inject, Injector, ViewChild, computed, HostBinding, output, signal, effect, ChangeDetectionStrategy, model, ViewContainerRef, untracked, DestroyRef, ElementRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, Pipe, NgModule, EventEmitter, Output, Input, Directive, HostListener, PLATFORM_ID, DOCUMENT, Inject, Injectable, input, VERSION, forwardRef, InjectionToken, inject, Injector, ViewChild, computed, HostBinding, output, signal, effect, ChangeDetectionStrategy, model, ChangeDetectorRef, ViewContainerRef, untracked, DestroyRef, ElementRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, CurrencyPipe, isPlatformBrowser, NgClass, NgStyle } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, NgControl, FormControl, UntypedFormGroup, UntypedFormControl, FormGroup, ReactiveFormsModule, NG_VALIDATORS, FormsModule } from '@angular/forms';
+import { FormControl, NG_VALUE_ACCESSOR, NgControl, UntypedFormGroup, UntypedFormControl, FormGroup, ReactiveFormsModule, NG_VALIDATORS, ValueChangeEvent, FormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i1$5 from '@angular/material/radio';
@@ -54,7 +54,7 @@ import { trigger, state, style } from '@angular/animations';
 import { register } from 'swiper/element/bundle';
 import { isEmpty } from 'lodash';
 import moment from 'moment';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntil, filter } from 'rxjs/operators';
 
 class KmsUiPresentationalComponent {
     constructor() { }
@@ -1197,7 +1197,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class CheckboxComponent {
     constructor() {
         this.infoText = '';
-        this.checked = false;
         this.disabled = false;
         /**
          * Internal description name. All checkboxes with the same name belong to the same group.
@@ -1205,17 +1204,24 @@ class CheckboxComponent {
          */
         this.name = '';
         this.change = new EventEmitter();
+        this.innerControl = new FormControl(false);
         this.onChange = () => { };
         this.onTouched = () => { };
     }
+    set checked(value) {
+        this.innerControl.setValue(value, { emitEvent: false });
+    }
+    get checked() {
+        return this.innerControl.value ?? false;
+    }
     valueChanged(value) {
         this.onChange(value);
-        this.checked = value;
+        this.innerControl.setValue(value, { emitEvent: false });
         this.change.emit(value);
         this.onTouched();
     }
     writeValue(value) {
-        this.checked = value;
+        this.innerControl.setValue(value ?? false, { emitEvent: false });
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -1223,6 +1229,14 @@ class CheckboxComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.innerControl.disable({ emitEvent: false });
+        }
+        else {
+            this.innerControl.enable({ emitEvent: false });
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CheckboxComponent, isStandalone: false, selector: "kms-checkbox", inputs: { infoText: "infoText", checked: "checked", disabled: "disabled", name: "name" }, outputs: { change: "change" }, providers: [
             {
@@ -1230,7 +1244,7 @@ class CheckboxComponent {
                 useExisting: forwardRef(() => CheckboxComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"checkbox-container\" [class.disabled]=\"disabled\">\n  <mat-checkbox\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [(ngModel)]=\"checked\"\n    (change)=\"valueChanged($event.checked)\"\n    color=\"primary\"\n  >\n    <span [innerHTML]=\"infoText | kmsSafeHtml\"></span>\n  </mat-checkbox>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "kmsSafeHtml" }] }); }
+        ], ngImport: i0, template: "<div class=\"checkbox-container\" [class.disabled]=\"disabled\">\n  <mat-checkbox\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [formControl]=\"innerControl\"\n    (change)=\"valueChanged($event.checked)\"\n    color=\"primary\"\n  >\n    <span [innerHTML]=\"infoText | kmsSafeHtml\"></span>\n  </mat-checkbox>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: SafeHtmlPipe, name: "kmsSafeHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -1240,7 +1254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => CheckboxComponent),
                             multi: true,
                         },
-                    ], standalone: false, template: "<div class=\"checkbox-container\" [class.disabled]=\"disabled\">\n  <mat-checkbox\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [(ngModel)]=\"checked\"\n    (change)=\"valueChanged($event.checked)\"\n    color=\"primary\"\n  >\n    <span [innerHTML]=\"infoText | kmsSafeHtml\"></span>\n  </mat-checkbox>\n</div>\n" }]
+                    ], standalone: false, template: "<div class=\"checkbox-container\" [class.disabled]=\"disabled\">\n  <mat-checkbox\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [formControl]=\"innerControl\"\n    (change)=\"valueChanged($event.checked)\"\n    color=\"primary\"\n  >\n    <span [innerHTML]=\"infoText | kmsSafeHtml\"></span>\n  </mat-checkbox>\n</div>\n" }]
         }], propDecorators: { infoText: [{
                 type: Input
             }], checked: [{
@@ -2537,6 +2551,168 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+const DEFAULT_MAX_SIZE_BYTES = 2097152; // 2MB
+class ImageUploadComponent {
+    constructor(cd) {
+        this.cd = cd;
+        this.label = 'Upload';
+        this.icon = 'ic_edit';
+        this.accept = 'image/jpeg, image/jpg, image/png';
+        this.maxSizeBytes = DEFAULT_MAX_SIZE_BYTES;
+        this.resizePixels = 0;
+        this.imagePosition = 'top';
+        this.imageMaxHeight = '128px';
+        this.removeLabel = '';
+        this.removeIcon = 'trash';
+        this.disabled = false;
+        this.ButtonAppearance = ButtonAppearance;
+        this.IconSizePx = IconSizePx;
+        this.imageValue = null;
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    get hasImage() {
+        return !!(this.imageValue?.ImageLink || this.imageValue?.ImageAsDataURL);
+    }
+    get imageSrc() {
+        return this.imageValue?.ImageAsDataURL || this.imageValue?.ImageLink || '';
+    }
+    get layoutClass() {
+        return `kms-image-upload--${this.imagePosition}`;
+    }
+    get actionsClass() {
+        const isVertical = this.imagePosition === 'left' || this.imagePosition === 'right';
+        return isVertical
+            ? 'kms-image-upload__actions--vertical'
+            : 'kms-image-upload__actions--horizontal';
+    }
+    openFileDialog() {
+        if (this.disabled)
+            return;
+        this.fileInput.nativeElement.click();
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        const file = input.files?.[0];
+        if (!file)
+            return;
+        if (file.size > this.maxSizeBytes) {
+            this.clearInput();
+            return;
+        }
+        if (this.resizePixels > 0) {
+            const url = URL.createObjectURL(file);
+            const img = document.createElement('img');
+            img.addEventListener('load', () => {
+                const dataUrl = this.resizeImage(img, this.resizePixels);
+                URL.revokeObjectURL(url);
+                this.setValue({
+                    Filename: file.name,
+                    ImageAsDataURL: dataUrl,
+                    ImageLink: this.imageValue?.ImageLink ?? '',
+                    ImageIdent: this.imageValue?.ImageIdent ?? '',
+                    Text: this.imageValue?.Text ?? '',
+                });
+                this.cd.markForCheck();
+            });
+            img.src = url;
+        }
+        else {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                this.setValue({
+                    Filename: file.name,
+                    ImageAsDataURL: e.target?.result ?? '',
+                    ImageLink: this.imageValue?.ImageLink ?? '',
+                    ImageIdent: this.imageValue?.ImageIdent ?? '',
+                    Text: this.imageValue?.Text ?? '',
+                });
+                this.cd.markForCheck();
+            };
+            reader.readAsDataURL(file);
+        }
+        this.clearInput();
+    }
+    removeImage() {
+        this.setValue(null);
+    }
+    // --- CVA ---
+    writeValue(value) {
+        this.imageValue = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    // --- Private ---
+    setValue(value) {
+        this.imageValue = value;
+        this.onChange(value);
+        this.onTouched();
+    }
+    clearInput() {
+        if (this.fileInput) {
+            this.fileInput.nativeElement.value = '';
+        }
+    }
+    resizeImage(imgEl, wantedWidth) {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        const aspect = imgEl.width / imgEl.height;
+        canvas.width = wantedWidth;
+        canvas.height = wantedWidth / aspect;
+        if (isValue(ctx))
+            ctx.drawImage(imgEl, 0, 0, canvas.width, canvas.height);
+        return canvas.toDataURL();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageUploadComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ImageUploadComponent, isStandalone: false, selector: "kms-image-upload", inputs: { label: "label", icon: "icon", accept: "accept", maxSizeBytes: "maxSizeBytes", resizePixels: "resizePixels", imagePosition: "imagePosition", imageMaxHeight: "imageMaxHeight", removeLabel: "removeLabel", removeIcon: "removeIcon", disabled: "disabled" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ImageUploadComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"kms-image-upload\" [ngClass]=\"layoutClass\">\n  @if (hasImage) {\n    <img\n      class=\"kms-image-upload__image\"\n      [src]=\"imageSrc\"\n      [style.max-height]=\"imageMaxHeight\"\n      [attr.alt]=\"imageValue?.Filename || 'Uploaded image'\"\n    />\n  }\n\n  <div class=\"kms-image-upload__actions\" [ngClass]=\"actionsClass\">\n    <kms-button\n      [appearance]=\"ButtonAppearance.BASIC\"\n      [icon]=\"icon\"\n      [label]=\"label\"\n      [disabled]=\"disabled\"\n      (buttonClick)=\"openFileDialog()\"\n    ></kms-button>\n\n    @if (hasImage && !disabled) {\n      <kms-button\n        [appearance]=\"ButtonAppearance.BASIC\"\n        [icon]=\"removeIcon\"\n        [label]=\"removeLabel\"\n        (buttonClick)=\"removeImage()\"\n      ></kms-button>\n    }\n  </div>\n\n  <input\n    type=\"file\"\n    [accept]=\"accept\"\n    style=\"display: none\"\n    #fileInput\n    (change)=\"onFileSelected($event)\"\n  />\n</div>\n", styles: [":host{display:block}.kms-image-upload{display:flex;flex-direction:row;align-items:flex-start;gap:12px}.kms-image-upload--top{flex-direction:column;align-items:center}.kms-image-upload--bottom{flex-direction:column-reverse;align-items:center}.kms-image-upload--left{flex-direction:row;align-items:center}.kms-image-upload--right{flex-direction:row-reverse;align-items:center}.kms-image-upload__image{display:block;max-width:100%;object-fit:contain;border-radius:4px;border:1px solid var(--kms-tertiary-20, #e0e0e0)}.kms-image-upload__actions{display:flex;gap:4px}.kms-image-upload__actions--horizontal{flex-direction:row;align-items:center}.kms-image-upload__actions--vertical{flex-direction:column;align-items:flex-start}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "kms-button", inputs: ["color", "type", "appearance", "loading", "label", "icon", "disabled", "rounded"], outputs: ["buttonClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kms-image-upload', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ImageUploadComponent),
+                            multi: true,
+                        },
+                    ], standalone: false, template: "<div class=\"kms-image-upload\" [ngClass]=\"layoutClass\">\n  @if (hasImage) {\n    <img\n      class=\"kms-image-upload__image\"\n      [src]=\"imageSrc\"\n      [style.max-height]=\"imageMaxHeight\"\n      [attr.alt]=\"imageValue?.Filename || 'Uploaded image'\"\n    />\n  }\n\n  <div class=\"kms-image-upload__actions\" [ngClass]=\"actionsClass\">\n    <kms-button\n      [appearance]=\"ButtonAppearance.BASIC\"\n      [icon]=\"icon\"\n      [label]=\"label\"\n      [disabled]=\"disabled\"\n      (buttonClick)=\"openFileDialog()\"\n    ></kms-button>\n\n    @if (hasImage && !disabled) {\n      <kms-button\n        [appearance]=\"ButtonAppearance.BASIC\"\n        [icon]=\"removeIcon\"\n        [label]=\"removeLabel\"\n        (buttonClick)=\"removeImage()\"\n      ></kms-button>\n    }\n  </div>\n\n  <input\n    type=\"file\"\n    [accept]=\"accept\"\n    style=\"display: none\"\n    #fileInput\n    (change)=\"onFileSelected($event)\"\n  />\n</div>\n", styles: [":host{display:block}.kms-image-upload{display:flex;flex-direction:row;align-items:flex-start;gap:12px}.kms-image-upload--top{flex-direction:column;align-items:center}.kms-image-upload--bottom{flex-direction:column-reverse;align-items:center}.kms-image-upload--left{flex-direction:row;align-items:center}.kms-image-upload--right{flex-direction:row-reverse;align-items:center}.kms-image-upload__image{display:block;max-width:100%;object-fit:contain;border-radius:4px;border:1px solid var(--kms-tertiary-20, #e0e0e0)}.kms-image-upload__actions{display:flex;gap:4px}.kms-image-upload__actions--horizontal{flex-direction:row;align-items:center}.kms-image-upload__actions--vertical{flex-direction:column;align-items:flex-start}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }], label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], maxSizeBytes: [{
+                type: Input
+            }], resizePixels: [{
+                type: Input
+            }], imagePosition: [{
+                type: Input
+            }], imageMaxHeight: [{
+                type: Input
+            }], removeLabel: [{
+                type: Input
+            }], removeIcon: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
 /**
  * @copyright KMS GmbH
  */
@@ -3228,6 +3404,7 @@ class TextInputComponent {
         this.errorStateMatcher = {
             isErrorState: () => !!this.errorMessage(),
         };
+        this.cd = inject(ChangeDetectorRef);
         this.onChange = () => { };
         this.onTouched = () => { };
     }
@@ -3247,6 +3424,7 @@ class TextInputComponent {
         const val = value ?? '';
         this.value.set(val);
         this.innerControl.setValue(val, { emitEvent: false });
+        this.cd.markForCheck();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -3496,6 +3674,7 @@ var FieldType;
     FieldType["MONTH_PICKER"] = "monthPicker";
     FieldType["TEMPLATE"] = "template";
     FieldType["OFFSET"] = "offset";
+    FieldType["IMAGE_UPLOAD"] = "imageUpload";
 })(FieldType || (FieldType = {}));
 
 /** Component-scoped service managing the full internal form lifecycle. No UI. */
@@ -3758,6 +3937,7 @@ const DEFAULT_REGISTRY = new Map([
     [FieldType.RADIO_GROUP, RadioGroupComponent],
     [FieldType.SLIDE_TOGGLE, SlideToggleComponent],
     [FieldType.COLOR, ColorInputComponent],
+    [FieldType.IMAGE_UPLOAD, ImageUploadComponent],
 ]);
 class FieldRegistryService {
     constructor() {
@@ -3829,13 +4009,15 @@ class DynamicFieldDirective {
                 this.fieldTouched.emit();
             });
         }
-        // Sync control → component on external value changes
-        control.valueChanges.pipe(takeUntil$1(this.destroy$)).subscribe((val) => {
+        // Sync control → component on external value changes.
+        // Uses control.events (fires even with emitEvent: false from silent patchValue)
+        // instead of control.valueChanges (suppressed by emitEvent: false).
+        control.events.pipe(filter((e) => e instanceof ValueChangeEvent), takeUntil$1(this.destroy$)).subscribe(() => {
             if (syncing)
                 return;
             syncing = true;
             if (typeof inst.writeValue === 'function')
-                inst.writeValue(val);
+                inst.writeValue(control.value);
             // Reset after microtask to cover async onChange triggers (e.g. ngModel two-way binding)
             Promise.resolve().then(() => { syncing = false; });
         });
@@ -3880,6 +4062,9 @@ class DynamicFieldDirective {
             case FieldType.PASSWORD:
                 this.mapPassword(config, ref);
                 break;
+            case FieldType.IMAGE_UPLOAD:
+                this.mapImageUpload(config, ref);
+                break;
             default: // TIME, COLOR
                 this.trySetInput(ref, 'label', config.label ?? '');
                 break;
@@ -3976,6 +4161,26 @@ class DynamicFieldDirective {
         if (opts?.withStrength)
             ref.setInput('withStrength', true);
     }
+    mapImageUpload(config, ref) {
+        const opts = config.options;
+        ref.setInput('label', opts?.buttonLabel ?? config.label ?? 'Upload');
+        if (opts?.buttonIcon)
+            ref.setInput('icon', opts.buttonIcon);
+        if (opts?.removeLabel !== undefined)
+            ref.setInput('removeLabel', opts.removeLabel);
+        if (opts?.removeIcon)
+            ref.setInput('removeIcon', opts.removeIcon);
+        if (opts?.accept)
+            ref.setInput('accept', opts.accept);
+        if (opts?.maxSizeBytes)
+            ref.setInput('maxSizeBytes', opts.maxSizeBytes);
+        if (opts?.resizePixels)
+            ref.setInput('resizePixels', opts.resizePixels);
+        if (opts?.imagePosition)
+            ref.setInput('imagePosition', opts.imagePosition);
+        if (opts?.imageMaxHeight)
+            ref.setInput('imageMaxHeight', opts.imageMaxHeight);
+    }
     mapCounter(config, ref) {
         this.trySetInput(ref, 'label', config.label ?? '');
         const opts = config.options;
@@ -4414,7 +4619,7 @@ class GenericFormComponent {
                 if (val !== this.lastEmittedValue) {
                     const fg = this.formService.getFormGroup();
                     if (fg) {
-                        this.formService.patchValue(val);
+                        this.formService.patchValue(val, { silent: true });
                     }
                 }
             });
@@ -4600,6 +4805,7 @@ class KmsUiPresentationalModule {
             DropdownFromDataComponent,
             EnumRadiogroupComponent,
             FileInputComponent,
+            ImageUploadComponent,
             FlyoutComponent,
             ConfirmationDialogComponent,
             ImageSliderComponent,
@@ -4661,6 +4867,7 @@ class KmsUiPresentationalModule {
             EnumRadiogroupComponent,
             RadioGroupComponent,
             FileInputComponent,
+            ImageUploadComponent,
             FlyoutComponent,
             ConfirmationDialogComponent,
             IconComponent,
@@ -4727,6 +4934,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         DropdownFromDataComponent,
                         EnumRadiogroupComponent,
                         FileInputComponent,
+                        ImageUploadComponent,
                         FlyoutComponent,
                         ConfirmationDialogComponent,
                         ImageSliderComponent,
@@ -4794,6 +5002,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         EnumRadiogroupComponent,
                         RadioGroupComponent,
                         FileInputComponent,
+                        ImageUploadComponent,
                         FlyoutComponent,
                         ConfirmationDialogComponent,
                         IconComponent,
@@ -5003,5 +5212,5 @@ var FormLayout;
  * Generated bundle index. Do not edit.
  */
 
-export { BackToTopComponent, Breakpoint, ButtonAppearance, ButtonComponent, ButtonResponseType, CardComponent, CheckboxComponent, Color, ColorInputComponent, ConfirmationDialogComponent, CustomPipesModule, DateInputComponent, DirectivesModule, DropdownFromDataComponent, DynamicFieldDirective, EnumRadiogroupComponent, FieldRegistryService, FieldType, FileInputComponent, FlyoutComponent, FormActionsComponent, FormFieldComponent, FormLayout, FormParentComponent, FormSectionComponent, GenericFormComponent, GenericFormModule, GenericFormService, GetMaxHeightDirective, IconComponent, IconSizePx, IconSizesArr, ImageSliderComponent, ImageSnippet, ImageSourceType, InlineAlertComponent, IntegerCurrency, KMSAccordionItemComponent, KeyValuePair, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, LabelValuePair, LoaderComponent, MapComponent, Marker, MarkerLabel, MarkerOptions, NumericInputComponent, PasswordComponent, RadioButtonComponent, RadioButtonSize, RadioGroupComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SalutationDropdownComponent, SalutationEnum, SalutationRadiogroupComponent, SanitizeNullPipe, SimpleBreakpoint, SlideToggleComponent, SliderComponent, StylingTheme, SwipeDirective, TextInputComponent, TextValuePair, TextValuePairArray, TimeDirective, TimeInputComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, WindowDimensions, YesNoRadiogroupComponent, noSpecialCharsOnly, noWhitespaceOnly };
+export { BackToTopComponent, Breakpoint, ButtonAppearance, ButtonComponent, ButtonResponseType, CardComponent, CheckboxComponent, Color, ColorInputComponent, ConfirmationDialogComponent, CustomPipesModule, DateInputComponent, DirectivesModule, DropdownFromDataComponent, DynamicFieldDirective, EnumRadiogroupComponent, FieldRegistryService, FieldType, FileInputComponent, FlyoutComponent, FormActionsComponent, FormFieldComponent, FormLayout, FormParentComponent, FormSectionComponent, GenericFormComponent, GenericFormModule, GenericFormService, GetMaxHeightDirective, IconComponent, IconSizePx, IconSizesArr, ImageSliderComponent, ImageSnippet, ImageSourceType, ImageUploadComponent, InlineAlertComponent, IntegerCurrency, KMSAccordionItemComponent, KeyValuePair, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, LabelValuePair, LoaderComponent, MapComponent, Marker, MarkerLabel, MarkerOptions, NumericInputComponent, PasswordComponent, RadioButtonComponent, RadioButtonSize, RadioGroupComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SalutationDropdownComponent, SalutationEnum, SalutationRadiogroupComponent, SanitizeNullPipe, SimpleBreakpoint, SlideToggleComponent, SliderComponent, StylingTheme, SwipeDirective, TextInputComponent, TextValuePair, TextValuePairArray, TimeDirective, TimeInputComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, WindowDimensions, YesNoRadiogroupComponent, noSpecialCharsOnly, noWhitespaceOnly };
 //# sourceMappingURL=kms-ngx-ui-presentational.mjs.map