@devvit/ui-renderer 0.9.0 → 0.9.2

package/blocks/templates/renderWebViewBlock.d.ts

@@ -1,5 +1,6 @@
 import { TemplateLike } from '@reddit/baseplate/html.js';
 import { Block } from '@devvit/protos';
 import { RenderContext } from './index.js';
+import '../components/devvit-blocks-webview.js';
 export declare function renderWebViewBlock(block: Block, ctx: RenderContext): TemplateLike;
 //# sourceMappingURL=renderWebViewBlock.d.ts.map

package/blocks/templates/renderWebViewBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderWebViewBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderWebViewBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AASrD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAgCjF"}
+{"version":3,"file":"renderWebViewBlock.d.ts","sourceRoot":"","sources":["../../../src/blocks/templates/renderWebViewBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAErD,OAAO,wCAAwC,CAAC;AAEhD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA2BjF"}

package/blocks/templates/renderWebViewBlock.js

@@ -1,12 +1,8 @@
 import { nothing } from '@reddit/baseplate/html.js';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
-import { sizingClass, sizingStyle } from '../attributes.js';
+import { defaultClasses, sizingClass, sizingStyle, stackChildClass } from '../attributes.js';
 import { classMap } from './index.js';
-const iframeRefs = {};
-const postMessage = (src, ctx) => {
-    const iframe = iframeRefs[src];
-    iframe?.contentWindow?.postMessage(ctx, '*');
-};
+import '../components/devvit-blocks-webview.js';
 export function renderWebViewBlock(block, ctx) {
     const { html, styleMap } = getTemplateRenderingStrategy();
     if (!block.config?.webviewConfig) {
@@ -15,22 +11,19 @@ export function renderWebViewBlock(block, ctx) {
     }
     const { url } = block.config.webviewConfig;
     const classes = {
+        ...defaultClasses(block.type),
+        ...stackChildClass(ctx.stackDirection),
         ...sizingClass(block.size),
     };
     const styles = {
         ...sizingStyle(block.size),
     };
-    const onLoad = (evt) => {
-        iframeRefs[url] = evt.target;
-        postMessage(url, ctx);
-    };
-    const saveRef = (el) => (iframeRefs[url] = el);
-    return html `<iframe
+    return html `<devvit-blocks-webview
     src="${url}"
-    sandbox="allow-scripts"
     class="${classMap(classes)}"
     style="${styleMap(styles)}"
-    @load="${onLoad}"
-    ref="${saveRef}"
-  ></iframe>`;
+    .request="${ctx.request}"
+    .state="${ctx.state}"
+    data-debug-block-type="webview"
+  ></devvit-blocks-webview>`;
 }

package/client/devvit-custom-post.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, PropertyValues } from 'lit';
 import '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
-import type { Element, Metadata } from '@devvit/protos';
+import type { Metadata } from '@devvit/protos';
 import { Block, RenderPostResponse } from '@devvit/protos';
 import type { ActorRef } from '@devvit/runtimes/common/runtime/ActorRef.js';
 import './devvit-animation-player.js';
@@ -16,8 +16,8 @@ export declare class DevvitCustomPost extends LitElement {
     postId?: string;
     renderResponse?: RenderPostResponse;
     rootBlock?: Block;
-    alphaRootBlock?: Element;
     static get styles(): import("lit").CSSResult[];
+    connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues): void;
     render(): import("@reddit/baseplate/html.js").TemplateLike;

package/client/devvit-custom-post.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"devvit-custom-post.d.ts","sourceRoot":"","sources":["../../src/client/devvit-custom-post.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvD,OAAO,kEAAkE,CAAC;AAK1E,OAAO,KAAK,EAIV,OAAO,EAEP,QAAQ,EAIT,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,KAAK,EAML,kBAAkB,EAEnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AAK5E,OAAO,8BAA8B,CAAC;AAEtC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF;AASD,qBACa,gBAAiB,SAAQ,UAAU;;IAE9C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAGpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAGpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IAGpC,SAAS,CAAC,EAAE,KAAK,CAAC;IAGlB,cAAc,CAAC,EAAE,OAAO,CAAC;IAYzB,WAAoB,MAAM,8BAEzB;IAMQ,oBAAoB;cAOV,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAatD,MAAM;CA6FhB"}
+{"version":3,"file":"devvit-custom-post.d.ts","sourceRoot":"","sources":["../../src/client/devvit-custom-post.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKvD,OAAO,kEAAkE,CAAC;AAI1E,OAAO,KAAK,EAMV,QAAQ,EAIT,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,KAAK,EAML,kBAAkB,EAEnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AAM5E,OAAO,8BAA8B,CAAC;AAEtC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF;AASD,qBAEa,gBAAiB,SAAQ,UAAU;;IAE9C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAGpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAGpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IAGpC,SAAS,CAAC,EAAE,KAAK,CAAC;IAalB,WAAoB,MAAM,8BAEzB;IAMQ,iBAAiB;IAKjB,oBAAoB;cAQV,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAatD,MAAM;CAqGhB"}

package/client/devvit-custom-post.js

@@ -1,15 +1,16 @@
-var _DevvitCustomPost_instances, _DevvitCustomPost_postData, _DevvitCustomPost_appState, _DevvitCustomPost_customPostActor, _DevvitCustomPost_uiEventHandlerActor, _DevvitCustomPost_rpcQueue, _DevvitCustomPost_rerenderTimeout, _DevvitCustomPost_state_get, _DevvitCustomPost_handleUIEvent, _DevvitCustomPost_renderRequest, _DevvitCustomPost_initialRender, _DevvitCustomPost_userActionRender, _DevvitCustomPost_effectEventRender, _DevvitCustomPost_renderPost, _DevvitCustomPost_handleEffects;
+var _DevvitCustomPost_instances, _DevvitCustomPost_postData, _DevvitCustomPost_appState, _DevvitCustomPost_lastRequest, _DevvitCustomPost_customPostActor, _DevvitCustomPost_uiEventHandlerActor, _DevvitCustomPost_rpcQueue, _DevvitCustomPost_rerenderTimeout, _DevvitCustomPost_state_get, _DevvitCustomPost_handleUIEvent, _DevvitCustomPost_handleUserAction, _DevvitCustomPost_renderRequest, _DevvitCustomPost_initialRender, _DevvitCustomPost_userActionRender, _DevvitCustomPost_effectEventRender, _DevvitCustomPost_renderPost, _DevvitCustomPost_handleEffects;
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate, __metadata } from "tslib";
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { localized, msg } from '@lit/localize';
 import PQueue from 'p-queue';
 import '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
 import { emptyState } from '@reddit/faceplate-ui/templates/empty-state.js';
 import { customEvent } from '@reddit/faceplate/lib/custom-event.js';
-import tailwind from '@reddit/shreddit.styles';
 import { Block, BlockRenderEventType, BlockStackDirection, BlockType, CustomPostDefinition, EffectType, RenderPostResponse, UIEventHandlerDefinition, } from '@devvit/protos';
 import { renderBlocks } from '../blocks/index.js';
 import { snooBlocks } from './assets/snooBlocks.js';
+import { styles } from '../styles.js';
 import './devvit-animation-player.js';
 let DevvitCustomPost = class DevvitCustomPost extends LitElement {
     constructor() {
@@ -17,6 +18,7 @@ let DevvitCustomPost = class DevvitCustomPost extends LitElement {
         _DevvitCustomPost_instances.add(this);
         _DevvitCustomPost_postData.set(this, void 0);
         _DevvitCustomPost_appState.set(this, {});
+        _DevvitCustomPost_lastRequest.set(this, void 0);
         _DevvitCustomPost_customPostActor.set(this, void 0);
         _DevvitCustomPost_uiEventHandlerActor.set(this, void 0);
         _DevvitCustomPost_rpcQueue.set(this, new PQueue({ concurrency: 1 }));
@@ -35,19 +37,27 @@ let DevvitCustomPost = class DevvitCustomPost extends LitElement {
                 }
             });
         });
