tyrell-components 1.0.0-TC52 → 1.0.0-TC53

package/lib/components/copy.js

@@ -1,3 +1,4 @@
+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';
@@ -8,289 +9,289 @@ const CHECK_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" heigh
 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';
 export class TyCopy extends TyComponent {
-    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 = [this.size];
-        if (this.disabled)
-            classes.push('disabled');
-        if (this.required)
-            classes.push('required');
-        return classes.join(' ');
-    }
-    async copyToClipboard() {
-        if (this.disabled || !this.value)
-            return;
-        try {
-            await navigator.clipboard.writeText(this.value);
-            this.dispatchEvent(new CustomEvent('copy-success', {
-                detail: { value: this.value },
-                bubbles: true,
-                composed: true
-            }));
-        }
-        catch (err) {
-            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;
-            }
-        }
-        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);
-    }
+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;
+try {
+await navigator.clipboard.writeText(this.value);
+this.dispatchEvent(new CustomEvent('copy-success', {
+detail: { value: this.value },
+bubbles: true,
+composed: true
+}));
+}
+catch (err) {
+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;
+}
+}
+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;
 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;
-        },
-    },
-    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,
+},
 };
 if (!customElements.get('ty-copy')) {
-    customElements.define('ty-copy', TyCopy);
+customElements.define('ty-copy', TyCopy);
 }
 if (!customElements.get('ty-copy-field')) {
-    customElements.define('ty-copy-field', class TyCopyField extends TyCopy {
-    });
+customElements.define('ty-copy-field', class TyCopyField extends TyCopy {
+});
 }

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

@@ -50,7 +50,7 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
         size: {
             type: "string";
             visual: boolean;
-            default: string;
+            default: import("../types/common.js").Size;
             validate: (v: any) => boolean;
             coerce: (v: any) => any;
         };