@singularsystems/neo-core 1.0.10 → 1.0.12

package/dist/Components/PositionHelper.d.ts

@@ -1,11 +1,39 @@
+import { IDisposable } from "../Misc";
+interface IRelativePosition {
+    left?: number;
+    right?: number;
+    /** Indicates that there is not enough space at the bottom of the anchor. Popup should be displayed on top. */
+    onTop: boolean;
+    anchorHeight: number;
+    popupHeight: number;
+}
 export default class PositionHelper {
     /**
      * Ensures that a popup element is positioned so that it remains in the bounds of the screen by left/right/top/bottom aligning it relative to the anchor element.
-     * @param trigger The element to which the popup is anchored
+     * @param anchor The element to which the popup is anchored
      * @param popup The element which pops up from the anchor.
      * @param fromBottom True if the popups bottom style property must be set. Set to false if there are buttons at the top of the popup and the popups height may change.
      * @param alignRight True if the popup must be aligned to the anchors right position.
      * @param hAlign Horizontal alignment of the popup edge relative to the anchor edge. Overrides alignRight
      */
     static checkScreenBounds(anchor: HTMLElement, popup: HTMLElement, fromBottom?: boolean, alignRight?: boolean, hAlign?: "left" | "center" | "right"): void;
+    /**
+     * Ensures that a popup element is positioned so that it remains in the bounds of the screen by left/right/top/bottom aligning it relative to the anchor element.
+     * @param anchor The element to which the popup is anchored
+     * @param popup The element which pops up from the anchor.
+     * @param alignRight True if the popup must be aligned to the anchors right position.
+     * @param hAlign Horizontal alignment of the popup edge relative to the anchor edge. Overrides alignRight
+     */
+    static getRelativePosition(anchor: HTMLElement, popup: HTMLElement, alignRight?: boolean, hAlign?: "left" | "center" | "right"): IRelativePosition;
+}
+/** Helper used to position elements with position: fixed relative to another element, while maintaining position on scroll. */
+export declare class FixedPositionHelper implements IDisposable {
+    private anchorElement;
+    private popupElement;
+    private topOffset;
+    private positionInfo;
+    constructor(anchorElement: HTMLElement, popupElement: HTMLElement, alignRight?: boolean, hAlign?: "left" | "center" | "right");
+    private positionPopup;
+    dispose(): void;
 }
+export {};

package/dist/Components/PositionHelper.js

