uicore-ts 1.1.105 → 1.1.110

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.110",
   "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

@@ -941,8 +941,32 @@ export class UIRectangle extends UIObject {
     }
     
     
+    IF(condition: boolean): UIRectangleConditionalChain<UIRectangle> {
+        const conditionalBlock = new UIRectangleConditionalBlock<UIRectangle>(this, condition)
+        return conditionalBlock.getProxy()
+    }
+    
+    // These will be intercepted by the proxy, but we define them for TypeScript
+    ELSE_IF(condition: boolean): UIRectangle {
+        return this
+    }
+    
+    ELSE(): UIRectangle {
+        return this
+    }
+    
+    ENDIF(): this
+    ENDIF<T, R>(performFunction: (result: T) => R): R
+    ENDIF<T, R>(performFunction?: (result: T) => R): R | this {
+        if (performFunction) {
+            return performFunction(this as any)
+        }
+        return this
+    }
+    
+    
     // 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 +974,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
@@ -977,6 +1016,119 @@ export class UIRectangle extends UIObject {
 }
 
 
+type UIRectangleConditionalChain<T> = {
+    [K in keyof UIRectangle]: UIRectangle[K] extends (...args: infer Args) => infer R
+                              ? (...args: Args) => UIRectangleConditionalChain<T | R>
+                              : UIRectangle[K]
+} & {
+    ELSE_IF<U>(condition: boolean): UIRectangleConditionalChain<T | U>
+    ELSE<U>(): UIRectangleConditionalChain<T | U>
+    ENDIF(): T
+    ENDIF<R>(performFunction: (result: T) => R): R
+}
+
+
+class UIRectangleConditionalBlock<T> {
+    private parentRectangle: UIRectangle
+    private conditionMet: boolean
+    private branchHasExecuted: boolean = false  // Renamed for clarity
+    private currentResult: any
+    
+    constructor(rectangle: UIRectangle, condition: boolean, initialResult?: any) {
+        this.parentRectangle = rectangle
+        this.conditionMet = condition
+        this.currentResult = initialResult ?? rectangle
+    }
+    
+    private createProxy(): UIRectangleConditionalChain<T> {
+        const self = this
+        return new Proxy(this.parentRectangle, {
+            get(target, prop) {
+                // Intercept ELSE_IF
+                if (prop === 'ELSE_IF') {
+                    return <U>(condition: boolean): UIRectangleConditionalChain<T | U> => {
+                        if (!self.branchHasExecuted && !self.conditionMet) {
+                            self.conditionMet = condition
+                        }
+                        // Return new block that tracks the union type
+                        const newBlock = new UIRectangleConditionalBlock<T | U>(
+                            self.parentRectangle,
+                            self.conditionMet,
+                            self.currentResult
+                        )
+                        newBlock.branchHasExecuted = self.branchHasExecuted
+                        return newBlock.createProxy() as any
+                    }
+                }
+                
+                // Intercept ELSE
+                if (prop === 'ELSE') {
+                    return <U>(): UIRectangleConditionalChain<T | U> => {
+                        if (!self.branchHasExecuted && !self.conditionMet) {
+                            self.conditionMet = true
+                        }
+                        const newBlock = new UIRectangleConditionalBlock<T | U>(
+                            self.parentRectangle,
+                            self.conditionMet,
+                            self.currentResult
+                        )
+                        newBlock.branchHasExecuted = self.branchHasExecuted
+                        return newBlock.createProxy() as any
+                    }
+                }
+                
+                // Intercept ENDIF with overloads
+                if (prop === 'ENDIF') {
+                    // Return an overloaded function
+                    function endif(): T
+                    function endif<R>(performFunction: (result: T) => R): R
+                    function endif<R>(performFunction?: (result: T) => R): R | T {
+                        if (performFunction) {
+                            return performFunction(self.currentResult)
+                        }
+                        return self.currentResult
+                    }
+                    return endif
+                }
+                
+                // For all other methods
+                const value = target[prop as keyof UIRectangle]
+                if (value instanceof Function) {
+                    return (...args: any[]) => {
+                        if (self.conditionMet) {
+                            // Mark that this branch is executing (only on first method call)
+                            if (!self.branchHasExecuted) {
+                                self.branchHasExecuted = true
+                            }
+                            
+                            const result = (value as Function).apply(target, args)
+                            
+                            // Store the result
+                            self.currentResult = result
+                            
+                            // If the method returns a UIRectangle, update parent reference
+                            if (result instanceof UIRectangle) {
+                                self.parentRectangle = result
+                            }
+                            
+                            return self.createProxy()
+                        }
+                        // If condition not met, return proxy to continue chain
+                        return self.createProxy()
+                    }
+                }
+                return value
+            }
+        }) as any
+    }
+    
+    getProxy(): UIRectangleConditionalChain<T> {
+        return this.createProxy()
+    }
+}
+
+
+
 
 
 

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