@coreui/angular-pro 5.5.0 → 5.5.2
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/fesm2022/coreui-angular-pro.mjs +499 -19
- package/fesm2022/coreui-angular-pro.mjs.map +1 -1
- package/index.d.ts +271 -3
- package/package.json +2 -2
|
@@ -413,7 +413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
413
413
|
}]
|
|
414
414
|
}] });
|
|
415
415
|
|
|
416
|
-
let nextId$
|
|
416
|
+
let nextId$3 = 0;
|
|
417
417
|
class AccordionItemComponent {
|
|
418
418
|
#accordionService = inject(AccordionService);
|
|
419
419
|
/**
|
|
@@ -433,7 +433,7 @@ class AccordionItemComponent {
|
|
|
433
433
|
get visible() {
|
|
434
434
|
return this.itemVisible();
|
|
435
435
|
}
|
|
436
|
-
contentId = `accordion-item-${nextId$
|
|
436
|
+
contentId = `accordion-item-${nextId$3++}`;
|
|
437
437
|
get itemContext() {
|
|
438
438
|
return { $implicit: this.itemVisible() };
|
|
439
439
|
}
|
|
@@ -5623,23 +5623,30 @@ class FormPasswordDirective {
|
|
|
5623
5623
|
#wrapper = this.#renderer.createElement('div');
|
|
5624
5624
|
#actionButtonRef = this.viewContainerRef.createComponent(FormPasswordActionComponent);
|
|
5625
5625
|
#unListen;
|
|
5626
|
+
#afterNextRender = afterNextRender({
|
|
5627
|
+
write: () => {
|
|
5628
|
+
// this fixes RuntimeError: NG0500: During hydration Angular expected <input> but found <div>.
|
|
5629
|
+
// Find more at https://angular.dev/errors/NG0500
|
|
5630
|
+
const nativeElement = this.#hostElement.nativeElement;
|
|
5631
|
+
const parentNode = this.#renderer.parentNode(nativeElement);
|
|
5632
|
+
const wrapper = this.#wrapper;
|
|
5633
|
+
const actionButton = this.#actionButtonRef.location.nativeElement.querySelector('button');
|
|
5634
|
+
this.#renderer.addClass(wrapper, 'form-password');
|
|
5635
|
+
this.#renderer.appendChild(parentNode, wrapper);
|
|
5636
|
+
this.#renderer.insertBefore(parentNode, wrapper, nativeElement);
|
|
5637
|
+
this.#renderer.appendChild(wrapper, nativeElement);
|
|
5638
|
+
this.#renderer.appendChild(wrapper, actionButton);
|
|
5639
|
+
this.#renderer.removeChild(wrapper, this.#actionButtonRef.location.nativeElement);
|
|
5640
|
+
this.#addFloatingLabel();
|
|
5641
|
+
}
|
|
5642
|
+
});
|
|
5626
5643
|
ngOnInit() {
|
|
5627
|
-
const nativeElement = this.#hostElement.nativeElement;
|
|
5628
|
-
const parentNode = this.#renderer.parentNode(nativeElement);
|
|
5629
|
-
const wrapper = this.#wrapper;
|
|
5630
5644
|
const actionButton = this.#actionButtonRef.location.nativeElement.querySelector('button');
|
|
5631
|
-
this.#renderer.addClass(wrapper, 'form-password');
|
|
5632
|
-
this.#renderer.appendChild(parentNode, wrapper);
|
|
5633
|
-
this.#renderer.insertBefore(parentNode, wrapper, nativeElement);
|
|
5634
|
-
this.#renderer.appendChild(wrapper, nativeElement);
|
|
5635
|
-
this.#renderer.appendChild(wrapper, actionButton);
|
|
5636
|
-
this.#renderer.removeChild(wrapper, this.#actionButtonRef.location.nativeElement);
|
|
5637
|
-
this.#addFloatingLabel();
|
|
5638
5645
|
this.#unListen = this.#renderer.listen(actionButton, 'click', () => {
|
|
5639
5646
|
this.#passwordVisible.update((value) => !value);
|
|
5640
5647
|
});
|
|
5641
5648
|
this.#focusMonitor
|
|
5642
|
-
.monitor(wrapper, true)
|
|
5649
|
+
.monitor(this.#wrapper, true)
|
|
5643
5650
|
.pipe(distinctUntilChanged(), takeUntilDestroyed(this.#destroyRef))
|
|
5644
5651
|
.subscribe((origin) => {
|
|
5645
5652
|
this.#passwordVisible.update((value) => (origin ? value : false));
|
|
@@ -11647,7 +11654,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
11647
11654
|
}]
|
|
11648
11655
|
}] });
|
|
11649
11656
|
|
|
11650
|
-
let nextId$
|
|
11657
|
+
let nextId$2 = 0;
|
|
11651
11658
|
class OffcanvasComponent {
|
|
11652
11659
|
#document = inject(DOCUMENT);
|
|
11653
11660
|
#platformId = inject(PLATFORM_ID);
|
|
@@ -11682,7 +11689,7 @@ class OffcanvasComponent {
|
|
|
11682
11689
|
* @since 4.3.10
|
|
11683
11690
|
*/
|
|
11684
11691
|
responsive = input(true);
|
|
11685
|
-
id = input(`offcanvas-${this.placement()}-${nextId$
|
|
11692
|
+
id = input(`offcanvas-${this.placement()}-${nextId$2++}`);
|
|
11686
11693
|
/**
|
|
11687
11694
|
* Default role for offcanvas. [docs]
|
|
11688
11695
|
* @return string
|
|
@@ -12649,7 +12656,7 @@ class ProgressComponent {
|
|
|
12649
12656
|
}
|
|
12650
12657
|
stacked = this.#progressService.stacked;
|
|
12651
12658
|
percent = this.#progressService.percent;
|
|
12652
|
-
|
|
12659
|
+
barValue = this.#progressService.value;
|
|
12653
12660
|
contentProgressBars = contentChildren(ProgressBarComponent);
|
|
12654
12661
|
/**
|
|
12655
12662
|
* Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly.
|
|
@@ -12678,7 +12685,7 @@ class ProgressComponent {
|
|
|
12678
12685
|
return !!height ? `${height}px` : (this.#hostElement?.nativeElement?.style?.height ?? undefined);
|
|
12679
12686
|
});
|
|
12680
12687
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12681
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ProgressComponent, isStandalone: true, selector: "c-progress", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, thin: { classPropertyName: "thin", publicName: "thin", isSignal: true, isRequired: false, transformFunction: null }, white: { classPropertyName: "white", publicName: "white", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.height": "hostStyle()" }, classAttribute: "progress" }, providers: [ProgressService], queries: [{ propertyName: "contentProgressBars", predicate: ProgressBarComponent, isSignal: true }], exportAs: ["cProgress"], hostDirectives: [{ directive: ProgressBarDirective, inputs: ["animated", "animated", "color", "color", "max", "max", "role", "role", "value", "value", "variant", "variant"] }], ngImport: i0, template: "@if (contentProgressBars()?.length) {\n <ng-container *ngTemplateOutlet=\"defaultContent\" />\n} @else {\n @let pbd = progressBarDirective;\n <c-progress-bar [animated]=\"pbd?.animated()\" [variant]=\"pbd?.variant()\" [color]=\"pbd?.color()\" [value]=\"
|
|
12688
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ProgressComponent, isStandalone: true, selector: "c-progress", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, thin: { classPropertyName: "thin", publicName: "thin", isSignal: true, isRequired: false, transformFunction: null }, white: { classPropertyName: "white", publicName: "white", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.height": "hostStyle()" }, classAttribute: "progress" }, providers: [ProgressService], queries: [{ propertyName: "contentProgressBars", predicate: ProgressBarComponent, isSignal: true }], exportAs: ["cProgress"], hostDirectives: [{ directive: ProgressBarDirective, inputs: ["animated", "animated", "color", "color", "max", "max", "role", "role", "value", "value", "variant", "variant"] }], ngImport: i0, template: "@if (contentProgressBars()?.length) {\n <ng-container *ngTemplateOutlet=\"defaultContent\" />\n} @else {\n @let pbd = progressBarDirective;\n <c-progress-bar [animated]=\"pbd?.animated()\" [variant]=\"pbd?.variant()\" [color]=\"pbd?.color()\" [value]=\"barValue()\">\n <ng-container *ngTemplateOutlet=\"defaultContent\" />\n </c-progress-bar>\n}\n\n<ng-template #defaultContent>\n <ng-content />\n</ng-template>\n\n", styles: [":host-context(.progress-stacked).progress{transition:var(--cui-progress-bar-transition)}\n"], dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "c-progress-bar" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
12682
12689
|
}
|
|
12683
12690
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ProgressComponent, decorators: [{
|
|
12684
12691
|
type: Component,
|
|
@@ -12691,7 +12698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
12691
12698
|
class: 'progress',
|
|
12692
12699
|
'[class]': 'hostClasses()',
|
|
12693
12700
|
'[style.height]': 'hostStyle()'
|
|
12694
|
-
}, providers: [ProgressService], template: "@if (contentProgressBars()?.length) {\n <ng-container *ngTemplateOutlet=\"defaultContent\" />\n} @else {\n @let pbd = progressBarDirective;\n <c-progress-bar [animated]=\"pbd?.animated()\" [variant]=\"pbd?.variant()\" [color]=\"pbd?.color()\" [value]=\"
|
|
12701
|
+
}, providers: [ProgressService], template: "@if (contentProgressBars()?.length) {\n <ng-container *ngTemplateOutlet=\"defaultContent\" />\n} @else {\n @let pbd = progressBarDirective;\n <c-progress-bar [animated]=\"pbd?.animated()\" [variant]=\"pbd?.variant()\" [color]=\"pbd?.color()\" [value]=\"barValue()\">\n <ng-container *ngTemplateOutlet=\"defaultContent\" />\n </c-progress-bar>\n}\n\n<ng-template #defaultContent>\n <ng-content />\n</ng-template>\n\n", styles: [":host-context(.progress-stacked).progress{transition:var(--cui-progress-bar-transition)}\n"] }]
|
|
12695
12702
|
}], ctorParameters: () => [] });
|
|
12696
12703
|
|
|
12697
12704
|
class ProgressModule {
|
|
@@ -16421,6 +16428,479 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
16421
16428
|
}]
|
|
16422
16429
|
}] });
|
|
16423
16430
|
|
|
16431
|
+
class StepperStepComponent {
|
|
16432
|
+
static ngAcceptInputType_disabled;
|
|
16433
|
+
static ngAcceptInputType_optional;
|
|
16434
|
+
static ngAcceptInputType_editable;
|
|
16435
|
+
/**
|
|
16436
|
+
* ViewContainerRef to render the step content.
|
|
16437
|
+
* This allows dynamic rendering of templates within the step.
|
|
16438
|
+
*/
|
|
16439
|
+
viewContainerRef = inject(ViewContainerRef);
|
|
16440
|
+
/**
|
|
16441
|
+
* Whether the step is disabled.
|
|
16442
|
+
* @return boolean
|
|
16443
|
+
* @default false
|
|
16444
|
+
*/
|
|
16445
|
+
disabled = input(false, { transform: booleanAttribute });
|
|
16446
|
+
/**
|
|
16447
|
+
* Unique identifier for the step.
|
|
16448
|
+
* @return string
|
|
16449
|
+
* @default undefined
|
|
16450
|
+
*/
|
|
16451
|
+
id = input();
|
|
16452
|
+
/**
|
|
16453
|
+
* Optional indicator to display in the step.
|
|
16454
|
+
* Can be a string or a TemplateRef for custom icons.
|
|
16455
|
+
* @return string | TemplateRef<any>
|
|
16456
|
+
* @default (step index will be used if not provided)
|
|
16457
|
+
*/
|
|
16458
|
+
indicator = input();
|
|
16459
|
+
/**
|
|
16460
|
+
* Context for the indicator template.
|
|
16461
|
+
* If `indicator` is a TemplateRef, this context will be passed to it.
|
|
16462
|
+
* @return unknown
|
|
16463
|
+
* @default undefined
|
|
16464
|
+
*/
|
|
16465
|
+
indicatorCtx = input();
|
|
16466
|
+
/**
|
|
16467
|
+
* Label for the step, which is required.
|
|
16468
|
+
* Can be a string or a TemplateRef for custom labels.
|
|
16469
|
+
* @return string | TemplateRef<any>
|
|
16470
|
+
*/
|
|
16471
|
+
label = input.required();
|
|
16472
|
+
/**
|
|
16473
|
+
* Context for the label template.
|
|
16474
|
+
* If `label` is a TemplateRef, this context will be passed to it.
|
|
16475
|
+
* @return unknown
|
|
16476
|
+
* @default undefined
|
|
16477
|
+
*/
|
|
16478
|
+
labelCtx = input();
|
|
16479
|
+
/**
|
|
16480
|
+
* Whether the step is valid.
|
|
16481
|
+
* This can be used to indicate if the step has been completed successfully.
|
|
16482
|
+
* @return boolean | undefined | null
|
|
16483
|
+
* @default undefined
|
|
16484
|
+
*/
|
|
16485
|
+
valid = input();
|
|
16486
|
+
/**
|
|
16487
|
+
* Whether the step is editable.
|
|
16488
|
+
* If true, the step can be modified by the user.
|
|
16489
|
+
* @return boolean
|
|
16490
|
+
* @default true
|
|
16491
|
+
* todo - implement editable functionality
|
|
16492
|
+
*/
|
|
16493
|
+
editable = input(true, { transform: booleanAttribute });
|
|
16494
|
+
/**
|
|
16495
|
+
* Whether the step is optional.
|
|
16496
|
+
* If true, the step does not need to be completed for the overall process to succeed.
|
|
16497
|
+
* @return boolean
|
|
16498
|
+
* @default false
|
|
16499
|
+
* todo - implement optional functionality
|
|
16500
|
+
*/
|
|
16501
|
+
optional = input(false, { transform: booleanAttribute });
|
|
16502
|
+
/**
|
|
16503
|
+
* Template reference for the content of the step.
|
|
16504
|
+
* This is where the main content of the step will be rendered.
|
|
16505
|
+
*/
|
|
16506
|
+
templateRef = viewChild.required('contentTpl', { read: TemplateRef });
|
|
16507
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StepperStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16508
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.3", type: StepperStepComponent, isStandalone: true, selector: "c-stepper-step", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, indicatorCtx: { classPropertyName: "indicatorCtx", publicName: "indicatorCtx", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, labelCtx: { classPropertyName: "labelCtx", publicName: "labelCtx", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "{ display: \"none\" }" } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["contentTpl"], descendants: true, read: TemplateRef, isSignal: true }], exportAs: ["cStepperStep"], ngImport: i0, template: `
|
|
16509
|
+
<ng-template #contentTpl>
|
|
16510
|
+
<ng-content />
|
|
16511
|
+
</ng-template>
|
|
16512
|
+
`, isInline: true });
|
|
16513
|
+
}
|
|
16514
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StepperStepComponent, decorators: [{
|
|
16515
|
+
type: Component,
|
|
16516
|
+
args: [{
|
|
16517
|
+
selector: 'c-stepper-step',
|
|
16518
|
+
exportAs: 'cStepperStep',
|
|
16519
|
+
template: `
|
|
16520
|
+
<ng-template #contentTpl>
|
|
16521
|
+
<ng-content />
|
|
16522
|
+
</ng-template>
|
|
16523
|
+
`,
|
|
16524
|
+
host: {
|
|
16525
|
+
'[style]': '{ display: "none" }'
|
|
16526
|
+
}
|
|
16527
|
+
}]
|
|
16528
|
+
}] });
|
|
16529
|
+
|
|
16530
|
+
class StepButtonDirective {
|
|
16531
|
+
hostElement = inject(ElementRef);
|
|
16532
|
+
focus(origin) {
|
|
16533
|
+
this.hostElement.nativeElement.focus();
|
|
16534
|
+
}
|
|
16535
|
+
get disabled() {
|
|
16536
|
+
return this.hostElement.nativeElement.disabled;
|
|
16537
|
+
}
|
|
16538
|
+
getLabel() {
|
|
16539
|
+
return this.hostElement.nativeElement.innerText;
|
|
16540
|
+
}
|
|
16541
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StepButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
16542
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: StepButtonDirective, isStandalone: true, selector: "button[cStepButton]", exportAs: ["cStepButton"], ngImport: i0 });
|
|
16543
|
+
}
|
|
16544
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StepButtonDirective, decorators: [{
|
|
16545
|
+
type: Directive,
|
|
16546
|
+
args: [{
|
|
16547
|
+
selector: 'button[cStepButton]',
|
|
16548
|
+
exportAs: 'cStepButton'
|
|
16549
|
+
}]
|
|
16550
|
+
}] });
|
|
16551
|
+
|
|
16552
|
+
let nextId$1 = 0;
|
|
16553
|
+
class StepperComponent {
|
|
16554
|
+
static ngAcceptInputType_defaultActiveStepIndex;
|
|
16555
|
+
static ngAcceptInputType_linear;
|
|
16556
|
+
static ngAcceptInputType_validation;
|
|
16557
|
+
#destroyRef = inject(DestroyRef);
|
|
16558
|
+
/**
|
|
16559
|
+
* Currently active step index
|
|
16560
|
+
* @returns number
|
|
16561
|
+
* @default 0
|
|
16562
|
+
*/
|
|
16563
|
+
activeStepIndexInput = input(undefined, { alias: 'activeStepIndex' });
|
|
16564
|
+
/**
|
|
16565
|
+
* Linked signal for the active step index.
|
|
16566
|
+
* This signal updates based on the input value and emits changes.
|
|
16567
|
+
*/
|
|
16568
|
+
activeStepIndex = linkedSignal({
|
|
16569
|
+
source: this.activeStepIndexInput,
|
|
16570
|
+
computation: (newIndex, previous) => {
|
|
16571
|
+
if (previous === undefined && newIndex === undefined) {
|
|
16572
|
+
return this.defaultActiveStepIndex();
|
|
16573
|
+
}
|
|
16574
|
+
const prevValue = previous?.value ?? newIndex ?? this.defaultActiveStepIndex();
|
|
16575
|
+
if (previous?.source === undefined) {
|
|
16576
|
+
this.activeStepIndexChange.emit(prevValue);
|
|
16577
|
+
return prevValue;
|
|
16578
|
+
}
|
|
16579
|
+
if (this.isStepOutOfScope(newIndex ?? -1)) {
|
|
16580
|
+
this.activeStepIndexChange.emit(prevValue);
|
|
16581
|
+
return prevValue;
|
|
16582
|
+
}
|
|
16583
|
+
if (!this.isStepValid(prevValue)) {
|
|
16584
|
+
this.activeStepIndexChange.emit(prevValue);
|
|
16585
|
+
return prevValue;
|
|
16586
|
+
}
|
|
16587
|
+
return newIndex ?? this.defaultActiveStepIndex();
|
|
16588
|
+
}
|
|
16589
|
+
});
|
|
16590
|
+
#activeStepIdxEffect = effect(() => {
|
|
16591
|
+
const activeStepIndex = this.activeStepIndex() ?? untracked(this.defaultActiveStepIndex);
|
|
16592
|
+
if (this.#focusKeyManagerInit()) {
|
|
16593
|
+
const focusManager = this.#focusKeyManager;
|
|
16594
|
+
if (this.linear() && activeStepIndex > (focusManager?.activeItemIndex ?? -1)) {
|
|
16595
|
+
focusManager?.setNextItemActive();
|
|
16596
|
+
}
|
|
16597
|
+
else if (focusManager?.activeItemIndex !== activeStepIndex) {
|
|
16598
|
+
focusManager?.setActiveItem(activeStepIndex);
|
|
16599
|
+
}
|
|
16600
|
+
else {
|
|
16601
|
+
focusManager?.updateActiveItem(activeStepIndex);
|
|
16602
|
+
}
|
|
16603
|
+
}
|
|
16604
|
+
});
|
|
16605
|
+
/**
|
|
16606
|
+
* Initial active step index
|
|
16607
|
+
* @return number
|
|
16608
|
+
* @default 0
|
|
16609
|
+
*/
|
|
16610
|
+
defaultActiveStepIndex = input(0, { transform: numberAttribute });
|
|
16611
|
+
/**
|
|
16612
|
+
* Unique identifier for the Stepper component.
|
|
16613
|
+
* If not provided, a default ID will be generated.
|
|
16614
|
+
* @return string
|
|
16615
|
+
* @default 'stepper-<nextId>'
|
|
16616
|
+
*/
|
|
16617
|
+
idInput = input(undefined, { alias: 'id' });
|
|
16618
|
+
/**
|
|
16619
|
+
* Unique identifier for the Stepper component.
|
|
16620
|
+
* If `idInput` is not provided, a default ID will be generated.
|
|
16621
|
+
* @return string
|
|
16622
|
+
*/
|
|
16623
|
+
id = computed(() => this.idInput() ?? `stepper-${nextId$1++}`);
|
|
16624
|
+
/**
|
|
16625
|
+
* Layout orientation
|
|
16626
|
+
* - `'horizontal'`: Step indicators and content are placed horizontally (default).
|
|
16627
|
+
* - `'vertical'`: Step indicators and content are stacked vertically.
|
|
16628
|
+
*
|
|
16629
|
+
* Choose `'vertical'` layout for mobile or narrow designs.
|
|
16630
|
+
* @return 'horizontal' | 'vertical'
|
|
16631
|
+
* @default 'horizontal'
|
|
16632
|
+
*/
|
|
16633
|
+
layout = input('horizontal');
|
|
16634
|
+
/**
|
|
16635
|
+
* Enforces linear progression (cannot skip steps).
|
|
16636
|
+
* - `true`: Users must complete steps sequentially.
|
|
16637
|
+
* - `false`: Users can jump freely between steps.
|
|
16638
|
+
* @return boolean
|
|
16639
|
+
* @default true
|
|
16640
|
+
*/
|
|
16641
|
+
linear = input(true, { transform: booleanAttribute });
|
|
16642
|
+
/**
|
|
16643
|
+
* Layout of the step indicator (icon and label)
|
|
16644
|
+
* - `'vertical'` – Places the label below the indicator icon.
|
|
16645
|
+
* - `'horizontal'` – Places the label beside the indicator icon (default).
|
|
16646
|
+
* This prop has no effect when `layout="vertical"` is used.
|
|
16647
|
+
* @return 'vertical' | 'horizontal'
|
|
16648
|
+
* @default 'horizontal'
|
|
16649
|
+
*/
|
|
16650
|
+
stepButtonLayout = input('horizontal');
|
|
16651
|
+
/**
|
|
16652
|
+
* Enforces validation of steps.
|
|
16653
|
+
* Each step must be valid before advancing to the next.
|
|
16654
|
+
* @return boolean
|
|
16655
|
+
* @default false
|
|
16656
|
+
*/
|
|
16657
|
+
validation = input(false, { transform: booleanAttribute });
|
|
16658
|
+
/**
|
|
16659
|
+
* Event fired when the user completes the last step of the Form Wizard.
|
|
16660
|
+
* Use this to trigger a submit action or redirect after the final step.
|
|
16661
|
+
* @return boolean
|
|
16662
|
+
*/
|
|
16663
|
+
finished = output();
|
|
16664
|
+
/**
|
|
16665
|
+
* Event fired when the user triggers the reset() action.
|
|
16666
|
+
* Use this to reset or clear related form data.
|
|
16667
|
+
* @return void
|
|
16668
|
+
*/
|
|
16669
|
+
// eslint-disable-next-line @angular-eslint/no-output-on-prefix
|
|
16670
|
+
onReset = output();
|
|
16671
|
+
/**
|
|
16672
|
+
* Indicates if the Stepper is currently resetting.
|
|
16673
|
+
* This is set to `true` when the reset() method is called.
|
|
16674
|
+
* @return boolean
|
|
16675
|
+
*/
|
|
16676
|
+
resetting = signal(false);
|
|
16677
|
+
/**
|
|
16678
|
+
* Event fired when the active step changes in the Angular Stepper component.
|
|
16679
|
+
* @return number
|
|
16680
|
+
*/
|
|
16681
|
+
activeStepIndexChange = output();
|
|
16682
|
+
/**
|
|
16683
|
+
* Event fired after a validation check completes for a specific step in the Form Wizard.
|
|
16684
|
+
* Receives an object with the step index and the validation result (`true` or `false`).
|
|
16685
|
+
* Useful for custom validation handling across multistep forms.
|
|
16686
|
+
* todo - implement validation logic
|
|
16687
|
+
*/
|
|
16688
|
+
// readonly stepValidationComplete = output<StepperStepValidationResult>();
|
|
16689
|
+
stepsContent = contentChildren(StepperStepComponent, { descendants: true });
|
|
16690
|
+
steps = computed(() => {
|
|
16691
|
+
const stepsContent = this.stepsContent();
|
|
16692
|
+
return stepsContent.map((step, index) => {
|
|
16693
|
+
const { disabled, editable, id, indicator, indicatorCtx, label, labelCtx, optional, templateRef, valid } = {
|
|
16694
|
+
...step
|
|
16695
|
+
};
|
|
16696
|
+
return {
|
|
16697
|
+
templateRef: templateRef(),
|
|
16698
|
+
disabled: disabled(),
|
|
16699
|
+
editable: editable(),
|
|
16700
|
+
id: `${id() ?? this.id()}-step-${index}`,
|
|
16701
|
+
indicator: indicator() ?? index + 1,
|
|
16702
|
+
indicatorRef: indicator() instanceof TemplateRef ? indicator() : undefined,
|
|
16703
|
+
indicatorCtx: indicatorCtx() ?? {},
|
|
16704
|
+
label: label(),
|
|
16705
|
+
labelRef: label() instanceof TemplateRef ? label() : undefined,
|
|
16706
|
+
labelCtx: labelCtx() ?? {},
|
|
16707
|
+
optional: optional(),
|
|
16708
|
+
valid: valid()
|
|
16709
|
+
};
|
|
16710
|
+
});
|
|
16711
|
+
});
|
|
16712
|
+
/**
|
|
16713
|
+
* Returns the number of steps in the Stepper.
|
|
16714
|
+
* This is useful for determining how many steps are available.
|
|
16715
|
+
* @return number
|
|
16716
|
+
*/
|
|
16717
|
+
stepsCount = computed(() => {
|
|
16718
|
+
return this.steps().length;
|
|
16719
|
+
});
|
|
16720
|
+
/**
|
|
16721
|
+
* Indicates if the Stepper is currently finishing.
|
|
16722
|
+
* This is set to `true` when the finish() method is called and all steps are valid.
|
|
16723
|
+
* @return boolean
|
|
16724
|
+
*/
|
|
16725
|
+
finishing = signal(false);
|
|
16726
|
+
#isFinishedEffect = effect(() => {
|
|
16727
|
+
this.finished.emit(this.finishing());
|
|
16728
|
+
});
|
|
16729
|
+
#focusKeyManager;
|
|
16730
|
+
#focusKeyChange$;
|
|
16731
|
+
#focusKeyManagerInit = signal(false);
|
|
16732
|
+
stepButtons = viewChildren(StepButtonDirective);
|
|
16733
|
+
#stepButtonEffect = effect(() => {
|
|
16734
|
+
if (untracked(this.#focusKeyManagerInit)) {
|
|
16735
|
+
return;
|
|
16736
|
+
}
|
|
16737
|
+
const layout = this.layout();
|
|
16738
|
+
const stepButtons = this.stepButtons();
|
|
16739
|
+
if (stepButtons.length === 0) {
|
|
16740
|
+
return;
|
|
16741
|
+
}
|
|
16742
|
+
const isVertical = layout === 'vertical';
|
|
16743
|
+
this.#focusKeyManager = new FocusKeyManager(stepButtons)
|
|
16744
|
+
.skipPredicate((item) => item.disabled)
|
|
16745
|
+
.withHomeAndEnd(!this.linear())
|
|
16746
|
+
.withHorizontalOrientation(isVertical ? null : 'ltr')
|
|
16747
|
+
.withVerticalOrientation(isVertical);
|
|
16748
|
+
untracked(() => {
|
|
16749
|
+
this.#focusKeyChange$ = this.#focusKeyManager.change.pipe(distinctUntilChanged((previous, current) => {
|
|
16750
|
+
if (this.resetting()) {
|
|
16751
|
+
this.resetting.set(false);
|
|
16752
|
+
this.onReset.emit();
|
|
16753
|
+
return false; // Resetting should always trigger a change
|
|
16754
|
+
}
|
|
16755
|
+
if (this.isStepOutOfScope(current)) {
|
|
16756
|
+
return true;
|
|
16757
|
+
}
|
|
16758
|
+
if (this.isStepDisabled(current)) {
|
|
16759
|
+
return true;
|
|
16760
|
+
}
|
|
16761
|
+
if (current > previous && this.linear() && !this.validation()) {
|
|
16762
|
+
const nextIndex = this.findNextStepIndex(previous);
|
|
16763
|
+
if (current !== nextIndex) {
|
|
16764
|
+
this.#focusKeyManager.setActiveItem(previous);
|
|
16765
|
+
return true;
|
|
16766
|
+
}
|
|
16767
|
+
}
|
|
16768
|
+
if (current > previous && this.linear() && !this.previousStepsValid(current) && this.validation()) {
|
|
16769
|
+
this.#focusKeyManager.setActiveItem(previous);
|
|
16770
|
+
return true;
|
|
16771
|
+
}
|
|
16772
|
+
if (current > previous && !this.isStepValid(previous)) {
|
|
16773
|
+
this.activeStepIndex.set(previous);
|
|
16774
|
+
this.#focusKeyManager.setActiveItem(previous);
|
|
16775
|
+
return true;
|
|
16776
|
+
}
|
|
16777
|
+
return false;
|
|
16778
|
+
}), tap((value) => {
|
|
16779
|
+
this.activeStepIndex.set(value);
|
|
16780
|
+
this.activeStepIndexChange.emit(value);
|
|
16781
|
+
}), takeUntilDestroyed(this.#destroyRef));
|
|
16782
|
+
this.#focusKeyChange$.subscribe();
|
|
16783
|
+
this.#focusKeyManagerInit.set(!!this.#focusKeyManager);
|
|
16784
|
+
this.activeStepIndex.update((prevIdx) => {
|
|
16785
|
+
return prevIdx ?? this.defaultActiveStepIndex();
|
|
16786
|
+
});
|
|
16787
|
+
// this.#focusKeyManager?.setFirstItemActive();
|
|
16788
|
+
});
|
|
16789
|
+
});
|
|
16790
|
+
hostClasses = computed(() => {
|
|
16791
|
+
return {
|
|
16792
|
+
stepper: true,
|
|
16793
|
+
'stepper-vertical': this.layout() === 'vertical'
|
|
16794
|
+
};
|
|
16795
|
+
});
|
|
16796
|
+
/**
|
|
16797
|
+
* Finish action. Attempts to finish the Stepper.
|
|
16798
|
+
*/
|
|
16799
|
+
finish() {
|
|
16800
|
+
if (this.allStepsValid()) {
|
|
16801
|
+
this.finishing.set(true);
|
|
16802
|
+
}
|
|
16803
|
+
}
|
|
16804
|
+
/**
|
|
16805
|
+
* Next action. Moves to the next step in the Stepper.
|
|
16806
|
+
* If already on the last step, it will attempt to finish().
|
|
16807
|
+
*/
|
|
16808
|
+
next() {
|
|
16809
|
+
const activeStepIndex = this.activeStepIndex();
|
|
16810
|
+
const stepsCount = this.stepsCount();
|
|
16811
|
+
if (activeStepIndex < stepsCount - 1) {
|
|
16812
|
+
this.#focusKeyManager?.setNextItemActive();
|
|
16813
|
+
}
|
|
16814
|
+
else {
|
|
16815
|
+
this.finish(); // Attempt finish if already on last step
|
|
16816
|
+
}
|
|
16817
|
+
}
|
|
16818
|
+
/**
|
|
16819
|
+
* Previous action. Moves to the previous step in the Stepper.
|
|
16820
|
+
* If already on the first step, it will do nothing.
|
|
16821
|
+
*/
|
|
16822
|
+
prev() {
|
|
16823
|
+
if (this.activeStepIndex() > 0) {
|
|
16824
|
+
this.#focusKeyManager?.setPreviousItemActive();
|
|
16825
|
+
}
|
|
16826
|
+
}
|
|
16827
|
+
/**
|
|
16828
|
+
* Reset action. Resets the Stepper to its initial state.
|
|
16829
|
+
* This will reset the active step index and emit the onReset event.
|
|
16830
|
+
*/
|
|
16831
|
+
reset() {
|
|
16832
|
+
this.finishing.set(false);
|
|
16833
|
+
this.resetting.set(true);
|
|
16834
|
+
setTimeout(() => {
|
|
16835
|
+
this.#focusKeyManager.setFirstItemActive();
|
|
16836
|
+
});
|
|
16837
|
+
}
|
|
16838
|
+
handleStepClick($event, idx) {
|
|
16839
|
+
this.#focusKeyManager?.setActiveItem(idx);
|
|
16840
|
+
}
|
|
16841
|
+
handleKeyDown($event) {
|
|
16842
|
+
if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes($event.key)) {
|
|
16843
|
+
this.#focusKeyManager?.onKeydown($event);
|
|
16844
|
+
return;
|
|
16845
|
+
}
|
|
16846
|
+
if (['Tab'].includes($event.key)) {
|
|
16847
|
+
this.#focusKeyManager?.tabOut.next();
|
|
16848
|
+
}
|
|
16849
|
+
return;
|
|
16850
|
+
}
|
|
16851
|
+
isStepDisabled(index) {
|
|
16852
|
+
return this.stepsContent()[index]?.disabled() ?? false;
|
|
16853
|
+
}
|
|
16854
|
+
isStepOutOfScope(index) {
|
|
16855
|
+
return index < 0 || index > this.stepsCount() - 1;
|
|
16856
|
+
}
|
|
16857
|
+
isStepValid(index) {
|
|
16858
|
+
if (!this.validation()) {
|
|
16859
|
+
return true;
|
|
16860
|
+
}
|
|
16861
|
+
return this.stepsContent()[index]?.valid() ?? true;
|
|
16862
|
+
}
|
|
16863
|
+
findNextStepIndex(startIndex) {
|
|
16864
|
+
const nextStepIndex = this.stepsContent().findIndex((step, index) => index > startIndex && !step.disabled() //&& step.valid() !== false
|
|
16865
|
+
);
|
|
16866
|
+
return nextStepIndex > startIndex ? nextStepIndex : startIndex;
|
|
16867
|
+
}
|
|
16868
|
+
previousStepsValid(index) {
|
|
16869
|
+
return !this.stepsContent()
|
|
16870
|
+
.slice(0, index)
|
|
16871
|
+
.find((step) => step.valid() === false && !step.disabled());
|
|
16872
|
+
}
|
|
16873
|
+
allStepsValid = computed(() => {
|
|
16874
|
+
if (!this.validation()) {
|
|
16875
|
+
return true;
|
|
16876
|
+
}
|
|
16877
|
+
return !this.stepsContent().find((step) => step.valid() === false && !step.disabled());
|
|
16878
|
+
});
|
|
16879
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16880
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: StepperComponent, isStandalone: true, selector: "c-stepper", inputs: { activeStepIndexInput: { classPropertyName: "activeStepIndexInput", publicName: "activeStepIndex", isSignal: true, isRequired: false, transformFunction: null }, defaultActiveStepIndex: { classPropertyName: "defaultActiveStepIndex", publicName: "defaultActiveStepIndex", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, stepButtonLayout: { classPropertyName: "stepButtonLayout", publicName: "stepButtonLayout", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { finished: "finished", onReset: "onReset", activeStepIndexChange: "activeStepIndexChange" }, host: { properties: { "class": "hostClasses()", "id": "id()" }, classAttribute: "stepper" }, queries: [{ propertyName: "stepsContent", predicate: StepperStepComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "stepButtons", predicate: StepButtonDirective, descendants: true, isSignal: true }], exportAs: ["cStepper"], ngImport: i0, template: "@let isVertical = layout() === 'vertical';\n@let activeIdx = activeStepIndex();\n@let finished = finishing();\n<ol [attr.aria-orientation]=\"layout()\" class=\"stepper-steps\" role=\"tablist\">\n @for (step of steps(); track step.id; let idx = $index, last = $last) {\n @let isActive = !finished && activeIdx === idx;\n @let isComplete = finished || idx < activeIdx;\n @let isDisabled = step.disabled || finished || (linear() && idx > activeIdx + 1 && step.disabled);\n @let stepId = step.id;\n @let panelId = `${step.id}-panel`;\n <li [class]=\"['stepper-step', stepButtonLayout()]\" role=\"presentation\">\n <button\n #stepButton\n cStepButton\n [attr.inert]=\"step.disabled || null\"\n [attr.aria-selected]=\"isActive || null\"\n [attr.aria-controls]=\"panelId\"\n [tabindex]=\"isActive ? 0 : -1\"\n [disabled]=\"isDisabled\"\n [ngClass]=\"{ 'stepper-step-button': true, active: isActive, complete: isComplete }\"\n id=\"{{ stepId }}\"\n type=\"button\"\n role=\"tab\"\n (click)=\"step.disabled || handleStepClick($event, idx)\"\n (keydown)=\"handleKeyDown($event)\"\n >\n <span class=\"stepper-step-indicator\">\n @if (isComplete) {\n <span class=\"stepper-step-indicator-icon\"></span>\n } @else {\n <span class=\"stepper-step-indicator-text\">\n <ng-container\n [ngTemplateOutlet]=\"step.indicatorRef || indicatorTpl\"\n [ngTemplateOutletContext]=\"step.indicatorCtx\"\n />\n <ng-template #indicatorTpl>{{ step.indicator }}</ng-template>\n </span>\n }\n </span>\n <span class=\"stepper-step-label\">\n <ng-container [ngTemplateOutlet]=\"step.labelRef || labelTpl\" [ngTemplateOutletContext]=\"step.labelCtx\" />\n <ng-template #labelTpl>{{ step.label }}</ng-template>\n </span>\n </button>\n @if (!last) {\n <div class=\"stepper-step-connector\"></div>\n }\n @if (isVertical) {\n <div\n class=\"stepper-step-content\"\n cCollapse\n [visible]=\"!resetting() && isActive\"\n [attr.inert]=\"isActive ? null : true\"\n id=\"{{ panelId }}\"\n role=\"tabpanel\"\n [attr.aria-hidden]=\"!isActive || null\"\n [attr.aria-labelledby]=\"stepId\"\n aria-live=\"polite\"\n >\n <ng-container *ngTemplateOutlet=\"step.templateRef ?? emptyTpl\" />\n </div>\n }\n </li>\n }\n</ol>\n@if (!isVertical) {\n <div class=\"stepper-content\">\n @for (step of steps(); track step.id; let idx = $index) {\n @let isActive = !finished && activeIdx === idx;\n @let stepId = step.id;\n @let panelId = `${step.id}-panel`;\n <div\n [attr.inert]=\"isActive ? null : true\"\n [ngClass]=\"{ 'stepper-pane': true, show: isActive, active: isActive }\"\n id=\"{{ panelId }}\"\n role=\"tabpanel\"\n [attr.aria-hidden]=\"!isActive || null\"\n [attr.aria-labelledby]=\"stepId\"\n aria-live=\"polite\"\n >\n <ng-container *ngTemplateOutlet=\"step.templateRef ?? emptyTpl\" />\n </div>\n }\n </div>\n}\n\n<ng-template #contentTpl>\n <ng-content />\n</ng-template>\n<ng-template #emptyTpl />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: StepButtonDirective, selector: "button[cStepButton]", exportAs: ["cStepButton"] }, { kind: "directive", type: CollapseDirective, selector: "[cCollapse]", inputs: ["animate", "horizontal", "visible", "navbar", "duration", "transition"], outputs: ["visibleChange", "collapseChange"], exportAs: ["cCollapse"] }] });
|
|
16881
|
+
}
|
|
16882
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StepperComponent, decorators: [{
|
|
16883
|
+
type: Component,
|
|
16884
|
+
args: [{ selector: 'c-stepper', exportAs: 'cStepper', imports: [NgTemplateOutlet, NgClass, StepButtonDirective, CollapseDirective], host: {
|
|
16885
|
+
class: 'stepper',
|
|
16886
|
+
'[class]': 'hostClasses()',
|
|
16887
|
+
'[id]': 'id()'
|
|
16888
|
+
}, template: "@let isVertical = layout() === 'vertical';\n@let activeIdx = activeStepIndex();\n@let finished = finishing();\n<ol [attr.aria-orientation]=\"layout()\" class=\"stepper-steps\" role=\"tablist\">\n @for (step of steps(); track step.id; let idx = $index, last = $last) {\n @let isActive = !finished && activeIdx === idx;\n @let isComplete = finished || idx < activeIdx;\n @let isDisabled = step.disabled || finished || (linear() && idx > activeIdx + 1 && step.disabled);\n @let stepId = step.id;\n @let panelId = `${step.id}-panel`;\n <li [class]=\"['stepper-step', stepButtonLayout()]\" role=\"presentation\">\n <button\n #stepButton\n cStepButton\n [attr.inert]=\"step.disabled || null\"\n [attr.aria-selected]=\"isActive || null\"\n [attr.aria-controls]=\"panelId\"\n [tabindex]=\"isActive ? 0 : -1\"\n [disabled]=\"isDisabled\"\n [ngClass]=\"{ 'stepper-step-button': true, active: isActive, complete: isComplete }\"\n id=\"{{ stepId }}\"\n type=\"button\"\n role=\"tab\"\n (click)=\"step.disabled || handleStepClick($event, idx)\"\n (keydown)=\"handleKeyDown($event)\"\n >\n <span class=\"stepper-step-indicator\">\n @if (isComplete) {\n <span class=\"stepper-step-indicator-icon\"></span>\n } @else {\n <span class=\"stepper-step-indicator-text\">\n <ng-container\n [ngTemplateOutlet]=\"step.indicatorRef || indicatorTpl\"\n [ngTemplateOutletContext]=\"step.indicatorCtx\"\n />\n <ng-template #indicatorTpl>{{ step.indicator }}</ng-template>\n </span>\n }\n </span>\n <span class=\"stepper-step-label\">\n <ng-container [ngTemplateOutlet]=\"step.labelRef || labelTpl\" [ngTemplateOutletContext]=\"step.labelCtx\" />\n <ng-template #labelTpl>{{ step.label }}</ng-template>\n </span>\n </button>\n @if (!last) {\n <div class=\"stepper-step-connector\"></div>\n }\n @if (isVertical) {\n <div\n class=\"stepper-step-content\"\n cCollapse\n [visible]=\"!resetting() && isActive\"\n [attr.inert]=\"isActive ? null : true\"\n id=\"{{ panelId }}\"\n role=\"tabpanel\"\n [attr.aria-hidden]=\"!isActive || null\"\n [attr.aria-labelledby]=\"stepId\"\n aria-live=\"polite\"\n >\n <ng-container *ngTemplateOutlet=\"step.templateRef ?? emptyTpl\" />\n </div>\n }\n </li>\n }\n</ol>\n@if (!isVertical) {\n <div class=\"stepper-content\">\n @for (step of steps(); track step.id; let idx = $index) {\n @let isActive = !finished && activeIdx === idx;\n @let stepId = step.id;\n @let panelId = `${step.id}-panel`;\n <div\n [attr.inert]=\"isActive ? null : true\"\n [ngClass]=\"{ 'stepper-pane': true, show: isActive, active: isActive }\"\n id=\"{{ panelId }}\"\n role=\"tabpanel\"\n [attr.aria-hidden]=\"!isActive || null\"\n [attr.aria-labelledby]=\"stepId\"\n aria-live=\"polite\"\n >\n <ng-container *ngTemplateOutlet=\"step.templateRef ?? emptyTpl\" />\n </div>\n }\n </div>\n}\n\n<ng-template #contentTpl>\n <ng-content />\n</ng-template>\n<ng-template #emptyTpl />\n", styles: [":host{display:block}\n"] }]
|
|
16889
|
+
}] });
|
|
16890
|
+
|
|
16891
|
+
class StepperModule {
|
|
16892
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
16893
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: StepperModule, imports: [StepperComponent, StepperStepComponent, StepButtonDirective], exports: [StepperComponent, StepperStepComponent, StepButtonDirective] });
|
|
16894
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StepperModule });
|
|
16895
|
+
}
|
|
16896
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: StepperModule, decorators: [{
|
|
16897
|
+
type: NgModule,
|
|
16898
|
+
args: [{
|
|
16899
|
+
imports: [StepperComponent, StepperStepComponent, StepButtonDirective],
|
|
16900
|
+
exports: [StepperComponent, StepperStepComponent, StepButtonDirective]
|
|
16901
|
+
}]
|
|
16902
|
+
}] });
|
|
16903
|
+
|
|
16424
16904
|
class TabService {
|
|
16425
16905
|
activeTabPaneIdx = new Subject();
|
|
16426
16906
|
activeTabPaneIdx$ = this.activeTabPaneIdx.asObservable();
|
|
@@ -17879,5 +18359,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
17879
18359
|
* Generated bundle index. Do not edit.
|
|
17880
18360
|
*/
|
|
17881
18361
|
|
|
17882
|
-
export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BackdropService, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreadcrumbRouterService, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalendarComponent, CalendarModule, CalendarMonthComponent, CalendarNavigationComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ColorModeService, ContainerComponent, DatePickerComponent, DatePickerModule, DateRangePickerComponent, DateRangePickerModule, DropdownCloseDirective, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, ElementCoverComponent, ElementCoverModule, ElementRefDirective, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormPasswordDirective, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InMemoryStorageService, InputGroupComponent, InputGroupTextDirective, IntersectionService, ListGroupDirective, ListGroupItemDirective, ListGroupModule, ListenersService, LoadingButtonComponent, LoadingButtonModule, LocalStorageService, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, MultiSelectComponent, MultiSelectModule, MultiSelectOptgroupComponent, MultiSelectOptgroupLabelComponent, MultiSelectOptionComponent, NavComponent, NavItemComponent, NavLinkDirective, NavModule, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PlaceholderAnimationDirective, PlaceholderDirective, PlaceholderModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressBarDirective, ProgressComponent, ProgressModule, ProgressStackedComponent, RangeSliderComponent, RangeSliderModule, RatingComponent, RatingModule, RoundedDirective, RowComponent, RowDirective, RtlService, ShadowOnScrollDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarNavHelper, SidebarService, SidebarToggleDirective, SidebarTogglerDirective, SmartPaginationComponent, SmartPaginationModule, SmartTableComponent, SmartTableFilterComponent, SmartTableModule, SpinnerComponent, SpinnerModule, TabContentComponent, TabContentRefDirective, TabDirective, TabPaneComponent, TabPanelComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, Tabs2Module, TabsComponent, TabsContentComponent, TabsListComponent, TabsModule, TabsService, TemplateIdDirective, TextBgColorDirective, TextColorDirective, ThemeDirective, TimePickerComponent, TimePickerModule, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UIDService, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
|
|
18362
|
+
export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BackdropService, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreadcrumbRouterService, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalendarComponent, CalendarModule, CalendarMonthComponent, CalendarNavigationComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ColorModeService, ContainerComponent, DatePickerComponent, DatePickerModule, DateRangePickerComponent, DateRangePickerModule, DropdownCloseDirective, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, ElementCoverComponent, ElementCoverModule, ElementRefDirective, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormPasswordDirective, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InMemoryStorageService, InputGroupComponent, InputGroupTextDirective, IntersectionService, ListGroupDirective, ListGroupItemDirective, ListGroupModule, ListenersService, LoadingButtonComponent, LoadingButtonModule, LocalStorageService, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, MultiSelectComponent, MultiSelectModule, MultiSelectOptgroupComponent, MultiSelectOptgroupLabelComponent, MultiSelectOptionComponent, NavComponent, NavItemComponent, NavLinkDirective, NavModule, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PlaceholderAnimationDirective, PlaceholderDirective, PlaceholderModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressBarDirective, ProgressComponent, ProgressModule, ProgressStackedComponent, RangeSliderComponent, RangeSliderModule, RatingComponent, RatingModule, RoundedDirective, RowComponent, RowDirective, RtlService, ShadowOnScrollDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarNavHelper, SidebarService, SidebarToggleDirective, SidebarTogglerDirective, SmartPaginationComponent, SmartPaginationModule, SmartTableComponent, SmartTableFilterComponent, SmartTableModule, SpinnerComponent, SpinnerModule, StepButtonDirective, StepperComponent, StepperModule, StepperStepComponent, TabContentComponent, TabContentRefDirective, TabDirective, TabPaneComponent, TabPanelComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, Tabs2Module, TabsComponent, TabsContentComponent, TabsListComponent, TabsModule, TabsService, TemplateIdDirective, TextBgColorDirective, TextColorDirective, ThemeDirective, TimePickerComponent, TimePickerModule, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UIDService, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
|
|
17883
18363
|
//# sourceMappingURL=coreui-angular-pro.mjs.map
|