@ni/nimble-angular 1.0.0-beta.99 → 1.0.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 (194) hide show
  1. package/README.md +87 -21
  2. package/bundles/ni-nimble-angular.umd.js +1313 -1047
  3. package/bundles/ni-nimble-angular.umd.js.map +1 -1
  4. package/directives/button/nimble-button.directive.d.ts +17 -5
  5. package/directives/button/nimble-button.module.d.ts +0 -6
  6. package/directives/button/nimble-button.module.ngfactory.d.ts +3 -0
  7. package/directives/checkbox/nimble-checkbox-control-value-accessor.directive.d.ts +0 -3
  8. package/directives/checkbox/nimble-checkbox.directive.d.ts +2 -3
  9. package/directives/checkbox/nimble-checkbox.module.d.ts +0 -7
  10. package/directives/checkbox/nimble-checkbox.module.ngfactory.d.ts +3 -0
  11. package/directives/drawer/nimble-drawer.directive.d.ts +25 -0
  12. package/directives/drawer/nimble-drawer.module.d.ts +3 -0
  13. package/directives/drawer/nimble-drawer.module.ngfactory.d.ts +3 -0
  14. package/directives/listbox-option/nimble-listbox-option.directive.d.ts +9 -7
  15. package/directives/listbox-option/nimble-listbox-option.module.d.ts +0 -6
  16. package/directives/listbox-option/nimble-listbox-option.module.ngfactory.d.ts +3 -0
  17. package/directives/menu/nimble-menu.directive.d.ts +7 -0
  18. package/directives/menu/nimble-menu.module.d.ts +3 -0
  19. package/directives/menu/nimble-menu.module.ngfactory.d.ts +3 -0
  20. package/directives/menu-item/nimble-menu-item.directive.d.ts +14 -0
  21. package/directives/menu-item/nimble-menu-item.module.d.ts +3 -0
  22. package/directives/menu-item/nimble-menu-item.module.ngfactory.d.ts +3 -0
  23. package/directives/number-field/nimble-number-field-control-value-accessor.directive.d.ts +9 -0
  24. package/directives/number-field/nimble-number-field.directive.d.ts +17 -8
  25. package/directives/number-field/nimble-number-field.module.d.ts +0 -7
  26. package/directives/number-field/nimble-number-field.module.ngfactory.d.ts +3 -0
  27. package/directives/select/nimble-select-control-value-accessor.directive.d.ts +0 -3
  28. package/directives/select/nimble-select.directive.d.ts +2 -3
  29. package/directives/select/nimble-select.module.d.ts +0 -7
  30. package/directives/select/nimble-select.module.ngfactory.d.ts +3 -0
  31. package/directives/tab/nimble-tab.directive.d.ts +9 -4
  32. package/directives/tab/nimble-tab.module.d.ts +0 -6
  33. package/directives/tab/nimble-tab.module.ngfactory.d.ts +3 -0
  34. package/directives/tab-panel/nimble-tab-panel.directive.d.ts +2 -3
  35. package/directives/tab-panel/nimble-tab-panel.module.d.ts +0 -6
  36. package/directives/tab-panel/nimble-tab-panel.module.ngfactory.d.ts +3 -0
  37. package/directives/tabs/nimble-tabs.directive.d.ts +9 -9
  38. package/directives/tabs/nimble-tabs.module.d.ts +0 -6
  39. package/directives/tabs/nimble-tabs.module.ngfactory.d.ts +3 -0
  40. package/directives/tabs-toolbar/nimble-tabs-toolbar.directive.d.ts +2 -3
  41. package/directives/tabs-toolbar/nimble-tabs-toolbar.module.d.ts +0 -6
  42. package/directives/tabs-toolbar/nimble-tabs-toolbar.module.ngfactory.d.ts +3 -0
  43. package/directives/text-field/nimble-text-field-control-value-accessor.directive.d.ts +9 -0
  44. package/directives/text-field/nimble-text-field.directive.d.ts +14 -4
  45. package/directives/text-field/nimble-text-field.module.d.ts +0 -7
  46. package/directives/text-field/nimble-text-field.module.ngfactory.d.ts +3 -0
  47. package/directives/theme-provider/nimble-theme-provider.directive.d.ts +11 -4
  48. package/directives/theme-provider/nimble-theme-provider.module.d.ts +0 -6
  49. package/directives/theme-provider/nimble-theme-provider.module.ngfactory.d.ts +3 -0
  50. package/directives/tree-item/nimble-tree-item.directive.d.ts +14 -13
  51. package/directives/tree-item/nimble-tree-item.module.d.ts +0 -6
  52. package/directives/tree-item/nimble-tree-item.module.ngfactory.d.ts +3 -0
  53. package/directives/tree-view/nimble-tree-view.directive.d.ts +11 -3
  54. package/directives/tree-view/nimble-tree-view.module.d.ts +0 -6
  55. package/directives/tree-view/nimble-tree-view.module.ngfactory.d.ts +3 -0
  56. package/directives/utilities/template-value-helpers.d.ts +20 -0
  57. package/esm2015/directives/button/nimble-button.directive.js +50 -21
  58. package/esm2015/directives/button/nimble-button.directive.ngsummary.json +1 -0
  59. package/esm2015/directives/button/nimble-button.module.js +8 -13
  60. package/esm2015/directives/button/nimble-button.module.ngfactory.js +12 -0
  61. package/esm2015/directives/button/nimble-button.module.ngsummary.json +1 -0
  62. package/esm2015/directives/checkbox/nimble-checkbox-control-value-accessor.directive.js +14 -22
  63. package/esm2015/directives/checkbox/nimble-checkbox-control-value-accessor.directive.ngsummary.json +1 -0
  64. package/esm2015/directives/checkbox/nimble-checkbox.directive.js +6 -10
  65. package/esm2015/directives/checkbox/nimble-checkbox.directive.ngsummary.json +1 -0
  66. package/esm2015/directives/checkbox/nimble-checkbox.module.js +8 -13
  67. package/esm2015/directives/checkbox/nimble-checkbox.module.ngfactory.js +12 -0
  68. package/esm2015/directives/checkbox/nimble-checkbox.module.ngsummary.json +1 -0
  69. package/esm2015/directives/drawer/nimble-drawer.directive.js +60 -0
  70. package/esm2015/directives/drawer/nimble-drawer.directive.ngsummary.json +1 -0
  71. package/esm2015/directives/drawer/nimble-drawer.module.js +14 -0
  72. package/esm2015/directives/drawer/nimble-drawer.module.ngfactory.js +12 -0
  73. package/esm2015/directives/drawer/nimble-drawer.module.ngsummary.json +1 -0
  74. package/esm2015/directives/listbox-option/nimble-listbox-option.directive.js +27 -23
  75. package/esm2015/directives/listbox-option/nimble-listbox-option.directive.ngsummary.json +1 -0
  76. package/esm2015/directives/listbox-option/nimble-listbox-option.module.js +8 -13
  77. package/esm2015/directives/listbox-option/nimble-listbox-option.module.ngfactory.js +12 -0
  78. package/esm2015/directives/listbox-option/nimble-listbox-option.module.ngsummary.json +1 -0
  79. package/esm2015/directives/menu/nimble-menu.directive.js +12 -0
  80. package/esm2015/directives/menu/nimble-menu.directive.ngsummary.json +1 -0
  81. package/esm2015/directives/menu/nimble-menu.module.js +14 -0
  82. package/esm2015/directives/menu/nimble-menu.module.ngfactory.js +12 -0
  83. package/esm2015/directives/menu/nimble-menu.module.ngsummary.json +1 -0
  84. package/esm2015/directives/menu-item/nimble-menu-item.directive.js +30 -0
  85. package/esm2015/directives/menu-item/nimble-menu-item.directive.ngsummary.json +1 -0
  86. package/esm2015/directives/menu-item/nimble-menu-item.module.js +14 -0
  87. package/esm2015/directives/menu-item/nimble-menu-item.module.ngfactory.js +12 -0
  88. package/esm2015/directives/menu-item/nimble-menu-item.module.ngsummary.json +1 -0
  89. package/esm2015/directives/number-field/nimble-number-field-control-value-accessor.directive.js +24 -0
  90. package/esm2015/directives/number-field/nimble-number-field-control-value-accessor.directive.ngsummary.json +1 -0
  91. package/esm2015/directives/number-field/nimble-number-field.directive.js +56 -36
  92. package/esm2015/directives/number-field/nimble-number-field.directive.ngsummary.json +1 -0
  93. package/esm2015/directives/number-field/nimble-number-field.module.js +9 -15
  94. package/esm2015/directives/number-field/nimble-number-field.module.ngfactory.js +12 -0
  95. package/esm2015/directives/number-field/nimble-number-field.module.ngsummary.json +1 -0
  96. package/esm2015/directives/select/nimble-select-control-value-accessor.directive.js +14 -22
  97. package/esm2015/directives/select/nimble-select-control-value-accessor.directive.ngsummary.json +1 -0
  98. package/esm2015/directives/select/nimble-select.directive.js +6 -10
  99. package/esm2015/directives/select/nimble-select.directive.ngsummary.json +1 -0
  100. package/esm2015/directives/select/nimble-select.module.js +8 -13
  101. package/esm2015/directives/select/nimble-select.module.ngfactory.js +12 -0
  102. package/esm2015/directives/select/nimble-select.module.ngsummary.json +1 -0
  103. package/esm2015/directives/tab/nimble-tab.directive.js +25 -16
  104. package/esm2015/directives/tab/nimble-tab.directive.ngsummary.json +1 -0
  105. package/esm2015/directives/tab/nimble-tab.module.js +8 -13
  106. package/esm2015/directives/tab/nimble-tab.module.ngfactory.js +12 -0
  107. package/esm2015/directives/tab/nimble-tab.module.ngsummary.json +1 -0
  108. package/esm2015/directives/tab-panel/nimble-tab-panel.directive.js +6 -10
  109. package/esm2015/directives/tab-panel/nimble-tab-panel.directive.ngsummary.json +1 -0
  110. package/esm2015/directives/tab-panel/nimble-tab-panel.module.js +8 -13
  111. package/esm2015/directives/tab-panel/nimble-tab-panel.module.ngfactory.js +12 -0
  112. package/esm2015/directives/tab-panel/nimble-tab-panel.module.ngsummary.json +1 -0
  113. package/esm2015/directives/tabs/nimble-tabs.directive.js +29 -25
  114. package/esm2015/directives/tabs/nimble-tabs.directive.ngsummary.json +1 -0
  115. package/esm2015/directives/tabs/nimble-tabs.module.js +8 -13
  116. package/esm2015/directives/tabs/nimble-tabs.module.ngfactory.js +12 -0
  117. package/esm2015/directives/tabs/nimble-tabs.module.ngsummary.json +1 -0
  118. package/esm2015/directives/tabs-toolbar/nimble-tabs-toolbar.directive.js +6 -10
  119. package/esm2015/directives/tabs-toolbar/nimble-tabs-toolbar.directive.ngsummary.json +1 -0
  120. package/esm2015/directives/tabs-toolbar/nimble-tabs-toolbar.module.js +8 -13
  121. package/esm2015/directives/tabs-toolbar/nimble-tabs-toolbar.module.ngfactory.js +12 -0
  122. package/esm2015/directives/tabs-toolbar/nimble-tabs-toolbar.module.ngsummary.json +1 -0
  123. package/esm2015/directives/text-field/nimble-text-field-control-value-accessor.directive.js +29 -0
  124. package/esm2015/directives/text-field/nimble-text-field-control-value-accessor.directive.ngsummary.json +1 -0
  125. package/esm2015/directives/text-field/nimble-text-field.directive.js +37 -16
  126. package/esm2015/directives/text-field/nimble-text-field.directive.ngsummary.json +1 -0
  127. package/esm2015/directives/text-field/nimble-text-field.module.js +9 -15
  128. package/esm2015/directives/text-field/nimble-text-field.module.ngfactory.js +12 -0
  129. package/esm2015/directives/text-field/nimble-text-field.module.ngsummary.json +1 -0
  130. package/esm2015/directives/theme-provider/nimble-theme-provider.directive.js +26 -16
  131. package/esm2015/directives/theme-provider/nimble-theme-provider.directive.ngsummary.json +1 -0
  132. package/esm2015/directives/theme-provider/nimble-theme-provider.module.js +8 -13
  133. package/esm2015/directives/theme-provider/nimble-theme-provider.module.ngfactory.js +12 -0
  134. package/esm2015/directives/theme-provider/nimble-theme-provider.module.ngsummary.json +1 -0
  135. package/esm2015/directives/tree-item/nimble-tree-item.directive.js +43 -52
  136. package/esm2015/directives/tree-item/nimble-tree-item.directive.ngsummary.json +1 -0
  137. package/esm2015/directives/tree-item/nimble-tree-item.module.js +8 -13
  138. package/esm2015/directives/tree-item/nimble-tree-item.module.ngfactory.js +12 -0
  139. package/esm2015/directives/tree-item/nimble-tree-item.module.ngsummary.json +1 -0
  140. package/esm2015/directives/tree-view/nimble-tree-view.directive.js +28 -11
  141. package/esm2015/directives/tree-view/nimble-tree-view.directive.ngsummary.json +1 -0
  142. package/esm2015/directives/tree-view/nimble-tree-view.module.js +8 -13
  143. package/esm2015/directives/tree-view/nimble-tree-view.module.ngfactory.js +12 -0
  144. package/esm2015/directives/tree-view/nimble-tree-view.module.ngsummary.json +1 -0
  145. package/esm2015/directives/utilities/template-value-helpers.js +37 -0
  146. package/esm2015/directives/utilities/template-value-helpers.ngsummary.json +1 -0
  147. package/esm2015/ni-nimble-angular.ngsummary.json +1 -0
  148. package/esm2015/public-api.js +38 -15
  149. package/esm2015/public-api.ngsummary.json +1 -0
  150. package/esm2015/testing/async-helpers.js +12 -0
  151. package/esm2015/testing/async-helpers.ngsummary.json +1 -0
  152. package/fesm2015/ni-nimble-angular.js +714 -540
  153. package/fesm2015/ni-nimble-angular.js.map +1 -1
  154. package/ni-nimble-angular.d.ts +0 -1
  155. package/ni-nimble-angular.metadata.json +1 -0
  156. package/package.json +4 -20
  157. package/public-api.d.ts +37 -14
  158. package/styles/fonts.scss +4 -0
  159. package/styles/tokens.scss +6 -0
  160. package/testing/async-helpers.d.ts +11 -0
  161. package/directives/button/index.d.ts +0 -2
  162. package/directives/checkbox/index.d.ts +0 -3
  163. package/directives/control-value-accessor/index.d.ts +0 -3
  164. package/directives/control-value-accessor/nimble-control-value-accessor.module.d.ts +0 -9
  165. package/directives/control-value-accessor/nimble-default-control-value-accessor.directive.d.ts +0 -12
  166. package/directives/control-value-accessor/nimble-number-control-value-accessor.directive.d.ts +0 -12
  167. package/directives/listbox-option/index.d.ts +0 -2
  168. package/directives/number-field/index.d.ts +0 -2
  169. package/directives/select/index.d.ts +0 -3
  170. package/directives/tab/index.d.ts +0 -2
  171. package/directives/tab-panel/index.d.ts +0 -2
  172. package/directives/tabs/index.d.ts +0 -2
  173. package/directives/tabs-toolbar/index.d.ts +0 -2
  174. package/directives/text-field/index.d.ts +0 -2
  175. package/directives/theme-provider/index.d.ts +0 -2
  176. package/directives/tree-item/index.d.ts +0 -2
  177. package/directives/tree-view/index.d.ts +0 -2
  178. package/esm2015/directives/button/index.js +0 -3
  179. package/esm2015/directives/checkbox/index.js +0 -4
  180. package/esm2015/directives/control-value-accessor/index.js +0 -4
  181. package/esm2015/directives/control-value-accessor/nimble-control-value-accessor.module.js +0 -19
  182. package/esm2015/directives/control-value-accessor/nimble-default-control-value-accessor.directive.js +0 -37
  183. package/esm2015/directives/control-value-accessor/nimble-number-control-value-accessor.directive.js +0 -32
  184. package/esm2015/directives/listbox-option/index.js +0 -3
  185. package/esm2015/directives/number-field/index.js +0 -3
  186. package/esm2015/directives/select/index.js +0 -4
  187. package/esm2015/directives/tab/index.js +0 -3
  188. package/esm2015/directives/tab-panel/index.js +0 -3
  189. package/esm2015/directives/tabs/index.js +0 -3
  190. package/esm2015/directives/tabs-toolbar/index.js +0 -3
  191. package/esm2015/directives/text-field/index.js +0 -3
  192. package/esm2015/directives/theme-provider/index.js +0 -3
  193. package/esm2015/directives/tree-item/index.js +0 -3
  194. package/esm2015/directives/tree-view/index.js +0 -3
