[{"__symbolic":"module","version":3,"metadata":{"SkyLinkRecordsItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-link-records-item","template":"<div *ngIf=\"record.status == STATUSES.Suggested || record.status == STATUSES.Selected\" class=\"link-records-item-info\">\n  {{'link_records_item_info_match' | skyResources}}\n</div>\n<div *ngIf=\"record.status == STATUSES.Linked\" class=\"link-records-item-info\">\n  {{'link_records_item_info_linked' | skyResources}}\n</div>\n<div *ngIf=\"record.status == STATUSES.NoMatch\" class=\"link-records-item-info\">\n  {{'link_records_item_info_no_match' | skyResources}}\n</div>\n<div *ngIf=\"record.status == STATUSES.Created\" class=\"link-records-item-info\">\n  {{'link_records_item_info_created' | skyResources}}\n</div>\n<div *ngIf=\"record.status == STATUSES.Edit\" class=\"link-records-item-info\">\n  {{'link_records_item_info_edit' | skyResources}}\n</div>\n<div class=\"link-records-item\">\n  <div class=\"link-records-item-original sky-shadow\">\n    <div class=\"link-records-item-header\">\n      <sky-link-records-renderer [item]=\"record.item\" [match]=\"record.match\" [fields]=\"record.matchFields\" [template]=\"itemTitleTemplate || defaultItemTitleTemplate\"></sky-link-records-renderer>\n    </div>\n    <sky-link-records-renderer *ngIf=\"record.status != STATUSES.Edit\" class=\"link-records-item-content\" [item]=\"record.item\" [match]=\"record.match\" [fields]=\"record.matchFields\" [template]=\"itemTemplate || defaultItemTemplate\"></sky-link-records-renderer>\n    <sky-link-records-item-diff *ngIf=\"record.status == STATUSES.Edit\" [key]=\"record.key\" [item]=\"record.item\" [match]=\"record.match\" [fields]=\"record.matchFields\" [readOnly]=\"true\"  [showNewFieldValues]=\"showNewFieldValues\" class=\"link-records-item-content\">\n    </sky-link-records-item-diff>\n    <div class=\"link-records-item-footer\"></div>\n  </div>\n  <div class=\"link-records-item-status\">\n    <div class=\"link-records-item-status-content\"><i class=\"fa\"\n      [class.fa-check]=\"record.status == STATUSES.Linked\"\n      [class.fa-pencil]=\"record.status == STATUSES.Edit\"\n      [class.fa-plus-circle]=\"record.status == STATUSES.Created\"\n      [class.fa-question-circle]=\"record.status == STATUSES.Suggested || record.status == STATUSES.NoMatch || record.status == STATUSES.Selected\"\n    ></i></div>\n  </div>\n  <div class=\"link-records-item-match sky-shadow\">\n    <div class=\"link-records-item-header\">\n      <div *ngIf=\"record.status == STATUSES.Created\">\n          {{'link_records_item_header_created' | skyResources}}\n      </div>\n      <div *ngIf=\"record.status == STATUSES.NoMatch\">\n          {{'link_records_item_header_no_match' | skyResources}}\n      </div>\n      <div *ngIf=\"record.status == STATUSES.Suggested || record.status == STATUSES.Selected || record.status == STATUSES.Linked || record.status == STATUSES.Edit\">\n          {{'link_records_item_header_match' | skyResources}}\n      </div>\n    </div>\n    <sky-link-records-renderer *ngIf=\"record.status != STATUSES.Edit && record.status != STATUSES.NoMatch && record.status != STATUSES.Selected\" class=\"link-records-item-content\" [item]=\"record.item\" [match]=\"record.match\" [fields]=\"record.matchFields\" [template]=\"matchTemplate || defaultMatchTemplateContent\"></sky-link-records-renderer>\n    <sky-link-records-renderer *ngIf=\"record.status == STATUSES.NoMatch || record.status == STATUSES.Selected\" class=\"link-records-item-content\" [item]=\"record.item\" [match]=\"record.match\" [fields]=\"record.matchFields\" [template]=\"noMatchTemplate || defaultNoMatchTemplateContent\"></sky-link-records-renderer>\n    <sky-link-records-item-diff *ngIf=\"record.status == STATUSES.Edit\" [key]=\"record.key\" [item]=\"record.item\" [match]=\"record.match\" [fields]=\"record.matchFields\" [selectedByDefault]=\"selectedByDefault\" [showNewFieldValues]=\"showNewFieldValues\" class=\"link-records-item-content\"></sky-link-records-item-diff>\n    <div class=\"link-records-item-footer\">\n      <button *ngIf=\"record.status == STATUSES.Suggested || record.status == STATUSES.Selected\" (click)=\"edit()\" class=\"sky-btn sky-btn-primary\">\n          {{'link_records_item_footer_link' | skyResources}}\n      </button>\n      <button *ngIf=\"record.status == STATUSES.Suggested || record.status == STATUSES.Selected\" (click)=\"unlink()\" class=\"sky-btn sky-btn-default\">\n          {{'link_records_item_footer_search' | skyResources}}\n      </button>\n      <button *ngIf=\"record.status == STATUSES.Linked || record.status == STATUSES.Created\" (click)=\"unlink()\" class=\"sky-btn sky-btn-link\">\n          {{'link_records_item_footer_unlink' | skyResources}}\n      </button>\n      <button *ngIf=\"record.status == STATUSES.NoMatch\" (click)=\"create()\" class=\"sky-btn sky-btn-default\">\n          {{'link_records_item_footer_create' | skyResources}}\n      </button>\n      <button *ngIf=\"record.status == STATUSES.Edit\" (click)=\"link()\" class=\"sky-btn sky-btn-primary\">\n        {{ (updatedFieldsTotal | async) > 0 ? ('link_records_item_footer_link_with_updating' | skyResources) + ' (' + (updatedFieldsTotal | async) + ')' : ('link_records_item_footer_link_without_updating' | skyResources) }}\n      </button>\n      <button *ngIf=\"record.status == STATUSES.Edit\" (click)=\"cancelEdit()\" class=\"sky-btn sky-btn-link\">\n          {{'link_records_item_footer_cancel' | skyResources}}\n      </button>\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultItemTitleTemplate let-item=\"item\">\n  {{'link_records_item_title_default' | skyResources}}\n</ng-template>\n<ng-template #defaultItemTemplate let-item=\"item\">\n  {{ item?.id }}\n</ng-template>\n<ng-template #defaultMatchTemplateContent let-match=\"match\">\n  {{ match?.item?.id}}\n</ng-template>\n<ng-template #defaultNoMatchTemplateContent let-match=\"match\">\n    {{'link_records_item_content_no_match' | skyResources}}\n</ng-template>\n","styles":[".sky-btn {\n  background-color: transparent;\n  border-top: 1px solid #cdcfd2;\n  border-bottom: 1px solid #cdcfd2;\n  border-left: 1px solid #cdcfd2;\n  border-right: 1px solid #cdcfd2;\n  border-radius: 3px;\n  color: #282b31;\n  cursor: pointer;\n  display: inline-block;\n  white-space: nowrap;\n  padding: 6px 12px;\n  line-height: 1.42857;\n  font-size: 15px;\n}\n\n.sky-btn:hover {\n  border-top: 1px solid #e2e3e4;\n  border-bottom: 1px solid #e2e3e4;\n  border-left: 1px solid #e2e3e4;\n  border-right: 1px solid #e2e3e4;\n  color: #282b31;\n}\n\n.sky-btn.sky-btn-disabled, .sky-btn[disabled] {\n  cursor: not-allowed;\n  pointer-events: none;\n  opacity: .65;\n  box-shadow: none;\n}\n\n.sky-btn-default {\n  color: #282b31;\n  background-color: #ffffff;\n  border-color: #cdcfd2;\n}\n\n.sky-btn-default:hover, .sky-btn-default:active, .sky-btn-default.sky-btn-active {\n  color: #282b31;\n  background-color: #eeeeef;\n  border-color: #b2b5ba;\n}\n\n.sky-btn-default:active, .sky-btn-default.sky-btn-active {\n  background-image: none;\n}\n\n.sky-btn-default.sky-btn-disabled, .sky-btn-default.sky-btn-disabled:hover, .sky-btn-default.sky-btn-disabled:focus, .sky-btn-default.sky-btn-disabled.sky-btn-focus, .sky-btn-default.sky-btn-disabled:active, .sky-btn-default.sky-btn-disabled.sky-btn-active, .sky-btn-default[disabled], .sky-btn-default[disabled]:hover, .sky-btn-default[disabled]:focus, .sky-btn-default[disabled].sky-btn-focus, .sky-btn-default[disabled]:active, .sky-btn-default[disabled].sky-btn-active,\nfieldset[disabled] .sky-btn-default,\nfieldset[disabled] .sky-btn-default:hover,\nfieldset[disabled] .sky-btn-default:focus,\nfieldset[disabled] .sky-btn-default.sky-btn-focus,\nfieldset[disabled] .sky-btn-default:active,\nfieldset[disabled] .sky-btn-default.sky-btn-active {\n  background-color: #ffffff;\n  border-color: #cdcfd2;\n}\n\n.sky-btn-primary {\n  color: #ffffff;\n  background-color: #007ca6;\n  border-color: #007ca6;\n}\n\n.sky-btn-primary:hover, .sky-btn-primary:active, .sky-btn-primary.sky-btn-active {\n  color: #ffffff;\n  background-color: #005673;\n  border-color: #005673;\n}\n\n.sky-btn-primary:active, .sky-btn-primary.sky-btn-active {\n  background-image: none;\n}\n\n.sky-btn-primary.sky-btn-disabled, .sky-btn-primary.sky-btn-disabled:hover, .sky-btn-primary.sky-btn-disabled:focus, .sky-btn-primary.sky-btn-disabled.sky-btn-focus, .sky-btn-primary.sky-btn-disabled:active, .sky-btn-primary.sky-btn-disabled.sky-btn-active, .sky-btn-primary[disabled], .sky-btn-primary[disabled]:hover, .sky-btn-primary[disabled]:focus, .sky-btn-primary[disabled].sky-btn-focus, .sky-btn-primary[disabled]:active, .sky-btn-primary[disabled].sky-btn-active,\nfieldset[disabled] .sky-btn-primary,\nfieldset[disabled] .sky-btn-primary:hover,\nfieldset[disabled] .sky-btn-primary:focus,\nfieldset[disabled] .sky-btn-primary.sky-btn-focus,\nfieldset[disabled] .sky-btn-primary:active,\nfieldset[disabled] .sky-btn-primary.sky-btn-active {\n  background-color: #007ca6;\n  border-color: #007ca6;\n}\n\n.sky-btn-link, .sky-btn-link-inline {\n  color: #007ca6;\n  background-color: transparent;\n  border-color: transparent;\n}\n\n.sky-btn-link:hover, .sky-btn-link-inline:hover {\n  color: #005673;\n  background-color: transparent;\n  border-color: transparent;\n  text-decoration: underline;\n  outline: none;\n}\n\n.sky-btn-link-inline {\n  font-size: inherit;\n  line-height: inherit;\n  display: inline;\n  padding: 0;\n  border: none;\n  vertical-align: top;\n}\n\n.sky-btn-link-inline:hover {\n  border: none;\n}\n\n.sky-btn-sm {\n  padding: 5px 10px;\n  font-size: 12px;\n  line-height: 1.5;\n}\n\n.sky-btn.sky-btn-active {\n  outline: 0;\n  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n}\n\n.sky-btn-tab {\n  background-color: transparent;\n  border: none;\n  border-radius: 4px 4px 0 0;\n  color: #686c73;\n  cursor: pointer;\n  display: inline-block;\n  font-weight: 600;\n  line-height: 1.8;\n  padding: 8px 16px;\n}\n\n.sky-btn-tab:hover {\n  background-color: #eeeeef;\n  color: #282b31;\n  text-decoration: none;\n}\n\n.sky-btn-tab-close {\n  background-color: transparent;\n  border: none;\n  color: #686c73;\n  cursor: pointer;\n  line-height: 1.4;\n  margin-left: 5px;\n}\n\n.sky-btn-tab-close:hover {\n  color: #282b31;\n  transition: color 150ms;\n}\n\n.sky-tab-header-count {\n  font-weight: 400;\n  color: #007ca6;\n  margin-left: 5px;\n}\n\n.sky-btn-tab-selected {\n  background-color: #007ca6;\n  color: #fff;\n}\n\n.sky-btn-tab-selected:hover {\n  background-color: #007ca6;\n  color: #fff;\n}\n\n.sky-btn-tab-selected .sky-btn-tab-close, .sky-btn-tab-selected .sky-tab-header-count {\n  color: #fff;\n}\n\n.sky-btn-tab-wizard {\n  background-color: #ffffff;\n  border-top: 1px solid #e2e3e4;\n  border-bottom: 1px solid #e2e3e4;\n  border-left: 1px solid #e2e3e4;\n  border-right: 1px solid #e2e3e4;\n  border-radius: 3px;\n  font-weight: 400;\n  color: #282b31;\n  line-height: 1.6em;\n  margin-right: 5px;\n  padding-bottom: 5px;\n  padding-top: 5px;\n}\n\n.sky-btn-tab-wizard:hover, .sky-btn-tab-wizard:focus {\n  text-decoration: none;\n  color: #282b31;\n  background-color: #eeeeef;\n}\n\n.sky-btn-tab-wizard.sky-btn-tab-selected {\n  background-color: #81d4f7;\n  border-color: #81d4f7;\n  color: #282b31;\n}\n\n.sky-btn-tab-wizard.sky-btn-tab-disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n  background-color: #eeeeef;\n  color: #686c73;\n  box-shadow: none;\n}\n\n:host {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  width: 710px;\n}\n\n:host .link-records-item-info {\n  font-family: \"Blackbaud Sans\", \"Helvetica Neue\", Arial, sans-serif;\n  color: #282b31;\n  font-weight: 600;\n  font-size: 16px;\n  text-align: center;\n}\n\n:host .link-records-item {\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  justify-content: center;\n  margin: 10px 0 40px;\n}\n\n:host .link-records-item-original,\n:host .link-records-item-match {\n  border-top: 1px solid #e2e3e4;\n  border-bottom: 1px solid #e2e3e4;\n  border-right: 1px solid #e2e3e4;\n  border-left: 1px solid #e2e3e4;\n  background-color: #ffffff;\n  display: flex;\n  flex-direction: column;\n  min-height: 200px;\n  width: 350px;\n}\n\n:host .link-records-item-original .link-records-item-content,\n:host .link-records-item-match .link-records-item-content {\n  flex-grow: 1;\n  padding: 10px 20px 10px 25px;\n  word-break: break-all;\n}\n\n:host .link-records-item-original .link-records-item-header,\n:host .link-records-item-original .link-records-item-footer,\n:host .link-records-item-match .link-records-item-header,\n:host .link-records-item-match .link-records-item-footer {\n  display: flex;\n  flex-direction: row;\n  min-height: 48px;\n}\n\n:host .link-records-item-original .link-records-item-header,\n:host .link-records-item-match .link-records-item-header {\n  border-bottom: 1px solid #e2e3e4;\n  font-family: \"Blackbaud Sans\", \"Helvetica Neue\", Arial, sans-serif;\n  color: #686c73;\n  font-weight: 300;\n  font-size: 19px;\n  padding: 10px;\n}\n\n:host .link-records-item-original .link-records-item-footer,\n:host .link-records-item-match .link-records-item-footer {\n  border-top: 1px solid #e2e3e4;\n  padding: 7px 10px;\n}\n\n:host .link-records-item-original .link-records-item-footer button.sky-btn:not(:first-child),\n:host .link-records-item-match .link-records-item-footer button.sky-btn:not(:first-child) {\n  margin-left: 10px;\n}\n\n:host .link-records-item-original .link-records-item-footer button.sky-btn.sky-btn-link, :host .link-records-item-original .link-records-item-footer button.sky-btn.sky-btn-link-inline,\n:host .link-records-item-match .link-records-item-footer button.sky-btn.sky-btn-link,\n:host .link-records-item-match .link-records-item-footer button.sky-btn.sky-btn-link-inline {\n  margin-left: 0;\n}\n\n:host .link-records-item-original .link-records-item-footer button.sky-btn.sky-btn-link:first-child, :host .link-records-item-original .link-records-item-footer button.sky-btn.sky-btn-link-inline:first-child,\n:host .link-records-item-match .link-records-item-footer button.sky-btn.sky-btn-link:first-child,\n:host .link-records-item-match .link-records-item-footer button.sky-btn.sky-btn-link-inline:first-child {\n  margin-left: -10px;\n}\n\n:host .link-records-item-status {\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  flex-direction: row;\n}\n\n:host .link-records-item-status-content {\n  border-top: 1px solid #e2e3e4;\n  border-bottom: 1px solid #e2e3e4;\n  border-right: 1px solid #e2e3e4;\n  border-left: 1px solid #e2e3e4;\n  background-color: #ffffff;\n  border-radius: 22px;\n  height: 45px;\n  margin: -18px;\n  text-align: center;\n  width: 45px;\n  z-index: 1;\n}\n\n:host .link-records-item-status-content i {\n  color: #71bf43;\n  font-size: 29px;\n  margin: 7px 0 0;\n}\n\n:host .link-records-item-status-content i.fa-question-circle, :host .link-records-item-status-content i.fa-pencil {\n  color: #fbb034;\n}\n\n@media (max-width: 768px) {\n  :host {\n    width: 350px;\n  }\n  :host .link-records-item {\n    flex-direction: column;\n  }\n}\n"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"record":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"matchTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"noMatchTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemTitleTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedByDefault":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showNewFieldValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"viewItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":[{"__symbolic":"reference","module":"./link-records-item-diff.component","name":"SkyLinkRecordsItemDiffComponent"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./state","name":"SkyLinkRecordsState"},{"__symbolic":"reference","module":"./state","name":"SkyLinkRecordsStateDispatcher"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"link":[{"__symbolic":"method"}],"unlink":[{"__symbolic":"method"}],"create":[{"__symbolic":"method"}],"edit":[{"__symbolic":"method"}],"cancelEdit":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SkyLinkRecordsItemComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-link-records-item","template":"<div *ngIf=\"record.status == STATUSES.Suggested || record.status == STATUSES.Selected\" class=\"link-records-item-info\">\n  {{'link_records_item_info_match' | skyResources}}\n</div>\n<div *ngIf=\"record.status == STATUSES.Linked\" class=\"link-records-item-info\">\n  {{'link_records_item_info_linked' | skyResources}}\n</div>\n<div *ngIf=\"record.status == STATUSES.NoMatch\" class=\"link-records-item-info\">\n  {{'link_records_item_info_no_match' | skyResources}}\n</div>\n<div *ngIf=\"record.status == STATUSES.Created\" class=\"link-records-item-info\">\n  {{'link_records_item_info_created' | skyResources}}\n</div>\n<div *ngIf=\"record.status == STATUSES.Edit\" class=\"link-records-item-info\">\n  {{'link_records_item_info_edit' | skyResources}}\n</div>\n<div class=\"link-records-item\">\n  <div class=\"link-records-item-original sky-shadow\">\n    <div class=\"link-records-item-header\">\n      <sky-link-records-renderer [item]=\"record.item\" [match]=\"record.match\" [fields]=\"record.matchFields\" [template]=\"itemTitleTemplate || defaultItemTitleTemplate\"></sky-link-records-renderer>\n    </div>\n    <sky-link-records-renderer *ngIf=\"record.status != STATUSES.Edit\" class=\"link-records-item-content\" [item]=\"record.item\" [match]=\"record.match\" [fields]=\"record.matchFields\" [template]=\"itemTemplate || defaultItemTemplate\"></sky-link-records-renderer>\n    <sky-link-records-item-diff *ngIf=\"record.status == STATUSES.Edit\" [key]=\"record.key\" [item]=\"record.item\" [match]=\"record.match\" [fields]=\"record.matchFields\" [readOnly]=\"true\"  [showNewFieldValues]=\"showNewFieldValues\" class=\"link-records-item-content\">\n    </sky-link-records-item-diff>\n    <div class=\"link-records-item-footer\"></div>\n  </div>\n  <div class=\"link-records-item-status\">\n    <div class=\"link-records-item-status-content\"><i class=\"fa\"\n      [class.fa-check]=\"record.status == STATUSES.Linked\"\n      [class.fa-pencil]=\"record.status == STATUSES.Edit\"\n      [class.fa-plus-circle]=\"record.status == STATUSES.Created\"\n      [class.fa-question-circle]=\"record.status == STATUSES.Suggested || record.status == STATUSES.NoMatch || record.status == STATUSES.Selected\"\n    ></i></div>\n  </div>\n  <div class=\"link-records-item-match sky-shadow\">\n    <div class=\"link-records-item-header\">\n      <div *ngIf=\"record.status == STATUSES.Created\">\n          {{'link_records_item_header_created' | skyResources}}\n      </div>\n      <div *ngIf=\"record.status == STATUSES.NoMatch\">\n          {{'link_records_item_header_no_match' | skyResources}}\n      </div>\n      <div *ngIf=\"record.status == STATUSES.Suggested || record.status == STATUSES.Selected || record.status == STATUSES.Linked || record.status == STATUSES.Edit\">\n          {{'link_records_item_header_match' | skyResources}}\n      </div>\n    </div>\n    <sky-link-records-renderer *ngIf=\"record.status != STATUSES.Edit && record.status != STATUSES.NoMatch && record.status != STATUSES.Selected\" class=\"link-records-item-content\" [item]=\"record.item\" [match]=\"record.match\" [fields]=\"record.matchFields\" [template]=\"matchTemplate || defaultMatchTemplateContent\"></sky-link-records-renderer>\n    <sky-link-records-renderer *ngIf=\"record.status == STATUSES.NoMatch || record.status == STATUSES.Selected\" class=\"link-records-item-content\" [item]=\"record.item\" [match]=\"record.match\" [fields]=\"record.matchFields\" [template]=\"noMatchTemplate || defaultNoMatchTemplateContent\"></sky-link-records-renderer>\n    <sky-link-records-item-diff *ngIf=\"record.status == STATUSES.Edit\" [key]=\"record.key\" [item]=\"record.item\" [match]=\"record.match\" [fields]=\"record.matchFields\" [selectedByDefault]=\"selectedByDefault\" [showNewFieldValues]=\"showNewFieldValues\" class=\"link-records-item-content\"></sky-link-records-item-diff>\n    <div class=\"link-records-item-footer\">\n      <button *ngIf=\"record.status == STATUSES.Suggested || record.status == STATUSES.Selected\" (click)=\"edit()\" class=\"sky-btn sky-btn-primary\">\n          {{'link_records_item_footer_link' | skyResources}}\n      </button>\n      <button *ngIf=\"record.status == STATUSES.Suggested || record.status == STATUSES.Selected\" (click)=\"unlink()\" class=\"sky-btn sky-btn-default\">\n          {{'link_records_item_footer_search' | skyResources}}\n      </button>\n      <button *ngIf=\"record.status == STATUSES.Linked || record.status == STATUSES.Created\" (click)=\"unlink()\" class=\"sky-btn sky-btn-link\">\n          {{'link_records_item_footer_unlink' | skyResources}}\n      </button>\n      <button *ngIf=\"record.status == STATUSES.NoMatch\" (click)=\"create()\" class=\"sky-btn sky-btn-default\">\n          {{'link_records_item_footer_create' | skyResources}}\n      </button>\n      <button *ngIf=\"record.status == STATUSES.Edit\" (click)=\"link()\" class=\"sky-btn sky-btn-primary\">\n        {{ (updatedFieldsTotal | async) > 0 ? ('link_records_item_footer_link_with_updating' | skyResources) + ' (' + (updatedFieldsTotal | async) + ')' : ('link_records_item_footer_link_without_updating' | skyResources) }}\n      </button>\n      <button *ngIf=\"record.status == STATUSES.Edit\" (click)=\"cancelEdit()\" class=\"sky-btn sky-btn-link\">\n          {{'link_records_item_footer_cancel' | skyResources}}\n      </button>\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultItemTitleTemplate let-item=\"item\">\n  {{'link_records_item_title_default' | skyResources}}\n</ng-template>\n<ng-template #defaultItemTemplate let-item=\"item\">\n  {{ item?.id }}\n</ng-template>\n<ng-template #defaultMatchTemplateContent let-match=\"match\">\n  {{ match?.item?.id}}\n</ng-template>\n<ng-template #defaultNoMatchTemplateContent let-match=\"match\">\n    {{'link_records_item_content_no_match' | skyResources}}\n</ng-template>\n","styles":[".sky-btn {\n  background-color: transparent;\n  border-top: 1px solid #cdcfd2;\n  border-bottom: 1px solid #cdcfd2;\n  border-left: 1px solid #cdcfd2;\n  border-right: 1px solid #cdcfd2;\n  border-radius: 3px;\n  color: #282b31;\n  cursor: pointer;\n  display: inline-block;\n  white-space: nowrap;\n  padding: 6px 12px;\n  line-height: 1.42857;\n  font-size: 15px;\n}\n\n.sky-btn:hover {\n  border-top: 1px solid #e2e3e4;\n  border-bottom: 1px solid #e2e3e4;\n  border-left: 1px solid #e2e3e4;\n  border-right: 1px solid #e2e3e4;\n  color: #282b31;\n}\n\n.sky-btn.sky-btn-disabled, .sky-btn[disabled] {\n  cursor: not-allowed;\n  pointer-events: none;\n  opacity: .65;\n  box-shadow: none;\n}\n\n.sky-btn-default {\n  color: #282b31;\n  background-color: #ffffff;\n  border-color: #cdcfd2;\n}\n\n.sky-btn-default:hover, .sky-btn-default:active, .sky-btn-default.sky-btn-active {\n  color: #282b31;\n  background-color: #eeeeef;\n  border-color: #b2b5ba;\n}\n\n.sky-btn-default:active, .sky-btn-default.sky-btn-active {\n  background-image: none;\n}\n\n.sky-btn-default.sky-btn-disabled, .sky-btn-default.sky-btn-disabled:hover, .sky-btn-default.sky-btn-disabled:focus, .sky-btn-default.sky-btn-disabled.sky-btn-focus, .sky-btn-default.sky-btn-disabled:active, .sky-btn-default.sky-btn-disabled.sky-btn-active, .sky-btn-default[disabled], .sky-btn-default[disabled]:hover, .sky-btn-default[disabled]:focus, .sky-btn-default[disabled].sky-btn-focus, .sky-btn-default[disabled]:active, .sky-btn-default[disabled].sky-btn-active,\nfieldset[disabled] .sky-btn-default,\nfieldset[disabled] .sky-btn-default:hover,\nfieldset[disabled] .sky-btn-default:focus,\nfieldset[disabled] .sky-btn-default.sky-btn-focus,\nfieldset[disabled] .sky-btn-default:active,\nfieldset[disabled] .sky-btn-default.sky-btn-active {\n  background-color: #ffffff;\n  border-color: #cdcfd2;\n}\n\n.sky-btn-primary {\n  color: #ffffff;\n  background-color: #007ca6;\n  border-color: #007ca6;\n}\n\n.sky-btn-primary:hover, .sky-btn-primary:active, .sky-btn-primary.sky-btn-active {\n  color: #ffffff;\n  background-color: #005673;\n  border-color: #005673;\n}\n\n.sky-btn-primary:active, .sky-btn-primary.sky-btn-active {\n  background-image: none;\n}\n\n.sky-btn-primary.sky-btn-disabled, .sky-btn-primary.sky-btn-disabled:hover, .sky-btn-primary.sky-btn-disabled:focus, .sky-btn-primary.sky-btn-disabled.sky-btn-focus, .sky-btn-primary.sky-btn-disabled:active, .sky-btn-primary.sky-btn-disabled.sky-btn-active, .sky-btn-primary[disabled], .sky-btn-primary[disabled]:hover, .sky-btn-primary[disabled]:focus, .sky-btn-primary[disabled].sky-btn-focus, .sky-btn-primary[disabled]:active, .sky-btn-primary[disabled].sky-btn-active,\nfieldset[disabled] .sky-btn-primary,\nfieldset[disabled] .sky-btn-primary:hover,\nfieldset[disabled] .sky-btn-primary:focus,\nfieldset[disabled] .sky-btn-primary.sky-btn-focus,\nfieldset[disabled] .sky-btn-primary:active,\nfieldset[disabled] .sky-btn-primary.sky-btn-active {\n  background-color: #007ca6;\n  border-color: #007ca6;\n}\n\n.sky-btn-link, .sky-btn-link-inline {\n  color: #007ca6;\n  background-color: transparent;\n  border-color: transparent;\n}\n\n.sky-btn-link:hover, .sky-btn-link-inline:hover {\n  color: #005673;\n  background-color: transparent;\n  border-color: transparent;\n  text-decoration: underline;\n  outline: none;\n}\n\n.sky-btn-link-inline {\n  font-size: inherit;\n  line-height: inherit;\n  display: inline;\n  padding: 0;\n  border: none;\n  vertical-align: top;\n}\n\n.sky-btn-link-inline:hover {\n  border: none;\n}\n\n.sky-btn-sm {\n  padding: 5px 10px;\n  font-size: 12px;\n  line-height: 1.5;\n}\n\n.sky-btn.sky-btn-active {\n  outline: 0;\n  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n}\n\n.sky-btn-tab {\n  background-color: transparent;\n  border: none;\n  border-radius: 4px 4px 0 0;\n  color: #686c73;\n  cursor: pointer;\n  display: inline-block;\n  font-weight: 600;\n  line-height: 1.8;\n  padding: 8px 16px;\n}\n\n.sky-btn-tab:hover {\n  background-color: #eeeeef;\n  color: #282b31;\n  text-decoration: none;\n}\n\n.sky-btn-tab-close {\n  background-color: transparent;\n  border: none;\n  color: #686c73;\n  cursor: pointer;\n  line-height: 1.4;\n  margin-left: 5px;\n}\n\n.sky-btn-tab-close:hover {\n  color: #282b31;\n  transition: color 150ms;\n}\n\n.sky-tab-header-count {\n  font-weight: 400;\n  color: #007ca6;\n  margin-left: 5px;\n}\n\n.sky-btn-tab-selected {\n  background-color: #007ca6;\n  color: #fff;\n}\n\n.sky-btn-tab-selected:hover {\n  background-color: #007ca6;\n  color: #fff;\n}\n\n.sky-btn-tab-selected .sky-btn-tab-close, .sky-btn-tab-selected .sky-tab-header-count {\n  color: #fff;\n}\n\n.sky-btn-tab-wizard {\n  background-color: #ffffff;\n  border-top: 1px solid #e2e3e4;\n  border-bottom: 1px solid #e2e3e4;\n  border-left: 1px solid #e2e3e4;\n  border-right: 1px solid #e2e3e4;\n  border-radius: 3px;\n  font-weight: 400;\n  color: #282b31;\n  line-height: 1.6em;\n  margin-right: 5px;\n  padding-bottom: 5px;\n  padding-top: 5px;\n}\n\n.sky-btn-tab-wizard:hover, .sky-btn-tab-wizard:focus {\n  text-decoration: none;\n  color: #282b31;\n  background-color: #eeeeef;\n}\n\n.sky-btn-tab-wizard.sky-btn-tab-selected {\n  background-color: #81d4f7;\n  border-color: #81d4f7;\n  color: #282b31;\n}\n\n.sky-btn-tab-wizard.sky-btn-tab-disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n  background-color: #eeeeef;\n  color: #686c73;\n  box-shadow: none;\n}\n\n:host {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  width: 710px;\n}\n\n:host .link-records-item-info {\n  font-family: \"Blackbaud Sans\", \"Helvetica Neue\", Arial, sans-serif;\n  color: #282b31;\n  font-weight: 600;\n  font-size: 16px;\n  text-align: center;\n}\n\n:host .link-records-item {\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  justify-content: center;\n  margin: 10px 0 40px;\n}\n\n:host .link-records-item-original,\n:host .link-records-item-match {\n  border-top: 1px solid #e2e3e4;\n  border-bottom: 1px solid #e2e3e4;\n  border-right: 1px solid #e2e3e4;\n  border-left: 1px solid #e2e3e4;\n  background-color: #ffffff;\n  display: flex;\n  flex-direction: column;\n  min-height: 200px;\n  width: 350px;\n}\n\n:host .link-records-item-original .link-records-item-content,\n:host .link-records-item-match .link-records-item-content {\n  flex-grow: 1;\n  padding: 10px 20px 10px 25px;\n  word-break: break-all;\n}\n\n:host .link-records-item-original .link-records-item-header,\n:host .link-records-item-original .link-records-item-footer,\n:host .link-records-item-match .link-records-item-header,\n:host .link-records-item-match .link-records-item-footer {\n  display: flex;\n  flex-direction: row;\n  min-height: 48px;\n}\n\n:host .link-records-item-original .link-records-item-header,\n:host .link-records-item-match .link-records-item-header {\n  border-bottom: 1px solid #e2e3e4;\n  font-family: \"Blackbaud Sans\", \"Helvetica Neue\", Arial, sans-serif;\n  color: #686c73;\n  font-weight: 300;\n  font-size: 19px;\n  padding: 10px;\n}\n\n:host .link-records-item-original .link-records-item-footer,\n:host .link-records-item-match .link-records-item-footer {\n  border-top: 1px solid #e2e3e4;\n  padding: 7px 10px;\n}\n\n:host .link-records-item-original .link-records-item-footer button.sky-btn:not(:first-child),\n:host .link-records-item-match .link-records-item-footer button.sky-btn:not(:first-child) {\n  margin-left: 10px;\n}\n\n:host .link-records-item-original .link-records-item-footer button.sky-btn.sky-btn-link, :host .link-records-item-original .link-records-item-footer button.sky-btn.sky-btn-link-inline,\n:host .link-records-item-match .link-records-item-footer button.sky-btn.sky-btn-link,\n:host .link-records-item-match .link-records-item-footer button.sky-btn.sky-btn-link-inline {\n  margin-left: 0;\n}\n\n:host .link-records-item-original .link-records-item-footer button.sky-btn.sky-btn-link:first-child, :host .link-records-item-original .link-records-item-footer button.sky-btn.sky-btn-link-inline:first-child,\n:host .link-records-item-match .link-records-item-footer button.sky-btn.sky-btn-link:first-child,\n:host .link-records-item-match .link-records-item-footer button.sky-btn.sky-btn-link-inline:first-child {\n  margin-left: -10px;\n}\n\n:host .link-records-item-status {\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  flex-direction: row;\n}\n\n:host .link-records-item-status-content {\n  border-top: 1px solid #e2e3e4;\n  border-bottom: 1px solid #e2e3e4;\n  border-right: 1px solid #e2e3e4;\n  border-left: 1px solid #e2e3e4;\n  background-color: #ffffff;\n  border-radius: 22px;\n  height: 45px;\n  margin: -18px;\n  text-align: center;\n  width: 45px;\n  z-index: 1;\n}\n\n:host .link-records-item-status-content i {\n  color: #71bf43;\n  font-size: 29px;\n  margin: 7px 0 0;\n}\n\n:host .link-records-item-status-content i.fa-question-circle, :host .link-records-item-status-content i.fa-pencil {\n  color: #fbb034;\n}\n\n@media (max-width: 768px) {\n  :host {\n    width: 350px;\n  }\n  :host .link-records-item {\n    flex-direction: column;\n  }\n}\n"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"record":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"matchTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"noMatchTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemTitleTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedByDefault":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showNewFieldValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"viewItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":[{"__symbolic":"reference","module":"./link-records-item-diff.component","name":"SkyLinkRecordsItemDiffComponent"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./state","name":"SkyLinkRecordsState"},{"__symbolic":"reference","module":"./state","name":"SkyLinkRecordsStateDispatcher"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"link":[{"__symbolic":"method"}],"unlink":[{"__symbolic":"method"}],"create":[{"__symbolic":"method"}],"edit":[{"__symbolic":"method"}],"cancelEdit":[{"__symbolic":"method"}]}}}}]