[{"__symbolic":"module","version":3,"metadata":{"SkyLinkRecordsDemoComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-link-records-demo","template":"<h3>\n  Link records child templates\n</h3>\n\n<sky-link-records\n  [items]=\"items\"\n  [matches]=\"matches\"\n  [matchFields]=\"matchFields\"\n  [showNewFieldValues]=\"false\">\n\n  <sky-link-records-item-title>\n    <ng-template\n      let-item=\"item\">\n      Applicant\n    </ng-template>\n  </sky-link-records-item-title>\n\n  <sky-link-records-item-content>\n    <ng-template\n      let-item=\"item\">\n      <div>Original Item</div>\n      <div>{{ item?.id }}</div>\n      <div>{{ item?.name }}</div>\n      <div>{{ item?.description }}</div>\n    </ng-template>\n  </sky-link-records-item-content>\n\n  <sky-link-records-match-content>\n    <ng-template let-match=\"match\">\n      <div>Match Item</div>\n      <div>{{ match?.item?.id }}</div>\n      <div>{{ match?.item?.name }}</div>\n      <div>{{ match?.item?.description }}</div>\n    </ng-template>\n  </sky-link-records-match-content>\n\n  <sky-link-records-nomatch-content>\n    <ng-template\n      let-item=\"item\"\n      let-match=\"match\"\n      let-api=\"api\">\n      <div *ngIf=\"match?.item\">\n        <div>Match Item</div>\n        <div>{{ match?.item?.id }}</div>\n        <div>{{ match?.item?.name }}</div>\n        <div>{{ match?.item?.description }}</div>\n      </div>\n      <div *ngIf=\"!match?.item\">\n        <div>Match Search</div>\n        <button\n          class=\"sky-btn sky-btn-default\"\n          (click)=\"api.addSelectedItem(item?.id, newItem)\">\n          Test Select\n        </button>\n      </div>\n    </ng-template>\n  </sky-link-records-nomatch-content>\n</sky-link-records>\n\n<button\n  class=\"sky-btn sky-btn-default\"\n  (click)=\"showResults()\">\n  Show Results\n</button>\n\n<h3>\n  Default link with templates\n</h3>\n\n<sky-link-records\n  [items]=\"items\"\n  [matches]=\"matches\"\n  [itemTemplate]=\"item\"\n  [matchTemplate]=\"match\"\n  [matchFields]=\"matchFields\">\n</sky-link-records>\n\n<ng-template #itemTitle let-item=\"item\">Custom Title</ng-template>\n\n<ng-template #item let-item=\"item\">\n  <div>{{ item?.name }}</div>\n  <div>{{ item?.description }}</div>\n</ng-template>\n\n<ng-template #match let-match=\"match\">\n  <div>Custom Label:</div>\n  <div>{{ match?.item?.name }}</div>\n  <div>{{ match?.item?.description }}</div>\n</ng-template>\n\n<button\n  class=\"sky-btn sky-btn-default\"\n  (click)=\"showResults()\">\n  Show Results\n</button>\n"}]}],"members":{"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../../core","name":"SkyLinkRecordsComponent"}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"showResults":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SkyLinkRecordsDemoComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-link-records-demo","template":"<h3>\n  Link records child templates\n</h3>\n\n<sky-link-records\n  [items]=\"items\"\n  [matches]=\"matches\"\n  [matchFields]=\"matchFields\"\n  [showNewFieldValues]=\"false\">\n\n  <sky-link-records-item-title>\n    <ng-template\n      let-item=\"item\">\n      Applicant\n    </ng-template>\n  </sky-link-records-item-title>\n\n  <sky-link-records-item-content>\n    <ng-template\n      let-item=\"item\">\n      <div>Original Item</div>\n      <div>{{ item?.id }}</div>\n      <div>{{ item?.name }}</div>\n      <div>{{ item?.description }}</div>\n    </ng-template>\n  </sky-link-records-item-content>\n\n  <sky-link-records-match-content>\n    <ng-template let-match=\"match\">\n      <div>Match Item</div>\n      <div>{{ match?.item?.id }}</div>\n      <div>{{ match?.item?.name }}</div>\n      <div>{{ match?.item?.description }}</div>\n    </ng-template>\n  </sky-link-records-match-content>\n\n  <sky-link-records-nomatch-content>\n    <ng-template\n      let-item=\"item\"\n      let-match=\"match\"\n      let-api=\"api\">\n      <div *ngIf=\"match?.item\">\n        <div>Match Item</div>\n        <div>{{ match?.item?.id }}</div>\n        <div>{{ match?.item?.name }}</div>\n        <div>{{ match?.item?.description }}</div>\n      </div>\n      <div *ngIf=\"!match?.item\">\n        <div>Match Search</div>\n        <button\n          class=\"sky-btn sky-btn-default\"\n          (click)=\"api.addSelectedItem(item?.id, newItem)\">\n          Test Select\n        </button>\n      </div>\n    </ng-template>\n  </sky-link-records-nomatch-content>\n</sky-link-records>\n\n<button\n  class=\"sky-btn sky-btn-default\"\n  (click)=\"showResults()\">\n  Show Results\n</button>\n\n<h3>\n  Default link with templates\n</h3>\n\n<sky-link-records\n  [items]=\"items\"\n  [matches]=\"matches\"\n  [itemTemplate]=\"item\"\n  [matchTemplate]=\"match\"\n  [matchFields]=\"matchFields\">\n</sky-link-records>\n\n<ng-template #itemTitle let-item=\"item\">Custom Title</ng-template>\n\n<ng-template #item let-item=\"item\">\n  <div>{{ item?.name }}</div>\n  <div>{{ item?.description }}</div>\n</ng-template>\n\n<ng-template #match let-match=\"match\">\n  <div>Custom Label:</div>\n  <div>{{ match?.item?.name }}</div>\n  <div>{{ match?.item?.description }}</div>\n</ng-template>\n\n<button\n  class=\"sky-btn sky-btn-default\"\n  (click)=\"showResults()\">\n  Show Results\n</button>\n"}]}],"members":{"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../../core","name":"SkyLinkRecordsComponent"}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"showResults":[{"__symbolic":"method"}]}}}}]