uicore-ts 1.1.148 → 1.1.152

package/compiledScripts/UIDialogView.d.ts

@@ -7,6 +7,8 @@ export declare class UIDialogView<ViewType extends UIView = UIView> extends UIVi
     _zIndex: number;
     isVisible: boolean;
     dismissesOnTapOutside: boolean;
+    static _activeDialogCount: number;
+    _fillsViewport: boolean;
     constructor(elementID?: string, viewHTMLElement?: HTMLElement);
     didDetectTapOutside(sender: UIView, event: Event): void;
     set zIndex(zIndex: number);

package/compiledScripts/UIDialogView.js

@@ -28,7 +28,7 @@ var import_UINativeScrollView = require("./UINativeScrollView");
 var import_UIObject = require("./UIObject");
 var import_UIScrollView = require("./UIScrollView");
 var import_UIView = require("./UIView");
-class UIDialogView extends import_UIView.UIView {
+const _UIDialogView = class extends import_UIView.UIView {
   constructor(elementID, viewHTMLElement) {
     super(elementID, viewHTMLElement);
     this._isAUIDialogView = import_UIObject.YES;
@@ -37,6 +37,7 @@ class UIDialogView extends import_UIView.UIView {
     this._zIndex = 100;
     this.isVisible = import_UIObject.NO;
     this.dismissesOnTapOutside = import_UIObject.YES;
+    this._fillsViewport = import_UIObject.NO;
     this.addTargetForControlEvent(
       import_UIView.UIView.controlEvent.PointerTap,
       function(sender, event) {
@@ -81,9 +82,16 @@ class UIDialogView extends import_UIView.UIView {
     this.style.opacity = "0";
   }
   showInView(containerView, animated) {
+    this._fillsViewport = containerView.rootView == containerView;
     animated = animated && !import_ClientCheckers.IS_FIREFOX;
     this._appearedAnimated = animated;
     this.willAppear(animated);
+    if (this._fillsViewport) {
+      _UIDialogView._activeDialogCount++;
+      if (_UIDialogView._activeDialogCount >= 1) {
+        document.body.style.overflow = "hidden";
+      }
+    }
     containerView.addSubview(this);
     this.view.setNeedsLayoutUpToRootView();
     if (animated) {
@@ -113,6 +121,14 @@ class UIDialogView extends import_UIView.UIView {
     if (animated == void 0) {
       animated = this._appearedAnimated;
     }
+    const unlockScroll = () => {
+      if (this._fillsViewport) {
+        _UIDialogView._activeDialogCount = Math.max(0, _UIDialogView._activeDialogCount - 1);
+        if (_UIDialogView._activeDialogCount === 0) {
+          document.body.style.overflow = "";
+        }
+      }
+    };
     if (animated) {
       import_UIView.UIView.animateViewOrViewsWithDurationDelayAndFunction(
         this,
@@ -125,11 +141,13 @@ class UIDialogView extends import_UIView.UIView {
         () => {
           if (this.isVisible == import_UIObject.NO) {
             this.removeFromSuperview();
+            unlockScroll();
           }
         }
       );
     } else {
       this.removeFromSuperview();
+      unlockScroll();
     }
     this.isVisible = import_UIObject.NO;
   }
@@ -140,31 +158,37 @@ class UIDialogView extends import_UIView.UIView {
     }
   }
   layoutSubviews() {
-    var _a, _b;
+    var _a, _b, _c, _d;
     if (!(0, import_UIObject.IS)(this.view)) {
       return;
     }
-    this.setPosition(0, 0, 0, 0, 0, "100%");
-    this.setPosition(
-      0,
-      0,
-      0,
-      0,
-      (0, import_UIObject.FIRST)(
-        (0, import_UIObject.IF)((_a = this.superview) == null ? void 0 : _a.isKindOfClass(import_UINativeScrollView.UINativeScrollView))(() => {
-          var _a2, _b2;
-          return (_b2 = (_a2 = this.superview) == null ? void 0 : _a2.scrollSize.height) != null ? _b2 : 0;
-        }).ELSE_IF((_b = this.superview) == null ? void 0 : _b.isKindOfClass(import_UIScrollView.UIScrollView))(() => {
-          var _a2, _b2;
-          return (_b2 = (_a2 = this.superview) == null ? void 0 : _a2.scrollSize.height) != null ? _b2 : 0;
-        }).ELSE(() => {
-          var _a2, _b2;
-          return (_b2 = (_a2 = this.superview) == null ? void 0 : _a2.frame.height) != null ? _b2 : 0;
-        }),
-        import_UIView.UIView.pageHeight
-      ) / import_UIView.UIView.pageScale,
-      "100%"
-    );
+    if (this._fillsViewport) {
+      const containerRect = (_b = (_a = this.superview) == null ? void 0 : _a.viewHTMLElement) == null ? void 0 : _b.getBoundingClientRect();
+      const topOffset = containerRect ? -containerRect.top / import_UIView.UIView.pageScale : 0;
+      this.setPosition(0, 0, 0, topOffset, window.innerHeight / import_UIView.UIView.pageScale, "100%");
+    } else {
+      this.setPosition(0, 0, 0, 0, 0, "100%");
+      this.setPosition(
+        0,
+        0,
+        0,
+        0,
+        (0, import_UIObject.FIRST)(
+          (0, import_UIObject.IF)((_c = this.superview) == null ? void 0 : _c.isKindOfClass(import_UINativeScrollView.UINativeScrollView))(() => {
+            var _a2, _b2;
+            return (_b2 = (_a2 = this.superview) == null ? void 0 : _a2.scrollSize.height) != null ? _b2 : 0;
+          }).ELSE_IF((_d = this.superview) == null ? void 0 : _d.isKindOfClass(import_UIScrollView.UIScrollView))(() => {
+            var _a2, _b2;
+            return (_b2 = (_a2 = this.superview) == null ? void 0 : _a2.scrollSize.height) != null ? _b2 : 0;
+          }).ELSE(() => {
+            var _a2, _b2;
+            return (_b2 = (_a2 = this.superview) == null ? void 0 : _a2.frame.height) != null ? _b2 : 0;
+          }),
+          import_UIView.UIView.pageHeight
+        ) / import_UIView.UIView.pageScale,
+        "100%"
+      );
+    }
     const bounds = this.bounds;
     const margin = 20;
     this.view.style.position = "relative";
@@ -172,7 +196,9 @@ class UIDialogView extends import_UIView.UIView {
     this.view.setNeedsLayout();
     super.layoutSubviews();
   }
-}
+};
+let UIDialogView = _UIDialogView;
+UIDialogView._activeDialogCount = 0;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   UIDialogView

package/compiledScripts/UIDialogView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../scripts/UIDialogView.ts"],
-  "sourcesContent": ["import { IS_FIREFOX } from \"./ClientCheckers\"\nimport { UIColor } from \"./UIColor\"\nimport { UICore } from \"./UICore\"\nimport { UINativeScrollView } from \"./UINativeScrollView\"\nimport { FIRST, IF, IS, nil, NO, YES } from \"./UIObject\"\nimport { UIScrollView } from \"./UIScrollView\"\nimport { UIView, UIViewBroadcastEvent } from \"./UIView\"\n\n\nexport class UIDialogView<ViewType extends UIView = UIView> extends UIView {\n    \n    _isAUIDialogView = YES\n    _view: ViewType = new UIView() as any\n    _appearedAnimated?: boolean\n    animationDuration: number = 0.25\n    _zIndex: number = 100\n    isVisible: boolean = NO\n    dismissesOnTapOutside = YES\n    \n    constructor(elementID?: string, viewHTMLElement?: HTMLElement) {\n        \n        \n        super(elementID, viewHTMLElement)\n        \n        this.addTargetForControlEvent(\n            UIView.controlEvent.PointerTap,\n            function (this: UIDialogView, sender: UIView, event: Event) {\n                \n                this.didDetectTapOutside(sender, event)\n                \n            }.bind(this)\n        )\n        \n        this.backgroundColor = UIColor.colorWithRGBA(0, 10, 25).colorWithAlpha(0.75) //CBColor.primaryContentColor.colorWithAlpha(0.75)\n        \n        this.zIndex = this._zIndex\n        \n    }\n    \n    \n    didDetectTapOutside(sender: UIView, event: Event) {\n        \n        if (event.target == this.viewHTMLElement && this.dismissesOnTapOutside) {\n            this.dismiss(this._appearedAnimated)\n        }\n        \n    }\n    \n    \n    set zIndex(zIndex: number) {\n        \n        this._zIndex = zIndex\n        this.style.zIndex = \"\" + zIndex\n        \n    }\n    \n    get zIndex() {\n        \n        return this._zIndex\n        \n    }\n    \n    \n    set view(view: ViewType) {\n        \n        this._view?.removeFromSuperview()\n        \n        this._view = view\n        \n        this.addSubview(view)\n        \n    }\n    \n    \n    get view(): ViewType {\n        \n        return this._view\n        \n    }\n    \n    \n    override willAppear(animated: boolean = NO) {\n        \n        if (animated) {\n            \n            this.style.opacity = \"0\"\n            \n        }\n        \n        this.style.height = \"\"\n        \n        this._frame = nil\n        \n    }\n    \n    \n    animateAppearing() {\n        \n        this.style.opacity = \"1\"\n        \n    }\n    \n    animateDisappearing() {\n        \n        this.style.opacity = \"0\"\n        \n    }\n    \n    \n    showInView(containerView: UIView, animated: boolean) {\n        \n        \n        animated = (animated && !IS_FIREFOX)\n        \n        this._appearedAnimated = animated\n        \n        this.willAppear(animated)\n        \n        \n        containerView.addSubview(this)\n        this.view.setNeedsLayoutUpToRootView()\n        \n        if (animated) {\n            \n            UIView.layoutViewsIfNeeded()\n            this.layoutSubviews()\n            \n            UIView.animateViewOrViewsWithDurationDelayAndFunction(\n                this,\n                this.animationDuration,\n                0,\n                undefined,\n                () => this.animateAppearing(),\n                nil\n            )\n            \n            \n        }\n        else {\n            \n            this.setNeedsLayout()\n            \n        }\n        \n        this.isVisible = YES\n        \n    }\n    \n    \n    showInRootView(animated: boolean) {\n        \n        this.showInView(UICore.main.rootViewController.view, animated)\n        \n    }\n    \n    \n    dismiss(animated?: boolean) {\n        \n        if (!this.isVisible) {\n            return\n        }\n        \n        animated = (animated && !IS_FIREFOX)\n        \n        if (animated == undefined) {\n            \n            animated = this._appearedAnimated\n            \n        }\n        \n        if (animated) {\n            \n            UIView.animateViewOrViewsWithDurationDelayAndFunction(\n                this,\n                this.animationDuration,\n                0,\n                undefined,\n                (() => {\n                    \n                    this.animateDisappearing()\n                    \n                }).bind(this),\n                () => {\n                    \n                    if (this.isVisible == NO) {\n                        \n                        this.removeFromSuperview()\n                        \n                    }\n                    \n                }\n            )\n            \n        }\n        else {\n            \n            this.removeFromSuperview()\n            \n        }\n        \n        this.isVisible = NO\n        \n    }\n    \n    \n    override didReceiveBroadcastEvent(event: UIViewBroadcastEvent) {\n        \n        super.didReceiveBroadcastEvent(event)\n        \n        if (event.name == UICore.broadcastEventName.WindowDidResize) {\n            \n            this.setNeedsLayout()\n            \n        }\n        \n    }\n    \n    \n    override layoutSubviews() {\n        \n        \n        if (!IS(this.view)) {\n            \n            return\n            \n        }\n        \n        //this.frame = this.superview.bounds;\n        \n        this.setPosition(0, 0, 0, 0, 0, \"100%\")\n        this.setPosition(\n            0,\n            0,\n            0,\n            0,\n            FIRST(\n                IF(this.superview?.isKindOfClass(UINativeScrollView))(() => this.superview?.scrollSize.height ?? 0)\n                    .ELSE_IF(this.superview?.isKindOfClass(UIScrollView))(() => this.superview?.scrollSize.height ?? 0)\n                    .ELSE(() => this.superview?.frame.height ?? 0),\n                UIView.pageHeight\n            ) / UIView.pageScale,\n            \"100%\"\n        )\n        \n        const bounds = this.bounds\n        \n        const margin = 20\n        \n        //this.view.centerInContainer();\n        \n        this.view.style.position = \"relative\"\n        \n        this.view.style.zIndex = \"\" + this.zIndex\n        \n        this.view.setNeedsLayout()\n        \n        // this.view.style.maxHeight = \"\" + (bounds.height - margin * 2).integerValue + \"px\";\n        // this.view.style.maxWidth = \"\" + (bounds.width - margin * 2).integerValue + \"px\";\n        \n        \n        // var viewIntrinsicRectangle = this.view.intrinsicContentSize();\n        // this.view.frame = new UIRectangle((bounds.width - viewIntrinsicRectangle.width)*0.5,  )\n        \n        super.layoutSubviews()\n        \n    }\n    \n    \n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { IS_FIREFOX } from \"./ClientCheckers\"\nimport { UIColor } from \"./UIColor\"\nimport { UICore } from \"./UICore\"\nimport { UINativeScrollView } from \"./UINativeScrollView\"\nimport { FIRST, IF, IS, nil, NO, YES } from \"./UIObject\"\nimport { UIScrollView } from \"./UIScrollView\"\nimport { UIView, UIViewBroadcastEvent } from \"./UIView\"\n\n\nexport class UIDialogView<ViewType extends UIView = UIView> extends UIView {\n\n    _isAUIDialogView = YES\n    _view: ViewType = new UIView() as any\n    _appearedAnimated?: boolean\n    animationDuration: number = 0.25\n    _zIndex: number = 100\n    isVisible: boolean = NO\n    dismissesOnTapOutside = YES\n\n    static _activeDialogCount = 0\n    _fillsViewport = NO\n    \n    constructor(elementID?: string, viewHTMLElement?: HTMLElement) {\n        \n        \n        super(elementID, viewHTMLElement)\n        \n        this.addTargetForControlEvent(\n            UIView.controlEvent.PointerTap,\n            function (this: UIDialogView, sender: UIView, event: Event) {\n                \n                this.didDetectTapOutside(sender, event)\n                \n            }.bind(this)\n        )\n        \n        this.backgroundColor = UIColor.colorWithRGBA(0, 10, 25).colorWithAlpha(0.75) //CBColor.primaryContentColor.colorWithAlpha(0.75)\n        \n        this.zIndex = this._zIndex\n        \n    }\n    \n    \n    didDetectTapOutside(sender: UIView, event: Event) {\n        \n        if (event.target == this.viewHTMLElement && this.dismissesOnTapOutside) {\n            this.dismiss(this._appearedAnimated)\n        }\n        \n    }\n    \n    \n    set zIndex(zIndex: number) {\n        \n        this._zIndex = zIndex\n        this.style.zIndex = \"\" + zIndex\n        \n    }\n    \n    get zIndex() {\n        \n        return this._zIndex\n        \n    }\n    \n    \n    set view(view: ViewType) {\n        \n        this._view?.removeFromSuperview()\n        \n        this._view = view\n        \n        this.addSubview(view)\n        \n    }\n    \n    \n    get view(): ViewType {\n        \n        return this._view\n        \n    }\n    \n    \n    override willAppear(animated: boolean = NO) {\n        \n        if (animated) {\n            \n            this.style.opacity = \"0\"\n            \n        }\n        \n        this.style.height = \"\"\n        \n        this._frame = nil\n        \n    }\n    \n    \n    animateAppearing() {\n        \n        this.style.opacity = \"1\"\n        \n    }\n    \n    animateDisappearing() {\n        \n        this.style.opacity = \"0\"\n        \n    }\n    \n    \n    showInView(containerView: UIView, animated: boolean) {\n        \n        this._fillsViewport = containerView.rootView == containerView\n        animated = (animated && !IS_FIREFOX)\n        \n        this._appearedAnimated = animated\n        \n        this.willAppear(animated)\n        \n        \n        if (this._fillsViewport) {\n            UIDialogView._activeDialogCount++\n            if (UIDialogView._activeDialogCount >= 1) {\n                document.body.style.overflow = \"hidden\"\n            }\n        }\n\n        containerView.addSubview(this)\n        this.view.setNeedsLayoutUpToRootView()\n        \n        if (animated) {\n            \n            UIView.layoutViewsIfNeeded()\n            this.layoutSubviews()\n            \n            UIView.animateViewOrViewsWithDurationDelayAndFunction(\n                this,\n                this.animationDuration,\n                0,\n                undefined,\n                () => this.animateAppearing(),\n                nil\n            )\n            \n            \n        }\n        else {\n            \n            this.setNeedsLayout()\n            \n        }\n        \n        this.isVisible = YES\n        \n    }\n    \n    \n    showInRootView(animated: boolean) {\n        \n        this.showInView(UICore.main.rootViewController.view, animated)\n\n    }\n    \n    \n    dismiss(animated?: boolean) {\n        \n        if (!this.isVisible) {\n            return\n        }\n        \n        animated = (animated && !IS_FIREFOX)\n        \n        if (animated == undefined) {\n            \n            animated = this._appearedAnimated\n            \n        }\n        \n        const unlockScroll = () => {\n            if (this._fillsViewport) {\n                UIDialogView._activeDialogCount = Math.max(0, UIDialogView._activeDialogCount - 1)\n                if (UIDialogView._activeDialogCount === 0) {\n                    document.body.style.overflow = \"\"\n                }\n            }\n        }\n\n        if (animated) {\n\n            UIView.animateViewOrViewsWithDurationDelayAndFunction(\n                this,\n                this.animationDuration,\n                0,\n                undefined,\n                (() => {\n\n                    this.animateDisappearing()\n\n                }).bind(this),\n                () => {\n\n                    if (this.isVisible == NO) {\n\n                        this.removeFromSuperview()\n                        unlockScroll()\n\n                    }\n\n                }\n            )\n\n        }\n        else {\n\n            this.removeFromSuperview()\n            unlockScroll()\n\n        }\n        \n        this.isVisible = NO\n        \n    }\n    \n    \n    override didReceiveBroadcastEvent(event: UIViewBroadcastEvent) {\n        \n        super.didReceiveBroadcastEvent(event)\n        \n        if (event.name == UICore.broadcastEventName.WindowDidResize) {\n            \n            this.setNeedsLayout()\n            \n        }\n        \n    }\n    \n    \n    override layoutSubviews() {\n        \n        \n        if (!IS(this.view)) {\n            \n            return\n            \n        }\n        \n        //this.frame = this.superview.bounds;\n        \n        if (this._fillsViewport) {\n            const containerRect = this.superview?.viewHTMLElement?.getBoundingClientRect()\n            const topOffset = containerRect ? -containerRect.top / UIView.pageScale : 0\n            this.setPosition(0, 0, 0, topOffset, window.innerHeight / UIView.pageScale, \"100%\")\n        }\n        else {\n            this.setPosition(0, 0, 0, 0, 0, \"100%\")\n            this.setPosition(\n                0,\n                0,\n                0,\n                0,\n                FIRST(\n                    IF(this.superview?.isKindOfClass(UINativeScrollView))(() => this.superview?.scrollSize.height ?? 0)\n                        .ELSE_IF(this.superview?.isKindOfClass(UIScrollView))(() => this.superview?.scrollSize.height ?? 0)\n                        .ELSE(() => this.superview?.frame.height ?? 0),\n                    UIView.pageHeight\n                ) / UIView.pageScale,\n                \"100%\"\n            )\n        }\n        \n        const bounds = this.bounds\n        \n        const margin = 20\n        \n        //this.view.centerInContainer();\n        \n        this.view.style.position = \"relative\"\n        \n        this.view.style.zIndex = \"\" + this.zIndex\n        \n        this.view.setNeedsLayout()\n        \n        // this.view.style.maxHeight = \"\" + (bounds.height - margin * 2).integerValue + \"px\";\n        // this.view.style.maxWidth = \"\" + (bounds.width - margin * 2).integerValue + \"px\";\n        \n        \n        // var viewIntrinsicRectangle = this.view.intrinsicContentSize();\n        // this.view.frame = new UIRectangle((bounds.width - viewIntrinsicRectangle.width)*0.5,  )\n        \n        super.layoutSubviews()\n        \n    }\n    \n    \n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAA2B;AAC3B,qBAAwB;AACxB,oBAAuB;AACvB,gCAAmC;AACnC,sBAA4C;AAC5C,0BAA6B;AAC7B,oBAA6C;AAGtC,MAAM,gBAAN,cAA6D,qBAAO;AAAA,EAavE,YAAY,WAAoB,iBAA+B;AAG3D,UAAM,WAAW,eAAe;AAdpC,4BAAmB;AACnB,iBAAkB,IAAI,qBAAO;AAE7B,6BAA4B;AAC5B,mBAAkB;AAClB,qBAAqB;AACrB,iCAAwB;AAGxB,0BAAiB;AAOb,SAAK;AAAA,MACD,qBAAO,aAAa;AAAA,MACpB,SAA8B,QAAgB,OAAc;AAExD,aAAK,oBAAoB,QAAQ,KAAK;AAAA,MAE1C,EAAE,KAAK,IAAI;AAAA,IACf;AAEA,SAAK,kBAAkB,uBAAQ,cAAc,GAAG,IAAI,EAAE,EAAE,eAAe,IAAI;AAE3E,SAAK,SAAS,KAAK;AAAA,EAEvB;AAAA,EAGA,oBAAoB,QAAgB,OAAc;AAE9C,QAAI,MAAM,UAAU,KAAK,mBAAmB,KAAK,uBAAuB;AACpE,WAAK,QAAQ,KAAK,iBAAiB;AAAA,IACvC;AAAA,EAEJ;AAAA,EAGA,IAAI,OAAO,QAAgB;AAEvB,SAAK,UAAU;AACf,SAAK,MAAM,SAAS,KAAK;AAAA,EAE7B;AAAA,EAEA,IAAI,SAAS;AAET,WAAO,KAAK;AAAA,EAEhB;AAAA,EAGA,IAAI,KAAK,MAAgB;AAlE7B;AAoEQ,eAAK,UAAL,mBAAY;AAEZ,SAAK,QAAQ;AAEb,SAAK,WAAW,IAAI;AAAA,EAExB;AAAA,EAGA,IAAI,OAAiB;AAEjB,WAAO,KAAK;AAAA,EAEhB;AAAA,EAGS,WAAW,WAAoB,oBAAI;AAExC,QAAI,UAAU;AAEV,WAAK,MAAM,UAAU;AAAA,IAEzB;AAEA,SAAK,MAAM,SAAS;AAEpB,SAAK,SAAS;AAAA,EAElB;AAAA,EAGA,mBAAmB;AAEf,SAAK,MAAM,UAAU;AAAA,EAEzB;AAAA,EAEA,sBAAsB;AAElB,SAAK,MAAM,UAAU;AAAA,EAEzB;AAAA,EAGA,WAAW,eAAuB,UAAmB;AAEjD,SAAK,iBAAiB,cAAc,YAAY;AAChD,eAAY,YAAY,CAAC;AAEzB,SAAK,oBAAoB;AAEzB,SAAK,WAAW,QAAQ;AAGxB,QAAI,KAAK,gBAAgB;AACrB,oBAAa;AACb,UAAI,cAAa,sBAAsB,GAAG;AACtC,iBAAS,KAAK,MAAM,WAAW;AAAA,MACnC;AAAA,IACJ;AAEA,kBAAc,WAAW,IAAI;AAC7B,SAAK,KAAK,2BAA2B;AAErC,QAAI,UAAU;AAEV,2BAAO,oBAAoB;AAC3B,WAAK,eAAe;AAEpB,2BAAO;AAAA,QACH;AAAA,QACA,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,MAAM,KAAK,iBAAiB;AAAA,QAC5B;AAAA,MACJ;AAAA,IAGJ,OACK;AAED,WAAK,eAAe;AAAA,IAExB;AAEA,SAAK,YAAY;AAAA,EAErB;AAAA,EAGA,eAAe,UAAmB;AAE9B,SAAK,WAAW,qBAAO,KAAK,mBAAmB,MAAM,QAAQ;AAAA,EAEjE;AAAA,EAGA,QAAQ,UAAoB;AAExB,QAAI,CAAC,KAAK,WAAW;AACjB;AAAA,IACJ;AAEA,eAAY,YAAY,CAAC;AAEzB,QAAI,YAAY,QAAW;AAEvB,iBAAW,KAAK;AAAA,IAEpB;AAEA,UAAM,eAAe,MAAM;AACvB,UAAI,KAAK,gBAAgB;AACrB,sBAAa,qBAAqB,KAAK,IAAI,GAAG,cAAa,qBAAqB,CAAC;AACjF,YAAI,cAAa,uBAAuB,GAAG;AACvC,mBAAS,KAAK,MAAM,WAAW;AAAA,QACnC;AAAA,MACJ;AAAA,IACJ;AAEA,QAAI,UAAU;AAEV,2BAAO;AAAA,QACH;AAAA,QACA,KAAK;AAAA,QACL;AAAA,QACA;AAAA,SACC,MAAM;AAEH,eAAK,oBAAoB;AAAA,QAE7B,GAAG,KAAK,IAAI;AAAA,QACZ,MAAM;AAEF,cAAI,KAAK,aAAa,oBAAI;AAEtB,iBAAK,oBAAoB;AACzB,yBAAa;AAAA,UAEjB;AAAA,QAEJ;AAAA,MACJ;AAAA,IAEJ,OACK;AAED,WAAK,oBAAoB;AACzB,mBAAa;AAAA,IAEjB;AAEA,SAAK,YAAY;AAAA,EAErB;AAAA,EAGS,yBAAyB,OAA6B;AAE3D,UAAM,yBAAyB,KAAK;AAEpC,QAAI,MAAM,QAAQ,qBAAO,mBAAmB,iBAAiB;AAEzD,WAAK,eAAe;AAAA,IAExB;AAAA,EAEJ;AAAA,EAGS,iBAAiB;AA/O9B;AAkPQ,QAAI,KAAC,oBAAG,KAAK,IAAI,GAAG;AAEhB;AAAA,IAEJ;AAIA,QAAI,KAAK,gBAAgB;AACrB,YAAM,iBAAgB,gBAAK,cAAL,mBAAgB,oBAAhB,mBAAiC;AACvD,YAAM,YAAY,gBAAgB,CAAC,cAAc,MAAM,qBAAO,YAAY;AAC1E,WAAK,YAAY,GAAG,GAAG,GAAG,WAAW,OAAO,cAAc,qBAAO,WAAW,MAAM;AAAA,IACtF,OACK;AACD,WAAK,YAAY,GAAG,GAAG,GAAG,GAAG,GAAG,MAAM;AACtC,WAAK;AAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,YACA;AAAA,cACI,qBAAG,UAAK,cAAL,mBAAgB,cAAc,6CAAmB,EAAE,MAAG;AAvQ7E,gBAAAA,KAAAC;AAuQgF,oBAAAA,OAAAD,MAAA,KAAK,cAAL,gBAAAA,IAAgB,WAAW,WAA3B,OAAAC,MAAqC;AAAA,WAAC,EAC7F,SAAQ,UAAK,cAAL,mBAAgB,cAAc,iCAAa,EAAE,MAAG;AAxQjF,gBAAAD,KAAAC;AAwQoF,oBAAAA,OAAAD,MAAA,KAAK,cAAL,gBAAAA,IAAgB,WAAW,WAA3B,OAAAC,MAAqC;AAAA,WAAC,EACjG,KAAK,MAAG;AAzQjC,gBAAAD,KAAAC;AAyQoC,oBAAAA,OAAAD,MAAA,KAAK,cAAL,gBAAAA,IAAgB,MAAM,WAAtB,OAAAC,MAAgC;AAAA,WAAC;AAAA,UACjD,qBAAO;AAAA,QACX,IAAI,qBAAO;AAAA,QACX;AAAA,MACJ;AAAA,IACJ;AAEA,UAAM,SAAS,KAAK;AAEpB,UAAM,SAAS;AAIf,SAAK,KAAK,MAAM,WAAW;AAE3B,SAAK,KAAK,MAAM,SAAS,KAAK,KAAK;AAEnC,SAAK,KAAK,eAAe;AASzB,UAAM,eAAe;AAAA,EAEzB;AAGJ;AA/RO,IAAM,eAAN;AAAM,aAUF,qBAAqB;",
   "names": ["_a", "_b"]
 }

package/compiledScripts/UITextField.d.ts

@@ -5,6 +5,9 @@ export declare class UITextField extends UITextView {
     _placeholderTextKey?: string;
     _defaultPlaceholderText?: string;
     _viewHTMLElement: HTMLInputElement;
+    private _datalistElement?;
+    private _nativeAutocompleteData;
+    minCharactersForAutocomplete: number;
     constructor(elementID?: string, viewHTMLElement?: null, type?: string | ValueOf<typeof UITextView.type>);
     static controlEvent: {
         readonly PointerDown: "PointerDown";
@@ -43,4 +46,15 @@ export declare class UITextField extends UITextView {
     _setPlaceholderFromKeyIfPossible(): void;
     get isSecure(): boolean;
     set isSecure(secure: boolean);
+    /**
+     * Sets the data for native browser autocomplete using HTML datalist.
+     * Setting an empty array will remove the autocomplete functionality.
+     *
+     * @param data Array of strings to show as autocomplete suggestions
+     */
+    set nativeAutocompleteData(data: string[]);
+    get nativeAutocompleteData(): string[];
+    private updateDatalist;
+    private _updateDatalistVisibility;
+    wasRemovedFromViewTree(): void;
 }

package/compiledScripts/UITextField.js

@@ -29,6 +29,8 @@ var import_UIView = require("./UIView");
 const _UITextField = class extends import_UITextView.UITextView {
   constructor(elementID, viewHTMLElement = null, type = import_UITextView.UITextView.type.textField) {
     super(elementID, type, viewHTMLElement);
+    this._nativeAutocompleteData = [];
+    this.minCharactersForAutocomplete = 0;
     this.textElementView.viewHTMLElement.setAttribute("type", "text");
     this.backgroundColor = import_UIColor.UIColor.whiteColor;
     this.addTargetForControlEvent(
@@ -37,6 +39,7 @@ const _UITextField = class extends import_UITextView.UITextView {
     );
     this.textElementView.viewHTMLElement.oninput = (event) => {
       this.sendControlEventForKey(_UITextField.controlEvent.TextChange, event);
+      this._updateDatalistVisibility();
     };
     this.textElementView.style.webkitUserSelect = "text";
     this.nativeSelectionEnabled = import_UIObject.YES;
@@ -93,6 +96,55 @@ const _UITextField = class extends import_UITextView.UITextView {
     }
     this.textElementView.viewHTMLElement.type = type;
   }
+  set nativeAutocompleteData(data) {
+    this._nativeAutocompleteData = data;
+    this.updateDatalist();
+    this._updateDatalistVisibility();
+  }
+  get nativeAutocompleteData() {
+    return this._nativeAutocompleteData;
+  }
+  updateDatalist() {
+    if (this._nativeAutocompleteData.length === 0) {
+      if (this._datalistElement) {
+        this._datalistElement.remove();
+        this.textElementView.viewHTMLElement.removeAttribute("list");
+        this._datalistElement = void 0;
+      }
+      return;
+    }
+    if (!this._datalistElement) {
+      const datalistId = this.elementID + "_datalist";
+      this._datalistElement = document.createElement("datalist");
+      this._datalistElement.id = datalistId;
+      this.viewHTMLElement.appendChild(this._datalistElement);
+      this.textElementView.viewHTMLElement.setAttribute("list", datalistId);
+    }
+    this._datalistElement.innerHTML = "";
+    this._nativeAutocompleteData.forEach((item) => {
+      const option = document.createElement("option");
+      option.value = item;
+      this._datalistElement.appendChild(option);
+    });
+  }
+  _updateDatalistVisibility() {
+    if (!this._datalistElement || this.minCharactersForAutocomplete === 0) {
+      return;
+    }
+    const shouldShow = this.text.length >= this.minCharactersForAutocomplete;
+    if (shouldShow) {
+      this.textElementView.viewHTMLElement.setAttribute("list", this._datalistElement.id);
+    } else {
+      this.textElementView.viewHTMLElement.removeAttribute("list");
+    }
+  }
+  wasRemovedFromViewTree() {
+    super.wasRemovedFromViewTree();
+    if (this._datalistElement) {
+      this._datalistElement.remove();
+      this._datalistElement = void 0;
+    }
+  }
 };
 let UITextField = _UITextField;
 UITextField.controlEvent = Object.assign({}, import_UITextView.UITextView.controlEvent, {

package/compiledScripts/UITextField.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../scripts/UITextField.ts"],
-  "sourcesContent": ["import { UIColor } from \"./UIColor\"\nimport { UICore } from \"./UICore\"\nimport { nil, NO, ValueOf, YES } from \"./UIObject\"\nimport { UITextView } from \"./UITextView\"\nimport { UIView, UIViewAddControlEventTargetObject, UIViewBroadcastEvent } from \"./UIView\"\n\n\nexport class UITextField extends UITextView {\n    \n    _placeholderTextKey?: string\n    _defaultPlaceholderText?: string\n    \n    override _viewHTMLElement!: HTMLInputElement\n    \n    constructor(\n        elementID?: string,\n        viewHTMLElement = null,\n        type: string | ValueOf<typeof UITextView.type> = UITextView.type.textField\n    ) {\n        \n        super(elementID, type, viewHTMLElement)\n        \n        this.textElementView.viewHTMLElement.setAttribute(\"type\", \"text\")\n        this.backgroundColor = UIColor.whiteColor\n        this.addTargetForControlEvent(\n            UIView.controlEvent.PointerUpInside,\n            (sender, event) => sender.focus()\n        )\n        this.textElementView.viewHTMLElement.oninput = (event) => {\n            this.sendControlEventForKey(UITextField.controlEvent.TextChange, event)\n        }\n        this.textElementView.style.webkitUserSelect = \"text\"\n        this.nativeSelectionEnabled = YES\n        this.pausesPointerEvents = NO\n        this.changesOften = YES\n        \n    }\n    \n    \n    static override controlEvent = Object.assign({}, UITextView.controlEvent, {\n        \n        \"TextChange\": \"TextChange\"\n        \n    })\n    \n    \n    override get controlEventTargetAccumulator(): UIViewAddControlEventTargetObject<typeof UITextField> {\n        return (super.controlEventTargetAccumulator as any)\n    }\n    \n    public override get viewHTMLElement() {\n        return this._viewHTMLElement\n    }\n    \n    \n    public override set text(text: string) {\n        this.textElementView.viewHTMLElement.value = text\n    }\n    \n    public override get text(): string {\n        return this.textElementView.viewHTMLElement.value\n    }\n    \n    \n    public set placeholderText(text: string) {\n        this.textElementView.viewHTMLElement.placeholder = text\n    }\n    \n    public get placeholderText(): string {\n        return this.textElementView.viewHTMLElement.placeholder\n    }\n    \n    \n    setPlaceholderText(key: string, defaultString: string) {\n        \n        this._placeholderTextKey = key\n        this._defaultPlaceholderText = defaultString\n        \n        const languageName = UICore.languageService.currentLanguageKey\n        this.placeholderText = UICore.languageService.stringForKey(key, languageName, defaultString, nil)\n        \n    }\n    \n    \n    override didReceiveBroadcastEvent(event: UIViewBroadcastEvent) {\n        \n        super.didReceiveBroadcastEvent(event)\n        \n        if (event.name == UIView.broadcastEventName.LanguageChanged || event.name ==\n            UIView.broadcastEventName.AddedToViewTree) {\n            \n            this._setPlaceholderFromKeyIfPossible()\n            \n        }\n        \n    }\n    \n    \n    override willMoveToSuperview(superview: UIView) {\n        \n        super.willMoveToSuperview(superview)\n        \n        this._setPlaceholderFromKeyIfPossible()\n        \n    }\n    \n    _setPlaceholderFromKeyIfPossible() {\n        \n        if (this._placeholderTextKey && this._defaultPlaceholderText) {\n            \n            this.setPlaceholderText(this._placeholderTextKey, this._defaultPlaceholderText)\n            \n        }\n        \n    }\n    \n    \n    public get isSecure(): boolean {\n        const result = (this.textElementView.viewHTMLElement.type == \"password\")\n        return result\n    }\n    \n    public set isSecure(secure: boolean) {\n        let type = \"text\"\n        if (secure) {\n            type = \"password\"\n        }\n        this.textElementView.viewHTMLElement.type = type\n    }\n    \n    \n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAwB;AACxB,oBAAuB;AACvB,sBAAsC;AACtC,wBAA2B;AAC3B,oBAAgF;AAGzE,MAAM,eAAN,cAA0B,6BAAW;AAAA,EAOxC,YACI,WACA,kBAAkB,MAClB,OAAiD,6BAAW,KAAK,WACnE;AAEE,UAAM,WAAW,MAAM,eAAe;AAEtC,SAAK,gBAAgB,gBAAgB,aAAa,QAAQ,MAAM;AAChE,SAAK,kBAAkB,uBAAQ;AAC/B,SAAK;AAAA,MACD,qBAAO,aAAa;AAAA,MACpB,CAAC,QAAQ,UAAU,OAAO,MAAM;AAAA,IACpC;AACA,SAAK,gBAAgB,gBAAgB,UAAU,CAAC,UAAU;AACtD,WAAK,uBAAuB,aAAY,aAAa,YAAY,KAAK;AAAA,IAC1E;AACA,SAAK,gBAAgB,MAAM,mBAAmB;AAC9C,SAAK,yBAAyB;AAC9B,SAAK,sBAAsB;AAC3B,SAAK,eAAe;AAAA,EAExB;AAAA,EAUA,IAAa,gCAAuF;AAChG,WAAQ,MAAM;AAAA,EAClB;AAAA,EAEA,IAAoB,kBAAkB;AAClC,WAAO,KAAK;AAAA,EAChB;AAAA,EAGA,IAAoB,KAAK,MAAc;AACnC,SAAK,gBAAgB,gBAAgB,QAAQ;AAAA,EACjD;AAAA,EAEA,IAAoB,OAAe;AAC/B,WAAO,KAAK,gBAAgB,gBAAgB;AAAA,EAChD;AAAA,EAGA,IAAW,gBAAgB,MAAc;AACrC,SAAK,gBAAgB,gBAAgB,cAAc;AAAA,EACvD;AAAA,EAEA,IAAW,kBAA0B;AACjC,WAAO,KAAK,gBAAgB,gBAAgB;AAAA,EAChD;AAAA,EAGA,mBAAmB,KAAa,eAAuB;AAEnD,SAAK,sBAAsB;AAC3B,SAAK,0BAA0B;AAE/B,UAAM,eAAe,qBAAO,gBAAgB;AAC5C,SAAK,kBAAkB,qBAAO,gBAAgB,aAAa,KAAK,cAAc,eAAe,mBAAG;AAAA,EAEpG;AAAA,EAGS,yBAAyB,OAA6B;AAE3D,UAAM,yBAAyB,KAAK;AAEpC,QAAI,MAAM,QAAQ,qBAAO,mBAAmB,mBAAmB,MAAM,QACjE,qBAAO,mBAAmB,iBAAiB;AAE3C,WAAK,iCAAiC;AAAA,IAE1C;AAAA,EAEJ;AAAA,EAGS,oBAAoB,WAAmB;AAE5C,UAAM,oBAAoB,SAAS;AAEnC,SAAK,iCAAiC;AAAA,EAE1C;AAAA,EAEA,mCAAmC;AAE/B,QAAI,KAAK,uBAAuB,KAAK,yBAAyB;AAE1D,WAAK,mBAAmB,KAAK,qBAAqB,KAAK,uBAAuB;AAAA,IAElF;AAAA,EAEJ;AAAA,EAGA,IAAW,WAAoB;AAC3B,UAAM,SAAU,KAAK,gBAAgB,gBAAgB,QAAQ;AAC7D,WAAO;AAAA,EACX;AAAA,EAEA,IAAW,SAAS,QAAiB;AACjC,QAAI,OAAO;AACX,QAAI,QAAQ;AACR,aAAO;AAAA,IACX;AACA,SAAK,gBAAgB,gBAAgB,OAAO;AAAA,EAChD;AAGJ;AA5HO,IAAM,cAAN;AAAM,YAgCO,eAAe,OAAO,OAAO,CAAC,GAAG,6BAAW,cAAc;AAAA,EAEtE,cAAc;AAElB,CAAC;",
+  "sourcesContent": ["import { UIColor } from \"./UIColor\"\nimport { UICore } from \"./UICore\"\nimport { nil, NO, ValueOf, YES } from \"./UIObject\"\nimport { UITextView } from \"./UITextView\"\nimport { UIView, UIViewAddControlEventTargetObject, UIViewBroadcastEvent } from \"./UIView\"\n\n\nexport class UITextField extends UITextView {\n    \n    _placeholderTextKey?: string\n    _defaultPlaceholderText?: string\n    \n    override _viewHTMLElement!: HTMLInputElement\n    \n    // --- Native Autocomplete (HTML datalist) ---\n    \n    private _datalistElement?: HTMLDataListElement\n    private _nativeAutocompleteData: string[] = []\n    public minCharactersForAutocomplete: number = 0\n    \n    constructor(\n        elementID?: string,\n        viewHTMLElement = null,\n        type: string | ValueOf<typeof UITextView.type> = UITextView.type.textField\n    ) {\n        \n        super(elementID, type, viewHTMLElement)\n        \n        this.textElementView.viewHTMLElement.setAttribute(\"type\", \"text\")\n        this.backgroundColor = UIColor.whiteColor\n        this.addTargetForControlEvent(\n            UIView.controlEvent.PointerUpInside,\n            (sender, event) => sender.focus()\n        )\n        this.textElementView.viewHTMLElement.oninput = (event) => {\n            this.sendControlEventForKey(UITextField.controlEvent.TextChange, event)\n            this._updateDatalistVisibility()\n        }\n        this.textElementView.style.webkitUserSelect = \"text\"\n        this.nativeSelectionEnabled = YES\n        this.pausesPointerEvents = NO\n        this.changesOften = YES\n        \n    }\n    \n    \n    static override controlEvent = Object.assign({}, UITextView.controlEvent, {\n        \n        \"TextChange\": \"TextChange\"\n        \n    })\n    \n    \n    override get controlEventTargetAccumulator(): UIViewAddControlEventTargetObject<typeof UITextField> {\n        return (super.controlEventTargetAccumulator as any)\n    }\n    \n    public override get viewHTMLElement() {\n        return this._viewHTMLElement\n    }\n    \n    \n    public override set text(text: string) {\n        this.textElementView.viewHTMLElement.value = text\n    }\n    \n    public override get text(): string {\n        return this.textElementView.viewHTMLElement.value\n    }\n    \n    \n    public set placeholderText(text: string) {\n        this.textElementView.viewHTMLElement.placeholder = text\n    }\n    \n    public get placeholderText(): string {\n        return this.textElementView.viewHTMLElement.placeholder\n    }\n    \n    \n    setPlaceholderText(key: string, defaultString: string) {\n        \n        this._placeholderTextKey = key\n        this._defaultPlaceholderText = defaultString\n        \n        const languageName = UICore.languageService.currentLanguageKey\n        this.placeholderText = UICore.languageService.stringForKey(key, languageName, defaultString, nil)\n        \n    }\n    \n    \n    override didReceiveBroadcastEvent(event: UIViewBroadcastEvent) {\n        \n        super.didReceiveBroadcastEvent(event)\n        \n        if (event.name == UIView.broadcastEventName.LanguageChanged || event.name ==\n            UIView.broadcastEventName.AddedToViewTree) {\n            \n            this._setPlaceholderFromKeyIfPossible()\n            \n        }\n        \n    }\n    \n    \n    override willMoveToSuperview(superview: UIView) {\n        \n        super.willMoveToSuperview(superview)\n        \n        this._setPlaceholderFromKeyIfPossible()\n        \n    }\n    \n    _setPlaceholderFromKeyIfPossible() {\n        \n        if (this._placeholderTextKey && this._defaultPlaceholderText) {\n            \n            this.setPlaceholderText(this._placeholderTextKey, this._defaultPlaceholderText)\n            \n        }\n        \n    }\n    \n    \n    public get isSecure(): boolean {\n        const result = (this.textElementView.viewHTMLElement.type == \"password\")\n        return result\n    }\n    \n    public set isSecure(secure: boolean) {\n        let type = \"text\"\n        if (secure) {\n            type = \"password\"\n        }\n        this.textElementView.viewHTMLElement.type = type\n    }\n    \n    \n    // --- Native Autocomplete Methods ---\n    \n    \n    \n    /**\n     * Sets the data for native browser autocomplete using HTML datalist.\n     * Setting an empty array will remove the autocomplete functionality.\n     *\n     * @param data Array of strings to show as autocomplete suggestions\n     */\n    public set nativeAutocompleteData(data: string[]) {\n        this._nativeAutocompleteData = data\n        this.updateDatalist()\n        this._updateDatalistVisibility()\n    }\n    \n    public get nativeAutocompleteData(): string[] {\n        return this._nativeAutocompleteData\n    }\n    \n    private updateDatalist() {\n        // If no data, remove the datalist\n        if (this._nativeAutocompleteData.length === 0) {\n            if (this._datalistElement) {\n                this._datalistElement.remove()\n                this.textElementView.viewHTMLElement.removeAttribute(\"list\")\n                this._datalistElement = undefined\n            }\n            return\n        }\n        \n        // Create datalist if it doesn't exist\n        if (!this._datalistElement) {\n            const datalistId = this.elementID + \"_datalist\"\n            this._datalistElement = document.createElement(\"datalist\")\n            this._datalistElement.id = datalistId\n            // Add datalist as a sibling to the text element within this view's container\n            this.viewHTMLElement.appendChild(this._datalistElement)\n            this.textElementView.viewHTMLElement.setAttribute(\"list\", datalistId)\n        }\n        \n        // Update the options\n        this._datalistElement.innerHTML = \"\"\n        this._nativeAutocompleteData.forEach(item => {\n            const option = document.createElement(\"option\")\n            option.value = item\n            this._datalistElement!.appendChild(option)\n        })\n    }\n    \n    private _updateDatalistVisibility() {\n        if (!this._datalistElement || this.minCharactersForAutocomplete === 0) {\n            return\n        }\n        \n        const shouldShow = this.text.length >= this.minCharactersForAutocomplete\n        \n        if (shouldShow) {\n            this.textElementView.viewHTMLElement.setAttribute(\"list\", this._datalistElement.id)\n        } else {\n            this.textElementView.viewHTMLElement.removeAttribute(\"list\")\n        }\n    }\n    \n    override wasRemovedFromViewTree() {\n        \n        super.wasRemovedFromViewTree()\n        \n        // Clean up datalist element when text field is removed\n        if (this._datalistElement) {\n            this._datalistElement.remove()\n            this._datalistElement = undefined\n        }\n        \n    }\n    \n    \n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uicore-ts",
-  "version": "1.1.148",
+  "version": "1.1.152",
   "description": "UICore is a library to build native-like user interfaces using pure Typescript. No HTML is needed at all. Components are described as TS classes and all user interactions are handled explicitly. This library is strongly inspired by the UIKit framework that is used in IOS. In addition, UICore has tools to handle URL based routing, array sorting and filtering and adds a number of other utilities for convenience.",
   "main": "compiledScripts/index.js",
   "types": "compiledScripts/index.d.ts",

package/scripts/UIDialogView.ts

@@ -8,7 +8,7 @@ import { UIView, UIViewBroadcastEvent } from "./UIView"
 
 
 export class UIDialogView<ViewType extends UIView = UIView> extends UIView {
-    
+
     _isAUIDialogView = YES
     _view: ViewType = new UIView() as any
     _appearedAnimated?: boolean
@@ -16,6 +16,9 @@ export class UIDialogView<ViewType extends UIView = UIView> extends UIView {
     _zIndex: number = 100
     isVisible: boolean = NO
     dismissesOnTapOutside = YES
+
+    static _activeDialogCount = 0
+    _fillsViewport = NO
     
     constructor(elementID?: string, viewHTMLElement?: HTMLElement) {
         
@@ -109,7 +112,7 @@ export class UIDialogView<ViewType extends UIView = UIView> extends UIView {
     
     showInView(containerView: UIView, animated: boolean) {
         
-        
+        this._fillsViewport = containerView.rootView == containerView
         animated = (animated && !IS_FIREFOX)
         
         this._appearedAnimated = animated
@@ -117,6 +120,13 @@ export class UIDialogView<ViewType extends UIView = UIView> extends UIView {
         this.willAppear(animated)
         
         
+        if (this._fillsViewport) {
+            UIDialogView._activeDialogCount++
+            if (UIDialogView._activeDialogCount >= 1) {
+                document.body.style.overflow = "hidden"
+            }
+        }
+
         containerView.addSubview(this)
         this.view.setNeedsLayoutUpToRootView()
         
@@ -150,7 +160,7 @@ export class UIDialogView<ViewType extends UIView = UIView> extends UIView {
     showInRootView(animated: boolean) {
         
         this.showInView(UICore.main.rootViewController.view, animated)
-        
+
     }
     
     
@@ -168,34 +178,45 @@ export class UIDialogView<ViewType extends UIView = UIView> extends UIView {
             
         }
         
+        const unlockScroll = () => {
+            if (this._fillsViewport) {
+                UIDialogView._activeDialogCount = Math.max(0, UIDialogView._activeDialogCount - 1)
+                if (UIDialogView._activeDialogCount === 0) {
+                    document.body.style.overflow = ""
+                }
+            }
+        }
+
         if (animated) {
-            
+
             UIView.animateViewOrViewsWithDurationDelayAndFunction(
                 this,
                 this.animationDuration,
                 0,
                 undefined,
                 (() => {
-                    
+
                     this.animateDisappearing()
-                    
+
                 }).bind(this),
                 () => {
-                    
+
                     if (this.isVisible == NO) {
-                        
+
                         this.removeFromSuperview()
-                        
+                        unlockScroll()
+
                     }
-                    
+
                 }
             )
-            
+
         }
         else {
-            
+
             this.removeFromSuperview()
-            
+            unlockScroll()
+
         }
         
         this.isVisible = NO
@@ -227,20 +248,27 @@ export class UIDialogView<ViewType extends UIView = UIView> extends UIView {
         
         //this.frame = this.superview.bounds;
         
-        this.setPosition(0, 0, 0, 0, 0, "100%")
-        this.setPosition(
-            0,
-            0,
-            0,
-            0,
-            FIRST(
-                IF(this.superview?.isKindOfClass(UINativeScrollView))(() => this.superview?.scrollSize.height ?? 0)
-                    .ELSE_IF(this.superview?.isKindOfClass(UIScrollView))(() => this.superview?.scrollSize.height ?? 0)
-                    .ELSE(() => this.superview?.frame.height ?? 0),
-                UIView.pageHeight
-            ) / UIView.pageScale,
-            "100%"
-        )
+        if (this._fillsViewport) {
+            const containerRect = this.superview?.viewHTMLElement?.getBoundingClientRect()
+            const topOffset = containerRect ? -containerRect.top / UIView.pageScale : 0
+            this.setPosition(0, 0, 0, topOffset, window.innerHeight / UIView.pageScale, "100%")
+        }
+        else {
+            this.setPosition(0, 0, 0, 0, 0, "100%")
+            this.setPosition(
+                0,
+                0,
+                0,
+                0,
+                FIRST(
+                    IF(this.superview?.isKindOfClass(UINativeScrollView))(() => this.superview?.scrollSize.height ?? 0)
+                        .ELSE_IF(this.superview?.isKindOfClass(UIScrollView))(() => this.superview?.scrollSize.height ?? 0)
+                        .ELSE(() => this.superview?.frame.height ?? 0),
+                    UIView.pageHeight
+                ) / UIView.pageScale,
+                "100%"
+            )
+        }
         
         const bounds = this.bounds
         

package/scripts/UITextField.ts

@@ -12,6 +12,12 @@ export class UITextField extends UITextView {
     
     override _viewHTMLElement!: HTMLInputElement
     
+    // --- Native Autocomplete (HTML datalist) ---
+    
+    private _datalistElement?: HTMLDataListElement
+    private _nativeAutocompleteData: string[] = []
+    public minCharactersForAutocomplete: number = 0
+    
     constructor(
         elementID?: string,
         viewHTMLElement = null,
@@ -28,6 +34,7 @@ export class UITextField extends UITextView {
         )
         this.textElementView.viewHTMLElement.oninput = (event) => {
             this.sendControlEventForKey(UITextField.controlEvent.TextChange, event)
+            this._updateDatalistVisibility()
         }
         this.textElementView.style.webkitUserSelect = "text"
         this.nativeSelectionEnabled = YES
@@ -129,4 +136,81 @@ export class UITextField extends UITextView {
     }
     
     
+    // --- Native Autocomplete Methods ---
+    
+    
+    
+    /**
+     * Sets the data for native browser autocomplete using HTML datalist.
+     * Setting an empty array will remove the autocomplete functionality.
+     *
+     * @param data Array of strings to show as autocomplete suggestions
+     */
+    public set nativeAutocompleteData(data: string[]) {
+        this._nativeAutocompleteData = data
+        this.updateDatalist()
+        this._updateDatalistVisibility()
+    }
+    
+    public get nativeAutocompleteData(): string[] {
+        return this._nativeAutocompleteData
+    }
+    
+    private updateDatalist() {
+        // If no data, remove the datalist
+        if (this._nativeAutocompleteData.length === 0) {
+            if (this._datalistElement) {
+                this._datalistElement.remove()
+                this.textElementView.viewHTMLElement.removeAttribute("list")
+                this._datalistElement = undefined
+            }
+            return
+        }
+        
+        // Create datalist if it doesn't exist
+        if (!this._datalistElement) {
+            const datalistId = this.elementID + "_datalist"
+            this._datalistElement = document.createElement("datalist")
+            this._datalistElement.id = datalistId
+            // Add datalist as a sibling to the text element within this view's container
+            this.viewHTMLElement.appendChild(this._datalistElement)
+            this.textElementView.viewHTMLElement.setAttribute("list", datalistId)
+        }
+        
+        // Update the options
+        this._datalistElement.innerHTML = ""
+        this._nativeAutocompleteData.forEach(item => {
+            const option = document.createElement("option")
+            option.value = item
+            this._datalistElement!.appendChild(option)
+        })
+    }
+    
+    private _updateDatalistVisibility() {
+        if (!this._datalistElement || this.minCharactersForAutocomplete === 0) {
+            return
+        }
+        
+        const shouldShow = this.text.length >= this.minCharactersForAutocomplete
+        
+        if (shouldShow) {
+            this.textElementView.viewHTMLElement.setAttribute("list", this._datalistElement.id)
+        } else {
+            this.textElementView.viewHTMLElement.removeAttribute("list")
+        }
+    }
+    
+    override wasRemovedFromViewTree() {
+        
+        super.wasRemovedFromViewTree()
+        
+        // Clean up datalist element when text field is removed
+        if (this._datalistElement) {
+            this._datalistElement.remove()
+            this._datalistElement = undefined
+        }
+        
+    }
+    
+    
 }