Merge branch '0.26.2' into ccl-v0.26.2

.github/workflows/build.yml

@@ -4,7 +4,7 @@ on: [push]
 
 jobs:
   bulid:
-    runs-on: macos-latest
+    runs-on: macOS-11
     steps:
       - uses: actions/checkout@v1
       - name: Use Node.js 12.x

CHANGELOG.md

@@ -4,6 +4,28 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.26.2](https://github.com/nyaruka/temba-components/compare/v0.26.1...v0.26.2)
+
+> 21 April 2022
+
+- Tabbed pane [`#162`](https://github.com/nyaruka/temba-components/pull/162)
+- Update history and fix tests that weren't scrolling [`e6f2baf`](https://github.com/nyaruka/temba-components/commit/e6f2bafe4186aa263a91c12159d54ab54f4d7cc5)
+- Fix menu parent clicks, shrink menu fonts [`0bd7c7e`](https://github.com/nyaruka/temba-components/commit/0bd7c7ec95823ac74363b3fa05a1e62f13022e06)
+- Tighten up menu buttons [`a2d766d`](https://github.com/nyaruka/temba-components/commit/a2d766d2bde1b5049a28227a996f77a28d8dc8dc)
+
+#### [v0.26.1](https://github.com/nyaruka/temba-components/compare/v0.26.0...v0.26.1)
+
+> 11 April 2022
+
+- Bump minimist from 1.2.5 to 1.2.6 [`#156`](https://github.com/nyaruka/temba-components/pull/156)
+- Simplify menu refresh, add on_submit to modax menu item [`#160`](https://github.com/nyaruka/temba-components/pull/160)
+- URL Inlines [`#158`](https://github.com/nyaruka/temba-components/pull/158)
+- Add dropdown component [`#157`](https://github.com/nyaruka/temba-components/pull/157)
+- Upgrade to latest lit [`#155`](https://github.com/nyaruka/temba-components/pull/155)
+- Update to latest lit [`d595e32`](https://github.com/nyaruka/temba-components/commit/d595e32d3b11155c31536f5c753ac763d07cb9d2)
+- pin macos build version [`246cfba`](https://github.com/nyaruka/temba-components/commit/246cfba2bfc4a12780cd7c7324045ff2fb10646f)
+- Add support for menu inlines with sub urls [`180cf59`](https://github.com/nyaruka/temba-components/commit/180cf5953f37a1379e3bedd9bc44a6fae275012a)
+
 #### [v0.26.0](https://github.com/nyaruka/temba-components/compare/v0.25.2...v0.26.0)
 
 > 4 March 2022

demo/index.html

@@ -14,13 +14,43 @@
     />
 
     <style>
+
+      .linked {
+        text-decoration: underline;
+        color: blue;
+        cursor: pointer;
+      }
+
       .example {
         border: 0px solid gray;
         padding: 10px;
         max-width: 500px;
-
         --temba-select-selected-font-size: 1em;
+        display:none;
+      }
+
+      temba-dropdown.open {
+        --icon-background: rgb(241,241,241);
+        --icon-circle-size: 0.35em;
       }
+
+      .more {
+        background: rgba(0,0,0,.1);
+        padding: 0.5em
+      }
+
+      .open .more, .more:hover {
+        background: rgba(0,0,0,.3);
+      }
+
+      temba-tabs *, temba-tab * {
+        opacity: 0;
+      }
+
+      temba-tabs:defined *, temba-tab:defined * {
+        opacity: 1;
+      }
+
     </style>
     <script type="module">
       import '../out-tsc/temba-modules.js';
@@ -46,6 +76,34 @@
       groups="/static/api/groups.json"
     ></temba-store>
 
+    <temba-tabs>
+
+      <temba-tab name="Chats" icon="message-square">
+        Chat content
+      </temba-tab>
+
+      <temba-tab name="Details" icon="list">
+        Details content
+      </temba-tab>
+
+      <temba-tab name="Log" icon="log">
+       Log content
+      </temba-tab>
+
+    </temba-tabs>
+
+
+    <div class="example" style="margin: 10px; background: #ccc; border-radius:6px;">
+      <temba-dropdown>
+        <div style="display:inline-block" slot="toggle">
+          <temba-icon name="chevron-down" size="1.3" clickable></temba-icon>
+        </div>
+
+        <div slot="dropdown" style="width:250px; padding:0.5em 1em">
+          <a href="http://google.com">Google</a>
+        </div>
+      </temba-dropdown>
+    </div>
     <div class="example">
       <temba-omnibox
         placeholder="Contacts or Groups"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatnonprofits-nfp/temba-components",
-  "version": "0.26.1",
+  "version": "0.26.2",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <[email protected]>",
   "main": "dist/index.js",
@@ -37,8 +37,8 @@
     "highlight.js": "^10.7.1",
     "image-size": "^0.9.7",
     "leaflet": "1.5.1",
-    "lit-element": "^2.0.1",
-    "lit-flatpickr": "^0.2.2",
+    "lit": "2.2.0",
+    "lit-flatpickr": "^0.3",
     "lit-html": "^1.0.0",
     "marked": "4.0.10",
     "remarkable": "^2.0.1",
@@ -49,7 +49,7 @@
     "@open-wc/building-rollup": "^1.0.0",
     "@open-wc/demoing-storybook": "2.4.7",
     "@open-wc/eslint-config": "4.2.0",
-    "@open-wc/testing": "^2.0.0",
+    "@open-wc/testing": "3.1.2",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@types/leaflet": "1.4.4",
     "@types/node": "13.11.1",
@@ -58,7 +58,7 @@
     "@typescript-eslint/parser": "4.0.0",
     "@web/dev-server": "^0.0.12",
     "@web/test-runner": "^0.7.41",
-    "@web/test-runner-puppeteer": "^0.9.3",
+    "@web/test-runner-puppeteer": "0.10.5",
     "auto-changelog": "^1.16.2",
     "concurrently": "^5.1.0",
     "deepmerge": "^4.2.2",
@@ -80,7 +80,7 @@
     "rollup-plugin-copy": "^3.4.0",
     "sinon": "^9.2.4",
     "tslib": "^1.11.0",
-    "typescript": "~4.0.3"
+    "typescript": "4.6.2"
   },
   "eslintConfig": {
     "extends": [
@@ -106,6 +106,8 @@
   },
   "resolutions": {
     "trim": "^0.0.3",
-    "prismjs": "^1.23.0"
+    "prismjs": "^1.23.0",
+    "lit-element": "^3",
+    "lit-html": "^2"
   }
 }

src/FormElement.ts

@@ -1,5 +1,5 @@
 import { RapidElement } from './RapidElement';
-import { property } from 'lit-element';
+import { property } from 'lit/decorators';
 
 /**
  * FormElement is a component that appends a hidden input (outside of

src/RapidElement.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 import { CustomEventType } from './interfaces';
 
 export interface EventHandler {

src/alert/Alert.ts

@@ -1,4 +1,5 @@
-import { css, html, LitElement, property, TemplateResult } from 'lit-element';
+import { css, html, LitElement, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
 
 export class Alert extends LitElement {
   static get styles() {
@@ -9,11 +10,10 @@ export class Alert extends LitElement {
 
       .temba-alert {
         color: rgba(0, 0, 0, 0.8);
-        padding: 0.65em 1em;
+        padding: 0.65rem 1rem;
         border: 1px solid rgba(0, 0, 0, 0.35);
         border-left: 10px solid rgba(0, 0, 0, 0.35);
         border-radius: var(--curvature-widget);
-        font-size: 14px;
         box-shadow: var(--shadow);
       }
 

src/aliaseditor/AliasEditor.ts

@@ -1,10 +1,12 @@
-import { css, html, LitElement, property, TemplateResult } from 'lit-element';
+import { css, html, LitElement, TemplateResult } from 'lit';
 import { FeatureProperties } from '../interfaces';
 import { getUrl, postJSON, WebResponse } from '../utils';
 import { TextInput } from '../textinput/TextInput';
 import { styleMap } from 'lit-html/directives/style-map';
 import { FormElement } from '../FormElement';
 
+import { property } from 'lit/decorators';
+
 export class AliasEditor extends LitElement {
   static get styles() {
     return css`

src/anchor/Anchor.ts

@@ -1,4 +1,5 @@
-import { LitElement, TemplateResult, html, css, property } from 'lit-element';
+import { LitElement, TemplateResult, html, css } from 'lit';
+import { property } from 'lit/decorators';
 
 export class Anchor extends LitElement {
   static get styles() {

src/button/Button.ts

@@ -1,6 +1,8 @@
-import { LitElement, TemplateResult, html, css, property } from 'lit-element';
+import { LitElement, TemplateResult, html, css } from 'lit';
 import { getClasses } from '../utils';
 
+import { property } from 'lit/decorators';
+
 export class Button extends LitElement {
   static get styles() {
     return css`

src/charcount/CharCount.ts

@@ -1,7 +1,8 @@
-import { css, html, property, TemplateResult } from 'lit-element';
+import { css, html, TemplateResult } from 'lit';
 import { RapidElement } from '../RapidElement';
 import { splitSMS } from '../sms';
 import { getExtendedCharacters } from './helpers';
+import { property } from 'lit/decorators';
 
 export class CharCount extends RapidElement {
   static get styles() {

src/checkbox/Checkbox.ts

@@ -1,5 +1,6 @@
-import { TemplateResult, html, css, property } from 'lit-element';
+import { TemplateResult, html, css } from 'lit';
 import { FormElement } from '../FormElement';
+import { property } from 'lit/decorators';
 
 export class Checkbox extends FormElement {
   static get styles() {
@@ -96,6 +97,7 @@ export class Checkbox extends FormElement {
 
   public click(): void {
     this.handleClick();
+    super.click();
   }
 
   public render(): TemplateResult {

src/completion/Completion.ts

@@ -1,4 +1,5 @@
-import { TemplateResult, css, property, html } from 'lit-element';
+import { TemplateResult, css, html } from 'lit';
+import { property } from 'lit/decorators';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { TextInput } from '../textinput/TextInput';
 import {

src/completion/helpers.ts

@@ -1,5 +1,6 @@
-import { html, directive, Part, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'lit';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { directive, Directive, Part, PartInfo, PartType } from 'lit/directive';
 import ExcellentParser, { Expression } from './ExcellentParser';
 import {
   CompletionOption,
@@ -38,9 +39,34 @@ const sessionParser = new ExcellentParser('@', [
   'resume',
 ]);
 
-export const renderMarkdown = directive((contents: string) => (part: Part) => {
-  part.setValue(unsafeHTML(md.render(contents)));
-});
+// Class-based directive API
+export class RenderMarkdown extends Directive {
+  // State stored in class field
+  value: string | undefined;
+  constructor(partInfo: PartInfo) {
+    super(partInfo);
+    // When necessary, validate part in constructor using `part.type`
+    if (partInfo.type !== PartType.CHILD) {
+      throw new Error('renderMarkdown only supports child expressions');
+    }
+  }
+  // Optional: override update to perform any direct DOM manipulation
+  // DirectiveParameters<this>
+  update(part: Part, [initialValue]: any) {
+    /* Any imperative updates to DOM/parts would go here */
+    return this.render(initialValue);
+  }
+  // Do SSR-compatible rendering (arguments are passed from call site)
+  render(initialValue: string) {
+    // Previous state available on class field
+    if (this.value === undefined) {
+      this.value = initialValue;
+    }
+    return html`${unsafeHTML(md.render(this.value))}`;
+  }
+}
+
+export const renderMarkdown = directive(RenderMarkdown);
 
 export const renderCompletionOption = (
   option: CompletionOption,