@ng-matero/extensions 11.3.4 → 11.5.1

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 (99) hide show
  1. package/alert/_alert-theme.scss +5 -9
  2. package/alert/alert.component.d.ts +6 -4
  3. package/alert/alert.component.scss +2 -1
  4. package/alert/mtxAlert.metadata.json +1 -1
  5. package/bundles/mtxAlert.umd.js +22 -12
  6. package/bundles/mtxAlert.umd.js.map +1 -1
  7. package/bundles/mtxAlert.umd.min.js +1 -1
  8. package/bundles/mtxAlert.umd.min.js.map +1 -1
  9. package/bundles/{ng-matero-extensions-button.umd.js → mtxButton.umd.js} +1 -1
  10. package/bundles/mtxButton.umd.js.map +1 -0
  11. package/bundles/{ng-matero-extensions-button.umd.min.js → mtxButton.umd.min.js} +1 -1
  12. package/bundles/{ng-matero-extensions-button.umd.min.js.map → mtxButton.umd.min.js.map} +0 -0
  13. package/bundles/mtxCheckboxGroup.umd.js +41 -10
  14. package/bundles/mtxCheckboxGroup.umd.js.map +1 -1
  15. package/bundles/mtxCheckboxGroup.umd.min.js +1 -1
  16. package/bundles/mtxCheckboxGroup.umd.min.js.map +1 -1
  17. package/bundles/mtxColorPicker.umd.js +14 -1
  18. package/bundles/mtxColorPicker.umd.js.map +1 -1
  19. package/bundles/mtxColorPicker.umd.min.js +1 -1
  20. package/bundles/mtxColorPicker.umd.min.js.map +1 -1
  21. package/bundles/mtxFormGroup.umd.js.map +1 -1
  22. package/bundles/mtxFormGroup.umd.min.js.map +1 -1
  23. package/bundles/mtxGrid.umd.js +14 -14
  24. package/bundles/mtxGrid.umd.js.map +1 -1
  25. package/bundles/mtxGrid.umd.min.js.map +1 -1
  26. package/bundles/mtxLoader.umd.js +27 -7
  27. package/bundles/mtxLoader.umd.js.map +1 -1
  28. package/bundles/mtxLoader.umd.min.js +1 -1
  29. package/bundles/mtxLoader.umd.min.js.map +1 -1
  30. package/bundles/mtxPopover.umd.js +177 -129
  31. package/bundles/mtxPopover.umd.js.map +1 -1
  32. package/bundles/mtxPopover.umd.min.js +1 -1
  33. package/bundles/mtxPopover.umd.min.js.map +1 -1
  34. package/bundles/mtxProgress.umd.js +28 -4
  35. package/bundles/mtxProgress.umd.js.map +1 -1
  36. package/bundles/mtxProgress.umd.min.js +1 -1
  37. package/bundles/mtxProgress.umd.min.js.map +1 -1
  38. package/bundles/mtxSelect.umd.js.map +1 -1
  39. package/bundles/mtxSelect.umd.min.js.map +1 -1
  40. package/button/{ng-matero-extensions-button.d.ts → mtxButton.d.ts} +0 -0
  41. package/button/{ng-matero-extensions-button.metadata.json → mtxButton.metadata.json} +0 -0
  42. package/button/package.json +7 -7
  43. package/checkbox-group/checkbox-group.component.d.ts +13 -6
  44. package/checkbox-group/mtxCheckboxGroup.metadata.json +1 -1
  45. package/color-picker/color-picker.component.d.ts +5 -0
  46. package/color-picker/mtxColorPicker.metadata.json +1 -1
  47. package/data-grid/grid.component.d.ts +2 -2
  48. package/esm2015/alert/alert.component.js +16 -9
  49. package/esm2015/button/mtxButton.js +5 -0
  50. package/esm2015/checkbox-group/checkbox-group.component.js +35 -8
  51. package/esm2015/color-picker/color-picker.component.js +11 -2
  52. package/esm2015/data-grid/grid.component.js +15 -15
  53. package/esm2015/form-group/form-group.component.js +1 -1
  54. package/esm2015/loader/loader.component.js +17 -4
  55. package/esm2015/popover/popover-errors.js +15 -15
  56. package/esm2015/popover/popover-interfaces.js +1 -1
  57. package/esm2015/popover/popover-trigger.js +95 -64
  58. package/esm2015/popover/popover-types.js +1 -1
  59. package/esm2015/popover/popover.js +68 -51
  60. package/esm2015/popover/public-api.js +2 -1
  61. package/esm2015/progress/progress.component.js +18 -1
  62. package/esm2015/select/select.component.js +1 -1
  63. package/fesm2015/mtxAlert.js +15 -8
  64. package/fesm2015/mtxAlert.js.map +1 -1
  65. package/fesm2015/{ng-matero-extensions-button.js → mtxButton.js} +1 -1
  66. package/fesm2015/mtxButton.js.map +1 -0
  67. package/fesm2015/mtxCheckboxGroup.js +34 -7
  68. package/fesm2015/mtxCheckboxGroup.js.map +1 -1
  69. package/fesm2015/mtxColorPicker.js +10 -1
  70. package/fesm2015/mtxColorPicker.js.map +1 -1
  71. package/fesm2015/mtxFormGroup.js.map +1 -1
  72. package/fesm2015/mtxGrid.js +14 -14
  73. package/fesm2015/mtxGrid.js.map +1 -1
  74. package/fesm2015/mtxLoader.js +16 -3
  75. package/fesm2015/mtxLoader.js.map +1 -1
  76. package/fesm2015/mtxPopover.js +174 -126
  77. package/fesm2015/mtxPopover.js.map +1 -1
  78. package/fesm2015/mtxProgress.js +17 -0
  79. package/fesm2015/mtxProgress.js.map +1 -1
  80. package/fesm2015/mtxSelect.js.map +1 -1
  81. package/form-group/form-group.component.d.ts +2 -0
  82. package/loader/loader.component.d.ts +9 -2
  83. package/loader/mtxLoader.metadata.json +1 -1
  84. package/package.json +2 -2
  85. package/popover/_popover-theme.scss +17 -7
  86. package/popover/mtxPopover.metadata.json +1 -1
  87. package/popover/popover-errors.d.ts +6 -6
  88. package/popover/popover-interfaces.d.ts +9 -9
  89. package/popover/popover-types.d.ts +3 -2
  90. package/popover/popover.d.ts +23 -17
  91. package/popover/popover.scss +117 -20
  92. package/popover/public-api.d.ts +1 -0
  93. package/progress/mtxProgress.metadata.json +1 -1
  94. package/progress/progress.component.d.ts +9 -2
  95. package/select/mtxSelect.metadata.json +1 -1
  96. package/select/select.component.d.ts +9 -5
  97. package/bundles/ng-matero-extensions-button.umd.js.map +0 -1
  98. package/esm2015/button/ng-matero-extensions-button.js +0 -5
  99. package/fesm2015/ng-matero-extensions-button.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"mtxAlert.js","sources":["../../../projects/extensions/alert/alert.component.ts","../../../projects/extensions/alert/alert.module.ts","../../../projects/extensions/alert/mtxAlert.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n Input,\n Output,\n EventEmitter,\n ChangeDetectorRef,\n HostBinding,\n} from '@angular/core';\n\nexport type MtxAlertType = 'default' | 'info' | 'success' | 'warning' | 'danger';\n\n@Component({\n selector: 'mtx-alert',\n exportAs: 'mtxAlert',\n host: {\n class: 'mtx-alert',\n },\n templateUrl: './alert.component.html',\n styleUrls: ['./alert.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MtxAlertComponent {\n @HostBinding('class') get hostClassList() {\n return `mtx-alert-${this.type}`;\n }\n\n /** The alert type */\n @Input() type: MtxAlertType = 'default';\n\n /** Whether alert visible */\n @Input() isOpen = true;\n\n /** Whether displays an inline \"Close\" button */\n @Input() dismissible: boolean;\n\n /** The alert text color */\n @Input() color: string;\n\n /** Material elevation */\n @Input() elevation = 0;\n\n /** This event fires when alert closed, $event is an instance of Alert component */\n @Output() closed = new EventEmitter<MtxAlertComponent>();\n\n constructor(private _changeDetectorRef: ChangeDetectorRef) {}\n\n _onClosed(): void {\n this.isOpen = false;\n this._changeDetectorRef.markForCheck();\n this.closed.emit(this);\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MtxAlertComponent } from './alert.component';\n\n@NgModule({\n imports: [CommonModule],\n exports: [MtxAlertComponent],\n declarations: [MtxAlertComponent],\n})\nexport class MtxAlertModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAwBa,iBAAiB;IAuB5B,YAAoB,kBAAqC;QAArC,uBAAkB,GAAlB,kBAAkB,CAAmB;;QAjBhD,SAAI,GAAiB,SAAS,CAAC;;QAG/B,WAAM,GAAG,IAAI,CAAC;;QASd,cAAS,GAAG,CAAC,CAAC;;QAGb,WAAM,GAAG,IAAI,YAAY,EAAqB,CAAC;KAEI;IAtB7D,IAA0B,aAAa;QACrC,OAAO,aAAa,IAAI,CAAC,IAAI,EAAE,CAAC;KACjC;IAsBD,SAAS;QACP,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC;QACvC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACxB;;;YAxCF,SAAS,SAAC;gBACT,QAAQ,EAAE,WAAW;gBACrB,QAAQ,EAAE,UAAU;gBACpB,IAAI,EAAE;oBACJ,KAAK,EAAE,WAAW;iBACnB;gBACD,gjBAAqC;gBAErC,aAAa,EAAE,iBAAiB,CAAC,IAAI;gBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;;YAhBC,iBAAiB;;;4BAkBhB,WAAW,SAAC,OAAO;mBAKnB,KAAK;qBAGL,KAAK;0BAGL,KAAK;oBAGL,KAAK;wBAGL,KAAK;qBAGL,MAAM;;;MCnCI,cAAc;;;YAL1B,QAAQ,SAAC;gBACR,OAAO,EAAE,CAAC,YAAY,CAAC;gBACvB,OAAO,EAAE,CAAC,iBAAiB,CAAC;gBAC5B,YAAY,EAAE,CAAC,iBAAiB,CAAC;aAClC;;;ACTD;;;;;;"}
