UNPKG

smart-webcomponents-angular

Version:

[![Price](https://img.shields.io/badge/price-COMMERCIAL-0098f7.svg)](https://jqwidgets.com/license/)

576 lines (568 loc) 31.3 kB
if(typeof window !== 'undefined') { if (!window['Smart']) { window['Smart'] = { RenderMode: 'manual' }; } else { window['Smart'].RenderMode = 'manual'; } } import './../source/modules/smart.passwordtextbox'; 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(() => PasswordTextBoxComponent), multi: true }; class PasswordTextBoxComponent 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 of the element is modified by the user or through programmatic changes. It occurs after the change has been committed, allowing you to respond to updates in the element’s value. * @param event. The custom event. Custom event was created with: event.detail( oldValue, value) * oldValue - The previous value of the element before it was changed. * value - The new value of the element. */ this.onChange = new EventEmitter(); /** @description This event is triggered whenever a key is released (key up) within the TextBox, but only if the TextBox's value has changed as a result of the key press. This ensures that the event fires solely when user input modifies the content, preventing unnecessary triggers when the value remains unchanged. * @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-password-text-box'); for (let propertyName in properties) { this.nativeElement[propertyName] = properties[propertyName]; } return this.nativeElement; } /** @description Specifies or retrieves the current animation mode. When set to 'none', all animations are disabled. If set to any other supported value, animations will be enabled according to the specified mode. */ get animation() { return this.nativeElement ? this.nativeElement.animation : undefined; } set animation(value) { this.nativeElement ? this.nativeElement.animation = value : undefined; } /** @description Indicates that the element will automatically receive keyboard focus as soon as the page is loaded, allowing users to interact with it immediately without clicking or tabbing to it. This is often used to improve accessibility and streamline user interaction with form fields or interactive elements. */ get autoFocus() { return this.nativeElement ? this.nativeElement.autoFocus : undefined; } set autoFocus(value) { this.nativeElement ? this.nativeElement.autoFocus = value : undefined; } /** @description Determines whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element becomes unresponsive to user actions such as clicks or input. */ get disabled() { return this.nativeElement ? this.nativeElement.disabled : undefined; } set disabled(value) { this.nativeElement ? this.nativeElement.disabled = value : undefined; } /** @description Defines the action that occurs when the "Enter" key is pressed within the input field. By default, the mode is set to "submit", meaning pressing "Enter" will attempt to submit the associated form. You can customize this behavior by specifying alternative modes, such as preventing form submission or triggering a custom handler. */ 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 (referred to as its "form owner"). The value of this attribute should be the id of a element within the same HTML document. This allows the element to be associated with a form even if it is not nested inside the tags. */ get form() { return this.nativeElement ? this.nativeElement.form : undefined; } set form(value) { this.nativeElement ? this.nativeElement.form = value : undefined; } /** @description Displays supplemental helper text beneath the element, visible only while the element is focused. This text provides additional guidance or context to users during interaction. */ get hint() { return this.nativeElement ? this.nativeElement.hint : undefined; } set hint(value) { this.nativeElement ? this.nativeElement.hint = value : undefined; } /** @description Displays a label positioned above the input element. This label remains persistently visible, providing a clear and accessible description of the input’s purpose at all times. */ get label() { return this.nativeElement ? this.nativeElement.label : undefined; } set label(value) { this.nativeElement ? this.nativeElement.label = value : undefined; } /** @description Gets or sets the unlockKey, a unique key required to activate and access the product. Use this property to retrieve the current unlock key or assign a new one to enable product unlocking functionality. */ get unlockKey() { return this.nativeElement ? this.nativeElement.unlockKey : undefined; } set unlockKey(value) { this.nativeElement ? this.nativeElement.unlockKey = value : undefined; } /** @description Specifies or retrieves the current language setting. This property determines which set of localized text strings from the messages property is used for display. When you set the language, the corresponding messages are shown to users in that language. When you get the language, it returns the currently active language code. */ get locale() { return this.nativeElement ? this.nativeElement.locale : undefined; } set locale(value) { this.nativeElement ? this.nativeElement.locale = value : undefined; } /** @description Callback function that allows you to customize the formatting of messages returned by the Localization Module. This enables you to modify or enhance localized message strings—such as adding dynamic data, adjusting placeholders, or changing text structure—before they are displayed to users. */ 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 in the input field. If set, the user cannot enter more characters than this limit. This constraint helps enforce data validation and control the input length. */ get maxLength() { return this.nativeElement ? this.nativeElement.maxLength : undefined; } set maxLength(value) { this.nativeElement ? this.nativeElement.maxLength = value : undefined; } /** @description Defines an object where each property corresponds to a specific password strength state, with associated string values that describe or label each state (e.g., "weak," "moderate," "strong"). This object is typically used to display feedback messages or labels reflecting the current strength of a user's password during input. */ get messages() { return this.nativeElement ? this.nativeElement.messages : undefined; } set messages(value) { this.nativeElement ? this.nativeElement.messages = value : undefined; } /** @description Specifies or retrieves the minimum number of characters required for user input. When set, the user must enter at least this many characters for the input to be considered valid. */ get minLength() { return this.nativeElement ? this.nativeElement.minLength : undefined; } set minLength(value) { this.nativeElement ? this.nativeElement.minLength = value : undefined; } /** @description Sets or retrieves the value of the element's name attribute. The name attribute is used to identify form fields when submitting HTML forms, allowing the data entered in the element to be included in the form's submission with the specified name as the key. This is essential for server-side processing of form data. */ get name() { return this.nativeElement ? this.nativeElement.name : undefined; } set name(value) { this.nativeElement ? this.nativeElement.name = value : undefined; } /** @description With this property, you can specify a custom callback function that evaluates the strength of a password. The function should accept the current password as input and return a string representing the assessed strength level. The returned string must be one of the following predefined values: 'short', 'weak', 'far', 'good', or 'strong'. This value will be used by the component to indicate how secure the entered password is according to your custom logic. */ get passwordStrength() { return this.nativeElement ? this.nativeElement.passwordStrength : undefined; } set passwordStrength(value) { this.nativeElement ? this.nativeElement.passwordStrength = value : undefined; } /** @description This is the text that appears within the element when it is empty, serving as a prompt or hint to the user about the expected input. Once the user enters a value, this placeholder text disappears. */ get placeholder() { return this.nativeElement ? this.nativeElement.placeholder : undefined; } set placeholder(value) { this.nativeElement ? this.nativeElement.placeholder = value : undefined; } /** @description Enhances the requirement that the user must provide a value for this element before the form can be submitted. If this field is left empty, the form submission will be blocked and the user will be prompted to enter a value. This ensures that the input is mandatory, helping maintain data completeness and integrity. */ get required() { return this.nativeElement ? this.nativeElement.required : undefined; } set required(value) { this.nativeElement ? this.nativeElement.required = value : undefined; } /** @description Sets or retrieves a value specifying whether the element’s alignment is adjusted to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element’s content and layout are adapted for proper display in locales that use right-to-left text direction. */ get rightToLeft() { return this.nativeElement ? this.nativeElement.rightToLeft : undefined; } set rightToLeft(value) { this.nativeElement ? this.nativeElement.rightToLeft = value : undefined; } /** @description Determines if the entire content of the input field should be automatically highlighted (selected) when the input receives focus, making it easier for users to quickly 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 whether the password icon (such as an eye symbol to show or hide password text) is displayed in the input field. */ get showPasswordIcon() { return this.nativeElement ? this.nativeElement.showPasswordIcon : undefined; } set showPasswordIcon(value) { this.nativeElement ? this.nativeElement.showPasswordIcon = value : undefined; } /** @description Specifies whether a tooltip displaying the password strength indicator will be visible to the user during password entry. When enabled, this tooltip provides real-time feedback on the strength of the entered password. */ get showPasswordStrength() { return this.nativeElement ? this.nativeElement.showPasswordStrength : undefined; } set showPasswordStrength(value) { this.nativeElement ? this.nativeElement.showPasswordStrength = value : undefined; } /** @description Specifies the visual theme to be applied. The theme controls the overall appearance and style—including colors, fonts, and backgrounds—of the element for a consistent look and feel. */ get theme() { return this.nativeElement ? this.nativeElement.theme : undefined; } set theme(value) { this.nativeElement ? this.nativeElement.theme = value : undefined; } /** @description Specifies whether the Tooltip component should display an arrow pointing to the target element. Setting this option to true will show the arrow, while false will hide it. */ get tooltipArrow() { return this.nativeElement ? this.nativeElement.tooltipArrow : undefined; } set tooltipArrow(value) { this.nativeElement ? this.nativeElement.tooltipArrow = value : undefined; } /** @description Specifies the amount of time, in milliseconds, to wait before displaying the tooltip after a user interaction (such as hovering or focusing on an element). */ get tooltipDelay() { return this.nativeElement ? this.nativeElement.tooltipDelay : undefined; } set tooltipDelay(value) { this.nativeElement ? this.nativeElement.tooltipDelay = value : undefined; } /** @description Specifies the placement of the tooltip relative to the target element, such as "top", "bottom", "left", or "right". This controls where the tooltip will appear when it is displayed. */ get tooltipPosition() { return this.nativeElement ? this.nativeElement.tooltipPosition : undefined; } set tooltipPosition(value) { this.nativeElement ? this.nativeElement.tooltipPosition = value : undefined; } /** @description Specifies a custom template for rendering the tooltip’s content, allowing you to define the layout, formatting, and dynamic data within the tooltip. This enables greater control over the appearance and behavior of the tooltip beyond the default content. */ get tooltipTemplate() { return this.nativeElement ? this.nativeElement.tooltipTemplate : undefined; } set tooltipTemplate(value) { this.nativeElement ? this.nativeElement.tooltipTemplate = value : undefined; } /** @description Indicates whether the element should be excluded from keyboard navigation and cannot receive focus. If set to true, users will not be able to focus on the element using the keyboard or mouse interactions. */ 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 whether an argument is provided. Useful for updating or accessing the element’s data within a form or component. */ get value() { return this.nativeElement ? this.nativeElement.value : undefined; } set value(value) { this.nativeElement ? this.nativeElement.value = value : undefined; } /** @description Sets keyboard focus to the specified element, making it the active element on the page and enabling user input or interaction through the keyboard. This is commonly used to improve accessibility, guide user workflow, or trigger specific UI behaviors. */ focus() { if (this.nativeElement.isRendered) { this.nativeElement.focus(); } else { this.nativeElement.whenRendered(() => { this.nativeElement.focus(); }); } } /** @description This method resets the input field to its initial value, discarding any changes made by the user and restoring the input's original state as specified when the component or element was first rendered. */ 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']); } } } PasswordTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: PasswordTextBoxComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); PasswordTextBoxComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: PasswordTextBoxComponent, selector: "smart-password-text-box, [smart-password-text-box]", inputs: { animation: "animation", autoFocus: "autoFocus", disabled: "disabled", enterKeyBehavior: "enterKeyBehavior", form: "form", hint: "hint", label: "label", unlockKey: "unlockKey", locale: "locale", localizeFormatFunction: "localizeFormatFunction", maxLength: "maxLength", messages: "messages", minLength: "minLength", name: "name", passwordStrength: "passwordStrength", placeholder: "placeholder", required: "required", rightToLeft: "rightToLeft", selectAllOnFocus: "selectAllOnFocus", showPasswordIcon: "showPasswordIcon", showPasswordStrength: "showPasswordStrength", theme: "theme", tooltipArrow: "tooltipArrow", tooltipDelay: "tooltipDelay", tooltipPosition: "tooltipPosition", tooltipTemplate: "tooltipTemplate", unfocusable: "unfocusable", value: "value" }, outputs: { onChange: "onChange", onChanging: "onChanging" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], exportAs: ["smart-password-text-box"], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: PasswordTextBoxComponent, decorators: [{ type: Directive, args: [{ exportAs: 'smart-password-text-box', selector: 'smart-password-text-box, [smart-password-text-box]', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR] }] }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { animation: [{ type: Input }], autoFocus: [{ type: Input }], disabled: [{ type: Input }], enterKeyBehavior: [{ type: Input }], form: [{ type: Input }], hint: [{ type: Input }], label: [{ type: Input }], unlockKey: [{ type: Input }], locale: [{ type: Input }], localizeFormatFunction: [{ type: Input }], maxLength: [{ type: Input }], messages: [{ type: Input }], minLength: [{ type: Input }], name: [{ type: Input }], passwordStrength: [{ type: Input }], placeholder: [{ type: Input }], required: [{ type: Input }], rightToLeft: [{ type: Input }], selectAllOnFocus: [{ type: Input }], showPasswordIcon: [{ type: Input }], showPasswordStrength: [{ type: Input }], theme: [{ type: Input }], tooltipArrow: [{ type: Input }], tooltipDelay: [{ type: Input }], tooltipPosition: [{ type: Input }], tooltipTemplate: [{ type: Input }], unfocusable: [{ type: Input }], value: [{ type: Input }], onChange: [{ type: Output }], onChanging: [{ type: Output }] } }); class PasswordTextBoxModule { } PasswordTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: PasswordTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); PasswordTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: PasswordTextBoxModule, declarations: [PasswordTextBoxComponent], exports: [PasswordTextBoxComponent] }); PasswordTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: PasswordTextBoxModule }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: PasswordTextBoxModule, decorators: [{ type: NgModule, args: [{ declarations: [PasswordTextBoxComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], exports: [PasswordTextBoxComponent] }] }] }); /** * Generated bundle index. Do not edit. */ export { PasswordTextBoxComponent, PasswordTextBoxModule, Smart }; //# sourceMappingURL=smart-webcomponents-angular-passwordtextbox.mjs.map