npm - @nuralyui/timeline - Versions diffs - 0.0.2 → 0.0.4 - Mend

@nuralyui/timeline 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/timeline",
-    "version": "0.0.2",
+    "version": "0.0.4",
     "description": "Timeline component for NuralyUI library",
     "main": "index.js",
     "type": "module",

package/timeline.component.d.ts CHANGED Viewed

@@ -5,7 +5,6 @@
  */
 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("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
 /**
  * # Timeline Component
@@ -99,7 +98,7 @@ export declare class NrTimelineElement extends NrTimelineElement_base {
      * Render pending item
      */
     private renderPendingItem;
-    render(): TemplateResult<1> | typeof nothing;
+    render(): typeof nothing | TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/timeline.component.js CHANGED Viewed

@@ -17,7 +17,6 @@ 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';
-import '../icon/index.js';
 /**
  * # Timeline Component
  *

package/timeline.component.js.map CHANGED Viewed

	@@ -1 +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 '@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"]}
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 '@nuralyui/common/mixins';\nimport {\n TimelineMode,\n TimelineItem,\n TimelineItemColor,\n TimelineItemPosition\n} from './timeline.types.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"]}