+        _DevvitCustomPost_handleUserAction.set(this, (event) => {
+            __classPrivateFieldGet(this, _DevvitCustomPost_instances, "m", _DevvitCustomPost_userActionRender).call(this, event.detail.action.id, event.detail.action.data);
+        });
         _DevvitCustomPost_renderRequest.set(this, (type, id, data = {}) => ({
             blocks: { type, id, data },
             state: __classPrivateFieldGet(this, _DevvitCustomPost_instances, "a", _DevvitCustomPost_state_get),
         }));
     }
     static get styles() {
-        return [tailwind];
+        return [styles];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('devvit-user-action', __classPrivateFieldGet(this, _DevvitCustomPost_handleUserAction, "f"));
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         if (__classPrivateFieldGet(this, _DevvitCustomPost_rerenderTimeout, "f") !== undefined) {
             window.clearTimeout(__classPrivateFieldGet(this, _DevvitCustomPost_rerenderTimeout, "f"));
         }
+        this.removeEventListener('devvit-user-action', __classPrivateFieldGet(this, _DevvitCustomPost_handleUserAction, "f"));
     }
     willUpdate(changedProperties) {
         if (changedProperties.has('actorRef')) {
@@ -65,7 +75,7 @@ let DevvitCustomPost = class DevvitCustomPost extends LitElement {
         }
         if (this.rootBlock && this.rootBlock.type === BlockType.BLOCK_ROOT) {
             return renderBlocks(this.rootBlock, {
-                blockRender: this.renderResponse.blocks,
+                request: __classPrivateFieldGet(this, _DevvitCustomPost_lastRequest, "f"),
                 state: __classPrivateFieldGet(this, _DevvitCustomPost_instances, "a", _DevvitCustomPost_state_get),
                 stackDirection: BlockStackDirection.UNRECOGNIZED,
                 onAction: (action) => {
@@ -74,13 +84,15 @@ let DevvitCustomPost = class DevvitCustomPost extends LitElement {
             });
         }
         return html `${emptyState({
-            creative: html `<div class="w-lg h-lg">${snooBlocks}</div>`,
-            title: 'Whoops!',
-            description: 'Something went wrong while attempting to display this content.',
+            creative: html `<div class="w-3xl h-3xl">${snooBlocks}</div>`,
+            title: msg('Whoops!', { desc: 'Header for message to display when rendering fails' }),
+            description: msg('Something went wrong while attempting to display this content.', {
+                desc: 'Message for users to display when rendering fails',
+            }),
         })}`;
     }
 };
-_DevvitCustomPost_postData = new WeakMap(), _DevvitCustomPost_appState = new WeakMap(), _DevvitCustomPost_customPostActor = new WeakMap(), _DevvitCustomPost_uiEventHandlerActor = new WeakMap(), _DevvitCustomPost_rpcQueue = new WeakMap(), _DevvitCustomPost_rerenderTimeout = new WeakMap(), _DevvitCustomPost_handleUIEvent = new WeakMap(), _DevvitCustomPost_renderRequest = new WeakMap(), _DevvitCustomPost_instances = new WeakSet(), _DevvitCustomPost_state_get = function _DevvitCustomPost_state_get() {
+_DevvitCustomPost_postData = new WeakMap(), _DevvitCustomPost_appState = new WeakMap(), _DevvitCustomPost_lastRequest = new WeakMap(), _DevvitCustomPost_customPostActor = new WeakMap(), _DevvitCustomPost_uiEventHandlerActor = new WeakMap(), _DevvitCustomPost_rpcQueue = new WeakMap(), _DevvitCustomPost_rerenderTimeout = new WeakMap(), _DevvitCustomPost_handleUIEvent = new WeakMap(), _DevvitCustomPost_handleUserAction = new WeakMap(), _DevvitCustomPost_renderRequest = new WeakMap(), _DevvitCustomPost_instances = new WeakSet(), _DevvitCustomPost_state_get = function _DevvitCustomPost_state_get() {
     return Object.assign({}, __classPrivateFieldGet(this, _DevvitCustomPost_postData, "f"), __classPrivateFieldGet(this, _DevvitCustomPost_appState, "f"));
 }, _DevvitCustomPost_initialRender = function _DevvitCustomPost_initialRender() {
     __classPrivateFieldGet(this, _DevvitCustomPost_instances, "m", _DevvitCustomPost_renderPost).call(this, __classPrivateFieldGet(this, _DevvitCustomPost_renderRequest, "f").call(this, BlockRenderEventType.RENDER_INITIAL));
@@ -97,7 +109,9 @@ _DevvitCustomPost_postData = new WeakMap(), _DevvitCustomPost_appState = new Wea
                 __classPrivateFieldSet(this, _DevvitCustomPost_appState, this.renderResponse.state, "f");
             }
             if (this.renderResponse?.blocks?.ui) {
+                __classPrivateFieldSet(this, _DevvitCustomPost_lastRequest, req.blocks, "f");
                 this.rootBlock = this.renderResponse.blocks.ui;
+                await this.updateComplete;
             }
             await __classPrivateFieldGet(this, _DevvitCustomPost_instances, "m", _DevvitCustomPost_handleEffects).call(this, this.renderResponse.effects);
         }
@@ -137,11 +151,8 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], DevvitCustomPost.prototype, "rootBlock", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], DevvitCustomPost.prototype, "alphaRootBlock", void 0);
 DevvitCustomPost = __decorate([
+    localized(),
     customElement('devvit-custom-post')
 ], DevvitCustomPost);
 export { DevvitCustomPost };

