@testgorilla/tgo-ui 11.9.0 → 11.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (146) hide show
  1. package/README.md +114 -0
  2. package/fesm2022/testgorilla-tgo-ui-components-ai-feedback.mjs +1 -1
  3. package/fesm2022/testgorilla-tgo-ui-components-ai-feedback.mjs.map +1 -1
  4. package/fesm2022/testgorilla-tgo-ui-components-alert-banner.mjs +8 -2
  5. package/fesm2022/testgorilla-tgo-ui-components-alert-banner.mjs.map +1 -1
  6. package/fesm2022/testgorilla-tgo-ui-components-autocomplete-v2.mjs +4 -3
  7. package/fesm2022/testgorilla-tgo-ui-components-autocomplete-v2.mjs.map +1 -1
  8. package/fesm2022/testgorilla-tgo-ui-components-autocomplete.mjs +5 -2
  9. package/fesm2022/testgorilla-tgo-ui-components-autocomplete.mjs.map +1 -1
  10. package/fesm2022/testgorilla-tgo-ui-components-avatar.mjs +1 -1
  11. package/fesm2022/testgorilla-tgo-ui-components-avatar.mjs.map +1 -1
  12. package/fesm2022/testgorilla-tgo-ui-components-breadcrumb.mjs +10 -4
  13. package/fesm2022/testgorilla-tgo-ui-components-breadcrumb.mjs.map +1 -1
  14. package/fesm2022/testgorilla-tgo-ui-components-button.mjs +5 -2
  15. package/fesm2022/testgorilla-tgo-ui-components-button.mjs.map +1 -1
  16. package/fesm2022/testgorilla-tgo-ui-components-card.mjs +5 -2
  17. package/fesm2022/testgorilla-tgo-ui-components-card.mjs.map +1 -1
  18. package/fesm2022/testgorilla-tgo-ui-components-checkbox.mjs +26 -3
  19. package/fesm2022/testgorilla-tgo-ui-components-checkbox.mjs.map +1 -1
  20. package/fesm2022/testgorilla-tgo-ui-components-checklist.mjs +8 -3
  21. package/fesm2022/testgorilla-tgo-ui-components-checklist.mjs.map +1 -1
  22. package/fesm2022/testgorilla-tgo-ui-components-datepicker.mjs +12 -3
  23. package/fesm2022/testgorilla-tgo-ui-components-datepicker.mjs.map +1 -1
  24. package/fesm2022/testgorilla-tgo-ui-components-device-control.mjs +7 -4
  25. package/fesm2022/testgorilla-tgo-ui-components-device-control.mjs.map +1 -1
  26. package/fesm2022/testgorilla-tgo-ui-components-dialog.mjs +13 -4
  27. package/fesm2022/testgorilla-tgo-ui-components-dialog.mjs.map +1 -1
  28. package/fesm2022/testgorilla-tgo-ui-components-dropdown.mjs +8 -2
  29. package/fesm2022/testgorilla-tgo-ui-components-dropdown.mjs.map +1 -1
  30. package/fesm2022/testgorilla-tgo-ui-components-empty-state.mjs +1 -1
  31. package/fesm2022/testgorilla-tgo-ui-components-empty-state.mjs.map +1 -1
  32. package/fesm2022/testgorilla-tgo-ui-components-field.mjs +6 -3
  33. package/fesm2022/testgorilla-tgo-ui-components-field.mjs.map +1 -1
  34. package/fesm2022/testgorilla-tgo-ui-components-file-upload.mjs +9 -3
  35. package/fesm2022/testgorilla-tgo-ui-components-file-upload.mjs.map +1 -1
  36. package/fesm2022/testgorilla-tgo-ui-components-filter-button.mjs +14 -2
  37. package/fesm2022/testgorilla-tgo-ui-components-filter-button.mjs.map +1 -1
  38. package/fesm2022/testgorilla-tgo-ui-components-infinite-scroll-table.mjs +17 -3
  39. package/fesm2022/testgorilla-tgo-ui-components-infinite-scroll-table.mjs.map +1 -1
  40. package/fesm2022/testgorilla-tgo-ui-components-inline-field.mjs +7 -4
  41. package/fesm2022/testgorilla-tgo-ui-components-inline-field.mjs.map +1 -1
  42. package/fesm2022/testgorilla-tgo-ui-components-media-card.mjs +1 -1
  43. package/fesm2022/testgorilla-tgo-ui-components-media-card.mjs.map +1 -1
  44. package/fesm2022/testgorilla-tgo-ui-components-media-dialog.mjs +1 -1
  45. package/fesm2022/testgorilla-tgo-ui-components-media-dialog.mjs.map +1 -1
  46. package/fesm2022/testgorilla-tgo-ui-components-multi-input.mjs +7 -4
  47. package/fesm2022/testgorilla-tgo-ui-components-multi-input.mjs.map +1 -1
  48. package/fesm2022/testgorilla-tgo-ui-components-navbar.mjs +2 -2
  49. package/fesm2022/testgorilla-tgo-ui-components-navbar.mjs.map +1 -1
  50. package/fesm2022/testgorilla-tgo-ui-components-overflow-menu.mjs +9 -2
  51. package/fesm2022/testgorilla-tgo-ui-components-overflow-menu.mjs.map +1 -1
  52. package/fesm2022/testgorilla-tgo-ui-components-page-header.mjs +5 -2
  53. package/fesm2022/testgorilla-tgo-ui-components-page-header.mjs.map +1 -1
  54. package/fesm2022/testgorilla-tgo-ui-components-paginator.mjs +8 -2
  55. package/fesm2022/testgorilla-tgo-ui-components-paginator.mjs.map +1 -1
  56. package/fesm2022/testgorilla-tgo-ui-components-password-criteria.mjs +1 -1
  57. package/fesm2022/testgorilla-tgo-ui-components-password-criteria.mjs.map +1 -1
  58. package/fesm2022/testgorilla-tgo-ui-components-phone-input.mjs +13 -3
  59. package/fesm2022/testgorilla-tgo-ui-components-phone-input.mjs.map +1 -1
  60. package/fesm2022/testgorilla-tgo-ui-components-popover.mjs +1 -1
  61. package/fesm2022/testgorilla-tgo-ui-components-popover.mjs.map +1 -1
  62. package/fesm2022/testgorilla-tgo-ui-components-popup-tip.mjs +4 -3
  63. package/fesm2022/testgorilla-tgo-ui-components-popup-tip.mjs.map +1 -1
  64. package/fesm2022/testgorilla-tgo-ui-components-prompt.mjs +1 -1
  65. package/fesm2022/testgorilla-tgo-ui-components-prompt.mjs.map +1 -1
  66. package/fesm2022/testgorilla-tgo-ui-components-radial-progress.mjs +1 -1
  67. package/fesm2022/testgorilla-tgo-ui-components-radial-progress.mjs.map +1 -1
  68. package/fesm2022/testgorilla-tgo-ui-components-radio-button.mjs +21 -1
  69. package/fesm2022/testgorilla-tgo-ui-components-radio-button.mjs.map +1 -1
  70. package/fesm2022/testgorilla-tgo-ui-components-rating.mjs +8 -2
  71. package/fesm2022/testgorilla-tgo-ui-components-rating.mjs.map +1 -1
  72. package/fesm2022/testgorilla-tgo-ui-components-scale-table.mjs +1 -1
  73. package/fesm2022/testgorilla-tgo-ui-components-scale-table.mjs.map +1 -1
  74. package/fesm2022/testgorilla-tgo-ui-components-scale.mjs +11 -2
  75. package/fesm2022/testgorilla-tgo-ui-components-scale.mjs.map +1 -1
  76. package/fesm2022/testgorilla-tgo-ui-components-segmented-bar.mjs +5 -2
  77. package/fesm2022/testgorilla-tgo-ui-components-segmented-bar.mjs.map +1 -1
  78. package/fesm2022/testgorilla-tgo-ui-components-segmented-button.mjs +15 -3
  79. package/fesm2022/testgorilla-tgo-ui-components-segmented-button.mjs.map +1 -1
  80. package/fesm2022/testgorilla-tgo-ui-components-segmented-toggle.mjs +11 -3
  81. package/fesm2022/testgorilla-tgo-ui-components-segmented-toggle.mjs.map +1 -1
  82. package/fesm2022/testgorilla-tgo-ui-components-selectable-card.mjs +7 -4
  83. package/fesm2022/testgorilla-tgo-ui-components-selectable-card.mjs.map +1 -1
  84. package/fesm2022/testgorilla-tgo-ui-components-side-navigation.mjs +1 -1
  85. package/fesm2022/testgorilla-tgo-ui-components-side-navigation.mjs.map +1 -1
  86. package/fesm2022/testgorilla-tgo-ui-components-side-panel.mjs +5 -2
  87. package/fesm2022/testgorilla-tgo-ui-components-side-panel.mjs.map +1 -1
  88. package/fesm2022/testgorilla-tgo-ui-components-side-sheet.mjs +11 -2
  89. package/fesm2022/testgorilla-tgo-ui-components-side-sheet.mjs.map +1 -1
  90. package/fesm2022/testgorilla-tgo-ui-components-slider.mjs +18 -3
  91. package/fesm2022/testgorilla-tgo-ui-components-slider.mjs.map +1 -1
  92. package/fesm2022/testgorilla-tgo-ui-components-snackbar.mjs +8 -2
  93. package/fesm2022/testgorilla-tgo-ui-components-snackbar.mjs.map +1 -1
  94. package/fesm2022/testgorilla-tgo-ui-components-stepper.mjs +11 -2
  95. package/fesm2022/testgorilla-tgo-ui-components-stepper.mjs.map +1 -1
  96. package/fesm2022/testgorilla-tgo-ui-components-table.mjs +8 -2
  97. package/fesm2022/testgorilla-tgo-ui-components-table.mjs.map +1 -1
  98. package/fesm2022/testgorilla-tgo-ui-components-tabs.mjs +4 -3
  99. package/fesm2022/testgorilla-tgo-ui-components-tabs.mjs.map +1 -1
  100. package/fesm2022/testgorilla-tgo-ui-components-tag.mjs +5 -3
  101. package/fesm2022/testgorilla-tgo-ui-components-tag.mjs.map +1 -1
  102. package/fesm2022/testgorilla-tgo-ui-components-toggle.mjs +10 -3
  103. package/fesm2022/testgorilla-tgo-ui-components-toggle.mjs.map +1 -1
  104. package/fesm2022/testgorilla-tgo-ui-components-write-with-ai.mjs +1 -1
  105. package/fesm2022/testgorilla-tgo-ui-components-write-with-ai.mjs.map +1 -1
  106. package/mcp/catalog.json +1 -1
  107. package/package.json +1 -1
  108. package/types/testgorilla-tgo-ui-components-alert-banner.d.ts +4 -1
  109. package/types/testgorilla-tgo-ui-components-autocomplete-v2.d.ts +2 -1
  110. package/types/testgorilla-tgo-ui-components-autocomplete.d.ts +2 -1
  111. package/types/testgorilla-tgo-ui-components-breadcrumb.d.ts +4 -1
  112. package/types/testgorilla-tgo-ui-components-button.d.ts +2 -1
  113. package/types/testgorilla-tgo-ui-components-card.d.ts +2 -1
  114. package/types/testgorilla-tgo-ui-components-checkbox.d.ts +4 -1
  115. package/types/testgorilla-tgo-ui-components-checklist.d.ts +3 -1
  116. package/types/testgorilla-tgo-ui-components-datepicker.d.ts +4 -1
  117. package/types/testgorilla-tgo-ui-components-device-control.d.ts +4 -1
  118. package/types/testgorilla-tgo-ui-components-dialog.d.ts +4 -1
  119. package/types/testgorilla-tgo-ui-components-dropdown.d.ts +3 -1
  120. package/types/testgorilla-tgo-ui-components-field.d.ts +4 -1
  121. package/types/testgorilla-tgo-ui-components-file-upload.d.ts +3 -1
  122. package/types/testgorilla-tgo-ui-components-filter-button.d.ts +5 -1
  123. package/types/testgorilla-tgo-ui-components-infinite-scroll-table.d.ts +6 -1
  124. package/types/testgorilla-tgo-ui-components-inline-field.d.ts +4 -1
  125. package/types/testgorilla-tgo-ui-components-multi-input.d.ts +4 -1
  126. package/types/testgorilla-tgo-ui-components-overflow-menu.d.ts +3 -1
  127. package/types/testgorilla-tgo-ui-components-page-header.d.ts +2 -1
  128. package/types/testgorilla-tgo-ui-components-paginator.d.ts +3 -1
  129. package/types/testgorilla-tgo-ui-components-phone-input.d.ts +4 -1
  130. package/types/testgorilla-tgo-ui-components-popup-tip.d.ts +2 -1
  131. package/types/testgorilla-tgo-ui-components-radio-button.d.ts +4 -1
  132. package/types/testgorilla-tgo-ui-components-rating.d.ts +3 -1
  133. package/types/testgorilla-tgo-ui-components-scale.d.ts +4 -1
  134. package/types/testgorilla-tgo-ui-components-segmented-bar.d.ts +2 -1
  135. package/types/testgorilla-tgo-ui-components-segmented-button.d.ts +6 -1
  136. package/types/testgorilla-tgo-ui-components-segmented-toggle.d.ts +4 -1
  137. package/types/testgorilla-tgo-ui-components-selectable-card.d.ts +4 -1
  138. package/types/testgorilla-tgo-ui-components-side-panel.d.ts +3 -0
  139. package/types/testgorilla-tgo-ui-components-side-sheet.d.ts +4 -1
  140. package/types/testgorilla-tgo-ui-components-slider.d.ts +6 -1
  141. package/types/testgorilla-tgo-ui-components-snackbar.d.ts +3 -1
  142. package/types/testgorilla-tgo-ui-components-stepper.d.ts +4 -1
  143. package/types/testgorilla-tgo-ui-components-table.d.ts +3 -1
  144. package/types/testgorilla-tgo-ui-components-tabs.d.ts +3 -1
  145. package/types/testgorilla-tgo-ui-components-tag.d.ts +3 -1
  146. package/types/testgorilla-tgo-ui-components-toggle.d.ts +5 -1
