@nyaruka/temba-components 0.81.0 → 0.82.0

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

@@ -15,6 +15,7 @@ export class TabPane extends RapidElement {
         this.focusedName = false;
         this.index = -1;
         this.refresh = '';
+        this.tabs = [];
     }
     static get styles() {
         return css `
@@ -209,6 +210,10 @@ export class TabPane extends RapidElement {
       .check {
         margin-left: 0.4em;
       }
+
+      .pane {
+        display: flex;
+      }
     `;
     }
     handleTabClick(event) {
@@ -217,31 +222,35 @@ export class TabPane extends RapidElement {
         event.stopPropagation();
         this.requestUpdate('index');
     }
+    handleSlotChange() {
+        const tabs = [];
+        for (const t of this.children) {
+            if (t.tagName === 'TEMBA-TAB') {
+                const tab = t;
+                tabs.push(tab);
+            }
+        }
+        this.tabs = tabs;
+    }
+    firstUpdated(changes) {
+        super.firstUpdated(changes);
+        this.shadowRoot.addEventListener('slotchange', this.handleSlotChange.bind(this));
+    }
     updated(changedProperties) {
         super.updated(changedProperties);
-        if (changedProperties.has('index')) {
-            const tabs = this.getTabs();
-            if (tabs.length > this.index) {
-                for (let i = 0; i < tabs.length; i++) {
-                    const tab = tabs[i];
-                    tab.selected = i == this.index;
-                    if (tab.selected) {
-                        tab.style.display = 'flex';
-                    }
-                    else {
-                        tab.style.display = 'none';
-                    }
-                }
-            }
+        if (changedProperties.has('index') || changedProperties.has('tabs')) {
+            this.tabs.forEach((tab, index) => {
+                tab.selected = index == this.index;
+            });
             this.fireEvent(CustomEventType.ContextChanged);
         }
         // if our current tab is hidden, select the first visible one
-        if (this.index > -1) {
-            const tabs = this.getTabs();
-            if (this.getTab(this.index).hidden) {
-                for (let i = 0; i < tabs.length; i++) {
-                    const tab = this.getTab(i);
-                    if (!tab.hidden) {
+        if (this.index > this.tabs.length) {
+            const tab = this.tabs[this.index];
+            if (tab && tab.hidden) {
+                for (let i = 0; i < this.tabs.length; i++) {
+                    const other = this.tabs[i];
+                    if (other && !other.hidden) {
                         this.index = i;
                         return;
                     }
@@ -249,27 +258,30 @@ export class TabPane extends RapidElement {
             }
         }
     }
+    setTabDetails(index, details) {
+        if (index < this.tabs.length) {
+            const tab = this.tabs[index];
+            tab.count = details.count;
+            tab.hidden = details.hidden;
+            this.requestUpdate();
+        }
+        else {
+            // not ready yet, set the tab details later
+            setTimeout(() => {
+                this.setTabDetails(index, details);
+            }, 100);
+        }
+    }
     getCurrentTab() {
-        return this.getTabs()[this.index];
+        return this.tabs[this.index];
     }
     getTab(index) {
-        return this.getTabs()[index];
+        return this.tabs[index];
     }
     handleTabContentChanged() {
         this.requestUpdate();
     }
-    getTabs() {
-        const tabs = [];
-        for (const t of this.children) {
-            if (t.tagName === 'TEMBA-TAB') {
-                const tab = t;
-                tabs.push(tab);
-            }
-        }
-        return tabs;
-    }
     render() {
-        const tabs = this.getTabs();
         return html `
       ${this.bottom
             ? html `<div
@@ -292,7 +304,7 @@ export class TabPane extends RapidElement {
             focusedname: this.focusedName,
         })}"
       >
-        ${tabs.map((tab, index) => html `
+        ${this.tabs.map((tab, index) => html `
             <div
               @click=${this.handleTabClick}
               data-index=${index}
@@ -365,4 +377,7 @@ __decorate([
 __decorate([
     property({ type: String })
 ], TabPane.prototype, "refresh", void 0);
+__decorate([
+    property({ type: Array, attribute: false })
+], TabPane.prototype, "tabs", void 0);
 //# sourceMappingURL=TabPane.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabPane.js","sourceRoot":"","sources":["../../../src/tabpane/TabPane.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, 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  }\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  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 updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('index')) {\n      const tabs = this.getTabs();\n      if (tabs.length > this.index) {\n        for (let i = 0; i < tabs.length; i++) {\n          const tab = tabs[i];\n          tab.selected = i == this.index;\n          if (tab.selected) {\n            tab.style.display = 'flex';\n          } else {\n            tab.style.display = 'none';\n          }\n        }\n      }\n      this.fireEvent(CustomEventType.ContextChanged);\n    }\n\n    // if our current tab is hidden, select the first visible one\n    if (this.index > -1) {\n      const tabs = this.getTabs();\n      if (this.getTab(this.index).hidden) {\n        for (let i = 0; i < tabs.length; i++) {\n          const tab = this.getTab(i);\n          if (!tab.hidden) {\n            this.index = i;\n            return;\n          }\n        }\n      }\n    }\n  }\n\n  public getCurrentTab(): Tab {\n    return this.getTabs()[this.index];\n  }\n\n  public getTab(index: number): Tab {\n    return this.getTabs()[index];\n  }\n\n  public handleTabContentChanged() {\n    this.requestUpdate();\n  }\n\n  public getTabs(): Tab[] {\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    return tabs;\n  }\n\n  public render(): TemplateResult {\n    const tabs = this.getTabs();\n\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        ${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"]}
+{"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"]}

package/package.json

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

package/src/select/Select.ts

@@ -508,6 +508,75 @@ export class Select extends FormElement {
 
   private lruCache = lru(20, 60000);
 
+  public handleSlotChange() {
+    if (this.staticOptions.length === 0) {
+      for (const child of this.children) {
+        if (child.tagName === 'TEMBA-OPTION') {
+          const option: any = {};
+          for (const attribute of child.attributes) {
+            option[attribute.name] = attribute.value;
+          }
+          this.staticOptions.push(option);
+
+          if (
+            child.getAttribute('selected') !== null ||
+            this.getValue(option) == this.value
+          ) {
+            if (this.getAttribute('multi') !== null) {
+              this.addValue(option);
+            } else {
+              this.setValues([option]);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  public firstUpdated(changedProperties: any) {
+    super.firstUpdated(changedProperties);
+    this.anchorElement = this.shadowRoot.querySelector('.select-container');
+    this.anchorExpressions = this.shadowRoot.querySelector('#anchor');
+    this.shadowRoot.addEventListener(
+      'slotchange',
+      this.handleSlotChange.bind(this)
+    );
+
+    this.handleSlotChange();
+    if (this.values.length === 0 && (!this.placeholder || this.value)) {
+      if (this.staticOptions.length == 0 && this.endpoint) {
+        const value = this.value;
+        // see if we need fetch to select an option
+        fetchResults(this.endpoint).then((results: any) => {
+          if (results && results.length > 0) {
+            if (value) {
+              // if we started with a value, see if we can find it in the results
+              const existing = results.find(option => {
+                return this.getValue(option) === value;
+              });
+
+              if (existing) {
+                this.setValues([existing]);
+                return;
+              }
+            }
+            this.setValues([results[0]]);
+          }
+        });
+      } else {
+        if (this.getAttribute('multi') !== null) {
+          this.addValue(this.staticOptions[0]);
+        } else {
+          this.setValues([this.staticOptions[0]]);
+        }
+      }
+    }
+
+    if (this.searchable && this.staticOptions.length === 0) {
+      this.quietMillis = 200;
+    }
+  }
+
   public updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
 
@@ -1111,70 +1180,6 @@ export class Select extends FormElement {
     ];
   }
 
-  public firstUpdated(changedProperties: any) {
-    super.firstUpdated(changedProperties);
-
-    this.anchorElement = this.shadowRoot.querySelector('.select-container');
-    this.anchorExpressions = this.shadowRoot.querySelector('#anchor');
-
-    // wait until children are created before adding our static options
-    const value = this.value;
-    window.setTimeout(() => {
-      for (const child of this.children) {
-        if (child.tagName === 'TEMBA-OPTION') {
-          const option: any = {};
-          for (const attribute of child.attributes) {
-            option[attribute.name] = attribute.value;
-          }
-          this.staticOptions.push(option);
-
-          if (
-            child.getAttribute('selected') !== null ||
-            this.getValue(option) == this.value
-          ) {
-            if (this.getAttribute('multi') !== null) {
-              this.addValue(option);
-            } else {
-              this.setValues([option]);
-            }
-          }
-        }
-      }
-
-      if (this.values.length === 0 && (!this.placeholder || value)) {
-        if (this.staticOptions.length == 0 && this.endpoint) {
-          // see if we need to auto select the first item but need to fetch it
-          fetchResults(this.endpoint).then((results: any) => {
-            if (results && results.length > 0) {
-              if (value) {
-                // if we started with a value, see if we can find it in the results
-                const existing = results.find(option => {
-                  return this.getValue(option) === value;
-                });
-
-                if (existing) {
-                  this.setValues([existing]);
-                  return;
-                }
-              }
-              this.setValues([results[0]]);
-            }
-          });
-        } else {
-          if (this.getAttribute('multi') !== null) {
-            this.addValue(this.staticOptions[0]);
-          } else {
-            this.setValues([this.staticOptions[0]]);
-          }
-        }
-      }
-
-      if (this.searchable && this.staticOptions.length === 0) {
-        this.quietMillis = 200;
-      }
-    }, 100);
-  }
-
   private handleArrowClick(event: MouseEvent): void {
     if (this.visibleOptions.length > 0) {
       this.visibleOptions = [];
@@ -1317,8 +1322,7 @@ export class Select extends FormElement {
         .hideErrors=${this.hideErrors}
         ?disabled=${this.disabled}
       >
-  
-      
+        <slot></slot>
         <div class="wrapper-bg">
         <div
           tabindex="0"

package/src/tabpane/Tab.ts

@@ -7,20 +7,14 @@ export class Tab extends RapidElement {
   static get styles() {
     return css`
       :host {
-        display: flex;
+        display: none;
         flex-direction: column;
-        flex-grow: 1;  
         min-height: 0;
-      }      
-      
-      slot {
-        // display: none;
-      
+      }
 
-      slot.selected {
-        // display: flex;
-        // flex-direction: column;
-        // flex-grow: 1;
+      :host(.selected) {
+        display: flex;
+        flex-grow: 1;
       }
     `;
   }
@@ -52,6 +46,15 @@ export class Tab extends RapidElement {
   @property({ type: Boolean })
   checked = false;
 
+  public updated(
+    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.updated(changes);
+    if (changes.has('selected')) {
+      this.classList.toggle('selected', this.selected);
+    }
+  }
+
   public hasBadge() {
     return this.count > 0;
   }

package/src/tabpane/TabPane.ts

@@ -1,4 +1,4 @@
-import { css, html, TemplateResult } from 'lit';
+import { css, html, PropertyValueMap, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
@@ -199,6 +199,10 @@ export class TabPane extends RapidElement {
       .check {
         margin-left: 0.4em;
       }
+
+      .pane {
+        display: flex;
+      }
     `;
   }
 
@@ -222,6 +226,9 @@ export class TabPane extends RapidElement {
   @property({ type: String })
   refresh = '';
 
+  @property({ type: Array, attribute: false })
+  tabs: Tab[] = [];
+
   private handleTabClick(event: MouseEvent): void {
     this.index = parseInt(
       (event.currentTarget as HTMLDivElement).dataset.index
@@ -231,31 +238,43 @@ export class TabPane extends RapidElement {
     this.requestUpdate('index');
   }
 
+  public handleSlotChange() {
+    const tabs: Tab[] = [];
+    for (const t of this.children) {
+      if (t.tagName === 'TEMBA-TAB') {
+        const tab = t as Tab;
+        tabs.push(tab);
+      }
+    }
+    this.tabs = tabs;
+  }
+
+  public firstUpdated(
+    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.firstUpdated(changes);
+    this.shadowRoot.addEventListener(
+      'slotchange',
+      this.handleSlotChange.bind(this)
+    );
+  }
+
   public updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
-    if (changedProperties.has('index')) {
-      const tabs = this.getTabs();
-      if (tabs.length > this.index) {
-        for (let i = 0; i < tabs.length; i++) {
-          const tab = tabs[i];
-          tab.selected = i == this.index;
-          if (tab.selected) {
-            tab.style.display = 'flex';
-          } else {
-            tab.style.display = 'none';
-          }
-        }
-      }
+    if (changedProperties.has('index') || changedProperties.has('tabs')) {
+      this.tabs.forEach((tab, index) => {
+        tab.selected = index == this.index;
+      });
       this.fireEvent(CustomEventType.ContextChanged);
     }
 
     // if our current tab is hidden, select the first visible one
-    if (this.index > -1) {
-      const tabs = this.getTabs();
-      if (this.getTab(this.index).hidden) {
-        for (let i = 0; i < tabs.length; i++) {
-          const tab = this.getTab(i);
-          if (!tab.hidden) {
+    if (this.index > this.tabs.length) {
+      const tab = this.tabs[this.index];
+      if (tab && tab.hidden) {
+        for (let i = 0; i < this.tabs.length; i++) {
+          const other = this.tabs[i];
+          if (other && !other.hidden) {
             this.index = i;
             return;
           }
@@ -264,32 +283,36 @@ export class TabPane extends RapidElement {
     }
   }
 
+  public setTabDetails(
+    index: number,
+    details: { count: number; hidden: boolean }
+  ) {
+    if (index < this.tabs.length) {
+      const tab = this.tabs[index];
+      tab.count = details.count;
+      tab.hidden = details.hidden;
+      this.requestUpdate();
+    } else {
+      // not ready yet, set the tab details later
+      setTimeout(() => {
+        this.setTabDetails(index, details);
+      }, 100);
+    }
+  }
+
   public getCurrentTab(): Tab {
-    return this.getTabs()[this.index];
+    return this.tabs[this.index];
   }
 
   public getTab(index: number): Tab {
-    return this.getTabs()[index];
+    return this.tabs[index];
   }
 
   public handleTabContentChanged() {
     this.requestUpdate();
   }
 
-  public getTabs(): Tab[] {
-    const tabs: Tab[] = [];
-    for (const t of this.children) {
-      if (t.tagName === 'TEMBA-TAB') {
-        const tab = t as Tab;
-        tabs.push(tab);
-      }
-    }
-    return tabs;
-  }
-
   public render(): TemplateResult {
-    const tabs = this.getTabs();
-
     return html`
       ${this.bottom
         ? html`<div
@@ -312,7 +335,7 @@ export class TabPane extends RapidElement {
           focusedname: this.focusedName,
         })}"
       >
-        ${tabs.map(
+        ${this.tabs.map(
           (tab, index) => html`
             <div
               @click=${this.handleTabClick}