package/client/effects/form-effect-handler.d.ts

@@ -4,6 +4,7 @@ import { ReactiveElement } from 'lit';
 export declare class FormEffectHandler extends DevvitEffectHandler {
     #private;
     constructor(host: ReactiveElement, queryString: string);
+    hostUpdated(): void;
     protected onShowForm(form: Form, onEvent: (event: UIEvent) => void): void;
 }
 //# sourceMappingURL=form-effect-handler.d.ts.map

package/client/effects/form-effect-handler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-effect-handler.d.ts","sourceRoot":"","sources":["../../../src/client/effects/form-effect-handler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAGtC,qBAAa,iBAAkB,SAAQ,mBAAmB;;gBAG5C,IAAI,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM;cAKnC,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI;CAG5E"}
+{"version":3,"file":"form-effect-handler.d.ts","sourceRoot":"","sources":["../../../src/client/effects/form-effect-handler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAGtC,qBAAa,iBAAkB,SAAQ,mBAAmB;;gBAK5C,IAAI,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM;IAK7C,WAAW;cAKD,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI;CAG5E"}

package/client/effects/form-effect-handler.js

@@ -1,15 +1,19 @@
-var _FormEffectHandler_queryString;
-import { __classPrivateFieldSet } from "tslib";
+var _FormEffectHandler_queryString, _FormEffectHandler_dialog;
+import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
 import { DevvitEffectHandler } from './devvit-effect-handler.js';
-import { customEvent } from '@reddit/faceplate/lib/custom-event.js';
 export class FormEffectHandler extends DevvitEffectHandler {
     constructor(host, queryString) {
         super(host);
         _FormEffectHandler_queryString.set(this, void 0);
+        _FormEffectHandler_dialog.set(this, void 0);
         __classPrivateFieldSet(this, _FormEffectHandler_queryString, queryString, "f");
     }
+    hostUpdated() {
+        super.hostUpdated();
+        __classPrivateFieldSet(this, _FormEffectHandler_dialog, this.host.renderRoot.querySelector(__classPrivateFieldGet(this, _FormEffectHandler_queryString, "f")), "f");
+    }
     onShowForm(form, onEvent) {
-        this.host.dispatchEvent(customEvent('devvit-show-form', { form, onEvent }));
+        __classPrivateFieldGet(this, _FormEffectHandler_dialog, "f")?.showForm(form, onEvent);
     }
 }
-_FormEffectHandler_queryString = new WeakMap();
+_FormEffectHandler_queryString = new WeakMap(), _FormEffectHandler_dialog = new WeakMap();

package/client/formbuilder/components/devvit-form-selection-dropdown.d.ts

@@ -0,0 +1,17 @@
+import { PropertyValues, TemplateResult } from 'lit';
+import { FormField } from '@devvit/protos';
+import '@reddit/faceplate-ui/components/faceplate-dropdown-menu.js';
+import '@reddit/faceplate-ui/components/faceplate-menu.js';
+import '@reddit/faceplate-ui/components/faceplate-switch-input.js';
+import { InputElement } from '@reddit/faceplate/base-classes/input-element.js';
+export declare class DevvitFormSelectionDropdown extends InputElement {
+    #private;
+    field: FormField | undefined;
+    dropdownOpen: boolean;
+    currentLabel: string;
+    static get styles(): import("lit").CSSResultGroup[];
+    get value(): string;
+    willUpdate(changedProperties: PropertyValues): void;
+    render(): TemplateResult<1>;
+}
+//# sourceMappingURL=devvit-form-selection-dropdown.d.ts.map

package/client/formbuilder/components/devvit-form-selection-dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devvit-form-selection-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/components/devvit-form-selection-dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AASjE,OAAO,EAGL,SAAS,EAEV,MAAM,gBAAgB,CAAC;AAIxB,OAAO,4DAA4D,CAAC;AACpE,OAAO,mDAAmD,CAAC;AAC3D,OAAO,2DAA2D,CAAC;AAEnE,OAAO,EAAE,YAAY,EAAE,MAAM,iDAAiD,CAAC;AAE/E,qBAAa,2BAA4B,SAAQ,YAAY;;IAE3D,KAAK,EAAE,SAAS,GAAG,SAAS,CAAC;IAG7B,YAAY,UAAS;IAGrB,YAAY,SAAM;IAKlB,WAAoB,MAAM,mCAEzB;IAED,IAAI,KAAK,WAER;IAED,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAwDnC,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC;CAgDrC"}

package/client/formbuilder/components/devvit-form-selection-dropdown.js

@@ -0,0 +1,138 @@
+var _DevvitFormSelectionDropdown_selection, _DevvitFormSelectionDropdown_config, _DevvitFormSelectionDropdown_updateSelection, _DevvitFormSelectionDropdown_singleSelectListItem, _DevvitFormSelectionDropdown_multiSelectListItem;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate, __metadata } from "tslib";
+import { property, state } from 'lit/decorators.js';
+import { html, ifDefined } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import { listItem } from '@reddit/faceplate-ui/templates/list-item.js';
+import { button } from '@reddit/faceplate-ui/templates/button.js';
+import { msg } from '@reddit/faceplate/lib/i18n/localize.js';
+import { FieldConfig_Selection, FormFieldValue_SelectionValue, } from '@devvit/protos';
+import { styles } from '../../../styles.js';
+import '@reddit/faceplate-ui/components/faceplate-dropdown-menu.js';
+import '@reddit/faceplate-ui/components/faceplate-menu.js';
+import '@reddit/faceplate-ui/components/faceplate-switch-input.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { InputElement } from '@reddit/faceplate/base-classes/input-element.js';
+export class DevvitFormSelectionDropdown extends InputElement {
+    constructor() {
+        super(...arguments);
+        this.dropdownOpen = false;
+        this.currentLabel = '';
+        _DevvitFormSelectionDropdown_selection.set(this, FormFieldValue_SelectionValue.fromPartial({}));
+        _DevvitFormSelectionDropdown_config.set(this, FieldConfig_Selection.fromPartial({}));
+        _DevvitFormSelectionDropdown_updateSelection.set(this, (choice, selected = true) => {
+            if (__classPrivateFieldGet(this, _DevvitFormSelectionDropdown_config, "f").multiSelect) {
+                const index = __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_selection, "f").values.indexOf(choice.value);
+                if (selected && index < 0) {
+                    __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_selection, "f").values.push(choice.value);
+                }
+                else if (index >= 0) {
+                    __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_selection, "f").values.splice(index, 1);
+                }
+                if (__classPrivateFieldGet(this, _DevvitFormSelectionDropdown_selection, "f").values.length === 0) {
+                    this.currentLabel = '';
+                }
+                else if (__classPrivateFieldGet(this, _DevvitFormSelectionDropdown_selection, "f").values.length === 1) {
+                    this.currentLabel =
+                        __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_config, "f").choices.find((c) => c.value === __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_selection, "f").values[0])?.label ?? '';
+                }
+                else {
+                    this.currentLabel = msg('[Multiple Selections]', {
+                        desc: 'Displayed on a drop down menu when multiple values are selected',
+                    });
+                }
+            }
+            else {
+                __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_selection, "f").values = [choice.value];
+                this.currentLabel = choice.label;
+            }
+        });
+        _DevvitFormSelectionDropdown_singleSelectListItem.set(this, (choice) => listItem({
+            label: choice.label,
+            onClick: () => __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_updateSelection, "f").call(this, choice),
+        }));
+        _DevvitFormSelectionDropdown_multiSelectListItem.set(this, (choice) => listItem({
+            label: html `
+        <faceplate-switch-input
+          @input="${(ev) => __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_updateSelection, "f").call(this, choice, ev.currentTarget.checked)}"
+        >
+          ${choice.label}
+        </faceplate-switch-input>
+      `,
+            onClick: (ev) => ev.stopImmediatePropagation(),
+        }));
+    }
+    static get styles() {
+        return [super.styles, styles];
+    }
+    get value() {
+        return __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_selection, "f").values.join(',');
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('field')) {
+            __classPrivateFieldSet(this, _DevvitFormSelectionDropdown_config, this.field?.fieldConfig?.selectionConfig ?? FieldConfig_Selection.fromPartial({}), "f");
+            __classPrivateFieldSet(this, _DevvitFormSelectionDropdown_selection, this.field?.defaultValue?.selectionValue ?? FormFieldValue_SelectionValue.fromPartial({}), "f");
+            if (!__classPrivateFieldGet(this, _DevvitFormSelectionDropdown_config, "f").multiSelect) {
+                this.currentLabel =
+                    __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_config, "f").choices.find((c) => c.value === __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_selection, "f").values?.[0])?.label ?? '';
+            }
+        }
+    }
+    render() {
+        let formField;
+        if (this.field) {
+            const items = __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_config, "f").choices?.map((choice) => __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_config, "f").multiSelect
+                ? __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_multiSelectListItem, "f").call(this, choice)
+                : __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_singleSelectListItem, "f").call(this, choice));
+            const emptyItem = !__classPrivateFieldGet(this, _DevvitFormSelectionDropdown_config, "f").multiSelect && !__classPrivateFieldGet(this, _DevvitFormSelectionDropdown_config, "f").minSelections
+                ? listItem({
+                    label: html `&nbsp;`,
+                    onClick: () => {
+                        this.currentLabel = '';
+                        __classPrivateFieldGet(this, _DevvitFormSelectionDropdown_selection, "f").values = [];
+                    },
+                })
+                : undefined;
+            const classes = {
+                'flex-grow': true,
+                'z-auto': !this.dropdownOpen,
+            };
+            formField = html `
+        <faceplate-dropdown-menu
+          id="${this.field.fieldId}"
+          class="${classMap(classes)}"
+          .onopen="${() => (this.dropdownOpen = true)}"
+          .onclose="${() => (this.dropdownOpen = false)}"
+          ?disabled="${ifDefined(this.field.disabled)}"
+        >
+          ${button({
+                attributes: {
+                    disabled: this.field.disabled === true,
+                    className: 'flex-grow',
+                },
+                children: html `<span class="grow">${this.currentLabel}</span>`,
+                selected: this.dropdownOpen,
+                dropdown: true,
+            })}
+          <faceplate-menu slot="menu">${emptyItem}${items}</faceplate-menu>
+        </faceplate-dropdown-menu>
+      `;
+        }
+        return html `${formField}${super.render()}`;
+    }
+}
+_DevvitFormSelectionDropdown_selection = new WeakMap(), _DevvitFormSelectionDropdown_config = new WeakMap(), _DevvitFormSelectionDropdown_updateSelection = new WeakMap(), _DevvitFormSelectionDropdown_singleSelectListItem = new WeakMap(), _DevvitFormSelectionDropdown_multiSelectListItem = new WeakMap();
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], DevvitFormSelectionDropdown.prototype, "field", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], DevvitFormSelectionDropdown.prototype, "dropdownOpen", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], DevvitFormSelectionDropdown.prototype, "currentLabel", void 0);
+// Faceplate's base classes and mixins aren't playing nice with type checking for some reason
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+customElements.define('devvit-form-selection-dropdown', DevvitFormSelectionDropdown);

