@vandeurenglenn/lite-elements 0.3.50 → 0.3.52

package/exports/notifications.js

@@ -63,78 +63,78 @@ let CustomNotifications = (() => {
             this.open = false;
         }
         static styles = [
-            css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        pointer-events: auto;
-        z-index: 10001;
-        position: absolute;
-        right: 0;
-        top: 0;
-        overflow: hidden;
-        width: 100%;
-        max-width: 320px;
-        height: auto;
-        box-sizing: border-box;
-        color: #eee;
-        pointer-events: none;
-        height: 100%;
-      }
-
-      :host([open]) {
-        background: var(--md-sys-color-surface-container-high);
-      }
-
-      .recents {
-        display: block;
-        position: relative;
-        top: 12px;
-        right: 12px;
-        width: 100%;
-        pointer-events: none;
-
-        box-sizing: border-box;
-        padding: 12px;
-      }
-
-      .list {
-        padding: 24px;
-        height: 100%;
-      }
-
-      custom-icon {
-        pointer-events: auto;
-      }
+            css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        pointer-events: auto;
+        z-index: 10001;
+        position: absolute;
+        right: 0;
+        top: 0;
+        overflow: hidden;
+        width: 100%;
+        max-width: 320px;
+        height: auto;
+        box-sizing: border-box;
+        color: #eee;
+        pointer-events: none;
+        height: 100%;
+      }
+
+      :host([open]) {
+        background: var(--md-sys-color-surface-container-high);
+      }
+
+      .recents {
+        display: block;
+        position: relative;
+        top: 12px;
+        right: 12px;
+        width: 100%;
+        pointer-events: none;
+
+        box-sizing: border-box;
+        padding: 12px;
+      }
+
+      .list {
+        padding: 24px;
+        height: 100%;
+      }
+
+      custom-icon {
+        pointer-events: auto;
+      }
     `
         ];
         render() {
-            return html `
-      <flex-row style="margin-top: 12px;margin-right: 12px;">
-        <flex-it></flex-it>
-        <custom-icon
-          icon="notifications"
+            return html `
+      <flex-row style="margin-top: 12px;margin-right: 12px;">
+        <flex-it></flex-it>
+        <custom-icon
+          icon="notifications"
           @click=${() => {
                 if (this._list.childElementCount === 0)
                     return;
                 this.open = !this.open;
-            }}
-        ></custom-icon>
-      </flex-row>
-
-      <span class="recents">
-        <slot></slot>
-      </span>
-
-      <custom-pane ?open=${this.open} right top>
-        <span slot="header"></span>
-        <flex-column class="list" slot="content"> </flex-column>
-
-        <flex-row slot="footer" width="100%">
-          <flex-it></flex-it>
-          <custom-icon style="margin-right: 24px;" icon="clear-all" @click="${this._onclick}"></custom-icon>
-        </flex-row>
-      </custom-pane>
+            }}
+        ></custom-icon>
+      </flex-row>
+
+      <span class="recents">
+        <slot></slot>
+      </span>
+
+      <custom-pane ?open=${this.open} right top>
+        <span slot="header"></span>
+        <flex-column class="list" slot="content"> </flex-column>
+
+        <flex-row slot="footer" width="100%">
+          <flex-it></flex-it>
+          <custom-icon style="margin-right: 24px;" icon="clear-all" @click="${this._onclick}"></custom-icon>
+        </flex-row>
+      </custom-pane>
     `;
         }
         constructor() {

package/exports/pages.js

@@ -34,51 +34,51 @@ class CustomPages extends SelectBase {
         }
     }
     static styles = [
-        css `
-      :host {
-        flex: 1;
-        position: relative;
-        --primary-background-color: #eceff1;
-        overflow: hidden;
-        height: 100%;
-        width: 100%;
-      }
-      ::slotted(*) {
-        display: flex;
-        position: absolute;
-        opacity: 0;
-        pointer-events: none;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms opacity,
-          var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
-        /*transform: scale(0.1);*/
-        transform-origin: left;
-      }
-      ::slotted(.animate-up) {
-        transform: translateY(-120%);
-      }
-      ::slotted(.animate-down) {
-        transform: translateY(120%);
-      }
-      ::slotted(.custom-selected) {
-        opacity: 1;
-        pointer-events: auto;
-        transform: translateY(0);
-        transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms width,
-          var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
-        max-height: 100%;
-        max-width: 100%;
-      }
+        css `
+      :host {
+        flex: 1;
+        position: relative;
+        --primary-background-color: #eceff1;
+        overflow: hidden;
+        height: 100%;
+        width: 100%;
+      }
+      ::slotted(*) {
+        display: flex;
+        position: absolute;
+        opacity: 0;
+        pointer-events: none;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms opacity,
+          var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
+        /*transform: scale(0.1);*/
+        transform-origin: left;
+      }
+      ::slotted(.animate-up) {
+        transform: translateY(-120%);
+      }
+      ::slotted(.animate-down) {
+        transform: translateY(120%);
+      }
+      ::slotted(.custom-selected) {
+        opacity: 1;
+        pointer-events: auto;
+        transform: translateY(0);
+        transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms width,
+          var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
+        max-height: 100%;
+        max-width: 100%;
+      }
     `
     ];
     render() {
-        return html `
-      <div class="wrapper">
-        <slot></slot>
-      </div>
+        return html `
+      <div class="wrapper">
+        <slot></slot>
+      </div>
     `;
     }
 }

