@fuentis/phoenix-ui 0.0.9-alpha.553 → 0.0.9-alpha.554
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -9336,6 +9336,249 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
9336
9336
|
type: Input
|
|
9337
9337
|
}] } });
|
|
9338
9338
|
|
|
9339
|
+
/**
|
|
9340
|
+
* V2 Password meta field component.
|
|
9341
|
+
*
|
|
9342
|
+
* Goals vs legacy component:
|
|
9343
|
+
* - Uses a clean ControlValueAccessor implementation (no BaseMetaField inheritance).
|
|
9344
|
+
* - OnPush + explicit markForCheck() for predictable rendering in large dynamic forms.
|
|
9345
|
+
* - Supports "disable" (meta-level) + Angular Forms disabled state (CVA) combined.
|
|
9346
|
+
* - Emits touched on blur (standard), not on every input.
|
|
9347
|
+
* - Keeps value as string and normalizes null/undefined to ''.
|
|
9348
|
+
*
|
|
9349
|
+
* Notes:
|
|
9350
|
+
* - PrimeNG <p-password> supports toggleMask, feedback, strength meter, etc.
|
|
9351
|
+
* - We keep [feedback]="false" to match old behavior.
|
|
9352
|
+
*/
|
|
9353
|
+
class MetaPasswordFieldV2Component {
|
|
9354
|
+
/**
|
|
9355
|
+
* Meta control configuration passed from dynamic forms system.
|
|
9356
|
+
* Keep it `any` to be compatible with existing meta-form model.
|
|
9357
|
+
*
|
|
9358
|
+
* If you have a shared type (e.g. MetaFormControl), replace `any`.
|
|
9359
|
+
*/
|
|
9360
|
+
control;
|
|
9361
|
+
/**
|
|
9362
|
+
* Underlying Angular control reference used by InlineFieldError.
|
|
9363
|
+
* In your meta system this is typically injected/assigned by parent wrapper.
|
|
9364
|
+
*
|
|
9365
|
+
* If you have a strict type: AbstractControl | null
|
|
9366
|
+
*/
|
|
9367
|
+
ctrl;
|
|
9368
|
+
/**
|
|
9369
|
+
* Optional external disable flag (field-level disable coming from meta config).
|
|
9370
|
+
* This is combined with the disabled state coming from Angular Forms (CVA).
|
|
9371
|
+
*/
|
|
9372
|
+
disable = false;
|
|
9373
|
+
/**
|
|
9374
|
+
* Optional flag to hide the control from UI (meta hidden).
|
|
9375
|
+
* Keep in mind: hidden does not automatically disable the control.
|
|
9376
|
+
*/
|
|
9377
|
+
hidden = false;
|
|
9378
|
+
/**
|
|
9379
|
+
* Optional data-cy attribute for e2e tests (e.g. "password-admin").
|
|
9380
|
+
* If not provided, you can still generate it from control.id in template usage.
|
|
9381
|
+
*/
|
|
9382
|
+
dataCy;
|
|
9383
|
+
/**
|
|
9384
|
+
* PrimeNG feedback (strength meter / hints). Disabled by default to match v1.
|
|
9385
|
+
*/
|
|
9386
|
+
feedback = false;
|
|
9387
|
+
/**
|
|
9388
|
+
* Autocomplete attribute: by default we set to "off" (match old component).
|
|
9389
|
+
* For login forms you might want "current-password" or "new-password".
|
|
9390
|
+
*/
|
|
9391
|
+
autocomplete = 'off';
|
|
9392
|
+
cdr = inject(ChangeDetectorRef);
|
|
9393
|
+
/**
|
|
9394
|
+
* Current password value.
|
|
9395
|
+
* Always keep as string to avoid null/undefined edge cases with ngModel.
|
|
9396
|
+
*/
|
|
9397
|
+
value = '';
|
|
9398
|
+
/**
|
|
9399
|
+
* CVA callback invoked when the value changes.
|
|
9400
|
+
*/
|
|
9401
|
+
onChange = () => { };
|
|
9402
|
+
/**
|
|
9403
|
+
* CVA callback invoked when the control is marked as touched.
|
|
9404
|
+
* Standard: call on blur, not on every change.
|
|
9405
|
+
*/
|
|
9406
|
+
onTouched = () => { };
|
|
9407
|
+
/**
|
|
9408
|
+
* Disabled state coming from Angular Forms (ControlValueAccessor).
|
|
9409
|
+
*/
|
|
9410
|
+
isDisabled = false;
|
|
9411
|
+
/**
|
|
9412
|
+
* Final disabled state combining:
|
|
9413
|
+
* - form-level disabled state (CVA)
|
|
9414
|
+
* - field-level disable flag (input)
|
|
9415
|
+
*/
|
|
9416
|
+
get disabled() {
|
|
9417
|
+
return this.disable || this.isDisabled;
|
|
9418
|
+
}
|
|
9419
|
+
/**
|
|
9420
|
+
* Writes a new value from the parent form control into the component.
|
|
9421
|
+
* Keep it idempotent and UI-safe.
|
|
9422
|
+
*/
|
|
9423
|
+
writeValue(v) {
|
|
9424
|
+
const next = this.normalizeString(v);
|
|
9425
|
+
// Prevent redundant UI updates.
|
|
9426
|
+
if (next === this.value) {
|
|
9427
|
+
this.cdr.markForCheck();
|
|
9428
|
+
return;
|
|
9429
|
+
}
|
|
9430
|
+
this.value = next;
|
|
9431
|
+
this.cdr.markForCheck();
|
|
9432
|
+
}
|
|
9433
|
+
/**
|
|
9434
|
+
* Registers callback that is triggered when the value changes.
|
|
9435
|
+
*/
|
|
9436
|
+
registerOnChange(fn) {
|
|
9437
|
+
this.onChange = fn;
|
|
9438
|
+
}
|
|
9439
|
+
/**
|
|
9440
|
+
* Registers callback that is triggered when the control is touched.
|
|
9441
|
+
*/
|
|
9442
|
+
registerOnTouched(fn) {
|
|
9443
|
+
this.onTouched = fn;
|
|
9444
|
+
}
|
|
9445
|
+
/**
|
|
9446
|
+
* Receives disabled state from Angular Forms and updates local state.
|
|
9447
|
+
*/
|
|
9448
|
+
setDisabledState(isDisabled) {
|
|
9449
|
+
this.isDisabled = isDisabled;
|
|
9450
|
+
this.cdr.markForCheck();
|
|
9451
|
+
}
|
|
9452
|
+
/**
|
|
9453
|
+
* Handler for user typing into the password input.
|
|
9454
|
+
* Propagates current value to the parent form control.
|
|
9455
|
+
*
|
|
9456
|
+
* Note:
|
|
9457
|
+
* - PrimeNG (input) gives us an event; we can also just use this.value directly.
|
|
9458
|
+
* - We intentionally do NOT call onTouched here (touched on blur).
|
|
9459
|
+
*/
|
|
9460
|
+
onPasswordInput(event) {
|
|
9461
|
+
if (this.disabled)
|
|
9462
|
+
return;
|
|
9463
|
+
const next = this.getInputValue(event);
|
|
9464
|
+
// Prevent redundant emits.
|
|
9465
|
+
if (next === this.value) {
|
|
9466
|
+
this.cdr.markForCheck();
|
|
9467
|
+
return;
|
|
9468
|
+
}
|
|
9469
|
+
this.value = next;
|
|
9470
|
+
this.onChange(next);
|
|
9471
|
+
this.cdr.markForCheck();
|
|
9472
|
+
}
|
|
9473
|
+
/**
|
|
9474
|
+
* Marks control as touched when user leaves the component.
|
|
9475
|
+
*/
|
|
9476
|
+
handleBlur() {
|
|
9477
|
+
if (this.disabled)
|
|
9478
|
+
return;
|
|
9479
|
+
this.onTouched();
|
|
9480
|
+
}
|
|
9481
|
+
/**
|
|
9482
|
+
* PrimeNG input event -> string value.
|
|
9483
|
+
* Supports:
|
|
9484
|
+
* - native input event: event.target.value
|
|
9485
|
+
* - direct string (some wrappers)
|
|
9486
|
+
*/
|
|
9487
|
+
getInputValue(event) {
|
|
9488
|
+
const v = event?.target?.value ?? event;
|
|
9489
|
+
return this.normalizeString(v);
|
|
9490
|
+
}
|
|
9491
|
+
/**
|
|
9492
|
+
* Normalizes incoming values to a string.
|
|
9493
|
+
* - null/undefined -> ''
|
|
9494
|
+
* - other -> String(v)
|
|
9495
|
+
*/
|
|
9496
|
+
normalizeString(v) {
|
|
9497
|
+
if (v === null || v === undefined)
|
|
9498
|
+
return '';
|
|
9499
|
+
return String(v);
|
|
9500
|
+
}
|
|
9501
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaPasswordFieldV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9502
|
+
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: [
|
|
9503
|
+
{
|
|
9504
|
+
provide: NG_VALUE_ACCESSOR,
|
|
9505
|
+
useExisting: forwardRef(() => MetaPasswordFieldV2Component),
|
|
9506
|
+
multi: true,
|
|
9507
|
+
},
|
|
9508
|
+
], ngImport: i0, template: `
|
|
9509
|
+
<div>
|
|
9510
|
+
|
|
9511
|
+
<!--
|
|
9512
|
+
PrimeNG Password:
|
|
9513
|
+
- We use ngModel for simple CVA integration (same pattern as other meta v2 fields).
|
|
9514
|
+
- We handle change via (input) to propagate every keystroke to the parent form.
|
|
9515
|
+
- We mark touched on blur to match standard UX (touched != changed).
|
|
9516
|
+
-->
|
|
9517
|
+
<p-password
|
|
9518
|
+
class="phoenix-password-v2"
|
|
9519
|
+
[(ngModel)]="value"
|
|
9520
|
+
(input)="onPasswordInput($event)"
|
|
9521
|
+
(onBlur)="handleBlur()"
|
|
9522
|
+
[disabled]="disabled"
|
|
9523
|
+
[hidden]="hidden"
|
|
9524
|
+
[feedback]="feedback"
|
|
9525
|
+
[attr.autocomplete]="autocomplete"
|
|
9526
|
+
[attr.data-cy]="dataCy ?? null"
|
|
9527
|
+
></p-password>
|
|
9528
|
+
</div>
|
|
9529
|
+
`, 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 });
|
|
9530
|
+
}
|
|
9531
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaPasswordFieldV2Component, decorators: [{
|
|
9532
|
+
type: Component,
|
|
9533
|
+
args: [{ selector: 'phoenix-meta-password-field-v2', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
9534
|
+
CommonModule,
|
|
9535
|
+
FormsModule,
|
|
9536
|
+
TranslateModule,
|
|
9537
|
+
PasswordModule,
|
|
9538
|
+
], template: `
|
|
9539
|
+
<div>
|
|
9540
|
+
|
|
9541
|
+
<!--
|
|
9542
|
+
PrimeNG Password:
|
|
9543
|
+
- We use ngModel for simple CVA integration (same pattern as other meta v2 fields).
|
|
9544
|
+
- We handle change via (input) to propagate every keystroke to the parent form.
|
|
9545
|
+
- We mark touched on blur to match standard UX (touched != changed).
|
|
9546
|
+
-->
|
|
9547
|
+
<p-password
|
|
9548
|
+
class="phoenix-password-v2"
|
|
9549
|
+
[(ngModel)]="value"
|
|
9550
|
+
(input)="onPasswordInput($event)"
|
|
9551
|
+
(onBlur)="handleBlur()"
|
|
9552
|
+
[disabled]="disabled"
|
|
9553
|
+
[hidden]="hidden"
|
|
9554
|
+
[feedback]="feedback"
|
|
9555
|
+
[attr.autocomplete]="autocomplete"
|
|
9556
|
+
[attr.data-cy]="dataCy ?? null"
|
|
9557
|
+
></p-password>
|
|
9558
|
+
</div>
|
|
9559
|
+
`, providers: [
|
|
9560
|
+
{
|
|
9561
|
+
provide: NG_VALUE_ACCESSOR,
|
|
9562
|
+
useExisting: forwardRef(() => MetaPasswordFieldV2Component),
|
|
9563
|
+
multi: true,
|
|
9564
|
+
},
|
|
9565
|
+
], styles: [":host ::ng-deep .p-component{width:100%}\n"] }]
|
|
9566
|
+
}], propDecorators: { control: [{
|
|
9567
|
+
type: Input
|
|
9568
|
+
}], ctrl: [{
|
|
9569
|
+
type: Input
|
|
9570
|
+
}], disable: [{
|
|
9571
|
+
type: Input
|
|
9572
|
+
}], hidden: [{
|
|
9573
|
+
type: Input
|
|
9574
|
+
}], dataCy: [{
|
|
9575
|
+
type: Input
|
|
9576
|
+
}], feedback: [{
|
|
9577
|
+
type: Input
|
|
9578
|
+
}], autocomplete: [{
|
|
9579
|
+
type: Input
|
|
9580
|
+
}] } });
|
|
9581
|
+
|
|
9339
9582
|
class MetaFormFieldV2Component {
|
|
9340
9583
|
/** Metadata definition of the field (type, key, options, styles, flags, etc.) */
|
|
9341
9584
|
field;
|
|
@@ -9599,13 +9842,13 @@ class MetaFormFieldV2Component {
|
|
|
9599
9842
|
return String(v);
|
|
9600
9843
|
}
|
|
9601
9844
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormFieldV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9602
|
-
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-
|
|
9845
|
+
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:
|
|
9603
9846
|
// PrimeNG 20 base inputs
|
|
9604
9847
|
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:
|
|
9605
9848
|
// Advanced / custom Phoenix fields
|
|
9606
9849
|
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:
|
|
9607
9850
|
// MetaAssignAssetComponent,
|
|
9608
|
-
|
|
9851
|
+
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:
|
|
9609
9852
|
// Read-only renderer used when page or field is in read-only mode
|
|
9610
9853
|
ReadOnlyInputV2Component, selector: "phoenix-read-only-input-v2", inputs: ["field", "form"] }, { kind: "pipe", type: i3$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9611
9854
|
}
|
|
@@ -9634,13 +9877,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
9634
9877
|
MetaSelectButtonComponent,
|
|
9635
9878
|
MetaAssignResponsibleV2Component,
|
|
9636
9879
|
// MetaAssignAssetComponent,
|
|
9637
|
-
|
|
9880
|
+
MetaPasswordFieldV2Component,
|
|
9638
9881
|
MetaColorPickerV2Component,
|
|
9639
9882
|
MetaUploadComponent,
|
|
9640
9883
|
MetaUploadComponentDragDrop,
|
|
9641
9884
|
// Read-only renderer used when page or field is in read-only mode
|
|
9642
9885
|
ReadOnlyInputV2Component,
|
|
9643
|
-
], 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-
|
|
9886
|
+
], 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"] }]
|
|
9644
9887
|
}], propDecorators: { field: [{
|
|
9645
9888
|
type: Input,
|
|
9646
9889
|
args: [{ required: true }]
|