text: import { ɵɵgetCurrentView, ɵɵelementStart, ɵɵlistener, ɵɵrestoreView, ɵɵreference, ɵɵnextContext, ɵɵelement, ɵɵelementEnd, ɵɵtext, ɵɵadvance, ɵɵproperty, ɵɵattribute, ɵɵtextInterpolate1, ɵɵtemplate, ɵɵpureFunction1, ɵɵpureFunction0, ɵɵdefineComponent, ɵɵtemplateRefExtractor, ɵɵelementContainerStart, ɵɵelementContainerEnd, ɵsetClassMetadata, Component, ɵɵdirectiveInject, ChangeDetectionStrategy, ɵɵdefineNgModule, ɵɵdefineInjector, ɵɵsetNgModuleScope, NgModule } from '@angular/core';
  import { NgIf, NgForOf, CommonModule } from '@angular/common';
  import { ɵangular_packages_forms_forms_y, NgControlStatusGroup, NgForm, DefaultValueAccessor, RequiredValidator, NgControlStatus, NgModel, NumberValueAccessor, FormsModule } from '@angular/forms';
  import { MatEditLens, MatPopoverEdit, MatRowHoverContent, MatEditOpen, MatEditRevert, MatEditClose, MatPopoverEditTabOut, MatPopoverEditModule } from '@angular/material-experimental/popover-edit';
  import { MatButton, MatButtonModule } from '@angular/material/button';
  import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
  import { MatIcon, MatIconModule } from '@angular/material/icon';
  import { MatInput, MatInputModule } from '@angular/material/input';
  import { MatSelectionList, MatListOption, MatListModule } from '@angular/material/list';
  import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
  import { MatTable, MatColumnDef, MatHeaderCellDef, MatCellDef, MatHeaderRowDef, MatRowDef, MatHeaderCell, MatCell, MatHeaderRow, MatRow, MatTableModule } from '@angular/material/table';
  import { DataSource } from '@angular/cdk/collections';
  import { BehaviorSubject } from 'rxjs';
  import { CdkEditable, FormValueContainer } from '@angular/cdk-experimental/popover-edit';
  import { MatFormField } from '@angular/material/form-field';
  
  function PopoverEditCellSpanMatTableExample_ng_template_1_Template(rf, ctx) { if (rf & 1) {
      const _r15 = ɵɵgetCurrentView();
      ɵɵelementStart(0, "div");
      ɵɵelementStart(1, "form", 11, 12);
      ɵɵlistener("ngSubmit", function PopoverEditCellSpanMatTableExample_ng_template_1_Template_form_ngSubmit_1_listener() { ɵɵrestoreView(_r15); const ctx_r12 = ctx.$implicit; const _r13 = ɵɵreference(2); const ctx_r14 = ɵɵnextContext(); return ctx_r14.onSubmit(ctx_r12.person, _r13); })("matEditLensPreservedFormValueChange", function PopoverEditCellSpanMatTableExample_ng_template_1_Template_form_matEditLensPreservedFormValueChange_1_listener($event) { ɵɵrestoreView(_r15); const ctx_r12 = ctx.$implicit; const ctx_r16 = ɵɵnextContext(); return ctx_r16.preservedValues.set(ctx_r12.person, $event); });
      ɵɵelementStart(3, "div", 13);
      ɵɵelementStart(4, "mat-form-field");
      ɵɵelement(5, "input", 14);
      ɵɵelementEnd();
      ɵɵelementStart(6, "mat-form-field");
      ɵɵelement(7, "input", 15);
      ɵɵelementEnd();
      ɵɵelementStart(8, "mat-form-field");
      ɵɵelement(9, "input", 16);
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementStart(10, "div", 17);
      ɵɵelementStart(11, "button", 18);
      ɵɵtext(12, "Confirm");
      ɵɵelementEnd();
      ɵɵelementStart(13, "button", 19);
      ɵɵtext(14, "Revert");
      ɵɵelementEnd();
      ɵɵelementStart(15, "button", 20);
      ɵɵtext(16, "Close");
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
  } if (rf & 2) {
      const ctx_r12 = ctx.$implicit;
      const ctx_r1 = ɵɵnextContext();
      ɵɵadvance(1);
      ɵɵproperty("matEditLensPreservedFormValue", ctx_r1.preservedValues.get(ctx_r12.person));
      ɵɵadvance(4);
      ɵɵproperty("ngModel", ctx_r12.person.firstName);
      ɵɵattribute("cdkFocusInitial", ctx_r12.focus === "firstName" || null);
      ɵɵadvance(2);
      ɵɵproperty("ngModel", ctx_r12.person.middleName);
      ɵɵattribute("cdkFocusInitial", ctx_r12.focus === "middleName" || null);
      ɵɵadvance(2);
      ɵɵproperty("ngModel", ctx_r12.person.lastName);
      ɵɵattribute("cdkFocusInitial", ctx_r12.focus === "lastName" || null);
  } }
  function PopoverEditCellSpanMatTableExample_th_4_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "th", 21);
      ɵɵtext(1, " No. ");
      ɵɵelementEnd();
  } }
  function PopoverEditCellSpanMatTableExample_td_5_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "td", 22);
      ɵɵtext(1);
      ɵɵelementEnd();
  } if (rf & 2) {
      const person_r17 = ctx.$implicit;
      ɵɵadvance(1);
      ɵɵtextInterpolate1(" ", person_r17.id, " ");
  } }
  function PopoverEditCellSpanMatTableExample_th_7_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "th", 21);
      ɵɵtext(1, " First Name ");
      ɵɵelementEnd();
  } }
  function PopoverEditCellSpanMatTableExample_td_8_span_2_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "span");
      ɵɵelementStart(1, "button", 25);
      ɵɵelementStart(2, "mat-icon");
      ɵɵtext(3, "edit");
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
  } }
  const _c0 = function (a0) { return { person: a0, focus: "firstName" }; };
  const _c1 = function () { return { after: 2 }; };
  function PopoverEditCellSpanMatTableExample_td_8_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "td", 23);
      ɵɵtext(1);
      ɵɵtemplate(2, PopoverEditCellSpanMatTableExample_td_8_span_2_Template, 4, 0, "span", 24);
      ɵɵelementEnd();
  } if (rf & 2) {
      const person_r18 = ctx.$implicit;
      ɵɵnextContext();
      const _r0 = ɵɵreference(2);
      ɵɵproperty("matPopoverEdit", _r0)("matPopoverEditContext", ɵɵpureFunction1(4, _c0, person_r18))("matPopoverEditColspan", ɵɵpureFunction0(6, _c1));
      ɵɵadvance(1);
      ɵɵtextInterpolate1(" ", person_r18.firstName, " ");
  } }
  function PopoverEditCellSpanMatTableExample_th_10_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "th", 21);
      ɵɵtext(1, " Middle Name ");
      ɵɵelementEnd();
  } }
  function PopoverEditCellSpanMatTableExample_td_11_span_2_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "span");
      ɵɵelementStart(1, "button", 25);
      ɵɵelementStart(2, "mat-icon");
      ɵɵtext(3, "edit");
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
  } }
  const _c2 = function (a0) { return { person: a0, focus: "middleName" }; };
  const _c3 = function () { return { before: 1, after: 1 }; };
  function PopoverEditCellSpanMatTableExample_td_11_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "td", 23);
      ɵɵtext(1);
      ɵɵtemplate(2, PopoverEditCellSpanMatTableExample_td_11_span_2_Template, 4, 0, "span", 24);
      ɵɵelementEnd();
  } if (rf & 2) {
      const person_r20 = ctx.$implicit;
      ɵɵnextContext();
      const _r0 = ɵɵreference(2);
      ɵɵproperty("matPopoverEdit", _r0)("matPopoverEditContext", ɵɵpureFunction1(4, _c2, person_r20))("matPopoverEditColspan", ɵɵpureFunction0(6, _c3));
      ɵɵadvance(1);
      ɵɵtextInterpolate1(" ", person_r20.middleName, " ");
  } }
  function PopoverEditCellSpanMatTableExample_th_13_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "th", 21);
      ɵɵtext(1, " Last Name ");
      ɵɵelementEnd();
  } }
  function PopoverEditCellSpanMatTableExample_td_14_span_2_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "span");
      ɵɵelementStart(1, "button", 25);
      ɵɵelementStart(2, "mat-icon");
      ɵɵtext(3, "edit");
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
  } }
  const _c4 = function (a0) { return { person: a0, focus: "lastName" }; };
  const _c5 = function () { return { before: 2 }; };
  function PopoverEditCellSpanMatTableExample_td_14_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "td", 23);
      ɵɵtext(1);
      ɵɵtemplate(2, PopoverEditCellSpanMatTableExample_td_14_span_2_Template, 4, 0, "span", 24);
      ɵɵelementEnd();
  } if (rf & 2) {
      const person_r22 = ctx.$implicit;
      ɵɵnextContext();
      const _r0 = ɵɵreference(2);
      ɵɵproperty("matPopoverEdit", _r0)("matPopoverEditContext", ɵɵpureFunction1(4, _c4, person_r22))("matPopoverEditColspan", ɵɵpureFunction0(6, _c5));
      ɵɵadvance(1);
      ɵɵtextInterpolate1(" ", person_r22.lastName, " ");
  } }
  function PopoverEditCellSpanMatTableExample_tr_15_Template(rf, ctx) { if (rf & 1) {
      ɵɵelement(0, "tr", 26);
  } }
  function PopoverEditCellSpanMatTableExample_tr_16_Template(rf, ctx) { if (rf & 1) {
      ɵɵelement(0, "tr", 27);
  } }
  const PERSON_DATA = [
      { id: 1, firstName: 'Terra', middleName: 'Maduin', lastName: 'Branford' },
      { id: 2, firstName: 'Locke', middleName: '', lastName: 'Cole' },
      { id: 3, firstName: 'Celes', middleName: 'Gestahl', lastName: 'Chere' },
      { id: 4, firstName: 'Edgar', middleName: 'Roni', lastName: 'Figaro' },
      { id: 5, firstName: 'Sabin', middleName: 'Rene', lastName: 'Figaro' },
      { id: 6, firstName: 'Clyde', middleName: '"Shadow"', lastName: 'Arrowny' },
      { id: 7, firstName: 'Setzer', middleName: '', lastName: 'Gabbiani' },
      { id: 8, firstName: 'Cid', middleName: 'Del Norte', lastName: 'Marquez' },
      { id: 9, firstName: 'Mog', middleName: '', lastName: 'McMoogle' },
  ];
  /**
   * @title Material Popover Edit spanning multiple columns on a Material data-table
   */
  class PopoverEditCellSpanMatTableExample {
      constructor() {
          this.displayedColumns = ['id', 'firstName', 'middleName', 'lastName'];
          this.dataSource = new ExampleDataSource();
          this.preservedValues = new WeakMap();
      }
      onSubmit(person, f) {
          if (!f.valid) {
              return;
          }
          person.firstName = f.value['firstName'];
          person.middleName = f.value['middleName'];
          person.lastName = f.value['lastName'];
      }
  }
  PopoverEditCellSpanMatTableExample.ɵfac = function PopoverEditCellSpanMatTableExample_Factory(t) { return new (t || PopoverEditCellSpanMatTableExample)(); };
  PopoverEditCellSpanMatTableExample.ɵcmp = ɵɵdefineComponent({ type: PopoverEditCellSpanMatTableExample, selectors: [["popover-edit-cell-span-mat-table-example"]], decls: 17, vars: 3, consts: [["mat-table", "", "editable", "", 1, "example-table", 3, "dataSource"], ["nameEdit", ""], ["matColumnDef", "id"], ["mat-header-cell", "", 4, "matHeaderCellDef"], ["mat-cell", "", 4, "matCellDef"], ["matColumnDef", "firstName"], ["mat-cell", "", 3, "matPopoverEdit", "matPopoverEditContext", "matPopoverEditColspan", 4, "matCellDef"], ["matColumnDef", "middleName"], ["matColumnDef", "lastName"], ["mat-header-row", "", 4, "matHeaderRowDef"], ["mat-row", "", 4, "matRowDef", "matRowDefColumns"], ["matEditLens", "", 3, "matEditLensPreservedFormValue", "ngSubmit", "matEditLensPreservedFormValueChange"], ["f", "ngForm"], ["mat-edit-content", "", 1, "example-input-container"], ["matInput", "", "name", "firstName", "required", "", 3, "ngModel"], ["matInput", "", "name", "middleName", 3, "ngModel"], ["matInput", "", "name", "lastName", "required", "", 3, "ngModel"], ["mat-edit-actions", ""], ["mat-button", "", "type", "submit"], ["mat-button", "", "cdkEditRevert", ""], ["mat-button", "", "cdkEditClose", ""], ["mat-header-cell", ""], ["mat-cell", ""], ["mat-cell", "", 3, "matPopoverEdit", "matPopoverEditContext", "matPopoverEditColspan"], [4, "matRowHoverContent"], ["mat-icon-button", "", "matEditOpen", ""], ["mat-header-row", ""], ["mat-row", ""]], template: function PopoverEditCellSpanMatTableExample_Template(rf, ctx) { if (rf & 1) {
          ɵɵelementStart(0, "table", 0);
          ɵɵtemplate(1, PopoverEditCellSpanMatTableExample_ng_template_1_Template, 17, 7, "ng-template", null, 1, ɵɵtemplateRefExtractor);
          ɵɵelementContainerStart(3, 2);
          ɵɵtemplate(4, PopoverEditCellSpanMatTableExample_th_4_Template, 2, 0, "th", 3);
          ɵɵtemplate(5, PopoverEditCellSpanMatTableExample_td_5_Template, 2, 1, "td", 4);
          ɵɵelementContainerEnd();
          ɵɵelementContainerStart(6, 5);
          ɵɵtemplate(7, PopoverEditCellSpanMatTableExample_th_7_Template, 2, 0, "th", 3);
          ɵɵtemplate(8, PopoverEditCellSpanMatTableExample_td_8_Template, 3, 7, "td", 6);
          ɵɵelementContainerEnd();
          ɵɵelementContainerStart(9, 7);
          ɵɵtemplate(10, PopoverEditCellSpanMatTableExample_th_10_Template, 2, 0, "th", 3);
          ɵɵtemplate(11, PopoverEditCellSpanMatTableExample_td_11_Template, 3, 7, "td", 6);
          ɵɵelementContainerEnd();
          ɵɵelementContainerStart(12, 8);
          ɵɵtemplate(13, PopoverEditCellSpanMatTableExample_th_13_Template, 2, 0, "th", 3);
          ɵɵtemplate(14, PopoverEditCellSpanMatTableExample_td_14_Template, 3, 7, "td", 6);
          ɵɵelementContainerEnd();
          ɵɵtemplate(15, PopoverEditCellSpanMatTableExample_tr_15_Template, 1, 0, "tr", 9);
          ɵɵtemplate(16, PopoverEditCellSpanMatTableExample_tr_16_Template, 1, 0, "tr", 10);
          ɵɵelementEnd();
      } if (rf & 2) {
          ɵɵproperty("dataSource", ctx.dataSource);
          ɵɵadvance(15);
          ɵɵproperty("matHeaderRowDef", ctx.displayedColumns);
          ɵɵadvance(1);
          ɵɵproperty("matRowDefColumns", ctx.displayedColumns);
      } }, directives: [MatTable, CdkEditable, MatColumnDef, MatHeaderCellDef, MatCellDef, MatHeaderRowDef, MatRowDef, ɵangular_packages_forms_forms_y, NgControlStatusGroup, NgForm, MatEditLens, MatFormField, MatInput, DefaultValueAccessor, RequiredValidator, NgControlStatus, NgModel, MatButton, MatHeaderCell, MatCell, MatPopoverEdit, MatRowHoverContent, MatEditOpen, MatIcon, MatHeaderRow, MatRow], styles: [".example-table[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.example-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left;\n}\n\n.example-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%], .example-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  min-width: 300px;\n  width: 25%;\n}\n\n.example-input-container[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: stretch;\n}\n\n.example-input-container[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%] {\n  flex: 1;\n}"] });
  /*@__PURE__*/ (function () { ɵsetClassMetadata(PopoverEditCellSpanMatTableExample, [{
          type: Component,
          args: [{
                  selector: 'popover-edit-cell-span-mat-table-example',
                  styleUrls: ['popover-edit-cell-span-mat-table-example.css'],
                  templateUrl: 'popover-edit-cell-span-mat-table-example.html',
              }]
      }], null, null); })();
  /**
   * Data source to provide what data should be rendered in the table. Note that the data source
   * can retrieve its data in any way. In this case, the data source is provided a reference
   * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
   * the underlying data. Instead, it only needs to take the data and send the table exactly what
   * should be rendered.
   */
  class ExampleDataSource extends DataSource {
      constructor() {
          super(...arguments);
          /** Stream of data that is provided to the table. */
          this.data = new BehaviorSubject(PERSON_DATA);
      }
      /** Connect function called by the table to retrieve one stream containing the data to render. */
      connect() {
          return this.data;
      }
      disconnect() { }
  }
  
  function PopoverEditMatTableFlexExample_ng_template_1_Template(rf, ctx) { if (rf & 1) {
      const _r15 = ɵɵgetCurrentView();
      ɵɵelementStart(0, "div");
      ɵɵelementStart(1, "form", 12, 13);
      ɵɵlistener("ngSubmit", function PopoverEditMatTableFlexExample_ng_template_1_Template_form_ngSubmit_1_listener() { ɵɵrestoreView(_r15); const element_r12 = ctx.$implicit; const _r13 = ɵɵreference(2); const ctx_r14 = ɵɵnextContext(); return ctx_r14.onSubmitWeight(element_r12, _r13); })("matEditLensPreservedFormValueChange", function PopoverEditMatTableFlexExample_ng_template_1_Template_form_matEditLensPreservedFormValueChange_1_listener($event) { ɵɵrestoreView(_r15); const element_r12 = ctx.$implicit; const ctx_r16 = ɵɵnextContext(); return ctx_r16.preservedWeightValues.set(element_r12, $event); });
      ɵɵelementStart(3, "div", 14);
      ɵɵelementStart(4, "mat-form-field");
      ɵɵelement(5, "input", 15);
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r12 = ctx.$implicit;
      const ctx_r1 = ɵɵnextContext();
      ɵɵadvance(1);
      ɵɵproperty("matEditLensPreservedFormValue", ctx_r1.preservedWeightValues.get(element_r12));
      ɵɵadvance(4);
      ɵɵproperty("ngModel", element_r12.weight);
  } }
  function PopoverEditMatTableFlexExample_mat_header_cell_4_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "mat-header-cell");
      ɵɵtext(1, " No. ");
      ɵɵelementEnd();
  } }
  function PopoverEditMatTableFlexExample_mat_cell_5_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "mat-cell");
      ɵɵtext(1);
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r17 = ctx.$implicit;
      ɵɵadvance(1);
      ɵɵtextInterpolate1(" ", element_r17.position, " ");
  } }
  function PopoverEditMatTableFlexExample_mat_header_cell_7_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "mat-header-cell");
      ɵɵtext(1, " Name ");
      ɵɵelementEnd();
  } }
  function PopoverEditMatTableFlexExample_mat_cell_8_ng_template_2_Template(rf, ctx) { if (rf & 1) {
      const _r25 = ɵɵgetCurrentView();
      ɵɵelementStart(0, "div");
      ɵɵelementStart(1, "form", 12, 13);
      ɵɵlistener("ngSubmit", function PopoverEditMatTableFlexExample_mat_cell_8_ng_template_2_Template_form_ngSubmit_1_listener() { ɵɵrestoreView(_r25); const _r22 = ɵɵreference(2); const element_r18 = ɵɵnextContext().$implicit; const ctx_r23 = ɵɵnextContext(); return ctx_r23.onSubmitName(element_r18, _r22); })("matEditLensPreservedFormValueChange", function PopoverEditMatTableFlexExample_mat_cell_8_ng_template_2_Template_form_matEditLensPreservedFormValueChange_1_listener($event) { ɵɵrestoreView(_r25); const element_r18 = ɵɵnextContext().$implicit; const ctx_r26 = ɵɵnextContext(); return ctx_r26.preservedNameValues.set(element_r18, $event); });
      ɵɵelementStart(3, "h2", 19);
      ɵɵtext(4, "Name");
      ɵɵelementEnd();
      ɵɵelementStart(5, "div", 14);
      ɵɵelementStart(6, "mat-form-field");
      ɵɵelement(7, "input", 20);
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementStart(8, "div", 21);
      ɵɵelementStart(9, "button", 22);
      ɵɵtext(10, "Confirm");
      ɵɵelementEnd();
      ɵɵelementStart(11, "button", 23);
      ɵɵtext(12, "Revert");
      ɵɵelementEnd();
      ɵɵelementStart(13, "button", 24);
      ɵɵtext(14, "Close");
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r18 = ɵɵnextContext().$implicit;
      const ctx_r20 = ɵɵnextContext();
      ɵɵadvance(1);
      ɵɵproperty("matEditLensPreservedFormValue", ctx_r20.preservedNameValues.get(element_r18));
      ɵɵadvance(6);
      ɵɵproperty("ngModel", element_r18.name);
  } }
  function PopoverEditMatTableFlexExample_mat_cell_8_span_4_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "span");
      ɵɵelementStart(1, "button", 25);
      ɵɵelementStart(2, "mat-icon");
      ɵɵtext(3, "edit");
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
  } }
  function PopoverEditMatTableFlexExample_mat_cell_8_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "mat-cell", 16);
      ɵɵtext(1);
      ɵɵtemplate(2, PopoverEditMatTableFlexExample_mat_cell_8_ng_template_2_Template, 15, 2, "ng-template", null, 17, ɵɵtemplateRefExtractor);
      ɵɵtemplate(4, PopoverEditMatTableFlexExample_mat_cell_8_span_4_Template, 4, 0, "span", 18);
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r18 = ctx.$implicit;
      const _r19 = ɵɵreference(3);
      ɵɵproperty("matPopoverEdit", _r19);
      ɵɵadvance(1);
      ɵɵtextInterpolate1(" ", element_r18.name, " ");
  } }
  function PopoverEditMatTableFlexExample_mat_header_cell_10_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "mat-header-cell");
      ɵɵtext(1, " Weight ");
      ɵɵelementEnd();
  } }
  function PopoverEditMatTableFlexExample_mat_cell_11_span_2_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "span");
      ɵɵelementStart(1, "button", 25);
      ɵɵelementStart(2, "mat-icon");
      ɵɵtext(3, "edit");
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
  } }
  function PopoverEditMatTableFlexExample_mat_cell_11_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "mat-cell", 26);
      ɵɵtext(1);
      ɵɵtemplate(2, PopoverEditMatTableFlexExample_mat_cell_11_span_2_Template, 4, 0, "span", 18);
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r29 = ctx.$implicit;
      ɵɵnextContext();
      const _r0 = ɵɵreference(2);
      ɵɵproperty("matPopoverEdit", _r0)("matPopoverEditContext", element_r29);
      ɵɵadvance(1);
      ɵɵtextInterpolate1(" ", element_r29.weight, " ");
  } }
  function PopoverEditMatTableFlexExample_mat_header_cell_13_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "mat-header-cell");
      ɵɵtext(1, " Symbol ");
      ɵɵelementEnd();
  } }
  function PopoverEditMatTableFlexExample_mat_cell_14_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "mat-cell");
      ɵɵtext(1);
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r31 = ctx.$implicit;
      ɵɵadvance(1);
      ɵɵtextInterpolate1(" ", element_r31.symbol, " ");
  } }
  function PopoverEditMatTableFlexExample_mat_header_row_15_Template(rf, ctx) { if (rf & 1) {
      ɵɵelement(0, "mat-header-row");
  } }
  function PopoverEditMatTableFlexExample_mat_row_16_Template(rf, ctx) { if (rf & 1) {
      ɵɵelement(0, "mat-row");
  } }
  const ELEMENT_DATA = [
      { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
      { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
      { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
      { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
      { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
      { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
      { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
      { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
      { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
      { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
      { position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na' },
      { position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg' },
      { position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al' },
      { position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si' },
      { position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P' },
      { position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S' },
      { position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl' },
      { position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar' },
      { position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K' },
      { position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca' },
  ];
  /**
   * @title Material Popover Edit on a flex Material data-table
   */
  class PopoverEditMatTableFlexExample {
      constructor() {
          this.displayedColumns = ['position', 'name', 'weight', 'symbol'];
          this.dataSource = new ExampleDataSource$1();
          this.preservedNameValues = new WeakMap();
          this.preservedWeightValues = new WeakMap();
      }
      onSubmitName(element, f) {
          if (!f.valid) {
              return;
          }
          element.name = f.value.name;
      }
      onSubmitWeight(element, f) {
          if (!f.valid) {
              return;
          }
          element.weight = f.value.weight;
      }
  }
  PopoverEditMatTableFlexExample.ɵfac = function PopoverEditMatTableFlexExample_Factory(t) { return new (t || PopoverEditMatTableFlexExample)(); };
  PopoverEditMatTableFlexExample.ɵcmp = ɵɵdefineComponent({ type: PopoverEditMatTableFlexExample, selectors: [["popover-edit-mat-table-flex-example"]], decls: 17, vars: 3, consts: [["editable", "", 1, "example-table", 3, "dataSource"], ["weightEdit", ""], ["matColumnDef", "position"], [4, "matHeaderCellDef"], [4, "matCellDef"], ["matColumnDef", "name"], [3, "matPopoverEdit", 4, "matCellDef"], ["matColumnDef", "weight"], [3, "matPopoverEdit", "matPopoverEditContext", 4, "matCellDef"], ["matColumnDef", "symbol"], [4, "matHeaderRowDef"], [4, "matRowDef", "matRowDefColumns"], ["matEditLens", "", 3, "matEditLensPreservedFormValue", "ngSubmit", "matEditLensPreservedFormValueChange"], ["f", "ngForm"], ["mat-edit-content", ""], ["matInput", "", "type", "number", "name", "weight", "required", "", 3, "ngModel"], [3, "matPopoverEdit"], ["nameEdit", ""], [4, "matRowHoverContent"], ["mat-edit-title", ""], ["matInput", "", "name", "name", "required", "", 3, "ngModel"], ["mat-edit-actions", ""], ["mat-button", "", "type", "submit"], ["mat-button", "", "matEditRevert", ""], ["mat-button", "", "matEditClose", ""], ["mat-icon-button", "", "matEditOpen", ""], [3, "matPopoverEdit", "matPopoverEditContext"]], template: function PopoverEditMatTableFlexExample_Template(rf, ctx) { if (rf & 1) {
          ɵɵelementStart(0, "mat-table", 0);
          ɵɵtemplate(1, PopoverEditMatTableFlexExample_ng_template_1_Template, 6, 2, "ng-template", null, 1, ɵɵtemplateRefExtractor);
          ɵɵelementContainerStart(3, 2);
          ɵɵtemplate(4, PopoverEditMatTableFlexExample_mat_header_cell_4_Template, 2, 0, "mat-header-cell", 3);
          ɵɵtemplate(5, PopoverEditMatTableFlexExample_mat_cell_5_Template, 2, 1, "mat-cell", 4);
          ɵɵelementContainerEnd();
          ɵɵelementContainerStart(6, 5);
          ɵɵtemplate(7, PopoverEditMatTableFlexExample_mat_header_cell_7_Template, 2, 0, "mat-header-cell", 3);
          ɵɵtemplate(8, PopoverEditMatTableFlexExample_mat_cell_8_Template, 5, 2, "mat-cell", 6);
          ɵɵelementContainerEnd();
          ɵɵelementContainerStart(9, 7);
          ɵɵtemplate(10, PopoverEditMatTableFlexExample_mat_header_cell_10_Template, 2, 0, "mat-header-cell", 3);
          ɵɵtemplate(11, PopoverEditMatTableFlexExample_mat_cell_11_Template, 3, 3, "mat-cell", 8);
          ɵɵelementContainerEnd();
          ɵɵelementContainerStart(12, 9);
          ɵɵtemplate(13, PopoverEditMatTableFlexExample_mat_header_cell_13_Template, 2, 0, "mat-header-cell", 3);
          ɵɵtemplate(14, PopoverEditMatTableFlexExample_mat_cell_14_Template, 2, 1, "mat-cell", 4);
          ɵɵelementContainerEnd();
          ɵɵtemplate(15, PopoverEditMatTableFlexExample_mat_header_row_15_Template, 1, 0, "mat-header-row", 10);
          ɵɵtemplate(16, PopoverEditMatTableFlexExample_mat_row_16_Template, 1, 0, "mat-row", 11);
          ɵɵelementEnd();
      } if (rf & 2) {
          ɵɵproperty("dataSource", ctx.dataSource);
          ɵɵadvance(15);
          ɵɵproperty("matHeaderRowDef", ctx.displayedColumns);
          ɵɵadvance(1);
          ɵɵproperty("matRowDefColumns", ctx.displayedColumns);
      } }, directives: [MatTable, CdkEditable, MatColumnDef, MatHeaderCellDef, MatCellDef, MatHeaderRowDef, MatRowDef, ɵangular_packages_forms_forms_y, NgControlStatusGroup, NgForm, MatEditLens, MatFormField, MatInput, NumberValueAccessor, DefaultValueAccessor, RequiredValidator, NgControlStatus, NgModel, MatHeaderCell, MatCell, MatPopoverEdit, MatRowHoverContent, MatButton, MatEditRevert, MatEditClose, MatEditOpen, MatIcon, MatHeaderRow, MatRow], styles: [".example-table[_ngcontent-%COMP%] {\n  width: 100%;\n}"] });
  /*@__PURE__*/ (function () { ɵsetClassMetadata(PopoverEditMatTableFlexExample, [{
          type: Component,
          args: [{
                  selector: 'popover-edit-mat-table-flex-example',
                  styleUrls: ['popover-edit-mat-table-flex-example.css'],
                  templateUrl: 'popover-edit-mat-table-flex-example.html',
              }]
      }], null, null); })();
  /**
   * Data source to provide what data should be rendered in the table. Note that the data source
   * can retrieve its data in any way. In this case, the data source is provided a reference
   * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
   * the underlying data. Instead, it only needs to take the data and send the table exactly what
   * should be rendered.
   */
  class ExampleDataSource$1 extends DataSource {
      constructor() {
          super(...arguments);
          /** Stream of data that is provided to the table. */
          this.data = new BehaviorSubject(ELEMENT_DATA);
      }
      /** Connect function called by the table to retrieve one stream containing the data to render. */
      connect() {
          return this.data;
      }
      disconnect() { }
  }
  
  function PopoverEditMatTableExample_ng_template_1_Template(rf, ctx) { if (rf & 1) {
      const _r19 = ɵɵgetCurrentView();
      ɵɵelementStart(0, "div");
      ɵɵelementStart(1, "form", 15, 16);
      ɵɵlistener("ngSubmit", function PopoverEditMatTableExample_ng_template_1_Template_form_ngSubmit_1_listener() { ɵɵrestoreView(_r19); const element_r16 = ctx.$implicit; const _r17 = ɵɵreference(2); const ctx_r18 = ɵɵnextContext(); return ctx_r18.onSubmitWeight(element_r16, _r17); })("matEditLensPreservedFormValueChange", function PopoverEditMatTableExample_ng_template_1_Template_form_matEditLensPreservedFormValueChange_1_listener($event) { ɵɵrestoreView(_r19); const element_r16 = ctx.$implicit; const ctx_r20 = ɵɵnextContext(); return ctx_r20.weightValues.for(element_r16).value = $event; });
      ɵɵelementStart(3, "div", 17);
      ɵɵelementStart(4, "mat-form-field");
      ɵɵelement(5, "input", 18);
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r16 = ctx.$implicit;
      const ctx_r1 = ɵɵnextContext();
      ɵɵadvance(1);
      ɵɵproperty("matEditLensPreservedFormValue", ctx_r1.weightValues.for(element_r16).value);
      ɵɵadvance(4);
      ɵɵproperty("ngModel", element_r16.weight);
  } }
  function PopoverEditMatTableExample_th_4_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "th", 19);
      ɵɵtext(1, " No. ");
      ɵɵelementEnd();
  } }
  function PopoverEditMatTableExample_td_5_span_2_Template(rf, ctx) { if (rf & 1) {
      const _r25 = ɵɵgetCurrentView();
      ɵɵelementStart(0, "span");
      ɵɵelementStart(1, "button", 22);
      ɵɵlistener("click", function PopoverEditMatTableExample_td_5_span_2_Template_button_click_1_listener() { ɵɵrestoreView(_r25); const element_r21 = ɵɵnextContext().$implicit; const ctx_r23 = ɵɵnextContext(); return ctx_r23.goodJob(element_r21); });
      ɵɵelementStart(2, "mat-icon");
      ɵɵtext(3, "thumb_up");
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementStart(4, "button", 22);
      ɵɵlistener("click", function PopoverEditMatTableExample_td_5_span_2_Template_button_click_4_listener() { ɵɵrestoreView(_r25); const element_r21 = ɵɵnextContext().$implicit; const ctx_r26 = ɵɵnextContext(); return ctx_r26.badJob(element_r21); });
      ɵɵelementStart(5, "mat-icon");
      ɵɵtext(6, "thumb_down");
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
  } }
  function PopoverEditMatTableExample_td_5_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "td", 20);
      ɵɵtext(1);
      ɵɵtemplate(2, PopoverEditMatTableExample_td_5_span_2_Template, 7, 0, "span", 21);
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r21 = ctx.$implicit;
      ɵɵadvance(1);
      ɵɵtextInterpolate1(" ", element_r21.position, " ");
  } }
  function PopoverEditMatTableExample_th_7_Template(rf, ctx) { if (rf & 1) {
      const _r29 = ɵɵgetCurrentView();
      ɵɵelementStart(0, "th", 19);
      ɵɵtext(1, " Name ");
      ɵɵelementStart(2, "mat-checkbox", 23);
      ɵɵlistener("ngModelChange", function PopoverEditMatTableExample_th_7_Template_mat_checkbox_ngModelChange_2_listener($event) { ɵɵrestoreView(_r29); const ctx_r28 = ɵɵnextContext(); return ctx_r28.nameEditEnabled = $event; });
      ɵɵtext(3, "Edit enabled");
      ɵɵelementEnd();
      ɵɵelementEnd();
  } if (rf & 2) {
      const ctx_r4 = ɵɵnextContext();
      ɵɵadvance(2);
      ɵɵproperty("ngModel", ctx_r4.nameEditEnabled);
  } }
  function PopoverEditMatTableExample_td_8_ng_template_2_Template(rf, ctx) { if (rf & 1) {
      const _r37 = ɵɵgetCurrentView();
      ɵɵelementStart(0, "div");
      ɵɵelementStart(1, "form", 15, 16);
      ɵɵlistener("ngSubmit", function PopoverEditMatTableExample_td_8_ng_template_2_Template_form_ngSubmit_1_listener() { ɵɵrestoreView(_r37); const _r34 = ɵɵreference(2); const element_r30 = ɵɵnextContext().$implicit; const ctx_r35 = ɵɵnextContext(); return ctx_r35.onSubmitName(element_r30, _r34); })("matEditLensPreservedFormValueChange", function PopoverEditMatTableExample_td_8_ng_template_2_Template_form_matEditLensPreservedFormValueChange_1_listener($event) { ɵɵrestoreView(_r37); const element_r30 = ɵɵnextContext().$implicit; const ctx_r38 = ɵɵnextContext(); return ctx_r38.nameValues.for(element_r30).value = $event; });
      ɵɵelementStart(3, "h2", 27);
      ɵɵtext(4, "Name");
      ɵɵelementEnd();
      ɵɵelementStart(5, "div", 17);
      ɵɵelementStart(6, "mat-form-field");
      ɵɵelement(7, "input", 28);
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementStart(8, "div", 29);
      ɵɵelementStart(9, "button", 30);
      ɵɵtext(10, "Confirm");
      ɵɵelementEnd();
      ɵɵelementStart(11, "button", 31);
      ɵɵtext(12, "Revert");
      ɵɵelementEnd();
      ɵɵelementStart(13, "button", 32);
      ɵɵtext(14, "Close");
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r30 = ɵɵnextContext().$implicit;
      const ctx_r32 = ɵɵnextContext();
      ɵɵadvance(1);
      ɵɵproperty("matEditLensPreservedFormValue", ctx_r32.nameValues.for(element_r30).value);
      ɵɵadvance(6);
      ɵɵproperty("ngModel", element_r30.name);
  } }
  function PopoverEditMatTableExample_td_8_ng_container_4_span_1_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "span");
      ɵɵelementStart(1, "button", 33);
      ɵɵelementStart(2, "mat-icon");
      ɵɵtext(3, "edit");
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
  } }
  function PopoverEditMatTableExample_td_8_ng_container_4_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementContainerStart(0);
      ɵɵtemplate(1, PopoverEditMatTableExample_td_8_ng_container_4_span_1_Template, 4, 0, "span", 21);
      ɵɵelementContainerEnd();
  } }
  function PopoverEditMatTableExample_td_8_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "td", 24);
      ɵɵtext(1);
      ɵɵtemplate(2, PopoverEditMatTableExample_td_8_ng_template_2_Template, 15, 2, "ng-template", null, 25, ɵɵtemplateRefExtractor);
      ɵɵtemplate(4, PopoverEditMatTableExample_td_8_ng_container_4_Template, 2, 0, "ng-container", 26);
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r30 = ctx.$implicit;
      const _r31 = ɵɵreference(3);
      const ctx_r5 = ɵɵnextContext();
      ɵɵproperty("matPopoverEdit", _r31)("matPopoverEditDisabled", !ctx_r5.nameEditEnabled);
      ɵɵadvance(1);
      ɵɵtextInterpolate1(" ", element_r30.name, " ");
      ɵɵadvance(3);
      ɵɵproperty("ngIf", ctx_r5.nameEditEnabled);
  } }
  function PopoverEditMatTableExample_th_10_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "th", 19);
      ɵɵtext(1, " Type ");
      ɵɵelementEnd();
  } }
  function PopoverEditMatTableExample_td_11_ng_template_2_mat_list_option_5_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "mat-list-option", 40);
      ɵɵtext(1);
      ɵɵelementEnd();
  } if (rf & 2) {
      const type_r48 = ctx.$implicit;
      ɵɵproperty("value", type_r48);
      ɵɵadvance(1);
      ɵɵtextInterpolate1(" ", type_r48, " ");
  } }
  const _c0$1 = function (a0) { return [a0]; };
  function PopoverEditMatTableExample_td_11_ng_template_2_Template(rf, ctx) { if (rf & 1) {
      const _r51 = ɵɵgetCurrentView();
      ɵɵelementStart(0, "div");
      ɵɵelementStart(1, "form", 36, 16);
      ɵɵlistener("ngSubmit", function PopoverEditMatTableExample_td_11_ng_template_2_Template_form_ngSubmit_1_listener() { ɵɵrestoreView(_r51); const _r46 = ɵɵreference(2); const element_r42 = ɵɵnextContext().$implicit; const ctx_r49 = ɵɵnextContext(); return ctx_r49.onSubmitType(element_r42, _r46); })("matEditLensPreservedFormValueChange", function PopoverEditMatTableExample_td_11_ng_template_2_Template_form_matEditLensPreservedFormValueChange_1_listener($event) { ɵɵrestoreView(_r51); const element_r42 = ɵɵnextContext().$implicit; const ctx_r52 = ɵɵnextContext(); return ctx_r52.typeValues.for(element_r42).value = $event; });
      ɵɵelementStart(3, "div", 37);
      ɵɵelementStart(4, "mat-selection-list", 38);
      ɵɵlistener("selectionChange", function PopoverEditMatTableExample_td_11_ng_template_2_Template_mat_selection_list_selectionChange_4_listener() { ɵɵrestoreView(_r51); const _r46 = ɵɵreference(2); return _r46.ngSubmit.emit(); });
      ɵɵtemplate(5, PopoverEditMatTableExample_td_11_ng_template_2_mat_list_option_5_Template, 2, 2, "mat-list-option", 39);
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r42 = ɵɵnextContext().$implicit;
      const ctx_r44 = ɵɵnextContext();
      ɵɵadvance(1);
      ɵɵproperty("matEditLensPreservedFormValue", ctx_r44.typeValues.for(element_r42).value);
      ɵɵadvance(3);
      ɵɵproperty("multiple", false)("ngModel", ɵɵpureFunction1(4, _c0$1, element_r42.type));
      ɵɵadvance(1);
      ɵɵproperty("ngForOf", ctx_r44.TYPES);
  } }
  function PopoverEditMatTableExample_td_11_span_4_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "span");
      ɵɵelementStart(1, "button", 33);
      ɵɵelementStart(2, "mat-icon");
      ɵɵtext(3, "arrow_drop_down");
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
  } }
  function PopoverEditMatTableExample_td_11_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "td", 34);
      ɵɵtext(1);
      ɵɵtemplate(2, PopoverEditMatTableExample_td_11_ng_template_2_Template, 6, 6, "ng-template", null, 35, ɵɵtemplateRefExtractor);
      ɵɵtemplate(4, PopoverEditMatTableExample_td_11_span_4_Template, 4, 0, "span", 21);
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r42 = ctx.$implicit;
      const _r43 = ɵɵreference(3);
      ɵɵproperty("matPopoverEdit", _r43);
      ɵɵadvance(1);
      ɵɵtextInterpolate1(" ", element_r42.type, " ");
  } }
  function PopoverEditMatTableExample_th_13_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "th", 19);
      ɵɵtext(1, " Weight ");
      ɵɵelementEnd();
  } }
  function PopoverEditMatTableExample_td_14_span_2_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "span");
      ɵɵelementStart(1, "button", 33);
      ɵɵelementStart(2, "mat-icon");
      ɵɵtext(3, "edit");
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
  } }
  function PopoverEditMatTableExample_td_14_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "td", 41);
      ɵɵtext(1);
      ɵɵtemplate(2, PopoverEditMatTableExample_td_14_span_2_Template, 4, 0, "span", 21);
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r56 = ctx.$implicit;
      ɵɵnextContext();
      const _r0 = ɵɵreference(2);
      ɵɵproperty("matPopoverEdit", _r0)("matPopoverEditContext", element_r56);
      ɵɵadvance(1);
      ɵɵtextInterpolate1(" ", element_r56.weight, " ");
  } }
  function PopoverEditMatTableExample_th_16_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "th", 19);
      ɵɵtext(1, " Symbol ");
      ɵɵelementEnd();
  } }
  function PopoverEditMatTableExample_td_17_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "td", 20);
      ɵɵtext(1);
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r58 = ctx.$implicit;
      ɵɵadvance(1);
      ɵɵtextInterpolate1(" ", element_r58.symbol, " ");
  } }
  function PopoverEditMatTableExample_tr_18_Template(rf, ctx) { if (rf & 1) {
      ɵɵelement(0, "tr", 42);
  } }
  function PopoverEditMatTableExample_tr_19_Template(rf, ctx) { if (rf & 1) {
      ɵɵelement(0, "tr", 43);
  } }
  function PopoverEditMatTableExample_th_21_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "th", 19);
      ɵɵtext(1, " Fantasy Counterparts ");
      ɵɵelementEnd();
  } }
  function PopoverEditMatTableExample_td_22_ng_template_2_mat_list_option_5_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "mat-list-option", 47);
      ɵɵtext(1);
      ɵɵelementEnd();
  } if (rf & 2) {
      const fantasyElement_r66 = ctx.$implicit;
      ɵɵproperty("value", fantasyElement_r66);
      ɵɵadvance(1);
      ɵɵtextInterpolate1(" ", fantasyElement_r66, " ");
  } }
  function PopoverEditMatTableExample_td_22_ng_template_2_Template(rf, ctx) { if (rf & 1) {
      const _r69 = ɵɵgetCurrentView();
      ɵɵelementStart(0, "div");
      ɵɵelementStart(1, "form", 15, 16);
      ɵɵlistener("ngSubmit", function PopoverEditMatTableExample_td_22_ng_template_2_Template_form_ngSubmit_1_listener() { ɵɵrestoreView(_r69); const _r64 = ɵɵreference(2); const element_r60 = ɵɵnextContext().$implicit; const ctx_r67 = ɵɵnextContext(); return ctx_r67.onSubmitFantasyCounterparts(element_r60, _r64); })("matEditLensPreservedFormValueChange", function PopoverEditMatTableExample_td_22_ng_template_2_Template_form_matEditLensPreservedFormValueChange_1_listener($event) { ɵɵrestoreView(_r69); const element_r60 = ɵɵnextContext().$implicit; const ctx_r70 = ɵɵnextContext(); return ctx_r70.fantasyValues.for(element_r60).value = $event; });
      ɵɵelementStart(3, "div", 37);
      ɵɵelementStart(4, "mat-selection-list", 45);
      ɵɵtemplate(5, PopoverEditMatTableExample_td_22_ng_template_2_mat_list_option_5_Template, 2, 2, "mat-list-option", 46);
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementStart(6, "div", 29);
      ɵɵelementStart(7, "button", 30);
      ɵɵtext(8, "Confirm");
      ɵɵelementEnd();
      ɵɵelementStart(9, "button", 31);
      ɵɵtext(10, "Revert");
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r60 = ɵɵnextContext().$implicit;
      const ctx_r62 = ɵɵnextContext();
      ɵɵadvance(1);
      ɵɵproperty("matEditLensPreservedFormValue", ctx_r62.fantasyValues.for(element_r60).value);
      ɵɵadvance(3);
      ɵɵproperty("ngModel", element_r60.fantasyCounterparts);
      ɵɵadvance(1);
      ɵɵproperty("ngForOf", ctx_r62.FANTASY_ELEMENTS);
  } }
  function PopoverEditMatTableExample_td_22_span_4_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "span");
      ɵɵelementStart(1, "button", 33);
      ɵɵelementStart(2, "mat-icon");
      ɵɵtext(3, "arrow_drop_down");
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
  } }
  function PopoverEditMatTableExample_td_22_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "td", 34);
      ɵɵtext(1);
      ɵɵtemplate(2, PopoverEditMatTableExample_td_22_ng_template_2_Template, 11, 3, "ng-template", null, 44, ɵɵtemplateRefExtractor);
      ɵɵtemplate(4, PopoverEditMatTableExample_td_22_span_4_Template, 4, 0, "span", 21);
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r60 = ctx.$implicit;
      const _r61 = ɵɵreference(3);
      ɵɵproperty("matPopoverEdit", _r61);
      ɵɵadvance(1);
      ɵɵtextInterpolate1(" ", element_r60.fantasyCounterparts.join(", "), " ");
  } }
  const ELEMENT_DATA$1 = [
      { position: 1, name: 'Hydrogen', type: 'Nonmetal', weight: 1.0079, symbol: 'H',
          fantasyCounterparts: ['Fire', 'Wind', 'Light'] },
      { position: 2, name: 'Helium', type: 'Nonmetal', weight: 4.0026, symbol: 'He',
          fantasyCounterparts: ['Wind', 'Light'] },
      { position: 3, name: 'Lithium', type: 'Metal', weight: 6.941, symbol: 'Li',
          fantasyCounterparts: [] },
      { position: 4, name: 'Beryllium', type: 'Metal', weight: 9.0122, symbol: 'Be',
          fantasyCounterparts: [] },
      { position: 5, name: 'Boron', type: 'Semimetal', weight: 10.811, symbol: 'B',
          fantasyCounterparts: [] },
      { position: 6, name: 'Carbon', type: 'Nonmetal', weight: 12.0107, symbol: 'C',
          fantasyCounterparts: ['Earth', 'Dark'] },
      { position: 7, name: 'Nitrogen', type: 'Nonmetal', weight: 14.0067, symbol: 'N',
          fantasyCounterparts: ['Wind'] },
      { position: 8, name: 'Oxygen', type: 'Nonmetal', weight: 15.9994, symbol: 'O',
          fantasyCounterparts: ['Fire', 'Water', 'Wind'] },
      { position: 9, name: 'Fluorine', type: 'Nonmetal', weight: 18.9984, symbol: 'F',
          fantasyCounterparts: [] },
      { position: 10, name: 'Neon', type: 'Nonmetal', weight: 20.1797, symbol: 'Ne',
          fantasyCounterparts: ['Light'] },
      { position: 11, name: 'Sodium', type: 'Metal', weight: 22.9897, symbol: 'Na',
          fantasyCounterparts: ['Earth', 'Water'] },
      { position: 12, name: 'Magnesium', type: 'Metal', weight: 24.305, symbol: 'Mg',
          fantasyCounterparts: [] },
      { position: 13, name: 'Aluminum', type: 'Metal', weight: 26.9815, symbol: 'Al',
          fantasyCounterparts: [] },
      { position: 14, name: 'Silicon', type: 'Semimetal', weight: 28.0855, symbol: 'Si',
          fantasyCounterparts: [] },
      { position: 15, name: 'Phosphorus', type: 'Nonmetal', weight: 30.9738, symbol: 'P',
          fantasyCounterparts: [] },
      { position: 16, name: 'Sulfur', type: 'Nonmetal', weight: 32.065, symbol: 'S',
          fantasyCounterparts: [] },
      { position: 17, name: 'Chlorine', type: 'Nonmetal', weight: 35.453, symbol: 'Cl',
          fantasyCounterparts: [] },
      { position: 18, name: 'Argon', type: 'Nonmetal', weight: 39.948, symbol: 'Ar',
          fantasyCounterparts: [] },
      { position: 19, name: 'Potassium', type: 'Metal', weight: 39.0983, symbol: 'K',
          fantasyCounterparts: [] },
      { position: 20, name: 'Calcium', type: 'Metal', weight: 40.078, symbol: 'Ca',
          fantasyCounterparts: [] },
  ];
  const TYPES = ['Metal', 'Semimetal', 'Nonmetal'];
  const FANTASY_ELEMENTS = ['Earth', 'Water', 'Wind', 'Fire', 'Light', 'Dark'];
  /**
   * @title Material Popover Edit on a Material data-table
   */
  class PopoverEditMatTableExample {
      constructor(_snackBar) {
          this._snackBar = _snackBar;
          this.displayedColumns = ['position', 'name', 'type', 'weight', 'symbol', 'fantasyCounterpart'];
          this.dataSource = new ExampleDataSource$2();
          this.nameEditEnabled = true;
          this.TYPES = TYPES;
          this.FANTASY_ELEMENTS = FANTASY_ELEMENTS;
          this.nameValues = new FormValueContainer();
          this.weightValues = new FormValueContainer();
          this.typeValues = new FormValueContainer();
          this.fantasyValues = new FormValueContainer();
      }
      onSubmitName(element, f) {
          if (!f.valid) {
              return;
          }
          element.name = f.value.name;
      }
      onSubmitWeight(element, f) {
          if (!f.valid) {
              return;
          }
          element.weight = f.value.weight;
      }
      onSubmitType(element, f) {
          if (!f.valid) {
              return;
          }
          element.type = f.value.type[0];
      }
      onSubmitFantasyCounterparts(element, f) {
          if (!f.valid) {
              return;
          }
          element.fantasyCounterparts = f.value.fantasyCounterparts;
      }
      goodJob(element) {
          this._snackBar.open(`Way to go, ${element.name}!`, undefined, { duration: 2000 });
      }
      badJob(element) {
          this._snackBar.open(`You have failed me for the last time, #${element.position}.`, undefined, { duration: 2000 });
      }
  }
  PopoverEditMatTableExample.ɵfac = function PopoverEditMatTableExample_Factory(t) { return new (t || PopoverEditMatTableExample)(ɵɵdirectiveInject(MatSnackBar)); };
  PopoverEditMatTableExample.ɵcmp = ɵɵdefineComponent({ type: PopoverEditMatTableExample, selectors: [["popover-edit-mat-table-example"]], decls: 23, vars: 3, consts: [["mat-table", "", "editable", "", 1, "example-table", 3, "dataSource"], ["weightEdit", ""], ["matColumnDef", "position"], ["mat-header-cell", "", 4, "matHeaderCellDef"], ["mat-cell", "", 4, "matCellDef"], ["matColumnDef", "name"], ["mat-cell", "", 3, "matPopoverEdit", "matPopoverEditDisabled", 4, "matCellDef"], ["matColumnDef", "type"], ["mat-cell", "", 3, "matPopoverEdit", 4, "matCellDef"], ["matColumnDef", "weight"], ["mat-cell", "", 3, "matPopoverEdit", "matPopoverEditContext", 4, "matCellDef"], ["matColumnDef", "symbol"], ["mat-header-row", "", 4, "matHeaderRowDef"], ["mat-row", "", 4, "matRowDef", "matRowDefColumns"], ["matColumnDef", "fantasyCounterpart"], ["matEditLens", "", 3, "matEditLensPreservedFormValue", "ngSubmit", "matEditLensPreservedFormValueChange"], ["f", "ngForm"], ["mat-edit-content", ""], ["matInput", "", "type", "number", "name", "weight", "required", "", 3, "ngModel"], ["mat-header-cell", ""], ["mat-cell", ""], [4, "matRowHoverContent"], ["mat-icon-button", "", 3, "click"], [3, "ngModel", "ngModelChange"], ["mat-cell", "", 3, "matPopoverEdit", "matPopoverEditDisabled"], ["nameEdit", ""], [4, "ngIf"], ["mat-edit-title", ""], ["matInput", "", "name", "name", "required", "", 3, "ngModel"], ["mat-edit-actions", ""], ["mat-button", "", "type", "submit"], ["mat-button", "", "matEditRevert", ""], ["mat-button", "", "matEditClose", ""], ["mat-icon-button", "", "matEditOpen", ""], ["mat-cell", "", 3, "matPopoverEdit"], ["typeEdit", ""], ["matEditLens", "", "matEditClose", "", 3, "matEditLensPreservedFormValue", "ngSubmit", "matEditLensPreservedFormValueChange"], ["mat-edit-fill", ""], ["name", "type", "aria-label", "Element type", 3, "multiple", "ngModel", "selectionChange"], [3, "value", 4, "ngFor", "ngForOf"], [3, "value"], ["mat-cell", "", 3, "matPopoverEdit", "matPopoverEditContext"], ["mat-header-row", ""], ["mat-row", ""], ["fantasyCounterpartEdit", ""], ["name", "fantasyCounterparts", "aria-label", "Fantasy Element Counterparts", 3, "ngModel"], ["checkboxPosition", "before", 3, "value", 4, "ngFor", "ngForOf"], ["checkboxPosition", "before", 3, "value"]], template: function PopoverEditMatTableExample_Template(rf, ctx) { if (rf & 1) {
          ɵɵelementStart(0, "table", 0);
          ɵɵtemplate(1, PopoverEditMatTableExample_ng_template_1_Template, 6, 2, "ng-template", null, 1, ɵɵtemplateRefExtractor);
          ɵɵelementContainerStart(3, 2);
          ɵɵtemplate(4, PopoverEditMatTableExample_th_4_Template, 2, 0, "th", 3);
          ɵɵtemplate(5, PopoverEditMatTableExample_td_5_Template, 3, 1, "td", 4);
          ɵɵelementContainerEnd();
          ɵɵelementContainerStart(6, 5);
          ɵɵtemplate(7, PopoverEditMatTableExample_th_7_Template, 4, 1, "th", 3);
          ɵɵtemplate(8, PopoverEditMatTableExample_td_8_Template, 5, 4, "td", 6);
          ɵɵelementContainerEnd();
          ɵɵelementContainerStart(9, 7);
          ɵɵtemplate(10, PopoverEditMatTableExample_th_10_Template, 2, 0, "th", 3);
          ɵɵtemplate(11, PopoverEditMatTableExample_td_11_Template, 5, 2, "td", 8);
          ɵɵelementContainerEnd();
          ɵɵelementContainerStart(12, 9);
          ɵɵtemplate(13, PopoverEditMatTableExample_th_13_Template, 2, 0, "th", 3);
          ɵɵtemplate(14, PopoverEditMatTableExample_td_14_Template, 3, 3, "td", 10);
          ɵɵelementContainerEnd();
          ɵɵelementContainerStart(15, 11);
          ɵɵtemplate(16, PopoverEditMatTableExample_th_16_Template, 2, 0, "th", 3);
          ɵɵtemplate(17, PopoverEditMatTableExample_td_17_Template, 2, 1, "td", 4);
          ɵɵelementContainerEnd();
          ɵɵtemplate(18, PopoverEditMatTableExample_tr_18_Template, 1, 0, "tr", 12);
          ɵɵtemplate(19, PopoverEditMatTableExample_tr_19_Template, 1, 0, "tr", 13);
          ɵɵelementContainerStart(20, 14);
          ɵɵtemplate(21, PopoverEditMatTableExample_th_21_Template, 2, 0, "th", 3);
          ɵɵtemplate(22, PopoverEditMatTableExample_td_22_Template, 5, 2, "td", 8);
          ɵɵelementContainerEnd();
          ɵɵelementEnd();
      } if (rf & 2) {
          ɵɵproperty("dataSource", ctx.dataSource);
          ɵɵadvance(18);
          ɵɵproperty("matHeaderRowDef", ctx.displayedColumns);
          ɵɵadvance(1);
          ɵɵproperty("matRowDefColumns", ctx.displayedColumns);
      } }, directives: [MatTable, CdkEditable, MatColumnDef, MatHeaderCellDef, MatCellDef, MatHeaderRowDef, MatRowDef, ɵangular_packages_forms_forms_y, NgControlStatusGroup, NgForm, MatEditLens, MatFormField, MatInput, NumberValueAccessor, DefaultValueAccessor, RequiredValidator, NgControlStatus, NgModel, MatHeaderCell, MatCell, MatRowHoverContent, MatButton, MatIcon, MatCheckbox, MatPopoverEdit, NgIf, MatEditRevert, MatEditClose, MatEditOpen, MatSelectionList, NgForOf, MatListOption, MatHeaderRow, MatRow], styles: [".example-table[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.example-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left;\n}\n\n.example-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%], .example-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  width: 16%;\n}"] });
  /*@__PURE__*/ (function () { ɵsetClassMetadata(PopoverEditMatTableExample, [{
          type: Component,
          args: [{
                  selector: 'popover-edit-mat-table-example',
                  styleUrls: ['popover-edit-mat-table-example.css'],
                  templateUrl: 'popover-edit-mat-table-example.html',
              }]
      }], function () { return [{ type: MatSnackBar }]; }, null); })();
  /**
   * Data source to provide what data should be rendered in the table. Note that the data source
   * can retrieve its data in any way. In this case, the data source is provided a reference
   * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
   * the underlying data. Instead, it only needs to take the data and send the table exactly what
   * should be rendered.
   */
  class ExampleDataSource$2 extends DataSource {
      constructor() {
          super(...arguments);
          /** Stream of data that is provided to the table. */
          this.data = new BehaviorSubject(ELEMENT_DATA$1);
      }
      /** Connect function called by the table to retrieve one stream containing the data to render. */
      connect() {
          return this.data;
      }
      disconnect() { }
  }
  
  function PopoverEditTabOutMatTableExample_ng_template_1_Template(rf, ctx) { if (rf & 1) {
      const _r15 = ɵɵgetCurrentView();
      ɵɵelementStart(0, "div");
      ɵɵelementStart(1, "form", 12, 13);
      ɵɵlistener("ngSubmit", function PopoverEditTabOutMatTableExample_ng_template_1_Template_form_ngSubmit_1_listener() { ɵɵrestoreView(_r15); const element_r12 = ctx.$implicit; const _r13 = ɵɵreference(2); const ctx_r14 = ɵɵnextContext(); return ctx_r14.onSubmitWeight(element_r12, _r13); })("matEditLensPreservedFormValueChange", function PopoverEditTabOutMatTableExample_ng_template_1_Template_form_matEditLensPreservedFormValueChange_1_listener($event) { ɵɵrestoreView(_r15); const element_r12 = ctx.$implicit; const ctx_r16 = ɵɵnextContext(); return ctx_r16.preservedWeightValues.set(element_r12, $event); });
      ɵɵelementStart(3, "div", 14);
      ɵɵelementStart(4, "mat-form-field");
      ɵɵelement(5, "input", 15);
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r12 = ctx.$implicit;
      const ctx_r1 = ɵɵnextContext();
      ɵɵadvance(1);
      ɵɵproperty("matEditLensPreservedFormValue", ctx_r1.preservedWeightValues.get(element_r12));
      ɵɵadvance(4);
      ɵɵproperty("ngModel", element_r12.weight);
  } }
  function PopoverEditTabOutMatTableExample_th_4_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "th", 16);
      ɵɵtext(1, " No. ");
      ɵɵelementEnd();
  } }
  function PopoverEditTabOutMatTableExample_td_5_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "td", 17);
      ɵɵtext(1);
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r17 = ctx.$implicit;
      ɵɵadvance(1);
      ɵɵtextInterpolate1(" ", element_r17.position, " ");
  } }
  function PopoverEditTabOutMatTableExample_th_7_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "th", 16);
      ɵɵtext(1, " Name ");
      ɵɵelementEnd();
  } }
  function PopoverEditTabOutMatTableExample_td_8_ng_template_2_Template(rf, ctx) { if (rf & 1) {
      const _r25 = ɵɵgetCurrentView();
      ɵɵelementStart(0, "div");
      ɵɵelementStart(1, "form", 12, 13);
      ɵɵlistener("ngSubmit", function PopoverEditTabOutMatTableExample_td_8_ng_template_2_Template_form_ngSubmit_1_listener() { ɵɵrestoreView(_r25); const _r22 = ɵɵreference(2); const element_r18 = ɵɵnextContext().$implicit; const ctx_r23 = ɵɵnextContext(); return ctx_r23.onSubmitName(element_r18, _r22); })("matEditLensPreservedFormValueChange", function PopoverEditTabOutMatTableExample_td_8_ng_template_2_Template_form_matEditLensPreservedFormValueChange_1_listener($event) { ɵɵrestoreView(_r25); const element_r18 = ɵɵnextContext().$implicit; const ctx_r26 = ɵɵnextContext(); return ctx_r26.preservedNameValues.set(element_r18, $event); });
      ɵɵelementStart(3, "div", 14);
      ɵɵelementStart(4, "mat-form-field");
      ɵɵelement(5, "input", 21);
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r18 = ɵɵnextContext().$implicit;
      const ctx_r20 = ɵɵnextContext();
      ɵɵadvance(1);
      ɵɵproperty("matEditLensPreservedFormValue", ctx_r20.preservedNameValues.get(element_r18));
      ɵɵadvance(4);
      ɵɵproperty("ngModel", element_r18.name);
  } }
  function PopoverEditTabOutMatTableExample_td_8_span_4_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "span");
      ɵɵelementStart(1, "mat-icon");
      ɵɵtext(2, "edit");
      ɵɵelementEnd();
      ɵɵelementEnd();
  } }
  function PopoverEditTabOutMatTableExample_td_8_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "td", 18);
      ɵɵtext(1);
      ɵɵtemplate(2, PopoverEditTabOutMatTableExample_td_8_ng_template_2_Template, 6, 2, "ng-template", null, 19, ɵɵtemplateRefExtractor);
      ɵɵtemplate(4, PopoverEditTabOutMatTableExample_td_8_span_4_Template, 3, 0, "span", 20);
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r18 = ctx.$implicit;
      const _r19 = ɵɵreference(3);
      ɵɵproperty("matPopoverEdit", _r19);
      ɵɵadvance(1);
      ɵɵtextInterpolate1(" ", element_r18.name, " ");
  } }
  function PopoverEditTabOutMatTableExample_th_10_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "th", 16);
      ɵɵtext(1, " Weight ");
      ɵɵelementEnd();
  } }
  function PopoverEditTabOutMatTableExample_td_11_span_2_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "span");
      ɵɵelementStart(1, "mat-icon");
      ɵɵtext(2, "edit");
      ɵɵelementEnd();
      ɵɵelementEnd();
  } }
  function PopoverEditTabOutMatTableExample_td_11_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "td", 22);
      ɵɵtext(1);
      ɵɵtemplate(2, PopoverEditTabOutMatTableExample_td_11_span_2_Template, 3, 0, "span", 20);
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r29 = ctx.$implicit;
      ɵɵnextContext();
      const _r0 = ɵɵreference(2);
      ɵɵproperty("matPopoverEdit", _r0)("matPopoverEditContext", element_r29);
      ɵɵadvance(1);
      ɵɵtextInterpolate1(" ", element_r29.weight, " ");
  } }
  function PopoverEditTabOutMatTableExample_th_13_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "th", 16);
      ɵɵtext(1, " Symbol ");
      ɵɵelementEnd();
  } }
  function PopoverEditTabOutMatTableExample_td_14_Template(rf, ctx) { if (rf & 1) {
      ɵɵelementStart(0, "td", 17);
      ɵɵtext(1);
      ɵɵelementEnd();
  } if (rf & 2) {
      const element_r31 = ctx.$implicit;
      ɵɵadvance(1);
      ɵɵtextInterpolate1(" ", element_r31.symbol, " ");
  } }
  function PopoverEditTabOutMatTableExample_tr_15_Template(rf, ctx) { if (rf & 1) {
      ɵɵelement(0, "tr", 23);
  } }
  function PopoverEditTabOutMatTableExample_tr_16_Template(rf, ctx) { if (rf & 1) {
      ɵɵelement(0, "tr", 24);
  } }
  const ELEMENT_DATA$2 = [
      { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
      { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
      { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
      { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
      { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
      { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
      { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
      { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
      { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
      { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
      { position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na' },
      { position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg' },
      { position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al' },
      { position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si' },
      { position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P' },
      { position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S' },
      { position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl' },
      { position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar' },
      { position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K' },
      { position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca' },
  ];
  /**
   * @title Material Popover Edit with spreadsheet-like configuration on a Material data-table
   */
  class PopoverEditTabOutMatTableExample {
      constructor() {
          this.displayedColumns = ['position', 'name', 'weight', 'symbol'];
          this.dataSource = new ExampleDataSource$3();
          this.preservedNameValues = new WeakMap();
          this.preservedWeightValues = new WeakMap();
      }
      onSubmitName(element, f) {
          if (!f.valid) {
              return;
          }
          element.name = f.value.name;
      }
      onSubmitWeight(element, f) {
          if (!f.valid) {
              return;
          }
          element.weight = f.value.weight;
      }
  }
  PopoverEditTabOutMatTableExample.ɵfac = function PopoverEditTabOutMatTableExample_Factory(t) { return new (t || PopoverEditTabOutMatTableExample)(); };
  PopoverEditTabOutMatTableExample.ɵcmp = ɵɵdefineComponent({ type: PopoverEditTabOutMatTableExample, selectors: [["popover-edit-tab-out-mat-table-example"]], decls: 17, vars: 3, consts: [["mat-table", "", "editable", "", 1, "example-table", 3, "dataSource"], ["weightEdit", ""], ["matColumnDef", "position"], ["mat-header-cell", "", 4, "matHeaderCellDef"], ["mat-cell", "", 4, "matCellDef"], ["matColumnDef", "name"], ["mat-cell", "", "matPopoverEditTabOut", "", "matEditOpen", "", 3, "matPopoverEdit", 4, "matCellDef"], ["matColumnDef", "weight"], ["mat-cell", "", "matPopoverEditTabOut", "", "matEditOpen", "", 3, "matPopoverEdit", "matPopoverEditContext", 4, "matCellDef"], ["matColumnDef", "symbol"], ["mat-header-row", "", 4, "matHeaderRowDef"], ["mat-row", "", 4, "matRowDef", "matRowDefColumns"], ["matEditLens", "", "matEditLensClickOutBehavior", "submit", 3, "matEditLensPreservedFormValue", "ngSubmit", "matEditLensPreservedFormValueChange"], ["f", "ngForm"], ["mat-edit-content", ""], ["matInput", "", "type", "number", "name", "weight", "required", "", 3, "ngModel"], ["mat-header-cell", ""], ["mat-cell", ""], ["mat-cell", "", "matPopoverEditTabOut", "", "matEditOpen", "", 3, "matPopoverEdit"], ["nameEdit", ""], [4, "matRowHoverContent"], ["matInput", "", "name", "name", "required", "", 3, "ngModel"], ["mat-cell", "", "matPopoverEditTabOut", "", "matEditOpen", "", 3, "matPopoverEdit", "matPopoverEditContext"], ["mat-header-row", ""], ["mat-row", ""]], template: function PopoverEditTabOutMatTableExample_Template(rf, ctx) { if (rf & 1) {
          ɵɵelementStart(0, "table", 0);
          ɵɵtemplate(1, PopoverEditTabOutMatTableExample_ng_template_1_Template, 6, 2, "ng-template", null, 1, ɵɵtemplateRefExtractor);
          ɵɵelementContainerStart(3, 2);
          ɵɵtemplate(4, PopoverEditTabOutMatTableExample_th_4_Template, 2, 0, "th", 3);
          ɵɵtemplate(5, PopoverEditTabOutMatTableExample_td_5_Template, 2, 1, "td", 4);
          ɵɵelementContainerEnd();
          ɵɵelementContainerStart(6, 5);
          ɵɵtemplate(7, PopoverEditTabOutMatTableExample_th_7_Template, 2, 0, "th", 3);
          ɵɵtemplate(8, PopoverEditTabOutMatTableExample_td_8_Template, 5, 2, "td", 6);
          ɵɵelementContainerEnd();
          ɵɵelementContainerStart(9, 7);
          ɵɵtemplate(10, PopoverEditTabOutMatTableExample_th_10_Template, 2, 0, "th", 3);
          ɵɵtemplate(11, PopoverEditTabOutMatTableExample_td_11_Template, 3, 3, "td", 8);
          ɵɵelementContainerEnd();
          ɵɵelementContainerStart(12, 9);
          ɵɵtemplate(13, PopoverEditTabOutMatTableExample_th_13_Template, 2, 0, "th", 3);
          ɵɵtemplate(14, PopoverEditTabOutMatTableExample_td_14_Template, 2, 1, "td", 4);
          ɵɵelementContainerEnd();
          ɵɵtemplate(15, PopoverEditTabOutMatTableExample_tr_15_Template, 1, 0, "tr", 10);
          ɵɵtemplate(16, PopoverEditTabOutMatTableExample_tr_16_Template, 1, 0, "tr", 11);
          ɵɵelementEnd();
      } if (rf & 2) {
          ɵɵproperty("dataSource", ctx.dataSource);
          ɵɵadvance(15);
          ɵɵproperty("matHeaderRowDef", ctx.displayedColumns);
          ɵɵadvance(1);
          ɵɵproperty("matRowDefColumns", ctx.displayedColumns);
      } }, directives: [MatTable, CdkEditable, MatColumnDef, MatHeaderCellDef, MatCellDef, MatHeaderRowDef, MatRowDef, ɵangular_packages_forms_forms_y, NgControlStatusGroup, NgForm, MatEditLens, MatFormField, MatInput, NumberValueAccessor, DefaultValueAccessor, RequiredValidator, NgControlStatus, NgModel, MatHeaderCell, MatCell, MatEditOpen, MatPopoverEditTabOut, MatRowHoverContent, MatIcon, MatHeaderRow, MatRow], styles: [".example-table[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.example-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left;\n}\n\n.example-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%], .example-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  width: 25%;\n}"], changeDetection: 0 });
  /*@__PURE__*/ (function () { ɵsetClassMetadata(PopoverEditTabOutMatTableExample, [{
          type: Component,
          args: [{
                  selector: 'popover-edit-tab-out-mat-table-example',
                  styleUrls: ['popover-edit-tab-out-mat-table-example.css'],
                  templateUrl: 'popover-edit-tab-out-mat-table-example.html',
                  changeDetection: ChangeDetectionStrategy.OnPush,
              }]
      }], null, null); })();
  /**
   * Data source to provide what data should be rendered in the table. Note that the data source
   * can retrieve its data in any way. In this case, the data source is provided a reference
   * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
   * the underlying data. Instead, it only needs to take the data and send the table exactly what
   * should be rendered.
   */
  class ExampleDataSource$3 extends DataSource {
      constructor() {
          super(...arguments);
          /** Stream of data that is provided to the table. */
          this.data = new BehaviorSubject(ELEMENT_DATA$2);
      }
      /** Connect function called by the table to retrieve one stream containing the data to render. */
      connect() {
          return this.data;
      }
      disconnect() { }
  }
  
  const EXAMPLES = [
      PopoverEditCellSpanMatTableExample,
      PopoverEditMatTableExample,
      PopoverEditMatTableFlexExample,
      PopoverEditTabOutMatTableExample,
  ];
  class PopoverEditExamplesModule {
  }
  PopoverEditExamplesModule.ɵmod = ɵɵdefineNgModule({ type: PopoverEditExamplesModule });
  PopoverEditExamplesModule.ɵinj = ɵɵdefineInjector({ factory: function PopoverEditExamplesModule_Factory(t) { return new (t || PopoverEditExamplesModule)(); }, imports: [[
              CommonModule,
              MatButtonModule,
              MatCheckboxModule,
              MatIconModule,
              MatInputModule,
              MatListModule,
              MatPopoverEditModule,
              MatSnackBarModule,
              MatTableModule,
              FormsModule,
          ]] });
  (function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵɵsetNgModuleScope(PopoverEditExamplesModule, { declarations: [PopoverEditCellSpanMatTableExample,
          PopoverEditMatTableExample,
          PopoverEditMatTableFlexExample,
          PopoverEditTabOutMatTableExample], imports: [CommonModule,
          MatButtonModule,
          MatCheckboxModule,
          MatIconModule,
          MatInputModule,
          MatListModule,
          MatPopoverEditModule,
          MatSnackBarModule,
          MatTableModule,
          FormsModule], exports: [PopoverEditCellSpanMatTableExample,
          PopoverEditMatTableExample,
          PopoverEditMatTableFlexExample,
          PopoverEditTabOutMatTableExample] }); })();
  /*@__PURE__*/ (function () { ɵsetClassMetadata(PopoverEditExamplesModule, [{
          type: NgModule,
          args: [{
                  imports: [
                      CommonModule,
                      MatButtonModule,
                      MatCheckboxModule,
                      MatIconModule,
                      MatInputModule,
                      MatListModule,
                      MatPopoverEditModule,
                      MatSnackBarModule,
                      MatTableModule,
                      FormsModule,
                  ],
                  declarations: EXAMPLES,
                  exports: EXAMPLES,
                  entryComponents: EXAMPLES,
              }]
      }], null, null); })();
  
  /**
   * Generated bundle index. Do not edit.
   */
  
  export { PopoverEditCellSpanMatTableExample, PopoverEditExamplesModule, PopoverEditMatTableExample, PopoverEditMatTableFlexExample, PopoverEditTabOutMatTableExample };
  //# sourceMappingURL=popover-edit.js.map
  