@acorex/platform 20.8.1 → 20.8.4

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

@@ -3535,7 +3535,7 @@ class AXPPropertyViewerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPPropertyViewerComponent, isStandalone: true, selector: "axp-property-viewer", inputs: { tabsInput: { classPropertyName: "tabsInput", publicName: "tabsInput", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, ngImport: i0, template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n    <!-- #region Shared property row template (used in both advanced and simple modes) -->\n    <ng-template #propertyRow let-prop=\"prop\" let-translateTitle=\"translateTitle\">\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-py-2\">\n            <!-- Property header: title + value/expression toggle (when binding.enabled) -->\n            <div class=\"ax-flex ax-items-center ax-gap-2 ax-w-full\">\n                @if (prop.showLabel !== false) {\n                @if (translateTitle) {\n                <span class=\"ax-font-semibold ax-flex-1 ax-min-w-0\">{{ prop.title | translate | async }}</span>\n                } @else {\n                <span class=\"ax-font-semibold ax-flex-1 ax-min-w-0\">{{ prop.title }}</span>\n                }\n                }\n                @if (prop.binding?.enabled) {\n                <div class=\"ax-flex ax-gap-1 ax-shrink-0 ax-xs\">\n                    <ax-button [toggleable]=\"true\" [selected]=\"isExpressionMode(prop)\" look=\"twotone\"\n                        [color]=\"isExpressionMode(prop) ? 'primary' : 'default'\" class=\"ax-shrink-0\"\n                        [title]=\"(isExpressionMode(prop) ? '@general:terms.common.expression' : '@general:terms.common.value') | translate | async\"\n                        (selectedChange)=\"setExpressionMode(prop, $event)\">\n                        @if (isExpressionMode(prop)) {\n                        <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n                        } @else {\n                        <ax-icon icon=\"fa-light fa-keyboard\"></ax-icon>\n                        }\n                    </ax-button>\n                </div>\n                }\n            </div>\n            <!-- Property content: Open Editor button (expression mode) or widget renderer (value mode) -->\n            @if (prop.binding?.enabled && isExpressionMode(prop)) {\n            <ax-button look=\"twotone\" color=\"primary\" size=\"sm\" class=\"ax-w-full\"\n                [text]=\"'@general:widgets.triggers.open-editor' | translate | async\" (onClick)=\"openBindingEditor(prop)\"\n                [title]=\"'@general:widgets.triggers.edit-binding-expression' | translate | async\">\n                <ax-prefix>\n                    <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n                </ax-prefix>\n            </ax-button>\n            } @else if (prop.schema.interface) {\n            <ng-container axp-widget-renderer [node]=\"prop.schema.interface\" [mode]=\"'edit'\">\n            </ng-container>\n            }\n        </div>\n    </ng-template>\n    <!-- #endregion -->\n\n    <!-- #region Advanced mode: tabs + accordion groups -->\n    @if (mode() === 'advanced') {\n    <div class=\"ax-flex ax-flex-col\">\n        @if (tabs().length > 1) {\n        <div class=\"ax-pb-2\">\n            <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n                @for (tab of tabs(); track $index) {\n                <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n                </ax-tab-item>\n                }\n            </ax-tabs>\n        </div>\n        }\n        <div class=\"ax-flex-1 ax-overflow-auto\">\n            <ax-accordion-group [accordion]=\"false\" [look]=\"'flat'\">\n                @for (group of groups(); track $index) {\n                <ax-accordion-item class=\"!ax-mb-0\" [caption]=\"group.title\" [isCollapsed]=\"group.isCollapsed\"\n                    (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n                    <div class=\"ax-flex ax-flex-col\">\n                        @for (p of group.props; track $index) {\n                        <ng-container *ngTemplateOutlet=\"propertyRow; context: { prop: p, translateTitle: false }\">\n                        </ng-container>\n                        }\n                    </div>\n                </ax-accordion-item>\n                }\n            </ax-accordion-group>\n        </div>\n    </div>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Simple mode: flat list of properties with padding -->\n    @else {\n    <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n        @for (group of groups(); track $index) {\n        @for (p of group.props; track $index) {\n        <ng-container *ngTemplateOutlet=\"propertyRow; context: { prop: p, translateTitle: true }\">\n        </ng-container>\n        }\n        }\n    </div>\n    }\n    <!-- #endregion -->\n</axp-widgets-container>", styles: ["axp-property-viewer ax-accordion-item .ax-accordion-header{font-weight:600!important;border-bottom-width:1px!important;background-color:rgb(var(--ax-sys-color-lighter-surface))!important;color:rgb(var(--ax-sys-color-on-lighter-surface))!important;border-color:rgb(var(--ax-sys-color-border-lighter-surface))!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i2$7.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i2$7.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { 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: AXTabsModule }, { kind: "component", type: i5$3.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i5$3.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i6$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i6$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPPropertyViewerComponent, isStandalone: true, selector: "axp-property-viewer", inputs: { tabsInput: { classPropertyName: "tabsInput", publicName: "tabsInput", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, ngImport: i0, template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n    <!-- #region Shared property row template (used in both advanced and simple modes) -->\n    <ng-template #propertyRow let-prop=\"prop\" let-translateTitle=\"translateTitle\">\n        <div class=\"ax-flex ax-flex-col ax-gap-2 ax-py-2\">\n            <!-- Property header: title + value/expression toggle (when binding.enabled) -->\n            <div class=\"ax-flex ax-items-center ax-gap-2 ax-w-full\">\n                @if (prop.showLabel !== false) {\n                @if (translateTitle) {\n                <span class=\"ax-font-semibold ax-flex-1 ax-min-w-0\">{{ prop.title | translate | async }}</span>\n                } @else {\n                <span class=\"ax-font-semibold ax-flex-1 ax-min-w-0\">{{ prop.title }}</span>\n                }\n                }\n                @if (prop.binding?.enabled) {\n                <div class=\"ax-flex ax-gap-1 ax-shrink-0 ax-xs\">\n                    <ax-button [toggleable]=\"true\" [selected]=\"isExpressionMode(prop)\" look=\"twotone\"\n                        [color]=\"isExpressionMode(prop) ? 'primary' : 'default'\" class=\"ax-shrink-0\"\n                        [title]=\"(isExpressionMode(prop) ? '@general:terms.common.expression' : '@general:terms.common.value') | translate | async\"\n                        (selectedChange)=\"setExpressionMode(prop, $event)\">\n                        @if (isExpressionMode(prop)) {\n                        <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n                        } @else {\n                        <ax-icon icon=\"fa-light fa-keyboard\"></ax-icon>\n                        }\n                    </ax-button>\n                </div>\n                }\n            </div>\n            <!-- Property content: Open Editor button (expression mode) or widget renderer (value mode) -->\n            @if (prop.binding?.enabled && isExpressionMode(prop)) {\n            <ax-button look=\"twotone\" color=\"primary\" size=\"sm\" class=\"ax-w-full\"\n                [text]=\"'@general:widgets.triggers.open-editor' | translate | async\" (onClick)=\"openBindingEditor(prop)\"\n                [title]=\"'@general:widgets.triggers.edit-binding-expression' | translate | async\">\n                <ax-prefix>\n                    <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n                </ax-prefix>\n            </ax-button>\n            } @else if (prop.schema.interface) {\n            <ng-container axp-widget-renderer [node]=\"prop.schema.interface\" [mode]=\"'edit'\">\n            </ng-container>\n            }\n        </div>\n    </ng-template>\n    <!-- #endregion -->\n\n    <!-- #region Advanced mode: tabs + accordion groups -->\n    @if (mode() === 'advanced') {\n    <div class=\"ax-flex ax-flex-col\">\n        @if (tabs().length > 1) {\n        <div class=\"ax-pb-2\">\n            <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n                @for (tab of tabs(); track $index) {\n                <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n                </ax-tab-item>\n                }\n            </ax-tabs>\n        </div>\n        }\n        <div class=\"ax-flex-1 ax-overflow-auto\">\n            <ax-accordion-group [accordion]=\"false\" [look]=\"'flat'\">\n                @for (group of groups(); track $index) {\n                <ax-accordion-item class=\"!ax-mb-0\" [caption]=\"group.title\" [isCollapsed]=\"group.isCollapsed\"\n                    (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n                    <div class=\"ax-flex ax-flex-col\">\n                        @for (p of group.props; track $index) {\n                        <ng-container *ngTemplateOutlet=\"propertyRow; context: { prop: p, translateTitle: false }\">\n                        </ng-container>\n                        }\n                    </div>\n                </ax-accordion-item>\n                }\n            </ax-accordion-group>\n        </div>\n    </div>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Simple mode: flat list of properties with padding -->\n    @else {\n    <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n        @for (group of groups(); track $index) {\n        @for (p of group.props; track $index) {\n        <ng-container *ngTemplateOutlet=\"propertyRow; context: { prop: p, translateTitle: true }\">\n        </ng-container>\n        }\n        }\n    </div>\n    }\n    <!-- #endregion -->\n</axp-widgets-container>", styles: ["axp-property-viewer ax-accordion-item .ax-accordion-header{font-weight:600!important;border-bottom-width:1px!important;background-color:rgb(var(--ax-sys-color-lighter-surface))!important;color:rgb(var(--ax-sys-color-on-lighter-surface))!important;border-color:rgb(var(--ax-sys-color-border-lighter-surface))!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i2$7.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "textdecoration", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i2$7.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { 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: AXTabsModule }, { kind: "component", type: i5$3.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i5$3.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i6$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i6$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPPropertyViewerComponent, decorators: [{
             type: Component,