@operato/layout 10.29.36 → 10.29.37

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/layout",
   "description": "Webcomponent layout following open-wc recommendations",
   "author": "heartyoh",
-  "version": "10.29.36",
+  "version": "10.29.37",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -64,10 +64,10 @@
   "dependencies": {
     "@material/web": "^2.0.0",
     "@operato/i18n": "^10.29.27",
-    "@operato/popup": "^10.29.36",
-    "@operato/shell": "^10.29.36",
+    "@operato/popup": "^10.29.37",
+    "@operato/shell": "^10.29.37",
     "@operato/styles": "^10.29.30",
-    "@operato/utils": "^10.29.36",
+    "@operato/utils": "^10.29.37",
     "lit": "^3.1.2"
   },
   "devDependencies": {
@@ -102,5 +102,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "90c8bc8593e5d68745aeddd45752fab83c50cc16"
+  "gitHead": "38361a65226ee9f23814747b4f0520edf42c3184"
 }

package/test/entity360-section.test.ts

@@ -68,3 +68,50 @@ describe('ox-entity360-section', () => {
     expect(el.shadowRoot!.querySelector('p')!.textContent!.trim()).to.not.equal('')
   })
 })
+
+describe('entity 360 section as a drop area', () => {
+  it('shows where a dragged file would land, and only then', async () => {
+    const section = (await fixture(html`<ox-entity360-section heading="papers" state="ready"></ox-entity360-section>`)) as OxEntity360Section
+    section.style.setProperty('--md-sys-color-primary', 'rgb(0, 0, 255)')
+
+    expect(getComputedStyle(section).outlineStyle).to.equal('none')
+
+    section.classList.add('candrop')
+    expect(getComputedStyle(section).outlineStyle, 'no mark while a file is over it').to.equal('dashed')
+
+    section.classList.remove('candrop')
+    expect(getComputedStyle(section).outlineStyle).to.equal('none')
+  })
+})
+
+describe('entity 360 section heading', () => {
+  it('keeps the heading level with an action that grows a second line', async () => {
+    const section = (await fixture(html`<ox-entity360-section heading="papers" state="ready">
+      <span slot="actions" style="display: inline-flex; flex-wrap: wrap; width: 120px">
+        <button style="height: 26px">attach</button>
+      </span>
+    </ox-entity360-section>`)) as OxEntity360Section
+
+    const heading = section.shadowRoot!.querySelector('h3')!
+    const actions = section.querySelector('[slot="actions"]') as HTMLElement
+    const before = heading.getBoundingClientRect().top
+
+    const refusal = document.createElement('div')
+    refusal.style.flexBasis = '100%'
+    refusal.textContent = 'memo.txt: not a type taken here'
+    actions.append(refusal)
+
+    expect(heading.getBoundingClientRect().top, 'the heading moved down with the second line').to.equal(before)
+  })
+})
+
+describe('entity 360 section actions', () => {
+  it('tells what sits in the actions slot to line up at the end', async () => {
+    const section = (await fixture(html`<ox-entity360-section heading="papers" state="ready">
+      <span slot="actions">attach</span>
+    </ox-entity360-section>`)) as OxEntity360Section
+
+    const actions = section.querySelector('[slot="actions"]') as HTMLElement
+    expect(getComputedStyle(actions).getPropertyValue('--ox-actions-align').trim()).to.equal('end')
+  })
+})