@devvit/ui-renderer 0.9.1 → 0.9.3

package/client/formbuilder/devvit-form-dialog.js

@@ -0,0 +1,155 @@
+var _DevvitFormDialog_onEvent, _DevvitFormDialog_idMap, _DevvitFormDialog_makeIdMap, _DevvitFormDialog_collectValues, _DevvitFormDialog_submitClicked, _DevvitFormDialog_cancelClicked, _DevvitFormDialog_closeDialog, _DevvitFormDialog_renderTitle, _DevvitFormDialog_renderDescription, _DevvitFormDialog_renderButtons;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate, __metadata } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import { button, ButtonSize } from '@reddit/faceplate-ui/templates/button.js';
+import { FaceplateDialog } from '@reddit/faceplate-ui/components/faceplate-dialog.js';
+import { msg } from '@reddit/faceplate/lib/i18n/localize.js';
+import { FaceplateForm } from '@reddit/faceplate/components/faceplate-form.js';
+import { FormFieldType, FormFieldValue, UIEvent } from '@devvit/protos';
+import { renderFormFields } from './fields/index.js';
+import { styles } from '../../styles.js';
+import '@reddit/faceplate-ui/components/faceplate-dialog';
+import '@reddit/faceplate/components/faceplate-form.js';
+let DevvitFormDialog = class DevvitFormDialog extends LitElement {
+    constructor() {
+        super(...arguments);
+        _DevvitFormDialog_onEvent.set(this, () => { });
+        _DevvitFormDialog_idMap.set(this, {});
+        _DevvitFormDialog_makeIdMap.set(this, (fields) => fields.reduce((map, field) => {
+            if (field.fieldType === FormFieldType.GROUP) {
+                return {
+                    ...map,
+                    ...__classPrivateFieldGet(this, _DevvitFormDialog_makeIdMap, "f").call(this, field.fieldConfig?.groupConfig?.fields ?? []),
+                };
+            }
+            map[field.fieldId] = field;
+            return map;
+        }, {}));
+        _DevvitFormDialog_collectValues.set(this, () => {
+            const values = {};
+            if (!this.$form) {
+                return values;
+            }
+            for (const f of this.$form.elementsIterator()) {
+                const { name, value } = f;
+                const { fieldType } = __classPrivateFieldGet(this, _DevvitFormDialog_idMap, "f")[name];
+                const fieldValue = FormFieldValue.fromPartial({
+                    fieldType,
+                });
+                switch (fieldType) {
+                    case FormFieldType.STRING:
+                    case FormFieldType.PARAGRAPH:
+                        if (value === null || value.trim() === '') {
+                            continue;
+                        }
+                        fieldValue.stringValue = value;
+                        break;
+                    case FormFieldType.NUMBER:
+                        fieldValue.numberValue = Number(value || 0);
+                        break;
+                    case FormFieldType.BOOLEAN:
+                        fieldValue.boolValue = value === 'true' || value === 'on';
+                        break;
+                    case FormFieldType.SELECTION:
+                        if (value === null || value.trim() === '') {
+                            continue;
+                        }
+                        fieldValue.selectionValue = { values: value.split(',') };
+                        break;
+                }
+                values[name] = fieldValue;
+            }
+            return values;
+        });
+        _DevvitFormDialog_submitClicked.set(this, () => {
+            __classPrivateFieldGet(this, _DevvitFormDialog_onEvent, "f").call(this, UIEvent.fromPartial({
+                formSubmitted: {
+                    formId: this.form?.id,
+                    results: __classPrivateFieldGet(this, _DevvitFormDialog_collectValues, "f").call(this),
+                },
+            }));
+            __classPrivateFieldGet(this, _DevvitFormDialog_closeDialog, "f").call(this);
+        });
+        _DevvitFormDialog_cancelClicked.set(this, () => {
+            __classPrivateFieldGet(this, _DevvitFormDialog_closeDialog, "f").call(this);
+        });
+        _DevvitFormDialog_closeDialog.set(this, () => {
+            this.$dialog?.close();
+            this.form = undefined;
+            __classPrivateFieldSet(this, _DevvitFormDialog_idMap, {}, "f");
+        });
+        _DevvitFormDialog_renderTitle.set(this, () => html `<span class="text-32 py-sm">${this.form?.title}</span>`);
+        _DevvitFormDialog_renderDescription.set(this, () => html `<span class="pb-md">${this.form?.shortDescription}</span>`);
+        _DevvitFormDialog_renderButtons.set(this, () => html `
+    <div class="flex justify-end space-x-xs">
+      ${button({
+            appearance: 'primary',
+            size: ButtonSize.Medium,
+            children: this.form?.acceptLabel ?? msg('OK', { desc: 'Submit input for the custom action' }),
+            attributes: {
+                type: 'submit',
+                onclick: __classPrivateFieldGet(this, _DevvitFormDialog_submitClicked, "f"),
+            },
+        })}
+      ${button({
+            appearance: 'secondary',
+            size: ButtonSize.Medium,
+            children: this.form?.cancelLabel ??
+                msg('Cancel', { desc: 'Cancel custom action and dismiss dialog' }),
+            attributes: {
+                onclick: __classPrivateFieldGet(this, _DevvitFormDialog_cancelClicked, "f"),
+            },
+        })}
+    </div>
+  `);
+    }
+    static get styles() {
+        return [styles];
+    }
+    showForm(form, onEvent) {
+        if (this.$dialog) {
+            this.form = form;
+            __classPrivateFieldSet(this, _DevvitFormDialog_idMap, __classPrivateFieldGet(this, _DevvitFormDialog_makeIdMap, "f").call(this, form.fields), "f");
+            __classPrivateFieldSet(this, _DevvitFormDialog_onEvent, onEvent, "f");
+            this.$dialog.showModal();
+        }
+    }
+    render() {
+        return html `
+      <faceplate-dialog class="z-dialog w-[32rem] overflow-auto">
+        <div class="flex flex-col gap-y-sm">
+          ${when(this.form?.title, __classPrivateFieldGet(this, _DevvitFormDialog_renderTitle, "f"))}
+          ${when(this.form?.shortDescription, __classPrivateFieldGet(this, _DevvitFormDialog_renderDescription, "f"))}
+          <faceplate-form
+            @faceplate-submit="${(ev) => ev.preventDefault()}"
+            class="flex flex-col gap-y-sm"
+          >
+            ${renderFormFields(this.form?.fields ?? [])}
+            <!---->
+            ${__classPrivateFieldGet(this, _DevvitFormDialog_renderButtons, "f").call(this)}
+          </faceplate-form>
+        </div>
+      </faceplate-dialog>
+    `;
+    }
+};
+_DevvitFormDialog_onEvent = new WeakMap(), _DevvitFormDialog_idMap = new WeakMap(), _DevvitFormDialog_makeIdMap = new WeakMap(), _DevvitFormDialog_collectValues = new WeakMap(), _DevvitFormDialog_submitClicked = new WeakMap(), _DevvitFormDialog_cancelClicked = new WeakMap(), _DevvitFormDialog_closeDialog = new WeakMap(), _DevvitFormDialog_renderTitle = new WeakMap(), _DevvitFormDialog_renderDescription = new WeakMap(), _DevvitFormDialog_renderButtons = new WeakMap();
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], DevvitFormDialog.prototype, "form", void 0);
+__decorate([
+    query('faceplate-dialog', true),
+    __metadata("design:type", FaceplateDialog)
+], DevvitFormDialog.prototype, "$dialog", void 0);
+__decorate([
+    query('faceplate-form', true),
+    __metadata("design:type", FaceplateForm)
+], DevvitFormDialog.prototype, "$form", void 0);
+DevvitFormDialog = __decorate([
+    customElement('devvit-form-dialog')
+], DevvitFormDialog);
+export { DevvitFormDialog };

