@nuraly/lumenui 0.1.0

package/dist/src/components/tooltips/tooltips.component.js

@@ -0,0 +1,313 @@
+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;
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styles } from './tooltips.style.js';
+import { EMPTY_STRING, TooltipAlignment, TooltipPosition } from './tooltips.constant.js';
+let TooltipElement = class TooltipElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.position = TooltipPosition.Bottom;
+        this.alignement = TooltipAlignment.Center;
+        this.show = false;
+        this.isPopConfirm = false;
+        this.popConfirmTitle = '';
+        this.popConfirmDescription = '';
+        this.okText = 'Yes';
+        this.cancelText = 'No';
+        this.horizontalOffset = 10;
+        this.verticalOffset = 10;
+        this.onMouseOver = () => {
+            this.show = true;
+        };
+        this.onMouseLeave = () => {
+            this.show = false;
+            this.initStyles();
+        };
+        this.onClick = () => {
+            this.show = !this.show;
+        };
+        this.calculatePosition = () => {
+            this.initStyles();
+            this.style.width = `${this.clientWidth}px`;
+            if (this.position === TooltipPosition.Bottom || this.position === TooltipPosition.Top) {
+                this.calculateYposition();
+                this.calculateYalignement();
+            }
+            else {
+                this.calculateXposition();
+                this.calculateXalignement();
+            }
+        };
+        this.calculateYposition = () => {
+            const targetRect = this.target.getBoundingClientRect();
+            const targetWithTopSpaceHeight = targetRect.bottom;
+            const topAvailableSpace = targetRect.top;
+            const totalViewPortHeight = window.visualViewport.height;
+            const tooltipHeight = this.clientHeight;
+            const isAvailableBottomSpace = tooltipHeight + this.verticalOffset < totalViewPortHeight - targetWithTopSpaceHeight;
+            const isAvailableTopSpace = tooltipHeight + this.verticalOffset < topAvailableSpace;
+            if (this.position === TooltipPosition.Bottom) {
+                if (isAvailableBottomSpace || !isAvailableTopSpace) {
+                    this.classList.add('bottom-position');
+                    this.style.top = `${targetWithTopSpaceHeight + this.verticalOffset}px`;
+                }
+                else {
+                    this.classList.add('top-position');
+                    this.style.top = `${topAvailableSpace - tooltipHeight - this.verticalOffset}px`;
+                }
+            }
+            else {
+                if (isAvailableTopSpace || !isAvailableBottomSpace) {
+                    this.classList.add('top-position');
+                    this.style.top = `${topAvailableSpace - tooltipHeight - this.verticalOffset}px`;
+                }
+                else {
+                    this.classList.add('bottom-position');
+                    this.style.top = `${targetWithTopSpaceHeight + this.verticalOffset}px`;
+                }
+            }
+        };
+        this.calculateYalignement = () => {
+            const targetRect = this.target.getBoundingClientRect();
+            const leftSpaceAndTargetWidth = targetRect.right;
+            const targetWidth = targetRect.width;
+            const leftSpace = targetRect.left;
+            const tooltipWidth = this.clientWidth;
+            const leftSpaceAndHalfOfTargetWidth = leftSpace + targetWidth / 2;
+            const totalViewPortWidth = window.visualViewport.width;
+            const rightSpaceAndHalfOfTargetWidth = totalViewPortWidth - leftSpaceAndTargetWidth + targetWidth / 2;
+            if (this.alignement === TooltipAlignment.Start) {
+                const canBeAtStart = tooltipWidth + leftSpace < totalViewPortWidth;
+                if (canBeAtStart) {
+                    this.classList.add('alignement-start');
+                    this.style.left = `${leftSpace - this.horizontalOffset}px`;
+                }
+                else {
+                    this.classList.add('alignement-end');
+                    this.style.left = `${leftSpace - tooltipWidth + this.horizontalOffset}px`;
+                }
+            }
+            else if (this.alignement === TooltipAlignment.End) {
+                const canBeAtEnd = tooltipWidth < leftSpace;
+                if (canBeAtEnd) {
+                    this.classList.add('alignement-end');
+                    this.style.left = `${leftSpace - tooltipWidth + this.horizontalOffset}px`;
+                }
+                else {
+                    this.classList.add('alignement-start');
+                    this.style.left = `${leftSpace - this.horizontalOffset}px`;
+                }
+            }
+            else {
+                const canBeCentered = (tooltipWidth / 2 < leftSpaceAndHalfOfTargetWidth && tooltipWidth / 2 < rightSpaceAndHalfOfTargetWidth) ||
+                    (tooltipWidth > leftSpaceAndHalfOfTargetWidth && tooltipWidth > rightSpaceAndHalfOfTargetWidth);
+                const canBeAtEnd = tooltipWidth < leftSpaceAndHalfOfTargetWidth;
+                if (canBeCentered) {
+                    this.classList.add('alignement-center');
+                    this.style.left = `${leftSpace - tooltipWidth / 2 + targetWidth / 2}px`;
+                }
+                else if (canBeAtEnd) {
+                    this.classList.add('alignement-end');
+                    this.style.left = `${leftSpace - tooltipWidth + this.horizontalOffset}px`;
+                }
+                else {
+                    this.classList.add('alignement-start');
+                    this.style.left = `${leftSpace - this.horizontalOffset}px`;
+                }
+            }
+        };
+        this.calculateXposition = () => {
+            const targetRect = this.target.getBoundingClientRect();
+            const leftSpace = targetRect.left;
+            const leftSpaceAndTargetWidth = targetRect.right;
+            const totalViewPortWidth = window.visualViewport.width;
+            const tooltipWidth = this.clientWidth;
+            const isAvailableRightSpace = tooltipWidth + this.horizontalOffset < totalViewPortWidth - leftSpaceAndTargetWidth;
+            const isAvailableLeftSpace = tooltipWidth + this.horizontalOffset < leftSpace;
+            if (this.position === TooltipPosition.Right) {
+                if (isAvailableRightSpace || !isAvailableLeftSpace) {
+                    this.classList.add('right-position');
+                    this.style.left = `${leftSpaceAndTargetWidth + this.horizontalOffset}px`;
+                }
+                else {
+                    this.classList.add('left-position');
+                    this.style.left = `${leftSpace - tooltipWidth - this.horizontalOffset}px`;
+                }
+            }
+            else {
+                if (isAvailableLeftSpace || !isAvailableRightSpace) {
+                    this.classList.add('left-position');
+                    this.style.left = `${leftSpace - tooltipWidth - this.horizontalOffset}px`;
+                }
+                else {
+                    this.classList.add('right-position');
+                    this.style.left = `${leftSpaceAndTargetWidth + this.horizontalOffset}px`;
+                }
+            }
+        };
+        this.calculateXalignement = () => {
+            const targetRect = this.target.getBoundingClientRect();
+            const topSpace = targetRect.top;
+            const targetHeight = targetRect.height;
+            const targetWithTopSpaceHeight = targetRect.bottom;
+            const tooltipHeight = this.clientHeight;
+            const totalViewPortHeight = window.visualViewport.height;
+            const bottomSpace = totalViewPortHeight - targetWithTopSpaceHeight;
+            if (this.alignement === TooltipAlignment.End) {
+                const canBeAtEnd = tooltipHeight < topSpace;
+                if (canBeAtEnd) {
+                    this.classList.add('alignement-end');
+                    this.style.top = `${targetWithTopSpaceHeight - tooltipHeight}px`;
+                }
+                else {
+                    this.classList.add('alignement-start');
+                    this.style.top = `${topSpace - targetHeight / 4}px`;
+                }
+            }
+            else if (this.alignement === TooltipAlignment.Start) {
+                const canBeAtStart = tooltipHeight < totalViewPortHeight - targetWithTopSpaceHeight;
+                if (canBeAtStart) {
+                    this.classList.add('alignement-start');
+                    this.style.top = `${topSpace - targetHeight / 4}px`;
+                }
+                else {
+                    this.classList.add('alignement-end');
+                    this.style.top = `${targetWithTopSpaceHeight - tooltipHeight}px`;
+                }
+            }
+            else {
+                const canBeCentered = (tooltipHeight / 2 < topSpace && tooltipHeight / 2 < bottomSpace) ||
+                    (tooltipHeight > topSpace && tooltipHeight > bottomSpace);
+                const canBeAtEnd = tooltipHeight < topSpace;
+                if (canBeCentered) {
+                    this.classList.add('alignement-center');
+                    this.style.top = `${topSpace + targetHeight / 2 - tooltipHeight / 2}px`;
+                }
+                else if (canBeAtEnd) {
+                    this.classList.add('alignement-end');
+                    this.style.top = `${targetWithTopSpaceHeight - tooltipHeight}px`;
+                }
+                else {
+                    this.classList.add('alignement-start');
+                    this.style.top = `${topSpace - targetHeight / 4}px`;
+                }
+            }
+        };
+        this.onClickOutside = (onClickEvent) => {
+            const eventPath = onClickEvent.composedPath();
+            const outsideClick = !eventPath.includes(this.target) && !eventPath.includes(this);
+            if (outsideClick)
+                this.show = false;
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Assign the target to a previous sibling or expect it to be set via property.
+        this.target = this.target || this.previousElementSibling;
+        if (!this.target) {
+            console.error('Tooltip target is not defined or found. Ensure target is explicitly set or precedes the tooltip.');
+            return;
+        }
+        if (!this.isPopConfirm) {
+            this.target.addEventListener('mouseover', this.onMouseOver);
+            this.target.addEventListener('mouseleave', this.onMouseLeave);
+        }
+        else {
+            document.addEventListener('scroll', this.calculatePosition);
+            this.target.addEventListener('click', this.onClick);
+            document.addEventListener('click', this.onClickOutside);
+        }
+    }
+    initStyles() {
+        this.style.top = EMPTY_STRING;
+        this.style.left = EMPTY_STRING;
+        this.style.width = EMPTY_STRING;
+        this.classList.remove(...this.classList.values());
+    }
+    updated(_changedProperties) {
+        if (this.show)
+            this.calculatePosition();
+    }
+    onPopConfirmCancel() {
+        this.dispatchEvent(new CustomEvent('onCancel'));
+        this.show = false;
+        this.initStyles();
+    }
+    onPopConfirmConfirm() {
+        this.dispatchEvent(new CustomEvent('onConfirm'));
+        this.show = false;
+        this.initStyles();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (!this.isPopConfirm) {
+            this.target.removeEventListener('mouseover', this.onMouseOver);
+            this.target.removeEventListener('mouseleave', this.onMouseLeave);
+        }
+        else {
+            this.target.removeEventListener('click', this.onClick);
+            document.removeEventListener('scroll', this.calculatePosition);
+        }
+    }
+    render() {
+        return !this.isPopConfirm
+            ? this.show
+                ? html `<slot></slot>`
+                : nothing
+            : this.show
+                ? html `
+          <div class="popconfirm-container">
+            <p class="popconfirm-title">${this.popConfirmTitle}</p>
+            <p class="popconfirm-description">${this.popConfirmDescription}</p>
+            <div class="btn-block">
+              <nr-button .size=${'small'} type=${'primary'} @click=${this.onPopConfirmConfirm}
+                >${this.okText}</nr-button
+              >
+              <nr-button .size=${'small'} type=${'danger'} @click=${this.onPopConfirmCancel}
+                >${this.cancelText}</nr-button
+              >
+            </div>
+          </div>
+        `
+                : nothing;
+    }
+};
+TooltipElement.styles = styles;
+__decorate([
+    property({ reflect: true })
+], TooltipElement.prototype, "position", void 0);
+__decorate([
+    property({ reflect: true })
+], TooltipElement.prototype, "alignement", void 0);
+__decorate([
+    state()
+], TooltipElement.prototype, "target", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], TooltipElement.prototype, "show", void 0);
+__decorate([
+    property()
+], TooltipElement.prototype, "isPopConfirm", void 0);
+__decorate([
+    property()
+], TooltipElement.prototype, "popConfirmTitle", void 0);
+__decorate([
+    property()
+], TooltipElement.prototype, "popConfirmDescription", void 0);
+__decorate([
+    property()
+], TooltipElement.prototype, "okText", void 0);
+__decorate([
+    property()
+], TooltipElement.prototype, "cancelText", void 0);
+TooltipElement = __decorate([
+    customElement('hy-tooltip')
+], TooltipElement);
+export { TooltipElement };
+//# sourceMappingURL=tooltips.component.js.map