1
+ {"version":3,"file":"mtxAlert.js","sources":["../../../projects/extensions/alert/alert.component.ts","../../../projects/extensions/alert/alert.module.ts","../../../projects/extensions/alert/mtxAlert.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n Input,\n Output,\n EventEmitter,\n ChangeDetectorRef,\n HostBinding,\n} from '@angular/core';\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\n\nexport type MtxAlertType = 'default' | 'info' | 'success' | 'warning' | 'danger';\n\n@Component({\n selector: 'mtx-alert',\n exportAs: 'mtxAlert',\n host: {\n '[class.mtx-alert]': 'true',\n '[class.mtx-alert-dismissible]': 'dismissible',\n 'role': 'alert',\n },\n templateUrl: './alert.component.html',\n styleUrls: ['./alert.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MtxAlertComponent {\n @HostBinding('class') get hostClassList() {\n return `mtx-alert-${this.type} mat-elevation-z${this.elevation}`;\n }\n\n /** The alert type */\n @Input() type: MtxAlertType = 'default';\n\n /** Whether displays an inline `Close` button */\n @Input()\n get dismissible(): boolean {\n return this._dismissible;\n }\n set dismissible(value: boolean) {\n this._dismissible = coerceBooleanProperty(value);\n }\n private _dismissible = false;\n\n /** The alert text color */\n @Input() color!: string;\n\n /** Material elevation */\n @Input() elevation = 0;\n\n /** This event fires when alert closed, $event is an instance of Alert component */\n @Output() closed = new EventEmitter<MtxAlertComponent>();\n\n constructor(private _changeDetectorRef: ChangeDetectorRef) {}\n\n _onClosed(): void {\n this._changeDetectorRef.markForCheck();\n this.closed.emit(this);\n }\n\n static ngAcceptInputType_dismissible: BooleanInput;\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MtxAlertComponent } from './alert.component';\n\n@NgModule({\n imports: [CommonModule],\n exports: [MtxAlertComponent],\n declarations: [MtxAlertComponent],\n})\nexport class MtxAlertModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MA2Ba,iBAAiB;IA2B5B,YAAoB,kBAAqC;QAArC,uBAAkB,GAAlB,kBAAkB,CAAmB;;QArBhD,SAAI,GAAiB,SAAS,CAAC;QAUhC,iBAAY,GAAG,KAAK,CAAC;;QAMpB,cAAS,GAAG,CAAC,CAAC;;QAGb,WAAM,GAAG,IAAI,YAAY,EAAqB,CAAC;KAEI;IA1B7D,IAA0B,aAAa;QACrC,OAAO,aAAa,IAAI,CAAC,IAAI,mBAAmB,IAAI,CAAC,SAAS,EAAE,CAAC;KAClE;;IAMD,IACI,WAAW;QACb,OAAO,IAAI,CAAC,YAAY,CAAC;KAC1B;IACD,IAAI,WAAW,CAAC,KAAc;QAC5B,IAAI,CAAC,YAAY,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;KAClD;IAcD,SAAS;QACP,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC;QACvC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACxB;;;YA7CF,SAAS,SAAC;gBACT,QAAQ,EAAE,WAAW;gBACrB,QAAQ,EAAE,UAAU;gBACpB,IAAI,EAAE;oBACJ,mBAAmB,EAAE,MAAM;oBAC3B,+BAA+B,EAAE,aAAa;oBAC9C,MAAM,EAAE,OAAO;iBAChB;gBACD,4PAAqC;gBAErC,aAAa,EAAE,iBAAiB,CAAC,IAAI;gBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;;YAnBC,iBAAiB;;;4BAqBhB,WAAW,SAAC,OAAO;mBAKnB,KAAK;0BAGL,KAAK;oBAUL,KAAK;wBAGL,KAAK;qBAGL,MAAM;;;MC1CI,cAAc;;;YAL1B,QAAQ,SAAC;gBACR,OAAO,EAAE,CAAC,YAAY,CAAC;gBACvB,OAAO,EAAE,CAAC,iBAAiB,CAAC;gBAC5B,YAAY,EAAE,CAAC,iBAAiB,CAAC;aAClC;;;ACTD;;;;;;"}
@@ -81,4 +81,4 @@ MtxButtonModule.decorators = [
81
81
  */
82
82
 
83
83
  export { MatButtonLoadingDirective, MtxButtonModule };
84
- //# sourceMappingURL=ng-matero-extensions-button.js.map
84
+ //# sourceMappingURL=mtxButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"mtxButton.js","sources":["../../../projects/extensions/button/button-loading.directive.ts","../../../projects/extensions/button/button.module.ts","../../../projects/extensions/button/mtxButton.ts"],"sourcesContent":["import {\r\n ComponentFactory,\r\n ComponentFactoryResolver,\r\n ComponentRef,\r\n Directive,\r\n Input,\r\n OnChanges,\r\n Renderer2,\r\n SimpleChanges,\r\n ViewContainerRef,\r\n} from '@angular/core';\r\nimport { ThemePalette } from '@angular/material/core';\r\nimport { MatButton } from '@angular/material/button';\r\nimport { MatProgressSpinner } from '@angular/material/progress-spinner';\r\n\r\n@Directive({\r\n selector: `button[mat-button][loading],\r\n button[mat-raised-button][loading],\r\n button[mat-stroked-button][loading],\r\n button[mat-flat-button][loading],\r\n button[mat-icon-button][loading],\r\n button[mat-fab][loading],\r\n button[mat-mini-fab][loading]`,\r\n})\r\nexport class MatButtonLoadingDirective implements OnChanges {\r\n private spinnerFactory: ComponentFactory<MatProgressSpinner>;\r\n private spinner: ComponentRef<MatProgressSpinner> | null;\r\n\r\n @Input()\r\n loading: boolean;\r\n\r\n @Input()\r\n disabled: boolean;\r\n\r\n @Input()\r\n color: ThemePalette;\r\n\r\n constructor(\r\n private matButton: MatButton,\r\n private componentFactoryResolver: ComponentFactoryResolver,\r\n private viewContainerRef: ViewContainerRef,\r\n private renderer: Renderer2\r\n ) {\r\n this.spinnerFactory = this.componentFactoryResolver.resolveComponentFactory(MatProgressSpinner);\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (!changes.loading) {\r\n return;\r\n }\r\n\r\n if (changes.loading.currentValue) {\r\n this.matButton._elementRef.nativeElement.classList.add('mat-button-loading');\r\n this.matButton.disabled = true;\r\n this.createSpinner();\r\n } else if (!changes.loading.firstChange) {\r\n this.matButton._elementRef.nativeElement.classList.remove('mat-button-loading');\r\n this.matButton.disabled = this.disabled;\r\n this.destroySpinner();\r\n }\r\n }\r\n\r\n private createSpinner(): void {\r\n if (!this.spinner) {\r\n this.spinner = this.viewContainerRef.createComponent(this.spinnerFactory);\r\n this.spinner.instance.color = this.color;\r\n this.spinner.instance.diameter = 20;\r\n this.spinner.instance.mode = 'indeterminate';\r\n this.renderer.appendChild(\r\n this.matButton._elementRef.nativeElement,\r\n this.spinner.instance._elementRef.nativeElement\r\n );\r\n }\r\n }\r\n\r\n private destroySpinner(): void {\r\n if (this.spinner) {\r\n this.spinner.destroy();\r\n this.spinner = null;\r\n }\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\nimport { MatButtonLoadingDirective } from './button-loading.directive';\n\n@NgModule({\n imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule],\n exports: [MatButtonLoadingDirective],\n declarations: [MatButtonLoadingDirective],\n})\nexport class MtxButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAwBa,yBAAyB;IAapC,YACU,SAAoB,EACpB,wBAAkD,EAClD,gBAAkC,EAClC,QAAmB;QAHnB,cAAS,GAAT,SAAS,CAAW;QACpB,6BAAwB,GAAxB,wBAAwB,CAA0B;QAClD,qBAAgB,GAAhB,gBAAgB,CAAkB;QAClC,aAAQ,GAAR,QAAQ,CAAW;QAE3B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,wBAAwB,CAAC,uBAAuB,CAAC,kBAAkB,CAAC,CAAC;KACjG;IAED,WAAW,CAAC,OAAsB;QAChC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;YACpB,OAAO;SACR;QAED,IAAI,OAAO,CAAC,OAAO,CAAC,YAAY,EAAE;YAChC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;YAC7E,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC;YAC/B,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;aAAM,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE;YACvC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC;YAChF,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;YACxC,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;KACF;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YAC1E,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;YACzC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,GAAG,EAAE,CAAC;YACpC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,GAAG,eAAe,CAAC;YAC7C,IAAI,CAAC,QAAQ,CAAC,WAAW,CACvB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,aAAa,EACxC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,aAAa,CAChD,CAAC;SACH;KACF;IAEO,cAAc;QACpB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;YACvB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACrB;KACF;;;YAjEF,SAAS,SAAC;gBACT,QAAQ,EAAE;;;;;;2CAM+B;aAC1C;;;;YAXQ,SAAS;YAVhB,wBAAwB;YAOxB,gBAAgB;YAFhB,SAAS;;;sBAqBR,KAAK;uBAGL,KAAK;oBAGL,KAAK;;;MCtBK,eAAe;;;YAL3B,QAAQ,SAAC;gBACR,OAAO,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,wBAAwB,CAAC;gBAClE,OAAO,EAAE,CAAC,yBAAyB,CAAC;gBACpC,YAAY,EAAE,CAAC,yBAAyB,CAAC;aAC1C;;;ACXD;;;;;;"}
@@ -1,8 +1,9 @@
1
- import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, forwardRef, ChangeDetectorRef, ContentChildren, Input, Output, NgModule } from '@angular/core';
1
+ import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, forwardRef, ChangeDetectorRef, ElementRef, ContentChildren, Input, Output, NgModule } from '@angular/core';
2
2
  import { CommonModule } from '@angular/common';
