spiderly 19.8.0 → 19.8.2

package/fesm2022/spiderly.mjs

@@ -14,6 +14,10 @@ import * as i4$1 from 'primeng/datepicker';
 import { DatePickerModule } from 'primeng/datepicker';
 import * as i5 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
+import * as FileSaver from 'file-saver';
+import mime from 'mime';
+import 'reflect-metadata';
+import { map, Subject, throttleTime, BehaviorSubject, of, filter as filter$1, firstValueFrom, finalize as finalize$1, tap as tap$1 } from 'rxjs';
 import * as i4$2 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
 import * as i4$3 from 'primeng/colorpicker';
@@ -38,12 +42,8 @@ import * as i12 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i1$4 from 'primeng/splitbutton';
 import { SplitButtonModule } from 'primeng/splitbutton';
-import { Subject, throttleTime, map, BehaviorSubject, of, filter as filter$1, firstValueFrom, finalize as finalize$1, tap as tap$1 } from 'rxjs';
 import * as i3$2 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
-import * as FileSaver from 'file-saver';
-import mime from 'mime';
-import 'reflect-metadata';
 import * as i1$1 from 'primeng/api';
 import { ConfirmationService } from 'primeng/api';
 import * as i1$2 from '@angular/common/http';
@@ -452,142 +452,500 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 type: Input
             }] } });
 
