smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
429 lines (421 loc) • 20.8 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.rating';
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(() => RatingComponent),
multi: true
};
class RatingComponent 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 user adjusts the slider to a new value, either by dragging the handle or using keyboard controls. It fires each time the slider's value is updated, allowing you to respond dynamically to user input and capture the current value in real time.
* @param event. The custom event. Custom event was created with: event.detail( value, oldValue)
* value - A numeric value indicating the scroll position.
* oldValue - A numeric value indicating the previous scroll position.
*/
this.onChange = 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-rating');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Gets or sets the animation mode for the component. When this property is set to 'none', all animations are disabled, and transitions will occur instantly without any animated effects. Use this property to enable, disable, or modify the animation behavior as needed. */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description Prevents any user interaction with the element, making it unresponsive to mouse, keyboard, and touch events such as clicks, focus, or input. The element will appear visually inactive and will not trigger any associated event handlers. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Gets or sets the unlockKey property, which serves as the credential required to unlock and activate the product’s full 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 localized set of messages (defined in the messages property) will be used for display and communication. Use this property to dynamically change the language of the interface by updating it in conjunction with the messages object. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description A function that allows you to customize how messages are formatted before they are returned by the Localization Module. This callback receives the original message and any associated variables, enabling you to adjust the output format, apply additional logic, or support advanced localization requirements. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Specifies the total number of stars to display in the rating component. This value controls how many individual star icons are shown, allowing users to select a rating between 1 and the specified number. */
get max() {
return this.nativeElement ? this.nativeElement.max : undefined;
}
set max(value) {
this.nativeElement ? this.nativeElement.max = value : undefined;
}
/** @description Specifies or retrieves an object containing the localized strings used by the element. This property allows you to define text labels, messages, or other UI strings that can be translated based on the user's language or region. It is typically used together with the locale property to display the appropriate translations for different locales. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Specifies the name attribute of the element, which is used as the key when the form data is submitted. This allows the value of the element to be identified and processed on the server side. */
get name() {
return this.nativeElement ? this.nativeElement.name : undefined;
}
set name(value) {
this.nativeElement ? this.nativeElement.name = value : undefined;
}
/** @description Sets or retrieves a value that specifies whether the element's text direction and alignment are configured for right-to-left (RTL) languages, such as Arabic or Hebrew. Enabling this option ensures that the element properly supports locales that use RTL scripts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Specifies the theme to be applied. The selected theme controls the visual appearance, including colors, fonts, and styling, of the element. */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
/** @description When set to true, this property prevents the element from receiving keyboard focus, making it impossible for users to navigate to the element using the Tab key or similar methods. */
get unfocusable() {
return this.nativeElement ? this.nativeElement.unfocusable : undefined;
}
set unfocusable(value) {
this.nativeElement ? this.nativeElement.unfocusable = value : undefined;
}
/** @description Specifies how many stars should be visually highlighted to indicate the current rating value. This number determines which stars appear filled or active in the rating component. */
get value() {
return this.nativeElement ? this.nativeElement.value : undefined;
}
set value(value) {
this.nativeElement ? this.nativeElement.value = value : undefined;
}
/** @description Retrieve the current value assigned to the rating property, indicating the user's selected rating or the rating score for the item.
* @returns {number}
*/
async getValue() {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getValue();
resolve(result);
});
});
};
const result = await getResultOnRender();
return result;
}
getValueSync() {
if (this.nativeElement.isRendered) {
return this.nativeElement.getValue();
}
return null;
}
/** @description Assigns or updates the current rating value. This property determines the selected rating level, typically represented by a numeric value (e.g., 1 to 5), and can be used to display the user’s chosen rating or set a default rating programmatically.
* @param {number} value. Sets the value of the rating
*/
setValue(value) {
if (this.nativeElement.isRendered) {
this.nativeElement.setValue(value);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.setValue(value);
});
}
}
get isRendered() {
return this.nativeElement ? this.nativeElement.isRendered : false;
}
ngOnInit() {
}
ngAfterViewInit() {
const that = this;
that.onCreate.emit(that.nativeElement);
if (Smart)
Smart.Render();
this.nativeElement.classList.add('smart-angular');
if (this.nativeElement.whenRendered)
this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
this.listen();
}
ngOnDestroy() {
this.unlisten();
}
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['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['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']);
}
}
}
RatingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: RatingComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
RatingComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: RatingComponent, selector: "smart-rating, [smart-rating]", inputs: { animation: "animation", disabled: "disabled", unlockKey: "unlockKey", locale: "locale", localizeFormatFunction: "localizeFormatFunction", max: "max", messages: "messages", name: "name", rightToLeft: "rightToLeft", theme: "theme", unfocusable: "unfocusable", value: "value" }, outputs: { onChange: "onChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], exportAs: ["smart-rating"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: RatingComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-rating', selector: 'smart-rating, [smart-rating]',
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { animation: [{
type: Input
}], disabled: [{
type: Input
}], unlockKey: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], max: [{
type: Input
}], messages: [{
type: Input
}], name: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}], unfocusable: [{
type: Input
}], value: [{
type: Input
}], onChange: [{
type: Output
}] } });
class RatingModule {
}
RatingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: RatingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
RatingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: RatingModule, declarations: [RatingComponent], exports: [RatingComponent] });
RatingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: RatingModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: RatingModule, decorators: [{
type: NgModule,
args: [{
declarations: [RatingComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [RatingComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { RatingComponent, RatingModule, Smart };
//# sourceMappingURL=smart-webcomponents-angular-rating.mjs.map