package/client/formbuilder/fields/index.d.ts

@@ -0,0 +1,12 @@
+export * from './renderBooleanField.js';
+export * from './renderFieldLabel.js';
+export * from './renderFormFields.js';
+export * from './renderGroupField.js';
+export * from './renderHelpText.js';
+export * from './renderListField.js';
+export * from './renderNumberField.js';
+export * from './renderParagraphField.js';
+export * from './renderSelectionField.js';
+export * from './renderStringField.js';
+export type OnInputDelegate = (event: InputEvent | CustomEvent) => void;
+//# sourceMappingURL=index.d.ts.map

package/client/formbuilder/fields/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/fields/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AAEvC,MAAM,MAAM,eAAe,GAAG,CAAC,KAAK,EAAE,UAAU,GAAG,WAAW,KAAK,IAAI,CAAC"}

package/client/formbuilder/fields/index.js

@@ -0,0 +1,10 @@
+export * from './renderBooleanField.js';
+export * from './renderFieldLabel.js';
+export * from './renderFormFields.js';
+export * from './renderGroupField.js';
+export * from './renderHelpText.js';
+export * from './renderListField.js';
+export * from './renderNumberField.js';
+export * from './renderParagraphField.js';
+export * from './renderSelectionField.js';
+export * from './renderStringField.js';

