tyrell-components 1.0.0-TC55 → 1.0.0-TC56

package/lib/components/tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/components/tab.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AASH;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AA0DD;;GAEG;AACH,qBAAa,KAAM,SAAQ,WAAW;IACpC,0BAA0B;IAC1B,MAAM,KAAK,kBAAkB,aAE5B;;IAOD,iBAAiB;IAIjB,oBAAoB;IAIpB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI;CAG3F"}

package/lib/components/tab.js

@@ -1,44 +1,185 @@
 import { ensureStyles } from '../utils/styles.js';
 import { tabStyles } from '../styles/tab.js';
 import { CustomScrollbar, isCustomScrollbarEnabled } from '../utils/custom-scrollbar.js';
+import { getLoaderSvg } from '../utils/loader-registry.js';
+const STATUS_SLOTS = new Set(['loading', 'error']);
+const INERT_ELEMENTS = new Set(['template', 'script', 'style']);
 export class TyTab extends HTMLElement {
 static get observedAttributes() {
-return ['id', 'label', 'disabled'];
+return ['id', 'label', 'disabled', 'lazy'];
 }
 constructor() {
 super();
 this._scrollbar = null;
+this._panelLabel = null;
+this._shown = true;
+this._load = 'idle';
+this._contentObserver = null;
+this._contentChanged = false;
 this.attachShadow({ mode: 'open' });
 }
 connectedCallback() {
 this._render();
+if (!this._scrollbar)
+this._setupScrollbar();
+this._watchContent();
+}
+setPanelLabel(label) {
+this._panelLabel = label;
+this._syncPanel();
+}
+setShown(shown) {
+this._shown = shown;
+this._syncPanel();
 }
 disconnectedCallback() {
 this._destroyScrollbar();
+this._contentChanged = !!this._contentObserver?.takeRecords().length;
+this._contentObserver?.disconnect();
+this._contentObserver = null;
+}
+_requestLoad(index) {
+if (this._contentObserver?.takeRecords().length)
+this._checkContent(false);
+if (this._load === 'empty' || this._load === 'failed')
+this._fireLoad(index);
+}
+loadFailed() {
+if (this._load === 'loading' || this._load === 'empty')
+this._setLoad('failed');
 }
-attributeChangedCallback(_name, _oldValue, _newValue) {
+attributeChangedCallback(name, oldValue, newValue) {
 this._render();
+if (name === 'lazy') {
+if (this.isConnected)
+this._watchContent();
+return;
+}
+const tabs = this.parentElement;
+if (oldValue !== newValue && this.isConnected && tabs?.localName === 'ty-tabs') {
+tabs._queueUpdate?.(true);
+}
 }
 _render() {
 const shadowRoot = this.shadowRoot;
 if (!shadowRoot)
 return;
-const id = this.getAttribute('id');
 if (!shadowRoot.querySelector('.tab-wrapper')) {
 ensureStyles(shadowRoot, { css: tabStyles, id: 'ty-tab' });
 shadowRoot.innerHTML = `
-<div class="tab-wrapper"
-role="tabpanel"
-${id ? `id="panel-${id}"` : ''}
-${id ? `aria-labelledby="tab-${id}"` : ''}
->
-<div class="tab-panel">
+<div class="tab-wrapper">
+<div class="tab-panel" role="tabpanel" tabindex="0">
 <slot></slot>
 </div>
 </div>
 `;
-this._setupScrollbar();
 }
+this._syncPanel();
+}
+_watchContent() {
+const lazy = this.hasAttribute('lazy');
+if (lazy && !this._contentObserver) {
+this._contentObserver = new MutationObserver(() => this._checkContent(true));
+this._contentObserver.observe(this, { childList: true, characterData: true, subtree: true });
+}
+else if (!lazy && this._contentObserver) {
+this._contentObserver.disconnect();
+this._contentObserver = null;
+}
+const changed = this._contentChanged;
+this._contentChanged = false;
+this._checkContent(changed);
+}
+_hasContent() {
+for (const node of Array.from(this.childNodes)) {
+if (node.nodeType === Node.TEXT_NODE && node.textContent.trim())
+return true;
+if (node.nodeType !== Node.ELEMENT_NODE)
+continue;
+const el = node;
+if (!STATUS_SLOTS.has(el.getAttribute('slot') ?? '') && !INERT_ELEMENTS.has(el.localName))
+return true;
+}
+return false;
+}
+_checkContent(mutated) {
+if (!this.hasAttribute('lazy') || this._hasContent()) {
+this._setLoad('idle');
+return;
+}
+if (this._load !== 'idle')
+return;
+this._setLoad('empty');
+if (!mutated)
+return;
+queueMicrotask(() => {
+if (this._load === 'empty' && this._shown && this.parentElement?.localName === 'ty-tabs')
+this._fireLoad();
+});
+}
+_fireLoad(index) {
+const tabs = this.parentElement;
+if (index === undefined) {
+index = tabs?.localName === 'ty-tabs'
+? Array.from(tabs.querySelectorAll(':scope > ty-tab')).indexOf(this)
+: 0;
+}
+this._setLoad('loading');
+this.dispatchEvent(new CustomEvent('ty-tab-load', { detail: { id: this.id, index } }));
+}
+_ensureStatus(panel) {
+if (panel.querySelector('.tab-loading'))
+return;
+panel.insertAdjacentHTML('beforeend', `
+<div class="tab-loading" part="loading">
+<slot name="loading"><span class="tab-spinner" part="spinner" aria-hidden="true"></span></slot>
+</div>
+<div class="tab-error" part="error" role="alert">
+<slot name="error">Couldn't load.</slot>
+<button type="button" class="tab-retry" part="retry">Retry</button>
+</div>
+`);
+panel.querySelector('.tab-retry').addEventListener('click', () => {
+panel.focus({ preventScroll: true });
+this._fireLoad();
+});
+}
+_setLoad(state) {
+if (state === this._load)
+return;
+this._load = state;
+const panel = this.shadowRoot?.querySelector('.tab-panel');
+if (!panel)
+return;
+if (state === 'loading' || state === 'failed') {
+this._ensureStatus(panel);
+panel.dataset.load = state;
+}
+else {
+delete panel.dataset.load;
+}
+if (state === 'loading') {
+panel.setAttribute('aria-busy', 'true');
+panel.querySelector('.tab-spinner').innerHTML = getLoaderSvg();
+}
+else {
+panel.removeAttribute('aria-busy');
+}
+}
+_syncPanel() {
+const panel = this.shadowRoot?.querySelector('.tab-panel');
+if (!panel)
+return;
+const tabs = this.parentElement;
+const rich = !this._panelLabel && this.id && tabs?.localName === 'ty-tabs'
+? tabs.querySelector(`:scope > [slot="label-${CSS.escape(this.id)}"]`)
+: null;
+const label = this._panelLabel || rich?.textContent?.trim() || this.getAttribute('label');
+if (label)
+panel.setAttribute('aria-label', label);
+else
+panel.removeAttribute('aria-label');
+panel.parentElement.inert = !this._shown;
 }
 _setupScrollbar() {
 const panel = this.shadowRoot?.querySelector('.tab-panel');

package/lib/components/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../src/components/tab.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAe7C,+EAA+E;AAC/E,mBAAmB;AACnB,+EAA+E;AAE/E;;GAEG;AACH,SAAS,gBAAgB,CAAC,EAAS;IACjC,OAAO;QACL,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC;QACzB,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC;QAC/B,QAAQ,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC;KACtC,CAAC;AACJ,CAAC;AAED,+EAA+E;AAC/E,YAAY;AACZ,+EAA+E;AAE/E;;;GAGG;AACH,SAAS,MAAM,CAAC,EAAS;IACvB,MAAM,UAAU,GAAG,EAAE,CAAC,UAAU,CAAC;IACjC,IAAI,CAAC,UAAU;QAAE,OAAO;IAExB,MAAM,EAAE,EAAE,EAAE,GAAG,gBAAgB,CAAC,EAAE,CAAC,CAAC;IAEpC,2BAA2B;IAC3B,YAAY,CAAC,UAAU,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC;IAE3D,mEAAmE;IACnE,0EAA0E;IAC1E,UAAU,CAAC,SAAS,GAAG;;;WAGd,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;WAC5B,EAAE,CAAC,CAAC,CAAC,wBAAwB,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;;;;GAI/C,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,SAAS,OAAO,CAAC,GAAU;IACzB,6BAA6B;AAC/B,CAAC;AAED,+EAA+E;AAC/E,uBAAuB;AACvB,+EAA+E;AAE/E;;GAEG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;IACpC,0BAA0B;IAC1B,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;IACrC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IACtC,CAAC;IAED,iBAAiB;QACf,MAAM,CAAC,IAAI,CAAC,CAAC;IACf,CAAC;IAED,oBAAoB;QAClB,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC;IAED,wBAAwB,CAAC,KAAa,EAAE,SAAwB,EAAE,SAAwB;QACxF,MAAM,CAAC,IAAI,CAAC,CAAC;IACf,CAAC;CACF;AAED,8BAA8B;AAC9B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;IAClC,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;AACzC,CAAC"}

package/lib/components/tabs.d.ts

@@ -14,7 +14,8 @@ export interface TabsAttributes {
     fixed: boolean;
 }
 /**
- * Tab change event detail
+ * Tab change event detail. Fired whenever the shown tab changes after the
+ * first one is shown — never for the initial tab.
  */
 export interface TabChangeDetail {
     activeId: string;
@@ -29,8 +30,19 @@ export declare class TyTabs extends HTMLElement {
     static get observedAttributes(): string[];
     constructor();
     private _childObserver;
-    private _childRenderQueued;
+    private _updateQueued;
+    private _structureDirty;
+    /** ID of the tab currently shown (`active` may be stale or missing after a morph). */
+    get activeTab(): string | null;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * External changes (`active` set by app or server, children added or
+     * removed, a ty-tab's id/label/disabled changed — ty-tab reports those)
+     * settle in one microtask: a morph sets attributes and swaps children in
+     * one go, and the shown tab must be decided once the whole batch has
+     * landed — `active` may name a tab that is appended after it.
+     */
+    _queueUpdate(structure: boolean): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }

package/lib/components/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AASH;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AA8pBD;;GAEG;AACH,qBAAa,MAAO,SAAQ,WAAW;IACrC,0BAA0B;IAC1B,MAAM,KAAK,kBAAkB,aAE5B;;IAOD,iBAAiB;IAIjB,oBAAoB;IAIpB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;CAcxF"}