3
3
  import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
4
4
  import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
5
5
  import { MtxUtilsModule } from '@ng-matero/extensions/utils';
6
+ import { FocusMonitor } from '@angular/cdk/a11y';
6
7
  import { coerceBooleanProperty } from '@angular/cdk/coercion';
7
8
 
8
9
  class MtxCheckboxBase {
@@ -12,19 +13,20 @@ class MtxCheckboxBase {
12
13
  }
13
14
  }
14
15
  class MtxCheckboxGroupComponent {
15
- constructor(_changeDetectorRef) {
16
+ constructor(_changeDetectorRef, _focusMonitor, _elementRef) {
16
17
  this._changeDetectorRef = _changeDetectorRef;
18
+ this._focusMonitor = _focusMonitor;
19
+ this._elementRef = _elementRef;
17
20
  this._items = [];
18
21
  this._originalItems = [];
19
22
  this.bindLabel = 'label';
20
23
  this.bindValue = 'value';
21
- this.showSelectAll = false;
24
+ this._showSelectAll = false;
22
25
  this.selectAllLabel = 'Select All';
23
26
  this._disabled = false;
24
27
  this.change = new EventEmitter();
25
28
  this.selectAll = false;
26
29
  this.selectAllIndeterminate = false;
27
- this.color = 'accent';
28
30
  this.selectedItems = [];
29
31
  this._onChange = () => null;
30
32
  this._onTouched = () => null;
@@ -39,6 +41,12 @@ class MtxCheckboxGroupComponent {
39
41
  return option instanceof Object ? option : new MtxCheckboxBase(option, option);
40
42
  });
41
43
  }
44
+ get showSelectAll() {
45
+ return this._showSelectAll;
46
+ }
47
+ set showSelectAll(value) {
48
+ this._showSelectAll = coerceBooleanProperty(value);
49
+ }
42
50
  get compareWith() {
43
51
  return this._compareWith;
44
52
  }
@@ -56,7 +64,24 @@ class MtxCheckboxGroupComponent {
56
64
  set disabled(value) {
57
65
  this._disabled = coerceBooleanProperty(value);
58
66
  }
59
- ngAfterViewInit() { }
67
+ ngAfterViewInit() {
68
+ this._focusMonitor.monitor(this._elementRef, true).subscribe(focusOrigin => {
69
+ if (!focusOrigin) {
70
+ // When a focused element becomes disabled, the browser *immediately* fires a blur event.
71
+ // Angular does not expect events to be raised during change detection, so any state change
72
+ // (such as a form control's 'ng-touched') will cause a changed-after-checked error.
73
+ // See https://github.com/angular/angular/issues/17793. To work around this, we defer
74
+ // telling the form control it has been touched until the next tick.
75
+ Promise.resolve().then(() => {
76
+ this._onTouched();
77
+ this._changeDetectorRef.markForCheck();
78
+ });
79
+ }
80
+ });
81
+ }
82
+ ngOnDestroy() {
83
+ this._focusMonitor.stopMonitoring(this._elementRef);
84
+ }
60
85
  /**
61
86
  * Finds and selects and option based on its value.
62
87
  * @returns Option that has the corresponding value.
@@ -172,7 +197,7 @@ MtxCheckboxGroupComponent.decorators = [
172
197
  host: {
173
198
  class: 'mtx-checkbox-group',
174
199
  },
175
- template: "<mat-checkbox class=\"mtx-checkbox-master\"\n *ngIf=\"showSelectAll\"\n [checked]=\"selectAll\"\n [(indeterminate)]=\"selectAllIndeterminate\"\n [disabled]=\"disabled\"\n (change)=\"_updateMasterCheckboxState($event, -1);\">\n {{selectAllLabel}}\n</mat-checkbox>\n\n<mat-checkbox class=\"mtx-checkbox-normal\"\n *ngFor=\"let option of items; let i = index;\"\n [(ngModel)]=\"option.checked\"\n [aria-describedby]=\"option.ariaDescribedby\"\n [aria-label]=\"option.ariaLabel\"\n [aria-labelledby]=\"option.ariaLabelledby\"\n [color]=\"option.color || color\"\n [disabled]=\"option.disabled || disabled\"\n [disableRipple]=\"option.disableRipple\"\n [labelPosition]=\"option.labelPosition\"\n [required]=\"option.required\"\n (change)=\"_updateNormalCheckboxState($event, i)\">\n {{option[bindLabel] | toObservable | async}}\n</mat-checkbox>\n",
200
+ template: "<mat-checkbox class=\"mtx-checkbox-master\"\n *ngIf=\"showSelectAll\"\n [checked]=\"selectAll\"\n [(indeterminate)]=\"selectAllIndeterminate\"\n [disabled]=\"disabled\"\n (change)=\"_updateMasterCheckboxState($event, -1);\">\n {{selectAllLabel}}\n</mat-checkbox>\n\n<mat-checkbox class=\"mtx-checkbox-normal\"\n *ngFor=\"let option of items; let i = index;\"\n [(ngModel)]=\"option.checked\"\n [aria-describedby]=\"option.ariaDescribedby\"\n [aria-label]=\"option.ariaLabel\"\n [aria-labelledby]=\"option.ariaLabelledby\"\n [color]=\"option.color\"\n [disabled]=\"option.disabled || disabled\"\n [disableRipple]=\"option.disableRipple\"\n [labelPosition]=\"option.labelPosition\"\n [required]=\"option.required\"\n (change)=\"_updateNormalCheckboxState($event, i)\">\n {{option[bindLabel] | toObservable | async}}\n</mat-checkbox>\n",
176
201
  encapsulation: ViewEncapsulation.None,
177
202
  changeDetection: ChangeDetectionStrategy.OnPush,
178
203
  providers: [
@@ -187,7 +212,9 @@ MtxCheckboxGroupComponent.decorators = [
187
212
  ];
188
213
  /** @nocollapse */
189
214
  MtxCheckboxGroupComponent.ctorParameters = () => [
190
- { type: ChangeDetectorRef }
215
+ { type: ChangeDetectorRef },
216
+ { type: FocusMonitor },
217
+ { type: ElementRef }
191
218
  ];
192
219
  MtxCheckboxGroupComponent.propDecorators = {
193
220
  _checkboxes: [{ type: ContentChildren, args: [forwardRef(() => MatCheckbox), { descendants: true },] }],
@@ -1 +1 @@
1
- {"version":3,"file":"mtxCheckboxGroup.js","sources":["../../../projects/extensions/checkbox-group/checkbox-group.component.ts","../../../projects/extensions/checkbox-group/checkbox-group.module.ts","../../../projects/extensions/checkbox-group/mtxCheckboxGroup.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n Input,\n Output,\n EventEmitter,\n ChangeDetectorRef,\n forwardRef,\n AfterViewInit,\n ContentChildren,\n QueryList,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { ThemePalette } from '@angular/material/core';\nimport { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';\nimport { MtxCheckboxGroupOption } from './checkbox-group.interface';\n\nexport class MtxCheckboxBase {\n constructor(public label?: any, public value?: any) {}\n}\n\n@Component({\n selector: 'mtx-checkbox-group',\n exportAs: 'mtxCheckboxGroup',\n host: {\n class: 'mtx-checkbox-group',\n },\n templateUrl: './checkbox-group.component.html',\n styleUrls: ['./checkbox-group.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => MtxCheckboxGroupComponent),\n multi: true,\n },\n ],\n})\nexport class MtxCheckboxGroupComponent implements AfterViewInit, ControlValueAccessor {\n @ContentChildren(forwardRef(() => MatCheckbox), { descendants: true })\n _checkboxes: QueryList<MatCheckbox>;\n\n @Input()\n get items() {\n return this._items;\n }\n set items(value: any[]) {\n // TODO: Deep clone\n this._originalItems = JSON.parse(JSON.stringify(value));\n this._items = value.map(option => {\n return option instanceof Object ? option : new MtxCheckboxBase(option, option);\n });\n }\n private _items: any[] = [];\n private _originalItems: any[] = [];\n\n @Input() bindLabel = 'label';\n @Input() bindValue = 'value';\n @Input() showSelectAll = false;\n @Input() selectAllLabel = 'Select All';\n @Input()\n get compareWith() {\n return this._compareWith;\n }\n set compareWith(fn: (o1: any, o2: any) => boolean) {\n if (typeof fn !== 'function') {\n throw Error('`compareWith` must be a function.');\n }\n\n if (fn) {\n this._compareWith = fn;\n }\n }\n private _compareWith: (o1: any, o2: any) => boolean;\n\n @Input()\n get disabled(): boolean {\n return this._disabled;\n }\n set disabled(value: boolean) {\n this._disabled = coerceBooleanProperty(value);\n }\n private _disabled = false;\n\n @Output() change = new EventEmitter<{ model: MtxCheckboxGroupOption[]; index: number }>();\n\n selectAll = false;\n selectAllIndeterminate = false;\n\n color: ThemePalette = 'accent';\n\n selectedItems: MtxCheckboxGroupOption[] = [];\n\n _onChange: (value: MtxCheckboxGroupOption[]) => void = () => null;\n _onTouched: () => void = () => null;\n\n constructor(private _changeDetectorRef: ChangeDetectorRef) {}\n\n ngAfterViewInit() {}\n\n /**\n * Finds and selects and option based on its value.\n * @returns Option that has the corresponding value.\n */\n private _selectValue(value: MtxCheckboxGroupOption) {\n const correspondingOption = (this.items as MtxCheckboxGroupOption[]).find(option => {\n try {\n const compareValue = option[this.bindValue] === value;\n return this._compareWith ? this._compareWith(option, value) : compareValue;\n } catch (error) {\n console.warn(error);\n return false;\n }\n });\n\n if (correspondingOption) {\n correspondingOption.checked = true;\n }\n\n return correspondingOption;\n }\n\n /**\n * Sets the model value. Implemented as part of ControlValueAccessor.\n * @param value New value to be written to the model.\n */\n writeValue(value: any[]): void {\n if (value) {\n if (!Array.isArray(value)) {\n throw Error('Value must be an array.');\n }\n\n value.forEach((currentValue: any) => this._selectValue(currentValue));\n this.selectedItems = value;\n }\n\n this._checkMasterCheckboxState();\n this._changeDetectorRef.markForCheck();\n }\n\n /**\n * Registers a callback to be triggered when the model value changes.\n * Implemented as part of ControlValueAccessor.\n * @param fn Callback to be registered.\n */\n registerOnChange(fn: (value: MtxCheckboxGroupOption[]) => {}): void {\n this._onChange = fn;\n }\n\n /**\n * Registers a callback to be triggered when the control is touched.\n * Implemented as part of ControlValueAccessor.\n * @param fn Callback to be registered.\n */\n registerOnTouched(fn: () => {}): void {\n this._onTouched = fn;\n }\n\n /**\n * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.\n * @param isDisabled Whether the control should be disabled.\n */\n setDisabledState(isDisabled: boolean) {\n this._disabled = isDisabled;\n }\n\n private _checkMasterCheckboxState() {\n if (\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .every(option => !option.checked)\n ) {\n this.selectAll = false;\n this.selectAllIndeterminate = false;\n } else if (\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .every(option => option.checked)\n ) {\n this.selectAll = true;\n this.selectAllIndeterminate = false;\n } else {\n this.selectAllIndeterminate = true;\n }\n }\n\n private _getSelectedItems(index: number) {\n this.selectedItems = (this.items as MtxCheckboxGroupOption[]).filter(option => option.checked);\n\n if (this._compareWith) {\n this.selectedItems = (this._originalItems as MtxCheckboxGroupOption[]).filter(option =>\n this.selectedItems.find(selectedOption => this._compareWith(option, selectedOption))\n );\n } else {\n this.selectedItems = this.selectedItems.map(option => option[this.bindValue]);\n }\n\n this._onChange(this.selectedItems);\n\n this.change.emit({ model: this.selectedItems, index });\n }\n\n /** Handle normal checkbox toggle */\n _updateNormalCheckboxState(e: MatCheckboxChange, index: number): void {\n this._checkMasterCheckboxState();\n this._getSelectedItems(index);\n }\n\n /** Handle master checkbox toggle */\n _updateMasterCheckboxState(e: MatCheckboxChange, index: number): void {\n this.selectAll = !this.selectAll;\n this.selectAllIndeterminate = false;\n\n if (this.selectAll) {\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .forEach(option => (option.checked = true));\n } else {\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .forEach(option => (option.checked = !!option.disabled));\n }\n\n this._getSelectedItems(index);\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\n\nimport { MtxUtilsModule } from '@ng-matero/extensions/utils';\nimport { MtxCheckboxGroupComponent } from './checkbox-group.component';\n\n@NgModule({\n imports: [CommonModule, FormsModule, MatCheckboxModule, MtxUtilsModule],\n exports: [MtxCheckboxGroupComponent],\n declarations: [MtxCheckboxGroupComponent],\n})\nexport class MtxCheckboxGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MAmBa,eAAe;IAC1B,YAAmB,KAAW,EAAS,KAAW;QAA/B,UAAK,GAAL,KAAK,CAAM;QAAS,UAAK,GAAL,KAAK,CAAM;KAAI;CACvD;MAoBY,yBAAyB;IA0DpC,YAAoB,kBAAqC;QAArC,uBAAkB,GAAlB,kBAAkB,CAAmB;QA3CjD,WAAM,GAAU,EAAE,CAAC;QACnB,mBAAc,GAAU,EAAE,CAAC;QAE1B,cAAS,GAAG,OAAO,CAAC;QACpB,cAAS,GAAG,OAAO,CAAC;QACpB,kBAAa,GAAG,KAAK,CAAC;QACtB,mBAAc,GAAG,YAAY,CAAC;QAuB/B,cAAS,GAAG,KAAK,CAAC;QAEhB,WAAM,GAAG,IAAI,YAAY,EAAsD,CAAC;QAE1F,cAAS,GAAG,KAAK,CAAC;QAClB,2BAAsB,GAAG,KAAK,CAAC;QAE/B,UAAK,GAAiB,QAAQ,CAAC;QAE/B,kBAAa,GAA6B,EAAE,CAAC;QAE7C,cAAS,GAA8C,MAAM,IAAI,CAAC;QAClE,eAAU,GAAe,MAAM,IAAI,CAAC;KAEyB;IAtD7D,IACI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC;KACpB;IACD,IAAI,KAAK,CAAC,KAAY;;QAEpB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;QACxD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,MAAM;YAC5B,OAAO,MAAM,YAAY,MAAM,GAAG,MAAM,GAAG,IAAI,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;SAChF,CAAC,CAAC;KACJ;IAQD,IACI,WAAW;QACb,OAAO,IAAI,CAAC,YAAY,CAAC;KAC1B;IACD,IAAI,WAAW,CAAC,EAAiC;QAC/C,IAAI,OAAO,EAAE,KAAK,UAAU,EAAE;YAC5B,MAAM,KAAK,CAAC,mCAAmC,CAAC,CAAC;SAClD;QAED,IAAI,EAAE,EAAE;YACN,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;SACxB;KACF;IAGD,IACI,QAAQ;QACV,OAAO,IAAI,CAAC,SAAS,CAAC;KACvB;IACD,IAAI,QAAQ,CAAC,KAAc;QACzB,IAAI,CAAC,SAAS,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;KAC/C;IAiBD,eAAe,MAAK;;;;;IAMZ,YAAY,CAAC,KAA6B;QAChD,MAAM,mBAAmB,GAAI,IAAI,CAAC,KAAkC,CAAC,IAAI,CAAC,MAAM;YAC9E,IAAI;gBACF,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,KAAK,CAAC;gBACtD,OAAO,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG,YAAY,CAAC;aAC5E;YAAC,OAAO,KAAK,EAAE;gBACd,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACpB,OAAO,KAAK,CAAC;aACd;SACF,CAAC,CAAC;QAEH,IAAI,mBAAmB,EAAE;YACvB,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC;SACpC;QAED,OAAO,mBAAmB,CAAC;KAC5B;;;;;IAMD,UAAU,CAAC,KAAY;QACrB,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBACzB,MAAM,KAAK,CAAC,yBAAyB,CAAC,CAAC;aACxC;YAED,KAAK,CAAC,OAAO,CAAC,CAAC,YAAiB,KAAK,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC;YACtE,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;QAED,IAAI,CAAC,yBAAyB,EAAE,CAAC;QACjC,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC;KACxC;;;;;;IAOD,gBAAgB,CAAC,EAA2C;QAC1D,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;KACrB;;;;;;IAOD,iBAAiB,CAAC,EAAY;QAC5B,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;KACtB;;;;;IAMD,gBAAgB,CAAC,UAAmB;QAClC,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC;KAC7B;IAEO,yBAAyB;QAC/B,IACG,IAAI,CAAC,KAAkC;aACrC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;aACpD,KAAK,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EACnC;YACA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;SACrC;aAAM,IACJ,IAAI,CAAC,KAAkC;aACrC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;aACpD,KAAK,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,CAAC,EAClC;YACA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;SACrC;aAAM;YACL,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;SACpC;KACF;IAEO,iBAAiB,CAAC,KAAa;QACrC,IAAI,CAAC,aAAa,GAAI,IAAI,CAAC,KAAkC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC;QAE/F,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,aAAa,GAAI,IAAI,CAAC,cAA2C,CAAC,MAAM,CAAC,MAAM,IAClF,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CACrF,CAAC;SACH;aAAM;YACL,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;SAC/E;QAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAEnC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,CAAC,CAAC;KACxD;;IAGD,0BAA0B,CAAC,CAAoB,EAAE,KAAa;QAC5D,IAAI,CAAC,yBAAyB,EAAE,CAAC;QACjC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;KAC/B;;IAGD,0BAA0B,CAAC,CAAoB,EAAE,KAAa;QAC5D,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACjC,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;QAEpC,IAAI,IAAI,CAAC,SAAS,EAAE;YACjB,IAAI,CAAC,KAAkC;iBACrC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;iBACpD,OAAO,CAAC,MAAM,KAAK,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC;SAC/C;aAAM;YACJ,IAAI,CAAC,KAAkC;iBACrC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;iBACpD,OAAO,CAAC,MAAM,KAAK,MAAM,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;SAC5D;QAED,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;KAC/B;;;YA5MF,SAAS,SAAC;gBACT,QAAQ,EAAE,oBAAoB;gBAC9B,QAAQ,EAAE,kBAAkB;gBAC5B,IAAI,EAAE;oBACJ,KAAK,EAAE,oBAAoB;iBAC5B;gBACD,uiCAA8C;gBAE9C,aAAa,EAAE,iBAAiB,CAAC,IAAI;gBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;gBAC/C,SAAS,EAAE;oBACT;wBACE,OAAO,EAAE,iBAAiB;wBAC1B,WAAW,EAAE,UAAU,CAAC,MAAM,yBAAyB,CAAC;wBACxD,KAAK,EAAE,IAAI;qBACZ;iBACF;;aACF;;;;YAjCC,iBAAiB;;;0BAmChB,eAAe,SAAC,UAAU,CAAC,MAAM,WAAW,CAAC,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE;oBAGpE,KAAK;wBAcL,KAAK;wBACL,KAAK;4BACL,KAAK;6BACL,KAAK;0BACL,KAAK;uBAeL,KAAK;qBASL,MAAM;;;MC1EI,sBAAsB;;;YALlC,QAAQ,SAAC;gBACR,OAAO,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,cAAc,CAAC;gBACvE,OAAO,EAAE,CAAC,yBAAyB,CAAC;gBACpC,YAAY,EAAE,CAAC,yBAAyB,CAAC;aAC1C;;;ACZD;;;;;;"}
1
+ {"version":3,"file":"mtxCheckboxGroup.js","sources":["../../../projects/extensions/checkbox-group/checkbox-group.component.ts","../../../projects/extensions/checkbox-group/checkbox-group.module.ts","../../../projects/extensions/checkbox-group/mtxCheckboxGroup.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n Input,\n Output,\n EventEmitter,\n ChangeDetectorRef,\n forwardRef,\n AfterViewInit,\n ContentChildren,\n QueryList,\n ElementRef,\n OnDestroy,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';\nimport { FocusMonitor } from '@angular/cdk/a11y';\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';\nimport { MtxCheckboxGroupOption } from './checkbox-group.interface';\n\nexport class MtxCheckboxBase {\n constructor(public label?: any, public value?: any) {}\n}\n\n@Component({\n selector: 'mtx-checkbox-group',\n exportAs: 'mtxCheckboxGroup',\n host: {\n class: 'mtx-checkbox-group',\n },\n templateUrl: './checkbox-group.component.html',\n styleUrls: ['./checkbox-group.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => MtxCheckboxGroupComponent),\n multi: true,\n },\n ],\n})\nexport class MtxCheckboxGroupComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {\n @ContentChildren(forwardRef(() => MatCheckbox), { descendants: true })\n _checkboxes: QueryList<MatCheckbox>;\n\n @Input()\n get items() {\n return this._items;\n }\n set items(value: any[]) {\n // TODO: Deep clone\n this._originalItems = JSON.parse(JSON.stringify(value));\n this._items = value.map(option => {\n return option instanceof Object ? option : new MtxCheckboxBase(option, option);\n });\n }\n private _items: any[] = [];\n private _originalItems: any[] = [];\n\n @Input() bindLabel = 'label';\n\n @Input() bindValue = 'value';\n\n @Input()\n get showSelectAll(): boolean {\n return this._showSelectAll;\n }\n set showSelectAll(value: boolean) {\n this._showSelectAll = coerceBooleanProperty(value);\n }\n private _showSelectAll = false;\n\n @Input() selectAllLabel = 'Select All';\n\n @Input()\n get compareWith() {\n return this._compareWith;\n }\n set compareWith(fn: (o1: any, o2: any) => boolean) {\n if (typeof fn !== 'function') {\n throw Error('`compareWith` must be a function.');\n }\n\n if (fn) {\n this._compareWith = fn;\n }\n }\n private _compareWith: (o1: any, o2: any) => boolean;\n\n @Input()\n get disabled(): boolean {\n return this._disabled;\n }\n set disabled(value: boolean) {\n this._disabled = coerceBooleanProperty(value);\n }\n private _disabled = false;\n\n @Output() change = new EventEmitter<{ model: MtxCheckboxGroupOption[]; index: number }>();\n\n selectAll = false;\n selectAllIndeterminate = false;\n\n selectedItems: MtxCheckboxGroupOption[] = [];\n\n _onChange: (value: MtxCheckboxGroupOption[]) => void = () => null;\n _onTouched: () => void = () => null;\n\n constructor(\n private _changeDetectorRef: ChangeDetectorRef,\n private _focusMonitor: FocusMonitor,\n private _elementRef: ElementRef<HTMLElement>\n ) {}\n\n ngAfterViewInit() {\n this._focusMonitor.monitor(this._elementRef, true).subscribe(focusOrigin => {\n if (!focusOrigin) {\n // When a focused element becomes disabled, the browser *immediately* fires a blur event.\n // Angular does not expect events to be raised during change detection, so any state change\n // (such as a form control's 'ng-touched') will cause a changed-after-checked error.\n // See https://github.com/angular/angular/issues/17793. To work around this, we defer\n // telling the form control it has been touched until the next tick.\n Promise.resolve().then(() => {\n this._onTouched();\n this._changeDetectorRef.markForCheck();\n });\n }\n });\n }\n\n ngOnDestroy() {\n this._focusMonitor.stopMonitoring(this._elementRef);\n }\n\n /**\n * Finds and selects and option based on its value.\n * @returns Option that has the corresponding value.\n */\n private _selectValue(value: MtxCheckboxGroupOption) {\n const correspondingOption = (this.items as MtxCheckboxGroupOption[]).find(option => {\n try {\n const compareValue = option[this.bindValue] === value;\n return this._compareWith ? this._compareWith(option, value) : compareValue;\n } catch (error) {\n console.warn(error);\n return false;\n }\n });\n\n if (correspondingOption) {\n correspondingOption.checked = true;\n }\n\n return correspondingOption;\n }\n\n /**\n * Sets the model value. Implemented as part of ControlValueAccessor.\n * @param value New value to be written to the model.\n */\n writeValue(value: any[]): void {\n if (value) {\n if (!Array.isArray(value)) {\n throw Error('Value must be an array.');\n }\n\n value.forEach((currentValue: any) => this._selectValue(currentValue));\n this.selectedItems = value;\n }\n\n this._checkMasterCheckboxState();\n this._changeDetectorRef.markForCheck();\n }\n\n /**\n * Registers a callback to be triggered when the model value changes.\n * Implemented as part of ControlValueAccessor.\n * @param fn Callback to be registered.\n */\n registerOnChange(fn: (value: MtxCheckboxGroupOption[]) => {}): void {\n this._onChange = fn;\n }\n\n /**\n * Registers a callback to be triggered when the control is touched.\n * Implemented as part of ControlValueAccessor.\n * @param fn Callback to be registered.\n */\n registerOnTouched(fn: () => {}): void {\n this._onTouched = fn;\n }\n\n /**\n * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.\n * @param isDisabled Whether the control should be disabled.\n */\n setDisabledState(isDisabled: boolean) {\n this._disabled = isDisabled;\n }\n\n private _checkMasterCheckboxState() {\n if (\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .every(option => !option.checked)\n ) {\n this.selectAll = false;\n this.selectAllIndeterminate = false;\n } else if (\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .every(option => option.checked)\n ) {\n this.selectAll = true;\n this.selectAllIndeterminate = false;\n } else {\n this.selectAllIndeterminate = true;\n }\n }\n\n private _getSelectedItems(index: number) {\n this.selectedItems = (this.items as MtxCheckboxGroupOption[]).filter(option => option.checked);\n\n if (this._compareWith) {\n this.selectedItems = (this._originalItems as MtxCheckboxGroupOption[]).filter(option =>\n this.selectedItems.find(selectedOption => this._compareWith(option, selectedOption))\n );\n } else {\n this.selectedItems = this.selectedItems.map(option => option[this.bindValue]);\n }\n\n this._onChange(this.selectedItems);\n\n this.change.emit({ model: this.selectedItems, index });\n }\n\n /** Handle normal checkbox toggle */\n _updateNormalCheckboxState(e: MatCheckboxChange, index: number): void {\n this._checkMasterCheckboxState();\n this._getSelectedItems(index);\n }\n\n /** Handle master checkbox toggle */\n _updateMasterCheckboxState(e: MatCheckboxChange, index: number): void {\n this.selectAll = !this.selectAll;\n this.selectAllIndeterminate = false;\n\n if (this.selectAll) {\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .forEach(option => (option.checked = true));\n } else {\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .forEach(option => (option.checked = !!option.disabled));\n }\n\n this._getSelectedItems(index);\n }\n\n static ngAcceptInputType_showSelectAll: BooleanInput;\n static ngAcceptInputType_disabled: BooleanInput;\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\n\nimport { MtxUtilsModule } from '@ng-matero/extensions/utils';\nimport { MtxCheckboxGroupComponent } from './checkbox-group.component';\n\n@NgModule({\n imports: [CommonModule, FormsModule, MatCheckboxModule, MtxUtilsModule],\n exports: [MtxCheckboxGroupComponent],\n declarations: [MtxCheckboxGroupComponent],\n})\nexport class MtxCheckboxGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
@@ -29,6 +29,7 @@ class MtxColorPickerComponent {
29
29
  this._focused = false;
30
30
  this._required = false;
31
31
  this._disabled = false;
32
+ this._readonly = false;
32
33
  this.errorState = false;
33
34
  /** A name for this control that can be used by `mat-form-field`. */
34
35
  this.controlType = 'mtx-color-picker';
@@ -117,6 +118,13 @@ class MtxColorPickerComponent {
117
118
  this._disabled = coerceBooleanProperty(value);
118
119
  this.stateChanges.next();
119
120
  }
121
+ /** Whether the element is readonly. */
122
+ get readonly() {
123
+ return this._readonly;
124
+ }
125
+ set readonly(value) {
126
+ this._readonly = coerceBooleanProperty(value);
127
+ }
120
128
  ngDoCheck() {
121
129
  if (this.ngControl) {
122
130
  this.errorState = (this.ngControl.invalid && this.ngControl.touched);
@@ -225,7 +233,7 @@ MtxColorPickerComponent.decorators = [
225
233
  { type: Component, args: [{
226
234
  selector: 'mtx-color-picker',
227
235
  exportAs: 'mtxColorPicker',
228
- template: "<input matInput\n [(ngModel)]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n (focus)=\"_handleFocus()\"\n autocomplete=\"off\">\n\n<div #colorPickerTrigger=\"matMenuTrigger\"\n [matMenuTriggerFor]=\"colorPickerPopover\"\n (menuOpened)=\"_openPanel()\"\n (menuClosed)=\"_closePanel()\">\n</div>\n\n<mat-menu #colorPickerPopover=\"matMenu\" class=\"mtx-color-picker-panel\" [hasBackdrop]=\"false\">\n <div class=\"mtx-color-picker\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <color-chrome [color]=\"value\" (onChangeComplete)=\"_onColorChanged($event)\"></color-chrome>\n </div>\n</mat-menu>\n",
236
+ template: "<input matInput\n [(ngModel)]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n (focus)=\"_handleFocus()\"\n autocomplete=\"off\">\n\n<div #colorPickerTrigger=\"matMenuTrigger\"\n [matMenuTriggerFor]=\"colorPickerPopover\"\n (menuOpened)=\"_openPanel()\"\n (menuClosed)=\"_closePanel()\">\n</div>\n\n<mat-menu #colorPickerPopover=\"matMenu\" class=\"mtx-color-picker-panel\" [hasBackdrop]=\"false\">\n <div class=\"mtx-color-picker\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n <color-chrome [color]=\"value\" (onChangeComplete)=\"_onColorChanged($event)\"></color-chrome>\n </div>\n</mat-menu>\n",
229
237
  encapsulation: ViewEncapsulation.None,
230
238
  changeDetection: ChangeDetectionStrategy.OnPush,
231
239
  providers: [{ provide: MatFormFieldControl, useExisting: MtxColorPickerComponent }],
@@ -248,6 +256,7 @@ MtxColorPickerComponent.propDecorators = {
248
256
  placeholder: [{ type: Input }],
249
257
  required: [{ type: Input }],
250
258
  disabled: [{ type: Input }],
259
+ readonly: [{ type: Input }],
251
260
  colorChange: [{ type: Output }],
252
261
  trigger: [{ type: ViewChild, args: [MatMenuTrigger, { static: true },] }]
253
262
  };
@@ -1 +1 @@
1
- {"version":3,"file":"mtxColorPicker.js","sources":["../../../projects/extensions/color-picker/color-picker.component.ts","../../../projects/extensions/color-picker/color-picker.module.ts","../../../projects/extensions/color-picker/mtxColorPicker.ts"],"sourcesContent":["import {\n Component,\n ViewEncapsulation,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n OnDestroy,\n Optional,\n Self,\n ElementRef,\n Input,\n Output,\n EventEmitter,\n Inject,\n DoCheck,\n ViewChild,\n Host,\n AfterViewInit,\n NgZone,\n} from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { FocusMonitor } from '@angular/cdk/a11y';\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { _supportsShadowDom } from '@angular/cdk/platform';\nimport { MatFormFieldControl, MatFormField } from '@angular/material/form-field';\nimport { MatMenuTrigger } from '@angular/material/menu';\nimport { Subject, Observable, merge, fromEvent, Subscription } from 'rxjs';\nimport { filter } from 'rxjs/operators';\n\nimport { ColorEvent } from 'ngx-color';\n\nlet nextUniqueId = 0;\n\n@Component({\n selector: 'mtx-color-picker',\n exportAs: 'mtxColorPicker',\n templateUrl: './color-picker.component.html',\n styleUrls: ['./color-picker.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [{ provide: MatFormFieldControl, useExisting: MtxColorPickerComponent }],\n})\nexport class MtxColorPickerComponent\n implements OnDestroy, DoCheck, AfterViewInit, ControlValueAccessor, MatFormFieldControl<any> {\n /** Value of the color picker control. */\n @Input()\n get value(): string | null {\n return this._value;\n }\n set value(newValue: string | null) {\n this._value = newValue;\n this._onChange(newValue);\n this.stateChanges.next();\n }\n private _value: string | null = '';\n\n /** Implemented as part of MatFormFieldControl. */\n readonly stateChanges: Subject<void> = new Subject<void>();\n\n /** Unique id for this input. */\n private _uid = `mtx-color-picker-${nextUniqueId++}`;\n\n /** Unique id of the element. */\n @Input()\n get id(): string {\n return this._id;\n }\n set id(value: string) {\n this._id = value || this._uid;\n this.stateChanges.next();\n }\n private _id: string;\n\n /** Placeholder to be shown if value is empty. */\n @Input()\n get placeholder(): string {\n return this._placeholder;\n }\n set placeholder(value: string) {\n this._placeholder = value;\n this.stateChanges.next();\n }\n private _placeholder: string;\n\n /** Whether the input is focused. */\n get focused(): boolean {\n return this._focused || this._panelOpen;\n }\n private _focused = false;\n\n get empty(): boolean {\n return !this.value;\n }\n\n get shouldLabelFloat(): boolean {\n return this.focused || !this.empty;\n }\n\n @Input()\n get required(): boolean {\n return this._required;\n }\n set required(value: boolean) {\n this._required = coerceBooleanProperty(value);\n this.stateChanges.next();\n }\n private _required = false;\n\n @Input()\n get disabled(): boolean {\n return this._disabled;\n }\n set disabled(value: boolean) {\n this._disabled = coerceBooleanProperty(value);\n this.stateChanges.next();\n }\n private _disabled = false;\n\n errorState = false;\n\n /** A name for this control that can be used by `mat-form-field`. */\n controlType = 'mtx-color-picker';\n\n /** The aria-describedby attribute on the color picker for improved a11y. */\n _ariaDescribedby: string;\n\n /** `View -> model callback called when value changes` */\n _onChange: (value: any) => void = () => {};\n\n /** `View -> model callback called when color picker has been touched` */\n _onTouched = () => {};\n\n /** Event emitted when the color changed */\n @Output() readonly colorChange = new EventEmitter<ColorEvent>();\n\n @ViewChild(MatMenuTrigger, { static: true }) trigger: MatMenuTrigger;\n\n /** Whether or not the overlay panel is open. */\n _panelOpen = false;\n\n /** The subscription for closing actions (some are bound to document). */\n private _closingActionsSubscription: Subscription;\n\n /** Whether the element is inside of a ShadowRoot component. */\n private _isInsideShadowRoot: boolean;\n\n /**\n * Whether the color picker can open the next time it is focused. Used to prevent a focused,\n * closed color picker from being reopened if the user switches to another browser tab and then\n * comes back.\n */\n private _canOpenOnNextFocus = true;\n\n /**\n * Event handler for when the window is blurred. Needs to be an\n * arrow function in order to preserve the context.\n */\n private _windowBlurHandler = () => {\n // If the user blurred the window while the color picker is focused, it means that it'll be\n // refocused when they come back. In this case we want to skip the first focus event, if the\n // pane was closed, in order to avoid reopening it unintentionally.\n this._canOpenOnNextFocus =\n this._document.activeElement !== this._elementRef.nativeElement || this._panelOpen;\n };\n\n constructor(\n private _focusMonitor: FocusMonitor,\n private _elementRef: ElementRef<HTMLElement>,\n private _changeDetectorRef: ChangeDetectorRef,\n private _zone: NgZone,\n @Optional() @Self() public ngControl: NgControl,\n @Optional() @Host() private _formField: MatFormField,\n @Optional() @Inject(DOCUMENT) private _document: any\n ) {\n _focusMonitor.monitor(_elementRef, true).subscribe(origin => {\n if (this._focused && !origin) {\n this._onTouched();\n }\n this._focused = !!origin;\n this.stateChanges.next();\n });\n\n if (this.ngControl != null) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n ngDoCheck(): void {\n if (this.ngControl) {\n this.errorState = (this.ngControl.invalid && this.ngControl.touched) as boolean;\n this.stateChanges.next();\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== 'undefined') {\n this._zone.runOutsideAngular(() => {\n window.addEventListener('blur', this._windowBlurHandler);\n });\n\n if (_supportsShadowDom()) {\n const element = this._elementRef.nativeElement;\n const rootNode = element.getRootNode ? element.getRootNode() : null;\n\n // We need to take the `ShadowRoot` off of `window`, because the built-in types are\n // incorrect. See https://github.com/Microsoft/TypeScript/issues/27929.\n this._isInsideShadowRoot = rootNode instanceof (window as any).ShadowRoot;\n }\n }\n }\n\n ngOnDestroy() {\n this.stateChanges.complete();\n this._focusMonitor.stopMonitoring(this._elementRef);\n }\n\n /** Implemented as part of MatFormFieldControl. */\n setDescribedByIds(ids: string[]) {\n this._ariaDescribedby = ids.join(' ');\n }\n\n /** Implemented as part of MatFormFieldControl. */\n onContainerClick() {\n this._handleFocus();\n }\n\n /**\n * Sets the model value. Implemented as part of ControlValueAccessor.\n * @param value New value to be written to the model.\n */\n writeValue(value: string | null): void {\n this.value = value || '';\n this._changeDetectorRef.markForCheck();\n }\n\n /**\n * Registers a callback to be triggered when the model value changes.\n * Implemented as part of ControlValueAccessor.\n * @param fn Callback to be registered.\n */\n registerOnChange(fn: any): void {\n this._onChange = fn;\n }\n\n /**\n * Registers a callback to be triggered when the control is touched.\n * Implemented as part of ControlValueAccessor.\n * @param fn Callback to be registered.\n */\n registerOnTouched(fn: any): void {\n this._onTouched = fn;\n }\n\n /**\n * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.\n * @param isDisabled Whether the control should be disabled.\n */\n setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n }\n\n /** Open panel with input focus event. */\n _handleFocus() {\n this.trigger.openMenu();\n\n this._closingActionsSubscription = merge(this._getOutsideClickStream())\n .pipe()\n .subscribe(event => {\n this.trigger.closeMenu();\n this._closingActionsSubscription.unsubscribe();\n });\n }\n\n /** Opens the overlay panel. */\n _openPanel() {\n if (this._focused) {\n this._panelOpen = true;\n }\n }\n\n /** Closes the overlay panel and focuses the host element. */\n _closePanel() {\n if (this._panelOpen) {\n this._panelOpen = false;\n this._changeDetectorRef.markForCheck();\n this._onTouched();\n }\n }\n\n /** The callback of color changed. */\n _onColorChanged(model: ColorEvent) {\n this.value = model.color.hex;\n this.colorChange.emit(model);\n }\n\n /** Stream of clicks outside of the color picker panel. */\n private _getOutsideClickStream(): Observable<any> {\n return merge(\n fromEvent(this._document, 'click') as Observable<MouseEvent>,\n fromEvent(this._document, 'touchend') as Observable<TouchEvent>\n ).pipe(\n filter(event => {\n // If we're in the Shadow DOM, the event target will be the shadow root, so we have to\n // fall back to check the first element in the path of the click event.\n const clickTarget = (\n this._isInsideShadowRoot && event.composedPath ? event.composedPath()[0] : event.target\n ) as HTMLElement;\n const formField = this._formField ? this._formField._elementRef.nativeElement : null;\n\n return (\n clickTarget !== this._elementRef.nativeElement &&\n (!formField || !formField.contains(clickTarget))\n );\n })\n );\n }\n\n static ngAcceptInputType_required: BooleanInput;\n static ngAcceptInputType_disabled: BooleanInput;\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport { ColorChromeModule } from 'ngx-color/chrome';\n\nimport { MtxColorPickerComponent } from './color-picker.component';\n\n@NgModule({\n imports: [\n CommonModule,\n FormsModule,\n MatMenuModule,\n MatFormFieldModule,\n MatInputModule,\n ColorChromeModule,\n ],\n exports: [MtxColorPickerComponent],\n declarations: [MtxColorPickerComponent],\n})\nexport class MtxColorPickerModule {}\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":"mtxColorPicker.js","sources":["../../../projects/extensions/color-picker/color-picker.component.ts","../../../projects/extensions/color-picker/color-picker.module.ts","../../../projects/extensions/color-picker/mtxColorPicker.ts"],"sourcesContent":["import {\n Component,\n ViewEncapsulation,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n OnDestroy,\n Optional,\n Self,\n ElementRef,\n Input,\n Output,\n EventEmitter,\n Inject,\n DoCheck,\n ViewChild,\n Host,\n AfterViewInit,\n NgZone,\n} from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { FocusMonitor } from '@angular/cdk/a11y';\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { _supportsShadowDom } from '@angular/cdk/platform';\nimport { MatFormFieldControl, MatFormField } from '@angular/material/form-field';\nimport { MatMenuTrigger } from '@angular/material/menu';\nimport { Subject, Observable, merge, fromEvent, Subscription } from 'rxjs';\nimport { filter } from 'rxjs/operators';\n\nimport { ColorEvent } from 'ngx-color';\n\nlet nextUniqueId = 0;\n\n@Component({\n selector: 'mtx-color-picker',\n exportAs: 'mtxColorPicker',\n templateUrl: './color-picker.component.html',\n styleUrls: ['./color-picker.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [{ provide: MatFormFieldControl, useExisting: MtxColorPickerComponent }],\n})\nexport class MtxColorPickerComponent\n implements OnDestroy, DoCheck, AfterViewInit, ControlValueAccessor, MatFormFieldControl<any> {\n /** Value of the color picker control. */\n @Input()\n get value(): string | null {\n return this._value;\n }\n set value(newValue: string | null) {\n this._value = newValue;\n this._onChange(newValue);\n this.stateChanges.next();\n }\n private _value: string | null = '';\n\n /** Implemented as part of MatFormFieldControl. */\n readonly stateChanges: Subject<void> = new Subject<void>();\n\n /** Unique id for this input. */\n private _uid = `mtx-color-picker-${nextUniqueId++}`;\n\n /** Unique id of the element. */\n @Input()\n get id(): string {\n return this._id;\n }\n set id(value: string) {\n this._id = value || this._uid;\n this.stateChanges.next();\n }\n private _id: string;\n\n /** Placeholder to be shown if value is empty. */\n @Input()\n get placeholder(): string {\n return this._placeholder;\n }\n set placeholder(value: string) {\n this._placeholder = value;\n this.stateChanges.next();\n }\n private _placeholder: string;\n\n /** Whether the input is focused. */\n get focused(): boolean {\n return this._focused || this._panelOpen;\n }\n private _focused = false;\n\n get empty(): boolean {\n return !this.value;\n }\n\n get shouldLabelFloat(): boolean {\n return this.focused || !this.empty;\n }\n\n @Input()\n get required(): boolean {\n return this._required;\n }\n set required(value: boolean) {\n this._required = coerceBooleanProperty(value);\n this.stateChanges.next();\n }\n private _required = false;\n\n @Input()\n get disabled(): boolean {\n return this._disabled;\n }\n set disabled(value: boolean) {\n this._disabled = coerceBooleanProperty(value);\n this.stateChanges.next();\n }\n private _disabled = false;\n\n /** Whether the element is readonly. */\n @Input()\n get readonly(): boolean {\n return this._readonly;\n }\n set readonly(value: boolean) {\n this._readonly = coerceBooleanProperty(value);\n }\n private _readonly = false;\n\n errorState = false;\n\n /** A name for this control that can be used by `mat-form-field`. */\n controlType = 'mtx-color-picker';\n\n /** The aria-describedby attribute on the color picker for improved a11y. */\n _ariaDescribedby: string;\n\n /** `View -> model callback called when value changes` */\n _onChange: (value: any) => void = () => {};\n\n /** `View -> model callback called when color picker has been touched` */\n _onTouched = () => {};\n\n /** Event emitted when the color changed */\n @Output() readonly colorChange = new EventEmitter<ColorEvent>();\n\n @ViewChild(MatMenuTrigger, { static: true }) trigger: MatMenuTrigger;\n\n /** Whether or not the overlay panel is open. */\n _panelOpen = false;\n\n /** The subscription for closing actions (some are bound to document). */\n private _closingActionsSubscription: Subscription;\n\n /** Whether the element is inside of a ShadowRoot component. */\n private _isInsideShadowRoot: boolean;\n\n /**\n * Whether the color picker can open the next time it is focused. Used to prevent a focused,\n * closed color picker from being reopened if the user switches to another browser tab and then\n * comes back.\n */\n private _canOpenOnNextFocus = true;\n\n /**\n * Event handler for when the window is blurred. Needs to be an\n * arrow function in order to preserve the context.\n */\n private _windowBlurHandler = () => {\n // If the user blurred the window while the color picker is focused, it means that it'll be\n // refocused when they come back. In this case we want to skip the first focus event, if the\n // pane was closed, in order to avoid reopening it unintentionally.\n this._canOpenOnNextFocus =\n this._document.activeElement !== this._elementRef.nativeElement || this._panelOpen;\n };\n\n constructor(\n private _focusMonitor: FocusMonitor,\n private _elementRef: ElementRef<HTMLElement>,\n private _changeDetectorRef: ChangeDetectorRef,\n private _zone: NgZone,\n @Optional() @Self() public ngControl: NgControl,\n @Optional() @Host() private _formField: MatFormField,\n @Optional() @Inject(DOCUMENT) private _document: any\n ) {\n _focusMonitor.monitor(_elementRef, true).subscribe(origin => {\n if (this._focused && !origin) {\n this._onTouched();\n }\n this._focused = !!origin;\n this.stateChanges.next();\n });\n\n if (this.ngControl != null) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n ngDoCheck(): void {\n if (this.ngControl) {\n this.errorState = (this.ngControl.invalid && this.ngControl.touched) as boolean;\n this.stateChanges.next();\n }\n }\n\n ngAfterViewInit() {\n if (typeof window !== 'undefined') {\n this._zone.runOutsideAngular(() => {\n window.addEventListener('blur', this._windowBlurHandler);\n });\n\n if (_supportsShadowDom()) {\n const element = this._elementRef.nativeElement;\n const rootNode = element.getRootNode ? element.getRootNode() : null;\n\n // We need to take the `ShadowRoot` off of `window`, because the built-in types are\n // incorrect. See https://github.com/Microsoft/TypeScript/issues/27929.\n this._isInsideShadowRoot = rootNode instanceof (window as any).ShadowRoot;\n }\n }\n }\n\n ngOnDestroy() {\n this.stateChanges.complete();\n this._focusMonitor.stopMonitoring(this._elementRef);\n }\n\n /** Implemented as part of MatFormFieldControl. */\n setDescribedByIds(ids: string[]) {\n this._ariaDescribedby = ids.join(' ');\n }\n\n /** Implemented as part of MatFormFieldControl. */\n onContainerClick() {\n this._handleFocus();\n }\n\n /**\n * Sets the model value. Implemented as part of ControlValueAccessor.\n * @param value New value to be written to the model.\n */\n writeValue(value: string | null): void {\n this.value = value || '';\n this._changeDetectorRef.markForCheck();\n }\n\n /**\n * Registers a callback to be triggered when the model value changes.\n * Implemented as part of ControlValueAccessor.\n * @param fn Callback to be registered.\n */\n registerOnChange(fn: any): void {\n this._onChange = fn;\n }\n\n /**\n * Registers a callback to be triggered when the control is touched.\n * Implemented as part of ControlValueAccessor.\n * @param fn Callback to be registered.\n */\n registerOnTouched(fn: any): void {\n this._onTouched = fn;\n }\n\n /**\n * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.\n * @param isDisabled Whether the control should be disabled.\n */\n setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n }\n\n /** Open panel with input focus event. */\n _handleFocus() {\n this.trigger.openMenu();\n\n this._closingActionsSubscription = merge(this._getOutsideClickStream())\n .pipe()\n .subscribe(event => {\n this.trigger.closeMenu();\n this._closingActionsSubscription.unsubscribe();\n });\n }\n\n /** Opens the overlay panel. */\n _openPanel() {\n if (this._focused) {\n this._panelOpen = true;\n }\n }\n\n /** Closes the overlay panel and focuses the host element. */\n _closePanel() {\n if (this._panelOpen) {\n this._panelOpen = false;\n this._changeDetectorRef.markForCheck();\n this._onTouched();\n }\n }\n\n /** The callback of color changed. */\n _onColorChanged(model: ColorEvent) {\n this.value = model.color.hex;\n this.colorChange.emit(model);\n }\n\n /** Stream of clicks outside of the color picker panel. */\n private _getOutsideClickStream(): Observable<any> {\n return merge(\n fromEvent(this._document, 'click') as Observable<MouseEvent>,\n fromEvent(this._document, 'touchend') as Observable<TouchEvent>\n ).pipe(\n filter(event => {\n // If we're in the Shadow DOM, the event target will be the shadow root, so we have to\n // fall back to check the first element in the path of the click event.\n const clickTarget = (\n this._isInsideShadowRoot && event.composedPath ? event.composedPath()[0] : event.target\n ) as HTMLElement;\n const formField = this._formField ? this._formField._elementRef.nativeElement : null;\n\n return (\n clickTarget !== this._elementRef.nativeElement &&\n (!formField || !formField.contains(clickTarget))\n );\n })\n );\n }\n\n static ngAcceptInputType_required: BooleanInput;\n static ngAcceptInputType_readonly: BooleanInput;\n static ngAcceptInputType_disabled: BooleanInput;\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport { ColorChromeModule } from 'ngx-color/chrome';\n\nimport { MtxColorPickerComponent } from './color-picker.component';\n\n@NgModule({\n imports: [\n CommonModule,\n FormsModule,\n MatMenuModule,\n MatFormFieldModule,\n MatInputModule,\n ColorChromeModule,\n ],\n exports: [MtxColorPickerComponent],\n declarations: [MtxColorPickerComponent],\n})\nexport class MtxColorPickerModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"mtxFormGroup.js","sources":["../../../projects/extensions/form-group/form-group.component.ts","../../../projects/extensions/form-group/form-group.module.ts","../../../projects/extensions/form-group/mtxFormGroup.ts"],"sourcesContent":["import {\r\n AfterContentInit,\r\n Component,\r\n ContentChildren,\r\n Input,\r\n OnInit,\r\n QueryList,\r\n ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\r\nimport { MatFormField } from '@angular/material/form-field';\r\n\r\n@Component({\r\n selector: 'mtx-form-group',\r\n host: {\r\n class: 'mtx-form-group',\r\n },\r\n templateUrl: './form-group.component.html',\r\n styleUrls: ['./form-group.component.scss'],\r\n encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class MtxFormGroupComponent implements OnInit, AfterContentInit {\r\n @ContentChildren(MatFormField) formFields!: QueryList<MatFormField>;\r\n\r\n @Input() label: string;\r\n @Input()\r\n get showRequiredMarker() {\r\n return this._showRequiredMarker;\r\n }\r\n set showRequiredMarker(value: boolean) {\r\n this._showRequiredMarker = coerceBooleanProperty(value);\r\n }\r\n private _showRequiredMarker = false;\r\n\r\n constructor() {}\r\n\r\n ngOnInit(): void {}\r\n\r\n ngAfterContentInit() {\r\n this.formFields.forEach(item => {\r\n item.appearance = 'standard';\r\n });\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MtxFormGroupComponent } from './form-group.component';\n\n@NgModule({\n imports: [CommonModule],\n exports: [MtxFormGroupComponent],\n declarations: [MtxFormGroupComponent],\n})\nexport class MtxFormGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAqBa,qBAAqB;IAahC;QAFQ,wBAAmB,GAAG,KAAK,CAAC;KAEpB;IAThB,IACI,kBAAkB;QACpB,OAAO,IAAI,CAAC,mBAAmB,CAAC;KACjC;IACD,IAAI,kBAAkB,CAAC,KAAc;QACnC,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;KACzD;IAKD,QAAQ,MAAW;IAEnB,kBAAkB;QAChB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI;YAC1B,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;SAC9B,CAAC,CAAC;KACJ;;;YA9BF,SAAS,SAAC;gBACT,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,KAAK,EAAE,gBAAgB;iBACxB;gBACD,mRAA0C;gBAE1C,aAAa,EAAE,iBAAiB,CAAC,IAAI;;aACtC;;;;;yBAEE,eAAe,SAAC,YAAY;oBAE5B,KAAK;iCACL,KAAK;;;MCfK,kBAAkB;;;YAL9B,QAAQ,SAAC;gBACR,OAAO,EAAE,CAAC,YAAY,CAAC;gBACvB,OAAO,EAAE,CAAC,qBAAqB,CAAC;gBAChC,YAAY,EAAE,CAAC,qBAAqB,CAAC;aACtC;;;ACTD;;;;;;"}
1
+ {"version":3,"file":"mtxFormGroup.js","sources":["../../../projects/extensions/form-group/form-group.component.ts","../../../projects/extensions/form-group/form-group.module.ts","../../../projects/extensions/form-group/mtxFormGroup.ts"],"sourcesContent":["import {\r\n AfterContentInit,\r\n Component,\r\n ContentChildren,\r\n Input,\r\n OnInit,\r\n QueryList,\r\n ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\r\nimport { MatFormField } from '@angular/material/form-field';\r\n\r\n@Component({\r\n selector: 'mtx-form-group',\r\n host: {\r\n class: 'mtx-form-group',\r\n },\r\n templateUrl: './form-group.component.html',\r\n styleUrls: ['./form-group.component.scss'],\r\n encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class MtxFormGroupComponent implements OnInit, AfterContentInit {\r\n @ContentChildren(MatFormField) formFields!: QueryList<MatFormField>;\r\n\r\n @Input() label: string;\r\n @Input()\r\n get showRequiredMarker() {\r\n return this._showRequiredMarker;\r\n }\r\n set showRequiredMarker(value: boolean) {\r\n this._showRequiredMarker = coerceBooleanProperty(value);\r\n }\r\n private _showRequiredMarker = false;\r\n\r\n constructor() {}\r\n\r\n ngOnInit(): void {}\r\n\r\n ngAfterContentInit() {\r\n this.formFields.forEach(item => {\r\n item.appearance = 'standard';\r\n });\r\n }\r\n\r\n static ngAcceptInputType_showRequiredMarker: BooleanInput;\r\n}\r\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MtxFormGroupComponent } from './form-group.component';\n\n@NgModule({\n imports: [CommonModule],\n exports: [MtxFormGroupComponent],\n declarations: [MtxFormGroupComponent],\n})\nexport class MtxFormGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAqBa,qBAAqB;IAahC;QAFQ,wBAAmB,GAAG,KAAK,CAAC;KAEpB;IAThB,IACI,kBAAkB;QACpB,OAAO,IAAI,CAAC,mBAAmB,CAAC;KACjC;IACD,IAAI,kBAAkB,CAAC,KAAc;QACnC,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;KACzD;IAKD,QAAQ,MAAW;IAEnB,kBAAkB;QAChB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI;YAC1B,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;SAC9B,CAAC,CAAC;KACJ;;;YA9BF,SAAS,SAAC;gBACT,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,KAAK,EAAE,gBAAgB;iBACxB;gBACD,mRAA0C;gBAE1C,aAAa,EAAE,iBAAiB,CAAC,IAAI;;aACtC;;;;;yBAEE,eAAe,SAAC,YAAY;oBAE5B,KAAK;iCACL,KAAK;;;MCfK,kBAAkB;;;YAL9B,QAAQ,SAAC;gBACR,OAAO,EAAE,CAAC,YAAY,CAAC;gBACvB,OAAO,EAAE,CAAC,qBAAqB,CAAC;gBAChC,YAAY,EAAE,CAAC,qBAAqB,CAAC;aACtC;;;ACTD;;;;;;"}
@@ -77,7 +77,7 @@ class MtxGridComponent {
77
77
  this.length = 0;
78
78
  this.loading = false;
79
79
  this.columnResizable = false;
80
- // Page
80
+ // ===== Page =====
81
81
  this.pageOnFront = true;
82
82
  this.showPaginator = true;
83
83
  this.pageDisabled = false;
@@ -87,22 +87,22 @@ class MtxGridComponent {
87
87
  this.pageSizeOptions = [10, 50, 100];
88
88
  this.hidePageSize = false;
89
89
  this.page = new EventEmitter();
90
- // Sort
90
+ // ===== Sort =====
91
91
  this.sortOnFront = true;
92
92
  this.sortDisableClear = false;
93
93
  this.sortDisabled = false;
94
94
  this.sortStart = 'asc';
95
95
  this.sortChange = new EventEmitter();
96
- // Row
96
+ // ===== Row =====
97
97
  this.rowHover = false;
98
98
  this.rowStriped = false;
99
99
  this.rowClick = new EventEmitter();
100
- // Expansion
100
+ // ===== Expandable Row =====
101
101
  this.expansionRowStates = [];
102
102
  this.expandable = false;
103
103
  this.expansionChange = new EventEmitter();
104
- // Row selection
105
- /** Whether support multiple row/cell selection */
104
+ // ===== Row Selection =====
105
+ /** Whether support multiple row/cell selection. */
106
106
  this.multiSelectable = true;
107
107
  this.rowSelection = new SelectionModel(true, []);
108
108
  this.rowSelected = [];
@@ -110,14 +110,14 @@ class MtxGridComponent {
110
110
  this.hideRowSelectionCheckbox = false;
111
111
  this.rowSelectionFormatter = {};
112
112
  this.rowSelectionChange = new EventEmitter();
113
- // Cell selection
113
+ // ===== Cell Selection =====
114
114
  this.cellSelection = [];
115
115
  this.cellSelectable = true;
116
116
  this.cellSelectionChange = new EventEmitter();
117
- // Toolbar
117
+ // ===== Toolbar =====
118
118
  this.showToolbar = false;
119
119
  this.toolbarTitle = '';
120
- // Column menu
120
+ // ===== Column Menu =====
121
121
  this.columnMenuData = [];
122
122
  this.showColumnMenuButton = true;
123
123
  this.columnMenuButtonText = '';
@@ -133,13 +133,13 @@ class MtxGridComponent {
133
133
  this.columnMenuHeaderText = 'Columns Header';
134
134
  this.showColumnMenuFooter = false;
135
135
  this.columnMenuFooterText = 'Columns Footer';
136
- // No Result
136
+ // ===== No Result =====
137
137
  this.noResultText = 'No records found';
138
- // Summary
138
+ // ===== Summary =====
139
139
  this.showSummary = false;
140
- // Sidebar
140
+ // ===== Side Bar =====
141
141
  this.showSidebar = false;
142
- // Status bar
142
+ // ===== Status Bar =====
143
143
  this.showStatusbar = false;
144
144
  }
145
145
  get _hasNoResult() {
@@ -318,7 +318,7 @@ class MtxGridComponent {
318
318
  this.expansionRowStates[index].expanded = !this.expansionRowStates[index].expanded;
319
319
  return this.expansionRowStates[index].expanded;
320
320
  }
321
- /** Scroll to top when turn to the next page */
321
+ /** Scroll to top when turn to the next page. */
322
322
  _handlePage(e) {
323
323
  if (this.pageOnFront) {
324
324
  this.scrollTop(0);