@syncfusion/ej2-base 24.2.7 → 25.1.35-579988

package/dist/ts/droppable.ts

@@ -0,0 +1,172 @@
+import { Base } from './base';
+import { Browser } from './browser';
+import { isVisible, matches } from './dom';
+import { Property, NotifyPropertyChanges, INotifyPropertyChanged, Event } from './notify-property-change';
+import { EventHandler } from './event-handler';
+import { compareElementParent } from './util';
+import { DroppableModel } from './droppable-model';
+import {Coordinates, DropInfo} from './draggable';
+/**
+ * Droppable arguments in drop callback.
+ *
+ * @private
+ */
+export interface DropData {
+    /**
+     * Specifies that current element can be dropped.
+     */
+    canDrop: boolean;
+    /**
+     * Specifies target to drop.
+     */
+    target: HTMLElement;
+}
+export interface DropEvents extends MouseEvent, TouchEvent {
+    dropTarget?: HTMLElement;
+}
+/**
+ * Interface for drop event args
+ */
+export interface DropEventArgs {
+    /**
+     * Specifies the original mouse or touch  event arguments.
+     */
+    event?: MouseEvent & TouchEvent;
+    /**
+     * Specifies the target element.
+     */
+    target?: HTMLElement;
+    /**
+     *  Specifies the dropped element.
+     */
+    droppedElement?: HTMLElement;
+    /**
+     * Specifies the dragData
+     */
+    dragData?: DropInfo;
+}
+/**
+ * Droppable Module provides support to enable droppable functionality in Dom Elements.
+ * ```html
+ * <div id='drop'>Droppable</div>
+ * <script>
+ * let ele:HTMLElement = document.getElementById('drop');
+ * var drag:Droppable = new Droppable(ele,{
+ *     accept:'.drop',
+ *     drop: function(e) {
+ *      //drop handler code.
+ *     }
+ * });
+ * </script>
+ * ```
+ */
+@NotifyPropertyChanges
+export class Droppable extends Base<HTMLElement> implements INotifyPropertyChanged {
+    /**
+     * Defines the selector for draggable element to be accepted by the droppable.
+     */
+    @Property()
+    public accept: string;
+    /**
+     * Defines the scope value to group sets of draggable and droppable items.
+     * A draggable with the same scope value will only be accepted by the droppable.
+     */
+    @Property('default')
+    public scope: string;
+    /**
+     * Specifies the callback function, which will be triggered while drag element is dropped in droppable.
+     *
+     * @event drop
+     */
+    @Event()
+    public drop: (args: DropEventArgs) => void;
+    /**
+     * Specifies the callback function, which will be triggered while drag element is moved over droppable element.
+     *
+     * @event over
+     */
+    @Event()
+    public over: Function;
+    /**
+     * Specifies the callback function, which will be triggered while drag element is moved out of droppable element.
+     *
+     * @event bind
+     */
+    @Event()
+    public out: Function;
+    private mouseOver: boolean = false;
+    public dragData: { [key: string]: DropInfo } = {};
+    constructor(element: HTMLElement, options?: DroppableModel) {
+        super(options, element);
+        this.bind();
+    }
+    protected bind(): void {
+        this.wireEvents();
+    }
+    private wireEvents(): void {
+        EventHandler.add(this.element, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, this.intDrop, this);
+    }
+    // triggers when property changed
+    // eslint-disable-next-line
+    public onPropertyChanged(newProp: DroppableModel, oldProp: DroppableModel): void {
+        //No Code to handle
+    }
+    public getModuleName(): string {
+        return 'droppable';
+    }
+    private dragStopCalled: boolean = false;
+    public intOver(event: MouseEvent & TouchEvent, element?: Element): void {
+        if (!this.mouseOver) {
+            const drag: DropInfo = this.dragData[this.scope];
+            this.trigger('over', { event: event, target: element, dragData: drag });
+            this.mouseOver = true;
+        }
+    }
+    public intOut(event: MouseEvent & TouchEvent, element?: Element): void {
+        if (this.mouseOver) {
+            this.trigger('out', { evt: event, target: element });
+            this.mouseOver = false;
+        }
+    }
+    private intDrop(evt: MouseEvent & TouchEvent, element?: HTMLElement): void {
+        if (!this.dragStopCalled) {
+            return;
+        } else {
+            this.dragStopCalled = false;
+        }
+        let accept: boolean = true;
+        const drag: DropInfo = this.dragData[this.scope];
+        const isDrag: boolean = drag ? (drag.helper && isVisible(drag.helper)) : false;
+        let area: DropData;
+        if (isDrag ) {
+            area = this.isDropArea(evt, drag.helper, element);
+            if (this.accept) {
+                accept = matches(drag.helper, this.accept);
+            }
+        }
+        if (isDrag && this.drop && area.canDrop && accept) {
+            this.trigger('drop', { event: evt, target: area.target, droppedElement: drag.helper, dragData: drag });
+        }
+        this.mouseOver = false;
+    }
+    private isDropArea(evt: MouseEvent & TouchEvent, helper: HTMLElement, element?: HTMLElement): DropData {
+        const area: DropData = { canDrop: true, target: element || (<HTMLElement>evt.target) };
+        const isTouch: boolean = evt.type === 'touchend';
+        if ( isTouch || area.target === helper) {
+            helper.style.display = 'none';
+            const coord: Coordinates = isTouch ? (evt.changedTouches[0]) : evt;
+            const ele: Element = document.elementFromPoint(coord.clientX, coord.clientY);
+            area.canDrop = false;
+            area.canDrop = compareElementParent(ele, this.element);
+            if (area.canDrop) {
+                area.target = <HTMLElement>ele;
+            }
+            helper.style.display = '';
+        }
+        return area;
+    }
+    public destroy(): void {
+        EventHandler.remove(this.element, Browser.isSafari() ? 'touchend' : Browser.touchEndEvent, this.intDrop);
+        super.destroy();
+    }
+}

