{"__symbolic":"module","version":4,"metadata":{"TsCSVEntryModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":14,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":18,"character":4},{"__symbolic":"reference","module":"@terminus/ui/button","name":"TsButtonModule","line":19,"character":4},{"__symbolic":"reference","module":"@terminus/ui/icon-button","name":"TsIconButtonModule","line":20,"character":4},{"__symbolic":"reference","module":"@terminus/ui/icon","name":"TsIconModule","line":21,"character":4},{"__symbolic":"reference","module":"@terminus/ui/tooltip","name":"TsTooltipModule","line":22,"character":4}],"declarations":[{"__symbolic":"reference","name":"TsCSVEntryComponent"}],"exports":[{"__symbolic":"reference","name":"TsCSVEntryComponent"}]}]}],"members":{}},"TsCSVEntryRecord":{"__symbolic":"interface"},"TsCSVFormContents":{"__symbolic":"interface"},"TsCSVRequiredError":{"__symbolic":"interface"},"TsCSVUrlError":{"__symbolic":"interface"},"TsCSVFormError":{"__symbolic":"interface"},"TsCSVRow":{"__symbolic":"interface"},"TsCSVEntryComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":112,"character":1},"arguments":[{"selector":"ts-csv-entry","host":{"class":"ts-csv-entry","[class.c-csv-entry--full-width]":"fullWidth","[attr.id]":"id","$quoted$":["class","[class.c-csv-entry--full-width]","[attr.id]"]},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":121,"character":19},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":122,"character":17},"member":"None"},"exportAs":"tsCSVEntry","template":"<div class=\"c-csv-entry qa-csv-entry\">\n\n  <div class=\"c-csv-entry__info qa-csv-entry-info\">\n    {{ rows.length }} row{{ rows.length === 1 ? '' : 's' }}\n    <br>\n    {{ columnCount }} column{{ columnCount === 1 ? '' : 's' }}\n  </div>\n\n  <div class=\"c-csv-entry__scroll\">\n    <!-- NOTE: fxLayout cannot be defined on the scroll container -->\n    <div fxLayout=\"row\">\n\n      <!-- Column for delete buttons -->\n      <div fxLayout=\"column\">\n        <!-- Fake row for header -->\n        <div [style.height]=\"fakeRowHeight\" fxFlex=\"0 0 auto\"></div>\n\n        <div\n          class=\"c-csv-entry__column-id\"\n          [class.c-csv-entry__column-id--invalid]=\"row.invalid\"\n          [attr.id]=\"'csv-row-id-' + (idIndex + 1)\"\n          *ngFor=\"let row of rows?.controls; let idIndex = index\"\n          fxFlex=\"0 0 auto\"\n          fxLayout=\"row\"\n          fxLayoutAlign=\"center center\"\n        >\n          <span fxFlex>\n            {{ +row.controls?.recordId?.value + 1 }}\n          </span>\n        </div>\n      </div>\n\n      <!-- Content -->\n      <form\n        class=\"c-csv-entry__form\"\n        [formGroup]=\"recordsForm\"\n        fxFlex\n        #form\n        (mousewheel)=\"onScroll($event)\"\n      >\n\n        <!-- Header Cells -->\n        <div\n          class=\"c-csv-entry__row c-csv-entry__row--header qa-csv-entry-header-row\"\n          formArrayName=\"headers\"\n        >\n          <input\n            class=\"c-csv-entry__input c-csv-entry__input--header qa-csv-entry-header-cell\"\n            type=\"text\"\n            title=\"Header, Column: {{ getHeaderCellName(headerIndex) || headerIndex + 1 }}\"\n            [readonly]=\"(columnHeaders && columnHeaders[headerIndex])\"\n            *ngFor=\"let c of headerCells?.controls; let headerIndex = index\"\n            [attr.id]=\"createId(-1, headerIndex)\"\n            [formControlName]=\"headerIndex\"\n            (paste)=\"onPaste($event, true)\"\n            (keydown.enter)=\"selectCellInNextRow(createId(-1, headerIndex))\"\n            (keydown.tab)=\"selectAdjacentCell($event, createId(-1, headerIndex))\"\n            (keydown.shift.tab)=\"selectAdjacentCell($event, createId(-1, headerIndex), true)\"\n          >\n        </div>\n\n\n        <!-- Body Rows -->\n        <div formArrayName=\"records\">\n          <div\n            class=\"c-csv-entry__row qa-csv-entry-row\"\n            *ngFor=\"let record of rows?.controls; let recordIndex = index\"\n            [formGroupName]=\"recordIndex\"\n          >\n            <div\n              formArrayName=\"columns\"\n            >\n              <input\n                *ngFor=\"let c of getColumns(record)?.controls; let columnIndex = index\"\n                class=\"c-csv-entry__input qa-csv-entry-cell\"\n                [class.c-csv-entry__input--invalid]=\"c.invalid\"\n                type=\"text\"\n                title=\"Row: {{ record.controls?.recordId?.value + 1 }}, Column: {{ getHeaderCellName(columnIndex) || columnIndex + 1 }}\"\n                [attr.id]=\"createId(recordIndex, columnIndex)\"\n                [formControlName]=\"columnIndex\"\n                (paste)=\"onPaste($event)\"\n                (keydown.enter)=\"selectCellInNextRow(createId(recordIndex, columnIndex))\"\n                (keydown.shift.enter)=\"selectCellInNextRow(createId(recordIndex, columnIndex), true)\"\n                (keyup)=\"updateErrors()\"\n                (keydown.tab)=\"selectAdjacentCell($event, createId(recordIndex, columnIndex))\"\n                (keydown.shift.tab)=\"selectAdjacentCell($event, createId(recordIndex, columnIndex), true)\"\n              >\n            </div>\n          </div>\n        </div>\n      </form>\n\n\n      <!-- Column for delete buttons -->\n      <div fxLayout=\"column\">\n        <!-- Fake row for header -->\n        <div [style.height]=\"fakeRowHeight\"  fxFlex=\"0 0 auto\"></div>\n\n        <ts-icon-button\n          class=\"c-csv-entry__delete qa-csv-entry-delete\"\n          [attr.id]=\"'csv-delete-' + (deleteIndex + 1)\"\n          [attr.title]=\"'Delete row ' + (deleteIndex + 1)\"\n          *ngFor=\"let row of rows?.controls; let deleteIndex = index;\"\n          (click)=\"deleteRow(deleteIndex)\"\n          fxFlex=\"noshrink\"\n        >delete_forever</ts-icon-button>\n      </div>\n\n    </div>\n  </div>\n\n\n  <!-- Validation messages -->\n  <div\n    class=\"c-csv-entry__messages\"\n    fxLayout=\"column\"\n    fxLayoutAlign=\"start stretch\"\n    [fxLayoutGap]=\"layoutGap\"\n  >\n    <div fxLayout=\"column\" fxLayoutAlign=\"center end\">\n      <div\n        class=\"c-csv-entry__message qa-csv-entry-message\"\n        *ngFor=\"let message of validationMessages; let i = index\"\n        [innerHTML]=\"message\"\n      ></div>\n      <div\n        class=\"c-csv-entry__message qa-csv-entry-message\"\n        *ngIf=\"tooManyRowsMessage\"\n      >{{ tooManyRowsMessage }}</div>\n    </div>\n\n    <div fxLayout=\"row\" [dir]=\"footerDirection\" fxLayoutAlign=\"space-between center\" [fxLayoutGap]=\"layoutGap\">\n      <div dir=\"ltr\" fxLayoutGap=\"1em\">\n        <ts-button\n          id=\"ts-csv-reset\"\n          class=\"qa-csv-entry-reset\"\n          format=\"hollow\"\n          theme=\"warn\"\n          (clicked)=\"resetTable()\"\n        >Reset Table</ts-button>\n\n        <ts-button\n          id=\"ts-csv-add-row\"\n          class=\"qa-csv-entry-add-row\"\n          format=\"hollow\"\n          (clicked)=\"addRows()\"\n        >Add Row</ts-button>\n      </div>\n\n      <span fxFlex></span>\n\n      <div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n","styles":[".ts-csv-entry{display:inline-block;font-size:16px;max-width:100%}.ts-csv-entry.c-csv-entry--full-width{display:block;width:100%}.ts-csv-entry.c-csv-entry--full-width .c-csv-entry__row{display:block}.ts-csv-entry.c-csv-entry--full-width .c-csv-entry__input{width:100%}.c-csv-entry{--csv-row-height:39px;--csv-cell-padding:8px;--csv-external-row-height:35px}.c-csv-entry .c-csv-entry__scroll{max-height:28.5em;overflow-x:-moz-hidden-unscrollable;overflow-y:auto}.c-csv-entry .c-csv-entry__info{font-family:Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.02em;line-height:1.2em;margin-bottom:4px;margin-right:40px;text-align:right}.c-csv-entry .c-csv-entry__form{border:1px solid #cecdd1;overflow-x:auto}.c-csv-entry .c-csv-entry__row{display:table-row;white-space:nowrap}.c-csv-entry .c-csv-entry__input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid #cecdd1;display:table-cell;font-size:inherit;min-width:72px;padding:var(--csv-cell-padding)}.c-csv-entry .c-csv-entry__input+.c-csv-entry__input{border-left-width:0}.c-csv-entry .c-csv-entry__input:first-of-type{border-left:0}.c-csv-entry .c-csv-entry__input:last-of-type{border-right:0}.c-csv-entry .c-csv-entry__input:focus{background-color:#d3eaf9}.c-csv-entry .c-csv-entry__input--header{border-bottom-width:3px;border-top:0}.c-csv-entry .c-csv-entry__input--invalid{color:#c8604d}.c-csv-entry .c-csv-entry__delete{max-height:var(--csv-external-row-height)}.c-csv-entry .c-csv-entry__delete .ts-icon-button{color:#cecdd1}.c-csv-entry .c-csv-entry__column-id{font-family:Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.02em;color:#cecdd1;max-height:var(--csv-external-row-height);padding:var(--csv-cell-padding)}.c-csv-entry .c-csv-entry__column-id--invalid{color:#c8604d;font-weight:400}.c-csv-entry .c-csv-entry__messages{font-family:Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:75%;font-weight:400;letter-spacing:.01em;color:#c8604d;line-height:1.2em;margin-left:15px;margin-right:40px;padding-top:4px}.c-csv-entry__row:not(.c-csv-entry__row--header):not(:last-child) .c-csv-entry__input{border-bottom-width:0}"]}]}],"members":{"columnCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":184,"character":3}}]}],"columnHeaders":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":198,"character":3}}]}],"columnValidators":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":214,"character":3}}]}],"footerDirection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":230,"character":3}}]}],"fullWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":236,"character":3}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":244,"character":3}}]}],"maxRows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":258,"character":3}}]}],"outputFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":270,"character":3}}]}],"rowCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":278,"character":3}}]}],"blobGenerated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":290,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":295,"character":25},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":296,"character":31},{"__symbolic":"reference","module":"@terminus/ngx-tools/browser","name":"TsDocumentService","line":297,"character":29}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"addRows":[{"__symbolic":"method"}],"getColumns":[{"__symbolic":"method"}],"updateAllRowIds":[{"__symbolic":"method"}],"onPaste":[{"__symbolic":"method"}],"updateErrors":[{"__symbolic":"method"}],"getHeaderCellName":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}],"selectCellInNextRow":[{"__symbolic":"method"}],"selectAdjacentCell":[{"__symbolic":"method"}],"createId":[{"__symbolic":"method"}],"collectErrors":[{"__symbolic":"method"}],"deleteRow":[{"__symbolic":"method"}],"resetTable":[{"__symbolic":"method"}],"getFormErrors":[{"__symbolic":"method"}],"getAllErrors":[{"__symbolic":"method"}],"clearAllRows":[{"__symbolic":"method"}],"clearHeaderCells":[{"__symbolic":"method"}],"addHeaders":[{"__symbolic":"method"}],"createRow":[{"__symbolic":"method"}],"createColumns":[{"__symbolic":"method"}],"generateBlob":[{"__symbolic":"method"}]}}},"origins":{"TsCSVEntryModule":"./csv-entry.module","TsCSVEntryRecord":"./csv-entry.component","TsCSVFormContents":"./csv-entry.component","TsCSVRequiredError":"./csv-entry.component","TsCSVUrlError":"./csv-entry.component","TsCSVFormError":"./csv-entry.component","TsCSVRow":"./csv-entry.component","TsCSVEntryComponent":"./csv-entry.component"},"importAs":"@terminus/ui/csv-entry"}