overview-components 1.1.161 → 1.1.165

package/dist/shared/lit-document-thumbnail.js

@@ -0,0 +1,383 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { computePosition, flip, shift, offset, autoUpdate } from '@floating-ui/dom';
+import './lit-icon.js';
+import { getFileTypeIcon } from '../utils/file-type-utils.js';
+/**
+ * A reusable component for displaying document thumbnails
+ * Shows actual thumbnail if available, falls back to file type icon
+ * Shows larger preview on hover anchored next to the thumbnail (portaled to body)
+ */
+export class LitDocumentThumbnail extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.fileType = '';
+        this.size = 40;
+        this.enableHoverPreview = true;
+        this.previewMaxWidth = 300;
+        this.previewMaxHeight = 300;
+        this.enableThumbnailDetail = true;
+        this.previewPlacement = 'right';
+        this.imageError = false;
+        this.showPreview = false;
+        this.longPressTimer = null;
+        this.touchStarted = false;
+        // Portal element appended to document.body
+        this.portalEl = null;
+        // Cleanup function for autoUpdate
+        this.cleanupAutoUpdate = null;
+        this.handleDocumentTouch = (event) => {
+            // Only handle if this instance has an active preview
+            if (!this.showPreview)
+                return;
+            const touch = event.touches[0];
+            const touchX = touch.clientX;
+            const touchY = touch.clientY;
+            // Check if touch is within this component
+            const componentRect = this.getBoundingClientRect();
+            const isTouchInComponent = touchX >= componentRect.left &&
+                touchX <= componentRect.right &&
+                touchY >= componentRect.top &&
+                touchY <= componentRect.bottom;
+            if (isTouchInComponent) {
+                return;
+            }
+            // Check if touch is within the preview
+            if (this.portalEl) {
+                const previewRect = this.portalEl.getBoundingClientRect();
+                const isTouchInPreview = touchX >= previewRect.left &&
+                    touchX <= previewRect.right &&
+                    touchY >= previewRect.top &&
+                    touchY <= previewRect.bottom;
+                if (isTouchInPreview) {
+                    return;
+                }
+            }
+            // Touch is outside both thumbnail and preview, close it
+            this.closePreview();
+        };
+        this.handleMouseEnter = () => {
+            const showImage = this.thumbnail && !this.imageError;
+            if (!this.enableHoverPreview || !this.enableThumbnailDetail || !showImage)
+                return;
+            // Close any other active preview
+            if (LitDocumentThumbnail.activePreviewInstance &&
+                LitDocumentThumbnail.activePreviewInstance !== this) {
+                LitDocumentThumbnail.activePreviewInstance.closePreview();
+            }
+            this.showPreview = true;
+            LitDocumentThumbnail.activePreviewInstance = this;
+            this.showPortal();
+            this.startAutoUpdate();
+        };
+        this.handleMouseLeave = () => {
+            if (!this.showPreview)
+                return;
+            this.closePreview();
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Add global touch listener to close preview when touching outside
+        document.addEventListener('touchstart', this.handleDocumentTouch, { passive: true });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Clean up timer to prevent memory leaks
+        if (this.longPressTimer) {
+            clearTimeout(this.longPressTimer);
+            this.longPressTimer = null;
+        }
+        // Remove global touch listener
+        document.removeEventListener('touchstart', this.handleDocumentTouch);
+        // Clear active instance if it's this one
+        if (LitDocumentThumbnail.activePreviewInstance === this) {
+            LitDocumentThumbnail.activePreviewInstance = null;
+        }
+        this.removePortal();
+    }
+    createPortal() {
+        if (this.portalEl)
+            return this.portalEl;
+        const maxW = this.previewMaxWidth || 300;
+        const maxH = this.previewMaxHeight || 300;
+        const styles = getComputedStyle(this);
+        const borderColor = styles.getPropertyValue('--border-color').trim() || '#d0d3db';
+        const bgColor = styles.getPropertyValue('--background-paper').trim() || '#fff';
+        const portal = document.createElement('div');
+        portal.style.cssText = `
+            position: fixed;
+            z-index: 999999;
+            border-radius: 0.5rem;
+            border: 1px solid ${borderColor};
+            background: ${bgColor};
+            box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
+            overflow: hidden;
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 0.15s ease-in-out;
+            padding: 0.25rem;
+            max-width: ${maxW}px;
+            max-height: ${maxH}px;
+        `;
+        const img = document.createElement('img');
+        img.src = this.thumbnail || '';
+        img.alt = 'Document preview';
+        img.style.cssText = `
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+            display: block;
+            border-radius: 0.375rem;
+        `;
+        // Reposition after image loads so computePosition uses final dimensions
+        img.addEventListener('load', () => {
+            this.updatePreviewPosition();
+        });
+        portal.appendChild(img);
+        document.body.appendChild(portal);
+        this.portalEl = portal;
+        return portal;
+    }
+    removePortal() {
+        this.stopAutoUpdate();
+        if (this.portalEl) {
+            this.portalEl.remove();
+            this.portalEl = null;
+        }
+    }
+    showPortal() {
+        const portal = this.createPortal();
+        portal.style.opacity = '1';
+    }
+    hidePortal() {
+        if (this.portalEl) {
+            this.portalEl.style.opacity = '0';
+            // Remove after transition
+            setTimeout(() => {
+                this.removePortal();
+            }, 150);
+        }
+    }
+    handleImageError() {
+        this.imageError = true;
+    }
+    handleTouchStart(_event) {
+        if (!this.thumbnail || this.imageError || !this.enableThumbnailDetail)
+            return;
+        // Close any other active preview
+        if (LitDocumentThumbnail.activePreviewInstance &&
+            LitDocumentThumbnail.activePreviewInstance !== this) {
+            LitDocumentThumbnail.activePreviewInstance.closePreview();
+        }
+        this.touchStarted = true;
+        this.longPressTimer = window.setTimeout(() => {
+            this.showPreview = true;
+            LitDocumentThumbnail.activePreviewInstance = this;
+            this.showPortal();
+            this.startAutoUpdate();
+            // Haptic feedback if supported
+            if ('vibrate' in navigator) {
+                navigator.vibrate(50);
+            }
+        }, 500);
+    }
+    handleTouchEnd() {
+        if (this.longPressTimer) {
+            clearTimeout(this.longPressTimer);
+            this.longPressTimer = null;
+        }
+        this.touchStarted = false;
+    }
+    closePreview() {
+        if (this.longPressTimer) {
+            clearTimeout(this.longPressTimer);
+            this.longPressTimer = null;
+        }
+        this.touchStarted = false;
+        this.showPreview = false;
+        this.stopAutoUpdate();
+        this.hidePortal();
+        if (LitDocumentThumbnail.activePreviewInstance === this) {
+            LitDocumentThumbnail.activePreviewInstance = null;
+        }
+    }
+    handleTouchMove() {
+        // Cancel long press if user moves finger (scrolling)
+        if (this.longPressTimer) {
+            clearTimeout(this.longPressTimer);
+            this.longPressTimer = null;
+        }
+        this.touchStarted = false;
+    }
+    startAutoUpdate() {
+        const container = this.shadowRoot?.querySelector('.thumbnail-container');
+        if (!container || !this.portalEl)
+            return;
+        this.cleanupAutoUpdate = autoUpdate(container, this.portalEl, () => {
+            this.updatePreviewPosition();
+        });
+    }
+    stopAutoUpdate() {
+        if (this.cleanupAutoUpdate) {
+            this.cleanupAutoUpdate();
+            this.cleanupAutoUpdate = null;
+        }
+    }
+    async updatePreviewPosition() {
+        const container = this.shadowRoot?.querySelector('.thumbnail-container');
+        if (!container || !this.portalEl)
+            return;
+        const { x, y } = await computePosition(container, this.portalEl, {
+            strategy: 'fixed',
+            placement: this.previewPlacement,
+            middleware: [
+                offset(10),
+                flip({ fallbackPlacements: ['right', 'left', 'bottom', 'top'] }),
+                shift({ padding: 8 }),
+            ],
+        });
+        Object.assign(this.portalEl.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+        });
+    }
+    render() {
+        const containerSize = this.size || 40;
+        const iconSize = Math.floor(containerSize * 0.6);
+        const showImage = this.thumbnail && !this.imageError;
+        const fallbackIcon = getFileTypeIcon(this.fileType);
+        const showHoverPreview = this.enableHoverPreview && this.enableThumbnailDetail && showImage;
+        return html `
+            <div
+                class="thumbnail-container ${this.showPreview ? 'touch-preview-active' : ''}"
+                style="width: ${containerSize}px; height: ${containerSize}px;"
+                @mouseenter="${showHoverPreview ? this.handleMouseEnter : null}"
+                @mouseleave="${showHoverPreview ? this.handleMouseLeave : null}"
+                @touchstart="${showHoverPreview ? this.handleTouchStart : null}"
+                @touchend="${showHoverPreview ? this.handleTouchEnd : null}"
+                @touchmove="${this.handleTouchMove}"
+                @touchcancel="${this.handleTouchEnd}"
+            >
+                ${showImage
+            ? html `
+                          <img
+                              class="thumbnail-image"
+                              src="${this.thumbnail}"
+                              alt="Document thumbnail"
+                              @error="${this.handleImageError}"
+                          />
+                      `
+            : html `
+                          <div class="thumbnail-icon">
+                              <lit-icon icon="${fallbackIcon}" size="${iconSize}px"></lit-icon>
+                          </div>
+                      `}
+            </div>
+        `;
+    }
+}
+// Static property to track which instance has an active preview
+LitDocumentThumbnail.activePreviewInstance = null;
+LitDocumentThumbnail.styles = css `
+        :host {
+            display: inline-block;
+            position: relative;
+        }
+
+        .thumbnail-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 0.0625rem solid var(--border-color, #d0d3db);
+            border-radius: 0.5rem;
+            overflow: hidden;
+            flex-shrink: 0;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+
+        .thumbnail-container:hover {
+            border-color: var(--border-color, #d0d3db);
+        }
+
+        .thumbnail-image {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            display: block;
+        }
+
+        .thumbnail-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            background: var(--color-primary-light, #f0fadf);
+            color: var(--color-primary-main, #76b703);
+        }
+
+        .thumbnail-icon lit-icon {
+            top: -1px;
+            display: flex;
+            color: inherit;
+        }
+
+        /* Visual feedback during long press */
+        .touch-preview-active {
+            opacity: 0.7;
+        }
+
+        .thumbnail-container.touch-preview-active {
+            touch-action: none;
+            -webkit-user-select: none;
+            user-select: none;
+        }
+    `;
+__decorate([
+    property({ type: String })
+], LitDocumentThumbnail.prototype, "thumbnail", void 0);
+__decorate([
+    property({ type: String })
+], LitDocumentThumbnail.prototype, "fileType", void 0);
+__decorate([
+    property({ type: Number })
+], LitDocumentThumbnail.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitDocumentThumbnail.prototype, "enableHoverPreview", void 0);
+__decorate([
+    property({ type: Number })
+], LitDocumentThumbnail.prototype, "previewMaxWidth", void 0);
+__decorate([
+    property({ type: Number })
+], LitDocumentThumbnail.prototype, "previewMaxHeight", void 0);
+__decorate([
+    property({ type: Boolean })
+], LitDocumentThumbnail.prototype, "enableThumbnailDetail", void 0);
+__decorate([
+    property({ type: String })
+], LitDocumentThumbnail.prototype, "previewPlacement", void 0);
+__decorate([
+    state()
+], LitDocumentThumbnail.prototype, "imageError", void 0);
+__decorate([
+    state()
+], LitDocumentThumbnail.prototype, "showPreview", void 0);
+__decorate([
+    state()
+], LitDocumentThumbnail.prototype, "longPressTimer", void 0);
+__decorate([
+    state()
+], LitDocumentThumbnail.prototype, "touchStarted", void 0);
+if (!window.customElements.get('lit-document-thumbnail')) {
+    window.customElements.define('lit-document-thumbnail', LitDocumentThumbnail);
+}
+//# sourceMappingURL=lit-document-thumbnail.js.map

