Web/flow/expose flow in lightdom

authentik/flows/templates/if/flow.html

@@ -48,7 +48,7 @@
 <ak-skip-to-content></ak-skip-to-content>
 <ak-message-container></ak-message-container>
 <ak-drawer id="flow-drawer">
-    <ak-flow-executor
+    <ak-flow
         slug="{{ flow.slug }}"
         class="pf-c-login"
         data-layout="{{ flow.layout|default:'stacked' }}"
@@ -57,7 +57,7 @@
         {% include "base/placeholder.html" %}
 
         <ak-brand-links name="flow-links" slot="footer"></ak-brand-links>
-    </ak-flow-executor>
+    </ak-flow>
 
     <ak-flow-inspector
         slot="panel"

web/src/elements/directives/light.ts

@@ -0,0 +1,114 @@
+import { html, noChange, nothing, render, TemplateResult } from "lit";
+import { AsyncDirective, DirectiveResult } from "lit/async-directive.js";
+import { ChildPart, directive, PartInfo, PartType } from "lit/directive.js";
+import { RootPart } from "lit/html.js";
+
+export interface LightChildOptions {
+    // Optional alternative target for any `@event`-style handlers passed into the template. NOTE:
+    // this only works if the handlers do not already have a `this` bound to them, so only ordinary
+    // functions and methods will respond to this parameter; arrow function class fields and bound
+    // functions will use the `this` to which they were bound.
+
+    host?: Element;
+    slotName?: string;
+}
+
+class LightChildDirective extends AsyncDirective {
+    // These must remain public: the dependency tree of all of these leads to their being imported
+    // into parts of the DOM by the host, and TSC complains otherwise.
+
+    public slotName: string | null = null;
+    public slot: HTMLSlotElement | null = null;
+    public host: Element | null = null;
+    public rootPart: RootPart | null = null;
+    public sentinel: Comment | null = null;
+
+    constructor(partInfo: PartInfo) {
+        super(partInfo);
+        if (partInfo.type !== PartType.CHILD) {
+            throw new Error("The `light()` directive can only be use in child position");
+        }
+    }
+
+    // This is for SSR only.
+    render(_template?: TemplateResult | DirectiveResult, options?: LightChildOptions) {
+        this.slotName ??= options?.slotName ?? `lc-${Math.random().toString(36).slice(2, 8)}`;
+        return html`<slot name="${this.slotName}"></slot>`;
+    }
+
+    update(
+        part: ChildPart,
+        [template, options = {}]: [TemplateResult | DirectiveResult, LightChildOptions],
+    ) {
+        this.slotName ??= options?.slotName ?? `lc-${Math.random().toString(36).slice(2, 8)}`;
+
+        // This places a comment in the LightDom that belongs to this directive. Comments are not
+        // part of the DOM tree for the purposes of CSS, so it will be possible to style this child
+        // directly without a wrapper.
+
+        if (!this.sentinel) {
+            const rootNode = part.parentNode.getRootNode();
+            this.host ??= (part.options?.host ||
+                (rootNode instanceof ShadowRoot ? rootNode.host : null)) as Element | null;
+
+            if (!this.host) {
+                throw new Error(
+                    "light() must be used inside a shadow root or a valid options.host",
+                );
+            }
+
+            this.sentinel = document.createComment("");
+            this.host.appendChild(this.sentinel);
+        }
+
+        if (!this.sentinel.parentNode) {
+            throw new Error("Could not assign sentinel to element.");
+        }
+
+        const renderOptions = Object.fromEntries(
+            Object.entries(options).filter(([key]) => ["host"].includes(key)),
+        );
+
+        this.rootPart = render(template, this.sentinel.parentNode as HTMLElement, {
+            renderBefore: this.sentinel,
+            ...renderOptions,
+        });
+
+        const rendered = this.sentinel.previousSibling;
+        if (rendered instanceof Element) {
+            rendered.slot = this.slotName;
+        }
+
+        if (!this.slot) {
+            this.slot = Object.assign(document.createElement("slot"), {
+                name: this.slotName,
+            });
+            return this.slot;
+        }
+
+        return noChange;
+    }
+
+    disconnected() {
+        if (this.sentinel?.parentNode && this.host?.isConnected) {
+            // The node that contains the directive has been disconnected, *not* the host. We need
+            // to clean up the associated lightDOM element.
+            render(nothing, this.sentinel.parentNode as HTMLElement, {
+                renderBefore: this.sentinel,
+            });
+            this.sentinel.remove();
+            this.sentinel = null;
+            this.rootPart = null;
+            return;
+        }
+
+        // The host has been disconnected. Inform any child components.
+        this.rootPart?.setConnected(false);
+    }
+
+    reconnected() {
+        this.rootPart?.setConnected(true);
+    }
+}
+
+export const light = directive(LightChildDirective);

web/src/flow/Flow.stories.ts

@@ -0,0 +1,11 @@
+import "@patternfly/patternfly/components/Login/login.css";
+import "#stories/flow-interface";
+import "#flow/stages/dummy/DummyStage";
+
+import { flowFactory } from "#stories/flow-interface";
+
+export default {
+    title: "Flow / ak-flow-executor",
+};
+
+export const BackgroundImage = flowFactory("ak-stage-dummy");