tyrell-components 1.0.0-TC51 → 1.0.0-TC53

package/lib/components/selected-tags.js

@@ -1,194 +1,194 @@
 function parseValues(raw) {
-    return raw.split(',').map(s => s.trim()).filter(Boolean);
+return raw.split(',').map(s => s.trim()).filter(Boolean);
 }
 function interpolate(text, ctx) {
-    return text.replace(/\{([\w-]+)\}/g, (match, key) => ctx[key] ?? match);
+return text.replace(/\{([\w-]+)\}/g, (match, key) => ctx[key] ?? match);
 }
 export class TySelectedOptions extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this._picker = null;
-        this._onChange = () => this.renderChips();
-        this._childObserver = null;
-        this._pickerObserver = null;
-        this._lastTemplate = null;
-        this._pickerOpen = false;
-        this._onPickerOpen = () => {
-            this._pickerOpen = true;
-        };
-        this._onPickerClose = () => {
-            this._pickerOpen = false;
-            this.renderChips();
-        };
-    }
-    static get observedAttributes() {
-        return ['for'];
-    }
-    connectedCallback() {
-        if (!this.style.display)
-            this.style.display = 'contents';
-        this.bind();
-        this.renderChips();
-        this._childObserver = new MutationObserver(() => {
-            const template = this.template();
-            if (template !== this._lastTemplate) {
-                this.renderChips();
-            }
-        });
-        this._childObserver.observe(this, { childList: true });
-    }
-    disconnectedCallback() {
-        this.unbind();
-        this._childObserver?.disconnect();
-        this._childObserver = null;
-    }
-    attributeChangedCallback() {
-        if (!this.isConnected)
-            return;
-        this.bind();
-        this.renderChips();
-    }
-    resolvePicker() {
-        const id = this.getAttribute('for');
-        const el = id
-            ? document.getElementById(id)
-            : this.previousElementSibling;
-        return el ?? null;
-    }
-    bind() {
-        const next = this.resolvePicker();
-        if (next === this._picker)
-            return;
-        this.unbind();
-        this._picker = next;
-        this._picker?.addEventListener('change', this._onChange);
-        this._picker?.addEventListener('open', this._onPickerOpen);
-        this._picker?.addEventListener('close', this._onPickerClose);
-        if (this._picker) {
-            this._pickerObserver = new MutationObserver(() => this.renderChips());
-            this._pickerObserver.observe(this._picker, {
-                childList: true,
-                subtree: true,
-                attributes: true,
-                attributeFilter: ['selected'],
-            });
-        }
-    }
-    unbind() {
-        this._picker?.removeEventListener('change', this._onChange);
-        this._picker?.removeEventListener('open', this._onPickerOpen);
-        this._picker?.removeEventListener('close', this._onPickerClose);
-        this._pickerObserver?.disconnect();
-        this._pickerObserver = null;
-        this._picker = null;
-        this._pickerOpen = false;
-    }
-    values() {
-        return parseValues(this._picker?.value ?? '');
-    }
-    template() {
-        return this.querySelector(':scope > template');
-    }
-    context(value) {
-        const opt = this._picker?.querySelector(`[value="${CSS.escape(value)}"]`);
-        const ctx = {
-            value,
-            label: opt?.getAttribute('label') || opt?.textContent?.trim() || value,
-            flavor: opt?.getAttribute('flavor') ?? '',
-        };
-        if (opt) {
-            for (const attr of Array.from(opt.attributes)) {
-                if (attr.name.startsWith('data-'))
-                    ctx[attr.name] = attr.value;
-            }
-        }
-        return ctx;
-    }
-    templateSource(template) {
-        if (template.content.hasChildNodes())
-            return template.content;
-        const frag = document.createDocumentFragment();
-        template.childNodes.forEach(n => frag.appendChild(n.cloneNode(true)));
-        return frag;
-    }
-    stampTemplate(template, value) {
-        const ctx = this.context(value);
-        const clone = this.templateSource(template).cloneNode(true);
-        const walker = document.createTreeWalker(clone, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
-        for (let node = walker.nextNode(); node; node = walker.nextNode()) {
-            if (node.nodeType === Node.TEXT_NODE) {
-                if (node.textContent?.includes('{')) {
-                    node.textContent = interpolate(node.textContent, ctx);
-                }
-            }
-            else {
-                const el = node;
-                for (const attr of Array.from(el.attributes)) {
-                    if (!attr.value.includes('{'))
-                        continue;
-                    const resolved = interpolate(attr.value, ctx);
-                    if (/^\{[\w-]+\}$/.test(attr.value) && (resolved === '' || resolved === attr.value)) {
-                        el.removeAttribute(attr.name);
-                    }
-                    else {
-                        el.setAttribute(attr.name, resolved);
-                    }
-                }
-            }
-        }
-        for (const el of Array.from(clone.children)) {
-            el.addEventListener('dismiss', (e) => {
-                e.stopPropagation();
-                this.deselect(value);
-            });
-        }
-        return clone;
-    }
-    defaultChip(value) {
-        const ctx = this.context(value);
-        const tag = document.createElement('ty-tag');
-        tag.setAttribute('value', value);
-        tag.setAttribute('dismissible', 'true');
-        if (ctx.flavor)
-            tag.setAttribute('flavor', ctx.flavor);
-        tag.textContent = ctx.label;
-        tag.addEventListener('dismiss', () => this.deselect(value));
-        return tag;
-    }
-    renderChips() {
-        if (this._pickerOpen)
-            return;
-        const template = this.template();
-        this._lastTemplate = template;
-        if (!this._picker) {
-            this.replaceChildren(...(template ? [template] : []));
-            return;
-        }
-        const frag = document.createDocumentFragment();
-        if (template)
-            frag.appendChild(template);
-        for (const value of this.values()) {
-            frag.appendChild(template ? this.stampTemplate(template, value) : this.defaultChip(value));
-        }
-        this.replaceChildren(frag);
-    }
-    deselect(value) {
-        if (!this._picker)
-            return;
-        const picker = this._picker;
-        if (typeof picker.deselectValue === 'function') {
-            picker.deselectValue(value);
-        }
-        else {
-            picker.value = this.values().filter(v => v !== value).join(',');
-            this.renderChips();
-        }
-    }
+constructor() {
+super(...arguments);
+this._picker = null;
+this._onChange = () => this.renderChips();
+this._childObserver = null;
+this._pickerObserver = null;
+this._lastTemplate = null;
+this._pickerOpen = false;
+this._onPickerOpen = () => {
+this._pickerOpen = true;
+};
+this._onPickerClose = () => {
+this._pickerOpen = false;
+this.renderChips();
+};
+}
+static get observedAttributes() {
+return ['for'];
+}
+connectedCallback() {
+if (!this.style.display)
+this.style.display = 'contents';
+this.bind();
+this.renderChips();
+this._childObserver = new MutationObserver(() => {
+const template = this.template();
+if (template !== this._lastTemplate) {
+this.renderChips();
+}
+});
+this._childObserver.observe(this, { childList: true });
+}
+disconnectedCallback() {
+this.unbind();
+this._childObserver?.disconnect();
+this._childObserver = null;
+}
+attributeChangedCallback() {
+if (!this.isConnected)
+return;
+this.bind();
+this.renderChips();
+}
+resolvePicker() {
+const id = this.getAttribute('for');
+const el = id
+? document.getElementById(id)
+: this.previousElementSibling;
+return el ?? null;
+}
+bind() {
+const next = this.resolvePicker();
+if (next === this._picker)
+return;
+this.unbind();
+this._picker = next;
+this._picker?.addEventListener('change', this._onChange);
+this._picker?.addEventListener('open', this._onPickerOpen);
+this._picker?.addEventListener('close', this._onPickerClose);
+if (this._picker) {
+this._pickerObserver = new MutationObserver(() => this.renderChips());
+this._pickerObserver.observe(this._picker, {
+childList: true,
+subtree: true,
+attributes: true,
+attributeFilter: ['selected'],
+});
+}
+}
+unbind() {
+this._picker?.removeEventListener('change', this._onChange);
+this._picker?.removeEventListener('open', this._onPickerOpen);
+this._picker?.removeEventListener('close', this._onPickerClose);
+this._pickerObserver?.disconnect();
+this._pickerObserver = null;
+this._picker = null;
+this._pickerOpen = false;
+}
+values() {
+return parseValues(this._picker?.value ?? '');
+}
+template() {
+return this.querySelector(':scope > template');
+}
+context(value) {
+const opt = this._picker?.querySelector(`[value="${CSS.escape(value)}"]`);
+const ctx = {
+value,
+label: opt?.getAttribute('label') || opt?.textContent?.trim() || value,
+flavor: opt?.getAttribute('flavor') ?? '',
+};
+if (opt) {
+for (const attr of Array.from(opt.attributes)) {
+if (attr.name.startsWith('data-'))
+ctx[attr.name] = attr.value;
+}
+}
+return ctx;
+}
+templateSource(template) {
+if (template.content.hasChildNodes())
+return template.content;
+const frag = document.createDocumentFragment();
+template.childNodes.forEach(n => frag.appendChild(n.cloneNode(true)));
+return frag;
+}
+stampTemplate(template, value) {
+const ctx = this.context(value);
+const clone = this.templateSource(template).cloneNode(true);
+const walker = document.createTreeWalker(clone, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
+for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+if (node.nodeType === Node.TEXT_NODE) {
+if (node.textContent?.includes('{')) {
+node.textContent = interpolate(node.textContent, ctx);
+}
+}
+else {
+const el = node;
+for (const attr of Array.from(el.attributes)) {
+if (!attr.value.includes('{'))
+continue;
+const resolved = interpolate(attr.value, ctx);
+if (/^\{[\w-]+\}$/.test(attr.value) && (resolved === '' || resolved === attr.value)) {
+el.removeAttribute(attr.name);
+}
+else {
+el.setAttribute(attr.name, resolved);
+}
+}
+}
+}
+for (const el of Array.from(clone.children)) {
+el.addEventListener('dismiss', (e) => {
+e.stopPropagation();
+this.deselect(value);
+});
+}
+return clone;
+}
+defaultChip(value) {
+const ctx = this.context(value);
+const tag = document.createElement('ty-tag');
+tag.setAttribute('value', value);
+tag.setAttribute('dismissible', 'true');
+if (ctx.flavor)
+tag.setAttribute('flavor', ctx.flavor);
+tag.textContent = ctx.label;
+tag.addEventListener('dismiss', () => this.deselect(value));
+return tag;
+}
+renderChips() {
+if (this._pickerOpen)
+return;
+const template = this.template();
+this._lastTemplate = template;
+if (!this._picker) {
+this.replaceChildren(...(template ? [template] : []));
+return;
+}
+const frag = document.createDocumentFragment();
+if (template)
+frag.appendChild(template);
+for (const value of this.values()) {
+frag.appendChild(template ? this.stampTemplate(template, value) : this.defaultChip(value));
+}
+this.replaceChildren(frag);
+}
+deselect(value) {
+if (!this._picker)
+return;
+const picker = this._picker;
+if (typeof picker.deselectValue === 'function') {
+picker.deselectValue(value);
+}
+else {
+picker.value = this.values().filter(v => v !== value).join(',');
+this.renderChips();
+}
+}
 }
 if (!customElements.get('ty-selected-options')) {
-    customElements.define('ty-selected-options', TySelectedOptions);
+customElements.define('ty-selected-options', TySelectedOptions);
 }
 if (!customElements.get('ty-selected-tags')) {
-    customElements.define('ty-selected-tags', class TySelectedTags extends TySelectedOptions {
-    });
+customElements.define('ty-selected-tags', class TySelectedTags extends TySelectedOptions {
+});
 }

