@covalent/core 2.0.0-rc.2 → 2.1.0

package/notifications/notification-count.component.scss

@@ -0,0 +1,89 @@
+$td-notification-size: 20px !default;
+$td-notification-content-size: 40px !default;
+
+:host {
+  position: relative;
+  display: block;
+  text-align: center;
+  min-width: $td-notification-content-size;
+  height: $td-notification-content-size;
+  &.td-notification-hidden {
+    min-width: 0;
+  }
+}
+.td-notification-count {
+  line-height: $td-notification-size + 1;
+  width: $td-notification-size;
+  height: $td-notification-size;
+  position: absolute;
+  font-size: 10px;
+  font-weight: 600;
+  border-radius: 50%;
+  z-index: 1;
+  &.td-notification-center-x {
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+  }
+  &.td-notification-center-y {
+    margin-top: auto;
+    margin-bottom: auto;
+    top: 0;
+    bottom: 0;
+  }
+  &.td-notification-top {
+    top: 0;
+  }
+  &.td-notification-bottom {
+    bottom: 0;
+  }
+  &.td-notification-before {
+    left: 0;
+  }
+  &.td-notification-after {
+    right: 0;
+  }
+  &.td-notification-no-count {
+    width: 8px;
+    height: 8px;
+    &.td-notification-top {
+      top: 8px;
+    }
+    &.td-notification-bottom {
+      bottom: 8px;
+    }
+    &.td-notification-before {
+      left: 8px;
+    }
+    &.td-notification-after {
+      right: 8px;
+    }
+  }
+  ::ng-deep [dir='rtl'] & {
+    &.td-notification-before {
+      right: 0;
+      left: auto;
+    }
+    &.td-notification-after {
+      left: 0;
+      right: auto;
+    }
+    &.td-notification-no-count {
+      &.td-notification-before {
+        right: 8px;
+        left: auto;
+      }
+      &.td-notification-after {
+        left: 8px;
+        right: auto;
+      }
+    }
+  }
+}
+
+.td-notification-content {
+  &, ::ng-deep > * {
+    line-height: $td-notification-content-size;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@covalent/core",
-  "version": "2.0.0-rc.2",
+  "version": "2.1.0",
   "description": "Teradata UI Platform built on Angular Material",
   "keywords": [
     "angular",

package/paging/covalent-core-paging.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"CovalentPagingModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":13,"character":4}],"declarations":[{"__symbolic":"reference","name":"TdPagingBarComponent"}],"exports":[{"__symbolic":"reference","name":"TdPagingBarComponent"}]}]}],"members":{}},"IPageChangeEvent":{"__symbolic":"interface"},"TdPagingBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":14,"character":19},"member":"OnPush"},"selector":"td-paging-bar","template":"<div class=\"td-paging-bar\" (change)=\"$event.stopPropagation()\" >\n  <ng-content></ng-content>\n  <div class=\"td-paging-bar-navigation\">\n    <button mat-icon-button class=\"td-paging-bar-first-page\" type=\"button\" *ngIf=\"firstLast\" [disabled]=\"isMinPage()\" (click)=\"firstPage()\">\n      <mat-icon>{{ isRTL ? 'skip_next' : 'skip_previous' }}</mat-icon>\n    </button>\n    <button mat-icon-button class=\"td-paging-bar-prev-page\" type=\"button\" [disabled]=\"isMinPage()\" (click)=\"prevPage()\">\n      <mat-icon>{{ isRTL ? 'navigate_next' : 'navigate_before' }}</mat-icon>\n    </button>\n    <ng-template *ngIf=\"pageLinkCount > 0\" let-link let-index=\"index\" ngFor [ngForOf]=\"pageLinks\">\n      <button class=\"td-paging-bar-link-page\" mat-icon-button type=\"button\" [color]=\"page === link ? 'accent' : ''\" (click)=\"navigateToPage(link)\">{{link}}</button>\n    </ng-template>\n    <button mat-icon-button class=\"td-paging-bar-next-page\" type=\"button\" [disabled]=\"isMaxPage()\" (click)=\"nextPage()\">\n      <mat-icon>{{ isRTL ? 'navigate_before' : 'navigate_next' }}</mat-icon>\n    </button>\n    <button mat-icon-button class=\"td-paging-bar-last-page\" type=\"button\" *ngIf=\"firstLast\" [disabled]=\"isMaxPage()\" (click)=\"lastPage()\">\n      <mat-icon>{{ isRTL ? 'skip_previous' : 'skip_next' }}</mat-icon>\n    </button>\n  </div>\n</div>","styles":[":host{display:block}:host .td-paging-bar{height:48px;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-ms-flex-pack:end;justify-content:flex-end}:host .td-paging-bar ::ng-deep>*{margin:0 10px}:host .td-paging-bar [mat-icon-button]{font-size:12px;font-weight:400}"]}]}],"members":{"firstLast":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3},"arguments":["firstLast"]}]}],"initialPage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3},"arguments":["initialPage"]}]}],"pageLinkCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3},"arguments":["pageLinkCount"]}]}],"pageSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":3},"arguments":["pageSize"]}]}],"total":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":3},"arguments":["total"]}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":129,"character":3},"arguments":["change"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":138,"character":15}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/cdk/bidi","name":"Dir","line":138,"character":40},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":139,"character":42}]}],"ngOnInit":[{"__symbolic":"method"}],"navigateToPage":[{"__symbolic":"method"}],"firstPage":[{"__symbolic":"method"}],"prevPage":[{"__symbolic":"method"}],"nextPage":[{"__symbolic":"method"}],"lastPage":[{"__symbolic":"method"}],"isMinPage":[{"__symbolic":"method"}],"isMaxPage":[{"__symbolic":"method"}],"_calculateRows":[{"__symbolic":"method"}],"_calculatePageLinks":[{"__symbolic":"method"}],"_handleOnChange":[{"__symbolic":"method"}]}}},"origins":{"CovalentPagingModule":"./paging.module","IPageChangeEvent":"./paging-bar.component","TdPagingBarComponent":"./paging-bar.component"},"importAs":"@covalent/core/paging"}
+{"__symbolic":"module","version":4,"metadata":{"CovalentPagingModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":13,"character":4}],"declarations":[{"__symbolic":"reference","name":"TdPagingBarComponent"}],"exports":[{"__symbolic":"reference","name":"TdPagingBarComponent"}]}]}],"members":{}},"IPageChangeEvent":{"__symbolic":"interface"},"TdPagingBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":14,"character":19},"member":"OnPush"},"selector":"td-paging-bar","template":"<div class=\"td-paging-bar\" (change)=\"$event.stopPropagation()\" >\n  <ng-content></ng-content>\n  <div class=\"td-paging-bar-navigation\">\n    <button mat-icon-button class=\"td-paging-bar-first-page\" type=\"button\" *ngIf=\"firstLast\" [disabled]=\"isMinPage()\" (click)=\"firstPage()\">\n      <mat-icon>{{ isRTL ? 'skip_next' : 'skip_previous' }}</mat-icon>\n    </button>\n    <button mat-icon-button class=\"td-paging-bar-prev-page\" type=\"button\" [disabled]=\"isMinPage()\" (click)=\"prevPage()\">\n      <mat-icon>{{ isRTL ? 'navigate_next' : 'navigate_before' }}</mat-icon>\n    </button>\n    <ng-template *ngIf=\"pageLinkCount > 0\" let-link let-index=\"index\" ngFor [ngForOf]=\"pageLinks\">\n      <button class=\"td-paging-bar-link-page\" mat-icon-button type=\"button\" [color]=\"page === link ? 'accent' : ''\" (click)=\"navigateToPage(link)\">{{link}}</button>\n    </ng-template>\n    <button mat-icon-button class=\"td-paging-bar-next-page\" type=\"button\" [disabled]=\"isMaxPage()\" (click)=\"nextPage()\">\n      <mat-icon>{{ isRTL ? 'navigate_before' : 'navigate_next' }}</mat-icon>\n    </button>\n    <button mat-icon-button class=\"td-paging-bar-last-page\" type=\"button\" *ngIf=\"firstLast\" [disabled]=\"isMaxPage()\" (click)=\"lastPage()\">\n      <mat-icon>{{ isRTL ? 'skip_previous' : 'skip_next' }}</mat-icon>\n    </button>\n  </div>\n</div>","styles":[":host{display:block}:host .td-paging-bar{height:48px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}:host .td-paging-bar ::ng-deep>*{margin:0 10px}:host .td-paging-bar [mat-icon-button]{font-size:12px;font-weight:400}"]}]}],"members":{"firstLast":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3},"arguments":["firstLast"]}]}],"initialPage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3},"arguments":["initialPage"]}]}],"pageLinkCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3},"arguments":["pageLinkCount"]}]}],"pageSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":3},"arguments":["pageSize"]}]}],"total":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":3},"arguments":["total"]}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":129,"character":3},"arguments":["change"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":138,"character":15}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/cdk/bidi","name":"Dir","line":138,"character":40},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":139,"character":42}]}],"ngOnInit":[{"__symbolic":"method"}],"navigateToPage":[{"__symbolic":"method"}],"firstPage":[{"__symbolic":"method"}],"prevPage":[{"__symbolic":"method"}],"nextPage":[{"__symbolic":"method"}],"lastPage":[{"__symbolic":"method"}],"isMinPage":[{"__symbolic":"method"}],"isMaxPage":[{"__symbolic":"method"}],"_calculateRows":[{"__symbolic":"method"}],"_calculatePageLinks":[{"__symbolic":"method"}],"_handleOnChange":[{"__symbolic":"method"}]}}},"origins":{"CovalentPagingModule":"./paging.module","IPageChangeEvent":"./paging-bar.component","TdPagingBarComponent":"./paging-bar.component"},"importAs":"@covalent/core/paging"}

