npm - @nyaruka/temba-components - Versions diffs - 0.129.8 → 0.129.10 - Mend

@nyaruka/temba-components 0.129.8 → 0.129.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (282) hide show

package/out-tsc/src/form/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/form/Checkbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,~~WAAW~~,EAAE,MAAM,~~eAAe~~,CAAC;~~AAC5C~~,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;~~AAEhC~~,MAAM,OAAO,QAAS,SAAQ,~~WAAW~~;~~IAAzC~~;;~~QAuDE~~,SAAI,GAAG,EAAE,CAAC;QASV,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,GAAG,CAAC;QAGX,kBAAa,GAAG,OAAO,CAAC;~~IAkF1B~~,CAAC;~~IAvJC~~,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiDT~~,CAAC;IACJ,CAAC;IAoBM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC5B,CAAC;IAEM,OAAO,CAAC,OAAyB;QACtC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEvB,mCAAmC;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,kEAAkE;YAClE,IACE,IAAI,CAAC,KAAK;gBACV,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;gBAC9B,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EACxB,CAAC;gBACD,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAClB,CAAC;YACD,oEAAoE;YACpE,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;gBAC7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YACpB,CAAC;QACH,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACnD,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,CAAC;YACjD,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;YACzC,CAAC;YACD,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC;IAEM,cAAc,CAAC,KAAU;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC/B,CAAC;IACH,CAAC;IAEM,KAAK;QACV,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,KAAK,CAAC,KAAK,EAAE,CAAC;IAChB,CAAC;~~IAEM~~,~~MAAM~~;~~QACX~~,MAAM,IAAI,GAAG,IAAI,CAAA;cACP,IAAI,CAAC,OAAO;YAClB,CAAC,CAAC,IAAI,CAAC,gBAAgB;YACvB,CAAC,CAAC,IAAI,CAAC,OAAO;gBACd,CAAC,CAAC,IAAI,CAAC,gBAAgB;gBACvB,CAAC,CAAC,IAAI,CAAC,QAAQ;cACT,IAAI,CAAC,IAAI;uBACA,IAAI,CAAC,aAAa;~~OAClC~~,CAAC;~~QAEJ~~,OAAO,IAAI,CAAA~~;4BACa~~,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE~~;;iBAEpC~~,IAAI,CAAC,~~IAAI;sBACJ~~,IAAI,CAAC,QAAQ;~~oBACf~~,IAAI,CAAC,MAAM;~~wBACP~~,IAAI,CAAC,~~UAAU~~;~~wBACf~~,IAAI;~~sBACN~~,IAAI,CAAC,QAAQ~~;mBAChB~~,IAAI,CAAC,~~WAAW;;2CAEQ~~,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,~~EAAE~~;~~cAC5D~~,IAAI;~~cACJ~~,IAAI,CAAC,KAAK,IAAI,~~MAAM~~,CAAC,IAAI,CAAC,~~KAAK~~,CAAC,CAAC,IAAI,EAAE;~~YACvC~~,CAAC,CAAC,IAAI,CAAA~~,+BAA+B~~,IAAI,CAAC,~~KAAK~~,~~QAAQ~~;~~YACvD~~,CAAC,CAAC,IAAI~~;;;;KAIf~~,CAAC;IACJ,CAAC;CACF;~~AAjGC~~;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACH","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { ~~FormElement~~ } from './~~FormElement~~';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../Icons';\n\nexport class Checkbox extends ~~FormElement~~ {\n static get styles() {\n return css`\n :host {\n color: var(--color-text);\n display: inline-block;\n }\n\n :host([label]) {\n width: 100%;\n }\n\n .wrapper.label {\n padding: var(--checkbox-padding, 10px);\n border-radius: var(--curvature);\n }\n\n .wrapper.label:hover {\n background: var(--checkbox-hover-bg, #f9f9f9);\n }\n\n ~~temba~~-~~field~~ {\n ~~--help~~-~~text~~-~~margin~~-~~left~~: ~~24px~~;\n ~~cursor~~: ~~pointer~~;\n }\n\n .checkbox-container {\n ~~cursor~~: ~~pointer~~;\n ~~display~~: ~~flex~~;\n ~~user~~-~~select~~: ~~none~~;\n -~~webkit~~-~~user~~-~~select~~: ~~none~~;\n }\n\n .checkbox-label {\n font-family: var(--font-family);\n padding: 0px;\n margin~~-left~~: ~~8px~~;\n font-size: 14px;\n line-height: 19px;\n ~~flex~~-~~grow~~: 1;\n }\n\n .far {\n height: 16px;\n margin-top: 1px;\n }\n\n .disabled {\n cursor: not-allowed;\n --icon-color: #ccc;\n }\n `;\n }\n\n @property({ type: String })\n name = '';\n\n @property({ type: Boolean })\n checked: boolean;\n\n @property({ type: Boolean })\n partial: boolean;\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Number })\n size = 1.2;\n\n @property({ type: String })\n animateChange = 'pulse';\n\n public connectedCallback() {\n super.connectedCallback();\n }\n\n public updated(changes: Map<string, any>) {\n super.updated(changes);\n\n // Normalize label property changes\n if (changes.has('label')) {\n // Normalize whitespace labels to empty string for proper behavior\n if (\n this.label &&\n typeof this.label === 'string' &&\n this.label.trim() === ''\n ) {\n this.label = '';\n }\n // Ensure undefined labels remain as null to match test expectations\n if (this.label === undefined) {\n this.label = null;\n }\n }\n\n if (changes.has('checked') \|\| changes.has('value')) {\n if (this.checked \|\| this.partial) {\n this.internals.setFormValue(this.value \|\| '1');\n } else {\n this.internals.setFormValue(undefined);\n }\n this.fireEvent('change');\n }\n }\n\n public serializeValue(value: any): string {\n return value;\n }\n\n private handleClick(): void {\n if (!this.disabled) {\n this.checked = !this.checked;\n }\n }\n\n public click(): void {\n this.handleClick();\n super.click();\n }\n\n ~~public~~ ~~render~~(): TemplateResult {\n const icon = html`<temba-icon\n name=\"${this.checked\n ? Icon.checkbox_checked\n : this.partial\n ? Icon.checkbox_partial\n : Icon.checkbox}\"\n size=\"${this.size}\"\n animatechange=\"${this.animateChange}\"\n ~~/>`;\~~n\n return html`\n <div class=\"wrapper ${this.label ? 'label' : ''}\">\n <temba-field\n name=${this.name}\n .helpText=${this.helpText}\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n .helpAlways=${true}\n ?disabled=${this.disabled}\n @click=${this.handleClick}\n >\n <div class=\"checkbox-container ${this.disabled ? 'disabled' : ''}\">\n ${icon}\n ${this.label && String(this.label).trim()\n ? html`<div class=\"checkbox-label\">${this.label}</div>`\n : null}\n </div>\n </~~temba~~-field>\n </div>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/form/Checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FieldElement } from './FieldElement';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../Icons';\nimport { renderMarkdownInline } from '../markdown';\n\nexport class Checkbox extends FieldElement {\n static get styles() {\n return css`\n ${super.styles}\n\n :host {\n color: var(--color-text);\n display: inline-block;\n }\n\n :host([label]) {\n width: 100%;\n }\n\n .wrapper.label {\n padding: var(--checkbox-padding, 10px);\n border-radius: var(--curvature);\n }\n\n .wrapper.label:hover {\n background: var(--checkbox-hover-bg, #f9f9f9);\n }\n\n .checkbox-container {\n cursor: pointer;\n display: flex;\n align-items: flex-start;\n user-select: none;\n -webkit-user-select: none;\n }\n\n .checkbox-container temba-icon {\n align-self: flex-start;\n vertical-align: top;\n line-height: 1;\n }\n\n .label-and-help {\n flex-grow: 1;\n margin-left: 8px;\n }\n\n .checkbox-label {\n font-family: var(--font-family);\n padding: 0px;\n margin: 0px;\n font-size: 14px;\n line-height: 19px;\n }\n\n .checkbox-help-text {\n font-family: var(--font-family);\n font-size: var(--help-text-size, 0.85em);\n line-height: normal;\n color: var(--color-text-help);\n margin-top: 4px;\n opacity: 1;\n }\n\n /* Checkbox help text should align with the checkbox icon, not indented */\n .help-text {\n margin-left: 0;\n }\n\n .far {\n height: 16px;\n margin-top: 1px;\n }\n\n .disabled {\n cursor: not-allowed;\n --icon-color: #ccc;\n }\n `;\n }\n\n @property({ type: String })\n name = '';\n\n @property({ type: Boolean })\n checked: boolean;\n\n @property({ type: Boolean })\n partial: boolean;\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Number })\n size = 1.2;\n\n @property({ type: String })\n animateChange = 'pulse';\n\n public connectedCallback() {\n super.connectedCallback();\n }\n\n public updated(changes: Map<string, any>) {\n super.updated(changes);\n\n // Normalize label property changes\n if (changes.has('label')) {\n // Normalize whitespace labels to empty string for proper behavior\n if (\n this.label &&\n typeof this.label === 'string' &&\n this.label.trim() === ''\n ) {\n this.label = '';\n }\n // Ensure undefined labels remain as null to match test expectations\n if (this.label === undefined) {\n this.label = null;\n }\n }\n\n if (changes.has('checked') \|\| changes.has('value')) {\n if (this.checked \|\| this.partial) {\n this.internals.setFormValue(this.value \|\| '1');\n } else {\n this.internals.setFormValue(undefined);\n }\n this.fireEvent('change');\n }\n }\n\n public serializeValue(value: any): string {\n return value;\n }\n\n private handleClick(): void {\n if (!this.disabled) {\n this.checked = !this.checked;\n }\n }\n\n public click(): void {\n this.handleClick();\n super.click();\n }\n\n protected renderWidget(): TemplateResult {\n const icon = html`<temba-icon\n name=\"${this.checked\n ? Icon.checkbox_checked\n : this.partial\n ? Icon.checkbox_partial\n : Icon.checkbox}\"\n size=\"${this.size}\"\n animatechange=\"${this.animateChange}\"\n ></temba-icon>`;\n\n return html`\n <div\n class=\"wrapper ${this.label ? 'label' : ''}\"\n @click=${this.handleClick}\n >\n <div class=\"checkbox-container ${this.disabled ? 'disabled' : ''}\">\n ${icon}\n <div class=\"label-and-help\">\n ${this.label && String(this.label).trim()\n ? html`<div class=\"checkbox-label\">${this.label}</div>`\n : null}\n ${this.helpText && this.helpText !== 'None'\n ? html` <div class=\"checkbox-help-text\">${this.helpText}</div> `\n : null}\n </div>\n </div>\n </div>\n `;\n }\n\n protected renderField(): TemplateResult {\n // Use standard FieldElement behavior but skip the field label since checkbox renders its own inline\n const hasErrors = !this.hideErrors && this.errors && this.errors.length > 0;\n const errors = hasErrors\n ? this.errors.map((error: string) => {\n return html`\n <div class=\"alert-error\">${renderMarkdownInline(error)}</div>\n `;\n })\n : [];\n\n if (this.widgetOnly) {\n return html`\n <div class=\"${this.disabled ? 'disabled' : ''}\">\n ${this.renderWidget()}\n </div>\n ${errors}\n `;\n }\n\n // This matches FieldElement.renderField() but without the field label\n return html`\n <div\n class=\"field ${this.disabled ? 'disabled' : ''} ${hasErrors\n ? 'has-error'\n : ''}\"\n >\n <div class=\"widget\">${this.renderWidget()} ${errors}</div>\n </div>\n `;\n }\n\n public render(): TemplateResult {\n return this.renderField();\n }\n}\n"]}

package/out-tsc/src/form/ColorPicker.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
 import { html, css } from 'lit';
-import { FormElement } from './FormElement';
+import { FieldElement } from './FieldElement';
 import { property } from 'lit/decorators.js';
 import { getClasses, hslToHex } from '../utils';
-export class ColorPicker extends FormElement {
+export class ColorPicker extends FieldElement {
     constructor() {
         super(...arguments);
         this.expanded = false;
@@ -16,6 +16,8 @@ export class ColorPicker extends FormElement {
     }
     static get styles() {
         return css `
+      ${super.styles}
       :host {
         color: var(--color-text);
         display: inline-block;
@@ -30,11 +32,6 @@ export class ColorPicker extends FormElement {
         width: 5em;
       }
-      temba-field {
-        display: block;
-        width: 100%;
-      }
       .wrapper {
         border: 1px solid var(--color-widget-border);
         padding: calc(var(--curvature) / 2);
@@ -197,46 +194,37 @@ export class ColorPicker extends FormElement {
     serializeValue(value) {
         return value;
     }
-    render() {
+    renderWidget() {
         return html `
-      <temba-field
-        name=${this.name}
-        .helpText=${this.helpText}
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
-        .hideLabel=${this.hideLabel}
-        .disabled=${this.disabled}
-      >
-        <div style="display:flex" tabindex="0">
-          <div class=${getClasses({ wrapper: true, expanded: this.expanded })}>
-            <div class=${getClasses({ 'picker-wrapper': true })}>
-              <div
-                class=${getClasses({
+      <div style="display:flex" tabindex="0">
+        <div class=${getClasses({ wrapper: true, expanded: this.expanded })}>
+          <div class=${getClasses({ 'picker-wrapper': true })}>
+            <div
+              class=${getClasses({
             preview: true,
             selecting: this.selecting
         })}
-                style="color:${this.labelColor};background:${this.previewColor}"
-                @click=${this.handlePreviewClick}
-              >
-                ${this.label}
-              </div>
-              <div
-                class="color-picker"
-                tabindex="0"
-                @blur=${this.handleBlur}
-                @mousemove=${this.handleMouseMove}
-                @mouseout=${this.handleMouseOut}
-                @click=${this.handleColorClick}
-              ></div>
+              style="color:${this.labelColor};background:${this.previewColor}"
+              @click=${this.handlePreviewClick}
+            >
+              ${this.label}
             </div>
-            <temba-textinput
-              value=${this.hex}
-              @input=${this.handleHexInput}
-              placeholder="#000000"
-            ></temba-textinput>
+            <div
+              class="color-picker"
+              tabindex="0"
+              @blur=${this.handleBlur}
+              @mousemove=${this.handleMouseMove}
+              @mouseout=${this.handleMouseOut}
+              @click=${this.handleColorClick}
+            ></div>
           </div>
+          <temba-textinput
+            value=${this.hex}
+            @input=${this.handleHexInput}
+            placeholder="#000000"
+          ></temba-textinput>
         </div>
-      </temba-field>
+      </div>
     `;
     }
 }

package/out-tsc/src/form/ColorPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/form/ColorPicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, PropertyValueMap } from 'lit';\nimport { FormElement } from './FormElement';\nimport { property } from 'lit/decorators.js';\nimport { getClasses, hslToHex } from '../utils';\nimport { TextInput } from './TextInput';\n\nexport class ColorPicker extends FormElement {\n @property({ type: Boolean })\n expanded = false;\n\n @property({ type: String })\n previewColor = '#ffffff';\n\n @property({ type: String })\n labelColor = '#ffffffee';\n\n @property({ type: Boolean })\n selecting = false;\n\n @property({ type: Number }) hue: number;\n @property({ type: Number }) saturation = 100;\n @property({ type: Number }) lightness = 50;\n @property({ type: String }) hex = '';\n\n static get styles() {\n return css`\n :host {\n color: var(--color-text);\n display: inline-block;\n --curvature: 0.55em;\n width: 100%;\n\n --temba-textinput-padding: 0.4em;\n }\n\n temba-textinput {\n margin-left: 0.3em;\n width: 5em;\n }\n\n temba-field {\n display: block;\n width: 100%;\n }\n\n .wrapper {\n border: 1px solid var(--color-widget-border);\n padding: calc(var(--curvature) / 2);\n border-radius: calc(var(--curvature) * 1.5);\n transition: all calc(var(--transition-speed) * 2) var(--bounce);\n\n display: flex;\n flex-grow: 0;\n }\n\n .picker-wrapper {\n display: flex;\n flex-direction: row;\n align-items: stretch;\n transition: all calc(var(--transition-speed) * 2) var(--bounce);\n flex-grow: 0;\n }\n\n .preview {\n width: initial;\n border-radius: var(--curvature);\n padding: 0.2em 0.5em;\n font-weight: 400;\n border: 2px solid rgba(0, 0, 0, 0.1);\n white-space: nowrap;\n cursor: pointer;\n transition: transform calc(var(--transition-speed) * 0.5) var(--bounce);\n }\n\n .preview.selecting {\n transform: scale(1.05);\n }\n\n .wrapper.expanded {\n flex-grow: 1 !important;\n }\n\n .wrapper.expanded .picker-wrapper {\n flex-grow: 1 !important;\n }\n\n .wrapper.expanded .preview {\n pointer-events: none;\n }\n\n .wrapper.expanded .color-picker {\n margin-left: calc(var(--curvature) / 2);\n }\n\n .wrapper.expanded temba-textinput {\n display: block;\n }\n\n .color-picker {\n border-radius: var(--curvature);\n cursor: pointer;\n transition: all calc(var(--transition-speed) * 2) var(--bounce);\n flex-grow: 1;\n position: relative;\n width: 100%;\n height: 100%;\n background-image: linear-gradient(\n to bottom,\n rgba(0, 0, 0, 0) 60%,\n rgba(0, 0, 0, 0.5) 90%,\n rgba(0, 0, 0, 1)\n ),\n linear-gradient(\n to top,\n rgba(255, 255, 255, 0) 60%,\n rgba(255, 255, 255, 0.8) 90%,\n rgba(255, 255, 255, 1)\n ),\n linear-gradient(\n to right,\n hsla(0, 100%, 50%, 1),\n hsla(60, 100%, 50%, 1),\n hsla(120, 100%, 50%, 1),\n hsla(180, 100%, 50%, 1),\n hsla(240, 100%, 50%, 1),\n hsla(300, 100%, 50%, 1),\n hsla(360, 100%, 50%, 1)\n );\n mix-blend-mode: multiply;\n }\n\n .color-picker:focus {\n outline: none;\n }\n `;\n }\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>\n ): void {\n super.firstUpdated(_changedProperties);\n }\n\n public updated(changed: Map<string, any>): void {\n super.updated(changed);\n\n if (changed.has('value')) {\n this.previewColor = this.value \|\| '#9c9c9c';\n this.hex = this.value;\n }\n\n if (changed.has('selecting')) {\n if (this.selecting) {\n window.setTimeout(() => {\n this.selecting = false;\n }, 100);\n }\n }\n\n if (changed.has('previewLabel') && this.hue) {\n this.hex = hslToHex(this.hue, this.saturation, this.lightness);\n }\n }\n\n private handleBlur() {\n if (this.expanded) {\n this.expanded = false;\n }\n }\n\n private handleMouseOut() {\n this.previewColor = this.value;\n this.hex = this.value;\n }\n\n private handleMouseMove(event: MouseEvent) {\n if (this.expanded) {\n const rect = (event.target as HTMLElement).getBoundingClientRect();\n const x = event.clientX - rect.left;\n const y = event.clientY - rect.top;\n this.hue = (x / rect.width) * 360;\n this.lightness = 100 - (y / rect.height) * 100;\n this.previewColor = `hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`;\n this.hex = hslToHex(this.hue, this.saturation, this.lightness);\n }\n }\n\n private handlePreviewClick() {\n this.expanded = !this.expanded;\n this.selecting = true;\n (this.shadowRoot.querySelector('.color-picker') as HTMLDivElement).focus();\n }\n\n private handleColorClick(event: MouseEvent) {\n if (this.expanded) {\n const rect = (event.target as HTMLElement).getBoundingClientRect();\n const x = event.clientX - rect.left;\n const y = event.clientY - rect.top;\n this.hue = (x / rect.width) * 360;\n this.lightness = 100 - (y / rect.height) * 100;\n this.previewColor = `hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`;\n this.value = this.hex;\n this.selecting = true;\n this.expanded = false;\n }\n\n if (!this.expanded) {\n //\n }\n }\n\n private handleHexInput(event: InputEvent) {\n const hex = (event.target as TextInput).value;\n if (hex.startsWith('#')) {\n this.previewColor = hex;\n this.value = hex;\n }\n }\n\n public serializeValue(value: any): string {\n return value;\n }\n\n public render() {\n return html`\n <temba-field\n name=${this.name}\n .helpText=${this.helpText}\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n .hideLabel=${this.hideLabel}\n .disabled=${this.disabled}\n >\n <div style=\"display:flex\" tabindex=\"0\">\n <div class=${getClasses({ wrapper: true, expanded: this.expanded })}>\n <div class=${getClasses({ 'picker-wrapper': true })}>\n <div\n class=${getClasses({\n preview: true,\n selecting: this.selecting\n })}\n style=\"color:${this.labelColor};background:${this.previewColor}\"\n @click=${this.handlePreviewClick}\n >\n ${this.label}\n </div>\n <div\n class=\"color-picker\"\n tabindex=\"0\"\n @blur=${this.handleBlur}\n @mousemove=${this.handleMouseMove}\n @mouseout=${this.handleMouseOut}\n @click=${this.handleColorClick}\n ></div>\n </div>\n <temba-textinput\n value=${this.hex}\n @input=${this.handleHexInput}\n placeholder=\"#000000\"\n ></temba-textinput>\n </div>\n </div>\n </temba-field>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/form/ColorPicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, PropertyValueMap } from 'lit';\nimport { FieldElement } from './FieldElement';\nimport { property } from 'lit/decorators.js';\nimport { getClasses, hslToHex } from '../utils';\nimport { TextInput } from './TextInput';\n\nexport class ColorPicker extends FieldElement {\n @property({ type: Boolean })\n expanded = false;\n\n @property({ type: String })\n previewColor = '#ffffff';\n\n @property({ type: String })\n labelColor = '#ffffffee';\n\n @property({ type: Boolean })\n selecting = false;\n\n @property({ type: Number }) hue: number;\n @property({ type: Number }) saturation = 100;\n @property({ type: Number }) lightness = 50;\n @property({ type: String }) hex = '';\n\n static get styles() {\n return css`\n ${super.styles}\n\n :host {\n color: var(--color-text);\n display: inline-block;\n --curvature: 0.55em;\n width: 100%;\n\n --temba-textinput-padding: 0.4em;\n }\n\n temba-textinput {\n margin-left: 0.3em;\n width: 5em;\n }\n\n .wrapper {\n border: 1px solid var(--color-widget-border);\n padding: calc(var(--curvature) / 2);\n border-radius: calc(var(--curvature) * 1.5);\n transition: all calc(var(--transition-speed) * 2) var(--bounce);\n\n display: flex;\n flex-grow: 0;\n }\n\n .picker-wrapper {\n display: flex;\n flex-direction: row;\n align-items: stretch;\n transition: all calc(var(--transition-speed) * 2) var(--bounce);\n flex-grow: 0;\n }\n\n .preview {\n width: initial;\n border-radius: var(--curvature);\n padding: 0.2em 0.5em;\n font-weight: 400;\n border: 2px solid rgba(0, 0, 0, 0.1);\n white-space: nowrap;\n cursor: pointer;\n transition: transform calc(var(--transition-speed) * 0.5) var(--bounce);\n }\n\n .preview.selecting {\n transform: scale(1.05);\n }\n\n .wrapper.expanded {\n flex-grow: 1 !important;\n }\n\n .wrapper.expanded .picker-wrapper {\n flex-grow: 1 !important;\n }\n\n .wrapper.expanded .preview {\n pointer-events: none;\n }\n\n .wrapper.expanded .color-picker {\n margin-left: calc(var(--curvature) / 2);\n }\n\n .wrapper.expanded temba-textinput {\n display: block;\n }\n\n .color-picker {\n border-radius: var(--curvature);\n cursor: pointer;\n transition: all calc(var(--transition-speed) * 2) var(--bounce);\n flex-grow: 1;\n position: relative;\n width: 100%;\n height: 100%;\n background-image: linear-gradient(\n to bottom,\n rgba(0, 0, 0, 0) 60%,\n rgba(0, 0, 0, 0.5) 90%,\n rgba(0, 0, 0, 1)\n ),\n linear-gradient(\n to top,\n rgba(255, 255, 255, 0) 60%,\n rgba(255, 255, 255, 0.8) 90%,\n rgba(255, 255, 255, 1)\n ),\n linear-gradient(\n to right,\n hsla(0, 100%, 50%, 1),\n hsla(60, 100%, 50%, 1),\n hsla(120, 100%, 50%, 1),\n hsla(180, 100%, 50%, 1),\n hsla(240, 100%, 50%, 1),\n hsla(300, 100%, 50%, 1),\n hsla(360, 100%, 50%, 1)\n );\n mix-blend-mode: multiply;\n }\n\n .color-picker:focus {\n outline: none;\n }\n `;\n }\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>\n ): void {\n super.firstUpdated(_changedProperties);\n }\n\n public updated(changed: Map<string, any>): void {\n super.updated(changed);\n\n if (changed.has('value')) {\n this.previewColor = this.value \|\| '#9c9c9c';\n this.hex = this.value;\n }\n\n if (changed.has('selecting')) {\n if (this.selecting) {\n window.setTimeout(() => {\n this.selecting = false;\n }, 100);\n }\n }\n\n if (changed.has('previewLabel') && this.hue) {\n this.hex = hslToHex(this.hue, this.saturation, this.lightness);\n }\n }\n\n private handleBlur() {\n if (this.expanded) {\n this.expanded = false;\n }\n }\n\n private handleMouseOut() {\n this.previewColor = this.value;\n this.hex = this.value;\n }\n\n private handleMouseMove(event: MouseEvent) {\n if (this.expanded) {\n const rect = (event.target as HTMLElement).getBoundingClientRect();\n const x = event.clientX - rect.left;\n const y = event.clientY - rect.top;\n this.hue = (x / rect.width) * 360;\n this.lightness = 100 - (y / rect.height) * 100;\n this.previewColor = `hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`;\n this.hex = hslToHex(this.hue, this.saturation, this.lightness);\n }\n }\n\n private handlePreviewClick() {\n this.expanded = !this.expanded;\n this.selecting = true;\n (this.shadowRoot.querySelector('.color-picker') as HTMLDivElement).focus();\n }\n\n private handleColorClick(event: MouseEvent) {\n if (this.expanded) {\n const rect = (event.target as HTMLElement).getBoundingClientRect();\n const x = event.clientX - rect.left;\n const y = event.clientY - rect.top;\n this.hue = (x / rect.width) * 360;\n this.lightness = 100 - (y / rect.height) * 100;\n this.previewColor = `hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`;\n this.value = this.hex;\n this.selecting = true;\n this.expanded = false;\n }\n\n if (!this.expanded) {\n //\n }\n }\n\n private handleHexInput(event: InputEvent) {\n const hex = (event.target as TextInput).value;\n if (hex.startsWith('#')) {\n this.previewColor = hex;\n this.value = hex;\n }\n }\n\n public serializeValue(value: any): string {\n return value;\n }\n\n protected renderWidget() {\n return html`\n <div style=\"display:flex\" tabindex=\"0\">\n <div class=${getClasses({ wrapper: true, expanded: this.expanded })}>\n <div class=${getClasses({ 'picker-wrapper': true })}>\n <div\n class=${getClasses({\n preview: true,\n selecting: this.selecting\n })}\n style=\"color:${this.labelColor};background:${this.previewColor}\"\n @click=${this.handlePreviewClick}\n >\n ${this.label}\n </div>\n <div\n class=\"color-picker\"\n tabindex=\"0\"\n @blur=${this.handleBlur}\n @mousemove=${this.handleMouseMove}\n @mouseout=${this.handleMouseOut}\n @click=${this.handleColorClick}\n ></div>\n </div>\n <temba-textinput\n value=${this.hex}\n @input=${this.handleHexInput}\n placeholder=\"#000000\"\n ></temba-textinput>\n </div>\n </div>\n `;\n }\n}\n"]}

package/out-tsc/src/form/Completion.js CHANGED Viewed

@@ -3,13 +3,13 @@ import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { renderCompletionOption, updateInputElementWithCompletion, executeCompletionQuery } from '../excellent/helpers';
-import { FormElement } from './FormElement';
+import { FieldElement } from './FieldElement';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { msg } from '@lit/localize';
 /**
  * Completion is a text input that handles excellent completion options in a popup
  */
-export class Completion extends FormElement {
+export class Completion extends FieldElement {
     constructor() {
         super(...arguments);
         this.submitOnEnter = false;
@@ -17,11 +17,11 @@ export class Completion extends FormElement {
         this.placeholder = '';
         this.options = [];
         this.name = '';
-        this.value = '';
         this.autogrow = false;
     }
     static get styles() {
         return css `
+      ${super.styles}
       :host {
         display: block;
       }
@@ -72,7 +72,6 @@ export class Completion extends FormElement {
       }
       code {
-        background: rgba(0, 0, 0, 0.1);
         padding: 1px 5px;
         border-radius: var(--curvature);
       }
@@ -177,7 +176,7 @@ export class Completion extends FormElement {
             input.focus();
         }
     }
-    render() {
+    renderWidget() {
         const anchorStyles = this.anchorPosition
             ? {
                 top: `${this.anchorPosition.top}px`,
@@ -186,57 +185,52 @@ export class Completion extends FormElement {
             : {};
         const visible = this.options && this.options.length > 0;
         return html `
-      <temba-field
-        name=${this.name}
-        .label=${this.label}
-        .helpText=${this.helpText}
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
-      >
-        <div class="comp-container">
-          <div id="anchor" style=${styleMap(anchorStyles)}></div>
-          <temba-textinput
-            name=${this.name}
-            placeholder=${this.placeholder}
-            gsm=${this.gsm}
-            counter=${ifDefined(this.counter)}
-            @keyup=${this.handleKeyUp}
-            @click=${this.handleClick}
-            @input=${this.handleInput}
-            @blur=${this.handleOptionCanceled}
-            maxlength="${ifDefined(this.maxLength)}"
-            .value=${this.value}
-            ?autogrow=${this.autogrow}
-            ?textarea=${this.textarea}
-            ?submitOnEnter=${this.submitOnEnter}
-            style=${this.minHeight
+      <div class="comp-container">
+        <div id="anchor" style=${styleMap(anchorStyles)}></div>
+        <temba-textinput
+          name=${this.name}
+          placeholder=${this.placeholder}
+          gsm=${this.gsm}
+          counter=${ifDefined(this.counter)}
+          @keyup=${this.handleKeyUp}
+          @click=${this.handleClick}
+          @input=${this.handleInput}
+          @blur=${this.handleOptionCanceled}
+          maxlength="${ifDefined(this.maxLength)}"
+          .value=${this.value}
+          ?autogrow=${this.autogrow}
+          ?textarea=${this.textarea}
+          ?submitOnEnter=${this.submitOnEnter}
+          style=${this.minHeight
             ? `--textarea-min-height: ${this.minHeight}px`
             : ''}
-          >
-          </temba-textinput>
-          <temba-options
-            @temba-selection=${this.handleOptionSelection}
-            @temba-canceled=${this.handleOptionCanceled}
-            .renderOption=${renderCompletionOption}
-            .anchorTo=${this.anchorElement}
-            .options=${this.options}
-            ?visible=${visible}
-          >
-            ${this.currentFunction
+        >
+        </temba-textinput>
+        <temba-options
+          @temba-selection=${this.handleOptionSelection}
+          @temba-canceled=${this.handleOptionCanceled}
+          .renderOption=${renderCompletionOption}
+          .anchorTo=${this.anchorElement}
+          .options=${this.options}
+          ?visible=${visible}
+        >
+          ${this.currentFunction
             ? html `
-                  <div class="current-fn">
-                    ${renderCompletionOption(this.currentFunction, true)}
-                  </div>
-                `
+                <div class="current-fn">
+                  ${renderCompletionOption(this.currentFunction, true)}
+                </div>
+              `
             : null}
-            <div class="footer" style="${!visible ? 'display:none' : null}">
-              ${msg('Tab to complete, enter to select')}
-            </div>
-          </temba-options>
-        </div>
-      </temba-field>
+          <div class="footer" style="${!visible ? 'display:none' : null}">
+            ${msg('Tab to complete, enter to select')}
+          </div>
+        </temba-options>
+      </div>
     `;
     }
+    render() {
+        return this.renderField();
+    }
 }
 __decorate([
     property({ type: Number })
@@ -268,9 +262,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Completion.prototype, "name", void 0);
-__decorate([
-    property({ type: String })
-], Completion.prototype, "value", void 0);
 __decorate([
     property({ type: Boolean })
 ], Completion.prototype, "textarea", void 0);

package/out-tsc/src/form/Completion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Completion.js","sourceRoot":"","sources":["../../../src/form/Completion.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { TextInput } from './TextInput';\nimport {\n renderCompletionOption,\n updateInputElementWithCompletion,\n executeCompletionQuery\n} from '../excellent/helpers';\n\nimport { FormElement } from './FormElement';\nimport { CompletionOption, Position } from '../interfaces';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { msg } from '@lit/localize';\n\n/*\n Completion is a text input that handles excellent completion options in a popup\n /\nexport class Completion extends FormElement {\n static get styles() {\n return css`\n :host {\n display: block;\n }\n\n temba-options {\n --widget-box-shadow-focused: 0 0 4px rgba(0, 0, 0, 0.15);\n --color-focus: #e6e6e6;\n }\n\n .comp-container {\n position: relative;\n height: 100%;\n }\n\n #anchor {\n / background: rgba(132, 40, 158, .1); */\n position: absolute;\n visibility: hidden;\n width: 250px;\n height: 20px;\n }\n\n .fn-marker {\n font-weight: bold;\n font-size: 42px;\n }\n\n .option-slot {\n background: #fff;\n }\n\n .current-fn {\n padding: 10px;\n margin: 5px;\n background: var(--color-primary-light);\n color: rgba(0, 0, 0, 0.5);\n border-radius: var(--curvature-widget);\n font-size: 90%;\n }\n\n .footer {\n padding: 5px 10px;\n background: var(--color-primary-light);\n color: rgba(0, 0, 0, 0.5);\n font-size: 80%;\n border-bottom-left-radius: var(--curvature-widget);\n border-bottom-right-radius: var(--curvature-widget);\n }\n\n code {\n background: rgba(0, 0, 0, 0.1);\n padding: 1px 5px;\n border-radius: var(--curvature);\n }\n `;\n }\n\n @property({ type: Number })\n maxLength: number;\n\n @property({ type: Boolean })\n session: boolean;\n\n @property({ type: Boolean })\n submitOnEnter = false;\n\n @property({ type: Object })\n anchorPosition: Position = { left: 0, top: 0 };\n\n @property({ attribute: false })\n currentFunction: CompletionOption;\n\n @property({ type: String })\n placeholder = '';\n\n @property({ attribute: false })\n textInputElement: TextInput;\n\n @property({ attribute: false })\n anchorElement: HTMLDivElement;\n\n @property({ type: Array })\n options: any[] = [];\n\n @property({ type: String })\n name = '';\n\n @property({ type: String })\n value = '';\n\n @property({ type: Boolean })\n textarea: boolean;\n\n @property({ type: Boolean })\n gsm: boolean;\n\n @property({ type: Boolean })\n disableCompletion: boolean;\n\n @property({ type: String })\n counter: string;\n\n @property({ type: Boolean })\n autogrow = false;\n\n @property({ type: Number })\n minHeight: number;\n\n private hiddenElement: HTMLInputElement;\n private query: string;\n\n public firstUpdated() {\n this.textInputElement = this.shadowRoot.querySelector(\n 'temba-textinput'\n ) as TextInput;\n this.anchorElement = this.shadowRoot.querySelector('#anchor');\n\n // create our hidden container so it gets included in our host element's form\n this.hiddenElement = document.createElement('input');\n this.hiddenElement.setAttribute('type', 'hidden');\n this.hiddenElement.setAttribute('name', this.getAttribute('name'));\n this.hiddenElement.setAttribute('value', this.getAttribute('value') \|\| '');\n this.appendChild(this.hiddenElement);\n }\n\n private handleKeyUp(evt: KeyboardEvent) {\n if (this.disableCompletion) {\n // if we have options, ignore keys that are meant for them\n if (this.options && this.options.length > 0) {\n if (evt.key === 'ArrowUp' \|\| evt.key === 'ArrowDown') {\n return;\n }\n\n if (evt.ctrlKey) {\n if (evt.key === 'n' \|\| evt.key === 'p') {\n return;\n }\n }\n\n if (\n evt.key === 'Enter' \|\|\n evt.key === 'Escape' \|\|\n evt.key === 'Tab' \|\|\n evt.key.startsWith('Control')\n ) {\n evt.stopPropagation();\n evt.preventDefault();\n return;\n }\n\n this.executeQuery(evt.currentTarget as TextInput);\n }\n }\n }\n\n public hasVisibleOptions() {\n return this.options.length > 0;\n }\n\n private executeQuery(ele: TextInput) {\n if (this.disableCompletion) {\n return;\n }\n\n if (!ele.inputElement) {\n return;\n }\n\n const result = executeCompletionQuery(ele.inputElement, this.session);\n\n this.query = result.query;\n this.options = result.options;\n this.anchorPosition = result.anchorPosition;\n }\n\n private handleClick(evt: MouseEvent) {\n this.executeQuery(evt.currentTarget as TextInput);\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n\n // if our cursor changed, lets make sure our scrollbox is showing it\n if (changedProperties.has('value')) {\n this.hiddenElement.setAttribute('value', this.value);\n }\n }\n\n private handleInput(evt: KeyboardEvent) {\n const ele = evt.currentTarget as TextInput;\n this.executeQuery(ele);\n this.value = ele.inputElement.value;\n this.fireEvent('change');\n }\n\n private handleOptionCanceled() {\n // delay in case we are actively selecting\n window.setTimeout(() => {\n this.options = [];\n this.query = '';\n }, 100);\n }\n\n private handleOptionSelection(evt: CustomEvent) {\n const option = evt.detail.selected as CompletionOption;\n const tabbed = evt.detail.tabbed;\n\n updateInputElementWithCompletion(\n this.query,\n this.textInputElement.inputElement,\n option\n );\n this.query = '';\n this.options = [];\n\n if (tabbed) {\n this.executeQuery(this.textInputElement);\n }\n }\n\n public getTextInput(): TextInput {\n return this.textInputElement;\n }\n\n public click() {\n super.click();\n const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n if (input) {\n input.click();\n }\n }\n\n public focus() {\n super.focus();\n const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n if (input) {\n input.focus();\n }\n }\n\n public render(): TemplateResult {\n const anchorStyles = this.anchorPosition\n ? {\n top: `${this.anchorPosition.top}px`,\n left: `${this.anchorPosition.left}px`\n }\n : {};\n\n const visible = this.options && this.options.length > 0;\n\n return html`\n <temba-field\n name=${this.name}\n .label=${this.label}\n .helpText=${this.helpText}\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n >\n <div class=\"comp-container\">\n <div id=\"anchor\" style=${styleMap(anchorStyles)}></div>\n <temba-textinput\n name=${this.name}\n placeholder=${this.placeholder}\n gsm=${this.gsm}\n counter=${ifDefined(this.counter)}\n @keyup=${this.handleKeyUp}\n @click=${this.handleClick}\n @input=${this.handleInput}\n @blur=${this.handleOptionCanceled}\n maxlength=\"${ifDefined(this.maxLength)}\"\n .value=${this.value}\n ?autogrow=${this.autogrow}\n ?textarea=${this.textarea}\n ?submitOnEnter=${this.submitOnEnter}\n style=${this.minHeight\n ? `--textarea-min-height: ${this.minHeight}px`\n : ''}\n >\n </temba-textinput>\n <temba-options\n @temba-selection=${this.handleOptionSelection}\n @temba-canceled=${this.handleOptionCanceled}\n .renderOption=${renderCompletionOption}\n .anchorTo=${this.anchorElement}\n .options=${this.options}\n ?visible=${visible}\n >\n ${this.currentFunction\n ? html`\n <div class=\"current-fn\">\n ${renderCompletionOption(this.currentFunction, true)}\n </div>\n `\n : null}\n <div class=\"footer\" style=\"${!visible ? 'display:none' : null}\">\n ${msg('Tab to complete, enter to select')}\n </div>\n </temba-options>\n </div>\n </temba-field>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"Completion.js","sourceRoot":"","sources":["../../../src/form/Completion.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { TextInput } from './TextInput';\nimport {\n renderCompletionOption,\n updateInputElementWithCompletion,\n executeCompletionQuery\n} from '../excellent/helpers';\n\nimport { FieldElement } from './FieldElement';\nimport { CompletionOption, Position } from '../interfaces';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { msg } from '@lit/localize';\n\n/*\n Completion is a text input that handles excellent completion options in a popup\n /\nexport class Completion extends FieldElement {\n static get styles() {\n return css`\n ${super.styles}\n :host {\n display: block;\n }\n\n temba-options {\n --widget-box-shadow-focused: 0 0 4px rgba(0, 0, 0, 0.15);\n --color-focus: #e6e6e6;\n }\n\n .comp-container {\n position: relative;\n height: 100%;\n }\n\n #anchor {\n / background: rgba(132, 40, 158, .1); */\n position: absolute;\n visibility: hidden;\n width: 250px;\n height: 20px;\n }\n\n .fn-marker {\n font-weight: bold;\n font-size: 42px;\n }\n\n .option-slot {\n background: #fff;\n }\n\n .current-fn {\n padding: 10px;\n margin: 5px;\n background: var(--color-primary-light);\n color: rgba(0, 0, 0, 0.5);\n border-radius: var(--curvature-widget);\n font-size: 90%;\n }\n\n .footer {\n padding: 5px 10px;\n background: var(--color-primary-light);\n color: rgba(0, 0, 0, 0.5);\n font-size: 80%;\n border-bottom-left-radius: var(--curvature-widget);\n border-bottom-right-radius: var(--curvature-widget);\n }\n\n code {\n padding: 1px 5px;\n border-radius: var(--curvature);\n }\n `;\n }\n\n @property({ type: Number })\n maxLength: number;\n\n @property({ type: Boolean })\n session: boolean;\n\n @property({ type: Boolean })\n submitOnEnter = false;\n\n @property({ type: Object })\n anchorPosition: Position = { left: 0, top: 0 };\n\n @property({ attribute: false })\n currentFunction: CompletionOption;\n\n @property({ type: String })\n placeholder = '';\n\n @property({ attribute: false })\n textInputElement: TextInput;\n\n @property({ attribute: false })\n anchorElement: HTMLDivElement;\n\n @property({ type: Array })\n options: any[] = [];\n\n @property({ type: String })\n name = '';\n\n @property({ type: Boolean })\n textarea: boolean;\n\n @property({ type: Boolean })\n gsm: boolean;\n\n @property({ type: Boolean })\n disableCompletion: boolean;\n\n @property({ type: String })\n counter: string;\n\n @property({ type: Boolean })\n autogrow = false;\n\n @property({ type: Number })\n minHeight: number;\n\n private hiddenElement: HTMLInputElement;\n private query: string;\n\n public firstUpdated() {\n this.textInputElement = this.shadowRoot.querySelector(\n 'temba-textinput'\n ) as TextInput;\n this.anchorElement = this.shadowRoot.querySelector('#anchor');\n\n // create our hidden container so it gets included in our host element's form\n this.hiddenElement = document.createElement('input');\n this.hiddenElement.setAttribute('type', 'hidden');\n this.hiddenElement.setAttribute('name', this.getAttribute('name'));\n this.hiddenElement.setAttribute('value', this.getAttribute('value') \|\| '');\n this.appendChild(this.hiddenElement);\n }\n\n private handleKeyUp(evt: KeyboardEvent) {\n if (this.disableCompletion) {\n // if we have options, ignore keys that are meant for them\n if (this.options && this.options.length > 0) {\n if (evt.key === 'ArrowUp' \|\| evt.key === 'ArrowDown') {\n return;\n }\n\n if (evt.ctrlKey) {\n if (evt.key === 'n' \|\| evt.key === 'p') {\n return;\n }\n }\n\n if (\n evt.key === 'Enter' \|\|\n evt.key === 'Escape' \|\|\n evt.key === 'Tab' \|\|\n evt.key.startsWith('Control')\n ) {\n evt.stopPropagation();\n evt.preventDefault();\n return;\n }\n\n this.executeQuery(evt.currentTarget as TextInput);\n }\n }\n }\n\n public hasVisibleOptions() {\n return this.options.length > 0;\n }\n\n private executeQuery(ele: TextInput) {\n if (this.disableCompletion) {\n return;\n }\n\n if (!ele.inputElement) {\n return;\n }\n\n const result = executeCompletionQuery(ele.inputElement, this.session);\n\n this.query = result.query;\n this.options = result.options;\n this.anchorPosition = result.anchorPosition;\n }\n\n private handleClick(evt: MouseEvent) {\n this.executeQuery(evt.currentTarget as TextInput);\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n\n // if our cursor changed, lets make sure our scrollbox is showing it\n if (changedProperties.has('value')) {\n this.hiddenElement.setAttribute('value', this.value);\n }\n }\n\n private handleInput(evt: KeyboardEvent) {\n const ele = evt.currentTarget as TextInput;\n this.executeQuery(ele);\n this.value = ele.inputElement.value;\n this.fireEvent('change');\n }\n\n private handleOptionCanceled() {\n // delay in case we are actively selecting\n window.setTimeout(() => {\n this.options = [];\n this.query = '';\n }, 100);\n }\n\n private handleOptionSelection(evt: CustomEvent) {\n const option = evt.detail.selected as CompletionOption;\n const tabbed = evt.detail.tabbed;\n\n updateInputElementWithCompletion(\n this.query,\n this.textInputElement.inputElement,\n option\n );\n this.query = '';\n this.options = [];\n\n if (tabbed) {\n this.executeQuery(this.textInputElement);\n }\n }\n\n public getTextInput(): TextInput {\n return this.textInputElement;\n }\n\n public click() {\n super.click();\n const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n if (input) {\n input.click();\n }\n }\n\n public focus() {\n super.focus();\n const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n if (input) {\n input.focus();\n }\n }\n\n protected renderWidget(): TemplateResult {\n const anchorStyles = this.anchorPosition\n ? {\n top: `${this.anchorPosition.top}px`,\n left: `${this.anchorPosition.left}px`\n }\n : {};\n\n const visible = this.options && this.options.length > 0;\n\n return html`\n <div class=\"comp-container\">\n <div id=\"anchor\" style=${styleMap(anchorStyles)}></div>\n <temba-textinput\n name=${this.name}\n placeholder=${this.placeholder}\n gsm=${this.gsm}\n counter=${ifDefined(this.counter)}\n @keyup=${this.handleKeyUp}\n @click=${this.handleClick}\n @input=${this.handleInput}\n @blur=${this.handleOptionCanceled}\n maxlength=\"${ifDefined(this.maxLength)}\"\n .value=${this.value}\n ?autogrow=${this.autogrow}\n ?textarea=${this.textarea}\n ?submitOnEnter=${this.submitOnEnter}\n style=${this.minHeight\n ? `--textarea-min-height: ${this.minHeight}px`\n : ''}\n >\n </temba-textinput>\n <temba-options\n @temba-selection=${this.handleOptionSelection}\n @temba-canceled=${this.handleOptionCanceled}\n .renderOption=${renderCompletionOption}\n .anchorTo=${this.anchorElement}\n .options=${this.options}\n ?visible=${visible}\n >\n ${this.currentFunction\n ? html`\n <div class=\"current-fn\">\n ${renderCompletionOption(this.currentFunction, true)}\n </div>\n `\n : null}\n <div class=\"footer\" style=\"${!visible ? 'display:none' : null}\">\n ${msg('Tab to complete, enter to select')}\n </div>\n </temba-options>\n </div>\n `;\n }\n\n public render(): TemplateResult {\n return this.renderField();\n }\n}\n"]}

package/out-tsc/src/form/Compose.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { html, css } from 'lit';
-import { FormElement } from './FormElement';
+import { FieldElement } from './FieldElement';
 import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
 import { DEFAULT_MEDIA_ENDPOINT, getClasses } from '../utils';
-export class Compose extends FormElement {
+export class Compose extends FieldElement {
     static get styles() {
         return css `
       :host {
@@ -385,12 +385,11 @@ export class Compose extends FormElement {
         return this.shadowRoot.querySelector('temba-tabs');
     }
     render() {
+        return this.renderField();
+    }
+    renderWidget() {
         return html `
-      <temba-field
-        name=${this.name}
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
-        .value=${this.value}
+      <div
         class=${getClasses({
             'active-template': !!this.currentTemplate &&
                 this.currentTab &&
@@ -410,7 +409,7 @@ export class Compose extends FormElement {
         <div class="container">
           <div class="items actions">${this.getActions()}</div>
         </div>
-      </temba-field>
+      </div>
     `;
     }
     handleTemplateChanged(evt) {