@nuralyui/timeline 0.0.1 → 0.0.2

package/bundle.js

@@ -461,7 +461,7 @@ const Kc="important",Xc=" !"+Kc,Qc=$c(class extends _c{constructor(c){var a;if(s
     
     /* Size properties with fallbacks */
     --nuraly-icon-size-fallback: 18px;
-    --nuraly-icon-size-small-fallback: 16px;
+    --nuraly-icon-size-small-fallback: 14px;
     --nuraly-icon-size-medium-fallback: 20px;
     --nuraly-icon-size-large-fallback: 24px;
     --nuraly-icon-size-xlarge-fallback: 32px;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/timeline",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "Timeline component for NuralyUI library",
     "main": "index.js",
     "type": "module",
@@ -24,7 +24,7 @@
     },
     "repository": {
         "type": "git",
-        "url": "https://github.com/NuralyUI/NuralyUI.git",
+        "url": "https://github.com/Nuralyio/NuralyUI.git",
         "directory": "src/components/timeline"
     },
     "keywords": [
@@ -41,7 +41,7 @@
     "author": "Nuraly, Laabidi Aymen",
     "license": "MIT",
     "bugs": {
-        "url": "https://github.com/NuralyUI/NuralyUI/issues"
+        "url": "https://github.com/Nuralyio/NuralyUI/issues"
     },
-    "homepage": "https://github.com/NuralyUI/NuralyUI#readme"
+    "homepage": "https://github.com/Nuralyio/NuralyUI#readme"
 }

package/timeline.component.d.ts

@@ -6,7 +6,7 @@
 import { LitElement, nothing, TemplateResult } from 'lit';
 import { TimelineMode, TimelineItem } from './timeline.types.js';
 import '../icon/index.js';
-declare const NrTimelineElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+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
  *

package/timeline.component.js

@@ -16,7 +16,7 @@ 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 '../../shared/base-mixin.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import '../icon/index.js';
 /**
  * # Timeline Component

package/timeline.component.js.map

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