@koalarx/ui
Version:
Koala UI is a modern and accessible component library designed to speed up interface development in Angular projects. With simple integration and clear documentation, you can easily build robust and visually appealing applications.
89 lines (83 loc) • 4.18 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ElementRef, Directive, input, signal, effect, Injectable } from '@angular/core';
import { generateQuerySelector } from '@koalarx/ui/shared/utils';
class StepGroup {
elementRef = inject((ElementRef));
ngOnInit() {
this.elementRef.nativeElement.classList.add('steps');
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: StepGroup, isStandalone: true, selector: "ul[klStepGroup]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepGroup, decorators: [{
type: Directive,
args: [{ selector: 'ul[klStepGroup]' }]
}] });
class StepItem {
elementRef = inject((ElementRef));
label = input.required();
indexStep = signal(0);
currentStep = input.required();
constructor() {
effect(() => {
const currentStep = this.currentStep();
const stepIndex = this.getStepIndex();
if (stepIndex < currentStep) {
this.elementRef.nativeElement.classList.add('step-primary');
this.elementRef.nativeElement.dataset['content'] = '✓';
}
else if (currentStep === stepIndex) {
this.elementRef.nativeElement.classList.add('step-primary');
delete this.elementRef.nativeElement.dataset['content'];
}
else {
this.elementRef.nativeElement.classList.remove('step-primary');
delete this.elementRef.nativeElement.dataset['content'];
}
});
}
getStepIndex() {
const elementSelector = generateQuerySelector(this.elementRef.nativeElement);
const elements = document.querySelectorAll(elementSelector);
let elementCountPosition = 0;
elements.forEach((el, index) => {
if (el === this.elementRef.nativeElement) {
elementCountPosition = index + 1;
return;
}
});
return elementCountPosition;
}
ngOnInit() {
this.elementRef.nativeElement.classList.add('step');
this.elementRef.nativeElement.innerText = this.label();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: StepItem, isStandalone: true, selector: "li[klStepItem]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: StepItem, decorators: [{
type: Directive,
args: [{ selector: 'li[klStepItem]' }]
}], ctorParameters: () => [] });
class Stepper {
_currentStep = signal(1);
get currentStep() {
return this._currentStep.asReadonly();
}
next() {
this._currentStep.update((step) => step + 1);
}
previous() {
this._currentStep.update((step) => (step > 1 ? step - 1 : step));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Stepper, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Stepper });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Stepper, decorators: [{
type: Injectable
}] });
/**
* Generated bundle index. Do not edit.
*/
export { StepGroup, StepItem, Stepper };
//# sourceMappingURL=koalarx-ui-shared-components-stepper.mjs.map