@acorex/modules 19.2.4 → 19.2.6

package/fesm2022/acorex-modules-form-template-management-template-picker.component-xiRKc4FF.mjs

@@ -0,0 +1,126 @@
+import * as i4 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i2 from '@acorex/components/common';
+import { AXCommonModule } from '@acorex/components/common';
+import * as i5 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXBasePageComponent } from '@acorex/components/page';
+import * as i7 from '@acorex/components/search-box';
+import { AXSearchBoxModule } from '@acorex/components/search-box';
+import * as i6 from '@acorex/components/tabs';
+import { AXTabsModule } from '@acorex/components/tabs';
+import { AXPSettingService, AXPSettingScope, AXPStickyDirective } from '@acorex/platform/common';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, model, signal, computed, Component, ViewEncapsulation } from '@angular/core';
+import * as i3 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { orderBy, uniqBy } from 'lodash-es';
+
+class AXPTemplateWidgetPickerComponent extends AXBasePageComponent {
+    constructor() {
+        super(...arguments);
+        this.settingService = inject(AXPSettingService);
+        this.pinnedSettingKey = 'forms:templates:picker:pinned';
+        this.searchTerm = model('');
+        // Signals
+        this.widgets = [];
+        this.displayWidgets = signal([]);
+        // Signal to track selected widgets
+        this.selectedWidgets = signal([]);
+        // Computed for filtered and ordered widget list
+        this.orderedList = computed(() => {
+            const search = this.searchTerm().toLowerCase();
+            const selectedTabName = this.selectedTab().name;
+            return orderBy(this.displayWidgets().filter((w) => {
+                const matchesTab = selectedTabName === 'all' || w.group.name === selectedTabName;
+                const matchesSearch = !search || w.title.toLowerCase().includes(search) || w.description?.toLowerCase().includes(search);
+                return matchesTab && matchesSearch;
+            }), ['pinned', 'title'], ['desc', 'asc']);
+        });
+        // Pinned and regular lists
+        this.pinnedList = computed(() => this.orderedList().filter((c) => c.pinned));
+        this.regularList = computed(() => this.orderedList().filter((c) => !c.pinned));
+        this.tabs = computed(() => {
+            const uniqueOrderedWidgets = orderBy(uniqBy([{ name: 'all', title: 'All', order: 0 }, ...this.widgets.map(c => c.group)], (c) => c.name // or another property to ensure uniqueness
+            ), (c) => c.order);
+            return uniqueOrderedWidgets;
+        });
+        this.currentTabIndex = signal(0);
+        this.selectedTab = computed(() => this.tabs()[this.currentTabIndex()]);
+    }
+    async ngOnInit() {
+        super.ngOnInit();
+        const pinnedWidgets = (await this.settingService.get(this.pinnedSettingKey)) || [];
+        this.displayWidgets.set(this.widgets.map((c) => ({ ...c, pinned: pinnedWidgets.includes(c.id), icon: c.icon ?? 'fa-solid fa-file-invoice' })));
+    }
+    handleTabChange(event) {
+        const indx = event.index;
+        if (this.currentTabIndex() != indx) {
+            this.currentTabIndex.set(indx);
+        }
+    }
+    handleClick(event, widget) {
+        if (event.ctrlKey) {
+            const currentSelection = this.selectedWidgets();
+            const isAlreadySelected = currentSelection.some((w) => w === widget);
+            if (isAlreadySelected) {
+                // Deselect widget if already selected
+                this.selectedWidgets.set(currentSelection.filter((w) => w !== widget));
+            }
+            else {
+                // Add widget to selection
+                this.selectedWidgets.set([...currentSelection, widget]);
+            }
+        }
+        else {
+            // If CTRL is not pressed, select only the clicked widget
+            this.close({ widgets: [widget] });
+        }
+    }
+    async handlePinClick(e, widget) {
+        e.stopPropagation();
+        widget.pinned = !widget.pinned;
+        // Get the current list of pinned widgets from settings
+        let pinnedWidgets = (await this.settingService.get(this.pinnedSettingKey)) || [];
+        // Update the list of pinned widgets based on the pinned status
+        if (widget.pinned) {
+            if (!pinnedWidgets.includes(widget.id)) {
+                pinnedWidgets.push(widget.id);
+            }
+        }
+        else {
+            pinnedWidgets = pinnedWidgets.filter((name) => name !== widget.id);
+        }
+        // Save the updated list of pinned widgets
+        await this.settingService.scope(AXPSettingScope.User).set(this.pinnedSettingKey, pinnedWidgets);
+        // Trigger a re-render of the widgets
+        this.displayWidgets.set([...this.displayWidgets()]);
+    }
+    // Check if a widget is selected
+    isWidgetSelected(widget) {
+        return this.selectedWidgets().includes(widget);
+    }
+    handleConfirmSelection() {
+        this.close({ widgets: this.selectedWidgets() });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTemplateWidgetPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPTemplateWidgetPickerComponent, isStandalone: true, selector: "ng-component", inputs: { searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTerm: "searchTermChange" }, usesInheritance: true, ngImport: i0, template: "<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      <ax-tab-item [text]=\"w.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\"></ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n  <div class=\"ax-overflow-auto\" #content>\n    <div\n      class=\"ax-p-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\"\n      #sticky=\"axpSticky\"\n      [axpSticky]=\"'ax-bg-lightest ax-shadow-xl'\"\n      [stickyParent]=\"content\"\n      [stickyOffset]=\"10\"\n    >\n      <ax-search-box\n        look=\"fill\"\n        placeholder=\"e.g. Button, Text, ...\"\n        [(ngModel)]=\"searchTerm\"\n        [delayTime]=\"300\"\n        [axAutoFocus]=\"true\"\n      >\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\n          (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        >\n          <div\n            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          >\n            <i\n              [ngClass]=\"w.icon\"\n              class=\"ax-text-lg group-hover:ax-text-primary-700 ax-text-on-surface-fore\"\n              [class.ax-text-primary-700]=\"isWidgetSelected(w)\"\n            ></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                } @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\"\n                ></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        <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: w }\"></ng-container>\n        }\n      </div>\n      @if(pinnedList().length) {\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        <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: w }\"></ng-container>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n@if(selectedWidgets().length) {\n<ax-footer>\n  <ax-suffix>\n    <ax-button\n      look=\"solid\"\n      color=\"primary\"\n      text=\"{{ selectedWidgets().length }} Selected\"\n      (onClick)=\"handleConfirmSelection()\"\n    ></ax-button>\n  </ax-suffix>\n</ax-footer>\n}\n", styles: [".selected-widget{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-100),var(--tw-bg-opacity, 1))}.selected-widget i{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i2.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.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: i5.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i5.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: i6.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i6.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i7.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "directive", type: AXPStickyDirective, selector: "[axpSticky]", inputs: ["axpSticky", "stickyOffset", "stickyParent", "stickyTarget"], outputs: ["isStickyChange"], exportAs: ["axpSticky"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPTemplateWidgetPickerComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [
+                        CommonModule,
+                        AXCommonModule,
+                        FormsModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXTabsModule,
+                        AXSearchBoxModule,
+                        AXPStickyDirective,
+                    ], encapsulation: ViewEncapsulation.None, template: "<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      <ax-tab-item [text]=\"w.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\"></ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n  <div class=\"ax-overflow-auto\" #content>\n    <div\n      class=\"ax-p-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\"\n      #sticky=\"axpSticky\"\n      [axpSticky]=\"'ax-bg-lightest ax-shadow-xl'\"\n      [stickyParent]=\"content\"\n      [stickyOffset]=\"10\"\n    >\n      <ax-search-box\n        look=\"fill\"\n        placeholder=\"e.g. Button, Text, ...\"\n        [(ngModel)]=\"searchTerm\"\n        [delayTime]=\"300\"\n        [axAutoFocus]=\"true\"\n      >\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\n          (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        >\n          <div\n            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          >\n            <i\n              [ngClass]=\"w.icon\"\n              class=\"ax-text-lg group-hover:ax-text-primary-700 ax-text-on-surface-fore\"\n              [class.ax-text-primary-700]=\"isWidgetSelected(w)\"\n            ></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                } @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\"\n                ></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        <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: w }\"></ng-container>\n        }\n      </div>\n      @if(pinnedList().length) {\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        <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: w }\"></ng-container>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n@if(selectedWidgets().length) {\n<ax-footer>\n  <ax-suffix>\n    <ax-button\n      look=\"solid\"\n      color=\"primary\"\n      text=\"{{ selectedWidgets().length }} Selected\"\n      (onClick)=\"handleConfirmSelection()\"\n    ></ax-button>\n  </ax-suffix>\n</ax-footer>\n}\n", styles: [".selected-widget{border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-100),var(--tw-bg-opacity, 1))}.selected-widget i{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}\n"] }]
+        }] });
+
+export { AXPTemplateWidgetPickerComponent };
+//# sourceMappingURL=acorex-modules-form-template-management-template-picker.component-xiRKc4FF.mjs.map