package/client/formbuilder/fields/renderBooleanField.d.ts

@@ -0,0 +1,4 @@
+import { FormField } from '@devvit/protos';
+import '@reddit/faceplate-ui/components/faceplate-switch-input.js';
+export declare const renderBooleanField: (field: FormField) => import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=renderBooleanField.d.ts.map

package/client/formbuilder/fields/renderBooleanField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderBooleanField.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/fields/renderBooleanField.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,2DAA2D,CAAC;AAEnE,eAAO,MAAM,kBAAkB,UAAW,SAAS,yCAWlD,CAAC"}

package/client/formbuilder/fields/renderBooleanField.js

@@ -0,0 +1,14 @@
+import { html } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import '@reddit/faceplate-ui/components/faceplate-switch-input.js';
+export const renderBooleanField = (field) => html `
+  <faceplate-switch-input
+    id="${field.fieldId}"
+    name="${field.fieldId}"
+    class="py-xs border-0"
+    ?required="${field.required}"
+    ?checked="${field.defaultValue?.boolValue}"
+    ?disabled="${field.disabled}"
+  >
+    ${field.label}
+  </faceplate-switch-input>
+`;

package/client/formbuilder/fields/renderFieldLabel.d.ts

@@ -0,0 +1,3 @@
+import { FormField } from '@devvit/protos';
+export declare const renderFieldLabel: (field: FormField) => import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=renderFieldLabel.d.ts.map

package/client/formbuilder/fields/renderFieldLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderFieldLabel.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/fields/renderFieldLabel.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAK3C,eAAO,MAAM,gBAAgB,UAAW,SAAS,yCAC+B,CAAC"}

package/client/formbuilder/fields/renderFieldLabel.js

@@ -0,0 +1,3 @@
+import { html } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+const isRequired = (field) => field.required === true ? html `<span class="text-danger-content">*</span>` : html ``;
+export const renderFieldLabel = (field) => html `<label for="${field.fieldId}">${field.label}${isRequired(field)}</label>`;

package/client/formbuilder/fields/renderFormFields.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import { FormField } from '@devvit/protos';
+export declare const renderFormFields: (fields: FormField[]) => TemplateResult;
+//# sourceMappingURL=renderFormFields.d.ts.map

package/client/formbuilder/fields/renderFormFields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderFormFields.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/fields/renderFormFields.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKrC,OAAO,EAAE,SAAS,EAAiB,MAAM,gBAAgB,CAAC;AAuB1D,eAAO,MAAM,gBAAgB,WAAY,SAAS,EAAE,KAAG,cAEtD,CAAC"}

package/client/formbuilder/fields/renderFormFields.js

@@ -0,0 +1,18 @@
+import { choose } from 'lit/directives/choose.js';
+import { html, repeat } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import { FormFieldType } from '@devvit/protos';
+import { renderBooleanField, renderGroupField, renderNumberField, renderParagraphField, renderSelectionField, renderStringField, } from './index.js';
+const renderFormField = (field) => html `
+  ${choose(field.fieldType, [
+    [FormFieldType.STRING, () => renderStringField(field)],
+    [FormFieldType.PARAGRAPH, () => renderParagraphField(field)],
+    [FormFieldType.NUMBER, () => renderNumberField(field)],
+    [FormFieldType.BOOLEAN, () => renderBooleanField(field)],
+    // [FormFieldType.LIST, () => renderListField(field)],
+    [FormFieldType.SELECTION, () => renderSelectionField(field)],
+    [FormFieldType.GROUP, () => renderGroupField(field)],
+])}
+`;
+export const renderFormFields = (fields) => {
+    return html `${repeat(fields, (field) => renderFormField(field))}`;
+};