@@ -1,232 +1,237 @@
1
- import * as i0 from '@angular/core';
2
- import { Directive, HostBinding, Input, NgModule, forwardRef, Optional, Host, EventEmitter, Output, HostListener } from '@angular/core';
1
+ import { Directive, Renderer2, ElementRef, Input, NgModule, forwardRef, EventEmitter, Output, HostListener, Inject, Optional, Host } from '@angular/core';
2
+ export { ButtonAppearance } from '@ni/nimble-components/dist/esm/button/types';
3
3
  import { CommonModule } from '@angular/common';
4
- import '@ni/nimble-components/dist/esm/theme-provider';
5
- import { DefaultValueAccessor, NG_VALUE_ACCESSOR, NumberValueAccessor, SelectControlValueAccessor, NgSelectOption, CheckboxControlValueAccessor } from '@angular/forms';
6
- import '@ni/nimble-components/dist/esm/text-field';
7
- import '@ni/nimble-components/dist/esm/number-field';
8
- import '@ni/nimble-components/dist/esm/select';
9
- import '@ni/nimble-components/dist/esm/listbox-option';
10
4
  import '@ni/nimble-components/dist/esm/button';
11
- import '@ni/nimble-components/dist/esm/tree-view';
12
- import '@ni/nimble-components/dist/esm/tree-item';
5
+ import { CheckboxControlValueAccessor, NG_VALUE_ACCESSOR, SelectControlValueAccessor, NgSelectOption, NumberValueAccessor, DefaultValueAccessor } from '@angular/forms';
13
6
  import '@ni/nimble-components/dist/esm/checkbox';
14
- import '@ni/nimble-components/dist/esm/tabs';
7
+ import { DrawerState } from '@ni/nimble-components/dist/esm/drawer/types';
8
+ export { DrawerLocation, DrawerState } from '@ni/nimble-components/dist/esm/drawer/types';
9
+ import '@ni/nimble-components/dist/esm/drawer';
10
+ import '@ni/nimble-components/dist/esm/listbox-option';
11
+ import '@ni/nimble-components/dist/esm/menu';
12
+ import '@ni/nimble-components/dist/esm/menu-item';
13
+ import '@ni/nimble-components/dist/esm/number-field';
14
+ import '@ni/nimble-components/dist/esm/select';
15
15
  import '@ni/nimble-components/dist/esm/tab';
16
16
  import '@ni/nimble-components/dist/esm/tab-panel';
17
+ import '@ni/nimble-components/dist/esm/tabs';
17
18
  import '@ni/nimble-components/dist/esm/tabs-toolbar';
19
+ export { TextFieldType } from '@ni/nimble-components/dist/esm/text-field/types';
20
+ import '@ni/nimble-components/dist/esm/text-field';
21
+ export { Theme } from '@ni/nimble-components/dist/esm/theme-provider/types';
22
+ import '@ni/nimble-components/dist/esm/theme-provider';
23
+ import '@ni/nimble-components/dist/esm/tree-item';
24
+ export { TreeViewSelectionMode } from '@ni/nimble-components/dist/esm/tree-view/types';
25
+ import '@ni/nimble-components/dist/esm/tree-view';
26
+ import { waitForUpdatesAsync as waitForUpdatesAsync$1 } from '@ni/nimble-components/dist/esm/testing/async-helpers';
27
+ export { processUpdates } from '@ni/nimble-components/dist/esm/testing/async-helpers';
18
28
 
