@operato/input 10.29.39 → 10.29.41

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.39",
+  "version": "10.29.41",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -251,7 +251,7 @@
     "@material/web": "^2.0.0",
     "@operato/i18n": "^10.29.27",
     "@operato/pickr": "^10.29.1",
-    "@operato/popup": "^10.29.39",
+    "@operato/popup": "^10.29.40",
     "@operato/styles": "^10.29.30",
     "@operato/utils": "^10.29.39",
     "@types/codemirror": "^5.60.5",
@@ -294,5 +294,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f48742480ad2b9ce87f0b3b4c3ac5923f4866ad6"
+  "gitHead": "198aa1d3eb4bf66de898554f52e57ca0b0905911"
 }

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

@@ -0,0 +1,51 @@
+import { expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+
+import '../src/ox-input-select-buttons.js'
+
+/**
+ * Chip labels.
+ *
+ * Most screens hand the chips words (`important`, `due`) and keep them capitalized. Some hand them
+ * identifiers — a part name `roller-row-1`, a code — and those must show as written. The caller says
+ * so with --ox-input-select-buttons-label-text-transform; a screen that sets nothing keeps capitalize.
+ */
+describe('ox-input-select-buttons', () => {
+  const options = [
+    { display: 'frame', value: 'frame' },
+    { display: 'roller-row-1', value: 'roller-row-1' }
+  ]
+
+  const chips = (el: any) => [...el.renderRoot.querySelectorAll('md-filter-chip')] as HTMLElement[]
+
+  it('capitalizes the chip labels by default', async () => {
+    const el = await fixture(html`<ox-input-select-buttons .options=${options}></ox-input-select-buttons>`)
+
+    expect(chips(el)).to.have.length(2)
+    chips(el).forEach(chip => expect(getComputedStyle(chip).textTransform).to.equal('capitalize'))
+  })
+
+  it('shows the labels as written when the caller sets the transform to none', async () => {
+    const el = await fixture(html`
+      <ox-input-select-buttons
+        style="--ox-input-select-buttons-label-text-transform: none"
+        .options=${options}
+      ></ox-input-select-buttons>
+    `)
+
+    expect(chips(el)).to.have.length(2)
+    chips(el).forEach(chip => expect(getComputedStyle(chip).textTransform).to.equal('none'))
+  })
+
+  it('takes the transform from an ancestor, so a dialog can set it once', async () => {
+    const host = await fixture(html`
+      <div style="--ox-input-select-buttons-label-text-transform: none">
+        <ox-input-select-buttons .options=${options}></ox-input-select-buttons>
+      </div>
+    `)
+    const el = host.querySelector('ox-input-select-buttons') as any
+    await el.updateComplete
+
+    chips(el).forEach(chip => expect(getComputedStyle(chip).textTransform).to.equal('none'))
+  })
+})