@motifx/core 1.0.1

package/dist/index.cjs

@@ -0,0 +1,1517 @@
+'use strict';
+
+var internal = require('./chunks/core-DfzGo_Ti.cjs');
+var devtools = require('./chunks/core-DXGu4dNE.cjs');
+
+class NameValuePair {
+    Key;
+    value;
+}
+
+class List {
+    ItemAdded;
+    ItemAddedBefore;
+    ItemSplice;
+    __list = [];
+    _map = new Set();
+    Dispose() {
+        this.__list = [];
+    }
+    Add(item) {
+        this._map.add(item);
+        var i = this.__list.push(item) - 1;
+        if (this.ItemAdded != undefined) {
+            this.ItemAdded(item);
+        }
+        return i;
+    }
+    AddBefore(item) {
+        this._map.add(item);
+        var i = this.__list.unshift(item) - 1;
+        if (this.ItemAddedBefore != undefined) {
+            this.ItemAddedBefore(item);
+        }
+        return i;
+    }
+    Insert(start, item) {
+        this._map.add(item);
+        var i = this.__list.splice(start, 0, item);
+        if (this.ItemSplice != undefined) {
+            this.ItemSplice(start, item);
+        }
+        return i;
+    }
+    get items() {
+        return this.__list;
+    }
+    clear() {
+        this._map.clear();
+        this.__list.splice(0);
+        this.__list = [];
+        return this.__list;
+    }
+    ;
+    get count() {
+        return this.__list.length;
+    }
+    ;
+    remove(item) {
+        this._map.delete(item);
+        this.__list.splice(this.__list.indexOf(item), 1);
+        item = null;
+        return [];
+    }
+    ;
+    indexOf(item) {
+        return this.__list.indexOf(item);
+    }
+    FindFromKey(key, value) {
+        return this.__list.filter(i => { return i[key] === value; });
+    }
+    removeIndex(index) {
+        var deleted = this.__list.splice(index, 1);
+        deleted.forEach(t => {
+            this._map.delete(t);
+        });
+        return deleted;
+    }
+    ;
+    has(item) {
+        return this._map.has(item);
+    }
+    item(index) {
+        return this.__list[index];
+    }
+    forEach(callbackfn) {
+        this.__list?.forEach(callbackfn);
+    }
+    ReverseClone() {
+        return this.__list.reverse();
+    }
+    filter(callbackfn) {
+        return this.__list.filter(callbackfn);
+    }
+}
+
+class Dictionary {
+    __values = new List();
+    Add(Key, Value) {
+        var item = new NameValuePair();
+        item.Key = Key;
+        item.value = Value;
+        var n = this.__values.Add(item);
+        if (this.OnItemAdded != null) {
+            this.OnItemAdded(item.Key, item.value);
+        }
+        return n;
+    }
+    has(key) {
+        return this.filter(t => t.Key == key)[0] ? true : false;
+    }
+    item(key) {
+        return this.filter(t => t.Key == key)[0];
+    }
+    OnItemAdded;
+    removeIndex(index) {
+        var i = this.__values.removeIndex(index - 1);
+        return i;
+    }
+    ;
+    remove(Key) {
+        var item = this.__values.filter(x => x.Key == Key);
+        item.forEach((v) => {
+            this.__values.remove(v);
+        });
+    }
+    ;
+    clear() {
+        this.__values.clear();
+    }
+    ;
+    forEach(callback) {
+        this.__values.forEach(callback);
+    }
+    get values() {
+        return this.__values;
+    }
+    filter(callbackfn) {
+        return this.__values.items.filter(callbackfn);
+    }
+    find(predicate, thisArg) {
+        return this.__values.items.find(predicate);
+    }
+}
+
+function toGetter(value) {
+    return typeof value === 'function' ? value : () => value;
+}
+function read(value) {
+    return typeof value === 'function' ? value() : value;
+}
+
+function compareKeys(a, b) {
+    return a > b ? 1 : a < b ? -1 : 0;
+}
+class Query {
+    source;
+    constructor(source) {
+        this.source = Array.isArray(source) ? source : Array.from(source);
+    }
+    static from(source) {
+        return new Query(source);
+    }
+    where(predicate) {
+        return new Query(this.source.filter(predicate));
+    }
+    select(selector) {
+        return new Query(this.source.map(selector));
+    }
+    orderBy(keySelector) {
+        return new Query([...this.source].sort((a, b) => compareKeys(keySelector(a), keySelector(b))));
+    }
+    orderByDescending(keySelector) {
+        return new Query([...this.source].sort((a, b) => compareKeys(keySelector(b), keySelector(a))));
+    }
+    distinctBy(keySelector) {
+        const seen = new Set();
+        return new Query(this.source.filter(item => {
+            const key = keySelector(item);
+            if (seen.has(key))
+                return false;
+            seen.add(key);
+            return true;
+        }));
+    }
+    groupBy(keySelector) {
+        const map = new Map();
+        for (const item of this.source) {
+            const key = keySelector(item);
+            const group = map.get(key);
+            if (group) {
+                group.push(item);
+            }
+            else {
+                map.set(key, [item]);
+            }
+        }
+        return new Query(Array.from(map, ([key, items]) => ({ key, items })));
+    }
+    first() {
+        if (this.source.length === 0) {
+            throw devtools.motifError('MJX601');
+        }
+        return this.source[0];
+    }
+    firstOrDefault() {
+        return this.source[0];
+    }
+    any(predicate) {
+        return predicate ? this.source.some(predicate) : this.source.length > 0;
+    }
+    all(predicate) {
+        return this.source.every(predicate);
+    }
+    aggregate(seed, func) {
+        return this.source.reduce(func, seed);
+    }
+    toArray() {
+        return [...this.source];
+    }
+    [Symbol.iterator]() {
+        return this.source[Symbol.iterator]();
+    }
+}
+
+const preprocessitem = new Set();
+function preProcessing(callback) {
+    preprocessitem.add(callback);
+    renderPreProcessing();
+}
+function renderPreProcessing() {
+    preprocessitem.forEach(i => {
+        i();
+    });
+}
+
+// const ContentBodyCollection = new Map<string, ContentBody>();
+const ContentBodyCollectionHandable = new Map();
+const changeBodyCollectionHandler = Symbol('changeBodyCollectionHandler');
+class ContentBlock extends internal.Component {
+    constructor(props) {
+        super(props);
+        // var cb = ContentBodyCollectionHandable.get(props.target);
+        // if (cb) {
+        // } else {
+        //         var cb = ContentBodyCollectionHandable.get(props.target);
+        //         if (cb) {
+        this.controls.onAdd = (control) => {
+            var cb = ContentBodyCollectionHandable.get(this.props.target);
+            if (cb) {
+                control.motif.options["ownerContentBlock"] = this;
+                cb.controls.add(control);
+            }
+        };
+        this.controls.onAddBeforeBuild = (control) => {
+            var cb = ContentBodyCollectionHandable.get(this.props.target);
+            if (cb) {
+                control.motif.options["ownerContentBlock"] = this;
+                cb.controls.add(control);
+            }
+        };
+        if (this.childs) {
+            this.controls.add(...this.childs);
+        }
+    }
+    onConfigured(sender, e) {
+        var cb = ContentBodyCollectionHandable.get(this.props.target);
+        if (cb) {
+            this.controls.items.forEach(x => { x.motif.options["ownerContentBlock"] = this; });
+            cb.controls.add(...this.controls.items);
+        }
+        else {
+            this.context.on(changeBodyCollectionHandler, () => {
+                var cb = ContentBodyCollectionHandable.get(this.props.target);
+                if (cb) {
+                    this.controls.items.forEach(x => { x.motif.options["ownerContentBlock"] = this; });
+                    cb.controls.add(...this.controls.items);
+                }
+            });
+        }
+    }
+    onDisposing(sender, e) {
+        var cb = ContentBodyCollectionHandable.get(this.props.target);
+        if (cb) {
+            for (const element of [...cb.controls.items]) {
+                if (element.motif.options["ownerContentBlock"] !== this)
+                    continue;
+                cb.controls.remove(element);
+                devtools.reportWarning('MJX109', [], element);
+            }
+        }
+    }
+    ondisposing(sender) {
+        // var cb = ContentBodyCollectionHandable.get(this.props.target);
+        // if (cb) {
+    }
+}
+class ContentBody extends internal.Component {
+    constructor(props) {
+        super(props);
+        ContentBodyCollectionHandable.set(this.props.name, this);
+        this.context.fire(changeBodyCollectionHandler);
+    }
+    ondisposing(sender) {
+        ContentBodyCollectionHandable.delete(this.props.name);
+    }
+}
+
+const SLOT_REGISTERED_EVENT = Symbol('slotRegistered');
+const SLOT_UNREGISTERED_EVENT = Symbol('slotUnregistered');
+class TransportRegistry {
+    static slots = new Map();
+    static registerSlot(name, slot) {
+        this.slots.set(name, slot);
+        internal.Application.main.fire(SLOT_REGISTERED_EVENT, { name, slot });
+    }
+    static unregisterSlot(name, slot) {
+        if (this.slots.get(name) === slot) {
+            this.slots.delete(name);
+            internal.Application.main.fire(SLOT_UNREGISTERED_EVENT, { name, slot });
+        }
+    }
+    static getSlot(name) {
+        return this.slots.get(name);
+    }
+}
+
+class Transport extends internal.Component {
+    mode;
+    constructor(props) {
+        super(props);
+        this.mode = props.mode || 'replace';
+    }
+    initializeComponent(sender) {
+        TransportRegistry.registerSlot(this.props.name, this);
+        this.onDisposing = () => {
+            (this.controls.items || []).forEach(child => {
+                this.controls.remove(child);
+                child.dispose?.();
+            });
+            TransportRegistry.unregisterSlot(this.props.name, this);
+        };
+    }
+    clearSlot() {
+        (this.controls.items || []).forEach(child => {
+            this.controls.remove(child);
+            child.dispose?.();
+        });
+    }
+}
+
+class Transporter {
+    static transport(child, newParent, options = {}) {
+        if (!child || !newParent)
+            return;
+        if (child.parent === newParent && newParent.controls.items.includes(child))
+            return;
+        if (child.parent && child.parent !== newParent) {
+            child.parent.controls.remove(child);
+        }
+        if (options.owner) {
+            child.motif.options.ownerTransporter = options.owner;
+        }
+        if (typeof options.index === "number") {
+            if (!newParent.controls.items.includes(child)) {
+                newParent.controls.items.splice(options.index, 0, child);
+            }
+        }
+        else {
+            if (!newParent.controls.items.includes(child)) {
+                newParent.controls.add(child);
+            }
+        }
+        child.parent = newParent;
+        if (!options.keepState) {
+            child.reState();
+        }
+    }
+    static transportMany(children, newParent, options = {}) {
+        if (!Array.isArray(children))
+            return;
+        children.forEach(child => this.transport(child, newParent, options));
+    }
+    static createSlot(name, parent) {
+        const slot = {
+            name,
+            children: [],
+            parent: parent,
+            mount(child, options = {}) {
+                if (!this.parent)
+                    throw devtools.motifError('MJX113');
+                if (!this.children.includes(child)) {
+                    Transporter.transport(child, this.parent, options);
+                    this.children.push(child);
+                }
+            },
+            unmount(child) {
+                if (!this.parent)
+                    throw devtools.motifError('MJX113');
+                this.children = this.children.filter(c => c !== child);
+                this.parent.controls.remove(child);
+            },
+            detachAll() {
+                if (!this.parent)
+                    return;
+                this.children.forEach(child => {
+                    this.parent.controls.remove(child);
+                });
+                this.children = [];
+            }
+        };
+        return slot;
+    }
+}
+
+class TransportTo extends internal.Component {
+    _onAddRef;
+    _onRemoveRef;
+    _slotRegisteredListener;
+    _slotUnregisteredListener;
+    _transported = [];
+    constructor(props) {
+        super('div', props);
+    }
+    _handleSlotChange = (eventArgs) => {
+        if (eventArgs.name === this.props.name) {
+            const slot = eventArgs.slot;
+            if (slot.mode !== 'merge') {
+                slot.clearSlot?.();
+            }
+            const all = [...(this.childs || []), ...this.controls.items];
+            Transporter.transportMany(all, slot);
+            this._transported = all;
+        }
+    };
+    _clearChildrenFromSlot = (slot) => {
+        (this.childs || []).forEach(child => {
+            slot.controls.remove(child);
+            child.dispose();
+        });
+        (this.controls.items || []).forEach(child => {
+            slot.controls.remove(child);
+            child.dispose();
+        });
+    };
+    initializeComponent(sender) {
+        let slot = TransportRegistry.getSlot(this.props.name);
+        if (slot) {
+            if (slot.mode !== 'merge') {
+                slot.clearSlot?.();
+            }
+            const all = [...(this.childs || []), ...this.controls.items];
+            Transporter.transportMany(all, slot);
+            this._transported = all;
+        }
+        this._slotRegisteredListener = internal.Application.main.on(SLOT_REGISTERED_EVENT, this._handleSlotChange);
+        this._slotUnregisteredListener = internal.Application.main.on(SLOT_UNREGISTERED_EVENT, (eventArgs) => {
+            if (eventArgs.name === this.props.name) {
+                this._clearChildrenFromSlot(eventArgs.slot);
+            }
+        });
+        this._onAddRef = (child) => {
+            const currentSlot = TransportRegistry.getSlot(this.props.name);
+            if (currentSlot) {
+                Transporter.transport(child, currentSlot);
+            }
+        };
+        this._onRemoveRef = (child) => {
+            const currentSlot = TransportRegistry.getSlot(this.props.name);
+            if (currentSlot) {
+                currentSlot.controls.remove(child);
+            }
+        };
+        this.controls.onAdd = this._onAddRef;
+        this.controls.onRemove = this._onRemoveRef;
+    }
+    onDisposing(sender, e) {
+        const currentSlot = TransportRegistry.getSlot(this.props.name);
+        if (currentSlot) {
+            (this._transported || []).forEach(child => {
+                currentSlot.controls.remove(child);
+                child.dispose();
+            });
+        }
+        if (this._slotRegisteredListener) {
+            internal.Application.main.off(SLOT_REGISTERED_EVENT, this._handleSlotChange);
+            this._slotRegisteredListener = undefined;
+        }
+        if (this._slotUnregisteredListener) {
+            internal.Application.main.off(SLOT_UNREGISTERED_EVENT, this._slotUnregisteredListener);
+            this._slotUnregisteredListener = undefined;
+        }
+        if (this.controls.onAdd === this._onAddRef)
+            this.controls.onAdd = undefined;
+        if (this.controls.onRemove === this._onRemoveRef)
+            this.controls.onRemove = undefined;
+        this._onAddRef = undefined;
+        this._onRemoveRef = undefined;
+        this._transported = [];
+    }
+}
+
+class Virtualization extends internal.Component {
+    _state;
+    _virtualContent;
+    _topSpacer;
+    _bottomSpacer;
+    _cache = new Map();
+    _view = [];
+    _occurrence = [];
+    _occurrenceKeys = new WeakMap();
+    _isLoadingMore = false;
+    _emptyRendered = false;
+    _renderPending = false;
+    constructor(props) {
+        super('div', props);
+        if (props.className)
+            this.class.add(props.className);
+        if (props.style)
+            Object.assign(this.element.style, props.style);
+        this._state = this.useModel({
+            isLoading: false,
+            isInitialized: false,
+            currentPage: 0,
+            totalCount: 0,
+            hasMore: true,
+            error: undefined,
+            data: []
+        });
+        this._loadMore = this._loadMore.bind(this);
+        this._renderLoadingState = this._renderLoadingState.bind(this);
+        this._renderErrorState = this._renderErrorState.bind(this);
+        this._renderEmptyState = this._renderEmptyState.bind(this);
+        this._loadInitial = this._loadInitial.bind(this);
+        this.renderViewport = this.renderViewport.bind(this);
+        this._makeView();
+    }
+    contentWrapper = new internal.Component();
+    wrapper;
+    _makeView() {
+        this._topSpacer = new internal.Component('div');
+        this._topSpacer.element.style.cssText = 'height: 0px;';
+        this._topSpacer.class.add('motif-virtualization-top-spacer');
+        this._bottomSpacer = new internal.Component('div');
+        this._bottomSpacer.element.style.cssText = 'height: 0px;';
+        this._bottomSpacer.class.add('motif-virtualization-bottom-spacer');
+        this._virtualContent = new internal.Component(document.createComment(''));
+        if (this.props.mainTemplate) {
+            this.contentWrapper.controls.add(this._topSpacer, this._virtualContent, this._bottomSpacer);
+            this.contentWrapper.onBuilding = ((s) => {
+                var el = internal.findAppendableComponent(s.parent);
+                if (el) {
+                    this.wrapper = el;
+                    this._loadInitial();
+                    el.style({ overflowY: 'auto', position: 'relative' });
+                    el.motif.on('scroll', this._handleScroll);
+                }
+            });
+            this.controls.add(this.props.mainTemplate(this.contentWrapper, this._state));
+        }
+        else {
+            this.wrapper = this;
+            this.element.style.cssText = 'overflow-y: auto; height: 100%; position: relative;';
+            this.controls.add(this._topSpacer, this._virtualContent, this._bottomSpacer);
+            this.motif.on('scroll', this._handleScroll);
+        }
+    }
+    _initialLoadStarted = false;
+    onBuilding() {
+        if (this.props.mainTemplate || this._initialLoadStarted)
+            return;
+        this._initialLoadStarted = true;
+        this._loadInitial();
+    }
+    onMounted() {
+        this._observeResize();
+        if (this._renderPending)
+            this.renderViewport();
+    }
+    onDisposing() {
+        this._stopResizeObserver();
+        this._stopDataWatch();
+        this._clearContent();
+    }
+    _offsets = null;
+    _resizeObserver;
+    _observed;
+    _observedHeight = -1;
+    _fixedHeight() {
+        const h = this.props.itemHeight;
+        return typeof h === 'function' ? null : h;
+    }
+    _computeOffsets() {
+        const fn = this.props.itemHeight;
+        if (typeof fn !== 'function') {
+            this._offsets = null;
+            return;
+        }
+        const view = this._view;
+        const offsets = new Array(view.length + 1);
+        offsets[0] = 0;
+        for (let i = 0; i < view.length; i++) {
+            let h = 0;
+            try {
+                h = Number(fn(view[i], i));
+            }
+            catch {
+                h = 0;
+            }
+            offsets[i + 1] = offsets[i] + (h > 0 && Number.isFinite(h) ? h : 0);
+        }
+        this._offsets = offsets;
+    }
+    _layoutOffsets() {
+        if (!this._offsets || this._offsets.length !== this._view.length + 1)
+            this._computeOffsets();
+        return this._offsets;
+    }
+    _offsetOf(index) {
+        const h = this._fixedHeight();
+        if (h !== null)
+            return index * h;
+        const offsets = this._layoutOffsets();
+        return offsets[Math.min(Math.max(0, index), offsets.length - 1)];
+    }
+    _indexAt(y, offsets) {
+        const total = offsets.length - 1;
+        if (total <= 0)
+            return 0;
+        let lo = 0, hi = total - 1;
+        while (lo < hi) {
+            const mid = (lo + hi + 1) >> 1;
+            if (offsets[mid] <= y)
+                lo = mid;
+            else
+                hi = mid - 1;
+        }
+        return lo;
+    }
+    _observeResize() {
+        const el = this.wrapper?.element;
+        if (!el || this._observed === el || this.isDisposed)
+            return;
+        const RO = globalThis.ResizeObserver;
+        if (typeof RO !== 'function')
+            return;
+        this._stopResizeObserver();
+        this._observedHeight = el.clientHeight;
+        const observer = new RO(() => {
+            if (this.isDisposed)
+                return;
+            const h = el.clientHeight;
+            if (h === this._observedHeight)
+                return;
+            this._observedHeight = h;
+            this.renderViewport();
+        });
+        observer.observe(el);
+        this._resizeObserver = observer;
+        this._observed = el;
+    }
+    _stopResizeObserver() {
+        try {
+            this._resizeObserver?.disconnect();
+        }
+        catch { }
+        this._resizeObserver = undefined;
+        this._observed = undefined;
+    }
+    _loadSeq = 0;
+    _dataWatchStop;
+    _reloadScheduled = false;
+    _reloadTimes = [];
+    _stopDataWatch() {
+        this._dataWatchStop?.();
+        this._dataWatchStop = undefined;
+    }
+    /**
+     * dataRequest'i çağırır. `watch` açıksa çağrının senkron kısmında okunan reaktif veriyi izler;
+     * değişince yeniden yükleme planlar. Aksi hâlde çağrı hiçbir dış effect'e bağımlılık sızdırmaz.
+     */
+    _request(request, watch) {
+        const call = () => {
+            try {
+                return Promise.resolve(this.props.dataRequest(request));
+            }
+            catch (error) {
+                return Promise.reject(error);
+            }
+        };
+        if (!watch || this.props.autoRefresh === false)
+            return devtools.untracked(call);
+        this._stopDataWatch();
+        let result;
+        let first = true;
+        this._dataWatchStop = devtools.effect(() => {
+            if (first) {
+                first = false;
+                try {
+                    this.props.watch?.();
+                }
+                catch (error) {
+                    devtools.reportError('MJX205', error);
+                }
+                result = call();
+                return;
+            }
+            this._scheduleReload();
+        });
+        return result;
+    }
+    _scheduleReload() {
+        if (this._reloadScheduled || this.isDisposed)
+            return;
+        this._reloadScheduled = true;
+        queueMicrotask(() => {
+            this._reloadScheduled = false;
+            if (this.isDisposed)
+                return;
+            // Sonsuz döngü koruması, 1 sn'de 30'u aşınca dur.
+            const now = Date.now();
+            this._reloadTimes = this._reloadTimes.filter(t => now - t < 1000);
+            this._reloadTimes.push(now);
+            if (this._reloadTimes.length > 30) {
+                this._stopDataWatch();
+                devtools.reportWarning('MJX206', []);
+                return;
+            }
+            if (this._state.isInitialized)
+                void this._reloadLoaded();
+            else
+                void this._loadInitial();
+        });
+    }
+    /** Yüklü aralığı (0..currentPage) tek istekte yeniden alır; içerik yanıt gelene kadar kalır. */
+    async _reloadLoaded() {
+        const seq = ++this._loadSeq;
+        const pageSize = this.props.pageSize || 50;
+        const pages = this._state.currentPage + 1;
+        try {
+            const response = await this._request({
+                page: 0,
+                pageSize: pageSize * pages,
+                scrollTop: this.wrapper?.element?.scrollTop ?? 0
+            }, true);
+            if (this.isDisposed || seq !== this._loadSeq)
+                return;
+            const el = this.wrapper?.element;
+            const top = el?.scrollTop ?? 0;
+            this._state.currentPage = pages - 1;
+            this._state.totalCount = response.totalCount;
+            this._state.hasMore = response.hasMore;
+            this._state.error = undefined;
+            this._state.data = response.items;
+            this._rebuildView();
+            // Satırlar sökülürken içerik kısalmasın: kısalırsa tarayıcı kaydırmayı kırpar.
+            // Boşluğu geçici olarak yeni listenin tam boyuna sabitle; renderViewport düzeltir.
+            this._topSpacer.style({ height: '0px' });
+            this._bottomSpacer.style({ height: this._offsetOf(this._view.length) + 'px' });
+            this._clearContent();
+            if (el && el.scrollTop !== top)
+                el.scrollTop = top;
+            this.renderViewport();
+        }
+        catch (error) {
+            if (this.isDisposed || seq !== this._loadSeq)
+                return;
+            this._state.error = error;
+            this._renderErrorState(error);
+        }
+    }
+    _handleScroll = (_sender, _event) => {
+        this.renderViewport();
+        if (this.props.autoLoad === false)
+            return;
+        if (!this._state.hasMore || this._isLoadingMore || !this._state.isInitialized)
+            return;
+        const el = this.wrapper.element;
+        const fixed = this._fixedHeight();
+        const loadedBottom = fixed !== null ? this._state.data.length * fixed : this._offsetOf(this._view.length);
+        const distanceToLoaded = loadedBottom - (el.scrollTop + el.clientHeight);
+        if (distanceToLoaded < (this.props.autoLoadThreshold ?? 100))
+            void this._loadMore();
+    };
+    async _loadInitial() {
+        const seq = ++this._loadSeq;
+        this._state.isLoading = true;
+        this._renderLoadingState();
+        try {
+            const pageSize = this.props.pageSize || 50;
+            const response = await this._request({
+                page: 0,
+                pageSize,
+                scrollTop: 0
+            }, true);
+            if (this.isDisposed || seq !== this._loadSeq)
+                return;
+            this._state.currentPage = 0;
+            this._state.totalCount = response.totalCount;
+            this._state.hasMore = response.hasMore;
+            this._state.isInitialized = true;
+            this._state.isLoading = false;
+            this._state.error = undefined;
+            this._state.data = response.items;
+            this._clearContent();
+            this._rebuildView();
+            this.renderViewport();
+        }
+        catch (error) {
+            if (this.isDisposed || seq !== this._loadSeq)
+                return;
+            this._state.isLoading = false;
+            this._state.error = error;
+            this._renderErrorState(error);
+        }
+    }
+    async _loadMore() {
+        if (this._isLoadingMore || !this._state.hasMore || !this._state.isInitialized)
+            return;
+        const seq = this._loadSeq;
+        try {
+            this._isLoadingMore = true;
+            const nextPage = this._state.currentPage + 1;
+            const pageSize = this.props.pageSize || 50;
+            const response = await this._request({
+                page: nextPage,
+                pageSize,
+                scrollTop: this.wrapper?.element?.scrollTop ?? 0
+            }, false);
+            if (this.isDisposed || seq !== this._loadSeq)
+                return;
+            this._state.totalCount = response.totalCount;
+            this._state.currentPage = nextPage;
+            this._state.hasMore = response.hasMore;
+            this._state.error = undefined;
+            this._state.data.push(...response.items);
+            this._rebuildView();
+            this.renderViewport();
+        }
+        catch (error) {
+            if (this.isDisposed || seq !== this._loadSeq)
+                return;
+            this._state.error = error;
+            devtools.reportError('MJX207', error);
+        }
+        finally {
+            this._isLoadingMore = false;
+        }
+    }
+    _rebuildView() {
+        this._view = this.props.filter ? this.props.filter(this._state.data) : this._state.data;
+        const seen = new Map();
+        this._occurrence = this._view.map(item => {
+            if (typeof item !== 'object' || item === null)
+                return 0;
+            const n = seen.get(item) ?? 0;
+            seen.set(item, n + 1);
+            return n;
+        });
+        if (typeof this.props.itemHeight === 'function')
+            this._computeOffsets();
+        else
+            this._offsets = null;
+    }
+    _clearContent() {
+        if (!this._virtualContent)
+            return;
+        const controls = this._virtualContent.controls;
+        for (const c of this._cache.values()) {
+            controls.silentUnlink(c);
+            if (!c.isDisposed)
+                void c.dispose();
+        }
+        this._cache.clear();
+        controls.clear();
+        this._emptyRendered = false;
+    }
+    renderViewport() {
+        if (this.isDisposed || !this.wrapper || !this._state.isInitialized)
+            return;
+        const el = this.wrapper.element;
+        this._observeResize();
+        const view = this._view;
+        const total = view.length;
+        if (total === 0) {
+            if (!this._emptyRendered) {
+                this._clearContent();
+                this._renderEmptyState();
+            }
+            this._topSpacer.style({ height: '0px' });
+            this._bottomSpacer.style({ height: '0px' });
+            return;
+        }
+        if (this._emptyRendered)
+            this._clearContent();
+        const h = this._fixedHeight();
+        let overscan, first, last, topPx, bottomPx;
+        if (h !== null) {
+            const visible = Math.floor(el.clientHeight / h);
+            if (visible <= 0) {
+                this._renderPending = !el.isConnected;
+                return;
+            }
+            this._renderPending = false;
+            overscan = Math.max(0, this.props.overscan ?? visible);
+            const anchor = Math.min(Math.max(0, Math.floor(el.scrollTop / h)), total - 1);
+            first = Math.max(0, anchor - overscan);
+            last = Math.min(total, anchor + visible + overscan);
+            topPx = first * h;
+            bottomPx = Math.max(0, total - last) * h;
+        }
+        else {
+            if (el.clientHeight <= 0) {
+                this._renderPending = !el.isConnected;
+                return;
+            }
+            this._renderPending = false;
+            const offsets = this._layoutOffsets();
+            const top = Math.max(0, el.scrollTop);
+            const bottom = top + el.clientHeight;
+            const anchor = this._indexAt(top, offsets);
+            let end = anchor;
+            while (end < total && offsets[end] < bottom)
+                end++;
+            const visible = Math.max(1, end - anchor);
+            overscan = Math.max(0, this.props.overscan ?? visible);
+            first = Math.max(0, anchor - overscan);
+            last = Math.min(total, Math.max(end, anchor + 1) + overscan);
+            topPx = offsets[first];
+            bottomPx = Math.max(0, offsets[total] - offsets[last]);
+        }
+        const rows = new Array(last - first);
+        const keep = new Set();
+        for (let i = first; i < last; i++) {
+            const c = this._rowFor(view[i], i);
+            rows[i - first] = c;
+            keep.add(c);
+        }
+        const inDom = this._virtualContent.controls.items;
+        for (const c of inDom.slice()) {
+            if (!keep.has(c))
+                this._detachRow(c);
+        }
+        for (let pos = 0; pos < rows.length; pos++) {
+            const c = rows[pos];
+            if (inDom[pos] === c)
+                continue;
+            if (c.parent === this._virtualContent)
+                this._detachRow(c);
+            this._virtualContent.controls.insert(pos, c);
+        }
+        this._topSpacer.style({ height: topPx + 'px' });
+        this._bottomSpacer.style({ height: bottomPx + 'px' });
+        this._evictCache(Math.max(200, (last - first) * 3));
+        if (this.props.autoLoad !== false && this._state.hasMore && !this._isLoadingMore && total < last + overscan) {
+            void this._loadMore();
+        }
+    }
+    _occurrenceKey(item, occurrence) {
+        let keys = this._occurrenceKeys.get(item);
+        if (!keys) {
+            keys = [];
+            this._occurrenceKeys.set(item, keys);
+        }
+        return keys[occurrence] ??= {};
+    }
+    _rowFor(item, index) {
+        const occurrence = this._occurrence[index] ?? 0;
+        const key = (typeof item === 'object' && item !== null)
+            ? (occurrence === 0 ? item : this._occurrenceKey(item, occurrence))
+            : index;
+        let component = this._cache.get(key);
+        if (component && component.isDisposed) {
+            this._cache.delete(key);
+            component = undefined;
+        }
+        if (component) {
+            this._cache.delete(key);
+            this._cache.set(key, component);
+            return component;
+        }
+        const rendered = this.props.itemTemplate(item, index);
+        component = rendered instanceof internal.ComponentBase ? rendered : new internal.Component(rendered);
+        component.__listItemRef = item;
+        this._cache.set(key, component);
+        return component;
+    }
+    _detachRow(c) {
+        const controls = this._virtualContent.controls;
+        if (c.isDisposed) {
+            controls.silentUnlink(c);
+            return;
+        }
+        const node = c.element;
+        if (node.nodeType === Node.COMMENT_NODE) {
+            controls.silentUnlink(c);
+            const close = c.motif.options.closeFragment;
+            const frag = c.motif.options.cache ?? (c.motif.options.cache = document.createDocumentFragment());
+            let cur = node;
+            while (cur) {
+                const next = cur.nextSibling;
+                frag.appendChild(cur);
+                if (cur === close)
+                    break;
+                cur = next;
+            }
+            internal.notifyDeactivated(c);
+        }
+        else {
+            controls.silentDetach(c);
+        }
+    }
+    _evictCache(limit) {
+        const max = this.props.cacheSize ?? limit;
+        if (this._cache.size <= max)
+            return;
+        for (const [key, c] of this._cache) {
+            if (this._cache.size <= max)
+                break;
+            if (c.parent === this._virtualContent)
+                continue;
+            this._cache.delete(key);
+            if (!c.isDisposed)
+                void c.dispose();
+        }
+    }
+    _renderLoadingState() {
+        if (!this._virtualContent || !this.props.loadingTemplate)
+            return;
+        this._clearContent();
+        const loadingElement = this.props.loadingTemplate(this._state);
+        this._virtualContent.controls.add(loadingElement);
+    }
+    _renderEmptyState() {
+        if (!this._virtualContent || !this.props.emptyTemplate)
+            return;
+        this._clearContent();
+        const emptyElement = this.props.emptyTemplate();
+        this._virtualContent.controls.add(emptyElement);
+        this._emptyRendered = true;
+    }
+    _renderErrorState(error) {
+        if (!this._virtualContent) {
+            devtools.reportError('MJX207', error);
+            return;
+        }
+        this._clearContent();
+        if (this.props.errorTemplate) {
+            const errorElement = this.props.errorTemplate(error);
+            this._virtualContent.controls.add(errorElement);
+        }
+        else {
+            devtools.reportError('MJX207', error);
+        }
+    }
+    refresh() {
+        this._state.data = [];
+        this._state.currentPage = 0;
+        this._state.isInitialized = false;
+        this._state.hasMore = true;
+        this._rebuildView();
+        return this._loadInitial();
+    }
+    setData(data) {
+        this._loadSeq++;
+        this._stopDataWatch();
+        this._state.data = data;
+        this._state.currentPage = 0;
+        this._state.totalCount = data.length;
+        this._state.hasMore = false;
+        this._state.isInitialized = true;
+        this._state.isLoading = false;
+        this._state.error = undefined;
+        this._clearContent();
+        this._rebuildView();
+        this.renderViewport();
+    }
+    scrollToIndex(index) {
+        if (!this.wrapper)
+            return;
+        const total = this._view.length;
+        const i = Math.min(Math.max(0, index), Math.max(0, total - 1));
+        this.wrapper.element.scrollTop = this._offsetOf(i);
+        this.renderViewport();
+    }
+    getState() {
+        return { ...this._state };
+    }
+}
+
+class RouterLink extends internal.Component {
+    constructor(props) {
+        super(props.el ?? 'a', props);
+        if (props.showHref !== false)
+            this.attr.add({ href: props.to });
+        if (props.target)
+            this.attr.add({ target: props.target });
+        this.motif.on('click', (s, e) => {
+            if (props.bypass)
+                return;
+            if (props.target && props.target !== '_self')
+                return;
+            if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+                return;
+            e.preventDefault();
+            const router = internal.Application.main.router;
+            if (router)
+                router.navigate(props.to);
+        });
+        if (this.childs && this.childs.length) {
+            this.controls.add(...this.childs);
+        }
+        else if (props.text != null) {
+            this.attr.add({ textContent: props.text });
+        }
+    }
+    onBuilt(sender, e) {
+        this.motif.options.enableRouterClassing = {
+            to: 'all',
+            path: this.props.to,
+            activeClass: this.props.activeClass,
+            exactClass: this.props.exactClass,
+            onActive: this.props.onActive,
+            offActive: this.props.offActive,
+            onExact: this.props.onExact,
+            offExact: this.props.offExact
+        };
+    }
+}
+
+function Injectable(options) {
+    return (target) => {
+        internal.autoRegistry.set(target, {
+            lifetime: options?.lifetime ?? "transient",
+            deps: options?.deps
+        });
+    };
+}
+function FromService(token) {
+    try {
+        return internal.Application.main.provider.get(token);
+    }
+    catch (error) {
+        devtools.reportWarning('MJX414', [describeServiceToken(token), String(error?.message ?? error)], { token, error });
+        return null;
+    }
+}
+function describeServiceToken(token) {
+    if (typeof token === 'function')
+        return token.name || '[AnonymousClass]';
+    return String(token);
+}
+
+function isTimeoutError(err) {
+    return err && err.name === 'TimeoutError';
+}
+class TimeoutError extends devtools.MotifError {
+    constructor() {
+        super('MJX605', devtools.formatMotifMessage('MJX605'));
+        this.name = 'TimeoutError';
+    }
+}
+function delay(ms) {
+    return new Promise(res => setTimeout(res, ms));
+}
+function addJitter(base, jitterFactor = 0.1) {
+    const jitter = (Math.random() * 2 - 1) * jitterFactor * base;
+    return Math.max(0, Math.floor(base + jitter));
+}
+class Policy {
+}
+class RetryPolicy extends Policy {
+    retries;
+    backoff;
+    delayMs;
+    jitter;
+    shouldHandle;
+    onRetry;
+    constructor(options = {}) {
+        super();
+        this.retries = options.retries ?? 3;
+        this.backoff = options.backoff ?? 'exponential';
+        this.delayMs = options.delay ?? 100;
+        this.jitter = Math.min(Math.max(options.jitter ?? 0.1, 0), 1);
+        this.shouldHandle = options.shouldHandle ?? ((err) => !!err && !isTimeoutError(err));
+        this.onRetry = options.onRetry;
+    }
+    calcDelay(attempt) {
+        if (this.backoff === 'none')
+            return 0;
+        if (this.backoff === 'fixed')
+            return addJitter(this.delayMs, this.jitter);
+        const base = this.delayMs * Math.pow(2, attempt - 1);
+        return addJitter(base, this.jitter);
+    }
+    async execute(action, ctx) {
+        let lastErr;
+        for (let attempt = 1; attempt <= this.retries + 1; attempt++) {
+            try {
+                return await Promise.resolve(action(ctx));
+            }
+            catch (err) {
+                lastErr = err;
+                if (!this.shouldHandle(err) || attempt > this.retries)
+                    break;
+                const wait = this.calcDelay(attempt);
+                if (this.onRetry)
+                    await this.onRetry(attempt, err, wait, ctx);
+                if (wait > 0)
+                    await delay(wait);
+            }
+        }
+        throw lastErr;
+    }
+}
+class TimeoutPolicy extends Policy {
+    timeoutMs;
+    constructor(opts) {
+        super();
+        this.timeoutMs = opts.timeoutMs;
+    }
+    async execute(action, ctx) {
+        let timer;
+        const p = Promise.resolve(action(ctx));
+        const t = new Promise((_, rej) => {
+            timer = setTimeout(() => rej(new TimeoutError()), this.timeoutMs);
+        });
+        try {
+            return await Promise.race([p, t]);
+        }
+        finally {
+            clearTimeout(timer);
+        }
+    }
+}
+class CircuitBreakerPolicy extends Policy {
+    failureThreshold;
+    successThreshold;
+    durationOfBreakMs;
+    shouldHandle;
+    onStateChange;
+    state = 'CLOSED';
+    failureCount = 0;
+    successCount = 0;
+    nextAttemptTime = 0;
+    constructor(opts = {}) {
+        super();
+        this.failureThreshold = opts.failureThreshold ?? 5;
+        this.successThreshold = opts.successThreshold ?? 2;
+        this.durationOfBreakMs = opts.durationOfBreakMs ?? 60000;
+        this.shouldHandle = opts.shouldHandle ?? ((err) => !!err && !isTimeoutError(err));
+        this.onStateChange = opts.onStateChange;
+    }
+    async changeState(newState) {
+        const old = this.state;
+        this.state = newState;
+        this.failureCount = 0;
+        this.successCount = 0;
+        if (newState === 'OPEN')
+            this.nextAttemptTime = Date.now() + this.durationOfBreakMs;
+        if (this.onStateChange)
+            await this.onStateChange(old, newState);
+    }
+    async execute(action, ctx) {
+        if (this.state === 'OPEN') {
+            if (Date.now() >= this.nextAttemptTime) {
+                await this.changeState('HALF_OPEN');
+            }
+            else {
+                throw devtools.motifError('MJX602');
+            }
+        }
+        try {
+            const result = await Promise.resolve(action(ctx));
+            if (this.state === 'HALF_OPEN') {
+                this.successCount++;
+                if (this.successCount >= this.successThreshold)
+                    await this.changeState('CLOSED');
+            }
+            else if (this.state === 'CLOSED') {
+                this.failureCount = 0;
+            }
+            return result;
+        }
+        catch (err) {
+            if (this.shouldHandle(err)) {
+                this.failureCount++;
+                if (this.state === 'HALF_OPEN' || (this.state === 'CLOSED' && this.failureCount >= this.failureThreshold)) {
+                    await this.changeState('OPEN');
+                }
+            }
+            throw err;
+        }
+    }
+    getState() {
+        return this.state;
+    }
+}
+class BulkheadPolicy extends Policy {
+    maxConcurrent;
+    maxQueue;
+    active = 0;
+    queue = [];
+    constructor(opts = {}) {
+        super();
+        this.maxConcurrent = opts.maxConcurrent ?? 10;
+        this.maxQueue = opts.maxQueue ?? 50;
+    }
+    dequeue() {
+        if (this.queue.length === 0)
+            return;
+        if (this.active >= this.maxConcurrent)
+            return;
+        const resolver = this.queue.shift();
+        resolver();
+    }
+    async execute(action, ctx) {
+        if (this.active >= this.maxConcurrent) {
+            if (this.queue.length >= this.maxQueue) {
+                throw devtools.motifError('MJX603');
+            }
+            await new Promise((res) => {
+                this.queue.push(res);
+            });
+        }
+        this.active++;
+        try {
+            const result = await Promise.resolve(action(ctx));
+            return result;
+        }
+        finally {
+            this.active--;
+            this.dequeue();
+        }
+    }
+}
+class RateLimiterPolicy extends Policy {
+    tokensPerInterval;
+    intervalMs;
+    capacity;
+    tokens;
+    lastRefill;
+    constructor(opts = {}) {
+        super();
+        this.tokensPerInterval = opts.tokensPerInterval ?? 1;
+        this.intervalMs = opts.intervalMs ?? 1000;
+        this.capacity = opts.capacity ?? 1000;
+        this.tokens = this.capacity;
+        this.lastRefill = Date.now();
+    }
+    refill() {
+        const now = Date.now();
+        const elapsed = now - this.lastRefill;
+        if (elapsed <= 0)
+            return;
+        const tokensToAdd = Math.floor(elapsed / this.intervalMs) * this.tokensPerInterval;
+        if (tokensToAdd > 0) {
+            this.tokens = Math.min(this.capacity, this.tokens + tokensToAdd);
+            this.lastRefill = now;
+        }
+    }
+    async execute(action, ctx) {
+        this.refill();
+        if (this.tokens <= 0) {
+            throw devtools.motifError('MJX604');
+        }
+        this.tokens -= 1;
+        return Promise.resolve(action(ctx));
+    }
+}
+class FallbackPolicy extends Policy {
+    fallback;
+    shouldHandle;
+    constructor(opts) {
+        super();
+        this.fallback = opts.fallback;
+        this.shouldHandle = opts.shouldHandle ?? (() => true);
+    }
+    async execute(action, ctx) {
+        try {
+            return await Promise.resolve(action(ctx));
+        }
+        catch (err) {
+            if (!this.shouldHandle(err))
+                throw err;
+            return await Promise.resolve(this.fallback(err, ctx));
+        }
+    }
+}
+class PolicyWrap extends Policy {
+    policies;
+    constructor(...policies) {
+        super();
+        this.policies = policies;
+    }
+    async execute(action, ctx) {
+        const wrapped = this.policies.reduceRight((next, p) => {
+            return (c) => p.execute(() => next(c), c);
+        }, action);
+        return wrapped(ctx);
+    }
+}
+const resilience = {
+    retry: (opts) => new RetryPolicy(opts),
+    timeout: (opts) => new TimeoutPolicy(opts),
+    circuitBreaker: (opts) => new CircuitBreakerPolicy(opts),
+    bulkhead: (opts) => new BulkheadPolicy(opts),
+    rateLimiter: (opts) => new RateLimiterPolicy(opts),
+    fallback: (opts) => new FallbackPolicy(opts),
+    wrap: (...policies) => new PolicyWrap(...policies),
+};
+function decorate(policy, fn) {
+    return (ctx) => policy.execute(fn, ctx);
+}
+class Resilience {
+    static get create() {
+        return new Resilience();
+    }
+    resiliences = [];
+    retry = (opts) => {
+        this.resiliences.push(resilience.retry(opts));
+        return this;
+    };
+    timeout = (opts) => {
+        this.resiliences.push(resilience.timeout(opts));
+        return this;
+    };
+    circuitBreaker = (opts) => {
+        this.resiliences.push(resilience.circuitBreaker(opts));
+        return this;
+    };
+    bulkhead = (opts) => {
+        this.resiliences.push(resilience.bulkhead(opts));
+        return this;
+    };
+    rateLimiter = (opts) => {
+        this.resiliences.push(resilience.rateLimiter(opts));
+        return this;
+    };
+    fallback = (opts) => {
+        this.resiliences.push(resilience.fallback(opts));
+        return this;
+    };
+    async execute(action, ctx) {
+        return resilience.wrap(...this.resiliences).execute(action, ctx);
+    }
+}
+
+exports.Application = internal.Application;
+exports.ApplicationBuilder = internal.ApplicationBuilder;
+exports.Component = internal.Component;
+exports.ComponentBase = internal.ComponentBase;
+exports.ComponentMotif = internal.ComponentMotif;
+exports.ControlCollection = internal.ControlCollection;
+exports.Disposable = internal.Disposable;
+exports.DisposableStore = internal.DisposableStore;
+exports.Emitter = internal.Emitter;
+exports.FNComponent = internal.FNComponent;
+exports.FragmentNode = internal.FragmentNode;
+exports.Frame = internal.Frame;
+exports.Lazy = internal.Lazy;
+exports.RouterView = internal.RouterView;
+exports.ServiceCollection = internal.ServiceCollection;
+exports.ServiceProvider = internal.ServiceProvider;
+exports.disposableCore = internal.disposableCore;
+exports.inject = internal.inject;
+exports.motifCompiled = internal.motifCompiled;
+exports.motifComponent = internal.motifComponent;
+exports.motifFragment = internal.motifFragment;
+exports.toDisposable = internal.toDisposable;
+exports.useApplication = internal.useApplication;
+exports.useNavigation = internal.useNavigation;
+exports.Computed = devtools.Computed;
+exports.ErrorHandler = devtools.ErrorHandler;
+exports.LazyComputed = devtools.LazyComputed;
+exports.LinkedList = devtools.LinkedList;
+exports.MotifError = devtools.MotifError;
+Object.defineProperty(exports, "NodeTypes", {
+    enumerable: true,
+    get: function () { return devtools.NodeTypes; }
+});
+exports.Signal = devtools.Signal;
+exports.asyncTracking = devtools.asyncTracking;
+exports.clearModel = devtools.clearModel;
+exports.configureReactivityLeakMonitor = devtools.configureReactivityLeakMonitor;
+exports.createComputed = devtools.createComputed;
+exports.createLazyComputed = devtools.createLazyComputed;
+exports.createSignal = devtools.createSignal;
+exports.deepClone = devtools.deepClone;
+exports.dom = devtools.dom;
+exports.effect = devtools.effect;
+exports.errorHandler = devtools.errorHandler;
+exports.reactive = devtools.reactive;
+exports.safeCall = devtools.safeCall;
+exports.safeCallAsync = devtools.safeCallAsync;
+exports.safeCallSilent = devtools.safeCallSilent;
+exports.setUnexpectedErrorHandler = devtools.setUnexpectedErrorHandler;
+exports.untracked = devtools.untracked;
+exports.useModel = devtools.useModel;
+exports.ContentBlock = ContentBlock;
+exports.ContentBody = ContentBody;
+exports.Dictionary = Dictionary;
+exports.FromService = FromService;
+exports.Injectable = Injectable;
+exports.List = List;
+exports.NameValuePair = NameValuePair;
+exports.Query = Query;
+exports.Resilience = Resilience;
+exports.RouterLink = RouterLink;
+exports.Transport = Transport;
+exports.TransportTo = TransportTo;
+exports.Transporter = Transporter;
+exports.Virtualization = Virtualization;
+exports.decorate = decorate;
+exports.preProcessing = preProcessing;
+exports.read = read;
+exports.toGetter = toGetter;
+//# sourceMappingURL=index.cjs.map