import { __decorate } from "tslib";
import { html, nothing } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { styles } from './nile-detail.css';
import NileElement from '../internal/nile-element';
import { watch } from '../internal/watch';
import { animateShow, animateHide, showDetail, hideDetail, handleSummaryClick, handleSummaryKeyDown, } from './nile-detail.utils';
import '../nile-checkbox/index';
import '../nile-input/index';
import '../nile-link/index';
import '../nile-icon/index';
import '../nile-lite-tooltip/index';
import { VirtualizerController } from '@tanstack/lit-virtual';
const IS_BROWSER = typeof window !== 'undefined';
let NileDetail = class NileDetail extends NileElement {
    constructor() {
        super(...arguments);
        this.open = false;
        this.heading = '';
        this.description = '';
        this.expandIconPlacement = 'right';
        this.disabled = false;
        this.variant = 'default';
        this.items = [];
        this.selected = [];
        this.allowHtmlLabel = false;
        this.disableLocalSearch = false;
        this.pageSize = 200;
        this.placeholderLabel = 'Loading…';
        this.searchPlaceholder = 'Search...';
        this.itemsLabel = 'attributes';
        this.restoreLabel = 'Restore';
        this.clearLabel = 'Clear';
        this.gridRows = 6;
        this.gridColumns = 3;
        this.minColumnWidth = '220px';
        this.laneHeight = 32;
        this.orientation = 'horizontal';
        this.maxHeight = '320px';
        this.matrixColumns = 20;
        this.virtualize = false;
        this.virtualizeThreshold = 60;
        this.overscan = 4;
        this._detailOpen = false;
        this._hasSlottedContent = false;
        this._searchTerm = '';
        this._selectedSet = new Set();
        this._showSelectedOnly = false;
        this.showSelectedToggle = false;
        this.selectedOnlyLabel = 'Selected';
        this.showAllLabel = 'Show all';
        this._restoreDefaults = null;
        this._gridResizeObserver = null;
        this._virtCtrl = null;
        this._rowVirtCtrl = null;
        this._colVirtCtrl = null;
        this._pageCache = new Map();
        this._pendingPages = new Set();
    }
    /** True for any variant that renders the selection UI/behavior. */
    get _isSelectionVariant() {
        return this.variant === 'selection' || this.variant === 'select-light';
    }
    /** True for any variant that applies the light styling. */
    get _isLightVariant() {
        return this.variant === 'light' || this.variant === 'select-light';
    }
    get _isInfiniteMode() {
        return (this._isSelectionVariant &&
            typeof this.fetchPage === 'function' &&
            typeof this.totalCount === 'number' &&
            this.orientation !== 'both');
    }
    _effectiveTotalCount() {
        if (this._isInfiniteMode)
            return this.totalCount ?? 0;
        return this._filteredItems.length;
    }
    _getItemAt(index) {
        if (!this._isInfiniteMode)
            return this._filteredItems[index];
        const pageSize = Math.max(1, this.pageSize);
        const pageIndex = Math.floor(index / pageSize);
        const page = this._pageCache.get(pageIndex);
        if (!page)
            return undefined;
        return page[index - pageIndex * pageSize];
    }
    _scheduleFetchForRange(start, end) {
        if (!this._isInfiniteMode || !this.fetchPage)
            return;
        const pageSize = Math.max(1, this.pageSize);
        const total = this.totalCount ?? 0;
        if (total <= 0)
            return;
        const firstPage = Math.floor(start / pageSize);
        const lastPage = Math.floor(Math.min(end, total - 1) / pageSize);
        for (let p = firstPage; p <= lastPage; p++) {
            if (this._pageCache.has(p) || this._pendingPages.has(p))
                continue;
            this._loadPage(p);
        }
    }
    async _loadPage(pageIndex) {
        if (!this.fetchPage)
            return;
        const pageSize = Math.max(1, this.pageSize);
        const offset = pageIndex * pageSize;
        const total = this.totalCount ?? 0;
        const limit = Math.min(pageSize, Math.max(0, total - offset));
        if (limit <= 0)
            return;
        this._pendingPages.add(pageIndex);
        try {
            const rows = await this.fetchPage(offset, limit);
            this._pageCache.set(pageIndex, Array.isArray(rows) ? rows : []);
            this.dispatchEvent(new CustomEvent('nile-page-load', {
                detail: { pageIndex, offset, limit, rows: this._pageCache.get(pageIndex) },
                bubbles: true,
                composed: true,
            }));
        }
        catch (err) {
            this.dispatchEvent(new CustomEvent('nile-page-error', {
                detail: { pageIndex, offset, limit, error: err },
                bubbles: true,
                composed: true,
            }));
        }
        finally {
            this._pendingPages.delete(pageIndex);
            this.requestUpdate();
        }
    }
    /** Public: clear the page cache (use after a query change to refetch). */
    resetPages() {
        this._pageCache = new Map();
        this._pendingPages = new Set();
        this.requestUpdate();
    }
    get _isVirtualized() {
        if (!IS_BROWSER)
            return false;
        if (this._isInfiniteMode)
            return true;
        return this._isSelectionVariant
            && (this.virtualize || this.items.length > this.virtualizeThreshold);
    }
    get _columnWidthPx() {
        const parsed = parseInt(this.minColumnWidth, 10);
        return Number.isFinite(parsed) && parsed > 0 ? parsed : 220;
    }
    firstUpdated() {
        this._detailOpen = this.open;
        this.body.hidden = !this.open;
        this.body.style.height = this.open ? 'auto' : '0';
        this._syncSelectedFromProperty();
        if (this._restoreDefaults === null) {
            this._restoreDefaults = [...this._selectedSet];
        }
        this._setupGridResizeObserver();
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this._gridResizeObserver?.disconnect();
        this._gridResizeObserver = null;
    }
    updated(_changed) {
        if (this._isSelectionVariant) {
            this._setupGridResizeObserver();
            this._syncVirtualizer();
            this._scheduleTooltipOverflowCheck();
        }
    }
    _syncVirtualizer() {
        if (!IS_BROWSER)
            return;
        if (!this._isVirtualized) {
            this._virtCtrl = null;
            this._rowVirtCtrl = null;
            this._colVirtCtrl = null;
            return;
        }
        const grid = this.shadowRoot?.querySelector('.detail__selection-grid');
        if (!grid)
            return;
        if (this.orientation === 'both') {
            this._virtCtrl = null;
            this._syncBothVirtualizers();
            return;
        }
        // Reset 2-axis controllers if we switched away from 'both'.
        this._rowVirtCtrl = null;
        this._colVirtCtrl = null;
        const count = this._effectiveTotalCount();
        const isVertical = this.orientation === 'vertical';
        const lanes = Math.max(1, isVertical ? this.gridColumns : this.gridRows);
        const itemSize = isVertical ? this.laneHeight : this._columnWidthPx;
        if (!this._virtCtrl) {
            this._virtCtrl = new VirtualizerController(this, {
                count,
                getScrollElement: () => this.shadowRoot?.querySelector('.detail__selection-grid'),
                estimateSize: () => itemSize,
                horizontal: !isVertical,
                lanes,
                overscan: this.overscan,
            });
            return;
        }
        const v = this._virtCtrl.getVirtualizer();
        const prev = v.options;
        const orientationChanged = !!prev.horizontal !== !isVertical;
        if (prev.count !== count ||
            prev.lanes !== lanes ||
            prev.overscan !== this.overscan ||
            orientationChanged) {
            v.setOptions({
                ...prev,
                count,
                lanes,
                overscan: this.overscan,
                horizontal: !isVertical,
                estimateSize: () => itemSize,
            });
            v.measure();
        }
    }
    _syncBothVirtualizers() {
        const totalItems = this._filteredItems.length;
        const cols = Math.max(1, this.matrixColumns);
        const rows = Math.max(1, Math.ceil(totalItems / cols));
        const columnWidth = this._columnWidthPx;
        const rowHeight = this.laneHeight;
        const getScrollEl = () => this.shadowRoot?.querySelector('.detail__selection-grid');
        if (!this._rowVirtCtrl) {
            this._rowVirtCtrl = new VirtualizerController(this, {
                count: rows,
                getScrollElement: getScrollEl,
                estimateSize: () => rowHeight,
                horizontal: false,
                overscan: this.overscan,
            });
        }
        else {
            const rv = this._rowVirtCtrl.getVirtualizer();
            const prev = rv.options;
            if (prev.count !== rows || prev.overscan !== this.overscan) {
                rv.setOptions({
                    ...prev,
                    count: rows,
                    overscan: this.overscan,
                    estimateSize: () => rowHeight,
                });
                rv.measure();
            }
        }
        if (!this._colVirtCtrl) {
            this._colVirtCtrl = new VirtualizerController(this, {
                count: cols,
                getScrollElement: getScrollEl,
                estimateSize: () => columnWidth,
                horizontal: true,
                overscan: this.overscan,
            });
        }
        else {
            const cv = this._colVirtCtrl.getVirtualizer();
            const prev = cv.options;
            if (prev.count !== cols || prev.overscan !== this.overscan) {
                cv.setOptions({
                    ...prev,
                    count: cols,
                    overscan: this.overscan,
                    estimateSize: () => columnWidth,
                });
                cv.measure();
            }
        }
    }
    _setupGridResizeObserver() {
        if (!this._isSelectionVariant)
            return;
        if (typeof ResizeObserver === 'undefined')
            return;
        const grid = this.shadowRoot?.querySelector('.detail__selection-grid');
        if (!grid)
            return;
        if (this._gridResizeObserver)
            return;
        this._gridResizeObserver = new ResizeObserver(() => this._scheduleTooltipOverflowCheck());
        this._gridResizeObserver.observe(grid);
    }
    _scheduleTooltipOverflowCheck() {
        if (typeof requestAnimationFrame === 'undefined')
            return;
        requestAnimationFrame(() => this._updateTooltipOverflowStates());
    }
    async _updateTooltipOverflowStates() {
        const tooltips = this.shadowRoot?.querySelectorAll('.detail__selection-tooltip');
        if (!tooltips)
            return;
        for (const tip of tooltips) {
            const cb = tip.querySelector('nile-checkbox');
            if (!cb)
                continue;
            if (cb.updateComplete)
                await cb.updateComplete;
            const labelEl = cb.shadowRoot?.querySelector('[part="label"]');
            const overflowing = !!labelEl && labelEl.scrollWidth > labelEl.clientWidth + 1;
            if (overflowing)
                tip.removeAttribute('disabled');
            else
                tip.setAttribute('disabled', '');
        }
    }
    _onSelectedPropertyChange() {
        this._syncSelectedFromProperty();
    }
    _onConfigChange() {
        this._applyConfig();
    }
    _applyConfig() {
        const c = this.config;
        if (!c)
            return;
        if (c.variant !== undefined)
            this.variant = c.variant;
        if (c.heading !== undefined)
            this.heading = c.heading;
        if (c.description !== undefined)
            this.description = c.description;
        if (c.itemsLabel !== undefined)
            this.itemsLabel = c.itemsLabel;
        if (c.open !== undefined)
            this.open = c.open;
        if (c.disabled !== undefined)
            this.disabled = c.disabled;
        if (c.items !== undefined)
            this.items = c.items;
        if (c.selected !== undefined)
            this.selected = c.selected;
        if (c.renderItemConfig !== undefined)
            this.renderItemConfig = c.renderItemConfig;
        if (c.allowHtmlLabel !== undefined)
            this.allowHtmlLabel = c.allowHtmlLabel;
        if (c.layout) {
            const l = c.layout;
            if (l.orientation !== undefined)
                this.orientation = l.orientation;
            if (l.gridRows !== undefined)
                this.gridRows = l.gridRows;
            if (l.gridColumns !== undefined)
                this.gridColumns = l.gridColumns;
            if (l.matrixColumns !== undefined)
                this.matrixColumns = l.matrixColumns;
            if (l.minColumnWidth !== undefined)
                this.minColumnWidth = l.minColumnWidth;
            if (l.laneHeight !== undefined)
                this.laneHeight = l.laneHeight;
            if (l.maxHeight !== undefined)
                this.maxHeight = l.maxHeight;
            if (l.expandIconPlacement !== undefined)
                this.expandIconPlacement = l.expandIconPlacement;
        }
        if (c.search) {
            if (c.search.placeholder !== undefined)
                this.searchPlaceholder = c.search.placeholder;
            if (c.search.disableLocal !== undefined)
                this.disableLocalSearch = c.search.disableLocal;
        }
        if (c.virtualization) {
            if (c.virtualization.enabled !== undefined)
                this.virtualize = c.virtualization.enabled;
            if (c.virtualization.threshold !== undefined)
                this.virtualizeThreshold = c.virtualization.threshold;
            if (c.virtualization.overscan !== undefined)
                this.overscan = c.virtualization.overscan;
        }
        if (c.pagination) {
            if (c.pagination.totalCount !== undefined)
                this.totalCount = c.pagination.totalCount;
            if (c.pagination.pageSize !== undefined)
                this.pageSize = c.pagination.pageSize;
            if (c.pagination.fetchPage !== undefined)
                this.fetchPage = c.pagination.fetchPage;
            if (c.pagination.placeholderLabel !== undefined)
                this.placeholderLabel = c.pagination.placeholderLabel;
        }
        if (c.labels) {
            if (c.labels.restore !== undefined)
                this.restoreLabel = c.labels.restore;
            if (c.labels.clear !== undefined)
                this.clearLabel = c.labels.clear;
            if (c.labels.selectedOnly !== undefined)
                this.selectedOnlyLabel = c.labels.selectedOnly;
            if (c.labels.showAll !== undefined)
                this.showAllLabel = c.labels.showAll;
        }
        if (c.showSelectedToggle !== undefined)
            this.showSelectedToggle = c.showSelectedToggle;
    }
    _syncSelectedFromProperty() {
        this._selectedSet = new Set(this.selected || []);
    }
    _getItemValue(item) {
        const rc = this.renderItemConfig;
        if (rc?.getValue)
            return String(rc.getValue(item));
        if (typeof item === 'string')
            return item;
        return String(item.value ?? '');
    }
    _getItemLabel(item) {
        const rc = this.renderItemConfig;
        if (rc?.getDisplayText)
            return rc.getDisplayText(item);
        if (typeof item === 'string')
            return item;
        return item.label ?? this._getItemValue(item);
    }
    _getItemSearchText(item) {
        const rc = this.renderItemConfig;
        if (rc?.getSearchText)
            return rc.getSearchText(item);
        return this._getItemLabel(item);
    }
    _getItemDescription(item) {
        const rc = this.renderItemConfig;
        if (rc?.getDescription)
            return rc.getDescription(item) ?? '';
        if (typeof item === 'string')
            return '';
        return item.description ?? '';
    }
    _getItemPrefix(item) {
        const rc = this.renderItemConfig;
        if (rc?.getPrefix)
            return rc.getPrefix(item) ?? '';
        if (typeof item === 'string')
            return '';
        return item.prefix ?? '';
    }
    _getItemSuffix(item) {
        const rc = this.renderItemConfig;
        if (rc?.getSuffix)
            return rc.getSuffix(item) ?? '';
        if (typeof item === 'string')
            return '';
        return item.suffix ?? '';
    }
    _getItemDisabled(item) {
        const rc = this.renderItemConfig;
        if (rc?.getDisabled)
            return !!rc.getDisabled(item);
        if (typeof item === 'string')
            return false;
        return !!item.disabled;
    }
    _getItemClassName(item) {
        const rc = this.renderItemConfig;
        if (rc?.getClassName)
            return rc.getClassName(item) ?? '';
        if (typeof item === 'string')
            return '';
        return item.className ?? '';
    }
    get _filteredItems() {
        let source = this.items;
        if (this._showSelectedOnly) {
            source = source.filter(item => this._selectedSet.has(this._getItemValue(item)));
        }
        if (this.disableLocalSearch)
            return source;
        const q = this._searchTerm.trim().toLowerCase();
        if (!q)
            return source;
        return source.filter(item => this._getItemSearchText(item).toLowerCase().includes(q));
    }
    _onToggleSelectedOnly(event) {
        event.preventDefault();
        const next = !this._showSelectedOnly;
        if (next && this._selectedSet.size === 0)
            return;
        this._showSelectedOnly = next;
    }
    _selectableValues() {
        const source = this._isInfiniteMode
            ? Array.from(this._pageCache.values()).flat()
            : this.items;
        return source
            .filter(i => !this._getItemDisabled(i))
            .map(i => this._getItemValue(i));
    }
    get _allChecked() {
        const selectable = this._selectableValues();
        if (selectable.length === 0)
            return false;
        return selectable.every(v => this._selectedSet.has(v));
    }
    get _indeterminate() {
        const selectable = this._selectableValues();
        const sel = selectable.filter(v => this._selectedSet.has(v)).length;
        return sel > 0 && sel < selectable.length;
    }
    get _countLabel() {
        const total = this._isInfiniteMode ? (this.totalCount ?? 0) : this.items.length;
        return `${this._selectedSet.size} of ${total} ${this.itemsLabel} selected`;
    }
    _emitSelectionChange() {
        this.selected = [...this._selectedSet];
        this.dispatchEvent(new CustomEvent('nile-change', {
            detail: { selected: [...this._selectedSet] },
            bubbles: true,
            composed: true,
        }));
    }
    _onItemChange(value, disabled, event) {
        if (disabled) {
            event.preventDefault();
            return;
        }
        const target = event.target;
        const next = new Set(this._selectedSet);
        if (target.checked)
            next.add(value);
        else
            next.delete(value);
        this._selectedSet = next;
        this._emitSelectionChange();
    }
    _onSelectAllChange(event) {
        const target = event.target;
        const selectable = this._selectableValues();
        const next = new Set(this._selectedSet);
        if (target.checked)
            selectable.forEach(v => next.add(v));
        else
            selectable.forEach(v => next.delete(v));
        this._selectedSet = next;
        this._emitSelectionChange();
    }
    _emitSearch(value) {
        this.dispatchEvent(new CustomEvent('nile-search', {
            detail: { value },
            bubbles: true,
            composed: true,
        }));
    }
    _onSearchInput(event) {
        const target = event.target;
        const value = target.value ?? '';
        this._searchTerm = value;
        if (this.disableLocalSearch)
            this._emitSearch(value);
    }
    _onSearchClear() {
        this._searchTerm = '';
        if (this.disableLocalSearch)
            this._emitSearch('');
    }
    _onRestore(event) {
        event.preventDefault();
        const source = this._restoreDefaults ?? this._selectableValues();
        this._selectedSet = new Set(source);
        this._emitSelectionChange();
    }
    _onClear(event) {
        event.preventDefault();
        this._selectedSet = new Set();
        this._showSelectedOnly = false;
        this._emitSelectionChange();
    }
    _handleDefaultSlotChange(event) {
        const slot = event.target;
        const nodes = slot.assignedNodes({ flatten: true });
        this._hasSlottedContent = nodes.some(node => {
            if (node.nodeType === Node.ELEMENT_NODE)
                return true;
            if (node.nodeType === Node.TEXT_NODE)
                return !!(node.textContent && node.textContent.trim());
            return false;
        });
    }
    _stopHeaderToggle(event) {
        event.stopPropagation();
    }
    _handleSummaryClick(event) {
        event.preventDefault();
        handleSummaryClick(this);
    }
    _handleSummaryKeyDown(event) {
        handleSummaryKeyDown(event, this);
    }
    async handleOpenChange() {
        if (this.open) {
            this._detailOpen = true;
            await animateShow(this);
        }
        else {
            await animateHide(this);
            this._detailOpen = false;
        }
    }
    async show() {
        return showDetail(this);
    }
    async hide() {
        return hideDetail(this);
    }
    get _summaryLabel() {
        return [this.heading, this.description].filter(Boolean).join(', ');
    }
    _renderSelectionLabel() {
        return html `
      <div part="selection-label" class="detail__selection-label">
        <nile-checkbox
          part="select-all"
          class="detail__select-all"
          ?checked=${this._allChecked}
          ?indeterminate=${this._indeterminate}
          aria-label=${`Select all ${this.heading || this.itemsLabel}`}
          @click=${this._stopHeaderToggle}
          @nile-change=${this._onSelectAllChange}
        ></nile-checkbox>
        <div class="detail__selection-title">
          <span part="label-text" class="detail__heading-text">${this.heading}</span>
          <span part="selection-count" class="detail__selection-count">${this._countLabel}</span>
        </div>
      </div>
    `;
    }
    _renderSelectionBody() {
        const virtualized = this._isVirtualized;
        const isVertical = this.orientation === 'vertical';
        const isBoth = this.orientation === 'both';
        const laneHeightPx = this.laneHeight;
        const columnWidth = this._columnWidthPx;
        let gridStyle = '';
        if (virtualized) {
            if (isBoth) {
                gridStyle = `max-height: ${this.maxHeight}; height: ${this.maxHeight};`;
            }
            else if (isVertical) {
                gridStyle = `max-height: ${this.maxHeight}; height: ${this.maxHeight};`;
            }
            else {
                const lanes = Math.max(1, this.gridRows);
                gridStyle = `height: ${lanes * laneHeightPx}px;`;
            }
        }
        else if (isVertical) {
            const cols = Math.max(1, this.gridColumns);
            gridStyle = `grid-template-columns: repeat(${cols}, minmax(0, 1fr)); grid-auto-flow: row; max-height: ${this.maxHeight}; overflow-y: auto; overflow-x: hidden;`;
        }
        else {
            const lanes = Math.max(1, this.gridRows);
            gridStyle = `grid-template-rows: repeat(${lanes}, auto); grid-auto-columns: minmax(${this.minColumnWidth}, 1fr);`;
        }
        return html `
      <div part="selection-toolbar" class="detail__selection-toolbar">
      <slot name="tooblar-actions-prefix"></slot>
        <slot name="toolbar-search" class="detail__selection-search-slot">
          <nile-input
            part="search"
            class="detail__selection-search"
            placeholder=${this.searchPlaceholder}
            clearable
            .value=${this._searchTerm}
            @nile-input=${this._onSearchInput}
            @nile-clear=${this._onSearchClear}
          >
            <nile-icon slot="prefix" name="search" library="system"></nile-icon>
          </nile-input>
        </slot>
        <slot name="toolbar-actions" class="detail__selection-actions">
          ${this.showSelectedToggle
            ? html `
                <nile-link
                  href="#"
                  variant="subtle"
                  class="detail__selected-toggle"
                  @click=${this._onToggleSelectedOnly}
                >
                  <nile-icon slot="prefix" name="filter" library="system"></nile-icon>
                  ${this._showSelectedOnly ? this.showAllLabel : this.selectedOnlyLabel}
                </nile-link>
              `
            : nothing}
          <nile-link href="#" variant="subtle" @click=${this._onRestore}>${this.restoreLabel}</nile-link>
          <nile-link href="#" variant="subtle" @click=${this._onClear}>${this.clearLabel}</nile-link>
        </slot>
        <slot name="tooblar-actions-suffix"></slot>
      </div>
      <div
        part="selection-grid"
        class=${classMap({
            'detail__selection-grid': true,
            'detail__selection-grid--virtual': virtualized,
            'detail__selection-grid--vertical': isVertical,
            'detail__selection-grid--both': isBoth,
        })}
        style=${gridStyle}
      >
        ${virtualized
            ? (isBoth
                ? this._renderBothVirtualGrid(laneHeightPx, columnWidth)
                : this._renderVirtualGrid(laneHeightPx, columnWidth, isVertical))
            : this._renderStaticGrid()}
      </div>
    `;
    }
    _renderItemContent(item) {
        const label = this._getItemLabel(item);
        const description = this._getItemDescription(item);
        const prefix = this._getItemPrefix(item);
        const suffix = this._getItemSuffix(item);
        const allowHtml = this.allowHtmlLabel;
        return html `
      ${prefix
            ? html `<span class="detail__selection-prefix" part="item-prefix">${allowHtml ? unsafeHTML(prefix) : prefix}</span>`
            : ''}
      <span class="detail__selection-text" part="item-text">
        <span class="detail__selection-item-label" part="item-label">${allowHtml ? unsafeHTML(label) : label}</span>
        ${description
            ? html `<span class="detail__selection-desc" part="item-description">${allowHtml ? unsafeHTML(description) : description}</span>`
            : ''}
      </span>
      ${suffix
            ? html `<span class="detail__selection-suffix" part="item-suffix">${allowHtml ? unsafeHTML(suffix) : suffix}</span>`
            : ''}
    `;
    }
    _renderItemTooltip(item, opts = {}) {
        const value = this._getItemValue(item);
        const label = this._getItemLabel(item);
        const description = this._getItemDescription(item);
        const isDisabled = this._getItemDisabled(item);
        const className = this._getItemClassName(item);
        const tooltipContent = description ? `${label} — ${description}` : label;
        const tooltipClass = `detail__selection-tooltip${opts.extraClasses ? ' ' + opts.extraClasses : ''}`;
        const checkboxClass = classMap({
            'detail__selection-checkbox': true,
            'detail__selection-checkbox--disabled': isDisabled,
            [className]: !!className,
        });
        return html `
      <nile-lite-tooltip
        class=${tooltipClass}
        content=${tooltipContent}
        size="small"
        disabled
        style=${opts.positionStyle ?? nothing}
      >
        <nile-checkbox
          class=${checkboxClass}
          ?checked=${this._selectedSet.has(value)}
          ?disabled=${isDisabled}
          @nile-change=${(e) => this._onItemChange(value, isDisabled, e)}
        >${this._renderItemContent(item)}</nile-checkbox>
      </nile-lite-tooltip>
    `;
    }
    _renderStaticGrid() {
        return html `${this._filteredItems.map(item => this._renderItemTooltip(item))}`;
    }
    _renderBothVirtualGrid(_laneHeightPx, _columnWidthPx) {
        const rowV = this._rowVirtCtrl?.getVirtualizer();
        const colV = this._colVirtCtrl?.getVirtualizer();
        const rowTotal = rowV?.getTotalSize() ?? 0;
        const colTotal = colV?.getTotalSize() ?? 0;
        const rowItems = rowV?.getVirtualItems() ?? [];
        const colItems = colV?.getVirtualItems() ?? [];
        const cols = Math.max(1, this.matrixColumns);
        const total = this._filteredItems.length;
        return html `
      <div
        class="detail__selection-track"
        style="width: ${colTotal}px; height: ${rowTotal}px; position: relative;"
      >
        ${rowItems.flatMap(rvi => colItems.map(cvi => {
            const idx = rvi.index * cols + cvi.index;
            if (idx >= total)
                return null;
            const item = this._filteredItems[idx];
            if (item === undefined)
                return null;
            const positionStyle = `position: absolute; top: ${rvi.start}px; left: ${cvi.start}px; width: ${cvi.size}px; height: ${rvi.size}px;`;
            return this._renderItemTooltip(item, {
                positionStyle,
                extraClasses: 'detail__selection-tooltip--virtual',
            });
        }))}
      </div>
    `;
    }
    _renderVirtualGrid(laneHeightPx, _columnWidthPx, isVertical) {
        const v = this._virtCtrl?.getVirtualizer();
        const totalSize = v?.getTotalSize() ?? 0;
        const virtualItems = v?.getVirtualItems() ?? [];
        const lanes = Math.max(1, isVertical ? this.gridColumns : this.gridRows);
        if (this._isInfiniteMode && virtualItems.length > 0) {
            const first = virtualItems[0].index;
            const last = virtualItems[virtualItems.length - 1].index;
            this._scheduleFetchForRange(first, last);
        }
        const trackStyle = isVertical
            ? `width: 100%; height: ${totalSize}px; position: relative;`
            : `width: ${totalSize}px; height: 100%; position: relative;`;
        return html `
      <div class="detail__selection-track" style=${trackStyle}>
        ${virtualItems.map(vi => {
            const laneIdx = vi.lane ?? 0;
            const positionStyle = isVertical
                ? `position: absolute; top: ${vi.start}px; left: calc(${laneIdx} * (100% / ${lanes})); width: calc(100% / ${lanes}); height: ${vi.size}px;`
                : `position: absolute; top: ${laneIdx * laneHeightPx}px; left: ${vi.start}px; width: ${vi.size}px; height: ${laneHeightPx}px;`;
            const item = this._getItemAt(vi.index);
            if (item === undefined) {
                return this._renderPlaceholder(positionStyle);
            }
            return this._renderItemTooltip(item, {
                positionStyle,
                extraClasses: 'detail__selection-tooltip--virtual',
            });
        })}
      </div>
    `;
    }
    _renderPlaceholder(positionStyle) {
        return html `
      <div class="detail__selection-placeholder" style=${positionStyle} part="item-placeholder">
        <div class="detail__selection-placeholder-bar"></div>
        <span class="detail__selection-placeholder-label">${this.placeholderLabel}</span>
      </div>
    `;
    }
    render() {
        const isSelection = this._isSelectionVariant;
        return html `
      <details
        part="base"
        ?open=${this._detailOpen}
        class=${classMap({
            'detail': true,
            'detail--open': this.open,
            'detail--disabled': this.disabled,
            'detail--selection': isSelection,
            'detail--light': this._isLightVariant,
        })}
      >
        <summary
          part="header"
          id="header"
          class=${classMap({
            'detail__header': true,
            'detail__header--icon-left': this.expandIconPlacement === 'left',
        })}
          aria-label=${this._summaryLabel || nothing}
          aria-expanded=${this.open ? 'true' : 'false'}
          aria-disabled=${this.disabled ? 'true' : 'false'}
          tabindex=${this.disabled ? '-1' : '0'}
          @click=${this._handleSummaryClick}
          @keydown=${this._handleSummaryKeyDown}
        >
          <slot name="label" part="label" class="detail__label">
            ${isSelection
            ? this._renderSelectionLabel()
            : html `
                  <span part="label-text" class="detail__heading-text">${this.heading}</span>
                  ${this.description
                ? html `<span part="description" class="detail__description">${this.description}</span>`
                : ''}
                `}
          </slot>

          <slot name="header-actions" part="header-actions" class="detail__header-actions"></slot>

          <slot name="prefix" part="prefix" class="detail__prefix"></slot>

          <span part="summary-icon" class="detail__summary-icon" aria-hidden="true">
            <slot name="expand-icon">
              <nile-icon
                name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))"
                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                library="system"
              ></nile-icon>
            </slot>
          </span>

          <slot name="suffix" part="suffix" class="detail__suffix"></slot>

        </summary>

        <div part="content" class="detail__body">
          ${isSelection
            ? html `<div part="selection-content" class="detail__selection-content">${this._renderSelectionBody()}</div>`
            : ''}
          <slot
            id="content"
            class=${classMap({
            'detail__content': true,
            'detail__content--empty': !this._hasSlottedContent,
        })}
            @slotchange=${this._handleDefaultSlotChange}
          ></slot>
        </div>
      </details>
    `;
    }
};
NileDetail.styles = styles;
__decorate([
    query('details')
], NileDetail.prototype, "detail", void 0);
__decorate([
    query('summary')
], NileDetail.prototype, "header", void 0);
__decorate([
    query('.detail__body')
], NileDetail.prototype, "body", void 0);
__decorate([
    property({ attribute: true, type: Boolean, reflect: true })
], NileDetail.prototype, "open", void 0);
__decorate([
    property({ attribute: true, type: String, reflect: true })
], NileDetail.prototype, "heading", void 0);
__decorate([
    property({ attribute: true, type: String, reflect: true })
], NileDetail.prototype, "description", void 0);
__decorate([
    property({ attribute: true, reflect: true })
], NileDetail.prototype, "expandIconPlacement", void 0);
__decorate([
    property({ attribute: true, type: Boolean, reflect: true })
], NileDetail.prototype, "disabled", void 0);
__decorate([
    property({ attribute: true, type: String, reflect: true })
], NileDetail.prototype, "variant", void 0);
__decorate([
    property({ attribute: false, type: Array })
], NileDetail.prototype, "items", void 0);
__decorate([
    property({ attribute: false, type: Array })
], NileDetail.prototype, "selected", void 0);
__decorate([
    property({ attribute: false })
], NileDetail.prototype, "renderItemConfig", void 0);
__decorate([
    property({ attribute: 'allow-html-label', type: Boolean })
], NileDetail.prototype, "allowHtmlLabel", void 0);
__decorate([
    property({ attribute: 'disable-local-search', type: Boolean })
], NileDetail.prototype, "disableLocalSearch", void 0);
__decorate([
    property({ attribute: 'total-count', type: Number })
], NileDetail.prototype, "totalCount", void 0);
__decorate([
    property({ attribute: 'page-size', type: Number })
], NileDetail.prototype, "pageSize", void 0);
__decorate([
    property({ attribute: false })
], NileDetail.prototype, "fetchPage", void 0);
__decorate([
    property({ attribute: 'placeholder-label', type: String })
], NileDetail.prototype, "placeholderLabel", void 0);
__decorate([
    property({ attribute: false })
], NileDetail.prototype, "config", void 0);
__decorate([
    property({ attribute: 'search-placeholder', type: String })
], NileDetail.prototype, "searchPlaceholder", void 0);
__decorate([
    property({ attribute: 'items-label', type: String })
], NileDetail.prototype, "itemsLabel", void 0);
__decorate([
    property({ attribute: 'restore-label', type: String })
], NileDetail.prototype, "restoreLabel", void 0);
__decorate([
    property({ attribute: 'clear-label', type: String })
], NileDetail.prototype, "clearLabel", void 0);
__decorate([
    property({ attribute: 'grid-rows', type: Number })
], NileDetail.prototype, "gridRows", void 0);
__decorate([
    property({ attribute: 'grid-columns', type: Number })
], NileDetail.prototype, "gridColumns", void 0);
__decorate([
    property({ attribute: 'min-column-width', type: String })
], NileDetail.prototype, "minColumnWidth", void 0);
__decorate([
    property({ attribute: 'lane-height', type: Number })
], NileDetail.prototype, "laneHeight", void 0);
__decorate([
    property({ attribute: true, type: String, reflect: true })
], NileDetail.prototype, "orientation", void 0);
__decorate([
    property({ attribute: 'max-height', type: String })
], NileDetail.prototype, "maxHeight", void 0);
__decorate([
    property({ attribute: 'matrix-columns', type: Number })
], NileDetail.prototype, "matrixColumns", void 0);
__decorate([
    property({ attribute: true, type: Boolean })
], NileDetail.prototype, "virtualize", void 0);
__decorate([
    property({ attribute: 'virtualize-threshold', type: Number })
], NileDetail.prototype, "virtualizeThreshold", void 0);
__decorate([
    property({ attribute: 'overscan', type: Number })
], NileDetail.prototype, "overscan", void 0);
__decorate([
    state()
], NileDetail.prototype, "_detailOpen", void 0);
__decorate([
    state()
], NileDetail.prototype, "_hasSlottedContent", void 0);
__decorate([
    state()
], NileDetail.prototype, "_searchTerm", void 0);
__decorate([
    state()
], NileDetail.prototype, "_selectedSet", void 0);
__decorate([
    state()
], NileDetail.prototype, "_showSelectedOnly", void 0);
__decorate([
    property({ attribute: 'show-selected-toggle', type: Boolean, reflect: true })
], NileDetail.prototype, "showSelectedToggle", void 0);
__decorate([
    property({ attribute: 'selected-only-label', type: String })
], NileDetail.prototype, "selectedOnlyLabel", void 0);
__decorate([
    property({ attribute: 'show-all-label', type: String })
], NileDetail.prototype, "showAllLabel", void 0);
__decorate([
    watch('selected', { waitUntilFirstUpdate: false })
], NileDetail.prototype, "_onSelectedPropertyChange", null);
__decorate([
    watch('config', { waitUntilFirstUpdate: false })
], NileDetail.prototype, "_onConfigChange", null);
__decorate([
    watch('open', { waitUntilFirstUpdate: true })
], NileDetail.prototype, "handleOpenChange", null);
NileDetail = __decorate([
    customElement('nile-detail')
], NileDetail);
export { NileDetail };
export default NileDetail;
//# sourceMappingURL=nile-detail.js.map