19
29
  /**
20
- * Directive for Angular integration for the theme provider
30
+ * Conversion helpers for values coming from template attributes or property bindings
21
31
  */
22
- class NimbleThemeProviderDirective {
23
- }
24
- NimbleThemeProviderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleThemeProviderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
25
- NimbleThemeProviderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: NimbleThemeProviderDirective, selector: "nimble-theme-provider", inputs: { theme: "theme" }, host: { properties: { "attr.theme": "this.theme" } }, ngImport: i0 });
26
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleThemeProviderDirective, decorators: [{
27
- type: Directive,
28
- args: [{
29
- selector: 'nimble-theme-provider'
30
- }]
31
- }], propDecorators: { theme: [{
32
- type: HostBinding,
33
- args: ['attr.theme']
34
- }, {
35
- type: Input
36
- }] } });
37
-
38
- class NimbleThemeProviderModule {
39
- }
40
- NimbleThemeProviderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleThemeProviderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
41
- NimbleThemeProviderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleThemeProviderModule, declarations: [NimbleThemeProviderDirective], imports: [CommonModule], exports: [NimbleThemeProviderDirective] });
42
- NimbleThemeProviderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleThemeProviderModule, imports: [[CommonModule]] });
43
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleThemeProviderModule, decorators: [{
44
- type: NgModule,
45
- args: [{
46
- declarations: [NimbleThemeProviderDirective],
47
- imports: [CommonModule],
48
- exports: [NimbleThemeProviderDirective]
49
- }]
50
- }] });
51
-
52
32
  /**
53
- * Directive to provide Angular integration for the text field
33
+ * Converts values from templates (empty string or null) or boolean bindings to a boolean property representation
54
34
  */
55
- class NimbleTextFieldDirective {
56
- }
57
- NimbleTextFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTextFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
58
- NimbleTextFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: NimbleTextFieldDirective, selector: "nimble-text-field", inputs: { readonly: "readonly" }, host: { properties: { "attr.readonly": "this.readonly" } }, ngImport: i0 });
59
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTextFieldDirective, decorators: [{
60
- type: Directive,
61
- args: [{
62
- selector: 'nimble-text-field'
63
- }]
64
- }], propDecorators: { readonly: [{
65
- type: HostBinding,
66
- args: ['attr.readonly']
67
- }, {
68
- type: Input
69
- }] } });
35
+ const toBooleanProperty = (value) => {
36
+ if (value === false || value === null) {
37
+ return false;
38
+ }
39
+ // For boolean attributes the empty string value is true
40
+ return true;
41
+ };
42
+ /**
43
+ * Converts values from templates (empty string or null) or boolean bindings to an Aria boolean
44
+ * attribute representation (the strings "true" or "false")
45
+ */
46
+ const toBooleanAriaAttribute = (value) => {
47
+ if (value === false || value === null) {
48
+ return 'false';
49
+ }
50
+ // For boolean attributes the empty string value is true
51
+ return 'true';
52
+ };
53
+ /**
54
+ * Converts values from templates (number representation as a string) or number bindings to a number property representation
55
+ */
56
+ const toNumberProperty = (value) => {
57
+ // Angular: https://github.com/angular/angular/blob/2664bc2b3ef4ee5fd671f915828cfcc274a36c77/packages/forms/src/directives/number_value_accessor.ts#L67
58
+ // And Fast: https://github.com/microsoft/fast/blob/46bb6d9aab2c37105f4434db3795e176c2354a4f/packages/web-components/fast-element/src/components/attributes.ts#L100
59
+ // Handle numeric conversions from the view differently
60
+ // Since Number(val) https://tc39.es/ecma262/multipage/numbers-and-dates.html#sec-number-constructor-number-value
61
+ // and val * 1 https://tc39.es/ecma262/multipage/ecmascript-language-expressions.html#sec-applystringornumericbinaryoperator
62
+ // Are identical (use ToNumeric algorithm), went with Number() for clarity
63
+ return Number(value);
64
+ };
70
65
 
71
66
  /**
72
- * Extension of Angular's DefaultValueAccessor to target the text-based inputs.
73
- *
74
- * Directive decorator based on DefaultValueAccessor decorator
75
- * https://github.com/angular/angular/blob/master/packages/forms/src/directives/default_value_accessor.ts#L72
67
+ * Directive to provide Angular integration for the button.
76
68
  */
77
- class NimbleDefaultControlValueAccessorDirective extends DefaultValueAccessor {
78
- }
79
- NimbleDefaultControlValueAccessorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleDefaultControlValueAccessorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
80
- NimbleDefaultControlValueAccessorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: NimbleDefaultControlValueAccessorDirective, selector: "nimble-text-field[formControlName],nimble-text-field[formControl],nimble-text-field[ngModel]", host: { listeners: { "input": "$any(this)._handleInput($event.target.value)", "blur": "onTouched()", "compositionstart": "$any(this)._compositionStart()", "compositionend": "$any(this)._compositionEnd($event.target.value)" } }, providers: [{
81
- provide: NG_VALUE_ACCESSOR,
82
- useExisting: forwardRef(() => NimbleDefaultControlValueAccessorDirective),
83
- multi: true
84
- }], usesInheritance: true, ngImport: i0 });
85
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleDefaultControlValueAccessorDirective, decorators: [{
86
- type: Directive,
87
- args: [{
88
- selector: 'nimble-text-field[formControlName],nimble-text-field[formControl],nimble-text-field[ngModel]',
89
- // The following host metadata is duplicated from DefaultValueAccessor
90
- // eslint-disable-next-line @angular-eslint/no-host-metadata-property
91
- host: {
92
- '(input)': '$any(this)._handleInput($event.target.value)',
93
- '(blur)': 'onTouched()',
94
- '(compositionstart)': '$any(this)._compositionStart()',
95
- '(compositionend)': '$any(this)._compositionEnd($event.target.value)'
96
- },
97
- providers: [{
98
- provide: NG_VALUE_ACCESSOR,
99
- useExisting: forwardRef(() => NimbleDefaultControlValueAccessorDirective),
100
- multi: true
101
- }]
102
- }]
103
- }] });
69
+ class NimbleButtonDirective {
70
+ constructor(renderer, elementRef) {
71
+ this.renderer = renderer;
72
+ this.elementRef = elementRef;
73
+ }
74
+ get appearance() {
75
+ return this.elementRef.nativeElement.appearance;
76
+ }
77
+ set appearance(value) {
78
+ this.renderer.setProperty(this.elementRef.nativeElement, 'appearance', value);
79
+ }
80
+ get disabled() {
81
+ return this.elementRef.nativeElement.disabled;
82
+ }
83
+ set disabled(value) {
84
+ this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', toBooleanProperty(value));
85
+ }
86
+ get type() {
87
+ return this.elementRef.nativeElement.type;
88
+ }
89
+ set type(value) {
90
+ this.renderer.setProperty(this.elementRef.nativeElement, 'type', value);
91
+ }
92
+ get contentHidden() {
93
+ return this.elementRef.nativeElement.contentHidden;
94
+ }
95
+ // contentHidden property intentionally maps to the content-hidden attribute
96
+ // eslint-disable-next-line @angular-eslint/no-input-rename
97
+ set contentHidden(value) {
98
+ this.renderer.setProperty(this.elementRef.nativeElement, 'contentHidden', toBooleanProperty(value));
99
+ }
100
+ }
101
+ NimbleButtonDirective.decorators = [
102
+ { type: Directive, args: [{
103
+ selector: 'nimble-button'
104
+ },] }
105
+ ];
106
+ NimbleButtonDirective.ctorParameters = () => [
107
+ { type: Renderer2 },
108
+ { type: ElementRef }
109
+ ];
110
+ NimbleButtonDirective.propDecorators = {
111
+ appearance: [{ type: Input }],
112
+ disabled: [{ type: Input }],
113
+ type: [{ type: Input }],
114
+ contentHidden: [{ type: Input, args: ['content-hidden',] }]
115
+ };
116
+
117
+ class NimbleButtonModule {
118
+ }
119
+ NimbleButtonModule.decorators = [
120
+ { type: NgModule, args: [{
121
+ declarations: [NimbleButtonDirective],
122
+ imports: [CommonModule],
123
+ exports: [NimbleButtonDirective]
124
+ },] }
125
+ ];
104
126
 
105
127
  /**
106
- * Extension of Angular's NumberValueAccessor to target the number-based inputs.
128
+ * Extension of Angular's CheckboxControlValueAccessor to target the Nimble checkbox control.
107
129
  *
108
- * Directive decorator based on NumberValueAccessor decorator
109
- * https://github.com/angular/angular/blob/master/packages/forms/src/directives/number_value_accessor.ts#L43
130
+ * Directive decorator based on CheckboxControlValueAccessor decorator
131
+ * https://github.com/angular/angular/blob/master/packages/forms/src/directives/checkbox_value_accessor.ts#L42
110
132
  */
