@vandeurenglenn/lite-elements 0.3.50 → 0.3.51

package/exports/icon.js

@@ -66,21 +66,21 @@ let CustomIcon = (() => {
             }
         }
         static styles = [
-            css `
-      :host {
-        --__custom-icon-size: var(--custom-icon-size, 24px);
-        --custom-icon-color: var(--md-sys-color-on-surface);
-        display: flex;
-        height: var(--custom-icon-size, 24px);
-        width: var(--custom-icon-size, 24px);
-      }
-
-      svg {
-        fill: var(--custom-icon-color);
-        height: inherit;
-        width: inherit;
-        pointer-events: none;
-      }
+            css `
+      :host {
+        --__custom-icon-size: var(--custom-icon-size, 24px);
+        --custom-icon-color: var(--md-sys-color-on-surface);
+        display: flex;
+        height: var(--custom-icon-size, 24px);
+        width: var(--custom-icon-size, 24px);
+      }
+
+      svg {
+        fill: var(--custom-icon-color);
+        height: inherit;
+        width: inherit;
+        pointer-events: none;
+      }
     `
         ];
         connectedCallback() {

package/exports/input.js

@@ -16,11 +16,11 @@ let TimePickerInput = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static styles = [
-            css `
-      :host {
-        display: flex;
-        flex-direction: column;
-      }
+            css `
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
     `
         ];
         render() {

package/exports/list-item.js

@@ -70,51 +70,51 @@ let CustomListItem = (() => {
             this.startSlot.addEventListener('slotchange', this.#startSlotChange);
         }
         static styles = [
-            css `
-      * {
-        pointer-events: none;
-        user-select: none;
-      }
-      :host {
-        display: flex;
-        /* top, right, bottom, left */
-        padding: 8px 24px 8px 16px;
-        box-sizing: border-box;
-        width: 100%;
-        cursor: pointer;
-        min-width: 112px;
-        max-width: 280px;
-        height: 48px;
-        pointer-events: auto;
-      }
-      :host([type='menu']) {
-        padding: 0 12px;
-        height: 48px;
-      }
-
-      :host([type='menu']),
-      :host([type='one-line']) {
-        align-items: center;
-      }
-
-      :host([has-start]) .body {
-        padding-left: 12px;
-      }
-
-      :host([non-interactive]) {
-        pointer-events: none;
-        cursor: default;
-      }
+            css `
+      * {
+        pointer-events: none;
+        user-select: none;
+      }
+      :host {
+        display: flex;
+        /* top, right, bottom, left */
+        padding: 8px 24px 8px 16px;
+        box-sizing: border-box;
+        width: 100%;
+        cursor: pointer;
+        min-width: 112px;
+        max-width: 280px;
+        height: 48px;
+        pointer-events: auto;
+      }
+      :host([type='menu']) {
+        padding: 0 12px;
+        height: 48px;
+      }
+
+      :host([type='menu']),
+      :host([type='one-line']) {
+        align-items: center;
+      }
+
+      :host([has-start]) .body {
+        padding-left: 12px;
+      }
+
+      :host([non-interactive]) {
+        pointer-events: none;
+        cursor: default;
+      }
     `
         ];
         render() {
-            return html `
-      <slot name="start"></slot>
-      <span class="body">
-        <slot></slot>
-      </span>
-      <flex-it></flex-it>
-      <slot name="end"></slot>
+            return html `
+      <slot name="start"></slot>
+      <span class="body">
+        <slot></slot>
+      </span>
+      <flex-it></flex-it>
+      <slot name="end"></slot>
     `;
         }
         static {

package/exports/menu.js

@@ -41,21 +41,21 @@ let CustomMenu = (() => {
             this.selector.removeEventListener('selected', this.#onselected);
         }
         static styles = [
-            css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        min-width: 120px;
-        max-width: 280px;
-      }
+            css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        min-width: 120px;
+        max-width: 280px;
+      }
     `
         ];
         render() {
-            return html `
-      <custom-selector>
-        <slot></slot>
-      </custom-selector>
+            return html `
+      <custom-selector>
+        <slot></slot>
+      </custom-selector>
     `;
         }
         static {

package/exports/minute-field.js

@@ -17,10 +17,10 @@ let TimePickerMinuteField = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static styles = [
-            css `
-      :host {
-        display: block;
-      }
+            css `
+      :host {
+        display: block;
+      }
     `
         ];
         render() {

package/exports/mixins/scroll-mixin.d.ts

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

package/exports/notification.js

@@ -56,42 +56,42 @@ let CustomNotification = (() => {
         #onclick = (__runInitializers(this, _type_extraInitializers), () => {
             this.parentElement.removeChild(this);
         });
-        static styles = css `
-    :host {
-      display: flex;
-      align-items: flex-start;
-      font-size: 13px;
-      border: 1px solid;
-      border-radius: 12px;
-      padding: 6px 12px;
-      box-sizing: border-box;
-      margin-bottom: 12px;
-      background: var(--md-sys-color-surface-variant);
-    }
-
-    flex-row {
-      height: 24px;
-      width: 100%;
-      box-sizing: border-box;
-      align-items: center;
-    }
-
-    strong {
-      font-size: 14px;
-    }
+        static styles = css `
+    :host {
+      display: flex;
+      align-items: flex-start;
+      font-size: 13px;
+      border: 1px solid;
+      border-radius: 12px;
+      padding: 6px 12px;
+      box-sizing: border-box;
+      margin-bottom: 12px;
+      background: var(--md-sys-color-surface-variant);
+    }
+
+    flex-row {
+      height: 24px;
+      width: 100%;
+      box-sizing: border-box;
+      align-items: center;
+    }
+
+    strong {
+      font-size: 14px;
+    }
   `;
         render() {
-            return html `
-      ${this.image ? html `<img src=${this.image} />` : ''}
-      <flex-column>
-        <flex-row>
-          <strong>${this.title}</strong>
-          <flex-it></flex-it>
-          <custom-icon icon="close" @click=${this.#onclick}></custom-icon>
-        </flex-row>
-
-        <p>${this.message}</p>
-      </flex-column>
+            return html `
+      ${this.image ? html `<img src=${this.image} />` : ''}
+      <flex-column>
+        <flex-row>
+          <strong>${this.title}</strong>
+          <flex-it></flex-it>
+          <custom-icon icon="close" @click=${this.#onclick}></custom-icon>
+        </flex-row>
+
+        <p>${this.message}</p>
+      </flex-column>
     `;
         }
         static {

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() {