tyrell-components 1.0.0-RC13 → 1.0.0-RC14

package/lib/components/copy.js

@@ -1,115 +1,38 @@
-/**
- * TyCopy Web Component
- *
- * Read-only field with copy-to-clipboard functionality
- * Perfect for API keys, tokens, URLs, code snippets, etc.
- *
- * Features:
- * - Read-only display (not an input)
- * - Copy icon on the right
- * - Icon animation on copy (copy → check → copy)
- * - Same styling as ty-input for consistency
- * - Label support
- * - Size and flavor variants
- */
 import { TyComponent } from '../base/ty-component.js';
 import { ensureStyles } from '../utils/styles.js';
 import { syncCustomFlavorSheet } from '../utils/flavor-sheet.js';
 import { inputStyles } from '../styles/input.js';
 import { copyStyles, copyCustomFlavorCss } from '../styles/copy.js';
-/**
- * Copy icon SVG (from Lucide)
- */
 const COPY_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
-/**
- * Check icon SVG (from Lucide) - shown after successful copy
- */
 const CHECK_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
-/**
- * X icon SVG (from Lucide) - shown on copy failure
- */
 const ERROR_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`;
 import { REQUIRED_ICON_SVG } from '../utils/icons.js';
-/**
- * Ty Copy Field Component
- *
- * @example
- * ```html
- * <!-- Basic copy field -->
- * <ty-copy
- *   label="API Key"
- *   value="sk_live_1234567890abcdef">
- * </ty-copy>
- *
- * <!-- Code format -->
- * <ty-copy
- *   label="Install Command"
- *   value="npm install tyrell-components"
- *   format="code">
- * </ty-copy>
- *
- * <!-- Different sizes -->
- * <ty-copy size="sm" value="Small field"></ty-copy>
- * <ty-copy size="lg" value="Large field"></ty-copy>
- *
- * <!-- Semantic flavors -->
- * <ty-copy flavor="primary" value="Primary"></ty-copy>
- * <ty-copy flavor="success" value="Success"></ty-copy>
- * ```
- */
 export class TyCopy extends TyComponent {
     constructor() {
-        super(); // TyComponent handles attachInternals() and attachShadow()
-        // ============================================================================
-        // INTERNAL STATE - Not managed by PropertyManager
-        // ============================================================================
+        super();
         this._copyTimeout = null;
         this._showingSuccess = false;
         this._customFlavorSheet = null;
-        // Apply both input and copy-specific styles
         ensureStyles(this.shadowRoot, { css: inputStyles, id: 'ty-input' });
         ensureStyles(this.shadowRoot, { css: copyStyles, id: 'ty-copy' });
     }
-    // observedAttributes auto-generated by TyComponent from properties config
-    // ============================================================================
-    // TYCOMPONENT LIFECYCLE HOOKS
-    // ============================================================================
-    /**
-     * Called when component connects to DOM
-     * TyComponent already handled pre-connection property capture
-     */
     onConnect() {
-        // TyComponent will call render() automatically after this hook
         this._syncCustomFlavor();
     }
-    /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
     _syncCustomFlavor() {
         this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ base }) => copyCustomFlavorCss(base));
     }
-    /**
-     * Called when component disconnects from DOM
-     */
     onDisconnect() {
-        // Clear any pending timeout
         if (this._copyTimeout !== null) {
             clearTimeout(this._copyTimeout);
             this._copyTimeout = null;
         }
     }
-    /**
-     * Handle property changes - called BEFORE render
-     */
     onPropertiesChanged(changes) {
         if (changes.some((c) => c.name === 'flavor')) {
             this._syncCustomFlavor();
         }
     }
-    // ============================================================================
-    // PRIVATE METHODS
-    // ============================================================================
-    /**
-     * Build CSS class list
-     */
     buildClassList() {
         const classes = [this.size];
         if (this.disabled)
@@ -118,15 +41,11 @@ export class TyCopy extends TyComponent {
             classes.push('required');
         return classes.join(' ');
     }
-    /**
-     * Copy value to clipboard
-     */
     async copyToClipboard() {
         if (this.disabled || !this.value)
             return;
         try {
             await navigator.clipboard.writeText(this.value);
-            // Emit success event
             this.dispatchEvent(new CustomEvent('copy-success', {
                 detail: { value: this.value },
                 bubbles: true,
@@ -134,7 +53,6 @@ export class TyCopy extends TyComponent {
             }));
         }
         catch (err) {
-            // Fallback for non-secure contexts (non-HTTPS)
             try {
                 const textarea = document.createElement('textarea');
                 textarea.value = this.value;
@@ -161,27 +79,19 @@ export class TyCopy extends TyComponent {
                 return;
             }
         }
-        // Show success animation (after either method succeeds)
         this.showCopySuccess();
     }
-    /**
-     * Show copy success animation
-     * Uses state flag so render() can show the correct icon
-     */
     showCopySuccess() {
-        // Clear any existing timeout
         if (this._copyTimeout !== null) {
             clearTimeout(this._copyTimeout);
         }
         this._showingSuccess = true;
-        // Update just the button without full re-render
         const copyButton = this.shadowRoot.querySelector('.copy-button');
         if (copyButton) {
             copyButton.classList.add('success');
             copyButton.innerHTML = CHECK_ICON_SVG;
             copyButton.setAttribute('aria-label', 'Copied!');
         }
-        // Reset after 2 seconds
         this._copyTimeout = window.setTimeout(() => {
             this._showingSuccess = false;
             const btn = this.shadowRoot.querySelector('.copy-button');
@@ -193,10 +103,6 @@ export class TyCopy extends TyComponent {
             this._copyTimeout = null;
         }, 2000);
     }
-    /**
-     * Show copy error animation
-     * Swaps copy icon → red X icon → copy icon
-     */
     showCopyError() {
         if (this._copyTimeout !== null) {
             clearTimeout(this._copyTimeout);
@@ -218,40 +124,29 @@ export class TyCopy extends TyComponent {
             this._copyTimeout = null;
         }, 2000);
     }
-    /**
-     * Setup event listeners
-     */
     setupEventListeners() {
         const shadow = this.shadowRoot;
         const inputWrapper = shadow.querySelector('.input-wrapper');
         const copyButton = shadow.querySelector('.copy-button');
-        // Make entire field clickable for copying
         if (inputWrapper && !this.disabled) {
             const wrapperEl = inputWrapper;
             wrapperEl.addEventListener('click', (e) => {
-                // Prevent double-triggering if button was clicked
                 if (e.target === copyButton || e.target.closest('.copy-button')) {
                     return;
                 }
                 this.copyToClipboard();
             });
-            // Add visual feedback - make it look clickable
             wrapperEl.style.cursor = 'pointer';
         }
-        // Button click handler
         if (copyButton) {
             copyButton.addEventListener('click', () => {
                 this.copyToClipboard();
             });
         }
     }
-    /**
-     * Render the component
-     */
     render() {
         const shadow = this.shadowRoot;
         const classes = this.buildClassList();
-        // Determine display element based on format, multiline and scroll
         const valueClass = [
             'copy-field-value',
             this.multiline ? 'multiline' : '',
@@ -277,12 +172,8 @@ export class TyCopy extends TyComponent {
         </div>
       </div>
     `;
