@alaarab/ogrid-angular 2.5.9 → 2.6.1

package/dist/esm/components/base-inline-cell-editor.component.js

@@ -0,0 +1,380 @@
+import { Directive, Input, Output, EventEmitter, signal, computed, ViewChild } from '@angular/core';
+import { formatDateForDisplay, parseUserInputDate, getDateInputPlaceholder } from '@alaarab/ogrid-core';
+import * as i0 from "@angular/core";
+const _c0 = ["inputEl"];
+const _c1 = ["selectWrapper"];
+const _c2 = ["selectDropdown"];
+const _c3 = ["richSelectWrapper"];
+const _c4 = ["richSelectInput"];
+const _c5 = ["richSelectDropdown"];
+const _c6 = ["richSelectOptions"];
+/**
+ * Abstract base class for Angular inline cell editors.
+ * Contains all shared signals, lifecycle hooks, keyboard handlers,
+ * dropdown positioning, and display logic.
+ *
+ * Subclasses only need a @Component decorator with selector + template.
+ */
+export class BaseInlineCellEditorComponent {
+    constructor() {
+        this.commit = new EventEmitter();
+        this.cancel = new EventEmitter();
+        this.localValue = signal('', ...(ngDevMode ? [{ debugName: "localValue" }] : []));
+        this.highlightedIndex = signal(0, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : []));
+        this.selectOptions = signal([], ...(ngDevMode ? [{ debugName: "selectOptions" }] : []));
+        this.searchText = signal('', ...(ngDevMode ? [{ debugName: "searchText" }] : []));
+        this.scrollCleanup = null;
+        this.suppressNextBlur = false;
+        this.filteredOptions = computed(() => {
+            const options = this.selectOptions();
+            const search = this.searchText().trim().toLowerCase();
+            if (!search)
+                return options;
+            return options.filter((v) => this.getDisplayText(v).toLowerCase().includes(search));
+        }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+        this._initialized = false;
+    }
+    ngOnInit() {
+        this._initialized = true;
+        this.syncFromInputs();
+    }
+    ngOnChanges() {
+        if (this._initialized) {
+            this.syncFromInputs();
+        }
+    }
+    syncFromInputs() {
+        const v = this.value;
+        let strVal = v != null ? String(v) : '';
+        if (this.editorType === 'date') {
+            const dateFormat = this.getDateFormat();
+            const cellEditorType = this.getCellEditorType();
+            if (cellEditorType === 'native') {
+                // Native <input type="date"> requires YYYY-MM-DD
+                strVal = strVal.match(/^\d{4}-\d{2}-\d{2}/) ? strVal.substring(0, 10) : strVal;
+            }
+            else {
+                // text/calendar: format for display
+                strVal = formatDateForDisplay(strVal, dateFormat) ?? strVal;
+            }
+        }
+        this.localValue.set(strVal);
+        const col = this.column;
+        if (col?.cellEditorParams?.values) {
+            const vals = col.cellEditorParams.values;
+            this.selectOptions.set(vals);
+            const initialIdx = vals.findIndex((opt) => String(opt) === String(v));
+            this.highlightedIndex.set(Math.max(initialIdx, 0));
+        }
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            const richSelectInput = this.richSelectInput?.nativeElement;
+            if (richSelectInput) {
+                richSelectInput.focus();
+                richSelectInput.select();
+                this.positionFixedDropdown(this.richSelectWrapper, this.richSelectDropdown);
+                this.attachScrollClose(this.richSelectWrapper?.nativeElement);
+                return;
+            }
+            const selectWrap = this.selectWrapper?.nativeElement;
+            if (selectWrap) {
+                selectWrap.focus();
+                this.positionFixedDropdown(this.selectWrapper, this.selectDropdown);
+                this.attachScrollClose(selectWrap);
+                return;
+            }
+            const el = this.inputEl?.nativeElement;
+            if (el) {
+                el.focus();
+                if (el instanceof HTMLInputElement && el.type === 'text') {
+                    el.select();
+                }
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.scrollCleanup?.();
+    }
+    /** Attach scroll listeners to close the editor when the grid scrolls.
+     *  Delayed via RAF to skip spurious scroll events fired during mount
+     *  (e.g. focus-triggered scroll, layout-shift scroll from DOM changes). */
+    attachScrollClose(wrapper) {
+        if (!wrapper)
+            return;
+        const scrollParent = wrapper.closest('[data-ogrid-scroll-container]') ?? wrapper.closest('[style*="overflow"]');
+        const handleScroll = () => this.cancel.emit();
+        const raf = requestAnimationFrame(() => {
+            if (scrollParent)
+                scrollParent.addEventListener('scroll', handleScroll, { passive: true });
+            window.addEventListener('scroll', handleScroll, { passive: true });
+        });
+        this.scrollCleanup = () => {
+            cancelAnimationFrame(raf);
+            if (scrollParent)
+                scrollParent.removeEventListener('scroll', handleScroll);
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }
+    commitValue(value) {
+        this.commit.emit(value);
+    }
+    commitAndSuppressBlur(value) {
+        this.suppressNextBlur = true;
+        this.commitValue(value);
+    }
+    cancelAndSuppressBlur() {
+        this.suppressNextBlur = true;
+        this.cancel.emit();
+    }
+    shouldSkipBlur() {
+        if (!this.suppressNextBlur)
+            return false;
+        this.suppressNextBlur = false;
+        return true;
+    }
+    onTextKeyDown(e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            this.commitDateOrValue(true);
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            this.cancelAndSuppressBlur();
+        }
+        else if (e.key === 'Tab') {
+            e.preventDefault();
+            this.commitDateOrValue(true);
+        }
+    }
+    commitDateOrValue(suppressBlur = false) {
+        if (this.editorType === 'date') {
+            const cellEditorType = this.getCellEditorType();
+            if (cellEditorType !== 'native') {
+                const rawStr = String(this.localValue());
+                if (!rawStr.trim()) {
+                    if (suppressBlur)
+                        this.commitAndSuppressBlur(null);
+                    else
+                        this.commitValue(null);
+                    return;
+                }
+                const parsed = parseUserInputDate(rawStr, this.getDateFormat());
+                // Convert Date to YYYY-MM-DD format; if parsing fails, pass through raw string
+                const toCommit = parsed instanceof Date ? parsed.toISOString().substring(0, 10) : rawStr;
+                if (suppressBlur)
+                    this.commitAndSuppressBlur(toCommit);
+                else
+                    this.commitValue(toCommit);
+                return;
+            }
+        }
+        if (suppressBlur)
+            this.commitAndSuppressBlur(this.localValue());
+        else
+            this.commitValue(this.localValue());
+    }
+    getDateFormat() {
+        return this.column?.cellEditorParams?.['dateFormat'] ?? this.column?.dateFormat ?? 'YYYY-MM-DD';
+    }
+    getCellEditorType() {
+        return this.column?.cellEditorParams?.['editorType'] ?? 'text';
+    }
+    getDatePlaceholder() {
+        return getDateInputPlaceholder(this.getDateFormat());
+    }
+    getDisplayText(value) {
+        const formatValue = this.column?.cellEditorParams?.formatValue;
+        if (formatValue)
+            return formatValue(value);
+        return value != null ? String(value) : '';
+    }
+    onCustomSelectKeyDown(e) {
+        const options = this.selectOptions();
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                this.highlightedIndex.set(Math.min(this.highlightedIndex() + 1, options.length - 1));
+                this.scrollOptionIntoView(this.selectDropdown);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                this.highlightedIndex.set(Math.max(this.highlightedIndex() - 1, 0));
+                this.scrollOptionIntoView(this.selectDropdown);
+                break;
+            case 'Enter':
+                e.preventDefault();
+                e.stopPropagation();
+                if (options.length > 0 && this.highlightedIndex() < options.length) {
+                    this.commitValue(options[this.highlightedIndex()]);
+                }
+                break;
+            case 'Tab':
+                e.preventDefault();
+                if (options.length > 0 && this.highlightedIndex() < options.length) {
+                    this.commitValue(options[this.highlightedIndex()]);
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                e.stopPropagation();
+                this.cancel.emit();
+                break;
+        }
+    }
+    onRichSelectSearch(text) {
+        this.searchText.set(text);
+        this.highlightedIndex.set(0);
+    }
+    onRichSelectKeyDown(e) {
+        const options = this.filteredOptions();
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                this.highlightedIndex.set(Math.min(this.highlightedIndex() + 1, options.length - 1));
+                this.scrollOptionIntoView(this.richSelectOptions);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                this.highlightedIndex.set(Math.max(this.highlightedIndex() - 1, 0));
+                this.scrollOptionIntoView(this.richSelectOptions);
+                break;
+            case 'Enter':
+                e.preventDefault();
+                e.stopPropagation();
+                if (options.length > 0 && this.highlightedIndex() < options.length) {
+                    this.commitValue(options[this.highlightedIndex()]);
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                e.stopPropagation();
+                this.cancel.emit();
+                break;
+        }
+    }
+    onCheckboxKeyDown(e) {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            this.cancel.emit();
+        }
+    }
+    onTextBlur() {
+        if (this.shouldSkipBlur())
+            return;
+        if (this.editorType === 'date') {
+            const cellEditorType = this.getCellEditorType();
+            if (cellEditorType !== 'native') {
+                const rawStr = String(this.localValue());
+                if (!rawStr.trim()) {
+                    this.commitValue(null);
+                    return;
+                }
+                const parsed = parseUserInputDate(rawStr, this.getDateFormat());
+                const toCommit = parsed instanceof Date ? parsed.toISOString() : rawStr;
+                this.commitValue(toCommit);
+                return;
+            }
+        }
+        this.commitValue(this.localValue());
+    }
+    getInputStyle() {
+        const baseStyle = 'width:100%;min-width:0;padding:0;border:none;outline:none;font:inherit;font-size:var(--ogrid-cell-font-size, 13px);line-height:inherit;background:transparent;color:inherit;box-sizing:border-box;';
+        const col = this.column;
+        if (col.type === 'numeric') {
+            return baseStyle + 'text-align:right;';
+        }
+        return baseStyle;
+    }
+    /** Position a dropdown using fixed positioning to escape overflow clipping. */
+    positionFixedDropdown(wrapperRef, dropdownRef) {
+        const wrapper = wrapperRef?.nativeElement;
+        const dropdown = dropdownRef?.nativeElement;
+        if (!wrapper || !dropdown)
+            return;
+        const rect = wrapper.getBoundingClientRect();
+        const maxH = 200;
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const flipUp = spaceBelow < maxH && rect.top > spaceBelow;
+        dropdown.style.position = 'fixed';
+        dropdown.style.left = `${rect.left}px`;
+        dropdown.style.width = `${rect.width}px`;
+        dropdown.style.maxHeight = `${maxH}px`;
+        dropdown.style.zIndex = '9999';
+        dropdown.style.right = 'auto';
+        dropdown.style.textAlign = 'left';
+        if (flipUp) {
+            dropdown.style.top = 'auto';
+            dropdown.style.bottom = `${window.innerHeight - rect.top}px`;
+        }
+        else {
+            dropdown.style.top = `${rect.bottom}px`;
+        }
+    }
+    /** Scroll the highlighted option into view within a dropdown element. */
+    scrollOptionIntoView(dropdownRef) {
+        setTimeout(() => {
+            const dropdown = dropdownRef?.nativeElement;
+            if (!dropdown)
+                return;
+            const highlighted = dropdown.children[this.highlightedIndex()];
+            highlighted?.scrollIntoView({ block: 'nearest' });
+        });
+    }
+    static { this.ɵfac = function BaseInlineCellEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BaseInlineCellEditorComponent)(); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: BaseInlineCellEditorComponent, viewQuery: function BaseInlineCellEditorComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5)(_c1, 5)(_c2, 5)(_c3, 5)(_c4, 5)(_c5, 5)(_c6, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputEl = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selectWrapper = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selectDropdown = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.richSelectWrapper = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.richSelectInput = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.richSelectDropdown = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.richSelectOptions = _t.first);
+        } }, inputs: { value: "value", item: "item", column: "column", rowIndex: "rowIndex", editorType: "editorType" }, outputs: { commit: "commit", cancel: "cancel" }, features: [i0.ɵɵNgOnChangesFeature] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseInlineCellEditorComponent, [{
+        type: Directive
+    }], null, { value: [{
+            type: Input,
+            args: [{ required: true }]
+        }], item: [{
+            type: Input,
+            args: [{ required: true }]
+        }], column: [{
+            type: Input,
+            args: [{ required: true }]
+        }], rowIndex: [{
+            type: Input,
+            args: [{ required: true }]
+        }], editorType: [{
+            type: Input,
+            args: [{ required: true }]
+        }], commit: [{
+            type: Output
+        }], cancel: [{
+            type: Output
+        }], inputEl: [{
+            type: ViewChild,
+            args: ['inputEl']
+        }], selectWrapper: [{
+            type: ViewChild,
+            args: ['selectWrapper']
+        }], selectDropdown: [{
+            type: ViewChild,
+            args: ['selectDropdown']
+        }], richSelectWrapper: [{
+            type: ViewChild,
+            args: ['richSelectWrapper']
+        }], richSelectInput: [{
+            type: ViewChild,
+            args: ['richSelectInput']
+        }], richSelectDropdown: [{
+            type: ViewChild,
+            args: ['richSelectDropdown']
+        }], richSelectOptions: [{
+            type: ViewChild,
+            args: ['richSelectOptions']
+        }] }); })();