@@ -51,6 +51,8 @@ class PaginatorComponent {
51
51
  * @memberof PaginatorComponent
52
52
  */
53
53
  this.currentPage = 0;
54
+ this.testId = null;
55
+ this.ariaLabel = '';
54
56
  this.paginatorChange = new EventEmitter();
55
57
  this.selectConfig = { panelClass: 'ui-dropdown-list' };
56
58
  if (defaultAppTheme) {
@@ -61,11 +63,11 @@ class PaginatorComponent {
61
63
  this.paginatorChange.emit(paginator);
62
64
  }
63
65
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PaginatorComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
64
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: PaginatorComponent, isStandalone: true, selector: "ui-paginator", inputs: { pageSizeOptions: "pageSizeOptions", length: "length", pageSize: "pageSize", disabled: "disabled", applicationTheme: "applicationTheme", currentPage: "currentPage" }, outputs: { paginatorChange: "paginatorChange" }, ngImport: i0, template: "<mat-paginator\n [disabled]=\"disabled\"\n [length]=\"length\"\n [pageIndex]=\"currentPage ? currentPage : 0\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [attr.theme]=\"applicationTheme\"\n [selectConfig]=\"selectConfig\"\n [color]=\"'accent'\"\n (page)=\"onPaginatorChange($event)\"\n></mat-paginator>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-center,::ng-deep .mat-mdc-paginator .mat-mdc-select-arrow-wrapper,::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button{display:flex;justify-content:center;align-items:center}::ng-deep .mat-mdc-paginator{border-radius:0 0 8px 8px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions{height:40px!important;margin-left:16px!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button.mat-mdc-button-disabled svg{fill:#919191!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button{width:40px!important;padding:0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button svg{height:24px!important;width:24px!important}::ng-deep .mat-mdc-paginator .mat-mdc-select-arrow-wrapper{width:24px}::ng-deep .mat-mdc-paginator .mat-mdc-form-field-infix{padding:4px 0!important;min-height:28px!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-page-size-select{width:64px}::ng-deep .mat-mdc-paginator .mat-mdc-text-field-wrapper{height:32px!important;padding:0 8px;width:64px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;padding:8px 24px;line-height:20px;color:#000}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container{padding:0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-select-value-text{font-size:14px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions{height:100%}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions button{height:100%;width:70px;border-radius:0}::ng-deep .mat-mdc-paginator[theme=dark] .mdc-icon-button__ripple,::ng-deep .mat-mdc-paginator[theme=light] .mdc-icon-button__ripple{display:none}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button{border-radius:50%!important}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused{padding:1px;border:1px dashed #888888;outline:0}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:active,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:active{transform:scale(.98)}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button .mat-mdc-button-touch-target,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button .mat-mdc-button-touch-target{width:40px;height:40px}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button{color:#242424!important}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button svg{fill:#242424}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:hover{background-color:#e9e9e9}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused{border-color:#666}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button{color:#fff!important}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button svg{fill:#fff!important}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:hover{background-color:#666}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused{border-color:#e9e9e9}\n"], dependencies: [{ kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
66
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: PaginatorComponent, isStandalone: true, selector: "ui-paginator", inputs: { pageSizeOptions: "pageSizeOptions", length: "length", pageSize: "pageSize", disabled: "disabled", applicationTheme: "applicationTheme", currentPage: "currentPage", testId: "testId", ariaLabel: "ariaLabel" }, outputs: { paginatorChange: "paginatorChange" }, ngImport: i0, template: "<mat-paginator\n [disabled]=\"disabled\"\n [length]=\"length\"\n [pageIndex]=\"currentPage ? currentPage : 0\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [attr.theme]=\"applicationTheme\"\n [selectConfig]=\"selectConfig\"\n [color]=\"'accent'\"\n (page)=\"onPaginatorChange($event)\"\n [attr.data-testid]=\"testId\"\n [attr.aria-label]=\"ariaLabel || null\"\n></mat-paginator>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-center,::ng-deep .mat-mdc-paginator .mat-mdc-select-arrow-wrapper,::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button{display:flex;justify-content:center;align-items:center}::ng-deep .mat-mdc-paginator{border-radius:0 0 8px 8px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions{height:40px!important;margin-left:16px!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button.mat-mdc-button-disabled svg{fill:#919191!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button{width:40px!important;padding:0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button svg{height:24px!important;width:24px!important}::ng-deep .mat-mdc-paginator .mat-mdc-select-arrow-wrapper{width:24px}::ng-deep .mat-mdc-paginator .mat-mdc-form-field-infix{padding:4px 0!important;min-height:28px!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-page-size-select{width:64px}::ng-deep .mat-mdc-paginator .mat-mdc-text-field-wrapper{height:32px!important;padding:0 8px;width:64px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;padding:8px 24px;line-height:20px;color:#000}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container{padding:0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-select-value-text{font-size:14px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions{height:100%}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions button{height:100%;width:70px;border-radius:0}::ng-deep .mat-mdc-paginator[theme=dark] .mdc-icon-button__ripple,::ng-deep .mat-mdc-paginator[theme=light] .mdc-icon-button__ripple{display:none}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button{border-radius:50%!important}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused{padding:1px;border:1px dashed #888888;outline:0}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:active,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:active{transform:scale(.98)}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button .mat-mdc-button-touch-target,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button .mat-mdc-button-touch-target{width:40px;height:40px}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button{color:#242424!important}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button svg{fill:#242424}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:hover{background-color:#e9e9e9}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused{border-color:#666}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button{color:#fff!important}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button svg{fill:#fff!important}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:hover{background-color:#666}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused{border-color:#e9e9e9}\n"], dependencies: [{ kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
65
67
  }
66
68
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PaginatorComponent, decorators: [{
67
69
  type: Component,
68
- args: [{ selector: 'ui-paginator', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatPaginator], template: "<mat-paginator\n [disabled]=\"disabled\"\n [length]=\"length\"\n [pageIndex]=\"currentPage ? currentPage : 0\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [attr.theme]=\"applicationTheme\"\n [selectConfig]=\"selectConfig\"\n [color]=\"'accent'\"\n (page)=\"onPaginatorChange($event)\"\n></mat-paginator>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-center,::ng-deep .mat-mdc-paginator .mat-mdc-select-arrow-wrapper,::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button{display:flex;justify-content:center;align-items:center}::ng-deep .mat-mdc-paginator{border-radius:0 0 8px 8px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions{height:40px!important;margin-left:16px!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button.mat-mdc-button-disabled svg{fill:#919191!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button{width:40px!important;padding:0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button svg{height:24px!important;width:24px!important}::ng-deep .mat-mdc-paginator .mat-mdc-select-arrow-wrapper{width:24px}::ng-deep .mat-mdc-paginator .mat-mdc-form-field-infix{padding:4px 0!important;min-height:28px!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-page-size-select{width:64px}::ng-deep .mat-mdc-paginator .mat-mdc-text-field-wrapper{height:32px!important;padding:0 8px;width:64px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;padding:8px 24px;line-height:20px;color:#000}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container{padding:0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-select-value-text{font-size:14px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions{height:100%}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions button{height:100%;width:70px;border-radius:0}::ng-deep .mat-mdc-paginator[theme=dark] .mdc-icon-button__ripple,::ng-deep .mat-mdc-paginator[theme=light] .mdc-icon-button__ripple{display:none}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button{border-radius:50%!important}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused{padding:1px;border:1px dashed #888888;outline:0}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:active,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:active{transform:scale(.98)}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button .mat-mdc-button-touch-target,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button .mat-mdc-button-touch-target{width:40px;height:40px}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button{color:#242424!important}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button svg{fill:#242424}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:hover{background-color:#e9e9e9}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused{border-color:#666}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button{color:#fff!important}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button svg{fill:#fff!important}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:hover{background-color:#666}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused{border-color:#e9e9e9}\n"] }]
70
+ args: [{ selector: 'ui-paginator', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatPaginator], template: "<mat-paginator\n [disabled]=\"disabled\"\n [length]=\"length\"\n [pageIndex]=\"currentPage ? currentPage : 0\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [attr.theme]=\"applicationTheme\"\n [selectConfig]=\"selectConfig\"\n [color]=\"'accent'\"\n (page)=\"onPaginatorChange($event)\"\n [attr.data-testid]=\"testId\"\n [attr.aria-label]=\"ariaLabel || null\"\n></mat-paginator>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.flex-center,::ng-deep .mat-mdc-paginator .mat-mdc-select-arrow-wrapper,::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button{display:flex;justify-content:center;align-items:center}::ng-deep .mat-mdc-paginator{border-radius:0 0 8px 8px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions{height:40px!important;margin-left:16px!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button.mat-mdc-button-disabled svg{fill:#919191!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button{width:40px!important;padding:0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-range-actions button svg{height:24px!important;width:24px!important}::ng-deep .mat-mdc-paginator .mat-mdc-select-arrow-wrapper{width:24px}::ng-deep .mat-mdc-paginator .mat-mdc-form-field-infix{padding:4px 0!important;min-height:28px!important}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-page-size-select{width:64px}::ng-deep .mat-mdc-paginator .mat-mdc-text-field-wrapper{height:32px!important;padding:0 8px;width:64px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;padding:8px 24px;line-height:20px;color:#000}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container{padding:0}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-select-value-text{font-size:14px}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions{height:100%}::ng-deep .mat-mdc-paginator .mat-mdc-paginator-outer-container .mat-mdc-paginator-container .mat-mdc-paginator-range-actions button{height:100%;width:70px;border-radius:0}::ng-deep .mat-mdc-paginator[theme=dark] .mdc-icon-button__ripple,::ng-deep .mat-mdc-paginator[theme=light] .mdc-icon-button__ripple{display:none}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button{border-radius:50%!important}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused{padding:1px;border:1px dashed #888888;outline:0}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:active,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:active{transform:scale(.98)}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button .mat-mdc-button-touch-target,::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button .mat-mdc-button-touch-target{width:40px;height:40px}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button{color:#242424!important}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button svg{fill:#242424}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:hover{background-color:#e9e9e9}::ng-deep .mat-mdc-paginator[theme=light] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused{border-color:#666}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button{color:#fff!important}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button svg{fill:#fff!important}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:hover{background-color:#666}::ng-deep .mat-mdc-paginator[theme=dark] .mat-mdc-paginator-range-actions .mdc-icon-button:focus.cdk-focused{border-color:#e9e9e9}\n"] }]
69
71
  }], ctorParameters: () => [{ type: undefined, decorators: [{
70
72
  type: Optional
71
73
  }, {
@@ -83,6 +85,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
83
85
  type: Input
84
86
  }], currentPage: [{
85
87
  type: Input
88
+ }], testId: [{
89
+ type: Input
90
+ }], ariaLabel: [{
91
+ type: Input
86
92
  }], paginatorChange: [{
87
93
  type: Output
88
94
  }] } });
