@nuralyui/timeline 0.0.5 → 0.0.6
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.
- package/bundle.js +3 -3
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/react.js.map +1 -1
- package/timeline.component.js.map +1 -1
- package/timeline.style.js +2 -2
- package/timeline.style.js.map +1 -1
- package/timeline.types.js.map +1 -1
package/bundle.js
CHANGED
|
@@ -10,11 +10,12 @@ import{css as e,LitElement as t,html as i,nothing as l}from"lit";import{property
|
|
|
10
10
|
font-size: var(--nuraly-font-size-base, 14px);
|
|
11
11
|
line-height: 1.5715;
|
|
12
12
|
color: var(--nuraly-color-text);
|
|
13
|
+
min-height: 0;
|
|
13
14
|
}
|
|
14
15
|
|
|
15
16
|
.timeline {
|
|
16
17
|
margin: 0;
|
|
17
|
-
padding: 0;
|
|
18
|
+
padding: 8px 0 0 8px;
|
|
18
19
|
list-style: none;
|
|
19
20
|
}
|
|
20
21
|
|
|
@@ -101,7 +102,6 @@ import{css as e,LitElement as t,html as i,nothing as l}from"lit";import{property
|
|
|
101
102
|
/* Timeline Content */
|
|
102
103
|
.timeline-item-content {
|
|
103
104
|
position: relative;
|
|
104
|
-
top: calc(-1 * var(--nuraly-font-size-base, 14px) * 1.5715 - 2px);
|
|
105
105
|
margin: 0 0 0 26px;
|
|
106
106
|
word-break: break-word;
|
|
107
107
|
}
|
|
@@ -255,7 +255,7 @@ import{css as e,LitElement as t,html as i,nothing as l}from"lit";import{property
|
|
|
255
255
|
</li>
|
|
256
256
|
`}render(){return this.items&&0!==this.items.length?i`
|
|
257
257
|
<ul class="timeline">
|
|
258
|
-
${a(this.items,(
|
|
258
|
+
${a(this.items,(e,t)=>this.renderItem(e,t))}
|
|
259
259
|
${this.pending?this.renderPendingItem():l}
|
|
260
260
|
</ul>
|
|
261
261
|
`: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/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/timeline/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './timeline.component.js';\n"]}
|
package/package.json
CHANGED
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/timeline/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC;IACxC,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,iBAAiB;IAC/B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE;CACX,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrTimelineElement } from './timeline.component.js';\nexport const NrTimeline = createComponent({\n tagName: 'nr-timeline',\n elementClass: NrTimelineElement,\n react: React,\n events: {},\n});\n"]}
|
|
@@ -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';\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"]}
|
package/timeline.style.js
CHANGED
|
@@ -18,11 +18,12 @@ export const styles = css `
|
|
|
18
18
|
font-size: var(--nuraly-font-size-base, 14px);
|
|
19
19
|
line-height: 1.5715;
|
|
20
20
|
color: var(--nuraly-color-text);
|
|
21
|
+
min-height: 0;
|
|
21
22
|
}
|
|
22
23
|
|
|
23
24
|
.timeline {
|
|
24
25
|
margin: 0;
|
|
25
|
-
padding: 0;
|
|
26
|
+
padding: 8px 0 0 8px;
|
|
26
27
|
list-style: none;
|
|
27
28
|
}
|
|
28
29
|
|
|
@@ -109,7 +110,6 @@ export const styles = css `
|
|
|
109
110
|
/* Timeline Content */
|
|
110
111
|
.timeline-item-content {
|
|
111
112
|
position: relative;
|
|
112
|
-
top: calc(-1 * var(--nuraly-font-size-base, 14px) * 1.5715 - 2px);
|
|
113
113
|
margin: 0 0 0 26px;
|
|
114
114
|
word-break: break-word;
|
|
115
115
|
}
|
package/timeline.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timeline.style.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"timeline.style.js","sourceRoot":"","sources":["../../../../src/components/timeline/timeline.style.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2NxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { css } from 'lit';\n\n/**\n * Timeline component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-timeline component with\n * clean CSS variable usage without local fallbacks and proper theme switching support.\n */\nexport const styles = css`\n :host {\n display: block;\n font-family: var(--nuraly-font-family);\n font-size: var(--nuraly-font-size-base, 14px);\n line-height: 1.5715;\n color: var(--nuraly-color-text);\n min-height: 0;\n }\n\n .timeline {\n margin: 0;\n padding: 8px 0 0 8px;\n list-style: none;\n }\n\n /* Timeline Item */\n .timeline-item {\n position: relative;\n padding-bottom: var(--nuraly-timeline-item-padding-bottom, 20px);\n list-style: none;\n }\n\n .timeline-item:last-child {\n padding-bottom: 0;\n }\n\n /* Timeline Tail (connecting line) */\n .timeline-item-tail {\n position: absolute;\n top: 10px;\n left: 4px;\n height: calc(100% - 10px);\n border-left: var(--nuraly-timeline-tail-width, 2px) solid var(--nuraly-timeline-tail-color, rgba(5, 5, 5, 0.06));\n }\n\n .timeline-item:last-child .timeline-item-tail {\n display: none;\n }\n\n .timeline-item.pending .timeline-item-tail {\n display: block;\n }\n\n /* Timeline Head (dot container) */\n .timeline-item-head {\n position: absolute;\n top: 5.5px;\n left: 0;\n width: 10px;\n height: 10px;\n background-color: var(--nuraly-timeline-dot-bg, #ffffff);\n border: var(--nuraly-timeline-dot-border-width, 2px) solid transparent;\n border-radius: 50%;\n }\n\n /* Timeline Head Colors */\n .timeline-item-head.blue {\n border-color: var(--nuraly-color-primary, #1890ff);\n }\n\n .timeline-item-head.red {\n border-color: var(--nuraly-color-error, #ff4d4f);\n }\n\n .timeline-item-head.green {\n border-color: var(--nuraly-color-success, #52c41a);\n }\n\n .timeline-item-head.gray {\n border-color: var(--nuraly-color-text-disabled, #d9d9d9);\n }\n\n /* Custom Head (with icon or custom content) */\n .timeline-item-head-custom {\n position: absolute;\n top: 5.5px;\n left: 0;\n width: auto;\n height: auto;\n margin-top: 0;\n padding: 3px 1px;\n line-height: 1;\n text-align: center;\n border: 0;\n border-radius: 0;\n transform: translate(-50%, -50%);\n top: 10px;\n left: 5px;\n }\n\n .timeline-item-head-custom nr-icon {\n font-size: 16px;\n vertical-align: middle;\n }\n\n /* Timeline Content */\n .timeline-item-content {\n position: relative;\n margin: 0 0 0 26px;\n word-break: break-word;\n }\n\n /* Timeline Label */\n .timeline-item-label {\n position: absolute;\n top: calc(-1 * var(--nuraly-font-size-base, 14px) * 1.5715 / 2);\n width: calc(50% - 12px);\n text-align: right;\n color: var(--nuraly-color-text-secondary, rgba(0, 0, 0, 0.45));\n }\n\n /* Pending Item */\n .timeline-item.pending .timeline-item-head {\n border-color: var(--nuraly-color-primary, #1890ff);\n }\n\n .timeline-item.pending .timeline-item-content {\n color: var(--nuraly-color-text-secondary, rgba(0, 0, 0, 0.45));\n }\n\n /* Right Mode */\n :host([mode=\"right\"]) .timeline-item-tail {\n left: auto;\n right: 4px;\n }\n\n :host([mode=\"right\"]) .timeline-item-head,\n :host([mode=\"right\"]) .timeline-item-head-custom {\n left: auto;\n right: 0;\n }\n\n :host([mode=\"right\"]) .timeline-item-head-custom {\n right: 5px;\n }\n\n :host([mode=\"right\"]) .timeline-item-content {\n margin: 0 26px 0 0;\n text-align: right;\n }\n\n /* Alternate Mode */\n :host([mode=\"alternate\"]) .timeline,\n :host([mode=\"alternate\"]) .timeline-item {\n display: block;\n }\n\n :host([mode=\"alternate\"]) .timeline-item-tail,\n :host([mode=\"alternate\"]) .timeline-item-head,\n :host([mode=\"alternate\"]) .timeline-item-head-custom {\n left: 50%;\n margin-left: -1px;\n }\n\n :host([mode=\"alternate\"]) .timeline-item-head {\n margin-left: -5px;\n }\n\n :host([mode=\"alternate\"]) .timeline-item-head-custom {\n margin-left: -5px;\n }\n\n :host([mode=\"alternate\"]) .timeline-item-left .timeline-item-content {\n left: calc(50% - 4px);\n width: calc(50% - 14px);\n text-align: left;\n }\n\n :host([mode=\"alternate\"]) .timeline-item-right .timeline-item-content {\n left: auto;\n right: calc(50% - 4px);\n width: calc(50% - 14px);\n text-align: right;\n }\n\n /* Alternate with Label */\n :host([mode=\"alternate\"]) .timeline-item-left .timeline-item-label {\n left: calc(50% + 14px);\n width: calc(50% - 14px);\n text-align: left;\n }\n\n :host([mode=\"alternate\"]) .timeline-item-right .timeline-item-label {\n right: calc(50% + 14px);\n width: calc(50% - 14px);\n text-align: right;\n }\n\n /* Reverse Mode */\n :host([reverse]) .timeline {\n display: flex;\n flex-direction: column-reverse;\n }\n\n /* RTL Support */\n :host([dir=\"rtl\"]) .timeline-item-tail {\n left: auto;\n right: 4px;\n }\n\n :host([dir=\"rtl\"]) .timeline-item-head,\n :host([dir=\"rtl\"]) .timeline-item-head-custom {\n left: auto;\n right: 0;\n }\n\n :host([dir=\"rtl\"]) .timeline-item-content {\n margin: 0 26px 0 0;\n }\n\n :host([dir=\"rtl\"]) .timeline-item-label {\n text-align: left;\n }\n\n /* Dark theme support */\n :host([data-theme*=\"dark\"]) .timeline-item-tail {\n border-color: var(--nuraly-timeline-tail-color, rgba(255, 255, 255, 0.12));\n }\n`;\n"]}
|
package/timeline.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timeline.types.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"timeline.types.js","sourceRoot":"","sources":["../../../../src/components/timeline/timeline.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * Timeline mode variants\n */\nexport const enum TimelineMode {\n Left = 'left',\n Right = 'right',\n Alternate = 'alternate',\n}\n\n/**\n * Timeline item color presets\n */\nexport const enum TimelineItemColor {\n Blue = 'blue',\n Red = 'red',\n Green = 'green',\n Gray = 'gray',\n}\n\n/**\n * Timeline item position (used in alternate mode)\n */\nexport const enum TimelineItemPosition {\n Left = 'left',\n Right = 'right',\n}\n\n/**\n * Timeline item interface\n */\nexport interface TimelineItem {\n /** Item content */\n children: string;\n \n /** Optional label (timestamp, date, etc.) */\n label?: string;\n \n /** Dot color (preset or custom hex/rgb) */\n color?: TimelineItemColor | string;\n \n /** Custom dot content (icon name or custom element) */\n dot?: string;\n \n /** Custom position in alternate mode */\n position?: TimelineItemPosition;\n \n /** Custom class name */\n className?: string;\n}\n\n/**\n * Timeline configuration interface\n */\nexport interface TimelineConfig {\n /** Timeline mode (left, right, alternate) */\n mode?: TimelineMode;\n \n /** Timeline items */\n items: TimelineItem[];\n \n /** Pending state content */\n pending?: string | boolean;\n \n /** Custom pending dot */\n pendingDot?: string;\n \n /** Reverse the timeline order */\n reverse?: boolean;\n}\n"]}
|