blob: 7fbb445e92685a29b3010358e2f698520d7f5d7a (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<script>
import {IconNames} from "$shared/lib/configuration";
import {createEventDispatcher} from "svelte";
import Button from "./button.svelte";
const dispatch = createEventDispatcher();
export let removable = false;
export let clickable = false;
export let text = "";
export let id = "";
export let color = "";
export let tabindex = "";
function handle_remove() {
if (removable) {
dispatch("remove", {
id
});
}
}
function handle_click() {
if (clickable) {
dispatch("clicked", {
id
});
}
}
</script>
<div class="chip break-word text-sm justify-between justify-start@md {clickable ? 'chip--interactive' : ''}"
on:click={handle_click}
id={id}
style={color !== "" ? `background-color: ${color}15; border: 1px solid ${color}; color: ${color}` : ""}
{tabindex}
>
<span class="chip__label">{text}</span>
{#if removable}
<Button class="chip__btn"
variant="reset"
style="{color !== '' ? `background-color: ${color}45;` : ''}"
{tabindex}
icon="{IconNames.x}"
icon_width="initial"
icon_height="initial"
on:click={handle_remove}
/>
{/if}
</div>
|
