npm - @nyaruka/temba-components - Versions diffs - 0.93.3 → 0.94.0 - Mend

@nyaruka/temba-components 0.93.3 → 0.94.0

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 (31) hide show

package/CHANGELOG.md +8 -0
package/dist/locales/es.js +3 -6
package/dist/locales/es.js.map +1 -1
package/dist/locales/fr.js +3 -6
package/dist/locales/fr.js.map +1 -1
package/dist/locales/pt.js +3 -6
package/dist/locales/pt.js.map +1 -1
package/dist/temba-components.js +139 -59
package/dist/temba-components.js.map +1 -1
package/out-tsc/src/compose/Compose.js +6 -1
package/out-tsc/src/compose/Compose.js.map +1 -1
package/out-tsc/src/contactsearch/ContactSearch.js +148 -58
package/out-tsc/src/contactsearch/ContactSearch.js.map +1 -1
package/out-tsc/src/locales/es.js +3 -6
package/out-tsc/src/locales/es.js.map +1 -1
package/out-tsc/src/locales/fr.js +3 -6
package/out-tsc/src/locales/fr.js.map +1 -1
package/out-tsc/src/locales/pt.js +3 -6
package/out-tsc/src/locales/pt.js.map +1 -1
package/out-tsc/src/tabpane/TabPane.js +22 -2
package/out-tsc/src/tabpane/TabPane.js.map +1 -1
package/package.json +1 -1
package/src/compose/Compose.ts +6 -1
package/src/contactsearch/ContactSearch.ts +175 -78
package/src/locales/es.ts +3 -6
package/src/locales/fr.ts +3 -6
package/src/locales/pt.ts +3 -6
package/src/tabpane/TabPane.ts +22 -2
package/xliff/es.xlf +6 -15
package/xliff/fr.xlf +6 -15
package/xliff/pt.xlf +6 -15

package/out-tsc/src/tabpane/TabPane.js CHANGED Viewed

