@covalent/core 2.0.0-rc.2 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (296) hide show
  1. package/breadcrumbs/_breadcrumbs-theme.scss +1 -2
  2. package/breadcrumbs/breadcrumb/breadcrumb.component.scss +22 -0
  3. package/breadcrumbs/breadcrumbs.component.scss +7 -0
  4. package/breadcrumbs/covalent-core-breadcrumbs.metadata.json +1 -1
  5. package/bundles/covalent-core-breadcrumbs.umd.js +1 -1
  6. package/bundles/covalent-core-breadcrumbs.umd.min.js +1 -1
  7. package/bundles/covalent-core-breadcrumbs.umd.min.js.map +1 -1
  8. package/bundles/covalent-core-chips.umd.js +6 -6
  9. package/bundles/covalent-core-chips.umd.js.map +1 -1
  10. package/bundles/covalent-core-chips.umd.min.js +1 -1
  11. package/bundles/covalent-core-chips.umd.min.js.map +1 -1
  12. package/bundles/covalent-core-common.umd.js +251 -84
  13. package/bundles/covalent-core-common.umd.js.map +1 -1
  14. package/bundles/covalent-core-common.umd.min.js +1 -1
  15. package/bundles/covalent-core-common.umd.min.js.map +1 -1
  16. package/bundles/covalent-core-data-table.umd.js +9 -9
  17. package/bundles/covalent-core-data-table.umd.js.map +1 -1
  18. package/bundles/covalent-core-data-table.umd.min.js +1 -1
  19. package/bundles/covalent-core-data-table.umd.min.js.map +1 -1
  20. package/bundles/covalent-core-dialogs.umd.js +3 -20
  21. package/bundles/covalent-core-dialogs.umd.js.map +1 -1
  22. package/bundles/covalent-core-dialogs.umd.min.js +1 -1
  23. package/bundles/covalent-core-dialogs.umd.min.js.map +1 -1
  24. package/bundles/covalent-core-expansion-panel.umd.js +1 -1
  25. package/bundles/covalent-core-expansion-panel.umd.min.js +1 -1
  26. package/bundles/covalent-core-expansion-panel.umd.min.js.map +1 -1
  27. package/bundles/covalent-core-file.umd.min.js +1 -1
  28. package/bundles/covalent-core-file.umd.min.js.map +1 -1
  29. package/bundles/covalent-core-json-formatter.umd.js +1 -1
  30. package/bundles/covalent-core-json-formatter.umd.min.js +1 -1
  31. package/bundles/covalent-core-json-formatter.umd.min.js.map +1 -1
  32. package/bundles/covalent-core-layout.umd.js +8 -7
  33. package/bundles/covalent-core-layout.umd.js.map +1 -1
  34. package/bundles/covalent-core-layout.umd.min.js +1 -1
  35. package/bundles/covalent-core-layout.umd.min.js.map +1 -1
  36. package/bundles/covalent-core-loading.umd.js +1 -1
  37. package/bundles/covalent-core-loading.umd.min.js +1 -1
  38. package/bundles/covalent-core-loading.umd.min.js.map +1 -1
  39. package/bundles/covalent-core-media.umd.min.js +1 -1
  40. package/bundles/covalent-core-media.umd.min.js.map +1 -1
  41. package/bundles/covalent-core-menu.umd.js +1 -1
  42. package/bundles/covalent-core-menu.umd.min.js +1 -1
  43. package/bundles/covalent-core-menu.umd.min.js.map +1 -1
  44. package/bundles/covalent-core-message.umd.js +1 -1
  45. package/bundles/covalent-core-message.umd.min.js +1 -1
  46. package/bundles/covalent-core-message.umd.min.js.map +1 -1
  47. package/bundles/covalent-core-notifications.umd.min.js +1 -1
  48. package/bundles/covalent-core-notifications.umd.min.js.map +1 -1
  49. package/bundles/covalent-core-paging.umd.js +1 -1
  50. package/bundles/covalent-core-paging.umd.min.js +1 -1
  51. package/bundles/covalent-core-paging.umd.min.js.map +1 -1
  52. package/bundles/covalent-core-search.umd.js +5 -4
  53. package/bundles/covalent-core-search.umd.js.map +1 -1
  54. package/bundles/covalent-core-search.umd.min.js +1 -1
  55. package/bundles/covalent-core-search.umd.min.js.map +1 -1
  56. package/bundles/covalent-core-sidesheet.umd.js +137 -0
  57. package/bundles/covalent-core-sidesheet.umd.js.map +1 -0
  58. package/bundles/covalent-core-sidesheet.umd.min.js +2 -0
  59. package/bundles/covalent-core-sidesheet.umd.min.js.map +1 -0
  60. package/bundles/covalent-core-steps.umd.js +5 -5
  61. package/bundles/covalent-core-steps.umd.min.js +1 -1
  62. package/bundles/covalent-core-steps.umd.min.js.map +1 -1
  63. package/bundles/covalent-core-tab-select.umd.js +3 -2
  64. package/bundles/covalent-core-tab-select.umd.js.map +1 -1
  65. package/bundles/covalent-core-tab-select.umd.min.js +1 -1
  66. package/bundles/covalent-core-tab-select.umd.min.js.map +1 -1
  67. package/bundles/covalent-core-virtual-scroll.umd.min.js +1 -1
  68. package/bundles/covalent-core-virtual-scroll.umd.min.js.map +1 -1
  69. package/bundles/covalent-core.umd.js +223 -82
  70. package/bundles/covalent-core.umd.js.map +1 -1
  71. package/bundles/covalent-core.umd.min.js +1 -1
  72. package/bundles/covalent-core.umd.min.js.map +1 -1
  73. package/chips/chips.component.scss +143 -0
  74. package/chips/covalent-core-chips.metadata.json +1 -1
  75. package/common/covalent-core-common.d.ts +4 -3
  76. package/common/covalent-core-common.metadata.json +1 -1
  77. package/common/directives/fullscreen/fullscreen.directive.d.ts +22 -0
  78. package/common/material-icons.css.map +1 -1
  79. package/common/platform.css +10 -10
  80. package/common/platform.css.map +1 -1
  81. package/common/styles/_layout.scss +1 -1
  82. package/covalent-core.d.ts +8 -7
  83. package/covalent-core.metadata.json +1 -1
  84. package/data-table/README.md +2 -2
  85. package/data-table/covalent-core-data-table.metadata.json +1 -1
  86. package/data-table/data-table-cell/data-table-cell.component.scss +57 -0
  87. package/data-table/data-table-column/data-table-column.component.scss +78 -0
  88. package/data-table/data-table-row/data-table-row.component.scss +12 -0
  89. package/data-table/data-table-table/data-table-table.component.scss +7 -0
  90. package/data-table/data-table.component.scss +77 -0
  91. package/dialogs/alert-dialog/alert-dialog.component.scss +3 -0
  92. package/dialogs/confirm-dialog/confirm-dialog.component.scss +3 -0
  93. package/dialogs/covalent-core-dialogs.metadata.json +1 -1
  94. package/dialogs/dialog.component.scss +43 -0
  95. package/dialogs/prompt-dialog/prompt-dialog.component.scss +15 -0
  96. package/dialogs/services/dialog.service.d.ts +0 -3
  97. package/esm2015/breadcrumbs/breadcrumb/breadcrumb.component.js +1 -1
  98. package/esm2015/chips/chips.component.js +3 -3
  99. package/esm2015/common/common.module.js +8 -26
  100. package/esm2015/common/covalent-core-common.js +5 -4
  101. package/esm2015/common/directives/fullscreen/fullscreen.directive.js +136 -0
  102. package/esm2015/covalent-core.js +10 -9
  103. package/esm2015/data-table/data-table-cell/data-table-cell.component.js +1 -1
  104. package/esm2015/data-table/data-table-column/data-table-column.component.js +1 -1
  105. package/esm2015/data-table/data-table.component.js +5 -4
  106. package/esm2015/dialogs/covalent-core-dialogs.js +2 -2
  107. package/esm2015/dialogs/dialog.component.js +1 -1
  108. package/esm2015/dialogs/dialogs.module.js +3 -3
  109. package/esm2015/dialogs/index.js +2 -2
  110. package/esm2015/dialogs/prompt-dialog/prompt-dialog.component.js +1 -1
  111. package/esm2015/dialogs/public-api.js +2 -2
  112. package/esm2015/dialogs/services/dialog.service.js +2 -17
  113. package/esm2015/expansion-panel/expansion-panel.component.js +1 -1
  114. package/esm2015/index.js +2 -2
  115. package/esm2015/json-formatter/json-formatter.component.js +1 -1
  116. package/esm2015/layout/layout-card-over/layout-card-over.component.js +1 -1
  117. package/esm2015/layout/layout-manage-list/layout-manage-list.component.js +1 -1
  118. package/esm2015/layout/layout-nav/layout-nav.component.js +1 -1
  119. package/esm2015/layout/layout-nav-list/layout-nav-list.component.js +1 -1
  120. package/esm2015/layout/layout.component.js +1 -1
  121. package/esm2015/layout/navigation-drawer/navigation-drawer.component.js +12 -3
  122. package/esm2015/loading/loading.component.js +1 -1
  123. package/esm2015/menu/menu.component.js +1 -1
  124. package/esm2015/message/message.component.js +1 -1
  125. package/esm2015/paging/paging-bar.component.js +1 -1
  126. package/esm2015/public_api.js +2 -2
  127. package/esm2015/search/search-box/search-box.component.js +3 -3
  128. package/esm2015/search/search-input/search-input.component.js +10 -3
  129. package/esm2015/sidesheet/covalent-core-sidesheet.js +9 -0
  130. package/esm2015/sidesheet/index.js +6 -0
  131. package/esm2015/sidesheet/public-api.js +7 -0
  132. package/esm2015/sidesheet/sidesheet.component.js +70 -0
  133. package/esm2015/sidesheet/sidesheet.module.js +33 -0
  134. package/esm2015/steps/nav/nav-step-link/nav-step-link.component.js +1 -1
  135. package/esm2015/steps/nav/nav-steps-horizontal/nav-steps-horizontal.component.js +1 -1
  136. package/esm2015/steps/step-body/step-body.component.js +1 -1
  137. package/esm2015/steps/step-header/step-header.component.js +1 -1
  138. package/esm2015/steps/steps.component.js +1 -1
  139. package/esm2015/tab-select/tab-select.component.js +4 -3
  140. package/esm5/breadcrumbs/breadcrumb/breadcrumb.component.js +1 -1
  141. package/esm5/chips/chips.component.js +3 -3
  142. package/esm5/common/common.module.js +8 -26
  143. package/esm5/common/covalent-core-common.js +5 -4
  144. package/esm5/common/directives/fullscreen/fullscreen.directive.js +184 -0
  145. package/esm5/covalent-core.js +10 -9
  146. package/esm5/data-table/data-table-cell/data-table-cell.component.js +1 -1
  147. package/esm5/data-table/data-table-column/data-table-column.component.js +1 -1
  148. package/esm5/data-table/data-table.component.js +5 -4
  149. package/esm5/dialogs/covalent-core-dialogs.js +2 -2
  150. package/esm5/dialogs/dialog.component.js +1 -1
  151. package/esm5/dialogs/dialogs.module.js +3 -3
  152. package/esm5/dialogs/index.js +2 -2
  153. package/esm5/dialogs/prompt-dialog/prompt-dialog.component.js +1 -1
  154. package/esm5/dialogs/public-api.js +2 -2
  155. package/esm5/dialogs/services/dialog.service.js +2 -17
  156. package/esm5/expansion-panel/expansion-panel.component.js +1 -1
  157. package/esm5/index.js +2 -2
  158. package/esm5/json-formatter/json-formatter.component.js +1 -1
  159. package/esm5/layout/layout-card-over/layout-card-over.component.js +1 -1
  160. package/esm5/layout/layout-manage-list/layout-manage-list.component.js +1 -1
  161. package/esm5/layout/layout-nav/layout-nav.component.js +1 -1
  162. package/esm5/layout/layout-nav-list/layout-nav-list.component.js +1 -1
  163. package/esm5/layout/layout.component.js +1 -1
  164. package/esm5/layout/navigation-drawer/navigation-drawer.component.js +12 -3
  165. package/esm5/loading/loading.component.js +1 -1
  166. package/esm5/menu/menu.component.js +1 -1
  167. package/esm5/message/message.component.js +1 -1
  168. package/esm5/paging/paging-bar.component.js +1 -1
  169. package/esm5/public_api.js +2 -2
  170. package/esm5/search/search-box/search-box.component.js +3 -3
  171. package/esm5/search/search-input/search-input.component.js +10 -3
  172. package/esm5/sidesheet/covalent-core-sidesheet.js +9 -0
  173. package/esm5/sidesheet/index.js +6 -0
  174. package/esm5/sidesheet/public-api.js +7 -0
  175. package/esm5/sidesheet/sidesheet.component.js +88 -0
  176. package/esm5/sidesheet/sidesheet.module.js +37 -0
  177. package/esm5/steps/nav/nav-step-link/nav-step-link.component.js +1 -1
  178. package/esm5/steps/nav/nav-steps-horizontal/nav-steps-horizontal.component.js +1 -1
  179. package/esm5/steps/step-body/step-body.component.js +1 -1
  180. package/esm5/steps/step-header/step-header.component.js +1 -1
  181. package/esm5/steps/steps.component.js +1 -1
  182. package/esm5/tab-select/tab-select.component.js +4 -3
  183. package/expansion-panel/covalent-core-expansion-panel.metadata.json +1 -1
  184. package/expansion-panel/expansion-panel-group.component.scss +0 -0
  185. package/expansion-panel/expansion-panel.component.scss +50 -0
  186. package/fesm2015/covalent-core-breadcrumbs.js +1 -1
  187. package/fesm2015/covalent-core-chips.js +2 -3
  188. package/fesm2015/covalent-core-chips.js.map +1 -1
  189. package/fesm2015/covalent-core-common.js +114 -26
  190. package/fesm2015/covalent-core-common.js.map +1 -1
  191. package/fesm2015/covalent-core-data-table.js +6 -6
  192. package/fesm2015/covalent-core-data-table.js.map +1 -1
  193. package/fesm2015/covalent-core-dialogs.js +5 -20
  194. package/fesm2015/covalent-core-dialogs.js.map +1 -1
  195. package/fesm2015/covalent-core-expansion-panel.js +1 -1
  196. package/fesm2015/covalent-core-json-formatter.js +1 -1
  197. package/fesm2015/covalent-core-layout.js +8 -7
  198. package/fesm2015/covalent-core-layout.js.map +1 -1
  199. package/fesm2015/covalent-core-loading.js +1 -1
  200. package/fesm2015/covalent-core-menu.js +1 -1
  201. package/fesm2015/covalent-core-message.js +1 -1
  202. package/fesm2015/covalent-core-paging.js +1 -1
  203. package/fesm2015/covalent-core-search.js +5 -4
  204. package/fesm2015/covalent-core-search.js.map +1 -1
  205. package/fesm2015/covalent-core-sidesheet.js +110 -0
  206. package/fesm2015/covalent-core-sidesheet.js.map +1 -0
  207. package/fesm2015/covalent-core-steps.js +5 -5
  208. package/fesm2015/covalent-core-tab-select.js +3 -2
  209. package/fesm2015/covalent-core-tab-select.js.map +1 -1
  210. package/fesm2015/covalent-core.js +151 -75
  211. package/fesm2015/covalent-core.js.map +1 -1
  212. package/fesm5/covalent-core-breadcrumbs.js +1 -1
  213. package/fesm5/covalent-core-chips.js +2 -3
  214. package/fesm5/covalent-core-chips.js.map +1 -1
  215. package/fesm5/covalent-core-common.js +161 -27
  216. package/fesm5/covalent-core-common.js.map +1 -1
  217. package/fesm5/covalent-core-data-table.js +6 -6
  218. package/fesm5/covalent-core-data-table.js.map +1 -1
  219. package/fesm5/covalent-core-dialogs.js +5 -20
  220. package/fesm5/covalent-core-dialogs.js.map +1 -1
  221. package/fesm5/covalent-core-expansion-panel.js +1 -1
  222. package/fesm5/covalent-core-json-formatter.js +1 -1
  223. package/fesm5/covalent-core-layout.js +8 -7
  224. package/fesm5/covalent-core-layout.js.map +1 -1
  225. package/fesm5/covalent-core-loading.js +1 -1
  226. package/fesm5/covalent-core-menu.js +1 -1
  227. package/fesm5/covalent-core-message.js +1 -1
  228. package/fesm5/covalent-core-paging.js +1 -1
  229. package/fesm5/covalent-core-search.js +5 -4
  230. package/fesm5/covalent-core-search.js.map +1 -1
  231. package/fesm5/covalent-core-sidesheet.js +126 -0
  232. package/fesm5/covalent-core-sidesheet.js.map +1 -0
  233. package/fesm5/covalent-core-steps.js +5 -5
  234. package/fesm5/covalent-core-tab-select.js +3 -2
  235. package/fesm5/covalent-core-tab-select.js.map +1 -1
  236. package/fesm5/covalent-core.js +198 -76
  237. package/fesm5/covalent-core.js.map +1 -1
  238. package/file/file-input/file-input.component.scss +19 -0
  239. package/file/file-upload/file-upload.component.scss +29 -0
  240. package/json-formatter/covalent-core-json-formatter.metadata.json +1 -1
  241. package/json-formatter/json-formatter.component.scss +61 -0
  242. package/layout/README.md +5 -2
  243. package/layout/covalent-core-layout.metadata.json +1 -1
  244. package/layout/layout-card-over/layout-card-over.component.scss +42 -0
  245. package/layout/layout-footer/layout-footer.component.scss +4 -0
  246. package/layout/layout-manage-list/layout-manage-list.component.scss +77 -0
  247. package/layout/layout-nav/layout-nav.component.scss +50 -0
  248. package/layout/layout-nav-list/layout-nav-list.component.scss +109 -0
  249. package/layout/layout.component.scss +20 -0
  250. package/layout/navigation-drawer/navigation-drawer.component.d.ts +7 -0
  251. package/layout/navigation-drawer/navigation-drawer.component.scss +57 -0
  252. package/loading/covalent-core-loading.metadata.json +1 -1
  253. package/loading/loading.component.scss +42 -0
  254. package/menu/covalent-core-menu.metadata.json +1 -1
  255. package/menu/menu.component.scss +43 -0
  256. package/message/covalent-core-message.metadata.json +1 -1
  257. package/message/message.component.scss +29 -0
  258. package/notifications/notification-count.component.scss +89 -0
  259. package/package.json +1 -1
  260. package/paging/covalent-core-paging.metadata.json +1 -1
  261. package/paging/paging-bar.component.scss +23 -0
  262. package/search/covalent-core-search.metadata.json +1 -1
  263. package/search/search-box/search-box.component.scss +32 -0
  264. package/search/search-input/README.md +5 -2
  265. package/search/search-input/search-input.component.d.ts +6 -0
  266. package/search/search-input/search-input.component.scss +63 -0
  267. package/sidesheet/README.md +68 -0
  268. package/sidesheet/covalent-core-sidesheet.d.ts +4 -0
  269. package/sidesheet/covalent-core-sidesheet.metadata.json +1 -0
  270. package/sidesheet/index.d.ts +1 -0
  271. package/sidesheet/package.json +13 -0
  272. package/sidesheet/public-api.d.ts +2 -0
  273. package/sidesheet/sidesheet.component.d.ts +13 -0
  274. package/sidesheet/sidesheet.component.scss +96 -0
  275. package/sidesheet/sidesheet.module.d.ts +2 -0
  276. package/steps/covalent-core-steps.metadata.json +1 -1
  277. package/steps/nav/nav-step-link/nav-step-link.component.scss +17 -0
  278. package/steps/nav/nav-steps-horizontal/nav-steps-horizontal.component.scss +81 -0
  279. package/steps/nav/nav-steps-vertical/nav-steps-vertical.component.scss +18 -0
  280. package/steps/step-body/step-body.component.scss +29 -0
  281. package/steps/step-header/step-header.component.scss +90 -0
  282. package/steps/steps.component.scss +53 -0
  283. package/tab-select/covalent-core-tab-select.metadata.json +1 -1
  284. package/tab-select/tab-option.component.scss +0 -0
  285. package/tab-select/tab-select.component.scss +3 -0
  286. package/theming/prebuilt/blue-grey-deep-orange.css +92 -87
  287. package/theming/prebuilt/blue-grey-deep-orange.css.map +1 -1
  288. package/theming/prebuilt/blue-orange.css +92 -87
  289. package/theming/prebuilt/blue-orange.css.map +1 -1
  290. package/theming/prebuilt/indigo-pink.css +92 -87
  291. package/theming/prebuilt/indigo-pink.css.map +1 -1
  292. package/theming/prebuilt/orange-light-blue.css +92 -87
  293. package/theming/prebuilt/orange-light-blue.css.map +1 -1
  294. package/theming/prebuilt/teal-orange.css +92 -87
  295. package/theming/prebuilt/teal-orange.css.map +1 -1
  296. package/virtual-scroll/virtual-scroll-container.component.scss +7 -0
