smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
346 lines (338 loc) • 18.2 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.sortable';
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 SortableComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description This event is triggered whenever the order of items in a sortable list changes, indicating that one or more items have been repositioned within the list by the user. The event provides details about the updated order, allowing you to respond to changes, such as saving the new arrangement or updating the user interface.
* @param event. The custom event. */
this.onDragEnd = 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-sortable');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Defines or retrieves the current animation mode. When this property is set to 'none', all animations are disabled and elements will transition instantly without any animated effects. Use this property to enable, disable, or customize the animation behavior of components. */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description Controls whether items can be sorted. When enabled, users can rearrange items by sorting them; when disabled, sorting functionality is not available. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Determines how a sortable item can be dragged within the list. When set to 'item', users can drag the entire item itself to reorder it. When set to 'handle', a specific drag handle is displayed next to each item, and only dragging this handle will reorder the item. This property can be both retrieved (get) and modified (set) to control the user’s drag interaction method. */
get dragMode() {
return this.nativeElement ? this.nativeElement.dragMode : undefined;
}
set dragMode(value) {
this.nativeElement ? this.nativeElement.dragMode = value : undefined;
}
/** @description Sets or retrieves the position of the drag handle in relation to its associated sortable item. This property is only applicable when the dragMode option is set to 'handle', meaning that the user can initiate dragging only by interacting with the specified handle within the sortable item. Use this option to define where the handle appears (e.g., 'left', 'right', 'top', or 'bottom') relative to the item, allowing for precise customization of the drag-and-drop interface. */
get handlePosition() {
return this.nativeElement ? this.nativeElement.handlePosition : undefined;
}
set handlePosition(value) {
this.nativeElement ? this.nativeElement.handlePosition = value : undefined;
}
/** @description Determines whether the drag handle of a sortable item is always visible or only appears when the item is hovered over. This property is applicable only if dragMode is set to 'handle'. Use this setting to control the visibility of the item’s drag handle for user interaction. */
get handleVisibility() {
return this.nativeElement ? this.nativeElement.handleVisibility : undefined;
}
set handleVisibility(value) {
this.nativeElement ? this.nativeElement.handleVisibility = value : undefined;
}
/** @description Specifies or retrieves a CSS selector used to identify which elements within the container are sortable items. By default, all direct child elements of the 'smart-sortable' custom element are considered sortable. You can customize this selector to restrict sortable functionality to specific child elements based on their class, tag, or other attributes. */
get items() {
return this.nativeElement ? this.nativeElement.items : undefined;
}
set items(value) {
this.nativeElement ? this.nativeElement.items = value : undefined;
}
/** @description Sets or retrieves the unlockKey, a unique value required to activate or grant access to the product's features. This property enables locking and unlocking the product based on its assigned key. */
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 code (e.g., 'en', 'fr', 'es'). This property determines which set of localized messages from the messages property will be used for displaying text or content. It ensures the correct language is applied throughout the application's interface. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback function associated with the localization module, typically used to handle language or region-specific content updates or responses within the application. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Defines or retrieves an object containing the localized strings that are displayed in the widget's user interface. This property allows you to customize all text elements for different languages and regions. It should be used together with the locale property to ensure the widget presents the appropriate translations based on the selected locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets or retrieves the orientation (horizontal or vertical) in which sortable items are arranged and can be reordered by dragging. This determines whether items are stacked in a row or a column when using the sortable functionality. */
get mode() {
return this.nativeElement ? this.nativeElement.mode : undefined;
}
set mode(value) {
this.nativeElement ? this.nativeElement.mode = value : undefined;
}
/** @description Gets or sets a value that specifies whether the element's text direction is set to right-to-left (RTL), enabling proper alignment and layout for languages and locales that use right-to-left scripts, such as Arabic or Hebrew. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Relocates a sortable item within a list from its current index to a specified target index, updating the order of items accordingly.
* @param {number} fromIndex?. The original index of the item.
* @param {number} toIndex?. The index to move the item to.
*/
move(fromIndex, toIndex) {
if (this.nativeElement.isRendered) {
this.nativeElement.move(fromIndex, toIndex);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.move(fromIndex, toIndex);
});
}
}
/** @description Recalculates the list of sortable items within the custom element. This method should be called whenever items are dynamically added or removed to ensure that all current items are properly recognized and can be sorted as expected.
*/
updateItems() {
if (this.nativeElement.isRendered) {
this.nativeElement.updateItems();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.updateItems();
});
}
}
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['dragEndHandler'] = (event) => { that.onDragEnd.emit(event); };
that.nativeElement.addEventListener('dragEnd', that.eventHandlers['dragEndHandler']);
}
/** @description Remove event listeners. */
unlisten() {
const that = this;
if (that.eventHandlers['dragEndHandler']) {
that.nativeElement.removeEventListener('dragEnd', that.eventHandlers['dragEndHandler']);
}
}
}
SortableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: SortableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
SortableComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: SortableComponent, selector: "smart-sortable, [smart-sortable]", inputs: { animation: "animation", disabled: "disabled", dragMode: "dragMode", handlePosition: "handlePosition", handleVisibility: "handleVisibility", items: "items", unlockKey: "unlockKey", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", mode: "mode", rightToLeft: "rightToLeft" }, outputs: { onDragEnd: "onDragEnd" }, exportAs: ["smart-sortable"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: SortableComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-sortable', selector: 'smart-sortable, [smart-sortable]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { animation: [{
type: Input
}], disabled: [{
type: Input
}], dragMode: [{
type: Input
}], handlePosition: [{
type: Input
}], handleVisibility: [{
type: Input
}], items: [{
type: Input
}], unlockKey: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], mode: [{
type: Input
}], rightToLeft: [{
type: Input
}], onDragEnd: [{
type: Output
}] } });
class SortableModule {
}
SortableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: SortableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
SortableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: SortableModule, declarations: [SortableComponent], exports: [SortableComponent] });
SortableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: SortableModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: SortableModule, decorators: [{
type: NgModule,
args: [{
declarations: [SortableComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [SortableComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Smart, SortableComponent, SortableModule };
//# sourceMappingURL=smart-webcomponents-angular-sortable.mjs.map