package/dist/shared/lit-document-thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lit-document-thumbnail.js","sourceRoot":"","sources":["../../src/shared/lit-document-thumbnail.ts"],"names":[],"mappings":"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"}

package/dist/shared/lit-filter-input.js

@@ -0,0 +1,115 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import './lit-icon.js';
+export class LitFilterInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this.placeholder = msg('Hledat...');
+    }
+    handleInput(e) {
+        const input = e.target;
+        this.value = input.value;
+        this.onChange?.(this.value);
+        this.requestUpdate();
+    }
+    handleClear() {
+        this.value = '';
+        this.onChange?.(this.value);
+        this.requestUpdate();
+    }
+    render() {
+        return html `
+            <div class="filter-container">
+                <div class="filter-input-wrapper">
+                    <lit-icon icon="search" size="1rem"></lit-icon>
+                    <input
+                        type="text"
+                        class="filter-input"
+                        placeholder="${this.placeholder}"
+                        .value="${this.value}"
+                        @input="${this.handleInput}"
+                    />
+                    ${this.value
+            ? html `
+                              <div class="clear-button" @click="${this.handleClear}">
+                                  <lit-icon icon="close" size="0.875rem"></lit-icon>
+                              </div>
+                          `
+            : null}
+                </div>
+            </div>
+        `;
+    }
+}
+LitFilterInput.styles = css `
+        :host {
+            display: block;
+            position: sticky;
+            top: 0;
+            z-index: 10;
+        }
+
+        .filter-container {
+            padding: 0 0 0.5rem 0;
+        }
+
+        .filter-input-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.5rem 0.75rem;
+            background: var(--background-paper, #ffffff);
+            border-radius: 0.5rem;
+            border: 1px solid var(--border-color, #e5e7eb);
+            color: var(--text-primary, #111827);
+        }
+
+        .filter-input-wrapper:focus-within {
+            border-color: var(--color-primary-main, #84bd00);
+            outline: 2px solid var(--color-primary-light, #f0fadf);
+        }
+
+        .filter-input {
+            flex: 1;
+            border: none;
+            outline: none;
+            background: transparent;
+            font-size: 0.8125rem;
+            font-weight: 400;
+            color: var(--color-secondary-main, #111827);
+            font-family: inherit;
+        }
+
+        .filter-input::placeholder {
+            color: var(--text-secondary, #6b7280);
+        }
+
+        .clear-button {
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--text-primary, #6b7280);
+        }
+    `;
+__decorate([
+    property({ type: String })
+], LitFilterInput.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], LitFilterInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Function })
+], LitFilterInput.prototype, "onChange", void 0);
+if (!window.customElements.get('lit-filter-input')) {
+    window.customElements.define('lit-filter-input', LitFilterInput);
+}
+//# sourceMappingURL=lit-filter-input.js.map

