@acorex/platform 18.0.6 → 18.0.8

package/fesm2022/acorex-platform-widgets.mjs

@@ -31,6 +31,8 @@ import * as i4$1 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import * as i5 from '@acorex/components/uploader';
 import { AXUploaderModule } from '@acorex/components/uploader';
+import { AXDataSource } from '@acorex/components/common';
+import { AXTranslationService } from '@acorex/core/translation';
 import { AXFormatService } from '@acorex/core/format';
 import { isNumber } from 'lodash-es';
 import * as i1$2 from '@acorex/components/number-box';
@@ -40,6 +42,7 @@ import { AXPasswordBoxModule } from '@acorex/components/password-box';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i2$4 from '@acorex/components/selection-list';
 import { AXSelectionListModule } from '@acorex/components/selection-list';
+import { AXPlatform } from '@acorex/core/platform';
 import * as i2$5 from '@acorex/components/switch';
 import { AXSwitchModule } from '@acorex/components/switch';
 
@@ -209,7 +212,7 @@ class AXPDateTimeBoxWidgetEditComponent extends AXPWidgetBase {
       <ax-button class="ax-col-span-2" [text]="!internalValue().length ? 'Add New' : 'Add Another'" look="twotone" (onClick)="addItem()"></ax-button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$1.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "allowTyping", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { 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: i3$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3$2.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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXDateTimeBoxModule }, { kind: "component", type: i3$1.AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { 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: i3$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3$2.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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPDateTimeBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -616,7 +619,7 @@ class AXPEmailBoxWidgetEditComponent extends AXPWidgetBase {
         </ax-prefix>
       </ax-button>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { 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: i3$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$2.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: AXSelectBoxModule }, { kind: "component", type: i6.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { 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: i3$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$2.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: AXSelectBoxModule }, { kind: "component", type: i6.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPEmailBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -1706,6 +1709,601 @@ const AXPGalleryWidget = {
     }
 };
 
+class AXPLinkWidgetViewComponent extends AXPWidgetBase {
+    constructor() {
+        super(...arguments);
+        this.clipboard = inject(AXPClipBoardService);
+        this.target = 'blank';
+        this.internalValue = computed(() => this.getValue()
+            ? Array.isArray(this.getValue())
+                ? this.getValue().map((item) => this.extractItem(item))
+                : [this.extractItem(this.getValue())]
+            : []);
+    }
+    extractItem(item) {
+        return typeof item == 'object'
+            ? {
+                value: item.value ?? '-',
+                title: item.title,
+                label: this.hasLabel ? item.label || 'primary' : undefined,
+                icon: item.icon,
+            }
+            : {
+                value: item,
+                title: '',
+                icon: '',
+                label: 'Primary',
+            };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLinkWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPLinkWidgetViewComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<div class="ax-grid ax-grid-cols-12 ax-gap-2 ">
+    @if(multiple){ @for(item of internalValue();track item?.value) {
+    <ng-template [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ data: item }" ]></ng-template>
+    } } @else{
+    <ng-template [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ data: internalValue()[0] }" ]></ng-template>
+    }
+
+    <ng-template #itemTemplate let-item="data">
+      @if(item){
+      <div class="ax-col-start-1 ax-col-end-10 lg:ax-col-end-7">
+        <div class="ax-flex ax-flex-1 ax-gap-3 ax-items-center ax-w-max ax-group">
+          <div class="ax-w-6 ax-h-6 ax-flex ax-items-center ax-justify-center">
+            @if(item.icon){
+            <ax-icon class="fa-solid ax-text-neutral-400" [class]="item.icon"> </ax-icon>
+            }
+          </div>
+          <a
+            [href]="item.value"
+            [target]="'_' + target"
+            class="group-hover:!ax-text-primary-500"
+            >{{ item.title ?? item.value }}</a
+          >
+          <span
+            class="ax-text-neutral-400  ax-cursor-pointer ax-invisible group-hover:ax-visible hover:!ax-text-primary-500"
+            (click)="clipboard.copy('Email', item.value)"
+          >
+            <i class="fa-solid fa-copy "></i>
+          </span>
+          @if(hasLabel){
+          <ax-badge color="primary" [look]="'twotone'" [text]="item.label"></ax-badge>
+          }
+        </div>
+      </div>
+      }
+    </ng-template>
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLinkWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `<div class="ax-grid ax-grid-cols-12 ax-gap-2 ">
+    @if(multiple){ @for(item of internalValue();track item?.value) {
+    <ng-template [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ data: item }" ]></ng-template>
+    } } @else{
+    <ng-template [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ data: internalValue()[0] }" ]></ng-template>
+    }
+
+    <ng-template #itemTemplate let-item="data">
+      @if(item){
+      <div class="ax-col-start-1 ax-col-end-10 lg:ax-col-end-7">
+        <div class="ax-flex ax-flex-1 ax-gap-3 ax-items-center ax-w-max ax-group">
+          <div class="ax-w-6 ax-h-6 ax-flex ax-items-center ax-justify-center">
+            @if(item.icon){
+            <ax-icon class="fa-solid ax-text-neutral-400" [class]="item.icon"> </ax-icon>
+            }
+          </div>
+          <a
+            [href]="item.value"
+            [target]="'_' + target"
+            class="group-hover:!ax-text-primary-500"
+            >{{ item.title ?? item.value }}</a
+          >
+          <span
+            class="ax-text-neutral-400  ax-cursor-pointer ax-invisible group-hover:ax-visible hover:!ax-text-primary-500"
+            (click)="clipboard.copy('Email', item.value)"
+          >
+            <i class="fa-solid fa-copy "></i>
+          </span>
+          @if(hasLabel){
+          <ax-badge color="primary" [look]="'twotone'" [text]="item.label"></ax-badge>
+          }
+        </div>
+      </div>
+      }
+    </ng-template>
+  </div>`,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXBadgeModule, AXDecoratorModule],
+                    inputs: [],
+                }]
+        }] });
+
+var linkWidgetView_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPLinkWidgetViewComponent: AXPLinkWidgetViewComponent
+});
+
+class AXPLinkWidgetEditComponent extends AXPWidgetBase {
+    constructor() {
+        super(...arguments);
+        this.validationService = inject(AXValidationService);
+        this.translateService = inject(AXTranslationService);
+        this.disabled = false;
+        this.clearButton = true;
+        this.hasLabel = true;
+        this.hasTitle = true;
+        this.labelTypes = ['Primary', 'Secondary'];
+        this.linkTypes = ['http', 'https', 'related'];
+        this.dataSource = new AXDataSource({
+            pageSize: 10,
+            key: 'id',
+            load: (e) => {
+                return new Promise((resolve) => {
+                    setTimeout(() => {
+                        const list = this.linkTypes;
+                        const result = e.filter ? list.filter((item) => item.includes(e.filter?.value)) : list;
+                        resolve({
+                            items: result.slice(e.skip, e.skip + e.take),
+                            total: result.length,
+                        });
+                    }, e.skip == 0 ? 100 : 300);
+                });
+            },
+        });
+        this.internalValue = computed(() => this.getValueAsArrayOfObjects());
+        this._validationRules = [];
+        this.convertItem = (item, e) => {
+            if (typeof item === 'object')
+                return { ...item, value: e.value };
+            else
+                return e.value;
+        };
+        this.validateFn = async (val) => {
+            const urlRegex = /^([a-zA-Z0-9.-]+\.[a-zA-Z]{2,})(\/[a-zA-Z0-9._~:/?#\[\]@!$&'()*+,;=-]*)?$/;
+            const isValid = urlRegex.test(val);
+            const translatedMessage = await this.translateService.translateAsync('validation.messages.url');
+            return {
+                rule: 'callback',
+                result: isValid,
+                message: translatedMessage,
+                value: val,
+            };
+        };
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.getValueAsArrayOfObjects();
+    }
+    get validationRules() {
+        return this._validationRules;
+    }
+    set validationRules(v) {
+        this._validationRules = v;
+    }
+    getValueAsArrayOfObjects() {
+        const value = this.getValue();
+        if (Array.isArray(value)) {
+            return value.map((item) => {
+                typeof item === 'object'
+                    ? {
+                        value: item.value ?? '-',
+                        title: item.title,
+                        protocol: item.protocol ?? 'https',
+                        label: this.hasLabel ? item.label || 'primary' : undefined,
+                        icon: item.icon,
+                    }
+                    : {
+                        value: item,
+                        title: '',
+                        icon: '',
+                        protocol: 'https',
+                        label: this.hasLabel ? 'Primary' : undefined,
+                    };
+            });
+        }
+        return typeof value === 'object' ? [value] : [{ value: value || '' }];
+    }
+    handleValueChange(e, selectedIndex) {
+        const { name, value, isUserInteraction } = e;
+        if (isUserInteraction) {
+            console.log(e);
+            const newValues = this.internalValue().map((item, index) => selectedIndex === index ? (name === 'value' ? this.convertItem(item, e) : { ...item, [name]: value }) : item);
+            console.log(newValues);
+            if (this.multiple)
+                this.setValue(newValues);
+            else
+                this.setValue(newValues[0]);
+        }
+    }
+    // protected handleLabelChange(e: AXValueChangedEvent, selectedIndex: number) {
+    //   if (e.isUserInteraction) {
+    //     const newValues = this.internalValue().map((item, index) => (selectedIndex === index ? { ...item, label: e.value } : item));
+    //     if (this.multiple) this.setValue(newValues);
+    //     else this.setValue(newValues[0]);
+    //   }
+    // }
+    addItem() {
+        const newValues = [...this.internalValue(), ''];
+        this.setValue(newValues);
+    }
+    deleteItem(deletedIndex) {
+        const newValues = this.internalValue().filter((_, index) => index != deletedIndex);
+        this.setValue(newValues);
+    }
+    generateClasses(elementName) {
+        switch (elementName) {
+            case 'url':
+                if (this.hasTitle || this.hasLabel) {
+                    //already has ax-col-start-1 ax-col-end-13
+                    return ['lg:ax-col-end-7'];
+                }
+                else {
+                    return ['lg:ax-col-end-13'];
+                }
+            case 'title':
+                if (this.hasLabel) {
+                    return ['ax-col-start-1 ax-col-end-7 lg:ax-col-start-7 lg:ax-col-end-10'];
+                }
+                else {
+                    return ['ax-col-start-1 ax-col-end-13 lg:ax-col-start-7 lg:ax-col-end-13'];
+                }
+            case 'label':
+                if (this.hasTitle) {
+                    return ['ax-col-start-7 ax-col-end-13 lg:ax-col-start-10 lg:ax-col-end-13'];
+                }
+                else {
+                    return ['ax-col-start-1 ax-col-end-13 lg:ax-col-start-7 lg:ax-col-end-13'];
+                }
+            default:
+                return [''];
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLinkWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPLinkWidgetEditComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<div class="ax-grid ax-grid-cols-12 ax-gap-4">
+    @if(multiple){ @for(item of internalValue();track $index) { @if(item){
+    <!-- TODO need to fix multiple -->
+    <ax-text-box
+      [ngModel]="item.value"
+      (onValueChanged)="handleValueChange($event, $index)"
+      type="text"
+      placeholder="Enter Link"
+      class="ax-col-start-1 ax-col-end-13 lg:ax-col-end-7"
+      [class.lg:!ax-col-end-12]="!hasLabel"
+    >
+      <ax-prefix>
+        <ax-select-box
+          [dataSource]="linkTypes"
+          [ngModel]="item.label"
+          (onValueChanged)="handleValueChange($event, $index)"
+          [look]="'fill'"
+          placeholder="Choose..."
+        >
+        </ax-select-box>
+      </ax-prefix>
+      @for (validation of validationRules; track $index) {
+      <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+      }
+      <ax-validation-rule message="field can't be empty" rule="required"> </ax-validation-rule>
+      <ax-validation-rule message="field can't be empty" rule="callback" [options]="{ validate: validateFn }"> </ax-validation-rule>
+    </ax-text-box>
+    @if(hasLabel){
+    <ax-select-box
+      [dataSource]="labelTypes"
+      [ngModel]="item.label"
+      (onValueChanged)="handleValueChange($event, $index)"
+      placeholder="Choose Label..."
+      class="ax-col-start-1 ax-col-end-11 lg:ax-col-start-7 lg:ax-col-end-13"
+    >
+      <ax-clear-button></ax-clear-button>
+    </ax-select-box>
+    }
+    <ax-button
+      look="twotone"
+      color="danger"
+      (onClick)="deleteItem($index)"
+      class="ax-col-start-11 ax-col-end-13 lg:ax-col-start-12 lg:ax-col-end-13 ax-justify-self-end"
+    >
+      <ax-icon icon="fa-regular fa-xmark"></ax-icon>
+    </ax-button>
+    }
+    <ax-button
+      [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
+      look="twotone"
+      (onClick)="addItem()"
+      class="ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13"
+    >
+      <ax-prefix>
+        <ax-icon class="fa-solid fa-add"></ax-icon>
+      </ax-prefix>
+    </ax-button>
+    } } @else{
+    <ax-text-box
+      [ngClass]="generateClasses('url')"
+      [ngModel]="internalValue()[0].value"
+      (onValueChanged)="handleValueChange($event, 0)"
+      type="text"
+      name="value"
+      placeholder="Link"
+      class="ax-col-start-1 ax-col-end-13"
+    >
+      <ax-prefix
+        ><ax-select-box
+          [dataSource]="linkTypes"
+          [look]="'fill'"
+          name="protocol"
+          placeholder="Protocol"
+          [ngModel]="internalValue()[0].protocol"
+          (onValueChanged)="handleValueChange($event, 0)"
+        >
+          <!-- <ax-validation-rule message="field can't be empty" rule="required"> </ax-validation-rule> -->
+          <ax-clear-button></ax-clear-button> </ax-select-box
+      ></ax-prefix>
+      @for (validation of validationRules; track $index) {
+      <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+      }
+      <ax-validation-rule message="field can't be empty" rule="required"> </ax-validation-rule>
+      <ax-validation-rule message="field can't be empty" rule="callback" [options]="{ validate: validateFn }"> </ax-validation-rule>
+    </ax-text-box>
+    @if(hasTitle){
+    <ax-text-box
+      [ngClass]="generateClasses('title')"
+      [ngModel]="internalValue()[0].title"
+      (onValueChanged)="handleValueChange($event, 0)"
+      type="text"
+      name="title"
+      placeholder="Title"
+    >
+    </ax-text-box>
+    } @if(hasLabel){
+    <ax-select-box
+      [ngClass]="generateClasses('label')"
+      [dataSource]="labelTypes"
+      [ngModel]="internalValue()[0].label"
+      (onValueChanged)="handleValueChange($event, 0)"
+      name="label"
+      placeholder="Label"
+    >
+    </ax-select-box>
+    } }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i6.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { 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: i3$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3$2.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: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLinkWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `<div class="ax-grid ax-grid-cols-12 ax-gap-4">
+    @if(multiple){ @for(item of internalValue();track $index) { @if(item){
+    <!-- TODO need to fix multiple -->
+    <ax-text-box
+      [ngModel]="item.value"
+      (onValueChanged)="handleValueChange($event, $index)"
+      type="text"
+      placeholder="Enter Link"
+      class="ax-col-start-1 ax-col-end-13 lg:ax-col-end-7"
+      [class.lg:!ax-col-end-12]="!hasLabel"
+    >
+      <ax-prefix>
+        <ax-select-box
+          [dataSource]="linkTypes"
+          [ngModel]="item.label"
+          (onValueChanged)="handleValueChange($event, $index)"
+          [look]="'fill'"
+          placeholder="Choose..."
+        >
+        </ax-select-box>
+      </ax-prefix>
+      @for (validation of validationRules; track $index) {
+      <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+      }
+      <ax-validation-rule message="field can't be empty" rule="required"> </ax-validation-rule>
+      <ax-validation-rule message="field can't be empty" rule="callback" [options]="{ validate: validateFn }"> </ax-validation-rule>
+    </ax-text-box>
+    @if(hasLabel){
+    <ax-select-box
+      [dataSource]="labelTypes"
+      [ngModel]="item.label"
+      (onValueChanged)="handleValueChange($event, $index)"
+      placeholder="Choose Label..."
+      class="ax-col-start-1 ax-col-end-11 lg:ax-col-start-7 lg:ax-col-end-13"
+    >
+      <ax-clear-button></ax-clear-button>
+    </ax-select-box>
+    }
+    <ax-button
+      look="twotone"
+      color="danger"
+      (onClick)="deleteItem($index)"
+      class="ax-col-start-11 ax-col-end-13 lg:ax-col-start-12 lg:ax-col-end-13 ax-justify-self-end"
+    >
+      <ax-icon icon="fa-regular fa-xmark"></ax-icon>
+    </ax-button>
+    }
+    <ax-button
+      [text]="internalValue().length == 0 ? 'Add New' : 'Add Another'"
+      look="twotone"
+      (onClick)="addItem()"
+      class="ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13"
+    >
+      <ax-prefix>
+        <ax-icon class="fa-solid fa-add"></ax-icon>
+      </ax-prefix>
+    </ax-button>
+    } } @else{
+    <ax-text-box
+      [ngClass]="generateClasses('url')"
+      [ngModel]="internalValue()[0].value"
+      (onValueChanged)="handleValueChange($event, 0)"
+      type="text"
+      name="value"
+      placeholder="Link"
+      class="ax-col-start-1 ax-col-end-13"
+    >
+      <ax-prefix
+        ><ax-select-box
+          [dataSource]="linkTypes"
+          [look]="'fill'"
+          name="protocol"
+          placeholder="Protocol"
+          [ngModel]="internalValue()[0].protocol"
+          (onValueChanged)="handleValueChange($event, 0)"
+        >
+          <!-- <ax-validation-rule message="field can't be empty" rule="required"> </ax-validation-rule> -->
+          <ax-clear-button></ax-clear-button> </ax-select-box
+      ></ax-prefix>
+      @for (validation of validationRules; track $index) {
+      <ax-validation-rule [rule]="validation.rule" [message]="validation.options?.message" [options]="validation.options"></ax-validation-rule>
+      }
+      <ax-validation-rule message="field can't be empty" rule="required"> </ax-validation-rule>
+      <ax-validation-rule message="field can't be empty" rule="callback" [options]="{ validate: validateFn }"> </ax-validation-rule>
+    </ax-text-box>
+    @if(hasTitle){
+    <ax-text-box
+      [ngClass]="generateClasses('title')"
+      [ngModel]="internalValue()[0].title"
+      (onValueChanged)="handleValueChange($event, 0)"
+      type="text"
+      name="title"
+      placeholder="Title"
+    >
+    </ax-text-box>
+    } @if(hasLabel){
+    <ax-select-box
+      [ngClass]="generateClasses('label')"
+      [dataSource]="labelTypes"
+      [ngModel]="internalValue()[0].label"
+      (onValueChanged)="handleValueChange($event, 0)"
+      name="label"
+      placeholder="Label"
+    >
+    </ax-select-box>
+    } }
+  </div>`,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXSelectBoxModule,
+                        AXFormModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXSelectBoxModule,
+                        AXTextBoxModule,
+                        AXValidationModule,
+                    ],
+                    inputs: [],
+                }]
+        }] });
+
+var linkWidgetEdit_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPLinkWidgetEditComponent: AXPLinkWidgetEditComponent
+});
+
+class AXPLinkWidgetFilterComponent extends AXPWidgetBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLinkWidgetFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXPLinkWidgetFilterComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLinkWidgetFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, FormsModule],
+                    inputs: []
+                }]
+        }] });
+
+var linkWidgetFilter_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPLinkWidgetFilterComponent: AXPLinkWidgetFilterComponent
+});
+
+class AXPLinkWidgetColumnComponent extends AXPColumnWidgetBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLinkWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXPLinkWidgetColumnComponent, isStandalone: true, selector: "ng-component", inputs: { rawValue: "rawValue" }, usesInheritance: true, ngImport: i0, template: `{{rawValue}}`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLinkWidgetColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `{{rawValue}}`,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule],
+                    inputs: ['rawValue']
+                }]
+        }] });
+
+var linkWidgetColumn_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPLinkWidgetColumnComponent: AXPLinkWidgetColumnComponent
+});
+
+class AXPLinkWidgetPrintComponent extends AXPWidgetBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLinkWidgetPrintComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXPLinkWidgetPrintComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLinkWidgetPrintComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule],
+                    inputs: []
+                }]
+        }] });
+
+var linkWidgetPrint_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPLinkWidgetPrintComponent: AXPLinkWidgetPrintComponent
+});
+
+class AXPLinkWidgetDesignerComponent extends AXPWidgetBase {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLinkWidgetDesignerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: AXPLinkWidgetDesignerComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPLinkWidgetDesignerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule],
+                    inputs: []
+                }]
+        }] });
+
+var linkWidgetDesigner_component = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AXPLinkWidgetDesignerComponent: AXPLinkWidgetDesignerComponent
+});
+
+const AXPLinkWidget = {
+    name: "link-box",
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return linkWidgetView_component; }).then((c) => c.AXPLinkWidgetViewComponent),
+        },
+        edit: {
+            component: () => Promise.resolve().then(function () { return linkWidgetEdit_component; }).then((c) => c.AXPLinkWidgetEditComponent),
+        },
+        filter: {
+            component: () => Promise.resolve().then(function () { return linkWidgetFilter_component; }).then((c) => c.AXPLinkWidgetFilterComponent),
+        },
+        column: {
+            component: () => Promise.resolve().then(function () { return linkWidgetColumn_component; }).then((c) => c.AXPLinkWidgetColumnComponent),
+        },
+        print: {
+            component: () => Promise.resolve().then(function () { return linkWidgetPrint_component; }).then((c) => c.AXPLinkWidgetPrintComponent),
+        },
+        designer: {
+            component: () => Promise.resolve().then(function () { return linkWidgetDesigner_component; }).then((c) => c.AXPLinkWidgetDesignerComponent),
+        },
+    }
+};
+
 class AXPMapBoxWidgetViewComponent extends AXPWidgetBase {
     constructor() {
         super(...arguments);
@@ -2026,6 +2624,7 @@ class AXPNumberBoxWidgetEditComponent extends AXPWidgetBase {
         this.clearButton = true;
         this.placeholder = null;
         this.disabled = false;
+        this.format = { name: '' };
         this.multiple = false;
         this.decimals = 0;
         this.validationService = inject(AXValidationService);
@@ -2033,14 +2632,14 @@ class AXPNumberBoxWidgetEditComponent extends AXPWidgetBase {
         this.internalValue = computed(() => (Array.isArray(this.getValue()) ? this.getValue() : [this.getValue()]));
         this.validateFn = async (value, options) => {
             const vn = this.validationService.ruleFor(value);
-            this.validationRules.forEach(v => {
+            this.validationRules.forEach((v) => {
                 const options = { ...v.options };
                 if (v.message)
                     options.message = v.message;
                 vn.addRule(v.rule, options);
             });
             const a = await vn.validate();
-            return { result: a.result, message: a.rules.find(c => !c.result)?.message };
+            return { result: a.result, message: a.rules.find((c) => !c.result)?.message };
         };
     }
     handleValueChange(e, i) {
@@ -2061,18 +2660,19 @@ class AXPNumberBoxWidgetEditComponent extends AXPWidgetBase {
         this.setValue(newValues);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPNumberBoxWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPNumberBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", inputs: { validationRules: "validationRules", multiple: "multiple", disabled: "disabled" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPNumberBoxWidgetEditComponent, isStandalone: true, selector: "ng-component", inputs: { validationRules: "validationRules", multiple: "multiple", disabled: "disabled", format: "format" }, usesInheritance: true, ngImport: i0, template: `
     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
       @for(number of internalValue(); track $index){
       <ax-number-box
         class="ax-col-span-12"
         [decimals]="decimals"
+        [thousandsSeparator]="format.name === 'number' ? ',' : ''"
         [placeholder]="placeholder"
         [ngModel]="number"
         (onValueChanged)="handleValueChange($event, $index)"
         [disabled]="disabled"
       >
-          <ax-validation-rule  rule="callback" [options]="{validate:validateFn}"></ax-validation-rule>
+        <ax-validation-rule rule="callback" [options]="{ validate: validateFn }"></ax-validation-rule>
         @if(clearButton){<ax-clear-button></ax-clear-button>} @if(multiple){
         <ax-suffix>
           <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
@@ -2105,12 +2705,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
       <ax-number-box
         class="ax-col-span-12"
         [decimals]="decimals"
+        [thousandsSeparator]="format.name === 'number' ? ',' : ''"
         [placeholder]="placeholder"
         [ngModel]="number"
         (onValueChanged)="handleValueChange($event, $index)"
         [disabled]="disabled"
       >
-          <ax-validation-rule  rule="callback" [options]="{validate:validateFn}"></ax-validation-rule>
+        <ax-validation-rule rule="callback" [options]="{ validate: validateFn }"></ax-validation-rule>
         @if(clearButton){<ax-clear-button></ax-clear-button>} @if(multiple){
         <ax-suffix>
           <ax-button class="ax-border-s" (onClick)="deleteItem($index)" look="blank" color="danger">
@@ -2136,7 +2737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CommonModule, AXNumberBoxModule, FormsModule, AXDecoratorModule, AXFormModule, AXButtonModule],
-                    inputs: ['validationRules', 'multiple', 'disabled'],
+                    inputs: ['validationRules', 'multiple', 'disabled', 'format'],
                 }]
         }] });
 
@@ -2618,8 +3219,10 @@ class AXPPhoneBoxWidgetEditComponent extends AXPWidgetBase {
             const newValues = this.internalValue().map((item, index) => (selectedIndex === index ? { ...item, value: e.value } : item));
             if (this.multiple)
                 this.setValue(newValues);
-            else
+            else if (this.hasLabel)
                 this.setValue(newValues[0]);
+            else
+                this.setValue(newValues[0].value);
         }
     }
     handleLabelChange(e, selectedIndex) {
@@ -2708,7 +3311,7 @@ class AXPPhoneBoxWidgetEditComponent extends AXPWidgetBase {
         </ax-prefix>
       </ax-button>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { 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: i3$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$2.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: AXSelectBoxModule }, { kind: "component", type: i6.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { 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: i3$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$2.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: AXSelectBoxModule }, { kind: "component", type: i6.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i7.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXValidationModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPPhoneBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -3245,7 +3848,7 @@ class AXPSelectBoxWidgetEditComponent extends AXPWidgetBase {
     >
       <ax-clear-button></ax-clear-button>
     </ax-select-box>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i6.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i6.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "textTemplate", "dataSource", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPSelectBoxWidgetEditComponent, decorators: [{
             type: Component,
@@ -3655,6 +4258,7 @@ class AXPSignatureWidgetEditComponent extends AXPWidgetBase {
     constructor() {
         super(...arguments);
         this.editMode = signal(false);
+        this.platform = inject(AXPlatform);
         this.changeModeEffect = effect(() => {
             if (this.editMode()) {
                 setTimeout(() => {
@@ -3671,7 +4275,15 @@ class AXPSignatureWidgetEditComponent extends AXPWidgetBase {
         const pad = await import('signature_pad');
         this.signaturePad = new pad.default(this.padCanvas.nativeElement, {});
         this.signaturePad.addEventListener('afterUpdateStroke', () => {
-            this.setValue(this.getDataURL());
+            if (window) {
+                //fix canvas ViewBox issue on mobile devices
+                const prevDPR = window.devicePixelRatio;
+                if (this.platform.is('SM')) {
+                    window.devicePixelRatio = 1;
+                }
+                this.setValue(this.getDataURL());
+                window.devicePixelRatio = prevDPR;
+            }
         });
     }
     clear() {
@@ -3823,7 +4435,7 @@ class AXPSignatureWidgetViewComponent extends AXPWidgetBase {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AXPSignatureWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AXPSignatureWidgetViewComponent, isStandalone: true, selector: "axp-signature-widget", usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-w-72 ax-h-36 ax-border ax-rounded-md ax-flex ax-justify-center ax-items-center">
+    <div class="ax-w-full md:ax-w-auto ax-h-36 ax-border ax-rounded-md ax-flex ax-justify-center ax-items-center">
       @if(internalValue()){
       <ax-image [src]="internalValue()"></ax-image>
       }@else{
@@ -3837,7 +4449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             args: [{
                     selector: 'axp-signature-widget',
                     template: `
-    <div class="ax-w-72 ax-h-36 ax-border ax-rounded-md ax-flex ax-justify-center ax-items-center">
+    <div class="ax-w-full md:ax-w-auto ax-h-36 ax-border ax-rounded-md ax-flex ax-justify-center ax-items-center">
       @if(internalValue()){
       <ax-image [src]="internalValue()"></ax-image>
       }@else{
@@ -4400,6 +5012,7 @@ class AXPWidgetsModule {
                     AXPMapBoxWidget,
                     AXPPhoneBoxWidget,
                     AXPEmailBoxWidget,
+                    AXPLinkWidget,
                     AXPFileBoxWidget,
                     AXPPasswordBoxWidget,
                     AXPGalleryWidget,
@@ -4425,6 +5038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                                 AXPMapBoxWidget,
                                 AXPPhoneBoxWidget,
                                 AXPEmailBoxWidget,
+                                AXPLinkWidget,
                                 AXPFileBoxWidget,
                                 AXPPasswordBoxWidget,
                                 AXPGalleryWidget,