@vandeurenglenn/lite-elements 0.3.49 → 0.3.51

package/exports/button.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';
 import './elevation.js';
 
@@ -49,143 +49,148 @@ let CustomButton = (() => {
         get label() { return this.#label_accessor_storage; }
         set label(value) { this.#label_accessor_storage = value; }
         static styles = [
-            css `
-      :host {
-        color: var(--custom-button-color, --md-sys-color-on-background);
-        display: flex;
-
-        height: 40px;
-        border-radius: 20px;
-        position: relative;
-        pointer-events: auto;
-        cursor: pointer;
-
-        --elevation-level: 0;
-      }
-
-      button {
-        box-sizing: border-box;
-        border: none;
-        background: transparent;
-        color: inherit;
-        align-items: center;
-        justify-content: center;
-        user-select: none;
-        outline: none;
-        cursor: pointer;
-        border-radius: inherit;
-        padding: none;
-        width: inherit;
-        height: inherit;
-        display: flex;
-        pointer-events: none;
-      }
-
-      .label,
-      ::slotted(*) {
-        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);
-      }
-
-      :host([type='filled']),
-      :host([type='filled']) ::slotted(*) {
-        color: var(--md-sys-color-on-primary);
-        fill: var(--md-sys-color-on-primary);
-        background: var(--md-sys-color-primary);
-      }
-
-      :host([type='outlined']),
-      :host([type='outlined']) ::slotted(*) {
-        color: var(--md-sys-color-on-surface);
-        fill: var(--md-sys-color-on-surface);
-        background: var(--md-sys-color-surface);
-        border: solid 1px;
-        border-color: var(--md-sys-color-outline);
-      }
-
-      :host([type='elevated']),
-      :host([type='elevated']) ::slotted(*) {
-        color: var(--md-sys-color-primary);
-        fill: var(--md-sys-color-primary);
-        background: var(--md-sys-color-surface-container-low);
-      }
-
-      :host([type='tertiary']),
-      :host([type='tertiary']) ::slotted(*) {
-        background: var(--md-sys-color-tertiary);
-        color: var(--md-sys-color-on-tertiary);
-        fill: var(--md-sys-color-on-tertiary);
-      }
-
-      :host([type='tonal']),
-      :host([type='tonal']) ::slotted(*) {
-        background: var(--md-sys-color-secondary-container);
-        color: var(--md-sys-color-on-seconday-container);
-        fill: var(--md-sys-color-on-seconday-container);
-      }
-
-      custom-elevation {
-        --md-elevation-level: var(--elevation-level);
-      }
-
-      :host([type='elevated']) custom-elevation {
-        --elevation-level: 1;
-      }
-
-      :host([type='filled']),
-      :host([type='outlined']),
-      :host([type='text']),
-      :host([type='tonal']) {
-        --elevation-level: 0;
-      }
-
-      :host([has-label]) .label {
-        padding-left: 24px;
-        padding-right: 24px;
-      }
-
-      :host([has-icon]:not([has-label])) {
-        border-radius: 50%;
-        width: 40px;
-        align-items: center;
-        justify-content: center;
-      }
-
-      :host([has-icon][has-label]) .label {
-        padding-left: 8px;
-        padding-right: 24px;
-      }
-      :host([has-icon][has-label]) slot[name='icon']::slotted(*) {
-        padding-left: 16px;
-      }
-
-      :host([disabled]) .label,
-      :host([disabled]) slot[name='icon']::slotted(*) {
-        opacity: 0.38;
-      }
-
-      ::slotted(*) {
-        pointer-events: none;
-      }
-
-      :host(:focus),
-      :host(:hover) {
-        --elevation-level: 2;
-      }
-
-      :host(:active) {
-        --elevation-level: 0;
-      }
-
-      button * {
-        pointer-events: none;
-      }
+            css `
+      :host {
+        color: var(--custom-button-color, --md-sys-color-on-background);
+        display: flex;
+
+        height: 40px;
+        border-radius: 20px;
+        position: relative;
+        pointer-events: auto;
+        cursor: pointer;
+
+        --elevation-level: 0;
+      }
+
+      button {
+        box-sizing: border-box;
+        border: none;
+        background: transparent;
+        color: inherit;
+        align-items: center;
+        justify-content: center;
+        user-select: none;
+        outline: none;
+        cursor: pointer;
+        border-radius: inherit;
+        padding: none;
+        width: inherit;
+        height: inherit;
+        display: flex;
+        pointer-events: none;
+      }
+
+      .label {
+        flex: 1;
+        text-align: end;
+      }
+
+      .label,
+      ::slotted(*) {
+        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);
+      }
+
+      :host([type='filled']),
+      :host([type='filled']) ::slotted(*) {
+        color: var(--md-sys-color-on-primary);
+        fill: var(--md-sys-color-on-primary);
+        background: var(--md-sys-color-primary);
+      }
+
+      :host([type='outlined']),
+      :host([type='outlined']) ::slotted(*) {
+        color: var(--md-sys-color-on-surface);
+        fill: var(--md-sys-color-on-surface);
+        background: var(--md-sys-color-surface);
+        border: solid 1px;
+        border-color: var(--md-sys-color-outline);
+      }
+
+      :host([type='elevated']),
+      :host([type='elevated']) ::slotted(*) {
+        color: var(--md-sys-color-primary);
+        fill: var(--md-sys-color-primary);
+        background: var(--md-sys-color-surface-container-low);
+      }
+
+      :host([type='tertiary']),
+      :host([type='tertiary']) ::slotted(*) {
+        background: var(--md-sys-color-tertiary);
+        color: var(--md-sys-color-on-tertiary);
+        fill: var(--md-sys-color-on-tertiary);
+      }
+
+      :host([type='tonal']),
+      :host([type='tonal']) ::slotted(*) {
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-seconday-container);
+        fill: var(--md-sys-color-on-seconday-container);
+      }
+
+      custom-elevation {
+        --md-elevation-level: var(--elevation-level);
+      }
+
+      :host([type='elevated']) custom-elevation {
+        --elevation-level: 1;
+      }
+
+      :host([type='filled']),
+      :host([type='outlined']),
+      :host([type='text']),
+      :host([type='tonal']) {
+        --elevation-level: 0;
+      }
+
+      :host([has-label]) .label {
+        padding-left: 24px;
+        padding-right: 24px;
+      }
+
+      :host([has-icon]:not([has-label])) {
+        border-radius: 50%;
+        width: 40px;
+        align-items: center;
+        justify-content: center;
+      }
+
+      :host([has-icon][has-label]) .label {
+        padding-left: 8px;
+        padding-right: 24px;
+      }
+      :host([has-icon][has-label]) slot[name='icon']::slotted(*) {
+        padding-left: 16px;
+      }
+
+      :host([disabled]) .label,
+      :host([disabled]) slot[name='icon']::slotted(*) {
+        opacity: 0.38;
+      }
+
+      ::slotted(*) {
+        pointer-events: none;
+      }
+
+      :host(:focus),
+      :host(:hover) {
+        --elevation-level: 2;
+      }
+
+      :host(:active) {
+        --elevation-level: 0;
+      }
+
+      button * {
+        pointer-events: none;
+      }
     `
         ];
         connectedCallback() {
@@ -209,12 +214,12 @@ let CustomButton = (() => {
             }
         });
         render() {
-            return html `
-      <button label=${this.label}>
-        <custom-elevation></custom-elevation>
-        <slot name="icon"></slot>
-        <span class="label">${this.label}</span>
-      </button>
+            return html `
+      <button label=${this.label}>
+        <custom-elevation></custom-elevation>
+        <slot name="icon"></slot>
+        <span class="label">${this.label}</span>
+      </button>
     `;
         }
         static {

package/exports/card.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, html, LiteElement } from '@vandeurenglenn/lite';
 import './button.js';
 import './divider.js';
@@ -32,149 +32,149 @@ let CustomCard = (() => {
             // @ts-ignore
             const children = Array.from(actionsSlot?.assignedNodes() || []);
             return children.length !== 0
-                ? html `<custom-divider
-          ?inset=${this.dividerType === 'inset'}
-          ?middle-inset=${this.dividerType === 'inset'}
+                ? html `<custom-divider
+          ?inset=${this.dividerType === 'inset'}
+          ?middle-inset=${this.dividerType === 'inset'}
         ></custom-divider>`
                 : '';
         }
         render() {
-            return html `
-      <style>
-        :host {
-          box-sizing: border-box;
-          display: flex;
-          margin: 8px;
-          position: relative;
-          height: fit-content;
-          max-height: 320px;
-          width: 100%;
-          max-width: 320px;
-          border-radius: 12px;
-          border: 1px solid;
-          overflow: hidden;
-        }
-
-        .container {
-          display: flex;
-          flex-direction: column;
-          max-width: 320px;
-          height: max-content;
-          max-height: 320px;
-          border-color: transparent;
-          color: var(--md-sys-color-on-surface-variant);
-          background: var(--md-sys-color-surface-variant);
-          /* position: absolute; */
-        }
-
-        .content-container {
-          display: flex;
-          flex-direction: column;
-          box-sizing: border-box;
-          padding: 16px;
-          height: 100%;
-        }
-
-        custom-elevation {
-          --md-elevation-level: 1;
-        }
-
-        :host() ::slotted(*) {
-          font-family: var(--md-sys-typescale-display-small-font-family-name);
-          font-weight: var(--md-sys-typescale-display-small-font-family-style);
-        }
-
-        slot[name='headline']::slotted(*) {
-          font-weight: var(--md-sys-typescale-headline-large-font-weight);
-          font-size: var(--md-sys-typescale-headline-large-font-size);
-          line-height: var(--md-sys-typescale-headline-large-line-height);
-          letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
-        }
-
-        slot[name='subline']::slotted(*) {
-          font-weight: var(--md-sys-typescale-title-large-font-weight);
-          font-size: var(--md-sys-typescale-title-large-font-size);
-
-          line-height: var(--md-sys-typescale-title-large-line-height);
-          letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
-        }
-
-        slot[name='supportingText']::slotted(*) {
-          margin: 8px 0 0 0;
-          font-weight: var(--md-sys-typescale-body-medium-font-weight);
-          font-size: var(--md-sys-typescale-body-medium-font-size);
-
-          line-height: var(--md-sys-typescale-body-medium-line-height);
-          letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
-
-          max-height: 144px;
-          overflow-y: auto;
-        }
-
-        .supporting-text {
-          max-height: 196px;
-          overflow-y: scroll;
-        }
-
-        :host([type='filled']) .container {
-          color: var(--md-sys-color-on-secondary-container);
-          background: var(--md-sys-color-secondary-container);
-        }
-
-        :host([type='outlined']) .container {
-          color: var(--md-sys-color-on-surface);
-          background: var(--md-sys-color-surface);
-        }
-
-        :host([type='outlined']) {
-          border-color: var(--md-sys-color-outline);
-        }
-
-        :host([type='tertiary']) .container {
-          color: var(--md-sys-color-on-tertiary-container);
-          background: var(--md-sys-color-tertiary-container);
-        }
-
-        :host([type='tertiary']) {
-          border-color: var(--md-sys-color-outline);
-        }
-
-        :host([type='filled']) custom-elevation,
-        :host([type='outlined']) custom-elevation,
-        :host([type='tertiary']) custom-elevation {
-          --md-elevation-level: 0;
-        }
-
-        .actions {
-          height: 44px;
-          width: 100%;
-          display: flex;
-        }
-
-        ::slotted(*:not([slot='actions'])) {
-          overflow: hidden;
-          border-radius: 12px;
-          height: 100%;
-          width: 100%;
-        }
-      </style>
-      <custom-elevation></custom-elevation>
-      <span class="container">
-        <slot name="image"></slot>
-
-        <span class="content-container">
-          <slot name="headline"></slot>
-          <slot name="subline"></slot>
-          <span class="supporting-text">
-            <slot name="supportingText"></slot>
-          </span>
-          ${this.renderDivider()}
-          <span class="actions">
-            <flex-it flex="1"></flex-it>
-            <slot name="actions"></slot>
-          </span>
-        </span>
-      </span>
+            return html `
+      <style>
+        :host {
+          box-sizing: border-box;
+          display: flex;
+          margin: 8px;
+          position: relative;
+          height: fit-content;
+          max-height: 320px;
+          width: 100%;
+          max-width: 320px;
+          border-radius: 12px;
+          border: 1px solid;
+          overflow: hidden;
+        }
+
+        .container {
+          display: flex;
+          flex-direction: column;
+          max-width: 320px;
+          height: max-content;
+          max-height: 320px;
+          border-color: transparent;
+          color: var(--md-sys-color-on-surface-variant);
+          background: var(--md-sys-color-surface-variant);
+          /* position: absolute; */
+        }
+
+        .content-container {
+          display: flex;
+          flex-direction: column;
+          box-sizing: border-box;
+          padding: 16px;
+          height: 100%;
+        }
+
+        custom-elevation {
+          --md-elevation-level: 1;
+        }
+
+        :host() ::slotted(*) {
+          font-family: var(--md-sys-typescale-display-small-font-family-name);
+          font-weight: var(--md-sys-typescale-display-small-font-family-style);
+        }
+
+        slot[name='headline']::slotted(*) {
+          font-weight: var(--md-sys-typescale-headline-large-font-weight);
+          font-size: var(--md-sys-typescale-headline-large-font-size);
+          line-height: var(--md-sys-typescale-headline-large-line-height);
+          letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
+        }
+
+        slot[name='subline']::slotted(*) {
+          font-weight: var(--md-sys-typescale-title-large-font-weight);
+          font-size: var(--md-sys-typescale-title-large-font-size);
+
+          line-height: var(--md-sys-typescale-title-large-line-height);
+          letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
+        }
+
+        slot[name='supportingText']::slotted(*) {
+          margin: 8px 0 0 0;
+          font-weight: var(--md-sys-typescale-body-medium-font-weight);
+          font-size: var(--md-sys-typescale-body-medium-font-size);
+
+          line-height: var(--md-sys-typescale-body-medium-line-height);
+          letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
+
+          max-height: 144px;
+          overflow-y: auto;
+        }
+
+        .supporting-text {
+          max-height: 196px;
+          overflow-y: scroll;
+        }
+
+        :host([type='filled']) .container {
+          color: var(--md-sys-color-on-secondary-container);
+          background: var(--md-sys-color-secondary-container);
+        }
+
+        :host([type='outlined']) .container {
+          color: var(--md-sys-color-on-surface);
+          background: var(--md-sys-color-surface);
+        }
+
+        :host([type='outlined']) {
+          border-color: var(--md-sys-color-outline);
+        }
+
+        :host([type='tertiary']) .container {
+          color: var(--md-sys-color-on-tertiary-container);
+          background: var(--md-sys-color-tertiary-container);
+        }
+
+        :host([type='tertiary']) {
+          border-color: var(--md-sys-color-outline);
+        }
+
+        :host([type='filled']) custom-elevation,
+        :host([type='outlined']) custom-elevation,
+        :host([type='tertiary']) custom-elevation {
+          --md-elevation-level: 0;
+        }
+
+        .actions {
+          height: 44px;
+          width: 100%;
+          display: flex;
+        }
+
+        ::slotted(*:not([slot='actions'])) {
+          overflow: hidden;
+          border-radius: 12px;
+          height: 100%;
+          width: 100%;
+        }
+      </style>
+      <custom-elevation></custom-elevation>
+      <span class="container">
+        <slot name="image"></slot>
+
+        <span class="content-container">
+          <slot name="headline"></slot>
+          <slot name="subline"></slot>
+          <span class="supporting-text">
+            <slot name="supportingText"></slot>
+          </span>
+          ${this.renderDivider()}
+          <span class="actions">
+            <flex-it flex="1"></flex-it>
+            <slot name="actions"></slot>
+          </span>
+        </span>
+      </span>
     `;
         }
         static {