smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
391 lines (383 loc) • 21 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.scrollbar';
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Output, Input, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
class BaseElement {
constructor(ref) {
this.onCreate = new EventEmitter();
this.onReady = new EventEmitter();
this.onAttach = new EventEmitter();
this.onDetach = new EventEmitter();
const that = this;
this.nativeElement = ref.nativeElement;
that.nativeElement.onAttached = () => {
that.onAttach.emit(that.nativeElement);
};
that.nativeElement.onDetached = () => {
that.onDetach.emit(that.nativeElement);
};
}
addEventListener(type, listener, options = false) {
this.nativeElement.addEventListener(type, listener, options);
}
removeEventListener(type, listener, options = false) {
this.nativeElement.removeEventListener(type, listener, options);
}
dispatchEvent(event) {
return this.nativeElement.dispatchEvent(event);
}
blur() {
this.nativeElement.blur();
}
click() {
this.nativeElement.click();
}
focus(options) {
this.nativeElement.focus(options);
}
/** @description Sets or gets the license. */
get license() {
return this.nativeElement ? this.nativeElement.license : undefined;
}
set license(value) {
this.nativeElement ? this.nativeElement.license = value : undefined;
}
/** @description Sets or gets the language. Used in conjunction with the property messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Determines the theme. Theme defines the look of the element */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
}
BaseElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
BaseElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: BaseElement, inputs: { license: "license", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", rightToLeft: "rightToLeft", theme: "theme" }, outputs: { onCreate: "onCreate", onReady: "onReady", onAttach: "onAttach", onDetach: "onDetach" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onCreate: [{
type: Output
}], onReady: [{
type: Output
}], onAttach: [{
type: Output
}], onDetach: [{
type: Output
}], license: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}] } });
let Smart;
if (typeof window !== "undefined") {
Smart = window.Smart;
}
class ScrollBarComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description This event is triggered whenever the value of the associated element is modified by the user or programmatically. It occurs immediately after the value has changed, allowing you to perform custom actions in response to the update.
* @param event. The custom event. Custom event was created with: event.detail( value, oldValue, min, max)
* value - A numeric value indicating the scroll position.
* oldValue - A numeric value indicating the previous scroll position.
* min - A numeric value indicating the min scroll position.
* max - A numeric value indicating the max scroll position.
*/
this.onChange = new EventEmitter();
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-scroll-bar');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Specifies the current animation mode for the component. You can retrieve the current mode or assign a new one. Setting this property to 'none' disables all animations; other values will enable and determine the type of animation applied. */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description Determines whether the element is interactive or inactive. When enabled, users can interact with the element as intended. When disabled, the element becomes unresponsive to user input and typically appears visually distinct to indicate its inactive state. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Defines or retrieves the value of the scrollbar's large step increment. This large step value determines how much the scrollbar's position changes when the user clicks in the track area between the scrollbar's thumb (slider) and one of its arrow buttons. When the left mouse button is pressed in this area, the scrollbar advances or retreats by the specified large step amount, enabling quicker navigation through the content compared to single-step arrow button clicks. */
get largeStep() {
return this.nativeElement ? this.nativeElement.largeStep : undefined;
}
set largeStep(value) {
this.nativeElement ? this.nativeElement.largeStep = value : undefined;
}
/** @description Gets or sets the 'unlockKey' property, which is a unique key used to activate or unlock access to the product’s features or functionality. */
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
this.nativeElement ? this.nativeElement.unlockKey = value : undefined;
}
/** @description Specifies or retrieves the current language setting. This property determines which language is used for displaying messages, working in conjunction with the messages property to select the appropriate set of localized text based on the specified language code (e.g., "en", "fr", "es"). */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Invokes a callback function associated with the localization module, typically used to handle events or actions such as language changes, text translations, or updates to localized content within the application. */
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 scrollable value of the scrollbar, determining the highest position to which the scrollbar thumb can be moved. This value defines the upper limit of the scrollable content range. */
get max() {
return this.nativeElement ? this.nativeElement.max : undefined;
}
set max(value) {
this.nativeElement ? this.nativeElement.max = value : undefined;
}
/** @description Specifies or retrieves the type of mechanical action applied to the element. Mechanical action determines the exact moment when the element's value is updated—such as immediately upon interaction, after a confirmation (like releasing a button), or according to specific user actions. This property allows you to control how and when changes to the element’s value are registered and processed within the application. */
get mechanicalAction() {
return this.nativeElement ? this.nativeElement.mechanicalAction : undefined;
}
set mechanicalAction(value) {
this.nativeElement ? this.nativeElement.mechanicalAction = value : undefined;
}
/** @description Defines an object containing string values that represent the various states of password strength (e.g., weak, medium, strong). Each key in the object corresponds to a specific strength level, allowing for customized messages or labels based on the user's password strength status. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Defines or retrieves the lowest possible value that the scrollbar can represent, determining the starting point of the scrollbar's range. */
get min() {
return this.nativeElement ? this.nativeElement.min : undefined;
}
set min(value) {
this.nativeElement ? this.nativeElement.min = value : undefined;
}
/** @description Specifies or retrieves the orientation of the scrollbar, determining whether it is displayed horizontally or vertically. */
get orientation() {
return this.nativeElement ? this.nativeElement.orientation : undefined;
}
set orientation(value) {
this.nativeElement ? this.nativeElement.orientation = value : undefined;
}
/** @description If the element has the readonly attribute, users will be able to see its value but will not be able to modify, edit, or otherwise interact with its contents through input actions. However, the element may still be focusable and its value can be changed programmatically using scripts. */
get readonly() {
return this.nativeElement ? this.nativeElement.readonly : undefined;
}
set readonly(value) {
this.nativeElement ? this.nativeElement.readonly = value : undefined;
}
/** @description Sets or retrieves a value that specifies whether the element's content alignment is optimized for languages that use right-to-left (RTL) scripts, such as Arabic or Hebrew. When enabled, the element's layout, text direction, and associated styles are adjusted to properly support RTL locales. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Controls the visibility of scrollbar buttons. When set, this property determines whether the scrollbar's increment and decrement buttons (commonly arrow buttons at the ends of the scrollbar) are shown or hidden. It can be used to either display or hide these buttons programmatically, and can also be queried to retrieve the current visibility state. */
get showButtons() {
return this.nativeElement ? this.nativeElement.showButtons : undefined;
}
set showButtons(value) {
this.nativeElement ? this.nativeElement.showButtons = value : undefined;
}
/** @description Defines or retrieves the increment by which the scrollbar's value changes when a user clicks on the scrollbar's arrow (stepper) buttons. This value determines how much the scroll position increases or decreases with each button press, allowing for precise control over scrolling granularity. */
get step() {
return this.nativeElement ? this.nativeElement.step : undefined;
}
set step(value) {
this.nativeElement ? this.nativeElement.step = value : undefined;
}
/** @description Specifies the theme to be applied to the element. The selected theme controls the visual appearance, including colors, typography, and overall styling, ensuring a consistent and cohesive look for the element within the user interface. */
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 unreachable via tab navigation or programmatically using focus methods. */
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 widget or retrieves its current value, depending on how the method is invoked. This allows you to programmatically update the widget's data or access its existing data as needed. */
get value() {
return this.nativeElement ? this.nativeElement.value : undefined;
}
set value(value) {
this.nativeElement ? this.nativeElement.value = value : undefined;
}
/** @description Re-renders the element by updating its visual presentation on the screen, ensuring that any recent changes to its properties, styles, or content are accurately reflected in the user interface.
*/
refresh() {
if (this.nativeElement.isRendered) {
this.nativeElement.refresh();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.refresh();
});
}
}
get isRendered() {
return this.nativeElement ? this.nativeElement.isRendered : false;
}
ngOnInit() {
}
ngAfterViewInit() {
const that = this;
that.onCreate.emit(that.nativeElement);
if (Smart)
Smart.Render();
this.nativeElement.classList.add('smart-angular');
if (this.nativeElement.whenRendered)
this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
this.listen();
}
ngOnDestroy() {
this.unlisten();
}
ngOnChanges(changes) {
if (this.nativeElement && this.nativeElement.isRendered) {
for (const propName in changes) {
if (changes.hasOwnProperty(propName)) {
this.nativeElement[propName] = changes[propName].currentValue;
}
}
}
}
/** @description Add event listeners. */
listen() {
const that = this;
that.eventHandlers['changeHandler'] = (event) => { that.onChange.emit(event); };
that.nativeElement.addEventListener('change', that.eventHandlers['changeHandler']);
}
/** @description Remove event listeners. */
unlisten() {
const that = this;
if (that.eventHandlers['changeHandler']) {
that.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']);
}
}
}
ScrollBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ScrollBarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
ScrollBarComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: ScrollBarComponent, selector: "smart-scroll-bar, [smart-scroll-bar]", inputs: { animation: "animation", disabled: "disabled", largeStep: "largeStep", unlockKey: "unlockKey", locale: "locale", localizeFormatFunction: "localizeFormatFunction", max: "max", mechanicalAction: "mechanicalAction", messages: "messages", min: "min", orientation: "orientation", readonly: "readonly", rightToLeft: "rightToLeft", showButtons: "showButtons", step: "step", theme: "theme", unfocusable: "unfocusable", value: "value" }, outputs: { onChange: "onChange" }, exportAs: ["smart-scroll-bar"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ScrollBarComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-scroll-bar', selector: 'smart-scroll-bar, [smart-scroll-bar]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { animation: [{
type: Input
}], disabled: [{
type: Input
}], largeStep: [{
type: Input
}], unlockKey: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], max: [{
type: Input
}], mechanicalAction: [{
type: Input
}], messages: [{
type: Input
}], min: [{
type: Input
}], orientation: [{
type: Input
}], readonly: [{
type: Input
}], rightToLeft: [{
type: Input
}], showButtons: [{
type: Input
}], step: [{
type: Input
}], theme: [{
type: Input
}], unfocusable: [{
type: Input
}], value: [{
type: Input
}], onChange: [{
type: Output
}] } });
class ScrollBarModule {
}
ScrollBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ScrollBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
ScrollBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ScrollBarModule, declarations: [ScrollBarComponent], exports: [ScrollBarComponent] });
ScrollBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ScrollBarModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ScrollBarModule, decorators: [{
type: NgModule,
args: [{
declarations: [ScrollBarComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [ScrollBarComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ScrollBarComponent, ScrollBarModule, Smart };
//# sourceMappingURL=smart-webcomponents-angular-scrollbar.mjs.map