@nuraly/lumenui 0.2.1 → 0.3.2

package/dist/src/components/toast/controllers/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { BaseToastController } from './base.controller.js';
+export type { ToastControllerHost } from './base.controller.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/toast/controllers/index.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { BaseToastController } from './base.controller.js';
+//# sourceMappingURL=index.js.map

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

@@ -69,6 +69,14 @@ declare const NrToastElement_base: (new (...args: any[]) => import("@nuralyui/co
  * @cssproperty --nuraly-toast-error-background - Error toast background
  * @cssproperty --nuraly-toast-warning-background - Warning toast background
  * @cssproperty --nuraly-toast-info-background - Info toast background
+ *
+ * @csspart container - The root list wrapper holding all visible toasts
+ * @csspart toast - An individual toast element
+ * @csspart icon - The leading icon container (when an icon is set)
+ * @csspart content - The content area (text or custom html)
+ * @csspart text - The text node (when not using custom content)
+ * @csspart button - The action button wrapper (when a button is configured)
+ * @csspart close - The close (×) button (when closable)
  */
 export declare class NrToastElement extends NrToastElement_base {
     static useShadowDom: boolean;

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

@@ -80,6 +80,14 @@ import { DEFAULT_TOAST_DURATION, DEFAULT_MAX_TOASTS, EMPTY_STRING } from './toas
  * @cssproperty --nuraly-toast-error-background - Error toast background
  * @cssproperty --nuraly-toast-warning-background - Warning toast background
  * @cssproperty --nuraly-toast-info-background - Info toast background
+ *
+ * @csspart container - The root list wrapper holding all visible toasts
+ * @csspart toast - An individual toast element
+ * @csspart icon - The leading icon container (when an icon is set)
+ * @csspart content - The content area (text or custom html)
+ * @csspart text - The text node (when not using custom content)
+ * @csspart button - The action button wrapper (when a button is configured)
+ * @csspart close - The close (×) button (when closable)
  */
 let NrToastElement = class NrToastElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
@@ -272,7 +280,7 @@ let NrToastElement = class NrToastElement extends NuralyUIBaseMixin(LitElement)
     }
     render() {
         return html `
-      <div class="toast-container">
+      <div class="toast-container" part="container">
         ${repeat(this.toasts, toast => toast.id, toast => this.renderToast(toast))}
       </div>
     `;
@@ -287,28 +295,30 @@ let NrToastElement = class NrToastElement extends NuralyUIBaseMixin(LitElement)
         return html `
       <div
         class=${classMap(classes)}
+        part="toast toast-${toast.type}"
         @click=${() => this.handleToastClick(toast)}
         role="alert"
         aria-live="polite"
       >
         ${toast.icon ? html `
-          <div class="toast__icon">
+          <div class="toast__icon" part="icon">
             <nr-icon name=${toast.icon} size="medium"></nr-icon>
           </div>
         ` : nothing}
-        
-        <div class="toast__content">
+
+        <div class="toast__content" part="content">
           ${toast.content
             ? toast.content
             : html `
-              <div class="toast__text">${toast.text}</div>
+              <div class="toast__text" part="text">${toast.text}</div>
               ${toast.button ? this.renderButton(toast.button) : nothing}
             `}
         </div>
-        
+
         ${toast.closable ? html `
           <button
             class="toast__close"
+            part="close"
             @click=${(e) => this.handleCloseClick(e, toast)}
             aria-label="Close notification"
             type="button"
@@ -325,7 +335,7 @@ let NrToastElement = class NrToastElement extends NuralyUIBaseMixin(LitElement)
             button.onClick(e);
         };
         return html `
-      <div class="toast__button">
+      <div class="toast__button" part="button">
         <nr-button
           type=${button.type || 'default'}
           size=${button.size || 'small'}

package/dist/src/components/tooltips/demo/tooltips-demo.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import '../tooltips.component';
+export declare class ElMeenuElement extends LitElement {
+    float: string;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'hy-tooltips-demo': ElMeenuElement;
+    }
+}
+//# sourceMappingURL=tooltips-demo.d.ts.map

package/dist/src/components/tooltips/demo/tooltips-demo.js

@@ -0,0 +1,132 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+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, css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import '../tooltips.component';
+let ElMeenuElement = class ElMeenuElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.float = 'left';
+    }
+    render() {
+        return html `
+      <h3>BOTTOM</h3>
+      <span>click me</span>
+      <hy-tooltip
+        .isPopConfirm=${true}
+        .popConfirmDescription=${'Are you sure to delete this task?'}
+        .popConfirmTitle=${'delete the task'}
+        .cancelText=${'Cancel'}
+        .okText=${'Ok'}
+        @onCancel=${() => {
+            console.log('canceled');
+        }}
+        @onConfirm=${() => {
+            console.log('confirm');
+        }}
+      >
+      </hy-tooltip>
+
+      <br /><br /><br />
+      <p>hover me</p>
+      <hy-tooltip alignement=${'start'}>
+        <span>This is bottom and start</span>
+      </hy-tooltip>
+
+      <br /><br /><br />
+      <p>hover me</p>
+      <hy-tooltip alignement=${'end'}>
+        <span>This is bottom and end</span>
+      </hy-tooltip>
+
+      <br /><br /><br />
+      <h3>TOP</h3>
+
+      <p>hover me</p>
+      <hy-tooltip position=${'top'}>
+        <span>This is a description of the p in top and center</span>
+      </hy-tooltip>
+      <br /><br /><br />
+      <div>hover me</div>
+
+      <hy-tooltip position=${'top'} alignement=${'start'}>
+        <span>This is a description of the p in top and start </span>
+      </hy-tooltip>
+      <br /><br /><br />
+
+      <p>hover me</p>
+
+      <hy-tooltip position=${'top'} alignement=${'end'}>
+        <span>This is a description of the p in top and end</span>
+      </hy-tooltip>
+      <br /><br /><br />
+      <h3>RIGHT</h3>
+      <span>hover me</span>
+      <hy-tooltip position=${'right'}>
+        <span>This is a description of the p to the right and center</span>
+      </hy-tooltip>
+
+      <br /><br /><br />
+
+      <div>hover me</div>
+      <hy-tooltip position=${'right'} alignement=${'start'}>
+        <span>This is a description of the p to the right and start</span>
+      </hy-tooltip>
+
+      <br /><br /><br />
+      <span>hover me</span>
+      <hy-tooltip position=${'right'} alignement=${'end'}>
+        <span>This is a description of the p to the right and end</span>
+      </hy-tooltip>
+
+      <br /><br /><br />
+      <h3>LEFT</h3>
+      <span>hover me</span>
+      <hy-tooltip position=${'left'}>
+        <span>This is a description of the p to the left and center</span>
+      </hy-tooltip>
+      <br /><br /><br />
+
+      <span>hover me</span>
+      <hy-tooltip position=${'left'} alignement=${'start'}>
+        <span>This is a description of the p to the left and start</span>
+      </hy-tooltip>
+
+      <br /><br /><br />
+
+      <div>hover me</div>
+      <hy-tooltip position=${'left'} alignement=${'end'}>
+        <span>This is a description of the p to the left and end</span>
+      </hy-tooltip>
+    `;
+    }
+};
+ElMeenuElement.styles = [
+    css `
+      :host {
+        width: 800px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+    `,
+];
+__decorate([
+    state()
+], ElMeenuElement.prototype, "float", void 0);
+ElMeenuElement = __decorate([
+    customElement('hy-tooltips-demo')
+], ElMeenuElement);
+export { ElMeenuElement };
+//# sourceMappingURL=tooltips-demo.js.map

package/dist/src/components/tooltips/test/tooltips_test.d.ts

@@ -0,0 +1,2 @@
+import '../tooltips.component';
+//# sourceMappingURL=tooltips_test.d.ts.map

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/video/bundle.js

@@ -1,9 +1,9 @@
-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";
+import{css as t,html as e,LitElement as i}from"lit";import{property as s,state as o,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;
+ */const d=t=>class extends t{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 t,e,i;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(e=this.designSystemObserver)||void 0===e||e.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,e;const i=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return i||((null===(e=window.matchMedia)||void 0===e?void 0:e.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var t;const e=(null===(t=this.closest("[design-system]"))||void 0===t?void 0:t.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===e?e:"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))}},h=()=>{var t;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(t=process.env)||void 0===t?void 0:t.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},l=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(h())for(const t of this.requiredComponents)if(!this.isComponentAvailable(t))throw new Error(`Required component "${t}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${t}';`)}validateDependenciesWithHandler(t){if(!h())return!0;let e=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){e=!1;const s=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(i,s):console.error(s.message)}return e}isComponentAvailable(t){return!!customElements.get(t)}getMissingDependencies(){return this.requiredComponents.filter(t=>!this.isComponentAvailable(t))}areDependenciesAvailable(){return this.requiredComponents.every(t=>this.isComponentAvailable(t))}addRequiredComponent(t){this.requiredComponents.includes(t)||this.requiredComponents.push(t)}removeRequiredComponent(t){const e=this.requiredComponents.indexOf(t);e>-1&&this.requiredComponents.splice(e,1)}},c=t=>class extends t{dispatchCustomEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,e){var i;const s=Object.assign(Object.assign({},e),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,s)}dispatchInputEvent(t,e){const i=Object.assign({target:e.target||this,value:e.value,originalEvent:e.originalEvent},e);this.dispatchCustomEvent(t,i)}dispatchFocusEvent(t,e){const i=Object.assign({target:e.target||this,value:e.value,focused:e.focused,cursorPosition:e.cursorPosition,selectedText:e.selectedText},e);this.dispatchCustomEvent(t,i)}dispatchValidationEvent(t,e){var i;const s=Object.assign({target:e.target||this,value:e.value,isValid:null!==(i=e.isValid)&&void 0!==i&&i,error:e.error},e);this.dispatchCustomEvent(t,s)}dispatchActionEvent(t,e){const i=Object.assign({target:e.target||this,action:e.action,previousValue:e.previousValue,newValue:e.newValue},e);this.dispatchCustomEvent(t,i)}isReadonlyKeyAllowed(t){if(t.ctrlKey||t.metaKey){return["KeyA","KeyC"].includes(t.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)}isActivationKey(t){return"Enter"===t.key||" "===t.key}},p=new Set,u=new Map;
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
@@ -14,7 +14,7 @@ import{css as e,html as t,LitElement as i}from"lit";import{property as o,state a
  * 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`
+const v=t=>{class e extends t{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const t=this.constructor.useShadowDom;if(!t&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!t){const t=this.constructor,e=this.tagName.toLowerCase(),i=t.styles;if(i){const t=m(i);t&&function(t,e,i){var s;if(!u.has(t)){const i=new CSSStyleSheet;i.replaceSync(e),u.set(t,i)}const o=u.get(t),r=`doc:${t}`;if(p.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,o],p.add(r)),i){let e=i;for(;e;){const i=e.getRootNode();if(!(i instanceof ShadowRoot))break;{const r=`shadow:${((null===(s=i.host)||void 0===s?void 0:s.tagName)||"").toLowerCase()}:${t}`;p.has(r)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,o],p.add(r)),e=i.host}}}}(e,t,this)}}}get lightChildren(){return this.t?this.t.filter(t=>!(t instanceof Element&&t.hasAttribute("slot"))):[]}lightChildrenNamed(t){return this.t?this.t.filter(e=>e instanceof Element&&e.getAttribute("slot")===t):[]}}return e.useShadowDom=!1,e};function m(t){return Array.isArray(t)?t.map(t=>m(t)).filter(Boolean).join("\n"):t&&"string"==typeof t.cssText?t.cssText:"string"==typeof t?t:""}var b=t`
   :host {
     display: inline-block;
     box-sizing: border-box;
@@ -129,15 +129,15 @@ const v=e=>{class t extends e{constructor(){super(...arguments),this.t=null}crea
     from { opacity: 0; }
     to { opacity: 1; }
   }
-`,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)}>
+`,g=function(t,e,i,s){for(var o,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,a=t.length-1;a>=0;a--)(o=t[a])&&(n=(r<3?o(n):r>3?o(e,i,n):o(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n},w=function(t,e,i,s){return new(i||(i=Promise))(function(o,r){function n(t){try{d(s.next(t))}catch(t){r(t)}}function a(t){try{d(s.throw(t))}catch(t){r(t)}}function d(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i(function(t){t(e)})).then(n,a)}d((s=s.apply(t,e||[])).next())})};const f=()=>import("hls.js");let y=class extends((t=>l(d(c(v(t)))))(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+",this.hlsInstance=null,this.previewHlsInstance=null}get isHLS(){return!!this.src&&(this.src.endsWith(".m3u8")||this.src.includes(".m3u8?"))}disconnectedCallback(){super.disconnectedCallback(),this.destroyHls(),this.destroyPreviewHls()}updated(t){super.updated(t),t.has("src")&&this.src&&(this.hasError=!1,this.attachHlsIfNeeded())}destroyHls(){this.hlsInstance&&(this.hlsInstance.destroy(),this.hlsInstance=null)}destroyPreviewHls(){this.previewHlsInstance&&(this.previewHlsInstance.destroy(),this.previewHlsInstance=null)}attachHlsIfNeeded(){return w(this,void 0,void 0,function*(){var t;const e=null===(t=this.renderRoot)||void 0===t?void 0:t.querySelector('video[part="video"]');if(e&&this.isHLS)if(e.canPlayType("application/vnd.apple.mpegurl"))e.src=this.src;else try{const{default:t}=yield f();if(!t.isSupported())return void this.handleError();this.destroyHls();const i=new t({enableWorker:!0});this.hlsInstance=i,i.loadSource(this.src),i.attachMedia(e),i.on(t.Events.ERROR,(e,s)=>{if(s.fatal)switch(s.type){case t.ErrorTypes.NETWORK_ERROR:i.startLoad();break;case t.ErrorTypes.MEDIA_ERROR:i.recoverMediaError();break;default:this.handleError()}})}catch(t){e.src=this.src}else this.destroyHls()})}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}})),this.updateComplete.then(()=>this.attachPreviewHls()))}closePreviewModal(){this.showPreview=!1,this.destroyPreviewHls(),this.dispatchEvent(new CustomEvent("nr-video-preview-close",{bubbles:!0,composed:!0,detail:{src:this.src}}))}attachPreviewHls(){return w(this,void 0,void 0,function*(){var t;const e=null===(t=this.renderRoot)||void 0===t?void 0:t.querySelector('video[part="preview-video"]');if(e&&this.isHLS)if(e.canPlayType("application/vnd.apple.mpegurl"))e.src=this.src;else try{const{default:t}=yield f();if(!t.isSupported())return;this.destroyPreviewHls();const i=new t({enableWorker:!0});this.previewHlsInstance=i,i.loadSource(this.src),i.attachMedia(e)}catch(t){e.src=this.src}})}firstUpdated(){this.src&&this.attachHlsIfNeeded()}render(){const t={"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?e`
+        <div part="container" class=${n(t)}>
           <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>
-      `:t`
-      <div part="container" class=${n(e)}>
+      `:e`
+      <div part="container" class=${n(t)}>
         <video
           part="video"
           style=${a(i)}
@@ -152,10 +152,10 @@ const v=e=>{class t extends e{constructor(){super(...arguments),this.t=null}crea
           @pause=${this.handlePause}
           @ended=${this.handleEnded}
         >
-          <source src=${this.src} />
+          ${this.isHLS?"":e`<source src=${this.src} />`}
           Your browser does not support the video tag.
         </video>
-        ${this.previewable?t`
+        ${this.previewable?e`
           <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"/>
@@ -164,19 +164,20 @@ const v=e=>{class t extends e{constructor(){super(...arguments),this.t=null}crea
             Fullscreen
           </button>
         `:""}
-        ${this.showPreview?t`
+        ${this.showPreview?e`
           <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
+              part="preview-video"
               ?autoplay=${!0}
               ?loop=${this.loop}
               ?muted=${this.muted}
               controls
               poster=${this.poster||""}
             >
-              <source src=${this.src} />
+              ${this.isHLS?"":e`<source src=${this.src} />`}
             </video>
           </div>
         `:""}
       </div>
-    `}};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};
+    `}};y.styles=b,y.useShadowDom=!0,g([s({type:String})],y.prototype,"src",void 0),g([s({type:String})],y.prototype,"poster",void 0),g([s({type:String})],y.prototype,"width",void 0),g([s({type:String})],y.prototype,"height",void 0),g([s({type:Boolean})],y.prototype,"autoplay",void 0),g([s({type:Boolean})],y.prototype,"loop",void 0),g([s({type:Boolean})],y.prototype,"muted",void 0),g([s({type:Boolean})],y.prototype,"controls",void 0),g([s({type:String})],y.prototype,"preload",void 0),g([s({type:Boolean})],y.prototype,"previewable",void 0),g([s({type:Boolean,reflect:!0})],y.prototype,"block",void 0),g([o()],y.prototype,"showPreview",void 0),g([o()],y.prototype,"hasError",void 0),y=g([r("nr-video")],y);export{y as NrVideoElement};

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

@@ -2,7 +2,11 @@ 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) & (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.
+ * Video player component with poster, autoplay, loop, fullscreen preview, and HLS streaming support.
+ *
+ * When the `src` is an HLS manifest (.m3u8), the component automatically uses hls.js for
+ * adaptive bitrate streaming. Safari uses native HLS support. Falls back to a direct <source>
+ * for non-HLS sources.
  *
  * @csspart container - The root wrapper div of the video player
  * @csspart video - The native video element
@@ -28,12 +32,22 @@ export declare class NrVideoElement extends NrVideoElement_base {
     private showPreview;
     private hasError;
     private readonly defaultFallback;
+    private hlsInstance;
+    private previewHlsInstance;
+    private get isHLS();
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private destroyHls;
+    private destroyPreviewHls;
+    private attachHlsIfNeeded;
     private handleError;
     private handlePlay;
     private handlePause;
     private handleEnded;
     private showPreviewModal;
     private closePreviewModal;
+    private attachPreviewHls;
+    firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {