\");\n\n const selectedColors = getSelectedColors(colors, values);\n\n for (const color of selectedColors) {\n const itemGuid = guid.newGuid();\n const containerId = `color-selector-item-container-${itemGuid}`;\n const itemId = `color-selector-item-${itemGuid}`;\n\n htmlStringBuilder.push(`
`);\n htmlStringBuilder.push(`
`);\n htmlStringBuilder.push(\"
\");\n htmlStringBuilder.push(\"
\");\n\n // Keep track of the color elements that may have to be outlined\n // if they are too hard to see.\n selectorsToProcess.push(`#${itemId}`);\n }\n\n htmlStringBuilder.push(\"
\");\n\n this.processSelectors(selectorsToProcess);\n\n const html = htmlStringBuilder.join(\"\\n\");\n\n if (isEscaped) {\n return escapeHtml(html);\n }\n\n return html;\n }\n\n public override getEditComponent(): Component {\n return editComponent;\n }\n\n public override getConfigurationComponent(): Component {\n return configurationComponent;\n }\n\n private processSelectors(selectorsToProcess: string[]): void {\n const maxAttempts = 5;\n let attemptCount = 0;\n\n function internalProcessSelectors(): void {\n if (!selectorsToProcess.length || attemptCount >= maxAttempts) {\n return;\n }\n\n nextTick(() => {\n attemptCount++;\n const failedSelectors: string[] = [];\n\n while (selectorsToProcess.length) {\n // Process the element at the front of the array.\n const selector = selectorsToProcess.shift();\n\n if (!selector) {\n // Skip to the next selector if this one is empty.\n continue;\n }\n\n const element = document.querySelector(selector);\n\n if (!element) {\n // Add the selector to the end array and skip to the next selector.\n failedSelectors.push(selector);\n }\n else {\n setCamouflagedClass(element);\n }\n }\n\n // Add the failed selectors back to the array.\n selectorsToProcess.push(...failedSelectors);\n\n if (selectorsToProcess.length) {\n internalProcessSelectors();\n }\n });\n }\n\n // Start processing selectors.\n internalProcessSelectors();\n }\n}\n","//