tyrell-components 1.0.0-TC44 → 1.0.0-TC46

package/lib/utils/mobile.js

@@ -1,21 +1,4 @@
-/**
- * Mobile detection utility
- *
- * Uses CSS media query via matchMedia for reliable detection:
- * - `pointer: coarse` identifies touch-primary devices (not laptops with touchscreens)
- * - Breakpoint is evaluated by the browser, always in sync with CSS
- * - Called on each use (not cached), so it responds to viewport changes and rotation
- */
-/**
- * Default mobile breakpoint (px).
- * Matches phones in portrait and most phones in landscape.
- */
 const MOBILE_BREAKPOINT = 768;
-/**
- * Detect mobile touch devices.
- * Returns true when the primary pointer is coarse (touch) AND viewport is narrow.
- */
 export function isMobileTouch(breakpoint = MOBILE_BREAKPOINT) {
     return window.matchMedia(`(pointer: coarse) and (max-width: ${breakpoint}px)`).matches;
 }
-//# sourceMappingURL=mobile.js.map

package/lib/utils/number-format.d.ts

@@ -1,6 +1,5 @@
 /**
  * Number Formatting Utilities
- * PORTED FROM: clj/ty/i18n/number.cljs
  *
  * Uses native Intl.NumberFormat for locale-aware number formatting
  * Supports currency, percent, compact notation, and custom precision
@@ -59,4 +58,3 @@ export declare function parseNumericValue(value: string): number | null;
  * ```
  */
 export declare function shouldFormat(type: string): boolean;
-//# sourceMappingURL=number-format.d.ts.map

package/lib/utils/number-format.js