@@ -0,0 +1,77 @@
1
+ @import '../../common/styles/core/whiteframe';
2
+
3
+ :host {
4
+ display: flex;
5
+ margin: 0;
6
+ width: 100%;
7
+ min-height: 100%;
8
+ height: 100%;
9
+ overflow: hidden;
10
+ mat-sidenav-container.td-layout-manage-list {
11
+ // [flex]
12
+ flex: 1;
13
+ & > .mat-drawer > .mat-drawer-inner-container {
14
+ &.mat-drawer-opened,
15
+ &.mat-drawer-opening,
16
+ &.mat-drawer-closed,
17
+ &.mat-drawer-closing {
18
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
19
+ }
20
+ }
21
+ }
22
+ .td-layout-manage-list-sidenav {
23
+ text-align: start;
24
+ // [flex]
25
+ flex: 1;
26
+ // [md-content]
27
+ display: block;
28
+ position: relative;
29
+ overflow: auto;
30
+ -webkit-overflow-scrolling: touch;
31
+ }
32
+ .td-layout-manage-list-main {
33
+ margin: 0;
34
+ width: 100%;
35
+ min-height: 100%;
36
+ height: 100%;
37
+ position: relative;
38
+ overflow: auto;
39
+ // [layout="column"]
40
+ flex-direction: column;
41
+ box-sizing: border-box;
42
+ display: flex;
43
+ .td-layout-manage-list-content {
44
+ // [md-content]
45
+ display: block;
46
+ position: relative;
47
+ overflow: auto;
48
+ -webkit-overflow-scrolling: touch;
49
+ // [flex]
50
+ flex: 1;
51
+ }
52
+ }
53
+ }
54
+ :host ::ng-deep {
55
+ mat-sidenav-container.td-layout-manage-list {
56
+ & > .mat-drawer-content {
57
+ flex-grow: 1;
58
+ }
59
+ /* Ensure the left sidenav is a flex column & 100% height */
60
+ & > .mat-drawer > .mat-drawer-inner-container {
61
+ box-shadow: $whiteframe-shadow-1dp;
62
+ box-sizing: border-box;
63
+ display: -webkit-box;
64
+ display: -webkit-flex;
65
+ display: -moz-box;
66
+ display: -ms-flexbox;
67
+ display: flex;
68
+ flex-direction: column;
69
+ }
70
+ }
71
+ mat-nav-list a[mat-list-item] .mat-list-item-content {
72
+ font-size: 14px;
73
+ }
74
+ .mat-toolbar {
75
+ font-weight: 400;
76
+ }
77
+ }
@@ -0,0 +1,50 @@
1
+ .td-menu-button {
2
+ margin-left: 0;
3
+ ::ng-deep [dir='rtl'] & {
4
+ margin-right: 0;
5
+ margin-left: 6px;
6
+ }
7
+ }
8
+
9
+ :host {
10
+ display: flex;
11
+ margin: 0;
12
+ width: 100%;
13
+ min-height: 100%;
14
+ height: 100%;
15
+ overflow: hidden;
16
+ .td-layout-nav-wrapper {
17
+ // [layout="column"]
18
+ flex-direction: column;
19
+ box-sizing: border-box;
20
+ display: flex;
21
+ // [layout-fill]
22
+ margin: 0;
23
+ width: 100%;
24
+ min-height: 100%;
25
+ height: 100%;
26
+ .td-layout-nav-toolbar-content {
27
+ // [layout="row"]
28
+ flex-direction: row;
29
+ box-sizing: border-box;
30
+ display: flex;
31
+ // [layout-align="start center"]
32
+ align-items: center;
33
+ align-content: center;
34
+ max-width: 100%;
35
+ justify-content: flex-start;
36
+ }
37
+ .td-layout-nav-content {
38
+ // [layout="column"]
39
+ flex-direction: column;
40
+ box-sizing: border-box;
41
+ display: flex;
42
+ // [flex]
43
+ flex: 1;
44
+ // [md-content]
45
+ position: relative;
46
+ overflow: auto;
47
+ -webkit-overflow-scrolling: touch;
48
+ }
49
+ }
50
+ }
@@ -0,0 +1,109 @@
1
+ @import '../../common/styles/core/whiteframe';
2
+
3
+ :host {
4
+ .td-layout-nav-list-wrapper > .mat-sidenav-container {
5
+ > mat-sidenav.mat-drawer-side {
6
+ border-right: 0;
7
+ [dir='rtl'] & {
8
+ border-left: 0;
9
+ }
10
+ }
11
+ }
12
+ // [layout-fill]
13
+ margin: 0;
14
+ width: 100%;
15
+ min-height: 100%;
16
+ height: 100%;
17
+ overflow: hidden;
18
+ // [layout="column"]
19
+ flex-direction: column;
20
+ box-sizing: border-box;
21
+ display: flex;
22
+ // [flex]
23
+ flex: 1;
24
+ .td-layout-nav-list-wrapper {
25
+ // [layout="column"]
26
+ flex-direction: column;
27
+ box-sizing: border-box;
28
+ display: flex;
29
+ // [flex]
30
+ flex: 1;
31
+ // [md-content]
32
+ position: relative;
33
+ overflow: auto;
34
+ -webkit-overflow-scrolling: touch;
35
+ .td-layout-nav-list-toolbar-content {
36
+ // [layout="row"]
37
+ flex-direction: row;
38
+ box-sizing: border-box;
39
+ display: flex;
40
+ // [layout-align="start center"]
41
+ align-items: center;
42
+ align-content: center;
43
+ max-width: 100%;
44
+ justify-content: flex-start;
45
+ }
46
+ .td-layout-nav-list-content {
47
+ text-align: start;
48
+ // [flex]
49
+ flex: 1;
50
+ // [md-content]
51
+ display: block;
52
+ position: relative;
53
+ overflow: auto;
54
+ -webkit-overflow-scrolling: touch;
55
+ }
56
+ .td-layout-nav-list-main {
57
+ // [layout="column"]
58
+ flex-direction: column;
59
+ box-sizing: border-box;
60
+ display: flex;
61
+ // [layout-fill]
62
+ margin: 0;
63
+ width: 100%;
64
+ min-height: 100%;
65
+ height: 100%;
66
+ position: relative;
67
+ overflow: auto;
68
+ .td-layout-nav-list-content {
69
+ // [md-content]
70
+ display: block;
71
+ position: relative;
72
+ overflow: auto;
73
+ -webkit-overflow-scrolling: touch;
74
+ // [flex]
75
+ flex: 1;
76
+ }
77
+ }
78
+ mat-sidenav-container.td-layout-nav-list {
79
+ // [flex]
80
+ flex: 1;
81
+ & > mat-sidenav {
82
+ &.mat-drawer-opened,
83
+ &.mat-drawer-opening,
84
+ &.mat-drawer-closed,
85
+ &.mat-drawer-closing {
86
+ box-shadow: none;
87
+ }
88
+ }
89
+ }
90
+ }
91
+ }
92
+ :host ::ng-deep {
93
+ mat-sidenav-container.td-layout-nav-list {
94
+ & > .mat-drawer-content {
95
+ flex-grow: 1;
96
+ }
97
+ /* Ensure the left sidenav is a flex column & 100% height */
98
+ & > .mat-drawer > .mat-drawer-inner-container {
99
+ box-shadow: $whiteframe-shadow-1dp;
100
+ box-sizing: border-box;
101
+ display: -webkit-box;
102
+ display: -webkit-flex;
103
+ display: -moz-box;
104
+ display: -ms-flexbox;
105
+ display: flex;
106
+ flex-direction: column;
107
+ }
108
+ }
109
+ }
@@ -0,0 +1,20 @@
1
+ :host {
2
+ display: flex;
3
+ margin: 0;
4
+ width: 100%;
5
+ min-height: 100%;
6
+ height: 100%;
7
+ overflow: hidden;
8
+
9
+ ::ng-deep {
10
+ // Ensuring sidenav content has flex column properties
11
+ & > mat-sidenav-container .mat-drawer > .mat-drawer-inner-container {
12
+ display: -webkit-box;
13
+ display: -webkit-flex;
14
+ display: -moz-box;
15
+ display: -ms-flexbox;
16
+ display: flex;
17
+ flex-direction: column;
18
+ }
19
+ }
20
+ }
@@ -47,6 +47,13 @@ export declare class TdNavigationDrawerComponent implements OnInit, OnDestroy {
47
47
  * If [icon] is set, then this will not be shown.
48
48
  */
49
49
  logo: string;
50
+ /**
51
+ * avatar?: string
52
+ *
53
+ * avatar url to be displayed before the title
54
+ * If [icon] or [logo] are set, then this will not be shown.
55
+ */
56
+ avatar: string;
50
57
  /**
51
58
  * color?: string
52
59
  *
@@ -0,0 +1,57 @@
1
+ :host {
2
+ width: 100%;
3
+ .td-navigation-drawer-content,
4
+ .td-navigation-drawer-menu-content {
5
+ &.ng-animating {
6
+ overflow: hidden;
7
+ }
8
+ }
9
+ mat-toolbar {
10
+ padding: 16px;
11
+ &.td-toolbar-background {
12
+ background-repeat: no-repeat;
13
+ background-size: cover;
14
+ }
15
+ &.td-nagivation-drawer-toolbar {
16
+ flex-direction: column;
17
+ height: auto !important;
18
+ display: block !important;
19
+ }
20
+ .td-navigation-drawer-toolbar-content {
21
+ // [layout="row"]
22
+ flex-direction: row;
23
+ box-sizing: border-box;
24
+ display: flex;
25
+ // [layout-align="start center"]
26
+ align-items: center;
27
+ align-content: center;
28
+ max-width: 100%;
29
+ justify-content: flex-start;
30
+
31
+ .td-nagivation-drawer-toolbar-avatar {
32
+ border-radius: 50%;
33
+ height: 60px;
34
+ width: 60px;
35
+ margin: 0 12px 12px 0;
36
+ }
37
+ }
38
+ .td-navigation-drawer-menu-toggle {
39
+ // [layout="row"]
40
+ flex-direction: row;
41
+ box-sizing: border-box;
42
+ display: flex;
43
+ .td-navigation-drawer-label {
44
+ // [flex]
45
+ flex: 1;
46
+ }
47
+ .td-navigation-drawer-menu-button {
48
+ height: 24px;
49
+ line-height: 24px;
50
+ width: 24px;
51
+ }
52
+ }
53
+ }
54
+ > div {
55
+ overflow: hidden;
56
+ }
57
+ }
@@ -1 +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"}
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{-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"}
@@ -0,0 +1,42 @@
1
+ .td-loading-wrapper {
2
+ position: relative;
3
+ display: block;
4
+ &.td-fullscreen {
5
+ position: inherit;
6
+ }
7
+ .td-loading {
8
+ // layout
9
+ box-sizing: border-box;
10
+ display: flex;
11
+ // [layout="row"]
12
+ flex-direction: row;
13
+ // [layout-align="center center"]
14
+ align-items: center;
15
+ align-content: center;
16
+ max-width: 100%;
17
+ justify-content: center;
18
+ // flex
19
+ flex: 1;
20
+ }
21
+ &.td-overlay {
22
+ .td-loading {
23
+ position: absolute;
24
+ margin: 0;
25
+ top: 0;
26
+ left: 0;
27
+ right: 0;
28
+ z-index: 1000;
29
+ mat-progress-bar {
30
+ position: absolute;
31
+ top: 0;
32
+ left: 0;
33
+ right: 0;
34
+ }
35
+ }
36
+ }
37
+ &.td-overlay-circular {
38
+ .td-loading {
39
+ bottom: 0;
40
+ }
41
+ }
42
+ }
@@ -1 +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"}
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;-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"}
@@ -0,0 +1,43 @@
1
+ $td-menu-spacing: 8px !default;
2
+ :host {
3
+ margin-top: -$td-menu-spacing;
4
+ margin-bottom: -$td-menu-spacing;
5
+ // [layout]
6
+ box-sizing: border-box;
7
+ display: flex;
8
+ // [layout="column"]
9
+ flex-direction: column;
10
+ }
11
+ :host ::ng-deep {
12
+ [td-menu-header] {
13
+ padding: $td-menu-spacing;
14
+ text-align: center;
15
+ }
16
+ mat-list,
17
+ mat-list[dense],
18
+ mat-nav-list,
19
+ mat-nav-list[dense], {
20
+ a[mat-list-item].mat-2-line,
21
+ mat-list-item.mat-2-line {
22
+ height: auto;
23
+ & .mat-list-item-content {
24
+ height: auto;
25
+ padding: $td-menu-spacing;
26
+ .mat-list-text {
27
+ padding-right: 0;
28
+ [dir='rtl'] & {
29
+ padding-left: 0;
30
+ padding-right: 16px;
31
+ }
32
+ }
33
+ [matLine] + [matLine] {
34
+ margin-top: $td-menu-spacing / 2;
35
+ }
36
+ }
37
+ }
38
+ }
39
+ }
40
+ .td-menu-content {
41
+ max-height: calc(50vh);
42
+ overflow-y: auto;
43
+ }
@@ -1 +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"}
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;-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"}
@@ -0,0 +1,29 @@
1
+ :host {
2
+ display: block;
3
+ .td-message-wrapper {
4
+ padding: 8px 16px;
5
+ min-height: 52px;
6
+ // [layout]
7
+ box-sizing: border-box;
8
+ display: flex;
9
+ // [layout="row"]
10
+ flex-direction: row;
11
+ // [layout-align="start center"]
12
+ align-items: center;
13
+ align-content: center;
14
+ max-width: 100%;
15
+ justify-content: flex-start;
16
+ .td-message-labels {
17
+ // [flex]
18
+ flex: 1;
19
+ }
20
+ }
21
+ }
22
+
23
+ .td-message-icon {
24
+ margin-right: 16px;
25
+ ::ng-deep [dir='rtl'] & {
26
+ margin-left: 16px;
27
+ margin-right: 0;
28
+ }
29
+ }