[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fangular-material-cdk-with-drag-and-drop":663,"blog-author-\u002Fblog\u002Fangular-material-cdk-with-drag-and-drop":975,"i-material-symbols:arrow-back-rounded":987},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Sign in","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","VdirGIa8cUm6xLprbBeTKcw914JfyJjWfF-9hSVOX5Y",{"id":87,"extension":5,"links":88,"meta":660,"stem":661,"__hash__":662},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,295,299,303,306,310,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,453,457,461,465,469,473,477,480,483,486,489,493,497,500,504,508,512,516,520,524,528,532,536,540,544,548,551,555,559,563,567,571,574,577,580,584,587,591,595,599,603,606,610,614,617,620,623,627,631,635,638,641,644,648,652,656],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":209,"label":210,"href":211},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":213,"label":214,"href":215},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":217,"label":218,"href":219},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":221,"label":222,"href":223},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":225,"label":226,"href":227},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":229,"label":230,"href":231},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":233,"label":234,"href":235},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":237,"label":238,"href":239},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":241,"label":242,"href":243},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":245,"label":246,"href":247},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":249,"label":250,"href":251},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":253,"label":254,"href":255},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":257,"label":258,"href":259},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":261,"label":262,"href":263},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":265,"label":266,"href":267},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":269,"label":270,"href":271},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":273,"label":274,"href":275},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":277,"label":278,"href":279},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":281,"label":282,"href":283},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":285,"label":286,"href":287},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":289,"label":290,"href":291},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":293,"label":294,"href":92},"docs.desktop.download","Desktop download docs",{"key":296,"label":297,"href":298},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":300,"label":301,"href":302},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":304,"label":305,"href":207},"docs.piecesOS.install","PiecesOS install docs",{"key":307,"label":308,"href":309},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":311,"label":312,"href":313},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":315,"label":316,"href":317},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":319,"label":320,"href":321},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":323,"label":324,"href":325},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":327,"label":328,"href":329},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":331,"label":332,"href":333},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":335,"label":336,"href":337},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":343,"label":344,"href":345},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":347,"label":348,"href":349},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":351,"label":352,"href":353},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":355,"label":356,"href":357},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":359,"label":360,"href":361},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":363,"label":364,"href":365},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":367,"label":368,"href":369},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":371,"label":372,"href":373},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":375,"label":376,"href":377},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":379,"label":380,"href":381},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":383,"label":384,"href":385},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":387,"label":388,"href":389},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":391,"label":392,"href":393},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":395,"label":396,"href":397},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":399,"label":400,"href":401},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":403,"label":404,"href":405},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":407,"label":408,"href":409},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":411,"label":412,"href":413},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":415,"label":416,"href":417},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":419,"label":420,"href":421},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":423,"label":424,"href":425},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":427,"label":428,"href":429},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":431,"label":432,"href":433},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":435,"label":436,"href":437},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":439,"label":440,"href":441},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":443,"label":444,"href":445},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":447,"label":448,"href":449},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":451,"label":58,"href":452},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":454,"label":455,"href":456},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":458,"label":459,"href":460},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":462,"label":463,"href":464},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":466,"label":467,"href":468},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":470,"label":471,"href":472},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":474,"label":475,"href":476},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":478,"label":34,"href":479},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":481,"label":43,"href":482},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":484,"label":46,"href":485},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":487,"label":488,"href":485},"social.twitter","Twitter",{"key":490,"label":491,"href":492},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":494,"label":495,"href":496},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":498,"label":49,"href":499},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":501,"label":502,"href":503},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":505,"label":506,"href":507},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":509,"label":510,"href":511},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":513,"label":514,"href":515},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":517,"label":518,"href":519},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":521,"label":522,"href":523},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":525,"label":526,"href":527},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":529,"label":530,"href":531},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":533,"label":534,"href":535},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":537,"label":538,"href":539},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":541,"label":542,"href":543},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":545,"label":546,"href":547},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":549,"label":550,"href":247},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":552,"label":553,"href":554},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":556,"label":557,"href":558},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":560,"label":561,"href":562},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":564,"label":565,"href":566},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":568,"label":569,"href":570},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":572,"label":573,"href":66},"legal.privacyPolicy","Privacy policy",{"key":575,"label":576,"href":69},"legal.refundPolicy","Refund policy",{"key":578,"label":579,"href":72},"legal.terms","Terms",{"key":581,"label":582,"href":583},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":585,"label":586,"href":503},"videos.youtubeChannel","YouTube channel",{"key":588,"label":589,"href":590},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":592,"label":593,"href":594},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":596,"label":597,"href":598},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":600,"label":601,"href":602},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":604,"label":605,"href":519},"sales.feedback","Feedback discussions",{"key":607,"label":608,"href":609},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":611,"label":612,"href":613},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":615,"label":616,"href":19},"routes.home","Home route",{"key":618,"label":619,"href":56},"routes.about","About route",{"key":621,"label":622,"href":12},"routes.downloads","Downloads route",{"key":624,"label":625,"href":626},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":628,"label":629,"href":630},"routes.pricing","Pricing route","\u002Fpricing",{"key":632,"label":633,"href":634},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":636,"label":637,"href":22},"routes.enterprise","Enterprise route",{"key":639,"label":640,"href":62},"routes.contact","Contact route",{"key":642,"label":643,"href":59},"routes.updates","Updates route",{"key":645,"label":646,"href":647},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":649,"label":650,"href":651},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":653,"label":654,"href":655},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":657,"label":658,"href":659},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","NLkVE1lIUws518K-1QsSB6T-GvlXYIzcRL1HDhqarGQ",{"id":664,"title":665,"author":666,"authorPhoto":667,"authorPhotoAlt":668,"authorSlug":669,"body":670,"buttonText":960,"buttonUrl":960,"category":961,"date":962,"description":963,"draft":964,"editorsPick":964,"extension":965,"featured":964,"image":966,"imageAlt":967,"meta":968,"navigation":32,"ogImage":960,"ogImageAlt":960,"path":969,"seo":970,"stem":971,"tags":972,"__hash__":974},"blog\u002Fblog\u002Fangular-material-cdk-with-drag-and-drop.md","Angular Material CDK with Drag and Drop","Godwin Chinda","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-html\u002Fauthor.jpeg","Image of the author: Godwin Chinda.","godwin-chinda",{"type":671,"value":672,"toc":948},"minimark",[673,677,680,683,688,691,702,705,711,714,721,725,728,734,740,744,747,753,756,762,765,771,774,780,783,786,792,803,809,813,816,819,825,828,834,839,847,850,863,866,869,875,878,884,893,899,903,906,912,915,921,924,930,934],[674,675,676],"p",{},"Developers can quickly design beautiful and unified user interfaces in their Angular CDK projects by utilizing the User Interface (UI) component package known as Angular Material. Programmers can find reusable and visually appealing UI elements like cards, inputs, data tables, datepickers, and much more with the Angular Material CDK. In accordance with the Material Design specification, each component is prepared for use in the default style. Applications that use drag-and-drop capability on browsers are known as drag-and-drop platforms. Using a mouse or touchpad, the user clicks and drags files to a droppable element (drop zone), and then releases the mouse button to release the files.",[674,678,679],{},"Developers can quickly design beautiful and unified user interfaces in their Angular projects by utilizing the User Interface (UI) component package known as Angular Material. Programmers can find reusable and visually appealing UI elements like cards, inputs, data tables, datepickers, and much more with Angular Material. In accordance with the Material Design specification, each component is prepared for use in the default style. Applications that use drag-and-drop capability on browsers are known as drag-and-drop platforms. Using a mouse or touchpad, the user clicks and drags files to a droppable element (drop zone), and then releases the mouse button to release the files.",[674,681,682],{},"The Angular Drag and Drop CDK supports animations, touch devices, configurable drag handles, free dragging, list sorting, list shifting, and previews. Also, the @angular\u002Fcdk\u002Fdrag-drop module provides a means to rapidly and declaratively design drag-and-drop interfaces in addition to horizontal lists and locking along an axis.",[684,685,687],"h2",{"id":686},"getting-started-angular-cdk-tutorial","Getting Started: Angular CDK Tutorial",[674,689,690],{},"First, we have to install the Angular Material CDK into our project:",[692,693,698],"pre",{"className":694,"code":696,"language":697},[695],"language-text","ng add @angular\u002Fmaterial\n","text",[699,700,696],"code",{"__ignoreMap":701},"",[674,703,704],{},"We’ll then import our DragDropModule into NgModule:",[692,706,709],{"className":707,"code":708,"language":697},[695],"import { AppRoutingModule } from '.\u002Fapp-routing.module';\nimport { AppComponent } from '.\u002Fapp.component';\nimport { BrowserAnimationsModule } from '@angular\u002Fplatform-browser\u002Fanimations';\nimport {DragDropModule} from '@angular\u002Fcdk\u002Fdrag-drop';\n@NgModule({\n declarations: [\n   AppComponent\n ],\n imports: [\n   BrowserModule,\n   AppRoutingModule,\n   BrowserAnimationsModule,\n   DragDropModule,\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\nUsing the cdkDrag directive, we can create our first draggable component:\n Drag me around\n",[699,710,708],{"__ignoreMap":701},[674,712,713],{},"We can already drag and drop in our project after running the code:",[674,715,716],{},[717,718],"img",{"alt":719,"src":720},"Using Angular CDK to drag and drop some text around a screen.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fangular-material-cdk-with-drag-and-drop\u002Fimg-001.gif",[684,722,724],{"id":723},"creating-a-drop-zone","Creating a Drop Zone",[674,726,727],{},"Now that we’re familiar with how to drag an element, we have to build a drop zone. To do this, we'll use the brand-new directive cdkDropList, which will act as a container for the draggable items. If we try to dump an item outside the drop zone, it will revert to its original position inside the drop zone:",[692,729,732],{"className":730,"code":731,"language":697},[695],"\u003Cdiv cdkDropList>\u003Cdiv class=\"box\" cdkDrag>    Drag me around\u003C\u002Fdiv>\u003C\u002Fdiv>\n",[699,733,731],{"__ignoreMap":701},[674,735,736],{},[717,737],{"alt":738,"src":739},"Dragged text reverting to its original position.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fangular-material-cdk-with-drag-and-drop\u002Fimg-002.gif",[684,741,743],{"id":742},"reordering-items-in-a-list","Reordering Items in a List",[674,745,746],{},"After learning how to create a draggable item and a drop zone, the next step is to drag and reorder items within a list. We'll use the *ngFor directive to create the list components inside a cdkDrop container:",[692,748,751],{"className":749,"code":750,"language":697},[695],"\u003Cdiv class=\"box\" cdkDropList>\u003Cdiv *ngFor=\"let item of items\" cdkDrag>{{item}}\u003C\u002Fdiv>\u003C\u002Fdiv>\n",[699,752,750],{"__ignoreMap":701},[674,754,755],{},"There is a string array definition for the elements in the AppComponent:",[692,757,760],{"className":758,"code":759,"language":697},[695],"@Component({\n selector: 'app-root',\n templateUrl: '.\u002Fapp.component.html',\n styleUrls: ['.\u002Fapp.component.css']\n})\nexport class AppComponent {\n items = ['Football', 'Tennis', 'Basketball', 'Rugby', 'Golf']\n}\n",[699,761,759],{"__ignoreMap":701},[674,763,764],{},"The GIF below demonstrates how the items inside self-arrange as we pull them. That is why when we drag and drop something, it goes back to where it was originally.",[674,766,767],{},[717,768],{"alt":769,"src":770},"A list that won't allow itself to be reordered.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fangular-material-cdk-with-drag-and-drop\u002Fimg-003.gif",[674,772,773],{},"To fix this problem and to save the updated index when an item is dropped inside the list, we must implement the cdkDropDropped method. The dropped function is consistently called whenever a user drops something inside the drop zone. The following is its trademark:",[692,775,778],{"className":776,"code":777,"language":697},[695],"import {CdkDragDrop, moveItemInArray} from '@angular\u002Fcdk\u002Fdrag-drop';\n@Component({...})\nexport class AppComponent {\n title = 'dropzone';\n items = [...]\n drop(event: CdkDragDrop) {\n   moveItemInArray(this.items, event.previousIndex, event.currentIndex);\n }\n}\n",[699,779,777],{"__ignoreMap":701},[674,781,782],{},"As you can see in the code above, the drag and drop Angular CDK also includes the utility function moveItemInArray. This function returns the new index of the dropped item in the array. Rad!",[674,784,785],{},"Now that we have an implementation for it, next, we’ll link the dropped function to the HTML's cdkDrop element:",[692,787,790],{"className":788,"code":789,"language":697},[695],"\u003Cdiv class=\"box\" cdkDropList    (cdkDropListDropped)=\"drop($event)\">\u003Cdiv *ngFor=\"let item of items\" cdkDrag>{{item}}\u003C\u002Fdiv>\u003C\u002Fdiv>\n",[699,791,789],{"__ignoreMap":701},[674,793,794,795,802],{},"This results in the ability to drag and reorder the elements inside the cdkDrop container. Click ",[796,797,801],"a",{"href":798,"rel":799},"https:\u002F\u002Fbeta-angular-material-io.firebaseapp.com\u002Fcdk\u002Fdrag-drop\u002Foverview#reordering-lists",[800],"nofollow","here"," for a better understanding.",[674,804,805],{},[717,806],{"alt":807,"src":808},"A list that can be reordered with angular\u002Fcdk.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fangular-material-cdk-with-drag-and-drop\u002Fimg-004.gif",[684,810,812],{"id":811},"dragging-from-one-list-to-another-list","Dragging From One List to Another List",[674,814,815],{},"Let's take it a step further and create a simple task board.",[674,817,818],{},"To do this, we’ll split the items array into three smaller arrays: one for newly created items, one for items that are active, and one for items that have been finished:",[692,820,823],{"className":821,"code":822,"language":697},[695],"incomingGoods = ['Tomatoes', 'Carrots', 'Onions', 'Pepper']\navailableGoods = ['Cucumber']\nsoldGoods = ['Orange', 'Apple', 'Banana']\n",[699,824,822],{"__ignoreMap":701},[674,826,827],{},"Three different lists must be displayed with each list that has its own drop zone. We can connect the arrays to a drop zone by using the cdkDropData input:",[692,829,832],{"className":830,"code":831,"language":697},[695],"\u003Cdiv  cdkDrop #new=\"cdkDrop\"  [cdkDropData]=\"newItems\"  [cdkDropConnectedTo]=\"[active]\"  (cdkDropDropped)=\"dropped($event)\">\u003Cdiv *ngFor=\"let item of newItems\" cdkDrag>{{ item }}\u003C\u002Fdiv>\u003C\u002Fdiv>\n",[699,833,831],{"__ignoreMap":701},[835,836,838],"h3",{"id":837},"connecting-the-lists-drop-zones","Connecting the Lists (Drop Zones)",[674,840,841,842,846],{},"A cdkDrop list can be connected to another cdkDrop list using the input attribute ",[843,844,845],"span",{},"cdkDropConnectedTo",". If we don't take the following steps, we won't be able to drag and drop the items to another list.",[674,848,849],{},"The connections that need to be made in our task board example are as follows:",[851,852,853,857,860],"ul",{},[854,855,856],"li",{},"Add the incomingGoods to the availableGoods list.",[854,858,859],{},"Add the availableGoods to the incomingGoods and soldGoods list.",[854,861,862],{},"Add the soldGoods list onto the availableGoods.",[674,864,865],{},"To put it another way, we can drag incomingGoods to availableGoods, soldGoods, or the opposite order. To drag an incomingGoods to the soldGoods, we must first navigate through the availableGoods.",[674,867,868],{},"Combining these results yields the following:",[692,870,873],{"className":871,"code":872,"language":697},[695],"\u003Cdiv cdkDropListGroup>\u003Cdiv class=\"container\">\u003Ch2>Incoming Goods\u003C\u002Fh2>\u003Cdiv id=\"incoming\"      cdkDropList      [cdkDropListData]=\"incomingItems\"      cdkDropListConnectedTo=\"available\" class=\"list\"      (cdkDropListDropped)=\"drop($event)\"      [cdkDropListEnterPredicate]=\"noReturnPredicate\">\u003Cdiv class=\"box\" *ngFor=\"let item of incomingItems\" cdkDrag>{{item}}\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"container\">\u003Ch2>Available Goods\u003C\u002Fh2>\u003Cdiv id=\"available\"      cdkDropList      [cdkDropListData]=\"availableItems\"      cdkDropListConnectedTo=\"sold\" class=\"list\"      (cdkDropListDropped)=\"drop($event)\">\u003Cdiv class=\"box\" *ngFor=\"let item of availableItems\" cdkDrag>{{item}}\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"container\">\u003Ch2>Sold Out Goods\u003C\u002Fh2>\u003Cdiv id=\"sold\"      cdkDropList      [cdkDropListData]=\"soldItems\"      cdkDropListConnectedTo=\"available\" class=\"list\"      (cdkDropListDropped)=\"drop($event)\">\u003Cdiv class=\"box\" *ngFor=\"let item of soldItems\" cdkDrag>{{item}}\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\n",[699,874,872],{"__ignoreMap":701},[674,876,877],{},"The final step is to make our dropped function smarter. In order to satisfy our needs, it must move items from one list to another list.",[692,879,882],{"className":880,"code":881,"language":697},[695],"import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular\u002Fcdk\u002Fdrag-drop';dropped(event: CdkDragDrop\u003Cstring[]>) { if (event.previousContainer === event.container) {   moveItemInArray( event.container.data, event.previousIndex, event.currentIndex   );  } else {    transferArrayItem( event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex   ); }}\n",[699,883,881],{"__ignoreMap":701},[674,885,886,887,892],{},"If the container is the same, it reorders the items in the prior order. If the container is different, the dragged item is moved to the list where it is being dropped. In addition, transferArrayItem is a helpful function that comes pre-installed. Check the ",[796,888,891],{"href":889,"rel":890},"https:\u002F\u002Fbeta-angular-material-io.firebaseapp.com\u002Fcdk\u002Fdrag-drop\u002Foverview#transferring-items-between-lists",[800],"documentation"," here.",[674,894,895],{},[717,896],{"alt":897,"src":898},"Dragging from one list to another list with angular\u002Fcdk.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fangular-material-cdk-with-drag-and-drop\u002Fimg-005.gif",[684,900,902],{"id":901},"disable-dragging","Disable Dragging",[674,904,905],{},"Dragging for a certain drag item will be disabled by setting the cdkDragDisabled input on a cdkDrag item. Additionally, an entire list can be deactivated with the cdkDropListDisabled input on a cdkDropList, or a specific handle with the cdkDragHandleDisabled input on a cdkDragHandle.",[692,907,910],{"className":908,"code":909,"language":697},[695],"\u003Cdiv cdkDropList class=\"list\" (cdkDropListDropped)=\"drop($event)\">\u003Cdiv class=\"box\"    *ngFor=\"let item of items\"    cdkDrag    [cdkDragDisabled]=\"item.disabled\">{{item.value}}\u003C\u002Fdiv>\u003C\u002Fdiv>\n",[699,911,909],{"__ignoreMap":701},[674,913,914],{},"We set the boolean function of our value to either true\u002Ffalse in our app.component.ts.:",[692,916,919],{"className":917,"code":918,"language":697},[695],"import {Component} from '@angular\u002Fcore';\nimport {CdkDragDrop, moveItemInArray} from '@angular\u002Fcdk\u002Fdrag-drop';\n@Component({\n selector: 'app-root',\n templateUrl: '.\u002Fapp.component.html',\n styleUrls: ['.\u002Fapp.component.css']\n})\nexport class AppComponent {\n items = [\n   {value: 'Oranges', disabled: false},\n   {value: 'Bananas', disabled: true},\n   {value: 'Mangoes', disabled: false},\n ];\n drop(event: CdkDragDrop) {\n   moveItemInArray(this.items, event.previousIndex, event.currentIndex);\n }\n",[699,920,918],{"__ignoreMap":701},[674,922,923],{},"Now that the value Bananas has been set to disabled:true, dragging for that specific item is turned off.",[674,925,926],{},[717,927],{"alt":928,"src":929},"A list in which one item cannot be dragged.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fangular-material-cdk-with-drag-and-drop\u002Fimg-006.gif",[684,931,933],{"id":932},"conclusion","Conclusion",[674,935,936,937,942,943,947],{},"By design, Angular Material is flat and very straightforward. It is designed with the knowledge that adding new CSS rules is much easier than altering old ones. This Angular CDK is incredibly easy to use and intuitive, but it also gives flexibility by letting developers take initiative as needed. I hope you enjoyed these Angular CDK examples and gained a better understanding of how it is used. Learn more about Angular Component Libraries, and for more information, consult the ",[796,938,941],{"href":939,"rel":940},"https:\u002F\u002Fgithub.com\u002FEJINEROZ\u002FAngular-drag-n-drop",[800],"source code"," and ",[796,944,891],{"href":945,"rel":946},"https:\u002F\u002Fmaterial.angular.io\u002Fcdk\u002Fdrag-drop\u002Foverview",[800],".",{"title":701,"searchDepth":949,"depth":949,"links":950},2,[951,952,953,954,958,959],{"id":686,"depth":949,"text":687},{"id":723,"depth":949,"text":724},{"id":742,"depth":949,"text":743},{"id":811,"depth":949,"text":812,"children":955},[956],{"id":837,"depth":957,"text":838},3,{"id":901,"depth":949,"text":902},{"id":932,"depth":949,"text":933},null,"Software Development","2023-09-27T00:00:00.000Z","Learn how to integrate the Angular CDK into your product to create easy-to-use interfaces. Let's start dragging and dropping!",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fangular-material-cdk-with-drag-and-drop\u002Fhero.jpeg","Image of code in a laptop.",{},"\u002Fblog\u002Fangular-material-cdk-with-drag-and-drop",{"title":665,"description":963},"blog\u002Fangular-material-cdk-with-drag-and-drop",[973],"angular; drag-and-drop","xXA1n4xNm5q1lJXEmWB_lGPjtd6Hgyi6Y-NPQn1TXNU",{"id":976,"title":666,"body":977,"description":701,"draft":964,"extension":965,"meta":981,"navigation":32,"path":982,"photo":983,"photoAlt":960,"seo":984,"stem":985,"__hash__":986},"authors\u002Fauthors\u002Fgodwin-chinda.md",{"type":671,"value":978,"toc":979},[],{"title":701,"searchDepth":949,"depth":949,"links":980},[],{},"\u002Fauthors\u002Fgodwin-chinda","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fgodwin-chinda.jpg",{"title":666,"description":701},"authors\u002Fgodwin-chinda","MLGervMSg1a-zbqP0OSIpAqhsP93KGpwZqVnAcbivOM",{"left":988,"top":988,"width":989,"height":989,"rotate":988,"vFlip":964,"hFlip":964,"body":990},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]