@nyaruka/temba-components 0.56.1 → 0.57.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 +7 -0
- package/dist/{86c3ca3f.js → 07c90857.js} +1 -1
- package/dist/index.js +1 -1
- 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/FormElement.js.map +1 -1
- package/out-tsc/src/checkbox/Checkbox.js +3 -3
- package/out-tsc/src/checkbox/Checkbox.js.map +1 -1
- package/out-tsc/test/temba-checkbox.test.js +54 -0
- package/out-tsc/test/temba-checkbox.test.js.map +1 -1
- package/package.json +1 -1
- package/src/FormElement.ts +1 -1
- package/src/checkbox/Checkbox.ts +3 -4
- package/test/temba-checkbox.test.ts +67 -0
package/CHANGELOG.md
CHANGED
|
@@ -4,8 +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.57.0](https://github.com/nyaruka/temba-components/compare/v0.56.1...v0.57.0)
|
|
8
|
+
|
|
9
|
+
- Support arbitrary checkbox values [`#352`](https://github.com/nyaruka/temba-components/pull/352)
|
|
10
|
+
- Extra test to make sure arbitrary values aren't sent unless checked [`1198250`](https://github.com/nyaruka/temba-components/commit/1198250e8e244a5af18a276efceaba1b793a4906)
|
|
11
|
+
|
|
7
12
|
#### [v0.56.1](https://github.com/nyaruka/temba-components/compare/v0.56.0...v0.56.1)
|
|
8
13
|
|
|
14
|
+
> 25 July 2023
|
|
15
|
+
|
|
9
16
|
- Add icon spin attribute [`#351`](https://github.com/nyaruka/temba-components/pull/351)
|
|
10
17
|
|
|
11
18
|
#### [v0.56.0](https://github.com/nyaruka/temba-components/compare/v0.55.0...v0.56.0)
|
|
@@ -48,7 +48,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
48
48
|
cursor: not-allowed;
|
|
49
49
|
--icon-color: #ccc;
|
|
50
50
|
}
|
|
51
|
-
`}updated(t){super.updated(t),t.has("checked")&&(this.checked||this.partial?this.value
|
|
51
|
+
`}updated(t){super.updated(t),(t.has("checked")||t.has("value"))&&(this.checked||this.partial?this.internals.setFormValue(this.value||"1"):this.internals.setFormValue(void 0),this.fireEvent("change"))}serializeValue(t){return t}handleClick(){this.disabled||(this.checked=!this.checked)}click(){this.handleClick(),super.click()}render(){const t=D`<temba-icon
|
|
52
52
|
name="${this.checked?pt.checkbox_checked:this.partial?pt.checkbox_partial:pt.checkbox}"
|
|
53
53
|
size="${this.size}"
|
|
54
54
|
animatechange="${this.animateChange}"
|
package/dist/index.js
CHANGED
|
@@ -48,7 +48,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
48
48
|
cursor: not-allowed;
|
|
49
49
|
--icon-color: #ccc;
|
|
50
50
|
}
|
|
51
|
-
`}updated(t){super.updated(t),t.has("checked")&&(this.checked||this.partial?this.value
|
|
51
|
+
`}updated(t){super.updated(t),(t.has("checked")||t.has("value"))&&(this.checked||this.partial?this.internals.setFormValue(this.value||"1"):this.internals.setFormValue(void 0),this.fireEvent("change"))}serializeValue(t){return t}handleClick(){this.disabled||(this.checked=!this.checked)}click(){this.handleClick(),super.click()}render(){const t=D`<temba-icon
|
|
52
52
|
name="${this.checked?pt.checkbox_checked:this.partial?pt.checkbox_partial:pt.checkbox}"
|
|
53
53
|
size="${this.size}"
|
|
54
54
|
animatechange="${this.animateChange}"
|
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:"07c90857.js",revision:"5de2ae0e3aa744fc4d44798640aa8de5"},{url:"templates/components-body.html",revision:"45e1d5154c73e6d417470774a833c96a"},{url:"templates/components-head.html",revision:"6fad6d6b3861e55520627ca3f1691471"}],{}),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/7cde6c01a9aaa48d1b7619432a103228/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\": \"07c90857.js\",\n \"revision\": \"5de2ae0e3aa744fc4d44798640aa8de5\"\n },\n {\n \"url\": \"templates/components-body.html\",\n \"revision\": \"45e1d5154c73e6d417470774a833c96a\"\n },\n {\n \"url\": \"templates/components-head.html\",\n \"revision\": \"6fad6d6b3861e55520627ca3f1691471\"\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/07c90857.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.57.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/07c90857.js" crossorigin="anonymous">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormElement.js","sourceRoot":"","sources":["../../src/FormElement.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,YAAY;IAmC3C;QACE,KAAK,EAAE,CAAC;QAlCV,SAAI,GAAG,EAAE,CAAC;QAqBV,UAAK,GAAG,IAAI,CAAC;QAGb,cAAS,GAAgB,IAAI,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;QAQf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC1C,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YAClC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACzC;IACH,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7B,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAEM,QAAQ,CAAC,KAAU;QACxB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAEM,oBAAoB;QACzB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC;IAEM,cAAc,CAAC,KAAU;QAC9B,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;;AAlCM,0BAAc,GAAG,IAAI,CAAC;AA7B7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;6CAClC;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAClC;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAClC;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;8CAClC;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CACT;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACd;AAGb;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;8CACD;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACX","sourcesContent":["import { RapidElement } from './RapidElement';\nimport { property } from 'lit/decorators.js';\n\n/**\n * FormElement is a component that appends a hidden input (outside of\n * its own shadow) with its value to be included in forms.\n */\nexport class FormElement extends RapidElement {\n @property({ type: String })\n name = '';\n\n @property({ type: String, attribute: 'help_text' })\n helpText: string;\n\n @property({ type: Boolean, attribute: 'help_always' })\n helpAlways: boolean;\n\n @property({ type: Boolean, attribute: 'widget_only' })\n widgetOnly: boolean;\n\n @property({ type: Boolean, attribute: 'hide_label' })\n hideLabel: boolean;\n\n @property({ type: String })\n label: string;\n\n @property({ type: Array })\n errors: string[];\n\n @property({ type: String })\n value = null;\n\n @property({ attribute: false })\n inputRoot: HTMLElement = this;\n\n @property({ type: Boolean })\n disabled = false;\n\n static formAssociated = true;\n\n
|
|
1
|
+
{"version":3,"file":"FormElement.js","sourceRoot":"","sources":["../../src/FormElement.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,YAAY;IAmC3C;QACE,KAAK,EAAE,CAAC;QAlCV,SAAI,GAAG,EAAE,CAAC;QAqBV,UAAK,GAAG,IAAI,CAAC;QAGb,cAAS,GAAgB,IAAI,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;QAQf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC1C,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YAClC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACzC;IACH,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7B,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAEM,QAAQ,CAAC,KAAU;QACxB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAEM,oBAAoB;QACzB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC;IAEM,cAAc,CAAC,KAAU;QAC9B,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;;AAlCM,0BAAc,GAAG,IAAI,CAAC;AA7B7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;6CAClC;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAClC;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAClC;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;8CAClC;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CACT;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACd;AAGb;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;8CACD;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACX","sourcesContent":["import { RapidElement } from './RapidElement';\nimport { property } from 'lit/decorators.js';\n\n/**\n * FormElement is a component that appends a hidden input (outside of\n * its own shadow) with its value to be included in forms.\n */\nexport class FormElement extends RapidElement {\n @property({ type: String })\n name = '';\n\n @property({ type: String, attribute: 'help_text' })\n helpText: string;\n\n @property({ type: Boolean, attribute: 'help_always' })\n helpAlways: boolean;\n\n @property({ type: Boolean, attribute: 'widget_only' })\n widgetOnly: boolean;\n\n @property({ type: Boolean, attribute: 'hide_label' })\n hideLabel: boolean;\n\n @property({ type: String })\n label: string;\n\n @property({ type: Array })\n errors: string[];\n\n @property({ type: String })\n value = null;\n\n @property({ attribute: false })\n inputRoot: HTMLElement = this;\n\n @property({ type: Boolean })\n disabled = false;\n\n static formAssociated = true;\n\n protected internals: ElementInternals;\n\n constructor() {\n super();\n this.internals = this.attachInternals();\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n if (changedProperties.has('value')) {\n this.internals.setFormValue(this.value);\n }\n }\n\n get form() {\n return this.internals.form;\n }\n\n get type() {\n return this.localName;\n }\n\n public setValue(value: any) {\n this.value = this.serializeValue(value);\n }\n\n public getDeserializedValue(): any {\n return JSON.parse(this.value);\n }\n\n public serializeValue(value: any): string {\n return JSON.stringify(value);\n }\n}\n"]}
|
|
@@ -66,12 +66,12 @@ export class Checkbox extends FormElement {
|
|
|
66
66
|
}
|
|
67
67
|
updated(changes) {
|
|
68
68
|
super.updated(changes);
|
|
69
|
-
if (changes.has('checked')) {
|
|
69
|
+
if (changes.has('checked') || changes.has('value')) {
|
|
70
70
|
if (this.checked || this.partial) {
|
|
71
|
-
this.value
|
|
71
|
+
this.internals.setFormValue(this.value || '1');
|
|
72
72
|
}
|
|
73
73
|
else {
|
|
74
|
-
this.
|
|
74
|
+
this.internals.setFormValue(undefined);
|
|
75
75
|
}
|
|
76
76
|
this.fireEvent('change');
|
|
77
77
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/checkbox/Checkbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,MAAM,OAAO,QAAS,SAAQ,WAAW;IAAzC;;QAwDE,SAAI,GAAG,EAAE,CAAC;QASV,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,GAAG,CAAC;QAGX,kBAAa,GAAG,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/checkbox/Checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../vectoricon';\n\nexport class Checkbox extends FormElement {\n static get styles() {\n return css`\n :host {\n color: var(--color-text);\n display: inline-block;\n }\n\n :host([label]) {\n width: 100%;\n }\n\n .wrapper.label {\n padding: 10px;\n border-radius: var(--curvature);\n }\n\n .wrapper.label:hover {\n background: #f9f9f9;\n }\n\n temba-field {\n --help-text-margin-left: 24px;\n cursor: pointer;\n }\n\n .checkbox-container {\n cursor: pointer;\n display: flex;\n user-select: none;\n -webkit-user-select: none;\n }\n\n .checkbox-label {\n font-family: var(--font-family);\n padding: 0px;\n margin-left: 8px;\n font-weight: 300;\n font-size: 14px;\n line-height: 19px;\n flex-grow: 1;\n }\n\n .far {\n height: 16px;\n margin-top: 1px;\n }\n\n .disabled {\n cursor: not-allowed;\n --icon-color: #ccc;\n }\n `;\n }\n\n @property({ type: String })\n name = '';\n\n @property({ type: Boolean })\n checked: boolean;\n\n @property({ type: Boolean })\n partial: boolean;\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Number })\n size = 1.2;\n\n @property({ type: String })\n animateChange = 'pulse';\n\n public updated(changes: Map<string, any>) {\n super.updated(changes);\n if (changes.has('checked') || changes.has('value')) {\n if (this.checked || this.partial) {\n this.internals.setFormValue(this.value || '1');\n } else {\n this.internals.setFormValue(undefined);\n }\n this.fireEvent('change');\n }\n }\n\n public serializeValue(value: any): string {\n return value;\n }\n\n private handleClick(): void {\n if (!this.disabled) {\n this.checked = !this.checked;\n }\n }\n\n public click(): void {\n this.handleClick();\n super.click();\n }\n\n public render(): TemplateResult {\n const icon = html`<temba-icon\n name=\"${this.checked\n ? Icon.checkbox_checked\n : this.partial\n ? Icon.checkbox_partial\n : Icon.checkbox}\"\n size=\"${this.size}\"\n animatechange=\"${this.animateChange}\"\n />`;\n\n this.label = this.label ? this.label.trim() : null;\n\n return html`\n <div class=\"wrapper ${this.label ? 'label' : ''}\">\n <temba-field\n name=${this.name}\n .helpText=${this.helpText}\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n .helpAlways=${true}\n ?disabled=${this.disabled}\n @click=${this.handleClick}\n >\n <div class=\"checkbox-container ${this.disabled ? 'disabled' : ''}\">\n ${icon}\n ${this.label\n ? html`<div class=\"checkbox-label\">${this.label}</div>`\n : null}\n </div>\n </temba-field>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -71,5 +71,59 @@ describe('temba-checkbox', () => {
|
|
|
71
71
|
expect(wrapperDivEl).to.equal(null);
|
|
72
72
|
await assertScreenshot('checkbox/checkbox-whitespace-label-no-background-hover', getClip(el));
|
|
73
73
|
});
|
|
74
|
+
it('submits as boolean without value', async () => {
|
|
75
|
+
const form = (await fixture(html `
|
|
76
|
+
<form>
|
|
77
|
+
<temba-checkbox name="my-cb"></temba-checkbox>
|
|
78
|
+
</form>
|
|
79
|
+
`));
|
|
80
|
+
// if we didn't click it, it shouldn't be in the form data
|
|
81
|
+
let data = new FormData(form);
|
|
82
|
+
expect(data.get('my-cb')).to.equal(null);
|
|
83
|
+
// click our checkbox
|
|
84
|
+
const checkbox = form.querySelector('temba-checkbox');
|
|
85
|
+
await click('temba-checkbox');
|
|
86
|
+
expect(checkbox.checked).to.equal(true);
|
|
87
|
+
// clicking a non-value checkbox should set it to 1
|
|
88
|
+
data = new FormData(form);
|
|
89
|
+
expect(data.get('my-cb')).to.equal('1');
|
|
90
|
+
});
|
|
91
|
+
it('supports custom values', async () => {
|
|
92
|
+
const form = (await fixture(html `
|
|
93
|
+
<form>
|
|
94
|
+
<temba-checkbox name="my-cb" value="3"></temba-checkbox>
|
|
95
|
+
</form>
|
|
96
|
+
`));
|
|
97
|
+
// if we didn't click it, it shouldn't be in the form data
|
|
98
|
+
let data = new FormData(form);
|
|
99
|
+
expect(data.get('my-cb')).to.equal(null);
|
|
100
|
+
// click our checkbox
|
|
101
|
+
const checkbox = form.querySelector('temba-checkbox');
|
|
102
|
+
await click('temba-checkbox');
|
|
103
|
+
expect(checkbox.checked).to.equal(true);
|
|
104
|
+
// clicking a non-value checkbox should set it to 1
|
|
105
|
+
data = new FormData(form);
|
|
106
|
+
expect(data.get('my-cb')).to.equal('3');
|
|
107
|
+
});
|
|
108
|
+
it('supports programmtically updated values', async () => {
|
|
109
|
+
// start with empty value
|
|
110
|
+
const form = (await fixture(html `
|
|
111
|
+
<form>
|
|
112
|
+
<temba-checkbox name="my-cb"></temba-checkbox>
|
|
113
|
+
</form>
|
|
114
|
+
`));
|
|
115
|
+
// update our value directly
|
|
116
|
+
const checkbox = form.querySelector('temba-checkbox');
|
|
117
|
+
checkbox.value = '5';
|
|
118
|
+
// we set a custom value, but we still aren't checked
|
|
119
|
+
let data = new FormData(form);
|
|
120
|
+
expect(data.get('my-cb')).to.equal(null);
|
|
121
|
+
// click our checkbox
|
|
122
|
+
await click('temba-checkbox');
|
|
123
|
+
expect(checkbox.checked).to.equal(true);
|
|
124
|
+
// clicking a non-value checkbox should set it to 1
|
|
125
|
+
data = new FormData(form);
|
|
126
|
+
expect(data.get('my-cb')).to.equal('5');
|
|
127
|
+
});
|
|
74
128
|
});
|
|
75
129
|
//# sourceMappingURL=temba-checkbox.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"temba-checkbox.test.js","sourceRoot":"","sources":["../../test/temba-checkbox.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\nimport { Checkbox } from '../src/checkbox/Checkbox';\nimport { assertScreenshot, getClip } from './utils.test';\n\ndescribe('temba-checkbox', () => {\n it('renders default checkbox', async () => {\n const el: Checkbox = await fixture(html`\n <temba-checkbox label=\"My Checkbox\"></temba-checkbox>\n `);\n\n expect(el.label).to.equal('My Checkbox');\n await assertScreenshot('checkbox/default', getClip(el));\n });\n\n it('can select by clicking on the label', async () => {\n const el: Checkbox = await fixture(html`\n <temba-checkbox\n label=\"My Checkbox\"\n animatechange=\"false\"\n ></temba-checkbox>\n `);\n\n (el.shadowRoot.querySelector('.checkbox-label') as HTMLDivElement).click();\n expect(el.checked).to.equal(true);\n await assertScreenshot('checkbox/checked', getClip(el));\n });\n\n it('fires change event on click', async () => {\n // eslint-disable-next-line no-async-promise-executor\n return new Promise<void>(async resolve => {\n const checkbox: Checkbox = await fixture(html`\n <temba-checkbox label=\"My Checkbox\"></temba-checkbox>\n `);\n\n checkbox.addEventListener('change', () => {\n resolve();\n });\n\n click('temba-checkbox');\n });\n });\n\n it('checks via click method', async () => {\n const checkbox: Checkbox = await fixture(html`\n <temba-checkbox label=\"My Checkbox\"></temba-checkbox>\n `);\n checkbox.click();\n expect(checkbox.checked).to.equal(true);\n });\n\n it('has background hover effect when label is set', async () => {\n const el: Checkbox = await fixture(html`\n <temba-checkbox name=\"My Checkbox\" label=\"My Label\"></temba-checkbox>\n `);\n expect(el.label).to.equal('My Label');\n //the \".wrapper.label\" style results in the background hover effect\n const wrapperDivEl = el.shadowRoot.querySelector(\n 'div.wrapper.label'\n ) as HTMLDivElement;\n expect(wrapperDivEl).to.not.equal(null);\n await assertScreenshot(\n 'checkbox/checkbox-label-background-hover',\n getClip(el)\n );\n });\n\n //note: sometimes upstream logic sets an empty checkbox label to the name value,\n //but this is the expected behavior if the label value is still empty,\n //upon rendering the component\n it('has no background hover effect when label is empty', async () => {\n const el: Checkbox = await fixture(html`\n <temba-checkbox name=\"My Checkbox\"></temba-checkbox>\n `);\n expect(el.label).to.equal(null);\n //the \".wrapper.label\" style results in the background hover effect\n const wrapperDivEl = el.shadowRoot.querySelector(\n 'div.wrapper.label'\n ) as HTMLDivElement;\n expect(wrapperDivEl).to.equal(null);\n await assertScreenshot(\n 'checkbox/checkbox-no-label-no-background-hover',\n getClip(el)\n );\n });\n\n it('has no background hover effect when label is whitespace', async () => {\n const el: Checkbox = await fixture(html`\n <temba-checkbox name=\"My Checkbox\" label=\" \"></temba-checkbox>\n `);\n expect(el.label).to.equal('');\n //the \".wrapper.label\" style results in the background hover effect\n const wrapperDivEl = el.shadowRoot.querySelector(\n 'div.wrapper.label'\n ) as HTMLDivElement;\n expect(wrapperDivEl).to.equal(null);\n await assertScreenshot(\n 'checkbox/checkbox-whitespace-label-no-background-hover',\n getClip(el)\n );\n });\n});\n"]}
|
|
1
|
+
{"version":3,"file":"temba-checkbox.test.js","sourceRoot":"","sources":["../../test/temba-checkbox.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\nimport { Checkbox } from '../src/checkbox/Checkbox';\nimport { assertScreenshot, getClip } from './utils.test';\n\ndescribe('temba-checkbox', () => {\n it('renders default checkbox', async () => {\n const el: Checkbox = await fixture(html`\n <temba-checkbox label=\"My Checkbox\"></temba-checkbox>\n `);\n\n expect(el.label).to.equal('My Checkbox');\n await assertScreenshot('checkbox/default', getClip(el));\n });\n\n it('can select by clicking on the label', async () => {\n const el: Checkbox = await fixture(html`\n <temba-checkbox\n label=\"My Checkbox\"\n animatechange=\"false\"\n ></temba-checkbox>\n `);\n\n (el.shadowRoot.querySelector('.checkbox-label') as HTMLDivElement).click();\n expect(el.checked).to.equal(true);\n await assertScreenshot('checkbox/checked', getClip(el));\n });\n\n it('fires change event on click', async () => {\n // eslint-disable-next-line no-async-promise-executor\n return new Promise<void>(async resolve => {\n const checkbox: Checkbox = await fixture(html`\n <temba-checkbox label=\"My Checkbox\"></temba-checkbox>\n `);\n\n checkbox.addEventListener('change', () => {\n resolve();\n });\n\n click('temba-checkbox');\n });\n });\n\n it('checks via click method', async () => {\n const checkbox: Checkbox = await fixture(html`\n <temba-checkbox label=\"My Checkbox\"></temba-checkbox>\n `);\n checkbox.click();\n expect(checkbox.checked).to.equal(true);\n });\n\n it('has background hover effect when label is set', async () => {\n const el: Checkbox = await fixture(html`\n <temba-checkbox name=\"My Checkbox\" label=\"My Label\"></temba-checkbox>\n `);\n expect(el.label).to.equal('My Label');\n //the \".wrapper.label\" style results in the background hover effect\n const wrapperDivEl = el.shadowRoot.querySelector(\n 'div.wrapper.label'\n ) as HTMLDivElement;\n expect(wrapperDivEl).to.not.equal(null);\n await assertScreenshot(\n 'checkbox/checkbox-label-background-hover',\n getClip(el)\n );\n });\n\n //note: sometimes upstream logic sets an empty checkbox label to the name value,\n //but this is the expected behavior if the label value is still empty,\n //upon rendering the component\n it('has no background hover effect when label is empty', async () => {\n const el: Checkbox = await fixture(html`\n <temba-checkbox name=\"My Checkbox\"></temba-checkbox>\n `);\n expect(el.label).to.equal(null);\n //the \".wrapper.label\" style results in the background hover effect\n const wrapperDivEl = el.shadowRoot.querySelector(\n 'div.wrapper.label'\n ) as HTMLDivElement;\n expect(wrapperDivEl).to.equal(null);\n await assertScreenshot(\n 'checkbox/checkbox-no-label-no-background-hover',\n getClip(el)\n );\n });\n\n it('has no background hover effect when label is whitespace', async () => {\n const el: Checkbox = await fixture(html`\n <temba-checkbox name=\"My Checkbox\" label=\" \"></temba-checkbox>\n `);\n expect(el.label).to.equal('');\n //the \".wrapper.label\" style results in the background hover effect\n const wrapperDivEl = el.shadowRoot.querySelector(\n 'div.wrapper.label'\n ) as HTMLDivElement;\n expect(wrapperDivEl).to.equal(null);\n await assertScreenshot(\n 'checkbox/checkbox-whitespace-label-no-background-hover',\n getClip(el)\n );\n });\n\n it('submits as boolean without value', async () => {\n const form = (await fixture(html`\n <form>\n <temba-checkbox name=\"my-cb\"></temba-checkbox>\n </form>\n `)) as HTMLFormElement;\n\n // if we didn't click it, it shouldn't be in the form data\n let data = new FormData(form);\n expect(data.get('my-cb')).to.equal(null);\n\n // click our checkbox\n const checkbox = form.querySelector('temba-checkbox') as Checkbox;\n await click('temba-checkbox');\n expect(checkbox.checked).to.equal(true);\n\n // clicking a non-value checkbox should set it to 1\n data = new FormData(form);\n expect(data.get('my-cb')).to.equal('1');\n });\n\n it('supports custom values', async () => {\n const form = (await fixture(html`\n <form>\n <temba-checkbox name=\"my-cb\" value=\"3\"></temba-checkbox>\n </form>\n `)) as HTMLFormElement;\n\n // if we didn't click it, it shouldn't be in the form data\n let data = new FormData(form);\n expect(data.get('my-cb')).to.equal(null);\n\n // click our checkbox\n const checkbox = form.querySelector('temba-checkbox') as Checkbox;\n await click('temba-checkbox');\n expect(checkbox.checked).to.equal(true);\n\n // clicking a non-value checkbox should set it to 1\n data = new FormData(form);\n expect(data.get('my-cb')).to.equal('3');\n });\n\n it('supports programmtically updated values', async () => {\n // start with empty value\n const form = (await fixture(html`\n <form>\n <temba-checkbox name=\"my-cb\"></temba-checkbox>\n </form>\n `)) as HTMLFormElement;\n\n // update our value directly\n const checkbox = form.querySelector('temba-checkbox') as Checkbox;\n checkbox.value = '5';\n\n // we set a custom value, but we still aren't checked\n let data = new FormData(form);\n expect(data.get('my-cb')).to.equal(null);\n\n // click our checkbox\n await click('temba-checkbox');\n expect(checkbox.checked).to.equal(true);\n\n // clicking a non-value checkbox should set it to 1\n data = new FormData(form);\n expect(data.get('my-cb')).to.equal('5');\n });\n});\n"]}
|
package/package.json
CHANGED
package/src/FormElement.ts
CHANGED
package/src/checkbox/Checkbox.ts
CHANGED
|
@@ -78,13 +78,12 @@ export class Checkbox extends FormElement {
|
|
|
78
78
|
|
|
79
79
|
public updated(changes: Map<string, any>) {
|
|
80
80
|
super.updated(changes);
|
|
81
|
-
if (changes.has('checked')) {
|
|
81
|
+
if (changes.has('checked') || changes.has('value')) {
|
|
82
82
|
if (this.checked || this.partial) {
|
|
83
|
-
this.value
|
|
83
|
+
this.internals.setFormValue(this.value || '1');
|
|
84
84
|
} else {
|
|
85
|
-
this.
|
|
85
|
+
this.internals.setFormValue(undefined);
|
|
86
86
|
}
|
|
87
|
-
|
|
88
87
|
this.fireEvent('change');
|
|
89
88
|
}
|
|
90
89
|
}
|
|
@@ -98,4 +98,71 @@ describe('temba-checkbox', () => {
|
|
|
98
98
|
getClip(el)
|
|
99
99
|
);
|
|
100
100
|
});
|
|
101
|
+
|
|
102
|
+
it('submits as boolean without value', async () => {
|
|
103
|
+
const form = (await fixture(html`
|
|
104
|
+
<form>
|
|
105
|
+
<temba-checkbox name="my-cb"></temba-checkbox>
|
|
106
|
+
</form>
|
|
107
|
+
`)) as HTMLFormElement;
|
|
108
|
+
|
|
109
|
+
// if we didn't click it, it shouldn't be in the form data
|
|
110
|
+
let data = new FormData(form);
|
|
111
|
+
expect(data.get('my-cb')).to.equal(null);
|
|
112
|
+
|
|
113
|
+
// click our checkbox
|
|
114
|
+
const checkbox = form.querySelector('temba-checkbox') as Checkbox;
|
|
115
|
+
await click('temba-checkbox');
|
|
116
|
+
expect(checkbox.checked).to.equal(true);
|
|
117
|
+
|
|
118
|
+
// clicking a non-value checkbox should set it to 1
|
|
119
|
+
data = new FormData(form);
|
|
120
|
+
expect(data.get('my-cb')).to.equal('1');
|
|
121
|
+
});
|
|
122
|
+
|
|
123
|
+
it('supports custom values', async () => {
|
|
124
|
+
const form = (await fixture(html`
|
|
125
|
+
<form>
|
|
126
|
+
<temba-checkbox name="my-cb" value="3"></temba-checkbox>
|
|
127
|
+
</form>
|
|
128
|
+
`)) as HTMLFormElement;
|
|
129
|
+
|
|
130
|
+
// if we didn't click it, it shouldn't be in the form data
|
|
131
|
+
let data = new FormData(form);
|
|
132
|
+
expect(data.get('my-cb')).to.equal(null);
|
|
133
|
+
|
|
134
|
+
// click our checkbox
|
|
135
|
+
const checkbox = form.querySelector('temba-checkbox') as Checkbox;
|
|
136
|
+
await click('temba-checkbox');
|
|
137
|
+
expect(checkbox.checked).to.equal(true);
|
|
138
|
+
|
|
139
|
+
// clicking a non-value checkbox should set it to 1
|
|
140
|
+
data = new FormData(form);
|
|
141
|
+
expect(data.get('my-cb')).to.equal('3');
|
|
142
|
+
});
|
|
143
|
+
|
|
144
|
+
it('supports programmtically updated values', async () => {
|
|
145
|
+
// start with empty value
|
|
146
|
+
const form = (await fixture(html`
|
|
147
|
+
<form>
|
|
148
|
+
<temba-checkbox name="my-cb"></temba-checkbox>
|
|
149
|
+
</form>
|
|
150
|
+
`)) as HTMLFormElement;
|
|
151
|
+
|
|
152
|
+
// update our value directly
|
|
153
|
+
const checkbox = form.querySelector('temba-checkbox') as Checkbox;
|
|
154
|
+
checkbox.value = '5';
|
|
155
|
+
|
|
156
|
+
// we set a custom value, but we still aren't checked
|
|
157
|
+
let data = new FormData(form);
|
|
158
|
+
expect(data.get('my-cb')).to.equal(null);
|
|
159
|
+
|
|
160
|
+
// click our checkbox
|
|
161
|
+
await click('temba-checkbox');
|
|
162
|
+
expect(checkbox.checked).to.equal(true);
|
|
163
|
+
|
|
164
|
+
// clicking a non-value checkbox should set it to 1
|
|
165
|
+
data = new FormData(form);
|
|
166
|
+
expect(data.get('my-cb')).to.equal('5');
|
|
167
|
+
});
|
|
101
168
|
});
|