invensys-ng 21.3.5 → 21.3.7

package/fesm2022/invensys-ng.mjs

@@ -6296,6 +6296,187 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
+/** A single step rendered inside an {@link IStepper}. */
+class IStep {
+    /** Primary text shown in the step navigation. */
+    label;
+    /** Optional supporting text shown below the label. */
+    description;
+    /** Optional PrimeIcons class used instead of the step number. */
+    icon;
+    /** Marks the step as successfully completed. */
+    completed = false;
+    /** Marks the step as optional. */
+    optional = false;
+    /** Prevents the step from being selected. */
+    disabled = false;
+    /** Projected step content. */
+    contentTemplate;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: IStep, isStandalone: true, selector: "i-step", inputs: { label: "label", description: "description", icon: "icon", completed: "completed", optional: "optional", disabled: "disabled" }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: `
+    <ng-template #contentTemplate>
+      <ng-content></ng-content>
+    </ng-template>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IStep, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'i-step',
+                    standalone: true,
+                    template: `
+    <ng-template #contentTemplate>
+      <ng-content></ng-content>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { label: [{
+                type: Input,
+                args: [{ required: true }]
+            }], description: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], completed: [{
+                type: Input
+            }], optional: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], contentTemplate: [{
+                type: ViewChild,
+                args: ['contentTemplate', { static: true }]
+            }] } });
+
+/**
+ * Guided, stateful navigation for multi-step workflows.
+ *
+ * @example
+ * ```html
+ * <i-stepper [(activeIndex)]="activeStep" [linear]="true">
+ *   <i-step label="Details" description="Name and access" [completed]="detailsValid">
+ *     Details form
+ *   </i-step>
+ *   <i-step label="Columns" [disabled]="!detailsValid">
+ *     Column selection
+ *   </i-step>
+ * </i-stepper>
+ * ```
+ */
+class IStepper {
+    /** Zero-based index of the active step. */
+    activeIndex = 0;
+    /** Prevents skipping incomplete steps when enabled. */
+    linear = false;
+    /** Navigation layout. Horizontal steppers collapse to vertical on small screens. */
+    orientation = 'horizontal';
+    /** Accessible label for the step navigation. */
+    ariaLabel = 'Progress';
+    /** Supports two-way binding of the active step. */
+    activeIndexChange = new EventEmitter();
+    /** Emitted after the user selects a different step. */
+    onChange = new EventEmitter();
+    stepComponents;
+    componentId = UniqueComponentId('i-stepper-');
+    steps = [];
+    ngAfterContentInit() {
+        this.syncSteps();
+        this.stepComponents.changes.subscribe(() => this.syncSteps());
+    }
+    selectStep(event, index) {
+        if (index === this.activeIndex || !this.canSelect(index)) {
+            return;
+        }
+        const previousIndex = this.activeIndex;
+        this.activeIndex = index;
+        this.activeIndexChange.emit(index);
+        this.onChange.emit({ originalEvent: event, index, previousIndex });
+    }
+    canSelect(index) {
+        const step = this.steps[index];
+        if (!step || step.disabled) {
+            return false;
+        }
+        if (!this.linear || index <= this.activeIndex) {
+            return true;
+        }
+        return this.steps.slice(0, index).every(item => item.completed || item.optional);
+    }
+    onKeyDown(event, index) {
+        const directionKeys = this.orientation === 'vertical'
+            ? ['ArrowUp', 'ArrowDown']
+            : ['ArrowLeft', 'ArrowRight'];
+        if (event.key === directionKeys[0]) {
+            this.focusAdjacent(index, -1);
+            event.preventDefault();
+        }
+        else if (event.key === directionKeys[1]) {
+            this.focusAdjacent(index, 1);
+            event.preventDefault();
+        }
+        else if (event.key === 'Home') {
+            this.focusBoundary(0, 1);
+            event.preventDefault();
+        }
+        else if (event.key === 'End') {
+            this.focusBoundary(this.steps.length - 1, -1);
+            event.preventDefault();
+        }
+    }
+    syncSteps() {
+        this.steps = this.stepComponents.toArray();
+        if (this.steps.length === 0) {
+            this.activeIndex = 0;
+            return;
+        }
+        this.activeIndex = Math.min(Math.max(this.activeIndex, 0), this.steps.length - 1);
+    }
+    focusAdjacent(index, direction) {
+        let nextIndex = index + direction;
+        while (nextIndex >= 0 && nextIndex < this.steps.length) {
+            if (this.canSelect(nextIndex)) {
+                this.focusStep(nextIndex);
+                return;
+            }
+            nextIndex += direction;
+        }
+    }
+    focusBoundary(index, direction) {
+        let candidate = index;
+        while (candidate >= 0 && candidate < this.steps.length) {
+            if (this.canSelect(candidate)) {
+                this.focusStep(candidate);
+                return;
+            }
+            candidate += direction;
+        }
+    }
+    focusStep(index) {
+        document.getElementById(`${this.componentId}-step-${index}`)?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IStepper, isStandalone: true, selector: "i-stepper", inputs: { activeIndex: "activeIndex", linear: "linear", orientation: "orientation", ariaLabel: "ariaLabel" }, outputs: { activeIndexChange: "activeIndexChange", onChange: "onChange" }, queries: [{ propertyName: "stepComponents", predicate: IStep }], ngImport: i0, template: "<div\n  class=\"i-stepper\"\n  [ngClass]=\"'i-stepper--' + orientation\"\n  [attr.id]=\"componentId\"\n>\n  <ol class=\"i-stepper__navigation\" [attr.aria-label]=\"ariaLabel\">\n    @for (step of steps; track step; let index = $index; let last = $last) {\n      <li\n        class=\"i-stepper__item\"\n        [class.i-stepper__item--active]=\"activeIndex === index\"\n        [class.i-stepper__item--completed]=\"step.completed\"\n        [class.i-stepper__item--disabled]=\"!canSelect(index)\"\n      >\n        <button\n          class=\"i-stepper__trigger\"\n          type=\"button\"\n          [attr.id]=\"componentId + '-step-' + index\"\n          [attr.aria-current]=\"activeIndex === index ? 'step' : null\"\n          [attr.aria-controls]=\"componentId + '-panel-' + index\"\n          [attr.aria-describedby]=\"step.description ? componentId + '-description-' + index : null\"\n          [attr.tabindex]=\"activeIndex === index ? 0 : -1\"\n          [disabled]=\"!canSelect(index)\"\n          (click)=\"selectStep($event, index)\"\n          (keydown)=\"onKeyDown($event, index)\"\n        >\n          <span class=\"i-stepper__indicator\" aria-hidden=\"true\">\n            @if (step.icon) {\n              <i [ngClass]=\"step.icon\" class=\"i-stepper__icon\"></i>\n            } @else {\n              {{ index + 1 }}\n            }\n            @if (step.completed) {\n              <span class=\"i-stepper__complete-mark\">\n                <i class=\"pi pi-check\"></i>\n              </span>\n            }\n          </span>\n          <span class=\"i-stepper__copy\">\n            <span class=\"i-stepper__meta\">\n              <span>Step {{ index + 1 }} of {{ steps.length }}</span>\n              @if (step.completed) {\n                <span class=\"i-stepper__status i-stepper__status--completed\">Completed</span>\n              } @else if (step.optional) {\n                <span class=\"i-stepper__status\">Optional</span>\n              }\n            </span>\n            <span class=\"i-stepper__label\">{{ step.label }}</span>\n            @if (step.description) {\n              <span\n                class=\"i-stepper__description\"\n                [attr.id]=\"componentId + '-description-' + index\"\n              >{{ step.description }}</span>\n            }\n          </span>\n          <i class=\"pi pi-chevron-right i-stepper__chevron\" aria-hidden=\"true\"></i>\n        </button>\n        @if (!last) {\n          <span class=\"i-stepper__connector\" aria-hidden=\"true\"></span>\n        }\n      </li>\n    }\n  </ol>\n\n  @for (step of steps; track step; let index = $index) {\n    <section\n      class=\"i-stepper__panel\"\n      [class.i-stepper__panel--active]=\"activeIndex === index\"\n      [attr.id]=\"componentId + '-panel-' + index\"\n      [attr.aria-labelledby]=\"componentId + '-step-' + index\"\n      [attr.hidden]=\"activeIndex !== index || null\"\n      role=\"region\"\n    >\n      @if (activeIndex === index) {\n        <ng-container [ngTemplateOutlet]=\"step.contentTemplate\"></ng-container>\n      }\n    </section>\n  }\n</div>\n", styles: [".i-stepper{color:var(--color-text-primary)}.i-stepper__trigger{border-color:var(--color-border);background:var(--surface-card)}.i-stepper__trigger:hover:not(:disabled){background:var(--surface-hover);border-color:color-mix(in srgb,var(--color-primary) 35%,var(--color-border));transform:translateY(-1px)}.i-stepper__trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.i-stepper__trigger:disabled{color:var(--color-text-disabled);cursor:not-allowed}.i-stepper__indicator{border-color:var(--color-border);background:var(--surface-ground);color:var(--color-text-secondary)}.i-stepper__description,.i-stepper__meta{color:var(--color-text-secondary)}.i-stepper__status{background:var(--surface-hover)}.i-stepper__status--completed{background:color-mix(in srgb,var(--color-success) 12%,transparent);color:var(--color-success)}.i-stepper__complete-mark{border-color:var(--surface-card);background:var(--color-success);color:var(--color-contrast-inverse)}.i-stepper__connector{background:var(--color-border)}.i-stepper__item--active .i-stepper__trigger{border-color:color-mix(in srgb,var(--color-primary) 55%,var(--color-border));box-shadow:0 6px 18px color-mix(in srgb,var(--color-primary) 12%,transparent)}.i-stepper__item--active .i-stepper__indicator{border-color:color-mix(in srgb,var(--color-primary) 35%,transparent);background:color-mix(in srgb,var(--color-primary) 10%,var(--surface-card));color:var(--color-primary)}.i-stepper__item--active .i-stepper__label{color:var(--color-primary)}.i-stepper__item--active .i-stepper__chevron{color:var(--color-primary);opacity:1;transform:translate(0)}.i-stepper__item--completed .i-stepper__indicator{border-color:var(--color-success);background:color-mix(in srgb,var(--color-success) 10%,var(--surface-card));color:var(--color-success)}.i-stepper__item--completed .i-stepper__connector{background:var(--color-success)}.i-stepper__item--disabled{opacity:.58}.i-stepper{display:flex;width:100%}.i-stepper--horizontal{flex-direction:column}.i-stepper--horizontal .i-stepper__navigation{display:flex;width:100%;align-items:stretch}.i-stepper--horizontal .i-stepper__item{display:flex;flex:1 1 0;align-items:center;min-width:0}.i-stepper--horizontal .i-stepper__trigger{flex:1 1 auto;align-self:stretch}.i-stepper--horizontal .i-stepper__connector{flex:0 0 24px;height:2px;margin:0 6px}.i-stepper--vertical{flex-direction:row;gap:24px}.i-stepper--vertical .i-stepper__navigation{flex:0 0 min(280px,35%)}.i-stepper--vertical .i-stepper__item{position:relative;padding-bottom:12px}.i-stepper--vertical .i-stepper__trigger{width:100%}.i-stepper--vertical .i-stepper__connector{position:absolute;top:66px;bottom:0;left:34px;width:2px}.i-stepper--vertical .i-stepper__panel{flex:1 1 auto;min-width:0}.i-stepper__navigation{box-sizing:border-box;margin:0;padding:0;list-style:none}.i-stepper__trigger{position:relative;display:flex;align-items:center;gap:12px;min-width:0;min-height:82px;padding:14px;overflow:hidden;border:1px solid;border-radius:8px;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}.i-stepper__indicator{position:relative;display:inline-flex;flex:0 0 42px;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid;border-radius:10px;font-weight:600;transition:background .2s,border-color .2s,color .2s}.i-stepper__icon{font-size:18px}.i-stepper__complete-mark{position:absolute;right:-5px;bottom:-5px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:2px solid;border-radius:50%;font-size:9px}.i-stepper__copy,.i-stepper__label,.i-stepper__description{display:block}.i-stepper__copy{flex:1 1 auto;min-width:0}.i-stepper__meta{display:flex;align-items:center;gap:7px;margin-bottom:4px;font-size:.72em;font-weight:600;letter-spacing:.035em;line-height:1.2;text-transform:uppercase}.i-stepper__status{display:inline-flex;align-items:center;min-height:18px;padding:0 6px;border-radius:999px;font-size:.9em;letter-spacing:.02em}.i-stepper__label{font-weight:600;line-height:1.3}.i-stepper__description{margin-top:3px;font-size:.8em;line-height:1.35}.i-stepper__chevron{flex:0 0 auto;font-size:11px;opacity:0;transform:translate(-4px);transition:opacity .2s,transform .2s}.i-stepper__panel{display:none;padding-top:24px}.i-stepper__panel--active{display:block}@media(max-width:768px){.i-stepper--horizontal .i-stepper__navigation{flex-direction:column}.i-stepper--horizontal .i-stepper__item{position:relative;padding-bottom:10px}.i-stepper--horizontal .i-stepper__connector{position:absolute;top:82px;bottom:0;left:34px;width:2px;height:auto;margin:0}.i-stepper--vertical{flex-direction:column;gap:0}.i-stepper--vertical .i-stepper__navigation{flex-basis:auto}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IStepper, decorators: [{
+            type: Component,
+            args: [{ selector: 'i-stepper', standalone: true, imports: [NgClass, NgTemplateOutlet], template: "<div\n  class=\"i-stepper\"\n  [ngClass]=\"'i-stepper--' + orientation\"\n  [attr.id]=\"componentId\"\n>\n  <ol class=\"i-stepper__navigation\" [attr.aria-label]=\"ariaLabel\">\n    @for (step of steps; track step; let index = $index; let last = $last) {\n      <li\n        class=\"i-stepper__item\"\n        [class.i-stepper__item--active]=\"activeIndex === index\"\n        [class.i-stepper__item--completed]=\"step.completed\"\n        [class.i-stepper__item--disabled]=\"!canSelect(index)\"\n      >\n        <button\n          class=\"i-stepper__trigger\"\n          type=\"button\"\n          [attr.id]=\"componentId + '-step-' + index\"\n          [attr.aria-current]=\"activeIndex === index ? 'step' : null\"\n          [attr.aria-controls]=\"componentId + '-panel-' + index\"\n          [attr.aria-describedby]=\"step.description ? componentId + '-description-' + index : null\"\n          [attr.tabindex]=\"activeIndex === index ? 0 : -1\"\n          [disabled]=\"!canSelect(index)\"\n          (click)=\"selectStep($event, index)\"\n          (keydown)=\"onKeyDown($event, index)\"\n        >\n          <span class=\"i-stepper__indicator\" aria-hidden=\"true\">\n            @if (step.icon) {\n              <i [ngClass]=\"step.icon\" class=\"i-stepper__icon\"></i>\n            } @else {\n              {{ index + 1 }}\n            }\n            @if (step.completed) {\n              <span class=\"i-stepper__complete-mark\">\n                <i class=\"pi pi-check\"></i>\n              </span>\n            }\n          </span>\n          <span class=\"i-stepper__copy\">\n            <span class=\"i-stepper__meta\">\n              <span>Step {{ index + 1 }} of {{ steps.length }}</span>\n              @if (step.completed) {\n                <span class=\"i-stepper__status i-stepper__status--completed\">Completed</span>\n              } @else if (step.optional) {\n                <span class=\"i-stepper__status\">Optional</span>\n              }\n            </span>\n            <span class=\"i-stepper__label\">{{ step.label }}</span>\n            @if (step.description) {\n              <span\n                class=\"i-stepper__description\"\n                [attr.id]=\"componentId + '-description-' + index\"\n              >{{ step.description }}</span>\n            }\n          </span>\n          <i class=\"pi pi-chevron-right i-stepper__chevron\" aria-hidden=\"true\"></i>\n        </button>\n        @if (!last) {\n          <span class=\"i-stepper__connector\" aria-hidden=\"true\"></span>\n        }\n      </li>\n    }\n  </ol>\n\n  @for (step of steps; track step; let index = $index) {\n    <section\n      class=\"i-stepper__panel\"\n      [class.i-stepper__panel--active]=\"activeIndex === index\"\n      [attr.id]=\"componentId + '-panel-' + index\"\n      [attr.aria-labelledby]=\"componentId + '-step-' + index\"\n      [attr.hidden]=\"activeIndex !== index || null\"\n      role=\"region\"\n    >\n      @if (activeIndex === index) {\n        <ng-container [ngTemplateOutlet]=\"step.contentTemplate\"></ng-container>\n      }\n    </section>\n  }\n</div>\n", styles: [".i-stepper{color:var(--color-text-primary)}.i-stepper__trigger{border-color:var(--color-border);background:var(--surface-card)}.i-stepper__trigger:hover:not(:disabled){background:var(--surface-hover);border-color:color-mix(in srgb,var(--color-primary) 35%,var(--color-border));transform:translateY(-1px)}.i-stepper__trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.i-stepper__trigger:disabled{color:var(--color-text-disabled);cursor:not-allowed}.i-stepper__indicator{border-color:var(--color-border);background:var(--surface-ground);color:var(--color-text-secondary)}.i-stepper__description,.i-stepper__meta{color:var(--color-text-secondary)}.i-stepper__status{background:var(--surface-hover)}.i-stepper__status--completed{background:color-mix(in srgb,var(--color-success) 12%,transparent);color:var(--color-success)}.i-stepper__complete-mark{border-color:var(--surface-card);background:var(--color-success);color:var(--color-contrast-inverse)}.i-stepper__connector{background:var(--color-border)}.i-stepper__item--active .i-stepper__trigger{border-color:color-mix(in srgb,var(--color-primary) 55%,var(--color-border));box-shadow:0 6px 18px color-mix(in srgb,var(--color-primary) 12%,transparent)}.i-stepper__item--active .i-stepper__indicator{border-color:color-mix(in srgb,var(--color-primary) 35%,transparent);background:color-mix(in srgb,var(--color-primary) 10%,var(--surface-card));color:var(--color-primary)}.i-stepper__item--active .i-stepper__label{color:var(--color-primary)}.i-stepper__item--active .i-stepper__chevron{color:var(--color-primary);opacity:1;transform:translate(0)}.i-stepper__item--completed .i-stepper__indicator{border-color:var(--color-success);background:color-mix(in srgb,var(--color-success) 10%,var(--surface-card));color:var(--color-success)}.i-stepper__item--completed .i-stepper__connector{background:var(--color-success)}.i-stepper__item--disabled{opacity:.58}.i-stepper{display:flex;width:100%}.i-stepper--horizontal{flex-direction:column}.i-stepper--horizontal .i-stepper__navigation{display:flex;width:100%;align-items:stretch}.i-stepper--horizontal .i-stepper__item{display:flex;flex:1 1 0;align-items:center;min-width:0}.i-stepper--horizontal .i-stepper__trigger{flex:1 1 auto;align-self:stretch}.i-stepper--horizontal .i-stepper__connector{flex:0 0 24px;height:2px;margin:0 6px}.i-stepper--vertical{flex-direction:row;gap:24px}.i-stepper--vertical .i-stepper__navigation{flex:0 0 min(280px,35%)}.i-stepper--vertical .i-stepper__item{position:relative;padding-bottom:12px}.i-stepper--vertical .i-stepper__trigger{width:100%}.i-stepper--vertical .i-stepper__connector{position:absolute;top:66px;bottom:0;left:34px;width:2px}.i-stepper--vertical .i-stepper__panel{flex:1 1 auto;min-width:0}.i-stepper__navigation{box-sizing:border-box;margin:0;padding:0;list-style:none}.i-stepper__trigger{position:relative;display:flex;align-items:center;gap:12px;min-width:0;min-height:82px;padding:14px;overflow:hidden;border:1px solid;border-radius:8px;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}.i-stepper__indicator{position:relative;display:inline-flex;flex:0 0 42px;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid;border-radius:10px;font-weight:600;transition:background .2s,border-color .2s,color .2s}.i-stepper__icon{font-size:18px}.i-stepper__complete-mark{position:absolute;right:-5px;bottom:-5px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:2px solid;border-radius:50%;font-size:9px}.i-stepper__copy,.i-stepper__label,.i-stepper__description{display:block}.i-stepper__copy{flex:1 1 auto;min-width:0}.i-stepper__meta{display:flex;align-items:center;gap:7px;margin-bottom:4px;font-size:.72em;font-weight:600;letter-spacing:.035em;line-height:1.2;text-transform:uppercase}.i-stepper__status{display:inline-flex;align-items:center;min-height:18px;padding:0 6px;border-radius:999px;font-size:.9em;letter-spacing:.02em}.i-stepper__label{font-weight:600;line-height:1.3}.i-stepper__description{margin-top:3px;font-size:.8em;line-height:1.35}.i-stepper__chevron{flex:0 0 auto;font-size:11px;opacity:0;transform:translate(-4px);transition:opacity .2s,transform .2s}.i-stepper__panel{display:none;padding-top:24px}.i-stepper__panel--active{display:block}@media(max-width:768px){.i-stepper--horizontal .i-stepper__navigation{flex-direction:column}.i-stepper--horizontal .i-stepper__item{position:relative;padding-bottom:10px}.i-stepper--horizontal .i-stepper__connector{position:absolute;top:82px;bottom:0;left:34px;width:2px;height:auto;margin:0}.i-stepper--vertical{flex-direction:column;gap:0}.i-stepper--vertical .i-stepper__navigation{flex-basis:auto}}\n"] }]
+        }], propDecorators: { activeIndex: [{
+                type: Input
+            }], linear: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], activeIndexChange: [{
+                type: Output
+            }], onChange: [{
+                type: Output
+            }], stepComponents: [{
+                type: ContentChildren,
+                args: [IStep]
+            }] } });
+
 /**
  * Tab Panel Component
  *
@@ -8993,36 +9174,6 @@ const CHART_COLOR_PALETTE = {
         950: '#020617',
     },
 };
-/**
- * Chart Component
- *
- * A Chart.js-based chart component for displaying various chart types.
- * Supports multiple charts in a responsive grid layout.
- *
- * @example
- * ```html
- * <i-chart
- *   [charts]="myCharts"
- *   height="25rem">
- * </i-chart>
- * ```
- *
- * @example
- * ```typescript
- * myCharts: IChartData[] = [
- *   {
- *     chartId: 'sales-chart',
- *     chartType: 'bar',
- *     labels: ['Jan', 'Feb', 'Mar'],
- *     dataSets: [{
- *       label: 'Sales',
- *       data: [100, 200, 150],
- *       backgroundColors: ['--blue-500', '--green-500', '--orange-500']
- *     }]
- *   }
- * ];
- * ```
- */
 class IChart {
     /**
      * Array of chart data objects to render
@@ -9053,6 +9204,11 @@ class IChart {
      * @internal
      */
     chartInstances = [];
+    /**
+     * Legend items generated from Chart.js for each chart instance.
+     * @internal
+     */
+    chartLegendItems = [];
     /**
      * Flag to track if component has initialized
      * @internal
@@ -9123,6 +9279,7 @@ class IChart {
             if (chartDisplay && canvasRef?.nativeElement) {
                 const chartInstance = this.createChartInstance(canvasRef.nativeElement, chartDisplay);
                 this.chartInstances.push(chartInstance);
+                this.updateLegendItems(index);
             }
         });
     }
@@ -9136,6 +9293,7 @@ class IChart {
         });
         this.chartInstances = [];
         this.chartDisplays = [];
+        this.chartLegendItems = [];
     }
     /**
      * Create a Chart.js instance
@@ -9221,6 +9379,7 @@ class IChart {
             responsive: this.responsive,
             plugins: {
                 legend: {
+                    display: false,
                     labels: {
                         color: textColor,
                     },
@@ -9255,6 +9414,7 @@ class IChart {
                     ...baseOptions,
                     plugins: {
                         legend: {
+                            display: false,
                             labels: {
                                 color: textColor,
                             },
@@ -9272,6 +9432,7 @@ class IChart {
                     ...baseOptions,
                     plugins: {
                         legend: {
+                            display: false,
                             labels: {
                                 color: textColor,
                             },
@@ -9447,6 +9608,51 @@ class IChart {
         // If it's already rgba, leave as-is (user specified their own alpha)
         return color;
     }
+    /**
+     * Get legend items for a chart display.
+     * @param chartIndex - The index of the chart display
+     * @returns Legend items generated by Chart.js
+     */
+    getLegendItems(chartIndex) {
+        return this.chartLegendItems[chartIndex] ?? [];
+    }
+    /**
+     * Toggle a chart legend item using the same Chart.js behavior as the built-in legend.
+     * @param chartIndex - The index of the chart display
+     * @param item - The legend item to toggle
+     */
+    toggleLegendItem(chartIndex, item) {
+        const chart = this.chartInstances[chartIndex];
+        if (!chart) {
+            return;
+        }
+        if (item.datasetIndex !== undefined) {
+            chart.setDatasetVisibility(item.datasetIndex, !chart.isDatasetVisible(item.datasetIndex));
+        }
+        else if (item.index !== undefined) {
+            chart.toggleDataVisibility(item.index);
+        }
+        chart.update();
+        this.updateLegendItems(chartIndex);
+    }
+    /**
+     * Refresh the custom legend items for a chart instance.
+     * @internal
+     */
+    updateLegendItems(chartIndex) {
+        const chart = this.chartInstances[chartIndex];
+        const generateLabels = chart?.options.plugins?.legend?.labels?.generateLabels;
+        if (!chart || !generateLabels) {
+            this.chartLegendItems[chartIndex] = [];
+            return;
+        }
+        this.chartLegendItems[chartIndex] = generateLabels(chart).map((item) => ({
+            ...item,
+            fillStyleText: String(item.fillStyle ?? 'transparent'),
+            strokeStyleText: String(item.strokeStyle ?? item.fillStyle ?? 'transparent'),
+        }));
+        this.cdr.detectChanges();
+    }
     /**
      * Get the height style for a chart display
      * @param display - The chart display configuration
@@ -9463,11 +9669,11 @@ class IChart {
         return this.chartInstances.length;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IChart, isStandalone: true, selector: "i-chart", inputs: { charts: "charts", height: "height", responsive: "responsive" }, viewQueries: [{ propertyName: "canvasElements", predicate: ["chartCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"i-charts-container\">\n  @for (chartDisplay of chartDisplays; track chartDisplay.id) {\n    <div class=\"i-chart-item\" [style.height]=\"getChartHeightStyle(chartDisplay)\">\n      <canvas #chartCanvas></canvas>\n    </div>\n  }\n</div>\n", styles: [":host{--chart-grid-color: var(--surface-border);--chart-text-color: var(--color-text-primary);--chart-text-secondary: var(--color-text-secondary)}.i-charts-container{display:flex;flex-wrap:wrap;width:100%;gap:4rem}.i-chart-item{flex:1 1 45%;min-width:300px;box-sizing:border-box}@media(max-width:768px){.i-charts-container{flex-direction:column}.i-chart-item{width:100%}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: IChart, isStandalone: true, selector: "i-chart", inputs: { charts: "charts", height: "height", responsive: "responsive" }, viewQueries: [{ propertyName: "canvasElements", predicate: ["chartCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"i-charts-container\">\n  @for (chartDisplay of chartDisplays; track chartDisplay.id; let chartIndex = $index) {\n    <div class=\"i-chart-panel\">\n      <div class=\"i-chart-item\" [style.height]=\"getChartHeightStyle(chartDisplay)\">\n        <canvas #chartCanvas></canvas>\n      </div>\n\n      @if (getLegendItems(chartIndex).length) {\n        <div class=\"i-chart-legend\" role=\"list\" aria-label=\"Chart data series\">\n          @for (legendItem of getLegendItems(chartIndex); track $index) {\n            <button\n              class=\"i-chart-legend-item\"\n              type=\"button\"\n              role=\"listitem\"\n              [class.i-chart-legend-item-hidden]=\"legendItem.hidden\"\n              [attr.aria-pressed]=\"!legendItem.hidden\"\n              (click)=\"toggleLegendItem(chartIndex, legendItem)\"\n            >\n              <span\n                class=\"i-chart-legend-marker\"\n                [style.background-color]=\"legendItem.fillStyleText\"\n                [style.border-color]=\"legendItem.strokeStyleText\"\n              ></span>\n              <span class=\"i-chart-legend-label\">{{ legendItem.text }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--chart-grid-color: var(--surface-border);--chart-text-color: var(--color-text-primary);--chart-text-secondary: var(--color-text-secondary)}.i-charts-container{display:flex;flex-wrap:wrap;width:100%;gap:4rem}.i-chart-panel{flex:1 1 45%;min-width:300px;box-sizing:border-box}.i-chart-item{width:100%;box-sizing:border-box}.i-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem 1rem;margin-top:1rem;padding:.75rem 1rem;border:1px solid var(--surface-border);border-radius:var(--border-radius, .5rem);background:var(--surface-card, var(--surface-ground, transparent))}.i-chart-legend-item{display:inline-flex;align-items:center;gap:.5rem;min-width:0;padding:.25rem .5rem;border:0;border-radius:var(--border-radius, .5rem);background:transparent;color:var(--chart-text-color);font:inherit;cursor:pointer;transition:background-color .2s ease,opacity .2s ease}.i-chart-legend-item:hover,.i-chart-legend-item:focus-visible{background:var(--surface-hover, rgba(148, 163, 184, .12));outline:none}.i-chart-legend-item-hidden{opacity:.55}.i-chart-legend-item-hidden .i-chart-legend-label{text-decoration:line-through}.i-chart-legend-marker{width:.875rem;height:.875rem;flex:0 0 .875rem;border:1px solid;border-radius:.25rem}.i-chart-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.i-charts-container{flex-direction:column}.i-chart-panel{width:100%}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: IChart, decorators: [{
             type: Component,
-            args: [{ selector: 'i-chart', standalone: true, imports: [], template: "<div class=\"i-charts-container\">\n  @for (chartDisplay of chartDisplays; track chartDisplay.id) {\n    <div class=\"i-chart-item\" [style.height]=\"getChartHeightStyle(chartDisplay)\">\n      <canvas #chartCanvas></canvas>\n    </div>\n  }\n</div>\n", styles: [":host{--chart-grid-color: var(--surface-border);--chart-text-color: var(--color-text-primary);--chart-text-secondary: var(--color-text-secondary)}.i-charts-container{display:flex;flex-wrap:wrap;width:100%;gap:4rem}.i-chart-item{flex:1 1 45%;min-width:300px;box-sizing:border-box}@media(max-width:768px){.i-charts-container{flex-direction:column}.i-chart-item{width:100%}}\n"] }]
+            args: [{ selector: 'i-chart', standalone: true, imports: [], template: "<div class=\"i-charts-container\">\n  @for (chartDisplay of chartDisplays; track chartDisplay.id; let chartIndex = $index) {\n    <div class=\"i-chart-panel\">\n      <div class=\"i-chart-item\" [style.height]=\"getChartHeightStyle(chartDisplay)\">\n        <canvas #chartCanvas></canvas>\n      </div>\n\n      @if (getLegendItems(chartIndex).length) {\n        <div class=\"i-chart-legend\" role=\"list\" aria-label=\"Chart data series\">\n          @for (legendItem of getLegendItems(chartIndex); track $index) {\n            <button\n              class=\"i-chart-legend-item\"\n              type=\"button\"\n              role=\"listitem\"\n              [class.i-chart-legend-item-hidden]=\"legendItem.hidden\"\n              [attr.aria-pressed]=\"!legendItem.hidden\"\n              (click)=\"toggleLegendItem(chartIndex, legendItem)\"\n            >\n              <span\n                class=\"i-chart-legend-marker\"\n                [style.background-color]=\"legendItem.fillStyleText\"\n                [style.border-color]=\"legendItem.strokeStyleText\"\n              ></span>\n              <span class=\"i-chart-legend-label\">{{ legendItem.text }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--chart-grid-color: var(--surface-border);--chart-text-color: var(--color-text-primary);--chart-text-secondary: var(--color-text-secondary)}.i-charts-container{display:flex;flex-wrap:wrap;width:100%;gap:4rem}.i-chart-panel{flex:1 1 45%;min-width:300px;box-sizing:border-box}.i-chart-item{width:100%;box-sizing:border-box}.i-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem 1rem;margin-top:1rem;padding:.75rem 1rem;border:1px solid var(--surface-border);border-radius:var(--border-radius, .5rem);background:var(--surface-card, var(--surface-ground, transparent))}.i-chart-legend-item{display:inline-flex;align-items:center;gap:.5rem;min-width:0;padding:.25rem .5rem;border:0;border-radius:var(--border-radius, .5rem);background:transparent;color:var(--chart-text-color);font:inherit;cursor:pointer;transition:background-color .2s ease,opacity .2s ease}.i-chart-legend-item:hover,.i-chart-legend-item:focus-visible{background:var(--surface-hover, rgba(148, 163, 184, .12));outline:none}.i-chart-legend-item-hidden{opacity:.55}.i-chart-legend-item-hidden .i-chart-legend-label{text-decoration:line-through}.i-chart-legend-marker{width:.875rem;height:.875rem;flex:0 0 .875rem;border:1px solid;border-radius:.25rem}.i-chart-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.i-charts-container{flex-direction:column}.i-chart-panel{width:100%}}\n"] }]
         }], propDecorators: { charts: [{
                 type: Input
             }], height: [{
@@ -9900,5 +10106,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractDialog, CLAIMS_CHECKER, ConfirmationDialogComponent, ConfirmationDialogService, DataUpdateEventService, DialogService, EmptyStateComponent, IAccordion, IAccordionList, IButton, ICalendar, ICard, IChart, ICheckbox, IChip, IChipsComponent, IDialog, IDialogActions, IDialogBase, IDivider, IInputText, IListbox, IMessage, IMultiSelect, IOverlayPanel, IPanel, IPlaceholder, IProgressSpinner, IRadioButton, ISelect, ITabPanel, ITable, ITabs, ITag, ITextarea, IToggle, ITreeView, IWhisper, LayoutComponent, LayoutService, LocalStorageColorSchemeKey, MenuComponent, NoContentComponent, SeoService, SidebarComponent, StructuredDataService, TooltipComponent, TooltipDirective, TopbarComponent, UniqueComponentId, WhisperService, ZIndexUtils, lastId, provideMenuClaimsChecker };
+export { AbstractDialog, CLAIMS_CHECKER, ConfirmationDialogComponent, ConfirmationDialogService, DataUpdateEventService, DialogService, EmptyStateComponent, IAccordion, IAccordionList, IButton, ICalendar, ICard, IChart, ICheckbox, IChip, IChipsComponent, IDialog, IDialogActions, IDialogBase, IDivider, IInputText, IListbox, IMessage, IMultiSelect, IOverlayPanel, IPanel, IPlaceholder, IProgressSpinner, IRadioButton, ISelect, IStep, IStepper, ITabPanel, ITable, ITabs, ITag, ITextarea, IToggle, ITreeView, IWhisper, LayoutComponent, LayoutService, LocalStorageColorSchemeKey, MenuComponent, NoContentComponent, SeoService, SidebarComponent, StructuredDataService, TooltipComponent, TooltipDirective, TopbarComponent, UniqueComponentId, WhisperService, ZIndexUtils, lastId, provideMenuClaimsChecker };
 //# sourceMappingURL=invensys-ng.mjs.map