@nyaruka/temba-components 0.48.2 → 0.48.4

package/CHANGELOG.md

@@ -4,8 +4,23 @@ 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.48.4](https://github.com/nyaruka/temba-components/compare/v0.48.3...v0.48.4)
+
+- Wrap menu targets in links where we have hrefs [`#311`](https://github.com/nyaruka/temba-components/pull/311)
+- Update screenshots [`85d07b1`](https://github.com/nyaruka/temba-components/commit/85d07b1b9200846d4a219127d2e57a9d295e7539)
+
+#### [v0.48.3](https://github.com/nyaruka/temba-components/compare/v0.48.2...v0.48.3)
+
+> 12 April 2023
+
+- Better ticket view on narrow windows [`#310`](https://github.com/nyaruka/temba-components/pull/310)
+- Tweak ticket layout a bit more [`c56ce1c`](https://github.com/nyaruka/temba-components/commit/c56ce1c94e647d4c38d627a7e3ae720aa482e9b2)
+- Updated screenshots [`e20e199`](https://github.com/nyaruka/temba-components/commit/e20e199496501a181c6cf8a2f463dd43e3d27e1b)
+
 #### [v0.48.2](https://github.com/nyaruka/temba-components/compare/v0.48.1...v0.48.2)
 
+> 10 April 2023
+
 - Allow ticket summary to be expanded [`#306`](https://github.com/nyaruka/temba-components/pull/306)
 - compose - switch from array of content_type:url to array of uuid when sending broadcast [`#289`](https://github.com/nyaruka/temba-components/pull/289)
 - - merged main and regenerated screenshots [`aa3a79e`](https://github.com/nyaruka/temba-components/commit/aa3a79e76c3a0e9443aefdca5f52944c76572fbc)

package/dist/{98c8996c.js → 170efbb2.js}

@@ -2857,7 +2857,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
           >
             <div style="flex: 1; color:#333;">
               <div
-                style="font-weight:400;line-height:1.6;border:0px solid purple;"
+                style="font-weight:400;line-height:1.6;display:-webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden;"
               >
                 ${t.name}
               </div>
@@ -3787,6 +3787,11 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         --icon-color: var(--color-link-primary);
       }
 
+      a {
+        text-decoration: none;
+        color: var(--color-text-dark);
+      }
+
       slot[name='header'] {
         display: none;
       }
@@ -3809,7 +3814,8 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
           name="${t.collapsed_icon}"
           class="collapse-icon"
         ></temba-icon>`:null,r=ee({["menu-"+t.id]:!0,"child-selected":n,selected:i,item:!(t.avatar&&0===t.level),avatar:!!t.avatar,inline:t.inline,expanding:this.expanding&&this.expanding===t.id,expanded:this.isExpanded(t),iconless:!o&&!s&&!t.avatar,pressed:this.pressedItem&&this.pressedItem.id==t.id});t.avatar&&(o=xe({name:t.avatar}));const a=D`
-      <div
+      <a
+        href=${ct(t.href?t.href:void 0)}
         id="menu-${t.id}"
         class="${r}"
         @click=${i=>{this.pressedItem=null,this.handleItemClicked(i,t,e)}}
@@ -3839,7 +3845,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
                     `:D`<div class="count"></div>`}`:null}
         </div>
         <div class="right"></div>
-      </div>
+      </a>
     `;return t.popup?D`
         <temba-dropdown offsetx="10" arrowoffset="8" mask>
           <div slot="toggle">${a}</div>
@@ -4841,8 +4847,15 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
           0 0 0px 2px var(--color-link-primary);
       }
 
+      .header {
+        display: flex;
+        flex-direction: row;
+        flex-grow: 1;
+      }
+
       .tickets {
         display: flex;
+        flex-direction: column;
         padding: 0.3em 0.8em;
       }
 
@@ -4853,65 +4866,42 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       .ticket {
         background: #fff;
         display: flex;
+        flex-direction: column;
         margin-bottom: 0.5em;
         border-radius: var(--curvature);
         display: flex;
-        flex-direction: row;
-        align-items: center;
+        flex-direction: column;
+        align-items: stretch;
         box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),
           0 0 0px 1px rgba(0, 0, 0, 0.02);
         transition: all 200ms ease-in-out;
       }
 
-      .ticket .body {
-        flex-grow: 5;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 200px;
-      }
-
       .ticket .topic {
-        flex-grow: 1;
-        white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        margin: 0 0.75em;
-        width: 60px;
-      }
-
-      .ticket.expanded .topic {
-        display: none;
-      }
-
-      .ticket.expanded .topic-expanded {
+        margin: 0.5em 0.75em 0.5em 0.75em;
         display: -webkit-box;
-      }
-
-      .topic-expanded {
-        flex-grow: 1;
-        display: none;
-        -webkit-line-clamp: 1;
         -webkit-box-orient: vertical;
-        overflow: hidden;
-      }
-
-      .ticket.expanded {
-        flex-direction: column-reverse;
-        align-items: stretch;
+        -webkit-line-clamp: 1;
+        flex-grow: 2;
       }
 
-      .ticket.expanded .body {
-        display: block;
-        max-height: 40vh;
+      .ticket .body {
+        max-height: 0px;
         overflow-y: auto;
         -webkit-line-clamp: none;
-        border-top: 1px solid #e6e6e6;
-        // 6px solid #f9f9f9;
-        margin-bottom: 0.5em;
-        padding: 0.5em 1em 0em 1em;
         white-space: normal;
         width: initial;
+        padding: 0.5em 0.75em 0em 0.75em;
+        max-height: 40vh;
+        display: none;
+        margin-bottom: 0.5em;
+        border-top: 1px solid #e6e6e6;
+      }
+
+      .ticket.expanded .body {
+        display: block;
       }
 
       .status {
@@ -4998,16 +4988,16 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       .details {
         display: flex;
         align-items: center;
-        padding: 0.5em 1em;
         flex-shrink: 1;
+        margin-right: 0.5em;
       }
 
       .details .date {
-        padding: 0em 0.75em;
+        padding: 0em 0.5em;
       }
 
       .details .toggle {
-        padding-right: 0.75em;
+        padding-right: 0.5em;
       }
     `}prepareData(t){return t&&t.length&&t.sort(((t,e)=>t.status==bt.Open&&e.status==bt.Closed?-1:e.status==bt.Open&&t.status==bt.Closed?1:t.status==bt.Closed&&e.status==bt.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")||t.has("ticket"))&&(this.contact?this.url=`/api/v2/tickets.json?contact=${this.contact}${this.ticket?"&ticket="+this.ticket:""}`:this.url=null)}renderUser(t){return t?D`<div class="user">
       <div class="avatar">${xe({user:t})}</div>
@@ -5017,98 +5007,98 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         @click=${()=>{this.clickable?this.fireCustomEvent(_t.ButtonClicked,{ticket:t}):this.expandable&&(this.expanded=!this.expanded)}}
         class="ticket ${t.status} ${ee({clickable:this.clickable,expandable:this.expandable,expanded:this.expanded})}"
       >
-        <div class="topic">${t.topic.name}</div>
-        <div class="body">${t.body}</div>
-
-        <div class="details">
-          <div class="topic-expanded">${t.topic.name}</div>
-
-          <div class="date">
-            <temba-date value="${e}" display="duration"></temba-date>
-          </div>
+        <div class="header">
+          <div class="topic">${t.topic.name}</div>
 
-          ${t.status===bt.Closed?D`<div class="reopen">
-                <temba-button
-                  primary
-                  small
-                  name="Reopen"
-                  @click=${e=>{e.preventDefault(),e.stopPropagation(),this.handleReopen(t.uuid)}}
-                ></temba-button>
-              </div>`:D`
-                <div>
-                  <temba-dropdown
-                    drop_align="right"
-                    arrowsize="8"
-                    arrowoffset="-44"
-                    offsety="8"
-                    offsetx=${t.assignee?-42:-28}
-                  >
-                    <div slot="toggle" class="toggle">
-                      ${t.assignee?D`
-                            <div style="font-size:0.5em">
-                              ${xe({name:t.assignee.name,position:"left"})}
-                            </div>
-                          `:D`
-                            <temba-button
-                              name="Assign"
-                              primary
-                              small
-                            ></temba-button>
-                          `}
-                    </div>
+          <div class="details">
+            <div class="date">
+              <temba-date value="${e}" display="duration"></temba-date>
+            </div>
 
-                    <div
-                      slot="dropdown"
-                      class="dropdown"
-                      @click=${t=>{_e(t)}}
+            ${t.status===bt.Closed?D`<div class="reopen">
+                  <temba-button
+                    primary
+                    small
+                    name="Reopen"
+                    @click=${e=>{e.preventDefault(),e.stopPropagation(),this.handleReopen(t.uuid)}}
+                  ></temba-button>
+                </div>`:D`
+                  <div>
+                    <temba-dropdown
+                      drop_align="right"
+                      arrowsize="8"
+                      arrowoffset="-44"
+                      offsety="8"
+                      offsetx=${t.assignee?-42:-28}
                     >
-                      ${t.assignee?D`
-                            <div
-                              class="assigned option-group ${n&&t.assignee.email==n.email?"current-user":""}"
-                            >
-                              ${this.renderUser(i.find((e=>e.email===t.assignee.email)))}
+                      <div slot="toggle" class="toggle">
+                        ${t.assignee?D`
+                              <div style="font-size:0.5em">
+                                ${xe({name:t.assignee.name,position:"left"})}
+                              </div>
+                            `:D`
                               <temba-button
-                                name="Unassign"
+                                name="Assign"
                                 primary
                                 small
-                                @click=${e=>{_e(e),this.handleTicketAssignment(t.uuid,null)}}
                               ></temba-button>
-                            </div>
-                          `:null}
-                      ${!n||t.assignee&&n.email===t.assignee.email?null:D`
-                            <div
-                              class="current-user option-group"
-                              @click=${e=>{_e(e),this.handleTicketAssignment(t.uuid,n.email)}}
-                            >
-                              ${this.renderUser(n)}
-                            </div>
-                          `}
+                            `}
+                      </div>
 
-                      <div class="options option-group">
-                        ${this.store.getAssignableUsers().map((e=>t.assignee&&e.email===t.assignee.email||e.email===this.agent?null:D`<div
-                            @click=${i=>{_e(i),this.handleTicketAssignment(t.uuid,e.email)}}
-                          >
-                            ${this.renderUser(e)}
-                          </div>`))}
+                      <div
+                        slot="dropdown"
+                        class="dropdown"
+                        @click=${t=>{_e(t)}}
+                      >
+                        ${t.assignee?D`
+                              <div
+                                class="assigned option-group ${n&&t.assignee.email==n.email?"current-user":""}"
+                              >
+                                ${this.renderUser(i.find((e=>e.email===t.assignee.email)))}
+                                <temba-button
+                                  name="Unassign"
+                                  primary
+                                  small
+                                  @click=${e=>{_e(e),this.handleTicketAssignment(t.uuid,null)}}
+                                ></temba-button>
+                              </div>
+                            `:null}
+                        ${!n||t.assignee&&n.email===t.assignee.email?null:D`
+                              <div
+                                class="current-user option-group"
+                                @click=${e=>{_e(e),this.handleTicketAssignment(t.uuid,n.email)}}
+                              >
+                                ${this.renderUser(n)}
+                              </div>
+                            `}
+
+                        <div class="options option-group">
+                          ${this.store.getAssignableUsers().map((e=>t.assignee&&e.email===t.assignee.email||e.email===this.agent?null:D`<div
+                              @click=${i=>{_e(i),this.handleTicketAssignment(t.uuid,e.email)}}
+                            >
+                              ${this.renderUser(e)}
+                            </div>`))}
+                        </div>
                       </div>
-                    </div>
-                  </temba-dropdown>
-                </div>
-                <temba-tip
-                  text="Resolve"
-                  position="left"
-                  style="width:1.5em"
-                  class="resolve"
-                >
-                  <temba-icon
-                    size="1.25"
-                    name="${at.check}"
-                    @click=${e=>{e.preventDefault(),e.stopPropagation(),this.handleClose(t.uuid)}}
-                    ?clickable=${open}
-                  />
-                </temba-tip>
-              `}
+                    </temba-dropdown>
+                  </div>
+                  <temba-tip
+                    text="Resolve"
+                    position="left"
+                    style="width:1.5em"
+                    class="resolve"
+                  >
+                    <temba-icon
+                      size="1.25"
+                      name="${at.check}"
+                      @click=${e=>{e.preventDefault(),e.stopPropagation(),this.handleClose(t.uuid)}}
+                      ?clickable=${open}
+                    />
+                  </temba-tip>
+                `}
+          </div>
         </div>
+        <div class="body">${t.body}</div>
       </div>
     `}render(){if(this.data&&this.data.length>0){const t=this.data.map((t=>this.renderTicket(t)));return D`${t}`}return D`<slot name="empty"></slot>`}}t([st({type:String})],gl.prototype,"agent",void 0),t([st({type:String})],gl.prototype,"contact",void 0),t([st({type:String})],gl.prototype,"ticket",void 0),t([st({type:Boolean})],gl.prototype,"clickable",void 0),t([st({type:Boolean})],gl.prototype,"expandable",void 0),t([st({type:Boolean})],gl.prototype,"expanded",void 0),t([st({type:Object,attribute:!1})],gl.prototype,"data",void 0);class vl extends lt{constructor(){super(...arguments),this.range=!1,this.min=0,this.max=100,this.circleX=0,this.grabbed=!1}static get styles(){return r`
       :host {