@kms-ngx-ui/presentational 20.3.4 → 20.4.0

package/index.d.ts

@@ -1,43 +1,43 @@
 import * as _angular_core from '@angular/core';
 import { OnInit, EventEmitter, DoCheck, Renderer2, ElementRef, ApplicationRef, ChangeDetectorRef, NgZone, OnChanges, AfterViewInit, WritableSignal, Signal, SimpleChanges, TemplateRef, OnDestroy, PipeTransform, AfterContentChecked, InputSignal, Type } from '@angular/core';
-import * as i39 from '@angular/forms';
-import { ControlValueAccessor, UntypedFormGroup, NgControl, AbstractControl, UntypedFormControl, FormControl, FormArray, Validator, ValidationErrors, AsyncValidatorFn, ValidatorFn, FormGroup } from '@angular/forms';
-import * as i35 from '@angular/material/checkbox';
+import * as i40 from '@angular/forms';
+import { ControlValueAccessor, FormControl, UntypedFormGroup, NgControl, AbstractControl, UntypedFormControl, FormArray, Validator, ValidationErrors, AsyncValidatorFn, ValidatorFn, FormGroup } from '@angular/forms';
+import * as i36 from '@angular/material/checkbox';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { Subscription, Observable } from 'rxjs';
-import * as i38 from '@angular/material/dialog';
+import * as i39 from '@angular/material/dialog';
 import { MatDialogRef } from '@angular/material/dialog';
