@nyaruka/temba-components 0.31.0 → 0.31.1
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 +8 -0
- package/dist/{ebe01f3b.js → 0f5edc46.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/checkbox/Checkbox.js +1 -1
- package/out-tsc/src/checkbox/Checkbox.js.map +1 -1
- package/out-tsc/test/temba-checkbox.test.js +2 -2
- package/out-tsc/test/temba-checkbox.test.js.map +1 -1
- package/package.json +1 -1
- package/screenshots/truth/checkbox/checkbox-no-label-no-background-hover.png +0 -0
- package/src/checkbox/Checkbox.ts +1 -1
- package/test/temba-checkbox.test.ts +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -4,8 +4,16 @@ 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.31.1](https://github.com/nyaruka/temba-components/compare/v0.31.0...v0.31.1)
|
|
8
|
+
|
|
9
|
+
- Checkbox label fix [`#192`](https://github.com/nyaruka/temba-components/pull/192)
|
|
10
|
+
- Allow null labels [`ca6e105`](https://github.com/nyaruka/temba-components/commit/ca6e10560fa3ee2099043d26ae1a11c43610d29e)
|
|
11
|
+
- Fix checkboxes with no label [`0587ed9`](https://github.com/nyaruka/temba-components/commit/0587ed9fb6fd1833d2b669d3b6e0f8cb9d710557)
|
|
12
|
+
|
|
7
13
|
#### [v0.31.0](https://github.com/nyaruka/temba-components/compare/v0.30.0...v0.31.0)
|
|
8
14
|
|
|
15
|
+
> 23 August 2022
|
|
16
|
+
|
|
9
17
|
- Add RunList component [`#191`](https://github.com/nyaruka/temba-components/pull/191)
|
|
10
18
|
- fixed goofy checkbox label background hover [`#190`](https://github.com/nyaruka/temba-components/pull/190)
|
|
11
19
|
- added trim for whitespace to remove goofy label background hover [`fd6ed1a`](https://github.com/nyaruka/temba-components/commit/fd6ed1aa961844d997376d025ff817725d63f1cb)
|
|
@@ -52,7 +52,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
|
|
|
52
52
|
name="${this.checked?"check-":""}square"
|
|
53
53
|
size="${this.size}"
|
|
54
54
|
animatechange="${this.animateChange}"
|
|
55
|
-
/>`;return this.label=this.label.trim(),O`
|
|
55
|
+
/>`;return this.label=this.label?this.label.trim():null,O`
|
|
56
56
|
<div class="wrapper ${this.label?"label":""}">
|
|
57
57
|
<temba-field
|
|
58
58
|
name=${this.name}
|
package/dist/index.js
CHANGED
|
@@ -52,7 +52,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
|
|
|
52
52
|
name="${this.checked?"check-":""}square"
|
|
53
53
|
size="${this.size}"
|
|
54
54
|
animatechange="${this.animateChange}"
|
|
55
|
-
/>`;return this.label=this.label.trim(),O`
|
|
55
|
+
/>`;return this.label=this.label?this.label.trim():null,O`
|
|
56
56
|
<div class="wrapper ${this.label?"label":""}">
|
|
57
57
|
<temba-field
|
|
58
58
|
name=${this.name}
|
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:"0f5edc46.js",revision:"097ba917126aaaf8fb39fd1818064d5a"},{url:"templates/components-body.html",revision:"6f32569688a6e41a0519c7c9f0e48512"},{url:"templates/components-head.html",revision:"7627e2204c648033b590b0bbef93051c"}],{}),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/5bd1d1fd318ee51c69d1d153de8a180e/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\": \"0f5edc46.js\",\n \"revision\": \"097ba917126aaaf8fb39fd1818064d5a\"\n },\n {\n \"url\": \"templates/components-body.html\",\n \"revision\": \"6f32569688a6e41a0519c7c9f0e48512\"\n },\n {\n \"url\": \"templates/components-head.html\",\n \"revision\": \"7627e2204c648033b590b0bbef93051c\"\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/0f5edc46.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.31.1"</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/0f5edc46.js" crossorigin="anonymous">
|
|
@@ -93,7 +93,7 @@ export class Checkbox extends FormElement {
|
|
|
93
93
|
size="${this.size}"
|
|
94
94
|
animatechange="${this.animateChange}"
|
|
95
95
|
/>`;
|
|
96
|
-
this.label = this.label.trim();
|
|
96
|
+
this.label = this.label ? this.label.trim() : null;
|
|
97
97
|
return html `
|
|
98
98
|
<div class="wrapper ${this.label ? 'label' : ''}">
|
|
99
99
|
<temba-field
|
|
@@ -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,gBAAgB,CAAC;AAE1C,MAAM,OAAO,QAAS,SAAQ,WAAW;IAAzC;;QAwDE,SAAI,GAAG,EAAE,CAAC;QAMV,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,GAAG,CAAC;QAGX,kBAAa,GAAG,OAAO,CAAC;IA4D1B,CAAC;IA/HC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDT,CAAC;IACJ,CAAC;IAiBM,OAAO,CAAC,OAAyB;QACtC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAC1B,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;aAClB;iBAAM;gBACL,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;aACnB;YAED,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;SAC1B;IACH,CAAC;IAEM,cAAc,CAAC,KAAU;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAC9B;IACH,CAAC;IAEM,KAAK;QACV,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,KAAK,CAAC,KAAK,EAAE,CAAC;IAChB,CAAC;IAEM,MAAM;QACX,MAAM,IAAI,GAAG,IAAI,CAAA;cACP,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;cAC5B,IAAI,CAAC,IAAI;uBACA,IAAI,CAAC,aAAa;OAClC,CAAC;QAEJ,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;
|
|
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,gBAAgB,CAAC;AAE1C,MAAM,OAAO,QAAS,SAAQ,WAAW;IAAzC;;QAwDE,SAAI,GAAG,EAAE,CAAC;QAMV,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,GAAG,CAAC;QAGX,kBAAa,GAAG,OAAO,CAAC;IA4D1B,CAAC;IA/HC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDT,CAAC;IACJ,CAAC;IAiBM,OAAO,CAAC,OAAyB;QACtC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAC1B,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;aAClB;iBAAM;gBACL,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;aACnB;YAED,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;SAC1B;IACH,CAAC;IAEM,cAAc,CAAC,KAAU;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAC9B;IACH,CAAC;IAEM,KAAK;QACV,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,KAAK,CAAC,KAAK,EAAE,CAAC;IAChB,CAAC;IAEM,MAAM;QACX,MAAM,IAAI,GAAG,IAAI,CAAA;cACP,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;cAC5B,IAAI,CAAC,IAAI;uBACA,IAAI,CAAC,aAAa;OAClC,CAAC;QAEJ,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAEnD,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;;iBAEpC,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,QAAQ;oBACf,IAAI,CAAC,MAAM;wBACP,IAAI,CAAC,UAAU;wBACf,IAAI;sBACN,IAAI,CAAC,QAAQ;mBAChB,IAAI,CAAC,WAAW;;2CAEQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;cAC5D,IAAI;cACJ,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,+BAA+B,IAAI,CAAC,KAAK,QAAQ;YACvD,CAAC,CAAC,IAAI;;;;KAIf,CAAC;IACJ,CAAC;CACF;AAxEC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACH","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators';\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 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')) {\n if (this.checked) {\n this.setValue(1);\n } else {\n this.setValue('');\n }\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 ? 'check-' : ''}square\"\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"]}
|
|
@@ -53,9 +53,9 @@ describe('temba-checkbox', () => {
|
|
|
53
53
|
//upon rendering the component
|
|
54
54
|
it('has no background hover effect when label is empty', async () => {
|
|
55
55
|
const el = await fixture(html `
|
|
56
|
-
<temba-checkbox name="My Checkbox"
|
|
56
|
+
<temba-checkbox name="My Checkbox"></temba-checkbox>
|
|
57
57
|
`);
|
|
58
|
-
expect(el.label).to.equal(
|
|
58
|
+
expect(el.label).to.equal(null);
|
|
59
59
|
//the ".wrapper.label" style results in the background hover effect
|
|
60
60
|
const wrapperDivEl = el.shadowRoot.querySelector('div.wrapper.label');
|
|
61
61
|
expect(wrapperDivEl).to.equal(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"temba-checkbox.test.js","sourceRoot":"","sources":["../../test/temba-checkbox.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEzD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACxC,MAAM,EAAE,GAAa,MAAM,OAAO,CAAC,IAAI,CAAA;;KAEtC,CAAC,CAAC;QAEH,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;QACzC,MAAM,gBAAgB,CAAC,kBAAkB,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,EAAE,GAAa,MAAM,OAAO,CAAC,IAAI,CAAA;;;;;KAKtC,CAAC,CAAC;QAEF,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAoB,CAAC,KAAK,EAAE,CAAC;QAC3E,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAClC,MAAM,gBAAgB,CAAC,kBAAkB,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,qDAAqD;QACrD,OAAO,IAAI,OAAO,CAAO,KAAK,EAAC,OAAO,EAAC,EAAE;YACvC,MAAM,QAAQ,GAAa,MAAM,OAAO,CAAC,IAAI,CAAA;;OAE5C,CAAC,CAAC;YAEH,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;gBACvC,OAAO,EAAE,CAAC;YACZ,CAAC,CAAC,CAAC;YAEH,KAAK,CAAC,gBAAgB,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,QAAQ,GAAa,MAAM,OAAO,CAAC,IAAI,CAAA;;KAE5C,CAAC,CAAC;QACH,QAAQ,CAAC,KAAK,EAAE,CAAC;QACjB,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;QAC7D,MAAM,EAAE,GAAa,MAAM,OAAO,CAAC,IAAI,CAAA;;KAEtC,CAAC,CAAC;QACH,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QACtC,mEAAmE;QACnE,MAAM,YAAY,GAAG,EAAE,CAAC,UAAU,CAAC,aAAa,CAC9C,mBAAmB,CACF,CAAC;QACpB,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACxC,MAAM,gBAAgB,CACpB,0CAA0C,EAC1C,OAAO,CAAC,EAAE,CAAC,CACZ,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,gFAAgF;IAChF,sEAAsE;IACtE,8BAA8B;IAC9B,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;QAClE,MAAM,EAAE,GAAa,MAAM,OAAO,CAAC,IAAI,CAAA;;KAEtC,CAAC,CAAC;QACH,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,
|
|
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"]}
|
package/package.json
CHANGED
|
Binary file
|
package/src/checkbox/Checkbox.ts
CHANGED
|
@@ -107,7 +107,7 @@ export class Checkbox extends FormElement {
|
|
|
107
107
|
animatechange="${this.animateChange}"
|
|
108
108
|
/>`;
|
|
109
109
|
|
|
110
|
-
this.label = this.label.trim();
|
|
110
|
+
this.label = this.label ? this.label.trim() : null;
|
|
111
111
|
|
|
112
112
|
return html`
|
|
113
113
|
<div class="wrapper ${this.label ? 'label' : ''}">
|
|
@@ -69,9 +69,9 @@ describe('temba-checkbox', () => {
|
|
|
69
69
|
//upon rendering the component
|
|
70
70
|
it('has no background hover effect when label is empty', async () => {
|
|
71
71
|
const el: Checkbox = await fixture(html`
|
|
72
|
-
<temba-checkbox name="My Checkbox"
|
|
72
|
+
<temba-checkbox name="My Checkbox"></temba-checkbox>
|
|
73
73
|
`);
|
|
74
|
-
expect(el.label).to.equal(
|
|
74
|
+
expect(el.label).to.equal(null);
|
|
75
75
|
//the ".wrapper.label" style results in the background hover effect
|
|
76
76
|
const wrapperDivEl = el.shadowRoot.querySelector(
|
|
77
77
|
'div.wrapper.label'
|