tyrell-components 1.0.0-TC45 → 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
@@ -147,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,7 @@ 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 ("start") or right edge ("end"),
-    // clamped into the viewport either way.
     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 {
@@ -241,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

package/lib/utils/property-manager.js

@@ -1,21 +1,9 @@
-/**
- * Property Manager - Unified property lifecycle for web components
- *
- * Handles property/attribute synchronization, validation, coercion, and change tracking.
- * All property updates flow through a single code path for consistency.
- */
-/**
- * Manages component properties with unified lifecycle
- */
 export class PropertyManager {
     constructor(config) {
         this._props = new Map();
         this._config = config;
         this._initializeDefaults();
     }
-    /**
-     * Initialize properties with default values
-     */
     _initializeDefaults() {
         for (const [name, config] of Object.entries(this._config)) {
             if (config.default !== undefined) {
@@ -23,38 +11,25 @@ export class PropertyManager {
             }
         }
     }
-    /**
-     * Check if a property name exists in the configuration
-     */
     hasConfig(name) {
         return name in this._config;
     }
-    /**
-     * Update a property value
-     * Returns PropertyChange if value changed, null otherwise
-     */
     updateProperty(name, value, source = 'property') {
         const config = this._config[name];
         if (!config) {
             console.warn(`[PropertyManager] Unknown property: ${name}`);
             return null;
         }
-        // Get old value
         const oldValue = this._props.get(name);
-        // Coerce value to correct type
         const coercedValue = this._coerceValue(name, value, config);
-        // Validate value
         if (!this._validateValue(name, coercedValue, config)) {
             console.warn(`[PropertyManager] Invalid value for ${name}:`, coercedValue);
             return null;
         }
-        // Check if value actually changed
         if (this._valuesEqual(oldValue, coercedValue)) {
             return null;
         }
-        // Update internal map
         this._props.set(name, coercedValue);
-        // Create change object
         const change = {
             name,
             oldValue,
@@ -63,35 +38,23 @@ export class PropertyManager {
         };
         return change;
     }
-    /**
-     * Coerce value to the correct type
-     */
     _coerceValue(name, value, config) {
-        // Custom coercion
         if (config.coerce) {
             return config.coerce(value);
         }
-        // Null/undefined handling
         if (value === null || value === undefined) {
             return config.default ?? null;
         }
-        // Type coercion
         switch (config.type) {
             case 'boolean':
-                // HTML Standard: attribute present (even empty) = true, absent = false
-                // String handling:
                 if (typeof value === 'string') {
-                    // Empty string = true (HTML boolean attribute: <input checked>)
                     if (value === '')
                         return true;
-                    // Explicit false values
                     const normalized = value.toLowerCase().trim();
                     if (normalized === 'false' || normalized === '0')
                         return false;
-                    // Everything else is truthy
                     return true;
                 }
-                // Non-string: standard truthy/falsy
                 return Boolean(value);
             case 'number':
                 const num = Number(value);
@@ -114,29 +77,19 @@ export class PropertyManager {
                 return value;
         }
     }
-    /**
-     * Validate a property value
-     */
     _validateValue(name, value, config) {
         if (config.validate) {
             return config.validate(value);
         }
         return true;
     }
-    /**
-     * Check if two values are equal
-     */
     _valuesEqual(a, b) {
-        // Simple equality for primitives
         if (typeof a !== 'object' || typeof b !== 'object') {
             return a === b;
         }
-        // Null checks
         if (a === null || b === null) {
             return a === b;
         }
-        // Deep equality for objects/arrays (simple implementation)
-        // For production, consider using a proper deep equality library
         try {
             return JSON.stringify(a) === JSON.stringify(b);
         }
@@ -144,47 +97,25 @@ export class PropertyManager {
             return false;
         }
     }
-    /**
-     * Get a property value
-     */
     get(name) {
         return this._props.get(name);
     }
-    /**
-     * Get all properties as an object
-     */
     getAll() {
         return Object.fromEntries(this._props);
     }
-    /**
-     * Get property configuration
-     */
     getConfig(name) {
         return this._config[name];
     }
-    /**
-     * Check if a property is visual (requires render)
-     */
     isVisual(name) {
         return this._config[name]?.visual ?? false;
     }
-    /**
-     * Check if a property affects form value
-     */
     isFormValue(name) {
         return this._config[name]?.formValue ?? false;
     }
-    /**
-     * Check if a property should emit change events
-     */
     shouldEmitChange(name) {
         return this._config[name]?.emitChange ?? false;
     }
-    /**
-     * Handle property aliases (e.g., not-clearable → clearable: false)
-     */
     handleAlias(aliasName, value) {
-        // Find property with this alias
         for (const [propName, config] of Object.entries(this._config)) {
             if (config.aliases && aliasName in config.aliases) {
                 const aliasedValue = config.aliases[aliasName];
@@ -194,4 +125,3 @@ export class PropertyManager {
         return null;
     }
 }
-//# sourceMappingURL=property-manager.js.map