@sumaris-net/ngx-components 18.23.57 → 18.23.59

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 (294) hide show
  1. package/doc/changelog.md +3 -0
  2. package/esm2022/src/app/admin/admin-routing.module.mjs +4 -4
  3. package/esm2022/src/app/admin/admin.module.mjs +4 -4
  4. package/esm2022/src/app/admin/users/person.service.mjs +6 -6
  5. package/esm2022/src/app/admin/users/person.validator.mjs +3 -3
  6. package/esm2022/src/app/admin/users/users-select.modal.mjs +3 -3
  7. package/esm2022/src/app/admin/users/users.mjs +3 -3
  8. package/esm2022/src/app/admin/users/users.module.mjs +4 -4
  9. package/esm2022/src/app/core/about/about.modal.mjs +3 -3
  10. package/esm2022/src/app/core/about/about.module.mjs +4 -4
  11. package/esm2022/src/app/core/account/account.module.mjs +4 -4
  12. package/esm2022/src/app/core/account/account.page.mjs +3 -3
  13. package/esm2022/src/app/core/account/new-token.form.mjs +3 -3
  14. package/esm2022/src/app/core/account/new-token.modal.mjs +3 -3
  15. package/esm2022/src/app/core/account/password/change-password.form.mjs +3 -3
  16. package/esm2022/src/app/core/account/password/change-password.module.mjs +4 -4
  17. package/esm2022/src/app/core/account/password/change-password.page.mjs +3 -3
  18. package/esm2022/src/app/core/account/token.table.mjs +3 -3
  19. package/esm2022/src/app/core/auth/auth.form.mjs +3 -3
  20. package/esm2022/src/app/core/auth/auth.modal.mjs +3 -3
  21. package/esm2022/src/app/core/auth/auth.module.mjs +4 -4
  22. package/esm2022/src/app/core/auth/reset-password.modal.mjs +3 -3
  23. package/esm2022/src/app/core/core.module.mjs +4 -4
  24. package/esm2022/src/app/core/core.testing.module.mjs +4 -4
  25. package/esm2022/src/app/core/form/array/testing/form-array-test.module.mjs +4 -4
  26. package/esm2022/src/app/core/form/array/testing/form-array.test.mjs +3 -3
  27. package/esm2022/src/app/core/form/buttons/form-buttons-bar.component.mjs +3 -3
  28. package/esm2022/src/app/core/form/buttons/form-buttons-bar.module.mjs +4 -4
  29. package/esm2022/src/app/core/form/entity/editor.class.mjs +3 -3
  30. package/esm2022/src/app/core/form/entity/entity-editor-modal.class.mjs +3 -3
  31. package/esm2022/src/app/core/form/entity/entity-editor.class.mjs +3 -3
  32. package/esm2022/src/app/core/form/entity/entity-metadata.component.mjs +3 -3
  33. package/esm2022/src/app/core/form/entity/entity.module.mjs +4 -4
  34. package/esm2022/src/app/core/form/entity/tab-editor.class.mjs +3 -3
  35. package/esm2022/src/app/core/form/form-container.class.mjs +3 -3
  36. package/esm2022/src/app/core/form/form.class.mjs +3 -3
  37. package/esm2022/src/app/core/form/form.module.mjs +4 -4
  38. package/esm2022/src/app/core/form/list/list.form.mjs +3 -3
  39. package/esm2022/src/app/core/form/list/list.module.mjs +4 -4
  40. package/esm2022/src/app/core/form/properties/properties-file.service.mjs +3 -3
  41. package/esm2022/src/app/core/form/properties/properties.form.mjs +3 -3
  42. package/esm2022/src/app/core/form/properties/properties.module.mjs +4 -4
  43. package/esm2022/src/app/core/form/properties/properties.table.mjs +6 -6
  44. package/esm2022/src/app/core/form/properties/property.validator.mjs +3 -3
  45. package/esm2022/src/app/core/form/properties/testing/properties-form.test.mjs +3 -3
  46. package/esm2022/src/app/core/form/properties/testing/properties-form.testing.module.mjs +4 -4
  47. package/esm2022/src/app/core/form/text/testing/text-form.testing.mjs +3 -3
  48. package/esm2022/src/app/core/form/text/testing/text-form.testing.module.mjs +4 -4
  49. package/esm2022/src/app/core/form/text/text-form.component.mjs +3 -3
  50. package/esm2022/src/app/core/form/text/text-form.module.mjs +4 -4
  51. package/esm2022/src/app/core/form/text-popover/testing/text-popover.testing.mjs +3 -3
  52. package/esm2022/src/app/core/form/text-popover/testing/text-popover.testing.module.mjs +4 -4
  53. package/esm2022/src/app/core/form/text-popover/text-popover.component.mjs +3 -3
  54. package/esm2022/src/app/core/form/text-popover/text-popover.module.mjs +4 -4
  55. package/esm2022/src/app/core/form/username/username.form.mjs +3 -3
  56. package/esm2022/src/app/core/form/username/username.module.mjs +4 -4
  57. package/esm2022/src/app/core/graphql/graphql.module.mjs +4 -4
  58. package/esm2022/src/app/core/graphql/graphql.service.mjs +3 -3
  59. package/esm2022/src/app/core/home/home.mjs +3 -3
  60. package/esm2022/src/app/core/home/home.module.mjs +4 -4
  61. package/esm2022/src/app/core/icon/icon.component.mjs +3 -3
  62. package/esm2022/src/app/core/icon/icon.module.mjs +4 -4
  63. package/esm2022/src/app/core/install/install-upgrade-card.component.mjs +3 -3
  64. package/esm2022/src/app/core/install/install-upgrade-card.module.mjs +4 -4
  65. package/esm2022/src/app/core/menu/menu.component.mjs +3 -3
  66. package/esm2022/src/app/core/menu/menu.module.mjs +4 -4
  67. package/esm2022/src/app/core/menu/menu.service.mjs +3 -3
  68. package/esm2022/src/app/core/menu/sub-menu-tab.directive.mjs +3 -3
  69. package/esm2022/src/app/core/menu/testing/menu-other.testing.mjs +3 -3
  70. package/esm2022/src/app/core/menu/testing/menu.testing.mjs +3 -3
  71. package/esm2022/src/app/core/menu/testing/menu.testing.module.mjs +4 -4
  72. package/esm2022/src/app/core/offline/update-offline-mode-card.component.mjs +3 -3
  73. package/esm2022/src/app/core/offline/update-offline-mode-card.module.mjs +4 -4
  74. package/esm2022/src/app/core/peer/select-peer.modal.mjs +3 -3
  75. package/esm2022/src/app/core/peer/select-peer.module.mjs +4 -4
  76. package/esm2022/src/app/core/register/register-confirm.page.mjs +3 -3
  77. package/esm2022/src/app/core/register/register.form.mjs +3 -3
  78. package/esm2022/src/app/core/register/register.modal.mjs +3 -3
  79. package/esm2022/src/app/core/register/register.module.mjs +4 -4
  80. package/esm2022/src/app/core/services/account.service.mjs +3 -3
  81. package/esm2022/src/app/core/services/auth-guard.service.mjs +3 -3
  82. package/esm2022/src/app/core/services/base-entity-service.class.mjs +3 -3
  83. package/esm2022/src/app/core/services/base-graphql-service.class.mjs +3 -3
  84. package/esm2022/src/app/core/services/config.service.mjs +3 -3
  85. package/esm2022/src/app/core/services/crypto.service.mjs +3 -3
  86. package/esm2022/src/app/core/services/local-settings.service.mjs +3 -3
  87. package/esm2022/src/app/core/services/network.service.mjs +3 -3
  88. package/esm2022/src/app/core/services/pipes/account.pipes.mjs +8 -8
  89. package/esm2022/src/app/core/services/pipes/department-to-string.pipe.mjs +4 -4
  90. package/esm2022/src/app/core/services/pipes/person-to-string.pipe.mjs +4 -4
  91. package/esm2022/src/app/core/services/pipes/pipes.module.mjs +4 -4
  92. package/esm2022/src/app/core/services/pipes/referential-to-string.pipe.mjs +6 -6
  93. package/esm2022/src/app/core/services/pipes/usage-mode.pipes.mjs +8 -8
  94. package/esm2022/src/app/core/services/platform.service.mjs +3 -3
  95. package/esm2022/src/app/core/services/storage/entities-storage.service.mjs +3 -3
  96. package/esm2022/src/app/core/services/testing/referential.validator.mjs +3 -3
  97. package/esm2022/src/app/core/services/validator/account.validator.mjs +3 -3
  98. package/esm2022/src/app/core/services/validator/base.validator.class.mjs +3 -3
  99. package/esm2022/src/app/core/services/validator/local-settings.validator.mjs +3 -3
  100. package/esm2022/src/app/core/services/validator/user-settings.validator.mjs +3 -3
  101. package/esm2022/src/app/core/services/validator/user-token.validator.mjs +3 -3
  102. package/esm2022/src/app/core/settings/settings.module.mjs +4 -4
  103. package/esm2022/src/app/core/settings/settings.page.mjs +3 -3
  104. package/esm2022/src/app/core/table/async-table.class.mjs +3 -3
  105. package/esm2022/src/app/core/table/column/actions-column.component.mjs +3 -3
  106. package/esm2022/src/app/core/table/column/nav-actions-column.component.mjs +3 -3
  107. package/esm2022/src/app/core/table/column/row-field.component.mjs +3 -3
  108. package/esm2022/src/app/core/table/entities-async-table-datasource.class.mjs +3 -3
  109. package/esm2022/src/app/core/table/entities-table-datasource.class.mjs +3 -3
  110. package/esm2022/src/app/core/table/memory-table.class.mjs +3 -3
  111. package/esm2022/src/app/core/table/table-select-columns.component.mjs +3 -3
  112. package/esm2022/src/app/core/table/table.class.mjs +3 -3
  113. package/esm2022/src/app/core/table/table.module.mjs +4 -4
  114. package/esm2022/src/app/core/table/table.pipes.mjs +9 -9
  115. package/esm2022/src/app/core/table/testing/nested-table.testing.mjs +3 -3
  116. package/esm2022/src/app/core/table/testing/table-validator.service.mjs +3 -3
  117. package/esm2022/src/app/core/table/testing/table.testing.mjs +3 -3
  118. package/esm2022/src/app/core/table/testing/table.testing.module.mjs +4 -4
  119. package/esm2022/src/app/core/table/testing/table2-validator.service.mjs +3 -3
  120. package/esm2022/src/app/core/table/testing/table2.testing.mjs +3 -3
  121. package/esm2022/src/app/shared/audio/audio.mjs +3 -3
  122. package/esm2022/src/app/shared/audio/audio.testing.mjs +3 -3
  123. package/esm2022/src/app/shared/audio/audio.testing.module.mjs +4 -4
  124. package/esm2022/src/app/shared/capacitor/keyboard.mjs +3 -3
  125. package/esm2022/src/app/shared/debug/debug.component.mjs +3 -3
  126. package/esm2022/src/app/shared/debug/debug.module.mjs +4 -4
  127. package/esm2022/src/app/shared/directives/autofocus.directive.mjs +3 -3
  128. package/esm2022/src/app/shared/directives/autoresize.directive.mjs +3 -3
  129. package/esm2022/src/app/shared/directives/autotitle.directive.mjs +3 -3
  130. package/esm2022/src/app/shared/directives/autotooltip.directive.mjs +3 -3
  131. package/esm2022/src/app/shared/directives/cell-selection/cell-identifier.directive.mjs +3 -3
  132. package/esm2022/src/app/shared/directives/cell-selection/cell-selection.directive.mjs +3 -3
  133. package/esm2022/src/app/shared/directives/cell-selection/cell-selection.service.mjs +3 -3
  134. package/esm2022/src/app/shared/directives/directives.module.mjs +4 -4
  135. package/esm2022/src/app/shared/directives/drag-and-drop.directive.mjs +3 -3
  136. package/esm2022/src/app/shared/directives/ng-var.directive.mjs +3 -3
  137. package/esm2022/src/app/shared/directives/resizable/resizable.component.mjs +3 -3
  138. package/esm2022/src/app/shared/directives/resizable/resizable.directive.mjs +3 -3
  139. package/esm2022/src/app/shared/directives/resizable/resizable.module.mjs +4 -4
  140. package/esm2022/src/app/shared/directives/throttled-click.directive.mjs +3 -3
  141. package/esm2022/src/app/shared/file/file.service.mjs +3 -3
  142. package/esm2022/src/app/shared/form/field.component.mjs +3 -3
  143. package/esm2022/src/app/shared/form/loading-spinner.mjs +3 -3
  144. package/esm2022/src/app/shared/gesture/gesture-config.mjs +3 -3
  145. package/esm2022/src/app/shared/guard/component-dirty.guard.mjs +3 -3
  146. package/esm2022/src/app/shared/hotkeys/dialog/hotkeys-dialog.component.mjs +3 -3
  147. package/esm2022/src/app/shared/hotkeys/hotkeys.service.mjs +3 -3
  148. package/esm2022/src/app/shared/hotkeys/shared-hotkeys.module.mjs +4 -4
  149. package/esm2022/src/app/shared/image/gallery/image-gallery.component.mjs +3 -3
  150. package/esm2022/src/app/shared/image/gallery/image-gallery.module.mjs +4 -4
  151. package/esm2022/src/app/shared/image/gallery/testing/gallery.service.testing.mjs +3 -3
  152. package/esm2022/src/app/shared/image/gallery/testing/gallery.testing.mjs +3 -3
  153. package/esm2022/src/app/shared/image/gallery/testing/gallery.testing.module.mjs +4 -4
  154. package/esm2022/src/app/shared/image/image.module.mjs +4 -4
  155. package/esm2022/src/app/shared/image/image.service.mjs +3 -3
  156. package/esm2022/src/app/shared/logging/logging-service.class.mjs +3 -3
  157. package/esm2022/src/app/shared/logging/logging-service.module.mjs +4 -4
  158. package/esm2022/src/app/shared/markdown/markdown.component.mjs +3 -3
  159. package/esm2022/src/app/shared/markdown/markdown.directive.mjs +3 -3
  160. package/esm2022/src/app/shared/markdown/markdown.modal.mjs +3 -3
  161. package/esm2022/src/app/shared/markdown/markdown.module.mjs +4 -4
  162. package/esm2022/src/app/shared/markdown/markdown.service.mjs +3 -3
  163. package/esm2022/src/app/shared/markdown/testing/markdown.test.mjs +3 -3
  164. package/esm2022/src/app/shared/markdown/testing/markdown.testing.module.mjs +4 -4
  165. package/esm2022/src/app/shared/material/autocomplete/material.autocomplete.mjs +3 -3
  166. package/esm2022/src/app/shared/material/autocomplete/material.autocomplete.module.mjs +4 -4
  167. package/esm2022/src/app/shared/material/autocomplete/testing/autocomplete.test.mjs +3 -3
  168. package/esm2022/src/app/shared/material/badge/badge.directive.mjs +3 -3
  169. package/esm2022/src/app/shared/material/badge/badge.module.mjs +4 -4
  170. package/esm2022/src/app/shared/material/badge/badge.test.mjs +3 -3
  171. package/esm2022/src/app/shared/material/boolean/boolean.module.mjs +4 -4
  172. package/esm2022/src/app/shared/material/boolean/material.boolean.mjs +3 -3
  173. package/esm2022/src/app/shared/material/boolean/testing/boolean.test.page.mjs +3 -3
  174. package/esm2022/src/app/shared/material/chips/chips.module.mjs +4 -4
  175. package/esm2022/src/app/shared/material/chips/material.chips.mjs +3 -3
  176. package/esm2022/src/app/shared/material/chips/testing/chips.test.mjs +3 -3
  177. package/esm2022/src/app/shared/material/datetime/datetime.module.mjs +4 -4
  178. package/esm2022/src/app/shared/material/datetime/material.date.mjs +3 -3
  179. package/esm2022/src/app/shared/material/datetime/material.dateshort.mjs +3 -3
  180. package/esm2022/src/app/shared/material/datetime/material.datetime.mjs +3 -3
  181. package/esm2022/src/app/shared/material/datetime/testing/mat-date-time.test.mjs +3 -3
  182. package/esm2022/src/app/shared/material/datetime/testing/mat-date.test.mjs +3 -3
  183. package/esm2022/src/app/shared/material/datetime/testing/mat-dateshort.test.mjs +3 -3
  184. package/esm2022/src/app/shared/material/duration/duration.module.mjs +4 -4
  185. package/esm2022/src/app/shared/material/duration/material.duration.mjs +3 -3
  186. package/esm2022/src/app/shared/material/duration/testing/mat-duration.test.mjs +3 -3
  187. package/esm2022/src/app/shared/material/latlong/material.latlong-input.mjs +3 -3
  188. package/esm2022/src/app/shared/material/latlong/material.latlong.mjs +3 -3
  189. package/esm2022/src/app/shared/material/latlong/material.latlong.module.mjs +4 -4
  190. package/esm2022/src/app/shared/material/latlong/testing/latlong.test.mjs +3 -3
  191. package/esm2022/src/app/shared/material/material.module.mjs +4 -4
  192. package/esm2022/src/app/shared/material/material.testing.module.mjs +4 -4
  193. package/esm2022/src/app/shared/material/paginator/material.paginator-i18n.mjs +3 -3
  194. package/esm2022/src/app/shared/material/stepper/material.stepper-i18n.mjs +3 -3
  195. package/esm2022/src/app/shared/material/swipe/material.swipe.mjs +3 -3
  196. package/esm2022/src/app/shared/material/swipe/swipe.module.mjs +4 -4
  197. package/esm2022/src/app/shared/material/swipe/testing/swipe.test.mjs +3 -3
  198. package/esm2022/src/app/shared/material/test/test-component.mjs +6 -6
  199. package/esm2022/src/app/shared/material/testing/common.test.mjs +3 -3
  200. package/esm2022/src/app/shared/named-filter/named-filter-selector.component.mjs +3 -3
  201. package/esm2022/src/app/shared/named-filter/named-filter.module.mjs +4 -4
  202. package/esm2022/src/app/shared/named-filter/named-filter.service.mjs +3 -3
  203. package/esm2022/src/app/shared/named-filter/testing/named-filter-selector.testing.mjs +3 -3
  204. package/esm2022/src/app/shared/named-filter/testing/named-filter.testing.module.mjs +4 -4
  205. package/esm2022/src/app/shared/pipes/arrays.pipe.mjs +45 -45
  206. package/esm2022/src/app/shared/pipes/badge.pipes.mjs +3 -3
  207. package/esm2022/src/app/shared/pipes/colors.pipe.mjs +3 -3
  208. package/esm2022/src/app/shared/pipes/date-diff-duration.pipe.mjs +4 -4
  209. package/esm2022/src/app/shared/pipes/date-format.pipe.mjs +6 -6
  210. package/esm2022/src/app/shared/pipes/date-from-now.pipe.mjs +4 -4
  211. package/esm2022/src/app/shared/pipes/date-from.pipe.mjs +4 -4
  212. package/esm2022/src/app/shared/pipes/dates.pipe.mjs +3 -3
  213. package/esm2022/src/app/shared/pipes/display-with.pipe.mjs +4 -4
  214. package/esm2022/src/app/shared/pipes/duration.pipe.mjs +4 -4
  215. package/esm2022/src/app/shared/pipes/file-size.pipe.mjs +3 -3
  216. package/esm2022/src/app/shared/pipes/form.pipes.mjs +21 -21
  217. package/esm2022/src/app/shared/pipes/highlight.pipe.mjs +4 -4
  218. package/esm2022/src/app/shared/pipes/html.pipes.mjs +12 -12
  219. package/esm2022/src/app/shared/pipes/latlong-format.pipe.mjs +9 -9
  220. package/esm2022/src/app/shared/pipes/maps.pipe.mjs +12 -12
  221. package/esm2022/src/app/shared/pipes/maskito.pipe.mjs +3 -3
  222. package/esm2022/src/app/shared/pipes/math.pipes.mjs +16 -16
  223. package/esm2022/src/app/shared/pipes/ng-init.pipe.mjs +3 -3
  224. package/esm2022/src/app/shared/pipes/number-format.pipe.mjs +3 -3
  225. package/esm2022/src/app/shared/pipes/observable.pipes.mjs +12 -12
  226. package/esm2022/src/app/shared/pipes/pipes.module.mjs +4 -4
  227. package/esm2022/src/app/shared/pipes/property.pipes.mjs +17 -17
  228. package/esm2022/src/app/shared/pipes/selection.pipes.mjs +21 -21
  229. package/esm2022/src/app/shared/pipes/string.pipes.mjs +39 -39
  230. package/esm2022/src/app/shared/pipes/translate-context.pipe.mjs +8 -8
  231. package/esm2022/src/app/shared/pipes/types.pipes.mjs +15 -15
  232. package/esm2022/src/app/shared/pipes/url.pipes.mjs +3 -3
  233. package/esm2022/src/app/shared/print/print.service.mjs +3 -3
  234. package/esm2022/src/app/shared/rx-state/rx-state.module.mjs +4 -4
  235. package/esm2022/src/app/shared/services/memory-entity-service.class.mjs +3 -3
  236. package/esm2022/src/app/shared/services/progress-bar.service.mjs +3 -3
  237. package/esm2022/src/app/shared/services/startable-observable-service.class.mjs +3 -3
  238. package/esm2022/src/app/shared/services/startable-service.class.mjs +3 -3
  239. package/esm2022/src/app/shared/services/translate-context.service.mjs +3 -3
  240. package/esm2022/src/app/shared/shared-routing.module.mjs +7 -7
  241. package/esm2022/src/app/shared/shared.module.mjs +4 -4
  242. package/esm2022/src/app/shared/shared.testing.module.mjs +4 -4
  243. package/esm2022/src/app/shared/storage/storage-explorer.component.mjs +3 -3
  244. package/esm2022/src/app/shared/storage/storage-explorer.module.mjs +4 -4
  245. package/esm2022/src/app/shared/storage/storage-explorer.testing-routing.module.mjs +4 -4
  246. package/esm2022/src/app/shared/storage/storage-explorer.testing.module.mjs +4 -4
  247. package/esm2022/src/app/shared/storage/storage.service.mjs +3 -3
  248. package/esm2022/src/app/shared/testing/maskito.test.mjs +3 -3
  249. package/esm2022/src/app/shared/testing/observable.test.mjs +3 -3
  250. package/esm2022/src/app/shared/testing/tests.page.mjs +3 -3
  251. package/esm2022/src/app/shared/toast/toast.testing.mjs +3 -3
  252. package/esm2022/src/app/shared/toast/toast.testing.module.mjs +4 -4
  253. package/esm2022/src/app/shared/toolbar/modal-toolbar.mjs +3 -3
  254. package/esm2022/src/app/shared/toolbar/toolbar.mjs +3 -3
  255. package/esm2022/src/app/shared/toolbar/toolbar.module.mjs +4 -4
  256. package/esm2022/src/app/shared/upload-file/testing/upload-file.testing.mjs +3 -3
  257. package/esm2022/src/app/shared/upload-file/testing/upload-file.testing.module.mjs +4 -4
  258. package/esm2022/src/app/shared/upload-file/upload-file-popover.component.mjs +3 -3
  259. package/esm2022/src/app/shared/upload-file/upload-file.component.mjs +3 -3
  260. package/esm2022/src/app/shared/validator/form-error-adapter.class.mjs +11 -5
  261. package/esm2022/src/app/social/feed/feed.component.mjs +3 -3
  262. package/esm2022/src/app/social/feed/feed.directive.mjs +3 -3
  263. package/esm2022/src/app/social/feed/feed.module.mjs +4 -4
  264. package/esm2022/src/app/social/feed/feed.page.mjs +3 -3
  265. package/esm2022/src/app/social/feed/feed.service.mjs +3 -3
  266. package/esm2022/src/app/social/feed/testing/feed.testing.mjs +3 -3
  267. package/esm2022/src/app/social/feed/testing/feed.testing.module.mjs +4 -4
  268. package/esm2022/src/app/social/job/job.module.mjs +4 -4
  269. package/esm2022/src/app/social/job/progression/job-progression.component.mjs +3 -3
  270. package/esm2022/src/app/social/job/progression/job-progression.icon.mjs +3 -3
  271. package/esm2022/src/app/social/job/progression/job-progression.list.mjs +3 -3
  272. package/esm2022/src/app/social/job/progression/job-progression.service.mjs +3 -3
  273. package/esm2022/src/app/social/job/testing/job-progression.testing.mjs +3 -3
  274. package/esm2022/src/app/social/job/testing/job-progression.testing.service.mjs +3 -3
  275. package/esm2022/src/app/social/job/testing/job.testing.module.mjs +4 -4
  276. package/esm2022/src/app/social/message/message.form.mjs +3 -3
  277. package/esm2022/src/app/social/message/message.modal.mjs +3 -3
  278. package/esm2022/src/app/social/message/message.module.mjs +4 -4
  279. package/esm2022/src/app/social/message/message.service.mjs +3 -3
  280. package/esm2022/src/app/social/social.module.mjs +4 -4
  281. package/esm2022/src/app/social/social.testing.module.mjs +4 -4
  282. package/esm2022/src/app/social/user-event/notification/user-event-notification.icon.mjs +3 -3
  283. package/esm2022/src/app/social/user-event/notification/user-event-notification.list.mjs +3 -3
  284. package/esm2022/src/app/social/user-event/notification/user-event-notification.modal.mjs +3 -3
  285. package/esm2022/src/app/social/user-event/testing/user-event.testing.mjs +3 -3
  286. package/esm2022/src/app/social/user-event/testing/user-event.testing.module.mjs +4 -4
  287. package/esm2022/src/app/social/user-event/testing/user-event.testing.service.mjs +3 -3
  288. package/esm2022/src/app/social/user-event/user-event.module.mjs +4 -4
  289. package/esm2022/src/app/social/user-event/user-event.service.mjs +3 -3
  290. package/esm2022/src/environments/environment.loader.mjs +3 -3
  291. package/fesm2022/sumaris-net.ngx-components.mjs +1186 -1180
  292. package/fesm2022/sumaris-net.ngx-components.mjs.map +1 -1
  293. package/package.json +1 -1
  294. package/src/assets/manifest.json +1 -1
