@star-ng/ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,464 @@
+import { _IdGenerator } from "@angular/cdk/a11y";
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, TemplateRef, booleanAttribute, computed, contentChild, contentChildren, forwardRef, inject, input, linkedSignal, model, output, viewChildren } from "@angular/core";
+import { starInlineKey } from "@star-ng/ui/core";
+var StarTabContent = class StarTabContent {
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarTabContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.6",
+		type: StarTabContent,
+		isStandalone: true,
+		selector: "ng-template[starTabContent]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarTabContent,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[starTabContent]" }]
+	}]
+});
+var StarTab = class StarTab {
+	tabs = inject(forwardRef(() => StarTabs));
+	ids = inject(_IdGenerator);
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	badge = input(null, ...ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	tabId = this.ids.getId("star-tab-");
+	panelId = this.ids.getId("star-tabpanel-");
+	lazy = contentChild(StarTabContent, ...ngDevMode ? [{ debugName: "lazy" }] : /* istanbul ignore next */ []);
+	active = computed(() => this.tabs.selected() === this.value(), ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	rendered = linkedSignal({
+		...ngDevMode ? { debugName: "rendered" } : /* istanbul ignore next */ {},
+		source: this.active,
+		computation: (active, previous) => active || (previous?.value ?? false)
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarTab,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarTab,
+		isStandalone: true,
+		selector: "star-tab",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			badge: {
+				classPropertyName: "badge",
+				publicName: "badge",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"role": "tabpanel",
+				"tabindex": "0"
+			},
+			properties: {
+				"id": "panelId",
+				"attr.aria-labelledby": "tabId",
+				"hidden": "!active()"
+			},
+			classAttribute: "star-tabs__panel"
+		},
+		queries: [{
+			propertyName: "lazy",
+			first: true,
+			predicate: StarTabContent,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    @if (lazy(); as lazyContent) {
+      @if (rendered()) {
+        <ng-container *ngTemplateOutlet="lazyContent.template" />
+      }
+    }
+    <ng-content />
+  `,
+		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: StarTab,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-tab",
+			imports: [NgTemplateOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-tabs__panel",
+				role: "tabpanel",
+				tabindex: "0",
+				"[id]": "panelId",
+				"[attr.aria-labelledby]": "tabId",
+				"[hidden]": "!active()"
+			},
+			template: `
+    @if (lazy(); as lazyContent) {
+      @if (rendered()) {
+        <ng-container *ngTemplateOutlet="lazyContent.template" />
+      }
+    }
+    <ng-content />
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		badge: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "badge",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		lazy: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => StarTabContent), { isSignal: true }]
+		}]
+	}
+});
+var StarTabs = class StarTabs {
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	variant = input("line", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	selectOnFocus = input(true, {
+		...ngDevMode ? { debugName: "selectOnFocus" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	changed = output();
+	tabs = contentChildren(StarTab, ...ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []);
+	buttons = viewChildren("tabButton", ...ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []);
+	selected = computed(() => this.value() ?? this.tabs().find((tab) => !tab.disabled())?.value() ?? null, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	focusValue = linkedSignal(() => this.selected(), ...ngDevMode ? [{ debugName: "focusValue" }] : /* istanbul ignore next */ []);
+	select(tab) {
+		if (tab.disabled()) return;
+		this.focusValue.set(tab.value());
+		if (tab.value() === this.selected()) return;
+		this.value.set(tab.value());
+		this.changed.emit(tab.value());
+	}
+	onKeydown(event, current) {
+		const enabled = this.tabs().filter((tab) => !tab.disabled());
+		const index = enabled.indexOf(current);
+		let next;
+		switch (starInlineKey(event)) {
+			case "ArrowRight":
+				next = enabled[(index + 1) % enabled.length];
+				break;
+			case "ArrowLeft":
+				next = enabled[(index - 1 + enabled.length) % enabled.length];
+				break;
+			case "Home":
+				next = enabled[0];
+				break;
+			case "End":
+				next = enabled.at(-1);
+				break;
+			default: return;
+		}
+		if (!next) return;
+		event.preventDefault();
+		this.focusValue.set(next.value());
+		const position = this.tabs().indexOf(next);
+		this.buttons()[position]?.nativeElement.focus();
+		if (this.selectOnFocus()) this.select(next);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarTabs,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarTabs,
+		isStandalone: true,
+		selector: "star-tabs",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectOnFocus: {
+				classPropertyName: "selectOnFocus",
+				publicName: "selectOnFocus",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			changed: "changed"
+		},
+		host: {
+			properties: { "class.star-tabs--pill": "variant() === 'pill'" },
+			classAttribute: "star-tabs"
+		},
+		queries: [{
+			propertyName: "tabs",
+			predicate: StarTab,
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "buttons",
+			predicate: ["tabButton"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div class="star-tabs__list" role="tablist" [attr.aria-label]="ariaLabel()">
+      @for (tab of tabs(); track tab.value()) {
+        <button
+          #tabButton
+          type="button"
+          role="tab"
+          class="star-tabs__tab"
+          [id]="tab.tabId"
+          [class.star-tabs__tab--active]="tab.active()"
+          [attr.aria-selected]="tab.active()"
+          [attr.aria-controls]="tab.panelId"
+          [attr.tabindex]="tab.value() === focusValue() ? 0 : -1"
+          [disabled]="tab.disabled()"
+          (click)="select(tab)"
+          (keydown)="onKeydown($event, tab)"
+        >
+          @if (tab.icon(); as icon) {
+            <i [class]="icon" aria-hidden="true"></i>
+          }
+          <span>{{ tab.label() }}</span>
+          @if (tab.badge() !== null) {
+            <span class="star-badge star-badge--secondary star-badge--sm">{{ tab.badge() }}</span>
+          }
+        </button>
+      }
+    </div>
+    <ng-content />
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarTabs,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-tabs",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-tabs",
+				"[class.star-tabs--pill]": "variant() === 'pill'"
+			},
+			template: `
+    <div class="star-tabs__list" role="tablist" [attr.aria-label]="ariaLabel()">
+      @for (tab of tabs(); track tab.value()) {
+        <button
+          #tabButton
+          type="button"
+          role="tab"
+          class="star-tabs__tab"
+          [id]="tab.tabId"
+          [class.star-tabs__tab--active]="tab.active()"
+          [attr.aria-selected]="tab.active()"
+          [attr.aria-controls]="tab.panelId"
+          [attr.tabindex]="tab.value() === focusValue() ? 0 : -1"
+          [disabled]="tab.disabled()"
+          (click)="select(tab)"
+          (keydown)="onKeydown($event, tab)"
+        >
+          @if (tab.icon(); as icon) {
+            <i [class]="icon" aria-hidden="true"></i>
+          }
+          <span>{{ tab.label() }}</span>
+          @if (tab.badge() !== null) {
+            <span class="star-badge star-badge--secondary star-badge--sm">{{ tab.badge() }}</span>
+          }
+        </button>
+      }
+    </div>
+    <ng-content />
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		selectOnFocus: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectOnFocus",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		changed: [{
+			type: i0.Output,
+			args: ["changed"]
+		}],
+		tabs: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => StarTab), { isSignal: true }]
+		}],
+		buttons: [{
+			type: i0.ViewChildren,
+			args: ["tabButton", { isSignal: true }]
+		}]
+	}
+});
+export { StarTab, StarTabContent, StarTabs };
+
+//# sourceMappingURL=star-ng-ui-tabs.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"star-ng-ui-tabs.mjs","names":[],"sources":["../../../projects/star-ng/tabs/tabs.ts"],"sourcesContent":["import { _IdGenerator } from '@angular/cdk/a11y';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  contentChildren,\n  Directive,\n  ElementRef,\n  forwardRef,\n  inject,\n  input,\n  linkedSignal,\n  model,\n  output,\n  TemplateRef,\n  viewChildren,\n} from '@angular/core';\nimport { starInlineKey } from '@star-ng/ui/core';\n\n/** Lazy tab body: `<ng-template starTabContent>…</ng-template>` renders on first activation only. */\n@Directive({ selector: 'ng-template[starTabContent]' })\nexport class StarTabContent {\n  readonly template = inject<TemplateRef<unknown>>(TemplateRef);\n}\n\n/**\n * One tab and its panel. The host element is the `tabpanel`.\n * Eager content goes directly inside; wrap heavy content in `ng-template starTabContent`.\n */\n@Component({\n  selector: 'star-tab',\n  imports: [NgTemplateOutlet],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'star-tabs__panel',\n    role: 'tabpanel',\n    tabindex: '0',\n    '[id]': 'panelId',\n    '[attr.aria-labelledby]': 'tabId',\n    '[hidden]': '!active()',\n  },\n  template: `\n    @if (lazy(); as lazyContent) {\n      @if (rendered()) {\n        <ng-container *ngTemplateOutlet=\"lazyContent.template\" />\n      }\n    }\n    <ng-content />\n  `,\n})\nexport class StarTab {\n  private readonly tabs = inject(forwardRef(() => StarTabs));\n  private readonly ids = inject(_IdGenerator);\n\n  readonly value = input.required<string>();\n  readonly label = input.required<string>();\n  /** Phosphor icon class, for example `ph-bold ph-files`. */\n  readonly icon = input<string | null>(null);\n  readonly badge = input<string | number | null>(null);\n  readonly disabled = input(false, { transform: booleanAttribute });\n\n  readonly tabId = this.ids.getId('star-tab-');\n  readonly panelId = this.ids.getId('star-tabpanel-');\n\n  protected readonly lazy = contentChild(StarTabContent);\n  readonly active = computed(() => this.tabs.selected() === this.value());\n  /** Stays true after the first activation, so lazy content keeps its state. */\n  protected readonly rendered = linkedSignal<boolean, boolean>({\n    source: this.active,\n    computation: (active, previous) => active || (previous?.value ?? false),\n  });\n}\n\n/**\n * Tabs (PrimeNG `p-tabs`): `[(value)]`, disabled tabs, icons, badges, lazy panels and the\n * WAI-ARIA tabs keyboard model (Arrow keys, Home, End; automatic or manual activation).\n *\n * ```html\n * <star-tabs [(value)]=\"tab\" ariaLabel=\"Order sections\">\n *   <star-tab value=\"details\" label=\"Details\">…</star-tab>\n *   <star-tab value=\"history\" label=\"History\"><ng-template starTabContent>…</ng-template></star-tab>\n * </star-tabs>\n * ```\n */\n@Component({\n  selector: 'star-tabs',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'star-tabs', '[class.star-tabs--pill]': \"variant() === 'pill'\" },\n  template: `\n    <div class=\"star-tabs__list\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\">\n      @for (tab of tabs(); track tab.value()) {\n        <button\n          #tabButton\n          type=\"button\"\n          role=\"tab\"\n          class=\"star-tabs__tab\"\n          [id]=\"tab.tabId\"\n          [class.star-tabs__tab--active]=\"tab.active()\"\n          [attr.aria-selected]=\"tab.active()\"\n          [attr.aria-controls]=\"tab.panelId\"\n          [attr.tabindex]=\"tab.value() === focusValue() ? 0 : -1\"\n          [disabled]=\"tab.disabled()\"\n          (click)=\"select(tab)\"\n          (keydown)=\"onKeydown($event, tab)\"\n        >\n          @if (tab.icon(); as icon) {\n            <i [class]=\"icon\" aria-hidden=\"true\"></i>\n          }\n          <span>{{ tab.label() }}</span>\n          @if (tab.badge() !== null) {\n            <span class=\"star-badge star-badge--secondary star-badge--sm\">{{ tab.badge() }}</span>\n          }\n        </button>\n      }\n    </div>\n    <ng-content />\n  `,\n})\nexport class StarTabs {\n  readonly value = model<string | null>(null);\n  readonly variant = input<'line' | 'pill'>('line');\n  /** `false`: arrow keys move focus only; Enter / Space activate (manual activation). */\n  readonly selectOnFocus = input(true, { transform: booleanAttribute });\n  readonly ariaLabel = input<string | null>(null);\n\n  readonly changed = output<string>();\n\n  protected readonly tabs = contentChildren(StarTab);\n  private readonly buttons = viewChildren<ElementRef<HTMLButtonElement>>('tabButton');\n\n  /** Selected value; falls back to the first enabled tab while `value` is unset. */\n  readonly selected = computed(\n    () =>\n      this.value() ??\n      this.tabs()\n        .find((tab) => !tab.disabled())\n        ?.value() ??\n      null,\n  );\n  /** Roving tabindex target; follows the selection, moves with arrows in manual mode. */\n  protected readonly focusValue = linkedSignal(() => this.selected());\n\n  protected select(tab: StarTab): void {\n    if (tab.disabled()) return;\n    this.focusValue.set(tab.value());\n    if (tab.value() === this.selected()) return;\n    this.value.set(tab.value());\n    this.changed.emit(tab.value());\n  }\n\n  protected onKeydown(event: KeyboardEvent, current: StarTab): void {\n    const enabled = this.tabs().filter((tab) => !tab.disabled());\n    const index = enabled.indexOf(current);\n    let next: StarTab | undefined;\n    // Arrow right means \"next tab in reading order\": the left arrow in right-to-left.\n    switch (starInlineKey(event)) {\n      case 'ArrowRight':\n        next = enabled[(index + 1) % enabled.length];\n        break;\n      case 'ArrowLeft':\n        next = enabled[(index - 1 + enabled.length) % enabled.length];\n        break;\n      case 'Home':\n        next = enabled[0];\n        break;\n      case 'End':\n        next = enabled.at(-1);\n        break;\n      default:\n        return;\n    }\n    if (!next) return;\n    event.preventDefault();\n    this.focusValue.set(next.value());\n    const position = this.tabs().indexOf(next);\n    this.buttons()[position]?.nativeElement.focus();\n    if (this.selectOnFocus()) this.select(next);\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,129 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, input } from "@angular/core";
+var StarTag = class StarTag {
+	severity = input("primary", ...ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []);
+	value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	rounded = input(false, {
+		...ngDevMode ? { debugName: "rounded" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarTag,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarTag,
+		isStandalone: true,
+		selector: "star-tag",
+		inputs: {
+			severity: {
+				classPropertyName: "severity",
+				publicName: "severity",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			rounded: {
+				classPropertyName: "rounded",
+				publicName: "rounded",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "'star-tag star-tag--' + severity()",
+			"class.star-tag--rounded": "rounded()"
+		} },
+		ngImport: i0,
+		template: `
+    @if (icon(); as icon) {
+      <i [class]="icon" aria-hidden="true"></i>
+    }
+    <span>{{ value() }}<ng-content /></span>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarTag,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-tag",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[class]": "'star-tag star-tag--' + severity()",
+				"[class.star-tag--rounded]": "rounded()"
+			},
+			template: `
+    @if (icon(); as icon) {
+      <i [class]="icon" aria-hidden="true"></i>
+    }
+    <span>{{ value() }}<ng-content /></span>
+  `
+		}]
+	}],
+	propDecorators: {
+		severity: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "severity",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		rounded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rounded",
+				required: false
+			}]
+		}]
+	}
+});
+export { StarTag };
+
+//# sourceMappingURL=star-ng-ui-tag.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"star-ng-ui-tag.mjs","names":[],"sources":["../../../projects/star-ng/tag/tag.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { StarSeverity } from '@star-ng/ui/core';\n\n/**\n * Status label (PrimeNG `p-tag`): severity color, optional icon, rounded pill.\n * `<star-tag severity=\"success\" icon=\"ph-bold ph-check\">Closed</star-tag>`\n */\n@Component({\n  selector: 'star-tag',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': \"'star-tag star-tag--' + severity()\",\n    '[class.star-tag--rounded]': 'rounded()',\n  },\n  template: `\n    @if (icon(); as icon) {\n      <i [class]=\"icon\" aria-hidden=\"true\"></i>\n    }\n    <span>{{ value() }}<ng-content /></span>\n  `,\n})\nexport class StarTag {\n  readonly severity = input<StarSeverity>('primary');\n  readonly value = input('');\n  readonly icon = input<string | null>(null);\n  readonly rounded = input(false, { transform: booleanAttribute });\n}\n"],"mappings":";;AAqBA,IAAa,UAAb,MAAa,QAAO;CACT,WAAW,MAAoB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CACzC,QAAQ,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACjB,OAAO,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CACjC,UAAU,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,UAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAJlD,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAO,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAP,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAO,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,SAAA;GAAA,2BAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UAPR;;;;;;EAKT,UAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAEU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAO,YAAA,CAAA;EAdnB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,iBAAiB,wBAAwB;GACzC,MAAM;IACJ,WAAW;IACX,6BAA6B;GAC9B;GACD,UAAU;;;;;;EAMX,CAAA"}