@lion/ui 0.7.6 → 0.7.7

package/docs/components/combobox/extensions.md

@@ -20,11 +20,11 @@ easily from an extended Lion component, just by:
 ```js preview-story
 export const MaterialDesign = () => html`
   <md-combobox name="combo" label="Default">
-    <md-option .choiceValue=${'Apple'}>Apple</md-option>
-    <md-option .choiceValue=${'Artichoke'}>Artichoke</md-option>
-    <md-option .choiceValue=${'Asparagus'}>Asparagus</md-option>
-    <md-option .choiceValue=${'Banana'}>Banana</md-option>
-    <md-option .choiceValue=${'Beets'}>Beets</md-option>
+    <md-option .choiceValue="${'Apple'}">Apple</md-option>
+    <md-option .choiceValue="${'Artichoke'}">Artichoke</md-option>
+    <md-option .choiceValue="${'Asparagus'}">Asparagus</md-option>
+    <md-option .choiceValue="${'Banana'}">Banana</md-option>
+    <md-option .choiceValue="${'Beets'}">Beets</md-option>
   </md-combobox>
 `;
 ```
@@ -34,11 +34,11 @@ export const MaterialDesign = () => html`
 ```js preview-story
 export const Github = () => html`
   <gh-combobox name="combo" label="Switch branches/tags">
-    <gh-option href="https://www.github.com" .choiceValue=${'master'} default>master</gh-option>
-    <gh-option .choiceValue=${'develop'}>develop</gh-option>
-    <gh-option .choiceValue=${'release'}>release</gh-option>
-    <gh-option .choiceValue=${'feat/abc'}>feat/abc</gh-option>
-    <gh-option .choiceValue=${'feat/xyz123'}>feat/xyz123</gh-option>
+    <gh-option href="https://www.github.com" .choiceValue="${'master'}" default>master</gh-option>
+    <gh-option .choiceValue="${'develop'}">develop</gh-option>
+    <gh-option .choiceValue="${'release'}">release</gh-option>
+    <gh-option .choiceValue="${'feat/abc'}">feat/abc</gh-option>
+    <gh-option .choiceValue="${'feat/xyz123'}">feat/xyz123</gh-option>
   </gh-combobox>
 `;
 ```
@@ -62,7 +62,7 @@ export const Whatsapp = () => {
         is-user-text
         is-user-text-read
         image="${obamaImgUrl}"
-        .choiceValue=${'Barack Obama'}
+        .choiceValue="${'Barack Obama'}"
       ></wa-option>
       <wa-option
         title="Donald Trump"
@@ -70,28 +70,28 @@ export const Whatsapp = () => {
         time="14:59"
         is-user-text
         image="${trumpImgUrl}"
-        .choiceValue=${'Donald Trump'}
+        .choiceValue="${'Donald Trump'}"
       ></wa-option>
       <wa-option
         title="Joe Biden"
         text="Hehe😅. You too, man, you too..."
         time="yesterday"
         image="${bidenImgUrl}"
-        .choiceValue=${'Joe Biden'}
+        .choiceValue="${'Joe Biden'}"
       ></wa-option>
       <wa-option
         title="George W. Bush"
         time="friday"
         text="You bet I will. Let's catch up soon!"
         image="${bushImgUrl}"
-        .choiceValue=${'George W. Bush'}
+        .choiceValue="${'George W. Bush'}"
       ></wa-option>
       <wa-option
         title="Bill Clinton"
         time="thursday"
         text="Dude...😂 😂 😂"
         image="${clintonImgUrl}"
-        .choiceValue=${'Bill Clinton'}
+        .choiceValue="${'Bill Clinton'}"
       ></wa-option>
     </wa-combobox>
   `;
