fix(material): show editor full width when there are no options

.changeset/seven-jobs-shop.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-wc-material": patch
+---
+
+Full width editors when there are not side controls

packages/wc-material/elements/mwc-item-lite.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css, customElement } from 'lit-element'
+import { LitElement, html, css, customElement, PropertyValues, query, property } from 'lit-element'
 
 @customElement('mwc-item-lite')
 export class MwcItemLite extends LitElement {
@@ -13,6 +13,10 @@ export class MwcItemLite extends LitElement {
   color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
 }
 
+:host([no-options]) #options {
+  display: none;
+}
+
 #main {
   display: flex;
   flex: 1;
@@ -34,9 +38,23 @@ slot[name=options]::slotted(mwc-icon) {
 }`
   }
 
+  @property({ type: Boolean, reflect: true, attribute: 'no-options' })
+  noOptions = true
+
+  @query('slot[name=options]')
+  optionsSlot: HTMLSlotElement | undefined
+
   render() {
     return html`
     <div id="main"><slot></slot></div>
     <div id="options"><slot name="options"></slot></div>`
   }
+
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties)
+
+    this.optionsSlot?.addEventListener('slotchange', (e: any) => {
+      this.noOptions = !e.target.assignedElements().length
+    })
+  }
 }