@mxtommy/kip 3.9.0-beta.2 → 3.9.0-beta.21

package/public/chunk-YGJLBLOX.js

@@ -0,0 +1,2708 @@
+import {
+  DatasetService,
+  MatCheckbox,
+  MatRadioModule
+} from "./chunk-63ILPRXC.js";
+import {
+  MatCell,
+  MatCellDef,
+  MatColumnDef,
+  MatHeaderCell,
+  MatHeaderCellDef,
+  MatHeaderRow,
+  MatHeaderRowDef,
+  MatNoDataRow,
+  MatPaginator,
+  MatRow,
+  MatRowDef,
+  MatSort,
+  MatSortHeader,
+  MatTable,
+  MatTableDataSource
+} from "./chunk-B3LKEWZP.js";
+import {
+  MatOption,
+  MatSelect
+} from "./chunk-65ZWQBS6.js";
+import {
+  MatIcon,
+  MatIconModule
+} from "./chunk-UQYTD5AC.js";
+import {
+  MatDivider
+} from "./chunk-MCEJWZB2.js";
+import {
+  ControlContainer,
+  DataService,
+  DefaultValueAccessor,
+  ErrorStateMatcher,
+  FormsModule,
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
+  MatFormField,
+  MatInput,
+  MatLabel,
+  MaxValidator,
+  MinValidator,
+  NgControlStatus,
+  NgControlStatusGroup,
+  NgForm,
+  NgModel,
+  NumberValueAccessor,
+  RequiredValidator,
+  cloneDeep_default,
+  ɵNgNoValidate
+} from "./chunk-BIBIW64D.js";
+import {
+  BidiModule,
+  CdkPortalOutlet,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  ContentChildren,
+  Directionality,
+  Directive,
+  ENTER,
+  ElementRef,
+  EventEmitter,
+  FocusKeyManager,
+  FocusMonitor,
+  Injectable,
+  InjectionToken,
+  Input,
+  MatButton,
+  MatCommonModule,
+  MatRipple,
+  MatRippleModule,
+  NgModule,
+  NgTemplateOutlet,
+  NgZone,
+  Optional,
+  Output,
+  Pipe,
+  Platform,
+  PortalModule,
+  QueryList,
+  Renderer2,
+  SPACE,
+  SkipSelf,
+  Subject,
+  Subscription,
+  TemplatePortal,
+  TemplateRef,
+  ViewChild,
+  ViewChildren,
+  ViewContainerRef,
+  ViewEncapsulation,
+  _CdkPrivateStyleLoader,
+  _IdGenerator,
+  _StructuralStylesLoader,
+  _VisuallyHiddenLoader,
+  _animationsDisabled,
+  _getFocusedElementPierceShadowDom,
+  booleanAttribute,
+  computed,
+  hasModifierKey,
+  inject,
+  map,
+  numberAttribute,
+  of,
+  setClassMetadata,
+  signal,
+  startWith,
+  switchMap,
+  takeUntil,
+  viewChild,
+  ɵsetClassDebugInfo,
+  ɵɵInheritDefinitionFeature,
+  ɵɵNgOnChangesFeature,
+  ɵɵProvidersFeature,
+  ɵɵadvance,
+  ɵɵattribute,
+  ɵɵclassMap,
+  ɵɵclassProp,
+  ɵɵconditional,
+  ɵɵconditionalCreate,
+  ɵɵcontentQuery,
+  ɵɵdefineComponent,
+  ɵɵdefineDirective,
+  ɵɵdefineInjectable,
+  ɵɵdefineInjector,
+  ɵɵdefineNgModule,
+  ɵɵdefinePipe,
+  ɵɵdomProperty,
+  ɵɵdomTemplate,
+  ɵɵelement,
+  ɵɵelementContainer,
+  ɵɵelementContainerEnd,
+  ɵɵelementContainerStart,
+  ɵɵelementEnd,
+  ɵɵelementStart,
+  ɵɵgetCurrentView,
+  ɵɵgetInheritedFactory,
+  ɵɵinterpolate1,
+  ɵɵlistener,
+  ɵɵloadQuery,
+  ɵɵnextContext,
+  ɵɵpipe,
+  ɵɵpipeBind2,
+  ɵɵprojection,
+  ɵɵprojectionDef,
+  ɵɵproperty,
+  ɵɵpureFunction0,
+  ɵɵpureFunction1,
+  ɵɵpureFunction3,
+  ɵɵqueryAdvance,
+  ɵɵqueryRefresh,
+  ɵɵreference,
+  ɵɵrepeater,
+  ɵɵrepeaterCreate,
+  ɵɵrepeaterTrackByIdentity,
+  ɵɵresetView,
+  ɵɵrestoreView,
+  ɵɵstyleProp,
+  ɵɵtemplate,
+  ɵɵtemplateRefExtractor,
+  ɵɵtext,
+  ɵɵtextInterpolate,
+  ɵɵtextInterpolate1,
+  ɵɵtwoWayBindingSet,
+  ɵɵtwoWayListener,
+  ɵɵtwoWayProperty,
+  ɵɵviewQuery,
+  ɵɵviewQuerySignal
+} from "./chunk-SDOP6T56.js";
+
+// src/app/core/pipes/filter-self.pipe.ts
+var FilterSelfPipe = class _FilterSelfPipe {
+  transform(values, filterSelf) {
+    if (!values || !values.length)
+      return [];
+    if (!filterSelf)
+      return values;
+    return values.filter((v) => v.includes("self"));
+  }
+  static \u0275fac = function FilterSelfPipe_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _FilterSelfPipe)();
+  };
+  static \u0275pipe = /* @__PURE__ */ \u0275\u0275definePipe({ name: "filterSelf", type: _FilterSelfPipe, pure: true });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(FilterSelfPipe, [{
+    type: Pipe,
+    args: [{
+      name: "filterSelf",
+      standalone: true
+    }]
+  }], null, null);
+})();
+
+// node_modules/@angular/cdk/fesm2022/stepper.mjs
+var _c0 = ["*"];
+function CdkStep_ng_template_0_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275projection(0);
+  }
+}
+var CdkStepHeader = class _CdkStepHeader {
+  _elementRef = inject(ElementRef);
+  constructor() {
+  }
+  /** Focuses the step header. */
+  focus() {
+    this._elementRef.nativeElement.focus();
+  }
+  static \u0275fac = function CdkStepHeader_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _CdkStepHeader)();
+  };
+  static \u0275dir = /* @__PURE__ */ \u0275\u0275defineDirective({
+    type: _CdkStepHeader,
+    selectors: [["", "cdkStepHeader", ""]],
+    hostAttrs: ["role", "tab"]
+  });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(CdkStepHeader, [{
+    type: Directive,
+    args: [{
+      selector: "[cdkStepHeader]",
+      host: {
+        "role": "tab"
+      }
+    }]
+  }], () => [], null);
+})();
+var CdkStepLabel = class _CdkStepLabel {
+  template = inject(TemplateRef);
+  constructor() {
+  }
+  static \u0275fac = function CdkStepLabel_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _CdkStepLabel)();
+  };
+  static \u0275dir = /* @__PURE__ */ \u0275\u0275defineDirective({
+    type: _CdkStepLabel,
+    selectors: [["", "cdkStepLabel", ""]]
+  });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(CdkStepLabel, [{
+    type: Directive,
+    args: [{
+      selector: "[cdkStepLabel]"
+    }]
+  }], () => [], null);
+})();
+var STEP_STATE = {
+  NUMBER: "number",
+  EDIT: "edit",
+  DONE: "done",
+  ERROR: "error"
+};
+var STEPPER_GLOBAL_OPTIONS = new InjectionToken("STEPPER_GLOBAL_OPTIONS");
+var CdkStep = class _CdkStep {
+  _stepperOptions;
+  _stepper = inject(CdkStepper);
+  _displayDefaultIndicatorType;
+  /** Template for step label if it exists. */
+  stepLabel;
+  /** Forms that have been projected into the step. */
+  _childForms;
+  /** Template for step content. */
+  content;
+  /** The top level abstract control of the step. */
+  stepControl;
+  /** Whether user has attempted to move away from the step. */
+  get interacted() {
+    return this._interacted();
+  }
+  set interacted(value) {
+    this._interacted.set(value);
+  }
+  _interacted = signal(false);
+  /** Emits when the user has attempted to move away from the step. */
+  interactedStream = new EventEmitter();
+  /** Plain text label of the step. */
+  label;
+  /** Error message to display when there's an error. */
+  errorMessage;
+  /** Aria label for the tab. */
+  ariaLabel;
+  /**
+   * Reference to the element that the tab is labelled by.
+   * Will be cleared if `aria-label` is set at the same time.
+   */
+  ariaLabelledby;
+  /** State of the step. */
+  get state() {
+    return this._state();
+  }
+  set state(value) {
+    this._state.set(value);
+  }
+  _state = signal(void 0);
+  /** Whether the user can return to this step once it has been marked as completed. */
+  get editable() {
+    return this._editable();
+  }
+  set editable(value) {
+    this._editable.set(value);
+  }
+  _editable = signal(true);
+  /** Whether the completion of step is optional. */
+  optional = false;
+  /** Whether step is marked as completed. */
+  get completed() {
+    const override = this._completedOverride();
+    const interacted = this._interacted();
+    if (override != null) {
+      return override;
+    }
+    return interacted && (!this.stepControl || this.stepControl.valid);
+  }
+  set completed(value) {
+    this._completedOverride.set(value);
+  }
+  _completedOverride = signal(null);
+  /** Current index of the step within the stepper. */
+  index = signal(-1);
+  /** Whether the step is selected. */
+  isSelected = computed(() => this._stepper.selectedIndex === this.index());
+  /** Type of indicator that should be shown for the step. */
+  indicatorType = computed(() => {
+    const selected = this.isSelected();
+    const completed = this.completed;
+    const defaultState = this._state() ?? STEP_STATE.NUMBER;
+    const editable = this._editable();
+    if (this._showError() && this.hasError && !selected) {
+      return STEP_STATE.ERROR;
+    }
+    if (this._displayDefaultIndicatorType) {
+      if (!completed || selected) {
+        return STEP_STATE.NUMBER;
+      }
+      return editable ? STEP_STATE.EDIT : STEP_STATE.DONE;
+    } else {
+      if (completed && !selected) {
+        return STEP_STATE.DONE;
+      } else if (completed && selected) {
+        return defaultState;
+      }
+      return editable && selected ? STEP_STATE.EDIT : defaultState;
+    }
+  });
+  /** Whether the user can navigate to the step. */
+  isNavigable = computed(() => {
+    const isSelected = this.isSelected();
+    const isCompleted = this.completed;
+    return isCompleted || isSelected || !this._stepper.linear;
+  });
+  /** Whether step has an error. */
+  get hasError() {
+    const customError = this._customError();
+    return customError == null ? this._getDefaultError() : customError;
+  }
+  set hasError(value) {
+    this._customError.set(value);
+  }
+  _customError = signal(null);
+  _getDefaultError() {
+    return this.interacted && !!this.stepControl?.invalid;
+  }
+  constructor() {
+    const stepperOptions = inject(STEPPER_GLOBAL_OPTIONS, {
+      optional: true
+    });
+    this._stepperOptions = stepperOptions ? stepperOptions : {};
+    this._displayDefaultIndicatorType = this._stepperOptions.displayDefaultIndicatorType !== false;
+  }
+  /** Selects this step component. */
+  select() {
+    this._stepper.selected = this;
+  }
+  /** Resets the step to its initial state. Note that this includes resetting form data. */
+  reset() {
+    this._interacted.set(false);
+    if (this._completedOverride() != null) {
+      this._completedOverride.set(false);
+    }
+    if (this._customError() != null) {
+      this._customError.set(false);
+    }
+    if (this.stepControl) {
+      this._childForms?.forEach((form) => form.resetForm?.());
+      this.stepControl.reset();
+    }
+  }
+  ngOnChanges() {
+    this._stepper._stateChanged();
+  }
+  _markAsInteracted() {
+    if (!this._interacted()) {
+      this._interacted.set(true);
+      this.interactedStream.emit(this);
+    }
+  }
+  /** Determines whether the error state can be shown. */
+  _showError() {
+    return this._stepperOptions.showError ?? this._customError() != null;
+  }
+  static \u0275fac = function CdkStep_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _CdkStep)();
+  };
+  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({
+    type: _CdkStep,
+    selectors: [["cdk-step"]],
+    contentQueries: function CdkStep_ContentQueries(rf, ctx, dirIndex) {
+      if (rf & 1) {
+        \u0275\u0275contentQuery(dirIndex, CdkStepLabel, 5);
+        \u0275\u0275contentQuery(
+          dirIndex,
+          // Note: we look for `ControlContainer` here, because both `NgForm` and `FormGroupDirective`
+          // provides themselves as such, but we don't want to have a concrete reference to both of
+          // the directives. The type is marked as `Partial` in case we run into a class that provides
+          // itself as `ControlContainer` but doesn't have the same interface as the directives.
+          ControlContainer,
+          5
+        );
+      }
+      if (rf & 2) {
+        let _t;
+        \u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx.stepLabel = _t.first);
+        \u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._childForms = _t);
+      }
+    },
+    viewQuery: function CdkStep_Query(rf, ctx) {
+      if (rf & 1) {
+        \u0275\u0275viewQuery(TemplateRef, 7);
+      }
+      if (rf & 2) {
+        let _t;
+        \u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx.content = _t.first);
+      }
+    },
+    inputs: {
+      stepControl: "stepControl",
+      label: "label",
+      errorMessage: "errorMessage",
+      ariaLabel: [0, "aria-label", "ariaLabel"],
+      ariaLabelledby: [0, "aria-labelledby", "ariaLabelledby"],
+      state: "state",
+      editable: [2, "editable", "editable", booleanAttribute],
+      optional: [2, "optional", "optional", booleanAttribute],
+      completed: [2, "completed", "completed", booleanAttribute],
+      hasError: [2, "hasError", "hasError", booleanAttribute]
+    },
+    outputs: {
+      interactedStream: "interacted"
+    },
+    exportAs: ["cdkStep"],
+    features: [\u0275\u0275NgOnChangesFeature],
+    ngContentSelectors: _c0,
+    decls: 1,
+    vars: 0,
+    template: function CdkStep_Template(rf, ctx) {
+      if (rf & 1) {
+        \u0275\u0275projectionDef();
+        \u0275\u0275domTemplate(0, CdkStep_ng_template_0_Template, 1, 0, "ng-template");
+      }
+    },
+    encapsulation: 2,
+    changeDetection: 0
+  });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(CdkStep, [{
+    type: Component,
+    args: [{
+      selector: "cdk-step",
+      exportAs: "cdkStep",
+      template: "<ng-template><ng-content/></ng-template>",
+      encapsulation: ViewEncapsulation.None,
+      changeDetection: ChangeDetectionStrategy.OnPush
+    }]
+  }], () => [], {
+    stepLabel: [{
+      type: ContentChild,
+      args: [CdkStepLabel]
+    }],
+    _childForms: [{
+      type: ContentChildren,
+      args: [
+        // Note: we look for `ControlContainer` here, because both `NgForm` and `FormGroupDirective`
+        // provides themselves as such, but we don't want to have a concrete reference to both of
+        // the directives. The type is marked as `Partial` in case we run into a class that provides
+        // itself as `ControlContainer` but doesn't have the same interface as the directives.
+        ControlContainer,
+        {
+          descendants: true
+        }
+      ]
+    }],
+    content: [{
+      type: ViewChild,
+      args: [TemplateRef, {
+        static: true
+      }]
+    }],
+    stepControl: [{
+      type: Input
+    }],
+    interactedStream: [{
+      type: Output,
+      args: ["interacted"]
+    }],
+    label: [{
+      type: Input
+    }],
+    errorMessage: [{
+      type: Input
+    }],
+    ariaLabel: [{
+      type: Input,
+      args: ["aria-label"]
+    }],
+    ariaLabelledby: [{
+      type: Input,
+      args: ["aria-labelledby"]
+    }],
+    state: [{
+      type: Input
+    }],
+    editable: [{
+      type: Input,
+      args: [{
+        transform: booleanAttribute
+      }]
+    }],
+    optional: [{
+      type: Input,
+      args: [{
+        transform: booleanAttribute
+      }]
+    }],
+    completed: [{
+      type: Input,
+      args: [{
+        transform: booleanAttribute
+      }]
+    }],
+    hasError: [{
+      type: Input,
+      args: [{
+        transform: booleanAttribute
+      }]
+    }]
+  });
+})();
+var CdkStepper = class _CdkStepper {
+  _dir = inject(Directionality, {
+    optional: true
+  });
+  _changeDetectorRef = inject(ChangeDetectorRef);
+  _elementRef = inject(ElementRef);
+  /** Emits when the component is destroyed. */
+  _destroyed = new Subject();
+  /** Used for managing keyboard focus. */
+  _keyManager;
+  /** Full list of steps inside the stepper, including inside nested steppers. */
+  _steps;
+  /** Steps that belong to the current stepper, excluding ones from nested steppers. */
+  steps = new QueryList();
+  /** The list of step headers of the steps in the stepper. */
+  _stepHeader;
+  /** List of step headers sorted based on their DOM order. */
+  _sortedHeaders = new QueryList();
+  /** Whether the validity of previous steps should be checked or not. */
+  linear = false;
+  /** The index of the selected step. */
+  get selectedIndex() {
+    return this._selectedIndex();
+  }
+  set selectedIndex(index) {
+    if (this._steps) {
+      if (!this._isValidIndex(index) && (typeof ngDevMode === "undefined" || ngDevMode)) {
+        throw Error("cdkStepper: Cannot assign out-of-bounds value to `selectedIndex`.");
+      }
+      if (this.selectedIndex !== index) {
+        this.selected?._markAsInteracted();
+        if (!this._anyControlsInvalidOrPending(index) && (index >= this.selectedIndex || this.steps.toArray()[index].editable)) {
+          this._updateSelectedItemIndex(index);
+        }
+      }
+    } else {
+      this._selectedIndex.set(index);
+    }
+  }
+  _selectedIndex = signal(0);
+  /** The step that is selected. */
+  get selected() {
+    return this.steps ? this.steps.toArray()[this.selectedIndex] : void 0;
+  }
+  set selected(step) {
+    this.selectedIndex = step && this.steps ? this.steps.toArray().indexOf(step) : -1;
+  }
+  /** Event emitted when the selected step has changed. */
+  selectionChange = new EventEmitter();
+  /** Output to support two-way binding on `[(selectedIndex)]` */
+  selectedIndexChange = new EventEmitter();
+  /** Used to track unique ID for each stepper component. */
+  _groupId = inject(_IdGenerator).getId("cdk-stepper-");
+  /** Orientation of the stepper. */
+  get orientation() {
+    return this._orientation;
+  }
+  set orientation(value) {
+    this._orientation = value;
+    if (this._keyManager) {
+      this._keyManager.withVerticalOrientation(value === "vertical");
+    }
+  }
+  _orientation = "horizontal";
+  constructor() {
+  }
+  ngAfterContentInit() {
+    this._steps.changes.pipe(startWith(this._steps), takeUntil(this._destroyed)).subscribe((steps) => {
+      this.steps.reset(steps.filter((step) => step._stepper === this));
+      this.steps.forEach((step, index) => step.index.set(index));
+      this.steps.notifyOnChanges();
+    });
+  }
+  ngAfterViewInit() {
+    this._stepHeader.changes.pipe(startWith(this._stepHeader), takeUntil(this._destroyed)).subscribe((headers) => {
+      this._sortedHeaders.reset(headers.toArray().sort((a, b) => {
+        const documentPosition = a._elementRef.nativeElement.compareDocumentPosition(b._elementRef.nativeElement);
+        return documentPosition & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+      }));
+      this._sortedHeaders.notifyOnChanges();
+    });
+    this._keyManager = new FocusKeyManager(this._sortedHeaders).withWrap().withHomeAndEnd().withVerticalOrientation(this._orientation === "vertical");
+    this._keyManager.updateActiveItem(this.selectedIndex);
+    (this._dir ? this._dir.change : of()).pipe(startWith(this._layoutDirection()), takeUntil(this._destroyed)).subscribe((direction) => this._keyManager?.withHorizontalOrientation(direction));
+    this._keyManager.updateActiveItem(this.selectedIndex);
+    this.steps.changes.subscribe(() => {
+      if (!this.selected) {
+        this._selectedIndex.set(Math.max(this.selectedIndex - 1, 0));
+      }
+    });
+    if (!this._isValidIndex(this.selectedIndex)) {
+      this._selectedIndex.set(0);
+    }
+    if (this.linear && this.selectedIndex > 0) {
+      const visitedSteps = this.steps.toArray().slice(0, this._selectedIndex());
+      for (const step of visitedSteps) {
+        step._markAsInteracted();
+      }
+    }
+  }
+  ngOnDestroy() {
+    this._keyManager?.destroy();
+    this.steps.destroy();
+    this._sortedHeaders.destroy();
+    this._destroyed.next();
+    this._destroyed.complete();
+  }
+  /** Selects and focuses the next step in list. */
+  next() {
+    this.selectedIndex = Math.min(this._selectedIndex() + 1, this.steps.length - 1);
+  }
+  /** Selects and focuses the previous step in list. */
+  previous() {
+    this.selectedIndex = Math.max(this._selectedIndex() - 1, 0);
+  }
+  /** Resets the stepper to its initial state. Note that this includes clearing form data. */
+  reset() {
+    this._updateSelectedItemIndex(0);
+    this.steps.forEach((step) => step.reset());
+    this._stateChanged();
+  }
+  /** Returns a unique id for each step label element. */
+  _getStepLabelId(i) {
+    return `${this._groupId}-label-${i}`;
+  }
+  /** Returns unique id for each step content element. */
+  _getStepContentId(i) {
+    return `${this._groupId}-content-${i}`;
+  }
+  /** Marks the component to be change detected. */
+  _stateChanged() {
+    this._changeDetectorRef.markForCheck();
+  }
+  /** Returns position state of the step with the given index. */
+  _getAnimationDirection(index) {
+    const position = index - this._selectedIndex();
+    if (position < 0) {
+      return this._layoutDirection() === "rtl" ? "next" : "previous";
+    } else if (position > 0) {
+      return this._layoutDirection() === "rtl" ? "previous" : "next";
+    }
+    return "current";
+  }
+  /** Returns the index of the currently-focused step header. */
+  _getFocusIndex() {
+    return this._keyManager ? this._keyManager.activeItemIndex : this._selectedIndex();
+  }
+  _updateSelectedItemIndex(newIndex) {
+    const stepsArray = this.steps.toArray();
+    const selectedIndex = this._selectedIndex();
+    this.selectionChange.emit({
+      selectedIndex: newIndex,
+      previouslySelectedIndex: selectedIndex,
+      selectedStep: stepsArray[newIndex],
+      previouslySelectedStep: stepsArray[selectedIndex]
+    });
+    if (this._keyManager) {
+      this._containsFocus() ? this._keyManager.setActiveItem(newIndex) : this._keyManager.updateActiveItem(newIndex);
+    }
+    this._selectedIndex.set(newIndex);
+    this.selectedIndexChange.emit(newIndex);
+    this._stateChanged();
+  }
+  _onKeydown(event) {
+    const hasModifier = hasModifierKey(event);
+    const keyCode = event.keyCode;
+    const manager = this._keyManager;
+    if (manager?.activeItemIndex != null && !hasModifier && (keyCode === SPACE || keyCode === ENTER)) {
+      this.selectedIndex = manager.activeItemIndex;
+      event.preventDefault();
+    } else {
+      manager?.setFocusOrigin("keyboard").onKeydown(event);
+    }
+  }
+  _anyControlsInvalidOrPending(index) {
+    if (this.linear && index >= 0) {
+      return this.steps.toArray().slice(0, index).some((step) => {
+        const control = step.stepControl;
+        const isIncomplete = control ? control.invalid || control.pending || !step.interacted : !step.completed;
+        return isIncomplete && !step.optional && !step._completedOverride();
+      });
+    }
+    return false;
+  }
+  _layoutDirection() {
+    return this._dir && this._dir.value === "rtl" ? "rtl" : "ltr";
+  }
+  /** Checks whether the stepper contains the focused element. */
+  _containsFocus() {
+    const stepperElement = this._elementRef.nativeElement;
+    const focusedElement = _getFocusedElementPierceShadowDom();
+    return stepperElement === focusedElement || stepperElement.contains(focusedElement);
+  }
+  /** Checks whether the passed-in index is a valid step index. */
+  _isValidIndex(index) {
+    return index > -1 && (!this.steps || index < this.steps.length);
+  }
+  static \u0275fac = function CdkStepper_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _CdkStepper)();
+  };
+  static \u0275dir = /* @__PURE__ */ \u0275\u0275defineDirective({
+    type: _CdkStepper,
+    selectors: [["", "cdkStepper", ""]],
+    contentQueries: function CdkStepper_ContentQueries(rf, ctx, dirIndex) {
+      if (rf & 1) {
+        \u0275\u0275contentQuery(dirIndex, CdkStep, 5);
+        \u0275\u0275contentQuery(dirIndex, CdkStepHeader, 5);
+      }
+      if (rf & 2) {
+        let _t;
+        \u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._steps = _t);
+        \u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._stepHeader = _t);
+      }
+    },
+    inputs: {
+      linear: [2, "linear", "linear", booleanAttribute],
+      selectedIndex: [2, "selectedIndex", "selectedIndex", numberAttribute],
+      selected: "selected",
+      orientation: "orientation"
+    },
+    outputs: {
+      selectionChange: "selectionChange",
+      selectedIndexChange: "selectedIndexChange"
+    },
+    exportAs: ["cdkStepper"]
+  });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(CdkStepper, [{
+    type: Directive,
+    args: [{
+      selector: "[cdkStepper]",
+      exportAs: "cdkStepper"
+    }]
+  }], () => [], {
+    _steps: [{
+      type: ContentChildren,
+      args: [CdkStep, {
+        descendants: true
+      }]
+    }],
+    _stepHeader: [{
+      type: ContentChildren,
+      args: [CdkStepHeader, {
+        descendants: true
+      }]
+    }],
+    linear: [{
+      type: Input,
+      args: [{
+        transform: booleanAttribute
+      }]
+    }],
+    selectedIndex: [{
+      type: Input,
+      args: [{
+        transform: numberAttribute
+      }]
+    }],
+    selected: [{
+      type: Input
+    }],
+    selectionChange: [{
+      type: Output
+    }],
+    selectedIndexChange: [{
+      type: Output
+    }],
+    orientation: [{
+      type: Input
+    }]
+  });
+})();
+var CdkStepperNext = class _CdkStepperNext {
+  _stepper = inject(CdkStepper);
+  /** Type of the next button. Defaults to "submit" if not specified. */
+  type = "submit";
+  constructor() {
+  }
+  static \u0275fac = function CdkStepperNext_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _CdkStepperNext)();
+  };
+  static \u0275dir = /* @__PURE__ */ \u0275\u0275defineDirective({
+    type: _CdkStepperNext,
+    selectors: [["button", "cdkStepperNext", ""]],
+    hostVars: 1,
+    hostBindings: function CdkStepperNext_HostBindings(rf, ctx) {
+      if (rf & 1) {
+        \u0275\u0275listener("click", function CdkStepperNext_click_HostBindingHandler() {
+          return ctx._stepper.next();
+        });
+      }
+      if (rf & 2) {
+        \u0275\u0275domProperty("type", ctx.type);
+      }
+    },
+    inputs: {
+      type: "type"
+    }
+  });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(CdkStepperNext, [{
+    type: Directive,
+    args: [{
+      selector: "button[cdkStepperNext]",
+      host: {
+        "[type]": "type",
+        "(click)": "_stepper.next()"
+      }
+    }]
+  }], () => [], {
+    type: [{
+      type: Input
+    }]
+  });
+})();
+var CdkStepperPrevious = class _CdkStepperPrevious {
+  _stepper = inject(CdkStepper);
+  /** Type of the previous button. Defaults to "button" if not specified. */
+  type = "button";
+  constructor() {
+  }
+  static \u0275fac = function CdkStepperPrevious_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _CdkStepperPrevious)();
+  };
+  static \u0275dir = /* @__PURE__ */ \u0275\u0275defineDirective({
+    type: _CdkStepperPrevious,
+    selectors: [["button", "cdkStepperPrevious", ""]],
+    hostVars: 1,
+    hostBindings: function CdkStepperPrevious_HostBindings(rf, ctx) {
+      if (rf & 1) {
+        \u0275\u0275listener("click", function CdkStepperPrevious_click_HostBindingHandler() {
+          return ctx._stepper.previous();
+        });
+      }
+      if (rf & 2) {
+        \u0275\u0275domProperty("type", ctx.type);
+      }
+    },
+    inputs: {
+      type: "type"
+    }
+  });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(CdkStepperPrevious, [{
+    type: Directive,
+    args: [{
+      selector: "button[cdkStepperPrevious]",
+      host: {
+        "[type]": "type",
+        "(click)": "_stepper.previous()"
+      }
+    }]
+  }], () => [], {
+    type: [{
+      type: Input
+    }]
+  });
+})();
+var CdkStepperModule = class _CdkStepperModule {
+  static \u0275fac = function CdkStepperModule_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _CdkStepperModule)();
+  };
+  static \u0275mod = /* @__PURE__ */ \u0275\u0275defineNgModule({
+    type: _CdkStepperModule,
+    imports: [BidiModule, CdkStep, CdkStepper, CdkStepHeader, CdkStepLabel, CdkStepperNext, CdkStepperPrevious],
+    exports: [CdkStep, CdkStepper, CdkStepHeader, CdkStepLabel, CdkStepperNext, CdkStepperPrevious]
+  });
+  static \u0275inj = /* @__PURE__ */ \u0275\u0275defineInjector({
+    imports: [BidiModule]
+  });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(CdkStepperModule, [{
+    type: NgModule,
+    args: [{
+      imports: [BidiModule, CdkStep, CdkStepper, CdkStepHeader, CdkStepLabel, CdkStepperNext, CdkStepperPrevious],
+      exports: [CdkStep, CdkStepper, CdkStepHeader, CdkStepLabel, CdkStepperNext, CdkStepperPrevious]
+    }]
+  }], null, null);
+})();
+
+// node_modules/@angular/material/fesm2022/stepper.mjs
+var _c02 = (a0, a1, a2) => ({
+  index: a0,
+  active: a1,
+  optional: a2
+});
+function MatStepHeader_Conditional_3_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementContainer(0, 2);
+  }
+  if (rf & 2) {
+    const ctx_r0 = \u0275\u0275nextContext();
+    \u0275\u0275property("ngTemplateOutlet", ctx_r0.iconOverrides[ctx_r0.state])("ngTemplateOutletContext", \u0275\u0275pureFunction3(2, _c02, ctx_r0.index, ctx_r0.active, ctx_r0.optional));
+  }
+}
+function MatStepHeader_Conditional_4_Case_0_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "span", 7);
+    \u0275\u0275text(1);
+    \u0275\u0275elementEnd();
+  }
+  if (rf & 2) {
+    const ctx_r0 = \u0275\u0275nextContext(2);
+    \u0275\u0275advance();
+    \u0275\u0275textInterpolate(ctx_r0._getDefaultTextForState(ctx_r0.state));
+  }
+}
+function MatStepHeader_Conditional_4_Case_1_Conditional_0_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "span", 8);
+    \u0275\u0275text(1);
+    \u0275\u0275elementEnd();
+  }
+  if (rf & 2) {
+    const ctx_r0 = \u0275\u0275nextContext(3);
+    \u0275\u0275advance();
+    \u0275\u0275textInterpolate(ctx_r0._intl.completedLabel);
+  }
+}
+function MatStepHeader_Conditional_4_Case_1_Conditional_1_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "span", 8);
+    \u0275\u0275text(1);
+    \u0275\u0275elementEnd();
+  }
+  if (rf & 2) {
+    const ctx_r0 = \u0275\u0275nextContext(3);
+    \u0275\u0275advance();
+    \u0275\u0275textInterpolate(ctx_r0._intl.editableLabel);
+  }
+}
+function MatStepHeader_Conditional_4_Case_1_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275conditionalCreate(0, MatStepHeader_Conditional_4_Case_1_Conditional_0_Template, 2, 1, "span", 8)(1, MatStepHeader_Conditional_4_Case_1_Conditional_1_Template, 2, 1, "span", 8);
+    \u0275\u0275elementStart(2, "mat-icon", 7);
+    \u0275\u0275text(3);
+    \u0275\u0275elementEnd();
+  }
+  if (rf & 2) {
+    const ctx_r0 = \u0275\u0275nextContext(2);
+    \u0275\u0275conditional(ctx_r0.state === "done" ? 0 : ctx_r0.state === "edit" ? 1 : -1);
+    \u0275\u0275advance(3);
+    \u0275\u0275textInterpolate(ctx_r0._getDefaultTextForState(ctx_r0.state));
+  }
+}
+function MatStepHeader_Conditional_4_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275conditionalCreate(0, MatStepHeader_Conditional_4_Case_0_Template, 2, 1, "span", 7)(1, MatStepHeader_Conditional_4_Case_1_Template, 4, 2);
+  }
+  if (rf & 2) {
+    let tmp_1_0;
+    const ctx_r0 = \u0275\u0275nextContext();
+    \u0275\u0275conditional((tmp_1_0 = ctx_r0.state) === "number" ? 0 : 1);
+  }
+}
+function MatStepHeader_Conditional_6_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "div", 4);
+    \u0275\u0275elementContainer(1, 9);
+    \u0275\u0275elementEnd();
+  }
+  if (rf & 2) {
+    \u0275\u0275advance();
+    \u0275\u0275property("ngTemplateOutlet", ctx.template);
+  }
+}
+function MatStepHeader_Conditional_7_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "div", 4);
+    \u0275\u0275text(1);
+    \u0275\u0275elementEnd();
+  }
+  if (rf & 2) {
+    const ctx_r0 = \u0275\u0275nextContext();
+    \u0275\u0275advance();
+    \u0275\u0275textInterpolate(ctx_r0.label);
+  }
+}
+function MatStepHeader_Conditional_8_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "div", 5);
+    \u0275\u0275text(1);
+    \u0275\u0275elementEnd();
+  }
+  if (rf & 2) {
+    const ctx_r0 = \u0275\u0275nextContext();
+    \u0275\u0275advance();
+    \u0275\u0275textInterpolate(ctx_r0._intl.optionalLabel);
+  }
+}
+function MatStepHeader_Conditional_9_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "div", 6);
+    \u0275\u0275text(1);
+    \u0275\u0275elementEnd();
+  }
+  if (rf & 2) {
+    const ctx_r0 = \u0275\u0275nextContext();
+    \u0275\u0275advance();
+    \u0275\u0275textInterpolate(ctx_r0.errorMessage);
+  }
+}
+var _c1 = ["*"];
+function MatStep_ng_template_0_ng_template_1_Template(rf, ctx) {
+}
+function MatStep_ng_template_0_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275projection(0);
+    \u0275\u0275template(1, MatStep_ng_template_0_ng_template_1_Template, 0, 0, "ng-template", 0);
+  }
+  if (rf & 2) {
+    const ctx_r0 = \u0275\u0275nextContext();
+    \u0275\u0275advance();
+    \u0275\u0275property("cdkPortalOutlet", ctx_r0._portal);
+  }
+}
+var _c2 = ["animatedContainer"];
+var _c3 = (a0) => ({
+  step: a0
+});
+function MatStepper_Conditional_0_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275projection(0);
+  }
+}
+function MatStepper_Case_1_For_3_Conditional_1_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275element(0, "div", 7);
+  }
+}
+function MatStepper_Case_1_For_3_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementContainer(0, 6);
+    \u0275\u0275conditionalCreate(1, MatStepper_Case_1_For_3_Conditional_1_Template, 1, 0, "div", 7);
+  }
+  if (rf & 2) {
+    const step_r1 = ctx.$implicit;
+    const \u0275$index_8_r2 = ctx.$index;
+    const \u0275$count_8_r3 = ctx.$count;
+    \u0275\u0275nextContext(2);
+    const stepTemplate_r4 = \u0275\u0275reference(4);
+    \u0275\u0275property("ngTemplateOutlet", stepTemplate_r4)("ngTemplateOutletContext", \u0275\u0275pureFunction1(3, _c3, step_r1));
+    \u0275\u0275advance();
+    \u0275\u0275conditional(!(\u0275$index_8_r2 === \u0275$count_8_r3 - 1) ? 1 : -1);
+  }
+}
+function MatStepper_Case_1_For_6_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "div", 8, 1);
+    \u0275\u0275elementContainer(2, 9);
+    \u0275\u0275elementEnd();
+  }
+  if (rf & 2) {
+    const step_r5 = ctx.$implicit;
+    const $index_r6 = ctx.$index;
+    const ctx_r6 = \u0275\u0275nextContext(2);
+    \u0275\u0275classMap("mat-horizontal-stepper-content-" + ctx_r6._getAnimationDirection($index_r6));
+    \u0275\u0275property("id", ctx_r6._getStepContentId($index_r6));
+    \u0275\u0275attribute("aria-labelledby", ctx_r6._getStepLabelId($index_r6))("inert", ctx_r6.selectedIndex === $index_r6 ? null : "");
+    \u0275\u0275advance(2);
+    \u0275\u0275property("ngTemplateOutlet", step_r5.content);
+  }
+}
+function MatStepper_Case_1_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "div", 2)(1, "div", 3);
+    \u0275\u0275repeaterCreate(2, MatStepper_Case_1_For_3_Template, 2, 5, null, null, \u0275\u0275repeaterTrackByIdentity);
+    \u0275\u0275elementEnd();
+    \u0275\u0275elementStart(4, "div", 4);
+    \u0275\u0275repeaterCreate(5, MatStepper_Case_1_For_6_Template, 3, 6, "div", 5, \u0275\u0275repeaterTrackByIdentity);
+    \u0275\u0275elementEnd()();
+  }
+  if (rf & 2) {
+    const ctx_r6 = \u0275\u0275nextContext();
+    \u0275\u0275advance(2);
+    \u0275\u0275repeater(ctx_r6.steps);
+    \u0275\u0275advance(3);
+    \u0275\u0275repeater(ctx_r6.steps);
+  }
+}
+function MatStepper_Case_2_For_1_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "div", 10);
+    \u0275\u0275elementContainer(1, 6);
+    \u0275\u0275elementStart(2, "div", 11, 1)(4, "div", 12)(5, "div", 13);
+    \u0275\u0275elementContainer(6, 9);
+    \u0275\u0275elementEnd()()()();
+  }
+  if (rf & 2) {
+    const step_r8 = ctx.$implicit;
+    const $index_r9 = ctx.$index;
+    const \u0275$index_22_r10 = ctx.$index;
+    const \u0275$count_22_r11 = ctx.$count;
+    const ctx_r6 = \u0275\u0275nextContext(2);
+    const stepTemplate_r4 = \u0275\u0275reference(4);
+    \u0275\u0275advance();
+    \u0275\u0275property("ngTemplateOutlet", stepTemplate_r4)("ngTemplateOutletContext", \u0275\u0275pureFunction1(10, _c3, step_r8));
+    \u0275\u0275advance();
+    \u0275\u0275classProp("mat-stepper-vertical-line", !(\u0275$index_22_r10 === \u0275$count_22_r11 - 1))("mat-vertical-content-container-active", ctx_r6.selectedIndex === $index_r9);
+    \u0275\u0275attribute("inert", ctx_r6.selectedIndex === $index_r9 ? null : "");
+    \u0275\u0275advance(2);
+    \u0275\u0275property("id", ctx_r6._getStepContentId($index_r9));
+    \u0275\u0275attribute("aria-labelledby", ctx_r6._getStepLabelId($index_r9));
+    \u0275\u0275advance(2);
+    \u0275\u0275property("ngTemplateOutlet", step_r8.content);
+  }
+}
+function MatStepper_Case_2_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275repeaterCreate(0, MatStepper_Case_2_For_1_Template, 7, 12, "div", 10, \u0275\u0275repeaterTrackByIdentity);
+  }
+  if (rf & 2) {
+    const ctx_r6 = \u0275\u0275nextContext();
+    \u0275\u0275repeater(ctx_r6.steps);
+  }
+}
+function MatStepper_ng_template_3_Template(rf, ctx) {
+  if (rf & 1) {
+    const _r12 = \u0275\u0275getCurrentView();
+    \u0275\u0275elementStart(0, "mat-step-header", 14);
+    \u0275\u0275listener("click", function MatStepper_ng_template_3_Template_mat_step_header_click_0_listener() {
+      const step_r13 = \u0275\u0275restoreView(_r12).step;
+      return \u0275\u0275resetView(step_r13.select());
+    })("keydown", function MatStepper_ng_template_3_Template_mat_step_header_keydown_0_listener($event) {
+      \u0275\u0275restoreView(_r12);
+      const ctx_r6 = \u0275\u0275nextContext();
+      return \u0275\u0275resetView(ctx_r6._onKeydown($event));
+    });
+    \u0275\u0275elementEnd();
+  }
+  if (rf & 2) {
+    const step_r13 = ctx.step;
+    const ctx_r6 = \u0275\u0275nextContext();
+    \u0275\u0275classProp("mat-horizontal-stepper-header", ctx_r6.orientation === "horizontal")("mat-vertical-stepper-header", ctx_r6.orientation === "vertical");
+    \u0275\u0275property("tabIndex", ctx_r6._getFocusIndex() === step_r13.index() ? 0 : -1)("id", ctx_r6._getStepLabelId(step_r13.index()))("index", step_r13.index())("state", step_r13.indicatorType())("label", step_r13.stepLabel || step_r13.label)("selected", step_r13.isSelected())("active", step_r13.isNavigable())("optional", step_r13.optional)("errorMessage", step_r13.errorMessage)("iconOverrides", ctx_r6._iconOverrides)("disableRipple", ctx_r6.disableRipple || !step_r13.isNavigable())("color", step_r13.color || ctx_r6.color);
+    \u0275\u0275attribute("aria-posinset", step_r13.index() + 1)("aria-setsize", ctx_r6.steps.length)("aria-controls", ctx_r6._getStepContentId(step_r13.index()))("aria-selected", step_r13.isSelected())("aria-label", step_r13.ariaLabel || null)("aria-labelledby", !step_r13.ariaLabel && step_r13.ariaLabelledby ? step_r13.ariaLabelledby : null)("aria-disabled", step_r13.isNavigable() ? null : true);
+  }
+}
+var MatStepLabel = class _MatStepLabel extends CdkStepLabel {
+  static \u0275fac = /* @__PURE__ */ (() => {
+    let \u0275MatStepLabel_BaseFactory;
+    return function MatStepLabel_Factory(__ngFactoryType__) {
+      return (\u0275MatStepLabel_BaseFactory || (\u0275MatStepLabel_BaseFactory = \u0275\u0275getInheritedFactory(_MatStepLabel)))(__ngFactoryType__ || _MatStepLabel);
+    };
+  })();
+  static \u0275dir = /* @__PURE__ */ \u0275\u0275defineDirective({
+    type: _MatStepLabel,
+    selectors: [["", "matStepLabel", ""]],
+    features: [\u0275\u0275InheritDefinitionFeature]
+  });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatStepLabel, [{
+    type: Directive,
+    args: [{
+      selector: "[matStepLabel]"
+    }]
+  }], null, null);
+})();
+var MatStepperIntl = class _MatStepperIntl {
+  /**
+   * Stream that emits whenever the labels here are changed. Use this to notify
+   * components if the labels have changed after initialization.
+   */
+  changes = new Subject();
+  /** Label that is rendered below optional steps. */
+  optionalLabel = "Optional";
+  /** Label that is used to indicate step as completed to screen readers. */
+  completedLabel = "Completed";
+  /** Label that is used to indicate step as editable to screen readers. */
+  editableLabel = "Editable";
+  static \u0275fac = function MatStepperIntl_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _MatStepperIntl)();
+  };
+  static \u0275prov = /* @__PURE__ */ \u0275\u0275defineInjectable({
+    token: _MatStepperIntl,
+    factory: _MatStepperIntl.\u0275fac,
+    providedIn: "root"
+  });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatStepperIntl, [{
+    type: Injectable,
+    args: [{
+      providedIn: "root"
+    }]
+  }], null, null);
+})();
+function MAT_STEPPER_INTL_PROVIDER_FACTORY(parentIntl) {
+  return parentIntl || new MatStepperIntl();
+}
+var MAT_STEPPER_INTL_PROVIDER = {
+  provide: MatStepperIntl,
+  deps: [[new Optional(), new SkipSelf(), MatStepperIntl]],
+  useFactory: MAT_STEPPER_INTL_PROVIDER_FACTORY
+};
+var MatStepHeader = class _MatStepHeader extends CdkStepHeader {
+  _intl = inject(MatStepperIntl);
+  _focusMonitor = inject(FocusMonitor);
+  _intlSubscription;
+  /** State of the given step. */
+  state;
+  /** Label of the given step. */
+  label;
+  /** Error message to display when there's an error. */
+  errorMessage;
+  /** Overrides for the header icons, passed in via the stepper. */
+  iconOverrides;
+  /** Index of the given step. */
+  index;
+  /** Whether the given step is selected. */
+  selected;
+  /** Whether the given step label is active. */
+  active;
+  /** Whether the given step is optional. */
+  optional;
+  /** Whether the ripple should be disabled. */
+  disableRipple;
+  /**
+   * Theme color of the step header. This API is supported in M2 themes only, it
+   * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/stepper/styling.
+   *
+   * For information on applying color variants in M3, see
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   */
+  color;
+  constructor() {
+    super();
+    const styleLoader = inject(_CdkPrivateStyleLoader);
+    styleLoader.load(_StructuralStylesLoader);
+    styleLoader.load(_VisuallyHiddenLoader);
+    const changeDetectorRef = inject(ChangeDetectorRef);
+    this._intlSubscription = this._intl.changes.subscribe(() => changeDetectorRef.markForCheck());
+  }
+  ngAfterViewInit() {
+    this._focusMonitor.monitor(this._elementRef, true);
+  }
+  ngOnDestroy() {
+    this._intlSubscription.unsubscribe();
+    this._focusMonitor.stopMonitoring(this._elementRef);
+  }
+  /** Focuses the step header. */
+  focus(origin, options) {
+    if (origin) {
+      this._focusMonitor.focusVia(this._elementRef, origin, options);
+    } else {
+      this._elementRef.nativeElement.focus(options);
+    }
+  }
+  /** Returns string label of given step if it is a text label. */
+  _stringLabel() {
+    return this.label instanceof MatStepLabel ? null : this.label;
+  }
+  /** Returns MatStepLabel if the label of given step is a template label. */
+  _templateLabel() {
+    return this.label instanceof MatStepLabel ? this.label : null;
+  }
+  /** Returns the host HTML element. */
+  _getHostElement() {
+    return this._elementRef.nativeElement;
+  }
+  _getDefaultTextForState(state) {
+    if (state == "number") {
+      return `${this.index + 1}`;
+    }
+    if (state == "edit") {
+      return "create";
+    }
+    if (state == "error") {
+      return "warning";
+    }
+    return state;
+  }
+  _hasEmptyLabel() {
+    return !this._stringLabel() && !this._templateLabel() && !this._hasOptionalLabel() && !this._hasErrorLabel();
+  }
+  _hasOptionalLabel() {
+    return this.optional && this.state !== "error";
+  }
+  _hasErrorLabel() {
+    return this.state === "error";
+  }
+  static \u0275fac = function MatStepHeader_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _MatStepHeader)();
+  };
+  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({
+    type: _MatStepHeader,
+    selectors: [["mat-step-header"]],
+    hostAttrs: ["role", "tab", 1, "mat-step-header"],
+    hostVars: 4,
+    hostBindings: function MatStepHeader_HostBindings(rf, ctx) {
+      if (rf & 2) {
+        \u0275\u0275classMap("mat-" + (ctx.color || "primary"));
+        \u0275\u0275classProp("mat-step-header-empty-label", ctx._hasEmptyLabel());
+      }
+    },
+    inputs: {
+      state: "state",
+      label: "label",
+      errorMessage: "errorMessage",
+      iconOverrides: "iconOverrides",
+      index: "index",
+      selected: "selected",
+      active: "active",
+      optional: "optional",
+      disableRipple: "disableRipple",
+      color: "color"
+    },
+    features: [\u0275\u0275InheritDefinitionFeature],
+    decls: 10,
+    vars: 17,
+    consts: [["matRipple", "", 1, "mat-step-header-ripple", "mat-focus-indicator", 3, "matRippleTrigger", "matRippleDisabled"], [1, "mat-step-icon-content"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "mat-step-label"], [1, "mat-step-text-label"], [1, "mat-step-optional"], [1, "mat-step-sub-label-error"], ["aria-hidden", "true"], [1, "cdk-visually-hidden"], [3, "ngTemplateOutlet"]],
+    template: function MatStepHeader_Template(rf, ctx) {
+      if (rf & 1) {
+        \u0275\u0275element(0, "div", 0);
+        \u0275\u0275elementStart(1, "div")(2, "div", 1);
+        \u0275\u0275conditionalCreate(3, MatStepHeader_Conditional_3_Template, 1, 6, "ng-container", 2)(4, MatStepHeader_Conditional_4_Template, 2, 1);
+        \u0275\u0275elementEnd()();
+        \u0275\u0275elementStart(5, "div", 3);
+        \u0275\u0275conditionalCreate(6, MatStepHeader_Conditional_6_Template, 2, 1, "div", 4)(7, MatStepHeader_Conditional_7_Template, 2, 1, "div", 4);
+        \u0275\u0275conditionalCreate(8, MatStepHeader_Conditional_8_Template, 2, 1, "div", 5);
+        \u0275\u0275conditionalCreate(9, MatStepHeader_Conditional_9_Template, 2, 1, "div", 6);
+        \u0275\u0275elementEnd();
+      }
+      if (rf & 2) {
+        let tmp_8_0;
+        \u0275\u0275property("matRippleTrigger", ctx._getHostElement())("matRippleDisabled", ctx.disableRipple);
+        \u0275\u0275advance();
+        \u0275\u0275classMap(\u0275\u0275interpolate1("mat-step-icon-state-", ctx.state, " mat-step-icon"));
+        \u0275\u0275classProp("mat-step-icon-selected", ctx.selected);
+        \u0275\u0275advance(2);
+        \u0275\u0275conditional(ctx.iconOverrides && ctx.iconOverrides[ctx.state] ? 3 : 4);
+        \u0275\u0275advance(2);
+        \u0275\u0275classProp("mat-step-label-active", ctx.active)("mat-step-label-selected", ctx.selected)("mat-step-label-error", ctx.state == "error");
+        \u0275\u0275advance();
+        \u0275\u0275conditional((tmp_8_0 = ctx._templateLabel()) ? 6 : ctx._stringLabel() ? 7 : -1, tmp_8_0);
+        \u0275\u0275advance(2);
+        \u0275\u0275conditional(ctx._hasOptionalLabel() ? 8 : -1);
+        \u0275\u0275advance();
+        \u0275\u0275conditional(ctx._hasErrorLabel() ? 9 : -1);
+      }
+    },
+    dependencies: [MatRipple, NgTemplateOutlet, MatIcon],
+    styles: ['.mat-step-header{overflow:hidden;outline:none;cursor:pointer;position:relative;box-sizing:content-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-step-header:focus .mat-focus-indicator::before{content:""}.mat-step-header:hover[aria-disabled=true]{cursor:default}.mat-step-header:hover:not([aria-disabled]),.mat-step-header:hover[aria-disabled=false]{background-color:var(--mat-stepper-header-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent));border-radius:var(--mat-stepper-header-hover-state-layer-shape, var(--mat-sys-corner-medium))}.mat-step-header.cdk-keyboard-focused,.mat-step-header.cdk-program-focused{background-color:var(--mat-stepper-header-focus-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent));border-radius:var(--mat-stepper-header-focus-state-layer-shape, var(--mat-sys-corner-medium))}@media(hover: none){.mat-step-header:hover{background:none}}@media(forced-colors: active){.mat-step-header{outline:solid 1px}.mat-step-header[aria-selected=true] .mat-step-label{text-decoration:underline}.mat-step-header[aria-disabled=true]{outline-color:GrayText}.mat-step-header[aria-disabled=true] .mat-step-label,.mat-step-header[aria-disabled=true] .mat-step-icon,.mat-step-header[aria-disabled=true] .mat-step-optional{color:GrayText}}.mat-step-optional{font-size:12px;color:var(--mat-stepper-header-optional-label-text-color, var(--mat-sys-on-surface-variant))}.mat-step-sub-label-error{font-size:12px;font-weight:normal}.mat-step-icon{border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;color:var(--mat-stepper-header-icon-foreground-color, var(--mat-sys-surface));background-color:var(--mat-stepper-header-icon-background-color, var(--mat-sys-on-surface-variant))}.mat-step-icon-content{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex}.mat-step-icon .mat-icon{font-size:16px;height:16px;width:16px}.mat-step-icon-state-error{background-color:var(--mat-stepper-header-error-state-icon-background-color, transparent);color:var(--mat-stepper-header-error-state-icon-foreground-color, var(--mat-sys-error))}.mat-step-icon-state-error .mat-icon{font-size:24px;height:24px;width:24px}.mat-step-label{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-family:var(--mat-stepper-header-label-text-font, var(--mat-sys-title-small-font));font-size:var(--mat-stepper-header-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-stepper-header-label-text-weight, var(--mat-sys-title-small-weight));color:var(--mat-stepper-header-label-text-color, var(--mat-sys-on-surface-variant))}.mat-step-label.mat-step-label-active{color:var(--mat-stepper-header-selected-state-label-text-color, var(--mat-sys-on-surface-variant))}.mat-step-label.mat-step-label-error{color:var(--mat-stepper-header-error-state-label-text-color, var(--mat-sys-error));font-size:var(--mat-stepper-header-error-state-label-text-size, var(--mat-sys-title-small-size))}.mat-step-label.mat-step-label-selected{font-size:var(--mat-stepper-header-selected-state-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-stepper-header-selected-state-label-text-weight, var(--mat-sys-title-small-weight))}.mat-step-header-empty-label .mat-step-label{min-width:0}.mat-step-text-label{text-overflow:ellipsis;overflow:hidden}.mat-step-header .mat-step-header-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-step-icon-selected{background-color:var(--mat-stepper-header-selected-state-icon-background-color, var(--mat-sys-primary));color:var(--mat-stepper-header-selected-state-icon-foreground-color, var(--mat-sys-on-primary))}.mat-step-icon-state-done{background-color:var(--mat-stepper-header-done-state-icon-background-color, var(--mat-sys-primary));color:var(--mat-stepper-header-done-state-icon-foreground-color, var(--mat-sys-on-primary))}.mat-step-icon-state-edit{background-color:var(--mat-stepper-header-edit-state-icon-background-color, var(--mat-sys-primary));color:var(--mat-stepper-header-edit-state-icon-foreground-color, var(--mat-sys-on-primary))}\n'],
+    encapsulation: 2,
+    changeDetection: 0
+  });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatStepHeader, [{
+    type: Component,
+    args: [{
+      selector: "mat-step-header",
+      host: {
+        "class": "mat-step-header",
+        "[class.mat-step-header-empty-label]": "_hasEmptyLabel()",
+        "[class]": '"mat-" + (color || "primary")',
+        "role": "tab"
+      },
+      encapsulation: ViewEncapsulation.None,
+      changeDetection: ChangeDetectionStrategy.OnPush,
+      imports: [MatRipple, NgTemplateOutlet, MatIcon],
+      template: `<div class="mat-step-header-ripple mat-focus-indicator" matRipple
+     [matRippleTrigger]="_getHostElement()"
+     [matRippleDisabled]="disableRipple"></div>
+
+<div class="mat-step-icon-state-{{state}} mat-step-icon" [class.mat-step-icon-selected]="selected">
+  <div class="mat-step-icon-content">
+    @if (iconOverrides && iconOverrides[state]) {
+      <ng-container
+        [ngTemplateOutlet]="iconOverrides[state]"
+        [ngTemplateOutletContext]="{index, active, optional}"></ng-container>
+    } @else {
+      @switch (state) {
+        @case ('number') {
+          <span aria-hidden="true">{{_getDefaultTextForState(state)}}</span>
+        }
+
+        @default {
+          @if (state === 'done') {
+            <span class="cdk-visually-hidden">{{_intl.completedLabel}}</span>
+          } @else if (state === 'edit') {
+            <span class="cdk-visually-hidden">{{_intl.editableLabel}}</span>
+          }
+
+          <mat-icon aria-hidden="true">{{_getDefaultTextForState(state)}}</mat-icon>
+        }
+      }
+    }
+  </div>
+</div>
+<div class="mat-step-label"
+     [class.mat-step-label-active]="active"
+     [class.mat-step-label-selected]="selected"
+     [class.mat-step-label-error]="state == 'error'">
+  @if (_templateLabel(); as templateLabel) {
+    <!-- If there is a label template, use it. -->
+    <div class="mat-step-text-label">
+      <ng-container [ngTemplateOutlet]="templateLabel.template"></ng-container>
+    </div>
+  } @else if (_stringLabel()) {
+    <!-- If there is no label template, fall back to the text label. -->
+    <div class="mat-step-text-label">{{label}}</div>
+  }
+
+  @if (_hasOptionalLabel()) {
+    <div class="mat-step-optional">{{_intl.optionalLabel}}</div>
+  }
+
+  @if (_hasErrorLabel()) {
+    <div class="mat-step-sub-label-error">{{errorMessage}}</div>
+  }
+</div>
+
+`,
+      styles: ['.mat-step-header{overflow:hidden;outline:none;cursor:pointer;position:relative;box-sizing:content-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-step-header:focus .mat-focus-indicator::before{content:""}.mat-step-header:hover[aria-disabled=true]{cursor:default}.mat-step-header:hover:not([aria-disabled]),.mat-step-header:hover[aria-disabled=false]{background-color:var(--mat-stepper-header-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent));border-radius:var(--mat-stepper-header-hover-state-layer-shape, var(--mat-sys-corner-medium))}.mat-step-header.cdk-keyboard-focused,.mat-step-header.cdk-program-focused{background-color:var(--mat-stepper-header-focus-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent));border-radius:var(--mat-stepper-header-focus-state-layer-shape, var(--mat-sys-corner-medium))}@media(hover: none){.mat-step-header:hover{background:none}}@media(forced-colors: active){.mat-step-header{outline:solid 1px}.mat-step-header[aria-selected=true] .mat-step-label{text-decoration:underline}.mat-step-header[aria-disabled=true]{outline-color:GrayText}.mat-step-header[aria-disabled=true] .mat-step-label,.mat-step-header[aria-disabled=true] .mat-step-icon,.mat-step-header[aria-disabled=true] .mat-step-optional{color:GrayText}}.mat-step-optional{font-size:12px;color:var(--mat-stepper-header-optional-label-text-color, var(--mat-sys-on-surface-variant))}.mat-step-sub-label-error{font-size:12px;font-weight:normal}.mat-step-icon{border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative;color:var(--mat-stepper-header-icon-foreground-color, var(--mat-sys-surface));background-color:var(--mat-stepper-header-icon-background-color, var(--mat-sys-on-surface-variant))}.mat-step-icon-content{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:flex}.mat-step-icon .mat-icon{font-size:16px;height:16px;width:16px}.mat-step-icon-state-error{background-color:var(--mat-stepper-header-error-state-icon-background-color, transparent);color:var(--mat-stepper-header-error-state-icon-foreground-color, var(--mat-sys-error))}.mat-step-icon-state-error .mat-icon{font-size:24px;height:24px;width:24px}.mat-step-label{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:50px;vertical-align:middle;font-family:var(--mat-stepper-header-label-text-font, var(--mat-sys-title-small-font));font-size:var(--mat-stepper-header-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-stepper-header-label-text-weight, var(--mat-sys-title-small-weight));color:var(--mat-stepper-header-label-text-color, var(--mat-sys-on-surface-variant))}.mat-step-label.mat-step-label-active{color:var(--mat-stepper-header-selected-state-label-text-color, var(--mat-sys-on-surface-variant))}.mat-step-label.mat-step-label-error{color:var(--mat-stepper-header-error-state-label-text-color, var(--mat-sys-error));font-size:var(--mat-stepper-header-error-state-label-text-size, var(--mat-sys-title-small-size))}.mat-step-label.mat-step-label-selected{font-size:var(--mat-stepper-header-selected-state-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-stepper-header-selected-state-label-text-weight, var(--mat-sys-title-small-weight))}.mat-step-header-empty-label .mat-step-label{min-width:0}.mat-step-text-label{text-overflow:ellipsis;overflow:hidden}.mat-step-header .mat-step-header-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-step-icon-selected{background-color:var(--mat-stepper-header-selected-state-icon-background-color, var(--mat-sys-primary));color:var(--mat-stepper-header-selected-state-icon-foreground-color, var(--mat-sys-on-primary))}.mat-step-icon-state-done{background-color:var(--mat-stepper-header-done-state-icon-background-color, var(--mat-sys-primary));color:var(--mat-stepper-header-done-state-icon-foreground-color, var(--mat-sys-on-primary))}.mat-step-icon-state-edit{background-color:var(--mat-stepper-header-edit-state-icon-background-color, var(--mat-sys-primary));color:var(--mat-stepper-header-edit-state-icon-foreground-color, var(--mat-sys-on-primary))}\n']
+    }]
+  }], () => [], {
+    state: [{
+      type: Input
+    }],
+    label: [{
+      type: Input
+    }],
+    errorMessage: [{
+      type: Input
+    }],
+    iconOverrides: [{
+      type: Input
+    }],
+    index: [{
+      type: Input
+    }],
+    selected: [{
+      type: Input
+    }],
+    active: [{
+      type: Input
+    }],
+    optional: [{
+      type: Input
+    }],
+    disableRipple: [{
+      type: Input
+    }],
+    color: [{
+      type: Input
+    }]
+  });
+})();
+var MatStepperIcon = class _MatStepperIcon {
+  templateRef = inject(TemplateRef);
+  /** Name of the icon to be overridden. */
+  name;
+  constructor() {
+  }
+  static \u0275fac = function MatStepperIcon_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _MatStepperIcon)();
+  };
+  static \u0275dir = /* @__PURE__ */ \u0275\u0275defineDirective({
+    type: _MatStepperIcon,
+    selectors: [["ng-template", "matStepperIcon", ""]],
+    inputs: {
+      name: [0, "matStepperIcon", "name"]
+    }
+  });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatStepperIcon, [{
+    type: Directive,
+    args: [{
+      selector: "ng-template[matStepperIcon]"
+    }]
+  }], () => [], {
+    name: [{
+      type: Input,
+      args: ["matStepperIcon"]
+    }]
+  });
+})();
+var MatStepContent = class _MatStepContent {
+  _template = inject(TemplateRef);
+  constructor() {
+  }
+  static \u0275fac = function MatStepContent_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _MatStepContent)();
+  };
+  static \u0275dir = /* @__PURE__ */ \u0275\u0275defineDirective({
+    type: _MatStepContent,
+    selectors: [["ng-template", "matStepContent", ""]]
+  });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatStepContent, [{
+    type: Directive,
+    args: [{
+      selector: "ng-template[matStepContent]"
+    }]
+  }], () => [], null);
+})();
+var MatStep = class _MatStep extends CdkStep {
+  _errorStateMatcher = inject(ErrorStateMatcher, {
+    skipSelf: true
+  });
+  _viewContainerRef = inject(ViewContainerRef);
+  _isSelected = Subscription.EMPTY;
+  /** Content for step label given by `<ng-template matStepLabel>`. */
+  // We need an initializer here to avoid a TS error.
+  stepLabel = void 0;
+  /**
+   * Theme color for the particular step. This API is supported in M2 themes
+   * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/stepper/styling.
+   *
+   * For information on applying color variants in M3, see
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   */
+  color;
+  /** Content that will be rendered lazily. */
+  _lazyContent;
+  /** Currently-attached portal containing the lazy content. */
+  _portal;
+  ngAfterContentInit() {
+    this._isSelected = this._stepper.steps.changes.pipe(switchMap(() => {
+      return this._stepper.selectionChange.pipe(map((event) => event.selectedStep === this), startWith(this._stepper.selected === this));
+    })).subscribe((isSelected) => {
+      if (isSelected && this._lazyContent && !this._portal) {
+        this._portal = new TemplatePortal(this._lazyContent._template, this._viewContainerRef);
+      }
+    });
+  }
+  ngOnDestroy() {
+    this._isSelected.unsubscribe();
+  }
+  /** Custom error state matcher that additionally checks for validity of interacted form. */
+  isErrorState(control, form) {
+    const originalErrorState = this._errorStateMatcher.isErrorState(control, form);
+    const customErrorState = !!(control && control.invalid && this.interacted);
+    return originalErrorState || customErrorState;
+  }
+  static \u0275fac = /* @__PURE__ */ (() => {
+    let \u0275MatStep_BaseFactory;
+    return function MatStep_Factory(__ngFactoryType__) {
+      return (\u0275MatStep_BaseFactory || (\u0275MatStep_BaseFactory = \u0275\u0275getInheritedFactory(_MatStep)))(__ngFactoryType__ || _MatStep);
+    };
+  })();
+  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({
+    type: _MatStep,
+    selectors: [["mat-step"]],
+    contentQueries: function MatStep_ContentQueries(rf, ctx, dirIndex) {
+      if (rf & 1) {
+        \u0275\u0275contentQuery(dirIndex, MatStepLabel, 5);
+        \u0275\u0275contentQuery(dirIndex, MatStepContent, 5);
+      }
+      if (rf & 2) {
+        let _t;
+        \u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx.stepLabel = _t.first);
+        \u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._lazyContent = _t.first);
+      }
+    },
+    hostAttrs: ["hidden", ""],
+    inputs: {
+      color: "color"
+    },
+    exportAs: ["matStep"],
+    features: [\u0275\u0275ProvidersFeature([{
+      provide: ErrorStateMatcher,
+      useExisting: _MatStep
+    }, {
+      provide: CdkStep,
+      useExisting: _MatStep
+    }]), \u0275\u0275InheritDefinitionFeature],
+    ngContentSelectors: _c1,
+    decls: 1,
+    vars: 0,
+    consts: [[3, "cdkPortalOutlet"]],
+    template: function MatStep_Template(rf, ctx) {
+      if (rf & 1) {
+        \u0275\u0275projectionDef();
+        \u0275\u0275template(0, MatStep_ng_template_0_Template, 2, 1, "ng-template");
+      }
+    },
+    dependencies: [CdkPortalOutlet],
+    encapsulation: 2,
+    changeDetection: 0
+  });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatStep, [{
+    type: Component,
+    args: [{
+      selector: "mat-step",
+      providers: [{
+        provide: ErrorStateMatcher,
+        useExisting: MatStep
+      }, {
+        provide: CdkStep,
+        useExisting: MatStep
+      }],
+      encapsulation: ViewEncapsulation.None,
+      exportAs: "matStep",
+      changeDetection: ChangeDetectionStrategy.OnPush,
+      imports: [CdkPortalOutlet],
+      host: {
+        "hidden": ""
+        // Hide the steps so they don't affect the layout.
+      },
+      template: '<ng-template>\n  <ng-content></ng-content>\n  <ng-template [cdkPortalOutlet]="_portal"></ng-template>\n</ng-template>\n'
+    }]
+  }], null, {
+    stepLabel: [{
+      type: ContentChild,
+      args: [MatStepLabel]
+    }],
+    color: [{
+      type: Input
+    }],
+    _lazyContent: [{
+      type: ContentChild,
+      args: [MatStepContent, {
+        static: false
+      }]
+    }]
+  });
+})();
+var MatStepper = class _MatStepper extends CdkStepper {
+  _ngZone = inject(NgZone);
+  _renderer = inject(Renderer2);
+  _animationsDisabled = _animationsDisabled();
+  _cleanupTransition;
+  _isAnimating = signal(false);
+  /** The list of step headers of the steps in the stepper. */
+  _stepHeader = void 0;
+  /** Elements hosting the step animations. */
+  _animatedContainers;
+  /** Full list of steps inside the stepper, including inside nested steppers. */
+  _steps = void 0;
+  /** Steps that belong to the current stepper, excluding ones from nested steppers. */
+  steps = new QueryList();
+  /** Custom icon overrides passed in by the consumer. */
+  _icons;
+  /** Event emitted when the current step is done transitioning in. */
+  animationDone = new EventEmitter();
+  /** Whether ripples should be disabled for the step headers. */
+  disableRipple;
+  /**
+   * Theme color for all of the steps in stepper. This API is supported in M2
+   * themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/stepper/styling.
+   *
+   * For information on applying color variants in M3, see
+   * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+   */
+  color;
+  /**
+   * Whether the label should display in bottom or end position.
+   * Only applies in the `horizontal` orientation.
+   */
+  labelPosition = "end";
+  /**
+   * Position of the stepper's header.
+   * Only applies in the `horizontal` orientation.
+   */
+  headerPosition = "top";
+  /** Consumer-specified template-refs to be used to override the header icons. */
+  _iconOverrides = {};
+  /** Duration for the animation. Will be normalized to milliseconds if no units are set. */
+  get animationDuration() {
+    return this._animationDuration;
+  }
+  set animationDuration(value) {
+    this._animationDuration = /^\d+$/.test(value) ? value + "ms" : value;
+  }
+  _animationDuration = "";
+  /** Whether the stepper is rendering on the server. */
+  _isServer = !inject(Platform).isBrowser;
+  constructor() {
+    super();
+    const elementRef = inject(ElementRef);
+    const nodeName = elementRef.nativeElement.nodeName.toLowerCase();
+    this.orientation = nodeName === "mat-vertical-stepper" ? "vertical" : "horizontal";
+  }
+  ngAfterContentInit() {
+    super.ngAfterContentInit();
+    this._icons.forEach(({
+      name,
+      templateRef
+    }) => this._iconOverrides[name] = templateRef);
+    this.steps.changes.pipe(takeUntil(this._destroyed)).subscribe(() => this._stateChanged());
+    this.selectedIndexChange.pipe(takeUntil(this._destroyed)).subscribe(() => {
+      const duration = this._getAnimationDuration();
+      if (duration === "0ms" || duration === "0s") {
+        this._onAnimationDone();
+      } else {
+        this._isAnimating.set(true);
+      }
+    });
+    this._ngZone.runOutsideAngular(() => {
+      if (!this._animationsDisabled) {
+        setTimeout(() => {
+          this._elementRef.nativeElement.classList.add("mat-stepper-animations-enabled");
+          this._cleanupTransition = this._renderer.listen(this._elementRef.nativeElement, "transitionend", this._handleTransitionend);
+        }, 200);
+      }
+    });
+  }
+  ngAfterViewInit() {
+    super.ngAfterViewInit();
+    if (typeof queueMicrotask === "function") {
+      let hasEmittedInitial = false;
+      this._animatedContainers.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => queueMicrotask(() => {
+        if (!hasEmittedInitial) {
+          hasEmittedInitial = true;
+          this.animationDone.emit();
+        }
+        this._stateChanged();
+      }));
+    }
+  }
+  ngOnDestroy() {
+    super.ngOnDestroy();
+    this._cleanupTransition?.();
+  }
+  _getAnimationDuration() {
+    if (this._animationsDisabled) {
+      return "0ms";
+    }
+    if (this.animationDuration) {
+      return this.animationDuration;
+    }
+    return this.orientation === "horizontal" ? "500ms" : "225ms";
+  }
+  _handleTransitionend = (event) => {
+    const target = event.target;
+    if (!target) {
+      return;
+    }
+    const isHorizontalActiveElement = this.orientation === "horizontal" && event.propertyName === "transform" && target.classList.contains("mat-horizontal-stepper-content-current");
+    const isVerticalActiveElement = this.orientation === "vertical" && event.propertyName === "grid-template-rows" && target.classList.contains("mat-vertical-content-container-active");
+    const shouldEmit = (isHorizontalActiveElement || isVerticalActiveElement) && this._animatedContainers.find((ref) => ref.nativeElement === target);
+    if (shouldEmit) {
+      this._onAnimationDone();
+    }
+  };
+  _onAnimationDone() {
+    this._isAnimating.set(false);
+    this.animationDone.emit();
+  }
+  static \u0275fac = function MatStepper_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _MatStepper)();
+  };
+  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({
+    type: _MatStepper,
+    selectors: [["mat-stepper"], ["mat-vertical-stepper"], ["mat-horizontal-stepper"], ["", "matStepper", ""]],
+    contentQueries: function MatStepper_ContentQueries(rf, ctx, dirIndex) {
+      if (rf & 1) {
+        \u0275\u0275contentQuery(dirIndex, MatStep, 5);
+        \u0275\u0275contentQuery(dirIndex, MatStepperIcon, 5);
+      }
+      if (rf & 2) {
+        let _t;
+        \u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._steps = _t);
+        \u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._icons = _t);
+      }
+    },
+    viewQuery: function MatStepper_Query(rf, ctx) {
+      if (rf & 1) {
+        \u0275\u0275viewQuery(MatStepHeader, 5);
+        \u0275\u0275viewQuery(_c2, 5);
+      }
+      if (rf & 2) {
+        let _t;
+        \u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._stepHeader = _t);
+        \u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx._animatedContainers = _t);
+      }
+    },
+    hostAttrs: ["role", "tablist"],
+    hostVars: 15,
+    hostBindings: function MatStepper_HostBindings(rf, ctx) {
+      if (rf & 2) {
+        \u0275\u0275attribute("aria-orientation", ctx.orientation);
+        \u0275\u0275styleProp("--mat-stepper-animation-duration", ctx._getAnimationDuration());
+        \u0275\u0275classProp("mat-stepper-horizontal", ctx.orientation === "horizontal")("mat-stepper-vertical", ctx.orientation === "vertical")("mat-stepper-label-position-end", ctx.orientation === "horizontal" && ctx.labelPosition == "end")("mat-stepper-label-position-bottom", ctx.orientation === "horizontal" && ctx.labelPosition == "bottom")("mat-stepper-header-position-bottom", ctx.headerPosition === "bottom")("mat-stepper-animating", ctx._isAnimating());
+      }
+    },
+    inputs: {
+      disableRipple: "disableRipple",
+      color: "color",
+      labelPosition: "labelPosition",
+      headerPosition: "headerPosition",
+      animationDuration: "animationDuration"
+    },
+    outputs: {
+      animationDone: "animationDone"
+    },
+    exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"],
+    features: [\u0275\u0275ProvidersFeature([{
+      provide: CdkStepper,
+      useExisting: _MatStepper
+    }]), \u0275\u0275InheritDefinitionFeature],
+    ngContentSelectors: _c1,
+    decls: 5,
+    vars: 2,
+    consts: [["stepTemplate", ""], ["animatedContainer", ""], [1, "mat-horizontal-stepper-wrapper"], [1, "mat-horizontal-stepper-header-container"], [1, "mat-horizontal-content-container"], ["role", "tabpanel", 1, "mat-horizontal-stepper-content", 3, "id", "class"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "mat-stepper-horizontal-line"], ["role", "tabpanel", 1, "mat-horizontal-stepper-content", 3, "id"], [3, "ngTemplateOutlet"], [1, "mat-step"], [1, "mat-vertical-content-container"], ["role", "tabpanel", 1, "mat-vertical-stepper-content", 3, "id"], [1, "mat-vertical-content"], [3, "click", "keydown", "tabIndex", "id", "index", "state", "label", "selected", "active", "optional", "errorMessage", "iconOverrides", "disableRipple", "color"]],
+    template: function MatStepper_Template(rf, ctx) {
+      if (rf & 1) {
+        \u0275\u0275projectionDef();
+        \u0275\u0275conditionalCreate(0, MatStepper_Conditional_0_Template, 1, 0);
+        \u0275\u0275conditionalCreate(1, MatStepper_Case_1_Template, 7, 0, "div", 2)(2, MatStepper_Case_2_Template, 2, 0);
+        \u0275\u0275template(3, MatStepper_ng_template_3_Template, 1, 23, "ng-template", null, 0, \u0275\u0275templateRefExtractor);
+      }
+      if (rf & 2) {
+        let tmp_2_0;
+        \u0275\u0275conditional(ctx._isServer ? 0 : -1);
+        \u0275\u0275advance();
+        \u0275\u0275conditional((tmp_2_0 = ctx.orientation) === "horizontal" ? 1 : tmp_2_0 === "vertical" ? 2 : -1);
+      }
+    },
+    dependencies: [NgTemplateOutlet, MatStepHeader],
+    styles: ['.mat-stepper-vertical,.mat-stepper-horizontal{display:block;font-family:var(--mat-stepper-container-text-font, var(--mat-sys-body-medium-font));background:var(--mat-stepper-container-color, var(--mat-sys-surface))}.mat-horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header-container{align-items:flex-start}.mat-stepper-header-position-bottom .mat-horizontal-stepper-header-container{order:1}.mat-stepper-horizontal-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px;border-top-color:var(--mat-stepper-line-color, var(--mat-sys-outline))}.mat-stepper-label-position-bottom .mat-stepper-horizontal-line{margin:0;min-width:0;position:relative;top:calc(calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) + 12px)}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before,.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after{border-top-width:1px;border-top-style:solid;content:"";display:inline-block;height:0;position:absolute;width:calc(50% - 20px)}.mat-horizontal-stepper-header{display:flex;overflow:hidden;align-items:center;padding:0 24px;height:var(--mat-stepper-header-height, 72px)}.mat-horizontal-stepper-header .mat-step-icon{margin-right:8px;flex:none}[dir=rtl] .mat-horizontal-stepper-header .mat-step-icon{margin-right:0;margin-left:8px}.mat-horizontal-stepper-header.mat-step-header-empty-label .mat-step-icon{margin:0}.mat-horizontal-stepper-header::before,.mat-horizontal-stepper-header::after{border-top-color:var(--mat-stepper-line-color, var(--mat-sys-outline))}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header{padding:calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) 24px}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header::before,.mat-stepper-label-position-bottom .mat-horizontal-stepper-header::after{top:calc(calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) + 12px)}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header{box-sizing:border-box;flex-direction:column;height:auto}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after{right:0}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before{left:0}[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:last-child::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:first-child::after{display:none}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-icon{margin-right:0;margin-left:0}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-label{padding:16px 0 0 0;text-align:center;width:100%}.mat-vertical-stepper-header{display:flex;align-items:center;height:24px;padding:calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) 24px}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}[dir=rtl] .mat-vertical-stepper-header .mat-step-icon{margin-right:0;margin-left:12px}.mat-horizontal-stepper-wrapper{display:flex;flex-direction:column}.mat-horizontal-stepper-content{visibility:hidden;overflow:hidden;outline:0;height:0}.mat-stepper-animations-enabled .mat-horizontal-stepper-content{transition:transform var(--mat-stepper-animation-duration, 0) cubic-bezier(0.35, 0, 0.25, 1)}.mat-horizontal-stepper-content.mat-horizontal-stepper-content-previous{transform:translate3d(-100%, 0, 0)}.mat-horizontal-stepper-content.mat-horizontal-stepper-content-next{transform:translate3d(100%, 0, 0)}.mat-horizontal-stepper-content.mat-horizontal-stepper-content-current{visibility:visible;transform:none;height:auto}.mat-stepper-horizontal:not(.mat-stepper-animating) .mat-horizontal-stepper-content.mat-horizontal-stepper-content-current{overflow:visible}.mat-horizontal-content-container{overflow:hidden;padding:0 24px 24px 24px}@media(forced-colors: active){.mat-horizontal-content-container{outline:solid 1px}}.mat-stepper-header-position-bottom .mat-horizontal-content-container{padding:24px 24px 0 24px}.mat-vertical-content-container{display:grid;grid-template-rows:0fr;grid-template-columns:100%;margin-left:36px;border:0;position:relative}.mat-stepper-animations-enabled .mat-vertical-content-container{transition:grid-template-rows var(--mat-stepper-animation-duration, 0) cubic-bezier(0.4, 0, 0.2, 1)}.mat-vertical-content-container.mat-vertical-content-container-active{grid-template-rows:1fr}.mat-step:last-child .mat-vertical-content-container{border:none}@media(forced-colors: active){.mat-vertical-content-container{outline:solid 1px}}[dir=rtl] .mat-vertical-content-container{margin-left:0;margin-right:36px}@supports not (grid-template-rows: 0fr){.mat-vertical-content-container{height:0}.mat-vertical-content-container.mat-vertical-content-container-active{height:auto}}.mat-stepper-vertical-line::before{content:"";position:absolute;left:0;border-left-width:1px;border-left-style:solid;border-left-color:var(--mat-stepper-line-color, var(--mat-sys-outline));top:calc(8px - calc((var(--mat-stepper-header-height, 72px) - 24px) / 2));bottom:calc(8px - calc((var(--mat-stepper-header-height, 72px) - 24px) / 2))}[dir=rtl] .mat-stepper-vertical-line::before{left:auto;right:0}.mat-vertical-stepper-content{overflow:hidden;outline:0;visibility:hidden}.mat-stepper-animations-enabled .mat-vertical-stepper-content{transition:visibility var(--mat-stepper-animation-duration, 0) linear}.mat-vertical-content-container-active>.mat-vertical-stepper-content{visibility:visible}.mat-vertical-content{padding:0 24px 24px 24px}\n'],
+    encapsulation: 2,
+    changeDetection: 0
+  });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatStepper, [{
+    type: Component,
+    args: [{
+      selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]",
+      exportAs: "matStepper, matVerticalStepper, matHorizontalStepper",
+      host: {
+        "[class.mat-stepper-horizontal]": 'orientation === "horizontal"',
+        "[class.mat-stepper-vertical]": 'orientation === "vertical"',
+        "[class.mat-stepper-label-position-end]": 'orientation === "horizontal" && labelPosition == "end"',
+        "[class.mat-stepper-label-position-bottom]": 'orientation === "horizontal" && labelPosition == "bottom"',
+        "[class.mat-stepper-header-position-bottom]": 'headerPosition === "bottom"',
+        "[class.mat-stepper-animating]": "_isAnimating()",
+        "[style.--mat-stepper-animation-duration]": "_getAnimationDuration()",
+        "[attr.aria-orientation]": "orientation",
+        "role": "tablist"
+      },
+      providers: [{
+        provide: CdkStepper,
+        useExisting: MatStepper
+      }],
+      encapsulation: ViewEncapsulation.None,
+      changeDetection: ChangeDetectionStrategy.OnPush,
+      imports: [NgTemplateOutlet, MatStepHeader],
+      template: `<!--
+  We need to project the content somewhere to avoid hydration errors. Some observations:
+  1. This is only necessary on the server.
+  2. We get a hydration error if there aren't any nodes after the \`ng-content\`.
+  3. We get a hydration error if \`ng-content\` is wrapped in another element.
+-->
+@if (_isServer) {
+  <ng-content/>
+}
+
+@switch (orientation) {
+  @case ('horizontal') {
+    <div class="mat-horizontal-stepper-wrapper">
+      <div class="mat-horizontal-stepper-header-container">
+        @for (step of steps; track step) {
+          <ng-container
+            [ngTemplateOutlet]="stepTemplate"
+            [ngTemplateOutletContext]="{step}"/>
+          @if (!$last) {
+            <div class="mat-stepper-horizontal-line"></div>
+          }
+        }
+      </div>
+
+      <div class="mat-horizontal-content-container">
+        @for (step of steps; track step) {
+          <div
+            #animatedContainer
+            class="mat-horizontal-stepper-content"
+            role="tabpanel"
+            [id]="_getStepContentId($index)"
+            [attr.aria-labelledby]="_getStepLabelId($index)"
+            [class]="'mat-horizontal-stepper-content-' + _getAnimationDirection($index)"
+            [attr.inert]="selectedIndex === $index ? null : ''">
+            <ng-container [ngTemplateOutlet]="step.content"/>
+          </div>
+        }
+      </div>
+    </div>
+  }
+
+  @case ('vertical') {
+    @for (step of steps; track step) {
+      <div class="mat-step">
+        <ng-container
+          [ngTemplateOutlet]="stepTemplate"
+          [ngTemplateOutletContext]="{step}"/>
+        <div
+          #animatedContainer
+          class="mat-vertical-content-container"
+          [class.mat-stepper-vertical-line]="!$last"
+          [class.mat-vertical-content-container-active]="selectedIndex === $index"
+          [attr.inert]="selectedIndex === $index ? null : ''">
+          <div class="mat-vertical-stepper-content"
+            role="tabpanel"
+            [id]="_getStepContentId($index)"
+            [attr.aria-labelledby]="_getStepLabelId($index)">
+            <div class="mat-vertical-content">
+              <ng-container [ngTemplateOutlet]="step.content"/>
+            </div>
+          </div>
+        </div>
+      </div>
+    }
+  }
+}
+
+<!-- Common step templating -->
+<ng-template let-step="step" #stepTemplate>
+  <mat-step-header
+    [class.mat-horizontal-stepper-header]="orientation === 'horizontal'"
+    [class.mat-vertical-stepper-header]="orientation === 'vertical'"
+    (click)="step.select()"
+    (keydown)="_onKeydown($event)"
+    [tabIndex]="_getFocusIndex() === step.index() ? 0 : -1"
+    [id]="_getStepLabelId(step.index())"
+    [attr.aria-posinset]="step.index() + 1"
+    [attr.aria-setsize]="steps.length"
+    [attr.aria-controls]="_getStepContentId(step.index())"
+    [attr.aria-selected]="step.isSelected()"
+    [attr.aria-label]="step.ariaLabel || null"
+    [attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null"
+    [attr.aria-disabled]="step.isNavigable() ? null : true"
+    [index]="step.index()"
+    [state]="step.indicatorType()"
+    [label]="step.stepLabel || step.label"
+    [selected]="step.isSelected()"
+    [active]="step.isNavigable()"
+    [optional]="step.optional"
+    [errorMessage]="step.errorMessage"
+    [iconOverrides]="_iconOverrides"
+    [disableRipple]="disableRipple || !step.isNavigable()"
+    [color]="step.color || color"/>
+</ng-template>
+`,
+      styles: ['.mat-stepper-vertical,.mat-stepper-horizontal{display:block;font-family:var(--mat-stepper-container-text-font, var(--mat-sys-body-medium-font));background:var(--mat-stepper-container-color, var(--mat-sys-surface))}.mat-horizontal-stepper-header-container{white-space:nowrap;display:flex;align-items:center}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header-container{align-items:flex-start}.mat-stepper-header-position-bottom .mat-horizontal-stepper-header-container{order:1}.mat-stepper-horizontal-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;margin:0 -16px;min-width:32px;border-top-color:var(--mat-stepper-line-color, var(--mat-sys-outline))}.mat-stepper-label-position-bottom .mat-stepper-horizontal-line{margin:0;min-width:0;position:relative;top:calc(calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) + 12px)}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before,.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after{border-top-width:1px;border-top-style:solid;content:"";display:inline-block;height:0;position:absolute;width:calc(50% - 20px)}.mat-horizontal-stepper-header{display:flex;overflow:hidden;align-items:center;padding:0 24px;height:var(--mat-stepper-header-height, 72px)}.mat-horizontal-stepper-header .mat-step-icon{margin-right:8px;flex:none}[dir=rtl] .mat-horizontal-stepper-header .mat-step-icon{margin-right:0;margin-left:8px}.mat-horizontal-stepper-header.mat-step-header-empty-label .mat-step-icon{margin:0}.mat-horizontal-stepper-header::before,.mat-horizontal-stepper-header::after{border-top-color:var(--mat-stepper-line-color, var(--mat-sys-outline))}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header{padding:calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) 24px}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header::before,.mat-stepper-label-position-bottom .mat-horizontal-stepper-header::after{top:calc(calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) + 12px)}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header{box-sizing:border-box;flex-direction:column;height:auto}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after{right:0}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before{left:0}[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:last-child::before,[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:first-child::after{display:none}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-icon{margin-right:0;margin-left:0}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-label{padding:16px 0 0 0;text-align:center;width:100%}.mat-vertical-stepper-header{display:flex;align-items:center;height:24px;padding:calc((var(--mat-stepper-header-height, 72px) - 24px) / 2) 24px}.mat-vertical-stepper-header .mat-step-icon{margin-right:12px}[dir=rtl] .mat-vertical-stepper-header .mat-step-icon{margin-right:0;margin-left:12px}.mat-horizontal-stepper-wrapper{display:flex;flex-direction:column}.mat-horizontal-stepper-content{visibility:hidden;overflow:hidden;outline:0;height:0}.mat-stepper-animations-enabled .mat-horizontal-stepper-content{transition:transform var(--mat-stepper-animation-duration, 0) cubic-bezier(0.35, 0, 0.25, 1)}.mat-horizontal-stepper-content.mat-horizontal-stepper-content-previous{transform:translate3d(-100%, 0, 0)}.mat-horizontal-stepper-content.mat-horizontal-stepper-content-next{transform:translate3d(100%, 0, 0)}.mat-horizontal-stepper-content.mat-horizontal-stepper-content-current{visibility:visible;transform:none;height:auto}.mat-stepper-horizontal:not(.mat-stepper-animating) .mat-horizontal-stepper-content.mat-horizontal-stepper-content-current{overflow:visible}.mat-horizontal-content-container{overflow:hidden;padding:0 24px 24px 24px}@media(forced-colors: active){.mat-horizontal-content-container{outline:solid 1px}}.mat-stepper-header-position-bottom .mat-horizontal-content-container{padding:24px 24px 0 24px}.mat-vertical-content-container{display:grid;grid-template-rows:0fr;grid-template-columns:100%;margin-left:36px;border:0;position:relative}.mat-stepper-animations-enabled .mat-vertical-content-container{transition:grid-template-rows var(--mat-stepper-animation-duration, 0) cubic-bezier(0.4, 0, 0.2, 1)}.mat-vertical-content-container.mat-vertical-content-container-active{grid-template-rows:1fr}.mat-step:last-child .mat-vertical-content-container{border:none}@media(forced-colors: active){.mat-vertical-content-container{outline:solid 1px}}[dir=rtl] .mat-vertical-content-container{margin-left:0;margin-right:36px}@supports not (grid-template-rows: 0fr){.mat-vertical-content-container{height:0}.mat-vertical-content-container.mat-vertical-content-container-active{height:auto}}.mat-stepper-vertical-line::before{content:"";position:absolute;left:0;border-left-width:1px;border-left-style:solid;border-left-color:var(--mat-stepper-line-color, var(--mat-sys-outline));top:calc(8px - calc((var(--mat-stepper-header-height, 72px) - 24px) / 2));bottom:calc(8px - calc((var(--mat-stepper-header-height, 72px) - 24px) / 2))}[dir=rtl] .mat-stepper-vertical-line::before{left:auto;right:0}.mat-vertical-stepper-content{overflow:hidden;outline:0;visibility:hidden}.mat-stepper-animations-enabled .mat-vertical-stepper-content{transition:visibility var(--mat-stepper-animation-duration, 0) linear}.mat-vertical-content-container-active>.mat-vertical-stepper-content{visibility:visible}.mat-vertical-content{padding:0 24px 24px 24px}\n']
+    }]
+  }], () => [], {
+    _stepHeader: [{
+      type: ViewChildren,
+      args: [MatStepHeader]
+    }],
+    _animatedContainers: [{
+      type: ViewChildren,
+      args: ["animatedContainer"]
+    }],
+    _steps: [{
+      type: ContentChildren,
+      args: [MatStep, {
+        descendants: true
+      }]
+    }],
+    _icons: [{
+      type: ContentChildren,
+      args: [MatStepperIcon, {
+        descendants: true
+      }]
+    }],
+    animationDone: [{
+      type: Output
+    }],
+    disableRipple: [{
+      type: Input
+    }],
+    color: [{
+      type: Input
+    }],
+    labelPosition: [{
+      type: Input
+    }],
+    headerPosition: [{
+      type: Input
+    }],
+    animationDuration: [{
+      type: Input
+    }]
+  });
+})();
+var MatStepperNext = class _MatStepperNext extends CdkStepperNext {
+  static \u0275fac = /* @__PURE__ */ (() => {
+    let \u0275MatStepperNext_BaseFactory;
+    return function MatStepperNext_Factory(__ngFactoryType__) {
+      return (\u0275MatStepperNext_BaseFactory || (\u0275MatStepperNext_BaseFactory = \u0275\u0275getInheritedFactory(_MatStepperNext)))(__ngFactoryType__ || _MatStepperNext);
+    };
+  })();
+  static \u0275dir = /* @__PURE__ */ \u0275\u0275defineDirective({
+    type: _MatStepperNext,
+    selectors: [["button", "matStepperNext", ""]],
+    hostAttrs: [1, "mat-stepper-next"],
+    hostVars: 1,
+    hostBindings: function MatStepperNext_HostBindings(rf, ctx) {
+      if (rf & 2) {
+        \u0275\u0275domProperty("type", ctx.type);
+      }
+    },
+    features: [\u0275\u0275InheritDefinitionFeature]
+  });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatStepperNext, [{
+    type: Directive,
+    args: [{
+      selector: "button[matStepperNext]",
+      host: {
+        "class": "mat-stepper-next",
+        "[type]": "type"
+      }
+    }]
+  }], null, null);
+})();
+var MatStepperPrevious = class _MatStepperPrevious extends CdkStepperPrevious {
+  static \u0275fac = /* @__PURE__ */ (() => {
+    let \u0275MatStepperPrevious_BaseFactory;
+    return function MatStepperPrevious_Factory(__ngFactoryType__) {
+      return (\u0275MatStepperPrevious_BaseFactory || (\u0275MatStepperPrevious_BaseFactory = \u0275\u0275getInheritedFactory(_MatStepperPrevious)))(__ngFactoryType__ || _MatStepperPrevious);
+    };
+  })();
+  static \u0275dir = /* @__PURE__ */ \u0275\u0275defineDirective({
+    type: _MatStepperPrevious,
+    selectors: [["button", "matStepperPrevious", ""]],
+    hostAttrs: [1, "mat-stepper-previous"],
+    hostVars: 1,
+    hostBindings: function MatStepperPrevious_HostBindings(rf, ctx) {
+      if (rf & 2) {
+        \u0275\u0275domProperty("type", ctx.type);
+      }
+    },
+    features: [\u0275\u0275InheritDefinitionFeature]
+  });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatStepperPrevious, [{
+    type: Directive,
+    args: [{
+      selector: "button[matStepperPrevious]",
+      host: {
+        "class": "mat-stepper-previous",
+        "[type]": "type"
+      }
+    }]
+  }], null, null);
+})();
+var MatStepperModule = class _MatStepperModule {
+  static \u0275fac = function MatStepperModule_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _MatStepperModule)();
+  };
+  static \u0275mod = /* @__PURE__ */ \u0275\u0275defineNgModule({
+    type: _MatStepperModule,
+    imports: [MatCommonModule, PortalModule, CdkStepperModule, MatIconModule, MatRippleModule, MatStep, MatStepLabel, MatStepper, MatStepperNext, MatStepperPrevious, MatStepHeader, MatStepperIcon, MatStepContent],
+    exports: [MatCommonModule, MatStep, MatStepLabel, MatStepper, MatStepperNext, MatStepperPrevious, MatStepHeader, MatStepperIcon, MatStepContent]
+  });
+  static \u0275inj = /* @__PURE__ */ \u0275\u0275defineInjector({
+    providers: [MAT_STEPPER_INTL_PROVIDER, ErrorStateMatcher],
+    imports: [MatCommonModule, PortalModule, CdkStepperModule, MatIconModule, MatRippleModule, MatStepper, MatStepHeader, MatCommonModule]
+  });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(MatStepperModule, [{
+    type: NgModule,
+    args: [{
+      imports: [MatCommonModule, PortalModule, CdkStepperModule, MatIconModule, MatRippleModule, MatStep, MatStepLabel, MatStepper, MatStepperNext, MatStepperPrevious, MatStepHeader, MatStepperIcon, MatStepContent],
+      exports: [MatCommonModule, MatStep, MatStepLabel, MatStepper, MatStepperNext, MatStepperPrevious, MatStepHeader, MatStepperIcon, MatStepContent],
+      providers: [MAT_STEPPER_INTL_PROVIDER, ErrorStateMatcher]
+    }]
+  }], null, null);
+})();
+
+// src/app/core/components/datasets/datasets.component.ts
+var _c03 = () => [5, 10, 25, 100];
+function SettingsDatasetsComponent_mat_header_cell_13_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "mat-header-cell", 29);
+    \u0275\u0275text(1, " Path ");
+    \u0275\u0275elementEnd();
+  }
+}
+function SettingsDatasetsComponent_mat_cell_14_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "mat-cell", 30);
+    \u0275\u0275text(1);
+    \u0275\u0275elementEnd();
+  }
+  if (rf & 2) {
+    const element_r2 = ctx.$implicit;
+    \u0275\u0275advance();
+    \u0275\u0275textInterpolate1(" ", element_r2.path, " ");
+  }
+}
+function SettingsDatasetsComponent_mat_header_cell_16_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "mat-header-cell", 31);
+    \u0275\u0275text(1, " Source ");
+    \u0275\u0275elementEnd();
+  }
+}
+function SettingsDatasetsComponent_mat_cell_17_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "mat-cell", 32);
+    \u0275\u0275text(1);
+    \u0275\u0275elementEnd();
+  }
+  if (rf & 2) {
+    const element_r3 = ctx.$implicit;
+    \u0275\u0275advance();
+    \u0275\u0275textInterpolate1(" ", element_r3.pathSource, " ");
+  }
+}
+function SettingsDatasetsComponent_mat_header_cell_19_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "mat-header-cell", 31);
+    \u0275\u0275text(1, " Time Scale ");
+    \u0275\u0275elementEnd();
+  }
+}
+function SettingsDatasetsComponent_mat_cell_20_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "mat-cell", 33);
+    \u0275\u0275text(1);
+    \u0275\u0275elementEnd();
+  }
+  if (rf & 2) {
+    const element_r4 = ctx.$implicit;
+    \u0275\u0275advance();
+    \u0275\u0275textInterpolate1(" ", element_r4.timeScaleFormat, " ");
+  }
+}
+function SettingsDatasetsComponent_mat_header_cell_22_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "mat-header-cell", 31);
+    \u0275\u0275text(1, " Duration ");
+    \u0275\u0275elementEnd();
+  }
+}
+function SettingsDatasetsComponent_mat_cell_23_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "mat-cell", 33);
+    \u0275\u0275text(1);
+    \u0275\u0275elementEnd();
+  }
+  if (rf & 2) {
+    const element_r5 = ctx.$implicit;
+    \u0275\u0275advance();
+    \u0275\u0275textInterpolate1(" ", element_r5.period, " ");
+  }
+}
+function SettingsDatasetsComponent_mat_header_cell_25_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275element(0, "mat-header-cell", 34);
+  }
+}
+function SettingsDatasetsComponent_mat_cell_26_Template(rf, ctx) {
+  if (rf & 1) {
+    const _r6 = \u0275\u0275getCurrentView();
+    \u0275\u0275elementStart(0, "mat-cell", 35)(1, "button", 36);
+    \u0275\u0275listener("click", function SettingsDatasetsComponent_mat_cell_26_Template_button_click_1_listener() {
+      const element_r7 = \u0275\u0275restoreView(_r6).$implicit;
+      const ctx_r7 = \u0275\u0275nextContext();
+      return \u0275\u0275resetView(ctx_r7.openDatasetModal(element_r7.uuid));
+    });
+    \u0275\u0275text(2, "Edit");
+    \u0275\u0275elementEnd();
+    \u0275\u0275elementStart(3, "button", 36);
+    \u0275\u0275listener("click", function SettingsDatasetsComponent_mat_cell_26_Template_button_click_3_listener() {
+      const element_r7 = \u0275\u0275restoreView(_r6).$implicit;
+      const ctx_r7 = \u0275\u0275nextContext();
+      return \u0275\u0275resetView(ctx_r7.deleteDataset(element_r7.uuid));
+    });
+    \u0275\u0275text(4, "Delete");
+    \u0275\u0275elementEnd()();
+  }
+}
+function SettingsDatasetsComponent_mat_header_row_27_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275element(0, "mat-header-row", 37);
+  }
+}
+function SettingsDatasetsComponent_mat_row_28_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275element(0, "mat-row", 38);
+  }
+}
+function SettingsDatasetsComponent_mat_row_29_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "mat-row");
+    \u0275\u0275text(1);
+    \u0275\u0275elementEnd();
+  }
+  if (rf & 2) {
+    \u0275\u0275nextContext();
+    const input_r9 = \u0275\u0275reference(9);
+    \u0275\u0275advance();
+    \u0275\u0275textInterpolate1(' No data matching the filter "', input_r9.value, '" ');
+  }
+}
+function SettingsDatasetsModalComponent_ng_template_7_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275text(0, "Source Data");
+  }
+}
+function SettingsDatasetsModalComponent_For_14_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "mat-option", 7);
+    \u0275\u0275text(1);
+    \u0275\u0275elementEnd();
+  }
+  if (rf & 2) {
+    const path_r2 = ctx.$implicit;
+    \u0275\u0275property("value", path_r2);
+    \u0275\u0275advance();
+    \u0275\u0275textInterpolate1(" ", path_r2, " ");
+  }
+}
+function SettingsDatasetsModalComponent_For_25_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "mat-option", 7);
+    \u0275\u0275text(1);
+    \u0275\u0275elementEnd();
+  }
+  if (rf & 2) {
+    const source_r3 = ctx.$implicit;
+    \u0275\u0275property("value", source_r3);
+    \u0275\u0275advance();
+    \u0275\u0275textInterpolate1(" ", source_r3, " ");
+  }
+}
+function SettingsDatasetsModalComponent_ng_template_31_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275text(0, "Sampling");
+  }
+}
+var _c12 = "\n\n[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n.content-area[_ngcontent-%COMP%] {\n  height: calc(100% - 63px);\n  overflow-y: auto;\n  width: 100%;\n  scroll-behavior: smooth;\n}\n.filter[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n.buttons[_ngcontent-%COMP%] {\n  margin-top: 10px;\n}\n.mat-column-actions[_ngcontent-%COMP%] {\n  text-align: end;\n}\n.buttons[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n.pathCell[_ngcontent-%COMP%] {\n  flex: 1 1 50%;\n}\n.pathHeader[_ngcontent-%COMP%] {\n  flex: 1 1 50%;\n}\n.dataHeader[_ngcontent-%COMP%] {\n  flex: 1 1 10%;\n  justify-content: center;\n}\n.dataCell[_ngcontent-%COMP%] {\n  flex: 1 1 10%;\n  justify-content: center;\n}\n.actionHeader[_ngcontent-%COMP%] {\n  flex: 1 1 20%;\n}\n.actionCell[_ngcontent-%COMP%] {\n  flex: 1 1 20%;\n  justify-content: end;\n}\n@media screen and (max-width: 750px) {\n  .pathHeader[_ngcontent-%COMP%] {\n    flex: 1 1 30%;\n  }\n  .dataHeader[_ngcontent-%COMP%] {\n    flex: 1 1 30%;\n  }\n  .actionHeader[_ngcontent-%COMP%] {\n    display: none;\n  }\n  .mat-mdc-table[_ngcontent-%COMP%]   .mat-mdc-cell[_ngcontent-%COMP%]:before {\n    content: attr(data-label);\n    float: left;\n    padding-right: 5px;\n  }\n  mat-row[_ngcontent-%COMP%]::after {\n    min-height: auto;\n    padding-bottom: 10px;\n  }\n  .dataRow[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .dataCell[_ngcontent-%COMP%] {\n    margin-left: 24px;\n  }\n  .actionCell[_ngcontent-%COMP%] {\n    margin-left: 24px;\n  }\n}\n/*# sourceMappingURL=datasets.component.css.map */";
+var SettingsDatasetsComponent = class _SettingsDatasetsComponent {
+  paginator = viewChild(MatPaginator, ...ngDevMode ? [{ debugName: "paginator" }] : []);
+  sort = viewChild(MatSort, ...ngDevMode ? [{ debugName: "sort" }] : []);
+  pageTitle = "Datasets";
+  selectedDataset;
+  tableData = new MatTableDataSource([]);
+  displayedColumns = ["path", "pathSource", "timeScaleFormat", "period", "actions"];
+  dialog = inject(MatDialog);
+  cdRef = inject(ChangeDetectorRef);
+  dsService = inject(DatasetService);
+  ngOnInit() {
+    this.loadDatasets();
+  }
+  loadDatasets() {
+    this.tableData.data = this.dsService.list().filter((ds) => ds.editable !== false);
+  }
+  ngAfterViewInit() {
+    this.tableData.paginator = this.paginator();
+    this.tableData.sort = this.sort();
+    this.tableData.filter = "";
+    this.cdRef.detectChanges();
+  }
+  openDatasetModal(uuid) {
+    let dialogRef;
+    if (uuid) {
+      const thisDataset = cloneDeep_default(this.tableData.data.find((dataset) => {
+        return dataset.uuid === uuid;
+      }));
+      if (thisDataset) {
+        dialogRef = this.dialog.open(SettingsDatasetsModalComponent, {
+          data: thisDataset,
+          disableClose: false
+        });
+      }
+    } else {
+      dialogRef = this.dialog.open(SettingsDatasetsModalComponent, {
+        disableClose: false
+      });
+    }
+    dialogRef.afterClosed().subscribe((dataset) => {
+      if (dataset === void 0 || !dataset) {
+        return;
+      } else {
+        dataset.label = `${dataset.path}, Source: ${dataset.pathSource}, Scale: ${dataset.timeScaleFormat}, Period: ${dataset.period} `;
+        if (dataset.uuid) {
+          this.editDataset(dataset);
+        } else {
+          this.addDataset(dataset);
+        }
+        this.loadDatasets();
+      }
+    });
+  }
+  addDataset(dataset) {
+    this.dsService.create(dataset.path, dataset.pathSource, dataset.timeScaleFormat, dataset.period, dataset.label, true, true);
+    this.loadDatasets();
+  }
+  editDataset(dataset) {
+    this.dsService.edit(dataset);
+    this.loadDatasets();
+  }
+  deleteDataset(uuid) {
+    this.dsService.remove(uuid);
+    this.loadDatasets();
+  }
+  trackByUuid(index, item) {
+    return `${item.uuid}`;
+  }
+  applyFilter(event) {
+    const filterValue = event.target.value;
+    this.tableData.filter = filterValue.trim().toLowerCase();
+    if (this.tableData.paginator) {
+      this.tableData.paginator.firstPage();
+    }
+  }
+  static \u0275fac = function SettingsDatasetsComponent_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _SettingsDatasetsComponent)();
+  };
+  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _SettingsDatasetsComponent, selectors: [["settings-datasets"]], viewQuery: function SettingsDatasetsComponent_Query(rf, ctx) {
+    if (rf & 1) {
+      \u0275\u0275viewQuerySignal(ctx.paginator, MatPaginator, 5);
+      \u0275\u0275viewQuerySignal(ctx.sort, MatSort, 5);
+    }
+    if (rf & 2) {
+      \u0275\u0275queryAdvance(2);
+    }
+  }, decls: 36, vars: 7, consts: [["existingDataSet", "ngForm"], ["input", ""], [1, "content-area"], ["name", "existingDataSet", 1, "page-content-wrapper", "content-area"], [1, "mat-card-subtitle", "description-text"], [1, "filter"], ["matInput", "", "placeholder", "Ex: navigation", "value", "", 3, "keyup"], [1, "mat-elevation-z8", "full-width", "table-container"], ["matSort", "", "matSortActive", "path", "matSortDirection", "asc", 1, "full-display", 3, "dataSource", "trackBy"], ["matColumnDef", "path"], ["class", "pathHeader", "mat-sort-header", "", 4, "matHeaderCellDef"], ["class", "pathCell", "data-label", "Path: ", 4, "matCellDef"], ["matColumnDef", "pathSource"], ["class", "dataHeader", "mat-sort-header", "", 4, "matHeaderCellDef"], ["class", "dataCell", "data-label", "Source: ", 4, "matCellDef"], ["matColumnDef", "timeScaleFormat"], ["class", "dataCell", "data-label", "Scale: ", 4, "matCellDef"], ["matColumnDef", "period"], ["matColumnDef", "actions"], ["class", "actionHeader", "mat-sort-header", "", 4, "matHeaderCellDef"], ["class", "actionCell", 4, "matCellDef"], ["class", "headerRow", 4, "matHeaderRowDef", "matHeaderRowDefSticky"], ["class", "dataRow", 4, "matRowDef", "matRowDefColumns"], [4, "matNoDataRow"], [1, "paginator"], ["pageSize", "5", 3, "pageSizeOptions"], [1, "formActionFooter"], [1, "formActionDivider"], ["mat-flat-button", "", 1, "formActionButton", 3, "click"], ["mat-sort-header", "", 1, "pathHeader"], ["data-label", "Path: ", 1, "pathCell"], ["mat-sort-header", "", 1, "dataHeader"], ["data-label", "Source: ", 1, "dataCell"], ["data-label", "Scale: ", 1, "dataCell"], ["mat-sort-header", "", 1, "actionHeader"], [1, "actionCell"], ["mat-raised-button", "", "color", "accent", 1, "small-button", "buttons", 3, "click"], [1, "headerRow"], [1, "dataRow"]], template: function SettingsDatasetsComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      const _r1 = \u0275\u0275getCurrentView();
+      \u0275\u0275elementStart(0, "div", 2)(1, "form", 3, 0)(3, "p", 4);
+      \u0275\u0275text(4, "Datasets are background processes that record path values over time. Combine with the Data Chart widget they offer data visualization graphs. Care should be applied to manage Datasets and evaluate system resources usage. ");
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(5, "mat-form-field", 5)(6, "mat-label");
+      \u0275\u0275text(7, "Filter");
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(8, "input", 6, 1);
+      \u0275\u0275listener("keyup", function SettingsDatasetsComponent_Template_input_keyup_8_listener($event) {
+        \u0275\u0275restoreView(_r1);
+        return \u0275\u0275resetView(ctx.applyFilter($event));
+      });
+      \u0275\u0275elementEnd()();
+      \u0275\u0275elementStart(10, "div", 7)(11, "mat-table", 8);
+      \u0275\u0275elementContainerStart(12, 9);
+      \u0275\u0275template(13, SettingsDatasetsComponent_mat_header_cell_13_Template, 2, 0, "mat-header-cell", 10)(14, SettingsDatasetsComponent_mat_cell_14_Template, 2, 1, "mat-cell", 11);
+      \u0275\u0275elementContainerEnd();
+      \u0275\u0275elementContainerStart(15, 12);
+      \u0275\u0275template(16, SettingsDatasetsComponent_mat_header_cell_16_Template, 2, 0, "mat-header-cell", 13)(17, SettingsDatasetsComponent_mat_cell_17_Template, 2, 1, "mat-cell", 14);
+      \u0275\u0275elementContainerEnd();
+      \u0275\u0275elementContainerStart(18, 15);
+      \u0275\u0275template(19, SettingsDatasetsComponent_mat_header_cell_19_Template, 2, 0, "mat-header-cell", 13)(20, SettingsDatasetsComponent_mat_cell_20_Template, 2, 1, "mat-cell", 16);
+      \u0275\u0275elementContainerEnd();
+      \u0275\u0275elementContainerStart(21, 17);
+      \u0275\u0275template(22, SettingsDatasetsComponent_mat_header_cell_22_Template, 2, 0, "mat-header-cell", 13)(23, SettingsDatasetsComponent_mat_cell_23_Template, 2, 1, "mat-cell", 16);
+      \u0275\u0275elementContainerEnd();
+      \u0275\u0275elementContainerStart(24, 18);
+      \u0275\u0275template(25, SettingsDatasetsComponent_mat_header_cell_25_Template, 1, 0, "mat-header-cell", 19)(26, SettingsDatasetsComponent_mat_cell_26_Template, 5, 0, "mat-cell", 20);
+      \u0275\u0275elementContainerEnd();
+      \u0275\u0275template(27, SettingsDatasetsComponent_mat_header_row_27_Template, 1, 0, "mat-header-row", 21)(28, SettingsDatasetsComponent_mat_row_28_Template, 1, 0, "mat-row", 22)(29, SettingsDatasetsComponent_mat_row_29_Template, 2, 1, "mat-row", 23);
+      \u0275\u0275elementEnd()();
+      \u0275\u0275elementStart(30, "div", 24);
+      \u0275\u0275element(31, "mat-paginator", 25);
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(32, "div", 26);
+      \u0275\u0275element(33, "mat-divider", 27);
+      \u0275\u0275elementStart(34, "button", 28);
+      \u0275\u0275listener("click", function SettingsDatasetsComponent_Template_button_click_34_listener() {
+        \u0275\u0275restoreView(_r1);
+        return \u0275\u0275resetView(ctx.openDatasetModal());
+      });
+      \u0275\u0275text(35, "Add");
+      \u0275\u0275elementEnd()()()();
+    }
+    if (rf & 2) {
+      \u0275\u0275advance(11);
+      \u0275\u0275property("dataSource", ctx.tableData)("trackBy", ctx.trackByUuid);
+      \u0275\u0275advance(16);
+      \u0275\u0275property("matHeaderRowDef", ctx.displayedColumns)("matHeaderRowDefSticky", true);
+      \u0275\u0275advance();
+      \u0275\u0275property("matRowDefColumns", ctx.displayedColumns);
+      \u0275\u0275advance(3);
+      \u0275\u0275property("pageSizeOptions", \u0275\u0275pureFunction0(6, _c03));
+    }
+  }, dependencies: [FormsModule, \u0275NgNoValidate, NgControlStatusGroup, NgForm, MatFormField, MatLabel, MatInput, MatTable, MatSort, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatSortHeader, MatCellDef, MatCell, MatButton, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatNoDataRow, MatPaginator, MatDivider], styles: [_c12] });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(SettingsDatasetsComponent, [{
+    type: Component,
+    args: [{ selector: "settings-datasets", imports: [FormsModule, MatFormField, MatLabel, MatInput, MatTable, MatSort, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatSortHeader, MatCellDef, MatCell, MatButton, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatNoDataRow, MatPaginator, MatDivider], template: `<div class="content-area ">
+  <form name="existingDataSet" #existingDataSet="ngForm" class="page-content-wrapper content-area">
+    <p class="mat-card-subtitle description-text">Datasets are background processes that record path values over time. Combine with the Data Chart widget they offer
+      data visualization graphs. Care should be applied to manage Datasets and evaluate system resources usage.
+    </p>
+    <mat-form-field class="filter">
+      <mat-label>Filter</mat-label>
+      <input matInput (keyup)="applyFilter($event)" placeholder="Ex: navigation" value="" #input>
+    </mat-form-field>
+    <div class="mat-elevation-z8 full-width table-container">
+      <mat-table class="full-display" [dataSource]="tableData" [trackBy]="trackByUuid" matSort matSortActive="path" matSortDirection="asc">
+
+        <!-- Path Column -->
+        <ng-container matColumnDef="path">
+          <mat-header-cell class="pathHeader" *matHeaderCellDef mat-sort-header> Path </mat-header-cell>
+          <mat-cell class="pathCell" *matCellDef="let element" data-label="Path: "> {{element.path}} </mat-cell>
+        </ng-container>
+
+        <!-- pathSource Column -->
+        <ng-container matColumnDef="pathSource">
+          <mat-header-cell class="dataHeader" *matHeaderCellDef mat-sort-header> Source </mat-header-cell>
+          <mat-cell class="dataCell" *matCellDef="let element" data-label="Source: "> {{element.pathSource}} </mat-cell>
+        </ng-container>
+
+        <!-- timeScaleFormat Column -->
+        <ng-container matColumnDef="timeScaleFormat">
+          <mat-header-cell class="dataHeader" *matHeaderCellDef mat-sort-header> Time Scale </mat-header-cell>
+          <mat-cell class="dataCell" *matCellDef="let element" data-label="Scale: "> {{element.timeScaleFormat}} </mat-cell>
+        </ng-container>
+
+        <!-- period Column -->
+        <ng-container matColumnDef="period">
+          <mat-header-cell class="dataHeader" *matHeaderCellDef mat-sort-header> Duration </mat-header-cell>
+          <mat-cell class="dataCell" *matCellDef="let element" data-label="Scale: "> {{element.period}} </mat-cell>
+        </ng-container>
+
+        <ng-container matColumnDef="actions">
+          <mat-header-cell class="actionHeader" *matHeaderCellDef mat-sort-header>  </mat-header-cell>
+          <mat-cell class="actionCell" *matCellDef="let element">
+            <button mat-raised-button class="small-button buttons" color="accent" (click)="openDatasetModal(element.uuid)">Edit</button>
+            <button mat-raised-button class="small-button buttons" color="accent" (click)="deleteDataset(element.uuid)">Delete</button>
+          </mat-cell>
+        </ng-container>
+
+        <mat-header-row class="headerRow" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+        <mat-row class="dataRow" *matRowDef="let row; columns: displayedColumns;"></mat-row>
+
+        <!-- Row shown when there is no matching data. -->
+        <mat-row *matNoDataRow>
+          No data matching the filter "{{input.value}}"
+        </mat-row>
+      </mat-table>
+    </div>
+    <div class="paginator">
+      <mat-paginator pageSize="5" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
+    </div>
+    <div class="formActionFooter">
+      <mat-divider class="formActionDivider"></mat-divider>
+      <button mat-flat-button class="formActionButton" (click)='openDatasetModal()'>Add</button>
+    </div>
+  </form>
+</div>
+`, styles: ["/* src/app/core/components/datasets/datasets.component.scss */\n:host {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n.content-area {\n  height: calc(100% - 63px);\n  overflow-y: auto;\n  width: 100%;\n  scroll-behavior: smooth;\n}\n.filter {\n  margin-bottom: 10px;\n}\n.buttons {\n  margin-top: 10px;\n}\n.mat-column-actions {\n  text-align: end;\n}\n.buttons {\n  margin-right: 5px;\n}\n.pathCell {\n  flex: 1 1 50%;\n}\n.pathHeader {\n  flex: 1 1 50%;\n}\n.dataHeader {\n  flex: 1 1 10%;\n  justify-content: center;\n}\n.dataCell {\n  flex: 1 1 10%;\n  justify-content: center;\n}\n.actionHeader {\n  flex: 1 1 20%;\n}\n.actionCell {\n  flex: 1 1 20%;\n  justify-content: end;\n}\n@media screen and (max-width: 750px) {\n  .pathHeader {\n    flex: 1 1 30%;\n  }\n  .dataHeader {\n    flex: 1 1 30%;\n  }\n  .actionHeader {\n    display: none;\n  }\n  .mat-mdc-table .mat-mdc-cell:before {\n    content: attr(data-label);\n    float: left;\n    padding-right: 5px;\n  }\n  mat-row::after {\n    min-height: auto;\n    padding-bottom: 10px;\n  }\n  .dataRow {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .dataCell {\n    margin-left: 24px;\n  }\n  .actionCell {\n    margin-left: 24px;\n  }\n}\n/*# sourceMappingURL=datasets.component.css.map */\n"] }]
+  }], null, null);
+})();
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(SettingsDatasetsComponent, { className: "SettingsDatasetsComponent", filePath: "src/app/core/components/datasets/datasets.component.ts", lineNumber: 31 });
+})();
+var SettingsDatasetsModalComponent = class _SettingsDatasetsModalComponent {
+  SignalKDataService = inject(DataService);
+  dialogRef = inject(MatDialogRef);
+  dataset = inject(MAT_DIALOG_DATA);
+  titleDialog = null;
+  newDataset = {
+    uuid: null,
+    path: null,
+    pathSource: null,
+    baseUnit: null,
+    timeScaleFormat: "second",
+    period: 10,
+    label: null
+  };
+  formDataset = null;
+  availablePaths = [];
+  availableSources = [];
+  filterSelfPaths = true;
+  ngOnInit() {
+    if (this.dataset) {
+      this.titleDialog = "Edit Dataset";
+      this.formDataset = this.dataset;
+      const pathObject = this.SignalKDataService.getPathObject(this.formDataset.path);
+      if (pathObject !== null) {
+        this.availableSources = ["default"].concat(Object.keys(pathObject.sources));
+      }
+    } else {
+      this.titleDialog = "Add Dataset";
+      this.formDataset = this.newDataset;
+    }
+    this.availablePaths = this.SignalKDataService.getPathsByType("number").sort();
+  }
+  changePath() {
+    const pathObject = this.SignalKDataService.getPathObject(this.formDataset.path);
+    if (pathObject === null) {
+      return;
+    }
+    this.availableSources = ["default"].concat(Object.keys(pathObject.sources));
+    this.formDataset.pathSource = "default";
+  }
+  closeForm() {
+    this.dialogRef.close(this.formDataset);
+  }
+  static \u0275fac = function SettingsDatasetsModalComponent_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _SettingsDatasetsModalComponent)();
+  };
+  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _SettingsDatasetsModalComponent, selectors: [["settings-datasets-modal"]], decls: 67, vars: 11, consts: [["datasetForm", "ngForm"], ["mat-dialog-title", ""], ["name", "datasetForm", 3, "ngSubmit"], ["matStepLabel", ""], [1, "tab-content"], [1, "full-width"], ["placeholder", "Select data path", "name", "selectedPath", "required", "", 3, "ngModelChange", "ngModel"], [3, "value"], ["name", "filterSelfPaths", 3, "ngModelChange", "ngModel"], ["placeholder", "Select data source", "name", "selectedSource", "required", "", 3, "ngModelChange", "ngModel"], [1, "buttons"], ["type", "button", "mat-raised-button", "", "color", "accent", "matStepperNext", "", 3, "disabled"], [1, "mat-subtitle-1"], [1, "flex-container", 2, "margin-top", "10px"], [1, "flex-field-50"], ["placeholder", "Select dataset time scale", "name", "timeScaleFormat", "required", "", 3, "ngModelChange", "ngModel"], ["value", "hour"], ["value", "minute"], ["value", "second"], ["matInput", "", "type", "number", "min", "1", "max", "60", "step", "1", "placeholder", "Enter or select number...", "name", "period", "required", "", 3, "ngModelChange", "ngModel"], [2, "margin-top", "10px"], ["type", "button", "mat-raised-button", "", "color", "accent", "matStepperPrevious", "", 1, "buttons"], ["mat-raised-button", "", "type", "submit", "color", "accent", 1, "buttons", 3, "disabled"]], template: function SettingsDatasetsModalComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      const _r1 = \u0275\u0275getCurrentView();
+      \u0275\u0275elementStart(0, "h6", 1);
+      \u0275\u0275text(1);
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(2, "mat-dialog-content")(3, "form", 2, 0);
+      \u0275\u0275listener("ngSubmit", function SettingsDatasetsModalComponent_Template_form_ngSubmit_3_listener() {
+        \u0275\u0275restoreView(_r1);
+        return \u0275\u0275resetView(ctx.closeForm());
+      });
+      \u0275\u0275elementStart(5, "mat-horizontal-stepper")(6, "mat-step");
+      \u0275\u0275template(7, SettingsDatasetsModalComponent_ng_template_7_Template, 1, 0, "ng-template", 3);
+      \u0275\u0275elementStart(8, "div", 4)(9, "mat-form-field", 5)(10, "mat-label");
+      \u0275\u0275text(11, "Signal K Path");
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(12, "mat-select", 6);
+      \u0275\u0275twoWayListener("ngModelChange", function SettingsDatasetsModalComponent_Template_mat_select_ngModelChange_12_listener($event) {
+        \u0275\u0275restoreView(_r1);
+        \u0275\u0275twoWayBindingSet(ctx.formDataset.path, $event) || (ctx.formDataset.path = $event);
+        return \u0275\u0275resetView($event);
+      });
+      \u0275\u0275listener("ngModelChange", function SettingsDatasetsModalComponent_Template_mat_select_ngModelChange_12_listener() {
+        \u0275\u0275restoreView(_r1);
+        return \u0275\u0275resetView(ctx.changePath());
+      });
+      \u0275\u0275repeaterCreate(13, SettingsDatasetsModalComponent_For_14_Template, 2, 2, "mat-option", 7, \u0275\u0275repeaterTrackByIdentity);
+      \u0275\u0275pipe(15, "filterSelf");
+      \u0275\u0275elementEnd()();
+      \u0275\u0275elementStart(16, "mat-checkbox", 8);
+      \u0275\u0275twoWayListener("ngModelChange", function SettingsDatasetsModalComponent_Template_mat_checkbox_ngModelChange_16_listener($event) {
+        \u0275\u0275restoreView(_r1);
+        \u0275\u0275twoWayBindingSet(ctx.filterSelfPaths, $event) || (ctx.filterSelfPaths = $event);
+        return \u0275\u0275resetView($event);
+      });
+      \u0275\u0275text(17, " Restrict to own vessel ");
+      \u0275\u0275elementEnd();
+      \u0275\u0275element(18, "br")(19, "br");
+      \u0275\u0275elementStart(20, "mat-form-field", 5)(21, "mat-label");
+      \u0275\u0275text(22, "Source");
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(23, "mat-select", 9);
+      \u0275\u0275twoWayListener("ngModelChange", function SettingsDatasetsModalComponent_Template_mat_select_ngModelChange_23_listener($event) {
+        \u0275\u0275restoreView(_r1);
+        \u0275\u0275twoWayBindingSet(ctx.formDataset.pathSource, $event) || (ctx.formDataset.pathSource = $event);
+        return \u0275\u0275resetView($event);
+      });
+      \u0275\u0275repeaterCreate(24, SettingsDatasetsModalComponent_For_25_Template, 2, 2, "mat-option", 7, \u0275\u0275repeaterTrackByIdentity);
+      \u0275\u0275elementEnd()()();
+      \u0275\u0275element(26, "mat-divider");
+      \u0275\u0275elementStart(27, "div", 10)(28, "button", 11);
+      \u0275\u0275text(29, " Next ");
+      \u0275\u0275elementEnd()()();
+      \u0275\u0275elementStart(30, "mat-step");
+      \u0275\u0275template(31, SettingsDatasetsModalComponent_ng_template_31_Template, 1, 0, "ng-template", 3);
+      \u0275\u0275elementStart(32, "div", 4)(33, "span", 12);
+      \u0275\u0275text(34, "Time Scales");
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(35, "div", 13)(36, "div", 14)(37, "mat-form-field", 5)(38, "mat-label");
+      \u0275\u0275text(39, "Scale");
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(40, "mat-select", 15);
+      \u0275\u0275twoWayListener("ngModelChange", function SettingsDatasetsModalComponent_Template_mat_select_ngModelChange_40_listener($event) {
+        \u0275\u0275restoreView(_r1);
+        \u0275\u0275twoWayBindingSet(ctx.formDataset.timeScaleFormat, $event) || (ctx.formDataset.timeScaleFormat = $event);
+        return \u0275\u0275resetView($event);
+      });
+      \u0275\u0275elementStart(41, "mat-option", 16);
+      \u0275\u0275text(42, "Hours");
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(43, "mat-option", 17);
+      \u0275\u0275text(44, "Minutes");
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(45, "mat-option", 18);
+      \u0275\u0275text(46, "Seconds");
+      \u0275\u0275elementEnd()()()();
+      \u0275\u0275elementStart(47, "div", 14)(48, "mat-form-field", 5)(49, "mat-label");
+      \u0275\u0275text(50, "Duration");
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(51, "input", 19);
+      \u0275\u0275twoWayListener("ngModelChange", function SettingsDatasetsModalComponent_Template_input_ngModelChange_51_listener($event) {
+        \u0275\u0275restoreView(_r1);
+        \u0275\u0275twoWayBindingSet(ctx.formDataset.period, $event) || (ctx.formDataset.period = $event);
+        return \u0275\u0275resetView($event);
+      });
+      \u0275\u0275elementEnd()()()();
+      \u0275\u0275elementStart(52, "p", 20);
+      \u0275\u0275text(53, "Time scales define the data sampling rate and overall Dataset level of precision. Select a Time Scale that is targeted to your intended usage. Shorter Time Scales have higher system resources costs, for both the data capture and widget rendering process. ");
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(54, "ul")(55, "li");
+      \u0275\u0275text(56, "Hours: per minute sampling rate. Intended for long sampling periods when slow refresh rate is acceptable and system resource usage should be minimized. Grafana is the perfect alternative to this Time Scale. ");
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(57, "li");
+      \u0275\u0275text(58, "Minutes: per second sampling rate. Meant for trends observations such wind speed, depth, solar power, voltage, etc. ");
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(59, "li");
+      \u0275\u0275text(60, "Secondes: 200ms sampling rate. Intended for use cases where user may act upon realtime information such as when racing. ");
+      \u0275\u0275elementEnd()()();
+      \u0275\u0275element(61, "mat-divider");
+      \u0275\u0275elementStart(62, "div", 10)(63, "button", 21);
+      \u0275\u0275text(64, " Back ");
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(65, "button", 22);
+      \u0275\u0275text(66, " Save ");
+      \u0275\u0275elementEnd()()()()()();
+    }
+    if (rf & 2) {
+      const datasetForm_r4 = \u0275\u0275reference(4);
+      \u0275\u0275advance();
+      \u0275\u0275textInterpolate1(" ", ctx.titleDialog, " ");
+      \u0275\u0275advance(11);
+      \u0275\u0275twoWayProperty("ngModel", ctx.formDataset.path);
+      \u0275\u0275advance();
+      \u0275\u0275repeater(\u0275\u0275pipeBind2(15, 8, ctx.availablePaths, ctx.filterSelfPaths));
+      \u0275\u0275advance(3);
+      \u0275\u0275twoWayProperty("ngModel", ctx.filterSelfPaths);
+      \u0275\u0275advance(7);
+      \u0275\u0275twoWayProperty("ngModel", ctx.formDataset.pathSource);
+      \u0275\u0275advance();
+      \u0275\u0275repeater(ctx.availableSources);
+      \u0275\u0275advance(4);
+      \u0275\u0275property("disabled", !ctx.formDataset.path);
+      \u0275\u0275advance(12);
+      \u0275\u0275twoWayProperty("ngModel", ctx.formDataset.timeScaleFormat);
+      \u0275\u0275advance(11);
+      \u0275\u0275twoWayProperty("ngModel", ctx.formDataset.period);
+      \u0275\u0275advance(14);
+      \u0275\u0275property("disabled", !datasetForm_r4.valid);
+    }
+  }, dependencies: [MatRadioModule, MatDialogTitle, MatDialogContent, FormsModule, \u0275NgNoValidate, DefaultValueAccessor, NumberValueAccessor, NgControlStatus, NgControlStatusGroup, RequiredValidator, MinValidator, MaxValidator, NgModel, NgForm, MatStepper, MatStep, MatStepLabel, MatFormField, MatLabel, MatSelect, MatOption, MatCheckbox, MatDivider, MatButton, MatStepperNext, MatInput, MatStepperPrevious, FilterSelfPipe], styles: [_c12] });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(SettingsDatasetsModalComponent, [{
+    type: Component,
+    args: [{ selector: "settings-datasets-modal", imports: [MatRadioModule, MatDialogTitle, MatDialogContent, FormsModule, MatStepper, MatStep, MatStepLabel, MatFormField, MatLabel, MatSelect, MatOption, MatCheckbox, MatDivider, MatButton, MatStepperNext, MatInput, MatStepperPrevious, FilterSelfPipe], template: '<h6 mat-dialog-title> {{titleDialog}} </h6>\n<mat-dialog-content>\n  <form name="datasetForm" (ngSubmit)="closeForm()" #datasetForm="ngForm">\n    <mat-horizontal-stepper>\n      <mat-step>\n        <ng-template matStepLabel>Source Data</ng-template>\n        <div class="tab-content">\n          <mat-form-field class="full-width">\n            <mat-label>Signal K Path</mat-label>\n            <mat-select\n              placeholder="Select data path"\n              [(ngModel)]="formDataset.path"\n              name="selectedPath"\n              (ngModelChange)="changePath()"\n              required>\n              @for (path of (availablePaths | filterSelf: filterSelfPaths); track path) {\n                <mat-option\n                  [value]="path">\n                  {{path}}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n          <mat-checkbox [(ngModel)]="filterSelfPaths" name="filterSelfPaths">\n            Restrict to own vessel\n          </mat-checkbox>\n          <br/><br/>\n          <mat-form-field class="full-width">\n            <mat-label>Source</mat-label>\n            <mat-select\n              placeholder="Select data source"\n              [(ngModel)]="formDataset.pathSource"\n              name="selectedSource"\n              required\n              >\n              @for (source of availableSources; track source) {\n                <mat-option\n                  [value]="source"\n                  >\n                  {{source}}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <mat-divider></mat-divider>\n        <div class="buttons">\n          <button\n            type="button"\n            mat-raised-button\n            color="accent"\n            matStepperNext\n            [disabled]="!formDataset.path"\n            >\n            Next\n          </button>\n        </div>\n      </mat-step>\n      <mat-step>\n        <ng-template matStepLabel>Sampling</ng-template>\n        <div class="tab-content">\n          <span class="mat-subtitle-1">Time Scales</span>\n          <div class="flex-container" style="margin-top: 10px;">\n            <div class="flex-field-50">\n              <mat-form-field class="full-width">\n                <mat-label>Scale</mat-label>\n                <mat-select\n                  placeholder="Select dataset time scale"\n                  [(ngModel)]="formDataset.timeScaleFormat"\n                  name="timeScaleFormat"\n                  required>\n                  <mat-option value="hour">Hours</mat-option>\n                  <mat-option value="minute">Minutes</mat-option>\n                  <mat-option value="second">Seconds</mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n            <div class="flex-field-50">\n              <mat-form-field class="full-width">\n                <mat-label>Duration</mat-label>\n                <input matInput type="number"\n                  min="1" max="60" step="1"\n                  placeholder="Enter or select number..."\n                  name="period"\n                  [(ngModel)]="formDataset.period"\n                  required>\n              </mat-form-field>\n            </div>\n          </div>\n          <p style="margin-top: 10px;">Time scales define the data sampling rate and overall Dataset level\n            of precision. Select a Time Scale that is targeted to your intended usage.\n            Shorter Time Scales have higher system resources\n            costs, for both the data capture and widget rendering process.\n          </p>\n          <ul>\n            <li>Hours: per minute sampling rate. Intended for long sampling periods when slow\n              refresh rate is acceptable and system resource usage should be minimized. Grafana is\n              the perfect alternative to this Time Scale.\n            </li>\n            <li>Minutes: per second sampling rate. Meant for trends observations such wind\n              speed, depth, solar power, voltage, etc.\n            </li>\n            <li>Secondes: 200ms sampling rate. Intended for use cases where user may act upon realtime\n              information such as when racing.\n            </li>\n          </ul>\n        </div>\n        <mat-divider></mat-divider>\n        <div class="buttons">\n          <button\n            type="button"\n            mat-raised-button\n            class="buttons"\n            color="accent"\n            matStepperPrevious\n            >\n            Back\n          </button>\n          <button\n            mat-raised-button\n            type="submit"\n            class="buttons"\n            color="accent"\n            [disabled]="!datasetForm.valid"\n            >\n            Save\n          </button>\n        </div>\n      </mat-step>\n    </mat-horizontal-stepper>\n  </form>\n</mat-dialog-content>\n', styles: ["/* src/app/core/components/datasets/datasets.component.scss */\n:host {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n.content-area {\n  height: calc(100% - 63px);\n  overflow-y: auto;\n  width: 100%;\n  scroll-behavior: smooth;\n}\n.filter {\n  margin-bottom: 10px;\n}\n.buttons {\n  margin-top: 10px;\n}\n.mat-column-actions {\n  text-align: end;\n}\n.buttons {\n  margin-right: 5px;\n}\n.pathCell {\n  flex: 1 1 50%;\n}\n.pathHeader {\n  flex: 1 1 50%;\n}\n.dataHeader {\n  flex: 1 1 10%;\n  justify-content: center;\n}\n.dataCell {\n  flex: 1 1 10%;\n  justify-content: center;\n}\n.actionHeader {\n  flex: 1 1 20%;\n}\n.actionCell {\n  flex: 1 1 20%;\n  justify-content: end;\n}\n@media screen and (max-width: 750px) {\n  .pathHeader {\n    flex: 1 1 30%;\n  }\n  .dataHeader {\n    flex: 1 1 30%;\n  }\n  .actionHeader {\n    display: none;\n  }\n  .mat-mdc-table .mat-mdc-cell:before {\n    content: attr(data-label);\n    float: left;\n    padding-right: 5px;\n  }\n  mat-row::after {\n    min-height: auto;\n    padding-bottom: 10px;\n  }\n  .dataRow {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .dataCell {\n    margin-left: 24px;\n  }\n  .actionCell {\n    margin-left: 24px;\n  }\n}\n/*# sourceMappingURL=datasets.component.css.map */\n"] }]
+  }], null, null);
+})();
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(SettingsDatasetsModalComponent, { className: "SettingsDatasetsModalComponent", filePath: "src/app/core/components/datasets/datasets.component.ts", lineNumber: 138 });
+})();
+
+export {
+  SettingsDatasetsComponent,
+  SettingsDatasetsModalComponent
+};
+//# sourceMappingURL=chunk-YGJLBLOX.js.map