package/dist/shared/lit-filter-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lit-filter-input.js","sourceRoot":"","sources":["../../src/shared/lit-filter-input.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,eAAe,CAAC;AAEvB,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;QACgC,UAAK,GAAW,EAAE,CAAC;QACnB,gBAAW,GAAY,GAAG,CAAC,WAAW,CAAC,CAAC;IA2FxE,CAAC;IAxFW,WAAW,CAAC,CAAQ;QACxB,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5B,IAAI,CAAC,aAAa,EAAE,CAAC;IACzB,CAAC;IAEO,WAAW;QACf,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5B,IAAI,CAAC,aAAa,EAAE,CAAC;IACzB,CAAC;IAsDD,MAAM;QACF,OAAO,IAAI,CAAA;;;;;;;uCAOoB,IAAI,CAAC,WAAW;kCACrB,IAAI,CAAC,KAAK;kCACV,IAAI,CAAC,WAAW;;sBAE5B,IAAI,CAAC,KAAK;YACR,CAAC,CAAC,IAAI,CAAA;kEACoC,IAAI,CAAC,WAAW;;;2BAGvD;YACH,CAAC,CAAC,IAAI;;;SAGrB,CAAC;IACN,CAAC;;AA1EM,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDlB,AAlDY,CAkDX;AAnE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAoB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAyC;AACtC;IAA7B,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;gDAAoC;AA4FrE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACjD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;AACrE,CAAC"}