package/dist/ts/event-handler.ts

@@ -0,0 +1,169 @@
+import { debounce, extend } from './util';
+import { Browser } from './browser';
+
+/**
+ * EventHandler class provides option to add, remove, clear and trigger events to a HTML DOM element
+ * ```html
+ * <div id="Eventdiv">  </div>
+ * <script>
+ *   let node: HTMLElement = document.querySelector("#Eventdiv");
+ *   EventHandler.addEventListener(node, "click", function(){
+ *       // click handler function code
+ *   });
+ *   EventHandler.addEventListener(node, "onmouseover", function(){
+ *       // mouseover handler function code
+ *   });
+ *   EventHandler.removeEventListener(node, "click", function(){
+ *       // click handler function code
+ *   });
+ *   eventObj.clearEvents();
+ * </script>
+ * ```
+ */
+export class EventHandler {
+
+    // to get the event data based on element
+    private static addOrGetEventData(element: Element | HTMLElement | Document): EventOptions[] {
+        if ('__eventList' in element) {
+            return (<EventData>element).__eventList.events;
+        } else {
+            (<EventData>element).__eventList = {};
+            return (<EventData>element).__eventList.events = [];
+        }
+    }
+
+    /**
+     * Add an event to the specified DOM element.
+     *
+     * @param {any} element - Target HTML DOM element
+     * @param {string} eventName - A string that specifies the name of the event
+     * @param {Function} listener - Specifies the function to run when the event occurs
+     * @param {Object} bindTo - A object that binds 'this' variable in the event handler
+     * @param {number} intDebounce - Specifies at what interval given event listener should be triggered.
+     * @returns {Function} ?
+     */
+    public static add(
+        element: Element | HTMLElement | Document,
+        eventName: string,
+        listener: Function,
+        bindTo?: Object,
+        intDebounce?: number): Function {
+        const eventData: EventOptions[] = EventHandler.addOrGetEventData(element);
+        let debounceListener: Function;
+        if (intDebounce) {
+            debounceListener = debounce(listener, intDebounce);
+        } else {
+            debounceListener = listener;
+        }
+        if (bindTo) {
+            debounceListener = debounceListener.bind(bindTo);
+        }
+        const event: string[] = eventName.split(' ');
+        for (let i: number = 0; i < event.length; i++) {
+            eventData.push({
+                name: event[parseInt(i.toString(), 10)],
+                listener: listener,
+                debounce: debounceListener
+            });
+            if (Browser.isIE) {
+                element.addEventListener(event[parseInt(i.toString(), 10)], <EventListener>debounceListener);
+            } else {
+                element.addEventListener(event[parseInt(i.toString(), 10)], <EventListener>debounceListener, { passive: false });
+            }
+        }
+        return debounceListener;
+    }
+
+    /**
+     * Remove an event listener that has been attached before.
+     *
+     * @param {any} element - Specifies the target html element to remove the event
+     * @param {string} eventName - A string that specifies the name of the event to remove
+     * @param {Function} listener - Specifies the function to remove
+     * @returns {void} ?
+     */
+    public static remove(element: Element | HTMLElement | Document, eventName: string, listener: Function): void {
+        const eventData: EventOptions[] = EventHandler.addOrGetEventData(element);
+        const event: string[] = eventName.split(' ');
+        for (let j: number = 0; j < event.length; j++) {
+            let index: number = -1;
+            let debounceListener: Function;
+            if (eventData && eventData.length !== 0) {
+                eventData.some((x: EventOptions, i: number) => {
+                    return x.name === event[parseInt(j.toString(), 10)] && x.listener === listener ?
+                        (index = i, debounceListener = x.debounce, true) : false;
+                });
+            }
+            if (index !== -1) {
+                eventData.splice(index, 1);
+            }
+            if (debounceListener) {
+                element.removeEventListener(event[parseInt(j.toString(), 10)], <EventListener>debounceListener);
+            }
+        }
+    }
+
+    /**
+     * Clear all the event listeners that has been previously attached to the element.
+     *
+     * @param {any} element - Specifies the target html element to clear the events
+     * @returns {void} ?
+     */
+    public static clearEvents(element: Element): void {
+        let eventData: EventOptions[];
+        let copyData: EventOptions[];
+        // eslint-disable-next-line
+        eventData = EventHandler.addOrGetEventData(element);
+        // eslint-disable-next-line
+        copyData = extend([], copyData, eventData) as EventOptions[];
+        for (let i: number = 0; i < copyData.length; i++) {
+            const parseValue: EventOptions = copyData[parseInt(i.toString(), 10)];
+            element.removeEventListener(<string>parseValue.name, <EventListener>parseValue.debounce);
+            eventData.shift();
+        }
+    }
+
+    /**
+     * Trigger particular event of the element.
+     *
+     * @param {any} element - Specifies the target html element to trigger the events
+     * @param {string} eventName - Specifies the event to trigger for the specified element.
+     * Can be a custom event, or any of the standard events.
+     * @param {any} eventProp - Additional parameters to pass on to the event properties
+     * @returns {void} ?
+     */
+    public static trigger(element: HTMLElement, eventName: string, eventProp?: Object): void {
+        const eventData: EventOptions[] = EventHandler.addOrGetEventData(element);
+        for (const event of eventData) {
+            if (event.name === eventName) {
+                event.debounce.call(this, eventProp);
+            }
+        }
+    }
+}
+
+interface EventData extends Element {
+    __eventList: EventList;
+}
+
+interface EventList {
+    events?: EventOptions[];
+}
+
+interface EventOptions {
+    name: string;
+    listener: Function;
+    debounce?: Function;
+}
+
+/**
+ * Common Event argument for all base Essential JavaScript 2 Events.
+ *
+ * @private
+ */
+export interface BaseEventArgs {
+    /**
+     * Specifies name of the event.
+     */
+    name?: string;
+}

