@singularsystems/neo-core 1.0.11 → 1.0.13

package/dist/Components/DatePicker/DatePicker.d.ts

@@ -10,7 +10,7 @@ export default class DatePicker {
     private headerAnimationHelper;
     private inputHasChanged;
     private input;
-    private popup;
+    private popup?;
     private headerContainer;
     private currentHeaderLabel;
     private prevButton;
@@ -22,6 +22,7 @@ export default class DatePicker {
     private boundDateNoTime;
     private today;
     private currentViewDate;
+    private positionHelper?;
     constructor(container: HTMLDivElement, options?: IPartialDateProps);
     static mustShowInput(options?: IPartialDateProps): boolean | undefined;
     inputFocused(e: FocusEvent): void;

package/dist/Components/DatePicker/DatePicker.js

@@ -1,7 +1,7 @@
 import DateUtils from '../../Dates/DateUtils';
 import AnimationHelper from '../AnimationHelper';
 import { YearsInYearView, ProcessedDatePickerOptions } from './DatePickerOptions';
-import PositionHelper from '../PositionHelper';
+import { FixedPositionHelper } from '../PositionHelper';
 // TODO: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
 // TODO: Allow input to be shown with inline picker, and specify position.
 var ViewType;
@@ -114,6 +114,7 @@ var DatePicker = /** @class */ (function () {
         }
     };
     DatePicker.prototype.removePopup = function (animate) {
+        var _a;
         if (this.popup && !this.options.alwaysShow) {
             if (animate) {
                 AnimationHelper.scale(this.popup, DatePicker.AnimationClassName, 1, 0);
@@ -124,7 +125,9 @@ var DatePicker = /** @class */ (function () {
             }
             this.currentHeaderLabel = null;
             this.currentContentTable = null;
-            this.popup = null;
+            this.popup = undefined;
+            (_a = this.positionHelper) === null || _a === void 0 ? void 0 : _a.dispose();
+            this.positionHelper = undefined;
         }
     };
     DatePicker.prototype.setBindValue = function (dateValue, options) {
@@ -140,7 +143,7 @@ var DatePicker = /** @class */ (function () {
         if (options.close) {
             this.removePopup(true);
         }
-        if (!options.close || this.options.alwaysShow) {
+        if (!options.close || options.forceDraw) {
             this.resetCurrentViewDate();
             this.populateContentContainer(true);
         }
@@ -173,9 +176,12 @@ var DatePicker = /** @class */ (function () {
         }
     };
     DatePicker.prototype.positionPopup = function (fromBottom) {
-        if (this.popup) {
+        if (this.popup && !this.options.alwaysShow) {
             var textAlign = this.options.popupAlignRight ? undefined : window.getComputedStyle(this.input).textAlign;
-            PositionHelper.checkScreenBounds(this.container, this.popup, fromBottom, this.options.popupAlignRight, textAlign);
+            if (!this.positionHelper) {
+                this.positionHelper = new FixedPositionHelper(this.container, this.popup);
+            }
+            this.positionHelper.positionPopup(this.options.popupAlignRight, textAlign, fromBottom);
         }
     };
     /**
@@ -234,15 +240,15 @@ var DatePicker = /** @class */ (function () {
                 this.popup.addEventListener("mouseenter", function () { return _this.positionPopup(false); });
                 this.popup.addEventListener("mouseleave", function () { return _this.positionPopup(true); });
             }
-            this.createHeader();
-            this.createContentContainer();
+            this.createHeader(this.popup);
+            this.createContentContainer(this.popup);
         }
         else {
             this.populateContentContainer(true);
         }
     };
-    DatePicker.prototype.createHeader = function () {
-        var header = this.createAndAppend(this.popup, "div", "neo-datepicker-header");
+    DatePicker.prototype.createHeader = function (parent) {
+        var header = this.createAndAppend(parent, "div", "neo-datepicker-header");
         header.addEventListener("mousedown", function (e) { return e.preventDefault(); });
         this.prevButton = this.createAndAppend(header, "button", "left-button");
         this.prevButton.type = "button";
@@ -258,7 +264,7 @@ var DatePicker = /** @class */ (function () {
         this.nextButton.tabIndex = -1;
         this.nextButton.addEventListener("mousedown", this.nextClick.bind(this));
     };
-    DatePicker.prototype.createHeaderLabel = function () {
+    DatePicker.prototype.createHeaderLabel = function (displayImmediately) {
         this.currentHeaderLabel = this.createAndAppend(this.headerContainer, "div", "header-text");
         if (this.currentViewType == ViewType.Days) {
             this.currentHeaderLabel.innerText = DateUtils.format(this.currentViewDate, "MMMM yyyy");
@@ -273,10 +279,15 @@ var DatePicker = /** @class */ (function () {
             this.currentHeaderLabel.className += " selectable";
         }
         this.headerAnimationHelper.addChild(this.currentHeaderLabel, false);
-        this.headerAnimationHelper.fade();
+        if (displayImmediately) {
+            this.headerAnimationHelper.replace();
+        }
+        else {
+            this.headerAnimationHelper.fade();
+        }
     };
-    DatePicker.prototype.createContentContainer = function () {
-        this.contentContainer = this.createAndAppend(this.popup, "div", "neo-datepicker-content");
+    DatePicker.prototype.createContentContainer = function (parent) {
+        this.contentContainer = this.createAndAppend(parent, "div", "neo-datepicker-content");
         this.contentContainer.addEventListener("mousedown", this.contentClick.bind(this));
         this.contentAnimationHelper = new AnimationHelper(this.contentContainer, DatePicker.AnimationClassName);
         this.populateContentContainer(!!this.options.alwaysShow);
@@ -298,7 +309,7 @@ var DatePicker = /** @class */ (function () {
                 this.currentViewDate.setFullYear(this.currentViewDate.getFullYear() - this.options.yearsBeforeInYearView);
             this.createYearsView();
         }
-        this.createHeaderLabel();
+        this.createHeaderLabel(displayImmediately);
         this.contentAnimationHelper.addChild(this.currentContentTable, true);
         if (displayImmediately) {
             this.contentAnimationHelper.replace();
@@ -412,12 +423,12 @@ var DatePicker = /** @class */ (function () {
     };
     DatePicker.prototype.dayClicked = function (datePartsString) {
         var dateParts = datePartsString.split(",");
-        this.setBindValue(new Date(parseInt(dateParts[0]), parseInt(dateParts[1]), parseInt(dateParts[2])), { preserveTime: true, close: true });
+        this.setBindValue(new Date(parseInt(dateParts[0]), parseInt(dateParts[1]), parseInt(dateParts[2])), { preserveTime: true, close: true, forceDraw: this.options.alwaysShow });
     };
     DatePicker.prototype.monthClicked = function (monthString) {
         this.currentViewDate.setMonth(parseInt(monthString));
         if (this.options.monthView) {
-            this.setBindValue(this.currentViewDate, { preserveTime: true, close: true });
+            this.setBindValue(this.currentViewDate, { preserveTime: true, close: true, forceDraw: this.options.alwaysShow });
         }
         else {
             this.currentViewType = ViewType.Days;
@@ -428,7 +439,7 @@ var DatePicker = /** @class */ (function () {
     DatePicker.prototype.yearClicked = function (yearString) {
         this.currentViewDate.setFullYear(parseInt(yearString));
         if (this.options.yearView) {
-            this.setBindValue(this.currentViewDate, { preserveTime: true, close: true });
+            this.setBindValue(this.currentViewDate, { preserveTime: true, close: true, forceDraw: this.options.alwaysShow });
         }
         else {
             this.currentViewType = ViewType.Months;

package/dist/Components/PositionHelper.d.ts

@@ -1,11 +1,48 @@
+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;
+    /**
+     * Used internally by neo. Use `checkScreenBounds` instead of this method.
+     */
+    static positionElement(popup: HTMLElement, position: IRelativePosition, fromBottom?: boolean): 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.
+ * If popupElement has a display of 'absolute', then normal positioning is performed.
+ */
+export declare class FixedPositionHelper implements IDisposable {
+    private anchorElement;
+    private popupElement;
+    private isFixed;
+    private topOffset;
+    private positionInfo;
+    constructor(anchorElement: HTMLElement, popupElement: HTMLElement);
+    positionPopup(alignRight?: boolean, hAlign?: "left" | "center" | "right", fromBottom?: boolean): void;
+    private positionFixedPopup;
+    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,57 @@ 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);
+        this.positionElement(popup, position, fromBottom);
+    };
+    /**
+     * Used internally by neo. Use `checkScreenBounds` instead of this method.
+     */
+    PositionHelper.positionElement = function (popup, position, fromBottom) {
+        if (fromBottom === void 0) { fromBottom = true; }
+        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 +70,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 +84,65 @@ 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.
+ * If popupElement has a display of 'absolute', then normal positioning is performed.
+ */
+var FixedPositionHelper = /** @class */ (function () {
+    function FixedPositionHelper(anchorElement, popupElement) {
+        this.anchorElement = anchorElement;
+        this.popupElement = popupElement;
+        this.isFixed = false;
+        this.topOffset = 0;
+        if (window.getComputedStyle(popupElement).position === "fixed") {
+            this.isFixed = true;
+            window.addEventListener("scroll", this.positionFixedPopup.bind(this), { capture: true });
+        }
+    }
+    FixedPositionHelper.prototype.positionPopup = function (alignRight, hAlign, fromBottom) {
+        if (alignRight === void 0) { alignRight = false; }
+        if (fromBottom === void 0) { fromBottom = true; }
+        this.positionInfo = PositionHelper.getRelativePosition(this.anchorElement, this.popupElement, alignRight, hAlign);
+        if (this.isFixed) {
+            // Fixed, need to add scroll listener.
+            if (this.positionInfo.onTop) {
+                var style = window.getComputedStyle(this.popupElement);
+                var marginHeight = parseFloat(style.marginBottom) + parseFloat(style.marginTop);
+                this.topOffset = -(this.positionInfo.popupHeight + marginHeight);
+            }
+            else {
+                this.topOffset = this.positionInfo.anchorHeight;
+            }
+            this.positionFixedPopup();
+        }
+        else {
+            // Simple positioning relative to container.
+            PositionHelper.positionElement(this.popupElement, this.positionInfo, fromBottom);
+        }
+    };
+    FixedPositionHelper.prototype.positionFixedPopup = function () {
+        var rect = this.anchorElement.getBoundingClientRect();
+        this.popupElement.style.top = (Math.floor(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 () {
+        if (this.isFixed) {
+            window.removeEventListener("scroll", this.positionFixedPopup);
+        }
+    };
+    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/Deserialiser.js

@@ -227,7 +227,7 @@ var Deserialiser = /** @class */ (function () {
                 from.entityIdentifier && from.entityIdentifier.indexOf('000000000000') === -1) {
                 toModel.entityIdentifier = from.entityIdentifier;
             }
-            if (!this.options.isMap) {
+            if (!this.options.isMap && to.isSelfDirty !== undefined) {
                 if (!from.trackingState) {
                     toModel.isSelfDirty = false;
                     toModel.isNew = false;

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/Model/ObservableValue.d.ts

@@ -7,3 +7,11 @@ export declare class ObservableValue<T> implements IObservableValue<T> {
     constructor(initialValue: T);
     get peek(): T;
 }
+/**
+ * Creates a wrapper around a value with a getter and setter for reading and writing the value.
+ */
+export declare class ValueWrapper<T> implements IObservableValue<T> {
+    constructor(getter: () => T, setter: (value: T) => void);
+    value: T;
+    get peek(): T;
+}

package/dist/Model/ObservableValue.js

@@ -24,3 +24,20 @@ var ObservableValue = /** @class */ (function () {
     return ObservableValue;
 }());
 export { ObservableValue };
+/**
+ * Creates a wrapper around a value with a getter and setter for reading and writing the value.
+ */
+var ValueWrapper = /** @class */ (function () {
+    function ValueWrapper(getter, setter) {
+        Object.defineProperty(this, "value", { get: getter, set: setter });
+    }
+    Object.defineProperty(ValueWrapper.prototype, "peek", {
+        get: function () {
+            return this.value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return ValueWrapper;
+}());
+export { ValueWrapper };

package/dist/Model/index.d.ts

@@ -2,7 +2,7 @@ export { IBindableBase, IModelBase, NeoModelConstructor, PlainObject, PlainTrack
 export { ILookupBase } from './LookupBase';
 export { IPropertyInstance, PropertyAccessor } from './PropertyInstance';
 import PropertyInfo from './PropertyInfo';
-export { IObservableValue, ObservableValue } from './ObservableValue';
+export { IObservableValue, ObservableValue, ValueWrapper } from './ObservableValue';
 export { ObservableProperty } from './ObservableProperty';
 export { ISelectedItem } from './Misc';
 export { ModelFieldInfo, IModelFieldInfoContainer } from './ModelFieldInfo';

package/dist/Model/index.js

@@ -1,6 +1,6 @@
 export { PropertyAccessor } from './PropertyInstance';
 import PropertyInfo from './PropertyInfo';
-export { ObservableValue } from './ObservableValue';
+export { ObservableValue, ValueWrapper } from './ObservableValue';
 export { ObservableProperty } from './ObservableProperty';
 export { ModelFieldInfo } from './ModelFieldInfo';
 import * as GraphTraverser from './ModelGraphTraverser';

package/package.json

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