@fuentis/phoenix-ui 0.0.9-alpha.535 → 0.0.9-alpha.537

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -8991,7 +8991,7 @@ class MetaFormFieldV2Component {
         return String(v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormFieldV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormFieldV2Component, isStandalone: true, selector: "phoenix-meta-form-field-v2", inputs: { field: "field", form: "form", readOnly: "readOnly", disableForm: "disableForm" }, ngImport: i0, template: "<div [formGroup]=\"form\">\n  @if (!field.hidden) {\n  <div class=\"meta-field flex flex-column gap-2\" [style.order]=\"field.order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key\">\n\n    @if (userFriendlyMessage()) {\n    <label class=\"meta-label\" [attr.for]=\"key\">\n      {{ userFriendlyMessage()! | translate }}\n      @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n    </label>\n    }\n\n      <!-- READ ONLY (page-level ili field-level) -->\n      @if (isReadOnly()) {\n        <phoenix-read-only-input-v2 [field]=\"field\" [form]=\"form\"></phoenix-read-only-input-v2>\n      } @else {\n\n      @switch (type) {\n\n        @case (MetaFieldType.TEXT) {\n        <input pInputText [id]=\"key\" [formControlName]=\"key\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.PASSWORD) {\n        <!-- Ako nema\u0161 legacy komponentu, mo\u017Ee\u0161 samo input type=\"password\" -->\n        <phoenix-meta-password-feild [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\">\n        </phoenix-meta-password-feild>\n        }\n\n        @case (MetaFieldType.TEXT_AREA) {\n        <textarea pTextarea class=\"meta-textarea\" [id]=\"key\" [formControlName]=\"key\" [autoResize]=\"true\" rows=\"4\"\n          [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n                </textarea>\n        }\n\n        @case (MetaFieldType.NUMBER) {\n        <p-inputNumber [inputId]=\"key\" [formControlName]=\"key\">\n        </p-inputNumber>\n        }\n\n        @case (MetaFieldType.DATE) {\n        <p-datepicker [inputId]=\"key\" [formControlName]=\"key\" [showIcon]=\"true\">\n        </p-datepicker>\n        }\n\n        @case (MetaFieldType.SS_OPTION) {\n        <p-select [inputId]=\"key\" [options]=\"field.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"true\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n        <p-select [inputId]=\"key\" [options]=\"field.options ?? []\" optionLabel=\"label\" [formControlName]=\"key\"\n          [showClear]=\"true\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.MS_OPTION) {\n        <p-multiselect [inputId]=\"key\" [options]=\"field.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"true\" display=\"chip\">\n        </p-multiselect>\n        }\n\n        @case (MetaFieldType.CHECKBOX) {\n        <div class=\"flex align-items-center gap-2\">\n          <p-checkbox [inputId]=\"key\" [binary]=\"true\" [formControlName]=\"key\">\n          </p-checkbox>\n\n          @if (placeholderKey()) {\n          <label [attr.for]=\"key\" class=\"meta-inline-label\">\n            {{ placeholderKey()! | translate }}\n          </label>\n          }\n        </div>\n        }\n\n        <!-- advanced: preko postoje\u0107ih komponenti -->\n        @case (MetaFieldType.TIMEPERIOD) {\n        <phoenix-meta-timeperiod [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\"></phoenix-meta-timeperiod>\n        }\n\n        @case (MetaFieldType.CURRENCY) {\n        <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-currency>\n        }\n\n        @case (MetaFieldType.START_DUE_DATE) {\n        <phoenix-meta-start-due-date-v2\n          [formControlName]=\"key\"\n          [attr.data-cy]=\"'start-due-' + key\">\n        </phoenix-meta-start-due-date-v2>\n        }\n\n        @case (MetaFieldType.TEXT_EDITOR) {\n        <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-text-editor>\n        }\n\n        @case (MetaFieldType.CHECKBOX_COLOR) {\n        <phoenix-meta-checkbox-color-picker-v2\n          [formControlName]=\"key\"\n          [options]=\"(field.extra?.['colorGrid'] ?? [])\"\n          [disable]=\"isDisabled()\">\n        </phoenix-meta-checkbox-color-picker-v2>\n        }\n\n        @case (MetaFieldType.SWITCH) {\n        <phoenix-meta-switch [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-switch>\n        }\n\n        @case (MetaFieldType.SELECT_BUTTON) {\n        <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-select-button>\n        }\n\n        @case (MetaFieldType.ASSIGN) {\n        <phoenix-meta-assign-responsible-v2\n          [formControlName]=\"key\"\n          [items]=\"(field.extra?.['items'] ?? [])\"\n          [dialogHeaderKey]=\"(field.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n        ></phoenix-meta-assign-responsible-v2>\n        }\n\n        <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n        <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-assign-asset>\n        } -->\n\n        @case (MetaFieldType.COLOR) {\n          <phoenix-meta-color-picker-v2\n            [formControlName]=\"key\"\n            [disable]=\"isDisabled()\">\n          </phoenix-meta-color-picker-v2>\n        }\n\n        @case (MetaFieldType.UPLOAD) {\n        <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-upload>\n        }\n\n        @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n        <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-upload-dragdrop>\n        }\n\n        @case (MetaFieldType.LINKS_DATA) {\n        <!-- <input pInputText [id]=\"key\" [formControlName]=\"key\" [readonly]=\"true\"> -->\n        }\n\n        @case (MetaFieldType.SLOT) { }\n\n        @default {\n        <input pInputText [id]=\"key\" [formControlName]=\"key\">\n        }\n      }\n    }\n\n\n    @if (!readOnly && showError()) {\n    <small class=\"p-error block mt-1\">\n      <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n    </small>\n    }\n  </div>\n  }\n</div>", styles: [".meta-field{width:100%}.meta-label{font-weight:600;font-size:.9rem}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{width:100%;min-height:110px;resize:vertical;padding:.75rem;border-radius:8px;border:1px solid var(--surface-border, rgba(0, 0, 0, .12));background:var(--surface-0, transparent);color:inherit}.meta-inline-label{opacity:.9}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MetaFormFieldV2Component, isStandalone: true, selector: "phoenix-meta-form-field-v2", inputs: { field: "field", form: "form", readOnly: "readOnly", disableForm: "disableForm" }, ngImport: i0, template: "<div [formGroup]=\"form\">\n  @if (!field.hidden) {\n  <div class=\"meta-field flex flex-column gap-2\" [style.order]=\"field.order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key\">\n\n    @if (userFriendlyMessage()) {\n    <label class=\"meta-label\" [attr.for]=\"key\">\n      {{ userFriendlyMessage()! | translate }}\n      @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n    </label>\n    }\n\n      <!-- READ ONLY (page-level ili field-level) -->\n      @if (isReadOnly()) {\n        <phoenix-read-only-input-v2 [field]=\"field\" [form]=\"form\"></phoenix-read-only-input-v2>\n      } @else {\n\n      @switch (type) {\n\n        @case (MetaFieldType.TEXT) {\n        <input pInputText [id]=\"key\" [formControlName]=\"key\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.PASSWORD) {\n        <!-- Ako nema\u0161 legacy komponentu, mo\u017Ee\u0161 samo input type=\"password\" -->\n        <phoenix-meta-password-feild [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\">\n        </phoenix-meta-password-feild>\n        }\n\n        @case (MetaFieldType.TEXT_AREA) {\n        <textarea pTextarea class=\"meta-textarea\" [id]=\"key\" [formControlName]=\"key\" [autoResize]=\"true\" rows=\"4\"\n          [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n                </textarea>\n        }\n\n        @case (MetaFieldType.NUMBER) {\n        <p-inputNumber [inputId]=\"key\" [formControlName]=\"key\">\n        </p-inputNumber>\n        }\n\n        @case (MetaFieldType.DATE) {\n        <p-datepicker [inputId]=\"key\" [formControlName]=\"key\" [showIcon]=\"true\">\n        </p-datepicker>\n        }\n\n        @case (MetaFieldType.SS_OPTION) {\n        <p-select [inputId]=\"key\" [options]=\"field.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"true\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n        <p-select [inputId]=\"key\" [options]=\"field.options ?? []\" optionLabel=\"label\" [formControlName]=\"key\"\n          [showClear]=\"true\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.MS_OPTION) {\n        <p-multiselect [inputId]=\"key\" [options]=\"field.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"true\" display=\"chip\">\n        </p-multiselect>\n        }\n\n        @case (MetaFieldType.CHECKBOX) {\n        <div class=\"flex align-items-center gap-2\">\n          <p-checkbox [inputId]=\"key\" [binary]=\"true\" [formControlName]=\"key\">\n          </p-checkbox>\n\n          @if (placeholderKey()) {\n          <label [attr.for]=\"key\" class=\"meta-inline-label\">\n            {{ placeholderKey()! | translate }}\n          </label>\n          }\n        </div>\n        }\n\n        <!-- advanced: preko postoje\u0107ih komponenti -->\n        @case (MetaFieldType.TIMEPERIOD) {\n        <phoenix-meta-timeperiod [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\"></phoenix-meta-timeperiod>\n        }\n\n        @case (MetaFieldType.CURRENCY) {\n        <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-currency>\n        }\n\n        @case (MetaFieldType.START_DUE_DATE) {\n        <phoenix-meta-start-due-date-v2\n          [formControlName]=\"key\"\n          [attr.data-cy]=\"'start-due-' + key\">\n        </phoenix-meta-start-due-date-v2>\n        }\n\n        @case (MetaFieldType.TEXT_EDITOR) {\n        <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-text-editor>\n        }\n\n        @case (MetaFieldType.CHECKBOX_COLOR) {\n        <phoenix-meta-checkbox-color-picker-v2\n          [formControlName]=\"key\"\n          [options]=\"(field.extra?.['colorGrid'] ?? [])\"\n          [disable]=\"isDisabled()\">\n        </phoenix-meta-checkbox-color-picker-v2>\n        }\n\n        @case (MetaFieldType.SWITCH) {\n        <phoenix-meta-switch [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-switch>\n        }\n\n        @case (MetaFieldType.SELECT_BUTTON) {\n        <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-select-button>\n        }\n\n        @case (MetaFieldType.ASSIGN) {\n        <phoenix-meta-assign-responsible-v2\n          [formControlName]=\"key\"\n          [items]=\"(field.extra?.['items'] ?? [])\"\n          [dialogHeaderKey]=\"(field.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n        ></phoenix-meta-assign-responsible-v2>\n        }\n\n        <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n        <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-assign-asset>\n        } -->\n\n        @case (MetaFieldType.COLOR) {\n          <phoenix-meta-color-picker-v2\n            [formControlName]=\"key\"\n            [disable]=\"isDisabled()\">\n          </phoenix-meta-color-picker-v2>\n        }\n\n        @case (MetaFieldType.UPLOAD) {\n        <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-upload>\n        }\n\n        @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n        <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-upload-dragdrop>\n        }\n\n        @case (MetaFieldType.LINKS_DATA) {\n        <!-- <input pInputText [id]=\"key\" [formControlName]=\"key\" [readonly]=\"true\"> -->\n        }\n\n        @case (MetaFieldType.SLOT) { }\n\n        @default {\n        <input pInputText [id]=\"key\" [formControlName]=\"key\">\n        }\n      }\n    }\n\n\n    @if (!readOnly && showError()) {\n    <small class=\"p-error block mt-1\">\n      <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n    </small>\n    }\n  </div>\n  }\n</div>", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{width:100%;min-height:110px;resize:vertical;padding:.75rem;border-radius:8px;border:1px solid var(--surface-border, rgba(0, 0, 0, .12));background:var(--surface-0, transparent);color:inherit}.meta-inline-label{opacity:.9}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: 
                 // PrimeNG 20
                 InputTextModule }, { kind: "directive", type: i3$4.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$8.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i3$6.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i10.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$7.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: 
                 // optional advanced
@@ -9029,7 +9029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         MetaUploadComponent,
                         MetaUploadComponentDragDrop,
                         ReadOnlyInputV2Component,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"form\">\n  @if (!field.hidden) {\n  <div class=\"meta-field flex flex-column gap-2\" [style.order]=\"field.order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key\">\n\n    @if (userFriendlyMessage()) {\n    <label class=\"meta-label\" [attr.for]=\"key\">\n      {{ userFriendlyMessage()! | translate }}\n      @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n    </label>\n    }\n\n      <!-- READ ONLY (page-level ili field-level) -->\n      @if (isReadOnly()) {\n        <phoenix-read-only-input-v2 [field]=\"field\" [form]=\"form\"></phoenix-read-only-input-v2>\n      } @else {\n\n      @switch (type) {\n\n        @case (MetaFieldType.TEXT) {\n        <input pInputText [id]=\"key\" [formControlName]=\"key\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.PASSWORD) {\n        <!-- Ako nema\u0161 legacy komponentu, mo\u017Ee\u0161 samo input type=\"password\" -->\n        <phoenix-meta-password-feild [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\">\n        </phoenix-meta-password-feild>\n        }\n\n        @case (MetaFieldType.TEXT_AREA) {\n        <textarea pTextarea class=\"meta-textarea\" [id]=\"key\" [formControlName]=\"key\" [autoResize]=\"true\" rows=\"4\"\n          [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n                </textarea>\n        }\n\n        @case (MetaFieldType.NUMBER) {\n        <p-inputNumber [inputId]=\"key\" [formControlName]=\"key\">\n        </p-inputNumber>\n        }\n\n        @case (MetaFieldType.DATE) {\n        <p-datepicker [inputId]=\"key\" [formControlName]=\"key\" [showIcon]=\"true\">\n        </p-datepicker>\n        }\n\n        @case (MetaFieldType.SS_OPTION) {\n        <p-select [inputId]=\"key\" [options]=\"field.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"true\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n        <p-select [inputId]=\"key\" [options]=\"field.options ?? []\" optionLabel=\"label\" [formControlName]=\"key\"\n          [showClear]=\"true\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.MS_OPTION) {\n        <p-multiselect [inputId]=\"key\" [options]=\"field.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"true\" display=\"chip\">\n        </p-multiselect>\n        }\n\n        @case (MetaFieldType.CHECKBOX) {\n        <div class=\"flex align-items-center gap-2\">\n          <p-checkbox [inputId]=\"key\" [binary]=\"true\" [formControlName]=\"key\">\n          </p-checkbox>\n\n          @if (placeholderKey()) {\n          <label [attr.for]=\"key\" class=\"meta-inline-label\">\n            {{ placeholderKey()! | translate }}\n          </label>\n          }\n        </div>\n        }\n\n        <!-- advanced: preko postoje\u0107ih komponenti -->\n        @case (MetaFieldType.TIMEPERIOD) {\n        <phoenix-meta-timeperiod [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\"></phoenix-meta-timeperiod>\n        }\n\n        @case (MetaFieldType.CURRENCY) {\n        <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-currency>\n        }\n\n        @case (MetaFieldType.START_DUE_DATE) {\n        <phoenix-meta-start-due-date-v2\n          [formControlName]=\"key\"\n          [attr.data-cy]=\"'start-due-' + key\">\n        </phoenix-meta-start-due-date-v2>\n        }\n\n        @case (MetaFieldType.TEXT_EDITOR) {\n        <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-text-editor>\n        }\n\n        @case (MetaFieldType.CHECKBOX_COLOR) {\n        <phoenix-meta-checkbox-color-picker-v2\n          [formControlName]=\"key\"\n          [options]=\"(field.extra?.['colorGrid'] ?? [])\"\n          [disable]=\"isDisabled()\">\n        </phoenix-meta-checkbox-color-picker-v2>\n        }\n\n        @case (MetaFieldType.SWITCH) {\n        <phoenix-meta-switch [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-switch>\n        }\n\n        @case (MetaFieldType.SELECT_BUTTON) {\n        <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-select-button>\n        }\n\n        @case (MetaFieldType.ASSIGN) {\n        <phoenix-meta-assign-responsible-v2\n          [formControlName]=\"key\"\n          [items]=\"(field.extra?.['items'] ?? [])\"\n          [dialogHeaderKey]=\"(field.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n        ></phoenix-meta-assign-responsible-v2>\n        }\n\n        <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n        <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-assign-asset>\n        } -->\n\n        @case (MetaFieldType.COLOR) {\n          <phoenix-meta-color-picker-v2\n            [formControlName]=\"key\"\n            [disable]=\"isDisabled()\">\n          </phoenix-meta-color-picker-v2>\n        }\n\n        @case (MetaFieldType.UPLOAD) {\n        <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-upload>\n        }\n\n        @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n        <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-upload-dragdrop>\n        }\n\n        @case (MetaFieldType.LINKS_DATA) {\n        <!-- <input pInputText [id]=\"key\" [formControlName]=\"key\" [readonly]=\"true\"> -->\n        }\n\n        @case (MetaFieldType.SLOT) { }\n\n        @default {\n        <input pInputText [id]=\"key\" [formControlName]=\"key\">\n        }\n      }\n    }\n\n\n    @if (!readOnly && showError()) {\n    <small class=\"p-error block mt-1\">\n      <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n    </small>\n    }\n  </div>\n  }\n</div>", styles: [".meta-field{width:100%}.meta-label{font-weight:600;font-size:.9rem}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{width:100%;min-height:110px;resize:vertical;padding:.75rem;border-radius:8px;border:1px solid var(--surface-border, rgba(0, 0, 0, .12));background:var(--surface-0, transparent);color:inherit}.meta-inline-label{opacity:.9}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"form\">\n  @if (!field.hidden) {\n  <div class=\"meta-field flex flex-column gap-2\" [style.order]=\"field.order ?? null\"\n    [attr.data-cy]=\"'meta-field-' + key\">\n\n    @if (userFriendlyMessage()) {\n    <label class=\"meta-label\" [attr.for]=\"key\">\n      {{ userFriendlyMessage()! | translate }}\n      @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n    </label>\n    }\n\n      <!-- READ ONLY (page-level ili field-level) -->\n      @if (isReadOnly()) {\n        <phoenix-read-only-input-v2 [field]=\"field\" [form]=\"form\"></phoenix-read-only-input-v2>\n      } @else {\n\n      @switch (type) {\n\n        @case (MetaFieldType.TEXT) {\n        <input pInputText [id]=\"key\" [formControlName]=\"key\"\n          [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\" [readonly]=\"isReadOnly()\">\n        }\n\n        @case (MetaFieldType.PASSWORD) {\n        <!-- Ako nema\u0161 legacy komponentu, mo\u017Ee\u0161 samo input type=\"password\" -->\n        <phoenix-meta-password-feild [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\">\n        </phoenix-meta-password-feild>\n        }\n\n        @case (MetaFieldType.TEXT_AREA) {\n        <textarea pTextarea class=\"meta-textarea\" [id]=\"key\" [formControlName]=\"key\" [autoResize]=\"true\" rows=\"4\"\n          [readonly]=\"isReadOnly()\" [attr.placeholder]=\"placeholderKey() ? (placeholderKey()! | translate) : null\">\n                </textarea>\n        }\n\n        @case (MetaFieldType.NUMBER) {\n        <p-inputNumber [inputId]=\"key\" [formControlName]=\"key\">\n        </p-inputNumber>\n        }\n\n        @case (MetaFieldType.DATE) {\n        <p-datepicker [inputId]=\"key\" [formControlName]=\"key\" [showIcon]=\"true\">\n        </p-datepicker>\n        }\n\n        @case (MetaFieldType.SS_OPTION) {\n        <p-select [inputId]=\"key\" [options]=\"field.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"true\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n        <p-select [inputId]=\"key\" [options]=\"field.options ?? []\" optionLabel=\"label\" [formControlName]=\"key\"\n          [showClear]=\"true\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.MS_OPTION) {\n        <p-multiselect [inputId]=\"key\" [options]=\"field.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"true\" display=\"chip\">\n        </p-multiselect>\n        }\n\n        @case (MetaFieldType.CHECKBOX) {\n        <div class=\"flex align-items-center gap-2\">\n          <p-checkbox [inputId]=\"key\" [binary]=\"true\" [formControlName]=\"key\">\n          </p-checkbox>\n\n          @if (placeholderKey()) {\n          <label [attr.for]=\"key\" class=\"meta-inline-label\">\n            {{ placeholderKey()! | translate }}\n          </label>\n          }\n        </div>\n        }\n\n        <!-- advanced: preko postoje\u0107ih komponenti -->\n        @case (MetaFieldType.TIMEPERIOD) {\n        <phoenix-meta-timeperiod [formControlName]=\"key\" [control]=\"field\" [parentForm]=\"form\"></phoenix-meta-timeperiod>\n        }\n\n        @case (MetaFieldType.CURRENCY) {\n        <phoenix-meta-currency [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-currency>\n        }\n\n        @case (MetaFieldType.START_DUE_DATE) {\n        <phoenix-meta-start-due-date-v2\n          [formControlName]=\"key\"\n          [attr.data-cy]=\"'start-due-' + key\">\n        </phoenix-meta-start-due-date-v2>\n        }\n\n        @case (MetaFieldType.TEXT_EDITOR) {\n        <phoenix-meta-text-editor [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-text-editor>\n        }\n\n        @case (MetaFieldType.CHECKBOX_COLOR) {\n        <phoenix-meta-checkbox-color-picker-v2\n          [formControlName]=\"key\"\n          [options]=\"(field.extra?.['colorGrid'] ?? [])\"\n          [disable]=\"isDisabled()\">\n        </phoenix-meta-checkbox-color-picker-v2>\n        }\n\n        @case (MetaFieldType.SWITCH) {\n        <phoenix-meta-switch [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-switch>\n        }\n\n        @case (MetaFieldType.SELECT_BUTTON) {\n        <phoenix-meta-select-button [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-select-button>\n        }\n\n        @case (MetaFieldType.ASSIGN) {\n        <phoenix-meta-assign-responsible-v2\n          [formControlName]=\"key\"\n          [items]=\"(field.extra?.['items'] ?? [])\"\n          [dialogHeaderKey]=\"(field.extra?.['dialogHeaderKey'] ?? 'LABELS.ASSIGN_RESPONSIBLE')\"\n        ></phoenix-meta-assign-responsible-v2>\n        }\n\n        <!-- @case (MetaFieldType.ASSIGN_ASSET) {\n        <phoenix-meta-assign-asset [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-assign-asset>\n        } -->\n\n        @case (MetaFieldType.COLOR) {\n          <phoenix-meta-color-picker-v2\n            [formControlName]=\"key\"\n            [disable]=\"isDisabled()\">\n          </phoenix-meta-color-picker-v2>\n        }\n\n        @case (MetaFieldType.UPLOAD) {\n        <phoenix-meta-upload [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-upload>\n        }\n\n        @case (MetaFieldType.UPLOAD_DRAG_DROP) {\n        <phoenix-meta-upload-dragdrop [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\"\n          [parentForm]=\"form\"></phoenix-meta-upload-dragdrop>\n        }\n\n        @case (MetaFieldType.LINKS_DATA) {\n        <!-- <input pInputText [id]=\"key\" [formControlName]=\"key\" [readonly]=\"true\"> -->\n        }\n\n        @case (MetaFieldType.SLOT) { }\n\n        @default {\n        <input pInputText [id]=\"key\" [formControlName]=\"key\">\n        }\n      }\n    }\n\n\n    @if (!readOnly && showError()) {\n    <small class=\"p-error block mt-1\">\n      <i class=\"pi pi-info-circle mr-1\"></i>{{ errorText() }}\n    </small>\n    }\n  </div>\n  }\n</div>", styles: [".meta-field{width:100%}.meta-required{margin-left:4px;color:#ef4444}.meta-textarea{width:100%;min-height:110px;resize:vertical;padding:.75rem;border-radius:8px;border:1px solid var(--surface-border, rgba(0, 0, 0, .12));background:var(--surface-0, transparent);color:inherit}.meta-inline-label{opacity:.9}\n"] }]
         }], propDecorators: { field: [{
                 type: Input,
                 args: [{ required: true }]
@@ -9301,9 +9301,11 @@ function flattenControls(input) {
 class MetaFormV2Component {
     form;
     config;
+    /** page-level readOnly (parent toggles) */
     readOnly = false;
-    contentStyle = null; // npr { width:'70%' }
-    contentClass = null; // opcionalno. 
+    /** optional layout props */
+    contentStyle = null;
+    contentClass = null;
     fb = inject(FormBuilder);
     submitValidator = inject(MetaSubmitValidatorService);
     translate = inject(TranslateService);
@@ -9319,49 +9321,41 @@ class MetaFormV2Component {
         const configChanged = !!changes['config'];
         const formChanged = !!changes['form'];
         const metaChanged = signature !== this.lastSignature;
-        const readOnlyChanged = !!changes['readOnly'];
-        if (!configChanged && !formChanged && !metaChanged && !readOnlyChanged)
+        const enteringEdit = !!changes['readOnly'] &&
+            changes['readOnly'].previousValue === true &&
+            changes['readOnly'].currentValue === false;
+        // ako se ništa bitno nije promenilo — izađi
+        if (!configChanged && !formChanged && !metaChanged && !enteringEdit)
             return;
-        // cleanup dependencies
-        this.depCleanup?.();
-        this.depCleanup = undefined;
+        // cleanup dependencies (samo kad config/meta menjaš)
+        if (configChanged || metaChanged) {
+            this.depCleanup?.();
+            this.depCleanup = undefined;
+        }
         // ensure controls + sync validators
         const initial = this.config.initialValues ?? {};
         ensureControlsV2(this.fb, this.form, flat, initial, { lang: this.translate.currentLang });
         // patch initial values (no emit)
         this.form.patchValue(initial, { emitEvent: false });
         this.form.updateValueAndValidity({ emitEvent: false });
-        if (readOnlyChanged && this.readOnly === false) {
-            queueMicrotask(() => {
-                this.form.markAllAsTouched();
-                Object.values(this.form.controls).forEach((c) => c.updateValueAndValidity({ emitEvent: true }));
-                this.form.updateValueAndValidity({ emitEvent: true });
-                if (this.isGrouped) {
-                    const groups = this.groupedControls ?? [];
-                    this.expandedGroupIds = groups
-                        .filter((g) => this.groupHasInvalid(g))
-                        .map((g) => String(g?.id ?? ''))
-                        .filter(Boolean);
-                }
-            });
-        }
-        // set initial expanded groups (when grouped)
-        if (configChanged || metaChanged) {
+        // ✅ init expanded only when STRUCTURE changed (metaChanged)
+        // otvori sve što je collapsed:false
+        if (metaChanged) {
             if (this.isGrouped) {
                 const groups = this.groupedControls ?? [];
                 this.expandedGroupIds = groups
                     .filter((g) => !g?.collapsed)
-                    .map((g) => String(g?.id ?? ''))
-                    .filter((id) => !!id);
+                    .map((g) => this.panelValue(g))
+                    .filter(Boolean);
             }
             else {
                 this.expandedGroupIds = [];
             }
         }
-        // register submit-only validators (still ok to keep, even if empty)
+        // register submit-only validators
         this.submitValidator.register(this.form, this.config.submitValidators);
-        // bind dependencies
-        if (this.config.setupDependencies) {
+        // bind dependencies (samo kad config/meta menjaš)
+        if ((configChanged || metaChanged) && this.config.setupDependencies) {
             const maybeCleanup = this.config.setupDependencies({
                 form: this.form,
                 flatControls: flat,
@@ -9372,6 +9366,20 @@ class MetaFormV2Component {
             if (typeof maybeCleanup === 'function')
                 this.depCleanup = maybeCleanup;
         }
+        // ✅ entering edit:
+        // 1) odmah pokaži sync greške
+        // 2) auto-expand invalid groups (ne zatvaraj postojeće)
+        if (enteringEdit) {
+            queueMicrotask(() => {
+                this.form.markAllAsTouched();
+                // da status/value promene “prođu” do polja
+                Object.values(this.form.controls).forEach((c) => {
+                    c.updateValueAndValidity({ emitEvent: true });
+                });
+                this.form.updateValueAndValidity({ emitEvent: true });
+                this.expandInvalidGroupsUnion();
+            });
+        }
         this.lastSignature = signature;
     }
     // Template handler (typed exactly for our template usage)
@@ -9402,10 +9410,7 @@ class MetaFormV2Component {
     groupTrack(g, idx) {
         return g?.id ?? idx;
     }
-    groupId(g) {
-        return String(g?.id ?? idxSafe(g));
-    }
-    /** Template helper: panel values must match accordion value type */
+    /** PrimeNG panel value must match accordion value type */
     panelValue(g) {
         const id = g?.id;
         return id === null || id === undefined ? '' : `${id}`;
@@ -9416,6 +9421,19 @@ class MetaFormV2Component {
             .filter(Boolean);
         return keys.some((k) => this.form.get(k)?.invalid);
     }
+    /** ✅ open invalid groups but KEEP already opened ones */
+    expandInvalidGroupsUnion() {
+        if (!this.isGrouped)
+            return;
+        const groups = this.groupedControls ?? [];
+        const invalidIds = groups
+            .filter((g) => this.groupHasInvalid(g))
+            .map((g) => this.panelValue(g))
+            .filter(Boolean);
+        if (!invalidIds.length)
+            return;
+        this.expandedGroupIds = Array.from(new Set([...this.expandedGroupIds, ...invalidIds]));
+    }
     ngOnDestroy() {
         this.depCleanup?.();
     }
@@ -9445,10 +9463,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }], contentClass: [{
                 type: Input
             }] } });
-function idxSafe(g) {
-    // fallback stable id if some group has no id
-    return g?.labelKey ? String(g.labelKey) : 'group';
-}
 
 /** Public API Surface of phoenix */