@vandeurenglenn/lite-elements 0.3.49 → 0.3.51

package/exports/drawer-layout.js

@@ -1,4 +1,4 @@
-import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-CFl_-KPR.js';
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
 import { customElement, property, html, LiteElement } from '@vandeurenglenn/lite';
 import './drawer.js';
 import './drawer-button.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> `;
         }
     });

package/exports/drawer.js

@@ -1,4 +1,4 @@
-import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-CFl_-KPR.js';
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
 import { customElement, property, html, LiteElement } from '@vandeurenglenn/lite';
 import './elevation.js';
 import './button.js';
@@ -75,13 +75,13 @@ let CustomDrawer = (() => {
         }
         static styles = [style];
         render() {
-            return html `
-      <custom-pane .open=${this.open} .mobile=${this.mobile} .type=${this.type} .id=${this.id}>
-        <slot name="headline" slot="headline"></slot>
-        <slot name="menu-button" slot="menu-button"></slot>
-        <slot name="content" slot="content"></slot>
-        <slot name="footer" slot="footer"></slot>
-      </custom-pane>
+            return html `
+      <custom-pane .open=${this.open} .mobile=${this.mobile} .type=${this.type} .id=${this.id}>
+        <slot name="headline" slot="headline"></slot>
+        <slot name="menu-button" slot="menu-button"></slot>
+        <slot name="content" slot="content"></slot>
+        <slot name="footer" slot="footer"></slot>
+      </custom-pane>
     `;
         }
         constructor() {

package/exports/dropdown-menu.js

@@ -1,4 +1,4 @@
-import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-CFl_-KPR.js';
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
 import { customElement, property, query, css, html, LiteElement } from '@vandeurenglenn/lite';
 import './dropdown.js';
 import './menu.js';
@@ -99,67 +99,67 @@ let CustomDropdownMenu = (() => {
             }
         };
         static styles = [
-            css `
-      :host {
-        position: relative;
-        display: block;
-        --custom-dropdown-top: 48px;
-      }
-
-      custom-dropdown {
-        display: flex;
-        flex-direction: column;
-        width: fit-content;
-        top: var(--custom-dropdown-top);
-        padding: 8px 0;
-        border-radius: var(--md-sys-shape-corner-extra-small);
-      }
-
-      custom-elevation {
-        --md-elevation-level: var(--elevation-level, 1);
-        border-radius: var(--md-sys-shape-corner-extra-small);
-      }
-
-      :host([bottom]) custom-dropdown {
-        transform-origin: bottom left;
-        top: auto;
-        bottom: var(--custom-dropdown-top);
-      }
-
-      :host([right]) custom-dropdown {
-        transform-origin: top right;
-        right: 0;
-      }
-
-      :host([bottom][right]) custom-dropdown {
-        transform-origin: bottom right;
-      }
-
-      .scrim {
-        position: fixed;
-        inset: 0;
-        pointer-events: none;
-      }
-
-      :host([open]) .scrim {
-        pointer-events: auto;
-      }
+            css `
+      :host {
+        position: relative;
+        display: block;
+        --custom-dropdown-top: 48px;
+      }
+
+      custom-dropdown {
+        display: flex;
+        flex-direction: column;
+        width: fit-content;
+        top: var(--custom-dropdown-top);
+        padding: 8px 0;
+        border-radius: var(--md-sys-shape-corner-extra-small);
+      }
+
+      custom-elevation {
+        --md-elevation-level: var(--elevation-level, 1);
+        border-radius: var(--md-sys-shape-corner-extra-small);
+      }
+
+      :host([bottom]) custom-dropdown {
+        transform-origin: bottom left;
+        top: auto;
+        bottom: var(--custom-dropdown-top);
+      }
+
+      :host([right]) custom-dropdown {
+        transform-origin: top right;
+        right: 0;
+      }
+
+      :host([bottom][right]) custom-dropdown {
+        transform-origin: bottom right;
+      }
+
+      .scrim {
+        position: fixed;
+        inset: 0;
+        pointer-events: none;
+      }
+
+      :host([open]) .scrim {
+        pointer-events: auto;
+      }
     `
         ];
         render() {
-            return html `
-      <span class="scrim" @click=${this._scrimClick}></span>
-
-      <custom-button part="button" @click=${() => (this.open = !this.open)}>
-        <custom-icon slot="icon" .icon=${this.icon}></custom-icon>
-      </custom-button>
-
-      <custom-dropdown part="dropdown" .open=${this.open} ?right=${this.right} ?bottom=${this.bottom}>
-        <custom-elevation></custom-elevation>
-        <custom-menu @selected=${this._onselected}>
-          <slot></slot>
-        </custom-menu>
-      </custom-dropdown>
+            return html `
+      <span class="scrim" @click=${this._scrimClick}></span>
+
+      <custom-button part="button" @click=${() => (this.open = !this.open)}>
+        <custom-icon slot="icon" .icon=${this.icon}></custom-icon>
+      </custom-button>
+
+      <custom-dropdown part="dropdown" .open=${this.open} ?right=${this.right} ?bottom=${this.bottom}>
+        <custom-elevation></custom-elevation>
+        <custom-menu @selected=${this._onselected}>
+          <slot></slot>
+        </custom-menu>
+      </custom-dropdown>
     `;
         }
         static {

package/exports/dropdown.js

@@ -1,4 +1,4 @@
-import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-CFl_-KPR.js';
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
 import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
 
 let CustomDropdown = (() => {
@@ -24,31 +24,31 @@ let CustomDropdown = (() => {
         get open() { return this.#open_accessor_storage; }
         set open(value) { this.#open_accessor_storage = value; }
         static styles = [
-            css `
-      :host {
-        position: absolute;
-        pointer-events: none;
-        opacity: 0;
-        flex: 1;
-        width: fit-content;
-        display: flex;
-        flex-direction: column;
-        border: 1px;
-        background: var(--md-sys-color-surface);
-        z-index: 1001;
-        transform: scale(0, 0);
-        transform-origin: top left;
-        transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms opacity,
-          var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
-      }
-
-      :host([open]) {
-        pointer-events: auto;
-        opacity: 1;
-        transform: scale(1, 1);
-        transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms opacity,
-          var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
-      }
+            css `
+      :host {
+        position: absolute;
+        pointer-events: none;
+        opacity: 0;
+        flex: 1;
+        width: fit-content;
+        display: flex;
+        flex-direction: column;
+        border: 1px;
+        background: var(--md-sys-color-surface);
+        z-index: 1001;
+        transform: scale(0, 0);
+        transform-origin: top left;
+        transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms opacity,
+          var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
+      }
+
+      :host([open]) {
+        pointer-events: auto;
+        opacity: 1;
+        transform: scale(1, 1);
+        transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms opacity,
+          var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
+      }
     `
         ];
         render() {

package/exports/elements.js

@@ -29,7 +29,7 @@ export { CustomToggleButton } from './toggle-button.js';
 export { CustomTimePicker } from './time-picker.js';
 export { CustomNotification } from './notification.js';
 export { CustomNotifications } from './notifications.js';
-import './tslib.es6-CFl_-KPR.js';
+import './tslib.es6-Cg9lAhfj.js';
 import '@vandeurenglenn/lite';
 import './elevation.js';
 import '@vandeurenglenn/flex-elements/it.js';

package/exports/elevation.js

@@ -1,4 +1,4 @@
-import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-CFl_-KPR.js';
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-Cg9lAhfj.js';
 import { customElement, property, html, LiteElement } from '@vandeurenglenn/lite';
 
 /**
@@ -34,56 +34,56 @@ let CustomElevation = (() => {
                 this.style.setProperty('--md-elevation-level', String(value));
         }
         render() {
-            return html `
-      <style>
-        :host {
-          --_level: var(--md-elevation-level, 0);
-          --_shadow-color: var(--md-sys-color-shadow);
-          display: flex;
-          pointer-events: none;
-        }
-
-        :host,
-        .shadow,
-        .shadow::before,
-        .shadow::after {
-          border-radius: inherit;
-          inset: 0;
-          position: absolute;
-          transition-duration: inherit;
-          transition-timing-function: inherit;
-        }
-
-        .shadow::before,
-        .shadow::after {
-          content: '';
-          transition-property: box-shadow, opacity;
-        }
-
-        .shadow::before {
-          box-shadow: 0px
-            calc(
-              1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 3, 1) + 2 * clamp(0, var(--_level) - 4, 1))
-            )
-            calc(
-              1px * (2 * clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 2, 1) + clamp(0, var(--_level) - 4, 1))
-            )
-            0px var(--_shadow-color);
-          opacity: 0.3;
-        }
-
-        .shadow::after {
-          box-shadow: 0px
-            calc(
-              1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 1, 1) + 2 * clamp(0, var(--_level) - 2, 3))
-            )
-            calc(1px * (3 * clamp(0, var(--_level), 2) + 2 * clamp(0, var(--_level) - 2, 3)))
-            calc(1px * (clamp(0, var(--_level), 4) + 2 * clamp(0, var(--_level) - 4, 1))) var(--_shadow-color);
-          opacity: 0.15;
-        }
-      </style>
-
-      <span class="shadow"></span>
+            return html `
+      <style>
+        :host {
+          --_level: var(--md-elevation-level, 0);
+          --_shadow-color: var(--md-sys-color-shadow);
+          display: flex;
+          pointer-events: none;
+        }
+
+        :host,
+        .shadow,
+        .shadow::before,
+        .shadow::after {
+          border-radius: inherit;
+          inset: 0;
+          position: absolute;
+          transition-duration: inherit;
+          transition-timing-function: inherit;
+        }
+
+        .shadow::before,
+        .shadow::after {
+          content: '';
+          transition-property: box-shadow, opacity;
+        }
+
+        .shadow::before {
+          box-shadow: 0px
+            calc(
+              1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 3, 1) + 2 * clamp(0, var(--_level) - 4, 1))
+            )
+            calc(
+              1px * (2 * clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 2, 1) + clamp(0, var(--_level) - 4, 1))
+            )
+            0px var(--_shadow-color);
+          opacity: 0.3;
+        }
+
+        .shadow::after {
+          box-shadow: 0px
+            calc(
+              1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 1, 1) + 2 * clamp(0, var(--_level) - 2, 3))
+            )
+            calc(1px * (3 * clamp(0, var(--_level), 2) + 2 * clamp(0, var(--_level) - 2, 3)))
+            calc(1px * (clamp(0, var(--_level), 4) + 2 * clamp(0, var(--_level) - 4, 1))) var(--_shadow-color);
+          opacity: 0.15;
+        }
+      </style>
+
+      <span class="shadow"></span>
     `;
         }
         constructor() {