package/paging/paging-bar.component.scss

@@ -0,0 +1,23 @@
+:host {
+  display: block;
+  .td-paging-bar {
+    height: 48px;
+    // [layout]
+    box-sizing: border-box;
+    display: flex;
+    // [layout="row"]
+    flex-direction: row;
+    // [layout-align="end center"]
+    align-items: center;
+    align-content: center;
+    max-width: 100%;
+    justify-content: flex-end;
+    ::ng-deep > * {
+      margin: 0 10px;
+    }
+    [mat-icon-button] {
+      font-size: 12px;
+      font-weight: normal;
+    }
+  }
+}

package/search/covalent-core-search.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"CovalentSearchModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":18,"character":4}],"declarations":[{"__symbolic":"reference","name":"TdSearchInputComponent"},{"__symbolic":"reference","name":"TdSearchBoxComponent"}],"exports":[{"__symbolic":"reference","name":"TdSearchInputComponent"},{"__symbolic":"reference","name":"TdSearchBoxComponent"}]}]}],"members":{}},"TdSearchBoxBase":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":8,"character":41}]}]}},"_TdSearchBoxMixinBase":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinControlValueAccessor","line":12,"character":37},"arguments":[{"__symbolic":"reference","name":"TdSearchBoxBase"}]},"TdSearchBoxComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"_TdSearchBoxMixinBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":16,"character":13},"useExisting":{"__symbolic":"reference","name":"TdSearchBoxComponent"},"multi":true}],"selector":"td-search-box","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":23,"character":19},"member":"OnPush"},"inputs":["value"],"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":26,"character":4},"arguments":["inputState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":27,"character":6},"arguments":["0",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":27,"character":17},"arguments":[{"width":"0%","margin":"0px"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":31,"character":6},"arguments":["1",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":31,"character":18},"arguments":[{"width":"100%","margin":{"__symbolic":"reference","module":"@angular/animations","name":"AUTO_STYLE","line":33,"character":16}}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":35,"character":6},"arguments":["0 => 1",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":35,"character":27},"arguments":["200ms ease-in"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":36,"character":6},"arguments":["1 => 0",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":36,"character":27},"arguments":["200ms ease-out"]}]}]]}],"template":"<div class=\"td-search-box\">\n  <button mat-icon-button type=\"button\" class=\"td-search-icon\" (click)=\"searchClicked()\">\n    <mat-icon *ngIf=\"searchVisible && !alwaysVisible\">{{backIcon}}</mat-icon>\n    <mat-icon *ngIf=\"!searchVisible || alwaysVisible\">{{searchIcon}}</mat-icon>\n  </button>\n  <td-search-input #searchInput\n                   [@inputState]=\"alwaysVisible || searchVisible\"\n                   [debounce]=\"debounce\"\n                   [(ngModel)]=\"value\"\n                   [showUnderline]=\"showUnderline\"\n                   [placeholder]=\"placeholder\"\n                   [clearIcon]=\"clearIcon\"\n                   (searchDebounce)=\"handleSearchDebounce($event)\"\n                   (search)=\"handleSearch($event)\"\n                   (clear)=\"handleClear(); toggleVisibility()\"\n                   (blur)=\"handleBlur()\">\n  </td-search-input>\n</div>","styles":[":host{display:block}.td-search-box{box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:baseline;align-items:baseline;-ms-flex-line-pack:center;align-content:center;max-width:100%;-ms-flex-pack:end;justify-content:flex-end}.td-search-box .td-search-icon{-ms-flex:0 0 auto;flex:0 0 auto}.td-search-box td-search-input{margin-left:12px}::ng-deep [dir=rtl] .td-search-box td-search-input{margin-right:12px;margin-left:0!important}"]}]}],"members":{"_searchInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":43,"character":3},"arguments":[{"__symbolic":"reference","name":"TdSearchInputComponent"}]}]}],"backIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3},"arguments":["backIcon"]}]}],"searchIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":3},"arguments":["searchIcon"]}]}],"clearIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3},"arguments":["clearIcon"]}]}],"showUnderline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":3},"arguments":["showUnderline"]}]}],"debounce":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":3},"arguments":["debounce"]}]}],"alwaysVisible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":3},"arguments":["alwaysVisible"]}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":3},"arguments":["placeholder"]}]}],"onSearchDebounce":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":98,"character":3},"arguments":["searchDebounce"]}]}],"onSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":104,"character":3},"arguments":["search"]}]}],"onClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":110,"character":3},"arguments":["clear"]}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":116,"character":3},"arguments":["blur"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":8,"character":41}]}],"searchClicked":[{"__symbolic":"method"}],"toggleVisibility":[{"__symbolic":"method"}],"handleSearchDebounce":[{"__symbolic":"method"}],"handleSearch":[{"__symbolic":"method"}],"handleClear":[{"__symbolic":"method"}],"handleBlur":[{"__symbolic":"method"}]}},"TdSearchInputBase":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":12,"character":41}]}]}},"_TdSearchInputMixinBase":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinControlValueAccessor","line":16,"character":39},"arguments":[{"__symbolic":"reference","name":"TdSearchInputBase"}]},"TdSearchInputComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"_TdSearchInputMixinBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":20,"character":13},"useExisting":{"__symbolic":"reference","name":"TdSearchInputComponent"},"multi":true}],"selector":"td-search-input","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":27,"character":19},"member":"OnPush"},"inputs":["value"],"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":30,"character":4},"arguments":["searchState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":31,"character":6},"arguments":["hide-left",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":31,"character":25},"arguments":[{"transform":"translateX(-150%)","display":"none"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":35,"character":6},"arguments":["hide-right",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":35,"character":26},"arguments":[{"transform":"translateX(150%)","display":"none"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":39,"character":6},"arguments":["show",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":39,"character":21},"arguments":[{"transform":"translateX(0%)","display":"block"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":43,"character":6},"arguments":["* => show",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":43,"character":30},"arguments":["200ms ease-in"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":44,"character":6},"arguments":["show => *",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":44,"character":30},"arguments":["200ms ease-out"]}]}]]}],"template":"<div class=\"td-search-input\">\n  <mat-form-field class=\"td-search-input-field\"\n                  [class.mat-hide-underline]=\"!showUnderline\"\n                  floatLabel=\"never\">\n    <input matInput\n            #searchElement\n            type=\"search\"\n            [(ngModel)]=\"value\"\n            [placeholder]=\"placeholder\"\n            (blur)=\"handleBlur()\"\n            (search)=\"stopPropagation($event)\"\n            (keyup.enter)=\"handleSearch($event)\"/>\n  </mat-form-field>\n  <button mat-icon-button\n          class=\"td-search-input-clear\"\n          type=\"button\"\n          [@searchState]=\"(searchElement.value ?  'show' : (isRTL ? 'hide-left' : 'hide-right'))\"\n          (click)=\"clearSearch()\">\n    <mat-icon>{{clearIcon}}</mat-icon>\n  </button>\n</div>","styles":[":host .td-search-input{overflow-x:hidden;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:baseline;align-items:baseline;-ms-flex-line-pack:center;align-content:center;max-width:100%;-ms-flex-pack:end;justify-content:flex-end}:host .td-search-input .td-search-input-field{-ms-flex:1;flex:1}:host .td-search-input ::ng-deep mat-form-field .mat-input-element{caret-color:currentColor}:host .td-search-input ::ng-deep mat-form-field.mat-hide-underline .mat-form-field-underline{display:none}:host .td-search-input .td-search-input-clear{-ms-flex:0 0 auto;flex:0 0 auto}"]}]}],"members":{"_input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":50,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/input","name":"MatInput","line":50,"character":13}]}]}],"showUnderline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3},"arguments":["showUnderline"]}]}],"debounce":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":3},"arguments":["debounce"]}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3},"arguments":["placeholder"]}]}],"clearIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3},"arguments":["clearIcon"]}]}],"onSearchDebounce":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":81,"character":3},"arguments":["searchDebounce"]}]}],"onSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":87,"character":3},"arguments":["search"]}]}],"onClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":93,"character":3},"arguments":["clear"]}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":99,"character":3},"arguments":["blur"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":108,"character":15}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/cdk/bidi","name":"Dir","line":108,"character":40},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":12,"character":41}]}],"ngOnInit":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"handleBlur":[{"__symbolic":"method"}],"stopPropagation":[{"__symbolic":"method"}],"handleSearch":[{"__symbolic":"method"}],"clearSearch":[{"__symbolic":"method"}],"_searchTermChanged":[{"__symbolic":"method"}]}}},"origins":{"CovalentSearchModule":"./search.module","TdSearchBoxBase":"./search-box/search-box.component","_TdSearchBoxMixinBase":"./search-box/search-box.component","TdSearchBoxComponent":"./search-box/search-box.component","TdSearchInputBase":"./search-input/search-input.component","_TdSearchInputMixinBase":"./search-input/search-input.component","TdSearchInputComponent":"./search-input/search-input.component"},"importAs":"@covalent/core/search"}
+{"__symbolic":"module","version":4,"metadata":{"CovalentSearchModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":18,"character":4}],"declarations":[{"__symbolic":"reference","name":"TdSearchInputComponent"},{"__symbolic":"reference","name":"TdSearchBoxComponent"}],"exports":[{"__symbolic":"reference","name":"TdSearchInputComponent"},{"__symbolic":"reference","name":"TdSearchBoxComponent"}]}]}],"members":{}},"TdSearchBoxBase":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":8,"character":41}]}]}},"_TdSearchBoxMixinBase":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinControlValueAccessor","line":12,"character":37},"arguments":[{"__symbolic":"reference","name":"TdSearchBoxBase"}]},"TdSearchBoxComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"_TdSearchBoxMixinBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":16,"character":13},"useExisting":{"__symbolic":"reference","name":"TdSearchBoxComponent"},"multi":true}],"selector":"td-search-box","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":23,"character":19},"member":"OnPush"},"inputs":["value"],"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":26,"character":4},"arguments":["inputState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":27,"character":6},"arguments":["0",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":27,"character":17},"arguments":[{"width":"0%","margin":"0px"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":31,"character":6},"arguments":["1",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":31,"character":18},"arguments":[{"width":"100%","margin":{"__symbolic":"reference","module":"@angular/animations","name":"AUTO_STYLE","line":33,"character":16}}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":35,"character":6},"arguments":["0 => 1",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":35,"character":27},"arguments":["200ms ease-in"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":36,"character":6},"arguments":["1 => 0",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":36,"character":27},"arguments":["200ms ease-out"]}]}]]}],"template":"<div class=\"td-search-box\">\n  <button mat-icon-button type=\"button\" class=\"td-search-icon\" (click)=\"searchClicked()\">\n    <mat-icon *ngIf=\"searchVisible && !alwaysVisible\">{{backIcon}}</mat-icon>\n    <mat-icon *ngIf=\"!searchVisible || alwaysVisible\">{{searchIcon}}</mat-icon>\n  </button>\n  <td-search-input #searchInput\n                   [@inputState]=\"alwaysVisible || searchVisible\"\n                   [debounce]=\"debounce\"\n                   [(ngModel)]=\"value\"\n                   [showUnderline]=\"showUnderline\"\n                   [placeholder]=\"placeholder\"\n                   [clearIcon]=\"clearIcon\"\n                   (searchDebounce)=\"handleSearchDebounce($event)\"\n                   (search)=\"handleSearch($event)\"\n                   (clear)=\"handleClear(); toggleVisibility()\"\n                   (blur)=\"handleBlur()\">\n  </td-search-input>\n</div>\n","styles":[":host{display:block}.td-search-box{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.td-search-box .td-search-icon{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.td-search-box td-search-input{margin-left:12px}::ng-deep [dir=rtl] .td-search-box td-search-input{margin-right:12px;margin-left:0!important}.td-search-box td-search-input ::ng-deep .mat-form.field.mat-form-field-appearance-legacy .mat-form-field-wrapper{padding-bottom:1em}"]}]}],"members":{"_searchInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":43,"character":3},"arguments":[{"__symbolic":"reference","name":"TdSearchInputComponent"}]}]}],"backIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3},"arguments":["backIcon"]}]}],"searchIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":3},"arguments":["searchIcon"]}]}],"clearIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3},"arguments":["clearIcon"]}]}],"showUnderline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":3},"arguments":["showUnderline"]}]}],"debounce":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":3},"arguments":["debounce"]}]}],"alwaysVisible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":3},"arguments":["alwaysVisible"]}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":3},"arguments":["placeholder"]}]}],"onSearchDebounce":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":98,"character":3},"arguments":["searchDebounce"]}]}],"onSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":104,"character":3},"arguments":["search"]}]}],"onClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":110,"character":3},"arguments":["clear"]}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":116,"character":3},"arguments":["blur"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":8,"character":41}]}],"searchClicked":[{"__symbolic":"method"}],"toggleVisibility":[{"__symbolic":"method"}],"handleSearchDebounce":[{"__symbolic":"method"}],"handleSearch":[{"__symbolic":"method"}],"handleClear":[{"__symbolic":"method"}],"handleBlur":[{"__symbolic":"method"}]}},"TdSearchInputBase":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":13,"character":41}]}]}},"_TdSearchInputMixinBase":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinControlValueAccessor","line":17,"character":39},"arguments":[{"__symbolic":"reference","name":"TdSearchInputBase"}]},"TdSearchInputComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"_TdSearchInputMixinBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":21,"character":13},"useExisting":{"__symbolic":"reference","name":"TdSearchInputComponent"},"multi":true}],"selector":"td-search-input","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":28,"character":19},"member":"OnPush"},"inputs":["value"],"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":31,"character":4},"arguments":["searchState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":32,"character":6},"arguments":["hide-left",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":32,"character":25},"arguments":[{"transform":"translateX(-150%)","display":"none"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":36,"character":6},"arguments":["hide-right",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":36,"character":26},"arguments":[{"transform":"translateX(150%)","display":"none"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":40,"character":6},"arguments":["show",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":40,"character":21},"arguments":[{"transform":"translateX(0%)","display":"block"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":44,"character":6},"arguments":["* => show",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":44,"character":30},"arguments":["200ms ease-in"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":45,"character":6},"arguments":["show => *",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":45,"character":30},"arguments":["200ms ease-out"]}]}]]}],"template":"<div class=\"td-search-input\">\n  <mat-form-field class=\"td-search-input-field\"\n                  [class.mat-hide-underline]=\"!showUnderline\"\n                  [appearance]=\"appearance\"\n                  floatLabel=\"never\">\n    <input matInput\n            #searchElement\n            type=\"search\"\n            [(ngModel)]=\"value\"\n            [placeholder]=\"placeholder\"\n            (blur)=\"handleBlur()\"\n            (search)=\"stopPropagation($event)\"\n            (keyup.enter)=\"handleSearch($event)\"/>\n    <span matSuffix *ngIf=\"appearance === 'fill' || appearance === 'outline' || appearance === 'standard'\">\n      <ng-template\n        [ngTemplateOutlet]=\"clearButton\">\n      </ng-template>\n    </span>\n  </mat-form-field>\n  <ng-template\n    *ngIf=\"!appearance || appearance === 'legacy'\"\n    [ngTemplateOutlet]=\"clearButton\">\n  </ng-template>\n</div>\n<ng-template #clearButton>\n  <button mat-icon-button\n          class=\"td-search-input-clear\"\n          type=\"button\"\n          [@searchState]=\"(searchElement.value ?  'show' : (isRTL ? 'hide-left' : 'hide-right'))\"\n          (click)=\"clearSearch()\">\n    <mat-icon>{{clearIcon}}</mat-icon>\n  </button>\n</ng-template>\n","styles":[":host .td-search-input{overflow-x:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}:host .td-search-input .td-search-input-field{-webkit-box-flex:1;-ms-flex:1;flex:1}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper{padding-bottom:0}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-fill .mat-form-field-wrapper{padding-bottom:0}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-fill .mat-form-field-wrapper .mat-form-field-flex{height:52px}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-fill .mat-form-field-wrapper .mat-form-field-underline{bottom:0}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-standard .mat-form-field-wrapper{padding-bottom:0}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-standard .mat-form-field-wrapper .mat-form-field-infix{bottom:.4em}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-standard .mat-form-field-wrapper .mat-form-field-underline{bottom:0}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-legacy .mat-form-field-infix{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}:host .td-search-input ::ng-deep mat-form-field .mat-input-element{caret-color:currentColor}:host .td-search-input ::ng-deep mat-form-field.mat-hide-underline .mat-form-field-underline{display:none}:host .td-search-input .td-search-input-clear{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}"]}]}],"members":{"_input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":51,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/input","name":"MatInput","line":51,"character":13}]}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":3},"arguments":["appearance"]}]}],"showUnderline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3},"arguments":["showUnderline"]}]}],"debounce":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":3},"arguments":["debounce"]}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3},"arguments":["placeholder"]}]}],"clearIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3},"arguments":["clearIcon"]}]}],"onSearchDebounce":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":88,"character":3},"arguments":["searchDebounce"]}]}],"onSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":94,"character":3},"arguments":["search"]}]}],"onClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":100,"character":3},"arguments":["clear"]}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":106,"character":3},"arguments":["blur"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":115,"character":15}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/cdk/bidi","name":"Dir","line":115,"character":40},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":13,"character":41}]}],"ngOnInit":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"handleBlur":[{"__symbolic":"method"}],"stopPropagation":[{"__symbolic":"method"}],"handleSearch":[{"__symbolic":"method"}],"clearSearch":[{"__symbolic":"method"}],"_searchTermChanged":[{"__symbolic":"method"}]}}},"origins":{"CovalentSearchModule":"./search.module","TdSearchBoxBase":"./search-box/search-box.component","_TdSearchBoxMixinBase":"./search-box/search-box.component","TdSearchBoxComponent":"./search-box/search-box.component","TdSearchInputBase":"./search-input/search-input.component","_TdSearchInputMixinBase":"./search-input/search-input.component","TdSearchInputComponent":"./search-input/search-input.component"},"importAs":"@covalent/core/search"}

