
if(typeof window !== 'undefined') {	
	if (!window['Smart']) {
		window['Smart'] = { RenderMode: 'manual' };
	}
	else {
		window['Smart'].RenderMode = 'manual';
	}
}
import './../source/modules/smart.textbox';

import * as i0 from '@angular/core';
import { EventEmitter, Directive, Output, Input, forwardRef, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

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;
}

const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => TextBoxComponent),
    multi: true
};
class TextBoxComponent extends BaseElement {
    constructor(ref) {
        super(ref);
        this.eventHandlers = [];
        /**
        * @description
        * The registered callback function called when a change event occurs on the form elements.
        */
        this._onChange = () => { };
        /**
        * @description
        * The registered callback function called when a blur event occurs on the form elements.
        */
        this._onTouched = () => { };
        /** @description This event is triggered whenever the value in the Text Box changes and is confirmed by the user. Specifically, it fires under two conditions:  1. When the user moves focus away from the Text Box (on blur).  2. When the user presses the 'Enter' key while the Text Box is focused.  This ensures that the event only occurs after the user has finished editing the text, rather than on every keystroke.
        *  @param event. The custom event. 	Custom event was created with: event.detail(	oldValue, 	value, 	type)
        *   oldValue - The previous value before it was changed.
        *   value - The new value.
        *   type - The type of the event.
        */
        this.onChange = new EventEmitter();
        /** @description This event is triggered each time a user releases a key (on the keyup event) within the TextBox, but only if the content of the TextBox has changed since the previous event.
        *  @param event. The custom event. 	Custom event was created with: event.detail(	oldValue, 	value)
        *   oldValue - The previous value before it was changed.
        *   value - The new value.
        */
        this.onChanging = new EventEmitter();
        this._initialChange = true;
        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-text-box');
        for (let propertyName in properties) {
            this.nativeElement[propertyName] = properties[propertyName];
        }
        return this.nativeElement;
    }
    /** @description Controls the animation mode for the component. You can retrieve the current mode or assign a new one. Setting this property to 'none' will disable all animations. */
    get animation() {
        return this.nativeElement ? this.nativeElement.animation : undefined;
    }
    set animation(value) {
        this.nativeElement ? this.nativeElement.animation = value : undefined;
    }
    /** @description Specifies whether the text box should automatically receive keyboard focus when the page loads, allowing users to start typing immediately without clicking inside the box. */
    get autoFocus() {
        return this.nativeElement ? this.nativeElement.autoFocus : undefined;
    }
    set autoFocus(value) {
        this.nativeElement ? this.nativeElement.autoFocus = value : undefined;
    }
    /** @description Specifies the autocomplete mode used to filter and display suggestions from the dataSource. The selected autocomplete mode determines how input text is matched against the available items, showing only those entries that meet the criteria—for example, items that start with, contain, or exactly match the user's input. This setting helps control the relevance and behavior of suggestion lists shown to the user while typing. */
    get autoComplete() {
        return this.nativeElement ? this.nativeElement.autoComplete : undefined;
    }
    set autoComplete(value) {
        this.nativeElement ? this.nativeElement.autoComplete = value : undefined;
    }
    /** @description Specifies the duration (in milliseconds) to wait after the user stops typing before displaying the dropdown with autocomplete suggestions. This delay helps control how quickly the matching results appear, improving performance and user experience by preventing unnecessary searches while the user is still typing. */
    get autoCompleteDelay() {
        return this.nativeElement ? this.nativeElement.autoCompleteDelay : undefined;
    }
    set autoCompleteDelay(value) {
        this.nativeElement ? this.nativeElement.autoCompleteDelay = value : undefined;
    }
    /** @description Specifies the data source that populates the ComboBox options. The dataSource property accepts multiple types:- 'Array of strings or numbers:' Each item will be displayed as both the label and value of a list item.- 'Array of objects:' Each object should contain properties—such as label (displayed text) and value (item value)—that define the corresponding list item’s display and value.- 'Callback function:' You can provide a function that returns an array of items in either of the above forms. This allows for dynamic or asynchronous data loading.This flexible approach lets you easily integrate static lists, complex objects, or data fetched from external sources into the ComboBox. */
    get dataSource() {
        return this.nativeElement ? this.nativeElement.dataSource : undefined;
    }
    set dataSource(value) {
        this.nativeElement ? this.nativeElement.dataSource = value : undefined;
    }
    /** @description Determines whether the element is active and interactive (enabled) or inactive and unresponsive to user interactions (disabled). When set to "disabled," the element cannot be focused, clicked, or edited by the user. */
    get disabled() {
        return this.nativeElement ? this.nativeElement.disabled : undefined;
    }
    set disabled(value) {
        this.nativeElement ? this.nativeElement.disabled = value : undefined;
    }
    /** @description Specifies whether a visual indicator (such as a loading spinner or progress bar) will be displayed while filtering data or loading items from a remote source. This helps inform users that a background operation is in progress. */
    get displayLoadingIndicator() {
        return this.nativeElement ? this.nativeElement.displayLoadingIndicator : undefined;
    }
    set displayLoadingIndicator(value) {
        this.nativeElement ? this.nativeElement.displayLoadingIndicator = value : undefined;
    }
    /** @description Sets or retrieves the displayMember property. The displayMember determines which property of each object in the data source collection (defined by the 'dataSource' property) will be used for display purposes in the user interface. By specifying the name of a property here, you control which value from each data source item is shown to users (e.g., displaying a "name" property from a list of user objects). */
    get displayMember() {
        return this.nativeElement ? this.nativeElement.displayMember : undefined;
    }
    set displayMember(value) {
        this.nativeElement ? this.nativeElement.displayMember = value : undefined;
    }
    /** @description Specifies the visual presentation of characters within the input field, such as whether the characters are visible as plain text, masked (e.g., as password dots), or formatted in a particular style. This attribute controls how users see the inputted content while typing or reviewing their entries. */
    get displayMode() {
        return this.nativeElement ? this.nativeElement.displayMode : undefined;
    }
    set displayMode(value) {
        this.nativeElement ? this.nativeElement.displayMode = value : undefined;
    }
    /** @description Specifies the parent container to which the dropdown menu is appended in the DOM. By default, the dropdown is rendered within its original parent element. However, if an ancestor element has restricted overflow (e.g., 'overflow: hidden' or 'overflow: auto'), the dropdown may be clipped and not display correctly. To resolve this, you can set the dropDownAppendTo property to ''body'', the ID of a specific HTML element, or a direct reference to an HTML element. When set, the dropdown will be moved to the specified container in the DOM, ensuring it displays properly regardless of overflow constraints in its ancestors. To restore the dropdown to its original parent, reset this property to null. This feature is especially useful for ensuring that dropdowns are visible and functional in complex layouts where parent elements limit visibility due to CSS overflow properties. */
    get dropDownAppendTo() {
        return this.nativeElement ? this.nativeElement.dropDownAppendTo : undefined;
    }
    set dropDownAppendTo(value) {
        this.nativeElement ? this.nativeElement.dropDownAppendTo = value : undefined;
    }
    /** @description Specifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's height will be determined by a CSS variable. To customize the dropdown's height directly, you can assign a specific value (e.g., "200px" or "50%") to this property. Otherwise, leaving it empty enables the component to use the height defined by the associated CSS variable. */
    get dropDownHeight() {
        return this.nativeElement ? this.nativeElement.dropDownHeight : undefined;
    }
    set dropDownHeight(value) {
        this.nativeElement ? this.nativeElement.dropDownHeight = value : undefined;
    }
    /** @description Defines the maximum height for the dropdown menu. If no value is set (default is an empty string), the dropdown’s maximum height will be determined by a corresponding CSS variable instead. This allows for dynamic styling via CSS, while still providing the option to specify a fixed maximum height directly through this property. */
    get dropDownMaxHeight() {
        return this.nativeElement ? this.nativeElement.dropDownMaxHeight : undefined;
    }
    set dropDownMaxHeight(value) {
        this.nativeElement ? this.nativeElement.dropDownMaxHeight = value : undefined;
    }
    /** @description Specifies the maximum width of the dropdown menu. By default, this property is set to an empty string, meaning that the dropdown's max-width is determined by a corresponding CSS variable. If a specific value (such as '300px' or '100%') is provided, it will override the CSS variable and directly set the maximum width of the dropdown. */
    get dropDownMaxWidth() {
        return this.nativeElement ? this.nativeElement.dropDownMaxWidth : undefined;
    }
    set dropDownMaxWidth(value) {
        this.nativeElement ? this.nativeElement.dropDownMaxWidth = value : undefined;
    }
    /** @description Defines the minimum height of the dropdown menu. By default, this property is set to an empty string (""), which means the minimum height is not explicitly specified in the component and will instead be determined by the value of a related CSS variable. If a specific value (such as "200px" or "2rem") is provided, it will override the CSS variable and set the minimum height of the dropdown directly. */
    get dropDownMinHeight() {
        return this.nativeElement ? this.nativeElement.dropDownMinHeight : undefined;
    }
    set dropDownMinHeight(value) {
        this.nativeElement ? this.nativeElement.dropDownMinHeight = value : undefined;
    }
    /** @description Specifies the minimum width of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's minimum width is determined by a corresponding CSS variable. If you provide a specific value (such as '200px' or '20rem'), it will override the CSS variable and set the dropdown's minimum width accordingly. */
    get dropDownMinWidth() {
        return this.nativeElement ? this.nativeElement.dropDownMinWidth : undefined;
    }
    set dropDownMinWidth(value) {
        this.nativeElement ? this.nativeElement.dropDownMinWidth = value : undefined;
    }
    /** @description Specifies the direction or animation style in which the dropdown menu appears when activated (e.g., opens upwards, downwards, or with a fade effect). */
    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 create a transparent overlay that covers the entire area between the dropdown and the rest of the webpage. This overlay ensures that any clicks outside the dropdown are intercepted by the overlay itself, rather than interacting with underlying DOM elements. As a result, clicking outside the dropdown can be handled consistently—for example, to close the dropdown—without triggering unintended interactions elsewhere on the page. */
    get dropDownOverlay() {
        return this.nativeElement ? this.nativeElement.dropDownOverlay : undefined;
    }
    set dropDownOverlay(value) {
        this.nativeElement ? this.nativeElement.dropDownOverlay = value : undefined;
    }
    /** @description Specifies the placeholder text that appears in the dropdown menu when there are no available items to display. This text provides guidance or context to users, indicating that the dropdown is currently empty. */
    get dropDownPlaceholder() {
        return this.nativeElement ? this.nativeElement.dropDownPlaceholder : undefined;
    }
    set dropDownPlaceholder(value) {
        this.nativeElement ? this.nativeElement.dropDownPlaceholder = value : undefined;
    }
    /** @description Specifies the alignment and placement of the dropdown menu relative to its trigger element when the dropdown is opened, allowing you to control where the menu appears on the screen (e.g., above, below, left, or right of the trigger). */
    get dropDownPosition() {
        return this.nativeElement ? this.nativeElement.dropDownPosition : undefined;
    }
    set dropDownPosition(value) {
        this.nativeElement ? this.nativeElement.dropDownPosition = value : undefined;
    }
    /** @description Specifies the width of the dropdown menu. By default, this property is set to an empty string (""). When left empty, the dropdown's width is determined by a corresponding CSS variable, allowing for flexible styling through external or theme-based CSS. To explicitly set a custom width, provide a valid CSS width value (e.g., "200px", "50%"). */
    get dropDownWidth() {
        return this.nativeElement ? this.nativeElement.dropDownWidth : undefined;
    }
    set dropDownWidth(value) {
        this.nativeElement ? this.nativeElement.dropDownWidth = value : undefined;
    }
    /** @description Specifies how the element responds when the Escape key is pressed, such as closing a dialog, dismissing a modal, or performing a custom action. */
    get escKeyMode() {
        return this.nativeElement ? this.nativeElement.escKeyMode : undefined;
    }
    set escKeyMode(value) {
        this.nativeElement ? this.nativeElement.escKeyMode = value : undefined;
    }
    /** @description Defines how the "Enter" key functions within the application, such as whether it submits a form, inserts a new line, or triggers a specific action, depending on the context. */
    get enterKeyBehavior() {
        return this.nativeElement ? this.nativeElement.enterKeyBehavior : undefined;
    }
    set enterKeyBehavior(value) {
        this.nativeElement ? this.nativeElement.enterKeyBehavior = value : undefined;
    }
    /** @description Specifies the form element with which this element is associated, known as its "form owner." The value of this attribute must be the ID of a  element present in the same document. This allows the element to be associated with a specific form, even if it is not nested directly within the form’s markup. */
    get form() {
        return this.nativeElement ? this.nativeElement.form : undefined;
    }
    set form(value) {
        this.nativeElement ? this.nativeElement.form = value : undefined;
    }
    /** @description Provides supplemental helper text displayed beneath the element. This hint appears exclusively when the element is focused, offering contextual guidance to the user during interaction. */
    get hint() {
        return this.nativeElement ? this.nativeElement.hint : undefined;
    }
    set hint(value) {
        this.nativeElement ? this.nativeElement.hint = value : undefined;
    }
    /** @description Controls whether the horizontal scroll bar within the dropdown menu is visible. This setting allows you to enable or disable horizontal scrolling for dropdown content that extends beyond the visible area. */
    get horizontalScrollBarVisibility() {
        return this.nativeElement ? this.nativeElement.horizontalScrollBarVisibility : undefined;
    }
    set horizontalScrollBarVisibility(value) {
        this.nativeElement ? this.nativeElement.horizontalScrollBarVisibility = value : undefined;
    }
    /** @description Represents the property key of a List item's object that specifies which value should be displayed in the input field when a ListItem is selected. This property is useful when you want to show a value other than the default label—such as a unique identifier or another attribute—within the input. By default, the item's label is shown. Use this option to customize the displayed value based on a different property from your data objects. */
    get inputMember() {
        return this.nativeElement ? this.nativeElement.inputMember : undefined;
    }
    set inputMember(value) {
        this.nativeElement ? this.nativeElement.inputMember = value : undefined;
    }
    /** @description Defines the purpose of the input field and specifies the type of data expected, providing guidance to browsers and user agents for offering autofill suggestions. This property maps directly to the standard HTML autocomplete attribute, allowing developers to control whether and how a browser can automatically fill in the field based on the user's stored information. Possible values include generic options like 'on' and 'off', as well as more specific data types such as 'name', 'organization', 'email', 'street-address', and others, enabling enhanced user experience and data accuracy in forms. */
    get inputPurpose() {
        return this.nativeElement ? this.nativeElement.inputPurpose : undefined;
    }
    set inputPurpose(value) {
        this.nativeElement ? this.nativeElement.inputPurpose = value : undefined;
    }
    /** @description Specifies the height (in pixels) for each list item when rendering the list.  This property is only applicable if list virtualization is enabled, as it allows the component to accurately calculate and display only the visible items for improved performance. */
    get itemHeight() {
        return this.nativeElement ? this.nativeElement.itemHeight : undefined;
    }
    set itemHeight(value) {
        this.nativeElement ? this.nativeElement.itemHeight = value : undefined;
    }
    /** @description Specifies the algorithm used to calculate the width of each item, determining how item widths are measured and displayed within the layout. This setting influences whether widths are fixed, dynamic, or adapt based on content or container size. */
    get itemMeasureMode() {
        return this.nativeElement ? this.nativeElement.itemMeasureMode : undefined;
    }
    set itemMeasureMode(value) {
        this.nativeElement ? this.nativeElement.itemMeasureMode = value : undefined;
    }
    /** @description A getter that retrieves and returns an array containing all the list item elements (e.g., '' elements) currently present within the dropdown menu. This allows easy access to all items displayed in the dropdown for further manipulation or inspection. */
    get items() {
        return this.nativeElement ? this.nativeElement.items : undefined;
    }
    set items(value) {
        this.nativeElement ? this.nativeElement.items = value : undefined;
    }
    /** @description The itemTemplate property is a string specifying the id of an HTMLTemplateElement present in the DOM. This template is used to define and customize the structure and content of each item rendered within the list. By referencing the id of an HTMLTemplateElement, you can control how individual list items are displayed, allowing for flexible and reusable item layouts. */
    get itemTemplate() {
        return this.nativeElement ? this.nativeElement.itemTemplate : undefined;
    }
    set itemTemplate(value) {
        this.nativeElement ? this.nativeElement.itemTemplate = value : undefined;
    }
    /** @description Displays a small text label positioned above the element, typically used to provide additional context or information about the element’s purpose. */
    get label() {
        return this.nativeElement ? this.nativeElement.label : undefined;
    }
    set label(value) {
        this.nativeElement ? this.nativeElement.label = value : undefined;
    }
    /** @description Specifies the text that appears alongside the loading indicator when the loader is visible and positioned at either the top or bottom of the container. This text provides context or status information to users while the loading process is ongoing. */
    get loadingIndicatorPlaceholder() {
        return this.nativeElement ? this.nativeElement.loadingIndicatorPlaceholder : undefined;
    }
    set loadingIndicatorPlaceholder(value) {
        this.nativeElement ? this.nativeElement.loadingIndicatorPlaceholder = value : undefined;
    }
    /** @description Specifies the screen location where the loading indicator will be displayed (e.g., top, bottom, center, etc.), allowing developers to control the visual placement of the loading element within the application's interface. */
    get loadingIndicatorPosition() {
        return this.nativeElement ? this.nativeElement.loadingIndicatorPosition : undefined;
    }
    set loadingIndicatorPosition(value) {
        this.nativeElement ? this.nativeElement.loadingIndicatorPosition = value : undefined;
    }
    /** @description Defines or retrieves the unlockKey, a unique code or token used to grant access to the product's features or functionality. */
    get unlockKey() {
        return this.nativeElement ? this.nativeElement.unlockKey : undefined;
    }
    set unlockKey(value) {
        this.nativeElement ? this.nativeElement.unlockKey = value : undefined;
    }
    /** @description Sets or retrieves the current language for localization purposes. This property is used together with the messages property, which contains language-specific content or translations. Adjusting the language will determine which set of messages is displayed or utilized within the application. */
    get locale() {
        return this.nativeElement ? this.nativeElement.locale : undefined;
    }
    set locale(value) {
        this.nativeElement ? this.nativeElement.locale = value : undefined;
    }
    /** @description A callback function that allows you to define a custom format for messages returned by the Localization Module. This enables you to modify or enhance the localized messages—such as adding prefixes, changing text structure, or injecting dynamic values—before they are displayed to the user. */
    get localizeFormatFunction() {
        return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
    }
    set localizeFormatFunction(value) {
        this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
    }
    /** @description Specifies or retrieves the maximum number of characters allowed for user input in a text field. This limits how many characters a user can type or paste into the field. */
    get maxLength() {
        return this.nativeElement ? this.nativeElement.maxLength : undefined;
    }
    set maxLength(value) {
        this.nativeElement ? this.nativeElement.maxLength = value : undefined;
    }
    /** @description Specifies or retrieves the minimum number of characters a user must type before the auto-complete feature is activated and suggestions are displayed. */
    get minLength() {
        return this.nativeElement ? this.nativeElement.minLength : undefined;
    }
    set minLength(value) {
        this.nativeElement ? this.nativeElement.minLength = value : undefined;
    }
    /** @description Defines or retrieves an object containing the set of strings (such as labels, tooltips, button text, and messages) used throughout the widget interface, allowing these strings to be localized for different languages. This property works together with the language property to ensure the widget’s text content is displayed in the appropriate language for users. */
    get messages() {
        return this.nativeElement ? this.nativeElement.messages : undefined;
    }
    set messages(value) {
        this.nativeElement ? this.nativeElement.messages = value : undefined;
    }
    /** @description Sets or retrieves the name attribute of the element. The name attribute specifies a key associated with the element's value when submitting HTML forms, enabling server-side identification and processing of submitted data. This is essential for form controls such as inputs, selects, and textareas. */
    get name() {
        return this.nativeElement ? this.nativeElement.name : undefined;
    }
    set name(value) {
        this.nativeElement ? this.nativeElement.name = value : undefined;
    }
    /** @description Indicates whether the dropdown menu is currently expanded (open) and visible to the user, or collapsed (closed) and hidden from view. */
    get opened() {
        return this.nativeElement ? this.nativeElement.opened : undefined;
    }
    set opened(value) {
        this.nativeElement ? this.nativeElement.opened = value : undefined;
    }
    /** @description Specifies the placeholder text that appears inside the input field when it is empty, providing guidance or an example of the expected input to the user. */
    get placeholder() {
        return this.nativeElement ? this.nativeElement.placeholder : undefined;
    }
    set placeholder(value) {
        this.nativeElement ? this.nativeElement.placeholder = value : undefined;
    }
    /** @description Prevents any user interaction with the element, disabling actions such as clicking, focusing, hovering, or keyboard input. The element will not respond to any user events while this setting is applied. */
    get readonly() {
        return this.nativeElement ? this.nativeElement.readonly : undefined;
    }
    set readonly(value) {
        this.nativeElement ? this.nativeElement.readonly = value : undefined;
    }
    /** @description Sets or retrieves a value that specifies whether the element’s content is aligned for right-to-left (RTL) text direction, supporting languages and locales such as Arabic or Hebrew. When enabled, the element’s layout and text flow will be adjusted to display content appropriately for RTL reading order. */
    get rightToLeft() {
        return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
    }
    set rightToLeft(value) {
        this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
    }
    /** @description Indicates that the input field is required, meaning the user must provide a value in this field before the form can be submitted successfully. If the input is left empty, the form submission will be blocked and the user will be prompted to complete the required information. */
    get required() {
        return this.nativeElement ? this.nativeElement.required : undefined;
    }
    set required(value) {
        this.nativeElement ? this.nativeElement.required = value : undefined;
    }
    /** @description Defines the custom error message displayed to users when the input is marked as required but no value has been entered. If the required field is left empty, this message will be shown to prompt the user to provide the necessary input. */
    get requiredMessage() {
        return this.nativeElement ? this.nativeElement.requiredMessage : undefined;
    }
    set requiredMessage(value) {
        this.nativeElement ? this.nativeElement.requiredMessage = value : undefined;
    }
    /** @description Specifies whether the entire content of the input field should automatically be highlighted (selected) when the input receives focus, allowing users to easily replace or copy the content. */
    get selectAllOnFocus() {
        return this.nativeElement ? this.nativeElement.selectAllOnFocus : undefined;
    }
    set selectAllOnFocus(value) {
        this.nativeElement ? this.nativeElement.selectAllOnFocus = value : undefined;
    }
    /** @description Specifies the theme to be applied, which controls the overall appearance and visual style of the element, including colors, fonts, and other stylistic details. */
    get theme() {
        return this.nativeElement ? this.nativeElement.theme : undefined;
    }
    set theme(value) {
        this.nativeElement ? this.nativeElement.theme = value : undefined;
    }
    /** @description If set to true, the element will be excluded from the tab order and cannot receive keyboard or programmatic focus. This means users will not be able to navigate to the element using the Tab key or set focus to it via scripts. */
    get unfocusable() {
        return this.nativeElement ? this.nativeElement.unfocusable : undefined;
    }
    set unfocusable(value) {
        this.nativeElement ? this.nativeElement.unfocusable = value : undefined;
    }
    /** @description Sets a new value for the element or retrieves its current value, depending on how the method is used. Useful for reading or updating the content, input, or state of form elements such as text fields, checkboxes, or select menus. */
    get value() {
        return this.nativeElement ? this.nativeElement.value : undefined;
    }
    set value(value) {
        this.nativeElement ? this.nativeElement.value = value : undefined;
    }
    /** @description Specifies which property of each item object represents its value. The valueMember setting is particularly useful when binding the ListBox to data from a JSON file as its dataSource and you need to designate a specific property in the JSON objects to be used as the item's value. This is similar to how groupMember works, but instead of grouping items, valueMember tells the ListBox which property to use for the underlying value of each list item. For example, if your JSON objects have an "id" property, setting valueMember to "id" will store the value of the "id" property for each item in the ListBox. */
    get valueMember() {
        return this.nativeElement ? this.nativeElement.valueMember : undefined;
    }
    set valueMember(value) {
        this.nativeElement ? this.nativeElement.valueMember = value : undefined;
    }
    /** @description Controls whether the vertical scroll bar within the dropdown menu is visible. This property allows you to specify if users can scroll vertically to view additional dropdown options when the content overflows the visible area. */
    get verticalScrollBarVisibility() {
        return this.nativeElement ? this.nativeElement.verticalScrollBarVisibility : undefined;
    }
    set verticalScrollBarVisibility(value) {
        this.nativeElement ? this.nativeElement.verticalScrollBarVisibility = value : undefined;
    }
    /** @description Closes the drop-down menu associated with the input field. Note: The drop-down appears only when auto-complete functionality is enabled, allowing users to select from suggested options.
    */
    close() {
        if (this.nativeElement.isRendered) {
            this.nativeElement.close();
        }
        else {
            this.nativeElement.whenRendered(() => {
                this.nativeElement.close();
            });
        }
    }
    /** @description Expands the drop-down menu, allowing users to view and select available options. This drop-down menu is displayed exclusively when the autocomplete feature is enabled, providing relevant suggestions based on user input.
    */
    open() {
        if (this.nativeElement.isRendered) {
            this.nativeElement.open();
        }
        else {
            this.nativeElement.whenRendered(() => {
                this.nativeElement.open();
            });
        }
    }
    /** @description This method resets the input field to its original, initial value, effectively clearing any changes made by the user and restoring the input to its default state as set when the component or page first loaded.
    */
    reset() {
        if (this.nativeElement.isRendered) {
            this.nativeElement.reset();
        }
        else {
            this.nativeElement.whenRendered(() => {
                this.nativeElement.reset();
            });
        }
    }
    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();
    }
    get ngValue() {
        if (!this.nativeElement) {
            return null;
        }
        const value = this.nativeElement.value;
        return value;
    }
    set ngValue(value) {
        if (this.nativeElement) {
            this.writeValue(value);
        }
    }
    writeValue(value) {
        const that = this;
        const normalizedValue = value == null ? '' : value;
        that.nativeElement.whenRendered(() => {
            that.value = normalizedValue;
            if (that._initialChange === false) {
                that._onChange(that.value);
            }
        });
    }
    registerOnChange(fn) {
        this._onChange = fn;
    }
    registerOnTouched(fn) {
        this._onTouched = fn;
    }
    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['changeHandler'] = (event) => { that.onChange.emit(event); };
        that.nativeElement.addEventListener('change', that.eventHandlers['changeHandler']);
        that.eventHandlers['changingHandler'] = (event) => { that.onChanging.emit(event); };
        that.nativeElement.addEventListener('changing', that.eventHandlers['changingHandler']);
        that.eventHandlers['changeModelHandler'] = (event) => {
            that._initialChange = false;
            that._onChange(that.nativeElement.value);
        };
        that.eventHandlers['blurModelHandler'] = (event) => {
            that._onTouched();
        };
        that.nativeElement.whenRendered(() => {
            if (that.nativeElement.querySelector('input')) {
                that.eventHandlers['keyupModelHandler'] = (event) => {
                    setTimeout(() => { that.eventHandlers['changeModelHandler'](event); }, 50);
                };
                that.nativeElement.querySelector('input').addEventListener('keyup', that.eventHandlers['keyupModelHandler']);
            }
        });
        that.nativeElement.addEventListener('change', that.eventHandlers['changeModelHandler']);
        that.nativeElement.addEventListener('blur', that.eventHandlers['blurModelHandler']);
    }
    /** @description Remove event listeners. */
    unlisten() {
        const that = this;
        if (that.eventHandlers['changeHandler']) {
            that.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']);
        }
        if (that.eventHandlers['changingHandler']) {
            that.nativeElement.removeEventListener('changing', that.eventHandlers['changingHandler']);
        }
        if (that.eventHandlers['changeModelHandler']) {
            that.nativeElement.removeEventListener('change', that.eventHandlers['changeModelHandler']);
            if (that.nativeElement.querySelector('input')) {
                that.nativeElement.querySelector('input').removeEventListener('keyup', that.eventHandlers['keyupModelHandler']);
            }
        }
        if (that.eventHandlers['blurModelHandler']) {
            that.nativeElement.removeEventListener('blur', that.eventHandlers['blurModelHandler']);
        }
    }
}
TextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TextBoxComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
TextBoxComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: TextBoxComponent, selector: "smart-text-box, [smart-text-box]", inputs: { animation: "animation", autoFocus: "autoFocus", autoComplete: "autoComplete", autoCompleteDelay: "autoCompleteDelay", dataSource: "dataSource", disabled: "disabled", displayLoadingIndicator: "displayLoadingIndicator", displayMember: "displayMember", displayMode: "displayMode", dropDownAppendTo: "dropDownAppendTo", dropDownHeight: "dropDownHeight", dropDownMaxHeight: "dropDownMaxHeight", dropDownMaxWidth: "dropDownMaxWidth", dropDownMinHeight: "dropDownMinHeight", dropDownMinWidth: "dropDownMinWidth", dropDownOpenMode: "dropDownOpenMode", dropDownOverlay: "dropDownOverlay", dropDownPlaceholder: "dropDownPlaceholder", dropDownPosition: "dropDownPosition", dropDownWidth: "dropDownWidth", escKeyMode: "escKeyMode", enterKeyBehavior: "enterKeyBehavior", form: "form", hint: "hint", horizontalScrollBarVisibility: "horizontalScrollBarVisibility", inputMember: "inputMember", inputPurpose: "inputPurpose", itemHeight: "itemHeight", itemMeasureMode: "itemMeasureMode", items: "items", itemTemplate: "itemTemplate", label: "label", loadingIndicatorPlaceholder: "loadingIndicatorPlaceholder", loadingIndicatorPosition: "loadingIndicatorPosition", unlockKey: "unlockKey", locale: "locale", localizeFormatFunction: "localizeFormatFunction", maxLength: "maxLength", minLength: "minLength", messages: "messages", name: "name", opened: "opened", placeholder: "placeholder", readonly: "readonly", rightToLeft: "rightToLeft", required: "required", requiredMessage: "requiredMessage", selectAllOnFocus: "selectAllOnFocus", theme: "theme", unfocusable: "unfocusable", value: "value", valueMember: "valueMember", verticalScrollBarVisibility: "verticalScrollBarVisibility" }, outputs: { onChange: "onChange", onChanging: "onChanging" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], exportAs: ["smart-text-box"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TextBoxComponent, decorators: [{
            type: Directive,
            args: [{
                    exportAs: 'smart-text-box', selector: 'smart-text-box, [smart-text-box]',
                    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { animation: [{
                type: Input
            }], autoFocus: [{
                type: Input
            }], autoComplete: [{
                type: Input
            }], autoCompleteDelay: [{
                type: Input
            }], dataSource: [{
                type: Input
            }], disabled: [{
                type: Input
            }], displayLoadingIndicator: [{
                type: Input
            }], displayMember: [{
                type: Input
            }], displayMode: [{
                type: Input
            }], dropDownAppendTo: [{
                type: Input
            }], dropDownHeight: [{
                type: Input
            }], dropDownMaxHeight: [{
                type: Input
            }], dropDownMaxWidth: [{
                type: Input
            }], dropDownMinHeight: [{
                type: Input
            }], dropDownMinWidth: [{
                type: Input
            }], dropDownOpenMode: [{
                type: Input
            }], dropDownOverlay: [{
                type: Input
            }], dropDownPlaceholder: [{
                type: Input
            }], dropDownPosition: [{
                type: Input
            }], dropDownWidth: [{
                type: Input
            }], escKeyMode: [{
                type: Input
            }], enterKeyBehavior: [{
                type: Input
            }], form: [{
                type: Input
            }], hint: [{
                type: Input
            }], horizontalScrollBarVisibility: [{
                type: Input
            }], inputMember: [{
                type: Input
            }], inputPurpose: [{
                type: Input
            }], itemHeight: [{
                type: Input
            }], itemMeasureMode: [{
                type: Input
            }], items: [{
                type: Input
            }], itemTemplate: [{
                type: Input
            }], label: [{
                type: Input
            }], loadingIndicatorPlaceholder: [{
                type: Input
            }], loadingIndicatorPosition: [{
                type: Input
            }], unlockKey: [{
                type: Input
            }], locale: [{
                type: Input
            }], localizeFormatFunction: [{
                type: Input
            }], maxLength: [{
                type: Input
            }], minLength: [{
                type: Input
            }], messages: [{
                type: Input
            }], name: [{
                type: Input
            }], opened: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], readonly: [{
                type: Input
            }], rightToLeft: [{
                type: Input
            }], required: [{
                type: Input
            }], requiredMessage: [{
                type: Input
            }], selectAllOnFocus: [{
                type: Input
            }], theme: [{
                type: Input
            }], unfocusable: [{
                type: Input
            }], value: [{
                type: Input
            }], valueMember: [{
                type: Input
            }], verticalScrollBarVisibility: [{
                type: Input
            }], onChange: [{
                type: Output
            }], onChanging: [{
                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 (let propertyName in properties) {
            this.nativeElement[propertyName] = properties[propertyName];
        }
        return this.nativeElement;
    }
    /** @description  */
    get label() {
        return this.nativeElement ? this.nativeElement.label : undefined;
    }
    set label(value) {
        this.nativeElement ? this.nativeElement.label = 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;
                }
            }
        }
    }
}
ListItemsGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ListItemsGroupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
ListItemsGroupComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: ListItemsGroupComponent, selector: "smart-list-items-group, [smart-list-items-group]", inputs: { label: "label" }, exportAs: ["smart-list-items-group"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ListItemsGroupComponent, decorators: [{
            type: Directive,
            args: [{
                    exportAs: 'smart-list-items-group', selector: 'smart-list-items-group, [smart-list-items-group]'
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { label: [{
                type: Input
            }] } });

class TextBoxModule {
}
TextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
TextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TextBoxModule, declarations: [TextBoxComponent, ListItemComponent, ListItemsGroupComponent], exports: [TextBoxComponent, ListItemComponent, ListItemsGroupComponent] });
TextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TextBoxModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TextBoxModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [TextBoxComponent, ListItemComponent, ListItemsGroupComponent],
                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                    exports: [TextBoxComponent, ListItemComponent, ListItemsGroupComponent]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { ListItemComponent, ListItemsGroupComponent, Smart, TextBoxComponent, TextBoxModule };
//# sourceMappingURL=smart-webcomponents-angular-textbox.mjs.map
