tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/components/copy.js

@@ -1,415 +1,298 @@
-/**
- * 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 { DEFAULT_SIZE } from '../types/common.js';
 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
-        // ============================================================================
-        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)
-            classes.push('disabled');
-        if (this.required)
-            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,
-                composed: true
-            }));
-        }
-        catch (err) {
-            // Fallback for non-secure contexts (non-HTTPS)
-            try {
-                const textarea = document.createElement('textarea');
-                textarea.value = this.value;
-                textarea.style.position = 'fixed';
-                textarea.style.opacity = '0';
-                document.body.appendChild(textarea);
-                textarea.select();
-                document.execCommand('copy');
-                document.body.removeChild(textarea);
-                this.dispatchEvent(new CustomEvent('copy-success', {
-                    detail: { value: this.value },
-                    bubbles: true,
-                    composed: true
-                }));
-            }
-            catch (fallbackErr) {
-                console.error('[ty-copy] Failed to copy:', fallbackErr);
-                this.dispatchEvent(new CustomEvent('copy-error', {
-                    detail: { error: fallbackErr },
-                    bubbles: true,
-                    composed: true
-                }));
-                this.showCopyError();
-                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');
-            if (btn) {
-                btn.classList.remove('success');
-                btn.innerHTML = COPY_ICON_SVG;
-                btn.setAttribute('aria-label', 'Copy to clipboard');
-            }
-            this._copyTimeout = null;
-        }, 2000);
-    }
-    /**
-     * Show copy error animation
-     * Swaps copy icon → red X icon → copy icon
-     */
-    showCopyError() {
-        if (this._copyTimeout !== null) {
-            clearTimeout(this._copyTimeout);
-        }
-        this._showingSuccess = false;
-        const copyButton = this.shadowRoot.querySelector('.copy-button');
-        if (copyButton) {
-            copyButton.classList.add('error');
-            copyButton.innerHTML = ERROR_ICON_SVG;
-            copyButton.setAttribute('aria-label', 'Copy failed');
-        }
-        this._copyTimeout = window.setTimeout(() => {
-            const btn = this.shadowRoot.querySelector('.copy-button');
-            if (btn) {
-                btn.classList.remove('error');
-                btn.innerHTML = COPY_ICON_SVG;
-                btn.setAttribute('aria-label', 'Copy to clipboard');
-            }
-            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' : '',
-            this.horizontalScroll ? 'horizontal-scroll' : '',
-        ].filter(Boolean).join(' ');
-        const displayElement = this.format === 'code'
-            ? `<code class="${valueClass}">${this.value || ''}</code>`
-            : `<div class="${valueClass}">${this.value || ''}</div>`;
-        const labelHtml = this.label ? `
-      <label class="ty-field-label">
-        ${this.label}
-        ${this.required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ''}
-      </label>
-    ` : '';
-        shadow.innerHTML = `
-      <div class="input-container">
-        ${labelHtml}
-        <div class="input-wrapper ${classes}">
-          ${displayElement}
-          <button class="copy-button${this._showingSuccess ? ' success' : ''}" type="button" aria-label="${this._showingSuccess ? 'Copied!' : 'Copy to clipboard'}" ${this.disabled ? 'disabled' : ''}>
-            ${this._showingSuccess ? CHECK_ICON_SVG : COPY_ICON_SVG}
-          </button>
-        </div>
-      </div>
-    `;
-        // Re-setup event listeners after render
-        this.setupEventListeners();
-    }
-    // ============================================================================
-    // PROPERTY ACCESSORS - Simple wrappers (no logic!)
-    // ============================================================================
-    get value() {
-        return this.getProperty('value');
-    }
-    set value(val) {
-        this.setProperty('value', val);
-    }
-    get label() {
-        return this.getProperty('label');
-    }
-    set label(val) {
-        this.setProperty('label', val);
-    }
-    get size() {
-        return this.getProperty('size');
-    }
-    set size(value) {
-        this.setProperty('size', value);
-    }
-    get flavor() {
-        return this.getProperty('flavor');
-    }
-    set flavor(value) {
-        this.setProperty('flavor', value);
-    }
-    get format() {
-        return this.getProperty('format');
-    }
-    set format(value) {
-        this.setProperty('format', value);
-    }
-    get multiline() {
-        return this.getProperty('multiline');
-    }
-    set multiline(value) {
-        this.setProperty('multiline', value);
-    }
-    get horizontalScroll() {
-        return this.getProperty('horizontalScroll');
-    }
-    set horizontalScroll(value) {
-        this.setProperty('horizontalScroll', value);
-    }
-    get disabled() {
-        return this.getProperty('disabled');
-    }
-    set disabled(value) {
-        this.setProperty('disabled', value);
-    }
-    get required() {
-        return this.getProperty('required');
-    }
-    set required(value) {
-        this.setProperty('required', value);
-    }
+constructor() {
+super();
+this._copyTimeout = null;
+this._showingSuccess = false;
+this._customFlavorSheet = null;
+ensureStyles(this.shadowRoot, { css: inputStyles, id: 'ty-input' });
+ensureStyles(this.shadowRoot, { css: copyStyles, id: 'ty-copy' });
+}
+onConnect() {
+this._syncCustomFlavor();
+}
+_syncCustomFlavor() {
+this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ base }) => copyCustomFlavorCss(base));
+}
+onDisconnect() {
+if (this._copyTimeout !== null) {
+clearTimeout(this._copyTimeout);
+this._copyTimeout = null;
+}
+}
+onPropertiesChanged(changes) {
+if (changes.some((c) => c.name === 'flavor')) {
+this._syncCustomFlavor();
+}
+}
+buildClassList() {
+const classes = [];
+if (this.disabled)
+classes.push('disabled');
+if (this.required)
+classes.push('required');
+return classes.join(' ');
+}
+async copyToClipboard() {
+if (this.disabled || !this.value)
+return;
+const value = this.value;
+try {
+await navigator.clipboard.writeText(value);
+this.dispatchEvent(new CustomEvent('copy-success', {
+detail: { value },
+bubbles: true,
+composed: true
+}));
+}
+catch (err) {
+try {
+const textarea = document.createElement('textarea');
+textarea.value = value;
+textarea.style.position = 'fixed';
+textarea.style.opacity = '0';
+document.body.appendChild(textarea);
+textarea.select();
+document.execCommand('copy');
+document.body.removeChild(textarea);
+this.dispatchEvent(new CustomEvent('copy-success', {
+detail: { value },
+bubbles: true,
+composed: true
+}));
+}
+catch (fallbackErr) {
+console.error('[ty-copy] Failed to copy:', fallbackErr);
+this.dispatchEvent(new CustomEvent('copy-error', {
+detail: { error: fallbackErr },
+bubbles: true,
+composed: true
+}));
+this.showCopyError();
+return;
+}
+}
+this.showCopySuccess();
+}
+showCopySuccess() {
+if (this._copyTimeout !== null) {
+clearTimeout(this._copyTimeout);
+}
+this._showingSuccess = true;
+const copyButton = this.shadowRoot.querySelector('.copy-button');
+if (copyButton) {
+copyButton.classList.add('success');
+copyButton.innerHTML = CHECK_ICON_SVG;
+copyButton.setAttribute('aria-label', 'Copied!');
+}
+this._copyTimeout = window.setTimeout(() => {
+this._showingSuccess = false;
+const btn = this.shadowRoot.querySelector('.copy-button');
+if (btn) {
+btn.classList.remove('success');
+btn.innerHTML = COPY_ICON_SVG;
+btn.setAttribute('aria-label', 'Copy to clipboard');
+}
+this._copyTimeout = null;
+}, 2000);
+}
+showCopyError() {
+if (this._copyTimeout !== null) {
+clearTimeout(this._copyTimeout);
+}
+this._showingSuccess = false;
+const copyButton = this.shadowRoot.querySelector('.copy-button');
+if (copyButton) {
+copyButton.classList.add('error');
+copyButton.innerHTML = ERROR_ICON_SVG;
+copyButton.setAttribute('aria-label', 'Copy failed');
+}
+this._copyTimeout = window.setTimeout(() => {
+const btn = this.shadowRoot.querySelector('.copy-button');
+if (btn) {
+btn.classList.remove('error');
+btn.innerHTML = COPY_ICON_SVG;
+btn.setAttribute('aria-label', 'Copy to clipboard');
+}
+this._copyTimeout = null;
+}, 2000);
+}
+setupEventListeners() {
+const shadow = this.shadowRoot;
+const inputWrapper = shadow.querySelector('.input-wrapper');
+const copyButton = shadow.querySelector('.copy-button');
+if (inputWrapper && !this.disabled) {
+const wrapperEl = inputWrapper;
+wrapperEl.addEventListener('click', (e) => {
+if (e.target === copyButton || e.target.closest('.copy-button')) {
+return;
+}
+this.copyToClipboard();
+});
+wrapperEl.style.cursor = 'pointer';
+}
+if (copyButton) {
+copyButton.addEventListener('click', () => {
+this.copyToClipboard();
+});
+}
+}
+render() {
+const shadow = this.shadowRoot;
+const classes = this.buildClassList();
+const valueClass = [
+'copy-field-value',
+this.multiline ? 'multiline' : '',
+this.horizontalScroll ? 'horizontal-scroll' : '',
+].filter(Boolean).join(' ');
+const displayElement = this.format === 'code'
+? `<code class="${valueClass}">${this.value || ''}</code>`
+: `<div class="${valueClass}">${this.value || ''}</div>`;
+const labelHtml = this.label ? `
+<label class="ty-field-label">
+${this.label}
+${this.required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ''}
+</label>
+` : '';
+shadow.innerHTML = `
+<div class="input-container">
+${labelHtml}
+<div class="input-wrapper ${classes}">
+${displayElement}
+<button class="copy-button${this._showingSuccess ? ' success' : ''}" type="button" aria-label="${this._showingSuccess ? 'Copied!' : 'Copy to clipboard'}" ${this.disabled ? 'disabled' : ''}>
+${this._showingSuccess ? CHECK_ICON_SVG : COPY_ICON_SVG}
+</button>
+</div>
+</div>
+`;
+this.setupEventListeners();
+}
+get value() {
+return this.getProperty('value');
+}
+set value(val) {
+this.setProperty('value', val);
+}
+get label() {
+return this.getProperty('label');
+}
+set label(val) {
+this.setProperty('label', val);
+}
+get size() {
+return this.getProperty('size');
+}
+set size(value) {
+this.setProperty('size', value);
+}
+get flavor() {
+return this.getProperty('flavor');
+}
+set flavor(value) {
+this.setProperty('flavor', value);
+}
+get format() {
+return this.getProperty('format');
+}
+set format(value) {
+this.setProperty('format', value);
+}
+get multiline() {
+return this.getProperty('multiline');
+}
+set multiline(value) {
+this.setProperty('multiline', value);
+}
+get horizontalScroll() {
+return this.getProperty('horizontalScroll');
+}
+set horizontalScroll(value) {
+this.setProperty('horizontalScroll', value);
+}
+get disabled() {
+return this.getProperty('disabled');
+}
+set disabled(value) {
+this.setProperty('disabled', value);
+}
+get required() {
+return this.getProperty('required');
+}
+set required(value) {
+this.setProperty('required', value);
+}
 }
 TyCopy.formAssociated = true;
