@lifecorner/angular-ui-kit 3.20.0 → 3.21.0

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

@@ -21,6 +21,7 @@ var BarChartComponent = class BarChartComponent {
 	orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
 	showValues = input(true, ...ngDevMode ? [{ debugName: "showValues" }] : /* istanbul ignore next */ []);
 	showLabels = input(true, ...ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []);
+	labelLayout = input("axis", ...ngDevMode ? [{ debugName: "labelLayout" }] : /* istanbul ignore next */ []);
 	showGrid = input(true, ...ngDevMode ? [{ debugName: "showGrid" }] : /* istanbul ignore next */ []);
 	barGap = input(.3, ...ngDevMode ? [{ debugName: "barGap" }] : /* istanbul ignore next */ []);
 	color = input("", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
@@ -33,6 +34,13 @@ var BarChartComponent = class BarChartComponent {
 	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 */ []);
 	isVertical = computed(() => this.orientation() === "vertical", ...ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []);
+	wrapRows = computed(() => this.labelLayout() === "wrap" && !this.isVertical(), ...ngDevMode ? [{ debugName: "wrapRows" }] : /* istanbul ignore next */ []);
+	wrapColumns = computed(() => this.labelLayout() === "wrap" && this.isVertical(), ...ngDevMode ? [{ debugName: "wrapColumns" }] : /* istanbul ignore next */ []);
+	paddingBottom = computed(() => {
+		if (!this.wrapColumns()) return this.PADDING_BOTTOM;
+		const negative = (this.data() ?? []).some((i) => toFinite(i.value) < 0);
+		return this.showValues() && negative ? 18 : 2;
+	}, ...ngDevMode ? [{ debugName: "paddingBottom" }] : /* istanbul ignore next */ []);
 	plot = computed(() => {
 		const w = this.effectiveWidth();
 		const h = this.height();
@@ -40,9 +48,12 @@ var BarChartComponent = class BarChartComponent {
 			x: this.PADDING_LEFT,
 			y: this.PADDING_TOP,
 			w: w - this.PADDING_LEFT - this.PADDING_RIGHT,
-			h: h - this.PADDING_TOP - this.PADDING_BOTTOM
+			h: h - this.PADDING_TOP - this.paddingBottom()
 		};
 	}, ...ngDevMode ? [{ debugName: "plot" }] : /* istanbul ignore next */ []);
+	textOf(item, value, fmt) {
+		return item.valueText ?? fmt(value, item);
+	}
 	scale = computed(() => {
 		const values = (this.data() ?? []).map((i) => toFinite(i.value));
 		return niceScale(Math.min(0, ...values), Math.max(0, ...values), 4);
@@ -88,7 +99,7 @@ var BarChartComponent = class BarChartComponent {
 					color: singleColor || item.color || chartColor(i),
 					label: item.label || "",
 					value,
-					valueText: fmt(value),
+					valueText: this.textOf(item, value, fmt),
 					labelX: p.x + i * totalBarWidth + totalBarWidth / 2,
 					labelY: h - this.PADDING_BOTTOM + 16,
 					valueX: p.x + i * totalBarWidth + totalBarWidth / 2,
@@ -113,7 +124,7 @@ var BarChartComponent = class BarChartComponent {
 					color: singleColor || item.color || chartColor(i),
 					label: item.label || "",
 					value,
-					valueText: fmt(value),
+					valueText: this.textOf(item, value, fmt),
 					labelX: p.x - 6,
 					labelY: p.y + i * totalBarHeight + totalBarHeight / 2,
 					valueX: value >= 0 ? x + barW + 6 : x - 6,
@@ -139,13 +150,46 @@ var BarChartComponent = class BarChartComponent {
 		};
 	}, ...ngDevMode ? [{ debugName: "axisLine" }] : /* istanbul ignore next */ []);
 	plotBottom = computed(() => this.plot().y + this.plot().h, ...ngDevMode ? [{ debugName: "plotBottom" }] : /* istanbul ignore next */ []);
+	rowBounds = computed(() => {
+		const values = (this.data() ?? []).map((i) => toFinite(i.value));
+		const lo = Math.min(0, ...values);
+		return {
+			values,
+			lo,
+			range: Math.max(0, ...values) - lo || 1
+		};
+	}, ...ngDevMode ? [{ debugName: "rowBounds" }] : /* istanbul ignore next */ []);
+	rows = computed(() => {
+		const d = this.data() ?? [];
+		const { values, lo, range } = this.rowBounds();
+		const singleColor = this.color();
+		const fmt = this.formatValue();
+		return d.map((item, i) => {
+			const value = values[i];
+			return {
+				label: item.label || "",
+				valueText: this.textOf(item, value, fmt),
+				color: singleColor || item.color || chartColor(i),
+				x: `${(Math.min(value, 0) - lo) / range * 100}%`,
+				width: `${Math.abs(value) / range * 100}%`
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+	rowZero = computed(() => {
+		const { lo, range } = this.rowBounds();
+		return lo < 0 ? `${-lo / range * 100}%` : null;
+	}, ...ngDevMode ? [{ debugName: "rowZero" }] : /* istanbul ignore next */ []);
 	effectiveAriaLabel = computed(() => {
 		const explicit = this.ariaLabel();
 		if (explicit) return explicit;
 		const d = this.data() ?? [];
 		if (!d.length) return "Bar chart: no data";
 		const fmt = this.formatValue();
-		return `Bar chart: ${d.map((item, i) => `${item.label || `Bar ${i + 1}`} ${fmt(toFinite(item.value))}`).join(", ")}`;
+		return `Bar chart: ${d.map((item, i) => {
+			const label = item.label || `Bar ${i + 1}`;
+			const text = this.textOf(item, toFinite(item.value), fmt);
+			return text === "" ? label : `${label} ${text}`;
+		}).join(", ")}`;
 	}, ...ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -204,6 +248,13 @@ var BarChartComponent = class BarChartComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			labelLayout: {
+				classPropertyName: "labelLayout",
+				publicName: "labelLayout",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			showGrid: {
 				classPropertyName: "showGrid",
 				publicName: "showGrid",
@@ -242,8 +293,8 @@ var BarChartComponent = class BarChartComponent {
 		},
 		host: { properties: { "style.max-width.px": "width()" } },
 		ngImport: i0,
-		template: "<svg\n  width=\"100%\"\n  [attr.height]=\"height()\"\n  [attr.viewBox]=\"viewBox()\"\n  role=\"img\"\n  [attr.aria-label]=\"effectiveAriaLabel()\"\n  class=\"lc-bar-chart\"\n>\n  <title>{{ effectiveAriaLabel() }}</title>\n\n  <!-- Grid lines -->\n  @if (showGrid()) {\n    @for (line of gridLines(); track line.pos) {\n      @if (isVertical()) {\n        <line\n          [attr.x1]=\"axisLine().bx1\"\n          [attr.y1]=\"line.pos\"\n          [attr.x2]=\"axisLine().bx2\"\n          [attr.y2]=\"line.pos\"\n          class=\"lc-bar-chart__grid-line\"\n        />\n        <text\n          [attr.x]=\"axisLine().x1 - 6\"\n          [attr.y]=\"line.pos\"\n          text-anchor=\"end\"\n          dominant-baseline=\"central\"\n          class=\"lc-bar-chart__grid-label\"\n        >\n          {{ line.label }}\n        </text>\n      } @else {\n        <line\n          [attr.x1]=\"line.pos\"\n          [attr.y1]=\"axisLine().y1\"\n          [attr.x2]=\"line.pos\"\n          [attr.y2]=\"axisLine().y2\"\n          class=\"lc-bar-chart__grid-line\"\n        />\n        <text\n          [attr.x]=\"line.pos\"\n          [attr.y]=\"plotBottom() + 12\"\n          text-anchor=\"middle\"\n          class=\"lc-bar-chart__grid-label\"\n        >\n          {{ line.label }}\n        </text>\n      }\n    }\n  }\n\n  <!-- Axes -->\n  <line\n    [attr.x1]=\"axisLine().x1\"\n    [attr.y1]=\"axisLine().y1\"\n    [attr.x2]=\"axisLine().x2\"\n    [attr.y2]=\"axisLine().y2\"\n    class=\"lc-bar-chart__axis\"\n  />\n  <line\n    [attr.x1]=\"axisLine().bx1\"\n    [attr.y1]=\"axisLine().by1\"\n    [attr.x2]=\"axisLine().bx2\"\n    [attr.y2]=\"axisLine().by2\"\n    class=\"lc-bar-chart__axis\"\n  />\n\n  <!-- Bars -->\n  @for (bar of bars(); track $index) {\n    <rect\n      [attr.x]=\"bar.x\"\n      [attr.y]=\"bar.y\"\n      [attr.width]=\"bar.width\"\n      [attr.height]=\"bar.height\"\n      [attr.fill]=\"bar.color\"\n      rx=\"2\"\n      class=\"lc-bar-chart__bar\"\n    />\n\n    @if (showValues()) {\n      <text\n        [attr.x]=\"bar.valueX\"\n        [attr.y]=\"bar.valueY\"\n        [attr.text-anchor]=\"bar.valueAnchor\"\n        [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n        class=\"lc-bar-chart__value\"\n      >\n        {{ bar.valueText }}\n      </text>\n    }\n\n    @if (showLabels()) {\n      <text\n        [attr.x]=\"bar.labelX\"\n        [attr.y]=\"bar.labelY\"\n        [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\"\n        [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n        class=\"lc-bar-chart__label\"\n      >\n        {{ bar.label }}\n      </text>\n    }\n  }\n</svg>\n",
-		styles: [":host{display:block;width:100%}.lc-bar-chart{overflow:visible}.lc-bar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-bar-chart__grid-line{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-bar-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-bar-chart__bar{transition:opacity .15s ease}.lc-bar-chart__bar:hover{opacity:.8}.lc-bar-chart__value{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-bar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}\n"],
+		template: "@if (wrapRows()) {\n  <!--\n    Horizontal 'wrap' (3.21, request 028): HTML rows, so labels wrap and follow\n    the text size. Bar x/width are percentages: final in the server HTML.\n    No inline style (CSP). The children of role=\"img\" are presentational.\n  -->\n  <div\n    class=\"lc-bar-chart lc-bar-chart--rows\"\n    role=\"img\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n  >\n    @for (row of rows(); track $index) {\n      <div class=\"lc-bar-chart__row\">\n        @if ((showLabels() && row.label) || (showValues() && row.valueText)) {\n          <div class=\"lc-bar-chart__row-head\">\n            @if (showLabels() && row.label) {\n              <span class=\"lc-bar-chart__row-label\">{{ row.label }}</span>\n            }\n            @if (showValues() && row.valueText) {\n              <span class=\"lc-bar-chart__row-value\">{{ row.valueText }}</span>\n            }\n          </div>\n        }\n        <svg\n          width=\"100%\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n          class=\"lc-bar-chart__row-track\"\n        >\n          @if (rowZero(); as zero) {\n            <line\n              [attr.x1]=\"zero\"\n              y1=\"-25%\"\n              [attr.x2]=\"zero\"\n              y2=\"125%\"\n              class=\"lc-bar-chart__zero-line\"\n            />\n          }\n          <rect\n            [attr.x]=\"row.x\"\n            y=\"0\"\n            [attr.width]=\"row.width\"\n            height=\"100%\"\n            [attr.fill]=\"row.color\"\n            rx=\"2\"\n            class=\"lc-bar-chart__row-bar\"\n          />\n        </svg>\n      </div>\n    }\n  </div>\n} @else {\n  <svg\n    width=\"100%\"\n    [attr.height]=\"height()\"\n    [attr.viewBox]=\"viewBox()\"\n    role=\"img\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n    class=\"lc-bar-chart\"\n  >\n    <title>{{ effectiveAriaLabel() }}</title>\n\n    <!-- Grid lines -->\n    @if (showGrid()) {\n      @for (line of gridLines(); track line.pos) {\n        @if (isVertical()) {\n          <line\n            [attr.x1]=\"axisLine().bx1\"\n            [attr.y1]=\"line.pos\"\n            [attr.x2]=\"axisLine().bx2\"\n            [attr.y2]=\"line.pos\"\n            class=\"lc-bar-chart__grid-line\"\n          />\n          <text\n            [attr.x]=\"axisLine().x1 - 6\"\n            [attr.y]=\"line.pos\"\n            text-anchor=\"end\"\n            dominant-baseline=\"central\"\n            class=\"lc-bar-chart__grid-label\"\n          >\n            {{ line.label }}\n          </text>\n        } @else {\n          <line\n            [attr.x1]=\"line.pos\"\n            [attr.y1]=\"axisLine().y1\"\n            [attr.x2]=\"line.pos\"\n            [attr.y2]=\"axisLine().y2\"\n            class=\"lc-bar-chart__grid-line\"\n          />\n          <text\n            [attr.x]=\"line.pos\"\n            [attr.y]=\"plotBottom() + 12\"\n            text-anchor=\"middle\"\n            class=\"lc-bar-chart__grid-label\"\n          >\n            {{ line.label }}\n          </text>\n        }\n      }\n    }\n\n    <!-- Axes -->\n    <line\n      [attr.x1]=\"axisLine().x1\"\n      [attr.y1]=\"axisLine().y1\"\n      [attr.x2]=\"axisLine().x2\"\n      [attr.y2]=\"axisLine().y2\"\n      class=\"lc-bar-chart__axis\"\n    />\n    <line\n      [attr.x1]=\"axisLine().bx1\"\n      [attr.y1]=\"axisLine().by1\"\n      [attr.x2]=\"axisLine().bx2\"\n      [attr.y2]=\"axisLine().by2\"\n      class=\"lc-bar-chart__axis\"\n    />\n\n    <!-- Bars -->\n    @for (bar of bars(); track $index) {\n      <rect\n        [attr.x]=\"bar.x\"\n        [attr.y]=\"bar.y\"\n        [attr.width]=\"bar.width\"\n        [attr.height]=\"bar.height\"\n        [attr.fill]=\"bar.color\"\n        rx=\"2\"\n        class=\"lc-bar-chart__bar\"\n      />\n\n      @if (showValues()) {\n        <text\n          [attr.x]=\"bar.valueX\"\n          [attr.y]=\"bar.valueY\"\n          [attr.text-anchor]=\"bar.valueAnchor\"\n          [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n          class=\"lc-bar-chart__value\"\n        >\n          {{ bar.valueText }}\n        </text>\n      }\n\n      <!-- One block (not nested), so the SVG's comment anchors stay as before 3.21. -->\n      @if (showLabels() && !wrapColumns()) {\n        <text\n          [attr.x]=\"bar.labelX\"\n          [attr.y]=\"bar.labelY\"\n          [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\"\n          [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n          class=\"lc-bar-chart__label\"\n        >\n          {{ bar.label }}\n        </text>\n      }\n    }\n  </svg>\n\n  <!--\n    Vertical 'wrap' (3.21, request 028): the category labels as HTML under the\n    plot, one cell per column, wrapping within it. Hidden from assistive\n    technology: the names are in the SVG's accessible name.\n  -->\n  @if (wrapColumns() && showLabels()) {\n    <div class=\"lc-bar-chart__category-labels\" aria-hidden=\"true\">\n      @for (bar of bars(); track $index) {\n        <span class=\"lc-bar-chart__category-label\">{{ bar.label }}</span>\n      }\n    </div>\n  }\n}\n",
+		styles: [":host{display:block;width:100%}.lc-bar-chart{overflow:visible}.lc-bar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-bar-chart__grid-line{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-bar-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-bar-chart__bar{transition:opacity .15s ease}.lc-bar-chart__bar:hover{opacity:.8}.lc-bar-chart__value{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-bar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}.lc-bar-chart--rows{display:flex;flex-direction:column;gap:var(--lc-bar-chart-row-gap, var(--spacing-4))}.lc-bar-chart__row{display:flex;flex-direction:column;gap:var(--spacing-1)}.lc-bar-chart__row-head{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--spacing-2);font-size:var(--typography-font-size-sm);line-height:var(--typography-line-height-normal)}.lc-bar-chart__row-label{flex:1 1 auto;min-width:0;color:var(--color-text-primary);font-weight:var(--typography-font-weight-normal);overflow-wrap:break-word;hyphens:auto;hyphenate-limit-chars:12 4 3}.lc-bar-chart__row-value{margin-inline-start:auto;min-width:0;text-align:end;color:var(--color-text-primary);font-weight:var(--typography-font-weight-semibold);font-variant-numeric:tabular-nums;overflow-wrap:break-word}.lc-bar-chart__row-track{display:block;width:100%;height:var(--lc-bar-chart-bar-size, .75rem);overflow:visible}.lc-bar-chart__zero-line{stroke:var(--color-text-tertiary);stroke-width:1}.lc-bar-chart__category-labels{display:flex;padding:var(--spacing-1) 10px 0 40px}.lc-bar-chart__category-label{flex:1 1 0%;min-width:0;padding-inline:2px;text-align:center;font-size:.6875rem;line-height:var(--typography-line-height-tight);color:var(--color-text-secondary);overflow-wrap:break-word;hyphens:auto;hyphenate-limit-chars:12 4 3}@media(forced-colors:active){.lc-bar-chart__row-track{forced-color-adjust:none}.lc-bar-chart__row-bar{fill:Highlight}.lc-bar-chart__zero-line{stroke:CanvasText}}\n"],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -259,8 +310,8 @@ i0.ɵɵngDeclareClassMetadata({
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { "[style.max-width.px]": "width()" },
-			template: "<svg\n  width=\"100%\"\n  [attr.height]=\"height()\"\n  [attr.viewBox]=\"viewBox()\"\n  role=\"img\"\n  [attr.aria-label]=\"effectiveAriaLabel()\"\n  class=\"lc-bar-chart\"\n>\n  <title>{{ effectiveAriaLabel() }}</title>\n\n  <!-- Grid lines -->\n  @if (showGrid()) {\n    @for (line of gridLines(); track line.pos) {\n      @if (isVertical()) {\n        <line\n          [attr.x1]=\"axisLine().bx1\"\n          [attr.y1]=\"line.pos\"\n          [attr.x2]=\"axisLine().bx2\"\n          [attr.y2]=\"line.pos\"\n          class=\"lc-bar-chart__grid-line\"\n        />\n        <text\n          [attr.x]=\"axisLine().x1 - 6\"\n          [attr.y]=\"line.pos\"\n          text-anchor=\"end\"\n          dominant-baseline=\"central\"\n          class=\"lc-bar-chart__grid-label\"\n        >\n          {{ line.label }}\n        </text>\n      } @else {\n        <line\n          [attr.x1]=\"line.pos\"\n          [attr.y1]=\"axisLine().y1\"\n          [attr.x2]=\"line.pos\"\n          [attr.y2]=\"axisLine().y2\"\n          class=\"lc-bar-chart__grid-line\"\n        />\n        <text\n          [attr.x]=\"line.pos\"\n          [attr.y]=\"plotBottom() + 12\"\n          text-anchor=\"middle\"\n          class=\"lc-bar-chart__grid-label\"\n        >\n          {{ line.label }}\n        </text>\n      }\n    }\n  }\n\n  <!-- Axes -->\n  <line\n    [attr.x1]=\"axisLine().x1\"\n    [attr.y1]=\"axisLine().y1\"\n    [attr.x2]=\"axisLine().x2\"\n    [attr.y2]=\"axisLine().y2\"\n    class=\"lc-bar-chart__axis\"\n  />\n  <line\n    [attr.x1]=\"axisLine().bx1\"\n    [attr.y1]=\"axisLine().by1\"\n    [attr.x2]=\"axisLine().bx2\"\n    [attr.y2]=\"axisLine().by2\"\n    class=\"lc-bar-chart__axis\"\n  />\n\n  <!-- Bars -->\n  @for (bar of bars(); track $index) {\n    <rect\n      [attr.x]=\"bar.x\"\n      [attr.y]=\"bar.y\"\n      [attr.width]=\"bar.width\"\n      [attr.height]=\"bar.height\"\n      [attr.fill]=\"bar.color\"\n      rx=\"2\"\n      class=\"lc-bar-chart__bar\"\n    />\n\n    @if (showValues()) {\n      <text\n        [attr.x]=\"bar.valueX\"\n        [attr.y]=\"bar.valueY\"\n        [attr.text-anchor]=\"bar.valueAnchor\"\n        [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n        class=\"lc-bar-chart__value\"\n      >\n        {{ bar.valueText }}\n      </text>\n    }\n\n    @if (showLabels()) {\n      <text\n        [attr.x]=\"bar.labelX\"\n        [attr.y]=\"bar.labelY\"\n        [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\"\n        [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n        class=\"lc-bar-chart__label\"\n      >\n        {{ bar.label }}\n      </text>\n    }\n  }\n</svg>\n",
-			styles: [":host{display:block;width:100%}.lc-bar-chart{overflow:visible}.lc-bar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-bar-chart__grid-line{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-bar-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-bar-chart__bar{transition:opacity .15s ease}.lc-bar-chart__bar:hover{opacity:.8}.lc-bar-chart__value{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-bar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}\n"]
+			template: "@if (wrapRows()) {\n  <!--\n    Horizontal 'wrap' (3.21, request 028): HTML rows, so labels wrap and follow\n    the text size. Bar x/width are percentages: final in the server HTML.\n    No inline style (CSP). The children of role=\"img\" are presentational.\n  -->\n  <div\n    class=\"lc-bar-chart lc-bar-chart--rows\"\n    role=\"img\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n  >\n    @for (row of rows(); track $index) {\n      <div class=\"lc-bar-chart__row\">\n        @if ((showLabels() && row.label) || (showValues() && row.valueText)) {\n          <div class=\"lc-bar-chart__row-head\">\n            @if (showLabels() && row.label) {\n              <span class=\"lc-bar-chart__row-label\">{{ row.label }}</span>\n            }\n            @if (showValues() && row.valueText) {\n              <span class=\"lc-bar-chart__row-value\">{{ row.valueText }}</span>\n            }\n          </div>\n        }\n        <svg\n          width=\"100%\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n          class=\"lc-bar-chart__row-track\"\n        >\n          @if (rowZero(); as zero) {\n            <line\n              [attr.x1]=\"zero\"\n              y1=\"-25%\"\n              [attr.x2]=\"zero\"\n              y2=\"125%\"\n              class=\"lc-bar-chart__zero-line\"\n            />\n          }\n          <rect\n            [attr.x]=\"row.x\"\n            y=\"0\"\n            [attr.width]=\"row.width\"\n            height=\"100%\"\n            [attr.fill]=\"row.color\"\n            rx=\"2\"\n            class=\"lc-bar-chart__row-bar\"\n          />\n        </svg>\n      </div>\n    }\n  </div>\n} @else {\n  <svg\n    width=\"100%\"\n    [attr.height]=\"height()\"\n    [attr.viewBox]=\"viewBox()\"\n    role=\"img\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n    class=\"lc-bar-chart\"\n  >\n    <title>{{ effectiveAriaLabel() }}</title>\n\n    <!-- Grid lines -->\n    @if (showGrid()) {\n      @for (line of gridLines(); track line.pos) {\n        @if (isVertical()) {\n          <line\n            [attr.x1]=\"axisLine().bx1\"\n            [attr.y1]=\"line.pos\"\n            [attr.x2]=\"axisLine().bx2\"\n            [attr.y2]=\"line.pos\"\n            class=\"lc-bar-chart__grid-line\"\n          />\n          <text\n            [attr.x]=\"axisLine().x1 - 6\"\n            [attr.y]=\"line.pos\"\n            text-anchor=\"end\"\n            dominant-baseline=\"central\"\n            class=\"lc-bar-chart__grid-label\"\n          >\n            {{ line.label }}\n          </text>\n        } @else {\n          <line\n            [attr.x1]=\"line.pos\"\n            [attr.y1]=\"axisLine().y1\"\n            [attr.x2]=\"line.pos\"\n            [attr.y2]=\"axisLine().y2\"\n            class=\"lc-bar-chart__grid-line\"\n          />\n          <text\n            [attr.x]=\"line.pos\"\n            [attr.y]=\"plotBottom() + 12\"\n            text-anchor=\"middle\"\n            class=\"lc-bar-chart__grid-label\"\n          >\n            {{ line.label }}\n          </text>\n        }\n      }\n    }\n\n    <!-- Axes -->\n    <line\n      [attr.x1]=\"axisLine().x1\"\n      [attr.y1]=\"axisLine().y1\"\n      [attr.x2]=\"axisLine().x2\"\n      [attr.y2]=\"axisLine().y2\"\n      class=\"lc-bar-chart__axis\"\n    />\n    <line\n      [attr.x1]=\"axisLine().bx1\"\n      [attr.y1]=\"axisLine().by1\"\n      [attr.x2]=\"axisLine().bx2\"\n      [attr.y2]=\"axisLine().by2\"\n      class=\"lc-bar-chart__axis\"\n    />\n\n    <!-- Bars -->\n    @for (bar of bars(); track $index) {\n      <rect\n        [attr.x]=\"bar.x\"\n        [attr.y]=\"bar.y\"\n        [attr.width]=\"bar.width\"\n        [attr.height]=\"bar.height\"\n        [attr.fill]=\"bar.color\"\n        rx=\"2\"\n        class=\"lc-bar-chart__bar\"\n      />\n\n      @if (showValues()) {\n        <text\n          [attr.x]=\"bar.valueX\"\n          [attr.y]=\"bar.valueY\"\n          [attr.text-anchor]=\"bar.valueAnchor\"\n          [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n          class=\"lc-bar-chart__value\"\n        >\n          {{ bar.valueText }}\n        </text>\n      }\n\n      <!-- One block (not nested), so the SVG's comment anchors stay as before 3.21. -->\n      @if (showLabels() && !wrapColumns()) {\n        <text\n          [attr.x]=\"bar.labelX\"\n          [attr.y]=\"bar.labelY\"\n          [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\"\n          [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n          class=\"lc-bar-chart__label\"\n        >\n          {{ bar.label }}\n        </text>\n      }\n    }\n  </svg>\n\n  <!--\n    Vertical 'wrap' (3.21, request 028): the category labels as HTML under the\n    plot, one cell per column, wrapping within it. Hidden from assistive\n    technology: the names are in the SVG's accessible name.\n  -->\n  @if (wrapColumns() && showLabels()) {\n    <div class=\"lc-bar-chart__category-labels\" aria-hidden=\"true\">\n      @for (bar of bars(); track $index) {\n        <span class=\"lc-bar-chart__category-label\">{{ bar.label }}</span>\n      }\n    </div>\n  }\n}\n",
+			styles: [":host{display:block;width:100%}.lc-bar-chart{overflow:visible}.lc-bar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-bar-chart__grid-line{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-bar-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-bar-chart__bar{transition:opacity .15s ease}.lc-bar-chart__bar:hover{opacity:.8}.lc-bar-chart__value{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-bar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}.lc-bar-chart--rows{display:flex;flex-direction:column;gap:var(--lc-bar-chart-row-gap, var(--spacing-4))}.lc-bar-chart__row{display:flex;flex-direction:column;gap:var(--spacing-1)}.lc-bar-chart__row-head{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--spacing-2);font-size:var(--typography-font-size-sm);line-height:var(--typography-line-height-normal)}.lc-bar-chart__row-label{flex:1 1 auto;min-width:0;color:var(--color-text-primary);font-weight:var(--typography-font-weight-normal);overflow-wrap:break-word;hyphens:auto;hyphenate-limit-chars:12 4 3}.lc-bar-chart__row-value{margin-inline-start:auto;min-width:0;text-align:end;color:var(--color-text-primary);font-weight:var(--typography-font-weight-semibold);font-variant-numeric:tabular-nums;overflow-wrap:break-word}.lc-bar-chart__row-track{display:block;width:100%;height:var(--lc-bar-chart-bar-size, .75rem);overflow:visible}.lc-bar-chart__zero-line{stroke:var(--color-text-tertiary);stroke-width:1}.lc-bar-chart__category-labels{display:flex;padding:var(--spacing-1) 10px 0 40px}.lc-bar-chart__category-label{flex:1 1 0%;min-width:0;padding-inline:2px;text-align:center;font-size:.6875rem;line-height:var(--typography-line-height-tight);color:var(--color-text-secondary);overflow-wrap:break-word;hyphens:auto;hyphenate-limit-chars:12 4 3}@media(forced-colors:active){.lc-bar-chart__row-track{forced-color-adjust:none}.lc-bar-chart__row-bar{fill:Highlight}.lc-bar-chart__zero-line{stroke:CanvasText}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -313,6 +364,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		labelLayout: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelLayout",
+				required: false
+			}]
+		}],
 		showGrid: [{
 			type: i0.Input,
 			args: [{

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

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-bar-chart.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/bar-chart/bar-chart.component.ts","../../../../libs/angular-ui-kit/src/lib/bar-chart/bar-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 { chartColor } from '@lifecorner/angular-ui-kit/internal/chart';\nimport {\n  ChartValueFormatter,\n  formatChartValue,\n  niceScale,\n  toFinite,\n} from '@lifecorner/angular-ui-kit/internal/chart';\n\nexport interface BarChartItem {\n  /** Bar value. Negative values draw downward (left) from the zero baseline. */\n  value: number;\n  label?: string;\n  color?: string;\n}\n\nexport type BarChartOrientation = 'vertical' | 'horizontal';\n\n/** viewBox width used until the container has been measured. */\nconst DEFAULT_WIDTH = 400;\n\n@Component({\n  selector: 'lc-bar-chart',\n  standalone: true,\n  templateUrl: './bar-chart.component.html',\n  styleUrls: ['./bar-chart.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[style.max-width.px]': 'width()',\n  },\n})\n/**\n * Bar chart component for comparing categorical data.\n *\n * Features:\n * - Vertical and horizontal orientation\n * - Per-bar or uniform color support\n * - Negative values drawn from a zero baseline\n * - Optional value labels on bars\n * - Configurable grid and axis labels on a nice tick scale\n * - Adjustable bar gap spacing\n * - Responsive SVG rendering\n *\n * @example\n * ```html\n * <lc-bar-chart [data]=\"items\" orientation=\"vertical\" [showValues]=\"true\" />\n * ```\n */\nexport class BarChartComponent {\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  /** Data items. */\n  data = input.required<BarChartItem[]>();\n\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  width = input<number | undefined>(undefined);\n\n  /** Chart height in pixels. */\n  height = input<number>(200);\n\n  /** Bar orientation. */\n  orientation = input<BarChartOrientation>('vertical');\n\n  /** Show value labels on bars. */\n  showValues = input<boolean>(true);\n\n  /** Show axis labels. */\n  showLabels = input<boolean>(true);\n\n  /** Show grid lines. */\n  showGrid = input<boolean>(true);\n\n  /** Gap between bars as ratio (0-1). */\n  barGap = input<number>(0.3);\n\n  /** Use a single color for all bars. */\n  color = input<string>('');\n\n  /** Formats value labels and axis ticks. Defaults to a float-safe `String(value)`. */\n  formatValue = input<ChartValueFormatter>(formatChartValue);\n\n  /**\n   * Accessible name of the chart. Defaults to a generated summary that lists\n   * every bar's label and value, so assistive technology hears the data and\n   * not just \"Bar chart\".\n   */\n  ariaLabel = input<string>('');\n\n  // Layout constants\n  private readonly PADDING_LEFT = 40;\n  private readonly PADDING_RIGHT = 10;\n  private readonly PADDING_TOP = 10;\n  private readonly PADDING_BOTTOM = 30;\n\n  protected readonly effectiveWidth = computed(\n    () => this._containerWidth() || this.width() || DEFAULT_WIDTH\n  );\n\n  protected readonly viewBox = computed(\n    () => `0 0 ${this.effectiveWidth()} ${this.height()}`\n  );\n\n  protected readonly isVertical = computed(() => this.orientation() === 'vertical');\n\n  private readonly plot = computed(() => {\n    const w = this.effectiveWidth();\n    const h = this.height();\n    return {\n      x: this.PADDING_LEFT,\n      y: this.PADDING_TOP,\n      w: w - this.PADDING_LEFT - this.PADDING_RIGHT,\n      h: h - this.PADDING_TOP - this.PADDING_BOTTOM,\n    };\n  });\n\n  /**\n   * One scale for grid *and* bars: bounds are nice multiples of the tick step,\n   * always include zero, and extend below zero when the data does — so the top\n   * tick is the value at the plot edge and negative bars hang off the baseline.\n   */\n  protected readonly scale = computed(() => {\n    const values = (this.data() ?? []).map((i) => toFinite(i.value));\n    return niceScale(Math.min(0, ...values), Math.max(0, ...values), 4);\n  });\n\n  /** Maps a data value to a pixel position along the value axis. */\n  private valueToPos(value: number): number {\n    const { min, max } = this.scale();\n    const p = this.plot();\n    const frac = (value - min) / (max - min || 1);\n    return this.isVertical() ? p.y + p.h - frac * p.h : p.x + frac * p.w;\n  }\n\n  protected readonly gridLines = computed(() => {\n    if (!this.showGrid() || !this.data()?.length) return [];\n    const fmt = this.formatValue();\n    return this.scale().ticks.map((tick) => ({\n      pos: this.valueToPos(tick),\n      label: fmt(tick),\n    }));\n  });\n\n  protected readonly bars = computed(() => {\n    const d = this.data();\n    if (!d || d.length === 0) return [];\n\n    const isVertical = this.isVertical();\n    const p = this.plot();\n    const gap = this.barGap();\n    const singleColor = this.color();\n    const fmt = this.formatValue();\n    const zero = this.valueToPos(0);\n    const h = this.height();\n\n    if (isVertical) {\n      const totalBarWidth = p.w / d.length;\n      const barWidth = totalBarWidth * (1 - gap);\n      const barOffset = (totalBarWidth - barWidth) / 2;\n\n      return d.map((item, i) => {\n        const value = toFinite(item.value);\n        const end = this.valueToPos(value);\n        const y = Math.min(zero, end);\n        const barH = Math.abs(end - zero);\n        return {\n          x: p.x + i * totalBarWidth + barOffset,\n          y,\n          width: barWidth,\n          height: barH,\n          color: singleColor || item.color || chartColor(i),\n          label: item.label || '',\n          value,\n          valueText: fmt(value),\n          labelX: p.x + i * totalBarWidth + totalBarWidth / 2,\n          labelY: h - this.PADDING_BOTTOM + 16,\n          valueX: p.x + i * totalBarWidth + totalBarWidth / 2,\n          // Above a positive bar, below a negative one.\n          valueY: value >= 0 ? y - 6 : y + barH + 12,\n          valueAnchor: 'middle',\n        };\n      });\n    } else {\n      const totalBarHeight = p.h / d.length;\n      const barHeight = totalBarHeight * (1 - gap);\n      const barOffset = (totalBarHeight - barHeight) / 2;\n\n      return d.map((item, i) => {\n        const value = toFinite(item.value);\n        const end = this.valueToPos(value);\n        const x = Math.min(zero, end);\n        const barW = Math.abs(end - zero);\n        return {\n          x,\n          y: p.y + i * totalBarHeight + barOffset,\n          width: barW,\n          height: barHeight,\n          color: singleColor || item.color || chartColor(i),\n          label: item.label || '',\n          value,\n          valueText: fmt(value),\n          labelX: p.x - 6,\n          labelY: p.y + i * totalBarHeight + totalBarHeight / 2,\n          // Right of a positive bar, left of a negative one.\n          valueX: value >= 0 ? x + barW + 6 : x - 6,\n          valueY: p.y + i * totalBarHeight + totalBarHeight / 2,\n          valueAnchor: value >= 0 ? 'start' : 'end',\n        };\n      });\n    }\n  });\n\n  /**\n   * Value axis along the plot edge plus the zero baseline, which sits inside\n   * the plot when the data goes negative.\n   */\n  protected readonly axisLine = computed(() => {\n    const p = this.plot();\n    const isVertical = this.isVertical();\n    const zero = this.data()?.length ? this.valueToPos(0) : (isVertical ? p.y + p.h : p.x);\n    return {\n      x1: isVertical ? p.x : zero,\n      y1: p.y,\n      x2: isVertical ? p.x : zero,\n      y2: p.y + p.h,\n      bx1: p.x,\n      by1: isVertical ? zero : p.y + p.h,\n      bx2: p.x + p.w,\n      by2: isVertical ? zero : p.y + p.h,\n    };\n  });\n\n  /** Bottom edge of the plot — where horizontal-orientation tick labels sit. */\n  protected readonly plotBottom = computed(() => this.plot().y + this.plot().h);\n\n  protected readonly effectiveAriaLabel = computed(() => {\n    const explicit = this.ariaLabel();\n    if (explicit) return explicit;\n    const d = this.data() ?? [];\n    if (!d.length) return 'Bar chart: no data';\n    const fmt = this.formatValue();\n    return `Bar chart: ${d\n      .map((item, i) => `${item.label || `Bar ${i + 1}`} ${fmt(toFinite(item.value))}`)\n      .join(', ')}`;\n  });\n}\n","<svg\n  width=\"100%\"\n  [attr.height]=\"height()\"\n  [attr.viewBox]=\"viewBox()\"\n  role=\"img\"\n  [attr.aria-label]=\"effectiveAriaLabel()\"\n  class=\"lc-bar-chart\"\n>\n  <title>{{ effectiveAriaLabel() }}</title>\n\n  <!-- Grid lines -->\n  @if (showGrid()) {\n    @for (line of gridLines(); track line.pos) {\n      @if (isVertical()) {\n        <line\n          [attr.x1]=\"axisLine().bx1\"\n          [attr.y1]=\"line.pos\"\n          [attr.x2]=\"axisLine().bx2\"\n          [attr.y2]=\"line.pos\"\n          class=\"lc-bar-chart__grid-line\"\n        />\n        <text\n          [attr.x]=\"axisLine().x1 - 6\"\n          [attr.y]=\"line.pos\"\n          text-anchor=\"end\"\n          dominant-baseline=\"central\"\n          class=\"lc-bar-chart__grid-label\"\n        >\n          {{ line.label }}\n        </text>\n      } @else {\n        <line\n          [attr.x1]=\"line.pos\"\n          [attr.y1]=\"axisLine().y1\"\n          [attr.x2]=\"line.pos\"\n          [attr.y2]=\"axisLine().y2\"\n          class=\"lc-bar-chart__grid-line\"\n        />\n        <text\n          [attr.x]=\"line.pos\"\n          [attr.y]=\"plotBottom() + 12\"\n          text-anchor=\"middle\"\n          class=\"lc-bar-chart__grid-label\"\n        >\n          {{ line.label }}\n        </text>\n      }\n    }\n  }\n\n  <!-- Axes -->\n  <line\n    [attr.x1]=\"axisLine().x1\"\n    [attr.y1]=\"axisLine().y1\"\n    [attr.x2]=\"axisLine().x2\"\n    [attr.y2]=\"axisLine().y2\"\n    class=\"lc-bar-chart__axis\"\n  />\n  <line\n    [attr.x1]=\"axisLine().bx1\"\n    [attr.y1]=\"axisLine().by1\"\n    [attr.x2]=\"axisLine().bx2\"\n    [attr.y2]=\"axisLine().by2\"\n    class=\"lc-bar-chart__axis\"\n  />\n\n  <!-- Bars -->\n  @for (bar of bars(); track $index) {\n    <rect\n      [attr.x]=\"bar.x\"\n      [attr.y]=\"bar.y\"\n      [attr.width]=\"bar.width\"\n      [attr.height]=\"bar.height\"\n      [attr.fill]=\"bar.color\"\n      rx=\"2\"\n      class=\"lc-bar-chart__bar\"\n    />\n\n    @if (showValues()) {\n      <text\n        [attr.x]=\"bar.valueX\"\n        [attr.y]=\"bar.valueY\"\n        [attr.text-anchor]=\"bar.valueAnchor\"\n        [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n        class=\"lc-bar-chart__value\"\n      >\n        {{ bar.valueText }}\n      </text>\n    }\n\n    @if (showLabels()) {\n      <text\n        [attr.x]=\"bar.labelX\"\n        [attr.y]=\"bar.labelY\"\n        [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\"\n        [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n        class=\"lc-bar-chart__label\"\n      >\n        {{ bar.label }}\n      </text>\n    }\n  }\n</svg>\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-bar-chart.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/bar-chart/bar-chart.component.ts","../../../../libs/angular-ui-kit/src/lib/bar-chart/bar-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 { chartColor } from '@lifecorner/angular-ui-kit/internal/chart';\nimport {\n  formatChartValue,\n  niceScale,\n  toFinite,\n} from '@lifecorner/angular-ui-kit/internal/chart';\n\nexport interface BarChartItem {\n  /** Bar value. Negative values draw downward (left) from the zero baseline. */\n  value: number;\n  label?: string;\n  color?: string;\n  /**\n   * The text shown as this bar's value and read in the generated aria label,\n   * instead of `formatValue(value, item)`, for example \"313.000,00 · 54,8 %\".\n   * The kit shows it as given and never formats or computes it. An empty\n   * string shows no value for this bar.\n   */\n  valueText?: string;\n}\n\nexport type BarChartOrientation = 'vertical' | 'horizontal';\n\n/**\n * How the category labels are set: `'axis'` (one line of SVG text on the\n * category axis) or `'wrap'` (HTML text that wraps and follows the text size).\n */\nexport type BarChartLabelLayout = 'axis' | 'wrap';\n\n/**\n * Signature of `lc-bar-chart`'s `formatValue`. A bar's value label passes the\n * bar's item; an axis tick passes the tick only (`item` is `undefined`).\n * One-argument formatters keep working.\n */\nexport type BarChartValueFormatter = (value: number, item?: BarChartItem) => string;\n\n/** viewBox width used until the container has been measured. */\nconst DEFAULT_WIDTH = 400;\n\n@Component({\n  selector: 'lc-bar-chart',\n  standalone: true,\n  templateUrl: './bar-chart.component.html',\n  styleUrls: ['./bar-chart.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[style.max-width.px]': 'width()',\n  },\n})\n/**\n * Bar chart component for comparing categorical data.\n *\n * Features:\n * - Vertical and horizontal orientation\n * - Per-bar or uniform color support\n * - Negative values drawn from a zero baseline\n * - Optional value labels on bars\n * - Configurable grid and axis labels on a nice tick scale\n * - Adjustable bar gap spacing\n * - Responsive SVG rendering\n *\n * @example\n * ```html\n * <lc-bar-chart [data]=\"items\" orientation=\"vertical\" [showValues]=\"true\" />\n * ```\n */\nexport class BarChartComponent {\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  /** Data items. */\n  data = input.required<BarChartItem[]>();\n\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   * @default undefined\n   */\n  width = input<number | undefined>(undefined);\n\n  /**\n   * Chart height in pixels. A horizontal `'wrap'` chart takes the height of\n   * its rows; a vertical `'wrap'` chart adds its label row below this height.\n   * @default 200\n   */\n  height = input<number>(200);\n\n  /**\n   * Bar orientation.\n   * @default 'vertical'\n   */\n  orientation = input<BarChartOrientation>('vertical');\n\n  /**\n   * Show value labels on bars. In horizontal `'wrap'` rows the value sits at\n   * the end of the label line.\n   * @default true\n   */\n  showValues = input<boolean>(true);\n\n  /**\n   * Show axis labels.\n   * @default true\n   */\n  showLabels = input<boolean>(true);\n\n  /**\n   * How the category labels are set. `'axis'`: one line of SVG text on the\n   * category axis, in a fixed 40 px band left of a horizontal bar or centred\n   * under a vertical column. Long labels can run out of the chart. `'wrap'`:\n   * HTML text that wraps to the room it needs and follows the text size. A\n   * horizontal chart becomes a list of rows: the label and the value on one\n   * line (the value moves under the label when both don't fit), and below\n   * them the bar across the full width. The longest bar fills the width, and\n   * `height`, `barGap` and `showGrid` don't apply. A vertical chart keeps its\n   * plot and wraps each label within its column, under the chart.\n   * @default 'axis'\n   */\n  labelLayout = input<BarChartLabelLayout>('axis');\n\n  /**\n   * Show grid lines. Not used by horizontal `'wrap'` rows.\n   * @default true\n   */\n  showGrid = input<boolean>(true);\n\n  /**\n   * Gap between bars as ratio (0-1). Not used by horizontal `'wrap'` rows.\n   * @default 0.3\n   */\n  barGap = input<number>(0.3);\n\n  /**\n   * Use a single color for all bars.\n   * @default ''\n   */\n  color = input<string>('');\n\n  /**\n   * Formats the value labels and the axis ticks. For a bar it gets the bar's\n   * item as the second argument; for an axis tick it gets the tick only\n   * (`item` is `undefined`). An item's `valueText` takes precedence.\n   * @default float-safe `String(value)`\n   */\n  formatValue = input<BarChartValueFormatter>(formatChartValue);\n\n  /**\n   * Accessible name of the chart. Defaults to a generated summary that lists\n   * every bar's label and value, so assistive technology hears the data and\n   * not just \"Bar chart\".\n   * @default ''\n   */\n  ariaLabel = input<string>('');\n\n  // Layout constants\n  private readonly PADDING_LEFT = 40;\n  private readonly PADDING_RIGHT = 10;\n  private readonly PADDING_TOP = 10;\n  private readonly PADDING_BOTTOM = 30;\n\n  protected readonly effectiveWidth = computed(\n    () => this._containerWidth() || this.width() || DEFAULT_WIDTH\n  );\n\n  protected readonly viewBox = computed(\n    () => `0 0 ${this.effectiveWidth()} ${this.height()}`\n  );\n\n  protected readonly isVertical = computed(() => this.orientation() === 'vertical');\n\n  /** Horizontal `'wrap'`: HTML rows instead of the SVG plot. */\n  protected readonly wrapRows = computed(\n    () => this.labelLayout() === 'wrap' && !this.isVertical()\n  );\n\n  /** Vertical `'wrap'`: the SVG plot, with the category labels as an HTML row under it. */\n  protected readonly wrapColumns = computed(\n    () => this.labelLayout() === 'wrap' && this.isVertical()\n  );\n\n  /**\n   * Room under the plot. `'axis'` keeps 30 for the SVG labels; vertical\n   * `'wrap'` labels sit under the SVG, so only 2 are left, or 18 when a\n   * negative bar's value label hangs below it.\n   */\n  private readonly paddingBottom = computed(() => {\n    if (!this.wrapColumns()) return this.PADDING_BOTTOM;\n    const negative = (this.data() ?? []).some((i) => toFinite(i.value) < 0);\n    return this.showValues() && negative ? 18 : 2;\n  });\n\n  private readonly plot = computed(() => {\n    const w = this.effectiveWidth();\n    const h = this.height();\n    return {\n      x: this.PADDING_LEFT,\n      y: this.PADDING_TOP,\n      w: w - this.PADDING_LEFT - this.PADDING_RIGHT,\n      h: h - this.PADDING_TOP - this.paddingBottom(),\n    };\n  });\n\n  /** A bar's text: `valueText`, else `formatValue(value, item)`. */\n  private textOf(item: BarChartItem, value: number, fmt: BarChartValueFormatter): string {\n    return item.valueText ?? fmt(value, item);\n  }\n\n  /**\n   * One scale for grid *and* bars: bounds are nice multiples of the tick step,\n   * always include zero, and extend below zero when the data does — so the top\n   * tick is the value at the plot edge and negative bars hang off the baseline.\n   */\n  protected readonly scale = computed(() => {\n    const values = (this.data() ?? []).map((i) => toFinite(i.value));\n    return niceScale(Math.min(0, ...values), Math.max(0, ...values), 4);\n  });\n\n  /** Maps a data value to a pixel position along the value axis. */\n  private valueToPos(value: number): number {\n    const { min, max } = this.scale();\n    const p = this.plot();\n    const frac = (value - min) / (max - min || 1);\n    return this.isVertical() ? p.y + p.h - frac * p.h : p.x + frac * p.w;\n  }\n\n  protected readonly gridLines = computed(() => {\n    if (!this.showGrid() || !this.data()?.length) return [];\n    const fmt = this.formatValue();\n    return this.scale().ticks.map((tick) => ({\n      pos: this.valueToPos(tick),\n      label: fmt(tick),\n    }));\n  });\n\n  protected readonly bars = computed(() => {\n    const d = this.data();\n    if (!d || d.length === 0) return [];\n\n    const isVertical = this.isVertical();\n    const p = this.plot();\n    const gap = this.barGap();\n    const singleColor = this.color();\n    const fmt = this.formatValue();\n    const zero = this.valueToPos(0);\n    const h = this.height();\n\n    if (isVertical) {\n      const totalBarWidth = p.w / d.length;\n      const barWidth = totalBarWidth * (1 - gap);\n      const barOffset = (totalBarWidth - barWidth) / 2;\n\n      return d.map((item, i) => {\n        const value = toFinite(item.value);\n        const end = this.valueToPos(value);\n        const y = Math.min(zero, end);\n        const barH = Math.abs(end - zero);\n        return {\n          x: p.x + i * totalBarWidth + barOffset,\n          y,\n          width: barWidth,\n          height: barH,\n          color: singleColor || item.color || chartColor(i),\n          label: item.label || '',\n          value,\n          valueText: this.textOf(item, value, fmt),\n          labelX: p.x + i * totalBarWidth + totalBarWidth / 2,\n          labelY: h - this.PADDING_BOTTOM + 16,\n          valueX: p.x + i * totalBarWidth + totalBarWidth / 2,\n          // Above a positive bar, below a negative one.\n          valueY: value >= 0 ? y - 6 : y + barH + 12,\n          valueAnchor: 'middle',\n        };\n      });\n    } else {\n      const totalBarHeight = p.h / d.length;\n      const barHeight = totalBarHeight * (1 - gap);\n      const barOffset = (totalBarHeight - barHeight) / 2;\n\n      return d.map((item, i) => {\n        const value = toFinite(item.value);\n        const end = this.valueToPos(value);\n        const x = Math.min(zero, end);\n        const barW = Math.abs(end - zero);\n        return {\n          x,\n          y: p.y + i * totalBarHeight + barOffset,\n          width: barW,\n          height: barHeight,\n          color: singleColor || item.color || chartColor(i),\n          label: item.label || '',\n          value,\n          valueText: this.textOf(item, value, fmt),\n          labelX: p.x - 6,\n          labelY: p.y + i * totalBarHeight + totalBarHeight / 2,\n          // Right of a positive bar, left of a negative one.\n          valueX: value >= 0 ? x + barW + 6 : x - 6,\n          valueY: p.y + i * totalBarHeight + totalBarHeight / 2,\n          valueAnchor: value >= 0 ? 'start' : 'end',\n        };\n      });\n    }\n  });\n\n  /**\n   * Value axis along the plot edge plus the zero baseline, which sits inside\n   * the plot when the data goes negative.\n   */\n  protected readonly axisLine = computed(() => {\n    const p = this.plot();\n    const isVertical = this.isVertical();\n    const zero = this.data()?.length ? this.valueToPos(0) : (isVertical ? p.y + p.h : p.x);\n    return {\n      x1: isVertical ? p.x : zero,\n      y1: p.y,\n      x2: isVertical ? p.x : zero,\n      y2: p.y + p.h,\n      bx1: p.x,\n      by1: isVertical ? zero : p.y + p.h,\n      bx2: p.x + p.w,\n      by2: isVertical ? zero : p.y + p.h,\n    };\n  });\n\n  /** Bottom edge of the plot — where horizontal-orientation tick labels sit. */\n  protected readonly plotBottom = computed(() => this.plot().y + this.plot().h);\n\n  /**\n   * Bounds of the horizontal `'wrap'` rows: zero is always inside, and the\n   * longest bar fills the track.\n   */\n  private readonly rowBounds = computed(() => {\n    const values = (this.data() ?? []).map((i) => toFinite(i.value));\n    const lo = Math.min(0, ...values);\n    const hi = Math.max(0, ...values);\n    return { values, lo, range: hi - lo || 1 };\n  });\n\n  /**\n   * Horizontal `'wrap'` rows. Bar `x` and `width` are percentages of the\n   * track, so the server HTML is final before the container is measured.\n   */\n  protected readonly rows = computed(() => {\n    const d = this.data() ?? [];\n    const { values, lo, range } = this.rowBounds();\n    const singleColor = this.color();\n    const fmt = this.formatValue();\n    return d.map((item, i) => {\n      const value = values[i];\n      return {\n        label: item.label || '',\n        valueText: this.textOf(item, value, fmt),\n        color: singleColor || item.color || chartColor(i),\n        x: `${((Math.min(value, 0) - lo) / range) * 100}%`,\n        width: `${(Math.abs(value) / range) * 100}%`,\n      };\n    });\n  });\n\n  /** Position of the zero line in the `'wrap'` rows; `null` without negative values. */\n  protected readonly rowZero = computed(() => {\n    const { lo, range } = this.rowBounds();\n    return lo < 0 ? `${(-lo / range) * 100}%` : null;\n  });\n\n  protected readonly effectiveAriaLabel = computed(() => {\n    const explicit = this.ariaLabel();\n    if (explicit) return explicit;\n    const d = this.data() ?? [];\n    if (!d.length) return 'Bar chart: no data';\n    const fmt = this.formatValue();\n    return `Bar chart: ${d\n      .map((item, i) => {\n        const label = item.label || `Bar ${i + 1}`;\n        const text = this.textOf(item, toFinite(item.value), fmt);\n        return text === '' ? label : `${label} ${text}`;\n      })\n      .join(', ')}`;\n  });\n}\n","@if (wrapRows()) {\n  <!--\n    Horizontal 'wrap' (3.21, request 028): HTML rows, so labels wrap and follow\n    the text size. Bar x/width are percentages: final in the server HTML.\n    No inline style (CSP). The children of role=\"img\" are presentational.\n  -->\n  <div\n    class=\"lc-bar-chart lc-bar-chart--rows\"\n    role=\"img\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n  >\n    @for (row of rows(); track $index) {\n      <div class=\"lc-bar-chart__row\">\n        @if ((showLabels() && row.label) || (showValues() && row.valueText)) {\n          <div class=\"lc-bar-chart__row-head\">\n            @if (showLabels() && row.label) {\n              <span class=\"lc-bar-chart__row-label\">{{ row.label }}</span>\n            }\n            @if (showValues() && row.valueText) {\n              <span class=\"lc-bar-chart__row-value\">{{ row.valueText }}</span>\n            }\n          </div>\n        }\n        <svg\n          width=\"100%\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n          class=\"lc-bar-chart__row-track\"\n        >\n          @if (rowZero(); as zero) {\n            <line\n              [attr.x1]=\"zero\"\n              y1=\"-25%\"\n              [attr.x2]=\"zero\"\n              y2=\"125%\"\n              class=\"lc-bar-chart__zero-line\"\n            />\n          }\n          <rect\n            [attr.x]=\"row.x\"\n            y=\"0\"\n            [attr.width]=\"row.width\"\n            height=\"100%\"\n            [attr.fill]=\"row.color\"\n            rx=\"2\"\n            class=\"lc-bar-chart__row-bar\"\n          />\n        </svg>\n      </div>\n    }\n  </div>\n} @else {\n  <svg\n    width=\"100%\"\n    [attr.height]=\"height()\"\n    [attr.viewBox]=\"viewBox()\"\n    role=\"img\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n    class=\"lc-bar-chart\"\n  >\n    <title>{{ effectiveAriaLabel() }}</title>\n\n    <!-- Grid lines -->\n    @if (showGrid()) {\n      @for (line of gridLines(); track line.pos) {\n        @if (isVertical()) {\n          <line\n            [attr.x1]=\"axisLine().bx1\"\n            [attr.y1]=\"line.pos\"\n            [attr.x2]=\"axisLine().bx2\"\n            [attr.y2]=\"line.pos\"\n            class=\"lc-bar-chart__grid-line\"\n          />\n          <text\n            [attr.x]=\"axisLine().x1 - 6\"\n            [attr.y]=\"line.pos\"\n            text-anchor=\"end\"\n            dominant-baseline=\"central\"\n            class=\"lc-bar-chart__grid-label\"\n          >\n            {{ line.label }}\n          </text>\n        } @else {\n          <line\n            [attr.x1]=\"line.pos\"\n            [attr.y1]=\"axisLine().y1\"\n            [attr.x2]=\"line.pos\"\n            [attr.y2]=\"axisLine().y2\"\n            class=\"lc-bar-chart__grid-line\"\n          />\n          <text\n            [attr.x]=\"line.pos\"\n            [attr.y]=\"plotBottom() + 12\"\n            text-anchor=\"middle\"\n            class=\"lc-bar-chart__grid-label\"\n          >\n            {{ line.label }}\n          </text>\n        }\n      }\n    }\n\n    <!-- Axes -->\n    <line\n      [attr.x1]=\"axisLine().x1\"\n      [attr.y1]=\"axisLine().y1\"\n      [attr.x2]=\"axisLine().x2\"\n      [attr.y2]=\"axisLine().y2\"\n      class=\"lc-bar-chart__axis\"\n    />\n    <line\n      [attr.x1]=\"axisLine().bx1\"\n      [attr.y1]=\"axisLine().by1\"\n      [attr.x2]=\"axisLine().bx2\"\n      [attr.y2]=\"axisLine().by2\"\n      class=\"lc-bar-chart__axis\"\n    />\n\n    <!-- Bars -->\n    @for (bar of bars(); track $index) {\n      <rect\n        [attr.x]=\"bar.x\"\n        [attr.y]=\"bar.y\"\n        [attr.width]=\"bar.width\"\n        [attr.height]=\"bar.height\"\n        [attr.fill]=\"bar.color\"\n        rx=\"2\"\n        class=\"lc-bar-chart__bar\"\n      />\n\n      @if (showValues()) {\n        <text\n          [attr.x]=\"bar.valueX\"\n          [attr.y]=\"bar.valueY\"\n          [attr.text-anchor]=\"bar.valueAnchor\"\n          [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n          class=\"lc-bar-chart__value\"\n        >\n          {{ bar.valueText }}\n        </text>\n      }\n\n      <!-- One block (not nested), so the SVG's comment anchors stay as before 3.21. -->\n      @if (showLabels() && !wrapColumns()) {\n        <text\n          [attr.x]=\"bar.labelX\"\n          [attr.y]=\"bar.labelY\"\n          [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\"\n          [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n          class=\"lc-bar-chart__label\"\n        >\n          {{ bar.label }}\n        </text>\n      }\n    }\n  </svg>\n\n  <!--\n    Vertical 'wrap' (3.21, request 028): the category labels as HTML under the\n    plot, one cell per column, wrapping within it. Hidden from assistive\n    technology: the names are in the SVG's accessible name.\n  -->\n  @if (wrapColumns() && showLabels()) {\n    <div class=\"lc-bar-chart__category-labels\" aria-hidden=\"true\">\n      @for (bar of bars(); track $index) {\n        <span class=\"lc-bar-chart__category-label\">{{ bar.label }}</span>\n      }\n    </div>\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifecorner/angular-ui-kit",
-  "version": "3.20.0",
+  "version": "3.21.0",
   "description": "LifeCorner Design System – Angular UI component library",
   "license": "MIT",
   "repository": {

package/types/lifecorner-angular-ui-kit-bar-chart.d.ts

@@ -1,12 +1,29 @@
-import { ChartValueFormatter } from "@lifecorner/angular-ui-kit/internal/chart";
 import * as i0 from "@angular/core";
 export interface BarChartItem {
   /** Bar value. Negative values draw downward (left) from the zero baseline. */
   value: number;
   label?: string;
   color?: string;
+  /**
+   * The text shown as this bar's value and read in the generated aria label,
+   * instead of `formatValue(value, item)`, for example "313.000,00 · 54,8 %".
+   * The kit shows it as given and never formats or computes it. An empty
+   * string shows no value for this bar.
+   */
+  valueText?: string;
 }
 export type BarChartOrientation = 'vertical' | 'horizontal';
+/**
+ * How the category labels are set: `'axis'` (one line of SVG text on the
+ * category axis) or `'wrap'` (HTML text that wraps and follows the text size).
+ */
+export type BarChartLabelLayout = 'axis' | 'wrap';
+/**
+ * Signature of `lc-bar-chart`'s `formatValue`. A bar's value label passes the
+ * bar's item; an axis tick passes the tick only (`item` is `undefined`).
+ * One-argument formatters keep working.
+ */
+export type BarChartValueFormatter = (value: number, item?: BarChartItem) => string;
 export declare class BarChartComponent {
   private readonly _el;
   private readonly _destroyRef;
@@ -20,28 +37,71 @@ export declare class BarChartComponent {
    * `width` is the viewBox width until the container has been measured and,
    * when set, the host's `max-width`, so the chart never grows past it. Leave
    * unset for a fully fluid chart.
+   * @default undefined
    */
   width: import("@angular/core").InputSignal<number | undefined>;
-  /** Chart height in pixels. */
+  /**
+   * Chart height in pixels. A horizontal `'wrap'` chart takes the height of
+   * its rows; a vertical `'wrap'` chart adds its label row below this height.
+   * @default 200
+   */
   height: import("@angular/core").InputSignal<number>;
-  /** Bar orientation. */
+  /**
+   * Bar orientation.
+   * @default 'vertical'
+   */
   orientation: import("@angular/core").InputSignal<BarChartOrientation>;
-  /** Show value labels on bars. */
+  /**
+   * Show value labels on bars. In horizontal `'wrap'` rows the value sits at
+   * the end of the label line.
+   * @default true
+   */
   showValues: import("@angular/core").InputSignal<boolean>;
-  /** Show axis labels. */
+  /**
+   * Show axis labels.
+   * @default true
+   */
   showLabels: import("@angular/core").InputSignal<boolean>;
-  /** Show grid lines. */
+  /**
+   * How the category labels are set. `'axis'`: one line of SVG text on the
+   * category axis, in a fixed 40 px band left of a horizontal bar or centred
+   * under a vertical column. Long labels can run out of the chart. `'wrap'`:
+   * HTML text that wraps to the room it needs and follows the text size. A
+   * horizontal chart becomes a list of rows: the label and the value on one
+   * line (the value moves under the label when both don't fit), and below
+   * them the bar across the full width. The longest bar fills the width, and
+   * `height`, `barGap` and `showGrid` don't apply. A vertical chart keeps its
+   * plot and wraps each label within its column, under the chart.
+   * @default 'axis'
+   */
+  labelLayout: import("@angular/core").InputSignal<BarChartLabelLayout>;
+  /**
+   * Show grid lines. Not used by horizontal `'wrap'` rows.
+   * @default true
+   */
   showGrid: import("@angular/core").InputSignal<boolean>;
-  /** Gap between bars as ratio (0-1). */
+  /**
+   * Gap between bars as ratio (0-1). Not used by horizontal `'wrap'` rows.
+   * @default 0.3
+   */
   barGap: import("@angular/core").InputSignal<number>;
-  /** Use a single color for all bars. */
+  /**
+   * Use a single color for all bars.
+   * @default ''
+   */
   color: import("@angular/core").InputSignal<string>;
-  /** Formats value labels and axis ticks. Defaults to a float-safe `String(value)`. */
-  formatValue: import("@angular/core").InputSignal<ChartValueFormatter>;
+  /**
+   * Formats the value labels and the axis ticks. For a bar it gets the bar's
+   * item as the second argument; for an axis tick it gets the tick only
+   * (`item` is `undefined`). An item's `valueText` takes precedence.
+   * @default float-safe `String(value)`
+   */
+  formatValue: import("@angular/core").InputSignal<BarChartValueFormatter>;
   /**
    * Accessible name of the chart. Defaults to a generated summary that lists
    * every bar's label and value, so assistive technology hears the data and
    * not just "Bar chart".
+   * @default ''
    */
   ariaLabel: import("@angular/core").InputSignal<string>;
   private readonly PADDING_LEFT;
@@ -51,7 +111,19 @@ export declare class BarChartComponent {
   protected readonly effectiveWidth: import("@angular/core").Signal<number>;
   protected readonly viewBox: import("@angular/core").Signal<string>;
   protected readonly isVertical: import("@angular/core").Signal<boolean>;
+  /** Horizontal `'wrap'`: HTML rows instead of the SVG plot. */
+  protected readonly wrapRows: import("@angular/core").Signal<boolean>;
+  /** Vertical `'wrap'`: the SVG plot, with the category labels as an HTML row under it. */
+  protected readonly wrapColumns: import("@angular/core").Signal<boolean>;
+  /**
+   * Room under the plot. `'axis'` keeps 30 for the SVG labels; vertical
+   * `'wrap'` labels sit under the SVG, so only 2 are left, or 18 when a
+   * negative bar's value label hangs below it.
+   */
+  private readonly paddingBottom;
   private readonly plot;
+  /** A bar's text: `valueText`, else `formatValue(value, item)`. */
+  private textOf;
   /**
    * One scale for grid *and* bars: bounds are nice multiples of the tick step,
    * always include zero, and extend below zero when the data does — so the top
@@ -95,6 +167,24 @@ export declare class BarChartComponent {
   }>;
   /** Bottom edge of the plot — where horizontal-orientation tick labels sit. */
   protected readonly plotBottom: import("@angular/core").Signal<number>;
+  /**
+   * Bounds of the horizontal `'wrap'` rows: zero is always inside, and the
+   * longest bar fills the track.
+   */
+  private readonly rowBounds;
+  /**
+   * Horizontal `'wrap'` rows. Bar `x` and `width` are percentages of the
+   * track, so the server HTML is final before the container is measured.
+   */
+  protected readonly rows: import("@angular/core").Signal<{
+    label: string;
+    valueText: string;
+    color: string;
+    x: string;
+    width: string;
+  }[]>;
+  /** Position of the zero line in the `'wrap'` rows; `null` without negative values. */
+  protected readonly rowZero: import("@angular/core").Signal<string | null>;
   protected readonly effectiveAriaLabel: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<BarChartComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<BarChartComponent, "lc-bar-chart", never, {
@@ -128,6 +218,11 @@ export declare class BarChartComponent {
       "required": false;
       "isSignal": true;
     };
+    "labelLayout": {
+      "alias": "labelLayout";
+      "required": false;
+      "isSignal": true;
+    };
     "showGrid": {
       "alias": "showGrid";
       "required": false;