@xlabs-store/core 0.0.1 → 0.0.2

package/dist/collection/components/x-layout-list/x-layout-list.js

@@ -0,0 +1,619 @@
+import { Host, h } from "@stencil/core";
+const DEFAULT_HEADER = {
+    title: 'My Application',
+    sticky: true,
+    height: 64,
+};
+const DEFAULT_FOOTER = {
+    text: '',
+    show: false,
+};
+const DEFAULT_SIDER = {
+    show: true,
+    width: 220,
+    collapsedWidth: 80,
+    defaultCollapsed: false,
+    theme: 'light',
+    title: '',
+    logo: '',
+};
+const DEFAULT_CONTENT = {
+    breadcrumbs: [],
+    title: '',
+    loading: false,
+};
+/**
+ * A full-page layout component combining header, footer, collapsible sider menu,
+ * breadcrumb, content list, and pagination.
+ *
+ * Works as a shell — you slot your own list items into the content area.
+ *
+ * @example
+ * <x-layout-list
+ *   header-config={{ title: 'My App' }}
+ *   menu-items={[{ key: 'home', label: 'Home', icon: 'home' }]}
+ *   total={100}
+ *   page-size={10}
+ *   current={1}
+ * >
+ *   <x-list-item slot="list-items">Item 1</x-list-item>
+ * </x-layout-list>
+ */
+export class XLayoutList {
+    // ========================================
+    // PROPS — HEADER
+    // ========================================
+    /**
+     * Header configuration object (title, sticky, height).
+     */
+    headerConfig = {};
+    // ========================================
+    // PROPS — FOOTER
+    // ========================================
+    /**
+     * Footer configuration object (text, show).
+     */
+    footerConfig = {};
+    // ========================================
+    // PROPS — SIDER
+    // ========================================
+    /**
+     * Sider (sidebar menu) configuration object.
+     */
+    siderConfig = {};
+    /**
+     * Array of menu items to render in the sider.
+     * @example
+     * [{ key: 'home', label: 'Home', icon: 'home' }]
+     */
+    menuItems = [];
+    /**
+     * Currently selected menu key (controlled).
+     */
+    selectedMenuKey;
+    /**
+     * Currently expanded submenu keys (controlled).
+     */
+    openMenuKeys;
+    // ========================================
+    // PROPS — CONTENT
+    // ========================================
+    /**
+     * Content configuration object (breadcrumbs, title, loading).
+     */
+    contentConfig = {};
+    // ========================================
+    // PROPS — PAGINATION
+    // ========================================
+    /**
+     * Total number of items in the list.
+     */
+    total = 0;
+    /**
+     * Current page number (controlled).
+     */
+    current = 1;
+    /**
+     * Number of items per page.
+     */
+    pageSize = 10;
+    /**
+     * Whether to show page size changer.
+     */
+    showSizeChanger;
+    /**
+     * Options for page size selector.
+     */
+    pageSizeOptions = [10, 20, 50, 100];
+    /**
+     * Whether to hide pagination when there is only one page.
+     */
+    hideOnSinglePage = true;
+    // ========================================
+    // STATE
+    // ========================================
+    collapsed = false;
+    // ========================================
+    // EVENTS
+    // ========================================
+    /**
+     * Emitted when a menu item is clicked/selected.
+     * @example
+     * <x-layout-list (xMenuSelect)="onMenuSelect($event)">
+     */
+    xMenuSelect;
+    /**
+     * Emitted when page or page size changes.
+     * @example
+     * <x-layout-list (xPageChange)="onPageChange($event)">
+     */
+    xPageChange;
+    // ========================================
+    // LIFECYCLE
+    // ========================================
+    componentWillLoad() {
+        this.collapsed = this.sider.defaultCollapsed;
+    }
+    // ========================================
+    // WATCHERS
+    // ========================================
+    onSiderConfigChange() {
+        // keep collapsed in sync if defaultCollapsed changes externally
+    }
+    // ========================================
+    // HELPERS
+    // ========================================
+    get header() {
+        return { ...DEFAULT_HEADER, ...this.headerConfig };
+    }
+    get footer() {
+        return { ...DEFAULT_FOOTER, ...this.footerConfig };
+    }
+    get sider() {
+        return { ...DEFAULT_SIDER, ...this.siderConfig };
+    }
+    get content() {
+        return { ...DEFAULT_CONTENT, ...this.contentConfig };
+    }
+    // ========================================
+    // HANDLERS
+    // ========================================
+    handleCollapseToggle = () => {
+        this.collapsed = !this.collapsed;
+    };
+    handleMenuSelect = (ev) => {
+        const key = ev.detail?.key;
+        if (!key)
+            return;
+        this.selectedMenuKey = key;
+        const found = this.findMenuItem(this.menuItems, key);
+        this.xMenuSelect.emit({ key, item: found });
+    };
+    handlePageChange = (ev) => {
+        const { current, pageSize } = ev.detail;
+        this.current = current;
+        this.pageSize = pageSize;
+        this.xPageChange.emit({ current, pageSize });
+    };
+    findMenuItem(items, key) {
+        for (const item of items) {
+            if (item.key === key)
+                return item;
+            if (item.children) {
+                const found = this.findMenuItem(item.children, key);
+                if (found)
+                    return found;
+            }
+        }
+        return undefined;
+    }
+    // ========================================
+    // RENDER HELPERS
+    // ========================================
+    renderHeader() {
+        const cfg = this.header;
+        return (h("div", { class: "xll-header" }, h("div", { class: "xll-header-left" }, h("slot", { name: "header-logo" }, h("div", { class: "xll-header-title" }, cfg.title))), h("div", { class: "xll-header-center" }, h("slot", { name: "header-center" })), h("div", { class: "xll-header-actions" }, h("slot", { name: "header-actions" }))));
+    }
+    renderSiderLogo() {
+        const cfg = this.sider;
+        const showLogo = cfg.logo || cfg.title;
+        if (!showLogo)
+            return null;
+        return (h("div", { class: "xll-sider-logo" }, h("slot", { name: "sider-logo" }, cfg.logo && h("img", { src: cfg.logo, alt: cfg.title }), h("span", { class: "xll-sider-logo-title" }, cfg.title))));
+    }
+    renderMenuItems(items, level = 0) {
+        return items.map(item => {
+            if (item.children && item.children.length > 0) {
+                return (h("x-menu-submenu", { "item-key": item.key, disabled: item.disabled }, item.icon && h("x-icon", { slot: "icon", name: item.icon }), h("span", { slot: "title" }, item.label), this.renderMenuItems(item.children, level + 1)));
+            }
+            return (h("x-menu-item", { "item-key": item.key, disabled: item.disabled }, item.icon && h("x-icon", { slot: "icon", name: item.icon }), item.label));
+        });
+    }
+    renderSider() {
+        const cfg = this.sider;
+        if (!cfg.show)
+            return null;
+        const isDark = cfg.theme === 'dark';
+        return (h("div", { class: {
+                'xll-sider': true,
+                'xll-sider--collapsed': this.collapsed,
+                'xll-sider--dark': isDark,
+            } }, this.renderSiderLogo(), h("slot", { name: "sider-menu-before" }), h("div", { class: "xll-sider-menu-wrap" }, h("x-menu", { mode: "inline", theme: cfg.theme, "inline-collapsed": this.collapsed, "selected-keys": this.selectedMenuKey ? [this.selectedMenuKey] : undefined, "open-keys": this.openMenuKeys, onXSelect: this.handleMenuSelect }, this.renderMenuItems(this.menuItems))), h("slot", { name: "sider-menu-after" }), h("div", { class: "xll-sider-collapse-trigger", onClick: this.handleCollapseToggle, title: this.collapsed ? 'Expand' : 'Collapse' }, h("slot", { name: "sider-collapse-trigger" }, h("x-icon", { name: this.collapsed ? 'menu_open' : 'menu' })))));
+    }
+    renderBreadcrumb(items) {
+        if (!items || items.length === 0)
+            return null;
+        return (h("x-breadcrumb", null, items.map(item => (h("x-breadcrumb-item", { href: item.href }, item.label)))));
+    }
+    renderToolbar() {
+        const cfg = this.content;
+        const hasBreadcrumb = cfg.breadcrumbs && cfg.breadcrumbs.length > 0;
+        const hasTitle = !!cfg.title;
+        if (!hasBreadcrumb && !hasTitle) {
+            return (h("div", { class: "xll-toolbar" }, h("div", { class: "xll-toolbar-left" }, h("slot", { name: "toolbar-extra" })), h("div", { class: "xll-toolbar-actions" }, h("slot", { name: "toolbar-actions" }))));
+        }
+        return (h("div", { class: "xll-toolbar" }, h("div", { class: "xll-toolbar-left" }, h("slot", { name: "toolbar-breadcrumb" }, hasBreadcrumb && this.renderBreadcrumb(cfg.breadcrumbs)), h("slot", { name: "toolbar-title" }, hasTitle && h("h2", { class: "xll-toolbar-title" }, cfg.title)), h("slot", { name: "toolbar-extra" })), h("div", { class: "xll-toolbar-actions" }, h("slot", { name: "toolbar-actions" }))));
+    }
+    renderPagination() {
+        const totalPages = Math.ceil(this.total / this.pageSize);
+        if (this.hideOnSinglePage && totalPages <= 1)
+            return null;
+        if (this.total <= 0)
+            return null;
+        return (h("div", { class: "xll-pagination" }, h("slot", { name: "pagination-before" }), h("x-pagination", { total: this.total, current: this.current, pageSize: this.pageSize, showSizeChanger: this.showSizeChanger, pageSizeOptions: this.pageSizeOptions, hideOnSinglePage: this.hideOnSinglePage, onXChange: this.handlePageChange }), h("slot", { name: "pagination-after" })));
+    }
+    renderFooter() {
+        const cfg = this.footer;
+        if (!cfg.show)
+            return null;
+        return (h("div", { class: "xll-footer" }, h("slot", { name: "footer" }, cfg.text)));
+    }
+    // ========================================
+    // MAIN RENDER
+    // ========================================
+    render() {
+        const cfg = this.content;
+        return (h(Host, { key: '538439f32386c2147e13bba1306bab3cf43d6090' }, h("div", { key: '7181281c43156112a3e9ee035792695b4483fca9', class: "xll-root" }, this.renderHeader(), h("div", { key: '17bc7dc266f732204fcbe8343aa64357de5bdfe3', class: "xll-body" }, this.renderSider(), h("main", { key: '3cde0e9d00589eb314a19476f6fc24cfbe872db3', class: "xll-content" }, this.renderToolbar(), h("slot", { key: 'f2d48c64b7cce47fdc96e10ec0b2fba994ba95eb', name: "content-before" }), h("div", { key: '0dcc464984971a5c2c7f6cf3b6de838bd360dfed', class: "xll-list-wrap" }, h("x-list", { key: '03d4791e3364c8d6976480a8eb2cf1da7f8a39f5', loading: cfg.loading, bordered: false, split: true }, h("slot", { key: 'cb13b6db5034c2f366378a21b0fced191647d43a', name: "list-items" }))), h("slot", { key: '7942cb1a61320a7fd14c51e8e0bcf331f2dd7d58', name: "content-after" }), this.renderPagination())), this.renderFooter())));
+    }
+    static get is() { return "x-layout-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-layout-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-layout-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "headerConfig": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LayoutListHeaderConfig",
+                    "resolved": "LayoutListHeaderConfig",
+                    "references": {
+                        "LayoutListHeaderConfig": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-layout-list/types.ts::LayoutListHeaderConfig",
+                            "referenceLocation": "LayoutListHeaderConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header configuration object (title, sticky, height)."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "footerConfig": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LayoutListFooterConfig",
+                    "resolved": "LayoutListFooterConfig",
+                    "references": {
+                        "LayoutListFooterConfig": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-layout-list/types.ts::LayoutListFooterConfig",
+                            "referenceLocation": "LayoutListFooterConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Footer configuration object (text, show)."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "siderConfig": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LayoutListSiderConfig",
+                    "resolved": "LayoutListSiderConfig",
+                    "references": {
+                        "LayoutListSiderConfig": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-layout-list/types.ts::LayoutListSiderConfig",
+                            "referenceLocation": "LayoutListSiderConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sider (sidebar menu) configuration object."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "menuItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LayoutListMenuItem[]",
+                    "resolved": "LayoutListMenuItem[]",
+                    "references": {
+                        "LayoutListMenuItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-layout-list/types.ts::LayoutListMenuItem",
+                            "referenceLocation": "LayoutListMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "[{ key: 'home', label: 'Home', icon: 'home' }]"
+                        }],
+                    "text": "Array of menu items to render in the sider."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "selectedMenuKey": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected menu key (controlled)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-menu-key"
+            },
+            "openMenuKeys": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently expanded submenu keys (controlled)."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "contentConfig": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LayoutListContentConfig",
+                    "resolved": "LayoutListContentConfig",
+                    "references": {
+                        "LayoutListContentConfig": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-layout-list/types.ts::LayoutListContentConfig",
+                            "referenceLocation": "LayoutListContentConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Content configuration object (breadcrumbs, title, loading)."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "total": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of items in the list."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total",
+                "defaultValue": "0"
+            },
+            "current": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current page number (controlled)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current",
+                "defaultValue": "1"
+            },
+            "pageSize": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of items per page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-size",
+                "defaultValue": "10"
+            },
+            "showSizeChanger": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show page size changer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-size-changer"
+            },
+            "pageSizeOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Options for page size selector."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[10, 20, 50, 100]"
+            },
+            "hideOnSinglePage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to hide pagination when there is only one page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-on-single-page",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "collapsed": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xMenuSelect",
+                "name": "xMenuSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-layout-list (xMenuSelect)=\"onMenuSelect($event)\">"
+                        }],
+                    "text": "Emitted when a menu item is clicked/selected."
+                },
+                "complexType": {
+                    "original": "LayoutListMenuSelectDetail",
+                    "resolved": "LayoutListMenuSelectDetail",
+                    "references": {
+                        "LayoutListMenuSelectDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-layout-list/types.ts::LayoutListMenuSelectDetail",
+                            "referenceLocation": "LayoutListMenuSelectDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xPageChange",
+                "name": "xPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-layout-list (xPageChange)=\"onPageChange($event)\">"
+                        }],
+                    "text": "Emitted when page or page size changes."
+                },
+                "complexType": {
+                    "original": "LayoutListPageChangeDetail",
+                    "resolved": "LayoutListPageChangeDetail",
+                    "references": {
+                        "LayoutListPageChangeDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-layout-list/types.ts::LayoutListPageChangeDetail",
+                            "referenceLocation": "LayoutListPageChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "siderConfig",
+                "methodName": "onSiderConfigChange"
+            }];
+    }
+}

