@ng-nest/ui 20.3.5 → 20.3.6

package/fesm2022/ng-nest-ui-progress.mjs

@@ -0,0 +1,376 @@
+import * as i0 from '@angular/core';
+import { input, Component, computed, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
+import { XPropertyFunction, XToNumber, XToCssPixelValue, XToBoolean, XIsNumber, XIsEmpty, XIsString, XIsObjectArray, XIsFunction } from '@ng-nest/ui/core';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { XIconComponent } from '@ng-nest/ui/icon';
+
+/**
+ * Progress
+ * @selector x-progress
+ * @decorator component
+ */
+const XProgressPrefix = 'x-progress';
+const X_PROGRESS_CONFIG_NAME = 'progress';
+/**
+ * Progress Property
+ */
+class XProgressProperty extends XPropertyFunction(X_PROGRESS_CONFIG_NAME) {
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 进度条类型
+         * @en_US Progress bar type
+         */
+        this.type = input('line', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        /**
+         * @zh_CN 显示进度 0-100
+         * @en_US Show progress 0-100
+         */
+        this.percent = input(0, ...(ngDevMode ? [{ debugName: "percent", transform: XToNumber }] : [{ transform: XToNumber }]));
+        /**
+         * @zh_CN 进度条高度
+         * @en_US Height of progress bar
+         */
+        this.height = input(this.config?.height ?? '1rem', ...(ngDevMode ? [{ debugName: "height", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
+        /**
+         * @zh_CN 状态
+         * @en_US Status
+         */
+        this.status = input('normal', ...(ngDevMode ? [{ debugName: "status" }] : []));
+        /**
+         * @zh_CN 自定义显示文字/图标
+         * @en_US Custom display info/icon
+         */
+        this.infoTpl = input(...(ngDevMode ? [undefined, { debugName: "infoTpl" }] : []));
+        /**
+         * @zh_CN 是否显示百分比文本信息
+         * @en_US Whether to display percentage text
+         */
+        this.info = input(true, ...(ngDevMode ? [{ debugName: "info", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 文本信息宽度
+         * @en_US The width of the text information
+         */
+        this.infoWidth = input('3.5rem', ...(ngDevMode ? [{ debugName: "infoWidth", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
+        /**
+         * @zh_CN 百分比文本是否显示在进度条里面
+         * @en_US Whether the percentage text is displayed in the progress bar
+         */
+        this.inside = input(false, ...(ngDevMode ? [{ debugName: "inside", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 自定义百分比文本内容
+         * @en_US Custom percentage text content
+         */
+        this.format = input(...(ngDevMode ? [undefined, { debugName: "format" }] : []));
+        /**
+         * @zh_CN 自定义颜色
+         * @en_US Custom color
+         */
+        this.color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+        /**
+         * @zh_CN 自定义轨道颜色
+         * @en_US Custom rail color
+         */
+        this.railColor = input(...(ngDevMode ? [undefined, { debugName: "railColor" }] : []));
+        /**
+         * @zh_CN 渐变颜色
+         * @en_US Gradient color
+         */
+        this.gradient = input(...(ngDevMode ? [undefined, { debugName: "gradient" }] : []));
+        /**
+         * @zh_CN 步骤进度条
+         * @en_US Steps progress bar
+         */
+        this.steps = input(null, ...(ngDevMode ? [{ debugName: "steps", transform: XToNumber }] : [{ transform: XToNumber }]));
+        /**
+         * @zh_CN 单个步骤的宽度
+         * @en_US Single step width
+         */
+        this.stepWidth = input('2rem', ...(ngDevMode ? [{ debugName: "stepWidth", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
+        /**
+         * @zh_CN 单个步骤的宽度自适应
+         * @en_US Single step width flex
+         */
+        this.stepFlex = input(false, ...(ngDevMode ? [{ debugName: "stepFlex", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 圆环/仪表盘厚度
+         * @en_US Ring thickness
+         */
+        this.thickness = input('1rem', ...(ngDevMode ? [{ debugName: "thickness", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
+        /**
+         * @zh_CN 圆环/仪表盘尺寸
+         * @en_US Ring size
+         */
+        this.size = input('8rem', ...(ngDevMode ? [{ debugName: "size", transform: XToCssPixelValue }] : [{ transform: XToCssPixelValue }]));
+        /**
+         * @zh_CN 仪表盘缺口角度 0~300
+         * @en_US Dashboard notch angle
+         */
+        this.notchAngle = input(80, ...(ngDevMode ? [{ debugName: "notchAngle", transform: XToNumber }] : [{ transform: XToNumber }]));
+        /**
+         * @zh_CN 分段显示颜色，只适用 type = 'line'
+         * @en_US Segmentation display color, only use of type = 'line'
+         */
+        this.subsection = input(false, ...(ngDevMode ? [{ debugName: "subsection", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XProgressProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", 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 }, infoTpl: { classPropertyName: "infoTpl", publicName: "infoTpl", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XProgressProperty, decorators: [{
+            type: Component,
+            args: [{ selector: `${XProgressPrefix}-property`, template: '' }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], percent: [{ type: i0.Input, args: [{ isSignal: true, alias: "percent", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], infoTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "infoTpl", required: false }] }], info: [{ type: i0.Input, args: [{ isSignal: true, alias: "info", required: false }] }], infoWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "infoWidth", required: false }] }], inside: [{ type: i0.Input, args: [{ isSignal: true, alias: "inside", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], railColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "railColor", required: false }] }], gradient: [{ type: i0.Input, args: [{ isSignal: true, alias: "gradient", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], stepWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepWidth", required: false }] }], stepFlex: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepFlex", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], notchAngle: [{ type: i0.Input, args: [{ isSignal: true, alias: "notchAngle", required: false }] }], subsection: [{ type: i0.Input, args: [{ isSignal: true, alias: "subsection", required: false }] }] } });
+
+class XProgressComponent extends XProgressProperty {
+    constructor() {
+        super(...arguments);
+        this.maskWidth = computed(() => (XIsNumber(this.percent()) ? 100 - this.percent() : 100), ...(ngDevMode ? [{ debugName: "maskWidth" }] : []));
+        this.classMap = computed(() => ({
+            [`${XProgressPrefix}-${this.status()}`]: true,
+            [`${XProgressPrefix}-${this.type()}`]: true,
+            [`${XProgressPrefix}-inside`]: this.inside()
+        }), ...(ngDevMode ? [{ debugName: "classMap" }] : []));
+        this.stepsArray = computed(() => {
+            const steps = this.steps();
+            if (XIsEmpty(steps)) {
+                return [];
+            }
+            else {
+                const critical = Math.ceil((this.percent() / 100) * steps);
+                return Array.from({ length: steps }).map((_, index) => index + 1 <= critical);
+            }
+        }, ...(ngDevMode ? [{ debugName: "stepsArray" }] : []));
+        this.currentColor = computed(() => {
+            if (this.subsection())
+                return '';
+            const color = this.color();
+            if (XIsEmpty(color))
+                return '';
+            if (XIsString(color)) {
+                return color;
+            }
+            else if (XIsObjectArray(color)) {
+                return this.getLevelColor(this.percent(), color);
+            }
+            else if (XIsFunction(color)) {
+                return color(this.percent());
+            }
+        }, ...(ngDevMode ? [{ debugName: "currentColor" }] : []));
+        this.currentRailColor = computed(() => {
+            if (this.subsection())
+                return '';
+            const color = this.railColor();
+            if (XIsEmpty(color))
+                return '';
+            if (XIsString(color)) {
+                return color;
+            }
+            else if (XIsObjectArray(color)) {
+                return this.getLevelColor(this.percent(), color);
+            }
+            else if (XIsFunction(color)) {
+                return color(this.percent());
+            }
+        }, ...(ngDevMode ? [{ debugName: "currentRailColor" }] : []));
+        this.linearGradient = computed(() => {
+            if (this.subsection())
+                return '';
+            if (XIsEmpty(this.gradient())) {
+                return '';
+            }
+            else {
+                const { from, to, direction = 'to right', ...percents } = this.gradient() || {};
+                if (Object.keys(percents).length !== 0) {
+                    return `linear-gradient(${direction}, ${this.sortGradient(percents).map(({ key, value }) => `${value} ${key}%`)})`;
+                }
+                return `linear-gradient(${direction}, ${from}, ${to})`;
+            }
+        }, ...(ngDevMode ? [{ debugName: "linearGradient" }] : []));
+        /**
+         * circle 中的 100% 等于 clip-path 中的 400%
+         */
+        this.circleClipPath = computed(() => {
+            if (this.type() !== 'circle')
+                return '';
+            let value = this.percent() * 4;
+            let k1 = 'polygon(50% 50%,50% 0%,';
+            let k2 = k1 + '100% 0%,';
+            let k3 = k2 + '100% 100%,';
+            let k4 = k3 + '0% 100%,';
+            let k5 = k4 + '0% 0%,';
+            if (value <= 50) {
+                value += 50;
+                return `${k1}${value}% 0%)`;
+            }
+            else if (value > 50 && value <= 150) {
+                value -= 50;
+                return `${k2}100% ${value}%)`;
+            }
+            else if (value > 150 && value <= 250) {
+                value = 250 - value;
+                return `${k3}${value}% 100%)`;
+            }
+            else if (value > 250 && value <= 350) {
+                value = 350 - value;
+                return `${k4}0% ${value}%)`;
+            }
+            else if (value > 350 && value <= 400) {
+                value -= 350;
+                return `${k5}${value}% 0%)`;
+            }
+            return '';
+        }, ...(ngDevMode ? [{ debugName: "circleClipPath" }] : []));
+        this.railValue = computed(() => {
+            if (this.type() !== 'dashboard')
+                return 0;
+            return (this.notchAngle() / 360) * 50 * 4;
+        }, ...(ngDevMode ? [{ debugName: "railValue" }] : []));
+        this.dashboardStart = computed(() => {
+            if (this.type() !== 'dashboard')
+                return '';
+            let k1 = `polygon(50% 50%,`;
+            let per = 0;
+            let railValue = this.railValue();
+            if (railValue <= 50) {
+                per = 50 - railValue;
+                return `${k1} ${per}% 100%`;
+            }
+            else if (railValue > 50 && railValue <= 150) {
+                per = 150 - railValue;
+                return `${k1} 0% ${per}%`;
+            }
+            else if (railValue > 150 && railValue <= 250) {
+                per = railValue - 150;
+                return `${k1} ${per}% 0%`;
+            }
+            return '';
+        }, ...(ngDevMode ? [{ debugName: "dashboardStart" }] : []));
+        /**
+         *
+         * 90 polygon(50% 50%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);
+         * 180 polygon(50% 50%, 0% 50%, 0% 0%, 100% 0%, 100% 50%);
+         * 270 polygon(50% 50%, 0% 0%, 100% 0%);
+         */
+        this.dashboardRailClipPath = computed(() => {
+            if (this.type() !== 'dashboard')
+                return '';
+            let start = this.dashboardStart();
+            let per = 0;
+            let railValue = this.railValue();
+            if (railValue <= 50) {
+                per = 50 - railValue;
+                return `${start}, 0% 100%, 0% 0%, 100% 0%, 100% 100%, ${100 - per}% 100%)`;
+            }
+            else if (railValue > 50 && railValue <= 150) {
+                per = 150 - railValue;
+                return `${start}, 0% 0%, 100% 0%, 100% ${per}%)`;
+            }
+            else if (railValue > 150 && railValue <= 250) {
+                per = railValue - 150;
+                return `${start}, ${100 - per}% 0%)`;
+            }
+            return '';
+        }, ...(ngDevMode ? [{ debugName: "dashboardRailClipPath" }] : []));
+        this.dashboardClipPath = computed(() => {
+            if (this.type() !== 'dashboard')
+                return '';
+            return this.setCircleClipPathValue(this.dashboardStart(), this.railValue());
+        }, ...(ngDevMode ? [{ debugName: "dashboardClipPath" }] : []));
+        this.subLinearGradient = computed(() => {
+            if (!this.subsection())
+                return '';
+            let colors = this.color();
+            if (!colors || colors.length <= 0) {
+                return `linear-gradient(to right, var(--x-primary) 0%, var(--x-primary) 100%)`;
+            }
+            else if (colors.length === 1) {
+                colors.push({ percent: 100, color: 'var(--x-primary)' });
+            }
+            colors = colors.sort((a, b) => a.percent - b.percent);
+            let lgs = [];
+            colors.reduce((a, b, index) => {
+                if (index === 1 && a.percent > 0) {
+                    lgs.push(`${a.color} 0%, ${a.color} ${a.percent}%`);
+                }
+                lgs.push(`${b.color} ${a.percent}%, ${b.color} ${b.percent}%`);
+                if (index === colors.length - 1 && b.percent < 100) {
+                    lgs.push(`var(--x-primary) ${b.percent}%, var(--x-primary) 100%`);
+                }
+                return b;
+            });
+            return `linear-gradient(to right,${lgs.join(',')})`;
+        }, ...(ngDevMode ? [{ debugName: "subLinearGradient" }] : []));
+    }
+    getLevelColor(percent, color) {
+        let colors = color.sort((a, b) => a.percent - b.percent);
+        for (let i = 0; i < colors.length; i++) {
+            if (colors[i].percent > Number(percent)) {
+                return colors[i].color;
+            }
+        }
+        return colors[colors.length - 1].color;
+    }
+    sortGradient(percents) {
+        let arr = [];
+        Object.keys(percents).forEach((key) => {
+            const value = percents[key];
+            const numKey = +key.replace('%', '');
+            if (!isNaN(numKey)) {
+                arr.push({ key: numKey, value });
+            }
+        });
+        return arr.sort((a, b) => a.key - b.key);
+    }
+    setCircleClipPathValue(start, railValue) {
+        let value = ((400 - railValue * 2) / 100) * this.percent();
+        let val = value + railValue;
+        if (val <= 50) {
+            val = 50 - val;
+            return `${start}, ${val}% 100%)`;
+        }
+        else if (val > 50 && val <= 150) {
+            val = 150 - val;
+            return `${start}, 0% 100%, 0% ${val}%)`;
+        }
+        else if (val > 150 && val <= 250) {
+            val = val - 150;
+            return `${start}, 0% 100%, 0% 0%, ${val}% 0%)`;
+        }
+        else if (val > 250 && val <= 350) {
+            val = val - 250;
+            return `${start}, 0% 100%, 0% 0%, 100% 0%, 100% ${val}%)`;
+        }
+        else if (val > 350 && val <= 400) {
+            val = 100 - (val - 350);
+            return `${start}, 0% 100%, 0% 0%, 100% 0%, 100% 100%, ${val}% 100%)`;
+        }
+        return '';
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XProgressComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", 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    @if (infoTpl()) {\r\n      <ng-container *ngTemplateOutlet=\"infoTpl()!; context: { $status: status(), $percent: percent() }\"> </ng-container>\r\n    } @else {\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    }\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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XProgressComponent, decorators: [{
+            type: Component,
+            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    @if (infoTpl()) {\r\n      <ng-container *ngTemplateOutlet=\"infoTpl()!; context: { $status: status(), $percent: percent() }\"> </ng-container>\r\n    } @else {\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    }\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"] }]
+        }] });
+
+class XProgressModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XProgressModule, imports: [XProgressComponent], exports: [XProgressComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XProgressModule, imports: [XProgressComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XProgressModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [XProgressComponent],
+                    imports: [XProgressComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { XProgressComponent, XProgressModule, XProgressPrefix, XProgressProperty };
+//# sourceMappingURL=ng-nest-ui-progress.mjs.map

package/fesm2022/ng-nest-ui-progress.mjs.map

@@ -0,0 +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, TemplateRef } 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 Custom display info/icon\r\n   */\r\n  readonly infoTpl = input<TemplateRef<any>>();\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    @if (infoTpl()) {\r\n      <ng-container *ngTemplateOutlet=\"infoTpl()!; context: { $status: status(), $percent: percent() }\"> </ng-container>\r\n    } @else {\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    }\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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"}

package/fesm2022/ng-nest-ui-prompts.mjs

@@ -0,0 +1,103 @@
+import * as i0 from '@angular/core';
+import { input, output, Component, signal, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
+import { XPropertyFunction, XToBoolean, XIsChange, XSetData } from '@ng-nest/ui/core';
+import { XOutletDirective } from '@ng-nest/ui/outlet';
+import { Subject } from 'rxjs';
+import { XIconComponent } from '@ng-nest/ui/icon';
+
+/**
+ * Prompts
+ * @selector x-prompts
+ * @decorator component
+ */
+const XPromptsPrefix = 'x-prompts';
+const X_PROPMTS_CONFIG_NAME = 'prompts';
+/**
+ * Prompts Property
+ */
+class XPromptsProperty extends XPropertyFunction(X_PROPMTS_CONFIG_NAME) {
+    constructor() {
+        super(...arguments);
+        /**
+         * @zh_CN 显示标题，支持自定义模板
+         * @en_US Display title, support custom template
+         */
+        this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+        /**
+         * @zh_CN 列表数据
+         * @en_US List data
+         */
+        this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+        /**
+         * @zh_CN 纵向展示
+         * @en_US List vertical display
+         */
+        this.vertical = input(this.config?.vertical ?? false, ...(ngDevMode ? [{ debugName: "vertical", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN wrap
+         * @en_US List wrap display
+         */
+        this.wrap = input(this.config?.wrap ?? false, ...(ngDevMode ? [{ debugName: "wrap", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN Item 点击事件
+         * @en_US Item click event
+         */
+        this.itemClick = output();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XPromptsProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.5", 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 }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XPromptsProperty, decorators: [{
+            type: Component,
+            args: [{ selector: `${XPromptsPrefix}-property`, template: '' }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
+class XPromptsComponent extends XPromptsProperty {
+    constructor() {
+        super(...arguments);
+        this.nodes = signal([], ...(ngDevMode ? [{ debugName: "nodes" }] : []));
+        this.unSubject = new Subject();
+    }
+    ngOnChanges(changes) {
+        const { data } = changes;
+        XIsChange(data) && this.setData();
+    }
+    ngOnDestroy() {
+        this.unSubject.next();
+        this.unSubject.complete();
+    }
+    onItemClick(node) {
+        this.itemClick.emit(node);
+    }
+    setData() {
+        XSetData(this.data(), this.unSubject, true).subscribe((x) => {
+            this.nodes.set(x);
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XPromptsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XPromptsComponent, isStandalone: true, selector: "x-prompts", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"x-prompts\" [class.x-prompts-vertical]=\"vertical()\" [class.x-prompts-wrap]=\"wrap()\">\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\" [style]=\"item.style\" (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\" [class.x-prompts-item-only-label]=\"item.label && !item.description\">\r\n              {{ item.label }}\r\n            </div>\r\n          }\r\n          @if (item.description) {\r\n            <div\r\n              class=\"x-prompts-item-description\"\r\n              [class.x-prompts-item-only-description]=\"!item.label && item.description\"\r\n            >\r\n              {{ item.description }}\r\n            </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-wrap .x-prompts-list{flex-wrap:wrap}.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)}.x-prompts-item-only-label{font-weight:500}.x-prompts-item-only-description{color:currentColor}\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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XPromptsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'x-prompts', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [XOutletDirective, XIconComponent], template: "<div class=\"x-prompts\" [class.x-prompts-vertical]=\"vertical()\" [class.x-prompts-wrap]=\"wrap()\">\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\" [style]=\"item.style\" (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\" [class.x-prompts-item-only-label]=\"item.label && !item.description\">\r\n              {{ item.label }}\r\n            </div>\r\n          }\r\n          @if (item.description) {\r\n            <div\r\n              class=\"x-prompts-item-description\"\r\n              [class.x-prompts-item-only-description]=\"!item.label && item.description\"\r\n            >\r\n              {{ item.description }}\r\n            </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-wrap .x-prompts-list{flex-wrap:wrap}.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)}.x-prompts-item-only-label{font-weight:500}.x-prompts-item-only-description{color:currentColor}\n"] }]
+        }] });
+
+class XPromptsModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XPromptsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.5", ngImport: i0, type: XPromptsModule, imports: [XPromptsComponent], exports: [XPromptsComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XPromptsModule, imports: [XPromptsComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XPromptsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [XPromptsComponent],
+                    imports: [XPromptsComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { XPromptsComponent, XPromptsModule, XPromptsPrefix, XPromptsProperty };
+//# sourceMappingURL=ng-nest-ui-prompts.mjs.map

package/fesm2022/ng-nest-ui-prompts.mjs.map

@@ -0,0 +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 wrap\r\n   * @en_US List wrap display\r\n   */\r\n  readonly wrap = input<boolean, XBoolean>(this.config?.wrap ?? 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  style?: XStyle;\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   * @zh_CN 自定义属性\r\n   * @en_US Custom attributes\r\n   */\r\n  [property: string]: any;\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()\" [class.x-prompts-wrap]=\"wrap()\">\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\" [style]=\"item.style\" (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\" [class.x-prompts-item-only-label]=\"item.label && !item.description\">\r\n              {{ item.label }}\r\n            </div>\r\n          }\r\n          @if (item.description) {\r\n            <div\r\n              class=\"x-prompts-item-description\"\r\n              [class.x-prompts-item-only-description]=\"!item.label && item.description\"\r\n            >\r\n              {{ item.description }}\r\n            </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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"}