ui-core-abv 0.8.1 → 0.8.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/ui-core-abv.mjs
CHANGED
|
@@ -6661,19 +6661,24 @@ class TinyAlertComponent {
|
|
|
6661
6661
|
this.data = inData.alert;
|
|
6662
6662
|
}
|
|
6663
6663
|
response = {};
|
|
6664
|
+
inputData = '';
|
|
6664
6665
|
close(value) {
|
|
6666
|
+
if (value) {
|
|
6667
|
+
this.response.input = this.inputData;
|
|
6668
|
+
}
|
|
6665
6669
|
this.modalRef.closeFloating(value ? this.response : null);
|
|
6666
6670
|
}
|
|
6667
6671
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, deps: [{ token: MODAL_DATA }, { token: UiModalRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6668
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "ui-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath) {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }@else{\r\n <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n }\r\n <div class=\"h3-alert\" [class]=\"'icon-'+data.type\"> {{data.title | uicTranslate}} </div>\r\n \r\n <div class=\"alert-body\" [innerHTML]=\"data.body | uicTranslate\"> </div>\
|
|
6672
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "ui-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath) {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }@else{\r\n <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n }\r\n <div class=\"h3-alert\" [class]=\"'icon-'+data.type\"> {{data.title | uicTranslate}} </div>\r\n \r\n <div class=\"alert-body\" [innerHTML]=\"data.body | uicTranslate\"> </div>\r\n @if ( data.showInput ){\r\n <div class=\"alert-input\">\r\n <ui-input [label]=\"data.inputLabel??'_'\">\r\n @if (data.inputType == 'textarea') {\r\n <textarea [(ngModel)]=\"inputData\" [placeholder]=\"data.inputPlaceholder\"></textarea>\r\n }@else{\r\n <input [(ngModel)]=\"inputData\" [placeholder]=\"data.inputPlaceholder\" type=\"text\" />\r\n }\r\n </ui-input>\r\n </div>\r\n }\r\n\r\n <div class=\"tinyalert-buttons\">\r\n @if (data.showCancelButton) {\r\n <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{(data.cancelButtonText??'common.cancel') | uicTranslate}} </ui-button>\r\n }\r\n <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{(data.okButtonText??'common.continue') | uicTranslate}} </ui-button>\r\n </div>\r\n \r\n <button class=\"floating-close\" (click)=\"close(false)\" >\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n</div>\r\n", styles: [".alert-input{width:100%;padding:10px 0}.alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.h3-alert{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;line-height:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
6669
6673
|
}
|
|
6670
6674
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, decorators: [{
|
|
6671
6675
|
type: Component,
|
|
6672
6676
|
args: [{ selector: 'ui-tiny-alert', imports: [
|
|
6673
6677
|
UicButtonComponent,
|
|
6674
6678
|
UicInputComponent,
|
|
6679
|
+
FormsModule,
|
|
6675
6680
|
UicTranslatePipe
|
|
6676
|
-
], template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath) {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }@else{\r\n <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n }\r\n <div class=\"h3-alert\" [class]=\"'icon-'+data.type\"> {{data.title | uicTranslate}} </div>\r\n \r\n <div class=\"alert-body\" [innerHTML]=\"data.body | uicTranslate\"> </div>\
|
|
6681
|
+
], template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath) {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }@else{\r\n <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n }\r\n <div class=\"h3-alert\" [class]=\"'icon-'+data.type\"> {{data.title | uicTranslate}} </div>\r\n \r\n <div class=\"alert-body\" [innerHTML]=\"data.body | uicTranslate\"> </div>\r\n @if ( data.showInput ){\r\n <div class=\"alert-input\">\r\n <ui-input [label]=\"data.inputLabel??'_'\">\r\n @if (data.inputType == 'textarea') {\r\n <textarea [(ngModel)]=\"inputData\" [placeholder]=\"data.inputPlaceholder\"></textarea>\r\n }@else{\r\n <input [(ngModel)]=\"inputData\" [placeholder]=\"data.inputPlaceholder\" type=\"text\" />\r\n }\r\n </ui-input>\r\n </div>\r\n }\r\n\r\n <div class=\"tinyalert-buttons\">\r\n @if (data.showCancelButton) {\r\n <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{(data.cancelButtonText??'common.cancel') | uicTranslate}} </ui-button>\r\n }\r\n <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{(data.okButtonText??'common.continue') | uicTranslate}} </ui-button>\r\n </div>\r\n \r\n <button class=\"floating-close\" (click)=\"close(false)\" >\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n</div>\r\n", styles: [".alert-input{width:100%;padding:10px 0}.alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.h3-alert{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;line-height:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"] }]
|
|
6677
6682
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
6678
6683
|
type: Inject,
|
|
6679
6684
|
args: [MODAL_DATA]
|
|
@@ -8960,6 +8965,13 @@ class UicEditableTableComponent {
|
|
|
8960
8965
|
onCellKeydown(event, indexRows, indexCols) {
|
|
8961
8966
|
let targetRow = indexRows;
|
|
8962
8967
|
let targetCol = indexCols;
|
|
8968
|
+
if (event.key === 'Escape') {
|
|
8969
|
+
event.target.blur();
|
|
8970
|
+
return;
|
|
8971
|
+
}
|
|
8972
|
+
if (!event.ctrlKey) {
|
|
8973
|
+
return;
|
|
8974
|
+
}
|
|
8963
8975
|
if (event.key === 'ArrowUp') {
|
|
8964
8976
|
targetRow = indexRows - 1;
|
|
8965
8977
|
}
|
|
@@ -8972,10 +8984,6 @@ class UicEditableTableComponent {
|
|
|
8972
8984
|
else if (event.key === 'ArrowRight') {
|
|
8973
8985
|
targetCol = indexCols + 1;
|
|
8974
8986
|
}
|
|
8975
|
-
else if (event.key === 'Escape') {
|
|
8976
|
-
event.target.blur();
|
|
8977
|
-
return;
|
|
8978
|
-
}
|
|
8979
8987
|
else {
|
|
8980
8988
|
return;
|
|
8981
8989
|
}
|
|
@@ -9529,11 +9537,11 @@ class UicWizardComponent {
|
|
|
9529
9537
|
}
|
|
9530
9538
|
}
|
|
9531
9539
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9532
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicWizardComponent, isStandalone: true, selector: "uic-wizard", inputs: { navigationEnabled: { classPropertyName: "navigationEnabled", publicName: "navigationEnabled", isSignal: true, isRequired: false, transformFunction: null }, buttonsColor: { classPropertyName: "buttonsColor", publicName: "buttonsColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepChange: "stepChange", wizardComplete: "wizardComplete" }, queries: [{ propertyName: "steps", predicate: UicWizardStepComponent, isSignal: true }], ngImport: i0, template: "<div class=\"wizard\">\r\n\r\n <!-- Breadcrumb -->\r\n <div class=\"wizard-breadcrumb\">\r\n @for (title of stepTitles(); track $index) {\r\n @if (!$first) {\r\n <div class=\"wizard-connector\" [class.wizard-connector--done]=\"$index <= currentIdx()\"></div>\r\n }\r\n <div class=\"wizard-step-dot\"\r\n [class.wizard-step-dot--done]=\"$index < currentIdx()\"\r\n [class.wizard-step-dot--active]=\"$index === currentIdx()\"\r\n [class.wizard-step-dot--clickable]=\"navigationEnabled()\"\r\n (click)=\"goTo($index)\">\r\n <div class=\"wizard-step-circle\">\r\n @if ($index < currentIdx()) {\r\n <span>\u2713</span>\r\n } @else {\r\n <span>{{ $index + 1 }}</span>\r\n }\r\n </div>\r\n <span class=\"wizard-step-label\" [class.wizard-step-label--active]=\"$index === currentIdx()\">{{ title }}</span>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Content -->\r\n <div class=\"wizard-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"wizard-footer\">\r\n <span class=\"wizard-counter\">\r\n {{ 'wizard.step_of' | uicTranslate: { current: currentIdx() + 1, total: steps().length } }}\r\n </span>\r\n <div class=\"wizard-footer-buttons\">\r\n <ui-button\r\n [color]=\"buttonsColor()\"\r\n type=\"bordered\"\r\n [disabled]=\"isFirst()\"\r\n (click)=\"back()\">\r\n {{ 'wizard.back' | uicTranslate }}\r\n </ui-button>\r\n <ui-button\r\n [color]=\"buttonsColor()\"\r\n (click)=\"next()\">\r\n {{ isLast() ? ('wizard.finish' | uicTranslate) : ('wizard.next' | uicTranslate) }}\r\n </ui-button>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.wizard{background-color:var(--grey-100);border-radius:10px;padding:10px 0;display:flex;flex-direction:column;gap:
|
|
9540
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicWizardComponent, isStandalone: true, selector: "uic-wizard", inputs: { navigationEnabled: { classPropertyName: "navigationEnabled", publicName: "navigationEnabled", isSignal: true, isRequired: false, transformFunction: null }, buttonsColor: { classPropertyName: "buttonsColor", publicName: "buttonsColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepChange: "stepChange", wizardComplete: "wizardComplete" }, queries: [{ propertyName: "steps", predicate: UicWizardStepComponent, isSignal: true }], ngImport: i0, template: "<div class=\"wizard\">\r\n\r\n <!-- Breadcrumb -->\r\n <div class=\"wizard-breadcrumb\">\r\n @for (title of stepTitles(); track $index) {\r\n @if (!$first) {\r\n <div class=\"wizard-connector\" [class.wizard-connector--done]=\"$index <= currentIdx()\"></div>\r\n }\r\n <div class=\"wizard-step-dot\"\r\n [class.wizard-step-dot--done]=\"$index < currentIdx()\"\r\n [class.wizard-step-dot--active]=\"$index === currentIdx()\"\r\n [class.wizard-step-dot--clickable]=\"navigationEnabled()\"\r\n (click)=\"goTo($index)\">\r\n <div class=\"wizard-step-circle\">\r\n @if ($index < currentIdx()) {\r\n <span>\u2713</span>\r\n } @else {\r\n <span>{{ $index + 1 }}</span>\r\n }\r\n </div>\r\n <span class=\"wizard-step-label\" [class.wizard-step-label--active]=\"$index === currentIdx()\">{{ title }}</span>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Content -->\r\n <div class=\"wizard-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"wizard-footer\">\r\n <span class=\"wizard-counter\">\r\n {{ 'wizard.step_of' | uicTranslate: { current: currentIdx() + 1, total: steps().length } }}\r\n </span>\r\n <div class=\"wizard-footer-buttons\">\r\n <ui-button\r\n [color]=\"buttonsColor()\"\r\n type=\"bordered\"\r\n [disabled]=\"isFirst()\"\r\n (click)=\"back()\">\r\n {{ 'wizard.back' | uicTranslate }}\r\n </ui-button>\r\n <ui-button\r\n [color]=\"buttonsColor()\"\r\n (click)=\"next()\">\r\n {{ isLast() ? ('wizard.finish' | uicTranslate) : ('wizard.next' | uicTranslate) }}\r\n </ui-button>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.wizard{background-color:var(--grey-100);border-radius:10px;padding:10px 0;display:flex;flex-direction:column;gap:5px;border:solid 1px var(--grey-300)}.wizard-breadcrumb{display:flex;padding:5px 20px;align-items:flex-start}.wizard-step-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;color:var(--grey-400);border:2px solid var(--grey-300);justify-content:center;font-size:14px;font-weight:600;box-sizing:border-box}.wizard-step-label{font-size:12px;line-height:13px;font-weight:400;color:var(--grey-500);text-align:center;max-width:120px}.wizard-step-label--active{color:var(--primary-700);font-weight:600}.wizard-step-dot{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}.wizard-step-dot--clickable{cursor:pointer}.wizard-step-dot--done>.wizard-step-circle{background-color:var(--primary-700);border-color:var(--primary-700);color:#fff}.wizard-step-dot--active>.wizard-step-circle{background-color:#fff;border-color:var(--primary-700);color:var(--primary-700)}.wizard-connector{flex:1;height:2px;margin-top:17px;align-self:flex-start;background-color:var(--grey-300)}.wizard-connector--done{background-color:var(--primary-700)}.wizard-body{background-color:#fff;padding:20px;flex:1}.wizard-footer{padding:6px 20px 0;display:flex;justify-content:space-between;align-items:center}.wizard-footer-buttons{display:flex;gap:8px}.wizard-counter{font-size:13px;font-weight:300;color:var(--grey-600)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
|
|
9533
9541
|
}
|
|
9534
9542
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWizardComponent, decorators: [{
|
|
9535
9543
|
type: Component,
|
|
9536
|
-
args: [{ selector: 'uic-wizard', imports: [UicButtonComponent, UicTranslatePipe], template: "<div class=\"wizard\">\r\n\r\n <!-- Breadcrumb -->\r\n <div class=\"wizard-breadcrumb\">\r\n @for (title of stepTitles(); track $index) {\r\n @if (!$first) {\r\n <div class=\"wizard-connector\" [class.wizard-connector--done]=\"$index <= currentIdx()\"></div>\r\n }\r\n <div class=\"wizard-step-dot\"\r\n [class.wizard-step-dot--done]=\"$index < currentIdx()\"\r\n [class.wizard-step-dot--active]=\"$index === currentIdx()\"\r\n [class.wizard-step-dot--clickable]=\"navigationEnabled()\"\r\n (click)=\"goTo($index)\">\r\n <div class=\"wizard-step-circle\">\r\n @if ($index < currentIdx()) {\r\n <span>\u2713</span>\r\n } @else {\r\n <span>{{ $index + 1 }}</span>\r\n }\r\n </div>\r\n <span class=\"wizard-step-label\" [class.wizard-step-label--active]=\"$index === currentIdx()\">{{ title }}</span>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Content -->\r\n <div class=\"wizard-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"wizard-footer\">\r\n <span class=\"wizard-counter\">\r\n {{ 'wizard.step_of' | uicTranslate: { current: currentIdx() + 1, total: steps().length } }}\r\n </span>\r\n <div class=\"wizard-footer-buttons\">\r\n <ui-button\r\n [color]=\"buttonsColor()\"\r\n type=\"bordered\"\r\n [disabled]=\"isFirst()\"\r\n (click)=\"back()\">\r\n {{ 'wizard.back' | uicTranslate }}\r\n </ui-button>\r\n <ui-button\r\n [color]=\"buttonsColor()\"\r\n (click)=\"next()\">\r\n {{ isLast() ? ('wizard.finish' | uicTranslate) : ('wizard.next' | uicTranslate) }}\r\n </ui-button>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.wizard{background-color:var(--grey-100);border-radius:10px;padding:10px 0;display:flex;flex-direction:column;gap:
|
|
9544
|
+
args: [{ selector: 'uic-wizard', imports: [UicButtonComponent, UicTranslatePipe], template: "<div class=\"wizard\">\r\n\r\n <!-- Breadcrumb -->\r\n <div class=\"wizard-breadcrumb\">\r\n @for (title of stepTitles(); track $index) {\r\n @if (!$first) {\r\n <div class=\"wizard-connector\" [class.wizard-connector--done]=\"$index <= currentIdx()\"></div>\r\n }\r\n <div class=\"wizard-step-dot\"\r\n [class.wizard-step-dot--done]=\"$index < currentIdx()\"\r\n [class.wizard-step-dot--active]=\"$index === currentIdx()\"\r\n [class.wizard-step-dot--clickable]=\"navigationEnabled()\"\r\n (click)=\"goTo($index)\">\r\n <div class=\"wizard-step-circle\">\r\n @if ($index < currentIdx()) {\r\n <span>\u2713</span>\r\n } @else {\r\n <span>{{ $index + 1 }}</span>\r\n }\r\n </div>\r\n <span class=\"wizard-step-label\" [class.wizard-step-label--active]=\"$index === currentIdx()\">{{ title }}</span>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Content -->\r\n <div class=\"wizard-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"wizard-footer\">\r\n <span class=\"wizard-counter\">\r\n {{ 'wizard.step_of' | uicTranslate: { current: currentIdx() + 1, total: steps().length } }}\r\n </span>\r\n <div class=\"wizard-footer-buttons\">\r\n <ui-button\r\n [color]=\"buttonsColor()\"\r\n type=\"bordered\"\r\n [disabled]=\"isFirst()\"\r\n (click)=\"back()\">\r\n {{ 'wizard.back' | uicTranslate }}\r\n </ui-button>\r\n <ui-button\r\n [color]=\"buttonsColor()\"\r\n (click)=\"next()\">\r\n {{ isLast() ? ('wizard.finish' | uicTranslate) : ('wizard.next' | uicTranslate) }}\r\n </ui-button>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.wizard{background-color:var(--grey-100);border-radius:10px;padding:10px 0;display:flex;flex-direction:column;gap:5px;border:solid 1px var(--grey-300)}.wizard-breadcrumb{display:flex;padding:5px 20px;align-items:flex-start}.wizard-step-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;color:var(--grey-400);border:2px solid var(--grey-300);justify-content:center;font-size:14px;font-weight:600;box-sizing:border-box}.wizard-step-label{font-size:12px;line-height:13px;font-weight:400;color:var(--grey-500);text-align:center;max-width:120px}.wizard-step-label--active{color:var(--primary-700);font-weight:600}.wizard-step-dot{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}.wizard-step-dot--clickable{cursor:pointer}.wizard-step-dot--done>.wizard-step-circle{background-color:var(--primary-700);border-color:var(--primary-700);color:#fff}.wizard-step-dot--active>.wizard-step-circle{background-color:#fff;border-color:var(--primary-700);color:var(--primary-700)}.wizard-connector{flex:1;height:2px;margin-top:17px;align-self:flex-start;background-color:var(--grey-300)}.wizard-connector--done{background-color:var(--primary-700)}.wizard-body{background-color:#fff;padding:20px;flex:1}.wizard-footer{padding:6px 20px 0;display:flex;justify-content:space-between;align-items:center}.wizard-footer-buttons{display:flex;gap:8px}.wizard-counter{font-size:13px;font-weight:300;color:var(--grey-600)}\n"] }]
|
|
9537
9545
|
}], ctorParameters: () => [] });
|
|
9538
9546
|
|
|
9539
9547
|
const simpleFade = trigger('simpleFade', [
|