@nyaruka/temba-components 0.48.2 → 0.48.3

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.
package/CHANGELOG.md CHANGED
@@ -4,8 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
4
4
 
5
5
  Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
6
6
 
7
+ #### [v0.48.3](https://github.com/nyaruka/temba-components/compare/v0.48.2...v0.48.3)
8
+
9
+ - Better ticket view on narrow windows [`#310`](https://github.com/nyaruka/temba-components/pull/310)
10
+ - Tweak ticket layout a bit more [`c56ce1c`](https://github.com/nyaruka/temba-components/commit/c56ce1c94e647d4c38d627a7e3ae720aa482e9b2)
11
+ - Updated screenshots [`e20e199`](https://github.com/nyaruka/temba-components/commit/e20e199496501a181c6cf8a2f463dd43e3d27e1b)
12
+
7
13
  #### [v0.48.2](https://github.com/nyaruka/temba-components/compare/v0.48.1...v0.48.2)
8
14
 
15
+ > 10 April 2023
16
+
9
17
  - Allow ticket summary to be expanded [`#306`](https://github.com/nyaruka/temba-components/pull/306)
10
18
  - compose - switch from array of content_type:url to array of uuid when sending broadcast [`#289`](https://github.com/nyaruka/temba-components/pull/289)
11
19
  - - merged main and regenerated screenshots [`aa3a79e`](https://github.com/nyaruka/temba-components/commit/aa3a79e76c3a0e9443aefdca5f52944c76572fbc)
@@ -2857,7 +2857,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
2857
2857
  >
2858
2858
  <div style="flex: 1; color:#333;">
2859
2859
  <div
2860
- style="font-weight:400;line-height:1.6;border:0px solid purple;"
2860
+ style="font-weight:400;line-height:1.6;display:-webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden;"
2861
2861
  >
2862
2862
  ${t.name}
2863
2863
  </div>
@@ -4841,8 +4841,15 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
4841
4841
  0 0 0px 2px var(--color-link-primary);
4842
4842
  }
4843
4843
 
4844
+ .header {
4845
+ display: flex;
4846
+ flex-direction: row;
4847
+ flex-grow: 1;
4848
+ }
4849
+
4844
4850
  .tickets {
4845
4851
  display: flex;
4852
+ flex-direction: column;
4846
4853
  padding: 0.3em 0.8em;
4847
4854
  }
4848
4855
 
@@ -4853,65 +4860,42 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
4853
4860
  .ticket {
4854
4861
  background: #fff;
4855
4862
  display: flex;
4863
+ flex-direction: column;
4856
4864
  margin-bottom: 0.5em;
4857
4865
  border-radius: var(--curvature);
4858
4866
  display: flex;
4859
- flex-direction: row;
4860
- align-items: center;
4867
+ flex-direction: column;
4868
+ align-items: stretch;
4861
4869
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),
4862
4870
  0 0 0px 1px rgba(0, 0, 0, 0.02);
4863
4871
  transition: all 200ms ease-in-out;
4864
4872
  }
4865
4873
 
4866
- .ticket .body {
4867
- flex-grow: 5;
4868
- white-space: nowrap;
4869
- overflow: hidden;
4870
- text-overflow: ellipsis;
4871
- width: 200px;
4872
- }
4873
-
4874
4874
  .ticket .topic {
4875
- flex-grow: 1;
4876
- white-space: nowrap;
4877
4875
  overflow: hidden;
4878
4876
  text-overflow: ellipsis;
4879
- margin: 0 0.75em;
4880
- width: 60px;
4881
- }
4882
-
4883
- .ticket.expanded .topic {
4884
- display: none;
4885
- }
4886
-
4887
- .ticket.expanded .topic-expanded {
4877
+ margin: 0.5em 0.75em 0.5em 0.75em;
4888
4878
  display: -webkit-box;
4889
- }
4890
-
4891
- .topic-expanded {
4892
- flex-grow: 1;
4893
- display: none;
4894
- -webkit-line-clamp: 1;
4895
4879
  -webkit-box-orient: vertical;
4896
- overflow: hidden;
4897
- }
4898
-
4899
- .ticket.expanded {
4900
- flex-direction: column-reverse;
4901
- align-items: stretch;
4880
+ -webkit-line-clamp: 1;
4881
+ flex-grow: 2;
4902
4882
  }
4903
4883
 
4904
- .ticket.expanded .body {
4905
- display: block;
4906
- max-height: 40vh;
4884
+ .ticket .body {
4885
+ max-height: 0px;
4907
4886
  overflow-y: auto;
4908
4887
  -webkit-line-clamp: none;
4909
- border-top: 1px solid #e6e6e6;
4910
- // 6px solid #f9f9f9;
4911
- margin-bottom: 0.5em;
4912
- padding: 0.5em 1em 0em 1em;
4913
4888
  white-space: normal;
4914
4889
  width: initial;
4890
+ padding: 0.5em 0.75em 0em 0.75em;
4891
+ max-height: 40vh;
4892
+ display: none;
4893
+ margin-bottom: 0.5em;
4894
+ border-top: 1px solid #e6e6e6;
4895
+ }
4896
+
4897
+ .ticket.expanded .body {
4898
+ display: block;
4915
4899
  }
4916
4900
 
4917
4901
  .status {
@@ -4998,16 +4982,16 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
4998
4982
  .details {
4999
4983
  display: flex;
5000
4984
  align-items: center;
5001
- padding: 0.5em 1em;
5002
4985
  flex-shrink: 1;
4986
+ margin-right: 0.5em;
5003
4987
  }
5004
4988
 
5005
4989
  .details .date {
5006
- padding: 0em 0.75em;
4990
+ padding: 0em 0.5em;
5007
4991
  }
5008
4992
 
5009
4993
  .details .toggle {
5010
- padding-right: 0.75em;
4994
+ padding-right: 0.5em;
5011
4995
  }
5012
4996
  `}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">
5013
4997
  <div class="avatar">${xe({user:t})}</div>
@@ -5017,98 +5001,98 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
5017
5001
  @click=${()=>{this.clickable?this.fireCustomEvent(_t.ButtonClicked,{ticket:t}):this.expandable&&(this.expanded=!this.expanded)}}
5018
5002
  class="ticket ${t.status} ${ee({clickable:this.clickable,expandable:this.expandable,expanded:this.expanded})}"
5019
5003
  >
5020
- <div class="topic">${t.topic.name}</div>
5021
- <div class="body">${t.body}</div>
5022
-
5023
- <div class="details">
5024
- <div class="topic-expanded">${t.topic.name}</div>
5025
-
5026
- <div class="date">
5027
- <temba-date value="${e}" display="duration"></temba-date>
5028
- </div>
5004
+ <div class="header">
5005
+ <div class="topic">${t.topic.name}</div>
5029
5006
 
5030
- ${t.status===bt.Closed?D`<div class="reopen">
5031
- <temba-button
5032
- primary
5033
- small
5034
- name="Reopen"
5035
- @click=${e=>{e.preventDefault(),e.stopPropagation(),this.handleReopen(t.uuid)}}
5036
- ></temba-button>
5037
- </div>`:D`
5038
- <div>
5039
- <temba-dropdown
5040
- drop_align="right"
5041
- arrowsize="8"
5042
- arrowoffset="-44"
5043
- offsety="8"
5044
- offsetx=${t.assignee?-42:-28}
5045
- >
5046
- <div slot="toggle" class="toggle">
5047
- ${t.assignee?D`
5048
- <div style="font-size:0.5em">
5049
- ${xe({name:t.assignee.name,position:"left"})}
5050
- </div>
5051
- `:D`
5052
- <temba-button
5053
- name="Assign"
5054
- primary
5055
- small
5056
- ></temba-button>
5057
- `}
5058
- </div>
5007
+ <div class="details">
5008
+ <div class="date">
5009
+ <temba-date value="${e}" display="duration"></temba-date>
5010
+ </div>
5059
5011
 
5060
- <div
5061
- slot="dropdown"
5062
- class="dropdown"
5063
- @click=${t=>{_e(t)}}
5012
+ ${t.status===bt.Closed?D`<div class="reopen">
5013
+ <temba-button
5014
+ primary
5015
+ small
5016
+ name="Reopen"
5017
+ @click=${e=>{e.preventDefault(),e.stopPropagation(),this.handleReopen(t.uuid)}}
5018
+ ></temba-button>
5019
+ </div>`:D`
5020
+ <div>
5021
+ <temba-dropdown
5022
+ drop_align="right"
5023
+ arrowsize="8"
5024
+ arrowoffset="-44"
5025
+ offsety="8"
5026
+ offsetx=${t.assignee?-42:-28}
5064
5027
  >
5065
- ${t.assignee?D`
5066
- <div
5067
- class="assigned option-group ${n&&t.assignee.email==n.email?"current-user":""}"
5068
- >
5069
- ${this.renderUser(i.find((e=>e.email===t.assignee.email)))}
5028
+ <div slot="toggle" class="toggle">
5029
+ ${t.assignee?D`
5030
+ <div style="font-size:0.5em">
5031
+ ${xe({name:t.assignee.name,position:"left"})}
5032
+ </div>
5033
+ `:D`
5070
5034
  <temba-button
5071
- name="Unassign"
5035
+ name="Assign"
5072
5036
  primary
5073
5037
  small
5074
- @click=${e=>{_e(e),this.handleTicketAssignment(t.uuid,null)}}
5075
5038
  ></temba-button>
5076
- </div>
5077
- `:null}
5078
- ${!n||t.assignee&&n.email===t.assignee.email?null:D`
5079
- <div
5080
- class="current-user option-group"
5081
- @click=${e=>{_e(e),this.handleTicketAssignment(t.uuid,n.email)}}
5082
- >
5083
- ${this.renderUser(n)}
5084
- </div>
5085
- `}
5039
+ `}
5040
+ </div>
5086
5041
 
5087
- <div class="options option-group">
5088
- ${this.store.getAssignableUsers().map((e=>t.assignee&&e.email===t.assignee.email||e.email===this.agent?null:D`<div
5089
- @click=${i=>{_e(i),this.handleTicketAssignment(t.uuid,e.email)}}
5090
- >
5091
- ${this.renderUser(e)}
5092
- </div>`))}
5042
+ <div
5043
+ slot="dropdown"
5044
+ class="dropdown"
5045
+ @click=${t=>{_e(t)}}
5046
+ >
5047
+ ${t.assignee?D`
5048
+ <div
5049
+ class="assigned option-group ${n&&t.assignee.email==n.email?"current-user":""}"
5050
+ >
5051
+ ${this.renderUser(i.find((e=>e.email===t.assignee.email)))}
5052
+ <temba-button
5053
+ name="Unassign"
5054
+ primary
5055
+ small
5056
+ @click=${e=>{_e(e),this.handleTicketAssignment(t.uuid,null)}}
5057
+ ></temba-button>
5058
+ </div>
5059
+ `:null}
5060
+ ${!n||t.assignee&&n.email===t.assignee.email?null:D`
5061
+ <div
5062
+ class="current-user option-group"
5063
+ @click=${e=>{_e(e),this.handleTicketAssignment(t.uuid,n.email)}}
5064
+ >
5065
+ ${this.renderUser(n)}
5066
+ </div>
5067
+ `}
5068
+
5069
+ <div class="options option-group">
5070
+ ${this.store.getAssignableUsers().map((e=>t.assignee&&e.email===t.assignee.email||e.email===this.agent?null:D`<div
5071
+ @click=${i=>{_e(i),this.handleTicketAssignment(t.uuid,e.email)}}
5072
+ >
5073
+ ${this.renderUser(e)}
5074
+ </div>`))}
5075
+ </div>
5093
5076
  </div>
5094
- </div>
5095
- </temba-dropdown>
5096
- </div>
5097
- <temba-tip
5098
- text="Resolve"
5099
- position="left"
5100
- style="width:1.5em"
5101
- class="resolve"
5102
- >
5103
- <temba-icon
5104
- size="1.25"
5105
- name="${at.check}"
5106
- @click=${e=>{e.preventDefault(),e.stopPropagation(),this.handleClose(t.uuid)}}
5107
- ?clickable=${open}
5108
- />
5109
- </temba-tip>
5110
- `}
5077
+ </temba-dropdown>
5078
+ </div>
5079
+ <temba-tip
5080
+ text="Resolve"
5081
+ position="left"
5082
+ style="width:1.5em"
5083
+ class="resolve"
5084
+ >
5085
+ <temba-icon
5086
+ size="1.25"
5087
+ name="${at.check}"
5088
+ @click=${e=>{e.preventDefault(),e.stopPropagation(),this.handleClose(t.uuid)}}
5089
+ ?clickable=${open}
5090
+ />
5091
+ </temba-tip>
5092
+ `}
5093
+ </div>
5111
5094
  </div>
5095
+ <div class="body">${t.body}</div>
5112
5096
  </div>
5113
5097
  `}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`
5114
5098
  :host {
package/dist/index.js CHANGED
@@ -2857,7 +2857,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
2857
2857
  >
2858
2858
  <div style="flex: 1; color:#333;">
2859
2859
  <div
2860
- style="font-weight:400;line-height:1.6;border:0px solid purple;"
2860
+ style="font-weight:400;line-height:1.6;display:-webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden;"
2861
2861
  >
2862
2862
  ${t.name}
2863
2863
  </div>
@@ -4841,8 +4841,15 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
4841
4841
  0 0 0px 2px var(--color-link-primary);
4842
4842
  }
4843
4843
 
4844
+ .header {
4845
+ display: flex;
4846
+ flex-direction: row;
4847
+ flex-grow: 1;
4848
+ }
4849
+
4844
4850
  .tickets {
4845
4851
  display: flex;
4852
+ flex-direction: column;
4846
4853
  padding: 0.3em 0.8em;
4847
4854
  }
4848
4855
 
@@ -4853,65 +4860,42 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
4853
4860
  .ticket {
4854
4861
  background: #fff;
4855
4862
  display: flex;
4863
+ flex-direction: column;
4856
4864
  margin-bottom: 0.5em;
4857
4865
  border-radius: var(--curvature);
4858
4866
  display: flex;
4859
- flex-direction: row;
4860
- align-items: center;
4867
+ flex-direction: column;
4868
+ align-items: stretch;
4861
4869
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),
4862
4870
  0 0 0px 1px rgba(0, 0, 0, 0.02);
4863
4871
  transition: all 200ms ease-in-out;
4864
4872
  }
4865
4873
 
4866
- .ticket .body {
4867
- flex-grow: 5;
4868
- white-space: nowrap;
4869
- overflow: hidden;
4870
- text-overflow: ellipsis;
4871
- width: 200px;
4872
- }
4873
-
4874
4874
  .ticket .topic {
4875
- flex-grow: 1;
4876
- white-space: nowrap;
4877
4875
  overflow: hidden;
4878
4876
  text-overflow: ellipsis;
4879
- margin: 0 0.75em;
4880
- width: 60px;
4881
- }
4882
-
4883
- .ticket.expanded .topic {
4884
- display: none;
4885
- }
4886
-
4887
- .ticket.expanded .topic-expanded {
4877
+ margin: 0.5em 0.75em 0.5em 0.75em;
4888
4878
  display: -webkit-box;
4889
- }
4890
-
4891
- .topic-expanded {
4892
- flex-grow: 1;
4893
- display: none;
4894
- -webkit-line-clamp: 1;
4895
4879
  -webkit-box-orient: vertical;
4896
- overflow: hidden;
4897
- }
4898
-
4899
- .ticket.expanded {
4900
- flex-direction: column-reverse;
4901
- align-items: stretch;
4880
+ -webkit-line-clamp: 1;
4881
+ flex-grow: 2;
4902
4882
  }
4903
4883
 
4904
- .ticket.expanded .body {
4905
- display: block;
4906
- max-height: 40vh;
4884
+ .ticket .body {
4885
+ max-height: 0px;
4907
4886
  overflow-y: auto;
4908
4887
  -webkit-line-clamp: none;
4909
- border-top: 1px solid #e6e6e6;
4910
- // 6px solid #f9f9f9;
4911
- margin-bottom: 0.5em;
4912
- padding: 0.5em 1em 0em 1em;
4913
4888
  white-space: normal;
4914
4889
  width: initial;
4890
+ padding: 0.5em 0.75em 0em 0.75em;
4891
+ max-height: 40vh;
4892
+ display: none;
4893
+ margin-bottom: 0.5em;
4894
+ border-top: 1px solid #e6e6e6;
4895
+ }
4896
+
4897
+ .ticket.expanded .body {
4898
+ display: block;
4915
4899
  }
4916
4900
 
4917
4901
  .status {
@@ -4998,16 +4982,16 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
4998
4982
  .details {
4999
4983
  display: flex;
5000
4984
  align-items: center;
5001
- padding: 0.5em 1em;
5002
4985
  flex-shrink: 1;
4986
+ margin-right: 0.5em;
5003
4987
  }
5004
4988
 
5005
4989
  .details .date {
5006
- padding: 0em 0.75em;
4990
+ padding: 0em 0.5em;
5007
4991
  }
5008
4992
 
5009
4993
  .details .toggle {
5010
- padding-right: 0.75em;
4994
+ padding-right: 0.5em;
5011
4995
  }
5012
4996
  `}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">
5013
4997
  <div class="avatar">${xe({user:t})}</div>
@@ -5017,98 +5001,98 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
5017
5001
  @click=${()=>{this.clickable?this.fireCustomEvent(_t.ButtonClicked,{ticket:t}):this.expandable&&(this.expanded=!this.expanded)}}
5018
5002
  class="ticket ${t.status} ${ee({clickable:this.clickable,expandable:this.expandable,expanded:this.expanded})}"
5019
5003
  >
5020
- <div class="topic">${t.topic.name}</div>
5021
- <div class="body">${t.body}</div>
5022
-
5023
- <div class="details">
5024
- <div class="topic-expanded">${t.topic.name}</div>
5025
-
5026
- <div class="date">
5027
- <temba-date value="${e}" display="duration"></temba-date>
5028
- </div>
5004
+ <div class="header">
5005
+ <div class="topic">${t.topic.name}</div>
5029
5006
 
5030
- ${t.status===bt.Closed?D`<div class="reopen">
5031
- <temba-button
5032
- primary
5033
- small
5034
- name="Reopen"
5035
- @click=${e=>{e.preventDefault(),e.stopPropagation(),this.handleReopen(t.uuid)}}
5036
- ></temba-button>
5037
- </div>`:D`
5038
- <div>
5039
- <temba-dropdown
5040
- drop_align="right"
5041
- arrowsize="8"
5042
- arrowoffset="-44"
5043
- offsety="8"
5044
- offsetx=${t.assignee?-42:-28}
5045
- >
5046
- <div slot="toggle" class="toggle">
5047
- ${t.assignee?D`
5048
- <div style="font-size:0.5em">
5049
- ${xe({name:t.assignee.name,position:"left"})}
5050
- </div>
5051
- `:D`
5052
- <temba-button
5053
- name="Assign"
5054
- primary
5055
- small
5056
- ></temba-button>
5057
- `}
5058
- </div>
5007
+ <div class="details">
5008
+ <div class="date">
5009
+ <temba-date value="${e}" display="duration"></temba-date>
5010
+ </div>
5059
5011
 
5060
- <div
5061
- slot="dropdown"
5062
- class="dropdown"
5063
- @click=${t=>{_e(t)}}
5012
+ ${t.status===bt.Closed?D`<div class="reopen">
5013
+ <temba-button
5014
+ primary
5015
+ small
5016
+ name="Reopen"
5017
+ @click=${e=>{e.preventDefault(),e.stopPropagation(),this.handleReopen(t.uuid)}}
5018
+ ></temba-button>
5019
+ </div>`:D`
5020
+ <div>
5021
+ <temba-dropdown
5022
+ drop_align="right"
5023
+ arrowsize="8"
5024
+ arrowoffset="-44"
5025
+ offsety="8"
5026
+ offsetx=${t.assignee?-42:-28}
5064
5027
  >
5065
- ${t.assignee?D`
5066
- <div
5067
- class="assigned option-group ${n&&t.assignee.email==n.email?"current-user":""}"
5068
- >
5069
- ${this.renderUser(i.find((e=>e.email===t.assignee.email)))}
5028
+ <div slot="toggle" class="toggle">
5029
+ ${t.assignee?D`
5030
+ <div style="font-size:0.5em">
5031
+ ${xe({name:t.assignee.name,position:"left"})}
5032
+ </div>
5033
+ `:D`
5070
5034
  <temba-button
5071
- name="Unassign"
5035
+ name="Assign"
5072
5036
  primary
5073
5037
  small
5074
- @click=${e=>{_e(e),this.handleTicketAssignment(t.uuid,null)}}
5075
5038
  ></temba-button>
5076
- </div>
5077
- `:null}
5078
- ${!n||t.assignee&&n.email===t.assignee.email?null:D`
5079
- <div
5080
- class="current-user option-group"
5081
- @click=${e=>{_e(e),this.handleTicketAssignment(t.uuid,n.email)}}
5082
- >
5083
- ${this.renderUser(n)}
5084
- </div>
5085
- `}
5039
+ `}
5040
+ </div>
5086
5041
 
5087
- <div class="options option-group">
5088
- ${this.store.getAssignableUsers().map((e=>t.assignee&&e.email===t.assignee.email||e.email===this.agent?null:D`<div
5089
- @click=${i=>{_e(i),this.handleTicketAssignment(t.uuid,e.email)}}
5090
- >
5091
- ${this.renderUser(e)}
5092
- </div>`))}
5042
+ <div
5043
+ slot="dropdown"
5044
+ class="dropdown"
5045
+ @click=${t=>{_e(t)}}
5046
+ >
5047
+ ${t.assignee?D`
5048
+ <div
5049
+ class="assigned option-group ${n&&t.assignee.email==n.email?"current-user":""}"
5050
+ >
5051
+ ${this.renderUser(i.find((e=>e.email===t.assignee.email)))}
5052
+ <temba-button
5053
+ name="Unassign"
5054
+ primary
5055
+ small
5056
+ @click=${e=>{_e(e),this.handleTicketAssignment(t.uuid,null)}}
5057
+ ></temba-button>
5058
+ </div>
5059
+ `:null}
5060
+ ${!n||t.assignee&&n.email===t.assignee.email?null:D`
5061
+ <div
5062
+ class="current-user option-group"
5063
+ @click=${e=>{_e(e),this.handleTicketAssignment(t.uuid,n.email)}}
5064
+ >
5065
+ ${this.renderUser(n)}
5066
+ </div>
5067
+ `}
5068
+
5069
+ <div class="options option-group">
5070
+ ${this.store.getAssignableUsers().map((e=>t.assignee&&e.email===t.assignee.email||e.email===this.agent?null:D`<div
5071
+ @click=${i=>{_e(i),this.handleTicketAssignment(t.uuid,e.email)}}
5072
+ >
5073
+ ${this.renderUser(e)}
5074
+ </div>`))}
5075
+ </div>
5093
5076
  </div>
5094
- </div>
5095
- </temba-dropdown>
5096
- </div>
5097
- <temba-tip
5098
- text="Resolve"
5099
- position="left"
5100
- style="width:1.5em"
5101
- class="resolve"
5102
- >
5103
- <temba-icon
5104
- size="1.25"
5105
- name="${at.check}"
5106
- @click=${e=>{e.preventDefault(),e.stopPropagation(),this.handleClose(t.uuid)}}
5107
- ?clickable=${open}
5108
- />
5109
- </temba-tip>
5110
- `}
5077
+ </temba-dropdown>
5078
+ </div>
5079
+ <temba-tip
5080
+ text="Resolve"
5081
+ position="left"
5082
+ style="width:1.5em"
5083
+ class="resolve"
5084
+ >
5085
+ <temba-icon
5086
+ size="1.25"
5087
+ name="${at.check}"
5088
+ @click=${e=>{e.preventDefault(),e.stopPropagation(),this.handleClose(t.uuid)}}
5089
+ ?clickable=${open}
5090
+ />
5091
+ </temba-tip>
5092
+ `}
5093
+ </div>
5111
5094
  </div>
5095
+ <div class="body">${t.body}</div>
5112
5096
  </div>
5113
5097
  `}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`
5114
5098
  :host {
package/dist/sw.js CHANGED
@@ -1,2 +1,2 @@
1
- if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const c=e=>o(e,i),l={module:{uri:i},exports:r,require:c};t[i]=Promise.all(n.map((e=>l[e]||c(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"98c8996c.js",revision:"780de512b8bcf0039507acbe9bf68cf7"},{url:"templates/components-body.html",revision:"bf00671a29a6d826be7314f287fd4a65"},{url:"templates/components-head.html",revision:"583dca8df21efb6e3abe149c65a28dcb"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
1
+ if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const l=e=>o(e,i),c={module:{uri:i},exports:r,require:l};t[i]=Promise.all(n.map((e=>c[e]||l(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"1bf3fa94.js",revision:"5218d086a1c5aed78442a599e1301194"},{url:"templates/components-body.html",revision:"d9f5ad935c96a2f0756282133628de23"},{url:"templates/components-head.html",revision:"92c080a30061ddf17ba34c8dc9cfe7c1"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
2
2
  //# sourceMappingURL=sw.js.map