@acorex/platform 21.0.0-next.57 → 21.0.0-next.59

package/fesm2022/acorex-platform-layout-widgets.mjs

@@ -28678,6 +28678,231 @@ var alertBoxWidgetDesigner_component = /*#__PURE__*/Object.freeze({
     AXPAlertBoxWidgetDesignerComponent: AXPAlertBoxWidgetDesignerComponent
 });
 
+const AXPBadgeLayoutWidget = {
+    name: 'badge-layout',
+    title: '@platform-layout-widgets:widgets.badge-layout.title',
+    description: '@platform-layout-widgets:widgets.badge-layout.description',
+    icon: 'fa-light fa-badge',
+    categories: [AXP_WIDGETS_LAYOUT_CATEGORY],
+    subCategory: AXP_WIDGETS_LAYOUT_SUB_UTILITY,
+    groups: [AXPWidgetGroupEnum.FormElement],
+    type: 'view',
+    properties: [
+        AXP_NAME_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        {
+            name: 'text',
+            title: 'Text',
+            group: AXP_STYLING_PROPERTY_GROUP,
+            schema: {
+                dataType: 'string',
+                defaultValue: '',
+                interface: {
+                    name: 'text',
+                    path: 'options.text',
+                    type: AXPWidgetsCatalog.text,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'color',
+            title: 'Color',
+            group: AXP_STYLING_PROPERTY_GROUP,
+            schema: {
+                dataType: 'string',
+                defaultValue: 'primary',
+                interface: {
+                    name: 'color',
+                    path: 'options.color',
+                    type: AXPWidgetsCatalog.select,
+                    valueTransforms: objectKeyValueTransforms('id'),
+                    options: {
+                        dataSource: [
+                            { id: 'primary', title: 'Primary' },
+                            { id: 'secondary', title: 'Secondary' },
+                            { id: 'success', title: 'Success' },
+                            { id: 'warning', title: 'Warning' },
+                            { id: 'danger', title: 'Danger' },
+                            { id: 'neutral', title: 'Neutral' },
+                            { id: 'ghost', title: 'Ghost' },
+                            { id: 'accent1', title: 'Accent 1' },
+                            { id: 'accent2', title: 'Accent 2' },
+                            { id: 'accent3', title: 'Accent 3' },
+                        ],
+                    },
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'icon',
+            title: 'Icon',
+            group: AXP_STYLING_PROPERTY_GROUP,
+            schema: {
+                dataType: 'string',
+                defaultValue: '',
+                interface: {
+                    name: 'icon',
+                    path: 'options.icon',
+                    type: AXPWidgetsCatalog.text,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'look',
+            title: 'Look',
+            group: AXP_STYLING_PROPERTY_GROUP,
+            schema: {
+                dataType: 'string',
+                defaultValue: 'twotone',
+                interface: {
+                    name: 'look',
+                    path: 'options.look',
+                    type: AXPWidgetsCatalog.select,
+                    valueTransforms: objectKeyValueTransforms('id'),
+                    options: {
+                        dataSource: [
+                            { id: 'twotone', title: 'Twotone' },
+                            { id: 'solid', title: 'Solid' },
+                            { id: 'outline', title: 'Outline' },
+                            { id: 'blank', title: 'Blank' },
+                        ],
+                    },
+                },
+            },
+            visible: true,
+        },
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return badgeWidgetView_component; }).then((c) => c.AXPBadgeLayoutWidgetViewComponent),
+        },
+        edit: {
+            component: () => Promise.resolve().then(function () { return badgeWidgetView_component; }).then((c) => c.AXPBadgeLayoutWidgetViewComponent),
+        },
+        designer: {
+            component: () => Promise.resolve().then(function () { return badgeWidgetView_component; }).then((c) => c.AXPBadgeLayoutWidgetViewComponent),
+        },
+    },
+};
+
+class AXPBadgeLayoutWidgetViewComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----   Computed Properties   ----
+        this.resolvedValue = computed(() => this.normalizeValue(this.getValue()), ...(ngDevMode ? [{ debugName: "resolvedValue" }] : /* istanbul ignore next */ []));
+        this.displayText = computed(() => {
+            const value = this.resolvedValue();
+            if (value?.text?.trim()) {
+                return value.text.trim();
+            }
+            const optionText = this.options()['text'];
+            return typeof optionText === 'string' ? optionText.trim() : '';
+        }, ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+        this.displayColor = computed(() => this.resolveColor(this.resolvedValue()?.color ?? this.options()['color'], 'primary'), ...(ngDevMode ? [{ debugName: "displayColor" }] : /* istanbul ignore next */ []));
+        this.displayIcon = computed(() => {
+            const icon = this.resolvedValue()?.icon ?? this.options()['icon'];
+            return typeof icon === 'string' && icon.trim().length > 0 ? icon.trim() : '';
+        }, ...(ngDevMode ? [{ debugName: "displayIcon" }] : /* istanbul ignore next */ []));
+        this.displayLook = computed(() => this.resolveLook(this.resolvedValue()?.look ?? this.options()['look'], 'twotone'), ...(ngDevMode ? [{ debugName: "displayLook" }] : /* istanbul ignore next */ []));
+        this.hasValue = computed(() => this.displayText().length > 0, ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ----   Utility Methods   ----
+    normalizeValue(value) {
+        if (value == null) {
+            return null;
+        }
+        if (typeof value === 'string') {
+            return { text: value.trim() };
+        }
+        if (typeof value === 'object') {
+            return value;
+        }
+        return null;
+    }
+    resolveColor(raw, fallback) {
+        const id = typeof raw === 'string' ? raw : raw?.id;
+        const allowed = [
+            'primary',
+            'secondary',
+            'success',
+            'warning',
+            'danger',
+            'neutral',
+            'ghost',
+            'accent1',
+            'accent2',
+            'accent3',
+        ];
+        if (id && allowed.includes(id)) {
+            return id;
+        }
+        return fallback;
+    }
+    resolveLook(raw, fallback) {
+        const id = typeof raw === 'string' ? raw : raw?.id;
+        const allowed = ['solid', 'twotone', 'blank', 'outline'];
+        if (id && allowed.includes(id)) {
+            return id;
+        }
+        return fallback;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPBadgeLayoutWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPBadgeLayoutWidgetViewComponent, isStandalone: true, selector: "axp-badge-layout-widget-view", host: { classAttribute: "axp-badge-layout-widget-view" }, usesInheritance: true, ngImport: i0, template: `
+    @if (hasValue()) {
+      <ax-badge
+        class="__badge"
+        [color]="displayColor()"
+        [look]="displayLook()"
+        [text]="(displayText() | translate | async)!"
+      >
+        @if (displayIcon()) {
+          <ax-prefix class="__prefix">
+            <ax-icon class="__icon">
+              <i [class]="displayIcon()"></i>
+            </ax-icon>
+          </ax-prefix>
+        }
+      </ax-badge>
+    } @else {
+      <span class="ax-text-muted">---</span>
+    }
+  `, isInline: true, styles: [".axp-badge-layout-widget-view{display:inline-flex;min-width:0px}.axp-badge-layout-widget-view ax-badge.__badge{display:inline-flex;align-items:center;gap:.125rem;padding:.125rem .5rem;font-size:.75rem;line-height:1rem;font-weight:500;line-height:1}.axp-badge-layout-widget-view .__prefix{display:inline-flex;flex-shrink:0;align-items:center}.axp-badge-layout-widget-view .__icon{font-size:.85em;opacity:.9}\n"], dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPBadgeLayoutWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-badge-layout-widget-view', host: {
+                        class: 'axp-badge-layout-widget-view',
+                    }, template: `
+    @if (hasValue()) {
+      <ax-badge
+        class="__badge"
+        [color]="displayColor()"
+        [look]="displayLook()"
+        [text]="(displayText() | translate | async)!"
+      >
+        @if (displayIcon()) {
+          <ax-prefix class="__prefix">
+            <ax-icon class="__icon">
+              <i [class]="displayIcon()"></i>
+            </ax-icon>
+          </ax-prefix>
+        }
+      </ax-badge>
+    } @else {
+      <span class="ax-text-muted">---</span>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXBadgeModule, AXDecoratorModule, AXTranslationModule, AsyncPipe], styles: [".axp-badge-layout-widget-view{display:inline-flex;min-width:0px}.axp-badge-layout-widget-view ax-badge.__badge{display:inline-flex;align-items:center;gap:.125rem;padding:.125rem .5rem;font-size:.75rem;line-height:1rem;font-weight:500;line-height:1}.axp-badge-layout-widget-view .__prefix{display:inline-flex;flex-shrink:0;align-items:center}.axp-badge-layout-widget-view .__icon{font-size:.85em;opacity:.9}\n"] }]
+        }] });
+
+var badgeWidgetView_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPBadgeLayoutWidgetViewComponent: AXPBadgeLayoutWidgetViewComponent
+});
+
 class AXPIconWidgetViewComponent extends AXPColumnWidgetComponent {
     //#region ----   Methods   ----
     /**
@@ -29815,6 +30040,7 @@ const REGISTERED_WIDGETS = [
     AXPRepeaterWidget,
     AXPTextBlockWidget,
     AXPAlertBoxWidget,
+    AXPBadgeLayoutWidget,
     AXPFormFieldWidget,
     AXPGridWidget,
     AXPAdvancedGridWidget,