package/lib/components/step.js

@@ -2,68 +2,68 @@ import { ensureStyles } from '../utils/styles.js';
 import { stepStyles } from '../styles/step.js';
 import { CustomScrollbar, isCustomScrollbarEnabled } from '../utils/custom-scrollbar.js';
 export class TyStep extends HTMLElement {
-    static get observedAttributes() {
-        return ['id', 'label', 'description', 'disabled', 'status'];
-    }
-    constructor() {
-        super();
-        this._scrollbar = null;
-        this.attachShadow({ mode: 'open' });
-    }
-    connectedCallback() {
-        this._render();
-    }
-    disconnectedCallback() {
-        this._destroyScrollbar();
-    }
-    attributeChangedCallback(_name, _oldValue, _newValue) {
-        this._render();
-    }
-    _render() {
-        const shadowRoot = this.shadowRoot;
-        if (!shadowRoot)
-            return;
-        const id = this.getAttribute('id');
-        if (!shadowRoot.querySelector('.step-wrapper')) {
-            ensureStyles(shadowRoot, { css: stepStyles, id: 'ty-step' });
-            shadowRoot.innerHTML = `
-        <div class="step-wrapper"
-             role="tabpanel"
-             ${id ? `id="panel-${id}"` : ''}
-             ${id ? `aria-labelledby="step-${id}"` : ''}
-        >
-          <div class="step-panel">
-            <slot></slot>
-          </div>
-        </div>
-      `;
-            this._setupScrollbar();
-        }
-    }
-    _setupScrollbar() {
-        const panel = this.shadowRoot?.querySelector('.step-panel');
-        const wrapper = this.shadowRoot?.querySelector('.step-wrapper');
-        if (!panel || !wrapper)
-            return;
-        if (!isCustomScrollbarEnabled())
-            return;
-        panel.classList.add('ty-custom-scroll');
-        this._scrollbar = new CustomScrollbar(panel, { vertical: true });
-        if (this._scrollbar.trackY) {
-            wrapper.appendChild(this._scrollbar.trackY);
-        }
-    }
-    _destroyScrollbar() {
-        if (this._scrollbar) {
-            this._scrollbar.trackY?.remove();
-            this._scrollbar.destroy();
-            this._scrollbar = null;
-        }
-    }
-    resetScroll() {
-        this._scrollbar?.scrollToTop(false);
-    }
+static get observedAttributes() {
+return ['id', 'label', 'description', 'disabled', 'status'];
+}
+constructor() {
+super();
+this._scrollbar = null;
+this.attachShadow({ mode: 'open' });
+}
+connectedCallback() {
+this._render();
+}
+disconnectedCallback() {
+this._destroyScrollbar();
+}
+attributeChangedCallback(_name, _oldValue, _newValue) {
+this._render();
+}
+_render() {
+const shadowRoot = this.shadowRoot;
+if (!shadowRoot)
+return;
+const id = this.getAttribute('id');
+if (!shadowRoot.querySelector('.step-wrapper')) {
+ensureStyles(shadowRoot, { css: stepStyles, id: 'ty-step' });
+shadowRoot.innerHTML = `
+<div class="step-wrapper"
+role="tabpanel"
+${id ? `id="panel-${id}"` : ''}
+${id ? `aria-labelledby="step-${id}"` : ''}
+>
+<div class="step-panel">
+<slot></slot>
+</div>
+</div>
+`;
+this._setupScrollbar();
+}
+}
+_setupScrollbar() {
+const panel = this.shadowRoot?.querySelector('.step-panel');
+const wrapper = this.shadowRoot?.querySelector('.step-wrapper');
+if (!panel || !wrapper)
+return;
+if (!isCustomScrollbarEnabled())
+return;
+panel.classList.add('ty-custom-scroll');
+this._scrollbar = new CustomScrollbar(panel, { vertical: true });
+if (this._scrollbar.trackY) {
+wrapper.appendChild(this._scrollbar.trackY);
+}
+}
+_destroyScrollbar() {
+if (this._scrollbar) {
+this._scrollbar.trackY?.remove();
+this._scrollbar.destroy();
+this._scrollbar = null;
+}
+}
+resetScroll() {
+this._scrollbar?.scrollToTop(false);
+}
 }
 if (!customElements.get('ty-step')) {
-    customElements.define('ty-step', TyStep);
+customElements.define('ty-step', TyStep);
 }

package/lib/components/switch.d.ts

@@ -53,7 +53,7 @@ export declare class TySwitch extends TyComponent<SwitchState> implements TySwit
         size: {
             type: "string";
             visual: boolean;
-            default: string;
+            default: Size;
             validate: (v: any) => boolean;
             coerce: (v: any) => any;
         };