@syncfusion/ej2-dropdowns 24.1.44 → 24.1.45-12082

package/dist/ts/multi-select/float-label.ts

@@ -0,0 +1,176 @@
+/**
+ * FloatLable Moduel
+ * Specifies whether to display the floating label above the input element.
+ */
+import { removeClass, addClass, detach } from '@syncfusion/ej2-base';
+import { attributes, isNullOrUndefined, createElement, getUniqueID } from '@syncfusion/ej2-base';
+import { FloatLabelType } from '@syncfusion/ej2-inputs';
+
+const FLOATLINE: string = 'e-float-line';
+const FLOATTEXT: string = 'e-float-text';
+const LABELTOP: string = 'e-label-top';
+const LABELBOTTOM: string = 'e-label-bottom';
+
+/* eslint-disable valid-jsdoc */
+
+/**
+ * Function to create Float Label element.
+ *
+ * @param {HTMLDivElement} overAllWrapper - Overall wrapper of multiselect.
+ * @param {HTMLElement} searchWrapper - Search wrapper of multiselect.
+ * @param {HTMLElement} element - The given html element.
+ * @param {HTMLInputElement} inputElement - Specify the input wrapper.
+ * @param {number[] | string[] | boolean[]} value - Value of the MultiSelect.
+ * @param {FloatLabelType} floatLabelType - Specify the FloatLabel Type.
+ * @param {string} placeholder - Specify the PlaceHolder text.
+ */
+export function createFloatLabel(
+    overAllWrapper: HTMLDivElement,
+    searchWrapper: HTMLElement, element: HTMLElement,
+    inputElement: HTMLInputElement, value: number[] | string[] | boolean[], floatLabelType: FloatLabelType,
+    placeholder: string): void {
+    const floatLinelement: HTMLElement = createElement('span', { className: FLOATLINE });
+    const floatLabelElement: HTMLElement = createElement('label', { className: FLOATTEXT });
+    const id: string = element.getAttribute('id') ? element.getAttribute('id') : getUniqueID('ej2_multiselect');
+    element.id = id;
+    if (!isNullOrUndefined(element.id) && element.id !== '') {
+        floatLabelElement.id = 'label_' + element.id.replace(/ /g, '_');
+        attributes(inputElement, { 'aria-labelledby': floatLabelElement.id });
+    }
+    if (!isNullOrUndefined(inputElement.placeholder) && inputElement.placeholder !== '') {
+        floatLabelElement.innerText = encodePlaceholder(inputElement.placeholder);
+        inputElement.removeAttribute('placeholder');
+    }
+    floatLabelElement.innerText = encodePlaceholder(placeholder);
+    searchWrapper.appendChild(floatLinelement);
+    searchWrapper.appendChild(floatLabelElement);
+    overAllWrapper.classList.add('e-float-input');
+    updateFloatLabelState(value, floatLabelElement);
+    if (floatLabelType === 'Always') {
+        if (floatLabelElement.classList.contains(LABELBOTTOM)) {
+            removeClass([floatLabelElement], LABELBOTTOM);
+        }
+        addClass([floatLabelElement], LABELTOP);
+    }
+}
+
+/**
+ * Function to update status of the Float Label element.
+ *
+ * @param {string[] | number[] | boolean[]} value - Value of the MultiSelect.
+ * @param {HTMLElement} label - Float label element.
+ */
+export function updateFloatLabelState(value: string[] | number[] | boolean[], label: HTMLElement): void {
+    if (value && value.length > 0) {
+        addClass([label], LABELTOP);
+        removeClass([label], LABELBOTTOM);
+    } else {
+        removeClass([label], LABELTOP);
+        addClass([label], LABELBOTTOM);
+    }
+}
+
+/**
+ * Function to remove Float Label element.
+ *
+ * @param {HTMLDivElement} overAllWrapper - Overall wrapper of multiselect.
+ * @param {HTMLDivElement} componentWrapper - Wrapper element of multiselect.
+ * @param {HTMLElement} searchWrapper - Search wrapper of multiselect.
+ * @param {HTMLInputElement} inputElement - Specify the input wrapper.
+ * @param {number[] | string[] | boolean[]} value - Value of the MultiSelect.
+ * @param {FloatLabelType} floatLabelType - Specify the FloatLabel Type.
+ * @param {string} placeholder - Specify the PlaceHolder text.
+ */
+export function removeFloating(
+    overAllWrapper: HTMLDivElement,
+    componentWrapper: HTMLDivElement,
+    searchWrapper: HTMLElement,
+    inputElement: HTMLInputElement,
+    value: number[] | string[] | boolean[],
+    floatLabelType: FloatLabelType,
+    placeholder: string): void {
+    const placeholderElement: HTMLElement = componentWrapper.querySelector('.' + FLOATTEXT) as HTMLElement;
+    const floatLine: HTMLElement = componentWrapper.querySelector('.' + FLOATLINE) as HTMLElement;
+    let placeholderText: string;
+    if (!isNullOrUndefined(placeholderElement)) {
+        placeholderText = placeholderElement.innerText;
+        detach(searchWrapper.querySelector('.' + FLOATTEXT));
+        setPlaceHolder(value, inputElement, placeholderText);
+        if (!isNullOrUndefined(floatLine)) {
+            detach(searchWrapper.querySelector('.' + FLOATLINE));
+        }
+    } else {
+        placeholderText = (placeholder !== null) ? placeholder : '';
+        setPlaceHolder(value, inputElement, placeholderText);
+    }
+    overAllWrapper.classList.remove('e-float-input');
+}
+
+/**
+ * Function to set the placeholder to the element.
+ *
+ * @param {number[] | string[] | boolean[]} value - Value of the MultiSelect.
+ * @param {HTMLInputElement} inputElement - Specify the input wrapper.
+ * @param {string} placeholder - Specify the PlaceHolder text.
+ */
+export function setPlaceHolder(value: number[] | string[] | boolean[], inputElement: HTMLInputElement, placeholder: string): void {
+    if (value && value.length) {
+        inputElement.placeholder = '';
+    } else {
+        inputElement.placeholder = placeholder;
+    }
+}
+
+/**
+ * Function for focusing the Float Element.
+ *
+ * @param {HTMLDivElement} overAllWrapper - Overall wrapper of multiselect.
+ * @param {HTMLDivElement} componentWrapper - Wrapper element of multiselect.
+ */
+export function floatLabelFocus(overAllWrapper: HTMLDivElement, componentWrapper: HTMLDivElement): void {
+    overAllWrapper.classList.add('e-input-focus');
+    const label: Element = componentWrapper.querySelector('.' + FLOATTEXT);
+    if (!isNullOrUndefined(label)) {
+        addClass([label], LABELTOP);
+        if (label.classList.contains(LABELBOTTOM)) {
+            removeClass([label], LABELBOTTOM);
+        }
+    }
+}
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/**
+ * Function to focus the Float Label element.
+ *
+ * @param {HTMLDivElement} overAllWrapper - Overall wrapper of multiselect.
+ * @param {HTMLDivElement} componentWrapper - Wrapper element of multiselect.
+ * @param {number[] | string[] | boolean[]} value - Value of the MultiSelect.
+ * @param {FloatLabelType} floatLabelType - Specify the FloatLabel Type.
+ * @param {string} placeholder - Specify the PlaceHolder text.
+ */
+export function floatLabelBlur(
+    overAllWrapper: HTMLDivElement,
+    componentWrapper: HTMLDivElement,
+    value: number[] | string[] | boolean[],
+    floatLabelType: FloatLabelType,
+    placeholder: string): void {
+/* eslint-enable @typescript-eslint/no-unused-vars */
+    overAllWrapper.classList.remove('e-input-focus');
+    const label: Element = componentWrapper.querySelector('.' + FLOATTEXT);
+    if (value && value.length <= 0 && floatLabelType === 'Auto' && !isNullOrUndefined(label)) {
+        if (label.classList.contains(LABELTOP)) {
+            removeClass([label], LABELTOP);
+        }
+        addClass([label], LABELBOTTOM);
+    }
+}
+export function encodePlaceholder(placeholder: string): string {
+    let result: string = '';
+    if (!isNullOrUndefined(placeholder) && placeholder !== '') {
+        const spanElement: HTMLElement = document.createElement('span');
+        spanElement.innerHTML = '<input  placeholder="' + placeholder + '"/>';
+        const hiddenInput: HTMLInputElement = (spanElement.children[0]) as HTMLInputElement;
+        result = hiddenInput.placeholder;
+    }
+    return result;
+}
+/* eslint-enable valid-jsdoc */