package/fesm2022/acorex-modules-form-template-management-template-picker.component-xiRKc4FF.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-modules-form-template-management-template-picker.component-xiRKc4FF.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      <ax-tab-item [text]=\"w.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\"></ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n  <div class=\"ax-overflow-auto\" #content>\n    <div\n      class=\"ax-p-4 ax-sticky ax-top-0 ax-z-10 ax-transition-all\"\n      #sticky=\"axpSticky\"\n      [axpSticky]=\"'ax-bg-lightest ax-shadow-xl'\"\n      [stickyParent]=\"content\"\n      [stickyOffset]=\"10\"\n    >\n      <ax-search-box\n        look=\"fill\"\n        placeholder=\"e.g. Button, Text, ...\"\n        [(ngModel)]=\"searchTerm\"\n        [delayTime]=\"300\"\n        [axAutoFocus]=\"true\"\n      >\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\n          (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        >\n          <div\n            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          >\n            <i\n              [ngClass]=\"w.icon\"\n              class=\"ax-text-lg group-hover:ax-text-primary-700 ax-text-on-surface-fore\"\n              [class.ax-text-primary-700]=\"isWidgetSelected(w)\"\n            ></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                } @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\"\n                ></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        <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: w }\"></ng-container>\n        }\n      </div>\n      @if(pinnedList().length) {\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        <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: w }\"></ng-container>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n@if(selectedWidgets().length) {\n<ax-footer>\n  <ax-suffix>\n    <ax-button\n      look=\"solid\"\n      color=\"primary\"\n      text=\"{{ selectedWidgets().length }} Selected\"\n      (onClick)=\"handleConfirmSelection()\"\n    ></ax-button>\n  </ax-suffix>\n</ax-footer>\n}\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-xiRKc4FF.mjs').then((c) => c.AXPTemplateWidgetPickerComponent);
         const widgets = await this.items({
             skip: 0,
             take: 100,