@@ -1,34 +1,10 @@
-/**
- * Number Formatting Utilities
- * PORTED FROM: clj/ty/i18n/number.cljs
- *
- * Uses native Intl.NumberFormat for locale-aware number formatting
- * Supports currency, percent, compact notation, and custom precision
- */
-/**
- * Format a number based on configuration
- *
- * @example
- * ```typescript
- * formatNumber(1234.56, { type: 'currency', currency: 'USD', locale: 'en-US' })
- * // Returns: "$1,234.56"
- *
- * formatNumber(0.15, { type: 'percent', precision: 2 })
- * // Returns: "15.00%"
- *
- * formatNumber(1234567, { type: 'compact' })
- * // Returns: "1.2M"
- * ```
- */
 export function formatNumber(value, config) {
     const { type, locale = 'en-US', currency = 'USD', precision } = config;
     const options = {};
-    // Add precision if specified
     if (precision !== undefined) {
         options.minimumFractionDigits = precision;
         options.maximumFractionDigits = precision;
     }
-    // Configure based on type
     switch (type) {
         case 'currency':
             options.style = 'currency';
@@ -36,8 +12,6 @@ export function formatNumber(value, config) {
             break;
         case 'percent':
             options.style = 'percent';
-            // Note: Intl.NumberFormat expects decimal (0.15 for 15%)
-            // We'll handle the division in the input component
             break;
         case 'compact':
             options.notation = 'compact';
@@ -50,67 +24,30 @@ export function formatNumber(value, config) {
     }
     const formatter = new Intl.NumberFormat(locale, options);
     const formatted = formatter.format(value);
-    // Normalize Unicode spaces for better HTML input compatibility
-    // Replace narrow no-break space (U+202F) and thin space (U+2009) with regular non-breaking space (U+00A0)
-    // This ensures proper rendering in HTML input elements
     return formatted
-        .replace(/\u202F/g, '\u00A0') // Narrow no-break space → non-breaking space
-        .replace(/\u2009/g, '\u00A0'); // Thin space → non-breaking space
+        .replace(/\u202F/g, '\u00A0')
+        .replace(/\u2009/g, '\u00A0');
 }
-/**
- * Parse a numeric string to a number
- *
- * Simple rule: the last occurring . or , is the decimal separator.
- * Everything else is stripped. This works for both US (1,234.56) and
- * European (1.234,56) input, and for mobile keyboards that use , as decimal.
- *
- * @example
- * ```typescript
- * parseNumericValue("1,234.56") // 1234.56 (last separator is .)
- * parseNumericValue("1.234,56") // 1234.56 (last separator is ,)
- * parseNumericValue("12,50")    // 12.5    (last separator is ,)
- * parseNumericValue("12.50")    // 12.5    (last separator is .)
- * parseNumericValue("1234")     // 1234
- * parseNumericValue("$1,234")   // 1234
- * parseNumericValue("15%")      // 15
- * parseNumericValue("")         // null
- * ```
- */
 export function parseNumericValue(value) {
     if (!value || value.trim() === '')
         return null;
-    // Strip everything except digits, dots, commas, and minus
     let stripped = value
         .replace(/[^\d.,-]/g, '')
         .trim();
     if (stripped === '' || stripped === '-')
         return null;
-    // Find the last occurring . or , — that's the decimal separator
     const lastComma = stripped.lastIndexOf(',');
     const lastDot = stripped.lastIndexOf('.');
     const lastSep = Math.max(lastComma, lastDot);
     if (lastSep === -1) {
-        // No separators — pure integer
         const parsed = parseFloat(stripped);
         return isNaN(parsed) ? null : parsed;
     }
-    // Split at the last separator
     const intPart = stripped.slice(0, lastSep).replace(/[.,]/g, '');
     const decPart = stripped.slice(lastSep + 1);
     const parsed = parseFloat(intPart + '.' + decPart);
     return isNaN(parsed) ? null : parsed;
 }
-/**
- * Check if input type requires numeric formatting
- *
- * @example
- * ```typescript
- * shouldFormat('currency') // true
- * shouldFormat('percent')  // true
- * shouldFormat('text')     // false
- * ```
- */
 export function shouldFormat(type) {
     return ['number', 'currency', 'percent', 'compact'].includes(type);
 }
-//# sourceMappingURL=number-format.js.map

package/lib/utils/positioning.d.ts

@@ -1,6 +1,5 @@
 /**
  * Core positioning engine for floating elements
- * Adapted from ty.positioning ClojureScript implementation
  *
  * Handles smart positioning of tooltips, dropdowns, popups, and other
  * floating elements relative to anchor elements with automatic overflow
@@ -132,6 +131,10 @@ export interface AnchoredPopupOptions {
     gap?: number;
     /** Minimum distance from viewport edges (px, default 8) */
     padding?: number;
+    /** Horizontal anchor edge: trigger's left edge ("start", default) or
+     *  right edge ("end"). Either way the result is clamped into the
+     *  viewport, same as before. */
+    align?: "start" | "end";
 }
 export interface AnchoredPopupPosition {
     /** Popup left edge, viewport coords, clamped into view */
@@ -143,4 +146,3 @@ export interface AnchoredPopupPosition {
     below: boolean;
 }
 export declare function computeAnchoredPosition(o: AnchoredPopupOptions): AnchoredPopupPosition;
-//# sourceMappingURL=positioning.d.ts.map

package/lib/utils/positioning.js

@@ -1,17 +1,3 @@
-/**
- * Core positioning engine for floating elements
- * Adapted from ty.positioning ClojureScript implementation
- *
- * Handles smart positioning of tooltips, dropdowns, popups, and other
- * floating elements relative to anchor elements with automatic overflow
- * detection and placement fallback.
- */
-// ============================================================================
-// Placement Definitions
-// ============================================================================
-/**
- * Map of all placement configurations
- */
 export const placements = {
     'top-start': {
         vertical: 'top',
@@ -68,9 +54,6 @@ export const placements = {
         orientation: 'vertical',
     },
 };
-/**
- * Default placement preference lists for different use cases
- */
 export const placementPreferences = {
     default: [
         'bottom-start', 'bottom-end', 'top-start', 'top-end',
@@ -85,12 +68,6 @@ export const placementPreferences = {
         'bottom', 'top', 'right', 'left'
     ],
 };
-// ============================================================================
-// DOM Measurement Helpers
-// ============================================================================
-/**
- * Get element dimensions relative to viewport with calculated center points
- */
 function getElementRect(el) {
     const rect = el.getBoundingClientRect();
     return {
@@ -104,9 +81,6 @@ function getElementRect(el) {
         centerY: rect.top + rect.height / 2,
     };
 }
-/**
- * Get viewport dimensions and scroll position
- */
 function getViewportRect() {
     return {
         width: window.innerWidth,
@@ -115,22 +89,13 @@ function getViewportRect() {
         scrollY: window.scrollY,
     };
 }
-// ============================================================================
-// Position Calculation
-// ============================================================================
-/**
- * Calculate position for a specific placement
- * Returns x, y coordinates and overflow information
- */
 function calculatePlacement(options) {
     const { targetRect, floatingRect, placement, offset, padding, scrollbarWidth, containerPadding, } = options;
     const config = placements[placement];
     const { vertical, horizontal, orientation } = config;
     const viewport = getViewportRect();
-    // Calculate X position
     let x;
     if (orientation === 'vertical') {
-        // Left/right placements
         if (horizontal === 'start') {
             x = targetRect.left - floatingRect.width - offset + containerPadding;
         }
@@ -139,7 +104,6 @@ function calculatePlacement(options) {
         }
     }
     else {
-        // Top/bottom placements
         if (horizontal === 'start') {
             x = targetRect.left;
         }
@@ -150,10 +114,8 @@ function calculatePlacement(options) {
             x = targetRect.right - floatingRect.width;
         }
     }
-    // Calculate Y position
     let y;
     if (orientation === 'vertical') {
-        // Left/right placements
         if (vertical === 'center') {
             y = targetRect.centerY - floatingRect.height / 2;
         }
@@ -165,7 +127,6 @@ function calculatePlacement(options) {
         }
     }
     else {
-        // Top/bottom placements
         if (vertical === 'top') {
             y = targetRect.top - floatingRect.height - offset + containerPadding;
         }
@@ -173,14 +134,12 @@ function calculatePlacement(options) {
             y = targetRect.bottom + offset - containerPadding;
         }
     }
-    // Calculate overflow for each edge
     const overflow = {
         top: Math.min(0, y - padding),
         left: Math.min(0, x - padding),
         bottom: Math.min(0, viewport.height - (y + floatingRect.height + padding)),
         right: Math.min(0, viewport.width - (x + floatingRect.width + padding + scrollbarWidth)),
     };
-    // Sum of absolute overflow values
     const overflowAmount = Object.values(overflow).reduce((sum, val) => sum + Math.abs(val), 0);
     return {
         x: Math.round(x),
@@ -191,16 +150,11 @@ function calculatePlacement(options) {
         fits: overflowAmount === 0,
     };
 }
-/**
- * Find the best position for the floating element
- * Tries all preference placements and returns the one that fits best
- */
 export function findBestPosition(options) {
     const { targetEl, floatingEl, preferences = placementPreferences.default, offset = 8, padding = 8, containerPadding = 0, } = options;
     const targetRect = getElementRect(targetEl);
     const floatingRect = getElementRect(floatingEl);
     const scrollbarWidth = 15;
-    // Calculate all candidate positions
     const candidates = preferences.map(placement => calculatePlacement({
         targetRect,
         floatingRect,
@@ -210,10 +164,8 @@ export function findBestPosition(options) {
         containerPadding,
         scrollbarWidth,
     }));
-    // Find first that fits, or one with least overflow
     const bestPosition = candidates.find(c => c.fits) ||
         candidates.reduce((best, current) => current.overflowAmount < best.overflowAmount ? current : best);
-    // Adjust for scrollbar if needed
     if (bestPosition.overflow.right < 0) {
         bestPosition.x += bestPosition.overflow.right;
     }
@@ -226,12 +178,9 @@ export function computeAnchoredPosition(o) {
     const vh = window.innerHeight;
     const spaceBelow = vh - o.anchorRect.bottom;
     const spaceAbove = o.anchorRect.top;
-    // Below when it fits — and when neither side fits, the side with MORE room
-    // instead of blindly flipping up (a trigger near the viewport top used to
-    // clip the popup off-screen).
     const below = spaceBelow >= o.popupHeight + gap + padding || spaceBelow >= spaceAbove;
-    // Anchor to the trigger's left edge, clamped into the viewport
-    const x = Math.max(padding, Math.min(o.anchorRect.left, vw - o.popupWidth - padding));
+    const rawX = o.align === "end" ? o.anchorRect.right - o.popupWidth : o.anchorRect.left;
+    const x = Math.max(padding, Math.min(rawX, vw - o.popupWidth - padding));
     return {
         x,
         topY: o.anchorRect.bottom + gap,
@@ -239,4 +188,3 @@ export function computeAnchoredPosition(o) {
         below,
     };
 }
-//# sourceMappingURL=positioning.js.map

package/lib/utils/property-capture.d.ts

@@ -1,32 +1,11 @@
 /**
  * Property Capture Utility
  *
- * Solves the problem of frameworks (React, Reagent, etc.) setting properties
- * on custom elements BEFORE connectedCallback runs.
- *
- * PROBLEM:
- * 1. Framework creates element: document.createElement('ty-dropdown')
- * 2. Framework sets properties: element.value = "foo"
- * 3. Constructor runs and defines getters/setters
- * 4. BUT properties were already set, creating instance properties
- * 5. Instance properties shadow the class getters/setters
- * 6. connectedCallback runs - too late!
- *
- * SOLUTION:
- * In connectedCallback, capture any pre-set properties and apply them properly.
- *
- * @example
- * ```typescript
- * connectedCallback(): void {
- *   const preSetProps = capturePreSetProperties(this, [
- *     'value', 'clearable', 'disabled'
- *   ])
- *
- *   if (preSetProps.value !== undefined) {
- *     this._value = preSetProps.value
- *   }
- * }
- * ```
+ * Frameworks (React, Reagent, ...) set properties on a custom element before
+ * the constructor defines its getters/setters, so those assignments become
+ * *instance* properties that permanently shadow the class accessors — by the
+ * time connectedCallback runs, the setters have never been called.
+ * Fix: in connectedCallback, capture the pre-set values and re-apply them.
  */
 /**
  * Captured property data
@@ -129,4 +108,3 @@ export declare function applyPreSetProperties(element: any, propertyNames: strin
  * ```
  */
 export declare function captureAndApplyProperties(element: any, propertyNames: string[], transformer?: (name: string, value: any) => any, options?: PropertyCaptureOptions): void;
-//# sourceMappingURL=property-capture.d.ts.map

package/lib/utils/property-capture.js

@@ -1,50 +1,3 @@
-/**
- * Property Capture Utility
- *
- * Solves the problem of frameworks (React, Reagent, etc.) setting properties
- * on custom elements BEFORE connectedCallback runs.
- *
- * PROBLEM:
- * 1. Framework creates element: document.createElement('ty-dropdown')
- * 2. Framework sets properties: element.value = "foo"
- * 3. Constructor runs and defines getters/setters
- * 4. BUT properties were already set, creating instance properties
- * 5. Instance properties shadow the class getters/setters
- * 6. connectedCallback runs - too late!
- *
- * SOLUTION:
- * In connectedCallback, capture any pre-set properties and apply them properly.
- *
- * @example
- * ```typescript
- * connectedCallback(): void {
- *   const preSetProps = capturePreSetProperties(this, [
- *     'value', 'clearable', 'disabled'
- *   ])
- *
- *   if (preSetProps.value !== undefined) {
- *     this._value = preSetProps.value
- *   }
- * }
- * ```
- */
-/**
- * Capture properties that were set before connectedCallback
- *
- * @param element - The custom element instance
- * @param propertyNames - Array of property names to check
- * @param options - Capture options
- * @returns Record of captured properties with metadata
- *
- * @example
- * ```typescript
- * const captured = capturePreSetProperties(this, ['value', 'disabled'])
- * // {
- * //   value: { name: 'value', value: 'foo', hadProperty: true },
- * //   disabled: { name: 'disabled', value: undefined, hadProperty: false }
- * // }
- * ```
- */
 export function capturePreSetProperties(element, propertyNames, options = { cleanup: true }) {
     const captured = {};
     for (const name of propertyNames) {
@@ -54,29 +7,12 @@ export function capturePreSetProperties(element, propertyNames, options = { clea
             value: descriptor?.value,
             hadProperty: descriptor !== undefined && descriptor.value !== undefined
         };
-        // Clean up instance property so class getter/setter works
         if (options.cleanup && captured[name].hadProperty) {
             delete element[name];
         }
     }
     return captured;
 }
-/**
- * Simpler API - just get the values that were pre-set
- *
- * @param element - The custom element instance
- * @param propertyNames - Array of property names to check
- * @param options - Capture options
- * @returns Record of property names to values (only includes properties that were set)
- *
- * @example
- * ```typescript
- * const values = getCapturedValues(this, ['value', 'disabled'])
- * if (values.value !== undefined) {
- *   this._value = values.value
- * }
- * ```
- */
 export function getCapturedValues(element, propertyNames, options) {
     const captured = capturePreSetProperties(element, propertyNames, options);
     const values = {};
@@ -87,58 +23,15 @@ export function getCapturedValues(element, propertyNames, options) {
     }
     return values;
 }
-/**
- * Automatically apply pre-set properties to private fields
- *
- * @param element - The custom element instance
- * @param propertyNames - Array of property names to check
- * @param propertyMap - Optional mapping of public names to private field names
- *                      Default: adds underscore prefix (e.g., 'value' -> '_value')
- * @param options - Capture options
- *
- * @example
- * ```typescript
- * // Simple usage (uses _propertyName convention)
- * applyPreSetProperties(this, ['value', 'disabled'])
- * // Sets this._value and this._disabled
- *
- * // Custom mapping
- * applyPreSetProperties(this, ['value'], { value: 'internalValue' })
- * // Sets this.internalValue
- * ```
- */
 export function applyPreSetProperties(element, propertyNames, propertyMap, options) {
     const captured = capturePreSetProperties(element, propertyNames, options);
     for (const [name, data] of Object.entries(captured)) {
         if (data.hadProperty) {
-            // Determine the private field name
             const privateName = propertyMap?.[name] || `_${name}`;
             element[privateName] = data.value;
         }
     }
 }
-/**
- * Helper for components with standard _propertyName pattern
- *
- * @param element - The custom element instance
- * @param propertyNames - Array of property names to check
- * @param transformer - Optional function to transform values before setting
- * @param options - Capture options
- *
- * @example
- * ```typescript
- * connectedCallback(): void {
- *   // Basic usage
- *   captureAndApplyProperties(this, ['value', 'disabled', 'required'])
- *
- *   // With transformation
- *   captureAndApplyProperties(this, ['value'], (name, value) => {
- *     if (name === 'value') return this.parseValue(value)
- *     return value
- *   })
- * }
- * ```
- */
 export function captureAndApplyProperties(element, propertyNames, transformer, options) {
     const captured = capturePreSetProperties(element, propertyNames, options);
     for (const [name, data] of Object.entries(captured)) {
@@ -149,4 +42,3 @@ export function captureAndApplyProperties(element, propertyNames, transformer, o
         }
     }
 }
-//# sourceMappingURL=property-capture.js.map

package/lib/utils/property-manager.d.ts

@@ -87,4 +87,3 @@ export declare class PropertyManager<T = any> {
      */
     handleAlias(aliasName: string, value: any): PropertyChange | null;
 }
-//# sourceMappingURL=property-manager.d.ts.map