@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,96 @@
1
+ $td-sidesheet-side-padding: 16px !default;
2
+ $td-sidesheet-top-padding: 20px !default;
3
+
4
+ // base style for [layout]
5
+ %layout {
6
+ box-sizing: border-box;
7
+ display: flex;
8
+ }
9
+
10
+ // base stle for [layout="column"]
11
+ %layout-column {
12
+ @extend %layout;
13
+ flex-direction: column;
14
+ }
15
+
16
+ // base stle for [layout="column"]
17
+ %layout-row {
18
+ @extend %layout;
19
+ flex-direction: row;
20
+ }
21
+
22
+ // base style for [layout-fill]
23
+ %layout-fill {
24
+ margin: 0;
25
+ width: 100%;
26
+ min-height: 100%;
27
+ height: 100%;
28
+ }
29
+
30
+ // base style for [layout-align="start center"]
31
+ %layout-align-start-center {
32
+ align-items: center;
33
+ align-content: center;
34
+ max-width: 100%;
35
+ justify-content: flex-start;
36
+ }
37
+
38
+ td-sidesheet {
39
+ @extend %layout-column, %layout-fill;
40
+
41
+ .mat-divider-horizontal {
42
+ position: static !important;
43
+ }
44
+
45
+ td-sidesheet-title {
46
+ flex: 1;
47
+ }
48
+
49
+ // HEADER STYLES
50
+ td-sidesheet-header {
51
+ @extend %layout-row, %layout-align-start-center;
52
+ width: 100%;
53
+ padding: $td-sidesheet-top-padding $td-sidesheet-side-padding;
54
+ font-size: 18px;
55
+
56
+ .mat-button-focus-overlay {
57
+ background-color: transparent !important;
58
+ }
59
+ .mat-icon-button {
60
+ width: 24px;
61
+ height: 24px;
62
+ line-height: 21px;
63
+ }
64
+ }
65
+
66
+ // ACTION STYLES
67
+ td-sidesheet-actions {
68
+ padding: ($td-sidesheet-side-padding / 2);
69
+ display: block;
70
+ }
71
+
72
+ // CONTENT STYLES
73
+ .td-sidesheet-content-wrapper {
74
+ flex: 1;
75
+ // [.mat-content]
76
+ position: relative;
77
+ overflow-y: auto;
78
+ }
79
+ td-sidesheet-content {
80
+ display: block;
81
+ padding: $td-sidesheet-side-padding;
82
+ }
83
+ }
84
+
85
+ // FIRST/LAST CHILD ADJUSTMENTS
86
+ // top els in td-sidesheet-content and td-sidesheet can't have their default margin-tops (e.g. <p> tags)
87
+ // or they'll incorrectly add to card's top padding
88
+ td-sidesheet > :first-child, td-sidesheet-content > :first-child {
89
+ margin-top: 0;
90
+ }
91
+
92
+ // last els in td-sidesheet-content and td-sidesheet can't have their default margin-bottoms (e.g. <p> tags)
93
+ // or they'll incorrectly add to card's bottom padding
94
+ td-sidesheet > :last-child, td-sidesheet-content > :last-child {
95
+ margin-bottom: 0;
96
+ }
@@ -0,0 +1,2 @@
1
+ export declare class CovalentSidesheetModule {
2
+ }
@@ -1 +1 @@
1
- {"__symbolic":"module","version":4,"metadata":{"CovalentStepsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":38,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":40,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":41,"character":4},{"__symbolic":"reference","module":"@angular/material/core","name":"MatRippleModule","line":42,"character":4},{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalModule","line":43,"character":4},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ScrollDispatchModule","line":44,"character":4},{"__symbolic":"reference","module":"@covalent/core/common","name":"CovalentCommonModule","line":45,"character":4}],"declarations":[[{"__symbolic":"reference","name":"TdStepsComponent"},{"__symbolic":"reference","name":"TdStepComponent"},{"__symbolic":"reference","name":"TdStepHeaderComponent"},{"__symbolic":"reference","name":"TdStepBodyComponent"},{"__symbolic":"reference","name":"TdStepLabelDirective"},{"__symbolic":"reference","name":"TdStepActionsDirective"},{"__symbolic":"reference","name":"TdStepSummaryDirective"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵb"}]],"exports":[[{"__symbolic":"reference","name":"TdStepsComponent"},{"__symbolic":"reference","name":"TdStepComponent"},{"__symbolic":"reference","name":"TdStepHeaderComponent"},{"__symbolic":"reference","name":"TdStepBodyComponent"},{"__symbolic":"reference","name":"TdStepLabelDirective"},{"__symbolic":"reference","name":"TdStepActionsDirective"},{"__symbolic":"reference","name":"TdStepSummaryDirective"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵb"}]]}]}],"members":{}},"StepState":{"None":"none","Required":"required","Complete":"complete"},"TdStepLabelDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/portal","name":"TemplatePortalDirective","line":17,"character":42},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":14,"character":1},"arguments":[{"selector":"[td-step-label]ng-template"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":18,"character":63}]}]}},"TdStepActionsDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/portal","name":"TemplatePortalDirective","line":26,"character":44},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":23,"character":1},"arguments":[{"selector":"[td-step-actions]ng-template"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":18,"character":63}]}]}},"TdStepSummaryDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/portal","name":"TemplatePortalDirective","line":35,"character":44},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":32,"character":1},"arguments":[{"selector":"[td-step-summary]ng-template"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":18,"character":63}]}]}},"TdStepBase":{"__symbolic":"class","members":{}},"_TdStepMixinBase":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinDisableRipple","line":44,"character":32},"arguments":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinDisabled","line":44,"character":51},"arguments":[{"__symbolic":"reference","name":"TdStepBase"}]}]},"TdStepComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"_TdStepMixinBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":46,"character":1},"arguments":[{"selector":"td-step","inputs":["disabled","disableRipple"],"template":"<ng-template>\n <ng-content></ng-content>\n</ng-template>"}]}],"members":{"_content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":61,"character":3},"arguments":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}],"stepLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":62,"character":3},"arguments":[{"__symbolic":"reference","name":"TdStepLabelDirective"}]}]}],"stepActions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":63,"character":3},"arguments":[{"__symbolic":"reference","name":"TdStepActionsDirective"}]}]}],"stepSummary":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":64,"character":3},"arguments":[{"__symbolic":"reference","name":"TdStepSummaryDirective"}]}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3},"arguments":["label"]}]}],"sublabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":3},"arguments":["sublabel"]}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":3},"arguments":["active"]}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3},"arguments":["state"]}]}],"onActivated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":118,"character":3},"arguments":["activated"]}]}],"onDeactivated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":124,"character":3},"arguments":["deactivated"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":18,"character":63}]}],"ngOnInit":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"isComplete":[{"__symbolic":"method"}],"onDisabledChange":[{"__symbolic":"method"}],"_setActive":[{"__symbolic":"method"}],"_onActivated":[{"__symbolic":"method"}],"_onDeactivated":[{"__symbolic":"method"}]}},"IStepChangeEvent":{"__symbolic":"interface"},"StepMode":{"Vertical":"vertical","Horizontal":"horizontal"},"TdStepsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"td-steps","host":{"class":"td-steps"},"template":"<div *ngIf=\"isHorizontal()\" class=\"td-steps-header\">\n <ng-template let-step let-index=\"index\" let-last=\"last\" ngFor [ngForOf]=\"steps\">\n <td-step-header class=\"td-step-horizontal-header\"\n (keydown.enter)=\"step.open()\"\n [number]=\"index + 1\"\n [active]=\"step.active\"\n [disableRipple]=\"step.disableRipple\"\n [disabled]=\"step.disabled\" \n [state]=\"step.state\"\n (click)=\"step.open()\">\n <ng-template td-step-header-label [cdkPortalOutlet]=\"step.stepLabel\"></ng-template>\n <ng-template td-step-header-label [ngIf]=\"!step.stepLabel\">{{step.label}}</ng-template>\n <ng-template td-step-header-sublabel [ngIf]=\"true\">{{step.sublabel | truncate:30}}</ng-template>\n </td-step-header>\n <span *ngIf=\"!last\" class=\"td-horizontal-line\"></span>\n </ng-template>\n</div>\n<div *ngFor=\"let step of steps; let index = index; let last = last\" class=\"td-step\">\n <td-step-header class=\"td-step-vertical-header\"\n (keydown.enter)=\"step.toggle()\"\n [number]=\"index + 1\"\n [active]=\"step.active\" \n [disabled]=\"step.disabled\"\n [disableRipple]=\"step.disableRipple\"\n [state]=\"step.state\"\n (click)=\"step.toggle()\"\n *ngIf=\"isVertical()\">\n <ng-template td-step-header-label [cdkPortalOutlet]=\"step.stepLabel\"></ng-template>\n <ng-template td-step-header-label [ngIf]=\"!step.stepLabel\">{{step.label}}</ng-template>\n <ng-template td-step-header-sublabel [ngIf]=\"true\">{{step.sublabel}}</ng-template>\n </td-step-header>\n <ng-template [ngIf]=\"isVertical() || step.active || (!areStepsActive() && prevStep === step)\">\n <td-step-body [active]=\"step.active\" [state]=\"step.state\">\n <div *ngIf=\"isVertical()\" class=\"td-line-wrapper\">\n <div *ngIf=\"!last\" class=\"td-vertical-line\"></div>\n </div>\n <ng-template td-step-body-content [cdkPortalOutlet]=\"step.stepContent\"></ng-template>\n <ng-template td-step-body-actions [cdkPortalOutlet]=\"step.stepActions\"></ng-template>\n <ng-template td-step-body-summary [cdkPortalOutlet]=\"step.stepSummary\"></ng-template>\n </td-step-body>\n </ng-template>\n</div>\n","styles":[".td-line-wrapper,.td-step{position:relative}.td-steps-header{box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}.td-line-wrapper{width:24px;min-height:1px}.td-horizontal-line{border-bottom-width:1px;border-bottom-style:solid;height:1px;position:relative;top:36px;min-width:15px;-ms-flex:1;flex:1;box-sizing:border-box}::ng-deep :not([dir=rtl]) .td-horizontal-line{left:-6px;right:-3px}::ng-deep [dir=rtl] .td-horizontal-line{left:-3px;right:-6px}.td-vertical-line{position:absolute;bottom:-16px;top:-16px;border-left-width:1px;border-left-style:solid}::ng-deep :not([dir=rtl]) .td-vertical-line{left:20px;right:auto}::ng-deep [dir=rtl] .td-vertical-line{left:auto;right:20px}"]}]}],"members":{"stepsContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":32,"character":3},"arguments":[{"__symbolic":"reference","name":"TdStepComponent"}]}]}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3},"arguments":["mode"]}]}],"onStepChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":68,"character":3},"arguments":["stepChange"]}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"isHorizontal":[{"__symbolic":"method"}],"isVertical":[{"__symbolic":"method"}],"areStepsActive":[{"__symbolic":"method"}],"_onStepSelection":[{"__symbolic":"method"}],"_deactivateAllBut":[{"__symbolic":"method"}],"_registerSteps":[{"__symbolic":"method"}],"_deregisterSteps":[{"__symbolic":"method"}]}},"TdStepBodyComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"td-step-body","animations":[{"__symbolic":"reference","module":"@covalent/core/common","name":"tdCollapseAnimation","line":11,"character":4}],"template":"<ng-content></ng-content>\n<div class=\"td-step-body\">\n <div class=\"td-step-content-wrapper\"\n [@tdCollapse]=\"!active\">\n <div #contentRef cdkScrollable [class.td-step-content]=\"hasContent\">\n <ng-content select=\"[td-step-body-content]\"></ng-content>\n </div>\n <div #actionsRef\n [class.td-step-actions]=\"hasActions\">\n <ng-content select=\"[td-step-body-actions]\"></ng-content>\n </div>\n </div>\n <div #summaryRef\n [@tdCollapse]=\"active || !isComplete()\"\n [class.td-step-summary]=\"hasSummary\">\n <ng-content select=\"[td-step-body-summary]\"></ng-content>\n </div>\n</div>","styles":[":host{box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .td-step-body{overflow-x:hidden;-ms-flex:1;flex:1;box-sizing:border-box}:host .td-step-body .td-step-content-wrapper.ng-animating,:host .td-step-body .td-step-summary.ng-animating{overflow:hidden}:host .td-step-body .td-step-content{overflow-x:auto}:host .td-step-body .td-step-actions{box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}"]}]}],"members":{"contentRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":16,"character":3},"arguments":["contentRef",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":16,"character":35}}]}]}],"actionsRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":23,"character":3},"arguments":["actionsRef",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":23,"character":35}}]}]}],"summaryRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":30,"character":3},"arguments":["summaryRef",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":30,"character":35}}]}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3},"arguments":["active"]}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3},"arguments":["state"]}]}],"isComplete":[{"__symbolic":"method"}]}},"TdStepHeaderBase":{"__symbolic":"class","members":{}},"_TdStepHeaderMixinBase":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinDisableRipple","line":9,"character":38},"arguments":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinDisabled","line":9,"character":57},"arguments":[{"__symbolic":"reference","name":"TdStepHeaderBase"}]}]},"TdStepHeaderComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"_TdStepHeaderMixinBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"td-step-header","inputs":["disabled","disableRipple"],"template":"<div class=\"td-step-header\"\n [class.mat-disabled]=\"disabled\"\n matRipple\n [matRippleDisabled]=\"disabled || disableRipple\"\n [tabIndex]=\"disabled ? -1 : (tabIndex || 0)\">\n <div class=\"td-circle\"\n [class.mat-inactive]=\"(!active && !isComplete()) || disabled\"\n [class.mat-active]=\"active && !disabled\"\n *ngIf=\"!isRequired() && !isComplete()\">\n <span *ngIf=\"(active || !isComplete())\">{{number || ''}}</span>\n </div>\n <div class=\"td-complete\" *ngIf=\"isComplete()\">\n <mat-icon class=\"mat-complete\">check_circle</mat-icon>\n </div>\n <div class=\"td-triangle\"\n [class.bg-muted]=\"disabled\"\n *ngIf=\"isRequired()\">\n <mat-icon class=\"mat-warn\">warning</mat-icon>\n </div>\n <div class=\"td-step-label-wrapper\"\n [class.mat-inactive]=\"(!active && !isComplete()) || disabled\"\n [class.mat-warn]=\"isRequired() && !disabled\">\n <div class=\"td-step-label\">\n <ng-content select=\"[td-step-header-label]\"></ng-content>\n </div>\n <div class=\"td-step-sublabel\">\n <ng-content select=\"[td-step-header-sublabel]\"></ng-content>\n </div>\n </div>\n <span class=\"td-step-header-separator\"></span>\n <mat-icon class=\"td-edit-icon\" *ngIf=\"isComplete() && !active && !disabled\">mode_edit</mat-icon>\n</div>","styles":[".td-step-header{position:relative;outline:0;min-width:120px;height:72px;-ms-flex-direction:row;flex-direction:row;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:start;justify-content:start;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%}.td-step-header:hover:not(.mat-disabled){cursor:pointer}.td-step-header mat-icon.td-edit-icon{margin:0 8px}.td-step-header mat-icon.mat-warn{font-size:24px;height:24px;width:24px}.td-step-header mat-icon.mat-complete{position:relative;left:-2px;top:2px;font-size:28px;height:24px;width:24px}.td-step-header .td-circle{height:24px;width:24px;line-height:24px;border-radius:99%;text-align:center;-ms-flex:none;flex:none}.td-step-header .td-circle mat-icon{margin-top:2px;font-weight:700}.td-step-header .td-triangle>mat-icon{font-size:25px}::ng-deep :not([dir=rtl]) .td-step-header .td-circle,::ng-deep :not([dir=rtl]) .td-step-header .td-complete,::ng-deep :not([dir=rtl]) .td-step-header .td-triangle{margin-left:8px;margin-right:0}::ng-deep [dir=rtl] .td-step-header .td-circle,::ng-deep [dir=rtl] .td-step-header .td-complete,::ng-deep [dir=rtl] .td-step-header .td-triangle{margin-left:0;margin-right:8px}.td-step-header .td-circle,.td-step-header .td-complete{font-size:14px}.td-step-header .td-step-label-wrapper{padding-left:8px;padding-right:8px}.td-step-header .td-step-header-separator{-ms-flex:1;flex:1;box-sizing:border-box}"]}]}],"members":{"number":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3},"arguments":["number"]}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3},"arguments":["active"]}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3},"arguments":["state"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3},"arguments":["tabIndex"]}]}],"isComplete":[{"__symbolic":"method"}],"isRequired":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"nav[td-steps][horizontal]","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":23,"character":19},"member":"OnPush"},"host":{"class":"td-steps td-steps-horizontal","[class.td-step-header-pagination-controls-enabled]":"_showPaginationControls","[class.td-step-header-rtl]":"_getLayoutDirection() == 'rtl'","$quoted$":["[class.td-step-header-pagination-controls-enabled]","[class.td-step-header-rtl]"]},"template":"<div class=\"td-steps-header\">\n <div class=\"td-step-header-pagination td-step-header-pagination-before mat-elevation-z4\"\n aria-hidden=\"true\"\n mat-ripple [matRippleDisabled]=\"_disableScrollBefore\"\n [class.td-step-header-pagination-disabled]=\"_disableScrollBefore\"\n (click)=\"_scrollHeader('before')\">\n <div class=\"td-step-header-pagination-chevron\"></div>\n </div>\n <div #stepListContainer class=\"td-steps-header-container\" (keydown)=\"_handleKeydown($event)\">\n <div #stepList class=\"td-steps-header-list\">\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"td-step-header-pagination td-step-header-pagination-after mat-elevation-z4\"\n aria-hidden=\"true\"\n mat-ripple [matRippleDisabled]=\"_disableScrollAfter\"\n [class.td-step-header-pagination-disabled]=\"_disableScrollAfter\"\n (click)=\"_scrollHeader('after')\">\n <div class=\"td-step-header-pagination-chevron\"></div>\n </div>\n</div>\n","styles":[":host{width:100%;display:block}.td-steps-header,.td-steps-header-list{box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}.td-steps-header-container{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;overflow:hidden;z-index:1}.td-steps-header-list{-ms-flex-positive:1;flex-grow:1;position:relative;transition:transform .5s cubic-bezier(.35,0,.25,1),-webkit-transform .5s cubic-bezier(.35,0,.25,1);-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}.td-step-header-pagination{position:relative;display:none;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;min-width:32px;cursor:pointer;z-index:2}:host.td-step-header-pagination-controls-enabled .td-step-header-pagination{display:-ms-flexbox;display:flex}.td-step-header-pagination-before,:host.td-step-header-rtl .td-step-header-pagination-after{padding-left:4px}.td-step-header-pagination-before .td-step-header-pagination-chevron,:host.td-step-header-rtl .td-step-header-pagination-after .td-step-header-pagination-chevron{-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg)}.td-step-header-pagination-after,:host.td-step-header-rtl .td-step-header-pagination-before{padding-right:4px}.td-step-header-pagination-after .td-step-header-pagination-chevron,:host.td-step-header-rtl .td-step-header-pagination-before .td-step-header-pagination-chevron{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.td-step-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;content:'';height:8px;width:8px}.td-step-header-pagination-disabled{box-shadow:none;cursor:default}.td-horizontal-line{border-bottom-width:1px;border-bottom-style:solid;height:1px;min-width:20px;-ms-flex:1;flex:1;box-sizing:border-box}"]}]}],"members":{"_steps":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":53,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵb"}]}]}],"_stepListContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":55,"character":3},"arguments":["stepListContainer"]}]}],"_stepList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":56,"character":3},"arguments":["stepList"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":78,"character":15}}],null,null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":76,"character":35},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ViewportRuler","line":77,"character":38},{"__symbolic":"reference","module":"@angular/cdk/bidi","name":"Directionality","line":78,"character":40},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":79,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":80,"character":42}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterContentChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_handleKeydown":[{"__symbolic":"method"}],"updatePagination":[{"__symbolic":"method"}],"_getLayoutDirection":[{"__symbolic":"method"}],"_updateStepScrollPosition":[{"__symbolic":"method"}],"_scrollHeader":[{"__symbolic":"method"}],"_checkPaginationEnabled":[{"__symbolic":"method"}],"_checkScrollingControls":[{"__symbolic":"method"}],"_getMaxScrollDistance":[{"__symbolic":"method"}],"_configureSteps":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"_TdStepMixinBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"[td-step-link],[tdStepLink]","inputs":["disabled","disableRipple"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":12,"character":19},"member":"OnPush"},"host":{"[class.td-step-link]":"true","[attr.tabindex]":"disabled ? -1 : (tabIndex || 0)","[attr.disabled]":"disabled || null","[class.mat-disabled]":"disabled || null","(click)":"_handleClick($event)","$quoted$":["[class.td-step-link]","[attr.tabindex]","[attr.disabled]","[class.mat-disabled]","(click)"]},"template":"<td-step-header class=\"td-step-header-wrapper\"\n [tabIndex]=\"-1\"\n [number]=\"number\"\n [active]=\"active\"\n [disableRipple]=\"disableRipple || disabled\"\n [disabled]=\"disabled\" \n [state]=\"state\">\n <ng-template td-step-header-label [ngIf]=\"true\">{{label}}</ng-template>\n <ng-template td-step-header-sublabel [ngIf]=\"true\">{{sublabel | truncate:30}}</ng-template>\n <ng-content></ng-content>\n</td-step-header>","styles":[":host{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.mat-disabled{pointer-events:none}:host .td-step-header-wrapper{width:100%}"]}]}],"members":{"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3},"arguments":["state"]}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3},"arguments":["label"]}]}],"sublabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":3},"arguments":["sublabel"]}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3},"arguments":["active"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3},"arguments":["tabIndex"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":86,"character":42},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":87,"character":33}]}],"_handleClick":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"selector":"nav[td-steps][vertical]","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":19,"character":19},"member":"OnPush"},"host":{"class":"td-steps td-steps-vertical"},"template":"<div class=\"td-steps-header\">\n <div class=\"td-steps-header-container\">\n <div #stepList class=\"td-steps-header-list\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n ","styles":[".td-vertical-line-wrapper{position:relative}.td-vertical-line-wrapper .td-vertical-line{position:absolute;top:-16px;height:34px;border-left-width:1px;border-left-style:solid}::ng-deep :not([dir=rtl]) .td-vertical-line-wrapper .td-vertical-line{left:20px;right:auto}::ng-deep [dir=rtl] .td-vertical-line-wrapper .td-vertical-line{left:auto;right:20px}"]}]}],"members":{"_steps":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":33,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵb"}]}]}],"_stepList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":35,"character":3},"arguments":["stepList"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":37,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":38,"character":42}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_configureSteps":[{"__symbolic":"method"}]}}},"origins":{"CovalentStepsModule":"./steps.module","StepState":"./step.component","TdStepLabelDirective":"./step.component","TdStepActionsDirective":"./step.component","TdStepSummaryDirective":"./step.component","TdStepBase":"./step.component","_TdStepMixinBase":"./step.component","TdStepComponent":"./step.component","IStepChangeEvent":"./steps.component","StepMode":"./steps.component","TdStepsComponent":"./steps.component","TdStepBodyComponent":"./step-body/step-body.component","TdStepHeaderBase":"./step-header/step-header.component","_TdStepHeaderMixinBase":"./step-header/step-header.component","TdStepHeaderComponent":"./step-header/step-header.component","ɵa":"./nav/nav-steps-horizontal/nav-steps-horizontal.component","ɵb":"./nav/nav-step-link/nav-step-link.component","ɵc":"./nav/nav-steps-vertical/nav-steps-vertical.component"},"importAs":"@covalent/core/steps"}
1
+ {"__symbolic":"module","version":4,"metadata":{"CovalentStepsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":38,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":40,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":41,"character":4},{"__symbolic":"reference","module":"@angular/material/core","name":"MatRippleModule","line":42,"character":4},{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalModule","line":43,"character":4},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ScrollDispatchModule","line":44,"character":4},{"__symbolic":"reference","module":"@covalent/core/common","name":"CovalentCommonModule","line":45,"character":4}],"declarations":[[{"__symbolic":"reference","name":"TdStepsComponent"},{"__symbolic":"reference","name":"TdStepComponent"},{"__symbolic":"reference","name":"TdStepHeaderComponent"},{"__symbolic":"reference","name":"TdStepBodyComponent"},{"__symbolic":"reference","name":"TdStepLabelDirective"},{"__symbolic":"reference","name":"TdStepActionsDirective"},{"__symbolic":"reference","name":"TdStepSummaryDirective"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵb"}]],"exports":[[{"__symbolic":"reference","name":"TdStepsComponent"},{"__symbolic":"reference","name":"TdStepComponent"},{"__symbolic":"reference","name":"TdStepHeaderComponent"},{"__symbolic":"reference","name":"TdStepBodyComponent"},{"__symbolic":"reference","name":"TdStepLabelDirective"},{"__symbolic":"reference","name":"TdStepActionsDirective"},{"__symbolic":"reference","name":"TdStepSummaryDirective"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵb"}]]}]}],"members":{}},"StepState":{"None":"none","Required":"required","Complete":"complete"},"TdStepLabelDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/portal","name":"TemplatePortalDirective","line":17,"character":42},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":14,"character":1},"arguments":[{"selector":"[td-step-label]ng-template"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":18,"character":63}]}]}},"TdStepActionsDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/portal","name":"TemplatePortalDirective","line":26,"character":44},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":23,"character":1},"arguments":[{"selector":"[td-step-actions]ng-template"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":18,"character":63}]}]}},"TdStepSummaryDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/portal","name":"TemplatePortalDirective","line":35,"character":44},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":32,"character":1},"arguments":[{"selector":"[td-step-summary]ng-template"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":18,"character":63}]}]}},"TdStepBase":{"__symbolic":"class","members":{}},"_TdStepMixinBase":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinDisableRipple","line":44,"character":32},"arguments":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinDisabled","line":44,"character":51},"arguments":[{"__symbolic":"reference","name":"TdStepBase"}]}]},"TdStepComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"_TdStepMixinBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":46,"character":1},"arguments":[{"selector":"td-step","inputs":["disabled","disableRipple"],"template":"<ng-template>\n <ng-content></ng-content>\n</ng-template>"}]}],"members":{"_content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":61,"character":3},"arguments":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}],"stepLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":62,"character":3},"arguments":[{"__symbolic":"reference","name":"TdStepLabelDirective"}]}]}],"stepActions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":63,"character":3},"arguments":[{"__symbolic":"reference","name":"TdStepActionsDirective"}]}]}],"stepSummary":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":64,"character":3},"arguments":[{"__symbolic":"reference","name":"TdStepSummaryDirective"}]}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3},"arguments":["label"]}]}],"sublabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":3},"arguments":["sublabel"]}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":3},"arguments":["active"]}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":3},"arguments":["state"]}]}],"onActivated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":118,"character":3},"arguments":["activated"]}]}],"onDeactivated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":124,"character":3},"arguments":["deactivated"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":18,"character":63}]}],"ngOnInit":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"isComplete":[{"__symbolic":"method"}],"onDisabledChange":[{"__symbolic":"method"}],"_setActive":[{"__symbolic":"method"}],"_onActivated":[{"__symbolic":"method"}],"_onDeactivated":[{"__symbolic":"method"}]}},"IStepChangeEvent":{"__symbolic":"interface"},"StepMode":{"Vertical":"vertical","Horizontal":"horizontal"},"TdStepsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"td-steps","host":{"class":"td-steps"},"template":"<div *ngIf=\"isHorizontal()\" class=\"td-steps-header\">\n <ng-template let-step let-index=\"index\" let-last=\"last\" ngFor [ngForOf]=\"steps\">\n <td-step-header class=\"td-step-horizontal-header\"\n (keydown.enter)=\"step.open()\"\n [number]=\"index + 1\"\n [active]=\"step.active\"\n [disableRipple]=\"step.disableRipple\"\n [disabled]=\"step.disabled\" \n [state]=\"step.state\"\n (click)=\"step.open()\">\n <ng-template td-step-header-label [cdkPortalOutlet]=\"step.stepLabel\"></ng-template>\n <ng-template td-step-header-label [ngIf]=\"!step.stepLabel\">{{step.label}}</ng-template>\n <ng-template td-step-header-sublabel [ngIf]=\"true\">{{step.sublabel | truncate:30}}</ng-template>\n </td-step-header>\n <span *ngIf=\"!last\" class=\"td-horizontal-line\"></span>\n </ng-template>\n</div>\n<div *ngFor=\"let step of steps; let index = index; let last = last\" class=\"td-step\">\n <td-step-header class=\"td-step-vertical-header\"\n (keydown.enter)=\"step.toggle()\"\n [number]=\"index + 1\"\n [active]=\"step.active\" \n [disabled]=\"step.disabled\"\n [disableRipple]=\"step.disableRipple\"\n [state]=\"step.state\"\n (click)=\"step.toggle()\"\n *ngIf=\"isVertical()\">\n <ng-template td-step-header-label [cdkPortalOutlet]=\"step.stepLabel\"></ng-template>\n <ng-template td-step-header-label [ngIf]=\"!step.stepLabel\">{{step.label}}</ng-template>\n <ng-template td-step-header-sublabel [ngIf]=\"true\">{{step.sublabel}}</ng-template>\n </td-step-header>\n <ng-template [ngIf]=\"isVertical() || step.active || (!areStepsActive() && prevStep === step)\">\n <td-step-body [active]=\"step.active\" [state]=\"step.state\">\n <div *ngIf=\"isVertical()\" class=\"td-line-wrapper\">\n <div *ngIf=\"!last\" class=\"td-vertical-line\"></div>\n </div>\n <ng-template td-step-body-content [cdkPortalOutlet]=\"step.stepContent\"></ng-template>\n <ng-template td-step-body-actions [cdkPortalOutlet]=\"step.stepActions\"></ng-template>\n <ng-template td-step-body-summary [cdkPortalOutlet]=\"step.stepSummary\"></ng-template>\n </td-step-body>\n </ng-template>\n</div>\n","styles":[".td-line-wrapper,.td-step{position:relative}.td-steps-header{-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}.td-line-wrapper{width:24px;min-height:1px}.td-horizontal-line{border-bottom-width:1px;border-bottom-style:solid;height:1px;position:relative;top:36px;min-width:15px;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-sizing:border-box;box-sizing:border-box}::ng-deep :not([dir=rtl]) .td-horizontal-line{left:-6px;right:-3px}::ng-deep [dir=rtl] .td-horizontal-line{left:-3px;right:-6px}.td-vertical-line{position:absolute;bottom:-16px;top:-16px;border-left-width:1px;border-left-style:solid}::ng-deep :not([dir=rtl]) .td-vertical-line{left:20px;right:auto}::ng-deep [dir=rtl] .td-vertical-line{left:auto;right:20px}"]}]}],"members":{"stepsContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":32,"character":3},"arguments":[{"__symbolic":"reference","name":"TdStepComponent"}]}]}],"mode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3},"arguments":["mode"]}]}],"onStepChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":68,"character":3},"arguments":["stepChange"]}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"isHorizontal":[{"__symbolic":"method"}],"isVertical":[{"__symbolic":"method"}],"areStepsActive":[{"__symbolic":"method"}],"_onStepSelection":[{"__symbolic":"method"}],"_deactivateAllBut":[{"__symbolic":"method"}],"_registerSteps":[{"__symbolic":"method"}],"_deregisterSteps":[{"__symbolic":"method"}]}},"TdStepBodyComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"td-step-body","animations":[{"__symbolic":"reference","module":"@covalent/core/common","name":"tdCollapseAnimation","line":11,"character":4}],"template":"<ng-content></ng-content>\n<div class=\"td-step-body\">\n <div class=\"td-step-content-wrapper\"\n [@tdCollapse]=\"!active\">\n <div #contentRef cdkScrollable [class.td-step-content]=\"hasContent\">\n <ng-content select=\"[td-step-body-content]\"></ng-content>\n </div>\n <div #actionsRef\n [class.td-step-actions]=\"hasActions\">\n <ng-content select=\"[td-step-body-actions]\"></ng-content>\n </div>\n </div>\n <div #summaryRef\n [@tdCollapse]=\"active || !isComplete()\"\n [class.td-step-summary]=\"hasSummary\">\n <ng-content select=\"[td-step-body-summary]\"></ng-content>\n </div>\n</div>","styles":[":host{-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}:host .td-step-body{overflow-x:hidden;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-sizing:border-box;box-sizing:border-box}:host .td-step-body .td-step-content-wrapper.ng-animating,:host .td-step-body .td-step-summary.ng-animating{overflow:hidden}:host .td-step-body .td-step-content{overflow-x:auto}:host .td-step-body .td-step-actions{-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}"]}]}],"members":{"contentRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":16,"character":3},"arguments":["contentRef",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":16,"character":35}}]}]}],"actionsRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":23,"character":3},"arguments":["actionsRef",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":23,"character":35}}]}]}],"summaryRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":30,"character":3},"arguments":["summaryRef",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":30,"character":35}}]}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3},"arguments":["active"]}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3},"arguments":["state"]}]}],"isComplete":[{"__symbolic":"method"}]}},"TdStepHeaderBase":{"__symbolic":"class","members":{}},"_TdStepHeaderMixinBase":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinDisableRipple","line":9,"character":38},"arguments":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinDisabled","line":9,"character":57},"arguments":[{"__symbolic":"reference","name":"TdStepHeaderBase"}]}]},"TdStepHeaderComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"_TdStepHeaderMixinBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"td-step-header","inputs":["disabled","disableRipple"],"template":"<div class=\"td-step-header\"\n [class.mat-disabled]=\"disabled\"\n matRipple\n [matRippleDisabled]=\"disabled || disableRipple\"\n [tabIndex]=\"disabled ? -1 : (tabIndex || 0)\">\n <div class=\"td-circle\"\n [class.mat-inactive]=\"(!active && !isComplete()) || disabled\"\n [class.mat-active]=\"active && !disabled\"\n *ngIf=\"!isRequired() && !isComplete()\">\n <span *ngIf=\"(active || !isComplete())\">{{number || ''}}</span>\n </div>\n <div class=\"td-complete\" *ngIf=\"isComplete()\">\n <mat-icon class=\"mat-complete\">check_circle</mat-icon>\n </div>\n <div class=\"td-triangle\"\n [class.bg-muted]=\"disabled\"\n *ngIf=\"isRequired()\">\n <mat-icon class=\"mat-warn\">warning</mat-icon>\n </div>\n <div class=\"td-step-label-wrapper\"\n [class.mat-inactive]=\"(!active && !isComplete()) || disabled\"\n [class.mat-warn]=\"isRequired() && !disabled\">\n <div class=\"td-step-label\">\n <ng-content select=\"[td-step-header-label]\"></ng-content>\n </div>\n <div class=\"td-step-sublabel\">\n <ng-content select=\"[td-step-header-sublabel]\"></ng-content>\n </div>\n </div>\n <span class=\"td-step-header-separator\"></span>\n <mat-icon class=\"td-edit-icon\" *ngIf=\"isComplete() && !active && !disabled\">mode_edit</mat-icon>\n</div>","styles":[".td-step-header{position:relative;outline:0;min-width:120px;height:72px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%}.td-step-header:hover:not(.mat-disabled){cursor:pointer}.td-step-header mat-icon.td-edit-icon{margin:0 8px}.td-step-header mat-icon.mat-warn{font-size:24px;height:24px;width:24px}.td-step-header mat-icon.mat-complete{position:relative;left:-2px;top:2px;font-size:28px;height:24px;width:24px}.td-step-header .td-circle{height:24px;width:24px;line-height:24px;border-radius:99%;text-align:center;-webkit-box-flex:0;-ms-flex:none;flex:none}.td-step-header .td-circle mat-icon{margin-top:2px;font-weight:700}.td-step-header .td-triangle>mat-icon{font-size:25px}::ng-deep :not([dir=rtl]) .td-step-header .td-circle,::ng-deep :not([dir=rtl]) .td-step-header .td-complete,::ng-deep :not([dir=rtl]) .td-step-header .td-triangle{margin-left:8px;margin-right:0}::ng-deep [dir=rtl] .td-step-header .td-circle,::ng-deep [dir=rtl] .td-step-header .td-complete,::ng-deep [dir=rtl] .td-step-header .td-triangle{margin-left:0;margin-right:8px}.td-step-header .td-circle,.td-step-header .td-complete{font-size:14px}.td-step-header .td-step-label-wrapper{padding-left:8px;padding-right:8px}.td-step-header .td-step-header-separator{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-sizing:border-box;box-sizing:border-box}"]}]}],"members":{"number":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3},"arguments":["number"]}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3},"arguments":["active"]}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3},"arguments":["state"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3},"arguments":["tabIndex"]}]}],"isComplete":[{"__symbolic":"method"}],"isRequired":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"nav[td-steps][horizontal]","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":23,"character":19},"member":"OnPush"},"host":{"class":"td-steps td-steps-horizontal","[class.td-step-header-pagination-controls-enabled]":"_showPaginationControls","[class.td-step-header-rtl]":"_getLayoutDirection() == 'rtl'","$quoted$":["[class.td-step-header-pagination-controls-enabled]","[class.td-step-header-rtl]"]},"template":"<div class=\"td-steps-header\">\n <div class=\"td-step-header-pagination td-step-header-pagination-before mat-elevation-z4\"\n aria-hidden=\"true\"\n mat-ripple [matRippleDisabled]=\"_disableScrollBefore\"\n [class.td-step-header-pagination-disabled]=\"_disableScrollBefore\"\n (click)=\"_scrollHeader('before')\">\n <div class=\"td-step-header-pagination-chevron\"></div>\n </div>\n <div #stepListContainer class=\"td-steps-header-container\" (keydown)=\"_handleKeydown($event)\">\n <div #stepList class=\"td-steps-header-list\">\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"td-step-header-pagination td-step-header-pagination-after mat-elevation-z4\"\n aria-hidden=\"true\"\n mat-ripple [matRippleDisabled]=\"_disableScrollAfter\"\n [class.td-step-header-pagination-disabled]=\"_disableScrollAfter\"\n (click)=\"_scrollHeader('after')\">\n <div class=\"td-step-header-pagination-chevron\"></div>\n </div>\n</div>\n","styles":[":host{width:100%;display:block}.td-steps-header,.td-steps-header-list{-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}.td-steps-header-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;z-index:1}.td-steps-header-list{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;position:relative;-webkit-transition:-webkit-transform .5s cubic-bezier(.35,0,.25,1);transition:transform .5s cubic-bezier(.35,0,.25,1),-webkit-transform .5s cubic-bezier(.35,0,.25,1);-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}.td-step-header-pagination{position:relative;display:none;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:32px;cursor:pointer;z-index:2}:host.td-step-header-pagination-controls-enabled .td-step-header-pagination{display:-webkit-box;display:-ms-flexbox;display:flex}.td-step-header-pagination-before,:host.td-step-header-rtl .td-step-header-pagination-after{padding-left:4px}.td-step-header-pagination-before .td-step-header-pagination-chevron,:host.td-step-header-rtl .td-step-header-pagination-after .td-step-header-pagination-chevron{-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg)}.td-step-header-pagination-after,:host.td-step-header-rtl .td-step-header-pagination-before{padding-right:4px}.td-step-header-pagination-after .td-step-header-pagination-chevron,:host.td-step-header-rtl .td-step-header-pagination-before .td-step-header-pagination-chevron{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.td-step-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;content:'';height:8px;width:8px}.td-step-header-pagination-disabled{-webkit-box-shadow:none;box-shadow:none;cursor:default}.td-horizontal-line{border-bottom-width:1px;border-bottom-style:solid;height:1px;min-width:20px;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-sizing:border-box;box-sizing:border-box}"]}]}],"members":{"_steps":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":53,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵb"}]}]}],"_stepListContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":55,"character":3},"arguments":["stepListContainer"]}]}],"_stepList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":56,"character":3},"arguments":["stepList"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":78,"character":15}}],null,null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":76,"character":35},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ViewportRuler","line":77,"character":38},{"__symbolic":"reference","module":"@angular/cdk/bidi","name":"Directionality","line":78,"character":40},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":79,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":80,"character":42}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterContentChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_handleKeydown":[{"__symbolic":"method"}],"updatePagination":[{"__symbolic":"method"}],"_getLayoutDirection":[{"__symbolic":"method"}],"_updateStepScrollPosition":[{"__symbolic":"method"}],"_scrollHeader":[{"__symbolic":"method"}],"_checkPaginationEnabled":[{"__symbolic":"method"}],"_checkScrollingControls":[{"__symbolic":"method"}],"_getMaxScrollDistance":[{"__symbolic":"method"}],"_configureSteps":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"_TdStepMixinBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"[td-step-link],[tdStepLink]","inputs":["disabled","disableRipple"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":12,"character":19},"member":"OnPush"},"host":{"[class.td-step-link]":"true","[attr.tabindex]":"disabled ? -1 : (tabIndex || 0)","[attr.disabled]":"disabled || null","[class.mat-disabled]":"disabled || null","(click)":"_handleClick($event)","$quoted$":["[class.td-step-link]","[attr.tabindex]","[attr.disabled]","[class.mat-disabled]","(click)"]},"template":"<td-step-header class=\"td-step-header-wrapper\"\n [tabIndex]=\"-1\"\n [number]=\"number\"\n [active]=\"active\"\n [disableRipple]=\"disableRipple || disabled\"\n [disabled]=\"disabled\" \n [state]=\"state\">\n <ng-template td-step-header-label [ngIf]=\"true\">{{label}}</ng-template>\n <ng-template td-step-header-sublabel [ngIf]=\"true\">{{sublabel | truncate:30}}</ng-template>\n <ng-content></ng-content>\n</td-step-header>","styles":[":host{-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.mat-disabled{pointer-events:none}:host .td-step-header-wrapper{width:100%}"]}]}],"members":{"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3},"arguments":["state"]}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3},"arguments":["label"]}]}],"sublabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":3},"arguments":["sublabel"]}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3},"arguments":["active"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3},"arguments":["tabIndex"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":86,"character":42},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":87,"character":33}]}],"_handleClick":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"selector":"nav[td-steps][vertical]","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":19,"character":19},"member":"OnPush"},"host":{"class":"td-steps td-steps-vertical"},"template":"<div class=\"td-steps-header\">\n <div class=\"td-steps-header-container\">\n <div #stepList class=\"td-steps-header-list\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n ","styles":[".td-vertical-line-wrapper{position:relative}.td-vertical-line-wrapper .td-vertical-line{position:absolute;top:-16px;height:34px;border-left-width:1px;border-left-style:solid}::ng-deep :not([dir=rtl]) .td-vertical-line-wrapper .td-vertical-line{left:20px;right:auto}::ng-deep [dir=rtl] .td-vertical-line-wrapper .td-vertical-line{left:auto;right:20px}"]}]}],"members":{"_steps":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":33,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵb"}]}]}],"_stepList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":35,"character":3},"arguments":["stepList"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":37,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":38,"character":42}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_configureSteps":[{"__symbolic":"method"}]}}},"origins":{"CovalentStepsModule":"./steps.module","StepState":"./step.component","TdStepLabelDirective":"./step.component","TdStepActionsDirective":"./step.component","TdStepSummaryDirective":"./step.component","TdStepBase":"./step.component","_TdStepMixinBase":"./step.component","TdStepComponent":"./step.component","IStepChangeEvent":"./steps.component","StepMode":"./steps.component","TdStepsComponent":"./steps.component","TdStepBodyComponent":"./step-body/step-body.component","TdStepHeaderBase":"./step-header/step-header.component","_TdStepHeaderMixinBase":"./step-header/step-header.component","TdStepHeaderComponent":"./step-header/step-header.component","ɵa":"./nav/nav-steps-horizontal/nav-steps-horizontal.component","ɵb":"./nav/nav-step-link/nav-step-link.component","ɵc":"./nav/nav-steps-vertical/nav-steps-vertical.component"},"importAs":"@covalent/core/steps"}
@@ -0,0 +1,17 @@
1
+ :host {
2
+ &.mat-disabled {
3
+ pointer-events: none;
4
+ }
5
+ .td-step-header-wrapper {
6
+ width: 100%;
7
+ }
8
+ // layout
9
+ box-sizing: border-box;
10
+ display: flex;
11
+ // layout="row"
12
+ flex-direction: row;
13
+ align-items: center;
14
+ align-content: center;
15
+ max-width: 100%;
16
+ justify-content: flex-start;
17
+ }
@@ -0,0 +1,81 @@
1
+ :host {
2
+ width: 100%;
3
+ display: block;
4
+ }
5
+ .td-steps-header,
6
+ .td-steps-header-list {
7
+ // layout
8
+ box-sizing: border-box;
9
+ display: flex;
10
+ // layout="row"
11
+ flex-direction: row;
12
+ }
13
+ .td-steps-header-container {
14
+ display: flex;
15
+ flex-grow: 1;
16
+ overflow: hidden;
17
+ z-index: 1;
18
+ }
19
+
20
+ .td-steps-header-list {
21
+ flex-grow: 1;
22
+ position: relative;
23
+ transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
24
+ align-items: center;
25
+ align-content: center;
26
+ max-width: 100%;
27
+ justify-content: flex-start;
28
+ }
29
+
30
+ .td-step-header-pagination {
31
+ position: relative;
32
+ display: none;
33
+ justify-content: center;
34
+ align-items: center;
35
+ min-width: 32px;
36
+ cursor: pointer;
37
+ z-index: 2;
38
+ }
39
+
40
+ :host.td-step-header-pagination-controls-enabled .td-step-header-pagination {
41
+ display: flex;
42
+ }
43
+
44
+ // The pagination control that is displayed on the left side of the tab header.
45
+ .td-step-header-pagination-before, :host.td-step-header-rtl .td-step-header-pagination-after {
46
+ padding-left: 4px;
47
+ .td-step-header-pagination-chevron {
48
+ transform: rotate(-135deg);
49
+ }
50
+ }
51
+
52
+ // The pagination control that is displayed on the right side of the tab header.
53
+ :host.td-step-header-rtl .td-step-header-pagination-before, .td-step-header-pagination-after {
54
+ padding-right: 4px;
55
+ .td-step-header-pagination-chevron {
56
+ transform: rotate(45deg);
57
+ }
58
+ }
59
+
60
+ .td-step-header-pagination-chevron {
61
+ border-style: solid;
62
+ border-width: 2px 2px 0 0;
63
+ content: '';
64
+ height: 8px;
65
+ width: 8px;
66
+ }
67
+
68
+ .td-step-header-pagination-disabled {
69
+ box-shadow: none;
70
+ cursor: default;
71
+ }
72
+
73
+ .td-horizontal-line {
74
+ border-bottom-width: 1px;
75
+ border-bottom-style: solid;
76
+ height: 1px;
77
+ min-width: 20px;
78
+ // flex
79
+ flex: 1;
80
+ box-sizing: border-box;
81
+ }
@@ -0,0 +1,18 @@
1
+ .td-vertical-line-wrapper {
2
+ position: relative;
3
+ .td-vertical-line {
4
+ position: absolute;
5
+ top: -16px;
6
+ height: 34px;
7
+ border-left-width: 1px;
8
+ border-left-style: solid;
9
+ ::ng-deep :not([dir='rtl']) & {
10
+ left: 20px;
11
+ right: auto;
12
+ }
13
+ ::ng-deep [dir='rtl'] & {
14
+ left: auto;
15
+ right: 20px;
16
+ }
17
+ }
18
+ }
@@ -0,0 +1,29 @@
1
+ :host {
2
+ // layout
3
+ box-sizing: border-box;
4
+ display: flex;
5
+ // layout="row"
6
+ flex-direction: row;
7
+ .td-step-body {
8
+ overflow-x: hidden;
9
+ // flex
10
+ flex: 1;
11
+ box-sizing: border-box;
12
+ .td-step-summary,
13
+ .td-step-content-wrapper {
14
+ &.ng-animating {
15
+ overflow: hidden;
16
+ }
17
+ }
18
+ .td-step-content {
19
+ overflow-x: auto;
20
+ }
21
+ .td-step-actions {
22
+ // layout
23
+ box-sizing: border-box;
24
+ display: flex;
25
+ // layout="row"
26
+ flex-direction: row;
27
+ }
28
+ }
29
+ }
@@ -0,0 +1,90 @@
1
+ $step-circle: 24px;
2
+
3
+ .td-step-header {
4
+ position: relative;
5
+ outline: none;
6
+ min-width: 120px;
7
+ height: 72px;
8
+ // layout row
9
+ flex-direction: row;
10
+ // layout
11
+ box-sizing: border-box;
12
+ display: flex;
13
+ // flex
14
+ flex: 1;
15
+ // layout-align start
16
+ justify-content: flex-start;
17
+ // layout-align start center
18
+ align-items: center;
19
+ align-content: center;
20
+ max-width: 100%;
21
+ &:hover:not(.mat-disabled) {
22
+ cursor: pointer;
23
+ }
24
+ mat-icon.td-edit-icon {
25
+ margin: 0 8px;
26
+ }
27
+ mat-icon {
28
+ &.mat-warn {
29
+ font-size: $step-circle;
30
+ height: $step-circle;
31
+ width: $step-circle;
32
+ }
33
+ &.mat-complete {
34
+ position: relative;
35
+ left: -2px;
36
+ top: 2px;
37
+ font-size: $step-circle + 4;
38
+ height: $step-circle;
39
+ width: $step-circle;
40
+ }
41
+ }
42
+ .td-circle {
43
+ height: $step-circle;
44
+ width: $step-circle;
45
+ line-height: $step-circle;
46
+ border-radius: 99%;
47
+ text-align: center;
48
+ flex: none;
49
+ & mat-icon {
50
+ margin-top: 2px;
51
+ font-weight: bold;
52
+ }
53
+ }
54
+ .td-triangle {
55
+ & > mat-icon {
56
+ font-size: 25px;
57
+ }
58
+ }
59
+ .td-complete {
60
+ font-size: 0;
61
+ }
62
+ .td-circle,
63
+ .td-triangle,
64
+ .td-complete {
65
+ ::ng-deep :not([dir='rtl']) & {
66
+ margin: {
67
+ left: 8px;
68
+ right: 0;
69
+ }
70
+ }
71
+ ::ng-deep [dir='rtl'] & {
72
+ margin: {
73
+ left: 0;
74
+ right: 8px;
75
+ }
76
+ }
77
+ }
78
+ .td-circle,
79
+ .td-complete {
80
+ font-size: 14px;
81
+ }
82
+ .td-step-label-wrapper {
83
+ padding-left: 8px;
84
+ padding-right: 8px;
85
+ }
86
+ .td-step-header-separator {
87
+ flex: 1;
88
+ box-sizing: border-box;
89
+ }
90
+ }
@@ -0,0 +1,53 @@
1
+ .td-line-wrapper,
2
+ .td-step {
3
+ position: relative;
4
+ }
5
+
6
+ .td-steps-header {
7
+ // layout
8
+ box-sizing: border-box;
9
+ display: flex;
10
+ // layout="row"
11
+ flex-direction: row;
12
+ }
13
+
14
+ .td-line-wrapper {
15
+ width: 24px;
16
+ min-height: 1px;
17
+ }
18
+
19
+ .td-horizontal-line {
20
+ border-bottom-width: 1px;
21
+ border-bottom-style: solid;
22
+ height: 1px;
23
+ position: relative;
24
+ top: 36px;
25
+ ::ng-deep :not([dir='rtl']) & {
26
+ left: -6px;
27
+ right: -3px;
28
+ }
29
+ ::ng-deep [dir='rtl'] & {
30
+ left: -3px;
31
+ right: -6px;
32
+ }
33
+ min-width: 15px;
34
+ // flex
35
+ flex: 1;
36
+ box-sizing: border-box;
37
+ }
38
+
39
+ .td-vertical-line {
40
+ position: absolute;
41
+ ::ng-deep :not([dir='rtl']) & {
42
+ left: 20px;
43
+ right: auto;
44
+ }
45
+ ::ng-deep [dir='rtl'] & {
46
+ left: auto;
47
+ right: 20px;
48
+ }
49
+ bottom: -16px;
50
+ top: -16px;
51
+ border-left-width: 1px;
52
+ border-left-style: solid;
53
+ }