111
- class NimbleNumberControlValueAccessorDirective extends NumberValueAccessor {
112
- }
113
- NimbleNumberControlValueAccessorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleNumberControlValueAccessorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
114
- NimbleNumberControlValueAccessorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: NimbleNumberControlValueAccessorDirective, selector: "nimble-number-field[formControlName],nimble-number-field[formControl],nimble-number-field[ngModel]", host: { listeners: { "input": "onChange($event.target.value)", "blur": "onTouched()" } }, providers: [{
115
- provide: NG_VALUE_ACCESSOR,
116
- useExisting: forwardRef(() => NimbleNumberControlValueAccessorDirective),
117
- multi: true
118
- }], usesInheritance: true, ngImport: i0 });
119
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleNumberControlValueAccessorDirective, decorators: [{
120
- type: Directive,
121
- args: [{
122
- selector: 'nimble-number-field[formControlName],nimble-number-field[formControl],nimble-number-field[ngModel]',
123
- // The following host metadata is duplicated from NumberValueAccessor
124
- // eslint-disable-next-line @angular-eslint/no-host-metadata-property
125
- host: { '(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()' },
126
- providers: [{
127
- provide: NG_VALUE_ACCESSOR,
128
- useExisting: forwardRef(() => NimbleNumberControlValueAccessorDirective),
129
- multi: true
130
- }]
131
- }]
132
- }] });
133
-
134
- class NimbleControlValueAccessorModule {
135
- }
136
- NimbleControlValueAccessorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleControlValueAccessorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
137
- NimbleControlValueAccessorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleControlValueAccessorModule, declarations: [NimbleDefaultControlValueAccessorDirective, NimbleNumberControlValueAccessorDirective], imports: [CommonModule], exports: [NimbleDefaultControlValueAccessorDirective, NimbleNumberControlValueAccessorDirective] });
138
- NimbleControlValueAccessorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleControlValueAccessorModule, imports: [[CommonModule]] });
139
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleControlValueAccessorModule, decorators: [{
140
- type: NgModule,
141
- args: [{
142
- declarations: [NimbleDefaultControlValueAccessorDirective, NimbleNumberControlValueAccessorDirective],
143
- imports: [CommonModule],
144
- exports: [NimbleDefaultControlValueAccessorDirective, NimbleNumberControlValueAccessorDirective]
145
- }]
146
- }] });
147
-
148
- class NimbleTextFieldModule {
133
+ class NimbleCheckboxControlValueAccessorDirective extends CheckboxControlValueAccessor {
149
134
  }
150
- NimbleTextFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTextFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
151
- NimbleTextFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTextFieldModule, declarations: [NimbleTextFieldDirective], imports: [CommonModule, NimbleControlValueAccessorModule], exports: [NimbleTextFieldDirective, NimbleControlValueAccessorModule] });
152
- NimbleTextFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTextFieldModule, providers: [], imports: [[CommonModule, NimbleControlValueAccessorModule], NimbleControlValueAccessorModule] });
153
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTextFieldModule, decorators: [{
154
- type: NgModule,
155
- args: [{
156
- declarations: [NimbleTextFieldDirective],
157
- imports: [CommonModule, NimbleControlValueAccessorModule],
158
- providers: [],
159
- exports: [NimbleTextFieldDirective, NimbleControlValueAccessorModule]
160
- }]
161
- }] });
135
+ NimbleCheckboxControlValueAccessorDirective.decorators = [
136
+ { type: Directive, args: [{
137
+ selector: 'nimble-checkbox[formControlName],nimble-checkbox[formControl],nimble-checkbox[ngModel]',
138
+ // The following host metadata is duplicated from CheckboxControlValueAccessor
139
+ // eslint-disable-next-line @angular-eslint/no-host-metadata-property
140
+ host: { '(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()' },
141
+ providers: [{
142
+ provide: NG_VALUE_ACCESSOR,
143
+ useExisting: forwardRef(() => NimbleCheckboxControlValueAccessorDirective),
144
+ multi: true
145
+ }]
146
+ },] }
147
+ ];
162
148
 
163
149
  /**
164
- * Directive to provide Angular integration for the number field.
150
+ * Directive to provide Angular integration for the checkbox.
165
151
  */
166
- class NimbleNumberFieldDirective {
152
+ class NimbleCheckboxDirective {
167
153
  }
168
- NimbleNumberFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleNumberFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
169
- NimbleNumberFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: NimbleNumberFieldDirective, selector: "nimble-number-field", inputs: { readonly: "readonly", min: "min", max: "max", step: "step", placeholder: "placeholder" }, host: { properties: { "attr.readonly": "this.readonly", "attr.min": "this.min", "attr.max": "this.max", "attr.step": "this.step", "attr.placeholder": "this.placeholder" } }, ngImport: i0 });
170
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleNumberFieldDirective, decorators: [{
171
- type: Directive,
172
- args: [{
173
- selector: 'nimble-number-field'
174
- }]
175
- }], propDecorators: { readonly: [{
176
- type: HostBinding,
177
- args: ['attr.readonly']
178
- }, {
179
- type: Input
180
- }], min: [{
181
- type: HostBinding,
182
- args: ['attr.min']
183
- }, {
184
- type: Input
185
- }], max: [{
186
- type: HostBinding,
187
- args: ['attr.max']
188
- }, {
189
- type: Input
190
- }], step: [{
191
- type: HostBinding,
192
- args: ['attr.step']
193
- }, {
194
- type: Input
195
- }], placeholder: [{
196
- type: HostBinding,
197
- args: ['attr.placeholder']
198
- }, {
199
- type: Input
200
- }] } });
154
+ NimbleCheckboxDirective.decorators = [
155
+ { type: Directive, args: [{
156
+ selector: 'nimble-checkbox'
157
+ },] }
158
+ ];
201
159
 
202
- class NimbleNumberFieldModule {
160
+ class NimbleCheckboxModule {
203
161
  }
204
- NimbleNumberFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleNumberFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
205
- NimbleNumberFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleNumberFieldModule, declarations: [NimbleNumberFieldDirective], imports: [CommonModule, NimbleControlValueAccessorModule], exports: [NimbleNumberFieldDirective, NimbleControlValueAccessorModule] });
206
- NimbleNumberFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleNumberFieldModule, providers: [], imports: [[CommonModule, NimbleControlValueAccessorModule], NimbleControlValueAccessorModule] });
207
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleNumberFieldModule, decorators: [{
208
- type: NgModule,
209
- args: [{
210
- declarations: [NimbleNumberFieldDirective],
211
- imports: [CommonModule, NimbleControlValueAccessorModule],
212
- providers: [],
213
- exports: [NimbleNumberFieldDirective, NimbleControlValueAccessorModule]
214
- }]
215
- }] });
162
+ NimbleCheckboxModule.decorators = [
163
+ { type: NgModule, args: [{
164
+ declarations: [NimbleCheckboxDirective, NimbleCheckboxControlValueAccessorDirective],
165
+ imports: [CommonModule],
166
+ exports: [NimbleCheckboxDirective, NimbleCheckboxControlValueAccessorDirective]
167
+ },] }
168
+ ];
216
169
 
217
170
  /**
218
- * Directive for Nimble select control Angular integration
171
+ * Directive to provide Angular integration for the drawer.
219
172
  */
220
- class NimbleSelectDirective {
173
+ class NimbleDrawerDirective {
174
+ constructor(renderer, elementRef) {
175
+ this.renderer = renderer;
176
+ this.elementRef = elementRef;
177
+ this.stateChange = new EventEmitter();
178
+ }
179
+ get location() {
180
+ return this.elementRef.nativeElement.location;
181
+ }
182
+ set location(value) {
183
+ this.renderer.setProperty(this.elementRef.nativeElement, 'location', value);
184
+ }
185
+ get state() {
186
+ return this.elementRef.nativeElement.state;
187
+ }
188
+ set state(value) {
189
+ this.renderer.setProperty(this.elementRef.nativeElement, 'state', value);
190
+ }
191
+ get modal() {
192
+ return this.elementRef.nativeElement.modal;
193
+ }
194
+ set modal(value) {
195
+ this.renderer.setProperty(this.elementRef.nativeElement, 'modal', toBooleanProperty(value));
196
+ }
197
+ show() {
198
+ this.state = DrawerState.Opening;
199
+ }
200
+ hide() {
201
+ this.state = DrawerState.Closing;
202
+ }
203
+ onStateChanged($event) {
204
+ if ($event.target === this.elementRef.nativeElement) {
205
+ this.stateChange.emit(this.state);
206
+ }
207
+ }
221
208
  }
222
- NimbleSelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
223
- NimbleSelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: NimbleSelectDirective, selector: "nimble-select", ngImport: i0 });
224
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleSelectDirective, decorators: [{
225
- type: Directive,
226
- args: [{
227
- selector: 'nimble-select',
228
- }]
229
- }] });
209
+ NimbleDrawerDirective.decorators = [
210
+ { type: Directive, args: [{
211
+ selector: 'nimble-drawer'
212
+ },] }
213
+ ];
214
+ NimbleDrawerDirective.ctorParameters = () => [
215
+ { type: Renderer2 },
216
+ { type: ElementRef }
217
+ ];
218
+ NimbleDrawerDirective.propDecorators = {
219
+ location: [{ type: Input }],
220
+ state: [{ type: Input }],
221
+ modal: [{ type: Input }],
222
+ stateChange: [{ type: Output }],
223
+ onStateChanged: [{ type: HostListener, args: ['state-change', ['$event'],] }]
224
+ };
225
+
226
+ class NimbleDrawerModule {
227
+ }
228
+ NimbleDrawerModule.decorators = [
229
+ { type: NgModule, args: [{
230
+ declarations: [NimbleDrawerDirective],
231
+ imports: [CommonModule],
232
+ exports: [NimbleDrawerDirective]
233
+ },] }
234
+ ];
230
235
 
231
236
  /**
232
237
  * Extension of Angular's SelectControlValueAccessor to target the Nimble select control.
@@ -238,412 +243,581 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
238
243
  */
239
244
  class NimbleSelectControlValueAccessorDirective extends SelectControlValueAccessor {
240
245
  }