package/dist/ts/internationalization.ts

@@ -0,0 +1,369 @@
+import { DateFormat } from './intl/date-formatter';
+import { NumberFormat } from './intl/number-formatter';
+import { DateParser } from './intl/date-parser';
+import { NumberParser } from './intl/number-parser';
+import { IntlBase } from './intl/intl-base';
+import { extend, getValue, isBlazor } from './util';
+import { Observer } from './observer';
+/**
+ * Specifies the observer used for external change detection.
+ */
+export const onIntlChange: Observer = new Observer();
+/**
+ * Specifies the default rtl status for EJ2 components.
+ */
+export let rightToLeft: boolean = false;
+
+/**
+ * Interface for dateFormatOptions
+ *
+ */
+export interface DateFormatOptions {
+    /**
+     * Specifies the skeleton for date formatting.
+     */
+    skeleton?: string;
+    /**
+     * Specifies the type of date formatting either date, dateTime or time.
+     */
+    type?: string;
+    /**
+     * Specifies custom date formatting to be used.
+     */
+    format?: string;
+    /**
+     * Specifies the calendar mode other than gregorian
+     */
+    calendar?: string;
+    /**
+     * Enable server side date formating.
+     */
+    isServerRendered?: boolean;
+}
+/**
+ * Interface for numberFormatOptions
+ *
+ */
+export interface NumberFormatOptions {
+    /**
+     * Specifies minimum fraction digits in formatted value.
+     */
+    minimumFractionDigits?: number;
+    /**
+     * Specifies maximum fraction digits in formatted value.
+     */
+    maximumFractionDigits?: number;
+    /**
+     * Specifies minimum significant digits in formatted value.
+     */
+    minimumSignificantDigits?: number;
+    /**
+     * Specifies maximum significant digits in formatted value.
+     */
+    maximumSignificantDigits?: number;
+    /**
+     * Specifies whether to use grouping or not in formatted value,
+     */
+    useGrouping?: boolean;
+    /**
+     * Specifies the skeleton for perform formatting.
+     */
+    skeleton?: string;
+    /**
+     * Specifies the currency code to be used for formatting.
+     */
+    currency?: string;
+    /**
+     * Specifies minimum integer digits in formatted value.
+     */
+    minimumIntegerDigits?: number;
+    /**
+     * Specifies custom number format for formatting.
+     */
+    format?: string;
+    /**
+     *  Species which currency symbol to consider.
+     */
+    altSymbol?: string;
+}
+/**
+ * Specifies the CLDR data loaded for internationalization functionalities.
+ *
+ * @private
+ */
+export const cldrData: Object = {};
+/**
+ * Specifies the default culture value to be considered.
+ *
+ * @private
+ */
+export let defaultCulture: string = 'en-US';
+/**
+ * Specifies default currency code to be considered
+ *
+ * @private
+ */
+export let defaultCurrencyCode: string = 'USD';
+
+const mapper: string[] = ['numericObject', 'dateObject'];
+/**
+ * Internationalization class provides support to parse and format the number and date object to the desired format.
+ * ```typescript
+ * // To set the culture globally
+ * setCulture('en-GB');
+ *
+ * // To set currency code globally
+ * setCurrencyCode('EUR');
+ *
+ * //Load cldr data
+ * loadCldr(gregorainData);
+ * loadCldr(timeZoneData);
+ * loadCldr(numbersData);
+ * loadCldr(numberSystemData);
+ *
+ * // To use formatter in component side
+ * let Intl:Internationalization = new Internationalization();
+ *
+ * // Date formatting
+ * let dateFormatter: Function = Intl.getDateFormat({skeleton:'long',type:'dateTime'});
+ * dateFormatter(new Date('11/2/2016'));
+ * dateFormatter(new Date('25/2/2030'));
+ * Intl.formatDate(new Date(),{skeleton:'E'});
+ *
+ * //Number formatting
+ * let numberFormatter: Function = Intl.getNumberFormat({skeleton:'C5'})
+ * numberFormatter(24563334);
+ * Intl.formatNumber(123123,{skeleton:'p2'});
+ *
+ * // Date parser
+ * let dateParser: Function = Intl.getDateParser({skeleton:'short',type:'time'});
+ * dateParser('10:30 PM');
+ * Intl.parseDate('10',{skeleton:'H'});
+ * ```
+ */
+export class Internationalization {
+    public culture: string;
+    constructor(cultureName?: string) {
+        if (cultureName) {
+            this.culture = cultureName;
+        }
+    }
+    /**
+     * Returns the format function for given options.
+     *
+     * @param {DateFormatOptions} options - Specifies the format options in which the format function will return.
+     * @returns {Function} ?
+     */
+    public getDateFormat(options?: DateFormatOptions): Function {
+        return DateFormat.dateFormat(this.getCulture(), options || { type: 'date', skeleton: 'short' }, cldrData);
+    }
+    /**
+     * Returns the format function for given options.
+     *
+     * @param {NumberFormatOptions} options - Specifies the format options in which the format function will return.
+     * @returns {Function} ?
+     */
+    public getNumberFormat(options?: NumberFormatOptions): Function {
+        if (options && !options.currency) {
+            options.currency = defaultCurrencyCode;
+        }
+        if (isBlazor() && options && !options.format) {
+            options.minimumFractionDigits = 0;
+        }
+        return NumberFormat.numberFormatter(this.getCulture(), options || {}, cldrData);
+    }
+    /**
+     * Returns the parser function for given options.
+     *
+     * @param {DateFormatOptions} options - Specifies the format options in which the parser function will return.
+     * @returns {Function} ?
+     */
+    public getDateParser(options?: DateFormatOptions): Function {
+        return DateParser.dateParser(this.getCulture(), options || { skeleton: 'short', type: 'date' }, cldrData);
+    }
+    /**
+     * Returns the parser function for given options.
+     *
+     * @param {NumberFormatOptions} options - Specifies the format options in which the parser function will return.
+     * @returns {Function} ?
+     */
+    public getNumberParser(options?: NumberFormatOptions): Function {
+        if (isBlazor() && options && !options.format) {
+            options.minimumFractionDigits = 0;
+        }
+        return NumberParser.numberParser(this.getCulture(), options || { format: 'N' }, cldrData);
+    }
+    /**
+     * Returns the formatted string based on format options.
+     *
+     * @param {number} value - Specifies the number to format.
+     * @param {NumberFormatOptions} option - Specifies the format options in which the number will be formatted.
+     * @returns {string} ?
+     */
+    public formatNumber(value: number, option?: NumberFormatOptions): string {
+        return this.getNumberFormat(option)(value);
+    }
+    /**
+     * Returns the formatted date string based on format options.
+     *
+     * @param {Date} value - Specifies the number to format.
+     * @param {DateFormatOptions} option - Specifies the format options in which the number will be formatted.
+     * @returns {string} ?
+     */
+    public formatDate(value: Date, option?: DateFormatOptions): string {
+        return this.getDateFormat(option)(value);
+    }
+    /**
+     * Returns the date object for given date string and options.
+     *
+     * @param {string} value - Specifies the string to parse.
+     * @param {DateFormatOptions} option - Specifies the parse options in which the date string will be parsed.
+     * @returns {Date} ?
+     */
+    public parseDate(value: string, option?: DateFormatOptions): Date {
+        return this.getDateParser(option)(value);
+    }
+    /**
+     * Returns the number object from the given string value and options.
+     *
+     * @param {string} value - Specifies the string to parse.
+     * @param {NumberFormatOptions} option - Specifies the parse options in which the  string number  will be parsed.
+     * @returns {number} ?
+     */
+    public parseNumber(value: string, option?: NumberFormatOptions): number {
+        return this.getNumberParser(option)(value);
+    }
+    /**
+     * Returns Native Date Time Pattern
+     *
+     * @param {DateFormatOptions} option - Specifies the parse options for resultant date time pattern.
+     * @param {boolean} isExcelFormat - Specifies format value to be converted to excel pattern.
+     * @returns {string} ?
+     * @private
+     */
+    public getDatePattern(option: DateFormatOptions, isExcelFormat?: boolean): string {
+        return IntlBase.getActualDateTimeFormat(this.getCulture(), option, cldrData, isExcelFormat);
+    }
+    /**
+     * Returns Native Number Pattern
+     *
+     * @param {NumberFormatOptions} option - Specifies the parse options for resultant number pattern.
+     * @param {boolean} isExcel ?
+     * @returns {string} ?
+     * @private
+     */
+    public getNumberPattern(option: NumberFormatOptions, isExcel?: boolean): string {
+        return IntlBase.getActualNumberFormat(this.getCulture(), option, cldrData, isExcel);
+    }
+    /**
+     * Returns the First Day of the Week
+     *
+     * @returns {number} ?
+     */
+    public getFirstDayOfWeek(): number {
+        return IntlBase.getWeekData(this.getCulture(), cldrData);
+    }
+
+    /**
+     * Returns the culture
+     *
+     * @returns {string} ?
+     */
+    private getCulture(): string {
+        return this.culture || defaultCulture;
+    }
+}
+
+/**
+ * Set the default culture to all EJ2 components
+ *
+ * @param {string} cultureName - Specifies the culture name to be set as default culture.
+ * @returns {void} ?
+ */
+export function setCulture(cultureName: string): void {
+    defaultCulture = cultureName;
+    onIntlChange.notify('notifyExternalChange', { 'locale': defaultCulture });
+}
+
+/**
+ * Set the default currency code to all EJ2 components
+ *
+ * @param {string} currencyCode Specifies the culture name to be set as default culture.
+ * @returns {void} ?
+ */
+export function setCurrencyCode(currencyCode: string): void {
+    defaultCurrencyCode = currencyCode;
+    onIntlChange.notify('notifyExternalChange', { 'currencyCode': defaultCurrencyCode });
+}
+/**
+ * Load the CLDR data into context
+ *
+ * @param {Object[]} data Specifies the CLDR data's to be used for formatting and parser.
+ * @returns {void} ?
+ */
+export function loadCldr(...data: Object[]): void {
+    for (const obj of data) {
+        extend(cldrData, obj, {}, true);
+    }
+}
+
+
+/**
+ * To enable or disable RTL functionality for all components globally.
+ *
+ * @param {boolean} status - Optional argument Specifies the status value to enable or disable rtl option.
+ * @returns {void} ?
+ */
+export function enableRtl(status: boolean = true): void {
+    rightToLeft = status;
+    onIntlChange.notify('notifyExternalChange', { enableRtl: rightToLeft });
+}
+
+/**
+ * To get the numeric CLDR object for given culture
+ *
+ * @param {string} locale - Specifies the locale for which numericObject to be returned.
+ * @param {string} type ?
+ * @returns {Object} ?
+ * @ignore
+ * @private
+ */
+export function getNumericObject(locale: string, type?: string): Object {
+    // eslint-disable-next-line
+    let numObject: Object = (<any>IntlBase.getDependables(cldrData, locale, '', true))[mapper[0]];
+    // eslint-disable-next-line
+    const dateObject: Object = (<any>IntlBase.getDependables(cldrData, locale, ''))[mapper[1]];
+    const numSystem: string = getValue('defaultNumberingSystem', numObject);
+    const symbPattern: Object = isBlazor() ?  getValue('numberSymbols', numObject) : getValue('symbols-numberSystem-' + numSystem, numObject);
+    const pattern: string = IntlBase.getSymbolPattern(type || 'decimal', numSystem, numObject, false);
+    return extend(symbPattern, IntlBase.getFormatData(pattern, true, '', true), { 'dateSeparator': IntlBase.getDateSeparator(dateObject) });
+}
+
+/**
+ * To get the numeric CLDR  number base object for given culture
+ *
+ * @param {string} locale - Specifies the locale for which numericObject to be returned.
+ * @param {string} currency - Specifies the currency for which numericObject to be returned.
+ * @returns {string} ?
+ * @ignore
+ * @private
+ */
+export function getNumberDependable(locale: string, currency: string): string  {
+    // eslint-disable-next-line
+    const numObject: Object = (<any>IntlBase.getDependables(cldrData, locale, '', true));
+    // eslint-disable-next-line
+    return IntlBase.getCurrencySymbol((<any>numObject).numericObject, currency);
+}
+
+/**
+ * To get the default date CLDR object.
+ *
+ * @param {string} mode ?
+ * @returns {Object} ?
+ * @ignore
+ * @private
+ */
+export function getDefaultDateObject(mode?: string): Object {
+    // eslint-disable-next-line
+    return (<any>IntlBase.getDependables(cldrData, '', mode, false))[mapper[1]];
+}