package/dist/shared/lit-icon-button.js

@@ -0,0 +1,165 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { property } from 'lit/decorators.js';
+import './lit-icon.js';
+// styles
+import buttonStyles from './styles/button-shared-styles.js';
+export class IconButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Define properties for size, variant, and color with default values
+        this.variant = 'contained';
+        this.color = 'primary';
+        this.size = 'medium';
+        this.disabled = false;
+        this.active = false;
+        this.icon = 'add';
+        this.marked = false;
+        this.loading = false;
+    }
+    // Render method to define the component's template
+    render() {
+        const classes = `button--${this.size} button--${this.variant} button--${this.color} ${this.active ? 'active' : ''}`;
+        const iconSize = this.size === 'large'
+            ? '1.5rem'
+            : this.size === 'medium' || this.marked
+                ? '1.25rem'
+                : this.size === 'small'
+                    ? '1rem'
+                    : '0.75rem';
+        return html `
+            <button ?disabled=${this.disabled || this.loading} class=${classes}>
+                ${this.loading
+            ? html `<div class="spinner spinner--${this.size}"></div>`
+            : ''}
+                <slot name="icon"
+                    >${this.icon &&
+            html `<lit-icon
+                        class="out-ai ${this.loading ? 'icon-hidden' : ''}"
+                        .isActive="${this.marked}"
+                        size="${iconSize}"
+                        icon=${this.icon}
+                    ></lit-icon>`}</slot
+                >
+            </button>
+        `;
+    }
+}
+// Define CSS styles for different sizes and variants
+IconButton.styles = [
+    // styles,
+    buttonStyles,
+    css `
+            /* Base styles for icon button */
+
+            button {
+                cursor: pointer;
+                font-size: inherit;
+                position: relative;
+            }
+
+            /* Size variations */
+
+            .button--mini {
+                width: 12px;
+                height: 12px;
+            }
+
+            .button--small {
+                width: 20px;
+                height: 20px;
+            }
+
+            .button--medium {
+                width: 48px;
+                height: 36px;
+            }
+
+            .button--large {
+                width: 48px;
+                height: 48px;
+            }
+
+            /* Loading spinner */
+            .spinner {
+                border: 2px solid transparent;
+                border-top: 2px solid currentColor;
+                border-radius: 50%;
+                animation: spin 0.8s linear infinite;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+
+            .spinner--mini {
+                width: 8px;
+                height: 8px;
+                border-width: 1px;
+            }
+
+            .spinner--small {
+                width: 12px;
+                height: 12px;
+                border-width: 1.5px;
+            }
+
+            .spinner--medium {
+                width: 16px;
+                height: 16px;
+                border-width: 2px;
+            }
+
+            .spinner--large {
+                width: 20px;
+                height: 20px;
+                border-width: 2px;
+            }
+
+            @keyframes spin {
+                0% {
+                    transform: translate(-50%, -50%) rotate(0deg);
+                }
+                100% {
+                    transform: translate(-50%, -50%) rotate(360deg);
+                }
+            }
+
+            .icon-hidden {
+                visibility: hidden;
+            }
+        `,
+];
+__decorate([
+    property({ type: String })
+], IconButton.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], IconButton.prototype, "color", void 0);
+__decorate([
+    property({ type: String })
+], IconButton.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], IconButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IconButton.prototype, "active", void 0);
+__decorate([
+    property({ type: String })
+], IconButton.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], IconButton.prototype, "marked", void 0);
+__decorate([
+    property({ type: Boolean })
+], IconButton.prototype, "loading", void 0);
+if (!window.customElements.get('lit-icon-button')) {
+    window.customElements.define('lit-icon-button', IconButton);
+}
+//# sourceMappingURL=lit-icon-button.js.map