xmlui 0.10.13 → 0.10.15

package/dist/scripts/src/components/DropdownMenu/DropdownMenu.spec.js

@@ -0,0 +1,331 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../testing/fixtures");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+(0, fixtures_1.test)("renders with basic props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver }) {
+    yield initTestBed(`<DropdownMenu label="Menu" />`);
+    const driver = yield createDropdownMenuDriver();
+    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+}));
+(0, fixtures_1.test)("renders with menu items", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page }) {
+    yield initTestBed(`
+    <DropdownMenu label="Menu">
+      <MenuItem>Item 1</MenuItem>
+      <MenuItem>Item 2</MenuItem>
+    </DropdownMenu>
+  `);
+    const driver = yield createDropdownMenuDriver();
+    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    yield driver.open();
+    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 1" })).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 2" })).toBeVisible();
+}));
+(0, fixtures_1.test)("opens and closes menu correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page }) {
+    yield initTestBed(`
+    <DropdownMenu label="Menu">
+      <MenuItem>Item 1</MenuItem>
+    </DropdownMenu>
+  `);
+    const driver = yield createDropdownMenuDriver();
+    yield (0, fixtures_1.expect)(page.getByRole("menuitem")).not.toBeVisible();
+    yield driver.open();
+    yield (0, fixtures_1.expect)(page.getByRole("menuitem")).toBeVisible();
+    yield driver.close();
+    yield (0, fixtures_1.expect)(page.getByRole("menuitem")).not.toBeVisible();
+}));
+(0, fixtures_1.test)("handles menu item clicks", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page }) {
+    const { testStateDriver } = yield initTestBed(`
+    <DropdownMenu label="Menu">
+      <MenuItem onClick="testState = 'item1-clicked'">Item 1</MenuItem>
+      <MenuItem onClick="testState = 'item2-clicked'">Item 2</MenuItem>
+    </DropdownMenu>
+  `);
+    const driver = yield createDropdownMenuDriver();
+    yield driver.open();
+    yield driver.clickMenuItem("Item 1");
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("item1-clicked");
+    // Menu should close after click
+    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 1" })).not.toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 2" })).not.toBeVisible();
+}));
+(0, fixtures_1.test)("alignment='start' aligns popup menu left", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page, }) {
+    yield initTestBed(`
+    <HStack width="50%">
+      <DropdownMenu alignment="start" label="Menu">
+        <MenuItem >Item 1</MenuItem>
+        <MenuItem >Item 2</MenuItem>
+      </DropdownMenu>
+    </HStack>
+  `);
+    const driver = yield createDropdownMenuDriver();
+    yield driver.open();
+    const { x: triggerX } = yield driver.component.boundingBox();
+    const { x: menuX } = yield page.getByRole("menu").boundingBox();
+    (0, fixtures_1.expect)(menuX).toBeCloseTo(triggerX);
+}));
+(0, fixtures_1.test)("alignment='end' aligns popup menu right", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page, }) {
+    yield initTestBed(`
+    <HStack width="50%" reverse="true">
+      <DropdownMenu alignment="end" label="Menu">
+        <MenuItem >Item 1</MenuItem>
+        <MenuItem >Item 2</MenuItem>
+      </DropdownMenu>
+    </HStack>
+  `);
+    const driver = yield createDropdownMenuDriver();
+    yield driver.open();
+    const { width: triggerWidth, x: triggerX } = yield driver.component.boundingBox();
+    const { width: menuWidth, x: menuX } = yield page.getByRole("menu").boundingBox();
+    const menuEndX = menuX + menuWidth;
+    const triggerEndX = triggerX + triggerWidth;
+    (0, fixtures_1.expect)(menuEndX).toBeCloseTo(triggerEndX);
+}));
+(0, fixtures_1.test)("supports submenu functionality", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page }) {
+    yield initTestBed(`
+    <DropdownMenu label="Menu">
+      <MenuItem>Regular Item</MenuItem>
+      <SubMenuItem label="Submenu">
+        <MenuItem>Submenu Item 1</MenuItem>
+        <MenuItem>Submenu Item 2</MenuItem>
+      </SubMenuItem>
+    </DropdownMenu>
+  `);
+    const driver = yield createDropdownMenuDriver();
+    // Open main menu
+    yield driver.open();
+    yield (0, fixtures_1.expect)(page.getByText("Regular Item")).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByText("Submenu")).toBeVisible();
+    // Open submenu using driver method
+    yield driver.openSubMenu("Submenu");
+    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Submenu Item 1" })).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Submenu Item 2" })).toBeVisible();
+}));
+(0, fixtures_1.test)("supports menu separators", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page }) {
+    yield initTestBed(`
+    <DropdownMenu label="Menu">
+      <MenuItem>Item 1</MenuItem>
+      <MenuSeparator />
+      <MenuItem>Item 2</MenuItem>
+    </DropdownMenu>
+  `);
+    const driver = yield createDropdownMenuDriver();
+    yield driver.open();
+    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 1" })).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 2" })).toBeVisible();
+    // Check that separator is rendered using driver method
+    const separators = driver.getMenuSeparators();
+    yield (0, fixtures_1.expect)(separators).toHaveCount(1);
+}));
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+(0, fixtures_1.test)("has correct accessibility attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page, }) {
+    yield initTestBed(`
+    <DropdownMenu label="Accessible Menu">
+      <MenuItem>Item 1</MenuItem>
+    </DropdownMenu>
+  `);
+    const driver = yield createDropdownMenuDriver();
+    let btn = page.getByRole("button", { name: "Accessible Menu" });
+    yield (0, fixtures_1.expect)(btn).toHaveAttribute("aria-haspopup", "menu");
+    yield (0, fixtures_1.expect)(btn).toHaveAttribute("aria-expanded", "false");
+    yield driver.open();
+    page.getByRole("button", { includeHidden: true, expanded: true }).waitFor();
+    yield page.getByRole("menu").waitFor();
+}));
+(0, fixtures_1.test)("is keyboard accessible", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page }) {
+    const { testStateDriver } = yield initTestBed(`
+    <DropdownMenu label="Keyboard Menu">
+      <MenuItem onClick="testState = 'keyboard-activated'">Item 1</MenuItem>
+    </DropdownMenu>
+  `);
+    const btn = page.getByRole("button");
+    page.keyboard.press("Tab");
+    yield (0, fixtures_1.expect)(btn).toBeFocused();
+    // Open with Enter
+    page.keyboard.press("Enter");
+    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 1" })).toBeVisible();
+    // Navigate and select with keyboard
+    yield page.keyboard.press("ArrowDown");
+    yield page.keyboard.press("Enter");
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("keyboard-activated");
+}));
+(0, fixtures_1.test)("disabled DropdownMenu can't be focused", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`<DropdownMenu label="Disabled Menu" enabled="false" />`);
+    const btn = page.getByRole("button");
+    yield (0, fixtures_1.expect)(btn).toBeDisabled();
+    // Should not be focusable when disabled
+    yield btn.focus();
+    yield (0, fixtures_1.expect)(btn).not.toBeFocused();
+}));
+// =============================================================================
+// VISUAL STATE TESTS
+// =============================================================================
+(0, fixtures_1.test)("applies theme variables correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver }) {
+    yield initTestBed(`<DropdownMenu label="Themed Menu">
+      <MenuItem>Item 1</MenuItem>
+    </DropdownMenu>`, {
+        testThemeVars: {
+            "backgroundColor-DropdownMenu": "rgb(255, 0, 0)",
+            "minWidth-DropdownMenu": "200px",
+        },
+    });
+    const driver = yield createDropdownMenuDriver();
+    // Open menu to see styled content
+    yield driver.open();
+    // Check theme variables are applied to menu content
+    const menuContent = driver.getMenuContent();
+    yield (0, fixtures_1.expect)(menuContent).toBeVisible();
+    yield (0, fixtures_1.expect)(menuContent).toHaveCSS("background-color", "rgb(255, 0, 0)");
+    yield (0, fixtures_1.expect)(menuContent).toHaveCSS("min-width", "200px");
+}));
+// =============================================================================
+// EDGE CASE TESTS
+// =============================================================================
+(0, fixtures_1.test)("handles null label gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`<DropdownMenu label="{null}" />`);
+    yield (0, fixtures_1.expect)(page.getByRole("button")).toBeVisible();
+}));
+(0, fixtures_1.test)("handles special characters in labels", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page, }) {
+    yield initTestBed(`
+    <DropdownMenu label="Menu with émojis 🚀">
+      <MenuItem>Item with ñ and ü</MenuItem>
+      <MenuItem>Item with &amp; &lt; &gt; quotes</MenuItem>
+    </DropdownMenu>
+  `);
+    const driver = yield createDropdownMenuDriver();
+    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    yield (0, fixtures_1.expect)(driver.component).toContainText("Menu with émojis 🚀");
+    yield driver.open();
+    yield (0, fixtures_1.expect)(page.getByText("Item with ñ and ü")).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByText("Item with & < > quotes")).toBeVisible();
+}));
+(0, fixtures_1.test)("doesn't show empty menu with no MenuItem", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page, }) {
+    yield initTestBed(`<DropdownMenu label="Empty Menu" />`);
+    const driver = yield createDropdownMenuDriver();
+    yield driver.open();
+    yield (0, fixtures_1.expect)(page.getByRole("menu")).not.toBeVisible();
+}));
+(0, fixtures_1.test)("handles disabled menu items", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page }) {
+    const { testStateDriver } = yield initTestBed(`
+    <DropdownMenu label="Menu">
+      <MenuItem enabled="true" onClick="testState = 'enabled-clicked'">Enabled Item</MenuItem>
+      <MenuItem enabled="false" onClick="testState = 'disabled-clicked'">Disabled Item</MenuItem>
+    </DropdownMenu>
+  `);
+    const driver = yield createDropdownMenuDriver();
+    yield driver.open();
+    // Enabled item should work
+    yield driver.clickMenuItem("Enabled Item");
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("enabled-clicked");
+    // Reopen menu
+    yield driver.open();
+    yield page.getByText("Disabled Item").click();
+    yield fixtures_1.expect.poll(testStateDriver.testState).not.toEqual("disabled-clicked");
+}));
+// =============================================================================
+// INTEGRATION TESTS
+// =============================================================================
+(0, fixtures_1.test)("supports custom trigger template", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <DropdownMenu>
+      <property name="triggerTemplate">
+        <Button variant="solid" themeColor="secondary">Custom Trigger</Button>
+      </property>
+      <MenuItem>Item 1</MenuItem>
+      <MenuItem>Item 2</MenuItem>
+    </DropdownMenu>
+  `);
+    const btn = page.getByRole("button", { name: "Custom Trigger" });
+    yield (0, fixtures_1.expect)(btn).toBeVisible();
+    yield btn.click();
+    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 1" })).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 2" })).toBeVisible();
+}));
+(0, fixtures_1.test)("handles onWillOpen event correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page, }) {
+    const { testStateDriver } = yield initTestBed(`
+    <DropdownMenu label="Event Menu" onWillOpen="testState = 'willOpen-fired'">
+      <MenuItem>Item 1</MenuItem>
+    </DropdownMenu>
+  `);
+    const driver = yield createDropdownMenuDriver();
+    // Click to trigger onWillOpen event
+    yield driver.open();
+    // Event should have fired
+    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("willOpen-fired");
+    // Menu should be open
+    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Item 1" })).toBeVisible();
+}));
+(0, fixtures_1.test)("prevents opening when onWillOpen returns false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page, }) {
+    yield initTestBed(`
+    <DropdownMenu label="Prevented Menu" onWillOpen="return false">
+      <MenuItem>Item 1</MenuItem>
+    </DropdownMenu>
+  `);
+    const driver = yield createDropdownMenuDriver();
+    // Click should not open menu due to onWillOpen returning false
+    yield driver.open();
+    yield (0, fixtures_1.expect)(page.getByText("Item 1")).not.toBeVisible();
+}));
+(0, fixtures_1.test)("API methods work correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page }) {
+    yield initTestBed(`
+    <HStack>
+      <DropdownMenu id="apiMenu" label="API Menu">
+        <MenuItem>Item 1</MenuItem>
+        <MenuItem><Button testId="closeBtn" onGotFocus="apiMenu.close()" label="Close Menu" /></MenuItem>
+      </DropdownMenu>
+      <Button testId="openBtn" onClick="apiMenu.open()">Open Menu</Button>
+    </HStack>
+  `);
+    const menuItem = page.getByRole("menuitem", { name: "Item 1" });
+    yield (0, fixtures_1.expect)(menuItem).not.toBeVisible();
+    yield page.getByTestId("openBtn").click();
+    yield (0, fixtures_1.expect)(menuItem).toBeVisible();
+    yield page.getByTestId("closeBtn").focus();
+    yield (0, fixtures_1.expect)(menuItem).not.toBeVisible();
+}));
+(0, fixtures_1.test)("works with nested menu structures", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDropdownMenuDriver, page, }) {
+    yield initTestBed(`
+    <DropdownMenu label="Main Menu">
+      <MenuItem>Top Level Item</MenuItem>
+      <SubMenuItem label="Category 1">
+        <MenuItem>Category 1 Item 1</MenuItem>
+        <SubMenuItem label="Subcategory">
+          <MenuItem>Deep Item 1</MenuItem>
+          <MenuItem>Deep Item 2</MenuItem>
+        </SubMenuItem>
+      </SubMenuItem>
+      <MenuSeparator />
+      <SubMenuItem label="Category 2">
+        <MenuItem>Category 2 Item 1</MenuItem>
+        <MenuItem>Category 2 Item 2</MenuItem>
+      </SubMenuItem>
+    </DropdownMenu>
+  `);
+    const driver = yield createDropdownMenuDriver();
+    // Open main menu
+    yield driver.open();
+    yield (0, fixtures_1.expect)(page.getByText("Top Level Item")).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByText("Category 1")).toBeVisible();
+    // Navigate to submenu using driver method
+    yield (0, fixtures_1.expect)(page.getByText("Category 1 Item 1")).not.toBeVisible();
+    yield driver.openSubMenu("Category 1");
+    yield (0, fixtures_1.expect)(page.getByText("Category 1 Item 1")).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByText("Subcategory")).toBeVisible();
+    // Navigate to nested submenu
+    yield (0, fixtures_1.expect)(page.getByText("Deep Item 1")).not.toBeVisible();
+    yield driver.openSubMenu("Subcategory");
+    yield (0, fixtures_1.expect)(page.getByText("Deep Item 1")).toBeVisible();
+    yield (0, fixtures_1.expect)(page.getByText("Deep Item 2")).toBeVisible();
+}));

package/dist/scripts/src/components/DropdownMenu/DropdownMenuNative.js

@@ -56,9 +56,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuItem = exports.defaultMenuItemProps = exports.DropdownMenu = exports.defaultDropdownMenuProps = void 0;
-exports.SubMenuItem = SubMenuItem;
-exports.MenuSeparator = MenuSeparator;
+exports.MenuSeparator = exports.SubMenuItem = exports.MenuItem = exports.defaultMenuItemProps = exports.DropdownMenu = exports.defaultDropdownMenuProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("react");
@@ -139,10 +137,10 @@ exports.MenuItem = (0, react_1.forwardRef)(function MenuItem({ children, onClick
             }
         }, ref: ref, children: [iconToStart && icon, (0, jsx_runtime_1.jsx)("div", { className: DropdownMenu_module_scss_1.default.wrapper, children: label !== null && label !== void 0 ? label : children }), !iconToStart && icon] }));
 });
-function SubMenuItem({ children, label, triggerTemplate }) {
+exports.SubMenuItem = (0, react_1.forwardRef)(function SubMenuItem({ children, label, triggerTemplate }, ref) {
     const { root } = (0, ThemeContext_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Sub, { children: [(0, jsx_runtime_1.jsx)(ReactDropdownMenu.SubTrigger, { className: DropdownMenu_module_scss_1.default.DropdownMenuSubTrigger, asChild: true, children: triggerTemplate ? triggerTemplate : (0, jsx_runtime_1.jsx)("div", { children: label }) }), (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(ReactDropdownMenu.SubContent, { className: DropdownMenu_module_scss_1.default.DropdownMenuSubContent, children: children }) })] }));
-}
-function MenuSeparator() {
-    return (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Separator, { className: DropdownMenu_module_scss_1.default.DropdownMenuSeparator });
-}
+    return ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Sub, { children: [(0, jsx_runtime_1.jsx)(ReactDropdownMenu.SubTrigger, { className: DropdownMenu_module_scss_1.default.DropdownMenuSubTrigger, asChild: true, ref: ref, children: triggerTemplate ? triggerTemplate : (0, jsx_runtime_1.jsx)("div", { children: label }) }), (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(ReactDropdownMenu.SubContent, { className: DropdownMenu_module_scss_1.default.DropdownMenuSubContent, children: children }) })] }));
+});
+exports.MenuSeparator = (0, react_1.forwardRef)(function MenuSeparator(props, ref) {
+    return (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Separator, Object.assign({ ref: ref, className: DropdownMenu_module_scss_1.default.DropdownMenuSeparator }, props));
+});

package/dist/scripts/src/components/EmojiSelector/EmojiSelector.spec.js

@@ -0,0 +1,29 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../testing/fixtures");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("component renders with default properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<EmojiSelector testId="emoji-selector" />`, {});
+        yield (0, fixtures_1.expect)(page.getByTestId("emoji-selector")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("display selected emoji", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        const EXPECTED_EMOTICON = "😀";
+        const { testStateDriver } = yield initTestBed(`
+    <EmojiSelector onSelect="(emoji) => { testState = emoji }" />
+  `);
+        yield page.getByText(EXPECTED_EMOTICON).click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(EXPECTED_EMOTICON);
+    }));
+});