@abp/ng.theme.shared 7.1.0-rc.1 → 7.1.0-rc.2

package/fesm2020/abp-ng.theme.shared-extensions.mjs

@@ -38,7 +38,7 @@ class DateTimeAdapter {
         if (!value)
             return '';
         const now = new Date();
-        value = {
+        const newValue = {
             // TODO look for strict mode errors
             year: now.getUTCFullYear(),
             month: now.getMonth() + 1,
@@ -49,7 +49,7 @@ class DateTimeAdapter {
             ...this.value,
             ...value,
         };
-        const date = new Date(value.year, value.month - 1, value.day, value.hour, value.minute, value.second);
+        const date = new Date(newValue.year, newValue.month - 1, value.day, value.hour, value.minute, value.second);
         return new Date(date).toISOString();
     }
 }
@@ -222,7 +222,7 @@ class EditFormPropsFactory extends PropsFactory {
 }
 class FormProp extends Prop {
     constructor(options) {
-        super(options.type, options.name, options.displayName, options.permission, options.visible, options.isExtra, options.template, options.className);
+        super(options.type, options.name, options.displayName || '', options.permission || '', options.visible, options.isExtra, options.template, options.className);
         this.group = options.group;
         this.className = options.className;
         this.asyncValidators = options.asyncValidators || (_ => []);
@@ -233,7 +233,7 @@ class FormProp extends Prop {
         this.options = options.options;
         this.id = options.id || options.name;
         const defaultValue = options.defaultValue;
-        this.defaultValue = isFalsyValue(defaultValue) ? defaultValue : defaultValue || null;
+        this.defaultValue = isFalsyValue(defaultValue) ? defaultValue : defaultValue || '';
         this.displayTextResolver = options.displayTextResolver;
     }
     static create(options) {
@@ -457,7 +457,7 @@ class ExtensibleFormPropComponent {
         this.passwordKey = "ThemeShared.Extensions.PasswordComponent" /* eThemeSharedComponents.PasswordComponent */;
         this.disabledFn = (data) => false;
         this.search = (text$) => text$
-            ? text$.pipe(debounceTime(300), distinctUntilChanged(), switchMap(text => this.prop.options(this.data, text)))
+            ? text$.pipe(debounceTime(300), distinctUntilChanged(), switchMap(text => this.prop?.options?.(this.data, text) || of([])))
             : of([]);
         this.typeaheadFormatter = (option) => option.key;
         this.form = groupDirective.form;
@@ -479,7 +479,7 @@ class ExtensibleFormPropComponent {
     }
     get isInvalid() {
         const control = this.form.get(this.prop.name);
-        return control.touched && control.invalid;
+        return control?.touched && control.invalid;
     }
     getTypeaheadControls() {
         const { name } = this.prop;
@@ -631,7 +631,7 @@ class ActionData {
     }
 }
 class Action {
-    constructor(permission, visible = _ => true, action = _ => { }) {
+    constructor(permission, visible = () => true, action = () => { }) {
         this.permission = permission;
         this.visible = visible;
         this.action = action;
@@ -680,7 +680,7 @@ class EntityActionsFactory extends ActionsFactory {
 }
 class EntityAction extends Action {
     constructor(options) {
-        super(options.permission, options.visible, options.action);
+        super(options.permission || '', options.visible, options.action);
         this.text = options.text;
         this.icon = options.icon || '';
     }
@@ -708,14 +708,21 @@ class EntityPropsFactory extends PropsFactory {
 }
 class EntityProp extends Prop {
     constructor(options) {
-        super(options.type, options.name, options.displayName, options.permission, options.visible, options.isExtra);
+        super(options.type, options.name, options.displayName || '', options.permission || '', options.visible, options.isExtra);
         this.columnWidth = options.columnWidth;
         this.sortable = options.sortable || false;
         this.valueResolver =
-            options.valueResolver || (data => of(escapeHtmlChars(data.record[this.name])));
-        this.action = options.action;
-        this.component = options.component;
-        this.enumList = options.enumList;
+            options.valueResolver ||
+                (data => of(escapeHtmlChars(data.record[this.name])));
+        if (options.action) {
+            this.action = options.action;
+        }
+        if (options.component) {
+            this.component = options.component;
+        }
+        if (options.enumList) {
+            this.enumList = options.enumList;
+        }
     }
     static create(options) {
         return new EntityProp(options);
@@ -968,7 +975,7 @@ class ExtensibleTableComponent {
         this.columnWidths = widths;
     }
     getDate(value, format) {
-        return value ? formatDate(value, format, this.locale) : '';
+        return value && format ? formatDate(value, format, this.locale) : '';
     }
     getIcon(value) {
         return value
@@ -978,7 +985,7 @@ class ExtensibleTableComponent {
     getEnum(rowValue, list) {
         if (!list)
             return rowValue;
-        const { key } = list.find(({ value }) => value === rowValue);
+        const { key } = list.find(({ value }) => value === rowValue) || {};
         return key;
     }
     getContent(prop, data) {
@@ -993,7 +1000,7 @@ class ExtensibleTableComponent {
                 case "datetime" /* ePropType.DateTime */:
                     return this.getDate(value, getShortDateShortTimeFormat(this.config));
                 case "enum" /* ePropType.Enum */:
-                    return this.getEnum(value, prop.enumList);
+                    return this.getEnum(value, prop.enumList || []);
                 default:
                     return value;
                 // More types can be handled in the future
@@ -1058,7 +1065,7 @@ class CreateInjectorPipe {
     transform(_, action, context) {
         const get = (token, notFoundValue, options) => {
             const componentData = context.getData();
-            const componentDataCallback = data => {
+            const componentDataCallback = (data) => {
                 data = data ?? context.getData();
                 return action.action(data);
             };
@@ -1095,6 +1102,11 @@ class PageToolbarComponent extends AbstractActionsComponent {
         this.getData = () => this.data;
         this.trackByFn = (_, item) => item.action || item.component;
     }
+    asToolbarAction(value) {
+        return {
+            value: value,
+        };
+    }
 }
 PageToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PageToolbarComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
 PageToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PageToolbarComponent, selector: "abp-page-toolbar", providers: [
@@ -1102,7 +1114,7 @@ PageToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             provide: EXTENSIONS_ACTION_TYPE,
             useValue: 'toolbarActions',
         },
-    ], exportAs: ["abpPageToolbar"], usesInheritance: true, ngImport: i0, template: "<div class=\"row justify-content-end mx-0 gap-2\" id=\"AbpContentToolbar\">\r\n  <div\r\n    class=\"col-auto px-0 pt-0 pt-md-2\"\r\n    [class.pe-0]=\"last\"\r\n    *ngFor=\"let action of actionList; trackBy: trackByFn; let last = last\"\r\n  >\r\n    <ng-container *ngIf=\"action.visible(data)\">\r\n      <ng-container *abpPermission=\"action.permission;runChangeDetection: false\">\r\n        <ng-container *ngIf=\"action.component as component; else button\">\r\n          <ng-container\r\n            *ngComponentOutlet=\"component; injector: record | createInjector: action:this\"\r\n          ></ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template #button>\r\n          <button\r\n            (click)=\"action.action(data)\"\r\n            type=\"button\"\r\n            [ngClass]=\"action.btnClass ? action.btnClass : defaultBtnClass\"\r\n            class=\"d-inline-flex align-items-center gap-1\"\r\n          >\r\n            <i [ngClass]=\"action.icon\" [class.me-1]=\"action.icon\"></i>\r\n            {{ action.text | abpLocalization }}\r\n          </button>\r\n        </ng-template>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "pipe", type: i1.LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: CreateInjectorPipe, name: "createInjector" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], exportAs: ["abpPageToolbar"], usesInheritance: true, ngImport: i0, template: "<div class=\"row justify-content-end mx-0 gap-2\" id=\"AbpContentToolbar\">\r\n  <div\r\n    class=\"col-auto px-0 pt-0 \"\r\n    [class.pe-0]=\"last\"\r\n    *ngFor=\"let action of actionList; trackBy: trackByFn; let last = last\"\r\n  >\r\n    <ng-container *ngIf=\"action.visible(data)\">\r\n      <ng-container *abpPermission=\"action.permission;runChangeDetection: false\">\r\n        <ng-container *ngIf=\"action.component as component; else button\">\r\n          <ng-container\r\n            *ngComponentOutlet=\"component; injector: record | createInjector: action:this\"\r\n          ></ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template #button>\r\n          <ng-container *ngIf=\"asToolbarAction(action).value as toolbarAction\">\r\n            <button\r\n              (click)=\"action.action(data)\"\r\n              type=\"button\"\r\n              [ngClass]=\"toolbarAction.btnClass ? toolbarAction.btnClass : defaultBtnClass\"\r\n              class=\"d-inline-flex align-items-center gap-1\"\r\n            >\r\n              <i [ngClass]=\"toolbarAction.icon\" [class.me-1]=\"toolbarAction.icon\"></i>\r\n              {{ toolbarAction.text | abpLocalization }}\r\n            </button>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "pipe", type: i1.LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: CreateInjectorPipe, name: "createInjector" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PageToolbarComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'abpPageToolbar', selector: 'abp-page-toolbar', providers: [
@@ -1110,7 +1122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                             provide: EXTENSIONS_ACTION_TYPE,
                             useValue: 'toolbarActions',
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row justify-content-end mx-0 gap-2\" id=\"AbpContentToolbar\">\r\n  <div\r\n    class=\"col-auto px-0 pt-0 pt-md-2\"\r\n    [class.pe-0]=\"last\"\r\n    *ngFor=\"let action of actionList; trackBy: trackByFn; let last = last\"\r\n  >\r\n    <ng-container *ngIf=\"action.visible(data)\">\r\n      <ng-container *abpPermission=\"action.permission;runChangeDetection: false\">\r\n        <ng-container *ngIf=\"action.component as component; else button\">\r\n          <ng-container\r\n            *ngComponentOutlet=\"component; injector: record | createInjector: action:this\"\r\n          ></ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template #button>\r\n          <button\r\n            (click)=\"action.action(data)\"\r\n            type=\"button\"\r\n            [ngClass]=\"action.btnClass ? action.btnClass : defaultBtnClass\"\r\n            class=\"d-inline-flex align-items-center gap-1\"\r\n          >\r\n            <i [ngClass]=\"action.icon\" [class.me-1]=\"action.icon\"></i>\r\n            {{ action.text | abpLocalization }}\r\n          </button>\r\n        </ng-template>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row justify-content-end mx-0 gap-2\" id=\"AbpContentToolbar\">\r\n  <div\r\n    class=\"col-auto px-0 pt-0 \"\r\n    [class.pe-0]=\"last\"\r\n    *ngFor=\"let action of actionList; trackBy: trackByFn; let last = last\"\r\n  >\r\n    <ng-container *ngIf=\"action.visible(data)\">\r\n      <ng-container *abpPermission=\"action.permission;runChangeDetection: false\">\r\n        <ng-container *ngIf=\"action.component as component; else button\">\r\n          <ng-container\r\n            *ngComponentOutlet=\"component; injector: record | createInjector: action:this\"\r\n          ></ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template #button>\r\n          <ng-container *ngIf=\"asToolbarAction(action).value as toolbarAction\">\r\n            <button\r\n              (click)=\"action.action(data)\"\r\n              type=\"button\"\r\n              [ngClass]=\"toolbarAction.btnClass ? toolbarAction.btnClass : defaultBtnClass\"\r\n              class=\"d-inline-flex align-items-center gap-1\"\r\n            >\r\n              <i [ngClass]=\"toolbarAction.icon\" [class.me-1]=\"toolbarAction.icon\"></i>\r\n              {{ toolbarAction.text | abpLocalization }}\r\n            </button>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 var objectExtensions = /*#__PURE__*/Object.freeze({
@@ -1209,7 +1221,7 @@ function mergeWithDefaultActions(extension, defaultActions, ...contributors) {
 }
 
 function generateFormFromProps(data) {
-    const extensions = data.getInjected(ExtensionsService);
+    const extensions = data.getInjected((ExtensionsService));
     const identifier = data.getInjected(EXTENSIONS_IDENTIFIER);
     const form = new UntypedFormGroup({});
     const extraForm = new UntypedFormGroup({});
@@ -1387,7 +1399,7 @@ function createPropertiesToContributorsMapper(generateDisplayName, resource, enu
             if (property.ui.onTable.isVisible) {
                 const sortable = Boolean(property.ui.onTable.isSortable);
                 const columnWidth = type === "boolean" /* ePropType.Boolean */ ? 150 : 250;
-                const valueResolver = type === "enum" /* ePropType.Enum */
+                const valueResolver = type === "enum" /* ePropType.Enum */ && property.type
                     ? createEnumValueResolver(property.type, enums[property.type], propName)
                     : createExtraPropertyValueResolver(propName);
                 const entityProp = new EntityProp({