241
- NimbleSelectControlValueAccessorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleSelectControlValueAccessorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
242
- NimbleSelectControlValueAccessorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: NimbleSelectControlValueAccessorDirective, selector: "nimble-select:not([multiple])[formControlName],nimble-select:not([multiple])[formControl],nimble-select:not([multiple])[ngModel]", host: { listeners: { "change": "onChange($event.target.value)", "blur": "onTouched()" } }, providers: [{
243
- provide: NG_VALUE_ACCESSOR,
244
- useExisting: forwardRef(() => NimbleSelectControlValueAccessorDirective),
245
- multi: true
246
- }], usesInheritance: true, ngImport: i0 });
247
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleSelectControlValueAccessorDirective, decorators: [{
248
- type: Directive,
249
- args: [{
250
- selector: 'nimble-select:not([multiple])[formControlName],nimble-select:not([multiple])[formControl],nimble-select:not([multiple])[ngModel]',
251
- // The following host metadata is duplicated from SelectControlValueAccessor
252
- // eslint-disable-next-line @angular-eslint/no-host-metadata-property
253
- host: { '(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()' },
254
- providers: [{
255
- provide: NG_VALUE_ACCESSOR,
256
- useExisting: forwardRef(() => NimbleSelectControlValueAccessorDirective),
257
- multi: true
258
- }]
259
- }]
260
- }] });
261
-
262
- class NimbleSelectModule {
263
- }
264
- NimbleSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
265
- NimbleSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleSelectModule, declarations: [NimbleSelectDirective, NimbleSelectControlValueAccessorDirective], imports: [CommonModule], exports: [NimbleSelectDirective, NimbleSelectControlValueAccessorDirective] });
266
- NimbleSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleSelectModule, imports: [[CommonModule]] });
267
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleSelectModule, decorators: [{
268
- type: NgModule,
269
- args: [{
270
- declarations: [NimbleSelectDirective, NimbleSelectControlValueAccessorDirective],
271
- imports: [CommonModule],
272
- exports: [NimbleSelectDirective, NimbleSelectControlValueAccessorDirective]
273
- }]
274
- }] });
246
+ NimbleSelectControlValueAccessorDirective.decorators = [
247
+ { type: Directive, args: [{
248
+ selector: 'nimble-select:not([multiple])[formControlName],nimble-select:not([multiple])[formControl],nimble-select:not([multiple])[ngModel]',
249
+ // The following host metadata is duplicated from SelectControlValueAccessor
250
+ // eslint-disable-next-line @angular-eslint/no-host-metadata-property
251
+ host: { '(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()' },
252
+ providers: [{
253
+ provide: NG_VALUE_ACCESSOR,
254
+ useExisting: forwardRef(() => NimbleSelectControlValueAccessorDirective),
255
+ multi: true
256
+ }]
257
+ },] }
258
+ ];
275
259
 
276
260
  /**
277
261
  * Directive to provide Angular integration for the listbox option.
278
262
  */
279
263
  class NimbleListboxOptionDirective extends NgSelectOption {
280
- constructor(element, renderer, select) {
281
- super(element, renderer, select);
282
- }
283
- }
284
- NimbleListboxOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleListboxOptionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NimbleSelectControlValueAccessorDirective, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
285
- NimbleListboxOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: NimbleListboxOptionDirective, selector: "nimble-listbox-option", inputs: { disabled: "disabled" }, host: { properties: { "attr.disabled": "this.disabled" } }, usesInheritance: true, ngImport: i0 });
286
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleListboxOptionDirective, decorators: [{
287
- type: Directive,
288
- args: [{
289
- selector: 'nimble-listbox-option'
290
- }]
291
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: NimbleSelectControlValueAccessorDirective, decorators: [{
292
- type: Optional
293
- }, {
294
- type: Host
295
- }] }]; }, propDecorators: { disabled: [{
296
- type: HostBinding,
297
- args: ['attr.disabled']
298
- }, {
299
- type: Input
300
- }] } });
264
+ constructor(elementRef, renderer, select) {
265
+ super(elementRef, renderer, select);
266
+ this.elementRef = elementRef;
267
+ this.renderer = renderer;
268
+ }
269
+ get disabled() {
270
+ return this.elementRef.nativeElement.disabled;
271
+ }
272
+ set disabled(value) {
273
+ this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', toBooleanProperty(value));
274
+ }
275
+ }
276
+ NimbleListboxOptionDirective.decorators = [
277
+ { type: Directive, args: [{
278
+ selector: 'nimble-listbox-option'
279
+ },] }
280
+ ];
281
+ NimbleListboxOptionDirective.ctorParameters = () => [
282
+ { type: ElementRef },
283
+ { type: Renderer2 },
284
+ { type: NimbleSelectControlValueAccessorDirective, decorators: [{ type: Inject, args: [NimbleSelectControlValueAccessorDirective,] }, { type: Optional }, { type: Host }] }
285
+ ];
286
+ NimbleListboxOptionDirective.propDecorators = {
287
+ disabled: [{ type: Input }]
288
+ };
301
289
 
302
290
  class NimbleListboxOptionModule {
303
291
  }
304
- NimbleListboxOptionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleListboxOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
305
- NimbleListboxOptionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleListboxOptionModule, declarations: [NimbleListboxOptionDirective], imports: [CommonModule], exports: [NimbleListboxOptionDirective] });
306
- NimbleListboxOptionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleListboxOptionModule, imports: [[CommonModule]] });
307
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleListboxOptionModule, decorators: [{
308
- type: NgModule,
309
- args: [{
310
- declarations: [NimbleListboxOptionDirective],
311
- imports: [CommonModule],
312
- exports: [NimbleListboxOptionDirective]
313
- }]
314
- }] });
292
+ NimbleListboxOptionModule.decorators = [
293
+ { type: NgModule, args: [{
294
+ declarations: [NimbleListboxOptionDirective],
295
+ imports: [CommonModule],
296
+ exports: [NimbleListboxOptionDirective]
297
+ },] }
298
+ ];
315
299
 
316
300
  /**
317
- * Directive to provide Angular integration for the button.
301
+ * Directive to provide Angular integration for the menu.
318
302
  */
319
- class NimbleButtonDirective {
303
+ class NimbleMenuDirective {
320
304
  }
321
- NimbleButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
322
- NimbleButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: NimbleButtonDirective, selector: "nimble-button", inputs: { disabled: "disabled", appearance: "appearance" }, host: { properties: { "disabled": "this.disabled", "appearance": "this.appearance" } }, ngImport: i0 });
323
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleButtonDirective, decorators: [{
324
- type: Directive,
325
- args: [{
326
- selector: 'nimble-button'
327
- }]
328
- }], propDecorators: { disabled: [{
329
- type: HostBinding,
330
- args: ['disabled']
331
- }, {
332
- type: Input
333
- }], appearance: [{
334
- type: HostBinding,
335
- args: ['appearance']
336
- }, {
337
- type: Input
338
- }] } });
305
+ NimbleMenuDirective.decorators = [
306
+ { type: Directive, args: [{
307
+ selector: 'nimble-menu'
308
+ },] }
309
+ ];
339
310
 
340
- class NimbleButtonModule {
311
+ class NimbleMenuModule {
341
312
  }
342
- NimbleButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
343
- NimbleButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleButtonModule, declarations: [NimbleButtonDirective], imports: [CommonModule], exports: [NimbleButtonDirective] });
344
- NimbleButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleButtonModule, imports: [[CommonModule]] });
345
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleButtonModule, decorators: [{
346
- type: NgModule,
347
- args: [{
348
- declarations: [NimbleButtonDirective],
349
- imports: [CommonModule],
350
- exports: [NimbleButtonDirective]
351
- }]
352
- }] });
313
+ NimbleMenuModule.decorators = [
314
+ { type: NgModule, args: [{
315
+ declarations: [NimbleMenuDirective],
316
+ imports: [CommonModule],
317
+ exports: [NimbleMenuDirective]
318
+ },] }
319
+ ];
353
320
 
354
321
  /**
355
- * Directive to provide Angular integration for the tree view.
322
+ * Directive to provide Angular integration for the menu.
356
323
  */
357
- class NimbleTreeViewDirective {
324
+ class NimbleMenuItemDirective {
325
+ constructor(renderer, elementRef) {
326
+ this.renderer = renderer;
327
+ this.elementRef = elementRef;
328
+ }
329
+ get disabled() {
330
+ return this.elementRef.nativeElement.disabled;
331
+ }
332
+ set disabled(value) {
333
+ this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', toBooleanProperty(value));
334
+ }
358
335
  }
359
- NimbleTreeViewDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTreeViewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
360
- NimbleTreeViewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: NimbleTreeViewDirective, selector: "nimble-tree-view", ngImport: i0 });
361
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTreeViewDirective, decorators: [{
362
- type: Directive,
363
- args: [{
364
- selector: 'nimble-tree-view'
365
- }]
366
- }] });
336
+ NimbleMenuItemDirective.decorators = [
337
+ { type: Directive, args: [{
338
+ selector: 'nimble-menu-item'
339
+ },] }
340
+ ];
341
+ NimbleMenuItemDirective.ctorParameters = () => [
342
+ { type: Renderer2 },
343
+ { type: ElementRef }
344
+ ];
345
+ NimbleMenuItemDirective.propDecorators = {
346
+ disabled: [{ type: Input }]
347
+ };
348
+
349
+ class NimbleMenuItemModule {
350
+ }
351
+ NimbleMenuItemModule.decorators = [
352
+ { type: NgModule, args: [{
353
+ declarations: [NimbleMenuItemDirective],
354
+ imports: [CommonModule],
355
+ exports: [NimbleMenuItemDirective]
356
+ },] }
357
+ ];
367
358
 
368
- class NimbleTreeViewModule {
359
+ /**
360
+ * Extension of Angular's NumberValueAccessor to target the number-based inputs.
361
+ *
362
+ * Directive decorator based on NumberValueAccessor decorator
363
+ * https://github.com/angular/angular/blob/master/packages/forms/src/directives/number_value_accessor.ts#L43
364
+ */
365
+ class NimbleNumberFieldControlValueAccessorDirective extends NumberValueAccessor {
369
366
  }
370
- NimbleTreeViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTreeViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
371
- NimbleTreeViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTreeViewModule, declarations: [NimbleTreeViewDirective], imports: [CommonModule], exports: [NimbleTreeViewDirective] });
372
- NimbleTreeViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTreeViewModule, imports: [[CommonModule]] });
373
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTreeViewModule, decorators: [{
374
- type: NgModule,
375
- args: [{
376
- declarations: [NimbleTreeViewDirective],
377
- imports: [CommonModule],
378
- exports: [NimbleTreeViewDirective]
379
- }]
380
- }] });
367
+ NimbleNumberFieldControlValueAccessorDirective.decorators = [
368
+ { type: Directive, args: [{
369
+ selector: 'nimble-number-field[formControlName],nimble-number-field[formControl],nimble-number-field[ngModel]',
370
+ // The following host metadata is duplicated from NumberValueAccessor
371
+ // eslint-disable-next-line @angular-eslint/no-host-metadata-property
372
+ host: { '(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()' },
373
+ providers: [{
374
+ provide: NG_VALUE_ACCESSOR,
375
+ useExisting: forwardRef(() => NimbleNumberFieldControlValueAccessorDirective),
376
+ multi: true
377
+ }]
378
+ },] }
379
+ ];
381
380
 
382
381
  /**
383
- * Directive to provide Angular integration for the tree item.
382
+ * Directive to provide Angular integration for the number field.
384
383
  */
