@nyaruka/temba-components 0.156.11 → 0.156.13

package/src/flow/types.ts

@@ -50,7 +50,8 @@ export const CONTEXT_MENU_SHORTCUTS: Record<FlowType, ContextMenuShortcut[]> = {
 export const Features = {
   AI: 'ai',
   AIRTIME: 'airtime',
-  LOCATIONS: 'locations'
+  LOCATIONS: 'locations',
+  AUTO_TRANSLATE: 'auto_translate'
 } as const;
 
 export type Feature = (typeof Features)[keyof typeof Features];

package/src/form/Compose.ts

@@ -21,6 +21,7 @@ export interface ComposeValue {
 export class Compose extends FieldElement {
   static get styles() {
     return css`
+      ${super.styles}
       :host {
         border-top-right-radius: var(--curvature);
         border-top-left-radius: var(--curvature);

package/src/layout/Dialog.ts

@@ -142,11 +142,26 @@ export class Dialog extends ResizeElement {
         flex-direction: row;
         align-items: center;
         font-size: 20px;
-        padding: 12px 20px;
+        padding: 12px 20px var(--dialog-header-padding-bottom, 12px);
         color: var(--header-text);
         background: var(--header-bg);
       }
 
+      /* "flat" variant: header/footer share the body's white background
+         and lose their inner padding so the dialog reads as one
+         continuous surface. Use for content-focused dialogs that don't
+         need the tinted chrome. */
+      :host([variant='flat']) .header-text {
+        background: #fff;
+        color: var(--color-text);
+        padding-bottom: 0;
+      }
+
+      :host([variant='flat']) .dialog-footer {
+        background: #fff;
+        padding-top: 0;
+      }
+
       .header-text .title {
         flex-grow: 1;
       }
@@ -157,8 +172,11 @@ export class Dialog extends ResizeElement {
       }
 
       .dialog-footer {
-        background: var(--color-primary-light);
-        padding: 10px;
+        background: var(
+          --dialog-footer-background,
+          var(--color-primary-light)
+        );
+        padding: var(--dialog-footer-padding-top, 10px) 10px 10px;
         display: flex;
         flex-flow: row;
         align-items: center;
@@ -227,6 +245,9 @@ export class Dialog extends ResizeElement {
   @property({ type: Boolean })
   hideOnClick: boolean;
 
+  @property({ type: String, reflect: true })
+  variant: string;
+
   @property({ type: Boolean })
   noFocus: boolean;
 

package/temba-modules.ts

@@ -85,6 +85,7 @@ import { Simulator } from './src/simulator/Simulator';
 import { FlowSearch } from './src/flow/FlowSearch';
 import { IssuesWindow } from './src/flow/IssuesWindow';
 import { RevisionsWindow } from './src/flow/RevisionsWindow';
+import { AutoTranslate } from './src/flow/AutoTranslate';
 import { MessageTable } from './src/flow/MessageTable';
 
 export function addCustomElement(name: string, comp: any) {
@@ -182,3 +183,4 @@ addCustomElement('temba-simulator', Simulator);
 addCustomElement('temba-flow-search', FlowSearch);
 addCustomElement('temba-issues-window', IssuesWindow);
 addCustomElement('temba-revisions-window', RevisionsWindow);
+addCustomElement('temba-auto-translate', AutoTranslate);