@@ -1 +1 @@
1
- {"version":3,"file":"testgorilla-tgo-ui-components-paginator.mjs","sources":["../../../components/paginator/paginator.component.ts","../../../components/paginator/paginator.component.html","../../../components/paginator/paginator.component.module.ts","../../../components/paginator/testgorilla-tgo-ui-components-paginator.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';\nimport { MatPaginatorSelectConfig, PageEvent, MatPaginator } from '@angular/material/paginator';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\n\n@Component({\n selector: 'ui-paginator',\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './paginator.component.html',\n styleUrls: ['./paginator.component.scss'],\n imports: [MatPaginator],\n})\nexport class PaginatorComponent {\n /**\n * Paginator size options\n *\n * @type {number[]}\n * @memberof PaginatorComponent\n */\n @Input() pageSizeOptions = [10, 25, 50];\n\n /**\n * Data length\n *\n * @type {number}\n * @memberof PaginatorComponent\n */\n @Input() length = 0;\n\n /**\n * Page size\n *\n * @type {number}\n * @memberof PaginatorComponent\n */\n @Input() pageSize = 25;\n\n /**\n * Disabled\n *\n * @type {boolean}\n * @memberOf PaginatorComponent\n */\n @Input() disabled = false;\n\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof PaginatorComponent\n */\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /**\n *\n * Defines the current page\n * @default 0\n *\n * @type {number}\n * @memberof PaginatorComponent\n */\n @Input() currentPage = 0;\n\n @Output() paginatorChange: EventEmitter<PageEvent> = new EventEmitter<PageEvent>();\n\n selectConfig: MatPaginatorSelectConfig = { panelClass: 'ui-dropdown-list' };\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n onPaginatorChange(paginator: PageEvent) {\n this.paginatorChange.emit(paginator);\n }\n}\n","<mat-paginator\n [disabled]=\"disabled\"\n [length]=\"length\"\n [pageIndex]=\"currentPage ? currentPage : 0\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [attr.theme]=\"applicationTheme\"\n [selectConfig]=\"selectConfig\"\n [color]=\"'accent'\"\n (page)=\"onPaginatorChange($event)\"\n></mat-paginator>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatPaginatorModule } from '@angular/material/paginator';\n\nimport { PaginatorComponent } from './paginator.component';\n\n@NgModule({\n imports: [CommonModule, MatPaginatorModule, PaginatorComponent],\n exports: [PaginatorComponent],\n})\nexport class PaginatorComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"testgorilla-tgo-ui-components-paginator.mjs","sources":["../../../components/paginator/paginator.component.ts","../../../components/paginator/paginator.component.html","../../../components/paginator/paginator.component.module.ts","../../../components/paginator/testgorilla-tgo-ui-components-paginator.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';\nimport { MatPaginatorSelectConfig, PageEvent, MatPaginator } from '@angular/material/paginator';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\n\n@Component({\n selector: 'ui-paginator',\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './paginator.component.html',\n styleUrls: ['./paginator.component.scss'],\n imports: [MatPaginator],\n})\nexport class PaginatorComponent {\n /**\n * Paginator size options\n *\n * @type {number[]}\n * @memberof PaginatorComponent\n */\n @Input() pageSizeOptions = [10, 25, 50];\n\n /**\n * Data length\n *\n * @type {number}\n * @memberof PaginatorComponent\n */\n @Input() length = 0;\n\n /**\n * Page size\n *\n * @type {number}\n * @memberof PaginatorComponent\n */\n @Input() pageSize = 25;\n\n /**\n * Disabled\n *\n * @type {boolean}\n * @memberOf PaginatorComponent\n */\n @Input() disabled = false;\n\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof PaginatorComponent\n */\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /**\n *\n * Defines the current page\n * @default 0\n *\n * @type {number}\n * @memberof PaginatorComponent\n */\n @Input() currentPage = 0;\n\n @Input() testId: string | null = null;\n\n @Input() ariaLabel = '';\n\n @Output() paginatorChange: EventEmitter<PageEvent> = new EventEmitter<PageEvent>();\n\n selectConfig: MatPaginatorSelectConfig = { panelClass: 'ui-dropdown-list' };\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n onPaginatorChange(paginator: PageEvent) {\n this.paginatorChange.emit(paginator);\n }\n}\n","<mat-paginator\n [disabled]=\"disabled\"\n [length]=\"length\"\n [pageIndex]=\"currentPage ? currentPage : 0\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [attr.theme]=\"applicationTheme\"\n [selectConfig]=\"selectConfig\"\n [color]=\"'accent'\"\n (page)=\"onPaginatorChange($event)\"\n [attr.data-testid]=\"testId\"\n [attr.aria-label]=\"ariaLabel || null\"\n></mat-paginator>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatPaginatorModule } from '@angular/material/paginator';\n\nimport { PaginatorComponent } from './paginator.component';\n\n@NgModule({\n imports: [CommonModule, MatPaginatorModule, PaginatorComponent],\n exports: [PaginatorComponent],\n})\nexport class PaginatorComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
@@ -93,7 +93,7 @@ class PasswordComponent {
93
93
  useExisting: forwardRef(() => PasswordComponent),
94
94
  multi: true,
95
95
  },
96
- ], viewQueries: [{ propertyName: "requiredCriteria", first: true, predicate: ["requiredCriteria"], descendants: true }], ngImport: i0, template: "<div class=\"password-criteria-container\">\n <ui-field\n [applicationTheme]=\"'dark'\"\n [formControl]=\"formControl\"\n [ariaLabel]=\"requiredCriteria?.nativeElement?.innerText ?? ''\"\n [type]=\"'password'\"\n [placeholder]=\"('PASSWORD.PASSWORD_PLACEHOLDER' | uiTranslate | async) + (required ? ' *' : '')\"\n (keydown.enter)=\"showError = true\"\n (focusout)=\"showError = true\"\n ></ui-field>\n\n @if (showCriteria) {\n <div class=\"criteria-container\" #requiredCriteria>\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"'dark'\"\n ></ui-progress-bar>\n </div>\n @if (allRequirementsMet) {\n <span style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">{{\n 'FIELD.ALL_PASSWORD_REQ_PASSED' | uiTranslate | async\n }}</span>\n }\n @for (criterion of criteria; track criterion) {\n <div\n class=\"criterion\"\n [attr.aria-live]=\"!allRequirementsMet ? 'polite' : ''\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] && showError ? 'Info-in-line' : 'Check-round-in-line'\"\n applicationTheme=\"dark\"\n ></ui-icon>\n <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n <span style=\"position: absolute; left: -9999px\">{{\n (criteriaPassed[criterion.key] ? 'COMMON.PASSED' : 'COMMON.FAILED') | uiTranslate | async\n }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.password-criteria-container .criteria-container{margin-top:14px}.password-criteria-container .criteria-container .progress{margin-bottom:16px}.password-criteria-container .criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.password-criteria-container .criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.password-criteria-container .criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.password-criteria-container .criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.password-criteria-container .criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.password-criteria-container .criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.password-criteria-container .criteria-container .criterion.error span{color:#e02800}\n"], dependencies: [{ kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["fullWidth", "fullHeight", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "isAutocompleteOff", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "autosizableTextarea", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ProgressBarComponentModule }, { kind: "component", type: i2.ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i3.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
96
+ ], viewQueries: [{ propertyName: "requiredCriteria", first: true, predicate: ["requiredCriteria"], descendants: true }], ngImport: i0, template: "<div class=\"password-criteria-container\">\n <ui-field\n [applicationTheme]=\"'dark'\"\n [formControl]=\"formControl\"\n [ariaLabel]=\"requiredCriteria?.nativeElement?.innerText ?? ''\"\n [type]=\"'password'\"\n [placeholder]=\"('PASSWORD.PASSWORD_PLACEHOLDER' | uiTranslate | async) + (required ? ' *' : '')\"\n (keydown.enter)=\"showError = true\"\n (focusout)=\"showError = true\"\n ></ui-field>\n\n @if (showCriteria) {\n <div class=\"criteria-container\" #requiredCriteria>\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"'dark'\"\n ></ui-progress-bar>\n </div>\n @if (allRequirementsMet) {\n <span style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">{{\n 'FIELD.ALL_PASSWORD_REQ_PASSED' | uiTranslate | async\n }}</span>\n }\n @for (criterion of criteria; track criterion) {\n <div\n class=\"criterion\"\n [attr.aria-live]=\"!allRequirementsMet ? 'polite' : ''\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] && showError ? 'Info-in-line' : 'Check-round-in-line'\"\n applicationTheme=\"dark\"\n ></ui-icon>\n <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n <span style=\"position: absolute; left: -9999px\">{{\n (criteriaPassed[criterion.key] ? 'COMMON.PASSED' : 'COMMON.FAILED') | uiTranslate | async\n }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.password-criteria-container .criteria-container{margin-top:14px}.password-criteria-container .criteria-container .progress{margin-bottom:16px}.password-criteria-container .criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.password-criteria-container .criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.password-criteria-container .criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.password-criteria-container .criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.password-criteria-container .criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.password-criteria-container .criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.password-criteria-container .criteria-container .criterion.error span{color:#e02800}\n"], dependencies: [{ kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["fullWidth", "fullHeight", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "isAutocompleteOff", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "testId", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "autosizableTextarea", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ProgressBarComponentModule }, { kind: "component", type: i2.ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i3.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
97
97
  }
98
98
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PasswordComponent, decorators: [{
99
99
  type: Component,
@@ -1 +1 @@
1
- {"version":3,"file":"testgorilla-tgo-ui-components-password-criteria.mjs","sources":["../../../components/password-criteria/password.component.ts","../../../components/password-criteria/password.component.html","../../../components/password-criteria/password.component.module.ts","../../../components/password-criteria/testgorilla-tgo-ui-components-password-criteria.ts"],"sourcesContent":["import { NgClass, AsyncPipe } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n DestroyRef,\n ElementRef,\n EventEmitter,\n forwardRef,\n inject,\n Input,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n ControlValueAccessor,\n FormControl,\n NG_VALUE_ACCESSOR,\n Validators,\n FormsModule,\n ReactiveFormsModule,\n} from '@angular/forms';\n\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { FieldComponent } from '@testgorilla/tgo-ui/components/field';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ProgressBarComponentModule } from '@testgorilla/tgo-ui/components/progress-bar';\n\n@Component({\n selector: 'ui-password-criteria',\n templateUrl: './password.component.html',\n styleUrls: ['./password.component.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => PasswordComponent),\n multi: true,\n },\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n FieldComponent,\n FormsModule,\n ReactiveFormsModule,\n ProgressBarComponentModule,\n NgClass,\n IconComponentModule,\n AsyncPipe,\n UiTranslatePipe,\n ],\n})\nexport class PasswordComponent implements ControlValueAccessor {\n /**\n * Show criteria for password. Defaults true\n *\n * @type {boolean}\n * @memberof PasswordComponent\n */\n @Input() showCriteria = true;\n\n /**\n * Password is required or not\n *\n * @type {boolean}\n * @memberof PasswordComponent\n */\n @Input() required = false;\n\n @Output() passwordChange = new EventEmitter<string>();\n\n @Output() allCriteriaPassed = new EventEmitter<boolean>();\n\n @ViewChild('requiredCriteria') requiredCriteria: ElementRef<HTMLElement>;\n\n // eslint-disable-next-line @typescript-eslint/unbound-method -- Validators.required is a static Angular validator with no `this` binding\n protected formControl = new FormControl('', Validators.required);\n protected criteriaPassed: { [key: string]: boolean } = {};\n protected showError: boolean;\n protected progressValue: number;\n protected criteria: { translateKey: string; key: string }[] = [\n { translateKey: 'PASSWORD.LOWERCASE', key: 'hasLowercase' },\n { translateKey: 'PASSWORD.UPPERCASE', key: 'hasUppercase' },\n { translateKey: 'PASSWORD.NUMBER', key: 'hasNumber' },\n { translateKey: 'PASSWORD.SPECIAL_CHARACTER', key: 'hasSpecialChar' },\n { translateKey: 'PASSWORD.CHARACTERS', key: 'hasMinLength' },\n ];\n\n constructor(private readonly destroyRef: DestroyRef) {\n this.formControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {\n this.checkCriteria();\n });\n }\n\n checkCriteria(): void {\n const password = this.formControl.value ?? '';\n this.criteriaPassed = {\n hasLowercase: /^(?=.*?[a-z])/.test(password),\n hasUppercase: /^(?=.*?[A-Z])/.test(password),\n hasNumber: /^(?=.*?[0-9])/.test(password),\n hasSpecialChar: /^(?=.*?[\" !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~])/.test(password),\n hasMinLength: password.length >= 12,\n };\n\n const passedCount = this.countPassed();\n this.progressValue = Math.min(Math.max(passedCount * (100 / Object.keys(this.criteriaPassed).length), 1), 100);\n this.passwordChange.emit(password);\n this.allCriteriaPassed.emit(passedCount === Object.keys(this.criteriaPassed).length);\n this.onChange(password);\n }\n\n countPassed(): number {\n let count = 0;\n for (const key in this.criteriaPassed) {\n if (Object.prototype.hasOwnProperty.call(this.criteriaPassed, key) && this.criteriaPassed[key]) {\n count++;\n }\n }\n return count;\n }\n onChange = (_v: string) => {};\n onTouch = () => {};\n\n private readonly cdr = inject(ChangeDetectorRef);\n\n writeValue(obj?: string | null): void {\n this.formControl.setValue(obj ?? null);\n // setValue() re-evaluates the criteria fields the template renders; the\n // forms API calls this from outside the component's own change detection.\n this.cdr.markForCheck();\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouch = fn;\n }\n\n get allRequirementsMet(): boolean {\n return this.countPassed() === Object.keys(this.criteriaPassed).length && Boolean(this.countPassed());\n }\n}\n","<div class=\"password-criteria-container\">\n <ui-field\n [applicationTheme]=\"'dark'\"\n [formControl]=\"formControl\"\n [ariaLabel]=\"requiredCriteria?.nativeElement?.innerText ?? ''\"\n [type]=\"'password'\"\n [placeholder]=\"('PASSWORD.PASSWORD_PLACEHOLDER' | uiTranslate | async) + (required ? ' *' : '')\"\n (keydown.enter)=\"showError = true\"\n (focusout)=\"showError = true\"\n ></ui-field>\n\n @if (showCriteria) {\n <div class=\"criteria-container\" #requiredCriteria>\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"'dark'\"\n ></ui-progress-bar>\n </div>\n @if (allRequirementsMet) {\n <span style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">{{\n 'FIELD.ALL_PASSWORD_REQ_PASSED' | uiTranslate | async\n }}</span>\n }\n @for (criterion of criteria; track criterion) {\n <div\n class=\"criterion\"\n [attr.aria-live]=\"!allRequirementsMet ? 'polite' : ''\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] && showError ? 'Info-in-line' : 'Check-round-in-line'\"\n applicationTheme=\"dark\"\n ></ui-icon>\n <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n <span style=\"position: absolute; left: -9999px\">{{\n (criteriaPassed[criterion.key] ? 'COMMON.PASSED' : 'COMMON.FAILED') | uiTranslate | async\n }}</span>\n </div>\n }\n </div>\n }\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { FieldComponentModule } from '@testgorilla/tgo-ui/components/field';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ProgressBarComponentModule } from '@testgorilla/tgo-ui/components/progress-bar';\n\nimport { PasswordComponent } from './password.component';\n\n@NgModule({\n exports: [PasswordComponent],\n imports: [\n CommonModule,\n FieldComponentModule,\n ReactiveFormsModule,\n IconComponentModule,\n ProgressBarComponentModule,\n UiTranslatePipe,\n PasswordComponent,\n ],\n})\nexport class PasswordComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"testgorilla-tgo-ui-components-password-criteria.mjs","sources":["../../../components/password-criteria/password.component.ts","../../../components/password-criteria/password.component.html","../../../components/password-criteria/password.component.module.ts","../../../components/password-criteria/testgorilla-tgo-ui-components-password-criteria.ts"],"sourcesContent":["import { NgClass, AsyncPipe } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n DestroyRef,\n ElementRef,\n EventEmitter,\n forwardRef,\n inject,\n Input,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n ControlValueAccessor,\n FormControl,\n NG_VALUE_ACCESSOR,\n Validators,\n FormsModule,\n ReactiveFormsModule,\n} from '@angular/forms';\n\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { FieldComponent } from '@testgorilla/tgo-ui/components/field';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ProgressBarComponentModule } from '@testgorilla/tgo-ui/components/progress-bar';\n\n@Component({\n selector: 'ui-password-criteria',\n templateUrl: './password.component.html',\n styleUrls: ['./password.component.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => PasswordComponent),\n multi: true,\n },\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n FieldComponent,\n FormsModule,\n ReactiveFormsModule,\n ProgressBarComponentModule,\n NgClass,\n IconComponentModule,\n AsyncPipe,\n UiTranslatePipe,\n ],\n})\nexport class PasswordComponent implements ControlValueAccessor {\n /**\n * Show criteria for password. Defaults true\n *\n * @type {boolean}\n * @memberof PasswordComponent\n */\n @Input() showCriteria = true;\n\n /**\n * Password is required or not\n *\n * @type {boolean}\n * @memberof PasswordComponent\n */\n @Input() required = false;\n\n @Output() passwordChange = new EventEmitter<string>();\n\n @Output() allCriteriaPassed = new EventEmitter<boolean>();\n\n @ViewChild('requiredCriteria') requiredCriteria: ElementRef<HTMLElement>;\n\n // eslint-disable-next-line @typescript-eslint/unbound-method -- Validators.required is a static Angular validator with no `this` binding\n protected formControl = new FormControl('', Validators.required);\n protected criteriaPassed: { [key: string]: boolean } = {};\n protected showError: boolean;\n protected progressValue: number;\n protected criteria: { translateKey: string; key: string }[] = [\n { translateKey: 'PASSWORD.LOWERCASE', key: 'hasLowercase' },\n { translateKey: 'PASSWORD.UPPERCASE', key: 'hasUppercase' },\n { translateKey: 'PASSWORD.NUMBER', key: 'hasNumber' },\n { translateKey: 'PASSWORD.SPECIAL_CHARACTER', key: 'hasSpecialChar' },\n { translateKey: 'PASSWORD.CHARACTERS', key: 'hasMinLength' },\n ];\n\n constructor(private readonly destroyRef: DestroyRef) {\n this.formControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {\n this.checkCriteria();\n });\n }\n\n checkCriteria(): void {\n const password = this.formControl.value ?? '';\n this.criteriaPassed = {\n hasLowercase: /^(?=.*?[a-z])/.test(password),\n hasUppercase: /^(?=.*?[A-Z])/.test(password),\n hasNumber: /^(?=.*?[0-9])/.test(password),\n hasSpecialChar: /^(?=.*?[\" !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~])/.test(password),\n hasMinLength: password.length >= 12,\n };\n\n const passedCount = this.countPassed();\n this.progressValue = Math.min(Math.max(passedCount * (100 / Object.keys(this.criteriaPassed).length), 1), 100);\n this.passwordChange.emit(password);\n this.allCriteriaPassed.emit(passedCount === Object.keys(this.criteriaPassed).length);\n this.onChange(password);\n }\n\n countPassed(): number {\n let count = 0;\n for (const key in this.criteriaPassed) {\n if (Object.prototype.hasOwnProperty.call(this.criteriaPassed, key) && this.criteriaPassed[key]) {\n count++;\n }\n }\n return count;\n }\n onChange = (_v: string) => {};\n onTouch = () => {};\n\n private readonly cdr = inject(ChangeDetectorRef);\n\n writeValue(obj?: string | null): void {\n this.formControl.setValue(obj ?? null);\n // setValue() re-evaluates the criteria fields the template renders; the\n // forms API calls this from outside the component's own change detection.\n this.cdr.markForCheck();\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouch = fn;\n }\n\n get allRequirementsMet(): boolean {\n return this.countPassed() === Object.keys(this.criteriaPassed).length && Boolean(this.countPassed());\n }\n}\n","<div class=\"password-criteria-container\">\n <ui-field\n [applicationTheme]=\"'dark'\"\n [formControl]=\"formControl\"\n [ariaLabel]=\"requiredCriteria?.nativeElement?.innerText ?? ''\"\n [type]=\"'password'\"\n [placeholder]=\"('PASSWORD.PASSWORD_PLACEHOLDER' | uiTranslate | async) + (required ? ' *' : '')\"\n (keydown.enter)=\"showError = true\"\n (focusout)=\"showError = true\"\n ></ui-field>\n\n @if (showCriteria) {\n <div class=\"criteria-container\" #requiredCriteria>\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"'dark'\"\n ></ui-progress-bar>\n </div>\n @if (allRequirementsMet) {\n <span style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">{{\n 'FIELD.ALL_PASSWORD_REQ_PASSED' | uiTranslate | async\n }}</span>\n }\n @for (criterion of criteria; track criterion) {\n <div\n class=\"criterion\"\n [attr.aria-live]=\"!allRequirementsMet ? 'polite' : ''\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] && showError ? 'Info-in-line' : 'Check-round-in-line'\"\n applicationTheme=\"dark\"\n ></ui-icon>\n <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n <span style=\"position: absolute; left: -9999px\">{{\n (criteriaPassed[criterion.key] ? 'COMMON.PASSED' : 'COMMON.FAILED') | uiTranslate | async\n }}</span>\n </div>\n }\n </div>\n }\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { FieldComponentModule } from '@testgorilla/tgo-ui/components/field';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ProgressBarComponentModule } from '@testgorilla/tgo-ui/components/progress-bar';\n\nimport { PasswordComponent } from './password.component';\n\n@NgModule({\n exports: [PasswordComponent],\n imports: [\n CommonModule,\n FieldComponentModule,\n ReactiveFormsModule,\n IconComponentModule,\n ProgressBarComponentModule,\n UiTranslatePipe,\n PasswordComponent,\n ],\n})\nexport class PasswordComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
@@ -83,6 +83,9 @@ class PhoneInputComponent {
83
83
  get placeholder() {
84
84
  return this.internalPlaceholder;
85
85
  }
86
+ get countrySelectTestId() {
87
+ return this.testId ? `${this.testId}-country` : null;
88
+ }
86
89
  /**
87
90
  * Input field errors
88
91
  *
@@ -106,6 +109,9 @@ class PhoneInputComponent {
106
109
  return this.errorMatcher.isErrorState(this.ngControl?.control, null);
107
110
  }
108
111
  constructor() {
112
+ this.testId = null;
113
+ // Empty by default: the library ships no copy for it, so apps pass an already-translated string.
114
+ this.countryAriaLabel = '';
109
115
  /**
110
116
  *
111
117
  * Defines the application theme
@@ -298,12 +304,12 @@ class PhoneInputComponent {
298
304
  ev.stopPropagation();
299
305
  }
300
306
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PhoneInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
301
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PhoneInputComponent, isStandalone: true, selector: "ui-phone-input", inputs: { value: "value", countryList: "countryList", placeholder: "placeholder", disabled: "disabled", required: "required", applicationTheme: "applicationTheme", fullWidth: "fullWidth", errors: "errors", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors" }, host: { properties: { "attr.disabled": "this.disabled", "attr.theme": "this.applicationTheme", "id": "this.id", "class.floated": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, providers: [
307
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PhoneInputComponent, isStandalone: true, selector: "ui-phone-input", inputs: { value: "value", countryList: "countryList", placeholder: "placeholder", disabled: "disabled", required: "required", testId: "testId", countryAriaLabel: "countryAriaLabel", applicationTheme: "applicationTheme", fullWidth: "fullWidth", errors: "errors", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors" }, host: { properties: { "attr.disabled": "this.disabled", "attr.theme": "this.applicationTheme", "id": "this.id", "class.floated": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, providers: [
302
308
  {
303
309
  provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
304
310
  useValue: { overlayPanelClass: 'phone-number-autocomplete' },
305
311
  },
306
- ], viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true, read: ElementRef, static: true }, { propertyName: "select", first: true, predicate: MatSelect, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<mat-form-field\n [formGroup]=\"form\"\n appearance=\"outline\"\n [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n [ngClass]=\"{ disabled: form.disabled || disabled, 'full-width': fullWidth }\"\n>\n <mat-label\n >{{ 'COMMON.PHONE_NUMBER' | uiTranslate | async }}\n @if (required) {\n <span>*</span>\n }\n </mat-label>\n\n <div matPrefix class=\"country\">\n @if (selectedCountry) {\n <button class=\"selected-flag\" matPrefix>\n <img\n [height]=\"20\"\n [width]=\"24\"\n [attr.src]=\"countryFlagSrc + selectedCountry?.alpha2Code?.toLowerCase() + '.svg'\"\n [alt]=\"'Country flag ' + selectedCountry?.alpha2Code?.toLowerCase()\"\n />\n </button>\n }\n <mat-select\n #select\n (selectionChange)=\"onOptionsSelected($event.value)\"\n [value]=\"selectedCountry\"\n [disableOptionCentering]=\"true\"\n [panelClass]=\"'phone-number-select' + ' ' + applicationTheme\"\n [ngClass]=\"{ opened: select.panelOpen }\"\n >\n <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search\n [formControl]=\"selectFilterCtrl\"\n ngDefaultControl\n placeholderLabel=\"\"\n noEntriesFoundLabel=\"\"\n >\n <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n </ngx-mat-select-search>\n </mat-option>\n @for (country of countries$ | async; track filteredCountryTrackByMethod($index, country)) {\n <mat-option [value]=\"country\">\n <div class=\"country-option\">\n <img\n [height]=\"20\"\n [width]=\"24\"\n [attr.src]=\"countryFlagSrc + country?.alpha2Code?.toLowerCase()! + '.svg'\"\n [alt]=\"'Country flag ' + country?.alpha2Code?.toLowerCase()!\"\n />\n <small>{{ $any([country?.name, '(' + country?.callingCode + ')']) | joinStrings: ' ' }}</small>\n </div>\n </mat-option>\n }\n </mat-select>\n </div>\n\n <input\n data-testid=\"phone-input-number\"\n (input)=\"onInput(form.get('phone_number')!.value)\"\n formControlName=\"phone_number\"\n (click)=\"disableClick($event)\"\n [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n [required]=\"required\"\n matInput\n type=\"text\"\n />\n\n @if (errorsLength || (ngControl?.errors | hasValidationError)) {\n <mat-hint class=\"error\">\n @if (errorsLength) {\n @for (error of _errors; track trackByFn($index, error)) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n }\n }\n @if (ngControl && !hideBuiltInErrors) {\n <ui-validation-error\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : ('COMMON.PHONE_NUMBER' | uiTranslate | async)\"\n ></ui-validation-error>\n }\n </mat-hint>\n }\n</mat-form-field>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;align-items:center}:host .selected-flag{display:flex;position:relative;margin-right:1rem;align-items:center}:host mat-spinner{padding:0 20px}:host .country{cursor:pointer!important;display:flex;align-items:center;margin:-8px 12px 0 16px}:host .country button{margin:0 8px 0 0;background:transparent;border:unset;padding:0}:host ::ng-deep .mat-mdc-select-trigger{display:flex;gap:8px}:host mat-select{flex:0}:host .mat-mdc-form-field.full-width{width:100%}:host .mat-mdc-form-field{min-width:320px}:host .mat-mdc-form-field.disabled ::ng-deep *{border-color:#d3d3d3;color:#d3d3d3;pointer-events:none}:host .mat-mdc-form-field.disabled ::ng-deep * .mat-mdc-select-arrow{opacity:.1}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17.025L6 11.025L7.4 9.625L12 14.225L16.6 9.625L18 11.025L12 17.025Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow svg,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow svg{display:none}:host[theme=dark] mat-select.opened ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select.opened ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 9.6249L18 15.6249L16.6 17.0249L12 12.4249L7.4 17.0249L6 15.6249L12 9.6249Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}::ng-deep .mat-form-field-appearance-outline mat-select .mat-select-arrow-wrapper{transform:none}::ng-deep .mat-select-panel.phone-number-select{margin-top:36px;margin-left:45px}::ng-deep .mat-select-search-inner{box-shadow:none!important;height:48px;background-color:#fff!important;border-bottom:none!important}::ng-deep .mat-select-search-inner .mat-select-search-inner-row{width:100%}::ng-deep .mat-select-search-inner button.mat-select-search-clear{right:35px}::ng-deep .mat-select-search-inner button.mat-select-search-clear mat-icon{font-size:20px}@media screen and (min-width:599px){::ng-deep .mat-select-panel.phone-number-select{margin-left:-33px;min-width:510px}::ng-deep .mat-select-search-inner{min-width:calc(100% + 33px)!important}}ngx-mat-select-search ::ng-deep button .mat-mdc-button-persistent-ripple,ngx-mat-select-search ::ng-deep button .mat-ripple,ngx-mat-select-search ::ng-deep button .mat-mdc-button-ripple{display:none}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: 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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: MatSelectSearchClearDirective, selector: "[ngxMatSelectSearchClear]" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "customErrors"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }, { kind: "pipe", type: JoinStringsPipe, name: "joinStrings" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
312
+ ], viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true, read: ElementRef, static: true }, { propertyName: "select", first: true, predicate: MatSelect, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<mat-form-field\n [formGroup]=\"form\"\n appearance=\"outline\"\n [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n [ngClass]=\"{ disabled: form.disabled || disabled, 'full-width': fullWidth }\"\n>\n <mat-label\n >{{ 'COMMON.PHONE_NUMBER' | uiTranslate | async }}\n @if (required) {\n <span>*</span>\n }\n </mat-label>\n\n <div matPrefix class=\"country\">\n @if (selectedCountry) {\n <button class=\"selected-flag\" matPrefix type=\"button\" tabindex=\"-1\" aria-hidden=\"true\">\n <img\n [height]=\"20\"\n [width]=\"24\"\n [attr.src]=\"countryFlagSrc + selectedCountry?.alpha2Code?.toLowerCase() + '.svg'\"\n [alt]=\"'Country flag ' + selectedCountry?.alpha2Code?.toLowerCase()\"\n />\n </button>\n }\n <mat-select\n #select\n (selectionChange)=\"onOptionsSelected($event.value)\"\n [value]=\"selectedCountry\"\n [disableOptionCentering]=\"true\"\n [panelClass]=\"'phone-number-select' + ' ' + applicationTheme\"\n [ngClass]=\"{ opened: select.panelOpen }\"\n [aria-label]=\"countryAriaLabel\"\n [attr.data-testid]=\"countrySelectTestId\"\n >\n <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search\n [formControl]=\"selectFilterCtrl\"\n ngDefaultControl\n placeholderLabel=\"\"\n noEntriesFoundLabel=\"\"\n >\n <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n </ngx-mat-select-search>\n </mat-option>\n @for (country of countries$ | async; track filteredCountryTrackByMethod($index, country)) {\n <mat-option [value]=\"country\">\n <div class=\"country-option\">\n <img\n [height]=\"20\"\n [width]=\"24\"\n [attr.src]=\"countryFlagSrc + country?.alpha2Code?.toLowerCase()! + '.svg'\"\n [alt]=\"'Country flag ' + country?.alpha2Code?.toLowerCase()!\"\n />\n <small>{{ $any([country?.name, '(' + country?.callingCode + ')']) | joinStrings: ' ' }}</small>\n </div>\n </mat-option>\n }\n </mat-select>\n </div>\n\n <input\n [attr.data-testid]=\"testId ?? 'phone-input-number'\"\n (input)=\"onInput(form.get('phone_number')!.value)\"\n formControlName=\"phone_number\"\n (click)=\"disableClick($event)\"\n [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n [required]=\"required\"\n matInput\n type=\"text\"\n />\n\n @if (errorsLength || (ngControl?.errors | hasValidationError)) {\n <mat-hint class=\"error\">\n @if (errorsLength) {\n @for (error of _errors; track trackByFn($index, error)) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n }\n }\n @if (ngControl && !hideBuiltInErrors) {\n <ui-validation-error\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : ('COMMON.PHONE_NUMBER' | uiTranslate | async)\"\n ></ui-validation-error>\n }\n </mat-hint>\n }\n</mat-form-field>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;align-items:center}:host .selected-flag{display:flex;position:relative;margin-right:1rem;align-items:center}:host mat-spinner{padding:0 20px}:host .country{cursor:pointer!important;display:flex;align-items:center;margin:-8px 12px 0 16px}:host .country button{margin:0 8px 0 0;background:transparent;border:unset;padding:0}:host ::ng-deep .mat-mdc-select-trigger{display:flex;gap:8px}:host mat-select{flex:0}:host .mat-mdc-form-field.full-width{width:100%}:host .mat-mdc-form-field{min-width:320px}:host .mat-mdc-form-field.disabled ::ng-deep *{border-color:#d3d3d3;color:#d3d3d3;pointer-events:none}:host .mat-mdc-form-field.disabled ::ng-deep * .mat-mdc-select-arrow{opacity:.1}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17.025L6 11.025L7.4 9.625L12 14.225L16.6 9.625L18 11.025L12 17.025Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow svg,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow svg{display:none}:host[theme=dark] mat-select.opened ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select.opened ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 9.6249L18 15.6249L16.6 17.0249L12 12.4249L7.4 17.0249L6 15.6249L12 9.6249Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}::ng-deep .mat-form-field-appearance-outline mat-select .mat-select-arrow-wrapper{transform:none}::ng-deep .mat-select-panel.phone-number-select{margin-top:36px;margin-left:45px}::ng-deep .mat-select-search-inner{box-shadow:none!important;height:48px;background-color:#fff!important;border-bottom:none!important}::ng-deep .mat-select-search-inner .mat-select-search-inner-row{width:100%}::ng-deep .mat-select-search-inner button.mat-select-search-clear{right:35px}::ng-deep .mat-select-search-inner button.mat-select-search-clear mat-icon{font-size:20px}@media screen and (min-width:599px){::ng-deep .mat-select-panel.phone-number-select{margin-left:-33px;min-width:510px}::ng-deep .mat-select-search-inner{min-width:calc(100% + 33px)!important}}ngx-mat-select-search ::ng-deep button .mat-mdc-button-persistent-ripple,ngx-mat-select-search ::ng-deep button .mat-ripple,ngx-mat-select-search ::ng-deep button .mat-mdc-button-ripple{display:none}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: 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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: MatSelectSearchClearDirective, selector: "[ngxMatSelectSearchClear]" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "customErrors"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }, { kind: "pipe", type: JoinStringsPipe, name: "joinStrings" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
307
313
  }
308
314
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PhoneInputComponent, decorators: [{
309
315
  type: Component,
@@ -333,7 +339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
333
339
  UiTranslatePipe,
334
340
  HasValidationErrorPipe,
335
341
  JoinStringsPipe,
336
- ], template: "<mat-form-field\n [formGroup]=\"form\"\n appearance=\"outline\"\n [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n [ngClass]=\"{ disabled: form.disabled || disabled, 'full-width': fullWidth }\"\n>\n <mat-label\n >{{ 'COMMON.PHONE_NUMBER' | uiTranslate | async }}\n @if (required) {\n <span>*</span>\n }\n </mat-label>\n\n <div matPrefix class=\"country\">\n @if (selectedCountry) {\n <button class=\"selected-flag\" matPrefix>\n <img\n [height]=\"20\"\n [width]=\"24\"\n [attr.src]=\"countryFlagSrc + selectedCountry?.alpha2Code?.toLowerCase() + '.svg'\"\n [alt]=\"'Country flag ' + selectedCountry?.alpha2Code?.toLowerCase()\"\n />\n </button>\n }\n <mat-select\n #select\n (selectionChange)=\"onOptionsSelected($event.value)\"\n [value]=\"selectedCountry\"\n [disableOptionCentering]=\"true\"\n [panelClass]=\"'phone-number-select' + ' ' + applicationTheme\"\n [ngClass]=\"{ opened: select.panelOpen }\"\n >\n <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search\n [formControl]=\"selectFilterCtrl\"\n ngDefaultControl\n placeholderLabel=\"\"\n noEntriesFoundLabel=\"\"\n >\n <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n </ngx-mat-select-search>\n </mat-option>\n @for (country of countries$ | async; track filteredCountryTrackByMethod($index, country)) {\n <mat-option [value]=\"country\">\n <div class=\"country-option\">\n <img\n [height]=\"20\"\n [width]=\"24\"\n [attr.src]=\"countryFlagSrc + country?.alpha2Code?.toLowerCase()! + '.svg'\"\n [alt]=\"'Country flag ' + country?.alpha2Code?.toLowerCase()!\"\n />\n <small>{{ $any([country?.name, '(' + country?.callingCode + ')']) | joinStrings: ' ' }}</small>\n </div>\n </mat-option>\n }\n </mat-select>\n </div>\n\n <input\n data-testid=\"phone-input-number\"\n (input)=\"onInput(form.get('phone_number')!.value)\"\n formControlName=\"phone_number\"\n (click)=\"disableClick($event)\"\n [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n [required]=\"required\"\n matInput\n type=\"text\"\n />\n\n @if (errorsLength || (ngControl?.errors | hasValidationError)) {\n <mat-hint class=\"error\">\n @if (errorsLength) {\n @for (error of _errors; track trackByFn($index, error)) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n }\n }\n @if (ngControl && !hideBuiltInErrors) {\n <ui-validation-error\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : ('COMMON.PHONE_NUMBER' | uiTranslate | async)\"\n ></ui-validation-error>\n }\n </mat-hint>\n }\n</mat-form-field>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;align-items:center}:host .selected-flag{display:flex;position:relative;margin-right:1rem;align-items:center}:host mat-spinner{padding:0 20px}:host .country{cursor:pointer!important;display:flex;align-items:center;margin:-8px 12px 0 16px}:host .country button{margin:0 8px 0 0;background:transparent;border:unset;padding:0}:host ::ng-deep .mat-mdc-select-trigger{display:flex;gap:8px}:host mat-select{flex:0}:host .mat-mdc-form-field.full-width{width:100%}:host .mat-mdc-form-field{min-width:320px}:host .mat-mdc-form-field.disabled ::ng-deep *{border-color:#d3d3d3;color:#d3d3d3;pointer-events:none}:host .mat-mdc-form-field.disabled ::ng-deep * .mat-mdc-select-arrow{opacity:.1}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17.025L6 11.025L7.4 9.625L12 14.225L16.6 9.625L18 11.025L12 17.025Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow svg,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow svg{display:none}:host[theme=dark] mat-select.opened ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select.opened ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 9.6249L18 15.6249L16.6 17.0249L12 12.4249L7.4 17.0249L6 15.6249L12 9.6249Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}::ng-deep .mat-form-field-appearance-outline mat-select .mat-select-arrow-wrapper{transform:none}::ng-deep .mat-select-panel.phone-number-select{margin-top:36px;margin-left:45px}::ng-deep .mat-select-search-inner{box-shadow:none!important;height:48px;background-color:#fff!important;border-bottom:none!important}::ng-deep .mat-select-search-inner .mat-select-search-inner-row{width:100%}::ng-deep .mat-select-search-inner button.mat-select-search-clear{right:35px}::ng-deep .mat-select-search-inner button.mat-select-search-clear mat-icon{font-size:20px}@media screen and (min-width:599px){::ng-deep .mat-select-panel.phone-number-select{margin-left:-33px;min-width:510px}::ng-deep .mat-select-search-inner{min-width:calc(100% + 33px)!important}}ngx-mat-select-search ::ng-deep button .mat-mdc-button-persistent-ripple,ngx-mat-select-search ::ng-deep button .mat-ripple,ngx-mat-select-search ::ng-deep button .mat-mdc-button-ripple{display:none}\n"] }]
342
+ ], template: "<mat-form-field\n [formGroup]=\"form\"\n appearance=\"outline\"\n [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n [ngClass]=\"{ disabled: form.disabled || disabled, 'full-width': fullWidth }\"\n>\n <mat-label\n >{{ 'COMMON.PHONE_NUMBER' | uiTranslate | async }}\n @if (required) {\n <span>*</span>\n }\n </mat-label>\n\n <div matPrefix class=\"country\">\n @if (selectedCountry) {\n <button class=\"selected-flag\" matPrefix type=\"button\" tabindex=\"-1\" aria-hidden=\"true\">\n <img\n [height]=\"20\"\n [width]=\"24\"\n [attr.src]=\"countryFlagSrc + selectedCountry?.alpha2Code?.toLowerCase() + '.svg'\"\n [alt]=\"'Country flag ' + selectedCountry?.alpha2Code?.toLowerCase()\"\n />\n </button>\n }\n <mat-select\n #select\n (selectionChange)=\"onOptionsSelected($event.value)\"\n [value]=\"selectedCountry\"\n [disableOptionCentering]=\"true\"\n [panelClass]=\"'phone-number-select' + ' ' + applicationTheme\"\n [ngClass]=\"{ opened: select.panelOpen }\"\n [aria-label]=\"countryAriaLabel\"\n [attr.data-testid]=\"countrySelectTestId\"\n >\n <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search\n [formControl]=\"selectFilterCtrl\"\n ngDefaultControl\n placeholderLabel=\"\"\n noEntriesFoundLabel=\"\"\n >\n <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n </ngx-mat-select-search>\n </mat-option>\n @for (country of countries$ | async; track filteredCountryTrackByMethod($index, country)) {\n <mat-option [value]=\"country\">\n <div class=\"country-option\">\n <img\n [height]=\"20\"\n [width]=\"24\"\n [attr.src]=\"countryFlagSrc + country?.alpha2Code?.toLowerCase()! + '.svg'\"\n [alt]=\"'Country flag ' + country?.alpha2Code?.toLowerCase()!\"\n />\n <small>{{ $any([country?.name, '(' + country?.callingCode + ')']) | joinStrings: ' ' }}</small>\n </div>\n </mat-option>\n }\n </mat-select>\n </div>\n\n <input\n [attr.data-testid]=\"testId ?? 'phone-input-number'\"\n (input)=\"onInput(form.get('phone_number')!.value)\"\n formControlName=\"phone_number\"\n (click)=\"disableClick($event)\"\n [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n [required]=\"required\"\n matInput\n type=\"text\"\n />\n\n @if (errorsLength || (ngControl?.errors | hasValidationError)) {\n <mat-hint class=\"error\">\n @if (errorsLength) {\n @for (error of _errors; track trackByFn($index, error)) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n }\n }\n @if (ngControl && !hideBuiltInErrors) {\n <ui-validation-error\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : ('COMMON.PHONE_NUMBER' | uiTranslate | async)\"\n ></ui-validation-error>\n }\n </mat-hint>\n }\n</mat-form-field>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;align-items:center}:host .selected-flag{display:flex;position:relative;margin-right:1rem;align-items:center}:host mat-spinner{padding:0 20px}:host .country{cursor:pointer!important;display:flex;align-items:center;margin:-8px 12px 0 16px}:host .country button{margin:0 8px 0 0;background:transparent;border:unset;padding:0}:host ::ng-deep .mat-mdc-select-trigger{display:flex;gap:8px}:host mat-select{flex:0}:host .mat-mdc-form-field.full-width{width:100%}:host .mat-mdc-form-field{min-width:320px}:host .mat-mdc-form-field.disabled ::ng-deep *{border-color:#d3d3d3;color:#d3d3d3;pointer-events:none}:host .mat-mdc-form-field.disabled ::ng-deep * .mat-mdc-select-arrow{opacity:.1}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17.025L6 11.025L7.4 9.625L12 14.225L16.6 9.625L18 11.025L12 17.025Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}:host[theme=dark] mat-select ::ng-deep .mat-mdc-select-arrow svg,:host[theme=light] mat-select ::ng-deep .mat-mdc-select-arrow svg{display:none}:host[theme=dark] mat-select.opened ::ng-deep .mat-mdc-select-arrow,:host[theme=light] mat-select.opened ::ng-deep .mat-mdc-select-arrow{background:url(\"data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 9.6249L18 15.6249L16.6 17.0249L12 12.4249L7.4 17.0249L6 15.6249L12 9.6249Z' fill='%23333333'/%3E%3C/svg%3E\");background-size:cover;width:16px;height:16px}::ng-deep .mat-form-field-appearance-outline mat-select .mat-select-arrow-wrapper{transform:none}::ng-deep .mat-select-panel.phone-number-select{margin-top:36px;margin-left:45px}::ng-deep .mat-select-search-inner{box-shadow:none!important;height:48px;background-color:#fff!important;border-bottom:none!important}::ng-deep .mat-select-search-inner .mat-select-search-inner-row{width:100%}::ng-deep .mat-select-search-inner button.mat-select-search-clear{right:35px}::ng-deep .mat-select-search-inner button.mat-select-search-clear mat-icon{font-size:20px}@media screen and (min-width:599px){::ng-deep .mat-select-panel.phone-number-select{margin-left:-33px;min-width:510px}::ng-deep .mat-select-search-inner{min-width:calc(100% + 33px)!important}}ngx-mat-select-search ::ng-deep button .mat-mdc-button-persistent-ripple,ngx-mat-select-search ::ng-deep button .mat-ripple,ngx-mat-select-search ::ng-deep button .mat-mdc-button-ripple{display:none}\n"] }]
337
343
  }], ctorParameters: () => [], propDecorators: { value: [{
338
344
  type: Input
339
345
  }], countryList: [{
@@ -347,6 +353,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
347
353
  type: Input
348
354
  }], required: [{
349
355
  type: Input
356
+ }], testId: [{
357
+ type: Input
358
+ }], countryAriaLabel: [{
359
+ type: Input
350
360
  }], applicationTheme: [{
351
361
  type: HostBinding,
352
362
  args: ['attr.theme']
@@ -1 +1 @@
1
- {"version":3,"file":"testgorilla-tgo-ui-components-phone-input.mjs","sources":["../../../components/phone-input/join-strings.pipe.ts","../../../components/phone-input/phone-input.component.ts","../../../components/phone-input/phone-input.component.html","../../../components/phone-input/phone-input.component.module.ts","../../../components/phone-input/testgorilla-tgo-ui-components-phone-input.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({ name: 'joinStrings' })\nexport class JoinStringsPipe implements PipeTransform {\n transform(value: string[], separator?: string): string {\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- an empty separator falls back to the default separator\n return value.filter(Boolean).join(separator ? separator : ' - ');\n }\n}\n","import { FocusMonitor } from '@angular/cdk/a11y';\nimport { NgClass, NgStyle, AsyncPipe } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n DestroyRef,\n DoCheck,\n ElementRef,\n HostBinding,\n inject,\n Input,\n OnDestroy,\n OnInit,\n ProviderToken,\n ViewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n ControlValueAccessor,\n NgControl,\n UntypedFormBuilder,\n UntypedFormControl,\n UntypedFormGroup,\n FormsModule,\n ReactiveFormsModule,\n} from '@angular/forms';\nimport { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS } from '@angular/material/autocomplete';\nimport { ErrorStateMatcher } from '@angular/material/core';\nimport { MatFormField, MatLabel, MatPrefix, MatHint } from '@angular/material/form-field';\nimport { MatInput } from '@angular/material/input';\nimport { MatSelect, MatSelectTrigger, MatOption } from '@angular/material/select';\nimport { parsePhoneNumber } from 'libphonenumber-js';\nimport { MatSelectSearchComponent, MatSelectSearchClearDirective } from 'ngx-mat-select-search';\nimport {\n BehaviorSubject,\n combineLatest,\n debounceTime,\n delay,\n filter,\n first,\n map,\n Observable,\n startWith,\n Subject,\n take,\n tap,\n} from 'rxjs';\n\nimport { ApplicationTheme, UiTranslatePipe, HasValidationErrorPipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponent } from '@testgorilla/tgo-ui/components/icon';\nimport { ValidationErrorComponent } from '@testgorilla/tgo-ui/components/validation-error';\n\nimport { JoinStringsPipe } from './join-strings.pipe';\nimport { UICountry } from './phone-input.model';\n\n@Component({\n selector: 'ui-phone-input',\n templateUrl: './phone-input.component.html',\n styleUrls: ['./phone-input.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,\n useValue: { overlayPanelClass: 'phone-number-autocomplete' },\n },\n ],\n imports: [\n MatFormField,\n FormsModule,\n ReactiveFormsModule,\n NgClass,\n MatLabel,\n MatPrefix,\n MatSelect,\n MatSelectTrigger,\n MatOption,\n MatSelectSearchComponent,\n IconComponent,\n MatSelectSearchClearDirective,\n MatInput,\n NgStyle,\n MatHint,\n ValidationErrorComponent,\n AsyncPipe,\n UiTranslatePipe,\n HasValidationErrorPipe,\n JoinStringsPipe,\n ],\n})\nexport class PhoneInputComponent implements OnInit, OnDestroy, ControlValueAccessor, DoCheck {\n /**\n * Phone number\n *\n * @type {string}\n * @memberof PhoneInputComponent\n */\n @Input()\n set value(value: string) {\n this.initialValue = this.initialValue || value;\n try {\n // eslint-disable-next-line @typescript-eslint/no-deprecated -- parsePhoneNumber is deprecated by libphonenumber-js (renamed export); swapping the API is behaviour-sensitive and out of scope for this lint pass\n const parsed = parsePhoneNumber(value);\n const formatted = parsed.formatInternational();\n this.selectedCountry = this.getCountryByAlpha2Code(parsed.country as string) ?? this.selectedCountry;\n this.form.patchValue({ phone_number: formatted.replace(this.selectedCountry.callingCode, '') });\n } catch {\n if (value?.length <= 4) {\n this.selectedCountry = this.getCountryByCallingCode(value) ?? this.selectedCountry;\n }\n this.form.patchValue({ phone_number: value?.replace(this.selectedCountry?.callingCode, '') });\n }\n this.stateChanges.next();\n }\n\n get value(): string {\n return this.getNumberWithCountryCode();\n }\n\n /**\n * Country list for select\n *\n * @type {UICountry[]}\n * @memberof PhoneInputComponent\n */\n @Input() set countryList(countryList: UICountry[]) {\n this.loadCountries$.next(countryList);\n this.selectedCountry = this.selectedCountry ?? countryList[0];\n }\n\n /**\n * Placeholder input\n *\n * @type {text}\n * @memberof PhoneInputComponent\n */\n @Input()\n set placeholder(value: string) {\n this.internalPlaceholder = value;\n this.stateChanges.next();\n }\n\n get placeholder() {\n return this.internalPlaceholder;\n }\n\n /**\n * Determines if input is disabled\n *\n * @type {boolean}\n * @memberof PhoneInputComponent\n */\n @HostBinding('attr.disabled')\n @Input()\n disabled: boolean;\n\n /**\n * Input is required or not\n *\n * @type {boolean}\n * @memberof PhoneInputComponent\n */\n @Input() required: boolean;\n\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof PhoneInputComponent\n */\n @HostBinding('attr.theme')\n @Input()\n applicationTheme: ApplicationTheme = 'light';\n\n /**\n * Indicator of the phone input width\n * @property fullWidth\n * @type {boolean}\n * @memberof PhoneInputComponent\n */\n @Input() fullWidth = false;\n\n _errors: string[];\n /**\n * Input field errors\n *\n * @type {string}\n * @memberof PhoneInputComponent\n */\n @Input() set errors(errors: string[]) {\n if (errors) {\n this._errors = errors?.filter(Boolean) ?? [];\n this.errorsLength = this.setErrorsLength();\n }\n }\n\n /**\n * Hide in build errors for Reactive Forms\n *\n * @type {number}\n * @memberof PhoneInputComponent\n */\n @Input() hideBuiltInErrors = false;\n\n /**\n * Hide label in errors\n *\n * @type {number}\n * @memberof PhoneInputComponent\n */\n @Input() hideLabelInErrors = false;\n\n static nextId = 0;\n\n private readonly countries = new BehaviorSubject<UICountry[]>([]);\n protected countries$ = this.countries.asObservable();\n public ngControl = inject(NgControl, { optional: true, self: true });\n private readonly errorMatcher = inject(ErrorStateMatcher);\n private readonly fb = inject(UntypedFormBuilder);\n private readonly focusMonitor = inject(FocusMonitor);\n private readonly ref = inject(ChangeDetectorRef);\n private readonly defaultAppTheme = inject(\n 'CANOPYUI_DEFAULT_APPLICATION_THEME' as unknown as ProviderToken<ApplicationTheme>,\n {\n optional: true,\n }\n );\n form: UntypedFormGroup = this.fb.group({\n phone_number: new UntypedFormControl(),\n });\n protected controlType = 'phone-number';\n protected userAriaDescribedBy?: string;\n protected loadCountries$ = new BehaviorSubject<UICountry[]>([]);\n protected countryCode = new BehaviorSubject<string>('US');\n protected stateChanges = new Subject<void>();\n protected focused: boolean;\n protected selectFilterCtrl = new UntypedFormControl('');\n protected errorsLength: boolean;\n protected readonly countryFlagSrc = 'assets/svg-country-flags/';\n\n @ViewChild(MatInput, { read: ElementRef, static: true })\n public input: ElementRef<HTMLElement>;\n @ViewChild(MatSelect, { read: ElementRef, static: true })\n public select: ElementRef<HTMLElement>;\n\n @HostBinding()\n id = `phone-number${PhoneInputComponent.nextId++}`;\n\n @HostBinding('class.floated')\n get shouldLabelFloat(): boolean {\n return true;\n }\n\n @HostBinding('attr.aria-describedby') describedBy = '';\n\n get empty(): boolean {\n return Boolean(this.form.value);\n }\n\n get errorState(): boolean {\n return this.errorMatcher.isErrorState(this.ngControl?.control as UntypedFormControl, null);\n }\n\n private initialValue: string;\n private readonly DEFAULT_COUNTRY_CODE = 'US';\n private internalPlaceholder: string;\n protected selectedCountry: UICountry;\n private readonly destroyRef = inject(DestroyRef);\n\n constructor() {\n if (this.ngControl !== null) {\n this.ngControl.valueAccessor = this;\n }\n\n if (this.defaultAppTheme) {\n this.applicationTheme = this.defaultAppTheme;\n }\n }\n\n /**\n * Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors\n * to display validation errors that might happen (e.g. required)\n */\n ngDoCheck(): void {\n if (this.ngControl?.touched || this.ngControl?.errors) {\n this.ref.markForCheck();\n }\n }\n\n ngOnInit(): void {\n this.loadCountries();\n this.preSelectCountry();\n this.subscribeToFocusEvents();\n }\n\n setErrorsLength(): boolean {\n if (this._errors) {\n return this._errors.filter(err => Boolean(err)).length > 0;\n }\n return false;\n }\n\n setDescribedByIds(ids: string[]): void {\n this.userAriaDescribedBy = ids.join(' ');\n }\n\n onChange: (value: string) => void;\n onTouch: () => void;\n\n writeValue(phoneNumber: string): void {\n if (phoneNumber) {\n this.value = phoneNumber;\n }\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouch = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n if (isDisabled) {\n this.form.disable();\n } else {\n this.form.enable();\n }\n this.disabled = isDisabled;\n this.stateChanges.next();\n this.ref.markForCheck();\n }\n\n ngOnDestroy(): void {\n this.focusMonitor.stopMonitoring(this.input);\n this.focusMonitor.stopMonitoring(this.select);\n this.stateChanges.complete();\n }\n\n onOptionsSelected(value: UICountry) {\n this.setCountry(value);\n }\n\n onInput(value: string) {\n this.value = (this.selectedCountry?.callingCode ?? '') + value;\n this.onChange(this.value);\n }\n\n filteredCountryTrackByMethod(index: number, el: UICountry): string {\n return el.alpha2Code;\n }\n\n private setCountry(country: UICountry | null): void {\n if (country) {\n this.selectedCountry = country;\n }\n this.value = this.getNumberWithCountryCode();\n this.onChange(this.value);\n }\n\n private getNumberWithCountryCode() {\n const nationalNumber = (this.form.value as { phone_number?: string } | null)?.phone_number;\n return nationalNumber ? (this.selectedCountry?.callingCode ?? '') + nationalNumber : '';\n }\n\n private subscribeToFocusEvents() {\n const selectAndInputFocus$ = combineLatest([\n this.focusMonitor.monitor(this.select),\n this.focusMonitor.monitor(this.input),\n ]).pipe(debounceTime(10));\n\n selectAndInputFocus$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(([selectFocus, inputFocus]) => {\n this.focused = Boolean(selectFocus) || Boolean(inputFocus);\n this.stateChanges.next();\n });\n\n selectAndInputFocus$.pipe(take(1)).subscribe(() => {\n this.onTouch();\n });\n }\n\n private preSelectCountry() {\n this.setDisabledState(true);\n combineLatest([\n this.countries$.pipe(\n filter(countries => countries.length > 0),\n first()\n ),\n this.countryCode,\n ])\n .pipe(\n map(([_countries, selectedCountry]) => {\n if (!this.initialValue) {\n const country =\n this.getCountryByAlpha2Code(selectedCountry) ?? this.getCountryByAlpha2Code(this.DEFAULT_COUNTRY_CODE);\n this.setCountry(country as UICountry);\n } else {\n this.value = this.initialValue;\n }\n\n this.setDisabledState(false);\n this.ref.markForCheck();\n }),\n takeUntilDestroyed(this.destroyRef)\n )\n .subscribe();\n }\n\n private getCountryByAlpha2Code(alpha2Code: string) {\n return this.countries.value.find(country => country.alpha2Code === alpha2Code);\n }\n\n private getCountryByCallingCode(callingCode: string) {\n return this.countries.value.find(country => country.callingCode === callingCode);\n }\n\n private loadCountries(): void {\n const searchText$: Observable<string> = this.selectFilterCtrl.valueChanges.pipe(debounceTime(100), startWith(''));\n\n combineLatest([this.loadCountries$, searchText$])\n .pipe(\n tap(([countries, searchText]) => {\n const searchTextLowerCase = searchText.toLowerCase();\n const filteredCountries = countries\n .filter(\n option =>\n option.name.toLowerCase().includes(searchTextLowerCase) ||\n option.alpha2Code.toLowerCase().includes(searchTextLowerCase) ||\n option.callingCode.toLowerCase().includes(searchTextLowerCase)\n )\n .sort((optionA, optionB) => (optionB.name.startsWith(searchText) ? 1 : -1));\n this.countries.next(filteredCountries);\n }),\n delay(1),\n tap(() => {\n const countryFound = this.getCountryByAlpha2Code(this.selectedCountry?.alpha2Code);\n this.selectedCountry = countryFound ?? this.selectedCountry;\n this.ref.markForCheck();\n }),\n takeUntilDestroyed(this.destroyRef)\n )\n .subscribe();\n }\n\n disableClick(ev: Event) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n\n trackByFn = (index: number, value: string) => value;\n}\n","<mat-form-field\n [formGroup]=\"form\"\n appearance=\"outline\"\n [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n [ngClass]=\"{ disabled: form.disabled || disabled, 'full-width': fullWidth }\"\n>\n <mat-label\n >{{ 'COMMON.PHONE_NUMBER' | uiTranslate | async }}\n @if (required) {\n <span>*</span>\n }\n </mat-label>\n\n <div matPrefix class=\"country\">\n @if (selectedCountry) {\n <button class=\"selected-flag\" matPrefix>\n <img\n [height]=\"20\"\n [width]=\"24\"\n [attr.src]=\"countryFlagSrc + selectedCountry?.alpha2Code?.toLowerCase() + '.svg'\"\n [alt]=\"'Country flag ' + selectedCountry?.alpha2Code?.toLowerCase()\"\n />\n </button>\n }\n <mat-select\n #select\n (selectionChange)=\"onOptionsSelected($event.value)\"\n [value]=\"selectedCountry\"\n [disableOptionCentering]=\"true\"\n [panelClass]=\"'phone-number-select' + ' ' + applicationTheme\"\n [ngClass]=\"{ opened: select.panelOpen }\"\n >\n <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search\n [formControl]=\"selectFilterCtrl\"\n ngDefaultControl\n placeholderLabel=\"\"\n noEntriesFoundLabel=\"\"\n >\n <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n </ngx-mat-select-search>\n </mat-option>\n @for (country of countries$ | async; track filteredCountryTrackByMethod($index, country)) {\n <mat-option [value]=\"country\">\n <div class=\"country-option\">\n <img\n [height]=\"20\"\n [width]=\"24\"\n [attr.src]=\"countryFlagSrc + country?.alpha2Code?.toLowerCase()! + '.svg'\"\n [alt]=\"'Country flag ' + country?.alpha2Code?.toLowerCase()!\"\n />\n <small>{{ $any([country?.name, '(' + country?.callingCode + ')']) | joinStrings: ' ' }}</small>\n </div>\n </mat-option>\n }\n </mat-select>\n </div>\n\n <input\n data-testid=\"phone-input-number\"\n (input)=\"onInput(form.get('phone_number')!.value)\"\n formControlName=\"phone_number\"\n (click)=\"disableClick($event)\"\n [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n [required]=\"required\"\n matInput\n type=\"text\"\n />\n\n @if (errorsLength || (ngControl?.errors | hasValidationError)) {\n <mat-hint class=\"error\">\n @if (errorsLength) {\n @for (error of _errors; track trackByFn($index, error)) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n }\n }\n @if (ngControl && !hideBuiltInErrors) {\n <ui-validation-error\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : ('COMMON.PHONE_NUMBER' | uiTranslate | async)\"\n ></ui-validation-error>\n }\n </mat-hint>\n }\n</mat-form-field>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\nimport { MatSelectModule } from '@angular/material/select';\nimport { NgxMatSelectSearchModule } from 'ngx-mat-select-search';\n\nimport { UiTranslatePipe, HasValidationErrorPipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { SpinnerComponentModule } from '@testgorilla/tgo-ui/components/spinner';\nimport { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';\n\nimport { JoinStringsPipe } from './join-strings.pipe';\nimport { PhoneInputComponent } from './phone-input.component';\n\n@NgModule({\n exports: [PhoneInputComponent],\n imports: [\n CommonModule,\n MatProgressSpinnerModule,\n ReactiveFormsModule,\n MatSelectModule,\n MatIconModule,\n MatInputModule,\n NgxMatSelectSearchModule,\n IconComponentModule,\n SpinnerComponentModule,\n UiTranslatePipe,\n ValidationErrorModule,\n HasValidationErrorPipe,\n PhoneInputComponent,\n JoinStringsPipe,\n ],\n})\nexport class PhoneInputComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"testgorilla-tgo-ui-components-phone-input.mjs","sources":["../../../components/phone-input/join-strings.pipe.ts","../../../components/phone-input/phone-input.component.ts","../../../components/phone-input/phone-input.component.html","../../../components/phone-input/phone-input.component.module.ts","../../../components/phone-input/testgorilla-tgo-ui-components-phone-input.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({ name: 'joinStrings' })\nexport class JoinStringsPipe implements PipeTransform {\n transform(value: string[], separator?: string): string {\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- an empty separator falls back to the default separator\n return value.filter(Boolean).join(separator ? separator : ' - ');\n }\n}\n","import { FocusMonitor } from '@angular/cdk/a11y';\nimport { NgClass, NgStyle, AsyncPipe } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n DestroyRef,\n DoCheck,\n ElementRef,\n HostBinding,\n inject,\n Input,\n OnDestroy,\n OnInit,\n ProviderToken,\n ViewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n ControlValueAccessor,\n NgControl,\n UntypedFormBuilder,\n UntypedFormControl,\n UntypedFormGroup,\n FormsModule,\n ReactiveFormsModule,\n} from '@angular/forms';\nimport { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS } from '@angular/material/autocomplete';\nimport { ErrorStateMatcher } from '@angular/material/core';\nimport { MatFormField, MatLabel, MatPrefix, MatHint } from '@angular/material/form-field';\nimport { MatInput } from '@angular/material/input';\nimport { MatSelect, MatSelectTrigger, MatOption } from '@angular/material/select';\nimport { parsePhoneNumber } from 'libphonenumber-js';\nimport { MatSelectSearchComponent, MatSelectSearchClearDirective } from 'ngx-mat-select-search';\nimport {\n BehaviorSubject,\n combineLatest,\n debounceTime,\n delay,\n filter,\n first,\n map,\n Observable,\n startWith,\n Subject,\n take,\n tap,\n} from 'rxjs';\n\nimport { ApplicationTheme, UiTranslatePipe, HasValidationErrorPipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponent } from '@testgorilla/tgo-ui/components/icon';\nimport { ValidationErrorComponent } from '@testgorilla/tgo-ui/components/validation-error';\n\nimport { JoinStringsPipe } from './join-strings.pipe';\nimport { UICountry } from './phone-input.model';\n\n@Component({\n selector: 'ui-phone-input',\n templateUrl: './phone-input.component.html',\n styleUrls: ['./phone-input.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,\n useValue: { overlayPanelClass: 'phone-number-autocomplete' },\n },\n ],\n imports: [\n MatFormField,\n FormsModule,\n ReactiveFormsModule,\n NgClass,\n MatLabel,\n MatPrefix,\n MatSelect,\n MatSelectTrigger,\n MatOption,\n MatSelectSearchComponent,\n IconComponent,\n MatSelectSearchClearDirective,\n MatInput,\n NgStyle,\n MatHint,\n ValidationErrorComponent,\n AsyncPipe,\n UiTranslatePipe,\n HasValidationErrorPipe,\n JoinStringsPipe,\n ],\n})\nexport class PhoneInputComponent implements OnInit, OnDestroy, ControlValueAccessor, DoCheck {\n /**\n * Phone number\n *\n * @type {string}\n * @memberof PhoneInputComponent\n */\n @Input()\n set value(value: string) {\n this.initialValue = this.initialValue || value;\n try {\n // eslint-disable-next-line @typescript-eslint/no-deprecated -- parsePhoneNumber is deprecated by libphonenumber-js (renamed export); swapping the API is behaviour-sensitive and out of scope for this lint pass\n const parsed = parsePhoneNumber(value);\n const formatted = parsed.formatInternational();\n this.selectedCountry = this.getCountryByAlpha2Code(parsed.country as string) ?? this.selectedCountry;\n this.form.patchValue({ phone_number: formatted.replace(this.selectedCountry.callingCode, '') });\n } catch {\n if (value?.length <= 4) {\n this.selectedCountry = this.getCountryByCallingCode(value) ?? this.selectedCountry;\n }\n this.form.patchValue({ phone_number: value?.replace(this.selectedCountry?.callingCode, '') });\n }\n this.stateChanges.next();\n }\n\n get value(): string {\n return this.getNumberWithCountryCode();\n }\n\n /**\n * Country list for select\n *\n * @type {UICountry[]}\n * @memberof PhoneInputComponent\n */\n @Input() set countryList(countryList: UICountry[]) {\n this.loadCountries$.next(countryList);\n this.selectedCountry = this.selectedCountry ?? countryList[0];\n }\n\n /**\n * Placeholder input\n *\n * @type {text}\n * @memberof PhoneInputComponent\n */\n @Input()\n set placeholder(value: string) {\n this.internalPlaceholder = value;\n this.stateChanges.next();\n }\n\n get placeholder() {\n return this.internalPlaceholder;\n }\n\n /**\n * Determines if input is disabled\n *\n * @type {boolean}\n * @memberof PhoneInputComponent\n */\n @HostBinding('attr.disabled')\n @Input()\n disabled: boolean;\n\n /**\n * Input is required or not\n *\n * @type {boolean}\n * @memberof PhoneInputComponent\n */\n @Input() required: boolean;\n\n @Input() testId: string | null = null;\n\n // Empty by default: the library ships no copy for it, so apps pass an already-translated string.\n @Input() countryAriaLabel = '';\n\n get countrySelectTestId(): string | null {\n return this.testId ? `${this.testId}-country` : null;\n }\n\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof PhoneInputComponent\n */\n @HostBinding('attr.theme')\n @Input()\n applicationTheme: ApplicationTheme = 'light';\n\n /**\n * Indicator of the phone input width\n * @property fullWidth\n * @type {boolean}\n * @memberof PhoneInputComponent\n */\n @Input() fullWidth = false;\n\n _errors: string[];\n /**\n * Input field errors\n *\n * @type {string}\n * @memberof PhoneInputComponent\n */\n @Input() set errors(errors: string[]) {\n if (errors) {\n this._errors = errors?.filter(Boolean) ?? [];\n this.errorsLength = this.setErrorsLength();\n }\n }\n\n /**\n * Hide in build errors for Reactive Forms\n *\n * @type {number}\n * @memberof PhoneInputComponent\n */\n @Input() hideBuiltInErrors = false;\n\n /**\n * Hide label in errors\n *\n * @type {number}\n * @memberof PhoneInputComponent\n */\n @Input() hideLabelInErrors = false;\n\n static nextId = 0;\n\n private readonly countries = new BehaviorSubject<UICountry[]>([]);\n protected countries$ = this.countries.asObservable();\n public ngControl = inject(NgControl, { optional: true, self: true });\n private readonly errorMatcher = inject(ErrorStateMatcher);\n private readonly fb = inject(UntypedFormBuilder);\n private readonly focusMonitor = inject(FocusMonitor);\n private readonly ref = inject(ChangeDetectorRef);\n private readonly defaultAppTheme = inject(\n 'CANOPYUI_DEFAULT_APPLICATION_THEME' as unknown as ProviderToken<ApplicationTheme>,\n {\n optional: true,\n }\n );\n form: UntypedFormGroup = this.fb.group({\n phone_number: new UntypedFormControl(),\n });\n protected controlType = 'phone-number';\n protected userAriaDescribedBy?: string;\n protected loadCountries$ = new BehaviorSubject<UICountry[]>([]);\n protected countryCode = new BehaviorSubject<string>('US');\n protected stateChanges = new Subject<void>();\n protected focused: boolean;\n protected selectFilterCtrl = new UntypedFormControl('');\n protected errorsLength: boolean;\n protected readonly countryFlagSrc = 'assets/svg-country-flags/';\n\n @ViewChild(MatInput, { read: ElementRef, static: true })\n public input: ElementRef<HTMLElement>;\n @ViewChild(MatSelect, { read: ElementRef, static: true })\n public select: ElementRef<HTMLElement>;\n\n @HostBinding()\n id = `phone-number${PhoneInputComponent.nextId++}`;\n\n @HostBinding('class.floated')\n get shouldLabelFloat(): boolean {\n return true;\n }\n\n @HostBinding('attr.aria-describedby') describedBy = '';\n\n get empty(): boolean {\n return Boolean(this.form.value);\n }\n\n get errorState(): boolean {\n return this.errorMatcher.isErrorState(this.ngControl?.control as UntypedFormControl, null);\n }\n\n private initialValue: string;\n private readonly DEFAULT_COUNTRY_CODE = 'US';\n private internalPlaceholder: string;\n protected selectedCountry: UICountry;\n private readonly destroyRef = inject(DestroyRef);\n\n constructor() {\n if (this.ngControl !== null) {\n this.ngControl.valueAccessor = this;\n }\n\n if (this.defaultAppTheme) {\n this.applicationTheme = this.defaultAppTheme;\n }\n }\n\n /**\n * Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors\n * to display validation errors that might happen (e.g. required)\n */\n ngDoCheck(): void {\n if (this.ngControl?.touched || this.ngControl?.errors) {\n this.ref.markForCheck();\n }\n }\n\n ngOnInit(): void {\n this.loadCountries();\n this.preSelectCountry();\n this.subscribeToFocusEvents();\n }\n\n setErrorsLength(): boolean {\n if (this._errors) {\n return this._errors.filter(err => Boolean(err)).length > 0;\n }\n return false;\n }\n\n setDescribedByIds(ids: string[]): void {\n this.userAriaDescribedBy = ids.join(' ');\n }\n\n onChange: (value: string) => void;\n onTouch: () => void;\n\n writeValue(phoneNumber: string): void {\n if (phoneNumber) {\n this.value = phoneNumber;\n }\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouch = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n if (isDisabled) {\n this.form.disable();\n } else {\n this.form.enable();\n }\n this.disabled = isDisabled;\n this.stateChanges.next();\n this.ref.markForCheck();\n }\n\n ngOnDestroy(): void {\n this.focusMonitor.stopMonitoring(this.input);\n this.focusMonitor.stopMonitoring(this.select);\n this.stateChanges.complete();\n }\n\n onOptionsSelected(value: UICountry) {\n this.setCountry(value);\n }\n\n onInput(value: string) {\n this.value = (this.selectedCountry?.callingCode ?? '') + value;\n this.onChange(this.value);\n }\n\n filteredCountryTrackByMethod(index: number, el: UICountry): string {\n return el.alpha2Code;\n }\n\n private setCountry(country: UICountry | null): void {\n if (country) {\n this.selectedCountry = country;\n }\n this.value = this.getNumberWithCountryCode();\n this.onChange(this.value);\n }\n\n private getNumberWithCountryCode() {\n const nationalNumber = (this.form.value as { phone_number?: string } | null)?.phone_number;\n return nationalNumber ? (this.selectedCountry?.callingCode ?? '') + nationalNumber : '';\n }\n\n private subscribeToFocusEvents() {\n const selectAndInputFocus$ = combineLatest([\n this.focusMonitor.monitor(this.select),\n this.focusMonitor.monitor(this.input),\n ]).pipe(debounceTime(10));\n\n selectAndInputFocus$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(([selectFocus, inputFocus]) => {\n this.focused = Boolean(selectFocus) || Boolean(inputFocus);\n this.stateChanges.next();\n });\n\n selectAndInputFocus$.pipe(take(1)).subscribe(() => {\n this.onTouch();\n });\n }\n\n private preSelectCountry() {\n this.setDisabledState(true);\n combineLatest([\n this.countries$.pipe(\n filter(countries => countries.length > 0),\n first()\n ),\n this.countryCode,\n ])\n .pipe(\n map(([_countries, selectedCountry]) => {\n if (!this.initialValue) {\n const country =\n this.getCountryByAlpha2Code(selectedCountry) ?? this.getCountryByAlpha2Code(this.DEFAULT_COUNTRY_CODE);\n this.setCountry(country as UICountry);\n } else {\n this.value = this.initialValue;\n }\n\n this.setDisabledState(false);\n this.ref.markForCheck();\n }),\n takeUntilDestroyed(this.destroyRef)\n )\n .subscribe();\n }\n\n private getCountryByAlpha2Code(alpha2Code: string) {\n return this.countries.value.find(country => country.alpha2Code === alpha2Code);\n }\n\n private getCountryByCallingCode(callingCode: string) {\n return this.countries.value.find(country => country.callingCode === callingCode);\n }\n\n private loadCountries(): void {\n const searchText$: Observable<string> = this.selectFilterCtrl.valueChanges.pipe(debounceTime(100), startWith(''));\n\n combineLatest([this.loadCountries$, searchText$])\n .pipe(\n tap(([countries, searchText]) => {\n const searchTextLowerCase = searchText.toLowerCase();\n const filteredCountries = countries\n .filter(\n option =>\n option.name.toLowerCase().includes(searchTextLowerCase) ||\n option.alpha2Code.toLowerCase().includes(searchTextLowerCase) ||\n option.callingCode.toLowerCase().includes(searchTextLowerCase)\n )\n .sort((optionA, optionB) => (optionB.name.startsWith(searchText) ? 1 : -1));\n this.countries.next(filteredCountries);\n }),\n delay(1),\n tap(() => {\n const countryFound = this.getCountryByAlpha2Code(this.selectedCountry?.alpha2Code);\n this.selectedCountry = countryFound ?? this.selectedCountry;\n this.ref.markForCheck();\n }),\n takeUntilDestroyed(this.destroyRef)\n )\n .subscribe();\n }\n\n disableClick(ev: Event) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n\n trackByFn = (index: number, value: string) => value;\n}\n","<mat-form-field\n [formGroup]=\"form\"\n appearance=\"outline\"\n [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n [ngClass]=\"{ disabled: form.disabled || disabled, 'full-width': fullWidth }\"\n>\n <mat-label\n >{{ 'COMMON.PHONE_NUMBER' | uiTranslate | async }}\n @if (required) {\n <span>*</span>\n }\n </mat-label>\n\n <div matPrefix class=\"country\">\n @if (selectedCountry) {\n <button class=\"selected-flag\" matPrefix type=\"button\" tabindex=\"-1\" aria-hidden=\"true\">\n <img\n [height]=\"20\"\n [width]=\"24\"\n [attr.src]=\"countryFlagSrc + selectedCountry?.alpha2Code?.toLowerCase() + '.svg'\"\n [alt]=\"'Country flag ' + selectedCountry?.alpha2Code?.toLowerCase()\"\n />\n </button>\n }\n <mat-select\n #select\n (selectionChange)=\"onOptionsSelected($event.value)\"\n [value]=\"selectedCountry\"\n [disableOptionCentering]=\"true\"\n [panelClass]=\"'phone-number-select' + ' ' + applicationTheme\"\n [ngClass]=\"{ opened: select.panelOpen }\"\n [aria-label]=\"countryAriaLabel\"\n [attr.data-testid]=\"countrySelectTestId\"\n >\n <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search\n [formControl]=\"selectFilterCtrl\"\n ngDefaultControl\n placeholderLabel=\"\"\n noEntriesFoundLabel=\"\"\n >\n <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n </ngx-mat-select-search>\n </mat-option>\n @for (country of countries$ | async; track filteredCountryTrackByMethod($index, country)) {\n <mat-option [value]=\"country\">\n <div class=\"country-option\">\n <img\n [height]=\"20\"\n [width]=\"24\"\n [attr.src]=\"countryFlagSrc + country?.alpha2Code?.toLowerCase()! + '.svg'\"\n [alt]=\"'Country flag ' + country?.alpha2Code?.toLowerCase()!\"\n />\n <small>{{ $any([country?.name, '(' + country?.callingCode + ')']) | joinStrings: ' ' }}</small>\n </div>\n </mat-option>\n }\n </mat-select>\n </div>\n\n <input\n [attr.data-testid]=\"testId ?? 'phone-input-number'\"\n (input)=\"onInput(form.get('phone_number')!.value)\"\n formControlName=\"phone_number\"\n (click)=\"disableClick($event)\"\n [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n [required]=\"required\"\n matInput\n type=\"text\"\n />\n\n @if (errorsLength || (ngControl?.errors | hasValidationError)) {\n <mat-hint class=\"error\">\n @if (errorsLength) {\n @for (error of _errors; track trackByFn($index, error)) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n }\n }\n @if (ngControl && !hideBuiltInErrors) {\n <ui-validation-error\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : ('COMMON.PHONE_NUMBER' | uiTranslate | async)\"\n ></ui-validation-error>\n }\n </mat-hint>\n }\n</mat-form-field>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\nimport { MatSelectModule } from '@angular/material/select';\nimport { NgxMatSelectSearchModule } from 'ngx-mat-select-search';\n\nimport { UiTranslatePipe, HasValidationErrorPipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { SpinnerComponentModule } from '@testgorilla/tgo-ui/components/spinner';\nimport { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';\n\nimport { JoinStringsPipe } from './join-strings.pipe';\nimport { PhoneInputComponent } from './phone-input.component';\n\n@NgModule({\n exports: [PhoneInputComponent],\n imports: [\n CommonModule,\n MatProgressSpinnerModule,\n ReactiveFormsModule,\n MatSelectModule,\n MatIconModule,\n MatInputModule,\n NgxMatSelectSearchModule,\n IconComponentModule,\n SpinnerComponentModule,\n UiTranslatePipe,\n ValidationErrorModule,\n HasValidationErrorPipe,\n PhoneInputComponent,\n JoinStringsPipe,\n ],\n})\nexport class PhoneInputComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}