-// ============================================================================
-// PROPERTY CONFIGURATION - Declarative property lifecycle
-// ============================================================================
 TyCopy.properties = {
-    value: {
-        type: 'string',
-        visual: true,
-        formValue: true,
-        default: '',
-    },
-    label: {
-        type: 'string',
-        visual: true,
-        default: '',
-    },
-    size: {
-        type: 'string',
-        visual: true,
-        default: 'md',
-        validate: (v) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(v),
-        coerce: (v) => {
-            if (!['xs', 'sm', 'md', 'lg', 'xl'].includes(v)) {
-                console.warn(`[ty-copy] Invalid size '${v}'. Using 'md'.`);
-                return 'md';
-            }
-            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,
-        default: 'neutral',
-    },
-    format: {
-        type: 'string',
-        visual: true,
-        default: 'text',
-        coerce: (v) => (v === 'code' ? 'code' : 'text'),
-    },
-    multiline: {
-        type: 'boolean',
-        visual: true,
-        default: false,
-    },
-    horizontalScroll: {
-        type: 'boolean',
-        visual: true,
-        default: false,
-    },
-    disabled: {
-        type: 'boolean',
-        visual: true,
-        default: false,
-    },
-    required: {
-        type: 'boolean',
-        visual: true,
-        default: false,
-    },
+value: {
+type: 'string',
+visual: true,
+formValue: true,
+default: '',
+},
+label: {
+type: 'string',
+visual: true,
+default: '',
+},
+size: {
+type: 'string',
+visual: true,
+default: DEFAULT_SIZE,
+validate: (v) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(v),
+coerce: (v) => {
+if (!['xs', 'sm', 'md', 'lg', 'xl'].includes(v)) {
+console.warn(`[ty-copy] Invalid size '${v}'. Using '${DEFAULT_SIZE}'.`);
+return DEFAULT_SIZE;
+}
+return v;
+},
+},
+flavor: {
+type: 'string',
+visual: true,
+default: 'neutral',
+},
+format: {
+type: 'string',
+visual: true,
+default: 'text',
+coerce: (v) => (v === 'code' ? 'code' : 'text'),
+},
+multiline: {
+type: 'boolean',
+visual: true,
+default: false,
+},
+horizontalScroll: {
+type: 'boolean',
+visual: true,
+default: false,
+},
+disabled: {
+type: 'boolean',
+visual: true,
+default: false,
+},
+required: {
+type: 'boolean',
+visual: true,
+default: false,
+},
 };
-// Register the custom element
 if (!customElements.get('ty-copy')) {
-    customElements.define('ty-copy', TyCopy);
+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 {
-    });
+customElements.define('ty-copy-field', class TyCopyField extends TyCopy {
+});
 }
-//# sourceMappingURL=copy.js.map