@ng-nest/ui 17.0.12 → 18.0.1

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

@@ -1,8 +1,7 @@
 import * as i0 from '@angular/core';
-import { Component, Input, inject, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { input, Component, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
-import { __decorate } from 'tslib';
-import { XProperty, XWithConfig, XInputNumber, XInputBoolean, XConfigService, XIsArray, XIsChange, XIsEmpty, XIsNumber, XBadgeAnimation, XBadgeStandaloneAnimation } from '@ng-nest/ui/core';
+import { XPropertyFunction, XToNumber, XToString, XToCssPixelValue, XToBoolean, XIsEmpty, XIsNumber, XIsString, XBadgeAnimation, XBadgeStandaloneAnimation } from '@ng-nest/ui/core';
 
 /**
  * Badge
@@ -10,128 +9,194 @@ import { XProperty, XWithConfig, XInputNumber, XInputBoolean, XConfigService, XI
  * @decorator component
  */
 const XBadgePrefix = 'x-badge';
-const X_CONFIG_NAME = 'badge';
+const X_BADGE_CONFIG_NAME = 'badge';
 /**
  * Badge Property
  */
-class XBadgeProperty extends XProperty {
+class XBadgeProperty extends XPropertyFunction(X_BADGE_CONFIG_NAME) {
     constructor() {
         super(...arguments);
+        /**
+         * @zh_CN 类型，背景颜色
+         * @en_US Type, the background color
+         * @example
+         *
+         * ```html
+         * <x-badge value="12" type="primary">
+         *   <x-button>primary</x-button>
+         * </x-badge>
+         * <x-badge value="12" type="success">
+         *   <x-button>success</x-button>
+         * </x-badge>
+         * <x-badge value="12" type="info">
+         *   <x-button>info</x-button>
+         * </x-badge>
+         * <x-badge value="12" type="warning">
+         *   <x-button>warning</x-button>
+         * </x-badge>
+         * <x-badge value="12" type="danger">
+         *   <x-button>danger</x-button>
+         * </x-badge>
+         * <x-badge value="12" type="text">
+         *   <x-button>text</x-button>
+         * </x-badge>
+         * ```
+         *
+         */
+        this.type = input(this.config?.type ?? 'danger');
+        /**
+         * @zh_CN 最大值
+         * @en_US Max
+         * @example
+         *
+         * ```html
+         * <x-badge value="200" max="99">
+         *   <x-button>99</x-button>
+         * </x-badge>
+         * <x-badge value="300" max="200">
+         *   <x-button>200</x-button>
+         * </x-badge>
+         * ```
+         */
+        this.max = input(99, { transform: XToNumber });
         /**
          * @zh_CN 显示值
          * @en_US Display value
+         * @example
+         *
+         * ```html
+         * <x-badge value="88">
+         *   <x-button>value</x-button>
+         * </x-badge>
+         * ```
+         */
+        this.value = input('', { transform: XToString });
+        /**
+         * @zh_CN 偏移值 left
+         * @en_US Offset left value
+         * @example
+         *
+         * ```html
+         * <x-badge value="88" offsetLeft="5px">
+         *   <x-button>value</x-button>
+         * </x-badge>
+         * ```
+         *
+         */
+        this.offsetLeft = input('', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 偏移值 top
+         * @en_US Offset right value
+         * @example
+         *
+         * ```html
+         * <x-badge value="88" offsetTop="5px">
+         *   <x-button>value</x-button>
+         * </x-badge>
+         * ```
+         *
+         */
+        this.offsetTop = input('', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 是否显示小红点
+         * @en_US Whether to show the small red dot
+         * @example
+         *
+         * ```html
+         * <x-badge dot>
+         *   <x-button>value</x-button>
+         * </x-badge>
+         * ```
+         *
          */
-        this.value = '';
+        this.dot = input(false, { transform: XToBoolean });
         /**
-         * @zh_CN 偏移值 [left, top]
-         * @en_US Offset value
+         * @zh_CN 独立使用
+         * @en_US Independent use
+         * @example
+         *
+         * ```html
+         * <x-badge standalone value="25"></x-badge>
+         * <x-badge standalone value="200" max="99"></x-badge>
+         * <x-badge standalone value="hot"></x-badge>
+         * <x-badge standalone dot></x-badge>
+         * ```
+         *
          */
-        this.offset = [];
+        this.standalone = input(false, { transform: XToBoolean });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XBadgeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XBadgeProperty, selector: "x-badge-property", inputs: { type: "type", max: "max", value: "value", offset: "offset", dot: "dot", standalone: "standalone" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XBadgeProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XBadgeProperty, selector: "x-badge-property", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, offsetLeft: { classPropertyName: "offsetLeft", publicName: "offsetLeft", isSignal: true, isRequired: false, transformFunction: null }, offsetTop: { classPropertyName: "offsetTop", publicName: "offsetTop", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, standalone: { classPropertyName: "standalone", publicName: "standalone", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XWithConfig(X_CONFIG_NAME, 'danger')
-], XBadgeProperty.prototype, "type", void 0);
-__decorate([
-    XInputNumber()
-], XBadgeProperty.prototype, "max", void 0);
-__decorate([
-    XInputBoolean()
-], XBadgeProperty.prototype, "dot", void 0);
-__decorate([
-    XInputBoolean()
-], XBadgeProperty.prototype, "standalone", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XBadgeProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XBadgeProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XBadgePrefix}-property`, template: '' }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], offset: [{
-                type: Input
-            }], dot: [{
-                type: Input
-            }], standalone: [{
-                type: Input
-            }] } });
+        }] });
 
 class XBadgeComponent extends XBadgeProperty {
     constructor() {
         super(...arguments);
-        this.displayValue = '';
-        this.viewInit = false;
-        this.range = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '+'];
-        this.displayNums = [];
-        this.maxNums = [];
-        this.configService = inject(XConfigService);
-    }
-    get valueNumber() {
-        return Number(this.value);
-    }
-    get getOffsetRight() {
-        if (this.offset && XIsArray(this.offset) && this.offset.length > 0) {
-            return `-${this.offset[0]}`;
-        }
-        return null;
-    }
-    get getOffsetTop() {
-        if (this.offset && XIsArray(this.offset) && this.offset.length > 1) {
-            return this.offset[1];
-        }
-        return null;
-    }
-    ngOnInit() {
-        this.setClassMap();
-    }
-    ngOnChanges(simples) {
-        const { value } = simples;
-        XIsChange(value) && this.setDisplayValue();
-    }
-    setClassMap() {
-        this.classMap[`${XBadgePrefix}-${this.type}`] = !XIsEmpty(this.type);
-    }
-    setDisplayValue() {
-        let toNumber = Number(this.value);
-        if (XIsNumber(toNumber) && this.max && toNumber > Number(this.max)) {
-            this.displayValue = `${this.max}+`;
-        }
-        else {
-            this.displayValue = `${this.value}`;
-        }
-        let res = [];
-        for (let i = 0; i < this.displayValue.length; i++) {
-            let str = this.displayValue[i];
-            if (str === '+') {
-                res.push(str);
+        this.range = signal([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '+']);
+        this.valueNumber = computed(() => {
+            return Number(this.value());
+        });
+        this.classMap = computed(() => ({
+            [`${XBadgePrefix}-${this.type()}`]: !XIsEmpty(this.type())
+        }));
+        this.displayNums = computed(() => {
+            const value = this.value();
+            const max = this.max();
+            const toNumber = Number(value);
+            let displayValue = '';
+            if (XIsNumber(toNumber) && max && toNumber > max) {
+                displayValue = `${max}+`;
             }
             else {
-                res.push(Number(str));
+                displayValue = `${value}`;
+            }
+            const res = [];
+            for (let i = 0; i < displayValue.length; i++) {
+                const str = displayValue[i];
+                if (str === '+') {
+                    res.push(str);
+                }
+                else {
+                    res.push(Number(str));
+                }
+            }
+            return res;
+        });
+        this.translateYNumbers = computed(() => {
+            const displayNums = this.displayNums();
+            const nums = [];
+            for (let num of displayNums) {
+                if (XIsString(num) && num === '+') {
+                    nums.push(10 * 100);
+                }
+                else if (XIsNumber(num)) {
+                    nums.push(num * 100);
+                }
             }
-        }
-        this.displayNums = res;
-        if (this.displayNums.length != this.maxNums.length) {
-            this.maxNums = this.displayNums.map((_x, index) => index);
-        }
+            return nums;
+        });
+        this.maxNums = computed(() => {
+            return this.displayNums().map((_x, index) => index);
+        });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XBadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: XBadgeComponent, isStandalone: true, selector: "x-badge", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #badge class=\"x-badge\" [ngClass]=\"classMap\" [class.x-badge-dot]=\"dot\" [class.x-badge-standalone]=\"standalone\">\r\n  <ng-content></ng-content>\r\n  @if (valueNumber > 0 || dot) {\r\n    @if (standalone) {\r\n      <sup [@x-badge-standalone-animation] [style.marginRight]=\"getOffsetRight\" [style.marginTop]=\"getOffsetTop\">\r\n        <ng-container *ngTemplateOutlet=\"dotTpl\"></ng-container>\r\n      </sup>\r\n    } @else {\r\n      <sup [@x-badge-animation] [style.marginRight]=\"getOffsetRight\" [style.marginTop]=\"getOffsetTop\">\r\n        <ng-container *ngTemplateOutlet=\"dotTpl\"></ng-container>\r\n      </sup>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #dotTpl>\r\n  @if (!dot) {\r\n    @for (item of maxNums; track item; let i = $index) {\r\n      <span\r\n        class=\"x-badge-scroll\"\r\n        [style.transform]=\"'translateY(-' + (displayNums[i] == '+' ? 10 : displayNums[i]) * 100 + '%)'\"\r\n      >\r\n        @for (j of range; track j) {\r\n          <p>{{ j }}</p>\r\n        }\r\n      </span>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: ["x-badge{display:inline-block}.x-badge{margin:0;padding:0;font-size:var(--x-font-size);display:inline-block;box-sizing:border-box;text-align:center;position:relative}.x-badge>sup{position:absolute;top:0;right:0;overflow:hidden;transform:translate(50%,-50%);transform-origin:100% 0%;border-radius:.625rem;color:var(--x-white);display:inline-block;height:1.125rem;line-height:1.125rem;padding:0 .375rem;text-align:center;white-space:nowrap;box-shadow:0 0 0 .0625rem var(--x-white);vertical-align:middle}.x-badge-dot>sup{width:.5rem;height:.5rem;padding:0;right:0;border-radius:50%}.x-badge-standalone>sup{position:initial;transform:initial;transform-origin:initial}.x-badge-scroll{position:relative;height:1.125rem;display:inline-block;transition:transform var(--x-animation-duration-base) ease-in-out}.x-badge-primary>sup{background-color:var(--x-primary)}.x-badge-success>sup{background-color:var(--x-success)}.x-badge-info>sup{background-color:var(--x-info)}.x-badge-warning>sup{background-color:var(--x-warning)}.x-badge-danger>sup{background-color:var(--x-danger)}.x-badge-text>sup{background-color:var(--x-text)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [XBadgeAnimation, XBadgeStandaloneAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XBadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XBadgeComponent, isStandalone: true, selector: "x-badge", usesInheritance: true, ngImport: i0, template: "<div\r\n  #badge\r\n  class=\"x-badge\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-badge-dot]=\"dot()\"\r\n  [class.x-badge-standalone]=\"standalone()\"\r\n>\r\n  <ng-content></ng-content>\r\n  @if (valueNumber() > 0 || dot()) {\r\n    @if (standalone()) {\r\n      <sup [@x-badge-standalone-animation] [style.marginRight]=\"offsetLeft()\" [style.marginTop]=\"offsetTop()\">\r\n        <ng-container *ngTemplateOutlet=\"dotTpl\"></ng-container>\r\n      </sup>\r\n    } @else {\r\n      <sup [@x-badge-animation] [style.marginRight]=\"offsetLeft()\" [style.marginTop]=\"offsetTop()\">\r\n        <ng-container *ngTemplateOutlet=\"dotTpl\"></ng-container>\r\n      </sup>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #dotTpl>\r\n  @if (!dot()) {\r\n    @for (item of maxNums(); track item) {\r\n      <span class=\"x-badge-scroll\" [style.transform]=\"'translateY(-' + translateYNumbers()[$index] + '%)'\">\r\n        @for (j of range(); track j) {\r\n          <p>{{ j }}</p>\r\n        }\r\n      </span>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: ["x-badge{display:inline-block}.x-badge{margin:0;padding:0;font-size:var(--x-font-size);display:inline-block;box-sizing:border-box;text-align:center;position:relative}.x-badge>sup{position:absolute;top:0;right:0;overflow:hidden;transform:translate(50%,-50%);transform-origin:100% 0%;border-radius:.625rem;color:var(--x-white);display:inline-block;height:1.125rem;line-height:1.125rem;padding:0 .375rem;text-align:center;white-space:nowrap;box-shadow:0 0 0 .0625rem var(--x-white);vertical-align:middle}.x-badge-dot>sup{width:.5rem;height:.5rem;padding:0;right:0;border-radius:50%}.x-badge-standalone>sup{position:initial;transform:initial;transform-origin:initial}.x-badge-scroll{position:relative;height:1.125rem;display:inline-block;transition:transform var(--x-animation-duration-base) ease-in-out}.x-badge-primary>sup{background-color:var(--x-primary)}.x-badge-success>sup{background-color:var(--x-success)}.x-badge-info>sup{background-color:var(--x-info)}.x-badge-warning>sup{background-color:var(--x-warning)}.x-badge-danger>sup{background-color:var(--x-danger)}.x-badge-text>sup{background-color:var(--x-text)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [XBadgeAnimation, XBadgeStandaloneAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XBadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XBadgePrefix}`, standalone: true, imports: [NgClass, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XBadgeAnimation, XBadgeStandaloneAnimation], template: "<div #badge class=\"x-badge\" [ngClass]=\"classMap\" [class.x-badge-dot]=\"dot\" [class.x-badge-standalone]=\"standalone\">\r\n  <ng-content></ng-content>\r\n  @if (valueNumber > 0 || dot) {\r\n    @if (standalone) {\r\n      <sup [@x-badge-standalone-animation] [style.marginRight]=\"getOffsetRight\" [style.marginTop]=\"getOffsetTop\">\r\n        <ng-container *ngTemplateOutlet=\"dotTpl\"></ng-container>\r\n      </sup>\r\n    } @else {\r\n      <sup [@x-badge-animation] [style.marginRight]=\"getOffsetRight\" [style.marginTop]=\"getOffsetTop\">\r\n        <ng-container *ngTemplateOutlet=\"dotTpl\"></ng-container>\r\n      </sup>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #dotTpl>\r\n  @if (!dot) {\r\n    @for (item of maxNums; track item; let i = $index) {\r\n      <span\r\n        class=\"x-badge-scroll\"\r\n        [style.transform]=\"'translateY(-' + (displayNums[i] == '+' ? 10 : displayNums[i]) * 100 + '%)'\"\r\n      >\r\n        @for (j of range; track j) {\r\n          <p>{{ j }}</p>\r\n        }\r\n      </span>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: ["x-badge{display:inline-block}.x-badge{margin:0;padding:0;font-size:var(--x-font-size);display:inline-block;box-sizing:border-box;text-align:center;position:relative}.x-badge>sup{position:absolute;top:0;right:0;overflow:hidden;transform:translate(50%,-50%);transform-origin:100% 0%;border-radius:.625rem;color:var(--x-white);display:inline-block;height:1.125rem;line-height:1.125rem;padding:0 .375rem;text-align:center;white-space:nowrap;box-shadow:0 0 0 .0625rem var(--x-white);vertical-align:middle}.x-badge-dot>sup{width:.5rem;height:.5rem;padding:0;right:0;border-radius:50%}.x-badge-standalone>sup{position:initial;transform:initial;transform-origin:initial}.x-badge-scroll{position:relative;height:1.125rem;display:inline-block;transition:transform var(--x-animation-duration-base) ease-in-out}.x-badge-primary>sup{background-color:var(--x-primary)}.x-badge-success>sup{background-color:var(--x-success)}.x-badge-info>sup{background-color:var(--x-info)}.x-badge-warning>sup{background-color:var(--x-warning)}.x-badge-danger>sup{background-color:var(--x-danger)}.x-badge-text>sup{background-color:var(--x-text)}\n"] }]
+            args: [{ selector: `${XBadgePrefix}`, standalone: true, imports: [NgClass, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XBadgeAnimation, XBadgeStandaloneAnimation], template: "<div\r\n  #badge\r\n  class=\"x-badge\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-badge-dot]=\"dot()\"\r\n  [class.x-badge-standalone]=\"standalone()\"\r\n>\r\n  <ng-content></ng-content>\r\n  @if (valueNumber() > 0 || dot()) {\r\n    @if (standalone()) {\r\n      <sup [@x-badge-standalone-animation] [style.marginRight]=\"offsetLeft()\" [style.marginTop]=\"offsetTop()\">\r\n        <ng-container *ngTemplateOutlet=\"dotTpl\"></ng-container>\r\n      </sup>\r\n    } @else {\r\n      <sup [@x-badge-animation] [style.marginRight]=\"offsetLeft()\" [style.marginTop]=\"offsetTop()\">\r\n        <ng-container *ngTemplateOutlet=\"dotTpl\"></ng-container>\r\n      </sup>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #dotTpl>\r\n  @if (!dot()) {\r\n    @for (item of maxNums(); track item) {\r\n      <span class=\"x-badge-scroll\" [style.transform]=\"'translateY(-' + translateYNumbers()[$index] + '%)'\">\r\n        @for (j of range(); track j) {\r\n          <p>{{ j }}</p>\r\n        }\r\n      </span>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: ["x-badge{display:inline-block}.x-badge{margin:0;padding:0;font-size:var(--x-font-size);display:inline-block;box-sizing:border-box;text-align:center;position:relative}.x-badge>sup{position:absolute;top:0;right:0;overflow:hidden;transform:translate(50%,-50%);transform-origin:100% 0%;border-radius:.625rem;color:var(--x-white);display:inline-block;height:1.125rem;line-height:1.125rem;padding:0 .375rem;text-align:center;white-space:nowrap;box-shadow:0 0 0 .0625rem var(--x-white);vertical-align:middle}.x-badge-dot>sup{width:.5rem;height:.5rem;padding:0;right:0;border-radius:50%}.x-badge-standalone>sup{position:initial;transform:initial;transform-origin:initial}.x-badge-scroll{position:relative;height:1.125rem;display:inline-block;transition:transform var(--x-animation-duration-base) ease-in-out}.x-badge-primary>sup{background-color:var(--x-primary)}.x-badge-success>sup{background-color:var(--x-success)}.x-badge-info>sup{background-color:var(--x-info)}.x-badge-warning>sup{background-color:var(--x-warning)}.x-badge-danger>sup{background-color:var(--x-danger)}.x-badge-text>sup{background-color:var(--x-text)}\n"] }]
         }] });
 
 class XBadgeModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: XBadgeModule, imports: [XBadgeComponent], exports: [XBadgeComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XBadgeModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XBadgeModule, imports: [XBadgeComponent], exports: [XBadgeComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XBadgeModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XBadgeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XBadgeModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XBadgeComponent],

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

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-badge.mjs","sources":["../../../../lib/ng-nest/ui/badge/badge.property.ts","../../../../lib/ng-nest/ui/badge/badge.component.ts","../../../../lib/ng-nest/ui/badge/badge.component.html","../../../../lib/ng-nest/ui/badge/badge.module.ts","../../../../lib/ng-nest/ui/badge/ng-nest-ui-badge.ts"],"sourcesContent":["import { XProperty, XInputNumber, XInputBoolean, XNumber, XBoolean, XType, XWithConfig } from '@ng-nest/ui/core';\r\nimport { Input, Component } from '@angular/core';\r\n\r\n/**\r\n * Badge\r\n * @selector x-badge\r\n * @decorator component\r\n */\r\nexport const XBadgePrefix = 'x-badge';\r\nconst X_CONFIG_NAME = 'badge';\r\n\r\n/**\r\n * Badge Property\r\n */\r\n@Component({ selector: `${XBadgePrefix}-property`, template: '' })\r\nexport class XBadgeProperty extends XProperty {\r\n  /**\r\n   * @zh_CN 背景颜色\r\n   * @en_US Background color\r\n   */\r\n  @Input() @XWithConfig<XBadgeType>(X_CONFIG_NAME, 'danger') type?: XBadgeType;\r\n  /**\r\n   * @zh_CN 最大值\r\n   * @en_US Max\r\n   */\r\n  @Input() @XInputNumber() max?: XNumber;\r\n  /**\r\n   * @zh_CN 显示值\r\n   * @en_US Display value\r\n   */\r\n  @Input() value: XNumber = '';\r\n  /**\r\n   * @zh_CN 偏移值 [left, top]\r\n   * @en_US Offset value\r\n   */\r\n  @Input() offset: (number | string)[] = [];\r\n  /**\r\n   * @zh_CN 是否显示小红点\r\n   * @en_US Whether to show the small red dot\r\n   */\r\n  @Input() @XInputBoolean() dot?: XBoolean;\r\n  /**\r\n   * @zh_CN 独立使用\r\n   * @en_US Independent use\r\n   */\r\n  @Input() @XInputBoolean() standalone?: XBoolean;\r\n}\r\n\r\n/**\r\n * @zh_CN 标记类型\r\n * @en_US Mark type\r\n */\r\nexport type XBadgeType = XType;\r\n","import {\r\n  Component,\r\n  OnInit,\r\n  ViewEncapsulation,\r\n  ChangeDetectionStrategy,\r\n  SimpleChanges,\r\n  OnChanges,\r\n  inject\r\n} from '@angular/core';\r\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\r\nimport { XBadgePrefix, XBadgeProperty } from './badge.property';\r\nimport {\r\n  XIsNumber,\r\n  XIsChange,\r\n  XIsEmpty,\r\n  XConfigService,\r\n  XIsArray,\r\n  XBadgeAnimation,\r\n  XBadgeStandaloneAnimation\r\n} from '@ng-nest/ui/core';\r\n\r\n@Component({\r\n  selector: `${XBadgePrefix}`,\r\n  standalone: true,\r\n  imports: [NgClass, NgTemplateOutlet],\r\n  templateUrl: './badge.component.html',\r\n  styleUrls: ['./badge.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  animations: [XBadgeAnimation, XBadgeStandaloneAnimation]\r\n})\r\nexport class XBadgeComponent extends XBadgeProperty implements OnInit, OnChanges {\r\n  displayValue: string = '';\r\n  viewInit = false;\r\n  range = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '+'];\r\n  displayNums: any[] = [];\r\n  maxNums: number[] = [];\r\n\r\n  get valueNumber() {\r\n    return Number(this.value);\r\n  }\r\n\r\n  get getOffsetRight() {\r\n    if (this.offset && XIsArray(this.offset) && this.offset.length > 0) {\r\n      return `-${this.offset[0]}`;\r\n    }\r\n    return null;\r\n  }\r\n\r\n  get getOffsetTop() {\r\n    if (this.offset && XIsArray(this.offset) && this.offset.length > 1) {\r\n      return this.offset[1];\r\n    }\r\n    return null;\r\n  }\r\n\r\n  configService = inject(XConfigService);\r\n\r\n  ngOnInit() {\r\n    this.setClassMap();\r\n  }\r\n\r\n  ngOnChanges(simples: SimpleChanges) {\r\n    const { value } = simples;\r\n    XIsChange(value) && this.setDisplayValue();\r\n  }\r\n\r\n  setClassMap() {\r\n    this.classMap[`${XBadgePrefix}-${this.type}`] = !XIsEmpty(this.type);\r\n  }\r\n\r\n  setDisplayValue() {\r\n    let toNumber = Number(this.value);\r\n    if (XIsNumber(toNumber) && this.max && toNumber > Number(this.max)) {\r\n      this.displayValue = `${this.max}+`;\r\n    } else {\r\n      this.displayValue = `${this.value}`;\r\n    }\r\n    let res: any = [];\r\n    for (let i = 0; i < this.displayValue.length; i++) {\r\n      let str = this.displayValue[i];\r\n      if (str === '+') {\r\n        res.push(str);\r\n      } else {\r\n        res.push(Number(str));\r\n      }\r\n    }\r\n    this.displayNums = res;\r\n    if (this.displayNums.length != this.maxNums.length) {\r\n      this.maxNums = this.displayNums.map((_x, index) => index) as number[];\r\n    }\r\n  }\r\n}\r\n","<div #badge class=\"x-badge\" [ngClass]=\"classMap\" [class.x-badge-dot]=\"dot\" [class.x-badge-standalone]=\"standalone\">\r\n  <ng-content></ng-content>\r\n  @if (valueNumber > 0 || dot) {\r\n    @if (standalone) {\r\n      <sup [@x-badge-standalone-animation] [style.marginRight]=\"getOffsetRight\" [style.marginTop]=\"getOffsetTop\">\r\n        <ng-container *ngTemplateOutlet=\"dotTpl\"></ng-container>\r\n      </sup>\r\n    } @else {\r\n      <sup [@x-badge-animation] [style.marginRight]=\"getOffsetRight\" [style.marginTop]=\"getOffsetTop\">\r\n        <ng-container *ngTemplateOutlet=\"dotTpl\"></ng-container>\r\n      </sup>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #dotTpl>\r\n  @if (!dot) {\r\n    @for (item of maxNums; track item; let i = $index) {\r\n      <span\r\n        class=\"x-badge-scroll\"\r\n        [style.transform]=\"'translateY(-' + (displayNums[i] == '+' ? 10 : displayNums[i]) * 100 + '%)'\"\r\n      >\r\n        @for (j of range; track j) {\r\n          <p>{{ j }}</p>\r\n        }\r\n      </span>\r\n    }\r\n  }\r\n</ng-template>\r\n","import { NgModule } from '@angular/core';\r\nimport { XBadgeComponent } from './badge.component';\r\n\r\n@NgModule({\r\n  exports: [XBadgeComponent],\r\n  imports: [XBadgeComponent]\r\n})\r\nexport class XBadgeModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-nest-ui-badge.mjs","sources":["../../../../lib/ng-nest/ui/badge/badge.property.ts","../../../../lib/ng-nest/ui/badge/badge.component.ts","../../../../lib/ng-nest/ui/badge/badge.component.html","../../../../lib/ng-nest/ui/badge/badge.module.ts","../../../../lib/ng-nest/ui/badge/ng-nest-ui-badge.ts"],"sourcesContent":["import { XPropertyFunction, XToNumber, XToString, XToCssPixelValue, XToBoolean } from '@ng-nest/ui/core';\r\nimport { Component, input } from '@angular/core';\r\nimport type { XNumber, XBoolean, XType } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Badge\r\n * @selector x-badge\r\n * @decorator component\r\n */\r\nexport const XBadgePrefix = 'x-badge';\r\nconst X_BADGE_CONFIG_NAME = 'badge';\r\n\r\n/**\r\n * Badge Property\r\n */\r\n@Component({ selector: `${XBadgePrefix}-property`, template: '' })\r\nexport class XBadgeProperty extends XPropertyFunction(X_BADGE_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 类型，背景颜色\r\n   * @en_US Type, the background color\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-badge value=\"12\" type=\"primary\">\r\n   *   <x-button>primary</x-button>\r\n   * </x-badge>\r\n   * <x-badge value=\"12\" type=\"success\">\r\n   *   <x-button>success</x-button>\r\n   * </x-badge>\r\n   * <x-badge value=\"12\" type=\"info\">\r\n   *   <x-button>info</x-button>\r\n   * </x-badge>\r\n   * <x-badge value=\"12\" type=\"warning\">\r\n   *   <x-button>warning</x-button>\r\n   * </x-badge>\r\n   * <x-badge value=\"12\" type=\"danger\">\r\n   *   <x-button>danger</x-button>\r\n   * </x-badge>\r\n   * <x-badge value=\"12\" type=\"text\">\r\n   *   <x-button>text</x-button>\r\n   * </x-badge>\r\n   * ```\r\n   *\r\n   */\r\n  readonly type = input<XBadgeType>(this.config?.type ?? 'danger');\r\n  /**\r\n   * @zh_CN 最大值\r\n   * @en_US Max\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-badge value=\"200\" max=\"99\">\r\n   *   <x-button>99</x-button>\r\n   * </x-badge>\r\n   * <x-badge value=\"300\" max=\"200\">\r\n   *   <x-button>200</x-button>\r\n   * </x-badge>\r\n   * ```\r\n   */\r\n  readonly max = input<number, XNumber>(99, { transform: XToNumber });\r\n  /**\r\n   * @zh_CN 显示值\r\n   * @en_US Display value\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-badge value=\"88\">\r\n   *   <x-button>value</x-button>\r\n   * </x-badge>\r\n   * ```\r\n   */\r\n  readonly value = input<string, XNumber>('', { transform: XToString });\r\n  /**\r\n   * @zh_CN 偏移值 left\r\n   * @en_US Offset left value\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-badge value=\"88\" offsetLeft=\"5px\">\r\n   *   <x-button>value</x-button>\r\n   * </x-badge>\r\n   * ```\r\n   *\r\n   */\r\n  readonly offsetLeft = input<string, XNumber>('', { transform: XToCssPixelValue });\r\n  /**\r\n   * @zh_CN 偏移值 top\r\n   * @en_US Offset right value\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-badge value=\"88\" offsetTop=\"5px\">\r\n   *   <x-button>value</x-button>\r\n   * </x-badge>\r\n   * ```\r\n   *\r\n   */\r\n  readonly offsetTop = input<string, XNumber>('', { transform: XToCssPixelValue });\r\n  /**\r\n   * @zh_CN 是否显示小红点\r\n   * @en_US Whether to show the small red dot\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-badge dot>\r\n   *   <x-button>value</x-button>\r\n   * </x-badge>\r\n   * ```\r\n   *\r\n   */\r\n  readonly dot = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 独立使用\r\n   * @en_US Independent use\r\n   * @example\r\n   *\r\n   * ```html\r\n   * <x-badge standalone value=\"25\"></x-badge>\r\n   * <x-badge standalone value=\"200\" max=\"99\"></x-badge>\r\n   * <x-badge standalone value=\"hot\"></x-badge>\r\n   * <x-badge standalone dot></x-badge>\r\n   * ```\r\n   *\r\n   */\r\n  readonly standalone = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n}\r\n\r\n/**\r\n * @zh_CN 标记类型\r\n * @en_US Mark type\r\n */\r\nexport type XBadgeType = XType;\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, computed, signal } from '@angular/core';\r\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\r\nimport { XBadgePrefix, XBadgeProperty } from './badge.property';\r\nimport { XIsNumber, XIsEmpty, XBadgeAnimation, XBadgeStandaloneAnimation, XIsString } from '@ng-nest/ui/core';\r\n\r\n@Component({\r\n  selector: `${XBadgePrefix}`,\r\n  standalone: true,\r\n  imports: [NgClass, NgTemplateOutlet],\r\n  templateUrl: './badge.component.html',\r\n  styleUrls: ['./badge.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  animations: [XBadgeAnimation, XBadgeStandaloneAnimation]\r\n})\r\nexport class XBadgeComponent extends XBadgeProperty {\r\n  range = signal([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '+']);\r\n\r\n  valueNumber = computed(() => {\r\n    return Number(this.value());\r\n  });\r\n\r\n  classMap = computed(() => ({\r\n    [`${XBadgePrefix}-${this.type()}`]: !XIsEmpty(this.type())\r\n  }));\r\n\r\n  displayNums = computed(() => {\r\n    const value = this.value();\r\n    const max = this.max();\r\n    const toNumber = Number(value);\r\n    let displayValue = '';\r\n    if (XIsNumber(toNumber) && max && toNumber > max) {\r\n      displayValue = `${max}+`;\r\n    } else {\r\n      displayValue = `${value}`;\r\n    }\r\n    const res: (string | number)[] = [];\r\n    for (let i = 0; i < displayValue.length; i++) {\r\n      const str = displayValue[i];\r\n      if (str === '+') {\r\n        res.push(str);\r\n      } else {\r\n        res.push(Number(str));\r\n      }\r\n    }\r\n    return res;\r\n  });\r\n\r\n  translateYNumbers = computed(() => {\r\n    const displayNums = this.displayNums();\r\n    const nums: number[] = [];\r\n    for (let num of displayNums) {\r\n      if (XIsString(num) && num === '+') {\r\n        nums.push(10 * 100);\r\n      } else if (XIsNumber(num)) {\r\n        nums.push(num * 100);\r\n      }\r\n    }\r\n    return nums;\r\n  });\r\n\r\n  maxNums = computed(() => {\r\n    return this.displayNums().map((_x, index) => index) as number[];\r\n  });\r\n}\r\n","<div\r\n  #badge\r\n  class=\"x-badge\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-badge-dot]=\"dot()\"\r\n  [class.x-badge-standalone]=\"standalone()\"\r\n>\r\n  <ng-content></ng-content>\r\n  @if (valueNumber() > 0 || dot()) {\r\n    @if (standalone()) {\r\n      <sup [@x-badge-standalone-animation] [style.marginRight]=\"offsetLeft()\" [style.marginTop]=\"offsetTop()\">\r\n        <ng-container *ngTemplateOutlet=\"dotTpl\"></ng-container>\r\n      </sup>\r\n    } @else {\r\n      <sup [@x-badge-animation] [style.marginRight]=\"offsetLeft()\" [style.marginTop]=\"offsetTop()\">\r\n        <ng-container *ngTemplateOutlet=\"dotTpl\"></ng-container>\r\n      </sup>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #dotTpl>\r\n  @if (!dot()) {\r\n    @for (item of maxNums(); track item) {\r\n      <span class=\"x-badge-scroll\" [style.transform]=\"'translateY(-' + translateYNumbers()[$index] + '%)'\">\r\n        @for (j of range(); track j) {\r\n          <p>{{ j }}</p>\r\n        }\r\n      </span>\r\n    }\r\n  }\r\n</ng-template>\r\n","import { NgModule } from '@angular/core';\r\nimport { XBadgeComponent } from './badge.component';\r\n\r\n@NgModule({\r\n  exports: [XBadgeComponent],\r\n  imports: [XBadgeComponent]\r\n})\r\nexport class XBadgeModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}