@covalent/core 2.0.0-rc.2 → 2.1.0

package/layout/layout-manage-list/layout-manage-list.component.scss

@@ -0,0 +1,77 @@
+@import '../../common/styles/core/whiteframe';
+
+:host {
+  display: flex;
+  margin: 0;
+  width: 100%;
+  min-height: 100%;
+  height: 100%;
+  overflow: hidden;
+  mat-sidenav-container.td-layout-manage-list {
+    // [flex]
+    flex: 1;
+    & > .mat-drawer > .mat-drawer-inner-container {
+      &.mat-drawer-opened,
+      &.mat-drawer-opening,
+      &.mat-drawer-closed,
+      &.mat-drawer-closing {
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
+      }
+    }
+  }
+  .td-layout-manage-list-sidenav {
+    text-align: start;
+    // [flex]
+    flex: 1;
+    // [md-content]
+    display: block;
+    position: relative;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .td-layout-manage-list-main {
+    margin: 0;
+    width: 100%;
+    min-height: 100%;
+    height: 100%;
+    position: relative;
+    overflow: auto;
+    // [layout="column"]
+    flex-direction: column;
+    box-sizing: border-box;
+    display: flex;
+    .td-layout-manage-list-content {
+      // [md-content]
+      display: block;
+      position: relative;
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+      // [flex]
+      flex: 1;
+    }
+  }
+}
+:host ::ng-deep {
+  mat-sidenav-container.td-layout-manage-list {
+    & > .mat-drawer-content {
+      flex-grow: 1;
+    }
+    /* Ensure the left sidenav is a flex column & 100% height */
+    & > .mat-drawer > .mat-drawer-inner-container {
+      box-shadow: $whiteframe-shadow-1dp;
+      box-sizing: border-box;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -moz-box;
+      display: -ms-flexbox;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+  mat-nav-list a[mat-list-item] .mat-list-item-content {
+    font-size: 14px;
+  }
+  .mat-toolbar {
+    font-weight: 400;
+  }
+}

package/layout/layout-nav/layout-nav.component.scss

@@ -0,0 +1,50 @@
+.td-menu-button {
+  margin-left: 0;
+  ::ng-deep [dir='rtl'] & {
+    margin-right: 0;
+    margin-left: 6px;
+  }
+}
+
+:host {
+  display: flex;
+  margin: 0;
+  width: 100%;
+  min-height: 100%;
+  height: 100%;
+  overflow: hidden;
+  .td-layout-nav-wrapper {
+    // [layout="column"]
+    flex-direction: column;
+    box-sizing: border-box;
+    display: flex;
+    // [layout-fill]
+    margin: 0;
+    width: 100%;
+    min-height: 100%;
+    height: 100%;
+    .td-layout-nav-toolbar-content {
+      // [layout="row"]
+      flex-direction: row;
+      box-sizing: border-box;
+      display: flex;
+      // [layout-align="start center"]
+      align-items: center;
+      align-content: center;
+      max-width: 100%;
+      justify-content: flex-start;
+    }
+    .td-layout-nav-content {
+      // [layout="column"]
+      flex-direction: column;
+      box-sizing: border-box;
+      display: flex;
+      // [flex]
+      flex: 1;
+      // [md-content]
+      position: relative;
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+}

package/layout/layout-nav-list/layout-nav-list.component.scss

@@ -0,0 +1,109 @@
+@import '../../common/styles/core/whiteframe';
+
+:host {
+  .td-layout-nav-list-wrapper > .mat-sidenav-container {
+    > mat-sidenav.mat-drawer-side {
+      border-right: 0;
+      [dir='rtl'] & {
+        border-left: 0;
+      }
+    }
+  }
+  // [layout-fill]
+  margin: 0;
+  width: 100%;
+  min-height: 100%;
+  height: 100%;
+  overflow: hidden;
+  // [layout="column"]
+  flex-direction: column;
+  box-sizing: border-box;
+  display: flex;
+  // [flex]
+  flex: 1;
+  .td-layout-nav-list-wrapper {
+    // [layout="column"]
+    flex-direction: column;
+    box-sizing: border-box;
+    display: flex;
+    // [flex]
+    flex: 1;
+    // [md-content]
+    position: relative;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    .td-layout-nav-list-toolbar-content {
+      // [layout="row"]
+      flex-direction: row;
+      box-sizing: border-box;
+      display: flex;
+      // [layout-align="start center"]
+      align-items: center;
+      align-content: center;
+      max-width: 100%;
+      justify-content: flex-start;
+    }
+    .td-layout-nav-list-content {
+      text-align: start;
+      // [flex]
+      flex: 1;
+      // [md-content]
+      display: block;
+      position: relative;
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+    .td-layout-nav-list-main {
+      // [layout="column"]
+      flex-direction: column;
+      box-sizing: border-box;
+      display: flex;
+      // [layout-fill]
+      margin: 0;
+      width: 100%;
+      min-height: 100%;
+      height: 100%;
+      position: relative;
+      overflow: auto;
+      .td-layout-nav-list-content {
+        // [md-content]
+        display: block;
+        position: relative;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+        // [flex]
+        flex: 1;
+      }
+    }
+    mat-sidenav-container.td-layout-nav-list {
+      // [flex]
+      flex: 1;
+      & > mat-sidenav {
+        &.mat-drawer-opened,
+        &.mat-drawer-opening,
+        &.mat-drawer-closed,
+        &.mat-drawer-closing {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+}
+:host ::ng-deep {
+  mat-sidenav-container.td-layout-nav-list {
+    & > .mat-drawer-content {
+      flex-grow: 1;
+    }
+    /* Ensure the left sidenav is a flex column & 100% height */
+    & > .mat-drawer > .mat-drawer-inner-container {
+      box-shadow: $whiteframe-shadow-1dp;
+      box-sizing: border-box;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -moz-box;
+      display: -ms-flexbox;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}

package/layout/layout.component.scss

@@ -0,0 +1,20 @@
+:host {
+  display: flex;
+  margin: 0;
+  width: 100%;
+  min-height: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  ::ng-deep {
+    // Ensuring sidenav content has flex column properties
+    & > mat-sidenav-container .mat-drawer > .mat-drawer-inner-container {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -moz-box;
+      display: -ms-flexbox;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}

package/layout/navigation-drawer/navigation-drawer.component.d.ts

@@ -47,6 +47,13 @@ export declare class TdNavigationDrawerComponent implements OnInit, OnDestroy {
      * If [icon] is set, then this will not be shown.
      */
     logo: string;
+    /**
+     * avatar?: string
+     *
+     * avatar url to be displayed before the title
+     * If [icon] or [logo] are set, then this will not be shown.
+     */
+    avatar: string;
     /**
      * color?: string
      *

package/layout/navigation-drawer/navigation-drawer.component.scss

@@ -0,0 +1,57 @@
+:host {
+  width: 100%;
+  .td-navigation-drawer-content,
+  .td-navigation-drawer-menu-content {
+    &.ng-animating {
+      overflow: hidden;
+    }
+  }
+  mat-toolbar {
+    padding: 16px;
+    &.td-toolbar-background {
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+    &.td-nagivation-drawer-toolbar {
+      flex-direction: column;
+      height: auto !important;
+      display: block !important;
+    }
+    .td-navigation-drawer-toolbar-content {
+      // [layout="row"]
+      flex-direction: row;
+      box-sizing: border-box;
+      display: flex;
+      // [layout-align="start center"]
+      align-items: center;
+      align-content: center;
+      max-width: 100%;
+      justify-content: flex-start;
+
+      .td-nagivation-drawer-toolbar-avatar {
+        border-radius: 50%;
+        height: 60px;
+        width: 60px;
+        margin: 0 12px 12px 0;
+      }
+    }
+    .td-navigation-drawer-menu-toggle {
+      // [layout="row"]
+      flex-direction: row;
+      box-sizing: border-box;
+      display: flex;
+      .td-navigation-drawer-label {
+        // [flex]
+        flex: 1;
+      }
+      .td-navigation-drawer-menu-button {
+        height: 24px;
+        line-height: 24px;
+        width: 24px;
+      }
+    }
+  }
+  > div {
+    overflow: hidden;
+  }
+}

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

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"CovalentLoadingModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":23,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-bar","name":"MatProgressBarModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":27,"character":4},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":28,"character":4},{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalModule","line":29,"character":4}],"declarations":[[{"__symbolic":"reference","name":"TdLoadingComponent"},{"__symbolic":"reference","name":"TdLoadingDirective"}]],"exports":[[{"__symbolic":"reference","name":"TdLoadingComponent"},{"__symbolic":"reference","name":"TdLoadingDirective"}]],"providers":[{"__symbolic":"reference","name":"LOADING_FACTORY_PROVIDER"},{"__symbolic":"reference","name":"LOADING_PROVIDER"}],"entryComponents":[[{"__symbolic":"reference","name":"TdLoadingComponent"}]]}]}],"members":{}},"LoadingType":{"Circular":"circular","Linear":"linear"},"LoadingMode":{"Determinate":"determinate","Indeterminate":"indeterminate"},"LoadingStrategy":{"Overlay":"overlay","Replace":"replace"},"LoadingStyle":{"FullScreen":"fullscreen","Overlay":"overlay","None":"none"},"TD_CIRCLE_DIAMETER":100,"TdLoadingComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":30,"character":1},"arguments":[{"selector":"td-loading","animations":[{"__symbolic":"reference","module":"@covalent/core/common","name":"tdFadeInOutAnimation","line":35,"character":4}],"template":"<div class=\"td-loading-wrapper\"\n    [style.min-height]=\"getHeight()\"\n    [class.td-overlay-circular]=\"(isOverlay() || isFullScreen()) && !isLinear()\"\n    [class.td-overlay]=\"isOverlay() || isFullScreen()\" \n    [class.td-fullscreen]=\"isFullScreen()\">\n  <div [@tdFadeInOut]=\"animation\"\n     (@tdFadeInOut.done)=\"animationComplete($event)\"\n     [style.min-height]=\"getHeight()\"\n     class=\"td-loading\">\n    <mat-progress-spinner *ngIf=\"isCircular()\" \n                        [mode]=\"mode\"\n                        [value]=\"value\" \n                        [color]=\"color\" \n                        [diameter]=\"getCircleDiameter()\"\n                        [strokeWidth]=\"getCircleStrokeWidth()\">\n    </mat-progress-spinner>\n    <mat-progress-bar *ngIf=\"isLinear()\" \n                     [mode]=\"mode\"\n                     [value]=\"value\"\n                     [color]=\"color\">\n    </mat-progress-bar>\n  </div>\n  <ng-template [cdkPortalOutlet]=\"content\"></ng-template>\n</div>","styles":[".td-loading-wrapper{position:relative;display:block}.td-loading-wrapper.td-fullscreen{position:inherit}.td-loading-wrapper .td-loading{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:center;justify-content:center;-ms-flex:1;flex:1}.td-loading-wrapper.td-overlay .td-loading{position:absolute;margin:0;top:0;left:0;right:0;z-index:1000}.td-loading-wrapper.td-overlay .td-loading mat-progress-bar{position:absolute;top:0;left:0;right:0}.td-loading-wrapper.td-overlay-circular .td-loading{bottom:0}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":99,"character":35},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":100,"character":42}]}],"ngDoCheck":[{"__symbolic":"method"}],"getHeight":[{"__symbolic":"method"}],"getCircleDiameter":[{"__symbolic":"method"}],"getCircleStrokeWidth":[{"__symbolic":"method"}],"isCircular":[{"__symbolic":"method"}],"isLinear":[{"__symbolic":"method"}],"isFullScreen":[{"__symbolic":"method"}],"isOverlay":[{"__symbolic":"method"}],"animationComplete":[{"__symbolic":"method"}],"inAnimationCompleted":[{"__symbolic":"method"}],"outAnimationCompleted":[{"__symbolic":"method"}],"startInAnimation":[{"__symbolic":"method"}],"startOutAnimation":[{"__symbolic":"method"}],"_setCircleDiameter":[{"__symbolic":"method"}],"_hostHeight":[{"__symbolic":"method"}]}},"TdLoadingContext":{"__symbolic":"class","members":{}},"TdLoadingDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":18,"character":1},"arguments":[{"selector":"[tdLoading]"}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3},"arguments":["tdLoading"]}]}],"until":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3},"arguments":["tdLoadingUntil"]}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3},"arguments":["tdLoadingType"]}]}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3},"arguments":["tdLoadingMode"]}]}],"strategy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":3},"arguments":["tdLoadingStrategy"]}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":3},"arguments":["tdLoadingColor"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":119,"character":41},{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"TdLoadingContext"}]},{"__symbolic":"reference","name":"TdLoadingService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_registerComponent":[{"__symbolic":"method"}]}},"ITdLoadingConfig":{"__symbolic":"interface"},"TdLoadingConfig":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}]}},"ITdLoadingDirectiveConfig":{"__symbolic":"interface"},"TdLoadingDirectiveConfig":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"TdLoadingConfig"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}]}},"TdLoadingService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":48,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TdLoadingFactory"}]}],"createComponent":[{"__symbolic":"method"}],"create":[{"__symbolic":"method"}],"removeComponent":[{"__symbolic":"method"}],"register":[{"__symbolic":"method"}],"resolve":[{"__symbolic":"method"}],"resolveAll":[{"__symbolic":"method"}],"setValue":[{"__symbolic":"method"}],"_clearTimeout":[{"__symbolic":"method"}]}},"LOADING_PROVIDER_FACTORY":{"__symbolic":"function","parameters":["parent","loadingFactory"],"value":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"reference","name":"parent"},"right":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"TdLoadingService"},"arguments":[{"__symbolic":"reference","name":"loadingFactory"}]}}},"LOADING_PROVIDER":{"provide":{"__symbolic":"reference","name":"TdLoadingService"},"deps":[[{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":239,"character":14}},{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":239,"character":30}},{"__symbolic":"reference","name":"TdLoadingService"}],{"__symbolic":"reference","name":"TdLoadingFactory"}],"useFactory":{"__symbolic":"reference","name":"LOADING_PROVIDER_FACTORY"}},"IInternalLoadingOptions":{"__symbolic":"interface"},"ILoadingRef":{"__symbolic":"interface"},"TdLoadingFactory":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":27,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":30,"character":49},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":31,"character":32},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":32,"character":33}]}],"createFullScreenComponent":[{"__symbolic":"method"}],"createOverlayComponent":[{"__symbolic":"method"}],"createReplaceComponent":[{"__symbolic":"method"}],"_createOverlay":[{"__symbolic":"method"}],"_createComponent":[{"__symbolic":"method"}],"_initializeContext":[{"__symbolic":"method"}],"_mapOptions":[{"__symbolic":"method"}]}},"LOADING_FACTORY_PROVIDER_FACTORY":{"__symbolic":"function","parameters":["parent","componentFactoryResolver","overlay","injector"],"value":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"reference","name":"parent"},"right":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"TdLoadingFactory"},"arguments":[{"__symbolic":"reference","name":"componentFactoryResolver"},{"__symbolic":"reference","name":"overlay"},{"__symbolic":"reference","name":"injector"}]}}},"LOADING_FACTORY_PROVIDER":{"provide":{"__symbolic":"reference","name":"TdLoadingFactory"},"deps":[[{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":212,"character":14}},{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":212,"character":30}},{"__symbolic":"reference","name":"TdLoadingFactory"}],{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":30,"character":49},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":31,"character":32},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":32,"character":33}],"useFactory":{"__symbolic":"reference","name":"LOADING_FACTORY_PROVIDER_FACTORY"}}},"origins":{"CovalentLoadingModule":"./loading.module","LoadingType":"./loading.component","LoadingMode":"./loading.component","LoadingStrategy":"./loading.component","LoadingStyle":"./loading.component","TD_CIRCLE_DIAMETER":"./loading.component","TdLoadingComponent":"./loading.component","TdLoadingContext":"./directives/loading.directive","TdLoadingDirective":"./directives/loading.directive","ITdLoadingConfig":"./services/loading.service","TdLoadingConfig":"./services/loading.service","ITdLoadingDirectiveConfig":"./services/loading.service","TdLoadingDirectiveConfig":"./services/loading.service","TdLoadingService":"./services/loading.service","LOADING_PROVIDER_FACTORY":"./services/loading.service","LOADING_PROVIDER":"./services/loading.service","IInternalLoadingOptions":"./services/loading.factory","ILoadingRef":"./services/loading.factory","TdLoadingFactory":"./services/loading.factory","LOADING_FACTORY_PROVIDER_FACTORY":"./services/loading.factory","LOADING_FACTORY_PROVIDER":"./services/loading.factory"},"importAs":"@covalent/core/loading"}
+{"__symbolic":"module","version":4,"metadata":{"CovalentLoadingModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":23,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-bar","name":"MatProgressBarModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":27,"character":4},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":28,"character":4},{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalModule","line":29,"character":4}],"declarations":[[{"__symbolic":"reference","name":"TdLoadingComponent"},{"__symbolic":"reference","name":"TdLoadingDirective"}]],"exports":[[{"__symbolic":"reference","name":"TdLoadingComponent"},{"__symbolic":"reference","name":"TdLoadingDirective"}]],"providers":[{"__symbolic":"reference","name":"LOADING_FACTORY_PROVIDER"},{"__symbolic":"reference","name":"LOADING_PROVIDER"}],"entryComponents":[[{"__symbolic":"reference","name":"TdLoadingComponent"}]]}]}],"members":{}},"LoadingType":{"Circular":"circular","Linear":"linear"},"LoadingMode":{"Determinate":"determinate","Indeterminate":"indeterminate"},"LoadingStrategy":{"Overlay":"overlay","Replace":"replace"},"LoadingStyle":{"FullScreen":"fullscreen","Overlay":"overlay","None":"none"},"TD_CIRCLE_DIAMETER":100,"TdLoadingComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":30,"character":1},"arguments":[{"selector":"td-loading","animations":[{"__symbolic":"reference","module":"@covalent/core/common","name":"tdFadeInOutAnimation","line":35,"character":4}],"template":"<div class=\"td-loading-wrapper\"\n    [style.min-height]=\"getHeight()\"\n    [class.td-overlay-circular]=\"(isOverlay() || isFullScreen()) && !isLinear()\"\n    [class.td-overlay]=\"isOverlay() || isFullScreen()\" \n    [class.td-fullscreen]=\"isFullScreen()\">\n  <div [@tdFadeInOut]=\"animation\"\n     (@tdFadeInOut.done)=\"animationComplete($event)\"\n     [style.min-height]=\"getHeight()\"\n     class=\"td-loading\">\n    <mat-progress-spinner *ngIf=\"isCircular()\" \n                        [mode]=\"mode\"\n                        [value]=\"value\" \n                        [color]=\"color\" \n                        [diameter]=\"getCircleDiameter()\"\n                        [strokeWidth]=\"getCircleStrokeWidth()\">\n    </mat-progress-spinner>\n    <mat-progress-bar *ngIf=\"isLinear()\" \n                     [mode]=\"mode\"\n                     [value]=\"value\"\n                     [color]=\"color\">\n    </mat-progress-bar>\n  </div>\n  <ng-template [cdkPortalOutlet]=\"content\"></ng-template>\n</div>","styles":[".td-loading-wrapper{position:relative;display:block}.td-loading-wrapper.td-fullscreen{position:inherit}.td-loading-wrapper .td-loading{-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:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:1;-ms-flex:1;flex:1}.td-loading-wrapper.td-overlay .td-loading{position:absolute;margin:0;top:0;left:0;right:0;z-index:1000}.td-loading-wrapper.td-overlay .td-loading mat-progress-bar{position:absolute;top:0;left:0;right:0}.td-loading-wrapper.td-overlay-circular .td-loading{bottom:0}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":99,"character":35},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":100,"character":42}]}],"ngDoCheck":[{"__symbolic":"method"}],"getHeight":[{"__symbolic":"method"}],"getCircleDiameter":[{"__symbolic":"method"}],"getCircleStrokeWidth":[{"__symbolic":"method"}],"isCircular":[{"__symbolic":"method"}],"isLinear":[{"__symbolic":"method"}],"isFullScreen":[{"__symbolic":"method"}],"isOverlay":[{"__symbolic":"method"}],"animationComplete":[{"__symbolic":"method"}],"inAnimationCompleted":[{"__symbolic":"method"}],"outAnimationCompleted":[{"__symbolic":"method"}],"startInAnimation":[{"__symbolic":"method"}],"startOutAnimation":[{"__symbolic":"method"}],"_setCircleDiameter":[{"__symbolic":"method"}],"_hostHeight":[{"__symbolic":"method"}]}},"TdLoadingContext":{"__symbolic":"class","members":{}},"TdLoadingDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":18,"character":1},"arguments":[{"selector":"[tdLoading]"}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3},"arguments":["tdLoading"]}]}],"until":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3},"arguments":["tdLoadingUntil"]}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3},"arguments":["tdLoadingType"]}]}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3},"arguments":["tdLoadingMode"]}]}],"strategy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":3},"arguments":["tdLoadingStrategy"]}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":3},"arguments":["tdLoadingColor"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":119,"character":41},{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"TdLoadingContext"}]},{"__symbolic":"reference","name":"TdLoadingService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_registerComponent":[{"__symbolic":"method"}]}},"ITdLoadingConfig":{"__symbolic":"interface"},"TdLoadingConfig":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}]}},"ITdLoadingDirectiveConfig":{"__symbolic":"interface"},"TdLoadingDirectiveConfig":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"TdLoadingConfig"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}]}},"TdLoadingService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":48,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TdLoadingFactory"}]}],"createComponent":[{"__symbolic":"method"}],"create":[{"__symbolic":"method"}],"removeComponent":[{"__symbolic":"method"}],"register":[{"__symbolic":"method"}],"resolve":[{"__symbolic":"method"}],"resolveAll":[{"__symbolic":"method"}],"setValue":[{"__symbolic":"method"}],"_clearTimeout":[{"__symbolic":"method"}]}},"LOADING_PROVIDER_FACTORY":{"__symbolic":"function","parameters":["parent","loadingFactory"],"value":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"reference","name":"parent"},"right":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"TdLoadingService"},"arguments":[{"__symbolic":"reference","name":"loadingFactory"}]}}},"LOADING_PROVIDER":{"provide":{"__symbolic":"reference","name":"TdLoadingService"},"deps":[[{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":239,"character":14}},{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":239,"character":30}},{"__symbolic":"reference","name":"TdLoadingService"}],{"__symbolic":"reference","name":"TdLoadingFactory"}],"useFactory":{"__symbolic":"reference","name":"LOADING_PROVIDER_FACTORY"}},"IInternalLoadingOptions":{"__symbolic":"interface"},"ILoadingRef":{"__symbolic":"interface"},"TdLoadingFactory":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":27,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":30,"character":49},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":31,"character":32},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":32,"character":33}]}],"createFullScreenComponent":[{"__symbolic":"method"}],"createOverlayComponent":[{"__symbolic":"method"}],"createReplaceComponent":[{"__symbolic":"method"}],"_createOverlay":[{"__symbolic":"method"}],"_createComponent":[{"__symbolic":"method"}],"_initializeContext":[{"__symbolic":"method"}],"_mapOptions":[{"__symbolic":"method"}]}},"LOADING_FACTORY_PROVIDER_FACTORY":{"__symbolic":"function","parameters":["parent","componentFactoryResolver","overlay","injector"],"value":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"reference","name":"parent"},"right":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"TdLoadingFactory"},"arguments":[{"__symbolic":"reference","name":"componentFactoryResolver"},{"__symbolic":"reference","name":"overlay"},{"__symbolic":"reference","name":"injector"}]}}},"LOADING_FACTORY_PROVIDER":{"provide":{"__symbolic":"reference","name":"TdLoadingFactory"},"deps":[[{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":212,"character":14}},{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":212,"character":30}},{"__symbolic":"reference","name":"TdLoadingFactory"}],{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":30,"character":49},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":31,"character":32},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":32,"character":33}],"useFactory":{"__symbolic":"reference","name":"LOADING_FACTORY_PROVIDER_FACTORY"}}},"origins":{"CovalentLoadingModule":"./loading.module","LoadingType":"./loading.component","LoadingMode":"./loading.component","LoadingStrategy":"./loading.component","LoadingStyle":"./loading.component","TD_CIRCLE_DIAMETER":"./loading.component","TdLoadingComponent":"./loading.component","TdLoadingContext":"./directives/loading.directive","TdLoadingDirective":"./directives/loading.directive","ITdLoadingConfig":"./services/loading.service","TdLoadingConfig":"./services/loading.service","ITdLoadingDirectiveConfig":"./services/loading.service","TdLoadingDirectiveConfig":"./services/loading.service","TdLoadingService":"./services/loading.service","LOADING_PROVIDER_FACTORY":"./services/loading.service","LOADING_PROVIDER":"./services/loading.service","IInternalLoadingOptions":"./services/loading.factory","ILoadingRef":"./services/loading.factory","TdLoadingFactory":"./services/loading.factory","LOADING_FACTORY_PROVIDER_FACTORY":"./services/loading.factory","LOADING_FACTORY_PROVIDER":"./services/loading.factory"},"importAs":"@covalent/core/loading"}

package/loading/loading.component.scss

@@ -0,0 +1,42 @@
+.td-loading-wrapper {
+  position: relative;
+  display: block;
+  &.td-fullscreen {
+    position: inherit;
+  }
+  .td-loading {
+    // layout
+    box-sizing: border-box;
+    display: flex;
+    // [layout="row"]
+    flex-direction: row;
+    // [layout-align="center center"]
+    align-items: center;
+    align-content: center;
+    max-width: 100%;
+    justify-content: center;
+    // flex
+    flex: 1;
+  }
+  &.td-overlay {
+    .td-loading {
+      position: absolute;
+      margin: 0;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 1000;
+      mat-progress-bar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+      }
+    }
+  }
+  &.td-overlay-circular {
+    .td-loading {
+      bottom: 0;
+    }
+  }
+}

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

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"CovalentMenuModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/material/divider","name":"MatDividerModule","line":17,"character":4}],"declarations":[[{"__symbolic":"reference","name":"TdMenuComponent"}]],"exports":[[{"__symbolic":"reference","name":"TdMenuComponent"}]]}]}],"members":{}},"TdMenuComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"td-menu","template":"<ng-content select=\"[td-menu-header]\"></ng-content>\n<mat-divider></mat-divider>\n<div class=\"td-menu-content\">\n  <ng-content></ng-content>\n</div>\n<mat-divider></mat-divider>\n<ng-content select=\"[td-menu-footer]\"></ng-content>","styles":[":host{margin-top:-8px;margin-bottom:-8px;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host ::ng-deep [td-menu-header]{padding:8px;text-align:center}:host ::ng-deep mat-list a[mat-list-item].mat-2-line,:host ::ng-deep mat-list mat-list-item.mat-2-line,:host ::ng-deep mat-list[dense] a[mat-list-item].mat-2-line,:host ::ng-deep mat-list[dense] mat-list-item.mat-2-line,:host ::ng-deep mat-nav-list a[mat-list-item].mat-2-line,:host ::ng-deep mat-nav-list mat-list-item.mat-2-line,:host ::ng-deep mat-nav-list[dense] a[mat-list-item].mat-2-line,:host ::ng-deep mat-nav-list[dense] mat-list-item.mat-2-line{height:auto}:host ::ng-deep mat-list a[mat-list-item].mat-2-line .mat-list-item-content,:host ::ng-deep mat-list mat-list-item.mat-2-line .mat-list-item-content,:host ::ng-deep mat-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content,:host ::ng-deep mat-list[dense] mat-list-item.mat-2-line .mat-list-item-content,:host ::ng-deep mat-nav-list a[mat-list-item].mat-2-line .mat-list-item-content,:host ::ng-deep mat-nav-list mat-list-item.mat-2-line .mat-list-item-content,:host ::ng-deep mat-nav-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content,:host ::ng-deep mat-nav-list[dense] mat-list-item.mat-2-line .mat-list-item-content{height:auto;padding:8px}:host ::ng-deep mat-list a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,:host ::ng-deep mat-list mat-list-item.mat-2-line .mat-list-item-content .mat-list-text,:host ::ng-deep mat-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,:host ::ng-deep mat-list[dense] mat-list-item.mat-2-line .mat-list-item-content .mat-list-text,:host ::ng-deep mat-nav-list a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,:host ::ng-deep mat-nav-list mat-list-item.mat-2-line .mat-list-item-content .mat-list-text,:host ::ng-deep mat-nav-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,:host ::ng-deep mat-nav-list[dense] mat-list-item.mat-2-line .mat-list-item-content .mat-list-text{padding-right:0}[dir=rtl] :host ::ng-deep mat-list a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,[dir=rtl] :host ::ng-deep mat-list mat-list-item.mat-2-line .mat-list-item-content .mat-list-text,[dir=rtl] :host ::ng-deep mat-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,[dir=rtl] :host ::ng-deep mat-list[dense] mat-list-item.mat-2-line .mat-list-item-content .mat-list-text,[dir=rtl] :host ::ng-deep mat-nav-list a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,[dir=rtl] :host ::ng-deep mat-nav-list mat-list-item.mat-2-line .mat-list-item-content .mat-list-text,[dir=rtl] :host ::ng-deep mat-nav-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,[dir=rtl] :host ::ng-deep mat-nav-list[dense] mat-list-item.mat-2-line .mat-list-item-content .mat-list-text{padding-left:0;padding-right:16px}:host ::ng-deep mat-list a[mat-list-item].mat-2-line .mat-list-item-content [matLine]+[matLine],:host ::ng-deep mat-list mat-list-item.mat-2-line .mat-list-item-content [matLine]+[matLine],:host ::ng-deep mat-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content [matLine]+[matLine],:host ::ng-deep mat-list[dense] mat-list-item.mat-2-line .mat-list-item-content [matLine]+[matLine],:host ::ng-deep mat-nav-list a[mat-list-item].mat-2-line .mat-list-item-content [matLine]+[matLine],:host ::ng-deep mat-nav-list mat-list-item.mat-2-line .mat-list-item-content [matLine]+[matLine],:host ::ng-deep mat-nav-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content [matLine]+[matLine],:host ::ng-deep mat-nav-list[dense] mat-list-item.mat-2-line .mat-list-item-content [matLine]+[matLine]{margin-top:4px}.td-menu-content{max-height:calc(50vh);overflow-y:auto}"]}]}],"members":{}}},"origins":{"CovalentMenuModule":"./menu.module","TdMenuComponent":"./menu.component"},"importAs":"@covalent/core/menu"}
+{"__symbolic":"module","version":4,"metadata":{"CovalentMenuModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/material/divider","name":"MatDividerModule","line":17,"character":4}],"declarations":[[{"__symbolic":"reference","name":"TdMenuComponent"}]],"exports":[[{"__symbolic":"reference","name":"TdMenuComponent"}]]}]}],"members":{}},"TdMenuComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"td-menu","template":"<ng-content select=\"[td-menu-header]\"></ng-content>\n<mat-divider></mat-divider>\n<div class=\"td-menu-content\">\n  <ng-content></ng-content>\n</div>\n<mat-divider></mat-divider>\n<ng-content select=\"[td-menu-footer]\"></ng-content>","styles":[":host{margin-top:-8px;margin-bottom:-8px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}:host ::ng-deep [td-menu-header]{padding:8px;text-align:center}:host ::ng-deep mat-list a[mat-list-item].mat-2-line,:host ::ng-deep mat-list mat-list-item.mat-2-line,:host ::ng-deep mat-list[dense] a[mat-list-item].mat-2-line,:host ::ng-deep mat-list[dense] mat-list-item.mat-2-line,:host ::ng-deep mat-nav-list a[mat-list-item].mat-2-line,:host ::ng-deep mat-nav-list mat-list-item.mat-2-line,:host ::ng-deep mat-nav-list[dense] a[mat-list-item].mat-2-line,:host ::ng-deep mat-nav-list[dense] mat-list-item.mat-2-line{height:auto}:host ::ng-deep mat-list a[mat-list-item].mat-2-line .mat-list-item-content,:host ::ng-deep mat-list mat-list-item.mat-2-line .mat-list-item-content,:host ::ng-deep mat-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content,:host ::ng-deep mat-list[dense] mat-list-item.mat-2-line .mat-list-item-content,:host ::ng-deep mat-nav-list a[mat-list-item].mat-2-line .mat-list-item-content,:host ::ng-deep mat-nav-list mat-list-item.mat-2-line .mat-list-item-content,:host ::ng-deep mat-nav-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content,:host ::ng-deep mat-nav-list[dense] mat-list-item.mat-2-line .mat-list-item-content{height:auto;padding:8px}:host ::ng-deep mat-list a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,:host ::ng-deep mat-list mat-list-item.mat-2-line .mat-list-item-content .mat-list-text,:host ::ng-deep mat-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,:host ::ng-deep mat-list[dense] mat-list-item.mat-2-line .mat-list-item-content .mat-list-text,:host ::ng-deep mat-nav-list a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,:host ::ng-deep mat-nav-list mat-list-item.mat-2-line .mat-list-item-content .mat-list-text,:host ::ng-deep mat-nav-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,:host ::ng-deep mat-nav-list[dense] mat-list-item.mat-2-line .mat-list-item-content .mat-list-text{padding-right:0}[dir=rtl] :host ::ng-deep mat-list a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,[dir=rtl] :host ::ng-deep mat-list mat-list-item.mat-2-line .mat-list-item-content .mat-list-text,[dir=rtl] :host ::ng-deep mat-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,[dir=rtl] :host ::ng-deep mat-list[dense] mat-list-item.mat-2-line .mat-list-item-content .mat-list-text,[dir=rtl] :host ::ng-deep mat-nav-list a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,[dir=rtl] :host ::ng-deep mat-nav-list mat-list-item.mat-2-line .mat-list-item-content .mat-list-text,[dir=rtl] :host ::ng-deep mat-nav-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content .mat-list-text,[dir=rtl] :host ::ng-deep mat-nav-list[dense] mat-list-item.mat-2-line .mat-list-item-content .mat-list-text{padding-left:0;padding-right:16px}:host ::ng-deep mat-list a[mat-list-item].mat-2-line .mat-list-item-content [matLine]+[matLine],:host ::ng-deep mat-list mat-list-item.mat-2-line .mat-list-item-content [matLine]+[matLine],:host ::ng-deep mat-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content [matLine]+[matLine],:host ::ng-deep mat-list[dense] mat-list-item.mat-2-line .mat-list-item-content [matLine]+[matLine],:host ::ng-deep mat-nav-list a[mat-list-item].mat-2-line .mat-list-item-content [matLine]+[matLine],:host ::ng-deep mat-nav-list mat-list-item.mat-2-line .mat-list-item-content [matLine]+[matLine],:host ::ng-deep mat-nav-list[dense] a[mat-list-item].mat-2-line .mat-list-item-content [matLine]+[matLine],:host ::ng-deep mat-nav-list[dense] mat-list-item.mat-2-line .mat-list-item-content [matLine]+[matLine]{margin-top:4px}.td-menu-content{max-height:calc(50vh);overflow-y:auto}"]}]}],"members":{}}},"origins":{"CovalentMenuModule":"./menu.module","TdMenuComponent":"./menu.component"},"importAs":"@covalent/core/menu"}

package/menu/menu.component.scss

@@ -0,0 +1,43 @@
+$td-menu-spacing: 8px !default;
+:host {
+  margin-top: -$td-menu-spacing;
+  margin-bottom: -$td-menu-spacing;
+  // [layout]
+  box-sizing: border-box;
+  display: flex;
+  // [layout="column"]
+  flex-direction: column;
+}
+:host ::ng-deep {
+  [td-menu-header] {
+    padding: $td-menu-spacing;
+    text-align: center;
+  }
+  mat-list,
+  mat-list[dense],
+  mat-nav-list,
+  mat-nav-list[dense], {
+    a[mat-list-item].mat-2-line,
+    mat-list-item.mat-2-line {
+      height: auto;
+      & .mat-list-item-content {
+        height: auto;
+        padding: $td-menu-spacing;
+        .mat-list-text {
+          padding-right: 0;
+          [dir='rtl'] & {
+            padding-left: 0;
+            padding-right: 16px;
+          }
+        }
+        [matLine] + [matLine] {
+          margin-top: $td-menu-spacing / 2;
+        }
+      }
+    }
+  }
+}
+.td-menu-content {
+  max-height: calc(50vh);
+  overflow-y: auto;
+}

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

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"CovalentMessageModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":16,"character":4}],"declarations":[[{"__symbolic":"reference","name":"TdMessageComponent"},{"__symbolic":"reference","name":"TdMessageContainerDirective"}]],"exports":[[{"__symbolic":"reference","name":"TdMessageComponent"},{"__symbolic":"reference","name":"TdMessageContainerDirective"}]]}]}],"members":{}},"TdMessageContainerDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":5,"character":1},"arguments":[{"selector":"[tdMessageContainer]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":9,"character":36}]}]}},"TdMessageComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"td-message","animations":[{"__symbolic":"reference","module":"@covalent/core/common","name":"tdCollapseAnimation","line":17,"character":4}],"template":"<div tdMessageContainer></div>\n<ng-template>\n  <div class=\"td-message-wrapper\">\n    <mat-icon class=\"td-message-icon\">{{icon}}</mat-icon>\n    <div class=\"td-message-labels\">\n      <div *ngIf=\"label\" class=\"td-message-label\">{{label}}</div>\n      <div *ngIf=\"sublabel\" class=\"td-message-sublabel\">{{sublabel}}</div>\n    </div>\n    <ng-content select=\"[td-message-actions]\"></ng-content>\n  </div>\n</ng-template>","styles":[":host{display:block}:host .td-message-wrapper{padding:8px 16px;min-height:52px;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:start;justify-content:start}:host .td-message-wrapper .td-message-labels{-ms-flex:1;flex:1}.td-message-icon{margin-right:16px}::ng-deep [dir=rtl] .td-message-icon{margin-left:16px;margin-right:0}"]}]}],"members":{"_childElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":28,"character":3},"arguments":[{"__symbolic":"reference","name":"TdMessageContainerDirective"}]}]}],"_template":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":29,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":29,"character":13}]}]}],"collapsedAnimation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":34,"character":3},"arguments":["@tdCollapse"]}]}],"hidden":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":42,"character":3},"arguments":["style.display"]}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3},"arguments":["label"]}]}],"sublabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3},"arguments":["sublabel"]}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3},"arguments":["icon"]}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3},"arguments":["color"]}]}],"opened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":3},"arguments":["opened"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":115,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":116,"character":42},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":117,"character":35}]}],"animationDoneListener":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":125,"character":3},"arguments":["@tdCollapse.done"]}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"_startAnimationState":[{"__symbolic":"method"}],"_attach":[{"__symbolic":"method"}],"_detach":[{"__symbolic":"method"}]}}},"origins":{"CovalentMessageModule":"./message.module","TdMessageContainerDirective":"./message.component","TdMessageComponent":"./message.component"},"importAs":"@covalent/core/message"}
+{"__symbolic":"module","version":4,"metadata":{"CovalentMessageModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":16,"character":4}],"declarations":[[{"__symbolic":"reference","name":"TdMessageComponent"},{"__symbolic":"reference","name":"TdMessageContainerDirective"}]],"exports":[[{"__symbolic":"reference","name":"TdMessageComponent"},{"__symbolic":"reference","name":"TdMessageContainerDirective"}]]}]}],"members":{}},"TdMessageContainerDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":5,"character":1},"arguments":[{"selector":"[tdMessageContainer]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":9,"character":36}]}]}},"TdMessageComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"td-message","animations":[{"__symbolic":"reference","module":"@covalent/core/common","name":"tdCollapseAnimation","line":17,"character":4}],"template":"<div tdMessageContainer></div>\n<ng-template>\n  <div class=\"td-message-wrapper\">\n    <mat-icon class=\"td-message-icon\">{{icon}}</mat-icon>\n    <div class=\"td-message-labels\">\n      <div *ngIf=\"label\" class=\"td-message-label\">{{label}}</div>\n      <div *ngIf=\"sublabel\" class=\"td-message-sublabel\">{{sublabel}}</div>\n    </div>\n    <ng-content select=\"[td-message-actions]\"></ng-content>\n  </div>\n</ng-template>","styles":[":host{display:block}:host .td-message-wrapper{padding:8px 16px;min-height:52px;-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:start;-ms-flex-pack:start;justify-content:flex-start}:host .td-message-wrapper .td-message-labels{-webkit-box-flex:1;-ms-flex:1;flex:1}.td-message-icon{margin-right:16px}::ng-deep [dir=rtl] .td-message-icon{margin-left:16px;margin-right:0}"]}]}],"members":{"_childElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":28,"character":3},"arguments":[{"__symbolic":"reference","name":"TdMessageContainerDirective"}]}]}],"_template":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":29,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":29,"character":13}]}]}],"collapsedAnimation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":34,"character":3},"arguments":["@tdCollapse"]}]}],"hidden":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":42,"character":3},"arguments":["style.display"]}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3},"arguments":["label"]}]}],"sublabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3},"arguments":["sublabel"]}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3},"arguments":["icon"]}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3},"arguments":["color"]}]}],"opened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":3},"arguments":["opened"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":115,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":116,"character":42},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":117,"character":35}]}],"animationDoneListener":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":125,"character":3},"arguments":["@tdCollapse.done"]}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"_startAnimationState":[{"__symbolic":"method"}],"_attach":[{"__symbolic":"method"}],"_detach":[{"__symbolic":"method"}]}}},"origins":{"CovalentMessageModule":"./message.module","TdMessageContainerDirective":"./message.component","TdMessageComponent":"./message.component"},"importAs":"@covalent/core/message"}

package/message/message.component.scss

@@ -0,0 +1,29 @@
+:host {
+  display: block;
+  .td-message-wrapper {
+    padding: 8px 16px;
+    min-height: 52px;
+    // [layout]
+    box-sizing: border-box;
+    display: flex;
+    // [layout="row"]
+    flex-direction: row;
+    // [layout-align="start center"]
+    align-items: center;
+    align-content: center;
+    max-width: 100%;
+    justify-content: flex-start;
+    .td-message-labels {
+      // [flex]
+      flex: 1;
+    }
+  }
+}
+
+.td-message-icon {
+  margin-right: 16px;
+  ::ng-deep [dir='rtl'] & {
+    margin-left: 16px;
+    margin-right: 0;
+  }
+}