@libs-ui/components-breadcrumb 0.1.1-1

package/esm2022/multi-step/multi-step.component.mjs

@@ -0,0 +1,90 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, input, output, signal, viewChildren } from '@angular/core';
+import { LibsUiComponentsDropdownComponent } from '@libs-ui/components-dropdown';
+import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
+import { LibsUiComponentsBreadcrumbComponent } from '../breadcrumb.component';
+import { ConfigPopupDropdown } from '../utils/breadcrumb';
+import { LibsUiComponentsBreadcrumbMultiStepArrowBeginComponent } from './arrow-begin/arrow-begin.component';
+import { LibsUiComponentsBreadcrumbMultiStepArrowEndComponent } from './arrow-end/arrow-end.component';
+import { LibsUiComponentsBreadcrumbCheckDisableStepPipe } from '../pipes/check-disable-step.pipe';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@ngx-translate/core";
+export class LibsUiComponentsBreadcrumbMultiStepComponent extends LibsUiComponentsBreadcrumbComponent {
+    // #region PROPERTY
+    failedIndex = signal([]);
+    listKeyHidden = signal(undefined);
+    openList = signal(false);
+    indexFocus = signal(undefined);
+    dropDownFunctionControl = signal(undefined);
+    // #region INPUT
+    popoverCustomConfig = input(ConfigPopupDropdown());
+    stepsMulti = input.required();
+    configClassMultiStep = input();
+    elementRef = input();
+    // #region OUTPUT
+    // Note: Kiểu dữ liệu của step sẽ được định nghĩa từ bên ngoài với type general <T>
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    outMultiStepSelect = output();
+    /* VIEW CHILD */
+    stepEl = viewChildren('stepEl');
+    ngAfterViewInit() {
+        this.handlerScrollIntoView();
+    }
+    handlerLabelEvent(event, index) {
+        event.stopPropagation();
+        if (this.stepsMulti()[index].status === 'disabled' || this.stepDisable().includes(index)) {
+            return;
+        }
+        this.handlerSelectMultiStep(undefined, { type: 'text', index });
+    }
+    handlerSelectKey(event, index) {
+        if (this.stepDisable().includes(index) || !event) {
+            return;
+        }
+        this.dropDownFunctionControl()?.reset();
+        this.handlerSelectMultiStep(undefined, { type: 'dropdown', index, step: event.item });
+    }
+    handlerShowList(event, index) {
+        this.openList.set(event);
+        this.indexFocus.set(event ? index : undefined);
+    }
+    // Note: Kiểu dữ liệu của step sẽ được định nghĩa từ bên ngoài với type general <T>
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    handlerSelectMultiStep(event, step) {
+        event?.stopPropagation();
+        this.outMultiStepSelect.emit({ ...step, callBack: (event) => this.listKeyHidden.set(event) });
+    }
+    handlerDropDownFunctionControl(event) {
+        this.dropDownFunctionControl.set(event);
+    }
+    handlerScrollIntoView() {
+        setTimeout(() => {
+            const selectedStep = this.stepsMulti().findIndex((item) => item.status === 'selected');
+            const indexScroll = selectedStep !== -1 ? selectedStep : this.stepsMulti().length - 1;
+            const { offsetWidth } = this.elementRef() || {};
+            this.stepEl().forEach((element, index) => {
+                if (index === indexScroll) {
+                    if (offsetWidth && offsetWidth - element.nativeElement.offsetLeft < 200) {
+                        this.elementRef()?.scrollTo({ left: element.nativeElement.offsetLeft, behavior: 'smooth' });
+                    }
+                }
+            });
+        }, 1000);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbMultiStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsBreadcrumbMultiStepComponent, isStandalone: true, selector: "libs_ui-components-breadcrumb-multi_step", inputs: { popoverCustomConfig: { classPropertyName: "popoverCustomConfig", publicName: "popoverCustomConfig", isSignal: true, isRequired: false, transformFunction: null }, stepsMulti: { classPropertyName: "stepsMulti", publicName: "stepsMulti", isSignal: true, isRequired: true, transformFunction: null }, configClassMultiStep: { classPropertyName: "configClassMultiStep", publicName: "configClassMultiStep", isSignal: true, isRequired: false, transformFunction: null }, elementRef: { classPropertyName: "elementRef", publicName: "elementRef", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outMultiStepSelect: "outMultiStepSelect" }, viewQueries: [{ propertyName: "stepEl", predicate: ["stepEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"flex items-center {{ classInclude() || '' }}\"\n  [class.justify-center]=\"mode() === 'center'\"\n  [class.justify-start]=\"mode() === 'left'\"\n  [class.justify-end]=\"mode() === 'right'\"\n  [class.bg-[#ffffff]]=\"backgroundWhite()\"\n  #containerEl>\n  @for (step of stepsMulti(); track step) {\n    <div\n      #stepEl\n      class=\"flex libs-ui-breadcrumb-multi-step\"\n      [class.cursor-default]=\"step.status === 'disabled'\"\n      [class.pointer-events-none]=\"step.status === 'disabled'\"\n      [class.cursor-pointer]=\"step.status !== 'disabled'\">\n      @if (step.type === 'text') {\n        <div (click)=\"handlerLabelEvent($event, $index)\">\n          <ng-container\n            [ngTemplateOutlet]=\"contentEl\"\n            [ngTemplateOutletContext]=\"{ $index, $first, $last, step }\" />\n        </div>\n      } @else {\n        <libs_ui-components-dropdown\n          [isNgContent]=\"true\"\n          [listHiddenInputSearch]=\"true\"\n          [listHasButtonUnSelectOption]=\"step.listHasButtonUnSelectOption\"\n          [listConfig]=\"step.listConfigItem\"\n          [popoverCustomConfig]=\"popoverCustomConfig()\"\n          [listKeysHidden]=\"listKeyHidden() ?? step.listKeysHidden\"\n          [disable]=\"$index | LibsUiComponentsBreadcrumbCheckDisableStepPipe: stepDisable()\"\n          (outShowList)=\"handlerShowList($event, $index)\"\n          (outSelectKey)=\"handlerSelectKey($event, $index)\"\n          (outFunctionsControl)=\"handlerDropDownFunctionControl($event)\">\n          <ng-container\n            [ngTemplateOutlet]=\"contentEl\"\n            [ngTemplateOutletContext]=\"{ $index, $first, $last, step }\" />\n        </libs_ui-components-dropdown>\n      }\n    </div>\n  }\n</div>\n\n<ng-template\n  #contentEl\n  let-index=\"$index\"\n  let-first=\"$first\"\n  let-step=\"step\"\n  let-last=\"$last\">\n  <div class=\"flex items-center\">\n    @if (!first) {\n      <libs_ui-components-breadcrumb-multi_step-arrow_end\n        class=\"libs-ui-breadcrumb-multi-step-normal relative left-[1px] top-0\"\n        [attr.focus]=\"openList() && indexFocus() === index\"\n        [class.active]=\"step.status === 'selected'\"\n        [class.complete]=\"step.status === 'completed'\"\n        [class.disabled]=\"step.status === 'disabled'\"\n        [class.failed]=\"step.status === 'failed'\" />\n    }\n    <div class=\"libs-ui-breadcrumb-multi-step-center flex items-center justify-center libs-ui-font-h6m\">\n      <libs_ui-components-popover\n        [classInclude]=\"'libs-ui-breadcrumb-multi-step-center-popover py-[12px] ' + (configClassMultiStep()?.classInclude || '')\"\n        [type]=\"'text'\"\n        [ignoreShowPopover]=\"true\"\n        [ignoreStopPropagationEvent]=\"true\">\n        <div\n          class=\"libs-ui-font-h6m flex items-center justify-center gap-2 h-[40px]\"\n          [style.max-width.px]=\"configClassMultiStep()?.maxWidth || 200\"\n          [style.width.px]=\"configClassMultiStep()?.width\"\n          [attr.focus]=\"openList() && indexFocus() === index\"\n          [class.active]=\"step.status === 'selected'\"\n          [class.complete]=\"step.status === 'completed'\"\n          [class.disabled]=\"step.status === 'disabled'\"\n          [class.failed]=\"step.status === 'failed'\"\n          [class.rounded-tl-[4px]]=\"first\"\n          [class.rounded-bl-[4px]]=\"first\"\n          [class.pl-[6px]]=\"first\"\n          [class.rounded-tr-[4px]]=\"last\"\n          [class.rounded-br-[4px]]=\"last\"\n          [class.pr-[16px]]=\"last\">\n          <libs_ui-components-popover\n            [classInclude]=\"'text-nowrap pl-[10px] ' + (configClassMultiStep()?.classTitleInclude || 'max-w-[160px]')\"\n            [type]=\"'text'\"\n            [config]=\"step.popover || { maxWidth: 250, direction: 'top', content: step.title | translate }\"\n            [ignoreStopPropagationEvent]=\"true\"\n            [innerHTML]=\"step.title | translate\" />\n          @if (step.type === 'dropdown') {\n            <i\n              [attr.isFocus]=\"openList() && indexFocus() === index\"\n              class=\"libs-ui-icon-move-right rotate-90\"></i>\n          }\n        </div>\n      </libs_ui-components-popover>\n    </div>\n    @if (!last) {\n      <libs_ui-components-breadcrumb-multi_step-arrow_begin\n        class=\"libs-ui-breadcrumb-multi-step-normal relative left-[-1px] top-0\"\n        [attr.focus]=\"openList() && indexFocus() === index\"\n        [class.active]=\"step.status === 'selected'\"\n        [class.complete]=\"step.status === 'completed'\"\n        [class.disabled]=\"step.status === 'disabled'\"\n        [class.failed]=\"step.status === 'failed'\" />\n    }\n  </div>\n</ng-template>\n", styles: [".libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover{color:#6a7383;background-color:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i[focus=true]:after{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i:after{color:#6a7383;background-color:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active>i:after{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i:after{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i[focus=true]:after{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i:after{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i[focus=true]:after{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:after{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete[focus=true]{background-color:#e6faf0!important;color:#00bc62!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed[focus=true]{background-color:#fdeaec!important;color:#ee2d41!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover[focus=true]{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal{fill:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.active{fill:var(--libs-ui-button-other-color-background, #226ff5)}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.complete{fill:#e6faf0}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.complete[focus=true]{fill:#e6faf0!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.failed{fill:#fdeaec}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.failed[focus=true]{fill:#fdeaec!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.disabled{fill:#f8f9fa}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal[focus=true],.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.complete,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.failed{fill:#e9f1fe}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.disabled{fill:#f8f9fa}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.active{fill:var(--libs-ui-button-other-color-background, #226ff5)}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover>i:after{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.complete,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.failed{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active>i:after{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:after{background-color:#f8f9fa;color:#cdd0d6}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LibsUiComponentsBreadcrumbMultiStepArrowBeginComponent, selector: "libs_ui-components-breadcrumb-multi_step-arrow_begin" }, { kind: "component", type: LibsUiComponentsBreadcrumbMultiStepArrowEndComponent, selector: "libs_ui-components-breadcrumb-multi_step-arrow_end" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "pipe", type: LibsUiComponentsBreadcrumbCheckDisableStepPipe, name: "LibsUiComponentsBreadcrumbCheckDisableStepPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbMultiStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-breadcrumb-multi_step', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        TranslateModule,
+                        NgTemplateOutlet,
+                        LibsUiComponentsBreadcrumbMultiStepArrowBeginComponent,
+                        LibsUiComponentsBreadcrumbMultiStepArrowEndComponent,
+                        LibsUiComponentsPopoverComponent,
+                        LibsUiComponentsDropdownComponent,
+                        LibsUiComponentsBreadcrumbCheckDisableStepPipe,
+                    ], template: "<div\n  class=\"flex items-center {{ classInclude() || '' }}\"\n  [class.justify-center]=\"mode() === 'center'\"\n  [class.justify-start]=\"mode() === 'left'\"\n  [class.justify-end]=\"mode() === 'right'\"\n  [class.bg-[#ffffff]]=\"backgroundWhite()\"\n  #containerEl>\n  @for (step of stepsMulti(); track step) {\n    <div\n      #stepEl\n      class=\"flex libs-ui-breadcrumb-multi-step\"\n      [class.cursor-default]=\"step.status === 'disabled'\"\n      [class.pointer-events-none]=\"step.status === 'disabled'\"\n      [class.cursor-pointer]=\"step.status !== 'disabled'\">\n      @if (step.type === 'text') {\n        <div (click)=\"handlerLabelEvent($event, $index)\">\n          <ng-container\n            [ngTemplateOutlet]=\"contentEl\"\n            [ngTemplateOutletContext]=\"{ $index, $first, $last, step }\" />\n        </div>\n      } @else {\n        <libs_ui-components-dropdown\n          [isNgContent]=\"true\"\n          [listHiddenInputSearch]=\"true\"\n          [listHasButtonUnSelectOption]=\"step.listHasButtonUnSelectOption\"\n          [listConfig]=\"step.listConfigItem\"\n          [popoverCustomConfig]=\"popoverCustomConfig()\"\n          [listKeysHidden]=\"listKeyHidden() ?? step.listKeysHidden\"\n          [disable]=\"$index | LibsUiComponentsBreadcrumbCheckDisableStepPipe: stepDisable()\"\n          (outShowList)=\"handlerShowList($event, $index)\"\n          (outSelectKey)=\"handlerSelectKey($event, $index)\"\n          (outFunctionsControl)=\"handlerDropDownFunctionControl($event)\">\n          <ng-container\n            [ngTemplateOutlet]=\"contentEl\"\n            [ngTemplateOutletContext]=\"{ $index, $first, $last, step }\" />\n        </libs_ui-components-dropdown>\n      }\n    </div>\n  }\n</div>\n\n<ng-template\n  #contentEl\n  let-index=\"$index\"\n  let-first=\"$first\"\n  let-step=\"step\"\n  let-last=\"$last\">\n  <div class=\"flex items-center\">\n    @if (!first) {\n      <libs_ui-components-breadcrumb-multi_step-arrow_end\n        class=\"libs-ui-breadcrumb-multi-step-normal relative left-[1px] top-0\"\n        [attr.focus]=\"openList() && indexFocus() === index\"\n        [class.active]=\"step.status === 'selected'\"\n        [class.complete]=\"step.status === 'completed'\"\n        [class.disabled]=\"step.status === 'disabled'\"\n        [class.failed]=\"step.status === 'failed'\" />\n    }\n    <div class=\"libs-ui-breadcrumb-multi-step-center flex items-center justify-center libs-ui-font-h6m\">\n      <libs_ui-components-popover\n        [classInclude]=\"'libs-ui-breadcrumb-multi-step-center-popover py-[12px] ' + (configClassMultiStep()?.classInclude || '')\"\n        [type]=\"'text'\"\n        [ignoreShowPopover]=\"true\"\n        [ignoreStopPropagationEvent]=\"true\">\n        <div\n          class=\"libs-ui-font-h6m flex items-center justify-center gap-2 h-[40px]\"\n          [style.max-width.px]=\"configClassMultiStep()?.maxWidth || 200\"\n          [style.width.px]=\"configClassMultiStep()?.width\"\n          [attr.focus]=\"openList() && indexFocus() === index\"\n          [class.active]=\"step.status === 'selected'\"\n          [class.complete]=\"step.status === 'completed'\"\n          [class.disabled]=\"step.status === 'disabled'\"\n          [class.failed]=\"step.status === 'failed'\"\n          [class.rounded-tl-[4px]]=\"first\"\n          [class.rounded-bl-[4px]]=\"first\"\n          [class.pl-[6px]]=\"first\"\n          [class.rounded-tr-[4px]]=\"last\"\n          [class.rounded-br-[4px]]=\"last\"\n          [class.pr-[16px]]=\"last\">\n          <libs_ui-components-popover\n            [classInclude]=\"'text-nowrap pl-[10px] ' + (configClassMultiStep()?.classTitleInclude || 'max-w-[160px]')\"\n            [type]=\"'text'\"\n            [config]=\"step.popover || { maxWidth: 250, direction: 'top', content: step.title | translate }\"\n            [ignoreStopPropagationEvent]=\"true\"\n            [innerHTML]=\"step.title | translate\" />\n          @if (step.type === 'dropdown') {\n            <i\n              [attr.isFocus]=\"openList() && indexFocus() === index\"\n              class=\"libs-ui-icon-move-right rotate-90\"></i>\n          }\n        </div>\n      </libs_ui-components-popover>\n    </div>\n    @if (!last) {\n      <libs_ui-components-breadcrumb-multi_step-arrow_begin\n        class=\"libs-ui-breadcrumb-multi-step-normal relative left-[-1px] top-0\"\n        [attr.focus]=\"openList() && indexFocus() === index\"\n        [class.active]=\"step.status === 'selected'\"\n        [class.complete]=\"step.status === 'completed'\"\n        [class.disabled]=\"step.status === 'disabled'\"\n        [class.failed]=\"step.status === 'failed'\" />\n    }\n  </div>\n</ng-template>\n", styles: [".libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover{color:#6a7383;background-color:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i[focus=true]:after{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i:after{color:#6a7383;background-color:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active>i:after{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i:after{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i[focus=true]:after{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i:after{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i[focus=true]:after{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:after{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete[focus=true]{background-color:#e6faf0!important;color:#00bc62!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed[focus=true]{background-color:#fdeaec!important;color:#ee2d41!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover[focus=true]{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal{fill:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.active{fill:var(--libs-ui-button-other-color-background, #226ff5)}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.complete{fill:#e6faf0}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.complete[focus=true]{fill:#e6faf0!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.failed{fill:#fdeaec}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.failed[focus=true]{fill:#fdeaec!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.disabled{fill:#f8f9fa}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal[focus=true],.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.complete,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.failed{fill:#e9f1fe}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.disabled{fill:#f8f9fa}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.active{fill:var(--libs-ui-button-other-color-background, #226ff5)}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover>i:after{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.complete,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.failed{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active>i:after{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:after{background-color:#f8f9fa;color:#cdd0d6}\n"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXVsdGktc3RlcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYnJlYWRjcnVtYi9zcmMvbXVsdGktc3RlcC9tdWx0aS1zdGVwLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9icmVhZGNydW1iL3NyYy9tdWx0aS1zdGVwL211bHRpLXN0ZXAuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDbkQsT0FBTyxFQUFpQix1QkFBdUIsRUFBRSxTQUFTLEVBQWMsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzNJLE9BQU8sRUFBdUUsaUNBQWlDLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUN0SixPQUFPLEVBQUUsZ0NBQWdDLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUMvRSxPQUFPLEVBQUUsbUNBQW1DLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUU5RSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsc0RBQXNELEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQztBQUM3RyxPQUFPLEVBQUUsb0RBQW9ELEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUN2RyxPQUFPLEVBQUUsOENBQThDLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUNsRyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0scUJBQXFCLENBQUM7OztBQW1CdEQsTUFBTSxPQUFPLDRDQUE2QyxTQUFRLG1DQUFtQztJQUNuRyxtQkFBbUI7SUFDVCxXQUFXLEdBQUcsTUFBTSxDQUFnQixFQUFFLENBQUMsQ0FBQztJQUN4QyxhQUFhLEdBQUcsTUFBTSxDQUE0QixTQUFTLENBQUMsQ0FBQztJQUM3RCxRQUFRLEdBQUcsTUFBTSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQ2xDLFVBQVUsR0FBRyxNQUFNLENBQXFCLFNBQVMsQ0FBQyxDQUFDO0lBRXJELHVCQUF1QixHQUFHLE1BQU0sQ0FBNEMsU0FBUyxDQUFDLENBQUM7SUFFL0YsZ0JBQWdCO0lBQ1AsbUJBQW1CLEdBQUcsS0FBSyxDQUF1QixtQkFBbUIsRUFBRSxDQUFDLENBQUM7SUFDekUsVUFBVSxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQWtDLENBQUM7SUFDOUQsb0JBQW9CLEdBQUcsS0FBSyxFQUF5QixDQUFDO0lBQ3RELFVBQVUsR0FBRyxLQUFLLEVBQWUsQ0FBQztJQUUzQyxpQkFBaUI7SUFDakIsbUZBQW1GO0lBQ25GLDhEQUE4RDtJQUNyRCxrQkFBa0IsR0FBRyxNQUFNLEVBQXdDLENBQUM7SUFFN0UsZ0JBQWdCO0lBQ0MsTUFBTSxHQUFHLFlBQVksQ0FBYSxRQUFRLENBQUMsQ0FBQztJQUU3RCxlQUFlO1FBQ2IsSUFBSSxDQUFDLHFCQUFxQixFQUFFLENBQUM7SUFDL0IsQ0FBQztJQUVrQixpQkFBaUIsQ0FBQyxLQUFZLEVBQUUsS0FBYTtRQUM5RCxLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDeEIsSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUMsS0FBSyxDQUFDLENBQUMsTUFBTSxLQUFLLFVBQVUsSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUM7WUFDekYsT0FBTztRQUNULENBQUM7UUFDRCxJQUFJLENBQUMsc0JBQXNCLENBQUMsU0FBUyxFQUFFLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDO0lBQ2xFLENBQUM7SUFFUyxnQkFBZ0IsQ0FBQyxLQUFpQyxFQUFFLEtBQWE7UUFDekUsSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDakQsT0FBTztRQUNULENBQUM7UUFDRCxJQUFJLENBQUMsdUJBQXVCLEVBQUUsRUFBRSxLQUFLLEVBQUUsQ0FBQztRQUN4QyxJQUFJLENBQUMsc0JBQXNCLENBQUMsU0FBUyxFQUFFLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFFLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDO0lBQ3hGLENBQUM7SUFFUyxlQUFlLENBQUMsS0FBYyxFQUFFLEtBQWE7UUFDckQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDekIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ2pELENBQUM7SUFFRCxtRkFBbUY7SUFDbkYsOERBQThEO0lBQ3RELHNCQUFzQixDQUFDLEtBQXdCLEVBQUUsSUFBMEM7UUFDakcsS0FBSyxFQUFFLGVBQWUsRUFBRSxDQUFDO1FBQ3pCLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsRUFBRSxHQUFHLElBQUksRUFBRSxRQUFRLEVBQUUsQ0FBQyxLQUFnQyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDM0gsQ0FBQztJQUVTLDhCQUE4QixDQUFDLEtBQW9DO1FBQzNFLElBQUksQ0FBQyx1QkFBdUIsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDMUMsQ0FBQztJQUVTLHFCQUFxQjtRQUM3QixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDLFNBQVMsQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLE1BQU0sS0FBSyxVQUFVLENBQUMsQ0FBQztZQUN2RixNQUFNLFdBQVcsR0FBRyxZQUFZLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLFlBQVksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUM7WUFDdEYsTUFBTSxFQUFFLFdBQVcsRUFBRSxHQUFHLElBQUksQ0FBQyxVQUFVLEVBQUUsSUFBSSxFQUFFLENBQUM7WUFFaEQsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLE9BQU8sQ0FBQyxDQUFDLE9BQU8sRUFBRSxLQUFLLEVBQUUsRUFBRTtnQkFDdkMsSUFBSSxLQUFLLEtBQUssV0FBVyxFQUFFLENBQUM7b0JBQzFCLElBQUksV0FBVyxJQUFJLFdBQVcsR0FBRyxPQUFPLENBQUMsYUFBYSxDQUFDLFVBQVUsR0FBRyxHQUFHLEVBQUUsQ0FBQzt3QkFDeEUsSUFBSSxDQUFDLFVBQVUsRUFBRSxFQUFFLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLENBQUMsYUFBYSxDQUFDLFVBQVUsRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLENBQUMsQ0FBQztvQkFDOUYsQ0FBQztnQkFDSCxDQUFDO1lBQ0gsQ0FBQyxDQUFDLENBQUM7UUFDTCxDQUFDLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDWCxDQUFDO3dHQXpFVSw0Q0FBNEM7NEZBQTVDLDRDQUE0Qyx1M0JDN0J6RCwrbUpBdUdBLHFsTERuRkksZUFBZSw0RkFDZixnQkFBZ0Isb0pBQ2hCLHNEQUFzRCxpR0FDdEQsb0RBQW9ELCtGQUNwRCxnQ0FBZ0Msb2dCQUNoQyxpQ0FBaUMsNDBEQUNqQyw4Q0FBOEM7OzRGQUdyQyw0Q0FBNEM7a0JBakJ4RCxTQUFTOytCQUVFLDBDQUEwQyxjQUd4QyxJQUFJLG1CQUNDLHVCQUF1QixDQUFDLE1BQU0sV0FDdEM7d0JBQ1AsZUFBZTt3QkFDZixnQkFBZ0I7d0JBQ2hCLHNEQUFzRDt3QkFDdEQsb0RBQW9EO3dCQUNwRCxnQ0FBZ0M7d0JBQ2hDLGlDQUFpQzt3QkFDakMsOENBQThDO3FCQUMvQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nVGVtcGxhdGVPdXRsZXQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQWZ0ZXJWaWV3SW5pdCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRWxlbWVudFJlZiwgaW5wdXQsIE9uSW5pdCwgb3V0cHV0LCBzaWduYWwsIHZpZXdDaGlsZHJlbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSURyb3Bkb3duRnVuY3Rpb25Db250cm9sRXZlbnQsIElFbWl0U2VsZWN0S2V5LCBJUG9wb3ZlckN1c3RvbUNvbmZpZywgTGlic1VpQ29tcG9uZW50c0Ryb3Bkb3duQ29tcG9uZW50IH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1kcm9wZG93bic7XG5pbXBvcnQgeyBMaWJzVWlDb21wb25lbnRzUG9wb3ZlckNvbXBvbmVudCB9IGZyb20gJ0BsaWJzLXVpL2NvbXBvbmVudHMtcG9wb3Zlcic7XG5pbXBvcnQgeyBMaWJzVWlDb21wb25lbnRzQnJlYWRjcnVtYkNvbXBvbmVudCB9IGZyb20gJy4uL2JyZWFkY3J1bWIuY29tcG9uZW50JztcbmltcG9ydCB7IElDb25maWdDbGFzc011bHRpU3RlcCwgSVRhYkJyZWFkQ3J1bWJNdWx0aVN0ZXAsIElUYWJCcmVhZENydW1iTXVsdGlTdGVwU2VsZWN0ZWQgfSBmcm9tICcuLi9pbnRlcmZhY2VzL2JyZWFkY3J1bWIuaW50ZXJmYWNlJztcbmltcG9ydCB7IENvbmZpZ1BvcHVwRHJvcGRvd24gfSBmcm9tICcuLi91dGlscy9icmVhZGNydW1iJztcbmltcG9ydCB7IExpYnNVaUNvbXBvbmVudHNCcmVhZGNydW1iTXVsdGlTdGVwQXJyb3dCZWdpbkNvbXBvbmVudCB9IGZyb20gJy4vYXJyb3ctYmVnaW4vYXJyb3ctYmVnaW4uY29tcG9uZW50JztcbmltcG9ydCB7IExpYnNVaUNvbXBvbmVudHNCcmVhZGNydW1iTXVsdGlTdGVwQXJyb3dFbmRDb21wb25lbnQgfSBmcm9tICcuL2Fycm93LWVuZC9hcnJvdy1lbmQuY29tcG9uZW50JztcbmltcG9ydCB7IExpYnNVaUNvbXBvbmVudHNCcmVhZGNydW1iQ2hlY2tEaXNhYmxlU3RlcFBpcGUgfSBmcm9tICcuLi9waXBlcy9jaGVjay1kaXNhYmxlLXN0ZXAucGlwZSc7XG5pbXBvcnQgeyBUcmFuc2xhdGVNb2R1bGUgfSBmcm9tICdAbmd4LXRyYW5zbGF0ZS9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAYW5ndWxhci1lc2xpbnQvY29tcG9uZW50LXNlbGVjdG9yXG4gIHNlbGVjdG9yOiAnbGlic191aS1jb21wb25lbnRzLWJyZWFkY3J1bWItbXVsdGlfc3RlcCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9tdWx0aS1zdGVwLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbXVsdGktc3RlcC5jb21wb25lbnQuc2NzcyddLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaW1wb3J0czogW1xuICAgIFRyYW5zbGF0ZU1vZHVsZSxcbiAgICBOZ1RlbXBsYXRlT3V0bGV0LFxuICAgIExpYnNVaUNvbXBvbmVudHNCcmVhZGNydW1iTXVsdGlTdGVwQXJyb3dCZWdpbkNvbXBvbmVudCxcbiAgICBMaWJzVWlDb21wb25lbnRzQnJlYWRjcnVtYk11bHRpU3RlcEFycm93RW5kQ29tcG9uZW50LFxuICAgIExpYnNVaUNvbXBvbmVudHNQb3BvdmVyQ29tcG9uZW50LFxuICAgIExpYnNVaUNvbXBvbmVudHNEcm9wZG93bkNvbXBvbmVudCxcbiAgICBMaWJzVWlDb21wb25lbnRzQnJlYWRjcnVtYkNoZWNrRGlzYWJsZVN0ZXBQaXBlLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBMaWJzVWlDb21wb25lbnRzQnJlYWRjcnVtYk11bHRpU3RlcENvbXBvbmVudCBleHRlbmRzIExpYnNVaUNvbXBvbmVudHNCcmVhZGNydW1iQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0IHtcbiAgLy8gI3JlZ2lvbiBQUk9QRVJUWVxuICBwcm90ZWN0ZWQgZmFpbGVkSW5kZXggPSBzaWduYWw8QXJyYXk8bnVtYmVyPj4oW10pO1xuICBwcm90ZWN0ZWQgbGlzdEtleUhpZGRlbiA9IHNpZ25hbDxBcnJheTxzdHJpbmc+IHwgdW5kZWZpbmVkPih1bmRlZmluZWQpO1xuICBwcm90ZWN0ZWQgb3Blbkxpc3QgPSBzaWduYWw8Ym9vbGVhbj4oZmFsc2UpO1xuICBwcm90ZWN0ZWQgaW5kZXhGb2N1cyA9IHNpZ25hbDxudW1iZXIgfCB1bmRlZmluZWQ+KHVuZGVmaW5lZCk7XG5cbiAgcHJpdmF0ZSBkcm9wRG93bkZ1bmN0aW9uQ29udHJvbCA9IHNpZ25hbDxJRHJvcGRvd25GdW5jdGlvbkNvbnRyb2xFdmVudCB8IHVuZGVmaW5lZD4odW5kZWZpbmVkKTtcblxuICAvLyAjcmVnaW9uIElOUFVUXG4gIHJlYWRvbmx5IHBvcG92ZXJDdXN0b21Db25maWcgPSBpbnB1dDxJUG9wb3ZlckN1c3RvbUNvbmZpZz4oQ29uZmlnUG9wdXBEcm9wZG93bigpKTtcbiAgcmVhZG9ubHkgc3RlcHNNdWx0aSA9IGlucHV0LnJlcXVpcmVkPEFycmF5PElUYWJCcmVhZENydW1iTXVsdGlTdGVwPj4oKTtcbiAgcmVhZG9ubHkgY29uZmlnQ2xhc3NNdWx0aVN0ZXAgPSBpbnB1dDxJQ29uZmlnQ2xhc3NNdWx0aVN0ZXA+KCk7XG4gIHJlYWRvbmx5IGVsZW1lbnRSZWYgPSBpbnB1dDxIVE1MRWxlbWVudD4oKTtcblxuICAvLyAjcmVnaW9uIE9VVFBVVFxuICAvLyBOb3RlOiBLaeG7g3UgZOG7ryBsaeG7h3UgY+G7p2Egc3RlcCBz4bq9IMSRxrDhu6NjIMSR4buLbmggbmdoxKlhIHThu6sgYsOqbiBuZ2/DoGkgduG7m2kgdHlwZSBnZW5lcmFsIDxUPlxuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWV4cGxpY2l0LWFueVxuICByZWFkb25seSBvdXRNdWx0aVN0ZXBTZWxlY3QgPSBvdXRwdXQ8SVRhYkJyZWFkQ3J1bWJNdWx0aVN0ZXBTZWxlY3RlZDxhbnk+PigpO1xuXG4gIC8qIFZJRVcgQ0hJTEQgKi9cbiAgcHJpdmF0ZSByZWFkb25seSBzdGVwRWwgPSB2aWV3Q2hpbGRyZW48RWxlbWVudFJlZj4oJ3N0ZXBFbCcpO1xuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmhhbmRsZXJTY3JvbGxJbnRvVmlldygpO1xuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIGhhbmRsZXJMYWJlbEV2ZW50KGV2ZW50OiBFdmVudCwgaW5kZXg6IG51bWJlcikge1xuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIGlmICh0aGlzLnN0ZXBzTXVsdGkoKVtpbmRleF0uc3RhdHVzID09PSAnZGlzYWJsZWQnIHx8IHRoaXMuc3RlcERpc2FibGUoKS5pbmNsdWRlcyhpbmRleCkpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5oYW5kbGVyU2VsZWN0TXVsdGlTdGVwKHVuZGVmaW5lZCwgeyB0eXBlOiAndGV4dCcsIGluZGV4IH0pO1xuICB9XG5cbiAgcHJvdGVjdGVkIGhhbmRsZXJTZWxlY3RLZXkoZXZlbnQ6IElFbWl0U2VsZWN0S2V5IHwgdW5kZWZpbmVkLCBpbmRleDogbnVtYmVyKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuc3RlcERpc2FibGUoKS5pbmNsdWRlcyhpbmRleCkgfHwgIWV2ZW50KSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMuZHJvcERvd25GdW5jdGlvbkNvbnRyb2woKT8ucmVzZXQoKTtcbiAgICB0aGlzLmhhbmRsZXJTZWxlY3RNdWx0aVN0ZXAodW5kZWZpbmVkLCB7IHR5cGU6ICdkcm9wZG93bicsIGluZGV4LCBzdGVwOiBldmVudC5pdGVtIH0pO1xuICB9XG5cbiAgcHJvdGVjdGVkIGhhbmRsZXJTaG93TGlzdChldmVudDogYm9vbGVhbiwgaW5kZXg6IG51bWJlcik6IHZvaWQge1xuICAgIHRoaXMub3Blbkxpc3Quc2V0KGV2ZW50KTtcbiAgICB0aGlzLmluZGV4Rm9jdXMuc2V0KGV2ZW50ID8gaW5kZXggOiB1bmRlZmluZWQpO1xuICB9XG5cbiAgLy8gTm90ZTogS2nhu4N1IGThu68gbGnhu4d1IGPhu6dhIHN0ZXAgc+G6vSDEkcaw4bujYyDEkeG7i25oIG5naMSpYSB04burIGLDqm4gbmdvw6BpIHbhu5tpIHR5cGUgZ2VuZXJhbCA8VD5cbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby1leHBsaWNpdC1hbnlcbiAgcHJpdmF0ZSBoYW5kbGVyU2VsZWN0TXVsdGlTdGVwKGV2ZW50OiBFdmVudCB8IHVuZGVmaW5lZCwgc3RlcDogSVRhYkJyZWFkQ3J1bWJNdWx0aVN0ZXBTZWxlY3RlZDxhbnk+KTogdm9pZCB7XG4gICAgZXZlbnQ/LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIHRoaXMub3V0TXVsdGlTdGVwU2VsZWN0LmVtaXQoeyAuLi5zdGVwLCBjYWxsQmFjazogKGV2ZW50OiBBcnJheTxzdHJpbmc+IHwgdW5kZWZpbmVkKSA9PiB0aGlzLmxpc3RLZXlIaWRkZW4uc2V0KGV2ZW50KSB9KTtcbiAgfVxuXG4gIHByb3RlY3RlZCBoYW5kbGVyRHJvcERvd25GdW5jdGlvbkNvbnRyb2woZXZlbnQ6IElEcm9wZG93bkZ1bmN0aW9uQ29udHJvbEV2ZW50KTogdm9pZCB7XG4gICAgdGhpcy5kcm9wRG93bkZ1bmN0aW9uQ29udHJvbC5zZXQoZXZlbnQpO1xuICB9XG5cbiAgcHJvdGVjdGVkIGhhbmRsZXJTY3JvbGxJbnRvVmlldygpOiB2b2lkIHtcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIGNvbnN0IHNlbGVjdGVkU3RlcCA9IHRoaXMuc3RlcHNNdWx0aSgpLmZpbmRJbmRleCgoaXRlbSkgPT4gaXRlbS5zdGF0dXMgPT09ICdzZWxlY3RlZCcpO1xuICAgICAgY29uc3QgaW5kZXhTY3JvbGwgPSBzZWxlY3RlZFN0ZXAgIT09IC0xID8gc2VsZWN0ZWRTdGVwIDogdGhpcy5zdGVwc011bHRpKCkubGVuZ3RoIC0gMTtcbiAgICAgIGNvbnN0IHsgb2Zmc2V0V2lkdGggfSA9IHRoaXMuZWxlbWVudFJlZigpIHx8IHt9O1xuXG4gICAgICB0aGlzLnN0ZXBFbCgpLmZvckVhY2goKGVsZW1lbnQsIGluZGV4KSA9PiB7XG4gICAgICAgIGlmIChpbmRleCA9PT0gaW5kZXhTY3JvbGwpIHtcbiAgICAgICAgICBpZiAob2Zmc2V0V2lkdGggJiYgb2Zmc2V0V2lkdGggLSBlbGVtZW50Lm5hdGl2ZUVsZW1lbnQub2Zmc2V0TGVmdCA8IDIwMCkge1xuICAgICAgICAgICAgdGhpcy5lbGVtZW50UmVmKCk/LnNjcm9sbFRvKHsgbGVmdDogZWxlbWVudC5uYXRpdmVFbGVtZW50Lm9mZnNldExlZnQsIGJlaGF2aW9yOiAnc21vb3RoJyB9KTtcbiAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgIH0pO1xuICAgIH0sIDEwMDApO1xuICB9XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIge3sgY2xhc3NJbmNsdWRlKCkgfHwgJycgfX1cIlxuICBbY2xhc3MuanVzdGlmeS1jZW50ZXJdPVwibW9kZSgpID09PSAnY2VudGVyJ1wiXG4gIFtjbGFzcy5qdXN0aWZ5LXN0YXJ0XT1cIm1vZGUoKSA9PT0gJ2xlZnQnXCJcbiAgW2NsYXNzLmp1c3RpZnktZW5kXT1cIm1vZGUoKSA9PT0gJ3JpZ2h0J1wiXG4gIFtjbGFzcy5iZy1bI2ZmZmZmZl1dPVwiYmFja2dyb3VuZFdoaXRlKClcIlxuICAjY29udGFpbmVyRWw+XG4gIEBmb3IgKHN0ZXAgb2Ygc3RlcHNNdWx0aSgpOyB0cmFjayBzdGVwKSB7XG4gICAgPGRpdlxuICAgICAgI3N0ZXBFbFxuICAgICAgY2xhc3M9XCJmbGV4IGxpYnMtdWktYnJlYWRjcnVtYi1tdWx0aS1zdGVwXCJcbiAgICAgIFtjbGFzcy5jdXJzb3ItZGVmYXVsdF09XCJzdGVwLnN0YXR1cyA9PT0gJ2Rpc2FibGVkJ1wiXG4gICAgICBbY2xhc3MucG9pbnRlci1ldmVudHMtbm9uZV09XCJzdGVwLnN0YXR1cyA9PT0gJ2Rpc2FibGVkJ1wiXG4gICAgICBbY2xhc3MuY3Vyc29yLXBvaW50ZXJdPVwic3RlcC5zdGF0dXMgIT09ICdkaXNhYmxlZCdcIj5cbiAgICAgIEBpZiAoc3RlcC50eXBlID09PSAndGV4dCcpIHtcbiAgICAgICAgPGRpdiAoY2xpY2spPVwiaGFuZGxlckxhYmVsRXZlbnQoJGV2ZW50LCAkaW5kZXgpXCI+XG4gICAgICAgICAgPG5nLWNvbnRhaW5lclxuICAgICAgICAgICAgW25nVGVtcGxhdGVPdXRsZXRdPVwiY29udGVudEVsXCJcbiAgICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7ICRpbmRleCwgJGZpcnN0LCAkbGFzdCwgc3RlcCB9XCIgLz5cbiAgICAgICAgPC9kaXY+XG4gICAgICB9IEBlbHNlIHtcbiAgICAgICAgPGxpYnNfdWktY29tcG9uZW50cy1kcm9wZG93blxuICAgICAgICAgIFtpc05nQ29udGVudF09XCJ0cnVlXCJcbiAgICAgICAgICBbbGlzdEhpZGRlbklucHV0U2VhcmNoXT1cInRydWVcIlxuICAgICAgICAgIFtsaXN0SGFzQnV0dG9uVW5TZWxlY3RPcHRpb25dPVwic3RlcC5saXN0SGFzQnV0dG9uVW5TZWxlY3RPcHRpb25cIlxuICAgICAgICAgIFtsaXN0Q29uZmlnXT1cInN0ZXAubGlzdENvbmZpZ0l0ZW1cIlxuICAgICAgICAgIFtwb3BvdmVyQ3VzdG9tQ29uZmlnXT1cInBvcG92ZXJDdXN0b21Db25maWcoKVwiXG4gICAgICAgICAgW2xpc3RLZXlzSGlkZGVuXT1cImxpc3RLZXlIaWRkZW4oKSA/PyBzdGVwLmxpc3RLZXlzSGlkZGVuXCJcbiAgICAgICAgICBbZGlzYWJsZV09XCIkaW5kZXggfCBMaWJzVWlDb21wb25lbnRzQnJlYWRjcnVtYkNoZWNrRGlzYWJsZVN0ZXBQaXBlOiBzdGVwRGlzYWJsZSgpXCJcbiAgICAgICAgICAob3V0U2hvd0xpc3QpPVwiaGFuZGxlclNob3dMaXN0KCRldmVudCwgJGluZGV4KVwiXG4gICAgICAgICAgKG91dFNlbGVjdEtleSk9XCJoYW5kbGVyU2VsZWN0S2V5KCRldmVudCwgJGluZGV4KVwiXG4gICAgICAgICAgKG91dEZ1bmN0aW9uc0NvbnRyb2wpPVwiaGFuZGxlckRyb3BEb3duRnVuY3Rpb25Db250cm9sKCRldmVudClcIj5cbiAgICAgICAgICA8bmctY29udGFpbmVyXG4gICAgICAgICAgICBbbmdUZW1wbGF0ZU91dGxldF09XCJjb250ZW50RWxcIlxuICAgICAgICAgICAgW25nVGVtcGxhdGVPdXRsZXRDb250ZXh0XT1cInsgJGluZGV4LCAkZmlyc3QsICRsYXN0LCBzdGVwIH1cIiAvPlxuICAgICAgICA8L2xpYnNfdWktY29tcG9uZW50cy1kcm9wZG93bj5cbiAgICAgIH1cbiAgICA8L2Rpdj5cbiAgfVxuPC9kaXY+XG5cbjxuZy10ZW1wbGF0ZVxuICAjY29udGVudEVsXG4gIGxldC1pbmRleD1cIiRpbmRleFwiXG4gIGxldC1maXJzdD1cIiRmaXJzdFwiXG4gIGxldC1zdGVwPVwic3RlcFwiXG4gIGxldC1sYXN0PVwiJGxhc3RcIj5cbiAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyXCI+XG4gICAgQGlmICghZmlyc3QpIHtcbiAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYnJlYWRjcnVtYi1tdWx0aV9zdGVwLWFycm93X2VuZFxuICAgICAgICBjbGFzcz1cImxpYnMtdWktYnJlYWRjcnVtYi1tdWx0aS1zdGVwLW5vcm1hbCByZWxhdGl2ZSBsZWZ0LVsxcHhdIHRvcC0wXCJcbiAgICAgICAgW2F0dHIuZm9jdXNdPVwib3Blbkxpc3QoKSAmJiBpbmRleEZvY3VzKCkgPT09IGluZGV4XCJcbiAgICAgICAgW2NsYXNzLmFjdGl2ZV09XCJzdGVwLnN0YXR1cyA9PT0gJ3NlbGVjdGVkJ1wiXG4gICAgICAgIFtjbGFzcy5jb21wbGV0ZV09XCJzdGVwLnN0YXR1cyA9PT0gJ2NvbXBsZXRlZCdcIlxuICAgICAgICBbY2xhc3MuZGlzYWJsZWRdPVwic3RlcC5zdGF0dXMgPT09ICdkaXNhYmxlZCdcIlxuICAgICAgICBbY2xhc3MuZmFpbGVkXT1cInN0ZXAuc3RhdHVzID09PSAnZmFpbGVkJ1wiIC8+XG4gICAgfVxuICAgIDxkaXYgY2xhc3M9XCJsaWJzLXVpLWJyZWFkY3J1bWItbXVsdGktc3RlcC1jZW50ZXIgZmxleCBpdGVtcy1jZW50ZXIganVzdGlmeS1jZW50ZXIgbGlicy11aS1mb250LWg2bVwiPlxuICAgICAgPGxpYnNfdWktY29tcG9uZW50cy1wb3BvdmVyXG4gICAgICAgIFtjbGFzc0luY2x1ZGVdPVwiJ2xpYnMtdWktYnJlYWRjcnVtYi1tdWx0aS1zdGVwLWNlbnRlci1wb3BvdmVyIHB5LVsxMnB4XSAnICsgKGNvbmZpZ0NsYXNzTXVsdGlTdGVwKCk/LmNsYXNzSW5jbHVkZSB8fCAnJylcIlxuICAgICAgICBbdHlwZV09XCIndGV4dCdcIlxuICAgICAgICBbaWdub3JlU2hvd1BvcG92ZXJdPVwidHJ1ZVwiXG4gICAgICAgIFtpZ25vcmVTdG9wUHJvcGFnYXRpb25FdmVudF09XCJ0cnVlXCI+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjbGFzcz1cImxpYnMtdWktZm9udC1oNm0gZmxleCBpdGVtcy1jZW50ZXIganVzdGlmeS1jZW50ZXIgZ2FwLTIgaC1bNDBweF1cIlxuICAgICAgICAgIFtzdHlsZS5tYXgtd2lkdGgucHhdPVwiY29uZmlnQ2xhc3NNdWx0aVN0ZXAoKT8ubWF4V2lkdGggfHwgMjAwXCJcbiAgICAgICAgICBbc3R5bGUud2lkdGgucHhdPVwiY29uZmlnQ2xhc3NNdWx0aVN0ZXAoKT8ud2lkdGhcIlxuICAgICAgICAgIFthdHRyLmZvY3VzXT1cIm9wZW5MaXN0KCkgJiYgaW5kZXhGb2N1cygpID09PSBpbmRleFwiXG4gICAgICAgICAgW2NsYXNzLmFjdGl2ZV09XCJzdGVwLnN0YXR1cyA9PT0gJ3NlbGVjdGVkJ1wiXG4gICAgICAgICAgW2NsYXNzLmNvbXBsZXRlXT1cInN0ZXAuc3RhdHVzID09PSAnY29tcGxldGVkJ1wiXG4gICAgICAgICAgW2NsYXNzLmRpc2FibGVkXT1cInN0ZXAuc3RhdHVzID09PSAnZGlzYWJsZWQnXCJcbiAgICAgICAgICBbY2xhc3MuZmFpbGVkXT1cInN0ZXAuc3RhdHVzID09PSAnZmFpbGVkJ1wiXG4gICAgICAgICAgW2NsYXNzLnJvdW5kZWQtdGwtWzRweF1dPVwiZmlyc3RcIlxuICAgICAgICAgIFtjbGFzcy5yb3VuZGVkLWJsLVs0cHhdXT1cImZpcnN0XCJcbiAgICAgICAgICBbY2xhc3MucGwtWzZweF1dPVwiZmlyc3RcIlxuICAgICAgICAgIFtjbGFzcy5yb3VuZGVkLXRyLVs0cHhdXT1cImxhc3RcIlxuICAgICAgICAgIFtjbGFzcy5yb3VuZGVkLWJyLVs0cHhdXT1cImxhc3RcIlxuICAgICAgICAgIFtjbGFzcy5wci1bMTZweF1dPVwibGFzdFwiPlxuICAgICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtcG9wb3ZlclxuICAgICAgICAgICAgW2NsYXNzSW5jbHVkZV09XCIndGV4dC1ub3dyYXAgcGwtWzEwcHhdICcgKyAoY29uZmlnQ2xhc3NNdWx0aVN0ZXAoKT8uY2xhc3NUaXRsZUluY2x1ZGUgfHwgJ21heC13LVsxNjBweF0nKVwiXG4gICAgICAgICAgICBbdHlwZV09XCIndGV4dCdcIlxuICAgICAgICAgICAgW2NvbmZpZ109XCJzdGVwLnBvcG92ZXIgfHwgeyBtYXhXaWR0aDogMjUwLCBkaXJlY3Rpb246ICd0b3AnLCBjb250ZW50OiBzdGVwLnRpdGxlIHwgdHJhbnNsYXRlIH1cIlxuICAgICAgICAgICAgW2lnbm9yZVN0b3BQcm9wYWdhdGlvbkV2ZW50XT1cInRydWVcIlxuICAgICAgICAgICAgW2lubmVySFRNTF09XCJzdGVwLnRpdGxlIHwgdHJhbnNsYXRlXCIgLz5cbiAgICAgICAgICBAaWYgKHN0ZXAudHlwZSA9PT0gJ2Ryb3Bkb3duJykge1xuICAgICAgICAgICAgPGlcbiAgICAgICAgICAgICAgW2F0dHIuaXNGb2N1c109XCJvcGVuTGlzdCgpICYmIGluZGV4Rm9jdXMoKSA9PT0gaW5kZXhcIlxuICAgICAgICAgICAgICBjbGFzcz1cImxpYnMtdWktaWNvbi1tb3ZlLXJpZ2h0IHJvdGF0ZS05MFwiPjwvaT5cbiAgICAgICAgICB9XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9saWJzX3VpLWNvbXBvbmVudHMtcG9wb3Zlcj5cbiAgICA8L2Rpdj5cbiAgICBAaWYgKCFsYXN0KSB7XG4gICAgICA8bGlic191aS1jb21wb25lbnRzLWJyZWFkY3J1bWItbXVsdGlfc3RlcC1hcnJvd19iZWdpblxuICAgICAgICBjbGFzcz1cImxpYnMtdWktYnJlYWRjcnVtYi1tdWx0aS1zdGVwLW5vcm1hbCByZWxhdGl2ZSBsZWZ0LVstMXB4XSB0b3AtMFwiXG4gICAgICAgIFthdHRyLmZvY3VzXT1cIm9wZW5MaXN0KCkgJiYgaW5kZXhGb2N1cygpID09PSBpbmRleFwiXG4gICAgICAgIFtjbGFzcy5hY3RpdmVdPVwic3RlcC5zdGF0dXMgPT09ICdzZWxlY3RlZCdcIlxuICAgICAgICBbY2xhc3MuY29tcGxldGVdPVwic3RlcC5zdGF0dXMgPT09ICdjb21wbGV0ZWQnXCJcbiAgICAgICAgW2NsYXNzLmRpc2FibGVkXT1cInN0ZXAuc3RhdHVzID09PSAnZGlzYWJsZWQnXCJcbiAgICAgICAgW2NsYXNzLmZhaWxlZF09XCJzdGVwLnN0YXR1cyA9PT0gJ2ZhaWxlZCdcIiAvPlxuICAgIH1cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuIl19

package/esm2022/pipes/check-complete-step.pipe.mjs

@@ -0,0 +1,17 @@
+import { Pipe } from '@angular/core';
+import * as i0 from "@angular/core";
+export class LibsUiComponentsBreadcrumbCheckCompleteStepPipe {
+    transform(step, completedIndex) {
+        return completedIndex.includes(step);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbCheckCompleteStepPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbCheckCompleteStepPipe, isStandalone: true, name: "LibsUiComponentsBreadcrumbCheckCompleteStepPipe" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbCheckCompleteStepPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'LibsUiComponentsBreadcrumbCheckCompleteStepPipe',
+                    standalone: true,
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2stY29tcGxldGUtc3RlcC5waXBlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2JyZWFkY3J1bWIvc3JjL3BpcGVzL2NoZWNrLWNvbXBsZXRlLXN0ZXAucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFpQixNQUFNLGVBQWUsQ0FBQzs7QUFNcEQsTUFBTSxPQUFPLCtDQUErQztJQUMxRCxTQUFTLENBQUMsSUFBWSxFQUFFLGNBQTZCO1FBQ25ELE9BQU8sY0FBYyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN2QyxDQUFDO3dHQUhVLCtDQUErQztzR0FBL0MsK0NBQStDOzs0RkFBL0MsK0NBQStDO2tCQUozRCxJQUFJO21CQUFDO29CQUNKLElBQUksRUFBRSxpREFBaUQ7b0JBQ3ZELFVBQVUsRUFBRSxJQUFJO2lCQUNqQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFBpcGUsIFBpcGVUcmFuc2Zvcm0gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQFBpcGUoe1xuICBuYW1lOiAnTGlic1VpQ29tcG9uZW50c0JyZWFkY3J1bWJDaGVja0NvbXBsZXRlU3RlcFBpcGUnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxufSlcbmV4cG9ydCBjbGFzcyBMaWJzVWlDb21wb25lbnRzQnJlYWRjcnVtYkNoZWNrQ29tcGxldGVTdGVwUGlwZSBpbXBsZW1lbnRzIFBpcGVUcmFuc2Zvcm0ge1xuICB0cmFuc2Zvcm0oc3RlcDogbnVtYmVyLCBjb21wbGV0ZWRJbmRleDogQXJyYXk8bnVtYmVyPik6IGJvb2xlYW4ge1xuICAgIHJldHVybiBjb21wbGV0ZWRJbmRleC5pbmNsdWRlcyhzdGVwKTtcbiAgfVxufVxuIl19

package/esm2022/pipes/check-disable-step.pipe.mjs

@@ -0,0 +1,17 @@
+import { Pipe } from '@angular/core';
+import * as i0 from "@angular/core";
+export class LibsUiComponentsBreadcrumbCheckDisableStepPipe {
+    transform(index, stepDisable) {
+        return stepDisable.includes(index);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbCheckDisableStepPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbCheckDisableStepPipe, isStandalone: true, name: "LibsUiComponentsBreadcrumbCheckDisableStepPipe" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbCheckDisableStepPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'LibsUiComponentsBreadcrumbCheckDisableStepPipe',
+                    standalone: true,
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2stZGlzYWJsZS1zdGVwLnBpcGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYnJlYWRjcnVtYi9zcmMvcGlwZXMvY2hlY2stZGlzYWJsZS1zdGVwLnBpcGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBaUIsTUFBTSxlQUFlLENBQUM7O0FBTXBELE1BQU0sT0FBTyw4Q0FBOEM7SUFDekQsU0FBUyxDQUFDLEtBQWEsRUFBRSxXQUEwQjtRQUNqRCxPQUFPLFdBQVcsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDckMsQ0FBQzt3R0FIVSw4Q0FBOEM7c0dBQTlDLDhDQUE4Qzs7NEZBQTlDLDhDQUE4QztrQkFKMUQsSUFBSTttQkFBQztvQkFDSixJQUFJLEVBQUUsZ0RBQWdEO29CQUN0RCxVQUFVLEVBQUUsSUFBSTtpQkFDakIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBQaXBlKHtcbiAgbmFtZTogJ0xpYnNVaUNvbXBvbmVudHNCcmVhZGNydW1iQ2hlY2tEaXNhYmxlU3RlcFBpcGUnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxufSlcbmV4cG9ydCBjbGFzcyBMaWJzVWlDb21wb25lbnRzQnJlYWRjcnVtYkNoZWNrRGlzYWJsZVN0ZXBQaXBlIGltcGxlbWVudHMgUGlwZVRyYW5zZm9ybSB7XG4gIHRyYW5zZm9ybShpbmRleDogbnVtYmVyLCBzdGVwRGlzYWJsZTogQXJyYXk8bnVtYmVyPik6IGJvb2xlYW4ge1xuICAgIHJldHVybiBzdGVwRGlzYWJsZS5pbmNsdWRlcyhpbmRleCk7XG4gIH1cbn1cbiJdfQ==

package/esm2022/utils/breadcrumb.mjs

@@ -0,0 +1,12 @@
+export const ConfigPopupDropdown = () => {
+    return {
+        maxWidth: 210,
+        direction: 'bottom',
+        classInclude: 'w-[200px]',
+        position: {
+            mode: 'center',
+            distance: 0,
+        },
+    };
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9icmVhZGNydW1iL3NyYy91dGlscy9icmVhZGNydW1iLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBLE1BQU0sQ0FBQyxNQUFNLG1CQUFtQixHQUFHLEdBQXlCLEVBQUU7SUFDNUQsT0FBTztRQUNMLFFBQVEsRUFBRSxHQUFHO1FBQ2IsU0FBUyxFQUFFLFFBQVE7UUFDbkIsWUFBWSxFQUFFLFdBQVc7UUFDekIsUUFBUSxFQUFFO1lBQ1IsSUFBSSxFQUFFLFFBQVE7WUFDZCxRQUFRLEVBQUUsQ0FBQztTQUNaO0tBQ0YsQ0FBQztBQUNKLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IElQb3BvdmVyQ3VzdG9tQ29uZmlnIH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1kcm9wZG93bic7XG5cbmV4cG9ydCBjb25zdCBDb25maWdQb3B1cERyb3Bkb3duID0gKCk6IElQb3BvdmVyQ3VzdG9tQ29uZmlnID0+IHtcbiAgcmV0dXJuIHtcbiAgICBtYXhXaWR0aDogMjEwLFxuICAgIGRpcmVjdGlvbjogJ2JvdHRvbScsXG4gICAgY2xhc3NJbmNsdWRlOiAndy1bMjAwcHhdJyxcbiAgICBwb3NpdGlvbjoge1xuICAgICAgbW9kZTogJ2NlbnRlcicsXG4gICAgICBkaXN0YW5jZTogMCxcbiAgICB9LFxuICB9O1xufTtcbiJdfQ==

package/fesm2022/libs-ui-components-breadcrumb.mjs

@@ -0,0 +1,217 @@
+import * as i0 from '@angular/core';
+import { Pipe, signal, input, model, output, ChangeDetectionStrategy, Component, viewChildren } from '@angular/core';
+import * as i1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { LibsUiComponentsDropdownComponent } from '@libs-ui/components-dropdown';
+import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
+
+class LibsUiComponentsBreadcrumbCheckCompleteStepPipe {
+    transform(step, completedIndex) {
+        return completedIndex.includes(step);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbCheckCompleteStepPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbCheckCompleteStepPipe, isStandalone: true, name: "LibsUiComponentsBreadcrumbCheckCompleteStepPipe" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbCheckCompleteStepPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'LibsUiComponentsBreadcrumbCheckCompleteStepPipe',
+                    standalone: true,
+                }]
+        }] });
+
+class LibsUiComponentsBreadcrumbComponent {
+    // #region PROPERTY
+    selectedIndex = signal(0);
+    stepDisable = signal([]);
+    // #region INPUT
+    width = input(24);
+    mode = input('center');
+    steps = model();
+    classInclude = input();
+    completedIndex = model([]);
+    backgroundWhite = input();
+    // #region OUTPUT
+    outStepSelected = output();
+    outFunctionControl = output();
+    ngOnInit() {
+        this.outFunctionControl.emit(this.FunctionsControl);
+    }
+    get FunctionsControl() {
+        return {
+            setSelectedStep: async (event) => this.selectedIndex.set(event),
+            setCompletedStep: this.setCompletedStep.bind(this),
+            setStepDisable: async (event) => this.stepDisable.set(event),
+            getCompleteIndex: async () => this.completedIndex(),
+            getSelectedIndex: async () => this.selectedIndex(),
+            resetCompleteIndex: this.resetCompleteIndex.bind(this),
+        };
+    }
+    /* FUNCTIONS */
+    handlerSelectStep(event, index) {
+        event.stopPropagation();
+        this.outStepSelected.emit({ index });
+    }
+    async setCompletedStep(complete, index) {
+        const indexFound = this.completedIndex().indexOf(index);
+        if (indexFound >= 0) {
+            this.completedIndex.update((items) => {
+                items.splice(indexFound, 1);
+                return [...items];
+            });
+        }
+        if (complete) {
+            this.completedIndex.update((items) => {
+                items.push(index);
+                return [...items];
+            });
+        }
+    }
+    async resetCompleteIndex(resetAll = true, index) {
+        if (resetAll) {
+            this.completedIndex.set([]);
+            return;
+        }
+        this.completedIndex.update((items) => items.filter((item) => item !== index));
+    }
+    handlerLabelEvent(event, index) {
+        this.handlerSelectStep(event, index);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsBreadcrumbComponent, isStandalone: true, selector: "libs_ui-components-breadcrumb", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, completedIndex: { classPropertyName: "completedIndex", publicName: "completedIndex", isSignal: true, isRequired: false, transformFunction: null }, backgroundWhite: { classPropertyName: "backgroundWhite", publicName: "backgroundWhite", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { steps: "stepsChange", completedIndex: "completedIndexChange", outStepSelected: "outStepSelected", outFunctionControl: "outFunctionControl" }, ngImport: i0, template: "<div\n  class=\"flex items-center {{ classInclude() || '' }}\"\n  [class.justify-center]=\"mode() === 'center'\"\n  [class.justify-start]=\"mode() === 'left'\"\n  [class.justify-end]=\"mode() === 'right'\"\n  [class.bg-[#ffffff]]=\"backgroundWhite()\">\n  @for (step of steps(); track step) {\n    <div\n      class=\"libs-ui-breadcrumb-crumb flex {{ step.classInclude || 'w-full' }}\"\n      [class.pointer-events-none]=\"step.disable\"\n      (click)=\"handlerSelectStep($event, $index)\">\n      @if ($index | LibsUiComponentsBreadcrumbCheckCompleteStepPipe: completedIndex()) {\n        <span class=\"libs-ui-breadcrumb-crumb-check-complete\">\n          <span class=\"libs-ui-breadcrumb-crumb-check-complete-icon libs-ui-icon-check inline-block m-auto\"></span>\n        </span>\n      } @else {\n        <span\n          class=\"libs-ui-breadcrumb-crumb-number libs-ui-font-h5m\"\n          [class.disable]=\"step.disable\"\n          [class.pointer-events-none]=\"step.disable\"\n          [class.text-[#cdd0d6]]=\"step.disable\"\n          [class.bg-[#f8f9fa]]=\"step.disable\"\n          [class.text-[#ffffff]]=\"$index === selectedIndex()\"\n          [class.bg-[var(--libs-ui-color-default)]]=\"$index === selectedIndex()\"\n          [class.text-[var(--libs-ui-color-default)]]=\"$index !== selectedIndex()\"\n          [class.bg-[var(--libs-ui-color-light-2)]]=\"$index !== selectedIndex()\">\n          {{ step.number }}\n        </span>\n      }\n      <span\n        class=\"libs-ui-breadcrumb-crumb-title libs-ui-font-h5m\"\n        [class.disable]=\"step.disable\"\n        [class.pointer-events-none]=\"step.disable\"\n        [class.text-[#cdd0d6]]=\"step.disable\"\n        [class.active]=\"$index === selectedIndex()\"\n        (click)=\"handlerLabelEvent($event, $index)\">\n        {{ step.title | translate }}\n      </span>\n      @if (!$last) {\n        <div\n          class=\"mx-[12px] h-[1px] bg-[#e6e7ea]\"\n          [style.width.px]=\"width()\"></div>\n      }\n    </div>\n  }\n</div>\n", styles: [".libs-ui-breadcrumb-crumb{height:auto;position:relative;display:flex;align-items:center;cursor:pointer}.libs-ui-breadcrumb-crumb .libs-ui-breadcrumb-crumb-number{width:32px;height:32px;padding-top:1px;border-radius:20px;margin-right:12px;line-height:24px;flex-shrink:0;display:flex;justify-content:center;align-items:center}.libs-ui-breadcrumb-crumb .libs-ui-breadcrumb-crumb-number.disable{text-decoration:none;cursor:default}.libs-ui-breadcrumb-crumb .libs-ui-breadcrumb-crumb-check-complete{width:32px;height:32px;border-radius:20px;margin-right:12px;line-height:24px;flex-shrink:0;background-color:#00bc62;display:flex;justify-content:center;align-items:center}.libs-ui-breadcrumb-crumb .libs-ui-breadcrumb-crumb-check-complete .libs-ui-breadcrumb-crumb-check-complete-icon:before{color:#fff}.libs-ui-breadcrumb-crumb .libs-ui-breadcrumb-crumb-title{color:#6a7383}.libs-ui-breadcrumb-crumb .libs-ui-breadcrumb-crumb-title.disable{text-decoration:none;cursor:default}.libs-ui-breadcrumb-crumb .libs-ui-breadcrumb-crumb-title.active{color:#071631}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LibsUiComponentsBreadcrumbCheckCompleteStepPipe, name: "LibsUiComponentsBreadcrumbCheckCompleteStepPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-breadcrumb', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LibsUiComponentsBreadcrumbCheckCompleteStepPipe], template: "<div\n  class=\"flex items-center {{ classInclude() || '' }}\"\n  [class.justify-center]=\"mode() === 'center'\"\n  [class.justify-start]=\"mode() === 'left'\"\n  [class.justify-end]=\"mode() === 'right'\"\n  [class.bg-[#ffffff]]=\"backgroundWhite()\">\n  @for (step of steps(); track step) {\n    <div\n      class=\"libs-ui-breadcrumb-crumb flex {{ step.classInclude || 'w-full' }}\"\n      [class.pointer-events-none]=\"step.disable\"\n      (click)=\"handlerSelectStep($event, $index)\">\n      @if ($index | LibsUiComponentsBreadcrumbCheckCompleteStepPipe: completedIndex()) {\n        <span class=\"libs-ui-breadcrumb-crumb-check-complete\">\n          <span class=\"libs-ui-breadcrumb-crumb-check-complete-icon libs-ui-icon-check inline-block m-auto\"></span>\n        </span>\n      } @else {\n        <span\n          class=\"libs-ui-breadcrumb-crumb-number libs-ui-font-h5m\"\n          [class.disable]=\"step.disable\"\n          [class.pointer-events-none]=\"step.disable\"\n          [class.text-[#cdd0d6]]=\"step.disable\"\n          [class.bg-[#f8f9fa]]=\"step.disable\"\n          [class.text-[#ffffff]]=\"$index === selectedIndex()\"\n          [class.bg-[var(--libs-ui-color-default)]]=\"$index === selectedIndex()\"\n          [class.text-[var(--libs-ui-color-default)]]=\"$index !== selectedIndex()\"\n          [class.bg-[var(--libs-ui-color-light-2)]]=\"$index !== selectedIndex()\">\n          {{ step.number }}\n        </span>\n      }\n      <span\n        class=\"libs-ui-breadcrumb-crumb-title libs-ui-font-h5m\"\n        [class.disable]=\"step.disable\"\n        [class.pointer-events-none]=\"step.disable\"\n        [class.text-[#cdd0d6]]=\"step.disable\"\n        [class.active]=\"$index === selectedIndex()\"\n        (click)=\"handlerLabelEvent($event, $index)\">\n        {{ step.title | translate }}\n      </span>\n      @if (!$last) {\n        <div\n          class=\"mx-[12px] h-[1px] bg-[#e6e7ea]\"\n          [style.width.px]=\"width()\"></div>\n      }\n    </div>\n  }\n</div>\n", styles: [".libs-ui-breadcrumb-crumb{height:auto;position:relative;display:flex;align-items:center;cursor:pointer}.libs-ui-breadcrumb-crumb .libs-ui-breadcrumb-crumb-number{width:32px;height:32px;padding-top:1px;border-radius:20px;margin-right:12px;line-height:24px;flex-shrink:0;display:flex;justify-content:center;align-items:center}.libs-ui-breadcrumb-crumb .libs-ui-breadcrumb-crumb-number.disable{text-decoration:none;cursor:default}.libs-ui-breadcrumb-crumb .libs-ui-breadcrumb-crumb-check-complete{width:32px;height:32px;border-radius:20px;margin-right:12px;line-height:24px;flex-shrink:0;background-color:#00bc62;display:flex;justify-content:center;align-items:center}.libs-ui-breadcrumb-crumb .libs-ui-breadcrumb-crumb-check-complete .libs-ui-breadcrumb-crumb-check-complete-icon:before{color:#fff}.libs-ui-breadcrumb-crumb .libs-ui-breadcrumb-crumb-title{color:#6a7383}.libs-ui-breadcrumb-crumb .libs-ui-breadcrumb-crumb-title.disable{text-decoration:none;cursor:default}.libs-ui-breadcrumb-crumb .libs-ui-breadcrumb-crumb-title.active{color:#071631}\n"] }]
+        }] });
+
+const ConfigPopupDropdown = () => {
+    return {
+        maxWidth: 210,
+        direction: 'bottom',
+        classInclude: 'w-[200px]',
+        position: {
+            mode: 'center',
+            distance: 0,
+        },
+    };
+};
+
+class LibsUiComponentsBreadcrumbMultiStepArrowBeginComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbMultiStepArrowBeginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LibsUiComponentsBreadcrumbMultiStepArrowBeginComponent, isStandalone: true, selector: "libs_ui-components-breadcrumb-multi_step-arrow_begin", ngImport: i0, template: "<svg\n  version=\"1.2\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 20 40\"\n  width=\"20\"\n  height=\"40\">\n  <path d=\"m-177.9 1.6c-0.5-0.7 0-1.6 0.8-1.6h183.1c1.4 0 2.6 0.7 3.4 1.8l10.2 16c0.9 1.4 0.9 3 0 4.4l-10.2 16c-0.8 1.1-2 1.8-3.4 1.8h-183.1c-0.8 0-1.3-0.9-0.8-1.6l11.9-17.3c0.4-0.7 0.4-1.5 0-2.2z\" />\n</svg>\n", styles: [".libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover{color:#6a7383;background-color:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i[focus=true]:after{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i:after{color:#6a7383;background-color:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active>i:after{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i:after{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i[focus=true]:after{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i:after{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i[focus=true]:after{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:after{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete[focus=true]{background-color:#e6faf0!important;color:#00bc62!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed[focus=true]{background-color:#fdeaec!important;color:#ee2d41!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover[focus=true]{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal{fill:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.active{fill:var(--libs-ui-button-other-color-background, #226ff5)}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.complete{fill:#e6faf0}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.complete[focus=true]{fill:#e6faf0!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.failed{fill:#fdeaec}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.failed[focus=true]{fill:#fdeaec!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.disabled{fill:#f8f9fa}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal[focus=true],.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.complete,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.failed{fill:#e9f1fe}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.disabled{fill:#f8f9fa}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.active{fill:var(--libs-ui-button-other-color-background, #226ff5)}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover>i:after{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.complete,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.failed{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active>i:after{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:after{background-color:#f8f9fa;color:#cdd0d6}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbMultiStepArrowBeginComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-breadcrumb-multi_step-arrow_begin', standalone: true, template: "<svg\n  version=\"1.2\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 20 40\"\n  width=\"20\"\n  height=\"40\">\n  <path d=\"m-177.9 1.6c-0.5-0.7 0-1.6 0.8-1.6h183.1c1.4 0 2.6 0.7 3.4 1.8l10.2 16c0.9 1.4 0.9 3 0 4.4l-10.2 16c-0.8 1.1-2 1.8-3.4 1.8h-183.1c-0.8 0-1.3-0.9-0.8-1.6l11.9-17.3c0.4-0.7 0.4-1.5 0-2.2z\" />\n</svg>\n", styles: [".libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover{color:#6a7383;background-color:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i[focus=true]:after{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i:after{color:#6a7383;background-color:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active>i:after{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i:after{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i[focus=true]:after{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i:after{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i[focus=true]:after{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:after{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete[focus=true]{background-color:#e6faf0!important;color:#00bc62!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed[focus=true]{background-color:#fdeaec!important;color:#ee2d41!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover[focus=true]{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal{fill:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.active{fill:var(--libs-ui-button-other-color-background, #226ff5)}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.complete{fill:#e6faf0}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.complete[focus=true]{fill:#e6faf0!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.failed{fill:#fdeaec}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.failed[focus=true]{fill:#fdeaec!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.disabled{fill:#f8f9fa}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal[focus=true],.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.complete,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.failed{fill:#e9f1fe}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.disabled{fill:#f8f9fa}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.active{fill:var(--libs-ui-button-other-color-background, #226ff5)}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover>i:after{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.complete,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.failed{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active>i:after{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:after{background-color:#f8f9fa;color:#cdd0d6}\n"] }]
+        }] });
+
+class LibsUiComponentsBreadcrumbMultiStepArrowEndComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbMultiStepArrowEndComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LibsUiComponentsBreadcrumbMultiStepArrowEndComponent, isStandalone: true, selector: "libs_ui-components-breadcrumb-multi_step-arrow_end", ngImport: i0, template: "<svg\n  version=\"1.2\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 20 40\"\n  width=\"20\"\n  height=\"40\">\n  <path d=\"m1.1 1.6c-0.5-0.7 0-1.6 0.8-1.6h183.1c1.4 0 2.6 0.7 3.4 1.8l10.2 16c0.9 1.4 0.9 3 0 4.4l-10.2 16c-0.8 1.1-2 1.8-3.4 1.8h-183.1c-0.8 0-1.3-0.9-0.8-1.6l11.9-17.3c0.4-0.7 0.4-1.5 0-2.2z\" />\n</svg>\n", styles: [".libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover{color:#6a7383;background-color:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i[focus=true]:after{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i:after{color:#6a7383;background-color:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active>i:after{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i:after{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i[focus=true]:after{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i:after{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i[focus=true]:after{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:after{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete[focus=true]{background-color:#e6faf0!important;color:#00bc62!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed[focus=true]{background-color:#fdeaec!important;color:#ee2d41!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover[focus=true]{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal{fill:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.active{fill:var(--libs-ui-button-other-color-background, #226ff5)}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.complete{fill:#e6faf0}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.complete[focus=true]{fill:#e6faf0!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.failed{fill:#fdeaec}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.failed[focus=true]{fill:#fdeaec!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.disabled{fill:#f8f9fa}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal[focus=true],.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.complete,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.failed{fill:#e9f1fe}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.disabled{fill:#f8f9fa}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.active{fill:var(--libs-ui-button-other-color-background, #226ff5)}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover>i:after{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.complete,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.failed{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active>i:after{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:after{background-color:#f8f9fa;color:#cdd0d6}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbMultiStepArrowEndComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-breadcrumb-multi_step-arrow_end', standalone: true, template: "<svg\n  version=\"1.2\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 20 40\"\n  width=\"20\"\n  height=\"40\">\n  <path d=\"m1.1 1.6c-0.5-0.7 0-1.6 0.8-1.6h183.1c1.4 0 2.6 0.7 3.4 1.8l10.2 16c0.9 1.4 0.9 3 0 4.4l-10.2 16c-0.8 1.1-2 1.8-3.4 1.8h-183.1c-0.8 0-1.3-0.9-0.8-1.6l11.9-17.3c0.4-0.7 0.4-1.5 0-2.2z\" />\n</svg>\n", styles: [".libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover{color:#6a7383;background-color:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i[focus=true]:after{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i:after{color:#6a7383;background-color:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active>i:after{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i:after{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i[focus=true]:after{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i:after{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i[focus=true]:after{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:after{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete[focus=true]{background-color:#e6faf0!important;color:#00bc62!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed[focus=true]{background-color:#fdeaec!important;color:#ee2d41!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover[focus=true]{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal{fill:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.active{fill:var(--libs-ui-button-other-color-background, #226ff5)}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.complete{fill:#e6faf0}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.complete[focus=true]{fill:#e6faf0!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.failed{fill:#fdeaec}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.failed[focus=true]{fill:#fdeaec!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.disabled{fill:#f8f9fa}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal[focus=true],.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.complete,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.failed{fill:#e9f1fe}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.disabled{fill:#f8f9fa}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.active{fill:var(--libs-ui-button-other-color-background, #226ff5)}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover>i:after{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.complete,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.failed{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active>i:after{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:after{background-color:#f8f9fa;color:#cdd0d6}\n"] }]
+        }] });
+
+class LibsUiComponentsBreadcrumbCheckDisableStepPipe {
+    transform(index, stepDisable) {
+        return stepDisable.includes(index);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbCheckDisableStepPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbCheckDisableStepPipe, isStandalone: true, name: "LibsUiComponentsBreadcrumbCheckDisableStepPipe" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbCheckDisableStepPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'LibsUiComponentsBreadcrumbCheckDisableStepPipe',
+                    standalone: true,
+                }]
+        }] });
+
+class LibsUiComponentsBreadcrumbMultiStepComponent extends LibsUiComponentsBreadcrumbComponent {
+    // #region PROPERTY
+    failedIndex = signal([]);
+    listKeyHidden = signal(undefined);
+    openList = signal(false);
+    indexFocus = signal(undefined);
+    dropDownFunctionControl = signal(undefined);
+    // #region INPUT
+    popoverCustomConfig = input(ConfigPopupDropdown());
+    stepsMulti = input.required();
+    configClassMultiStep = input();
+    elementRef = input();
+    // #region OUTPUT
+    // Note: Kiểu dữ liệu của step sẽ được định nghĩa từ bên ngoài với type general <T>
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    outMultiStepSelect = output();
+    /* VIEW CHILD */
+    stepEl = viewChildren('stepEl');
+    ngAfterViewInit() {
+        this.handlerScrollIntoView();
+    }
+    handlerLabelEvent(event, index) {
+        event.stopPropagation();
+        if (this.stepsMulti()[index].status === 'disabled' || this.stepDisable().includes(index)) {
+            return;
+        }
+        this.handlerSelectMultiStep(undefined, { type: 'text', index });
+    }
+    handlerSelectKey(event, index) {
+        if (this.stepDisable().includes(index) || !event) {
+            return;
+        }
+        this.dropDownFunctionControl()?.reset();
+        this.handlerSelectMultiStep(undefined, { type: 'dropdown', index, step: event.item });
+    }
+    handlerShowList(event, index) {
+        this.openList.set(event);
+        this.indexFocus.set(event ? index : undefined);
+    }
+    // Note: Kiểu dữ liệu của step sẽ được định nghĩa từ bên ngoài với type general <T>
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    handlerSelectMultiStep(event, step) {
+        event?.stopPropagation();
+        this.outMultiStepSelect.emit({ ...step, callBack: (event) => this.listKeyHidden.set(event) });
+    }
+    handlerDropDownFunctionControl(event) {
+        this.dropDownFunctionControl.set(event);
+    }
+    handlerScrollIntoView() {
+        setTimeout(() => {
+            const selectedStep = this.stepsMulti().findIndex((item) => item.status === 'selected');
+            const indexScroll = selectedStep !== -1 ? selectedStep : this.stepsMulti().length - 1;
+            const { offsetWidth } = this.elementRef() || {};
+            this.stepEl().forEach((element, index) => {
+                if (index === indexScroll) {
+                    if (offsetWidth && offsetWidth - element.nativeElement.offsetLeft < 200) {
+                        this.elementRef()?.scrollTo({ left: element.nativeElement.offsetLeft, behavior: 'smooth' });
+                    }
+                }
+            });
+        }, 1000);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbMultiStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsBreadcrumbMultiStepComponent, isStandalone: true, selector: "libs_ui-components-breadcrumb-multi_step", inputs: { popoverCustomConfig: { classPropertyName: "popoverCustomConfig", publicName: "popoverCustomConfig", isSignal: true, isRequired: false, transformFunction: null }, stepsMulti: { classPropertyName: "stepsMulti", publicName: "stepsMulti", isSignal: true, isRequired: true, transformFunction: null }, configClassMultiStep: { classPropertyName: "configClassMultiStep", publicName: "configClassMultiStep", isSignal: true, isRequired: false, transformFunction: null }, elementRef: { classPropertyName: "elementRef", publicName: "elementRef", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outMultiStepSelect: "outMultiStepSelect" }, viewQueries: [{ propertyName: "stepEl", predicate: ["stepEl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"flex items-center {{ classInclude() || '' }}\"\n  [class.justify-center]=\"mode() === 'center'\"\n  [class.justify-start]=\"mode() === 'left'\"\n  [class.justify-end]=\"mode() === 'right'\"\n  [class.bg-[#ffffff]]=\"backgroundWhite()\"\n  #containerEl>\n  @for (step of stepsMulti(); track step) {\n    <div\n      #stepEl\n      class=\"flex libs-ui-breadcrumb-multi-step\"\n      [class.cursor-default]=\"step.status === 'disabled'\"\n      [class.pointer-events-none]=\"step.status === 'disabled'\"\n      [class.cursor-pointer]=\"step.status !== 'disabled'\">\n      @if (step.type === 'text') {\n        <div (click)=\"handlerLabelEvent($event, $index)\">\n          <ng-container\n            [ngTemplateOutlet]=\"contentEl\"\n            [ngTemplateOutletContext]=\"{ $index, $first, $last, step }\" />\n        </div>\n      } @else {\n        <libs_ui-components-dropdown\n          [isNgContent]=\"true\"\n          [listHiddenInputSearch]=\"true\"\n          [listHasButtonUnSelectOption]=\"step.listHasButtonUnSelectOption\"\n          [listConfig]=\"step.listConfigItem\"\n          [popoverCustomConfig]=\"popoverCustomConfig()\"\n          [listKeysHidden]=\"listKeyHidden() ?? step.listKeysHidden\"\n          [disable]=\"$index | LibsUiComponentsBreadcrumbCheckDisableStepPipe: stepDisable()\"\n          (outShowList)=\"handlerShowList($event, $index)\"\n          (outSelectKey)=\"handlerSelectKey($event, $index)\"\n          (outFunctionsControl)=\"handlerDropDownFunctionControl($event)\">\n          <ng-container\n            [ngTemplateOutlet]=\"contentEl\"\n            [ngTemplateOutletContext]=\"{ $index, $first, $last, step }\" />\n        </libs_ui-components-dropdown>\n      }\n    </div>\n  }\n</div>\n\n<ng-template\n  #contentEl\n  let-index=\"$index\"\n  let-first=\"$first\"\n  let-step=\"step\"\n  let-last=\"$last\">\n  <div class=\"flex items-center\">\n    @if (!first) {\n      <libs_ui-components-breadcrumb-multi_step-arrow_end\n        class=\"libs-ui-breadcrumb-multi-step-normal relative left-[1px] top-0\"\n        [attr.focus]=\"openList() && indexFocus() === index\"\n        [class.active]=\"step.status === 'selected'\"\n        [class.complete]=\"step.status === 'completed'\"\n        [class.disabled]=\"step.status === 'disabled'\"\n        [class.failed]=\"step.status === 'failed'\" />\n    }\n    <div class=\"libs-ui-breadcrumb-multi-step-center flex items-center justify-center libs-ui-font-h6m\">\n      <libs_ui-components-popover\n        [classInclude]=\"'libs-ui-breadcrumb-multi-step-center-popover py-[12px] ' + (configClassMultiStep()?.classInclude || '')\"\n        [type]=\"'text'\"\n        [ignoreShowPopover]=\"true\"\n        [ignoreStopPropagationEvent]=\"true\">\n        <div\n          class=\"libs-ui-font-h6m flex items-center justify-center gap-2 h-[40px]\"\n          [style.max-width.px]=\"configClassMultiStep()?.maxWidth || 200\"\n          [style.width.px]=\"configClassMultiStep()?.width\"\n          [attr.focus]=\"openList() && indexFocus() === index\"\n          [class.active]=\"step.status === 'selected'\"\n          [class.complete]=\"step.status === 'completed'\"\n          [class.disabled]=\"step.status === 'disabled'\"\n          [class.failed]=\"step.status === 'failed'\"\n          [class.rounded-tl-[4px]]=\"first\"\n          [class.rounded-bl-[4px]]=\"first\"\n          [class.pl-[6px]]=\"first\"\n          [class.rounded-tr-[4px]]=\"last\"\n          [class.rounded-br-[4px]]=\"last\"\n          [class.pr-[16px]]=\"last\">\n          <libs_ui-components-popover\n            [classInclude]=\"'text-nowrap pl-[10px] ' + (configClassMultiStep()?.classTitleInclude || 'max-w-[160px]')\"\n            [type]=\"'text'\"\n            [config]=\"step.popover || { maxWidth: 250, direction: 'top', content: step.title | translate }\"\n            [ignoreStopPropagationEvent]=\"true\"\n            [innerHTML]=\"step.title | translate\" />\n          @if (step.type === 'dropdown') {\n            <i\n              [attr.isFocus]=\"openList() && indexFocus() === index\"\n              class=\"libs-ui-icon-move-right rotate-90\"></i>\n          }\n        </div>\n      </libs_ui-components-popover>\n    </div>\n    @if (!last) {\n      <libs_ui-components-breadcrumb-multi_step-arrow_begin\n        class=\"libs-ui-breadcrumb-multi-step-normal relative left-[-1px] top-0\"\n        [attr.focus]=\"openList() && indexFocus() === index\"\n        [class.active]=\"step.status === 'selected'\"\n        [class.complete]=\"step.status === 'completed'\"\n        [class.disabled]=\"step.status === 'disabled'\"\n        [class.failed]=\"step.status === 'failed'\" />\n    }\n  </div>\n</ng-template>\n", styles: [".libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover{color:#6a7383;background-color:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i[focus=true]:after{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i:after{color:#6a7383;background-color:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active>i:after{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i:after{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i[focus=true]:after{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i:after{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i[focus=true]:after{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:after{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete[focus=true]{background-color:#e6faf0!important;color:#00bc62!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed[focus=true]{background-color:#fdeaec!important;color:#ee2d41!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover[focus=true]{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal{fill:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.active{fill:var(--libs-ui-button-other-color-background, #226ff5)}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.complete{fill:#e6faf0}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.complete[focus=true]{fill:#e6faf0!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.failed{fill:#fdeaec}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.failed[focus=true]{fill:#fdeaec!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.disabled{fill:#f8f9fa}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal[focus=true],.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.complete,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.failed{fill:#e9f1fe}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.disabled{fill:#f8f9fa}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.active{fill:var(--libs-ui-button-other-color-background, #226ff5)}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover>i:after{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.complete,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.failed{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active>i:after{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:after{background-color:#f8f9fa;color:#cdd0d6}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LibsUiComponentsBreadcrumbMultiStepArrowBeginComponent, selector: "libs_ui-components-breadcrumb-multi_step-arrow_begin" }, { kind: "component", type: LibsUiComponentsBreadcrumbMultiStepArrowEndComponent, selector: "libs_ui-components-breadcrumb-multi_step-arrow_end" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsDropdownComponent, selector: "libs_ui-components-dropdown", inputs: ["useXssFilter", "popoverElementRefCustom", "classInclude", "ignoreStopPropagationEvent", "flagMouse", "flagMouseContent", "popoverCustomConfig", "isNgContent", "zIndex", "convertItemSelected", "getPopoverItemSelected", "httpRequestDetailItemById", "lengthKeys", "textDisplayWhenNoSelect", "textDisplayWhenMultiSelect", "classIncludeTextDisplayWhenNoSelect", "fieldLabel", "fieldGetLabel", "labelPopoverConfig", "labelPopoverFullWidth", "hasContentUnitRight", "listSearchNoDataTemplateRef", "fieldGetImage", "imageSize", "typeShape", "fieldGetIcon", "fieldGetTextAvatar", "fieldGetColorAvatar", "classAvatarInclude", "getLastTextAfterSpace", "linkImageError", "showError", "showBorderError", "disable", "readonly", "labelConfig", "disableLabel", "listSearchConfig", "isSearchOnline", "listHiddenInputSearch", "listSearchPadding", "listKeySearch", "listDividerClassInclude", "listConfig", "listButtonsOther", "listHasButtonUnSelectOption", "listClickExactly", "listBackgroundCustom", "listMaxItemShow", "listKeySelected", "listMultiKeySelected", "listKeysDisable", "listKeysHidden", "validRequired", "validMaxItemSelected", "changeValidUndefinedResetError", "allowSelectItemMultiple", "focusInputSearch", "onlyEmitDataWhenReset", "resetKeyWhenSelectAllKey", "listConfigHasDivider", "classIncludeIcon", "classIncludeContent", "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", "tabKeyActive", "tabsConfig", "ignoreBorderBottom"], outputs: ["flagMouseChange", "flagMouseContentChange", "lengthKeysChange", "showBorderErrorChange", "listKeySelectedChange", "listMultiKeySelectedChange", "tabKeyActiveChange", "outSelectKey", "outSelectMultiKey", "outFunctionsControl", "outValidEvent", "outChangStageFlagMouse", "outDataChange", "outClickButtonOther", "outShowList", "outChangeTabKeyActive"] }, { kind: "pipe", type: LibsUiComponentsBreadcrumbCheckDisableStepPipe, name: "LibsUiComponentsBreadcrumbCheckDisableStepPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBreadcrumbMultiStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-breadcrumb-multi_step', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        TranslateModule,
+                        NgTemplateOutlet,
+                        LibsUiComponentsBreadcrumbMultiStepArrowBeginComponent,
+                        LibsUiComponentsBreadcrumbMultiStepArrowEndComponent,
+                        LibsUiComponentsPopoverComponent,
+                        LibsUiComponentsDropdownComponent,
+                        LibsUiComponentsBreadcrumbCheckDisableStepPipe,
+                    ], template: "<div\n  class=\"flex items-center {{ classInclude() || '' }}\"\n  [class.justify-center]=\"mode() === 'center'\"\n  [class.justify-start]=\"mode() === 'left'\"\n  [class.justify-end]=\"mode() === 'right'\"\n  [class.bg-[#ffffff]]=\"backgroundWhite()\"\n  #containerEl>\n  @for (step of stepsMulti(); track step) {\n    <div\n      #stepEl\n      class=\"flex libs-ui-breadcrumb-multi-step\"\n      [class.cursor-default]=\"step.status === 'disabled'\"\n      [class.pointer-events-none]=\"step.status === 'disabled'\"\n      [class.cursor-pointer]=\"step.status !== 'disabled'\">\n      @if (step.type === 'text') {\n        <div (click)=\"handlerLabelEvent($event, $index)\">\n          <ng-container\n            [ngTemplateOutlet]=\"contentEl\"\n            [ngTemplateOutletContext]=\"{ $index, $first, $last, step }\" />\n        </div>\n      } @else {\n        <libs_ui-components-dropdown\n          [isNgContent]=\"true\"\n          [listHiddenInputSearch]=\"true\"\n          [listHasButtonUnSelectOption]=\"step.listHasButtonUnSelectOption\"\n          [listConfig]=\"step.listConfigItem\"\n          [popoverCustomConfig]=\"popoverCustomConfig()\"\n          [listKeysHidden]=\"listKeyHidden() ?? step.listKeysHidden\"\n          [disable]=\"$index | LibsUiComponentsBreadcrumbCheckDisableStepPipe: stepDisable()\"\n          (outShowList)=\"handlerShowList($event, $index)\"\n          (outSelectKey)=\"handlerSelectKey($event, $index)\"\n          (outFunctionsControl)=\"handlerDropDownFunctionControl($event)\">\n          <ng-container\n            [ngTemplateOutlet]=\"contentEl\"\n            [ngTemplateOutletContext]=\"{ $index, $first, $last, step }\" />\n        </libs_ui-components-dropdown>\n      }\n    </div>\n  }\n</div>\n\n<ng-template\n  #contentEl\n  let-index=\"$index\"\n  let-first=\"$first\"\n  let-step=\"step\"\n  let-last=\"$last\">\n  <div class=\"flex items-center\">\n    @if (!first) {\n      <libs_ui-components-breadcrumb-multi_step-arrow_end\n        class=\"libs-ui-breadcrumb-multi-step-normal relative left-[1px] top-0\"\n        [attr.focus]=\"openList() && indexFocus() === index\"\n        [class.active]=\"step.status === 'selected'\"\n        [class.complete]=\"step.status === 'completed'\"\n        [class.disabled]=\"step.status === 'disabled'\"\n        [class.failed]=\"step.status === 'failed'\" />\n    }\n    <div class=\"libs-ui-breadcrumb-multi-step-center flex items-center justify-center libs-ui-font-h6m\">\n      <libs_ui-components-popover\n        [classInclude]=\"'libs-ui-breadcrumb-multi-step-center-popover py-[12px] ' + (configClassMultiStep()?.classInclude || '')\"\n        [type]=\"'text'\"\n        [ignoreShowPopover]=\"true\"\n        [ignoreStopPropagationEvent]=\"true\">\n        <div\n          class=\"libs-ui-font-h6m flex items-center justify-center gap-2 h-[40px]\"\n          [style.max-width.px]=\"configClassMultiStep()?.maxWidth || 200\"\n          [style.width.px]=\"configClassMultiStep()?.width\"\n          [attr.focus]=\"openList() && indexFocus() === index\"\n          [class.active]=\"step.status === 'selected'\"\n          [class.complete]=\"step.status === 'completed'\"\n          [class.disabled]=\"step.status === 'disabled'\"\n          [class.failed]=\"step.status === 'failed'\"\n          [class.rounded-tl-[4px]]=\"first\"\n          [class.rounded-bl-[4px]]=\"first\"\n          [class.pl-[6px]]=\"first\"\n          [class.rounded-tr-[4px]]=\"last\"\n          [class.rounded-br-[4px]]=\"last\"\n          [class.pr-[16px]]=\"last\">\n          <libs_ui-components-popover\n            [classInclude]=\"'text-nowrap pl-[10px] ' + (configClassMultiStep()?.classTitleInclude || 'max-w-[160px]')\"\n            [type]=\"'text'\"\n            [config]=\"step.popover || { maxWidth: 250, direction: 'top', content: step.title | translate }\"\n            [ignoreStopPropagationEvent]=\"true\"\n            [innerHTML]=\"step.title | translate\" />\n          @if (step.type === 'dropdown') {\n            <i\n              [attr.isFocus]=\"openList() && indexFocus() === index\"\n              class=\"libs-ui-icon-move-right rotate-90\"></i>\n          }\n        </div>\n      </libs_ui-components-popover>\n    </div>\n    @if (!last) {\n      <libs_ui-components-breadcrumb-multi_step-arrow_begin\n        class=\"libs-ui-breadcrumb-multi-step-normal relative left-[-1px] top-0\"\n        [attr.focus]=\"openList() && indexFocus() === index\"\n        [class.active]=\"step.status === 'selected'\"\n        [class.complete]=\"step.status === 'completed'\"\n        [class.disabled]=\"step.status === 'disabled'\"\n        [class.failed]=\"step.status === 'failed'\" />\n    }\n  </div>\n</ng-template>\n", styles: [".libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover{color:#6a7383;background-color:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i[focus=true]:after{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover>i:after{color:#6a7383;background-color:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active>i:after{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i:after{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete>i[focus=true]:after{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i:after{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i[focus=true]:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed>i[focus=true]:after{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:before,.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:after{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.active{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete{background-color:#e6faf0;color:#00bc62}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.complete[focus=true]{background-color:#e6faf0!important;color:#00bc62!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed{background-color:#fdeaec;color:#ee2d41}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.failed[focus=true]{background-color:#fdeaec!important;color:#ee2d41!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover.disabled{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-center-popover[focus=true]{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal{fill:#e6e7ea}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.active{fill:var(--libs-ui-button-other-color-background, #226ff5)}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.complete{fill:#e6faf0}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.complete[focus=true]{fill:#e6faf0!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.failed{fill:#fdeaec}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.failed[focus=true]{fill:#fdeaec!important}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal.disabled{fill:#f8f9fa}.libs-ui-breadcrumb-multi-step .libs-ui-breadcrumb-multi-step-normal[focus=true],.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.complete,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.failed{fill:#e9f1fe}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.disabled{fill:#f8f9fa}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-normal.active{fill:var(--libs-ui-button-other-color-background, #226ff5)}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover>i:after{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.complete,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.failed{background-color:#e9f1fe;color:#1b59c4}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.active>i:after{background-color:var(--libs-ui-button-other-color-background, #226ff5);color:#fff}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled{background-color:#f8f9fa;color:#cdd0d6}.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:before,.libs-ui-breadcrumb-multi-step:hover .libs-ui-breadcrumb-multi-step-center-popover.disabled>i:after{background-color:#f8f9fa;color:#cdd0d6}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsBreadcrumbComponent, LibsUiComponentsBreadcrumbMultiStepComponent };
+//# sourceMappingURL=libs-ui-components-breadcrumb.mjs.map