@operato/popup 10.11.0 → 10.16.0

package/test/office-control-height.test.ts

@@ -0,0 +1,125 @@
+import '@material/web/button/filled-button.js'
+
+import { expect, fixture } from '@open-wc/testing'
+import { css, html, LitElement } from 'lit'
+
+import {
+  ACTION_HEIGHT_TOKENS,
+  ButtonContainerStyles,
+  CommonHeaderStyles,
+  CommonPopupStyles
+} from '@operato/styles'
+
+import '../src/ox-popup-actions.js'
+import { OxPopupActions } from '../src/ox-popup-actions.js'
+
+/**
+ * Button heights (ADR-0060 decisions 6 and 6-1).
+ *
+ * The **platform** keeps the heights every application had before the operato standardization, so
+ * dssp, fmsim and the rest do not change when they upgrade. The **operato products** are compact: the
+ * shell theme opens each token as `var(--suite-<token>, <platform>)` and operato-suite fills the slot.
+ *
+ * These render both worlds with a mouse (the test browser). The finger branches cannot be emulated,
+ * so those are read from the stylesheets.
+ */
+
+const PLATFORM_TOKENS = `
+  --context-action-height: var(--suite-context-action-height, 32px);
+  --popup-action-height: var(--suite-popup-action-height, 30px);
+  --form-action-height: var(--suite-form-action-height, 40px);
+`
+const SUITE_SLOTS = `
+  --suite-context-action-height: 32px;
+  --suite-popup-action-height: 32px;
+  --suite-form-action-height: 32px;
+`
+
+class StyledRows extends LitElement {
+  static styles = [CommonPopupStyles, CommonHeaderStyles, ButtonContainerStyles, css``]
+
+  render() {
+    return html`
+      <div class="buttons"><md-filled-button id="popup-md">save</md-filled-button></div>
+      <div class="footer"><button id="footer">save</button></div>
+      <div class="button-container">
+        <button id="bar">export</button>
+        <md-filled-button id="bar-md">publish</md-filled-button>
+      </div>
+    `
+  }
+}
+customElements.define('test-styled-rows', StyledRows)
+
+const height = (el: Element | null | undefined) => Math.round(el!.getBoundingClientRect().height)
+const text = (styles: unknown) =>
+  (Array.isArray(styles) ? styles : [styles]).map(s => String((s as { cssText?: string }).cssText ?? s)).join('\n')
+const coarse = (cssText: string) => cssText.slice(cssText.indexOf('(pointer: coarse)'))
+
+async function rows(style: string) {
+  const host = await fixture<HTMLElement>(html`
+    <div style="${style}">
+      <test-styled-rows></test-styled-rows>
+      <ox-popup-actions>
+        <md-filled-button slot="confirm" id="prompt-md">ok</md-filled-button>
+      </ox-popup-actions>
+    </div>
+  `)
+  const styled = host.querySelector('test-styled-rows') as StyledRows
+  await styled.updateComplete
+  const actions = host.querySelector('ox-popup-actions') as OxPopupActions
+  await actions.updateComplete
+  const buttons = [...Array.from(styled.shadowRoot!.querySelectorAll('md-filled-button')), host.querySelector('#prompt-md')]
+  await Promise.all(buttons.map(b => (b as LitElement).updateComplete))
+  return { root: styled.shadowRoot!, host }
+}
+
+describe('office control height', () => {
+  it('the platform defaults are the heights before the standardization', () => {
+    expect(ACTION_HEIGHT_TOKENS).to.deep.equal({
+      '--context-action-height': 32,
+      '--popup-action-height': 30,
+      '--form-action-height': 40,
+      '--cell-action-height': 26
+    })
+  })
+
+  it('★ platform: nothing changes for applications outside the operato suite', async () => {
+    const { root, host } = await rows(PLATFORM_TOKENS)
+
+    expect(height(root.querySelector('#popup-md'))).to.equal(40) // CommonPopupStyles .buttons
+    expect(height(root.querySelector('#footer'))).to.be.at.least(30) // older footer
+    expect(height(root.querySelector('#bar'))).to.equal(32) // page action bar
+    expect(height(root.querySelector('#bar-md'))).to.equal(40) // Material keeps its own in the bar
+    expect(height(host.querySelector('#prompt-md'))).to.equal(30) // OxPrompt row, as before
+  })
+
+  it('★ suite: every action button in the operato products is 32px', async () => {
+    const { root, host } = await rows(SUITE_SLOTS + PLATFORM_TOKENS)
+
+    expect(height(root.querySelector('#popup-md'))).to.equal(32)
+    expect(height(root.querySelector('#bar'))).to.equal(32)
+    expect(height(root.querySelector('#bar-md'))).to.equal(32)
+    expect(height(host.querySelector('#prompt-md'))).to.equal(32)
+  })
+
+  it('a shop-floor screen still raises the popup row above both', async () => {
+    const { root } = await rows(SUITE_SLOTS + PLATFORM_TOKENS + '--popup-action-height: 64px;')
+    expect(height(root.querySelector('#popup-md'))).to.equal(64)
+  })
+
+  it('finger: the platform keeps 44px for the page bar and a 48px floor for the popup row', () => {
+    const bar = coarse(text(ButtonContainerStyles))
+    expect(bar).to.contain('var(--suite-context-action-height, 44px)')
+
+    const popup = coarse(text(CommonPopupStyles))
+    expect(popup).to.contain('var(--suite-popup-action-height, 48px)')
+    expect(popup).to.contain('var(--popup-action-height, 30px)')
+  })
+
+  it('ox-popup-actions has no finger height of its own', () => {
+    const cssText = text(OxPopupActions.styles)
+    expect(cssText).to.contain('--_height: var(--popup-action-height, 30px)')
+    expect(coarse(cssText)).to.not.contain('--_height:')
+  })
+})

