smart-webcomponents-angular/fesm2015/smart-webcomponents-angular-button.mjs.map

[](https://jqwidgets.com/license/)

{"version":3,"file":"smart-webcomponents-angular-button.mjs","sources":["../../button/src/smart.element.ts","../../button/src/smart.button.ts","../../button/src/smart.repeatbutton.ts","../../button/src/smart.togglebutton.ts","../../button/src/smart.powerbutton.ts","../../button/src/smart.button.module.ts","../../button/src/smart-webcomponents-angular-button.ts"],"sourcesContent":["\ndeclare global {\n    interface Window {\n        Smart: any;\n}\n}\n\n\nimport { Directive, ElementRef, Input, Output, EventEmitter } from '@angular/core';\nimport { ElementRenderMode } from './../index';\n\n@Directive()\nexport class BaseElement {\n    constructor(ref: ElementRef) {\n        const that = this;\n        this.nativeElement = ref.nativeElement as any;\n\n        that.nativeElement.onAttached = () => {\n            that.onAttach.emit(that.nativeElement);\n        }\n\n        that.nativeElement.onDetached = () => {\n            that.onDetach.emit(that.nativeElement);\n        }\n    }\n\n    @Output() onCreate: EventEmitter<any> = new EventEmitter();\n    @Output() onReady: EventEmitter<any> = new EventEmitter();\n    @Output() onAttach: EventEmitter<any> = new EventEmitter();\n    @Output() onDetach: EventEmitter<any> = new EventEmitter();\n\n    public nativeElement: any;\n\n    public addEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions = false): void {\n        this.nativeElement.addEventListener(type, listener, options);\n\t}\n\n\tpublic removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions = false): void {\n\t\tthis.nativeElement.removeEventListener(type, listener, options);\n\t}\n\n\tpublic dispatchEvent(event: Event): boolean {\n\t\treturn this.nativeElement.dispatchEvent(event);\n\t}\n\n\tpublic blur(): void {\n\t\tthis.nativeElement.blur();\n\t}\n\n\tpublic click(): void {\n\t\tthis.nativeElement.click();\n\t}\n\n\tpublic focus(options?: FocusOptions): void {\n\t\tthis.nativeElement.focus(options);\n\t}\n\n/** @description Sets or gets the license.  */\n\t@Input()\n\tget license(): string {\n\t\treturn this.nativeElement ? this.nativeElement.license : undefined;\n\t}\n\tset license(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.license = value : undefined;\n\t}\n\t\n/** @description Sets or gets the language. Used in conjunction with the property messages.  */\n\t@Input()\n\tget locale(): string {\n\t\treturn this.nativeElement ? this.nativeElement.locale : undefined;\n\t}\n\tset locale(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.locale = value : undefined;\n\t}\n\n\t/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */\n\t@Input()\n\tget localizeFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;\n\t}\n\tset localizeFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;\n\t}\n\n\t/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.  */\n\t@Input()\n\tget messages(): any {\n\t\treturn this.nativeElement ? this.nativeElement.messages : undefined;\n\t}\n\tset messages(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.messages = value : undefined;\n\t}\n\n\t/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */\n\t@Input()\n\tget rightToLeft(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.rightToLeft : undefined;\n\t}\n\tset rightToLeft(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.rightToLeft = value : undefined;\n\t}\n\n\t/** @description Determines the theme. Theme defines the look of the element */\n\t@Input()\n\tget theme(): string {\n\t\treturn this.nativeElement ? this.nativeElement.theme : undefined;\n\t}\n\tset theme(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.theme = value : undefined;\n\t}\n}\n\nlet Smart: any;\nif (typeof window !== \"undefined\") {\n\tSmart = window.Smart;\n}\nexport { Smart };\n\n","import { Button } from './../index';\nimport { Animation, ClickMode, ElementRenderMode} from './../index';\nimport { Component, Directive, AfterViewInit, ElementRef, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, Output, EventEmitter, QueryList, ContentChildren } from '@angular/core';\nimport { BaseElement, Smart } from './smart.element';\nexport { Animation, ClickMode, ElementRenderMode} from './../index';\nexport { Smart } from './smart.element';\nexport { Button } from './../index';\n\n\nimport { RepeatButtonComponent } from './smart.repeatbutton';\n\nimport { ToggleButtonComponent } from './smart.togglebutton';\n\nimport { PowerButtonComponent } from './smart.powerbutton';\n\n@Directive({\n\texportAs: 'smart-button',\tselector: 'smart-button, [smart-button]'\n})\n\nexport class ButtonComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges {\n\n\tconstructor(ref: ElementRef<Button>) {\n\t\tsuper(ref);\n\t\tthis.nativeElement = ref.nativeElement as Button;\n\t}\n\n\tprivate eventHandlers: any[] = [];\n\n\tpublic declare nativeElement: Button;\n\t/** @description Creates the component on demand.\n\t * @param properties An optional object of properties, which will be added to the template binded ones.\n\t */\n\tpublic createComponent(properties = {}): any {\n    \tthis.nativeElement = <Button>document.createElement('smart-button');\n\t\tfor (let propertyName in properties) { \n \t\t\tthis.nativeElement[propertyName] = properties[propertyName];\n\t\t}\n\t\treturn this.nativeElement;\n\t}\n\t/** @description Specifies the animation mode for the element. When set to 'none', all animations are disabled. Use this property to enable, disable, or customize the animation behavior as needed. You can get the current animation mode or assign a new value to control how animations are applied. */\n\t@Input()\n\tget animation(): Animation | string {\n\t\treturn this.nativeElement ? this.nativeElement.animation : undefined;\n\t}\n\tset animation(value: Animation | string) {\n\t\tthis.nativeElement ? this.nativeElement.animation = value : undefined;\n\t}\n\n\t/** @description Specifies how the element responds to user click interactions, such as triggering specific actions, toggling states, or initiating custom event handling based on the selected mode. */\n\t@Input()\n\tget clickMode(): ClickMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.clickMode : undefined;\n\t}\n\tset clickMode(value: ClickMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.clickMode = value : undefined;\n\t}\n\n\t/** @description Specifies the inner content of the element, such as text, HTML, or child elements, determining what is displayed inside the element on the web page. */\n\t@Input()\n\tget content(): any {\n\t\treturn this.nativeElement ? this.nativeElement.content : undefined;\n\t}\n\tset content(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.content = value : undefined;\n\t}\n\n\t/** @description Determines whether the button is interactive. When enabled ('true'), users can click and interact with the button. When disabled ('false'), the button appears inactive and does not respond to user actions. */\n\t@Input()\n\tget disabled(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disabled : undefined;\n\t}\n\tset disabled(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disabled = value : undefined;\n\t}\n\n\t/** @description Updates the contents of the element by setting its inner HTML to the specified value. This replaces all existing child elements and text within the element with the provided HTML markup. Use caution when inserting user-generated content to avoid security risks such as cross-site scripting (XSS). */\n\t@Input()\n\tget innerHTML(): string {\n\t\treturn this.nativeElement ? this.nativeElement.innerHTML : undefined;\n\t}\n\tset innerHTML(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.innerHTML = value : undefined;\n\t}\n\n\t/** @description Handles the retrieval or assignment of the 'unlockKey', a unique value required to authorize and unlock access to the product's features or content. */\n\t@Input()\n\tget unlockKey(): string {\n\t\treturn this.nativeElement ? this.nativeElement.unlockKey : undefined;\n\t}\n\tset unlockKey(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.unlockKey = value : undefined;\n\t}\n\n\t/** @description Specifies the language code to use for retrieving or displaying messages. When set, it determines which localized message set from the messages property is used. Getting this property returns the current language code. Typically used for enabling multi-language support within the application. */\n\t@Input()\n\tget locale(): string {\n\t\treturn this.nativeElement ? this.nativeElement.locale : undefined;\n\t}\n\tset locale(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.locale = value : undefined;\n\t}\n\n\t/** @description A callback function that allows you to define or modify the formatting of messages returned by the Localization Module. Use this callback to customize how localized messages are structured or displayed before they are delivered to your application. */\n\t@Input()\n\tget localizeFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;\n\t}\n\tset localizeFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;\n\t}\n\n\t/** @description Defines or retrieves an object containing localized strings for the widget's user interface. This property allows you to customize text displayed by the widget for different languages and regions, and works in conjunction with the locale property to ensure proper localization. */\n\t@Input()\n\tget messages(): any {\n\t\treturn this.nativeElement ? this.nativeElement.messages : undefined;\n\t}\n\tset messages(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.messages = value : undefined;\n\t}\n\n\t/** @description Defines or retrieves the name attribute of the element. The name attribute uniquely identifies form elements when submitting data through an HTML form, allowing the server to associate input values with their corresponding fields. This attribute is essential for processing form data correctly. */\n\t@Input()\n\tget name(): string {\n\t\treturn this.nativeElement ? this.nativeElement.name : undefined;\n\t}\n\tset name(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.name = value : undefined;\n\t}\n\n\t/** @description If the custom element is set to readonly, users will not be able to modify its value or content through direct interaction (such as typing, selecting, or dragging). However, the element may still be focusable and its value can be changed programmatically via scripts. User-initiated actions that would normally alter its state are disabled. */\n\t@Input()\n\tget readonly(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.readonly : undefined;\n\t}\n\tset readonly(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.readonly = value : undefined;\n\t}\n\n\t/** @description Gets or sets a value that determines whether the element's alignment supports right-to-left (RTL) text direction, which is typically used by languages such as Arabic or Hebrew. When enabled, the element is properly aligned to display content for RTL locales. */\n\t@Input()\n\tget rightToLeft(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.rightToLeft : undefined;\n\t}\n\tset rightToLeft(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.rightToLeft = value : undefined;\n\t}\n\n\t/** @description Specifies the visual theme applied to the element, which controls its overall appearance, including colors, fonts, and styling. This property allows you to select a predefined look and feel for the element. */\n\t@Input()\n\tget theme(): string {\n\t\treturn this.nativeElement ? this.nativeElement.theme : undefined;\n\t}\n\tset theme(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.theme = value : undefined;\n\t}\n\n\t/** @description Specifies or retrieves the button's type attribute, which determines the button's behavior—such as \"submit\" to submit a form, \"reset\" to reset form fields, or \"button\" for a general-purpose clickable button. */\n\t@Input()\n\tget type(): string {\n\t\treturn this.nativeElement ? this.nativeElement.type : undefined;\n\t}\n\tset type(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.type = value : undefined;\n\t}\n\n\t/** @description Sets or retrieves the button's value attribute, which typically defines the text displayed on the button or the value submitted when the button is used in a form. */\n\t@Input()\n\tget value(): string {\n\t\treturn this.nativeElement ? this.nativeElement.value : undefined;\n\t}\n\tset value(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.value = value : undefined;\n\t}\n\n\t/** @description When set to true, this property prevents the element from receiving keyboard focus, making it impossible for users to select the element using the Tab key or other navigation methods. */\n\t@Input()\n\tget unfocusable(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.unfocusable : undefined;\n\t}\n\tset unfocusable(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.unfocusable = value : undefined;\n\t}\n\n\t/** @description The click event is triggered based on the selected clickMode, meaning the event behavior will vary depending on the current setting of the clickMode property.\n\t*  @param event. The custom event. \t*/\n\t@Output() onClick: EventEmitter<CustomEvent> = new EventEmitter();\n\n\n\tget isRendered(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.isRendered : false;\n\t}\n\n\tngOnInit() {\n\t}\n\n    ngAfterViewInit() {\n      const that = this;\n\n      that.onCreate.emit(that.nativeElement);\n\n\t\tif (Smart) Smart.Render();\n\n\t\tthis.nativeElement.classList.add('smart-angular');\n\n\t\tif (this.nativeElement.whenRendered) this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });\n\t\tthis.listen();\n\t}\n\n\tngOnDestroy() {\n\t\tthis.unlisten();\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (this.nativeElement && this.nativeElement.isRendered) {\n\t\t\tfor (const propName in changes) {\n\t\t\t\tif (changes.hasOwnProperty(propName)) {\n\t\t\t\t\tthis.nativeElement[propName] = changes[propName].currentValue;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/** @description Add event listeners. */\n\tprivate listen(): void {\n        const that = this;\n\t\tthat.eventHandlers['clickHandler'] = (event: CustomEvent) => { that.onClick.emit(event); }\n\t\tthat.nativeElement.addEventListener('click', that.eventHandlers['clickHandler']);\n\n\t}\n\n\t/** @description Remove event listeners. */\n\tprivate unlisten(): void {\n        const that = this;\n\t\tif (that.eventHandlers['clickHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('click', that.eventHandlers['clickHandler']);\n\t\t}\n\n\t}\n}\n","import { RepeatButton } from './../index';\nimport { Animation, ClickMode, ElementRenderMode} from './../index';\nimport { Component, Directive, AfterViewInit, ElementRef, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, Output, EventEmitter } from '@angular/core';\nimport { BaseElement, Smart } from './smart.element';\nexport { Animation, ClickMode, ElementRenderMode} from './../index';\nexport { Smart } from './smart.element';\nexport { RepeatButton } from './../index';\n\n\n@Directive({\n\texportAs: 'smart-repeat-button',\tselector: 'smart-repeat-button, [smart-repeat-button]'\n})\n\nexport class RepeatButtonComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges {\n\tconstructor(ref: ElementRef<RepeatButton>) {\n\t\tsuper(ref);\n\t\tthis.nativeElement = ref.nativeElement as RepeatButton;\n\t}\n\n\tprivate eventHandlers: any[] = [];\n\n\tpublic declare nativeElement: RepeatButton;\n\t/** @description Creates the component on demand.\n\t * @param properties An optional object of properties, which will be added to the template binded ones.\n\t */\n\tpublic createComponent(properties = {}): any {\n    \tthis.nativeElement = <RepeatButton>document.createElement('smart-repeat-button');\n\t\tfor (let propertyName in properties) { \n \t\t\tthis.nativeElement[propertyName] = properties[propertyName];\n\t\t}\n\t\treturn this.nativeElement;\n\t}\n\t/** @description Gets or sets the animation mode for the element. When this property is set to 'none', all animations are disabled. Otherwise, specifying a different value will enable and control the element’s animation behavior according to the selected mode. */\n\t@Input()\n\tget animation(): Animation | string {\n\t\treturn this.nativeElement ? this.nativeElement.animation : undefined;\n\t}\n\tset animation(value: Animation | string) {\n\t\tthis.nativeElement ? this.nativeElement.animation = value : undefined;\n\t}\n\n\t/** @description Defines how the button responds to user click interactions, determining whether actions are triggered on mouse press, release, or other specific conditions. */\n\t@Input()\n\tget clickMode(): ClickMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.clickMode : undefined;\n\t}\n\tset clickMode(value: ClickMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.clickMode = value : undefined;\n\t}\n\n\t/** @description Specifies the amount of time, in milliseconds, to wait between each repeated action or event. This determines how long the system pauses before triggering the repeat again. */\n\t@Input()\n\tget delay(): number {\n\t\treturn this.nativeElement ? this.nativeElement.delay : undefined;\n\t}\n\tset delay(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.delay = value : undefined;\n\t}\n\n\t/** @description Controls whether the ratio button is visible and can be interacted with. When enabled, users can use the ratio button; when disabled, the button is hidden or inactive. */\n\t@Input()\n\tget disabled(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disabled : undefined;\n\t}\n\tset disabled(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disabled = value : undefined;\n\t}\n\n\t/** @description Specifies the amount of time, in milliseconds, to wait before starting the first repeat iteration. This delay occurs only before the initial repetition and does not affect subsequent iterations. */\n\t@Input()\n\tget initialDelay(): number {\n\t\treturn this.nativeElement ? this.nativeElement.initialDelay : undefined;\n\t}\n\tset initialDelay(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.initialDelay = value : undefined;\n\t}\n\n\t/** @description Assigns the specified HTML markup to the element's inner content, replacing all existing child elements and text. Be cautious when inserting dynamic content to avoid potential security risks such as cross-site scripting (XSS). */\n\t@Input()\n\tget innerHTML(): string {\n\t\treturn this.nativeElement ? this.nativeElement.innerHTML : undefined;\n\t}\n\tset innerHTML(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.innerHTML = value : undefined;\n\t}\n\n\t/** @description Sets or retrieves the unlockKey used to authorize and enable access to the product. This key is required to unlock product features or functionalities that are otherwise restricted. */\n\t@Input()\n\tget unlockKey(): string {\n\t\treturn this.nativeElement ? this.nativeElement.unlockKey : undefined;\n\t}\n\tset unlockKey(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.unlockKey = value : undefined;\n\t}\n\n\t/** @description Specifies or retrieves the current language code (e.g., \"en\", \"fr\", \"es\") used for localizing content. This property works together with the messages property to determine which set of translations or text strings to display based on the selected language. Setting this value controls which messages from the messages object are shown to users. */\n\t@Input()\n\tget locale(): string {\n\t\treturn this.nativeElement ? this.nativeElement.locale : undefined;\n\t}\n\tset locale(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.locale = value : undefined;\n\t}\n\n\t/** @description Callback function associated with the localization module, typically invoked to handle language changes, load localized resources, or update interface text based on the selected locale. */\n\t@Input()\n\tget localizeFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;\n\t}\n\tset localizeFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;\n\t}\n\n\t/** @description Defines an object containing string values that represent the various states of password strength, such as \"weak,\" \"medium,\" and \"strong.\" Each property in the object corresponds to a specific password strength level, allowing for the customization of messages or labels displayed to users based on the evaluated strength of their password. */\n\t@Input()\n\tget messages(): any {\n\t\treturn this.nativeElement ? this.nativeElement.messages : undefined;\n\t}\n\tset messages(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.messages = value : undefined;\n\t}\n\n\t/** @description Retrieves the current name of the widget or assigns a new name to the widget. This property allows you to identify and reference the widget programmatically. */\n\t@Input()\n\tget name(): string {\n\t\treturn this.nativeElement ? this.nativeElement.name : undefined;\n\t}\n\tset name(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.name = value : undefined;\n\t}\n\n\t/** @description When the custom element is set to \"readonly\", all user interactions—such as input, edits, or selection—are disabled. The element's content is visible but cannot be modified or interacted with by the user. This ensures that the data remains unchanged while still allowing it to be displayed. */\n\t@Input()\n\tget readonly(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.readonly : undefined;\n\t}\n\tset readonly(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.readonly = value : undefined;\n\t}\n\n\t/** @description Specifies the visual theme to be applied to the element. The selected theme controls the element’s overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel across the interface. */\n\t@Input()\n\tget theme(): string {\n\t\treturn this.nativeElement ? this.nativeElement.theme : undefined;\n\t}\n\tset theme(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.theme = value : undefined;\n\t}\n\n\t/** @description If set to true, the element will be removed from the tab order and cannot receive keyboard focus. This means users will not be able to focus on the element using the keyboard (e.g., by pressing the Tab key), enhancing accessibility control. */\n\t@Input()\n\tget unfocusable(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.unfocusable : undefined;\n\t}\n\tset unfocusable(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.unfocusable = value : undefined;\n\t}\n\n\t/** @description Sets a new value for the widget or retrieves its current value, allowing for both updating and accessing the widget's data. */\n\t@Input()\n\tget value(): string {\n\t\treturn this.nativeElement ? this.nativeElement.value : undefined;\n\t}\n\tset value(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.value = value : undefined;\n\t}\n\n\t/** @description This event is triggered each time the user clicks on the specified element. It occurs after a complete click action, which includes both the pressing and releasing of the mouse button (typically the left button) over the element. The event provides access to click-related information, such as the mouse position and any modifier keys pressed during the click.\n\t*  @param event. The custom event. \t*/\n\t@Output() onClick: EventEmitter<CustomEvent> = new EventEmitter();\n\n\n\tget isRendered(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.isRendered : false;\n\t}\n\n\tngOnInit() {\n\t}\n\n    ngAfterViewInit() {\n      const that = this;\n\n      that.onCreate.emit(that.nativeElement);\n\n\t\tif (Smart) Smart.Render();\n\n\t\tthis.nativeElement.classList.add('smart-angular');\n\n\t\tif (this.nativeElement.whenRendered) this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });\n\t\tthis.listen();\n\t}\n\n\tngOnDestroy() {\n\t\tthis.unlisten();\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (this.nativeElement && this.nativeElement.isRendered) {\n\t\t\tfor (const propName in changes) {\n\t\t\t\tif (changes.hasOwnProperty(propName)) {\n\t\t\t\t\tthis.nativeElement[propName] = changes[propName].currentValue;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/** @description Add event listeners. */\n\tprivate listen(): void {\n        const that = this;\n\t\tthat.eventHandlers['clickHandler'] = (event: CustomEvent) => { that.onClick.emit(event); }\n\t\tthat.nativeElement.addEventListener('click', that.eventHandlers['clickHandler']);\n\n\t}\n\n\t/** @description Remove event listeners. */\n\tprivate unlisten(): void {\n        const that = this;\n\t\tif (that.eventHandlers['clickHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('click', that.eventHandlers['clickHandler']);\n\t\t}\n\n\t}\n}\n","import { ToggleButton } from './../index';\nimport { Animation, ClickMode, ElementRenderMode} from './../index';\nimport { Component, Directive, AfterViewInit, ElementRef, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, Output, EventEmitter } from '@angular/core';\nimport { BaseElement, Smart } from './smart.element';\nexport { Animation, ClickMode, ElementRenderMode} from './../index';\nexport { Smart } from './smart.element';\nexport { ToggleButton } from './../index';\n\n\n@Directive({\n\texportAs: 'smart-toggle-button',\tselector: 'smart-toggle-button, [smart-toggle-button]'\n})\n\nexport class ToggleButtonComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges {\n\tconstructor(ref: ElementRef<ToggleButton>) {\n\t\tsuper(ref);\n\t\tthis.nativeElement = ref.nativeElement as ToggleButton;\n\t}\n\n\tprivate eventHandlers: any[] = [];\n\n\tpublic declare nativeElement: ToggleButton;\n\t/** @description Creates the component on demand.\n\t * @param properties An optional object of properties, which will be added to the template binded ones.\n\t */\n\tpublic createComponent(properties = {}): any {\n    \tthis.nativeElement = <ToggleButton>document.createElement('smart-toggle-button');\n\t\tfor (let propertyName in properties) { \n \t\t\tthis.nativeElement[propertyName] = properties[propertyName];\n\t\t}\n\t\treturn this.nativeElement;\n\t}\n\t/** @description Specifies or retrieves the current animation mode for the element. When set to 'none', all animations are disabled, and the element will appear or update instantly without any animated transitions. If a different value is assigned, the element will use the corresponding animation effect during state changes. */\n\t@Input()\n\tget animation(): Animation | string {\n\t\treturn this.nativeElement ? this.nativeElement.animation : undefined;\n\t}\n\tset animation(value: Animation | string) {\n\t\tthis.nativeElement ? this.nativeElement.animation = value : undefined;\n\t}\n\n\t/** @description Defines or updates the current state of the element, controlling its behavior, appearance, or functionality based on the specified value. This property determines how the element responds to user interactions and can trigger associated changes in the interface or underlying logic. */\n\t@Input()\n\tget checked(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.checked : undefined;\n\t}\n\tset checked(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.checked = value : undefined;\n\t}\n\n\t/** @description Specifies how the button responds to user click interactions, determining the trigger conditions for its click event (e.g., on mouse down, on mouse up, or after a complete click). */\n\t@Input()\n\tget clickMode(): ClickMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.clickMode : undefined;\n\t}\n\tset clickMode(value: ClickMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.clickMode = value : undefined;\n\t}\n\n\t/** @description Determines whether the ratio button is displayed and interactive. Set to true to show and enable the button, or false to hide and disable it. */\n\t@Input()\n\tget disabled(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disabled : undefined;\n\t}\n\tset disabled(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disabled = value : undefined;\n\t}\n\n\t/** @description Assigns the specified HTML markup to the element’s content, replacing all existing child elements and text within the element. This allows dynamic insertion of HTML structure and content inside the targeted element. */\n\t@Input()\n\tget innerHTML(): string {\n\t\treturn this.nativeElement ? this.nativeElement.innerHTML : undefined;\n\t}\n\tset innerHTML(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.innerHTML = value : undefined;\n\t}\n\n\t/** @description Sets or retrieves the value of the unlockKey, a unique code or token required to authorize and unlock access to the product’s features or functionality. */\n\t@Input()\n\tget unlockKey(): string {\n\t\treturn this.nativeElement ? this.nativeElement.unlockKey : undefined;\n\t}\n\tset unlockKey(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.unlockKey = value : undefined;\n\t}\n\n\t/** @description Specifies or retrieves the current language setting. This property works together with the messages property to determine which localized messages are displayed. When you set this property, the component selects the appropriate set of messages corresponding to the chosen language. */\n\t@Input()\n\tget locale(): string {\n\t\treturn this.nativeElement ? this.nativeElement.locale : undefined;\n\t}\n\tset locale(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.locale = value : undefined;\n\t}\n\n\t/** @description Callback function associated with the localization module, typically used to handle events or operations such as language changes, text translations, or localization updates within the application. */\n\t@Input()\n\tget localizeFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;\n\t}\n\tset localizeFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;\n\t}\n\n\t/** @description Sets or retrieves an object containing the text strings displayed in the widget, allowing for easy localization and customization of interface messages. This property works together with the locale property to provide translations and adapt the widget's language to different regions. Use this object to define or override the default text for various UI elements, tooltips, messages, and labels within the widget. */\n\t@Input()\n\tget messages(): any {\n\t\treturn this.nativeElement ? this.nativeElement.messages : undefined;\n\t}\n\tset messages(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.messages = value : undefined;\n\t}\n\n\t/** @description Gets or assigns the name of the widget. This property allows you to retrieve the current name of the widget or specify a new name for identification and reference purposes within the application. */\n\t@Input()\n\tget name(): string {\n\t\treturn this.nativeElement ? this.nativeElement.name : undefined;\n\t}\n\tset name(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.name = value : undefined;\n\t}\n\n\t/** @description If the custom element has the 'readonly' attribute set, its content cannot be modified by the user. However, users may still be able to interact with the element in other ways, such as selecting or copying its content. No input changes or value modifications are permitted while the element is in the readonly state. */\n\t@Input()\n\tget readonly(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.readonly : undefined;\n\t}\n\tset readonly(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.readonly = value : undefined;\n\t}\n\n\t/** @description Specifies the theme to be applied. The selected theme controls the visual appearance and styling of the element, including colors, fonts, spacing, and other design-related properties. */\n\t@Input()\n\tget theme(): string {\n\t\treturn this.nativeElement ? this.nativeElement.theme : undefined;\n\t}\n\tset theme(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.theme = value : undefined;\n\t}\n\n\t/** @description When set to true, the element will be removed from the tab order and cannot receive focus via keyboard or mouse interactions. */\n\t@Input()\n\tget unfocusable(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.unfocusable : undefined;\n\t}\n\tset unfocusable(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.unfocusable = value : undefined;\n\t}\n\n\t/** @description Gets the current value of the widget or sets a new value for the widget. Use this property to retrieve what the widget currently holds or to update it programmatically. */\n\t@Input()\n\tget value(): string {\n\t\treturn this.nativeElement ? this.nativeElement.value : undefined;\n\t}\n\tset value(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.value = value : undefined;\n\t}\n\n\t/** @description This event is triggered whenever the state of the widget changes—specifically, when the user checks or unchecks the widget. It allows you to respond to any change in the widget’s selection status.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tvalue, \toldValue, \tchangeType)\n\t*   value - A boolean value indicating the new state of the button ( checked or not ).\n\t*   oldValue - A boolean value indicating the previous state of the button ( checked or not ).\n\t*   changeType - A string flag indicating whether the change event was triggered via API or an event.\n\t*/\n\t@Output() onChange: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered whenever the widget transitions into a checked state, such as when a user selects or activates it. It allows developers to respond to changes in the widget's selection status.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tchangeType)\n\t*   changeType - A string flag indicating whether the change event was triggered via API or an event.\n\t*/\n\t@Output() onCheckValue: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the user deselects or unchecks the widget, typically by clicking or tapping on it. It indicates that the widget has transitioned from a checked or selected state to an unchecked or unselected state. Developers can use this event to execute custom logic or update the application’s interface in response to the change.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tchangeType)\n\t*   changeType - A string flag indicating whether the change event was triggered via API or an event.\n\t*/\n\t@Output() onUncheckValue: EventEmitter<CustomEvent> = new EventEmitter();\n\n\n\tget isRendered(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.isRendered : false;\n\t}\n\n\tngOnInit() {\n\t}\n\n    ngAfterViewInit() {\n      const that = this;\n\n      that.onCreate.emit(that.nativeElement);\n\n\t\tif (Smart) Smart.Render();\n\n\t\tthis.nativeElement.classList.add('smart-angular');\n\n\t\tif (this.nativeElement.whenRendered) this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });\n\t\tthis.listen();\n\t}\n\n\tngOnDestroy() {\n\t\tthis.unlisten();\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (this.nativeElement && this.nativeElement.isRendered) {\n\t\t\tfor (const propName in changes) {\n\t\t\t\tif (changes.hasOwnProperty(propName)) {\n\t\t\t\t\tthis.nativeElement[propName] = changes[propName].currentValue;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/** @description Add event listeners. */\n\tprivate listen(): void {\n        const that = this;\n\t\tthat.eventHandlers['changeHandler'] = (event: CustomEvent) => { that.onChange.emit(event); }\n\t\tthat.nativeElement.addEventListener('change', that.eventHandlers['changeHandler']);\n\n\t\tthat.eventHandlers['checkValueHandler'] = (event: CustomEvent) => { that.onCheckValue.emit(event); }\n\t\tthat.nativeElement.addEventListener('checkValue', that.eventHandlers['checkValueHandler']);\n\n\t\tthat.eventHandlers['uncheckValueHandler'] = (event: CustomEvent) => { that.onUncheckValue.emit(event); }\n\t\tthat.nativeElement.addEventListener('uncheckValue', that.eventHandlers['uncheckValueHandler']);\n\n\t}\n\n\t/** @description Remove event listeners. */\n\tprivate unlisten(): void {\n        const that = this;\n\t\tif (that.eventHandlers['changeHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['checkValueHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('checkValue', that.eventHandlers['checkValueHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['uncheckValueHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('uncheckValue', that.eventHandlers['uncheckValueHandler']);\n\t\t}\n\n\t}\n}\n","import { PowerButton } from './../index';\nimport { Animation, ClickMode, ElementRenderMode} from './../index';\nimport { Component, Directive, AfterViewInit, ElementRef, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, forwardRef, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';\nimport { BaseElement, Smart } from './smart.element';\nexport { Animation, ClickMode, ElementRenderMode} from './../index';\nexport { Smart } from './smart.element';\nexport { PowerButton } from './../index';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n\n\nconst CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => PowerButtonComponent),\n    multi: true\n}\n\n@Directive({\n\texportAs: 'smart-power-button',\tselector: 'smart-power-button, [smart-power-button]',\n\tproviders: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]\n\n})\n\nexport class PowerButtonComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges, ControlValueAccessor {\n\tconstructor(ref: ElementRef<PowerButton>) {\n\t\tsuper(ref);\n\t\tthis.nativeElement = ref.nativeElement as PowerButton;\n\t}\n\n\tprivate eventHandlers: any[] = [];\n\n\tpublic declare nativeElement: PowerButton;\n\t/** @description Creates the component on demand.\n\t * @param properties An optional object of properties, which will be added to the template binded ones.\n\t */\n\tpublic createComponent(properties = {}): any {\n    \tthis.nativeElement = <PowerButton>document.createElement('smart-power-button');\n\t\tfor (let propertyName in properties) { \n \t\t\tthis.nativeElement[propertyName] = properties[propertyName];\n\t\t}\n\t\treturn this.nativeElement;\n\t}\n        /**\n        * @description\n        * The registered callback function called when a change event occurs on the form elements.\n        */\n       _onChange: (value: any) => void = () => {};\n        /**\n        * @description\n        * The registered callback function called when a blur event occurs on the form elements.\n        */\n       _onTouched: () => any = () => {};\n\n\n\t/** @description Specifies or retrieves the current animation mode for the element. When the property is set to 'none', all animations are disabled and the element will render without any animated transitions or effects. Otherwise, animations will be applied according to the specified mode. */\n\t@Input()\n\tget animation(): Animation | string {\n\t\treturn this.nativeElement ? this.nativeElement.animation : undefined;\n\t}\n\tset animation(value: Animation | string) {\n\t\tthis.nativeElement ? this.nativeElement.animation = value : undefined;\n\t}\n\n\t/** @description Sets or retrieves the current checked state of the element, indicating whether it is selected, unselected, or in an indeterminate state. */\n\t@Input()\n\tget checked(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.checked : undefined;\n\t}\n\tset checked(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.checked = value : undefined;\n\t}\n\n\t/** @description Specifies how the button responds to user clicks, determining the interaction behavior such as whether the action is triggered on mouse press, release, or another click event. */\n\t@Input()\n\tget clickMode(): ClickMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.clickMode : undefined;\n\t}\n\tset clickMode(value: ClickMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.clickMode = value : undefined;\n\t}\n\n\t/** @description Controls whether the power button is active or inactive. When enabled, the power button is functional and can be used to perform its designated action. When disabled, the power button is unresponsive and cannot be used. */\n\t@Input()\n\tget disabled(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disabled : undefined;\n\t}\n\tset disabled(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disabled = value : undefined;\n\t}\n\n\t/** @description Gets or sets the unlockKey property, a unique string used to authenticate and unlock access to the product’s features or full version. This key must be valid to successfully enable restricted functionality. */\n\t@Input()\n\tget unlockKey(): string {\n\t\treturn this.nativeElement ? this.nativeElement.unlockKey : undefined;\n\t}\n\tset unlockKey(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.unlockKey = value : undefined;\n\t}\n\n\t/** @description Specifies the current language to be used for message localization. This property determines which language's messages are retrieved from the messages property. You can use it to set or get the active language code (e.g., 'en', 'fr', 'es'), ensuring the appropriate localized messages are displayed to users. */\n\t@Input()\n\tget locale(): string {\n\t\treturn this.nativeElement ? this.nativeElement.locale : undefined;\n\t}\n\tset locale(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.locale = value : undefined;\n\t}\n\n\t/** @description Callback function associated with the localization module, typically used to handle language changes, load translations, or update content based on the selected locale. */\n\t@Input()\n\tget localizeFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;\n\t}\n\tset localizeFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;\n\t}\n\n\t/** @description Defines or retrieves an object containing the text strings used within the widget, allowing for customization and localization of user interface elements. This property works together with the locale setting to display the widget's labels, messages, and other textual content in the appropriate language. The provided object maps text keys to their localized string values. */\n\t@Input()\n\tget messages(): any {\n\t\treturn this.nativeElement ? this.nativeElement.messages : undefined;\n\t}\n\tset messages(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.messages = value : undefined;\n\t}\n\n\t/** @description Gets the current name of the widget or sets a new name for the widget. This property allows you to retrieve the widget's identifier or assign a custom name to help distinguish it from other widgets in your application. */\n\t@Input()\n\tget name(): string {\n\t\treturn this.nativeElement ? this.nativeElement.name : undefined;\n\t}\n\tset name(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.name = value : undefined;\n\t}\n\n\t/** @description When the custom element is set to readonly, its content cannot be modified by the user either through direct input or interaction with form controls within the element. However, users may still be able to focus, highlight, or copy its content, depending on its implementation. No actions or events that would change the element’s value or state will be permitted. */\n\t@Input()\n\tget readonly(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.readonly : undefined;\n\t}\n\tset readonly(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.readonly = value : undefined;\n\t}\n\n\t/** @description Specifies the theme to be applied to the element. The selected theme controls the visual style, including colors, fonts, and overall appearance, ensuring a consistent look and feel across the component. */\n\t@Input()\n\tget theme(): string {\n\t\treturn this.nativeElement ? this.nativeElement.theme : undefined;\n\t}\n\tset theme(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.theme = value : undefined;\n\t}\n\n\t/** @description If set to true, the element will be excluded from the tab sequence and cannot receive keyboard focus. This means users will not be able to navigate to the element using the Tab key or programmatically set focus to it. */\n\t@Input()\n\tget unfocusable(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.unfocusable : undefined;\n\t}\n\tset unfocusable(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.unfocusable = value : undefined;\n\t}\n\n\t/** @description Retrieves the current value of the widget or assigns a new value to it. This property allows you to read the widget's state or update it programmatically. */\n\t@Input()\n\tget value(): string {\n\t\treturn this.nativeElement ? this.nativeElement.value : undefined;\n\t}\n\tset value(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.value = value : undefined;\n\t}\n\n\t/** @description This event is triggered whenever the widget's state changes, specifically when it becomes either checked or unchecked. It allows you to handle actions in response to the user selecting or deselecting the widget.\n\t*  @param event. The custom event. \t*/\n\t@Output() onChange: EventEmitter<CustomEvent> = new EventEmitter();\n\n\n\tget isRendered(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.isRendered : false;\n\t}\n\n\tngOnInit() {\n\t}\n\n    ngAfterViewInit() {\n      const that = this;\n\n      that.onCreate.emit(that.nativeElement);\n\n\t\tif (Smart) Smart.Render();\n\n\t\tthis.nativeElement.classList.add('smart-angular');\n\n\t\tif (this.nativeElement.whenRendered) this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });\n\t\tthis.listen();\n\t}\n\n\tngOnDestroy() {\n\t\tthis.unlisten();\n\t}\n\n\t_initialChange = true; \n\n\tget ngValue(): any {\n\t\tif (!this.nativeElement) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst value = this.nativeElement.value;\n\t\treturn value;\n\t}\n\n\tset ngValue(value: any) {\n\t\tif (this.nativeElement) {\n\t\t    this.writeValue(value);\n\t\t}\n\t}\n\n\twriteValue(value: any): void {\n        const that = this;\n        const normalizedValue = value == null ? '' : value;\n\n\t\tthat.nativeElement.whenRendered(() => {\n\t\t\tthat.value = normalizedValue;\n\t\t\tif (that._initialChange === false) {\n\t    \t\tthat._onChange(that.value);\n            }\n\t\t});\n\t}\n\n\tregisterOnChange(fn: any): void {\n\t\tthis._onChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any): void {\n\t\tthis._onTouched = fn;\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (this.nativeElement && this.nativeElement.isRendered) {\n\t\t\tfor (const propName in changes) {\n\t\t\t\tif (changes.hasOwnProperty(propName)) {\n\t\t\t\t\tthis.nativeElement[propName] = changes[propName].currentValue;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/** @description Add event listeners. */\n\tprivate listen(): void {\n        const that = this;\n\t\tthat.eventHandlers['changeHandler'] = (event: CustomEvent) => { that.onChange.emit(event); }\n\t\tthat.nativeElement.addEventListener('change', that.eventHandlers['changeHandler']);\n\n\n        that.eventHandlers['changeModelHandler'] = (event: Event) => {\n            that._initialChange = false;\n            that._onChange(that.nativeElement.value);\n        };\n        that.eventHandlers['blurModelHandler'] = (event: Event) => {\n            that._onTouched();\n        };\n        that.nativeElement.whenRendered(() => {\n            if (that.nativeElement.querySelector('input')) {\n                that.eventHandlers['keyupModelHandler'] = (event) => {\n                    setTimeout(() => { that.eventHandlers['changeModelHandler'](event); }, 50);\n                };\n\n                that.nativeElement.querySelector('input').addEventListener('keyup', that.eventHandlers['keyupModelHandler']);\n            }\n        });\n\t\tthat.nativeElement.addEventListener('change', that.eventHandlers['changeModelHandler']);\n\t\tthat.nativeElement.addEventListener('blur', that.eventHandlers['blurModelHandler']);\n\t}\n\n\t/** @description Remove event listeners. */\n\tprivate unlisten(): void {\n        const that = this;\n\