-        // Re-setup event listeners after render
         this.setupEventListeners();
     }
-    // ============================================================================
-    // PROPERTY ACCESSORS - Simple wrappers (no logic!)
-    // ============================================================================
     get value() {
         return this.getProperty('value');
     }
@@ -339,9 +230,6 @@ export class TyCopy extends TyComponent {
     }
 }
 TyCopy.formAssociated = true;
-// ============================================================================
-// PROPERTY CONFIGURATION - Declarative property lifecycle
-// ============================================================================
 TyCopy.properties = {
     value: {
         type: 'string',
@@ -367,9 +255,6 @@ TyCopy.properties = {
             return v;
         },
     },
-    // Any string is accepted: built-ins get static CSS, other identifiers
-    // become custom flavors (see _syncCustomFlavor), garbage degrades to
-    // the default look.
     flavor: {
         type: 'string',
         visual: true,
@@ -402,14 +287,10 @@ TyCopy.properties = {
         default: false,
     },
 };
-// Register the custom element
 if (!customElements.get('ty-copy')) {
     customElements.define('ty-copy', TyCopy);
 }
-// Also exposed as ty-copy-field — says what it is (a read-only field with a
-// copy button). A constructor can only register once, hence the subclass.
 if (!customElements.get('ty-copy-field')) {
     customElements.define('ty-copy-field', class TyCopyField extends TyCopy {
     });
 }
-//# sourceMappingURL=copy.js.map

package/lib/components/date-picker.d.ts

@@ -1,51 +1,9 @@
 /**
- * TyDatePicker Web Component
- * PORTED FROM: cljs/ty/components/date_picker.cljs
- *
- * A date picker component with read-only input and calendar dropdown.
- * Supports date-only and date+time modes with smart time input.
- *
- * Architecture:
- * - Read-only input stub (displays formatted date)
- * - Calendar dropdown (modal dialog with ty-calendar)
- * - Optional time input (with smart digit navigation)
- * - Form participation via ElementInternals
- * - UTC output, local display
- *
- * Features:
- * - Date selection with calendar dropdown
- * - Optional time input with smart navigation
- * - Form integration (works with FormData)
- * - UTC value output for server communication
- * - Localized display formatting (Intl API)
- * - Clearable with clear button
- * - Keyboard navigation (Escape to close)
- * - Outside click handling
- *
- * @example
- * ```html
- * <!-- Basic date picker -->
- * <ty-date-picker
- *   label="Select Date"
- *   placeholder="Choose a date">
- * </ty-date-picker>
- *
- * <!-- With time -->
- * <ty-date-picker
- *   with-time="true"
- *   label="Select Date & Time">
- * </ty-date-picker>
- *
- * <!-- Form integration -->
- * <form>
- *   <ty-date-picker name="booking-date"></ty-date-picker>
- *   <button type="submit">Submit</button>
- * </form>
- *
- * <!-- Pre-filled value (UTC) -->
- * <ty-date-picker value="2024-09-21T08:30:00.000Z"></ty-date-picker>
- * ```
+ * TyDatePicker Web Component — read-only input stub + calendar dropdown
+ * (modal <dialog>), optional time input, form participation via
+ * ElementInternals. Value is UTC; display is local.
  */
+import { type Placement } from '../utils/positioning.js';
 import { TyComponent } from '../base/ty-component.js';
 import type { Flavor } from '../types/common.js';
 import type { PropertyChange } from '../utils/property-manager.js';
@@ -66,17 +24,11 @@ interface DatePickerState extends DateComponents {
     withTime: boolean;
     open: boolean;
 }
-/**
- * Date picker sizes
- */
 type DatePickerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
  * Date picker flavors (visual styles)
  */
 type DatePickerFlavor = 'default' | Flavor;
-/**
- * Date format types
- */
 type DateFormatType = 'short' | 'medium' | 'long' | 'full';
 /**
  * Change event detail
@@ -90,6 +42,11 @@ export interface DatePickerChangeDetail {
 }
 export declare class TyDatePicker extends TyComponent<DatePickerState> {
     protected static properties: {
+        placement: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
         size: {
             type: "string";
             visual: boolean;
@@ -178,35 +135,20 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
     private _timeInput?;
     private _localeObserver?;
     private _customFlavorSheet;
-    /**
-     * Form-associated custom element
-     */
     static formAssociated: boolean;
     constructor();
-    /**
-     * Called when component connects to DOM
-     * TyComponent handles property capture automatically
-     */
+    /** TyComponent handles property capture automatically. */
     protected onConnect(): void;
     /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
     private _syncCustomFlavor;
-    /**
-     * Called when component disconnects from DOM
-     */
     protected onDisconnect(): void;
-    /**
-     * Called when properties change
-     * Handle state updates BEFORE render
-     */
+    /** Handle state updates BEFORE render. */
     protected onPropertiesChanged(changes: PropertyChange[]): void;
     /**
      * Get form value - returns UTC string from current state
      * TyComponent calls this automatically when value property changes
      */
     protected getFormValue(): FormDataEntryValue | null;
-    /**
-     * Extract current date components from internal state
-     */
     private getComponents;
     /**
      * Whether internal state has a complete date
@@ -218,15 +160,8 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
     private getFormattedValue;
     /**
      * Initialize component state from attributes
-     *
-     * PORTED FROM: init-component-state! in date_picker.cljs
      */
     private initializeState;
-    /**
-     * Update internal state
-     *
-     * PORTED FROM: update-component-state! in date_picker.cljs
-     */
     private updateState;
     /**
      * Sync form value with current state
@@ -235,18 +170,13 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
     private syncFormValue;
     /**
      * Handle time input changes from TimeInput class
-     *
-     * PORTED FROM: handle-time-change! in date_picker.cljs
      */
     handleTimeInputChange(hour: number, minute: number): void;
-    /**
-     * Emit change event
-     *
-     * PORTED FROM: emit-change-event! in date_picker.cljs
-     */
     private emitChangeEvent;
     get size(): DatePickerSize;
     set size(v: DatePickerSize);
+    get placement(): Placement | '';
+    set placement(v: Placement | '');
     get flavor(): DatePickerFlavor;
     set flavor(v: DatePickerFlavor);
     get label(): string;
@@ -289,33 +219,10 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
      * without needing the built-in clear button. Mirrors ty-select's clear().
      */
     clear(): void;
-    /**
-     * Build CSS classes for the stub element
-     *
-     * PORTED FROM: build-stub-classes in date_picker.cljs
-     */
     private buildStubClasses;
-    /**
-     * Render the date picker stub (input display)
-     *
-     * PORTED FROM: render-date-picker-stub in date_picker.cljs
-     */
     private renderStub;
-    /**
-     * Create time input element
-     *
-     * PORTED FROM: create-time-input in date_picker.cljs
-     */
     private createTimeInputElement;
-    /**
-     * Render time input section
-     */
     private renderTimeSection;
-    /**
-     * Render calendar dropdown with dialog
-     *
-     * PORTED FROM: render-calendar-dropdown in date_picker.cljs
-     */
     private renderCalendarDropdown;
     /**
      * Render native date input for mobile touch devices.
@@ -323,33 +230,13 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
      * Reuses .date-picker-stub styling and existing event/state infrastructure.
      */
     private renderNativeInput;
-    /**
-     * Calculate calendar position
-     *
-     * PORTED FROM: calculate-calendar-position! in date_picker.cljs
-     */
     private calculateCalendarPosition;
-    /**
-     * Render container structure
-     *
-     * PORTED FROM: render-container-structure in date_picker.cljs
-     */
     private renderContainer;
-    /**
-     * Main render method
-     *
-     * PORTED FROM: render! in date_picker.cljs
-     */
     protected render(): void;
     /**
      * Update display without destroying DOM (for open dialog)
-     *
-     * PORTED FROM: update-display! in date_picker.cljs
      */
     private updateDisplay;
-    /**
-     * Setup document-level event listeners
-     */
     private setupEventListeners;
     private handleStubClick;
     /**
@@ -357,48 +244,12 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
      */
     private clearValue;
     private handleClearClick;
-    /**
-     * Handle calendar date selection
-     *
-     * PORTED FROM: handle-calendar-change! in date_picker.cljs
-     */
     private handleCalendarChange;
-    /**
-     * Handle dialog backdrop clicks
-     *
-     * PORTED FROM: handle-dialog-click! in date_picker.cljs
-     */
     private handleDialogClick;
-    /**
-     * Handle clicks outside the date picker
-     *
-     * PORTED FROM: handle-outside-click! in date_picker.cljs
-     */
     private handleOutsideClick;
-    /**
-     * Handle Escape key press
-     *
-     * PORTED FROM: handle-escape-key! in date_picker.cljs
-     */
     private handleEscapeKey;
-    /**
-     * Open calendar dropdown
-     *
-     * PORTED FROM: open-dropdown! in date_picker.cljs
-     */
     private openDropdown;
-    /**
-     * Close calendar dropdown
-     *
-     * PORTED FROM: close-dropdown! in date_picker.cljs
-     */
     private closeDropdown;
-    /**
-     * Clean up event listeners and state
-     *
-     * PORTED FROM: cleanup! in date_picker.cljs
-     */
     private cleanup;
 }
 export {};
-//# sourceMappingURL=date-picker.d.ts.map