package/dist/esm/components/base-ogrid.component.js

@@ -0,0 +1,36 @@
+/**
+ * Base class for OGrid top-level components (Material, Radix).
+ * Contains all shared TypeScript logic. Subclasses provide a @Component
+ * decorator with their own selector, template, and imports.
+ */
+import { Directive, Input, signal, effect, inject } from '@angular/core';
+import { OGridService } from '../services/ogrid.service';
+import * as i0 from "@angular/core";
+export class BaseOGridComponent {
+    set props(value) {
+        this.propsSignal.set(value);
+    }
+    constructor() {
+        this.propsSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "propsSignal" }] : []));
+        this.ogridService = inject(OGridService);
+        effect(() => {
+            const p = this.propsSignal();
+            if (p)
+                this.ogridService.configure(p);
+        });
+    }
+    get showToolbar() {
+        return this.ogridService.columnChooserPlacement() === 'toolbar' || this.ogridService.toolbar() != null || this.ogridService.fullScreen();
+    }
+    onPageSizeChange(size) {
+        this.ogridService.pagination().setPageSize(size);
+    }
+    static { this.ɵfac = function BaseOGridComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BaseOGridComponent)(); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: BaseOGridComponent, inputs: { props: "props" } }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseOGridComponent, [{
+        type: Directive
+    }], () => [], { props: [{
+            type: Input,
+            args: [{ required: true }]
+        }] }); })();

