aboutsummaryrefslogtreecommitdiffstats
path: root/old-apps/web-shared/src/components/chip.svelte
diff options
context:
space:
mode:
authorivarlovlie <git@ivarlovlie.no>2022-09-20 09:24:27 +0200
committerivarlovlie <git@ivarlovlie.no>2022-09-20 09:24:27 +0200
commita9072370ca1eb9a5cce928b1d487db0f307edea6 (patch)
tree59c3c23df930a8b5f888dc7813923abf4ceefed4 /old-apps/web-shared/src/components/chip.svelte
parent56fa963a1d63cbe0bf28e29e717cceaa417c45c1 (diff)
downloadgreatoffice-a9072370ca1eb9a5cce928b1d487db0f307edea6.tar.xz
greatoffice-a9072370ca1eb9a5cce928b1d487db0f307edea6.zip
feat: Move old apps into it's own directory
Diffstat (limited to 'old-apps/web-shared/src/components/chip.svelte')
-rw-r--r--old-apps/web-shared/src/components/chip.svelte50
1 files changed, 50 insertions, 0 deletions
diff --git a/old-apps/web-shared/src/components/chip.svelte b/old-apps/web-shared/src/components/chip.svelte
new file mode 100644
index 0000000..7fbb445
--- /dev/null
+++ b/old-apps/web-shared/src/components/chip.svelte
@@ -0,0 +1,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>