package/client/formbuilder/components/devvit-form-selection-list.d.ts

@@ -0,0 +1,14 @@
+import { PropertyValues, TemplateResult } from 'lit';
+import { FormField } from '@devvit/protos';
+import '@reddit/faceplate-ui/components/faceplate-radio-input.js';
+import '@reddit/faceplate-ui/components/faceplate-checkbox-input.js';
+import { InputElement } from '@reddit/faceplate/base-classes/input-element.js';
+export declare class DevvitFormSelectionList extends InputElement {
+    #private;
+    field: FormField | undefined;
+    static get styles(): import("lit").CSSResultGroup[];
+    get value(): string;
+    willUpdate(changedProperties: PropertyValues): void;
+    render(): TemplateResult<1>;
+}
+//# sourceMappingURL=devvit-form-selection-list.d.ts.map

package/client/formbuilder/components/devvit-form-selection-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devvit-form-selection-list.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/components/devvit-form-selection-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAMjE,OAAO,EAGL,SAAS,EAEV,MAAM,gBAAgB,CAAC;AAKxB,OAAO,0DAA0D,CAAC;AAClE,OAAO,6DAA6D,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,iDAAiD,CAAC;AAE/E,qBAAa,uBAAwB,SAAQ,YAAY;;IAEvD,KAAK,EAAE,SAAS,GAAG,SAAS,CAAC;IAK7B,WAAoB,MAAM,mCAEzB;IAED,IAAI,KAAK,WAER;IAED,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAsBnC,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC;CA6CrC"}

