@mescius/wijmo.angular.input 5.20232.939
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.
- package/COMMERCIAL-LICENSE.html +485 -0
- package/README.md +363 -0
- package/es2015-commonjs.js +14 -0
- package/es2015-esm.js +14 -0
- package/es5-esm.js +14 -0
- package/index.d.ts +924 -0
- package/index.js +14 -0
- package/package.json +46 -0
package/index.d.ts
ADDED
|
@@ -0,0 +1,924 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
*
|
|
3
|
+
* Wijmo Library 5.20232.939
|
|
4
|
+
* https://developer.mescius.com/wijmo
|
|
5
|
+
*
|
|
6
|
+
* Copyright(c) MESCIUS inc. All rights reserved.
|
|
7
|
+
*
|
|
8
|
+
* Licensed under the End-User License Agreement For MESCIUS Wijmo Software.
|
|
9
|
+
* us.sales@mescius.com
|
|
10
|
+
* https://developer.mescius.com/wijmo/licensing
|
|
11
|
+
*
|
|
12
|
+
*/
|
|
13
|
+
/**
|
|
14
|
+
* {@module wijmo.angular.input}
|
|
15
|
+
* AngularJS directives for wijmo.input module
|
|
16
|
+
*/
|
|
17
|
+
/**
|
|
18
|
+
*
|
|
19
|
+
*/
|
|
20
|
+
export declare var ___keepComment: any;
|
|
21
|
+
import { Control } from '@grapecity/wijmo';
|
|
22
|
+
import { WjDirective, WjLink } from '@grapecity/wijmo.angular.base';
|
|
23
|
+
import * as wjcInput from '@grapecity/wijmo.input';
|
|
24
|
+
/**
|
|
25
|
+
* Angular module name, which can be used in the <b>angular.module(moduleName)</b>
|
|
26
|
+
* function to obtain a reference to the module .
|
|
27
|
+
*/
|
|
28
|
+
export declare const ngModuleName = "wj.input";
|
|
29
|
+
export declare class WjDropDown extends WjDirective {
|
|
30
|
+
readonly _controlConstructor: typeof wjcInput.DropDown;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* AngularJS directive for the {@link ComboBox} control.
|
|
34
|
+
*
|
|
35
|
+
* Use the <b>wj-combo-box</b> directive to add <b>ComboBox</b> controls to your AngularJS applications.
|
|
36
|
+
* Note that directive and parameter names must be formatted as lower-case with dashes
|
|
37
|
+
* instead of camel-case. For example:
|
|
38
|
+
*
|
|
39
|
+
* <pre><p>Here is a ComboBox control:</p>
|
|
40
|
+
* <wj-combo-box
|
|
41
|
+
* text="theCountry"
|
|
42
|
+
* items-source="countries"
|
|
43
|
+
* is-editable="false"
|
|
44
|
+
* placeholder="country">
|
|
45
|
+
* </wj-combo-box></pre>
|
|
46
|
+
*
|
|
47
|
+
* The example below creates a <b>ComboBox</b> control and binds it to a 'countries' array
|
|
48
|
+
* exposed by the controller. The <b>ComboBox</b> searches for the country as the user
|
|
49
|
+
* types. The <b>isEditable</b> property is set to false, so the user is forced to
|
|
50
|
+
* select one of the items in the list.
|
|
51
|
+
*
|
|
52
|
+
* <a href="https://jsfiddle.net/Wijmo5/37GHw/" target="_blank">Example</a>
|
|
53
|
+
*
|
|
54
|
+
* The <b>wj-combo-box</b> directive supports the following attributes:
|
|
55
|
+
*
|
|
56
|
+
* <dl class="dl-horizontal">
|
|
57
|
+
* <dt>ng-model</dt> <dd><code>@</code> Binds the control's <b>selectedValue</b> property using the ng-model Angular
|
|
58
|
+
* directive. Binding the property using the ng-model directive provides standard benefits
|
|
59
|
+
* like validation, adding the control's state to the form instance, and so on. To redefine
|
|
60
|
+
* properties on a control that is bound by the ng-model directive, use the wj-model-property
|
|
61
|
+
* attribute.</dd>
|
|
62
|
+
* <dt>wj-model-property</dt> <dd><code>@</code> Specifies a control property that is bound to a scope using the
|
|
63
|
+
* <b>ng-model</b> directive.</dd>
|
|
64
|
+
* <dt>control</dt> <dd><code>=</code> A reference to the {@link ComboBox} control created by this directive.</dd>
|
|
65
|
+
* <dt>display-member-path</dt> <dd><code>@</code> The name of the property to use as the visual representation of the items.</dd>
|
|
66
|
+
* <dt>is-content-html</dt> <dd><code>@</code> A value indicating whether the drop-down list displays the items as plain text or as HTML.</dd>
|
|
67
|
+
* <dt>is-dropped-down</dt> <dd><code>@</code> A value indicating whether the drop down list is currently visible.</dd>
|
|
68
|
+
* <dt>is-editable</dt> <dd><code>@</code> A value indicating whether the user can enter values not present on the list.</dd>
|
|
69
|
+
* <dt>initialized</dt> <dd><code>&</code> This event occurs after the binding has finished initializing the control with attribute values.</dd>
|
|
70
|
+
* <dt>is-initialized</dt> <dd><code>=</code> A value indicating whether the binding has finished initializing the control with attribute values.</dd>
|
|
71
|
+
* <dt>item-formatter</dt> <dd><code>=</code> A function used to customize the values shown in the drop-down list.</dd>
|
|
72
|
+
* <dt>items-source</dt> <dd><code>=</code> An array or {@link ICollectionView} that contains items to show in the list.</dd>
|
|
73
|
+
* <dt>max-drop-down-height</dt> <dd><code>@</code> The maximum height of the drop-down list.</dd>
|
|
74
|
+
* <dt>max-drop-down-width</dt> <dd><code>@</code> The maximum width of the drop-down list.</dd>
|
|
75
|
+
* <dt>placeholder</dt> <dd><code>@</code> A string shown as a hint when the control is empty.</dd>
|
|
76
|
+
* <dt>is-required</dt> <dd><code>@</code> A value indicating whether to prevent null values.</dd>
|
|
77
|
+
* <dt>show-drop-down-button</dt><dd><code>@</code> A value indicating whether the control displays a drop-down button.</dd>
|
|
78
|
+
* <dt>selected-index</dt> <dd><code>=</code> The index of the currently selected item in the drop-down list.</dd>
|
|
79
|
+
* <dt>selected-item</dt> <dd><code>=</code> The currently selected item in the drop-down list.</dd>
|
|
80
|
+
* <dt>selected-value</dt> <dd><code>=</code> The value of the selected item, obtained using the <b>selected-value-path</b>.</dd>
|
|
81
|
+
* <dt>selected-value-path</dt> <dd><code>@</code> The name of the property used to get the <b>selected-value</b> from the <b>selected-item</b>.</dd>
|
|
82
|
+
* <dt>text</dt> <dd><code>=</code> The text to show in the control.</dd>
|
|
83
|
+
* <dt>is-dropped-down-changing</dt> <dd><code>&</code> The {@link ComboBox.isDroppedDownChanging} event handler.</dd>
|
|
84
|
+
* <dt>is-dropped-down-changed</dt> <dd><code>&</code> The {@link ComboBox.isDroppedDownChanged} event handler.</dd>
|
|
85
|
+
* <dt>selected-index-changed</dt> <dd><code>&</code> The {@link ComboBox.selectedIndexChanged} event handler.</dd>
|
|
86
|
+
* <dt>got-focus</dt> <dd><code>&</code> The {@link ComboBox.gotFocus} event handler.</dd>
|
|
87
|
+
* <dt>lost-focus</dt> <dd><code>&</code> The {@link ComboBox.lostFocus} event handler.</dd>
|
|
88
|
+
* <dt>text-changed</dt> <dd><code>&</code> The {@link ComboBox.textChanged} event handler.</dd>
|
|
89
|
+
* </dl>
|
|
90
|
+
*/
|
|
91
|
+
export declare class WjComboBox extends WjDropDown {
|
|
92
|
+
_$compile: any;
|
|
93
|
+
constructor($compile: any);
|
|
94
|
+
readonly _controlConstructor: typeof wjcInput.ComboBox;
|
|
95
|
+
}
|
|
96
|
+
/**
|
|
97
|
+
* AngularJS directive for the {@link AutoComplete} control.
|
|
98
|
+
*
|
|
99
|
+
* Use the <b>wj-auto-complete</b> directive to add <b>AutoComplete</b> controls to your
|
|
100
|
+
* AngularJS applications. Note that directive and parameter names must be
|
|
101
|
+
* formatted as lower-case with dashes instead of camel-case. For example:
|
|
102
|
+
*
|
|
103
|
+
* <pre><p>Here is an AutoComplete control:</p>
|
|
104
|
+
* <wj-auto-complete
|
|
105
|
+
* text="theCountry"
|
|
106
|
+
* items-source="countries"
|
|
107
|
+
* is-editable="false"
|
|
108
|
+
* placeholder="country">
|
|
109
|
+
* </wj-auto-complete></pre>
|
|
110
|
+
*
|
|
111
|
+
* The example below creates an <b>AutoComplete</b> control and binds it to a 'countries' array
|
|
112
|
+
* exposed by the controller. The <b>AutoComplete</b> searches for the country as the user
|
|
113
|
+
* types, and narrows down the list of countries that match the current input.
|
|
114
|
+
*
|
|
115
|
+
* <a href="https://jsfiddle.net/Wijmo5/37GHw/" target="_blank">Example</a>
|
|
116
|
+
*
|
|
117
|
+
* The <b>wj-auto-complete</b> directive extends {@link wijmo.angular.input.WjComboBox} with the following attributes:
|
|
118
|
+
*
|
|
119
|
+
* <dl class="dl-horizontal">
|
|
120
|
+
* <dt>css-match</dt> <dd><code>@</code> The name of the CSS class used to highlight
|
|
121
|
+
* parts of the content that match the search terms.</dd>
|
|
122
|
+
* <dt>delay</dt> <dd><code>@</code> The amount of delay in milliseconds between
|
|
123
|
+
* when a keystroke occurs and when the search is performed.</dd>
|
|
124
|
+
* <dt>items-source-function</dt><dd><code>=</code> A function that provides the items
|
|
125
|
+
* dynamically as the user types.</dd>
|
|
126
|
+
* <dt>max-items</dt> <dd><code>@</code> The maximum number of items to display
|
|
127
|
+
* in the dropdown.</dd>
|
|
128
|
+
* <dt>min-length</dt> <dd><code>@</code> The minimum input length to require before
|
|
129
|
+
* triggering autocomplete suggestions.</dd>
|
|
130
|
+
* </dl>
|
|
131
|
+
*/
|
|
132
|
+
export declare class WjAutoComplete extends WjComboBox {
|
|
133
|
+
constructor($compile: any);
|
|
134
|
+
readonly _controlConstructor: typeof wjcInput.AutoComplete;
|
|
135
|
+
}
|
|
136
|
+
/**
|
|
137
|
+
* AngularJS directive for the {@link Calendar} control.
|
|
138
|
+
*
|
|
139
|
+
* Use the <b>wj-calendar</b> directive to add <b>Calendar</b> controls to your
|
|
140
|
+
* AngularJS applications.
|
|
141
|
+
* Note that directive and parameter names must be formatted as lower-case with dashes
|
|
142
|
+
* instead of camel-case. For example:
|
|
143
|
+
*
|
|
144
|
+
* <pre><p>Here is a Calendar control:</p>
|
|
145
|
+
* <wj-calendar
|
|
146
|
+
* value="theDate">
|
|
147
|
+
* </wj-calendar></pre>
|
|
148
|
+
*
|
|
149
|
+
* <a href="https://jsfiddle.net/Wijmo5/46PhD/" target="_blank">Example</a>
|
|
150
|
+
*
|
|
151
|
+
* This example creates a <b>Calendar</b> control and binds it to a 'date' variable
|
|
152
|
+
* exposed by the controller. The range of dates that may be selected is limited
|
|
153
|
+
* by the <b>min</b> and <b>max</b> properties.
|
|
154
|
+
*
|
|
155
|
+
* The <b>wj-calendar</b> directive supports the following attributes:
|
|
156
|
+
*
|
|
157
|
+
* <dl class="dl-horizontal">
|
|
158
|
+
* <dt>ng-model</dt> <dd><code>@</code> Binds the control's <b>value</b> property using the ng-model Angular
|
|
159
|
+
* directive. Binding the property using the ng-model directive provides standard benefits
|
|
160
|
+
* like validation, adding the control's state to the form instance, and so on. To redefine
|
|
161
|
+
* properties on a control that is bound by the ng-model directive, use the wj-model-property
|
|
162
|
+
* attribute.</dd>
|
|
163
|
+
* <dt>wj-model-property</dt> <dd><code>@</code> Specifies a control property that is bound to a scope using the
|
|
164
|
+
* <b>ng-model</b> directive.</dd>
|
|
165
|
+
* <dt>control</dt> <dd><code>=</code> A reference to the {@link Calendar} control
|
|
166
|
+
* created by this directive.</dd>
|
|
167
|
+
* <dt>display-month</dt> <dd><code>=</code> The month being displayed in the calendar.</dd>
|
|
168
|
+
* <dt>first-day-of-week</dt> <dd><code>@</code> The first day of the week.</dd>
|
|
169
|
+
* <dt>initialized</dt> <dd><code>&</code> This event occurs after the binding has finished
|
|
170
|
+
* initializing the control with attribute values.</dd>
|
|
171
|
+
* <dt>is-initialized</dt> <dd><code>=</code> A value indicating whether the binding has finished
|
|
172
|
+
* initializing the control with attribute values. </dd>
|
|
173
|
+
* <dt>item-formatter</dt> <dd><code>=</code> The function used to customize the dates
|
|
174
|
+
* shown in the calendar.</dd>
|
|
175
|
+
* <dt>max</dt> <dd><code>@</code> The latest valid date (string in the
|
|
176
|
+
* format "yyyy-MM-dd").</dd>
|
|
177
|
+
* <dt>min</dt> <dd><code>@</code> The earliest valid date (string in the
|
|
178
|
+
* format "yyyy-MM-dd").</dd>
|
|
179
|
+
* <dt>month-view</dt> <dd><code>@</code> A value indicating whether the control displays
|
|
180
|
+
* a month or the entire year.</dd>
|
|
181
|
+
* <dt>show-header</dt> <dd><code>@</code> A value indicating whether the control displays
|
|
182
|
+
* the header area.</dd>
|
|
183
|
+
* <dt>value</dt> <dd><code>=</code> The date being edited.</dd>
|
|
184
|
+
* <dt>got-focus</dt> <dd><code>&</code> The {@link Calendar.gotFocus} event handler.</dd>
|
|
185
|
+
* <dt>lost-focus</dt> <dd><code>&</code> The {@link Calendar.lostFocus} event handler.</dd>
|
|
186
|
+
* <dt>value-changed</dt> <dd><code>&</code> The {@link Calendar.valueChanged} event handler.</dd>
|
|
187
|
+
* </dl>
|
|
188
|
+
*
|
|
189
|
+
* If provided, the <b>min</b> and <b>max</b> attributes are strings in the format
|
|
190
|
+
* "yyyy-MM-dd." Technically, you can use any full date as defined in the W3C
|
|
191
|
+
* <a href="https://tools.ietf.org/html/rfc3339" target="_blank">[RFC 3339]</a>,
|
|
192
|
+
* which is also the format used with regular HTML5 input elements.
|
|
193
|
+
*/
|
|
194
|
+
export declare class WjCalendar extends WjDirective {
|
|
195
|
+
readonly _controlConstructor: new (elem: HTMLElement) => Control;
|
|
196
|
+
}
|
|
197
|
+
/**
|
|
198
|
+
* AngularJS directive for the {@link ColorPicker} control.
|
|
199
|
+
*
|
|
200
|
+
* Use the <b>wj-color-picker</b> directive to add <b>ColorPicker</b> controls to your
|
|
201
|
+
* AngularJS applications. Note that directive and parameter names must be
|
|
202
|
+
* formatted as lower-case with dashes instead of camel-case. For example:
|
|
203
|
+
*
|
|
204
|
+
* <pre><p>Here is a ColorPicker control:</p>
|
|
205
|
+
* <wj-color-picker
|
|
206
|
+
* value="theColor"
|
|
207
|
+
* show-alpha-channel="false">
|
|
208
|
+
* </wj-color-picker></pre>
|
|
209
|
+
*
|
|
210
|
+
* The <b>wj-color-picker</b> directive supports the following attributes:
|
|
211
|
+
*
|
|
212
|
+
* <dl class="dl-horizontal">
|
|
213
|
+
* <dt>ng-model</dt> <dd><code>@</code> Binds the control's <b>value</b> property using the ng-model Angular
|
|
214
|
+
* directive. Binding the property using the ng-model directive provides standard benefits
|
|
215
|
+
* like validation, adding the control's state to the form instance, and so on. To redefine
|
|
216
|
+
* properties on a control that is bound by the ng-model directive, use the wj-model-property
|
|
217
|
+
* attribute.</dd>
|
|
218
|
+
* <dt>wj-model-property</dt> <dd><code>@</code> Specifies a control property that is bound to a scope using the
|
|
219
|
+
* <b>ng-model</b> directive.</dd>
|
|
220
|
+
* <dt>control</dt> <dd><code>=</code> A reference to the {@link ColorPicker}
|
|
221
|
+
* control created by this directive.</dd>
|
|
222
|
+
* <dt>initialized</dt> <dd><code>&</code> This event occurs after the binding has finished
|
|
223
|
+
* initializing the control with attribute values.</dd>
|
|
224
|
+
* <dt>is-initialized</dt> <dd><code>=</code> A value indicating whether the binding has finished
|
|
225
|
+
* initializing the control with attribute values. </dd>
|
|
226
|
+
* <dt>show-alpha-channel</dt><dd><code>@</code> A value indicating whether the control
|
|
227
|
+
* displays the alpha channel (transparency) editor.</dd>
|
|
228
|
+
* <dt>show-color-string</dt> <dd><code>@</code> A value indicating whether the control
|
|
229
|
+
* displays a string representation of the color being edited.</dd>
|
|
230
|
+
* <dt>palette</dt> <dd><code>=</code> An array with ten color values to use
|
|
231
|
+
* as the palette.</dd>
|
|
232
|
+
* <dt>value</dt> <dd><code>=</code> The color being edited.</dd>
|
|
233
|
+
* <dt>got-focus</dt> <dd><code>&</code> The {@link ColorPicker.gotFocus} event handler.</dd>
|
|
234
|
+
* <dt>lost-focus</dt> <dd><code>&</code> The {@link ColorPicker.lostFocus} event handler.</dd>
|
|
235
|
+
* <dt>value-changed</dt> <dd><code>&</code> The {@link ColorPicker.valueChanged} event handler.</dd>
|
|
236
|
+
* </dl>
|
|
237
|
+
*/
|
|
238
|
+
export declare class WjColorPicker extends WjDirective {
|
|
239
|
+
readonly _controlConstructor: new (elem: HTMLElement) => Control;
|
|
240
|
+
}
|
|
241
|
+
/**
|
|
242
|
+
* AngularJS directive for the {@link ListBox} control.
|
|
243
|
+
*
|
|
244
|
+
* Use the <b>wj-list-box</b> directive to add {@link ListBox} controls to your
|
|
245
|
+
* AngularJS applications.
|
|
246
|
+
* Note that directive and parameter names must be formatted as lower-case with dashes
|
|
247
|
+
* instead of camel-case. For example:
|
|
248
|
+
*
|
|
249
|
+
* <pre>b>Here is a ListBox control:</p>
|
|
250
|
+
* <wj-list-box
|
|
251
|
+
* selected-item="theCountry"
|
|
252
|
+
* items-source="countries"
|
|
253
|
+
* placeholder="country">
|
|
254
|
+
* </wj-list-box></pre>
|
|
255
|
+
*
|
|
256
|
+
* The example below creates a <b>ListBox</b> control and binds it to a 'countries' array
|
|
257
|
+
* exposed by the controller. The value selected is bound to the 'theCountry'
|
|
258
|
+
* controller property using the <b>selected-item</b> attribute.
|
|
259
|
+
*
|
|
260
|
+
* <a href="https://jsfiddle.net/Wijmo5/37GHw/" target="_blank">Example</a>
|
|
261
|
+
*
|
|
262
|
+
* The <b>wj-list-box</b> directive supports the following attributes:
|
|
263
|
+
*
|
|
264
|
+
* <dl class="dl-horizontal">
|
|
265
|
+
* <dt>ng-model</dt> <dd><code>@</code> Binds the control's <b>selectedValue</b> property using the ng-model Angular
|
|
266
|
+
* directive. Binding the property using the ng-model directive provides standard benefits
|
|
267
|
+
* like validation, adding the control's state to the form instance, and so on. To redefine
|
|
268
|
+
* properties on a control that is bound by the ng-model directive, use the wj-model-property
|
|
269
|
+
* attribute.</dd>
|
|
270
|
+
* <dt>wj-model-property</dt> <dd><code>@</code> Specifies a control property that is bound to a scope using the
|
|
271
|
+
* <b>ng-model</b> directive.</dd>
|
|
272
|
+
* <dt>control</dt> <dd><code>=</code> A reference to the {@link ListBox}
|
|
273
|
+
* control created by this directive.</dd>
|
|
274
|
+
* <dt>display-member-path</dt> <dd><code>@</code> The property to use as the visual
|
|
275
|
+
* representation of the items.</dd>
|
|
276
|
+
* <dt>is-content-html</dt> <dd><code>@</code> A value indicating whether items
|
|
277
|
+
* contain plain text or HTML.</dd>
|
|
278
|
+
* <dt>initialized</dt> <dd><code>&</code> This event occurs after the binding has finished
|
|
279
|
+
* initializing the control with attribute values.</dd>
|
|
280
|
+
* <dt>is-initialized</dt> <dd><code>=</code> A value indicating whether the binding has finished
|
|
281
|
+
* initializing the control with attribute values. </dd>
|
|
282
|
+
* <dt>item-formatter</dt> <dd><code>=</code> A function used to customize the
|
|
283
|
+
* values to show in the list.</dd>
|
|
284
|
+
* <dt>items-source</dt> <dd><code>=</code> An array or {@link ICollectionView}
|
|
285
|
+
* that contains the list items.</dd>
|
|
286
|
+
* <dt>max-height</dt> <dd><code>@</code> The maximum height of the list.</dd>
|
|
287
|
+
* <dt>selected-index</dt> <dd><code>=</code> The index of the currently selected
|
|
288
|
+
* item.</dd>
|
|
289
|
+
* <dt>selected-item</dt> <dd><code>=</code> The item that is currently selected.</dd>
|
|
290
|
+
* <dt>selected-value</dt> <dd><code>=</code> The value of the <b>selected-item</b>
|
|
291
|
+
* obtained using the <b>selected-value-path</b>.</dd>
|
|
292
|
+
* <dt>selected-value-path</dt> <dd><code>@</code> The property used to get the
|
|
293
|
+
* <b>selected-value</b> from the <b>selected-item</b>.</dd>
|
|
294
|
+
* <dt>got-focus</dt> <dd><code>&</code> The {@link ListBox.gotFocus} event handler.</dd>
|
|
295
|
+
* <dt>lost-focus</dt> <dd><code>&</code> The {@link ListBox.lostFocus} event handler.</dd>
|
|
296
|
+
* <dt>items-changed</dt> <dd><code>&</code> The {@link ListBox.itemsChanged} event handler.</dd>
|
|
297
|
+
* <dt>selected-index-changed</dt> <dd><code>&</code> The {@link ListBox.selectedIndexChanged} event handler.</dd>
|
|
298
|
+
* </dl>
|
|
299
|
+
*
|
|
300
|
+
* The <b>wj-list-box</b> directive may contain {@link wijmo.angular.input.WjItemTemplate} child directive.
|
|
301
|
+
*/
|
|
302
|
+
export declare class WjListBox extends WjDirective {
|
|
303
|
+
constructor();
|
|
304
|
+
readonly _controlConstructor: new (elem: HTMLElement) => Control;
|
|
305
|
+
}
|
|
306
|
+
/**
|
|
307
|
+
* AngularJS directive for {@link ListBox} and {@link Menu} item templates.
|
|
308
|
+
*
|
|
309
|
+
* The <b>wj-item-template</b> directive must be contained in a {@link wijmo.angular.input.WjListBox}
|
|
310
|
+
* or {@link wijmo.angular.input.WjMenu} directives.
|
|
311
|
+
*
|
|
312
|
+
* The <b>wj-item-template</b> directive defines a template for items of <b>ListBox</b>
|
|
313
|
+
* and data-bound <b>Menu</b> controls.
|
|
314
|
+
* The template may contain an arbitrary HTML fragment with AngularJS bindings and directives.
|
|
315
|
+
* In addition to any properties available in a controller, the local <b>$item</b>,
|
|
316
|
+
* <b>$itemIndex</b> and <b>$control</b> template variables can be used in AngularJS bindings
|
|
317
|
+
* that refer to the data item, its index, and the owner control.
|
|
318
|
+
*
|
|
319
|
+
* Note that directive and parameter names must be formatted as lower-case with dashes
|
|
320
|
+
* instead of camel-case. For example:
|
|
321
|
+
*
|
|
322
|
+
* <pre><p>Here is a ListBox control with an item template:</p>
|
|
323
|
+
* <wj-list-box items-source="musicians">
|
|
324
|
+
* <wj-item-template>
|
|
325
|
+
* {​{$itemIndex}}. <b>{​{$item.name}}</b>
|
|
326
|
+
* <br />
|
|
327
|
+
* <img ng-src="{​{$item.photo}}"/>
|
|
328
|
+
* </wj-item-template>
|
|
329
|
+
* </wj-list-box></pre>
|
|
330
|
+
*/
|
|
331
|
+
export declare class WjItemTemplate extends WjDirective {
|
|
332
|
+
static _itemTemplateProp: string;
|
|
333
|
+
static _itemScopeProp: string;
|
|
334
|
+
_$compile: any;
|
|
335
|
+
constructor($compile: any);
|
|
336
|
+
_initControl(element: any): any;
|
|
337
|
+
_createLink(): WjLink;
|
|
338
|
+
_getMetaDataId(): any;
|
|
339
|
+
}
|
|
340
|
+
/**
|
|
341
|
+
* AngularJS directive for the {@link Menu} control.
|
|
342
|
+
*
|
|
343
|
+
* Use the <b>wj-menu</b> directive to add drop-down menus to your AngularJS applications.
|
|
344
|
+
* Note that directive and parameter names must be formatted as lower-case with dashes
|
|
345
|
+
* instead of camel-case. For example:
|
|
346
|
+
*
|
|
347
|
+
* <pre><p>Here is a Menu control used as a value picker:</p>
|
|
348
|
+
* <wj-menu header="Tax" value="tax">
|
|
349
|
+
* <wj-menu-item value="0">Exempt</wj-menu-item>
|
|
350
|
+
* <wj-menu-item value=".05">5%</wj-menu-item>
|
|
351
|
+
* <wj-menu-item value=".1">10%</wj-menu-item>
|
|
352
|
+
* <wj-menu-item value=".15">15%</wj-menu-item>
|
|
353
|
+
* </wj-menu></pre>
|
|
354
|
+
*
|
|
355
|
+
* <a href="https://jsfiddle.net/Wijmo5/Wc5Mq/" target="_blank">Example</a>
|
|
356
|
+
*
|
|
357
|
+
* This example creates three <b>Menu</b> controls. The first is used as a value picker,
|
|
358
|
+
* the second uses a list of commands with parameters, and the third is a group of
|
|
359
|
+
* three menus handled by an <b>itemClicked</b> function in the controller.
|
|
360
|
+
*
|
|
361
|
+
* The <b>wj-menu</b> directive extends {@link wijmo.angular.input.WjComboBox} with the following attributes:
|
|
362
|
+
*
|
|
363
|
+
* <dl class="dl-horizontal">
|
|
364
|
+
* <dt>command-path</dt> <dd><code>@</code> The command to be executed when the item is clicked.</dd>
|
|
365
|
+
* <dt>command-parameter-path</dt><dd><code>@</code> The name of the property that contains command parameters.</dd>
|
|
366
|
+
* <dt>header</dt> <dd><code>@</code> The text shown on the control.</dd>
|
|
367
|
+
* <dt>is-button</dt> <dd><code>@</code> Whether the menu should react to clicks on its header area.</dd>
|
|
368
|
+
* <dt>value</dt> <dd><code>@</code> The value of the selected <b>wj-menu-item</b> value property. </dd>
|
|
369
|
+
* <dt>item-clicked</dt> <dd><code>&</code> The {@link Menu.itemClicked} event handler.</dd>
|
|
370
|
+
* <dt>got-focus</dt> <dd><code>&</code> The {@link Menu.gotFocus} event handler.</dd>
|
|
371
|
+
* <dt>lost-focus</dt> <dd><code>&</code> The {@link Menu.lostFocus} event handler.</dd>
|
|
372
|
+
* </dl>
|
|
373
|
+
*
|
|
374
|
+
*The <b>wj-menu</b> directive may contain the following child directives:
|
|
375
|
+
*{@link wijmo.angular.input.WjMenuItem}, {@link wijmo.angular.input.WjMenuSeparator} and {@link wijmo.angular.input.WjItemTemplate}(in case of data-bound Menu control).
|
|
376
|
+
*/
|
|
377
|
+
export declare class WjMenu extends WjComboBox {
|
|
378
|
+
constructor($compile: any);
|
|
379
|
+
readonly _controlConstructor: typeof wjcInput.Menu;
|
|
380
|
+
_createLink(): WjLink;
|
|
381
|
+
_initProps(): void;
|
|
382
|
+
updateControlValue(scope: any, control: any, link: WjLink): void;
|
|
383
|
+
updateHeader(scope: any, control: any, link: WjLink): void;
|
|
384
|
+
}
|
|
385
|
+
/**
|
|
386
|
+
* AngularJS directive for menu items.
|
|
387
|
+
*
|
|
388
|
+
* The <b>wj-menu-item</b> directive must be contained in a {@link wijmo.angular.input.WjMenu} directive.
|
|
389
|
+
* It supports the following attributes:
|
|
390
|
+
*
|
|
391
|
+
* <dl class="dl-horizontal">
|
|
392
|
+
* <dt>cmd</dt> <dd><code>=</code> The function to execute in the controller
|
|
393
|
+
* when the item is clicked.</dd>
|
|
394
|
+
* <dt>cmd-param</dt> <dd><code>=</code> The parameter passed to the <b>cmd</b> function
|
|
395
|
+
* when the item is clicked.</dd>
|
|
396
|
+
* <dt>value</dt> <dd><code>=</code> The value to select when the item is clicked
|
|
397
|
+
* (use either this or <b>cmd</b>).</dd>
|
|
398
|
+
* </dl>
|
|
399
|
+
*
|
|
400
|
+
* The content displayed by the item may contain an arbitrary HTML fragment with AngularJS bindings and directives.
|
|
401
|
+
* You can also use <b>ng-repeat</b> and <b>ng-if</b> directives to populate the items in the Menu control.
|
|
402
|
+
* In addition to any properties available in a controller, the local <b>$item</b>,
|
|
403
|
+
* <b>$itemIndex</b> and <b>$control</b> template variables can be used in AngularJS bindings
|
|
404
|
+
* that refer to the data item, its index, and the owner control.
|
|
405
|
+
*/
|
|
406
|
+
export declare class WjMenuItem extends WjDirective {
|
|
407
|
+
static _itemTemplateProp: string;
|
|
408
|
+
static _itemScopeProp: string;
|
|
409
|
+
static _itemLinkProp: string;
|
|
410
|
+
static _directiveId: string;
|
|
411
|
+
constructor();
|
|
412
|
+
_createLink(): WjLink;
|
|
413
|
+
_getMetaDataId(): any;
|
|
414
|
+
_getId(): string;
|
|
415
|
+
}
|
|
416
|
+
/**
|
|
417
|
+
* AngularJS directive for menu separators.
|
|
418
|
+
*
|
|
419
|
+
* The <b>wj-menu-item-separator</b> directive must be contained in a {@link wijmo.angular.input.WjMenu} directive.
|
|
420
|
+
* It adds a non-selectable separator to the menu, and has no attributes.
|
|
421
|
+
*/
|
|
422
|
+
export declare class WjMenuSeparator extends WjDirective {
|
|
423
|
+
constructor();
|
|
424
|
+
_getMetaDataId(): any;
|
|
425
|
+
_createLink(): WjLink;
|
|
426
|
+
_getId(): string;
|
|
427
|
+
}
|
|
428
|
+
/**
|
|
429
|
+
* AngularJS directive for context menus.
|
|
430
|
+
*
|
|
431
|
+
* Use the <b>wj-context-menu</b> directive to add context menus to elements
|
|
432
|
+
* on the page. The wj-context-menu directive is based on the <b>wj-menu</b>
|
|
433
|
+
* directive; it displays a popup menu when the user performs a context menu
|
|
434
|
+
* request on an element (usually a right-click).
|
|
435
|
+
*
|
|
436
|
+
* The wj-context-menu directive is specified as a parameter added to the
|
|
437
|
+
* element that the context menu applies to. The parameter value is a
|
|
438
|
+
* CSS selector for the element that contains the menu. For example:
|
|
439
|
+
*
|
|
440
|
+
* <pre><!-- paragraph with a context menu -->
|
|
441
|
+
*<p wj-context-menu="#idMenu" >
|
|
442
|
+
* This paragraph has a context menu.</p>
|
|
443
|
+
*
|
|
444
|
+
*<!-- define the context menu (hidden and with an id) -->
|
|
445
|
+
*<wj-menu id="idMenu" ng-show="false">
|
|
446
|
+
* <wj-menu-item cmd="cmdOpen" cmd-param ="1">Open...</wj-menu-item>
|
|
447
|
+
* <wj-menu-item cmd="cmdSave" cmd-param="2">Save </wj-menu-item>
|
|
448
|
+
* <wj-menu-item cmd="cmdSave" cmd-param="3">Save As...</wj-menu-item>
|
|
449
|
+
* <wj-menu-item cmd="cmdNew" cmd-param ="4">New...</wj-menu-item>
|
|
450
|
+
* <wj-menu-separator></wj-menu-separator>
|
|
451
|
+
* <wj-menu-item cmd="cmdExit" cmd-param="5">Exit</wj-menu-item>
|
|
452
|
+
*</wj-menu ></pre>
|
|
453
|
+
*/
|
|
454
|
+
export declare class WjContextMenu extends WjDirective {
|
|
455
|
+
constructor();
|
|
456
|
+
_getMetaDataId(): any;
|
|
457
|
+
_postLinkFn(): (scope: any, tElement: any, tAttrs: any) => void;
|
|
458
|
+
}
|
|
459
|
+
/**
|
|
460
|
+
* AngularJS directive for the {@link InputDate} control.
|
|
461
|
+
*
|
|
462
|
+
* Use the <b>wj-input-date</b> directive to add {@link InputDate} controls to your
|
|
463
|
+
* AngularJS applications.
|
|
464
|
+
* Note that directive and parameter names must be formatted as lower-case with dashes
|
|
465
|
+
* instead of camel-case. For example:
|
|
466
|
+
*
|
|
467
|
+
* <pre><p>Here is an InputDate control:</p>
|
|
468
|
+
* <wj-input-date
|
|
469
|
+
* value="theDate"
|
|
470
|
+
* format="M/d/yyyy">
|
|
471
|
+
* </wj-input-date></pre>
|
|
472
|
+
*
|
|
473
|
+
* The example below shows a <b>Date</b> value (that includes date and time information)
|
|
474
|
+
* using an {@link InputDate} and an {@link InputTime} control. Notice how both controls
|
|
475
|
+
* are bound to the same controller variable, and each edits the appropriate information
|
|
476
|
+
* (either date or time). The example also shows a {@link Calendar} control that can be
|
|
477
|
+
* used to select the date with a single click.
|
|
478
|
+
*
|
|
479
|
+
* <a href="https://jsfiddle.net/Wijmo5/46PhD/" target="_blank">Example</a>
|
|
480
|
+
*
|
|
481
|
+
* The <b>wj-input-date</b> directive supports the following attributes:
|
|
482
|
+
*
|
|
483
|
+
* <dl class="dl-horizontal">
|
|
484
|
+
* <dt>ng-model</dt> <dd><code>@</code> Binds the control's <b>value</b> property using the ng-model Angular
|
|
485
|
+
* directive. Binding the property using the ng-model directive provides standard benefits
|
|
486
|
+
* like validation, adding the control's state to the form instance, and so on. To redefine
|
|
487
|
+
* properties on a control that is bound by the ng-model directive, use the wj-model-property
|
|
488
|
+
* attribute.</dd>
|
|
489
|
+
* <dt>wj-model-property</dt> <dd><code>@</code> Specifies a control property that is bound to a scope using the <b>ng-model</b> directive.</dd>
|
|
490
|
+
* <dt>control</dt> <dd><code>=</code> A reference to the {@link InputDate} control created by this directive.</dd>
|
|
491
|
+
* <dt>format</dt> <dd><code>@</code> The format used to display the date being edited (see {@link Globalize}).</dd>
|
|
492
|
+
* <dt>mask</dt> <dd><code>@</code> The mask used to validate the input as the user types (see {@link wijmo.input.InputMask}).</dd>
|
|
493
|
+
* <dt>is-dropped-down</dt> <dd><code>@</code> A value indicating whether the drop-down is currently visible.</dd>
|
|
494
|
+
* <dt>initialized</dt> <dd><code>&</code> This event occurs after the binding has finished initializing the control with attribute values.</dd>
|
|
495
|
+
* <dt>is-initialized</dt> <dd><code>=</code> A value indicating whether the binding has finished initializing the control with attribute values. </dd>
|
|
496
|
+
* <dt>max</dt> <dd><code>@</code> The latest valid date (a string in the format "yyyy-MM-dd").</dd>
|
|
497
|
+
* <dt>min</dt> <dd><code>@</code> The earliest valid date (a string in the format "yyyy-MM-dd").</dd>
|
|
498
|
+
* <dt>placeholder</dt> <dd><code>@</code> The string to show as a hint when the control is empty.</dd>
|
|
499
|
+
* <dt>is-required</dt> <dd><code>@</code> A value indicating whether to prevent null values.</dd>
|
|
500
|
+
* <dt>show-drop-down-button</dt><dd><code>@</code> A value indicating whether the control displays a drop-down button.</dd>
|
|
501
|
+
* <dt>text</dt> <dd><code>=</code> The text to show in the control.</dd>
|
|
502
|
+
* <dt>value</dt> <dd><code>=</code> The date being edited.</dd>
|
|
503
|
+
* <dt>got-focus</dt> <dd><code>&</code> The {@link InputDate.gotFocus} event handler.</dd>
|
|
504
|
+
* <dt>lost-focus</dt> <dd><code>&</code> The {@link InputDate.lostFocus} event handler.</dd>
|
|
505
|
+
* <dt>is-dropped-down-changing</dt> <dd><code>&</code> The {@link InputDate.isDroppedDownChanging} event handler.</dd>
|
|
506
|
+
* <dt>is-dropped-down-changed </dt> <dd><code>&</code> The {@link InputDate.isDroppedDownChanged} event handler.</dd>
|
|
507
|
+
* <dt>text-changed</dt> <dd><code>&</code> The {@link InputDate.textChanged} event handler.</dd>
|
|
508
|
+
* <dt>value-changed</dt> <dd><code>&</code> The {@link InputDate.valueChanged} event handler.</dd>
|
|
509
|
+
* </dl>
|
|
510
|
+
*
|
|
511
|
+
* If provided, the <b>min</b> and <b>max</b> attributes are strings in the format
|
|
512
|
+
* "yyyy-MM-dd". Technically, you can use any full date as defined in the W3C
|
|
513
|
+
* <a href="https://tools.ietf.org/html/rfc3339" target="_blank">[RFC 3339]</a>, which is also
|
|
514
|
+
* the format used with regular HTML5 input elements.
|
|
515
|
+
*/
|
|
516
|
+
export declare class WjInputDate extends WjDropDown {
|
|
517
|
+
readonly _controlConstructor: typeof wjcInput.InputDate;
|
|
518
|
+
}
|
|
519
|
+
/**
|
|
520
|
+
* AngularJS directive for the {@link InputDateTime} control.
|
|
521
|
+
*
|
|
522
|
+
* Use the <b>wj-input-date-time</b> directive to add {@link InputDateTime} controls to your
|
|
523
|
+
* AngularJS applications.
|
|
524
|
+
* Note that directive and parameter names must be formatted as lower-case with dashes
|
|
525
|
+
* instead of camel-case. For example:
|
|
526
|
+
*
|
|
527
|
+
* <pre><p>Here is an InputDateTime control:</p>
|
|
528
|
+
* <wj-input-date-time
|
|
529
|
+
* value="theDate"
|
|
530
|
+
* format="M/d/yyyy">
|
|
531
|
+
* </wj-input-date-time></pre>
|
|
532
|
+
*
|
|
533
|
+
* The <b>wj-input-date-time</b> directive supports the following attributes:
|
|
534
|
+
*
|
|
535
|
+
* <dl class="dl-horizontal">
|
|
536
|
+
* <dt>ng-model</dt> <dd><code>@</code> Binds the control's <b>value</b> property using the ng-model Angular
|
|
537
|
+
* directive. Binding the property using the ng-model directive provides standard benefits
|
|
538
|
+
* like validation, adding the control's state to the form instance, and so on. To redefine
|
|
539
|
+
* properties on a control that is bound by the ng-model directive, use the wj-model-property
|
|
540
|
+
* attribute.</dd>
|
|
541
|
+
* <dt>wj-model-property</dt> <dd><code>@</code> Specifies a control property that is bound to a scope using the <b>ng-model</b> directive.</dd>
|
|
542
|
+
* <dt>control</dt> <dd><code>=</code> A reference to the {@link InputDate} control created by this directive.</dd>
|
|
543
|
+
* <dt>format</dt> <dd><code>@</code> The format used to display the date being edited (see {@link Globalize}).</dd>
|
|
544
|
+
* <dt>mask</dt> <dd><code>@</code> The mask used to validate the input as the user types (see {@link wijmo.input.InputMask}).</dd>
|
|
545
|
+
* <dt>is-dropped-down</dt> <dd><code>@</code> A value indicating whether the drop-down is currently visible.</dd>
|
|
546
|
+
* <dt>initialized</dt> <dd><code>&</code> This event occurs after the binding has finished initializing the control with attribute values.</dd>
|
|
547
|
+
* <dt>is-initialized</dt> <dd><code>=</code> A value indicating whether the binding has finished initializing the control with attribute values. </dd>
|
|
548
|
+
* <dt>max</dt> <dd><code>@</code> The latest valid date (a string in the format "yyyy-MM-dd").</dd>
|
|
549
|
+
* <dt>min</dt> <dd><code>@</code> The earliest valid date (a string in the format "yyyy-MM-dd").</dd>
|
|
550
|
+
* <dt>placeholder</dt> <dd><code>@</code> The string to show as a hint when the control is empty.</dd>
|
|
551
|
+
* <dt>is-required</dt> <dd><code>@</code> A value indicating whether to prevent null values.</dd>
|
|
552
|
+
* <dt>show-drop-down-button</dt><dd><code>@</code> A value indicating whether the control displays a drop-down button.</dd>
|
|
553
|
+
* <dt>text</dt> <dd><code>=</code> The text to show in the control.</dd>
|
|
554
|
+
* <dt>timeMax</dt> <dd><code>@</code> The earliest valid time (a string in the format "hh:mm").</dd>
|
|
555
|
+
* <dt>timeMin</dt> <dd><code>@</code> The latest valid time (a string in the format "hh:mm").</dd>
|
|
556
|
+
* <dt>timeStep</dt> <dd><code>@</code> The number of minutes between entries in the drop-down list.</dd>
|
|
557
|
+
* <dt>timeFormat</dt> <dd><code>@</code> The format sting used to show values in the time drop-down list.</dd>
|
|
558
|
+
* <dt>value</dt> <dd><code>=</code> The date being edited.</dd>
|
|
559
|
+
* <dt>got-focus</dt> <dd><code>&</code> The {@link InputDateTime.gotFocus} event handler.</dd>
|
|
560
|
+
* <dt>lost-focus</dt> <dd><code>&</code> The {@link InputDateTime.lostFocus} event handler.</dd>
|
|
561
|
+
* <dt>is-dropped-down-changing</dt> <dd><code>&</code> The {@link InputDateTime.isDroppedDownChanging} event handler.</dd>
|
|
562
|
+
* <dt>is-dropped-down-changed </dt> <dd><code>&</code> The {@link InputDateTime.isDroppedDownChanged} event handler.</dd>
|
|
563
|
+
* <dt>text-changed</dt> <dd><code>&</code> The {@link InputDateTime.textChanged} event handler.</dd>
|
|
564
|
+
* <dt>value-changed</dt> <dd><code>&</code> The {@link InputDateTime.valueChanged} event handler.</dd>
|
|
565
|
+
* </dl>
|
|
566
|
+
*/
|
|
567
|
+
export declare class WjInputDateTime extends WjInputDate {
|
|
568
|
+
readonly _controlConstructor: typeof wjcInput.InputDateTime;
|
|
569
|
+
}
|
|
570
|
+
/**
|
|
571
|
+
* AngularJS directive for the {@link InputNumber} control.
|
|
572
|
+
*
|
|
573
|
+
* Use the <b>wj-input-number</b> directive to add <b>InputNumber</b> controls to your
|
|
574
|
+
* AngularJS applications.
|
|
575
|
+
* Note that directive and parameter names must be formatted as lower-case with dashes
|
|
576
|
+
* instead of camel-case. For example:
|
|
577
|
+
*
|
|
578
|
+
* <pre><p>Here is an InputNumber control:</p>
|
|
579
|
+
* <wj-input-number
|
|
580
|
+
* value="theNumber"
|
|
581
|
+
* min="0"
|
|
582
|
+
* max="10"
|
|
583
|
+
* format="n0"
|
|
584
|
+
* placeholder="number between zero and ten">
|
|
585
|
+
* </wj-input-number></pre>
|
|
586
|
+
*
|
|
587
|
+
* The example below creates several <b>InputNumber</b> controls and shows the effect
|
|
588
|
+
* of using different formats, ranges, and step values.
|
|
589
|
+
*
|
|
590
|
+
* <a href="https://jsfiddle.net/Wijmo5/u7HpD/" target="_blank">Example</a>
|
|
591
|
+
*
|
|
592
|
+
* The <b>wj-input-number</b> directive supports the following attributes:
|
|
593
|
+
*
|
|
594
|
+
* <dl class="dl-horizontal">
|
|
595
|
+
* <dt>ng-model</dt> <dd><code>@</code> Binds the control's <b>value</b> property using the ng-model Angular
|
|
596
|
+
* directive. Binding the property using the ng-model directive provides standard benefits
|
|
597
|
+
* like validation, adding the control's state to the form instance, and so on. To redefine
|
|
598
|
+
* properties on a control that is bound by the ng-model directive, use the wj-model-property
|
|
599
|
+
* attribute.</dd>
|
|
600
|
+
* <dt>wj-model-property</dt> <dd><code>@</code> Specifies a control property that is bound to a scope using the <b>ng-model</b> directive.</dd>
|
|
601
|
+
* <dt>control</dt> <dd><code>=</code> A reference to the {@link InputNumber} control created by this directive.</dd>
|
|
602
|
+
* <dt>format</dt> <dd><code>@</code> The format used to display the number (see {@link Globalize}).</dd>
|
|
603
|
+
* <dt>input-type</dt> <dd><code>@</code> The "type" attribute of the HTML input element hosted by the control.</dd>
|
|
604
|
+
* <dt>initialized</dt> <dd><code>&</code> This event occurs after the binding has finished initializing the control with attribute values.</dd>
|
|
605
|
+
* <dt>is-initialized</dt><dd><code>=</code> A value indicating whether the binding has finished initializing the control with attribute values. </dd>
|
|
606
|
+
* <dt>max</dt> <dd><code>@</code> The largest valid number.</dd>
|
|
607
|
+
* <dt>min</dt> <dd><code>@</code> The smallest valid number.</dd>
|
|
608
|
+
* <dt>place-holder</dt> <dd><code>@</code> The string to show as a hint when the control is empty.</dd>
|
|
609
|
+
* <dt>is-required</dt> <dd><code>@</code> A value indicating whether to prevent null values.</dd>
|
|
610
|
+
* <dt>show-spinner</dt> <dd><code>@</code> A value indicating whether to display spinner buttons to change the value by <b>step</b> units.</dd>
|
|
611
|
+
* <dt>step</dt> <dd><code>@</code> The amount to add or subtract to the value when the user clicks the spinner buttons.</dd>
|
|
612
|
+
* <dt>text</dt> <dd><code>=</code> The text to show in the control.</dd>
|
|
613
|
+
* <dt>value</dt> <dd><code>=</code> The number being edited.</dd>
|
|
614
|
+
* <dt>got-focus</dt> <dd><code>&</code> The {@link InputNumber.gotFocus} event handler.</dd>
|
|
615
|
+
* <dt>lost-focus</dt> <dd><code>&</code> The {@link InputNumber.lostFocus} event handler.</dd>
|
|
616
|
+
* <dt>text-changed</dt> <dd><code>&</code> The {@link InputNumber.textChanged} event handler.</dd>
|
|
617
|
+
* <dt>value-changed</dt> <dd><code>&</code> The {@link InputNumber.valueChanged} event handler.</dd>
|
|
618
|
+
* </dl>
|
|
619
|
+
*/
|
|
620
|
+
export declare class WjInputNumber extends WjDirective {
|
|
621
|
+
readonly _controlConstructor: new (elem: HTMLElement) => Control;
|
|
622
|
+
}
|
|
623
|
+
/**
|
|
624
|
+
* AngularJS directive for the {@link InputMask} control.
|
|
625
|
+
*
|
|
626
|
+
* Use the <b>wj-input-mask</b> directive to add {@link InputMask} controls to your
|
|
627
|
+
* AngularJS applications.
|
|
628
|
+
* Note that directive and parameter names must be formatted as lower-case with dashes
|
|
629
|
+
* instead of camel-case. For example:
|
|
630
|
+
*
|
|
631
|
+
* <pre><p>Here is an InputMask control:</p>
|
|
632
|
+
* <wj-input-mask
|
|
633
|
+
* mask="99/99/99"
|
|
634
|
+
* mask-placeholder="*">
|
|
635
|
+
* </wj-input-mask></pre>
|
|
636
|
+
*
|
|
637
|
+
* The <b>wj-input-mask</b> directive supports the following attributes:
|
|
638
|
+
*
|
|
639
|
+
* <dl class="dl-horizontal">
|
|
640
|
+
* <dt>ng-model</dt> <dd><code>@</code> Binds the control's <b>value</b> property using the ng-model Angular
|
|
641
|
+
* directive. Binding the property using the ng-model directive provides standard benefits
|
|
642
|
+
* like validation, adding the control's state to the form instance, and so on. To redefine
|
|
643
|
+
* properties on a control that is bound by the ng-model directive, use the wj-model-property
|
|
644
|
+
* attribute.</dd>
|
|
645
|
+
* <dt>wj-model-property</dt> <dd><code>@</code> Specifies a control property that is bound to a scope using the <b>ng-model</b> directive.</dd>
|
|
646
|
+
* <dt>control</dt> <dd><code>=</code> A reference to the {@link InputNumber} control created by this directive.</dd>
|
|
647
|
+
* <dt>initialized</dt> <dd><code>&</code> This event occurs after the binding has finished initializing the control with attribute values.</dd>
|
|
648
|
+
* <dt>is-initialized</dt> <dd><code>=</code> A value indicating whether the binding has finished initializing the control with attribute values. </dd>
|
|
649
|
+
* <dt>mask</dt> <dd><code>@</code> The string mask used to format the value as the user types.</dd>
|
|
650
|
+
* <dt>prompt-char</dt> <dd><code>@</code> A character used to show input locations within the mask.</dd>
|
|
651
|
+
* <dt>place-holder</dt> <dd><code>@</code> The string to show as a hint when the control is empty.</dd>
|
|
652
|
+
* <dt>value</dt> <dd><code>=</code> The string being edited.</dd>
|
|
653
|
+
* <dt>raw-value</dt> <dd><code>=</code> The string being edited, excluding literal and prompt characters.</dd>
|
|
654
|
+
* <dt>got-focus</dt> <dd><code>&</code> The {@link InputMask.gotFocus} event handler.</dd>
|
|
655
|
+
* <dt>lost-focus</dt> <dd><code>&</code> The {@link InputMask.lostFocus} event handler.</dd>
|
|
656
|
+
* <dt>value-changed</dt> <dd><code>&</code> The {@link InputMask.valueChanged} event handler.</dd>
|
|
657
|
+
* </dl>
|
|
658
|
+
*/
|
|
659
|
+
export declare class WjInputMask extends WjDirective {
|
|
660
|
+
readonly _controlConstructor: new (elem: HTMLElement) => Control;
|
|
661
|
+
}
|
|
662
|
+
/**
|
|
663
|
+
* AngularJS directive for the {@link InputTime} control.
|
|
664
|
+
*
|
|
665
|
+
* Use the <b>wj-input-time</b> directive to add <b>InputTime</b> controls to your AngularJS applications.
|
|
666
|
+
* Note that directive and parameter names must be formatted as lower-case with dashes
|
|
667
|
+
* instead of camel-case. For example:
|
|
668
|
+
*
|
|
669
|
+
* <pre><p>Here is an InputTime control:</p>
|
|
670
|
+
* <wj-input-time
|
|
671
|
+
* value="theDate"
|
|
672
|
+
* format="h:mm tt"
|
|
673
|
+
* min="09:00" max="17:00"
|
|
674
|
+
* step="15">
|
|
675
|
+
* </wj-input-time></pre>
|
|
676
|
+
*
|
|
677
|
+
* <a href="https://jsfiddle.net/Wijmo5/46PhD/" target="_blank">Example</a>
|
|
678
|
+
*
|
|
679
|
+
* This example edits a <b>Date</b> value (that includes date and time information)
|
|
680
|
+
* using an {@link InputDate} and an InputTime control. Notice how both controls
|
|
681
|
+
* are bound to the same controller variable, and each edits the appropriate information
|
|
682
|
+
* (either date or time). The example also shows a {@link Calendar} control that can be
|
|
683
|
+
* used to select the date with a single click.
|
|
684
|
+
*
|
|
685
|
+
* The <b>wj-input-time</b> directive extends {@link wijmo.angular.input.WjComboBox} with the following attributes:
|
|
686
|
+
*
|
|
687
|
+
* <dl class="dl-horizontal">
|
|
688
|
+
* <dt>ng-model</dt> <dd><code>@</code> Binds the control's <b>value</b> property using the ng-model Angular
|
|
689
|
+
* directive. Binding the property using the ng-model directive provides standard benefits
|
|
690
|
+
* like validation, adding the control's state to the form instance, and so on. To redefine
|
|
691
|
+
* properties on a control that is bound by the ng-model directive, use the wj-model-property
|
|
692
|
+
* attribute.</dd>
|
|
693
|
+
* <dt>wj-model-property</dt><dd><code>@</code> Specifies a control property that is bound to a scope using the <b>ng-model</b> directive.</dd>
|
|
694
|
+
* <dt>control</dt> <dd><code>=</code> A reference to the {@link InputDate} control created by this directive.</dd>
|
|
695
|
+
* <dt>format</dt> <dd><code>@</code> The format used to display the selected time.</dd>
|
|
696
|
+
* <dt>mask</dt> <dd><code>@</code> A mask used to validate the input as the user types (see {@link InputMask}).</dd>
|
|
697
|
+
* <dt>max</dt> <dd><code>@</code> The earliest valid time (a string in the format "hh:mm").</dd>
|
|
698
|
+
* <dt>min</dt> <dd><code>@</code> The latest valid time (a string in the format "hh:mm").</dd>
|
|
699
|
+
* <dt>step</dt> <dd><code>@</code> The number of minutes between entries in the drop-down list.</dd>
|
|
700
|
+
* <dt>value</dt> <dd><code>=</code> The time being edited (as a Date object).</dd>
|
|
701
|
+
* <dt>value-changed</dt> <dd><code>&</code> The!@see: valueChanged event handler.</dd>
|
|
702
|
+
* </dl>
|
|
703
|
+
*
|
|
704
|
+
* If provided, the <b>min</b> and <b>max</b> attributes are strings in the format
|
|
705
|
+
* "hh:mm". Technically, you can use any full date as defined in the W3C
|
|
706
|
+
* <a href="https://tools.ietf.org/html/rfc3339" target="_blank">[RFC 3339]</a>, which is also the format
|
|
707
|
+
* used with regular HTML5 input elements.
|
|
708
|
+
*/
|
|
709
|
+
export declare class WjInputTime extends WjComboBox {
|
|
710
|
+
constructor($compile: any);
|
|
711
|
+
readonly _controlConstructor: typeof wjcInput.InputTime;
|
|
712
|
+
}
|
|
713
|
+
/**
|
|
714
|
+
* AngularJS directive for the {@link InputColor} control.
|
|
715
|
+
*
|
|
716
|
+
* Use the <b>wj-input-color</b> directive to add {@link InputColor} controls to your
|
|
717
|
+
* AngularJS applications.
|
|
718
|
+
* Note that directive and parameter names must be formatted as lower-case with dashes
|
|
719
|
+
* instead of camel-case. For example:
|
|
720
|
+
*
|
|
721
|
+
* <pre><p>Here is an InputColor control:</p>
|
|
722
|
+
* <wj-input-color
|
|
723
|
+
* value="theColor"
|
|
724
|
+
* show-alpha-channel="false">
|
|
725
|
+
* </wj-input-color></pre>
|
|
726
|
+
*
|
|
727
|
+
* The <b>wj-input-color</b> directive supports the following attributes:
|
|
728
|
+
*
|
|
729
|
+
* <dl class="dl-horizontal">
|
|
730
|
+
* <dt>ng-model</dt> <dd><code>@</code> Binds the control's <b>value</b> property using the ng-model Angular
|
|
731
|
+
* directive. Binding the property using the ng-model directive provides standard benefits
|
|
732
|
+
* like validation, adding the control's state to the form instance, and so on. To redefine
|
|
733
|
+
* properties on a control that is bound by the ng-model directive, use the wj-model-property
|
|
734
|
+
* attribute.</dd>
|
|
735
|
+
* <dt>wj-model-property</dt> <dd><code>@</code> Specifies a control property that is bound to a scope using the <b>ng-model</b> directive.</dd>
|
|
736
|
+
* <dt>control</dt> <dd><code>=</code> A reference to the InputColor control created by this directive.</dd>
|
|
737
|
+
* <dt>is-dropped-down</dt> <dd><code>@</code> A value indicating whether the drop-down is currently visible.</dd>
|
|
738
|
+
* <dt>initialized</dt> <dd><code>&</code> This event occurs after the binding has finished initializing the control with attribute values.</dd>
|
|
739
|
+
* <dt>is-initialized</dt> <dd><code>=</code> A value indicating whether the binding has finished initializing the control with attribute values. </dd>
|
|
740
|
+
* <dt>show-alpha-channel</dt> <dd><code>@</code> A value indicating whether the drop-down displays the alpha channel (transparency) editor.</dd>
|
|
741
|
+
* <dt>placeholder</dt> <dd><code>@</code> The string to show as a hint when the control is empty.</dd>
|
|
742
|
+
* <dt>is-required</dt> <dd><code>@</code> A value indicating whether to prevent null values.</dd>
|
|
743
|
+
* <dt>show-drop-down-button</dt> <dd><code>@</code> A value indicating whether the control displays a drop-down button.</dd>
|
|
744
|
+
* <dt>text</dt> <dd><code>=</code> The text to show in the control.</dd>
|
|
745
|
+
* <dt>value</dt> <dd><code>=</code> The color being edited.</dd>
|
|
746
|
+
* <dt>got-focus</dt> <dd><code>&</code> The {@link InputColor.gotFocus} event handler.</dd>
|
|
747
|
+
* <dt>lost-focus</dt> <dd><code>&</code> The {@link InputColor.lostFocus} event handler.</dd>
|
|
748
|
+
* <dt>is-dropped-down-changing</dt><dd><code>&</code> The {@link InputColor.isDroppedDownChanging} event handler.</dd>
|
|
749
|
+
* <dt>is-dropped-down-changed</dt><dd><code>&</code> The {@link InputColor.isDroppedDownChanged} event handler.</dd>
|
|
750
|
+
* <dt>text-changed</dt> <dd><code>&</code> The {@link InputColor.textChanged} event handler.</dd>
|
|
751
|
+
* <dt>value-changed</dt> <dd><code>&</code> The {@link InputColor.valueChanged} event handler.</dd>
|
|
752
|
+
* </dl>
|
|
753
|
+
*/
|
|
754
|
+
export declare class WjInputColor extends WjDropDown {
|
|
755
|
+
readonly _controlConstructor: typeof wjcInput.InputColor;
|
|
756
|
+
}
|
|
757
|
+
/**
|
|
758
|
+
* AngularJS directive for the {@link Popup} control.
|
|
759
|
+
*
|
|
760
|
+
* Use the <b>wj-popup</b> directive to add {@link Popup} controls to your
|
|
761
|
+
* AngularJS applications.
|
|
762
|
+
*
|
|
763
|
+
* The popup content may be specified inside the <b>wj-popup</b> tag, and can
|
|
764
|
+
* contain an arbitrary HTML fragment with AngularJS bindings and directives.
|
|
765
|
+
*
|
|
766
|
+
* Note that directive and parameter names must be formatted as lower-case with dashes
|
|
767
|
+
* instead of camel-case. For example:
|
|
768
|
+
*
|
|
769
|
+
* <pre><p>Here is a Popup control triggered by a button:</p>
|
|
770
|
+
* <button id="btn2" type="button">
|
|
771
|
+
* Click to show Popup
|
|
772
|
+
* </button>
|
|
773
|
+
* <wj-popup owner="#btn2" show-trigger="Click" hide-trigger="Blur">
|
|
774
|
+
* <h3>
|
|
775
|
+
* Salutation
|
|
776
|
+
* </h3>
|
|
777
|
+
* <div class="popover-content">
|
|
778
|
+
* Hello {​{firstName}} {​{lastName}}
|
|
779
|
+
* </div>
|
|
780
|
+
* </wj-popup></pre>
|
|
781
|
+
*
|
|
782
|
+
* The <b>wj-popup</b> directive supports the following attributes:
|
|
783
|
+
*
|
|
784
|
+
* <dl class="dl-horizontal">
|
|
785
|
+
* <dt>control</dt> <dd><code>=</code> A reference to the Popup control created by this directive.</dd>
|
|
786
|
+
* <dt>fade-in</dt> <dd><code>@</code> A boolean value that determines whether popups should be shown using a fade-in animation.</dd>
|
|
787
|
+
* <dt>fade-out</dt> <dd><code>@</code> A boolean value that determines whether popups should be hidden using a fade-out animation.</dd>
|
|
788
|
+
* <dt>hide-trigger</dt> <dd><code>@</code> A {@link PopupTrigger} value defining the action that hides the {@link Popup}.</dd>
|
|
789
|
+
* <dt>initialized</dt> <dd><code>&</code> This event occurs after the binding has finished initializing the control with attribute values.</dd>
|
|
790
|
+
* <dt>is-initialized</dt> <dd><code>=</code> A value indicating whether the binding has finished initializing the control with attribute values. </dd>
|
|
791
|
+
* <dt>owner</dt> <dd><code>@</code> A CSS selector referencing an element that controls the popup visibility.</dd>
|
|
792
|
+
* <dt>show-trigger</dt> <dd><code>@</code> A {@link PopupTrigger} value defining the action that shows the {@link Popup}.</dd>
|
|
793
|
+
* <dt>modal</dt> <dd><code>@</code> A boolean value that determines whether the {@link Popup} should be displayed as a modal dialog.</dd>
|
|
794
|
+
* <dt>got-focus</dt> <dd><code>&</code> The {@link Popup.gotFocus} event handler.</dd>
|
|
795
|
+
* <dt>lost-focus</dt> <dd><code>&</code> The {@link Popup.lostFocus} event handler.</dd>
|
|
796
|
+
* <dt>showing</dt> <dd><code>&</code> The {@link Popup.showing} event handler.</dd>
|
|
797
|
+
* <dt>shown</dt> <dd><code>&</code> The {@link Popup.shown} event handler.</dd>
|
|
798
|
+
* <dt>hiding</dt> <dd><code>&</code> The {@link Popup.hiding} event handler.</dd>
|
|
799
|
+
* <dt>hidden</dt> <dd><code>&</code> The {@link Popup.hidden} event handler.</dd>
|
|
800
|
+
* </dl>
|
|
801
|
+
*/
|
|
802
|
+
export declare class WjPopup extends WjDirective {
|
|
803
|
+
constructor();
|
|
804
|
+
readonly _controlConstructor: typeof wjcInput.Popup;
|
|
805
|
+
_initProps(): void;
|
|
806
|
+
}
|
|
807
|
+
/**
|
|
808
|
+
* AngularJS directive for the {@link MultiSelect} control.
|
|
809
|
+
*
|
|
810
|
+
* Use the <b>wj-multi-select</b> directive to add <b>MultiSelect</b> controls to your AngularJS applications.
|
|
811
|
+
* Note that directive and parameter names must be formatted as lower-case with dashes
|
|
812
|
+
* instead of camel-case. For example:
|
|
813
|
+
*
|
|
814
|
+
* <pre><p>Here is a MultiSelect bound to a collection of objects:</p>
|
|
815
|
+
* <wj-multi-select
|
|
816
|
+
* placeholder="Select Countries"
|
|
817
|
+
* items-source="ctx.items"
|
|
818
|
+
* header-format="{count} countries selected"
|
|
819
|
+
* display-Member-path="country"
|
|
820
|
+
* checked-Member-path="selected">
|
|
821
|
+
* </wj-multi-select></pre>
|
|
822
|
+
*
|
|
823
|
+
* The <b>wj-multi-select</b> directive extends {@link wijmo.angular.input.WjComboBox} with the following attributes:
|
|
824
|
+
*
|
|
825
|
+
* <dl class="dl-horizontal">
|
|
826
|
+
* <dt>checked-member-path</dt> <dd><code>@</code> The name of the property used to control the checkboxes placed next to each item.</dd>
|
|
827
|
+
* <dt>header-format</dt> <dd><code>@</code> The format string used to create the header content when the control has more than <b>maxHeaderItems</b> items checked.</dd>
|
|
828
|
+
* <dt>header-formatter</dt> <dd><code>=</code> A function that gets the HTML in the control header.</dd>
|
|
829
|
+
* <dt>max-header-items</dt> <dd><code>@</code> The maximum number of items to display on the control header.</dd>
|
|
830
|
+
* <dt>checked-items-changed</dt><dd><code>&</code> The {@link MultiSelect.checkedItemsChanged} event handler.</dd>
|
|
831
|
+
* </dl>
|
|
832
|
+
*/
|
|
833
|
+
export declare class WjMultiSelect extends WjComboBox {
|
|
834
|
+
constructor($compile: any);
|
|
835
|
+
readonly _controlConstructor: typeof wjcInput.MultiSelect;
|
|
836
|
+
}
|
|
837
|
+
/**
|
|
838
|
+
* AngularJS directive for the {@link MultiAutoComplete} control.
|
|
839
|
+
*
|
|
840
|
+
* Use the <b>wj-multi-auto-complete</b> directive to add <b>MultiAutoComplete</b> controls to your AngularJS applications.
|
|
841
|
+
* Note that directive and parameter names must be formatted as lower-case with dashes
|
|
842
|
+
* instead of camel-case. For example:
|
|
843
|
+
*
|
|
844
|
+
* <pre><p>Here is a InputTags bound to a collection of objects:</p>
|
|
845
|
+
* <wj-multi-auto-complete
|
|
846
|
+
* max-selected-items="8"
|
|
847
|
+
* items-source="ctx.items"
|
|
848
|
+
* selected-Member-path="selected">
|
|
849
|
+
* </wj-multi-auto-complete></pre>
|
|
850
|
+
|
|
851
|
+
* The <b>wj-multi-auto-complete</b> directive extends {@link wijmo.angular.input.WjAutoComplete} with the following attributes:
|
|
852
|
+
*
|
|
853
|
+
* <dl class="dl-horizontal">
|
|
854
|
+
* <dt>max-selected-items</dt> <dd><code>@</code> The maximum number of items that can be selected.</dd>
|
|
855
|
+
* <dt>selected-member-path</dt> <dd><code>@</code> The name of the property used to control which
|
|
856
|
+
* item will be selected.</dd>
|
|
857
|
+
* <dt>selected-items</dt> <dd><code>@</code> An array containing the items that are currently selected.
|
|
858
|
+
* <dt>selected-items-changed</dt> <dd><code>&</code> The {@link MultiAutoComplete.selectedItemsChanged} event handler.</dd>
|
|
859
|
+
* </dl>
|
|
860
|
+
*/
|
|
861
|
+
export declare class WjMultiAutoComplete extends WjAutoComplete {
|
|
862
|
+
constructor($compile: any);
|
|
863
|
+
readonly _controlConstructor: typeof wjcInput.MultiAutoComplete;
|
|
864
|
+
}
|
|
865
|
+
/**
|
|
866
|
+
* AngularJS directive for an {@link ICollectionView} navigator element.
|
|
867
|
+
*
|
|
868
|
+
* Use the <b>wj-collection-view-navigator</b> directive to add an element that allows users to
|
|
869
|
+
* navigate through the items in an {@link ICollectionView}.
|
|
870
|
+
* Note that directive and parameter names must be formatted as lower-case with dashes
|
|
871
|
+
* instead of camel-case. For example:
|
|
872
|
+
*
|
|
873
|
+
* <pre>Here is a CollectionViewNavigator:</p>
|
|
874
|
+
* <wj-collection-view-navigator
|
|
875
|
+
* cv="myCollectionView">
|
|
876
|
+
* </wj-collection-view-navigator></pre>
|
|
877
|
+
*
|
|
878
|
+
* <a href="https://jsfiddle.net/Wijmo5/s8tT4/" target="_blank">Example</a>
|
|
879
|
+
*
|
|
880
|
+
* This example creates a CollectionView with 100,000 items and 20 items per page.
|
|
881
|
+
* It defines a navigator to select the current page, another to select the current item,
|
|
882
|
+
* and shows the data in a {@link FlexGrid}.
|
|
883
|
+
*
|
|
884
|
+
* The <b>wj-collection-view-navigator</b> directive has a single attribute:
|
|
885
|
+
*
|
|
886
|
+
* <dl class="dl-horizontal">
|
|
887
|
+
* <dt>cv</dt> <dd><code>=</code> A reference to the {@link ICollectionView} object to navigate.</dd>
|
|
888
|
+
* </dl>
|
|
889
|
+
*/
|
|
890
|
+
export declare class WjCollectionViewNavigator extends WjDirective {
|
|
891
|
+
constructor();
|
|
892
|
+
_getMetaDataId(): any;
|
|
893
|
+
_postLinkFn(): (scope: any, tElement: any, tAttrs: any, dropDownController: any) => void;
|
|
894
|
+
}
|
|
895
|
+
/**
|
|
896
|
+
* AngularJS directive for an {@link ICollectionView} pager element.
|
|
897
|
+
*
|
|
898
|
+
* Use the <b>wj-collection-view-pager</b> directive to add an element that allows users to
|
|
899
|
+
* navigate through the pages in a paged {@link ICollectionView}.
|
|
900
|
+
* Note that directive and parameter names must be formatted as lower-case with dashes
|
|
901
|
+
* instead of camel-case. For example:
|
|
902
|
+
*
|
|
903
|
+
* <pre>Here is a CollectionViewPager:</p>
|
|
904
|
+
* <wj-collection-view-pager
|
|
905
|
+
* cv="myCollectionView">
|
|
906
|
+
* </wj-collection-view-pager></pre>
|
|
907
|
+
*
|
|
908
|
+
* <a href="https://jsfiddle.net/Wijmo5/s8tT4/" target="_blank">Example</a>
|
|
909
|
+
*
|
|
910
|
+
* This example creates a CollectionView with 100,000 items and 20 items per page.
|
|
911
|
+
* It defines a navigator to select the current page, another to select the current item,
|
|
912
|
+
* and shows the data in a {@link FlexGrid}.
|
|
913
|
+
*
|
|
914
|
+
* The <b>wj-collection-view-pager</b> directive has a single attribute:
|
|
915
|
+
*
|
|
916
|
+
* <dl class="dl-horizontal">
|
|
917
|
+
* <dt>cv</dt> <dd><code>=</code> A reference to the paged {@link ICollectionView} object to navigate.</dd>
|
|
918
|
+
* </dl>
|
|
919
|
+
*/
|
|
920
|
+
export declare class WjCollectionViewPager extends WjDirective {
|
|
921
|
+
constructor();
|
|
922
|
+
_getMetaDataId(): any;
|
|
923
|
+
_postLinkFn(): (scope: any, tElement: any, tAttrs: any, dropDownController: any) => void;
|
|
924
|
+
}
|