package/client/formbuilder/fields/renderGroupField.d.ts

@@ -0,0 +1,3 @@
+import { FormField } from '@devvit/protos';
+export declare const renderGroupField: (field: FormField) => import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=renderGroupField.d.ts.map

package/client/formbuilder/fields/renderGroupField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderGroupField.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/fields/renderGroupField.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAK3C,eAAO,MAAM,gBAAgB,UAAW,SAAS,yCAShD,CAAC"}

package/client/formbuilder/fields/renderGroupField.js

@@ -0,0 +1,13 @@
+import { html } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import { renderFormFields } from './renderFormFields.js';
+import { renderFieldLabel } from './renderFieldLabel.js';
+export const renderGroupField = (field) => {
+    return html `
+    <div class="flex flex-col py-xs border-0 gap-y-xs">
+      ${renderFieldLabel(field)}
+      <div class="flex flex-col border border-solid border-tone-4 rounded-sm px-xs">
+        ${renderFormFields(field.fieldConfig?.groupConfig?.fields ?? [])}
+      </div>
+    </div>
+  `;
+};

package/client/formbuilder/fields/renderHelpText.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import '@reddit/faceplate-ui/components/faceplate-form-helper-text.js';
+export declare const renderHelpText: (helpText?: string | undefined) => TemplateResult;
+//# sourceMappingURL=renderHelpText.d.ts.map

package/client/formbuilder/fields/renderHelpText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderHelpText.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/fields/renderHelpText.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIrC,OAAO,+DAA+D,CAAC;AAEvE,eAAO,MAAM,cAAc,cAAe,MAAM,GAAG,SAAS,KAAG,cACiC,CAAC"}

package/client/formbuilder/fields/renderHelpText.js

@@ -0,0 +1,3 @@
+import { html } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import '@reddit/faceplate-ui/components/faceplate-form-helper-text.js';
+export const renderHelpText = (helpText) => helpText ? html `<faceplate-form-helper-text>${helpText}</faceplate-form-helper-text>` : html ``;

package/client/formbuilder/fields/renderListField.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=renderListField.d.ts.map

package/client/formbuilder/fields/renderListField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderListField.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/fields/renderListField.ts"],"names":[],"mappings":""}

package/client/formbuilder/fields/renderListField.js

@@ -0,0 +1 @@
+export {};

package/client/formbuilder/fields/renderNumberField.d.ts

@@ -0,0 +1,4 @@
+import { FormField } from '@devvit/protos';
+import '@reddit/faceplate-ui/components/faceplate-text-input.js';
+export declare const renderNumberField: (field: FormField) => import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=renderNumberField.d.ts.map

package/client/formbuilder/fields/renderNumberField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderNumberField.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/fields/renderNumberField.ts"],"names":[],"mappings":"AAEA,OAAO,EAAsB,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAI/D,OAAO,yDAAyD,CAAC;AAEjE,eAAO,MAAM,iBAAiB,UAAW,SAAS,yCAmBjD,CAAC"}

package/client/formbuilder/fields/renderNumberField.js

@@ -0,0 +1,23 @@
+import { html, ifDefined } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import { FieldConfig_Number } from '@devvit/protos';
+import '@reddit/faceplate-ui/components/faceplate-text-input.js';
+export const renderNumberField = (field) => {
+    const { min, max, step } = field.fieldConfig?.numberConfig ?? FieldConfig_Number.fromPartial({});
+    return html `
+    <faceplate-text-input
+      id="${field.fieldId}"
+      name="${field.fieldId}"
+      class="py-xs border-0"
+      type="number"
+      value="${field.defaultValue?.numberValue ?? 0}"
+      min="${ifDefined(min)}"
+      max="${ifDefined(max)}"
+      step="${ifDefined(step)}"
+      ?required="${field.required}"
+      ?disabled="${field.disabled}"
+      innerLabel
+    >
+      <span slot="label">${field.label}</span>
+    </faceplate-text-input>
+  `;
+};

