uicore-ts 1.1.105 → 1.1.108

package/compiledScripts/index.d.ts

@@ -32,3 +32,4 @@ export * from "./UIInterfaces";
 export * from "./ClientCheckers";
 export * from "./UICore";
 export * from "./UIRootViewController";
+export * from "./UILoadingView";

package/compiledScripts/index.js

@@ -49,4 +49,5 @@ __reExport(scripts_exports, require("./UIInterfaces"), module.exports);
 __reExport(scripts_exports, require("./ClientCheckers"), module.exports);
 __reExport(scripts_exports, require("./UICore"), module.exports);
 __reExport(scripts_exports, require("./UIRootViewController"), module.exports);
+__reExport(scripts_exports, require("./UILoadingView"), module.exports);
 //# sourceMappingURL=index.js.map

package/compiledScripts/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../scripts/index.ts"],
-  "sourcesContent": ["export * from \"./UIObject\"\nexport * from \"./UIView\"\nexport * from \"./UIViewController\"\nexport * from \"./UITimer\"\nexport * from \"./UITextArea\"\nexport * from \"./UITextView\"\nexport * from \"./UITextField\"\nexport * from \"./UITableView\"\nexport * from \"./UIStringFilter\"\nexport * from \"./UISlideScrollerView\"\nexport * from \"./UIScrollView\"\nexport * from \"./UIRoute\"\nexport * from \"./UIRectangle\"\nexport * from \"./UIPoint\"\nexport * from \"./UINativeScrollView\"\nexport * from \"./UILink\"\nexport * from \"./UILinkButton\"\nexport * from \"./UILayoutGrid\"\nexport * from \"./UIKeyValueStringFilter\"\nexport * from \"./UIKeyValueSorter\"\nexport * from \"./UIImageView\"\nexport * from \"./UIDialogView\"\nexport * from \"./UIDateTimeInput\"\nexport * from \"./UICoreExtensions\"\nexport * from \"./UICore\"\nexport * from \"./UIColor\"\nexport * from \"./UIBaseButton\"\nexport * from \"./UIButton\"\nexport * from \"./UIActionIndicator\"\nexport * from \"./UICoreExtensionValueObject\"\nexport * from \"./UIInterfaces\"\nexport * from \"./ClientCheckers\"\nexport * from \"./UICore\"\nexport * from \"./UIRootViewController\"\n\n\n\n\n\n\n\n\n"],
-  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,4BAAc,uBAAd;AACA,4BAAc,qBADd;AAEA,4BAAc,+BAFd;AAGA,4BAAc,sBAHd;AAIA,4BAAc,yBAJd;AAKA,4BAAc,yBALd;AAMA,4BAAc,0BANd;AAOA,4BAAc,0BAPd;AAQA,4BAAc,6BARd;AASA,4BAAc,kCATd;AAUA,4BAAc,2BAVd;AAWA,4BAAc,sBAXd;AAYA,4BAAc,0BAZd;AAaA,4BAAc,sBAbd;AAcA,4BAAc,iCAdd;AAeA,4BAAc,qBAfd;AAgBA,4BAAc,2BAhBd;AAiBA,4BAAc,2BAjBd;AAkBA,4BAAc,qCAlBd;AAmBA,4BAAc,+BAnBd;AAoBA,4BAAc,0BApBd;AAqBA,4BAAc,2BArBd;AAsBA,4BAAc,8BAtBd;AAuBA,4BAAc,+BAvBd;AAwBA,4BAAc,qBAxBd;AAyBA,4BAAc,sBAzBd;AA0BA,4BAAc,2BA1Bd;AA2BA,4BAAc,uBA3Bd;AA4BA,4BAAc,gCA5Bd;AA6BA,4BAAc,yCA7Bd;AA8BA,4BAAc,2BA9Bd;AA+BA,4BAAc,6BA/Bd;AAgCA,4BAAc,qBAhCd;AAiCA,4BAAc,mCAjCd;",
+  "sourcesContent": ["export * from \"./UIObject\"\nexport * from \"./UIView\"\nexport * from \"./UIViewController\"\nexport * from \"./UITimer\"\nexport * from \"./UITextArea\"\nexport * from \"./UITextView\"\nexport * from \"./UITextField\"\nexport * from \"./UITableView\"\nexport * from \"./UIStringFilter\"\nexport * from \"./UISlideScrollerView\"\nexport * from \"./UIScrollView\"\nexport * from \"./UIRoute\"\nexport * from \"./UIRectangle\"\nexport * from \"./UIPoint\"\nexport * from \"./UINativeScrollView\"\nexport * from \"./UILink\"\nexport * from \"./UILinkButton\"\nexport * from \"./UILayoutGrid\"\nexport * from \"./UIKeyValueStringFilter\"\nexport * from \"./UIKeyValueSorter\"\nexport * from \"./UIImageView\"\nexport * from \"./UIDialogView\"\nexport * from \"./UIDateTimeInput\"\nexport * from \"./UICoreExtensions\"\nexport * from \"./UICore\"\nexport * from \"./UIColor\"\nexport * from \"./UIBaseButton\"\nexport * from \"./UIButton\"\nexport * from \"./UIActionIndicator\"\nexport * from \"./UICoreExtensionValueObject\"\nexport * from \"./UIInterfaces\"\nexport * from \"./ClientCheckers\"\nexport * from \"./UICore\"\nexport * from \"./UIRootViewController\"\nexport * from \"./UILoadingView\"\n\n\n\n\n\n\n\n\n\n"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,4BAAc,uBAAd;AACA,4BAAc,qBADd;AAEA,4BAAc,+BAFd;AAGA,4BAAc,sBAHd;AAIA,4BAAc,yBAJd;AAKA,4BAAc,yBALd;AAMA,4BAAc,0BANd;AAOA,4BAAc,0BAPd;AAQA,4BAAc,6BARd;AASA,4BAAc,kCATd;AAUA,4BAAc,2BAVd;AAWA,4BAAc,sBAXd;AAYA,4BAAc,0BAZd;AAaA,4BAAc,sBAbd;AAcA,4BAAc,iCAdd;AAeA,4BAAc,qBAfd;AAgBA,4BAAc,2BAhBd;AAiBA,4BAAc,2BAjBd;AAkBA,4BAAc,qCAlBd;AAmBA,4BAAc,+BAnBd;AAoBA,4BAAc,0BApBd;AAqBA,4BAAc,2BArBd;AAsBA,4BAAc,8BAtBd;AAuBA,4BAAc,+BAvBd;AAwBA,4BAAc,qBAxBd;AAyBA,4BAAc,sBAzBd;AA0BA,4BAAc,2BA1Bd;AA2BA,4BAAc,uBA3Bd;AA4BA,4BAAc,gCA5Bd;AA6BA,4BAAc,yCA7Bd;AA8BA,4BAAc,2BA9Bd;AA+BA,4BAAc,6BA/Bd;AAgCA,4BAAc,qBAhCd;AAiCA,4BAAc,mCAjCd;AAkCA,4BAAc,4BAlCd;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uicore-ts",
-  "version": "1.1.105",
+  "version": "1.1.108",
   "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/UIActionIndicator.ts

@@ -22,9 +22,6 @@ export class UIActionIndicator extends UIView {
     }
     
     
-    
-    
-    
     set size(size: number) {
         
         this._size = size
@@ -40,15 +37,14 @@ export class UIActionIndicator extends UIView {
     }
     
     
-    
     override set hidden(hidden: boolean) {
-    
+        
         super.hidden = hidden
-    
-        if (hidden) {
         
+        if (hidden) {
+            
             this.indicatorView.removeFromSuperview()
-        
+            
         }
         else {
             
@@ -81,26 +77,20 @@ export class UIActionIndicator extends UIView {
         
         this.indicatorView.style.height = "" + this._size.integerValue + "px"
         this.indicatorView.style.width = "" + this._size.integerValue + "px"
-    
+        
         const minSize = Math.min(this.bounds.height, this.bounds.width)
-    
+        
         this.indicatorView.style.maxHeight = "" + minSize.integerValue + "px"
         this.indicatorView.style.maxWidth = "" + minSize.integerValue + "px"
-    
+        
         const size = Math.min(this._size, minSize)
-    
+        
         this.indicatorView.style.left = "" + ((bounds.width - size) * 0.5 - 11).integerValue + "px"
         this.indicatorView.style.top = "" + ((bounds.height - size) * 0.5 - 11).integerValue + "px"
         
-        
-        
-        
     }
     
     
-    
-    
-    
 }
 
 

package/scripts/UILoadingView.ts

@@ -0,0 +1,201 @@
+import { UIColor } from "./UIColor"
+import { IS_DEFINED, NO, YES } from "./UIObject"
+import { UIRectangle } from "./UIRectangle"
+import { IUILoadingView, UIView } from "./UIView"
+
+export class UILoadingView extends UIView implements IUILoadingView {
+    
+    private spinnerView: UIView
+    private isPulsing: boolean = NO
+    private _theme: "light" | "dark" = "light"
+    
+    override set loading(loading: boolean) {
+        // cannot set loading on loading view
+    }
+    
+    override get loading() {
+        return NO
+    }
+    
+    /**
+     * Sets the visual theme of the loader.
+     * 'light' (default): Suitable for light backgrounds. Dark spinner, white-ish overlay.
+     * 'dark': Suitable for dark backgrounds. Light spinner, black-ish overlay.
+     */
+    set theme(theme: "light" | "dark") {
+        this._theme = theme
+        this.updateColors()
+    }
+    
+    get theme() {
+        return this._theme
+    }
+    
+    constructor(elementID?: string) {
+        super(elementID)
+        
+        // 1. Initialize Spinner (Custom Bootstrap-like implementation)
+        this.spinnerView = new UIView(this.elementID + "_Spinner")
+        this.spinnerView.addStyleClass("UILoadingViewSpinnerContainer")
+        this.addSubview(this.spinnerView);
+        
+        // 2. Configure defaults
+        (this as UILoadingView).configureWithObject({
+            backgroundColor: UIColor.transparentColor,
+            userInteractionEnabled: YES, // Blocks touches to underlying view
+            pausesPointerEvents: YES,     // Prevents events from passing through
+            style: { height: "100%", width: "100%" }
+        })
+        
+        // 3. Initialize CSS
+        this.initViewStyleSelectors()
+        this.updateColors()
+    }
+    
+    
+    override initViewStyleSelectors() {
+        super.initViewStyleSelectors()
+        
+        // 1. Pulsing Animation
+        const pulseKeyframe = "UILoadingViewPulse"
+        UIView.injectCSS(`
+            @keyframes ${pulseKeyframe} {
+                0% { background-color: rgba(0, 0, 0, 0.15); }
+                50% { background-color: rgba(0, 0, 0, 0.35); }
+                100% { background-color: rgba(0, 0, 0, 0.15); }
+            }
+        `, "UILoadingViewPulseCSS")
+        UIView.createStyleSelector(".UILoadingViewPulsing", `animation: ${pulseKeyframe} 1.2s infinite ease-in-out;`)
+        
+        // 2. Spinner Rotation (Bootstrap style)
+        const spinKeyframe = "UILoadingViewSpin"
+        UIView.injectCSS(`
+            @keyframes ${spinKeyframe} {
+                from { transform: rotate(0deg); }
+                to { transform: rotate(-360deg); }
+            }
+        `, "UILoadingViewSpinCSS")
+        
+        // We apply the animation to the ::after pseudo-element
+        // to avoid conflicts with the framework's positioning on the element itself.
+        UIView.createStyleSelector(".UILoadingViewSpinnerContainer::after", `
+            content: "";
+            display: block;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            border-style: solid;
+            border-width: 5px;
+            border-color: inherit;
+            border-right-color: transparent !important;
+            animation: ${spinKeyframe} 1.5s linear infinite;
+            box-sizing: border-box;
+        `)
+    }
+    
+    private updateColors() {
+        // --- Indicator Mode Styling ---
+        const isLightTheme = this._theme === "light"
+        
+        // Background Overlay
+        // Light Theme -> UI is light -> Use White overlay with high alpha
+        // Dark Theme -> UI is dark -> Use Black overlay with medium alpha
+        const overlayColor = isLightTheme
+                             ? new UIColor("rgba(255, 255, 255, 0.7)")
+                             : new UIColor("rgba(0, 0, 0, 0.5)")
+        
+        // Spinner Color
+        // Light Theme -> UI is light -> Spinner should be Dark (e.g. Bootstrap text-body-emphasis #212529 or primary)
+        // Dark Theme -> UI is dark -> Spinner should be Light (e.g. #f8f9fa)
+        const spinnerColor = isLightTheme
+                             ? new UIColor("#343a40") // Dark Grey
+                             : new UIColor("#f8f9fa") // Light/White
+        
+        if (!this.isPulsing) {
+            this.backgroundColor = overlayColor
+        }
+        
+        // Apply colors to spinner borders
+        // We set Top, Bottom, Left. Right is forced transparent by CSS class.
+        this.spinnerView.style.borderTopColor = spinnerColor.stringValue
+        this.spinnerView.style.borderBottomColor = spinnerColor.stringValue
+        this.spinnerView.style.borderLeftColor = spinnerColor.stringValue
+        
+        // --- Pulsing Mode Styling ---
+        // We could switch animations here, but simply clearing the background
+        // allows the CSS animation to take over if the class is active.
+        if (this.isPulsing) {
+            this.style.backgroundColor = ""
+        }
+    }
+    
+    
+    override layoutSubviews() {
+        
+        super.layoutSubviews();
+        
+        // 1. Always fill the parent view
+        (this as UILoadingView).configureWithObject({
+            style: { height: "100%", width: "100%" }
+        })
+        
+        const bounds = this.bounds
+        const minDimension = Math.min(bounds.width, bounds.height)
+        
+        // 2. Adaptive Logic
+        // If smaller than 40px, use pulsing. Otherwise spinner.
+        if (minDimension < 40) {
+            this.enablePulsingMode()
+        }
+        else {
+            this.enableIndicatorMode()
+        }
+    }
+    
+    private enablePulsingMode() {
+        if (this.isPulsing) {
+            return
+        }
+        
+        this.spinnerView.hidden = YES
+        this.addStyleClass("UILoadingViewPulsing")
+        
+        // Clear manual background so CSS animation visible
+        this.style.backgroundColor = ""
+        
+        this.isPulsing = YES
+    }
+    
+    private enableIndicatorMode() {
+        // Remove pulsing class
+        this.removeStyleClass("UILoadingViewPulsing")
+        this.isPulsing = NO
+        
+        this.spinnerView.hidden = NO
+        
+        // Apply Overlay Color immediately
+        this.updateColors()
+        
+        // Layout Spinner
+        // Bootstrap standard is ~2rem (32px). We can scale it slightly based on available space if we wanted,
+        // but a fixed "neutral" size usually looks best unless very restricted.
+        const spinnerSize = 32
+        const borderWidth = 4 // 0.25em approx
+        
+        const bounds = this.bounds
+        
+        // Center the spinner
+        const x = (bounds.width - spinnerSize) / 2
+        const y = (bounds.height - spinnerSize) / 2
+        
+        this.spinnerView.frame = new UIRectangle(x, y, spinnerSize, spinnerSize)
+        this.spinnerView.style.borderWidth = borderWidth + "px"
+    }
+    
+}
+
+UIView.LoadingViewClass = UILoadingView
+
+
+
+

package/scripts/UIRectangle.ts

@@ -942,7 +942,7 @@ export class UIRectangle extends UIObject {
     
     
     // Bounding box
-    static boundingBoxForPoints(points: string | any[]) {
+    static boundingBoxForPoints(points: UIPoint[]) {
         const result = new UIRectangle()
         for (let i = 0; i < points.length; i++) {
             result.updateByAddingPoint(points[i])
@@ -950,6 +950,21 @@ export class UIRectangle extends UIObject {
         return result
     }
     
+    static boundingBoxForRectanglesAndPoints(rectanglesAndPoints: (UIPoint | UIRectangle)[]) {
+        const result = new UIRectangle()
+        for (let i = 0; i < rectanglesAndPoints.length; i++) {
+            const rectangleOrPoint = rectanglesAndPoints[i]
+            if (rectangleOrPoint instanceof UIRectangle) {
+                result.updateByAddingPoint(rectangleOrPoint.min)
+                result.updateByAddingPoint(rectangleOrPoint.max)
+            }
+            else {
+                result.updateByAddingPoint(rectangleOrPoint)
+            }
+        }
+        return result
+    }
+    
     
     beginUpdates() {
         this._isBeingUpdated = YES

package/scripts/UITextView.ts

@@ -35,10 +35,10 @@ export class UITextView extends UIView {
     } as const
     
     static textAlignment = {
-        "left": "left",
+        "left": "flex-start",
         "center": "center",
-        "right": "right",
-        "justify": "justify"
+        "right": "flex-end",
+        "justify": "stretch"
     } as const
     
     //#endregion
@@ -61,7 +61,24 @@ export class UITextView extends UIView {
         
         this.textColor = this.textColor
         
-        this.userInteractionEnabled = YES
+        this.userInteractionEnabled = YES;
+        
+        (this as UITextView).configureWithObject({
+            style: {
+                display: "flex",
+                flexDirection: "column", // Ensures vertical stacking logic
+                
+                // 'safe' ensures that if content overflows, it aligns to the start (top)
+                // instead of overflowing upwards or downwards equally.
+                justifyContent: "safe center",
+                alignItems: "flex-start",  // Keeps text left-aligned (change to "center" for horizontal center)
+                
+                // Optional: ensure text wraps if it gets too long
+                whiteSpace: "normal",
+                wordWrap: "break-word",
+                overflowWrap: "break-word"
+            }
+        })
         
         if (textViewType == UITextView.type.textArea) {
             this.pausesPointerEvents = YES
@@ -188,12 +205,11 @@ export class UITextView extends UIView {
     
     get textAlignment() {
         // @ts-ignore
-        return this.style.textAlign
+        return this.style.alignItems
     }
     
     set textAlignment(textAlignment: ValueOf<typeof UITextView.textAlignment>) {
-        this._textAlignment = textAlignment
-        this.style.textAlign = textAlignment
+        this.style.alignItems = textAlignment
     }
     
     //#endregion

package/scripts/UIView.ts

@@ -133,6 +133,12 @@ interface Constraint {
 }
 
 
+export interface IUILoadingView extends UIView {
+    theme: "light" | "dark";
+    // Add any other specific methods you need to call from UIView
+}
+
+
 export function UIComponentView(target: Function, context: ClassDecoratorContext) {
     console.log("Recording annotation UIComponentView on " + target.name)
     UIObject.recordAnnotation(UIComponentView, target)
@@ -149,7 +155,7 @@ export class UIView extends UIObject {
     _UIViewIntrinsicTemporaryWidth?: string
     _UIViewIntrinsicTemporaryHeight?: string
     _enabled: boolean = YES
-    _frame?: UIRectangle & { zIndex?: number };
+    _frame?: UIRectangle & { zIndex?: number }
     _frameCache?: UIRectangle
     _backgroundColor: UIColor = UIColor.transparentColor
     
@@ -220,6 +226,43 @@ export class UIView extends UIObject {
     makeNotResizable?: () => void
     resizingHandles: UIView[] = []
     
+    public static LoadingViewClass: new () => IUILoadingView
+    private _loadingView?: IUILoadingView
+    
+    public set loading(isLoading: boolean) {
+        this.userInteractionEnabled = !isLoading
+        if (isLoading) {
+            if (!IS(this._loadingView)) {
+                if (UIView.LoadingViewClass) {
+                    this._loadingView = new UIView.LoadingViewClass()
+                }
+                else {
+                    console.warn("UILoadingView class not registered yet.")
+                    return
+                }
+            }
+            
+            // Add to superview if not already added
+            if (this._loadingView.superview != this) {
+                this.addSubview(this._loadingView)
+                // Ensure it sits above other content
+                this._loadingView.style.zIndex = "1000"
+            }
+            
+            // Force an immediate layout update to position the overlay
+            // this._loadingView.setFrame(this.bounds)
+            
+        }
+        else {
+            this._loadingView?.removeFromSuperview()
+        }
+    }
+    
+    public get loading(): boolean {
+        return IS(this._loadingView) && IS(this._loadingView.superview)
+    }
+    
+    
     private _isMoving: boolean = NO
     _isCBEditorTemporaryResizable = NO
     _isCBEditorTemporaryMovable = NO
@@ -334,7 +377,7 @@ export class UIView extends UIObject {
         this._resizeObserverInitialized = true
         
         // Invalidate cache on window resize
-        window.addEventListener('resize', () => {
+        window.addEventListener("resize", () => {
             this._pageDimensionsCacheValid = false
         }, { passive: true })
         
@@ -346,9 +389,10 @@ export class UIView extends UIObject {
         // Start observing once body is available
         if (document.body) {
             bodyObserver.observe(document.body)
-        } else {
+        }
+        else {
             // Wait for DOMContentLoaded if body isn't ready yet
-            document.addEventListener('DOMContentLoaded', () => {
+            document.addEventListener("DOMContentLoaded", () => {
                 bodyObserver.observe(document.body)
             }, { once: true })
         }
@@ -363,14 +407,15 @@ export class UIView extends UIObject {
                 childList: true,
                 subtree: true,
                 attributes: true,
-                attributeFilter: ['style', 'class']
+                attributeFilter: ["style", "class"]
             })
         }
         
         if (document.body) {
             observeMutations()
-        } else {
-            document.addEventListener('DOMContentLoaded', observeMutations, { once: true })
+        }
+        else {
+            document.addEventListener("DOMContentLoaded", observeMutations, { once: true })
         }
     }
     
@@ -431,7 +476,6 @@ export class UIView extends UIObject {
     //#endregion
     
     
-    
     centerInContainer() {
         this.style.left = "50%"
         this.style.top = "50%"
@@ -1745,7 +1789,7 @@ export class UIView extends UIObject {
                 
                 // Skip if this view has been laid out too many times (cycle detection)
                 if (layoutCount >= 5) {
-                    console.warn('View layout cycle detected:', view)
+                    console.warn("View layout cycle detected:", view)
                     continue
                 }
                 
@@ -1847,6 +1891,10 @@ export class UIView extends UIObject {
             
         }
         
+        // if (this._loadingView && this._loadingView.superview == this) {
+        //     this._loadingView.setFrame(this.bounds)
+        // }
+        
         this.didLayoutSubviews()
         
     }
@@ -3687,6 +3735,9 @@ export class UIView extends UIObject {
         
         const framePoints: UIPoint[] = []
         this.subviews.forEach(subview => {
+            if (subview == this._loadingView) {
+                return
+            }
             subview.layoutIfNeeded()
             framePoints.push(subview.frame.min)
             framePoints.push(subview.frame.max)
@@ -3695,11 +3746,11 @@ export class UIView extends UIObject {
         // we will add padding based on the _contentInsets
         const resultFrame = UIRectangle.boundingBoxForPoints(framePoints)
             .rectangleWithInsets(
-            -this._contentInsets?.left ?? 0,
-            -this._contentInsets?.right ?? 0,
-            -this._contentInsets?.bottom ?? 0,
-            -this._contentInsets?.top ?? 0
-        )
+                -this._contentInsets?.left ?? 0,
+                -this._contentInsets?.right ?? 0,
+                -this._contentInsets?.bottom ?? 0,
+                -this._contentInsets?.top ?? 0
+            )
         return resultFrame
     }
     

package/scripts/index.ts

@@ -32,6 +32,8 @@ export * from "./UIInterfaces"
 export * from "./ClientCheckers"
 export * from "./UICore"
 export * from "./UIRootViewController"
+export * from "./UILoadingView"
+