@@ -3,7 +3,7 @@ var PositionHelper = /** @class */ (function () {
     }
     /**
      * Ensures that a popup element is positioned so that it remains in the bounds of the screen by left/right/top/bottom aligning it relative to the anchor element.
-     * @param trigger The element to which the popup is anchored
+     * @param anchor The element to which the popup is anchored
      * @param popup The element which pops up from the anchor.
      * @param fromBottom True if the popups bottom style property must be set. Set to false if there are buttons at the top of the popup and the popups height may change.
      * @param alignRight True if the popup must be aligned to the anchors right position.
@@ -12,23 +12,50 @@ var PositionHelper = /** @class */ (function () {
     PositionHelper.checkScreenBounds = function (anchor, popup, fromBottom, alignRight, hAlign) {
         if (fromBottom === void 0) { fromBottom = true; }
         if (alignRight === void 0) { alignRight = false; }
-        var popupHeight = popup.offsetHeight;
-        var containerScreenRect = anchor.getBoundingClientRect();
-        // Vertical
-        if (containerScreenRect.bottom + anchor.offsetHeight + popupHeight > window.innerHeight - 20 && containerScreenRect.top > popupHeight) {
+        var position = this.getRelativePosition(anchor, popup, alignRight, hAlign);
+        if (position.onTop) {
             if (fromBottom) {
                 popup.style.top = "auto";
                 popup.style.bottom = "100%";
             }
             else {
                 popup.style.bottom = "";
-                popup.style.top = -(popupHeight) + "px";
+                popup.style.top = -(position.popupHeight) + "px";
             }
         }
         else {
             popup.style.top = "100%";
             popup.style.bottom = "auto";
         }
+        if (position.right) {
+            popup.style.left = "auto";
+            popup.style.right = position.right + "px";
+        }
+        else if (position.left) {
+            popup.style.left = position.left + "px";
+            popup.style.right = "";
+        }
+    };
+    /**
+     * Ensures that a popup element is positioned so that it remains in the bounds of the screen by left/right/top/bottom aligning it relative to the anchor element.
+     * @param anchor The element to which the popup is anchored
+     * @param popup The element which pops up from the anchor.
+     * @param alignRight True if the popup must be aligned to the anchors right position.
+     * @param hAlign Horizontal alignment of the popup edge relative to the anchor edge. Overrides alignRight
+     */
+    PositionHelper.getRelativePosition = function (anchor, popup, alignRight, hAlign) {
+        if (alignRight === void 0) { alignRight = false; }
+        var popupHeight = popup.offsetHeight;
+        var containerScreenRect = anchor.getBoundingClientRect();
+        var position = {
+            popupHeight: popupHeight,
+            anchorHeight: anchor.offsetHeight,
+        };
+        // Vertical
+        if (containerScreenRect.bottom + anchor.offsetHeight + popupHeight > window.innerHeight - 20 && containerScreenRect.top > popupHeight) {
+            position.onTop = true;
+            position.popupHeight = popupHeight;
+        }
         // Horizontal
         var popupWidth = popup.offsetWidth;
         if (!hAlign) {
@@ -36,8 +63,7 @@ var PositionHelper = /** @class */ (function () {
         }
         var isRightAligned = hAlign === "right" && (containerScreenRect.right - popupWidth >= 0);
         if (isRightAligned) {
-            popup.style.left = "auto";
-            popup.style.right = "0";
+            position.right = 0;
         }
         else {
             var left = 0;
@@ -51,10 +77,46 @@ var PositionHelper = /** @class */ (function () {
             else if (leftCheck + popup.offsetWidth > window.innerWidth - 20) {
                 left -= (leftCheck + popup.offsetWidth) - (window.innerWidth - 20);
             }
-            popup.style.left = left + "px";
-            popup.style.right = "";
+            position.left = left;
         }
+        return position;
     };
     return PositionHelper;
 }());
 export default PositionHelper;
+/** Helper used to position elements with position: fixed relative to another element, while maintaining position on scroll. */
+var FixedPositionHelper = /** @class */ (function () {
+    function FixedPositionHelper(anchorElement, popupElement, alignRight, hAlign) {
+        if (alignRight === void 0) { alignRight = false; }
+        this.anchorElement = anchorElement;
+        this.popupElement = popupElement;
+        this.topOffset = 0;
+        this.positionInfo = PositionHelper.getRelativePosition(anchorElement, popupElement, alignRight, hAlign);
+        if (this.positionInfo.onTop) {
+            var style = window.getComputedStyle(popupElement);
+            var marginHeight = parseFloat(style.marginBottom) + parseFloat(style.marginTop);
+            this.topOffset = -(this.positionInfo.popupHeight + marginHeight);
+        }
+        else {
+            this.topOffset = this.positionInfo.anchorHeight;
+        }
+        window.addEventListener("scroll", this.positionPopup.bind(this), { capture: true });
+        this.positionPopup();
+    }
+    FixedPositionHelper.prototype.positionPopup = function () {
+        var rect = this.anchorElement.getBoundingClientRect();
+        this.popupElement.style.top = (rect.top + this.topOffset) + "px";
+        this.popupElement.style.right = "auto";
+        if (this.positionInfo.left !== undefined) {
+            this.popupElement.style.left = (rect.left + this.positionInfo.left) + "px";
+        }
+        else {
+            this.popupElement.style.left = (rect.right - this.popupElement.offsetWidth) + "px";
+        }
+    };
+    FixedPositionHelper.prototype.dispose = function () {
+        window.removeEventListener("scroll", this.positionPopup);
+    };
+    return FixedPositionHelper;
+}());
+export { FixedPositionHelper };

package/dist/Components/index.d.ts

@@ -17,6 +17,6 @@ export { INotification, INotificationOptions } from './Notifications/Notificatio
 export { INotificationStore } from './Notifications/NotificationStore';
 export { INotificationHelper } from './Notifications/INotificationHelper';
 export { ProgressState } from './TaskRunner/ProgressState';
-export { default as PositionHelper } from './PositionHelper';
+export { default as PositionHelper, FixedPositionHelper } from './PositionHelper';
 import * as Tooltip from './TooltipOptions';
 export { Tooltip };

package/dist/Components/index.js

@@ -8,6 +8,6 @@ export { default as FileManager } from './FileManager/FileManager';
 export { default as BoundFileManager } from './FileManager/BoundFileManager';
 export { FileUploadBatch } from './FileManager/FileUploadBatch';
 export { ProgressState } from './TaskRunner/ProgressState';
-export { default as PositionHelper } from './PositionHelper';
+export { default as PositionHelper, FixedPositionHelper } from './PositionHelper';
 import * as Tooltip from './TooltipOptions';
 export { Tooltip };

package/dist/Data/Paging/PageManager.d.ts

@@ -98,7 +98,7 @@ export declare class PageManager<TCriteria extends ValueObject, TModel extends I
     taskRunner: ITaskRunner;
     private hasInitialised;
     private pageRequest;
-    private _totalRecords;
+    private _totalExternalRecords;
     private currentData;
     private initialFetchState;
     private isInvalidated;

package/dist/Data/Paging/PageManager.js

@@ -13,7 +13,7 @@ var PageManager = /** @class */ (function (_super) {
         _this.modelType = modelType;
         _this.dataSource = dataSource;
         _this.hasInitialised = false;
-        _this._totalRecords = -1;
+        _this._totalExternalRecords = -1;
         _this.currentData = new List(_this.modelType);
         _this.initialFetchState = "none";
         _this.isInvalidated = false;
@@ -104,7 +104,7 @@ var PageManager = /** @class */ (function (_super) {
     });
     Object.defineProperty(PageManager.prototype, "totalRecords", {
         get: function () {
-            return this._totalRecords;
+            return this._totalExternalRecords + this.data.length;
         },
         enumerable: false,
         configurable: true
@@ -239,7 +239,7 @@ var PageManager = /** @class */ (function (_super) {
                 switch (_a.label) {
                     case 0:
                         if (totalRecords >= 0) {
-                            this._totalRecords = totalRecords;
+                            this._totalExternalRecords = totalRecords - pageRecords.length;
                         }
                         newData = List.fromJSArray(this.modelType, pageRecords, this.options.deserialiseOptions);
                         if (!this.options.afterFetch) return [3 /*break*/, 2];
@@ -261,7 +261,6 @@ var PageManager = /** @class */ (function (_super) {
      * Adds an item to the current page, and increments the total record count.
      */
     PageManager.prototype.addRecord = function (item) {
-        this._totalRecords += 1;
         if (item.meta) {
             this.data.push(item);
         }
@@ -275,7 +274,7 @@ var PageManager = /** @class */ (function (_super) {
     PageManager.prototype.reset = function () {
         this.initialFetchState = "none";
         this.data.set([]);
-        this._totalRecords = 0;
+        this._totalExternalRecords = 0;
     };
     /**
      * Resets the sort properties. A new sort property can be provided.
@@ -351,7 +350,7 @@ var PageManager = /** @class */ (function (_super) {
     __decorate([
         Observable(),
         __metadata("design:type", Number)
-    ], PageManager.prototype, "_totalRecords", void 0);
+    ], PageManager.prototype, "_totalExternalRecords", void 0);
     __decorate([
         Observable(),
         __metadata("design:type", Object)

package/dist/Validation/ValidationState.d.ts

@@ -32,6 +32,9 @@ export declare class ContainerValidationState extends ValidationState {
     private displayInfoSome;
     brokenRules: Array<RuleContextBase>;
     get hasDetail(): boolean;
+    private _isBusy;
+    /** Indicates that an async rule is in progress. */
+    get isBusy(): boolean;
     /**
      * Gets the error display information.
      * @param canDisplayAll True if the bound controls have de-focused, or the form attempted to submit.

package/dist/Validation/ValidationState.js

@@ -37,6 +37,7 @@ var ContainerValidationState = /** @class */ (function (_super) {
     function ContainerValidationState() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.brokenRules = [];
+        _this._isBusy = false;
         return _this;
     }
     Object.defineProperty(ContainerValidationState.prototype, "hasDetail", {
@@ -46,6 +47,14 @@ var ContainerValidationState = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(ContainerValidationState.prototype, "isBusy", {
+        /** Indicates that an async rule is in progress. */
+        get: function () {
+            return this._isBusy;
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * Gets the error display information.
      * @param canDisplayAll True if the bound controls have de-focused, or the form attempted to submit.
@@ -68,6 +77,9 @@ var ContainerValidationState = /** @class */ (function (_super) {
     ContainerValidationState.prototype.update = function (ruleState) {
         this.severity = Math.max(this.severity, ruleState.severity);
         this.forceDisplaySeverity = Math.max(this.forceDisplaySeverity, ruleState.forceDisplaySeverity);
+        if (ruleState.severity === RuleSeverity.AsyncBusy || ruleState.forceDisplaySeverity === RuleSeverity.AsyncBusy) {
+            this._isBusy = true;
+        }
     };
     return ContainerValidationState;
 }(ValidationState));

package/dist/Validation/Validators/IModelValidator.d.ts

@@ -8,6 +8,8 @@ export default interface IModelValidator {
     /** Causes all errors to be displayed regardless of ValidationDisplayMode. */
     forceShowErrors: boolean;
     readonly isValid: boolean;
+    /** Indicates that an async rule is in progress. */
+    readonly isBusy: boolean;
     /** The max current severity of all rules in this object. */
     readonly severity: RuleSeverity;
     /**

package/dist/Validation/Validators/ModelValidator.d.ts

@@ -23,6 +23,7 @@ export default class ModelValidator implements IModelValidator {
     forceShowErrors: boolean;
     get ruleState(): ContainerValidationState;
     get isValid(): boolean;
+    get isBusy(): boolean;
     get severity(): import("../ValidationState").RuleSeverity;
     private checkRules;
     /**

package/dist/Validation/Validators/ModelValidator.js

@@ -63,6 +63,13 @@ var ModelValidator = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(ModelValidator.prototype, "isBusy", {
+        get: function () {
+            return this.ruleState.isBusy;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(ModelValidator.prototype, "severity", {
         get: function () {
             return this.ruleState.severity;

package/dist/Validation/Validators/PropertyValidator.d.ts

@@ -14,7 +14,7 @@ export default class PropertyValidator implements IPropertyValidator {
     get ruleState(): ContainerValidationState;
     get isValid(): boolean;
     private checkRules;
-    /** Infomation about the errors that must be shown on the UI. Independent from whether or not the property is valid. */
+    /** Information about the errors that must be shown on the UI. Independent from whether or not the property is valid. */
     getDisplayState(validationMode: ValidationDisplayMode): ValidationDisplayInfo;
     /** True if the validation state is final, e.g. the property has blurred, or validation display mode is always. */
     canDisplayAll(validationMode: ValidationDisplayMode): boolean;

package/dist/Validation/Validators/PropertyValidator.js

@@ -35,7 +35,7 @@ var PropertyValidator = /** @class */ (function () {
             }
         }
     };
-    /** Infomation about the errors that must be shown on the UI. Independent from whether or not the property is valid. */
+    /** Information about the errors that must be shown on the UI. Independent from whether or not the property is valid. */
     PropertyValidator.prototype.getDisplayState = function (validationMode) {
         if (validationMode === ValidationDisplayMode.Never) {
             return new ValidationDisplayInfo();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-core",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Core functionality for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",