package/dist/esm/components/base-pagination-controls.component.js

@@ -0,0 +1,68 @@
+import { Directive, signal, computed, Input, Output, EventEmitter } from '@angular/core';
+import { getPaginationViewModel } from '@alaarab/ogrid-core';
+import * as i0 from "@angular/core";
+/**
+ * Abstract base class containing all shared TypeScript logic for PaginationControls components.
+ * Framework-specific UI packages extend this with their templates and style overrides.
+ *
+ * Subclasses must:
+ * 1. Provide a @Component decorator with template and styles
+ *
+ * Uses @Input setter + signal pattern so computed() can track dependencies.
+ * (Plain @Input properties are NOT tracked by computed()  -  only signals are.)
+ */
+export class BasePaginationControlsComponent {
+    constructor() {
+        this._currentPage = signal(1, ...(ngDevMode ? [{ debugName: "_currentPage" }] : []));
+        this._pageSize = signal(25, ...(ngDevMode ? [{ debugName: "_pageSize" }] : []));
+        this._totalCount = signal(0, ...(ngDevMode ? [{ debugName: "_totalCount" }] : []));
+        this._pageSizeOptions = signal(undefined, ...(ngDevMode ? [{ debugName: "_pageSizeOptions" }] : []));
+        this._entityLabelPlural = signal('items', ...(ngDevMode ? [{ debugName: "_entityLabelPlural" }] : []));
+        this.pageChange = new EventEmitter();
+        this.pageSizeChange = new EventEmitter();
+        this.labelPlural = computed(() => this._entityLabelPlural() ?? 'items', ...(ngDevMode ? [{ debugName: "labelPlural" }] : []));
+        this.vm = computed(() => {
+            const opts = this._pageSizeOptions();
+            return getPaginationViewModel(this._currentPage(), this._pageSize(), this._totalCount(), opts ? { pageSizeOptions: opts } : undefined);
+        }, ...(ngDevMode ? [{ debugName: "vm" }] : []));
+    }
+    set currentPage(v) { this._currentPage.set(v); }
+    get currentPage() { return this._currentPage(); }
+    set pageSize(v) { this._pageSize.set(v); }
+    get pageSize() { return this._pageSize(); }
+    set totalCount(v) { this._totalCount.set(v); }
+    get totalCount() { return this._totalCount(); }
+    set pageSizeOptions(v) { this._pageSizeOptions.set(v); }
+    get pageSizeOptions() { return this._pageSizeOptions(); }
+    set entityLabelPlural(v) { this._entityLabelPlural.set(v); }
+    get entityLabelPlural() { return this._entityLabelPlural(); }
+    onPageSizeSelect(event) {
+        const value = Number(event.target.value);
+        this.pageSizeChange.emit(value);
+    }
+    onPageSizeChange(value) {
+        this.pageSizeChange.emit(Number(value));
+    }
+    static { this.ɵfac = function BasePaginationControlsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BasePaginationControlsComponent)(); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: BasePaginationControlsComponent, inputs: { currentPage: "currentPage", pageSize: "pageSize", totalCount: "totalCount", pageSizeOptions: "pageSizeOptions", entityLabelPlural: "entityLabelPlural" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" } }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BasePaginationControlsComponent, [{
+        type: Directive
+    }], null, { currentPage: [{
+            type: Input,
+            args: [{ required: true }]
+        }], pageSize: [{
+            type: Input,
+            args: [{ required: true }]
+        }], totalCount: [{
+            type: Input,
+            args: [{ required: true }]
+        }], pageSizeOptions: [{
+            type: Input
+        }], entityLabelPlural: [{
+            type: Input
+        }], pageChange: [{
+            type: Output
+        }], pageSizeChange: [{
+            type: Output
+        }] }); })();

