@fuentis/phoenix-ui 0.0.9-alpha.664 → 0.0.9-alpha.665
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.
|
@@ -9001,18 +9001,18 @@ class ReadOnlyInputV2Component {
|
|
|
9001
9001
|
null);
|
|
9002
9002
|
}, ...(ngDevMode ? [{ debugName: "ssLabel" }] : []));
|
|
9003
9003
|
/**
|
|
9004
|
-
* Multi-select option
|
|
9005
|
-
*
|
|
9004
|
+
* Multi-select option labels (MS_OPTION), resolved to display strings — the
|
|
9005
|
+
* full list, in order. The read-only view renders these stacked (one per line);
|
|
9006
|
+
* {@link msLabel} joins/truncates them for compact single-string contexts.
|
|
9006
9007
|
*/
|
|
9007
|
-
|
|
9008
|
+
msLabels = computed(() => {
|
|
9008
9009
|
const v = this._v();
|
|
9009
9010
|
if (!Array.isArray(v) || v.length === 0)
|
|
9010
|
-
return
|
|
9011
|
+
return [];
|
|
9011
9012
|
const suffix = this.getLangSuffix();
|
|
9012
9013
|
const key = `labelKeyVal${suffix}`;
|
|
9013
|
-
const maxItems = 4;
|
|
9014
9014
|
const opts = this.field.configuration.options ?? [];
|
|
9015
|
-
|
|
9015
|
+
return v
|
|
9016
9016
|
.map((x) => {
|
|
9017
9017
|
// Object value: resolve localized label from DTO fields.
|
|
9018
9018
|
if (x !== null && typeof x === 'object') {
|
|
@@ -9024,8 +9024,16 @@ class ReadOnlyInputV2Component {
|
|
|
9024
9024
|
})
|
|
9025
9025
|
.filter((x) => x !== null && x !== undefined && String(x).trim() !== '')
|
|
9026
9026
|
.map((x) => String(x));
|
|
9027
|
+
}, ...(ngDevMode ? [{ debugName: "msLabels" }] : []));
|
|
9028
|
+
/**
|
|
9029
|
+
* Multi-select option label resolver (MS_OPTION).
|
|
9030
|
+
* Joins multiple labels into a single string with truncation after maxItems.
|
|
9031
|
+
*/
|
|
9032
|
+
msLabel = computed(() => {
|
|
9033
|
+
const labels = this.msLabels();
|
|
9027
9034
|
if (!labels.length)
|
|
9028
9035
|
return null;
|
|
9036
|
+
const maxItems = 4;
|
|
9029
9037
|
return labels.length <= maxItems
|
|
9030
9038
|
? labels.join(', ')
|
|
9031
9039
|
: `${labels.slice(0, maxItems).join(', ')} ...`;
|
|
@@ -9058,7 +9066,7 @@ class ReadOnlyInputV2Component {
|
|
|
9058
9066
|
return String(v);
|
|
9059
9067
|
}, ...(ngDevMode ? [{ debugName: "displayText" }] : []));
|
|
9060
9068
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ReadOnlyInputV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9061
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ReadOnlyInputV2Component, isStandalone: true, selector: "phoenix-read-only-input-v2", inputs: { field: "field", form: "form" }, ngImport: i0, template: "@switch (type) {\n\n @case ('TEXT_EDITOR') {\n @if (displayText()) {\n <div class=\"read-only-editor-content\" [innerHTML]=\"displayText()\"></div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('TEXT_AREA') {\n @if (displayText()) {\n <div class=\"w-full mt-2 mb-2 font-semibold text-500 whitespace-pre-line\">\n {{ displayText() | stripHtmlSafe }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('SWITCH') {\n @if (bool() !== null) {\n <div class=\"mt-2 mb-2 font-semibold text-500\">\n {{ bool() ? ('Yes' | translate) : ('No' | translate) }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('CHECKBOX') {\n @if (bool() !== null) {\n <div class=\"mt-2 mb-2 font-semibold text-500\">\n {{ bool() ? ('Yes' | translate) : ('No' | translate) }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('DATE') {\n @if (dateValue()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ dateValue() | date }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('START_DUE_DATE') {\n @if (startDue()) {\n <div class=\"flex font-semibold text-500 mt-2 mb-2\">\n <span style=\"padding-top: 3px\">{{ startDue()?.startDate | date }}</span>\n <div class=\"flex align-items-center p-2\">\n <i class=\"pi pi-arrow-right text-sm\"></i>\n </div>\n <span style=\"padding-top: 3px\">{{ startDue()?.endDate | date }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('ASSIGN') {\n @if (assign()?.name) {\n <div>\n <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n <div class=\"person-wrap\">\n <div class=\"person-avatar\">\n {{ (assign()?.name ?? '')!.toUpperCase().charAt(0) }}\n </div>\n <div>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ assign()?.name }}\n </p>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ assign()?.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 {{ assign()?.email ?? '--' }}\n </span>\n <p>\n <i class=\"pi pi-phone mr-1 text-500\"></i>\n {{ assign()?.phone ?? '--' }}\n </p>\n </div>\n </p-popover>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('UPLOAD') {\n @if (upload()?.fileName) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ upload()?.fileName }}\n @if (upload()?.size) {\n <span class=\"text-600 font-normal\"> \u2022 {{ upload()?.size | fileSize }}</span>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('UPLOAD_DRAG_DROP') {\n @if (upload()?.fileName) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ upload()?.fileName }}\n @if (upload()?.size) {\n <span class=\"text-600 font-normal\"> \u2022 {{ upload()?.size | fileSize }}</span>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('SS_OPTION') {\n @if (ssLabel()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ ssLabel() | translate }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('SS_OPTION_OBJECT_BASED') {\n @if (ssLabel()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ ssLabel() | translate }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('MS_OPTION') {\n @if (
|
|
9069
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ReadOnlyInputV2Component, isStandalone: true, selector: "phoenix-read-only-input-v2", inputs: { field: "field", form: "form" }, ngImport: i0, template: "@switch (type) {\n\n @case ('TEXT_EDITOR') {\n @if (displayText()) {\n <div class=\"read-only-editor-content\" [innerHTML]=\"displayText()\"></div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('TEXT_AREA') {\n @if (displayText()) {\n <div class=\"w-full mt-2 mb-2 font-semibold text-500 whitespace-pre-line\">\n {{ displayText() | stripHtmlSafe }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('SWITCH') {\n @if (bool() !== null) {\n <div class=\"mt-2 mb-2 font-semibold text-500\">\n {{ bool() ? ('Yes' | translate) : ('No' | translate) }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('CHECKBOX') {\n @if (bool() !== null) {\n <div class=\"mt-2 mb-2 font-semibold text-500\">\n {{ bool() ? ('Yes' | translate) : ('No' | translate) }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('DATE') {\n @if (dateValue()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ dateValue() | date }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('START_DUE_DATE') {\n @if (startDue()) {\n <div class=\"flex font-semibold text-500 mt-2 mb-2\">\n <span style=\"padding-top: 3px\">{{ startDue()?.startDate | date }}</span>\n <div class=\"flex align-items-center p-2\">\n <i class=\"pi pi-arrow-right text-sm\"></i>\n </div>\n <span style=\"padding-top: 3px\">{{ startDue()?.endDate | date }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('ASSIGN') {\n @if (assign()?.name) {\n <div>\n <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n <div class=\"person-wrap\">\n <div class=\"person-avatar\">\n {{ (assign()?.name ?? '')!.toUpperCase().charAt(0) }}\n </div>\n <div>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ assign()?.name }}\n </p>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ assign()?.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 {{ assign()?.email ?? '--' }}\n </span>\n <p>\n <i class=\"pi pi-phone mr-1 text-500\"></i>\n {{ assign()?.phone ?? '--' }}\n </p>\n </div>\n </p-popover>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('UPLOAD') {\n @if (upload()?.fileName) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ upload()?.fileName }}\n @if (upload()?.size) {\n <span class=\"text-600 font-normal\"> \u2022 {{ upload()?.size | fileSize }}</span>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('UPLOAD_DRAG_DROP') {\n @if (upload()?.fileName) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ upload()?.fileName }}\n @if (upload()?.size) {\n <span class=\"text-600 font-normal\"> \u2022 {{ upload()?.size | fileSize }}</span>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('SS_OPTION') {\n @if (ssLabel()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ ssLabel() | translate }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('SS_OPTION_OBJECT_BASED') {\n @if (ssLabel()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ ssLabel() | translate }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('MS_OPTION') {\n @if (msLabels().length) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n @for (label of msLabels(); track label) {\n <div>{{ label }}</div>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n @case ('PASSWORD') {\n @if (displayText()) {\n <input\n pInputText\n type=\"password\"\n class=\"w-full p-inputtext\"\n [disabled]=\"true\"\n [value]=\"displayText() ?? ''\"\n autocomplete=\"off\"\n aria-label=\"password\"\n />\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @default {\n @if (displayText()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ displayText() | stripHtmlSafe }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n}\n\n<ng-template #fallBack>\n <div class=\"font-semibold text-500 mt-2 mb-2\">--</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: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { 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: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: StripHtmlSafePipe, name: "stripHtmlSafe" }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9062
9070
|
}
|
|
9063
9071
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ReadOnlyInputV2Component, decorators: [{
|
|
9064
9072
|
type: Component,
|
|
@@ -9070,7 +9078,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
9070
9078
|
PopoverModule,
|
|
9071
9079
|
StripHtmlSafePipe,
|
|
9072
9080
|
FileSizePipe,
|
|
9073
|
-
], template: "@switch (type) {\n\n @case ('TEXT_EDITOR') {\n @if (displayText()) {\n <div class=\"read-only-editor-content\" [innerHTML]=\"displayText()\"></div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('TEXT_AREA') {\n @if (displayText()) {\n <div class=\"w-full mt-2 mb-2 font-semibold text-500 whitespace-pre-line\">\n {{ displayText() | stripHtmlSafe }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('SWITCH') {\n @if (bool() !== null) {\n <div class=\"mt-2 mb-2 font-semibold text-500\">\n {{ bool() ? ('Yes' | translate) : ('No' | translate) }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('CHECKBOX') {\n @if (bool() !== null) {\n <div class=\"mt-2 mb-2 font-semibold text-500\">\n {{ bool() ? ('Yes' | translate) : ('No' | translate) }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('DATE') {\n @if (dateValue()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ dateValue() | date }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('START_DUE_DATE') {\n @if (startDue()) {\n <div class=\"flex font-semibold text-500 mt-2 mb-2\">\n <span style=\"padding-top: 3px\">{{ startDue()?.startDate | date }}</span>\n <div class=\"flex align-items-center p-2\">\n <i class=\"pi pi-arrow-right text-sm\"></i>\n </div>\n <span style=\"padding-top: 3px\">{{ startDue()?.endDate | date }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('ASSIGN') {\n @if (assign()?.name) {\n <div>\n <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n <div class=\"person-wrap\">\n <div class=\"person-avatar\">\n {{ (assign()?.name ?? '')!.toUpperCase().charAt(0) }}\n </div>\n <div>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ assign()?.name }}\n </p>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ assign()?.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 {{ assign()?.email ?? '--' }}\n </span>\n <p>\n <i class=\"pi pi-phone mr-1 text-500\"></i>\n {{ assign()?.phone ?? '--' }}\n </p>\n </div>\n </p-popover>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('UPLOAD') {\n @if (upload()?.fileName) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ upload()?.fileName }}\n @if (upload()?.size) {\n <span class=\"text-600 font-normal\"> \u2022 {{ upload()?.size | fileSize }}</span>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('UPLOAD_DRAG_DROP') {\n @if (upload()?.fileName) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ upload()?.fileName }}\n @if (upload()?.size) {\n <span class=\"text-600 font-normal\"> \u2022 {{ upload()?.size | fileSize }}</span>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('SS_OPTION') {\n @if (ssLabel()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ ssLabel() | translate }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('SS_OPTION_OBJECT_BASED') {\n @if (ssLabel()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ ssLabel() | translate }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('MS_OPTION') {\n @if (
|
|
9081
|
+
], template: "@switch (type) {\n\n @case ('TEXT_EDITOR') {\n @if (displayText()) {\n <div class=\"read-only-editor-content\" [innerHTML]=\"displayText()\"></div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('TEXT_AREA') {\n @if (displayText()) {\n <div class=\"w-full mt-2 mb-2 font-semibold text-500 whitespace-pre-line\">\n {{ displayText() | stripHtmlSafe }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('SWITCH') {\n @if (bool() !== null) {\n <div class=\"mt-2 mb-2 font-semibold text-500\">\n {{ bool() ? ('Yes' | translate) : ('No' | translate) }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('CHECKBOX') {\n @if (bool() !== null) {\n <div class=\"mt-2 mb-2 font-semibold text-500\">\n {{ bool() ? ('Yes' | translate) : ('No' | translate) }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('DATE') {\n @if (dateValue()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ dateValue() | date }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('START_DUE_DATE') {\n @if (startDue()) {\n <div class=\"flex font-semibold text-500 mt-2 mb-2\">\n <span style=\"padding-top: 3px\">{{ startDue()?.startDate | date }}</span>\n <div class=\"flex align-items-center p-2\">\n <i class=\"pi pi-arrow-right text-sm\"></i>\n </div>\n <span style=\"padding-top: 3px\">{{ startDue()?.endDate | date }}</span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('ASSIGN') {\n @if (assign()?.name) {\n <div>\n <p-button [rounded]=\"true\" [text]=\"true\" (onClick)=\"op.toggle($event)\">\n <div class=\"person-wrap\">\n <div class=\"person-avatar\">\n {{ (assign()?.name ?? '')!.toUpperCase().charAt(0) }}\n </div>\n <div>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ assign()?.name }}\n </p>\n <p class=\"white-space-nowrap overflow-hidden text-overflow-ellipsis\">\n {{ assign()?.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 {{ assign()?.email ?? '--' }}\n </span>\n <p>\n <i class=\"pi pi-phone mr-1 text-500\"></i>\n {{ assign()?.phone ?? '--' }}\n </p>\n </div>\n </p-popover>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('UPLOAD') {\n @if (upload()?.fileName) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ upload()?.fileName }}\n @if (upload()?.size) {\n <span class=\"text-600 font-normal\"> \u2022 {{ upload()?.size | fileSize }}</span>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('UPLOAD_DRAG_DROP') {\n @if (upload()?.fileName) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ upload()?.fileName }}\n @if (upload()?.size) {\n <span class=\"text-600 font-normal\"> \u2022 {{ upload()?.size | fileSize }}</span>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('SS_OPTION') {\n @if (ssLabel()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ ssLabel() | translate }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('SS_OPTION_OBJECT_BASED') {\n @if (ssLabel()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ ssLabel() | translate }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @case ('MS_OPTION') {\n @if (msLabels().length) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n @for (label of msLabels(); track label) {\n <div>{{ label }}</div>\n }\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n @case ('PASSWORD') {\n @if (displayText()) {\n <input\n pInputText\n type=\"password\"\n class=\"w-full p-inputtext\"\n [disabled]=\"true\"\n [value]=\"displayText() ?? ''\"\n autocomplete=\"off\"\n aria-label=\"password\"\n />\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n\n @default {\n @if (displayText()) {\n <div class=\"font-semibold text-500 mt-2 mb-2\">\n {{ displayText() | stripHtmlSafe }}\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"fallBack\"></ng-container>\n }\n }\n}\n\n<ng-template #fallBack>\n <div class=\"font-semibold text-500 mt-2 mb-2\">--</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"] }]
|
|
9074
9082
|
}], propDecorators: { field: [{
|
|
9075
9083
|
type: Input,
|
|
9076
9084
|
args: [{ required: true }]
|