2023-05-10 02:08:55 +03:00
|
|
|
/**
|
|
|
|
* @license
|
|
|
|
* Copyright 2023 Google LLC
|
|
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
|
|
*/
|
|
|
|
|
2023-07-24 20:42:56 +03:00
|
|
|
import '../../focus/md-focus-ring.js';
|
2023-05-10 02:08:55 +03:00
|
|
|
import '../../ripple/ripple.js';
|
|
|
|
|
2023-06-16 23:07:32 +03:00
|
|
|
import {html, nothing} from 'lit';
|
2023-05-10 02:08:55 +03:00
|
|
|
|
|
|
|
import {Chip} from './chip.js';
|
|
|
|
|
2023-06-15 00:41:30 +03:00
|
|
|
interface RemoveButtonProperties {
|
|
|
|
ariaLabel: string;
|
|
|
|
disabled: boolean;
|
2023-09-18 20:57:21 +03:00
|
|
|
focusListener: EventListener;
|
2023-06-16 23:07:32 +03:00
|
|
|
tabbable?: boolean;
|
2023-06-15 00:41:30 +03:00
|
|
|
}
|
|
|
|
|
2023-05-10 02:08:55 +03:00
|
|
|
/** @protected */
|
2023-10-25 21:58:21 +03:00
|
|
|
export function renderRemoveButton({
|
|
|
|
ariaLabel,
|
|
|
|
disabled,
|
|
|
|
focusListener,
|
|
|
|
tabbable = false,
|
|
|
|
}: RemoveButtonProperties) {
|
2023-05-10 02:08:55 +03:00
|
|
|
return html`
|
2023-10-25 21:58:21 +03:00
|
|
|
<button
|
|
|
|
class="trailing action"
|
2023-06-15 00:41:30 +03:00
|
|
|
aria-label=${ariaLabel}
|
2023-06-16 23:07:32 +03:00
|
|
|
tabindex=${!tabbable ? -1 : nothing}
|
2023-05-10 02:08:55 +03:00
|
|
|
@click=${handleRemoveClick}
|
2023-10-25 21:58:21 +03:00
|
|
|
@focus=${focusListener}>
|
2023-07-18 06:27:33 +03:00
|
|
|
<md-focus-ring part="trailing-focus-ring"></md-focus-ring>
|
2023-09-18 20:57:21 +03:00
|
|
|
<md-ripple ?disabled=${disabled}></md-ripple>
|
2023-12-06 19:12:05 +03:00
|
|
|
<slot name="trailing-icon" class="trailing icon">
|
|
|
|
<svg viewBox="0 96 960 960" aria-hidden="true">
|
2023-12-06 18:57:51 +03:00
|
|
|
<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>
|
2023-05-10 02:08:55 +03:00
|
|
|
<span class="touch"></span>
|
|
|
|
</button>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
|
|
|
|
function handleRemoveClick(this: Chip, event: Event) {
|
|
|
|
if (this.disabled) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
event.stopPropagation();
|
2023-10-25 21:58:21 +03:00
|
|
|
const preventDefault = !this.dispatchEvent(
|
|
|
|
new Event('remove', {cancelable: true}),
|
|
|
|
);
|
2023-05-10 02:08:55 +03:00
|
|
|
if (preventDefault) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.remove();
|
|
|
|
}
|