@nyaruka/temba-components 0.27.2 → 0.28.0
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 +9 -0
- package/README.md +2 -1
- package/demo/index.html +176 -127
- package/dist/{956247ac.js → 13934682.js} +82 -63
- package/dist/index.js +82 -63
- package/dist/sw.js +1 -1
- package/dist/sw.js.map +1 -1
- package/dist/templates/components-body.html +1 -1
- package/dist/templates/components-head.html +1 -1
- package/out-tsc/src/contacts/ContactTickets.js +34 -49
- package/out-tsc/src/contacts/ContactTickets.js.map +1 -1
- package/out-tsc/src/slider/TembaSlider.js +42 -25
- package/out-tsc/src/slider/TembaSlider.js.map +1 -1
- package/out-tsc/src/tabpane/Tab.js +4 -0
- package/out-tsc/src/tabpane/Tab.js.map +1 -1
- package/out-tsc/src/tabpane/TabPane.js +45 -6
- package/out-tsc/src/tabpane/TabPane.js.map +1 -1
- package/out-tsc/test/temba-slider.test.js +11 -0
- package/out-tsc/test/temba-slider.test.js.map +1 -0
- package/package.json +1 -1
- package/src/contacts/ContactTickets.ts +43 -53
- package/src/slider/TembaSlider.ts +43 -32
- package/src/tabpane/Tab.ts +3 -0
- package/src/tabpane/TabPane.ts +44 -6
- package/stories/temba-checkbox.stories.md +2 -12
- package/test/temba-slider.test.ts +11 -0
package/dist/index.js
CHANGED
|
@@ -4011,7 +4011,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
|
|
|
4011
4011
|
<slot name="dropdown"></slot>
|
|
4012
4012
|
</div>
|
|
4013
4013
|
</div>
|
|
4014
|
-
`}}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`
|
|
4014
|
+
`}}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`
|
|
4015
4015
|
:host {
|
|
4016
4016
|
display: flex;
|
|
4017
4017
|
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
|
|
|
4023
4023
|
}
|
|
4024
4024
|
|
|
4025
4025
|
.tab {
|
|
4026
|
+
user-select: none;
|
|
4026
4027
|
padding: 0.5em 1em;
|
|
4027
4028
|
margin: 0em 0em;
|
|
4028
4029
|
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
|
|
|
4034
4035
|
border: 0px solid rgba(0, 0, 0, 0.45);
|
|
4035
4036
|
color: var(--color-text-dark);
|
|
4036
4037
|
--icon-color: var(--color-text-dark);
|
|
4038
|
+
white-space: nowrap;
|
|
4039
|
+
}
|
|
4040
|
+
|
|
4041
|
+
.tab.hidden {
|
|
4042
|
+
display: none;
|
|
4037
4043
|
}
|
|
4038
4044
|
|
|
4039
4045
|
.tab temba-icon {
|
|
4046
|
+
}
|
|
4047
|
+
|
|
4048
|
+
.tab .name {
|
|
4049
|
+
margin-left: 0.4em;
|
|
4050
|
+
max-width: 80px;
|
|
4040
4051
|
margin-right: 0.4em;
|
|
4052
|
+
overflow: hidden;
|
|
4053
|
+
transition: max-width 500ms ease-in-out;
|
|
4054
|
+
}
|
|
4055
|
+
|
|
4056
|
+
.tab .badge {
|
|
4057
|
+
margin-left: 0.4em;
|
|
4058
|
+
}
|
|
4059
|
+
|
|
4060
|
+
@media (max-width: 900px) {
|
|
4061
|
+
.collapses .tab .name {
|
|
4062
|
+
max-width: 0px;
|
|
4063
|
+
margin: 0;
|
|
4064
|
+
}
|
|
4065
|
+
}
|
|
4066
|
+
|
|
4067
|
+
@media (max-width: 600px) {
|
|
4068
|
+
.collapses .tab .badge {
|
|
4069
|
+
display: none;
|
|
4070
|
+
}
|
|
4041
4071
|
}
|
|
4042
4072
|
|
|
4043
4073
|
.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
|
|
|
4062
4092
|
}
|
|
4063
4093
|
|
|
4064
4094
|
.badge {
|
|
4065
|
-
margin-left: 0.4em;
|
|
4066
4095
|
}
|
|
4067
4096
|
|
|
4068
4097
|
.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
|
|
|
4081
4110
|
color: #fff;
|
|
4082
4111
|
}
|
|
4083
4112
|
`}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`
|
|
4084
|
-
<div
|
|
4113
|
+
<div
|
|
4114
|
+
class="tabs ${Gt({tabs:!0,collapses:this.collapses})}"
|
|
4115
|
+
>
|
|
4085
4116
|
${t.map(((t,e)=>O`
|
|
4086
4117
|
<div
|
|
4087
4118
|
@click=${this.handleTabClick}
|
|
4088
4119
|
data-index=${e}
|
|
4089
|
-
class="
|
|
4120
|
+
class="${Gt({tab:!0,selected:e==this.index,hidden:t.hidden,notify:t.notify})}"
|
|
4090
4121
|
style="${t.selectionColor&&e==this.index?`color:${t.selectionColor};--icon-color:${t.selectionColor};`:""} ${t.selectionBackground&&e==this.index?`background-color:${t.selectionBackground};`:""}"
|
|
4091
4122
|
>
|
|
4092
4123
|
${t.icon?O`<temba-icon name=${t.icon} />`:null}
|
|
4093
|
-
|
|
4124
|
+
<div class="name">${t.name}</div>
|
|
4094
4125
|
${t.hasBadge()?O`
|
|
4095
4126
|
<div class="badge">
|
|
4096
4127
|
${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
|
|
|
4102
4133
|
<div class="pane ${0===this.index?"first":null}">
|
|
4103
4134
|
<slot></slot>
|
|
4104
4135
|
</div>
|
|
4105
|
-
`}}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`
|
|
4136
|
+
`}}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`
|
|
4106
4137
|
:host {
|
|
4107
4138
|
display: flex;
|
|
4108
4139
|
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
|
|
|
4121
4152
|
}
|
|
4122
4153
|
`}hasBadge(){return this.count>0}render(){return O`<slot
|
|
4123
4154
|
class="${Gt({selected:this.selected})}"
|
|
4124
|
-
></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`
|
|
4155
|
+
></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`
|
|
4125
4156
|
:host {
|
|
4126
4157
|
display: inline-block;
|
|
4127
4158
|
}
|
|
@@ -4618,17 +4649,16 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
|
|
|
4618
4649
|
${this.data.map((t=>this.renderEvent(t)))}
|
|
4619
4650
|
`: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`
|
|
4620
4651
|
:host {
|
|
4621
|
-
|
|
4622
|
-
color: #fff;
|
|
4623
|
-
--icon-color: #fff;
|
|
4624
|
-
border-radius: var(--curvature);
|
|
4652
|
+
padding: 1em;
|
|
4625
4653
|
}
|
|
4626
4654
|
|
|
4627
4655
|
:hover {
|
|
4628
|
-
|
|
4629
|
-
|
|
4630
|
-
|
|
4656
|
+
}
|
|
4657
|
+
|
|
4658
|
+
.ticket:hover {
|
|
4631
4659
|
cursor: pointer;
|
|
4660
|
+
box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),
|
|
4661
|
+
0 0 0px 2px var(--color-link-primary);
|
|
4632
4662
|
}
|
|
4633
4663
|
|
|
4634
4664
|
.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
|
|
|
4661
4691
|
}
|
|
4662
4692
|
|
|
4663
4693
|
.ticket > div {
|
|
4664
|
-
padding: 1em;
|
|
4665
|
-
|
|
4666
|
-
|
|
4667
|
-
.ticket .action {
|
|
4668
|
-
background: rgba(0, 0, 0, 0.1);
|
|
4669
|
-
border-top-right-radius: var(--curvature);
|
|
4670
|
-
border-bottom-right-radius: var(--curvature);
|
|
4671
|
-
padding: 1.5em;
|
|
4672
|
-
--icon-color: rgba(0, 0, 0, 0.4);
|
|
4673
|
-
white-space: nowrap;
|
|
4694
|
+
padding: 0.5em 1em;
|
|
4695
|
+
pointer-events: none;
|
|
4674
4696
|
}
|
|
4675
4697
|
|
|
4676
|
-
.
|
|
4677
|
-
|
|
4698
|
+
.status {
|
|
4699
|
+
--icon-color: #999;
|
|
4678
4700
|
}
|
|
4679
4701
|
|
|
4680
|
-
.closed
|
|
4681
|
-
background: #
|
|
4702
|
+
.ticket.closed {
|
|
4703
|
+
background: #f9f9f9;
|
|
4704
|
+
color: #888;
|
|
4682
4705
|
}
|
|
4683
|
-
`}prepareData(t){return t&&t.length&&t.sort(((t,e)=>new Date(t.opened_on).getTime()-new Date(
|
|
4706
|
+
`}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`
|
|
4684
4707
|
<div
|
|
4685
4708
|
class="ticket ${t.status}"
|
|
4686
4709
|
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
|
|
|
4695
4718
|
</temba-tip>
|
|
4696
4719
|
</div>
|
|
4697
4720
|
|
|
4698
|
-
${t.status===ue.
|
|
4699
|
-
<
|
|
4700
|
-
|
|
4701
|
-
</div>
|
|
4702
|
-
`:O`
|
|
4703
|
-
<div class="action">
|
|
4704
|
-
<temba-icon name="check" size="1.5"></temba-icon>
|
|
4705
|
-
</div>
|
|
4706
|
-
`}
|
|
4721
|
+
${t.status===ue.Closed?O`<div class="status">
|
|
4722
|
+
<temba-icon name="check"></temba-icon>
|
|
4723
|
+
</div>`:null}
|
|
4707
4724
|
</div>
|
|
4708
|
-
`}render(){if(this.data&&this.data.length>0){const t=this.data.
|
|
4709
|
-
<div
|
|
4710
|
-
class="tickets"
|
|
4711
|
-
href="/ticket/all/open/${t.uuid}"
|
|
4712
|
-
onclick="goto(event)"
|
|
4713
|
-
>
|
|
4714
|
-
<div style="flex-grow:1"></div>
|
|
4715
|
-
<temba-icon name="agent" style="pointer-events: none;"></temba-icon>
|
|
4716
|
-
<div class="count" style="pointer-events: none;">
|
|
4717
|
-
${this.data.filter((t=>t.status===ue.Open)).length}
|
|
4718
|
-
</div>
|
|
4719
|
-
</div>
|
|
4720
|
-
`}}}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`
|
|
4725
|
+
`}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`
|
|
4721
4726
|
:host {
|
|
4722
4727
|
display: block;
|
|
4723
4728
|
}
|
|
4724
4729
|
|
|
4725
4730
|
.track {
|
|
4726
|
-
height:
|
|
4727
|
-
border:
|
|
4731
|
+
height: 2px;
|
|
4732
|
+
border-top: 0.5em solid #fff;
|
|
4733
|
+
border-bottom: 0.5em solid #fff;
|
|
4728
4734
|
background: #ddd;
|
|
4735
|
+
flex-grow: 1;
|
|
4729
4736
|
}
|
|
4730
4737
|
|
|
4731
4738
|
.circle {
|
|
4732
|
-
margin-
|
|
4733
|
-
margin-left:
|
|
4739
|
+
margin-bottom: -1.05em;
|
|
4740
|
+
margin-left: -0.5em;
|
|
4734
4741
|
width: 0.75em;
|
|
4735
4742
|
height: 0.75em;
|
|
4736
4743
|
border: 2px solid #999;
|
|
4737
4744
|
border-radius: 999px;
|
|
4738
|
-
position:
|
|
4745
|
+
position: relative;
|
|
4739
4746
|
background: #fff;
|
|
4740
4747
|
box-shadow: 0 0 0 4px rgb(255, 255, 255);
|
|
4741
4748
|
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
|
|
|
4750
4757
|
cursor: pointer;
|
|
4751
4758
|
}
|
|
4752
4759
|
|
|
4753
|
-
.grabbed .circle {
|
|
4754
|
-
// border-color: #777;
|
|
4755
|
-
}
|
|
4756
|
-
|
|
4757
4760
|
.grabbed .circle {
|
|
4758
4761
|
border-color: var(--color-primary-dark);
|
|
4759
4762
|
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
|
|
|
4762
4765
|
.grabbed .circle {
|
|
4763
4766
|
transform: scale(1.2);
|
|
4764
4767
|
}
|
|
4765
|
-
|
|
4768
|
+
|
|
4769
|
+
.wrapper {
|
|
4770
|
+
display: flex;
|
|
4771
|
+
align-items: center;
|
|
4772
|
+
}
|
|
4773
|
+
|
|
4774
|
+
.pre,
|
|
4775
|
+
.post {
|
|
4776
|
+
font-size: 0.9em;
|
|
4777
|
+
color: #999;
|
|
4778
|
+
padding: 0em 1em;
|
|
4779
|
+
}
|
|
4780
|
+
`}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})}">
|
|
4766
4781
|
<div
|
|
4767
4782
|
style=${ut({left:this.circleX+"px"})}
|
|
4768
4783
|
class="circle"
|
|
4769
4784
|
@mousedown=${this.handleTrackDown}
|
|
4770
4785
|
></div>
|
|
4771
|
-
<div class="
|
|
4772
|
-
|
|
4786
|
+
<div class="wrapper">
|
|
4787
|
+
${this.range?O`<div class="pre">${this.min}</div>`:null}
|
|
4788
|
+
<div class="track" @mousedown=${this.handleTrackDown}></div>
|
|
4789
|
+
${this.range?O`<div class="post">${this.max}</div>`:null}
|
|
4790
|
+
</div>
|
|
4791
|
+
</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`
|
|
4773
4792
|
temba-label {
|
|
4774
4793
|
margin: 0.3em;
|
|
4775
4794
|
}
|
package/dist/sw.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return t[e]||(r=new Promise(async r=>{if("document"in self){const t=document.createElement("script");t.src=e,document.head.appendChild(t),t.onload=r}else importScripts(e),r()})),r.then(()=>{if(!t[e])throw new Error(`Module ${e} didn’t register its module`);return t[e]})},r=(r,t)=>{Promise.all(r.map(e)).then(e=>t(1===e.length?e[0]:e))},t={require:Promise.resolve(r)};self.define=(r,s,o)=>{t[r]||(t[r]=Promise.resolve().then(()=>{let t={};const n={uri:location.origin+r.slice(1)};return Promise.all(s.map(r=>{switch(r){case"exports":return t;case"module":return n;default:return e(r)}})).then(e=>{const r=o(...e);return t.default||(t.default=r),t})}))}}define("./sw.js",["./workbox-80efdfd1"],(function(e){"use strict";e.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"
|
|
1
|
+
if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return t[e]||(r=new Promise(async r=>{if("document"in self){const t=document.createElement("script");t.src=e,document.head.appendChild(t),t.onload=r}else importScripts(e),r()})),r.then(()=>{if(!t[e])throw new Error(`Module ${e} didn’t register its module`);return t[e]})},r=(r,t)=>{Promise.all(r.map(e)).then(e=>t(1===e.length?e[0]:e))},t={require:Promise.resolve(r)};self.define=(r,s,o)=>{t[r]||(t[r]=Promise.resolve().then(()=>{let t={};const n={uri:location.origin+r.slice(1)};return Promise.all(s.map(r=>{switch(r){case"exports":return t;case"module":return n;default:return e(r)}})).then(e=>{const r=o(...e);return t.default||(t.default=r),t})}))}}define("./sw.js",["./workbox-80efdfd1"],(function(e){"use strict";e.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"13934682.js",revision:"d058c43d45fab47c04a7fda4e4d5b468"},{url:"templates/components-body.html",revision:"0a4d3ead11309d2ebd4933b1c133088b"},{url:"templates/components-head.html",revision:"b2942a83e7e6a7fae344c13f6bbaee8a"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
|
|
2
2
|
//# sourceMappingURL=sw.js.map
|
package/dist/sw.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sw.js","sources":["../../../../../tmp/
|
|
1
|
+
{"version":3,"file":"sw.js","sources":["../../../../../tmp/a0bc0a8acf806973b76b478a2e0f00ee/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n {\n \"url\": \"13934682.js\",\n \"revision\": \"d058c43d45fab47c04a7fda4e4d5b468\"\n },\n {\n \"url\": \"templates/components-body.html\",\n \"revision\": \"0a4d3ead11309d2ebd4933b1c133088b\"\n },\n {\n \"url\": \"templates/components-head.html\",\n \"revision\": \"b2942a83e7e6a7fae344c13f6bbaee8a\"\n }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"k1BAmCoC,CAClC,KACS,uBACK,oCAEd,KACS,0CACK,oCAEd,KACS,0CACK,qCAEb,oBAE2B,IAAIA,kBAAgCC,0BAA2C,iCAG/E,iBAAkB,IAAIC,aAAiC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/
|
|
1
|
+
<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/13934682.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.28.0"</script>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/
|
|
1
|
+
<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/13934682.js" crossorigin="anonymous">
|
|
@@ -7,17 +7,16 @@ export class ContactTickets extends StoreElement {
|
|
|
7
7
|
static get styles() {
|
|
8
8
|
return css `
|
|
9
9
|
:host {
|
|
10
|
-
|
|
11
|
-
color: #fff;
|
|
12
|
-
--icon-color: #fff;
|
|
13
|
-
border-radius: var(--curvature);
|
|
10
|
+
padding: 1em;
|
|
14
11
|
}
|
|
15
12
|
|
|
16
13
|
:hover {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.ticket:hover {
|
|
20
17
|
cursor: pointer;
|
|
18
|
+
box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),
|
|
19
|
+
0 0 0px 2px var(--color-link-primary);
|
|
21
20
|
}
|
|
22
21
|
|
|
23
22
|
.tickets {
|
|
@@ -50,31 +49,34 @@ export class ContactTickets extends StoreElement {
|
|
|
50
49
|
}
|
|
51
50
|
|
|
52
51
|
.ticket > div {
|
|
53
|
-
padding: 1em;
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
.ticket .action {
|
|
57
|
-
background: rgba(0, 0, 0, 0.1);
|
|
58
|
-
border-top-right-radius: var(--curvature);
|
|
59
|
-
border-bottom-right-radius: var(--curvature);
|
|
60
|
-
padding: 1.5em;
|
|
61
|
-
--icon-color: rgba(0, 0, 0, 0.4);
|
|
62
|
-
white-space: nowrap;
|
|
52
|
+
padding: 0.5em 1em;
|
|
53
|
+
pointer-events: none;
|
|
63
54
|
}
|
|
64
55
|
|
|
65
|
-
.
|
|
66
|
-
|
|
56
|
+
.status {
|
|
57
|
+
--icon-color: #999;
|
|
67
58
|
}
|
|
68
59
|
|
|
69
|
-
.closed
|
|
70
|
-
background: #
|
|
60
|
+
.ticket.closed {
|
|
61
|
+
background: #f9f9f9;
|
|
62
|
+
color: #888;
|
|
71
63
|
}
|
|
72
64
|
`;
|
|
73
65
|
}
|
|
74
66
|
prepareData(data) {
|
|
75
67
|
if (data && data.length) {
|
|
76
68
|
data.sort((a, b) => {
|
|
77
|
-
|
|
69
|
+
if (a.status == TicketStatus.Open && b.status == TicketStatus.Closed) {
|
|
70
|
+
return -1;
|
|
71
|
+
}
|
|
72
|
+
if (b.status == TicketStatus.Open && a.status == TicketStatus.Closed) {
|
|
73
|
+
return 1;
|
|
74
|
+
}
|
|
75
|
+
if (a.status == TicketStatus.Closed &&
|
|
76
|
+
b.status == TicketStatus.Closed) {
|
|
77
|
+
return (new Date(b.closed_on).getTime() - new Date(a.closed_on).getTime());
|
|
78
|
+
}
|
|
79
|
+
return (new Date(b.opened_on).getTime() - new Date(a.opened_on).getTime());
|
|
78
80
|
});
|
|
79
81
|
}
|
|
80
82
|
return data;
|
|
@@ -107,39 +109,22 @@ export class ContactTickets extends StoreElement {
|
|
|
107
109
|
</temba-tip>
|
|
108
110
|
</div>
|
|
109
111
|
|
|
110
|
-
${ticket.status === TicketStatus.
|
|
111
|
-
? html
|
|
112
|
-
<
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
`
|
|
116
|
-
: html `
|
|
117
|
-
<div class="action">
|
|
118
|
-
<temba-icon name="check" size="1.5"></temba-icon>
|
|
119
|
-
</div>
|
|
120
|
-
`}
|
|
112
|
+
${ticket.status === TicketStatus.Closed
|
|
113
|
+
? html `<div class="status">
|
|
114
|
+
<temba-icon name="check"></temba-icon>
|
|
115
|
+
</div>`
|
|
116
|
+
: null}
|
|
121
117
|
</div>
|
|
122
118
|
`;
|
|
123
119
|
}
|
|
124
120
|
render() {
|
|
125
121
|
if (this.data && this.data.length > 0) {
|
|
126
|
-
const
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
class="tickets"
|
|
131
|
-
href="/ticket/all/open/${ticket.uuid}"
|
|
132
|
-
onclick="goto(event)"
|
|
133
|
-
>
|
|
134
|
-
<div style="flex-grow:1"></div>
|
|
135
|
-
<temba-icon name="agent" style="pointer-events: none;"></temba-icon>
|
|
136
|
-
<div class="count" style="pointer-events: none;">
|
|
137
|
-
${this.data.filter((ticket) => ticket.status === TicketStatus.Open).length}
|
|
138
|
-
</div>
|
|
139
|
-
</div>
|
|
140
|
-
`;
|
|
141
|
-
}
|
|
122
|
+
const tickets = this.data.map(ticket => {
|
|
123
|
+
return this.renderTicket(ticket);
|
|
124
|
+
});
|
|
125
|
+
return html `${tickets}`;
|
|
142
126
|
}
|
|
127
|
+
return html `<slot name="empty"></slot>`;
|
|
143
128
|
}
|
|
144
129
|
}
|
|
145
130
|
__decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContactTickets.js","sourceRoot":"","sources":["../../../src/contacts/ContactTickets.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAU,YAAY,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,OAAO,cAAe,SAAQ,YAAY;IAO9C,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"ContactTickets.js","sourceRoot":"","sources":["../../../src/contacts/ContactTickets.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { Ticket, TicketStatus } from '../interfaces';\nimport { StoreElement } from '../store/StoreElement';\n\nexport class ContactTickets extends StoreElement {\n @property({ type: String })\n contact: string;\n\n @property({ type: Object, attribute: false })\n data: Ticket[];\n\n static get styles() {\n return css`\n :host {\n padding: 1em;\n }\n\n :hover {\n }\n\n .ticket:hover {\n cursor: pointer;\n box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),\n 0 0 0px 2px var(--color-link-primary);\n }\n\n .tickets {\n display: flex;\n padding: 0.3em 0.8em;\n }\n\n .count {\n margin-left: 0.5em;\n }\n\n .ticket {\n display: flex;\n margin-bottom: 0.5em;\n border-radius: var(--curvature);\n display: flex;\n flex-direction: row;\n align-items: center;\n box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),\n 0 0 0px 1px rgba(0, 0, 0, 0.02);\n }\n\n .ticket .body {\n flex-grow: 1;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n padding: 0.1em;\n }\n\n .ticket > div {\n padding: 0.5em 1em;\n pointer-events: none;\n }\n\n .status {\n --icon-color: #999;\n }\n\n .ticket.closed {\n background: #f9f9f9;\n color: #888;\n }\n `;\n }\n\n prepareData(data: any): any {\n if (data && data.length) {\n data.sort((a: Ticket, b: Ticket) => {\n if (a.status == TicketStatus.Open && b.status == TicketStatus.Closed) {\n return -1;\n }\n\n if (b.status == TicketStatus.Open && a.status == TicketStatus.Closed) {\n return 1;\n }\n\n if (\n a.status == TicketStatus.Closed &&\n b.status == TicketStatus.Closed\n ) {\n return (\n new Date(b.closed_on).getTime() - new Date(a.closed_on).getTime()\n );\n }\n\n return (\n new Date(b.opened_on).getTime() - new Date(a.opened_on).getTime()\n );\n });\n }\n return data;\n }\n\n protected updated(\n changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.updated(changes);\n if (changes.has('contact')) {\n if (this.contact) {\n this.url = `/api/v2/tickets.json?contact=${this.contact}`;\n } else {\n this.url = null;\n }\n }\n }\n\n public renderTicket(ticket: Ticket) {\n const date =\n ticket.status === TicketStatus.Open ? ticket.opened_on : ticket.closed_on;\n return html`\n <div\n class=\"ticket ${ticket.status}\"\n href=\"/ticket/all/open/${ticket.uuid}\"\n onclick=\"goto(event)\"\n >\n <div class=\"topic\">${ticket.topic.name}</div>\n <div class=\"body\">${ticket.body}</div>\n\n <div class=\"date\">\n <temba-tip direction=\"left\" text=${this.store.formatDate(date)}>\n ${this.store.getShortDuration(date)}\n </temba-tip>\n </div>\n\n ${ticket.status === TicketStatus.Closed\n ? html`<div class=\"status\">\n <temba-icon name=\"check\"></temba-icon>\n </div>`\n : null}\n </div>\n `;\n }\n\n public render(): TemplateResult {\n if (this.data && this.data.length > 0) {\n const tickets = this.data.map(ticket => {\n return this.renderTicket(ticket);\n });\n\n return html`${tickets}`;\n }\n\n return html`<slot name=\"empty\"></slot>`;\n }\n}\n"]}
|
|
@@ -7,12 +7,11 @@ import { getClasses } from '../utils';
|
|
|
7
7
|
export class TembaSlider extends FormElement {
|
|
8
8
|
constructor() {
|
|
9
9
|
super(...arguments);
|
|
10
|
+
this.range = false;
|
|
10
11
|
this.min = 0;
|
|
11
12
|
this.max = 100;
|
|
12
13
|
this.circleX = 0;
|
|
13
14
|
this.grabbed = false;
|
|
14
|
-
this.left = 0;
|
|
15
|
-
this.gap = 0;
|
|
16
15
|
}
|
|
17
16
|
static get styles() {
|
|
18
17
|
return css `
|
|
@@ -21,19 +20,21 @@ export class TembaSlider extends FormElement {
|
|
|
21
20
|
}
|
|
22
21
|
|
|
23
22
|
.track {
|
|
24
|
-
height:
|
|
25
|
-
border:
|
|
23
|
+
height: 2px;
|
|
24
|
+
border-top: 0.5em solid #fff;
|
|
25
|
+
border-bottom: 0.5em solid #fff;
|
|
26
26
|
background: #ddd;
|
|
27
|
+
flex-grow: 1;
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
.circle {
|
|
30
|
-
margin-
|
|
31
|
-
margin-left:
|
|
31
|
+
margin-bottom: -1.05em;
|
|
32
|
+
margin-left: -0.5em;
|
|
32
33
|
width: 0.75em;
|
|
33
34
|
height: 0.75em;
|
|
34
35
|
border: 2px solid #999;
|
|
35
36
|
border-radius: 999px;
|
|
36
|
-
position:
|
|
37
|
+
position: relative;
|
|
37
38
|
background: #fff;
|
|
38
39
|
box-shadow: 0 0 0 4px rgb(255, 255, 255);
|
|
39
40
|
transition: transform 200ms ease-in-out;
|
|
@@ -48,10 +49,6 @@ export class TembaSlider extends FormElement {
|
|
|
48
49
|
cursor: pointer;
|
|
49
50
|
}
|
|
50
51
|
|
|
51
|
-
.grabbed .circle {
|
|
52
|
-
// border-color: #777;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
52
|
.grabbed .circle {
|
|
56
53
|
border-color: var(--color-primary-dark);
|
|
57
54
|
background: #fff;
|
|
@@ -60,29 +57,38 @@ export class TembaSlider extends FormElement {
|
|
|
60
57
|
.grabbed .circle {
|
|
61
58
|
transform: scale(1.2);
|
|
62
59
|
}
|
|
60
|
+
|
|
61
|
+
.wrapper {
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.pre,
|
|
67
|
+
.post {
|
|
68
|
+
font-size: 0.9em;
|
|
69
|
+
color: #999;
|
|
70
|
+
padding: 0em 1em;
|
|
71
|
+
}
|
|
63
72
|
`;
|
|
64
73
|
}
|
|
65
74
|
firstUpdated(changes) {
|
|
66
75
|
super.firstUpdated(changes);
|
|
67
76
|
this.handleMouseMove = this.handleMouseMove.bind(this);
|
|
68
77
|
this.handleMouseUp = this.handleMouseUp.bind(this);
|
|
69
|
-
this.left = Math.round(this.getBoundingClientRect().left);
|
|
70
|
-
const circle = this.shadowRoot.querySelector('.circle').clientWidth - 4;
|
|
71
|
-
this.left = Math.round(this.getBoundingClientRect().left + circle);
|
|
72
|
-
this.gap = this.offsetWidth * 0.035;
|
|
73
78
|
}
|
|
74
79
|
updated(changedProperties) {
|
|
75
80
|
if (changedProperties.has('value')) {
|
|
76
|
-
|
|
77
|
-
const total = this.offsetWidth - this.gap;
|
|
78
|
-
this.updateCircle(total * pct);
|
|
81
|
+
this.updateCircle();
|
|
79
82
|
}
|
|
80
83
|
}
|
|
81
84
|
updateValue(evt) {
|
|
82
|
-
const
|
|
83
|
-
const
|
|
85
|
+
const track = this.shadowRoot.querySelector('.track');
|
|
86
|
+
const left = evt.pageX - track.offsetLeft;
|
|
87
|
+
const pct = left / track.offsetWidth;
|
|
88
|
+
const range = this.max - this.min;
|
|
89
|
+
const pctAsValue = range * pct + this.min;
|
|
84
90
|
this.value =
|
|
85
|
-
'' + Math.max(this.min, Math.min(Math.round(
|
|
91
|
+
'' + Math.max(this.min, Math.min(Math.round(pctAsValue), this.max));
|
|
86
92
|
}
|
|
87
93
|
handleMouseMove(evt) {
|
|
88
94
|
if (this.grabbed) {
|
|
@@ -105,9 +111,13 @@ export class TembaSlider extends FormElement {
|
|
|
105
111
|
document.removeEventListener('mouseup', this.handleMouseUp);
|
|
106
112
|
document.querySelector('html').classList.remove('dragging');
|
|
107
113
|
}
|
|
108
|
-
updateCircle(
|
|
109
|
-
const
|
|
110
|
-
|
|
114
|
+
updateCircle() {
|
|
115
|
+
const track = this.shadowRoot.querySelector('.track');
|
|
116
|
+
const pre = this.shadowRoot.querySelector('.pre');
|
|
117
|
+
const range = this.max - this.min;
|
|
118
|
+
const pct = (parseInt(this.value) - this.min) / range;
|
|
119
|
+
const pctAsPixels = track.offsetWidth * pct;
|
|
120
|
+
this.circleX = pctAsPixels + (pre ? pre.offsetWidth : 0);
|
|
111
121
|
this.requestUpdate();
|
|
112
122
|
}
|
|
113
123
|
render() {
|
|
@@ -117,10 +127,17 @@ export class TembaSlider extends FormElement {
|
|
|
117
127
|
class="circle"
|
|
118
128
|
@mousedown=${this.handleTrackDown}
|
|
119
129
|
></div>
|
|
120
|
-
<div class="
|
|
130
|
+
<div class="wrapper">
|
|
131
|
+
${this.range ? html `<div class="pre">${this.min}</div>` : null}
|
|
132
|
+
<div class="track" @mousedown=${this.handleTrackDown}></div>
|
|
133
|
+
${this.range ? html `<div class="post">${this.max}</div>` : null}
|
|
134
|
+
</div>
|
|
121
135
|
</div>`;
|
|
122
136
|
}
|
|
123
137
|
}
|
|
138
|
+
__decorate([
|
|
139
|
+
property({ type: Boolean })
|
|
140
|
+
], TembaSlider.prototype, "range", void 0);
|
|
124
141
|
__decorate([
|
|
125
142
|
property({ type: Number })
|
|
126
143
|
], TembaSlider.prototype, "min", void 0);
|