@datarailsshared/datarailsshared 1.6.137 → 1.6.141
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/styles/_storybook-styles.scss +2 -2
- package/assets/styles/colors.scss +11 -1
- package/assets/styles/mixins.scss +79 -96
- package/assets/styles/vars.scss +23 -21
- package/datarailsshared-datarailsshared-1.6.141.tgz +0 -0
- package/esm2022/lib/dr-accordion/accordion-item-header.component.mjs +3 -3
- package/esm2022/lib/dr-alert/dr-alert.component.mjs +2 -2
- package/esm2022/lib/dr-avatar/dr-avatar.component.mjs +2 -2
- package/esm2022/lib/dr-badge-status/dr-badge-status.component.mjs +2 -2
- package/esm2022/lib/dr-chat/chat.component.mjs +2 -2
- package/esm2022/lib/dr-chat/dr-chat-alert/dr-chat-alert.component.mjs +2 -2
- package/esm2022/lib/dr-chat/dr-chat-dropped-files/dr-chat-dropped-files.component.mjs +2 -2
- package/esm2022/lib/dr-chat/dr-chat-form-dropdown/dr-chat-form-dropdown.component.mjs +2 -2
- package/esm2022/lib/dr-chat/dr-chat-suggestions/chat-suggestions.component.mjs +2 -2
- package/esm2022/lib/dr-chip/dr-chip.component.mjs +2 -2
- package/esm2022/lib/dr-code-editor/dr-code-editor.component.mjs +2 -2
- package/esm2022/lib/dr-dialog/components/dialog-modal-wrapper/dialog-modal-wrapper.component.mjs +2 -2
- package/esm2022/lib/dr-dialog/components/dialog-wrapper/dialog-wrapper.component.mjs +2 -2
- package/esm2022/lib/dr-dropdown/dr-dropdown-item/dr-dropdown-item.component.mjs +2 -2
- package/esm2022/lib/dr-inputs/button/button.component.mjs +2 -2
- package/esm2022/lib/dr-inputs/checkbox/checkbox.component.mjs +2 -2
- package/esm2022/lib/dr-inputs/date-pickers/dr-date-picker-range/dr-date-picker-range.component.mjs +2 -2
- package/esm2022/lib/dr-inputs/date-pickers/dr-date-picker-with-timeframe/dr-date-picker-with-timeframe.component.mjs +2 -2
- package/esm2022/lib/dr-inputs/date-pickers/week-selector/week-selector.component.mjs +2 -2
- package/esm2022/lib/dr-inputs/dr-input/dr-input.component.mjs +2 -2
- package/esm2022/lib/dr-inputs/dr-link/dr-link.component.mjs +2 -2
- package/esm2022/lib/dr-inputs/dr-select/dr-select.component.mjs +2 -2
- package/esm2022/lib/dr-progress-bar/dr-progress-bar.component.mjs +2 -2
- package/esm2022/lib/dr-toastr/default-toastr/default-toastr.component.mjs +2 -2
- package/esm2022/lib/dr-tooltip/components/tooltip-default/tooltip-default.component.mjs +2 -2
- package/esm2022/lib/dr-tooltip/components/tooltip-info/tooltip-info.component.mjs +2 -2
- package/esm2022/lib/filter-dropdown/filter-dropdown.component.mjs +2 -2
- package/esm2022/lib/separate-table/separate-table.component.mjs +2 -2
- package/esm2022/lib/stepper/stepper.component.mjs +2 -2
- package/fesm2022/datarailsshared-datarailsshared.mjs +58 -58
- package/fesm2022/datarailsshared-datarailsshared.mjs.map +1 -1
- package/package.json +1 -1
- package/datarailsshared-datarailsshared-1.6.137.tgz +0 -0
|
@@ -260,11 +260,11 @@ export class StepperComponent {
|
|
|
260
260
|
i0.ɵɵproperty("ngForOf", ctx.steps);
|
|
261
261
|
i0.ɵɵadvance(1);
|
|
262
262
|
i0.ɵɵproperty("ngIf", (_r1 == null ? null : _r1.scrollWidth) > (_r1 == null ? null : _r1.clientWidth) && ctx.roundWidth((_r1 == null ? null : _r1.scrollLeft) + (_r1 == null ? null : _r1.clientWidth)) < (_r1 == null ? null : _r1.scrollWidth));
|
|
263
|
-
} }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i1.NgSwitch, i1.NgSwitchCase, i2.DrTooltipDirective], styles: ["[_nghost-%COMP%]{font-family:Poppins,sans-serif;display:flex;justify-content:center;height:100%;position:relative}[_nghost-%COMP%] .scroll-section[_ngcontent-%COMP%]{position:absolute;top:0;height:100%;width:108px;display:flex;align-items:center;z-index:10}[_nghost-%COMP%] .scroll-section[_ngcontent-%COMP%] i[_ngcontent-%COMP%]{font-size:24px;color:#2969b0;background:#f3f7ff;border-radius:24px}[_nghost-%COMP%] .scroll-section[_ngcontent-%COMP%] i[_ngcontent-%COMP%]:hover{background:#cde1fb;cursor:pointer}[_nghost-%COMP%] .scroll-section[_ngcontent-%COMP%]:first-child{left:0;padding-left:16px;background:linear-gradient(90deg,#fff 36.08%,#fff0 87.17%)}[_nghost-%COMP%] .scroll-section[_ngcontent-%COMP%]:first-child i[_ngcontent-%COMP%]{transform:rotate(180deg)}[_nghost-%COMP%] .scroll-section[_ngcontent-%COMP%]:last-child{right:0;padding-right:16px;background:linear-gradient(270deg,#fff 36.08%,#fff0 87.17%);justify-content:flex-end}[_nghost-%COMP%] .stepper[_ngcontent-%COMP%]{display:flex;align-items:center;height:100%;width:100%;overflow:auto;scroll-behavior:smooth}[_nghost-%COMP%] .stepper[_ngcontent-%COMP%]::-webkit-scrollbar{display:none}[_nghost-%COMP%] .stepper--disabled[_ngcontent-%COMP%] .step[_ngcontent-%COMP%]:hover{cursor:default}[_nghost-%COMP%] .stepper--disabled[_ngcontent-%COMP%] .step-point[_ngcontent-%COMP%] .ellipse[_ngcontent-%COMP%]{border-color:#bcbcbc}[_nghost-%COMP%] .stepper--disabled[_ngcontent-%COMP%] .step-point[_ngcontent-%COMP%] .pointer[_ngcontent-%COMP%]{color:#fff;background-color:#bcbcbc;cursor:default}[_nghost-%COMP%] .stepper--disabled[_ngcontent-%COMP%] .step-label[_ngcontent-%COMP%]{color:#bcbcbc}[_nghost-%COMP%] .stepper--disabled[_ngcontent-%COMP%] .step-connector[_ngcontent-%COMP%]{background-color:#bcbcbc}[_nghost-%COMP%] .stepper--disabled[_ngcontent-%COMP%] .step-connector[_ngcontent-%COMP%] .progress[_ngcontent-%COMP%]{background-color:#bcbcbc}[_nghost-%COMP%] .stepper--mini[_ngcontent-%COMP%] .step-connector[_ngcontent-%COMP%]{display:none}[_nghost-%COMP%] .stepper--mini-connector[_ngcontent-%COMP%]{flex-grow:1;display:flex;margin:0 8px;background-color:#dfe0e3;height:2px}[_nghost-%COMP%] .stepper--mini-connector[_ngcontent-%COMP%]:last-child{display:none}[_nghost-%COMP%] .stepper--mini[_ngcontent-%COMP%] .step-setup[_ngcontent-%COMP%]{flex-grow:unset}[_nghost-%COMP%] .stepper--mini[_ngcontent-%COMP%] .step-point[_ngcontent-%COMP%]{width:18px!important;height:18px!important}[_nghost-%COMP%] .stepper--mini[_ngcontent-%COMP%] .step-point.active[_ngcontent-%COMP%] .pointer[_ngcontent-%COMP%]{width:12px;height:12px}[_nghost-%COMP%] .stepper--mini[_ngcontent-%COMP%] .step-point.active[_ngcontent-%COMP%] .pointer[_ngcontent-%COMP%] i[_ngcontent-%COMP%]{display:none}[_nghost-%COMP%] .stepper--mini[_ngcontent-%COMP%] .step-point.active[_ngcontent-%COMP%] .ellipse[_ngcontent-%COMP%]{width:18px;height:18px}[_nghost-%COMP%] .stepper--mini[_ngcontent-%COMP%] .step-point[_ngcontent-%COMP%] .pointer[_ngcontent-%COMP%]{width:16px;height:16px}[_nghost-%COMP%] .stepper--mini[_ngcontent-%COMP%] .step-point[_ngcontent-%COMP%] .pointer[_ngcontent-%COMP%] .text[_ngcontent-%COMP%]{font-size:12px
|
|
263
|
+
} }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i1.NgSwitch, i1.NgSwitchCase, i2.DrTooltipDirective], styles: ["[_nghost-%COMP%]{font-family:Poppins,sans-serif;display:flex;justify-content:center;height:100%;position:relative}[_nghost-%COMP%] .scroll-section[_ngcontent-%COMP%]{position:absolute;top:0;height:100%;width:108px;display:flex;align-items:center;z-index:10}[_nghost-%COMP%] .scroll-section[_ngcontent-%COMP%] i[_ngcontent-%COMP%]{font-size:24px;color:#2969b0;background:#f3f7ff;border-radius:24px}[_nghost-%COMP%] .scroll-section[_ngcontent-%COMP%] i[_ngcontent-%COMP%]:hover{background:#cde1fb;cursor:pointer}[_nghost-%COMP%] .scroll-section[_ngcontent-%COMP%]:first-child{left:0;padding-left:16px;background:linear-gradient(90deg,#fff 36.08%,#fff0 87.17%)}[_nghost-%COMP%] .scroll-section[_ngcontent-%COMP%]:first-child i[_ngcontent-%COMP%]{transform:rotate(180deg)}[_nghost-%COMP%] .scroll-section[_ngcontent-%COMP%]:last-child{right:0;padding-right:16px;background:linear-gradient(270deg,#fff 36.08%,#fff0 87.17%);justify-content:flex-end}[_nghost-%COMP%] .stepper[_ngcontent-%COMP%]{display:flex;align-items:center;height:100%;width:100%;overflow:auto;scroll-behavior:smooth}[_nghost-%COMP%] .stepper[_ngcontent-%COMP%]::-webkit-scrollbar{display:none}[_nghost-%COMP%] .stepper--disabled[_ngcontent-%COMP%] .step[_ngcontent-%COMP%]:hover{cursor:default}[_nghost-%COMP%] .stepper--disabled[_ngcontent-%COMP%] .step-point[_ngcontent-%COMP%] .ellipse[_ngcontent-%COMP%]{border-color:#bcbcbc}[_nghost-%COMP%] .stepper--disabled[_ngcontent-%COMP%] .step-point[_ngcontent-%COMP%] .pointer[_ngcontent-%COMP%]{color:#fff;background-color:#bcbcbc;cursor:default}[_nghost-%COMP%] .stepper--disabled[_ngcontent-%COMP%] .step-label[_ngcontent-%COMP%]{color:#bcbcbc}[_nghost-%COMP%] .stepper--disabled[_ngcontent-%COMP%] .step-connector[_ngcontent-%COMP%]{background-color:#bcbcbc}[_nghost-%COMP%] .stepper--disabled[_ngcontent-%COMP%] .step-connector[_ngcontent-%COMP%] .progress[_ngcontent-%COMP%]{background-color:#bcbcbc}[_nghost-%COMP%] .stepper--mini[_ngcontent-%COMP%] .step-connector[_ngcontent-%COMP%]{display:none}[_nghost-%COMP%] .stepper--mini-connector[_ngcontent-%COMP%]{flex-grow:1;display:flex;margin:0 8px;background-color:#dfe0e3;height:2px}[_nghost-%COMP%] .stepper--mini-connector[_ngcontent-%COMP%]:last-child{display:none}[_nghost-%COMP%] .stepper--mini[_ngcontent-%COMP%] .step-setup[_ngcontent-%COMP%]{flex-grow:unset}[_nghost-%COMP%] .stepper--mini[_ngcontent-%COMP%] .step-point[_ngcontent-%COMP%]{width:18px!important;height:18px!important}[_nghost-%COMP%] .stepper--mini[_ngcontent-%COMP%] .step-point.active[_ngcontent-%COMP%] .pointer[_ngcontent-%COMP%]{width:12px;height:12px}[_nghost-%COMP%] .stepper--mini[_ngcontent-%COMP%] .step-point.active[_ngcontent-%COMP%] .pointer[_ngcontent-%COMP%] i[_ngcontent-%COMP%]{display:none}[_nghost-%COMP%] .stepper--mini[_ngcontent-%COMP%] .step-point.active[_ngcontent-%COMP%] .ellipse[_ngcontent-%COMP%]{width:18px;height:18px}[_nghost-%COMP%] .stepper--mini[_ngcontent-%COMP%] .step-point[_ngcontent-%COMP%] .pointer[_ngcontent-%COMP%]{width:16px;height:16px}[_nghost-%COMP%] .stepper--mini[_ngcontent-%COMP%] .step-point[_ngcontent-%COMP%] .pointer[_ngcontent-%COMP%] div.text[_ngcontent-%COMP%]{font-size:12px;line-height:16px;font-weight:400}[_nghost-%COMP%] .stepper--mini[_ngcontent-%COMP%] .step-point[_ngcontent-%COMP%] .pointer[_ngcontent-%COMP%] i[_ngcontent-%COMP%]{font-size:12px!important}[_nghost-%COMP%] .stepper--mini[_ngcontent-%COMP%] .step-label[_ngcontent-%COMP%]{margin-left:8px}[_nghost-%COMP%] .stepper--mini[_ngcontent-%COMP%] .step-label[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{font-size:12px;line-height:16px;font-weight:400}[_nghost-%COMP%] .stepper--mini[_ngcontent-%COMP%] .step-label.active[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{font-weight:600}[_nghost-%COMP%] .step[_ngcontent-%COMP%]{position:relative;display:flex;flex-direction:column;width:120px;align-items:center;flex-shrink:0;flex-grow:1}[_nghost-%COMP%] .step[_ngcontent-%COMP%]:hover{cursor:pointer}[_nghost-%COMP%] .step[_ngcontent-%COMP%]:not(.step-setup) .step-wrapper[_ngcontent-%COMP%]{width:100%}[_nghost-%COMP%] .step[_ngcontent-%COMP%]:not(.step-setup):first-child .step-wrapper[_ngcontent-%COMP%], [_nghost-%COMP%] .step[_ngcontent-%COMP%]:not(.step-setup):first-child .step-point[_ngcontent-%COMP%], [_nghost-%COMP%] .step[_ngcontent-%COMP%]:not(.step-setup):first-child .step-label[_ngcontent-%COMP%], [_nghost-%COMP%] .step[_ngcontent-%COMP%]:not(.step-setup):first-child .step-progress[_ngcontent-%COMP%]{margin-left:8px}[_nghost-%COMP%] .step[_ngcontent-%COMP%]:not(.step-setup):first-child .only-one-step[_ngcontent-%COMP%]{left:0!important;margin-left:25px}[_nghost-%COMP%] .step-point[_ngcontent-%COMP%]{display:flex;justify-content:center;width:100%;height:28px;position:relative;align-items:center}[_nghost-%COMP%] .step-point[_ngcontent-%COMP%] .ellipse[_ngcontent-%COMP%]{width:28px;height:28px;position:absolute;border-radius:50px;border-color:#4646ce;border-style:solid;border-width:2px;background:#fff;display:flex;justify-content:center;align-items:center;z-index:2}[_nghost-%COMP%] .step-point[_ngcontent-%COMP%] .pointer[_ngcontent-%COMP%]{width:24px;height:24px;position:absolute;z-index:4;border-radius:20px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;line-height:1.4;color:#6d6e6f;transition:box-shadow .2s ease-in-out}[_nghost-%COMP%] .step-point[_ngcontent-%COMP%] .pointer[_ngcontent-%COMP%] i[_ngcontent-%COMP%]{color:#fff;font-size:22px}[_nghost-%COMP%] .step-point[_ngcontent-%COMP%] .pointer.blue[_ngcontent-%COMP%]{background:#4646ce}[_nghost-%COMP%] .step-point[_ngcontent-%COMP%] .pointer.gray[_ngcontent-%COMP%]{background:#dfe0e3}[_nghost-%COMP%] .step-point[_ngcontent-%COMP%] .pointer.gray[_ngcontent-%COMP%]:hover{box-shadow:0 0 4px 2px #00000026}[_nghost-%COMP%] .step-point.completed[_ngcontent-%COMP%] -shadowcsshost .step-point.active[_ngcontent-%COMP%]{background:#4646ce}[_nghost-%COMP%] .step-point.active[_ngcontent-%COMP%] .ellipse[_ngcontent-%COMP%]{width:28px;height:28px}[_nghost-%COMP%] .step-point.active[_ngcontent-%COMP%] .pointer[_ngcontent-%COMP%]{width:20px;height:20px}[_nghost-%COMP%] .step-label[_ngcontent-%COMP%]{font-size:14px;line-height:24px;font-weight:400;color:#6d6e6f;display:flex;justify-content:center;overflow:hidden;margin-top:8px}[_nghost-%COMP%] .step-label[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}[_nghost-%COMP%] .step-label.active[_ngcontent-%COMP%]{font-weight:600;color:#333}[_nghost-%COMP%] .step-label[_ngcontent-%COMP%]:last-child{margin-bottom:23px}[_nghost-%COMP%] .step-progress[_ngcontent-%COMP%]{font-size:12px;line-height:16px;font-weight:400;display:flex;justify-content:center}[_nghost-%COMP%] .step-connector[_ngcontent-%COMP%]{background-color:#dfe0e3;height:2px}[_nghost-%COMP%] .step-connector.connector-grand[_ngcontent-%COMP%]{width:calc(100% - 25px)}[_nghost-%COMP%] .step-connector.connector-grand.only-one-step[_ngcontent-%COMP%]{width:calc(100% - 50px)}[_nghost-%COMP%] .step-connector[_ngcontent-%COMP%] .progress[_ngcontent-%COMP%]{background-color:#4646ce;height:2px;width:0}[_nghost-%COMP%] .step-connector--absolute[_ngcontent-%COMP%]{position:absolute;top:14px;width:100%;left:calc(50% + 12px)}[_nghost-%COMP%] .step-connector--inline[_ngcontent-%COMP%]{width:50px;margin-left:32px;margin-right:32px}[_nghost-%COMP%] .step-setup[_ngcontent-%COMP%]{width:auto}[_nghost-%COMP%] .step-setup[_ngcontent-%COMP%] .step-wrapper[_ngcontent-%COMP%]{display:flex;flex-direction:row;align-items:center;width:auto}[_nghost-%COMP%] .step-setup[_ngcontent-%COMP%] + .step-setup[_ngcontent-%COMP%]{margin-left:0}[_nghost-%COMP%] .step-setup[_ngcontent-%COMP%] .step-progress[_ngcontent-%COMP%]{display:none}[_nghost-%COMP%] .step-setup[_ngcontent-%COMP%] .step-label[_ngcontent-%COMP%]{font-size:16px;line-height:24px;font-weight:400;position:relative;transform:none;align-items:center;justify-content:start;margin:0 0 0 8px}[_nghost-%COMP%] .step-setup[_ngcontent-%COMP%] .step-point[_ngcontent-%COMP%]{width:28px;height:28px}[_nghost-%COMP%] .step-setup[_ngcontent-%COMP%] .step-point[_ngcontent-%COMP%] .pointer[_ngcontent-%COMP%] i[_ngcontent-%COMP%]{font-size:22px}[_nghost-%COMP%] .step-setup[_ngcontent-%COMP%] .step-point[_ngcontent-%COMP%] .pointer[_ngcontent-%COMP%] .text[_ngcontent-%COMP%]{font-size:16px} .step-tooltip{font-size:14px;line-height:24px;font-weight:400;max-width:250px;padding:10px 12px} .step-tooltip_name{font-weight:700;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width: 1367px){.stepper[_ngcontent-%COMP%] .step-label[_ngcontent-%COMP%]{font-size:14px}}"] }); }
|
|
264
264
|
}
|
|
265
265
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StepperComponent, [{
|
|
266
266
|
type: Component,
|
|
267
|
-
args: [{ selector: 'dr-stepper', changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"scroll-section\" *ngIf=\"stepper?.scrollLeft !== 0\" (click)=\"scrollLeft()\">\n <i class=\"dr-icon-arrow-right\"></i>\n</div>\n<div #stepper class=\"stepper\" [class.stepper--disabled]=\"disabled\" [class.stepper--mini]=\"mini\">\n <ng-container *ngFor=\"let step of steps; let index = index; last as isLast; first as isFirst\">\n <div\n *ngIf=\"!step.hide\"\n class=\"step\"\n (click)=\"selectStep(step)\"\n [class.step-setup]=\"inlineLabels\"\n [attr.data-analytics]=\"getDataAnalyticsTag(step)\">\n <div\n class=\"step-wrapper\"\n [drTooltip]=\"step.description && tooltip\"\n [drTooltipContext]=\"{ step: step }\"\n [drTooltipPosition]=\"'bottom'\">\n <div\n data-test=\"step_point\"\n class=\"step-point\"\n [class.active]=\"currentStep === step\"\n [class.completed]=\"step.completed\">\n <div *ngIf=\"step === currentStep\" class=\"ellipse\"></div>\n <ng-container [ngSwitch]=\"step.completed\">\n <ng-template [ngSwitchCase]=\"true\">\n <div class=\"pointer blue\">\n <i class=\"dr-icon-approve\"></i>\n </div>\n </ng-template>\n <ng-template [ngSwitchCase]=\"false\">\n <div\n class=\"pointer\"\n [class.gray]=\"step !== currentStep\"\n [ngClass]=\"{ 'blue with-ellipse': step === currentStep }\">\n <div [hidden]=\"step === currentStep || hiddenIndex\" class=\"text\">{{ index + 1 }}</div>\n </div>\n </ng-template>\n </ng-container>\n </div>\n <div\n data-test=\"step_label_name\"\n class=\"step-label\"\n [class.active]=\"currentStep === step\"\n [ngClass]=\"step.completed ? 'completed' : 'uncompleted'\">\n <ng-container\n *ngTemplateOutlet=\"\n stepTextLabelTemplate || defaultStepTextLabel;\n context: { step: step, index: index }\n \"></ng-container>\n </div>\n <ng-container\n *ngIf=\"inlineLabels\"\n [ngTemplateOutlet]=\"connector\"\n [ngTemplateOutletContext]=\"{ index, isLast, step }\">\n </ng-container>\n <span *ngIf=\"step.showProgress\" data-test=\"step_progress\" class=\"step-progress\">\n {{ (step.requiredTasks ? step.completedTasks : step.requiredTasks) + '/' + step.requiredTasks }}\n </span>\n </div>\n <ng-container\n *ngIf=\"!inlineLabels\"\n [ngTemplateOutlet]=\"connector\"\n [ngTemplateOutletContext]=\"{ index, isLast, step }\">\n </ng-container>\n </div>\n <div *ngIf=\"mini\" class=\"stepper--mini-connector\"></div>\n </ng-container>\n</div>\n<div\n (click)=\"scrollRight()\"\n class=\"scroll-section\"\n *ngIf=\"\n stepper?.scrollWidth > stepper?.clientWidth &&\n roundWidth(stepper?.scrollLeft + stepper?.clientWidth) < stepper?.scrollWidth\n \">\n <i class=\"dr-icon-arrow-right\"></i>\n</div>\n\n<ng-template #tooltip let-step=\"step\">\n <div class=\"step-tooltip\">\n <div class=\"step-tooltip_name\">{{ step.name }}</div>\n <div class=\"step-tooltip_description\">{{ step.description }}</div>\n </div>\n</ng-template>\n\n<ng-template #connector let-step=\"step\" let-isLast=\"isLast\" let-index=\"index\">\n <div\n class=\"step-connector\"\n [class.only-one-step]=\"steps.length === 1\"\n [class]=\"'step-connector--' + (!inlineLabels ? 'absolute' : 'inline')\"\n *ngIf=\"steps.length === 1 || !isLast\"\n [style.visibility]=\"withoutConnectors || steps[step.index + 1]?.hide ? 'hidden' : 'unset'\"\n [class.connector-grand]=\"!inlineLabels && (index === 0 || index === steps.length - 2)\">\n <div class=\"progress\" [style.width]=\"getWidth(step)\"></div>\n </div>\n</ng-template>\n\n<ng-template #defaultStepTextLabel let-step=\"step\" let-index=\"index\">\n <span [hidden]=\"hiddenNames\">{{ step.name }}</span>\n</ng-template>\n", styles: [":host{font-family:Poppins,sans-serif;display:flex;justify-content:center;height:100%;position:relative}:host .scroll-section{position:absolute;top:0;height:100%;width:108px;display:flex;align-items:center;z-index:10}:host .scroll-section i{font-size:24px;color:#2969b0;background:#f3f7ff;border-radius:24px}:host .scroll-section i:hover{background:#cde1fb;cursor:pointer}:host .scroll-section:first-child{left:0;padding-left:16px;background:linear-gradient(90deg,#fff 36.08%,#fff0 87.17%)}:host .scroll-section:first-child i{transform:rotate(180deg)}:host .scroll-section:last-child{right:0;padding-right:16px;background:linear-gradient(270deg,#fff 36.08%,#fff0 87.17%);justify-content:flex-end}:host .stepper{display:flex;align-items:center;height:100%;width:100%;overflow:auto;scroll-behavior:smooth}:host .stepper::-webkit-scrollbar{display:none}:host .stepper--disabled .step:hover{cursor:default}:host .stepper--disabled .step-point .ellipse{border-color:#bcbcbc}:host .stepper--disabled .step-point .pointer{color:#fff;background-color:#bcbcbc;cursor:default}:host .stepper--disabled .step-label{color:#bcbcbc}:host .stepper--disabled .step-connector{background-color:#bcbcbc}:host .stepper--disabled .step-connector .progress{background-color:#bcbcbc}:host .stepper--mini .step-connector{display:none}:host .stepper--mini-connector{flex-grow:1;display:flex;margin:0 8px;background-color:#dfe0e3;height:2px}:host .stepper--mini-connector:last-child{display:none}:host .stepper--mini .step-setup{flex-grow:unset}:host .stepper--mini .step-point{width:18px!important;height:18px!important}:host .stepper--mini .step-point.active .pointer{width:12px;height:12px}:host .stepper--mini .step-point.active .pointer i{display:none}:host .stepper--mini .step-point.active .ellipse{width:18px;height:18px}:host .stepper--mini .step-point .pointer{width:16px;height:16px}:host .stepper--mini .step-point .pointer .text{font-size:12px!important;font-weight:500;line-height:20px}:host .stepper--mini .step-point .pointer i{font-size:12px!important}:host .stepper--mini .step-label{margin-left:8px}:host .stepper--mini .step-label span{font-size:12px;font-weight:400;line-height:20px}:host .stepper--mini .step-label.active span{font-weight:600}:host .step{position:relative;display:flex;flex-direction:column;width:120px;align-items:center;flex-shrink:0;flex-grow:1}:host .step:hover{cursor:pointer}:host .step:not(.step-setup) .step-wrapper{width:100%}:host .step:not(.step-setup):first-child .step-wrapper,:host .step:not(.step-setup):first-child .step-point,:host .step:not(.step-setup):first-child .step-label,:host .step:not(.step-setup):first-child .step-progress{margin-left:8px}:host .step:not(.step-setup):first-child .only-one-step{left:0!important;margin-left:25px}:host .step-point{display:flex;justify-content:center;width:100%;height:28px;position:relative;align-items:center}:host .step-point .ellipse{width:28px;height:28px;position:absolute;border-radius:50px;border-color:#4646ce;border-style:solid;border-width:2px;background:#fff;display:flex;justify-content:center;align-items:center;z-index:2}:host .step-point .pointer{width:24px;height:24px;position:absolute;z-index:4;border-radius:20px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;line-height:1.4;color:#6d6e6f;transition:box-shadow .2s ease-in-out}:host .step-point .pointer i{color:#fff;font-size:22px}:host .step-point .pointer.blue{background:#4646ce}:host .step-point .pointer.gray{background:#dfe0e3}:host .step-point .pointer.gray:hover{box-shadow:0 0 4px 2px #00000026}:host .step-point.completed :host .step-point.active{background:#4646ce}:host .step-point.active .ellipse{width:28px;height:28px}:host .step-point.active .pointer{width:20px;height:20px}:host .step-label{font-weight:400;font-size:14px;line-height:22px;line-height:1.5;color:#6d6e6f;display:flex;justify-content:center;overflow:hidden;margin-top:8px}:host .step-label span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host .step-label.active{font-weight:600;color:#333}:host .step-label:last-child{margin-bottom:23px}:host .step-progress{margin-top:3px;font-style:normal;font-weight:400;font-size:12px;line-height:1.4;display:flex;justify-content:center}:host .step-connector{background-color:#dfe0e3;height:2px}:host .step-connector.connector-grand{width:calc(100% - 25px)}:host .step-connector.connector-grand.only-one-step{width:calc(100% - 50px)}:host .step-connector .progress{background-color:#4646ce;height:2px;width:0}:host .step-connector--absolute{position:absolute;top:14px;width:100%;left:calc(50% + 12px)}:host .step-connector--inline{width:50px;margin-left:32px;margin-right:32px}:host .step-setup{width:auto}:host .step-setup .step-wrapper{display:flex;flex-direction:row;align-items:center;width:auto}:host .step-setup+.step-setup{margin-left:0}:host .step-setup .step-progress{display:none}:host .step-setup .step-label{position:relative;transform:none;align-items:center;justify-content:start;margin:0 0 0 8px;font-size:16px}:host .step-setup .step-point{width:28px;height:28px}:host .step-setup .step-point .pointer i{font-size:22px}:host .step-setup .step-point .pointer .text{font-size:16px}::ng-deep .step-tooltip{max-width:250px;font-size:14px;line-height:22px;padding:10px 12px}::ng-deep .step-tooltip_name{font-weight:700;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width: 1367px){.stepper .step-label{font-size:14px}}\n"] }]
|
|
267
|
+
args: [{ selector: 'dr-stepper', changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"scroll-section\" *ngIf=\"stepper?.scrollLeft !== 0\" (click)=\"scrollLeft()\">\n <i class=\"dr-icon-arrow-right\"></i>\n</div>\n<div #stepper class=\"stepper\" [class.stepper--disabled]=\"disabled\" [class.stepper--mini]=\"mini\">\n <ng-container *ngFor=\"let step of steps; let index = index; last as isLast; first as isFirst\">\n <div\n *ngIf=\"!step.hide\"\n class=\"step\"\n (click)=\"selectStep(step)\"\n [class.step-setup]=\"inlineLabels\"\n [attr.data-analytics]=\"getDataAnalyticsTag(step)\">\n <div\n class=\"step-wrapper\"\n [drTooltip]=\"step.description && tooltip\"\n [drTooltipContext]=\"{ step: step }\"\n [drTooltipPosition]=\"'bottom'\">\n <div\n data-test=\"step_point\"\n class=\"step-point\"\n [class.active]=\"currentStep === step\"\n [class.completed]=\"step.completed\">\n <div *ngIf=\"step === currentStep\" class=\"ellipse\"></div>\n <ng-container [ngSwitch]=\"step.completed\">\n <ng-template [ngSwitchCase]=\"true\">\n <div class=\"pointer blue\">\n <i class=\"dr-icon-approve\"></i>\n </div>\n </ng-template>\n <ng-template [ngSwitchCase]=\"false\">\n <div\n class=\"pointer\"\n [class.gray]=\"step !== currentStep\"\n [ngClass]=\"{ 'blue with-ellipse': step === currentStep }\">\n <div [hidden]=\"step === currentStep || hiddenIndex\" class=\"text\">{{ index + 1 }}</div>\n </div>\n </ng-template>\n </ng-container>\n </div>\n <div\n data-test=\"step_label_name\"\n class=\"step-label\"\n [class.active]=\"currentStep === step\"\n [ngClass]=\"step.completed ? 'completed' : 'uncompleted'\">\n <ng-container\n *ngTemplateOutlet=\"\n stepTextLabelTemplate || defaultStepTextLabel;\n context: { step: step, index: index }\n \"></ng-container>\n </div>\n <ng-container\n *ngIf=\"inlineLabels\"\n [ngTemplateOutlet]=\"connector\"\n [ngTemplateOutletContext]=\"{ index, isLast, step }\">\n </ng-container>\n <span *ngIf=\"step.showProgress\" data-test=\"step_progress\" class=\"step-progress\">\n {{ (step.requiredTasks ? step.completedTasks : step.requiredTasks) + '/' + step.requiredTasks }}\n </span>\n </div>\n <ng-container\n *ngIf=\"!inlineLabels\"\n [ngTemplateOutlet]=\"connector\"\n [ngTemplateOutletContext]=\"{ index, isLast, step }\">\n </ng-container>\n </div>\n <div *ngIf=\"mini\" class=\"stepper--mini-connector\"></div>\n </ng-container>\n</div>\n<div\n (click)=\"scrollRight()\"\n class=\"scroll-section\"\n *ngIf=\"\n stepper?.scrollWidth > stepper?.clientWidth &&\n roundWidth(stepper?.scrollLeft + stepper?.clientWidth) < stepper?.scrollWidth\n \">\n <i class=\"dr-icon-arrow-right\"></i>\n</div>\n\n<ng-template #tooltip let-step=\"step\">\n <div class=\"step-tooltip\">\n <div class=\"step-tooltip_name\">{{ step.name }}</div>\n <div class=\"step-tooltip_description\">{{ step.description }}</div>\n </div>\n</ng-template>\n\n<ng-template #connector let-step=\"step\" let-isLast=\"isLast\" let-index=\"index\">\n <div\n class=\"step-connector\"\n [class.only-one-step]=\"steps.length === 1\"\n [class]=\"'step-connector--' + (!inlineLabels ? 'absolute' : 'inline')\"\n *ngIf=\"steps.length === 1 || !isLast\"\n [style.visibility]=\"withoutConnectors || steps[step.index + 1]?.hide ? 'hidden' : 'unset'\"\n [class.connector-grand]=\"!inlineLabels && (index === 0 || index === steps.length - 2)\">\n <div class=\"progress\" [style.width]=\"getWidth(step)\"></div>\n </div>\n</ng-template>\n\n<ng-template #defaultStepTextLabel let-step=\"step\" let-index=\"index\">\n <span [hidden]=\"hiddenNames\">{{ step.name }}</span>\n</ng-template>\n", styles: [":host{font-family:Poppins,sans-serif;display:flex;justify-content:center;height:100%;position:relative}:host .scroll-section{position:absolute;top:0;height:100%;width:108px;display:flex;align-items:center;z-index:10}:host .scroll-section i{font-size:24px;color:#2969b0;background:#f3f7ff;border-radius:24px}:host .scroll-section i:hover{background:#cde1fb;cursor:pointer}:host .scroll-section:first-child{left:0;padding-left:16px;background:linear-gradient(90deg,#fff 36.08%,#fff0 87.17%)}:host .scroll-section:first-child i{transform:rotate(180deg)}:host .scroll-section:last-child{right:0;padding-right:16px;background:linear-gradient(270deg,#fff 36.08%,#fff0 87.17%);justify-content:flex-end}:host .stepper{display:flex;align-items:center;height:100%;width:100%;overflow:auto;scroll-behavior:smooth}:host .stepper::-webkit-scrollbar{display:none}:host .stepper--disabled .step:hover{cursor:default}:host .stepper--disabled .step-point .ellipse{border-color:#bcbcbc}:host .stepper--disabled .step-point .pointer{color:#fff;background-color:#bcbcbc;cursor:default}:host .stepper--disabled .step-label{color:#bcbcbc}:host .stepper--disabled .step-connector{background-color:#bcbcbc}:host .stepper--disabled .step-connector .progress{background-color:#bcbcbc}:host .stepper--mini .step-connector{display:none}:host .stepper--mini-connector{flex-grow:1;display:flex;margin:0 8px;background-color:#dfe0e3;height:2px}:host .stepper--mini-connector:last-child{display:none}:host .stepper--mini .step-setup{flex-grow:unset}:host .stepper--mini .step-point{width:18px!important;height:18px!important}:host .stepper--mini .step-point.active .pointer{width:12px;height:12px}:host .stepper--mini .step-point.active .pointer i{display:none}:host .stepper--mini .step-point.active .ellipse{width:18px;height:18px}:host .stepper--mini .step-point .pointer{width:16px;height:16px}:host .stepper--mini .step-point .pointer div.text{font-size:12px;line-height:16px;font-weight:400}:host .stepper--mini .step-point .pointer i{font-size:12px!important}:host .stepper--mini .step-label{margin-left:8px}:host .stepper--mini .step-label span{font-size:12px;line-height:16px;font-weight:400}:host .stepper--mini .step-label.active span{font-weight:600}:host .step{position:relative;display:flex;flex-direction:column;width:120px;align-items:center;flex-shrink:0;flex-grow:1}:host .step:hover{cursor:pointer}:host .step:not(.step-setup) .step-wrapper{width:100%}:host .step:not(.step-setup):first-child .step-wrapper,:host .step:not(.step-setup):first-child .step-point,:host .step:not(.step-setup):first-child .step-label,:host .step:not(.step-setup):first-child .step-progress{margin-left:8px}:host .step:not(.step-setup):first-child .only-one-step{left:0!important;margin-left:25px}:host .step-point{display:flex;justify-content:center;width:100%;height:28px;position:relative;align-items:center}:host .step-point .ellipse{width:28px;height:28px;position:absolute;border-radius:50px;border-color:#4646ce;border-style:solid;border-width:2px;background:#fff;display:flex;justify-content:center;align-items:center;z-index:2}:host .step-point .pointer{width:24px;height:24px;position:absolute;z-index:4;border-radius:20px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;line-height:1.4;color:#6d6e6f;transition:box-shadow .2s ease-in-out}:host .step-point .pointer i{color:#fff;font-size:22px}:host .step-point .pointer.blue{background:#4646ce}:host .step-point .pointer.gray{background:#dfe0e3}:host .step-point .pointer.gray:hover{box-shadow:0 0 4px 2px #00000026}:host .step-point.completed :host .step-point.active{background:#4646ce}:host .step-point.active .ellipse{width:28px;height:28px}:host .step-point.active .pointer{width:20px;height:20px}:host .step-label{font-size:14px;line-height:24px;font-weight:400;color:#6d6e6f;display:flex;justify-content:center;overflow:hidden;margin-top:8px}:host .step-label span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host .step-label.active{font-weight:600;color:#333}:host .step-label:last-child{margin-bottom:23px}:host .step-progress{font-size:12px;line-height:16px;font-weight:400;display:flex;justify-content:center}:host .step-connector{background-color:#dfe0e3;height:2px}:host .step-connector.connector-grand{width:calc(100% - 25px)}:host .step-connector.connector-grand.only-one-step{width:calc(100% - 50px)}:host .step-connector .progress{background-color:#4646ce;height:2px;width:0}:host .step-connector--absolute{position:absolute;top:14px;width:100%;left:calc(50% + 12px)}:host .step-connector--inline{width:50px;margin-left:32px;margin-right:32px}:host .step-setup{width:auto}:host .step-setup .step-wrapper{display:flex;flex-direction:row;align-items:center;width:auto}:host .step-setup+.step-setup{margin-left:0}:host .step-setup .step-progress{display:none}:host .step-setup .step-label{font-size:16px;line-height:24px;font-weight:400;position:relative;transform:none;align-items:center;justify-content:start;margin:0 0 0 8px}:host .step-setup .step-point{width:28px;height:28px}:host .step-setup .step-point .pointer i{font-size:22px}:host .step-setup .step-point .pointer .text{font-size:16px}::ng-deep .step-tooltip{font-size:14px;line-height:24px;font-weight:400;max-width:250px;padding:10px 12px}::ng-deep .step-tooltip_name{font-weight:700;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width: 1367px){.stepper .step-label{font-size:14px}}\n"] }]
|
|
268
268
|
}], null, { steps: [{
|
|
269
269
|
type: Input
|
|
270
270
|
}], currentStep: [{
|