package/exports/pane.js

@@ -76,24 +76,24 @@ let CustomPane = (() => {
         }
         static styles = [style];
         render() {
-            return html `
-      <custom-elevation></custom-elevation>
-      <aside>
-        <slot name="header">
-          <flex-row center>
-            <slot name="headline"></slot>
-            <flex-it></flex-it>
-            <custom-icon-button @click=${(e) => this.closePane(e)} .id=${this.id} icon="menu_open">
-            </custom-icon-button>
-          </flex-row>
-        </slot>
-        <flex-column class="content">
-          <slot name="content"></slot>
-        </flex-column>
-        <flex-row class="footer">
-          <slot name="footer"></slot>
-        </flex-row>
-      </aside>
+            return html `
+      <custom-elevation></custom-elevation>
+      <aside>
+        <slot name="header">
+          <flex-row center>
+            <slot name="headline"></slot>
+            <flex-it></flex-it>
+            <custom-icon-button @click=${(e) => this.closePane(e)} .id=${this.id} icon="menu_open">
+            </custom-icon-button>
+          </flex-row>
+        </slot>
+        <flex-column class="content">
+          <slot name="content"></slot>
+        </flex-column>
+        <flex-row class="footer">
+          <slot name="footer"></slot>
+        </flex-row>
+      </aside>
     `;
         }
         constructor() {

package/exports/rail.js

@@ -56,63 +56,63 @@ let CustomRail = (() => {
         get right() { return this.#right_accessor_storage; }
         set right(value) { this.#right_accessor_storage = value; }
         render() {
-            return html `<style>
-        :host {
-          display: contents;
-        }
-
-        custom-pane {
-          box-sizing: border-box;
-          padding: 12px 24px;
-          height: 100%;
-          --custom-pane-width: var(--custom-drawer-with, 320px);
-        }
-
-        slot[name='headline']::slotted(*) {
-          color: var(--md-sys-color-on-surface-variant);
-          font-family: var(--md-sys-typescale-title-small-font-family-name);
-          font-style: var(--md-sys-typescale-title-small-font-family-style);
-          font-weight: var(--md-sys-typescale-title-small-font-weight);
-          font-size: var(--md-sys-typescale-title-small-font-size);
-          letter-spacing: var(--md-sys-typescale-title-small-tracking);
-          line-height: var(--md-sys-typescale-title-small-height);
-          text-transform: var(--md-sys-typescale-title-small-text-transform);
-          text-decoration: var(--md-sys-typescale-title-small-text-decoration);
-          text-transform: capitalize;
-          margin: 0;
-        }
-
-        ::slotted([slot='footer']) {
-          display: block;
-          box-sizing: border-box;
-          min-height: 48px;
-          border-top: 1px solid rgba(0, 0, 0, 0.14);
-        }
-
-        ::slotted([slot='content']) {
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          width: 100%;
-          overflow-y: auto;
-        }
-
-        ::slotted(*) {
-          pointer-events: none;
-        }
-
-        aside {
-          width: 100%;
-        }
-      </style>
-
-      <custom-pane .open=${this.open} .mobile=${this.mobile} .type=${this.type}>
-        <slot name="header">
-          <slot name="headline" slot="headline"></slot>
-          <slot name="menu-button" slot="menu-button"></slot>
-        </slot>
-        <slot name="content" slot="content"></slot>
-        <slot name="footer" slot="footer"></slot>
+            return html `<style>
+        :host {
+          display: contents;
+        }
+
+        custom-pane {
+          box-sizing: border-box;
+          padding: 12px 24px;
+          height: 100%;
+          --custom-pane-width: var(--custom-drawer-with, 320px);
+        }
+
+        slot[name='headline']::slotted(*) {
+          color: var(--md-sys-color-on-surface-variant);
+          font-family: var(--md-sys-typescale-title-small-font-family-name);
+          font-style: var(--md-sys-typescale-title-small-font-family-style);
+          font-weight: var(--md-sys-typescale-title-small-font-weight);
+          font-size: var(--md-sys-typescale-title-small-font-size);
+          letter-spacing: var(--md-sys-typescale-title-small-tracking);
+          line-height: var(--md-sys-typescale-title-small-height);
+          text-transform: var(--md-sys-typescale-title-small-text-transform);
+          text-decoration: var(--md-sys-typescale-title-small-text-decoration);
+          text-transform: capitalize;
+          margin: 0;
+        }
+
+        ::slotted([slot='footer']) {
+          display: block;
+          box-sizing: border-box;
+          min-height: 48px;
+          border-top: 1px solid rgba(0, 0, 0, 0.14);
+        }
+
+        ::slotted([slot='content']) {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          width: 100%;
+          overflow-y: auto;
+        }
+
+        ::slotted(*) {
+          pointer-events: none;
+        }
+
+        aside {
+          width: 100%;
+        }
+      </style>
+
+      <custom-pane .open=${this.open} .mobile=${this.mobile} .type=${this.type}>
+        <slot name="header">
+          <slot name="headline" slot="headline"></slot>
+          <slot name="menu-button" slot="menu-button"></slot>
+        </slot>
+        <slot name="content" slot="content"></slot>
+        <slot name="footer" slot="footer"></slot>
       </custom-pane> `;
         }
         constructor() {

package/exports/root.js

@@ -17,16 +17,16 @@ let CustomRoot = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static styles = [
-            css `
-      :host {
-        display: contents;
-      }
+            css `
+      :host {
+        display: contents;
+      }
     `
         ];
         render() {
-            return html `
-      <custom-theme></custom-theme>
-      <slot></slot>
+            return html `
+      <custom-theme></custom-theme>
+      <slot></slot>
     `;
         }
         static {

package/exports/section/section.d.ts

@@ -3,7 +3,7 @@ declare const CustomSection_base: {
     new (): {
         [x: string]: any;
         scrolling: any;
-        scrollElement: any;
+        scrollElement: /*elided*/ any;
         "__#2@#onscroll": () => void;
         connectedCallback(options?: {
             scrollElement: undefined | string;

package/exports/section.js

@@ -29,19 +29,19 @@ let DemoSection = (() => {
             }
         }
         static styles = [
-            css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        box-sizing: border-box;
-      }
+            css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+      }
     `
         ];
         render() {
-            return html `
-      <custom-section>
-        <slot></slot>
-      </custom-section>
+            return html `
+      <custom-section>
+        <slot></slot>
+      </custom-section>
     `;
         }
         static {

package/exports/section2.js

@@ -19,33 +19,33 @@ let CustomSection = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static styles = [
-            css `
-      :host {
-        display: flex;
-        justify-content: center;
-        align-items: baseline;
-        margin: 16px;
-        position: relative;
-        overflow-y: auto;
-      }
-      .container {
-        align-items: center;
-        box-sizing: border-box;
-        padding: 12px;
-        border-radius: var(--md-sys-shape-corner-extra-large);
-      }
-      .content {
-        max-width: 720px;
-      }
+            css `
+      :host {
+        display: flex;
+        justify-content: center;
+        align-items: baseline;
+        margin: 16px;
+        position: relative;
+        overflow-y: auto;
+      }
+      .container {
+        align-items: center;
+        box-sizing: border-box;
+        padding: 12px;
+        border-radius: var(--md-sys-shape-corner-extra-large);
+      }
+      .content {
+        max-width: 720px;
+      }
     `
         ];
         render() {
-            return html `
-      <flex-column class="container">
-        <flex-column class="content">
-          <slot></slot>
-        </flex-column>
-      </flex-column>
+            return html `
+      <flex-column class="container">
+        <flex-column class="content">
+          <slot></slot>
+        </flex-column>
+      </flex-column>
     `;
         }
         static {

package/exports/selector.js

@@ -18,36 +18,36 @@ let CustomSelector = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static styles = [
-            css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        height: 100%;
-        overflow-y: auto;
-      }
-
-      ::slotted(.custom-selected:not([non-interactive])) {
-        background: var(--md-sys-color-secondary-container);
-        color: var(--md-sys-color-on-secondary-container);
-      }
-
-      ::slotted(*) {
-        color: var(--md-sys-color-on-surface-variant);
-        font-family: var(--md-sys-typescale-label-large-font-family-name);
-        font-style: var(--md-sys-typescale-label-large-font-family-style);
-        font-weight: var(--md-sys-typescale-label-large-font-weight);
-        font-size: var(--md-sys-typescale-label-large-font-size);
-        letter-spacing: var(--md-sys-typescale-label-large-tracking);
-        line-height: var(--md-sys-typescale-label-large-height);
-        text-transform: var(--md-sys-typescale-label-large-text-transform);
-        text-decoration: var(--md-sys-typescale-label-large-text-decoration);
-      }
-
-      ::slotted(:not(.custom-selected):not([non-interactive]):hover) {
-        background: var(--md-sys-color-secondary-container-hover);
-        color: var(--md-sys-color-on-secondary-container);
-      }
+            css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+      }
+
+      ::slotted(.custom-selected:not([non-interactive])) {
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+
+      ::slotted(*) {
+        color: var(--md-sys-color-on-surface-variant);
+        font-family: var(--md-sys-typescale-label-large-font-family-name);
+        font-style: var(--md-sys-typescale-label-large-font-family-style);
+        font-weight: var(--md-sys-typescale-label-large-font-weight);
+        font-size: var(--md-sys-typescale-label-large-font-size);
+        letter-spacing: var(--md-sys-typescale-label-large-tracking);
+        line-height: var(--md-sys-typescale-label-large-height);
+        text-transform: var(--md-sys-typescale-label-large-text-transform);
+        text-decoration: var(--md-sys-typescale-label-large-text-decoration);
+      }
+
+      ::slotted(:not(.custom-selected):not([non-interactive]):hover) {
+        background: var(--md-sys-color-secondary-container-hover);
+        color: var(--md-sys-color-on-secondary-container);
+      }
     `
         ];
         render() {

package/exports/summary-mirror.js

@@ -39,25 +39,25 @@ let CustomSummaryMirror = (() => {
             }
         }
         get template() {
-            return html `
-      <style>
-        :host {
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          min-height: 400px;
-          max-width: 1200px;
-        }
-
-        @media (min-width: 1200px) {
-          :host {
-            flex-direction: row;
-            width: 80%;
-          }
-        }
-      </style>
-      <slot name="left"></slot>
-      <slot name="right"></slot>
+            return html `
+      <style>
+        :host {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          min-height: 400px;
+          max-width: 1200px;
+        }
+
+        @media (min-width: 1200px) {
+          :host {
+            flex-direction: row;
+            width: 80%;
+          }
+        }
+      </style>
+      <slot name="left"></slot>
+      <slot name="right"></slot>
     `;
         }
     });