package/dist/src/components/tooltips/tooltips.constant.d.ts

@@ -0,0 +1,13 @@
+export declare enum TooltipPosition {
+    Top = "top",
+    Bottom = "bottom",
+    Right = "right",
+    Left = "left"
+}
+export declare enum TooltipAlignment {
+    Start = "start",
+    Center = "center",
+    End = "end"
+}
+export declare const EMPTY_STRING = "";
+//# sourceMappingURL=tooltips.constant.d.ts.map

package/dist/src/components/tooltips/tooltips.constant.js

@@ -0,0 +1,15 @@
+export var TooltipPosition;
+(function (TooltipPosition) {
+    TooltipPosition["Top"] = "top";
+    TooltipPosition["Bottom"] = "bottom";
+    TooltipPosition["Right"] = "right";
+    TooltipPosition["Left"] = "left";
+})(TooltipPosition || (TooltipPosition = {}));
+export var TooltipAlignment;
+(function (TooltipAlignment) {
+    TooltipAlignment["Start"] = "start";
+    TooltipAlignment["Center"] = "center";
+    TooltipAlignment["End"] = "end";
+})(TooltipAlignment || (TooltipAlignment = {}));
+export const EMPTY_STRING = '';
+//# sourceMappingURL=tooltips.constant.js.map

