@vadem/ui 0.0.0-stage → 0.0.1

package/fesm2022/vadem-ui-timeline.mjs

@@ -0,0 +1,313 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ViewEncapsulation, computed, input } from "@angular/core";
+import { VdIcon } from "@vadem/ui/icon";
+import { vdTexts } from "@vadem/ui/locale";
+const STATUS = {
+	neutral: {
+		label: "Event",
+		icon: null
+	},
+	success: {
+		label: "Completed",
+		icon: "check"
+	},
+	warning: {
+		label: "Attention required",
+		icon: "alert-triangle"
+	},
+	danger: {
+		label: "Error",
+		icon: "x"
+	},
+	info: {
+		label: "Update",
+		icon: "info"
+	}
+};
+var VdTimeline = class VdTimeline {
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	t = vdTexts("timeline", { label: this.label });
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdTimeline,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdTimeline,
+		isStandalone: true,
+		selector: "ol[vdTimeline]",
+		inputs: { label: {
+			classPropertyName: "label",
+			publicName: "label",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "role": "list" },
+			properties: { "attr.aria-label": "t().label" },
+			classAttribute: "vd-timeline"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdTimeline,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ol[vdTimeline]",
+			host: {
+				class: "vd-timeline",
+				role: "list",
+				"[attr.aria-label]": "t().label"
+			}
+		}]
+	}],
+	propDecorators: { label: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "label",
+			required: false
+		}]
+	}] }
+});
+var VdTimelineItem = class VdTimelineItem {
+	status = input("neutral", ...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
+	statusLabel = input(...ngDevMode ? [void 0, { debugName: "statusLabel" }] : /* istanbul ignore next */ []);
+	icon = computed(() => STATUS[this.status()].icon, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	resolvedLabel = computed(() => this.statusLabel()?.trim() || STATUS[this.status()].label, ...ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdTimelineItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdTimelineItem,
+		isStandalone: true,
+		selector: "li[vdTimelineItem]",
+		inputs: {
+			status: {
+				classPropertyName: "status",
+				publicName: "status",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			statusLabel: {
+				classPropertyName: "statusLabel",
+				publicName: "statusLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: { "attr.data-status": "status()" },
+			classAttribute: "vd-timeline-item"
+		},
+		ngImport: i0,
+		template: `
+    <span class="vd-timeline-item__marker" aria-hidden="true">
+      @if (icon(); as name) {
+        <vd-icon [name]="name" />
+      } @else {
+        <span class="vd-timeline-item__dot"></span>
+      }
+    </span>
+    <div class="vd-timeline-item__content">
+      <div class="vd-timeline-item__meta">
+        <ng-content select="[vdTimelineTime]" />
+        <span class="vd-timeline-item__status">{{ resolvedLabel() }}</span>
+      </div>
+      <ng-content select="[vdTimelineTitle]" />
+      <ng-content select="[vdTimelineDescription]" />
+      <ng-content />
+    </div>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: VdIcon,
+			selector: "vd-icon",
+			inputs: ["name", "label"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdTimelineItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "li[vdTimelineItem]",
+			imports: [VdIcon],
+			template: `
+    <span class="vd-timeline-item__marker" aria-hidden="true">
+      @if (icon(); as name) {
+        <vd-icon [name]="name" />
+      } @else {
+        <span class="vd-timeline-item__dot"></span>
+      }
+    </span>
+    <div class="vd-timeline-item__content">
+      <div class="vd-timeline-item__meta">
+        <ng-content select="[vdTimelineTime]" />
+        <span class="vd-timeline-item__status">{{ resolvedLabel() }}</span>
+      </div>
+      <ng-content select="[vdTimelineTitle]" />
+      <ng-content select="[vdTimelineDescription]" />
+      <ng-content />
+    </div>
+  `,
+			host: {
+				class: "vd-timeline-item",
+				"[attr.data-status]": "status()"
+			},
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	propDecorators: {
+		status: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "status",
+				required: false
+			}]
+		}],
+		statusLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "statusLabel",
+				required: false
+			}]
+		}]
+	}
+});
+var VdTimelineTitle = class VdTimelineTitle {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdTimelineTitle,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: VdTimelineTitle,
+		isStandalone: true,
+		selector: "[vdTimelineTitle]",
+		host: { classAttribute: "vd-timeline-item__title" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdTimelineTitle,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[vdTimelineTitle]",
+			host: { class: "vd-timeline-item__title" }
+		}]
+	}]
+});
+var VdTimelineDescription = class VdTimelineDescription {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdTimelineDescription,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: VdTimelineDescription,
+		isStandalone: true,
+		selector: "[vdTimelineDescription]",
+		host: { classAttribute: "vd-timeline-item__description" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdTimelineDescription,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[vdTimelineDescription]",
+			host: { class: "vd-timeline-item__description" }
+		}]
+	}]
+});
+var VdTimelineTime = class VdTimelineTime {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdTimelineTime,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: VdTimelineTime,
+		isStandalone: true,
+		selector: "time[vdTimelineTime]",
+		host: { classAttribute: "vd-timeline-item__time" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdTimelineTime,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "time[vdTimelineTime]",
+			host: { class: "vd-timeline-item__time" }
+		}]
+	}]
+});
+const VD_TIMELINE = [
+	VdTimeline,
+	VdTimelineItem,
+	VdTimelineTitle,
+	VdTimelineDescription,
+	VdTimelineTime
+];
+export { VD_TIMELINE, VdTimeline, VdTimelineDescription, VdTimelineItem, VdTimelineTime, VdTimelineTitle };
+
+//# sourceMappingURL=vadem-ui-timeline.mjs.map

package/fesm2022/vadem-ui-timeline.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vadem-ui-timeline.mjs","names":[],"sources":["../../../projects/ui/timeline/src/timeline.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  Directive,\n  ViewEncapsulation,\n  computed,\n  input,\n} from '@angular/core';\nimport { VdIcon, VdIconName } from '@vadem/ui/icon';\nimport { vdTexts } from '@vadem/ui/locale';\n\nexport type VdTimelineStatus = 'neutral' | 'success' | 'warning' | 'danger' | 'info';\n\nconst STATUS: Record<VdTimelineStatus, { label: string; icon: VdIconName | null }> = {\n  neutral: { label: 'Event', icon: null },\n  success: { label: 'Completed', icon: 'check' },\n  warning: { label: 'Attention required', icon: 'alert-triangle' },\n  danger: { label: 'Error', icon: 'x' },\n  info: { label: 'Update', icon: 'info' },\n};\n\n/** Named chronological list; consumers own ordering and timestamps. */\n@Directive({\n  selector: 'ol[vdTimeline]',\n  host: { class: 'vd-timeline', role: 'list', '[attr.aria-label]': 't().label' },\n})\nexport class VdTimeline {\n  readonly label = input<string>();\n  /** Text inputs resolved against the active VD_LOCALE. */\n  protected readonly t = vdTexts('timeline', { label: this.label });\n}\n\n/** Native list item with a decorative marker and visible localized status text. */\n@Component({\n  // Native li preserves list semantics without adding a wrapper between ol and li.\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'li[vdTimelineItem]',\n  imports: [VdIcon],\n  template: `\n    <span class=\"vd-timeline-item__marker\" aria-hidden=\"true\">\n      @if (icon(); as name) {\n        <vd-icon [name]=\"name\" />\n      } @else {\n        <span class=\"vd-timeline-item__dot\"></span>\n      }\n    </span>\n    <div class=\"vd-timeline-item__content\">\n      <div class=\"vd-timeline-item__meta\">\n        <ng-content select=\"[vdTimelineTime]\" />\n        <span class=\"vd-timeline-item__status\">{{ resolvedLabel() }}</span>\n      </div>\n      <ng-content select=\"[vdTimelineTitle]\" />\n      <ng-content select=\"[vdTimelineDescription]\" />\n      <ng-content />\n    </div>\n  `,\n  host: { class: 'vd-timeline-item', '[attr.data-status]': 'status()' },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class VdTimelineItem {\n  readonly status = input<VdTimelineStatus>('neutral');\n  readonly statusLabel = input<string>();\n  protected readonly icon = computed(() => STATUS[this.status()].icon);\n  protected readonly resolvedLabel = computed(\n    () => this.statusLabel()?.trim() || STATUS[this.status()].label,\n  );\n}\n\n/** Keep the consumer's heading level and any native link semantics. */\n@Directive({ selector: '[vdTimelineTitle]', host: { class: 'vd-timeline-item__title' } })\nexport class VdTimelineTitle {}\n\n@Directive({\n  selector: '[vdTimelineDescription]',\n  host: { class: 'vd-timeline-item__description' },\n})\nexport class VdTimelineDescription {}\n\n/** Native datetime and localized text are supplied by the consumer. */\n@Directive({ selector: 'time[vdTimelineTime]', host: { class: 'vd-timeline-item__time' } })\nexport class VdTimelineTime {}\n\nexport const VD_TIMELINE = [\n  VdTimeline,\n  VdTimelineItem,\n  VdTimelineTitle,\n  VdTimelineDescription,\n  VdTimelineTime,\n] as const;\n"],"mappings":"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"}