package/client/formbuilder/fields/renderParagraphField.d.ts

@@ -0,0 +1,5 @@
+import { FormField } from '@devvit/protos';
+import '@reddit/faceplate-ui/components/faceplate-textarea-input.js';
+import '@reddit/faceplate-ui/components/faceplate-form-helper-text.js';
+export declare const renderParagraphField: (field: FormField) => import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=renderParagraphField.d.ts.map

package/client/formbuilder/fields/renderParagraphField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderParagraphField.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/fields/renderParagraphField.ts"],"names":[],"mappings":"AAIA,OAAO,EAAyB,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAIlE,OAAO,6DAA6D,CAAC;AACrE,OAAO,+DAA+D,CAAC;AAGvE,eAAO,MAAM,oBAAoB,UAAW,SAAS,yCAoBpD,CAAC"}

package/client/formbuilder/fields/renderParagraphField.js

@@ -0,0 +1,25 @@
+import { html, ifDefined } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import { FieldConfig_Paragraph } from '@devvit/protos';
+import '@reddit/faceplate-ui/components/faceplate-textarea-input.js';
+import '@reddit/faceplate-ui/components/faceplate-form-helper-text.js';
+import { renderHelpText } from './renderHelpText.js';
+export const renderParagraphField = (field) => {
+    const { lineHeight, maxCharacters, placeholder } = field.fieldConfig?.paragraphConfig ?? FieldConfig_Paragraph.fromPartial({});
+    return html `
+    <faceplate-textarea-input
+      id="${field.fieldId}"
+      name="${field.fieldId}"
+      class="py-xs border-0"
+      value="${ifDefined(field.defaultValue?.stringValue)}"
+      placeholder="${ifDefined(placeholder)}"
+      rows="${ifDefined(lineHeight)}"
+      maxlength="${ifDefined(maxCharacters)}"
+      ?disabled="${field.disabled}"
+      ?required="${field.required}"
+      innerLabel
+    >
+      <span slot="label">${field.label}</span>
+    </faceplate-textarea-input>
+    ${renderHelpText(field.helpText)}
+  `;
+};

package/client/formbuilder/fields/renderSelectionField.d.ts

@@ -0,0 +1,5 @@
+import { FormField } from '@devvit/protos';
+import '../components/devvit-form-selection-dropdown.js';
+import '../components/devvit-form-selection-list.js';
+export declare const renderSelectionField: (field: FormField) => import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=renderSelectionField.d.ts.map

package/client/formbuilder/fields/renderSelectionField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderSelectionField.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/fields/renderSelectionField.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,OAAO,iDAAiD,CAAC;AACzD,OAAO,6CAA6C,CAAC;AAErD,eAAO,MAAM,oBAAoB,UAAW,SAAS,yCAapD,CAAC"}

package/client/formbuilder/fields/renderSelectionField.js

@@ -0,0 +1,18 @@
+import { renderFieldLabel } from './index.js';
+import { html } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import '../components/devvit-form-selection-dropdown.js';
+import '../components/devvit-form-selection-list.js';
+export const renderSelectionField = (field) => {
+    if (field.fieldConfig?.selectionConfig?.renderAsList === true) {
+        return html `<devvit-form-selection-list
+      name="${field.fieldId}"
+      .field="${field}"
+    ></devvit-form-selection-list>`;
+    }
+    return html `${renderFieldLabel(field)}
+    <devvit-form-selection-dropdown
+      class="flex flex-row"
+      name="${field.fieldId}"
+      .field="${field}"
+    ></devvit-form-selection-dropdown>`;
+};

package/client/formbuilder/fields/renderStringField.d.ts

@@ -0,0 +1,4 @@
+import { FormField } from '@devvit/protos';
+import '@reddit/faceplate-ui/components/faceplate-text-input.js';
+export declare const renderStringField: (field: FormField) => import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=renderStringField.d.ts.map