package/dist/src/components/tooltips/tooltips.style.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult[];
+//# sourceMappingURL=tooltips.style.d.ts.map

package/dist/src/components/tooltips/tooltips.style.js

@@ -0,0 +1,103 @@
+import { css } from 'lit';
+import { styleVariables } from './tooltips.variables.js';
+const tooltipStyles = css `
+  :host([show]) {
+    background-color: var(--nuraly-tooltip-background-color);
+    color: var(--nuraly-tooltip-text-color);
+    position: fixed;
+    padding: 5px;
+    text-align: center;
+    opacity: 0;
+      font-size: 14px;
+      z-index: 9999;
+    border-radius: 4px;
+    animation-name: show-animation;
+    animation-duration: 0.4s;
+    animation-fill-mode: forwards;
+  }
+
+  .popconfirm-container {
+    display: flex;
+    flex-direction: column;
+  }
+  .btn-block {
+    display: flex;
+    justify-content: end;
+    gap: 10px;
+    margin: 10px;
+  }
+
+  .popconfirm-description,
+  .popconfirm-title {
+    margin: 5px;
+    text-align: left;
+  }
+  .popconfirm-title {
+    font-weight: bold;
+  }
+
+  @keyframes show-animation {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  :host::after {
+    content: '';
+    height: 0;
+    width: 0;
+    position: absolute;
+    border: 5px solid transparent;
+  }
+  :host(.top-position)::after {
+    border-top-color: var(--nuraly-tooltip-background-color);
+    top: 100%;
+  }
+  :host(.left-position)::after {
+    border-left-color: var(--nuraly-tooltip-background-color);
+    left: 100%;
+  }
+
+  :host(.right-position)::after {
+    border-right-color: var(--nuraly-tooltip-background-color);
+    right: 100%;
+  }
+  :host(.bottom-position)::after {
+    border-bottom-color: var(--nuraly-tooltip-background-color);
+    bottom: 100%;
+  }
+  :host(.alignement-center.top-position)::after,
+  :host(.alignement-center.bottom-position)::after {
+    right: 50%;
+    transform: translate(50%);
+  }
+
+  :host(.alignement-start.top-position)::after,
+  :host(.alignement-start.bottom-position)::after {
+    left: 4%;
+  }
+  :host(.top-position.alignement-end)::after,
+  :host(.alignement-end.bottom-position)::after {
+    right: 4%;
+  }
+
+  :host(.alignement-center.left-position)::after,
+  :host(.alignement-center.right-position)::after {
+    top: 50%;
+    transform: translate(0%, -50%);
+  }
+
+  :host(.alignement-start.left-position)::after,
+  :host(.alignement-start.right-position)::after {
+    top: 5px;
+  }
+  :host(.alignement-end.left-position)::after,
+  :host(.alignement-end.right-position)::after {
+    bottom: 5px;
+  }
+`;
+export const styles = [tooltipStyles, styleVariables];
+//# sourceMappingURL=tooltips.style.js.map

