@xlabs-store/core 0.0.1

package/dist/collection/components/x-transfer/x-transfer.js

@@ -0,0 +1,956 @@
+import { Host, h } from "@stencil/core";
+import { translate } from "../../locales/locale.service";
+import { getIcon } from "../../utils/config";
+export class XTransfer {
+    /**
+     * Host element reference.
+     */
+    el;
+    /**
+     * Data source for transfer
+     * @example
+     * <x-transfer dataSource={[{ key: '1', title: 'A' }]}></x-transfer>
+     */
+    dataSource = [];
+    /**
+     * Keys of items in target list
+     * @example
+     * <x-transfer targetKeys={['1']}></x-transfer>
+     */
+    targetKeys = [];
+    /**
+     * Keys of selected items
+     * @example
+     * <x-transfer selectedKeys={['2']}></x-transfer>
+     */
+    selectedKeys = [];
+    /**
+     * Titles for source and target lists
+     * @example
+     * <x-transfer titles={['Left','Right']}></x-transfer>
+     */
+    titles = [translate('Transfer.title.source', {}, 'Source'), translate('Transfer.title.target', {}, 'Target')];
+    /**
+     * Text for operation buttons ['toLeft', 'toRight']
+     * @example
+     * <x-transfer operations={['To left','To right']}></x-transfer>
+     */
+    operations = ['', ''];
+    /**
+     * Whether the transfer is disabled
+     * @example
+     * <x-transfer disabled></x-transfer>
+     */
+    disabled = false;
+    /**
+     * Show search input
+     * @example
+     * <x-transfer showSearch></x-transfer>
+     */
+    showSearch = false;
+    /**
+     * Placeholder for search input
+     * @example
+     * <x-transfer searchPlaceholder="Search items"></x-transfer>
+     */
+    searchPlaceholder = translate('Transfer.searchPlaceholder', {}, 'Search here');
+    /**
+     * Not found content
+     * @example
+     * <x-transfer notFoundContent="No data"></x-transfer>
+     */
+    notFoundContent = translate('Transfer.notFoundContent', {}, 'No data');
+    /**
+     * Whether to display items with one-way style
+     * @example
+     * <x-transfer oneWay></x-transfer>
+     */
+    oneWay = false;
+    /**
+     * Show select all checkbox in header
+     * @example
+     * <x-transfer showSelectAll={false}></x-transfer>
+     */
+    showSelectAll = true;
+    /**
+     * Width of list container
+     * @example
+     * <x-transfer listWidth="220px"></x-transfer>
+     */
+    listWidth = '180px';
+    /**
+     * Height of list container
+     * @example
+     * <x-transfer listHeight="360px"></x-transfer>
+     */
+    listHeight = '300px';
+    /**
+     * Use pagination
+     * @example
+     * <x-transfer pagination></x-transfer>
+     */
+    pagination = false;
+    /**
+     * Page size for pagination
+     * @example
+     * <x-transfer pageSize={20}></x-transfer>
+     */
+    pageSize = 10;
+    /**
+     * Source list search value.
+     */
+    sourceSearchValue = '';
+    /**
+     * Target list search value.
+     */
+    targetSearchValue = '';
+    /**
+     * Source list current page.
+     */
+    sourceCurrentPage = 1;
+    /**
+     * Target list current page.
+     */
+    targetCurrentPage = 1;
+    /**
+     * Emitted when items are moved.
+     * @example
+     * <x-transfer onXChange={(ev) => console.log(ev.detail)}></x-transfer>
+     */
+    xChange;
+    /**
+     * Emitted when selection changes.
+     * @example
+     * <x-transfer onXSelectChange={(ev) => console.log(ev.detail)}></x-transfer>
+     */
+    xSelectChange;
+    /**
+     * Emitted when search changes.
+     * @example
+     * <x-transfer onXSearch={(ev) => console.log(ev.detail)}></x-transfer>
+     */
+    xSearch;
+    /**
+     * Emitted when list scrolls.
+     * @example
+     * <x-transfer onXScroll={(ev) => console.log(ev.detail)}></x-transfer>
+     */
+    xScroll;
+    /**
+     * Reset pagination when target keys change.
+     * @returns void
+     */
+    watchTargetKeys() {
+        // Reset pagination when target changes
+        this.sourceCurrentPage = 1;
+        this.targetCurrentPage = 1;
+    }
+    /**
+     * Get source items.
+     * @returns TransferItem[]
+     */
+    getSourceItems() {
+        return this.dataSource.filter(item => !this.targetKeys.includes(item.key));
+    }
+    /**
+     * Get target items.
+     * @returns TransferItem[]
+     */
+    getTargetItems() {
+        return this.dataSource.filter(item => this.targetKeys.includes(item.key));
+    }
+    /**
+     * Filter items by search value.
+     * @param items - Items to filter.
+     * @param searchValue - Search text.
+     * @returns TransferItem[]
+     */
+    getFilteredItems(items, searchValue) {
+        if (!searchValue)
+            return items;
+        const lowerSearch = searchValue.toLowerCase();
+        return items.filter(item => item.title.toLowerCase().includes(lowerSearch) ||
+            (item.description && item.description.toLowerCase().includes(lowerSearch)));
+    }
+    /**
+     * Apply pagination to items.
+     * @param items - Items to paginate.
+     * @param currentPage - Current page.
+     * @returns TransferItem[]
+     */
+    getPagedItems(items, currentPage) {
+        if (!this.pagination)
+            return items;
+        const start = (currentPage - 1) * this.pageSize;
+        return items.slice(start, start + this.pageSize);
+    }
+    /**
+     * Get selected keys for source/target list.
+     * @param direction - List direction.
+     * @returns string[]
+     */
+    getSelectedKeysForDirection(direction) {
+        const items = direction === 'left' ? this.getSourceItems() : this.getTargetItems();
+        const itemKeys = items.map(i => i.key);
+        return this.selectedKeys.filter(k => itemKeys.includes(k));
+    }
+    /**
+     * Determine if all items are selected in a list.
+     * @param direction - List direction.
+     * @returns boolean
+     */
+    isAllSelected(direction) {
+        const items = direction === 'left' ? this.getSourceItems() : this.getTargetItems();
+        const searchValue = direction === 'left' ? this.sourceSearchValue : this.targetSearchValue;
+        const filteredItems = this.getFilteredItems(items, searchValue).filter(i => !i.disabled);
+        if (filteredItems.length === 0)
+            return false;
+        return filteredItems.every(item => this.selectedKeys.includes(item.key));
+    }
+    /**
+     * Determine if selection is indeterminate.
+     * @param direction - List direction.
+     * @returns boolean
+     */
+    isIndeterminate(direction) {
+        const items = direction === 'left' ? this.getSourceItems() : this.getTargetItems();
+        const searchValue = direction === 'left' ? this.sourceSearchValue : this.targetSearchValue;
+        const filteredItems = this.getFilteredItems(items, searchValue).filter(i => !i.disabled);
+        const selectedCount = filteredItems.filter(item => this.selectedKeys.includes(item.key)).length;
+        return selectedCount > 0 && selectedCount < filteredItems.length;
+    }
+    /**
+     * Handle select-all toggle.
+     * @param direction - List direction.
+     * @returns void
+     */
+    handleSelectAll(direction) {
+        if (this.disabled)
+            return;
+        const items = direction === 'left' ? this.getSourceItems() : this.getTargetItems();
+        const searchValue = direction === 'left' ? this.sourceSearchValue : this.targetSearchValue;
+        const filteredItems = this.getFilteredItems(items, searchValue).filter(i => !i.disabled);
+        const filteredKeys = filteredItems.map(i => i.key);
+        const isAllSelected = this.isAllSelected(direction);
+        let newSelectedKeys = [...this.selectedKeys];
+        if (isAllSelected) {
+            // Deselect all in this direction
+            newSelectedKeys = newSelectedKeys.filter(k => !filteredKeys.includes(k));
+        }
+        else {
+            // Select all in this direction
+            filteredKeys.forEach(k => {
+                if (!newSelectedKeys.includes(k)) {
+                    newSelectedKeys.push(k);
+                }
+            });
+        }
+        this.selectedKeys = newSelectedKeys;
+        this.emitSelectChange();
+    }
+    /**
+     * Handle item select toggle.
+     * @param key - Item key.
+     * @param item - Item data.
+     * @returns void
+     */
+    handleSelect(key, item) {
+        if (this.disabled || item.disabled)
+            return;
+        let newSelectedKeys = [...this.selectedKeys];
+        if (newSelectedKeys.includes(key)) {
+            newSelectedKeys = newSelectedKeys.filter(k => k !== key);
+        }
+        else {
+            newSelectedKeys.push(key);
+        }
+        this.selectedKeys = newSelectedKeys;
+        this.emitSelectChange();
+    }
+    /**
+     * Emit selection change event.
+     * @returns void
+     */
+    emitSelectChange() {
+        const sourceSelectedKeys = this.getSelectedKeysForDirection('left');
+        const targetSelectedKeys = this.getSelectedKeysForDirection('right');
+        this.xSelectChange.emit({ sourceSelectedKeys, targetSelectedKeys });
+    }
+    /**
+     * Move selected items between lists.
+     * @param direction - Move direction.
+     * @returns void
+     */
+    moveTo(direction) {
+        if (this.disabled)
+            return;
+        const sourceSelectedKeys = this.getSelectedKeysForDirection('left');
+        const targetSelectedKeys = this.getSelectedKeysForDirection('right');
+        let moveKeys = [];
+        let newTargetKeys = [...this.targetKeys];
+        if (direction === 'right') {
+            moveKeys = sourceSelectedKeys;
+            newTargetKeys = [...newTargetKeys, ...moveKeys];
+        }
+        else {
+            moveKeys = targetSelectedKeys;
+            newTargetKeys = newTargetKeys.filter(k => !moveKeys.includes(k));
+        }
+        // Remove moved keys from selection
+        this.selectedKeys = this.selectedKeys.filter(k => !moveKeys.includes(k));
+        this.targetKeys = newTargetKeys;
+        this.xChange.emit({ targetKeys: newTargetKeys, direction, moveKeys });
+        this.emitSelectChange();
+    }
+    /**
+     * Handle search input change.
+     * @param direction - List direction.
+     * @param value - Search value.
+     * @returns void
+     */
+    handleSearch(direction, value) {
+        if (direction === 'left') {
+            this.sourceSearchValue = value;
+            this.sourceCurrentPage = 1;
+        }
+        else {
+            this.targetSearchValue = value;
+            this.targetCurrentPage = 1;
+        }
+        this.xSearch.emit({ direction, value });
+    }
+    /**
+     * Clear search input.
+     * @param direction - List direction.
+     * @returns void
+     */
+    handleClearSearch(direction) {
+        this.handleSearch(direction, '');
+    }
+    /**
+     * Handle pagination change.
+     * @param direction - List direction.
+     * @param page - Page number.
+     * @returns void
+     */
+    handlePageChange(direction, page) {
+        if (direction === 'left') {
+            this.sourceCurrentPage = page;
+        }
+        else {
+            this.targetCurrentPage = page;
+        }
+    }
+    /**
+     * Handle list scroll.
+     * @param direction - List direction.
+     * @param _event - Scroll event.
+     * @returns void
+     */
+    handleScroll(direction, _event) {
+        this.xScroll.emit({ direction });
+    }
+    /**
+     * Render search input.
+     * @param direction - List direction.
+     * @returns JSX.Element | null
+     */
+    renderSearch(direction) {
+        if (!this.showSearch)
+            return null;
+        const value = direction === 'left' ? this.sourceSearchValue : this.targetSearchValue;
+        return (h("div", { class: "x-transfer-list-body-search-wrapper" }, h("input", { type: "text", class: "x-transfer-list-search", placeholder: this.searchPlaceholder, value: value, disabled: this.disabled, onInput: (e) => this.handleSearch(direction, e.target.value) }), value && (h("span", { class: "x-transfer-list-search-clear", onClick: () => this.handleClearSearch(direction) }, h("x-icon", { name: getIcon('clear') })))));
+    }
+    /**
+     * Render pagination controls.
+     * @param direction - List direction.
+     * @param totalItems - Item count.
+     * @returns JSX.Element | null
+     */
+    renderPagination(direction, totalItems) {
+        if (!this.pagination || totalItems <= this.pageSize)
+            return null;
+        const currentPage = direction === 'left' ? this.sourceCurrentPage : this.targetCurrentPage;
+        const totalPages = Math.ceil(totalItems / this.pageSize);
+        return (h("div", { class: "x-transfer-list-pagination" }, h("button", { class: "x-transfer-list-pagination-btn", disabled: currentPage <= 1, onClick: () => this.handlePageChange(direction, currentPage - 1) }, h("x-icon", { name: getIcon('arrowLeft') })), h("span", { class: "x-transfer-list-pagination-info" }, currentPage, " / ", totalPages), h("button", { class: "x-transfer-list-pagination-btn", disabled: currentPage >= totalPages, onClick: () => this.handlePageChange(direction, currentPage + 1) }, h("x-icon", { name: getIcon('arrowRight') }))));
+    }
+    /**
+     * Renders a single transfer list (left or right).
+     *
+     * Flow:
+     * 1. Determines list configuration based on direction (title, items, search, pagination).
+     * 2. Filters and paginates items.
+     * 3. Calculates selection state (count, checked items, indeterminate status).
+     * 4. Renders:
+     *    - Header: Select all checkbox, item count, title.
+     *    - Search: Input field (if enabled).
+     *    - Body: List of items (or empty state).
+     *      - Each item has a checkbox and optional delete button (for one-way mode).
+     *    - Footer: Pagination controls (if enabled).
+     *
+     * @param direction - 'left' (source) or 'right' (target).
+     * @returns JSX.Element - The list container.
+     */
+    renderList(direction) {
+        const isLeft = direction === 'left';
+        const title = isLeft ? this.titles[0] : this.titles[1];
+        const allItems = isLeft ? this.getSourceItems() : this.getTargetItems();
+        const searchValue = isLeft ? this.sourceSearchValue : this.targetSearchValue;
+        const currentPage = isLeft ? this.sourceCurrentPage : this.targetCurrentPage;
+        const filteredItems = this.getFilteredItems(allItems, searchValue);
+        const pagedItems = this.getPagedItems(filteredItems, currentPage);
+        const selectedKeys = this.getSelectedKeysForDirection(direction);
+        const selectableItems = filteredItems.filter(i => !i.disabled);
+        const selectedCount = selectableItems.filter(i => selectedKeys.includes(i.key)).length;
+        const isAllChecked = this.isAllSelected(direction);
+        const isIndeterminate = this.isIndeterminate(direction);
+        return (h("div", { class: "x-transfer-list", style: { width: this.listWidth, height: this.listHeight } }, h("div", { class: "x-transfer-list-header" }, this.showSelectAll && (h("span", { class: {
+                'x-transfer-list-header-checkbox': true,
+                'x-transfer-list-header-checkbox-checked': isAllChecked,
+                'x-transfer-list-header-checkbox-indeterminate': isIndeterminate,
+            }, onClick: () => this.handleSelectAll(direction) }, h("span", { class: "x-transfer-checkbox-inner" }))), h("span", { class: "x-transfer-list-header-title" }, selectedCount > 0 && h("span", { class: "x-transfer-list-header-selected" }, selectedCount, "/"), filteredItems.length, " ", title)), this.renderSearch(direction), h("ul", { class: "x-transfer-list-content", onScroll: (e) => this.handleScroll(direction, e) }, pagedItems.length === 0 ? (h("li", { class: "x-transfer-list-content-empty" }, h("x-empty", { description: this.notFoundContent }))) : (pagedItems.map(item => {
+            const checked = this.selectedKeys.includes(item.key);
+            const itemDisabled = item.disabled || this.disabled;
+            return (h("li", { class: {
+                    'x-transfer-list-content-item': true,
+                    'x-transfer-list-content-item-checked': checked,
+                    'x-transfer-list-content-item-disabled': itemDisabled,
+                }, onClick: () => this.handleSelect(item.key, item) }, h("span", { class: {
+                    'x-transfer-checkbox': true,
+                    'x-transfer-checkbox-checked': checked,
+                    'x-transfer-checkbox-disabled': itemDisabled,
+                } }, h("span", { class: "x-transfer-checkbox-inner" })), h("span", { class: "x-transfer-list-content-item-text" }, item.title, item.description && (h("span", { class: "x-transfer-list-content-item-description" }, item.description))), this.oneWay && !isLeft && (h("span", { class: "x-transfer-list-content-item-remove", onClick: (e) => {
+                    e.stopPropagation();
+                    this.targetKeys = this.targetKeys.filter(k => k !== item.key);
+                    this.xChange.emit({
+                        targetKeys: this.targetKeys,
+                        direction: 'left',
+                        moveKeys: [item.key]
+                    });
+                } }, h("x-icon", { name: getIcon('delete') })))));
+        }))), this.renderPagination(direction, filteredItems.length)));
+    }
+    /**
+     * Renders the operation buttons between the two lists.
+     *
+     * Flow:
+     * 1. Checks `oneWay` prop.
+     * 2. If one-way: renders only a "Right" button (active if left items selected).
+     * 3. If two-way: renders both "Left" and "Right" buttons.
+     * 4. Buttons are disabled if no items are selected in the source list.
+     *
+     * @returns JSX.Element - The operations container.
+     */
+    renderOperations() {
+        if (this.oneWay) {
+            // One-way mode: only show move to right button
+            const sourceSelectedKeys = this.getSelectedKeysForDirection('left');
+            return (h("div", { class: "x-transfer-operation" }, h("button", { class: {
+                    'x-transfer-operation-btn': true,
+                    'x-transfer-operation-btn-disabled': this.disabled || sourceSelectedKeys.length === 0,
+                }, disabled: this.disabled || sourceSelectedKeys.length === 0, onClick: () => this.moveTo('right') }, h("x-icon", { name: getIcon('doubleArrowRight') }))));
+        }
+        const sourceSelectedKeys = this.getSelectedKeysForDirection('left');
+        const targetSelectedKeys = this.getSelectedKeysForDirection('right');
+        return (h("div", { class: "x-transfer-operation" }, h("button", { class: {
+                'x-transfer-operation-btn': true,
+                'x-transfer-operation-btn-disabled': this.disabled || sourceSelectedKeys.length === 0,
+            }, disabled: this.disabled || sourceSelectedKeys.length === 0, onClick: () => this.moveTo('right') }, h("x-icon", { name: getIcon('doubleArrowRight') }), this.operations[1]), h("button", { class: {
+                'x-transfer-operation-btn': true,
+                'x-transfer-operation-btn-disabled': this.disabled || targetSelectedKeys.length === 0,
+            }, disabled: this.disabled || targetSelectedKeys.length === 0, onClick: () => this.moveTo('left') }, h("x-icon", { name: getIcon('doubleArrowLeft') }), this.operations[0])));
+    }
+    /**
+     * Main render method for the Transfer component.
+     *
+     * Structure:
+     * - Host element.
+     * - Left List (Source).
+     * - Operation Buttons.
+     * - Right List (Target).
+     *
+     * @returns JSX.Element
+     */
+    render() {
+        return (h(Host, { key: 'bf4d435040edf41ca00174e66584923041552230', class: {
+                'x-transfer': true,
+                'x-transfer-disabled': this.disabled,
+            } }, this.renderList('left'), this.renderOperations(), this.renderList('right')));
+    }
+    static get is() { return "x-transfer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-transfer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-transfer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dataSource": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TransferItem[]",
+                    "resolved": "TransferItem[]",
+                    "references": {
+                        "TransferItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-transfer/types.ts::TransferItem",
+                            "referenceLocation": "TransferItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-transfer dataSource={[{ key: '1', title: 'A' }]}></x-transfer>"
+                        }],
+                    "text": "Data source for transfer"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "targetKeys": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-transfer targetKeys={['1']}></x-transfer>"
+                        }],
+                    "text": "Keys of items in target list"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "selectedKeys": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-transfer selectedKeys={['2']}></x-transfer>"
+                        }],
+                    "text": "Keys of selected items"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "titles": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-transfer titles={['Left','Right']}></x-transfer>"
+                        }],
+                    "text": "Titles for source and target lists"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[translate('Transfer.title.source', {}, 'Source'), translate('Transfer.title.target', {}, 'Target')]"
+            },
+            "operations": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-transfer operations={['To left','To right']}></x-transfer>"
+                        }],
+                    "text": "Text for operation buttons ['toLeft', 'toRight']"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "['', '']"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-transfer disabled></x-transfer>"
+                        }],
+                    "text": "Whether the transfer is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "showSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-transfer showSearch></x-transfer>"
+                        }],
+                    "text": "Show search input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-search",
+                "defaultValue": "false"
+            },
+            "searchPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-transfer searchPlaceholder=\"Search items\"></x-transfer>"
+                        }],
+                    "text": "Placeholder for search input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-placeholder",
+                "defaultValue": "translate('Transfer.searchPlaceholder', {}, 'Search here')"
+            },
+            "notFoundContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-transfer notFoundContent=\"No data\"></x-transfer>"
+                        }],
+                    "text": "Not found content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "not-found-content",
+                "defaultValue": "translate('Transfer.notFoundContent', {}, 'No data')"
+            },
+            "oneWay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-transfer oneWay></x-transfer>"
+                        }],
+                    "text": "Whether to display items with one-way style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "one-way",
+                "defaultValue": "false"
+            },
+            "showSelectAll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-transfer showSelectAll={false}></x-transfer>"
+                        }],
+                    "text": "Show select all checkbox in header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-select-all",
+                "defaultValue": "true"
+            },
+            "listWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-transfer listWidth=\"220px\"></x-transfer>"
+                        }],
+                    "text": "Width of list container"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "list-width",
+                "defaultValue": "'180px'"
+            },
+            "listHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-transfer listHeight=\"360px\"></x-transfer>"
+                        }],
+                    "text": "Height of list container"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "list-height",
+                "defaultValue": "'300px'"
+            },
+            "pagination": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-transfer pagination></x-transfer>"
+                        }],
+                    "text": "Use pagination"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pagination",
+                "defaultValue": "false"
+            },
+            "pageSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-transfer pageSize={20}></x-transfer>"
+                        }],
+                    "text": "Page size for pagination"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-size",
+                "defaultValue": "10"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "sourceSearchValue": {},
+            "targetSearchValue": {},
+            "sourceCurrentPage": {},
+            "targetCurrentPage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xChange",
+                "name": "xChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-transfer onXChange={(ev) => console.log(ev.detail)}></x-transfer>"
+                        }],
+                    "text": "Emitted when items are moved."
+                },
+                "complexType": {
+                    "original": "TransferChangeEvent",
+                    "resolved": "TransferChangeEvent",
+                    "references": {
+                        "TransferChangeEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-transfer/types.ts::TransferChangeEvent",
+                            "referenceLocation": "TransferChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xSelectChange",
+                "name": "xSelectChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-transfer onXSelectChange={(ev) => console.log(ev.detail)}></x-transfer>"
+                        }],
+                    "text": "Emitted when selection changes."
+                },
+                "complexType": {
+                    "original": "TransferSelectChangeEvent",
+                    "resolved": "TransferSelectChangeEvent",
+                    "references": {
+                        "TransferSelectChangeEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-transfer/types.ts::TransferSelectChangeEvent",
+                            "referenceLocation": "TransferSelectChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xSearch",
+                "name": "xSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-transfer onXSearch={(ev) => console.log(ev.detail)}></x-transfer>"
+                        }],
+                    "text": "Emitted when search changes."
+                },
+                "complexType": {
+                    "original": "TransferSearchEvent",
+                    "resolved": "TransferSearchEvent",
+                    "references": {
+                        "TransferSearchEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-transfer/types.ts::TransferSearchEvent",
+                            "referenceLocation": "TransferSearchEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xScroll",
+                "name": "xScroll",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-transfer onXScroll={(ev) => console.log(ev.detail)}></x-transfer>"
+                        }],
+                    "text": "Emitted when list scrolls."
+                },
+                "complexType": {
+                    "original": "TransferScrollEvent",
+                    "resolved": "TransferScrollEvent",
+                    "references": {
+                        "TransferScrollEvent": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-transfer/types.ts::TransferScrollEvent",
+                            "referenceLocation": "TransferScrollEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "targetKeys",
+                "methodName": "watchTargetKeys"
+            }];
+    }
+}