@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-footer.mjs

@@ -0,0 +1,200 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+var FooterComponent = class FooterComponent {
+	sections = input([], ...ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []);
+	copyright = input(...ngDevMode ? [void 0, { debugName: "copyright" }] : /* istanbul ignore next */ []);
+	showBorder = input(true, ...ngDevMode ? [{ debugName: "showBorder" }] : /* istanbul ignore next */ []);
+	compact = input(false, ...ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []);
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	headingLevel = input(4, ...ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []);
+	navAriaLabel = input("Footer", ...ngDevMode ? [{ debugName: "navAriaLabel" }] : /* istanbul ignore next */ []);
+	externalLinkHint = input("(opens in a new tab)", ...ngDevMode ? [{ debugName: "externalLinkHint" }] : /* istanbul ignore next */ []);
+	footerClasses = computed(() => {
+		const classes = ["footer", `footer--${this.variant()}`];
+		if (this.showBorder()) classes.push("footer--bordered");
+		if (this.compact()) classes.push("footer--compact");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "footerClasses" }] : /* istanbul ignore next */ []);
+	linkRel(link) {
+		return link.rel ?? (link.external ? "noopener noreferrer" : null);
+	}
+	currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: FooterComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: FooterComponent,
+		isStandalone: true,
+		selector: "lc-footer",
+		inputs: {
+			sections: {
+				classPropertyName: "sections",
+				publicName: "sections",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			copyright: {
+				classPropertyName: "copyright",
+				publicName: "copyright",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showBorder: {
+				classPropertyName: "showBorder",
+				publicName: "showBorder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			compact: {
+				classPropertyName: "compact",
+				publicName: "compact",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			headingLevel: {
+				classPropertyName: "headingLevel",
+				publicName: "headingLevel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			navAriaLabel: {
+				classPropertyName: "navAriaLabel",
+				publicName: "navAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			externalLinkHint: {
+				classPropertyName: "externalLinkHint",
+				publicName: "externalLinkHint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<footer [class]=\"footerClasses()\" role=\"contentinfo\">\n  @if (sections().length > 0 && !compact()) {\n    <nav class=\"footer__sections\" [attr.aria-label]=\"navAriaLabel()\">\n      @for (section of sections(); track section.title) {\n        <div class=\"footer__section\">\n          @switch (headingLevel()) {\n            @case (2) {\n              <h2 class=\"footer__section-title\">{{ section.title }}</h2>\n            }\n            @case (3) {\n              <h3 class=\"footer__section-title\">{{ section.title }}</h3>\n            }\n            @case (5) {\n              <h5 class=\"footer__section-title\">{{ section.title }}</h5>\n            }\n            @case (6) {\n              <h6 class=\"footer__section-title\">{{ section.title }}</h6>\n            }\n            @default {\n              <h4 class=\"footer__section-title\">{{ section.title }}</h4>\n            }\n          }\n          <ul class=\"footer__links\">\n            @for (link of section.links; track link.href) {\n              <li>\n                <a\n                  class=\"footer__link\"\n                  [class.footer__link--current]=\"link.current\"\n                  [href]=\"link.href\"\n                  [target]=\"link.external ? '_blank' : '_self'\"\n                  [attr.rel]=\"linkRel(link)\"\n                  [attr.aria-current]=\"link.current ? 'page' : null\"\n                >\n                  {{ link.label }}\n                  @if (link.external) {\n                    <span class=\"footer__sr-only\">{{ externalLinkHint() }}</span>\n                    <lc-icon\n                      name=\"external-link\"\n                      size=\"xs\"\n                      class=\"footer__external-icon\"\n                      aria-hidden=\"true\"\n                      [decorative]=\"true\"\n                    />\n                  }\n                </a>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n    </nav>\n  }\n  <div class=\"footer__bottom\">\n    <ng-content />\n    @if (copyright()) {\n      <span class=\"footer__copyright\">{{ copyright() }}</span>\n    }\n  </div>\n</footer>\n",
+		styles: [".footer{padding:var(--lc-density-padding-xl, 2rem) var(--lc-density-padding-lg, 1.5rem) var(--lc-density-padding-lg, 1.5rem);color:var(--color-text-secondary);font-size:var(--typography-font-size-sm, .875rem)}.footer--bordered{border-top:1px solid var(--color-border)}.footer__sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:var(--lc-density-gap-xl, 2rem);margin-bottom:var(--lc-density-padding-xl, 2rem)}.footer__section-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-semibold, 600);line-height:var(--line-height-normal, 1.5);color:var(--color-text-primary);margin:0 0 .25rem;text-transform:uppercase;letter-spacing:.05em}.footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.footer__link{display:inline-flex;align-items:center;gap:.25rem;min-height:var(--size-min-touch-height, 2.75rem);color:var(--color-text-secondary);text-decoration:none;text-underline-offset:.2em;transition:color .15s ease}.footer__link:hover{color:var(--color-text-primary);text-decoration:underline}.footer__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--border-radius-sm)}.footer__link--current{color:var(--color-text-primary);font-weight:var(--typography-font-weight-semibold, 600);text-decoration:underline;text-decoration-thickness:2px}.footer__external-icon{opacity:.6}.footer__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.footer__bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}.footer__copyright{color:var(--color-text-secondary);font-size:var(--typography-font-size-xs, .75rem)}.footer--compact{padding:1rem 1.5rem}.footer--compact .footer__bottom{justify-content:center}.footer--primary{background-color:#071a1f;color:#c1e3e9}.footer--primary .footer__section-title{color:#fff}.footer--primary .footer__link{color:#a3d5df}.footer--primary .footer__link:hover,.footer--primary .footer__link--current{color:#fff}.footer--primary .footer__copyright{color:#84c7d4}.footer--primary.footer--bordered{border-top-color:#144f5b}.footer--dark{background-color:#0c1722;color:#93a4ad}.footer--dark .footer__section-title{color:#f1f6f8}.footer--dark .footer__link{color:#93a4ad}.footer--dark .footer__link:hover,.footer--dark .footer__link--current{color:#f1f6f8}.footer--dark .footer__copyright{color:#93a4ad}.footer--dark.footer--bordered{border-top-color:#ffffff14}.footer--neutral{background-color:var(--color-surface-hover)}\n"],
+		dependencies: [{
+			kind: "component",
+			type: IconComponent,
+			selector: "lc-icon",
+			inputs: [
+				"name",
+				"variant",
+				"size",
+				"color",
+				"ariaLabel",
+				"decorative",
+				"strict"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: FooterComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-footer",
+			standalone: true,
+			imports: [IconComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<footer [class]=\"footerClasses()\" role=\"contentinfo\">\n  @if (sections().length > 0 && !compact()) {\n    <nav class=\"footer__sections\" [attr.aria-label]=\"navAriaLabel()\">\n      @for (section of sections(); track section.title) {\n        <div class=\"footer__section\">\n          @switch (headingLevel()) {\n            @case (2) {\n              <h2 class=\"footer__section-title\">{{ section.title }}</h2>\n            }\n            @case (3) {\n              <h3 class=\"footer__section-title\">{{ section.title }}</h3>\n            }\n            @case (5) {\n              <h5 class=\"footer__section-title\">{{ section.title }}</h5>\n            }\n            @case (6) {\n              <h6 class=\"footer__section-title\">{{ section.title }}</h6>\n            }\n            @default {\n              <h4 class=\"footer__section-title\">{{ section.title }}</h4>\n            }\n          }\n          <ul class=\"footer__links\">\n            @for (link of section.links; track link.href) {\n              <li>\n                <a\n                  class=\"footer__link\"\n                  [class.footer__link--current]=\"link.current\"\n                  [href]=\"link.href\"\n                  [target]=\"link.external ? '_blank' : '_self'\"\n                  [attr.rel]=\"linkRel(link)\"\n                  [attr.aria-current]=\"link.current ? 'page' : null\"\n                >\n                  {{ link.label }}\n                  @if (link.external) {\n                    <span class=\"footer__sr-only\">{{ externalLinkHint() }}</span>\n                    <lc-icon\n                      name=\"external-link\"\n                      size=\"xs\"\n                      class=\"footer__external-icon\"\n                      aria-hidden=\"true\"\n                      [decorative]=\"true\"\n                    />\n                  }\n                </a>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n    </nav>\n  }\n  <div class=\"footer__bottom\">\n    <ng-content />\n    @if (copyright()) {\n      <span class=\"footer__copyright\">{{ copyright() }}</span>\n    }\n  </div>\n</footer>\n",
+			styles: [".footer{padding:var(--lc-density-padding-xl, 2rem) var(--lc-density-padding-lg, 1.5rem) var(--lc-density-padding-lg, 1.5rem);color:var(--color-text-secondary);font-size:var(--typography-font-size-sm, .875rem)}.footer--bordered{border-top:1px solid var(--color-border)}.footer__sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:var(--lc-density-gap-xl, 2rem);margin-bottom:var(--lc-density-padding-xl, 2rem)}.footer__section-title{font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-semibold, 600);line-height:var(--line-height-normal, 1.5);color:var(--color-text-primary);margin:0 0 .25rem;text-transform:uppercase;letter-spacing:.05em}.footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.footer__link{display:inline-flex;align-items:center;gap:.25rem;min-height:var(--size-min-touch-height, 2.75rem);color:var(--color-text-secondary);text-decoration:none;text-underline-offset:.2em;transition:color .15s ease}.footer__link:hover{color:var(--color-text-primary);text-decoration:underline}.footer__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--border-radius-sm)}.footer__link--current{color:var(--color-text-primary);font-weight:var(--typography-font-weight-semibold, 600);text-decoration:underline;text-decoration-thickness:2px}.footer__external-icon{opacity:.6}.footer__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.footer__bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}.footer__copyright{color:var(--color-text-secondary);font-size:var(--typography-font-size-xs, .75rem)}.footer--compact{padding:1rem 1.5rem}.footer--compact .footer__bottom{justify-content:center}.footer--primary{background-color:#071a1f;color:#c1e3e9}.footer--primary .footer__section-title{color:#fff}.footer--primary .footer__link{color:#a3d5df}.footer--primary .footer__link:hover,.footer--primary .footer__link--current{color:#fff}.footer--primary .footer__copyright{color:#84c7d4}.footer--primary.footer--bordered{border-top-color:#144f5b}.footer--dark{background-color:#0c1722;color:#93a4ad}.footer--dark .footer__section-title{color:#f1f6f8}.footer--dark .footer__link{color:#93a4ad}.footer--dark .footer__link:hover,.footer--dark .footer__link--current{color:#f1f6f8}.footer--dark .footer__copyright{color:#93a4ad}.footer--dark.footer--bordered{border-top-color:#ffffff14}.footer--neutral{background-color:var(--color-surface-hover)}\n"]
+		}]
+	}],
+	propDecorators: {
+		sections: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sections",
+				required: false
+			}]
+		}],
+		copyright: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "copyright",
+				required: false
+			}]
+		}],
+		showBorder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showBorder",
+				required: false
+			}]
+		}],
+		compact: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compact",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		headingLevel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headingLevel",
+				required: false
+			}]
+		}],
+		navAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navAriaLabel",
+				required: false
+			}]
+		}],
+		externalLinkHint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "externalLinkHint",
+				required: false
+			}]
+		}]
+	}
+});
+export { FooterComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-footer.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-footer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-footer.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/footer/footer.component.ts","../../../../libs/angular-ui-kit/src/lib/footer/footer.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  computed,\n} from '@angular/core';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\n\nexport interface FooterLink {\n  /** Display label */\n  label: string;\n  /** URL or route */\n  href: string;\n  /**\n   * Opens in a new tab (`target=\"_blank\"`). Screen readers hear the\n   * `externalLinkHint` after the label; `rel` defaults to\n   * `noopener noreferrer`.\n   */\n  external?: boolean;\n  /** Marks the page the visitor is on (`aria-current=\"page\"`). */\n  current?: boolean;\n  /**\n   * `rel` attribute, e.g. `me` for your own social profiles. Replaces the\n   * `noopener noreferrer` default of external links.\n   */\n  rel?: string;\n}\n\nexport interface FooterSection {\n  /** Section heading */\n  title: string;\n  /** Links in this section */\n  links: FooterLink[];\n}\n\nexport type FooterVariant = 'default' | 'primary' | 'dark' | 'neutral';\n\n/** Heading level of the section titles (`headingLevel`). */\nexport type FooterHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\n@Component({\n  selector: 'lc-footer',\n  standalone: true,\n  imports: [IconComponent],\n  templateUrl: './footer.component.html',\n  styleUrls: ['./footer.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Footer component for application-wide bottom navigation.\n *\n * Features:\n * - Multi-section navigation with link groups, inside a labelled `<nav>`\n *   (`navAriaLabel`)\n * - Section titles at a configurable heading level (`headingLevel`, default 4)\n * - Links: `current` page (`aria-current`), `rel`, `external` (new tab, with a\n *   text hint for screen readers — `externalLinkHint`); 44 px touch targets\n * - Copyright text display\n * - Compact single-row layout option\n * - Color variants (default, primary, dark, neutral)\n * - Optional top border\n *\n * @example\n * ```html\n * <lc-footer [sections]=\"navSections\" copyright=\"© 2026 Company\" />\n * ```\n */\nexport class FooterComponent {\n  /** Footer navigation sections */\n  sections = input<FooterSection[]>([]);\n\n  /** Copyright text */\n  copyright = input<string>();\n\n  /** Whether to show a top border */\n  showBorder = input<boolean>(true);\n\n  /** Compact layout (single row) */\n  compact = input<boolean>(false);\n\n  /** Color variant */\n  variant = input<FooterVariant>('default');\n\n  /**\n   * Heading level of the section titles. Pick the level that continues the\n   * page's outline (a page with `h1` + `h2` sections usually wants `2`).\n   */\n  headingLevel = input<FooterHeadingLevel>(4);\n\n  /** Accessible name of the `<nav>` around the sections. */\n  navAriaLabel = input<string>('Footer');\n\n  /** Visually hidden text read after the label of an `external` link. */\n  externalLinkHint = input<string>('(opens in a new tab)');\n\n  protected footerClasses = computed(() => {\n    const classes = ['footer', `footer--${this.variant()}`];\n    if (this.showBorder()) classes.push('footer--bordered');\n    if (this.compact()) classes.push('footer--compact');\n    return classes.join(' ');\n  });\n\n  /** `rel` of a link: its own value, else `noopener noreferrer` for external links. */\n  protected linkRel(link: FooterLink): string | null {\n    return link.rel ?? (link.external ? 'noopener noreferrer' : null);\n  }\n\n  protected currentYear = new Date().getFullYear();\n}\n","<footer [class]=\"footerClasses()\" role=\"contentinfo\">\n  @if (sections().length > 0 && !compact()) {\n    <nav class=\"footer__sections\" [attr.aria-label]=\"navAriaLabel()\">\n      @for (section of sections(); track section.title) {\n        <div class=\"footer__section\">\n          @switch (headingLevel()) {\n            @case (2) {\n              <h2 class=\"footer__section-title\">{{ section.title }}</h2>\n            }\n            @case (3) {\n              <h3 class=\"footer__section-title\">{{ section.title }}</h3>\n            }\n            @case (5) {\n              <h5 class=\"footer__section-title\">{{ section.title }}</h5>\n            }\n            @case (6) {\n              <h6 class=\"footer__section-title\">{{ section.title }}</h6>\n            }\n            @default {\n              <h4 class=\"footer__section-title\">{{ section.title }}</h4>\n            }\n          }\n          <ul class=\"footer__links\">\n            @for (link of section.links; track link.href) {\n              <li>\n                <a\n                  class=\"footer__link\"\n                  [class.footer__link--current]=\"link.current\"\n                  [href]=\"link.href\"\n                  [target]=\"link.external ? '_blank' : '_self'\"\n                  [attr.rel]=\"linkRel(link)\"\n                  [attr.aria-current]=\"link.current ? 'page' : null\"\n                >\n                  {{ link.label }}\n                  @if (link.external) {\n                    <span class=\"footer__sr-only\">{{ externalLinkHint() }}</span>\n                    <lc-icon\n                      name=\"external-link\"\n                      size=\"xs\"\n                      class=\"footer__external-icon\"\n                      aria-hidden=\"true\"\n                      [decorative]=\"true\"\n                    />\n                  }\n                </a>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n    </nav>\n  }\n  <div class=\"footer__bottom\">\n    <ng-content />\n    @if (copyright()) {\n      <span class=\"footer__copyright\">{{ copyright() }}</span>\n    }\n  </div>\n</footer>\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-funnel-chart.mjs

@@ -0,0 +1,292 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, afterNextRender, computed, inject, input, signal } from "@angular/core";
+import { formatChartValue, readableInk, toFinite } from "@lifecorner/angular-ui-kit/internal/chart";
+const DEFAULT_COLORS = [
+	"var(--color-primary-500)",
+	"var(--color-primary-600)",
+	"var(--color-primary-700)",
+	"var(--color-secondary-500)",
+	"var(--color-secondary-600)",
+	"var(--color-secondary-700)",
+	"var(--color-success-default)",
+	"var(--color-warning-default)"
+];
+const DEFAULT_WIDTH = 400;
+var FunnelChartComponent = class FunnelChartComponent {
+	_el = inject(ElementRef);
+	_destroyRef = inject(DestroyRef);
+	_containerWidth = signal(0, ...ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterNextRender(() => {
+			const obs = new ResizeObserver(([entry]) => {
+				this._containerWidth.set(entry.contentRect.width);
+			});
+			obs.observe(this._el.nativeElement);
+			this._destroyRef.onDestroy(() => obs.disconnect());
+		});
+	}
+	steps = input.required(...ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []);
+	width = input(void 0, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	height = input(300, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+	showLabels = input(true, ...ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []);
+	showValues = input(true, ...ngDevMode ? [{ debugName: "showValues" }] : /* istanbul ignore next */ []);
+	showPercentage = input(true, ...ngDevMode ? [{ debugName: "showPercentage" }] : /* istanbul ignore next */ []);
+	orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	formatValue = input(formatChartValue, ...ngDevMode ? [{ debugName: "formatValue" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	effectiveWidth = computed(() => this._containerWidth() || this.width() || DEFAULT_WIDTH, ...ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []);
+	viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []);
+	renderedSteps = computed(() => {
+		const steps = this.steps();
+		if (!steps?.length) return [];
+		const values = steps.map((s) => Math.max(0, toFinite(s.value)));
+		const maxVal = Math.max(...values);
+		const w = this.effectiveWidth();
+		const h = this.height();
+		const isV = this.orientation() === "vertical";
+		const count = steps.length;
+		const fmt = this.formatValue();
+		return steps.map((step, i) => {
+			const ratio = maxVal > 0 ? values[i] / maxVal : 0;
+			const nextRatio = i < count - 1 && maxVal > 0 ? values[i + 1] / maxVal : ratio * .6;
+			const pct = i === 0 ? 100 : maxVal > 0 ? Math.round(values[i] / maxVal * 100) : 0;
+			const color = step.color || DEFAULT_COLORS[i % DEFAULT_COLORS.length];
+			const ink = readableInk(color);
+			let path;
+			let labelX;
+			let labelY;
+			if (isV) {
+				const stepH = h / count;
+				const maxWidth = w - 40;
+				const topW = ratio * maxWidth;
+				const bottomW = nextRatio * maxWidth;
+				const y = i * stepH;
+				const cx = w / 2;
+				path = [
+					`M ${cx - topW / 2} ${y}`,
+					`L ${cx + topW / 2} ${y}`,
+					`L ${cx + bottomW / 2} ${y + stepH}`,
+					`L ${cx - bottomW / 2} ${y + stepH}`,
+					"Z"
+				].join(" ");
+				labelX = cx;
+				labelY = y + stepH / 2;
+			} else {
+				const stepW = w / count;
+				const maxHeight = h - 40;
+				const leftH = ratio * maxHeight;
+				const rightH = nextRatio * maxHeight;
+				const x = i * stepW;
+				const cy = h / 2;
+				path = [
+					`M ${x} ${cy - leftH / 2}`,
+					`L ${x + stepW} ${cy - rightH / 2}`,
+					`L ${x + stepW} ${cy + rightH / 2}`,
+					`L ${x} ${cy + leftH / 2}`,
+					"Z"
+				].join(" ");
+				labelX = x + stepW / 2;
+				labelY = cy;
+			}
+			return {
+				path,
+				color,
+				ink: ink ?? "var(--color-text-primary)",
+				halo: ink === null,
+				label: step.label,
+				value: values[i],
+				valueText: fmt(values[i]),
+				pct,
+				labelX,
+				labelY
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "renderedSteps" }] : /* istanbul ignore next */ []);
+	effectiveAriaLabel = computed(() => {
+		const explicit = this.ariaLabel();
+		if (explicit) return explicit;
+		const steps = this.renderedSteps();
+		if (!steps.length) return "Funnel chart: no data";
+		return `Funnel chart: ${steps.map((s, i) => `${s.label || `Step ${i + 1}`} ${s.valueText} (${s.pct}%)`).join(", ")}`;
+	}, ...ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: FunnelChartComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: FunnelChartComponent,
+		isStandalone: true,
+		selector: "lc-funnel-chart",
+		inputs: {
+			steps: {
+				classPropertyName: "steps",
+				publicName: "steps",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showLabels: {
+				classPropertyName: "showLabels",
+				publicName: "showLabels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showValues: {
+				classPropertyName: "showValues",
+				publicName: "showValues",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showPercentage: {
+				classPropertyName: "showPercentage",
+				publicName: "showPercentage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			formatValue: {
+				classPropertyName: "formatValue",
+				publicName: "formatValue",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "style.max-width.px": "width()" } },
+		ngImport: i0,
+		template: "<div class=\"lc-funnel-chart\">\n  <svg\n    width=\"100%\"\n    [attr.height]=\"height()\"\n    [attr.viewBox]=\"viewBox()\"\n    role=\"img\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n    class=\"lc-funnel-chart__svg\"\n  >\n    <title>{{ effectiveAriaLabel() }}</title>\n\n    @for (step of renderedSteps(); track $index) {\n      <path\n        [attr.d]=\"step.path\"\n        [attr.fill]=\"step.color\"\n        class=\"lc-funnel-chart__step\"\n      />\n\n      @if (showLabels()) {\n        <text\n          [attr.x]=\"step.labelX\"\n          [attr.y]=\"step.labelY - 2\"\n          [attr.fill]=\"step.ink\"\n          text-anchor=\"middle\"\n          dominant-baseline=\"auto\"\n          class=\"lc-funnel-chart__label\"\n          [class.lc-funnel-chart__text--halo]=\"step.halo\"\n        >{{ step.label }}</text>\n      }\n\n      @if (showValues() || showPercentage()) {\n        <text\n          [attr.x]=\"step.labelX\"\n          [attr.y]=\"step.labelY + 12\"\n          [attr.fill]=\"step.ink\"\n          text-anchor=\"middle\"\n          dominant-baseline=\"auto\"\n          class=\"lc-funnel-chart__value\"\n          [class.lc-funnel-chart__text--halo]=\"step.halo\"\n        >\n          @if (showValues()) { {{ step.valueText }} }\n          @if (showValues() && showPercentage()) { · }\n          @if (showPercentage()) { {{ step.pct }}% }\n        </text>\n      }\n    }\n  </svg>\n</div>\n",
+		styles: [":host{display:block}.lc-funnel-chart{display:flex;flex-direction:column;align-items:center;width:100%}.lc-funnel-chart__svg{overflow:visible}.lc-funnel-chart__step{opacity:.85;transition:opacity .15s}.lc-funnel-chart__step:hover{opacity:1}.lc-funnel-chart__label{font-size:.75rem;font-weight:600;pointer-events:none}.lc-funnel-chart__value{font-size:.625rem;pointer-events:none}.lc-funnel-chart__text--halo{paint-order:stroke;stroke:var(--color-surface);stroke-width:3px;stroke-linejoin:round}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: FunnelChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-funnel-chart",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "[style.max-width.px]": "width()" },
+			template: "<div class=\"lc-funnel-chart\">\n  <svg\n    width=\"100%\"\n    [attr.height]=\"height()\"\n    [attr.viewBox]=\"viewBox()\"\n    role=\"img\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n    class=\"lc-funnel-chart__svg\"\n  >\n    <title>{{ effectiveAriaLabel() }}</title>\n\n    @for (step of renderedSteps(); track $index) {\n      <path\n        [attr.d]=\"step.path\"\n        [attr.fill]=\"step.color\"\n        class=\"lc-funnel-chart__step\"\n      />\n\n      @if (showLabels()) {\n        <text\n          [attr.x]=\"step.labelX\"\n          [attr.y]=\"step.labelY - 2\"\n          [attr.fill]=\"step.ink\"\n          text-anchor=\"middle\"\n          dominant-baseline=\"auto\"\n          class=\"lc-funnel-chart__label\"\n          [class.lc-funnel-chart__text--halo]=\"step.halo\"\n        >{{ step.label }}</text>\n      }\n\n      @if (showValues() || showPercentage()) {\n        <text\n          [attr.x]=\"step.labelX\"\n          [attr.y]=\"step.labelY + 12\"\n          [attr.fill]=\"step.ink\"\n          text-anchor=\"middle\"\n          dominant-baseline=\"auto\"\n          class=\"lc-funnel-chart__value\"\n          [class.lc-funnel-chart__text--halo]=\"step.halo\"\n        >\n          @if (showValues()) { {{ step.valueText }} }\n          @if (showValues() && showPercentage()) { · }\n          @if (showPercentage()) { {{ step.pct }}% }\n        </text>\n      }\n    }\n  </svg>\n</div>\n",
+			styles: [":host{display:block}.lc-funnel-chart{display:flex;flex-direction:column;align-items:center;width:100%}.lc-funnel-chart__svg{overflow:visible}.lc-funnel-chart__step{opacity:.85;transition:opacity .15s}.lc-funnel-chart__step:hover{opacity:1}.lc-funnel-chart__label{font-size:.75rem;font-weight:600;pointer-events:none}.lc-funnel-chart__value{font-size:.625rem;pointer-events:none}.lc-funnel-chart__text--halo{paint-order:stroke;stroke:var(--color-surface);stroke-width:3px;stroke-linejoin:round}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		steps: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "steps",
+				required: true
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		showLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showLabels",
+				required: false
+			}]
+		}],
+		showValues: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showValues",
+				required: false
+			}]
+		}],
+		showPercentage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showPercentage",
+				required: false
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		formatValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "formatValue",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { FunnelChartComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-funnel-chart.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-funnel-chart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-funnel-chart.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/funnel-chart/funnel-chart.component.ts","../../../../libs/angular-ui-kit/src/lib/funnel-chart/funnel-chart.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  afterNextRender,\n  inject,\n  input,\n  computed,\n  signal,\n} from '@angular/core';\nimport { readableInk } from '@lifecorner/angular-ui-kit/internal/chart';\nimport {\n  ChartValueFormatter,\n  formatChartValue,\n  toFinite,\n} from '@lifecorner/angular-ui-kit/internal/chart';\n\nexport interface FunnelStep {\n  label: string;\n  value: number;\n  color?: string;\n}\n\n/**\n * Sequential default fills: 500 → 700 of each brand scale. Only 500+ shades are\n * used because the 300/400 shades resolve to dark, low-contrast teals on the\n * dark theme (the scales invert there).\n */\nconst DEFAULT_COLORS = [\n  'var(--color-primary-500)',\n  'var(--color-primary-600)',\n  'var(--color-primary-700)',\n  'var(--color-secondary-500)',\n  'var(--color-secondary-600)',\n  'var(--color-secondary-700)',\n  'var(--color-success-default)',\n  'var(--color-warning-default)',\n];\n\n/** viewBox width used until the container has been measured. */\nconst DEFAULT_WIDTH = 400;\n\n@Component({\n  selector: 'lc-funnel-chart',\n  standalone: true,\n  templateUrl: './funnel-chart.component.html',\n  styleUrls: ['./funnel-chart.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[style.max-width.px]': 'width()',\n  },\n})\n/**\n * Funnel chart for visualizing conversion pipelines and progressive filtering.\n *\n * Features:\n * - Vertical and horizontal orientations\n * - Automatic percentage calculation relative to the first step\n * - Toggleable value and percentage labels, readable on any step fill\n * - Per-step custom colors\n * - Responsive SVG rendering\n *\n * @example\n * ```html\n * <lc-funnel-chart [steps]=\"steps\" [showPercentage]=\"true\" />\n * ```\n */\nexport class FunnelChartComponent {\n  private readonly _el = inject(ElementRef);\n  private readonly _destroyRef = inject(DestroyRef);\n  private readonly _containerWidth = signal<number>(0);\n\n  constructor() {\n    afterNextRender(() => {\n      const obs = new ResizeObserver(([entry]) => {\n        this._containerWidth.set(entry.contentRect.width);\n      });\n      obs.observe(this._el.nativeElement);\n      this._destroyRef.onDestroy(() => obs.disconnect());\n    });\n  }\n\n  readonly steps = input.required<FunnelStep[]>();\n  /**\n   * Intrinsic chart width in pixels. The chart fills its container (the SVG is\n   * `width=\"100%\"` and its viewBox follows the measured container width);\n   * `width` is the viewBox width until the container has been measured and,\n   * when set, the host's `max-width`, so the chart never grows past it. Leave\n   * unset for a fully fluid chart.\n   */\n  readonly width = input<number | undefined>(undefined);\n  readonly height = input(300);\n  readonly showLabels = input(true);\n  readonly showValues = input(true);\n  readonly showPercentage = input(true);\n  readonly orientation = input<'vertical' | 'horizontal'>('vertical');\n  /** Formats step values. Defaults to a float-safe `String(value)`. */\n  readonly formatValue = input<ChartValueFormatter>(formatChartValue);\n  /**\n   * Accessible name of the chart. Defaults to a generated summary listing\n   * every step's label, value and share of the first step.\n   */\n  readonly ariaLabel = input<string>('');\n\n  protected readonly effectiveWidth = computed(\n    () => this._containerWidth() || this.width() || DEFAULT_WIDTH\n  );\n\n  protected readonly viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`);\n\n  protected readonly renderedSteps = computed(() => {\n    const steps = this.steps();\n    if (!steps?.length) return [];\n\n    const values = steps.map((s) => Math.max(0, toFinite(s.value)));\n    const maxVal = Math.max(...values);\n    const w = this.effectiveWidth();\n    const h = this.height();\n    const isV = this.orientation() === 'vertical';\n    const count = steps.length;\n    const fmt = this.formatValue();\n    const padding = 20;\n\n    return steps.map((step, i) => {\n      const ratio = maxVal > 0 ? values[i] / maxVal : 0;\n      // The last step tapers to 60% of its own width; every other step tapers to the next step.\n      const nextRatio = i < count - 1 && maxVal > 0 ? values[i + 1] / maxVal : ratio * 0.6;\n      const pct = i === 0 ? 100 : maxVal > 0 ? Math.round((values[i] / maxVal) * 100) : 0;\n      const color = step.color || DEFAULT_COLORS[i % DEFAULT_COLORS.length];\n      // A literal fill gets ink picked from its luminance; a token fill can't be\n      // resolved here, so the label falls back to primary text with a surface halo.\n      const ink = readableInk(color);\n\n      let path: string;\n      let labelX: number;\n      let labelY: number;\n      if (isV) {\n        const stepH = h / count;\n        const maxWidth = w - padding * 2;\n        const topW = ratio * maxWidth;\n        const bottomW = nextRatio * maxWidth;\n        const y = i * stepH;\n        const cx = w / 2;\n        path = [\n          `M ${cx - topW / 2} ${y}`,\n          `L ${cx + topW / 2} ${y}`,\n          `L ${cx + bottomW / 2} ${y + stepH}`,\n          `L ${cx - bottomW / 2} ${y + stepH}`,\n          'Z',\n        ].join(' ');\n        labelX = cx;\n        labelY = y + stepH / 2;\n      } else {\n        const stepW = w / count;\n        const maxHeight = h - padding * 2;\n        const leftH = ratio * maxHeight;\n        const rightH = nextRatio * maxHeight;\n        const x = i * stepW;\n        const cy = h / 2;\n        path = [\n          `M ${x} ${cy - leftH / 2}`,\n          `L ${x + stepW} ${cy - rightH / 2}`,\n          `L ${x + stepW} ${cy + rightH / 2}`,\n          `L ${x} ${cy + leftH / 2}`,\n          'Z',\n        ].join(' ');\n        labelX = x + stepW / 2;\n        labelY = cy;\n      }\n\n      return {\n        path,\n        color,\n        ink: ink ?? 'var(--color-text-primary)',\n        halo: ink === null,\n        label: step.label,\n        value: values[i],\n        valueText: fmt(values[i]),\n        pct,\n        labelX,\n        labelY,\n      };\n    });\n  });\n\n  protected readonly effectiveAriaLabel = computed(() => {\n    const explicit = this.ariaLabel();\n    if (explicit) return explicit;\n    const steps = this.renderedSteps();\n    if (!steps.length) return 'Funnel chart: no data';\n    return `Funnel chart: ${steps\n      .map((s, i) => `${s.label || `Step ${i + 1}`} ${s.valueText} (${s.pct}%)`)\n      .join(', ')}`;\n  });\n}\n","<div class=\"lc-funnel-chart\">\n  <svg\n    width=\"100%\"\n    [attr.height]=\"height()\"\n    [attr.viewBox]=\"viewBox()\"\n    role=\"img\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n    class=\"lc-funnel-chart__svg\"\n  >\n    <title>{{ effectiveAriaLabel() }}</title>\n\n    @for (step of renderedSteps(); track $index) {\n      <path\n        [attr.d]=\"step.path\"\n        [attr.fill]=\"step.color\"\n        class=\"lc-funnel-chart__step\"\n      />\n\n      @if (showLabels()) {\n        <text\n          [attr.x]=\"step.labelX\"\n          [attr.y]=\"step.labelY - 2\"\n          [attr.fill]=\"step.ink\"\n          text-anchor=\"middle\"\n          dominant-baseline=\"auto\"\n          class=\"lc-funnel-chart__label\"\n          [class.lc-funnel-chart__text--halo]=\"step.halo\"\n        >{{ step.label }}</text>\n      }\n\n      @if (showValues() || showPercentage()) {\n        <text\n          [attr.x]=\"step.labelX\"\n          [attr.y]=\"step.labelY + 12\"\n          [attr.fill]=\"step.ink\"\n          text-anchor=\"middle\"\n          dominant-baseline=\"auto\"\n          class=\"lc-funnel-chart__value\"\n          [class.lc-funnel-chart__text--halo]=\"step.halo\"\n        >\n          @if (showValues()) { {{ step.valueText }} }\n          @if (showValues() && showPercentage()) { · }\n          @if (showPercentage()) { {{ step.pct }}% }\n        </text>\n      }\n    }\n  </svg>\n</div>\n"],"mappings":"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"}