import { Component, ViewChild } from '@angular/core';
import { CollectionView } from '@mescius/wijmo';
import { WjGridModule } from '@mescius/wijmo.angular2.grid';
import { WjGridFilterModule } from '@mescius/wijmo.angular2.grid.filter';
import { WjGridSearchModule } from '@mescius/wijmo.angular2.grid.search';
import { FlexGridXlsxConverter } from '@mescius/wijmo.grid.xlsx';
import { recentSales } from '../data/recent-sales';
import * as i0 from "@angular/core";
import * as i1 from "@mescius/wijmo.angular2.grid";
import * as i2 from "@mescius/wijmo.angular2.grid.filter";
import * as i3 from "@mescius/wijmo.angular2.grid.search";
const _c0 = ["flex"];
export class FlexGridDemoComponent {
    zone;
    flex;
    filterColumns = ['country', 'soldBy', 'client', 'description', 'value', 'itemCount'];
    salesView = new CollectionView(recentSales.map((sale) => ({ ...sale })), {
        pageSize: 5,
        trackChanges: true
    });
    status = 'Ready';
    constructor(zone) {
        this.zone = zone;
    }
    get pageLabel() {
        return `Page ${this.salesView.pageIndex + 1} of ${this.salesView.pageCount}`;
    }
    get visibleCount() {
        return this.salesView.itemCount;
    }
    load(input) {
        const file = input.files?.[0];
        if (!file || !this.flex) {
            return;
        }
        this.setStatus(`Importing ${file.name}`);
        FlexGridXlsxConverter.loadAsync(this.flex, file, { includeColumnHeaders: true }, () => this.setStatus(`Imported ${file.name}`), (reason) => this.setStatus(`Import failed: ${String(reason)}`));
        input.value = '';
    }
    save() {
        if (!this.flex) {
            return;
        }
        this.setStatus('Exporting FlexGrid.xlsx');
        FlexGridXlsxConverter.saveAsync(this.flex, {
            includeColumnHeaders: true,
            includeStyles: false,
            sheetName: 'Recent Sales'
        }, 'FlexGrid.xlsx', () => this.setStatus('Exported FlexGrid.xlsx'), (reason) => this.setStatus(`Export failed: ${String(reason)}`));
    }
    previousPage() {
        this.salesView.moveToPreviousPage();
    }
    nextPage() {
        this.salesView.moveToNextPage();
    }
    setStatus(message) {
        this.zone.run(() => {
            this.status = message;
        });
    }
    static ɵfac = function FlexGridDemoComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FlexGridDemoComponent)(i0.ɵɵdirectiveInject(i0.NgZone)); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FlexGridDemoComponent, selectors: [["app-flexgrid-demo"]], viewQuery: function FlexGridDemoComponent_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(_c0, 5);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.flex = _t.first);
        } }, decls: 44, vars: 25, consts: [["importFile", ""], ["flex", ""], [1, "table-workspace"], [1, "workspace-header"], [1, "eyebrow"], [1, "status-panel"], ["aria-label", "Grid controls", 1, "toolbar"], [1, "search-field"], ["placeholder", "Client, country, seller", 3, "grid", "delay", "searchAllColumns"], [1, "button-group"], ["id", "importFile", "type", "file", "accept", ".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", 1, "file-input", 3, "change"], ["for", "importFile", 1, "button", "secondary"], ["type", "button", 1, "button", "primary", 3, "click"], [1, "sales-grid", 3, "itemsSource", "autoGenerateColumns", "autoRowHeights"], [3, "filterColumns", "showSortButtons"], ["header", "ID", "binding", "id", 3, "width", "isReadOnly"], ["header", "Client", "binding", "client", 3, "width", "allowSorting", "allowDragging"], ["header", "Description", "binding", "description", "width", "2*", 3, "minWidth", "wordWrap"], ["header", "Value", "binding", "value", "format", "n2", 3, "width"], ["header", "Quantity", "binding", "itemCount", "format", "n0", 3, "width"], ["header", "Sold By", "binding", "soldBy", 3, "width"], ["header", "Country", "binding", "country", 3, "width"], [1, "grid-footer"], ["aria-label", "Pagination", 1, "pager"], ["type", "button", "aria-label", "Previous page", 1, "icon-button", 3, "click", "disabled"], ["type", "button", "aria-label", "Next page", 1, "icon-button", 3, "click", "disabled"]], template: function FlexGridDemoComponent_Template(rf, ctx) { if (rf & 1) {
            const _r1 = i0.ɵɵgetCurrentView();
            i0.ɵɵelementStart(0, "section", 2)(1, "header", 3)(2, "div")(3, "p", 4);
            i0.ɵɵtext(4, "Wijmo Angular Sample");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(5, "h1");
            i0.ɵɵtext(6, "Smart Sales Data Table");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(7, "div", 5)(8, "span");
            i0.ɵɵtext(9);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(10, "span");
            i0.ɵɵtext(11);
            i0.ɵɵelementEnd()()();
            i0.ɵɵelementStart(12, "div", 6)(13, "label", 7)(14, "span");
            i0.ɵɵtext(15, "Search");
            i0.ɵɵelementEnd();
            i0.ɵɵelement(16, "wj-flex-grid-search", 8);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(17, "div", 9)(18, "input", 10, 0);
            i0.ɵɵlistener("change", function FlexGridDemoComponent_Template_input_change_18_listener() { i0.ɵɵrestoreView(_r1); const importFile_r2 = i0.ɵɵreference(19); return i0.ɵɵresetView(ctx.load(importFile_r2)); });
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(20, "label", 11);
            i0.ɵɵtext(21, "Import");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(22, "button", 12);
            i0.ɵɵlistener("click", function FlexGridDemoComponent_Template_button_click_22_listener() { return ctx.save(); });
            i0.ɵɵtext(23, "Export");
            i0.ɵɵelementEnd()()();
            i0.ɵɵelementStart(24, "wj-flex-grid", 13, 1);
            i0.ɵɵelement(26, "wj-flex-grid-filter", 14)(27, "wj-flex-grid-column", 15)(28, "wj-flex-grid-column", 16)(29, "wj-flex-grid-column", 17)(30, "wj-flex-grid-column", 18)(31, "wj-flex-grid-column", 19)(32, "wj-flex-grid-column", 20)(33, "wj-flex-grid-column", 21);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(34, "footer", 22)(35, "div", 23)(36, "button", 24);
            i0.ɵɵlistener("click", function FlexGridDemoComponent_Template_button_click_36_listener() { return ctx.previousPage(); });
            i0.ɵɵtext(37, "\u2039");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(38, "span");
            i0.ɵɵtext(39);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(40, "button", 25);
            i0.ɵɵlistener("click", function FlexGridDemoComponent_Template_button_click_40_listener() { return ctx.nextPage(); });
            i0.ɵɵtext(41, "\u203A");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(42, "p");
            i0.ɵɵtext(43);
            i0.ɵɵelementEnd()()();
        } if (rf & 2) {
            const flex_r3 = i0.ɵɵreference(25);
            i0.ɵɵadvance(9);
            i0.ɵɵtextInterpolate1("", ctx.visibleCount, " rows");
            i0.ɵɵadvance(2);
            i0.ɵɵtextInterpolate(ctx.pageLabel);
            i0.ɵɵadvance(5);
            i0.ɵɵproperty("grid", flex_r3)("delay", 250)("searchAllColumns", true);
            i0.ɵɵadvance(8);
            i0.ɵɵproperty("itemsSource", ctx.salesView)("autoGenerateColumns", false)("autoRowHeights", true);
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("filterColumns", ctx.filterColumns)("showSortButtons", true);
            i0.ɵɵadvance();
            i0.ɵɵproperty("width", 64)("isReadOnly", true);
            i0.ɵɵadvance();
            i0.ɵɵproperty("width", 180)("allowSorting", false)("allowDragging", false);
            i0.ɵɵadvance();
            i0.ɵɵproperty("minWidth", 260)("wordWrap", true);
            i0.ɵɵadvance();
            i0.ɵɵproperty("width", 120);
            i0.ɵɵadvance();
            i0.ɵɵproperty("width", 104);
            i0.ɵɵadvance();
            i0.ɵɵproperty("width", 112);
            i0.ɵɵadvance();
            i0.ɵɵproperty("width", 112);
            i0.ɵɵadvance(3);
            i0.ɵɵproperty("disabled", ctx.salesView.pageIndex === 0);
            i0.ɵɵadvance(3);
            i0.ɵɵtextInterpolate(ctx.pageLabel);
            i0.ɵɵadvance();
            i0.ɵɵproperty("disabled", ctx.salesView.pageIndex >= ctx.salesView.pageCount - 1);
            i0.ɵɵadvance(3);
            i0.ɵɵtextInterpolate(ctx.status);
        } }, dependencies: [WjGridModule, i1.WjFlexGrid, i1.WjFlexGridColumn, WjGridFilterModule, i2.WjFlexGridFilter, WjGridSearchModule, i3.WjFlexGridSearch], styles: ["[_nghost-%COMP%] {\n  display: block;\n}\n\n.table-workspace[_ngcontent-%COMP%] {\n  min-height: 100vh;\n  padding: 32px;\n  background: #f6f7f9;\n  color: #1f2933;\n}\n\n.workspace-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: end;\n  justify-content: space-between;\n  gap: 24px;\n  margin: 0 auto 20px;\n  max-width: 1180px;\n}\n\n.eyebrow[_ngcontent-%COMP%] {\n  margin: 0 0 6px;\n  color: #586777;\n  font-size: 0.78rem;\n  font-weight: 700;\n  letter-spacing: 0;\n  text-transform: uppercase;\n}\n\nh1[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 2rem;\n  font-weight: 700;\n  letter-spacing: 0;\n}\n\n.status-panel[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  color: #344054;\n  font-size: 0.92rem;\n}\n\n.status-panel[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  padding: 7px 10px;\n  border: 1px solid #d0d7de;\n  border-radius: 6px;\n  background: #ffffff;\n}\n\n.toolbar[_ngcontent-%COMP%], \n.grid-footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  max-width: 1180px;\n  margin: 0 auto;\n  padding: 12px 14px;\n  border: 1px solid #d6dde5;\n  background: #ffffff;\n}\n\n.toolbar[_ngcontent-%COMP%] {\n  border-radius: 8px 8px 0 0;\n  border-bottom: 0;\n}\n\n.search-field[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 300px;\n  color: #344054;\n  font-size: 0.9rem;\n  font-weight: 700;\n}\n\n.search-field[_ngcontent-%COMP%]   wj-flex-grid-search[_ngcontent-%COMP%] {\n  min-width: 260px;\n}\n\n.button-group[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.file-input[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n}\n\n.button[_ngcontent-%COMP%], \nbutton[_ngcontent-%COMP%] {\n  border: 1px solid #b8c4d0;\n  border-radius: 6px;\n  padding: 8px 12px;\n  font: inherit;\n  font-weight: 700;\n  line-height: 1;\n  cursor: pointer;\n}\n\n.button.primary[_ngcontent-%COMP%] {\n  border-color: #1f6feb;\n  background: #1f6feb;\n  color: #ffffff;\n}\n\n.button.secondary[_ngcontent-%COMP%], \n.icon-button[_ngcontent-%COMP%] {\n  background: #ffffff;\n  color: #1f2933;\n}\n\n.button[_ngcontent-%COMP%]:hover, \nbutton[_ngcontent-%COMP%]:hover:not(:disabled) {\n  filter: brightness(0.97);\n}\n\nbutton[_ngcontent-%COMP%]:disabled {\n  cursor: not-allowed;\n  opacity: 0.42;\n}\n\n.sales-grid[_ngcontent-%COMP%] {\n  display: block;\n  max-width: 1180px;\n  height: 430px;\n  margin: 0 auto;\n  border-color: #d6dde5;\n  background: #ffffff;\n}\n\n.sales-grid[_ngcontent-%COMP%]   .wj-header[_ngcontent-%COMP%] {\n  background: #eef2f6;\n  color: #24313d;\n  font-weight: 700;\n}\n\n.grid-footer[_ngcontent-%COMP%] {\n  border-radius: 0 0 8px 8px;\n  border-top: 0;\n  color: #52616f;\n  font-size: 0.9rem;\n}\n\n.grid-footer[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n}\n\n.pager[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.icon-button[_ngcontent-%COMP%] {\n  display: inline-grid;\n  place-items: center;\n  width: 34px;\n  height: 34px;\n  padding: 0;\n  font-size: 1.35rem;\n}\n\n@media (max-width: 760px) {\n  .table-workspace[_ngcontent-%COMP%] {\n    padding: 18px;\n  }\n\n  .workspace-header[_ngcontent-%COMP%], \n   .toolbar[_ngcontent-%COMP%], \n   .grid-footer[_ngcontent-%COMP%] {\n    align-items: stretch;\n    flex-direction: column;\n  }\n\n  .status-panel[_ngcontent-%COMP%], \n   .button-group[_ngcontent-%COMP%], \n   .search-field[_ngcontent-%COMP%] {\n    width: 100%;\n  }\n\n  .search-field[_ngcontent-%COMP%] {\n    align-items: stretch;\n    flex-direction: column;\n    min-width: 0;\n  }\n\n  .search-field[_ngcontent-%COMP%]   wj-flex-grid-search[_ngcontent-%COMP%] {\n    min-width: 0;\n  }\n}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FlexGridDemoComponent, [{
        type: Component,
        args: [{ selector: 'app-flexgrid-demo', standalone: true, imports: [WjGridModule, WjGridFilterModule, WjGridSearchModule], template: "<section class=\"table-workspace\">\n  <header class=\"workspace-header\">\n    <div>\n      <p class=\"eyebrow\">Wijmo Angular Sample</p>\n      <h1>Smart Sales Data Table</h1>\n    </div>\n    <div class=\"status-panel\">\n      <span>{{ visibleCount }} rows</span>\n      <span>{{ pageLabel }}</span>\n    </div>\n  </header>\n\n  <div class=\"toolbar\" aria-label=\"Grid controls\">\n    <label class=\"search-field\">\n      <span>Search</span>\n      <wj-flex-grid-search\n        [grid]=\"flex\"\n        [delay]=\"250\"\n        placeholder=\"Client, country, seller\"\n        [searchAllColumns]=\"true\">\n      </wj-flex-grid-search>\n    </label>\n\n    <div class=\"button-group\">\n      <input\n        #importFile\n        id=\"importFile\"\n        class=\"file-input\"\n        type=\"file\"\n        accept=\".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\"\n        (change)=\"load(importFile)\" />\n      <label class=\"button secondary\" for=\"importFile\">Import</label>\n      <button class=\"button primary\" type=\"button\" (click)=\"save()\">Export</button>\n    </div>\n  </div>\n\n  <wj-flex-grid\n    #flex\n    class=\"sales-grid\"\n    [itemsSource]=\"salesView\"\n    [autoGenerateColumns]=\"false\"\n    [autoRowHeights]=\"true\">\n    <wj-flex-grid-filter\n      [filterColumns]=\"filterColumns\"\n      [showSortButtons]=\"true\">\n    </wj-flex-grid-filter>\n\n    <wj-flex-grid-column header=\"ID\" binding=\"id\" [width]=\"64\" [isReadOnly]=\"true\"></wj-flex-grid-column>\n    <wj-flex-grid-column header=\"Client\" binding=\"client\" [width]=\"180\" [allowSorting]=\"false\" [allowDragging]=\"false\"></wj-flex-grid-column>\n    <wj-flex-grid-column header=\"Description\" binding=\"description\" width=\"2*\" [minWidth]=\"260\" [wordWrap]=\"true\"></wj-flex-grid-column>\n    <wj-flex-grid-column header=\"Value\" binding=\"value\" format=\"n2\" [width]=\"120\"></wj-flex-grid-column>\n    <wj-flex-grid-column header=\"Quantity\" binding=\"itemCount\" format=\"n0\" [width]=\"104\"></wj-flex-grid-column>\n    <wj-flex-grid-column header=\"Sold By\" binding=\"soldBy\" [width]=\"112\"></wj-flex-grid-column>\n    <wj-flex-grid-column header=\"Country\" binding=\"country\" [width]=\"112\"></wj-flex-grid-column>\n  </wj-flex-grid>\n\n  <footer class=\"grid-footer\">\n    <div class=\"pager\" aria-label=\"Pagination\">\n      <button class=\"icon-button\" type=\"button\" (click)=\"previousPage()\" [disabled]=\"salesView.pageIndex === 0\" aria-label=\"Previous page\">&lsaquo;</button>\n      <span>{{ pageLabel }}</span>\n      <button class=\"icon-button\" type=\"button\" (click)=\"nextPage()\" [disabled]=\"salesView.pageIndex >= salesView.pageCount - 1\" aria-label=\"Next page\">&rsaquo;</button>\n    </div>\n    <p>{{ status }}</p>\n  </footer>\n</section>\n", styles: [":host {\n  display: block;\n}\n\n.table-workspace {\n  min-height: 100vh;\n  padding: 32px;\n  background: #f6f7f9;\n  color: #1f2933;\n}\n\n.workspace-header {\n  display: flex;\n  align-items: end;\n  justify-content: space-between;\n  gap: 24px;\n  margin: 0 auto 20px;\n  max-width: 1180px;\n}\n\n.eyebrow {\n  margin: 0 0 6px;\n  color: #586777;\n  font-size: 0.78rem;\n  font-weight: 700;\n  letter-spacing: 0;\n  text-transform: uppercase;\n}\n\nh1 {\n  margin: 0;\n  font-size: 2rem;\n  font-weight: 700;\n  letter-spacing: 0;\n}\n\n.status-panel {\n  display: flex;\n  gap: 10px;\n  color: #344054;\n  font-size: 0.92rem;\n}\n\n.status-panel span {\n  padding: 7px 10px;\n  border: 1px solid #d0d7de;\n  border-radius: 6px;\n  background: #ffffff;\n}\n\n.toolbar,\n.grid-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  max-width: 1180px;\n  margin: 0 auto;\n  padding: 12px 14px;\n  border: 1px solid #d6dde5;\n  background: #ffffff;\n}\n\n.toolbar {\n  border-radius: 8px 8px 0 0;\n  border-bottom: 0;\n}\n\n.search-field {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 300px;\n  color: #344054;\n  font-size: 0.9rem;\n  font-weight: 700;\n}\n\n.search-field wj-flex-grid-search {\n  min-width: 260px;\n}\n\n.button-group {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.file-input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n}\n\n.button,\nbutton {\n  border: 1px solid #b8c4d0;\n  border-radius: 6px;\n  padding: 8px 12px;\n  font: inherit;\n  font-weight: 700;\n  line-height: 1;\n  cursor: pointer;\n}\n\n.button.primary {\n  border-color: #1f6feb;\n  background: #1f6feb;\n  color: #ffffff;\n}\n\n.button.secondary,\n.icon-button {\n  background: #ffffff;\n  color: #1f2933;\n}\n\n.button:hover,\nbutton:hover:not(:disabled) {\n  filter: brightness(0.97);\n}\n\nbutton:disabled {\n  cursor: not-allowed;\n  opacity: 0.42;\n}\n\n.sales-grid {\n  display: block;\n  max-width: 1180px;\n  height: 430px;\n  margin: 0 auto;\n  border-color: #d6dde5;\n  background: #ffffff;\n}\n\n.sales-grid .wj-header {\n  background: #eef2f6;\n  color: #24313d;\n  font-weight: 700;\n}\n\n.grid-footer {\n  border-radius: 0 0 8px 8px;\n  border-top: 0;\n  color: #52616f;\n  font-size: 0.9rem;\n}\n\n.grid-footer p {\n  margin: 0;\n}\n\n.pager {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.icon-button {\n  display: inline-grid;\n  place-items: center;\n  width: 34px;\n  height: 34px;\n  padding: 0;\n  font-size: 1.35rem;\n}\n\n@media (max-width: 760px) {\n  .table-workspace {\n    padding: 18px;\n  }\n\n  .workspace-header,\n  .toolbar,\n  .grid-footer {\n    align-items: stretch;\n    flex-direction: column;\n  }\n\n  .status-panel,\n  .button-group,\n  .search-field {\n    width: 100%;\n  }\n\n  .search-field {\n    align-items: stretch;\n    flex-direction: column;\n    min-width: 0;\n  }\n\n  .search-field wj-flex-grid-search {\n    min-width: 0;\n  }\n}\n"] }]
    }], () => [{ type: i0.NgZone }], { flex: [{
            type: ViewChild,
            args: ['flex']
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlexGridDemoComponent, { className: "FlexGridDemoComponent", filePath: "src/app/flexgrid-demo/flexgrid-demo.ts", lineNumber: 16 }); })();