package/client/formbuilder/components/devvit-form-selection-list.js

@@ -0,0 +1,91 @@
+var _DevvitFormSelectionList_config, _DevvitFormSelectionList_selection, _DevvitFormSelectionList_updateSelection;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate, __metadata } from "tslib";
+import { property } from 'lit/decorators.js';
+import { html, repeat } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import { FieldConfig_Selection, FormFieldValue_SelectionValue, } from '@devvit/protos';
+import { renderFieldLabel } from '../fields/index.js';
+import { styles } from '../../../styles.js';
+import '@reddit/faceplate-ui/components/faceplate-radio-input.js';
+import '@reddit/faceplate-ui/components/faceplate-checkbox-input.js';
+import { InputElement } from '@reddit/faceplate/base-classes/input-element.js';
+export class DevvitFormSelectionList extends InputElement {
+    constructor() {
+        super(...arguments);
+        _DevvitFormSelectionList_config.set(this, FieldConfig_Selection.fromPartial({}));
+        _DevvitFormSelectionList_selection.set(this, FormFieldValue_SelectionValue.fromPartial({}));
+        _DevvitFormSelectionList_updateSelection.set(this, (choice, selected = true) => {
+            if (__classPrivateFieldGet(this, _DevvitFormSelectionList_config, "f").multiSelect) {
+                const index = __classPrivateFieldGet(this, _DevvitFormSelectionList_selection, "f").values.indexOf(choice.value);
+                if (selected && index < 0) {
+                    __classPrivateFieldGet(this, _DevvitFormSelectionList_selection, "f").values.push(choice.value);
+                }
+                else if (index >= 0) {
+                    __classPrivateFieldGet(this, _DevvitFormSelectionList_selection, "f").values.splice(index, 1);
+                }
+            }
+            else {
+                __classPrivateFieldGet(this, _DevvitFormSelectionList_selection, "f").values = [choice.value];
+            }
+        });
+    }
+    static get styles() {
+        return [super.styles, styles];
+    }
+    get value() {
+        return __classPrivateFieldGet(this, _DevvitFormSelectionList_selection, "f").values.join(',');
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('field')) {
+            __classPrivateFieldSet(this, _DevvitFormSelectionList_config, this.field?.fieldConfig?.selectionConfig ?? FieldConfig_Selection.fromPartial({}), "f");
+            __classPrivateFieldSet(this, _DevvitFormSelectionList_selection, this.field?.defaultValue?.selectionValue ?? FormFieldValue_SelectionValue.fromPartial({}), "f");
+        }
+    }
+    render() {
+        let formField;
+        if (this.field) {
+            const renderRadio = (choice, index) => {
+                const id = `${this.field?.fieldId}_${index}`;
+                return html `
+          <faceplate-radio-input
+            id="${id}"
+            name="${this.field?.fieldId}"
+            data-value="${choice.value}"
+            ?disabled="${this.field?.disabled}"
+            ?required="${this.field?.required}"
+            @input="${() => {
+                    __classPrivateFieldGet(this, _DevvitFormSelectionList_updateSelection, "f").call(this, choice);
+                }}"
+          >
+            ${choice.label}
+          </faceplate-radio-input>
+        `;
+            };
+            const renderCheckbox = (choice, index) => {
+                const id = `${this.field?.fieldId}_${index}`;
+                return html `
+          <faceplate-checkbox-input
+            id="${id}"
+            name="${this.field?.fieldId}"
+            class="m-sm"
+            data-value="${choice.value}"
+            @input="${(ev) => {
+                    __classPrivateFieldGet(this, _DevvitFormSelectionList_updateSelection, "f").call(this, choice, ev.currentTarget.checked);
+                }}"
+          >
+            ${choice.label}
+          </faceplate-checkbox-input>
+        `;
+            };
+            formField = html `${renderFieldLabel(this.field)}${repeat(__classPrivateFieldGet(this, _DevvitFormSelectionList_config, "f").choices ?? [], __classPrivateFieldGet(this, _DevvitFormSelectionList_config, "f").multiSelect === true ? renderCheckbox : renderRadio)}`;
+        }
+        return html `${formField}${super.render()}`;
+    }
+}
+_DevvitFormSelectionList_config = new WeakMap(), _DevvitFormSelectionList_selection = new WeakMap(), _DevvitFormSelectionList_updateSelection = new WeakMap();
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], DevvitFormSelectionList.prototype, "field", void 0);
+// Faceplate's base classes and mixins aren't playing nice with type checking for some reason
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+customElements.define('devvit-form-selection-list', DevvitFormSelectionList);

