@operato/input 10.29.63 → 10.29.67

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "10.29.63",
+  "version": "10.29.67",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -295,5 +295,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "57be1d273d68f28b7942a3459efe55947c85b5a2"
+  "gitHead": "cd6c3fd780bbfd658cdf48086fa4bfcf7f745883"
 }

package/test/ox-input-select-buttons.test.ts

@@ -48,4 +48,69 @@ describe('ox-input-select-buttons', () => {
 
     chips(el).forEach(chip => expect(getComputedStyle(chip).textTransform).to.equal('none'))
   })
+
+  /*
+   * A chip may carry how many rows it stands for — the stages of a list with the number in each. The number shows
+   * after the name whether the chip is pressed or not, and a chip without one shows its name alone as before.
+   */
+  it('shows each chip\'s count after its name, pressed or not', async () => {
+    const el = await fixture(html`
+      <ox-input-select-buttons
+        multiple
+        .value=${['lead']}
+        .options=${[
+          { display: 'Lead', value: 'lead', count: 3 },
+          { display: 'Won', value: 'won', count: 0 },
+          { display: 'Plain', value: 'plain' }
+        ]}
+      ></ox-input-select-buttons>
+    `)
+    const [lead, won, plain] = chips(el) as any[]
+
+    expect(lead.selected).to.equal(true)
+    expect(won.selected).to.equal(false)
+    expect(lead.querySelector('.count')?.textContent).to.equal('3')
+    expect(won.querySelector('.count')?.textContent).to.equal('0')
+    expect(lead.textContent.trim()).to.equal('Lead3')
+    expect(plain.querySelector('.count')).to.equal(null)
+    expect(plain.label).to.equal('Plain')
+  })
+
+  it('toggles a counted chip like any other, keeping the rest pressed', async () => {
+    const el = (await fixture(html`
+      <ox-input-select-buttons
+        multiple
+        .value=${['lead', 'won']}
+        .options=${[
+          { display: 'Lead', value: 'lead', count: 3 },
+          { display: 'Won', value: 'won', count: 1 }
+        ]}
+      ></ox-input-select-buttons>
+    `)) as any
+    chips(el)[1].click()
+    expect(el.value).to.deep.equal(['lead'])
+    chips(el)[1].click()
+    expect(el.value).to.deep.equal(['lead', 'won'])
+  })
+
+  /* A pressed chip is told by its fill, not a checkmark: it keeps its width, so the row does not shift as chips toggle. */
+  it('marks a pressed chip without a checkmark, at the same width as when not pressed', async () => {
+    const el = await fixture(html`
+      <ox-input-select-buttons
+        multiple
+        .value=${['a']}
+        .options=${[
+          { display: 'Same', value: 'a', count: 12 },
+          { display: 'Same', value: 'b', count: 12 }
+        ]}
+      ></ox-input-select-buttons>
+    `)
+    const [pressed, released] = chips(el) as any[]
+    await pressed.updateComplete
+
+    expect(pressed.selected).to.equal(true)
+    const check = pressed.shadowRoot.querySelector('svg.checkmark')
+    expect(!check || check.getBoundingClientRect().width === 0).to.equal(true)
+    expect(pressed.getBoundingClientRect().width).to.equal(released.getBoundingClientRect().width)
+  })
 })