@ng-nest/ui 20.1.3 → 20.1.6
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/core/index.d.ts +22 -4
- package/coversations/index.d.ts +138 -0
- package/fesm2022/ng-nest-ui-bubble.mjs +3 -3
- package/fesm2022/ng-nest-ui-bubble.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-core.mjs +13 -8
- package/fesm2022/ng-nest-ui-core.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-coversations.mjs +108 -0
- package/fesm2022/ng-nest-ui-coversations.mjs.map +1 -0
- package/fesm2022/ng-nest-ui-examples.mjs +2 -2
- package/fesm2022/ng-nest-ui-examples.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-input.mjs +2 -2
- package/fesm2022/ng-nest-ui-input.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-list.mjs +83 -29
- package/fesm2022/ng-nest-ui-list.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-loading.mjs +13 -3
- package/fesm2022/ng-nest-ui-loading.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-menu.mjs +8 -4
- package/fesm2022/ng-nest-ui-menu.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-message.mjs +20 -20
- package/fesm2022/ng-nest-ui-message.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-progress.mjs +24 -3
- package/fesm2022/ng-nest-ui-progress.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-prompts.mjs +98 -0
- package/fesm2022/ng-nest-ui-prompts.mjs.map +1 -0
- package/fesm2022/ng-nest-ui-select.mjs +6 -6
- package/fesm2022/ng-nest-ui-select.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-sender.mjs +2 -2
- package/fesm2022/ng-nest-ui-sender.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-table.mjs +2 -2
- package/fesm2022/ng-nest-ui-table.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-welcome.mjs +84 -0
- package/fesm2022/ng-nest-ui-welcome.mjs.map +1 -0
- package/fesm2022/ng-nest-ui.mjs +2 -0
- package/fesm2022/ng-nest-ui.mjs.map +1 -1
- package/index.d.ts +2 -0
- package/list/index.d.ts +51 -7
- package/loading/index.d.ts +17 -1
- package/message/index.d.ts +1 -1
- package/package.json +51 -39
- package/progress/index.d.ts +7 -1
- package/prompts/index.d.ts +88 -0
- package/welcome/index.d.ts +65 -0
|
@@ -63,6 +63,11 @@ class XProgressProperty extends XPropertyFunction(X_PROGRESS_CONFIG_NAME) {
|
|
|
63
63
|
* @en_US Custom color
|
|
64
64
|
*/
|
|
65
65
|
this.color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
|
|
66
|
+
/**
|
|
67
|
+
* @zh_CN 自定义轨道颜色
|
|
68
|
+
* @en_US Custom rail color
|
|
69
|
+
*/
|
|
70
|
+
this.railColor = input(...(ngDevMode ? [undefined, { debugName: "railColor" }] : []));
|
|
66
71
|
/**
|
|
67
72
|
* @zh_CN 渐变颜色
|
|
68
73
|
* @en_US Gradient color
|
|
@@ -105,7 +110,7 @@ class XProgressProperty extends XPropertyFunction(X_PROGRESS_CONFIG_NAME) {
|
|
|
105
110
|
this.subsection = input(false, ...(ngDevMode ? [{ debugName: "subsection", transform: XToBoolean }] : [{ transform: XToBoolean }]));
|
|
106
111
|
}
|
|
107
112
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XProgressProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
108
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XProgressProperty, isStandalone: true, selector: "x-progress-property", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, percent: { classPropertyName: "percent", publicName: "percent", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, infoWidth: { classPropertyName: "infoWidth", publicName: "infoWidth", isSignal: true, isRequired: false, transformFunction: null }, inside: { classPropertyName: "inside", publicName: "inside", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, gradient: { classPropertyName: "gradient", publicName: "gradient", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, stepWidth: { classPropertyName: "stepWidth", publicName: "stepWidth", isSignal: true, isRequired: false, transformFunction: null }, stepFlex: { classPropertyName: "stepFlex", publicName: "stepFlex", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, notchAngle: { classPropertyName: "notchAngle", publicName: "notchAngle", isSignal: true, isRequired: false, transformFunction: null }, subsection: { classPropertyName: "subsection", publicName: "subsection", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
|
|
113
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XProgressProperty, isStandalone: true, selector: "x-progress-property", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, percent: { classPropertyName: "percent", publicName: "percent", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, infoWidth: { classPropertyName: "infoWidth", publicName: "infoWidth", isSignal: true, isRequired: false, transformFunction: null }, inside: { classPropertyName: "inside", publicName: "inside", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, railColor: { classPropertyName: "railColor", publicName: "railColor", isSignal: true, isRequired: false, transformFunction: null }, gradient: { classPropertyName: "gradient", publicName: "gradient", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, stepWidth: { classPropertyName: "stepWidth", publicName: "stepWidth", isSignal: true, isRequired: false, transformFunction: null }, stepFlex: { classPropertyName: "stepFlex", publicName: "stepFlex", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, notchAngle: { classPropertyName: "notchAngle", publicName: "notchAngle", isSignal: true, isRequired: false, transformFunction: null }, subsection: { classPropertyName: "subsection", publicName: "subsection", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
|
|
109
114
|
}
|
|
110
115
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XProgressProperty, decorators: [{
|
|
111
116
|
type: Component,
|
|
@@ -147,6 +152,22 @@ class XProgressComponent extends XProgressProperty {
|
|
|
147
152
|
return color(this.percent());
|
|
148
153
|
}
|
|
149
154
|
}, ...(ngDevMode ? [{ debugName: "currentColor" }] : []));
|
|
155
|
+
this.currentRailColor = computed(() => {
|
|
156
|
+
if (this.subsection())
|
|
157
|
+
return '';
|
|
158
|
+
const color = this.railColor();
|
|
159
|
+
if (XIsEmpty(color))
|
|
160
|
+
return '';
|
|
161
|
+
if (XIsString(color)) {
|
|
162
|
+
return color;
|
|
163
|
+
}
|
|
164
|
+
else if (XIsObjectArray(color)) {
|
|
165
|
+
return this.getLevelColor(this.percent(), color);
|
|
166
|
+
}
|
|
167
|
+
else if (XIsFunction(color)) {
|
|
168
|
+
return color(this.percent());
|
|
169
|
+
}
|
|
170
|
+
}, ...(ngDevMode ? [{ debugName: "currentRailColor" }] : []));
|
|
150
171
|
this.linearGradient = computed(() => {
|
|
151
172
|
if (this.subsection())
|
|
152
173
|
return '';
|
|
@@ -322,11 +343,11 @@ class XProgressComponent extends XProgressProperty {
|
|
|
322
343
|
return '';
|
|
323
344
|
}
|
|
324
345
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XProgressComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
325
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XProgressComponent, isStandalone: true, selector: "x-progress", usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"x-progress\"\r\n [ngClass]=\"classMap()\"\r\n [class.x-progress-steps]=\"stepsArray().length > 0\"\r\n [class.x-progress-steps-flex]=\"stepFlex()\"\r\n>\r\n @switch (type()) {\r\n @case ('circle') {\r\n <ng-container *ngTemplateOutlet=\"circleTpl\"> </ng-container>\r\n }\r\n @case ('dashboard') {\r\n <ng-container *ngTemplateOutlet=\"dashboardTpl\"> </ng-container>\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"lineTpl\"> </ng-container>\r\n }\r\n }\r\n</div>\r\n\r\n<ng-template #lineTpl>\r\n @if (stepsArray().length === 0) {\r\n <ng-container *ngTemplateOutlet=\"trackTpl\"></ng-container>\r\n }\r\n @if (stepsArray().length > 0) {\r\n <ng-container *ngTemplateOutlet=\"stepsTpl\"></ng-container>\r\n }\r\n @if (info() && !inside()) {\r\n <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #circleTpl>\r\n <div class=\"x-progress-ring\" [style.width]=\"size()\" [style.height]=\"size()\">\r\n <div
|
|
346
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XProgressComponent, isStandalone: true, selector: "x-progress", usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"x-progress\"\r\n [ngClass]=\"classMap()\"\r\n [class.x-progress-steps]=\"stepsArray().length > 0\"\r\n [class.x-progress-steps-flex]=\"stepFlex()\"\r\n>\r\n @switch (type()) {\r\n @case ('circle') {\r\n <ng-container *ngTemplateOutlet=\"circleTpl\"> </ng-container>\r\n }\r\n @case ('dashboard') {\r\n <ng-container *ngTemplateOutlet=\"dashboardTpl\"> </ng-container>\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"lineTpl\"> </ng-container>\r\n }\r\n }\r\n</div>\r\n\r\n<ng-template #lineTpl>\r\n @if (stepsArray().length === 0) {\r\n <ng-container *ngTemplateOutlet=\"trackTpl\"></ng-container>\r\n }\r\n @if (stepsArray().length > 0) {\r\n <ng-container *ngTemplateOutlet=\"stepsTpl\"></ng-container>\r\n }\r\n @if (info() && !inside()) {\r\n <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #circleTpl>\r\n <div class=\"x-progress-ring\" [style.width]=\"size()\" [style.height]=\"size()\">\r\n <div\r\n class=\"x-progress-ring-rail\"\r\n [style.border-width]=\"thickness()\"\r\n [style.border-color]=\"currentRailColor()\"\r\n ></div>\r\n <div\r\n class=\"x-progress-ring-bg\"\r\n [style.clip-path]=\"circleClipPath()\"\r\n [style.border-color]=\"currentColor()\"\r\n [style.border-width]=\"thickness()\"\r\n ></div>\r\n <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dashboardTpl>\r\n <div class=\"x-progress-ring\" [style.width]=\"size()\" [style.height]=\"size()\">\r\n <div\r\n class=\"x-progress-ring-rail\"\r\n [style.clip-path]=\"dashboardRailClipPath()\"\r\n [style.border-color]=\"currentRailColor()\"\r\n [style.border-width]=\"thickness()\"\r\n ></div>\r\n <div\r\n class=\"x-progress-ring-bg\"\r\n [style.clip-path]=\"dashboardClipPath()\"\r\n [style.border-color]=\"currentColor()\"\r\n [style.border-width]=\"thickness()\"\r\n ></div>\r\n <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #trackTpl>\r\n <div class=\"x-progress-track\">\r\n <div\r\n class=\"x-progress-rail\"\r\n [class.x-progress-mask]=\"subsection()\"\r\n [style.background-color]=\"currentRailColor()\"\r\n [style.background-image]=\"subsection() ? subLinearGradient() : 'none'\"\r\n >\r\n <div\r\n class=\"x-progress-bg\"\r\n [style.width.%]=\"percent()\"\r\n [style.background-color]=\"currentColor()\"\r\n [style.background-image]=\"linearGradient()\"\r\n [style.height]=\"height()\"\r\n [style.line-height]=\"height()\"\r\n >\r\n @if (info() && inside()) {\r\n <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n }\r\n </div>\r\n @if (subsection()) {\r\n <div\r\n class=\"x-progress-bg-mask\"\r\n [style.width.%]=\"maskWidth()\"\r\n [style.height]=\"height()\"\r\n [style.line-height]=\"height()\"\r\n ></div>\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #stepsTpl>\r\n @for (step of stepsArray(); track i; let i = $index) {\r\n <div\r\n class=\"x-progress-step\"\r\n [class.x-progress-step-active]=\"step\"\r\n [style.background-color]=\"step ? currentColor() : currentRailColor()\"\r\n [style.width]=\"stepWidth()\"\r\n [style.flex]=\"stepFlex() ? 1 : 'none'\"\r\n [style.height]=\"height()\"\r\n [style.line-height]=\"height()\"\r\n ></div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #textTpl>\r\n <span class=\"x-progress-text\" [style.width]=\"infoWidth()\">\r\n @switch (status()) {\r\n @case ('success') {\r\n <x-icon type=\"fto-check-circle\"></x-icon>\r\n }\r\n @case ('exception') {\r\n <x-icon type=\"fto-x-circle\"></x-icon>\r\n }\r\n @case ('warning') {\r\n <x-icon type=\"fto-help-circle\"></x-icon>\r\n }\r\n @default {\r\n @if (format()) {\r\n {{ format()!(percent()) }}\r\n } @else {\r\n {{ percent() }}%\r\n }\r\n }\r\n }\r\n </span>\r\n</ng-template>\r\n", styles: ["@keyframes x-progress-active{0%{width:0;opacity:.1}20%{width:0;opacity:.5}to{width:100%;opacity:0}}x-progress{display:initial}.x-progress{margin:0;padding:0}.x-progress{display:inline-flex;align-items:center;width:100%}.x-progress-track{flex:1;display:inline-flex;align-items:center}.x-progress-rail{position:relative;display:inline-flex;width:100%;overflow:hidden;vertical-align:middle;background-color:var(--x-border-100);border-radius:var(--x-border-radius)}.x-progress-bg{position:relative;background-color:var(--x-primary);transition:width .3s cubic-bezier(.08,.82,.17,1) 0s;border-radius:var(--x-border-radius);text-align:right;color:#fff}.x-progress-bg>span{margin:0 .325rem}.x-progress-circle,.x-progress-dashboard,.x-progress-steps:not(.x-progress-steps-flex){width:initial}.x-progress-ring{position:relative;display:inline-flex;align-items:center;justify-content:center}.x-progress-ring-rail{position:absolute;width:100%;height:100%;border-style:solid;border-color:var(--x-border-100);border-radius:100%}.x-progress-ring-bg{position:absolute;width:100%;height:100%;border-style:solid;border-color:var(--x-primary);border-radius:100%;transition:clip-path .3s cubic-bezier(.08,.82,.17,1) 0s}.x-progress-ring .x-progress-text{margin-left:0;justify-content:center;font-size:var(--x-font-size-large)}.x-progress-mask .x-progress-bg{background:transparent}.x-progress-bg-mask{transition:width .3s cubic-bezier(.08,.82,.17,1) 0s;background-color:var(--x-border-100);border-top-right-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius)}.x-progress-step{background-color:var(--x-border-100);border-radius:var(--x-border-radius)}.x-progress-step:not(:first-child){margin-left:.125rem}.x-progress-step-active{background-color:var(--x-primary)}.x-progress-text{margin-left:.5rem;display:inline-flex;align-items:center;white-space:nowrap}.x-progress-text x-icon{font-size:1.25rem}.x-progress-active .x-progress-bg:before{position:absolute;inset:0;background:var(--x-background-100);border-radius:var(--x-border-radius);opacity:0;animation:x-progress-active 2s cubic-bezier(.23,1,.32,1) infinite;content:\"\"}.x-progress-exception .x-progress-text{color:var(--x-danger)}.x-progress-exception .x-progress-bg,.x-progress-exception .x-progress-step-active{background-color:var(--x-danger)}.x-progress-exception .x-progress-ring-bg{border-color:var(--x-danger)}.x-progress-success .x-progress-text{color:var(--x-success)}.x-progress-success .x-progress-bg,.x-progress-success .x-progress-step-active{background-color:var(--x-success)}.x-progress-success .x-progress-ring-bg{border-color:var(--x-success)}.x-progress-warning .x-progress-text{color:var(--x-warning)}.x-progress-warning .x-progress-bg,.x-progress-warning .x-progress-step-active{background-color:var(--x-warning)}.x-progress-warning .x-progress-ring-bg{border-color:var(--x-warning)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
326
347
|
}
|
|
327
348
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XProgressComponent, decorators: [{
|
|
328
349
|
type: Component,
|
|
329
|
-
args: [{ selector: `${XProgressPrefix}`, imports: [NgClass, NgTemplateOutlet, FormsModule, XIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"x-progress\"\r\n [ngClass]=\"classMap()\"\r\n [class.x-progress-steps]=\"stepsArray().length > 0\"\r\n [class.x-progress-steps-flex]=\"stepFlex()\"\r\n>\r\n @switch (type()) {\r\n @case ('circle') {\r\n <ng-container *ngTemplateOutlet=\"circleTpl\"> </ng-container>\r\n }\r\n @case ('dashboard') {\r\n <ng-container *ngTemplateOutlet=\"dashboardTpl\"> </ng-container>\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"lineTpl\"> </ng-container>\r\n }\r\n }\r\n</div>\r\n\r\n<ng-template #lineTpl>\r\n @if (stepsArray().length === 0) {\r\n <ng-container *ngTemplateOutlet=\"trackTpl\"></ng-container>\r\n }\r\n @if (stepsArray().length > 0) {\r\n <ng-container *ngTemplateOutlet=\"stepsTpl\"></ng-container>\r\n }\r\n @if (info() && !inside()) {\r\n <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #circleTpl>\r\n <div class=\"x-progress-ring\" [style.width]=\"size()\" [style.height]=\"size()\">\r\n <div
|
|
350
|
+
args: [{ selector: `${XProgressPrefix}`, imports: [NgClass, NgTemplateOutlet, FormsModule, XIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"x-progress\"\r\n [ngClass]=\"classMap()\"\r\n [class.x-progress-steps]=\"stepsArray().length > 0\"\r\n [class.x-progress-steps-flex]=\"stepFlex()\"\r\n>\r\n @switch (type()) {\r\n @case ('circle') {\r\n <ng-container *ngTemplateOutlet=\"circleTpl\"> </ng-container>\r\n }\r\n @case ('dashboard') {\r\n <ng-container *ngTemplateOutlet=\"dashboardTpl\"> </ng-container>\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"lineTpl\"> </ng-container>\r\n }\r\n }\r\n</div>\r\n\r\n<ng-template #lineTpl>\r\n @if (stepsArray().length === 0) {\r\n <ng-container *ngTemplateOutlet=\"trackTpl\"></ng-container>\r\n }\r\n @if (stepsArray().length > 0) {\r\n <ng-container *ngTemplateOutlet=\"stepsTpl\"></ng-container>\r\n }\r\n @if (info() && !inside()) {\r\n <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #circleTpl>\r\n <div class=\"x-progress-ring\" [style.width]=\"size()\" [style.height]=\"size()\">\r\n <div\r\n class=\"x-progress-ring-rail\"\r\n [style.border-width]=\"thickness()\"\r\n [style.border-color]=\"currentRailColor()\"\r\n ></div>\r\n <div\r\n class=\"x-progress-ring-bg\"\r\n [style.clip-path]=\"circleClipPath()\"\r\n [style.border-color]=\"currentColor()\"\r\n [style.border-width]=\"thickness()\"\r\n ></div>\r\n <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dashboardTpl>\r\n <div class=\"x-progress-ring\" [style.width]=\"size()\" [style.height]=\"size()\">\r\n <div\r\n class=\"x-progress-ring-rail\"\r\n [style.clip-path]=\"dashboardRailClipPath()\"\r\n [style.border-color]=\"currentRailColor()\"\r\n [style.border-width]=\"thickness()\"\r\n ></div>\r\n <div\r\n class=\"x-progress-ring-bg\"\r\n [style.clip-path]=\"dashboardClipPath()\"\r\n [style.border-color]=\"currentColor()\"\r\n [style.border-width]=\"thickness()\"\r\n ></div>\r\n <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #trackTpl>\r\n <div class=\"x-progress-track\">\r\n <div\r\n class=\"x-progress-rail\"\r\n [class.x-progress-mask]=\"subsection()\"\r\n [style.background-color]=\"currentRailColor()\"\r\n [style.background-image]=\"subsection() ? subLinearGradient() : 'none'\"\r\n >\r\n <div\r\n class=\"x-progress-bg\"\r\n [style.width.%]=\"percent()\"\r\n [style.background-color]=\"currentColor()\"\r\n [style.background-image]=\"linearGradient()\"\r\n [style.height]=\"height()\"\r\n [style.line-height]=\"height()\"\r\n >\r\n @if (info() && inside()) {\r\n <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n }\r\n </div>\r\n @if (subsection()) {\r\n <div\r\n class=\"x-progress-bg-mask\"\r\n [style.width.%]=\"maskWidth()\"\r\n [style.height]=\"height()\"\r\n [style.line-height]=\"height()\"\r\n ></div>\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #stepsTpl>\r\n @for (step of stepsArray(); track i; let i = $index) {\r\n <div\r\n class=\"x-progress-step\"\r\n [class.x-progress-step-active]=\"step\"\r\n [style.background-color]=\"step ? currentColor() : currentRailColor()\"\r\n [style.width]=\"stepWidth()\"\r\n [style.flex]=\"stepFlex() ? 1 : 'none'\"\r\n [style.height]=\"height()\"\r\n [style.line-height]=\"height()\"\r\n ></div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #textTpl>\r\n <span class=\"x-progress-text\" [style.width]=\"infoWidth()\">\r\n @switch (status()) {\r\n @case ('success') {\r\n <x-icon type=\"fto-check-circle\"></x-icon>\r\n }\r\n @case ('exception') {\r\n <x-icon type=\"fto-x-circle\"></x-icon>\r\n }\r\n @case ('warning') {\r\n <x-icon type=\"fto-help-circle\"></x-icon>\r\n }\r\n @default {\r\n @if (format()) {\r\n {{ format()!(percent()) }}\r\n } @else {\r\n {{ percent() }}%\r\n }\r\n }\r\n }\r\n </span>\r\n</ng-template>\r\n", styles: ["@keyframes x-progress-active{0%{width:0;opacity:.1}20%{width:0;opacity:.5}to{width:100%;opacity:0}}x-progress{display:initial}.x-progress{margin:0;padding:0}.x-progress{display:inline-flex;align-items:center;width:100%}.x-progress-track{flex:1;display:inline-flex;align-items:center}.x-progress-rail{position:relative;display:inline-flex;width:100%;overflow:hidden;vertical-align:middle;background-color:var(--x-border-100);border-radius:var(--x-border-radius)}.x-progress-bg{position:relative;background-color:var(--x-primary);transition:width .3s cubic-bezier(.08,.82,.17,1) 0s;border-radius:var(--x-border-radius);text-align:right;color:#fff}.x-progress-bg>span{margin:0 .325rem}.x-progress-circle,.x-progress-dashboard,.x-progress-steps:not(.x-progress-steps-flex){width:initial}.x-progress-ring{position:relative;display:inline-flex;align-items:center;justify-content:center}.x-progress-ring-rail{position:absolute;width:100%;height:100%;border-style:solid;border-color:var(--x-border-100);border-radius:100%}.x-progress-ring-bg{position:absolute;width:100%;height:100%;border-style:solid;border-color:var(--x-primary);border-radius:100%;transition:clip-path .3s cubic-bezier(.08,.82,.17,1) 0s}.x-progress-ring .x-progress-text{margin-left:0;justify-content:center;font-size:var(--x-font-size-large)}.x-progress-mask .x-progress-bg{background:transparent}.x-progress-bg-mask{transition:width .3s cubic-bezier(.08,.82,.17,1) 0s;background-color:var(--x-border-100);border-top-right-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius)}.x-progress-step{background-color:var(--x-border-100);border-radius:var(--x-border-radius)}.x-progress-step:not(:first-child){margin-left:.125rem}.x-progress-step-active{background-color:var(--x-primary)}.x-progress-text{margin-left:.5rem;display:inline-flex;align-items:center;white-space:nowrap}.x-progress-text x-icon{font-size:1.25rem}.x-progress-active .x-progress-bg:before{position:absolute;inset:0;background:var(--x-background-100);border-radius:var(--x-border-radius);opacity:0;animation:x-progress-active 2s cubic-bezier(.23,1,.32,1) infinite;content:\"\"}.x-progress-exception .x-progress-text{color:var(--x-danger)}.x-progress-exception .x-progress-bg,.x-progress-exception .x-progress-step-active{background-color:var(--x-danger)}.x-progress-exception .x-progress-ring-bg{border-color:var(--x-danger)}.x-progress-success .x-progress-text{color:var(--x-success)}.x-progress-success .x-progress-bg,.x-progress-success .x-progress-step-active{background-color:var(--x-success)}.x-progress-success .x-progress-ring-bg{border-color:var(--x-success)}.x-progress-warning .x-progress-text{color:var(--x-warning)}.x-progress-warning .x-progress-bg,.x-progress-warning .x-progress-step-active{background-color:var(--x-warning)}.x-progress-warning .x-progress-ring-bg{border-color:var(--x-warning)}\n"] }]
|
|
330
351
|
}] });
|
|
331
352
|
|
|
332
353
|
class XProgressModule {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-nest-ui-progress.mjs","sources":["../../../../lib/ng-nest/ui/progress/progress.property.ts","../../../../lib/ng-nest/ui/progress/progress.component.ts","../../../../lib/ng-nest/ui/progress/progress.component.html","../../../../lib/ng-nest/ui/progress/progress.module.ts","../../../../lib/ng-nest/ui/progress/ng-nest-ui-progress.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\r\nimport { XPropertyFunction, XToNumber, XToCssPixelValue, XToBoolean } from '@ng-nest/ui/core';\r\nimport type { XNumber, XBoolean } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Progress\r\n * @selector x-progress\r\n * @decorator component\r\n */\r\nexport const XProgressPrefix = 'x-progress';\r\nconst X_PROGRESS_CONFIG_NAME = 'progress';\r\n\r\n/**\r\n * Progress Property\r\n */\r\n@Component({ selector: `${XProgressPrefix}-property`, template: '' })\r\nexport class XProgressProperty extends XPropertyFunction(X_PROGRESS_CONFIG_NAME) {\r\n /**\r\n * @zh_CN 进度条类型\r\n * @en_US Progress bar type\r\n */\r\n readonly type = input<XProgressType>('line');\r\n /**\r\n * @zh_CN 显示进度 0-100\r\n * @en_US Show progress 0-100\r\n */\r\n readonly percent = input<number, XNumber>(0, { transform: XToNumber });\r\n /**\r\n * @zh_CN 进度条高度\r\n * @en_US Height of progress bar\r\n */\r\n readonly height = input<string, XNumber>(this.config?.height ?? '1rem', { transform: XToCssPixelValue });\r\n /**\r\n * @zh_CN 状态\r\n * @en_US Status\r\n */\r\n readonly status = input<XProgressStatus>('normal');\r\n /**\r\n * @zh_CN 是否显示百分比文本信息\r\n * @en_US Whether to display percentage text\r\n */\r\n readonly info = input<boolean, XBoolean>(true, { transform: XToBoolean });\r\n /**\r\n * @zh_CN 文本信息宽度\r\n * @en_US The width of the text information\r\n */\r\n readonly infoWidth = input<string, XNumber>('3.5rem', { transform: XToCssPixelValue });\r\n /**\r\n * @zh_CN 百分比文本是否显示在进度条里面\r\n * @en_US Whether the percentage text is displayed in the progress bar\r\n */\r\n readonly inside = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n /**\r\n * @zh_CN 自定义百分比文本内容\r\n * @en_US Custom percentage text content\r\n */\r\n readonly format = input<(percent: number) => string>();\r\n /**\r\n * @zh_CN 自定义颜色\r\n * @en_US Custom color\r\n */\r\n readonly color = input<XProgressColor>();\r\n /**\r\n * @zh_CN 渐变颜色\r\n * @en_US Gradient color\r\n */\r\n readonly gradient = input<XProgressGradient>();\r\n /**\r\n * @zh_CN 步骤进度条\r\n * @en_US Steps progress bar\r\n */\r\n readonly steps = input<number | null, XNumber>(null, { transform: XToNumber });\r\n /**\r\n * @zh_CN 单个步骤的宽度\r\n * @en_US Single step width\r\n */\r\n readonly stepWidth = input<string, XNumber>('2rem', { transform: XToCssPixelValue });\r\n /**\r\n * @zh_CN 单个步骤的宽度自适应\r\n * @en_US Single step width flex\r\n */\r\n readonly stepFlex = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n /**\r\n * @zh_CN 圆环/仪表盘厚度\r\n * @en_US Ring thickness\r\n */\r\n readonly thickness = input<string, XNumber>('1rem', { transform: XToCssPixelValue });\r\n /**\r\n * @zh_CN 圆环/仪表盘尺寸\r\n * @en_US Ring size\r\n */\r\n readonly size = input<string, XNumber>('8rem', { transform: XToCssPixelValue });\r\n /**\r\n * @zh_CN 仪表盘缺口角度 0~300\r\n * @en_US Dashboard notch angle\r\n */\r\n readonly notchAngle = input<number, XNumber>(80, { transform: XToNumber });\r\n /**\r\n * @zh_CN 分段显示颜色,只适用 type = 'line'\r\n * @en_US Segmentation display color, only use of type = 'line'\r\n */\r\n readonly subsection = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n}\r\n\r\n/**\r\n * @zh_CN 进度条类型\r\n * @en_US Progress bar type\r\n */\r\nexport type XProgressType = 'line' | 'circle' | 'dashboard';\r\n\r\n/**\r\n * @zh_CN 进度条颜色\r\n * @en_US Progress bar color\r\n */\r\nexport type XProgressColor = string | XProgressColorNode[] | Function;\r\n\r\n/**\r\n * @zh_CN 进度条节点颜色\r\n * @en_US Progress bar node color\r\n */\r\nexport interface XProgressColorNode {\r\n /**\r\n * @zh_CN 颜色\r\n * @en_US Color\r\n */\r\n color: string;\r\n /**\r\n * @zh_CN 百分比\r\n * @en_US Percent\r\n */\r\n percent: number;\r\n}\r\n/**\r\n * @zh_CN 状态\r\n * @en_US Status\r\n */\r\nexport type XProgressStatus = 'normal' | 'active' | 'success' | 'exception' | 'warning';\r\n\r\n/**\r\n * @zh_CN 渐变颜色\r\n * @en_US Gradient color\r\n */\r\nexport type XProgressGradient = { direction?: string } & ({ from: string; to: string } | { [percent: string]: string });\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, computed } from '@angular/core';\r\nimport { XProgressPrefix, XProgressProperty } from './progress.property';\r\nimport { XIsFunction, XIsString, XIsObjectArray, XIsEmpty, XIsNumber } from '@ng-nest/ui/core';\r\nimport { XProgressColorNode } from './progress.property';\r\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { XIconComponent } from '@ng-nest/ui/icon';\r\nimport type { XNumber } from '@ng-nest/ui/core';\r\n\r\n@Component({\r\n selector: `${XProgressPrefix}`,\r\n imports: [NgClass, NgTemplateOutlet, FormsModule, XIconComponent],\r\n templateUrl: './progress.component.html',\r\n styleUrls: ['./progress.component.scss'],\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XProgressComponent extends XProgressProperty {\r\n maskWidth = computed(() => (XIsNumber(this.percent()) ? 100 - this.percent() : 100));\r\n\r\n classMap = computed(() => ({\r\n [`${XProgressPrefix}-${this.status()}`]: true,\r\n [`${XProgressPrefix}-${this.type()}`]: true,\r\n [`${XProgressPrefix}-inside`]: this.inside()\r\n }));\r\n\r\n stepsArray = computed(() => {\r\n const steps = this.steps();\r\n if (XIsEmpty(steps)) {\r\n return [];\r\n } else {\r\n const critical = Math.ceil((this.percent() / 100) * steps!);\r\n return Array.from({ length: steps! }).map((_, index) => index + 1 <= critical);\r\n }\r\n });\r\n\r\n currentColor = computed(() => {\r\n if (this.subsection()) return '';\r\n const color = this.color();\r\n if (XIsEmpty(color)) return '';\r\n if (XIsString(color)) {\r\n return color;\r\n } else if (XIsObjectArray(color)) {\r\n return this.getLevelColor(this.percent(), color as XProgressColorNode[]);\r\n } else if (XIsFunction(color)) {\r\n return (color as Function)(this.percent());\r\n }\r\n });\r\n\r\n linearGradient = computed(() => {\r\n if (this.subsection()) return '';\r\n if (XIsEmpty(this.gradient())) {\r\n return '';\r\n } else {\r\n const { from, to, direction = 'to right', ...percents } = this.gradient() || {};\r\n if (Object.keys(percents).length !== 0) {\r\n return `linear-gradient(${direction}, ${this.sortGradient(percents as { [percent: string]: string }).map(\r\n ({ key, value }) => `${value} ${key}%`\r\n )})`;\r\n }\r\n return `linear-gradient(${direction}, ${from}, ${to})`;\r\n }\r\n });\r\n\r\n /**\r\n * circle 中的 100% 等于 clip-path 中的 400%\r\n */\r\n circleClipPath = computed(() => {\r\n if (this.type() !== 'circle') return '';\r\n let value = this.percent() * 4;\r\n let k1 = 'polygon(50% 50%,50% 0%,';\r\n let k2 = k1 + '100% 0%,';\r\n let k3 = k2 + '100% 100%,';\r\n let k4 = k3 + '0% 100%,';\r\n let k5 = k4 + '0% 0%,';\r\n if (value <= 50) {\r\n value += 50;\r\n return `${k1}${value}% 0%)`;\r\n } else if (value > 50 && value <= 150) {\r\n value -= 50;\r\n return `${k2}100% ${value}%)`;\r\n } else if (value > 150 && value <= 250) {\r\n value = 250 - value;\r\n return `${k3}${value}% 100%)`;\r\n } else if (value > 250 && value <= 350) {\r\n value = 350 - value;\r\n return `${k4}0% ${value}%)`;\r\n } else if (value > 350 && value <= 400) {\r\n value -= 350;\r\n return `${k5}${value}% 0%)`;\r\n }\r\n return '';\r\n });\r\n\r\n railValue = computed(() => {\r\n if (this.type() !== 'dashboard') return 0;\r\n return (this.notchAngle() / 360) * 50 * 4;\r\n });\r\n\r\n dashboardStart = computed(() => {\r\n if (this.type() !== 'dashboard') return '';\r\n let k1 = `polygon(50% 50%,`;\r\n let per = 0;\r\n let railValue = this.railValue();\r\n if (railValue <= 50) {\r\n per = 50 - railValue;\r\n return `${k1} ${per}% 100%`;\r\n } else if (railValue > 50 && railValue <= 150) {\r\n per = 150 - railValue;\r\n return `${k1} 0% ${per}%`;\r\n } else if (railValue > 150 && railValue <= 250) {\r\n per = railValue - 150;\r\n return `${k1} ${per}% 0%`;\r\n }\r\n return '';\r\n });\r\n\r\n /**\r\n *\r\n * 90 polygon(50% 50%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);\r\n * 180 polygon(50% 50%, 0% 50%, 0% 0%, 100% 0%, 100% 50%);\r\n * 270 polygon(50% 50%, 0% 0%, 100% 0%);\r\n */\r\n dashboardRailClipPath = computed(() => {\r\n if (this.type() !== 'dashboard') return '';\r\n let start = this.dashboardStart();\r\n let per = 0;\r\n let railValue = this.railValue();\r\n if (railValue <= 50) {\r\n per = 50 - railValue;\r\n return `${start}, 0% 100%, 0% 0%, 100% 0%, 100% 100%, ${100 - per}% 100%)`;\r\n } else if (railValue > 50 && railValue <= 150) {\r\n per = 150 - railValue;\r\n return `${start}, 0% 0%, 100% 0%, 100% ${per}%)`;\r\n } else if (railValue > 150 && railValue <= 250) {\r\n per = railValue - 150;\r\n return `${start}, ${100 - per}% 0%)`;\r\n }\r\n return '';\r\n });\r\n\r\n dashboardClipPath = computed(() => {\r\n if (this.type() !== 'dashboard') return '';\r\n return this.setCircleClipPathValue(this.dashboardStart(), this.railValue());\r\n });\r\n\r\n subLinearGradient = computed(() => {\r\n if (!this.subsection()) return '';\r\n let colors = this.color() as XProgressColorNode[];\r\n if (!colors || colors.length <= 0) {\r\n return `linear-gradient(to right, var(--x-primary) 0%, var(--x-primary) 100%)`;\r\n } else if (colors.length === 1) {\r\n colors.push({ percent: 100, color: 'var(--x-primary)' });\r\n }\r\n colors = colors.sort((a, b) => a.percent - b.percent);\r\n let lgs: string[] = [];\r\n colors.reduce((a, b, index) => {\r\n if (index === 1 && a.percent > 0) {\r\n lgs.push(`${a.color} 0%, ${a.color} ${a.percent}%`);\r\n }\r\n lgs.push(`${b.color} ${a.percent}%, ${b.color} ${b.percent}%`);\r\n if (index === colors.length - 1 && b.percent < 100) {\r\n lgs.push(`var(--x-primary) ${b.percent}%, var(--x-primary) 100%`);\r\n }\r\n return b;\r\n });\r\n return `linear-gradient(to right,${lgs.join(',')})`;\r\n });\r\n\r\n getLevelColor(percent: XNumber, color: XProgressColorNode[]) {\r\n let colors = color.sort((a, b) => a.percent - b.percent);\r\n for (let i = 0; i < colors.length; i++) {\r\n if (colors[i].percent > Number(percent)) {\r\n return colors[i].color;\r\n }\r\n }\r\n return colors[colors.length - 1].color;\r\n }\r\n\r\n sortGradient(percents: { [percent: string]: string }) {\r\n let arr: { key: number; value: string }[] = [];\r\n Object.keys(percents).forEach((key) => {\r\n const value = percents[key];\r\n const numKey = +key.replace('%', '');\r\n if (!isNaN(numKey)) {\r\n arr.push({ key: numKey, value });\r\n }\r\n });\r\n return arr.sort((a, b) => a.key - b.key);\r\n }\r\n\r\n setCircleClipPathValue(start: string, railValue: number) {\r\n let value = ((400 - railValue * 2) / 100) * this.percent();\r\n let val = value + railValue;\r\n if (val <= 50) {\r\n val = 50 - val;\r\n return `${start}, ${val}% 100%)`;\r\n } else if (val > 50 && val <= 150) {\r\n val = 150 - val;\r\n return `${start}, 0% 100%, 0% ${val}%)`;\r\n } else if (val > 150 && val <= 250) {\r\n val = val - 150;\r\n return `${start}, 0% 100%, 0% 0%, ${val}% 0%)`;\r\n } else if (val > 250 && val <= 350) {\r\n val = val - 250;\r\n return `${start}, 0% 100%, 0% 0%, 100% 0%, 100% ${val}%)`;\r\n } else if (val > 350 && val <= 400) {\r\n val = 100 - (val - 350);\r\n return `${start}, 0% 100%, 0% 0%, 100% 0%, 100% 100%, ${val}% 100%)`;\r\n }\r\n return '';\r\n }\r\n}\r\n","<div\r\n class=\"x-progress\"\r\n [ngClass]=\"classMap()\"\r\n [class.x-progress-steps]=\"stepsArray().length > 0\"\r\n [class.x-progress-steps-flex]=\"stepFlex()\"\r\n>\r\n @switch (type()) {\r\n @case ('circle') {\r\n <ng-container *ngTemplateOutlet=\"circleTpl\"> </ng-container>\r\n }\r\n @case ('dashboard') {\r\n <ng-container *ngTemplateOutlet=\"dashboardTpl\"> </ng-container>\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"lineTpl\"> </ng-container>\r\n }\r\n }\r\n</div>\r\n\r\n<ng-template #lineTpl>\r\n @if (stepsArray().length === 0) {\r\n <ng-container *ngTemplateOutlet=\"trackTpl\"></ng-container>\r\n }\r\n @if (stepsArray().length > 0) {\r\n <ng-container *ngTemplateOutlet=\"stepsTpl\"></ng-container>\r\n }\r\n @if (info() && !inside()) {\r\n <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #circleTpl>\r\n <div class=\"x-progress-ring\" [style.width]=\"size()\" [style.height]=\"size()\">\r\n <div class=\"x-progress-ring-rail\" [style.border-width]=\"thickness()\"></div>\r\n <div\r\n class=\"x-progress-ring-bg\"\r\n [style.clip-path]=\"circleClipPath()\"\r\n [style.background-color]=\"currentColor()\"\r\n [style.border-width]=\"thickness()\"\r\n ></div>\r\n <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dashboardTpl>\r\n <div class=\"x-progress-ring\" [style.width]=\"size()\" [style.height]=\"size()\">\r\n <div\r\n class=\"x-progress-ring-rail\"\r\n [style.clip-path]=\"dashboardRailClipPath()\"\r\n [style.border-width]=\"thickness()\"\r\n ></div>\r\n <div\r\n class=\"x-progress-ring-bg\"\r\n [style.clip-path]=\"dashboardClipPath()\"\r\n [style.background-color]=\"currentColor()\"\r\n [style.border-width]=\"thickness()\"\r\n ></div>\r\n <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #trackTpl>\r\n <div class=\"x-progress-track\">\r\n <div\r\n class=\"x-progress-rail\"\r\n [class.x-progress-mask]=\"subsection()\"\r\n [style.background-image]=\"subsection() ? subLinearGradient() : 'none'\"\r\n >\r\n <div\r\n class=\"x-progress-bg\"\r\n [style.width.%]=\"percent()\"\r\n [style.background-color]=\"currentColor()\"\r\n [style.background-image]=\"linearGradient()\"\r\n [style.height]=\"height()\"\r\n [style.line-height]=\"height()\"\r\n >\r\n @if (info() && inside()) {\r\n <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n }\r\n </div>\r\n @if (subsection()) {\r\n <div\r\n class=\"x-progress-bg-mask\"\r\n [style.width.%]=\"maskWidth()\"\r\n [style.height]=\"height()\"\r\n [style.line-height]=\"height()\"\r\n ></div>\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #stepsTpl>\r\n @for (step of stepsArray(); track i; let i = $index) {\r\n <div\r\n class=\"x-progress-step\"\r\n [class.x-progress-step-active]=\"step\"\r\n [style.background-color]=\"currentColor()\"\r\n [style.width]=\"stepWidth()\"\r\n [style.flex]=\"stepFlex() ? 1 : 'none'\"\r\n [style.height]=\"height()\"\r\n [style.line-height]=\"height()\"\r\n ></div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #textTpl>\r\n <span class=\"x-progress-text\" [style.width]=\"infoWidth()\">\r\n @switch (status()) {\r\n @case ('success') {\r\n <x-icon type=\"fto-check-circle\"></x-icon>\r\n }\r\n @case ('exception') {\r\n <x-icon type=\"fto-x-circle\"></x-icon>\r\n }\r\n @case ('warning') {\r\n <x-icon type=\"fto-help-circle\"></x-icon>\r\n }\r\n @default {\r\n @if (format()) {\r\n {{ format()!(percent()) }}\r\n } @else {\r\n {{ percent() }}%\r\n }\r\n }\r\n }\r\n </span>\r\n</ng-template>\r\n","import { NgModule } from '@angular/core';\r\nimport { XProgressComponent } from './progress.component';\r\n\r\n@NgModule({\r\n exports: [XProgressComponent],\r\n imports: [XProgressComponent]\r\n})\r\nexport class XProgressModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ng-nest-ui-progress.mjs","sources":["../../../../lib/ng-nest/ui/progress/progress.property.ts","../../../../lib/ng-nest/ui/progress/progress.component.ts","../../../../lib/ng-nest/ui/progress/progress.component.html","../../../../lib/ng-nest/ui/progress/progress.module.ts","../../../../lib/ng-nest/ui/progress/ng-nest-ui-progress.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\r\nimport { XPropertyFunction, XToNumber, XToCssPixelValue, XToBoolean } from '@ng-nest/ui/core';\r\nimport type { XNumber, XBoolean } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Progress\r\n * @selector x-progress\r\n * @decorator component\r\n */\r\nexport const XProgressPrefix = 'x-progress';\r\nconst X_PROGRESS_CONFIG_NAME = 'progress';\r\n\r\n/**\r\n * Progress Property\r\n */\r\n@Component({ selector: `${XProgressPrefix}-property`, template: '' })\r\nexport class XProgressProperty extends XPropertyFunction(X_PROGRESS_CONFIG_NAME) {\r\n /**\r\n * @zh_CN 进度条类型\r\n * @en_US Progress bar type\r\n */\r\n readonly type = input<XProgressType>('line');\r\n /**\r\n * @zh_CN 显示进度 0-100\r\n * @en_US Show progress 0-100\r\n */\r\n readonly percent = input<number, XNumber>(0, { transform: XToNumber });\r\n /**\r\n * @zh_CN 进度条高度\r\n * @en_US Height of progress bar\r\n */\r\n readonly height = input<string, XNumber>(this.config?.height ?? '1rem', { transform: XToCssPixelValue });\r\n /**\r\n * @zh_CN 状态\r\n * @en_US Status\r\n */\r\n readonly status = input<XProgressStatus>('normal');\r\n /**\r\n * @zh_CN 是否显示百分比文本信息\r\n * @en_US Whether to display percentage text\r\n */\r\n readonly info = input<boolean, XBoolean>(true, { transform: XToBoolean });\r\n /**\r\n * @zh_CN 文本信息宽度\r\n * @en_US The width of the text information\r\n */\r\n readonly infoWidth = input<string, XNumber>('3.5rem', { transform: XToCssPixelValue });\r\n /**\r\n * @zh_CN 百分比文本是否显示在进度条里面\r\n * @en_US Whether the percentage text is displayed in the progress bar\r\n */\r\n readonly inside = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n /**\r\n * @zh_CN 自定义百分比文本内容\r\n * @en_US Custom percentage text content\r\n */\r\n readonly format = input<(percent: number) => string>();\r\n /**\r\n * @zh_CN 自定义颜色\r\n * @en_US Custom color\r\n */\r\n readonly color = input<XProgressColor>();\r\n /**\r\n * @zh_CN 自定义轨道颜色\r\n * @en_US Custom rail color\r\n */\r\n readonly railColor = input<XProgressColor>();\r\n /**\r\n * @zh_CN 渐变颜色\r\n * @en_US Gradient color\r\n */\r\n readonly gradient = input<XProgressGradient>();\r\n /**\r\n * @zh_CN 步骤进度条\r\n * @en_US Steps progress bar\r\n */\r\n readonly steps = input<number | null, XNumber>(null, { transform: XToNumber });\r\n /**\r\n * @zh_CN 单个步骤的宽度\r\n * @en_US Single step width\r\n */\r\n readonly stepWidth = input<string, XNumber>('2rem', { transform: XToCssPixelValue });\r\n /**\r\n * @zh_CN 单个步骤的宽度自适应\r\n * @en_US Single step width flex\r\n */\r\n readonly stepFlex = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n /**\r\n * @zh_CN 圆环/仪表盘厚度\r\n * @en_US Ring thickness\r\n */\r\n readonly thickness = input<string, XNumber>('1rem', { transform: XToCssPixelValue });\r\n /**\r\n * @zh_CN 圆环/仪表盘尺寸\r\n * @en_US Ring size\r\n */\r\n readonly size = input<string, XNumber>('8rem', { transform: XToCssPixelValue });\r\n /**\r\n * @zh_CN 仪表盘缺口角度 0~300\r\n * @en_US Dashboard notch angle\r\n */\r\n readonly notchAngle = input<number, XNumber>(80, { transform: XToNumber });\r\n /**\r\n * @zh_CN 分段显示颜色,只适用 type = 'line'\r\n * @en_US Segmentation display color, only use of type = 'line'\r\n */\r\n readonly subsection = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n}\r\n\r\n/**\r\n * @zh_CN 进度条类型\r\n * @en_US Progress bar type\r\n */\r\nexport type XProgressType = 'line' | 'circle' | 'dashboard';\r\n\r\n/**\r\n * @zh_CN 进度条颜色\r\n * @en_US Progress bar color\r\n */\r\nexport type XProgressColor = string | XProgressColorNode[] | Function;\r\n\r\n/**\r\n * @zh_CN 进度条节点颜色\r\n * @en_US Progress bar node color\r\n */\r\nexport interface XProgressColorNode {\r\n /**\r\n * @zh_CN 颜色\r\n * @en_US Color\r\n */\r\n color: string;\r\n /**\r\n * @zh_CN 百分比\r\n * @en_US Percent\r\n */\r\n percent: number;\r\n}\r\n/**\r\n * @zh_CN 状态\r\n * @en_US Status\r\n */\r\nexport type XProgressStatus = 'normal' | 'active' | 'success' | 'exception' | 'warning';\r\n\r\n/**\r\n * @zh_CN 渐变颜色\r\n * @en_US Gradient color\r\n */\r\nexport type XProgressGradient = { direction?: string } & ({ from: string; to: string } | { [percent: string]: string });\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, computed } from '@angular/core';\r\nimport { XProgressPrefix, XProgressProperty } from './progress.property';\r\nimport { XIsFunction, XIsString, XIsObjectArray, XIsEmpty, XIsNumber } from '@ng-nest/ui/core';\r\nimport { XProgressColorNode } from './progress.property';\r\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { XIconComponent } from '@ng-nest/ui/icon';\r\nimport type { XNumber } from '@ng-nest/ui/core';\r\n\r\n@Component({\r\n selector: `${XProgressPrefix}`,\r\n imports: [NgClass, NgTemplateOutlet, FormsModule, XIconComponent],\r\n templateUrl: './progress.component.html',\r\n styleUrls: ['./progress.component.scss'],\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XProgressComponent extends XProgressProperty {\r\n maskWidth = computed(() => (XIsNumber(this.percent()) ? 100 - this.percent() : 100));\r\n\r\n classMap = computed(() => ({\r\n [`${XProgressPrefix}-${this.status()}`]: true,\r\n [`${XProgressPrefix}-${this.type()}`]: true,\r\n [`${XProgressPrefix}-inside`]: this.inside()\r\n }));\r\n\r\n stepsArray = computed(() => {\r\n const steps = this.steps();\r\n if (XIsEmpty(steps)) {\r\n return [];\r\n } else {\r\n const critical = Math.ceil((this.percent() / 100) * steps!);\r\n return Array.from({ length: steps! }).map((_, index) => index + 1 <= critical);\r\n }\r\n });\r\n\r\n currentColor = computed(() => {\r\n if (this.subsection()) return '';\r\n const color = this.color();\r\n if (XIsEmpty(color)) return '';\r\n if (XIsString(color)) {\r\n return color;\r\n } else if (XIsObjectArray(color)) {\r\n return this.getLevelColor(this.percent(), color as XProgressColorNode[]);\r\n } else if (XIsFunction(color)) {\r\n return (color as Function)(this.percent());\r\n }\r\n });\r\n\r\n currentRailColor = computed(() => {\r\n if (this.subsection()) return '';\r\n const color = this.railColor();\r\n if (XIsEmpty(color)) return '';\r\n if (XIsString(color)) {\r\n return color;\r\n } else if (XIsObjectArray(color)) {\r\n return this.getLevelColor(this.percent(), color as XProgressColorNode[]);\r\n } else if (XIsFunction(color)) {\r\n return (color as Function)(this.percent());\r\n }\r\n });\r\n\r\n linearGradient = computed(() => {\r\n if (this.subsection()) return '';\r\n if (XIsEmpty(this.gradient())) {\r\n return '';\r\n } else {\r\n const { from, to, direction = 'to right', ...percents } = this.gradient() || {};\r\n if (Object.keys(percents).length !== 0) {\r\n return `linear-gradient(${direction}, ${this.sortGradient(percents as { [percent: string]: string }).map(\r\n ({ key, value }) => `${value} ${key}%`\r\n )})`;\r\n }\r\n return `linear-gradient(${direction}, ${from}, ${to})`;\r\n }\r\n });\r\n\r\n /**\r\n * circle 中的 100% 等于 clip-path 中的 400%\r\n */\r\n circleClipPath = computed(() => {\r\n if (this.type() !== 'circle') return '';\r\n let value = this.percent() * 4;\r\n let k1 = 'polygon(50% 50%,50% 0%,';\r\n let k2 = k1 + '100% 0%,';\r\n let k3 = k2 + '100% 100%,';\r\n let k4 = k3 + '0% 100%,';\r\n let k5 = k4 + '0% 0%,';\r\n if (value <= 50) {\r\n value += 50;\r\n return `${k1}${value}% 0%)`;\r\n } else if (value > 50 && value <= 150) {\r\n value -= 50;\r\n return `${k2}100% ${value}%)`;\r\n } else if (value > 150 && value <= 250) {\r\n value = 250 - value;\r\n return `${k3}${value}% 100%)`;\r\n } else if (value > 250 && value <= 350) {\r\n value = 350 - value;\r\n return `${k4}0% ${value}%)`;\r\n } else if (value > 350 && value <= 400) {\r\n value -= 350;\r\n return `${k5}${value}% 0%)`;\r\n }\r\n return '';\r\n });\r\n\r\n railValue = computed(() => {\r\n if (this.type() !== 'dashboard') return 0;\r\n return (this.notchAngle() / 360) * 50 * 4;\r\n });\r\n\r\n dashboardStart = computed(() => {\r\n if (this.type() !== 'dashboard') return '';\r\n let k1 = `polygon(50% 50%,`;\r\n let per = 0;\r\n let railValue = this.railValue();\r\n if (railValue <= 50) {\r\n per = 50 - railValue;\r\n return `${k1} ${per}% 100%`;\r\n } else if (railValue > 50 && railValue <= 150) {\r\n per = 150 - railValue;\r\n return `${k1} 0% ${per}%`;\r\n } else if (railValue > 150 && railValue <= 250) {\r\n per = railValue - 150;\r\n return `${k1} ${per}% 0%`;\r\n }\r\n return '';\r\n });\r\n\r\n /**\r\n *\r\n * 90 polygon(50% 50%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);\r\n * 180 polygon(50% 50%, 0% 50%, 0% 0%, 100% 0%, 100% 50%);\r\n * 270 polygon(50% 50%, 0% 0%, 100% 0%);\r\n */\r\n dashboardRailClipPath = computed(() => {\r\n if (this.type() !== 'dashboard') return '';\r\n let start = this.dashboardStart();\r\n let per = 0;\r\n let railValue = this.railValue();\r\n if (railValue <= 50) {\r\n per = 50 - railValue;\r\n return `${start}, 0% 100%, 0% 0%, 100% 0%, 100% 100%, ${100 - per}% 100%)`;\r\n } else if (railValue > 50 && railValue <= 150) {\r\n per = 150 - railValue;\r\n return `${start}, 0% 0%, 100% 0%, 100% ${per}%)`;\r\n } else if (railValue > 150 && railValue <= 250) {\r\n per = railValue - 150;\r\n return `${start}, ${100 - per}% 0%)`;\r\n }\r\n return '';\r\n });\r\n\r\n dashboardClipPath = computed(() => {\r\n if (this.type() !== 'dashboard') return '';\r\n return this.setCircleClipPathValue(this.dashboardStart(), this.railValue());\r\n });\r\n\r\n subLinearGradient = computed(() => {\r\n if (!this.subsection()) return '';\r\n let colors = this.color() as XProgressColorNode[];\r\n if (!colors || colors.length <= 0) {\r\n return `linear-gradient(to right, var(--x-primary) 0%, var(--x-primary) 100%)`;\r\n } else if (colors.length === 1) {\r\n colors.push({ percent: 100, color: 'var(--x-primary)' });\r\n }\r\n colors = colors.sort((a, b) => a.percent - b.percent);\r\n let lgs: string[] = [];\r\n colors.reduce((a, b, index) => {\r\n if (index === 1 && a.percent > 0) {\r\n lgs.push(`${a.color} 0%, ${a.color} ${a.percent}%`);\r\n }\r\n lgs.push(`${b.color} ${a.percent}%, ${b.color} ${b.percent}%`);\r\n if (index === colors.length - 1 && b.percent < 100) {\r\n lgs.push(`var(--x-primary) ${b.percent}%, var(--x-primary) 100%`);\r\n }\r\n return b;\r\n });\r\n return `linear-gradient(to right,${lgs.join(',')})`;\r\n });\r\n\r\n getLevelColor(percent: XNumber, color: XProgressColorNode[]) {\r\n let colors = color.sort((a, b) => a.percent - b.percent);\r\n for (let i = 0; i < colors.length; i++) {\r\n if (colors[i].percent > Number(percent)) {\r\n return colors[i].color;\r\n }\r\n }\r\n return colors[colors.length - 1].color;\r\n }\r\n\r\n sortGradient(percents: { [percent: string]: string }) {\r\n let arr: { key: number; value: string }[] = [];\r\n Object.keys(percents).forEach((key) => {\r\n const value = percents[key];\r\n const numKey = +key.replace('%', '');\r\n if (!isNaN(numKey)) {\r\n arr.push({ key: numKey, value });\r\n }\r\n });\r\n return arr.sort((a, b) => a.key - b.key);\r\n }\r\n\r\n setCircleClipPathValue(start: string, railValue: number) {\r\n let value = ((400 - railValue * 2) / 100) * this.percent();\r\n let val = value + railValue;\r\n if (val <= 50) {\r\n val = 50 - val;\r\n return `${start}, ${val}% 100%)`;\r\n } else if (val > 50 && val <= 150) {\r\n val = 150 - val;\r\n return `${start}, 0% 100%, 0% ${val}%)`;\r\n } else if (val > 150 && val <= 250) {\r\n val = val - 150;\r\n return `${start}, 0% 100%, 0% 0%, ${val}% 0%)`;\r\n } else if (val > 250 && val <= 350) {\r\n val = val - 250;\r\n return `${start}, 0% 100%, 0% 0%, 100% 0%, 100% ${val}%)`;\r\n } else if (val > 350 && val <= 400) {\r\n val = 100 - (val - 350);\r\n return `${start}, 0% 100%, 0% 0%, 100% 0%, 100% 100%, ${val}% 100%)`;\r\n }\r\n return '';\r\n }\r\n}\r\n","<div\r\n class=\"x-progress\"\r\n [ngClass]=\"classMap()\"\r\n [class.x-progress-steps]=\"stepsArray().length > 0\"\r\n [class.x-progress-steps-flex]=\"stepFlex()\"\r\n>\r\n @switch (type()) {\r\n @case ('circle') {\r\n <ng-container *ngTemplateOutlet=\"circleTpl\"> </ng-container>\r\n }\r\n @case ('dashboard') {\r\n <ng-container *ngTemplateOutlet=\"dashboardTpl\"> </ng-container>\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"lineTpl\"> </ng-container>\r\n }\r\n }\r\n</div>\r\n\r\n<ng-template #lineTpl>\r\n @if (stepsArray().length === 0) {\r\n <ng-container *ngTemplateOutlet=\"trackTpl\"></ng-container>\r\n }\r\n @if (stepsArray().length > 0) {\r\n <ng-container *ngTemplateOutlet=\"stepsTpl\"></ng-container>\r\n }\r\n @if (info() && !inside()) {\r\n <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #circleTpl>\r\n <div class=\"x-progress-ring\" [style.width]=\"size()\" [style.height]=\"size()\">\r\n <div\r\n class=\"x-progress-ring-rail\"\r\n [style.border-width]=\"thickness()\"\r\n [style.border-color]=\"currentRailColor()\"\r\n ></div>\r\n <div\r\n class=\"x-progress-ring-bg\"\r\n [style.clip-path]=\"circleClipPath()\"\r\n [style.border-color]=\"currentColor()\"\r\n [style.border-width]=\"thickness()\"\r\n ></div>\r\n <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dashboardTpl>\r\n <div class=\"x-progress-ring\" [style.width]=\"size()\" [style.height]=\"size()\">\r\n <div\r\n class=\"x-progress-ring-rail\"\r\n [style.clip-path]=\"dashboardRailClipPath()\"\r\n [style.border-color]=\"currentRailColor()\"\r\n [style.border-width]=\"thickness()\"\r\n ></div>\r\n <div\r\n class=\"x-progress-ring-bg\"\r\n [style.clip-path]=\"dashboardClipPath()\"\r\n [style.border-color]=\"currentColor()\"\r\n [style.border-width]=\"thickness()\"\r\n ></div>\r\n <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #trackTpl>\r\n <div class=\"x-progress-track\">\r\n <div\r\n class=\"x-progress-rail\"\r\n [class.x-progress-mask]=\"subsection()\"\r\n [style.background-color]=\"currentRailColor()\"\r\n [style.background-image]=\"subsection() ? subLinearGradient() : 'none'\"\r\n >\r\n <div\r\n class=\"x-progress-bg\"\r\n [style.width.%]=\"percent()\"\r\n [style.background-color]=\"currentColor()\"\r\n [style.background-image]=\"linearGradient()\"\r\n [style.height]=\"height()\"\r\n [style.line-height]=\"height()\"\r\n >\r\n @if (info() && inside()) {\r\n <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n }\r\n </div>\r\n @if (subsection()) {\r\n <div\r\n class=\"x-progress-bg-mask\"\r\n [style.width.%]=\"maskWidth()\"\r\n [style.height]=\"height()\"\r\n [style.line-height]=\"height()\"\r\n ></div>\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #stepsTpl>\r\n @for (step of stepsArray(); track i; let i = $index) {\r\n <div\r\n class=\"x-progress-step\"\r\n [class.x-progress-step-active]=\"step\"\r\n [style.background-color]=\"step ? currentColor() : currentRailColor()\"\r\n [style.width]=\"stepWidth()\"\r\n [style.flex]=\"stepFlex() ? 1 : 'none'\"\r\n [style.height]=\"height()\"\r\n [style.line-height]=\"height()\"\r\n ></div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #textTpl>\r\n <span class=\"x-progress-text\" [style.width]=\"infoWidth()\">\r\n @switch (status()) {\r\n @case ('success') {\r\n <x-icon type=\"fto-check-circle\"></x-icon>\r\n }\r\n @case ('exception') {\r\n <x-icon type=\"fto-x-circle\"></x-icon>\r\n }\r\n @case ('warning') {\r\n <x-icon type=\"fto-help-circle\"></x-icon>\r\n }\r\n @default {\r\n @if (format()) {\r\n {{ format()!(percent()) }}\r\n } @else {\r\n {{ percent() }}%\r\n }\r\n }\r\n }\r\n </span>\r\n</ng-template>\r\n","import { NgModule } from '@angular/core';\r\nimport { XProgressComponent } from './progress.component';\r\n\r\n@NgModule({\r\n exports: [XProgressComponent],\r\n imports: [XProgressComponent]\r\n})\r\nexport class XProgressModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, output, Component, signal, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
|
|
3
|
+
import { XPropertyFunction, XToBoolean, XIsChange, XSetData } from '@ng-nest/ui/core';
|
|
4
|
+
import { XOutletDirective } from '@ng-nest/ui/outlet';
|
|
5
|
+
import { Subject } from 'rxjs';
|
|
6
|
+
import { XIconComponent } from '@ng-nest/ui/icon';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Prompts
|
|
10
|
+
* @selector x-prompts
|
|
11
|
+
* @decorator component
|
|
12
|
+
*/
|
|
13
|
+
const XPromptsPrefix = 'x-prompts';
|
|
14
|
+
const X_PROPMTS_CONFIG_NAME = 'prompts';
|
|
15
|
+
/**
|
|
16
|
+
* Prompts Property
|
|
17
|
+
*/
|
|
18
|
+
class XPromptsProperty extends XPropertyFunction(X_PROPMTS_CONFIG_NAME) {
|
|
19
|
+
constructor() {
|
|
20
|
+
super(...arguments);
|
|
21
|
+
/**
|
|
22
|
+
* @zh_CN 显示标题,支持自定义模板
|
|
23
|
+
* @en_US Display title, support custom template
|
|
24
|
+
*/
|
|
25
|
+
this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
26
|
+
/**
|
|
27
|
+
* @zh_CN 列表数据
|
|
28
|
+
* @en_US List data
|
|
29
|
+
*/
|
|
30
|
+
this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
31
|
+
/**
|
|
32
|
+
* @zh_CN 纵向展示
|
|
33
|
+
* @en_US List vertical display
|
|
34
|
+
*/
|
|
35
|
+
this.vertical = input(this.config?.vertical ?? false, ...(ngDevMode ? [{ debugName: "vertical", transform: XToBoolean }] : [{ transform: XToBoolean }]));
|
|
36
|
+
/**
|
|
37
|
+
* @zh_CN Item 点击事件
|
|
38
|
+
* @en_US Item click event
|
|
39
|
+
*/
|
|
40
|
+
this.itemClick = output();
|
|
41
|
+
}
|
|
42
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XPromptsProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
43
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XPromptsProperty, isStandalone: true, selector: "x-prompts-property", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
|
|
44
|
+
}
|
|
45
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XPromptsProperty, decorators: [{
|
|
46
|
+
type: Component,
|
|
47
|
+
args: [{ selector: `${XPromptsPrefix}-property`, template: '' }]
|
|
48
|
+
}] });
|
|
49
|
+
|
|
50
|
+
class XPromptsComponent extends XPromptsProperty {
|
|
51
|
+
constructor() {
|
|
52
|
+
super(...arguments);
|
|
53
|
+
this.nodes = signal([], ...(ngDevMode ? [{ debugName: "nodes" }] : []));
|
|
54
|
+
this.unSubject = new Subject();
|
|
55
|
+
}
|
|
56
|
+
ngOnChanges(changes) {
|
|
57
|
+
const { data } = changes;
|
|
58
|
+
XIsChange(data) && this.setData();
|
|
59
|
+
}
|
|
60
|
+
ngOnDestroy() {
|
|
61
|
+
this.unSubject.next();
|
|
62
|
+
this.unSubject.complete();
|
|
63
|
+
}
|
|
64
|
+
onItemClick(node) {
|
|
65
|
+
this.itemClick.emit(node);
|
|
66
|
+
}
|
|
67
|
+
setData() {
|
|
68
|
+
XSetData(this.data(), this.unSubject, true).subscribe((x) => {
|
|
69
|
+
this.nodes.set(x);
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XPromptsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
73
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XPromptsComponent, isStandalone: true, selector: "x-prompts", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"x-prompts\" [class.x-prompts-vertical]=\"vertical()\">\r\n <div class=\"x-prompts-title\">\r\n <ng-container *xOutlet=\"title()\">{{ title() }}</ng-container>\r\n </div>\r\n <div class=\"x-prompts-list\">\r\n @for (item of nodes(); track item.id) {\r\n <div class=\"x-prompts-item\" [class.x-disabled]=\"item.disabled\" (click)=\"onItemClick(item)\">\r\n @if (item.icon) {\r\n <div class=\"x-prompts-item-icon\">\r\n <x-icon [type]=\"item.icon\" [style]=\"item.iconStyle\"></x-icon>\r\n </div>\r\n }\r\n <div class=\"x-prompts-item-content\">\r\n @if (item.label) {\r\n <div class=\"x-prompts-item-label\">{{ item.label }}</div>\r\n }\r\n @if (item.description) {\r\n <div class=\"x-prompts-item-description\">{{ item.description }}</div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".x-prompts{margin:0;padding:0}.x-prompts{width:100%}.x-prompts-title{color:var(--x-text-400);margin-bottom:.5rem}.x-prompts-list{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;list-style:none;padding-inline-start:0;margin-block:0;align-items:stretch}.x-prompts-vertical .x-prompts-list{flex-direction:column;align-items:flex-start}.x-prompts-item{flex:none;min-width:10rem;display:inline-flex;gap:.5rem;padding:.5rem 1rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);transition:all var(--x-animation-duration-base);cursor:pointer}.x-prompts-item:hover:not(.x-disabled){background-color:var(--x-background-a200)}.x-prompts-item.x-disabled{cursor:default;background-color:var(--x-background-a300)}.x-prompts-item-content{flex:1;display:flex;flex-direction:column;gap:.25rem}.x-prompts-item-label{margin:0;font-weight:600}.x-prompts-item-description{color:var(--x-text-400)}\n"], dependencies: [{ kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
74
|
+
}
|
|
75
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XPromptsComponent, decorators: [{
|
|
76
|
+
type: Component,
|
|
77
|
+
args: [{ selector: 'x-prompts', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [XOutletDirective, XIconComponent], template: "<div class=\"x-prompts\" [class.x-prompts-vertical]=\"vertical()\">\r\n <div class=\"x-prompts-title\">\r\n <ng-container *xOutlet=\"title()\">{{ title() }}</ng-container>\r\n </div>\r\n <div class=\"x-prompts-list\">\r\n @for (item of nodes(); track item.id) {\r\n <div class=\"x-prompts-item\" [class.x-disabled]=\"item.disabled\" (click)=\"onItemClick(item)\">\r\n @if (item.icon) {\r\n <div class=\"x-prompts-item-icon\">\r\n <x-icon [type]=\"item.icon\" [style]=\"item.iconStyle\"></x-icon>\r\n </div>\r\n }\r\n <div class=\"x-prompts-item-content\">\r\n @if (item.label) {\r\n <div class=\"x-prompts-item-label\">{{ item.label }}</div>\r\n }\r\n @if (item.description) {\r\n <div class=\"x-prompts-item-description\">{{ item.description }}</div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".x-prompts{margin:0;padding:0}.x-prompts{width:100%}.x-prompts-title{color:var(--x-text-400);margin-bottom:.5rem}.x-prompts-list{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;list-style:none;padding-inline-start:0;margin-block:0;align-items:stretch}.x-prompts-vertical .x-prompts-list{flex-direction:column;align-items:flex-start}.x-prompts-item{flex:none;min-width:10rem;display:inline-flex;gap:.5rem;padding:.5rem 1rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-radius:var(--x-border-radius);transition:all var(--x-animation-duration-base);cursor:pointer}.x-prompts-item:hover:not(.x-disabled){background-color:var(--x-background-a200)}.x-prompts-item.x-disabled{cursor:default;background-color:var(--x-background-a300)}.x-prompts-item-content{flex:1;display:flex;flex-direction:column;gap:.25rem}.x-prompts-item-label{margin:0;font-weight:600}.x-prompts-item-description{color:var(--x-text-400)}\n"] }]
|
|
78
|
+
}] });
|
|
79
|
+
|
|
80
|
+
class XPromptsModule {
|
|
81
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XPromptsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
82
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: XPromptsModule, imports: [XPromptsComponent], exports: [XPromptsComponent] }); }
|
|
83
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XPromptsModule, imports: [XPromptsComponent] }); }
|
|
84
|
+
}
|
|
85
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XPromptsModule, decorators: [{
|
|
86
|
+
type: NgModule,
|
|
87
|
+
args: [{
|
|
88
|
+
exports: [XPromptsComponent],
|
|
89
|
+
imports: [XPromptsComponent]
|
|
90
|
+
}]
|
|
91
|
+
}] });
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* Generated bundle index. Do not edit.
|
|
95
|
+
*/
|
|
96
|
+
|
|
97
|
+
export { XPromptsComponent, XPromptsModule, XPromptsPrefix, XPromptsProperty };
|
|
98
|
+
//# sourceMappingURL=ng-nest-ui-prompts.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ng-nest-ui-prompts.mjs","sources":["../../../../lib/ng-nest/ui/prompts/prompts.property.ts","../../../../lib/ng-nest/ui/prompts/prompts.component.ts","../../../../lib/ng-nest/ui/prompts/prompts.component.html","../../../../lib/ng-nest/ui/prompts/prompts.module.ts","../../../../lib/ng-nest/ui/prompts/ng-nest-ui-prompts.ts"],"sourcesContent":["import { Component, input, output } from '@angular/core';\r\nimport { XBoolean, XData, XIdentityProperty, XPropertyFunction, XStyle, XTemplate, XToBoolean } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Prompts\r\n * @selector x-prompts\r\n * @decorator component\r\n */\r\nexport const XPromptsPrefix = 'x-prompts';\r\nconst X_PROPMTS_CONFIG_NAME = 'prompts';\r\n\r\n/**\r\n * Prompts Property\r\n */\r\n@Component({ selector: `${XPromptsPrefix}-property`, template: '' })\r\nexport class XPromptsProperty extends XPropertyFunction(X_PROPMTS_CONFIG_NAME) {\r\n /**\r\n * @zh_CN 显示标题,支持自定义模板\r\n * @en_US Display title, support custom template\r\n */\r\n readonly title = input<XTemplate>();\r\n /**\r\n * @zh_CN 列表数据\r\n * @en_US List data\r\n */\r\n readonly data = input<XData<XPromptsNode>>([]);\r\n /**\r\n * @zh_CN 纵向展示\r\n * @en_US List vertical display\r\n */\r\n readonly vertical = input<boolean, XBoolean>(this.config?.vertical ?? false, { transform: XToBoolean });\r\n /**\r\n * @zh_CN Item 点击事件\r\n * @en_US Item click event\r\n */\r\n readonly itemClick = output<XPromptsNode>();\r\n}\r\n\r\n/**\r\n * @zh_CN 提示词\r\n * @en_US Promtp\r\n */\r\nexport interface XPromptsNode extends XIdentityProperty {\r\n /**\r\n * @zh_CN 描述\r\n * @en_US Description\r\n */\r\n description: string;\r\n /**\r\n * @zh_CN 图标\r\n * @en_US Icon\r\n */\r\n icon?: string;\r\n /**\r\n * @zh_CN 图标样式\r\n * @en_US Icon style\r\n */\r\n iconStyle?: XStyle;\r\n /**\r\n * @zh_CN 是否禁用\r\n * @en_US Whether to disable\r\n */\r\n disabled?: boolean;\r\n}\r\n","import { ChangeDetectionStrategy, Component, signal, SimpleChanges, ViewEncapsulation } from '@angular/core';\r\nimport { XPromptsProperty, XPromptsNode } from './prompts.property';\r\nimport { XOutletDirective } from '@ng-nest/ui/outlet';\r\nimport { XIsChange, XSetData } from '@ng-nest/ui/core';\r\nimport { Subject } from 'rxjs';\r\nimport { XIconComponent } from '@ng-nest/ui/icon';\r\n\r\n@Component({\r\n selector: 'x-prompts',\r\n templateUrl: './prompts.component.html',\r\n styleUrls: ['./prompts.component.scss'],\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n imports: [XOutletDirective, XIconComponent]\r\n})\r\nexport class XPromptsComponent extends XPromptsProperty {\r\n nodes = signal<XPromptsNode[]>([]);\r\n\r\n unSubject = new Subject<void>();\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n const { data } = changes;\r\n XIsChange(data) && this.setData();\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.unSubject.next();\r\n this.unSubject.complete();\r\n }\r\n\r\n onItemClick(node: XPromptsNode) {\r\n this.itemClick.emit(node);\r\n }\r\n\r\n private setData() {\r\n XSetData<XPromptsNode>(this.data(), this.unSubject, true).subscribe((x) => {\r\n this.nodes.set(x);\r\n });\r\n }\r\n}\r\n","<div class=\"x-prompts\" [class.x-prompts-vertical]=\"vertical()\">\r\n <div class=\"x-prompts-title\">\r\n <ng-container *xOutlet=\"title()\">{{ title() }}</ng-container>\r\n </div>\r\n <div class=\"x-prompts-list\">\r\n @for (item of nodes(); track item.id) {\r\n <div class=\"x-prompts-item\" [class.x-disabled]=\"item.disabled\" (click)=\"onItemClick(item)\">\r\n @if (item.icon) {\r\n <div class=\"x-prompts-item-icon\">\r\n <x-icon [type]=\"item.icon\" [style]=\"item.iconStyle\"></x-icon>\r\n </div>\r\n }\r\n <div class=\"x-prompts-item-content\">\r\n @if (item.label) {\r\n <div class=\"x-prompts-item-label\">{{ item.label }}</div>\r\n }\r\n @if (item.description) {\r\n <div class=\"x-prompts-item-description\">{{ item.description }}</div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { XPromptsComponent } from './prompts.component';\r\n\r\n@NgModule({\r\n exports: [XPromptsComponent],\r\n imports: [XPromptsComponent]\r\n})\r\nexport class XPromptsModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -817,7 +817,7 @@ class XSelectComponent extends XSelectProperty {
|
|
|
817
817
|
if (inx >= 0) {
|
|
818
818
|
this.value.update((x) => {
|
|
819
819
|
x.splice(inx, 1);
|
|
820
|
-
return x;
|
|
820
|
+
return [...x];
|
|
821
821
|
});
|
|
822
822
|
if (this.onChange)
|
|
823
823
|
this.onChange(this.value());
|
|
@@ -964,14 +964,14 @@ class XSelectComponent extends XSelectProperty {
|
|
|
964
964
|
if (node.selected) {
|
|
965
965
|
this.value.update((x) => {
|
|
966
966
|
x.push(node);
|
|
967
|
-
return x;
|
|
967
|
+
return [...x];
|
|
968
968
|
});
|
|
969
969
|
}
|
|
970
970
|
else {
|
|
971
971
|
let inx = this.value().findIndex((x) => x.id === node.id);
|
|
972
972
|
this.value.update((x) => {
|
|
973
973
|
x.splice(inx, 1);
|
|
974
|
-
return x;
|
|
974
|
+
return [...x];
|
|
975
975
|
});
|
|
976
976
|
}
|
|
977
977
|
}
|
|
@@ -979,13 +979,13 @@ class XSelectComponent extends XSelectProperty {
|
|
|
979
979
|
if (node.selected) {
|
|
980
980
|
this.value.update((x) => {
|
|
981
981
|
x.push(node.id);
|
|
982
|
-
return x;
|
|
982
|
+
return [...x];
|
|
983
983
|
});
|
|
984
984
|
}
|
|
985
985
|
else {
|
|
986
986
|
this.value.update((x) => {
|
|
987
987
|
x.splice(x.indexOf(node.id), 1);
|
|
988
|
-
return x;
|
|
988
|
+
return [...x];
|
|
989
989
|
});
|
|
990
990
|
}
|
|
991
991
|
}
|
|
@@ -994,7 +994,7 @@ class XSelectComponent extends XSelectProperty {
|
|
|
994
994
|
this.value.update((x) => {
|
|
995
995
|
x.splice(0, x.length);
|
|
996
996
|
x.push(...value);
|
|
997
|
-
return x;
|
|
997
|
+
return [...x];
|
|
998
998
|
});
|
|
999
999
|
}
|
|
1000
1000
|
if (this.multipleInput()) {
|