@vandeurenglenn/lite-elements 0.3.18

package/exports/button.js

@@ -0,0 +1,227 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+import './elevation.js';
+
+let CustomButton = (() => {
+    let _classDecorators = [customElement('custom-button')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    let _hasIcon_decorators;
+    let _hasIcon_initializers = [];
+    let _hasIcon_extraInitializers = [];
+    let _hasLabel_decorators;
+    let _hasLabel_initializers = [];
+    let _hasLabel_extraInitializers = [];
+    let _type_decorators;
+    let _type_initializers = [];
+    let _type_extraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _hasIcon_decorators = [property({ attribute: 'has-icon', reflect: true })];
+            _hasLabel_decorators = [property({ attribute: 'has-label', reflect: true })];
+            _type_decorators = [property({ attribute: 'type', reflect: true })];
+            _label_decorators = [property()];
+            __esDecorate(this, null, _hasIcon_decorators, { kind: "accessor", name: "hasIcon", static: false, private: false, access: { has: obj => "hasIcon" in obj, get: obj => obj.hasIcon, set: (obj, value) => { obj.hasIcon = value; } }, metadata: _metadata }, _hasIcon_initializers, _hasIcon_extraInitializers);
+            __esDecorate(this, null, _hasLabel_decorators, { kind: "accessor", name: "hasLabel", static: false, private: false, access: { has: obj => "hasLabel" in obj, get: obj => obj.hasLabel, set: (obj, value) => { obj.hasLabel = value; } }, metadata: _metadata }, _hasLabel_initializers, _hasLabel_extraInitializers);
+            __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
+            __esDecorate(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #hasIcon_accessor_storage = __runInitializers(this, _hasIcon_initializers, void 0);
+        get hasIcon() { return this.#hasIcon_accessor_storage; }
+        set hasIcon(value) { this.#hasIcon_accessor_storage = value; }
+        #hasLabel_accessor_storage = (__runInitializers(this, _hasIcon_extraInitializers), __runInitializers(this, _hasLabel_initializers, void 0));
+        get hasLabel() { return this.#hasLabel_accessor_storage; }
+        set hasLabel(value) { this.#hasLabel_accessor_storage = value; }
+        #type_accessor_storage = (__runInitializers(this, _hasLabel_extraInitializers), __runInitializers(this, _type_initializers, 'text'));
+        get type() { return this.#type_accessor_storage; }
+        set type(value) { this.#type_accessor_storage = value; }
+        #label_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _label_initializers, void 0));
+        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;
+      }
+    `
+        ];
+        connectedCallback() {
+            const slots = Array.from(this.shadowRoot.querySelectorAll('slot'));
+            for (const slot of slots) {
+                slot.addEventListener('slotchange', () => this.#slotchange(slot));
+            }
+            this.#slotchange(slots[0]);
+        }
+        onChange(propertyKey, value) {
+            if (propertyKey === 'label') {
+                if (value)
+                    this.hasLabel = true;
+                else
+                    this.hasLabel = false;
+            }
+        }
+        #slotchange = (__runInitializers(this, _label_extraInitializers), (slot) => {
+            if (slot.getAttribute('name') === 'icon') {
+                this.hasIcon = Array.from(slot?.assignedNodes() || []).length !== 0;
+            }
+        });
+        render() {
+            return html `
+      <button label=${this.label}>
+        <custom-elevation></custom-elevation>
+        <slot name="icon"></slot>
+        <span class="label">${this.label}</span>
+      </button>
+    `;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomButton };

package/exports/card/card.d.ts

@@ -0,0 +1,13 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+import { propertiesConfig } from '../types.js';
+import '../button/button.js';
+import '../divider/divider.js';
+import '../elevation/elevation.js';
+export declare class CustomCard extends LiteElement {
+    dividerType: 'full' | 'inset' | 'middle-inset';
+    type: 'elevated' | 'filled' | 'outlined';
+    elevationLevel: Number;
+    static properties: propertiesConfig;
+    renderDivider(): import("lit-html").TemplateResult<1> | "";
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/card.js

@@ -0,0 +1,187 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, html, LiteElement } from '@vandeurenglenn/lite';
+import './button.js';
+import './divider.js';
+import './elevation.js';
+
+let CustomCard = (() => {
+    let _classDecorators = [customElement('custom-card')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        dividerType;
+        type = 'elevated';
+        elevationLevel = 0;
+        static properties = {
+            hasDivider: { type: Boolean },
+            elevationLevel: {
+                type: Number
+            }
+        };
+        renderDivider() {
+            const actionsSlot = this.shadowRoot.querySelector('slot[name="actions"]');
+            // @ts-ignore
+            const children = Array.from(actionsSlot?.assignedNodes() || []);
+            return children.length !== 0
+                ? 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>
+    `;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomCard };

package/exports/code.js

@@ -0,0 +1,77 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+
+let DemoCode = (() => {
+    let _classDecorators = [customElement('demo-code')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    let _code_decorators;
+    let _code_initializers = [];
+    let _code_extraInitializers = [];
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _code_decorators = [property({ type: String })];
+            __esDecorate(this, null, _code_decorators, { kind: "accessor", name: "code", static: false, private: false, access: { has: obj => "code" in obj, get: obj => obj.code, set: (obj, value) => { obj.code = value; } }, metadata: _metadata }, _code_initializers, _code_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #code_accessor_storage = __runInitializers(this, _code_initializers, void 0);
+        get code() { return this.#code_accessor_storage; }
+        set code(value) { this.#code_accessor_storage = value; }
+        static styles = [
+            css `
+      :host {
+        display: flex;
+
+        color: var(--md-sys-color-on-surface-variant);
+        box-sizing: border-box;
+        width: 100%;
+        box-sizing: border-box;
+        background: var(--md-sys-color-surface-variant);
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: var(--md-sys-shape-corner-large);
+
+        /* margin-left: -100%; */
+        /* display: inline-block; */
+        margin: 12px 0 24px 0;
+
+        align-items: center;
+      }
+      pre,
+      code {
+        margin: 0;
+        padding: 0;
+        overflow: auto;
+      }
+      pre {
+        margin-bottom: -12px;
+        margin-left: -46px;
+      }
+    `
+        ];
+        render() {
+            return html `
+      <pre class="language-html">
+      <code class="language-html">
+        ${this.code}
+      </code>
+      </pre>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _code_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { DemoCode };

package/exports/demo-elements.d.ts

@@ -0,0 +1,9 @@
+import { DemoIcons } from './demo/demo-icons.js';
+import { DemoSection } from './demo/section.js';
+export { DemoSection, DemoIcons };
+declare global {
+    interface HTMLElementTagNameMap {
+        'demo-icons': DemoIcons;
+        'demo-section': DemoSection;
+    }
+}

package/exports/demo-elements.js

@@ -0,0 +1,10 @@
+export { DemoIcons } from './demo-icons.js';
+export { DemoSection } from './section.js';
+import './tslib.es6-d3ba6528.js';
+import '@vandeurenglenn/lite';
+import './icon-set.js';
+import '@vandeurenglenn/little-pubsub';
+import './section2.js';
+import './scroll-mixin.js';
+import './elevation.js';
+import './code.js';

package/exports/demo-icons.js

@@ -0,0 +1,48 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, css, html, LiteElement } from '@vandeurenglenn/lite';
+import './icon-set.js';
+import '@vandeurenglenn/little-pubsub';
+
+let DemoIcons = (() => {
+    let _classDecorators = [customElement('demo-icons')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = [
+            css `
+      :host {
+        display: block;
+      }
+    `
+        ];
+        render() {
+            return html ` <custom-icon-set>
+      <template>
+        <span name="home">@symbol-home</span>
+        <span name="menu">@symbol-menu</span>
+        <span name="info">@symbol-info</span>
+        <span name="check_box">@symbol-check_box</span>
+        <span name="menu_open">@symbol-menu_open</span>
+        <span name="more_vert">@symbol-more_vert</span>
+        <span name="close">@symbol-close</span>
+        <span name="check_box_outline_blank">@symbol-check_box_outline_blank</span>
+      </template>
+    </custom-icon-set>`;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { DemoIcons };