@fuentis/phoenix-ui 0.0.9-alpha.552 → 0.0.9-alpha.554

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -9174,6 +9174,411 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
+class MetaSwitchV2Component {
+    /**
+     * Optional external disable flag (field-level disable coming from meta config).
+     * This is combined with the disabled state coming from Angular Forms (CVA).
+     */
+    disable = false;
+    /**
+     * Optional flag to hide the switch from UI (meta hidden).
+     * Keep in mind: hidden does not automatically disable the control.
+     */
+    hidden = false;
+    /**
+     * Optional data-cy attribute for e2e tests (e.g. "switch-singleEntity").
+     */
+    dataCy;
+    cdr = inject(ChangeDetectorRef);
+    /**
+     * Current boolean value.
+     * We keep it strictly boolean to avoid "true"/"false" string issues.
+     */
+    value = false;
+    /**
+     * CVA callback invoked when the value changes.
+     */
+    onChange = () => { };
+    /**
+     * CVA callback invoked when the control is marked as touched.
+     * Standard: call on blur, not on every change.
+     */
+    onTouched = () => { };
+    /**
+     * Disabled state coming from Angular Forms (ControlValueAccessor).
+     */
+    isDisabled = false;
+    /**
+     * Final disabled state combining:
+     * - form-level disabled state (CVA)
+     * - field-level disable flag (input)
+     */
+    get disabled() {
+        return this.disable || this.isDisabled;
+    }
+    /**
+     * Writes a new value from the parent form control into the component.
+     * Keep it idempotent and UI-safe.
+     */
+    writeValue(v) {
+        this.value = this.normalizeBool(v);
+        this.cdr.markForCheck();
+    }
+    /**
+     * Registers callback that is triggered when the value changes.
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * Registers callback that is triggered when the control is touched.
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * Receives disabled state from Angular Forms and updates local state.
+     */
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    /**
+     * Handler for switch change.
+     * Propagates value to the parent form control.
+     *
+     * Note: we intentionally do NOT call onTouched here (our standard is: touched on blur).
+     */
+    onSwitchChange(next) {
+        if (this.disabled)
+            return;
+        const normalized = this.normalizeBool(next);
+        // prevent redundant emits
+        if (normalized === this.value) {
+            this.cdr.markForCheck();
+            return;
+        }
+        this.value = normalized;
+        this.onChange(normalized);
+        this.cdr.markForCheck();
+    }
+    /**
+     * Marks control as touched when user leaves the component.
+     */
+    handleBlur() {
+        if (this.disabled)
+            return;
+        this.onTouched();
+    }
+    /**
+     * Normalizes incoming values to strict boolean.
+     * Supports: boolean, "true"/"false", 1/0, "1"/"0".
+     */
+    normalizeBool(v) {
+        if (v === true || v === false)
+            return v;
+        if (v === 1 || v === '1')
+            return true;
+        if (v === 0 || v === '0')
+            return false;
+        if (typeof v === 'string') {
+            const s = v.trim().toLowerCase();
+            if (s === 'true')
+                return true;
+            if (s === 'false')
+                return false;
+        }
+        return !!v;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaSwitchV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: MetaSwitchV2Component, isStandalone: true, selector: "phoenix-meta-switch-v2", inputs: { disable: "disable", hidden: "hidden", dataCy: "dataCy" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MetaSwitchV2Component),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <p-toggleSwitch
+      class="phoenix-switch-v2"
+      [(ngModel)]="value"
+      (ngModelChange)="onSwitchChange($event)"
+      (onBlur)="handleBlur()"
+      [disabled]="disabled"
+      [hidden]="hidden"
+      [attr.data-cy]="dataCy ?? null"
+    ></p-toggleSwitch>
+  `, isInline: true, styles: [":host ::ng-deep .p-toggleswitch{margin-top:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$7.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaSwitchV2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'phoenix-meta-switch-v2', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, ToggleSwitchModule], template: `
+    <p-toggleSwitch
+      class="phoenix-switch-v2"
+      [(ngModel)]="value"
+      (ngModelChange)="onSwitchChange($event)"
+      (onBlur)="handleBlur()"
+      [disabled]="disabled"
+      [hidden]="hidden"
+      [attr.data-cy]="dataCy ?? null"
+    ></p-toggleSwitch>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MetaSwitchV2Component),
+                            multi: true,
+                        },
+                    ], styles: [":host ::ng-deep .p-toggleswitch{margin-top:12px}\n"] }]
+        }], propDecorators: { disable: [{
+                type: Input
+            }], hidden: [{
+                type: Input
+            }], dataCy: [{
+                type: Input
+            }] } });
+
+/**
+ * V2 Password meta field component.
+ *
+ * Goals vs legacy component:
+ * - Uses a clean ControlValueAccessor implementation (no BaseMetaField inheritance).
+ * - OnPush + explicit markForCheck() for predictable rendering in large dynamic forms.
+ * - Supports "disable" (meta-level) + Angular Forms disabled state (CVA) combined.
+ * - Emits touched on blur (standard), not on every input.
+ * - Keeps value as string and normalizes null/undefined to ''.
+ *
+ * Notes:
+ * - PrimeNG <p-password> supports toggleMask, feedback, strength meter, etc.
+ * - We keep [feedback]="false" to match old behavior.
+ */
+class MetaPasswordFieldV2Component {
+    /**
+     * Meta control configuration passed from dynamic forms system.
+     * Keep it `any` to be compatible with existing meta-form model.
+     *
+     * If you have a shared type (e.g. MetaFormControl), replace `any`.
+     */
+    control;
+    /**
+     * Underlying Angular control reference used by InlineFieldError.
+     * In your meta system this is typically injected/assigned by parent wrapper.
+     *
+     * If you have a strict type: AbstractControl | null
+     */
+    ctrl;
+    /**
+     * Optional external disable flag (field-level disable coming from meta config).
+     * This is combined with the disabled state coming from Angular Forms (CVA).
+     */
+    disable = false;
+    /**
+     * Optional flag to hide the control from UI (meta hidden).
+     * Keep in mind: hidden does not automatically disable the control.
+     */
+    hidden = false;
+    /**
+     * Optional data-cy attribute for e2e tests (e.g. "password-admin").
+     * If not provided, you can still generate it from control.id in template usage.
+     */
+    dataCy;
+    /**
+     * PrimeNG feedback (strength meter / hints). Disabled by default to match v1.
+     */
+    feedback = false;
+    /**
+     * Autocomplete attribute: by default we set to "off" (match old component).
+     * For login forms you might want "current-password" or "new-password".
+     */
+    autocomplete = 'off';
+    cdr = inject(ChangeDetectorRef);
+    /**
+     * Current password value.
+     * Always keep as string to avoid null/undefined edge cases with ngModel.
+     */
+    value = '';
+    /**
+     * CVA callback invoked when the value changes.
+     */
+    onChange = () => { };
+    /**
+     * CVA callback invoked when the control is marked as touched.
+     * Standard: call on blur, not on every change.
+     */
+    onTouched = () => { };
+    /**
+     * Disabled state coming from Angular Forms (ControlValueAccessor).
+     */
+    isDisabled = false;
+    /**
+     * Final disabled state combining:
+     * - form-level disabled state (CVA)
+     * - field-level disable flag (input)
+     */
+    get disabled() {
+        return this.disable || this.isDisabled;
+    }
+    /**
+     * Writes a new value from the parent form control into the component.
+     * Keep it idempotent and UI-safe.
+     */
+    writeValue(v) {
+        const next = this.normalizeString(v);
+        // Prevent redundant UI updates.
+        if (next === this.value) {
+            this.cdr.markForCheck();
+            return;
+        }
+        this.value = next;
+        this.cdr.markForCheck();
+    }
+    /**
+     * Registers callback that is triggered when the value changes.
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * Registers callback that is triggered when the control is touched.
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * Receives disabled state from Angular Forms and updates local state.
+     */
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    /**
+     * Handler for user typing into the password input.
+     * Propagates current value to the parent form control.
+     *
+     * Note:
+     * - PrimeNG (input) gives us an event; we can also just use this.value directly.
+     * - We intentionally do NOT call onTouched here (touched on blur).
+     */
+    onPasswordInput(event) {
+        if (this.disabled)
+            return;
+        const next = this.getInputValue(event);
+        // Prevent redundant emits.
+        if (next === this.value) {
+            this.cdr.markForCheck();
+            return;
+        }
+        this.value = next;
+        this.onChange(next);
+        this.cdr.markForCheck();
+    }
+    /**
+     * Marks control as touched when user leaves the component.
+     */
+    handleBlur() {
+        if (this.disabled)
+            return;
+        this.onTouched();
+    }
+    /**
+     * PrimeNG input event -> string value.
+     * Supports:
+     * - native input event: event.target.value
+     * - direct string (some wrappers)
+     */
+    getInputValue(event) {
+        const v = event?.target?.value ?? event;
+        return this.normalizeString(v);
+    }
+    /**
+     * Normalizes incoming values to a string.
+     * - null/undefined -> ''
+     * - other -> String(v)
+     */
+    normalizeString(v) {
+        if (v === null || v === undefined)
+            return '';
+        return String(v);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaPasswordFieldV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: MetaPasswordFieldV2Component, isStandalone: true, selector: "phoenix-meta-password-field-v2", inputs: { control: "control", ctrl: "ctrl", disable: "disable", hidden: "hidden", dataCy: "dataCy", feedback: "feedback", autocomplete: "autocomplete" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MetaPasswordFieldV2Component),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <div>
+
+      <!--
+        PrimeNG Password:
+        - We use ngModel for simple CVA integration (same pattern as other meta v2 fields).
+        - We handle change via (input) to propagate every keystroke to the parent form.
+        - We mark touched on blur to match standard UX (touched != changed).
+      -->
+      <p-password
+        class="phoenix-password-v2"
+        [(ngModel)]="value"
+        (input)="onPasswordInput($event)"
+        (onBlur)="handleBlur()"
+        [disabled]="disabled"
+        [hidden]="hidden"
+        [feedback]="feedback"
+        [attr.autocomplete]="autocomplete"
+        [attr.data-cy]="dataCy ?? null"
+      ></p-password>
+    </div>
+  `, isInline: true, styles: [":host ::ng-deep .p-component{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i2$9.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo"], outputs: ["onFocus", "onBlur", "onClear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaPasswordFieldV2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'phoenix-meta-password-field-v2', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        FormsModule,
+                        TranslateModule,
+                        PasswordModule,
+                    ], template: `
+    <div>
+
+      <!--
+        PrimeNG Password:
+        - We use ngModel for simple CVA integration (same pattern as other meta v2 fields).
+        - We handle change via (input) to propagate every keystroke to the parent form.
+        - We mark touched on blur to match standard UX (touched != changed).
+      -->
+      <p-password
+        class="phoenix-password-v2"
+        [(ngModel)]="value"
+        (input)="onPasswordInput($event)"
+        (onBlur)="handleBlur()"
+        [disabled]="disabled"
+        [hidden]="hidden"
+        [feedback]="feedback"
+        [attr.autocomplete]="autocomplete"
+        [attr.data-cy]="dataCy ?? null"
+      ></p-password>
+    </div>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MetaPasswordFieldV2Component),
+                            multi: true,
+                        },
+                    ], styles: [":host ::ng-deep .p-component{width:100%}\n"] }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], ctrl: [{
+                type: Input
+            }], disable: [{
+                type: Input
+            }], hidden: [{
+                type: Input
+            }], dataCy: [{
+                type: Input
+            }], feedback: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }] } });
+
 class MetaFormFieldV2Component {
     /** Metadata definition of the field (type, key, options, styles, flags, etc.) */
     field;
@@ -9437,13 +9842,13 @@ 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        <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\" fluid [autoResize]=\"false\" rows=\"5\"\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.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"false\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n        <p-select [inputId]=\"key\" [options]=\"field.configuration.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.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"false\" 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.configuration.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.configuration.extra?.['items'] ?? [])\"\n          [dialogHeaderKey]=\"(field.configuration.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{resize:none!important}.meta-inline-label{opacity:.9}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}\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        <phoenix-meta-password-field-v2 [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\">\n        </phoenix-meta-password-field-v2>\n        }\n\n        @case (MetaFieldType.TEXT_AREA) {\n        <textarea pTextarea class=\"meta-textarea\" [id]=\"key\" [formControlName]=\"key\" fluid [autoResize]=\"false\" rows=\"5\"\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.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"false\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n        <p-select [inputId]=\"key\" [options]=\"field.configuration.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.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"false\" 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.configuration.extra?.['colorGrid'] ?? [])\"\n          [disable]=\"isDisabled()\">\n        </phoenix-meta-checkbox-color-picker-v2>\n        }\n\n        @case (MetaFieldType.SWITCH) {\n        <phoenix-meta-switch-v2 [disable]=\"isDisabled()\" [formControlName]=\"key\" [hidden]=\"field.hidden ?? false\"\n          [dataCy]=\"'switch-' + key\"></phoenix-meta-switch-v2>\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.configuration.extra?.['items'] ?? [])\"\n          [dialogHeaderKey]=\"(field.configuration.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{resize:none!important}.meta-inline-label{opacity:.9}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}\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 base inputs
                 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: 
                 // Advanced / custom Phoenix fields
-                MetaTimeperiodComponent, selector: "phoenix-meta-timeperiod", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaCurrencyComponent, selector: "phoenix-meta-currency" }, { kind: "component", type: MetaStartDueDateV2Component, selector: "phoenix-meta-start-due-date-v2", inputs: ["dataCy", "disable"] }, { kind: "component", type: MetaTextEditorComponent, selector: "phoenix-meta-text-editor", inputs: ["previewMode", "hideLabel"] }, { kind: "component", type: MetaCheckboxColorPickerV2Component, selector: "phoenix-meta-checkbox-color-picker-v2", inputs: ["options", "disable"] }, { kind: "component", type: MetaSwitchComponent, selector: "phoenix-meta-switch" }, { kind: "component", type: MetaSelectButtonComponent, selector: "phoenix-meta-select-button" }, { kind: "component", type: MetaAssignResponsibleV2Component, selector: "phoenix-meta-assign-responsible-v2", inputs: ["items", "dialogHeaderKey"] }, { kind: "component", type: 
+                MetaTimeperiodComponent, selector: "phoenix-meta-timeperiod", inputs: ["control", "parentForm"] }, { kind: "component", type: MetaCurrencyComponent, selector: "phoenix-meta-currency" }, { kind: "component", type: MetaStartDueDateV2Component, selector: "phoenix-meta-start-due-date-v2", inputs: ["dataCy", "disable"] }, { kind: "component", type: MetaTextEditorComponent, selector: "phoenix-meta-text-editor", inputs: ["previewMode", "hideLabel"] }, { kind: "component", type: MetaCheckboxColorPickerV2Component, selector: "phoenix-meta-checkbox-color-picker-v2", inputs: ["options", "disable"] }, { kind: "component", type: MetaSwitchV2Component, selector: "phoenix-meta-switch-v2", inputs: ["disable", "hidden", "dataCy"] }, { kind: "component", type: MetaSelectButtonComponent, selector: "phoenix-meta-select-button" }, { kind: "component", type: MetaAssignResponsibleV2Component, selector: "phoenix-meta-assign-responsible-v2", inputs: ["items", "dialogHeaderKey"] }, { kind: "component", type: 
                 // MetaAssignAssetComponent,
-                MetaPasswordFeildComponent, selector: "phoenix-meta-password-feild" }, { kind: "component", type: MetaColorPickerV2Component, selector: "phoenix-meta-color-picker-v2", inputs: ["disable"] }, { kind: "component", type: MetaUploadComponent, selector: "phoenix-meta-upload" }, { kind: "component", type: MetaUploadComponentDragDrop, selector: "phoenix-meta-upload-dragdrop" }, { kind: "component", type: 
+                MetaPasswordFieldV2Component, selector: "phoenix-meta-password-field-v2", inputs: ["control", "ctrl", "disable", "hidden", "dataCy", "feedback", "autocomplete"] }, { kind: "component", type: MetaColorPickerV2Component, selector: "phoenix-meta-color-picker-v2", inputs: ["disable"] }, { kind: "component", type: MetaUploadComponent, selector: "phoenix-meta-upload" }, { kind: "component", type: MetaUploadComponentDragDrop, selector: "phoenix-meta-upload-dragdrop" }, { kind: "component", type: 
                 // Read-only renderer used when page or field is in read-only mode
                 ReadOnlyInputV2Component, selector: "phoenix-read-only-input-v2", inputs: ["field", "form"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -9468,17 +9873,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         MetaStartDueDateV2Component,
                         MetaTextEditorComponent,
                         MetaCheckboxColorPickerV2Component,
-                        MetaSwitchComponent,
+                        MetaSwitchV2Component,
                         MetaSelectButtonComponent,
                         MetaAssignResponsibleV2Component,
                         // MetaAssignAssetComponent,
-                        MetaPasswordFeildComponent,
+                        MetaPasswordFieldV2Component,
                         MetaColorPickerV2Component,
                         MetaUploadComponent,
                         MetaUploadComponentDragDrop,
                         // Read-only renderer used when page or field is in read-only mode
                         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        <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\" fluid [autoResize]=\"false\" rows=\"5\"\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.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"false\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n        <p-select [inputId]=\"key\" [options]=\"field.configuration.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.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"false\" 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.configuration.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.configuration.extra?.['items'] ?? [])\"\n          [dialogHeaderKey]=\"(field.configuration.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{resize:none!important}.meta-inline-label{opacity:.9}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}\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        <phoenix-meta-password-field-v2 [disable]=\"isDisabled()\" [formControlName]=\"key\" [control]=\"field\">\n        </phoenix-meta-password-field-v2>\n        }\n\n        @case (MetaFieldType.TEXT_AREA) {\n        <textarea pTextarea class=\"meta-textarea\" [id]=\"key\" [formControlName]=\"key\" fluid [autoResize]=\"false\" rows=\"5\"\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.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"false\">\n        </p-select>\n        }\n\n        @case (MetaFieldType.SS_OPTION_OBJECT_BASED) {\n        <p-select [inputId]=\"key\" [options]=\"field.configuration.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.configuration.options ?? []\" optionLabel=\"label\" optionValue=\"value\"\n          [formControlName]=\"key\" [showClear]=\"false\" 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.configuration.extra?.['colorGrid'] ?? [])\"\n          [disable]=\"isDisabled()\">\n        </phoenix-meta-checkbox-color-picker-v2>\n        }\n\n        @case (MetaFieldType.SWITCH) {\n        <phoenix-meta-switch-v2 [disable]=\"isDisabled()\" [formControlName]=\"key\" [hidden]=\"field.hidden ?? false\"\n          [dataCy]=\"'switch-' + key\"></phoenix-meta-switch-v2>\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.configuration.extra?.['items'] ?? [])\"\n          [dialogHeaderKey]=\"(field.configuration.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{resize:none!important}.meta-inline-label{opacity:.9}.p-inputtext.ng-invalid.ng-dirty{border-color:var(--p-inputtext-border-color)!important}.p-select.ng-invalid.ng-dirty{border-color:var(--p-select-border-color)!important}\n"] }]
         }], propDecorators: { field: [{
                 type: Input,
                 args: [{ required: true }]