@alaarab/ogrid-angular-material 2.6.0 → 2.6.1

package/dist/esm/column-chooser/column-chooser.component.js

@@ -0,0 +1,133 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { BaseColumnChooserComponent } from '@alaarab/ogrid-angular';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.columnId;
+function ColumnChooserComponent_Conditional_5_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "label", 7)(1, "input", 11);
+    i0.ɵɵdomListener("change", function ColumnChooserComponent_Conditional_5_For_5_Template_input_change_1_listener($event) { const col_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onCheckboxChange(col_r4.columnId, $event)); });
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const col_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("checked", ctx_r1.visibleColumns.has(col_r4.columnId));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(col_r4.name);
+} }
+function ColumnChooserComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 4);
+    i0.ɵɵdomListener("click", function ColumnChooserComponent_Conditional_5_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("keydown.escape", function ColumnChooserComponent_Conditional_5_Template_div_keydown_escape_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEscape($event)); });
+    i0.ɵɵdomElementStart(1, "div", 5);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "div", 6);
+    i0.ɵɵrepeaterCreate(4, ColumnChooserComponent_Conditional_5_For_5_Template, 4, 2, "label", 7, _forTrack0);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(6, "div", 8)(7, "button", 9);
+    i0.ɵɵdomListener("click", function ColumnChooserComponent_Conditional_5_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onClearAll()); });
+    i0.ɵɵtext(8, "Clear All");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(9, "button", 10);
+    i0.ɵɵdomListener("click", function ColumnChooserComponent_Conditional_5_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectAll()); });
+    i0.ɵɵtext(10, "Select All");
+    i0.ɵɵdomElementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2(" Select Columns (", ctx_r1.visibleCount(), " of ", ctx_r1.totalCount(), ") ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.columns);
+} }
+/**
+ * Column visibility chooser dropdown using Angular Material styling.
+ * Standalone component with inline template.
+ */
+export class ColumnChooserComponent extends BaseColumnChooserComponent {
+    onEscape(event) {
+        if (!this.isOpen())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.isOpen.set(false);
+    }
+    onDocumentClick(event) {
+        const el = event.target;
+        if (!el.closest('ogrid-column-chooser')) {
+            this.isOpen.set(false);
+        }
+    }
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵColumnChooserComponent_BaseFactory; return function ColumnChooserComponent_Factory(__ngFactoryType__) { return (ɵColumnChooserComponent_BaseFactory || (ɵColumnChooserComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ColumnChooserComponent)))(__ngFactoryType__ || ColumnChooserComponent); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ColumnChooserComponent, selectors: [["ogrid-column-chooser"]], hostBindings: function ColumnChooserComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function ColumnChooserComponent_click_HostBindingHandler($event) { return ctx.onDocumentClick($event); }, i0.ɵɵresolveDocument)("keydown.escape", function ColumnChooserComponent_keydown_escape_HostBindingHandler($event) { return ctx.onEscape($event); }, i0.ɵɵresolveDocument);
+        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 5, consts: [[1, "ogrid-column-chooser"], ["aria-haspopup", "listbox", 1, "ogrid-column-chooser__trigger", 3, "click", "keydown.escape"], [1, "ogrid-column-chooser__caret"], ["tabindex", "-1", 1, "ogrid-column-chooser__dropdown"], ["tabindex", "-1", 1, "ogrid-column-chooser__dropdown", 3, "click", "keydown.escape"], [1, "ogrid-column-chooser__header"], [1, "ogrid-column-chooser__list"], [1, "ogrid-column-chooser__item"], [1, "ogrid-column-chooser__footer"], [1, "ogrid-column-chooser__btn", 3, "click"], [1, "ogrid-column-chooser__btn", "ogrid-column-chooser__btn--primary", 3, "click"], ["type", "checkbox", 3, "change", "checked"]], template: function ColumnChooserComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0)(1, "button", 1);
+            i0.ɵɵdomListener("click", function ColumnChooserComponent_Template_button_click_1_listener() { return ctx.toggle(); })("keydown.escape", function ColumnChooserComponent_Template_button_keydown_escape_1_listener($event) { return ctx.onEscape($event); });
+            i0.ɵɵtext(2);
+            i0.ɵɵdomElementStart(3, "span", 2);
+            i0.ɵɵtext(4);
+            i0.ɵɵdomElementEnd()();
+            i0.ɵɵconditionalCreate(5, ColumnChooserComponent_Conditional_5_Template, 11, 2, "div", 3);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵattribute("aria-expanded", ctx.isOpen());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate2(" \u25A6 Column Visibility (", ctx.visibleCount(), " of ", ctx.totalCount(), ") ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.isOpen() ? "\u25B2" : "\u25BC");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isOpen() ? 5 : -1);
+        } }, styles: ["[_nghost-%COMP%] { display: inline-flex; position: relative; }\n    .ogrid-column-chooser[_ngcontent-%COMP%] { position: relative; }\n    .ogrid-column-chooser__trigger[_ngcontent-%COMP%] {\n      display: inline-flex; align-items: center; gap: 6px;\n      padding: 6px 12px; border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.23)); border-radius: 4px;\n      background: transparent; cursor: pointer; font-size: 14px; font-weight: 600;\n      text-transform: none; white-space: nowrap;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-column-chooser__trigger[_ngcontent-%COMP%]:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-column-chooser__caret[_ngcontent-%COMP%] { font-size: 10px; }\n    .ogrid-column-chooser__dropdown[_ngcontent-%COMP%] {\n      position: absolute; top: 100%; right: 0; z-index: 1000;\n      min-width: 220px; margin-top: 4px;\n      background: var(--ogrid-bg, #ffffff); border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    }\n    .ogrid-column-chooser__header[_ngcontent-%COMP%] {\n      padding: 8px 12px; font-size: 14px; font-weight: 600;\n      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-column-chooser__list[_ngcontent-%COMP%] {\n      max-height: 320px; overflow-y: auto; padding: 4px 0;\n    }\n    .ogrid-column-chooser__item[_ngcontent-%COMP%] {\n      display: flex; align-items: center; gap: 8px;\n      padding: 4px 12px; min-height: 32px; cursor: pointer; font-size: 14px;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-column-chooser__item[_ngcontent-%COMP%]:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-column-chooser__footer[_ngcontent-%COMP%] {\n      display: flex; justify-content: flex-end; gap: 8px;\n      padding: 8px 12px; border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n    }\n    .ogrid-column-chooser__btn[_ngcontent-%COMP%] {\n      padding: 4px 12px; border: none; border-radius: 4px;\n      background: transparent; cursor: pointer; font-size: 13px; text-transform: none;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-column-chooser__btn[_ngcontent-%COMP%]:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-column-chooser__btn--primary[_ngcontent-%COMP%] {\n      background: var(--mat-sys-primary, #1976d2); color: #fff;\n    }\n    .ogrid-column-chooser__btn--primary[_ngcontent-%COMP%]:hover {\n      opacity: 0.9;\n    }"], changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ColumnChooserComponent, [{
+        type: Component,
+        args: [{ selector: 'ogrid-column-chooser', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ogrid-column-chooser">
+      <button
+        class="ogrid-column-chooser__trigger"
+        (click)="toggle()"
+        (keydown.escape)="onEscape($event)"
+        [attr.aria-expanded]="isOpen()"
+        aria-haspopup="listbox"
+      >
+        &#9638; Column Visibility ({{ visibleCount() }} of {{ totalCount() }})
+        <span class="ogrid-column-chooser__caret">{{ isOpen() ? '&#9650;' : '&#9660;' }}</span>
+      </button>
+
+      @if (isOpen()) {
+        <div class="ogrid-column-chooser__dropdown" (click)="$event.stopPropagation()" (keydown.escape)="onEscape($event)" tabindex="-1">
+          <div class="ogrid-column-chooser__header">
+            Select Columns ({{ visibleCount() }} of {{ totalCount() }})
+          </div>
+
+          <div class="ogrid-column-chooser__list">
+            @for (col of columns; track col.columnId) {
+              <label class="ogrid-column-chooser__item">
+                <input
+                  type="checkbox"
+                  [checked]="visibleColumns.has(col.columnId)"
+                  (change)="onCheckboxChange(col.columnId, $event)"
+                />
+                <span>{{ col.name }}</span>
+              </label>
+            }
+          </div>
+
+          <div class="ogrid-column-chooser__footer">
+            <button class="ogrid-column-chooser__btn" (click)="onClearAll()">Clear All</button>
+            <button class="ogrid-column-chooser__btn ogrid-column-chooser__btn--primary" (click)="selectAll()">Select All</button>
+          </div>
+        </div>
+      }
+    </div>
+  `, host: {
+                    '(document:click)': 'onDocumentClick($event)',
+                    '(document:keydown.escape)': 'onEscape($event)',
+                }, styles: ["\n    :host { display: inline-flex; position: relative; }\n    .ogrid-column-chooser { position: relative; }\n    .ogrid-column-chooser__trigger {\n      display: inline-flex; align-items: center; gap: 6px;\n      padding: 6px 12px; border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.23)); border-radius: 4px;\n      background: transparent; cursor: pointer; font-size: 14px; font-weight: 600;\n      text-transform: none; white-space: nowrap;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-column-chooser__trigger:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-column-chooser__caret { font-size: 10px; }\n    .ogrid-column-chooser__dropdown {\n      position: absolute; top: 100%; right: 0; z-index: 1000;\n      min-width: 220px; margin-top: 4px;\n      background: var(--ogrid-bg, #ffffff); border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    }\n    .ogrid-column-chooser__header {\n      padding: 8px 12px; font-size: 14px; font-weight: 600;\n      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-column-chooser__list {\n      max-height: 320px; overflow-y: auto; padding: 4px 0;\n    }\n    .ogrid-column-chooser__item {\n      display: flex; align-items: center; gap: 8px;\n      padding: 4px 12px; min-height: 32px; cursor: pointer; font-size: 14px;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-column-chooser__item:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-column-chooser__footer {\n      display: flex; justify-content: flex-end; gap: 8px;\n      padding: 8px 12px; border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));\n    }\n    .ogrid-column-chooser__btn {\n      padding: 4px 12px; border: none; border-radius: 4px;\n      background: transparent; cursor: pointer; font-size: 13px; text-transform: none;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-column-chooser__btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-column-chooser__btn--primary {\n      background: var(--mat-sys-primary, #1976d2); color: #fff;\n    }\n    .ogrid-column-chooser__btn--primary:hover {\n      opacity: 0.9;\n    }\n  "] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ColumnChooserComponent, { className: "ColumnChooserComponent", filePath: "column-chooser/column-chooser.component.ts", lineNumber: 108 }); })();