@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,261 @@
+import{css as e,LitElement as t,html as i,nothing as l}from"lit";import{property as r,customElement as n}from"lit/decorators.js";import{classMap as o}from"lit/directives/class-map.js";import{map as a}from"lit/directives/map.js";import{styleMap as m}from"lit/directives/style-map.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{NuralyUIBaseMixin as s}from"@nuralyui/common/mixins";
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */const c=e`
+  :host {
+    display: block;
+    font-family: var(--nuraly-font-family);
+    font-size: var(--nuraly-font-size-base, 14px);
+    line-height: 1.5715;
+    color: var(--nuraly-color-text);
+    min-height: 0;
+  }
+
+  .timeline {
+    margin: 0;
+    padding: 8px 0 0 8px;
+    list-style: none;
+  }
+
+  /* Timeline Item */
+  .timeline-item {
+    position: relative;
+    padding-bottom: var(--nuraly-timeline-item-padding-bottom, 20px);
+    list-style: none;
+  }
+
+  .timeline-item:last-child {
+    padding-bottom: 0;
+  }
+
+  /* Timeline Tail (connecting line) */
+  .timeline-item-tail {
+    position: absolute;
+    top: 10px;
+    left: 4px;
+    height: calc(100% - 10px);
+    border-left: var(--nuraly-timeline-tail-width, 2px) solid var(--nuraly-timeline-tail-color, rgba(5, 5, 5, 0.06));
+  }
+
+  .timeline-item:last-child .timeline-item-tail {
+    display: none;
+  }
+
+  .timeline-item.pending .timeline-item-tail {
+    display: block;
+  }
+
+  /* Timeline Head (dot container) */
+  .timeline-item-head {
+    position: absolute;
+    top: 5.5px;
+    left: 0;
+    width: 10px;
+    height: 10px;
+    background-color: var(--nuraly-timeline-dot-bg, #ffffff);
+    border: var(--nuraly-timeline-dot-border-width, 2px) solid transparent;
+    border-radius: 50%;
+  }
+
+  /* Timeline Head Colors */
+  .timeline-item-head.blue {
+    border-color: var(--nuraly-color-primary, #1890ff);
+  }
+
+  .timeline-item-head.red {
+    border-color: var(--nuraly-color-error, #ff4d4f);
+  }
+
+  .timeline-item-head.green {
+    border-color: var(--nuraly-color-success, #52c41a);
+  }
+
+  .timeline-item-head.gray {
+    border-color: var(--nuraly-color-text-disabled, #d9d9d9);
+  }
+
+  /* Custom Head (with icon or custom content) */
+  .timeline-item-head-custom {
+    position: absolute;
+    top: 5.5px;
+    left: 0;
+    width: auto;
+    height: auto;
+    margin-top: 0;
+    padding: 3px 1px;
+    line-height: 1;
+    text-align: center;
+    border: 0;
+    border-radius: 0;
+    transform: translate(-50%, -50%);
+    top: 10px;
+    left: 5px;
+  }
+
+  .timeline-item-head-custom nr-icon {
+    font-size: 16px;
+    vertical-align: middle;
+  }
+
+  /* Timeline Content */
+  .timeline-item-content {
+    position: relative;
+    margin: 0 0 0 26px;
+    word-break: break-word;
+  }
+
+  /* Timeline Label */
+  .timeline-item-label {
+    position: absolute;
+    top: calc(-1 * var(--nuraly-font-size-base, 14px) * 1.5715 / 2);
+    width: calc(50% - 12px);
+    text-align: right;
+    color: var(--nuraly-color-text-secondary, rgba(0, 0, 0, 0.45));
+  }
+
+  /* Pending Item */
+  .timeline-item.pending .timeline-item-head {
+    border-color: var(--nuraly-color-primary, #1890ff);
+  }
+
+  .timeline-item.pending .timeline-item-content {
+    color: var(--nuraly-color-text-secondary, rgba(0, 0, 0, 0.45));
+  }
+
+  /* Right Mode */
+  :host([mode="right"]) .timeline-item-tail {
+    left: auto;
+    right: 4px;
+  }
+
+  :host([mode="right"]) .timeline-item-head,
+  :host([mode="right"]) .timeline-item-head-custom {
+    left: auto;
+    right: 0;
+  }
+
+  :host([mode="right"]) .timeline-item-head-custom {
+    right: 5px;
+  }
+
+  :host([mode="right"]) .timeline-item-content {
+    margin: 0 26px 0 0;
+    text-align: right;
+  }
+
+  /* Alternate Mode */
+  :host([mode="alternate"]) .timeline,
+  :host([mode="alternate"]) .timeline-item {
+    display: block;
+  }
+
+  :host([mode="alternate"]) .timeline-item-tail,
+  :host([mode="alternate"]) .timeline-item-head,
+  :host([mode="alternate"]) .timeline-item-head-custom {
+    left: 50%;
+    margin-left: -1px;
+  }
+
+  :host([mode="alternate"]) .timeline-item-head {
+    margin-left: -5px;
+  }
+
+  :host([mode="alternate"]) .timeline-item-head-custom {
+    margin-left: -5px;
+  }
+
+  :host([mode="alternate"]) .timeline-item-left .timeline-item-content {
+    left: calc(50% - 4px);
+    width: calc(50% - 14px);
+    text-align: left;
+  }
+
+  :host([mode="alternate"]) .timeline-item-right .timeline-item-content {
+    left: auto;
+    right: calc(50% - 4px);
+    width: calc(50% - 14px);
+    text-align: right;
+  }
+
+  /* Alternate with Label */
+  :host([mode="alternate"]) .timeline-item-left .timeline-item-label {
+    left: calc(50% + 14px);
+    width: calc(50% - 14px);
+    text-align: left;
+  }
+
+  :host([mode="alternate"]) .timeline-item-right .timeline-item-label {
+    right: calc(50% + 14px);
+    width: calc(50% - 14px);
+    text-align: right;
+  }
+
+  /* Reverse Mode */
+  :host([reverse]) .timeline {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  /* RTL Support */
+  :host([dir="rtl"]) .timeline-item-tail {
+    left: auto;
+    right: 4px;
+  }
+
+  :host([dir="rtl"]) .timeline-item-head,
+  :host([dir="rtl"]) .timeline-item-head-custom {
+    left: auto;
+    right: 0;
+  }
+
+  :host([dir="rtl"]) .timeline-item-content {
+    margin: 0 26px 0 0;
+  }
+
+  :host([dir="rtl"]) .timeline-item-label {
+    text-align: left;
+  }
+
+  /* Dark theme support */
+  :host([data-theme*="dark"]) .timeline-item-tail {
+    border-color: var(--nuraly-timeline-tail-color, rgba(255, 255, 255, 0.12));
+  }
+`
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */;var h=function(e,t,i,l){for(var r,n=arguments.length,o=n<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,i):l,a=e.length-1;a>=0;a--)(r=e[a])&&(o=(n<3?r(o):n>3?r(t,i,o):r(t,i))||o);return n>3&&o&&Object.defineProperty(t,i,o),o};let p=class extends(s(t)){constructor(){super(...arguments),this.requiredComponents=["nr-icon"],this.mode="left",this.items=[],this.reverse=!1}getItemPosition(e,t){return"alternate"!==this.mode?"left":e.position?e.position:t%2==0?"left":"right"}isPresetColor(e){if(!e)return!1;return["blue","red","green","gray"].includes(e)}getCustomColorStyle(e){return!e||this.isPresetColor(e)?{}:{borderColor:e}}renderDot(e){const t=!!e.dot,l=e.color||"blue",r=this.isPresetColor(l);if(t)return i`
+        <div class="timeline-item-head-custom">
+          <nr-icon name="${d(e.dot)}"></nr-icon>
+        </div>
+      `;const n={"timeline-item-head":!0,[l]:r},a=this.getCustomColorStyle(l);return i`
+      <div class=${o(n)} style=${m(a)}></div>
+    `}renderItem(e,t){const r=this.getItemPosition(e,t),n={"timeline-item":!0,"timeline-item-left":"left"===r,"timeline-item-right":"right"===r,[e.className||""]:!!e.className};return i`
+      <li class=${o(n)}>
+        <div class="timeline-item-tail"></div>
+        ${this.renderDot(e)}
+        <div class="timeline-item-content">
+          ${e.label&&"alternate"===this.mode?i`<div class="timeline-item-label">${e.label}</div>`:l}
+          <div>${e.children}</div>
+          ${e.label&&"alternate"!==this.mode?i`<div style="color: var(--nuraly-color-text-secondary); margin-top: 4px;">${e.label}</div>`:l}
+        </div>
+      </li>
+    `}renderPendingItem(){const e="string"==typeof this.pending?this.pending:"Loading...",t=this.pendingDot||"loading";return i`
+      <li class="timeline-item pending">
+        <div class="timeline-item-tail"></div>
+        <div class="timeline-item-head-custom">
+          <nr-icon name="${t}"></nr-icon>
+        </div>
+        <div class="timeline-item-content">
+          ${e}
+        </div>
+      </li>
+    `}render(){return this.items&&0!==this.items.length?i`
+      <ul class="timeline">
+        ${a(this.items,(e,t)=>this.renderItem(e,t))}
+        ${this.pending?this.renderPendingItem():l}
+      </ul>
+    `:l}};p.styles=c,h([r({type:String,reflect:!0})],p.prototype,"mode",void 0),h([r({type:Array})],p.prototype,"items",void 0),h([r({type:String})],p.prototype,"pending",void 0),h([r({type:String,attribute:"pending-dot"})],p.prototype,"pendingDot",void 0),h([r({type:Boolean,reflect:!0})],p.prototype,"reverse",void 0),p=h([n("nr-timeline")],p);export{p as NrTimelineElement};

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

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

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

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

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