package/dist/ts/multi-select/interface.ts

@@ -0,0 +1,70 @@
+import { Component, KeyboardEventArgs } from '@syncfusion/ej2-base';
+import { Popup } from '@syncfusion/ej2-popups';
+/**
+ * Specifies mulitselct interfaces.
+ *
+ * @hidden
+ */
+
+
+export interface IMulitSelect extends Component<HTMLElement> {
+    listCurrentOptions?: { [key: string]: Object }
+    inputElement?: HTMLInputElement
+    popupWrapper?: HTMLDivElement
+    selectAll?(state?: boolean): void
+    selectAllHeight?: number
+    searchBoxHeight?: number
+    onInput?(): void
+    filterInput?: HTMLInputElement
+    keyUp?(e?: KeyboardEventArgs): void
+    onKeyDown?(e?: KeyboardEventArgs): void
+    mainList?: HTMLElement
+    list?: HTMLElement
+    listData?: { [key: string]: Object }[]
+    targetElement?(): string
+    targetInputElement?: HTMLInputElement | string
+    selectAllText?: string
+    unSelectAllText?: string
+    popupObj?: Popup
+    onDocumentFocus?: boolean
+    selectAllItems?(status: boolean, event?: MouseEvent): void
+    hidePopup?(): void
+    refreshPopup?(): void
+    refreshListItems?(data?: string): void
+    filterBarPlaceholder?: string
+    overAllWrapper?: HTMLDivElement
+    searchWrapper?: HTMLElement
+    componentWrapper?: HTMLDivElement
+    templateList?: { [key: string]: Object }
+    itemTemplate?: string
+    headerTemplate?: string
+    mobFilter?: boolean
+    header?: HTMLElement
+    updateDelimView?(): void
+    updateValueState?(event?: KeyboardEventArgs | MouseEvent, newVal?: [string | number], oldVal?: [string | number]): void
+    tempValues?: [number | string]
+    value?: [number | string]
+    refreshInputHight?(): void
+    refreshPlaceHolder?(): void
+    ulElement?: HTMLElement
+    hiddenElement?: HTMLSelectElement
+    dispatchEvent?(element?: HTMLElement, type?: string): void
+    inputFocus?: boolean
+    enableSelectionOrder?: boolean
+    focusAtFirstListItem(): void
+    isPopupOpen(): boolean
+    showSelectAll: boolean
+    scrollFocusStatus: boolean
+    focused: boolean
+    onBlurHandler(eve?: MouseEvent, isDocClickFromCheck?: boolean): void
+    keyAction?: boolean
+    removeFocus?(): void
+    getLocaleName?(): string
+    filterParent: HTMLElement
+    enableGroupCheckBox : boolean
+    pasteHandler?(e?: KeyboardEventArgs): void
+    cssClass: string
+    isDynamicDataChange?: boolean
+    search?(e: KeyboardEventArgs): void
+    allowFiltering?: boolean
+}