@star-ng/ui 0.0.0-stage → 0.2.0

package/fesm2022/star-ng-ui-layout.mjs

@@ -0,0 +1,608 @@
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, TemplateRef, booleanAttribute, contentChild, inject, input, output } from "@angular/core";
+import { STAR_UI_TEXT, starInlineKey } from "@star-ng/ui/core";
+var StarDivider = class StarDivider {
+	layout = input("horizontal", ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+	type = input("solid", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	align = input("center", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarDivider,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarDivider,
+		isStandalone: true,
+		selector: "star-divider",
+		inputs: {
+			layout: {
+				classPropertyName: "layout",
+				publicName: "layout",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "role": "separator" },
+			properties: {
+				"attr.aria-orientation": "layout()",
+				"class": "'star-divider star-divider--' + layout() + ' star-divider--' + type() + ' star-divider--' + align()"
+			}
+		},
+		ngImport: i0,
+		template: `<span class="star-divider__content"><ng-content /></span>`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarDivider,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-divider",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				role: "separator",
+				"[attr.aria-orientation]": "layout()",
+				"[class]": "'star-divider star-divider--' + layout() + ' star-divider--' + type() + ' star-divider--' + align()"
+			},
+			template: `<span class="star-divider__content"><ng-content /></span>`
+		}]
+	}],
+	propDecorators: {
+		layout: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "layout",
+				required: false
+			}]
+		}],
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}]
+	}
+});
+var StarToolbar = class StarToolbar {
+	host = inject(ElementRef);
+	ariaLabel = input.required(...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	controls() {
+		return [...this.host.nativeElement.querySelectorAll("button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])")].filter((el) => !el.closest("[role=menu], .star-panel, .star-popover"));
+	}
+	onFocusIn(event) {
+		const controls = this.controls();
+		if (!controls.includes(event.target)) return;
+		for (const control of controls) control.tabIndex = control === event.target ? 0 : -1;
+	}
+	onKeydown(event) {
+		if (event.target instanceof HTMLInputElement && event.key !== "Tab") return;
+		const controls = this.controls();
+		const index = controls.indexOf(event.target);
+		if (index < 0) return;
+		const target = {
+			ArrowRight: (index + 1) % controls.length,
+			ArrowLeft: (index - 1 + controls.length) % controls.length,
+			Home: 0,
+			End: controls.length - 1
+		}[starInlineKey(event, this.host.nativeElement)];
+		if (target === void 0) return;
+		event.preventDefault();
+		controls[target].focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarToolbar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarToolbar,
+		isStandalone: true,
+		selector: "star-toolbar",
+		inputs: { ariaLabel: {
+			classPropertyName: "ariaLabel",
+			publicName: "ariaLabel",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "role": "toolbar" },
+			listeners: {
+				"keydown": "onKeydown($event)",
+				"focusin": "onFocusIn($event)"
+			},
+			properties: { "attr.aria-label": "ariaLabel()" },
+			classAttribute: "star-toolbar"
+		},
+		ngImport: i0,
+		template: `
+    <div class="star-toolbar__group"><ng-content select="[starToolbarStart]" /></div>
+    <div class="star-toolbar__group star-toolbar__group--center">
+      <ng-content select="[starToolbarCenter]" />
+    </div>
+    <div class="star-toolbar__group star-toolbar__group--end">
+      <ng-content select="[starToolbarEnd]" />
+    </div>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarToolbar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-toolbar",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-toolbar",
+				role: "toolbar",
+				"[attr.aria-label]": "ariaLabel()",
+				"(keydown)": "onKeydown($event)",
+				"(focusin)": "onFocusIn($event)"
+			},
+			template: `
+    <div class="star-toolbar__group"><ng-content select="[starToolbarStart]" /></div>
+    <div class="star-toolbar__group star-toolbar__group--center">
+      <ng-content select="[starToolbarCenter]" />
+    </div>
+    <div class="star-toolbar__group star-toolbar__group--end">
+      <ng-content select="[starToolbarEnd]" />
+    </div>
+  `
+		}]
+	}],
+	propDecorators: { ariaLabel: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "ariaLabel",
+			required: true
+		}]
+	}] }
+});
+var StarTimelineContent = class StarTimelineContent {
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarTimelineContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.6",
+		type: StarTimelineContent,
+		isStandalone: true,
+		selector: "ng-template[starTimelineContent]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarTimelineContent,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[starTimelineContent]" }]
+	}]
+});
+var StarTimeline = class StarTimeline {
+	events = input([], ...ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []);
+	layout = input("vertical", ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+	align = input("left", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	locale = input(void 0, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	content = contentChild(StarTimelineContent, ...ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []);
+	isoDate(date) {
+		return date instanceof Date ? date.toISOString() : null;
+	}
+	dateText(date) {
+		return date instanceof Date ? new Intl.DateTimeFormat(this.locale(), {
+			dateStyle: "medium",
+			timeStyle: "short"
+		}).format(date) : date;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarTimeline,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarTimeline,
+		isStandalone: true,
+		selector: "star-timeline",
+		inputs: {
+			events: {
+				classPropertyName: "events",
+				publicName: "events",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			layout: {
+				classPropertyName: "layout",
+				publicName: "layout",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class": "'star-timeline star-timeline--' + layout() + ' star-timeline--' + align()" } },
+		queries: [{
+			propertyName: "content",
+			first: true,
+			predicate: StarTimelineContent,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <ol class="star-timeline__list" [attr.aria-label]="ariaLabel()">
+      @for (event of events(); track $index; let i = $index) {
+        <li
+          class="star-timeline__event"
+          [class]="'star-timeline__event star-timeline__event--' + (event.severity ?? 'primary')"
+        >
+          <span class="star-timeline__marker" aria-hidden="true">
+            @if (event.icon) {
+              <i [class]="event.icon"></i>
+            }
+          </span>
+          <div class="star-timeline__body">
+            @if (content(); as custom) {
+              <ng-container
+                *ngTemplateOutlet="custom.template; context: { $implicit: event, index: i }"
+              />
+            } @else {
+              @if (event.date) {
+                <time class="star-timeline__date" [attr.datetime]="isoDate(event.date)">{{
+                  dateText(event.date)
+                }}</time>
+              }
+              <p class="star-timeline__title">{{ event.title }}</p>
+              @if (event.description) {
+                <p class="star-timeline__desc">{{ event.description }}</p>
+              }
+            }
+          </div>
+        </li>
+      }
+    </ol>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarTimeline,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-timeline",
+			imports: [NgTemplateOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "[class]": "'star-timeline star-timeline--' + layout() + ' star-timeline--' + align()" },
+			template: `
+    <ol class="star-timeline__list" [attr.aria-label]="ariaLabel()">
+      @for (event of events(); track $index; let i = $index) {
+        <li
+          class="star-timeline__event"
+          [class]="'star-timeline__event star-timeline__event--' + (event.severity ?? 'primary')"
+        >
+          <span class="star-timeline__marker" aria-hidden="true">
+            @if (event.icon) {
+              <i [class]="event.icon"></i>
+            }
+          </span>
+          <div class="star-timeline__body">
+            @if (content(); as custom) {
+              <ng-container
+                *ngTemplateOutlet="custom.template; context: { $implicit: event, index: i }"
+              />
+            } @else {
+              @if (event.date) {
+                <time class="star-timeline__date" [attr.datetime]="isoDate(event.date)">{{
+                  dateText(event.date)
+                }}</time>
+              }
+              <p class="star-timeline__title">{{ event.title }}</p>
+              @if (event.description) {
+                <p class="star-timeline__desc">{{ event.description }}</p>
+              }
+            }
+          </div>
+        </li>
+      }
+    </ol>
+  `
+		}]
+	}],
+	propDecorators: {
+		events: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "events",
+				required: false
+			}]
+		}],
+		layout: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "layout",
+				required: false
+			}]
+		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		content: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => StarTimelineContent), { isSignal: true }]
+		}]
+	}
+});
+var StarChip = class StarChip {
+	text = inject(STAR_UI_TEXT);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	image = input(null, ...ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []);
+	removable = input(false, {
+		...ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	removed = output();
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarChip,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarChip,
+		isStandalone: true,
+		selector: "star-chip",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			image: {
+				classPropertyName: "image",
+				publicName: "image",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			removable: {
+				classPropertyName: "removable",
+				publicName: "removable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { removed: "removed" },
+		host: { classAttribute: "star-chip" },
+		ngImport: i0,
+		template: `
+    @if (image()) {
+      <img class="star-chip__image" [src]="image()" alt="" />
+    } @else if (icon()) {
+      <i [class]="icon()" aria-hidden="true"></i>
+    }
+    <span>{{ label() }}<ng-content /></span>
+    @if (removable()) {
+      <button
+        type="button"
+        class="star-chip__remove"
+        [attr.aria-label]="text.removeItem(label())"
+        (click)="removed.emit()"
+      >
+        <i class="ph-bold ph-x" aria-hidden="true"></i>
+      </button>
+    }
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarChip,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-chip",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-chip" },
+			template: `
+    @if (image()) {
+      <img class="star-chip__image" [src]="image()" alt="" />
+    } @else if (icon()) {
+      <i [class]="icon()" aria-hidden="true"></i>
+    }
+    <span>{{ label() }}<ng-content /></span>
+    @if (removable()) {
+      <button
+        type="button"
+        class="star-chip__remove"
+        [attr.aria-label]="text.removeItem(label())"
+        (click)="removed.emit()"
+      >
+        <i class="ph-bold ph-x" aria-hidden="true"></i>
+      </button>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		image: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "image",
+				required: false
+			}]
+		}],
+		removable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "removable",
+				required: false
+			}]
+		}],
+		removed: [{
+			type: i0.Output,
+			args: ["removed"]
+		}]
+	}
+});
+export { StarChip, StarDivider, StarTimeline, StarTimelineContent, StarToolbar };
+
+//# sourceMappingURL=star-ng-ui-layout.mjs.map

package/fesm2022/star-ng-ui-layout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"star-ng-ui-layout.mjs","names":[],"sources":["../../../projects/star-ng/layout/layout.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  contentChild,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  output,\n  TemplateRef,\n} from '@angular/core';\nimport { STAR_UI_TEXT, starInlineKey } from '@star-ng/ui/core';\n\n/**\n * Divider (PrimeNG `p-divider`): horizontal or vertical rule with an optional label.\n * `<star-divider>or</star-divider>`, `<star-divider layout=\"vertical\" />`\n */\n@Component({\n  selector: 'star-divider',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    role: 'separator',\n    '[attr.aria-orientation]': 'layout()',\n    '[class]':\n      \"'star-divider star-divider--' + layout() + ' star-divider--' + type() + ' star-divider--' + align()\",\n  },\n  template: `<span class=\"star-divider__content\"><ng-content /></span>`,\n})\nexport class StarDivider {\n  readonly layout = input<'horizontal' | 'vertical'>('horizontal');\n  readonly type = input<'solid' | 'dashed' | 'dotted'>('solid');\n  readonly align = input<'start' | 'center' | 'end'>('center');\n}\n\n/**\n * Toolbar (PrimeNG `p-toolbar`): start, center and end groups, `role=\"toolbar\"` with\n * Arrow-key focus movement between its controls (Tab enters and leaves once).\n *\n * ```html\n * <star-toolbar ariaLabel=\"Order actions\">\n *   <ng-container starToolbarStart>…</ng-container>\n *   <ng-container starToolbarEnd>…</ng-container>\n * </star-toolbar>\n * ```\n */\n@Component({\n  selector: 'star-toolbar',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'star-toolbar',\n    role: 'toolbar',\n    '[attr.aria-label]': 'ariaLabel()',\n    '(keydown)': 'onKeydown($event)',\n    '(focusin)': 'onFocusIn($event)',\n  },\n  template: `\n    <div class=\"star-toolbar__group\"><ng-content select=\"[starToolbarStart]\" /></div>\n    <div class=\"star-toolbar__group star-toolbar__group--center\">\n      <ng-content select=\"[starToolbarCenter]\" />\n    </div>\n    <div class=\"star-toolbar__group star-toolbar__group--end\">\n      <ng-content select=\"[starToolbarEnd]\" />\n    </div>\n  `,\n})\nexport class StarToolbar {\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  readonly ariaLabel = input.required<string>();\n\n  private controls(): HTMLElement[] {\n    return [\n      ...this.host.nativeElement.querySelectorAll<HTMLElement>(\n        'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])',\n      ),\n    ].filter((el) => !el.closest('[role=menu], .star-panel, .star-popover'));\n  }\n\n  /** Roving tabindex: only the focused control is in the Tab order. */\n  protected onFocusIn(event: FocusEvent): void {\n    const controls = this.controls();\n    if (!controls.includes(event.target as HTMLElement)) return;\n    for (const control of controls) control.tabIndex = control === event.target ? 0 : -1;\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.target instanceof HTMLInputElement && event.key !== 'Tab') return;\n    const controls = this.controls();\n    const index = controls.indexOf(event.target as HTMLElement);\n    if (index < 0) return;\n    const target = {\n      ArrowRight: (index + 1) % controls.length,\n      ArrowLeft: (index - 1 + controls.length) % controls.length,\n      Home: 0,\n      End: controls.length - 1,\n    }[starInlineKey(event, this.host.nativeElement)];\n    if (target === undefined) return;\n    event.preventDefault();\n    controls[target].focus();\n  }\n}\n\nexport interface StarTimelineEvent {\n  readonly title: string;\n  readonly date?: string | Date;\n  readonly description?: string;\n  /** Phosphor icon class shown in the marker. */\n  readonly icon?: string;\n  readonly severity?: 'primary' | 'success' | 'info' | 'warn' | 'danger' | 'secondary';\n}\n\n/** Custom event body: `<ng-template starTimelineContent let-event>…</ng-template>`. */\n@Directive({ selector: 'ng-template[starTimelineContent]' })\nexport class StarTimelineContent {\n  readonly template =\n    inject<TemplateRef<{ $implicit: StarTimelineEvent; index: number }>>(TemplateRef);\n}\n\n/**\n * Timeline (PrimeNG `p-timeline`): ordered list of events with markers, dates and severity\n * colors; vertical (left or alternate) or horizontal.\n *\n * `<star-timeline [events]=\"history\" align=\"left\" />`\n */\n@Component({\n  selector: 'star-timeline',\n  imports: [NgTemplateOutlet],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': \"'star-timeline star-timeline--' + layout() + ' star-timeline--' + align()\",\n  },\n  template: `\n    <ol class=\"star-timeline__list\" [attr.aria-label]=\"ariaLabel()\">\n      @for (event of events(); track $index; let i = $index) {\n        <li\n          class=\"star-timeline__event\"\n          [class]=\"'star-timeline__event star-timeline__event--' + (event.severity ?? 'primary')\"\n        >\n          <span class=\"star-timeline__marker\" aria-hidden=\"true\">\n            @if (event.icon) {\n              <i [class]=\"event.icon\"></i>\n            }\n          </span>\n          <div class=\"star-timeline__body\">\n            @if (content(); as custom) {\n              <ng-container\n                *ngTemplateOutlet=\"custom.template; context: { $implicit: event, index: i }\"\n              />\n            } @else {\n              @if (event.date) {\n                <time class=\"star-timeline__date\" [attr.datetime]=\"isoDate(event.date)\">{{\n                  dateText(event.date)\n                }}</time>\n              }\n              <p class=\"star-timeline__title\">{{ event.title }}</p>\n              @if (event.description) {\n                <p class=\"star-timeline__desc\">{{ event.description }}</p>\n              }\n            }\n          </div>\n        </li>\n      }\n    </ol>\n  `,\n})\nexport class StarTimeline {\n  readonly events = input<readonly StarTimelineEvent[]>([]);\n  readonly layout = input<'vertical' | 'horizontal'>('vertical');\n  readonly align = input<'left' | 'alternate'>('left');\n  readonly locale = input<string | undefined>(undefined);\n  readonly ariaLabel = input<string | null>(null);\n  protected readonly content = contentChild(StarTimelineContent);\n\n  protected isoDate(date: string | Date): string | null {\n    return date instanceof Date ? date.toISOString() : null;\n  }\n  protected dateText(date: string | Date): string {\n    return date instanceof Date\n      ? new Intl.DateTimeFormat(this.locale(), { dateStyle: 'medium', timeStyle: 'short' }).format(\n          date,\n        )\n      : date;\n  }\n}\n\n/**\n * Chip (PrimeNG `p-chip`): label with optional icon or image and a remove button.\n * `<star-chip label=\"Design\" icon=\"ph-bold ph-palette\" removable (removed)=\"drop()\" />`\n */\n@Component({\n  selector: 'star-chip',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'star-chip' },\n  template: `\n    @if (image()) {\n      <img class=\"star-chip__image\" [src]=\"image()\" alt=\"\" />\n    } @else if (icon()) {\n      <i [class]=\"icon()\" aria-hidden=\"true\"></i>\n    }\n    <span>{{ label() }}<ng-content /></span>\n    @if (removable()) {\n      <button\n        type=\"button\"\n        class=\"star-chip__remove\"\n        [attr.aria-label]=\"text.removeItem(label())\"\n        (click)=\"removed.emit()\"\n      >\n        <i class=\"ph-bold ph-x\" aria-hidden=\"true\"></i>\n      </button>\n    }\n  `,\n})\nexport class StarChip {\n  protected readonly text = inject(STAR_UI_TEXT);\n  readonly label = input('');\n  readonly icon = input<string | null>(null);\n  readonly image = input<string | null>(null);\n  readonly removable = input(false, { transform: booleanAttribute });\n  readonly removed = output<void>();\n}\n"],"mappings":"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"}