package/test/ox-popup-actions.test.ts

@@ -0,0 +1,130 @@
+import '@material/web/button/filled-button.js'
+import '@material/web/button/text-button.js'
+
+import { expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+
+import '../src/ox-popup-actions.js'
+
+/**
+ * The action row owns order, height, shape and the destructive colour - so a popup cannot get them
+ * wrong by writing its markup differently. These run with a mouse pointer (the test browser); the
+ * finger bar is a media query of the same element.
+ *
+ * The expected numbers are written out (30, 68, 999em) rather than read from the stylesheet, so a
+ * change to the stylesheet shows up here as a decision, not as a silent follow.
+ */
+
+const left = (el: Element) => el.getBoundingClientRect().left
+const height = (el: Element) => Math.round(el.getBoundingClientRect().height)
+
+async function row(template: ReturnType<typeof html>) {
+  const host = await fixture<HTMLElement>(html`<div style="width: 600px">${template}</div>`)
+  const actions = host.querySelector('ox-popup-actions') as HTMLElement & { updateComplete: Promise<unknown> }
+  await actions.updateComplete
+  await Promise.all(
+    Array.from(actions.querySelectorAll('md-filled-button, md-text-button')).map(
+      b => (b as HTMLElement & { updateComplete: Promise<unknown> }).updateComplete
+    )
+  )
+  return actions
+}
+
+describe('ox-popup-actions', () => {
+  it('renders start, cancel, confirm in that order whatever the markup order', async () => {
+    const actions = await row(html`
+      <ox-popup-actions>
+        <md-filled-button slot="confirm" id="confirm">save</md-filled-button>
+        <md-text-button slot="cancel" id="cancel">cancel</md-text-button>
+        <md-text-button slot="start" id="start">delete</md-text-button>
+      </ox-popup-actions>
+    `)
+
+    const start = actions.querySelector('#start')!
+    const cancel = actions.querySelector('#cancel')!
+    const confirm = actions.querySelector('#confirm')!
+
+    expect(left(start)).to.be.lessThan(left(cancel))
+    expect(left(cancel)).to.be.lessThan(left(confirm))
+  })
+
+  it('keeps the confirm button at the right edge', async () => {
+    const actions = await row(html`
+      <ox-popup-actions>
+        <md-filled-button slot="confirm" id="confirm">save</md-filled-button>
+        <md-text-button slot="cancel">cancel</md-text-button>
+      </ox-popup-actions>
+    `)
+
+    const confirm = actions.querySelector('#confirm')!
+    expect(Math.round(confirm.getBoundingClientRect().right)).to.equal(Math.round(actions.getBoundingClientRect().right))
+  })
+
+  it('gives Material buttons and plain buttons the same height (30px, the platform default)', async () => {
+    const actions = await row(html`
+      <ox-popup-actions>
+        <button slot="cancel" id="plain">cancel</button>
+        <md-filled-button slot="confirm" id="md">save</md-filled-button>
+      </ox-popup-actions>
+    `)
+
+    expect(height(actions.querySelector('#md')!)).to.equal(30)
+    expect(height(actions.querySelector('#plain')!)).to.equal(30)
+  })
+
+  it('uses pill shapes inside the popup card', async () => {
+    const actions = await row(html`
+      <ox-popup-actions>
+        <button slot="cancel" id="plain">cancel</button>
+        <md-filled-button slot="confirm" id="md">save</md-filled-button>
+      </ox-popup-actions>
+    `)
+
+    const md = actions.querySelector('#md')!
+    expect(getComputedStyle(md).getPropertyValue('--md-filled-button-container-shape').trim()).to.equal('999em')
+    expect(getComputedStyle(actions.querySelector('#plain')!).borderTopLeftRadius).to.not.equal('0px')
+  })
+
+  it('lets a screen raise the height through --popup-action-height', async () => {
+    const actions = await row(html`
+      <ox-popup-actions style="--popup-action-height: 68px">
+        <button slot="cancel" id="plain">cancel</button>
+        <md-filled-button slot="confirm" id="md">save</md-filled-button>
+      </ox-popup-actions>
+    `)
+
+    expect(height(actions.querySelector('#md')!)).to.equal(68)
+    expect(height(actions.querySelector('#plain')!)).to.equal(68)
+  })
+
+  it('paints a destructive action with the error colour', async () => {
+    const actions = await row(html`
+      <ox-popup-actions style="--md-sys-color-error: rgb(190, 12, 20)">
+        <md-text-button slot="start" destructive id="side">delete</md-text-button>
+        <md-filled-button slot="confirm" destructive id="main">delete all</md-filled-button>
+        <button slot="cancel" id="plain" destructive>cancel</button>
+      </ox-popup-actions>
+    `)
+
+    const side = getComputedStyle(actions.querySelector('#side')!)
+    const main = getComputedStyle(actions.querySelector('#main')!)
+
+    expect(side.getPropertyValue('--md-text-button-label-text-color').trim()).to.equal('rgb(190, 12, 20)')
+    expect(main.getPropertyValue('--md-filled-button-container-color').trim()).to.equal('rgb(190, 12, 20)')
+  })
+
+  it('never paints cancel as destructive', async () => {
+    const actions = await row(html`
+      <ox-popup-actions style="--md-sys-color-error: rgb(190, 12, 20)">
+        <md-text-button slot="cancel" destructive id="cancel">cancel</md-text-button>
+        <button slot="cancel" destructive id="plain">cancel</button>
+        <md-filled-button slot="confirm">save</md-filled-button>
+      </ox-popup-actions>
+    `)
+
+    expect(getComputedStyle(actions.querySelector('#cancel')!).getPropertyValue('--md-text-button-label-text-color').trim()).to.not.equal(
+      'rgb(190, 12, 20)'
+    )
+    expect(getComputedStyle(actions.querySelector('#plain')!).color).to.not.equal('rgb(190, 12, 20)')
+  })
+})

package/test/ox-prompt-actions.test.ts

@@ -0,0 +1,136 @@
+import { expect } from '@open-wc/testing'
+
+import { OxPrompt } from '../src/ox-prompt.js'
+
+/**
+ * OxPrompt is the first real consumer of the shared action row. Before, its buttons were centred,
+ * confirm stood left of cancel, and both had the theme's 5px corner inside a floating card - a row of
+ * its own, unlike every popup that opened it.
+ *
+ * Checked here: the row is the shared one, confirm is on the right, heights match, a destructive
+ * confirmation is painted and focuses cancel, and the promise still answers true / false.
+ */
+
+const settle = () => new Promise(resolve => setTimeout(resolve, 50))
+
+const TIMEOUT = 'TIMEOUT'
+function within<T>(promise: Promise<T>, ms = 1500): Promise<T | typeof TIMEOUT> {
+  return Promise.race([promise, new Promise<typeof TIMEOUT>(resolve => setTimeout(() => resolve(TIMEOUT), ms))])
+}
+
+async function openPrompt(destructive = false) {
+  const answer = OxPrompt.open({
+    title: 'remove?',
+    text: 'this cannot be undone',
+    confirmButton: { text: 'remove', destructive },
+    cancelButton: { text: 'cancel' },
+    preventCloseOnBlur: true
+  })
+
+  await settle()
+
+  const prompts = document.body.querySelectorAll('ox-prompt')
+  const prompt = prompts[prompts.length - 1] as OxPrompt
+  await prompt.updateComplete
+
+  const root = prompt.renderRoot as ShadowRoot
+  const actions = root.querySelector('ox-popup-actions') as HTMLElement & { updateComplete: Promise<unknown> }
+  await actions?.updateComplete
+
+  const confirm = root.querySelector('#confirm') as HTMLElement & { updateComplete: Promise<unknown> }
+  const cancel = root.querySelector('#cancel') as HTMLElement & { updateComplete: Promise<unknown> }
+  await Promise.all([confirm?.updateComplete, cancel?.updateComplete])
+
+  return { answer, prompt, root, actions, confirm, cancel }
+}
+
+describe('OxPrompt uses the shared action row', () => {
+  before(() => {
+    /* No theme is loaded in the test page; an undefined var() would make every colour read empty. */
+    document.body.style.setProperty('--md-sys-color-error', 'rgb(190, 12, 20)')
+  })
+
+  afterEach(() => {
+    /* A failed assertion before the click leaves its prompt open; do not let it leak into the next test. */
+    document.body.querySelectorAll('ox-prompt').forEach(p => (p as OxPrompt).close())
+  })
+
+  it('renders its buttons in ox-popup-actions, confirm right of cancel, same height', async () => {
+    const { answer, actions, confirm, cancel } = await openPrompt()
+
+    expect(actions, 'ox-popup-actions').to.exist
+    expect(confirm.getAttribute('slot')).to.equal('confirm')
+    expect(cancel.getAttribute('slot')).to.equal('cancel')
+    expect(cancel.getBoundingClientRect().left).to.be.lessThan(confirm.getBoundingClientRect().left)
+    expect(Math.round(confirm.getBoundingClientRect().height)).to.equal(30)
+    expect(Math.round(cancel.getBoundingClientRect().height)).to.equal(30)
+
+    cancel.click()
+    expect(await within(answer)).to.equal(false)
+  })
+
+  it('answers true on confirm', async () => {
+    const { answer, confirm } = await openPrompt()
+
+    confirm.click()
+    expect(await within(answer)).to.equal(true)
+  })
+
+  it('focuses confirm for an ordinary question', async () => {
+    const { answer, root, confirm, cancel } = await openPrompt()
+
+    /* Compare ids, not elements: a failing element comparison makes chai render the DOM and hang. */
+    expect((root.activeElement as HTMLElement | null)?.id).to.equal('confirm')
+
+    cancel.click()
+    await within(answer)
+  })
+
+  it('paints a destructive confirmation and focuses cancel', async () => {
+    const { answer, root, confirm, cancel } = await openPrompt(true)
+
+    expect(confirm.hasAttribute('destructive')).to.equal(true)
+    expect(getComputedStyle(confirm).getPropertyValue('--md-filled-button-container-color').trim()).to.equal('rgb(190, 12, 20)')
+    expect((root.activeElement as HTMLElement | null)?.id).to.equal('cancel')
+
+    cancel.click()
+    expect(await within(answer)).to.equal(false)
+  })
+})
+
+describe('OxPrompt.confirmDelete', () => {
+  afterEach(() => {
+    document.body.querySelectorAll('ox-prompt').forEach(p => (p as OxPrompt).close())
+  })
+
+  async function opened(count?: number) {
+    const before = document.body.querySelectorAll('ox-prompt').length
+    const answer = OxPrompt.confirmDelete({ count })
+    for (let i = 0; i < 40 && document.body.querySelectorAll('ox-prompt').length <= before; i++) await settle()
+    const prompts = document.body.querySelectorAll('ox-prompt')
+    const prompt = prompts[prompts.length - 1] as OxPrompt
+    await prompt.updateComplete
+    const root = prompt.renderRoot as ShadowRoot
+    const confirm = root.querySelector('#confirm') as HTMLElement & { updateComplete: Promise<unknown> }
+    await confirm?.updateComplete
+    return { answer, prompt, root, confirm }
+  }
+
+  it('asks in the shared popup with a destructive delete, and answers true on delete', async () => {
+    const { answer, prompt, confirm } = await opened()
+
+    expect(prompt.titler).to.equal('delete the selected item?')
+    expect(confirm.hasAttribute('destructive')).to.equal(true)
+    expect(confirm.textContent?.trim()).to.equal('delete')
+
+    confirm.click()
+    expect(await within(answer)).to.equal(true)
+  })
+
+  it('names how many are selected when more than one', async () => {
+    const { prompt, root } = await opened(3)
+
+    expect(prompt.titler).to.equal('delete the 3 selected items?')
+    ;(root.querySelector('#cancel') as HTMLElement).click()
+  })
+})

package/test/popup-result.test.ts

@@ -0,0 +1,150 @@
+import { expect } from '@open-wc/testing'
+import { html } from 'lit'
+
+import { closePopup, openPopup } from '../src/open-popup.js'
+import { OxFloatingOverlay } from '../src/ox-floating-overlay.js'
+
+/**
+ * The popup result settles exactly once, with the right value, whichever way the popup closes -
+ * for the default implementation (no @operato/layout loaded).
+ *
+ * The implementation's one promise is "call onclosed once when the popup is gone". Before this test
+ * the default implementation kept it only for handle.close(): ESC, the backdrop and X removed the
+ * overlay without telling the handle, so an awaited result would have hung forever.
+ *
+ * The same table runs for the layout implementation in @operato/layout/test. A new implementation
+ * adds its own row there.
+ */
+
+const TIMEOUT = 'TIMEOUT'
+
+/** Never await a result bare - a broken implementation must fail the test, not hang the runner. */
+function within<T>(promise: Promise<T>, ms = 2000): Promise<T | typeof TIMEOUT> {
+  return Promise.race([promise, new Promise<typeof TIMEOUT>(resolve => setTimeout(() => resolve(TIMEOUT), ms))])
+}
+
+function overlayOf(handle: { name: string }): OxFloatingOverlay {
+  return document.getElementById(handle.name) as OxFloatingOverlay
+}
+
+async function open(options = {}) {
+  const handle = openPopup<string>(html`<div class="content">content</div>`, { backdrop: true, ...options })
+  let onclosedCalls = 0
+  handle.onclosed = () => onclosedCalls++
+
+  const overlay = overlayOf(handle)
+  await overlay.updateComplete
+
+  return {
+    handle,
+    overlay,
+    content: overlay.querySelector('.content') as HTMLElement,
+    onclosedCalls: () => onclosedCalls
+  }
+}
+
+/** Lets any late second settle or second onclosed show up before counting. */
+const settleTurn = () => new Promise(resolve => setTimeout(resolve, 50))
+
+describe('openPopup result - default implementation', () => {
+  it('handle.close(value) settles with that value', async () => {
+    const { handle, onclosedCalls } = await open()
+
+    handle.close('saved')
+
+    expect(await within(handle.result)).to.equal('saved')
+    await settleTurn()
+    expect(handle.closed).to.equal(true)
+    expect(onclosedCalls()).to.equal(1)
+  })
+
+  it('closePopup(element, value) from the content settles with that value', async () => {
+    const { handle, content, onclosedCalls } = await open()
+
+    closePopup(content, 'picked')
+
+    expect(await within(handle.result)).to.equal('picked')
+    await settleTurn()
+    expect(handle.closed).to.equal(true)
+    expect(onclosedCalls()).to.equal(1)
+  })
+
+  it('closePopup(element) without a value settles undefined', async () => {
+    const { handle, content } = await open()
+
+    closePopup(content)
+
+    expect(await within(handle.result)).to.equal(undefined)
+  })
+
+  it('ESC settles undefined and reports closed', async () => {
+    const { handle, onclosedCalls } = await open({ escapable: true })
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+
+    expect(await within(handle.result)).to.equal(undefined)
+    await settleTurn()
+    expect(handle.closed).to.equal(true)
+    expect(onclosedCalls()).to.equal(1)
+  })
+
+  it('backdrop click settles undefined and reports closed', async () => {
+    const { handle, overlay, onclosedCalls } = await open()
+
+    const backdrop = overlay.renderRoot.querySelector('#backdrop') as HTMLElement
+    expect(backdrop, 'backdrop element').to.exist
+    backdrop.click()
+
+    expect(await within(handle.result)).to.equal(undefined)
+    await settleTurn()
+    expect(handle.closed).to.equal(true)
+    expect(onclosedCalls()).to.equal(1)
+  })
+
+  it('the X button settles undefined and reports closed', async () => {
+    const { handle, overlay, onclosedCalls } = await open({ closable: true, title: 'x' })
+
+    const closer = overlay.renderRoot.querySelector('[closable][close]') as HTMLElement
+    expect(closer, 'close button').to.exist
+    closer.click()
+
+    expect(await within(handle.result)).to.equal(undefined)
+    await settleTurn()
+    expect(handle.closed).to.equal(true)
+    expect(onclosedCalls()).to.equal(1)
+  })
+
+  it('the first close request wins: closePopup then handle.close', async () => {
+    const { handle, content, onclosedCalls } = await open()
+
+    closePopup(content, 'first')
+    handle.close('second')
+
+    expect(await within(handle.result)).to.equal('first')
+    await settleTurn()
+    expect(onclosedCalls()).to.equal(1)
+  })
+
+  it('the first close request wins: handle.close twice', async () => {
+    const { handle, onclosedCalls } = await open()
+
+    handle.close('first')
+    handle.close('second')
+
+    expect(await within(handle.result)).to.equal('first')
+    await settleTurn()
+    expect(onclosedCalls()).to.equal(1)
+  })
+
+  it('an onclosed assigned before the change is still called once', async () => {
+    const handle = openPopup(html`<div>legacy</div>`)
+    let calls = 0
+    handle.onclosed = () => calls++
+
+    handle.close()
+
+    await within(handle.result)
+    await settleTurn()
+    expect(calls).to.equal(1)
+  })
+})

package/translations/en.json

@@ -1 +1,6 @@
-{}
+{
+  "button.popup-cancel": "cancel",
+  "button.popup-delete": "delete",
+  "text.popup-confirm-delete": "delete the selected item?",
+  "text.popup-confirm-delete-count": "delete the {count} selected items?"
+}

package/translations/ja.json

@@ -0,0 +1,6 @@
+{
+  "button.popup-cancel": "キャンセル",
+  "button.popup-delete": "削除",
+  "text.popup-confirm-delete": "選択した項目を削除しますか？",
+  "text.popup-confirm-delete-count": "選択した{count}件を削除しますか？"
+}

package/translations/ko.json

@@ -1 +1,6 @@
-{}
+{
+  "button.popup-cancel": "취소",
+  "button.popup-delete": "삭제",
+  "text.popup-confirm-delete": "선택한 항목을 삭제할까요?",
+  "text.popup-confirm-delete-count": "선택한 {count}건을 삭제할까요?"
+}

package/translations/ms.json

@@ -0,0 +1,6 @@
+{
+  "button.popup-cancel": "batal",
+  "button.popup-delete": "padam",
+  "text.popup-confirm-delete": "padam item yang dipilih?",
+  "text.popup-confirm-delete-count": "padam {count} item yang dipilih?"
+}

package/translations/zh.json

@@ -0,0 +1,6 @@
+{
+  "button.popup-cancel": "取消",
+  "button.popup-delete": "删除",
+  "text.popup-confirm-delete": "删除所选项目吗？",
+  "text.popup-confirm-delete-count": "删除所选的{count}项吗？"
+}