package/search/search-box/search-box.component.scss

@@ -0,0 +1,32 @@
+:host {
+  display: block;
+}
+.td-search-box {
+  // [layout]
+  box-sizing: border-box;
+  display: flex;
+  // [layout="row"]
+  flex-direction: row;
+  // [layout-align="end center"]
+  align-items: baseline;
+  align-content: center;
+  max-width: 100%;
+  justify-content: flex-end;
+  .td-search-icon {
+    // [flex="none"]
+    flex: 0 0 auto;
+    align-self: center;
+  }
+  td-search-input {
+    margin-left: 12px;
+    ::ng-deep [dir='rtl'] & {
+      margin-right: 12px;
+      margin-left: 0 !important;
+    }
+    ::ng-deep .mat-form.field.mat-form-field-appearance-legacy {
+      .mat-form-field-wrapper {
+        padding-bottom: 1em;
+      }
+    }
+  }
+}

package/search/search-input/README.md

@@ -14,6 +14,8 @@
   + Sets if the input underline should be visible. Defaults to 'false'.
 + clearIcon?: string
   + The icon used to clear the search input. Defaults to 'cancel' icon.
++ appearance?: MatFormFieldAppearance
+  + Appearance style for the underlying input component.
 
 #### Events
 
@@ -31,12 +33,13 @@
   + Emits [void].
 
 #### Methods
