@nyaruka/temba-components 0.117.0 → 0.118.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 +5 -1
- package/demo/index.html +1 -1
- package/dist/temba-components.js +6 -9
- package/dist/temba-components.js.map +1 -1
- package/out-tsc/src/button/Button.js +0 -1
- package/out-tsc/src/button/Button.js.map +1 -1
- package/out-tsc/src/dropdown/Dropdown.js +9 -3
- package/out-tsc/src/dropdown/Dropdown.js.map +1 -1
- package/out-tsc/src/list/TembaMenu.js +5 -6
- package/out-tsc/src/list/TembaMenu.js.map +1 -1
- package/package.json +1 -1
- package/screenshots/truth/menu/menu-focused-with items.png +0 -0
- package/screenshots/truth/menu/menu-refresh-1.png +0 -0
- package/screenshots/truth/menu/menu-refresh-2.png +0 -0
- package/screenshots/truth/menu/menu-root.png +0 -0
- package/screenshots/truth/menu/menu-submenu.png +0 -0
- package/screenshots/truth/menu/menu-tasks-nextup.png +0 -0
- package/screenshots/truth/menu/menu-tasks.png +0 -0
- package/src/button/Button.ts +0 -1
- package/src/dropdown/Dropdown.ts +10 -3
- package/src/list/TembaMenu.ts +5 -6
package/CHANGELOG.md
CHANGED
|
@@ -4,11 +4,15 @@ 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.
|
|
7
|
+
#### [v0.118.0](https://github.com/nyaruka/temba-components/compare/v0.116.0...v0.118.0)
|
|
8
8
|
|
|
9
|
+
- Icon alignment [`#473`](https://github.com/nyaruka/temba-components/pull/473)
|
|
9
10
|
- Add WorkspaceSelect [`#472`](https://github.com/nyaruka/temba-components/pull/472)
|
|
10
11
|
- Bump nanoid from 3.3.7 to 3.3.8 [`#469`](https://github.com/nyaruka/temba-components/pull/469)
|
|
11
12
|
- Render line breaks for messages on contact chat [`#468`](https://github.com/nyaruka/temba-components/pull/468)
|
|
13
|
+
- Fix menu and dropdown icon alignment [`6089fe8`](https://github.com/nyaruka/temba-components/commit/6089fe8f788e5f1f404b76271cddac0a14cc21ed)
|
|
14
|
+
- Fix button with icon display [`fc31a37`](https://github.com/nyaruka/temba-components/commit/fc31a3748ae9f8c5387846d4b57522007f6e4234)
|
|
15
|
+
- Update test screenshots [`0d1b3ef`](https://github.com/nyaruka/temba-components/commit/0d1b3ef633bf52c4c288fa8a085ea33c75f2ae45)
|
|
12
16
|
|
|
13
17
|
#### [v0.116.0](https://github.com/nyaruka/temba-components/compare/v0.114.1...v0.116.0)
|
|
14
18
|
|
package/demo/index.html
CHANGED
|
@@ -127,7 +127,7 @@
|
|
|
127
127
|
</head>
|
|
128
128
|
|
|
129
129
|
<body>
|
|
130
|
-
<temba-webchat channel="
|
|
130
|
+
<temba-webchat channel="5ea6f54b-96b0-4e0f-aa00-c6cccc588a55"></temba-webchat>
|
|
131
131
|
<temba-store completion="/static/api/completion.json" functions="/static/api/functions.json"
|
|
132
132
|
fields="/static/api/fields.json" globals="/static/api/globals.json" groups="/static/api/groups.json"></temba-store>
|
|
133
133
|
|
package/dist/temba-components.js
CHANGED
|
@@ -1609,7 +1609,6 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
|
|
|
1609
1609
|
}
|
|
1610
1610
|
|
|
1611
1611
|
.lined-button .button-mask {
|
|
1612
|
-
display: block;
|
|
1613
1612
|
flex-grow: 1;
|
|
1614
1613
|
}
|
|
1615
1614
|
|
|
@@ -3487,10 +3486,6 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
|
|
|
3487
3486
|
align-items: center;
|
|
3488
3487
|
}
|
|
3489
3488
|
|
|
3490
|
-
.level-0 > temba-dropdown .icon-wrapper {
|
|
3491
|
-
padding: 0.2em 0.4em 0.2em 0em;
|
|
3492
|
-
}
|
|
3493
|
-
|
|
3494
3489
|
.level-0 > .item.selected::before,
|
|
3495
3490
|
.level-0 > .item.selected::after {
|
|
3496
3491
|
content: ' ';
|
|
@@ -3980,7 +3975,7 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
|
|
|
3980
3975
|
}
|
|
3981
3976
|
|
|
3982
3977
|
.level-0 .icon-wrapper {
|
|
3983
|
-
padding: 0.4em 0.
|
|
3978
|
+
padding: 0.4em 0.2em;
|
|
3984
3979
|
}
|
|
3985
3980
|
|
|
3986
3981
|
temba-workspace-select {
|
|
@@ -4052,7 +4047,10 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
|
|
|
4052
4047
|
@mousedown=${()=>{t.level>0&&(this.pressedItem=t)}}
|
|
4053
4048
|
@mouseleave=${()=>{this.pressedItem=null}}
|
|
4054
4049
|
>
|
|
4055
|
-
${0===t.level?t.avatar?n:V`<temba-tip
|
|
4050
|
+
${0===t.level?t.avatar?n:V`<temba-tip
|
|
4051
|
+
position="right"
|
|
4052
|
+
style="display:flex;"
|
|
4053
|
+
text="${t.name}"
|
|
4056
4054
|
>${n}</temba-tip
|
|
4057
4055
|
>`:V`${n}${s}`}
|
|
4058
4056
|
|
|
@@ -4183,7 +4181,6 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
|
|
|
4183
4181
|
content: '';
|
|
4184
4182
|
width: 0px;
|
|
4185
4183
|
height: 0;
|
|
4186
|
-
top: -6px;
|
|
4187
4184
|
z-index: 10;
|
|
4188
4185
|
position: absolute;
|
|
4189
4186
|
border-left: 6px solid transparent;
|
|
@@ -4218,7 +4215,7 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
|
|
|
4218
4215
|
.right {
|
|
4219
4216
|
right: 0;
|
|
4220
4217
|
}
|
|
4221
|
-
`}constructor(){super(),this.open=!1,this.dormant=!0,this.arrowSize=8,this.margin=10,this.mask=!1,this.dropdownStyle={},this.arrowStyle={},this.calculatePosition=this.calculatePosition.bind(this)}firstUpdated(t){super.firstUpdated(t),this.resetBlurHandler()}resetBlurHandler(){const t=this.shadowRoot.querySelector(".dropdown");this.activeFocus&&this.activeFocus.removeEventListener("blur",this.blurHandler),this.activeFocus=t,this.blurHandler=this.handleBlur.bind(this),this.activeFocus.addEventListener("blur",this.blurHandler)}handleBlur(t){const e=t.relatedTarget;this.contains(e)?(e.addEventListener("blur",this.blurHandler),this.activeFocus=e):this.closeDropdown()}openDropdown(){this.open=!0,this.dormant=!1,this.resetBlurHandler();const t=this.shadowRoot.querySelector(".dropdown");t.focus(),t.click(),this.fireCustomEvent($e.Opened)}closeDropdown(){this.activeFocus.removeEventListener("blur",this.blurHandler),this.open=!1,this.resetBlurHandler(),window.setTimeout((()=>{this.dormant=!0}),250),this.blur()}updated(t){super.updated(t),t.has("open")&&(this.dropdownStyle={}),t.has("dropdownStyle")&&0===Object.keys(this.dropdownStyle).length&&this.calculatePosition()}calculatePosition(){const t=this.shadowRoot.querySelector(".dropdown"),e=this.querySelector('
|
|
4218
|
+
`}constructor(){super(),this.open=!1,this.dormant=!0,this.arrowSize=8,this.margin=10,this.mask=!1,this.dropdownStyle={},this.arrowStyle={},this.calculatePosition=this.calculatePosition.bind(this)}firstUpdated(t){super.firstUpdated(t),this.resetBlurHandler()}resetBlurHandler(){const t=this.shadowRoot.querySelector(".dropdown");this.activeFocus&&this.activeFocus.removeEventListener("blur",this.blurHandler),this.activeFocus=t,this.blurHandler=this.handleBlur.bind(this),this.activeFocus.addEventListener("blur",this.blurHandler)}handleBlur(t){const e=t.relatedTarget;this.contains(e)?(e.addEventListener("blur",this.blurHandler),this.activeFocus=e):this.closeDropdown()}openDropdown(){this.open=!0,this.dormant=!1,this.resetBlurHandler();const t=this.shadowRoot.querySelector(".dropdown");t.focus(),t.click(),this.fireCustomEvent($e.Opened)}closeDropdown(){this.activeFocus.removeEventListener("blur",this.blurHandler),this.open=!1,this.resetBlurHandler(),window.setTimeout((()=>{this.dormant=!0}),250),this.blur()}updated(t){super.updated(t),t.has("open")&&(this.dropdownStyle={}),t.has("dropdownStyle")&&0===Object.keys(this.dropdownStyle).length&&this.calculatePosition()}calculatePosition(){const t=this.shadowRoot.querySelector(".dropdown"),e=this.querySelector('*[slot="toggle"]'),i=this.shadowRoot.querySelector(".arrow");let o=!1,n=!1;if(t&&e){const s=t.getBoundingClientRect(),r=e.getBoundingClientRect(),a=i.getBoundingClientRect();if(!e)return;const l={border:"1px solid rgba(0,0,0,0.1)",marginTop:"0.5em"};s.right>window.innerWidth&&(l.left=r.right-s.width+"px",delete l.right,n=!0),s.bottom>window.innerHeight&&(l.top=r.top-s.height+"px",l["margin-top"]="-0.5em",o=!0);let h=r.width/2-a.width/2;h<=0&&(l.marginLeft="-10px",h=10);const c={left:h+"px",borderWidth:this.arrowSize+"px",top:"-"+this.arrowSize+"px"};o&&(c.transform="rotate(180deg)",c.top="auto",c.bottom="-"+this.arrowSize+"px"),n&&(c.right=r.width/2-a.width/2+"px",delete c.left),this.arrowStyle=c,this.dropdownStyle=l}this.requestUpdate()}handleToggleClicked(t){t.preventDefault(),t.stopPropagation(),!this.open&&this.dormant&&this.openDropdown()}render(){return V`
|
|
4222
4219
|
${this.mask?V`<div class="mask ${this.open?"open":""}" />`:null}
|
|
4223
4220
|
|
|
4224
4221
|
<div
|