[{"__symbolic":"module","version":3,"metadata":{"SkySearchComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-search","template":"<div class=\"sky-search-container\">\n  <div\n    class=\"sky-search-button-container\">\n    <button\n      type=\"button\"\n      [ngClass]=\"{'sky-search-btn-open-applied': clearButtonShown}\"\n      [hidden]=\"!searchButtonShown\"\n      class=\"sky-btn sky-btn-default sky-search-btn-open\"\n      [attr.title]=\"'search_open' | skyResources\"\n      (click)=\"toggleSearchInput(true)\">\n      <i class=\"fa fa-search fa-lg\"></i>\n    </button>\n  </div>\n  <div\n    [hidden]=\"searchButtonShown\"\n    [ngClass]=\"{'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth }\"\n    class=\"sky-search-dismiss-container\">\n    <div class=\"sky-search-item-input\">\n      <div\n        [ngClass]=\"{'sky-search-input-focused sky-rounded-corners': searchInputFocused}\"\n        [@inputState]=\"inputAnimate\"\n        (@inputState.start)=\"inputAnimationStart($event)\"\n        (@inputState.done)=\"inputAnimationEnd($event)\"\n        class=\"sky-search-input-container sky-input-group\">\n        <input\n          type=\"text\"\n          class=\"sky-form-control sky-search-input sky-rounded-corners\"\n          [ngModel]=\"searchText\"\n          (ngModelChange)=\"searchTextChanged($event)\"\n          (keyup)=\"enterPress($event, searchText)\"\n          (focus)=\"inputFocused(true)\"\n          (blur)=\"inputFocused(false)\"\n          [attr.aria-label]=\"'search_label' | skyResources\"\n          [attr.placeholder]=\"placeholderText\" />\n        <span\n          class=\"sky-input-group-btn sky-input-group-clear\"\n          [hidden]=\"!clearButtonShown\">\n          <button\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n            (click)=\"clearSearchText()\">\n            <i class=\"fa fa-times\"></i>\n          </button>\n        </span>\n        <span\n          class=\"sky-input-group-btn\">\n          <button\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n            (click)=\"applySearchText(searchText)\"\n            [attr.aria-label]=\"'search_label' | skyResources\" >\n            <i class=\"fa fa-search fa-lg\"></i>\n          </button>\n        </span>\n      </div>\n    </div>\n    <div class=\"sky-search-item-dismiss\">\n      <button\n        *ngIf=\"mobileSearchShown\"\n        type=\"button\"\n        [attr.title]=\"'search_dismiss' | skyResources\"\n        class=\"sky-btn sky-btn-secondary sky-search-btn-dismiss\"\n        (click)=\"toggleSearchInput(false)\">\n        <i class=\"fa fa-chevron-circle-left fa-lg\">\n        </i>\n      </button>\n    </div>\n  </div>\n</div>\n","styles":[".sky-search-input {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n  border-right: 0 none;\n  /**\n   * Prevents the IE clear icon from displaying in the input\n   * because our search control already includes a clear icon.\n   */\n}\n\n.sky-search-input:focus {\n  border: 0 none;\n  box-shadow: none;\n  outline: none;\n}\n\n.sky-search-input::-ms-clear {\n  display: none;\n}\n\n.sky-search-btn {\n  border-left: 0 none;\n}\n\n.sky-search-btn:hover, .sky-search-btn:focus {\n  background-color: #ffffff;\n}\n\n.sky-search-btn-apply {\n  padding-left: 6px;\n  border-top: 1px solid #cdcfd2;\n  border-bottom: 1px solid #cdcfd2;\n  border-right: 1px solid #cdcfd2;\n}\n\n.sky-search-btn-clear {\n  border-right: 0 none;\n  padding-right: 6px;\n  border-top: 1px solid #cdcfd2;\n  border-bottom: 1px solid #cdcfd2;\n}\n\n.sky-search-input-focused {\n  box-shadow: 0 0 8px rgba(0, 180, 241, 0.6);\n  border: 1px solid #00b4f1;\n  outline: none;\n}\n\n.sky-search-input-focused .sky-search-btn {\n  border-color: transparent;\n  border-top: 0 none;\n  border-bottom: 0 none;\n}\n\n.sky-search-input-focused .sky-search-btn-apply {\n  border-right: 0 none;\n}\n\n/**\n * Mobile styles\n */\n@media (min-width: 768px) {\n  .sky-search-input-container {\n    min-width: 300px !important;\n  }\n}\n\n/**\n * On iOS, the input will zoom when focused,\n * setting the font-size prevents this.\n */\n@media (max-width: 767px) {\n  .sky-search-input,\n  .sky-search-btn-apply,\n  .sky-search-btn-clear {\n    font-size: 15px;\n  }\n}\n\n.sky-search-btn-open-applied.sky-search-btn-open, .sky-search-btn-open-applied.sky-search-btn-open:hover {\n  color: #71bf43;\n  border: 2px solid #71bf43;\n  padding: 5px 11px;\n}\n\n.sky-search-dismiss-container {\n  display: flex;\n}\n\n.sky-search-item-dismiss {\n  flex-shrink: 0;\n  display: flex;\n}\n\n.sky-search-item-dismiss > .sky-btn {\n  border-color: transparent;\n}\n\n.sky-search-item-input {\n  flex-grow: 1;\n  display: flex;\n}\n\n.sky-search-dismiss-absolute {\n  position: absolute;\n  background-color: #ffffff;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  padding: 5px;\n}\n"],"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger"},"arguments":["inputState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["inputHidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"opacity":0,"width":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["inputShown",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"opacity":1,"width":"100%"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["* <=> *",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":["150ms"]}]}]]}],"providers":[{"__symbolic":"reference","module":"./search-adapter.service","name":"SkySearchAdapterService"},{"__symbolic":"reference","module":"../resources","name":"SkyResourcesService"}]}]}],"members":{"searchApply":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"searchChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"searchClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"searchText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"expandMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholderText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../media-queries","name":"SkyMediaQueryService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./search-adapter.service","name":"SkySearchAdapterService"},{"__symbolic":"reference","module":"../resources","name":"SkyResourcesService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"inputFocused":[{"__symbolic":"method"}],"clearSearchText":[{"__symbolic":"method"}],"enterPress":[{"__symbolic":"method"}],"applySearchText":[{"__symbolic":"method"}],"searchTextChanged":[{"__symbolic":"method"}],"toggleSearchInput":[{"__symbolic":"method"}],"inputAnimationStart":[{"__symbolic":"method"}],"inputAnimationEnd":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"searchBindingChanged":[{"__symbolic":"method"}],"expandModeBindingChanged":[{"__symbolic":"method"}],"shouldOpenInput":[{"__symbolic":"method"}],"mediaQueryCallback":[{"__symbolic":"method"}],"searchShouldCollapse":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SkySearchComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-search","template":"<div class=\"sky-search-container\">\n  <div\n    class=\"sky-search-button-container\">\n    <button\n      type=\"button\"\n      [ngClass]=\"{'sky-search-btn-open-applied': clearButtonShown}\"\n      [hidden]=\"!searchButtonShown\"\n      class=\"sky-btn sky-btn-default sky-search-btn-open\"\n      [attr.title]=\"'search_open' | skyResources\"\n      (click)=\"toggleSearchInput(true)\">\n      <i class=\"fa fa-search fa-lg\"></i>\n    </button>\n  </div>\n  <div\n    [hidden]=\"searchButtonShown\"\n    [ngClass]=\"{'sky-search-dismiss-absolute': mobileSearchShown || isFullWidth }\"\n    class=\"sky-search-dismiss-container\">\n    <div class=\"sky-search-item-input\">\n      <div\n        [ngClass]=\"{'sky-search-input-focused sky-rounded-corners': searchInputFocused}\"\n        [@inputState]=\"inputAnimate\"\n        (@inputState.start)=\"inputAnimationStart($event)\"\n        (@inputState.done)=\"inputAnimationEnd($event)\"\n        class=\"sky-search-input-container sky-input-group\">\n        <input\n          type=\"text\"\n          class=\"sky-form-control sky-search-input sky-rounded-corners\"\n          [ngModel]=\"searchText\"\n          (ngModelChange)=\"searchTextChanged($event)\"\n          (keyup)=\"enterPress($event, searchText)\"\n          (focus)=\"inputFocused(true)\"\n          (blur)=\"inputFocused(false)\"\n          [attr.aria-label]=\"'search_label' | skyResources\"\n          [attr.placeholder]=\"placeholderText\" />\n        <span\n          class=\"sky-input-group-btn sky-input-group-clear\"\n          [hidden]=\"!clearButtonShown\">\n          <button\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-clear\"\n            (click)=\"clearSearchText()\">\n            <i class=\"fa fa-times\"></i>\n          </button>\n        </span>\n        <span\n          class=\"sky-input-group-btn\">\n          <button\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-search-btn sky-search-btn-apply\"\n            (click)=\"applySearchText(searchText)\"\n            [attr.aria-label]=\"'search_label' | skyResources\" >\n            <i class=\"fa fa-search fa-lg\"></i>\n          </button>\n        </span>\n      </div>\n    </div>\n    <div class=\"sky-search-item-dismiss\">\n      <button\n        *ngIf=\"mobileSearchShown\"\n        type=\"button\"\n        [attr.title]=\"'search_dismiss' | skyResources\"\n        class=\"sky-btn sky-btn-secondary sky-search-btn-dismiss\"\n        (click)=\"toggleSearchInput(false)\">\n        <i class=\"fa fa-chevron-circle-left fa-lg\">\n        </i>\n      </button>\n    </div>\n  </div>\n</div>\n","styles":[".sky-search-input {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n  border-right: 0 none;\n  /**\n   * Prevents the IE clear icon from displaying in the input\n   * because our search control already includes a clear icon.\n   */\n}\n\n.sky-search-input:focus {\n  border: 0 none;\n  box-shadow: none;\n  outline: none;\n}\n\n.sky-search-input::-ms-clear {\n  display: none;\n}\n\n.sky-search-btn {\n  border-left: 0 none;\n}\n\n.sky-search-btn:hover, .sky-search-btn:focus {\n  background-color: #ffffff;\n}\n\n.sky-search-btn-apply {\n  padding-left: 6px;\n  border-top: 1px solid #cdcfd2;\n  border-bottom: 1px solid #cdcfd2;\n  border-right: 1px solid #cdcfd2;\n}\n\n.sky-search-btn-clear {\n  border-right: 0 none;\n  padding-right: 6px;\n  border-top: 1px solid #cdcfd2;\n  border-bottom: 1px solid #cdcfd2;\n}\n\n.sky-search-input-focused {\n  box-shadow: 0 0 8px rgba(0, 180, 241, 0.6);\n  border: 1px solid #00b4f1;\n  outline: none;\n}\n\n.sky-search-input-focused .sky-search-btn {\n  border-color: transparent;\n  border-top: 0 none;\n  border-bottom: 0 none;\n}\n\n.sky-search-input-focused .sky-search-btn-apply {\n  border-right: 0 none;\n}\n\n/**\n * Mobile styles\n */\n@media (min-width: 768px) {\n  .sky-search-input-container {\n    min-width: 300px !important;\n  }\n}\n\n/**\n * On iOS, the input will zoom when focused,\n * setting the font-size prevents this.\n */\n@media (max-width: 767px) {\n  .sky-search-input,\n  .sky-search-btn-apply,\n  .sky-search-btn-clear {\n    font-size: 15px;\n  }\n}\n\n.sky-search-btn-open-applied.sky-search-btn-open, .sky-search-btn-open-applied.sky-search-btn-open:hover {\n  color: #71bf43;\n  border: 2px solid #71bf43;\n  padding: 5px 11px;\n}\n\n.sky-search-dismiss-container {\n  display: flex;\n}\n\n.sky-search-item-dismiss {\n  flex-shrink: 0;\n  display: flex;\n}\n\n.sky-search-item-dismiss > .sky-btn {\n  border-color: transparent;\n}\n\n.sky-search-item-input {\n  flex-grow: 1;\n  display: flex;\n}\n\n.sky-search-dismiss-absolute {\n  position: absolute;\n  background-color: #ffffff;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  padding: 5px;\n}\n"],"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger"},"arguments":["inputState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["inputHidden",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"opacity":0,"width":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["inputShown",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"opacity":1,"width":"100%"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["* <=> *",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":["150ms"]}]}]]}],"providers":[{"__symbolic":"reference","module":"./search-adapter.service","name":"SkySearchAdapterService"},{"__symbolic":"reference","module":"../resources","name":"SkyResourcesService"}]}]}],"members":{"searchApply":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"searchChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"searchClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"searchText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"expandMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholderText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../media-queries","name":"SkyMediaQueryService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./search-adapter.service","name":"SkySearchAdapterService"},{"__symbolic":"reference","module":"../resources","name":"SkyResourcesService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"inputFocused":[{"__symbolic":"method"}],"clearSearchText":[{"__symbolic":"method"}],"enterPress":[{"__symbolic":"method"}],"applySearchText":[{"__symbolic":"method"}],"searchTextChanged":[{"__symbolic":"method"}],"toggleSearchInput":[{"__symbolic":"method"}],"inputAnimationStart":[{"__symbolic":"method"}],"inputAnimationEnd":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"searchBindingChanged":[{"__symbolic":"method"}],"expandModeBindingChanged":[{"__symbolic":"method"}],"shouldOpenInput":[{"__symbolic":"method"}],"mediaQueryCallback":[{"__symbolic":"method"}],"searchShouldCollapse":[{"__symbolic":"method"}]}}}}]