@operato/input 10.9.0 → 10.10.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "10.9.0",
+  "version": "10.10.1",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -69,7 +69,8 @@
     "./ox-input-video.js": "./dist/src/ox-input-video.js",
     "./ox-input-work-shift.js": "./dist/src/ox-input-work-shift.js",
     "./ox-select-floor.js": "./dist/src/ox-select-floor.js",
-    "./ox-select.js": "./dist/src/ox-select.js"
+    "./ox-select.js": "./dist/src/ox-select.js",
+    "./image-selector.js": "./dist/src/image-selector.js"
   },
   "typesVersions": {
     "*": {
@@ -216,6 +217,9 @@
       ],
       "./ox-input-table.js": [
         "./dist/src/ox-input-table.d.ts"
+      ],
+      "./image-selector.js": [
+        "./dist/src/image-selector.d.ts"
       ]
     }
   },
@@ -247,8 +251,8 @@
     "@material/web": "^2.0.0",
     "@operato/i18n": "^10.0.0",
     "@operato/pickr": "^10.0.0",
-    "@operato/popup": "^10.9.0",
-    "@operato/styles": "^10.9.0",
+    "@operato/popup": "^10.10.0",
+    "@operato/styles": "^10.10.0",
     "@operato/utils": "^10.7.0",
     "@types/codemirror": "^5.60.5",
     "@undecaf/zbar-wasm": "^0.11.0",
@@ -290,5 +294,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "5282356a0fbf7601a1bd023cf65ba5dc60986337"
+  "gitHead": "b40e170b9e6a24e28935300dd2c77d8b8e5ce8a2"
 }

package/test/image-selector.test.ts

@@ -0,0 +1,82 @@
+import { expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+
+import '../src/ox-input-background-pattern.js'
+import { registerImageSelector } from '../src/image-selector.js'
+
+/**
+ * The image-picking slot.
+ *
+ * ## Why this is tested
+ *
+ * `@operato/input` used to import `@operato/attachment` directly. The bottom layer reached for a
+ * feature above it, closing a cycle (input ▶ attachment ▶ data-grist ▶ input) that stopped this
+ * package from building — TS5055 on seven files, with `noEmitOnError`.
+ *
+ * Reversing that arrow has to hold two things:
+ *
+ * ```
+ * never empty     with nothing registered there must still be a field; an unregistered
+ *                 custom element renders as a silent empty box
+ * value lands     either branch carries value-key and raises change, so the value takes
+ *                 the same path out
+ * ```
+ */
+describe('image-picking field', () => {
+  async function pattern(value: any = {}) {
+    const el: any = await fixture(html`<ox-input-background-pattern .value=${value}></ox-input-background-pattern>`)
+    await el.updateComplete
+    return el
+  }
+
+  it('falls back to a text box when nothing is registered', async () => {
+    const el = await pattern({ image: 'https://example.com/a.png' })
+
+    const field = el.renderRoot.querySelector('[value-key="image"]') as HTMLInputElement
+
+    expect(field, 'no image field at all').to.exist
+    expect(field.tagName).to.equal('INPUT')
+    expect(field.value, 'existing address did not reach the field').to.equal('https://example.com/a.png')
+  })
+
+  it('takes an address typed into the fallback text box', async () => {
+    const el = await pattern({})
+
+    const field = el.renderRoot.querySelector('[value-key="image"]') as HTMLInputElement
+    field.value = 'https://example.com/b.png'
+    field.dispatchEvent(new Event('change', { bubbles: true, composed: true }))
+
+    expect(el.value.image).to.equal('https://example.com/b.png')
+  })
+
+  it('swaps in the registered field, even when registration lands after render', async () => {
+    class FakeSelector extends HTMLElement {
+      value: any
+      properties: any
+    }
+    customElements.define('test-image-selector', FakeSelector)
+
+    const el = await pattern({ image: 'https://example.com/c.png' })
+
+    registerImageSelector('test-image-selector')
+    await el.updateComplete
+
+    const field = el.renderRoot.querySelector('[value-key="image"]') as any
+
+    expect(field.tagName).to.equal('TEST-IMAGE-SELECTOR')
+    expect(field.value).to.equal('https://example.com/c.png')
+    expect(field.properties).to.deep.equal({ category: 'image' })
+  })
+
+  it('takes a change raised by the registered field the same way', async () => {
+    registerImageSelector('test-image-selector')
+
+    const el = await pattern({})
+    const field = el.renderRoot.querySelector('[value-key="image"]') as any
+
+    field.value = 'https://example.com/d.png'
+    field.dispatchEvent(new Event('change', { bubbles: true, composed: true }))
+
+    expect(el.value.image).to.equal('https://example.com/d.png')
+  })
+})

package/translations/en.json

@@ -20,6 +20,7 @@
   "label.operators": "operators",
   "label.privilege": "privilege",
   "label.protected-request-ip": "safe request IP",
+  "label.search": "search",
   "label.second": "second",
   "label.second by second": "second by second",
   "label.seconds": "seconds",
@@ -45,13 +46,13 @@
   "text.every second": "every second",
   "text.every sunday": "every sunday",
   "text.every weekday": "every weekday",
+  "text.input-secret-hide": "hide",
+  "text.input-secret-placeholder": "enter secret information",
+  "text.input-secret-show": "show",
+  "text.input-secret-toggle": "show/hide",
   "text.range of values": "range of values",
   "text.step values": "step values",
   "text.the first day of every month": "the first day of every month",
   "text.the first day of every year": "the first day of every year",
-  "text.value list separator": "value list separator",
-  "text.input-secret-placeholder": "enter secret information",
-  "text.input-secret-show": "show",
-  "text.input-secret-hide": "hide",
-  "text.input-secret-toggle": "show/hide"
+  "text.value list separator": "value list separator"
 }