@@ -114,35 +114,35 @@ export const GoogleSearch = () => {
         href="https://www.google.com/search?query=apple"
         target="_blank"
         rel="noopener noreferrer"
-        .choiceValue=${'Apple'}
+        .choiceValue="${'Apple'}"
         >Apple</google-option
       >
       <google-option
         href="https://www.google.com/search?query=Artichoke"
         target="_blank"
         rel="noopener noreferrer"
-        .choiceValue=${'Artichoke'}
+        .choiceValue="${'Artichoke'}"
         >Artichoke</google-option
       >
       <google-option
         href="https://www.google.com/search?query=Asparagus"
         target="_blank"
         rel="noopener noreferrer"
-        .choiceValue=${'Asparagus'}
+        .choiceValue="${'Asparagus'}"
         >Asparagus</google-option
       >
       <google-option
         href="https://www.google.com/search?query=Banana"
         target="_blank"
         rel="noopener noreferrer"
-        .choiceValue=${'Banana'}
+        .choiceValue="${'Banana'}"
         >Banana</google-option
       >
       <google-option
         href="https://www.google.com/search?query=Beets"
         target="_blank"
         rel="noopener noreferrer"
-        .choiceValue=${'Beets'}
+        .choiceValue="${'Beets'}"
         >Beets</google-option
       >
     </google-combobox>

package/docs/components/combobox/overview.md

@@ -34,7 +34,7 @@ export const main = () => html`
 `;
 ```
 
-[...show more](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/components/combobox/extensions.md)
+[...show more](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/components/combobox/extensions.md)
 
 ## Features
 

package/docs/components/combobox/use-cases.md

@@ -34,7 +34,7 @@ When `requireOptionMatch` is set to false the textbox is leading, with the listb
 
 ```js preview-story
 export const optionMatch = () => html`
-  <lion-combobox name="search" label="Search" .requireOptionMatch=${false}>
+  <lion-combobox name="search" label="Search" .requireOptionMatch="${false}">
     ${lazyRender(
       listboxData.map(entry => html` <lion-option .choiceValue="${entry}">${entry}</lion-option> `),
     )}
@@ -243,7 +243,7 @@ export const multipleChoice = () => html`
     ${lazyRender(
       listboxData.map(
         (entry, i) => html`
-          <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option>
+          <lion-option .choiceValue="${entry}" ?checked="${i === 0}">${entry}</lion-option>
         `,
       ),
     )}
@@ -258,7 +258,7 @@ Alternatively, the multi-choice flag can be combined with .requireMultipleMatch=
 
 ```js preview-story
 export const multipleCustomizableChoice = () => html`
-  <lion-combobox name="combo" label="Multiple" .requireOptionMatch=${false} multiple-choice>
+  <lion-combobox name="combo" label="Multiple" .requireOptionMatch="${false}" multiple-choice>
     <demo-selection-display
       slot="selection-display"
       style="display: contents;"
@@ -266,7 +266,7 @@ export const multipleCustomizableChoice = () => html`
     ${lazyRender(
       listboxData.map(
         (entry, i) => html`
-          <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option>
+          <lion-option .choiceValue="${entry}" ?checked="${i === 0}">${entry}</lion-option>
         `,
       ),
     )}
@@ -282,7 +282,7 @@ By default the a check is made which makes sure the value matches an option. Thi
 
 ```js preview-story
 export const validation = () => html`
-  <lion-combobox name="combo" label="Validation" .validators=${[new Required()]}>
+  <lion-combobox name="combo" label="Validation" .validators="${[new Required()]}">
     ${lazyRender(
       listboxData.map(entry => html` <lion-option .choiceValue="${entry}">${entry}</lion-option> `),
     )}
@@ -458,4 +458,4 @@ export const complexObjectChoiceValue = () =>
 ## Listbox compatibility
 
 All configurations that can be applied to `lion-listbox`, can be applied to `lion-combobox` as well.
-See the [listbox documentation](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/components/listbox/overview.md) for more information.
+See the [listbox documentation](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/components/listbox/overview.md) for more information.

package/docs/components/dialog/api-table.md

@@ -32,9 +32,9 @@
 
 ### Events
 
-| Name             | Type    | Description | Inherited From |
-| ---------------- | ------- | ----------- | -------------- |
-| `opened-changed` | `Event` |             | OverlayMixin   |
+| Name             | Type          | Description | Inherited From |
+| ---------------- | ------------- | ----------- | -------------- |
+| `opened-changed` | `CustomEvent` |             | OverlayMixin   |
 
 ### Attributes
 

package/docs/components/dialog/overview.md

@@ -21,7 +21,7 @@ export const main = () => html`
       Hello! You can close this dialog here:
       <button
         class="demo-dialog-content__close-button"
-        @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+        @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
       >
         ⨯
       </button>
@@ -54,6 +54,6 @@ import '@lion/ui/define/lion-dialog.js';
 ## Changing the configuration
 
 You can use the `.config` property on the dialog to change the configuration.
-The documentation of the full config object can be found in the `overlays` folder or here in [Overlay System - Configuration](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/fundamentals/systems/overlays/configuration.md).
+The documentation of the full config object can be found in the `overlays` folder or here in [Overlay System - Configuration](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/fundamentals/systems/overlays/configuration.md).
 
 The `config` property uses a setter to merge the passed configuration with the current, so you only **overwrite what you pass** when updating `config`.

package/docs/components/dialog/src/external-dialog.js

@@ -0,0 +1,32 @@
+import { LitElement, html } from 'lit';
+
+class DialogTriggerDemo extends LitElement {
+  static get properties() {
+    return {
+      _isOpen: { state: true },
+    };
+  }
+
+  toggleDialog(open) {
+    // eslint-disable-next-line no-return-assign
+    return () => (this._isOpen = open);
+  }
+
+  handleDialog(e) {
+    this._isOpen = e.detail.opened;
+  }
+
+  render() {
+    return html`
+      <button @click=${this.toggleDialog(true)}>Open dialog</button>
+      <lion-dialog ?opened=${this._isOpen} @opened-changed=${this.handleDialog}>
+        <div slot="content" class="dialog demo-box">
+          Hello! You can close this notification here:
+          <button class="close-button" @click=${this.toggleDialog(false)}>⨯</button>
+        </div>
+      </lion-dialog>
+    `;
+  }
+}
+
+customElements.define('dialog-trigger-demo', DialogTriggerDemo);

package/docs/components/dialog/src/slots-dialog-content.js

@@ -24,7 +24,7 @@ class SlotsDialogContent extends LitElement {
       <div class="actions">
         <slot name="actions"></slot>
       </div>
-      <button class="close-button" @click=${this._closeOverlay}>⨯</button>
+      <button class="close-button" @click="${this._closeOverlay}">⨯</button>
     `;
   }
 }

package/docs/components/dialog/src/styled-dialog-content.js

@@ -30,7 +30,7 @@ class StyledDialogContent extends LitElement {
       <div>
         <p>Look how nice this <span class="nice">dialog</span> looks!</p>
       </div>
-      <button class="close-button" @click=${this._closeOverlay}>⨯</button>
+      <button class="close-button" @click="${this._closeOverlay}">⨯</button>
     `;
   }
 }