385
- class NimbleTreeItemDirective {
386
- constructor(treeItemReference) {
387
- this.treeItemReference = treeItemReference;
388
- this.selectedChange = new EventEmitter();
389
- this.expandedChange = new EventEmitter();
384
+ class NimbleNumberFieldDirective {
385
+ constructor(renderer, elementRef) {
386
+ this.renderer = renderer;
387
+ this.elementRef = elementRef;
390
388
  }
391
- onSelectedChange($event) {
392
- const treeItemElement = this.treeItemReference.nativeElement;
393
- if ($event.target === treeItemElement) {
394
- this.selected = treeItemElement.selected;
395
- this.selectedChange.emit(this.selected);
396
- }
389
+ get readOnly() {
390
+ return this.elementRef.nativeElement.readOnly;
397
391
  }
398
- onExpandedChange($event) {
399
- const treeItemElement = this.treeItemReference.nativeElement;
400
- if ($event.target === treeItemElement) {
401
- this.expanded = treeItemElement.expanded;
402
- this.expandedChange.emit(treeItemElement.expanded);
403
- }
392
+ // readOnly property maps to the readonly attribute
393
+ // https://github.com/microsoft/fast/blob/46bb6d9aab2c37105f4434db3795e176c2354a4f/packages/web-components/fast-foundation/src/number-field/number-field.ts#L38
394
+ // eslint-disable-next-line @angular-eslint/no-input-rename
395
+ set readOnly(value) {
396
+ this.renderer.setProperty(this.elementRef.nativeElement, 'readOnly', toBooleanProperty(value));
397
+ }
398
+ get min() {
399
+ return this.elementRef.nativeElement.min;
400
+ }
401
+ set min(value) {
402
+ this.renderer.setProperty(this.elementRef.nativeElement, 'min', toNumberProperty(value));
403
+ }
404
+ get max() {
405
+ return this.elementRef.nativeElement.max;
406
+ }
407
+ set max(value) {
408
+ this.renderer.setProperty(this.elementRef.nativeElement, 'max', toNumberProperty(value));
409
+ }
410
+ get step() {
411
+ return this.elementRef.nativeElement.step;
412
+ }
413
+ set step(value) {
414
+ this.renderer.setProperty(this.elementRef.nativeElement, 'step', toNumberProperty(value));
415
+ }
416
+ get placeholder() {
417
+ return this.elementRef.nativeElement.placeholder;
418
+ }
419
+ set placeholder(value) {
420
+ this.renderer.setProperty(this.elementRef.nativeElement, 'placeholder', value);
404
421
  }
405
422
  }
406
- NimbleTreeItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTreeItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
407
- NimbleTreeItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: NimbleTreeItemDirective, selector: "nimble-tree-item", inputs: { disabled: "disabled", expanded: "expanded", selected: "selected" }, outputs: { selectedChange: "selectedChange", expandedChange: "expandedChange" }, host: { listeners: { "selected-change": "onSelectedChange($event)", "expanded-change": "onExpandedChange($event)" }, properties: { "disabled": "this.disabled", "expanded": "this.expanded", "selected": "this.selected", "attr.aria-selected": "this.selected" } }, ngImport: i0 });
408
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTreeItemDirective, decorators: [{
409
- type: Directive,
410
- args: [{
411
- selector: 'nimble-tree-item'
412
- }]
413
- }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { disabled: [{
414
- type: HostBinding,
415
- args: ['disabled']
416
- }, {
417
- type: Input
418
- }], expanded: [{
419
- type: HostBinding,
420
- args: ['expanded']
421
- }, {
422
- type: Input
423
- }], selected: [{
424
- type: HostBinding,
425
- args: ['selected']
426
- }, {
427
- type: HostBinding,
428
- args: ['attr.aria-selected']
429
- }, {
430
- type: Input
431
- }], selectedChange: [{
432
- type: Output
433
- }], expandedChange: [{
434
- type: Output
435
- }], onSelectedChange: [{
436
- type: HostListener,
437
- args: ['selected-change', ['$event']]
438
- }], onExpandedChange: [{
439
- type: HostListener,
440
- args: ['expanded-change', ['$event']]
441
- }] } });
423
+ NimbleNumberFieldDirective.decorators = [
424
+ { type: Directive, args: [{
425
+ selector: 'nimble-number-field'
426
+ },] }
427
+ ];
428
+ NimbleNumberFieldDirective.ctorParameters = () => [
429
+ { type: Renderer2 },
430
+ { type: ElementRef }
431
+ ];
432
+ NimbleNumberFieldDirective.propDecorators = {
433
+ readOnly: [{ type: Input, args: ['readonly',] }],
434
+ min: [{ type: Input }],
435
+ max: [{ type: Input }],
436
+ step: [{ type: Input }],
437
+ placeholder: [{ type: Input }]
438
+ };
442
439
 
443
- class NimbleTreeItemModule {
440
+ class NimbleNumberFieldModule {
444
441
  }
445
- NimbleTreeItemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTreeItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
446
- NimbleTreeItemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTreeItemModule, declarations: [NimbleTreeItemDirective], imports: [CommonModule], exports: [NimbleTreeItemDirective] });
447
- NimbleTreeItemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTreeItemModule, imports: [[CommonModule]] });
448
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTreeItemModule, decorators: [{
449
- type: NgModule,
450
- args: [{
451
- declarations: [NimbleTreeItemDirective],
452
- imports: [CommonModule],
453
- exports: [NimbleTreeItemDirective]
454
- }]
455
- }] });
442
+ NimbleNumberFieldModule.decorators = [
443
+ { type: NgModule, args: [{
444
+ declarations: [NimbleNumberFieldDirective, NimbleNumberFieldControlValueAccessorDirective],
445
+ imports: [CommonModule],
446
+ exports: [NimbleNumberFieldDirective, NimbleNumberFieldControlValueAccessorDirective]
447
+ },] }
448
+ ];
456
449
 
457
450
  /**
458
- * Directive to provide Angular integration for the checkbox.
451
+ * Directive for Nimble select control Angular integration
459
452
  */
460
- class NimbleCheckboxDirective {
453
+ class NimbleSelectDirective {
454
+ }
455
+ NimbleSelectDirective.decorators = [
456
+ { type: Directive, args: [{
457
+ selector: 'nimble-select',
458
+ },] }
459
+ ];
460
+
461
+ class NimbleSelectModule {
461
462
  }
462
- NimbleCheckboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleCheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
463
- NimbleCheckboxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: NimbleCheckboxDirective, selector: "nimble-checkbox", ngImport: i0 });
464
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleCheckboxDirective, decorators: [{
465
- type: Directive,
466
- args: [{
467
- selector: 'nimble-checkbox'
468
- }]
469
- }] });
463
+ NimbleSelectModule.decorators = [
464
+ { type: NgModule, args: [{
465
+ declarations: [NimbleSelectDirective, NimbleSelectControlValueAccessorDirective],
466
+ imports: [CommonModule],
467
+ exports: [NimbleSelectDirective, NimbleSelectControlValueAccessorDirective]
468
+ },] }
469
+ ];
470
470
 
471
471
  /**
472
- * Extension of Angular's CheckboxControlValueAccessor to target the Nimble checkbox control.
473
- *
474
- * Directive decorator based on CheckboxControlValueAccessor decorator
475
- * https://github.com/angular/angular/blob/master/packages/forms/src/directives/checkbox_value_accessor.ts#L42
472
+ * Directive to provide Angular integration for the tab element.
476
473
  */
477
- class NimbleCheckboxControlValueAccessorDirective extends CheckboxControlValueAccessor {
474
+ class NimbleTabDirective {
475
+ constructor(renderer, elementRef) {
476
+ this.renderer = renderer;
477
+ this.elementRef = elementRef;
478
+ }
479
+ get disabled() {
480
+ return this.elementRef.nativeElement.disabled;
481
+ }
482
+ set disabled(value) {
483
+ this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', toBooleanProperty(value));
484
+ }
478
485
  }
479
- NimbleCheckboxControlValueAccessorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleCheckboxControlValueAccessorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
480
- NimbleCheckboxControlValueAccessorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: NimbleCheckboxControlValueAccessorDirective, selector: "nimble-checkbox[formControlName],nimble-checkbox[formControl],nimble-checkbox[ngModel]", host: { listeners: { "change": "onChange($event.target.checked)", "blur": "onTouched()" } }, providers: [{
481
- provide: NG_VALUE_ACCESSOR,
482
- useExisting: forwardRef(() => NimbleCheckboxControlValueAccessorDirective),
483
- multi: true
484
- }], usesInheritance: true, ngImport: i0 });
485
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleCheckboxControlValueAccessorDirective, decorators: [{
486
- type: Directive,
487
- args: [{
488
- selector: 'nimble-checkbox[formControlName],nimble-checkbox[formControl],nimble-checkbox[ngModel]',
489
- // The following host metadata is duplicated from CheckboxControlValueAccessor
490
- // eslint-disable-next-line @angular-eslint/no-host-metadata-property
491
- host: { '(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()' },
492
- providers: [{
493
- provide: NG_VALUE_ACCESSOR,
494
- useExisting: forwardRef(() => NimbleCheckboxControlValueAccessorDirective),
495
- multi: true
496
- }]
497
- }]
498
- }] });
486
+ NimbleTabDirective.decorators = [
487
+ { type: Directive, args: [{
488
+ selector: 'nimble-tab'
489
+ },] }
490
+ ];
491
+ NimbleTabDirective.ctorParameters = () => [
492
+ { type: Renderer2 },
493
+ { type: ElementRef }
494
+ ];
495
+ NimbleTabDirective.propDecorators = {
496
+ disabled: [{ type: Input }]
497
+ };
499
498
 