package/dist/src/components/tooltips/tooltips.variables.d.ts

@@ -0,0 +1,2 @@
+export declare const styleVariables: import("lit").CSSResult;
+//# sourceMappingURL=tooltips.variables.d.ts.map

package/dist/src/components/tooltips/tooltips.variables.js

@@ -0,0 +1,14 @@
+import { css } from 'lit';
+export const styleVariables = css `
+  :host {
+    --nuraly-tooltip-background-color: #393939;
+    --nuraly-tooltip-text-color: #ffffff;
+  }
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --nuraly-tooltip-background-color: #f4f4f4;
+      --nuraly-tooltip-text-color: #161616;
+    }
+  }
+`;
+//# sourceMappingURL=tooltips.variables.js.map

package/dist/src/components/video/bundle.js

@@ -0,0 +1,171 @@
+import{css as e,LitElement as i,html as o}from"lit";import{property as r,state as t,customElement as s}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{styleMap as n}from"lit/directives/style-map.js";import{NuralyUIBaseMixin as d}from"@nuralyui/common/mixins";var l=e`
+  :host {
+    display: inline-block;
+    box-sizing: border-box;
+  }
+
+  :host([block]) {
+    display: block;
+  }
+
+  .video-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: var(--nuraly-video-bg, #000);
+  }
+
+  video {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--nuraly-video-border-radius, 4px);
+  }
+
+  .video--error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+    background-color: var(--nuraly-video-error-bg, #f5f5f5);
+    color: var(--nuraly-video-error-color, #999);
+  }
+
+  .error-message {
+    text-align: center;
+    padding: 20px;
+  }
+
+  .error-icon {
+    width: 64px;
+    height: 64px;
+    margin: 0 auto 16px;
+    opacity: 0.5;
+  }
+
+  /* Preview/Fullscreen Modal */
+  .preview-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--nuraly-video-preview-bg, rgba(0, 0, 0, 0.95));
+    z-index: var(--nuraly-video-preview-zindex, 1000);
+    animation: fadeIn 0.3s ease;
+  }
+
+  .preview-modal video {
+    max-width: 90%;
+    max-height: 90%;
+    border-radius: var(--nuraly-video-preview-border-radius, 4px);
+  }
+
+  .preview-close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: 40px;
+    height: 40px;
+    background: var(--nuraly-video-preview-close-bg, rgba(255, 255, 255, 0.2));
+    border: none;
+    border-radius: 50%;
+    color: var(--nuraly-video-preview-close-color, white);
+    font-size: 24px;
+    line-height: 1;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: none;
+  }
+
+  .preview-close:hover {
+    background: var(--nuraly-video-preview-close-hover-bg, rgba(255, 255, 255, 0.3));
+  }
+
+  .preview-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: var(--nuraly-video-fullscreen-btn-bg, rgba(0, 0, 0, 0.5));
+    border: none;
+    border-radius: 4px;
+    padding: 8px 12px;
+    cursor: pointer;
+    color: var(--nuraly-video-fullscreen-btn-color, white);
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    transition: background-color 0.3s ease;
+    z-index: 10;
+  }
+
+  .preview-button:hover {
+    background-color: var(--nuraly-video-fullscreen-btn-hover-bg, rgba(0, 0, 0, 0.7));
+  }
+
+  /* Animations */
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`,v=function(e,i,o,r){for(var t,s=arguments.length,a=s<3?i:null===r?r=Object.getOwnPropertyDescriptor(i,o):r,n=e.length-1;n>=0;n--)(t=e[n])&&(a=(s<3?t(a):s>3?t(i,o,a):t(i,o))||a);return s>3&&a&&Object.defineProperty(i,o,a),a};let p=class extends(d(i)){constructor(){super(...arguments),this.width="auto",this.height="auto",this.autoplay=!1,this.loop=!1,this.muted=!1,this.controls=!0,this.preload="metadata",this.previewable=!1,this.block=!1,this.showPreview=!1,this.hasError=!1,this.defaultFallback="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI0MCAxODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNGM0Y0RjYiLz48cGF0aCBkPSJNMTg4IDY5TDE2OCA4OU0xNjggNjlMMTg4IDg5IiBzdHJva2U9IiM5Q0EzQUYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+"}handleError(){this.hasError=!0,this.dispatchEvent(new CustomEvent("nr-video-error",{bubbles:!0,composed:!0,detail:{error:`Error loading video: ${this.src}`,src:this.src}}))}handlePlay(){this.dispatchEvent(new CustomEvent("nr-video-play",{bubbles:!0,composed:!0,detail:{src:this.src}}))}handlePause(){this.dispatchEvent(new CustomEvent("nr-video-pause",{bubbles:!0,composed:!0,detail:{src:this.src}}))}handleEnded(){this.dispatchEvent(new CustomEvent("nr-video-ended",{bubbles:!0,composed:!0,detail:{src:this.src}}))}showPreviewModal(){this.previewable&&!this.hasError&&(this.showPreview=!0,this.dispatchEvent(new CustomEvent("nr-video-preview-open",{bubbles:!0,composed:!0,detail:{src:this.src}})))}closePreviewModal(){this.showPreview=!1,this.dispatchEvent(new CustomEvent("nr-video-preview-close",{bubbles:!0,composed:!0,detail:{src:this.src}}))}render(){const e={"video-container":!0,"video--error":this.hasError},i={width:"number"==typeof this.width?`${this.width}px`:this.width,height:"number"==typeof this.height?`${this.height}px`:this.height};return this.hasError?o`
+        <div class=${a(e)}>
+          <div class="error-message">
+            <img class="error-icon" src=${this.defaultFallback} alt="Video error" />
+            <p>Unable to load video</p>
+          </div>
+        </div>
+      `:o`
+      <div class=${a(e)}>
+        <video
+          style=${n(i)}
+          ?autoplay=${this.autoplay}
+          ?loop=${this.loop}
+          ?muted=${this.muted}
+          ?controls=${this.controls}
+          preload=${this.preload}
+          poster=${this.poster||""}
+          @error=${this.handleError}
+          @play=${this.handlePlay}
+          @pause=${this.handlePause}
+          @ended=${this.handleEnded}
+        >
+          <source src=${this.src} />
+          Your browser does not support the video tag.
+        </video>
+        ${this.previewable?o`
+          <button class="preview-button" @click=${this.showPreviewModal}>
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M5.5 5.5A.5.5 0 0 1 6 6v3a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v3a.5.5 0 0 0 1 0V6z"/>
+              <path d="M2 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zM1 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2z"/>
+            </svg>
+            Fullscreen
+          </button>
+        `:""}
+        ${this.showPreview?o`
+          <div class="preview-modal" @click=${this.closePreviewModal}>
+            <button class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
+            <video
+              ?autoplay=${!0}
+              ?loop=${this.loop}
+              ?muted=${this.muted}
+              controls
+              poster=${this.poster||""}
+            >
+              <source src=${this.src} />
+            </video>
+          </div>
+        `:""}
+      </div>
+    `}};p.styles=l,v([r({type:String})],p.prototype,"src",void 0),v([r({type:String})],p.prototype,"poster",void 0),v([r({type:String})],p.prototype,"width",void 0),v([r({type:String})],p.prototype,"height",void 0),v([r({type:Boolean})],p.prototype,"autoplay",void 0),v([r({type:Boolean})],p.prototype,"loop",void 0),v([r({type:Boolean})],p.prototype,"muted",void 0),v([r({type:Boolean})],p.prototype,"controls",void 0),v([r({type:String})],p.prototype,"preload",void 0),v([r({type:Boolean})],p.prototype,"previewable",void 0),v([r({type:Boolean,reflect:!0})],p.prototype,"block",void 0),v([t()],p.prototype,"showPreview",void 0),v([t()],p.prototype,"hasError",void 0),p=v([s("nr-video")],p);export{p as NrVideoElement};

package/dist/src/components/video/index.d.ts

@@ -0,0 +1,3 @@
+export * from './video.component.js';
+export * from './video.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/video/index.js

@@ -0,0 +1,3 @@
+export * from './video.component.js';
+export * from './video.types.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/video/react.d.ts

@@ -0,0 +1,10 @@
+import { NrVideoElement } from './video.component.js';
+export declare const NrVideo: import("@lit-labs/react").ReactWebComponent<NrVideoElement, {
+    onPlay: string;
+    onPause: string;
+    onEnded: string;
+    onError: string;
+    onPreviewOpen: string;
+    onPreviewClose: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

package/dist/src/components/video/react.js

@@ -0,0 +1,17 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrVideoElement } from './video.component.js';
+export const NrVideo = createComponent({
+    tagName: 'nr-video',
+    elementClass: NrVideoElement,
+    react: React,
+    events: {
+        onPlay: 'nr-video-play',
+        onPause: 'nr-video-pause',
+        onEnded: 'nr-video-ended',
+        onError: 'nr-video-error',
+        onPreviewOpen: 'nr-video-preview-open',
+        onPreviewClose: 'nr-video-preview-close',
+    },
+});
+//# sourceMappingURL=react.js.map