package/dist/esm/components/base-popover-cell-editor.component.js

@@ -0,0 +1,122 @@
+import { Directive, Input, ViewChild, Injector, EnvironmentInjector, inject, signal, effect, createComponent } from '@angular/core';
+import * as i0 from "@angular/core";
+const _c0 = ["anchorEl"];
+const _c1 = ["editorContainer"];
+/**
+ * Shared popover cell editor template used by all Angular UI packages.
+ */
+export const POPOVER_CELL_EDITOR_TEMPLATE = `
+    <div #anchorEl
+      class="ogrid-popover-anchor"
+      [attr.data-row-index]="rowIndex"
+      [attr.data-col-index]="globalColIndex"
+    >
+      {{ displayValue }}
+    </div>
+    @if (showEditor()) {
+      <div class="ogrid-popover-editor-overlay" (click)="handleOverlayClick()">
+        <div class="ogrid-popover-editor-content" #editorContainer></div>
+      </div>
+    }
+`;
+/**
+ * Shared overlay + content styles for popover cell editors.
+ * Subclasses provide their own .ogrid-popover-anchor styles.
+ */
+export const POPOVER_CELL_EDITOR_OVERLAY_STYLES = `
+    :host { display: contents; }
+    .ogrid-popover-editor-overlay {
+      position: fixed; inset: 0; z-index: 1000;
+      background: rgba(0,0,0,0.3);
+      display: flex; align-items: center; justify-content: center;
+    }
+    .ogrid-popover-editor-content {
+      background: var(--ogrid-bg, #ffffff); border-radius: 4px; padding: 16px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      max-width: 90vw; max-height: 90vh; overflow: auto;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+`;
+/**
+ * Abstract base class for Angular popover cell editors.
+ * Contains all shared inputs, ViewChild refs, effects, and overlay click handling.
+ *
+ * Subclasses only need a @Component decorator with selector, template, and
+ * framework-specific .ogrid-popover-anchor CSS styles.
+ */
+export class BasePopoverCellEditorComponent {
+    constructor() {
+        this.injector = inject(Injector);
+        this.envInjector = inject(EnvironmentInjector);
+        this.showEditor = signal(false, ...(ngDevMode ? [{ debugName: "showEditor" }] : []));
+        // Show editor after anchor is rendered
+        effect(() => {
+            const anchor = this.anchorRef;
+            if (anchor) {
+                setTimeout(() => this.showEditor.set(true), 0);
+            }
+        });
+        // Render custom editor component when container is available.
+        // Angular's effect() ignores return values  -  use onCleanup() for cleanup.
+        effect((onCleanup) => {
+            const container = this.editorContainerRef;
+            const props = this.editorProps;
+            const col = this.column;
+            if (!container || !this.showEditor() || typeof col.cellEditor !== 'function')
+                return;
+            const EditorComponent = col.cellEditor;
+            const componentRef = createComponent(EditorComponent, {
+                environmentInjector: this.envInjector,
+                elementInjector: this.injector,
+            });
+            // Pass props to component instance
+            Object.assign(componentRef.instance, props);
+            componentRef.changeDetectorRef.detectChanges();
+            // Append to DOM
+            container.nativeElement.appendChild(componentRef.location.nativeElement);
+            // Cleanup when effect re-runs or component is destroyed
+            onCleanup(() => componentRef.destroy());
+        });
+    }
+    handleOverlayClick() {
+        this.onCancel();
+    }
+    static { this.ɵfac = function BasePopoverCellEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BasePopoverCellEditorComponent)(); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: BasePopoverCellEditorComponent, viewQuery: function BasePopoverCellEditorComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5)(_c1, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.anchorRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.editorContainerRef = _t.first);
+        } }, inputs: { item: "item", column: "column", rowIndex: "rowIndex", globalColIndex: "globalColIndex", displayValue: "displayValue", editorProps: "editorProps", onCancel: "onCancel" } }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BasePopoverCellEditorComponent, [{
+        type: Directive
+    }], () => [], { item: [{
+            type: Input,
+            args: [{ required: true }]
+        }], column: [{
+            type: Input,
+            args: [{ required: true }]
+        }], rowIndex: [{
+            type: Input,
+            args: [{ required: true }]
+        }], globalColIndex: [{
+            type: Input,
+            args: [{ required: true }]
+        }], displayValue: [{
+            type: Input,
+            args: [{ required: true }]
+        }], editorProps: [{
+            type: Input,
+            args: [{ required: true }]
+        }], onCancel: [{
+            type: Input,
+            args: [{ required: true }]
+        }], anchorRef: [{
+            type: ViewChild,
+            args: ['anchorEl']
+        }], editorContainerRef: [{
+            type: ViewChild,
+            args: ['editorContainer']
+        }] }); })();