package/client/formbuilder/devvit-form-dialog.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+import '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import { FaceplateDialog } from '@reddit/faceplate-ui/components/faceplate-dialog.js';
+import { FaceplateForm } from '@reddit/faceplate/components/faceplate-form.js';
+import { Form, UIEvent } from '@devvit/protos';
+import '@reddit/faceplate-ui/components/faceplate-dialog';
+import '@reddit/faceplate/components/faceplate-form.js';
+export declare class DevvitFormDialog extends LitElement {
+    #private;
+    form: Form | undefined;
+    $dialog?: FaceplateDialog;
+    $form?: FaceplateForm;
+    static get styles(): import("lit").CSSResult[];
+    showForm(form: Form, onEvent: (event: UIEvent) => void): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=devvit-form-dialog.d.ts.map

package/client/formbuilder/devvit-form-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devvit-form-dialog.d.ts","sourceRoot":"","sources":["../../../src/client/formbuilder/devvit-form-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,kEAAkE,CAAC;AAE1E,OAAO,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AAItF,OAAO,EAAE,aAAa,EAAoB,MAAM,gDAAgD,CAAC;AAEjG,OAAO,EAAE,IAAI,EAA4C,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAKzF,OAAO,kDAAkD,CAAC;AAC1D,OAAO,gDAAgD,CAAC;AAKxD,qBACa,gBAAiB,SAAQ,UAAU;;IAE9C,IAAI,EAAE,IAAI,GAAG,SAAS,CAAC;IAGvB,OAAO,CAAC,EAAE,eAAe,CAAC;IAG1B,KAAK,CAAC,EAAE,aAAa,CAAC;IAKtB,WAAoB,MAAM,8BAEzB;IAED,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI;IA6E7C,MAAM;CA+ChB"}