@lion/ui 0.7.2 → 0.7.4

package/docs/components/combobox/overview.md

@@ -25,15 +25,16 @@ export const main = () => html`
   <lion-combobox name="combo" label="Default">
     ${lazyRender(
       listboxData.map(
-        (entry, i) =>
-          html` <lion-option .checked="${i === 0}" .choiceValue="${entry}">${entry}</lion-option> `,
+        (entry, i) => html`
+          <lion-option .checked="${i === 0}" .choiceValue="${entry}">${entry}</lion-option>
+        `,
       ),
     )}
   </lion-combobox>
 `;
 ```
 
-[...show more](https://github.com/ing-bank/lion/blob/8fd9ec4df166dd45f230eb032e3b1c151fd6240d/docs/components/combobox/extensions.md)
+[...show more](https://github.com/ing-bank/lion/blob/15a9d70cb690d26e6a2af8a6b5dbdda7e7b0112e/docs/components/combobox/extensions.md)
 
 ## Features
 

package/docs/components/combobox/src/gh-combobox/gh-button.js

@@ -35,7 +35,9 @@ export class GhButton extends LionButton {
         color: #24292e;
         background-color: #fafbfc;
         border-color: rgba(27, 31, 35, 0.15);
-        box-shadow: 0 1px 0 rgba(27, 31, 35, 0.04), inset 0 1px 0 hsla(0, 0%, 100%, 0.25);
+        box-shadow:
+          0 1px 0 rgba(27, 31, 35, 0.04),
+          inset 0 1px 0 hsla(0, 0%, 100%, 0.25);
         transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
       }
 

package/docs/components/combobox/src/gh-combobox/gh-combobox.js

@@ -123,8 +123,15 @@ export class GhCombobox extends LionCombobox {
         /** @configure LionCombobox */
 
         :host {
-          font-family: apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
-            Apple Color Emoji, Segoe UI Emoji;
+          font-family:
+            apple-system,
+            BlinkMacSystemFont,
+            Segoe UI,
+            Helvetica,
+            Arial,
+            sans-serif,
+            Apple Color Emoji,
+            Segoe UI Emoji;
           font-size: 14px;
         }
 

package/docs/components/combobox/src/google-combobox/google-combobox.js

@@ -403,15 +403,13 @@ export class GoogleCombobox extends LionCombobox {
         ),
       prefix: () => renderLitAsNode(html` <span>${googleSearchIcon}</span> `),
       suffix: () =>
-        renderLitAsNode(
-          html` <button aria-label="Search by voice">${googleVoiceSearchIcon}</button> `,
-        ),
+        renderLitAsNode(html`
+          <button aria-label="Search by voice">${googleVoiceSearchIcon}</button>
+        `),
       'clear-btn': () =>
-        renderLitAsNode(
-          html`
-            <button @click="${this.__clearText}" aria-label="Clear text">${googleClearIcon}</button>
-          `,
-        ),
+        renderLitAsNode(html`
+          <button @click="${this.__clearText}" aria-label="Clear text">${googleClearIcon}</button>
+        `),
     };
   }
 

package/docs/components/combobox/src/md-combobox/MdFieldMixin.js

@@ -48,7 +48,8 @@ export const MdFieldMixin = dedupeMixin(
               transform: perspective(100px);
               -ms-transform: none;
               transform-origin: 0 0;
-              transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
+              transition:
+                transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                 color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                 width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
               /* z-index: 1; */
@@ -205,7 +206,9 @@ export const MdFieldMixin = dedupeMixin(
               background-position: 50%;
               transform: scale(10, 10);
               opacity: 0;
-              transition: transform 0.25s, opacity 0.5s;
+              transition:
+                transform 0.25s,
+                opacity 0.5s;
             }
 
             .input-group__container > .input-group__prefix ::slotted(button:active)::after,
@@ -288,7 +291,8 @@ export const MdFieldMixin = dedupeMixin(
               visibility: visible;
               opacity: 1;
               transform: scaleX(1);
-              transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
+              transition:
+                transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                 opacity 0.1s cubic-bezier(0.25, 0.8, 0.25, 1),
                 background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
             }

package/docs/components/combobox/src/md-combobox/style/md-ripple.js

@@ -59,6 +59,7 @@ class MdRipple extends LitElement {
   }
 
   disconnectedCallback() {
+    super.disconnectedCallback();
     this.removeEventListener('mousedown', this.__onRipple);
   }
 

package/docs/components/combobox/src/wa-combobox/wa-combobox.js

@@ -28,7 +28,9 @@ class WaOption extends LionOption {
         cursor: pointer;
         color: rgb(74, 74, 74);
         padding: 0;
-        transition: max-height 0.4s ease, opacity 0.3s ease;
+        transition:
+          max-height 0.4s ease,
+          opacity 0.3s ease;
         max-height: 500px;
       }
 
@@ -287,8 +289,18 @@ class WaCombobox extends LionCombobox {
     ...super.styles,
     css`
       :host {
-        font-family: SF Pro Text, SF Pro Icons, system, -apple-system, system-ui, BlinkMacSystemFont,
-          Helvetica Neue, Helvetica, Lucida Grande, Kohinoor Devanagari, sans-serif;
+        font-family:
+          SF Pro Text,
+          SF Pro Icons,
+          system,
+          -apple-system,
+          system-ui,
+          BlinkMacSystemFont,
+          Helvetica Neue,
+          Helvetica,
+          Lucida Grande,
+          Kohinoor Devanagari,
+          sans-serif;
       }
 
       .input-group__container {

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

@@ -242,8 +242,9 @@ export const multipleChoice = () => html`
     ></demo-selection-display>
     ${lazyRender(
       listboxData.map(
-        (entry, i) =>
-          html` <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option> `,
+        (entry, i) => html`
+          <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option>
+        `,
       ),
     )}
   </lion-combobox>
@@ -264,8 +265,9 @@ export const multipleCustomizableChoice = () => html`
     ></demo-selection-display>
     ${lazyRender(
       listboxData.map(
-        (entry, i) =>
-          html` <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option> `,
+        (entry, i) => html`
+          <lion-option .choiceValue="${entry}" ?checked=${i === 0}>${entry}</lion-option>
+        `,
       ),
     )}
   </lion-combobox>
@@ -434,26 +436,26 @@ const onModelValueChanged = event => {
   console.log(`event.target.modelValue: ${JSON.stringify(event.target.modelValue)}`);
 };
 
-export const complexObjectChoiceValue = () => html` <complex-object-combobox
-  name="combo"
-  label="Display only the label once selected"
-  @model-value-changed="${onModelValueChanged}"
->
-  ${lazyRender(
-    listboxComplexData.map(
-      entry =>
-        html`
+export const complexObjectChoiceValue = () =>
+  html` <complex-object-combobox
+    name="combo"
+    label="Display only the label once selected"
+    @model-value-changed="${onModelValueChanged}"
+  >
+    ${lazyRender(
+      listboxComplexData.map(
+        entry => html`
           <lion-option .choiceValue="${entry.label}">
             <div data-key>${entry.label}</div>
             <small>${entry.description}</small>
           </lion-option>
         `,
-    ),
-  )}
-</complex-object-combobox>`;
+      ),
+    )}
+  </complex-object-combobox>`;
 ```
 
 ## 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/8fd9ec4df166dd45f230eb032e3b1c151fd6240d/docs/components/listbox/overview.md) for more information.
