@acorex/modules 19.2.3 → 19.2.5

package/fesm2022/{acorex-modules-form-template-management-template-picker.component-DW0iMqAA.mjs.map → acorex-modules-form-template-management-template-picker.component-CG-_1tWi.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"acorex-modules-form-template-management-template-picker.component-DW0iMqAA.mjs","sources":["../../../../libs/modules/form-template-management/src/lib/components/widgets/template-picker/template-picker.component.ts","../../../../libs/modules/form-template-management/src/lib/components/widgets/template-picker/template-picker.component.html"],"sourcesContent":["import { AXButtonModule } from '@acorex/components/button';\nimport { AXCommonModule } from '@acorex/components/common';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXBasePageComponent } from '@acorex/components/page';\nimport { AXSearchBoxModule } from '@acorex/components/search-box';\nimport { AXTabsModule, AXTabStripChangedEvent } from '@acorex/components/tabs';\nimport { AXPSettingScope, AXPSettingService, AXPStickyDirective } from '@acorex/platform/common';\nimport { AXPWidgetGroup } from '@acorex/platform/layout/builder';\nimport { CommonModule } from '@angular/common';\nimport { Component, computed, inject, model, signal, ViewEncapsulation } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { orderBy, uniqBy } from 'lodash-es';\nimport { AXPTemplateWidgetListItem } from './template.provider';\n\nexport interface AXPDisplayWidgetProvided extends AXPTemplateWidgetListItem {\n  pinned: boolean;\n}\n\n@Component({\n  imports: [\n    CommonModule,\n    AXCommonModule,\n    FormsModule,\n    AXButtonModule,\n    AXDecoratorModule,\n    AXTabsModule,\n    AXSearchBoxModule,\n    AXPStickyDirective,\n  ],\n  templateUrl: './template-picker.component.html',\n  encapsulation: ViewEncapsulation.None,\n  styleUrls: ['./template-picker.component.scss']\n})\nexport class AXPTemplateWidgetPickerComponent extends AXBasePageComponent {\n  private settingService = inject(AXPSettingService);\n\n  private readonly pinnedSettingKey = 'forms:templates:picker:pinned';\n\n  protected searchTerm = model('');\n\n  // Signals\n  private widgets: AXPDisplayWidgetProvided[] = [];\n  private displayWidgets = signal<AXPDisplayWidgetProvided[]>([]);\n\n  // Signal to track selected widgets\n  protected selectedWidgets = signal<AXPDisplayWidgetProvided[]>([]);\n\n  // Computed for filtered and ordered widget list\n  private orderedList = computed(() => {\n    const search = this.searchTerm().toLowerCase();\n    const selectedTabName = this.selectedTab().name;\n\n    return orderBy(\n      this.displayWidgets().filter((w) => {\n        const matchesTab = selectedTabName === 'all' || w.group.name === selectedTabName;\n        const matchesSearch =\n          !search || w.title.toLowerCase().includes(search) || w.description?.toLowerCase().includes(search);\n        return matchesTab && matchesSearch;\n      }),\n      ['pinned', 'title'],\n      ['desc', 'asc']\n    );\n  });\n\n  // Pinned and regular lists\n  protected pinnedList = computed(() => this.orderedList().filter((c) => c.pinned));\n  protected regularList = computed(() => this.orderedList().filter((c) => !c.pinned));\n\n  protected tabs = computed<AXPWidgetGroup[]>(() => {\n    const uniqueOrderedWidgets = orderBy(\n      uniqBy(\n        [{ name: 'all', title: 'All', order: 0 }, ...this.widgets.map(c => c.group)],\n        (c) => c.name // or another property to ensure uniqueness\n      ),\n      (c) => c.order\n    );\n    return uniqueOrderedWidgets;\n  })\n  protected currentTabIndex = signal(0);\n  protected selectedTab = computed(() => this.tabs()[this.currentTabIndex()]);\n\n  protected override async ngOnInit() {\n    super.ngOnInit();\n    const pinnedWidgets = (await this.settingService.get<string[]>(this.pinnedSettingKey)) || [];\n    this.displayWidgets.set(this.widgets.map((c) => ({ ...c, pinned: pinnedWidgets.includes(c.id), icon: c.icon ?? 'fa-solid fa-file-invoice' })));\n  }\n\n  protected handleTabChange(event: AXTabStripChangedEvent): void {\n    const indx = event.index;\n    if (this.currentTabIndex() != indx) {\n      this.currentTabIndex.set(indx);\n    }\n  }\n\n  protected handleClick(event: MouseEvent, widget: AXPDisplayWidgetProvided) {\n    if (event.ctrlKey) {\n      const currentSelection = this.selectedWidgets();\n      const isAlreadySelected = currentSelection.some((w) => w === widget);\n\n      if (isAlreadySelected) {\n        // Deselect widget if already selected\n        this.selectedWidgets.set(currentSelection.filter((w) => w !== widget));\n      } else {\n        // Add widget to selection\n        this.selectedWidgets.set([...currentSelection, widget]);\n      }\n    } else {\n      // If CTRL is not pressed, select only the clicked widget\n      this.close({ widgets: [widget] });\n    }\n  }\n\n  protected async handlePinClick(e: MouseEvent, widget: AXPDisplayWidgetProvided) {\n    e.stopPropagation();\n    widget.pinned = !widget.pinned;\n    // Get the current list of pinned widgets from settings\n    let pinnedWidgets = (await this.settingService.get<string[]>(this.pinnedSettingKey)) || [];\n\n    // Update the list of pinned widgets based on the pinned status\n    if (widget.pinned) {\n      if (!pinnedWidgets.includes(widget.id)) {\n        pinnedWidgets.push(widget.id);\n      }\n    } else {\n      pinnedWidgets = pinnedWidgets.filter((name) => name !== widget.id);\n    }\n\n    // Save the updated list of pinned widgets\n    await this.settingService.scope(AXPSettingScope.User).set(this.pinnedSettingKey, pinnedWidgets);\n\n    // Trigger a re-render of the widgets\n    this.displayWidgets.set([...this.displayWidgets()]);\n  }\n\n  // Check if a widget is selected\n  protected isWidgetSelected(widget: AXPDisplayWidgetProvided): boolean {\n    return this.selectedWidgets().includes(widget);\n  }\n\n  protected handleConfirmSelection(): void {\n    this.close({ widgets: this.selectedWidgets() });\n  }\n}\n","<div class=\"ax-flex ax-flex-col lg:ax-h-[75vh]\">\n    <div>\n        <ax-tabs [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n            @for(w of tabs();track $index)\n            {\n            <ax-tab-item [text]=\"w.title\" [key]=\"$index.toString()\"\n                [active]=\"currentTabIndex() === $index\"></ax-tab-item>\n            }\n        </ax-tabs>\n    </div>\n    <div class=\"ax-overflow-auto\" #content>\n        <div class=\"ax-p-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all \" #sticky=\"axpSticky\"\n            [axpSticky]=\"'ax-bg-surface-lowest ax-shadow-xl'\" [stickyParent]=\"content\" [stickyOffset]=\"10\">\n            <ax-search-box look=\"fill\" placeholder=\"e.g. Button, Text, ...\" [(ngModel)]=\"searchTerm\" [delayTime]=\"300\"\n                [axAutoFocus]=\"true\">\n                <ax-clear-button></ax-clear-button>\n            </ax-search-box>\n        </div>\n        <div class=\"ax-flex ax-flex-col ax-p-4 ax-pt-0\">\n            <ng-template #itemTpl let-w>\n                <div (click)=\"handleClick($event,w)\"\n                    class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-100 dark:hover:ax-bg-primary-800 ax-cursor-pointer\"\n                    [class.ax-bg-primary-100]=\"isWidgetSelected(w)\">\n                    <div class=\"ax-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border ax-border-neutral-200 ax-text-neutral-500 ax-bg-on-surface  group-hover:ax-bg-primary-200\"\n                        [class.ax-bg-primary-200]=\"isWidgetSelected(w)\">\n                        <i [ngClass]=\"w.icon\" class=\"ax-text-lg group-hover:ax-text-primary-700 ax-text-on-surface-fore\"\n                            [class.ax-text-primary-700]=\"isWidgetSelected(w)\"></i>\n                    </div>\n                    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1\">\n                        <div class=\"ax-flex ax-items-center ax-gap-2\">\n                            <div class=\"ax-font-semibold ax-text-sm\">{{w.title}}</div>\n                            <div (click)=\"handlePinClick($event,w)\">\n                                @if (w.pinned) {\n                                <i class=\"fa-solid fa-thumbtack ax-text-sm ax-text-neutral-500 ax-rotate-45\"></i>\n                                }\n                                @else {\n                                <i\n                                    class=\"fa-light fa-thumbtack ax-text-sm ax-text-neutral-500 ax-rotate-45 ax-invisible group-hover:ax-visible\"></i>\n                                }\n                            </div>\n                        </div>\n                        <span class=\"ax-text-xs ax-text-neutral-400 ax-truncate\">\n                            {{w.description}}\n                        </span>\n                    </div>\n                </div>\n            </ng-template>\n            <div class=\"ax-grid ax-grid-cols-2 ax-gap-2 \">\n                @for(w of pinnedList();track $index)\n                {\n                <ng-container *ngTemplateOutlet=\"itemTpl;context:{ $implicit: w}\"></ng-container>\n                }\n            </div>\n            @if(pinnedList().length)\n            {\n            <hr class=\"ax-my-4 ax-border-dashed\">\n            }\n            <div class=\"ax-grid ax-grid-cols-2 ax-gap-2 \">\n                @for(w of regularList();track $index)\n                {\n                <ng-container *ngTemplateOutlet=\"itemTpl;context:{ $implicit: w}\"></ng-container>\n                }\n            </div>\n        </div>\n    </div>\n</div>\n@if(selectedWidgets().length)\n{\n<ax-footer>\n    <ax-suffix>\n        <ax-button look=\"solid\" color=\"primary\" text=\"{{ selectedWidgets().length }} Selected\"\n            (onClick)=\"handleConfirmSelection()\"></ax-button>\n    </ax-suffix>\n</ax-footer>\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-modules-form-template-management-template-picker.component-CG-_1tWi.mjs","sources":["../../../../libs/modules/form-template-management/src/lib/components/widgets/template-picker/template-picker.component.ts","../../../../libs/modules/form-template-management/src/lib/components/widgets/template-picker/template-picker.component.html"],"sourcesContent":["import { AXButtonModule } from '@acorex/components/button';\nimport { AXCommonModule } from '@acorex/components/common';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXBasePageComponent } from '@acorex/components/page';\nimport { AXSearchBoxModule } from '@acorex/components/search-box';\nimport { AXTabsModule, AXTabStripChangedEvent } from '@acorex/components/tabs';\nimport { AXPSettingScope, AXPSettingService, AXPStickyDirective } from '@acorex/platform/common';\nimport { AXPWidgetGroup } from '@acorex/platform/layout/builder';\nimport { CommonModule } from '@angular/common';\nimport { Component, computed, inject, model, signal, ViewEncapsulation } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { orderBy, uniqBy } from 'lodash-es';\nimport { AXPTemplateWidgetListItem } from './template.provider';\n\nexport interface AXPDisplayWidgetProvided extends AXPTemplateWidgetListItem {\n  pinned: boolean;\n}\n\n@Component({\n  imports: [\n    CommonModule,\n    AXCommonModule,\n    FormsModule,\n    AXButtonModule,\n    AXDecoratorModule,\n    AXTabsModule,\n    AXSearchBoxModule,\n    AXPStickyDirective,\n  ],\n  templateUrl: './template-picker.component.html',\n  encapsulation: ViewEncapsulation.None,\n  styleUrls: ['./template-picker.component.scss']\n})\nexport class AXPTemplateWidgetPickerComponent extends AXBasePageComponent {\n  private settingService = inject(AXPSettingService);\n\n  private readonly pinnedSettingKey = 'forms:templates:picker:pinned';\n\n  protected searchTerm = model('');\n\n  // Signals\n  private widgets: AXPDisplayWidgetProvided[] = [];\n  private displayWidgets = signal<AXPDisplayWidgetProvided[]>([]);\n\n  // Signal to track selected widgets\n  protected selectedWidgets = signal<AXPDisplayWidgetProvided[]>([]);\n\n  // Computed for filtered and ordered widget list\n  private orderedList = computed(() => {\n    const search = this.searchTerm().toLowerCase();\n    const selectedTabName = this.selectedTab().name;\n\n    return orderBy(\n      this.displayWidgets().filter((w) => {\n        const matchesTab = selectedTabName === 'all' || w.group.name === selectedTabName;\n        const matchesSearch =\n          !search || w.title.toLowerCase().includes(search) || w.description?.toLowerCase().includes(search);\n        return matchesTab && matchesSearch;\n      }),\n      ['pinned', 'title'],\n      ['desc', 'asc']\n    );\n  });\n\n  // Pinned and regular lists\n  protected pinnedList = computed(() => this.orderedList().filter((c) => c.pinned));\n  protected regularList = computed(() => this.orderedList().filter((c) => !c.pinned));\n\n  protected tabs = computed<AXPWidgetGroup[]>(() => {\n    const uniqueOrderedWidgets = orderBy(\n      uniqBy(\n        [{ name: 'all', title: 'All', order: 0 }, ...this.widgets.map(c => c.group)],\n        (c) => c.name // or another property to ensure uniqueness\n      ),\n      (c) => c.order\n    );\n    return uniqueOrderedWidgets;\n  })\n  protected currentTabIndex = signal(0);\n  protected selectedTab = computed(() => this.tabs()[this.currentTabIndex()]);\n\n  protected override async ngOnInit() {\n    super.ngOnInit();\n    const pinnedWidgets = (await this.settingService.get<string[]>(this.pinnedSettingKey)) || [];\n    this.displayWidgets.set(this.widgets.map((c) => ({ ...c, pinned: pinnedWidgets.includes(c.id), icon: c.icon ?? 'fa-solid fa-file-invoice' })));\n  }\n\n  protected handleTabChange(event: AXTabStripChangedEvent): void {\n    const indx = event.index;\n    if (this.currentTabIndex() != indx) {\n      this.currentTabIndex.set(indx);\n    }\n  }\n\n  protected handleClick(event: MouseEvent, widget: AXPDisplayWidgetProvided) {\n    if (event.ctrlKey) {\n      const currentSelection = this.selectedWidgets();\n      const isAlreadySelected = currentSelection.some((w) => w === widget);\n\n      if (isAlreadySelected) {\n        // Deselect widget if already selected\n        this.selectedWidgets.set(currentSelection.filter((w) => w !== widget));\n      } else {\n        // Add widget to selection\n        this.selectedWidgets.set([...currentSelection, widget]);\n      }\n    } else {\n      // If CTRL is not pressed, select only the clicked widget\n      this.close({ widgets: [widget] });\n    }\n  }\n\n  protected async handlePinClick(e: MouseEvent, widget: AXPDisplayWidgetProvided) {\n    e.stopPropagation();\n    widget.pinned = !widget.pinned;\n    // Get the current list of pinned widgets from settings\n    let pinnedWidgets = (await this.settingService.get<string[]>(this.pinnedSettingKey)) || [];\n\n    // Update the list of pinned widgets based on the pinned status\n    if (widget.pinned) {\n      if (!pinnedWidgets.includes(widget.id)) {\n        pinnedWidgets.push(widget.id);\n      }\n    } else {\n      pinnedWidgets = pinnedWidgets.filter((name) => name !== widget.id);\n    }\n\n    // Save the updated list of pinned widgets\n    await this.settingService.scope(AXPSettingScope.User).set(this.pinnedSettingKey, pinnedWidgets);\n\n    // Trigger a re-render of the widgets\n    this.displayWidgets.set([...this.displayWidgets()]);\n  }\n\n  // Check if a widget is selected\n  protected isWidgetSelected(widget: AXPDisplayWidgetProvided): boolean {\n    return this.selectedWidgets().includes(widget);\n  }\n\n  protected handleConfirmSelection(): void {\n    this.close({ widgets: this.selectedWidgets() });\n  }\n}\n","<div class=\"ax-flex ax-flex-col lg:ax-h-[75vh]\">\n    <div>\n        <ax-tabs [look]=\"'with-line'\" (onActiveTabChanged)=\"handleTabChange($event)\">\n            @for(w of tabs();track $index)\n            {\n            <ax-tab-item [text]=\"w.title\" [key]=\"$index.toString()\"\n                [active]=\"currentTabIndex() === $index\"></ax-tab-item>\n            }\n        </ax-tabs>\n    </div>\n    <div class=\"ax-overflow-auto\" #content>\n        <div class=\"ax-p-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all \" #sticky=\"axpSticky\"\n            [axpSticky]=\"'ax-bg-surface-lowest ax-shadow-xl'\" [stickyParent]=\"content\" [stickyOffset]=\"10\">\n            <ax-search-box look=\"fill\" placeholder=\"e.g. Button, Text, ...\" [(ngModel)]=\"searchTerm\" [delayTime]=\"300\"\n                [axAutoFocus]=\"true\">\n                <ax-clear-button></ax-clear-button>\n            </ax-search-box>\n        </div>\n        <div class=\"ax-flex ax-flex-col ax-p-4 ax-pt-0\">\n            <ng-template #itemTpl let-w>\n                <div (click)=\"handleClick($event,w)\"\n                    class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-100 dark:hover:ax-bg-primary-800 ax-cursor-pointer\"\n                    [class.ax-bg-primary-100]=\"isWidgetSelected(w)\">\n                    <div class=\"ax-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border ax-border-neutral-200 ax-text-neutral-500 ax-bg-on-surface  group-hover:ax-bg-primary-200\"\n                        [class.ax-bg-primary-200]=\"isWidgetSelected(w)\">\n                        <i [ngClass]=\"w.icon\" class=\"ax-text-lg group-hover:ax-text-primary-700 ax-text-on-surface-fore\"\n                            [class.ax-text-primary-700]=\"isWidgetSelected(w)\"></i>\n                    </div>\n                    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1\">\n                        <div class=\"ax-flex ax-items-center ax-gap-2\">\n                            <div class=\"ax-font-semibold ax-text-sm\">{{w.title}}</div>\n                            <div (click)=\"handlePinClick($event,w)\">\n                                @if (w.pinned) {\n                                <i class=\"fa-solid fa-thumbtack ax-text-sm ax-text-neutral-500 ax-rotate-45\"></i>\n                                }\n                                @else {\n                                <i\n                                    class=\"fa-light fa-thumbtack ax-text-sm ax-text-neutral-500 ax-rotate-45 ax-invisible group-hover:ax-visible\"></i>\n                                }\n                            </div>\n                        </div>\n                        <span class=\"ax-text-xs ax-text-neutral-400 ax-truncate\">\n                            {{w.description}}\n                        </span>\n                    </div>\n                </div>\n            </ng-template>\n            <div class=\"ax-grid ax-grid-cols-2 ax-gap-2 \">\n                @for(w of pinnedList();track $index)\n                {\n                <ng-container *ngTemplateOutlet=\"itemTpl;context:{ $implicit: w}\"></ng-container>\n                }\n            </div>\n            @if(pinnedList().length)\n            {\n            <hr class=\"ax-my-4 ax-border-dashed\">\n            }\n            <div class=\"ax-grid ax-grid-cols-2 ax-gap-2 \">\n                @for(w of regularList();track $index)\n                {\n                <ng-container *ngTemplateOutlet=\"itemTpl;context:{ $implicit: w}\"></ng-container>\n                }\n            </div>\n        </div>\n    </div>\n</div>\n@if(selectedWidgets().length)\n{\n<ax-footer>\n    <ax-suffix>\n        <ax-button look=\"solid\" color=\"primary\" text=\"{{ selectedWidgets().length }} Selected\"\n            (onClick)=\"handleConfirmSelection()\"></ax-button>\n    </ax-suffix>\n</ax-footer>\n}"],"names":[],"mappings":"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"}

package/fesm2022/acorex-modules-form-template-management.mjs

@@ -51,7 +51,7 @@ class AXPTemplateWidgetProviderService {
         return null;
     }
     async chooseTemplate() {
-        const com = await import('./acorex-modules-form-template-management-template-picker.component-DW0iMqAA.mjs').then((c) => c.AXPTemplateWidgetPickerComponent);
+        const com = await import('./acorex-modules-form-template-management-template-picker.component-CG-_1tWi.mjs').then((c) => c.AXPTemplateWidgetPickerComponent);
         const widgets = await this.items({
             skip: 0,
             take: 100,

package/fesm2022/acorex-modules-notification-management.mjs

@@ -89,6 +89,10 @@ async function notificationChannelEntityFactory(injector) {
                 id: 'notificationChannel',
                 title: 'Notification Channel',
             },
+            {
+                id: 'in-app',
+                title: 'In App',
+            },
         ],
         properties: [
             {
@@ -165,6 +169,101 @@ async function notificationChannelEntityFactory(injector) {
                     },
                 ],
             },
+            {
+                name: 'type',
+                title: `t("type", { scope: "${i18n}" })`,
+                groupId: 'in-app',
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.select,
+                        options: {
+                            valueField: 'name',
+                            textField: 'title',
+                            dataSource: [
+                                { title: 'Notification', name: 'notification' },
+                                { title: 'Promotion', name: 'promotion' },
+                                { title: 'PopUp', name: 'popup' },
+                            ],
+                            direction: 'horizontal',
+                            multiple: false,
+                        },
+                    },
+                },
+                validations: [
+                    {
+                        rule: 'required',
+                    },
+                ],
+            },
+            {
+                name: 'view-shape',
+                title: `t("shape", { scope: "${i18n}" })`,
+                groupId: 'in-app',
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.select,
+                        options: {
+                            valueField: 'name',
+                            textField: 'title',
+                            dataSource: [
+                                { title: 'Circle', name: 'circle' },
+                                { title: 'Square', name: 'square' },
+                            ],
+                            direction: 'horizontal',
+                            multiple: false,
+                        },
+                    },
+                },
+                validations: [
+                    {
+                        rule: 'required',
+                    },
+                ],
+            },
+            {
+                name: 'placement',
+                title: `t("placement", { scope: "${i18n}" })`,
+                groupId: 'in-app',
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.select,
+                        options: {
+                            valueField: 'name',
+                            textField: 'title',
+                            dataSource: [
+                                { title: 'Header Leading', name: 'header-l' },
+                                { title: 'Footer Leading', name: 'footer-l' },
+                            ],
+                            direction: 'horizontal',
+                            multiple: false,
+                        },
+                    },
+                },
+                validations: [
+                    {
+                        rule: 'required',
+                    },
+                ],
+            },
+            {
+                name: 'pin',
+                title: `t("pin", { scope: "${i18n}" })`,
+                groupId: 'in-app',
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.checkbox,
+                    },
+                },
+                validations: [
+                    {
+                        rule: 'required',
+                    },
+                ],
+            },
             {
                 name: 'trigger',
                 title: `t("trigger", { scope: "${i18n}" })`,
@@ -222,6 +321,9 @@ async function notificationChannelEntityFactory(injector) {
                         {
                             id: 'notificationChannel',
                         },
+                        {
+                            id: 'in-app',
+                        },
                     ],
                     properties: [
                         {
@@ -274,6 +376,46 @@ async function notificationChannelEntityFactory(injector) {
                                 },
                             },
                         },
+                        {
+                            name: 'type',
+                            layout: {
+                                positions: {
+                                    lg: {
+                                        colSpan: 4,
+                                    },
+                                },
+                            },
+                        },
+                        {
+                            name: 'view-shape',
+                            layout: {
+                                positions: {
+                                    lg: {
+                                        colSpan: 4,
+                                    },
+                                },
+                            },
+                        },
+                        {
+                            name: 'placement',
+                            layout: {
+                                positions: {
+                                    lg: {
+                                        colSpan: 4,
+                                    },
+                                },
+                            },
+                        },
+                        {
+                            name: 'pin',
+                            layout: {
+                                positions: {
+                                    lg: {
+                                        colSpan: 4,
+                                    },
+                                },
+                            },
+                        },
                     ],
                 },
                 update: {
@@ -1182,7 +1324,7 @@ class AXMAdminNotificationPanelComponent {
         this.router.navigate([`${this.sessionService.application?.name}/m/notification-management/e/my-notification/list`]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMAdminNotificationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMAdminNotificationPanelComponent, isStandalone: true, selector: "axm-admin-notification-panel", outputs: { onNewNotfication: "onNewNotfication" }, ngImport: i0, template: "<div class=\"ax-p-4 ax-flex ax-justify-between ax-items-center\">\n  <span class=\"ax-text-xl\">Notifications</span>\n  <ax-button color=\"default\" look=\"blank\">\n    <ax-icon>\n      <i class=\"fa-regular fa-gear fa-lg\"></i>\n    </ax-icon>\n  </ax-button>\n</div>\n<ax-tabs [content]=\"cons\" look=\"with-line\" location=\"bottom\">\n  @for(tab of tabItems(); track tab.text){\n  <ax-tab-item [text]=\"tab.text\" [active]=\"activeTab() === tab.text\" (activeChange)=\"changeActiveTab(tab.text)\">\n    <ax-suffix>\n      @if(tab.count){\n      <ax-badge [color]=\"activeTab() === tab.text ? 'primary' : 'ghost'\" [text]=\"tab.count.toString()\"></ax-badge>\n      }\n    </ax-suffix>\n    <ax-content>\n      <div class=\"ax-max-h-[50vh] ax-overflow-y-auto\">\n        @for(notif of getNotificationItems(tab.text); track notif.id){\n        <axp-master-notification-item\n          [data]=\"notif\"\n          (onPressNotificationItem)=\"markAsRead($event)\"\n        ></axp-master-notification-item>\n        }\n      </div>\n      <div class=\"ax-flex ax-gap-4 ax-justify-between ax-p-4 ax-border-t ax-border-default\">\n        <ax-button\n          [disabled]=\"NewNotification() === 0\"\n          color=\"ghost\"\n          text=\"Mark all as read\"\n          (onClick)=\"markAllAsRead()\"\n        ></ax-button>\n        <ax-button color=\"primary\" text=\"View all notifications\" (onClick)=\"viewAllNotifications()\"></ax-button>\n      </div>\n    </ax-content>\n  </ax-tab-item>\n  }\n</ax-tabs>\n\n<ng-template [axTabContent] #cons=\"axTabContent\"></ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2$1.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$1.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: i2$1.AXTabContentDirective, selector: "[axTabContent]", inputs: ["axTabContent"], exportAs: ["axTabContent"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i4$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: AXMAdminNotificationItemComponent, selector: "axp-master-notification-item", inputs: ["data"], outputs: ["onPressNotificationItem"] }, { kind: "ngmodule", type: AXFormatModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMAdminNotificationPanelComponent, isStandalone: true, selector: "axm-admin-notification-panel", outputs: { onNewNotfication: "onNewNotfication" }, ngImport: i0, template: "<div class=\"ax-p-4 ax-flex ax-justify-between ax-items-center\">\n  <span class=\"ax-text-xl\">Notifications</span>\n  <ax-button color=\"default\" look=\"blank\">\n    <ax-icon>\n      <i class=\"fa-regular fa-gear fa-lg\"></i>\n    </ax-icon>\n  </ax-button>\n</div>\n<ax-tabs [content]=\"cons\" look=\"with-line\" location=\"bottom\">\n  @for(tab of tabItems(); track tab.text){\n  <ax-tab-item [text]=\"tab.text\" [active]=\"activeTab() === tab.text\" (activeChange)=\"changeActiveTab(tab.text)\">\n    <ax-suffix>\n      @if(tab.count){\n      <ax-badge [color]=\"activeTab() === tab.text ? 'primary' : 'ghost'\" [text]=\"tab.count.toString()\"></ax-badge>\n      }\n    </ax-suffix>\n    <ax-content>\n      <div class=\"ax-max-h-[50vh] ax-overflow-y-auto\">\n        @for(notif of getNotificationItems(tab.text); track notif.id){\n        <axp-master-notification-item\n          [data]=\"notif\"\n          (onPressNotificationItem)=\"markAsRead($event)\"\n        ></axp-master-notification-item>\n        }\n      </div>\n      <div class=\"ax-flex ax-gap-4 ax-justify-between ax-p-4 ax-border-t ax-border-default\">\n        <ax-button\n          [disabled]=\"NewNotification() === 0\"\n          color=\"ghost\"\n          text=\"Mark all as read\"\n          (onClick)=\"markAllAsRead()\"\n        ></ax-button>\n        <ax-button color=\"primary\" text=\"View all notifications\" (onClick)=\"viewAllNotifications()\"></ax-button>\n      </div>\n    </ax-content>\n  </ax-tab-item>\n  }\n</ax-tabs>\n\n<ng-template [axTabContent] #cons=\"axTabContent\"></ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2$1.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$1.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: i2$1.AXTabContentDirective, selector: "[axTabContent]", inputs: ["axTabContent"], exportAs: ["axTabContent"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.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: AXBadgeModule }, { kind: "component", type: i4$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: AXMAdminNotificationItemComponent, selector: "axp-master-notification-item", inputs: ["data"], outputs: ["onPressNotificationItem"] }, { kind: "ngmodule", type: AXFormatModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMAdminNotificationPanelComponent, decorators: [{
             type: Component,
@@ -1206,7 +1348,7 @@ class AXMAdminNotificationSlotComponent {
         this.totalNewNotification.set(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMAdminNotificationSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMAdminNotificationSlotComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<ax-button class=\"ax-relative\" color=\"primary\" #notification>\n  <ax-icon>\n    <i class=\"fa-regular fa-bell\"></i>\n  </ax-icon>\n  <ax-suffix class=\"ax-absolute ax-top-0 ax-left-1/2\">\n    @if(totalNewNotification()){\n    <ax-badge color=\"success\" [text]=\"totalNewNotification().toString()\"></ax-badge>\n    }\n  </ax-suffix>\n</ax-button>\n<ax-popover [target]=\"notification\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" [adaptivityEnabled]=\"true\">\n  <div class=\"ax-bg-surface-lowest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full\">\n    <axm-admin-notification-panel (onNewNotfication)=\"setTotalNewNotification($event)\"> </axm-admin-notification-panel>\n  </div>\n</ax-popover>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i4$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i4$2.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXMAdminNotificationPanelComponent, selector: "axm-admin-notification-panel", outputs: ["onNewNotfication"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMAdminNotificationSlotComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<ax-button class=\"ax-relative\" color=\"primary\" #notification>\n  <ax-icon>\n    <i class=\"fa-regular fa-bell\"></i>\n  </ax-icon>\n  <ax-suffix class=\"ax-absolute ax-top-0 ax-left-1/2\">\n    @if(totalNewNotification()){\n    <ax-badge color=\"success\" [text]=\"totalNewNotification().toString()\"></ax-badge>\n    }\n  </ax-suffix>\n</ax-button>\n<ax-popover [target]=\"notification\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" [adaptivityEnabled]=\"true\">\n  <div class=\"ax-bg-surface-lowest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full\">\n    <axm-admin-notification-panel (onNewNotfication)=\"setTotalNewNotification($event)\"> </axm-admin-notification-panel>\n  </div>\n</ax-popover>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.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: AXBadgeModule }, { kind: "component", type: i4$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i4$2.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXMAdminNotificationPanelComponent, selector: "axm-admin-notification-panel", outputs: ["onNewNotfication"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMAdminNotificationSlotComponent, decorators: [{
             type: Component,