From 75bc7c1cbdcd8758917629d4e3b4a03b74473568 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sat, 10 Apr 2021 20:12:32 +0200
Subject: [PATCH] web/elements: add Chip and ChipGroup

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/elements/chips/Chip.ts      | 39 +++++++++++++++++++++++++++++
 web/src/elements/chips/ChipGroup.ts | 37 +++++++++++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 web/src/elements/chips/Chip.ts
 create mode 100644 web/src/elements/chips/ChipGroup.ts

diff --git a/web/src/elements/chips/Chip.ts b/web/src/elements/chips/Chip.ts
new file mode 100644
index 000000000..58f544798
--- /dev/null
+++ b/web/src/elements/chips/Chip.ts
@@ -0,0 +1,39 @@
+import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFChip from "@patternfly/patternfly/components/Chip/chip.css";
+import AKGlobal from "../../authentik.css";
+
+@customElement("ak-chip")
+export class Chip extends LitElement {
+
+    @property()
+    value?: number | string;
+
+    @property({type: Boolean})
+    removable = false;
+
+    static get styles(): CSSResult[] {
+        return [PFBase, PFButton, PFChip, AKGlobal];
+    }
+
+    render(): TemplateResult {
+        return html`<li class="pf-c-chip-group__list-item">
+            <div class="pf-c-chip">
+                <span class="pf-c-chip__text">
+                    <slot></slot>
+                </span>
+                ${this.removable ? html`<button class="pf-c-button pf-m-plain" type="button" @click=${() => {
+                    this.dispatchEvent(new CustomEvent("remove", {
+                        bubbles: true,
+                        composed: true,
+                    }));
+                }}>
+                    <i class="fas fa-times" aria-hidden="true"></i>
+                </button>` : html``}
+            </div>
+        </li>`;
+    }
+
+}
diff --git a/web/src/elements/chips/ChipGroup.ts b/web/src/elements/chips/ChipGroup.ts
new file mode 100644
index 000000000..cf16d3715
--- /dev/null
+++ b/web/src/elements/chips/ChipGroup.ts
@@ -0,0 +1,37 @@
+import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFChip from "@patternfly/patternfly/components/Chip/chip.css";
+import PFChipGroup from "@patternfly/patternfly/components/ChipGroup/chip-group.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import AKGlobal from "../../authentik.css";
+import { Chip } from "./Chip";
+
+@customElement("ak-chip-group")
+export class ChipGroup extends LitElement {
+
+    static get styles(): CSSResult[] {
+        return [PFBase, PFChip, PFChipGroup, PFButton, AKGlobal];
+    }
+
+    set value(v: (string | number | undefined)[]) {}
+
+    get value(): (string | number | undefined)[] {
+        const values: (string | number | undefined)[] = [];
+        this.querySelectorAll<Chip>("ak-chip").forEach(chip => {
+            values.push(chip.value);
+        });
+        return values;
+    }
+
+    render(): TemplateResult {
+        return html`<div class="pf-c-chip-group">
+                <div class="pf-c-chip-group__main">
+                    <ul class="pf-c-chip-group__list" role="list">
+                        <slot></slot>
+                    </ul>
+                </div>
+            </div>`;
+    }
+
+}