<!DOCTYPE html>
@WAIT-FOR:Ready
@EXECUTE-AND-WAIT-FOR:selectChip()
@EXECUTE-AND-WAIT-FOR:removeChip()
@BLINK-ALLOW:htmlTag*
@BLINK-ALLOW:className*
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Material Web Input Chips</title>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet">
<script type="module">
import { injectImportMap, loadAndWaitForReady } from "./resources/utils.js";
injectImportMap();
const components = [
"md-input-chip",
"md-chip-set",
"md-icon"
];
loadAndWaitForReady(components, () => {
const statusDiv = document.getElementById("status");
const chipSet = document.createElement("md-chip-set");
const chips = [
{ label: "Input chip", id: "test-chip-1" },
{ label: "With avatar", icon: "person" },
{ label: "Removable", removeOnly: true, removeIcon: "close", id: "test-chip-2" }
];
chips.forEach(chipInfo => {
const chip = document.createElement("md-input-chip");
chip.label = chipInfo.label;
if (chipInfo.id) {
chip.id = chipInfo.id;
}
if (chipInfo.icon) {
const icon = document.createElement("md-icon");
icon.slot = "icon";
icon.textContent = chipInfo.icon;
chip.appendChild(icon);
}
if (chipInfo.removeOnly) {
chip.removeOnly = true;
const icon = document.createElement("md-icon");
icon.slot = "remove-trailing-icon";
icon.textContent = chipInfo.removeIcon;
chip.appendChild(icon);
}
chipSet.appendChild(chip);
});
statusDiv.appendChild(chipSet);
statusDiv.setAttribute("aria-label", "Ready");
});
</script>
</head>
<body>
<div id="status" aria-label="Loading">
</div>
</body>
<script>
async function selectChip() {
const chip = document.getElementById("test-chip-1");
if (chip) {
chip.selected = true;
await chip.updateComplete;
const statusDiv = document.getElementById("status");
const statusText = document.createElement("div");
statusText.textContent = "Input Chip Selected";
statusDiv.appendChild(statusText);
return "Input Chip Selected";
}
return "Failed to select Input Chip";
}
async function removeChip() {
const chip = document.getElementById("test-chip-2");
if (chip) {
chip.remove();
const statusDiv = document.getElementById("status");
const statusText = document.createElement("div");
statusText.textContent = "Input Chip Removed";
statusDiv.appendChild(statusText);
return "Input Chip Removed";
}
return "Failed to remove Input Chip";
}
</script>
</html>