+See the [listbox documentation](https://github.com/ing-bank/lion/blob/15a9d70cb690d26e6a2af8a6b5dbdda7e7b0112e/docs/components/listbox/overview.md) for more information.

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

@@ -0,0 +1,45 @@
+# Dialog >> API Table ||90 
+
+## class: `LionDialog`, `lion-dialog`
+
+### Fields
+
+| Name                         | Privacy   | Type                     | Default | Description                                                                                                                                                           | Inherited From |
+| ---------------------------- | --------- | ------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `config`                     | public    | `Partial<OverlayConfig>` | `{}`    | Configure the many options of the \`OverlayController\`                                                                                                               | OverlayMixin   |
+| `_overlayInvokerNode`        | protected |                          |         |                                                                                                                                                                       | OverlayMixin   |
+| `_overlayReferenceNode`      | protected |                          |         |                                                                                                                                                                       | OverlayMixin   |
+| `_overlayBackdropNode`       | protected |                          |         |                                                                                                                                                                       | OverlayMixin   |
+| `_overlayContentNode`        | protected |                          |         |                                                                                                                                                                       | OverlayMixin   |
+| `_overlayContentWrapperNode` | protected |                          |         |                                                                                                                                                                       | OverlayMixin   |
+| `opened`                     | public    | `boolean`                | `false` | If you add the opened attribute a dialog will be opened on page load. The invoker can be left out&#xA;in case the user does not need to be able to reopen the dialog. | OverlayMixin   |
+
+### Methods
+
+| Name                               | Privacy   | Description                                                                                                                                                                                                                                                                                                                | Parameters                                                                                                   | Return              | Inherited From |
+| ---------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------- | -------------- |
+| `_defineOverlayConfig`             | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              | `OverlayConfig`     | OverlayMixin   |
+| `_defineOverlay`                   | protected |                                                                                                                                                                                                                                                                                                                            | `{ contentNode, invokerNode, referenceNode, backdropNode, contentWrapperNode }, config: DefineOverlayConfig` | `OverlayController` | OverlayMixin   |
+| `_setupOpenCloseListeners`         | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+| `_teardownOpenCloseListeners`      | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+| `_setupOverlayCtrl`                | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+| `_teardownOverlayCtrl`             | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+| `_setOpenedWithoutPropertyEffects` | protected | When the opened state is changed by an Application Developer,cthe OverlayController is&#xA;requested to show/hide. It might happen that this request is not honoured&#xA;(intercepted in before-hide for instance), so that we need to sync the controller state&#xA;to this webcomponent again, preventing eternal loops. | `newOpened: boolean`                                                                                         |                     | OverlayMixin   |
+| `toggle`                           | public    | Toggles the overlay                                                                                                                                                                                                                                                                                                        |                                                                                                              |                     | OverlayMixin   |
+| `open`                             | public    | Shows the overlay                                                                                                                                                                                                                                                                                                          |                                                                                                              |                     | OverlayMixin   |
+| `close`                            | public    | Hides the overlay                                                                                                                                                                                                                                                                                                          |                                                                                                              |                     | OverlayMixin   |
+| `repositionOverlay`                | public    | Sometimes it's needed to recompute Popper position of an overlay, for instance when we have&#xA;an opened combobox and the surrounding context changes (the space consumed by the textbox&#xA;increases vertically)                                                                                                        |                                                                                                              |                     | OverlayMixin   |
+
+### Events
+
+| Name             | Type    | Description | Inherited From |
+| ---------------- | ------- | ----------- | -------------- |
+| `opened-changed` | `Event` |             | OverlayMixin   |
+
+### Attributes
+
+| Name     | Field  | Inherited From |
+| -------- | ------ | -------------- |
+| `opened` | opened | OverlayMixin   |
+
+<hr/>

package/docs/components/dialog/overview.md

@@ -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/8fd9ec4df166dd45f230eb032e3b1c151fd6240d/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/15a9d70cb690d26e6a2af8a6b5dbdda7e7b0112e/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/drawer/api-table.md

@@ -0,0 +1,45 @@
+# Drawer >> API Table ||90 
+
+## class: `LionDrawer`, `lion-drawer`
+
+### Fields
+
+| Name             | Privacy   | Type      | Default | Description                                                                  | Inherited From  |
+| ---------------- | --------- | --------- | ------- | ---------------------------------------------------------------------------- | --------------- |
+| `position`       | public    | `string`  |         | Setter for position property, available values are 'top', 'left' and 'right' |                 |
+| `_contentWidth`  | protected |           |         |                                                                              |                 |
+| `_contentHeight` | protected |           |         |                                                                              | LionCollapsible |
+| `transitioning`  | public    | `boolean` |         |                                                                              |                 |
+| `opened`         | public    | `boolean` | `false` |                                                                              | LionCollapsible |
+| `_invokerNode`   | protected |           |         |                                                                              | LionCollapsible |
+| `_contentNode`   | protected |           |         |                                                                              | LionCollapsible |
+
+### Methods
+
+| Name                 | Privacy   | Description                                                    | Parameters                                                                 | Return          | Inherited From  |
+| -------------------- | --------- | -------------------------------------------------------------- | -------------------------------------------------------------------------- | --------------- | --------------- |
+| `__setBoundaries`    | protected |                                                                |                                                                            |                 |                 |
+| `_showAnimation`     | protected | Trigger show animation and wait for transition to be finished. | `{ contentNode }, options: @param {HTMLElement} options.contentNode    * ` |                 | LionCollapsible |
+| `_hideAnimation`     | protected | Trigger hide animation and wait for transition to be finished. | `{ contentNode }, options: @param {HTMLElement} options.contentNode    * ` |                 | LionCollapsible |
+| `_waitForTransition` | protected | Wait until the transition event is finished.                   | `{ contentNode }, options: @param {HTMLElement} options.contentNode    * ` | `Promise<void>` |                 |
+| `_openedChanged`     | protected |                                                                |                                                                            |                 |                 |
+| `_updateContentSize` | protected |                                                                |                                                                            |                 |                 |
+| `show`               | public    | Show extra content.                                            |                                                                            |                 | LionCollapsible |
+| `hide`               | public    | Hide extra content.                                            |                                                                            |                 | LionCollapsible |
+| `toggle`             | public    | Toggle the current(opened/closed) state.                       |                                                                            |                 | LionCollapsible |
+
+### Events
+
+| Name             | Type          | Description | Inherited From  |
+| ---------------- | ------------- | ----------- | --------------- |
+| `opened-changed` | `CustomEvent` |             | LionCollapsible |
+
+### Attributes
+
+| Name            | Field         | Inherited From  |
+| --------------- | ------------- | --------------- |
+| `transitioning` | transitioning |                 |
+| `opened`        | opened        | LionCollapsible |
+| `position`      | position      |                 |
+
+<hr/>