@nyaruka/temba-components 0.35.2 → 0.35.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 +6 -0
- package/dist/{41042aab.js → 445f048b.js} +2 -2
- package/dist/index.js +2 -2
- 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/dropdown/Dropdown.js +13 -10
- package/out-tsc/src/dropdown/Dropdown.js.map +1 -1
- package/package.json +1 -1
- package/src/dropdown/Dropdown.ts +19 -13
package/CHANGELOG.md
CHANGED
|
@@ -4,8 +4,14 @@ 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.35.3](https://github.com/nyaruka/temba-components/compare/v0.35.2...v0.35.3)
|
|
8
|
+
|
|
9
|
+
- Fix offsets for temba-dropdown [`#229`](https://github.com/nyaruka/temba-components/pull/229)
|
|
10
|
+
|
|
7
11
|
#### [v0.35.2](https://github.com/nyaruka/temba-components/compare/v0.35.1...v0.35.2)
|
|
8
12
|
|
|
13
|
+
> 13 December 2022
|
|
14
|
+
|
|
9
15
|
- Relative dropdown placement, fix focus on window switching [`#227`](https://github.com/nyaruka/temba-components/pull/227)
|
|
10
16
|
|
|
11
17
|
#### [v0.35.1](https://github.com/nyaruka/temba-components/compare/v0.35.0...v0.35.1)
|
|
@@ -4005,7 +4005,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
4005
4005
|
cursor: pointer;
|
|
4006
4006
|
text-decoration: underline;
|
|
4007
4007
|
}
|
|
4008
|
-
`}handleClick(t){window.goto(t)}render(){return P`<slot href="${this.href}" @click="${this.handleClick}"></slot>`}}t([it({type:String})],fa.prototype,"href",void 0);class ga extends tt{constructor(){super(...arguments),this.open=!1,this.dropAlign="left",this.arrowSize=6,this.arrowOffset=2*this.arrowSize,this.offsetX
|
|
4008
|
+
`}handleClick(t){window.goto(t)}render(){return P`<slot href="${this.href}" @click="${this.handleClick}"></slot>`}}t([it({type:String})],fa.prototype,"href",void 0);class ga extends tt{constructor(){super(...arguments),this.open=!1,this.dropAlign="left",this.arrowSize=6,this.arrowOffset=2*this.arrowSize,this.offsetX=0,this.offsetY=0}static get styles(){return s`
|
|
4009
4009
|
.wrapper {
|
|
4010
4010
|
position: relative;
|
|
4011
4011
|
}
|
|
@@ -4056,7 +4056,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
4056
4056
|
pointer-events: auto;
|
|
4057
4057
|
transform: translateY(0.5em);
|
|
4058
4058
|
}
|
|
4059
|
-
`}firstUpdated(t){super.firstUpdated(t);const e=this.shadowRoot.querySelector(".
|
|
4059
|
+
`}firstUpdated(t){super.firstUpdated(t);const e=this.shadowRoot.querySelector(".arrow");e.style.borderWidth=this.arrowSize+"px",e.style.top="-"+this.arrowSize+"px",this.arrowOffset<0?e.style.right=Math.abs(this.arrowOffset)+"px":e.style.left=this.arrowOffset+"px";this.shadowRoot.querySelector(".dropdown").addEventListener("blur",(()=>{window.setTimeout((()=>{this.open=!1,this.shadowRoot.host.blur()}),200)}))}updated(t){if(super.updated(t),t.has("offsetY")||t.has("offsetX")){const t=this.shadowRoot.querySelector(".dropdown");t.style.marginTop=this.offsetY+"px",t.offsetLeft+t.clientWidth>window.outerWidth?t.style.marginLeft="-"+(t.clientWidth-this.clientWidth-this.offsetX)+"px":t.style.marginLeft=this.offsetX+"px"}t.has("open")&&(this.open?this.classList.add("open"):this.classList.remove("open"))}handleToggleClicked(){if(!this.open){this.open=!0;this.shadowRoot.querySelector(".dropdown").focus()}}render(){return P`
|
|
4060
4060
|
<div class="wrapper ${this.open?"open":""}">
|
|
4061
4061
|
<slot
|
|
4062
4062
|
name="toggle"
|
package/dist/index.js
CHANGED
|
@@ -4005,7 +4005,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
4005
4005
|
cursor: pointer;
|
|
4006
4006
|
text-decoration: underline;
|
|
4007
4007
|
}
|
|
4008
|
-
`}handleClick(t){window.goto(t)}render(){return P`<slot href="${this.href}" @click="${this.handleClick}"></slot>`}}t([it({type:String})],fa.prototype,"href",void 0);class ga extends tt{constructor(){super(...arguments),this.open=!1,this.dropAlign="left",this.arrowSize=6,this.arrowOffset=2*this.arrowSize,this.offsetX
|
|
4008
|
+
`}handleClick(t){window.goto(t)}render(){return P`<slot href="${this.href}" @click="${this.handleClick}"></slot>`}}t([it({type:String})],fa.prototype,"href",void 0);class ga extends tt{constructor(){super(...arguments),this.open=!1,this.dropAlign="left",this.arrowSize=6,this.arrowOffset=2*this.arrowSize,this.offsetX=0,this.offsetY=0}static get styles(){return s`
|
|
4009
4009
|
.wrapper {
|
|
4010
4010
|
position: relative;
|
|
4011
4011
|
}
|
|
@@ -4056,7 +4056,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
4056
4056
|
pointer-events: auto;
|
|
4057
4057
|
transform: translateY(0.5em);
|
|
4058
4058
|
}
|
|
4059
|
-
`}firstUpdated(t){super.firstUpdated(t);const e=this.shadowRoot.querySelector(".
|
|
4059
|
+
`}firstUpdated(t){super.firstUpdated(t);const e=this.shadowRoot.querySelector(".arrow");e.style.borderWidth=this.arrowSize+"px",e.style.top="-"+this.arrowSize+"px",this.arrowOffset<0?e.style.right=Math.abs(this.arrowOffset)+"px":e.style.left=this.arrowOffset+"px";this.shadowRoot.querySelector(".dropdown").addEventListener("blur",(()=>{window.setTimeout((()=>{this.open=!1,this.shadowRoot.host.blur()}),200)}))}updated(t){if(super.updated(t),t.has("offsetY")||t.has("offsetX")){const t=this.shadowRoot.querySelector(".dropdown");t.style.marginTop=this.offsetY+"px",t.offsetLeft+t.clientWidth>window.outerWidth?t.style.marginLeft="-"+(t.clientWidth-this.clientWidth-this.offsetX)+"px":t.style.marginLeft=this.offsetX+"px"}t.has("open")&&(this.open?this.classList.add("open"):this.classList.remove("open"))}handleToggleClicked(){if(!this.open){this.open=!0;this.shadowRoot.querySelector(".dropdown").focus()}}render(){return P`
|
|
4060
4060
|
<div class="wrapper ${this.open?"open":""}">
|
|
4061
4061
|
<slot
|
|
4062
4062
|
name="toggle"
|
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:"445f048b.js",revision:"de488e2d5e2dd015cff6bf1aa3c452e9"},{url:"templates/components-body.html",revision:"47f708377964c222c2bff54485b969a4"},{url:"templates/components-head.html",revision:"5c283453ef64a5e252abffae26033b25"}],{}),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/c139078bd7b03fda0cd1d0ca439fcfe4/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\": \"445f048b.js\",\n \"revision\": \"de488e2d5e2dd015cff6bf1aa3c452e9\"\n },\n {\n \"url\": \"templates/components-body.html\",\n \"revision\": \"47f708377964c222c2bff54485b969a4\"\n },\n {\n \"url\": \"templates/components-head.html\",\n \"revision\": \"5c283453ef64a5e252abffae26033b25\"\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":["url","revision","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"k1BAmCoC,CAClC,CACEA,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,oBAE2B,IAAIC,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/445f048b.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.35.3"</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/445f048b.js" crossorigin="anonymous">
|
|
@@ -9,7 +9,7 @@ export class Dropdown extends RapidElement {
|
|
|
9
9
|
this.dropAlign = 'left';
|
|
10
10
|
this.arrowSize = 6;
|
|
11
11
|
this.arrowOffset = this.arrowSize * 2;
|
|
12
|
-
this.offsetX =
|
|
12
|
+
this.offsetX = 0;
|
|
13
13
|
this.offsetY = 0;
|
|
14
14
|
}
|
|
15
15
|
static get styles() {
|
|
@@ -68,7 +68,6 @@ export class Dropdown extends RapidElement {
|
|
|
68
68
|
}
|
|
69
69
|
firstUpdated(props) {
|
|
70
70
|
super.firstUpdated(props);
|
|
71
|
-
const dropdown = this.shadowRoot.querySelector('.dropdown');
|
|
72
71
|
const arrow = this.shadowRoot.querySelector('.arrow');
|
|
73
72
|
arrow.style.borderWidth = this.arrowSize + 'px';
|
|
74
73
|
arrow.style.top = '-' + this.arrowSize + 'px';
|
|
@@ -78,14 +77,7 @@ export class Dropdown extends RapidElement {
|
|
|
78
77
|
else {
|
|
79
78
|
arrow.style.left = this.arrowOffset + 'px';
|
|
80
79
|
}
|
|
81
|
-
dropdown
|
|
82
|
-
if (dropdown.offsetLeft + dropdown.clientWidth > window.outerWidth) {
|
|
83
|
-
dropdown.style.marginLeft =
|
|
84
|
-
'-' + (dropdown.clientWidth - this.clientWidth - this.offsetX) + 'px';
|
|
85
|
-
}
|
|
86
|
-
else {
|
|
87
|
-
dropdown.style.marginLeft = this.offsetX + 'px';
|
|
88
|
-
}
|
|
80
|
+
const dropdown = this.shadowRoot.querySelector('.dropdown');
|
|
89
81
|
dropdown.addEventListener('blur', () => {
|
|
90
82
|
// we nest this to deal with clicking the toggle to close
|
|
91
83
|
// as we don't want it to toggle an immediate open, probably
|
|
@@ -99,6 +91,17 @@ export class Dropdown extends RapidElement {
|
|
|
99
91
|
}
|
|
100
92
|
updated(changedProperties) {
|
|
101
93
|
super.updated(changedProperties);
|
|
94
|
+
if (changedProperties.has('offsetY') || changedProperties.has('offsetX')) {
|
|
95
|
+
const dropdown = this.shadowRoot.querySelector('.dropdown');
|
|
96
|
+
dropdown.style.marginTop = this.offsetY + 'px';
|
|
97
|
+
if (dropdown.offsetLeft + dropdown.clientWidth > window.outerWidth) {
|
|
98
|
+
dropdown.style.marginLeft =
|
|
99
|
+
'-' + (dropdown.clientWidth - this.clientWidth - this.offsetX) + 'px';
|
|
100
|
+
}
|
|
101
|
+
else {
|
|
102
|
+
dropdown.style.marginLeft = this.offsetX + 'px';
|
|
103
|
+
}
|
|
104
|
+
}
|
|
102
105
|
if (changedProperties.has('open')) {
|
|
103
106
|
if (this.open) {
|
|
104
107
|
this.classList.add('open');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/dropdown/Dropdown.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,OAAO,QAAS,SAAQ,YAAY;IAA1C;;QAyDE,SAAI,GAAG,KAAK,CAAC;QAGb,cAAS,GAAG,MAAM,CAAC;QAGnB,cAAS,GAAG,CAAC,CAAC;QAGd,gBAAW,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QAGjC,YAAO,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/dropdown/Dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { RapidElement } from '../RapidElement';\n\nexport class Dropdown extends RapidElement {\n static get styles() {\n return css`\n .wrapper {\n position: relative;\n }\n\n .toggle {\n cursor: pointer;\n }\n\n .dropdown-wrapper {\n position: relative;\n overflow: auto;\n }\n\n .dropdown {\n position: absolute;\n opacity: 0;\n z-index: 10;\n pointer-events: none;\n padding: 0;\n border-radius: var(--curvature);\n background: #fff;\n transform: translateY(-1em);\n transition: all calc(0.6 * var(--transition-speed)) linear;\n user-select: none;\n margin-top: 0px;\n margin-left: 0px;\n box-shadow: var(--dropdown-shadow);\n }\n\n .dropdown:focus {\n outline: none;\n }\n\n .arrow {\n content: '';\n width: 0px;\n height: 0;\n top: -6px;\n z-index: 10;\n position: absolute;\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-bottom: 6px solid white;\n }\n\n .open .dropdown {\n opacity: 1;\n pointer-events: auto;\n transform: translateY(0.5em);\n }\n `;\n }\n\n @property({ type: Boolean })\n open = false;\n\n @property({ type: String, attribute: 'drop_align' })\n dropAlign = 'left';\n\n @property({ type: Number })\n arrowSize = 6;\n\n @property({ type: Number })\n arrowOffset = this.arrowSize * 2;\n\n @property({ type: Number })\n offsetX = 0;\n\n @property({ type: Number })\n offsetY = 0;\n\n public firstUpdated(props: any) {\n super.firstUpdated(props);\n\n const arrow = this.shadowRoot.querySelector('.arrow') as HTMLDivElement;\n arrow.style.borderWidth = this.arrowSize + 'px';\n arrow.style.top = '-' + this.arrowSize + 'px';\n\n if (this.arrowOffset < 0) {\n arrow.style.right = Math.abs(this.arrowOffset) + 'px';\n } else {\n arrow.style.left = this.arrowOffset + 'px';\n }\n\n const dropdown = this.shadowRoot.querySelector(\n '.dropdown'\n ) as HTMLDivElement;\n\n dropdown.addEventListener('blur', () => {\n // we nest this to deal with clicking the toggle to close\n // as we don't want it to toggle an immediate open, probably\n // a better way to deal with this\n window.setTimeout(() => {\n this.open = false;\n // blur our host element too\n (this.shadowRoot.host as HTMLDivElement).blur();\n }, 200);\n });\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('offsetY') || changedProperties.has('offsetX')) {\n const dropdown = this.shadowRoot.querySelector(\n '.dropdown'\n ) as HTMLDivElement;\n\n dropdown.style.marginTop = this.offsetY + 'px';\n if (dropdown.offsetLeft + dropdown.clientWidth > window.outerWidth) {\n dropdown.style.marginLeft =\n '-' + (dropdown.clientWidth - this.clientWidth - this.offsetX) + 'px';\n } else {\n dropdown.style.marginLeft = this.offsetX + 'px';\n }\n }\n\n if (changedProperties.has('open')) {\n if (this.open) {\n this.classList.add('open');\n } else {\n this.classList.remove('open');\n }\n }\n }\n\n public handleToggleClicked(): void {\n if (!this.open) {\n this.open = true;\n\n const dropdown = this.shadowRoot.querySelector(\n '.dropdown'\n ) as HTMLDivElement;\n dropdown.focus();\n }\n }\n\n public render(): TemplateResult {\n return html`\n <div class=\"wrapper ${this.open ? 'open' : ''}\">\n <slot\n name=\"toggle\"\n class=\"toggle\"\n @click=\"${this.handleToggleClicked}\"\n ></slot>\n <div\n class=\"dropdown\"\n tabindex=\"0\"\n style=\"${this.dropAlign == 'right' ? 'right:0' : ''}\"\n >\n <div class=\"arrow\"></div>\n <div class=\"dropdown-wrapper\">\n <slot name=\"dropdown\" tabindex=\"1\"></slot>\n </div>\n </div>\n </div>\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
package/src/dropdown/Dropdown.ts
CHANGED
|
@@ -71,7 +71,7 @@ export class Dropdown extends RapidElement {
|
|
|
71
71
|
arrowOffset = this.arrowSize * 2;
|
|
72
72
|
|
|
73
73
|
@property({ type: Number })
|
|
74
|
-
offsetX =
|
|
74
|
+
offsetX = 0;
|
|
75
75
|
|
|
76
76
|
@property({ type: Number })
|
|
77
77
|
offsetY = 0;
|
|
@@ -79,11 +79,7 @@ export class Dropdown extends RapidElement {
|
|
|
79
79
|
public firstUpdated(props: any) {
|
|
80
80
|
super.firstUpdated(props);
|
|
81
81
|
|
|
82
|
-
const dropdown = this.shadowRoot.querySelector(
|
|
83
|
-
'.dropdown'
|
|
84
|
-
) as HTMLDivElement;
|
|
85
82
|
const arrow = this.shadowRoot.querySelector('.arrow') as HTMLDivElement;
|
|
86
|
-
|
|
87
83
|
arrow.style.borderWidth = this.arrowSize + 'px';
|
|
88
84
|
arrow.style.top = '-' + this.arrowSize + 'px';
|
|
89
85
|
|
|
@@ -93,14 +89,9 @@ export class Dropdown extends RapidElement {
|
|
|
93
89
|
arrow.style.left = this.arrowOffset + 'px';
|
|
94
90
|
}
|
|
95
91
|
|
|
96
|
-
dropdown
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
dropdown.style.marginLeft =
|
|
100
|
-
'-' + (dropdown.clientWidth - this.clientWidth - this.offsetX) + 'px';
|
|
101
|
-
} else {
|
|
102
|
-
dropdown.style.marginLeft = this.offsetX + 'px';
|
|
103
|
-
}
|
|
92
|
+
const dropdown = this.shadowRoot.querySelector(
|
|
93
|
+
'.dropdown'
|
|
94
|
+
) as HTMLDivElement;
|
|
104
95
|
|
|
105
96
|
dropdown.addEventListener('blur', () => {
|
|
106
97
|
// we nest this to deal with clicking the toggle to close
|
|
@@ -116,6 +107,21 @@ export class Dropdown extends RapidElement {
|
|
|
116
107
|
|
|
117
108
|
public updated(changedProperties: Map<string, any>) {
|
|
118
109
|
super.updated(changedProperties);
|
|
110
|
+
|
|
111
|
+
if (changedProperties.has('offsetY') || changedProperties.has('offsetX')) {
|
|
112
|
+
const dropdown = this.shadowRoot.querySelector(
|
|
113
|
+
'.dropdown'
|
|
114
|
+
) as HTMLDivElement;
|
|
115
|
+
|
|
116
|
+
dropdown.style.marginTop = this.offsetY + 'px';
|
|
117
|
+
if (dropdown.offsetLeft + dropdown.clientWidth > window.outerWidth) {
|
|
118
|
+
dropdown.style.marginLeft =
|
|
119
|
+
'-' + (dropdown.clientWidth - this.clientWidth - this.offsetX) + 'px';
|
|
120
|
+
} else {
|
|
121
|
+
dropdown.style.marginLeft = this.offsetX + 'px';
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
119
125
|
if (changedProperties.has('open')) {
|
|
120
126
|
if (this.open) {
|
|
121
127
|
this.classList.add('open');
|