-import * as i34 from '@angular/cdk/drag-drop';
+import * as i35 from '@angular/cdk/drag-drop';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { SafeHtml, DomSanitizer, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';
-import * as i50 from '@angular/material/slide-toggle';
+import * as i51 from '@angular/material/slide-toggle';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { Placement } from '@floating-ui/dom';
-import * as i53 from '@angular-slider/ngx-slider';
+import * as i54 from '@angular-slider/ngx-slider';
 import { Options, ChangeContext } from '@angular-slider/ngx-slider';
 export { ChangeContext as KmsSliderChange, Options as KmsSliderOptions } from '@angular-slider/ngx-slider';
 import * as _kms_ngx_ui_presentational from '@kms-ngx-ui/presentational';
-import * as i58 from '@angular/material/core';
+import * as i59 from '@angular/material/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import * as i8 from '@angular/common';
 import { CurrencyPipe } from '@angular/common';
-import * as i36 from '@angular/material/button';
-import * as i37 from '@angular/material/radio';
-import * as i40 from '@angular/material/form-field';
-import * as i41 from '@angular/material/input';
-import * as i42 from '@angular/material/menu';
-import * as i44 from '@angular/google-maps';
-import * as i45 from '@angular/material/expansion';
-import * as i46 from '@angular/material/select';
-import * as i47 from 'ngx-mat-select-search';
-import * as i48 from '@angular/material/progress-spinner';
-import * as i51 from '@ngx-translate/core';
+import * as i37 from '@angular/material/button';
+import * as i38 from '@angular/material/radio';
+import * as i41 from '@angular/material/form-field';
+import * as i42 from '@angular/material/input';
+import * as i43 from '@angular/material/menu';
+import * as i45 from '@angular/google-maps';
+import * as i46 from '@angular/material/expansion';
+import * as i47 from '@angular/material/select';
+import * as i48 from 'ngx-mat-select-search';
+import * as i49 from '@angular/material/progress-spinner';
+import * as i52 from '@ngx-translate/core';
 import { TranslateService } from '@ngx-translate/core';
-import * as i52 from '@angular/material/tooltip';
-import * as i54 from '@angular/material/autocomplete';
-import * as i55 from '@angular/material/list';
-import * as i56 from '@angular/material/card';
-import * as i57 from '@angular/material/datepicker';
+import * as i53 from '@angular/material/tooltip';
+import * as i55 from '@angular/material/autocomplete';
+import * as i56 from '@angular/material/list';
+import * as i57 from '@angular/material/card';
+import * as i58 from '@angular/material/datepicker';
 import { MatDatepicker } from '@angular/material/datepicker';
 import * as icons from '@ui-presentational/assets/icons.json';
 
@@ -97,7 +97,8 @@ declare class BackToTopComponent {
 
 declare class CheckboxComponent implements ControlValueAccessor {
     infoText: string;
-    checked: boolean;
+    set checked(value: boolean);
+    get checked(): boolean;
     disabled: boolean;
     /**
      * Internal description name. All checkboxes with the same name belong to the same group.
@@ -105,12 +106,14 @@ declare class CheckboxComponent implements ControlValueAccessor {
      */
     name: string;
     change: EventEmitter<any>;
+    innerControl: FormControl<boolean>;
     valueChanged(value: boolean): void;
     onChange: any;
     onTouched: any;
     writeValue(value: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CheckboxComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckboxComponent, "kms-checkbox", never, { "infoText": { "alias": "infoText"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, { "change": "change"; }, never, never, false, never>;
 }
@@ -387,6 +390,143 @@ declare class FileInputComponent implements ControlValueAccessor, OnInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FileInputComponent, "kms-file-input", never, { "label": { "alias": "label"; "required": false; }; "previewImage": { "alias": "previewImage"; "required": false; }; "allowRemove": { "alias": "allowRemove"; "required": false; }; "previewImageText": { "alias": "previewImageText"; "required": false; }; "maxSizeBytes": { "alias": "maxSizeBytes"; "required": false; }; "resizePixels": { "alias": "resizePixels"; "required": false; }; "acceptedFileMimetypes": { "alias": "acceptedFileMimetypes"; "required": false; }; }, { "formDataChanged": "formDataChanged"; }, never, never, false, never>;
 }
 
+declare enum ButtonAppearance {
+    BASIC = "mat-button",
+    FLAT = "mat-flat-button",
+    RAISED = "mat-raised-button"
+}
+
+/** Translation config passed to kms-dropdown-from-data. */
+interface SelectTranslation {
+    path: string;
+    isPrefix?: boolean;
+    useKeyAsValue?: boolean;
+    service: any;
+}
+/** Options for FieldType.SELECT and FieldType.MULTI_SELECT. */
+interface SelectFieldOptions {
+    items?: LabelValuePair[] | Observable<LabelValuePair[]>;
+    plainItems?: string[];
+    enumItems?: any;
+    objItems?: {
+        data: any[];
+        mapKey: string;
+        mapValue?: string;
+    };
+    multiple?: boolean;
+    searchable?: boolean;
+    hasNullOption?: boolean;
+    selectAllText?: string;
+    disableOptions?: boolean;
+    useEnumIndexAsValue?: boolean;
+    preselectedKeys?: any;
+    translation?: SelectTranslation;
+}
+/** Options for FieldType.AUTOCOMPLETE. */
+interface AutocompleteFieldOptions {
+    items: LabelValuePair[] | Observable<LabelValuePair[]>;
+    minChars?: number;
+    selectFirst?: boolean;
+}
+/** Options for FieldType.NUMBER — numeric text input. */
+interface NumberFieldOptions {
+    min?: number;
+    max?: number;
+}
+/** Options for FieldType.COUNTER — passed to `kms-numeric-input`. */
+interface CounterFieldOptions {
+    min?: number;
+    max?: number;
+    step?: number;
+}
+/** Options for FieldType.DATE and FieldType.MONTH_PICKER. */
+interface DateFieldOptions {
+    min?: Date | string;
+    max?: Date | string;
+}
+/** Options for FieldType.DATE_RANGE. */
+interface DateRangeFieldOptions {
+    min?: Date | string;
+    max?: Date | string;
+    startKey: string;
+    endKey: string;
+}
+/** Options for FieldType.TIME — passed to `kms-time-input`. */
+interface TimeFieldOptions {
+    intervalMinutes?: number;
+    min?: string;
+    max?: string;
+}
+/** Options for FieldType.RADIO_GROUP — passed to `kms-radiogroup`. */
+interface RadioGroupFieldOptions {
+    items: LabelValuePair[] | string[];
+    layout?: 'horizontal' | 'vertical';
+    size?: string;
+}
+/** Options for FieldType.TEXTAREA. */
+interface TextareaFieldOptions {
+    rows?: number;
+    maxRows?: number;
+    autoResize?: boolean;
+}
+/** Options for FieldType.PASSWORD — passed to `kms-password`. */
+interface PasswordFieldOptions {
+    withStrength?: boolean;
+}
+/** Position of the image preview relative to the upload button. */
+type ImagePosition = 'top' | 'bottom' | 'left' | 'right';
+/** Options for FieldType.IMAGE_UPLOAD — passed to `kms-image-upload`. */
+interface ImageUploadFieldOptions {
+    buttonLabel?: string;
+    buttonIcon?: string;
+    removeLabel?: string;
+    removeIcon?: string;
+    accept?: string;
+    maxSizeBytes?: number;
+    resizePixels?: number;
+    imagePosition?: ImagePosition;
+    imageMaxHeight?: string;
+}
+/** Union of all type-specific option interfaces. Assign the one matching your FieldType. */
+type FieldTypeOptions = SelectFieldOptions | AutocompleteFieldOptions | NumberFieldOptions | CounterFieldOptions | DateFieldOptions | DateRangeFieldOptions | TimeFieldOptions | RadioGroupFieldOptions | TextareaFieldOptions | PasswordFieldOptions | ImageUploadFieldOptions;
+
+declare class ImageUploadComponent implements ControlValueAccessor {
+    private readonly cd;
+    fileInput: ElementRef<HTMLInputElement>;
+    label: string;
+    icon: string;
+    accept: string;
+    maxSizeBytes: number;
+    resizePixels: number;
+    imagePosition: ImagePosition;
+    imageMaxHeight: string;
+    removeLabel: string;
+    removeIcon: string;
+    disabled: boolean;
+    readonly ButtonAppearance: typeof ButtonAppearance;
+    readonly IconSizePx: typeof IconSizePx;
+    imageValue: AttachedFileDTO | null;
+    private onChange;
+    private onTouched;
+    constructor(cd: ChangeDetectorRef);
+    get hasImage(): boolean;
+    get imageSrc(): string;
+    get layoutClass(): string;
+    get actionsClass(): string;
+    openFileDialog(): void;
+    onFileSelected(event: Event): void;
+    removeImage(): void;
+    writeValue(value: AttachedFileDTO | null): void;
+    registerOnChange(fn: (value: AttachedFileDTO | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    private setValue;
+    private clearInput;
+    private resizeImage;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ImageUploadComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ImageUploadComponent, "kms-image-upload", never, { "label": { "alias": "label"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "maxSizeBytes": { "alias": "maxSizeBytes"; "required": false; }; "resizePixels": { "alias": "resizePixels"; "required": false; }; "imagePosition": { "alias": "imagePosition"; "required": false; }; "imageMaxHeight": { "alias": "imageMaxHeight"; "required": false; }; "removeLabel": { "alias": "removeLabel"; "required": false; }; "removeIcon": { "alias": "removeIcon"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, false, never>;
+}
+
 declare class FlyoutComponent {
     icon: string;
     isDropdownOpened: boolean;
@@ -843,12 +983,6 @@ declare class CardComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "kms-card", never, { "imageUrl": { "alias": "imageUrl"; "required": false; "isSignal": true; }; "hoverEffect": { "alias": "hoverEffect"; "required": false; "isSignal": true; }; }, {}, never, ["*"], false, never>;
 }
 
-declare enum ButtonAppearance {
-    BASIC = "mat-button",
-    FLAT = "mat-flat-button",
-    RAISED = "mat-raised-button"
-}
-
 declare class ButtonComponent {
     color: _angular_core.InputSignal<StylingTheme>;
     type: _angular_core.InputSignal<"button" | "submit" | "reset">;
@@ -944,88 +1078,9 @@ declare enum FieldType {
     COUNTER = "counter",
     MONTH_PICKER = "monthPicker",
     TEMPLATE = "template",
-    OFFSET = "offset"
-}
-
-/** Translation config passed to kms-dropdown-from-data. */
-interface SelectTranslation {
-    path: string;
-    isPrefix?: boolean;
-    useKeyAsValue?: boolean;
-    service: any;
-}
-/** Options for FieldType.SELECT and FieldType.MULTI_SELECT. */
-interface SelectFieldOptions {
-    items?: LabelValuePair[] | Observable<LabelValuePair[]>;
-    plainItems?: string[];
-    enumItems?: any;
-    objItems?: {
-        data: any[];
-        mapKey: string;
-        mapValue?: string;
-    };
-    multiple?: boolean;
-    searchable?: boolean;
-    hasNullOption?: boolean;
-    selectAllText?: string;
-    disableOptions?: boolean;
-    useEnumIndexAsValue?: boolean;
-    preselectedKeys?: any;
-    translation?: SelectTranslation;
-}
-/** Options for FieldType.AUTOCOMPLETE. */
-interface AutocompleteFieldOptions {
-    items: LabelValuePair[] | Observable<LabelValuePair[]>;
-    minChars?: number;
-    selectFirst?: boolean;
+    OFFSET = "offset",
+    IMAGE_UPLOAD = "imageUpload"
 }
-/** Options for FieldType.NUMBER — numeric text input. */
-interface NumberFieldOptions {
-    min?: number;
-    max?: number;
-}
-/** Options for FieldType.COUNTER — passed to `kms-numeric-input`. */
-interface CounterFieldOptions {
-    min?: number;
-    max?: number;
-    step?: number;
-}
-/** Options for FieldType.DATE and FieldType.MONTH_PICKER. */
-interface DateFieldOptions {
-    min?: Date | string;
-    max?: Date | string;
-}
-/** Options for FieldType.DATE_RANGE. */
-interface DateRangeFieldOptions {
-    min?: Date | string;
-    max?: Date | string;
-    startKey: string;
-    endKey: string;
-}
-/** Options for FieldType.TIME — passed to `kms-time-input`. */
-interface TimeFieldOptions {
-    intervalMinutes?: number;
-    min?: string;
-    max?: string;
-}
-/** Options for FieldType.RADIO_GROUP — passed to `kms-radiogroup`. */
-interface RadioGroupFieldOptions {
-    items: LabelValuePair[] | string[];
-    layout?: 'horizontal' | 'vertical';
-    size?: string;
-}
-/** Options for FieldType.TEXTAREA. */
-interface TextareaFieldOptions {
-    rows?: number;
-    maxRows?: number;
-    autoResize?: boolean;
-}
-/** Options for FieldType.PASSWORD — passed to `kms-password`. */
-interface PasswordFieldOptions {
-    withStrength?: boolean;
-}
-/** Union of all type-specific option interfaces. Assign the one matching your FieldType. */
-type FieldTypeOptions = SelectFieldOptions | AutocompleteFieldOptions | NumberFieldOptions | CounterFieldOptions | DateFieldOptions | DateRangeFieldOptions | TimeFieldOptions | RadioGroupFieldOptions | TextareaFieldOptions | PasswordFieldOptions;
 
 /** Form layout mode. Currently only GRID is implemented. */
 declare enum FormLayout {
@@ -1243,6 +1298,7 @@ declare class DynamicFieldDirective implements OnDestroy {
     private mapSelectBehaviour;
     private mapPrefixSuffix;
     private mapPassword;
+    private mapImageUpload;
     private mapCounter;
     private trySetInput;
     private teardown;
@@ -1276,6 +1332,7 @@ declare class TextInputComponent implements ControlValueAccessor {
     readonly hintId: string;
     readonly errorId: string;
     errorStateMatcher: ErrorStateMatcher;
+    private readonly cd;
     onChange: (value?: string) => void;
     onTouched: () => void;
     valueChanged(event: Event): void;
@@ -1604,7 +1661,7 @@ declare class DateInputComponent implements ControlValueAccessor {
 
 declare class KmsUiPresentationalModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KmsUiPresentationalModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KmsUiPresentationalModule, [typeof BackToTopComponent, typeof CheckboxComponent, typeof ColorInputComponent, typeof DropdownFromDataComponent, typeof EnumRadiogroupComponent, typeof FileInputComponent, typeof FlyoutComponent, typeof ConfirmationDialogComponent, typeof ImageSliderComponent, typeof KMSAccordionItemComponent, typeof KmsUiPresentationalComponent, typeof LoaderComponent, typeof MapComponent, typeof RadioButtonComponent, typeof RadioGroupComponent, typeof SalutationDropdownComponent, typeof SalutationRadiogroupComponent, typeof SlideToggleComponent, typeof TimeInputComponent, typeof TooltipIconComponent, typeof YesNoRadiogroupComponent, typeof PasswordComponent, typeof SliderComponent, typeof CardComponent, typeof ButtonComponent, typeof NumericInputComponent, typeof GenericFormComponent, typeof FormSectionComponent, typeof FormFieldComponent, typeof FormActionsComponent, typeof DynamicFieldDirective, typeof TextInputComponent], [typeof i8.CommonModule, typeof i34.DragDropModule, typeof i35.MatCheckboxModule, typeof i36.MatButtonModule, typeof i37.MatRadioModule, typeof i38.MatDialogModule, typeof i39.FormsModule, typeof i39.ReactiveFormsModule, typeof i40.MatFormFieldModule, typeof i41.MatInputModule, typeof i42.MatMenuModule, typeof CustomPipesModule, typeof i44.GoogleMapsModule, typeof i45.MatExpansionModule, typeof i46.MatSelectModule, typeof i47.NgxMatSelectSearchModule, typeof i48.MatProgressSpinnerModule, typeof DirectivesModule, typeof i50.MatSlideToggleModule, typeof i51.TranslateModule, typeof i52.MatTooltipModule, typeof i53.NgxSliderModule, typeof i54.MatAutocompleteModule, typeof i55.MatListModule, typeof i56.MatCardModule, typeof i57.MatDatepickerModule, typeof i58.MatNativeDateModule, typeof IconComponent, typeof InlineAlertComponent, typeof DateInputComponent], [typeof BackToTopComponent, typeof CheckboxComponent, typeof ColorInputComponent, typeof DropdownFromDataComponent, typeof EnumRadiogroupComponent, typeof RadioGroupComponent, typeof FileInputComponent, typeof FlyoutComponent, typeof ConfirmationDialogComponent, typeof IconComponent, typeof ImageSliderComponent, typeof InlineAlertComponent, typeof KMSAccordionItemComponent, typeof KmsUiPresentationalComponent, typeof LoaderComponent, typeof MapComponent, typeof RadioButtonComponent, typeof SalutationDropdownComponent, typeof SalutationRadiogroupComponent, typeof SlideToggleComponent, typeof TimeInputComponent, typeof TooltipIconComponent, typeof YesNoRadiogroupComponent, typeof PasswordComponent, typeof SliderComponent, typeof CardComponent, typeof ButtonComponent, typeof NumericInputComponent, typeof GenericFormComponent, typeof FormSectionComponent, typeof FormActionsComponent, typeof DynamicFieldDirective, typeof DateInputComponent, typeof TextInputComponent]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KmsUiPresentationalModule, [typeof BackToTopComponent, typeof CheckboxComponent, typeof ColorInputComponent, typeof DropdownFromDataComponent, typeof EnumRadiogroupComponent, typeof FileInputComponent, typeof ImageUploadComponent, typeof FlyoutComponent, typeof ConfirmationDialogComponent, typeof ImageSliderComponent, typeof KMSAccordionItemComponent, typeof KmsUiPresentationalComponent, typeof LoaderComponent, typeof MapComponent, typeof RadioButtonComponent, typeof RadioGroupComponent, typeof SalutationDropdownComponent, typeof SalutationRadiogroupComponent, typeof SlideToggleComponent, typeof TimeInputComponent, typeof TooltipIconComponent, typeof YesNoRadiogroupComponent, typeof PasswordComponent, typeof SliderComponent, typeof CardComponent, typeof ButtonComponent, typeof NumericInputComponent, typeof GenericFormComponent, typeof FormSectionComponent, typeof FormFieldComponent, typeof FormActionsComponent, typeof DynamicFieldDirective, typeof TextInputComponent], [typeof i8.CommonModule, typeof i35.DragDropModule, typeof i36.MatCheckboxModule, typeof i37.MatButtonModule, typeof i38.MatRadioModule, typeof i39.MatDialogModule, typeof i40.FormsModule, typeof i40.ReactiveFormsModule, typeof i41.MatFormFieldModule, typeof i42.MatInputModule, typeof i43.MatMenuModule, typeof CustomPipesModule, typeof i45.GoogleMapsModule, typeof i46.MatExpansionModule, typeof i47.MatSelectModule, typeof i48.NgxMatSelectSearchModule, typeof i49.MatProgressSpinnerModule, typeof DirectivesModule, typeof i51.MatSlideToggleModule, typeof i52.TranslateModule, typeof i53.MatTooltipModule, typeof i54.NgxSliderModule, typeof i55.MatAutocompleteModule, typeof i56.MatListModule, typeof i57.MatCardModule, typeof i58.MatDatepickerModule, typeof i59.MatNativeDateModule, typeof IconComponent, typeof InlineAlertComponent, typeof DateInputComponent], [typeof BackToTopComponent, typeof CheckboxComponent, typeof ColorInputComponent, typeof DropdownFromDataComponent, typeof EnumRadiogroupComponent, typeof RadioGroupComponent, typeof FileInputComponent, typeof ImageUploadComponent, typeof FlyoutComponent, typeof ConfirmationDialogComponent, typeof IconComponent, typeof ImageSliderComponent, typeof InlineAlertComponent, typeof KMSAccordionItemComponent, typeof KmsUiPresentationalComponent, typeof LoaderComponent, typeof MapComponent, typeof RadioButtonComponent, typeof SalutationDropdownComponent, typeof SalutationRadiogroupComponent, typeof SlideToggleComponent, typeof TimeInputComponent, typeof TooltipIconComponent, typeof YesNoRadiogroupComponent, typeof PasswordComponent, typeof SliderComponent, typeof CardComponent, typeof ButtonComponent, typeof NumericInputComponent, typeof GenericFormComponent, typeof FormSectionComponent, typeof FormActionsComponent, typeof DynamicFieldDirective, typeof DateInputComponent, typeof TextInputComponent]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<KmsUiPresentationalModule>;
 }
 
@@ -1791,7 +1848,7 @@ declare class GenericFormModule {
     constructor(translate: TranslateService);
     private mergeMessages;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<GenericFormModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<GenericFormModule, never, [typeof i51.TranslateModule], never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<GenericFormModule, never, [typeof i52.TranslateModule], never>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<GenericFormModule>;
 }
 
@@ -1842,5 +1899,5 @@ declare class FieldRegistryService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<FieldRegistryService>;
 }
 
-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$1 as ImageSnippet, ImageSourceType$1 as 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 type { AsyncValidatorConfig, AutocompleteFieldOptions, CounterFieldOptions, DateFieldOptions, DateRangeFieldOptions, DateRangeValue, DialogConfig, DialogData, DisabledConfig, ErrorDisplayConfig, ErrorDisplayStrategy, FieldAffixConfig, FieldConfig, FieldTypeOptions, FormActionsConfig, FormSectionConfig, GenericFormConfig, GenericFormState, GridAlign, GridVerticalAlign, InlineAlertType, NullAble, NumberFieldOptions, PasswordFieldOptions, RadioGroupFieldOptions, RadiobuttonInterface, SelectFieldOptions, SelectTranslation, TextareaFieldOptions, TimeFieldOptions, ValidatorConfig };
+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$1 as ImageSnippet, ImageSourceType$1 as 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 };
+export type { AsyncValidatorConfig, AutocompleteFieldOptions, CounterFieldOptions, DateFieldOptions, DateRangeFieldOptions, DateRangeValue, DialogConfig, DialogData, DisabledConfig, ErrorDisplayConfig, ErrorDisplayStrategy, FieldAffixConfig, FieldConfig, FieldTypeOptions, FormActionsConfig, FormSectionConfig, GenericFormConfig, GenericFormState, GridAlign, GridVerticalAlign, ImagePosition, ImageUploadFieldOptions, InlineAlertType, NullAble, NumberFieldOptions, PasswordFieldOptions, RadioGroupFieldOptions, RadiobuttonInterface, SelectFieldOptions, SelectTranslation, TextareaFieldOptions, TimeFieldOptions, ValidatorConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kms-ngx-ui/presentational",
-  "version": "20.3.4",
+  "version": "20.4.0",
   "peerDependencies": {
     "@angular/cdk": "^20.2.14",
     "@angular/common": "^20.3.15",

package/src/assets/llms.txt

@@ -28,7 +28,7 @@ import { ComponentName } from '@kms-ngx-ui/presentational';
 **Inputs:**
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
-| `checked` | `boolean` | `false` |  |
+| `checked` | `boolean` | `-` |  |
 | `disabled` | `boolean` | `false` |  |
 | `infoText` | `string` | `''` |  |
 | `name` | `string` | `''` | Internal description name. All checkboxes with the same name belong to the same group. User can select none, one or all checkboxes with the same name. |
@@ -278,6 +278,22 @@ A confirmation dialog component
 | `deleteImageEvent` | `EventEmitter<number>` |
 | `orderChanged` | `EventEmitter<ImageSnippet[]>` |
 
+### `<kms-image-upload>` — ImageUploadComponent
+
+**Inputs:**
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `accept` | `string` | `'image/jpeg, image/jpg, image/png'` |  |
+| `disabled` | `boolean` | `false` |  |
+| `icon` | `string` | `'ic_edit'` |  |
+| `imageMaxHeight` | `string` | `'128px'` |  |
+| `imagePosition` | `ImagePosition` | `'top'` |  |
+| `label` | `string` | `'Upload'` |  |
+| `maxSizeBytes` | `number` | `DEFAULT_MAX_SIZE_BYTES` |  |
+| `removeIcon` | `string` | `'trash'` |  |
+| `removeLabel` | `string` | `''` |  |
+| `resizePixels` | `number` | `0` |  |
+
 ### `<kms-inline-alert>` — InlineAlertComponent
 
 **Inputs:**
@@ -608,6 +624,7 @@ Usage: `value | kmsTypeOf`
 - `MONTH_PICKER` = `monthPicker`
 - `TEMPLATE` = `template`
 - `OFFSET` = `offset`
+- `IMAGE_UPLOAD` = `imageUpload`
 
 ### FormLayout
 - `VERTICAL` = `vertical`
@@ -813,6 +830,17 @@ Usage: `value | kmsTypeOf`
 - `untouched`: `boolean`
 - `valid`: `boolean`
 
+### ImageUploadFieldOptions
+- `accept`: `string` (optional)
+- `buttonIcon`: `string` (optional)
+- `buttonLabel`: `string` (optional)
+- `imageMaxHeight`: `string` (optional)
+- `imagePosition`: `ImagePosition` (optional)
+- `maxSizeBytes`: `number` (optional)
+- `removeIcon`: `string` (optional)
+- `removeLabel`: `string` (optional)
+- `resizePixels`: `number` (optional)
+
 ### ITranslation
 - `isPrefix`: `boolean` (optional)
 - `path`: `string`

package/src/lib/ui/molecules/image-upload/image-upload.component.scss

@@ -0,0 +1,106 @@
+@mixin image-upload-theme() {
+  .kms-image-upload {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 12px;
+
+    &--top {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    &--bottom {
+      flex-direction: column-reverse;
+      align-items: center;
+    }
+
+    &--left {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    &--right {
+      flex-direction: row-reverse;
+      align-items: center;
+    }
+
+    &__image {
+      display: block;
+      max-width: 100%;
+      object-fit: contain;
+      border-radius: 4px;
+      border: 1px solid var(--kms-tertiary-20, #e0e0e0);
+    }
+
+    &__actions {
+      display: flex;
+      gap: 4px;
+
+      &--horizontal {
+        flex-direction: row;
+        align-items: center;
+      }
+
+      &--vertical {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+    }
+  }
+}
+
+// Apply styles directly for component encapsulation
+:host {
+  display: block;
+}
+
+.kms-image-upload {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 12px;
+
+  &--top {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &--bottom {
+    flex-direction: column-reverse;
+    align-items: center;
+  }
+
+  &--left {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &--right {
+    flex-direction: row-reverse;
+    align-items: center;
+  }
+
+  &__image {
+    display: block;
+    max-width: 100%;
+    object-fit: contain;
+    border-radius: 4px;
+    border: 1px solid var(--kms-tertiary-20, #e0e0e0);
+  }
+
+  &__actions {
+    display: flex;
+    gap: 4px;
+
+    &--horizontal {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    &--vertical {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+}