@alaarab/ogrid-angular 2.6.0 → 2.6.1

package/dist/esm/components/sidebar.component.js

@@ -0,0 +1,431 @@
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from "@angular/core";
+const _c0 = () => [];
+const _forTrack0 = ($index, $item) => $item.columnId;
+function SideBarComponent_Conditional_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function SideBarComponent_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function SideBarComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SideBarComponent_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 3)(1, SideBarComponent_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 3);
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const tabStripTpl_r1 = i0.ɵɵreference(4);
+    const panelContentTpl_r2 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", tabStripTpl_r1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", panelContentTpl_r2);
+} }
+function SideBarComponent_Conditional_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function SideBarComponent_Conditional_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function SideBarComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SideBarComponent_Conditional_2_ng_container_0_Template, 1, 0, "ng-container", 3)(1, SideBarComponent_Conditional_2_ng_container_1_Template, 1, 0, "ng-container", 3);
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const tabStripTpl_r1 = i0.ɵɵreference(4);
+    const panelContentTpl_r2 = i0.ɵɵreference(6);
+    i0.ɵɵproperty("ngTemplateOutlet", panelContentTpl_r2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", tabStripTpl_r1);
+} }
+function SideBarComponent_ng_template_3_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 6);
+    i0.ɵɵlistener("click", function SideBarComponent_ng_template_3_For_2_Template_button_click_0_listener() { const panel_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r4 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r4.onTabClick(panel_r4)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const panel_r4 = ctx.$implicit;
+    const ctx_r4 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("ogrid-sidebar-tab--active", (ctx_r4.sideBarProps == null ? null : ctx_r4.sideBarProps.activePanel) === panel_r4);
+    i0.ɵɵproperty("title", ctx_r4.panelLabels[panel_r4]);
+    i0.ɵɵattribute("aria-selected", (ctx_r4.sideBarProps == null ? null : ctx_r4.sideBarProps.activePanel) === panel_r4)("aria-label", ctx_r4.panelLabels[panel_r4]);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", panel_r4 === "columns" ? "\u2261" : "\u2A65", " ");
+} }
+function SideBarComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵrepeaterCreate(1, SideBarComponent_ng_template_3_For_2_Template, 2, 6, "button", 5, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("ogrid-sidebar-tab-strip--left", (ctx_r4.sideBarProps == null ? null : ctx_r4.sideBarProps.position) === "left")("ogrid-sidebar-tab-strip--right", (ctx_r4.sideBarProps == null ? null : ctx_r4.sideBarProps.position) === "right");
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater((ctx_r4.sideBarProps == null ? null : ctx_r4.sideBarProps.panels) ?? i0.ɵɵpureFunction0(4, _c0));
+} }
+function SideBarComponent_ng_template_5_Conditional_0_Conditional_7_For_6_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 15)(1, "input", 16);
+    i0.ɵɵlistener("change", function SideBarComponent_ng_template_5_Conditional_0_Conditional_7_For_6_Template_input_change_1_listener($event) { const col_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r4 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r4.onVisibilityChange(col_r9.columnId, $event.target.checked)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const col_r9 = ctx.$implicit;
+    const ctx_r4 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r4.sideBarProps == null ? null : ctx_r4.sideBarProps.visibleColumns == null ? null : ctx_r4.sideBarProps.visibleColumns.has(col_r9.columnId))("disabled", col_r9.required);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(col_r9.name);
+} }
+function SideBarComponent_ng_template_5_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12)(1, "button", 13);
+    i0.ɵɵlistener("click", function SideBarComponent_ng_template_5_Conditional_0_Conditional_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r4 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r4.onSelectAll()); });
+    i0.ɵɵtext(2, "Select All");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 14);
+    i0.ɵɵlistener("click", function SideBarComponent_ng_template_5_Conditional_0_Conditional_7_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r7); const ctx_r4 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r4.onClearAll()); });
+    i0.ɵɵtext(4, "Clear All");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵrepeaterCreate(5, SideBarComponent_ng_template_5_Conditional_0_Conditional_7_For_6_Template, 4, 3, "label", 15, _forTrack0);
+} if (rf & 2) {
+    const ctx_r4 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r4.allVisible());
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater((ctx_r4.sideBarProps == null ? null : ctx_r4.sideBarProps.columns) ?? i0.ɵɵpureFunction0(1, _c0));
+} }
+function SideBarComponent_ng_template_5_Conditional_0_Conditional_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵtext(1, "No filterable columns");
+    i0.ɵɵelementEnd();
+} }
+function SideBarComponent_ng_template_5_Conditional_0_Conditional_8_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 23);
+    i0.ɵɵlistener("input", function SideBarComponent_ng_template_5_Conditional_0_Conditional_8_For_2_Conditional_3_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r10); const col_r11 = i0.ɵɵnextContext().$implicit; const ctx_r4 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r4.onTextFilterChange(col_r11.filterField, $event.target.value)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r11 = i0.ɵɵnextContext().$implicit;
+    const ctx_r4 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("value", ctx_r4.getTextFilterValue(col_r11.filterField))("placeholder", "Filter " + col_r11.name + "...");
+    i0.ɵɵattribute("aria-label", "Filter " + col_r11.name);
+} }
+function SideBarComponent_ng_template_5_Conditional_0_Conditional_8_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 21)(1, "label", 24);
+    i0.ɵɵtext(2, " From: ");
+    i0.ɵɵelementStart(3, "input", 25);
+    i0.ɵɵlistener("change", function SideBarComponent_ng_template_5_Conditional_0_Conditional_8_For_2_Conditional_4_Template_input_change_3_listener($event) { i0.ɵɵrestoreView(_r12); const col_r11 = i0.ɵɵnextContext().$implicit; const ctx_r4 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r4.onDateFromChange(col_r11.filterField, $event.target.value)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "label", 24);
+    i0.ɵɵtext(5, " To: ");
+    i0.ɵɵelementStart(6, "input", 25);
+    i0.ɵɵlistener("change", function SideBarComponent_ng_template_5_Conditional_0_Conditional_8_For_2_Conditional_4_Template_input_change_6_listener($event) { i0.ɵɵrestoreView(_r12); const col_r11 = i0.ɵɵnextContext().$implicit; const ctx_r4 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r4.onDateToChange(col_r11.filterField, $event.target.value)); });
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const col_r11 = i0.ɵɵnextContext().$implicit;
+    const ctx_r4 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", ctx_r4.getDateFrom(col_r11.filterField));
+    i0.ɵɵattribute("aria-label", col_r11.name + " from date");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", ctx_r4.getDateTo(col_r11.filterField));
+    i0.ɵɵattribute("aria-label", col_r11.name + " to date");
+} }
+function SideBarComponent_ng_template_5_Conditional_0_Conditional_8_For_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 26)(1, "input", 27);
+    i0.ɵɵlistener("change", function SideBarComponent_ng_template_5_Conditional_0_Conditional_8_For_2_Conditional_5_For_2_Template_input_change_1_listener($event) { const opt_r14 = i0.ɵɵrestoreView(_r13).$implicit; const col_r11 = i0.ɵɵnextContext(2).$implicit; const ctx_r4 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r4.onMultiSelectChange(col_r11.filterField, opt_r14, $event.target.checked)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const opt_r14 = ctx.$implicit;
+    const col_r11 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r4 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r4.isMultiSelectChecked(col_r11.filterField, opt_r14));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(opt_r14);
+} }
+function SideBarComponent_ng_template_5_Conditional_0_Conditional_8_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵrepeaterCreate(1, SideBarComponent_ng_template_5_Conditional_0_Conditional_8_For_2_Conditional_5_For_2_Template, 4, 2, "label", 26, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r11 = i0.ɵɵnextContext().$implicit;
+    const ctx_r4 = i0.ɵɵnextContext(4);
+    i0.ɵɵattribute("aria-label", col_r11.name + " options");
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r4.getFilterOptions(col_r11.filterField));
+} }
+function SideBarComponent_ng_template_5_Conditional_0_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18)(1, "div", 19);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, SideBarComponent_ng_template_5_Conditional_0_Conditional_8_For_2_Conditional_3_Template, 1, 3, "input", 20);
+    i0.ɵɵconditionalCreate(4, SideBarComponent_ng_template_5_Conditional_0_Conditional_8_For_2_Conditional_4_Template, 7, 4, "div", 21);
+    i0.ɵɵconditionalCreate(5, SideBarComponent_ng_template_5_Conditional_0_Conditional_8_For_2_Conditional_5_Template, 3, 1, "div", 22);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const col_r11 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(col_r11.name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(col_r11.filterType === "text" ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(col_r11.filterType === "date" ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(col_r11.filterType === "multiSelect" ? 5 : -1);
+} }
+function SideBarComponent_ng_template_5_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SideBarComponent_ng_template_5_Conditional_0_Conditional_8_Conditional_0_Template, 2, 0, "div", 17);
+    i0.ɵɵrepeaterCreate(1, SideBarComponent_ng_template_5_Conditional_0_Conditional_8_For_2_Template, 6, 4, "div", 18, _forTrack0);
+} if (rf & 2) {
+    const ctx_r4 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional(((ctx_r4.sideBarProps == null ? null : ctx_r4.sideBarProps.filterableColumns) ?? i0.ɵɵpureFunction0(1, _c0)).length === 0 ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater((ctx_r4.sideBarProps == null ? null : ctx_r4.sideBarProps.filterableColumns) ?? i0.ɵɵpureFunction0(2, _c0));
+} }
+function SideBarComponent_ng_template_5_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 8)(1, "div", 9)(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 10);
+    i0.ɵɵlistener("click", function SideBarComponent_ng_template_5_Conditional_0_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r6); const ctx_r4 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r4.sideBarProps == null ? null : ctx_r4.sideBarProps.onPanelChange(null)); });
+    i0.ɵɵtext(5, "\u00D7");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 11);
+    i0.ɵɵconditionalCreate(7, SideBarComponent_ng_template_5_Conditional_0_Conditional_7_Template, 7, 2);
+    i0.ɵɵconditionalCreate(8, SideBarComponent_ng_template_5_Conditional_0_Conditional_8_Template, 3, 3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r4 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("ogrid-sidebar-panel--left", (ctx_r4.sideBarProps == null ? null : ctx_r4.sideBarProps.position) === "left")("ogrid-sidebar-panel--right", (ctx_r4.sideBarProps == null ? null : ctx_r4.sideBarProps.position) === "right");
+    i0.ɵɵattribute("aria-label", ctx_r4.panelLabels[ctx_r4.sideBarProps.activePanel]);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r4.panelLabels[ctx_r4.sideBarProps.activePanel]);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional((ctx_r4.sideBarProps == null ? null : ctx_r4.sideBarProps.activePanel) === "columns" ? 7 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r4.sideBarProps == null ? null : ctx_r4.sideBarProps.activePanel) === "filters" ? 8 : -1);
+} }
+function SideBarComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SideBarComponent_ng_template_5_Conditional_0_Template, 9, 8, "div", 7);
+} if (rf & 2) {
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵconditional((ctx_r4.sideBarProps == null ? null : ctx_r4.sideBarProps.activePanel) ? 0 : -1);
+} }
+const PANEL_LABELS = { columns: 'Columns', filters: 'Filters' };
+export class SideBarComponent {
+    constructor() {
+        this.sideBarProps = null;
+        this.panelLabels = PANEL_LABELS;
+    }
+    onTabClick(panel) {
+        const props = this.sideBarProps;
+        if (props)
+            props.onPanelChange(props.activePanel === panel ? null : panel);
+    }
+    allVisible() {
+        const props = this.sideBarProps;
+        if (!props)
+            return false;
+        return props.columns.every((c) => props.visibleColumns.has(c.columnId));
+    }
+    onSelectAll() {
+        const props = this.sideBarProps;
+        if (!props)
+            return;
+        const next = new Set(props.visibleColumns);
+        props.columns.forEach((c) => next.add(c.columnId));
+        props.onSetVisibleColumns(next);
+    }
+    onClearAll() {
+        const props = this.sideBarProps;
+        if (!props)
+            return;
+        const next = new Set();
+        props.columns.forEach((c) => {
+            if (c.required && props.visibleColumns.has(c.columnId))
+                next.add(c.columnId);
+        });
+        props.onSetVisibleColumns(next);
+    }
+    onVisibilityChange(columnKey, visible) {
+        this.sideBarProps?.onVisibilityChange(columnKey, visible);
+    }
+    getTextFilterValue(filterField) {
+        const filters = this.sideBarProps?.filters;
+        const fv = filters?.[filterField];
+        return fv?.type === 'text' ? fv.value : '';
+    }
+    onTextFilterChange(filterField, value) {
+        this.sideBarProps?.onFilterChange(filterField, value ? { type: 'text', value } : undefined);
+    }
+    getDateFrom(filterField) {
+        const fv = this.sideBarProps?.filters?.[filterField];
+        return fv?.type === 'date' ? (fv.value.from ?? '') : '';
+    }
+    getDateTo(filterField) {
+        const fv = this.sideBarProps?.filters?.[filterField];
+        return fv?.type === 'date' ? (fv.value.to ?? '') : '';
+    }
+    onDateFromChange(filterField, value) {
+        const fv = this.sideBarProps?.filters?.[filterField];
+        const existing = fv?.type === 'date' ? fv.value : {};
+        const from = value || undefined;
+        const to = existing.to;
+        this.sideBarProps?.onFilterChange(filterField, from || to ? { type: 'date', value: { from, to } } : undefined);
+    }
+    onDateToChange(filterField, value) {
+        const fv = this.sideBarProps?.filters?.[filterField];
+        const existing = fv?.type === 'date' ? fv.value : {};
+        const to = value || undefined;
+        const from = existing.from;
+        this.sideBarProps?.onFilterChange(filterField, from || to ? { type: 'date', value: { from, to } } : undefined);
+    }
+    getFilterOptions(filterField) {
+        return this.sideBarProps?.filterOptions?.[filterField] ?? [];
+    }
+    isMultiSelectChecked(filterField, opt) {
+        const fv = this.sideBarProps?.filters?.[filterField];
+        return fv?.type === 'multiSelect' ? fv.value.includes(opt) : false;
+    }
+    onMultiSelectChange(filterField, opt, checked) {
+        const fv = this.sideBarProps?.filters?.[filterField];
+        const current = fv?.type === 'multiSelect' ? fv.value : [];
+        const next = checked ? [...current, opt] : current.filter((v) => v !== opt);
+        this.sideBarProps?.onFilterChange(filterField, next.length > 0 ? { type: 'multiSelect', value: next } : undefined);
+    }
+    static { this.ɵfac = function SideBarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SideBarComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideBarComponent, selectors: [["ogrid-sidebar"]], inputs: { sideBarProps: "sideBarProps" }, decls: 7, vars: 2, consts: [["tabStripTpl", ""], ["panelContentTpl", ""], ["role", "complementary", "aria-label", "Side bar", 1, "ogrid-sidebar-root"], [4, "ngTemplateOutlet"], ["role", "tablist", "aria-label", "Side bar tabs", 1, "ogrid-sidebar-tab-strip"], ["role", "tab", 1, "ogrid-sidebar-tab", 3, "ogrid-sidebar-tab--active", "title"], ["role", "tab", 1, "ogrid-sidebar-tab", 3, "click", "title"], ["role", "tabpanel", 1, "ogrid-sidebar-panel", 3, "ogrid-sidebar-panel--left", "ogrid-sidebar-panel--right"], ["role", "tabpanel", 1, "ogrid-sidebar-panel"], [1, "ogrid-sidebar-panel-header"], ["aria-label", "Close panel", 1, "ogrid-sidebar-panel-close", 3, "click"], [1, "ogrid-sidebar-panel-body"], [1, "ogrid-sidebar-actions"], [1, "ogrid-sidebar-action-btn", 3, "click", "disabled"], [1, "ogrid-sidebar-action-btn", 3, "click"], [1, "ogrid-sidebar-col-label"], ["type", "checkbox", 3, "change", "checked", "disabled"], [1, "ogrid-sidebar-empty"], [1, "ogrid-sidebar-filter-group"], [1, "ogrid-sidebar-filter-label"], ["type", "text", 1, "ogrid-sidebar-text-input", 3, "value", "placeholder"], [1, "ogrid-sidebar-date-row"], ["role", "group", 1, "ogrid-sidebar-multiselect-list"], ["type", "text", 1, "ogrid-sidebar-text-input", 3, "input", "value", "placeholder"], [1, "ogrid-sidebar-date-label"], ["type", "date", 1, "ogrid-sidebar-date-input", 3, "change", "value"], [1, "ogrid-sidebar-multiselect-item"], ["type", "checkbox", 3, "change", "checked"]], template: function SideBarComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 2);
+            i0.ɵɵconditionalCreate(1, SideBarComponent_Conditional_1_Template, 2, 2);
+            i0.ɵɵconditionalCreate(2, SideBarComponent_Conditional_2_Template, 2, 2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(3, SideBarComponent_ng_template_3_Template, 3, 5, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(5, SideBarComponent_ng_template_5_Template, 1, 1, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional((ctx.sideBarProps == null ? null : ctx.sideBarProps.position) === "left" ? 1 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional((ctx.sideBarProps == null ? null : ctx.sideBarProps.position) === "right" ? 2 : -1);
+        } }, dependencies: [NgTemplateOutlet], styles: [".ogrid-sidebar-root[_ngcontent-%COMP%] { display: flex; flex-direction: row; flex-shrink: 0; }\n    .ogrid-sidebar-tab-strip[_ngcontent-%COMP%] {\n      display: flex; flex-direction: column;\n      width: var(--ogrid-sidebar-tab-size, 36px);\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n    }\n    .ogrid-sidebar-tab-strip--left[_ngcontent-%COMP%] { border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }\n    .ogrid-sidebar-tab-strip--right[_ngcontent-%COMP%] { border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }\n    .ogrid-sidebar-tab[_ngcontent-%COMP%] {\n      width: var(--ogrid-sidebar-tab-size, 36px);\n      height: var(--ogrid-sidebar-tab-size, 36px);\n      border: none; cursor: pointer;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)); font-size: 14px;\n      display: flex; align-items: center; justify-content: center;\n      background: transparent; font-weight: normal;\n    }\n    .ogrid-sidebar-tab--active[_ngcontent-%COMP%] { background: var(--ogrid-bg, #ffffff); font-weight: bold; }\n    .ogrid-sidebar-panel[_ngcontent-%COMP%] {\n      width: var(--ogrid-sidebar-panel-width, 240px);\n      display: flex; flex-direction: column; overflow: hidden;\n      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-sidebar-panel--left[_ngcontent-%COMP%] { border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }\n    .ogrid-sidebar-panel--right[_ngcontent-%COMP%] { border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }\n    .ogrid-sidebar-panel-header[_ngcontent-%COMP%] {\n      display: flex; justify-content: space-between; align-items: center;\n      padding: 8px 12px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); font-weight: 600;\n    }\n    .ogrid-sidebar-panel-close[_ngcontent-%COMP%] {\n      border: none; background: transparent; cursor: pointer;\n      font-size: 16px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-sidebar-panel-body[_ngcontent-%COMP%] { flex: 1; overflow-y: auto; padding: 8px 12px; }\n    .ogrid-sidebar-actions[_ngcontent-%COMP%] { display: flex; gap: 8px; margin-bottom: 8px; }\n    .ogrid-sidebar-action-btn[_ngcontent-%COMP%] {\n      flex: 1; cursor: pointer;\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px; padding: 4px 8px;\n    }\n    .ogrid-sidebar-col-label[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 6px; padding: 2px 0; cursor: pointer; }\n    .ogrid-sidebar-empty[_ngcontent-%COMP%] { color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5)); font-style: italic; }\n    .ogrid-sidebar-filter-group[_ngcontent-%COMP%] { margin-bottom: 12px; }\n    .ogrid-sidebar-filter-label[_ngcontent-%COMP%] { font-weight: 500; margin-bottom: 4px; font-size: 13px; }\n    .ogrid-sidebar-text-input[_ngcontent-%COMP%] {\n      width: 100%; box-sizing: border-box; padding: 4px 6px;\n      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px;\n    }\n    .ogrid-sidebar-date-row[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 4px; }\n    .ogrid-sidebar-date-label[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 4px; font-size: 12px; }\n    .ogrid-sidebar-date-input[_ngcontent-%COMP%] {\n      flex: 1; padding: 2px 4px;\n      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px;\n    }\n    .ogrid-sidebar-multiselect-list[_ngcontent-%COMP%] { max-height: 120px; overflow-y: auto; }\n    .ogrid-sidebar-multiselect-item[_ngcontent-%COMP%] {\n      display: flex; align-items: center; gap: 4px;\n      padding: 1px 0; cursor: pointer; font-size: 13px;\n    }"], changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideBarComponent, [{
+        type: Component,
+        args: [{ selector: 'ogrid-sidebar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: `
+    <div class="ogrid-sidebar-root" role="complementary" aria-label="Side bar">
+      @if (sideBarProps?.position === 'left') {
+        <ng-container *ngTemplateOutlet="tabStripTpl"></ng-container>
+        <ng-container *ngTemplateOutlet="panelContentTpl"></ng-container>
+      }
+      @if (sideBarProps?.position === 'right') {
+        <ng-container *ngTemplateOutlet="panelContentTpl"></ng-container>
+        <ng-container *ngTemplateOutlet="tabStripTpl"></ng-container>
+      }
+    </div>
+
+    <ng-template #tabStripTpl>
+      <div
+        class="ogrid-sidebar-tab-strip"
+        [class.ogrid-sidebar-tab-strip--left]="sideBarProps?.position === 'left'"
+        [class.ogrid-sidebar-tab-strip--right]="sideBarProps?.position === 'right'"
+        role="tablist"
+        aria-label="Side bar tabs"
+      >
+        @for (panel of sideBarProps?.panels ?? []; track panel) {
+          <button
+            role="tab"
+            class="ogrid-sidebar-tab"
+            [class.ogrid-sidebar-tab--active]="sideBarProps?.activePanel === panel"
+            [attr.aria-selected]="sideBarProps?.activePanel === panel"
+            [attr.aria-label]="panelLabels[panel]"
+            (click)="onTabClick(panel)"
+            [title]="panelLabels[panel]"
+          >
+            {{ panel === 'columns' ? '\u2261' : '\u2A65' }}
+          </button>
+        }
+      </div>
+    </ng-template>
+
+    <ng-template #panelContentTpl>
+      @if (sideBarProps?.activePanel) {
+        <div
+          role="tabpanel"
+          class="ogrid-sidebar-panel"
+          [class.ogrid-sidebar-panel--left]="sideBarProps?.position === 'left'"
+          [class.ogrid-sidebar-panel--right]="sideBarProps?.position === 'right'"
+          [attr.aria-label]="panelLabels[sideBarProps!.activePanel!]"
+        >
+          <div class="ogrid-sidebar-panel-header">
+            <span>{{ panelLabels[sideBarProps!.activePanel!] }}</span>
+            <button (click)="sideBarProps?.onPanelChange(null)" class="ogrid-sidebar-panel-close" aria-label="Close panel">&times;</button>
+          </div>
+          <div class="ogrid-sidebar-panel-body">
+            @if (sideBarProps?.activePanel === 'columns') {
+              <div class="ogrid-sidebar-actions">
+                <button (click)="onSelectAll()" [disabled]="allVisible()" class="ogrid-sidebar-action-btn">Select All</button>
+                <button (click)="onClearAll()" class="ogrid-sidebar-action-btn">Clear All</button>
+              </div>
+              @for (col of sideBarProps?.columns ?? []; track col.columnId) {
+                <label class="ogrid-sidebar-col-label">
+                  <input type="checkbox" [checked]="sideBarProps?.visibleColumns?.has(col.columnId)" (change)="onVisibilityChange(col.columnId, $any($event.target).checked)" [disabled]="col.required" />
+                  <span>{{ col.name }}</span>
+                </label>
+              }
+            }
+            @if (sideBarProps?.activePanel === 'filters') {
+              @if ((sideBarProps?.filterableColumns ?? []).length === 0) {
+                <div class="ogrid-sidebar-empty">No filterable columns</div>
+              }
+              @for (col of sideBarProps?.filterableColumns ?? []; track col.columnId) {
+                <div class="ogrid-sidebar-filter-group">
+                  <div class="ogrid-sidebar-filter-label">{{ col.name }}</div>
+                  @if (col.filterType === 'text') {
+                    <input
+                      type="text"
+                      class="ogrid-sidebar-text-input"
+                      [value]="getTextFilterValue(col.filterField)"
+                      (input)="onTextFilterChange(col.filterField, $any($event.target).value)"
+                      [placeholder]="'Filter ' + col.name + '...'"
+                      [attr.aria-label]="'Filter ' + col.name"
+                    />
+                  }
+                  @if (col.filterType === 'date') {
+                    <div class="ogrid-sidebar-date-row">
+                      <label class="ogrid-sidebar-date-label">
+                        From:
+                        <input type="date" class="ogrid-sidebar-date-input" [value]="getDateFrom(col.filterField)" (change)="onDateFromChange(col.filterField, $any($event.target).value)" [attr.aria-label]="col.name + ' from date'" />
+                      </label>
+                      <label class="ogrid-sidebar-date-label">
+                        To:
+                        <input type="date" class="ogrid-sidebar-date-input" [value]="getDateTo(col.filterField)" (change)="onDateToChange(col.filterField, $any($event.target).value)" [attr.aria-label]="col.name + ' to date'" />
+                      </label>
+                    </div>
+                  }
+                  @if (col.filterType === 'multiSelect') {
+                    <div class="ogrid-sidebar-multiselect-list" role="group" [attr.aria-label]="col.name + ' options'">
+                      @for (opt of getFilterOptions(col.filterField); track opt) {
+                        <label class="ogrid-sidebar-multiselect-item">
+                          <input type="checkbox" [checked]="isMultiSelectChecked(col.filterField, opt)" (change)="onMultiSelectChange(col.filterField, opt, $any($event.target).checked)" />
+                          <span>{{ opt }}</span>
+                        </label>
+                      }
+                    </div>
+                  }
+                </div>
+              }
+            }
+          </div>
+        </div>
+      }
+    </ng-template>
+  `, styles: ["\n    .ogrid-sidebar-root { display: flex; flex-direction: row; flex-shrink: 0; }\n    .ogrid-sidebar-tab-strip {\n      display: flex; flex-direction: column;\n      width: var(--ogrid-sidebar-tab-size, 36px);\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n    }\n    .ogrid-sidebar-tab-strip--left { border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }\n    .ogrid-sidebar-tab-strip--right { border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }\n    .ogrid-sidebar-tab {\n      width: var(--ogrid-sidebar-tab-size, 36px);\n      height: var(--ogrid-sidebar-tab-size, 36px);\n      border: none; cursor: pointer;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)); font-size: 14px;\n      display: flex; align-items: center; justify-content: center;\n      background: transparent; font-weight: normal;\n    }\n    .ogrid-sidebar-tab--active { background: var(--ogrid-bg, #ffffff); font-weight: bold; }\n    .ogrid-sidebar-panel {\n      width: var(--ogrid-sidebar-panel-width, 240px);\n      display: flex; flex-direction: column; overflow: hidden;\n      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-sidebar-panel--left { border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }\n    .ogrid-sidebar-panel--right { border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }\n    .ogrid-sidebar-panel-header {\n      display: flex; justify-content: space-between; align-items: center;\n      padding: 8px 12px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); font-weight: 600;\n    }\n    .ogrid-sidebar-panel-close {\n      border: none; background: transparent; cursor: pointer;\n      font-size: 16px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-sidebar-panel-body { flex: 1; overflow-y: auto; padding: 8px 12px; }\n    .ogrid-sidebar-actions { display: flex; gap: 8px; margin-bottom: 8px; }\n    .ogrid-sidebar-action-btn {\n      flex: 1; cursor: pointer;\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px; padding: 4px 8px;\n    }\n    .ogrid-sidebar-col-label { display: flex; align-items: center; gap: 6px; padding: 2px 0; cursor: pointer; }\n    .ogrid-sidebar-empty { color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5)); font-style: italic; }\n    .ogrid-sidebar-filter-group { margin-bottom: 12px; }\n    .ogrid-sidebar-filter-label { font-weight: 500; margin-bottom: 4px; font-size: 13px; }\n    .ogrid-sidebar-text-input {\n      width: 100%; box-sizing: border-box; padding: 4px 6px;\n      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px;\n    }\n    .ogrid-sidebar-date-row { display: flex; flex-direction: column; gap: 4px; }\n    .ogrid-sidebar-date-label { display: flex; align-items: center; gap: 4px; font-size: 12px; }\n    .ogrid-sidebar-date-input {\n      flex: 1; padding: 2px 4px;\n      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px;\n    }\n    .ogrid-sidebar-multiselect-list { max-height: 120px; overflow-y: auto; }\n    .ogrid-sidebar-multiselect-item {\n      display: flex; align-items: center; gap: 4px;\n      padding: 1px 0; cursor: pointer; font-size: 13px;\n    }\n  "] }]
+    }], null, { sideBarProps: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SideBarComponent, { className: "SideBarComponent", filePath: "components/sidebar.component.ts", lineNumber: 208 }); })();

package/dist/esm/components/status-bar.component.js

@@ -0,0 +1,92 @@
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import { getStatusBarParts } from '@alaarab/ogrid-core';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.key;
+function StatusBarComponent_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span")(1, "span");
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const part_r1 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap((ctx_r1.classNames == null ? null : ctx_r1.classNames.statusBarItem) ?? "");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap((ctx_r1.classNames == null ? null : ctx_r1.classNames.statusBarLabel) ?? "");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(part_r1.label);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap((ctx_r1.classNames == null ? null : ctx_r1.classNames.statusBarValue) ?? "");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(part_r1.value.toLocaleString());
+} }
+export class StatusBarComponent {
+    constructor() {
+        this.filteredCount = undefined;
+        this.selectedCount = undefined;
+        this.selectedCellCount = undefined;
+        this.aggregation = undefined;
+        this.suppressRowCount = undefined;
+        this.classNames = undefined;
+        this.cachedParts = [];
+    }
+    ngOnChanges() {
+        this.cachedParts = getStatusBarParts({
+            totalCount: this.totalCount,
+            filteredCount: this.filteredCount,
+            selectedCount: this.selectedCount,
+            selectedCellCount: this.selectedCellCount,
+            aggregation: this.aggregation ?? undefined,
+            suppressRowCount: this.suppressRowCount,
+        });
+    }
+    getParts() {
+        return this.cachedParts;
+    }
+    static { this.ɵfac = function StatusBarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || StatusBarComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: StatusBarComponent, selectors: [["ogrid-status-bar"]], inputs: { totalCount: "totalCount", filteredCount: "filteredCount", selectedCount: "selectedCount", selectedCellCount: "selectedCellCount", aggregation: "aggregation", suppressRowCount: "suppressRowCount", classNames: "classNames" }, features: [i0.ɵɵNgOnChangesFeature], decls: 3, vars: 2, consts: [["role", "status", "aria-live", "polite"], [3, "class"]], template: function StatusBarComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵrepeaterCreate(1, StatusBarComponent_For_2_Template, 5, 8, "span", 1, _forTrack0);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassMap((ctx.classNames == null ? null : ctx.classNames.statusBar) ?? "");
+            i0.ɵɵadvance();
+            i0.ɵɵrepeater(ctx.getParts());
+        } }, encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StatusBarComponent, [{
+        type: Component,
+        args: [{
+                selector: 'ogrid-status-bar',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    <div [class]="classNames?.statusBar ?? ''" role="status" aria-live="polite">
+      @for (part of getParts(); track part.key) {
+        <span [class]="classNames?.statusBarItem ?? ''">
+          <span [class]="classNames?.statusBarLabel ?? ''">{{ part.label }}</span>
+          <span [class]="classNames?.statusBarValue ?? ''">{{ part.value.toLocaleString() }}</span>
+        </span>
+      }
+    </div>
+  `,
+            }]
+    }], null, { totalCount: [{
+            type: Input,
+            args: [{ required: true }]
+        }], filteredCount: [{
+            type: Input
+        }], selectedCount: [{
+            type: Input
+        }], selectedCellCount: [{
+            type: Input
+        }], aggregation: [{
+            type: Input
+        }], suppressRowCount: [{
+            type: Input
+        }], classNames: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StatusBarComponent, { className: "StatusBarComponent", filePath: "components/status-bar.component.ts", lineNumber: 19 }); })();