package/translations/ja.json

@@ -19,6 +19,7 @@
   "label.operators": "演算子",
   "label.privilege": "権限",
   "label.protected-request-ip": "安全なリクエスト IP",
+  "label.search": "検索キーワード",
   "label.second": "秒",
   "label.seconds": "秒",
   "label.superuser": "スーパーユーザー",
@@ -43,13 +44,13 @@
   "text.every second": "毎秒",
   "text.every sunday": "毎週日曜日",
   "text.every weekday": "平日毎日",
+  "text.input-secret-hide": "非表示",
+  "text.input-secret-placeholder": "機密情報を入力",
+  "text.input-secret-show": "表示",
+  "text.input-secret-toggle": "表示/非表示",
   "text.range of values": "値の範囲",
   "text.step values": "ステップ値",
   "text.the first day of every month": "毎月1日",
   "text.the first day of every year": "毎年1月1日",
-  "text.value list separator": "値リスト区切り",
-  "text.input-secret-placeholder": "機密情報を入力",
-  "text.input-secret-show": "表示",
-  "text.input-secret-hide": "非表示",
-  "text.input-secret-toggle": "表示/非表示"
+  "text.value list separator": "値リスト区切り"
 }

package/translations/ko.json

@@ -19,6 +19,7 @@
   "label.operators": "연산자",
   "label.privilege": "권한",
   "label.protected-request-ip": "안전한 요청 IP",
+  "label.search": "검색어",
   "label.second": "초",
   "label.seconds": "초",
   "label.superuser": "수퍼유저",
@@ -43,13 +44,13 @@
   "text.every second": "매초",
   "text.every sunday": "매주 일요일마다",
   "text.every weekday": "평일마다",
+  "text.input-secret-hide": "숨기기",
+  "text.input-secret-placeholder": "보안 정보 입력",
+  "text.input-secret-show": "보기",
+  "text.input-secret-toggle": "보기/숨기기",
   "text.range of values": "값의 범위",
   "text.step values": "단계 값",
   "text.the first day of every month": "매월 1일마다",
   "text.the first day of every year": "매년 1월 1일마다",
-  "text.value list separator": "값 구분자",
-  "text.input-secret-placeholder": "보안 정보 입력",
-  "text.input-secret-show": "보기",
-  "text.input-secret-hide": "숨기기",
-  "text.input-secret-toggle": "보기/숨기기"
+  "text.value list separator": "값 구분자"
 }

package/translations/ms.json

@@ -19,6 +19,7 @@
   "label.operators": "operator",
   "label.privilege": "keistimewaan",
   "label.protected-request-ip": "IP permintaan yang selamat",
+  "label.search": "carian",
   "label.second": "saat",
   "label.seconds": "saat",
   "label.superuser": "pengguna super",
@@ -43,13 +44,13 @@
   "text.every second": "setiap saat",
   "text.every sunday": "setiap hari Ahad",
   "text.every weekday": "setiap hari minggu",
+  "text.input-secret-hide": "Sembunyi",
+  "text.input-secret-placeholder": "Masukkan maklumat rahsia",
+  "text.input-secret-show": "Tunjuk",
+  "text.input-secret-toggle": "Tunjuk/Sembunyi",
   "text.range of values": "julat nilai",
   "text.step values": "nilai langkah",
   "text.the first day of every month": "hari pertama setiap bulan",
   "text.the first day of every year": "hari pertama setiap tahun",
-  "text.value list separator": "pemisah senarai nilai",
-  "text.input-secret-placeholder": "Masukkan maklumat rahsia",
-  "text.input-secret-show": "Tunjuk",
-  "text.input-secret-hide": "Sembunyi",
-  "text.input-secret-toggle": "Tunjuk/Sembunyi"
+  "text.value list separator": "pemisah senarai nilai"
 }

package/translations/zh.json

@@ -19,6 +19,7 @@
   "label.operators": "运算符",
   "label.privilege": "权限",
   "label.protected-request-ip": "安全请求 IP",
+  "label.search": "搜索关键词",
   "label.second": "秒",
   "label.seconds": "秒",
   "label.superuser": "超级用户",
@@ -43,13 +44,13 @@
   "text.every second": "每秒",
   "text.every sunday": "每个星期天",
   "text.every weekday": "每个工作日",
+  "text.input-secret-hide": "隐藏",
+  "text.input-secret-placeholder": "输入机密信息",
+  "text.input-secret-show": "显示",
+  "text.input-secret-toggle": "显示/隐藏",
   "text.range of values": "值的范围",
   "text.step values": "步进值",
   "text.the first day of every month": "每月第一天",
   "text.the first day of every year": "每年1月1日",
-  "text.value list separator": "值列表分隔符",
-  "text.input-secret-placeholder": "输入机密信息",
-  "text.input-secret-show": "显示",
-  "text.input-secret-hide": "隐藏",
-  "text.input-secret-toggle": "显示/隐藏"
+  "text.value list separator": "值列表分隔符"
 }