<commit_before>/* Tooling
/* ========================================================================== */

import { $assign as $, $dispatch, $replaceAll } from 'esri-global-shared';

import esriSearch from 'esri-global-search';

/* Search
/* ========================================================================== */

const prefix = 'esri-header-search';

export default () => {
	/* Search: Control
	/* ====================================================================== */

	const $controlImage = $(
		document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
		{ class: `${prefix}-image`, id: `${prefix}-image` }
	);

	const $control = $('button',
		{
			class: `${prefix}-control`, id: `${prefix}-control`,
			aria: { expanded: false, controls: `${prefix}-content` }
		},
		$controlImage
	);

	$control.addEventListener('click', (event) => {
		$dispatch($control, 'header:click:search', { event });

		$dispatch($control, 'header:menu:toggle', {
			control: $control,
			content: $content,
			state:   'search',
			event
		});
	});

	/* Search: Content
	/* ====================================================================== */

	const $content = $('div', {
		class: `${prefix}-content`, id: `${prefix}-content`,
		aria: { expanded: false, labelledby: `${prefix}-control` }
	});

	/* Search: Target
	/* ====================================================================== */

	const $target = $('div', { class: prefix },
		$control, $content
	);

	/* Search: On Update
	/* ====================================================================== */

	$target.addEventListener('header:update:search', ({ detail }) => {
		$($control, { aria: { label: detail.label } });

		if ('string' === typeof detail.image) {
			$controlImage.removeAttribute('viewBox');

			$replaceAll($controlImage,
				$('use', { 'href': detail.image })
			);
		} else {
			$replaceAll($controlImage,
				...detail.image.map(
					(d) => $(
						document.createElementNS('http://www.w3.org/2000/svg', 'path'),
						{ d }
					)
				)
			);
		}

		if (detail.dialog) {
			detail.dialog.prefix = 'esri-header-search-dialog';

			const $dialog = esriSearch(detail.dialog);

			$replaceAll($content,
				$dialog
			);

			$control.addEventListener('click', (event) => {
				if ('true' === $control.getAttribute('aria-expanded')) {
					$dispatch($dialog, `${detail.dialog.prefix}:focus`, { event });
				}
			});
		}
	});

	return $target;
};<commit_msg>Add cancel button to search dialog in header<commit_after>/* Tooling
/* ========================================================================== */

import { $assign as $, $dispatch, $replaceAll } from 'esri-global-shared';

import esriSearch from 'esri-global-search';

/* Search
/* ========================================================================== */

const prefix = 'esri-header-search';

export default () => {
	/* Search: Control
	/* ====================================================================== */

	const $controlImage = $(
		document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
		{ class: `${prefix}-image`, id: `${prefix}-image` }
	);

	const $control = $('button',
		{
			class: `${prefix}-control`, id: `${prefix}-control`,
			aria: { expanded: false, controls: `${prefix}-content` }
		},
		$controlImage
	);

	$control.addEventListener('click', (event) => {
		$dispatch($control, 'header:click:search', { event });

		$dispatch($control, 'header:menu:toggle', {
			control: $control,
			content: $content,
			state:   'search',
			event
		});
	});

	/* Search: Content
	/* ====================================================================== */

	const $content = $('div', {
		class: `${prefix}-content`, id: `${prefix}-content`,
		aria: { expanded: false, labelledby: `${prefix}-control` }
	});

	/* Search: Target
	/* ====================================================================== */

	const $target = $('div', { class: prefix },
		$control, $content
	);

	/* Search: On Update
	/* ====================================================================== */

	$target.addEventListener('header:update:search', ({ detail }) => {
		$($control, { aria: { label: detail.label } });

		if ('string' === typeof detail.image) {
			$controlImage.removeAttribute('viewBox');

			$replaceAll($controlImage,
				$('use', { 'href': detail.image })
			);
		} else {
			$replaceAll($controlImage,
				...detail.image.map(
					(d) => $(
						document.createElementNS('http://www.w3.org/2000/svg', 'path'),
						{ d }
					)
				)
			);
		}

		if (detail.dialog) {
			detail.dialog.prefix = 'esri-header-search-dialog';

			const $dialog = esriSearch(detail.dialog);

			$($dialog,
				$('button', { class: 'esri-header-search-dialog-cancel' },
					$('span',
						detail.dialog.cancelLabel
					)
				)
			);

			$replaceAll($content,
				$dialog
			);

			$control.addEventListener('click', (event) => {
				if ('true' === $control.getAttribute('aria-expanded')) {
					$dispatch($dialog, `${detail.dialog.prefix}:focus`, { event });
				}
			});
		}
	});

	return $target;
};
{'fraction_non_alphanumeric': 0.3494761810634513, 'fraction_numerical': 0.003953350464518679, 'mean_word_length': 4.111111111111111, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4135025', 'n_tokens_mistral': 1723, 'n_tokens_neox': 1422, 'n_words': 259}