@@ -11,6 +11,8 @@ export class TabPane extends RapidElement {
         this.collapses = false;
         // are the tabs on the bottom of the pane?
         this.bottom = false;
+        // do we allow unselecting the current tab
+        this.unselect = false;
         // Only shows the name if the tab is focused
         this.focusedName = false;
         this.index = -1;
@@ -127,6 +129,14 @@ export class TabPane extends RapidElement {
       .bottom .tab.selected {
       }
+      .unselect .tab.selected {
+        cursor: pointer;
+      }
+      .unselect .tab.selected:hover {
+        background: var(--unselect-tab-color, #eee);
+      }
       .tab:hover {
         --icon-color: #666;
         color: #666;
@@ -217,7 +227,13 @@ export class TabPane extends RapidElement {
     `;
     }
     handleTabClick(event) {
-        this.index = parseInt(event.currentTarget.dataset.index);
+        const newIndex = parseInt(event.currentTarget.dataset.index);
+        if (this.unselect && this.index === newIndex) {
+            this.index = -1;
+        }
+        else {
+            this.index = newIndex;
+        }
         event.preventDefault();
         event.stopPropagation();
         this.requestUpdate('index');
@@ -301,7 +317,8 @@ export class TabPane extends RapidElement {
             bottom: this.bottom,
             collapses: this.collapses,
             embedded: this.embedded,
-            focusedname: this.focusedName
+            focusedname: this.focusedName,
+            unselect: this.unselect
         })}"
       >
         ${this.tabs.map((tab, index) => html `
@@ -368,6 +385,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], TabPane.prototype, "bottom", void 0);
+__decorate([
+    property({ type: Boolean })
+], TabPane.prototype, "unselect", void 0);
 __decorate([
     property({ type: Boolean })
 ], TabPane.prototype, "focusedName", void 0);

package/out-tsc/src/tabpane/TabPane.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabPane.js","sourceRoot":"","sources":["../../../src/tabpane/TabPane.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Tab } from './Tab';\n\nexport class TabPane extends RapidElement {\n static get styles() {\n return css`\n :host {\n display: flex;\n flex-direction: column;\n min-height: 0;\n flex-grow: 1;\n }\n\n .tabs {\n display: flex;\n align-items: stretch;\n }\n\n .tab {\n user-select: none;\n padding: 0.5em 0.7em;\n margin: 0em 0em;\n cursor: pointer;\n display: flex;\n font-size: 1.01em;\n align-items: center;\n border-radius: var(--curvature);\n border-bottom-right-radius: 0px;\n border-bottom-left-radius: 0px;\n border: 0px solid rgba(0, 0, 0, 0.45);\n color: var(--color-text-dark);\n --icon-color: var(--color-text-dark);\n white-space: nowrap;\n transition: all 100ms linear;\n }\n\n .focusedname .tab .name {\n transition: all 0s linear !important;\n }\n\n .focusedname .tab.selected .name {\n transition: all 200ms linear !important;\n }\n\n .tab.hidden {\n display: none;\n }\n\n .tab temba-icon {\n }\n\n .tab .name {\n margin-left: 0.4em;\n max-width: 80px;\n overflow: hidden;\n transition: max-width 500ms ease-in-out, margin 500ms ease-in-out;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .tab .badge {\n margin-left: 0.4em;\n }\n\n @media (max-width: 900px) {\n .collapses .tab .name {\n max-width: 0px;\n margin: 0;\n }\n }\n\n @media (max-width: 600px) {\n .collapses .tab .badge {\n display: none;\n }\n }\n\n .focusedname .tab.selected {\n transform: none;\n }\n\n .focusedname .tab .name {\n max-width: 0px;\n margin: 0;\n transition: max-width 200ms linear, margin 200ms linear;\n }\n\n .focusedname .tab.selected .name {\n margin-left: 0.4em;\n max-width: 200px;\n }\n\n .tab {\n transform: scale(0.9) translate(0em, -0.05em);\n --icon-color: #aaa;\n color: #aaa;\n }\n\n .tab.selected {\n }\n\n .tab.selected,\n .tab.selected:hover {\n cursor: default;\n box-shadow: 0px -3px 3px 1px rgba(0, 0, 0, 0.02);\n background: var(--focused-tab-color, #fff);\n transform: scale(1) translateY(0em);\n --icon-color: #666;\n color: #666;\n }\n\n .bottom .tab.selected {\n }\n\n .tab:hover {\n --icon-color: #666;\n color: #666;\n background: rgba(0, 0, 0, 0.02);\n }\n\n .pane {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n background: var(--focused-tab-color, #fff);\n border-radius: var(--curvature);\n box-shadow: var(\n --tabs-shadow,\n rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,\n rgba(0, 0, 0, 0.03) 0px 1px 2px 0px\n );\n min-height: 0;\n }\n\n .pane.first {\n border-top-left-radius: 0px;\n overflow: hidden;\n }\n\n .badge {\n }\n\n .count {\n border-radius: 99px;\n background: rgba(0, 0, 0, 0.05);\n color: rgba(0, 0, 0, 0.5);\n font-size: 0.6em;\n font-weight: 400;\n padding: 0.1em 0.4em;\n min-width: 1em;\n text-align: center;\n }\n\n .notify .count {\n background: var(--color-alert);\n color: #fff;\n }\n\n .bottom.tabs .tab {\n border-radius: 0em;\n }\n\n .bottom.pane {\n border-radius: 0em;\n }\n\n .bottom.pane.first {\n border-bottom-left-radius: 0px;\n }\n\n .bottom .tab.first {\n border-bottom-left-radius: var(--curvature);\n }\n\n .embedded.pane {\n box-shadow: none;\n margin: 0;\n }\n\n .embedded.tabs {\n margin: 0;\n }\n\n .embedded .tab {\n }\n\n .embedded.tabs .tab.selected {\n box-shadow: none !important;\n }\n\n .embedded.pane {\n // padding: 0.3em;\n }\n\n .check {\n margin-left: 0.4em;\n }\n\n .pane {\n display: flex;\n }\n `;\n }\n\n @property({ type: Boolean })\n embedded = false;\n\n @property({ type: Boolean })\n collapses = false;\n\n // are the tabs on the bottom of the pane?\n @property({ type: Boolean })\n bottom = false;\n\n // Only shows the name if the tab is focused\n @property({ type: Boolean })\n focusedName = false;\n\n @property({ type: Number })\n index = -1;\n\n @property({ type: String })\n refresh = '';\n\n @property({ type: Array, attribute: false })\n tabs: Tab[] = [];\n\n private handleTabClick(event: MouseEvent): void {\n this.index = parseInt(\n (event.currentTarget as HTMLDivElement).dataset.index\n );\n event.preventDefault();\n event.stopPropagation();\n this.requestUpdate('index');\n }\n\n public handleSlotChange() {\n const tabs: Tab[] = [];\n for (const t of this.children) {\n if (t.tagName === 'TEMBA-TAB') {\n const tab = t as Tab;\n tabs.push(tab);\n }\n }\n this.tabs = tabs;\n }\n\n public firstUpdated(\n changes: PropertyValueMap<any> \| Map<PropertyKey, unknown>\n ): void {\n super.firstUpdated(changes);\n this.shadowRoot.addEventListener(\n 'slotchange',\n this.handleSlotChange.bind(this)\n );\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n if (changedProperties.has('index') \|\| changedProperties.has('tabs')) {\n this.tabs.forEach((tab, index) => {\n tab.selected = index == this.index;\n });\n this.fireEvent(CustomEventType.ContextChanged);\n }\n\n // if our current tab is hidden, select the first visible one\n if (this.index > this.tabs.length) {\n const tab = this.tabs[this.index];\n if (tab && tab.hidden) {\n for (let i = 0; i < this.tabs.length; i++) {\n const other = this.tabs[i];\n if (other && !other.hidden) {\n this.index = i;\n return;\n }\n }\n }\n }\n }\n\n public setTabDetails(\n index: number,\n details: { count: number; hidden: boolean }\n ) {\n if (index < this.tabs.length) {\n const tab = this.tabs[index];\n tab.count = details.count;\n tab.hidden = details.hidden;\n this.requestUpdate();\n } else {\n // not ready yet, set the tab details later\n setTimeout(() => {\n this.setTabDetails(index, details);\n }, 100);\n }\n }\n\n public getCurrentTab(): Tab {\n return this.tabs[this.index];\n }\n\n public getTab(index: number): Tab {\n return this.tabs[index];\n }\n\n public handleTabContentChanged() {\n this.requestUpdate();\n }\n\n public render(): TemplateResult {\n return html`\n ${this.bottom\n ? html`<div\n class=\"pane ${getClasses({\n first: this.index == 0,\n embedded: this.embedded,\n bottom: this.bottom\n })}\"\n >\n <slot></slot>\n </div>`\n : null}\n\n <div\n class=\"tabs ${getClasses({\n tabs: true,\n bottom: this.bottom,\n collapses: this.collapses,\n embedded: this.embedded,\n focusedname: this.focusedName\n })}\"\n >\n ${this.tabs.map(\n (tab, index) => html`\n <div\n @click=${this.handleTabClick}\n data-index=${index}\n class=\"${getClasses({\n tab: true,\n first: index == 0,\n selected: index == this.index,\n hidden: tab.hidden,\n notify: tab.notify\n })}\"\n style=\"${tab.selectionColor && index == this.index\n ? `color:${tab.selectionColor};--icon-color:${tab.selectionColor};`\n : ''} ${tab.selectionBackground && index == this.index\n ? `background-color:${tab.selectionBackground};`\n : ''}\"\n >\n ${tab.icon ? html`<temba-icon name=${tab.icon} />` : null}\n <div class=\"name\">${tab.name}</div>\n ${tab.hasBadge()\n ? html`\n <div class=\"badge\">\n ${tab.count > 0\n ? html`<div class=\"count\">\n ${tab.count.toLocaleString()}\n </div>`\n : null}\n </div>\n `\n : null}\n ${tab.checked\n ? html`<temba-icon class=\"check\" name=\"check\"></temba-icon>`\n : null}\n </div>\n `\n )}\n\n <div style=\"flex-grow:1\"></div>\n <div style=\"display:flex; align-items:center\">\n <slot name=\"tab-right\"></slot>\n </div>\n </div>\n ${!this.bottom\n ? html`<div\n class=\"pane ${getClasses({\n first: this.index == 0,\n embedded: this.embedded,\n bottom: this.bottom\n })}\"\n >\n <slot></slot>\n </div>`\n : null}\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"TabPane.js","sourceRoot":"","sources":["../../../src/tabpane/TabPane.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Tab } from './Tab';\n\nexport class TabPane extends RapidElement {\n static get styles() {\n return css`\n :host {\n display: flex;\n flex-direction: column;\n min-height: 0;\n flex-grow: 1;\n }\n\n .tabs {\n display: flex;\n align-items: stretch;\n }\n\n .tab {\n user-select: none;\n padding: 0.5em 0.7em;\n margin: 0em 0em;\n cursor: pointer;\n display: flex;\n font-size: 1.01em;\n align-items: center;\n border-radius: var(--curvature);\n border-bottom-right-radius: 0px;\n border-bottom-left-radius: 0px;\n border: 0px solid rgba(0, 0, 0, 0.45);\n color: var(--color-text-dark);\n --icon-color: var(--color-text-dark);\n white-space: nowrap;\n transition: all 100ms linear;\n }\n\n .focusedname .tab .name {\n transition: all 0s linear !important;\n }\n\n .focusedname .tab.selected .name {\n transition: all 200ms linear !important;\n }\n\n .tab.hidden {\n display: none;\n }\n\n .tab temba-icon {\n }\n\n .tab .name {\n margin-left: 0.4em;\n max-width: 80px;\n overflow: hidden;\n transition: max-width 500ms ease-in-out, margin 500ms ease-in-out;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .tab .badge {\n margin-left: 0.4em;\n }\n\n @media (max-width: 900px) {\n .collapses .tab .name {\n max-width: 0px;\n margin: 0;\n }\n }\n\n @media (max-width: 600px) {\n .collapses .tab .badge {\n display: none;\n }\n }\n\n .focusedname .tab.selected {\n transform: none;\n }\n\n .focusedname .tab .name {\n max-width: 0px;\n margin: 0;\n transition: max-width 200ms linear, margin 200ms linear;\n }\n\n .focusedname .tab.selected .name {\n margin-left: 0.4em;\n max-width: 200px;\n }\n\n .tab {\n transform: scale(0.9) translate(0em, -0.05em);\n --icon-color: #aaa;\n color: #aaa;\n }\n\n .tab.selected {\n }\n\n .tab.selected,\n .tab.selected:hover {\n cursor: default;\n box-shadow: 0px -3px 3px 1px rgba(0, 0, 0, 0.02);\n background: var(--focused-tab-color, #fff);\n transform: scale(1) translateY(0em);\n --icon-color: #666;\n color: #666;\n }\n\n .bottom .tab.selected {\n }\n\n .unselect .tab.selected {\n cursor: pointer;\n }\n\n .unselect .tab.selected:hover {\n background: var(--unselect-tab-color, #eee);\n }\n\n .tab:hover {\n --icon-color: #666;\n color: #666;\n background: rgba(0, 0, 0, 0.02);\n }\n\n .pane {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n background: var(--focused-tab-color, #fff);\n border-radius: var(--curvature);\n box-shadow: var(\n --tabs-shadow,\n rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,\n rgba(0, 0, 0, 0.03) 0px 1px 2px 0px\n );\n min-height: 0;\n }\n\n .pane.first {\n border-top-left-radius: 0px;\n overflow: hidden;\n }\n\n .badge {\n }\n\n .count {\n border-radius: 99px;\n background: rgba(0, 0, 0, 0.05);\n color: rgba(0, 0, 0, 0.5);\n font-size: 0.6em;\n font-weight: 400;\n padding: 0.1em 0.4em;\n min-width: 1em;\n text-align: center;\n }\n\n .notify .count {\n background: var(--color-alert);\n color: #fff;\n }\n\n .bottom.tabs .tab {\n border-radius: 0em;\n }\n\n .bottom.pane {\n border-radius: 0em;\n }\n\n .bottom.pane.first {\n border-bottom-left-radius: 0px;\n }\n\n .bottom .tab.first {\n border-bottom-left-radius: var(--curvature);\n }\n\n .embedded.pane {\n box-shadow: none;\n margin: 0;\n }\n\n .embedded.tabs {\n margin: 0;\n }\n\n .embedded .tab {\n }\n\n .embedded.tabs .tab.selected {\n box-shadow: none !important;\n }\n\n .embedded.pane {\n // padding: 0.3em;\n }\n\n .check {\n margin-left: 0.4em;\n }\n\n .pane {\n display: flex;\n }\n `;\n }\n\n @property({ type: Boolean })\n embedded = false;\n\n @property({ type: Boolean })\n collapses = false;\n\n // are the tabs on the bottom of the pane?\n @property({ type: Boolean })\n bottom = false;\n\n // do we allow unselecting the current tab\n @property({ type: Boolean })\n unselect = false;\n\n // Only shows the name if the tab is focused\n @property({ type: Boolean })\n focusedName = false;\n\n @property({ type: Number })\n index = -1;\n\n @property({ type: String })\n refresh = '';\n\n @property({ type: Array, attribute: false })\n tabs: Tab[] = [];\n\n private handleTabClick(event: MouseEvent): void {\n const newIndex = parseInt(\n (event.currentTarget as HTMLDivElement).dataset.index\n );\n\n if (this.unselect && this.index === newIndex) {\n this.index = -1;\n } else {\n this.index = newIndex;\n }\n\n event.preventDefault();\n event.stopPropagation();\n this.requestUpdate('index');\n }\n\n public handleSlotChange() {\n const tabs: Tab[] = [];\n for (const t of this.children) {\n if (t.tagName === 'TEMBA-TAB') {\n const tab = t as Tab;\n tabs.push(tab);\n }\n }\n this.tabs = tabs;\n }\n\n public firstUpdated(\n changes: PropertyValueMap<any> \| Map<PropertyKey, unknown>\n ): void {\n super.firstUpdated(changes);\n this.shadowRoot.addEventListener(\n 'slotchange',\n this.handleSlotChange.bind(this)\n );\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n if (changedProperties.has('index') \|\| changedProperties.has('tabs')) {\n this.tabs.forEach((tab, index) => {\n tab.selected = index == this.index;\n });\n this.fireEvent(CustomEventType.ContextChanged);\n }\n\n // if our current tab is hidden, select the first visible one\n if (this.index > this.tabs.length) {\n const tab = this.tabs[this.index];\n if (tab && tab.hidden) {\n for (let i = 0; i < this.tabs.length; i++) {\n const other = this.tabs[i];\n if (other && !other.hidden) {\n this.index = i;\n return;\n }\n }\n }\n }\n }\n\n public setTabDetails(\n index: number,\n details: { count: number; hidden: boolean }\n ) {\n if (index < this.tabs.length) {\n const tab = this.tabs[index];\n tab.count = details.count;\n tab.hidden = details.hidden;\n this.requestUpdate();\n } else {\n // not ready yet, set the tab details later\n setTimeout(() => {\n this.setTabDetails(index, details);\n }, 100);\n }\n }\n\n public getCurrentTab(): Tab {\n return this.tabs[this.index];\n }\n\n public getTab(index: number): Tab {\n return this.tabs[index];\n }\n\n public handleTabContentChanged() {\n this.requestUpdate();\n }\n\n public render(): TemplateResult {\n return html`\n ${this.bottom\n ? html`<div\n class=\"pane ${getClasses({\n first: this.index == 0,\n embedded: this.embedded,\n bottom: this.bottom\n })}\"\n >\n <slot></slot>\n </div>`\n : null}\n\n <div\n class=\"tabs ${getClasses({\n tabs: true,\n bottom: this.bottom,\n collapses: this.collapses,\n embedded: this.embedded,\n focusedname: this.focusedName,\n unselect: this.unselect\n })}\"\n >\n ${this.tabs.map(\n (tab, index) => html`\n <div\n @click=${this.handleTabClick}\n data-index=${index}\n class=\"${getClasses({\n tab: true,\n first: index == 0,\n selected: index == this.index,\n hidden: tab.hidden,\n notify: tab.notify\n })}\"\n style=\"${tab.selectionColor && index == this.index\n ? `color:${tab.selectionColor};--icon-color:${tab.selectionColor};`\n : ''} ${tab.selectionBackground && index == this.index\n ? `background-color:${tab.selectionBackground};`\n : ''}\"\n >\n ${tab.icon ? html`<temba-icon name=${tab.icon} />` : null}\n <div class=\"name\">${tab.name}</div>\n ${tab.hasBadge()\n ? html`\n <div class=\"badge\">\n ${tab.count > 0\n ? html`<div class=\"count\">\n ${tab.count.toLocaleString()}\n </div>`\n : null}\n </div>\n `\n : null}\n ${tab.checked\n ? html`<temba-icon class=\"check\" name=\"check\"></temba-icon>`\n : null}\n </div>\n `\n )}\n\n <div style=\"flex-grow:1\"></div>\n <div style=\"display:flex; align-items:center\">\n <slot name=\"tab-right\"></slot>\n </div>\n </div>\n ${!this.bottom\n ? html`<div\n class=\"pane ${getClasses({\n first: this.index == 0,\n embedded: this.embedded,\n bottom: this.bottom\n })}\"\n >\n <slot></slot>\n </div>`\n : null}\n `;\n }\n}\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.93.3",
+  "version": "0.94.0",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/compose/Compose.ts CHANGED Viewed

@@ -12,6 +12,10 @@ import { MediaPicker } from '../mediapicker/MediaPicker';
 export class Compose extends FormElement {
   static get styles() {
     return css`
+      :host {
+        --textarea-min-height: var(--textarea-min-height, 4em);
+      }
       .container {
         display: flex;
         flex-direction: column;
@@ -32,7 +36,7 @@ export class Compose extends FormElement {
           --compose-curvature,
           var(--curvature) var(--curvature) 0px 0px
         );
-        --textarea-min-height: var(--textarea-min-height, 4em);
         --widget-box-shadow: none;
         padding: var(--compose-padding, 0px);
       }
@@ -461,6 +465,7 @@ export class Compose extends FormElement {
         embedded
         focusedname
         bottom
+        unselect
         refresh="${this.currentAttachments.length}|${this.index}|${this
           .currentQuickReplies.length}|${showOptins}|${this.currentOptin}"
       >

package/src/contactsearch/ContactSearch.ts CHANGED Viewed

@@ -9,6 +9,7 @@ import { FormElement } from '../FormElement';
 import { Checkbox } from '../checkbox/Checkbox';
 import { msg } from '@lit/localize';
 import { OmniOption } from '../omnibox/Omnibox';
+import { Select } from '../select/Select';
 const QUEIT_MILLIS = 2000;
@@ -193,6 +194,37 @@ export class ContactSearch extends FormElement {
       temba-alert {
         margin: 1em 0;
       }
+      temba-select[name='not_seen_since_days'] {
+        margin-bottom: 1em;
+        display: block;
+      }
+      .activity-select {
+        display: flex;
+        align-items: center;
+        padding: var(--checkbox-padding, 10px);
+        border-radius: var(--curvature);
+        cursor: pointer;
+      }
+      .activity-select:hover {
+        background: #f9f9f9;
+      }
+      .small-select {
+        --temba-select-selected-padding: 0px 0.5em;
+        --temba-select-selected-line-height: 1em;
+        --temba-select-selected-font-size: 1em;
+        --search-input-height: 0px !important;
+        min-width: 100px;
+      }
+      .filters {
+        padding: 1em;
+        border: 1px solid var(--color-borders);
+        border-radius: var(--curvature);
+      }
     `;
   }
@@ -368,19 +400,48 @@ export class ContactSearch extends FormElement {
     }
   }
+  private handleActivityLevelChanged(evt: any) {
+    const select = evt.target as Select;
+    const option = select.values[0];
+    if (option) {
+      if (this.exclusions['not_seen_since_days']) {
+        this.exclusions['not_seen_since_days'] = parseInt(option.value);
+        this.refresh();
+      }
+    }
+  }
+  private handleActivityLabelClicked(evt: any) {
+    if (
+      evt.target &&
+      evt.target.tagName !== 'TEMBA-CHECKBOX' &&
+      evt.target.tagName !== 'TEMBA-SELECT' &&
+      !evt.target.disabled
+    ) {
+      const checkbox = evt.currentTarget.querySelector('temba-checkbox');
+      checkbox.checked = !checkbox.checked;
+    }
+  }
   private handleExclusionChanged(evt: any) {
     if (evt.target.tagName === 'TEMBA-CHECKBOX') {
       const ex = JSON.stringify(this.exclusions);
       const checkbox = evt.target as Checkbox;
       let value = checkbox.checked as any;
+      // if we check the activity box, look inside the select for the value
+      if (checkbox.name === 'not_seen_since_days' && value) {
+        const select = checkbox.parentElement.querySelector(
+          'temba-select'
+        ) as Select;
+        if (select.values[0]) {
+          value = parseInt(select.values[0].value);
+        }
+      }
       if (!value) {
         delete this.exclusions[checkbox.name];
       } else {
-        if (checkbox.name === 'not_seen_since_days') {
-          value = 90;
-        }
         this.exclusions[checkbox.name] = value;
       }
@@ -447,72 +508,106 @@ export class ContactSearch extends FormElement {
     }
     return html`
-      ${this.advanced
-        ? html`<div class="query">
-            <temba-textinput
-              .label=${this.label}
-              .helpText=${this.helpText}
-              .widgetOnly=${this.widgetOnly}
-              .errors=${this.errors}
-              name=${this.name}
-              .inputRoot=${this}
-              @input=${this.handleQueryChange}
-              placeholder=${this.placeholder}
-              .value=${this.query}
-              textarea
-              autogrow
-            >
-            </temba-textinput>
-          </div>`
-        : html`<temba-omnibox
-              placeholder="Search for contacts or groups"
-              widget_only=""
-              groups=""
-              contacts=""
-              label="Recipients"
-              help_text="The contacts to send the message to."
-              .errors=${this.errors}
-              id="recipients"
-              name="recipients"
-              .value=${this.recipients}
-              endpoint="/contact/omnibox/?"
-              @change=${this.handleRecipientsChanged}
-            >
-            </temba-omnibox>
-            ${this.not_seen_since_days
-              ? html`<temba-checkbox
-                  name="not_seen_since_days"
-                  label="${msg('Skip inactive contacts')}"
-                  help_text="${msg(
-                    'Only include contacts who have sent a message in the last 90 days.'
-                  )}"
-                  ?checked=${this.exclusions['not_seen_since_days'] === 90}
-                  @change=${this.handleExclusionChanged}
-                ></temba-checkbox>`
-              : null}
-            ${this.in_a_flow
-              ? html`<temba-checkbox
-                  name="in_a_flow"
-                  label="${msg('Skip contacts currently in a flow')}"
-                  help_text="${msg(
-                    'Avoid interrupting a contact who is already in a flow.'
-                  )}"
-                  ?checked=${this.exclusions['in_a_flow']}
-                  @change=${this.handleExclusionChanged}
-                ></temba-checkbox>`
-              : null}
-            ${this.started_previously
-              ? html`<temba-checkbox
-                  name="started_previously"
-                  label="${msg('Skip repeat contacts')}"
-                  help_text="${msg(
-                    'Avoid restarting a contact who has been in this flow in the last 90 days.'
-                  )}"
-                  ?checked=${this.exclusions['started_previously']}
-                  @change=${this.handleExclusionChanged}
-                ></temba-checkbox>`
-              : null}`}
+      ${
+        this.advanced
+          ? html`<div class="query">
+              <temba-textinput
+                .label=${this.label}
+                .helpText=${this.helpText}
+                .widgetOnly=${this.widgetOnly}
+                .errors=${this.errors}
+                name=${this.name}
+                .inputRoot=${this}
+                @input=${this.handleQueryChange}
+                placeholder=${this.placeholder}
+                .value=${this.query}
+                textarea
+                autogrow
+              >
+              </temba-textinput>
+            </div>`
+          : html`<temba-omnibox
+                placeholder="Search for contacts or groups"
+                widget_only=""
+                groups=""
+                contacts=""
+                label="Recipients"
+                help_text="The contacts to send the message to."
+                .errors=${this.errors}
+                id="recipients"
+                name="recipients"
+                .value=${this.recipients}
+                endpoint="/contact/omnibox/?"
+                @change=${this.handleRecipientsChanged}
+              >
+              </temba-omnibox>
+              <div class="filters">
+                <div style="display:flex;font-size:1em;margin-bottom:0.5em">
+                  <temba-icon size="1" name="filter"></temba-icon>
+                  <div style="margin-left:0.5em">
+                    Only include contacts who...
+                  </div>
+                </div>
+                ${this.not_seen_since_days
+                  ? html`
+                      <div
+                        class="activity-select"
+                        @click=${this.handleActivityLabelClicked}
+                      >
+                        <temba-checkbox
+                          style="display:inline;"
+                          name="not_seen_since_days"
+                          @change=${this.handleExclusionChanged}
+                        >
+                        </temba-checkbox>
+                        <div style="margin-left:0.5em">
+                          ${msg('Have sent a message in the last')}
+                        </div>
+                        <temba-select
+                          style="margin-left:0.5em"
+                          class="small-select"
+                          @change=${this.handleActivityLevelChanged}
+                          ?disabled=${!this.exclusions['not_seen_since_days']}
+                        >
+                          <temba-option
+                            name="90 days"
+                            value="90"
+                          ></temba-option>
+                          <temba-option
+                            name="180 days"
+                            value="180"
+                          ></temba-option>
+                          <temba-option name="Year" value="365"></temba-option>
+                        </temba-select>
+                        <div></div>
+                      </div>
+                    `
+                  : null}
+                ${this.in_a_flow
+                  ? html`<temba-checkbox
+                      name="in_a_flow"
+                      label="${msg('Are not currently in a flow')}"
+                      ?checked=${this.exclusions['in_a_flow']}
+                      @change=${this.handleExclusionChanged}
+                    ></temba-checkbox>`
+                  : null}
+                ${this.started_previously
+                  ? html`<temba-checkbox
+                      name="started_previously"
+                      label="${msg(
+                        'Have not started this flow in the last 90 days'
+                      )}"
+                      ?checked=${this.exclusions['started_previously']}
+                      @change=${this.handleExclusionChanged}
+                    ></temba-checkbox>`
+                  : null}
+              </div>`
+      }
+              </div>
       <div
         class="results ${getClasses({
@@ -527,14 +622,16 @@ export class ContactSearch extends FormElement {
         <div class="summary ${this.expanded ? 'expanded' : ''}">${summary}</div>
       </div>
-      ${this.summary && this.summary.warnings
-        ? this.summary.warnings.map(
-            (warning) =>
-              html`<temba-alert level="warning"
-                >${unsafeHTML(warning)}</temba-alert
-              >`
-          )
-        : ``}
+      ${
+        this.summary && this.summary.warnings
+          ? this.summary.warnings.map(
+              (warning) =>
+                html`<temba-alert level="warning"
+                  >${unsafeHTML(warning)}</temba-alert
+                >`
+            )
+          : ``
+      }
     `;
   }
 }

package/src/locales/es.ts CHANGED Viewed

@@ -6,10 +6,7 @@
 export const templates = {
   scf1453991c986b25: `Tab para completar, enter para seleccionar`,
-  sf8653793d61d060c: `Skip inactive contacts`,
-  sd4af861b95e8ba4a: `Only include contacts who have sent a message in the last 90 days.`,
-  sd149dff460c8dc41: `Skip contacts currently in a flow`,
-  sc85010c81b71421e: `Avoid interrupting a contact who is already in a flow.`,
-  s3e3fa53e834f4fda: `Skip repeat contacts`,
-  s95e715d82602bced: `Avoid restarting a contact who has been in this flow in the last 90 days.`
+  s638236250662c6b3: `Have sent a message in the last`,
+  s8f02e3a18ffc083a: `Are not currently in a flow`,
+  s4788ee206c4570c7: `Have not started this flow in the last 90 days`
 };

package/src/locales/fr.ts CHANGED Viewed

@@ -6,10 +6,7 @@
 export const templates = {
   scf1453991c986b25: `Tab to complete, enter to select`,
-  sf8653793d61d060c: `Skip inactive contacts`,
-  sd4af861b95e8ba4a: `Only include contacts who have sent a message in the last 90 days.`,
-  sd149dff460c8dc41: `Skip contacts currently in a flow`,
-  sc85010c81b71421e: `Avoid interrupting a contact who is already in a flow.`,
-  s3e3fa53e834f4fda: `Skip repeat contacts`,
-  s95e715d82602bced: `Avoid restarting a contact who has been in this flow in the last 90 days.`
+  s638236250662c6b3: `Have sent a message in the last`,
+  s8f02e3a18ffc083a: `Are not currently in a flow`,
+  s4788ee206c4570c7: `Have not started this flow in the last 90 days`
 };

package/src/locales/pt.ts CHANGED Viewed

@@ -6,10 +6,7 @@
 export const templates = {
   scf1453991c986b25: `Tab to complete, enter to select`,
-  sf8653793d61d060c: `Skip inactive contacts`,
-  sd4af861b95e8ba4a: `Only include contacts who have sent a message in the last 90 days.`,
-  sd149dff460c8dc41: `Skip contacts currently in a flow`,
-  sc85010c81b71421e: `Avoid interrupting a contact who is already in a flow.`,
-  s3e3fa53e834f4fda: `Skip repeat contacts`,
-  s95e715d82602bced: `Avoid restarting a contact who has been in this flow in the last 90 days.`
+  s638236250662c6b3: `Have sent a message in the last`,
+  s8f02e3a18ffc083a: `Are not currently in a flow`,
+  s4788ee206c4570c7: `Have not started this flow in the last 90 days`
 };

package/src/tabpane/TabPane.ts CHANGED Viewed

@@ -116,6 +116,14 @@ export class TabPane extends RapidElement {
       .bottom .tab.selected {
       }
+      .unselect .tab.selected {
+        cursor: pointer;
+      }
+      .unselect .tab.selected:hover {
+        background: var(--unselect-tab-color, #eee);
+      }
       .tab:hover {
         --icon-color: #666;
         color: #666;
@@ -216,6 +224,10 @@ export class TabPane extends RapidElement {
   @property({ type: Boolean })
   bottom = false;
+  // do we allow unselecting the current tab
+  @property({ type: Boolean })
+  unselect = false;
   // Only shows the name if the tab is focused
   @property({ type: Boolean })
   focusedName = false;
@@ -230,9 +242,16 @@ export class TabPane extends RapidElement {
   tabs: Tab[] = [];
   private handleTabClick(event: MouseEvent): void {
-    this.index = parseInt(
+    const newIndex = parseInt(
       (event.currentTarget as HTMLDivElement).dataset.index
     );
+    if (this.unselect && this.index === newIndex) {
+      this.index = -1;
+    } else {
+      this.index = newIndex;
+    }
     event.preventDefault();
     event.stopPropagation();
     this.requestUpdate('index');
@@ -332,7 +351,8 @@ export class TabPane extends RapidElement {
           bottom: this.bottom,
           collapses: this.collapses,
           embedded: this.embedded,
-          focusedname: this.focusedName
+          focusedname: this.focusedName,
+          unselect: this.unselect
         })}"
       >
         ${this.tabs.map(

package/xliff/es.xlf CHANGED Viewed

@@ -6,23 +6,14 @@
   <source>Tab to complete, enter to select</source>
   <target>Tab para completar, enter para seleccionar</target>
 </trans-unit>
-<trans-unit id="sf8653793d61d060c">
-  <source>Skip inactive contacts</source>
+<trans-unit id="s638236250662c6b3">
+  <source>Have sent a message in the last</source>
 </trans-unit>
-<trans-unit id="sd4af861b95e8ba4a">
-  <source>Only include contacts who have sent a message in the last 90 days.</source>
+<trans-unit id="s8f02e3a18ffc083a">
+  <source>Are not currently in a flow</source>
 </trans-unit>
-<trans-unit id="sd149dff460c8dc41">
-  <source>Skip contacts currently in a flow</source>
-</trans-unit>
-<trans-unit id="sc85010c81b71421e">
-  <source>Avoid interrupting a contact who is already in a flow.</source>
-</trans-unit>
-<trans-unit id="s3e3fa53e834f4fda">
-  <source>Skip repeat contacts</source>
-</trans-unit>
-<trans-unit id="s95e715d82602bced">
-  <source>Avoid restarting a contact who has been in this flow in the last 90 days.</source>
+<trans-unit id="s4788ee206c4570c7">
+  <source>Have not started this flow in the last 90 days</source>
 </trans-unit>
 </body>
 </file>

package/xliff/fr.xlf CHANGED Viewed

@@ -5,23 +5,14 @@
 <trans-unit id="scf1453991c986b25">
   <source>Tab to complete, enter to select</source>
 </trans-unit>
-<trans-unit id="sf8653793d61d060c">
-  <source>Skip inactive contacts</source>
+<trans-unit id="s638236250662c6b3">
+  <source>Have sent a message in the last</source>
 </trans-unit>
-<trans-unit id="sd4af861b95e8ba4a">
-  <source>Only include contacts who have sent a message in the last 90 days.</source>
+<trans-unit id="s8f02e3a18ffc083a">
+  <source>Are not currently in a flow</source>
 </trans-unit>
-<trans-unit id="sd149dff460c8dc41">
-  <source>Skip contacts currently in a flow</source>
-</trans-unit>
-<trans-unit id="sc85010c81b71421e">
-  <source>Avoid interrupting a contact who is already in a flow.</source>
-</trans-unit>
-<trans-unit id="s3e3fa53e834f4fda">
-  <source>Skip repeat contacts</source>
-</trans-unit>
-<trans-unit id="s95e715d82602bced">
-  <source>Avoid restarting a contact who has been in this flow in the last 90 days.</source>
+<trans-unit id="s4788ee206c4570c7">
+  <source>Have not started this flow in the last 90 days</source>
 </trans-unit>
 </body>
 </file>