@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/tooltips/test/tooltips_test.js

@@ -0,0 +1,145 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { html, fixture, expect } from '@open-wc/testing';
+import '../tooltips.component';
+import { TooltipAlignment, TooltipPosition } from '../tooltips.constant';
+suite('TooltipElement', () => {
+    test('shows tooltip on mouseover and hides on mouseleave', () => __awaiter(void 0, void 0, void 0, function* () {
+        const wrapper = yield fixture(html `
+      <div>
+        <span id="target">Hover me</span>
+        <hy-tooltip>Tooltip Content</hy-tooltip>
+      </div>
+    `);
+        const target = wrapper.querySelector('#target');
+        const tooltip = wrapper.querySelector('hy-tooltip');
+        expect(tooltip.show).to.be.false;
+        target.dispatchEvent(new MouseEvent('mouseover'));
+        expect(tooltip.show).to.be.true;
+        target.dispatchEvent(new MouseEvent('mouseleave'));
+        expect(tooltip.show).to.be.false;
+    }));
+    test('init tooltip position on mouseleave', () => __awaiter(void 0, void 0, void 0, function* () {
+        const wrapper = yield fixture(html `
+      <div>
+        <span id="target">Hover me</span>
+        <hy-tooltip>Tooltip Content</hy-tooltip>
+      </div>
+    `);
+        const target = wrapper.querySelector('#target');
+        const tooltip = wrapper.querySelector('hy-tooltip');
+        target.dispatchEvent(new MouseEvent('mouseover'));
+        yield tooltip.updateComplete;
+        expect(tooltip.show).to.be.true;
+        expect(tooltip.style.top).to.not.be.empty;
+        expect(tooltip.style.left).to.not.be.empty;
+        expect(tooltip.style.width).to.not.be.empty;
+        target.dispatchEvent(new MouseEvent('mouseleave'));
+        expect(tooltip.show).to.be.false;
+        expect(tooltip.style.top).to.be.empty;
+        expect(tooltip.style.left).to.be.empty;
+        expect(tooltip.style.width).to.be.empty;
+    }));
+    suite('calculates tooltip style correctly', () => {
+        test('tooltip style when position is bottom and alignement is center', () => __awaiter(void 0, void 0, void 0, function* () {
+            const wrapper = yield fixture(html `
+        <div>
+          <span id="target">Hover me</span>
+          <hy-tooltip position="${TooltipPosition.Bottom}" alignement="${TooltipAlignment.Center}">
+            Tooltip Content
+          </hy-tooltip>
+        </div>
+      `);
+            const target = wrapper.querySelector('#target');
+            const tooltip = wrapper.querySelector('hy-tooltip');
+            target.dispatchEvent(new MouseEvent('mouseover'));
+            yield tooltip.updateComplete;
+            const targetRect = target.getBoundingClientRect();
+            const tooltipRect = tooltip.getBoundingClientRect();
+            expect(Math.ceil(+tooltip.style.top.split('px')[0])).to.equal(Math.ceil(targetRect.bottom + tooltip.verticalOffset));
+            expect(Math.ceil(+tooltip.style.left.split('px')[0])).to.equal(Math.ceil(targetRect.left - tooltipRect.width / 2 + targetRect.width / 2));
+        }));
+        test('tooltip style when position is left and alignement is end', () => __awaiter(void 0, void 0, void 0, function* () {
+            const wrapper = yield fixture(html `
+        <div>
+          <span id="target">Hover me</span>
+          <hy-tooltip position="${TooltipPosition.Left}" alignement="${TooltipAlignment.End}">
+            Tooltip Content
+          </hy-tooltip>
+        </div>
+      `);
+            const target = wrapper.querySelector('#target');
+            const tooltip = wrapper.querySelector('hy-tooltip');
+            target.dispatchEvent(new MouseEvent('mouseover'));
+            yield tooltip.updateComplete;
+            const targetRect = target.getBoundingClientRect();
+            const tooltipRect = tooltip.getBoundingClientRect();
+            expect(Math.ceil(+tooltip.style.top.split('px')[0])).to.equal(Math.ceil(targetRect.bottom - tooltipRect.height));
+            expect(Math.ceil(+tooltip.style.left.split('px')[0])).to.equal(Math.ceil(targetRect.left - tooltipRect.width - tooltip.horizontalOffset));
+        }));
+        test('tooltip style when position is top and alignement is start', () => __awaiter(void 0, void 0, void 0, function* () {
+            const wrapper = yield fixture(html `
+        <div>
+          <span id="target">Hover me</span>
+          <hy-tooltip position="${TooltipPosition.Top}" alignement="${TooltipAlignment.Start}">
+            Tooltip Content
+          </hy-tooltip>
+        </div>
+      `);
+            const target = wrapper.querySelector('#target');
+            const tooltip = wrapper.querySelector('hy-tooltip');
+            target.dispatchEvent(new MouseEvent('mouseover'));
+            yield tooltip.updateComplete;
+            const targetRect = target.getBoundingClientRect();
+            const tooltipRect = tooltip.getBoundingClientRect();
+            expect(Math.ceil(+tooltip.style.top.split('px')[0])).to.equal(Math.ceil(targetRect.top - tooltipRect.height - tooltip.verticalOffset));
+            expect(Math.ceil(+tooltip.style.left.split('px')[0])).to.equal(Math.ceil(targetRect.left - tooltip.horizontalOffset));
+        }));
+    });
+    suite('removes event listeners on disconnectedCallback', () => {
+        test('removes mouseleave listener', () => __awaiter(void 0, void 0, void 0, function* () {
+            const wrapper = yield fixture(html `
+        <div>
+          <span id="target">Hover me</span>
+          <hy-tooltip>Tooltip Content</hy-tooltip>
+        </div>
+      `);
+            const target = wrapper.querySelector('#target');
+            const tooltip = wrapper.querySelector('hy-tooltip');
+            target.dispatchEvent(new MouseEvent('mouseover'));
+            expect(tooltip.show).to.be.true;
+            target.dispatchEvent(new MouseEvent('mouseleave'));
+            expect(tooltip.show).to.be.false;
+            target.dispatchEvent(new MouseEvent('mouseover'));
+            expect(tooltip.show).to.be.true;
+            wrapper.removeChild(tooltip);
+            target.dispatchEvent(new MouseEvent('mouseleave'));
+            expect(tooltip.show).to.be.true;
+        }));
+        test('removes mouseover listener', () => __awaiter(void 0, void 0, void 0, function* () {
+            const wrapper = yield fixture(html `
+        <div>
+          <span id="target">Hover me</span>
+          <hy-tooltip>Tooltip Content</hy-tooltip>
+        </div>
+      `);
+            const target = wrapper.querySelector('#target');
+            const tooltip = wrapper.querySelector('hy-tooltip');
+            target.dispatchEvent(new MouseEvent('mouseover'));
+            expect(tooltip.show).to.be.true;
+            target.dispatchEvent(new MouseEvent('mouseleave'));
+            expect(tooltip.show).to.be.false;
+            wrapper.removeChild(tooltip);
+            target.dispatchEvent(new MouseEvent('mouseover'));
+            expect(tooltip.show).to.be.false;
+        }));
+    });
+});
+//# sourceMappingURL=tooltips_test.js.map

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

