@nyaruka/temba-components 0.27.2 → 0.28.0

package/CHANGELOG.md

@@ -4,6 +4,15 @@ 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.28.0](https://github.com/nyaruka/temba-components/compare/v0.27.2...v0.28.0)
+
+> 6 July 2022
+
+- Add collapsible tab names [`#178`](https://github.com/nyaruka/temba-components/pull/178)
+- Make contact tickets a list [`#179`](https://github.com/nyaruka/temba-components/pull/179)
+- Update demo index, add slider test placeholder [`023606d`](https://github.com/nyaruka/temba-components/commit/023606d053f35c23919f868e7b53279f5af56b96)
+- Update README.md [`66285a3`](https://github.com/nyaruka/temba-components/commit/66285a3f0cf2620add4261acf3a8e85480f24647)
+
 #### [v0.27.2](https://github.com/nyaruka/temba-components/compare/v0.27.1...v0.27.2)
 
 > 2 July 2022

package/README.md

@@ -33,7 +33,8 @@ To view the interactive demo, use start.
 ## Testing
 
 All tests live under [/test](test). When running tests, some tests capture screenshots for pixel
-comparision under [/screenshots](screenshots/truth).
+comparision under [/screenshots](screenshots/truth). Running tests requires that you have Chromium
+installed.
 
 ```bash
 % yarn test

package/demo/index.html

@@ -26,7 +26,6 @@
         padding: 10px;
         max-width: 500px;
         --temba-select-selected-font-size: 1em;
-        display:none;
       }
 
       temba-dropdown.open {
@@ -43,6 +42,13 @@
         background: rgba(0,0,0,.3);
       }
 
+      body {
+        background: #f3f3f3;
+      }
+      temba-tabs {
+        margin: 2em;
+      }
+
       temba-tabs *, temba-tab * {
         opacity: 0;
       }
@@ -51,6 +57,42 @@
         opacity: 1;
       }
 
+      temba-tab {
+        padding: 1em;
+      }
+
+      .dropdown {
+        padding: 2em;
+      }
+
+      .dropdown .title {
+        font-weight: 400;
+        margin-bottom: 0.5em;
+      }
+
+      .dropdown .item {
+        padding: 0.5em;
+      }
+
+      .header {
+        margin-bottom:1em;
+        font-size: 2em;
+        font-weight: 400;
+        color: #777;
+        display: inline;
+      }
+
+      temba-dropdown {
+        position: relative;
+        display:inline-block;
+        margin:0em 0.5em;
+      }
+
+      temba-slider{ 
+        margin-top: 1em;
+      }
+
+
     </style>
     <script type="module">
       import '../out-tsc/temba-modules.js';
@@ -83,141 +125,148 @@
       groups="/static/api/groups.json"
     ></temba-store>
 
-    <temba-tabs>
+    <temba-dropdown>
+      <div style="display:inline-block; margin-bottom:1em;" slot="toggle">
+        <temba-icon name="menu" size="1.3" clickable></temba-icon>
+      </div>        
+      <div slot="dropdown" class="dropdown" style="width:250px; padding:0.5em 1em;">
+        <div class="item">
+          <div class="title">Check this out!</div>
+          <div class="details">temba-menu lets you do little popup menus like this.</div>
+        </div>
+      </div>
+    </temba-dropdown>
 
-      <temba-tab name="Chats" icon="message-square">
-        <div onclick="storeTest();">Click me!</div>
-      </temba-tab>
+    <div class="header">temba-components</div>
 
-      <temba-tab name="Details" icon="list">
-        Details content
-      </temba-tab>
+    <temba-tabs>
+      <temba-tab name="temba-slider" icon="sliders">
 
-      <temba-tab name="Log" icon="log">
-       Log content
-      </temba-tab>
 
-    </temba-tabs>
+        <div class="example">
+          With Range
+          <temba-slider value="50" min="0" max="100" range></temba-slider>
+        </div>
 
+        <div class="example">
+          Without Range
+          <temba-slider value="50" min="0" max="100"></temba-slider>
+        </div>
 
+      </temba-tab>
+      <temba-tab name="temba-select" icon="chevron-down">
+
+        <div class="example">
+          <temba-select
+            placeholder="Select a color"
+            info_text="Some colors are very dangerous, choose wisely"
+            onchange="handleColorChange(event)"
+          >
+            <temba-option name="Red" value="0"></temba-option>
+            <temba-option name="Green" value="1"></temba-option>
+            <temba-option name="Blue" value="2"></temba-option>
+          </temba-select>
+        </div>
+    
+        <div class="example">
+          <temba-select placeholder="Select a color" clearable>
+            <temba-option name="Red" value="0"></temba-option>
+            <temba-option name="Green" value="1"></temba-option>
+            <temba-option name="Blue" value="2"></temba-option>
+          </temba-select>
+        </div>
+    
+        <div class="example">
+          <temba-select
+            placeholder="Select a color"
+            expressions="message"
+            values='[{"name":"Red","value":"0"}]'
+            searchable
+            multi
+          >
+            <temba-option name="Red" value="0"></temba-option>
+            <temba-option name="Green" value="1"></temba-option>
+            <temba-option name="Blue" value="2"></temba-option>
+          </temba-select>
+        </div>
     
-    <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 class="example">
+          <temba-select
+            name="Color"
+            label="Color"
+            help_text="I'm not really enabled at the moment"
+            placeholder="Select a color"
+            expressions="message"
+            values='[{"name":"Red","value":"0"}]'
+            searchable
+            multi
+            disabled
+          >
+            <temba-option name="Red" value="0"></temba-option>
+            <temba-option name="Green" value="1"></temba-option>
+            <temba-option name="Blue" value="2"></temba-option>
+          </temba-select>
+        </div>
+    
+        <div class="example">
+          <script>
+            function toggleSelect(evt) {
+              document.getElementById('select-toggle').disabled = !evt.currentTarget
+                .checked;
+            }
+          </script>
+          <div style="display: flex; align-items: center">
+            <temba-checkbox onchange="toggleSelect(event)" checked></temba-checkbox>
+            <temba-select
+              style="margin-left: 10px"
+              id="select-toggle"
+              placeholder="Select a color"
+              expressions="message"
+            >
+              <temba-option name="Red" value="0"></temba-option>
+              <temba-option name="Green" value="1"></temba-option>
+              <temba-option name="Blue" value="2"></temba-option>
+            </temba-select>
+          </div>
         </div>
         
-        <div slot="dropdown" style="width:250px; padding:0.5em 1em">
-          <a href="http://google.com">Google</a>
+      </temba-tab>
+
+      <temba-tab name="temba-textinput" icon="edit">
+    
+        <div class="example">
+          <temba-textinput value="plain text"></temba-textinput>
         </div>
-      </temba-dropdown>
-    </div>
-    <div class="example">
-      <temba-omnibox
-        placeholder="Contacts or Groups"
-        label="Recipients"
-        help_text="This is the helpful friendly book"
-        endpoint="/contact/omnibox/?v=2"
-        groups
-        contacts
-      ></temba-omnibox>
-    </div>
-    <div class="example">
-      <temba-checkbox label="you betcha" checked></temba-checkbox>
-    </div>
-
-    <div class="example">
-      <temba-textinput value="plain text"></temba-textinput>
-    </div>
-
-    <div class="example">
-      <temba-completion value="you complete me @cont"></temba-completion>
-    </div>
-
-    <div class="example">
-      <temba-select
-        placeholder="Select a color"
-        info_text="Some colors are very dangerous, choose wisely"
-        onchange="handleColorChange(event)"
-      >
-        <temba-option name="Red" value="0"></temba-option>
-        <temba-option name="Green" value="1"></temba-option>
-        <temba-option name="Blue" value="2"></temba-option>
-      </temba-select>
-    </div>
-
-    <div class="example">
-      <temba-select placeholder="Select a color" clearable>
-        <temba-option name="Red" value="0"></temba-option>
-        <temba-option name="Green" value="1"></temba-option>
-        <temba-option name="Blue" value="2"></temba-option>
-      </temba-select>
-    </div>
-
-    <div class="example">
-      <temba-select
-        placeholder="Select a color"
-        expressions="message"
-        values='[{"name":"Red","value":"0"}]'
-        searchable
-        multi
-      >
-        <temba-option name="Red" value="0"></temba-option>
-        <temba-option name="Green" value="1"></temba-option>
-        <temba-option name="Blue" value="2"></temba-option>
-      </temba-select>
-    </div>
-
-    <div class="example">
-      <temba-select
-        name="Color"
-        label="Color"
-        help_text="I'm not really enabled at the moment"
-        placeholder="Select a color"
-        expressions="message"
-        values='[{"name":"Red","value":"0"}]'
-        searchable
-        multi
-        disabled
-      >
-        <temba-option name="Red" value="0"></temba-option>
-        <temba-option name="Green" value="1"></temba-option>
-        <temba-option name="Blue" value="2"></temba-option>
-      </temba-select>
-    </div>
-
-    <div class="example">
-      <script>
-        function toggleSelect(evt) {
-          document.getElementById('select-toggle').disabled = !evt.currentTarget
-            .checked;
-        }
-      </script>
-      <div style="display: flex; align-items: center">
-        <temba-checkbox onchange="toggleSelect(event)" checked></temba-checkbox>
-        <temba-select
-          style="margin-left: 10px"
-          id="select-toggle"
-          placeholder="Select a color"
-          expressions="message"
-        >
-          <temba-option name="Red" value="0"></temba-option>
-          <temba-option name="Green" value="1"></temba-option>
-          <temba-option name="Blue" value="2"></temba-option>
-        </temba-select>
-      </div>
-    </div>
-
-    <div class="example">
-      <temba-textinput
-        name="start"
-        label="Start Time"
-        help_text="This is something you should think long and hard about"
-        placeholder="Put something down, for real"
-        value="2020-11-28 15:03"
-        clearable
-        datetimepicker
-      ></temba-textinput>
-    </div>
+    
+        <div class="example">
+          <temba-completion value="you complete me @cont"></temba-completion>
+        </div>
+    
+        <div class="example">
+          <temba-textinput
+            name="start"
+            label="Start Time"
+            help_text="This is something you should think long and hard about"
+            placeholder="Put something down, for real"
+            value="2020-11-28 15:03"
+            clearable
+            datetimepicker
+          ></temba-textinput>
+        </div>
+
+        <div class="example">
+          <temba-completion counter="temba-charcount" value="This is a GSM charcounter in a textarea" gsm textarea></temba-completion>
+          <temba-charcount text='count this text'></temba-charcount>
+        </div>
+      </temba-tab>
+
+      <temba-tab name="other" icon="list">
+        <div class="example">
+          <temba-checkbox label="Check this out" checked></temba-checkbox>
+        </div>
+
+      </temba-tab>
+
+    </temba-tabs>
   </body>
 </html>

package/dist/{956247ac.js → 13934682.js}

@@ -4011,7 +4011,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
           <slot name="dropdown"></slot>
         </div>
       </div>
-    `}}t([it({type:Boolean})],Wa.prototype,"open",void 0),t([it({type:Number})],Wa.prototype,"arrowSize",void 0),t([it({type:Number})],Wa.prototype,"arrowOffset",void 0),t([it({type:Number})],Wa.prototype,"offsetX",void 0),t([it({type:Number})],Wa.prototype,"offsetY",void 0);class Ga extends tt{constructor(){super(...arguments),this.index=0}static get styles(){return r`
+    `}}t([it({type:Boolean})],Wa.prototype,"open",void 0),t([it({type:Number})],Wa.prototype,"arrowSize",void 0),t([it({type:Number})],Wa.prototype,"arrowOffset",void 0),t([it({type:Number})],Wa.prototype,"offsetX",void 0),t([it({type:Number})],Wa.prototype,"offsetY",void 0);class Ga extends tt{constructor(){super(...arguments),this.collapses=!1,this.index=0}static get styles(){return r`
       :host {
         display: flex;
         flex-direction: column;
@@ -4023,6 +4023,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
       }
 
       .tab {
+        user-select: none;
         padding: 0.5em 1em;
         margin: 0em 0em;
         cursor: pointer;
@@ -4034,10 +4035,39 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
         border: 0px solid rgba(0, 0, 0, 0.45);
         color: var(--color-text-dark);
         --icon-color: var(--color-text-dark);
+        white-space: nowrap;
+      }
+
+      .tab.hidden {
+        display: none;
       }
 
       .tab temba-icon {
+      }
+
+      .tab .name {
+        margin-left: 0.4em;
+        max-width: 80px;
         margin-right: 0.4em;
+        overflow: hidden;
+        transition: max-width 500ms ease-in-out;
+      }
+
+      .tab .badge {
+        margin-left: 0.4em;
+      }
+
+      @media (max-width: 900px) {
+        .collapses .tab .name {
+          max-width: 0px;
+          margin: 0;
+        }
+      }
+
+      @media (max-width: 600px) {
+        .collapses .tab .badge {
+          display: none;
+        }
       }
 
       .tab.selected {
@@ -4062,7 +4092,6 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
       }
 
       .badge {
-        margin-left: 0.4em;
       }
 
       .count {
@@ -4081,16 +4110,18 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
         color: #fff;
       }
     `}handleTabClick(t){this.index=parseInt(t.currentTarget.dataset.index),this.requestUpdate("index"),this.fireEvent(de.ContextChanged)}updated(t){if(super.updated(t),t.has("index")&&this.children.length>this.index)for(let t=0;t<this.children.length;t++){const e=this.children[t];e.selected=t==this.index,e.selected?e.style.display="flex":e.style.display="none"}}getTab(t){return this.children.item(t)}render(){const t=[];for(const e of this.children)t.push(e);return O`
-      <div class="tabs">
+      <div
+        class="tabs ${Gt({tabs:!0,collapses:this.collapses})}"
+      >
         ${t.map(((t,e)=>O`
             <div
               @click=${this.handleTabClick}
               data-index=${e}
-              class="tab ${e==this.index?"selected":""} ${t.notify?"notify":""}"
+              class="${Gt({tab:!0,selected:e==this.index,hidden:t.hidden,notify:t.notify})}"
               style="${t.selectionColor&&e==this.index?`color:${t.selectionColor};--icon-color:${t.selectionColor};`:""} ${t.selectionBackground&&e==this.index?`background-color:${t.selectionBackground};`:""}"
             >
               ${t.icon?O`<temba-icon name=${t.icon} />`:null}
-              ${t.name}
+              <div class="name">${t.name}</div>
               ${t.hasBadge()?O`
                     <div class="badge">
                       ${t.count>0?O`<div class="count">${t.count}</div>`:null}
@@ -4102,7 +4133,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
       <div class="pane ${0===this.index?"first":null}">
         <slot></slot>
       </div>
-    `}}t([it({type:Number})],Ga.prototype,"index",void 0);class Ya extends tt{constructor(){super(...arguments),this.selected=!1,this.notify=!1,this.count=0}static get styles(){return r`
+    `}}t([it({type:Boolean})],Ga.prototype,"collapses",void 0),t([it({type:Number})],Ga.prototype,"index",void 0);class Ya extends tt{constructor(){super(...arguments),this.selected=!1,this.notify=!1,this.hidden=!1,this.count=0}static get styles(){return r`
       :host {
         display: flex;
         flex-direction: column;
@@ -4121,7 +4152,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
       }
     `}hasBadge(){return this.count>0}render(){return O`<slot
       class="${Gt({selected:this.selected})}"
-    ></slot> `}}t([it({type:String})],Ya.prototype,"name",void 0),t([it({type:String})],Ya.prototype,"icon",void 0),t([it({type:String})],Ya.prototype,"selectionColor",void 0),t([it({type:String})],Ya.prototype,"selectionBackground",void 0),t([it({type:Boolean})],Ya.prototype,"selected",void 0),t([it({type:Boolean})],Ya.prototype,"notify",void 0),t([it({type:Number})],Ya.prototype,"count",void 0);class Ka extends X{static get styles(){return r`
+    ></slot> `}}t([it({type:String})],Ya.prototype,"name",void 0),t([it({type:String})],Ya.prototype,"icon",void 0),t([it({type:String})],Ya.prototype,"selectionColor",void 0),t([it({type:String})],Ya.prototype,"selectionBackground",void 0),t([it({type:Boolean})],Ya.prototype,"selected",void 0),t([it({type:Boolean})],Ya.prototype,"notify",void 0),t([it({type:Boolean})],Ya.prototype,"hidden",void 0),t([it({type:Number})],Ya.prototype,"count",void 0);class Ka extends X{static get styles(){return r`
       :host {
         display: inline-block;
       }
@@ -4618,17 +4649,16 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
           ${this.data.map((t=>this.renderEvent(t)))}
         `:O`<slot name="empty"></slot>`}}t([it({type:String})],nl.prototype,"contact",void 0),t([it({type:Object,attribute:!1})],nl.prototype,"data",void 0),t([it({type:String})],nl.prototype,"lang_weekly",void 0),t([it({type:String})],nl.prototype,"lang_daily",void 0),t([it({type:String})],nl.prototype,"lang_once",void 0);class ol extends ga{static get styles(){return r`
       :host {
-        background: rgba(0, 0, 0, 0.6);
-        color: #fff;
-        --icon-color: #fff;
-        border-radius: var(--curvature);
+        padding: 1em;
       }
 
       :hover {
-        background: rgba(0, 0, 0, 0.9);
-        border-radius: var(--curvature);
-        transition: background 200ms ease-in-out, padding 200ms ease-in-out;
+      }
+
+      .ticket:hover {
         cursor: pointer;
+        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),
+          0 0 0px 2px var(--color-link-primary);
       }
 
       .tickets {
@@ -4661,26 +4691,19 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
       }
 
       .ticket > div {
-        padding: 1em;
-      }
-
-      .ticket .action {
-        background: rgba(0, 0, 0, 0.1);
-        border-top-right-radius: var(--curvature);
-        border-bottom-right-radius: var(--curvature);
-        padding: 1.5em;
-        --icon-color: rgba(0, 0, 0, 0.4);
-        white-space: nowrap;
+        padding: 0.5em 1em;
+        pointer-events: none;
       }
 
-      .open .action {
-        background: rgba(0, 0, 0, 0.1);
+      .status {
+        --icon-color: #999;
       }
 
-      .closed .action {
-        background: #fff;
+      .ticket.closed {
+        background: #f9f9f9;
+        color: #888;
       }
-    `}prepareData(t){return t&&t.length&&t.sort(((t,e)=>new Date(t.opened_on).getTime()-new Date(e.opened_on).getTime())),t}updated(t){super.updated(t),t.has("contact")&&(this.contact?this.url=`/api/v2/tickets.json?contact=${this.contact}`:this.url=null)}renderTicket(t){const e=t.status===ue.Open?t.opened_on:t.closed_on;return O`
+    `}prepareData(t){return t&&t.length&&t.sort(((t,e)=>t.status==ue.Open&&e.status==ue.Closed?-1:e.status==ue.Open&&t.status==ue.Closed?1:t.status==ue.Closed&&e.status==ue.Closed?new Date(e.closed_on).getTime()-new Date(t.closed_on).getTime():new Date(e.opened_on).getTime()-new Date(t.opened_on).getTime())),t}updated(t){super.updated(t),t.has("contact")&&(this.contact?this.url=`/api/v2/tickets.json?contact=${this.contact}`:this.url=null)}renderTicket(t){const e=t.status===ue.Open?t.opened_on:t.closed_on;return O`
       <div
         class="ticket ${t.status}"
         href="/ticket/all/open/${t.uuid}"
@@ -4695,47 +4718,31 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
           </temba-tip>
         </div>
 
-        ${t.status===ue.Open?O`
-              <div class="action">
-                <temba-icon name="check" size="1.5" clickable></temba-icon>
-              </div>
-            `:O`
-              <div class="action">
-                <temba-icon name="check" size="1.5"></temba-icon>
-              </div>
-            `}
+        ${t.status===ue.Closed?O`<div class="status">
+              <temba-icon name="check"></temba-icon>
+            </div>`:null}
       </div>
-    `}render(){if(this.data&&this.data.length>0){const t=this.data.find((t=>t.status==ue.Open));if(t)return O`
-          <div
-            class="tickets"
-            href="/ticket/all/open/${t.uuid}"
-            onclick="goto(event)"
-          >
-            <div style="flex-grow:1"></div>
-            <temba-icon name="agent" style="pointer-events: none;"></temba-icon>
-            <div class="count" style="pointer-events: none;">
-              ${this.data.filter((t=>t.status===ue.Open)).length}
-            </div>
-          </div>
-        `}}}t([it({type:String})],ol.prototype,"contact",void 0),t([it({type:Object,attribute:!1})],ol.prototype,"data",void 0);class rl extends ot{constructor(){super(...arguments),this.min=0,this.max=100,this.circleX=0,this.grabbed=!1,this.left=0,this.gap=0}static get styles(){return r`
+    `}render(){if(this.data&&this.data.length>0){const t=this.data.map((t=>this.renderTicket(t)));return O`${t}`}return O`<slot name="empty"></slot>`}}t([it({type:String})],ol.prototype,"contact",void 0),t([it({type:Object,attribute:!1})],ol.prototype,"data",void 0);class rl extends ot{constructor(){super(...arguments),this.range=!1,this.min=0,this.max=100,this.circleX=0,this.grabbed=!1}static get styles(){return r`
       :host {
         display: block;
       }
 
       .track {
-        height: 0.1em;
-        border: 12px solid #fff;
+        height: 2px;
+        border-top: 0.5em solid #fff;
+        border-bottom: 0.5em solid #fff;
         background: #ddd;
+        flex-grow: 1;
       }
 
       .circle {
-        margin-top: 0.4em;
-        margin-left: 1em;
+        margin-bottom: -1.05em;
+        margin-left: -0.5em;
         width: 0.75em;
         height: 0.75em;
         border: 2px solid #999;
         border-radius: 999px;
-        position: absolute;
+        position: relative;
         background: #fff;
         box-shadow: 0 0 0 4px rgb(255, 255, 255);
         transition: transform 200ms ease-in-out;
@@ -4750,10 +4757,6 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
         cursor: pointer;
       }
 
-      .grabbed .circle {
-        // border-color: #777;
-      }
-
       .grabbed .circle {
         border-color: var(--color-primary-dark);
         background: #fff;
@@ -4762,14 +4765,30 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
       .grabbed .circle {
         transform: scale(1.2);
       }
-    `}firstUpdated(t){super.firstUpdated(t),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this.left=Math.round(this.getBoundingClientRect().left);const e=this.shadowRoot.querySelector(".circle").clientWidth-4;this.left=Math.round(this.getBoundingClientRect().left+e),this.gap=.035*this.offsetWidth}updated(t){if(t.has("value")){const t=parseInt(this.value)/this.max,e=this.offsetWidth-this.gap;this.updateCircle(e*t)}}updateValue(t){const e=(t.pageX-this.left)/(this.offsetWidth-this.gap);this.value=""+Math.max(this.min,Math.min(Math.round(this.max*e),this.max))}handleMouseMove(t){this.grabbed&&this.updateValue(t)}handleTrackDown(t){this.grabbed=!0,document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp),document.querySelector("html").classList.add("dragging"),this.updateValue(t),this.requestUpdate()}handleMouseUp(t){this.grabbed=!1,this.updateValue(t),this.requestUpdate(),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp),document.querySelector("html").classList.remove("dragging")}updateCircle(t){const e=this.shadowRoot.querySelector(".circle");this.circleX=Math.round(Math.min(this.offsetWidth-this.gap,Math.max(t+e.offsetWidth/2,this.gap))),this.requestUpdate()}render(){return O` <div class="${Gt({grabbed:this.grabbed})}">
+
+      .wrapper {
+        display: flex;
+        align-items: center;
+      }
+
+      .pre,
+      .post {
+        font-size: 0.9em;
+        color: #999;
+        padding: 0em 1em;
+      }
+    `}firstUpdated(t){super.firstUpdated(t),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this)}updated(t){t.has("value")&&this.updateCircle()}updateValue(t){const e=this.shadowRoot.querySelector(".track"),i=(t.pageX-e.offsetLeft)/e.offsetWidth,n=(this.max-this.min)*i+this.min;this.value=""+Math.max(this.min,Math.min(Math.round(n),this.max))}handleMouseMove(t){this.grabbed&&this.updateValue(t)}handleTrackDown(t){this.grabbed=!0,document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp),document.querySelector("html").classList.add("dragging"),this.updateValue(t),this.requestUpdate()}handleMouseUp(t){this.grabbed=!1,this.updateValue(t),this.requestUpdate(),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp),document.querySelector("html").classList.remove("dragging")}updateCircle(){const t=this.shadowRoot.querySelector(".track"),e=this.shadowRoot.querySelector(".pre"),i=this.max-this.min,n=(parseInt(this.value)-this.min)/i,o=t.offsetWidth*n;this.circleX=o+(e?e.offsetWidth:0),this.requestUpdate()}render(){return O` <div class="${Gt({grabbed:this.grabbed})}">
       <div
         style=${ut({left:this.circleX+"px"})}
         class="circle"
         @mousedown=${this.handleTrackDown}
       ></div>
-      <div class="track" @mousedown=${this.handleTrackDown}></div>
-    </div>`}}function sl(t,e){window.customElements.get(t)||window.customElements.define(t,e)}t([it({type:Number})],rl.prototype,"min",void 0),t([it({type:Number})],rl.prototype,"max",void 0),sl("temba-anchor",Va),sl("temba-alert",Ia),sl("temba-store",dr),sl("temba-textinput",Ht),sl("temba-completion",ea),sl("temba-checkbox",rt),sl("temba-select",ta),sl("temba-options",pr),sl("temba-loading",sa),sl("temba-button",oa),sl("temba-omnibox",Fa),sl("temba-tip",Za),sl("temba-contact-name",Ja),sl("temba-contact-field",tl),sl("temba-contact-fields",Qa),sl("temba-urn",Xa),sl("temba-field",ra),sl("temba-dialog",na),sl("temba-modax",ia),sl("temba-charcount",fa),sl("temba-contact-history",Aa),sl("temba-contact-chat",ya),sl("temba-contact-details",Pa),sl("temba-ticket-list",Oa),sl("temba-list",La),sl("temba-label",Ka),sl("temba-menu",Ua),sl("temba-contact-search",Na),sl("temba-icon",za),sl("temba-dropdown",Wa),sl("temba-tabs",Ga),sl("temba-tab",Ya),sl("temba-contact-groups",class extends va{static get styles(){return r`
+      <div class="wrapper">
+        ${this.range?O`<div class="pre">${this.min}</div>`:null}
+        <div class="track" @mousedown=${this.handleTrackDown}></div>
+        ${this.range?O`<div class="post">${this.max}</div>`:null}
+      </div>
+    </div>`}}function sl(t,e){window.customElements.get(t)||window.customElements.define(t,e)}t([it({type:Boolean})],rl.prototype,"range",void 0),t([it({type:Number})],rl.prototype,"min",void 0),t([it({type:Number})],rl.prototype,"max",void 0),sl("temba-anchor",Va),sl("temba-alert",Ia),sl("temba-store",dr),sl("temba-textinput",Ht),sl("temba-completion",ea),sl("temba-checkbox",rt),sl("temba-select",ta),sl("temba-options",pr),sl("temba-loading",sa),sl("temba-button",oa),sl("temba-omnibox",Fa),sl("temba-tip",Za),sl("temba-contact-name",Ja),sl("temba-contact-field",tl),sl("temba-contact-fields",Qa),sl("temba-urn",Xa),sl("temba-field",ra),sl("temba-dialog",na),sl("temba-modax",ia),sl("temba-charcount",fa),sl("temba-contact-history",Aa),sl("temba-contact-chat",ya),sl("temba-contact-details",Pa),sl("temba-ticket-list",Oa),sl("temba-list",La),sl("temba-label",Ka),sl("temba-menu",Ua),sl("temba-contact-search",Na),sl("temba-icon",za),sl("temba-dropdown",Wa),sl("temba-tabs",Ga),sl("temba-tab",Ya),sl("temba-contact-groups",class extends va{static get styles(){return r`
       temba-label {
         margin: 0.3em;
       }