+
 + focus: function
   + Method to focus to underlying input.
 + clearSearch: function
   + Method to clear the underlying input. 
 
-  ## Setup
+## Setup
 
 Import the [CovalentSearchModule] in your NgModule:
 
@@ -57,6 +60,6 @@ export class MyModule {}
 Example for HTML usage:
 
 ```html
-    <td-search-input placeholder="Search here" [(ngModel)]="searchInputTerm" [showUnderline]="false|true" [debounce]="500" (searchDebounce)="searchInputTerm = $event" (search)="searchInputTerm = $event" (clear)="searchInputTerm = ''">
+    <td-search-input appearance="legacy|standard|fill|outline" placeholder="Search here" [(ngModel)]="searchInputTerm" [showUnderline]="false|true" [debounce]="500" (searchDebounce)="searchInputTerm = $event" (search)="searchInputTerm = $event" (clear)="searchInputTerm = ''">
     </td-search-input>
 ```

package/search/search-input/search-input.component.d.ts

@@ -1,6 +1,7 @@
 import { OnInit, EventEmitter, ChangeDetectorRef } from '@angular/core';
 import { Dir } from '@angular/cdk/bidi';
 import { MatInput } from '@angular/material/input';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
 import { IControlValueAccessor } from '@covalent/core/common';
 export declare class TdSearchInputBase {
     _changeDetectorRef: ChangeDetectorRef;
@@ -10,6 +11,11 @@ export declare const _TdSearchInputMixinBase: (new (...args: any[]) => IControlV
 export declare class TdSearchInputComponent extends _TdSearchInputMixinBase implements IControlValueAccessor, OnInit {
     private _dir;
     _input: MatInput;
+    /**
+     * appearance?: MatFormFieldAppearance
+     * Appearance style for the underlying input component.
+     */
+    appearance: MatFormFieldAppearance;
     /**
      * showUnderline?: boolean
      * Sets if the input underline should be visible. Defaults to 'false'.

package/search/search-input/search-input.component.scss

@@ -0,0 +1,63 @@
+:host {
+  .td-search-input {
+    overflow-x: hidden;
+    // [layout]
+    box-sizing: border-box;
+    display: flex;
+    // [layout="row"]
+    flex-direction: row;
+    // [layout-align="end center"]
+    align-items: baseline;
+    align-content: center;
+    max-width: 100%;
+    justify-content: flex-end;
+    .td-search-input-field {
+      flex: 1;
+    }
+    ::ng-deep mat-form-field {
+      &.mat-form-field-appearance-outline {
+        .mat-form-field-wrapper {
+          padding-bottom: 0;
+        }
+      }
+      &.mat-form-field-appearance-fill {
+        .mat-form-field-wrapper {
+          padding-bottom: 0;
+          .mat-form-field-flex {
+            height: 52px;
+          }
+          .mat-form-field-underline {
+            bottom: 0;
+          }
+        }
+      }
+      &.mat-form-field-appearance-standard {
+        .mat-form-field-wrapper {
+          padding-bottom: 0;
+          .mat-form-field-infix {
+            bottom: 0.4em;
+          }
+          .mat-form-field-underline {
+            bottom: 0;
+          }
+        }
+      }
+      &.mat-form-field-appearance-legacy {
+        .mat-form-field-infix {
+          align-self: center;
+        }
+      }
+      .mat-input-element {
+        caret-color: currentColor;
+      }
+      &.mat-hide-underline .mat-form-field-underline {
+        display: none;
+      }
+    }
+    .td-search-input-clear {
+      // [flex="none"]
+      flex: 0 0 auto;
+      align-self: center;
+    }
+  }
+}

package/sidesheet/README.md

@@ -0,0 +1,68 @@
+# td-sidesheet
+
+Wrap the sidesheet elements you need in a `td-sidesheet` element.
+
+## td-sidesheet-header
+
+`td-sidesheet-header` creates a header that can hold a title and an action (optional)
+
+## td-sidesheet-title
+
+`td-sidesheet-title` adds a title to the header (optional)
+
+## td-sidesheet-header-action
+
+`td-sidesheet-header-action` creates an action in the header (optional)
+
+## td-sidesheet-content
+
+`td-sidesheet-content` creates an element to hold the content with margins that follow Material spec
+
+## td-sidesheet-actions
+
+`td-sidesheet-actions` creates a sticky footer that can hold multiple actions (optional)
+
+## Setup
+
+Import the [CovalentSidesheetModule] in your NgModule:
+
+```typescript
+import { CovalentSidesheetModule } from '@covalent/core/sidesheet';
+@NgModule({
+  imports: [
+    CovalentSidesheetModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+## Usage
+
+Basic Example:
+
+```html
+<td-sidesheet>
+  Sidesheet Content
+</td-sidesheet>
+```
+
+Example with optional components:
+
+```html
+<td-sidesheet>
+  <td-sidesheet-header>
+    <td-sidesheet-title>Sidesheet Title</td-sidesheet-title>
+    <button mat-icon-button td-sidesheet-header-action>
+      ... add button for sidesheet action
+    </button>
+  </td-sidesheet-header>
+  <td-sidesheet-content>
+    Sidesheet Content
+  </td-sidesheet-content>
+  <td-sidesheet-actions>
+    ... add button elements
+  </td-sidesheet-actions>
+</td-sidesheet>  
+```

package/sidesheet/covalent-core-sidesheet.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';

package/sidesheet/covalent-core-sidesheet.metadata.json

@@ -0,0 +1 @@
+{"__symbolic":"module","version":4,"metadata":{"CovalentSidesheetModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":19,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/divider","name":"MatDividerModule","line":22,"character":4}],"declarations":[[{"__symbolic":"reference","name":"TdSidesheetComponent"},{"__symbolic":"reference","name":"TdSidesheetHeaderComponent"},{"__symbolic":"reference","name":"TdSidesheetContentDirective"},{"__symbolic":"reference","name":"TdSidesheetTitleDirective"},{"__symbolic":"reference","name":"TdSidesheetActionsDirective"}]],"exports":[[{"__symbolic":"reference","name":"TdSidesheetComponent"},{"__symbolic":"reference","name":"TdSidesheetHeaderComponent"},{"__symbolic":"reference","name":"TdSidesheetContentDirective"},{"__symbolic":"reference","name":"TdSidesheetTitleDirective"},{"__symbolic":"reference","name":"TdSidesheetActionsDirective"}]]}]}],"members":{}},"TdSidesheetContentDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"td-sidesheet-content"}]}],"members":{}},"TdSidesheetTitleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":7,"character":1},"arguments":[{"selector":"td-sidesheet-title"}]}],"members":{}},"TdSidesheetActionsDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":12,"character":1},"arguments":[{"selector":"td-sidesheet-actions","host":{"[class.align-end]":"align === \"end\"","[class.align-start]":"align === \"start\"","$quoted$":["[class.align-end]","[class.align-start]"]}}]}],"members":{"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}]}},"TdSidesheetHeaderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":24,"character":1},"arguments":[{"selector":"td-sidesheet-header","template":"<ng-content select=\"td-sidesheet-title\"></ng-content>\n<ng-content select=\"[mat-icon-button][td-sidesheet-header-action]\"></ng-content>"}]}],"members":{}},"TdSidesheetComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":30,"character":1},"arguments":[{"selector":"td-sidesheet","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":34,"character":17},"member":"None"},"template":"<ng-content select=\"td-sidesheet-header\"></ng-content>\n<ng-template [ngIf]=\"headerExists\">\n  <mat-divider></mat-divider>\n</ng-template>\n<div class=\"td-sidesheet-content-wrapper\">\n  <ng-content></ng-content>\n</div>\n<ng-template [ngIf]=\"actionsExist\">\n  <mat-divider></mat-divider>\n</ng-template>\n<ng-content select=\"td-sidesheet-actions\"></ng-content>","styles":["td-sidesheet,td-sidesheet td-sidesheet-header{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex}td-sidesheet{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:0;width:100%;min-height:100%;height:100%}td-sidesheet td-sidesheet-header{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;width:100%;padding:20px 16px;font-size:18px}td-sidesheet .mat-divider-horizontal{position:static!important}td-sidesheet td-sidesheet-title{-webkit-box-flex:1;-ms-flex:1;flex:1}td-sidesheet td-sidesheet-header .mat-button-focus-overlay{background-color:transparent!important}td-sidesheet td-sidesheet-header .mat-icon-button{width:24px;height:24px;line-height:21px}td-sidesheet td-sidesheet-actions{padding:8px;display:block}td-sidesheet .td-sidesheet-content-wrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative;overflow-y:auto}td-sidesheet td-sidesheet-content{display:block;padding:16px}td-sidesheet-content>:first-child,td-sidesheet>:first-child{margin-top:0}td-sidesheet-content>:last-child,td-sidesheet>:last-child{margin-bottom:0}"]}]}],"members":{"headerExists":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":37,"character":3},"arguments":[{"__symbolic":"reference","name":"TdSidesheetHeaderComponent"}]}]}],"actionsExist":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":38,"character":3},"arguments":[{"__symbolic":"reference","name":"TdSidesheetActionsDirective"}]}]}]}}},"origins":{"CovalentSidesheetModule":"./sidesheet.module","TdSidesheetContentDirective":"./sidesheet.component","TdSidesheetTitleDirective":"./sidesheet.component","TdSidesheetActionsDirective":"./sidesheet.component","TdSidesheetHeaderComponent":"./sidesheet.component","TdSidesheetComponent":"./sidesheet.component"},"importAs":"@covalent/core/sidesheet"}

package/sidesheet/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/sidesheet/package.json

@@ -0,0 +1,13 @@
+{
+  "main": "../bundles/covalent-core-sidesheet.umd.js",
+  "module": "../fesm5/covalent-core-sidesheet.js",
+  "es2015": "../fesm2015/covalent-core-sidesheet.js",
+  "esm5": "../esm5/sidesheet/covalent-core-sidesheet.js",
+  "esm2015": "../esm2015/sidesheet/covalent-core-sidesheet.js",
+  "fesm5": "../fesm5/covalent-core-sidesheet.js",
+  "fesm2015": "../fesm2015/covalent-core-sidesheet.js",
+  "typings": "covalent-core-sidesheet.d.ts",
+  "metadata": "covalent-core-sidesheet.metadata.json",
+  "sideEffects": false,
+  "name": "@covalent/core/sidesheet"
+}

package/sidesheet/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './sidesheet.module';
+export * from './sidesheet.component';

package/sidesheet/sidesheet.component.d.ts

@@ -0,0 +1,13 @@
+export declare class TdSidesheetContentDirective {
+}
+export declare class TdSidesheetTitleDirective {
+}
+export declare class TdSidesheetActionsDirective {
+    align: 'start' | 'end';
+}
+export declare class TdSidesheetHeaderComponent {
+}
+export declare class TdSidesheetComponent {
+    headerExists: TdSidesheetHeaderComponent;
+    actionsExist: TdSidesheetActionsDirective;
+}