package/dist/collection/components/x-list/x-list.css

@@ -96,6 +96,7 @@
   --x-color-text-label: rgba(0, 0, 0, 0.65);
   --x-color-text-description: rgba(0, 0, 0, 0.45);
   --x-color-text-light-solid: #ffffff;
+  --x-color-text-processing: #ffffff;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -138,8 +139,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --x-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --x-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --x-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --x-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;

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

@@ -119,13 +119,13 @@ export class XList {
         // Determine whether to render dataSource or slot items.
         const hasDataSource = this.dataSource && this.dataSource.length > 0;
         const itemsToShow = hasDataSource ? this.dataSource.slice(0, this.visibleCount) : [];
-        return (h(Host, { key: '5ffe2ee8f69f6b320006f59c0b7b4ab1b6763eac', class: {
+        return (h(Host, { key: '4dd254191141d836a5177990a35eab59c07a9d35', class: {
                 'x-list': true,
                 'x-list-bordered': this.bordered,
                 'x-list-split': this.split,
                 [`x-list-${this.size}`]: true,
                 'x-list-loading': this.loading,
-            }, onScroll: this.handleScroll, style: this.infiniteScroll ? { overflowY: 'auto', maxHeight: '100%' } : {} }, this.headerText && h("div", { key: '869fff1ae465cff9cce4f7e2fa9eb01b858963d4', class: "x-list-header" }, this.headerText), h("slot", { key: 'd59c70b4d8cf864517ac14ac12fb52c7fb4db401', name: "header" }), this.loading ? (h("div", { class: "x-list-spin" }, h("x-spin", null))) : (h("div", { class: "x-list-items" }, hasDataSource ? (itemsToShow.map((item, index) => (this.renderItem ? this.renderItem(item, index) : h("x-list-item", null, String(item))))) : (h("slot", null)))), this.footerText && h("div", { key: '95f7dc3a40c4d3c74ba156cc0a6dca2537329e87', class: "x-list-footer" }, this.footerText), h("slot", { key: '0134301fac697ec64632a28da4dbb85061c56acc', name: "footer" })));
+            }, onScroll: this.handleScroll, style: this.infiniteScroll ? { overflowY: 'auto', maxHeight: '100%' } : {} }, this.headerText && h("div", { key: '4d93693dde41c5f3906f81e2413eb10340c260f0', class: "x-list-header" }, this.headerText), h("slot", { key: '766289b37c14bd720d253cb160ff8c8f663ece92', name: "header" }), this.loading ? (h("div", { class: "x-list-spin" }, h("x-spin", null))) : (h("div", { class: "x-list-items" }, hasDataSource ? itemsToShow.map((item, index) => (this.renderItem ? this.renderItem(item, index) : h("x-list-item", null, String(item)))) : h("slot", null))), this.footerText && h("div", { key: 'e82638a4ab291a6f632c90fc97d07a9c51b3af08', class: "x-list-footer" }, this.footerText), h("slot", { key: '11bbdb509e724d5d6f1533464fa1275175a015d9', name: "footer" })));
     }
     static get is() { return "x-list"; }
     static get encapsulation() { return "shadow"; }
@@ -310,7 +310,7 @@ export class XList {
                 "docs": {
                     "tags": [{
                             "name": "example",
-                            "text": "<x-list\r\n  dataSource={[{ name: 'A' }]}\r\n  renderItem={(item) => <x-list-item>{item.name}</x-list-item>}\r\n></x-list>"
+                            "text": "<x-list\n  dataSource={[{ name: 'A' }]}\n  renderItem={(item) => <x-list-item>{item.name}</x-list-item>}\n></x-list>"
                         }],
                     "text": "Custom render function for items (when using dataSource)."
                 },