@fuentis/phoenix-ui 0.0.9-alpha.619 → 0.0.9-alpha.620
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.
|
@@ -7169,7 +7169,7 @@ class ReadOnlyInputComponent {
|
|
|
7169
7169
|
return textarea.value;
|
|
7170
7170
|
}
|
|
7171
7171
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ReadOnlyInputComponent, deps: [{ token: i1$4.DomSanitizer }, { token: i3$1.TranslateService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7172
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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@switch (control.configuration.type) {\n @case (ctrlType.TEXT_EDITOR) {\n @if (value) {\n <div\n [attr.data-cy]=\"'editor-' + control?.id\"\n class=\"read-only-editor-content\"\n [innerHTML]=\"value\"\n ></div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (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 [innerText]=\"value\"\n ></div>\n }\n\n @case (ctrlType.SWITCH) {\n @if (value?.isBoolean) {\n <p-toggleSwitch\n [attr.data-cy]=\"'switch-' + control?.id\"\n styleClass=\"mt-2 ml-1 mr-1\"\n [disabled]=\"true\"\n [(ngModel)]=\"value.res\"\n ></p-toggleSwitch>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.DATE) {\n @if (value) {\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | date }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.START_DUE_DATE) {\n @if (value?.startDate) {\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n class=\"flex font-semibold text-500 mt-3 mb-2\"\n >\n <span style=\"padding-top: 3px\">{{ value.startDate | date }}</span>\n <div class=\"flex align-items-center p-2\">\n <i class=\"pi pi-arrow-right text-sm\" style=\"color: 'var(--surface-600)'\"></i>\n </div>\n <span style=\"padding-top: 3px\">{{ value.endDate | date }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.CHECKBOX) {\n @if (value) {\n <p-checkbox\n [attr.data-cy]=\"'checkbox-' + control?.id\"\n styleClass=\"mt-3\"\n [(ngModel)]=\"value\"\n [binary]=\"true\"\n inputId=\"binary\"\n [disabled]=\"true\"\n ></p-checkbox>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.LINKS_DATA) {\n @if (value) {\n <div\n class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n [attr.data-cy]=\"'link-' + control?.id\"\n >\n @for (item of value; track item) {\n <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.ASSIGN) {\n @if (value?.name) {\n <div [attr.data-cy]=\"'number-' + control?.id\">\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 class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ value?.name }}\n </p>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ value?.function }}\n </p>\n </div>\n </div>\n </p-button>\n\n <p-popover #op [dismissable]=\"true\">\n <div>\n <span class=\"block mb-2\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n {{ value.email ?? ' --' }}\n </span>\n <p>\n <i class=\"pi pi-phone mr-1 text-500\"></i>{{ value.phone ?? ' --' }}\n </p>\n </div>\n </p-popover>\n </div>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.CURRENCY) {\n @if (value) {\n <div\n [attr.data-cy]=\"'currency-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }} €\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.PASSWORD) {\n @if (value) {\n <div\n [attr.data-cy]=\"'password-' + control?.id\"\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 } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.SS_OPTION_OBJECT_BASED) {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value.value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.MS_OPTION) {\n @if (value) {\n <div\n [attr.data-cy]=\"'MS-OPTION-OBJECT-BASED-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2 white-space-nowrap overflow-hidden\"\n >\n {{ value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.SS_OPTION) {\n @if (control?.configuration?.flagMode) {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2 flex align-items-center gap-2\"\n >\n @if (value?.key) {\n <img\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 }\n <span>{{ value.userFriendlyMessage }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n } @else {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | translate }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n }\n\n @case (ctrlType.NUMBER) {\n @if (value != null) {\n <div\n [attr.data-cy]=\"'number-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @default {\n @if (value) {\n <div\n [attr.data-cy]=\"'test-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | stripHtml }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n}\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>", 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 .read-only-editor-content{margin-top:.75rem;margin-bottom:.5rem;font-weight:600;color:var(--text-color-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$7.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { 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: PasswordModule }, { kind: "component", type: i2$8.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"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: StripHtmlPipe, name: "stripHtml" }] });
|
|
7172
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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@switch (control.configuration.type) {\n @case (ctrlType.TEXT_EDITOR) {\n @if (value) {\n <div\n [attr.data-cy]=\"'editor-' + control?.id\"\n class=\"read-only-editor-content\"\n [innerHTML]=\"value\"\n ></div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.TEXT_AREA) {\n <div\n class=\"w-full mt-3 mb-2 font-semibold text-500 whitespace-pre-line overflow-x-auto\"\n [attr.data-cy]=\"'textarea-' + control?.id\"\n [hidden]=\"control?.hidden\"\n [innerText]=\"value\"\n ></div>\n }\n\n @case (ctrlType.SWITCH) {\n @if (value?.isBoolean) {\n <p-toggleSwitch\n [attr.data-cy]=\"'switch-' + control?.id\"\n styleClass=\"mt-2 ml-1 mr-1\"\n [disabled]=\"true\"\n [(ngModel)]=\"value.res\"\n ></p-toggleSwitch>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.DATE) {\n @if (value) {\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | date }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.START_DUE_DATE) {\n @if (value?.startDate) {\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n class=\"flex font-semibold text-500 mt-3 mb-2\"\n >\n <span style=\"padding-top: 3px\">{{ value.startDate | date }}</span>\n <div class=\"flex align-items-center p-2\">\n <i class=\"pi pi-arrow-right text-sm\" style=\"color: 'var(--surface-600)'\"></i>\n </div>\n <span style=\"padding-top: 3px\">{{ value.endDate | date }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.CHECKBOX) {\n @if (value) {\n <p-checkbox\n [attr.data-cy]=\"'checkbox-' + control?.id\"\n styleClass=\"mt-3\"\n [(ngModel)]=\"value\"\n [binary]=\"true\"\n inputId=\"binary\"\n [disabled]=\"true\"\n ></p-checkbox>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.LINKS_DATA) {\n @if (value) {\n <div\n class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n [attr.data-cy]=\"'link-' + control?.id\"\n >\n @for (item of value; track item) {\n <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.ASSIGN) {\n @if (value?.name) {\n <div [attr.data-cy]=\"'number-' + control?.id\">\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 class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ value?.name }}\n </p>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ value?.function }}\n </p>\n </div>\n </div>\n </p-button>\n\n <p-popover #op [dismissable]=\"true\">\n <div>\n <span class=\"block mb-2\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n {{ value.email ?? ' --' }}\n </span>\n <p>\n <i class=\"pi pi-phone mr-1 text-500\"></i>{{ value.phone ?? ' --' }}\n </p>\n </div>\n </p-popover>\n </div>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.CURRENCY) {\n @if (value) {\n <div\n [attr.data-cy]=\"'currency-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }} €\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.PASSWORD) {\n @if (value) {\n <div\n [attr.data-cy]=\"'password-' + control?.id\"\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 } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.SS_OPTION_OBJECT_BASED) {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value.value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.MS_OPTION) {\n @if (value) {\n <div\n [attr.data-cy]=\"'MS-OPTION-OBJECT-BASED-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2 white-space-nowrap overflow-hidden\"\n >\n {{ value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.SS_OPTION) {\n @if (control?.configuration?.flagMode) {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2 flex align-items-center gap-2\"\n >\n @if (value?.key) {\n <img\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 }\n <span>{{ value.userFriendlyMessage }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n } @else {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | translate }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n }\n\n @case (ctrlType.NUMBER) {\n @if (value != null) {\n <div\n [attr.data-cy]=\"'number-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @default {\n @if (value) {\n <div\n [attr.data-cy]=\"'test-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2 white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n >\n {{ value | stripHtml }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n}\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>", 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 .read-only-editor-content{margin-top:.75rem;margin-bottom:.5rem;font-weight:600;color:var(--text-color-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MetaLabelComponent, selector: "phoenix-meta-label", inputs: ["control"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$7.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { 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: PasswordModule }, { kind: "component", type: i2$8.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"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: StripHtmlPipe, name: "stripHtml" }] });
|
|
7173
7173
|
}
|
|
7174
7174
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ReadOnlyInputComponent, decorators: [{
|
|
7175
7175
|
type: Component,
|
|
@@ -7186,7 +7186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
7186
7186
|
PanelModule,
|
|
7187
7187
|
ButtonModule,
|
|
7188
7188
|
StripHtmlPipe,
|
|
7189
|
-
], template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n@switch (control.configuration.type) {\n @case (ctrlType.TEXT_EDITOR) {\n @if (value) {\n <div\n [attr.data-cy]=\"'editor-' + control?.id\"\n class=\"read-only-editor-content\"\n [innerHTML]=\"value\"\n ></div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (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 [innerText]=\"value\"\n ></div>\n }\n\n @case (ctrlType.SWITCH) {\n @if (value?.isBoolean) {\n <p-toggleSwitch\n [attr.data-cy]=\"'switch-' + control?.id\"\n styleClass=\"mt-2 ml-1 mr-1\"\n [disabled]=\"true\"\n [(ngModel)]=\"value.res\"\n ></p-toggleSwitch>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.DATE) {\n @if (value) {\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | date }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.START_DUE_DATE) {\n @if (value?.startDate) {\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n class=\"flex font-semibold text-500 mt-3 mb-2\"\n >\n <span style=\"padding-top: 3px\">{{ value.startDate | date }}</span>\n <div class=\"flex align-items-center p-2\">\n <i class=\"pi pi-arrow-right text-sm\" style=\"color: 'var(--surface-600)'\"></i>\n </div>\n <span style=\"padding-top: 3px\">{{ value.endDate | date }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.CHECKBOX) {\n @if (value) {\n <p-checkbox\n [attr.data-cy]=\"'checkbox-' + control?.id\"\n styleClass=\"mt-3\"\n [(ngModel)]=\"value\"\n [binary]=\"true\"\n inputId=\"binary\"\n [disabled]=\"true\"\n ></p-checkbox>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.LINKS_DATA) {\n @if (value) {\n <div\n class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n [attr.data-cy]=\"'link-' + control?.id\"\n >\n @for (item of value; track item) {\n <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.ASSIGN) {\n @if (value?.name) {\n <div [attr.data-cy]=\"'number-' + control?.id\">\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 class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ value?.name }}\n </p>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ value?.function }}\n </p>\n </div>\n </div>\n </p-button>\n\n <p-popover #op [dismissable]=\"true\">\n <div>\n <span class=\"block mb-2\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n {{ value.email ?? ' --' }}\n </span>\n <p>\n <i class=\"pi pi-phone mr-1 text-500\"></i>{{ value.phone ?? ' --' }}\n </p>\n </div>\n </p-popover>\n </div>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.CURRENCY) {\n @if (value) {\n <div\n [attr.data-cy]=\"'currency-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }} €\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.PASSWORD) {\n @if (value) {\n <div\n [attr.data-cy]=\"'password-' + control?.id\"\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 } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.SS_OPTION_OBJECT_BASED) {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value.value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.MS_OPTION) {\n @if (value) {\n <div\n [attr.data-cy]=\"'MS-OPTION-OBJECT-BASED-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2 white-space-nowrap overflow-hidden\"\n >\n {{ value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.SS_OPTION) {\n @if (control?.configuration?.flagMode) {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2 flex align-items-center gap-2\"\n >\n @if (value?.key) {\n <img\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 }\n <span>{{ value.userFriendlyMessage }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n } @else {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | translate }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n }\n\n @case (ctrlType.NUMBER) {\n @if (value != null) {\n <div\n [attr.data-cy]=\"'number-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @default {\n @if (value) {\n <div\n [attr.data-cy]=\"'test-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | stripHtml }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n}\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>", 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 .read-only-editor-content{margin-top:.75rem;margin-bottom:.5rem;font-weight:600;color:var(--text-color-secondary)}\n"] }]
|
|
7189
|
+
], template: "<phoenix-meta-label [control]=\"control\"></phoenix-meta-label>\n\n@switch (control.configuration.type) {\n @case (ctrlType.TEXT_EDITOR) {\n @if (value) {\n <div\n [attr.data-cy]=\"'editor-' + control?.id\"\n class=\"read-only-editor-content\"\n [innerHTML]=\"value\"\n ></div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.TEXT_AREA) {\n <div\n class=\"w-full mt-3 mb-2 font-semibold text-500 whitespace-pre-line overflow-x-auto\"\n [attr.data-cy]=\"'textarea-' + control?.id\"\n [hidden]=\"control?.hidden\"\n [innerText]=\"value\"\n ></div>\n }\n\n @case (ctrlType.SWITCH) {\n @if (value?.isBoolean) {\n <p-toggleSwitch\n [attr.data-cy]=\"'switch-' + control?.id\"\n styleClass=\"mt-2 ml-1 mr-1\"\n [disabled]=\"true\"\n [(ngModel)]=\"value.res\"\n ></p-toggleSwitch>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.DATE) {\n @if (value) {\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | date }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.START_DUE_DATE) {\n @if (value?.startDate) {\n <div\n [attr.data-cy]=\"'date-' + control?.id\"\n class=\"flex font-semibold text-500 mt-3 mb-2\"\n >\n <span style=\"padding-top: 3px\">{{ value.startDate | date }}</span>\n <div class=\"flex align-items-center p-2\">\n <i class=\"pi pi-arrow-right text-sm\" style=\"color: 'var(--surface-600)'\"></i>\n </div>\n <span style=\"padding-top: 3px\">{{ value.endDate | date }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.CHECKBOX) {\n @if (value) {\n <p-checkbox\n [attr.data-cy]=\"'checkbox-' + control?.id\"\n styleClass=\"mt-3\"\n [(ngModel)]=\"value\"\n [binary]=\"true\"\n inputId=\"binary\"\n [disabled]=\"true\"\n ></p-checkbox>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.LINKS_DATA) {\n @if (value) {\n <div\n class=\"font-semibold text-500 mt-3 mb-2 overflow-y-auto\"\n [attr.data-cy]=\"'link-' + control?.id\"\n >\n @for (item of value; track item) {\n <span class=\"m-2 text-sm font-light\">{{ item?.relationLabel }}</span>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.ASSIGN) {\n @if (value?.name) {\n <div [attr.data-cy]=\"'number-' + control?.id\">\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 class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ value?.name }}\n </p>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ value?.function }}\n </p>\n </div>\n </div>\n </p-button>\n\n <p-popover #op [dismissable]=\"true\">\n <div>\n <span class=\"block mb-2\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n {{ value.email ?? ' --' }}\n </span>\n <p>\n <i class=\"pi pi-phone mr-1 text-500\"></i>{{ value.phone ?? ' --' }}\n </p>\n </div>\n </p-popover>\n </div>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.CURRENCY) {\n @if (value) {\n <div\n [attr.data-cy]=\"'currency-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }} €\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.PASSWORD) {\n @if (value) {\n <div\n [attr.data-cy]=\"'password-' + control?.id\"\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 } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.SS_OPTION_OBJECT_BASED) {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-OBJECT-BASED-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value.value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.MS_OPTION) {\n @if (value) {\n <div\n [attr.data-cy]=\"'MS-OPTION-OBJECT-BASED-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2 white-space-nowrap overflow-hidden\"\n >\n {{ value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case (ctrlType.SS_OPTION) {\n @if (control?.configuration?.flagMode) {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2 flex align-items-center gap-2\"\n >\n @if (value?.key) {\n <img\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 }\n <span>{{ value.userFriendlyMessage }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n } @else {\n @if (value) {\n <div\n [attr.data-cy]=\"'SS-OPTION-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value | translate }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n }\n\n @case (ctrlType.NUMBER) {\n @if (value != null) {\n <div\n [attr.data-cy]=\"'number-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2\"\n >\n {{ value }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @default {\n @if (value) {\n <div\n [attr.data-cy]=\"'test-' + control?.id\"\n class=\"font-semibold text-500 mt-3 mb-2 white-space-nowrap overflow-hidden text-overflow-ellipsis\"\n >\n {{ value | stripHtml }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n}\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>", 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 .read-only-editor-content{margin-top:.75rem;margin-bottom:.5rem;font-weight:600;color:var(--text-color-secondary)}\n"] }]
|
|
7190
7190
|
}], ctorParameters: () => [{ type: i1$4.DomSanitizer }, { type: i3$1.TranslateService }, { type: i0.DestroyRef }], propDecorators: { control: [{
|
|
7191
7191
|
type: Input
|
|
7192
7192
|
}], metaform: [{
|