package/client/formbuilder/fields/renderStringField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderStringField.d.ts","sourceRoot":"","sources":["../../../../src/client/formbuilder/fields/renderStringField.ts"],"names":[],"mappings":"AAEA,OAAO,EAAsB,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAI/D,OAAO,yDAAyD,CAAC;AAEjE,eAAO,MAAM,iBAAiB,UAAW,SAAS,yCAqBjD,CAAC"}

package/client/formbuilder/fields/renderStringField.js

@@ -0,0 +1,24 @@
+import { html, ifDefined } from '@reddit/faceplate-ui/templateRenderingStrategy/clientStrategy.js';
+import { FieldConfig_String } from '@devvit/protos';
+import '@reddit/faceplate-ui/components/faceplate-text-input.js';
+export const renderStringField = (field) => {
+    const { minLength, maxLength, placeholder } = field.fieldConfig?.stringConfig ?? FieldConfig_String.fromPartial({});
+    return html `
+    <faceplate-text-input
+      id="${field.fieldId}"
+      name="${field.fieldId}"
+      class="py-xs border-0"
+      type="text"
+      value="${ifDefined(field.defaultValue?.stringValue)}"
+      placeholder="${ifDefined(placeholder)}"
+      helperText="${ifDefined(field.helpText)}"
+      minlength="${ifDefined(minLength)}"
+      maxlength="${ifDefined(maxLength)}"
+      ?disabled="${field.disabled}"
+      ?required="${field.required}"
+      innerLabel
+    >
+      <span slot="label">${field.label}</span>
+    </faceplate-text-input>
+  `;
+};

package/client/formbuilder/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/client/formbuilder/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/client/formbuilder/index.ts"],"names":[],"mappings":""}

package/client/formbuilder/index.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devvit/ui-renderer",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "license": "BSD-3-Clause",
   "repository": {
     "type": "git",
@@ -29,8 +29,8 @@
   },
   "types": "./index.d.ts",
   "dependencies": {
-    "@devvit/protos": "0.9.1",
-    "@devvit/runtimes": "0.9.1",
+    "@devvit/protos": "0.9.3",
+    "@devvit/runtimes": "0.9.3",
     "@lottiefiles/lottie-player": "1.7.1",
     "p-queue": "7.3.4",
     "rxjs": "7.5.7"
@@ -55,10 +55,11 @@
     "lit": "^2.0.0"
   },
   "devDependencies": {
-    "@devvit/eslint-config": "0.9.1",
-    "@devvit/public-api": "0.9.1",
-    "@devvit/repo-tools": "0.9.1",
-    "@devvit/tsconfig": "0.9.1",
+    "@devvit/eslint-config": "0.9.3",
+    "@devvit/public-api": "0.9.3",
+    "@devvit/repo-tools": "0.9.3",
+    "@devvit/tsconfig": "0.9.3",
+    "@lit/localize": "0.11.4",
     "@reddit/baseplate": "0.14.0",
     "@reddit/eslint-plugin-i18n-shreddit": "0.1.0",
     "autoprefixer": "10.4.14",
@@ -78,5 +79,5 @@
     "directory": "dist"
   },
   "source": "./src/index.ts",
-  "gitHead": "9c3a31746cb435b9ec47f392e719b4335c8f3765"
+  "gitHead": "40b7a04ef208bc233775977a5a3a819875a153c1"
 }

package/styles.css

@@ -483,9 +483,12 @@ dialog::backdrop{background:var(--color-scrim)}
 .isolate{isolation:isolate}
 .z-\[2\]{z-index:2}
 .z-\[3\]{z-index:3}
+.z-auto{z-index:auto}
+.z-dialog{z-index:100}
 .col-start-1{grid-column-start:1}
 .row-start-1{grid-row-start:1}
 .m-0{margin:0px}
+.m-sm{margin:0.75rem}
 .mx-xs{margin-left:0.5rem;margin-right:0.5rem}
 .-ml-\[var\(--rem10\)\]{margin-left:calc(var(--rem10) * -1)}
 .-ml-\[var\(--rem12\)\]{margin-left:calc(var(--rem12) * -1)}