package/esm2022/src/app/shared/material/autocomplete/material.autocomplete.module.mjs CHANGED
@@ -19,8 +19,8 @@ import { MatTooltip } from '@angular/material/tooltip';
19
19
  import * as i0 from "@angular/core";
20
20
  import * as i1 from "@ngx-translate/core";
21
21
  export class SharedMatAutocompleteModule {
22
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SharedMatAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
23
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SharedMatAutocompleteModule, declarations: [MatAutocompleteField], imports: [CommonModule,
22
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedMatAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
23
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SharedMatAutocompleteModule, declarations: [MatAutocompleteField], imports: [CommonModule,
24
24
  IonicModule,
25
25
  ScrollingModule,
26
26
  ReactiveFormsModule,
@@ -35,7 +35,7 @@ export class SharedMatAutocompleteModule {
35
35
  MatButtonModule,
36
36
  MatSelectModule,
37
37
  MatRippleModule, i1.TranslateModule, MatTooltip], exports: [MatAutocompleteModule, MatAutocompleteField] });
38
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SharedMatAutocompleteModule, imports: [CommonModule,
38
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedMatAutocompleteModule, imports: [CommonModule,
39
39
  IonicModule,
40
40
  ScrollingModule,
41
41
  ReactiveFormsModule,
@@ -52,7 +52,7 @@ export class SharedMatAutocompleteModule {
52
52
  MatRippleModule,
53
53
  TranslateModule.forChild(), MatAutocompleteModule] });
54
54
  }
