web/elements: add Chip and ChipGroup

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

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>`;
+    }
+
+}

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>`;
+    }
+
+}