@@ -521,6 +524,7 @@ dialog::backdrop{background:var(--color-scrim)}
 .h-100{height:100%}
 .h-2xl{height:3rem}
 .h-2xs{height:0.25rem}
+.h-3xl{height:4rem}
 .h-\[\.25rem\]{height:.25rem}
 .h-\[\.375rem\]{height:.375rem}
 .h-\[\.625rem\]{height:.625rem}
@@ -561,6 +565,7 @@ dialog::backdrop{background:var(--color-scrim)}
 .w-\[2rem\]{width:2rem}
 .w-\[3\.25rem\]{width:3.25rem}
 .w-\[3\.5rem\]{width:3.5rem}
+.w-\[32rem\]{width:32rem}
 .w-\[3rem\]{width:3rem}
 .w-\[4\.5rem\]{width:4.5rem}
 .w-\[4rem\]{width:4rem}
@@ -613,6 +618,10 @@ dialog::backdrop{background:var(--color-scrim)}
 .gap-md{gap:1rem}
 .gap-xl{gap:2rem}
 .gap-xs{gap:0.5rem}
+.gap-y-sm{row-gap:0.75rem}
+.gap-y-xs{row-gap:0.5rem}
+.space-x-xs > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.5rem * var(--tw-space-x-reverse));margin-left:calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}
+.overflow-auto{overflow:auto}
 .overflow-hidden{overflow:hidden}
 .overflow-visible{overflow:visible}
 .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@@ -637,6 +646,7 @@ dialog::backdrop{background:var(--color-scrim)}
 .border-neutral-background{border-color:var(--color-neutral-background)}
 .border-neutral-border{border-color:var(--color-neutral-border)}
 .border-secondary-background-selected{border-color:var(--color-secondary-background-selected)}
+.border-tone-4{border-color:var(--color-tone-4)}
 .border-transparent{border-color:transparent}
 .bg-\[color\:var\(--button-color-background-default\)\]{background-color:var(--button-color-background-default)}
 .bg-\[color\:var\(--color-button-plain-background-disabled\)\]{background-color:var(--color-button-plain-background-disabled)}
@@ -683,6 +693,7 @@ dialog::backdrop{background:var(--color-scrim)}
 .py-\[length\:var\(--rem14\)\]{padding-top:var(--rem14);padding-bottom:var(--rem14)}
 .py-\[length\:var\(--rem6\)\]{padding-top:var(--rem6);padding-bottom:var(--rem6)}
 .py-\[length\:var\(--rem8\)\]{padding-top:var(--rem8);padding-bottom:var(--rem8)}
+.py-sm{padding-top:0.75rem;padding-bottom:0.75rem}
 .py-xs{padding-top:0.5rem;padding-bottom:0.5rem}
 .pb-md{padding-bottom:1rem}
 .pl-\[length\:var\(--rem10\)\]{padding-left:var(--rem10)}
@@ -708,6 +719,7 @@ dialog::backdrop{background:var(--color-scrim)}
 .text-18{font-size:1.125rem;line-height:1.5rem}
 .text-20{font-size:1.25rem;line-height:1.25rem}
 .text-24{font-size:1.5rem;line-height:1.75rem}
+.text-32{font-size:2rem;line-height:2.25rem}
 .font-bold{font-weight:700}
 .font-normal{font-weight:400}
 .font-semibold{font-weight:600}
@@ -763,6 +775,9 @@ dialog::backdrop{background:var(--color-scrim)}
   text-shadow: #fff 1px 0 2px, #fff -1px 0 2px, #fff 0 1px 1px, #fff 0 -1px 1px, #fff 1px 0 2px,
   #fff -1px 0 2px, #fff 0 1px 1px, #fff 0 -1px 1px;
 }
+.button .dropdown-icon {
+  transform: none;
+}
 .hover\:border-secondary-background-hover:hover{border-color:var(--color-secondary-background-hover)}
 .hover\:border-secondary-background-selected:hover{border-color:var(--color-secondary-background-selected)}
 .hover\:bg-brand-background-hover:hover{background-color:var(--color-brand-background-hover)}