package/dist/esm/components/empty-state.component.js

@@ -0,0 +1,68 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from "@angular/core";
+function EmptyStateComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.render);
+} }
+function EmptyStateComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.message, " ");
+} }
+function EmptyStateComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵtext(0, " No items match your current filters. Try adjusting your search or ");
+    i0.ɵɵelementStart(1, "button", 1);
+    i0.ɵɵlistener("click", function EmptyStateComponent_Conditional_2_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.clearAll.emit()); });
+    i0.ɵɵtext(2, " clear all filters ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(3, " to see all items. ");
+} }
+function EmptyStateComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " There are no items available at this time. ");
+} }
+export class EmptyStateComponent {
+    constructor() {
+        this.message = undefined;
+        this.hasActiveFilters = false;
+        this.render = undefined;
+        this.clearAll = new EventEmitter();
+    }
+    static { this.ɵfac = function EmptyStateComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EmptyStateComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EmptyStateComponent, selectors: [["ogrid-empty-state"]], inputs: { message: "message", hasActiveFilters: "hasActiveFilters", render: "render" }, outputs: { clearAll: "clearAll" }, decls: 4, vars: 1, consts: [[3, "ngTemplateOutlet"], ["type", "button", 1, "ogrid-empty-state-clear-btn", 3, "click"]], template: function EmptyStateComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, EmptyStateComponent_Conditional_0_Template, 1, 1, "ng-container", 0)(1, EmptyStateComponent_Conditional_1_Template, 1, 1)(2, EmptyStateComponent_Conditional_2_Template, 4, 0)(3, EmptyStateComponent_Conditional_3_Template, 1, 0);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.render ? 0 : ctx.message ? 1 : ctx.hasActiveFilters ? 2 : 3);
+        } }, dependencies: [NgTemplateOutlet], styles: [".ogrid-empty-state-clear-btn[_ngcontent-%COMP%] {\n      background: none; border: none; color: inherit;\n      text-decoration: underline; cursor: pointer; padding: 0; font: inherit;\n    }"], changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EmptyStateComponent, [{
+        type: Component,
+        args: [{ selector: 'ogrid-empty-state', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: `
+    @if (render) {
+      <ng-container [ngTemplateOutlet]="render"></ng-container>
+    } @else if (message) {
+      {{ message }}
+    } @else if (hasActiveFilters) {
+      No items match your current filters. Try adjusting your search or
+      <button type="button" (click)="clearAll.emit()" class="ogrid-empty-state-clear-btn">
+        clear all filters
+      </button>
+      to see all items.
+    } @else {
+      There are no items available at this time.
+    }
+  `, styles: ["\n    .ogrid-empty-state-clear-btn {\n      background: none; border: none; color: inherit;\n      text-decoration: underline; cursor: pointer; padding: 0; font: inherit;\n    }\n  "] }]
+    }], null, { message: [{
+            type: Input
+        }], hasActiveFilters: [{
+            type: Input
+        }], render: [{
+            type: Input
+        }], clearAll: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EmptyStateComponent, { className: "EmptyStateComponent", filePath: "components/empty-state.component.ts", lineNumber: 31 }); })();