smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
881 lines (875 loc) • 53.7 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.multisplitbutton';
import { __awaiter } from 'tslib';
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Output, Input, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
class BaseElement {
constructor(ref) {
this.onCreate = new EventEmitter();
this.onReady = new EventEmitter();
this.onAttach = new EventEmitter();
this.onDetach = new EventEmitter();
const that = this;
this.nativeElement = ref.nativeElement;
that.nativeElement.onAttached = () => {
that.onAttach.emit(that.nativeElement);
};
that.nativeElement.onDetached = () => {
that.onDetach.emit(that.nativeElement);
};
}
addEventListener(type, listener, options = false) {
this.nativeElement.addEventListener(type, listener, options);
}
removeEventListener(type, listener, options = false) {
this.nativeElement.removeEventListener(type, listener, options);
}
dispatchEvent(event) {
return this.nativeElement.dispatchEvent(event);
}
blur() {
this.nativeElement.blur();
}
click() {
this.nativeElement.click();
}
focus(options) {
this.nativeElement.focus(options);
}
/** @description Sets or gets the license. */
get license() {
return this.nativeElement ? this.nativeElement.license : undefined;
}
set license(value) {
this.nativeElement ? this.nativeElement.license = value : undefined;
}
/** @description Sets or gets the language. Used in conjunction with the property messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Determines the theme. Theme defines the look of the element */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
}
BaseElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
BaseElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: BaseElement, inputs: { license: "license", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", rightToLeft: "rightToLeft", theme: "theme" }, outputs: { onCreate: "onCreate", onReady: "onReady", onAttach: "onAttach", onDetach: "onDetach" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onCreate: [{
type: Output
}], onReady: [{
type: Output
}], onAttach: [{
type: Output
}], onDetach: [{
type: Output
}], license: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}] } });
let Smart;
if (typeof window !== "undefined") {
Smart = window.Smart;
}
class MultiSplitButtonComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description This event is triggered whenever the user clicks on the action button, allowing you to execute custom functionality in response to the user's interaction.
* @param event. The custom event. */
this.onButtonClick = new EventEmitter();
/** @description This event fires whenever the user modifies the current selection, such as when they highlight different text or select a new item from a list. It is triggered immediately after the selection change occurs, allowing developers to respond dynamically to user selection actions.
* @param event. The custom event. Custom event was created with: event.detail( addedItems, disabled, index, label, removedItems, selected, value)
* addedItems - An array of List items that have been selected.
* disabled - A flag indicating whether or not the item that caused the change event is disabled.
* index - The index of the List item that triggered the event.
* label - The label of the List item that triggered the event.
* removedItems - An array of List items that have been unselected before the event was fired.
* selected - The selected state of the List item that triggered the event. If an item was selected the value will be true and vice versa.
* value - The value of the List item that triggered the event.
*/
this.onChange = new EventEmitter();
/** @description This event is triggered when the drop-down list associated with the button is closed, either by user interaction or programmatically. It allows you to perform actions or execute logic after the drop-down menu has been dismissed.
* @param event. The custom event. */
this.onClose = new EventEmitter();
/** @description This event is triggered when the dropdown list associated with the button begins to close, either due to user interaction or programmatic actions. It allows you to execute custom logic just before the dropdown is fully closed.
* @param event. The custom event. */
this.onClosing = new EventEmitter();
/** @description This event is triggered whenever a user clicks on an individual item, allowing you to execute custom logic in response to item selection. The event provides details about the clicked item, such as its identifier or associated data, which can be used for further processing or navigation.
* @param event. The custom event. Custom event was created with: event.detail( disabled, index, label, selected, value)
* disabled - Indicates whether the List item that was clicked is disabled or not.
* index - Indicates the index of the List item that was clicked.
* label - The label of the List item that was clicked.
* selected - Indicates whether the List item that was clicked is selected or not.
* value - The value of the List item that was clicked.
*/
this.onItemClick = new EventEmitter();
/** @description This event is triggered whenever the drop-down list of the button is opened, either by a user action such as clicking or by programmatic interaction. It allows you to perform custom actions or update the UI in response to the drop-down list becoming visible.
* @param event. The custom event. */
this.onOpen = new EventEmitter();
/** @description This event is triggered just before the button's dropdown list becomes visible, allowing you to perform actions or modify the dropdown content as it is about to open.
* @param event. The custom event. */
this.onOpening = new EventEmitter();
/** @description This event is triggered when the user reaches the bottom of the drop-down list by scrolling, indicating that all available list items have been viewed. This can be used to implement features such as lazy loading or dynamic data fetching when additional items need to be loaded into the drop-down.
* @param event. The custom event. */
this.onScrollBottomReached = new EventEmitter();
/** @description This event is triggered when the user scrolls to the very top (the first item) of the drop-down list. It can be used to detect when the user has reached the beginning of the list, for actions such as loading more items or updating the UI accordingly.
* @param event. The custom event. */
this.onScrollTopReached = new EventEmitter();
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-multi-split-button');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Sets or retrieves the current animation mode for the component. When the property is set to 'none', all animations are disabled. For other supported values, the animation mode will determine how visual transitions are rendered. */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description Specifies the data source that provides the information required to generate the element’s permanently visible buttons. This property defines where and how the button data is retrieved, ensuring the buttons remain constantly displayed on the element. */
get buttonsDataSource() {
return this.nativeElement ? this.nativeElement.buttonsDataSource : undefined;
}
set buttonsDataSource(value) {
this.nativeElement ? this.nativeElement.buttonsDataSource = value : undefined;
}
/** @description Specifies the data source from which the multi-split button's dropdown menu retrieves and displays its list of options. This setting defines what content appears in the dropdown and enables dynamic or static population of menu items. */
get dataSource() {
return this.nativeElement ? this.nativeElement.dataSource : undefined;
}
set dataSource(value) {
this.nativeElement ? this.nativeElement.dataSource = value : undefined;
}
/** @description Controls whether the jqxMultiSplitButton component is active or inactive. When enabled, users can interact with the jqxMultiSplitButton; when disabled, the component becomes non-interactive and appears visually inactive. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Controls the visibility of the loading indicator, showing it when active and hiding it when not needed. This allows users to receive visual feedback during content loading or processing operations. */
get displayLoadingIndicator() {
return this.nativeElement ? this.nativeElement.displayLoadingIndicator : undefined;
}
set displayLoadingIndicator(value) {
this.nativeElement ? this.nativeElement.displayLoadingIndicator = value : undefined;
}
/** @description Defines or retrieves the displayMember property, which determines the name of the object property to display in the UI. When binding a data collection using the dataSource property, displayMember specifies which property of each data object should be shown to the user. For example, if dataSource is an array of user objects, setting displayMember to "name" will display the value of the "name" property for each user in the collection. */
get displayMember() {
return this.nativeElement ? this.nativeElement.displayMember : undefined;
}
set displayMember(value) {
this.nativeElement ? this.nativeElement.displayMember = value : undefined;
}
/** @description Specifies the parent container element for the button’s dropdown list (popup). Accepts a CSS selector, an element ID, or the literal value 'body' as the target container. Use this option when a CSS property from an ancestor element is affecting the visibility or display of the dropdown list. By setting the parent container, you can control where the dropdown is rendered in the DOM, helping to resolve issues with overflow, clipping, or z-index caused by parent elements. */
get dropDownAppendTo() {
return this.nativeElement ? this.nativeElement.dropDownAppendTo : undefined;
}
set dropDownAppendTo(value) {
this.nativeElement ? this.nativeElement.dropDownAppendTo = value : undefined;
}
/** @description Specifies the location where the dropdown button will be displayed relative to its parent element. Possible values may include options such as "left," "right," "top," or "bottom," allowing you to control the alignment and placement of the dropdown button within the user interface. */
get dropDownButtonPosition() {
return this.nativeElement ? this.nativeElement.dropDownButtonPosition : undefined;
}
set dropDownButtonPosition(value) {
this.nativeElement ? this.nativeElement.dropDownButtonPosition = value : undefined;
}
/** @description Specifies the behavior of the element's drop-down functionality. - In 'none' mode, the drop-down will never open, regardless of any user interaction. - In 'dropDownButton' mode, the drop-down opens only when the dedicated drop-down button on the element is clicked; clicking other parts of the element will have no effect. - In 'auto' mode, the drop-down opens when any area of the element's top section is clicked, not just the button—providing a more flexible and user-friendly experience. */
get dropDownOpenMode() {
return this.nativeElement ? this.nativeElement.dropDownOpenMode : undefined;
}
set dropDownOpenMode(value) {
this.nativeElement ? this.nativeElement.dropDownOpenMode = value : undefined;
}
/** @description When this property is enabled, opening the element’s dropdown will render a transparent overlay layer between the dropdown menu and the rest of the page content. This overlay visually separates the dropdown from the background and can help intercept clicks outside the dropdown to close it or prevent interaction with other elements while the dropdown is open. */
get dropDownOverlay() {
return this.nativeElement ? this.nativeElement.dropDownOverlay : undefined;
}
set dropDownOverlay(value) {
this.nativeElement ? this.nativeElement.dropDownOverlay = value : undefined;
}
/** @description Specifies the vertical placement of the drop-down list relative to its trigger element. When set to 'auto', the component dynamically chooses whether to display the drop-down above or below the trigger based on available space within the viewport, ensuring that the list remains fully visible without overflow. */
get dropDownPosition() {
return this.nativeElement ? this.nativeElement.dropDownPosition : undefined;
}
set dropDownPosition(value) {
this.nativeElement ? this.nativeElement.dropDownPosition = value : undefined;
}
/** @description Specifies whether the filtering feature is currently active. When set to true, filtering is enabled and data will be filtered according to the specified criteria; when false, all data is shown without applying any filters. */
get filterable() {
return this.nativeElement ? this.nativeElement.filterable : undefined;
}
set filterable(value) {
this.nativeElement ? this.nativeElement.filterable = value : undefined;
}
/** @description Specifies the filtering behavior applied to the dropdown list when users type or search. This property controls how the available options are filtered and displayed, such as matching items that contain, start with, or exactly match the user's input. */
get filterMode() {
return this.nativeElement ? this.nativeElement.filterMode : undefined;
}
set filterMode(value) {
this.nativeElement ? this.nativeElement.filterMode = value : undefined;
}
/** @description Specifies the placeholder text that appears inside the dropdown list's filter input field, providing guidance or example input to help users understand what they can type to filter the list options. */
get filterInputPlaceholder() {
return this.nativeElement ? this.nativeElement.filterInputPlaceholder : undefined;
}
set filterInputPlaceholder(value) {
this.nativeElement ? this.nativeElement.filterInputPlaceholder = value : undefined;
}
/** @description When enabled, this setting organizes items into groups based on the first letter of each item's value. Note: This option cannot be used if your dataSource is already grouped, as it only applies to flat (ungrouped) collections. */
get grouped() {
return this.nativeElement ? this.nativeElement.grouped : undefined;
}
set grouped(value) {
this.nativeElement ? this.nativeElement.grouped = value : undefined;
}
/** @description Gets or sets the groupMember property. If groupMember is not explicitly set, it defaults to using the value of the source object's group property. */
get groupMember() {
return this.nativeElement ? this.nativeElement.groupMember : undefined;
}
set groupMember(value) {
this.nativeElement ? this.nativeElement.groupMember = value : undefined;
}
/** @description Enhances or retrieves the value of the incrementalSearchDelay property. This property defines the time interval, in milliseconds, that must pass after the user stops typing before the previous search string is cleared. The countdown begins as soon as the user ceases typing, ensuring that only periods of inactivity longer than the specified delay will reset the search input. */
get incrementalSearchDelay() {
return this.nativeElement ? this.nativeElement.incrementalSearchDelay : undefined;
}
set incrementalSearchDelay(value) {
this.nativeElement ? this.nativeElement.incrementalSearchDelay = value : undefined;
}
/** @description Gets or sets the current mode for incremental search, which determines how search input is processed as the user types. */
get incrementalSearchMode() {
return this.nativeElement ? this.nativeElement.incrementalSearchMode : undefined;
}
set incrementalSearchMode(value) {
this.nativeElement ? this.nativeElement.incrementalSearchMode = value : undefined;
}
/** @description Specifies the vertical dimension (height) of each item, in pixels or another defined unit. This property controls how tall each item appears within the component, affecting layout and spacing. */
get itemHeight() {
return this.nativeElement ? this.nativeElement.itemHeight : undefined;
}
set itemHeight(value) {
this.nativeElement ? this.nativeElement.itemHeight = value : undefined;
}
/** @description The 'itemTemplate' property is a string that specifies the 'id' attribute of an 'HTMLTemplateElement' present in the DOM. This property is used to reference the corresponding template when generating list items, allowing the application to clone and insert the template’s content for each item in the list dynamically. By using an 'HTMLTemplateElement', you can define the structure and layout of individual list items in a reusable, maintainable way. */
get itemTemplate() {
return this.nativeElement ? this.nativeElement.itemTemplate : undefined;
}
set itemTemplate(value) {
this.nativeElement ? this.nativeElement.itemTemplate = value : undefined;
}
/** @description Specifies the text to be shown alongside the loading indicator when the loader is visible and positioned at either the top or bottom of the component. This text provides context or feedback to users during loading states. */
get loadingIndicatorPlaceholder() {
return this.nativeElement ? this.nativeElement.loadingIndicatorPlaceholder : undefined;
}
set loadingIndicatorPlaceholder(value) {
this.nativeElement ? this.nativeElement.loadingIndicatorPlaceholder = value : undefined;
}
/** @description Specifies the on-screen location where the loading indicator will be displayed (e.g., top, bottom, center, or custom coordinates). */
get loadingIndicatorPosition() {
return this.nativeElement ? this.nativeElement.loadingIndicatorPosition : undefined;
}
set loadingIndicatorPosition(value) {
this.nativeElement ? this.nativeElement.loadingIndicatorPosition = value : undefined;
}
/** @description Sets or retrieves the unlockKey property, a unique key required to unlock access to the product’s features or content. Use this to programmatically provide or verify the unlock key during authentication or activation processes. */
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
this.nativeElement ? this.nativeElement.unlockKey = value : undefined;
}
/** @description Specifies or retrieves the current language code (e.g., "en", "fr", "es") for localization. This property works together with messages, ensuring the appropriate language-specific messages are displayed or retrieved based on the selected language. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback function used in the localization module, typically invoked to handle language changes, translate content, or manage locale-specific operations during application runtime. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Defines or retrieves an object containing customizable strings and messages displayed by the widget, enabling support for localization and internationalization. This property works together with the language setting to provide appropriate translations based on the user's selected language. Use this object to specify translations for all widget text elements. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Specifies whether the popup is currently visible (open) or hidden (closed) on the screen. This property controls the display state of the popup component. */
get opened() {
return this.nativeElement ? this.nativeElement.opened : undefined;
}
set opened(value) {
this.nativeElement ? this.nativeElement.opened = value : undefined;
}
/** @description Prevents users from interacting with the element, disabling all input events such as clicks, typing, or form submissions. The element remains visible, but users cannot select, activate, or modify it in any way. */
get readonly() {
return this.nativeElement ? this.nativeElement.readonly : undefined;
}
set readonly(value) {
this.nativeElement ? this.nativeElement.readonly = value : undefined;
}
/** @description Gets or sets the selected indexes of items within the button's dropdown menu. This property allows you to programmatically retrieve or update which items in the dropdown are currently selected. */
get selectedIndexes() {
return this.nativeElement ? this.nativeElement.selectedIndexes : undefined;
}
set selectedIndexes(value) {
this.nativeElement ? this.nativeElement.selectedIndexes = value : undefined;
}
/** @description Gets or sets the selected values in the button's drop-down menu. This property allows you to retrieve the currently selected options or specify which options should be selected within the drop-down associated with the button. */
get selectedValues() {
return this.nativeElement ? this.nativeElement.selectedValues : undefined;
}
set selectedValues(value) {
this.nativeElement ? this.nativeElement.selectedValues = value : undefined;
}
/** @description Specifies the maximum number of items a user is allowed to select. If set to 1, only single selection is permitted; higher values enable multiple selections up to the defined limit. */
get selectionMode() {
return this.nativeElement ? this.nativeElement.selectionMode : undefined;
}
set selectionMode(value) {
this.nativeElement ? this.nativeElement.selectionMode = value : undefined;
}
/** @description Specifies whether the items displayed in the dropdown menu are automatically sorted in alphabetical order. If enabled, all dropdown items will appear in alphabetical sequence; if disabled, items will retain their original order as provided. */
get sorted() {
return this.nativeElement ? this.nativeElement.sorted : undefined;
}
set sorted(value) {
this.nativeElement ? this.nativeElement.sorted = value : undefined;
}
/** @description Specifies the theme to be applied, which controls the overall appearance and styling of the element, including colors, fonts, backgrounds, and other visual properties. This setting allows for consistent visual presentation across the application or component. */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
/** @description When set to true, this property prevents the element from receiving keyboard focus, making it inaccessible via keyboard navigation (such as the Tab key). */
get unfocusable() {
return this.nativeElement ? this.nativeElement.unfocusable : undefined;
}
set unfocusable(value) {
this.nativeElement ? this.nativeElement.unfocusable = value : undefined;
}
/** @description Specifies the property of the item object that holds its unique value. This property is used to retrieve or assign the item's value, which is typically leveraged for data binding, form submission, or identifying items within a collection. The value is stored in the specified key of the item object. */
get valueMember() {
return this.nativeElement ? this.nativeElement.valueMember : undefined;
}
set valueMember(value) {
this.nativeElement ? this.nativeElement.valueMember = value : undefined;
}
/** @description Specifies whether virtualization is enabled for the button’s drop-down list. When set to true, virtualization improves performance by only rendering items visible in the viewport, which is useful for large datasets. When set to false, all items are rendered regardless of visibility. */
get virtualized() {
return this.nativeElement ? this.nativeElement.virtualized : undefined;
}
set virtualized(value) {
this.nativeElement ? this.nativeElement.virtualized = value : undefined;
}
/** @description Closes the dropdown list associated with the button, hiding its options from view.
*/
close() {
if (this.nativeElement.isRendered) {
this.nativeElement.close();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.close();
});
}
}
/** @description Returns an instance of the item that appears in the element’s dropdown menu. This instance represents the selected item from the dropdown list, allowing access to its properties and methods.
* @param {string} value. The value of an item from the drop down list or a button.
* @returns {HTMLElement}
*/
getItem(value) {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getItem(value);
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
getItemSync(value) {
if (this.nativeElement.isRendered) {
return this.nativeElement.getItem(value);
}
return null;
}
/** @description Returns an array containing all items currently present in the dropdown list of the split button component. Each array element represents an individual dropdown item, allowing you to access or manipulate the complete set of options available in the split button's dropdown.
* @returns {any[]}
*/
items() {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.items();
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
itemsSync() {
if (this.nativeElement.isRendered) {
return this.nativeElement.items();
}
return null;
}
/** @description Inserts a new item into the dropdown list at the specified index, shifting existing items as needed. The new item will appear at the given position within the list, and subsequent items will be moved down to accommodate it.
* @param {number} position. The position where the item must be inserted.
* @param {any} value. The value of the new item.
*/
insert(position, value) {
if (this.nativeElement.isRendered) {
this.nativeElement.insert(position, value);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.insert(position, value);
});
}
}
/** @description Displays the drop-down list associated with the splitButton control, allowing users to view and select available options.
*/
open() {
if (this.nativeElement.isRendered) {
this.nativeElement.open();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.open();
});
}
}
/** @description Removes an item located at the specified index from the drop-down list, updating the list to exclude the removed item and adjusting the positions of subsequent items accordingly.
* @param {number} position. The position of the removed item.
*/
removeAt(position) {
if (this.nativeElement.isRendered) {
this.nativeElement.removeAt(position);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.removeAt(position);
});
}
}
/** @description Updates a specific item within the drop-down list by modifying its properties or replacing its value with new data. This operation allows you to dynamically change the content displayed for a selected option in the drop-down menu.
* @param {number} position. The position where the item must be updated.
* @param {any} value. The value of the updated item.
*/
update(position, value) {
if (this.nativeElement.isRendered) {
this.nativeElement.update(position, value);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.update(position, value);
});
}
}
get isRendered() {
return this.nativeElement ? this.nativeElement.isRendered : false;
}
ngOnInit() {
}
ngAfterViewInit() {
const that = this;
that.onCreate.emit(that.nativeElement);
if (Smart)
Smart.Render();
this.nativeElement.classList.add('smart-angular');
if (this.nativeElement.whenRendered)
this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
this.listen();
}
ngOnDestroy() {
this.unlisten();
}
ngOnChanges(changes) {
if (this.nativeElement && this.nativeElement.isRendered) {
for (const propName in changes) {
if (changes.hasOwnProperty(propName)) {
this.nativeElement[propName] = changes[propName].currentValue;
}
}
}
}
/** @description Add event listeners. */
listen() {
const that = this;
that.eventHandlers['buttonClickHandler'] = (event) => { that.onButtonClick.emit(event); };
that.nativeElement.addEventListener('buttonClick', that.eventHandlers['buttonClickHandler']);
that.eventHandlers['changeHandler'] = (event) => { that.onChange.emit(event); };
that.nativeElement.addEventListener('change', that.eventHandlers['changeHandler']);
that.eventHandlers['closeHandler'] = (event) => { that.onClose.emit(event); };
that.nativeElement.addEventListener('close', that.eventHandlers['closeHandler']);
that.eventHandlers['closingHandler'] = (event) => { that.onClosing.emit(event); };
that.nativeElement.addEventListener('closing', that.eventHandlers['closingHandler']);
that.eventHandlers['itemClickHandler'] = (event) => { that.onItemClick.emit(event); };
that.nativeElement.addEventListener('itemClick', that.eventHandlers['itemClickHandler']);
that.eventHandlers['openHandler'] = (event) => { that.onOpen.emit(event); };
that.nativeElement.addEventListener('open', that.eventHandlers['openHandler']);
that.eventHandlers['openingHandler'] = (event) => { that.onOpening.emit(event); };
that.nativeElement.addEventListener('opening', that.eventHandlers['openingHandler']);
that.eventHandlers['scrollBottomReachedHandler'] = (event) => { that.onScrollBottomReached.emit(event); };
that.nativeElement.addEventListener('scrollBottomReached', that.eventHandlers['scrollBottomReachedHandler']);
that.eventHandlers['scrollTopReachedHandler'] = (event) => { that.onScrollTopReached.emit(event); };
that.nativeElement.addEventListener('scrollTopReached', that.eventHandlers['scrollTopReachedHandler']);
}
/** @description Remove event listeners. */
unlisten() {
const that = this;
if (that.eventHandlers['buttonClickHandler']) {
that.nativeElement.removeEventListener('buttonClick', that.eventHandlers['buttonClickHandler']);
}
if (that.eventHandlers['changeHandler']) {
that.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']);
}
if (that.eventHandlers['closeHandler']) {
that.nativeElement.removeEventListener('close', that.eventHandlers['closeHandler']);
}
if (that.eventHandlers['closingHandler']) {
that.nativeElement.removeEventListener('closing', that.eventHandlers['closingHandler']);
}
if (that.eventHandlers['itemClickHandler']) {
that.nativeElement.removeEventListener('itemClick', that.eventHandlers['itemClickHandler']);
}
if (that.eventHandlers['openHandler']) {
that.nativeElement.removeEventListener('open', that.eventHandlers['openHandler']);
}
if (that.eventHandlers['openingHandler']) {
that.nativeElement.removeEventListener('opening', that.eventHandlers['openingHandler']);
}
if (that.eventHandlers['scrollBottomReachedHandler']) {
that.nativeElement.removeEventListener('scrollBottomReached', that.eventHandlers['scrollBottomReachedHandler']);
}
if (that.eventHandlers['scrollTopReachedHandler']) {
that.nativeElement.removeEventListener('scrollTopReached', that.eventHandlers['scrollTopReachedHandler']);
}
}
}
MultiSplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MultiSplitButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
MultiSplitButtonComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: MultiSplitButtonComponent, selector: "smart-multi-split-button, [smart-multi-split-button]", inputs: { animation: "animation", buttonsDataSource: "buttonsDataSource", dataSource: "dataSource", disabled: "disabled", displayLoadingIndicator: "displayLoadingIndicator", displayMember: "displayMember", dropDownAppendTo: "dropDownAppendTo", dropDownButtonPosition: "dropDownButtonPosition", dropDownOpenMode: "dropDownOpenMode", dropDownOverlay: "dropDownOverlay", dropDownPosition: "dropDownPosition", filterable: "filterable", filterMode: "filterMode", filterInputPlaceholder: "filterInputPlaceholder", grouped: "grouped", groupMember: "groupMember", incrementalSearchDelay: "incrementalSearchDelay", incrementalSearchMode: "incrementalSearchMode", itemHeight: "itemHeight", itemTemplate: "itemTemplate", loadingIndicatorPlaceholder: "loadingIndicatorPlaceholder", loadingIndicatorPosition: "loadingIndicatorPosition", unlockKey: "unlockKey", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", opened: "opened", readonly: "readonly", selectedIndexes: "selectedIndexes", selectedValues: "selectedValues", selectionMode: "selectionMode", sorted: "sorted", theme: "theme", unfocusable: "unfocusable", valueMember: "valueMember", virtualized: "virtualized" }, outputs: { onButtonClick: "onButtonClick", onChange: "onChange", onClose: "onClose", onClosing: "onClosing", onItemClick: "onItemClick", onOpen: "onOpen", onOpening: "onOpening", onScrollBottomReached: "onScrollBottomReached", onScrollTopReached: "onScrollTopReached" }, exportAs: ["smart-multi-split-button"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MultiSplitButtonComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-multi-split-button', selector: 'smart-multi-split-button, [smart-multi-split-button]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { animation: [{
type: Input
}], buttonsDataSource: [{
type: Input
}], dataSource: [{
type: Input
}], disabled: [{
type: Input
}], displayLoadingIndicator: [{
type: Input
}], displayMember: [{
type: Input
}], dropDownAppendTo: [{
type: Input
}], dropDownButtonPosition: [{
type: Input
}], dropDownOpenMode: [{
type: Input
}], dropDownOverlay: [{
type: Input
}], dropDownPosition: [{
type: Input
}], filterable: [{
type: Input
}], filterMode: [{
type: Input
}], filterInputPlaceholder: [{
type: Input
}], grouped: [{
type: Input
}], groupMember: [{
type: Input
}], incrementalSearchDelay: [{
type: Input
}], incrementalSearchMode: [{
type: Input
}], itemHeight: [{
type: Input
}], itemTemplate: [{
type: Input
}], loadingIndicatorPlaceholder: [{
type: Input
}], loadingIndicatorPosition: [{
type: Input
}], unlockKey: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], opened: [{
type: Input
}], readonly: [{
type: Input
}], selectedIndexes: [{
type: Input
}], selectedValues: [{
type: Input
}], selectionMode: [{
type: Input
}], sorted: [{
type: Input
}], theme: [{
type: Input
}], unfocusable: [{
type: Input
}], valueMember: [{
type: Input
}], virtualized: [{
type: Input
}], onButtonClick: [{
type: Output
}], onChange: [{
type: Output
}], onClose: [{
type: Output
}], onClosing: [{
type: Output
}], onItemClick: [{
type: Output
}], onOpen: [{
type: Output
}], onOpening: [{
type: Output
}], onScrollBottomReached: [{
type: Output
}], onScrollTopReached: [{
type: Output
}] } });
class ListItemComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-list-item');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description */
get alternationIndex() {
return this.nativeElement ? this.nativeElement.alternationIndex : undefined;
}
set alternationIndex(value) {
this.nativeElement ? this.nativeElement.alternationIndex = value : undefined;
}
/** @description */
get color() {
return this.nativeElement ? this.nativeElement.color : undefined;
}
set color(value) {
this.nativeElement ? this.nativeElement.color = value : undefined;
}
/** @description */
get displayMode() {
return this.nativeElement ? this.nativeElement.displayMode : undefined;
}
set displayMode(value) {
this.nativeElement ? this.nativeElement.displayMode = value : undefined;
}
/** @description */
get grouped() {
return this.nativeElement ? this.nativeElement.grouped : undefined;
}
set grouped(value) {
this.nativeElement ? this.nativeElement.grouped = value : undefined;
}
/** @description */
get selected() {
return this.nativeElement ? this.nativeElement.selected : undefined;
}
set selected(value) {
this.nativeElement ? this.nativeElement.selected = value : undefined;
}
/** @description */
get value() {
return this.nativeElement ? this.nativeElement.value : undefined;
}
set value(value) {
this.nativeElement ? this.nativeElement.value = value : undefined;
}
/** @description */
get label() {
return this.nativeElement ? this.nativeElement.label : undefined;
}
set label(value) {
this.nativeElement ? this.nativeElement.label = value : undefined;
}
/** @description */
get details() {
return this.nativeElement ? this.nativeElement.details : undefined;
}
set details(value) {
this.nativeElement ? this.nativeElement.details = value : undefined;
}
/** @description */
get group() {
return this.nativeElement ? this.nativeElement.group : undefined;
}
set group(value) {
this.nativeElement ? this.nativeElement.group = value : undefined;
}
/** @description */
get hidden() {
return this.nativeElement ? this.nativeElement.hidden : undefined;
}
set hidden(value) {
this.nativeElement ? this.nativeElement.hidden = value : undefined;
}
/** @description */
get readonly() {
return this.nativeElement ? this.nativeElement.readonly : undefined;
}
set readonly(value) {
this.nativeElement ? this.nativeElement.readonly = value : undefined;
}
get isRendered() {
return this.nativeElement ? this.nativeElement.isRendered : false;
}
ngOnInit() {
}
ngAfterViewInit() {
const that = this;
that.onCreate.emit(that.nativeElement);
this.nativeElement.classList.add('smart-angular');
if (this.nativeElement.whenRendered)
this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
}
ngOnDestroy() { }
ngOnChanges(changes) {
if (this.nativeElement && this.nativeElement.isRendered) {
for (const propName in changes) {
if (changes.hasOwnProperty(propName)) {
this.nativeElement[propName] = changes[propName].currentValue;
}
}
}
}
}
ListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
ListItemComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: ListItemComponent, selector: "smart-list-item, [smart-list-item]", inputs: { alternationIndex: "alternationIndex", color: "color", displayMode: "displayMode", grouped: "grouped", selected: "selected", value: "value", label: "label", details: "details", group: "group", hidden: "hidden", readonly: "readonly" }, exportAs: ["smart-list-item"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ListItemComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-list-item', selector: 'smart-list-item, [smart-list-item]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { alternationIndex: [{
type: Input
}], color: [{
type: Input
}], displayMode: [{
type: Input
}], grouped: [{
type: Input
}], selected: [{
type: Input
}], value: [{
type: Input
}], label: [{
type: Input
}], details: [{
type: Input
}], group: [{
type: Input
}], hidden: [{
type: Input
}], readonly: [{
type: Input
}] } });
class ListItemsGroupComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-list-items-group');
for (le