tyrell-components 1.0.0-TC52 → 1.0.0-TC53

package/lib/components/popup.js

@@ -9,275 +9,275 @@ const escapeHandlers = new WeakMap();
 const closeRequestHandlers = new WeakMap();
 const popupIds = new WeakMap();
 function parseBoolAttr(el, name) {
-    return el.hasAttribute(name);
+return el.hasAttribute(name);
 }
 function parseIntAttr(el, name, defaultValue) {
-    const value = el.getAttribute(name);
-    if (value === null)
-        return defaultValue;
-    const parsed = parseInt(value, 10);
-    return isNaN(parsed) ? defaultValue : parsed;
+const value = el.getAttribute(name);
+if (value === null)
+return defaultValue;
+const parsed = parseInt(value, 10);
+return isNaN(parsed) ? defaultValue : parsed;
 }
 function getPopupAttributes(el) {
-    return {
-        manual: parseBoolAttr(el, 'manual'),
-        disableClose: parseBoolAttr(el, 'disable-close'),
-        placement: (el.getAttribute('placement') || 'bottom'),
-        offset: parseIntAttr(el, 'offset', 8),
-    };
+return {
+manual: parseBoolAttr(el, 'manual'),
+disableClose: parseBoolAttr(el, 'disable-close'),
+placement: (el.getAttribute('placement') || 'bottom'),
+offset: parseIntAttr(el, 'offset', 8),
+};
 }
 function getAnchorElement(el) {
-    return el.parentElement;
+return el.parentElement;
 }
 function getPopupDialog(shadowRoot) {
-    return shadowRoot.querySelector('.popup-dialog');
+return shadowRoot.querySelector('.popup-dialog');
 }
 function getPopupId(el) {
-    let id = popupIds.get(el);
-    if (!id) {
-        id = `popup-${el.id || Math.random().toString(36).substr(2, 9)}`;
-        popupIds.set(el, id);
-    }
-    return id;
+let id = popupIds.get(el);
+if (!id) {
+id = `popup-${el.id || Math.random().toString(36).substr(2, 9)}`;
+popupIds.set(el, id);
+}
+return id;
 }
 function updatePosition(el) {
-    const { placement, offset } = getPopupAttributes(el);
-    const shadowRoot = el.shadowRoot;
-    const anchor = getAnchorElement(el);
-    const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
-    if (!anchor || !dialog)
-        return;
-    const preferences = preferenceChain(placement);
-    const positionData = findBestPosition({
-        targetEl: anchor,
-        floatingEl: dialog,
-        preferences,
-        offset,
-        padding: 8,
-        containerPadding: 16,
-    });
-    el.style.setProperty('--popup-x', `${positionData.x}px`);
-    el.style.setProperty('--popup-y', `${positionData.y}px`);
-    dialog.dataset.side = positionData.placement.split('-')[0];
-    dialog.classList.add('position-calculated');
+const { placement, offset } = getPopupAttributes(el);
+const shadowRoot = el.shadowRoot;
+const anchor = getAnchorElement(el);
+const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
+if (!anchor || !dialog)
+return;
+const preferences = preferenceChain(placement);
+const positionData = findBestPosition({
+targetEl: anchor,
+floatingEl: dialog,
+preferences,
+offset,
+padding: 8,
+containerPadding: 16,
+});
+el.style.setProperty('--popup-x', `${positionData.x}px`);
+el.style.setProperty('--popup-y', `${positionData.y}px`);
+dialog.dataset.side = positionData.placement.split('-')[0];
+dialog.classList.add('position-calculated');
 }
 function closePopup(el, force = false) {
-    const { disableClose } = getPopupAttributes(el);
-    if (!force && disableClose)
-        return;
-    const shadowRoot = el.shadowRoot;
-    const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
-    if (!dialog)
-        return;
-    dialog.classList.remove('open');
-    dialog.classList.remove('preparing-animation');
-    const anchor = getAnchorElement(el);
-    if (anchor?.hasAttribute('aria-haspopup'))
-        anchor.setAttribute('aria-expanded', 'false');
-    setTimeout(() => {
-        dialog.classList.remove('position-calculated');
-        dialog.close();
-    }, 200);
+const { disableClose } = getPopupAttributes(el);
+if (!force && disableClose)
+return;
+const shadowRoot = el.shadowRoot;
+const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
+if (!dialog)
+return;
+dialog.classList.remove('open');
+dialog.classList.remove('preparing-animation');
+const anchor = getAnchorElement(el);
+if (anchor?.hasAttribute('aria-haspopup'))
+anchor.setAttribute('aria-expanded', 'false');
+setTimeout(() => {
+dialog.classList.remove('position-calculated');
+dialog.close();
+}, 200);
 }
 function openPopup(el) {
-    const popupId = getPopupId(el);
-    lockScroll(popupId);
-    const shadowRoot = el.shadowRoot;
-    const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
-    if (!dialog)
-        return;
-    dialog.showModal();
-    const anchor = getAnchorElement(el);
-    if (anchor?.hasAttribute('aria-haspopup'))
-        anchor.setAttribute('aria-expanded', 'true');
-    requestAnimationFrame(() => {
-        updatePosition(el);
-        dialog.classList.add('preparing-animation');
-        requestAnimationFrame(() => {
-            dialog.classList.add('open');
-            el.dispatchEvent(new CustomEvent('open'));
-        });
-    });
+const popupId = getPopupId(el);
+lockScroll(popupId);
+const shadowRoot = el.shadowRoot;
+const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
+if (!dialog)
+return;
+dialog.showModal();
+const anchor = getAnchorElement(el);
+if (anchor?.hasAttribute('aria-haspopup'))
+anchor.setAttribute('aria-expanded', 'true');
+requestAnimationFrame(() => {
+updatePosition(el);
+dialog.classList.add('preparing-animation');
+requestAnimationFrame(() => {
+dialog.classList.add('open');
+el.dispatchEvent(new CustomEvent('open'));
+});
+});
 }
 function togglePopup(el) {
-    const shadowRoot = el.shadowRoot;
-    const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
-    if (!dialog)
-        return;
-    if (dialog.classList.contains('open')) {
-        closePopup(el);
-    }
-    else {
-        openPopup(el);
-    }
+const shadowRoot = el.shadowRoot;
+const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
+if (!dialog)
+return;
+if (dialog.classList.contains('open')) {
+closePopup(el);
+}
+else {
+openPopup(el);
+}
 }
 function handleAnchorClick(el, event) {
-    event.preventDefault();
-    event.stopPropagation();
-    togglePopup(el);
+event.preventDefault();
+event.stopPropagation();
+togglePopup(el);
 }
 function handleOutsideClick(el, event) {
-    event.stopPropagation();
-    const shadowRoot = el.shadowRoot;
-    const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
-    if (dialog && event.target === dialog) {
-        event.preventDefault();
-        closePopup(el);
-    }
+event.stopPropagation();
+const shadowRoot = el.shadowRoot;
+const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
+if (dialog && event.target === dialog) {
+event.preventDefault();
+closePopup(el);
+}
 }
 function handleEscape(el, event) {
-    event.stopPropagation();
-    if (event.key === 'Escape') {
-        const { disableClose } = getPopupAttributes(el);
-        if (disableClose) {
-            event.preventDefault();
-        }
-        else {
-            closePopup(el);
-        }
-    }
+event.stopPropagation();
+if (event.key === 'Escape') {
+const { disableClose } = getPopupAttributes(el);
+if (disableClose) {
+event.preventDefault();
+}
+else {
+closePopup(el);
+}
+}
 }
 function handleCloseRequest(el, event) {
-    event.stopPropagation();
-    closePopup(el, true);
+event.stopPropagation();
+closePopup(el, true);
 }
 function setupAnchorEvents(el) {
-    const { manual } = getPopupAttributes(el);
-    const anchor = getAnchorElement(el);
-    if (!anchor || manual)
-        return;
-    anchor.setAttribute('aria-haspopup', 'dialog');
-    if (!anchor.hasAttribute('aria-expanded'))
-        anchor.setAttribute('aria-expanded', 'false');
-    const existingHandler = anchorClickHandlers.get(el);
-    if (existingHandler) {
-        anchor.removeEventListener('pointerdown', existingHandler);
-    }
-    const existingKeyHandler = anchorKeyClickHandlers.get(el);
-    if (existingKeyHandler) {
-        anchor.removeEventListener('click', existingKeyHandler);
-    }
-    const handler = (e) => handleAnchorClick(el, e);
-    anchorClickHandlers.set(el, handler);
-    anchor.addEventListener('pointerdown', handler);
-    const keyHandler = (e) => {
-        if (e.detail === 0)
-            handleAnchorClick(el, e);
-    };
-    anchorKeyClickHandlers.set(el, keyHandler);
-    anchor.addEventListener('click', keyHandler);
+const { manual } = getPopupAttributes(el);
+const anchor = getAnchorElement(el);
+if (!anchor || manual)
+return;
+anchor.setAttribute('aria-haspopup', 'dialog');
+if (!anchor.hasAttribute('aria-expanded'))
+anchor.setAttribute('aria-expanded', 'false');
+const existingHandler = anchorClickHandlers.get(el);
+if (existingHandler) {
+anchor.removeEventListener('pointerdown', existingHandler);
+}
+const existingKeyHandler = anchorKeyClickHandlers.get(el);
+if (existingKeyHandler) {
+anchor.removeEventListener('click', existingKeyHandler);
+}
+const handler = (e) => handleAnchorClick(el, e);
+anchorClickHandlers.set(el, handler);
+anchor.addEventListener('pointerdown', handler);
+const keyHandler = (e) => {
+if (e.detail === 0)
+handleAnchorClick(el, e);
+};
+anchorKeyClickHandlers.set(el, keyHandler);
+anchor.addEventListener('click', keyHandler);
 }
 function cleanupAnchorEvents(el) {
-    const anchor = getAnchorElement(el);
-    const handler = anchorClickHandlers.get(el);
-    if (anchor && handler) {
-        anchor.removeEventListener('pointerdown', handler);
-        anchorClickHandlers.delete(el);
-    }
-    const keyHandler = anchorKeyClickHandlers.get(el);
-    if (anchor && keyHandler) {
-        anchor.removeEventListener('click', keyHandler);
-        anchorKeyClickHandlers.delete(el);
-    }
-    anchor?.removeAttribute('aria-haspopup');
-    anchor?.removeAttribute('aria-expanded');
+const anchor = getAnchorElement(el);
+const handler = anchorClickHandlers.get(el);
+if (anchor && handler) {
+anchor.removeEventListener('pointerdown', handler);
+anchorClickHandlers.delete(el);
+}
+const keyHandler = anchorKeyClickHandlers.get(el);
+if (anchor && keyHandler) {
+anchor.removeEventListener('click', keyHandler);
+anchorKeyClickHandlers.delete(el);
+}
+anchor?.removeAttribute('aria-haspopup');
+anchor?.removeAttribute('aria-expanded');
 }
 function render(el) {
-    const shadowRoot = el.shadowRoot;
-    if (!shadowRoot)
-        return;
-    const existingDialog = getPopupDialog(shadowRoot);
-    ensureStyles(shadowRoot, { css: popupStyles, id: 'ty-popup' });
-    if (!existingDialog) {
-        const dialog = document.createElement('dialog');
-        const container = document.createElement('div');
-        const content = document.createElement('slot');
-        dialog.className = 'popup-dialog';
-        container.className = 'popup-container';
-        content.id = 'popup-content';
-        shadowRoot.appendChild(dialog);
-        dialog.appendChild(container);
-        container.appendChild(content);
-        el.style.setProperty('--popup-x', '0px');
-        el.style.setProperty('--popup-y', '0px');
-        const outsideHandler = (e) => handleOutsideClick(el, e);
-        outsideClickHandlers.set(el, outsideHandler);
-        dialog.addEventListener('pointerdown', outsideHandler);
-        const escapeHandler = (e) => handleEscape(el, e);
-        escapeHandlers.set(el, escapeHandler);
-        el.addEventListener('keydown', escapeHandler);
-        dialog.addEventListener('close', () => {
-            const popupId = getPopupId(el);
-            unlockScroll(popupId);
-            dialog.classList.remove('open');
-            dialog.classList.remove('preparing-animation');
-            el.dispatchEvent(new CustomEvent('close'));
-        });
-    }
-    el.closePopup = () => closePopup(el, true);
-    el.openPopup = () => openPopup(el);
-    el.togglePopup = () => togglePopup(el);
-    const closeRequestHandler = (e) => handleCloseRequest(el, e);
-    closeRequestHandlers.set(el, closeRequestHandler);
-    el.addEventListener('ty:close-popup', closeRequestHandler);
-    setupAnchorEvents(el);
+const shadowRoot = el.shadowRoot;
+if (!shadowRoot)
+return;
+const existingDialog = getPopupDialog(shadowRoot);
+ensureStyles(shadowRoot, { css: popupStyles, id: 'ty-popup' });
+if (!existingDialog) {
+const dialog = document.createElement('dialog');
+const container = document.createElement('div');
+const content = document.createElement('slot');
+dialog.className = 'popup-dialog';
+container.className = 'popup-container';
+content.id = 'popup-content';
+shadowRoot.appendChild(dialog);
+dialog.appendChild(container);
+container.appendChild(content);
+el.style.setProperty('--popup-x', '0px');
+el.style.setProperty('--popup-y', '0px');
+const outsideHandler = (e) => handleOutsideClick(el, e);
+outsideClickHandlers.set(el, outsideHandler);
+dialog.addEventListener('pointerdown', outsideHandler);
+const escapeHandler = (e) => handleEscape(el, e);
+escapeHandlers.set(el, escapeHandler);
+el.addEventListener('keydown', escapeHandler);
+dialog.addEventListener('close', () => {
+const popupId = getPopupId(el);
+unlockScroll(popupId);
+dialog.classList.remove('open');
+dialog.classList.remove('preparing-animation');
+el.dispatchEvent(new CustomEvent('close'));
+});
+}
+el.closePopup = () => closePopup(el, true);
+el.openPopup = () => openPopup(el);
+el.togglePopup = () => togglePopup(el);
+const closeRequestHandler = (e) => handleCloseRequest(el, e);
+closeRequestHandlers.set(el, closeRequestHandler);
+el.addEventListener('ty:close-popup', closeRequestHandler);
+setupAnchorEvents(el);
 }
 function cleanup(el) {
-    const popupId = popupIds.get(el);
-    if (popupId) {
-        unlockScroll(popupId);
-        popupIds.delete(el);
-    }
-    cleanupAnchorEvents(el);
-    const shadowRoot = el.shadowRoot;
-    const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
-    if (dialog) {
-        const outsideHandler = outsideClickHandlers.get(el);
-        if (outsideHandler) {
-            dialog.removeEventListener('pointerdown', outsideHandler);
-            outsideClickHandlers.delete(el);
-        }
-    }
-    const escapeHandler = escapeHandlers.get(el);
-    if (escapeHandler) {
-        el.removeEventListener('keydown', escapeHandler);
-        escapeHandlers.delete(el);
-    }
-    const closeRequestHandler = closeRequestHandlers.get(el);
-    if (closeRequestHandler) {
-        el.removeEventListener('ty:close-popup', closeRequestHandler);
-        closeRequestHandlers.delete(el);
-    }
+const popupId = popupIds.get(el);
+if (popupId) {
+unlockScroll(popupId);
+popupIds.delete(el);
+}
+cleanupAnchorEvents(el);
+const shadowRoot = el.shadowRoot;
+const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
+if (dialog) {
+const outsideHandler = outsideClickHandlers.get(el);
+if (outsideHandler) {
+dialog.removeEventListener('pointerdown', outsideHandler);
+outsideClickHandlers.delete(el);
+}
+}
+const escapeHandler = escapeHandlers.get(el);
+if (escapeHandler) {
+el.removeEventListener('keydown', escapeHandler);
+escapeHandlers.delete(el);
+}
+const closeRequestHandler = closeRequestHandlers.get(el);
+if (closeRequestHandler) {
+el.removeEventListener('ty:close-popup', closeRequestHandler);
+closeRequestHandlers.delete(el);
+}
 }
 export class TyPopup extends HTMLElement {
-    static get observedAttributes() {
-        return ['manual', 'disable-close', 'placement', 'offset'];
-    }
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-    }
-    connectedCallback() {
-        render(this);
-    }
-    disconnectedCallback() {
-        cleanup(this);
-    }
-    attributeChangedCallback(name, _oldValue, _newValue) {
-        render(this);
-        switch (name) {
-            case 'placement':
-            case 'offset':
-                render(this);
-                break;
-            case 'manual':
-            case 'disable-close':
-                cleanupAnchorEvents(this);
-                setupAnchorEvents(this);
-                break;
-        }
-    }
+static get observedAttributes() {
+return ['manual', 'disable-close', 'placement', 'offset'];
+}
+constructor() {
+super();
+this.attachShadow({ mode: 'open' });
+}
+connectedCallback() {
+render(this);
+}
+disconnectedCallback() {
+cleanup(this);
+}
+attributeChangedCallback(name, _oldValue, _newValue) {
+render(this);
+switch (name) {
+case 'placement':
+case 'offset':
+render(this);
+break;
+case 'manual':
+case 'disable-close':
+cleanupAnchorEvents(this);
+setupAnchorEvents(this);
+break;
+}
+}
 }
 if (!customElements.get('ty-popup')) {
-    customElements.define('ty-popup', TyPopup);
+customElements.define('ty-popup', TyPopup);
 }

package/lib/components/radio.d.ts

@@ -35,7 +35,7 @@ export declare class TyRadio extends TyComponent<RadioState> implements TyRadioE
         size: {
             type: "string";
             visual: boolean;
-            default: string;
+            default: Size;
         };
         flavor: {
             type: "string";
@@ -127,7 +127,7 @@ export declare class TyRadioGroup extends TyComponent<RadioGroupState> implement
         size: {
             type: "string";
             visual: boolean;
-            default: string;
+            default: Size;
         };
         flavor: {
             type: "string";