@obliczeniowo/elementary
Version:
Library made in Angular version 20
217 lines (209 loc) • 33.6 kB
JavaScript
import * as i2$1 from '@obliczeniowo/elementary/icons';
import { IconsModule } from '@obliczeniowo/elementary/icons';
import * as i3 from '@obliczeniowo/elementary/loading';
import { LoadingModule } from '@obliczeniowo/elementary/loading';
import * as i0 from '@angular/core';
import { Input, Component, EventEmitter, Output, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@obliczeniowo/elementary/pie-progress';
import { PieProgressModule } from '@obliczeniowo/elementary/pie-progress';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
class ProgressStepperComponent {
/**
* Steps state objects to display
*/
steps = [];
/**
* Control displaying list of steps.
*
* active-only - display active and failure one only on list
*/
display = 'no-list';
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ProgressStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: ProgressStepperComponent, isStandalone: false, selector: "obl-progress-stepper", inputs: { steps: "steps", display: "display" }, ngImport: i0, template: "<div class=\"steps-diagram\">\n @for (step of steps; track step.name) {\n <obl-pie-progress\n [value]=\"step.progress\"\n [size]=\"22\"\n [display]=\"false\"\n [status]=\"step.status\"\n ></obl-pie-progress>\n @if ($index < steps.length - 1) {\n <div></div>\n }\n }\n</div>\n\n@if (display !== 'no-list') {\n <ul class=\"steps-list\">\n @for (step of steps; track step.name) {\n @if (\n display === 'full-list' ||\n (display === 'active-only' &&\n (step.status === 'progress' || step.status === 'failure'))\n ) {\n <li\n [ngClass]=\"{\n waiting: step.status === 'waiting',\n failure: step.status === 'failure'\n }\"\n >\n <obl-loading-state [status]=\"step.status\"></obl-loading-state>\n {{ step.name }}: {{ step.progress }}%\n </li>\n }\n }\n </ul>\n}", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:host{display:flex;flex-direction:column;padding:10px 0}:host .steps-diagram{display:flex;align-items:center;flex-wrap:nowrap}:host .steps-diagram div{border:solid 1px blue;width:10px}:host obl-pie-progress{margin:0 5px}:host .steps-list{list-style-type:none;margin:10px 0;padding:0;font-size:14px}:host .steps-list li{margin-bottom:5px;display:flex;align-items:center}:host .steps-list li.waiting{color:var(--disabled-color)}:host .steps-list li.failure{color:var(--obl-default-error-color)}:host .steps-list li obl-loading-state{margin:0 5px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.PieProgressComponent, selector: "obl-pie-progress", inputs: ["status", "interactive", "size", "colorFn", "display", "value", "fontSize", "column", "write"], outputs: ["valueChange"] }, { kind: "component", type: i3.LoadingStateComponent, selector: "obl-loading-state", inputs: ["status"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ProgressStepperComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-progress-stepper', standalone: false, template: "<div class=\"steps-diagram\">\n @for (step of steps; track step.name) {\n <obl-pie-progress\n [value]=\"step.progress\"\n [size]=\"22\"\n [display]=\"false\"\n [status]=\"step.status\"\n ></obl-pie-progress>\n @if ($index < steps.length - 1) {\n <div></div>\n }\n }\n</div>\n\n@if (display !== 'no-list') {\n <ul class=\"steps-list\">\n @for (step of steps; track step.name) {\n @if (\n display === 'full-list' ||\n (display === 'active-only' &&\n (step.status === 'progress' || step.status === 'failure'))\n ) {\n <li\n [ngClass]=\"{\n waiting: step.status === 'waiting',\n failure: step.status === 'failure'\n }\"\n >\n <obl-loading-state [status]=\"step.status\"></obl-loading-state>\n {{ step.name }}: {{ step.progress }}%\n </li>\n }\n }\n </ul>\n}", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:host{display:flex;flex-direction:column;padding:10px 0}:host .steps-diagram{display:flex;align-items:center;flex-wrap:nowrap}:host .steps-diagram div{border:solid 1px blue;width:10px}:host obl-pie-progress{margin:0 5px}:host .steps-list{list-style-type:none;margin:10px 0;padding:0;font-size:14px}:host .steps-list li{margin-bottom:5px;display:flex;align-items:center}:host .steps-list li.waiting{color:var(--disabled-color)}:host .steps-list li.failure{color:var(--obl-default-error-color)}:host .steps-list li obl-loading-state{margin:0 5px}\n"] }]
}], propDecorators: { steps: [{
type: Input
}], display: [{
type: Input
}] } });
class ProgressVerticalStepperComponent {
/**
* Steps state objects to display
*/
steps = [];
/**
* Control displaying list of steps.
*
* active-only - display active and failure one only on list
*/
display = 'no-list';
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ProgressVerticalStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: ProgressVerticalStepperComponent, isStandalone: false, selector: "obl-progress-vertical-stepper", inputs: { steps: "steps", display: "display" }, ngImport: i0, template: "<div class=\"steps-diagram\">\n @for (step of steps; track step.name) {\n <div\n class=\"step\"\n [class.failure]=\"step.status === 'failure'\"\n [class.waiting]=\"step.status === 'waiting'\"\n >\n <obl-pie-progress\n [value]=\"step.progress\"\n [size]=\"22\"\n [status]=\"step.status\"\n [display]=\"false\"\n ></obl-pie-progress>\n {{ step.name }}: {{ step.progress }}%\n </div>\n @if ($index < steps.length - 1) {\n <div class=\"separator\"></div>\n }\n }\n</div>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}.steps-diagram .separator{height:10px;width:10px;border-right:2px solid blue;margin:5px 0}.steps-diagram .step{display:flex;align-items:center;font-size:14px}.steps-diagram .step.failure{color:var(--obl-default-error-color)}.steps-diagram .step.waiting{color:var(--disabled-color)}.steps-diagram obl-pie-progress{margin-right:5px}\n"], dependencies: [{ kind: "component", type: i2.PieProgressComponent, selector: "obl-pie-progress", inputs: ["status", "interactive", "size", "colorFn", "display", "value", "fontSize", "column", "write"], outputs: ["valueChange"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ProgressVerticalStepperComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-progress-vertical-stepper', standalone: false, template: "<div class=\"steps-diagram\">\n @for (step of steps; track step.name) {\n <div\n class=\"step\"\n [class.failure]=\"step.status === 'failure'\"\n [class.waiting]=\"step.status === 'waiting'\"\n >\n <obl-pie-progress\n [value]=\"step.progress\"\n [size]=\"22\"\n [status]=\"step.status\"\n [display]=\"false\"\n ></obl-pie-progress>\n {{ step.name }}: {{ step.progress }}%\n </div>\n @if ($index < steps.length - 1) {\n <div class=\"separator\"></div>\n }\n }\n</div>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}.steps-diagram .separator{height:10px;width:10px;border-right:2px solid blue;margin:5px 0}.steps-diagram .step{display:flex;align-items:center;font-size:14px}.steps-diagram .step.failure{color:var(--obl-default-error-color)}.steps-diagram .step.waiting{color:var(--disabled-color)}.steps-diagram obl-pie-progress{margin-right:5px}\n"] }]
}], propDecorators: { steps: [{
type: Input
}], display: [{
type: Input
}] } });
class StepperComponent {
/** steps to display */
steps = [];
/** template for description part */
stepTemplate;
/** template for icon part */
iconTemplate;
/** emit value when clicked (only in inactive, active state) */
clicked = new EventEmitter();
getState(state) {
return { [state]: true };
}
touched = false;
onChange = (steps) => { };
onTouched = () => { };
writeValue(steps) {
this.steps = steps;
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
registerOnValidatorChange(fn) { this.onChange = fn; }
markAsTouched() {
if (!this.touched) {
this.onTouched();
this.touched = true;
}
}
setValue() {
this.markAsTouched();
this.onChange(this.steps);
}
onClick(step) {
if (step.state === 'inactive') {
step.state = 'active';
this.steps = [...this.steps];
this.setValue();
}
if (step.state === 'active') {
this.clicked.emit(step);
this.markAsTouched();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: StepperComponent, isStandalone: false, selector: "obl-stepper", inputs: { steps: "steps", stepTemplate: "stepTemplate", iconTemplate: "iconTemplate" }, outputs: { clicked: "clicked" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: StepperComponent
},
], ngImport: i0, template: "<div class=\"stepper\">\n <div class=\"slide\">\n @for (step of steps; track step.name) {\n @if ($index < steps.length - 1) {\n <div class=\"marker\"></div>\n }\n }\n </div>\n <div class=\"items\">\n @for (step of steps; track step.name) {\n <div\n class=\"item\"\n [tabindex]=\"step.state === 'disabled' ? null : 0\"\n [ngClass]=\"getState(step.state)\"\n [attr.disabled]=\"step.state === 'disabled'\"\n (click)=\"onClick(step)\"\n >\n <div class=\"icon\">\n <ng-container\n *ngTemplateOutlet=\"\n iconTemplate || iconRef;\n context: { $implicit: step }\n \"\n ></ng-container>\n </div>\n <div>\n <ng-container\n *ngTemplateOutlet=\"\n stepTemplate || descriptionRef;\n context: { $implicit: step }\n \"\n ></ng-container>\n </div>\n </div>\n }\n </div>\n</div>\n\n<ng-template let-step #descriptionRef>\n <h2>{{ step.name }}</h2>\n <div class=\"description\">\n {{ step.description }}\n </div>\n</ng-template>\n\n<ng-template let-step #iconRef>\n <obl-icon [name]=\"step.icon\"></obl-icon>\n</ng-template>\n", styles: [".stepper{min-width:100%}.stepper .items{display:flex;flex-wrap:nowrap;justify-content:space-between;width:100%;margin-top:calc(-1 * var(--obl-stepper-icon-size, 40px) / 2);cursor:pointer}.stepper .items h2{font-size:14px;margin:10px 0}.stepper .items .description{font-size:14px}.stepper .items .item{display:flex;flex-direction:column;align-items:center;text-align:center;width:100px}.stepper .items .item .icon{--obl-default-icon-color: white;--obl-icon-width: calc(var(--obl-stepper-icon-size, 40px) * .4);width:var(--obl-stepper-icon-size, 40px);height:var(--obl-stepper-icon-size, 40px);min-height:var(--obl-stepper-icon-size, 40px);min-width:var(--obl-stepper-icon-size, 40px);border-radius:50%;display:flex;justify-content:center;align-items:center}.stepper .items .item.active .icon{background-color:var(--obl-stepper-icon-background, #3b96d3)}.stepper .items .item.inactive .icon{background-color:var(--obl-stepper-icon-background, #8fa9b9)}.stepper .items .item.disabled .icon{background-color:var(--obl-stepper-icon-background, gray)}.slide{margin:calc(var(--obl-stepper-icon-size, 40px) / 2 + 10px) 50px 0 50px;height:var(--obl-stepper-slide-thickness, 4px);background-color:var(--obl-stepper-slide-color, gray);display:flex;justify-content:space-around}.marker{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:20px solid var(--obl-stepper-slide-arrow-color, gray);margin-top:calc(-8px + var(--obl-stepper-slide-thickness, 4px) / 2);margin-left:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IconComponent, selector: "obl-icon", inputs: ["name", "width"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: StepperComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-stepper', providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: StepperComponent
},
], standalone: false, template: "<div class=\"stepper\">\n <div class=\"slide\">\n @for (step of steps; track step.name) {\n @if ($index < steps.length - 1) {\n <div class=\"marker\"></div>\n }\n }\n </div>\n <div class=\"items\">\n @for (step of steps; track step.name) {\n <div\n class=\"item\"\n [tabindex]=\"step.state === 'disabled' ? null : 0\"\n [ngClass]=\"getState(step.state)\"\n [attr.disabled]=\"step.state === 'disabled'\"\n (click)=\"onClick(step)\"\n >\n <div class=\"icon\">\n <ng-container\n *ngTemplateOutlet=\"\n iconTemplate || iconRef;\n context: { $implicit: step }\n \"\n ></ng-container>\n </div>\n <div>\n <ng-container\n *ngTemplateOutlet=\"\n stepTemplate || descriptionRef;\n context: { $implicit: step }\n \"\n ></ng-container>\n </div>\n </div>\n }\n </div>\n</div>\n\n<ng-template let-step #descriptionRef>\n <h2>{{ step.name }}</h2>\n <div class=\"description\">\n {{ step.description }}\n </div>\n</ng-template>\n\n<ng-template let-step #iconRef>\n <obl-icon [name]=\"step.icon\"></obl-icon>\n</ng-template>\n", styles: [".stepper{min-width:100%}.stepper .items{display:flex;flex-wrap:nowrap;justify-content:space-between;width:100%;margin-top:calc(-1 * var(--obl-stepper-icon-size, 40px) / 2);cursor:pointer}.stepper .items h2{font-size:14px;margin:10px 0}.stepper .items .description{font-size:14px}.stepper .items .item{display:flex;flex-direction:column;align-items:center;text-align:center;width:100px}.stepper .items .item .icon{--obl-default-icon-color: white;--obl-icon-width: calc(var(--obl-stepper-icon-size, 40px) * .4);width:var(--obl-stepper-icon-size, 40px);height:var(--obl-stepper-icon-size, 40px);min-height:var(--obl-stepper-icon-size, 40px);min-width:var(--obl-stepper-icon-size, 40px);border-radius:50%;display:flex;justify-content:center;align-items:center}.stepper .items .item.active .icon{background-color:var(--obl-stepper-icon-background, #3b96d3)}.stepper .items .item.inactive .icon{background-color:var(--obl-stepper-icon-background, #8fa9b9)}.stepper .items .item.disabled .icon{background-color:var(--obl-stepper-icon-background, gray)}.slide{margin:calc(var(--obl-stepper-icon-size, 40px) / 2 + 10px) 50px 0 50px;height:var(--obl-stepper-slide-thickness, 4px);background-color:var(--obl-stepper-slide-color, gray);display:flex;justify-content:space-around}.marker{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:20px solid var(--obl-stepper-slide-arrow-color, gray);margin-top:calc(-8px + var(--obl-stepper-slide-thickness, 4px) / 2);margin-left:5px}\n"] }]
}], propDecorators: { steps: [{
type: Input
}], stepTemplate: [{
type: Input
}], iconTemplate: [{
type: Input
}], clicked: [{
type: Output
}] } });
class VerticalStepperComponent extends StepperComponent {
/** steps to display */
steps = [];
/** template for step description */
stepRef;
/** template for icon */
iconRef;
/** emit value when clicked (only in inactive, active state) */
clicked = new EventEmitter();
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: VerticalStepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: VerticalStepperComponent, isStandalone: false, selector: "obl-vertical-stepper", inputs: { steps: "steps", stepRef: "stepRef", iconRef: "iconRef" }, outputs: { clicked: "clicked" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: VerticalStepperComponent
},
], usesInheritance: true, ngImport: i0, template: "<div class=\"stepper\">\n <div class=\"items\">\n @for (step of steps; track step.name) {\n <div\n class=\"item\"\n [tabindex]=\"step.state === 'disabled' ? null : 0\"\n [ngClass]=\"getState(step.state)\"\n [attr.disabled]=\"step.state === 'disabled'\"\n (click)=\"onClick(step)\"\n >\n <div\n class=\"slide\"\n [ngClass]=\"{ first: $first, last: $last }\"\n >\n <div class=\"marker\"></div>\n </div>\n <div class=\"icon\">\n <ng-container\n *ngTemplateOutlet=\"\n iconTemplate || iconRef;\n context: { $implicit: step }\n \"\n ></ng-container>\n </div>\n <div class=\"text\">\n <ng-container\n *ngTemplateOutlet=\"\n stepTemplate || descriptionRef;\n context: { $implicit: step }\n \"\n ></ng-container>\n </div>\n </div>\n }\n </div>\n</div>\n\n<ng-template let-step #descriptionRef>\n <h2>{{ step.name }}</h2>\n <div class=\"description\">\n {{ step.description }}\n </div>\n</ng-template>\n\n<ng-template let-step #iconRef>\n <obl-icon [name]=\"step.icon\"></obl-icon>\n</ng-template>\n", styles: [".stepper{min-width:100%;margin:15px 0 0 calc(var(--obl-stepper-icon-size, 40px) / 2)}.stepper .items{display:flex;flex-wrap:nowrap;flex-direction:column;width:100%;cursor:pointer}.stepper .items h2{font-size:14px;margin:0 0 5px}.stepper .items .description{font-size:14px}.stepper .items .item{display:flex;min-width:100%;min-height:calc(var(--obl-stepper-icon-size, 40px) + 50px)}.stepper .items .item .icon{--obl-default-icon-color: white;--obl-icon-width: calc(var(--obl-stepper-icon-size, 40px) * .4);width:var(--obl-stepper-icon-size, 40px);height:var(--obl-stepper-icon-size, 40px);min-width:var(--obl-stepper-icon-size, 40px);min-height:var(--obl-stepper-icon-size, 40px);border-radius:50%;display:flex;justify-content:center;z-index:1}.stepper .items .item .text{margin-left:10px;padding:0 0 10px}.stepper .items .item.active .icon{background-color:var(--obl-stepper-icon-background, #3b96d3)}.stepper .items .item.inactive .icon{background-color:var(--obl-stepper-icon-background, #8fa9b9)}.stepper .items .item.disabled .icon{background-color:var(--obl-stepper-icon-background, gray)}.slide{margin:0 calc(-1 * var(--obl-stepper-icon-size, 40px) / 2 - var(--obl-stepper-slide-thickness, 4px) / 2) 0 0;width:var(--obl-stepper-slide-thickness, 4px);align-items:stretch;background-color:var(--obl-stepper-slide-color, gray);display:flex;flex-direction:column;align-self:normal;position:relative;z-index:0}.slide.first{margin-top:calc(var(--obl-stepper-icon-size, 40px) / 2 + 5px)}.slide.first .marker{bottom:calc((100% - var(--obl-stepper-icon-size, 40px) / 2) * .25)}.slide.last{max-height:calc(var(--obl-stepper-icon-size, 40px) / 2 + 5px)}.slide:not(.first):not(.last) .marker{margin-top:calc(var(--obl-stepper-icon-size, 40px) + 10px)}.marker{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:20px solid var(--obl-stepper-slide-arrow-color, gray);margin-left:calc(-8px + var(--obl-stepper-slide-thickness, 4px) / 2);position:absolute;left:0;bottom:calc((100% - var(--obl-stepper-icon-size, 40px)) * .25)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IconComponent, selector: "obl-icon", inputs: ["name", "width"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: VerticalStepperComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-vertical-stepper', providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: VerticalStepperComponent
},
], standalone: false, template: "<div class=\"stepper\">\n <div class=\"items\">\n @for (step of steps; track step.name) {\n <div\n class=\"item\"\n [tabindex]=\"step.state === 'disabled' ? null : 0\"\n [ngClass]=\"getState(step.state)\"\n [attr.disabled]=\"step.state === 'disabled'\"\n (click)=\"onClick(step)\"\n >\n <div\n class=\"slide\"\n [ngClass]=\"{ first: $first, last: $last }\"\n >\n <div class=\"marker\"></div>\n </div>\n <div class=\"icon\">\n <ng-container\n *ngTemplateOutlet=\"\n iconTemplate || iconRef;\n context: { $implicit: step }\n \"\n ></ng-container>\n </div>\n <div class=\"text\">\n <ng-container\n *ngTemplateOutlet=\"\n stepTemplate || descriptionRef;\n context: { $implicit: step }\n \"\n ></ng-container>\n </div>\n </div>\n }\n </div>\n</div>\n\n<ng-template let-step #descriptionRef>\n <h2>{{ step.name }}</h2>\n <div class=\"description\">\n {{ step.description }}\n </div>\n</ng-template>\n\n<ng-template let-step #iconRef>\n <obl-icon [name]=\"step.icon\"></obl-icon>\n</ng-template>\n", styles: [".stepper{min-width:100%;margin:15px 0 0 calc(var(--obl-stepper-icon-size, 40px) / 2)}.stepper .items{display:flex;flex-wrap:nowrap;flex-direction:column;width:100%;cursor:pointer}.stepper .items h2{font-size:14px;margin:0 0 5px}.stepper .items .description{font-size:14px}.stepper .items .item{display:flex;min-width:100%;min-height:calc(var(--obl-stepper-icon-size, 40px) + 50px)}.stepper .items .item .icon{--obl-default-icon-color: white;--obl-icon-width: calc(var(--obl-stepper-icon-size, 40px) * .4);width:var(--obl-stepper-icon-size, 40px);height:var(--obl-stepper-icon-size, 40px);min-width:var(--obl-stepper-icon-size, 40px);min-height:var(--obl-stepper-icon-size, 40px);border-radius:50%;display:flex;justify-content:center;z-index:1}.stepper .items .item .text{margin-left:10px;padding:0 0 10px}.stepper .items .item.active .icon{background-color:var(--obl-stepper-icon-background, #3b96d3)}.stepper .items .item.inactive .icon{background-color:var(--obl-stepper-icon-background, #8fa9b9)}.stepper .items .item.disabled .icon{background-color:var(--obl-stepper-icon-background, gray)}.slide{margin:0 calc(-1 * var(--obl-stepper-icon-size, 40px) / 2 - var(--obl-stepper-slide-thickness, 4px) / 2) 0 0;width:var(--obl-stepper-slide-thickness, 4px);align-items:stretch;background-color:var(--obl-stepper-slide-color, gray);display:flex;flex-direction:column;align-self:normal;position:relative;z-index:0}.slide.first{margin-top:calc(var(--obl-stepper-icon-size, 40px) / 2 + 5px)}.slide.first .marker{bottom:calc((100% - var(--obl-stepper-icon-size, 40px) / 2) * .25)}.slide.last{max-height:calc(var(--obl-stepper-icon-size, 40px) / 2 + 5px)}.slide:not(.first):not(.last) .marker{margin-top:calc(var(--obl-stepper-icon-size, 40px) + 10px)}.marker{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:20px solid var(--obl-stepper-slide-arrow-color, gray);margin-left:calc(-8px + var(--obl-stepper-slide-thickness, 4px) / 2);position:absolute;left:0;bottom:calc((100% - var(--obl-stepper-icon-size, 40px)) * .25)}\n"] }]
}], propDecorators: { steps: [{
type: Input
}], stepRef: [{
type: Input
}], iconRef: [{
type: Input
}], clicked: [{
type: Output
}] } });
class StepperModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: StepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: StepperModule, declarations: [ProgressStepperComponent,
ProgressVerticalStepperComponent,
StepperComponent,
VerticalStepperComponent], imports: [CommonModule,
PieProgressModule,
LoadingModule,
IconsModule], exports: [ProgressStepperComponent,
ProgressVerticalStepperComponent,
StepperComponent,
VerticalStepperComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: StepperModule, imports: [CommonModule,
PieProgressModule,
LoadingModule,
IconsModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: StepperModule, decorators: [{
type: NgModule,
args: [{
declarations: [
ProgressStepperComponent,
ProgressVerticalStepperComponent,
StepperComponent,
VerticalStepperComponent
],
imports: [
CommonModule,
PieProgressModule,
LoadingModule,
IconsModule
],
exports: [
ProgressStepperComponent,
ProgressVerticalStepperComponent,
StepperComponent,
VerticalStepperComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ProgressStepperComponent, ProgressVerticalStepperComponent, StepperComponent, StepperModule, VerticalStepperComponent };
//# sourceMappingURL=obliczeniowo-elementary-stepper.mjs.map