package/docs/components/dialog/use-cases.md

@@ -10,18 +10,64 @@ import '@lion/ui/define/lion-dialog.js';
 import { demoStyle } from './src/demoStyle.js';
 import './src/styled-dialog-content.js';
 import './src/slots-dialog-content.js';
+import './src/external-dialog.js';
 ```
 
 ```html
 <lion-dialog>
   <div slot="content">
     This is a dialog
-    <button @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}>x</button>
+    <button @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}">x</button>
   <div>
   <button slot="invoker">Click me</button>
 </lion-dialog>
 ```
 
+## External trigger
+
+```js preview-story
+export const externalTrigger = () => {
+  const externalTriggerDialog = () => {
+    class DialogTriggerDemo extends LitElement {
+      static get properties() {
+        return {
+          _isOpen: { state: true },
+        };
+      }
+
+      toggleDialog(open) {
+        return () => (this._isOpen = open);
+      }
+
+      handleDialog(e) {
+        this._isOpen = e.detail.opened;
+      }
+
+      render() {
+        return html`
+          <button @click=${this.toggleDialog(true)}>Open dialog</button>
+          <lion-dialog ?opened=${this._isOpen} @opened-changed=${this.handleDialog}>
+            <div slot="content" class="dialog demo-box">
+              Hello! You can close this notification here:
+              <button class="close-button" @click=${this.toggleDialog(false)}>⨯</button>
+            </div>
+          </lion-dialog>
+        `;
+      }
+    }
+  };
+
+  return html`
+    <style>
+      ${demoStyle}
+    </style>
+    <div class="demo-box_placements">
+      <dialog-trigger-demo></dialog-trigger-demo>
+    </div>
+  `;
+};
+```
+
 ## Placement overrides
 
 ```js preview-story
@@ -35,7 +81,7 @@ export const placementOverrides = () => {
           Hello! You can close this notification here:
           <button
             class="close-button"
-            @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+            @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
           >
             ⨯
           </button>
@@ -88,7 +134,7 @@ export const otherOverrides = () => {
         Hello! You can close this dialog here:
         <button
           class="demo-dialog-content__close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>

package/docs/components/drawer/use-cases.md

@@ -125,9 +125,9 @@ export const methods = ({ shadowRoot }) => html`
     ${demoStyle}
   </style>
   <section style="margin-top:16px">
-    <button @click=${() => shadowRoot.querySelector('#drawer').toggle()}>Toggle content</button>
-    <button @click=${() => shadowRoot.querySelector('#drawer').show()}>Show content</button>
-    <button @click=${() => shadowRoot.querySelector('#drawer').hide()}>Hide content</button>
+    <button @click="${() => shadowRoot.querySelector('#drawer').toggle()}">Toggle content</button>
+    <button @click="${() => shadowRoot.querySelector('#drawer').show()}">Show content</button>
+    <button @click="${() => shadowRoot.querySelector('#drawer').hide()}">Hide content</button>
   </section>
 
   <div class="demo-container">