/*!
*
* Wijmo Library 5.20252.44
* https://developer.mescius.com/wijmo
*
* Copyright(c) MESCIUS inc. All rights reserved.
*
* Licensed under the End-User License Agreement For MESCIUS Wijmo Software.
* us.sales@mescius.com
* https://developer.mescius.com/wijmo/licensing
*
*/
/**
* {@module wijmo.angular.input}
* AngularJS directives for wijmo.input module
*/
/**
*
*/
export declare var ___keepComment: any;
import { Control } from 'wijmo/wijmo';
import { WjDirective, WjLink } from 'wijmo/wijmo.angular.base';
import * as wjcInput from 'wijmo/wijmo.input';
/**
* Angular module name, which can be used in the angular.module(moduleName)
* function to obtain a reference to the module .
*/
export declare const ngModuleName = "wj.input";
export declare class WjDropDown extends WjDirective {
readonly _controlConstructor: typeof wjcInput.DropDown;
}
/**
* AngularJS directive for the {@link ComboBox} control.
*
* Use the wj-combo-box directive to add ComboBox controls to your AngularJS applications.
* Note that directive and parameter names must be formatted as lower-case with dashes
* instead of camel-case. For example:
*
* <p>Here is a ComboBox control:</p>
* <wj-combo-box
* text="theCountry"
* items-source="countries"
* is-editable="false"
* placeholder="country">
* </wj-combo-box>
*
* The example below creates a ComboBox control and binds it to a 'countries' array
* exposed by the controller. The ComboBox searches for the country as the user
* types. The isEditable property is set to false, so the user is forced to
* select one of the items in the list.
*
* Example
*
* The wj-combo-box directive supports the following attributes:
*
*
* - ng-model
@ Binds the control's selectedValue property using the ng-model Angular
* directive. Binding the property using the ng-model directive provides standard benefits
* like validation, adding the control's state to the form instance, and so on. To redefine
* properties on a control that is bound by the ng-model directive, use the wj-model-property
* attribute.- wj-model-property
@ Specifies a control property that is bound to a scope using the
* ng-model directive.- control
= A reference to the {@link ComboBox} control created by this directive.- display-member-path
@ The name of the property to use as the visual representation of the items.- is-content-html
@ A value indicating whether the drop-down list displays the items as plain text or as HTML.- is-dropped-down
@ A value indicating whether the drop down list is currently visible.- is-editable
@ A value indicating whether the user can enter values not present on the list.- initialized
& This event occurs after the binding has finished initializing the control with attribute values.- is-initialized
= A value indicating whether the binding has finished initializing the control with attribute values.- item-formatter
= A function used to customize the values shown in the drop-down list.- items-source
= An array or {@link ICollectionView} that contains items to show in the list.- max-drop-down-height
@ The maximum height of the drop-down list.- max-drop-down-width
@ The maximum width of the drop-down list.- placeholder
@ A string shown as a hint when the control is empty.- is-required
@ A value indicating whether to prevent null values.- show-drop-down-button
@ A value indicating whether the control displays a drop-down button.- selected-index
= The index of the currently selected item in the drop-down list.- selected-item
= The currently selected item in the drop-down list.- selected-value
= The value of the selected item, obtained using the selected-value-path.- selected-value-path
@ The name of the property used to get the selected-value from the selected-item.- text
= The text to show in the control.- is-dropped-down-changing
& The {@link ComboBox.isDroppedDownChanging} event handler.- is-dropped-down-changed
& The {@link ComboBox.isDroppedDownChanged} event handler.- selected-index-changed
& The {@link ComboBox.selectedIndexChanged} event handler.- got-focus
& The {@link ComboBox.gotFocus} event handler.- lost-focus
& The {@link ComboBox.lostFocus} event handler.- text-changed
& The {@link ComboBox.textChanged} event handler.
*/
export declare class WjComboBox extends WjDropDown {
_$compile: any;
constructor($compile: any);
readonly _controlConstructor: typeof wjcInput.ComboBox;
}
/**
* AngularJS directive for the {@link AutoComplete} control.
*
* Use the wj-auto-complete directive to add AutoComplete controls to your
* AngularJS applications. Note that directive and parameter names must be
* formatted as lower-case with dashes instead of camel-case. For example:
*
* <p>Here is an AutoComplete control:</p>
* <wj-auto-complete
* text="theCountry"
* items-source="countries"
* is-editable="false"
* placeholder="country">
* </wj-auto-complete>
*
* The example below creates an AutoComplete control and binds it to a 'countries' array
* exposed by the controller. The AutoComplete searches for the country as the user
* types, and narrows down the list of countries that match the current input.
*
* Example
*
* The wj-auto-complete directive extends {@link wijmo.angular.input.WjComboBox} with the following attributes:
*
*
* - css-match
@ The name of the CSS class used to highlight
* parts of the content that match the search terms.- delay
@ The amount of delay in milliseconds between
* when a keystroke occurs and when the search is performed.- items-source-function
= A function that provides the items
* dynamically as the user types.- max-items
@ The maximum number of items to display
* in the dropdown.- min-length
@ The minimum input length to require before
* triggering autocomplete suggestions.
*/
export declare class WjAutoComplete extends WjComboBox {
constructor($compile: any);
readonly _controlConstructor: typeof wjcInput.AutoComplete;
}
/**
* AngularJS directive for the {@link Calendar} control.
*
* Use the wj-calendar directive to add Calendar controls to your
* AngularJS applications.
* Note that directive and parameter names must be formatted as lower-case with dashes
* instead of camel-case. For example:
*
* <p>Here is a Calendar control:</p>
* <wj-calendar
* value="theDate">
* </wj-calendar>
*
* Example
*
* This example creates a Calendar control and binds it to a 'date' variable
* exposed by the controller. The range of dates that may be selected is limited
* by the min and max properties.
*
* The wj-calendar directive supports the following attributes:
*
*
* - ng-model
@ Binds the control's value property using the ng-model Angular
* directive. Binding the property using the ng-model directive provides standard benefits
* like validation, adding the control's state to the form instance, and so on. To redefine
* properties on a control that is bound by the ng-model directive, use the wj-model-property
* attribute.- wj-model-property
@ Specifies a control property that is bound to a scope using the
* ng-model directive.- control
= A reference to the {@link Calendar} control
* created by this directive.- display-month
= The month being displayed in the calendar.- first-day-of-week
@ The first day of the week.- initialized
& This event occurs after the binding has finished
* initializing the control with attribute values.- is-initialized
= A value indicating whether the binding has finished
* initializing the control with attribute values. - item-formatter
= The function used to customize the dates
* shown in the calendar.- max
@ The latest valid date (string in the
* format "yyyy-MM-dd").- min
@ The earliest valid date (string in the
* format "yyyy-MM-dd").- month-view
@ A value indicating whether the control displays
* a month or the entire year.- show-header
@ A value indicating whether the control displays
* the header area.- value
= The date being edited.- got-focus
& The {@link Calendar.gotFocus} event handler.- lost-focus
& The {@link Calendar.lostFocus} event handler.- value-changed
& The {@link Calendar.valueChanged} event handler.
*
* If provided, the min and max attributes are strings in the format
* "yyyy-MM-dd." Technically, you can use any full date as defined in the W3C
* [RFC 3339],
* which is also the format used with regular HTML5 input elements.
*/
export declare class WjCalendar extends WjDirective {
readonly _controlConstructor: new (elem: HTMLElement) => Control;
}
/**
* AngularJS directive for the {@link ColorPicker} control.
*
* Use the wj-color-picker directive to add ColorPicker controls to your
* AngularJS applications. Note that directive and parameter names must be
* formatted as lower-case with dashes instead of camel-case. For example:
*
* <p>Here is a ColorPicker control:</p>
* <wj-color-picker
* value="theColor"
* show-alpha-channel="false">
* </wj-color-picker>
*
* The wj-color-picker directive supports the following attributes:
*
*
* - ng-model
@ Binds the control's value property using the ng-model Angular
* directive. Binding the property using the ng-model directive provides standard benefits
* like validation, adding the control's state to the form instance, and so on. To redefine
* properties on a control that is bound by the ng-model directive, use the wj-model-property
* attribute.- wj-model-property
@ Specifies a control property that is bound to a scope using the
* ng-model directive.- control
= A reference to the {@link ColorPicker}
* control created by this directive.- initialized
& This event occurs after the binding has finished
* initializing the control with attribute values.- is-initialized
= A value indicating whether the binding has finished
* initializing the control with attribute values. - show-alpha-channel
@ A value indicating whether the control
* displays the alpha channel (transparency) editor.- show-color-string
@ A value indicating whether the control
* displays a string representation of the color being edited.- palette
= An array with ten color values to use
* as the palette.- value
= The color being edited.- got-focus
& The {@link ColorPicker.gotFocus} event handler.- lost-focus
& The {@link ColorPicker.lostFocus} event handler.- value-changed
& The {@link ColorPicker.valueChanged} event handler.
*/
export declare class WjColorPicker extends WjDirective {
readonly _controlConstructor: new (elem: HTMLElement) => Control;
}
/**
* AngularJS directive for the {@link ListBox} control.
*
* Use the wj-list-box directive to add {@link ListBox} controls to your
* AngularJS applications.
* Note that directive and parameter names must be formatted as lower-case with dashes
* instead of camel-case. For example:
*
* b>Here is a ListBox control:</p>
* <wj-list-box
* selected-item="theCountry"
* items-source="countries"
* placeholder="country">
* </wj-list-box>
*
* The example below creates a ListBox control and binds it to a 'countries' array
* exposed by the controller. The value selected is bound to the 'theCountry'
* controller property using the selected-item attribute.
*
* Example
*
* The wj-list-box directive supports the following attributes:
*
*
* - ng-model
@ Binds the control's selectedValue property using the ng-model Angular
* directive. Binding the property using the ng-model directive provides standard benefits
* like validation, adding the control's state to the form instance, and so on. To redefine
* properties on a control that is bound by the ng-model directive, use the wj-model-property
* attribute.- wj-model-property
@ Specifies a control property that is bound to a scope using the
* ng-model directive.- control
= A reference to the {@link ListBox}
* control created by this directive.- display-member-path
@ The property to use as the visual
* representation of the items.- is-content-html
@ A value indicating whether items
* contain plain text or HTML.- initialized
& This event occurs after the binding has finished
* initializing the control with attribute values.- is-initialized
= A value indicating whether the binding has finished
* initializing the control with attribute values. - item-formatter
= A function used to customize the
* values to show in the list.- items-source
= An array or {@link ICollectionView}
* that contains the list items.- max-height
@ The maximum height of the list.- selected-index
= The index of the currently selected
* item.- selected-item
= The item that is currently selected.- selected-value
= The value of the selected-item
* obtained using the selected-value-path.- selected-value-path
@ The property used to get the
* selected-value from the selected-item.- got-focus
& The {@link ListBox.gotFocus} event handler.- lost-focus
& The {@link ListBox.lostFocus} event handler.- items-changed
& The {@link ListBox.itemsChanged} event handler.- selected-index-changed
& The {@link ListBox.selectedIndexChanged} event handler.
*
* The wj-list-box directive may contain {@link wijmo.angular.input.WjItemTemplate} child directive.
*/
export declare class WjListBox extends WjDirective {
constructor();
readonly _controlConstructor: new (elem: HTMLElement) => Control;
}
/**
* AngularJS directive for {@link ListBox} and {@link Menu} item templates.
*
* The wj-item-template directive must be contained in a {@link wijmo.angular.input.WjListBox}
* or {@link wijmo.angular.input.WjMenu} directives.
*
* The wj-item-template directive defines a template for items of ListBox
* and data-bound Menu controls.
* The template may contain an arbitrary HTML fragment with AngularJS bindings and directives.
* In addition to any properties available in a controller, the local $item,
* $itemIndex and $control template variables can be used in AngularJS bindings
* that refer to the data item, its index, and the owner control.
*
* Note that directive and parameter names must be formatted as lower-case with dashes
* instead of camel-case. For example:
*
* <p>Here is a ListBox control with an item template:</p>
* <wj-list-box items-source="musicians">
* <wj-item-template>
* {{$itemIndex}}. <b>{{$item.name}}</b>
* <br />
* <img ng-src="{{$item.photo}}"/>
* </wj-item-template>
* </wj-list-box>
*/
export declare class WjItemTemplate extends WjDirective {
static _itemTemplateProp: string;
static _itemScopeProp: string;
_$compile: any;
constructor($compile: any);
_initControl(element: any): any;
_createLink(): WjLink;
_getMetaDataId(): any;
}
/**
* AngularJS directive for the {@link Menu} control.
*
* Use the wj-menu directive to add drop-down menus to your AngularJS applications.
* Note that directive and parameter names must be formatted as lower-case with dashes
* instead of camel-case. For example:
*
* <p>Here is a Menu control used as a value picker:</p>
* <wj-menu header="Tax" value="tax">
* <wj-menu-item value="0">Exempt</wj-menu-item>
* <wj-menu-item value=".05">5%</wj-menu-item>
* <wj-menu-item value=".1">10%</wj-menu-item>
* <wj-menu-item value=".15">15%</wj-menu-item>
* </wj-menu>
*
* Example
*
* This example creates three Menu controls. The first is used as a value picker,
* the second uses a list of commands with parameters, and the third is a group of
* three menus handled by an itemClicked function in the controller.
*
* The wj-menu directive extends {@link wijmo.angular.input.WjComboBox} with the following attributes:
*
*
* - command-path
@ The command to be executed when the item is clicked.- command-parameter-path
@ The name of the property that contains command parameters.- header
@ The text shown on the control.- is-button
@ Whether the menu should react to clicks on its header area.- value
@ The value of the selected wj-menu-item value property. - item-clicked
& The {@link Menu.itemClicked} event handler.- got-focus
& The {@link Menu.gotFocus} event handler.- lost-focus
& The {@link Menu.lostFocus} event handler.
*
*The wj-menu directive may contain the following child directives:
*{@link wijmo.angular.input.WjMenuItem}, {@link wijmo.angular.input.WjMenuSeparator} and {@link wijmo.angular.input.WjItemTemplate}(in case of data-bound Menu control).
*/
export declare class WjMenu extends WjComboBox {
constructor($compile: any);
readonly _controlConstructor: typeof wjcInput.Menu;
_createLink(): WjLink;
_initProps(): void;
updateControlValue(scope: any, control: any, link: WjLink): void;
updateHeader(scope: any, control: any, link: WjLink): void;
}
/**
* AngularJS directive for menu items.
*
* The wj-menu-item directive must be contained in a {@link wijmo.angular.input.WjMenu} directive.
* It supports the following attributes:
*
*
* - cmd
= The function to execute in the controller
* when the item is clicked.- cmd-param
= The parameter passed to the cmd function
* when the item is clicked.- value
= The value to select when the item is clicked
* (use either this or cmd).
*
* The content displayed by the item may contain an arbitrary HTML fragment with AngularJS bindings and directives.
* You can also use ng-repeat and ng-if directives to populate the items in the Menu control.
* In addition to any properties available in a controller, the local $item,
* $itemIndex and $control template variables can be used in AngularJS bindings
* that refer to the data item, its index, and the owner control.
*/
export declare class WjMenuItem extends WjDirective {
static _itemTemplateProp: string;
static _itemScopeProp: string;
static _itemLinkProp: string;
static _directiveId: string;
constructor();
_createLink(): WjLink;
_getMetaDataId(): any;
_getId(): string;
}
/**
* AngularJS directive for menu separators.
*
* The wj-menu-item-separator directive must be contained in a {@link wijmo.angular.input.WjMenu} directive.
* It adds a non-selectable separator to the menu, and has no attributes.
*/
export declare class WjMenuSeparator extends WjDirective {
constructor();
_getMetaDataId(): any;
_createLink(): WjLink;
_getId(): string;
}
/**
* AngularJS directive for context menus.
*
* Use the wj-context-menu directive to add context menus to elements
* on the page. The wj-context-menu directive is based on the wj-menu
* directive; it displays a popup menu when the user performs a context menu
* request on an element (usually a right-click).
*
* The wj-context-menu directive is specified as a parameter added to the
* element that the context menu applies to. The parameter value is a
* CSS selector for the element that contains the menu. For example:
*
* <!-- paragraph with a context menu -->
*<p wj-context-menu="#idMenu" >
* This paragraph has a context menu.</p>
*
*<!-- define the context menu (hidden and with an id) -->
*<wj-menu id="idMenu" ng-show="false">
* <wj-menu-item cmd="cmdOpen" cmd-param ="1">Open...</wj-menu-item>
* <wj-menu-item cmd="cmdSave" cmd-param="2">Save </wj-menu-item>
* <wj-menu-item cmd="cmdSave" cmd-param="3">Save As...</wj-menu-item>
* <wj-menu-item cmd="cmdNew" cmd-param ="4">New...</wj-menu-item>
* <wj-menu-separator></wj-menu-separator>
* <wj-menu-item cmd="cmdExit" cmd-param="5">Exit</wj-menu-item>
*</wj-menu >
*/
export declare class WjContextMenu extends WjDirective {
constructor();
_getMetaDataId(): any;
_postLinkFn(): (scope: any, tElement: any, tAttrs: any) => void;
}
/**
* AngularJS directive for the {@link InputDate} control.
*
* Use the wj-input-date directive to add {@link InputDate} controls to your
* AngularJS applications.
* Note that directive and parameter names must be formatted as lower-case with dashes
* instead of camel-case. For example:
*
* <p>Here is an InputDate control:</p>
* <wj-input-date
* value="theDate"
* format="M/d/yyyy">
* </wj-input-date>
*
* The example below shows a Date value (that includes date and time information)
* using an {@link InputDate} and an {@link InputTime} control. Notice how both controls
* are bound to the same controller variable, and each edits the appropriate information
* (either date or time). The example also shows a {@link Calendar} control that can be
* used to select the date with a single click.
*
* Example
*
* The wj-input-date directive supports the following attributes:
*
*
* - ng-model
@ Binds the control's value property using the ng-model Angular
* directive. Binding the property using the ng-model directive provides standard benefits
* like validation, adding the control's state to the form instance, and so on. To redefine
* properties on a control that is bound by the ng-model directive, use the wj-model-property
* attribute.- wj-model-property
@ Specifies a control property that is bound to a scope using the ng-model directive.- control
= A reference to the {@link InputDate} control created by this directive.- format
@ The format used to display the date being edited (see {@link Globalize}).- mask
@ The mask used to validate the input as the user types (see {@link wijmo.input.InputMask}).- is-dropped-down
@ A value indicating whether the drop-down is currently visible.- initialized
& This event occurs after the binding has finished initializing the control with attribute values.- is-initialized
= A value indicating whether the binding has finished initializing the control with attribute values. - max
@ The latest valid date (a string in the format "yyyy-MM-dd").- min
@ The earliest valid date (a string in the format "yyyy-MM-dd").- placeholder
@ The string to show as a hint when the control is empty.- is-required
@ A value indicating whether to prevent null values.- show-drop-down-button
@ A value indicating whether the control displays a drop-down button.- text
= The text to show in the control.- value
= The date being edited.- got-focus
& The {@link InputDate.gotFocus} event handler.- lost-focus
& The {@link InputDate.lostFocus} event handler.- is-dropped-down-changing
& The {@link InputDate.isDroppedDownChanging} event handler.- is-dropped-down-changed
& The {@link InputDate.isDroppedDownChanged} event handler.- text-changed
& The {@link InputDate.textChanged} event handler.- value-changed
& The {@link InputDate.valueChanged} event handler.
*
* If provided, the min and max attributes are strings in the format
* "yyyy-MM-dd". Technically, you can use any full date as defined in the W3C
* [RFC 3339], which is also
* the format used with regular HTML5 input elements.
*/
export declare class WjInputDate extends WjDropDown {
readonly _controlConstructor: typeof wjcInput.InputDate;
}
/**
* AngularJS directive for the {@link InputDateTime} control.
*
* Use the wj-input-date-time directive to add {@link InputDateTime} controls to your
* AngularJS applications.
* Note that directive and parameter names must be formatted as lower-case with dashes
* instead of camel-case. For example:
*
* <p>Here is an InputDateTime control:</p>
* <wj-input-date-time
* value="theDate"
* format="M/d/yyyy">
* </wj-input-date-time>
*
* The wj-input-date-time directive supports the following attributes:
*
*
* - ng-model
@ Binds the control's value property using the ng-model Angular
* directive. Binding the property using the ng-model directive provides standard benefits
* like validation, adding the control's state to the form instance, and so on. To redefine
* properties on a control that is bound by the ng-model directive, use the wj-model-property
* attribute.- wj-model-property
@ Specifies a control property that is bound to a scope using the ng-model directive.- control
= A reference to the {@link InputDate} control created by this directive.- format
@ The format used to display the date being edited (see {@link Globalize}).- mask
@ The mask used to validate the input as the user types (see {@link wijmo.input.InputMask}).- is-dropped-down
@ A value indicating whether the drop-down is currently visible.- initialized
& This event occurs after the binding has finished initializing the control with attribute values.- is-initialized
= A value indicating whether the binding has finished initializing the control with attribute values. - max
@ The latest valid date (a string in the format "yyyy-MM-dd").- min
@ The earliest valid date (a string in the format "yyyy-MM-dd").- placeholder
@ The string to show as a hint when the control is empty.- is-required
@ A value indicating whether to prevent null values.- show-drop-down-button
@ A value indicating whether the control displays a drop-down button.- text
= The text to show in the control.- timeMax
@ The earliest valid time (a string in the format "hh:mm").- timeMin
@ The latest valid time (a string in the format "hh:mm").- timeStep
@ The number of minutes between entries in the drop-down list.- timeFormat
@ The format sting used to show values in the time drop-down list.- value
= The date being edited.- got-focus
& The {@link InputDateTime.gotFocus} event handler.- lost-focus
& The {@link InputDateTime.lostFocus} event handler.- is-dropped-down-changing
& The {@link InputDateTime.isDroppedDownChanging} event handler.- is-dropped-down-changed
& The {@link InputDateTime.isDroppedDownChanged} event handler.- text-changed
& The {@link InputDateTime.textChanged} event handler.- value-changed
& The {@link InputDateTime.valueChanged} event handler.
*/
export declare class WjInputDateTime extends WjInputDate {
readonly _controlConstructor: typeof wjcInput.InputDateTime;
}
/**
* AngularJS directive for the {@link InputNumber} control.
*
* Use the wj-input-number directive to add InputNumber controls to your
* AngularJS applications.
* Note that directive and parameter names must be formatted as lower-case with dashes
* instead of camel-case. For example:
*
* <p>Here is an InputNumber control:</p>
* <wj-input-number
* value="theNumber"
* min="0"
* max="10"
* format="n0"
* placeholder="number between zero and ten">
* </wj-input-number>
*
* The example below creates several InputNumber controls and shows the effect
* of using different formats, ranges, and step values.
*
* Example
*
* The wj-input-number directive supports the following attributes:
*
*
* - ng-model
@ Binds the control's value property using the ng-model Angular
* directive. Binding the property using the ng-model directive provides standard benefits
* like validation, adding the control's state to the form instance, and so on. To redefine
* properties on a control that is bound by the ng-model directive, use the wj-model-property
* attribute.- wj-model-property
@ Specifies a control property that is bound to a scope using the ng-model directive.- control
= A reference to the {@link InputNumber} control created by this directive.- format
@ The format used to display the number (see {@link Globalize}).- input-type
@ The "type" attribute of the HTML input element hosted by the control.- initialized
& This event occurs after the binding has finished initializing the control with attribute values.- is-initialized
= A value indicating whether the binding has finished initializing the control with attribute values. - max
@ The largest valid number.- min
@ The smallest valid number.- place-holder
@ The string to show as a hint when the control is empty.- is-required
@ A value indicating whether to prevent null values.- show-spinner
@ A value indicating whether to display spinner buttons to change the value by step units.- step
@ The amount to add or subtract to the value when the user clicks the spinner buttons.- text
= The text to show in the control.- value
= The number being edited.- got-focus
& The {@link InputNumber.gotFocus} event handler.- lost-focus
& The {@link InputNumber.lostFocus} event handler.- text-changed
& The {@link InputNumber.textChanged} event handler.- value-changed
& The {@link InputNumber.valueChanged} event handler.
*/
export declare class WjInputNumber extends WjDirective {
readonly _controlConstructor: new (elem: HTMLElement) => Control;
}
/**
* AngularJS directive for the {@link InputMask} control.
*
* Use the wj-input-mask directive to add {@link InputMask} controls to your
* AngularJS applications.
* Note that directive and parameter names must be formatted as lower-case with dashes
* instead of camel-case. For example:
*
* <p>Here is an InputMask control:</p>
* <wj-input-mask
* mask="99/99/99"
* mask-placeholder="*">
* </wj-input-mask>
*
* The wj-input-mask directive supports the following attributes:
*
*
* - ng-model
@ Binds the control's value property using the ng-model Angular
* directive. Binding the property using the ng-model directive provides standard benefits
* like validation, adding the control's state to the form instance, and so on. To redefine
* properties on a control that is bound by the ng-model directive, use the wj-model-property
* attribute.- wj-model-property
@ Specifies a control property that is bound to a scope using the ng-model directive.- control
= A reference to the {@link InputNumber} control created by this directive.- initialized
& This event occurs after the binding has finished initializing the control with attribute values.- is-initialized
= A value indicating whether the binding has finished initializing the control with attribute values. - mask
@ The string mask used to format the value as the user types.- prompt-char
@ A character used to show input locations within the mask.- place-holder
@ The string to show as a hint when the control is empty.- value
= The string being edited.- raw-value
= The string being edited, excluding literal and prompt characters.- got-focus
& The {@link InputMask.gotFocus} event handler.- lost-focus
& The {@link InputMask.lostFocus} event handler.- value-changed
& The {@link InputMask.valueChanged} event handler.
*/
export declare class WjInputMask extends WjDirective {
readonly _controlConstructor: new (elem: HTMLElement) => Control;
}
/**
* AngularJS directive for the {@link InputTime} control.
*
* Use the wj-input-time directive to add InputTime controls to your AngularJS applications.
* Note that directive and parameter names must be formatted as lower-case with dashes
* instead of camel-case. For example:
*
* <p>Here is an InputTime control:</p>
* <wj-input-time
* value="theDate"
* format="h:mm tt"
* min="09:00" max="17:00"
* step="15">
* </wj-input-time>
*
* Example
*
* This example edits a Date value (that includes date and time information)
* using an {@link InputDate} and an InputTime control. Notice how both controls
* are bound to the same controller variable, and each edits the appropriate information
* (either date or time). The example also shows a {@link Calendar} control that can be
* used to select the date with a single click.
*
* The wj-input-time directive extends {@link wijmo.angular.input.WjComboBox} with the following attributes:
*
*
* - ng-model
@ Binds the control's value property using the ng-model Angular
* directive. Binding the property using the ng-model directive provides standard benefits
* like validation, adding the control's state to the form instance, and so on. To redefine
* properties on a control that is bound by the ng-model directive, use the wj-model-property
* attribute.- wj-model-property
@ Specifies a control property that is bound to a scope using the ng-model directive.- control
= A reference to the {@link InputDate} control created by this directive.- format
@ The format used to display the selected time.- mask
@ A mask used to validate the input as the user types (see {@link InputMask}).- max
@ The earliest valid time (a string in the format "hh:mm").- min
@ The latest valid time (a string in the format "hh:mm").- step
@ The number of minutes between entries in the drop-down list.- value
= The time being edited (as a Date object).- value-changed
& The!@see: valueChanged event handler.
*
* If provided, the min and max attributes are strings in the format
* "hh:mm". Technically, you can use any full date as defined in the W3C
* [RFC 3339], which is also the format
* used with regular HTML5 input elements.
*/
export declare class WjInputTime extends WjComboBox {
constructor($compile: any);
readonly _controlConstructor: typeof wjcInput.InputTime;
}
/**
* AngularJS directive for the {@link InputColor} control.
*
* Use the wj-input-color directive to add {@link InputColor} controls to your
* AngularJS applications.
* Note that directive and parameter names must be formatted as lower-case with dashes
* instead of camel-case. For example:
*
* <p>Here is an InputColor control:</p>
* <wj-input-color
* value="theColor"
* show-alpha-channel="false">
* </wj-input-color>
*
* The wj-input-color directive supports the following attributes:
*
*
* - ng-model
@ Binds the control's value property using the ng-model Angular
* directive. Binding the property using the ng-model directive provides standard benefits
* like validation, adding the control's state to the form instance, and so on. To redefine
* properties on a control that is bound by the ng-model directive, use the wj-model-property
* attribute.- wj-model-property
@ Specifies a control property that is bound to a scope using the ng-model directive.- control
= A reference to the InputColor control created by this directive.- is-dropped-down
@ A value indicating whether the drop-down is currently visible.- initialized
& This event occurs after the binding has finished initializing the control with attribute values.- is-initialized
= A value indicating whether the binding has finished initializing the control with attribute values. - show-alpha-channel
@ A value indicating whether the drop-down displays the alpha channel (transparency) editor.- placeholder
@ The string to show as a hint when the control is empty.- is-required
@ A value indicating whether to prevent null values.- show-drop-down-button
@ A value indicating whether the control displays a drop-down button.- text
= The text to show in the control.- value
= The color being edited.- got-focus
& The {@link InputColor.gotFocus} event handler.- lost-focus
& The {@link InputColor.lostFocus} event handler.- is-dropped-down-changing
& The {@link InputColor.isDroppedDownChanging} event handler.- is-dropped-down-changed
& The {@link InputColor.isDroppedDownChanged} event handler.- text-changed
& The {@link InputColor.textChanged} event handler.- value-changed
& The {@link InputColor.valueChanged} event handler.
*/
export declare class WjInputColor extends WjDropDown {
readonly _controlConstructor: typeof wjcInput.InputColor;
}
/**
* AngularJS directive for the {@link Popup} control.
*
* Use the wj-popup directive to add {@link Popup} controls to your
* AngularJS applications.
*
* The popup content may be specified inside the wj-popup tag, and can
* contain an arbitrary HTML fragment with AngularJS bindings and directives.
*
* Note that directive and parameter names must be formatted as lower-case with dashes
* instead of camel-case. For example:
*
* <p>Here is a Popup control triggered by a button:</p>
* <button id="btn2" type="button">
* Click to show Popup
* </button>
* <wj-popup owner="#btn2" show-trigger="Click" hide-trigger="Blur">
* <h3>
* Salutation
* </h3>
* <div class="popover-content">
* Hello {{firstName}} {{lastName}}
* </div>
* </wj-popup>
*
* The wj-popup directive supports the following attributes:
*
*
* - control
= A reference to the Popup control created by this directive.- fade-in
@ A boolean value that determines whether popups should be shown using a fade-in animation.- fade-out
@ A boolean value that determines whether popups should be hidden using a fade-out animation.- hide-trigger
@ A {@link PopupTrigger} value defining the action that hides the {@link Popup}.- initialized
& This event occurs after the binding has finished initializing the control with attribute values.- is-initialized
= A value indicating whether the binding has finished initializing the control with attribute values. - owner
@ A CSS selector referencing an element that controls the popup visibility.- show-trigger
@ A {@link PopupTrigger} value defining the action that shows the {@link Popup}.- modal
@ A boolean value that determines whether the {@link Popup} should be displayed as a modal dialog.- got-focus
& The {@link Popup.gotFocus} event handler.- lost-focus
& The {@link Popup.lostFocus} event handler.- showing
& The {@link Popup.showing} event handler.- shown
& The {@link Popup.shown} event handler.- hiding
& The {@link Popup.hiding} event handler.- hidden
& The {@link Popup.hidden} event handler.
*/
export declare class WjPopup extends WjDirective {
constructor();
readonly _controlConstructor: typeof wjcInput.Popup;
_initProps(): void;
}
/**
* AngularJS directive for the {@link MultiSelect} control.
*
* Use the wj-multi-select directive to add MultiSelect controls to your AngularJS applications.
* Note that directive and parameter names must be formatted as lower-case with dashes
* instead of camel-case. For example:
*
* <p>Here is a MultiSelect bound to a collection of objects:</p>
* <wj-multi-select
* placeholder="Select Countries"
* items-source="ctx.items"
* header-format="{count} countries selected"
* display-Member-path="country"
* checked-Member-path="selected">
* </wj-multi-select>
*
* The wj-multi-select directive extends {@link wijmo.angular.input.WjComboBox} with the following attributes:
*
*
* - checked-member-path
@ The name of the property used to control the checkboxes placed next to each item.- header-format
@ The format string used to create the header content when the control has more than maxHeaderItems items checked.- header-formatter
= A function that gets the HTML in the control header.- max-header-items
@ The maximum number of items to display on the control header.- checked-items-changed
& The {@link MultiSelect.checkedItemsChanged} event handler.
*/
export declare class WjMultiSelect extends WjComboBox {
constructor($compile: any);
readonly _controlConstructor: typeof wjcInput.MultiSelect;
}
/**
* AngularJS directive for the {@link MultiAutoComplete} control.
*
* Use the wj-multi-auto-complete directive to add MultiAutoComplete controls to your AngularJS applications.
* Note that directive and parameter names must be formatted as lower-case with dashes
* instead of camel-case. For example:
*
* <p>Here is a InputTags bound to a collection of objects:</p>
* <wj-multi-auto-complete
* max-selected-items="8"
* items-source="ctx.items"
* selected-Member-path="selected">
* </wj-multi-auto-complete>
* The wj-multi-auto-complete directive extends {@link wijmo.angular.input.WjAutoComplete} with the following attributes:
*
*
* - max-selected-items
@ The maximum number of items that can be selected.- selected-member-path
@ The name of the property used to control which
* item will be selected.- selected-items
@ An array containing the items that are currently selected.
* - selected-items-changed
& The {@link MultiAutoComplete.selectedItemsChanged} event handler.
*/
export declare class WjMultiAutoComplete extends WjAutoComplete {
constructor($compile: any);
readonly _controlConstructor: typeof wjcInput.MultiAutoComplete;
}
/**
* AngularJS directive for an {@link ICollectionView} navigator element.
*
* Use the wj-collection-view-navigator directive to add an element that allows users to
* navigate through the items in an {@link ICollectionView}.
* Note that directive and parameter names must be formatted as lower-case with dashes
* instead of camel-case. For example:
*
* Here is a CollectionViewNavigator:</p>
* <wj-collection-view-navigator
* cv="myCollectionView">
* </wj-collection-view-navigator>
*
* Example
*
* This example creates a CollectionView with 100,000 items and 20 items per page.
* It defines a navigator to select the current page, another to select the current item,
* and shows the data in a {@link FlexGrid}.
*
* The wj-collection-view-navigator directive has a single attribute:
*
*
* - cv
= A reference to the {@link ICollectionView} object to navigate.
*/
export declare class WjCollectionViewNavigator extends WjDirective {
constructor();
_getMetaDataId(): any;
_postLinkFn(): (scope: any, tElement: any, tAttrs: any, dropDownController: any) => void;
}
/**
* AngularJS directive for an {@link ICollectionView} pager element.
*
* Use the wj-collection-view-pager directive to add an element that allows users to
* navigate through the pages in a paged {@link ICollectionView}.
* Note that directive and parameter names must be formatted as lower-case with dashes
* instead of camel-case. For example:
*
* Here is a CollectionViewPager:</p>
* <wj-collection-view-pager
* cv="myCollectionView">
* </wj-collection-view-pager>
*
* Example
*
* This example creates a CollectionView with 100,000 items and 20 items per page.
* It defines a navigator to select the current page, another to select the current item,
* and shows the data in a {@link FlexGrid}.
*
* The wj-collection-view-pager directive has a single attribute:
*
*
* - cv
= A reference to the paged {@link ICollectionView} object to navigate.
*/
export declare class WjCollectionViewPager extends WjDirective {
constructor();
_getMetaDataId(): any;
_postLinkFn(): (scope: any, tElement: any, tAttrs: any, dropDownController: any) => void;
}