@vandeurenglenn/lite-elements 0.3.50 → 0.3.51

package/exports/dialog.js

@@ -94,161 +94,161 @@ let CustomDialog = (() => {
             this.open = false;
         }
         static styles = [
-            css `
-      :host {
-        position: absolute;
-        inset: 0;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        pointer-events: none;
-      }
-
-      .header {
-        height: 56px;
-        box-sizing: border-box;
-      }
-
-      .scrim,
-      .dialog {
-        transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms opacity,
-          var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
-      }
-
-      .scrim {
-        position: absolute;
-        inset: 0;
-        background-color: var(--md-sys-color-scrim);
-        opacity: 0;
-        pointer-events: none;
-      }
-
-      dialog {
-        pointer-events: none;
-        border: none;
-        min-width: var(--custom-dialog-min-width, 280px);
-        max-width: var(--custom-dialog-max-width, 560px);
-        width: fit-content;
-        border-radius: var(--md-sys-shape-corner-extra-large);
-        background-color: var(--md-sys-color-surface-container-high);
-        color: var(--md-sys-color-on-surface);
-        padding: 24px;
-        box-sizing: border-box;
-        position: relative;
-        opacity: 0;
-        transform: scaleY(0.1);
-      }
-
-      .body {
-        overflow-y: auto;
-      }
-
-      :host([has-actions]) .body {
-        padding-top: 16px;
-        padding-bottom: 24px;
-      }
-
-      :host([has-header][has-hero]) .header {
-        padding-top: 16px;
-      }
-
-      slot[name='title']::slotted(*) {
-        font-family: var(--md-sys-typescale-title-large-font-family-name);
-        font-style: var(--md-sys-typescale-title-large-font-family-style);
-        font-weight: var(--md-sys-typescale-title-large-font-weight);
-        font-size: var(--md-sys-typescale-title-large-font-size);
-        letter-spacing: var(--md-sys-typescale-title-large-tracking);
-        line-height: var(--md-sys-typescale-title-large-height);
-        text-transform: var(--md-sys-typescale-title-large-text-transform);
-        text-decoration: var(--md-sys-typescale-title-large-text-decoration);
-      }
-
-      :host([has-hero]) slot[name='title']::slotted(*) {
-        padding-top: 16px;
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-      }
-
-      :host([fullscreen]) slot[name='title']::slotted(*) {
-        padding-left: 16px;
-      }
-
-      :host(:not([fullscreen])) dialog {
-        align-items: center;
-        justify-content: center;
-      }
-
-      slot[name='supporting-text']::slotted(*) {
-        color: var(--md-sys-color-on-surface-variant);
-        padding-bottom: 16px;
-      }
-
-      slot[name='actions']::slotted(*) {
-        align-items: center;
-        justify-content: end;
-      }
-
-      :host([open]) dialog,
-      :host([open]) .scrim {
-        pointer-events: auto;
-        opacity: 1;
-        transform: scaleY(1);
-        transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms opacity,
-          var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
-      }
-
-      :host([open]) .scrim {
-        opacity: 0.44;
-      }
-
-      :host([fullscreen]) slot[name='actions']::slotted(*) {
-        --custom-icon-size: 12px;
-        --custom-button-color: var(--md-sys-color-primary);
-      }
-
-      slot[name='actions'] {
-        align-items: flex-end;
-      }
+            css `
+      :host {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+      }
+
+      .header {
+        height: 56px;
+        box-sizing: border-box;
+      }
+
+      .scrim,
+      .dialog {
+        transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms opacity,
+          var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
+      }
+
+      .scrim {
+        position: absolute;
+        inset: 0;
+        background-color: var(--md-sys-color-scrim);
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      dialog {
+        pointer-events: none;
+        border: none;
+        min-width: var(--custom-dialog-min-width, 280px);
+        max-width: var(--custom-dialog-max-width, 560px);
+        width: fit-content;
+        border-radius: var(--md-sys-shape-corner-extra-large);
+        background-color: var(--md-sys-color-surface-container-high);
+        color: var(--md-sys-color-on-surface);
+        padding: 24px;
+        box-sizing: border-box;
+        position: relative;
+        opacity: 0;
+        transform: scaleY(0.1);
+      }
+
+      .body {
+        overflow-y: auto;
+      }
+
+      :host([has-actions]) .body {
+        padding-top: 16px;
+        padding-bottom: 24px;
+      }
+
+      :host([has-header][has-hero]) .header {
+        padding-top: 16px;
+      }
+
+      slot[name='title']::slotted(*) {
+        font-family: var(--md-sys-typescale-title-large-font-family-name);
+        font-style: var(--md-sys-typescale-title-large-font-family-style);
+        font-weight: var(--md-sys-typescale-title-large-font-weight);
+        font-size: var(--md-sys-typescale-title-large-font-size);
+        letter-spacing: var(--md-sys-typescale-title-large-tracking);
+        line-height: var(--md-sys-typescale-title-large-height);
+        text-transform: var(--md-sys-typescale-title-large-text-transform);
+        text-decoration: var(--md-sys-typescale-title-large-text-decoration);
+      }
+
+      :host([has-hero]) slot[name='title']::slotted(*) {
+        padding-top: 16px;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      :host([fullscreen]) slot[name='title']::slotted(*) {
+        padding-left: 16px;
+      }
+
+      :host(:not([fullscreen])) dialog {
+        align-items: center;
+        justify-content: center;
+      }
+
+      slot[name='supporting-text']::slotted(*) {
+        color: var(--md-sys-color-on-surface-variant);
+        padding-bottom: 16px;
+      }
+
+      slot[name='actions']::slotted(*) {
+        align-items: center;
+        justify-content: end;
+      }
+
+      :host([open]) dialog,
+      :host([open]) .scrim {
+        pointer-events: auto;
+        opacity: 1;
+        transform: scaleY(1);
+        transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms opacity,
+          var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
+      }
+
+      :host([open]) .scrim {
+        opacity: 0.44;
+      }
+
+      :host([fullscreen]) slot[name='actions']::slotted(*) {
+        --custom-icon-size: 12px;
+        --custom-button-color: var(--md-sys-color-primary);
+      }
+
+      slot[name='actions'] {
+        align-items: flex-end;
+      }
     `
         ];
         render() {
-            return html `
-      <span class="scrim" @click=${this._close}></span>
-      <dialog ?open=${this.open}>
-        <custom-elevation level=${this.fullscreen ? 0 : 3}></custom-elevation>
-        <slot name="hero-icon"></slot>
-        <slot name="supporting-text"></slot>
-        <slot name="header">
-          <flex-row class="header" center>
-            <flex-row center style="width: 100%">
-              <slot name="header-start">
+            return html `
+      <span class="scrim" @click=${this._close}></span>
+      <dialog ?open=${this.open}>
+        <custom-elevation level=${this.fullscreen ? 0 : 3}></custom-elevation>
+        <slot name="hero-icon"></slot>
+        <slot name="supporting-text"></slot>
+        <slot name="header">
+          <flex-row class="header" center>
+            <flex-row center style="width: 100%">
+              <slot name="header-start">
                 ${this.fullscreen
-                ? html `<custom-button @click=${this._close}
-                      ><custom-icon slot="icon">close</custom-icon></custom-button
+                ? html `<custom-button @click=${this._close}
+                      ><custom-icon slot="icon">close</custom-icon></custom-button
                     >`
-                : ''}
-              </slot>
-              <slot name="title"></slot>
-              <flex-it></flex-it>
-              <slot name="header-end">
-                ${this.fullscreen ? html `<slot name="actions"></slot>` : ''}
+                : ''}
+              </slot>
+              <slot name="title"></slot>
+              <flex-it></flex-it>
+              <slot name="header-end">
+                ${this.fullscreen ? html `<slot name="actions"></slot>` : ''}
                 ${this.fullscreen
                 ? ''
-                : html `<custom-button @click=${this._close}
-                      ><custom-icon slot="icon">close</custom-icon></custom-button
-                    >`}
-              </slot>
-            </flex-row>
-          </flex-row>
-        </slot>
-        <flex-column class="body">
-          <slot></slot>
-        </flex-column>
-
-        ${this.fullscreen ? '' : html `<slot name="actions"></slot>`}
-      </dialog>
+                : html `<custom-button @click=${this._close}
+                      ><custom-icon slot="icon">close</custom-icon></custom-button
+                    >`}
+              </slot>
+            </flex-row>
+          </flex-row>
+        </slot>
+        <flex-column class="body">
+          <slot></slot>
+        </flex-column>
+
+        ${this.fullscreen ? '' : html `<slot name="actions"></slot>`}
+      </dialog>
     `;
         }
         static {

package/exports/divider.js

@@ -22,27 +22,27 @@ let CustomDivider = (() => {
             middleInset: { type: Boolean, reflect: true, attribute: 'middle-inset' }
         };
         render() {
-            return html `
-      <style>
-        :host {
-          display: block;
-          box-sizing: border-box;
-          min-height: 1px;
-          margin: 8px 0 16px 0;
-          width: 100%;
-          background: var(--md-sys-color-outline);
-        }
-
-        :host([inset]) {
-          margin-left: 16px;
-          margin-right: 0;
-        }
-
-        :host([middle-inset]) {
-          margin-left: 16px;
-          margin-right: 16px;
-        }
-      </style>
+            return html `
+      <style>
+        :host {
+          display: block;
+          box-sizing: border-box;
+          min-height: 1px;
+          margin: 8px 0 16px 0;
+          width: 100%;
+          background: var(--md-sys-color-outline);
+        }
+
+        :host([inset]) {
+          margin-left: 16px;
+          margin-right: 0;
+        }
+
+        :host([middle-inset]) {
+          margin-left: 16px;
+          margin-right: 16px;
+        }
+      </style>
     `;
         }
         static {

package/exports/drawer-button.js

@@ -48,19 +48,19 @@ let CustomDrawerButton = (() => {
             document.dispatchEvent(new CustomEvent('custom-pane-open', { detail: this.id }));
         }
         static styles = [
-            css `
-      :host {
-        display: block;
-        opacity: 1;
-        pointer-events: auto;
-        will-change: width, opacity;
-      }
-
-      :host([drawer-open]) {
-        opacity: 0;
-        pointer-events: none;
-        width: 0;
-      }
+            css `
+      :host {
+        display: block;
+        opacity: 1;
+        pointer-events: auto;
+        will-change: width, opacity;
+      }
+
+      :host([drawer-open]) {
+        opacity: 0;
+        pointer-events: none;
+        width: 0;
+      }
     `
         ];
         render() {

package/exports/drawer-item.js

@@ -16,47 +16,47 @@ let CustomDrawerItem = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static styles = [
-            css `
-      :host {
-        display: flex;
-        padding-left: 16px;
-        padding-right: 24px;
-        height: 100%;
-        min-height: 54px;
-        max-height: 54px;
-        width: 100%;
-        box-sizing: border-box;
-        border-radius: var(--md-sys-shape-corner-extra-large);
-        align-items: center;
-        pointer-events: auto;
-        cursor: pointer;
-      }
-
-      slot {
-        pointer-events: none;
-      }
-
-      slot[name='icon']::slotted(*) {
-        margin-right: 12px;
-        height: 24px;
-        width: 24px;
-      }
-
-      slot[name='end']::slotted(*) {
-        margin-left: 12px;
-        box-sizing: border-box;
-      }
-
-      :host([non-interactive]) {
-        pointer-events: none;
-      }
+            css `
+      :host {
+        display: flex;
+        padding-left: 16px;
+        padding-right: 24px;
+        height: 100%;
+        min-height: 54px;
+        max-height: 54px;
+        width: 100%;
+        box-sizing: border-box;
+        border-radius: var(--md-sys-shape-corner-extra-large);
+        align-items: center;
+        pointer-events: auto;
+        cursor: pointer;
+      }
+
+      slot {
+        pointer-events: none;
+      }
+
+      slot[name='icon']::slotted(*) {
+        margin-right: 12px;
+        height: 24px;
+        width: 24px;
+      }
+
+      slot[name='end']::slotted(*) {
+        margin-left: 12px;
+        box-sizing: border-box;
+      }
+
+      :host([non-interactive]) {
+        pointer-events: none;
+      }
     `
         ];
         render() {
-            return html `
-      <slot name="icon"></slot>
-      <slot></slot>
-      <slot name="end"></slot>
+            return html `
+      <slot name="icon"></slot>
+      <slot></slot>
+      <slot name="end"></slot>
     `;
         }
         static {

package/exports/drawer-layout.js

@@ -121,101 +121,101 @@ let CustomDrawerLayout = (() => {
                 this.drawerOpen = !this.drawerOpen;
         });
         render() {
-            return html `<style>
-        :host {
-          --custom-drawer-width: 320px;
-          display: flex;
-          flex-direction: row;
-          inset: 0;
-          background: var(--md-sys-color-surface);
-          color: var(--md-sys-color-on-surface);
-          background-blend-mode: hue;
-          position: absolute;
-          box-sizing: border-box;
-        }
-
-        main {
-          width: 100%;
-          height: 100%;
-          overflow-y: auto;
-        }
-
-        :host([drawer-open][narrow]) .scrim {
-          z-index: 1000;
-          position: fixed;
-          inset: 0;
-          background-color: var(--md-sys-color-scrim);
-          opacity: 0.44;
-        }
-
-        custom-drawer {
-          --custom-pane-width: var(--custom-drawer-width, 320px);
-        }
-
-        :host(:not([narrow])) .middle-pane {
-          will-change: width, transform;
-          width: calc(100% - var(--custom-drawer-width));
-          height: 100%;
-          position: absolute;
-          transform: translateX(var(--custom-drawer-width));
-
-          transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms width,
-            var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
-        }
-
-        :host(:not([drawer-open])) .middle-pane {
-          transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms width,
-            var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
-          transform: translateX(0);
-          width: 100%;
-        }
-
-        :host([narrow]) .middle-pane {
-          width: 100%;
-          transform: 0;
-          left: 0;
-        }
-      </style>
-      <span class="scrim" @click=${this._click}></span>
-
-      <slot name="drawer">
-        <custom-drawer
-          @click=${this._click}
-          .mobile=${this.narrow}
-          .open=${this.drawerOpen}
-          .type=${this.drawerType}
-          .id=${this.mainDrawerId}
-        >
-          <slot name="drawer-headline" slot="headline"></slot>
-          <slot name="drawer-menu-button" slot="menu-button"></slot>
-          <slot name="drawer-content" slot="content"></slot>
-          <slot name="drawer-footer" slot="footer"></slot>
-        </custom-drawer>
-      </slot>
-
-      <flex-column class="middle-pane">
-        <!--  TODO: do we want a header? -->
-        <slot name="header"></slot>
-
-        <slot name="top-app-bar">
-          <custom-top-app-bar .type=${this.appBarType}>
-            <slot name="top-app-bar-start" slot="start">
-              <slot name="drawer-menu-button">
-                <custom-drawer-button .mobile=${this.narrow} ?drawer-open=${this.drawerOpen} .id=${this.mainDrawerId}>
-                  menu
-                </custom-drawer-button>
-              </slot>
-            </slot>
-            <slot name="top-app-bar-title" slot="title"></slot>
-            <slot name="top-app-bar-end" slot="end"></slot>
-          </custom-top-app-bar>
-        </slot>
-
-        <slot name="content">
-          <main>
-            <slot></slot>
-          </main>
-        </slot>
+            return html `<style>
+        :host {
+          --custom-drawer-width: 320px;
+          display: flex;
+          flex-direction: row;
+          inset: 0;
+          background: var(--md-sys-color-surface);
+          color: var(--md-sys-color-on-surface);
+          background-blend-mode: hue;
+          position: absolute;
+          box-sizing: border-box;
+        }
+
+        main {
+          width: 100%;
+          height: 100%;
+          overflow-y: auto;
+        }
+
+        :host([drawer-open][narrow]) .scrim {
+          z-index: 1000;
+          position: fixed;
+          inset: 0;
+          background-color: var(--md-sys-color-scrim);
+          opacity: 0.44;
+        }
+
+        custom-drawer {
+          --custom-pane-width: var(--custom-drawer-width, 320px);
+        }
+
+        :host(:not([narrow])) .middle-pane {
+          will-change: width, transform;
+          width: calc(100% - var(--custom-drawer-width));
+          height: 100%;
+          position: absolute;
+          transform: translateX(var(--custom-drawer-width));
+
+          transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms width,
+            var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
+        }
+
+        :host(:not([drawer-open])) .middle-pane {
+          transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms width,
+            var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
+          transform: translateX(0);
+          width: 100%;
+        }
+
+        :host([narrow]) .middle-pane {
+          width: 100%;
+          transform: 0;
+          left: 0;
+        }
+      </style>
+      <span class="scrim" @click=${this._click}></span>
+
+      <slot name="drawer">
+        <custom-drawer
+          @click=${this._click}
+          .mobile=${this.narrow}
+          .open=${this.drawerOpen}
+          .type=${this.drawerType}
+          .id=${this.mainDrawerId}
+        >
+          <slot name="drawer-headline" slot="headline"></slot>
+          <slot name="drawer-menu-button" slot="menu-button"></slot>
+          <slot name="drawer-content" slot="content"></slot>
+          <slot name="drawer-footer" slot="footer"></slot>
+        </custom-drawer>
+      </slot>
+
+      <flex-column class="middle-pane">
+        <!--  TODO: do we want a header? -->
+        <slot name="header"></slot>
+
+        <slot name="top-app-bar">
+          <custom-top-app-bar .type=${this.appBarType}>
+            <slot name="top-app-bar-start" slot="start">
+              <slot name="drawer-menu-button">
+                <custom-drawer-button .mobile=${this.narrow} ?drawer-open=${this.drawerOpen} .id=${this.mainDrawerId}>
+                  menu
+                </custom-drawer-button>
+              </slot>
+            </slot>
+            <slot name="top-app-bar-title" slot="title"></slot>
+            <slot name="top-app-bar-end" slot="end"></slot>
+          </custom-top-app-bar>
+        </slot>
+
+        <slot name="content">
+          <main>
+            <slot></slot>
+          </main>
+        </slot>
       </flex-column> `;
         }
     });