@@ -0,0 +1,3 @@
+import { NrTimelineElement } from './timeline.component.js';
+export declare const NrTimeline: import("@lit-labs/react").ReactWebComponent<NrTimelineElement, {}>;
+//# sourceMappingURL=react.d.ts.map

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

@@ -0,0 +1,10 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrTimelineElement } from './timeline.component.js';
+export const NrTimeline = createComponent({
+    tagName: 'nr-timeline',
+    elementClass: NrTimelineElement,
+    react: React,
+    events: {},
+});
+//# sourceMappingURL=react.js.map

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

@@ -0,0 +1,109 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, nothing, TemplateResult } from 'lit';
+import { TimelineMode, TimelineItem } from './timeline.types.js';
+declare const NrTimelineElement_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;
+/**
+ * # Timeline Component
+ *
+ * Vertical display timeline for showing a series of events in chronological order.
+ *
+ * ## Features
+ * - Multiple display modes (left, right, alternate)
+ * - Custom dot colors and icons
+ * - Label support for timestamps
+ * - Pending state for ongoing activities
+ * - Reverse order option
+ * - Custom positioning in alternate mode
+ * - Theme-aware styling
+ *
+ * ## Usage
+ * ```html
+ * <!-- Basic timeline -->
+ * <nr-timeline .items="${[
+ *   { children: 'Create a services site', label: '2015-09-01' },
+ *   { children: 'Solve initial network problems', label: '2015-09-01' },
+ *   { children: 'Technical testing', label: '2015-09-01' }
+ * ]}"></nr-timeline>
+ *
+ * <!-- With custom colors -->
+ * <nr-timeline .items="${[
+ *   { children: 'Success', color: 'green' },
+ *   { children: 'Error', color: 'red' },
+ *   { children: 'Processing', color: 'blue' }
+ * ]}"></nr-timeline>
+ *
+ * <!-- Alternate mode -->
+ * <nr-timeline mode="alternate" .items="${items}"></nr-timeline>
+ *
+ * <!-- With pending state -->
+ * <nr-timeline pending="Recording..." .items="${items}"></nr-timeline>
+ * ```
+ *
+ * @element nr-timeline
+ *
+ * @cssproperty --nuraly-timeline-item-padding-bottom - Bottom padding of timeline item
+ * @cssproperty --nuraly-timeline-tail-width - Width of connecting line
+ * @cssproperty --nuraly-timeline-tail-color - Color of connecting line
+ * @cssproperty --nuraly-timeline-dot-bg - Background color of dot
+ * @cssproperty --nuraly-timeline-dot-border-width - Border width of dot
+ */
+export declare class NrTimelineElement extends NrTimelineElement_base {
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    /**
+     * Timeline display mode
+     */
+    mode: TimelineMode;
+    /**
+     * Timeline items array
+     */
+    items: TimelineItem[];
+    /**
+     * Pending state - shows a pending item at the end
+     */
+    pending?: string;
+    /**
+     * Custom pending dot icon
+     */
+    pendingDot?: string;
+    /**
+     * Reverse timeline order
+     */
+    reverse: boolean;
+    /**
+     * Get item position for alternate mode
+     */
+    private getItemPosition;
+    /**
+     * Check if color is a preset color
+     */
+    private isPresetColor;
+    /**
+     * Get custom color style for dot
+     */
+    private getCustomColorStyle;
+    /**
+     * Render timeline item dot
+     */
+    private renderDot;
+    /**
+     * Render timeline item
+     */
+    private renderItem;
+    /**
+     * Render pending item
+     */
+    private renderPendingItem;
+    render(): typeof nothing | TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-timeline': NrTimelineElement;
+    }
+}
+export {};
+//# sourceMappingURL=timeline.component.d.ts.map

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

