@fuentis/phoenix-ui 0.0.9-alpha.574 → 0.0.9-alpha.577
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.
|
@@ -4524,8 +4524,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4524
4524
|
}] } });
|
|
4525
4525
|
|
|
4526
4526
|
class MetaCalendarComponent extends BaseMetaField {
|
|
4527
|
+
onModelChange(val) {
|
|
4528
|
+
if (!val) {
|
|
4529
|
+
this.onChanged(null);
|
|
4530
|
+
return;
|
|
4531
|
+
}
|
|
4532
|
+
const showTime = !!this.control?.configuration?.showTime;
|
|
4533
|
+
if (!showTime) {
|
|
4534
|
+
const normalized = new Date(val.getFullYear(), val.getMonth(), val.getDate(), 12, 0, 0, 0);
|
|
4535
|
+
this.value = normalized;
|
|
4536
|
+
this.parentForm?.controls?.[this.control.configuration.key]?.setValue(normalized, {
|
|
4537
|
+
emitEvent: false,
|
|
4538
|
+
});
|
|
4539
|
+
this.onChanged(normalized);
|
|
4540
|
+
return;
|
|
4541
|
+
}
|
|
4542
|
+
this.onChanged(val);
|
|
4543
|
+
}
|
|
4527
4544
|
onDateClear() {
|
|
4528
|
-
this.parentForm.controls[this.control.configuration.key].setValue(null);
|
|
4545
|
+
this.parentForm.controls[this.control.configuration.key].setValue(null, { emitEvent: false });
|
|
4546
|
+
this.value = null;
|
|
4529
4547
|
this.onChanged(null);
|
|
4530
4548
|
}
|
|
4531
4549
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaCalendarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -4542,7 +4560,7 @@ class MetaCalendarComponent extends BaseMetaField {
|
|
|
4542
4560
|
<p-datepicker
|
|
4543
4561
|
[attr.data-cy]="'calendar-' + control?.id"
|
|
4544
4562
|
[(ngModel)]="value"
|
|
4545
|
-
(ngModelChange)="
|
|
4563
|
+
(ngModelChange)="onModelChange($event)"
|
|
4546
4564
|
[style]="{ width: '100%' }"
|
|
4547
4565
|
[disabled]="disable"
|
|
4548
4566
|
[readonlyInput]="true"
|
|
@@ -4575,7 +4593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4575
4593
|
<p-datepicker
|
|
4576
4594
|
[attr.data-cy]="'calendar-' + control?.id"
|
|
4577
4595
|
[(ngModel)]="value"
|
|
4578
|
-
(ngModelChange)="
|
|
4596
|
+
(ngModelChange)="onModelChange($event)"
|
|
4579
4597
|
[style]="{ width: '100%' }"
|
|
4580
4598
|
[disabled]="disable"
|
|
4581
4599
|
[readonlyInput]="true"
|
|
@@ -5731,43 +5749,48 @@ class MetaStartDueDateComponent {
|
|
|
5731
5749
|
parentForm;
|
|
5732
5750
|
ctrl;
|
|
5733
5751
|
dr = inject(DestroyRef);
|
|
5734
|
-
startDate;
|
|
5735
|
-
endDate;
|
|
5736
|
-
onChanged;
|
|
5737
|
-
onTouched;
|
|
5738
|
-
constructor() { }
|
|
5752
|
+
startDate = null;
|
|
5753
|
+
endDate = null;
|
|
5754
|
+
onChanged = () => { };
|
|
5755
|
+
onTouched = () => { };
|
|
5739
5756
|
ngOnInit() {
|
|
5740
|
-
this.ctrl = this.parentForm.get(this.control.configuration.key);
|
|
5741
5757
|
this.ctrl = this.parentForm.get(this.control.configuration.key);
|
|
5742
5758
|
if (this.control.mandatory)
|
|
5743
|
-
this.ctrl
|
|
5759
|
+
this.ctrl?.setValidators(this.ctrl?.validator);
|
|
5744
5760
|
this.parentForm
|
|
5745
5761
|
.get(this.control.configuration.key)
|
|
5746
5762
|
?.valueChanges.pipe(takeUntilDestroyed(this.dr))
|
|
5747
|
-
.subscribe((
|
|
5748
|
-
this.validateDates();
|
|
5749
|
-
});
|
|
5763
|
+
.subscribe(() => this.validateDates());
|
|
5750
5764
|
this.validateDates();
|
|
5751
5765
|
}
|
|
5766
|
+
normalizeDateOnly(v) {
|
|
5767
|
+
if (!v)
|
|
5768
|
+
return null;
|
|
5769
|
+
const d = v instanceof Date ? v : new Date(v);
|
|
5770
|
+
if (isNaN(d.getTime()))
|
|
5771
|
+
return null;
|
|
5772
|
+
return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 12, 0, 0, 0);
|
|
5773
|
+
}
|
|
5752
5774
|
writeValue(obj) {
|
|
5753
5775
|
if (obj) {
|
|
5754
|
-
this.startDate = obj.startDate;
|
|
5755
|
-
this.endDate = obj.endDate;
|
|
5776
|
+
this.startDate = this.normalizeDateOnly(obj.startDate);
|
|
5777
|
+
this.endDate = this.normalizeDateOnly(obj.endDate);
|
|
5756
5778
|
}
|
|
5757
5779
|
else {
|
|
5758
5780
|
this.startDate = null;
|
|
5759
5781
|
this.endDate = null;
|
|
5760
5782
|
}
|
|
5783
|
+
this.validateDates();
|
|
5761
5784
|
}
|
|
5762
5785
|
// Handle start date selection
|
|
5763
5786
|
onStartDateSelect(event) {
|
|
5764
|
-
this.startDate = event;
|
|
5787
|
+
this.startDate = this.normalizeDateOnly(event);
|
|
5765
5788
|
this.onChanged({ startDate: this.startDate, endDate: this.endDate });
|
|
5766
5789
|
this.validateDates();
|
|
5767
5790
|
}
|
|
5768
5791
|
// Handle end date selection
|
|
5769
5792
|
onEndDateSelect(event) {
|
|
5770
|
-
this.endDate = event;
|
|
5793
|
+
this.endDate = this.normalizeDateOnly(event);
|
|
5771
5794
|
this.onChanged({ startDate: this.startDate, endDate: this.endDate });
|
|
5772
5795
|
this.validateDates();
|
|
5773
5796
|
}
|
|
@@ -5784,24 +5807,24 @@ class MetaStartDueDateComponent {
|
|
|
5784
5807
|
this.validateDates();
|
|
5785
5808
|
}
|
|
5786
5809
|
validateDates() {
|
|
5787
|
-
|
|
5810
|
+
const c = this.parentForm.get(this.control.configuration.key);
|
|
5811
|
+
if (!c)
|
|
5812
|
+
return;
|
|
5813
|
+
// clear previous errors
|
|
5814
|
+
c.setErrors(null);
|
|
5815
|
+
// Both dates are mandatory
|
|
5788
5816
|
if (this.control.mandatory && (!this.startDate || !this.endDate)) {
|
|
5789
|
-
|
|
5790
|
-
|
|
5791
|
-
?.setErrors({ required: true });
|
|
5792
|
-
}
|
|
5793
|
-
else {
|
|
5794
|
-
this.parentForm.get(this.control.configuration.key)?.setErrors(null);
|
|
5817
|
+
c.setErrors({ required: true });
|
|
5818
|
+
return;
|
|
5795
5819
|
}
|
|
5796
|
-
|
|
5797
|
-
|
|
5798
|
-
this.endDate
|
|
5799
|
-
|
|
5800
|
-
|
|
5801
|
-
|
|
5802
|
-
|
|
5820
|
+
if (this.startDate && this.endDate) {
|
|
5821
|
+
const s = new Date(this.startDate.getFullYear(), this.startDate.getMonth(), this.startDate.getDate(), 12, 0, 0, 0).getTime();
|
|
5822
|
+
const e = new Date(this.endDate.getFullYear(), this.endDate.getMonth(), this.endDate.getDate(), 12, 0, 0, 0).getTime();
|
|
5823
|
+
if (s > e) {
|
|
5824
|
+
c.setErrors({ dueDate: true });
|
|
5825
|
+
return;
|
|
5826
|
+
}
|
|
5803
5827
|
}
|
|
5804
|
-
//TBD: Scenario if only one date is mandatory
|
|
5805
5828
|
}
|
|
5806
5829
|
registerOnChange(fn) {
|
|
5807
5830
|
this.onChanged = fn;
|
|
@@ -5916,7 +5939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
5916
5939
|
multi: true,
|
|
5917
5940
|
},
|
|
5918
5941
|
] }]
|
|
5919
|
-
}],
|
|
5942
|
+
}], propDecorators: { control: [{
|
|
5920
5943
|
type: Input
|
|
5921
5944
|
}], parentForm: [{
|
|
5922
5945
|
type: Input
|
|
@@ -8729,8 +8752,8 @@ class MetaStartDueDateV2Component {
|
|
|
8729
8752
|
* NOTE: "YYYY-MM-DD" strings are parsed as local dates to avoid timezone day-shifts.
|
|
8730
8753
|
*/
|
|
8731
8754
|
writeValue(v) {
|
|
8732
|
-
this.startDate = this.parseToDate(v?.startDate ?? null);
|
|
8733
|
-
this.endDate = this.parseToDate(v?.endDate ?? null);
|
|
8755
|
+
this.startDate = this.normalizeDateOnly(this.parseToDate(v?.startDate ?? null));
|
|
8756
|
+
this.endDate = this.normalizeDateOnly(this.parseToDate(v?.endDate ?? null));
|
|
8734
8757
|
// OnPush: ensure UI reflects external value writes (patchValue/setValue)
|
|
8735
8758
|
this.cdr.markForCheck();
|
|
8736
8759
|
}
|
|
@@ -8770,7 +8793,7 @@ class MetaStartDueDateV2Component {
|
|
|
8770
8793
|
onStartChange(d) {
|
|
8771
8794
|
if (this.disabled)
|
|
8772
8795
|
return;
|
|
8773
|
-
this.startDate = d ?? null;
|
|
8796
|
+
this.startDate = this.normalizeDateOnly(d ?? null);
|
|
8774
8797
|
this.emitChange();
|
|
8775
8798
|
}
|
|
8776
8799
|
/**
|
|
@@ -8780,7 +8803,7 @@ class MetaStartDueDateV2Component {
|
|
|
8780
8803
|
onEndChange(d) {
|
|
8781
8804
|
if (this.disabled)
|
|
8782
8805
|
return;
|
|
8783
|
-
this.endDate = d ?? null;
|
|
8806
|
+
this.endDate = this.normalizeDateOnly(d ?? null);
|
|
8784
8807
|
this.emitChange();
|
|
8785
8808
|
}
|
|
8786
8809
|
/**
|
|
@@ -8819,13 +8842,20 @@ class MetaStartDueDateV2Component {
|
|
|
8819
8842
|
const y = Number(m[1]);
|
|
8820
8843
|
const mo = Number(m[2]) - 1;
|
|
8821
8844
|
const d = Number(m[3]);
|
|
8822
|
-
const local = new Date(y, mo, d);
|
|
8845
|
+
const local = new Date(y, mo, d, 12, 0, 0, 0);
|
|
8823
8846
|
return isNaN(local.getTime()) ? null : local;
|
|
8824
8847
|
}
|
|
8825
8848
|
// ISO / other -> fallback
|
|
8826
8849
|
const dt = new Date(s);
|
|
8827
8850
|
return isNaN(dt.getTime()) ? null : dt;
|
|
8828
8851
|
}
|
|
8852
|
+
normalizeDateOnly(d) {
|
|
8853
|
+
if (!d)
|
|
8854
|
+
return null;
|
|
8855
|
+
if (isNaN(d.getTime()))
|
|
8856
|
+
return null;
|
|
8857
|
+
return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 12, 0, 0, 0);
|
|
8858
|
+
}
|
|
8829
8859
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaStartDueDateV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8830
8860
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: MetaStartDueDateV2Component, isStandalone: true, selector: "phoenix-meta-start-due-date-v2", inputs: { dataCy: "dataCy", disable: "disable" }, providers: [
|
|
8831
8861
|
{
|
|
@@ -9597,8 +9627,31 @@ class MetaFormFieldV2Component {
|
|
|
9597
9627
|
isCheckbox() {
|
|
9598
9628
|
return this.type === this.MetaFieldType.CHECKBOX;
|
|
9599
9629
|
}
|
|
9630
|
+
onDateSelected(val) {
|
|
9631
|
+
const ctrl = this.ctrl();
|
|
9632
|
+
if (!ctrl)
|
|
9633
|
+
return;
|
|
9634
|
+
const d = val instanceof Date ? val : (val ? new Date(val) : null);
|
|
9635
|
+
if (!d || isNaN(d.getTime()))
|
|
9636
|
+
return;
|
|
9637
|
+
const normalized = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 12, 0, 0, 0);
|
|
9638
|
+
// set without re-triggering loops
|
|
9639
|
+
ctrl.setValue(normalized, { emitEvent: false });
|
|
9640
|
+
ctrl.markAsDirty();
|
|
9641
|
+
ctrl.markAsTouched();
|
|
9642
|
+
this.cdr.markForCheck();
|
|
9643
|
+
}
|
|
9644
|
+
onDateCleared() {
|
|
9645
|
+
const ctrl = this.ctrl();
|
|
9646
|
+
if (!ctrl)
|
|
9647
|
+
return;
|
|
9648
|
+
ctrl.setValue(null, { emitEvent: false });
|
|
9649
|
+
ctrl.markAsDirty();
|
|
9650
|
+
ctrl.markAsTouched();
|
|
9651
|
+
this.cdr.markForCheck();
|
|
9652
|
+
}
|
|
9600
9653
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaFormFieldV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9601
|
-
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\n class=\"meta-field flex gap-2\"\n [class.flex-column]=\"!isCheckbox()\"\n [class.align-items-center]=\"isCheckbox()\"\n [style.order]=\"field.order ?? null\"\n [attr.data-cy]=\"'meta-field-' + key\"\n >\n\n @if (userFriendlyMessage() && !isCheckbox()) {\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 @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.URL) {\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
|
|
9654
|
+
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\n class=\"meta-field flex gap-2\"\n [class.flex-column]=\"!isCheckbox()\"\n [class.align-items-center]=\"isCheckbox()\"\n [style.order]=\"field.order ?? null\"\n [attr.data-cy]=\"'meta-field-' + key\"\n >\n\n @if (userFriendlyMessage() && !isCheckbox()) {\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 @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.URL) {\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\n [inputId]=\"key\"\n [formControlName]=\"key\"\n [showIcon]=\"true\"\n [readonlyInput]=\"true\"\n [showButtonBar]=\"true\"\n appendTo=\"body\"\n (onSelect)=\"onDateSelected($event)\"\n (onClearClick)=\"onDateCleared()\"\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 <p-checkbox\n [inputId]=\"key\"\n [binary]=\"true\"\n [formControlName]=\"key\"\n [disabled]=\"isDisabled()\"\n ></p-checkbox>\n\n <label class=\"meta-inline-label\" [attr.for]=\"key\">\n {{ (userFriendlyMessage() ?? placeholderKey() ?? '') | translate }}\n @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n </label>\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 @if (field.configuration.extra?.['dividerAfter']) {\n <div\n class=\"meta-divider\"\n [style.margin]=\"field.configuration.extra?.['dividerMargin'] ?? '12px 0'\"\n ></div>\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;margin:0;cursor:pointer}.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}.meta-divider{width:100%;height:1px;background:#0000001f}:host-context(.dark-theme) .meta-divider{background:#ffffff26}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type:
|
|
9602
9655
|
// PrimeNG 20 base inputs
|
|
9603
9656
|
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$3.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: i5$2.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$6.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:
|
|
9604
9657
|
// Advanced / custom Phoenix fields
|
|
@@ -9639,7 +9692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
9639
9692
|
MetaUploadComponentDragDrop,
|
|
9640
9693
|
// Read-only renderer used when page or field is in read-only mode
|
|
9641
9694
|
ReadOnlyInputV2Component,
|
|
9642
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"form\">\n @if (!field.hidden) {\n <div\n class=\"meta-field flex gap-2\"\n [class.flex-column]=\"!isCheckbox()\"\n [class.align-items-center]=\"isCheckbox()\"\n [style.order]=\"field.order ?? null\"\n [attr.data-cy]=\"'meta-field-' + key\"\n >\n\n @if (userFriendlyMessage() && !isCheckbox()) {\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 @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.URL) {\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
|
|
9695
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"form\">\n @if (!field.hidden) {\n <div\n class=\"meta-field flex gap-2\"\n [class.flex-column]=\"!isCheckbox()\"\n [class.align-items-center]=\"isCheckbox()\"\n [style.order]=\"field.order ?? null\"\n [attr.data-cy]=\"'meta-field-' + key\"\n >\n\n @if (userFriendlyMessage() && !isCheckbox()) {\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 @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.URL) {\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\n [inputId]=\"key\"\n [formControlName]=\"key\"\n [showIcon]=\"true\"\n [readonlyInput]=\"true\"\n [showButtonBar]=\"true\"\n appendTo=\"body\"\n (onSelect)=\"onDateSelected($event)\"\n (onClearClick)=\"onDateCleared()\"\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 <p-checkbox\n [inputId]=\"key\"\n [binary]=\"true\"\n [formControlName]=\"key\"\n [disabled]=\"isDisabled()\"\n ></p-checkbox>\n\n <label class=\"meta-inline-label\" [attr.for]=\"key\">\n {{ (userFriendlyMessage() ?? placeholderKey() ?? '') | translate }}\n @if (field.mandatory) { <span class=\"meta-required\">*</span> }\n </label>\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 @if (field.configuration.extra?.['dividerAfter']) {\n <div\n class=\"meta-divider\"\n [style.margin]=\"field.configuration.extra?.['dividerMargin'] ?? '12px 0'\"\n ></div>\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;margin:0;cursor:pointer}.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}.meta-divider{width:100%;height:1px;background:#0000001f}:host-context(.dark-theme) .meta-divider{background:#ffffff26}\n"] }]
|
|
9643
9696
|
}], propDecorators: { field: [{
|
|
9644
9697
|
type: Input,
|
|
9645
9698
|
args: [{ required: true }]
|