@fuentis/phoenix-ui 0.0.9-alpha.397 → 0.0.9-alpha.398
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.
|
@@ -80,7 +80,6 @@ import { FloatLabelModule } from 'primeng/floatlabel';
|
|
|
80
80
|
import jsPDF from 'jspdf';
|
|
81
81
|
import autoTable from 'jspdf-autotable';
|
|
82
82
|
import * as XLSX from 'xlsx';
|
|
83
|
-
import * as i1$4 from 'primeng/calendar';
|
|
84
83
|
import { CalendarModule } from 'primeng/calendar';
|
|
85
84
|
import * as i3$7 from 'primeng/dropdown';
|
|
86
85
|
import { DropdownModule } from 'primeng/dropdown';
|
|
@@ -104,7 +103,7 @@ import * as i3$9 from 'primeng/textarea';
|
|
|
104
103
|
import { TextareaModule } from 'primeng/textarea';
|
|
105
104
|
import * as i3$a from 'primeng/fileupload';
|
|
106
105
|
import { FileUploadModule } from 'primeng/fileupload';
|
|
107
|
-
import * as i1$
|
|
106
|
+
import * as i1$4 from '@angular/platform-browser';
|
|
108
107
|
import { MessagesModule } from 'primeng/messages';
|
|
109
108
|
|
|
110
109
|
class InnerHeaderComponent {
|
|
@@ -5532,6 +5531,7 @@ class MetaStartDueDateComponent {
|
|
|
5532
5531
|
control;
|
|
5533
5532
|
parentForm;
|
|
5534
5533
|
ctrl;
|
|
5534
|
+
dr = inject(DestroyRef);
|
|
5535
5535
|
startDate;
|
|
5536
5536
|
endDate;
|
|
5537
5537
|
onChanged;
|
|
@@ -5544,7 +5544,8 @@ class MetaStartDueDateComponent {
|
|
|
5544
5544
|
this.ctrl.setValidators(this.ctrl.validator);
|
|
5545
5545
|
this.parentForm
|
|
5546
5546
|
.get(this.control.configuration.key)
|
|
5547
|
-
?.valueChanges.
|
|
5547
|
+
?.valueChanges.pipe(takeUntilDestroyed(this.dr))
|
|
5548
|
+
.subscribe((r) => {
|
|
5548
5549
|
this.validateDates();
|
|
5549
5550
|
});
|
|
5550
5551
|
this.validateDates();
|
|
@@ -5621,7 +5622,7 @@ class MetaStartDueDateComponent {
|
|
|
5621
5622
|
<phoenix-meta-label [control]="control"></phoenix-meta-label>
|
|
5622
5623
|
<div class="flex">
|
|
5623
5624
|
<div class="flex-grow-1">
|
|
5624
|
-
<p-
|
|
5625
|
+
<p-datepicker
|
|
5625
5626
|
[attr.data-cy]="'start-date-' + control?.id"
|
|
5626
5627
|
(onSelect)="onStartDateSelect($event)"
|
|
5627
5628
|
(onClearClick)="onStartDateClear()"
|
|
@@ -5632,7 +5633,7 @@ class MetaStartDueDateComponent {
|
|
|
5632
5633
|
[showIcon]="true"
|
|
5633
5634
|
[placeholder]="'LABELS.PLANNED_START' | translate"
|
|
5634
5635
|
appendTo="body"
|
|
5635
|
-
></p-
|
|
5636
|
+
></p-datepicker>
|
|
5636
5637
|
</div>
|
|
5637
5638
|
<div class=" flex align-items-center p-2 ">
|
|
5638
5639
|
<i
|
|
@@ -5641,7 +5642,7 @@ class MetaStartDueDateComponent {
|
|
|
5641
5642
|
></i>
|
|
5642
5643
|
</div>
|
|
5643
5644
|
<div class="flex-grow-1">
|
|
5644
|
-
<p-
|
|
5645
|
+
<p-datepicker
|
|
5645
5646
|
[attr.data-cy]="'due-date-' + control?.id"
|
|
5646
5647
|
(onSelect)="onEndDateSelect($event)"
|
|
5647
5648
|
(onClearClick)="onEndDateClear()"
|
|
@@ -5652,18 +5653,17 @@ class MetaStartDueDateComponent {
|
|
|
5652
5653
|
[showIcon]="true"
|
|
5653
5654
|
[placeholder]="'LABELS.PLANNED_END' | translate"
|
|
5654
5655
|
appendTo="body"
|
|
5655
|
-
></p-
|
|
5656
|
+
></p-datepicker>
|
|
5656
5657
|
</div>
|
|
5657
5658
|
</div>
|
|
5658
5659
|
<phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
|
|
5659
5660
|
</div>
|
|
5660
|
-
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type:
|
|
5661
|
+
`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$5.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: InlineFieldError, selector: "phoenix-inline-field-error", inputs: ["ctrl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
|
|
5661
5662
|
}
|
|
5662
5663
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MetaStartDueDateComponent, decorators: [{
|
|
5663
5664
|
type: Component,
|
|
5664
5665
|
args: [{ selector: 'phoenix-meta-start-due-date', standalone: true, imports: [
|
|
5665
|
-
|
|
5666
|
-
CalendarModule,
|
|
5666
|
+
DatePickerModule,
|
|
5667
5667
|
InlineFieldError,
|
|
5668
5668
|
ReactiveFormsModule,
|
|
5669
5669
|
FormsModule,
|
|
@@ -5674,7 +5674,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
5674
5674
|
<phoenix-meta-label [control]="control"></phoenix-meta-label>
|
|
5675
5675
|
<div class="flex">
|
|
5676
5676
|
<div class="flex-grow-1">
|
|
5677
|
-
<p-
|
|
5677
|
+
<p-datepicker
|
|
5678
5678
|
[attr.data-cy]="'start-date-' + control?.id"
|
|
5679
5679
|
(onSelect)="onStartDateSelect($event)"
|
|
5680
5680
|
(onClearClick)="onStartDateClear()"
|
|
@@ -5685,7 +5685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
5685
5685
|
[showIcon]="true"
|
|
5686
5686
|
[placeholder]="'LABELS.PLANNED_START' | translate"
|
|
5687
5687
|
appendTo="body"
|
|
5688
|
-
></p-
|
|
5688
|
+
></p-datepicker>
|
|
5689
5689
|
</div>
|
|
5690
5690
|
<div class=" flex align-items-center p-2 ">
|
|
5691
5691
|
<i
|
|
@@ -5694,7 +5694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
5694
5694
|
></i>
|
|
5695
5695
|
</div>
|
|
5696
5696
|
<div class="flex-grow-1">
|
|
5697
|
-
<p-
|
|
5697
|
+
<p-datepicker
|
|
5698
5698
|
[attr.data-cy]="'due-date-' + control?.id"
|
|
5699
5699
|
(onSelect)="onEndDateSelect($event)"
|
|
5700
5700
|
(onClearClick)="onEndDateClear()"
|
|
@@ -5705,7 +5705,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
5705
5705
|
[showIcon]="true"
|
|
5706
5706
|
[placeholder]="'LABELS.PLANNED_END' | translate"
|
|
5707
5707
|
appendTo="body"
|
|
5708
|
-
></p-
|
|
5708
|
+
></p-datepicker>
|
|
5709
5709
|
</div>
|
|
5710
5710
|
</div>
|
|
5711
5711
|
<phoenix-inline-field-error [ctrl]="ctrl"></phoenix-inline-field-error>
|
|
@@ -6445,7 +6445,7 @@ class ReadOnlyInputComponent {
|
|
|
6445
6445
|
break;
|
|
6446
6446
|
}
|
|
6447
6447
|
}
|
|
6448
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ReadOnlyInputComponent, deps: [{ token: i1$
|
|
6448
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ReadOnlyInputComponent, deps: [{ token: i1$4.DomSanitizer }, { token: i2$1.TranslateService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6449
6449
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ReadOnlyInputComponent, isStandalone: true, selector: "phoenix-read-only-input", inputs: { control: "control", metaform: "metaform" }, ngImport: i0, template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n<ng-container [ngSwitch]=\"control.configuration.type\">\n <ng-container *ngSwitchCase=\"ctrlType.TEXT_EDITOR\">\n <p-editor\n [attr.data-cy]=\"'editor-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n [readonly]=\"true\"\n [(ngModel)]=\"value\"\n ></p-editor>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.TEXT_AREA\">\n <div\n class=\"w-full mt-3 mb-2 font-semibold text-500 whitespace-pre-line\"\n [attr.data-cy]=\"'textarea-' + control?.id\"\n [hidden]=\"control?.hidden\"\n >\n {{ value }}\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"ctrlType.SWITCH\">\n <p-inputSwitch\n [attr.data-cy]=\"'switch-' + control?.id\"\n *ngIf=\"value?.isBoolean; else fallBack\"\n styleClass=\"mt-2 ml-1 mr-1\"\n [disabled]=\"true\"\n [(ngModel)]=\"value.res\"\n ></p-inputSwitch>\n </ng-container>\n <ng-container *ngSwitchCase=\"ctrlType.DATE\">\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | date }}\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.CHECKBOX\">\n <p-checkbox\n [attr.data-cy]=\"'checkbox-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n styleClass=\"mt-3\"\n [(ngModel)]=\"value\"\n [binary]=\"true\"\n inputId=\"binary\"\n [disabled]=\"true\"\n ></p-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.LINKS_DATA\">\n <div\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n [attr.data-cy]=\"'link-' + control?.id\"\n >\n <ng-container *ngFor=\"let item of value\">\n <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"ctrlType.ASSIGN\">\n <div\n *ngIf=\"value?.name; else fallBack\"\n [attr.data-cy]=\"'number-' + control?.id\"\n >\n <div>\n <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n <div class=\"person-wrap\">\n <div class=\"person-avatar\">\n {{ value?.name?.toUpperCase().charAt(0) }}\n </div>\n <div>\n <p\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n >\n {{ value?.name }}\n </p>\n <p\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n >\n {{ value?.function }}\n </p>\n </div>\n </div></p-button\n >\n <p-overlayPanel #op>\n <div>\n <span class=\"block mb-2\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n {{ value.email ?? \" --\" }}\n </span>\n <p>\n <i class=\"pi pi-phone mr-1 text-500\"></i\n >{{ value.phone ?? \" --\" }}\n </p>\n </div></p-overlayPanel\n >\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.PASSWORD\">\n <div\n [attr.data-cy]=\"'password-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n <p-password\n class=\"ng-invalid ng-dirty\"\n [disabled]=\"true\"\n [(ngModel)]=\"value\"\n [feedback]=\"false\"\n ></p-password>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION_OBJECT_BASED\">\n <div\n [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value.value }}\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.MS_OPTION\">\n <div\n [attr.data-cy]=\"'MS-OPTION-OBJECT-BASED-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2 white-space-nowrap overflow-hidden\"\n >\n {{ value }}\n </div>\n </ng-container>\n\n <!-- Remove this if necessary - spaces-overview GENERAL form contol -->\n <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION\">\n <!-- Flag mode -->\n <ng-container *ngIf=\"control?.configuration?.flagMode; else ssOptionLegacy\">\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2 flex align-items-center gap-2\"\n >\n <img\n *ngIf=\"value?.key\"\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + value.key.toLowerCase()\"\n style=\"width:22px\"\n alt=\"\"\n />\n <span>{{ value.userFriendlyMessage }}</span>\n </div>\n </ng-container>\n\n <!-- Legacy -->\n <ng-template #ssOptionLegacy>\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | translate }}\n </div>\n </ng-template>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.NUMBER\">\n <div\n [attr.data-cy]=\"'number-' + control?.id\"\n *ngIf=\"value != null; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }}\n </div>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <div\n [attr.data-cy]=\"'test-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | stripHtml }}\n </div>\n </ng-container>\n</ng-container>\n\n<ng-template #fallBack>\n <div\n [attr.data-cy]=\"'test-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n --\n </div>\n</ng-template>\n", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .p-editor-toolbar{display:none!important}:host ::ng-deep .p-editor-container{background:transparent!important;border:0px!important}:host ::ng-deep .p-editor-content.ql-snow{border:0px!important}:host ::ng-deep .p-editor-container .p-editor-content .ql-editor{background:transparent!important}:host ::ng-deep .ql-editor{padding:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "component", type: i3$8.InputSwitch, selector: "p-inputSwitch, p-inputswitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type:
|
|
6450
6450
|
// SerachCardComponent,
|
|
6451
6451
|
CheckboxModule }, { kind: "component", type: i5$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PasswordModule }, { kind: "component", type: i3$6.Password, selector: "p-password", inputs: ["ariaLabel", "fluid", "ariaLabelledBy", "label", "disabled", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "appendTo", "toggleMask", "size", "inputStyleClass", "styleClass", "style", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "variant", "tabindex"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i2$6.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i9$2.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: StripHtmlPipe, name: "stripHtml" }] });
|
|
@@ -6468,7 +6468,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
6468
6468
|
ButtonModule,
|
|
6469
6469
|
StripHtmlPipe,
|
|
6470
6470
|
], template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n<ng-container [ngSwitch]=\"control.configuration.type\">\n <ng-container *ngSwitchCase=\"ctrlType.TEXT_EDITOR\">\n <p-editor\n [attr.data-cy]=\"'editor-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n [readonly]=\"true\"\n [(ngModel)]=\"value\"\n ></p-editor>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.TEXT_AREA\">\n <div\n class=\"w-full mt-3 mb-2 font-semibold text-500 whitespace-pre-line\"\n [attr.data-cy]=\"'textarea-' + control?.id\"\n [hidden]=\"control?.hidden\"\n >\n {{ value }}\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"ctrlType.SWITCH\">\n <p-inputSwitch\n [attr.data-cy]=\"'switch-' + control?.id\"\n *ngIf=\"value?.isBoolean; else fallBack\"\n styleClass=\"mt-2 ml-1 mr-1\"\n [disabled]=\"true\"\n [(ngModel)]=\"value.res\"\n ></p-inputSwitch>\n </ng-container>\n <ng-container *ngSwitchCase=\"ctrlType.DATE\">\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | date }}\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.CHECKBOX\">\n <p-checkbox\n [attr.data-cy]=\"'checkbox-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n styleClass=\"mt-3\"\n [(ngModel)]=\"value\"\n [binary]=\"true\"\n inputId=\"binary\"\n [disabled]=\"true\"\n ></p-checkbox>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.LINKS_DATA\">\n <div\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n [attr.data-cy]=\"'link-' + control?.id\"\n >\n <ng-container *ngFor=\"let item of value\">\n <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngSwitchCase=\"ctrlType.ASSIGN\">\n <div\n *ngIf=\"value?.name; else fallBack\"\n [attr.data-cy]=\"'number-' + control?.id\"\n >\n <div>\n <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n <div class=\"person-wrap\">\n <div class=\"person-avatar\">\n {{ value?.name?.toUpperCase().charAt(0) }}\n </div>\n <div>\n <p\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n >\n {{ value?.name }}\n </p>\n <p\n class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n >\n {{ value?.function }}\n </p>\n </div>\n </div></p-button\n >\n <p-overlayPanel #op>\n <div>\n <span class=\"block mb-2\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n {{ value.email ?? \" --\" }}\n </span>\n <p>\n <i class=\"pi pi-phone mr-1 text-500\"></i\n >{{ value.phone ?? \" --\" }}\n </p>\n </div></p-overlayPanel\n >\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.PASSWORD\">\n <div\n [attr.data-cy]=\"'password-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n <p-password\n class=\"ng-invalid ng-dirty\"\n [disabled]=\"true\"\n [(ngModel)]=\"value\"\n [feedback]=\"false\"\n ></p-password>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION_OBJECT_BASED\">\n <div\n [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value.value }}\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.MS_OPTION\">\n <div\n [attr.data-cy]=\"'MS-OPTION-OBJECT-BASED-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2 white-space-nowrap overflow-hidden\"\n >\n {{ value }}\n </div>\n </ng-container>\n\n <!-- Remove this if necessary - spaces-overview GENERAL form contol -->\n <ng-container *ngSwitchCase=\"ctrlType.SS_OPTION\">\n <!-- Flag mode -->\n <ng-container *ngIf=\"control?.configuration?.flagMode; else ssOptionLegacy\">\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2 flex align-items-center gap-2\"\n >\n <img\n *ngIf=\"value?.key\"\n src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n [class]=\"'flag flag-' + value.key.toLowerCase()\"\n style=\"width:22px\"\n alt=\"\"\n />\n <span>{{ value.userFriendlyMessage }}</span>\n </div>\n </ng-container>\n\n <!-- Legacy -->\n <ng-template #ssOptionLegacy>\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | translate }}\n </div>\n </ng-template>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ctrlType.NUMBER\">\n <div\n [attr.data-cy]=\"'number-' + control?.id\"\n *ngIf=\"value != null; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }}\n </div>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <div\n [attr.data-cy]=\"'test-' + control?.id\"\n *ngIf=\"value; else fallBack\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | stripHtml }}\n </div>\n </ng-container>\n</ng-container>\n\n<ng-template #fallBack>\n <div\n [attr.data-cy]=\"'test-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n --\n </div>\n</ng-template>\n", styles: [".person-wrap{display:flex;align-items:center;margin-left:-6px}.person-wrap p{margin:0}.person-wrap .person-avatar{display:flex;justify-content:center;align-items:center;width:28px;height:28px;min-width:28px;min-height:28px;margin-right:5px;background-color:#e94260;color:#fff;border-radius:50%;font-size:1rem}.person-wrap .person-name :first-child{font-size:1rem}.person-details{border-top:1px solid #e0e0e0;padding:5px;margin-left:-6px;width:150px}.person-details p{margin:0;display:flex;align-items:center}.person-details i{color:#d75063;padding-right:5px}.person-details .p-editor-container{padding-left:0!important}:host ::ng-deep .p-password .p-password-input{border:none!important}:host ::ng-deep .p-editor-toolbar{display:none!important}:host ::ng-deep .p-editor-container{background:transparent!important;border:0px!important}:host ::ng-deep .p-editor-content.ql-snow{border:0px!important}:host ::ng-deep .p-editor-container .p-editor-content .ql-editor{background:transparent!important}:host ::ng-deep .ql-editor{padding:0;height:100%}\n"] }]
|
|
6471
|
-
}], ctorParameters: () => [{ type: i1$
|
|
6471
|
+
}], ctorParameters: () => [{ type: i1$4.DomSanitizer }, { type: i2$1.TranslateService }, { type: i0.DestroyRef }], propDecorators: { control: [{
|
|
6472
6472
|
type: Input
|
|
6473
6473
|
}], metaform: [{
|
|
6474
6474
|
type: Input
|