@material/web
Version:
Material web components
43 lines • 1.31 kB
JavaScript
/**
* @license
* Copyright 2023 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import '../../focus/md-focus-ring.js';
import '../../ripple/ripple.js';
import { html, nothing } from 'lit';
/** @protected */
export function renderRemoveButton({ ariaLabel, disabled, focusListener, tabbable = false, }) {
return html `
<button
class="trailing action"
aria-label=${ariaLabel}
tabindex=${!tabbable ? -1 : nothing}
=${handleRemoveClick}
=${focusListener}>
<md-focus-ring part="trailing-focus-ring"></md-focus-ring>
<md-ripple ?disabled=${disabled}></md-ripple>
<span class="trailing icon" aria-hidden="true">
<slot name="remove-trailing-icon">
<svg viewBox="0 96 960 960">
<path
d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
</svg>
</slot>
</span>
<span class="touch"></span>
</button>
`;
}
function handleRemoveClick(event) {
if (this.disabled) {
return;
}
event.stopPropagation();
const preventDefault = !this.dispatchEvent(new Event('remove', { cancelable: true }));
if (preventDefault) {
return;
}
this.remove();
}
//# sourceMappingURL=trailing-icons.js.map