@@ -1,7 +1,15 @@
 import { LitElement, nothing, PropertyValueMap } from 'lit';
 import { TooltipAlignment, TooltipPosition } from './tooltips.constant.js';
+/**
+ * Tooltip / popconfirm overlay component.
+ *
+ * @element hy-tooltip
+ *
+ * @csspart container - The popconfirm inner container
+ */
 export declare class TooltipElement extends LitElement {
     static styles: import("lit").CSSResult[];
+    static useShadowDom: boolean;
     position: TooltipPosition;
     alignement: TooltipAlignment;
     target: Element;

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

@@ -9,6 +9,13 @@ 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';
+/**
+ * Tooltip / popconfirm overlay component.
+ *
+ * @element hy-tooltip
+ *
+ * @csspart container - The popconfirm inner container
+ */
 let TooltipElement = class TooltipElement extends LitElement {
     constructor() {
         super(...arguments);
@@ -262,7 +269,7 @@ let TooltipElement = class TooltipElement extends LitElement {
                 : nothing
             : this.show
                 ? html `
-          <div class="popconfirm-container">
+          <div class="popconfirm-container" part="container">
             <p class="popconfirm-title">${this.popConfirmTitle}</p>
             <p class="popconfirm-description">${this.popConfirmDescription}</p>
             <div class="btn-block">
@@ -279,6 +286,7 @@ let TooltipElement = class TooltipElement extends LitElement {
     }
 };
 TooltipElement.styles = styles;
+TooltipElement.useShadowDom = true;
 __decorate([
     property({ reflect: true })
 ], TooltipElement.prototype, "position", void 0);

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

@@ -2,8 +2,8 @@ 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);
+    background-color: #161616;
+    color: #ffffff;
     position: fixed;
     padding: 5px;
     text-align: center;
@@ -53,20 +53,20 @@ const tooltipStyles = css `
     border: 5px solid transparent;
   }
   :host(.top-position)::after {
-    border-top-color: var(--nuraly-tooltip-background-color);
+    border-top-color: #161616;
     top: 100%;
   }
   :host(.left-position)::after {
-    border-left-color: var(--nuraly-tooltip-background-color);
+    border-left-color: #161616;
     left: 100%;
   }
 
   :host(.right-position)::after {
-    border-right-color: var(--nuraly-tooltip-background-color);
+    border-right-color: #161616;
     right: 100%;
   }
   :host(.bottom-position)::after {
-    border-bottom-color: var(--nuraly-tooltip-background-color);
+    border-bottom-color: #161616;
     bottom: 100%;
   }
   :host(.alignement-center.top-position)::after,

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

@@ -1,4 +1,20 @@
-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`
+import{css as e,html as t,LitElement as i}from"lit";import{property as o,state as s,customElement as r}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";import{styleMap as a}from"lit/directives/style-map.js";
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */const d=e=>class extends e{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var e,t,i;super.disconnectedCallback(),null===(e=this.themeObserver)||void 0===e||e.disconnect(),null===(t=this.designSystemObserver)||void 0===t||t.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var e,t;const i=(null===(e=this.closest("[data-theme]"))||void 0===e?void 0:e.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return i||((null===(t=window.matchMedia)||void 0===t?void 0:t.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var e;const t=(null===(e=this.closest("[design-system]"))||void 0===e?void 0:e.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===t?t:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver(()=>{this.requestUpdate()}),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver(()=>{this.requestUpdate()}),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},l=()=>{var e;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(e=process.env)||void 0===e?void 0:e.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},h=e=>class extends e{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(l())for(const e of this.requiredComponents)if(!this.isComponentAvailable(e))throw new Error(`Required component "${e}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${e}';`)}validateDependenciesWithHandler(e){if(!l())return!0;let t=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){t=!1;const o=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);e?e(i,o):console.error(o.message)}return t}isComponentAvailable(e){return!!customElements.get(e)}getMissingDependencies(){return this.requiredComponents.filter(e=>!this.isComponentAvailable(e))}areDependenciesAvailable(){return this.requiredComponents.every(e=>this.isComponentAvailable(e))}addRequiredComponent(e){this.requiredComponents.includes(e)||this.requiredComponents.push(e)}removeRequiredComponent(e){const t=this.requiredComponents.indexOf(e);t>-1&&this.requiredComponents.splice(t,1)}},c=e=>class extends e{dispatchCustomEvent(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(e,t){var i;const o=Object.assign(Object.assign({},t),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(e,o)}dispatchInputEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,originalEvent:t.originalEvent},t);this.dispatchCustomEvent(e,i)}dispatchFocusEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,focused:t.focused,cursorPosition:t.cursorPosition,selectedText:t.selectedText},t);this.dispatchCustomEvent(e,i)}dispatchValidationEvent(e,t){var i;const o=Object.assign({target:t.target||this,value:t.value,isValid:null!==(i=t.isValid)&&void 0!==i&&i,error:t.error},t);this.dispatchCustomEvent(e,o)}dispatchActionEvent(e,t){const i=Object.assign({target:t.target||this,action:t.action,previousValue:t.previousValue,newValue:t.newValue},t);this.dispatchCustomEvent(e,i)}isReadonlyKeyAllowed(e){if(e.ctrlKey||e.metaKey){return["KeyA","KeyC"].includes(e.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(e.key)}isActivationKey(e){return"Enter"===e.key||" "===e.key}},p=new Set,u=new Map;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const v=e=>{class t extends e{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const e=this.constructor.useShadowDom;if(!e&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!e){const e=this.constructor,t=this.tagName.toLowerCase(),i=e.styles;if(i){const e=m(i);e&&function(e,t,i){var o;if(!u.has(e)){const i=new CSSStyleSheet;i.replaceSync(t),u.set(e,i)}const s=u.get(e),r=`doc:${e}`;if(p.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,s],p.add(r)),i){let t=i;for(;t;){const i=t.getRootNode();if(!(i instanceof ShadowRoot))break;{const r=`shadow:${((null===(o=i.host)||void 0===o?void 0:o.tagName)||"").toLowerCase()}:${e}`;p.has(r)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,s],p.add(r)),t=i.host}}}}(t,e,this)}}}get lightChildren(){return this.t?this.t.filter(e=>!(e instanceof Element&&e.hasAttribute("slot"))):[]}lightChildrenNamed(e){return this.t?this.t.filter(t=>t instanceof Element&&t.getAttribute("slot")===e):[]}}return t.useShadowDom=!1,t};function m(e){return Array.isArray(e)?e.map(e=>m(e)).filter(Boolean).join("\n"):e&&"string"==typeof e.cssText?e.cssText:"string"==typeof e?e:""}var b=e`
   :host {
     display: inline-block;
     box-sizing: border-box;
@@ -12,14 +28,14 @@ import{css as e,LitElement as i,html as o}from"lit";import{property as r,state a
     position: relative;
     width: 100%;
     height: 100%;
-    background-color: var(--nuraly-video-bg, #000);
+    background-color: #000;
   }
 
   video {
     display: block;
     width: 100%;
     height: 100%;
-    border-radius: var(--nuraly-video-border-radius, 4px);
+    border-radius: 4px;
   }
 
   .video--error {
@@ -27,8 +43,8 @@ import{css as e,LitElement as i,html as o}from"lit";import{property as r,state a
     align-items: center;
     justify-content: center;
     min-height: 200px;
-    background-color: var(--nuraly-video-error-bg, #f5f5f5);
-    color: var(--nuraly-video-error-color, #999);
+    background-color: var(--nr-bg-hover, #f4f4f4);
+    color: var(--nr-text-secondary, #525252);
   }
 
   .error-message {
@@ -43,7 +59,6 @@ import{css as e,LitElement as i,html as o}from"lit";import{property as r,state a
     opacity: 0.5;
   }
 
-  /* Preview/Fullscreen Modal */
   .preview-modal {
     position: fixed;
     top: 0;
@@ -53,15 +68,15 @@ import{css as e,LitElement as i,html as o}from"lit";import{property as r,state a
     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;
+    background-color: rgba(0, 0, 0, 0.95);
+    z-index: 1000;
+    animation: nr-video-fadeIn 0.3s ease;
   }
 
   .preview-modal video {
     max-width: 90%;
     max-height: 90%;
-    border-radius: var(--nuraly-video-preview-border-radius, 4px);
+    border-radius: 4px;
   }
 
   .preview-close {
@@ -70,10 +85,10 @@ import{css as e,LitElement as i,html as o}from"lit";import{property as r,state a
     right: 20px;
     width: 40px;
     height: 40px;
-    background: var(--nuraly-video-preview-close-bg, rgba(255, 255, 255, 0.2));
+    background: rgba(255, 255, 255, 0.2);
     border: none;
     border-radius: 50%;
-    color: var(--nuraly-video-preview-close-color, white);
+    color: white;
     font-size: 24px;
     line-height: 1;
     cursor: pointer;
@@ -85,19 +100,19 @@ import{css as e,LitElement as i,html as o}from"lit";import{property as r,state a
   }
 
   .preview-close:hover {
-    background: var(--nuraly-video-preview-close-hover-bg, rgba(255, 255, 255, 0.3));
+    background: 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));
+    background-color: rgba(0, 0, 0, 0.5);
     border: none;
     border-radius: 4px;
     padding: 8px 12px;
     cursor: pointer;
-    color: var(--nuraly-video-fullscreen-btn-color, white);
+    color: white;
     font-size: 12px;
     display: flex;
     align-items: center;
@@ -107,29 +122,25 @@ import{css as e,LitElement as i,html as o}from"lit";import{property as r,state a
   }
 
   .preview-button:hover {
-    background-color: var(--nuraly-video-fullscreen-btn-hover-bg, rgba(0, 0, 0, 0.7));
+    background-color: rgba(0, 0, 0, 0.7);
   }
 
-  /* Animations */
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
+  @keyframes nr-video-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">
+`,g=function(e,t,i,o){for(var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o,a=e.length-1;a>=0;a--)(s=e[a])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};let w=class extends((e=>h(d(c(v(e)))))(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?t`
+        <div part="container" class=${n(e)}>
+          <div part="error-message" 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)}>
+      `:t`
+      <div part="container" class=${n(e)}>
         <video
-          style=${n(i)}
+          part="video"
+          style=${a(i)}
           ?autoplay=${this.autoplay}
           ?loop=${this.loop}
           ?muted=${this.muted}
@@ -144,8 +155,8 @@ import{css as e,LitElement as i,html as o}from"lit";import{property as r,state a
           <source src=${this.src} />
           Your browser does not support the video tag.
         </video>
-        ${this.previewable?o`
-          <button class="preview-button" @click=${this.showPreviewModal}>
+        ${this.previewable?t`
+          <button part="preview-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"/>
@@ -153,9 +164,9 @@ import{css as e,LitElement as i,html as o}from"lit";import{property as r,state a
             Fullscreen
           </button>
         `:""}
-        ${this.showPreview?o`
-          <div class="preview-modal" @click=${this.closePreviewModal}>
-            <button class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
+        ${this.showPreview?t`
+          <div part="preview-modal" class="preview-modal" @click=${this.closePreviewModal}>
+            <button part="preview-close" class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
             <video
               ?autoplay=${!0}
               ?loop=${this.loop}
@@ -168,4 +179,4 @@ import{css as e,LitElement as i,html as o}from"lit";import{property as r,state a
           </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};
+    `}};w.styles=b,w.useShadowDom=!0,g([o({type:String})],w.prototype,"src",void 0),g([o({type:String})],w.prototype,"poster",void 0),g([o({type:String})],w.prototype,"width",void 0),g([o({type:String})],w.prototype,"height",void 0),g([o({type:Boolean})],w.prototype,"autoplay",void 0),g([o({type:Boolean})],w.prototype,"loop",void 0),g([o({type:Boolean})],w.prototype,"muted",void 0),g([o({type:Boolean})],w.prototype,"controls",void 0),g([o({type:String})],w.prototype,"preload",void 0),g([o({type:Boolean})],w.prototype,"previewable",void 0),g([o({type:Boolean,reflect:!0})],w.prototype,"block",void 0),g([s()],w.prototype,"showPreview",void 0),g([s()],w.prototype,"hasError",void 0),w=g([r("nr-video")],w);export{w as NrVideoElement};

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

@@ -1,8 +1,19 @@
 import { LitElement } from "lit";
 import { VideoPreload } from "./video.types.js";
-declare const NrVideoElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+declare const NrVideoElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
+/**
+ * Video player component with poster, autoplay, loop, and fullscreen preview support.
+ *
+ * @csspart container - The root wrapper div of the video player
+ * @csspart video - The native video element
+ * @csspart preview-button - The button that opens the fullscreen preview modal
+ * @csspart preview-modal - The fullscreen preview overlay
+ * @csspart preview-close - The close button inside the preview modal
+ * @csspart error-message - The error state container shown when the video fails to load
+ */
 export declare class NrVideoElement extends NrVideoElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     src: string;
     poster?: string;
     width: string;

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

@@ -10,6 +10,16 @@ import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import styles from "./video.style.js";
+/**
+ * Video player component with poster, autoplay, loop, and fullscreen preview support.
+ *
+ * @csspart container - The root wrapper div of the video player
+ * @csspart video - The native video element
+ * @csspart preview-button - The button that opens the fullscreen preview modal
+ * @csspart preview-modal - The fullscreen preview overlay
+ * @csspart preview-close - The close button inside the preview modal
+ * @csspart error-message - The error state container shown when the video fails to load
+ */
 let NrVideoElement = class NrVideoElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
         super(...arguments);
@@ -84,8 +94,8 @@ let NrVideoElement = class NrVideoElement extends NuralyUIBaseMixin(LitElement)
         };
         if (this.hasError) {
             return html `
-        <div class=${classMap(containerClasses)}>
-          <div class="error-message">
+        <div part="container" class=${classMap(containerClasses)}>
+          <div part="error-message" class="error-message">
             <img class="error-icon" src=${this.defaultFallback} alt="Video error" />
             <p>Unable to load video</p>
           </div>
@@ -93,8 +103,9 @@ let NrVideoElement = class NrVideoElement extends NuralyUIBaseMixin(LitElement)
       `;
         }
         return html `
-      <div class=${classMap(containerClasses)}>
+      <div part="container" class=${classMap(containerClasses)}>
         <video
+          part="video"
           style=${styleMap(videoStyles)}
           ?autoplay=${this.autoplay}
           ?loop=${this.loop}
@@ -111,7 +122,7 @@ let NrVideoElement = class NrVideoElement extends NuralyUIBaseMixin(LitElement)
           Your browser does not support the video tag.
         </video>
         ${this.previewable ? html `
-          <button class="preview-button" @click=${this.showPreviewModal}>
+          <button part="preview-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"/>
@@ -120,8 +131,8 @@ let NrVideoElement = class NrVideoElement extends NuralyUIBaseMixin(LitElement)
           </button>
         ` : ''}
         ${this.showPreview ? html `
-          <div class="preview-modal" @click=${this.closePreviewModal}>
-            <button class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
+          <div part="preview-modal" class="preview-modal" @click=${this.closePreviewModal}>
+            <button part="preview-close" class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
             <video
               ?autoplay=${true}
               ?loop=${this.loop}
@@ -138,6 +149,7 @@ let NrVideoElement = class NrVideoElement extends NuralyUIBaseMixin(LitElement)
     }
 };
 NrVideoElement.styles = styles;
+NrVideoElement.useShadowDom = true;
 __decorate([
     property({ type: String })
 ], NrVideoElement.prototype, "src", void 0);

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

@@ -1,4 +1,4 @@
-import { css } from "lit";
+import { css } from 'lit';
 export default css `
   :host {
     display: inline-block;
@@ -13,14 +13,14 @@ export default css `
     position: relative;
     width: 100%;
     height: 100%;
-    background-color: var(--nuraly-video-bg, #000);
+    background-color: #000;
   }
 
   video {
     display: block;
     width: 100%;
     height: 100%;
-    border-radius: var(--nuraly-video-border-radius, 4px);
+    border-radius: 4px;
   }
 
   .video--error {
@@ -28,8 +28,8 @@ export default css `
     align-items: center;
     justify-content: center;
     min-height: 200px;
-    background-color: var(--nuraly-video-error-bg, #f5f5f5);
-    color: var(--nuraly-video-error-color, #999);
+    background-color: var(--nr-bg-hover, #f4f4f4);
+    color: var(--nr-text-secondary, #525252);
   }
 
   .error-message {
@@ -44,7 +44,6 @@ export default css `
     opacity: 0.5;
   }
 
-  /* Preview/Fullscreen Modal */
   .preview-modal {
     position: fixed;
     top: 0;
@@ -54,15 +53,15 @@ export default css `
     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;
+    background-color: rgba(0, 0, 0, 0.95);
+    z-index: 1000;
+    animation: nr-video-fadeIn 0.3s ease;
   }
 
   .preview-modal video {
     max-width: 90%;
     max-height: 90%;
-    border-radius: var(--nuraly-video-preview-border-radius, 4px);
+    border-radius: 4px;
   }
 
   .preview-close {
@@ -71,10 +70,10 @@ export default css `
     right: 20px;
     width: 40px;
     height: 40px;
-    background: var(--nuraly-video-preview-close-bg, rgba(255, 255, 255, 0.2));
+    background: rgba(255, 255, 255, 0.2);
     border: none;
     border-radius: 50%;
-    color: var(--nuraly-video-preview-close-color, white);
+    color: white;
     font-size: 24px;
     line-height: 1;
     cursor: pointer;
@@ -86,19 +85,19 @@ export default css `
   }
 
   .preview-close:hover {
-    background: var(--nuraly-video-preview-close-hover-bg, rgba(255, 255, 255, 0.3));
+    background: 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));
+    background-color: rgba(0, 0, 0, 0.5);
     border: none;
     border-radius: 4px;
     padding: 8px 12px;
     cursor: pointer;
-    color: var(--nuraly-video-fullscreen-btn-color, white);
+    color: white;
     font-size: 12px;
     display: flex;
     align-items: center;
@@ -108,17 +107,12 @@ export default css `
   }
 
   .preview-button:hover {
-    background-color: var(--nuraly-video-fullscreen-btn-hover-bg, rgba(0, 0, 0, 0.7));
+    background-color: rgba(0, 0, 0, 0.7);
   }
 
-  /* Animations */
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
+  @keyframes nr-video-fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
   }
 `;
 //# sourceMappingURL=video.style.js.map