-class SpiderlyCalendarComponent extends BaseControl {
-    constructor(translocoService) {
-        super(translocoService);
-        this.translocoService = translocoService;
-        this.showTime = false;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-    }
-    setDate(event) { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyCalendarComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyCalendarComponent, isStandalone: true, selector: "spiderly-calendar", inputs: { showTime: "showTime" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div\n    *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\"\n    style=\"display: flex; align-items: center\"\n  >\n    <div>\n      <label>{{ getTranslatedLabel() }}</label>\n      <required *ngIf=\"control?.required && showRequired\"></required>\n    </div>\n    <!-- tabindex=\"-1\": Makes the element focusable, but removes it from the tab order. -->\n    <i\n      *ngIf=\"showTooltip\"\n      class=\"{{ tooltipIcon }}\"\n      style=\"margin-left: 8px; cursor: pointer\"\n      [pTooltip]=\"tooltipText\"\n      tabindex=\"-1\"\n      tooltipEvent=\"focus\"\n    ></i>\n  </div>\n  <p-datepicker\n    *ngIf=\"control\"\n    [formControl]=\"control\"\n    (onBlur)=\"control.markAsDirty()\"\n    dateFormat=\"dd.mm.yy.\"\n    iconDisplay=\"input\"\n    [showIcon]=\"true\"\n    [showTime]=\"showTime\"\n    (onSelect)=\"setDate($event)\"\n    appendTo=\"body\"\n    [fluid]=\"true\"\n  />\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i4$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
+// Helper function for PrecisionScale validation (to be added in the TypeScript output):
+function validatePrecisionScale(value, precision, scale, ignoreTrailingZeros) {
+    if (typeof value !== 'number')
+        return false;
+    const [integerPart, decimalPart] = value.toString().split('.');
+    if (integerPart.length > precision - scale)
+        return false;
+    if (decimalPart && decimalPart.length > scale)
+        return false;
+    if (!ignoreTrailingZeros &&
+        decimalPart &&
+        decimalPart.replace(/0+$/, '').length > scale)
+        return false;
+    return true;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyCalendarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'spiderly-calendar', imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        FormsModule,
-                        DatePickerModule,
-                        TooltipModule,
-                        RequiredComponent,
-                    ], template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div\n    *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\"\n    style=\"display: flex; align-items: center\"\n  >\n    <div>\n      <label>{{ getTranslatedLabel() }}</label>\n      <required *ngIf=\"control?.required && showRequired\"></required>\n    </div>\n    <!-- tabindex=\"-1\": Makes the element focusable, but removes it from the tab order. -->\n    <i\n      *ngIf=\"showTooltip\"\n      class=\"{{ tooltipIcon }}\"\n      style=\"margin-left: 8px; cursor: pointer\"\n      [pTooltip]=\"tooltipText\"\n      tabindex=\"-1\"\n      tooltipEvent=\"focus\"\n    ></i>\n  </div>\n  <p-datepicker\n    *ngIf=\"control\"\n    [formControl]=\"control\"\n    (onBlur)=\"control.markAsDirty()\"\n    dateFormat=\"dd.mm.yy.\"\n    iconDisplay=\"input\"\n    [showIcon]=\"true\"\n    [showTime]=\"showTime\"\n    (onSelect)=\"setDate($event)\"\n    appendTo=\"body\"\n    [fluid]=\"true\"\n  />\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.TranslocoService }], propDecorators: { showTime: [{
-                type: Input
-            }] } });
-
-class SpiderlyCheckboxComponent extends BaseControl {
-    constructor(translocoService) {
-        super(translocoService);
-        this.translocoService = translocoService;
-        this.fakeLabel = true;
-        this.initializeToFalse = false;
-        this.inlineLabel = false;
-        this.onChange = new EventEmitter();
-        this.change = (event) => {
-            this.onChange.next(event);
-        };
+function getMimeTypeForFileName(fileName) {
+    return mime.getType(fileName) ?? 'application/octet-stream';
+}
+function adjustColor(color, percent) {
+    if (!/^#([0-9A-F]{3}){1,2}$/i.test(color)) {
+        console.error('Invalid hex color format');
     }
-    ngOnInit() {
-        if (this.initializeToFalse == true)
-            this.control.setValue(false);
-        super.ngOnInit();
+    let r, g, b;
+    if (color.length === 7) {
+        r = parseInt(color.slice(1, 3), 16);
+        g = parseInt(color.slice(3, 5), 16);
+        b = parseInt(color.slice(5, 7), 16);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyCheckboxComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyCheckboxComponent, isStandalone: true, selector: "spiderly-checkbox", inputs: { fakeLabel: "fakeLabel", initializeToFalse: "initializeToFalse", inlineLabel: "inlineLabel" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div\n    *ngIf=\"\n      inlineLabel === false &&\n      getTranslatedLabel() != '' &&\n      getTranslatedLabel() != null\n    \"\n  >\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n  <div style=\"margin-top: 0.5rem; position: relative\">\n    <!-- The margin-top is intentional: it vertically aligns the checkbox with other input controls that have greater height. -->\n    <p-checkbox\n      *ngIf=\"control\"\n      [formControl]=\"control\"\n      [value]=\"inlineLabel ? label : null\"\n      [id]=\"label\"\n      [binary]=\"true\"\n      (onChange)=\"change($event)\"\n    />\n  </div>\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n", styles: ["::ng-deep .p-checkbox-false .p-checkbox-box{border-color:var(--p-checkbox-checked-border-color);background:var(--p-checkbox-checked-background)}::ng-deep .p-checkbox-false .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--p-checkbox-checked-hover-border-color);background:var(--p-checkbox-checked-hover-background)}::ng-deep .p-checkbox-false .p-checkbox-false:has(.p-checkbox.p-disabled) .p-checkbox-false-icon{color:var(--p-checkbox-icon-disabled-color)}.p-checkbox-false-icon{position:absolute;top:3px;left:2.7px;font-size:12.25px;color:var(--p-checkbox-icon-checked-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
+    else {
+        r = parseInt(color[1] + color[1], 16);
+        g = parseInt(color[2] + color[2], 16);
+        b = parseInt(color[3] + color[3], 16);
+    }
+    const adjust = (value, percent) => {
+        const amount = (percent / 100) * 255;
+        const newValue = Math.min(Math.max(value + amount, 0), 255);
+        return Math.round(newValue);
+    };
+    r = adjust(r, percent);
+    g = adjust(g, percent);
+    b = adjust(b, percent);
+    const toHex = (value) => {
+        const hex = value.toString(16).padStart(2, '0');
+        return hex;
+    };
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyCheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'spiderly-checkbox', imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        FormsModule,
-                        CheckboxModule,
-                        RequiredComponent,
-                    ], template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div\n    *ngIf=\"\n      inlineLabel === false &&\n      getTranslatedLabel() != '' &&\n      getTranslatedLabel() != null\n    \"\n  >\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n  <div style=\"margin-top: 0.5rem; position: relative\">\n    <!-- The margin-top is intentional: it vertically aligns the checkbox with other input controls that have greater height. -->\n    <p-checkbox\n      *ngIf=\"control\"\n      [formControl]=\"control\"\n      [value]=\"inlineLabel ? label : null\"\n      [id]=\"label\"\n      [binary]=\"true\"\n      (onChange)=\"change($event)\"\n    />\n  </div>\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n", styles: ["::ng-deep .p-checkbox-false .p-checkbox-box{border-color:var(--p-checkbox-checked-border-color);background:var(--p-checkbox-checked-background)}::ng-deep .p-checkbox-false .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--p-checkbox-checked-hover-border-color);background:var(--p-checkbox-checked-hover-background)}::ng-deep .p-checkbox-false .p-checkbox-false:has(.p-checkbox.p-disabled) .p-checkbox-false-icon{color:var(--p-checkbox-icon-disabled-color)}.p-checkbox-false-icon{position:absolute;top:3px;left:2.7px;font-size:12.25px;color:var(--p-checkbox-icon-checked-color)}\n"] }]
-        }], ctorParameters: () => [{ type: i1.TranslocoService }], propDecorators: { fakeLabel: [{
-                type: Input
-            }], initializeToFalse: [{
-                type: Input
-            }], inlineLabel: [{
-                type: Input
-            }], onChange: [{
-                type: Output
-            }] } });
-
-class SpiderlyColorPickerComponent extends BaseControl {
-    constructor(translocoService) {
-        super(translocoService);
-        this.translocoService = translocoService;
-        this.showInputTextField = true;
+// new Date('yyyy-MM-dd') is parsed as UTC midnight per the JS spec, which shifts to the previous day
+// in negative-UTC locales. Construct via numeric components to anchor at local midnight instead.
+function parseDateOnlyLocal(s) {
+    const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(s);
+    if (!m)
+        return null;
+    return new Date(+m[1], +m[2] - 1, +m[3]);
+}
+function getHtmlImgDisplayString64(base64String) {
+    if (base64String == null)
+        return null;
+    const [header, base64Content] = base64String.split(';base64,');
+    const fileName = header.split('=')[1];
+    const mimeType = getMimeTypeForFileName(fileName);
+    return `data:${mimeType};base64, ${base64Content}`;
+}
+function nameof(key1, key2) {
+    return key2 ?? key1;
+}
+function nameOf(funcOrClass) {
+    return funcOrClass.name;
+}
+function getParentUrl(currentUrl) {
+    const urlSegments = currentUrl.split('/');
+    urlSegments.pop();
+    const parentUrl = urlSegments.join('/');
+    return parentUrl;
+}
+// export function getMonth(number: number): string {
+//   const months: string[] = [
+//     "January", "February", "March", "April", "May", "June",
+//     "July", "August", "September", "October", "November", "December"
+//   ];
+//   if (number < 1 || number > 12) {
+//     throw new Error("Invalid month number. It should be between 1 and 12.");
+//   }
+//   return months[number - 1];
+// }
+function getMonth(numberOfTheMonth) {
+    const meseci = [
+        'Januar',
+        'Februar',
+        'Mart',
+        'April',
+        'Maj',
+        'Jun',
+        'Jul',
+        'Avgust',
+        'Septembar',
+        'Oktobar',
+        'Novembar',
+        'Decembar',
+    ];
+    if (numberOfTheMonth < 1 || numberOfTheMonth > 12) {
+        console.error('Nevažeći broj meseca. Broj treba biti između 1 i 12.');
     }
-    ngOnInit() {
-        this.control.valueChanges.subscribe((value) => {
-            this.control.setValue(value, { emitEvent: false }); // Preventing infinite loop
-        });
-        if (this.control.value == null)
-            this.placeholder = this.translocoService.translate('ColorPickerPlaceholder');
-        super.ngOnInit();
+    return meseci[numberOfTheMonth - 1];
+}
+function singleOrDefault(array, predicate) {
+    const filtered = array.filter(predicate);
+    if (filtered.length > 1) {
+        throw new Error('Sequence contains more than one matching element.');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyColorPickerComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyColorPickerComponent, isStandalone: true, selector: "spiderly-colorpicker", inputs: { showInputTextField: "showInputTextField" }, usesInheritance: true, ngImport: i0, template: "<!-- Can't put (onBlur) in this control -->\n\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n  <div style=\"display: flex; gap: 10px\">\n    <input\n      *ngIf=\"control && showInputTextField\"\n      pInputText\n      [placeholder]=\"placeholder\"\n      [formControl]=\"control\"\n      [id]=\"control.label\"\n      (blur)=\"control.markAsDirty()\"\n      [fluid]=\"true\"\n    />\n    <p-colorpicker\n      *ngIf=\"control\"\n      [formControl]=\"control\"\n      [id]=\"control.label\"\n      (blur)=\"control.markAsDirty()\"\n      appendTo=\"body\"\n    ></p-colorpicker>\n  </div>\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i4$3.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "autofocus"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
+    return filtered[0];
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyColorPickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'spiderly-colorpicker', imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        FormsModule,
-                        ColorPickerModule,
-                        InputTextModule,
-                        RequiredComponent,
-                    ], template: "<!-- Can't put (onBlur) in this control -->\n\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n  <div style=\"display: flex; gap: 10px\">\n    <input\n      *ngIf=\"control && showInputTextField\"\n      pInputText\n      [placeholder]=\"placeholder\"\n      [formControl]=\"control\"\n      [id]=\"control.label\"\n      (blur)=\"control.markAsDirty()\"\n      [fluid]=\"true\"\n    />\n    <p-colorpicker\n      *ngIf=\"control\"\n      [formControl]=\"control\"\n      [id]=\"control.label\"\n      (blur)=\"control.markAsDirty()\"\n      appendTo=\"body\"\n    ></p-colorpicker>\n  </div>\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.TranslocoService }], propDecorators: { showInputTextField: [{
-                type: Input
-            }] } });
-
-class SpiderlyMultiAutocompleteComponent extends BaseAutocompleteControl {
-    constructor(translocoService) {
-        super(translocoService);
-        this.translocoService = translocoService;
+function pushAction(cols, action) {
+    const actionsColumn = singleOrDefault(cols, (x) => x.actions != null);
+    if (actionsColumn) {
+        actionsColumn.actions = [...actionsColumn.actions, action];
     }
-    ngOnInit() {
-        super.ngOnInit();
+}
+function deleteAction(cols, actionField) {
+    const actionsColumn = singleOrDefault(cols, (x) => x.actions != null);
+    if (actionsColumn && actionsColumn.actions) {
+        const index = actionsColumn.actions.findIndex((a) => a.field === actionField);
+        if (index !== -1) {
+            actionsColumn.actions.splice(index, 1);
+        }
     }
-    search(event) {
-        this.onTextInput.next(event);
+}
+function getFileNameFromContentDisposition(resp, defaultName) {
+    let fileName;
+    if (resp && resp.headers && resp.headers.get('Content-Disposition')) {
+        let val = resp.headers.get('Content-Disposition');
+        let start = val.indexOf('filename=');
+        if (start != -1) {
+            let end = val.indexOf(';', start);
+            fileName =
+                end != -1 ? val.substring(start + 9, end) : val.substring(start + 9);
+            fileName = fileName.split('"').join('');
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMultiAutocompleteComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyMultiAutocompleteComponent, isStandalone: true, selector: "spiderly-multiautocomplete", usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n    <div>\n      <label>{{ getTranslatedLabel() }}</label>\n      <required *ngIf=\"control?.required && showRequired\"></required>\n    </div>\n\n    <!-- Don't support p-inputgroup -->\n    <!-- Showing label fix: https://github.com/primefaces/primeng/issues/17332#issuecomment-2922861294 -->\n    <p-autocomplete\n      *ngIf=\"control\"\n      [id]=\"label\"\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [suggestions]=\"options\"\n      (completeMethod)=\"search($event)\"\n      [forceSelection]=\"true\"\n      [multiple]=\"true\"\n      [dropdown]=\"false\"\n      [showClear]=\"true\"\n      (onHide)=\"dropdownMarkAsDirty()\"\n      [completeOnFocus]=\"true\"\n      dropdownIcon=\"pi pi-plus\"\n      [fluid]=\"true\"\n      [style]=\"{ width: '100%' }\"\n      appendTo=\"body\"\n      optionLabel=\"displayName\"\n      dataKey=\"id\"\n    >\n    </p-autocomplete>\n    <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n      {{ getValidationErrrorMessages() }}\n    </small>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i4.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RequiredComponent, selector: "required" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    return fileName ?? defaultName;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMultiAutocompleteComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'spiderly-multiautocomplete', imports: [
-                        ReactiveFormsModule,
-                        FormsModule,
-                        AutoCompleteModule,
-                        CommonModule,
-                        RequiredComponent,
-                        TranslocoDirective,
-                    ], template: "<ng-container *transloco=\"let t\">\n  <div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n    <div>\n      <label>{{ getTranslatedLabel() }}</label>\n      <required *ngIf=\"control?.required && showRequired\"></required>\n    </div>\n\n    <!-- Don't support p-inputgroup -->\n    <!-- Showing label fix: https://github.com/primefaces/primeng/issues/17332#issuecomment-2922861294 -->\n    <p-autocomplete\n      *ngIf=\"control\"\n      [id]=\"label\"\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [suggestions]=\"options\"\n      (completeMethod)=\"search($event)\"\n      [forceSelection]=\"true\"\n      [multiple]=\"true\"\n      [dropdown]=\"false\"\n      [showClear]=\"true\"\n      (onHide)=\"dropdownMarkAsDirty()\"\n      [completeOnFocus]=\"true\"\n      dropdownIcon=\"pi pi-plus\"\n      [fluid]=\"true\"\n      [style]=\"{ width: '100%' }\"\n      appendTo=\"body\"\n      optionLabel=\"displayName\"\n      dataKey=\"id\"\n    >\n    </p-autocomplete>\n    <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n      {{ getValidationErrrorMessages() }}\n    </small>\n  </div>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: i1.TranslocoService }] });
-
-class SpiderlyPasswordComponent extends BaseControl {
-    constructor(translocoService) {
-        super(translocoService);
-        this.translocoService = translocoService;
-        this.showPasswordStrength = false;
+function toCommaSeparatedString(input) {
+    const stringList = input.map((item) => item?.toString() ?? '');
+    if (stringList.length > 1) {
+        return `${stringList.slice(0, -1).join(', ')} and ${stringList[stringList.length - 1]}`;
     }
-    ngOnInit() {
-        super.ngOnInit();
+    else {
+        return stringList[0] ?? '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyPasswordComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyPasswordComponent, isStandalone: true, selector: "spiderly-password", inputs: { showPasswordStrength: "showPasswordStrength" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div>\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n  <p-password\n    *ngIf=\"control\"\n    [formControl]=\"control\"\n    [id]=\"control?.label\"\n    [toggleMask]=\"true\"\n    [feedback]=\"showPasswordStrength\"\n    (onBlur)=\"control?.markAsDirty()\"\n    [style]=\"{ width: '100%' }\"\n    [inputStyle]=\"{ width: '100%' }\"\n  />\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i4$4.Password, selector: "p-password", inputs: ["ariaLabel", "fluid", "ariaLabelledBy", "label", "disabled", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "appendTo", "toggleMask", "size", "inputStyleClass", "styleClass", "style", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "variant", "tabindex"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyPasswordComponent, decorators: [{
+function isFileImageType(mimeType) {
+    if (mimeType.startsWith('image/')) {
+        return true;
+    }
+    return false;
+}
+function isExcelFileType(mimeType) {
+    if (mimeType ===
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+        mimeType === 'application/vnd.ms-excel') {
+        return true;
+    }
+    return false;
+}
+function exportListToExcel(exportListToExcelObservableMethod, filter) {
+    exportListToExcelObservableMethod(filter).subscribe((res) => {
+        let fileName = getFileNameFromContentDisposition(res, 'ExcelExport.xlsx');
+        FileSaver.saveAs(res.body, decodeURIComponent(fileName));
+    });
+}
+function getPrimengDropdownNamebookOptions(getDropdownListObservable, parentEntityId) {
+    return getDropdownListObservable(parentEntityId ?? 0).pipe(map((res) => {
+        return res.map((x) => ({ label: x.displayName, code: x.id }));
+    }));
+}
+function getPrimengDropdownCodebookOptions(getDropdownListObservable) {
+    return getDropdownListObservable().pipe(map((res) => {
+        return res.map((x) => ({ label: x.displayName, code: x.code }));
+    }));
+}
+function getPrimengAutocompleteNamebookOptions(getAutocompleteListObservable, limit, query, parentEntityId) {
+    return getAutocompleteListObservable(limit, query, parentEntityId ?? 0).pipe(map((res) => {
+        return res.map((x) => ({ label: x.displayName, code: x.id }));
+    }));
+}
+function getPrimengAutocompleteCodebookOptions(getAutocompleteListObservable, limit, query) {
+    return getAutocompleteListObservable(limit, query).pipe(map((res) => {
+        return res.map((x) => ({ label: x.displayName, code: x.code }));
+    }));
+}
+const isNullOrEmpty = (input) => {
+    if (input == null || input === '') {
+        return true;
+    }
+    return false;
+};
+const selectedTab = (tabs) => {
+    const tab = singleOrDefault(tabs, (x) => x.isSelected);
+    if (tab) {
+        return tab.id;
+    }
+    else {
+        return null;
+    }
+};
+function firstCharToUpper(input) {
+    return input.charAt(0).toUpperCase() + input.slice(1);
+}
+function splitPascalCase(input) {
+    const regex = /($[a-z])|[A-Z][^A-Z]+/g;
+    return input.match(regex).join(' ');
+}
+function capitalizeFirstChar(str) {
+    if (!str)
+        return str;
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+function kebabToTitleCase(input) {
+    return input
+        .split('-')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+}
+/**
+ * Custom styling of the google button - https://medium.com/simform-engineering/implement-custom-google-sign-in-using-angular-16-9c93aeff6252
+ */
+function createFakeGoogleWrapper() {
+    const googleLoginWrapper = document.createElement('div');
+    googleLoginWrapper.style.display = 'none';
+    googleLoginWrapper.classList.add('custom-google-button');
+    document.body.appendChild(googleLoginWrapper);
+    window.google.accounts.id.renderButton(googleLoginWrapper, {
+        type: 'icon',
+        width: '200',
+    });
+    const googleLoginWrapperButton = googleLoginWrapper.querySelector('div[role=button]');
+    return {
+        click: () => {
+            googleLoginWrapperButton?.click();
+        },
+    };
+}
+const PROPS_KEY = Symbol('props');
+function ReflectProp(target, propertyKey) {
+    const props = Reflect.getMetadata(PROPS_KEY, target) || [];
+    Reflect.defineMetadata(PROPS_KEY, [...props, propertyKey], target);
+}
+const primitiveArrayTypes = [
+    'Namebook[]',
+    'number[]',
+    'Date[]',
+    'string[]',
+];
+function getImageDimensions(file) {
+    return new Promise((resolve) => {
+        const img = new Image();
+        img.onload = () => {
+            resolve({ width: img.width, height: img.height });
+            URL.revokeObjectURL(img.src);
+        };
+        img.src = URL.createObjectURL(file);
+    });
+}
+
+class SpiderlyCalendarComponent extends BaseControl {
+    constructor(translocoService) {
+        super(translocoService);
+        this.translocoService = translocoService;
+        this.showTime = false;
+        this.dateOnly = false;
+        this.timeOnly = false;
+        this.internalControl = new FormControl(null);
+        this.syncing = false;
+        this.subscriptions = [];
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        if (!this.usesStringProxy() || !this.control)
+            return;
+        this.applyFromOuter(this.control.value);
+        if (this.control.disabled)
+            this.internalControl.disable({ emitEvent: false });
+        this.subscriptions.push(this.control.valueChanges.subscribe((v) => {
+            if (!this.syncing)
+                this.applyFromOuter(v);
+        }));
+        this.subscriptions.push(this.control.statusChanges.subscribe((status) => {
+            if (status === 'DISABLED' && this.internalControl.enabled)
+                this.internalControl.disable({ emitEvent: false });
+            else if (status !== 'DISABLED' && this.internalControl.disabled)
+                this.internalControl.enable({ emitEvent: false });
+        }));
+        this.subscriptions.push(this.internalControl.valueChanges.subscribe((d) => {
+            if (!this.syncing)
+                this.applyToOuter(d);
+        }));
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach((s) => s.unsubscribe());
+    }
+    setDate(event) { }
+    usesStringProxy() {
+        return this.dateOnly || this.timeOnly;
+    }
+    applyFromOuter(v) {
+        this.syncing = true;
+        try {
+            if (v == null) {
+                this.internalControl.setValue(null);
+            }
+            else if (this.dateOnly && typeof v === 'string') {
+                this.internalControl.setValue(parseDateOnlyLocal(v));
+            }
+            else if (this.timeOnly && typeof v === 'string') {
+                this.internalControl.setValue(this.parseTimeOnly(v));
+            }
+            else if (v instanceof Date) {
+                this.internalControl.setValue(v);
+            }
+            else {
+                this.internalControl.setValue(null);
+            }
+        }
+        finally {
+            this.syncing = false;
+        }
+    }
+    applyToOuter(d) {
+        this.syncing = true;
+        try {
+            if (d == null) {
+                this.control.setValue(null);
+            }
+            else if (this.dateOnly) {
+                this.control.setValue(this.formatDateOnly(d));
+            }
+            else if (this.timeOnly) {
+                this.control.setValue(this.formatTimeOnly(d));
+            }
+            else {
+                this.control.setValue(d);
+            }
+        }
+        finally {
+            this.syncing = false;
+        }
+    }
+    parseTimeOnly(s) {
+        const m = /^(\d{2}):(\d{2})(?::(\d{2}))?/.exec(s);
+        if (!m)
+            return null;
+        const d = new Date();
+        d.setHours(+m[1], +m[2], +(m[3] ?? 0), 0);
+        return d;
+    }
+    formatDateOnly(d) {
+        return `${d.getFullYear()}-${this.pad(d.getMonth() + 1)}-${this.pad(d.getDate())}`;
+    }
+    formatTimeOnly(d) {
+        return `${this.pad(d.getHours())}:${this.pad(d.getMinutes())}:${this.pad(d.getSeconds())}`;
+    }
+    pad(n) {
+        return String(n).padStart(2, '0');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyCalendarComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyCalendarComponent, isStandalone: true, selector: "spiderly-calendar", inputs: { showTime: "showTime", dateOnly: "dateOnly", timeOnly: "timeOnly" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div\n    *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\"\n    style=\"display: flex; align-items: center\"\n  >\n    <div>\n      <label>{{ getTranslatedLabel() }}</label>\n      <required *ngIf=\"control?.required && showRequired\"></required>\n    </div>\n    <!-- tabindex=\"-1\": Makes the element focusable, but removes it from the tab order. -->\n    <i\n      *ngIf=\"showTooltip\"\n      class=\"{{ tooltipIcon }}\"\n      style=\"margin-left: 8px; cursor: pointer\"\n      [pTooltip]=\"tooltipText\"\n      tabindex=\"-1\"\n      tooltipEvent=\"focus\"\n    ></i>\n  </div>\n  <p-datepicker\n    *ngIf=\"control\"\n    [formControl]=\"usesStringProxy() ? internalControl : control\"\n    (onBlur)=\"control.markAsDirty()\"\n    [dateFormat]=\"timeOnly ? '' : 'dd.mm.yy.'\"\n    iconDisplay=\"input\"\n    [showIcon]=\"true\"\n    [showTime]=\"!usesStringProxy() && showTime\"\n    [timeOnly]=\"timeOnly\"\n    (onSelect)=\"setDate($event)\"\n    appendTo=\"body\"\n    [fluid]=\"true\"\n  />\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i4$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spiderly-calendar', imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        DatePickerModule,
+                        TooltipModule,
+                        RequiredComponent,
+                    ], template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div\n    *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\"\n    style=\"display: flex; align-items: center\"\n  >\n    <div>\n      <label>{{ getTranslatedLabel() }}</label>\n      <required *ngIf=\"control?.required && showRequired\"></required>\n    </div>\n    <!-- tabindex=\"-1\": Makes the element focusable, but removes it from the tab order. -->\n    <i\n      *ngIf=\"showTooltip\"\n      class=\"{{ tooltipIcon }}\"\n      style=\"margin-left: 8px; cursor: pointer\"\n      [pTooltip]=\"tooltipText\"\n      tabindex=\"-1\"\n      tooltipEvent=\"focus\"\n    ></i>\n  </div>\n  <p-datepicker\n    *ngIf=\"control\"\n    [formControl]=\"usesStringProxy() ? internalControl : control\"\n    (onBlur)=\"control.markAsDirty()\"\n    [dateFormat]=\"timeOnly ? '' : 'dd.mm.yy.'\"\n    iconDisplay=\"input\"\n    [showIcon]=\"true\"\n    [showTime]=\"!usesStringProxy() && showTime\"\n    [timeOnly]=\"timeOnly\"\n    (onSelect)=\"setDate($event)\"\n    appendTo=\"body\"\n    [fluid]=\"true\"\n  />\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.TranslocoService }], propDecorators: { showTime: [{
+                type: Input
+            }], dateOnly: [{
+                type: Input
+            }], timeOnly: [{
+                type: Input
+            }] } });
+
+class SpiderlyCheckboxComponent extends BaseControl {
+    constructor(translocoService) {
+        super(translocoService);
+        this.translocoService = translocoService;
+        this.fakeLabel = true;
+        this.initializeToFalse = false;
+        this.inlineLabel = false;
+        this.onChange = new EventEmitter();
+        this.change = (event) => {
+            this.onChange.next(event);
+        };
+    }
+    ngOnInit() {
+        if (this.initializeToFalse == true)
+            this.control.setValue(false);
+        super.ngOnInit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyCheckboxComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyCheckboxComponent, isStandalone: true, selector: "spiderly-checkbox", inputs: { fakeLabel: "fakeLabel", initializeToFalse: "initializeToFalse", inlineLabel: "inlineLabel" }, outputs: { onChange: "onChange" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div\n    *ngIf=\"\n      inlineLabel === false &&\n      getTranslatedLabel() != '' &&\n      getTranslatedLabel() != null\n    \"\n  >\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n  <div style=\"margin-top: 0.5rem; position: relative\">\n    <!-- The margin-top is intentional: it vertically aligns the checkbox with other input controls that have greater height. -->\n    <p-checkbox\n      *ngIf=\"control\"\n      [formControl]=\"control\"\n      [value]=\"inlineLabel ? label : null\"\n      [id]=\"label\"\n      [binary]=\"true\"\n      (onChange)=\"change($event)\"\n    />\n  </div>\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n", styles: ["::ng-deep .p-checkbox-false .p-checkbox-box{border-color:var(--p-checkbox-checked-border-color);background:var(--p-checkbox-checked-background)}::ng-deep .p-checkbox-false .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--p-checkbox-checked-hover-border-color);background:var(--p-checkbox-checked-hover-background)}::ng-deep .p-checkbox-false .p-checkbox-false:has(.p-checkbox.p-disabled) .p-checkbox-false-icon{color:var(--p-checkbox-icon-disabled-color)}.p-checkbox-false-icon{position:absolute;top:3px;left:2.7px;font-size:12.25px;color:var(--p-checkbox-icon-checked-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spiderly-checkbox', imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        CheckboxModule,
+                        RequiredComponent,
+                    ], template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div\n    *ngIf=\"\n      inlineLabel === false &&\n      getTranslatedLabel() != '' &&\n      getTranslatedLabel() != null\n    \"\n  >\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n  <div style=\"margin-top: 0.5rem; position: relative\">\n    <!-- The margin-top is intentional: it vertically aligns the checkbox with other input controls that have greater height. -->\n    <p-checkbox\n      *ngIf=\"control\"\n      [formControl]=\"control\"\n      [value]=\"inlineLabel ? label : null\"\n      [id]=\"label\"\n      [binary]=\"true\"\n      (onChange)=\"change($event)\"\n    />\n  </div>\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n", styles: ["::ng-deep .p-checkbox-false .p-checkbox-box{border-color:var(--p-checkbox-checked-border-color);background:var(--p-checkbox-checked-background)}::ng-deep .p-checkbox-false .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--p-checkbox-checked-hover-border-color);background:var(--p-checkbox-checked-hover-background)}::ng-deep .p-checkbox-false .p-checkbox-false:has(.p-checkbox.p-disabled) .p-checkbox-false-icon{color:var(--p-checkbox-icon-disabled-color)}.p-checkbox-false-icon{position:absolute;top:3px;left:2.7px;font-size:12.25px;color:var(--p-checkbox-icon-checked-color)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.TranslocoService }], propDecorators: { fakeLabel: [{
+                type: Input
+            }], initializeToFalse: [{
+                type: Input
+            }], inlineLabel: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+
+class SpiderlyColorPickerComponent extends BaseControl {
+    constructor(translocoService) {
+        super(translocoService);
+        this.translocoService = translocoService;
+        this.showInputTextField = true;
+    }
+    ngOnInit() {
+        this.control.valueChanges.subscribe((value) => {
+            this.control.setValue(value, { emitEvent: false }); // Preventing infinite loop
+        });
+        if (this.control.value == null)
+            this.placeholder = this.translocoService.translate('ColorPickerPlaceholder');
+        super.ngOnInit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyColorPickerComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyColorPickerComponent, isStandalone: true, selector: "spiderly-colorpicker", inputs: { showInputTextField: "showInputTextField" }, usesInheritance: true, ngImport: i0, template: "<!-- Can't put (onBlur) in this control -->\n\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n  <div style=\"display: flex; gap: 10px\">\n    <input\n      *ngIf=\"control && showInputTextField\"\n      pInputText\n      [placeholder]=\"placeholder\"\n      [formControl]=\"control\"\n      [id]=\"control.label\"\n      (blur)=\"control.markAsDirty()\"\n      [fluid]=\"true\"\n    />\n    <p-colorpicker\n      *ngIf=\"control\"\n      [formControl]=\"control\"\n      [id]=\"control.label\"\n      (blur)=\"control.markAsDirty()\"\n      appendTo=\"body\"\n    ></p-colorpicker>\n  </div>\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i4$3.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["style", "styleClass", "inline", "format", "appendTo", "disabled", "tabindex", "inputId", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "autofocus"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spiderly-colorpicker', imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        ColorPickerModule,
+                        InputTextModule,
+                        RequiredComponent,
+                    ], template: "<!-- Can't put (onBlur) in this control -->\n\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n  <div style=\"display: flex; gap: 10px\">\n    <input\n      *ngIf=\"control && showInputTextField\"\n      pInputText\n      [placeholder]=\"placeholder\"\n      [formControl]=\"control\"\n      [id]=\"control.label\"\n      (blur)=\"control.markAsDirty()\"\n      [fluid]=\"true\"\n    />\n    <p-colorpicker\n      *ngIf=\"control\"\n      [formControl]=\"control\"\n      [id]=\"control.label\"\n      (blur)=\"control.markAsDirty()\"\n      appendTo=\"body\"\n    ></p-colorpicker>\n  </div>\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.TranslocoService }], propDecorators: { showInputTextField: [{
+                type: Input
+            }] } });
+
+class SpiderlyMultiAutocompleteComponent extends BaseAutocompleteControl {
+    constructor(translocoService) {
+        super(translocoService);
+        this.translocoService = translocoService;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    search(event) {
+        this.onTextInput.next(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMultiAutocompleteComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyMultiAutocompleteComponent, isStandalone: true, selector: "spiderly-multiautocomplete", usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n    <div>\n      <label>{{ getTranslatedLabel() }}</label>\n      <required *ngIf=\"control?.required && showRequired\"></required>\n    </div>\n\n    <!-- Don't support p-inputgroup -->\n    <!-- Showing label fix: https://github.com/primefaces/primeng/issues/17332#issuecomment-2922861294 -->\n    <p-autocomplete\n      *ngIf=\"control\"\n      [id]=\"label\"\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [suggestions]=\"options\"\n      (completeMethod)=\"search($event)\"\n      [forceSelection]=\"true\"\n      [multiple]=\"true\"\n      [dropdown]=\"false\"\n      [showClear]=\"true\"\n      (onHide)=\"dropdownMarkAsDirty()\"\n      [completeOnFocus]=\"true\"\n      dropdownIcon=\"pi pi-plus\"\n      [fluid]=\"true\"\n      [style]=\"{ width: '100%' }\"\n      appendTo=\"body\"\n      optionLabel=\"displayName\"\n      dataKey=\"id\"\n    >\n    </p-autocomplete>\n    <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n      {{ getValidationErrrorMessages() }}\n    </small>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i4.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RequiredComponent, selector: "required" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMultiAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spiderly-multiautocomplete', imports: [
+                        ReactiveFormsModule,
+                        FormsModule,
+                        AutoCompleteModule,
+                        CommonModule,
+                        RequiredComponent,
+                        TranslocoDirective,
+                    ], template: "<ng-container *transloco=\"let t\">\n  <div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n    <div>\n      <label>{{ getTranslatedLabel() }}</label>\n      <required *ngIf=\"control?.required && showRequired\"></required>\n    </div>\n\n    <!-- Don't support p-inputgroup -->\n    <!-- Showing label fix: https://github.com/primefaces/primeng/issues/17332#issuecomment-2922861294 -->\n    <p-autocomplete\n      *ngIf=\"control\"\n      [id]=\"label\"\n      [formControl]=\"control\"\n      [placeholder]=\"placeholder\"\n      [suggestions]=\"options\"\n      (completeMethod)=\"search($event)\"\n      [forceSelection]=\"true\"\n      [multiple]=\"true\"\n      [dropdown]=\"false\"\n      [showClear]=\"true\"\n      (onHide)=\"dropdownMarkAsDirty()\"\n      [completeOnFocus]=\"true\"\n      dropdownIcon=\"pi pi-plus\"\n      [fluid]=\"true\"\n      [style]=\"{ width: '100%' }\"\n      appendTo=\"body\"\n      optionLabel=\"displayName\"\n      dataKey=\"id\"\n    >\n    </p-autocomplete>\n    <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n      {{ getValidationErrrorMessages() }}\n    </small>\n  </div>\n</ng-container>\n" }]
+        }], ctorParameters: () => [{ type: i1.TranslocoService }] });
+
+class SpiderlyPasswordComponent extends BaseControl {
+    constructor(translocoService) {
+        super(translocoService);
+        this.translocoService = translocoService;
+        this.showPasswordStrength = false;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyPasswordComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyPasswordComponent, isStandalone: true, selector: "spiderly-password", inputs: { showPasswordStrength: "showPasswordStrength" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div>\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n  <p-password\n    *ngIf=\"control\"\n    [formControl]=\"control\"\n    [id]=\"control?.label\"\n    [toggleMask]=\"true\"\n    [feedback]=\"showPasswordStrength\"\n    (onBlur)=\"control?.markAsDirty()\"\n    [style]=\"{ width: '100%' }\"\n    [inputStyle]=\"{ width: '100%' }\"\n  />\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i4$4.Password, selector: "p-password", inputs: ["ariaLabel", "fluid", "ariaLabelledBy", "label", "disabled", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "appendTo", "toggleMask", "size", "inputStyleClass", "styleClass", "style", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "variant", "tabindex"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyPasswordComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spiderly-password', imports: [
                         CommonModule,
@@ -774,9 +1132,13 @@ class SpiderlyEditorComponent extends BaseControl {
             if (file) {
                 const formData = new FormData();
                 formData.append('file', file, `${this.objectId}-${file.name}`);
-                this.uploadImageMethod(formData).subscribe((imageUrl) => {
+                this.uploadImageMethod(formData).subscribe((result) => {
                     const range = quill.getSelection(true);
-                    quill.insertEmbed(range.index, 'image', imageUrl);
+                    quill.insertEmbed(range.index, 'image', result.url);
+                    // Quill 2's built-in Image blot recognizes width/height as native attributes,
+                    // so formatText writes them directly onto the rendered <img>. Storefront uses
+                    // these to size the image up-front and prevent CLS.
+                    quill.formatText(range.index, 1, { width: result.width, height: result.height });
                     quill.setSelection(range.index + 1);
                 });
             }
@@ -889,262 +1251,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
 class BaseEntity {
 }
 
-// Helper function for PrecisionScale validation (to be added in the TypeScript output):
-function validatePrecisionScale(value, precision, scale, ignoreTrailingZeros) {
-    if (typeof value !== 'number')
-        return false;
-    const [integerPart, decimalPart] = value.toString().split('.');
-    if (integerPart.length > precision - scale)
-        return false;
-    if (decimalPart && decimalPart.length > scale)
-        return false;
-    if (!ignoreTrailingZeros &&
-        decimalPart &&
-        decimalPart.replace(/0+$/, '').length > scale)
-        return false;
-    return true;
-}
-function getMimeTypeForFileName(fileName) {
-    return mime.getType(fileName) ?? 'application/octet-stream';
-}
-function adjustColor(color, percent) {
-    if (!/^#([0-9A-F]{3}){1,2}$/i.test(color)) {
-        console.error('Invalid hex color format');
-    }
-    let r, g, b;
-    if (color.length === 7) {
-        r = parseInt(color.slice(1, 3), 16);
-        g = parseInt(color.slice(3, 5), 16);
-        b = parseInt(color.slice(5, 7), 16);
-    }
-    else {
-        r = parseInt(color[1] + color[1], 16);
-        g = parseInt(color[2] + color[2], 16);
-        b = parseInt(color[3] + color[3], 16);
-    }
-    const adjust = (value, percent) => {
-        const amount = (percent / 100) * 255;
-        const newValue = Math.min(Math.max(value + amount, 0), 255);
-        return Math.round(newValue);
-    };
-    r = adjust(r, percent);
-    g = adjust(g, percent);
-    b = adjust(b, percent);
-    const toHex = (value) => {
-        const hex = value.toString(16).padStart(2, '0');
-        return hex;
-    };
-    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
-function getHtmlImgDisplayString64(base64String) {
-    if (base64String == null)
-        return null;
-    const [header, base64Content] = base64String.split(';base64,');
-    const fileName = header.split('=')[1];
-    const mimeType = getMimeTypeForFileName(fileName);
-    return `data:${mimeType};base64, ${base64Content}`;
-}
-function nameof(key1, key2) {
-    return key2 ?? key1;
-}
-function nameOf(funcOrClass) {
-    return funcOrClass.name;
-}
-function getParentUrl(currentUrl) {
-    const urlSegments = currentUrl.split('/');
-    urlSegments.pop();
-    const parentUrl = urlSegments.join('/');
-    return parentUrl;
-}
-// export function getMonth(number: number): string {
-//   const months: string[] = [
-//     "January", "February", "March", "April", "May", "June",
-//     "July", "August", "September", "October", "November", "December"
-//   ];
-//   if (number < 1 || number > 12) {
-//     throw new Error("Invalid month number. It should be between 1 and 12.");
-//   }
-//   return months[number - 1];
-// }
-function getMonth(numberOfTheMonth) {
-    const meseci = [
-        'Januar',
-        'Februar',
-        'Mart',
-        'April',
-        'Maj',
-        'Jun',
-        'Jul',
-        'Avgust',
-        'Septembar',
-        'Oktobar',
-        'Novembar',
-        'Decembar',
-    ];
-    if (numberOfTheMonth < 1 || numberOfTheMonth > 12) {
-        console.error('Nevažeći broj meseca. Broj treba biti između 1 i 12.');
-    }
-    return meseci[numberOfTheMonth - 1];
-}
-function singleOrDefault(array, predicate) {
-    const filtered = array.filter(predicate);
-    if (filtered.length > 1) {
-        throw new Error('Sequence contains more than one matching element.');
-    }
-    return filtered[0];
-}
-function pushAction(cols, action) {
-    const actionsColumn = singleOrDefault(cols, (x) => x.actions != null);
-    if (actionsColumn) {
-        actionsColumn.actions = [...actionsColumn.actions, action];
-    }
-}
-function deleteAction(cols, actionField) {
-    const actionsColumn = singleOrDefault(cols, (x) => x.actions != null);
-    if (actionsColumn && actionsColumn.actions) {
-        const index = actionsColumn.actions.findIndex((a) => a.field === actionField);
-        if (index !== -1) {
-            actionsColumn.actions.splice(index, 1);
-        }
-    }
-}
-function getFileNameFromContentDisposition(resp, defaultName) {
-    let fileName;
-    if (resp && resp.headers && resp.headers.get('Content-Disposition')) {
-        let val = resp.headers.get('Content-Disposition');
-        let start = val.indexOf('filename=');
-        if (start != -1) {
-            let end = val.indexOf(';', start);
-            fileName =
-                end != -1 ? val.substring(start + 9, end) : val.substring(start + 9);
-            fileName = fileName.split('"').join('');
-        }
-    }
-    return fileName ?? defaultName;
-}
-function toCommaSeparatedString(input) {
-    const stringList = input.map((item) => item?.toString() ?? '');
-    if (stringList.length > 1) {
-        return `${stringList.slice(0, -1).join(', ')} and ${stringList[stringList.length - 1]}`;
-    }
-    else {
-        return stringList[0] ?? '';
-    }
-}
-function isFileImageType(mimeType) {
-    if (mimeType.startsWith('image/')) {
-        return true;
-    }
-    return false;
-}
-function isExcelFileType(mimeType) {
-    if (mimeType ===
-        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
-        mimeType === 'application/vnd.ms-excel') {
-        return true;
-    }
-    return false;
-}
-function exportListToExcel(exportListToExcelObservableMethod, filter) {
-    exportListToExcelObservableMethod(filter).subscribe((res) => {
-        let fileName = getFileNameFromContentDisposition(res, 'ExcelExport.xlsx');
-        FileSaver.saveAs(res.body, decodeURIComponent(fileName));
-    });
-}
-function getPrimengDropdownNamebookOptions(getDropdownListObservable, parentEntityId) {
-    return getDropdownListObservable(parentEntityId ?? 0).pipe(map((res) => {
-        return res.map((x) => ({ label: x.displayName, code: x.id }));
-    }));
-}
-function getPrimengDropdownCodebookOptions(getDropdownListObservable) {
-    return getDropdownListObservable().pipe(map((res) => {
-        return res.map((x) => ({ label: x.displayName, code: x.code }));
-    }));
-}
-function getPrimengAutocompleteNamebookOptions(getAutocompleteListObservable, limit, query, parentEntityId) {
-    return getAutocompleteListObservable(limit, query, parentEntityId ?? 0).pipe(map((res) => {
-        return res.map((x) => ({ label: x.displayName, code: x.id }));
-    }));
-}
-function getPrimengAutocompleteCodebookOptions(getAutocompleteListObservable, limit, query) {
-    return getAutocompleteListObservable(limit, query).pipe(map((res) => {
-        return res.map((x) => ({ label: x.displayName, code: x.code }));
-    }));
-}
-const isNullOrEmpty = (input) => {
-    if (input == null || input === '') {
-        return true;
-    }
-    return false;
-};
-const selectedTab = (tabs) => {
-    const tab = singleOrDefault(tabs, (x) => x.isSelected);
-    if (tab) {
-        return tab.id;
-    }
-    else {
-        return null;
-    }
-};
-function firstCharToUpper(input) {
-    return input.charAt(0).toUpperCase() + input.slice(1);
-}
-function splitPascalCase(input) {
-    const regex = /($[a-z])|[A-Z][^A-Z]+/g;
-    return input.match(regex).join(' ');
-}
-function capitalizeFirstChar(str) {
-    if (!str)
-        return str;
-    return str.charAt(0).toUpperCase() + str.slice(1);
-}
-function kebabToTitleCase(input) {
-    return input
-        .split('-')
-        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-        .join(' ');
-}
-/**
- * Custom styling of the google button - https://medium.com/simform-engineering/implement-custom-google-sign-in-using-angular-16-9c93aeff6252
- */
-function createFakeGoogleWrapper() {
-    const googleLoginWrapper = document.createElement('div');
-    googleLoginWrapper.style.display = 'none';
-    googleLoginWrapper.classList.add('custom-google-button');
-    document.body.appendChild(googleLoginWrapper);
-    window.google.accounts.id.renderButton(googleLoginWrapper, {
-        type: 'icon',
-        width: '200',
-    });
-    const googleLoginWrapperButton = googleLoginWrapper.querySelector('div[role=button]');
-    return {
-        click: () => {
-            googleLoginWrapperButton?.click();
-        },
-    };
-}
-const PROPS_KEY = Symbol('props');
-function ReflectProp(target, propertyKey) {
-    const props = Reflect.getMetadata(PROPS_KEY, target) || [];
-    Reflect.defineMetadata(PROPS_KEY, [...props, propertyKey], target);
-}
-const primitiveArrayTypes = [
-    'Namebook[]',
-    'number[]',
-    'Date[]',
-    'string[]',
-];
-function getImageDimensions(file) {
-    return new Promise((resolve) => {
-        const img = new Image();
-        img.onload = () => {
-            resolve({ width: img.width, height: img.height });
-            URL.revokeObjectURL(img.src);
-        };
-        img.src = URL.createObjectURL(file);
-    });
-}
-
 class SpiderlyMessageService {
     // TODO FT: nece da prikaze poruku ako je neki angular error koji se dogodi tek nakon api poziva
     constructor(messageService, translocoService, ngZone) {
@@ -3994,8 +4100,9 @@ class SpiderlyDataTableComponent {
                     return null;
                 if (col.showTime)
                     return formatDate(rowData[col.field], 'short', this.locale);
-                else
-                    return formatDate(rowData[col.field], 'shortDate', this.locale);
+                const raw = rowData[col.field];
+                const local = typeof raw === 'string' ? parseDateOnlyLocal(raw) : null;
+                return formatDate(local ?? raw, 'shortDate', this.locale);
             case 'multiselect':
                 return rowData[col.field];
             case 'boolean':
@@ -4921,5 +5028,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Action, AllClickEvent, ApiErrorCodes, ApiSecurityService, AppSidebarComponent, AuthGuard, AuthResult, AuthResultWithCookies, AuthServiceBase, BaseAutocompleteControl, BaseControl, BaseDropdownControl, BaseEntity, BaseFormComponent, BaseFormService, CardSkeletonComponent, Codebook, Column, ConfigServiceBase, ExternalProvider, Filter, FilterRule, FilterSortMeta, FooterComponent, GoogleButtonComponent, IndexCardComponent, InfoCardComponent, InitCompanyAuthDialogDetails, InitTopBarData, IsAuthorizedForSaveEvent, LastMenuIconIndexClicked, LayoutServiceBase, LazyLoadSelectedIdsResult, Login, LoginComponent, LoginVerificationComponent, LoginVerificationToken, MatchModeCodes, MenuChangeEvent, MenuitemComponent, Namebook, NotAuthGuard, NotFoundComponent, PROPS_KEY, PaginatedResult, PanelBodyComponent, PanelFooterComponent, PanelHeaderComponent, PrimengOption, ProfileAvatarComponent, ReflectProp, RefreshTokenRequest, RequiredComponent, RowClickEvent, SecurityPermissionCodes, SendLoginVerificationEmailResult, SideMenuTopBarComponent, SidebarMenuComponent, SimpleSaveResult, SpiderlyAutocompleteComponent, SpiderlyButtonBaseComponent, SpiderlyButtonComponent, SpiderlyCalendarComponent, SpiderlyCardComponent, SpiderlyCheckboxComponent, SpiderlyColorPickerComponent, SpiderlyControlsModule, SpiderlyDataTableComponent, SpiderlyDataViewComponent, SpiderlyDeleteConfirmationComponent, SpiderlyDropdownComponent, SpiderlyEditorComponent, SpiderlyErrorHandler, SpiderlyFileComponent, SpiderlyFileSelectEvent, SpiderlyFormArray, SpiderlyFormControl, SpiderlyFormGroup, SpiderlyLayoutComponent, SpiderlyMessageService, SpiderlyMultiAutocompleteComponent, SpiderlyMultiSelectComponent, SpiderlyNumberComponent, SpiderlyPanelComponent, SpiderlyPanelsModule, SpiderlyPasswordComponent, SpiderlyReturnButtonComponent, SpiderlySplitButtonComponent, SpiderlyTab, SpiderlyTemplateTypeDirective, SpiderlyTextareaComponent, SpiderlyTextboxComponent, SpiderlyTranslocoLoader, TopBarComponent, UserBase, UserRole, ValidatorAbstractService, VerificationTokenRequest, VerificationTypeCodes, VerificationWrapperComponent, adjustColor, authInitializer, capitalizeFirstChar, createFakeGoogleWrapper, deleteAction, exportListToExcel, firstCharToUpper, getFileNameFromContentDisposition, getHtmlImgDisplayString64, getImageDimensions, getMimeTypeForFileName, getMonth, getParentUrl, getPrimengAutocompleteCodebookOptions, getPrimengAutocompleteNamebookOptions, getPrimengDropdownCodebookOptions, getPrimengDropdownNamebookOptions, httpLoadingInterceptor, isExcelFileType, isFileImageType, isNullOrEmpty, jsonHttpInterceptor, jwtInterceptor, kebabToTitleCase, nameOf, nameof, primitiveArrayTypes, pushAction, selectedTab, singleOrDefault, splitPascalCase, toCommaSeparatedString, unauthorizedInterceptor, validatePrecisionScale };
+export { Action, AllClickEvent, ApiErrorCodes, ApiSecurityService, AppSidebarComponent, AuthGuard, AuthResult, AuthResultWithCookies, AuthServiceBase, BaseAutocompleteControl, BaseControl, BaseDropdownControl, BaseEntity, BaseFormComponent, BaseFormService, CardSkeletonComponent, Codebook, Column, ConfigServiceBase, ExternalProvider, Filter, FilterRule, FilterSortMeta, FooterComponent, GoogleButtonComponent, IndexCardComponent, InfoCardComponent, InitCompanyAuthDialogDetails, InitTopBarData, IsAuthorizedForSaveEvent, LastMenuIconIndexClicked, LayoutServiceBase, LazyLoadSelectedIdsResult, Login, LoginComponent, LoginVerificationComponent, LoginVerificationToken, MatchModeCodes, MenuChangeEvent, MenuitemComponent, Namebook, NotAuthGuard, NotFoundComponent, PROPS_KEY, PaginatedResult, PanelBodyComponent, PanelFooterComponent, PanelHeaderComponent, PrimengOption, ProfileAvatarComponent, ReflectProp, RefreshTokenRequest, RequiredComponent, RowClickEvent, SecurityPermissionCodes, SendLoginVerificationEmailResult, SideMenuTopBarComponent, SidebarMenuComponent, SimpleSaveResult, SpiderlyAutocompleteComponent, SpiderlyButtonBaseComponent, SpiderlyButtonComponent, SpiderlyCalendarComponent, SpiderlyCardComponent, SpiderlyCheckboxComponent, SpiderlyColorPickerComponent, SpiderlyControlsModule, SpiderlyDataTableComponent, SpiderlyDataViewComponent, SpiderlyDeleteConfirmationComponent, SpiderlyDropdownComponent, SpiderlyEditorComponent, SpiderlyErrorHandler, SpiderlyFileComponent, SpiderlyFileSelectEvent, SpiderlyFormArray, SpiderlyFormControl, SpiderlyFormGroup, SpiderlyLayoutComponent, SpiderlyMessageService, SpiderlyMultiAutocompleteComponent, SpiderlyMultiSelectComponent, SpiderlyNumberComponent, SpiderlyPanelComponent, SpiderlyPanelsModule, SpiderlyPasswordComponent, SpiderlyReturnButtonComponent, SpiderlySplitButtonComponent, SpiderlyTab, SpiderlyTemplateTypeDirective, SpiderlyTextareaComponent, SpiderlyTextboxComponent, SpiderlyTranslocoLoader, TopBarComponent, UserBase, UserRole, ValidatorAbstractService, VerificationTokenRequest, VerificationTypeCodes, VerificationWrapperComponent, adjustColor, authInitializer, capitalizeFirstChar, createFakeGoogleWrapper, deleteAction, exportListToExcel, firstCharToUpper, getFileNameFromContentDisposition, getHtmlImgDisplayString64, getImageDimensions, getMimeTypeForFileName, getMonth, getParentUrl, getPrimengAutocompleteCodebookOptions, getPrimengAutocompleteNamebookOptions, getPrimengDropdownCodebookOptions, getPrimengDropdownNamebookOptions, httpLoadingInterceptor, isExcelFileType, isFileImageType, isNullOrEmpty, jsonHttpInterceptor, jwtInterceptor, kebabToTitleCase, nameOf, nameof, parseDateOnlyLocal, primitiveArrayTypes, pushAction, selectedTab, singleOrDefault, splitPascalCase, toCommaSeparatedString, unauthorizedInterceptor, validatePrecisionScale };
 //# sourceMappingURL=spiderly.mjs.map