@nyaruka/temba-components 0.49.2 → 0.49.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/{ac47779f.js → 3646c2ea.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/colorpicker/ColorPicker.js +4 -0
- package/out-tsc/src/colorpicker/ColorPicker.js.map +1 -1
- package/out-tsc/src/list/ContentMenu.js +1 -1
- package/out-tsc/src/list/ContentMenu.js.map +1 -1
- package/package.json +1 -1
- package/src/colorpicker/ColorPicker.ts +8 -1
- package/src/list/ContentMenu.ts +1 -1
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.49.3](https://github.com/nyaruka/temba-components/compare/v0.49.2...v0.49.3)
|
|
8
|
+
|
|
9
|
+
- Fix some styling variables [`#325`](https://github.com/nyaruka/temba-components/pull/325)
|
|
10
|
+
|
|
7
11
|
#### [v0.49.2](https://github.com/nyaruka/temba-components/compare/v0.49.1...v0.49.2)
|
|
8
12
|
|
|
13
|
+
> 2 May 2023
|
|
14
|
+
|
|
9
15
|
- Remove select first from menu [`#324`](https://github.com/nyaruka/temba-components/pull/324)
|
|
10
16
|
- Add color picker component [`#321`](https://github.com/nyaruka/temba-components/pull/321)
|
|
11
17
|
|
|
@@ -5802,7 +5802,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
5802
5802
|
}
|
|
5803
5803
|
|
|
5804
5804
|
.item:hover {
|
|
5805
|
-
color:
|
|
5805
|
+
color: var(--color-link-primary);
|
|
5806
5806
|
}
|
|
5807
5807
|
`}fetchContentMenu(){const t=this.endpoint;if(t){const e=this.legacy,i=Tl;e&&delete i["Temba-Spa"],te(t,null,i).then((t=>{const e=t.json.items;e?(this.buttons=e.filter((t=>t.as_button)),this.items=e.filter((t=>!t.as_button))):(this.buttons=[],this.items=[]),this.fireCustomEvent(_t.Loaded,{buttons:this.buttons,items:this.items})})).catch((t=>{console.error(t)}))}}refresh(){this.fetchContentMenu()}updated(t){super.updated(t),(t.has("endpoint")||t.has("legacy"))&&this.fetchContentMenu()}handleItemClicked(t,e){this.fireCustomEvent(_t.Selection,{item:t,event:e})}render(){return D`
|
|
5808
5808
|
<div class="container">
|
|
@@ -6004,7 +6004,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
6004
6004
|
.color-picker:focus {
|
|
6005
6005
|
outline: none;
|
|
6006
6006
|
}
|
|
6007
|
-
`}updated(t){super.updated(t),t.has("value")&&(this.previewColor=this.value||"#9c9c9c",this.hex=this.value),t.has("selecting")&&this.selecting&&window.setTimeout((()=>{this.selecting=!1}),100),t.has("previewLabel")&&this.hue&&(this.hex=xe(this.hue,this.saturation,this.lightness))}handleBlur(t){this.expanded&&(this.expanded=!1)}handleMouseOut(t){this.previewColor=this.value,this.hex=this.value}handleMouseMove(t){if(this.expanded){const e=t.target.getBoundingClientRect(),i=t.clientX-e.left,n=t.clientY-e.top;this.hue=i/e.width*360,this.lightness=100-n/e.height*100,this.previewColor=`hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`,this.hex=xe(this.hue,this.saturation,this.lightness)}}handlePreviewClick(t){this.expanded=!this.expanded,this.selecting=!0,this.shadowRoot.querySelector(".color-picker").focus()}handleColorClick(t){if(this.expanded){const e=t.target.getBoundingClientRect(),i=t.clientX-e.left,n=t.clientY-e.top;this.hue=i/e.width*360,this.lightness=100-n/e.height*100,this.previewColor=`hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`,this.setValue(this.hex),this.selecting=!0,this.expanded=!1}this.expanded}handleHexInput(t){const e=t.target.value;e.startsWith("#")&&(this.previewColor=e,this.setValue(e))}serializeValue(t){return t}render(){return D`
|
|
6007
|
+
`}firstUpdated(t){super.firstUpdated(t),this.setValue(this.value)}updated(t){super.updated(t),t.has("value")&&(this.previewColor=this.value||"#9c9c9c",this.hex=this.value),t.has("selecting")&&this.selecting&&window.setTimeout((()=>{this.selecting=!1}),100),t.has("previewLabel")&&this.hue&&(this.hex=xe(this.hue,this.saturation,this.lightness))}handleBlur(t){this.expanded&&(this.expanded=!1)}handleMouseOut(t){this.previewColor=this.value,this.hex=this.value}handleMouseMove(t){if(this.expanded){const e=t.target.getBoundingClientRect(),i=t.clientX-e.left,n=t.clientY-e.top;this.hue=i/e.width*360,this.lightness=100-n/e.height*100,this.previewColor=`hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`,this.hex=xe(this.hue,this.saturation,this.lightness)}}handlePreviewClick(t){this.expanded=!this.expanded,this.selecting=!0,this.shadowRoot.querySelector(".color-picker").focus()}handleColorClick(t){if(this.expanded){const e=t.target.getBoundingClientRect(),i=t.clientX-e.left,n=t.clientY-e.top;this.hue=i/e.width*360,this.lightness=100-n/e.height*100,this.previewColor=`hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`,this.setValue(this.hex),this.selecting=!0,this.expanded=!1}this.expanded}handleHexInput(t){const e=t.target.value;e.startsWith("#")&&(this.previewColor=e,this.setValue(e))}serializeValue(t){return t}render(){return D`
|
|
6008
6008
|
<temba-field
|
|
6009
6009
|
name=${this.name}
|
|
6010
6010
|
.helpText=${this.helpText}
|
package/dist/index.js
CHANGED
|
@@ -5802,7 +5802,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
5802
5802
|
}
|
|
5803
5803
|
|
|
5804
5804
|
.item:hover {
|
|
5805
|
-
color:
|
|
5805
|
+
color: var(--color-link-primary);
|
|
5806
5806
|
}
|
|
5807
5807
|
`}fetchContentMenu(){const t=this.endpoint;if(t){const e=this.legacy,i=Tl;e&&delete i["Temba-Spa"],te(t,null,i).then((t=>{const e=t.json.items;e?(this.buttons=e.filter((t=>t.as_button)),this.items=e.filter((t=>!t.as_button))):(this.buttons=[],this.items=[]),this.fireCustomEvent(_t.Loaded,{buttons:this.buttons,items:this.items})})).catch((t=>{console.error(t)}))}}refresh(){this.fetchContentMenu()}updated(t){super.updated(t),(t.has("endpoint")||t.has("legacy"))&&this.fetchContentMenu()}handleItemClicked(t,e){this.fireCustomEvent(_t.Selection,{item:t,event:e})}render(){return D`
|
|
5808
5808
|
<div class="container">
|
|
@@ -6004,7 +6004,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
6004
6004
|
.color-picker:focus {
|
|
6005
6005
|
outline: none;
|
|
6006
6006
|
}
|
|
6007
|
-
`}updated(t){super.updated(t),t.has("value")&&(this.previewColor=this.value||"#9c9c9c",this.hex=this.value),t.has("selecting")&&this.selecting&&window.setTimeout((()=>{this.selecting=!1}),100),t.has("previewLabel")&&this.hue&&(this.hex=xe(this.hue,this.saturation,this.lightness))}handleBlur(t){this.expanded&&(this.expanded=!1)}handleMouseOut(t){this.previewColor=this.value,this.hex=this.value}handleMouseMove(t){if(this.expanded){const e=t.target.getBoundingClientRect(),i=t.clientX-e.left,n=t.clientY-e.top;this.hue=i/e.width*360,this.lightness=100-n/e.height*100,this.previewColor=`hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`,this.hex=xe(this.hue,this.saturation,this.lightness)}}handlePreviewClick(t){this.expanded=!this.expanded,this.selecting=!0,this.shadowRoot.querySelector(".color-picker").focus()}handleColorClick(t){if(this.expanded){const e=t.target.getBoundingClientRect(),i=t.clientX-e.left,n=t.clientY-e.top;this.hue=i/e.width*360,this.lightness=100-n/e.height*100,this.previewColor=`hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`,this.setValue(this.hex),this.selecting=!0,this.expanded=!1}this.expanded}handleHexInput(t){const e=t.target.value;e.startsWith("#")&&(this.previewColor=e,this.setValue(e))}serializeValue(t){return t}render(){return D`
|
|
6007
|
+
`}firstUpdated(t){super.firstUpdated(t),this.setValue(this.value)}updated(t){super.updated(t),t.has("value")&&(this.previewColor=this.value||"#9c9c9c",this.hex=this.value),t.has("selecting")&&this.selecting&&window.setTimeout((()=>{this.selecting=!1}),100),t.has("previewLabel")&&this.hue&&(this.hex=xe(this.hue,this.saturation,this.lightness))}handleBlur(t){this.expanded&&(this.expanded=!1)}handleMouseOut(t){this.previewColor=this.value,this.hex=this.value}handleMouseMove(t){if(this.expanded){const e=t.target.getBoundingClientRect(),i=t.clientX-e.left,n=t.clientY-e.top;this.hue=i/e.width*360,this.lightness=100-n/e.height*100,this.previewColor=`hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`,this.hex=xe(this.hue,this.saturation,this.lightness)}}handlePreviewClick(t){this.expanded=!this.expanded,this.selecting=!0,this.shadowRoot.querySelector(".color-picker").focus()}handleColorClick(t){if(this.expanded){const e=t.target.getBoundingClientRect(),i=t.clientX-e.left,n=t.clientY-e.top;this.hue=i/e.width*360,this.lightness=100-n/e.height*100,this.previewColor=`hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`,this.setValue(this.hex),this.selecting=!0,this.expanded=!1}this.expanded}handleHexInput(t){const e=t.target.value;e.startsWith("#")&&(this.previewColor=e,this.setValue(e))}serializeValue(t){return t}render(){return D`
|
|
6008
6008
|
<temba-field
|
|
6009
6009
|
name=${this.name}
|
|
6010
6010
|
.helpText=${this.helpText}
|
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
|
|
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),d={module:{uri:i},exports:r,require:l};t[i]=Promise.all(n.map((e=>d[e]||l(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"3646c2ea.js",revision:"3c0b3134fda0a66cccbc6f15416ab3f3"},{url:"templates/components-body.html",revision:"f8b1576f5d6dde2399df66986fbf3b7d"},{url:"templates/components-head.html",revision:"669f56e74701a0bd21d455b596e47214"}],{}),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/650a5c3fd2f3b14ecd0ddb3d4ce8c930/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 {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\nself.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\": \"3646c2ea.js\",\n \"revision\": \"3c0b3134fda0a66cccbc6f15416ab3f3\"\n },\n {\n \"url\": \"templates/components-body.html\",\n \"revision\": \"f8b1576f5d6dde2399df66986fbf3b7d\"\n },\n {\n \"url\": \"templates/components-head.html\",\n \"revision\": \"669f56e74701a0bd21d455b596e47214\"\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":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,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/3646c2ea.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.49.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/3646c2ea.js" crossorigin="anonymous">
|
|
@@ -126,6 +126,10 @@ export class ColorPicker extends FormElement {
|
|
|
126
126
|
}
|
|
127
127
|
`;
|
|
128
128
|
}
|
|
129
|
+
firstUpdated(_changedProperties) {
|
|
130
|
+
super.firstUpdated(_changedProperties);
|
|
131
|
+
this.setValue(this.value);
|
|
132
|
+
}
|
|
129
133
|
updated(changed) {
|
|
130
134
|
super.updated(changed);
|
|
131
135
|
if (changed.has('value')) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/colorpicker/ColorPicker.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGhD,MAAM,OAAO,WAAY,SAAQ,WAAW;IAA5C;;QAEE,aAAQ,GAAG,KAAK,CAAC;QAGjB,iBAAY,GAAG,SAAS,CAAC;QAGzB,eAAU,GAAG,WAAW,CAAC;QAGzB,cAAS,GAAG,KAAK,CAAC;QAGU,eAAU,GAAG,GAAG,CAAC;QACjB,cAAS,GAAG,EAAE,CAAC;QACf,QAAG,GAAG,EAAE,CAAC;IA6OvC,CAAC;IA3OC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6GT,CAAC;IACJ,CAAC;IAEM,OAAO,CAAC,OAAyB;QACtC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEvB,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC;YAC5C,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC;SACvB;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YAC5B,IAAI,IAAI,CAAC,SAAS,EAAE;gBAClB,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;oBACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACzB,CAAC,EAAE,GAAG,CAAC,CAAC;aACT;SACF;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,IAAI,CAAC,GAAG,EAAE;YAC3C,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;SAChE;IACH,CAAC;IAEO,UAAU,CAAC,KAAiB;QAClC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;SACvB;IACH,CAAC;IAEO,cAAc,CAAC,KAAiB;QACtC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAC/B,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC;IACxB,CAAC;IAEO,eAAe,CAAC,KAAiB;QACvC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,MAAM,IAAI,GAAI,KAAK,CAAC,MAAsB,CAAC,qBAAqB,EAAE,CAAC;YACnE,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;YACpC,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC;YACnC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC;YAClC,IAAI,CAAC,SAAS,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC;YAC/C,IAAI,CAAC,YAAY,GAAG,QAAQ,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,UAAU,MAAM,IAAI,CAAC,SAAS,OAAO,CAAC;YACpF,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;SAChE;IACH,CAAC;IAEO,kBAAkB,CAAC,KAAiB;QAC1C,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAoB,CAAC,KAAK,EAAE,CAAC;IAC7E,CAAC;IAEO,gBAAgB,CAAC,KAAiB;QACxC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,MAAM,IAAI,GAAI,KAAK,CAAC,MAAsB,CAAC,qBAAqB,EAAE,CAAC;YACnE,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;YACpC,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC;YACnC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC;YAClC,IAAI,CAAC,SAAS,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC;YAC/C,IAAI,CAAC,YAAY,GAAG,QAAQ,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,UAAU,MAAM,IAAI,CAAC,SAAS,OAAO,CAAC;YACpF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACxB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;SACvB;QAED,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,EAAE;SACH;IACH,CAAC;IAEO,cAAc,CAAC,KAAiB;QACtC,MAAM,GAAG,GAAI,KAAK,CAAC,MAAoB,CAAC,KAAK,CAAC;QAC9C,IAAI,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;YACvB,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC;YACxB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;SACpB;IACH,CAAC;IAEM,cAAc,CAAC,KAAU;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC,IAAI;oBACJ,IAAI,CAAC,QAAQ;kBACf,IAAI,CAAC,MAAM;sBACP,IAAI,CAAC,UAAU;qBAChB,IAAI,CAAC,SAAS;oBACf,IAAI,CAAC,QAAQ;;;uBAGV,UAAU,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;yBACpD,UAAU,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC;;wBAEvC,UAAU,CAAC;YACjB,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAC;+BACa,IAAI,CAAC,UAAU,eAAe,IAAI,CAAC,YAAY;yBACrD,IAAI,CAAC,kBAAkB;;kBAE9B,IAAI,CAAC,KAAK;;;;;wBAKJ,IAAI,CAAC,UAAU;6BACV,IAAI,CAAC,eAAe;4BACrB,IAAI,CAAC,cAAc;yBACtB,IAAI,CAAC,gBAAgB;;;;sBAIxB,IAAI,CAAC,GAAG;uBACP,IAAI,CAAC,cAAc;;;;;;KAMrC,CAAC;IACJ,CAAC;CACF;AA3PC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACF;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACF;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACV;AAEU;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAa;AACZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAU","sourcesContent":["import { html, css } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { getClasses, hslToHex } from '../utils';\nimport { TextInput } from '../textinput/TextInput';\n\nexport class ColorPicker extends FormElement {\n @property({ type: Boolean })\n expanded = false;\n\n @property({ type: String })\n previewColor = '#ffffff';\n\n @property({ type: String })\n labelColor = '#ffffffee';\n\n @property({ type: Boolean })\n selecting = false;\n\n @property({ type: Number }) hue: number;\n @property({ type: Number }) saturation = 100;\n @property({ type: Number }) lightness = 50;\n @property({ type: String }) hex = '';\n\n static get styles() {\n return css`\n :host {\n color: var(--color-text);\n display: inline-block;\n --curvature: 0.55em;\n width: 100%;\n\n --temba-textinput-padding: 0.4em;\n }\n\n temba-textinput {\n margin-left: 0.3em;\n width: 5em;\n }\n\n temba-field {\n display: block;\n width: 100%;\n }\n\n .wrapper {\n border: 1px solid var(--color-widget-border);\n padding: calc(var(--curvature) / 2);\n border-radius: calc(var(--curvature) * 1.5);\n transition: all calc(var(--transition-speed) * 2) var(--bounce);\n\n display: flex;\n flex-grow: 0;\n }\n\n .picker-wrapper {\n display: flex;\n flex-direction: row;\n align-items: stretch;\n transition: all calc(var(--transition-speed) * 2) var(--bounce);\n flex-grow: 0;\n }\n\n .preview {\n width: initial;\n border-radius: var(--curvature);\n padding: 0.2em 0.5em;\n font-weight: 400;\n border: 2px solid rgba(0, 0, 0, 0.1);\n white-space: nowrap;\n cursor: pointer;\n transition: transform calc(var(--transition-speed) * 0.5) var(--bounce);\n }\n\n .preview.selecting {\n transform: scale(1.05);\n }\n\n .wrapper.expanded {\n flex-grow: 1 !important;\n }\n\n .wrapper.expanded .picker-wrapper {\n flex-grow: 1 !important;\n }\n\n .wrapper.expanded .preview {\n pointer-events: none;\n }\n\n .wrapper.expanded .color-picker {\n margin-left: calc(var(--curvature) / 2);\n }\n\n .wrapper.expanded temba-textinput {\n display: block;\n }\n\n .color-picker {\n border-radius: var(--curvature);\n cursor: pointer;\n transition: all calc(var(--transition-speed) * 2) var(--bounce);\n flex-grow: 1;\n position: relative;\n width: 100%;\n height: 100%;\n background-image: linear-gradient(\n to bottom,\n rgba(0, 0, 0, 0) 60%,\n rgba(0, 0, 0, 0.5) 90%,\n rgba(0, 0, 0, 1)\n ),\n linear-gradient(\n to top,\n rgba(255, 255, 255, 0) 60%,\n rgba(255, 255, 255, 0.8) 90%,\n rgba(255, 255, 255, 1)\n ),\n linear-gradient(\n to right,\n hsla(0, 100%, 50%, 1),\n hsla(60, 100%, 50%, 1),\n hsla(120, 100%, 50%, 1),\n hsla(180, 100%, 50%, 1),\n hsla(240, 100%, 50%, 1),\n hsla(300, 100%, 50%, 1),\n hsla(360, 100%, 50%, 1)\n );\n mix-blend-mode: multiply;\n }\n\n .color-picker:focus {\n outline: none;\n }\n `;\n }\n\n public updated(changed: Map<string, any>): void {\n super.updated(changed);\n\n if (changed.has('value')) {\n this.previewColor = this.value || '#9c9c9c';\n this.hex = this.value;\n }\n\n if (changed.has('selecting')) {\n if (this.selecting) {\n window.setTimeout(() => {\n this.selecting = false;\n }, 100);\n }\n }\n\n if (changed.has('previewLabel') && this.hue) {\n this.hex = hslToHex(this.hue, this.saturation, this.lightness);\n }\n }\n\n private handleBlur(event: FocusEvent) {\n if (this.expanded) {\n this.expanded = false;\n }\n }\n\n private handleMouseOut(event: MouseEvent) {\n this.previewColor = this.value;\n this.hex = this.value;\n }\n\n private handleMouseMove(event: MouseEvent) {\n if (this.expanded) {\n const rect = (event.target as HTMLElement).getBoundingClientRect();\n const x = event.clientX - rect.left;\n const y = event.clientY - rect.top;\n this.hue = (x / rect.width) * 360;\n this.lightness = 100 - (y / rect.height) * 100;\n this.previewColor = `hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`;\n this.hex = hslToHex(this.hue, this.saturation, this.lightness);\n }\n }\n\n private handlePreviewClick(event: MouseEvent) {\n this.expanded = !this.expanded;\n this.selecting = true;\n (this.shadowRoot.querySelector('.color-picker') as HTMLDivElement).focus();\n }\n\n private handleColorClick(event: MouseEvent) {\n if (this.expanded) {\n const rect = (event.target as HTMLElement).getBoundingClientRect();\n const x = event.clientX - rect.left;\n const y = event.clientY - rect.top;\n this.hue = (x / rect.width) * 360;\n this.lightness = 100 - (y / rect.height) * 100;\n this.previewColor = `hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`;\n this.setValue(this.hex);\n this.selecting = true;\n this.expanded = false;\n }\n\n if (!this.expanded) {\n //\n }\n }\n\n private handleHexInput(event: InputEvent) {\n const hex = (event.target as TextInput).value;\n if (hex.startsWith('#')) {\n this.previewColor = hex;\n this.setValue(hex);\n }\n }\n\n public serializeValue(value: any): string {\n return value;\n }\n\n public render() {\n return html`\n <temba-field\n name=${this.name}\n .helpText=${this.helpText}\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n .hideLabel=${this.hideLabel}\n .disabled=${this.disabled}\n >\n <div style=\"display:flex\" tabindex=\"0\">\n <div class=${getClasses({ wrapper: true, expanded: this.expanded })}>\n <div class=${getClasses({ 'picker-wrapper': true })}>\n <div\n class=${getClasses({\n preview: true,\n selecting: this.selecting,\n })}\n style=\"color:${this.labelColor};background:${this.previewColor}\"\n @click=${this.handlePreviewClick}\n >\n ${this.label}\n </div>\n <div\n class=\"color-picker\"\n tabindex=\"0\"\n @blur=${this.handleBlur}\n @mousemove=${this.handleMouseMove}\n @mouseout=${this.handleMouseOut}\n @click=${this.handleColorClick}\n ></div>\n </div>\n <temba-textinput\n value=${this.hex}\n @input=${this.handleHexInput}\n placeholder=\"#000000\"\n ></temba-textinput>\n </div>\n </div>\n </temba-field>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/colorpicker/ColorPicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, PropertyValueMap } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { getClasses, hslToHex } from '../utils';\nimport { TextInput } from '../textinput/TextInput';\n\nexport class ColorPicker extends FormElement {\n @property({ type: Boolean })\n expanded = false;\n\n @property({ type: String })\n previewColor = '#ffffff';\n\n @property({ type: String })\n labelColor = '#ffffffee';\n\n @property({ type: Boolean })\n selecting = false;\n\n @property({ type: Number }) hue: number;\n @property({ type: Number }) saturation = 100;\n @property({ type: Number }) lightness = 50;\n @property({ type: String }) hex = '';\n\n static get styles() {\n return css`\n :host {\n color: var(--color-text);\n display: inline-block;\n --curvature: 0.55em;\n width: 100%;\n\n --temba-textinput-padding: 0.4em;\n }\n\n temba-textinput {\n margin-left: 0.3em;\n width: 5em;\n }\n\n temba-field {\n display: block;\n width: 100%;\n }\n\n .wrapper {\n border: 1px solid var(--color-widget-border);\n padding: calc(var(--curvature) / 2);\n border-radius: calc(var(--curvature) * 1.5);\n transition: all calc(var(--transition-speed) * 2) var(--bounce);\n\n display: flex;\n flex-grow: 0;\n }\n\n .picker-wrapper {\n display: flex;\n flex-direction: row;\n align-items: stretch;\n transition: all calc(var(--transition-speed) * 2) var(--bounce);\n flex-grow: 0;\n }\n\n .preview {\n width: initial;\n border-radius: var(--curvature);\n padding: 0.2em 0.5em;\n font-weight: 400;\n border: 2px solid rgba(0, 0, 0, 0.1);\n white-space: nowrap;\n cursor: pointer;\n transition: transform calc(var(--transition-speed) * 0.5) var(--bounce);\n }\n\n .preview.selecting {\n transform: scale(1.05);\n }\n\n .wrapper.expanded {\n flex-grow: 1 !important;\n }\n\n .wrapper.expanded .picker-wrapper {\n flex-grow: 1 !important;\n }\n\n .wrapper.expanded .preview {\n pointer-events: none;\n }\n\n .wrapper.expanded .color-picker {\n margin-left: calc(var(--curvature) / 2);\n }\n\n .wrapper.expanded temba-textinput {\n display: block;\n }\n\n .color-picker {\n border-radius: var(--curvature);\n cursor: pointer;\n transition: all calc(var(--transition-speed) * 2) var(--bounce);\n flex-grow: 1;\n position: relative;\n width: 100%;\n height: 100%;\n background-image: linear-gradient(\n to bottom,\n rgba(0, 0, 0, 0) 60%,\n rgba(0, 0, 0, 0.5) 90%,\n rgba(0, 0, 0, 1)\n ),\n linear-gradient(\n to top,\n rgba(255, 255, 255, 0) 60%,\n rgba(255, 255, 255, 0.8) 90%,\n rgba(255, 255, 255, 1)\n ),\n linear-gradient(\n to right,\n hsla(0, 100%, 50%, 1),\n hsla(60, 100%, 50%, 1),\n hsla(120, 100%, 50%, 1),\n hsla(180, 100%, 50%, 1),\n hsla(240, 100%, 50%, 1),\n hsla(300, 100%, 50%, 1),\n hsla(360, 100%, 50%, 1)\n );\n mix-blend-mode: multiply;\n }\n\n .color-picker:focus {\n outline: none;\n }\n `;\n }\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.firstUpdated(_changedProperties);\n this.setValue(this.value);\n }\n\n public updated(changed: Map<string, any>): void {\n super.updated(changed);\n\n if (changed.has('value')) {\n this.previewColor = this.value || '#9c9c9c';\n this.hex = this.value;\n }\n\n if (changed.has('selecting')) {\n if (this.selecting) {\n window.setTimeout(() => {\n this.selecting = false;\n }, 100);\n }\n }\n\n if (changed.has('previewLabel') && this.hue) {\n this.hex = hslToHex(this.hue, this.saturation, this.lightness);\n }\n }\n\n private handleBlur(event: FocusEvent) {\n if (this.expanded) {\n this.expanded = false;\n }\n }\n\n private handleMouseOut(event: MouseEvent) {\n this.previewColor = this.value;\n this.hex = this.value;\n }\n\n private handleMouseMove(event: MouseEvent) {\n if (this.expanded) {\n const rect = (event.target as HTMLElement).getBoundingClientRect();\n const x = event.clientX - rect.left;\n const y = event.clientY - rect.top;\n this.hue = (x / rect.width) * 360;\n this.lightness = 100 - (y / rect.height) * 100;\n this.previewColor = `hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`;\n this.hex = hslToHex(this.hue, this.saturation, this.lightness);\n }\n }\n\n private handlePreviewClick(event: MouseEvent) {\n this.expanded = !this.expanded;\n this.selecting = true;\n (this.shadowRoot.querySelector('.color-picker') as HTMLDivElement).focus();\n }\n\n private handleColorClick(event: MouseEvent) {\n if (this.expanded) {\n const rect = (event.target as HTMLElement).getBoundingClientRect();\n const x = event.clientX - rect.left;\n const y = event.clientY - rect.top;\n this.hue = (x / rect.width) * 360;\n this.lightness = 100 - (y / rect.height) * 100;\n this.previewColor = `hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`;\n this.setValue(this.hex);\n this.selecting = true;\n this.expanded = false;\n }\n\n if (!this.expanded) {\n //\n }\n }\n\n private handleHexInput(event: InputEvent) {\n const hex = (event.target as TextInput).value;\n if (hex.startsWith('#')) {\n this.previewColor = hex;\n this.setValue(hex);\n }\n }\n\n public serializeValue(value: any): string {\n return value;\n }\n\n public render() {\n return html`\n <temba-field\n name=${this.name}\n .helpText=${this.helpText}\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n .hideLabel=${this.hideLabel}\n .disabled=${this.disabled}\n >\n <div style=\"display:flex\" tabindex=\"0\">\n <div class=${getClasses({ wrapper: true, expanded: this.expanded })}>\n <div class=${getClasses({ 'picker-wrapper': true })}>\n <div\n class=${getClasses({\n preview: true,\n selecting: this.selecting,\n })}\n style=\"color:${this.labelColor};background:${this.previewColor}\"\n @click=${this.handlePreviewClick}\n >\n ${this.label}\n </div>\n <div\n class=\"color-picker\"\n tabindex=\"0\"\n @blur=${this.handleBlur}\n @mousemove=${this.handleMouseMove}\n @mouseout=${this.handleMouseOut}\n @click=${this.handleColorClick}\n ></div>\n </div>\n <temba-textinput\n value=${this.hex}\n @input=${this.handleHexInput}\n placeholder=\"#000000\"\n ></temba-textinput>\n </div>\n </div>\n </temba-field>\n `;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContentMenu.js","sourceRoot":"","sources":["../../../src/list/ContentMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\n\nimport { RapidElement } from '../RapidElement';\nimport { getUrl, WebResponse } from '../utils';\n\nconst HEADERS = {\n 'Temba-Content-Menu': '1',\n 'Temba-Spa': '1',\n};\nexport interface ContentMenuItem {\n type: string;\n as_button: boolean;\n label: string;\n url: string;\n disabled: boolean;\n modal_id: string;\n on_submit: string;\n primary: boolean;\n title: string;\n on_click: null;\n link_class: string;\n}\n\nexport enum ContentMenuItemType {\n LINK = 'link',\n JS = 'js',\n URL_POST = 'url_post',\n MODAX = 'modax',\n DIVIDER = 'divider',\n}\n\nexport class ContentMenu extends RapidElement {\n static get styles() {\n return css`\n .container {\n --button-y: 0.4em;\n --button-x: 1em;\n display: flex;\n }\n\n .button_item,\n .primary_button_item {\n margin-left: 1rem;\n }\n\n .toggle {\n --icon-color: rgb(102, 102, 102);\n padding: 0.5rem;\n margin-left: 0.5rem;\n }\n\n .toggle:hover {\n background: rgba(0, 0, 0, 0.05);\n border-radius: var(--curvature);\n --icon-color: rgb(136, 136, 136);\n }\n\n .dropdown {\n padding: 1rem 1.5rem;\n color: rgb(45, 45, 45);\n z-index: 50;\n min-width: 200px;\n }\n\n .divider {\n border-bottom: 1px solid rgb(237, 237, 237);\n margin: 1rem -1.5em;\n }\n\n .item {\n white-space: nowrap;\n margin: 0.2em 0em;\n font-size: 1.1rem;\n cursor: pointer;\n font-weight: 400;\n }\n\n .item:hover {\n color:
|
|
1
|
+
{"version":3,"file":"ContentMenu.js","sourceRoot":"","sources":["../../../src/list/ContentMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\n\nimport { RapidElement } from '../RapidElement';\nimport { getUrl, WebResponse } from '../utils';\n\nconst HEADERS = {\n 'Temba-Content-Menu': '1',\n 'Temba-Spa': '1',\n};\nexport interface ContentMenuItem {\n type: string;\n as_button: boolean;\n label: string;\n url: string;\n disabled: boolean;\n modal_id: string;\n on_submit: string;\n primary: boolean;\n title: string;\n on_click: null;\n link_class: string;\n}\n\nexport enum ContentMenuItemType {\n LINK = 'link',\n JS = 'js',\n URL_POST = 'url_post',\n MODAX = 'modax',\n DIVIDER = 'divider',\n}\n\nexport class ContentMenu extends RapidElement {\n static get styles() {\n return css`\n .container {\n --button-y: 0.4em;\n --button-x: 1em;\n display: flex;\n }\n\n .button_item,\n .primary_button_item {\n margin-left: 1rem;\n }\n\n .toggle {\n --icon-color: rgb(102, 102, 102);\n padding: 0.5rem;\n margin-left: 0.5rem;\n }\n\n .toggle:hover {\n background: rgba(0, 0, 0, 0.05);\n border-radius: var(--curvature);\n --icon-color: rgb(136, 136, 136);\n }\n\n .dropdown {\n padding: 1rem 1.5rem;\n color: rgb(45, 45, 45);\n z-index: 50;\n min-width: 200px;\n }\n\n .divider {\n border-bottom: 1px solid rgb(237, 237, 237);\n margin: 1rem -1.5em;\n }\n\n .item {\n white-space: nowrap;\n margin: 0.2em 0em;\n font-size: 1.1rem;\n cursor: pointer;\n font-weight: 400;\n }\n\n .item:hover {\n color: var(--color-link-primary);\n }\n `;\n }\n\n @property({ type: String })\n endpoint: string;\n\n @property({ type: Number })\n legacy: number;\n\n @property({ type: Array, attribute: false })\n buttons: ContentMenuItem[] = [];\n\n @property({ type: Array, attribute: false })\n items: ContentMenuItem[] = [];\n\n private fetchContentMenu() {\n const url = this.endpoint;\n if (url) {\n const legacy = this.legacy;\n const headers = HEADERS;\n if (legacy) {\n delete headers['Temba-Spa'];\n }\n\n //ok, fetch the content menu\n getUrl(url, null, headers)\n .then((response: WebResponse) => {\n const json = response.json;\n const contentMenu = json.items as ContentMenuItem[];\n\n //populate (or initialize) the buttons and items\n if (contentMenu) {\n this.buttons = contentMenu.filter(item => item.as_button);\n this.items = contentMenu.filter(item => !item.as_button);\n } else {\n this.buttons = [];\n this.items = [];\n }\n\n //fire custom loaded event type when we're finished\n this.fireCustomEvent(CustomEventType.Loaded, {\n buttons: this.buttons,\n items: this.items,\n });\n })\n .catch((error: any) => {\n console.error(error);\n });\n }\n }\n\n public refresh() {\n this.fetchContentMenu();\n }\n\n protected updated(changes: Map<string, any>) {\n super.updated(changes);\n\n if (changes.has('endpoint') || changes.has('legacy')) {\n this.fetchContentMenu();\n }\n }\n\n private handleItemClicked(item: ContentMenuItem, event: MouseEvent) {\n this.fireCustomEvent(CustomEventType.Selection, { item, event });\n }\n\n public render(): TemplateResult {\n return html`\n <div class=\"container\">\n ${this.buttons.map(button => {\n return html`<temba-button\n class=\"${button.primary ? 'primary_button_item' : 'button_item'}\"\n name=${button.label}\n @click=${event => this.handleItemClicked(button, event)}\n >\n ${button.label}\n </temba-button>`;\n })}\n ${this.items && this.items.length > 0\n ? html` <temba-dropdown\n arrowsize=\"8\"\n arrowoffset=\"-12\"\n offsetx=\"-200\"\n offsety=\"6\"\n >\n <div slot=\"toggle\" class=\"toggle\">\n <temba-icon name=\"menu\" size=\"1.5\"></temba-icon>\n </div>\n <div slot=\"dropdown\" class=\"dropdown\">\n ${this.items.map(item => {\n if (item.type === ContentMenuItemType.DIVIDER) {\n return html` <div class=\"divider\"></div>`;\n } else {\n return html` <div\n class=\"item\"\n name=${item.label}\n @click=${event => this.handleItemClicked(item, event)}\n >\n ${item.label}\n </div>`;\n }\n })}\n </div>\n </temba-dropdown>`\n : null}\n </div>\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { html, css } from 'lit';
|
|
1
|
+
import { html, css, PropertyValueMap } from 'lit';
|
|
2
2
|
import { FormElement } from '../FormElement';
|
|
3
3
|
import { property } from 'lit/decorators.js';
|
|
4
4
|
import { getClasses, hslToHex } from '../utils';
|
|
@@ -135,6 +135,13 @@ export class ColorPicker extends FormElement {
|
|
|
135
135
|
`;
|
|
136
136
|
}
|
|
137
137
|
|
|
138
|
+
protected firstUpdated(
|
|
139
|
+
_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
|
|
140
|
+
): void {
|
|
141
|
+
super.firstUpdated(_changedProperties);
|
|
142
|
+
this.setValue(this.value);
|
|
143
|
+
}
|
|
144
|
+
|
|
138
145
|
public updated(changed: Map<string, any>): void {
|
|
139
146
|
super.updated(changed);
|
|
140
147
|
|