smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
609 lines (601 loc) • 28.7 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.path';
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 PathComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description This event is triggered when user clicks on the browse button.
* @param event. The custom event. */
this.onBrowseButtonClick = new EventEmitter();
/** @description This event is triggered when the value is changed.
* @param event. The custom event. */
this.onChange = new EventEmitter();
/** @description This event is triggered when the drop down is closed.
* @param event. The custom event. */
this.onClose = new EventEmitter();
/** @description This event is triggered when the drop down is closing.
* @param event. The custom event. */
this.onClosing = new EventEmitter();
/** @description This event is triggered when user clicks on the drop down button.
* @param event. The custom event. */
this.onDropDownButtonClick = new EventEmitter();
/** @description This event is triggered when an item from the popup is clicked.
* @param event. The custom event. */
this.onItemClick = new EventEmitter();
/** @description This event is triggered when the drop down is opened.
* @param event. The custom event. */
this.onOpen = new EventEmitter();
/** @description This event is triggered when the drop down is opening.
* @param event. The custom event. */
this.onOpening = 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-path');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Sets or gets the animation mode. Animation is disabled when the property is set to 'none' */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description Determines the data source for the item that will be displayed inside the drop down. */
get dataSource() {
return this.nativeElement ? this.nativeElement.dataSource : undefined;
}
set dataSource(value) {
this.nativeElement ? this.nativeElement.dataSource = value : undefined;
}
/** @description Enables or disables the element. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Sets or gets the displayMember. The displayMember specifies the name of an object property to display. The name is contained in the collection specified by the 'dataSource' property. */
get displayMember() {
return this.nativeElement ? this.nativeElement.displayMember : undefined;
}
set displayMember(value) {
this.nativeElement ? this.nativeElement.displayMember = value : undefined;
}
/** @description Sets the parent container of the dropDown (the popup). Used when a CSS property of unknown parent is interfering with the visibility of the dropDown. */
get dropDownAppendTo() {
return this.nativeElement ? this.nativeElement.dropDownAppendTo : undefined;
}
set dropDownAppendTo(value) {
this.nativeElement ? this.nativeElement.dropDownAppendTo = value : undefined;
}
/** @description Sets the height of the drop down. Default value of empty string means that CSS variables are used. This property should be used when the browser doesn't support CSS variables. */
get dropDownHeight() {
return this.nativeElement ? this.nativeElement.dropDownHeight : undefined;
}
set dropDownHeight(value) {
this.nativeElement ? this.nativeElement.dropDownHeight = value : undefined;
}
/** @description Sets the max height of the drop down. Default value of empty string means that CSS variables are used. This property should be used when the browser doesn't support CSS variables. */
get dropDownMaxHeight() {
return this.nativeElement ? this.nativeElement.dropDownMaxHeight : undefined;
}
set dropDownMaxHeight(value) {
this.nativeElement ? this.nativeElement.dropDownMaxHeight = value : undefined;
}
/** @description Sets the max width of the drop down. Default value of empty string means that CSS variables are used. This property should be used when the browser doesn't support CSS variables. */
get dropDownMaxWidth() {
return this.nativeElement ? this.nativeElement.dropDownMaxWidth : undefined;
}
set dropDownMaxWidth(value) {
this.nativeElement ? this.nativeElement.dropDownMaxWidth = value : undefined;
}
/** @description Sets the min height of the drop down. Default value of empty string means that CSS variables are used. This property should be used when the browser doesn't support CSS variables. */
get dropDownMinHeight() {
return this.nativeElement ? this.nativeElement.dropDownMinHeight : undefined;
}
set dropDownMinHeight(value) {
this.nativeElement ? this.nativeElement.dropDownMinHeight = value : undefined;
}
/** @description Sets the min width of the drop down. Default value of empty string means that CSS variables are used. This property should be used when the browser doesn't support CSS variables. */
get dropDownMinWidth() {
return this.nativeElement ? this.nativeElement.dropDownMinWidth : undefined;
}
set dropDownMinWidth(value) {
this.nativeElement ? this.nativeElement.dropDownMinWidth = value : undefined;
}
/** @description If this property is enabled, when the element's dropdown is opened, a transparent overlay is positioned between the dropdown and the rest of the document. */
get dropDownOverlay() {
return this.nativeElement ? this.nativeElement.dropDownOverlay : undefined;
}
set dropDownOverlay(value) {
this.nativeElement ? this.nativeElement.dropDownOverlay = value : undefined;
}
/** @description Determines the vertical position of the dropDown. 'Auto' means its automatically determined depending on the viewport size. */
get dropDownPosition() {
return this.nativeElement ? this.nativeElement.dropDownPosition : undefined;
}
set dropDownPosition(value) {
this.nativeElement ? this.nativeElement.dropDownPosition = value : undefined;
}
/** @description Sets the width of the drop down. Default value of empty string means that CSS variables are used. This property should be used when the browser doesn't support CSS variables. */
get dropDownWidth() {
return this.nativeElement ? this.nativeElement.dropDownWidth : undefined;
}
set dropDownWidth(value) {
this.nativeElement ? this.nativeElement.dropDownWidth = value : undefined;
}
/** @description Sets additional helper text below the element. */
get hint() {
return this.nativeElement ? this.nativeElement.hint : undefined;
}
set hint(value) {
this.nativeElement ? this.nativeElement.hint = value : undefined;
}
/** @description Sets the element as an indicator. */
get indicator() {
return this.nativeElement ? this.nativeElement.indicator : undefined;
}
set indicator(value) {
this.nativeElement ? this.nativeElement.indicator = value : undefined;
}
/** @description A getter that returns an array of all Path items. */
get items() {
return this.nativeElement ? this.nativeElement.items : undefined;
}
set items(value) {
this.nativeElement ? this.nativeElement.items = value : undefined;
}
/** @description Sets label above the element. */
get label() {
return this.nativeElement ? this.nativeElement.label : undefined;
}
set label(value) {
this.nativeElement ? this.nativeElement.label = value : undefined;
}
/** @description Sets or gets the unlockKey which unlocks the product. */
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
this.nativeElement ? this.nativeElement.unlockKey = 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 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 The name of the control. */
get name() {
return this.nativeElement ? this.nativeElement.name : undefined;
}
set name(value) {
this.nativeElement ? this.nativeElement.name = value : undefined;
}
/** @description Determines whether the popup is opened or closed */
get opened() {
return this.nativeElement ? this.nativeElement.opened : undefined;
}
set opened(value) {
this.nativeElement ? this.nativeElement.opened = value : undefined;
}
/** @description Determines the element's placeholder. */
get placeholder() {
return this.nativeElement ? this.nativeElement.placeholder : undefined;
}
set placeholder(value) {
this.nativeElement ? this.nativeElement.placeholder = value : undefined;
}
/** @description Determines the format of the path. Follows specific operation system criteria by changing the drive,folder separators. */
get pathFormat() {
return this.nativeElement ? this.nativeElement.pathFormat : undefined;
}
set pathFormat(value) {
this.nativeElement ? this.nativeElement.pathFormat = value : undefined;
}
/** @description Disables user interaction with the element. */
get readonly() {
return this.nativeElement ? this.nativeElement.readonly : undefined;
}
set readonly(value) {
this.nativeElement ? this.nativeElement.readonly = 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;
}
/** @description If is set to true, the element cannot be focused. */
get unfocusable() {
return this.nativeElement ? this.nativeElement.unfocusable : undefined;
}
set unfocusable(value) {
this.nativeElement ? this.nativeElement.unfocusable = value : undefined;
}
/** @description The value of the Path control. */
get value() {
return this.nativeElement ? this.nativeElement.value : undefined;
}
set value(value) {
this.nativeElement ? this.nativeElement.value = value : undefined;
}
/** @description Determines the value member of an item. Stored as value in the item object. */
get valueMember() {
return this.nativeElement ? this.nativeElement.valueMember : undefined;
}
set valueMember(value) {
this.nativeElement ? this.nativeElement.valueMember = value : undefined;
}
/** @description Determines whether or not the element wraps to a new line if overflows. If set the Path can be wrapped on multiple lines. */
get wrap() {
return this.nativeElement ? this.nativeElement.wrap : undefined;
}
set wrap(value) {
this.nativeElement ? this.nativeElement.wrap = value : undefined;
}
/** @description Closes the dropDown.
*/
close() {
if (this.nativeElement.isRendered) {
this.nativeElement.close();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.close();
});
}
}
/** @description Opens the dropDown.
*/
open() {
if (this.nativeElement.isRendered) {
this.nativeElement.open();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.open();
});
}
}
/** @description Set's the Path element to 'emptyPath' state and changes the value to '////'.
*/
setToEmptyPath() {
if (this.nativeElement.isRendered) {
this.nativeElement.setToEmptyPath();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.setToEmptyPath();
});
}
}
/** @description Set's the Path element to 'notAPath' state and changes the value to '//'.
*/
setToNotAPath() {
if (this.nativeElement.isRendered) {
this.nativeElement.setToNotAPath();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.setToNotAPath();
});
}
}
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['browseButtonClickHandler'] = (event) => { that.onBrowseButtonClick.emit(event); };
that.nativeElement.addEventListener('browseButtonClick', that.eventHandlers['browseButtonClickHandler']);
that.eventHandlers['changeHandler'] = (event) => { that.onChange.emit(event); };
that.nativeElement.addEventListener('change', that.eventHandlers['changeHandler']);
that.eventHandlers['closeHandler'] = (event) => { that.onClose.emit(event); };
that.nativeElement.addEventListener('close', that.eventHandlers['closeHandler']);
that.eventHandlers['closingHandler'] = (event) => { that.onClosing.emit(event); };
that.nativeElement.addEventListener('closing', that.eventHandlers['closingHandler']);
that.eventHandlers['dropDownButtonClickHandler'] = (event) => { that.onDropDownButtonClick.emit(event); };
that.nativeElement.addEventListener('dropDownButtonClick', that.eventHandlers['dropDownButtonClickHandler']);
that.eventHandlers['itemClickHandler'] = (event) => { that.onItemClick.emit(event); };
that.nativeElement.addEventListener('itemClick', that.eventHandlers['itemClickHandler']);
that.eventHandlers['openHandler'] = (event) => { that.onOpen.emit(event); };
that.nativeElement.addEventListener('open', that.eventHandlers['openHandler']);
that.eventHandlers['openingHandler'] = (event) => { that.onOpening.emit(event); };
that.nativeElement.addEventListener('opening', that.eventHandlers['openingHandler']);
}
/** @description Remove event listeners. */
unlisten() {
const that = this;
if (that.eventHandlers['browseButtonClickHandler']) {
that.nativeElement.removeEventListener('browseButtonClick', that.eventHandlers['browseButtonClickHandler']);
}
if (that.eventHandlers['changeHandler']) {
that.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']);
}
if (that.eventHandlers['closeHandler']) {
that.nativeElement.removeEventListener('close', that.eventHandlers['closeHandler']);
}
if (that.eventHandlers['closingHandler']) {
that.nativeElement.removeEventListener('closing', that.eventHandlers['closingHandler']);
}
if (that.eventHandlers['dropDownButtonClickHandler']) {
that.nativeElement.removeEventListener('dropDownButtonClick', that.eventHandlers['dropDownButtonClickHandler']);
}
if (that.eventHandlers['itemClickHandler']) {
that.nativeElement.removeEventListener('itemClick', that.eventHandlers['itemClickHandler']);
}
if (that.eventHandlers['openHandler']) {
that.nativeElement.removeEventListener('open', that.eventHandlers['openHandler']);
}
if (that.eventHandlers['openingHandler']) {
that.nativeElement.removeEventListener('opening', that.eventHandlers['openingHandler']);
}
}
}
PathComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: PathComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
PathComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: PathComponent, selector: "smart-path, [smart-path]", inputs: { animation: "animation", dataSource: "dataSource", disabled: "disabled", displayMember: "displayMember", dropDownAppendTo: "dropDownAppendTo", dropDownHeight: "dropDownHeight", dropDownMaxHeight: "dropDownMaxHeight", dropDownMaxWidth: "dropDownMaxWidth", dropDownMinHeight: "dropDownMinHeight", dropDownMinWidth: "dropDownMinWidth", dropDownOverlay: "dropDownOverlay", dropDownPosition: "dropDownPosition", dropDownWidth: "dropDownWidth", hint: "hint", indicator: "indicator", items: "items", label: "label", unlockKey: "unlockKey", locale: "locale", messages: "messages", name: "name", opened: "opened", placeholder: "placeholder", pathFormat: "pathFormat", readonly: "readonly", rightToLeft: "rightToLeft", theme: "theme", unfocusable: "unfocusable", value: "value", valueMember: "valueMember", wrap: "wrap" }, outputs: { onBrowseButtonClick: "onBrowseButtonClick", onChange: "onChange", onClose: "onClose", onClosing: "onClosing", onDropDownButtonClick: "onDropDownButtonClick", onItemClick: "onItemClick", onOpen: "onOpen", onOpening: "onOpening" }, exportAs: ["smart-path"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: PathComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-path', selector: 'smart-path, [smart-path]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { animation: [{
type: Input
}], dataSource: [{
type: Input
}], disabled: [{
type: Input
}], displayMember: [{
type: Input
}], dropDownAppendTo: [{
type: Input
}], dropDownHeight: [{
type: Input
}], dropDownMaxHeight: [{
type: Input
}], dropDownMaxWidth: [{
type: Input
}], dropDownMinHeight: [{
type: Input
}], dropDownMinWidth: [{
type: Input
}], dropDownOverlay: [{
type: Input
}], dropDownPosition: [{
type: Input
}], dropDownWidth: [{
type: Input
}], hint: [{
type: Input
}], indicator: [{
type: Input
}], items: [{
type: Input
}], label: [{
type: Input
}], unlockKey: [{
type: Input
}], locale: [{
type: Input
}], messages: [{
type: Input
}], name: [{
type: Input
}], opened: [{
type: Input
}], placeholder: [{
type: Input
}], pathFormat: [{
type: Input
}], readonly: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}], unfocusable: [{
type: Input
}], value: [{
type: Input
}], valueMember: [{
type: Input
}], wrap: [{
type: Input
}], onBrowseButtonClick: [{
type: Output
}], onChange: [{
type: Output
}], onClose: [{
type: Output
}], onClosing: [{
type: Output
}], onDropDownButtonClick: [{
type: Output
}], onItemClick: [{
type: Output
}], onOpen: [{
type: Output
}], onOpening: [{
type: Output
}] } });
class PathModule {
}
PathModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: PathModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
PathModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: PathModule, declarations: [PathComponent], exports: [PathComponent] });
PathModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: PathModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: PathModule, decorators: [{
type: NgModule,
args: [{
declarations: [PathComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [PathComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { PathComponent, PathModule, Smart };
//# sourceMappingURL=smart-webcomponents-angular-path.mjs.map