From dd8c1eeb527f6cc369891cd632e0d44fe2246b95 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Thu, 4 Feb 2021 20:48:16 +0100
Subject: [PATCH] web: add ak-expand

---
 web/src/authentik.css             |  7 ++++++
 web/src/elements/Expand.ts        | 36 +++++++++++++++++++++++++++++++
 web/src/pages/events/EventInfo.ts |  9 ++++----
 3 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 web/src/elements/Expand.ts

diff --git a/web/src/authentik.css b/web/src/authentik.css
index 7672cc32e..9d5c6d468 100644
--- a/web/src/authentik.css
+++ b/web/src/authentik.css
@@ -169,6 +169,13 @@ select[multiple] {
     .pf-c-table__toggle-icon {
         color: var(--ak-dark-foreground);
     }
+    /* expandable elements */
+    .pf-c-expandable-section__toggle-text {
+        color: var(--ak-dark-foreground);
+    }
+    .pf-c-expandable-section__toggle-icon {
+        color: var(--ak-dark-foreground);
+    }
     /* inputs */
     .pf-c-input-group {
         --pf-c-input-group--BackgroundColor: transparent;
diff --git a/web/src/elements/Expand.ts b/web/src/elements/Expand.ts
new file mode 100644
index 000000000..3cb684702
--- /dev/null
+++ b/web/src/elements/Expand.ts
@@ -0,0 +1,36 @@
+import { gettext } from "django";
+import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { COMMON_STYLES } from "../common/styles";
+
+@customElement("ak-expand")
+export class Expand extends LitElement {
+
+    @property({ type: Boolean })
+    expanded = false;
+
+    @property()
+    textOpen = "Show less";
+
+    @property()
+    textClosed = "Show more";
+
+    static get styles(): CSSResult[] {
+        return COMMON_STYLES;
+    }
+
+    render(): TemplateResult {
+        console.log(this.expanded);
+        return html`<div class="pf-c-expandable-section ${this.expanded ? "pf-m-expanded" : ""}">
+            <button type="button" class="pf-c-expandable-section__toggle" aria-expanded="${this.expanded}" @click=${() => {
+                this.expanded = !this.expanded;
+            }}>
+                <span class="pf-c-expandable-section__toggle-icon">
+                    <i class="fas fa-angle-right" aria-hidden="true"></i>
+                </span>
+                <span class="pf-c-expandable-section__toggle-text">${gettext(this.expanded ? this.textOpen : this.textClosed)}</span>
+            </button>
+            <slot ?hidden=${!this.expanded} class="pf-c-expandable-section__content"></slot>
+        </div>`;
+    }
+
+}
diff --git a/web/src/pages/events/EventInfo.ts b/web/src/pages/events/EventInfo.ts
index af88adf85..c51d7fe7f 100644
--- a/web/src/pages/events/EventInfo.ts
+++ b/web/src/pages/events/EventInfo.ts
@@ -76,10 +76,11 @@ export class EventInfo extends LitElement {
                     <div class="pf-l-flex__item">
                         <h3>${gettext("Using flow")}</h3>
                         <span>${until(Flow.list({
-        flow_uuid: this.event.context.flow as string,
-    }).then(resp => {
-        return html`<a href="#/flows/${resp.results[0].slug}">${resp.results[0].name}</a>`;
-    }), html`<ak-spinner size=${SpinnerSize.Medium}></ak-spinner>`)}</span>
+                            flow_uuid: this.event.context.flow as string,
+                        }).then(resp => {
+                            return html`<a href="#/flows/${resp.results[0].slug}">${resp.results[0].name}</a>`;
+                        }), html`<ak-spinner size=${SpinnerSize.Medium}></ak-spinner>`)}
+                        </span>
                     </div>
                 </div>`;
         case "login_failed":