@blackbaud/skyux/dist/modules/search/search.component.metadata.json

SKY UX built on Angular 2

[{"__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\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': 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\"\n          [(ngModel)]=\"searchText\"\n          (change)=\"searchTextChanged(searchText)\"\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        >\n          <button\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-search-btn-clear\"\n            (click)=\"clearSearchText()\">\n            <i class=\"fa fa-times\"></i>\n          </button>\n        </span>\n        <span class=\"sky-input-group-btn\">\n          <button\n            type=\"button\"\n            class=\"sky-btn sky-btn-default 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\n      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":["@media (min-width: 768px){.sky-search-input-container{min-width:300px}}@media (max-width: 767px){.sky-search-input,.sky-search-btn-apply,.sky-search-btn-clear{font-size:16px}}.sky-search-input{border-radius:6px;border-right:none}.sky-search-input::-ms-clear{display:none}.sky-input-group.sky-search-input-container .sky-input-group-btn .sky-btn.sky-search-btn-apply{border-left:none;border-bottom-right-radius:6px;border-top-right-radius:6px;border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-right:1px solid #e2e3e4}.sky-input-group.sky-search-input-container .sky-input-group-btn .sky-btn.sky-search-btn-clear{border-right:none;border-left:none;border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4}.sky-search-btn-dismiss,.sky-search-btn-dismiss:hover{border:1px transparent solid;background-color:transparent}.sky-search-dismiss-container{display:flex}.sky-search-item-dismiss{flex-shrink:0;display:flex}.sky-search-item-input{flex-grow:1;display:flex}@media (min-width: 768px){.sky-search-item-input{flex-shrink:0}}.sky-search-btn-clear{padding-right:6px;padding-left:18px}.sky-search-btn-apply{padding-left:6px}.sky-search-btn-apply:hover,.sky-search-btn-apply:focus,.sky-search-btn-clear:hover,.sky-search-btn-clear:focus{background-color:#fff}.sky-search-dismiss-absolute{position:absolute;background-color:#fff;top:0;left:0;bottom:0;right:0;padding:5px}.sky-search-input-container{width:100%;border:1px transparent solid}.sky-input-group.sky-search-input-container.sky-search-input-focused{border:1px solid #1f90d8;box-shadow:0 0 8px rgba(28,132,198,0.6);border-radius:6px}.sky-input-group.sky-search-input-container.sky-search-input-focused .sky-input-group-btn .sky-btn.sky-search-btn-apply{border-right:1px transparent solid;border-top:1px transparent solid;border-bottom:1px transparent solid}.sky-input-group.sky-search-input-container.sky-search-input-focused .sky-input-group-btn .sky-btn.sky-search-btn-clear{border-top:1px transparent solid;border-bottom:1px transparent solid}.sky-form-control.sky-search-input:focus{border-top:1px transparent solid;border-bottom:1px transparent solid;border-left:1px transparent solid;border-right:none;box-shadow:none;outline:none}.sky-search-btn-open-applied.sky-search-btn-open,.sky-search-btn-open-applied.sky-search-btn-open:hover{color:#71bf43;border:2px solid #71bf43;padding:5px 11px}\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"}}]}],"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\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': 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\"\n          [(ngModel)]=\"searchText\"\n          (change)=\"searchTextChanged(searchText)\"\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        >\n          <button\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-search-btn-clear\"\n            (click)=\"clearSearchText()\">\n            <i class=\"fa fa-times\"></i>\n          </button>\n        </span>\n        <span class=\"sky-input-group-btn\">\n          <button\n            type=\"button\"\n            class=\"sky-btn sky-btn-default 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\n      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":["@media (min-width: 768px){.sky-search-input-container{min-width:300px}}@media (max-width: 767px){.sky-search-input,.sky-search-btn-apply,.sky-search-btn-clear{font-size:16px}}.sky-search-input{border-radius:6px;border-right:none}.sky-search-input::-ms-clear{display:none}.sky-input-group.sky-search-input-container .sky-input-group-btn .sky-btn.sky-search-btn-apply{border-left:none;border-bottom-right-radius:6px;border-top-right-radius:6px;border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-right:1px solid #e2e3e4}.sky-input-group.sky-search-input-container .sky-input-group-btn .sky-btn.sky-search-btn-clear{border-right:none;border-left:none;border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4}.sky-search-btn-dismiss,.sky-search-btn-dismiss:hover{border:1px transparent solid;background-color:transparent}.sky-search-dismiss-container{display:flex}.sky-search-item-dismiss{flex-shrink:0;display:flex}.sky-search-item-input{flex-grow:1;display:flex}@media (min-width: 768px){.sky-search-item-input{flex-shrink:0}}.sky-search-btn-clear{padding-right:6px;padding-left:18px}.sky-search-btn-apply{padding-left:6px}.sky-search-btn-apply:hover,.sky-search-btn-apply:focus,.sky-search-btn-clear:hover,.sky-search-btn-clear:focus{background-color:#fff}.sky-search-dismiss-absolute{position:absolute;background-color:#fff;top:0;left:0;bottom:0;right:0;padding:5px}.sky-search-input-container{width:100%;border:1px transparent solid}.sky-input-group.sky-search-input-container.sky-search-input-focused{border:1px solid #1f90d8;box-shadow:0 0 8px rgba(28,132,198,0.6);border-radius:6px}.sky-input-group.sky-search-input-container.sky-search-input-focused .sky-input-group-btn .sky-btn.sky-search-btn-apply{border-right:1px transparent solid;border-top:1px transparent solid;border-bottom:1px transparent solid}.sky-input-group.sky-search-input-container.sky-search-input-focused .sky-input-group-btn .sky-btn.sky-search-btn-clear{border-top:1px transparent solid;border-bottom:1px transparent solid}.sky-form-control.sky-search-input:focus{border-top:1px transparent solid;border-bottom:1px transparent solid;border-left:1px transparent solid;border-right:none;box-shadow:none;outline:none}.sky-search-btn-open-applied.sky-search-btn-open,.sky-search-btn-open-applied.sky-search-btn-open:hover{color:#71bf43;border:2px solid #71bf43;padding:5px 11px}\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"}}]}],"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"}]}}}}]