@@ -0,0 +1,214 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, 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 { html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { map } from 'lit/directives/map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { styles } from './timeline.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+/**
+ * # Timeline Component
+ *
+ * Vertical display timeline for showing a series of events in chronological order.
+ *
+ * ## Features
+ * - Multiple display modes (left, right, alternate)
+ * - Custom dot colors and icons
+ * - Label support for timestamps
+ * - Pending state for ongoing activities
+ * - Reverse order option
+ * - Custom positioning in alternate mode
+ * - Theme-aware styling
+ *
+ * ## Usage
+ * ```html
+ * <!-- Basic timeline -->
+ * <nr-timeline .items="${[
+ *   { children: 'Create a services site', label: '2015-09-01' },
+ *   { children: 'Solve initial network problems', label: '2015-09-01' },
+ *   { children: 'Technical testing', label: '2015-09-01' }
+ * ]}"></nr-timeline>
+ *
+ * <!-- With custom colors -->
+ * <nr-timeline .items="${[
+ *   { children: 'Success', color: 'green' },
+ *   { children: 'Error', color: 'red' },
+ *   { children: 'Processing', color: 'blue' }
+ * ]}"></nr-timeline>
+ *
+ * <!-- Alternate mode -->
+ * <nr-timeline mode="alternate" .items="${items}"></nr-timeline>
+ *
+ * <!-- With pending state -->
+ * <nr-timeline pending="Recording..." .items="${items}"></nr-timeline>
+ * ```
+ *
+ * @element nr-timeline
+ *
+ * @cssproperty --nuraly-timeline-item-padding-bottom - Bottom padding of timeline item
+ * @cssproperty --nuraly-timeline-tail-width - Width of connecting line
+ * @cssproperty --nuraly-timeline-tail-color - Color of connecting line
+ * @cssproperty --nuraly-timeline-dot-bg - Background color of dot
+ * @cssproperty --nuraly-timeline-dot-border-width - Border width of dot
+ */
+let NrTimelineElement = class NrTimelineElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-icon'];
+        /**
+         * Timeline display mode
+         */
+        this.mode = "left" /* TimelineMode.Left */;
+        /**
+         * Timeline items array
+         */
+        this.items = [];
+        /**
+         * Reverse timeline order
+         */
+        this.reverse = false;
+    }
+    /**
+     * Get item position for alternate mode
+     */
+    getItemPosition(item, index) {
+        if (this.mode !== "alternate" /* TimelineMode.Alternate */) {
+            return "left" /* TimelineItemPosition.Left */;
+        }
+        if (item.position) {
+            return item.position;
+        }
+        return index % 2 === 0 ? "left" /* TimelineItemPosition.Left */ : "right" /* TimelineItemPosition.Right */;
+    }
+    /**
+     * Check if color is a preset color
+     */
+    isPresetColor(color) {
+        if (!color)
+            return false;
+        const presetColors = ['blue', 'red', 'green', 'gray'];
+        return presetColors.includes(color);
+    }
+    /**
+     * Get custom color style for dot
+     */
+    getCustomColorStyle(color) {
+        if (!color || this.isPresetColor(color)) {
+            return {};
+        }
+        return {
+            borderColor: color,
+        };
+    }
+    /**
+     * Render timeline item dot
+     */
+    renderDot(item) {
+        const hasCustomDot = !!item.dot;
+        const color = item.color || "blue" /* TimelineItemColor.Blue */;
+        const isPreset = this.isPresetColor(color);
+        if (hasCustomDot) {
+            return html `
+        <div class="timeline-item-head-custom">
+          <nr-icon name="${ifDefined(item.dot)}"></nr-icon>
+        </div>
+      `;
+        }
+        const headClasses = {
+            'timeline-item-head': true,
+            [color]: isPreset,
+        };
+        const headStyle = this.getCustomColorStyle(color);
+        return html `
+      <div class=${classMap(headClasses)} style=${styleMap(headStyle)}></div>
+    `;
+    }
+    /**
+     * Render timeline item
+     */
+    renderItem(item, index) {
+        const position = this.getItemPosition(item, index);
+        const itemClasses = {
+            'timeline-item': true,
+            'timeline-item-left': position === "left" /* TimelineItemPosition.Left */,
+            'timeline-item-right': position === "right" /* TimelineItemPosition.Right */,
+            [item.className || '']: !!item.className,
+        };
+        return html `
+      <li class=${classMap(itemClasses)}>
+        <div class="timeline-item-tail"></div>
+        ${this.renderDot(item)}
+        <div class="timeline-item-content">
+          ${item.label && this.mode === "alternate" /* TimelineMode.Alternate */
+            ? html `<div class="timeline-item-label">${item.label}</div>`
+            : nothing}
+          <div>${item.children}</div>
+          ${item.label && this.mode !== "alternate" /* TimelineMode.Alternate */
+            ? html `<div style="color: var(--nuraly-color-text-secondary); margin-top: 4px;">${item.label}</div>`
+            : nothing}
+        </div>
+      </li>
+    `;
+    }
+    /**
+     * Render pending item
+     */
+    renderPendingItem() {
+        const pendingContent = typeof this.pending === 'string' ? this.pending : 'Loading...';
+        const pendingIconName = this.pendingDot || 'loading';
+        return html `
+      <li class="timeline-item pending">
+        <div class="timeline-item-tail"></div>
+        <div class="timeline-item-head-custom">
+          <nr-icon name="${pendingIconName}"></nr-icon>
+        </div>
+        <div class="timeline-item-content">
+          ${pendingContent}
+        </div>
+      </li>
+    `;
+    }
+    render() {
+        if (!this.items || this.items.length === 0) {
+            return nothing;
+        }
+        return html `
+      <ul class="timeline">
+        ${map(this.items, (item, index) => this.renderItem(item, index))}
+        ${this.pending ? this.renderPendingItem() : nothing}
+      </ul>
+    `;
+    }
+};
+NrTimelineElement.styles = styles;
+__decorate([
+    property({ type: String, reflect: true })
+], NrTimelineElement.prototype, "mode", void 0);
+__decorate([
+    property({ type: Array })
+], NrTimelineElement.prototype, "items", void 0);
+__decorate([
+    property({ type: String })
+], NrTimelineElement.prototype, "pending", void 0);
+__decorate([
+    property({ type: String, attribute: 'pending-dot' })
+], NrTimelineElement.prototype, "pendingDot", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrTimelineElement.prototype, "reverse", void 0);
+NrTimelineElement = __decorate([
+    customElement('nr-timeline')
+], NrTimelineElement);
+export { NrTimelineElement };
+//# sourceMappingURL=timeline.component.js.map

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

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Timeline component styles for the Hybrid UI Library
+ * Using shared CSS variables from /src/shared/themes/
+ *
+ * This file contains all the styling for the nr-timeline component with
+ * clean CSS variable usage without local fallbacks and proper theme switching support.
+ */
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=timeline.style.d.ts.map