500
- class NimbleCheckboxModule {
499
+ class NimbleTabModule {
501
500
  }
502
- NimbleCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
503
- NimbleCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleCheckboxModule, declarations: [NimbleCheckboxDirective, NimbleCheckboxControlValueAccessorDirective], imports: [CommonModule], exports: [NimbleCheckboxDirective, NimbleCheckboxControlValueAccessorDirective] });
504
- NimbleCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleCheckboxModule, imports: [[CommonModule]] });
505
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleCheckboxModule, decorators: [{
506
- type: NgModule,
507
- args: [{
508
- declarations: [NimbleCheckboxDirective, NimbleCheckboxControlValueAccessorDirective],
509
- imports: [CommonModule],
510
- exports: [NimbleCheckboxDirective, NimbleCheckboxControlValueAccessorDirective]
511
- }]
512
- }] });
501
+ NimbleTabModule.decorators = [
502
+ { type: NgModule, args: [{
503
+ declarations: [NimbleTabDirective],
504
+ imports: [CommonModule],
505
+ exports: [NimbleTabDirective]
506
+ },] }
507
+ ];
508
+
509
+ /**
510
+ * Directive to provide Angular integration for the tab panel.
511
+ */
512
+ class NimbleTabPanelDirective {
513
+ }
514
+ NimbleTabPanelDirective.decorators = [
515
+ { type: Directive, args: [{
516
+ selector: 'nimble-tab-panel'
517
+ },] }
518
+ ];
519
+
520
+ class NimbleTabPanelModule {
521
+ }
522
+ NimbleTabPanelModule.decorators = [
523
+ { type: NgModule, args: [{
524
+ declarations: [NimbleTabPanelDirective],
525
+ imports: [CommonModule],
526
+ exports: [NimbleTabPanelDirective]
527
+ },] }
528
+ ];
513
529
 
514
530
  /**
515
531
  * Directive to provide Angular integration for the tabs element.
516
532
  */
517
533
  class NimbleTabsDirective {
518
- constructor(tabs) {
519
- this.tabs = tabs;
534
+ constructor(renderer, elementRef) {
535
+ this.renderer = renderer;
536
+ this.elementRef = elementRef;
520
537
  this.activeidChange = new EventEmitter();
521
538
  }
522
- onChange() {
523
- this.activeidChange.emit(this.tabs.nativeElement.activeid);
524
- }
525
- }
526
- NimbleTabsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabsDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
527
- NimbleTabsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: NimbleTabsDirective, selector: "nimble-tabs", inputs: { activeid: "activeid" }, outputs: { activeidChange: "activeidChange" }, host: { listeners: { "change": "onChange()" }, properties: { "attr.activeid": "this.activeid" } }, ngImport: i0 });
528
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabsDirective, decorators: [{
529
- type: Directive,
530
- args: [{
531
- selector: 'nimble-tabs'
532
- }]
533
- }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { activeid: [{
534
- type: HostBinding,
535
- args: ['attr.activeid']
536
- }, {
537
- type: Input
538
- }], activeidChange: [{
539
- type: Output
540
- }], onChange: [{
541
- type: HostListener,
542
- args: ['change']
543
- }] } });
539
+ get activeid() {
540
+ return this.elementRef.nativeElement.activeid;
541
+ }
542
+ set activeid(value) {
543
+ this.renderer.setProperty(this.elementRef.nativeElement, 'activeid', value);
544
+ }
545
+ onChange($event) {
546
+ if ($event.target === this.elementRef.nativeElement) {
547
+ this.activeidChange.emit(this.activeid);
548
+ }
549
+ }
550
+ }
551
+ NimbleTabsDirective.decorators = [
552
+ { type: Directive, args: [{
553
+ selector: 'nimble-tabs'
554
+ },] }
555
+ ];
556
+ NimbleTabsDirective.ctorParameters = () => [
557
+ { type: Renderer2 },
558
+ { type: ElementRef }
559
+ ];
560
+ NimbleTabsDirective.propDecorators = {
561
+ activeid: [{ type: Input }],
562
+ activeidChange: [{ type: Output }],
563
+ onChange: [{ type: HostListener, args: ['change', ['$event'],] }]
564
+ };
544
565
 
545
566
  class NimbleTabsModule {
546
567
  }
547
- NimbleTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
548
- NimbleTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabsModule, declarations: [NimbleTabsDirective], imports: [CommonModule], exports: [NimbleTabsDirective] });
549
- NimbleTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabsModule, imports: [[CommonModule]] });
550
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabsModule, decorators: [{
551
- type: NgModule,
552
- args: [{
553
- declarations: [NimbleTabsDirective],
554
- imports: [CommonModule],
555
- exports: [NimbleTabsDirective]
556
- }]
557
- }] });
568
+ NimbleTabsModule.decorators = [
569
+ { type: NgModule, args: [{
570
+ declarations: [NimbleTabsDirective],
571
+ imports: [CommonModule],
572
+ exports: [NimbleTabsDirective]
573
+ },] }
574
+ ];
558
575
 
559
576
  /**
560
- * Directive to provide Angular integration for the tab element.
577
+ * Directive to provide Angular integration for the tabs toolbar.
561
578
  */
562
- class NimbleTabDirective {
579
+ class NimbleTabsToolbarDirective {
563
580
  }
564
- NimbleTabDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
565
- NimbleTabDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: NimbleTabDirective, selector: "nimble-tab", inputs: { disabled: "disabled" }, host: { properties: { "attr.disabled": "this.disabled" } }, ngImport: i0 });
566
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabDirective, decorators: [{
567
- type: Directive,
568
- args: [{
569
- selector: 'nimble-tab'
570
- }]
571
- }], propDecorators: { disabled: [{
572
- type: HostBinding,
573
- args: ['attr.disabled']
574
- }, {
575
- type: Input
576
- }] } });
581
+ NimbleTabsToolbarDirective.decorators = [
582
+ { type: Directive, args: [{
583
+ selector: 'nimble-tabs-toolbar'
584
+ },] }
585
+ ];
577
586
 
578
- class NimbleTabModule {
587
+ class NimbleTabsToolbarModule {
579
588
  }
580
- NimbleTabModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
581
- NimbleTabModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabModule, declarations: [NimbleTabDirective], imports: [CommonModule], exports: [NimbleTabDirective] });
582
- NimbleTabModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabModule, imports: [[CommonModule]] });
583
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabModule, decorators: [{
584
- type: NgModule,
585
- args: [{
586
- declarations: [NimbleTabDirective],
587
- imports: [CommonModule],
588
- exports: [NimbleTabDirective]
589
- }]
590
- }] });
589
+ NimbleTabsToolbarModule.decorators = [
590
+ { type: NgModule, args: [{
591
+ declarations: [NimbleTabsToolbarDirective],
592
+ imports: [CommonModule],
593
+ exports: [NimbleTabsToolbarDirective]
594
+ },] }
595
+ ];
591
596
 
592
597
  /**
593
- * Directive to provide Angular integration for the tab panel.
598
+ * Extension of Angular's DefaultValueAccessor to target the text-based inputs.
599
+ *
600
+ * Directive decorator based on DefaultValueAccessor decorator
601
+ * https://github.com/angular/angular/blob/master/packages/forms/src/directives/default_value_accessor.ts#L72
594
602
  */
595
- class NimbleTabPanelDirective {
603
+ class NimbleTextFieldControlValueAccessorDirective extends DefaultValueAccessor {
596
604
  }
597
- NimbleTabPanelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
598
- NimbleTabPanelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: NimbleTabPanelDirective, selector: "nimble-tab-panel", ngImport: i0 });
599
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabPanelDirective, decorators: [{
600
- type: Directive,
601
- args: [{
602
- selector: 'nimble-tab-panel'
603
- }]
604
- }] });
605
+ NimbleTextFieldControlValueAccessorDirective.decorators = [
606
+ { type: Directive, args: [{
607
+ selector: 'nimble-text-field[formControlName],nimble-text-field[formControl],nimble-text-field[ngModel]',
608
+ // The following host metadata is duplicated from DefaultValueAccessor
609
+ // eslint-disable-next-line @angular-eslint/no-host-metadata-property
610
+ host: {
611
+ '(input)': '$any(this)._handleInput($event.target.value)',
612
+ '(blur)': 'onTouched()',
613
+ '(compositionstart)': '$any(this)._compositionStart()',
614
+ '(compositionend)': '$any(this)._compositionEnd($event.target.value)'
615
+ },
616
+ providers: [{
617
+ provide: NG_VALUE_ACCESSOR,
618
+ useExisting: forwardRef(() => NimbleTextFieldControlValueAccessorDirective),
619
+ multi: true
620
+ }]
621
+ },] }
622
+ ];
605
623
 
606
- class NimbleTabPanelModule {
624
+ /**
625
+ * Directive to provide Angular integration for the text field
626
+ */
627
+ class NimbleTextFieldDirective {
628
+ constructor(renderer, elementRef) {
629
+ this.renderer = renderer;
630
+ this.elementRef = elementRef;
631
+ }
632
+ get readOnly() {
633
+ return this.elementRef.nativeElement.readOnly;
634
+ }
635
+ // readOnly property maps to the readonly attribute
636
+ // See: https://github.com/microsoft/fast/blob/46bb6d9aab2c37105f4434db3795e176c2354a4f/packages/web-components/fast-foundation/src/text-field/text-field.ts#L33
637
+ // eslint-disable-next-line @angular-eslint/no-input-rename
638
+ set readOnly(value) {
639
+ this.renderer.setProperty(this.elementRef.nativeElement, 'readOnly', toBooleanProperty(value));
640
+ }
641
+ get type() {
642
+ return this.elementRef.nativeElement.type;
643
+ }
644
+ set type(value) {
645
+ this.renderer.setProperty(this.elementRef.nativeElement, 'type', value);
646
+ }
647
+ }
648
+ NimbleTextFieldDirective.decorators = [
649
+ { type: Directive, args: [{
650
+ selector: 'nimble-text-field'
651
+ },] }
652
+ ];
653
+ NimbleTextFieldDirective.ctorParameters = () => [
654
+ { type: Renderer2 },
655
+ { type: ElementRef }
656
+ ];
657
+ NimbleTextFieldDirective.propDecorators = {
658
+ readOnly: [{ type: Input, args: ['readonly',] }],
659
+ type: [{ type: Input }]
660
+ };
661
+
662
+ class NimbleTextFieldModule {
607
663
  }
608
- NimbleTabPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
609
- NimbleTabPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabPanelModule, declarations: [NimbleTabPanelDirective], imports: [CommonModule], exports: [NimbleTabPanelDirective] });
610
- NimbleTabPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabPanelModule, imports: [[CommonModule]] });
611
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabPanelModule, decorators: [{
612
- type: NgModule,
613
- args: [{
614
- declarations: [NimbleTabPanelDirective],
615
- imports: [CommonModule],
616
- exports: [NimbleTabPanelDirective]
617
- }]
618
- }] });
664
+ NimbleTextFieldModule.decorators = [
665
+ { type: NgModule, args: [{
666
+ declarations: [NimbleTextFieldDirective, NimbleTextFieldControlValueAccessorDirective],
667
+ imports: [CommonModule],
668
+ exports: [NimbleTextFieldDirective, NimbleTextFieldControlValueAccessorDirective]
669
+ },] }
670
+ ];
619
671
 
620
672
  /**
621
- * Directive to provide Angular integration for the tabs toolbar.
673
+ * Directive for Angular integration for the theme provider
622
674
  */
623
- class NimbleTabsToolbarDirective {
675
+ class NimbleThemeProviderDirective {
676
+ constructor(renderer, elementRef) {
677
+ this.renderer = renderer;
678
+ this.elementRef = elementRef;
679
+ }
680
+ get theme() {
681
+ return this.elementRef.nativeElement.theme;
682
+ }
683
+ set theme(value) {
684
+ this.renderer.setProperty(this.elementRef.nativeElement, 'theme', value);
685
+ }
624
686
  }
625
- NimbleTabsToolbarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabsToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
626
- NimbleTabsToolbarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: NimbleTabsToolbarDirective, selector: "nimble-tabs-toolbar", ngImport: i0 });
627
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabsToolbarDirective, decorators: [{
628
- type: Directive,
629
- args: [{
630
- selector: 'nimble-tabs-toolbar'
631
- }]
632
- }] });
687
+ NimbleThemeProviderDirective.decorators = [
688
+ { type: Directive, args: [{
689
+ selector: 'nimble-theme-provider'
690
+ },] }
691
+ ];
692
+ NimbleThemeProviderDirective.ctorParameters = () => [
693
+ { type: Renderer2 },
694
+ { type: ElementRef }
695
+ ];
696
+ NimbleThemeProviderDirective.propDecorators = {
697
+ theme: [{ type: Input }]
698
+ };
633
699
 
634
- class NimbleTabsToolbarModule {
700
+ class NimbleThemeProviderModule {
701
+ }
702
+ NimbleThemeProviderModule.decorators = [
703
+ { type: NgModule, args: [{
704
+ declarations: [NimbleThemeProviderDirective],
705
+ imports: [CommonModule],
706
+ exports: [NimbleThemeProviderDirective]
707
+ },] }
708
+ ];
709
+
710
+ /**
711
+ * Directive to provide Angular integration for the tree item.
712
+ */
713
+ class NimbleTreeItemDirective {
714
+ constructor(renderer, elementRef) {
715
+ this.renderer = renderer;
716
+ this.elementRef = elementRef;
717
+ this.expandedChange = new EventEmitter();
718
+ }
719
+ get disabled() {
720
+ return this.elementRef.nativeElement.disabled;
721
+ }
722
+ set disabled(value) {
723
+ this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', toBooleanProperty(value));
724
+ }
725
+ get expanded() {
726
+ return this.elementRef.nativeElement.expanded;
727
+ }
728
+ set expanded(value) {
729
+ this.renderer.setProperty(this.elementRef.nativeElement, 'expanded', toBooleanProperty(value));
730
+ }
731
+ get selected() {
732
+ return this.elementRef.nativeElement.selected;
733
+ }
734
+ set selected(value) {
735
+ this.renderer.setProperty(this.elementRef.nativeElement, 'selected', toBooleanProperty(value));
736
+ // Needed because fast-foundation TreeView sets initial selection with an aria-selected query
737
+ this.renderer.setAttribute(this.elementRef.nativeElement, 'selected', toBooleanAriaAttribute(value));
738
+ }
739
+ onExpandedChange($event) {
740
+ if ($event.target === this.elementRef.nativeElement) {
741
+ this.expandedChange.emit(this.expanded);
742
+ }
743
+ }
744
+ }
745
+ NimbleTreeItemDirective.decorators = [
746
+ { type: Directive, args: [{
747
+ selector: 'nimble-tree-item'
748
+ },] }
749
+ ];
750
+ NimbleTreeItemDirective.ctorParameters = () => [
751
+ { type: Renderer2 },
752
+ { type: ElementRef }
753
+ ];
754
+ NimbleTreeItemDirective.propDecorators = {
755
+ disabled: [{ type: Input }],
756
+ expanded: [{ type: Input }],
757
+ selected: [{ type: Input }],
758
+ expandedChange: [{ type: Output }],
759
+ onExpandedChange: [{ type: HostListener, args: ['expanded-change', ['$event'],] }]
760
+ };
761
+
762
+ class NimbleTreeItemModule {
763
+ }
764
+ NimbleTreeItemModule.decorators = [
765
+ { type: NgModule, args: [{
766
+ declarations: [NimbleTreeItemDirective],
767
+ imports: [CommonModule],
768
+ exports: [NimbleTreeItemDirective]
769
+ },] }
770
+ ];
771
+
772
+ /**
773
+ * Directive to provide Angular integration for the tree view.
774
+ */
775
+ class NimbleTreeViewDirective {
776
+ constructor(renderer, elementRef) {
777
+ this.renderer = renderer;
778
+ this.elementRef = elementRef;
779
+ }
780
+ get selectionMode() {
781
+ return this.elementRef.nativeElement.selectionMode;
782
+ }
783
+ // selectionMode property intentionally maps to the selection-mode attribute
784
+ // eslint-disable-next-line @angular-eslint/no-input-rename
785
+ set selectionMode(value) {
786
+ this.renderer.setProperty(this.elementRef.nativeElement, 'selectionMode', value);
787
+ }
635
788
  }
636
- NimbleTabsToolbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabsToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
637
- NimbleTabsToolbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabsToolbarModule, declarations: [NimbleTabsToolbarDirective], imports: [CommonModule], exports: [NimbleTabsToolbarDirective] });
638
- NimbleTabsToolbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabsToolbarModule, imports: [[CommonModule]] });
639
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: NimbleTabsToolbarModule, decorators: [{
640
- type: NgModule,
641
- args: [{
642
- declarations: [NimbleTabsToolbarDirective],
643
- imports: [CommonModule],
644
- exports: [NimbleTabsToolbarDirective]
645
- }]
646
- }] });
789
+ NimbleTreeViewDirective.decorators = [
790
+ { type: Directive, args: [{
791
+ selector: 'nimble-tree-view'
792
+ },] }
793
+ ];
794
+ NimbleTreeViewDirective.ctorParameters = () => [
795
+ { type: Renderer2 },
796
+ { type: ElementRef }
797
+ ];
798
+ NimbleTreeViewDirective.propDecorators = {
799
+ selectionMode: [{ type: Input, args: ['selection-mode',] }]
800
+ };
801
+
802
+ class NimbleTreeViewModule {
803
+ }
804
+ NimbleTreeViewModule.decorators = [
805
+ { type: NgModule, args: [{
806
+ declarations: [NimbleTreeViewDirective],
807
+ imports: [CommonModule],
808
+ exports: [NimbleTreeViewDirective]
809
+ },] }
810
+ ];
811
+
812
+ /**
813
+ * Immediately processes all updates in queue.
814
+ *
815
+ * Useful for synchronously testing Nimble elements. Call this in fakeAsync tests to
816
+ * immediately resolve tasks which otherwise would require waiting for an animation
817
+ * frame. This should also be called after every fakeAsync test to clear the internal
818
+ * process queue and allow subsequent tests to run normally.
819
+ */
820
+ const waitForUpdatesAsync = waitForUpdatesAsync$1;
647
821
 
648
822
  /*
649
823
  * Public API Surface of nimble-angular
@@ -653,5 +827,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
653
827
  * Generated bundle index. Do not edit.
654
828
  */
655
829
 
656
- export { NimbleButtonDirective, NimbleButtonModule, NimbleCheckboxControlValueAccessorDirective, NimbleCheckboxDirective, NimbleCheckboxModule, NimbleControlValueAccessorModule, NimbleDefaultControlValueAccessorDirective, NimbleListboxOptionDirective, NimbleListboxOptionModule, NimbleNumberControlValueAccessorDirective, NimbleNumberFieldDirective, NimbleNumberFieldModule, NimbleSelectControlValueAccessorDirective, NimbleSelectDirective, NimbleSelectModule, NimbleTabDirective, NimbleTabModule, NimbleTabPanelDirective, NimbleTabPanelModule, NimbleTabsDirective, NimbleTabsModule, NimbleTabsToolbarDirective, NimbleTabsToolbarModule, NimbleTextFieldDirective, NimbleTextFieldModule, NimbleThemeProviderDirective, NimbleThemeProviderModule, NimbleTreeItemDirective, NimbleTreeItemModule, NimbleTreeViewDirective, NimbleTreeViewModule };
830
+ export { NimbleButtonDirective, NimbleButtonModule, NimbleCheckboxControlValueAccessorDirective, NimbleCheckboxDirective, NimbleCheckboxModule, NimbleDrawerDirective, NimbleDrawerModule, NimbleListboxOptionDirective, NimbleListboxOptionModule, NimbleMenuDirective, NimbleMenuItemDirective, NimbleMenuItemModule, NimbleMenuModule, NimbleNumberFieldControlValueAccessorDirective, NimbleNumberFieldDirective, NimbleNumberFieldModule, NimbleSelectControlValueAccessorDirective, NimbleSelectDirective, NimbleSelectModule, NimbleTabDirective, NimbleTabModule, NimbleTabPanelDirective, NimbleTabPanelModule, NimbleTabsDirective, NimbleTabsModule, NimbleTabsToolbarDirective, NimbleTabsToolbarModule, NimbleTextFieldControlValueAccessorDirective, NimbleTextFieldDirective, NimbleTextFieldModule, NimbleThemeProviderDirective, NimbleThemeProviderModule, NimbleTreeItemDirective, NimbleTreeItemModule, NimbleTreeViewDirective, NimbleTreeViewModule, waitForUpdatesAsync };
657
831
  //# sourceMappingURL=ni-nimble-angular.js.map