55
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SharedMatAutocompleteModule, decorators: [{
55
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedMatAutocompleteModule, decorators: [{
56
56
  type: NgModule,
57
57
  args: [{
58
58
  imports: [
package/esm2022/src/app/shared/material/autocomplete/testing/autocomplete.test.mjs CHANGED
@@ -226,10 +226,10 @@ export class AutocompleteTestPage {
226
226
  stringify(value) {
227
227
  return JSON.stringify(value);
228
228
  }
229
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AutocompleteTestPage, deps: [{ token: i1.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
230
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AutocompleteTestPage, selector: "app-autocomplete-test", viewQueries: [{ propertyName: "farEntityField", first: true, predicate: ["farEntityField"], descendants: true }, { propertyName: "ionModal", first: true, predicate: IonModal, descendants: true }], ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Autocomplete field test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content>\n <!-- Tab nav - mobile/desktop mode -->\n <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n <mat-label>Mobile</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n <mat-label>Desktop</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n <mat-label>Memory leak debug</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n <mat-label>Temporary</mat-label>\n </a>\n </nav>\n\n <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n @if (mode === 'temp') {\n <ion-grid>\n <ion-row>\n <!-- Autocomplete medium panel class - see issue sumaris-app#943\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Autocomplete with class 'min-width-medium'</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\n class=\"min-width-medium\"\n </pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n placeholder=\"With panel class\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n panelClass=\"min-width-medium\"\n [mobile]=\"false\"\n [logPrefix]=\"'[combo-temp-min-width-medium]'\"\n [showAllOnFocus]=\"true\"\n [debug]=\"true\"\n >\n <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n <mat-icon>filter_list_alt</mat-icon>\n </button>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>-->\n\n <!-- Autocomplete with button\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Autocomplete with button</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre style=\"white-space: normal !important\">\n value: {{ stringify(form.controls.withButton.value) }}</pre\n >\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"withButton\"\n placeholder=\"With button\"\n [config]=\"autocompleteFields.get('entity-with-button')\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-temp-with-button]'\"\n [required]=\"true\"\n [clearable]=\"true\"\n [clearInvalidValueOnBlur]=\"true\"\n [reloadItemsOnFocus]=\"true\"\n [showAllOnFocus]=\"true\"\n [selectInputContentOnFocus]=\"true\"\n [debug]=\"true\"\n >\n <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n <mat-icon>filter_list_alt</mat-icon>\n </button>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col> -->\n\n <!--<ion-col size=\"3\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">panelClass + suggestLengthThreshold</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\nsuggestLengthThreshold: '3'\npanelClass=\"mat-select-panel-fit-content\"\n </pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"emptyEntity\"\n [config]=\"autocompleteFields.get('entity-items-filter')\"\n [placeholder]=\"'Entity'\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [suggestLengthThreshold]=\"3\"\n [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n [debug]=\"true\"\n [showAllOnFocus]=\"true\"\n panelClass=\"mat-select-panel-fit-content\"\n >\n <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>-->\n\n <!-- showAllOnFocus + required + NO searchbar\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">showAllOnFocus + required + NO searchbar</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n #field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-suggestFn')\"\n [placeholder]=\"'Entity'\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n [debug]=\"true\"\n [mobile]=\"true\"\n [required]=\"true\"\n placeholder=\"No search bar\"\n showSearchBar=\"true\"\n [showAllOnFocus]=\"false\"\n >\n <ion-spinner matSuffix *ngIf=\"field.loading\"></ion-spinner>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>-->\n </ion-row>\n </ion-grid>\n }\n\n @if (mode === 'memory') {\n <ion-grid>\n <!-- debugging memory leak -->\n <ion-row>\n <ion-col>\n <ion-text><h4>Debug memory leak</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"2\">\n <mat-form-field floatLabel=\"always\">\n <mat-label>Items type</mat-label>\n <input matInput type=\"text\" hidden />\n <mat-select\n (selectionChange)=\"memoryAutocompleteFieldName = $event.value\"\n [value]=\"memoryAutocompleteFieldName\"\n >\n <mat-option value=\"entity-$items\">Observable</mat-option>\n <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n <ion-col size=\"1\" class=\"ion-no-padding\">\n <mat-form-field floatLabel=\"always\">\n <mat-label>Mobile ?</mat-label>\n <input matInput type=\"text\" hidden />\n <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\"></mat-checkbox>\n </mat-form-field>\n </ion-col>\n <ion-col size=\"2\">\n @if (!memoryTimer) {\n <ion-button (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n }\n @if (memoryTimer) {\n <ion-button (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n }\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n @if (!memoryHide && memoryAutocompleteFieldName) {\n <span>OK {{ memoryHide }}</span>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n [mobile]=\"memoryMobile\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-memory-leak]'\"\n ></mat-autocomplete-field>\n }\n </ion-col>\n </ion-row>\n </ion-grid>\n }\n\n <!-- Mobile mode -->\n @if (mode === 'mobile') {\n <ion-grid>\n <ion-row>\n <!-- using suggestFn (and favorites) -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">suggestFn</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[], favoriteItems: any[]</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-suggestFn')\"\n [favoriteItems]=\"_favoriteItems\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-1]'\"\n [required]=\"true\"\n placeholder=\"Suggest field\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Far items (not in the first page) -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Entity far in the list (not in first page)</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre style=\"white-space: normal !important\">\n value: {{ stringify(form.controls.farEntity.value) }}</pre\n >\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"farEntity\"\n #farEntityField\n [config]=\"autocompleteFields.get('entity-far')\"\n [favoriteItems]=\"_favoriteFarItems\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-far]'\"\n [debug]=\"true\"\n [required]=\"true\"\n [clearable]=\"true\"\n placeholder=\"Far item (in the list)\"\n >\n <ion-icon matPrefix name=\"contract\"></ion-icon>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Items is an Observable</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [placeholder]=\"'Item from observable'\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-observable]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">showAllOnFocus + required + NO searchbar</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n showSearchBar=\"false\"\n showAllOnFocus=\"true\"\n [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n [required]=\"true\"\n placeholder=\"No search bar\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Control value if missing in items</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"missingEntity\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [clearable]=\"true\"\n [logPrefix]=\"'[combo-mobile-2]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\n suggest: (value, filter) => LoadResult&lt;any&gt;\n suggestLengthThreshold: '3'</pre\n >\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"emptyEntity\"\n [config]=\"autocompleteFields.get('entity-items-filter')\"\n [placeholder]=\"'Entity'\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [suggestLengthThreshold]=\"3\"\n [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n [required]=\"true\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">Multiple value</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>multiple: true</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entities\"\n [config]=\"autocompleteFields.get('entities-items-filter')\"\n [placeholder]=\"'Multiple'\"\n [mobile]=\"true\"\n [multiple]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-multiple]'\"\n [debug]=\"true\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Disabled control</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"disableEntity\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-2]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">In modal</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <ion-button (click)=\"ionModal.present()\">Open modal</ion-button>\n <ion-modal>\n <ng-template>\n <ion-header>\n <ion-toolbar>\n <ion-title>Modal with embed auto complete field</ion-title>\n <ion-buttons slot=\"end\">\n <ion-button (click)=\"ionModal.dismiss()\">Close</ion-button>\n </ion-buttons>\n </ion-toolbar>\n </ion-header>\n <ion-content class=\"ion-padding\">\n <div class=\"form-container\">\n <ion-card>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [tabindex]=\"10000\"\n [config]=\"autocompleteFields.get('entity-suggestFn')\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-modal]'\"\n [required]=\"true\"\n placeholder=\"Suggest field\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n <ion-card>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [tabindex]=\"10000\"\n [config]=\"autocompleteFields.get('entity-items-filter')\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [suggestLengthThreshold]=\"3\"\n [logPrefix]=\"'[combo-mobile-modal-suggestLengthThreshold]'\"\n [required]=\"true\"\n placeholder=\"Suggest field\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </div>\n </ion-content>\n </ng-template>\n </ion-modal>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"9\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Change filter</ion-label>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre></pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <ion-grid class=\"ion-no-padding\">\n <ion-row>\n <ion-col>\n <ion-button (click)=\"updateFilter(filterChangeField, 'entity-items-filter')\">\n Filter on: {{ autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}\n </ion-button>\n </ion-col>\n <ion-col>\n <mat-autocomplete-field\n formControlName=\"entity\"\n #filterChangeField\n [config]=\"autocompleteFields.get('entity-items-filter')\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-filter]'\"\n ></mat-autocomplete-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col size=\"3\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Large combo</ion-label>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\nmobile: true\npanelWidth=\"500px\"</pre\n >\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n [mobile]=\"true\"\n [panelWidth]=\"'500px'\"\n [matAutocompletePosition]=\"'auto'\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-large]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col size=\"3\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Fit content combo</ion-label>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\nmobile: true\npanelClass=\"mat-select-panel-fit-content\"</pre\n >\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n [mobile]=\"true\"\n [matAutocompletePosition]=\"'auto'\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-panelClass]'\"\n panelClass=\"mat-select-panel-fit-content\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">Readonly toggle</ion-text>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox\n (change)=\"readonlyField.readonly = $event.checked\"\n [checked]=\"readonlyField.readonly\"\n >\n Readonly ?\n </mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #showIcons [checked]=\"false\">Icons ?</mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #showHint [checked]=\"false\">Hint ?</mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-autocomplete-field\n #readonlyField\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-items')\"\n [placeholder]=\"'Entity'\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-readonly]'\"\n [readonly]=\"true\"\n [clearable]=\"!readonlyField.readonly\"\n >\n @if (showIcons.checked) {\n <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n }\n @if (showIcons.checked) {\n <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n }\n @if (showHint.checked) {\n <mat-hint matHint>Some hint</mat-hint>\n }\n </mat-autocomplete-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Full size panel</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>panelClass: 'full-size'</pre>\n or\n <pre>panelWidth: '100vw'</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n [mobile]=\"true\"\n panelClass=\"full-size\"\n panelWidth=\"100vw\"\n [matAutocompletePosition]=\"'above'\"\n [logPrefix]=\"'[combo-mobile-full-size]'\"\n [debug]=\"true\"\n [showAllOnFocus]=\"true\"\n [showPanelOnFocus]=\"true\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Autocomplete with button</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre style=\"white-space: normal !important\">\n value: {{ stringify(form.controls.withButton.value) }}</pre\n >\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"withButton\"\n [config]=\"autocompleteFields.get('entity-with-button')\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-with-button]'\"\n [debug]=\"true\"\n [required]=\"true\"\n [clearable]=\"true\"\n placeholder=\"With button\"\n >\n <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n <mat-icon>filter_list_alt</mat-icon>\n </button>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n }\n\n <!-- Desktop mode -->\n @if (mode === 'desktop') {\n <ion-grid>\n <ion-row>\n <!-- Using suggestFn (and favorites) -->\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">suggestFn</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\nshowAllOnFocus=true, suggestFn: (searchText, filter) => LoadResult&lt;any&gt;, favoriteItems: any[]\n </pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-suggestFn')\"\n [favoriteItems]=\"_favoriteItems\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [clearable]=\"true\"\n [logPrefix]=\"'[combo-desktop-suggest]'\"\n placeholder=\"Suggest field\"\n [debug]=\"true\"\n >\n <ion-icon matPrefix name=\"contract\"></ion-icon>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Using service -->\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">Service</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>Service with suggest: (searchText, filter) => LoadResult&lt;any&gt;</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-items-filter')\"\n [placeholder]=\"'Filtered field'\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [clearable]=\"true\"\n [logPrefix]=\"'[combo-desktop-service]'\"\n [debug]=\"true\"\n >\n <ion-icon matPrefix name=\"contract\"></ion-icon>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\n suggest: (value, filter) => LoadResult&lt;any&gt;\n suggestLengthThreshold: '3'</pre\n >\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"emptyEntity\"\n [config]=\"autocompleteFields.get('entity-items-filter')\"\n [placeholder]=\"'Filtered field'\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [suggestLengthThreshold]=\"3\"\n [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">Items is an array</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>items: [], value: {{ stringify(form.controls.entity.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [placeholder]=\"'Item from array'\"\n [config]=\"autocompleteFields.get('entity-items')\"\n [logPrefix]=\"'[combo-desktop-array-1]'\"\n [equals]=\"equals\"\n [mobile]=\"false\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">Items is an Observable</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>items: Observable&lt;any[]&gt;</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [placeholder]=\"'Item from observable'\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [logPrefix]=\"'[combo-desktop-2]'\"\n [equals]=\"equals\"\n [mobile]=\"false\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">Multiple value</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>multiple: true</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entities\"\n [config]=\"autocompleteFields.get('entities-items-filter')\"\n [placeholder]=\"'Multiple'\"\n [mobile]=\"false\"\n [multiple]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-multiple]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Control value if missing in items</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>items: Observable&lt;any[]&gt;</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"missingEntity\"\n [placeholder]=\"'Missing item'\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-missing]'\"\n [mobile]=\"false\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Full size panel</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>panelClass: 'full-size'</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [placeholder]=\"'Full size panel'\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n [mobile]=\"false\"\n [panelClass]=\"'full-size'\"\n [matAutocompletePosition]=\"'above'\"\n [logPrefix]=\"'[combo-desktop-full-size]'\"\n [debug]=\"true\"\n [showAllOnFocus]=\"true\"\n [showPanelOnFocus]=\"true\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Disabled control</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"disableEntity\"\n [placeholder]=\"'Disable field'\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-disable]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Readonly control</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [placeholder]=\"'Readonly field'\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-readonly]'\"\n [readonly]=\"true\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"9\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Full size combo</ion-label>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>panelClass: 'full-size'</pre>\n or\n <pre>panelWidth: '100vw'</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [placeholder]=\"'Full size panel'\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n [mobile]=\"false\"\n panelClass=\"full-size\"\n panelWidth=\"100vw\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-full-size]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col size=\"3\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Large combo</ion-label>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>panelWidth: string</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [placeholder]=\"'Fixed panel width (500px)'\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n [mobile]=\"false\"\n panelWidth=\"500px\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-large]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col size=\"3\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Fit content</ion-label>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>panelClass=\"mat-select-panel-fit-content\"</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [placeholder]=\"'Fit content'\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-panelClass]'\"\n panelClass=\"mat-select-panel-fit-content\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">Readonly toggle</ion-text>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox\n (change)=\"readonlyField.readonly = $event.checked\"\n [checked]=\"readonlyField.readonly\"\n >\n Readonly ?\n </mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #showIcons2 [checked]=\"false\">Icons ?</mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #showHint2 [checked]=\"false\">Hint ?</mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-autocomplete-field\n #readonlyField\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-items-filter')\"\n [placeholder]=\"'Filtered field'\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-readonly]'\"\n [readonly]=\"true\"\n [clearable]=\"!readonlyField.readonly\"\n >\n @if (showIcons2.checked) {\n <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n }\n @if (showIcons2.checked) {\n <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n }\n @if (showHint2.checked) {\n <mat-hint>Some hint</mat-hint>\n }\n </mat-autocomplete-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n }\n </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal" }, { kind: "component", type: i2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i10.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i10.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i11.MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "arrowUp", "arrowDown", "enter", "selectionChange", "openedChange", "toggleFavorite"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
229
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteTestPage, deps: [{ token: i1.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
230
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompleteTestPage, selector: "app-autocomplete-test", viewQueries: [{ propertyName: "farEntityField", first: true, predicate: ["farEntityField"], descendants: true }, { propertyName: "ionModal", first: true, predicate: IonModal, descendants: true }], ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Autocomplete field test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content>\n <!-- Tab nav - mobile/desktop mode -->\n <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n <mat-label>Mobile</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n <mat-label>Desktop</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n <mat-label>Memory leak debug</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n <mat-label>Temporary</mat-label>\n </a>\n </nav>\n\n <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n @if (mode === 'temp') {\n <ion-grid>\n <ion-row>\n <!-- Autocomplete medium panel class - see issue sumaris-app#943\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Autocomplete with class 'min-width-medium'</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\n class=\"min-width-medium\"\n </pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n placeholder=\"With panel class\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n panelClass=\"min-width-medium\"\n [mobile]=\"false\"\n [logPrefix]=\"'[combo-temp-min-width-medium]'\"\n [showAllOnFocus]=\"true\"\n [debug]=\"true\"\n >\n <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n <mat-icon>filter_list_alt</mat-icon>\n </button>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>-->\n\n <!-- Autocomplete with button\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Autocomplete with button</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre style=\"white-space: normal !important\">\n value: {{ stringify(form.controls.withButton.value) }}</pre\n >\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"withButton\"\n placeholder=\"With button\"\n [config]=\"autocompleteFields.get('entity-with-button')\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-temp-with-button]'\"\n [required]=\"true\"\n [clearable]=\"true\"\n [clearInvalidValueOnBlur]=\"true\"\n [reloadItemsOnFocus]=\"true\"\n [showAllOnFocus]=\"true\"\n [selectInputContentOnFocus]=\"true\"\n [debug]=\"true\"\n >\n <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n <mat-icon>filter_list_alt</mat-icon>\n </button>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col> -->\n\n <!--<ion-col size=\"3\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">panelClass + suggestLengthThreshold</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\nsuggestLengthThreshold: '3'\npanelClass=\"mat-select-panel-fit-content\"\n </pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"emptyEntity\"\n [config]=\"autocompleteFields.get('entity-items-filter')\"\n [placeholder]=\"'Entity'\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [suggestLengthThreshold]=\"3\"\n [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n [debug]=\"true\"\n [showAllOnFocus]=\"true\"\n panelClass=\"mat-select-panel-fit-content\"\n >\n <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>-->\n\n <!-- showAllOnFocus + required + NO searchbar\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">showAllOnFocus + required + NO searchbar</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n #field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-suggestFn')\"\n [placeholder]=\"'Entity'\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n [debug]=\"true\"\n [mobile]=\"true\"\n [required]=\"true\"\n placeholder=\"No search bar\"\n showSearchBar=\"true\"\n [showAllOnFocus]=\"false\"\n >\n <ion-spinner matSuffix *ngIf=\"field.loading\"></ion-spinner>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>-->\n </ion-row>\n </ion-grid>\n }\n\n @if (mode === 'memory') {\n <ion-grid>\n <!-- debugging memory leak -->\n <ion-row>\n <ion-col>\n <ion-text><h4>Debug memory leak</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"2\">\n <mat-form-field floatLabel=\"always\">\n <mat-label>Items type</mat-label>\n <input matInput type=\"text\" hidden />\n <mat-select\n (selectionChange)=\"memoryAutocompleteFieldName = $event.value\"\n [value]=\"memoryAutocompleteFieldName\"\n >\n <mat-option value=\"entity-$items\">Observable</mat-option>\n <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n <ion-col size=\"1\" class=\"ion-no-padding\">\n <mat-form-field floatLabel=\"always\">\n <mat-label>Mobile ?</mat-label>\n <input matInput type=\"text\" hidden />\n <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\"></mat-checkbox>\n </mat-form-field>\n </ion-col>\n <ion-col size=\"2\">\n @if (!memoryTimer) {\n <ion-button (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n }\n @if (memoryTimer) {\n <ion-button (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n }\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n @if (!memoryHide && memoryAutocompleteFieldName) {\n <span>OK {{ memoryHide }}</span>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n [mobile]=\"memoryMobile\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-memory-leak]'\"\n ></mat-autocomplete-field>\n }\n </ion-col>\n </ion-row>\n </ion-grid>\n }\n\n <!-- Mobile mode -->\n @if (mode === 'mobile') {\n <ion-grid>\n <ion-row>\n <!-- using suggestFn (and favorites) -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">suggestFn</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[], favoriteItems: any[]</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-suggestFn')\"\n [favoriteItems]=\"_favoriteItems\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-1]'\"\n [required]=\"true\"\n placeholder=\"Suggest field\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Far items (not in the first page) -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Entity far in the list (not in first page)</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre style=\"white-space: normal !important\">\n value: {{ stringify(form.controls.farEntity.value) }}</pre\n >\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"farEntity\"\n #farEntityField\n [config]=\"autocompleteFields.get('entity-far')\"\n [favoriteItems]=\"_favoriteFarItems\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-far]'\"\n [debug]=\"true\"\n [required]=\"true\"\n [clearable]=\"true\"\n placeholder=\"Far item (in the list)\"\n >\n <ion-icon matPrefix name=\"contract\"></ion-icon>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Items is an Observable</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [placeholder]=\"'Item from observable'\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-observable]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">showAllOnFocus + required + NO searchbar</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n showSearchBar=\"false\"\n showAllOnFocus=\"true\"\n [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n [required]=\"true\"\n placeholder=\"No search bar\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Control value if missing in items</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"missingEntity\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [clearable]=\"true\"\n [logPrefix]=\"'[combo-mobile-2]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\n suggest: (value, filter) => LoadResult&lt;any&gt;\n suggestLengthThreshold: '3'</pre\n >\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"emptyEntity\"\n [config]=\"autocompleteFields.get('entity-items-filter')\"\n [placeholder]=\"'Entity'\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [suggestLengthThreshold]=\"3\"\n [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n [required]=\"true\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">Multiple value</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>multiple: true</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entities\"\n [config]=\"autocompleteFields.get('entities-items-filter')\"\n [placeholder]=\"'Multiple'\"\n [mobile]=\"true\"\n [multiple]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-multiple]'\"\n [debug]=\"true\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Disabled control</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"disableEntity\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-2]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">In modal</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <ion-button (click)=\"ionModal.present()\">Open modal</ion-button>\n <ion-modal>\n <ng-template>\n <ion-header>\n <ion-toolbar>\n <ion-title>Modal with embed auto complete field</ion-title>\n <ion-buttons slot=\"end\">\n <ion-button (click)=\"ionModal.dismiss()\">Close</ion-button>\n </ion-buttons>\n </ion-toolbar>\n </ion-header>\n <ion-content class=\"ion-padding\">\n <div class=\"form-container\">\n <ion-card>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [tabindex]=\"10000\"\n [config]=\"autocompleteFields.get('entity-suggestFn')\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-modal]'\"\n [required]=\"true\"\n placeholder=\"Suggest field\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n <ion-card>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [tabindex]=\"10000\"\n [config]=\"autocompleteFields.get('entity-items-filter')\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [suggestLengthThreshold]=\"3\"\n [logPrefix]=\"'[combo-mobile-modal-suggestLengthThreshold]'\"\n [required]=\"true\"\n placeholder=\"Suggest field\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </div>\n </ion-content>\n </ng-template>\n </ion-modal>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"9\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Change filter</ion-label>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre></pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <ion-grid class=\"ion-no-padding\">\n <ion-row>\n <ion-col>\n <ion-button (click)=\"updateFilter(filterChangeField, 'entity-items-filter')\">\n Filter on: {{ autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}\n </ion-button>\n </ion-col>\n <ion-col>\n <mat-autocomplete-field\n formControlName=\"entity\"\n #filterChangeField\n [config]=\"autocompleteFields.get('entity-items-filter')\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-filter]'\"\n ></mat-autocomplete-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col size=\"3\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Large combo</ion-label>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\nmobile: true\npanelWidth=\"500px\"</pre\n >\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n [mobile]=\"true\"\n [panelWidth]=\"'500px'\"\n [matAutocompletePosition]=\"'auto'\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-large]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col size=\"3\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Fit content combo</ion-label>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\nmobile: true\npanelClass=\"mat-select-panel-fit-content\"</pre\n >\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n [mobile]=\"true\"\n [matAutocompletePosition]=\"'auto'\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-panelClass]'\"\n panelClass=\"mat-select-panel-fit-content\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">Readonly toggle</ion-text>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox\n (change)=\"readonlyField.readonly = $event.checked\"\n [checked]=\"readonlyField.readonly\"\n >\n Readonly ?\n </mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #showIcons [checked]=\"false\">Icons ?</mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #showHint [checked]=\"false\">Hint ?</mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-autocomplete-field\n #readonlyField\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-items')\"\n [placeholder]=\"'Entity'\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-readonly]'\"\n [readonly]=\"true\"\n [clearable]=\"!readonlyField.readonly\"\n >\n @if (showIcons.checked) {\n <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n }\n @if (showIcons.checked) {\n <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n }\n @if (showHint.checked) {\n <mat-hint matHint>Some hint</mat-hint>\n }\n </mat-autocomplete-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Full size panel</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>panelClass: 'full-size'</pre>\n or\n <pre>panelWidth: '100vw'</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n [mobile]=\"true\"\n panelClass=\"full-size\"\n panelWidth=\"100vw\"\n [matAutocompletePosition]=\"'above'\"\n [logPrefix]=\"'[combo-mobile-full-size]'\"\n [debug]=\"true\"\n [showAllOnFocus]=\"true\"\n [showPanelOnFocus]=\"true\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Autocomplete with button</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre style=\"white-space: normal !important\">\n value: {{ stringify(form.controls.withButton.value) }}</pre\n >\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"withButton\"\n [config]=\"autocompleteFields.get('entity-with-button')\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-with-button]'\"\n [debug]=\"true\"\n [required]=\"true\"\n [clearable]=\"true\"\n placeholder=\"With button\"\n >\n <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n <mat-icon>filter_list_alt</mat-icon>\n </button>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n }\n\n <!-- Desktop mode -->\n @if (mode === 'desktop') {\n <ion-grid>\n <ion-row>\n <!-- Using suggestFn (and favorites) -->\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">suggestFn</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\nshowAllOnFocus=true, suggestFn: (searchText, filter) => LoadResult&lt;any&gt;, favoriteItems: any[]\n </pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-suggestFn')\"\n [favoriteItems]=\"_favoriteItems\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [clearable]=\"true\"\n [logPrefix]=\"'[combo-desktop-suggest]'\"\n placeholder=\"Suggest field\"\n [debug]=\"true\"\n >\n <ion-icon matPrefix name=\"contract\"></ion-icon>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Using service -->\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">Service</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>Service with suggest: (searchText, filter) => LoadResult&lt;any&gt;</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-items-filter')\"\n [placeholder]=\"'Filtered field'\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [clearable]=\"true\"\n [logPrefix]=\"'[combo-desktop-service]'\"\n [debug]=\"true\"\n >\n <ion-icon matPrefix name=\"contract\"></ion-icon>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\n suggest: (value, filter) => LoadResult&lt;any&gt;\n suggestLengthThreshold: '3'</pre\n >\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"emptyEntity\"\n [config]=\"autocompleteFields.get('entity-items-filter')\"\n [placeholder]=\"'Filtered field'\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [suggestLengthThreshold]=\"3\"\n [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">Items is an array</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>items: [], value: {{ stringify(form.controls.entity.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [placeholder]=\"'Item from array'\"\n [config]=\"autocompleteFields.get('entity-items')\"\n [logPrefix]=\"'[combo-desktop-array-1]'\"\n [equals]=\"equals\"\n [mobile]=\"false\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">Items is an Observable</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>items: Observable&lt;any[]&gt;</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [placeholder]=\"'Item from observable'\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [logPrefix]=\"'[combo-desktop-2]'\"\n [equals]=\"equals\"\n [mobile]=\"false\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">Multiple value</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>multiple: true</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entities\"\n [config]=\"autocompleteFields.get('entities-items-filter')\"\n [placeholder]=\"'Multiple'\"\n [mobile]=\"false\"\n [multiple]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-multiple]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Control value if missing in items</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>items: Observable&lt;any[]&gt;</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"missingEntity\"\n [placeholder]=\"'Missing item'\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-missing]'\"\n [mobile]=\"false\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Full size panel</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>panelClass: 'full-size'</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [placeholder]=\"'Full size panel'\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n [mobile]=\"false\"\n [panelClass]=\"'full-size'\"\n [matAutocompletePosition]=\"'above'\"\n [logPrefix]=\"'[combo-desktop-full-size]'\"\n [debug]=\"true\"\n [showAllOnFocus]=\"true\"\n [showPanelOnFocus]=\"true\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Disabled control</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"disableEntity\"\n [placeholder]=\"'Disable field'\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-disable]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Readonly control</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [placeholder]=\"'Readonly field'\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-readonly]'\"\n [readonly]=\"true\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"9\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Full size combo</ion-label>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>panelClass: 'full-size'</pre>\n or\n <pre>panelWidth: '100vw'</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [placeholder]=\"'Full size panel'\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n [mobile]=\"false\"\n panelClass=\"full-size\"\n panelWidth=\"100vw\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-full-size]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col size=\"3\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Large combo</ion-label>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>panelWidth: string</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [placeholder]=\"'Fixed panel width (500px)'\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n [mobile]=\"false\"\n panelWidth=\"500px\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-large]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col size=\"3\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Fit content</ion-label>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>panelClass=\"mat-select-panel-fit-content\"</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [placeholder]=\"'Fit content'\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-panelClass]'\"\n panelClass=\"mat-select-panel-fit-content\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">Readonly toggle</ion-text>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox\n (change)=\"readonlyField.readonly = $event.checked\"\n [checked]=\"readonlyField.readonly\"\n >\n Readonly ?\n </mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #showIcons2 [checked]=\"false\">Icons ?</mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #showHint2 [checked]=\"false\">Hint ?</mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-autocomplete-field\n #readonlyField\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-items-filter')\"\n [placeholder]=\"'Filtered field'\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-readonly]'\"\n [readonly]=\"true\"\n [clearable]=\"!readonlyField.readonly\"\n >\n @if (showIcons2.checked) {\n <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n }\n @if (showIcons2.checked) {\n <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n }\n @if (showHint2.checked) {\n <mat-hint>Some hint</mat-hint>\n }\n </mat-autocomplete-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n }\n </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal" }, { kind: "component", type: i2.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i10.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i10.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i11.MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "arrowUp", "arrowDown", "enter", "selectionChange", "openedChange", "toggleFavorite"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
231
231
  }
232
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AutocompleteTestPage, decorators: [{
232
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteTestPage, decorators: [{
233
233
  type: Component,
234
234
  args: [{ selector: 'app-autocomplete-test', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n <ion-buttons slot=\"start\">\n <ion-back-button></ion-back-button>\n </ion-buttons>\n\n <ion-title>Autocomplete field test page</ion-title>\n </ion-toolbar>\n</ion-header>\n\n<ion-content>\n <!-- Tab nav - mobile/desktop mode -->\n <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n <mat-label>Mobile</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n <mat-label>Desktop</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n <mat-label>Memory leak debug</mat-label>\n </a>\n <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n <mat-label>Temporary</mat-label>\n </a>\n </nav>\n\n <form #tabPanel class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n @if (mode === 'temp') {\n <ion-grid>\n <ion-row>\n <!-- Autocomplete medium panel class - see issue sumaris-app#943\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Autocomplete with class 'min-width-medium'</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\n class=\"min-width-medium\"\n </pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n placeholder=\"With panel class\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n panelClass=\"min-width-medium\"\n [mobile]=\"false\"\n [logPrefix]=\"'[combo-temp-min-width-medium]'\"\n [showAllOnFocus]=\"true\"\n [debug]=\"true\"\n >\n <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n <mat-icon>filter_list_alt</mat-icon>\n </button>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>-->\n\n <!-- Autocomplete with button\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Autocomplete with button</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre style=\"white-space: normal !important\">\n value: {{ stringify(form.controls.withButton.value) }}</pre\n >\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"withButton\"\n placeholder=\"With button\"\n [config]=\"autocompleteFields.get('entity-with-button')\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-temp-with-button]'\"\n [required]=\"true\"\n [clearable]=\"true\"\n [clearInvalidValueOnBlur]=\"true\"\n [reloadItemsOnFocus]=\"true\"\n [showAllOnFocus]=\"true\"\n [selectInputContentOnFocus]=\"true\"\n [debug]=\"true\"\n >\n <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n <mat-icon>filter_list_alt</mat-icon>\n </button>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col> -->\n\n <!--<ion-col size=\"3\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">panelClass + suggestLengthThreshold</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\nsuggestLengthThreshold: '3'\npanelClass=\"mat-select-panel-fit-content\"\n </pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"emptyEntity\"\n [config]=\"autocompleteFields.get('entity-items-filter')\"\n [placeholder]=\"'Entity'\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [suggestLengthThreshold]=\"3\"\n [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n [debug]=\"true\"\n [showAllOnFocus]=\"true\"\n panelClass=\"mat-select-panel-fit-content\"\n >\n <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>-->\n\n <!-- showAllOnFocus + required + NO searchbar\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">showAllOnFocus + required + NO searchbar</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n #field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-suggestFn')\"\n [placeholder]=\"'Entity'\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n [debug]=\"true\"\n [mobile]=\"true\"\n [required]=\"true\"\n placeholder=\"No search bar\"\n showSearchBar=\"true\"\n [showAllOnFocus]=\"false\"\n >\n <ion-spinner matSuffix *ngIf=\"field.loading\"></ion-spinner>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>-->\n </ion-row>\n </ion-grid>\n }\n\n @if (mode === 'memory') {\n <ion-grid>\n <!-- debugging memory leak -->\n <ion-row>\n <ion-col>\n <ion-text><h4>Debug memory leak</h4></ion-text>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"2\">\n <mat-form-field floatLabel=\"always\">\n <mat-label>Items type</mat-label>\n <input matInput type=\"text\" hidden />\n <mat-select\n (selectionChange)=\"memoryAutocompleteFieldName = $event.value\"\n [value]=\"memoryAutocompleteFieldName\"\n >\n <mat-option value=\"entity-$items\">Observable</mat-option>\n <mat-option value=\"entity-suggestFn\">Suggest function</mat-option>\n </mat-select>\n </mat-form-field>\n </ion-col>\n <ion-col size=\"1\" class=\"ion-no-padding\">\n <mat-form-field floatLabel=\"always\">\n <mat-label>Mobile ?</mat-label>\n <input matInput type=\"text\" hidden />\n <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\"></mat-checkbox>\n </mat-form-field>\n </ion-col>\n <ion-col size=\"2\">\n @if (!memoryTimer) {\n <ion-button (click)=\"startMemoryTimer()\" color=\"tertiary\">Start</ion-button>\n }\n @if (memoryTimer) {\n <ion-button (click)=\"stopMemoryTimer()\" color=\"tertiary\">Stop</ion-button>\n }\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n @if (!memoryHide && memoryAutocompleteFieldName) {\n <span>OK {{ memoryHide }}</span>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get(memoryAutocompleteFieldName)\"\n [mobile]=\"memoryMobile\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-memory-leak]'\"\n ></mat-autocomplete-field>\n }\n </ion-col>\n </ion-row>\n </ion-grid>\n }\n\n <!-- Mobile mode -->\n @if (mode === 'mobile') {\n <ion-grid>\n <ion-row>\n <!-- using suggestFn (and favorites) -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">suggestFn</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>mobile: true, suggestFn: (searchText, filter) =&gt; any[], favoriteItems: any[]</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-suggestFn')\"\n [favoriteItems]=\"_favoriteItems\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-1]'\"\n [required]=\"true\"\n placeholder=\"Suggest field\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Far items (not in the first page) -->\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Entity far in the list (not in first page)</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre style=\"white-space: normal !important\">\n value: {{ stringify(form.controls.farEntity.value) }}</pre\n >\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"farEntity\"\n #farEntityField\n [config]=\"autocompleteFields.get('entity-far')\"\n [favoriteItems]=\"_favoriteFarItems\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-far]'\"\n [debug]=\"true\"\n [required]=\"true\"\n [clearable]=\"true\"\n placeholder=\"Far item (in the list)\"\n >\n <ion-icon matPrefix name=\"contract\"></ion-icon>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Items is an Observable</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [placeholder]=\"'Item from observable'\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-observable]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">showAllOnFocus + required + NO searchbar</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>mobile: true, showSearchBar: false, showAllOnFocus: true, required: true</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n showSearchBar=\"false\"\n showAllOnFocus=\"true\"\n [logPrefix]=\"'[combo-mobile-no-searchbar]'\"\n [required]=\"true\"\n placeholder=\"No search bar\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Control value if missing in items</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>mobile: true, items: Observable&lt;any[]&gt;</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"missingEntity\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [clearable]=\"true\"\n [logPrefix]=\"'[combo-mobile-2]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\n suggest: (value, filter) => LoadResult&lt;any&gt;\n suggestLengthThreshold: '3'</pre\n >\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"emptyEntity\"\n [config]=\"autocompleteFields.get('entity-items-filter')\"\n [placeholder]=\"'Entity'\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [suggestLengthThreshold]=\"3\"\n [logPrefix]=\"'[combo-mobile-suggestLengthThreshold]'\"\n [required]=\"true\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">Multiple value</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>multiple: true</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entities\"\n [config]=\"autocompleteFields.get('entities-items-filter')\"\n [placeholder]=\"'Multiple'\"\n [mobile]=\"true\"\n [multiple]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-multiple]'\"\n [debug]=\"true\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Disabled control</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"disableEntity\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-2]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">In modal</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <ion-button (click)=\"ionModal.present()\">Open modal</ion-button>\n <ion-modal>\n <ng-template>\n <ion-header>\n <ion-toolbar>\n <ion-title>Modal with embed auto complete field</ion-title>\n <ion-buttons slot=\"end\">\n <ion-button (click)=\"ionModal.dismiss()\">Close</ion-button>\n </ion-buttons>\n </ion-toolbar>\n </ion-header>\n <ion-content class=\"ion-padding\">\n <div class=\"form-container\">\n <ion-card>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [tabindex]=\"10000\"\n [config]=\"autocompleteFields.get('entity-suggestFn')\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-modal]'\"\n [required]=\"true\"\n placeholder=\"Suggest field\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n <ion-card>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [tabindex]=\"10000\"\n [config]=\"autocompleteFields.get('entity-items-filter')\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [suggestLengthThreshold]=\"3\"\n [logPrefix]=\"'[combo-mobile-modal-suggestLengthThreshold]'\"\n [required]=\"true\"\n placeholder=\"Suggest field\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </div>\n </ion-content>\n </ng-template>\n </ion-modal>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"9\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Change filter</ion-label>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre></pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <ion-grid class=\"ion-no-padding\">\n <ion-row>\n <ion-col>\n <ion-button (click)=\"updateFilter(filterChangeField, 'entity-items-filter')\">\n Filter on: {{ autocompleteFields.get('entity-items-filter').filter?.searchAttribute }}\n </ion-button>\n </ion-col>\n <ion-col>\n <mat-autocomplete-field\n formControlName=\"entity\"\n #filterChangeField\n [config]=\"autocompleteFields.get('entity-items-filter')\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-filter]'\"\n ></mat-autocomplete-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col size=\"3\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Large combo</ion-label>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\nmobile: true\npanelWidth=\"500px\"</pre\n >\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n [mobile]=\"true\"\n [panelWidth]=\"'500px'\"\n [matAutocompletePosition]=\"'auto'\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-large]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <ion-col size=\"3\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Fit content combo</ion-label>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\nmobile: true\npanelClass=\"mat-select-panel-fit-content\"</pre\n >\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n [mobile]=\"true\"\n [matAutocompletePosition]=\"'auto'\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-panelClass]'\"\n panelClass=\"mat-select-panel-fit-content\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">Readonly toggle</ion-text>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox\n (change)=\"readonlyField.readonly = $event.checked\"\n [checked]=\"readonlyField.readonly\"\n >\n Readonly ?\n </mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #showIcons [checked]=\"false\">Icons ?</mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #showHint [checked]=\"false\">Hint ?</mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-autocomplete-field\n #readonlyField\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-items')\"\n [placeholder]=\"'Entity'\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-readonly]'\"\n [readonly]=\"true\"\n [clearable]=\"!readonlyField.readonly\"\n >\n @if (showIcons.checked) {\n <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n }\n @if (showIcons.checked) {\n <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n }\n @if (showHint.checked) {\n <mat-hint matHint>Some hint</mat-hint>\n }\n </mat-autocomplete-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Full size panel</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>panelClass: 'full-size'</pre>\n or\n <pre>panelWidth: '100vw'</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n [mobile]=\"true\"\n panelClass=\"full-size\"\n panelWidth=\"100vw\"\n [matAutocompletePosition]=\"'above'\"\n [logPrefix]=\"'[combo-mobile-full-size]'\"\n [debug]=\"true\"\n [showAllOnFocus]=\"true\"\n [showPanelOnFocus]=\"true\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Autocomplete with button</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre style=\"white-space: normal !important\">\n value: {{ stringify(form.controls.withButton.value) }}</pre\n >\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"withButton\"\n [config]=\"autocompleteFields.get('entity-with-button')\"\n [mobile]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-mobile-with-button]'\"\n [debug]=\"true\"\n [required]=\"true\"\n [clearable]=\"true\"\n placeholder=\"With button\"\n >\n <button matAfter type=\"button\" mat-icon-button tabindex=\"-1\" title=\"Filter\" [color]=\"'primary'\">\n <mat-icon>filter_list_alt</mat-icon>\n </button>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n }\n\n <!-- Desktop mode -->\n @if (mode === 'desktop') {\n <ion-grid>\n <ion-row>\n <!-- Using suggestFn (and favorites) -->\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">suggestFn</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\nshowAllOnFocus=true, suggestFn: (searchText, filter) => LoadResult&lt;any&gt;, favoriteItems: any[]\n </pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-suggestFn')\"\n [favoriteItems]=\"_favoriteItems\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [clearable]=\"true\"\n [logPrefix]=\"'[combo-desktop-suggest]'\"\n placeholder=\"Suggest field\"\n [debug]=\"true\"\n >\n <ion-icon matPrefix name=\"contract\"></ion-icon>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n\n <!-- Using service -->\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">Service</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>Service with suggest: (searchText, filter) => LoadResult&lt;any&gt;</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-items-filter')\"\n [placeholder]=\"'Filtered field'\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [clearable]=\"true\"\n [logPrefix]=\"'[combo-desktop-service]'\"\n [debug]=\"true\"\n >\n <ion-icon matPrefix name=\"contract\"></ion-icon>\n </mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">search with a suggestLengthThreshold</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>\n suggest: (value, filter) => LoadResult&lt;any&gt;\n suggestLengthThreshold: '3'</pre\n >\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"emptyEntity\"\n [config]=\"autocompleteFields.get('entity-items-filter')\"\n [placeholder]=\"'Filtered field'\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [suggestLengthThreshold]=\"3\"\n [logPrefix]=\"'[combo-desktop-suggestLengthThreshold]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">Items is an array</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>items: [], value: {{ stringify(form.controls.entity.value) }}</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [placeholder]=\"'Item from array'\"\n [config]=\"autocompleteFields.get('entity-items')\"\n [logPrefix]=\"'[combo-desktop-array-1]'\"\n [equals]=\"equals\"\n [mobile]=\"false\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">Items is an Observable</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>items: Observable&lt;any[]&gt;</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [placeholder]=\"'Item from observable'\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [logPrefix]=\"'[combo-desktop-2]'\"\n [equals]=\"equals\"\n [mobile]=\"false\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">Multiple value</ion-text>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small><pre>multiple: true</pre></small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entities\"\n [config]=\"autocompleteFields.get('entities-items-filter')\"\n [placeholder]=\"'Multiple'\"\n [mobile]=\"false\"\n [multiple]=\"true\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-multiple]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Control value if missing in items</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>items: Observable&lt;any[]&gt;</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"missingEntity\"\n [placeholder]=\"'Missing item'\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-missing]'\"\n [mobile]=\"false\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Full size panel</ion-label>\n </ion-card-title>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>panelClass: 'full-size'</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [placeholder]=\"'Full size panel'\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n [mobile]=\"false\"\n [panelClass]=\"'full-size'\"\n [matAutocompletePosition]=\"'above'\"\n [logPrefix]=\"'[combo-desktop-full-size]'\"\n [debug]=\"true\"\n [showAllOnFocus]=\"true\"\n [showPanelOnFocus]=\"true\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Disabled control</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"disableEntity\"\n [placeholder]=\"'Disable field'\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-disable]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col>\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Readonly control</ion-label>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [placeholder]=\"'Readonly field'\"\n [config]=\"autocompleteFields.get('entity-$items')\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-readonly]'\"\n [readonly]=\"true\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col size=\"9\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Full size combo</ion-label>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>panelClass: 'full-size'</pre>\n or\n <pre>panelWidth: '100vw'</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [placeholder]=\"'Full size panel'\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n [mobile]=\"false\"\n panelClass=\"full-size\"\n panelWidth=\"100vw\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-full-size]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col size=\"3\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Large combo</ion-label>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>panelWidth: string</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [placeholder]=\"'Fixed panel width (500px)'\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n [mobile]=\"false\"\n panelWidth=\"500px\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-large]'\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col size=\"3\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-label color=\"primary\">Fit content</ion-label>\n <ion-card-subtitle>\n <ion-text color=\"medium\">\n <small>\n <pre>panelClass=\"mat-select-panel-fit-content\"</pre>\n </small>\n </ion-text>\n </ion-card-subtitle>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <mat-autocomplete-field\n formControlName=\"entity\"\n [placeholder]=\"'Fit content'\"\n [config]=\"autocompleteFields.get('entity-items-large')\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-panelClass]'\"\n panelClass=\"mat-select-panel-fit-content\"\n ></mat-autocomplete-field>\n </ion-card-content>\n </ion-card>\n </ion-col>\n <ion-col size=\"6\">\n <ion-card>\n <ion-card-header>\n <ion-card-title>\n <ion-text color=\"primary\">Readonly toggle</ion-text>\n </ion-card-title>\n </ion-card-header>\n <ion-card-content>\n <ion-grid>\n <ion-row>\n <ion-col size=\"4\">\n <mat-checkbox\n (change)=\"readonlyField.readonly = $event.checked\"\n [checked]=\"readonlyField.readonly\"\n >\n Readonly ?\n </mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #showIcons2 [checked]=\"false\">Icons ?</mat-checkbox>\n </ion-col>\n <ion-col size=\"4\">\n <mat-checkbox #showHint2 [checked]=\"false\">Hint ?</mat-checkbox>\n </ion-col>\n </ion-row>\n <ion-row>\n <ion-col>\n <mat-autocomplete-field\n #readonlyField\n formControlName=\"entity\"\n [config]=\"autocompleteFields.get('entity-items-filter')\"\n [placeholder]=\"'Filtered field'\"\n [mobile]=\"false\"\n [equals]=\"equals\"\n [logPrefix]=\"'[combo-desktop-readonly]'\"\n [readonly]=\"true\"\n [clearable]=\"!readonlyField.readonly\"\n >\n @if (showIcons2.checked) {\n <mat-icon matPrefix>keyboard_arrow_right</mat-icon>\n }\n @if (showIcons2.checked) {\n <mat-icon matSuffix>keyboard_arrow_left</mat-icon>\n }\n @if (showHint2.checked) {\n <mat-hint>Some hint</mat-hint>\n }\n </mat-autocomplete-field>\n </ion-col>\n </ion-row>\n </ion-grid>\n </ion-card-content>\n </ion-card>\n </ion-col>\n </ion-row>\n </ion-grid>\n }\n </form>\n</ion-content>\n" }]
235
235
  }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { farEntityField: [{
package/esm2022/src/app/shared/material/badge/badge.directive.mjs CHANGED
@@ -181,10 +181,10 @@ export class BadgeDirective extends MatBadge {
181
181
  }*/
182
182
  }
183
183
  }
184
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BadgeDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i1.AriaDescriber }, { token: i0.Renderer2 }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
185
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: { appBadge: "appBadge", appBadgeDisabled: "appBadgeDisabled", appBadgeSize: "appBadgeSize", appBadgeColor: "appBadgeColor", appBadgeFill: "appBadgeFill", appBadgeMatIcon: "appBadgeMatIcon", appBadgeIcon: "appBadgeIcon", appBadgeHidden: "appBadgeHidden", appBadgeOverlap: "appBadgeOverlap", appBadgePosition: "appBadgePosition" }, host: { properties: { "class.mat-badge": "this.true", "class.mat-badge-overlap": "this.isOverlapHost", "class.mat-badge-above": "this.isAboveHost", "class.mat-badge-below": "this.isBelowHost", "class.mat-badge-before": "this.isBeforeHost", "class.mat-badge-after": "this.isAfterHost", "class.mat-badge-small": "this.isSmallHost", "class.mat-badge-medium": "this.isMediumHost", "class.mat-badge-large": "this.isLargeHost", "class.mat-badge-hidden": "this.isHiddenHost", "class.mat-badge-disabled": "this.isDisabledHost" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
184
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BadgeDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i1.AriaDescriber }, { token: i0.Renderer2 }, { token: ANIMATION_MODULE_TYPE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
185
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: BadgeDirective, selector: "[appBadge], [appBadgeIcon], [appBadgeMatIcon]", inputs: { appBadge: "appBadge", appBadgeDisabled: "appBadgeDisabled", appBadgeSize: "appBadgeSize", appBadgeColor: "appBadgeColor", appBadgeFill: "appBadgeFill", appBadgeMatIcon: "appBadgeMatIcon", appBadgeIcon: "appBadgeIcon", appBadgeHidden: "appBadgeHidden", appBadgeOverlap: "appBadgeOverlap", appBadgePosition: "appBadgePosition" }, host: { properties: { "class.mat-badge": "this.true", "class.mat-badge-overlap": "this.isOverlapHost", "class.mat-badge-above": "this.isAboveHost", "class.mat-badge-below": "this.isBelowHost", "class.mat-badge-before": "this.isBeforeHost", "class.mat-badge-after": "this.isAfterHost", "class.mat-badge-small": "this.isSmallHost", "class.mat-badge-medium": "this.isMediumHost", "class.mat-badge-large": "this.isLargeHost", "class.mat-badge-hidden": "this.isHiddenHost", "class.mat-badge-disabled": "this.isDisabledHost" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
186
186
  }
187
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BadgeDirective, decorators: [{
187
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BadgeDirective, decorators: [{
188
188
  type: Directive,
189
189
  args: [{
190
190
  selector: '[appBadge], [appBadgeIcon], [appBadgeMatIcon]',
package/esm2022/src/app/shared/material/badge/badge.module.mjs CHANGED
@@ -5,11 +5,11 @@ import { BadgeDirective } from './badge.directive';
5
5
  import { MatBadgeModule } from '@angular/material/badge';
6
6
  import * as i0 from "@angular/core";
7
7
  export class SharedBadgeModule {
8
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SharedBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
9
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SharedBadgeModule, declarations: [BadgeDirective], imports: [CommonModule, IonicModule, MatBadgeModule], exports: [BadgeDirective] });
10
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SharedBadgeModule, imports: [CommonModule, IonicModule, MatBadgeModule] });
8
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
9
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SharedBadgeModule, declarations: [BadgeDirective], imports: [CommonModule, IonicModule, MatBadgeModule], exports: [BadgeDirective] });
10
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedBadgeModule, imports: [CommonModule, IonicModule, MatBadgeModule] });
11
11
  }
12
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SharedBadgeModule, decorators: [{
12
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedBadgeModule, decorators: [{
13
13
  type: NgModule,
14
14
  args: [{
15
15
  imports: [CommonModule, IonicModule, MatBadgeModule],