@nuralyui/timeline 0.0.1

package/timeline.style.js.map

@@ -0,0 +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  }\n\n  .timeline {\n    margin: 0;\n    padding: 0;\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    top: calc(-1 * var(--nuraly-font-size-base, 14px) * 1.5715 - 2px);\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.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Timeline mode variants
+ */
+export declare const enum TimelineMode {
+    Left = "left",
+    Right = "right",
+    Alternate = "alternate"
+}
+/**
+ * Timeline item color presets
+ */
+export declare const enum TimelineItemColor {
+    Blue = "blue",
+    Red = "red",
+    Green = "green",
+    Gray = "gray"
+}
+/**
+ * Timeline item position (used in alternate mode)
+ */
+export declare const enum TimelineItemPosition {
+    Left = "left",
+    Right = "right"
+}
+/**
+ * Timeline item interface
+ */
+export interface TimelineItem {
+    /** Item content */
+    children: string;
+    /** Optional label (timestamp, date, etc.) */
+    label?: string;
+    /** Dot color (preset or custom hex/rgb) */
+    color?: TimelineItemColor | string;
+    /** Custom dot content (icon name or custom element) */
+    dot?: string;
+    /** Custom position in alternate mode */
+    position?: TimelineItemPosition;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Timeline configuration interface
+ */
+export interface TimelineConfig {
+    /** Timeline mode (left, right, alternate) */
+    mode?: TimelineMode;
+    /** Timeline items */
+    items: TimelineItem[];
+    /** Pending state content */
+    pending?: string | boolean;
+    /** Custom pending dot */
+    pendingDot?: string;
+    /** Reverse the timeline order */
+    reverse?: boolean;
+}
+//# sourceMappingURL=timeline.types.d.ts.map

package/timeline.types.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=timeline.types.js.map

package/timeline.types.js.map

@@ -0,0 +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"]}